@spinjs/components 0.1.0-preview.1 → 0.2.0-alpha.1

package/dist/slider/slider.machine.d.ts

@@ -1,5 +1,5 @@
+/** Slider machine: idle/focus/dragging over three states. */
 import { SliderArgs, SliderContext, SliderState } from "./slider.state.js";
 import { SliderEvents } from "./slider.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function slider(args?: SliderArgs, authored?: (name: string) => boolean): Machine<SliderContext, SliderEvents, SliderState>;
-//# sourceMappingURL=slider.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function slider(args?: SliderArgs, authored?: (name: string) => boolean): Machine<SliderContext, SliderEvents, SliderState>;

package/dist/slider/slider.machine.js

@@ -1,7 +1,7 @@
 import { initial } from "./slider.state.js";
 import { clearFocusedIndex, decrementThumb, hasIndex, incrementThumb, setAllValues, setClosestThumb, setEndValue, setFocusedIndex, setHomeValue, setIndexedValue, setPointerValue } from "./slider.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
-import { isInteractive } from "@spinjs/runtime";
+import { createMachine } from "@spinjs/components/fsm";
+import { isInteractive } from "@spinjs/components/runtime";
 // src/slider/slider.machine.ts
 /** Slider machine: idle/focus/dragging over three states. */
 function slider(args = {}, authored = () => false) {

package/dist/slider/slider.presentation.d.ts

@@ -1,12 +1,12 @@
 import { SliderArgs, SliderContext, SliderState, ThumbCollisionBehavior } from "./slider.state.js";
 import { SliderEvents } from "./slider.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
-import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
+import { DragDelta, DragPress } from "@spinjs/components/actions";
 type ScopeLike = ViewFor<SliderContext, SliderEvents, SliderState>;
 type SlotLike<R> = SlotViewFor<R, SliderContext, SliderEvents, SliderState>;
 export declare const def: {
   name: string;
-  machine: (args: SliderArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<SliderContext, SliderEvents, SliderState>;
+  machine: (args: SliderArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<SliderContext, SliderEvents, SliderState>;
   start: "idle";
   commitEvents: ("POINTER_UP" | "SET_VALUE" | "HOME" | "END" | "INCREMENT" | "ARROW_INC" | "DECREMENT" | "ARROW_DEC")[];
   parts: {
@@ -229,7 +229,7 @@ export declare const def: {
     };
   };
   settled: ({ event, after, focus }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: SliderContext;
       readonly state: SliderState;
@@ -243,10 +243,9 @@ export declare const def: {
     readonly id: (part: string, slot?: unknown) => string;
     readonly focus: (part: string, slot?: unknown) => void;
     readonly measure: (part: string, slot?: unknown) => DOMRect | null;
-    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+    readonly send: (event: import("@spinjs/components/runtime").AnyEvent) => void;
   }) => void;
 };
 export type SliderApi = ApiOf<typeof def>;
-export declare const slider: import("@spinjs/runtime").DefinedComponent<SliderApi, SliderArgs>;
-export type { SliderArgs, SliderState, ThumbCollisionBehavior };
-//# sourceMappingURL=slider.presentation.d.ts.map
+export declare const slider: import("@spinjs/components/runtime").DefinedComponent<SliderApi, SliderArgs>;
+export type { SliderArgs, SliderState, ThumbCollisionBehavior };

package/dist/slider/slider.presentation.js

@@ -1,6 +1,6 @@
-import { percentOf, thumbRange, valueOfPercent } from "./slider.state.js";
 import { slider as slider$1 } from "./slider.machine.js";
-import { ariaDisabled, ariaOrientation, defineComponent, isComposing, isInteractive, sliderThumb } from "@spinjs/runtime";
+import { percentOf, thumbRange, valueOfPercent } from "./slider.state.js";
+import { ariaDisabled, ariaOrientation, defineComponent, isComposing, isInteractive, sliderThumb } from "@spinjs/components/runtime";
 // src/slider/slider.presentation.ts
 /** A client point as a stepped track value, measured off the track node. */
 const trackValue = (measure, orientation, dir, context, clientX, clientY) => {

package/dist/slider/slider.state.d.ts

@@ -68,5 +68,4 @@ export declare function thumbRange(ctx: SliderContext, index: number): {
 };
 export declare function percentOf(ctx: SliderContext, value: number): number;
 export declare function valueOfPercent(ctx: SliderContext, percent: number): number;
-export { constrain, handlePush, normalizeAll, rangeAt, resolveNone };
-//# sourceMappingURL=slider.state.d.ts.map
+export { constrain, handlePush, normalizeAll, rangeAt, resolveNone };

package/dist/slider/slider.state.js

@@ -1,4 +1,4 @@
-import { clampValue, getPercentValue, getValuePercent, getValueRanges, round10, snapValueToStep } from "@spinjs/runtime";
+import { clampValue, getPercentValue, getValuePercent, getValueRanges, round10, snapValueToStep } from "@spinjs/components/runtime";
 // src/slider/slider.state.ts
 /**
 * The machine's context, built from its arguments: what the args did not

package/dist/slider/slider.transitions.d.ts

@@ -1,6 +1,6 @@
-import { SliderContext } from "./slider.state.js";
 import { SliderEvents } from "./slider.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { SliderContext } from "./slider.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type SliderAssign<K extends keyof SliderEvents = keyof SliderEvents> = AssignFor<SliderContext, SliderEvents, K>;
 export declare const incrementThumb: SliderAssign<"INCREMENT" | "ARROW_INC">;
 export declare const decrementThumb: SliderAssign<"DECREMENT" | "ARROW_DEC">;
@@ -13,5 +13,4 @@ export declare const setIndexedValue: SliderAssign<"SET_VALUE">;
 export declare const setAllValues: SliderAssign<"SET_VALUE">;
 export declare const setHomeValue: (ctx: SliderContext) => Partial<SliderContext>;
 export declare const setEndValue: (ctx: SliderContext) => Partial<SliderContext>;
-export {};
-//# sourceMappingURL=slider.transitions.d.ts.map
+export {};

package/dist/slider/slider.transitions.js

@@ -1,5 +1,5 @@
 import { constrain, handlePush, movableIndex, normalizeAll, rangeAt, resolveNone } from "./slider.state.js";
-import { clampValue, closestIndex, getNextStepValue, getPreviousStepValue } from "@spinjs/runtime";
+import { clampValue, closestIndex, getNextStepValue, getPreviousStepValue } from "@spinjs/components/runtime";
 // src/slider/slider.transitions.ts
 const incrementThumb = (ctx, event) => {
 	const index = event.type === "INCREMENT" && event.index !== void 0 ? event.index : ctx.focusedIndex;

package/dist/solid/solid.d.ts

@@ -1,5 +1,5 @@
 import { CtlFor, ElementTarget, SpinComponentCtl, spinComponentCtl } from "../controller.js";
-import { DefinedComponent } from "@spinjs/runtime";
+import { DefinedComponent } from "@spinjs/components/runtime";
 /**
  * Solid adapter: `createSpinComponent(el)` is the app controller's
  * instrument.
@@ -32,5 +32,4 @@ export type SpinComponentCtlAccessor<TCommands extends object = object, TState e
 export declare function createSpinComponent<D extends DefinedComponent<any, any>>(def: D): (() => CtlFor<D>) & CtlFor<D>;
 export declare function createSpinComponent<D extends DefinedComponent<any, any>>(target: ElementTarget, def: D): (() => CtlFor<D>) & CtlFor<D>;
 export declare function createSpinComponent<TCommands extends object = object, TState extends object = Record<string, () => unknown>, TProps extends object = Record<string, unknown>>(el: ElementTarget, handle?: object): SpinComponentCtlAccessor<TCommands, TState, TProps>;
-export { spinComponentCtl };
-//# sourceMappingURL=solid.d.ts.map
+export { spinComponentCtl };

package/dist/spin-element.d.ts

@@ -9,5 +9,4 @@ export interface SpinHookOptions<TProps extends object> {
   readonly on?: Readonly<Record<string, (event: CustomEvent) => void>> | undefined;
 }
 /** Attach-time work shared by every adapter: write props, bind events. */
-export declare function bindSpinElement<TProps extends object>(el: Element, { props, on }: SpinHookOptions<TProps>): () => void;
-//# sourceMappingURL=spin-element.d.ts.map
+export declare function bindSpinElement<TProps extends object>(el: Element, { props, on }: SpinHookOptions<TProps>): () => void;

package/dist/spin-element.js

@@ -1,4 +1,4 @@
-import { writeProp } from "@spinjs/runtime";
+import { writeProp } from "@spinjs/components/runtime";
 // src/spin-element.ts
 /**
 * Host hooks for spin elements: the drop-in surface for framework apps.

package/dist/splitter/examples/basic.html

@@ -11,9 +11,9 @@ const machine = splitter({
  <div class="gap-2" {...machine.getRootProps()}>
   <template for={machine.getItems()} as={row} key={row.id}>
    <div
-    class={["min-h-0 min-w-0 rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus-visible:bg-surface-sunken": row.type === "handle", "w-2 cursor-col-resize": machine.orientation === "horizontal" && row.type === "handle", "h-2 cursor-row-resize": machine.orientation === "vertical" && row.type === "handle" }]}
+    class={["min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken": row.type === "handle", "w-2 cursor-col-resize": machine.orientation === "horizontal" && row.type === "handle", "h-2 cursor-row-resize": machine.orientation === "vertical" && row.type === "handle" }]}
     {...machine.getItemProps(row)}
-   ><span class={["block p-2 text-xs text-text-muted", { "hidden": row.type === "handle" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span
+   ><span class={["block p-2 type-caption text-muted", { "hidden": row.type === "handle" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span
    class={["hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate", { "block": row.type === "handle", "h-8 w-1": machine.orientation === "horizontal" && row.type === "handle", "h-1 w-8": machine.orientation === "vertical" && row.type === "handle" }]}
    {...machine.getItemIndicatorProps(row)}
   ></span></div>

package/dist/splitter/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/splitter/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { splitter } from \"../splitter.presentation.ts\";\n\nconst machine = splitter({\n panels: '[{\"id\":\"nav\"},{\"id\":\"main\"},{\"id\":\"inspector\"}]',\n size: \"[30, 50, 20]\",\n});\n<\/script>\n\n<div class=\"h-60 w-full\">\n <div class=\"gap-2\" {...machine.getRootProps()}>\n  <template for={machine.getItems()} as={row} key={row.id}>\n   <div\n    class={[\"min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate\", { \"grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken\": row.type === \"handle\", \"w-2 cursor-col-resize\": machine.orientation === \"horizontal\" && row.type === \"handle\", \"h-2 cursor-row-resize\": machine.orientation === \"vertical\" && row.type === \"handle\" }]}\n    {...machine.getItemProps(row)}\n   ><span class={[\"block p-2 type-caption text-muted\", { \"hidden\": row.type === \"handle\" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span\n   class={[\"hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate\", { \"block\": row.type === \"handle\", \"h-8 w-1\": machine.orientation === \"horizontal\" && row.type === \"handle\", \"h-1 w-8\": machine.orientation === \"vertical\" && row.type === \"handle\" }]}\n   {...machine.getItemIndicatorProps(row)}\n  ></span></div>\n  </template>\n </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/splitter/examples/nested.html

@@ -16,9 +16,9 @@ const inner = splitter({
  <div class="gap-2" {...outer.getRootProps()}>
   <template for={outer.getItems()} as={row} key={row.id}>
    <div
-    class={["min-h-0 min-w-0 rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus-visible:bg-surface-sunken": row.type === "handle", "w-2 cursor-col-resize": outer.orientation === "horizontal" && row.type === "handle", "h-2 cursor-row-resize": outer.orientation === "vertical" && row.type === "handle" }]}
+    class={["min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken": row.type === "handle", "w-2 cursor-col-resize": outer.orientation === "horizontal" && row.type === "handle", "h-2 cursor-row-resize": outer.orientation === "vertical" && row.type === "handle" }]}
     {...outer.getItemProps(row)}
-   ><span class={["block p-2 text-xs text-text-muted", { "hidden": row.type === "handle" }]} {...outer.getItemLabelProps(row)}>{row.id}</span><span
+   ><span class={["block p-2 type-caption text-muted", { "hidden": row.type === "handle" || row.id === "middle" }]} {...outer.getItemLabelProps(row)}>{row.id}</span><span
    class={["hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate", { "block": row.type === "handle", "h-8 w-1": outer.orientation === "horizontal" && row.type === "handle", "h-1 w-8": outer.orientation === "vertical" && row.type === "handle" }]}
    {...outer.getItemIndicatorProps(row)}
   ></span><div
@@ -28,9 +28,9 @@ const inner = splitter({
    >
     <template for={inner.getItems()} as={cell} key={cell.id}>
      <div
-      class={["min-h-0 min-w-0 rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus-visible:bg-surface-sunken": cell.type === "handle", "w-2 cursor-col-resize": inner.orientation === "horizontal" && cell.type === "handle", "h-2 cursor-row-resize": inner.orientation === "vertical" && cell.type === "handle" }]}
+      class={["min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken": cell.type === "handle", "w-2 cursor-col-resize": inner.orientation === "horizontal" && cell.type === "handle", "h-2 cursor-row-resize": inner.orientation === "vertical" && cell.type === "handle" }]}
       {...inner.getItemProps(cell)}
-     ><span class={["block p-2 text-xs text-text-muted", { "hidden": cell.type === "handle" }]} {...inner.getItemLabelProps(cell)}>{cell.id}</span><span
+     ><span class={["block p-2 type-caption text-muted", { "hidden": cell.type === "handle" }]} {...inner.getItemLabelProps(cell)}>{cell.id}</span><span
      class={["hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate", { "block": cell.type === "handle", "h-8 w-1": inner.orientation === "horizontal" && cell.type === "handle", "h-1 w-8": inner.orientation === "vertical" && cell.type === "handle" }]}
      {...inner.getItemIndicatorProps(cell)}
     ></span></div>

package/dist/splitter/examples/nested.html.js

@@ -0,0 +1,5 @@
+// src/splitter/examples/nested.html
+var nested_default = "<script lang=\"ts\">\nimport { splitter } from \"../splitter.presentation.ts\";\n\nconst outer = splitter({\n panels: '[{\"id\":\"nav\"},{\"id\":\"middle\"},{\"id\":\"inspector\"}]',\n size: \"[25, 50, 25]\",\n});\nconst inner = splitter({\n panels: '[{\"id\":\"top\"},{\"id\":\"bottom\"}]',\n size: \"[50, 50]\",\n orientation: \"vertical\",\n});\n<\/script>\n\n<div class=\"h-60 w-full\">\n <div class=\"gap-2\" {...outer.getRootProps()}>\n  <template for={outer.getItems()} as={row} key={row.id}>\n   <div\n    class={[\"min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate\", { \"grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken\": row.type === \"handle\", \"w-2 cursor-col-resize\": outer.orientation === \"horizontal\" && row.type === \"handle\", \"h-2 cursor-row-resize\": outer.orientation === \"vertical\" && row.type === \"handle\" }]}\n    {...outer.getItemProps(row)}\n   ><span class={[\"block p-2 type-caption text-muted\", { \"hidden\": row.type === \"handle\" || row.id === \"middle\" }]} {...outer.getItemLabelProps(row)}>{row.id}</span><span\n   class={[\"hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate\", { \"block\": row.type === \"handle\", \"h-8 w-1\": outer.orientation === \"horizontal\" && row.type === \"handle\", \"h-1 w-8\": outer.orientation === \"vertical\" && row.type === \"handle\" }]}\n   {...outer.getItemIndicatorProps(row)}\n  ></span><div\n    class=\"h-full w-full gap-2\"\n    {...inner.getRootProps()}\n    show={row.id === \"middle\"}\n   >\n    <template for={inner.getItems()} as={cell} key={cell.id}>\n     <div\n      class={[\"min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate\", { \"grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken\": cell.type === \"handle\", \"w-2 cursor-col-resize\": inner.orientation === \"horizontal\" && cell.type === \"handle\", \"h-2 cursor-row-resize\": inner.orientation === \"vertical\" && cell.type === \"handle\" }]}\n      {...inner.getItemProps(cell)}\n     ><span class={[\"block p-2 type-caption text-muted\", { \"hidden\": cell.type === \"handle\" }]} {...inner.getItemLabelProps(cell)}>{cell.id}</span><span\n     class={[\"hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate\", { \"block\": cell.type === \"handle\", \"h-8 w-1\": inner.orientation === \"horizontal\" && cell.type === \"handle\", \"h-1 w-8\": inner.orientation === \"vertical\" && cell.type === \"handle\" }]}\n     {...inner.getItemIndicatorProps(cell)}\n    ></span></div>\n    </template>\n   </div></div>\n  </template>\n </div>\n</div>\n";
+export { nested_default as default };
+
+//# sourceMappingURL=nested.html.js.map

package/dist/splitter/examples/threepanels.html

@@ -12,9 +12,9 @@ const machine = splitter({
  <div class="gap-2" {...machine.getRootProps()}>
   <template for={machine.getItems()} as={row} key={row.id}>
    <div
-    class={["min-h-0 min-w-0 rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus-visible:bg-surface-sunken": row.type === "handle", "w-2 cursor-col-resize": machine.orientation === "horizontal" && row.type === "handle", "h-2 cursor-row-resize": machine.orientation === "vertical" && row.type === "handle" }]}
+    class={["min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken": row.type === "handle", "w-2 cursor-col-resize": machine.orientation === "horizontal" && row.type === "handle", "h-2 cursor-row-resize": machine.orientation === "vertical" && row.type === "handle" }]}
     {...machine.getItemProps(row)}
-   ><span class={["block p-3 text-xs font-medium text-text-muted", { "hidden": row.type === "handle" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span
+   ><span class={["block p-3 type-caption-emphasized text-muted", { "hidden": row.type === "handle" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span
     class={["hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate", { "block": row.type === "handle", "h-8 w-1": machine.orientation === "horizontal" && row.type === "handle", "h-1 w-8": machine.orientation === "vertical" && row.type === "handle" }]}
     {...machine.getItemIndicatorProps(row)}
    ></span></div>

package/dist/splitter/examples/threepanels.html.js

@@ -0,0 +1,5 @@
+// src/splitter/examples/threepanels.html
+var threepanels_default = "<script lang=\"ts\">\nimport { splitter } from \"../splitter.presentation.ts\";\n\nconst machine = splitter({\n panels:\n  '[{\"id\":\"explorer\",\"minSize\":15},{\"id\":\"editor\",\"minSize\":30},{\"id\":\"inspector\",\"minSize\":15}]',\n size: \"[25, 50, 25]\",\n});\n<\/script>\n\n<div class=\"h-60 w-full\">\n <div class=\"gap-2\" {...machine.getRootProps()}>\n  <template for={machine.getItems()} as={row} key={row.id}>\n   <div\n    class={[\"min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate\", { \"grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken\": row.type === \"handle\", \"w-2 cursor-col-resize\": machine.orientation === \"horizontal\" && row.type === \"handle\", \"h-2 cursor-row-resize\": machine.orientation === \"vertical\" && row.type === \"handle\" }]}\n    {...machine.getItemProps(row)}\n   ><span class={[\"block p-3 type-caption-emphasized text-muted\", { \"hidden\": row.type === \"handle\" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span\n    class={[\"hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate\", { \"block\": row.type === \"handle\", \"h-8 w-1\": machine.orientation === \"horizontal\" && row.type === \"handle\", \"h-1 w-8\": machine.orientation === \"vertical\" && row.type === \"handle\" }]}\n    {...machine.getItemIndicatorProps(row)}\n   ></span></div>\n  </template>\n </div>\n</div>\n";
+export { threepanels_default as default };
+
+//# sourceMappingURL=threepanels.html.js.map

package/dist/splitter/examples/vertical.html

@@ -12,9 +12,9 @@ const machine = splitter({
  <div class="gap-2" {...machine.getRootProps()}>
   <template for={machine.getItems()} as={row} key={row.id}>
    <div
-    class={["min-h-0 min-w-0 rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus-visible:bg-surface-sunken": row.type === "handle", "w-2 cursor-col-resize": machine.orientation === "horizontal" && row.type === "handle", "h-2 cursor-row-resize": machine.orientation === "vertical" && row.type === "handle" }]}
+    class={["min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate", { "grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken": row.type === "handle", "w-2 cursor-col-resize": machine.orientation === "horizontal" && row.type === "handle", "h-2 cursor-row-resize": machine.orientation === "vertical" && row.type === "handle" }]}
     {...machine.getItemProps(row)}
-   ><span class={["block p-3 text-xs font-medium text-text-muted", { "hidden": row.type === "handle" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span
+   ><span class={["block p-3 type-caption-emphasized text-muted", { "hidden": row.type === "handle" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span
     class={["hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate", { "block": row.type === "handle", "h-8 w-1": machine.orientation === "horizontal" && row.type === "handle", "h-1 w-8": machine.orientation === "vertical" && row.type === "handle" }]}
     {...machine.getItemIndicatorProps(row)}
    ></span></div>

package/dist/splitter/examples/vertical.html.js

@@ -0,0 +1,5 @@
+// src/splitter/examples/vertical.html
+var vertical_default = "<script lang=\"ts\">\nimport { splitter } from \"../splitter.presentation.ts\";\n\nconst machine = splitter({\n orientation: \"vertical\",\n panels: '[{\"id\":\"editor\",\"minSize\":25},{\"id\":\"terminal\",\"minSize\":20}]',\n size: \"[65, 35]\",\n});\n<\/script>\n\n<div class=\"h-60 w-full\">\n <div class=\"gap-2\" {...machine.getRootProps()}>\n  <template for={machine.getItems()} as={row} key={row.id}>\n   <div\n    class={[\"min-h-0 min-w-0 rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate\", { \"grid shrink-0 place-items-center border-transparent bg-transparent hover:bg-surface-sunken focus:bg-surface-sunken\": row.type === \"handle\", \"w-2 cursor-col-resize\": machine.orientation === \"horizontal\" && row.type === \"handle\", \"h-2 cursor-row-resize\": machine.orientation === \"vertical\" && row.type === \"handle\" }]}\n    {...machine.getItemProps(row)}\n   ><span class={[\"block p-3 type-caption-emphasized text-muted\", { \"hidden\": row.type === \"handle\" }]} {...machine.getItemLabelProps(row)}>{row.id}</span><span\n    class={[\"hidden rounded-full bg-border-strong transition-all duration-fast ease-decelerate\", { \"block\": row.type === \"handle\", \"h-8 w-1\": machine.orientation === \"horizontal\" && row.type === \"handle\", \"h-1 w-8\": machine.orientation === \"vertical\" && row.type === \"handle\" }]}\n    {...machine.getItemIndicatorProps(row)}\n   ></span></div>\n  </template>\n </div>\n</div>\n";
+export { vertical_default as default };
+
+//# sourceMappingURL=vertical.html.js.map

package/dist/splitter/splitter.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface SplitterEvents {
   "SET_SIZE": {
     size: readonly number[];
@@ -48,5 +48,4 @@ export type SplitterEvent = EventUnion<SplitterEvents>;
 export type SplitterResizeDetails = {
   readonly size: number[];
   readonly handleId: string | null;
-};
-//# sourceMappingURL=splitter.events.d.ts.map
+};

package/dist/splitter/splitter.machine.d.ts

@@ -1,6 +1,5 @@
 import { SplitterArgs, SplitterContext, SplitterDragState, SplitterPanel, SplitterState } from "./splitter.state.js";
 import { SplitterEvent, SplitterEvents, SplitterResizeDetails } from "./splitter.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function splitter(args: SplitterArgs | undefined, authored: (name: string) => boolean): Machine<SplitterContext, SplitterEvents, SplitterState>;
-export type { SplitterArgs, SplitterContext, SplitterDragState, SplitterEvent, SplitterEvents, SplitterPanel, SplitterResizeDetails, SplitterState };
-//# sourceMappingURL=splitter.machine.d.ts.map
+export type { SplitterArgs, SplitterContext, SplitterDragState, SplitterEvent, SplitterEvents, SplitterPanel, SplitterResizeDetails, SplitterState };

package/dist/splitter/splitter.machine.js

@@ -1,6 +1,6 @@
 import { initial } from "./splitter.state.js";
 import { clearDrag, clearFocus, collapsePanel, expandPanel, isHandleFocused, keyboardMove, pointerMove, resetSize, resizePanel, setFocusedHandle, setPanels, setSize, startDrag, toggleCollapseOnEnter } from "./splitter.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/splitter/splitter.machine.ts
 function splitter(args = {}, authored) {
 	return createMachine({

package/dist/splitter/splitter.presentation.d.ts

@@ -1,6 +1,6 @@
 import { SplitterArgs, SplitterContext, SplitterState } from "./splitter.state.js";
 import { SplitterEvents, SplitterResizeDetails } from "./splitter.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 export interface SplitterPanelSlotProps {
   readonly id: string;
 }
@@ -28,7 +28,7 @@ type ItemSlot = {
 /** The component's public state: the names the markup may key on. */
 declare const def: {
   name: string;
-  machine: (props: SplitterArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<SplitterContext, SplitterEvents, SplitterState>;
+  machine: (props: SplitterArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<SplitterContext, SplitterEvents, SplitterState>;
   reconcile: ({ context }: {
     readonly context: SplitterContext;
     readonly state: SplitterState;
@@ -38,7 +38,7 @@ declare const def: {
       type: string;
     } & Record<string, unknown>) => void;
   }) => boolean;
-  commitEvents: ("POINTER_UP" | "SET_SIZE" | "COLLAPSE_PANEL" | "EXPAND_PANEL" | "RESIZE_PANEL" | "KEYBOARD_MOVE" | "ENTER")[];
+  commitEvents: ("POINTER_UP" | "ENTER" | "SET_SIZE" | "COLLAPSE_PANEL" | "EXPAND_PANEL" | "RESIZE_PANEL" | "KEYBOARD_MOVE")[];
   parts: {
     root: {
       attrs: (scope: ScopeLike) => {
@@ -199,6 +199,5 @@ declare const def: {
   };
 };
 export type SplitterApi = ApiOf<typeof def>;
-export declare const splitter: import("@spinjs/runtime").DefinedComponent<SplitterApi, SplitterArgs>;
-export type { SplitterResizeDetails };
-//# sourceMappingURL=splitter.presentation.d.ts.map
+export declare const splitter: import("@spinjs/components/runtime").DefinedComponent<SplitterApi, SplitterArgs>;
+export type { SplitterResizeDetails };

package/dist/splitter/splitter.presentation.js

@@ -1,6 +1,6 @@
 import { defaultSizes, handleId, isInteractive as isInteractive$1, panelCollapsed, validateSizes } from "./splitter.state.js";
 import { splitter as splitter$1 } from "./splitter.machine.js";
-import { ariaControls, ariaOrientation, defineComponent, focuser, isComposing, sliderThumb } from "@spinjs/runtime";
+import { ariaControls, ariaOrientation, defineComponent, focuser, isComposing, sliderThumb } from "@spinjs/components/runtime";
 // src/splitter/splitter.presentation.ts
 const sameSizes = (a, b) => a.length === b.length && a.every((value, index) => value === b[index]);
 /** The sends that end the gesture: release, keyboard, and the programmatic

package/dist/splitter/splitter.state.d.ts

@@ -44,5 +44,4 @@ export declare function panelCollapsed(panels: SplitterPanel[], size: readonly n
 export declare function parsePanels(raw: unknown): SplitterPanel[];
 declare const sizesOf: (raw: unknown) => number[] | null;
 export declare function initial(args: SplitterArgs | undefined, authored: (name: string) => boolean): SplitterContext;
-export { sizesOf };
-//# sourceMappingURL=splitter.state.d.ts.map
+export { sizesOf };

package/dist/splitter/splitter.state.js

@@ -1,4 +1,4 @@
-import { coerceJsonArray, defaultTwin } from "@spinjs/runtime";
+import { coerceJsonArray, defaultTwin } from "@spinjs/components/runtime";
 // src/splitter/splitter.state.ts
 const PRECISION = 10;
 function fuzzyCompare(actual, expected) {

package/dist/splitter/splitter.transitions.d.ts

@@ -1,6 +1,6 @@
 import { SplitterContext } from "./splitter.state.js";
 import { SplitterEvents } from "./splitter.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type SplitterAssign<K extends keyof SplitterEvents = keyof SplitterEvents> = AssignFor<SplitterContext, SplitterEvents, K>;
 export declare const setFocusedHandle: SplitterAssign<"POINTER_OVER" | "FOCUS">;
 export declare const startDrag: SplitterAssign<"POINTER_DOWN">;
@@ -16,5 +16,4 @@ export declare const toggleCollapseOnEnter: SplitterAssign<"ENTER">;
 export declare const keyboardMove: SplitterAssign<"KEYBOARD_MOVE">;
 export declare const pointerMove: SplitterAssign<"POINTER_MOVE">;
 export declare const isHandleFocused: GuardFor<SplitterContext, SplitterEvents>;
-export {};
-//# sourceMappingURL=splitter.transitions.d.ts.map
+export {};

package/dist/steps/examples/basic.html

@@ -10,9 +10,9 @@ const machine = steps({
 
 <div class="w-full" {...machine.getRootProps()}>
  <div class="mb-3 flex items-center justify-between gap-2">
-  <span class="text-sm font-medium text-text">Checkout</span>
+  <span class="type-label">Checkout</span>
   <span
-   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+   class="type-caption text-muted">Step {machine.value + 1} of {machine.count}</span>
  </div>
 
  <ol class="row-list items-start gap-1" {...machine.getListProps()}>
@@ -23,9 +23,9 @@ const machine = steps({
      class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
      {...machine.getTriggerProps(row)}
     ><span
-      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label", { "border bg-surface-raised text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
       {...machine.getIndicatorProps(row)}
-     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span aria-hidden="true" class={["mx-3 h-1 flex-1 bg-border", { "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="type-label">{machine.getItemTitle(row)}</span></button><span aria-hidden="true" class={["mx-3 h-1 flex-1 bg-border", { "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
    </li>
   </template>
  </ol>
@@ -41,7 +41,7 @@ const machine = steps({
 
  <div class="mt-3 hidden" {...machine.getContentProps(machine.value)}>
   <p
-   class="rounded-md border border-solid border-border bg-surface-raised p-3 text-sm text-text">{machine.getItemTitle(machine.value)}</p>
+   class="rounded-md border bg-surface-raised p-3">{machine.getItemTitle(machine.value)}</p>
  </div>
 
  <div class="mt-3 flex items-center gap-2">

package/dist/steps/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/steps/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { steps } from \"../steps.presentation.ts\";\n\nconst machine = steps({\n count: 4,\n titles: [\"Cart\", \"Shipping\", \"Payment\", \"Review\"],\n step: 1,\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n <div class=\"mb-3 flex items-center justify-between gap-2\">\n  <span class=\"type-label\">Checkout</span>\n  <span\n   class=\"type-caption text-muted\">Step {machine.value + 1} of {machine.count}</span>\n </div>\n\n <ol class=\"row-list items-start gap-1\" {...machine.getListProps()}>\n  <template for={machine.getItems()} as={row} key={row}>\n   <li class=\"relative flex min-w-0 items-center not-last:flex-1\"\n    {...machine.getItemProps(row)}>\n    <button\n     class=\"bare flex shrink-0 items-center gap-3 bg-transparent text-left\"\n     {...machine.getTriggerProps(row)}\n    ><span\n      class={[\"relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label\", { \"border bg-surface-raised text-muted\": machine.getItemState(row).incomplete, \"border-primary bg-primary text-on-primary\": machine.getItemState(row).current || machine.getItemState(row).completed }]}\n      {...machine.getIndicatorProps(row)}\n     ><span aria-hidden=\"true\" show={machine.getItemState(row).completed}><span class=\"i-lucide-check type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class=\"type-label\">{machine.getItemTitle(row)}</span></button><span aria-hidden=\"true\" class={[\"mx-3 h-1 flex-1 bg-border\", { \"bg-primary\": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>\n   </li>\n  </template>\n </ol>\n\n <div\n  class=\"mt-3 h-2 w-full overflow-hidden rounded-full bg-surface-sunken\"\n  {...machine.getProgressProps()}\n >\n  <div\n   class=\"h-full rounded-full bg-primary transition-all duration-fast ease-decelerate\"\n   {...machine.getProgressFillProps()}></div>\n </div>\n\n <div class=\"mt-3 hidden\" {...machine.getContentProps(machine.value)}>\n  <p\n   class=\"rounded-md border bg-surface-raised p-3\">{machine.getItemTitle(machine.value)}</p>\n </div>\n\n <div class=\"mt-3 flex items-center gap-2\">\n  <button\n   class=\"secondary s-sm disabled:opacity-50\"\n   {...machine.getPrevTriggerProps()}\n  >Back</button>\n  <button\n   class=\"s-sm disabled:opacity-50\"\n   {...machine.getNextTriggerProps()}\n  >Next</button>\n </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/steps/examples/checkmarks.html

@@ -10,9 +10,9 @@ const machine = steps({
 
 <div class="w-full" {...machine.getRootProps()}>
  <div class="mb-3 flex items-center justify-between gap-2">
-  <span class="text-sm font-medium text-text">Deploy #4821</span>
+  <span class="type-label">Deploy #4821</span>
   <span
-   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+   class="type-caption text-muted">Step {machine.value + 1} of {machine.count}</span>
  </div>
 
  <ol class="row-list items-start gap-1" {...machine.getListProps()}>
@@ -23,9 +23,9 @@ const machine = steps({
      class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
      {...machine.getTriggerProps(row)}
     ><span
-      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label", { "border bg-surface-raised text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
       {...machine.getIndicatorProps(row)}
-     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="type-label">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
    </li>
   </template>
  </ol>

package/dist/steps/examples/checkmarks.html.js

@@ -0,0 +1,5 @@
+// src/steps/examples/checkmarks.html
+var checkmarks_default = "<script lang=\"ts\">\nimport { steps } from \"../steps.presentation.ts\";\n\nconst machine = steps({\n count: 4,\n titles: [\"Build\", \"Test\", \"Rollout\", \"Verify\"],\n step: 2,\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n <div class=\"mb-3 flex items-center justify-between gap-2\">\n  <span class=\"type-label\">Deploy #4821</span>\n  <span\n   class=\"type-caption text-muted\">Step {machine.value + 1} of {machine.count}</span>\n </div>\n\n <ol class=\"row-list items-start gap-1\" {...machine.getListProps()}>\n  <template for={machine.getItems()} as={row} key={row}>\n   <li class=\"relative flex min-w-0 items-center not-last:flex-1\"\n    {...machine.getItemProps(row)}>\n    <button\n     class=\"bare flex shrink-0 items-center gap-3 bg-transparent text-left\"\n     {...machine.getTriggerProps(row)}\n    ><span\n      class={[\"relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label\", { \"border bg-surface-raised text-muted\": machine.getItemState(row).incomplete, \"border-primary bg-primary text-on-primary\": machine.getItemState(row).current || machine.getItemState(row).completed }]}\n      {...machine.getIndicatorProps(row)}\n     ><span aria-hidden=\"true\" show={machine.getItemState(row).completed}><span class=\"i-lucide-check type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class=\"type-label\">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden=\"true\" class={[\"mx-3 h-1 flex-1\", { \"bg-border\": machine.getItemState(row).completed === false, \"bg-primary\": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>\n   </li>\n  </template>\n </ol>\n</div>\n";
+export { checkmarks_default as default };
+
+//# sourceMappingURL=checkmarks.html.js.map

package/dist/steps/examples/content.html

@@ -10,9 +10,9 @@ const machine = steps({
 
 <div class="w-full" {...machine.getRootProps()}>
  <div class="mb-3 flex items-center justify-between gap-2">
-  <span class="text-sm font-medium text-text">Deploy #4821</span>
+  <span class="type-label">Deploy #4821</span>
   <span
-   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+   class="type-caption text-muted">Step {machine.value + 1} of {machine.count}</span>
  </div>
 
  <ol class="row-list items-start gap-1" {...machine.getListProps()}>
@@ -23,15 +23,15 @@ const machine = steps({
      class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
      {...machine.getTriggerProps(row)}
     ><span
-      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label", { "border bg-surface-raised text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
       {...machine.getIndicatorProps(row)}
-     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="type-label">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
    </li>
   </template>
  </ol>
 
  <div
-  class="mt-3 rounded-md border border-solid border-border bg-surface-raised p-3 text-sm text-text"
+  class="mt-3 rounded-md border bg-surface-raised p-3 type-body"
   {...machine.getContentProps(machine.value)}>{machine.getItemTitle(machine.value)}</div>
 
  <div class="mt-3 flex items-center gap-2">

package/dist/steps/examples/content.html.js

@@ -0,0 +1,5 @@
+// src/steps/examples/content.html
+var content_default = "<script lang=\"ts\">\nimport { steps } from \"../steps.presentation.ts\";\n\nconst machine = steps({\n count: 3,\n titles: [\"Image\", \"Rollout\", \"Health checks\"],\n step: 1,\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n <div class=\"mb-3 flex items-center justify-between gap-2\">\n  <span class=\"type-label\">Deploy #4821</span>\n  <span\n   class=\"type-caption text-muted\">Step {machine.value + 1} of {machine.count}</span>\n </div>\n\n <ol class=\"row-list items-start gap-1\" {...machine.getListProps()}>\n  <template for={machine.getItems()} as={row} key={row}>\n   <li class=\"relative flex min-w-0 items-center not-last:flex-1\"\n    {...machine.getItemProps(row)}>\n    <button\n     class=\"bare flex shrink-0 items-center gap-3 bg-transparent text-left\"\n     {...machine.getTriggerProps(row)}\n    ><span\n      class={[\"relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label\", { \"border bg-surface-raised text-muted\": machine.getItemState(row).incomplete, \"border-primary bg-primary text-on-primary\": machine.getItemState(row).current || machine.getItemState(row).completed }]}\n      {...machine.getIndicatorProps(row)}\n     ><span aria-hidden=\"true\" show={machine.getItemState(row).completed}><span class=\"i-lucide-check type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class=\"type-label\">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden=\"true\" class={[\"mx-3 h-1 flex-1\", { \"bg-border\": machine.getItemState(row).completed === false, \"bg-primary\": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>\n   </li>\n  </template>\n </ol>\n\n <div\n  class=\"mt-3 rounded-md border bg-surface-raised p-3 type-body\"\n  {...machine.getContentProps(machine.value)}>{machine.getItemTitle(machine.value)}</div>\n\n <div class=\"mt-3 flex items-center gap-2\">\n  <button\n   class=\"secondary s-sm disabled:opacity-50\"\n   {...machine.getPrevTriggerProps()}>Back</button>\n  <button\n   class=\"s-sm disabled:opacity-50\"\n   {...machine.getNextTriggerProps()}>Next</button>\n </div>\n</div>\n";
+export { content_default as default };
+
+//# sourceMappingURL=content.html.js.map

package/dist/steps/examples/descriptions.html

@@ -17,9 +17,9 @@ const machine = steps({
      class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
      {...machine.getTriggerProps(row)}
     ><span
-      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label", { "border bg-surface-raised text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
       {...machine.getIndicatorProps(row)}
-     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="flex flex-col"><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span><span class="text-xs text-text-muted" show={row === 0}>Image &amp; tags</span><span class="text-xs text-text-muted" show={row === 1}>Canary &amp; regions</span><span class="text-xs text-text-muted" show={row === 2}>Health &amp; rollback</span></span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="flex flex-col"><span class="type-label">{machine.getItemTitle(row)}</span><span class="type-caption text-muted" show={row === 0}>Image &amp; tags</span><span class="type-caption text-muted" show={row === 1}>Canary &amp; regions</span><span class="type-caption text-muted" show={row === 2}>Health &amp; rollback</span></span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
    </li>
   </template>
  </ol>

package/dist/steps/examples/descriptions.html.js

@@ -0,0 +1,5 @@
+// src/steps/examples/descriptions.html
+var descriptions_default = "<script lang=\"ts\">\nimport { steps } from \"../steps.presentation.ts\";\n\nconst machine = steps({\n count: 3,\n titles: [\"Build\", \"Rollout\", \"Verify\"],\n step: 1,\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n <ol class=\"row-list items-start gap-1\" {...machine.getListProps()}>\n  <template for={machine.getItems()} as={row} key={row}>\n   <li class=\"relative flex min-w-0 items-center not-last:flex-1\"\n    {...machine.getItemProps(row)}>\n    <button\n     class=\"bare flex shrink-0 items-center gap-3 bg-transparent text-left\"\n     {...machine.getTriggerProps(row)}\n    ><span\n      class={[\"relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label\", { \"border bg-surface-raised text-muted\": machine.getItemState(row).incomplete, \"border-primary bg-primary text-on-primary\": machine.getItemState(row).current || machine.getItemState(row).completed }]}\n      {...machine.getIndicatorProps(row)}\n     ><span aria-hidden=\"true\" show={machine.getItemState(row).completed}><span class=\"i-lucide-check type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class=\"flex flex-col\"><span class=\"type-label\">{machine.getItemTitle(row)}</span><span class=\"type-caption text-muted\" show={row === 0}>Image &amp; tags</span><span class=\"type-caption text-muted\" show={row === 1}>Canary &amp; regions</span><span class=\"type-caption text-muted\" show={row === 2}>Health &amp; rollback</span></span></button><span show={row < machine.count - 1} aria-hidden=\"true\" class={[\"mx-3 h-1 flex-1\", { \"bg-border\": machine.getItemState(row).completed === false, \"bg-primary\": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>\n   </li>\n  </template>\n </ol>\n</div>\n";
+export { descriptions_default as default };
+
+//# sourceMappingURL=descriptions.html.js.map

package/dist/steps/examples/icons.html

@@ -17,9 +17,9 @@ const machine = steps({
      class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
      {...machine.getTriggerProps(row)}
     ><span
-      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label", { "border bg-surface-raised text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
       {...machine.getIndicatorProps(row)}
-     ><span class="i-lucide-user text-sm" aria-hidden="true" show={row === 0}></span><span class="i-lucide-settings text-sm" aria-hidden="true" show={row === 1}></span><span class="i-lucide-refresh-cw text-sm" aria-hidden="true" show={row === 2}></span><span class="i-lucide-check text-sm" aria-hidden="true" show={row === 3}></span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+     ><span class="i-lucide-user type-code" aria-hidden="true" show={row === 0}></span><span class="i-lucide-settings type-code" aria-hidden="true" show={row === 1}></span><span class="i-lucide-refresh-cw type-code" aria-hidden="true" show={row === 2}></span><span class="i-lucide-check type-code" aria-hidden="true" show={row === 3}></span></span><span class="type-label">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
    </li>
   </template>
  </ol>

package/dist/steps/examples/icons.html.js

@@ -0,0 +1,5 @@
+// src/steps/examples/icons.html
+var icons_default = "<script lang=\"ts\">\nimport { steps } from \"../steps.presentation.ts\";\n\nconst machine = steps({\n count: 4,\n titles: [\"Profile\", \"Settings\", \"Sync\", \"Complete\"],\n step: 1,\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n <ol class=\"row-list items-start gap-1\" {...machine.getListProps()}>\n  <template for={machine.getItems()} as={row} key={row}>\n   <li class=\"relative flex min-w-0 items-center not-last:flex-1\"\n    {...machine.getItemProps(row)}>\n    <button\n     class=\"bare flex shrink-0 items-center gap-3 bg-transparent text-left\"\n     {...machine.getTriggerProps(row)}\n    ><span\n      class={[\"relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label\", { \"border bg-surface-raised text-muted\": machine.getItemState(row).incomplete, \"border-primary bg-primary text-on-primary\": machine.getItemState(row).current || machine.getItemState(row).completed }]}\n      {...machine.getIndicatorProps(row)}\n     ><span class=\"i-lucide-user type-code\" aria-hidden=\"true\" show={row === 0}></span><span class=\"i-lucide-settings type-code\" aria-hidden=\"true\" show={row === 1}></span><span class=\"i-lucide-refresh-cw type-code\" aria-hidden=\"true\" show={row === 2}></span><span class=\"i-lucide-check type-code\" aria-hidden=\"true\" show={row === 3}></span></span><span class=\"type-label\">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden=\"true\" class={[\"mx-3 h-1 flex-1\", { \"bg-border\": machine.getItemState(row).completed === false, \"bg-primary\": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>\n   </li>\n  </template>\n </ol>\n</div>\n";
+export { icons_default as default };
+
+//# sourceMappingURL=icons.html.js.map

package/dist/steps/examples/lines.html

@@ -17,9 +17,9 @@ const machine = steps({
      class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
      {...machine.getTriggerProps(row)}
     ><span
-      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label", { "border bg-surface-raised text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
       {...machine.getIndicatorProps(row)}
-     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="type-label">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
    </li>
   </template>
  </ol>