reel
Horizontal scroll with snap. Scrolling is the browser's; snap is CSS.
Example
slide 1
slide 2
slide 3
slide 4
slide 5
slide 6
Basic usage
<m-reel gap="md" snap="mandatory" tabindex="0" role="region" aria-label="screenshots">…</m-reel>API
Attributes
| Name | Type/Values | Default | Description |
|---|---|---|---|
gap | none · 2xs · xs · sm · md · lg · xl · 2xl | md | Sets the space between items. |
snap | none · mandatory | proximity | Controls horizontal scroll snapping. |
Content/markup contract
| Name | Type/Values | Default | Description |
|---|---|---|---|
| Children | reel items | — | Direct children do not shrink and snap at their start edge. |
Accessibility
A scrollable region must be keyboard-reachable — CSS cannot confer focusability, so the recipe carries it: tabindex="0" plus an accessible name (role="region" aria-label="…"). Without it, keyboard users cannot scroll the reel in some browsers.