@ui-organized/svelte 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ */
+export interface SignaturePadProps {
+    /** Accessible label rendered above the pad. */
+    label?: string;
+    /** Helper text rendered below the pad. 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;
+    /** Controlled strokes, as SVG path data. Bindable: `bind:paths`. */
+    paths?: string[];
+    /** Initial strokes for the uncontrolled case. */
+    defaultPaths?: string[];
+    /** Called as each stroke is drawn. */
+    onDraw?: (paths: string[]) => void;
+    /**
+     * Called when a stroke finishes. `getDataUrl` rasterises the signature — use
+     * it when a server wants a PNG rather than the stroke paths the hidden input
+     * submits.
+     */
+    onDrawEnd?: (paths: string[], getDataUrl: (type: "image/png" | "image/jpeg" | "image/svg+xml", quality?: number) => Promise<string>) => void;
+    /**
+     * Ink width in device pixels. This is a canvas stroke, not CSS — the ink's
+     * *color* is themed, its thickness is geometry. Defaults to 2.
+     */
+    strokeWidth?: number;
+    /** Shows the sign-here rule across the pad. Defaults to true. */
+    showGuide?: boolean;
+    /** Shows the clear button. Defaults to true. */
+    showClear?: boolean;
+    /** Text on the clear button. Defaults to 'Clear'. */
+    clearLabel?: string;
+    /** Size variant, driving the pad's height. Defaults to 'md'. */
+    size?: "sm" | "md" | "lg";
+    /** Surface treatment. `bordered` draws a full box. Defaults to 'default'. */
+    variant?: "default" | "bordered";
+    /** Marks the field required and shows the required indicator. */
+    required?: boolean;
+    /** Disables drawing. */
+    disabled?: boolean;
+    /** Makes the signature read-only while keeping it visible. */
+    readOnly?: boolean;
+    /** Form field name for the hidden input. */
+    name?: string;
+    class?: string;
+}
+//# sourceMappingURL=SignaturePad.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SignaturePad.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/SignaturePad/SignaturePad.types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,sCAAsC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACnC;;;;OAIG;IACH,SAAS,CAAC,EAAE,CACV,KAAK,EAAE,MAAM,EAAE,EACf,UAAU,EAAE,CACV,IAAI,EAAE,WAAW,GAAG,YAAY,GAAG,eAAe,EAClD,OAAO,CAAC,EAAE,MAAM,KACb,OAAO,CAAC,MAAM,CAAC,KACjB,IAAI,CAAC;IACV;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gDAAgD;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qDAAqD;IACrD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gEAAgE;IAChE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,iEAAiE;IACjE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4CAA4C;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/SignaturePad/SignaturePad.types.js

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

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

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

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

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

package/dist/components/SignaturePad/index.js

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

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,54 @@
+<!--
+  Loading placeholder. Renders a shimmering block sized to the eventual content.
+  For multi-line text, pass `lines` to render a stack with a shortened last row.
+-->
+<script lang="ts">
+  import { clsx } from "clsx";
+  import { skeletonStyles } from "@ui-organized/core";
+  import type { SkeletonProps } from "./Skeleton.types.js";
+  import "@ui-organized/core/components/Skeleton/Skeleton.css";
+
+  let {
+    variant = "text",
+    width,
+    height,
+    lines = 1,
+    animated = true,
+    class: className,
+    style,
+    ...rest
+  }: SkeletonProps = $props();
+
+  /** A number is treated as pixels; strings pass through as-is. */
+  const toCssSize = (value?: number | string): string | undefined =>
+    value == null ? undefined : typeof value === "number" ? `${value}px` : value;
+
+  const w = $derived(toCssSize(width));
+  const h = $derived(toCssSize(height));
+
+  const declarations = (...pairs: [string, string | undefined][]): string | undefined => {
+    const out = pairs.filter(([, v]) => v != null).map(([k, v]) => `${k}: ${v}`);
+    return out.length ? out.join("; ") : undefined;
+  };
+
+  const isStack = $derived(variant === "text" && lines > 1);
+  const ownStyle = $derived(declarations(["width", w], ["height", h]));
+</script>
+
+{#if isStack}
+  <div class={clsx("skeleton-group", className)} {style} aria-hidden="true" {...rest}>
+    {#each { length: lines } as _, i}
+      <span
+        class={skeletonStyles({ variant, animated })}
+        style={declarations(["width", i === lines - 1 ? "60%" : (w ?? "100%")], ["height", h])}
+      ></span>
+    {/each}
+  </div>
+{:else}
+  <span
+    class={clsx(skeletonStyles({ variant, animated }), className)}
+    style={[ownStyle, style].filter(Boolean).join("; ") || undefined}
+    aria-hidden="true"
+    {...rest}
+  ></span>
+{/if}

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

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

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

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

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

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface SkeletonProps extends Omit<HTMLAttributes<HTMLElement>, "class" | "style"> {
+    /** Shape of the placeholder. Defaults to 'text'. */
+    variant?: "text" | "circle" | "rect" | "rounded";
+    /** Explicit width — a number is treated as pixels. */
+    width?: number | string;
+    /** Explicit height — a number is treated as pixels. */
+    height?: number | string;
+    /** Number of text lines to render (only meaningful for the 'text' variant). Defaults to 1. */
+    lines?: number;
+    /** Whether to run the shimmer animation. Defaults to true. */
+    animated?: boolean;
+    class?: string;
+    style?: string;
+}
+//# sourceMappingURL=Skeleton.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Skeleton/Skeleton.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzF,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;IACjD,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,8FAA8F;IAC9F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Skeleton/Skeleton.types.js

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

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

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

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

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

package/dist/components/Skeleton/index.js

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

package/dist/components/Splitter/Splitter.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { Splitter as ArkSplitter } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { splitterStyles } from "@ui-organized/core";
+  import type { SplitterProps } from "./Splitter.types.js";
+  import "@ui-organized/core/components/Splitter/Splitter.css";
+
+  let {
+    panels,
+    size = $bindable(),
+    defaultSize,
+    onResize,
+    onResizeEnd,
+    orientation = "horizontal",
+    variant,
+    class: className,
+  }: SplitterProps = $props();
+
+  /* The machine takes its own panel descriptors, not our render data — strip
+     `content` so a changed snippet never looks like a changed constraint. */
+  const panelData = $derived(
+    panels.map(({ id, minSize, maxSize, collapsible, collapsedSize }) => ({
+      id,
+      minSize,
+      maxSize,
+      collapsible,
+      collapsedSize,
+    })),
+  );
+</script>
+
+<!--
+  `bind:size` rather than a plain prop: Ark's own Root declares `size` bindable
+  and writes the new layout back on every resize, so binding is what keeps an
+  uncontrolled splitter's `bind:size` reading the sizes the user dragged to.
+-->
+<ArkSplitter.Root
+  class={clsx(splitterStyles({ orientation, variant }), className)}
+  panels={panelData}
+  bind:size
+  {defaultSize}
+  onResize={onResize && ((details) => onResize(details.size))}
+  onResizeEnd={onResizeEnd && ((details) => onResizeEnd(details.size))}
+  {orientation}
+>
+  {#each panels as panel, index (panel.id)}
+    <ArkSplitter.Panel id={panel.id} class="splitter__panel">
+      {#if typeof panel.content === "string"}{panel.content}{:else}{@render panel.content?.()}{/if}
+    </ArkSplitter.Panel>
+    <!--
+      A handle sits between adjacent panels, so the last panel has none.
+      zag identifies it by the literal "before:after" pair of ids.
+    -->
+    {#if index < panels.length - 1}
+      <!-- The handle is a <button role="separator"> whose only child is a
+           decorative grip, so it had no accessible name — a keyboard user landed
+           on an unnamed control with arrow keys that did something unexplained.
+           Naming it after the two panels it sits between says what moving it
+           will do. Same name as the React library's. -->
+      <ArkSplitter.ResizeTrigger
+        id={`${panel.id}:${panels[index + 1]!.id}`}
+        class="splitter__trigger"
+        aria-label={`Resize ${panel.label ?? panel.id} and ${
+          panels[index + 1]!.label ?? panels[index + 1]!.id
+        }`}
+      >
+        <span class="splitter__grip" aria-hidden="true"></span>
+      </ArkSplitter.ResizeTrigger>
+    {/if}
+  {/each}
+</ArkSplitter.Root>

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

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

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

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

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

@@ -0,0 +1,45 @@
+import type { Snippet } from "svelte";
+export interface SplitterPanelDef {
+    /** Unique id across the splitter. Resize triggers are derived from adjacent ids. */
+    id: string;
+    /**
+     * Human name for the panel, used to label the resize handles beside it
+     * ("Resize sidebar and main"). Defaults to `id`, which is fine when ids read
+     * as words and worth setting when they don't.
+     */
+    label?: string;
+    /**
+     * Panel 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;
+    /** Smallest size, as a percentage of the group. */
+    minSize?: number;
+    /** Largest size, as a percentage of the group. */
+    maxSize?: number;
+    /** Allows the panel to collapse to `collapsedSize`. */
+    collapsible?: boolean;
+    /** Size the panel collapses to, as a percentage. Defaults to 0. */
+    collapsedSize?: number;
+}
+export interface SplitterProps {
+    /** The panels, in order. A resize handle is placed between each adjacent pair. */
+    panels: SplitterPanelDef[];
+    /** Sizes, as percentages, one per panel. Bindable: `bind:size`. */
+    size?: number[];
+    /** Initial sizes for the uncontrolled case. Defaults to an even split. */
+    defaultSize?: number[];
+    /** Called continuously while a handle is dragged. */
+    onResize?: (size: number[]) => void;
+    /** Called once, when the drag ends. */
+    onResizeEnd?: (size: number[]) => void;
+    /** Split direction. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    /** Handle treatment. `subtle` shows the rule only on hover. Defaults to 'default'. */
+    variant?: "default" | "subtle";
+    class?: string;
+}
+//# sourceMappingURL=Splitter.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Splitter.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Splitter/Splitter.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,gBAAgB;IAC/B,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,kFAAkF;IAClF,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;IAChB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACpC,uCAAuC;IACvC,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACvC,iDAAiD;IACjD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sFAAsF;IACtF,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Splitter/Splitter.types.js

@@ -0,0 +1,7 @@
+export {};
+/*
+ * There is deliberately no `disabled` prop: the machine has none. Resizing is
+ * constrained per panel instead — give a panel equal `minSize` and `maxSize` and
+ * the handles beside it become inert, which is what zag reports as
+ * `data-disabled` on the affected resize trigger.
+ */

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

@@ -0,0 +1,4 @@
+export { default as Splitter } from "./Splitter.svelte";
+export type { SplitterProps, SplitterPanelDef } from "./Splitter.types.js";
+export type { SplitterVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Splitter/index.js

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

package/dist/components/Steps/Steps.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+  import { Steps as ArkSteps } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { stepsStyles, OMIT_ARIA } from "@ui-organized/core";
+  import Button from "../Button/Button.svelte";
+  import Icon from "../Icon/Icon.svelte";
+  import type { StepsProps } from "./Steps.types.js";
+  import "@ui-organized/core/components/Steps/Steps.css";
+  import { glyph } from "../../icons/glyph.js";
+
+  /** The completed tick sits inside the indicator circle at every size — it marks
+   *  the step rather than scaling with the surrounding text. */
+  const COMPLETE_ICON_SIZE = 16;
+
+  let {
+    steps,
+    step = $bindable(),
+    defaultStep,
+    onStepChange,
+    onStepComplete,
+    orientation = "horizontal",
+    size = "md",
+    variant = "numbered",
+    linear,
+    showContent = true,
+    completedContent,
+    class: className,
+  }: StepsProps = $props();
+</script>
+
+<!--
+  `count` is derived, never a prop: a count out of step with `steps` would desync
+  the progress bar and the trigger list against each other.
+-->
+<ArkSteps.Root
+  class={clsx(stepsStyles({ orientation, size, variant }), className)}
+  count={steps.length}
+  bind:step
+  {defaultStep}
+  onStepChange={onStepChange && ((details) => onStepChange(details.step))}
+  {onStepComplete}
+  {orientation}
+  {linear}
+>
+  <!--
+    The list is pinned to a <div> with asChild: `@ark-ui/svelte` builds this part
+    on `ark.ol` while `@ark-ui/react` and `@ark-ui/vue` both build it on
+    `ark.div`, and one stylesheet styles every framework library. An <ol> here
+    brings UA list styling and its own box with it, against rules written for a
+    plain one. The caller's class goes *through* Ark's props function rather
+    than being spread after it, so Ark's own attributes survive the merge.
+  -->
+  <ArkSteps.List>
+    {#snippet asChild(listProps)}
+      <div {...listProps({ class: "steps__list" })}>
+        {#each steps as item, index (item.title)}
+          <!--
+            A `tablist` may own only tabs, and each Item is a direct child div
+            that is neither. Ark already marks it `role="presentation"`, but
+            presentation is *ignored* on an element carrying a global ARIA
+            attribute — and Ark also sets `aria-current` here. Dropping
+            `aria-current` lets the presentation role hold; nothing is lost,
+            because the trigger inside already reports `aria-selected`. Same fix,
+            and same sentinel, as the React library.
+          -->
+          <ArkSteps.Item {index} class="steps__item" role="presentation" aria-current={OMIT_ARIA}>
+            <!--
+              Ark names a panel on every trigger, but the panels only exist when
+              `showContent` is on. Left in place the reference dangles, which is
+              an ARIA error and costs the trigger its accessible name.
+            -->
+            <ArkSteps.Trigger
+              class="steps__trigger"
+              {...showContent ? {} : { "aria-controls": OMIT_ARIA }}
+            >
+              <ArkSteps.Indicator class="steps__indicator">
+                <!--
+                  The tick replaces the number only once the step is complete;
+                  CSS hides whichever one does not apply.
+                -->
+                <span class="steps__indicator-number">
+                  {#if variant === "numbered"}{index + 1}{/if}
+                </span>
+                <Icon name={glyph("check")} size={COMPLETE_ICON_SIZE} class="steps__indicator-check" />
+              </ArkSteps.Indicator>
+              <span class="steps__text">
+                <span class="steps__title">{item.title}</span>
+                {#if item.description}
+                  <span class="steps__description">{item.description}</span>
+                {/if}
+              </span>
+            </ArkSteps.Trigger>
+            <ArkSteps.Separator class="steps__separator" />
+          </ArkSteps.Item>
+        {/each}
+      </div>
+    {/snippet}
+  </ArkSteps.List>
+
+  {#if showContent}
+    {#each steps as item, index (item.title)}
+      <ArkSteps.Content {index} class="steps__content">
+        {#if typeof item.content === "string"}{item.content}{:else}{@render item.content?.()}{/if}
+      </ArkSteps.Content>
+    {/each}
+    <ArkSteps.CompletedContent class="steps__content">
+      {#if typeof completedContent === "string"}
+        {completedContent}
+      {:else}
+        {@render completedContent?.()}
+      {/if}
+    </ArkSteps.CompletedContent>
+    <div class="steps__actions">
+      <!--
+        The two actions *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.
+      -->
+      <ArkSteps.PrevTrigger>
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = props()}
+          <Button intent="secondary" {size} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Back
+          </Button>
+        {/snippet}
+      </ArkSteps.PrevTrigger>
+      <ArkSteps.NextTrigger>
+        {#snippet asChild(props)}
+          {@const { class: arkClass, ...triggerProps } = props()}
+          <Button intent="primary" {size} type="button" class={clsx(arkClass)} {...triggerProps}>
+            Next
+          </Button>
+        {/snippet}
+      </ArkSteps.NextTrigger>
+    </div>
+  {/if}
+</ArkSteps.Root>

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

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

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

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

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

@@ -0,0 +1,43 @@
+import type { Snippet } from "svelte";
+import type { ControlSize } from "@ui-organized/core";
+export interface StepItem {
+    /** Step heading. */
+    title: string;
+    /** Optional supporting line under the title. */
+    description?: string;
+    /**
+     * Panel shown while this step is current. 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 StepsProps {
+    /** The steps, in order. */
+    steps: StepItem[];
+    /** Index of the current step. Bindable: `bind:step`. */
+    step?: number;
+    /** Initial step index for the uncontrolled case. Defaults to 0. */
+    defaultStep?: number;
+    /** Called with the new index whenever the current step changes. */
+    onStepChange?: (step: number) => void;
+    /** Called once the last step is completed. */
+    onStepComplete?: () => void;
+    /** Layout direction. Defaults to 'horizontal'. */
+    orientation?: "horizontal" | "vertical";
+    /** Size variant. Defaults to 'md'. */
+    size?: ControlSize;
+    /** Indicator style. `numbered` shows the step number, `dotted` a plain dot. Defaults to 'numbered'. */
+    variant?: "numbered" | "dotted";
+    /** Prevents jumping ahead past the current step. Defaults to false. */
+    linear?: boolean;
+    /** Renders the step panels and the previous/next buttons. Defaults to true. */
+    showContent?: boolean;
+    /** Panel shown once every step is complete. */
+    completedContent?: string | Snippet;
+    class?: string;
+}
+//# sourceMappingURL=Steps.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Steps.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Steps/Steps.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,QAAQ;IACvB,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,UAAU;IACzB,2BAA2B;IAC3B,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,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,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kDAAkD;IAClD,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,sCAAsC;IACtC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,uGAAuG;IACvG,OAAO,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IAChC,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/components/Steps/Steps.types.js

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

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

@@ -0,0 +1,4 @@
+export { default as Steps } from "./Steps.svelte";
+export type { StepsProps, StepItem } from "./Steps.types.js";
+export type { StepsVariants } from "@ui-organized/core";
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/Steps/index.js

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

package/dist/components/Switch/Switch.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import { Switch as ArkSwitch } from "@ark-ui/svelte";
+  import { clsx } from "clsx";
+  import { OMIT_ARIA } from "@ui-organized/core";
+  import type { SwitchProps } from "./Switch.types.js";
+  import "@ui-organized/core/components/Switch/Switch.css";
+
+  let {
+    checked = $bindable(),
+    defaultChecked,
+    onCheckedChange,
+    label,
+    disabled,
+    required,
+    name,
+    id,
+    class: className,
+    "aria-label": ariaLabel,
+  }: SwitchProps = $props();
+</script>
+
+<!--
+  Ark's Switch.Root *is* the <label>, so the wrapper element and the interactive
+  root are one and the same.
+
+  `checked` is bindable so `bind:checked` works the way a Svelte consumer
+  expects, and `onCheckedChange` is kept alongside it so the API still matches
+  the React package. Ark hands the callback a details object; it is unwrapped
+  here so the facade's signature is `(checked: boolean)` in both libraries.
+-->
+<ArkSwitch.Root
+  class={clsx("switch", className)}
+  bind:checked
+  {defaultChecked}
+  onCheckedChange={(details) => {
+    checked = details.checked;
+    onCheckedChange?.(details.checked);
+  }}
+  {disabled}
+  {required}
+  {name}
+  {id}
+>
+  <ArkSwitch.Control class="switch__track">
+    <ArkSwitch.Thumb class="switch__thumb" />
+  </ArkSwitch.Control>
+  {#if label}
+    <ArkSwitch.Label class="switch__label text-default-body-large">{label}</ArkSwitch.Label>
+  {/if}
+  <!--
+    Without a `label` the Label part isn't rendered, so Ark's `aria-labelledby`
+    would point at nothing — and a dangling IDREF outranks `aria-label`.
+  -->
+  <ArkSwitch.HiddenInput
+    aria-labelledby={label ? undefined : OMIT_ARIA}
+    aria-label={label ? undefined : ariaLabel}
+  />
+</ArkSwitch.Root>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Switch/Switch.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACrD,OAAO,iDAAiD,CAAC;AAwCzD,QAAA,MAAM,MAAM,wDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

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

@@ -0,0 +1,22 @@
+export interface SwitchProps {
+    /** Whether the switch is currently on. Bindable: `bind:checked`. */
+    checked?: boolean;
+    /** Initial state for uncontrolled usage. */
+    defaultChecked?: boolean;
+    /** Callback fired when the switch state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Label text rendered beside the switch. */
+    label?: string;
+    /** Whether the switch should ignore user interaction. */
+    disabled?: boolean;
+    /** Whether the switch is required for form submission. */
+    required?: boolean;
+    /** Name attribute for form submission. */
+    name?: string;
+    /** ID for the switch element. */
+    id?: string;
+    class?: string;
+    /** Accessible name when the switch is rendered without a visible `label`. */
+    "aria-label"?: string;
+}
+//# sourceMappingURL=Switch.types.d.ts.map