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

package/dist/select/select.state.d.ts

@@ -47,5 +47,4 @@ export interface SelectArgs {
 export declare const rowsOf: (raw: unknown) => SelectRow[];
 export declare function initial(args: SelectArgs, authored?: (name: string) => boolean): SelectContext;
 export declare const selectLabel: (ctx: SelectContext) => string;
-export declare const inCollection: (ctx: SelectContext, value: string | null) => value is string;
-//# sourceMappingURL=select.state.d.ts.map
+export declare const inCollection: (ctx: SelectContext, value: string | null) => value is string;

package/dist/select/select.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/select/select.state.ts
 const parseKeys = (raw) => {
 	if (Array.isArray(raw)) return raw.filter((v) => typeof v === "string");

package/dist/select/select.transitions.d.ts

@@ -1,6 +1,6 @@
 import { SelectContext } from "./select.state.js";
 import { SelectEvents } from "./select.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type SelectAssign<K extends keyof SelectEvents = keyof SelectEvents> = AssignFor<SelectContext, SelectEvents, K>;
 declare const setHighlighted: SelectAssign<"HIGHLIGHTED_VALUE.SET" | "ITEM.POINTER_MOVE">;
 declare const clearHighlighted: () => Partial<SelectContext>;
@@ -11,5 +11,4 @@ declare const highlightFirst: (ctx: SelectContext) => Partial<SelectContext>;
 declare const highlightLast: (ctx: SelectContext) => Partial<SelectContext>;
 declare const single: GuardFor<SelectContext, SelectEvents>;
 declare const restoreFocus: GuardFor<SelectContext, SelectEvents>;
-export { type SelectAssign, clearHighlighted, clearValue, highlightFirst, highlightFirstOrSelected, highlightLast, restoreFocus, selectClicked, setHighlighted, single };
-//# sourceMappingURL=select.transitions.d.ts.map
+export { type SelectAssign, clearHighlighted, clearValue, highlightFirst, highlightFirstOrSelected, highlightLast, restoreFocus, selectClicked, setHighlighted, single };

package/dist/shared/keyboard.d.ts

@@ -25,5 +25,4 @@ export type KeyIntent = {
 /** A key → intent table; missing keys are simply not handled. */
 export type KeyTable = Readonly<Record<string, KeyIntent | undefined>>;
 /** Roving keys on both axes with implicit loop wrap (tabs' model). */
-export declare const ROVING_KEYS: KeyTable;
-//# sourceMappingURL=keyboard.d.ts.map
+export declare const ROVING_KEYS: KeyTable;

package/dist/signature-pad/examples/basic.html

@@ -4,10 +4,10 @@ import { signaturePad } from "../signature-pad.presentation.js";
 const machine = signaturePad({});
 </script>
 <div class="w-full" {...machine.getRootProps()}>
-  <label class="block text-sm font-medium text-text"
+  <label class="block"
     {...machine.getLabelProps()}>Sign below</label>
   <div
-    class={["relative h-60 w-full touch-none overflow-hidden rounded-lg border border-solid border-border bg-surface select-none transition-colors duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["relative h-60 w-full touch-none overflow-hidden rounded-lg border bg-surface select-none transition-colors duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getControlProps()}
   >
     <svg {...machine.getSegmentProps()}>
@@ -18,7 +18,7 @@ const machine = signaturePad({});
         {...machine.getSegmentPathProps({ path: machine.currentPath })}></path>
     </svg>
     <span show={machine.empty && !machine.drawing}
-      class="pointer-events-none absolute inset-0 flex items-center justify-center text-sm text-text-muted"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center type-body text-muted"
       {...machine.getGuideProps()}>Sign here</span>
     <button show={!machine.empty && !machine.drawing}
       class="absolute right-2 top-2 ghost icon s-sm transition-colors duration-fast ease-decelerate"

package/dist/signature-pad/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/signature-pad/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { signaturePad } from \"../signature-pad.presentation.ts\";\n\nconst machine = signaturePad({});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <label class=\"block\"\n    {...machine.getLabelProps()}>Sign below</label>\n  <div\n    class={[\"relative h-60 w-full touch-none overflow-hidden rounded-lg border bg-surface select-none transition-colors duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getControlProps()}\n  >\n    <svg {...machine.getSegmentProps()}>\n      <template for={machine.paths} as={row} key={row}>\n        <path {...machine.getSegmentPathProps({ path: row })}></path>\n      </template>\n      <path show={machine.drawing}\n        {...machine.getSegmentPathProps({ path: machine.currentPath })}></path>\n    </svg>\n    <span show={machine.empty && !machine.drawing}\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-center type-body text-muted\"\n      {...machine.getGuideProps()}>Sign here</span>\n    <button show={!machine.empty && !machine.drawing}\n      class=\"absolute right-2 top-2 ghost icon s-sm transition-colors duration-fast ease-decelerate\"\n      {...machine.getClearTriggerProps(\"Clear signature\")}\n    >Clear</button>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/signature-pad/examples/contract.html

@@ -4,17 +4,17 @@ import { signaturePad } from "../signature-pad.presentation.js";
 const machine = signaturePad({});
 </script>
 <div
-  class="mx-auto w-full max-w-md rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-sm"
+  class="mx-auto w-full max-w-md rounded-lg border bg-surface-raised p-4 shadow-sm"
   {...machine.getRootProps()}>
-  <div class="mb-3 border-b border-solid border-border pb-3">
-    <strong class="text-sm text-text">Service Level Agreement</strong>
+  <div class="mb-3 border-b pb-3">
+    <strong>Service Level Agreement</strong>
     <p
-      class="text-xs text-text-muted">By signing below, you accept the enterprise platform terms and uptime guarantees.</p>
+      class="text-muted">By signing below, you accept the enterprise platform terms and uptime guarantees.</p>
   </div>
-  <label class="mb-1 block text-xs font-medium text-text"
+  <label class="mb-1 block"
     {...machine.getLabelProps()}>Authorized Signature</label>
   <div
-    class={["relative h-40 w-full touch-none overflow-hidden rounded-lg border border-solid border-border bg-surface select-none transition-colors duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["relative h-40 w-full touch-none overflow-hidden rounded-lg border bg-surface select-none transition-colors duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getControlProps()}
   >
     <svg {...machine.getSegmentProps()}>
@@ -25,7 +25,7 @@ const machine = signaturePad({});
         {...machine.getSegmentPathProps({ path: machine.currentPath })}></path>
     </svg>
     <span show={machine.empty && !machine.drawing}
-      class="pointer-events-none absolute inset-0 flex items-center justify-center text-xs text-text-muted"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center type-caption text-muted"
       {...machine.getGuideProps()}>Draw signature to execute contract</span>
     <button show={!machine.empty && !machine.drawing}
       class="absolute right-2 top-2 ghost icon s-sm transition-colors duration-fast ease-decelerate"

package/dist/signature-pad/examples/contract.html.js

@@ -0,0 +1,5 @@
+// src/signature-pad/examples/contract.html
+var contract_default = "<script lang=\"ts\">\nimport { signaturePad } from \"../signature-pad.presentation.ts\";\n\nconst machine = signaturePad({});\n<\/script>\n<div\n  class=\"mx-auto w-full max-w-md rounded-lg border bg-surface-raised p-4 shadow-sm\"\n  {...machine.getRootProps()}>\n  <div class=\"mb-3 border-b pb-3\">\n    <strong>Service Level Agreement</strong>\n    <p\n      class=\"text-muted\">By signing below, you accept the enterprise platform terms and uptime guarantees.</p>\n  </div>\n  <label class=\"mb-1 block\"\n    {...machine.getLabelProps()}>Authorized Signature</label>\n  <div\n    class={[\"relative h-40 w-full touch-none overflow-hidden rounded-lg border bg-surface select-none transition-colors duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getControlProps()}\n  >\n    <svg {...machine.getSegmentProps()}>\n      <template for={machine.paths} as={row} key={row}>\n        <path {...machine.getSegmentPathProps({ path: row })}></path>\n      </template>\n      <path show={machine.drawing}\n        {...machine.getSegmentPathProps({ path: machine.currentPath })}></path>\n    </svg>\n    <span show={machine.empty && !machine.drawing}\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-center type-caption text-muted\"\n      {...machine.getGuideProps()}>Draw signature to execute contract</span>\n    <button show={!machine.empty && !machine.drawing}\n      class=\"absolute right-2 top-2 ghost icon s-sm transition-colors duration-fast ease-decelerate\"\n      {...machine.getClearTriggerProps(\"Clear signature\")}\n    >Clear</button>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { contract_default as default };
+
+//# sourceMappingURL=contract.html.js.map

package/dist/signature-pad/examples/receipt.html

@@ -4,21 +4,21 @@ import { signaturePad } from "../signature-pad.presentation.js";
 const machine = signaturePad({});
 </script>
 <div
-  class="mx-auto w-full max-w-sm rounded-lg border border-solid border-border bg-surface-raised p-4 shadow-sm"
+  class="mx-auto w-full max-w-sm rounded-lg border bg-surface-raised p-4 shadow-sm"
   {...machine.getRootProps()}>
   <div
-    class="mb-3 flex items-center justify-between border-b border-solid border-border pb-3">
+    class="mb-3 flex items-center justify-between border-b pb-3">
     <div>
-      <span class="block text-xs text-text-muted">Merchant Receipt #4821</span>
+      <span class="block type-caption text-muted">Merchant Receipt #4821</span>
       <span
-        class="text-sm font-semibold text-text">Cloud Compute — Annual</span>
+        class="type-label">Cloud Compute — Annual</span>
     </div>
-    <span class="font-mono text-md font-semibold text-text">$1,240.00</span>
+    <span class="type-code">$1,240.00</span>
   </div>
-  <label class="mb-1 block text-xs font-medium text-text"
+  <label class="mb-1 block"
     {...machine.getLabelProps()}>Cardholder Signature</label>
   <div
-    class={["relative h-36 w-full touch-none overflow-hidden rounded-lg border border-solid border-border bg-surface select-none transition-colors duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["relative h-36 w-full touch-none overflow-hidden rounded-lg border bg-surface select-none transition-colors duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getControlProps()}
   >
     <svg {...machine.getSegmentProps()}>
@@ -29,7 +29,7 @@ const machine = signaturePad({});
         {...machine.getSegmentPathProps({ path: machine.currentPath })}></path>
     </svg>
     <span show={machine.empty && !machine.drawing}
-      class="pointer-events-none absolute inset-0 flex items-center justify-center text-xs text-text-muted"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center type-caption text-muted"
       {...machine.getGuideProps()}>Sign to authorize payment</span>
     <button show={!machine.empty && !machine.drawing}
       class="absolute right-2 top-2 ghost icon s-sm transition-colors duration-fast ease-decelerate"

package/dist/signature-pad/examples/receipt.html.js

@@ -0,0 +1,5 @@
+// src/signature-pad/examples/receipt.html
+var receipt_default = "<script lang=\"ts\">\nimport { signaturePad } from \"../signature-pad.presentation.ts\";\n\nconst machine = signaturePad({});\n<\/script>\n<div\n  class=\"mx-auto w-full max-w-sm rounded-lg border bg-surface-raised p-4 shadow-sm\"\n  {...machine.getRootProps()}>\n  <div\n    class=\"mb-3 flex items-center justify-between border-b pb-3\">\n    <div>\n      <span class=\"block type-caption text-muted\">Merchant Receipt #4821</span>\n      <span\n        class=\"type-label\">Cloud Compute — Annual</span>\n    </div>\n    <span class=\"type-code\">$1,240.00</span>\n  </div>\n  <label class=\"mb-1 block\"\n    {...machine.getLabelProps()}>Cardholder Signature</label>\n  <div\n    class={[\"relative h-36 w-full touch-none overflow-hidden rounded-lg border bg-surface select-none transition-colors duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getControlProps()}\n  >\n    <svg {...machine.getSegmentProps()}>\n      <template for={machine.paths} as={row} key={row}>\n        <path {...machine.getSegmentPathProps({ path: row })}></path>\n      </template>\n      <path show={machine.drawing}\n        {...machine.getSegmentPathProps({ path: machine.currentPath })}></path>\n    </svg>\n    <span show={machine.empty && !machine.drawing}\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-center type-caption text-muted\"\n      {...machine.getGuideProps()}>Sign to authorize payment</span>\n    <button show={!machine.empty && !machine.drawing}\n      class=\"absolute right-2 top-2 ghost icon s-sm transition-colors duration-fast ease-decelerate\"\n      {...machine.getClearTriggerProps(\"Clear signature\")}\n    >Clear</button>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n";
+export { receipt_default as default };
+
+//# sourceMappingURL=receipt.html.js.map

package/dist/signature-pad/examples/with-preview.html

@@ -4,10 +4,10 @@ import { signaturePad } from "../signature-pad.presentation.js";
 const machine = signaturePad({});
 </script>
 <div class="w-full" {...machine.getRootProps()}>
-  <label class="block text-sm font-medium text-text"
+  <label class="block"
     {...machine.getLabelProps()}>Sign below</label>
   <div
-    class={["relative h-60 w-full touch-none overflow-hidden rounded-lg border border-solid border-border bg-surface select-none transition-colors duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+    class={["relative h-60 w-full touch-none overflow-hidden rounded-lg border bg-surface select-none transition-colors duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
     {...machine.getControlProps()}
   >
     <svg {...machine.getSegmentProps()}>
@@ -18,7 +18,7 @@ const machine = signaturePad({});
         {...machine.getSegmentPathProps({ path: machine.currentPath })}></path>
     </svg>
     <span show={machine.empty && !machine.drawing}
-      class="pointer-events-none absolute inset-0 flex items-center justify-center text-sm text-text-muted"
+      class="pointer-events-none absolute inset-0 flex items-center justify-center type-body text-muted"
       {...machine.getGuideProps()}>Sign here</span>
     <button show={!machine.empty && !machine.drawing}
       class="absolute right-2 top-2 ghost icon s-sm transition-colors duration-fast ease-decelerate"
@@ -28,9 +28,9 @@ const machine = signaturePad({});
   <input {...machine.getHiddenInputProps()} />
 </div>
 
-<div show={!machine.empty} class="mt-4 stack-sm">
-  <strong class="text-sm text-text">Signature Preview</strong>
-  <div class="relative h-24 w-full overflow-hidden rounded-lg border border-solid border-border bg-surface-sunken">
+<div show={!machine.empty} class="mt-4 flex flex-col gap-2">
+  <strong>Signature Preview</strong>
+  <div class="relative h-24 w-full overflow-hidden rounded-lg border bg-surface-sunken">
     <svg {...machine.getPreviewProps()}>
       <template for={machine.paths} as={row} key={row}>
         <path {...machine.getSegmentPathProps({ path: row })}></path>

package/dist/signature-pad/examples/with-preview.html.js

@@ -0,0 +1,5 @@
+// src/signature-pad/examples/with-preview.html
+var with_preview_default = "<script lang=\"ts\">\nimport { signaturePad } from \"../signature-pad.presentation.ts\";\n\nconst machine = signaturePad({});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <label class=\"block\"\n    {...machine.getLabelProps()}>Sign below</label>\n  <div\n    class={[\"relative h-60 w-full touch-none overflow-hidden rounded-lg border bg-surface select-none transition-colors duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getControlProps()}\n  >\n    <svg {...machine.getSegmentProps()}>\n      <template for={machine.paths} as={row} key={row}>\n        <path {...machine.getSegmentPathProps({ path: row })}></path>\n      </template>\n      <path show={machine.drawing}\n        {...machine.getSegmentPathProps({ path: machine.currentPath })}></path>\n    </svg>\n    <span show={machine.empty && !machine.drawing}\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-center type-body text-muted\"\n      {...machine.getGuideProps()}>Sign here</span>\n    <button show={!machine.empty && !machine.drawing}\n      class=\"absolute right-2 top-2 ghost icon s-sm transition-colors duration-fast ease-decelerate\"\n      {...machine.getClearTriggerProps(\"Clear signature\")}\n    >Clear</button>\n  </div>\n  <input {...machine.getHiddenInputProps()} />\n</div>\n\n<div show={!machine.empty} class=\"mt-4 flex flex-col gap-2\">\n  <strong>Signature Preview</strong>\n  <div class=\"relative h-24 w-full overflow-hidden rounded-lg border bg-surface-sunken\">\n    <svg {...machine.getPreviewProps()}>\n      <template for={machine.paths} as={row} key={row}>\n        <path {...machine.getSegmentPathProps({ path: row })}></path>\n      </template>\n    </svg>\n  </div>\n</div>\n";
+export { with_preview_default as default };
+
+//# sourceMappingURL=with-preview.html.js.map

package/dist/signature-pad/signature-pad.events.d.ts

@@ -1,5 +1,5 @@
 import { DrawingTuning, SignaturePoint } from "./signature-pad.state.js";
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface SignaturePadEvents {
   "POINTER_DOWN": {
     point: SignaturePoint;
@@ -22,5 +22,4 @@ export type SignaturePadEvent = EventUnion<SignaturePadEvents>;
 export type SignaturePadDrawDetails = {
   readonly paths: string[];
   readonly currentPath: string | null;
-};
-//# sourceMappingURL=signature-pad.events.d.ts.map
+};

package/dist/signature-pad/signature-pad.machine.d.ts

@@ -1,7 +1,7 @@
+/** Signature-pad machine: idle/drawing over two states. */
 import { DrawingTuning, SignaturePadArgs, SignaturePadContext, SignaturePadState, SignaturePoint, defaultTuning, initial, isEmpty, isInteractive, pathsOf, strokePath, svgPathFromStroke, tuningOf } from "./signature-pad.state.js";
 import { SignaturePadDrawDetails, SignaturePadEvents } from "./signature-pad.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-import { defaultTwin } from "@spinjs/runtime";
+import { Machine } from "@spinjs/components/fsm";
+import { defaultTwin } from "@spinjs/components/runtime";
 export declare function signaturePad(args?: SignaturePadArgs, authored?: (name: string) => boolean): Machine<SignaturePadContext, SignaturePadEvents, SignaturePadState>;
-export { DrawingTuning, SignaturePadArgs, SignaturePadContext, type SignaturePadDrawDetails, type SignaturePadEvents, SignaturePadState, SignaturePoint, defaultTuning, defaultTwin, initial, isEmpty, isInteractive, pathsOf, strokePath, svgPathFromStroke, tuningOf };
-//# sourceMappingURL=signature-pad.machine.d.ts.map
+export { DrawingTuning, SignaturePadArgs, SignaturePadContext, type SignaturePadDrawDetails, type SignaturePadEvents, SignaturePadState, SignaturePoint, defaultTuning, defaultTwin, initial, isEmpty, isInteractive, pathsOf, strokePath, svgPathFromStroke, tuningOf };

package/dist/signature-pad/signature-pad.machine.js

@@ -1,7 +1,7 @@
 import { defaultTuning, initial, isEmpty, isInteractive, pathsOf, strokePath, svgPathFromStroke, tuningOf } from "./signature-pad.state.js";
 import { clear, pointerDown, pointerMove, pointerUp, setPaths, setTuning } from "./signature-pad.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
-import { defaultTwin } from "@spinjs/runtime";
+import { createMachine } from "@spinjs/components/fsm";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/signature-pad/signature-pad.machine.ts
 /** Signature-pad machine: idle/drawing over two states. */
 function signaturePad(args = {}, authored = () => false) {

package/dist/signature-pad/signature-pad.presentation.d.ts

@@ -1,14 +1,14 @@
 import { SignaturePadArgs, SignaturePadContext, SignaturePadState } from "./signature-pad.state.js";
 import { SignaturePadDrawDetails, SignaturePadEvents } from "./signature-pad.events.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
-import { DragDelta, DragPress } from "@spinjs/runtime/actions";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
+import { DragDelta, DragPress } from "@spinjs/components/actions";
 export interface SegmentSlotProps {
   readonly path: string;
 }
 type ScopeLike = ViewFor<SignaturePadContext, SignaturePadEvents, SignaturePadState>;
 export declare const def: {
   name: string;
-  machine: (args: SignaturePadArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<SignaturePadContext, SignaturePadEvents, SignaturePadState>;
+  machine: (args: SignaturePadArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<SignaturePadContext, SignaturePadEvents, SignaturePadState>;
   start: "idle";
   reconcile: ({ context, send }: {
     readonly context: SignaturePadContext;
@@ -21,13 +21,13 @@ export declare const def: {
   }) => boolean;
   parts: {
     root: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>) => {
         dir: "ltr" | "rtl";
         "data-disabled": string | undefined;
       };
     };
     label: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>) => {
         dir: "ltr" | "rtl";
         "data-disabled": string | undefined;
         for: string;
@@ -35,7 +35,7 @@ export declare const def: {
       };
     };
     control: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>) => {
         tabindex: string | undefined;
         "data-disabled": string | undefined;
         style: {
@@ -85,12 +85,12 @@ export declare const def: {
       };
     };
     segmentPath: {
-      attrs: (_scope: import("@spinjs/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>, _arg: unknown) => {
+      attrs: (_scope: import("@spinjs/components/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>, _arg: unknown) => {
         d: string;
       };
     };
     guide: {
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, SignaturePadContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<SignaturePadEvents>, SignaturePadState>) => {
         dir: "ltr" | "rtl";
         "data-disabled": string | undefined;
       };
@@ -179,6 +179,5 @@ export declare const def: {
   };
 };
 export type SignaturePadApi = ApiOf<typeof def>;
-export declare const signaturePad: import("@spinjs/runtime").DefinedComponent<SignaturePadApi, SignaturePadArgs>;
-export type { SignaturePadDrawDetails };
-//# sourceMappingURL=signature-pad.presentation.d.ts.map
+export declare const signaturePad: import("@spinjs/components/runtime").DefinedComponent<SignaturePadApi, SignaturePadArgs>;
+export type { SignaturePadDrawDetails };

package/dist/signature-pad/signature-pad.presentation.js

@@ -1,6 +1,6 @@
-import { isEmpty, isInteractive as isInteractive$1, tuningOf } from "./signature-pad.state.js";
 import { signaturePad as signaturePad$1 } from "./signature-pad.machine.js";
-import { ariaDisabled, ariaRoleDescription, dataAttr, defineComponent, focuser, isRecord } from "@spinjs/runtime";
+import { isEmpty, isInteractive as isInteractive$1, tuningOf } from "./signature-pad.state.js";
+import { ariaDisabled, ariaRoleDescription, dataAttr, defineComponent, focuser, isRecord } from "@spinjs/components/runtime";
 // src/signature-pad/signature-pad.presentation.ts
 const controlPoint = (scope, clientX, clientY) => {
 	const rect = scope.measure("control");

package/dist/signature-pad/signature-pad.state.d.ts

@@ -36,5 +36,4 @@ export declare function svgPathFromStroke(points: readonly (readonly number[])[]
 export declare function strokePath(points: readonly SignaturePoint[], tuning: DrawingTuning): string;
 export declare function isInteractive(ctx: SignaturePadContext): boolean;
 export declare function isEmpty(ctx: SignaturePadContext): boolean;
-export declare function initial(args: SignaturePadArgs, authored: (name: string) => boolean): SignaturePadContext;
-//# sourceMappingURL=signature-pad.state.d.ts.map
+export declare function initial(args: SignaturePadArgs, authored: (name: string) => boolean): SignaturePadContext;

package/dist/signature-pad/signature-pad.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 import { getStroke } from "perfect-freehand";
 // src/signature-pad/signature-pad.state.ts
 const defaultTuning = {

package/dist/signature-pad/signature-pad.transitions.d.ts

@@ -1,6 +1,6 @@
-import { SignaturePadContext } from "./signature-pad.state.js";
 import { SignaturePadEvents } from "./signature-pad.events.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { SignaturePadContext } from "./signature-pad.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
 type SignaturePadAssign<K extends keyof SignaturePadEvents = keyof SignaturePadEvents> = AssignFor<SignaturePadContext, SignaturePadEvents, K>;
 export declare const clear: SignaturePadAssign<"CLEAR">;
 export declare const setPaths: SignaturePadAssign<"SET_PATHS">;
@@ -8,5 +8,4 @@ export declare const setTuning: SignaturePadAssign<"SET_TUNING">;
 export declare const pointerDown: SignaturePadAssign<"POINTER_DOWN">;
 export declare const pointerMove: SignaturePadAssign<"POINTER_MOVE">;
 export declare const pointerUp: SignaturePadAssign<"POINTER_UP">;
-export {};
-//# sourceMappingURL=signature-pad.transitions.d.ts.map
+export {};

package/dist/slider/examples/basic.html

@@ -6,7 +6,7 @@ const machine = slider({ value: [50] });
 
 <div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
   <div
-    class={["mb-4 text-sm text-text-muted", { "text-primary": machine.state === "focus" }]}
+    class={["mb-4 type-code text-muted", { "text-primary": machine.state === "focus" }]}
     {...machine.getValueTextProps()}>{machine.valueText}</div>
   <div
     class="relative flex h-4 w-full touch-none items-center select-none"

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

@@ -0,0 +1,5 @@
+// src/slider/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { slider } from \"../slider.presentation.ts\";\n\nconst machine = slider({ value: [50] });\n<\/script>\n\n<div class=\"mx-auto w-full max-w-md\" {...machine.getRootProps()}>\n  <div\n    class={[\"mb-4 type-code text-muted\", { \"text-primary\": machine.state === \"focus\" }]}\n    {...machine.getValueTextProps()}>{machine.valueText}</div>\n  <div\n    class=\"relative flex h-4 w-full touch-none items-center select-none\"\n    {...machine.getControlProps()}\n  >\n    <div\n      class=\"relative h-2 w-full overflow-hidden rounded-full bg-surface-sunken\"\n      {...machine.getTrackProps()}\n    >\n      <div\n        class=\"absolute inset-y-0 rounded-full bg-primary\"\n        {...machine.getRangeProps()}\n      ></div>\n    </div>\n    <template for={machine.getThumbIndexes()} as={row} key={row}>\n      <span\n        class={[\"bare absolute top-1/2 -mt-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\", { \"ring-2 ring-border-strong\": machine.state === \"focus\" && machine.focusedIndex === row, \"scale-110\": machine.state === \"dragging\" && machine.focusedIndex === row, \"opacity-50\": machine.disabled }]}\n        {...machine.getThumbProps(row)}\n      ></span>\n      <input {...machine.getHiddenInputProps(row)} />\n    </template>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/slider/examples/equalizer.html

@@ -9,14 +9,14 @@ const air = slider({ value: [80], orientation: "vertical" });
 </script>
 
 <div
-  class="mx-auto w-full max-w-md rounded-lg border border-solid border-border bg-surface-raised p-4">
+  class="mx-auto w-full max-w-md rounded-lg border bg-surface-raised p-4">
   <div class="mb-3 flex items-center justify-between">
-    <span class="text-sm font-semibold text-text">5-Band Equalizer</span>
-    <span class="text-xs text-text-muted">Studio Preset</span>
+    <span class="type-label">5-Band Equalizer</span>
+    <span class="type-caption text-muted">Studio Preset</span>
   </div>
   <div class="grid grid-cols-5 gap-4">
     <div class="flex flex-col items-center gap-2" {...sub.getRootProps()}>
-      <span class="font-mono text-xs text-text-muted">{sub.getThumbValue(0)}</span>
+      <span class="type-code text-muted">{sub.getThumbValue(0)}</span>
       <div
         class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
         {...sub.getControlProps()}>
@@ -33,10 +33,10 @@ const air = slider({ value: [80], orientation: "vertical" });
           <input {...sub.getHiddenInputProps(row)} />
         </template>
       </div>
-      <span class="text-xs text-text-muted" {...sub.getLabelProps()}>60Hz</span>
+      <span class="text-muted" {...sub.getLabelProps()}>60Hz</span>
     </div>
     <div class="flex flex-col items-center gap-2" {...low.getRootProps()}>
-      <span class="font-mono text-xs text-text-muted">{low.getThumbValue(0)}</span>
+      <span class="type-code text-muted">{low.getThumbValue(0)}</span>
       <div
         class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
         {...low.getControlProps()}>
@@ -53,10 +53,10 @@ const air = slider({ value: [80], orientation: "vertical" });
           <input {...low.getHiddenInputProps(row)} />
         </template>
       </div>
-      <span class="text-xs text-text-muted" {...low.getLabelProps()}>250Hz</span>
+      <span class="text-muted" {...low.getLabelProps()}>250Hz</span>
     </div>
     <div class="flex flex-col items-center gap-2" {...mid.getRootProps()}>
-      <span class="font-mono text-xs text-text-muted">{mid.getThumbValue(0)}</span>
+      <span class="type-code text-muted">{mid.getThumbValue(0)}</span>
       <div
         class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
         {...mid.getControlProps()}>
@@ -73,10 +73,10 @@ const air = slider({ value: [80], orientation: "vertical" });
           <input {...mid.getHiddenInputProps(row)} />
         </template>
       </div>
-      <span class="text-xs text-text-muted" {...mid.getLabelProps()}>1kHz</span>
+      <span class="text-muted" {...mid.getLabelProps()}>1kHz</span>
     </div>
     <div class="flex flex-col items-center gap-2" {...high.getRootProps()}>
-      <span class="font-mono text-xs text-text-muted">{high.getThumbValue(0)}</span>
+      <span class="type-code text-muted">{high.getThumbValue(0)}</span>
       <div
         class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
         {...high.getControlProps()}>
@@ -93,10 +93,10 @@ const air = slider({ value: [80], orientation: "vertical" });
           <input {...high.getHiddenInputProps(row)} />
         </template>
       </div>
-      <span class="text-xs text-text-muted" {...high.getLabelProps()}>4kHz</span>
+      <span class="text-muted" {...high.getLabelProps()}>4kHz</span>
     </div>
     <div class="flex flex-col items-center gap-2" {...air.getRootProps()}>
-      <span class="font-mono text-xs text-text-muted">{air.getThumbValue(0)}</span>
+      <span class="type-code text-muted">{air.getThumbValue(0)}</span>
       <div
         class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
         {...air.getControlProps()}>
@@ -113,7 +113,7 @@ const air = slider({ value: [80], orientation: "vertical" });
           <input {...air.getHiddenInputProps(row)} />
         </template>
       </div>
-      <span class="text-xs text-text-muted" {...air.getLabelProps()}>16kHz</span>
+      <span class="text-muted" {...air.getLabelProps()}>16kHz</span>
     </div>
   </div>
 </div>

package/dist/slider/examples/equalizer.html.js

@@ -0,0 +1,5 @@
+// src/slider/examples/equalizer.html
+var equalizer_default = "<script lang=\"ts\">\nimport { slider } from \"../slider.presentation.ts\";\n\nconst sub = slider({ value: [70], orientation: \"vertical\" });\nconst low = slider({ value: [55], orientation: \"vertical\" });\nconst mid = slider({ value: [45], orientation: \"vertical\" });\nconst high = slider({ value: [65], orientation: \"vertical\" });\nconst air = slider({ value: [80], orientation: \"vertical\" });\n<\/script>\n\n<div\n  class=\"mx-auto w-full max-w-md rounded-lg border bg-surface-raised p-4\">\n  <div class=\"mb-3 flex items-center justify-between\">\n    <span class=\"type-label\">5-Band Equalizer</span>\n    <span class=\"type-caption text-muted\">Studio Preset</span>\n  </div>\n  <div class=\"grid grid-cols-5 gap-4\">\n    <div class=\"flex flex-col items-center gap-2\" {...sub.getRootProps()}>\n      <span class=\"type-code text-muted\">{sub.getThumbValue(0)}</span>\n      <div\n        class=\"relative flex h-36 w-4 touch-none flex-col items-center select-none\"\n        {...sub.getControlProps()}>\n        <div\n          class=\"relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken\"\n          {...sub.getTrackProps()}>\n          <div class=\"absolute inset-x-0 rounded-full bg-primary\"\n            {...sub.getRangeProps()}></div>\n        </div>\n        <template for={sub.getThumbIndexes()} as={row} key={row}>\n          <span\n            class=\"absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\"\n            {...sub.getThumbProps(row)}></span>\n          <input {...sub.getHiddenInputProps(row)} />\n        </template>\n      </div>\n      <span class=\"text-muted\" {...sub.getLabelProps()}>60Hz</span>\n    </div>\n    <div class=\"flex flex-col items-center gap-2\" {...low.getRootProps()}>\n      <span class=\"type-code text-muted\">{low.getThumbValue(0)}</span>\n      <div\n        class=\"relative flex h-36 w-4 touch-none flex-col items-center select-none\"\n        {...low.getControlProps()}>\n        <div\n          class=\"relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken\"\n          {...low.getTrackProps()}>\n          <div class=\"absolute inset-x-0 rounded-full bg-primary\"\n            {...low.getRangeProps()}></div>\n        </div>\n        <template for={low.getThumbIndexes()} as={row} key={row}>\n          <span\n            class=\"absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\"\n            {...low.getThumbProps(row)}></span>\n          <input {...low.getHiddenInputProps(row)} />\n        </template>\n      </div>\n      <span class=\"text-muted\" {...low.getLabelProps()}>250Hz</span>\n    </div>\n    <div class=\"flex flex-col items-center gap-2\" {...mid.getRootProps()}>\n      <span class=\"type-code text-muted\">{mid.getThumbValue(0)}</span>\n      <div\n        class=\"relative flex h-36 w-4 touch-none flex-col items-center select-none\"\n        {...mid.getControlProps()}>\n        <div\n          class=\"relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken\"\n          {...mid.getTrackProps()}>\n          <div class=\"absolute inset-x-0 rounded-full bg-primary\"\n            {...mid.getRangeProps()}></div>\n        </div>\n        <template for={mid.getThumbIndexes()} as={row} key={row}>\n          <span\n            class=\"absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\"\n            {...mid.getThumbProps(row)}></span>\n          <input {...mid.getHiddenInputProps(row)} />\n        </template>\n      </div>\n      <span class=\"text-muted\" {...mid.getLabelProps()}>1kHz</span>\n    </div>\n    <div class=\"flex flex-col items-center gap-2\" {...high.getRootProps()}>\n      <span class=\"type-code text-muted\">{high.getThumbValue(0)}</span>\n      <div\n        class=\"relative flex h-36 w-4 touch-none flex-col items-center select-none\"\n        {...high.getControlProps()}>\n        <div\n          class=\"relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken\"\n          {...high.getTrackProps()}>\n          <div class=\"absolute inset-x-0 rounded-full bg-primary\"\n            {...high.getRangeProps()}></div>\n        </div>\n        <template for={high.getThumbIndexes()} as={row} key={row}>\n          <span\n            class=\"absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\"\n            {...high.getThumbProps(row)}></span>\n          <input {...high.getHiddenInputProps(row)} />\n        </template>\n      </div>\n      <span class=\"text-muted\" {...high.getLabelProps()}>4kHz</span>\n    </div>\n    <div class=\"flex flex-col items-center gap-2\" {...air.getRootProps()}>\n      <span class=\"type-code text-muted\">{air.getThumbValue(0)}</span>\n      <div\n        class=\"relative flex h-36 w-4 touch-none flex-col items-center select-none\"\n        {...air.getControlProps()}>\n        <div\n          class=\"relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken\"\n          {...air.getTrackProps()}>\n          <div class=\"absolute inset-x-0 rounded-full bg-primary\"\n            {...air.getRangeProps()}></div>\n        </div>\n        <template for={air.getThumbIndexes()} as={row} key={row}>\n          <span\n            class=\"absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\"\n            {...air.getThumbProps(row)}></span>\n          <input {...air.getHiddenInputProps(row)} />\n        </template>\n      </div>\n      <span class=\"text-muted\" {...air.getLabelProps()}>16kHz</span>\n    </div>\n  </div>\n</div>\n";
+export { equalizer_default as default };
+
+//# sourceMappingURL=equalizer.html.js.map

package/dist/slider/examples/fractional.html.js

@@ -0,0 +1,5 @@
+// src/slider/examples/fractional.html
+var fractional_default = "<script lang=\"ts\">\nimport { slider } from \"../slider.presentation.ts\";\n\nconst machine = slider({ value: [7.5], min: 5, max: 10, step: 0.01 });\n<\/script>\n\n<include file=\"./basic.html\" />\n";
+export { fractional_default as default };
+
+//# sourceMappingURL=fractional.html.js.map

package/dist/slider/examples/marks.html

@@ -5,7 +5,7 @@ const machine = slider({ value: [50], markers: [0, 25, 50, 75, 100] });
 </script>
 
 <div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
-  <div class="mb-4 text-sm text-text-muted"
+  <div class="mb-4 type-code text-muted"
     {...machine.getValueTextProps()}>{machine.valueText}</div>
   <div
     class="relative flex h-4 w-full touch-none items-center select-none"
@@ -31,7 +31,7 @@ const machine = slider({ value: [50], markers: [0, 25, 50, 75, 100] });
   <div class="relative mt-2 h-8" {...machine.getMarkerGroupProps()}>
     <template for={machine.getMarkers()} as={row} key={row}>
       <span
-        class="absolute top-0 flex w-0 justify-center pt-4 text-xs text-text-muted"
+        class="absolute top-0 flex w-0 justify-center pt-4 type-caption text-muted"
         {...machine.getMarkerProps(row)}
       >
         <span class={["absolute left-1/2 top-0 ml-0 h-1 w-1 rounded-full bg-border-strong", { "bg-primary": row < (machine.value[0] ?? 0) }]} aria-hidden="true"></span>

package/dist/slider/examples/marks.html.js

@@ -0,0 +1,5 @@
+// src/slider/examples/marks.html
+var marks_default = "<script lang=\"ts\">\nimport { slider } from \"../slider.presentation.ts\";\n\nconst machine = slider({ value: [50], markers: [0, 25, 50, 75, 100] });\n<\/script>\n\n<div class=\"mx-auto w-full max-w-md\" {...machine.getRootProps()}>\n  <div class=\"mb-4 type-code text-muted\"\n    {...machine.getValueTextProps()}>{machine.valueText}</div>\n  <div\n    class=\"relative flex h-4 w-full touch-none items-center select-none\"\n    {...machine.getControlProps()}\n  >\n    <div\n      class=\"relative h-2 w-full overflow-hidden rounded-full bg-surface-sunken\"\n      {...machine.getTrackProps()}\n    >\n      <div\n        class=\"absolute inset-y-0 rounded-full bg-primary\"\n        {...machine.getRangeProps()}\n      ></div>\n    </div>\n    <template for={machine.getThumbIndexes()} as={row} key={row}>\n      <span\n        class={[\"bare absolute top-1/2 -mt-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\", { \"ring-2 ring-border-strong\": machine.state === \"focus\" && machine.focusedIndex === row, \"scale-110\": machine.state === \"dragging\" && machine.focusedIndex === row, \"opacity-50\": machine.disabled }]}\n        {...machine.getThumbProps(row)}\n      ></span>\n      <input {...machine.getHiddenInputProps(row)} />\n    </template>\n  </div>\n  <div class=\"relative mt-2 h-8\" {...machine.getMarkerGroupProps()}>\n    <template for={machine.getMarkers()} as={row} key={row}>\n      <span\n        class=\"absolute top-0 flex w-0 justify-center pt-4 type-caption text-muted\"\n        {...machine.getMarkerProps(row)}\n      >\n        <span class={[\"absolute left-1/2 top-0 ml-0 h-1 w-1 rounded-full bg-border-strong\", { \"bg-primary\": row < (machine.value[0] ?? 0) }]} aria-hidden=\"true\"></span>\n        {row}\n      </span>\n    </template>\n  </div>\n</div>\n";
+export { marks_default as default };
+
+//# sourceMappingURL=marks.html.js.map

package/dist/slider/examples/range.html

@@ -5,7 +5,7 @@ const machine = slider({ value: [20, 80] });
 </script>
 
 <div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
-  <div class="mb-4 text-sm text-text-muted"
+  <div class="mb-4 type-code text-muted"
     {...machine.getValueTextProps()}>{machine.getThumbValue(0)} - {machine.getThumbValue(1)}</div>
   <div
     class="relative flex h-4 w-full touch-none items-center select-none"

package/dist/slider/examples/range.html.js

@@ -0,0 +1,5 @@
+// src/slider/examples/range.html
+var range_default = "<script lang=\"ts\">\nimport { slider } from \"../slider.presentation.ts\";\n\nconst machine = slider({ value: [20, 80] });\n<\/script>\n\n<div class=\"mx-auto w-full max-w-md\" {...machine.getRootProps()}>\n  <div class=\"mb-4 type-code text-muted\"\n    {...machine.getValueTextProps()}>{machine.getThumbValue(0)} - {machine.getThumbValue(1)}</div>\n  <div\n    class=\"relative flex h-4 w-full touch-none items-center select-none\"\n    {...machine.getControlProps()}\n  >\n    <div\n      class=\"relative h-2 w-full overflow-hidden rounded-full bg-surface-sunken\"\n      {...machine.getTrackProps()}\n    >\n      <div\n        class=\"absolute inset-y-0 rounded-full bg-primary\"\n        {...machine.getRangeProps()}\n      ></div>\n    </div>\n    <template for={machine.getThumbIndexes()} as={row} key={row}>\n      <span\n        class={[\"bare absolute top-1/2 -mt-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\", { \"ring-2 ring-border-strong\": machine.state === \"focus\" && machine.focusedIndex === row, \"scale-110\": machine.state === \"dragging\" && machine.focusedIndex === row, \"opacity-50\": machine.disabled }]}\n        {...machine.getThumbProps(row)}\n      ></span>\n      <input {...machine.getHiddenInputProps(row)} />\n    </template>\n  </div>\n</div>\n";
+export { range_default as default };
+
+//# sourceMappingURL=range.html.js.map

package/dist/slider/examples/stepped.html.js

@@ -0,0 +1,5 @@
+// src/slider/examples/stepped.html
+var stepped_default = "<script lang=\"ts\">\nimport { slider } from \"../slider.presentation.ts\";\n\nconst machine = slider({ value: [50], step: 5 });\n<\/script>\n\n<include file=\"./basic.html\" />\n";
+export { stepped_default as default };
+
+//# sourceMappingURL=stepped.html.js.map

package/dist/slider/examples/ticks.html

@@ -30,7 +30,7 @@ const machine = slider({
 </script>
 
 <div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
-  <div class="mb-4 text-sm text-text-muted"
+  <div class="mb-4 type-code text-muted"
     {...machine.getValueTextProps()}>{machine.valueText}</div>
   <div
     class="relative flex h-4 w-full touch-none items-center select-none"
@@ -56,7 +56,7 @@ const machine = slider({
   <div class="relative mt-2 h-8" {...machine.getMarkerGroupProps()}>
     <template for={machine.getMarkers()} as={row} key={row}>
       <span
-        class="absolute top-0 flex w-0 justify-center pt-4 text-xs text-text-muted"
+        class="absolute top-0 flex w-0 justify-center pt-4 type-caption text-muted"
         {...machine.getMarkerProps(row)}
       >
         <span

package/dist/slider/examples/ticks.html.js

@@ -0,0 +1,5 @@
+// src/slider/examples/ticks.html
+var ticks_default = "<script lang=\"ts\">\nimport { slider } from \"../slider.presentation.ts\";\n\nconst machine = slider({\n  value: [50],\n  markers: [\n    0,\n    5,\n    10,\n    15,\n    20,\n    25,\n    30,\n    35,\n    40,\n    45,\n    50,\n    55,\n    60,\n    65,\n    70,\n    75,\n    80,\n    85,\n    90,\n    95,\n    100,\n  ],\n});\n<\/script>\n\n<div class=\"mx-auto w-full max-w-md\" {...machine.getRootProps()}>\n  <div class=\"mb-4 type-code text-muted\"\n    {...machine.getValueTextProps()}>{machine.valueText}</div>\n  <div\n    class=\"relative flex h-4 w-full touch-none items-center select-none\"\n    {...machine.getControlProps()}\n  >\n    <div\n      class=\"relative h-2 w-full overflow-hidden rounded-full bg-surface-sunken\"\n      {...machine.getTrackProps()}\n    >\n      <div\n        class=\"absolute inset-y-0 rounded-full bg-primary\"\n        {...machine.getRangeProps()}\n      ></div>\n    </div>\n    <template for={machine.getThumbIndexes()} as={row} key={row}>\n      <span\n        class={[\"bare absolute top-1/2 -mt-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\", { \"ring-2 ring-border-strong\": machine.state === \"focus\" && machine.focusedIndex === row, \"scale-110\": machine.state === \"dragging\" && machine.focusedIndex === row, \"opacity-50\": machine.disabled }]}\n        {...machine.getThumbProps(row)}\n      ></span>\n      <input {...machine.getHiddenInputProps(row)} />\n    </template>\n  </div>\n  <div class=\"relative mt-2 h-8\" {...machine.getMarkerGroupProps()}>\n    <template for={machine.getMarkers()} as={row} key={row}>\n      <span\n        class=\"absolute top-0 flex w-0 justify-center pt-4 type-caption text-muted\"\n        {...machine.getMarkerProps(row)}\n      >\n        <span\n          class={[\"absolute left-1/2 top-0 ml-0 h-2 w-[1px] bg-border-strong\", { \"bg-primary\": row < (machine.value[0] ?? 0) }]}\n          aria-hidden=\"true\" show={row % 10 === 0}></span>\n        <span\n          class={[\"absolute left-1/2 top-0 ml-0 h-1 w-[1px] bg-border-strong\", { \"bg-primary\": row < (machine.value[0] ?? 0) }]}\n          aria-hidden=\"true\" show={row % 10 !== 0}></span>\n        <span show={row % 10 === 0}>{row}</span>\n      </span>\n    </template>\n  </div>\n</div>\n";
+export { ticks_default as default };
+
+//# sourceMappingURL=ticks.html.js.map

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

@@ -0,0 +1,5 @@
+// src/slider/examples/vertical.html
+var vertical_default = "<script lang=\"ts\">\nimport { slider } from \"../slider.presentation.ts\";\n\nconst machine = slider({ value: [50], orientation: \"vertical\" });\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md justify-center\"\n  {...machine.getRootProps()}>\n  <div\n    class=\"relative flex h-[16rem] w-4 touch-none flex-col items-center select-none\"\n    {...machine.getControlProps()}\n  >\n    <div\n      class=\"relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken\"\n      {...machine.getTrackProps()}\n    >\n      <div\n        class=\"absolute inset-x-0 rounded-full bg-primary\"\n        {...machine.getRangeProps()}\n      ></div>\n    </div>\n    <template for={machine.getThumbIndexes()} as={row} key={row}>\n      <span\n        class={[\"absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface\", { \"ring-2 ring-border-strong\": machine.state === \"focus\" && machine.focusedIndex === row, \"scale-110\": machine.state === \"dragging\" && machine.focusedIndex === row, \"opacity-50\": machine.disabled }]}\n        {...machine.getThumbProps(row)}\n      ></span>\n      <input {...machine.getHiddenInputProps(row)} />\n    </template>\n  </div>\n</div>\n";
+export { vertical_default as default };
+
+//# sourceMappingURL=vertical.html.js.map

package/dist/slider/slider.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface SliderEvents {
   "SET_VALUE": {
     value: readonly number[];
@@ -46,5 +46,4 @@ export type SliderFocusChange = {
 };
 export type SliderValueChangeEnd = {
   readonly value: number[];
-};
-//# sourceMappingURL=slider.events.d.ts.map
+};