@ui-organized/svelte 0.0.0-stage → 0.1.0

package/dist/components/Calendar/Calendar.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.test.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/Calendar.test.ts"],"names":[],"mappings":""}

package/dist/components/Calendar/Calendar.test.js

@@ -0,0 +1,184 @@
+import { describe, it, expect, afterEach, vi } from "vitest";
+import { render } from "@testing-library/svelte";
+import { tick } from "svelte";
+import Calendar from "./Calendar.svelte";
+/**
+ * Roving focus, which the parity gate is structurally unable to see.
+ *
+ * The browser gate compares a DOM *contract*, and `contractOf` counts an
+ * attribute as part of that contract only if it is `id`, `role`, `type`,
+ * `disabled`, `hidden`, `aria-*` or `data-*`. `tabindex` is none of those, and
+ * `document.activeElement` is not an attribute at all — so a calendar whose
+ * arrow keys moved nothing, or moved the tab stop without moving focus, would
+ * render byte-identical markup in all three libraries and the gate would report
+ * it green. That is not a gap to close in the gate: `tabindex` is genuinely not
+ * how this design system is styled, and widening the contract to catch one
+ * component would flood every other comparison with a value the frameworks are
+ * entitled to disagree about mid-render.
+ *
+ * So the keyboard grid is pinned here instead, in both hand-ported libraries.
+ * The trap it exists for is real and specific: React does this with an effect
+ * plus a `focusPending` flag, because its `setFocused` is shared with the click
+ * and focus handlers; the Svelte port drops both and awaits `tick()` inside
+ * `moveFocus`, which is the only keyboard path. If that await ever goes, the
+ * lookup runs against the previous DOM — and on a `PageUp`/`PageDown` that
+ * remounts every button it finds a node that has just been discarded, so focus
+ * silently lands nowhere and the calendar stops being keyboard-operable.
+ */
+describe("Calendar roving focus", () => {
+    /**
+     * March 2024, chosen because it starts on a Friday: the grid's first row is
+     * five February days, so the month is nowhere near a row boundary and the
+     * arithmetic below has nothing to hide behind.
+     *
+     *   row 1 | Feb 25 26 27 28 29 | Mar  1  2
+     *   row 2 | Mar  3  4  5  6  7  8  9
+     *   row 3 | Mar 10 11 12 13 14 15 16
+     *   row 4 | Mar 17 18 19 20 21 22 23
+     *   row 5 | Mar 24 25 26 27 28 29 30
+     *   row 6 | Mar 31 | Apr  1  2  3  4  5  6
+     */
+    const MARCH_15 = { year: 2024, month: 2, day: 15 };
+    /** Cell 0 is February 25, so March N is cell 4 + N. */
+    const LEAD = 4;
+    // No icon set is registered in a unit test, so the header's nav buttons say
+    // so — once per Icon, and irrelevantly to focus.
+    afterEach(() => vi.restoreAllMocks());
+    const open = (props = {}) => {
+        vi.spyOn(console, "warn").mockImplementation(() => { });
+        const { container } = render(Calendar, {
+            props: { mode: "single", value: MARCH_15, ...props },
+        });
+        const grid = () => container.querySelector(".calendar__grid");
+        // Re-queried on every call: a month change remounts every button, and a
+        // list captured before one is a list of detached nodes.
+        const days = () => [...container.querySelectorAll(".calendar__day")];
+        return {
+            container,
+            grid,
+            days,
+            /** The button for the given day of the *displayed* month. */
+            march: (day) => days()[LEAD + day],
+            monthName: () => container.querySelector(".calendar__month-name").textContent.trim(),
+            press: async (key) => {
+                grid().dispatchEvent(new KeyboardEvent("keydown", { key, bubbles: true }));
+                // Twice: `moveFocus` awaits one tick before looking the node up, and a
+                // month change re-renders on the tick after that.
+                await tick();
+                await tick();
+            },
+        };
+    };
+    it("starts with the selected day as the only tab stop, and does not steal focus", async () => {
+        const cal = open();
+        await tick();
+        // Exactly one 0 among 42 cells — a roving tabindex, not 42 tab stops and
+        // not none. The gate cannot assert either, since `tabindex` is not part of
+        // the compared contract.
+        expect(cal.days().filter((d) => d.tabIndex === 0)).toEqual([cal.march(15)]);
+        // And rendering must not move DOM focus. The popup decides that, from
+        // `onActiveDay` — a calendar that focused itself on mount would yank focus
+        // out of the field the moment a value changed under it.
+        expect(document.activeElement).not.toBe(cal.march(15));
+    });
+    it("moves a day at a time with the left and right arrows", async () => {
+        const cal = open();
+        await tick();
+        await cal.press("ArrowRight");
+        expect(document.activeElement).toBe(cal.march(16));
+        expect(cal.march(16).tabIndex).toBe(0);
+        // The tab stop is a stop, singular: the day it left has to give it up.
+        expect(cal.march(15).tabIndex).toBe(-1);
+        await cal.press("ArrowLeft");
+        await cal.press("ArrowLeft");
+        expect(document.activeElement).toBe(cal.march(14));
+    });
+    it("moves a week at a time with the up and down arrows", async () => {
+        const cal = open();
+        await tick();
+        await cal.press("ArrowDown");
+        expect(document.activeElement).toBe(cal.march(22));
+        await cal.press("ArrowUp");
+        await cal.press("ArrowUp");
+        // Seven back from the 22nd, which is a different row and the same column.
+        expect(document.activeElement).toBe(cal.march(8));
+    });
+    it("moves to the ends of the week with Home and End", async () => {
+        const cal = open();
+        await tick();
+        // The 15th is a Friday, so its week runs Sunday the 10th to Saturday the
+        // 16th. Home and End are relative to `weekStartsOn`, not to the month.
+        await cal.press("Home");
+        expect(document.activeElement).toBe(cal.march(10));
+        await cal.press("End");
+        expect(document.activeElement).toBe(cal.march(16));
+    });
+    it("pages the view a month at a time with PageUp and PageDown", async () => {
+        const cal = open();
+        await tick();
+        await cal.press("PageUp");
+        expect(cal.monthName()).toBe("February");
+        /**
+         * The 1st, not the 15th — and deliberately pinned as such.
+         *
+         * Both handlers go through `addMonths`, whose contract is "add whole
+         * months, landing on the first of the resulting month": it is the view
+         * pager, and it discards the day. A date grid conventionally keeps the day
+         * of the month across a page, so this is a real deviation — but it is one
+         * shared verbatim by React, Svelte and Vue, since all three call the same
+         * `@ui-organized/core` helper. The parity gate is right to stay silent
+         * about it, and it is not a port's to fix. Asserted rather than glossed so
+         * that whoever changes `addMonths` finds out here.
+         */
+        expect(document.activeElement.textContent.trim()).toBe("1");
+        expect(document.activeElement).toBe(cal.days()[4]);
+        await cal.press("PageDown");
+        await cal.press("PageDown");
+        expect(cal.monthName()).toBe("April");
+        // The whole point of the await inside `moveFocus`: paging remounts every
+        // button, so a focus call made before the DOM caught up would land on a
+        // node that is no longer in the document.
+        expect(document.body.contains(document.activeElement)).toBe(true);
+        expect(document.activeElement).toBe(cal.days()[1]);
+        expect(document.activeElement.textContent.trim()).toBe("1");
+    });
+    it("selects the focused day with Enter and Space, and swallows the key", async () => {
+        const onSelect = vi.fn();
+        const cal = open({ onSelect });
+        await tick();
+        await cal.press("ArrowRight");
+        /**
+         * Dispatched by hand rather than through `press`, so that `defaultPrevented`
+         * can be read back off the event. Space on a focused button would otherwise
+         * scroll the page out from under the calendar, and the handler's
+         * `preventDefault()` is the only thing stopping it — a detail a port drops
+         * by returning early from the switch.
+         */
+        const press = (key) => {
+            const event = new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true });
+            cal.grid().dispatchEvent(event);
+            return event.defaultPrevented;
+        };
+        expect(press("Enter")).toBe(true);
+        expect(onSelect).toHaveBeenCalledWith({ year: 2024, month: 2, day: 16 });
+        expect(press(" ")).toBe(true);
+        expect(onSelect).toHaveBeenCalledTimes(2);
+        // An unhandled key falls through untouched — the grid is not a keyboard trap.
+        expect(press("a")).toBe(false);
+    });
+    it("clamps movement to the min/max window instead of leaving it", async () => {
+        const cal = open({
+            min: { year: 2024, month: 2, day: 14 },
+            max: { year: 2024, month: 2, day: 16 },
+        });
+        await tick();
+        // A week up from the 15th is the 8th, which is outside the window — and a
+        // day outside it is `disabled`, so focus would be lost rather than merely
+        // misplaced. `clampYMD` is what stops that.
+        await cal.press("ArrowUp");
+        expect(document.activeElement).toBe(cal.march(14));
+        await cal.press("ArrowDown");
+        await cal.press("ArrowDown");
+        expect(document.activeElement).toBe(cal.march(16));
+    });
+});

package/dist/components/Calendar/Calendar.types.d.ts

@@ -0,0 +1,45 @@
+import type { YMD } from "@ui-organized/core";
+/** The two ends of a range selection; either may be `null` while it is drawn. */
+export interface CalendarRange {
+    start: YMD | null;
+    end: YMD | null;
+}
+/**
+ * Props for the internal Calendar.
+ *
+ * Written out in full rather than extending a private base: `svelte-package`
+ * emits no `.d.ts` for a component whose props reference an interface it cannot
+ * see, and the failure is silent — the component ships without types.
+ */
+export interface CalendarProps {
+    /** "single" selects one day; "range" selects a start→end pair. */
+    mode: "single" | "range";
+    /** Selected day in single mode. */
+    value?: YMD | null;
+    /** Selected range in range mode. */
+    rangeValue?: CalendarRange;
+    /** Earliest selectable day (inclusive). */
+    min?: YMD | null;
+    /** Latest selectable day (inclusive). */
+    max?: YMD | null;
+    /** Number of months shown side by side. Defaults to 1. */
+    numMonths?: number;
+    /** First day of the week: 0 = Sunday (default), 1 = Monday. */
+    weekStartsOn?: number;
+    /** Called with the chosen day in single mode. */
+    onSelect?: (day: YMD) => void;
+    /** Called with the updated range in range mode. */
+    onRangeChange?: (range: CalendarRange) => void;
+    /** Called once both ends of a range have been chosen (caller may close). */
+    onRangeComplete?: () => void;
+    /**
+     * Reports the active (roving-focus) day button, for popup autofocus.
+     *
+     * React passes a ref object and the calendar writes `.current`. Svelte has no
+     * equivalent object to hand down, so the same information travels as a
+     * callback — which is also what keeps the caller free to store it in `$state`
+     * and read it from `initialFocusEl`.
+     */
+    onActiveDay?: (el: HTMLButtonElement | null) => void;
+}
+//# sourceMappingURL=Calendar.types.d.ts.map

package/dist/components/Calendar/Calendar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/Calendar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAE9C,iFAAiF;AACjF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,GAAG,EAAE,GAAG,GAAG,IAAI,CAAC;CACjB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,aAAa;IAC5B,kEAAkE;IAClE,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,mCAAmC;IACnC,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACnB,oCAAoC;IACpC,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B,2CAA2C;IAC3C,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACjB,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IACjB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;IAC9B,mDAAmD;IACnD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,iBAAiB,GAAG,IAAI,KAAK,IAAI,CAAC;CACtD"}

package/dist/components/Calendar/Calendar.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Calendar } from "./Calendar.svelte";
+export type { CalendarProps, CalendarRange } from "./Calendar.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/Calendar/index.js

@@ -0,0 +1,3 @@
+// Internal. Deliberately absent from the package barrel: Calendar has no public
+// DOM contract of its own — it reaches a user only through the date fields.
+export { default as Calendar } from "./Calendar.svelte";

package/dist/components/Card/Card.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { cardStyles } from "@ui-organized/core";
+  import type { CardProps } from "./Card.types.js";
+  import "@ui-organized/core/components/Card/Card.css";
+
+  let { variant, padding, class: className, children, ...rest }: CardProps = $props();
+</script>
+
+<div class={clsx(cardStyles({ variant, padding }), className)} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/Card/Card.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { CardProps } from "./Card.types.js";
+import "@ui-organized/core/components/Card/Card.css";
+declare const Card: import("svelte").Component<CardProps, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;
+//# sourceMappingURL=Card.svelte.d.ts.map

package/dist/components/Card/Card.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Card/Card.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACjD,OAAO,6CAA6C,CAAC;AAiBrD,QAAA,MAAM,IAAI,+CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/Card/Card.types.d.ts

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+interface CardPartProps extends Omit<HTMLAttributes<HTMLDivElement>, "class"> {
+    class?: string;
+    children?: Snippet;
+}
+export interface CardProps extends CardPartProps {
+    /** Visual style variant. Defaults to 'default'. */
+    variant?: "default" | "elevated";
+    /** Padding size. Defaults to 'md'. */
+    padding?: "none" | "sm" | "md" | "lg";
+}
+export type CardHeaderProps = CardPartProps;
+export type CardBodyProps = CardPartProps;
+export type CardFooterProps = CardPartProps;
+export {};
+//# sourceMappingURL=Card.types.d.ts.map

package/dist/components/Card/Card.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Card/Card.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,UAAU,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC3E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,mDAAmD;IACnD,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,sCAAsC;IACtC,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACvC;AAED,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC;AAC5C,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;AAC1C,MAAM,MAAM,eAAe,GAAG,aAAa,CAAC"}

package/dist/components/Card/Card.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Card/CardBody.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { clsx } from "clsx";
+  import type { CardBodyProps } from "./Card.types.js";
+
+  let { class: className, children, ...rest }: CardBodyProps = $props();
+</script>
+
+<div class={clsx("card__body", className)} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/Card/CardFooter.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { clsx } from "clsx";
+  import type { CardFooterProps } from "./Card.types.js";
+
+  let { class: className, children, ...rest }: CardFooterProps = $props();
+</script>
+
+<div class={clsx("card__footer", className)} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/Card/CardHeader.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { clsx } from "clsx";
+  import type { CardHeaderProps } from "./Card.types.js";
+
+  let { class: className, children, ...rest }: CardHeaderProps = $props();
+</script>
+
+<div class={clsx("card__header", className)} {...rest}>
+  {@render children?.()}
+</div>

package/dist/components/Card/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.svelte";
+export { default as CardHeader } from "./CardHeader.svelte";
+export { default as CardBody } from "./CardBody.svelte";
+export { default as CardFooter } from "./CardFooter.svelte";
+export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, } from "./Card.types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EACV,SAAS,EAAE,eAAe,EAAE,aAAa,EAAE,eAAe,GAC3D,MAAM,iBAAiB,CAAC"}

package/dist/components/Card/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from "./Card.svelte";
+export { default as CardHeader } from "./CardHeader.svelte";
+export { default as CardBody } from "./CardBody.svelte";
+export { default as CardFooter } from "./CardFooter.svelte";

package/dist/components/Carousel/Carousel.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { Carousel as ArkCarousel } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { carouselStyles } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import type { CarouselProps } from "./Carousel.types.js";
+  import "@ui-organized/core/components/Carousel/Carousel.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  /**
+   * Default gap between slides.
+   *
+   * zag resolves `spacing` into `--slide-spacing` at runtime and never sees the
+   * token, but the *authored* default is still a token — so the gap is themed
+   * even though the value zag computes from it is not.
+   */
+  const DEFAULT_SPACING = "var(--spacing-space-04)";
+
+  let {
+    slides,
+    label,
+    page = $bindable(),
+    defaultPage,
+    onPageChange,
+    slidesPerPage,
+    spacing = DEFAULT_SPACING,
+    loop,
+    autoplay,
+    orientation = "horizontal",
+    size = "md",
+    variant = "default",
+    showIndicators = true,
+    class: className,
+  }: CarouselProps = $props();
+
+  /* Reduced motion is not decided here. The autoplay timer is the machine's,
+     and the only motion this package authors for Carousel is the indicator
+     transition — which Carousel.css already drops under
+     `prefers-reduced-motion: reduce`. Adding a policy in the component would
+     put two different answers in the system. */
+</script>
+
+<!--
+  `slideCount` is derived, never a prop: a count out of step with `slides`
+  desyncs the snap points silently.
+-->
+<ArkCarousel.Root
+  class={clsx(carouselStyles({ size, variant }), className)}
+  slideCount={slides.length}
+  bind:page
+  {defaultPage}
+  onPageChange={onPageChange && ((details) => onPageChange(details.page))}
+  {slidesPerPage}
+  {spacing}
+  {loop}
+  {autoplay}
+  {orientation}
+  aria-label={label}
+>
+  <ArkCarousel.ItemGroup class="carousel__items">
+    {#each slides as slide, index (slide.id)}
+      <ArkCarousel.Item {index} class="carousel__item">
+        {#if typeof slide.content === "string"}{slide.content}{:else}{@render slide.content?.()}{/if}
+      </ArkCarousel.Item>
+    {/each}
+  </ArkCarousel.ItemGroup>
+
+  <ArkCarousel.Control class="carousel__control">
+    {#if variant !== "minimal"}
+      <!--
+        The two arrows *are* the library Button, projected through Ark's
+        asChild so they inherit every interactive token instead of restating
+        them. `class` is pulled out and handed over separately because Ark
+        types the projected props in Svelte's own shapes, where it is a
+        `ClassValue` that may be null while the Button takes a string.
+      -->
+      <ArkCarousel.PrevTrigger>
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = props()}
+          <Button
+            intent="ghost"
+            {size}
+            icon={glyph("chevron-left")}
+            aria-label="Previous slide"
+            class={clsx(arkClass)}
+            {...triggerProps}
+          />
+        {/snippet}
+      </ArkCarousel.PrevTrigger>
+    {/if}
+
+    {#if showIndicators}
+      <ArkCarousel.IndicatorGroup class="carousel__indicators">
+        {#each slides as slide, index (slide.id)}
+          <ArkCarousel.Indicator
+            {index}
+            class="carousel__indicator"
+            aria-label={`Go to slide ${index + 1}`}
+          />
+        {/each}
+      </ArkCarousel.IndicatorGroup>
+    {/if}
+
+    {#if variant !== "minimal"}
+      <ArkCarousel.NextTrigger>
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = props()}
+          <Button
+            intent="ghost"
+            {size}
+            icon={glyph("chevron-right")}
+            aria-label="Next slide"
+            class={clsx(arkClass)}
+            {...triggerProps}
+          />
+        {/snippet}
+      </ArkCarousel.NextTrigger>
+    {/if}
+  </ArkCarousel.Control>
+</ArkCarousel.Root>

package/dist/components/Carousel/Carousel.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { CarouselProps } from "./Carousel.types.js";
+import "@ui-organized/core/components/Carousel/Carousel.css";
+declare const Carousel: import("svelte").Component<CarouselProps, {}, "page">;
+type Carousel = ReturnType<typeof Carousel>;
+export default Carousel;
+//# sourceMappingURL=Carousel.svelte.d.ts.map

package/dist/components/Carousel/Carousel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Carousel/Carousel.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,qDAAqD,CAAC;AAuF7D,QAAA,MAAM,QAAQ,uDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/Carousel/Carousel.types.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from "svelte";
+import type { ControlSize } from "@ui-organized/core";
+export interface CarouselSlide {
+    /** Unique id across the carousel. */
+    id: string;
+    /**
+     * Slide contents. A string, or a snippet for anything richer.
+     *
+     * React takes a ReactNode here, which can be either. Svelte has no single
+     * type that covers both, so the union is explicit and the component renders
+     * whichever it was given.
+     */
+    content?: string | Snippet;
+}
+export interface CarouselProps {
+    /** The slides, in order. */
+    slides: CarouselSlide[];
+    /** Accessible label for the carousel region. */
+    label?: string;
+    /** Index of the visible page. Bindable: `bind:page`. */
+    page?: number;
+    /** Initial page index for the uncontrolled case. Defaults to 0. */
+    defaultPage?: number;
+    /** Called with the new index whenever the visible page changes. */
+    onPageChange?: (page: number) => void;
+    /** How many slides are visible at once. Defaults to 1. */
+    slidesPerPage?: number;
+    /** Gap between slides. Defaults to the space-04 token. */
+    spacing?: string;
+    /**
+     * Wraps from the last slide back to the first.
+     *
+     * Deliberately has no default: the machine derives one from `autoplay`, and
+     * writing `loop = false` here would replace that derivation with a decision
+     * the caller never made.
+     */
+    loop?: boolean;
+    /** Advances on a timer. Pass a number for a custom interval in milliseconds. */
+    autoplay?: boolean | {
+        delay: number;
+    };
+    /** Scroll direction. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    /** Size variant, driving control and indicator scale. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Visual treatment. `minimal` hides the previous/next buttons. Defaults to 'default'. */
+    variant?: "default" | "minimal";
+    /** Shows the dot indicators below the slides. Defaults to true. */
+    showIndicators?: boolean;
+    class?: string;
+}
+//# sourceMappingURL=Carousel.types.d.ts.map

package/dist/components/Carousel/Carousel.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Carousel/Carousel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEtD,MAAM,WAAW,aAAa;IAC5B,qCAAqC;IACrC,EAAE,EAAE,MAAM,CAAC;IACX;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,aAAa;IAC5B,4BAA4B;IAC5B,MAAM,EAAE,aAAa,EAAE,CAAC;IACxB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wDAAwD;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,GAAG;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,kDAAkD;IAClD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,2EAA2E;IAC3E,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,mEAAmE;IACnE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Carousel/Carousel.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Carousel/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Carousel } from "./Carousel.svelte";
+export type { CarouselProps, CarouselSlide } from "./Carousel.types.js";
+export type { CarouselVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACxE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Carousel/index.js

@@ -0,0 +1 @@
+export { default as Carousel } from "./Carousel.svelte";

package/dist/components/Checkbox/Checkbox.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { Checkbox as ArkCheckbox } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { OMIT_ARIA } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { CheckboxProps } from "./Checkbox.types.js";
+  import "@ui-organized/core/components/Checkbox/Checkbox.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  let {
+    checked = $bindable(),
+    defaultChecked,
+    indeterminate,
+    onCheckedChange,
+    label,
+    disabled,
+    required,
+    name,
+    id,
+    class: className,
+    "aria-label": ariaLabel,
+  }: CheckboxProps = $props();
+
+  // Ark folds indeterminate into the checked value rather than taking it as a
+  // separate prop, so the facade's boolean is translated at the boundary — and
+  // back again in the callback, where only a true `true` counts as checked.
+  const arkChecked = $derived(indeterminate ? "indeterminate" : checked);
+</script>
+
+<!-- Ark's Checkbox.Root *is* the <label>. -->
+<ArkCheckbox.Root
+  class={clsx("checkbox", disabled && "checkbox--disabled", className)}
+  checked={arkChecked}
+  {defaultChecked}
+  onCheckedChange={(details) => {
+    checked = details.checked === true;
+    onCheckedChange?.(details.checked === true);
+  }}
+  {disabled}
+  {required}
+  {name}
+  {id}
+>
+  <ArkCheckbox.Control class="checkbox__control">
+    <ArkCheckbox.Indicator class="checkbox__indicator" {indeterminate}>
+      {#if indeterminate}
+        <span class="checkbox__indicator--indeterminate"></span>
+      {:else}
+        <Icon name={glyph("check")} size={16} class="checkbox__check" />
+      {/if}
+    </ArkCheckbox.Indicator>
+  </ArkCheckbox.Control>
+  {#if label}
+    <ArkCheckbox.Label class="checkbox__label text-default-body-large">{label}</ArkCheckbox.Label>
+  {/if}
+  <!--
+    Ark points the input at the Label part unconditionally. With no `label` there
+    is no such element, so the reference dangles — and a dangling
+    `aria-labelledby` outranks `aria-label`, leaving the box nameless.
+  -->
+  <ArkCheckbox.HiddenInput
+    aria-labelledby={label ? undefined : OMIT_ARIA}
+    aria-label={label ? undefined : ariaLabel}
+  />
+</ArkCheckbox.Root>

package/dist/components/Checkbox/Checkbox.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { CheckboxProps } from "./Checkbox.types.js";
+import "@ui-organized/core/components/Checkbox/Checkbox.css";
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.svelte.d.ts.map

package/dist/components/Checkbox/Checkbox.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,qDAAqD,CAAC;AAuD7D,QAAA,MAAM,QAAQ,0DAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}