# Cards

`Cards` arranges `Card` children in a numbered horizontal collection with scrolling controls when the track overflows.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { Cards, Card } from "@dg/ui";
</script>

<Cards label="Resources">
  <Card title="Collection" href="/artworks"><p>Browse the works.</p></Card>
  <Card title="About" href="/about"><p>Read about the project.</p></Card>
  <Card title="Archive" href="/archive"><p>Explore earlier projects.</p></Card>
</Cards>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the outer section.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- Boundary controls use `--disabled-opacity` but remain focusable with guarded activation; inset focus uses the shared stroke and color.
- The scrolling group and the previous and next controls use built-in names in the `Page` language.
- Mouse dragging suppresses accidental clicks. Touch, trackpads and keyboard scrolling remain native; reduced motion disables smooth scrolling.

## Parameters

| Name       | Type      | Default     | Description                                                                                                                     |
| ---------- | --------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------- |
| `label`    | `string`  | `undefined` | Accessible name of the card collection, such as "Artworks". Defaults to the built-in text in the `Page` language.               |
| `numbered` | `boolean` | `true`      | Automatically number `Cards` children that do not supply their own num.                                                         |
| `minWidth` | `string`  | `"17.5rem"` | Preferred minimum card width as a CSS length. Narrow containers still fit one card; an overflowing track reveals the next card. |
| `children` | `Snippet` | `undefined` | Direct `Card` children. Controls appear only when the track overflows.                                                          |

## Accessibility

Give the collection a useful label in the audience language; `Page`'s `lang` translates the built-in control names. The overflowing track is keyboard-focusable and scrolls natively. Previous/Next controls remain focusable at their boundaries with aria-disabled. There is no automatic scrolling.