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

package/dist/navigation-menu/navigation-menu.machine.js

@@ -1,6 +1,6 @@
 import { initial, parseItems } from "./navigation-menu.state.js";
 import { closeAll, openItem, setValue, swapItem, toggleOpen } from "./navigation-menu.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/navigation-menu/navigation-menu.machine.ts
 /** Navigation-menu machine: the closed and open modes. */
 function navigationMenu(args = {}, authored) {

package/dist/navigation-menu/navigation-menu.presentation.d.ts

@@ -1,13 +1,13 @@
 import { NavItemRecord, NavigationMenuArgs, NavigationMenuContext, NavigationMenuState } from "./navigation-menu.state.js";
 import { NavigationMenuEvents, NavigationMenuValueChange } from "./navigation-menu.events.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
 type ScopeLike = ViewFor<NavigationMenuContext, NavigationMenuEvents, NavigationMenuState>;
 type ItemScope = ScopeLike & {
   readonly slot: NavItemRecord;
 };
 export declare const def: {
   name: string;
-  machine: (args: NavigationMenuArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<NavigationMenuContext, NavigationMenuEvents, NavigationMenuState>;
+  machine: (args: NavigationMenuArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<NavigationMenuContext, NavigationMenuEvents, NavigationMenuState>;
   args: (props: Record<string, unknown>) => NavigationMenuArgs;
   start: (props: Record<string, unknown>, authored: (name: string) => boolean) => NavigationMenuState;
   parts: {
@@ -109,7 +109,7 @@ export declare const def: {
     };
   };
   settled: ({ after, event, focus, root }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: NavigationMenuContext;
       readonly state: NavigationMenuState;
@@ -123,10 +123,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 NavigationMenuApi = ApiOf<typeof def>;
-export declare const navigationMenu: import("@spinjs/runtime").DefinedComponent<NavigationMenuApi, NavigationMenuArgs>;
-export type { NavItemRecord, NavigationMenuArgs, NavigationMenuState, NavigationMenuValueChange };
-//# sourceMappingURL=navigation-menu.presentation.d.ts.map
+export declare const navigationMenu: import("@spinjs/components/runtime").DefinedComponent<NavigationMenuApi, NavigationMenuArgs>;
+export type { NavItemRecord, NavigationMenuArgs, NavigationMenuState, NavigationMenuValueChange };

package/dist/navigation-menu/navigation-menu.presentation.js

@@ -1,6 +1,6 @@
-import { startState } from "./navigation-menu.state.js";
 import { navigationMenu as navigationMenu$1 } from "./navigation-menu.machine.js";
-import { defineComponent, disclosureTrigger, resolveTwins } from "@spinjs/runtime";
+import { startState } from "./navigation-menu.state.js";
+import { defineComponent, disclosureTrigger, resolveTwins } from "@spinjs/components/runtime";
 // src/navigation-menu/navigation-menu.presentation.ts
 function neighbor(items, value, step) {
 	const at = items.findIndex((item) => item.value === value);

package/dist/navigation-menu/navigation-menu.state.d.ts

@@ -29,5 +29,4 @@ export declare const asText: (raw: unknown) => string | null;
  * parses exactly like the seed. */
 export declare function parseItems(raw: unknown): NavItemRecord[];
 export declare function initial(args: NavigationMenuArgs | undefined, authored: (name: string) => boolean): NavigationMenuContext;
-export declare function startState(args?: NavigationMenuArgs): NavigationMenuState;
-//# sourceMappingURL=navigation-menu.state.d.ts.map
+export declare function startState(args?: NavigationMenuArgs): NavigationMenuState;

package/dist/navigation-menu/navigation-menu.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/navigation-menu/navigation-menu.state.ts
 const asText = (raw) => typeof raw === "string" ? raw : null;
 /** Shape raw items into rows, dropping entries without a usable value or

package/dist/navigation-menu/navigation-menu.transitions.d.ts

@@ -1,11 +1,10 @@
-import { NavigationMenuContext } from "./navigation-menu.state.js";
 import { NavigationMenuEvents } from "./navigation-menu.events.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { NavigationMenuContext } from "./navigation-menu.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
 type NavigationMenuAssign<K extends keyof NavigationMenuEvents = keyof NavigationMenuEvents> = AssignFor<NavigationMenuContext, NavigationMenuEvents, K>;
 export declare const toggleOpen: NavigationMenuAssign<"ITEM.TOGGLE">;
 export declare const closeAll: NavigationMenuAssign<"CLOSE">;
 export declare const setValue: NavigationMenuAssign<"VALUE.SET">;
 export declare const openItem: NavigationMenuAssign<"ITEM.ENTER">;
 export declare const swapItem: NavigationMenuAssign<"ITEM.ENTER">;
-export {};
-//# sourceMappingURL=navigation-menu.transitions.d.ts.map
+export {};

package/dist/number-input/examples/basic.html

@@ -12,10 +12,10 @@ const machine = numberInput({
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      class={["transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
       {...machine.getLabelProps()}>Quantity</label>
     <span
-      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      class="type-caption text-muted tabular-nums transition-colors duration-fast"
       {...machine.getValueTextProps()}>{machine.value}</span>
   </div>
 
@@ -23,27 +23,27 @@ const machine = numberInput({
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getDecrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-minus type-caption" aria-hidden="true"></span></span></button>
     <input
-      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
       {...machine.getInputProps()}
     />
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getIncrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-plus type-caption" aria-hidden="true"></span></span></button>
   </div>
 
   <div
-    class={["relative mt-2 h-[1.25rem] select-none touch-none rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "border-border-strong bg-surface": machine.scrubbing, "opacity-50": machine.disabled }]}
+    class={["relative mt-2 h-[1.25rem] select-none touch-none rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate", { "border-strong bg-surface": machine.scrubbing, "opacity-50": machine.disabled }]}
     {...machine.getScrubberProps()}
   >
     <span
-      class="pointer-events-none absolute inset-0 flex items-center justify-center gap-1 text-xs text-text-muted transition-opacity duration-fast ease-decelerate"
-      aria-hidden="true"><span class="i-lucide-chevron-left text-xs" aria-hidden="true"></span><span class="i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
+      class="pointer-events-none absolute inset-0 flex items-center justify-center gap-1 type-caption text-muted transition-opacity duration-fast ease-decelerate"
+      aria-hidden="true"><span class="i-lucide-chevron-left type-caption" aria-hidden="true"></span><span class="i-lucide-chevron-right type-caption" aria-hidden="true"></span></span>
     <span
-      class="pointer-events-none fixed z-50 h-5 w-5 rounded-md border border-solid border-border bg-surface-raised text-center text-xs text-text shadow-lg transition-opacity duration-fast ease-decelerate"
+      class="pointer-events-none fixed z-50 h-5 w-5 rounded-md border bg-surface-raised text-center type-caption shadow-lg transition-opacity duration-fast ease-decelerate"
       {...machine.getCursorProps()}
-    ><span aria-hidden="true"><span class="i-lucide-move-horizontal text-xs" aria-hidden="true"></span></span></span>
+    ><span aria-hidden="true"><span class="i-lucide-move-horizontal type-caption" aria-hidden="true"></span></span></span>
   </div>
 </div>

package/dist/number-input/examples/basic.html.js

@@ -0,0 +1,5 @@
+// src/number-input/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { numberInput } from \"../number-input.presentation.ts\";\n\nconst machine = numberInput({\n  defaultValue: \"3\",\n  step: \"1\",\n  min: \"0\",\n  max: \"10\",\n});\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class={[\"transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getLabelProps()}>Quantity</label>\n    <span\n      class=\"type-caption text-muted tabular-nums transition-colors duration-fast\"\n      {...machine.getValueTextProps()}>{machine.value}</span>\n  </div>\n\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getDecrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></span></button>\n    <input\n      class={[\"w-[5rem] tabular-nums\", { \"ring-2 ring-border-strong\": machine.focused, \"border-strong text-primary\": machine.invalid, \"opacity-50\": machine.disabled }]}\n      {...machine.getInputProps()}\n    />\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getIncrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-plus type-caption\" aria-hidden=\"true\"></span></span></button>\n  </div>\n\n  <div\n    class={[\"relative mt-2 h-[1.25rem] select-none touch-none rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate\", { \"border-strong bg-surface\": machine.scrubbing, \"opacity-50\": machine.disabled }]}\n    {...machine.getScrubberProps()}\n  >\n    <span\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-center gap-1 type-caption text-muted transition-opacity duration-fast ease-decelerate\"\n      aria-hidden=\"true\"><span class=\"i-lucide-chevron-left type-caption\" aria-hidden=\"true\"></span><span class=\"i-lucide-chevron-right type-caption\" aria-hidden=\"true\"></span></span>\n    <span\n      class=\"pointer-events-none fixed z-50 h-5 w-5 rounded-md border bg-surface-raised text-center type-caption shadow-lg transition-opacity duration-fast ease-decelerate\"\n      {...machine.getCursorProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-move-horizontal type-caption\" aria-hidden=\"true\"></span></span></span>\n  </div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/number-input/examples/currency.html

@@ -7,10 +7,10 @@ const machine = numberInput({ defaultValue: "99", step: "0.01", min: "0" });
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      class={["transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
       {...machine.getLabelProps()}>Price</label>
     <span
-      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      class="type-caption text-muted tabular-nums transition-colors duration-fast"
       {...machine.getValueTextProps()}>{machine.value}</span>
   </div>
 
@@ -18,16 +18,16 @@ const machine = numberInput({ defaultValue: "99", step: "0.01", min: "0" });
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getDecrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-minus type-caption" aria-hidden="true"></span></span></button>
     <input
-      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
       {...machine.getInputProps()}
     />
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getIncrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-plus type-caption" aria-hidden="true"></span></span></button>
   </div>
 
-  <div class="text-xs text-text-muted">Enter product price</div>
+  <div class="type-caption text-muted">Enter product price</div>
 </div>

package/dist/number-input/examples/currency.html.js

@@ -0,0 +1,5 @@
+// src/number-input/examples/currency.html
+var currency_default = "<script lang=\"ts\">\nimport { numberInput } from \"../number-input.presentation.ts\";\n\nconst machine = numberInput({ defaultValue: \"99\", step: \"0.01\", min: \"0\" });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class={[\"transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getLabelProps()}>Price</label>\n    <span\n      class=\"type-caption text-muted tabular-nums transition-colors duration-fast\"\n      {...machine.getValueTextProps()}>{machine.value}</span>\n  </div>\n\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getDecrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></span></button>\n    <input\n      class={[\"w-[5rem] tabular-nums\", { \"ring-2 ring-border-strong\": machine.focused, \"border-strong text-primary\": machine.invalid, \"opacity-50\": machine.disabled }]}\n      {...machine.getInputProps()}\n    />\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getIncrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-plus type-caption\" aria-hidden=\"true\"></span></span></button>\n  </div>\n\n  <div class=\"type-caption text-muted\">Enter product price</div>\n</div>\n";
+export { currency_default as default };
+
+//# sourceMappingURL=currency.html.js.map

package/dist/number-input/examples/decimal.html

@@ -7,10 +7,10 @@ const machine = numberInput({ defaultValue: "3.14159", step: "0.001" });
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      class={["transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
       {...machine.getLabelProps()}>Precision Value</label>
     <span
-      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      class="type-caption text-muted tabular-nums transition-colors duration-fast"
       {...machine.getValueTextProps()}>{machine.value}</span>
   </div>
 
@@ -20,7 +20,7 @@ const machine = numberInput({ defaultValue: "3.14159", step: "0.001" });
       {...machine.getDecrementTriggerProps()}
     ><span aria-hidden="true"><span class="inline-block icon-sm i-lucide-minus" aria-hidden="true"></span></span></button>
     <input
-      class={["w-[5rem] font-mono tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
       {...machine.getInputProps()}
     />
     <button
@@ -29,5 +29,5 @@ const machine = numberInput({ defaultValue: "3.14159", step: "0.001" });
     ><span aria-hidden="true"><span class="inline-block icon-sm i-lucide-plus" aria-hidden="true"></span></span></button>
   </div>
 
-  <div class="text-xs text-text-muted">Step: 0.001, up to 5 decimal places</div>
+  <div class="type-caption text-muted">Step: 0.001, up to 5 decimal places</div>
 </div>

package/dist/number-input/examples/decimal.html.js

@@ -0,0 +1,5 @@
+// src/number-input/examples/decimal.html
+var decimal_default = "<script lang=\"ts\">\nimport { numberInput } from \"../number-input.presentation.ts\";\n\nconst machine = numberInput({ defaultValue: \"3.14159\", step: \"0.001\" });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class={[\"transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getLabelProps()}>Precision Value</label>\n    <span\n      class=\"type-caption text-muted tabular-nums transition-colors duration-fast\"\n      {...machine.getValueTextProps()}>{machine.value}</span>\n  </div>\n\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getDecrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"inline-block icon-sm i-lucide-minus\" aria-hidden=\"true\"></span></span></button>\n    <input\n      class={[\"w-[5rem] tabular-nums\", { \"ring-2 ring-border-strong\": machine.focused, \"border-strong text-primary\": machine.invalid, \"opacity-50\": machine.disabled }]}\n      {...machine.getInputProps()}\n    />\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getIncrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"inline-block icon-sm i-lucide-plus\" aria-hidden=\"true\"></span></span></button>\n  </div>\n\n  <div class=\"type-caption text-muted\">Step: 0.001, up to 5 decimal places</div>\n</div>\n";
+export { decimal_default as default };
+
+//# sourceMappingURL=decimal.html.js.map

package/dist/number-input/examples/limits.html

@@ -13,10 +13,10 @@ const machine = numberInput({
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      class={["transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
       {...machine.getLabelProps()}>Rating (0-10)</label>
     <span
-      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      class="type-caption text-muted tabular-nums transition-colors duration-fast"
       {...machine.getValueTextProps()}>{machine.value}</span>
   </div>
 
@@ -24,18 +24,18 @@ const machine = numberInput({
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getDecrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-minus type-caption" aria-hidden="true"></span></span></button>
     <input
-      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
       {...machine.getInputProps()}
     />
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getIncrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-plus type-caption" aria-hidden="true"></span></span></button>
   </div>
 
-  <div class="mt-2 flex justify-between text-xs text-text-muted">
+  <div class="mt-2 flex justify-between type-caption text-muted">
     <span>Min: 0</span>
     <span>Max: 10</span>
   </div>

package/dist/number-input/examples/limits.html.js

@@ -0,0 +1,5 @@
+// src/number-input/examples/limits.html
+var limits_default = "<script lang=\"ts\">\nimport { numberInput } from \"../number-input.presentation.ts\";\n\nconst machine = numberInput({\n  defaultValue: \"5\",\n  step: \"1\",\n  min: \"0\",\n  max: \"10\",\n  clampValueOnBlur: true,\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class={[\"transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getLabelProps()}>Rating (0-10)</label>\n    <span\n      class=\"type-caption text-muted tabular-nums transition-colors duration-fast\"\n      {...machine.getValueTextProps()}>{machine.value}</span>\n  </div>\n\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getDecrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></span></button>\n    <input\n      class={[\"w-[5rem] tabular-nums\", { \"ring-2 ring-border-strong\": machine.focused, \"border-strong text-primary\": machine.invalid, \"opacity-50\": machine.disabled }]}\n      {...machine.getInputProps()}\n    />\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getIncrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-plus type-caption\" aria-hidden=\"true\"></span></span></button>\n  </div>\n\n  <div class=\"mt-2 flex justify-between type-caption text-muted\">\n    <span>Min: 0</span>\n    <span>Max: 10</span>\n  </div>\n</div>\n";
+export { limits_default as default };
+
+//# sourceMappingURL=limits.html.js.map

package/dist/number-input/examples/percentage.html

@@ -12,10 +12,10 @@ const machine = numberInput({
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      class={["transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
       {...machine.getLabelProps()}>Discount Rate</label>
     <span
-      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      class="type-caption text-muted tabular-nums transition-colors duration-fast"
       {...machine.getValueTextProps()}>{machine.value}</span>
   </div>
 
@@ -23,16 +23,16 @@ const machine = numberInput({
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getDecrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-minus type-caption" aria-hidden="true"></span></span></button>
     <input
-      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
       {...machine.getInputProps()}
     />
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getIncrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-plus type-caption" aria-hidden="true"></span></span></button>
   </div>
 
-  <div class="text-xs text-text-muted">Enter a value between 0% and 100%</div>
+  <div class="type-caption text-muted">Enter a value between 0% and 100%</div>
 </div>

package/dist/number-input/examples/percentage.html.js

@@ -0,0 +1,5 @@
+// src/number-input/examples/percentage.html
+var percentage_default = "<script lang=\"ts\">\nimport { numberInput } from \"../number-input.presentation.ts\";\n\nconst machine = numberInput({\n  defaultValue: \"15\",\n  step: \"0.1\",\n  min: \"0\",\n  max: \"100\",\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class={[\"transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getLabelProps()}>Discount Rate</label>\n    <span\n      class=\"type-caption text-muted tabular-nums transition-colors duration-fast\"\n      {...machine.getValueTextProps()}>{machine.value}</span>\n  </div>\n\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getDecrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></span></button>\n    <input\n      class={[\"w-[5rem] tabular-nums\", { \"ring-2 ring-border-strong\": machine.focused, \"border-strong text-primary\": machine.invalid, \"opacity-50\": machine.disabled }]}\n      {...machine.getInputProps()}\n    />\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getIncrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-plus type-caption\" aria-hidden=\"true\"></span></span></button>\n  </div>\n\n  <div class=\"type-caption text-muted\">Enter a value between 0% and 100%</div>\n</div>\n";
+export { percentage_default as default };
+
+//# sourceMappingURL=percentage.html.js.map

package/dist/number-input/examples/quantity.html

@@ -7,20 +7,20 @@ const machine = numberInput({ defaultValue: "1", step: "1", min: "0" });
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      class={["transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
       {...machine.getLabelProps()}>Amount</label>
     <span
-      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      class="type-caption text-muted tabular-nums transition-colors duration-fast"
       {...machine.getValueTextProps()}>{machine.value}</span>
   </div>
 
   <div
-    class={["relative inline-flex h-7 w-full items-center overflow-hidden rounded-md border border-solid border-border text-sm whitespace-nowrap transition-all duration-fast ease-decelerate focus-within:ring-2 focus-within:ring-border-strong", { "opacity-50": machine.disabled }]}
+    class={["relative inline-flex h-7 w-full items-center overflow-hidden rounded-md border type-body whitespace-nowrap transition-all duration-fast ease-decelerate focus-within:ring-2 focus-within:ring-border-strong", { "opacity-50": machine.disabled }]}
     {...machine.getControlProps()}>
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getDecrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-minus type-caption" aria-hidden="true"></span></span></button>
     <input
       class={["bare h-full w-full grow text-center tabular-nums", { "ring-0": machine.focused }]}
       {...machine.getInputProps()}
@@ -28,8 +28,8 @@ const machine = numberInput({ defaultValue: "1", step: "1", min: "0" });
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getIncrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-plus type-caption" aria-hidden="true"></span></span></button>
   </div>
 
-  <div class="text-xs text-text-muted">Enter number of items</div>
+  <div class="type-caption text-muted">Enter number of items</div>
 </div>

package/dist/number-input/examples/quantity.html.js

@@ -0,0 +1,5 @@
+// src/number-input/examples/quantity.html
+var quantity_default = "<script lang=\"ts\">\nimport { numberInput } from \"../number-input.presentation.ts\";\n\nconst machine = numberInput({ defaultValue: \"1\", step: \"1\", min: \"0\" });\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class={[\"transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getLabelProps()}>Amount</label>\n    <span\n      class=\"type-caption text-muted tabular-nums transition-colors duration-fast\"\n      {...machine.getValueTextProps()}>{machine.value}</span>\n  </div>\n\n  <div\n    class={[\"relative inline-flex h-7 w-full items-center overflow-hidden rounded-md border type-body whitespace-nowrap transition-all duration-fast ease-decelerate focus-within:ring-2 focus-within:ring-border-strong\", { \"opacity-50\": machine.disabled }]}\n    {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getDecrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></span></button>\n    <input\n      class={[\"bare h-full w-full grow text-center tabular-nums\", { \"ring-0\": machine.focused }]}\n      {...machine.getInputProps()}\n    />\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getIncrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-plus type-caption\" aria-hidden=\"true\"></span></span></button>\n  </div>\n\n  <div class=\"type-caption text-muted\">Enter number of items</div>\n</div>\n";
+export { quantity_default as default };
+
+//# sourceMappingURL=quantity.html.js.map

package/dist/number-input/examples/scrubber.html

@@ -7,10 +7,10 @@ const machine = numberInput({ defaultValue: "42", step: "1" });
 <div class="w-64 max-w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      class={["transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
       {...machine.getLabelProps()}>Interactive Value</label>
     <span
-      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      class="type-caption text-muted tabular-nums transition-colors duration-fast"
       {...machine.getValueTextProps()}>{machine.value}</span>
   </div>
 
@@ -18,29 +18,29 @@ const machine = numberInput({ defaultValue: "42", step: "1" });
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getDecrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-minus type-caption" aria-hidden="true"></span></span></button>
     <input
-      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
       {...machine.getInputProps()}
     />
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getIncrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-plus type-caption" aria-hidden="true"></span></span></button>
   </div>
 
   <div
-    class={["relative mt-2 h-[1.25rem] select-none touch-none rounded-md border border-solid border-border bg-surface-raised transition-colors duration-fast ease-decelerate", { "border-border-strong bg-surface": machine.scrubbing, "opacity-50": machine.disabled }]}
+    class={["relative mt-2 h-[1.25rem] select-none touch-none rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate", { "border-strong bg-surface": machine.scrubbing, "opacity-50": machine.disabled }]}
     {...machine.getScrubberProps()}
   >
     <span
-      class="pointer-events-none absolute inset-0 flex items-center justify-center gap-1 text-xs text-text-muted transition-opacity duration-fast ease-decelerate"
-      aria-hidden="true"><span class="i-lucide-chevron-left text-xs" aria-hidden="true"></span><span class="i-lucide-chevron-right text-xs" aria-hidden="true"></span></span>
+      class="pointer-events-none absolute inset-0 flex items-center justify-center gap-1 type-caption text-muted transition-opacity duration-fast ease-decelerate"
+      aria-hidden="true"><span class="i-lucide-chevron-left type-caption" aria-hidden="true"></span><span class="i-lucide-chevron-right type-caption" aria-hidden="true"></span></span>
     <span
-      class="pointer-events-none fixed z-50 h-5 w-5 rounded-md border border-solid border-border bg-surface-raised text-center text-xs text-text shadow-lg transition-opacity duration-fast ease-decelerate"
+      class="pointer-events-none fixed z-50 h-5 w-5 rounded-md border bg-surface-raised text-center type-caption shadow-lg transition-opacity duration-fast ease-decelerate"
       {...machine.getCursorProps()}
-    ><span aria-hidden="true"><span class="i-lucide-move-horizontal text-xs" aria-hidden="true"></span></span></span>
+    ><span aria-hidden="true"><span class="i-lucide-move-horizontal type-caption" aria-hidden="true"></span></span></span>
   </div>
 
-  <div class="text-xs text-text-muted">Drag the icon to scrub the value</div>
+  <div class="type-caption text-muted">Drag the icon to scrub the value</div>
 </div>

package/dist/number-input/examples/scrubber.html.js

@@ -0,0 +1,5 @@
+// src/number-input/examples/scrubber.html
+var scrubber_default = "<script lang=\"ts\">\nimport { numberInput } from \"../number-input.presentation.ts\";\n\nconst machine = numberInput({ defaultValue: \"42\", step: \"1\" });\n<\/script>\n\n<div class=\"w-64 max-w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class={[\"transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getLabelProps()}>Interactive Value</label>\n    <span\n      class=\"type-caption text-muted tabular-nums transition-colors duration-fast\"\n      {...machine.getValueTextProps()}>{machine.value}</span>\n  </div>\n\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getDecrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></span></button>\n    <input\n      class={[\"w-[5rem] tabular-nums\", { \"ring-2 ring-border-strong\": machine.focused, \"border-strong text-primary\": machine.invalid, \"opacity-50\": machine.disabled }]}\n      {...machine.getInputProps()}\n    />\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getIncrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-plus type-caption\" aria-hidden=\"true\"></span></span></button>\n  </div>\n\n  <div\n    class={[\"relative mt-2 h-[1.25rem] select-none touch-none rounded-md border bg-surface-raised transition-colors duration-fast ease-decelerate\", { \"border-strong bg-surface\": machine.scrubbing, \"opacity-50\": machine.disabled }]}\n    {...machine.getScrubberProps()}\n  >\n    <span\n      class=\"pointer-events-none absolute inset-0 flex items-center justify-center gap-1 type-caption text-muted transition-opacity duration-fast ease-decelerate\"\n      aria-hidden=\"true\"><span class=\"i-lucide-chevron-left type-caption\" aria-hidden=\"true\"></span><span class=\"i-lucide-chevron-right type-caption\" aria-hidden=\"true\"></span></span>\n    <span\n      class=\"pointer-events-none fixed z-50 h-5 w-5 rounded-md border bg-surface-raised text-center type-caption shadow-lg transition-opacity duration-fast ease-decelerate\"\n      {...machine.getCursorProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-move-horizontal type-caption\" aria-hidden=\"true\"></span></span></span>\n  </div>\n\n  <div class=\"type-caption text-muted\">Drag the icon to scrub the value</div>\n</div>\n";
+export { scrubber_default as default };
+
+//# sourceMappingURL=scrubber.html.js.map

package/dist/number-input/examples/wheel.html

@@ -13,10 +13,10 @@ const machine = numberInput({
 <div class="w-full" {...machine.getRootProps()}>
   <div class="mb-1 flex items-center justify-between gap-2">
     <label
-      class={["text-sm font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+      class={["transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
       {...machine.getLabelProps()}>Volume Level</label>
     <span
-      class="text-xs text-text-muted tabular-nums transition-colors duration-fast"
+      class="type-caption text-muted tabular-nums transition-colors duration-fast"
       {...machine.getValueTextProps()}>{machine.value}</span>
   </div>
 
@@ -24,19 +24,19 @@ const machine = numberInput({
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getDecrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-minus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-minus type-caption" aria-hidden="true"></span></span></button>
     <input
-      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
+      class={["w-[5rem] tabular-nums", { "ring-2 ring-border-strong": machine.focused, "border-strong text-primary": machine.invalid, "opacity-50": machine.disabled }]}
       {...machine.getInputProps()}
     />
     <button
       class={["secondary icon s-sm", { "cursor-not-allowed opacity-50": machine.disabled }]}
       {...machine.getIncrementTriggerProps()}
-    ><span aria-hidden="true"><span class="i-lucide-plus text-xs" aria-hidden="true"></span></span></button>
+    ><span aria-hidden="true"><span class="i-lucide-plus type-caption" aria-hidden="true"></span></span></button>
   </div>
 
-  <div class="mt-2 flex items-center gap-1 text-xs text-text-muted">
-    <span class="i-lucide-mouse-pointer text-xs" aria-hidden="true"></span>
+  <div class="mt-2 flex items-center gap-1 type-caption text-muted">
+    <span class="i-lucide-mouse-pointer type-caption" aria-hidden="true"></span>
     <span>Focus and use mouse wheel to change</span>
   </div>
 </div>

package/dist/number-input/examples/wheel.html.js

@@ -0,0 +1,5 @@
+// src/number-input/examples/wheel.html
+var wheel_default = "<script lang=\"ts\">\nimport { numberInput } from \"../number-input.presentation.ts\";\n\nconst machine = numberInput({\n  defaultValue: \"100\",\n  step: \"10\",\n  min: \"0\",\n  max: \"1000\",\n  allowMouseWheel: true,\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n  <div class=\"mb-1 flex items-center justify-between gap-2\">\n    <label\n      class={[\"transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n      {...machine.getLabelProps()}>Volume Level</label>\n    <span\n      class=\"type-caption text-muted tabular-nums transition-colors duration-fast\"\n      {...machine.getValueTextProps()}>{machine.value}</span>\n  </div>\n\n  <div class=\"flex items-center gap-2\" {...machine.getControlProps()}>\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getDecrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-minus type-caption\" aria-hidden=\"true\"></span></span></button>\n    <input\n      class={[\"w-[5rem] tabular-nums\", { \"ring-2 ring-border-strong\": machine.focused, \"border-strong text-primary\": machine.invalid, \"opacity-50\": machine.disabled }]}\n      {...machine.getInputProps()}\n    />\n    <button\n      class={[\"secondary icon s-sm\", { \"cursor-not-allowed opacity-50\": machine.disabled }]}\n      {...machine.getIncrementTriggerProps()}\n    ><span aria-hidden=\"true\"><span class=\"i-lucide-plus type-caption\" aria-hidden=\"true\"></span></span></button>\n  </div>\n\n  <div class=\"mt-2 flex items-center gap-1 type-caption text-muted\">\n    <span class=\"i-lucide-mouse-pointer type-caption\" aria-hidden=\"true\"></span>\n    <span>Focus and use mouse wheel to change</span>\n  </div>\n</div>\n";
+export { wheel_default as default };
+
+//# sourceMappingURL=wheel.html.js.map

package/dist/number-input/number-input.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface NumberInputEvents {
   "VALUE.SET": {
     value: number | string;
@@ -62,5 +62,4 @@ export interface NumberInputFocusChange {
   readonly focused: boolean;
   readonly value: string;
   readonly valueAsNumber: number;
-}
-//# sourceMappingURL=number-input.events.d.ts.map
+}

package/dist/number-input/number-input.machine.d.ts

@@ -1,5 +1,5 @@
-import { NumberInputEvents } from "./number-input.events.js";
+/** Number-input machine: chart only. */
 import { NumberInputArgs, NumberInputContext, NumberInputState } from "./number-input.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function numberInput(args?: NumberInputArgs, authored?: (name: string) => boolean): Machine<NumberInputContext, NumberInputEvents, NumberInputState>;
-//# sourceMappingURL=number-input.machine.d.ts.map
+import { NumberInputEvents } from "./number-input.events.js";
+import { Machine } from "@spinjs/components/fsm";
+export declare function numberInput(args?: NumberInputArgs, authored?: (name: string) => boolean): Machine<NumberInputContext, NumberInputEvents, NumberInputState>;

package/dist/number-input/number-input.machine.js

@@ -1,6 +1,6 @@
 import { asNumber, clampValue, formatValue, initial, parseValue } from "./number-input.state.js";
 import { beginSpin, clearHint, decrement, endSpin, increment, isDecrementHint, isIncrementHint, outOfRange, setCursorPoint, setFormattedValue } from "./number-input.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/number-input/number-input.machine.ts
 /** Number-input machine: chart only. */
 function numberInput(args = {}, authored = () => true) {

package/dist/number-input/number-input.presentation.d.ts

@@ -1,10 +1,10 @@
-import { NumberInputEvents, NumberInputFocusChange, NumberInputInvalidReason, NumberInputValueChange, NumberInputValueCommit, NumberInputValueInvalid } from "./number-input.events.js";
 import { NumberInputArgs, NumberInputContext, NumberInputState } from "./number-input.state.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { NumberInputEvents, NumberInputFocusChange, NumberInputInvalidReason, NumberInputValueChange, NumberInputValueCommit, NumberInputValueInvalid } from "./number-input.events.js";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
 type ScopeLike = ViewFor<NumberInputContext, NumberInputEvents, NumberInputState>;
 export declare const def: {
   name: string;
-  machine: (args: NumberInputArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<NumberInputContext, NumberInputEvents, NumberInputState>;
+  machine: (args: NumberInputArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<NumberInputContext, NumberInputEvents, NumberInputState>;
   start: "idle";
   parts: {
     root: {
@@ -37,7 +37,7 @@ export declare const def: {
         "data-invalid": string | undefined;
         "data-scrubbing": string | undefined;
         "aria-disabled": boolean;
-        "aria-invalid": boolean;
+        "aria-invalid": boolean | undefined;
         "use:autoplay": {
           interval: number;
           enabled: boolean;
@@ -69,7 +69,7 @@ export declare const def: {
         disabled: boolean;
         readOnly: boolean;
         required: boolean;
-        "aria-invalid": boolean;
+        "aria-invalid": boolean | undefined;
         "aria-valuemin": number;
         "aria-valuemax": number;
         "aria-valuenow": number | undefined;
@@ -287,6 +287,5 @@ export declare const def: {
   };
 };
 export type NumberInputApi = ApiOf<typeof def>;
-export declare const numberInput: import("@spinjs/runtime").DefinedComponent<NumberInputApi, NumberInputArgs>;
-export type { NumberInputArgs, NumberInputFocusChange, NumberInputInvalidReason, NumberInputState, NumberInputValueChange, NumberInputValueCommit, NumberInputValueInvalid };
-//# sourceMappingURL=number-input.presentation.d.ts.map
+export declare const numberInput: import("@spinjs/components/runtime").DefinedComponent<NumberInputApi, NumberInputArgs>;
+export type { NumberInputArgs, NumberInputFocusChange, NumberInputInvalidReason, NumberInputState, NumberInputValueChange, NumberInputValueCommit, NumberInputValueInvalid };