diff --git a/.changeset/two-hard-ones.md b/.changeset/two-hard-ones.md
new file mode 100644
index 0000000..0ffa937
--- /dev/null
+++ b/.changeset/two-hard-ones.md
@@ -0,0 +1,54 @@
+---
+'sve-ui': minor
+---
+
+Two new components: `Carousel` and `Resizable`.
+
+Both hand-built — Bits UI ships neither — and neither adds a dependency. These are
+the Tier 2 gaps from the same catalog diff that produced `Kbd`, `ButtonGroup`,
+`Empty` and `InputGroup`: harder than those four, because both have real behaviour
+and a real accessibility contract rather than just a styling problem.
+
+**`Carousel`** is built on CSS scroll-snap rather than transforms, which is what
+buys touch swiping, trackpad flicks, momentum and the browser's own arrow-key
+scrolling for free. Position is _read_ from the scroll container on every scroll
+and never remembered: a swipe, a flick and the arrow keys are all drivers a
+component cannot intercept, and a stored index would disagree with the screen
+after any of them — which would make the "3 of 5" slide label a lie.
+
+Two things it deliberately does not do:
+
+- **It does not loop.** An infinite track makes "slide 3 of 5" meaningless and
+  removes the only honest position affordance a carousel has: a Previous or Next
+  that goes flat at the boundary.
+- **It does not auto-rotate.** That is only acceptable with a visible pause
+  control, and stopping on hover, and stopping on focus, and honouring
+  `prefers-reduced-motion` — a chain that gets half-built more often than not.
+  `useCarousel()` exposes `next`, `prev` and `goTo` for anyone who takes on the
+  obligation that comes with it.
+
+Previous and Next are disabled from the measured scroll extent, not the slide
+index, so they stay honest when several slides are visible at once.
+
+**`Resizable`** implements the APG window-splitter pattern, which is mostly a
+keyboard contract — and that is the half every hand-rolled divider skips. The
+handle is a focusable `separator` with `aria-orientation` and live
+`aria-valuenow`; arrow keys move it, Home and End collapse and expand. `label` is
+required, because "splitter, 40" names a number and not the thing it sizes.
+
+A drag moves one boundary and touches exactly two panes, clamped against _both_
+of their limits before anything is applied. Clamping only the pane being grown is
+what lets its neighbour shrink past its own minimum, and distributing a drag
+across the whole group is what makes resizing a sidebar quietly reflow the far
+side of a layout. It does not persist sizes: where that belongs is an application
+decision.
+
+Two smaller notes:
+
+- The drag uses `setPointerCapture`, so it survives the pointer leaving a
+  hairline target — which it does immediately — and the grabbable area is grown to
+  12px by a pseudo-element, so the divider can stay 1px wide without being
+  unreasonable to hit.
+- `Resizable.Pane` registers its `min`/`max` as getters. Registration happens once
+  at init because the handle beside it needs an index and id on first render, and
+  snapshotting the numbers there would freeze limits that depend on state.
diff --git a/apps/docs/render-baseline.json b/apps/docs/render-baseline.json
index 62ee540..5f3c072 100644
--- a/apps/docs/render-baseline.json
+++ b/apps/docs/render-baseline.json
@@ -1,263 +1,271 @@
 {
   "components.html": {
-    "elements": 709,
-    "hash": "332fdabcd63893d7"
+    "elements": 729,
+    "hash": "36b67426a9bb46c1"
   },
   "components/accordion.html": {
-    "elements": 341,
-    "hash": "3b213d024fa1b54d"
+    "elements": 345,
+    "hash": "5a9ea1d304893cb5"
   },
   "components/alert-dialog.html": {
-    "elements": 683,
-    "hash": "88eec42746d68d7a"
+    "elements": 687,
+    "hash": "2664831fb134d30b"
   },
   "components/alert.html": {
-    "elements": 369,
-    "hash": "3d7c4b7c77c02879"
+    "elements": 373,
+    "hash": "76201e5d23d108fd"
   },
   "components/aspect-ratio.html": {
-    "elements": 307,
-    "hash": "76f476c4d2a03099"
+    "elements": 311,
+    "hash": "932daa2c2d566523"
   },
   "components/avatar.html": {
-    "elements": 489,
-    "hash": "27cd1e8df09b6861"
+    "elements": 493,
+    "hash": "d2708db2209a3de6"
   },
   "components/badge.html": {
-    "elements": 317,
-    "hash": "b736b3bc1b0ec15e"
+    "elements": 321,
+    "hash": "aeb5262b57e3b2b5"
   },
   "components/breadcrumb.html": {
-    "elements": 342,
-    "hash": "cc55c699229b3d84"
+    "elements": 346,
+    "hash": "f07bdd543c55641e"
   },
   "components/busy.html": {
-    "elements": 301,
-    "hash": "fc3ac55258547f59"
+    "elements": 305,
+    "hash": "fceef033ba25a783"
   },
   "components/button-group.html": {
-    "elements": 312,
-    "hash": "17758f8d65aadafb"
+    "elements": 316,
+    "hash": "4264ea4e663c2977"
   },
   "components/button.html": {
-    "elements": 438,
-    "hash": "4b93f780128bfd65"
+    "elements": 442,
+    "hash": "0644e7f5120bf95e"
   },
   "components/calendar.html": {
-    "elements": 509,
-    "hash": "11ded231214159eb"
+    "elements": 513,
+    "hash": "a23166207adbfbdc"
   },
   "components/card.html": {
-    "elements": 392,
-    "hash": "8cbbc17dc7107aed"
+    "elements": 396,
+    "hash": "113f0697869fa6cd"
+  },
+  "components/carousel.html": {
+    "elements": 514,
+    "hash": "c62d6dc9a7c3aa03"
   },
   "components/checkbox.html": {
-    "elements": 407,
-    "hash": "0827340163b13bf1"
+    "elements": 411,
+    "hash": "c879e63193060b76"
   },
   "components/code.html": {
-    "elements": 303,
-    "hash": "9a0e3ce40e807695"
+    "elements": 307,
+    "hash": "d0ff5ada3d9e758d"
   },
   "components/collapsible.html": {
-    "elements": 447,
-    "hash": "6199acac5fb8fc93"
+    "elements": 451,
+    "hash": "5893b016acb5a9aa"
   },
   "components/combobox.html": {
-    "elements": 819,
-    "hash": "7a76447e78ec509d"
+    "elements": 823,
+    "hash": "65c24ac2061b560b"
   },
   "components/command.html": {
-    "elements": 717,
-    "hash": "af29c786620e8073"
+    "elements": 721,
+    "hash": "9f0895be74af63df"
   },
   "components/context-menu.html": {
-    "elements": 732,
-    "hash": "d2c96b1bb8c01bd4"
+    "elements": 736,
+    "hash": "afb533bcc667ed1f"
   },
   "components/date-field.html": {
-    "elements": 385,
-    "hash": "27997f87fe5df75f"
+    "elements": 389,
+    "hash": "1e3377f2751210e3"
   },
   "components/date-picker.html": {
-    "elements": 416,
-    "hash": "c4fbda49e626da17"
+    "elements": 420,
+    "hash": "15dea0d69efe586b"
   },
   "components/date-range-field.html": {
-    "elements": 383,
-    "hash": "c3fc63a830ad1be3"
+    "elements": 387,
+    "hash": "5519e79331036d02"
   },
   "components/date-range-picker.html": {
-    "elements": 443,
-    "hash": "2a2f3fba1dcf17f9"
+    "elements": 447,
+    "hash": "92d3b4ff196f2fd7"
   },
   "components/dialog.html": {
-    "elements": 627,
-    "hash": "e6469db080360afb"
+    "elements": 631,
+    "hash": "6635ef41e1f13284"
   },
   "components/dropdown-menu.html": {
-    "elements": 705,
-    "hash": "c88f7ac922bfd474"
+    "elements": 709,
+    "hash": "56102a5550179597"
   },
   "components/empty.html": {
-    "elements": 417,
-    "hash": "280223d0ec0d2fe0"
+    "elements": 421,
+    "hash": "a4fadb0001129839"
   },
   "components/field.html": {
-    "elements": 431,
-    "hash": "83a4ff847457a1cb"
+    "elements": 435,
+    "hash": "9837d270816701b5"
   },
   "components/flex.html": {
-    "elements": 333,
-    "hash": "7cebd3b7172cde30"
+    "elements": 337,
+    "hash": "e755c061477f16ae"
   },
   "components/heading.html": {
-    "elements": 330,
-    "hash": "dfa0086953d9b4e9"
+    "elements": 334,
+    "hash": "45051e3917b8436d"
   },
   "components/input-group.html": {
-    "elements": 370,
-    "hash": "38d087c48d9fb275"
+    "elements": 374,
+    "hash": "77b6b5e19493a322"
   },
   "components/input.html": {
-    "elements": 313,
-    "hash": "8dd845a7898b0a59"
+    "elements": 317,
+    "hash": "5d9a7108b85254f8"
   },
   "components/kbd.html": {
-    "elements": 332,
-    "hash": "7f12ae66f5a68839"
+    "elements": 336,
+    "hash": "8f037d302ad624ad"
   },
   "components/label.html": {
-    "elements": 348,
-    "hash": "0de1812f76cc4bee"
+    "elements": 352,
+    "hash": "128c01807126027c"
   },
   "components/link-preview.html": {
-    "elements": 580,
-    "hash": "72377331989b1642"
+    "elements": 584,
+    "hash": "ab67fa57a91d3055"
   },
   "components/menubar.html": {
-    "elements": 811,
-    "hash": "dd5672a56e1fa71d"
+    "elements": 815,
+    "hash": "89ab6f2e293a48ff"
   },
   "components/meter.html": {
-    "elements": 350,
-    "hash": "79c622d8bdc9db92"
+    "elements": 354,
+    "hash": "cb9b7ec323b35d96"
   },
   "components/navigation-menu.html": {
-    "elements": 548,
-    "hash": "9957b74eb05fc990"
+    "elements": 552,
+    "hash": "3b0546569efde694"
   },
   "components/pagination.html": {
-    "elements": 418,
-    "hash": "c650108df46f3b2b"
+    "elements": 422,
+    "hash": "706105b0a78f1f1a"
   },
   "components/pin-input.html": {
-    "elements": 457,
-    "hash": "5ab1e6221908a37b"
+    "elements": 461,
+    "hash": "6d59d5db368619c5"
   },
   "components/popover.html": {
-    "elements": 665,
-    "hash": "8945d3a4e064c0e3"
+    "elements": 669,
+    "hash": "a86b6caecbf64709"
   },
   "components/progress.html": {
-    "elements": 378,
-    "hash": "3dfb861019c1210c"
+    "elements": 382,
+    "hash": "f63f81d56f580313"
   },
   "components/radio-group.html": {
-    "elements": 463,
-    "hash": "2c163d91543392df"
+    "elements": 467,
+    "hash": "ad145d1e7ec20f63"
   },
   "components/range-calendar.html": {
-    "elements": 479,
-    "hash": "746ebde7c7ae7e15"
+    "elements": 483,
+    "hash": "d8ae6fc3005aa3ea"
   },
   "components/rating-group.html": {
-    "elements": 500,
-    "hash": "042ec265187ac9b0"
+    "elements": 504,
+    "hash": "dabaea6868cab1c5"
+  },
+  "components/resizable.html": {
+    "elements": 419,
+    "hash": "26fede51e3acab12"
   },
   "components/scroll-area.html": {
-    "elements": 412,
-    "hash": "6a2045fdc645b839"
+    "elements": 416,
+    "hash": "71e6a1dc607953d5"
   },
   "components/select.html": {
-    "elements": 795,
-    "hash": "2d5644d16ee9dd79"
+    "elements": 799,
+    "hash": "465c0b890354df7a"
   },
   "components/separator.html": {
-    "elements": 330,
-    "hash": "32791f98c412e3d3"
+    "elements": 334,
+    "hash": "c95761bae4ee787c"
   },
   "components/sheet.html": {
-    "elements": 448,
-    "hash": "9415d71a1c667c63"
+    "elements": 452,
+    "hash": "d22bcb4e9a68af8f"
   },
   "components/sidebar.html": {
-    "elements": 501,
-    "hash": "1e4436b1e3c09107"
+    "elements": 505,
+    "hash": "e1aa8cbf0d33d067"
   },
   "components/skeleton.html": {
-    "elements": 335,
-    "hash": "a085451738a9ba79"
+    "elements": 339,
+    "hash": "63f2bc6c6f8adb6e"
   },
   "components/slider.html": {
-    "elements": 340,
-    "hash": "66706a641f377763"
+    "elements": 344,
+    "hash": "5c36cfab881f233e"
   },
   "components/spinner.html": {
-    "elements": 306,
-    "hash": "23c18b319909ad07"
+    "elements": 310,
+    "hash": "c470aa1817d0c923"
   },
   "components/stack.html": {
-    "elements": 315,
-    "hash": "5b11a52f0fdae935"
+    "elements": 319,
+    "hash": "87a5938c8de21b4d"
   },
   "components/switch.html": {
-    "elements": 372,
-    "hash": "cb8443522f91d1d6"
+    "elements": 376,
+    "hash": "5a022147fb6d34a7"
   },
   "components/table.html": {
-    "elements": 548,
-    "hash": "04ca4a70fb1d5fd1"
+    "elements": 552,
+    "hash": "55525f39c54386a0"
   },
   "components/tabs.html": {
-    "elements": 508,
-    "hash": "f427929f4b8274b6"
+    "elements": 512,
+    "hash": "62d8b219b6e48b40"
   },
   "components/text.html": {
-    "elements": 345,
-    "hash": "093785679a970f11"
+    "elements": 349,
+    "hash": "218ce36bc53b045b"
   },
   "components/textarea.html": {
-    "elements": 382,
-    "hash": "24ec43b0d17c78f2"
+    "elements": 386,
+    "hash": "37c873cde3413739"
   },
   "components/time-field.html": {
-    "elements": 386,
-    "hash": "469926979bd431c4"
+    "elements": 390,
+    "hash": "c86abfe244d6e71a"
   },
   "components/time-range-field.html": {
-    "elements": 393,
-    "hash": "2f88b9815d66cd45"
+    "elements": 397,
+    "hash": "f00fad291afb9add"
   },
   "components/toast.html": {
-    "elements": 363,
-    "hash": "751cf31fc7d02e1e"
+    "elements": 367,
+    "hash": "289e3a6914f89944"
   },
   "components/toggle-group.html": {
-    "elements": 445,
-    "hash": "488538015c0176f2"
+    "elements": 449,
+    "hash": "aca3bce4717e68d5"
   },
   "components/toggle.html": {
-    "elements": 366,
-    "hash": "4f6f300d14c10551"
+    "elements": 370,
+    "hash": "235fcda2646299c6"
   },
   "components/toolbar.html": {
-    "elements": 515,
-    "hash": "cdfd884d034c73d0"
+    "elements": 519,
+    "hash": "8ef49cc4fef061e6"
   },
   "components/tooltip.html": {
-    "elements": 714,
-    "hash": "4bffa39fedfe58bb"
+    "elements": 718,
+    "hash": "11788922ab296efc"
   },
   "docs.html": {
     "elements": 96,
diff --git a/apps/docs/src/lib/docs/generated/props.json b/apps/docs/src/lib/docs/generated/props.json
index 96953d8..9e5979a 100644
--- a/apps/docs/src/lib/docs/generated/props.json
+++ b/apps/docs/src/lib/docs/generated/props.json
@@ -1759,6 +1759,170 @@
 		],
 		"spreads": "Omit<HTMLAttributes<HTMLDivElement>, 'class'>"
 	},
+	"CarouselIndicator": {
+		"props": [
+			{
+				"prop": "index",
+				"type": "number",
+				"required": true,
+				"description": "Zero-based index of the slide this dot scrolls to."
+			},
+			{
+				"prop": "label",
+				"type": "string",
+				"required": false,
+				"description": "Accessible name. Defaults to \"Go to slide N\"."
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the button."
+			}
+		],
+		"spreads": "Omit<HTMLButtonAttributes, 'class' | 'aria-label'>"
+	},
+	"CarouselIndicators": {
+		"props": [
+			{
+				"prop": "label",
+				"type": "string",
+				"required": false,
+				"default": "'Choose slide'",
+				"description": "Accessible name for the set of dots. Defaults to \"Choose slide\"."
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the container."
+			},
+			{
+				"prop": "children",
+				"type": "Snippet",
+				"required": true
+			}
+		],
+		"spreads": "Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label'>"
+	},
+	"CarouselNext": {
+		"props": [
+			{
+				"prop": "label",
+				"type": "string",
+				"required": false,
+				"default": "'Next slide'",
+				"description": "Accessible name. Defaults to \"Previous slide\"."
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the button."
+			},
+			{
+				"prop": "children",
+				"type": "Snippet",
+				"required": false
+			}
+		],
+		"spreads": "Omit<HTMLButtonAttributes, 'class' | 'aria-label'>"
+	},
+	"CarouselPrevious": {
+		"props": [
+			{
+				"prop": "label",
+				"type": "string",
+				"required": false,
+				"default": "'Previous slide'",
+				"description": "Accessible name. Defaults to \"Previous slide\"."
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the button."
+			},
+			{
+				"prop": "children",
+				"type": "Snippet",
+				"required": false
+			}
+		],
+		"spreads": "Omit<HTMLButtonAttributes, 'class' | 'aria-label'>"
+	},
+	"CarouselRoot": {
+		"props": [
+			{
+				"prop": "orientation",
+				"type": "Orientation",
+				"required": false,
+				"default": "'horizontal'"
+			},
+			{
+				"prop": "label",
+				"type": "string",
+				"required": false,
+				"description": "The carousel's accessible name, e.g. \"Product photos\". Required, and it is not decoration. The root is a labelled region so a screen reader user can find and skip the whole thing in one move; an unnamed region is an obstacle they have to read through to identify."
+			},
+			{
+				"prop": "labelledby",
+				"type": "string",
+				"required": false,
+				"description": "Id of an existing visible heading, as an alternative to `label`."
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the root element."
+			},
+			{
+				"prop": "children",
+				"type": "Snippet",
+				"required": true
+			}
+		],
+		"spreads": "Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label'>"
+	},
+	"CarouselSlide": {
+		"props": [
+			{
+				"prop": "label",
+				"type": "string",
+				"required": false,
+				"description": "Overrides the generated \"N of M\" name. Pass something meaningful when the slide has an identity of its own — a product name beats a position. The default exists because a slide with no name at all is announced as \"group\", which tells the user nothing about where they are."
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the slide."
+			},
+			{
+				"prop": "children",
+				"type": "Snippet",
+				"required": true
+			}
+		],
+		"spreads": "Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label'>"
+	},
+	"CarouselViewport": {
+		"props": [
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the scroll container."
+			},
+			{
+				"prop": "children",
+				"type": "Snippet",
+				"required": true
+			}
+		],
+		"spreads": "Omit<HTMLAttributes<HTMLDivElement>, 'class'>"
+	},
 	"CheckboxRoot": {
 		"props": [
 			{
@@ -7290,6 +7454,88 @@
 		],
 		"spreads": "Omit<BitsRootProps, 'class' | 'value'>"
 	},
+	"ResizableGroup": {
+		"props": [
+			{
+				"prop": "direction",
+				"type": "Direction",
+				"required": false,
+				"default": "'horizontal'"
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the group."
+			},
+			{
+				"prop": "children",
+				"type": "Snippet",
+				"required": true
+			}
+		],
+		"spreads": "Omit<HTMLAttributes<HTMLDivElement>, 'class'>"
+	},
+	"ResizableHandle": {
+		"props": [
+			{
+				"prop": "index",
+				"type": "number",
+				"required": true,
+				"description": "Index of the pane on the leading side of this handle — the one whose size `aria-valuenow` reports."
+			},
+			{
+				"prop": "label",
+				"type": "string",
+				"required": false,
+				"description": "The handle's accessible name, e.g. \"Resize sidebar\". Required. A `separator` with a tabindex is a control, and a control that announces only \"splitter, 40\" tells a keyboard user a number without saying what it sizes."
+			},
+			{
+				"prop": "step",
+				"type": "number",
+				"required": false,
+				"default": "5",
+				"description": "Percent moved per arrow-key press."
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the handle."
+			}
+		],
+		"spreads": "Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label'>"
+	},
+	"ResizablePane": {
+		"props": [
+			{
+				"prop": "min",
+				"type": "number",
+				"required": false,
+				"default": "10",
+				"description": "Smallest share of the group this pane accepts, in percent."
+			},
+			{
+				"prop": "max",
+				"type": "number",
+				"required": false,
+				"default": "90",
+				"description": "Largest share, in percent."
+			},
+			{
+				"prop": "class",
+				"type": "string",
+				"required": false,
+				"description": "Extra classes merged onto the pane."
+			},
+			{
+				"prop": "children",
+				"type": "Snippet",
+				"required": true
+			}
+		],
+		"spreads": "Omit<HTMLAttributes<HTMLDivElement>, 'class'>"
+	},
 	"ScrollAreaRoot": {
 		"props": [
 			{
diff --git a/apps/docs/src/lib/docs/registry.ts b/apps/docs/src/lib/docs/registry.ts
index 2825166..4a5ac0b 100644
--- a/apps/docs/src/lib/docs/registry.ts
+++ b/apps/docs/src/lib/docs/registry.ts
@@ -28,6 +28,13 @@ export const componentGroups: ComponentGroup[] = [
 			{ slug: 'avatar', name: 'Avatar', blurb: 'Image with graceful fallback.', ready: true },
 			{ slug: 'badge', name: 'Badge', blurb: 'Compact status and count labels.', ready: true },
 			{ slug: 'card', name: 'Card', blurb: 'Surface container for grouped content.', ready: true },
+			{
+				slug: 'carousel',
+				name: 'Carousel',
+				blurb: 'A scrolling track of slides with controls.',
+				status: 'new',
+				ready: true
+			},
 			{ slug: 'heading', name: 'Heading', blurb: 'Semantic, sized display titles.', ready: true },
 			{ slug: 'text', name: 'Text', blurb: 'Body copy with size and tone.', ready: true },
 			{
@@ -379,6 +386,13 @@ export const componentGroups: ComponentGroup[] = [
 	{
 		label: 'Layout',
 		items: [
+			{
+				slug: 'resizable',
+				name: 'Resizable',
+				blurb: 'Panes with a draggable, keyboard-operable divider.',
+				status: 'new',
+				ready: true
+			},
 			{
 				slug: 'stack',
 				name: 'Stack',
diff --git a/apps/docs/src/routes/components/carousel/+page.svelte b/apps/docs/src/routes/components/carousel/+page.svelte
new file mode 100644
index 0000000..3865f0b
--- /dev/null
+++ b/apps/docs/src/routes/components/carousel/+page.svelte
@@ -0,0 +1,234 @@
+<script lang="ts">
+	import { Carousel, Card, Text, Heading } from 'sve-ui';
+	import DocPage from '$lib/docs/DocPage.svelte';
+	import Preview from '$lib/docs/Preview.svelte';
+	import PropsTable from '$lib/docs/PropsTable.svelte';
+	import type { TocEntry } from '$lib/docs/DocPage.svelte';
+	import { componentBySlug } from '$lib/docs/registry';
+
+	const meta = componentBySlug.carousel;
+
+	const toc: TocEntry[] = [
+		{ id: 'usage', label: 'Usage' },
+		{ id: 'multiple', label: 'More than one at a time' },
+		{ id: 'vertical', label: 'Vertical' },
+		{ id: 'no-loop', label: 'Why it does not loop' },
+		{ id: 'no-autoplay', label: 'Why it does not auto-rotate' },
+		{ id: 'props', label: 'Props' }
+	];
+
+	const slides = ['Kilimanjaro', 'Aconcagua', 'Denali', 'Elbrus', 'Vinson'];
+	// The indicators need only the position, and `{#each slides as _, i}` leaves
+	// an unused binding behind.
+	const indices = slides.map((_, i) => i);
+
+	const usageCode = `<script>
+  import { Carousel } from 'sve-ui';
+<\u002fscript>
+
+<Carousel.Root label="Mountains">
+  <Carousel.Viewport>
+    {#each slides as slide (slide)}
+      <Carousel.Slide>{slide}</Carousel.Slide>
+    {/each}
+  </Carousel.Viewport>
+
+  <Carousel.Previous />
+  <Carousel.Next />
+
+  <Carousel.Indicators>
+    {#each indices as i (i)}
+      <Carousel.Indicator index={i} />
+    {/each}
+  </Carousel.Indicators>
+</Carousel.Root>`;
+
+	const multipleCode = `<!-- Three at a time. The controls stay honest because they
+     are disabled from the measured scroll extent, not the index. -->
+<Carousel.Root label="Mountains" style="--sve-carousel-slide-size: 33.333%;">
+  …
+</Carousel.Root>`;
+
+	const verticalCode = `<Carousel.Root orientation="vertical" label="Mountains">
+  <Carousel.Viewport>…</Carousel.Viewport>
+  <Carousel.Previous />
+  <Carousel.Next />
+</Carousel.Root>`;
+
+	const driveCode = `<script>
+  import { Carousel } from 'sve-ui';
+
+  // If you genuinely need rotation, you own the pause button.
+  let api = $state();
+<\u002fscript>`;
+</script>
+
+<DocPage group={meta.group} name={meta.name} description={meta.blurb} {toc}>
+	<section id="usage" class="sec">
+		<h2 class="sec__h">Usage</h2>
+		<p class="sec__p">
+			Built on CSS scroll-snap, not transforms. Touch swiping, trackpad flicks, momentum and the
+			browser's own arrow-key scrolling all come from the platform — there is no gesture code here,
+			and no new dependency.
+		</p>
+		<p class="sec__p">
+			<code class="ic">label</code> is required: the root is a labelled region, so a screen reader user
+			can find the whole carousel and skip past it in one move. Each slide is announced as "slide, 3 of
+			5" unless you give it a better name.
+		</p>
+		<Preview code={usageCode}>
+			<div style="max-width: 380px; width: 100%;">
+				<Carousel.Root label="Mountains">
+					<Carousel.Viewport>
+						{#each slides as slide (slide)}
+							<Carousel.Slide>
+								<Card.Root>
+									<Card.Content>
+										<Heading level={3} size="sm">{slide}</Heading>
+									</Card.Content>
+								</Card.Root>
+							</Carousel.Slide>
+						{/each}
+					</Carousel.Viewport>
+					<div style="display: flex; align-items: center; justify-content: center; gap: 12px;">
+						<Carousel.Previous />
+						<Carousel.Indicators>
+							{#each indices as i (i)}
+								<Carousel.Indicator index={i} />
+							{/each}
+						</Carousel.Indicators>
+						<Carousel.Next />
+					</div>
+				</Carousel.Root>
+			</div>
+		</Preview>
+	</section>
+
+	<section id="multiple" class="sec">
+		<h2 class="sec__h">More than one at a time</h2>
+		<p class="sec__p">
+			Set <code class="ic">--sve-carousel-slide-size</code> on the root. The controls are disabled from
+			the measured scroll extent rather than from the slide index, which matters here: with three slides
+			visible the last index is reachable while there is still track left to scroll, and a control disabled
+			then would be lying.
+		</p>
+		<Preview code={multipleCode}>
+			<div style="max-width: 380px; width: 100%;">
+				<Carousel.Root label="Mountains, three at a time" style="--sve-carousel-slide-size: 40%;">
+					<Carousel.Viewport>
+						{#each slides as slide (slide)}
+							<Carousel.Slide>
+								<Card.Root>
+									<Card.Content><Text size="sm">{slide}</Text></Card.Content>
+								</Card.Root>
+							</Carousel.Slide>
+						{/each}
+					</Carousel.Viewport>
+					<div style="display: flex; align-items: center; justify-content: center; gap: 12px;">
+						<Carousel.Previous />
+						<Carousel.Next />
+					</div>
+				</Carousel.Root>
+			</div>
+		</Preview>
+	</section>
+
+	<section id="vertical" class="sec">
+		<h2 class="sec__h">Vertical</h2>
+		<p class="sec__p">
+			The arrow glyphs and the snap axis follow <code class="ic">orientation</code>.
+		</p>
+		<Preview code={verticalCode}>
+			<div style="max-width: 260px; width: 100%;">
+				<Carousel.Root orientation="vertical" label="Mountains, vertical">
+					<Carousel.Viewport style="max-height: 8rem;">
+						{#each slides as slide (slide)}
+							<Carousel.Slide style="height: 8rem;">
+								<Card.Root>
+									<Card.Content><Text size="sm">{slide}</Text></Card.Content>
+								</Card.Root>
+							</Carousel.Slide>
+						{/each}
+					</Carousel.Viewport>
+					<div style="display: flex; align-items: center; justify-content: center; gap: 12px;">
+						<Carousel.Previous />
+						<Carousel.Next />
+					</div>
+				</Carousel.Root>
+			</div>
+		</Preview>
+	</section>
+
+	<section id="no-loop" class="sec">
+		<h2 class="sec__h">Why it does not loop</h2>
+		<p class="sec__p">
+			An infinite track makes "slide 3 of 5" meaningless — there is no third of five on a ring — and
+			it removes the only honest position affordance a carousel has: a
+			<code class="ic">Previous</code> or <code class="ic">Next</code> that goes flat at the boundary.
+			A sighted user loses a scrollbar; everyone else loses the ability to know they have reached the
+			end.
+		</p>
+		<p class="sec__p">
+			Position is also <em>read</em> from the scroll container on every scroll rather than remembered,
+			because a swipe, a flick and the arrow keys are all drivers this component cannot intercept. A stored
+			index would disagree with the screen after any of them, and the slide label would start lying.
+		</p>
+	</section>
+
+	<section id="no-autoplay" class="sec">
+		<h2 class="sec__h">Why it does not auto-rotate</h2>
+		<p class="sec__p">
+			Auto-rotation is only acceptable with all of: a visible pause control, stopping on hover,
+			stopping on focus, and honouring <code class="ic">prefers-reduced-motion</code>. That chain is
+			exactly what gets half-built, and content that moves on its own is one of the most documented
+			accessibility failures on the web — it steals attention from the rest of the page and it moves
+			the target out from under anyone who reads or clicks slowly.
+		</p>
+		<p class="sec__p">
+			So it is not built in. <code class="ic">useCarousel()</code> exposes
+			<code class="ic">next()</code>, <code class="ic">prev()</code> and
+			<code class="ic">goTo()</code>, so a consumer who genuinely needs rotation can drive it — and
+			owns the pause button that has to come with it.
+		</p>
+		<Preview code={driveCode}>
+			<Text size="sm">The controls above are the whole API. Rotation is yours to justify.</Text>
+		</Preview>
+	</section>
+
+	<section id="props" class="sec">
+		<h2 class="sec__h">Props</h2>
+		<p class="sec__p">Each part also takes its native element's attributes via prop spreading.</p>
+		<PropsTable component="CarouselRoot" />
+		<PropsTable component="CarouselSlide" />
+		<PropsTable component="CarouselPrevious" />
+		<PropsTable component="CarouselIndicator" />
+	</section>
+</DocPage>
+
+<style>
+	.sec {
+		margin-bottom: 48px;
+		scroll-margin-top: 84px;
+	}
+	.sec__h {
+		font-size: 21px;
+		font-weight: 700;
+		letter-spacing: -0.02em;
+		color: var(--doc-fg);
+		margin: 0 0 6px;
+	}
+	.sec__p {
+		margin: 0 0 16px;
+		font-size: 14.5px;
+		line-height: 1.55;
+		color: var(--doc-fg-muted);
+	}
+	.ic {
+		font-family: var(--doc-mono);
+		font-size: 0.85em;
+		padding: 1px 5px;
+		border-radius: 5px;
+		background: var(--doc-surface-2);
+		color: var(--doc-primary-text);
+	}
+</style>
diff --git a/apps/docs/src/routes/components/carousel/+page.ts b/apps/docs/src/routes/components/carousel/+page.ts
new file mode 100644
index 0000000..189f71e
--- /dev/null
+++ b/apps/docs/src/routes/components/carousel/+page.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/apps/docs/src/routes/components/resizable/+page.svelte b/apps/docs/src/routes/components/resizable/+page.svelte
new file mode 100644
index 0000000..a664a5e
--- /dev/null
+++ b/apps/docs/src/routes/components/resizable/+page.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+	import { Resizable, Text } from 'sve-ui';
+	import DocPage from '$lib/docs/DocPage.svelte';
+	import Preview from '$lib/docs/Preview.svelte';
+	import PropsTable from '$lib/docs/PropsTable.svelte';
+	import type { TocEntry } from '$lib/docs/DocPage.svelte';
+	import { componentBySlug } from '$lib/docs/registry';
+
+	const meta = componentBySlug.resizable;
+
+	const toc: TocEntry[] = [
+		{ id: 'usage', label: 'Usage' },
+		{ id: 'keyboard', label: 'The keyboard contract' },
+		{ id: 'vertical', label: 'Vertical' },
+		{ id: 'limits', label: 'Limits and clamping' },
+		{ id: 'props', label: 'Props' }
+	];
+
+	const usageCode = `<script>
+  import { Resizable } from 'sve-ui';
+<\u002fscript>
+
+<Resizable.Group>
+  <Resizable.Pane min={20}>Sidebar</Resizable.Pane>
+  <Resizable.Handle index={0} label="Resize sidebar" />
+  <Resizable.Pane>Content</Resizable.Pane>
+</Resizable.Group>`;
+
+	const verticalCode = `<Resizable.Group direction="vertical" style="height: 12rem;">
+  <Resizable.Pane>Editor</Resizable.Pane>
+  <Resizable.Handle index={0} label="Resize editor" />
+  <Resizable.Pane min={15}>Console</Resizable.Pane>
+</Resizable.Group>`;
+
+	const threeCode = `<!-- Handle index is the pane on its LEADING side -->
+<Resizable.Group>
+  <Resizable.Pane min={15}>Files</Resizable.Pane>
+  <Resizable.Handle index={0} label="Resize file tree" />
+  <Resizable.Pane min={30}>Editor</Resizable.Pane>
+  <Resizable.Handle index={1} label="Resize editor" />
+  <Resizable.Pane min={15}>Inspector</Resizable.Pane>
+</Resizable.Group>`;
+</script>
+
+<DocPage group={meta.group} name={meta.name} description={meta.blurb} {toc}>
+	<section id="usage" class="sec">
+		<h2 class="sec__h">Usage</h2>
+		<p class="sec__p">
+			<code class="ic">Handle index</code> is the pane on its <em>leading</em> side — the one whose
+			share it reports as <code class="ic">aria-valuenow</code> and points
+			<code class="ic">aria-controls</code> at.
+		</p>
+		<p class="sec__p">
+			<code class="ic">label</code> is required. A <code class="ic">separator</code> with a tab stop is
+			a control, and one that announces only "splitter, 40" gives a keyboard user a number without saying
+			what it sizes.
+		</p>
+		<Preview code={usageCode}>
+			<div style="width: 100%;">
+				<Resizable.Group
+					style="height: 7rem; border: 1px solid var(--doc-border); border-radius: 8px;"
+				>
+					<Resizable.Pane min={20}>
+						<div style="padding: 12px;"><Text size="sm">Sidebar</Text></div>
+					</Resizable.Pane>
+					<Resizable.Handle index={0} label="Resize sidebar" />
+					<Resizable.Pane>
+						<div style="padding: 12px;"><Text size="sm">Content</Text></div>
+					</Resizable.Pane>
+				</Resizable.Group>
+			</div>
+		</Preview>
+	</section>
+
+	<section id="keyboard" class="sec">
+		<h2 class="sec__h">The keyboard contract</h2>
+		<p class="sec__p">
+			This is the half every hand-rolled divider skips, and it is the difference between a splitter
+			and a decoration. Tab to the handle above and try it.
+		</p>
+		<ul class="sec__p" style="padding-left: 20px; display: grid; gap: 6px;">
+			<li>
+				<strong style="color: var(--doc-fg);">Arrow keys</strong> — move the boundary by
+				<code class="ic">step</code> (5% by default). Left/Right in a horizontal group, Up/Down in a vertical
+				one.
+			</li>
+			<li>
+				<strong style="color: var(--doc-fg);">Home / End</strong> — collapse and expand, as far as the
+				panes' own limits allow.
+			</li>
+			<li>
+				<strong style="color: var(--doc-fg);">Focus ring</strong> — the handle is a real tab stop
+				with <code class="ic">role="separator"</code>, <code class="ic">aria-orientation</code> and
+				live <code class="ic">aria-valuenow</code>.
+			</li>
+		</ul>
+		<p class="sec__p">
+			Two implementation details that only show up in use: the drag uses
+			<code class="ic">setPointerCapture</code>, so it survives the pointer leaving a hairline
+			target — which it does immediately — and the grabbable area is grown to 12px by a
+			pseudo-element, so the divider can stay 1px wide without being unreasonable to hit.
+		</p>
+	</section>
+
+	<section id="vertical" class="sec">
+		<h2 class="sec__h">Vertical</h2>
+		<p class="sec__p">
+			Note that <code class="ic">aria-orientation</code> on the handle is the opposite of the group's
+			direction: it describes the separator's own line, not the direction of travel.
+		</p>
+		<Preview code={verticalCode}>
+			<div style="width: 100%;">
+				<Resizable.Group
+					direction="vertical"
+					style="height: 10rem; border: 1px solid var(--doc-border); border-radius: 8px;"
+				>
+					<Resizable.Pane>
+						<div style="padding: 12px;"><Text size="sm">Editor</Text></div>
+					</Resizable.Pane>
+					<Resizable.Handle index={0} label="Resize editor" />
+					<Resizable.Pane min={15}>
+						<div style="padding: 12px;"><Text size="sm">Console</Text></div>
+					</Resizable.Pane>
+				</Resizable.Group>
+			</div>
+		</Preview>
+	</section>
+
+	<section id="limits" class="sec">
+		<h2 class="sec__h">Limits and clamping</h2>
+		<p class="sec__p">
+			A drag moves <strong style="color: var(--doc-fg);">one</strong> boundary and touches exactly
+			<strong style="color: var(--doc-fg);">two</strong> panes, clamped against
+			<em>both</em> of their limits before anything is applied. Distributing a drag across the whole group
+			is what produces the familiar bug where dragging one divider quietly reflows the far side of the
+			layout.
+		</p>
+		<p class="sec__p">
+			Clamping only the pane being grown is the other half of that bug: it lets the neighbour shrink
+			past its own minimum. <code class="ic">min</code> defaults to 10 — pass
+			<code class="ic">min={0}</code> if a pane should be able to disappear entirely.
+		</p>
+		<p class="sec__p">
+			Sizes are <strong style="color: var(--doc-fg);">not</strong> persisted. Where that belongs — a
+			cookie, a user profile, <code class="ic">localStorage</code> — is an application decision, and guessing
+			it wrong is worse than not guessing.
+		</p>
+		<Preview code={threeCode}>
+			<div style="width: 100%;">
+				<Resizable.Group
+					style="height: 7rem; border: 1px solid var(--doc-border); border-radius: 8px;"
+				>
+					<Resizable.Pane min={15}>
+						<div style="padding: 12px;"><Text size="sm">Files</Text></div>
+					</Resizable.Pane>
+					<Resizable.Handle index={0} label="Resize file tree" />
+					<Resizable.Pane min={30}>
+						<div style="padding: 12px;"><Text size="sm">Editor</Text></div>
+					</Resizable.Pane>
+					<Resizable.Handle index={1} label="Resize editor" />
+					<Resizable.Pane min={15}>
+						<div style="padding: 12px;"><Text size="sm">Inspector</Text></div>
+					</Resizable.Pane>
+				</Resizable.Group>
+			</div>
+		</Preview>
+	</section>
+
+	<section id="props" class="sec">
+		<h2 class="sec__h">Props</h2>
+		<p class="sec__p">Each part also takes its native element's attributes via prop spreading.</p>
+		<PropsTable component="ResizableGroup" />
+		<PropsTable component="ResizablePane" />
+		<PropsTable component="ResizableHandle" />
+	</section>
+</DocPage>
+
+<style>
+	.sec {
+		margin-bottom: 48px;
+		scroll-margin-top: 84px;
+	}
+	.sec__h {
+		font-size: 21px;
+		font-weight: 700;
+		letter-spacing: -0.02em;
+		color: var(--doc-fg);
+		margin: 0 0 6px;
+	}
+	.sec__p {
+		margin: 0 0 16px;
+		font-size: 14.5px;
+		line-height: 1.55;
+		color: var(--doc-fg-muted);
+	}
+	.ic {
+		font-family: var(--doc-mono);
+		font-size: 0.85em;
+		padding: 1px 5px;
+		border-radius: 5px;
+		background: var(--doc-surface-2);
+		color: var(--doc-primary-text);
+	}
+</style>
diff --git a/apps/docs/src/routes/components/resizable/+page.ts b/apps/docs/src/routes/components/resizable/+page.ts
new file mode 100644
index 0000000..189f71e
--- /dev/null
+++ b/apps/docs/src/routes/components/resizable/+page.ts
@@ -0,0 +1 @@
+export const prerender = true;
diff --git a/apps/docs/tests/__screenshots__/carousel-0-dark.png b/apps/docs/tests/__screenshots__/carousel-0-dark.png
new file mode 100644
index 0000000..46b53e7
Binary files /dev/null and b/apps/docs/tests/__screenshots__/carousel-0-dark.png differ
diff --git a/apps/docs/tests/__screenshots__/carousel-0-light.png b/apps/docs/tests/__screenshots__/carousel-0-light.png
new file mode 100644
index 0000000..462a370
Binary files /dev/null and b/apps/docs/tests/__screenshots__/carousel-0-light.png differ
diff --git a/apps/docs/tests/__screenshots__/carousel-1-dark.png b/apps/docs/tests/__screenshots__/carousel-1-dark.png
new file mode 100644
index 0000000..ab5f4d2
Binary files /dev/null and b/apps/docs/tests/__screenshots__/carousel-1-dark.png differ
diff --git a/apps/docs/tests/__screenshots__/carousel-1-light.png b/apps/docs/tests/__screenshots__/carousel-1-light.png
new file mode 100644
index 0000000..4ac97e5
Binary files /dev/null and b/apps/docs/tests/__screenshots__/carousel-1-light.png differ
diff --git a/apps/docs/tests/__screenshots__/carousel-2-dark.png b/apps/docs/tests/__screenshots__/carousel-2-dark.png
new file mode 100644
index 0000000..afc4c69
Binary files /dev/null and b/apps/docs/tests/__screenshots__/carousel-2-dark.png differ
diff --git a/apps/docs/tests/__screenshots__/carousel-2-light.png b/apps/docs/tests/__screenshots__/carousel-2-light.png
new file mode 100644
index 0000000..aeae6fc
Binary files /dev/null and b/apps/docs/tests/__screenshots__/carousel-2-light.png differ
diff --git a/apps/docs/tests/__screenshots__/carousel-3-dark.png b/apps/docs/tests/__screenshots__/carousel-3-dark.png
new file mode 100644
index 0000000..cd8ea6d
Binary files /dev/null and b/apps/docs/tests/__screenshots__/carousel-3-dark.png differ
diff --git a/apps/docs/tests/__screenshots__/carousel-3-light.png b/apps/docs/tests/__screenshots__/carousel-3-light.png
new file mode 100644
index 0000000..0a24769
Binary files /dev/null and b/apps/docs/tests/__screenshots__/carousel-3-light.png differ
diff --git a/apps/docs/tests/__screenshots__/resizable-0-dark.png b/apps/docs/tests/__screenshots__/resizable-0-dark.png
new file mode 100644
index 0000000..72830a9
Binary files /dev/null and b/apps/docs/tests/__screenshots__/resizable-0-dark.png differ
diff --git a/apps/docs/tests/__screenshots__/resizable-0-light.png b/apps/docs/tests/__screenshots__/resizable-0-light.png
new file mode 100644
index 0000000..6e228fe
Binary files /dev/null and b/apps/docs/tests/__screenshots__/resizable-0-light.png differ
diff --git a/apps/docs/tests/__screenshots__/resizable-1-dark.png b/apps/docs/tests/__screenshots__/resizable-1-dark.png
new file mode 100644
index 0000000..0e739e3
Binary files /dev/null and b/apps/docs/tests/__screenshots__/resizable-1-dark.png differ
diff --git a/apps/docs/tests/__screenshots__/resizable-1-light.png b/apps/docs/tests/__screenshots__/resizable-1-light.png
new file mode 100644
index 0000000..723f7b1
Binary files /dev/null and b/apps/docs/tests/__screenshots__/resizable-1-light.png differ
diff --git a/apps/docs/tests/__screenshots__/resizable-2-dark.png b/apps/docs/tests/__screenshots__/resizable-2-dark.png
new file mode 100644
index 0000000..d7376d5
Binary files /dev/null and b/apps/docs/tests/__screenshots__/resizable-2-dark.png differ
diff --git a/apps/docs/tests/__screenshots__/resizable-2-light.png b/apps/docs/tests/__screenshots__/resizable-2-light.png
new file mode 100644
index 0000000..e224f93
Binary files /dev/null and b/apps/docs/tests/__screenshots__/resizable-2-light.png differ
diff --git a/apps/example/src/routes/browse/+page.svelte b/apps/example/src/routes/browse/+page.svelte
index 9645921..636dafb 100644
--- a/apps/example/src/routes/browse/+page.svelte
+++ b/apps/example/src/routes/browse/+page.svelte
@@ -5,6 +5,7 @@
 		Badge,
 		Button,
 		Card,
+		Carousel,
 		Collapsible,
 		Combobox,
 		Command,
@@ -20,6 +21,7 @@
 		NavigationMenu,
 		Pagination,
 		Popover,
+		Resizable,
 		ScrollArea,
 		Sheet,
 		Skeleton,
@@ -143,6 +145,30 @@
 	<Toolbar.Link href="/security">Security</Toolbar.Link>
 </Toolbar.Root>
 
+<!--
+  Several slides visible at once, which is the case that catches a carousel
+  disabling its controls from the slide index: the last index is reachable while
+  there is still track to scroll.
+-->
+<Carousel.Root label="Recent files" style="--sve-carousel-slide-size: 45%;">
+	<Carousel.Viewport>
+		{#each rows.slice(0, 6) as row (row.id)}
+			<Carousel.Slide label={row.title}>
+				<Card.Root>
+					<Card.Content>
+						<Text size="sm">{row.title}</Text>
+						<Badge color="secondary">{row.kind}</Badge>
+					</Card.Content>
+				</Card.Root>
+			</Carousel.Slide>
+		{/each}
+	</Carousel.Viewport>
+	<div class="shelf-controls">
+		<Carousel.Previous />
+		<Carousel.Next />
+	</div>
+</Carousel.Root>
+
 <div class="search">
 	<InputGroup.Root>
 		<InputGroup.Addon>
@@ -221,75 +247,93 @@
 			role="status" + aria-busy on the region that owns the rows: the Skeleton is
 			aria-hidden by design, so without this the swap is silent.
 		-->
-		<div role="status" aria-busy={loading} aria-label="File list">
-			<ScrollArea.Root type="auto" style="height: 20rem;">
-				<ScrollArea.Viewport>
-					{#if loading}
-						<Stack gap={3}>
-							{#each Array.from({ length: PER_PAGE }, (_, i) => i) as i (i)}
-								<Skeleton height="2.5rem" />
-							{/each}
-						</Stack>
-					{:else if visible.length === 0}
-						<Empty.Root announce>
-							<Empty.Title>No assets match "{search}"</Empty.Title>
-							<Empty.Description>Try a shorter search term, or clear the filter.</Empty.Description>
-							<Empty.Actions>
-								<Button variant="outline" onclick={() => (search = '')}>Clear filter</Button>
-							</Empty.Actions>
-						</Empty.Root>
+		<Resizable.Group style="height: 20rem;">
+			<Resizable.Pane min={35}>
+				<div role="status" aria-busy={loading} aria-label="File list">
+					<ScrollArea.Root type="auto" style="height: 20rem;">
+						<ScrollArea.Viewport>
+							{#if loading}
+								<Stack gap={3}>
+									{#each Array.from({ length: PER_PAGE }, (_, i) => i) as i (i)}
+										<Skeleton height="2.5rem" />
+									{/each}
+								</Stack>
+							{:else if visible.length === 0}
+								<Empty.Root announce>
+									<Empty.Title>No assets match "{search}"</Empty.Title>
+									<Empty.Description
+										>Try a shorter search term, or clear the filter.</Empty.Description
+									>
+									<Empty.Actions>
+										<Button variant="outline" onclick={() => (search = '')}>Clear filter</Button>
+									</Empty.Actions>
+								</Empty.Root>
+							{:else}
+								<ul>
+									{#each visible as row (row.id)}
+										<li>
+											<ContextMenu.Root>
+												<ContextMenu.Trigger>
+													{#snippet child({ props })}
+														<div {...props} class="row">
+															<div class="thumb">
+																<AspectRatio ratio={4 / 3}>
+																	<div class="thumb-fill">{row.kind.slice(0, 1).toUpperCase()}</div>
+																</AspectRatio>
+															</div>
+															<div class="row-main">
+																<Text>{row.title}</Text>
+																{#if columns.owner}
+																	<LinkPreview.Root>
+																		<LinkPreview.Trigger href="/">{row.owner}</LinkPreview.Trigger>
+																		<LinkPreview.Content>
+																			<Text size="sm">{row.owner} owns {row.kind} files.</Text>
+																		</LinkPreview.Content>
+																	</LinkPreview.Root>
+																{/if}
+															</div>
+															{#if columns.updated}
+																<Badge color="secondary">{row.updated}</Badge>
+															{/if}
+														</div>
+													{/snippet}
+												</ContextMenu.Trigger>
+												<ContextMenu.Content>
+													<ContextMenu.Item onSelect={() => (selected = row)}
+														>Select</ContextMenu.Item
+													>
+													<ContextMenu.Separator />
+													<ContextMenu.Item onSelect={() => run(`Delete ${row.title}`)}>
+														Delete
+													</ContextMenu.Item>
+												</ContextMenu.Content>
+											</ContextMenu.Root>
+										</li>
+									{/each}
+								</ul>
+							{/if}
+						</ScrollArea.Viewport>
+						<ScrollArea.Scrollbar orientation="vertical">
+							<ScrollArea.Thumb />
+						</ScrollArea.Scrollbar>
+					</ScrollArea.Root>
+				</div>
+			</Resizable.Pane>
+			<Resizable.Handle index={0} label="Resize the file list" />
+			<Resizable.Pane min={20}>
+				<div class="detail">
+					{#if selected}
+						<Text size="sm">Selected: {selected.title}</Text>
+						<Text size="sm">Owner: {selected.owner}</Text>
 					{:else}
-						<ul>
-							{#each visible as row (row.id)}
-								<li>
-									<ContextMenu.Root>
-										<ContextMenu.Trigger>
-											{#snippet child({ props })}
-												<div {...props} class="row">
-													<div class="thumb">
-														<AspectRatio ratio={4 / 3}>
-															<div class="thumb-fill">{row.kind.slice(0, 1).toUpperCase()}</div>
-														</AspectRatio>
-													</div>
-													<div class="row-main">
-														<Text>{row.title}</Text>
-														{#if columns.owner}
-															<LinkPreview.Root>
-																<LinkPreview.Trigger href="/">{row.owner}</LinkPreview.Trigger>
-																<LinkPreview.Content>
-																	<Text size="sm">{row.owner} owns {row.kind} files.</Text>
-																</LinkPreview.Content>
-															</LinkPreview.Root>
-														{/if}
-													</div>
-													{#if columns.updated}
-														<Badge color="secondary">{row.updated}</Badge>
-													{/if}
-												</div>
-											{/snippet}
-										</ContextMenu.Trigger>
-										<ContextMenu.Content>
-											<ContextMenu.Item onSelect={() => (selected = row)}>Select</ContextMenu.Item>
-											<ContextMenu.Separator />
-											<ContextMenu.Item onSelect={() => run(`Delete ${row.title}`)}>
-												Delete
-											</ContextMenu.Item>
-										</ContextMenu.Content>
-									</ContextMenu.Root>
-								</li>
-							{/each}
-						</ul>
+						<Empty.Root>
+							<Empty.Title>Nothing selected</Empty.Title>
+							<Empty.Description>Right-click a file and choose Select.</Empty.Description>
+						</Empty.Root>
 					{/if}
-				</ScrollArea.Viewport>
-				<ScrollArea.Scrollbar orientation="vertical">
-					<ScrollArea.Thumb />
-				</ScrollArea.Scrollbar>
-			</ScrollArea.Root>
-		</div>
-
-		{#if selected}
-			<Text size="sm">Selected: {selected.title}</Text>
-		{/if}
+				</div>
+			</Resizable.Pane>
+		</Resizable.Group>
 	</Card.Content>
 	<Card.Footer>
 		<Pagination.Root count={total} perPage={PER_PAGE} bind:page>
@@ -356,6 +400,18 @@
 </Sheet.Root>
 
 <style>
+	.shelf-controls {
+		display: flex;
+		justify-content: flex-end;
+		gap: 8px;
+	}
+
+	.detail {
+		height: 100%;
+		padding: 12px;
+		overflow: auto;
+	}
+
 	.search {
 		max-width: 26rem;
 		margin-bottom: 12px;
diff --git a/packages/sve-ui/README.md b/packages/sve-ui/README.md
index 4b44576..0548fe8 100644
--- a/packages/sve-ui/README.md
+++ b/packages/sve-ui/README.md
@@ -68,20 +68,20 @@ without it):
 
 ## Components
 
-**64 components**, every one styled and accessible out of the box. Names ending
+**66 components**, every one styled and accessible out of the box. Names ending
 in `.*` are namespace compositions — import the namespace and compose its parts
 (`Dialog.Root`, `Dialog.Trigger`, `Dialog.Content`). The rest are default
 imports.
 
 | Group          | Components                                                                                                                                                                                                                                                                                                                                                         |
 | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| **Display**    | `Avatar.*`, `Badge`, `Card.*`, `Heading`, `Text`, `Skeleton`                                                                                                                                                                                                                                                                                                       |
+| **Display**    | `Avatar.*`, `Badge`, `Card.*`, `Carousel.*`, `Heading`, `Text`, `Skeleton`                                                                                                                                                                                                                                                                                         |
 | **Forms**      | `Button`, `ButtonGroup`, `Input`, `InputGroup.*`, `Field`, `Checkbox.*`, `RadioGroup.*`, `Switch.*`, `Select.*`, `Combobox.*`, `Slider`, `Textarea`, `Label`, `Toggle`, `ToggleGroup.*`, `Calendar.*`, `DateField.*`, `DatePicker.*`, `RangeCalendar.*`, `DateRangeField.*`, `DateRangePicker.*`, `TimeField.*`, `TimeRangeField.*`, `PinInput.*`, `RatingGroup.*` |
 | **Feedback**   | `Alert.*`, `Busy`, `Empty.*`, `Spinner`, `Toast.*`, `Progress`, `Meter`                                                                                                                                                                                                                                                                                            |
 | **Navigation** | `Tabs.*`, `Accordion.*`, `Sidebar.*`, `Breadcrumb.*`, `NavigationMenu.*`, `Menubar.*`, `Collapsible.*`, `Toolbar.*`                                                                                                                                                                                                                                                |
 | **Overlays**   | `Dialog.*`, `DropdownMenu.*`, `Popover.*`, `Tooltip.*`, `AlertDialog.*`, `Command.*`, `Sheet.*`, `ContextMenu.*`, `LinkPreview.*`                                                                                                                                                                                                                                  |
 | **Data**       | `Table.*`, `Pagination.*`                                                                                                                                                                                                                                                                                                                                          |
-| **Layout**     | `Stack`, `Flex`, `Separator`, `ScrollArea.*`, `AspectRatio`                                                                                                                                                                                                                                                                                                        |
+| **Layout**     | `Resizable.*`, `Stack`, `Flex`, `Separator`, `ScrollArea.*`, `AspectRatio`                                                                                                                                                                                                                                                                                         |
 | **Utilities**  | `Code`, `Kbd`                                                                                                                                                                                                                                                                                                                                                      |
 
 Every component has a live page with props and examples at
@@ -108,6 +108,12 @@ Three that are easy to miss:
   skipped as punctuation.
 - **`Empty.Root announce`** puts the empty state in a live region — for the case
   that matters, results replaced by nothing after a search.
+- **`Carousel.*`** is built on CSS scroll-snap, so touch swiping and momentum
+  come from the platform. It does not loop and does not auto-rotate, both on
+  purpose — see its docs page.
+- **`Resizable.Handle`** implements the APG window-splitter keyboard contract:
+  arrow keys move it, Home and End collapse and expand. That is the half every
+  hand-rolled divider skips.
 
 ## Theming
 
diff --git a/packages/sve-ui/skills/sve-ui-usage/references/components.md b/packages/sve-ui/skills/sve-ui-usage/references/components.md
index 133a51b..37113ef 100644
--- a/packages/sve-ui/skills/sve-ui-usage/references/components.md
+++ b/packages/sve-ui/skills/sve-ui-usage/references/components.md
@@ -46,6 +46,43 @@ import {(Button, Input, Badge, Slider)} from 'sve-ui'; import {(Dialog, Select,
 </div>
 ```
 
+### Carousel
+
+```svelte
+<script>
+	import { Carousel } from 'sve-ui';
+	const slides = ['a', 'b', 'c'];
+</script>
+
+<!-- CSS scroll-snap, NOT transforms: touch swipe, momentum and arrow-key
+     scrolling come from the platform. `label` on Root is REQUIRED (it is a
+     labelled region so the whole carousel can be skipped). Slides announce as
+     "slide, 2 of 3" automatically — pass `label` only for a better name.
+
+     It does NOT loop and does NOT auto-rotate, both deliberate. A ring makes
+     "3 of 5" meaningless and kills the disabled-at-the-boundary affordance;
+     autoplay needs a pause button + stop-on-hover + stop-on-focus +
+     prefers-reduced-motion, and half of that is worse than none. `useCarousel()`
+     exposes next/prev/goTo if the consumer takes on that obligation.
+
+     Show several at once with --sve-carousel-slide-size (33.333% for three).
+     Do NOT add tabindex to Viewport: a scroll box is already arrow-scrollable. -->
+<Carousel.Root label="Product photos" style="--sve-carousel-slide-size: 100%;">
+	<Carousel.Viewport>
+		{#each slides as slide (slide)}
+			<Carousel.Slide>{slide}</Carousel.Slide>
+		{/each}
+	</Carousel.Viewport>
+	<Carousel.Previous />
+	<Carousel.Next />
+	<Carousel.Indicators>
+		{#each slides as _, i (i)}
+			<Carousel.Indicator index={i} />
+		{/each}
+	</Carousel.Indicators>
+</Carousel.Root>
+```
+
 ### Table
 
 ```svelte
@@ -763,6 +800,23 @@ All overlays portal to `<body>`; mirror the theme class onto `<body>`. Wrap cust
 ## Layout
 
 ```svelte
+<!-- Resizable: the APG window-splitter. `Handle index` is the pane on its
+     LEADING side — the one aria-valuenow reports and aria-controls points at.
+     `label` is REQUIRED: a separator with a tabindex IS a control, and
+     "splitter, 40" names a number and not the thing it sizes.
+
+     Keyboard is the contract, not a bonus: arrows move by `step` (5%), Home/End
+     collapse and expand. A drag moves ONE boundary and touches TWO panes,
+     clamped against BOTH panes' limits — clamping only the growing one lets the
+     neighbour shrink past its own min.
+
+     It does NOT persist sizes (that is an app decision) and `Pane min` defaults
+     to 10 — pass min={0} for a pane that can disappear. -->
+<Resizable.Group direction="horizontal">
+	<Resizable.Pane min={20}>Sidebar</Resizable.Pane>
+	<Resizable.Handle index={0} label="Resize sidebar" />
+	<Resizable.Pane>Content</Resizable.Pane>
+</Resizable.Group>
 <!-- ScrollArea: size constraint goes on Root; Viewport fills it and scrolls.
      type=hover (default) does NOT mount the scrollbar until pointer enter, which
      removes the only cue that more content exists — use type="always" unless the
diff --git a/packages/sve-ui/src/lib/components/Carousel/CarouselIndicator.svelte b/packages/sve-ui/src/lib/components/Carousel/CarouselIndicator.svelte
new file mode 100644
index 0000000..664a71b
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/CarouselIndicator.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { useCarousel } from './context.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'class' | 'aria-label'> {
+		/** Zero-based index of the slide this dot scrolls to. */
+		index: number;
+		/** Accessible name. Defaults to "Go to slide N". */
+		label?: string;
+		/** Extra classes merged onto the button. */
+		class?: string;
+	}
+
+	let { index, label, class: cls, ...rest }: Props = $props();
+
+	const ctx = useCarousel();
+	const current = $derived(ctx?.active === index);
+
+	const className = $derived(
+		['sve-carousel__indicator', current && 'sve-carousel__indicator--current', cls]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<!--
+  `aria-current`, not `aria-selected`.
+
+  `aria-selected` is only valid on a handful of roles — none of which a button in
+  a group has — so it would be ignored, leaving the active dot distinguished by
+  colour alone: visible to sighted users and to nobody else.
+-->
+<button
+	type="button"
+	class={className}
+	aria-label={label ?? `Go to slide ${index + 1}`}
+	aria-current={current ? 'true' : undefined}
+	onclick={() => ctx?.goTo(index)}
+	{...rest}
+></button>
+
+<style>
+	.sve-carousel__indicator {
+		width: 0.5rem;
+		height: 0.5rem;
+		padding: 0;
+		border: none;
+		border-radius: var(--sve-radius-full);
+		background-color: var(--sve-color-default-border);
+		cursor: pointer;
+		transition:
+			background-color 0.15s ease,
+			transform 0.15s ease;
+	}
+
+	.sve-carousel__indicator:hover {
+		background-color: var(--sve-color-default-foreground);
+	}
+
+	.sve-carousel__indicator:focus-visible {
+		outline: 2px solid var(--sve-color-primary);
+		outline-offset: 2px;
+	}
+
+	.sve-carousel__indicator--current {
+		background-color: var(--sve-color-primary);
+		transform: scale(1.35);
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Carousel/CarouselIndicators.svelte b/packages/sve-ui/src/lib/components/Carousel/CarouselIndicators.svelte
new file mode 100644
index 0000000..3dd9756
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/CarouselIndicators.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label'> {
+		/** Accessible name for the set of dots. Defaults to "Choose slide". */
+		label?: string;
+		/** Extra classes merged onto the container. */
+		class?: string;
+		children: Snippet;
+	}
+
+	let { label = 'Choose slide', class: cls, children, ...rest }: Props = $props();
+
+	const className = $derived(['sve-carousel__indicators', cls].filter(Boolean).join(' '));
+</script>
+
+<!--
+  A group of buttons, not a tablist.
+
+  `role="tablist"` would promise arrow-key movement between the dots and a
+  `tabpanel` relationship to the slides, neither of which is true here — the
+  slides are a scrolling track, not panels that swap. Plain buttons in a named
+  group describe what this actually is.
+-->
+<div class={className} role="group" aria-label={label} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	.sve-carousel__indicators {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--sve-space-2);
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Carousel/CarouselNext.svelte b/packages/sve-ui/src/lib/components/Carousel/CarouselNext.svelte
new file mode 100644
index 0000000..931062b
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/CarouselNext.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { useCarousel } from './context.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'class' | 'aria-label'> {
+		/** Accessible name. Defaults to "Previous slide". */
+		label?: string;
+		/** Extra classes merged onto the button. */
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { label = 'Next slide', class: cls, children, ...rest }: Props = $props();
+
+	const ctx = useCarousel();
+	const className = $derived(['sve-carousel__control', cls].filter(Boolean).join(' '));
+</script>
+
+<!--
+  `disabled`, not hidden.
+
+  A control that vanishes at the ends changes the tab order under the user and
+  moves the control beside it, which is disorienting for anyone navigating by
+  keyboard. Disabled keeps the layout still and states the boundary.
+-->
+<button
+	type="button"
+	class={className}
+	aria-label={label}
+	disabled={!ctx || !ctx.canScrollNext}
+	onclick={() => ctx?.next()}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"><path d="m9 18 6-6-6-6" /></svg
+		>
+	{/if}
+</button>
+
+<style>
+	.sve-carousel__control {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		padding: 0;
+		border: 1px solid var(--sve-color-default-border);
+		border-radius: var(--sve-radius-full);
+		background-color: var(--sve-color-default-surface);
+		color: var(--sve-color-default-foreground);
+		cursor: pointer;
+		transition:
+			background-color 0.15s ease,
+			opacity 0.15s ease;
+	}
+
+	.sve-carousel__control:hover:not(:disabled) {
+		background-color: var(--sve-color-default);
+	}
+
+	.sve-carousel__control:focus-visible {
+		outline: 2px solid var(--sve-color-primary);
+		outline-offset: 2px;
+	}
+
+	.sve-carousel__control:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+
+	.sve-carousel__control svg {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Carousel/CarouselPrevious.svelte b/packages/sve-ui/src/lib/components/Carousel/CarouselPrevious.svelte
new file mode 100644
index 0000000..911bd3f
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/CarouselPrevious.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { useCarousel } from './context.js';
+
+	interface Props extends Omit<HTMLButtonAttributes, 'class' | 'aria-label'> {
+		/** Accessible name. Defaults to "Previous slide". */
+		label?: string;
+		/** Extra classes merged onto the button. */
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { label = 'Previous slide', class: cls, children, ...rest }: Props = $props();
+
+	const ctx = useCarousel();
+	const className = $derived(['sve-carousel__control', cls].filter(Boolean).join(' '));
+</script>
+
+<!--
+  `disabled`, not hidden.
+
+  A control that vanishes at the ends changes the tab order under the user and
+  moves the control beside it, which is disorienting for anyone navigating by
+  keyboard. Disabled keeps the layout still and states the boundary.
+-->
+<button
+	type="button"
+	class={className}
+	aria-label={label}
+	disabled={!ctx || !ctx.canScrollPrev}
+	onclick={() => ctx?.prev()}
+	{...rest}
+>
+	{#if children}
+		{@render children()}
+	{:else}
+		<svg
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg
+		>
+	{/if}
+</button>
+
+<style>
+	.sve-carousel__control {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		padding: 0;
+		border: 1px solid var(--sve-color-default-border);
+		border-radius: var(--sve-radius-full);
+		background-color: var(--sve-color-default-surface);
+		color: var(--sve-color-default-foreground);
+		cursor: pointer;
+		transition:
+			background-color 0.15s ease,
+			opacity 0.15s ease;
+	}
+
+	.sve-carousel__control:hover:not(:disabled) {
+		background-color: var(--sve-color-default);
+	}
+
+	.sve-carousel__control:focus-visible {
+		outline: 2px solid var(--sve-color-primary);
+		outline-offset: 2px;
+	}
+
+	.sve-carousel__control:disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+
+	.sve-carousel__control svg {
+		width: 1rem;
+		height: 1rem;
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Carousel/CarouselRoot.svelte b/packages/sve-ui/src/lib/components/Carousel/CarouselRoot.svelte
new file mode 100644
index 0000000..6c27408
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/CarouselRoot.svelte
@@ -0,0 +1,186 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setCarouselContext, type Orientation } from './context.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label'> {
+		orientation?: Orientation;
+		/**
+		 * The carousel's accessible name, e.g. "Product photos".
+		 *
+		 * Required, and it is not decoration. The root is a labelled region so a
+		 * screen reader user can find and skip the whole thing in one move; an
+		 * unnamed region is an obstacle they have to read through to identify.
+		 */
+		label?: string;
+		/** Id of an existing visible heading, as an alternative to `label`. */
+		labelledby?: string;
+		/** Extra classes merged onto the root element. */
+		class?: string;
+		children: Snippet;
+	}
+
+	let {
+		orientation = 'horizontal',
+		label,
+		labelledby,
+		class: cls,
+		children,
+		...rest
+	}: Props = $props();
+
+	let viewport = $state<HTMLElement | undefined>(undefined);
+	let active = $state(0);
+	let count = $state(0);
+	let scrollStart = $state(0);
+	let scrollMax = $state(0);
+
+	const horizontal = $derived(orientation === 'horizontal');
+
+	function slides(): HTMLElement[] {
+		if (!viewport) return [];
+		return [...viewport.querySelectorAll<HTMLElement>('[data-sve-carousel-slide]')];
+	}
+
+	/*
+		Position is READ from the scroll container rather than tracked in state.
+
+		A carousel built on scroll-snap has three drivers a component cannot
+		intercept: a touch swipe, a trackpad flick, and the arrow keys the browser
+		already handles on a scrollable box. A remembered index would silently
+		disagree with what is on screen after any of them, and the "3 of 7" label
+		would start lying.
+	*/
+	function measure() {
+		if (!viewport) return;
+
+		const items = slides();
+		count = items.length;
+
+		const pos = horizontal ? viewport.scrollLeft : viewport.scrollTop;
+		scrollStart = pos;
+		scrollMax = horizontal
+			? viewport.scrollWidth - viewport.clientWidth
+			: viewport.scrollHeight - viewport.clientHeight;
+
+		let nearest = 0;
+		let best = Infinity;
+		for (let i = 0; i < items.length; i++) {
+			const offset = horizontal
+				? items[i].offsetLeft - viewport.offsetLeft
+				: items[i].offsetTop - viewport.offsetTop;
+			const distance = Math.abs(offset - pos);
+			if (distance < best) {
+				best = distance;
+				nearest = i;
+			}
+		}
+		active = nearest;
+	}
+
+	$effect(() => {
+		if (!viewport) return;
+		const el = viewport;
+
+		measure();
+		el.addEventListener('scroll', measure, { passive: true });
+
+		// Slides appearing, leaving, or changing size all move the snap points.
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		for (const s of slides()) ro.observe(s);
+
+		const mo = new MutationObserver(() => {
+			measure();
+			for (const s of slides()) ro.observe(s);
+		});
+		mo.observe(el, { childList: true, subtree: true });
+
+		return () => {
+			el.removeEventListener('scroll', measure);
+			ro.disconnect();
+			mo.disconnect();
+		};
+	});
+
+	function goTo(index: number) {
+		const items = slides();
+		if (!viewport || index < 0 || index >= items.length) return;
+
+		const target = horizontal
+			? items[index].offsetLeft - viewport.offsetLeft
+			: items[index].offsetTop - viewport.offsetTop;
+
+		// Someone who asked the system to reduce motion did not ask for a slide to
+		// glide past; jumping there is the same information without the movement.
+		const reduced =
+			typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+		viewport.scrollTo({
+			[horizontal ? 'left' : 'top']: target,
+			behavior: reduced ? 'auto' : 'smooth'
+		});
+	}
+
+	setCarouselContext({
+		get orientation() {
+			return orientation;
+		},
+		get active() {
+			return active;
+		},
+		get count() {
+			return count;
+		},
+		// Compared against the measured extent, not the index: with more than one
+		// slide visible at a time the last index is reachable while scrolling is not
+		// finished, and a control disabled then is a control that lies.
+		get canScrollPrev() {
+			return scrollStart > 1;
+		},
+		get canScrollNext() {
+			return scrollStart < scrollMax - 1;
+		},
+		setViewport(el) {
+			viewport = el;
+		},
+		goTo,
+		prev() {
+			goTo(active - 1);
+		},
+		next() {
+			goTo(active + 1);
+		}
+	});
+
+	const className = $derived(
+		['sve-carousel', `sve-carousel--${orientation}`, cls].filter(Boolean).join(' ')
+	);
+</script>
+
+<div
+	class={className}
+	role="region"
+	aria-roledescription="carousel"
+	aria-label={labelledby ? undefined : label}
+	aria-labelledby={labelledby}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	.sve-carousel {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--sve-space-3);
+	}
+
+	.sve-carousel--horizontal,
+	.sve-carousel--vertical {
+		/* Orientation is carried on the viewport and the slides; the root only
+		   needs the hook so a consumer can target either arrangement. */
+		width: 100%;
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Carousel/CarouselSlide.svelte b/packages/sve-ui/src/lib/components/Carousel/CarouselSlide.svelte
new file mode 100644
index 0000000..9750528
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/CarouselSlide.svelte
@@ -0,0 +1,82 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useCarousel } from './context.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label'> {
+		/**
+		 * Overrides the generated "N of M" name.
+		 *
+		 * Pass something meaningful when the slide has an identity of its own — a
+		 * product name beats a position. The default exists because a slide with no
+		 * name at all is announced as "group", which tells the user nothing about
+		 * where they are.
+		 */
+		label?: string;
+		/** Extra classes merged onto the slide. */
+		class?: string;
+		children: Snippet;
+	}
+
+	let { label, class: cls, children, ...rest }: Props = $props();
+
+	const ctx = useCarousel();
+	let el = $state<HTMLDivElement | undefined>(undefined);
+	let index = $state(-1);
+
+	/*
+		The index is read from the DOM, not from a registration counter.
+
+		A counter handed out at component init drifts the moment slides come from a
+		keyed `{#each}` that reorders or removes one, and the position it reports is
+		exactly the thing this label promises to be true. Asking the parent where
+		this element actually sits cannot drift.
+	*/
+	$effect(() => {
+		if (!el?.parentElement) return;
+		const siblings = [...el.parentElement.querySelectorAll('[data-sve-carousel-slide]')];
+		index = siblings.indexOf(el);
+	});
+
+	const generated = $derived(index >= 0 && ctx?.count ? `${index + 1} of ${ctx.count}` : undefined);
+
+	const className = $derived(
+		['sve-carousel__slide', `sve-carousel__slide--${ctx?.orientation ?? 'horizontal'}`, cls]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<div
+	bind:this={el}
+	data-sve-carousel-slide
+	class={className}
+	role="group"
+	aria-roledescription="slide"
+	aria-label={label ?? generated}
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	.sve-carousel__slide {
+		flex: 0 0 auto;
+		scroll-snap-align: start;
+		/*
+			A slide that can only be partly scrolled to would leave a snap point the
+			user can never rest on.
+		*/
+		scroll-snap-stop: normal;
+		min-width: 0;
+		min-height: 0;
+	}
+
+	.sve-carousel__slide--horizontal {
+		width: var(--sve-carousel-slide-size, 100%);
+	}
+
+	.sve-carousel__slide--vertical {
+		height: var(--sve-carousel-slide-size, 100%);
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Carousel/CarouselViewport.svelte b/packages/sve-ui/src/lib/components/Carousel/CarouselViewport.svelte
new file mode 100644
index 0000000..0b5e325
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/CarouselViewport.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useCarousel } from './context.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+		/** Extra classes merged onto the scroll container. */
+		class?: string;
+		children: Snippet;
+	}
+
+	let { class: cls, children, ...rest }: Props = $props();
+
+	const ctx = useCarousel();
+	let el = $state<HTMLDivElement | undefined>(undefined);
+
+	$effect(() => {
+		ctx?.setViewport(el);
+		return () => ctx?.setViewport(undefined);
+	});
+
+	const className = $derived(
+		['sve-carousel__viewport', `sve-carousel__viewport--${ctx?.orientation ?? 'horizontal'}`, cls]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<!--
+  A scroll container, and deliberately a plain one.
+
+  `tabindex="0"` is NOT set here. A scrollable box is already reachable and
+  arrow-scrollable in every browser that supports scroll-snap, and adding a tab
+  stop would put an unnamed one in front of the slides' own focusable content.
+  The controls are the named, operable affordance.
+-->
+<div bind:this={el} class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	.sve-carousel__viewport {
+		display: flex;
+		overflow: auto;
+		scroll-snap-type: both mandatory;
+		/*
+			Momentum scrolling on iOS, and the reason touch needs no code here: the
+			platform already does swipe, fling and rubber-banding better than a
+			pointer-event reimplementation would.
+		*/
+		-webkit-overflow-scrolling: touch;
+		scrollbar-width: none;
+		gap: var(--sve-space-3);
+	}
+
+	.sve-carousel__viewport::-webkit-scrollbar {
+		display: none;
+	}
+
+	.sve-carousel__viewport--horizontal {
+		flex-direction: row;
+		scroll-snap-type: x mandatory;
+	}
+
+	.sve-carousel__viewport--vertical {
+		flex-direction: column;
+		scroll-snap-type: y mandatory;
+		max-height: 20rem;
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Carousel/context.ts b/packages/sve-ui/src/lib/components/Carousel/context.ts
new file mode 100644
index 0000000..c3ddcf1
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/context.ts
@@ -0,0 +1,43 @@
+import { setContext, getContext } from 'svelte';
+
+const CAROUSEL_CONTEXT_KEY = Symbol('sve-ui:carousel');
+
+export type Orientation = 'horizontal' | 'vertical';
+
+export interface CarouselContext {
+	/** Reading direction of the track. */
+	readonly orientation: Orientation;
+	/** Index of the slide currently snapped into view. */
+	readonly active: number;
+	/** How many slides the viewport contains. */
+	readonly count: number;
+	/** Whether there is anything before / after the current position. */
+	readonly canScrollPrev: boolean;
+	readonly canScrollNext: boolean;
+	/** Registers the scroll container so the controls can drive it. */
+	setViewport(el: HTMLElement | undefined): void;
+	/** Scrolls a slide into view by index. Clamped; out-of-range is a no-op. */
+	goTo(index: number): void;
+	prev(): void;
+	next(): void;
+}
+
+/**
+ * Shares the carousel's position with its parts.
+ *
+ * Getters, not a snapshot: `Previous`, `Next` and `Indicator` all read `active`
+ * during render, and a plain value would freeze at mount.
+ */
+export function setCarouselContext(ctx: CarouselContext): void {
+	setContext(CAROUSEL_CONTEXT_KEY, ctx);
+}
+
+/**
+ * Reads the carousel context.
+ *
+ * Returns undefined outside a `Carousel.Root`. The parts degrade to an inert
+ * appearance rather than throwing, so one rendered in isolation still renders.
+ */
+export function useCarousel(): CarouselContext | undefined {
+	return getContext<CarouselContext>(CAROUSEL_CONTEXT_KEY);
+}
diff --git a/packages/sve-ui/src/lib/components/Carousel/index.ts b/packages/sve-ui/src/lib/components/Carousel/index.ts
new file mode 100644
index 0000000..2092939
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Carousel/index.ts
@@ -0,0 +1,50 @@
+/**
+ * Carousel namespace — a scrolling track of slides with controls.
+ *
+ * Custom, not a Bits UI wrapper: Bits ships no carousel. Built on CSS
+ * scroll-snap rather than transforms, which is what buys touch swiping, trackpad
+ * flicks, momentum and the browser's own arrow-key scrolling for free — and
+ * keeps the runtime dependency count at one.
+ *
+ * Compose:
+ *   Root > Viewport > Slide+
+ *        > Previous
+ *        > Next
+ *        > Indicators > Indicator+
+ *
+ * Position is READ from the scroll container on every scroll, never remembered.
+ * A swipe, a flick and the arrow keys are all drivers the component cannot
+ * intercept, and a stored index would disagree with the screen after any of
+ * them — which would make the "3 of 7" slide label a lie.
+ *
+ * What it does NOT do, and these are decisions rather than gaps:
+ *
+ *   - **It does not loop.** An infinite track makes "slide 3 of 7" meaningless
+ *     and removes the only honest position affordance there is: a Previous or
+ *     Next that goes flat at the boundary. If wrapping is genuinely wanted,
+ *     `goTo` is exported and the consumer owns the lie.
+ *   - **It does not auto-rotate.** Auto-rotation is only acceptable with a
+ *     visible pause control, and stopping on hover, and stopping on focus, and
+ *     honouring `prefers-reduced-motion`. That chain is exactly what gets
+ *     half-built, and content that moves on its own is one of the most
+ *     documented accessibility failures on the web. `next()` is available for
+ *     anyone who wants to drive it — along with the obligation to ship the pause
+ *     button.
+ *   - **It does not make the viewport a tab stop.** A scrollable box is already
+ *     arrow-scrollable, and an unnamed tab stop in front of the slides' own
+ *     links buys nothing.
+ *
+ * Sizing: set `--sve-carousel-slide-size` on the Root to show more than one
+ * slide at a time (`33.333%` for three). Previous and Next are disabled from the
+ * measured scroll extent, not from the index, so they stay honest when several
+ * slides are visible at once.
+ */
+
+export { default as Root } from './CarouselRoot.svelte';
+export { default as Viewport } from './CarouselViewport.svelte';
+export { default as Slide } from './CarouselSlide.svelte';
+export { default as Previous } from './CarouselPrevious.svelte';
+export { default as Next } from './CarouselNext.svelte';
+export { default as Indicators } from './CarouselIndicators.svelte';
+export { default as Indicator } from './CarouselIndicator.svelte';
+export { useCarousel, type CarouselContext, type Orientation } from './context.js';
diff --git a/packages/sve-ui/src/lib/components/Resizable/ResizableGroup.svelte b/packages/sve-ui/src/lib/components/Resizable/ResizableGroup.svelte
new file mode 100644
index 0000000..1fca111
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Resizable/ResizableGroup.svelte
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setResizableContext, type Direction, type PaneRegistration } from './context.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+		direction?: Direction;
+		/** Extra classes merged onto the group. */
+		class?: string;
+		children: Snippet;
+	}
+
+	let { direction = 'horizontal', class: cls, children, ...rest }: Props = $props();
+
+	let element = $state<HTMLDivElement | undefined>(undefined);
+	let regs = $state<PaneRegistration[]>([]);
+	let sizes = $state<number[]>([]);
+	const uid = $props.id();
+
+	function register(reg: PaneRegistration): number {
+		const index = regs.length;
+		regs = [...regs, reg];
+		// An even split is the only distribution that needs no configuration and
+		// cannot violate a minimum that has not been declared yet. Recomputed from
+		// the new total rather than appended, so registering a third pane
+		// redistributes the first two instead of leaving them at 50 each.
+		const total = index + 1;
+		sizes = Array.from({ length: total }, () => 100 / total);
+		return index;
+	}
+
+	/*
+		Resizing moves ONE boundary and touches exactly TWO panes.
+
+		Distributing a drag across every pane in the group is what produces the
+		familiar bug where dragging one divider quietly reflows the far side of the
+		layout. Taking from the neighbour keeps the total at 100 and leaves every
+		other pane where the user put it.
+	*/
+	function resize(index: number, deltaPercent: number) {
+		const a = index;
+		const b = index + 1;
+		if (a < 0 || b >= sizes.length) return;
+
+		const ra = regs[a];
+		const rb = regs[b];
+
+		// Clamp against BOTH panes before applying anything. Clamping only the pane
+		// being grown lets the other one shrink past its own minimum.
+		const maxGrow = Math.min(ra.max - sizes[a], sizes[b] - rb.min);
+		const maxShrink = Math.min(sizes[a] - ra.min, rb.max - sizes[b]);
+		const delta = Math.max(-maxShrink, Math.min(maxGrow, deltaPercent));
+		if (delta === 0) return;
+
+		const next = [...sizes];
+		next[a] = sizes[a] + delta;
+		next[b] = sizes[b] - delta;
+		sizes = next;
+	}
+
+	setResizableContext({
+		get direction() {
+			return direction;
+		},
+		get sizes() {
+			return sizes;
+		},
+		get element() {
+			return element;
+		},
+		register,
+		sizeOf(i) {
+			return sizes[i] ?? 0;
+		},
+		idOf(i) {
+			return `${uid}-pane-${i}`;
+		},
+		resize
+	});
+
+	const className = $derived(
+		['sve-resizable', `sve-resizable--${direction}`, cls].filter(Boolean).join(' ')
+	);
+</script>
+
+<div bind:this={element} class={className} {...rest}>
+	{@render children()}
+</div>
+
+<style>
+	.sve-resizable {
+		display: flex;
+		width: 100%;
+		overflow: hidden;
+	}
+
+	.sve-resizable--horizontal {
+		flex-direction: row;
+	}
+
+	.sve-resizable--vertical {
+		flex-direction: column;
+		height: 100%;
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Resizable/ResizableHandle.svelte b/packages/sve-ui/src/lib/components/Resizable/ResizableHandle.svelte
new file mode 100644
index 0000000..c8a3979
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Resizable/ResizableHandle.svelte
@@ -0,0 +1,197 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useResizable } from './context.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'aria-label'> {
+		/**
+		 * Index of the pane on the leading side of this handle — the one whose size
+		 * `aria-valuenow` reports.
+		 */
+		index: number;
+		/**
+		 * The handle's accessible name, e.g. "Resize sidebar".
+		 *
+		 * Required. A `separator` with a tabindex is a control, and a control that
+		 * announces only "splitter, 40" tells a keyboard user a number without
+		 * saying what it sizes.
+		 */
+		label?: string;
+		/** Percent moved per arrow-key press. */
+		step?: number;
+		/** Extra classes merged onto the handle. */
+		class?: string;
+	}
+
+	let { index, label, step = 5, class: cls, ...rest }: Props = $props();
+
+	const ctx = useResizable();
+	const horizontal = $derived(ctx?.direction !== 'vertical');
+
+	let dragging = $state(false);
+
+	const now = $derived(Math.round(ctx?.sizeOf(index) ?? 0));
+
+	function toPercent(px: number): number {
+		const el = ctx?.element;
+		if (!el) return 0;
+		const total = horizontal ? el.clientWidth : el.clientHeight;
+		return total ? (px / total) * 100 : 0;
+	}
+
+	/*
+		Pointer events, and `setPointerCapture`.
+
+		Capture is what keeps a drag alive when the pointer leaves the 4px handle —
+		which it does immediately, because nobody tracks a hairline. Without it the
+		divider drops the moment the cursor moves faster than the layout, and the
+		listeners would have to go on the window and be torn down by hand.
+	*/
+	function onpointerdown(event: PointerEvent) {
+		if (!ctx || event.button !== 0) return;
+		const el = event.currentTarget as HTMLElement;
+		el.setPointerCapture(event.pointerId);
+		dragging = true;
+		event.preventDefault();
+	}
+
+	function onpointermove(event: PointerEvent) {
+		if (!dragging || !ctx) return;
+		ctx.resize(index, toPercent(horizontal ? event.movementX : event.movementY));
+	}
+
+	function onpointerup(event: PointerEvent) {
+		if (!dragging) return;
+		(event.currentTarget as HTMLElement).releasePointerCapture(event.pointerId);
+		dragging = false;
+	}
+
+	/*
+		Keyboard operation is not a nice-to-have here: it is the difference between a
+		splitter and a decoration. A divider that only responds to a drag is
+		unusable without a pointer, and the APG window-splitter pattern is explicit
+		about the arrow keys, Home and End.
+	*/
+	function onkeydown(event: KeyboardEvent) {
+		if (!ctx) return;
+
+		const back = horizontal ? 'ArrowLeft' : 'ArrowUp';
+		const forward = horizontal ? 'ArrowRight' : 'ArrowDown';
+
+		switch (event.key) {
+			case back:
+				ctx.resize(index, -step);
+				break;
+			case forward:
+				ctx.resize(index, step);
+				break;
+			// 100 is deliberately larger than any legal move: `resize` clamps to the
+			// declared minimum, so this collapses as far as the panes allow without
+			// this component needing to know their limits.
+			case 'Home':
+				ctx.resize(index, -100);
+				break;
+			case 'End':
+				ctx.resize(index, 100);
+				break;
+			default:
+				return;
+		}
+		event.preventDefault();
+	}
+
+	const className = $derived(
+		[
+			'sve-resizable__handle',
+			`sve-resizable__handle--${horizontal ? 'horizontal' : 'vertical'}`,
+			dragging && 'sve-resizable__handle--dragging',
+			cls
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+</script>
+
+<!--
+  The a11y linter flags `tabindex` on a `separator` as a non-interactive element
+  with a tab stop. It is right about a plain separator and wrong about this one:
+  ARIA says a separator becomes a WIDGET the moment it is focusable and carries
+  `aria-valuenow`, which is exactly the window-splitter pattern. Removing the tab
+  stop to satisfy the rule would delete keyboard operation, which is the whole
+  contract this component exists to honour.
+-->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div
+	class={className}
+	role="separator"
+	tabindex="0"
+	aria-orientation={horizontal ? 'vertical' : 'horizontal'}
+	aria-label={label}
+	aria-controls={ctx?.idOf(index)}
+	aria-valuenow={now}
+	aria-valuemin={0}
+	aria-valuemax={100}
+	{onpointerdown}
+	{onpointermove}
+	{onpointerup}
+	{onkeydown}
+	{...rest}
+></div>
+
+<style>
+	.sve-resizable__handle {
+		flex: 0 0 auto;
+		position: relative;
+		background-color: var(--sve-color-default-border);
+		transition: background-color 0.15s ease;
+		/* Stops a drag from selecting the text in the panes either side. */
+		user-select: none;
+		touch-action: none;
+	}
+
+	/*
+		`aria-orientation` is VERTICAL for a handle in a horizontal group: it
+		describes the separator's own line, not the direction of travel. The class
+		follows the group so the CSS reads the same way the prop does.
+	*/
+	.sve-resizable__handle--horizontal {
+		width: 1px;
+		cursor: col-resize;
+	}
+
+	.sve-resizable__handle--vertical {
+		height: 1px;
+		cursor: row-resize;
+	}
+
+	/*
+		The hit area, and the reason it is a pseudo-element.
+
+		A 1px divider is the right thing to LOOK at and an unreasonable thing to
+		hit — WCAG target-size guidance puts the floor far above it. This grows the
+		grabbable area to 12px without moving the panes by a pixel, which a padded
+		or bordered handle would.
+	*/
+	.sve-resizable__handle::after {
+		content: '';
+		position: absolute;
+		z-index: 1;
+	}
+
+	.sve-resizable__handle--horizontal::after {
+		inset: 0 -6px;
+	}
+
+	.sve-resizable__handle--vertical::after {
+		inset: -6px 0;
+	}
+
+	.sve-resizable__handle:hover,
+	.sve-resizable__handle--dragging {
+		background-color: var(--sve-color-primary);
+	}
+
+	.sve-resizable__handle:focus-visible {
+		outline: 2px solid var(--sve-color-primary);
+		outline-offset: 1px;
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Resizable/ResizablePane.svelte b/packages/sve-ui/src/lib/components/Resizable/ResizablePane.svelte
new file mode 100644
index 0000000..4507a10
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Resizable/ResizablePane.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useResizable } from './context.js';
+
+	interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
+		/** Smallest share of the group this pane accepts, in percent. */
+		min?: number;
+		/** Largest share, in percent. */
+		max?: number;
+		/** Extra classes merged onto the pane. */
+		class?: string;
+		children: Snippet;
+	}
+
+	let { min = 10, max = 90, class: cls, children, ...rest }: Props = $props();
+
+	const ctx = useResizable();
+	// Registered during init, not in an effect: the Handle beside it needs the
+	// index and the id on first render, and an effect would run too late.
+	// The limits go in as getters so registering once does not freeze them.
+	const index = ctx
+		? ctx.register({
+				get min() {
+					return min;
+				},
+				get max() {
+					return max;
+				}
+			})
+		: -1;
+
+	const size = $derived(ctx && index >= 0 ? ctx.sizeOf(index) : 100);
+	const className = $derived(['sve-resizable__pane', cls].filter(Boolean).join(' '));
+</script>
+
+<!--
+  `overflow: hidden` on the pane, not on its content.
+
+  A pane dragged narrower than its content must clip rather than push the
+  neighbour, otherwise the sizes the group is tracking stop matching what is on
+  screen and every subsequent drag is computed from a stale layout.
+-->
+<div
+	id={ctx && index >= 0 ? ctx.idOf(index) : undefined}
+	class={className}
+	style="flex-basis: {size}%;"
+	{...rest}
+>
+	{@render children()}
+</div>
+
+<style>
+	.sve-resizable__pane {
+		flex-grow: 0;
+		flex-shrink: 0;
+		overflow: hidden;
+		min-width: 0;
+		min-height: 0;
+	}
+</style>
diff --git a/packages/sve-ui/src/lib/components/Resizable/context.ts b/packages/sve-ui/src/lib/components/Resizable/context.ts
new file mode 100644
index 0000000..08c102b
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Resizable/context.ts
@@ -0,0 +1,55 @@
+import { setContext, getContext } from 'svelte';
+
+const RESIZABLE_CONTEXT_KEY = Symbol('sve-ui:resizable');
+
+export type Direction = 'horizontal' | 'vertical';
+
+/**
+ * A pane's limits, passed as GETTERS.
+ *
+ * Registration happens once, at init, because the Handle beside a pane needs its
+ * index and id on first render. Snapshotting the numbers there would freeze them:
+ * a consumer whose `min` depends on state would change it and the group would go
+ * on clamping against the old value. Getters keep registration one-time and the
+ * limits live.
+ */
+export interface PaneRegistration {
+	/** Smallest share of the group this pane accepts, in percent. */
+	readonly min: number;
+	/** Largest share, in percent. */
+	readonly max: number;
+}
+
+export interface ResizableContext {
+	readonly direction: Direction;
+	/** Current size of every pane, in percent, in DOM order. */
+	readonly sizes: number[];
+	/** Registers a pane and returns its index. */
+	register(reg: PaneRegistration): number;
+	/** Size of one pane, for its `flex-basis`. */
+	sizeOf(index: number): number;
+	/** Ids so a Handle can point `aria-controls` at the pane it resizes. */
+	idOf(index: number): string;
+	/**
+	 * Moves the boundary between `index` and `index + 1` by a delta in percent.
+	 * Clamped by both panes' own limits, so a drag past a minimum stops rather
+	 * than pushing the other pane out of the group.
+	 */
+	resize(index: number, deltaPercent: number): void;
+	/** The group element, so a Handle can convert pixels to percent. */
+	readonly element: HTMLElement | undefined;
+}
+
+export function setResizableContext(ctx: ResizableContext): void {
+	setContext(RESIZABLE_CONTEXT_KEY, ctx);
+}
+
+/**
+ * Reads the resizable context.
+ *
+ * Returns undefined outside a `Resizable.Group`, so a Pane rendered on its own
+ * still renders instead of throwing.
+ */
+export function useResizable(): ResizableContext | undefined {
+	return getContext<ResizableContext>(RESIZABLE_CONTEXT_KEY);
+}
diff --git a/packages/sve-ui/src/lib/components/Resizable/index.ts b/packages/sve-ui/src/lib/components/Resizable/index.ts
new file mode 100644
index 0000000..4e22c7f
--- /dev/null
+++ b/packages/sve-ui/src/lib/components/Resizable/index.ts
@@ -0,0 +1,43 @@
+/**
+ * Resizable namespace — panes with a draggable, keyboard-operable divider.
+ *
+ * Custom, not a Bits UI wrapper: Bits ships no splitter. Implements the APG
+ * window-splitter pattern, which is mostly a keyboard contract — that is the part
+ * every hand-rolled divider skips.
+ *
+ * Compose:
+ *   Group > Pane > … > Handle index={0} > Pane > …
+ *
+ * `Handle index` is the pane on its leading side: the one whose share
+ * `aria-valuenow` reports and whose id it points `aria-controls` at.
+ *
+ * What the handle actually does, none of which is optional:
+ *
+ *   - `role="separator"` with `tabindex="0"`, `aria-orientation`, and
+ *     `aria-valuenow` / `min` / `max`. A separator with a tabindex IS a control,
+ *     so `label` is required — "splitter, 40" names a number and not the thing
+ *     it sizes.
+ *   - Arrow keys move it by `step`, Home and End collapse and expand. A divider
+ *     that only answers to a drag is unusable without a pointer.
+ *   - `setPointerCapture`, so a drag survives the pointer leaving a hairline
+ *     target — which it does immediately.
+ *   - A 12px hit area from a pseudo-element, because 1px is the right thing to
+ *     look at and an unreasonable thing to hit.
+ *
+ * A drag moves ONE boundary and touches exactly TWO panes, clamped against both
+ * of their limits before anything is applied. Distributing a drag across the
+ * whole group is what makes dragging one divider reflow the far side of a layout.
+ *
+ * What it does NOT do:
+ *
+ *   - It does not persist sizes. Where that belongs — a cookie, a profile,
+ *     `localStorage` — is an application decision, and guessing it wrong is worse
+ *     than not guessing.
+ *   - It does not collapse to zero by default. `Pane min` defaults to 10; set
+ *     `min={0}` if a pane should be able to disappear.
+ */
+
+export { default as Group } from './ResizableGroup.svelte';
+export { default as Pane } from './ResizablePane.svelte';
+export { default as Handle } from './ResizableHandle.svelte';
+export { useResizable, type ResizableContext, type Direction } from './context.js';
diff --git a/packages/sve-ui/src/lib/index.ts b/packages/sve-ui/src/lib/index.ts
index b58e3ec..c151dc1 100644
--- a/packages/sve-ui/src/lib/index.ts
+++ b/packages/sve-ui/src/lib/index.ts
@@ -15,6 +15,7 @@
  * Toast namespace + the imperative `toast`,
  * RatingGroup namespace, Kbd, ButtonGroup,
  * Empty and InputGroup namespaces,
+ * Carousel and Resizable namespaces,
  * variant helper + types, theme types.
  */
 
@@ -171,6 +172,12 @@ export * as Empty from './components/Empty/index.js';
 // InputGroup namespace (custom — an Input with addons, drawn as one control)
 export * as InputGroup from './components/InputGroup/index.js';
 
+// Carousel namespace (custom — CSS scroll-snap; no loop, no autoplay, on purpose)
+export * as Carousel from './components/Carousel/index.js';
+
+// Resizable namespace (custom — the APG window-splitter, keyboard contract included)
+export * as Resizable from './components/Resizable/index.js';
+
 // Toast namespace (custom — imperative trigger, declarative Viewport)
 export * as Toast from './components/Toast/index.js';
 // The imperative entry point. Requires a mounted <Toast.Viewport />.
diff --git a/packages/sve-ui/src/tests/A11yFixture.svelte b/packages/sve-ui/src/tests/A11yFixture.svelte
index f5cc197..1349c54 100644
--- a/packages/sve-ui/src/tests/A11yFixture.svelte
+++ b/packages/sve-ui/src/tests/A11yFixture.svelte
@@ -33,6 +33,8 @@
 	import * as ContextMenu from '$lib/components/ContextMenu/index.js';
 	import * as ScrollArea from '$lib/components/ScrollArea/index.js';
 	import * as Empty from '$lib/components/Empty/index.js';
+	import * as Carousel from '$lib/components/Carousel/index.js';
+	import * as Resizable from '$lib/components/Resizable/index.js';
 	import * as InputGroup from '$lib/components/InputGroup/index.js';
 	import * as Toolbar from '$lib/components/Toolbar/index.js';
 	import * as Menubar from '$lib/components/Menubar/index.js';
@@ -585,6 +587,39 @@
 	</Table.Root>
 </section>
 
+<!--
+  Every control present at once: a labelled region, three named slides, both
+  arrows (Previous disabled at rest) and the indicator group.
+-->
+<section aria-label="Carousel">
+	<Carousel.Root label="Mountains">
+		<Carousel.Viewport>
+			<Carousel.Slide>Kilimanjaro</Carousel.Slide>
+			<Carousel.Slide>Aconcagua</Carousel.Slide>
+			<Carousel.Slide>Denali</Carousel.Slide>
+		</Carousel.Viewport>
+		<Carousel.Previous />
+		<Carousel.Next />
+		<Carousel.Indicators>
+			<Carousel.Indicator index={0} />
+			<Carousel.Indicator index={1} />
+			<Carousel.Indicator index={2} />
+		</Carousel.Indicators>
+	</Carousel.Root>
+</section>
+
+<!--
+  A focusable `separator` with a name and a live value — the one configuration
+  this component is allowed to render, which is why `label` is required.
+-->
+<section aria-label="Resizable panes">
+	<Resizable.Group>
+		<Resizable.Pane min={20}>Sidebar</Resizable.Pane>
+		<Resizable.Handle index={0} label="Resize sidebar" />
+		<Resizable.Pane>Content</Resizable.Pane>
+	</Resizable.Group>
+</section>
+
 <!--
   The Viewport is a persistent live region that renders even when empty, so axe
   sees it in exactly the state it spends most of its life in.
diff --git a/packages/sve-ui/src/tests/Carousel.test.ts b/packages/sve-ui/src/tests/Carousel.test.ts
new file mode 100644
index 0000000..b3e3676
--- /dev/null
+++ b/packages/sve-ui/src/tests/Carousel.test.ts
@@ -0,0 +1,85 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+import CarouselFixture from './CarouselFixture.svelte';
+
+describe('Carousel', () => {
+	/*
+		The root is a labelled region so the whole carousel is one thing a screen
+		reader user can find and skip. `aria-roledescription` is what makes it
+		announce as "carousel" rather than "region".
+	*/
+	it('is a labelled region described as a carousel', () => {
+		const { getByRole } = render(CarouselFixture, { label: 'Mountains' });
+		const region = getByRole('region', { name: 'Mountains' });
+		expect(region.getAttribute('aria-roledescription')).toBe('carousel');
+	});
+
+	it('takes its name from labelledby without also setting aria-label', () => {
+		const { getByRole } = render(CarouselFixture, { labelledby: 'peaks-heading' });
+		const region = getByRole('region', { name: 'Peaks' });
+		expect(region.hasAttribute('aria-label')).toBe(false);
+	});
+
+	/*
+		A slide with no name is announced as "group", which says nothing about where
+		the user is. The generated position label is the fallback that stops that.
+	*/
+	it('names each slide with its position', async () => {
+		const { container } = render(CarouselFixture, { count: 3 });
+		const slides = [...container.querySelectorAll('[data-sve-carousel-slide]')];
+		expect(slides).toHaveLength(3);
+		expect(slides.map((s) => s.getAttribute('aria-label'))).toEqual(['1 of 3', '2 of 3', '3 of 3']);
+		expect(slides.every((s) => s.getAttribute('aria-roledescription') === 'slide')).toBe(true);
+	});
+
+	it('lets a slide override the generated position name', () => {
+		const { container } = render(CarouselFixture, { count: 3, firstLabel: 'Kilimanjaro' });
+		const first = container.querySelector('[data-sve-carousel-slide]')!;
+		expect(first.getAttribute('aria-label')).toBe('Kilimanjaro');
+	});
+
+	/*
+		At rest the track is at its start, so Previous has nothing to go back to.
+		Disabled rather than hidden: a control that vanishes changes the tab order
+		and moves its neighbour under the user.
+	*/
+	it('disables Previous at the start and keeps it in the DOM', () => {
+		const { getByRole } = render(CarouselFixture);
+		const prev = getByRole('button', { name: 'Previous slide' }) as HTMLButtonElement;
+		expect(prev.disabled).toBe(true);
+	});
+
+	/*
+		The indicators are buttons in a named group, NOT a tablist: the slides are a
+		scrolling track, not panels that swap. `aria-current` rather than
+		`aria-selected`, which is invalid on a button and would be ignored — leaving
+		the active dot distinguished by colour alone.
+	*/
+	it('marks the active indicator with aria-current, not aria-selected', () => {
+		const { getByRole, container } = render(CarouselFixture, { count: 3 });
+		getByRole('group', { name: 'Choose slide' });
+
+		const dots = [...container.querySelectorAll('.sve-carousel__indicator')];
+		expect(dots).toHaveLength(3);
+		expect(dots[0].getAttribute('aria-current')).toBe('true');
+		expect(dots.some((d) => d.hasAttribute('aria-selected'))).toBe(false);
+		expect(dots[1].getAttribute('aria-label')).toBe('Go to slide 2');
+	});
+
+	/*
+		The viewport must NOT be a tab stop. A scrollable box is already
+		arrow-scrollable, and an unnamed stop in front of the slides' own focusable
+		content is pure friction.
+	*/
+	it('does not put a tab stop on the viewport', () => {
+		const { container } = render(CarouselFixture);
+		const viewport = container.querySelector('.sve-carousel__viewport')!;
+		expect(viewport.hasAttribute('tabindex')).toBe(false);
+	});
+
+	it('applies the orientation to viewport and slides', () => {
+		const { container } = render(CarouselFixture, { orientation: 'vertical' });
+		expect(container.querySelector('.sve-carousel__viewport--vertical')).not.toBeNull();
+		expect(container.querySelector('.sve-carousel__slide--vertical')).not.toBeNull();
+	});
+});
diff --git a/packages/sve-ui/src/tests/CarouselFixture.svelte b/packages/sve-ui/src/tests/CarouselFixture.svelte
new file mode 100644
index 0000000..812a9a9
--- /dev/null
+++ b/packages/sve-ui/src/tests/CarouselFixture.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import * as Carousel from '$lib/components/Carousel/index.js';
+
+	interface Props {
+		orientation?: 'horizontal' | 'vertical';
+		label?: string;
+		labelledby?: string;
+		count?: number;
+		/** Names the first slide, to exercise the label override. */
+		firstLabel?: string;
+	}
+
+	let { orientation, label = 'Mountains', labelledby, count = 3, firstLabel }: Props = $props();
+
+	const slides = $derived(Array.from({ length: count }, (_, i) => `slide-${i}`));
+	const indices = $derived(slides.map((_, i) => i));
+</script>
+
+{#if labelledby}
+	<h2 id={labelledby}>Peaks</h2>
+{/if}
+<Carousel.Root {orientation} label={labelledby ? undefined : label} {labelledby}>
+	<Carousel.Viewport>
+		{#each slides as s, i (s)}
+			<Carousel.Slide label={i === 0 ? firstLabel : undefined}>{s}</Carousel.Slide>
+		{/each}
+	</Carousel.Viewport>
+	<Carousel.Previous />
+	<Carousel.Next />
+	<Carousel.Indicators>
+		{#each indices as i (i)}
+			<Carousel.Indicator index={i} />
+		{/each}
+	</Carousel.Indicators>
+</Carousel.Root>
diff --git a/packages/sve-ui/src/tests/Resizable.test.ts b/packages/sve-ui/src/tests/Resizable.test.ts
new file mode 100644
index 0000000..c3b427b
--- /dev/null
+++ b/packages/sve-ui/src/tests/Resizable.test.ts
@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest';
+import { render, fireEvent } from '@testing-library/svelte';
+import ResizableFixture from './ResizableFixture.svelte';
+
+const handle = (c: HTMLElement) => c.querySelector('[role="separator"]') as HTMLElement;
+const panes = (c: HTMLElement) => [...c.querySelectorAll<HTMLElement>('.sve-resizable__pane')];
+const basis = (el: HTMLElement) => Number(el.style.flexBasis.replace('%', ''));
+
+describe('Resizable', () => {
+	it('splits evenly with no configuration', () => {
+		const { container } = render(ResizableFixture);
+		expect(panes(container).map(basis)).toEqual([50, 50]);
+	});
+
+	/*
+		A separator with a tabindex is a control. Without a name it announces
+		"splitter, 50" — a number, and nothing about what it sizes.
+	*/
+	it('is a named, focusable separator wired to the pane it sizes', () => {
+		const { container, getByRole } = render(ResizableFixture);
+		const h = getByRole('separator', { name: 'Resize sidebar' });
+		expect(h.getAttribute('tabindex')).toBe('0');
+		expect(h.getAttribute('aria-valuenow')).toBe('50');
+		expect(h.getAttribute('aria-valuemin')).toBe('0');
+		expect(h.getAttribute('aria-valuemax')).toBe('100');
+		// aria-controls must point at a real element, not a guessed id.
+		expect(container.querySelector(`#${h.getAttribute('aria-controls')}`)).not.toBeNull();
+	});
+
+	/*
+		`aria-orientation` describes the separator's own LINE, not the direction of
+		travel — so a handle in a horizontal group is vertical. Easy to get backwards,
+		and nothing visible breaks when you do.
+	*/
+	it('reports the separator line, not the direction of travel', () => {
+		const { container: h } = render(ResizableFixture, { direction: 'horizontal' });
+		expect(handle(h).getAttribute('aria-orientation')).toBe('vertical');
+
+		const { container: v } = render(ResizableFixture, { direction: 'vertical' });
+		expect(handle(v).getAttribute('aria-orientation')).toBe('horizontal');
+	});
+
+	/*
+		The keyboard contract IS the component. A divider that only answers to a drag
+		is unusable without a pointer, and it is the half every hand-rolled splitter
+		skips.
+	*/
+	it('moves the boundary with the arrow keys', async () => {
+		const { container } = render(ResizableFixture, { step: 5 });
+		const h = handle(container);
+
+		await fireEvent.keyDown(h, { key: 'ArrowRight' });
+		expect(panes(container).map(basis)).toEqual([55, 45]);
+
+		await fireEvent.keyDown(h, { key: 'ArrowLeft' });
+		expect(panes(container).map(basis)).toEqual([50, 50]);
+	});
+
+	it('uses Up and Down in a vertical group', async () => {
+		const { container } = render(ResizableFixture, { direction: 'vertical', step: 10 });
+		await fireEvent.keyDown(handle(container), { key: 'ArrowDown' });
+		expect(panes(container).map(basis)).toEqual([60, 40]);
+	});
+
+	it('keeps aria-valuenow in step with the size it reports', async () => {
+		const { container } = render(ResizableFixture, { step: 5 });
+		const h = handle(container);
+		await fireEvent.keyDown(h, { key: 'ArrowRight' });
+		expect(h.getAttribute('aria-valuenow')).toBe('55');
+	});
+
+	/*
+		Home and End pass a delta larger than any legal move on purpose, so the
+		clamp — not the caller — decides where the pane stops. That keeps the limits
+		in one place.
+	*/
+	it('collapses and expands to the declared limits with Home and End', async () => {
+		const { container } = render(ResizableFixture, { min: 20, max: 80 });
+		const h = handle(container);
+
+		await fireEvent.keyDown(h, { key: 'Home' });
+		expect(panes(container).map(basis)).toEqual([20, 80]);
+
+		await fireEvent.keyDown(h, { key: 'End' });
+		expect(panes(container).map(basis)).toEqual([80, 20]);
+	});
+
+	/*
+		The bug this guards: clamping only the pane being GROWN lets its neighbour
+		shrink past its own minimum. Both sides have to be checked before anything is
+		applied.
+	*/
+	it('clamps against the neighbour, not only the pane being grown', async () => {
+		// Growing pane A to its max of 95 would leave B at 5, under B's min of 30.
+		const { container } = render(ResizableFixture, { min: 30, max: 95 });
+		await fireEvent.keyDown(handle(container), { key: 'End' });
+
+		const [a, b] = panes(container).map(basis);
+		expect(b).toBeGreaterThanOrEqual(30);
+		expect(a + b).toBe(100);
+		expect(a).toBe(70);
+	});
+
+	/*
+		Three panes, two handles: dragging one boundary must not move the other. That
+		is the familiar bug where resizing a sidebar quietly reflows the far side of
+		the layout.
+	*/
+	it('moves one boundary without disturbing the far pane', async () => {
+		const { container } = render(ResizableFixture, { panes: 3, step: 6 });
+		const [first] = [...container.querySelectorAll<HTMLElement>('[role="separator"]')];
+
+		const before = panes(container).map(basis);
+		await fireEvent.keyDown(first, { key: 'ArrowRight' });
+		const after = panes(container).map(basis);
+
+		expect(after[0]).toBeCloseTo(before[0] + 6, 5);
+		expect(after[1]).toBeCloseTo(before[1] - 6, 5);
+		expect(after[2]).toBeCloseTo(before[2], 5);
+		expect(after.reduce((n, v) => n + v, 0)).toBeCloseTo(100, 5);
+	});
+
+	it('ignores keys it does not own', async () => {
+		const { container } = render(ResizableFixture);
+		await fireEvent.keyDown(handle(container), { key: 'PageDown' });
+		expect(panes(container).map(basis)).toEqual([50, 50]);
+	});
+});
diff --git a/packages/sve-ui/src/tests/ResizableFixture.svelte b/packages/sve-ui/src/tests/ResizableFixture.svelte
new file mode 100644
index 0000000..34367a9
--- /dev/null
+++ b/packages/sve-ui/src/tests/ResizableFixture.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import * as Resizable from '$lib/components/Resizable/index.js';
+
+	interface Props {
+		direction?: 'horizontal' | 'vertical';
+		min?: number;
+		max?: number;
+		step?: number;
+		panes?: number;
+		/** Renders the Handle with no label, to prove the prop is not decoration. */
+		omitLabel?: boolean;
+	}
+
+	let { direction, min = 10, max = 90, step, panes = 2, omitLabel = false }: Props = $props();
+</script>
+
+<Resizable.Group {direction}>
+	{#if panes === 2}
+		<Resizable.Pane {min} {max}>a</Resizable.Pane>
+		{#if omitLabel}
+			<Resizable.Handle index={0} {step} />
+		{:else}
+			<Resizable.Handle index={0} label="Resize sidebar" {step} />
+		{/if}
+		<Resizable.Pane {min} {max}>b</Resizable.Pane>
+	{:else}
+		<Resizable.Pane {min} {max}>a</Resizable.Pane>
+		<Resizable.Handle index={0} label="Resize a" {step} />
+		<Resizable.Pane {min} {max}>b</Resizable.Pane>
+		<Resizable.Handle index={1} label="Resize b" {step} />
+		<Resizable.Pane {min} {max}>c</Resizable.Pane>
+	{/if}
+</Resizable.Group>