@ui-organized/svelte 0.0.0-stage → 6.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropper.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ImageCropper/ImageCropper.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,6DAA6D,CAAC;AA0DrE,QAAA,MAAM,YAAY,2DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/ImageCropper/ImageCropper.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ImageCropper.test.d.ts.map

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

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

package/dist/components/ImageCropper/ImageCropper.test.js

@@ -0,0 +1,68 @@
+import { describe, it, expect, beforeAll } from "vitest";
+import { render } from "@testing-library/svelte";
+import ImageCropper from "./ImageCropper.svelte";
+/**
+ * jsdom ships no `ResizeObserver`, and the machine watches the viewport with one
+ * the moment it mounts — without this every case below dies in an effect rather
+ * than on its assertion. The stub observes nothing on purpose: a jsdom element
+ * has no box to report, which is exactly why the crop rect is untestable here.
+ */
+beforeAll(() => {
+    if ("ResizeObserver" in globalThis)
+        return;
+    globalThis.ResizeObserver = class {
+        observe() { }
+        unobserve() { }
+        disconnect() { }
+    };
+});
+/**
+ * The half of ImageCropper the parity gate cannot see.
+ *
+ * Every geometry the machine computes — the crop rect, the image transform, each
+ * handle's placement — is written as an inline style, and `style` is not part of
+ * the contract. So the gate proves the parts and their state attributes match
+ * across the four libraries and says nothing about whether `zoom` reached the
+ * machine at all.
+ *
+ * What is *not* covered anywhere yet: the crop rect. It is measured from the
+ * loaded image and the viewport's box, both of which are zero in jsdom, so
+ * `initialCrop`, `aspectRatio` and the zoom bounds have no observable effect
+ * until a real layout exists. Moving and resizing the box is pointer work.
+ * Both belong to the Playwright harness, which does not cover this component
+ * yet.
+ */
+describe("ImageCropper", () => {
+    const styleOf = (container) => container.querySelector('[data-part="root"]').getAttribute("style") ?? "";
+    it("passes the zoom through to the machine", () => {
+        const { container } = render(ImageCropper, { props: { src: "/a.png", zoom: 2 } });
+        // Whitespace-tolerant: the SSR renderer writes `--image-zoom:2` and the
+        // client one re-serialises it as `--image-zoom: 2`.
+        expect(styleOf(container)).toMatch(/--image-zoom:\s*2\b/);
+    });
+    it("passes the uncontrolled zoom through to the machine", () => {
+        const { container } = render(ImageCropper, { props: { src: "/a.png", defaultZoom: 3 } });
+        expect(styleOf(container)).toMatch(/--image-zoom:\s*3\b/);
+    });
+    it("puts the crop shape on the root and the selection", () => {
+        const { container } = render(ImageCropper, { props: { src: "/a.png", cropShape: "circle" } });
+        expect(container.querySelector('[data-part="root"]').getAttribute("data-shape")).toBe("circle");
+        expect(container.querySelector('[data-part="selection"]').getAttribute("data-shape")).toBe("circle");
+    });
+    it("disables the selection, the viewport and every handle when the crop is fixed", () => {
+        const { container } = render(ImageCropper, { props: { src: "/a.png", fixedCropArea: true } });
+        expect(container.querySelector('[data-part="root"]').hasAttribute("data-fixed")).toBe(true);
+        expect(container.querySelector('[data-part="viewport"]').hasAttribute("data-disabled")).toBe(true);
+        const handles = [...container.querySelectorAll('[data-part="handle"]')];
+        expect(handles).toHaveLength(8);
+        expect(handles.every((h) => h.hasAttribute("data-disabled"))).toBe(true);
+    });
+    it("renders the image the caller asked for", () => {
+        const { container } = render(ImageCropper, {
+            props: { src: "/photo.png", alt: "A photograph" },
+        });
+        const image = container.querySelector('[data-part="image"]');
+        expect(image.getAttribute("src")).toBe("/photo.png");
+        expect(image.getAttribute("alt")).toBe("A photograph");
+    });
+});

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

@@ -0,0 +1,51 @@
+/**
+ * Written out in full rather than extending a shared base.
+ *
+ * `svelte-package` emits no `.d.ts` for a component whose props interface
+ * reaches a type it cannot re-export, so a private base interface silently costs
+ * this component its types. Every prop is spelled here for that reason — and
+ * `CropRect` is exported for the same one: `onCropChange`'s argument has to be
+ * nameable from outside.
+ */
+export interface CropRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface ImageCropperProps {
+    /** Image to crop. A data URI or a URL. */
+    src: string;
+    /** Alternative text for the image. */
+    alt?: string;
+    /** Accessible label rendered above the viewport. */
+    label?: string;
+    /** Helper text rendered below the viewport. */
+    helperText?: string;
+    /** Crop box the editor opens with. Defaults to the largest centred box. */
+    initialCrop?: CropRect;
+    /** Locks the crop box to a ratio, e.g. `1` for square or `16 / 9`. */
+    aspectRatio?: number;
+    /** Shape of the crop box. `circle` still reports a square rect. Defaults to 'rectangle'. */
+    cropShape?: "rectangle" | "circle";
+    /** Called continuously as the crop box moves or resizes. */
+    onCropChange?: (crop: CropRect) => void;
+    /** Controlled zoom level. Bindable: `bind:zoom`. */
+    zoom?: number;
+    /** Initial zoom for the uncontrolled case. Defaults to 1. */
+    defaultZoom?: number;
+    /** Called when the zoom changes. */
+    onZoomChange?: (zoom: number) => void;
+    /** Smallest zoom level. Defaults to 1. */
+    minZoom?: number;
+    /** Largest zoom level. Defaults to 3. */
+    maxZoom?: number;
+    /** Draws rule-of-thirds guides inside the crop box. Defaults to true. */
+    showGrid?: boolean;
+    /** Prevents the crop box being moved or resized. Defaults to false. */
+    fixedCropArea?: boolean;
+    /** Size variant, driving the viewport's height. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    class?: string;
+}
+//# sourceMappingURL=ImageCropper.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageCropper.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ImageCropper/ImageCropper.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,WAAW,QAAQ;IACvB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,WAAW,CAAC,EAAE,QAAQ,CAAC;IACvB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,4FAA4F;IAC5F,SAAS,CAAC,EAAE,WAAW,GAAG,QAAQ,CAAC;IACnC,4DAA4D;IAC5D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uEAAuE;IACvE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,qEAAqE;IACrE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/ImageCropper/ImageCropper.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as ImageCropper } from "./ImageCropper.svelte";
+export type { ImageCropperProps, CropRect } from "./ImageCropper.types.js";
+export type { ImageCropperVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/ImageCropper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,YAAY,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/ImageCropper/index.js

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

package/dist/components/Input/Input.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { Field } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { inputFieldStyles } from "@ui-organized/core";
+  import FieldError from "../FieldError/FieldError.svelte";
+  import type { InputProps } from "./Input.types.js";
+  import "@ui-organized/core/components/Input/Input.css";
+  import { onMount } from "svelte";
+  import { trackFocusModality } from "@ui-organized/core/focus-modality";
+
+  // Text fields read pointer vs keyboard for a quiet focus state on click.
+  onMount(() => trackFocusModality());
+
+  let {
+    label,
+    helperText,
+    error,
+    size,
+    required,
+    id,
+    class: className,
+    value = $bindable(),
+    ...inputProps
+  }: InputProps = $props();
+
+  const isInvalid = $derived(!!error);
+  const errorMessage = $derived(typeof error === "string" ? error : undefined);
+</script>
+
+<Field.Root class={clsx(inputFieldStyles({ size }), className)} invalid={isInvalid} {id}>
+  {#if label}
+    <Field.Label class="field__label">
+      {label}
+      {#if required}<span class="field__required" aria-hidden="true"></span>{/if}
+    </Field.Label>
+  {/if}
+  <Field.Input class="field__control" {required} bind:value {...inputProps} />
+  {#if helperText && !isInvalid}
+    <Field.HelperText class="field__description">{helperText}</Field.HelperText>
+  {/if}
+  {#if isInvalid && errorMessage}
+    <!--
+      Ark's ErrorText renders only while the Field is invalid, and `asChild`
+      hands its props to whatever we render in its place — here the shared
+      FieldError, so the message keeps its icon and its aria-describedby wiring.
+    -->
+    <Field.ErrorText>
+      {#snippet asChild(props)}
+        <FieldError {...props()} message={errorMessage} />
+      {/snippet}
+    </Field.ErrorText>
+  {/if}
+</Field.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Input.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,+CAA+C,CAAC;AAwDvD,QAAA,MAAM,KAAK,qDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

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

@@ -0,0 +1,20 @@
+import type { HTMLInputAttributes } from "svelte/elements";
+import type { ControlSize } from "@ui-organized/core";
+import type { ArkForwardable } from "../../types.js";
+export interface InputProps extends ArkForwardable<Omit<HTMLInputAttributes, "size" | "class">> {
+    /** Accessible label text rendered above the control. */
+    label?: string;
+    /** Helper text rendered below the control. Hidden when an error is shown. */
+    helperText?: string;
+    /**
+     * Error state. Pass a string to show an error message.
+     * Pass `true` to mark the field invalid without a message.
+     */
+    error?: string | boolean;
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    class?: string;
+    /** The control's value. Bindable: `bind:value`. */
+    value?: string | number | null;
+}
+//# sourceMappingURL=Input.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,MAAM,WAAW,UACf,SAAQ,cAAc,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC;IACnE,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC"}

package/dist/components/Input/Input.types.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/Input/index.js

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

package/dist/components/Listbox/Listbox.svelte

@@ -0,0 +1,159 @@
+<!--
+  A standing list of options — the always-visible sibling of Select. Nothing is
+  portalled here, so the whole component is one subtree.
+-->
+<script lang="ts">
+  import { Listbox as ArkListbox, createListCollection } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { CONTROL_ICON_SIZE, listboxStyles, type ControlSize } from "@ui-organized/core";
+  import Icon from "../Icon/Icon.svelte";
+  import type { ListboxProps, ListboxOption } from "./Listbox.types.js";
+  import "@ui-organized/core/components/Listbox/Listbox.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  /**
+   * zag's listbox focuses its content on every item `mousedown`, and calls
+   * `focus()` without `preventScroll`. Inside any scroll container where the
+   * list's top is out of view — a bottom sheet scrolled down to the option the
+   * user wants — that focus scrolls the list's top into view between press and
+   * release, so the release lands on a different option and the tap selects
+   * the wrong thing or nothing.
+   *
+   * So the content is focused first, in the capture phase, without scrolling.
+   * By the time zag's own handler runs the element already has focus, and
+   * focusing the focused element is a no-op — including its scroll. The
+   * pressed option is already on screen, which is how it got pressed.
+   */
+  function focusWithoutScrolling(event: MouseEvent & { currentTarget: EventTarget & HTMLElement }) {
+    if (document.activeElement !== event.currentTarget) {
+      event.currentTarget.focus({ preventScroll: true });
+    }
+  }
+
+  let {
+    options,
+    label,
+    value = $bindable(),
+    defaultValue,
+    onValueChange,
+    selectionMode,
+    size = "md",
+    variant,
+    emptyMessage = "No options",
+    disabled,
+    class: className,
+  }: ListboxProps = $props();
+
+  const iconSize = $derived(CONTROL_ICON_SIZE[size as ControlSize]);
+
+  // Ark drives the list off a collection rather than children, the same way
+  // Select does — `options` is the single source for both.
+  const collection = $derived(
+    createListCollection({
+      items: options,
+      itemToValue: (item) => item.value,
+      itemToString: (item) => item.label,
+      isItemDisabled: (item) => !!item.disabled,
+    }),
+  );
+
+  /**
+   * Options in declaration order, bucketed by `group`. Ungrouped options keep a
+   * `null` bucket so a partially grouped list still renders every option once,
+   * in the order it was given.
+   */
+  const groups = $derived.by<[string | null, ListboxOption[]][]>(() => {
+    const buckets = new Map<string | null, ListboxOption[]>();
+    for (const option of options) {
+      const key = option.group ?? null;
+      const bucket = buckets.get(key);
+      if (bucket) bucket.push(option);
+      else buckets.set(key, [option]);
+    }
+    return [...buckets];
+  });
+</script>
+
+<!--
+  One bucket of options, rendered without a wrapper of its own. A snippet rather
+  than the markup twice over, because the grouped and ungrouped branches render
+  identical items and writing it twice is how the two drift.
+-->
+{#snippet bucket(items: ListboxOption[])}
+  {#each items as item (item.value)}
+    <ArkListbox.Item {item} class="listbox__item">
+      <!--
+        ── Why the element is pinned ─────────────────────────────────────────
+
+        `@ark-ui/svelte` is on 5.24 while React is on 5.37, and Ark changed this
+        part's default element in between: a `<span>` here, a `<div>` there. One
+        stylesheet styles all three libraries, so the tag it is written against
+        cannot be whichever Ark version a package happens to install.
+
+        The difference is invisible *today* — `.listbox__item` is a flex row, and
+        a flex item is blockified whatever its display was, so the span's
+        `overflow: hidden` and its ellipsis still work. That is the trap rather
+        than the reassurance: the day the row stops being a flex container the
+        truncation silently stops working in one library only.
+      -->
+      <ArkListbox.ItemText>
+        {#snippet asChild(project)}
+          <div {...project()} class="listbox__item-text">{item.label}</div>
+        {/snippet}
+      </ArkListbox.ItemText>
+      <ArkListbox.ItemIndicator class="listbox__item-indicator">
+        <Icon name={glyph("check")} size={iconSize} />
+      </ArkListbox.ItemIndicator>
+    </ArkListbox.Item>
+  {/each}
+{/snippet}
+
+<ArkListbox.Root
+  class={clsx(listboxStyles({ size, variant }), className)}
+  {collection}
+  {value}
+  {defaultValue}
+  onValueChange={(details) => {
+    value = details.value;
+    onValueChange?.(details.value);
+  }}
+  {selectionMode}
+  {disabled}
+>
+  {#if label}
+    <ArkListbox.Label class="listbox__label">{label}</ArkListbox.Label>
+  {/if}
+  <ArkListbox.Content class="listbox__content" onmousedowncapture={focusWithoutScrolling}>
+    {#each groups as [group, groupItems] (group ?? "")}
+      {#if group != null}
+        <ArkListbox.ItemGroup class="listbox__group">
+          <ArkListbox.ItemGroupLabel class="listbox__group-label">
+            {group}
+          </ArkListbox.ItemGroupLabel>
+          {@render bucket(groupItems)}
+        </ArkListbox.ItemGroup>
+      {:else}
+        <!--
+          An ungrouped bucket must not be wrapped in an ItemGroup — that would
+          announce a group with no name to a screen reader.
+        -->
+        {@render bucket(groupItems)}
+      {/if}
+    {/each}
+    <!-- A `listbox` must own `option` or `group` children, and with no items it
+         had neither — axe rates that critical, because a screen reader entering
+         the list is told it is a listbox and then finds nothing in it. A
+         disabled option is the conventional answer: the list is never childless,
+         and what the user hears ("No results, dimmed") is true.
+
+         Written out rather than using `ArkListbox.Empty`, which hard-codes
+         `role="presentation"` and ignores a `role` prop — the element it
+         produces is exactly the child the rule rejects. Same reasoning, and same
+         markup, as the React library. -->
+    {#if options.length === 0}
+      <div role="option" aria-disabled="true" aria-selected="false" class="listbox__empty">
+        {emptyMessage}
+      </div>
+    {/if}
+  </ArkListbox.Content>
+</ArkListbox.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Listbox/Listbox.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAiB,MAAM,oBAAoB,CAAC;AACtE,OAAO,mDAAmD,CAAC;AA6H3D,QAAA,MAAM,OAAO,uDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Listbox/Listbox.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Listbox.test.d.ts.map

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

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

package/dist/components/Listbox/Listbox.test.js

@@ -0,0 +1,28 @@
+import { describe, it, expect, vi } from "vitest";
+import { render } from "@testing-library/svelte";
+import Listbox from "./Listbox.svelte";
+/**
+ * zag focuses the listbox content on an item's `mousedown` without
+ * `preventScroll`, which scrolls a list whose top is off screen between press
+ * and release. The content is focused first, in the capture phase, without
+ * scrolling, so zag's own focus is a no-op.
+ */
+describe("Listbox", () => {
+    it("focuses its content without scrolling when an option is pressed", () => {
+        const { container } = render(Listbox, {
+            props: {
+                label: "Fruit",
+                options: [
+                    { value: "a", label: "Apple" },
+                    { value: "b", label: "Banana" },
+                ],
+            },
+        });
+        const content = container.querySelector(".listbox__content");
+        const option = content.querySelector('[data-part="item"]');
+        const focus = vi.spyOn(content, "focus");
+        option.dispatchEvent(new MouseEvent("mousedown", { bubbles: true, cancelable: true }));
+        expect(focus.mock.calls[0]?.[0]).toEqual({ preventScroll: true });
+        expect(document.activeElement).toBe(content);
+    });
+});

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

@@ -0,0 +1,37 @@
+export interface ListboxOption {
+    /** Form value submitted when the option is selected. */
+    value: string;
+    /** Display text. */
+    label: string;
+    /** Prevents selection while keeping the option visible. */
+    disabled?: boolean;
+    /** Group heading this option belongs under. Options sharing a group render together. */
+    group?: string;
+}
+export interface ListboxProps {
+    /** The options to list, in display order. */
+    options: ListboxOption[];
+    /** Accessible label rendered above the list. */
+    label?: string;
+    /** Selected values. Bindable: `bind:value`. */
+    value?: string[];
+    /** Initial selection for the uncontrolled case. */
+    defaultValue?: string[];
+    /** Called with the full selection whenever it changes. */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * How many options may be selected at once. `extended` adds shift-click and
+     * shift-arrow range selection. Defaults to 'single'.
+     */
+    selectionMode?: "single" | "multiple" | "extended";
+    /** Size variant. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Visual treatment. `bordered` draws a container around the list. Defaults to 'default'. */
+    variant?: "default" | "bordered";
+    /** Message shown when `options` is empty. */
+    emptyMessage?: string;
+    /** Disables the whole list. */
+    disabled?: boolean;
+    class?: string;
+}
+//# sourceMappingURL=Listbox.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Listbox.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Listbox/Listbox.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wFAAwF;IACxF,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,YAAY;IAC3B,6CAA6C;IAC7C,OAAO,EAAE,aAAa,EAAE,CAAC;IACzB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C;;;OAGG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;IACnD,sCAAsC;IACtC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6FAA6F;IAC7F,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,6CAA6C;IAC7C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Listbox/Listbox.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as Listbox } from "./Listbox.svelte";
+export type { ListboxProps, ListboxOption } from "./Listbox.types.js";
+export type { ListboxVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Listbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/components/Listbox/index.js

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

package/dist/components/Marquee/Marquee.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+  import { Marquee as ArkMarquee } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { marqueeStyles } from "@ui-organized/core";
+  import type { MarqueeProps } from "./Marquee.types.js";
+  import "@ui-organized/core/components/Marquee/Marquee.css";
+
+  /** Authored default gap. zag resolves it into `--marquee-spacing` at runtime,
+   *  so the value it computes with is not a token — but the one we author is. */
+  const DEFAULT_SPACING = "var(--spacing-space-04)";
+
+  /**
+   * The machine has no `orientation`; it has `side`, which is the direction of
+   * travel and implies the axis. The library uses `orientation` everywhere else,
+   * so the public prop keeps that name and the default side for each axis is
+   * chosen here. `reverse` flips the direction within the axis.
+   */
+  const SIDE_BY_ORIENTATION = {
+    horizontal: "start",
+    vertical: "top",
+  } as const;
+
+  let {
+    items,
+    speed,
+    delay,
+    orientation = "horizontal",
+    reverse,
+    spacing = DEFAULT_SPACING,
+    autoFill = true,
+    pauseOnInteraction,
+    defaultPaused,
+    loopCount,
+    showEdges = true,
+    class: className,
+  }: MarqueeProps = $props();
+
+  /* Reduced motion is handled entirely in Marquee.css, which drops the
+     animation under `prefers-reduced-motion: reduce` — continuous motion with
+     no way to stop it is a WCAG 2.2.2 failure. Forcing `defaultPaused` here
+     instead would make the component disagree with its own stylesheet and
+     would leak a media query into SSR, where there is no media to query. */
+</script>
+
+<ArkMarquee.Root
+  class={clsx(marqueeStyles({ orientation }), className)}
+  {speed}
+  {delay}
+  side={SIDE_BY_ORIENTATION[orientation]}
+  {reverse}
+  {spacing}
+  {autoFill}
+  {pauseOnInteraction}
+  {defaultPaused}
+  {loopCount}
+>
+  {#if showEdges}
+    <ArkMarquee.Edge side="start" class="marquee__edge" />
+    <ArkMarquee.Edge side="end" class="marquee__edge" />
+  {/if}
+  <ArkMarquee.Viewport class="marquee__viewport">
+    <!--
+      One Content, not one per copy. Ark's Content renders itself
+      `api.contentCount` times — the machine decides how many passes are needed
+      to fill the track from the measured content and `autoFill` — and tags
+      every duplicate `data-clone` so it stays out of the accessibility tree.
+      Looping here would duplicate the duplicates.
+    -->
+    <ArkMarquee.Content class="marquee__content">
+      {#each items as item (item.id)}
+        <ArkMarquee.Item class="marquee__item">
+          {#if typeof item.content === "string"}{item.content}{:else}{@render item.content?.()}{/if}
+        </ArkMarquee.Item>
+      {/each}
+    </ArkMarquee.Content>
+  </ArkMarquee.Viewport>
+</ArkMarquee.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Marquee/Marquee.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,mDAAmD,CAAC;AAiE3D,QAAA,MAAM,OAAO,kDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/components/Marquee/Marquee.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Marquee.test.d.ts.map

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

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