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

package/dist/tabs/examples/vertical-ghost.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/vertical-ghost.html
+var vertical_ghost_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"general\",\n   label: \"General\",\n   content: \"Workspace name, region, and plan.\",\n  },\n  {\n   value: \"members\",\n   label: \"Members\",\n   content: \"Priya, Tomas, and the on-call rotation.\",\n  },\n  {\n   value: \"security\",\n   label: \"Security\",\n   content: \"Two-factor auth and the audit log.\",\n  },\n ],\n defaultValue: \"general\",\n orientation: \"vertical\",\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md items-start gap-4\"\n {...machine.getRootProps()}>\n <div class=\"flex shrink-0 flex-col gap-1\" {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare rounded-md px-4 py-2 text-left type-label transition-colors hover:bg-surface-raised aria-[selected=true]:bg-surface-raised aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   >{row.label}</button>\n  </template>\n </div>\n <div\n  class=\"flex-1 rounded-lg border bg-surface p-4\">\n  <template for={machine.items} as={row} key={row.value}>\n   <p class=\"text-muted\"\n    {...machine.getContentProps(row)}>{row.content}</p>\n  </template>\n </div>\n</div>\n";
+export { vertical_ghost_default as default };
+
+//# sourceMappingURL=vertical-ghost.html.js.map

package/dist/tabs/examples/vertical-icons.html

@@ -26,18 +26,18 @@ const machine = tabs({
 
 <div class="mx-auto flex w-full max-w-md items-start gap-4"
  {...machine.getRootProps()}>
- <div class="flex shrink-0 flex-col border-l border-solid border-border"
+ <div class="flex shrink-0 flex-col border-l"
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare flex items-center gap-3 border-l-2 border-solid px-3 py-2 text-left text-sm font-medium transition-colors aria-[selected=true]:border-primary aria-[selected=true]:text-text aria-[selected=false]:border-transparent aria-[selected=false]:text-text-muted"
+    class="bare flex items-center gap-3 border-l-2 border-solid px-3 py-2 text-left type-label transition-colors aria-[selected=true]:border-primary aria-[selected=false]:border-transparent aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
-   ><span class="i-lucide-house text-sm" aria-hidden="true" show={row.value === "overview"}></span><span class="i-lucide-folder-open text-sm" aria-hidden="true" show={row.value === "projects"}></span><span class="i-lucide-package text-sm" aria-hidden="true" show={row.value === "packages"}></span><span>{row.label}</span></button>
+   ><span class="i-lucide-house type-code" aria-hidden="true" show={row.value === "overview"}></span><span class="i-lucide-folder-open type-code" aria-hidden="true" show={row.value === "projects"}></span><span class="i-lucide-package type-code" aria-hidden="true" show={row.value === "packages"}></span><span>{row.label}</span></button>
   </template>
  </div>
- <div class="flex-1 rounded-lg border border-solid border-border p-4">
+ <div class="flex-1 rounded-lg border p-4">
   <template for={machine.items} as={row} key={row.value}>
-   <p class=" text-sm text-text-muted"
+   <p class="text-muted"
     {...machine.getContentProps(row)}>{row.content}</p>
   </template>
  </div>

package/dist/tabs/examples/vertical-icons.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/vertical-icons.html
+var vertical_icons_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"overview\",\n   label: \"Overview\",\n   content: \"Fleet health at a glance.\",\n  },\n  {\n   value: \"projects\",\n   label: \"Projects\",\n   content: \"checkout-api and its preview deploys.\",\n  },\n  {\n   value: \"packages\",\n   label: \"Packages\",\n   content: \"Canary channel and pinned versions.\",\n  },\n ],\n defaultValue: \"overview\",\n orientation: \"vertical\",\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md items-start gap-4\"\n {...machine.getRootProps()}>\n <div class=\"flex shrink-0 flex-col border-l\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare flex items-center gap-3 border-l-2 border-solid px-3 py-2 text-left type-label transition-colors aria-[selected=true]:border-primary aria-[selected=false]:border-transparent aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   ><span class=\"i-lucide-house type-code\" aria-hidden=\"true\" show={row.value === \"overview\"}></span><span class=\"i-lucide-folder-open type-code\" aria-hidden=\"true\" show={row.value === \"projects\"}></span><span class=\"i-lucide-package type-code\" aria-hidden=\"true\" show={row.value === \"packages\"}></span><span>{row.label}</span></button>\n  </template>\n </div>\n <div class=\"flex-1 rounded-lg border p-4\">\n  <template for={machine.items} as={row} key={row.value}>\n   <p class=\"text-muted\"\n    {...machine.getContentProps(row)}>{row.content}</p>\n  </template>\n </div>\n</div>\n";
+export { vertical_icons_default as default };
+
+//# sourceMappingURL=vertical-icons.html.js.map

package/dist/tabs/examples/vertical-underline.html

@@ -26,19 +26,19 @@ const machine = tabs({
 
 <div class="mx-auto flex w-full max-w-md items-start gap-4"
  {...machine.getRootProps()}>
- <div class="flex shrink-0 flex-col border-l border-solid border-border"
+ <div class="flex shrink-0 flex-col border-l"
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare border-l-2 border-solid px-4 py-2 text-left text-sm font-medium transition-colors hover:text-text aria-[selected=true]:border-primary aria-[selected=true]:text-text aria-[selected=false]:border-transparent aria-[selected=false]:text-text-muted"
+    class="bare border-l-2 border-solid px-4 py-2 text-left type-label transition-colors aria-[selected=true]:border-primary aria-[selected=false]:border-transparent aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
    >{row.label}</button>
   </template>
  </div>
  <div
-  class="flex-1 rounded-lg border border-solid border-border bg-surface p-4">
+  class="flex-1 rounded-lg border bg-surface p-4">
   <template for={machine.items} as={row} key={row.value}>
-   <p class=" text-sm text-text-muted"
+   <p class="text-muted"
     {...machine.getContentProps(row)}>{row.content}</p>
   </template>
  </div>

package/dist/tabs/examples/vertical-underline.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/vertical-underline.html
+var vertical_underline_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"account\",\n   label: \"Account\",\n   content: \"Priya Raman, workspace owner.\",\n  },\n  {\n   value: \"tokens\",\n   label: \"API Tokens\",\n   content: \"checkout-api ships with two live tokens.\",\n  },\n  {\n   value: \"sessions\",\n   label: \"Sessions\",\n   content: \"Three sessions, one from Berlin.\",\n  },\n ],\n defaultValue: \"account\",\n orientation: \"vertical\",\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md items-start gap-4\"\n {...machine.getRootProps()}>\n <div class=\"flex shrink-0 flex-col border-l\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare border-l-2 border-solid px-4 py-2 text-left type-label transition-colors aria-[selected=true]:border-primary aria-[selected=false]:border-transparent aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   >{row.label}</button>\n  </template>\n </div>\n <div\n  class=\"flex-1 rounded-lg border bg-surface p-4\">\n  <template for={machine.items} as={row} key={row.value}>\n   <p class=\"text-muted\"\n    {...machine.getContentProps(row)}>{row.content}</p>\n  </template>\n </div>\n</div>\n";
+export { vertical_underline_default as default };
+
+//# sourceMappingURL=vertical-underline.html.js.map

package/dist/tabs/examples/vertical-with-icons.html

@@ -30,23 +30,23 @@ const machine = tabs({
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare flex items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition-all aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    class="bare flex items-center gap-2 rounded-md px-3 py-2 text-left type-label transition-all aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
    >
-    <span class="i-lucide-house text-sm" aria-hidden="true"
+    <span class="i-lucide-house type-code" aria-hidden="true"
      show={row.value === "overview"}></span>
-    <span class="i-lucide-folder-open text-sm" aria-hidden="true"
+    <span class="i-lucide-folder-open type-code" aria-hidden="true"
      show={row.value === "projects"}></span>
-    <span class="i-lucide-package text-sm" aria-hidden="true"
+    <span class="i-lucide-package type-code" aria-hidden="true"
      show={row.value === "packages"}></span>
     <span>{row.label}</span>
    </button>
   </template>
  </div>
  <div
-  class="flex-1 rounded-lg border border-solid border-border bg-surface p-4">
+  class="flex-1 rounded-lg border bg-surface p-4">
   <template for={machine.items} as={row} key={row.value}>
-   <p class=" text-sm text-text-muted"
+   <p class="text-muted"
     {...machine.getContentProps(row)}>{row.content}</p>
   </template>
  </div>

package/dist/tabs/examples/vertical-with-icons.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/vertical-with-icons.html
+var vertical_with_icons_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"overview\",\n   label: \"Overview\",\n   content: \"Fleet health at a glance.\",\n  },\n  {\n   value: \"projects\",\n   label: \"Projects\",\n   content: \"checkout-api and its preview deploys.\",\n  },\n  {\n   value: \"packages\",\n   label: \"Packages\",\n   content: \"Canary channel and pinned versions.\",\n  },\n ],\n defaultValue: \"overview\",\n orientation: \"vertical\",\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md items-start gap-4\"\n {...machine.getRootProps()}>\n <div class=\"flex shrink-0 flex-col gap-1 rounded-lg bg-surface-raised p-1\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare flex items-center gap-2 rounded-md px-3 py-2 text-left type-label transition-all aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   >\n    <span class=\"i-lucide-house type-code\" aria-hidden=\"true\"\n     show={row.value === \"overview\"}></span>\n    <span class=\"i-lucide-folder-open type-code\" aria-hidden=\"true\"\n     show={row.value === \"projects\"}></span>\n    <span class=\"i-lucide-package type-code\" aria-hidden=\"true\"\n     show={row.value === \"packages\"}></span>\n    <span>{row.label}</span>\n   </button>\n  </template>\n </div>\n <div\n  class=\"flex-1 rounded-lg border bg-surface p-4\">\n  <template for={machine.items} as={row} key={row.value}>\n   <p class=\"text-muted\"\n    {...machine.getContentProps(row)}>{row.content}</p>\n  </template>\n </div>\n</div>\n";
+export { vertical_with_icons_default as default };
+
+//# sourceMappingURL=vertical-with-icons.html.js.map

package/dist/tabs/examples/vertical.html

@@ -30,13 +30,13 @@ const machine = tabs({
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare rounded-md px-4 py-2 text-left text-sm font-medium transition-all aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    class="bare rounded-md px-4 py-2 text-left type-label transition-all aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
    >{row.label}</button>
   </template>
  </div>
  <template for={machine.items} as={row} key={row.value}>
-  <p class=" flex-1 pt-2 text-left text-sm text-text-muted"
+  <p class="flex-1 pt-2 text-left text-muted"
    {...machine.getContentProps(row)}>{row.content}</p>
  </template>
 </div>

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

@@ -0,0 +1,5 @@
+// src/tabs/examples/vertical.html
+var vertical_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"tab1\",\n   label: \"Overview\",\n   content: \"Fleet health at a glance.\",\n  },\n  {\n   value: \"tab2\",\n   label: \"Deployments\",\n   content: \"Deploy #4821 is live on checkout-api.\",\n  },\n  {\n   value: \"tab3\",\n   label: \"Settings\",\n   content: \"Workspace preferences and API tokens.\",\n  },\n ],\n defaultValue: \"tab1\",\n orientation: \"vertical\",\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md items-start gap-4\"\n {...machine.getRootProps()}>\n <div class=\"flex shrink-0 flex-col gap-1 rounded-lg bg-surface-raised p-1\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare rounded-md px-4 py-2 text-left type-label transition-all aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   >{row.label}</button>\n  </template>\n </div>\n <template for={machine.items} as={row} key={row.value}>\n  <p class=\"flex-1 pt-2 text-left text-muted\"\n   {...machine.getContentProps(row)}>{row.content}</p>\n </template>\n</div>\n";
+export { vertical_default as default };
+
+//# sourceMappingURL=vertical.html.js.map

package/dist/tabs/examples/with-badges.html

@@ -31,13 +31,13 @@ const machine = tabs({
  <div class="mb-4 flex gap-2" {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare flex flex-col items-center gap-1 rounded-md px-4 py-3 text-sm font-medium transition-all aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    class="bare flex flex-col items-center gap-1 rounded-md px-4 py-3 type-label transition-all aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
-   ><span class="bare grid h-6 w-6 place-items-center rounded-full text-xs font-semibold aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected aria-[selected=false]:bg-surface-sunken aria-[selected=false]:text-text-muted" aria-hidden="true">{row.badge}</span><span>{row.label}</span></button>
+   ><span class="bare grid h-6 w-6 place-items-center rounded-full type-caption-emphasized aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected aria-[selected=false]:bg-surface-sunken aria-[selected=false]:text-muted" aria-hidden="true">{row.badge}</span><span>{row.label}</span></button>
   </template>
  </div>
  <template for={machine.items} as={row} key={row.value}>
-  <p class=" text-center text-sm text-text-muted"
+  <p class="text-center text-muted"
    {...machine.getContentProps(row)}>{row.content}</p>
  </template>
 </div>

package/dist/tabs/examples/with-badges.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/with-badges.html
+var with_badges_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"tasks\",\n   label: \"Tasks\",\n   content: \"Eight open, two blocking Deploy #4821.\",\n   badge: \"8\",\n  },\n  {\n   value: \"messages\",\n   label: \"Messages\",\n   content: \"Tomas asked about the canary graph.\",\n   badge: \"5\",\n  },\n  {\n   value: \"alerts\",\n   label: \"Alerts\",\n   content: \"Two firing, both on checkout-api.\",\n   badge: \"2\",\n  },\n ],\n defaultValue: \"tasks\",\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md flex-col items-center\"\n {...machine.getRootProps()}>\n <div class=\"mb-4 flex gap-2\" {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare flex flex-col items-center gap-1 rounded-md px-4 py-3 type-label transition-all aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   ><span class=\"bare grid h-6 w-6 place-items-center rounded-full type-caption-emphasized aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected aria-[selected=false]:bg-surface-sunken aria-[selected=false]:text-muted\" aria-hidden=\"true\">{row.badge}</span><span>{row.label}</span></button>\n  </template>\n </div>\n <template for={machine.items} as={row} key={row.value}>\n  <p class=\"text-center text-muted\"\n   {...machine.getContentProps(row)}>{row.content}</p>\n </template>\n</div>\n";
+export { with_badges_default as default };
+
+//# sourceMappingURL=with-badges.html.js.map

package/dist/tabs/examples/with-icons.html

@@ -26,17 +26,17 @@ const machine = tabs({
 <div class="mx-auto flex w-full max-w-md flex-col items-center"
  {...machine.getRootProps()}>
  <div
-  class="relative mb-4 flex w-fit gap-8 border-b border-solid border-border"
+  class="relative mb-4 flex w-fit gap-8 border-b"
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare flex items-center gap-2 border-b-2 border-solid px-1 py-2 text-sm font-medium transition-colors aria-[selected=true]:border-primary aria-[selected=true]:text-text aria-[selected=false]:border-transparent aria-[selected=false]:text-text-muted"
+    class="bare flex items-center gap-2 border-b-2 border-solid px-1 py-2 type-label transition-colors aria-[selected=true]:border-primary aria-[selected=false]:border-transparent aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
-   ><span class="i-lucide-house text-sm" aria-hidden="true" show={row.value === "overview"}></span><span class="i-lucide-folder-open text-sm" aria-hidden="true" show={row.value === "projects"}></span><span class="i-lucide-package text-sm" aria-hidden="true" show={row.value === "packages"}></span><span>{row.label}</span></button>
+   ><span class="i-lucide-house type-code" aria-hidden="true" show={row.value === "overview"}></span><span class="i-lucide-folder-open type-code" aria-hidden="true" show={row.value === "projects"}></span><span class="i-lucide-package type-code" aria-hidden="true" show={row.value === "packages"}></span><span>{row.label}</span></button>
   </template>
  </div>
  <template for={machine.items} as={row} key={row.value}>
-  <p class=" text-center text-sm text-text-muted"
+  <p class="text-center text-muted"
    {...machine.getContentProps(row)}>{row.content}</p>
  </template>
 </div>

package/dist/tabs/examples/with-icons.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/with-icons.html
+var with_icons_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"overview\",\n   label: \"Overview\",\n   content: \"Fleet health at a glance.\",\n  },\n  {\n   value: \"projects\",\n   label: \"Projects\",\n   content: \"checkout-api and its preview deploys.\",\n  },\n  {\n   value: \"packages\",\n   label: \"Packages\",\n   content: \"Canary channel and pinned versions.\",\n  },\n ],\n defaultValue: \"overview\",\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-md flex-col items-center\"\n {...machine.getRootProps()}>\n <div\n  class=\"relative mb-4 flex w-fit gap-8 border-b\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare flex items-center gap-2 border-b-2 border-solid px-1 py-2 type-label transition-colors aria-[selected=true]:border-primary aria-[selected=false]:border-transparent aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   ><span class=\"i-lucide-house type-code\" aria-hidden=\"true\" show={row.value === \"overview\"}></span><span class=\"i-lucide-folder-open type-code\" aria-hidden=\"true\" show={row.value === \"projects\"}></span><span class=\"i-lucide-package type-code\" aria-hidden=\"true\" show={row.value === \"packages\"}></span><span>{row.label}</span></button>\n  </template>\n </div>\n <template for={machine.items} as={row} key={row.value}>\n  <p class=\"text-center text-muted\"\n   {...machine.getContentProps(row)}>{row.content}</p>\n </template>\n</div>\n";
+export { with_icons_default as default };
+
+//# sourceMappingURL=with-icons.html.js.map

package/dist/tabs/tabs.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 /**
  * The tabs' events, as a MAP: the contract with the outside. The spec's
  * `on` map is typed over it, so a transition's KEY narrows the event it
@@ -15,5 +15,4 @@ export interface TabsEvents {
 export type TabsEvent = EventUnion<TabsEvents>;
 export type TabsValueChange = {
   readonly value: string;
-};
-//# sourceMappingURL=tabs.events.d.ts.map
+};

package/dist/tabs/tabs.machine.d.ts

@@ -1,5 +1,5 @@
+/** Tabs machine: selection is component state, not platform state. */
 import { TabsArgs, TabsContext, TabsState } from "./tabs.state.js";
 import { TabsEvents } from "./tabs.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
-export declare function tabs(args: TabsArgs | undefined, authored: (name: string) => boolean): Machine<TabsContext, TabsEvents, TabsState>;
-//# sourceMappingURL=tabs.machine.d.ts.map
+import { Machine } from "@spinjs/components/fsm";
+export declare function tabs(args: TabsArgs | undefined, authored: (name: string) => boolean): Machine<TabsContext, TabsEvents, TabsState>;

package/dist/tabs/tabs.machine.js

@@ -1,6 +1,6 @@
 import { initial, parseItems } from "./tabs.state.js";
 import { selectTab, setValue } from "./tabs.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/tabs/tabs.machine.ts
 /** Tabs machine: selection is component state, not platform state. */
 function tabs(args = {}, authored) {

package/dist/tabs/tabs.presentation.d.ts

@@ -1,9 +1,9 @@
 import { TabsArgs, TabsContext, TabsItem, TabsState } from "./tabs.state.js";
 import { TabsEvents } from "./tabs.events.js";
-import { ApiOf, ViewFor } from "@spinjs/runtime";
+import { ApiOf, ViewFor } from "@spinjs/components/runtime";
 export declare const def: {
   name: string;
-  machine: (args: TabsArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<TabsContext, TabsEvents, TabsState>;
+  machine: (args: TabsArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<TabsContext, TabsEvents, TabsState>;
   start: "idle";
   parts: {
     root: {};
@@ -60,7 +60,7 @@ export declare const def: {
     };
   };
   settled: ({ event, focus }: {
-    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly event: import("@spinjs/components/runtime").AnyEvent;
     readonly before: {
       readonly context: TabsContext;
       readonly state: TabsState;
@@ -74,10 +74,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 TabsApi = ApiOf<typeof def>;
-export declare const tabs: import("@spinjs/runtime").DefinedComponent<TabsApi, TabsArgs>;
-export type { TabsArgs, TabsItem, TabsState };
-//# sourceMappingURL=tabs.presentation.d.ts.map
+export declare const tabs: import("@spinjs/components/runtime").DefinedComponent<TabsApi, TabsArgs>;
+export type { TabsArgs, TabsItem, TabsState };

package/dist/tabs/tabs.presentation.js

@@ -1,6 +1,6 @@
 import { ROVING_KEYS } from "../shared/keyboard.js";
 import { tabs as tabs$1 } from "./tabs.machine.js";
-import { ariaControls, ariaLabelledBy, ariaOrientation, defineComponent, optionRow } from "@spinjs/runtime";
+import { ariaControls, ariaLabelledBy, ariaOrientation, defineComponent, optionRow } from "@spinjs/components/runtime";
 // src/tabs/tabs.presentation.ts
 const enabledValues = (context) => context.items.map((item) => item.value);
 const neighbor = (context, value, direction) => {

package/dist/tabs/tabs.state.d.ts

@@ -57,5 +57,4 @@ export declare function parseItems(raw: unknown): TabsItem[];
  * The seed twin (`defaultValue`) is the host's write of the selection —
  * the framework resolved it into the args — so it counts as a write too.
  */
-export declare function initial(args: TabsArgs | undefined, authored: (name: string) => boolean): TabsContext;
-//# sourceMappingURL=tabs.state.d.ts.map
+export declare function initial(args: TabsArgs | undefined, authored: (name: string) => boolean): TabsContext;

package/dist/tabs/tabs.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/tabs/tabs.state.ts
 /** Shape raw items into rows: label-from-value, content-to-empty, and a row
 * without a usable value drops out. Shared by `initial` and the field

package/dist/tabs/tabs.transitions.d.ts

@@ -1,8 +1,7 @@
-import { TabsContext } from "./tabs.state.js";
 import { TabsEvents } from "./tabs.events.js";
-import { AssignFor } from "@spinjs/runtime/fsm";
+import { TabsContext } from "./tabs.state.js";
+import { AssignFor } from "@spinjs/components/fsm";
 type TabsAssign<K extends keyof TabsEvents = keyof TabsEvents> = AssignFor<TabsContext, TabsEvents, K>;
 export declare const setValue: TabsAssign<"VALUE.SET">;
 export declare const selectTab: TabsAssign<"TAB.SELECT">;
-export {};
-//# sourceMappingURL=tabs.transitions.d.ts.map
+export {};

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

@@ -8,15 +8,15 @@ const machine = tags({
 </script>
 <div class="w-full" {...machine.getRootProps()}>
  <label
-  class={["mb-1 block text-xs font-medium text-text transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
+  class={["mb-1 block transition-opacity duration-fast ease-decelerate", { "opacity-50": machine.disabled }]}
   {...machine.getLabelProps()}>Skills</label>
  <div
-  class={["flex flex-wrap items-center gap-1 rounded-md border border-solid border-border bg-surface-raised p-1 transition-shadow duration-fast ease-decelerate", { "ring-2 ring-border-strong": machine.focused }]}
+  class={["flex flex-wrap items-center gap-1 rounded-md border bg-surface-raised p-1 transition-shadow duration-fast ease-decelerate", { "ring-2 ring-border-strong": machine.focused }]}
   {...machine.getControlProps()}>
   <template for={machine.getTags()} as={row}
    key={row.value + ":" + row.occurrence}>
    <span
-    class={["inline-flex items-center gap-1 rounded-sm border border-solid border-border bg-surface py-1 pl-2 pr-1 text-xs text-text transition-colors duration-fast ease-decelerate", { "border-primary text-primary": machine.getItemState(row).highlighted }]}
+    class={["inline-flex items-center gap-1 rounded-sm border bg-surface py-1 pl-2 pr-1 type-caption transition-colors duration-fast ease-decelerate", { "border-primary text-primary": machine.getItemState(row).highlighted }]}
     {...machine.getItemProps(row)}>
     <span class="inline-flex items-center gap-1"
      {...machine.getItemPreviewProps(row)}>
@@ -24,19 +24,19 @@ const machine = tags({
       {...machine.getItemTextProps(row)}>{row.value}</span>
      <button
       class={["bare ghost icon s-sm", { "text-primary": machine.getItemState(row).highlighted }]}
-      {...machine.getItemDeleteTriggerProps(row)}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+      {...machine.getItemDeleteTriggerProps(row)}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
     </span>
     <input
-   class="bare w-20 rounded-sm px-1 py-1 text-xs"
-   {...machine.getItemInputProps(row)} />
+   class="bare w-20 rounded-sm px-1 py-1"
+   {...machine.getItemInputProps(row)}>
    </span>
   </template>
   <input
-  class="bare min-w-16 flex-1 bg-transparent py-1 text-xs outline-none "
-  {...machine.getInputProps()} />
+  class="bare min-w-16 flex-1 bg-transparent py-1 outline-none "
+  {...machine.getInputProps()}>
   <button aria-label="Clear tags"
    class="ghost icon s-sm"
-   {...machine.getClearTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+   {...machine.getClearTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
  </div>
  <input {...machine.getHiddenInputProps()} />
  <div class="visually-hidden" {...machine.getLiveRegionProps()}></div>

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

@@ -0,0 +1,5 @@
+// src/tags-input/examples/basic.html
+var basic_default = "<script lang=\"ts\">\nimport { tags } from \"../tags.presentation.ts\";\n\nconst machine = tags({\n defaultValue: '[\"TypeScript\",\"React\",\"CSS\"]',\n placeholder: \"Add a skill…\",\n});\n<\/script>\n<div class=\"w-full\" {...machine.getRootProps()}>\n <label\n  class={[\"mb-1 block transition-opacity duration-fast ease-decelerate\", { \"opacity-50\": machine.disabled }]}\n  {...machine.getLabelProps()}>Skills</label>\n <div\n  class={[\"flex flex-wrap items-center gap-1 rounded-md border bg-surface-raised p-1 transition-shadow duration-fast ease-decelerate\", { \"ring-2 ring-border-strong\": machine.focused }]}\n  {...machine.getControlProps()}>\n  <template for={machine.getTags()} as={row}\n   key={row.value + \":\" + row.occurrence}>\n   <span\n    class={[\"inline-flex items-center gap-1 rounded-sm border bg-surface py-1 pl-2 pr-1 type-caption transition-colors duration-fast ease-decelerate\", { \"border-primary text-primary\": machine.getItemState(row).highlighted }]}\n    {...machine.getItemProps(row)}>\n    <span class=\"inline-flex items-center gap-1\"\n     {...machine.getItemPreviewProps(row)}>\n     <span class=\"truncate\"\n      {...machine.getItemTextProps(row)}>{row.value}</span>\n     <button\n      class={[\"bare ghost icon s-sm\", { \"text-primary\": machine.getItemState(row).highlighted }]}\n      {...machine.getItemDeleteTriggerProps(row)}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n    </span>\n    <input\n   class=\"bare w-20 rounded-sm px-1 py-1\"\n   {...machine.getItemInputProps(row)}>\n   </span>\n  </template>\n  <input\n  class=\"bare min-w-16 flex-1 bg-transparent py-1 outline-none \"\n  {...machine.getInputProps()}>\n  <button aria-label=\"Clear tags\"\n   class=\"ghost icon s-sm\"\n   {...machine.getClearTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n </div>\n <input {...machine.getHiddenInputProps()} />\n <div class=\"visually-hidden\" {...machine.getLiveRegionProps()}></div>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/tags-input/examples/with-combobox.html

@@ -6,39 +6,39 @@ const machine_tags = tags({});
 const machine_combobox = combobox({items: [{"value":"react","label":"React"},{"value":"solid","label":"Solid"},{"value":"svelte","label":"Svelte"},{"value":"vue","label":"Vue"}]});
 </script>
 <div class="w-full">
- <label class="mb-1 block text-xs font-medium text-text"
+ <label class="mb-1 block"
   {...machine_tags.getLabelProps()}>Frameworks</label>
  <div
-  class="flex flex-wrap items-center gap-1 rounded-md border border-solid border-border bg-surface-raised p-1"
+  class="flex flex-wrap items-center gap-1 rounded-md border bg-surface-raised p-1"
   {...machine_tags.getControlProps()}>
   <template for={machine_tags.getTags()} as={row}
    key={row.value + ":" + row.occurrence}>
    <span
-    class={["inline-flex items-center gap-1 rounded-sm border border-solid border-border bg-surface py-1 pl-2 pr-1 text-xs text-text", { "border-primary text-primary": machine_tags.getItemState(row).highlighted }]}
+    class={["inline-flex items-center gap-1 rounded-sm border bg-surface py-1 pl-2 pr-1 type-caption", { "border-primary text-primary": machine_tags.getItemState(row).highlighted }]}
     {...machine_tags.getItemProps(row)}>
     <span class="inline-flex items-center gap-1"
      {...machine_tags.getItemPreviewProps(row)}>
      <span class="truncate"
       {...machine_tags.getItemTextProps(row)}>{row.value}</span>
      <button
-      class="bare inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-text-muted hover:text-text"
-      {...machine_tags.getItemDeleteTriggerProps(row)}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+      class="bare inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted"
+      {...machine_tags.getItemDeleteTriggerProps(row)}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
     </span>
     <input
-   class="bare w-20 rounded-sm px-1 py-1 text-xs"
-   {...machine_tags.getItemInputProps(row)} />
+   class="bare w-20 rounded-sm px-1 py-1"
+   {...machine_tags.getItemInputProps(row)}>
    </span>
   </template>
-  <div class="relative min-w-16 flex-1" {...machine_combobox.getRootProps()}>
+  <div class="relative flex min-w-16 flex-1" {...machine_combobox.getRootProps()}>
    <input
-  class="w-full border-0 bg-transparent py-1 text-xs"
-  {...machine_combobox.getInputProps()} />
+  class="bare min-w-16 flex-1"
+  {...machine_combobox.getInputProps()}>
    <button aria-hidden="true" tabindex="-1" class="hidden"
     {...machine_combobox.getClearTriggerProps()}></button>
    <div class="absolute left-0 top-full z-dropdown mt-1 w-full origin-top"
     {...machine_combobox.getPositionerProps()}>
     <div
-     class="overflow-hidden rounded-lg border border-solid border-border bg-surface-raised shadow-lg"
+     class="overflow-hidden rounded-lg border bg-surface-raised shadow-lg"
      {...machine_combobox.getContentProps()}>
      <div class="max-h-60 overflow-y-auto p-1"
       {...machine_combobox.getListProps()}>
@@ -47,7 +47,7 @@ const machine_combobox = combobox({items: [{"value":"react","label":"React"},{"v
        <template for={machine_combobox.getRows(block)} as={brow}
         key={brow.value}>
         <div
-         class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 text-xs text-text", { "bg-surface": machine_combobox.getItemState(brow).highlighted }]}
+         class={["relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body", { "bg-surface": machine_combobox.getItemState(brow).highlighted }]}
          show={brow.label.toLowerCase().indexOf(machine_combobox.inputValue.toLowerCase()) !== -1}
          {...machine_combobox.getItemProps(brow)}>{brow.label}</div>
        </template>
@@ -57,8 +57,8 @@ const machine_combobox = combobox({items: [{"value":"react","label":"React"},{"v
    </div>
   </div>
   <button aria-label="Clear tags"
-   class="bare inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-text-muted hover:text-text"
-   {...machine_tags.getClearTriggerProps()}><span class="i-lucide-x text-xs" aria-hidden="true"></span></button>
+   class="bare inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted"
+   {...machine_tags.getClearTriggerProps()}><span class="i-lucide-x type-caption" aria-hidden="true"></span></button>
  </div>
  <input {...machine_tags.getHiddenInputProps()} />
 </div>

package/dist/tags-input/examples/with-combobox.html.js

@@ -0,0 +1,5 @@
+// src/tags-input/examples/with-combobox.html
+var with_combobox_default = "<script lang=\"ts\">\nimport { tags } from \"../tags.presentation.ts\";\nimport { combobox } from \"../../combobox/combobox.presentation.ts\";\n\nconst machine_tags = tags({});\nconst machine_combobox = combobox({items: [{\"value\":\"react\",\"label\":\"React\"},{\"value\":\"solid\",\"label\":\"Solid\"},{\"value\":\"svelte\",\"label\":\"Svelte\"},{\"value\":\"vue\",\"label\":\"Vue\"}]});\n<\/script>\n<div class=\"w-full\">\n <label class=\"mb-1 block\"\n  {...machine_tags.getLabelProps()}>Frameworks</label>\n <div\n  class=\"flex flex-wrap items-center gap-1 rounded-md border bg-surface-raised p-1\"\n  {...machine_tags.getControlProps()}>\n  <template for={machine_tags.getTags()} as={row}\n   key={row.value + \":\" + row.occurrence}>\n   <span\n    class={[\"inline-flex items-center gap-1 rounded-sm border bg-surface py-1 pl-2 pr-1 type-caption\", { \"border-primary text-primary\": machine_tags.getItemState(row).highlighted }]}\n    {...machine_tags.getItemProps(row)}>\n    <span class=\"inline-flex items-center gap-1\"\n     {...machine_tags.getItemPreviewProps(row)}>\n     <span class=\"truncate\"\n      {...machine_tags.getItemTextProps(row)}>{row.value}</span>\n     <button\n      class=\"bare inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-sm text-muted\"\n      {...machine_tags.getItemDeleteTriggerProps(row)}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n    </span>\n    <input\n   class=\"bare w-20 rounded-sm px-1 py-1\"\n   {...machine_tags.getItemInputProps(row)}>\n   </span>\n  </template>\n  <div class=\"relative flex min-w-16 flex-1\" {...machine_combobox.getRootProps()}>\n   <input\n  class=\"bare min-w-16 flex-1\"\n  {...machine_combobox.getInputProps()}>\n   <button aria-hidden=\"true\" tabindex=\"-1\" class=\"hidden\"\n    {...machine_combobox.getClearTriggerProps()}></button>\n   <div class=\"absolute left-0 top-full z-dropdown mt-1 w-full origin-top\"\n    {...machine_combobox.getPositionerProps()}>\n    <div\n     class=\"overflow-hidden rounded-lg border bg-surface-raised shadow-lg\"\n     {...machine_combobox.getContentProps()}>\n     <div class=\"max-h-60 overflow-y-auto p-1\"\n      {...machine_combobox.getListProps()}>\n      <template for={machine_combobox.getBlocks()} as={block}\n       key={block.id}>\n       <template for={machine_combobox.getRows(block)} as={brow}\n        key={brow.value}>\n        <div\n         class={[\"relative flex cursor-default select-none items-center gap-2 rounded-md px-2 py-1 type-body\", { \"bg-surface\": machine_combobox.getItemState(brow).highlighted }]}\n         show={brow.label.toLowerCase().indexOf(machine_combobox.inputValue.toLowerCase()) !== -1}\n         {...machine_combobox.getItemProps(brow)}>{brow.label}</div>\n       </template>\n      </template>\n     </div>\n    </div>\n   </div>\n  </div>\n  <button aria-label=\"Clear tags\"\n   class=\"bare inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-sm text-muted\"\n   {...machine_tags.getClearTriggerProps()}><span class=\"i-lucide-x type-caption\" aria-hidden=\"true\"></span></button>\n </div>\n <input {...machine_tags.getHiddenInputProps()} />\n</div>\n";
+export { with_combobox_default as default };
+
+//# sourceMappingURL=with-combobox.html.js.map

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

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface TagsEvents {
   "FOCUS": {};
   "POINTER_DOWN": {};
@@ -73,5 +73,4 @@ export interface TagsHighlightChange {
 }
 export interface TagsValueInvalid {
   readonly reason: "invalidTag" | "rangeOverflow";
-}
-//# sourceMappingURL=tags.events.d.ts.map
+}

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

@@ -1,6 +1,8 @@
-import { TagsEvent, TagsEvents } from "./tags.events.js";
+/**
+ * Tags-input machine: four states, one flat config.
+ */
 import { SanitizeValue, TagsArgs, TagsContext, TagsLog, TagsState, TagsValidateArgs, ValidateTag, initial, sameTags, stringsOf } from "./tags.state.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { TagsEvent, TagsEvents } from "./tags.events.js";
+import { Machine } from "@spinjs/components/fsm";
 export declare function tags(args?: TagsArgs, authored?: (name: string) => boolean): Machine<TagsContext, TagsEvents, TagsState>;
-export { type SanitizeValue, type TagsArgs, type TagsContext, type TagsEvent, type TagsEvents, type TagsLog, type TagsValidateArgs, type ValidateTag, initial, sameTags, stringsOf };
-//# sourceMappingURL=tags.machine.d.ts.map
+export { type SanitizeValue, type TagsArgs, type TagsContext, type TagsEvent, type TagsEvents, type TagsLog, type TagsValidateArgs, type ValidateTag, initial, sameTags, stringsOf };

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

@@ -1,6 +1,6 @@
 import { addFromInput, caretAtStart, clampIndex, initial, sameTags, stringsOf, uniq, withSelectLog } from "./tags.state.js";
 import { addOnPaste, addTagFromPaste, beginEdit, canInsert, canLeaveInput, caretNotAtStart, clearEditAll, clearHighlight, clearInputValue, clearOnBlur, deleteHighlighted, deleteTag, finishEdit, hasHighlighted, highlightAtIndex, highlightLast, highlightPrev, insertOnBlur, setInputValue } from "./tags.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/tags-input/tags.machine.ts
 /**
 * Tags-input machine: four states, one flat config.
@@ -17,7 +17,7 @@ const config = {
 		log: null,
 		logPrev: null,
 		refusal: null,
-		max: Infinity,
+		max: 1e400,
 		allowOverflow: false,
 		allowDuplicates: false,
 		editable: true,

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

@@ -1,6 +1,6 @@
-import { TagsEvents, TagsHighlightChange, TagsInputValueChange, TagsValueChange, TagsValueInvalid } from "./tags.events.js";
 import { TagsArgs, TagsContext, TagsState } from "./tags.state.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { TagsEvents, TagsHighlightChange, TagsInputValueChange, TagsValueChange, TagsValueInvalid } from "./tags.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 export interface TagsTranslations {
   readonly clearTriggerLabel: string;
   readonly deleteTagTriggerLabel: (value: string) => string;
@@ -37,7 +37,7 @@ type SlotLike<R> = SlotViewFor<R, TagsContext, TagsEvents, TagsState>;
 /** The component's public state: the names the markup may key on. */
 export declare const def: {
   name: string;
-  machine: (args: TagsArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<TagsContext, TagsEvents, TagsState>;
+  machine: (args: TagsArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<TagsContext, TagsEvents, TagsState>;
   start: (raw: Record<string, unknown>) => "idle" | "focused:input";
   reconcile: ({ context, parsed, authored }: {
     readonly context: TagsContext;
@@ -130,7 +130,7 @@ export declare const def: {
     };
     hiddenInput: {
       id: string;
-      attrs: (scope: import("@spinjs/runtime").PartView<unknown, TagsContext, Record<string, unknown>, import("@spinjs/runtime").EventUnion<TagsEvents>, TagsState>) => {
+      attrs: (scope: import("@spinjs/components/runtime").PartView<unknown, TagsContext, Record<string, unknown>, import("@spinjs/components/runtime").EventUnion<TagsEvents>, TagsState>) => {
         type: string;
         hidden: boolean;
         name: string | undefined;
@@ -371,6 +371,5 @@ export declare const def: {
   };
 };
 export type TagsApi = ApiOf<typeof def>;
-export declare const tags: import("@spinjs/runtime").DefinedComponent<TagsApi, TagsArgs>;
-export type { TagsHighlightChange, TagsInputValueChange, TagsValueChange, TagsValueInvalid };
-//# sourceMappingURL=tags.presentation.d.ts.map
+export declare const tags: import("@spinjs/components/runtime").DefinedComponent<TagsApi, TagsArgs>;
+export type { TagsHighlightChange, TagsInputValueChange, TagsValueChange, TagsValueInvalid };

package/dist/tags-input/tags.presentation.js

@@ -1,5 +1,5 @@
 import { tags as tags$1 } from "./tags.machine.js";
-import { ariaDisabled, ariaInvalid, defineComponent, isRecord, liveRegion } from "@spinjs/runtime";
+import { ariaDisabled, ariaInvalid, defineComponent, isRecord, liveRegion } from "@spinjs/components/runtime";
 // src/tags-input/tags.presentation.ts
 const defaultTranslations = {
 	clearTriggerLabel: "Clear all tags",

package/dist/tags-input/tags.state.d.ts

@@ -105,5 +105,4 @@ export declare const withSelectLog: (ctx: TagsContext, index: number | null) =>
 export declare const valueAtIndex: (ctx: TagsContext, index: number) => string | undefined;
 /** Append the sanitized input text, then clear it. Guarded by `canInsert`
  * at every call site. */
-export declare const addFromInput: (ctx: TagsContext) => Partial<TagsContext>;
-//# sourceMappingURL=tags.state.d.ts.map
+export declare const addFromInput: (ctx: TagsContext) => Partial<TagsContext>;

package/dist/tags-input/tags.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/tags-input/tags.state.ts
 /** Strings off the transport: JSON text or arrays, well-shaped only.
 * The scope grammar coerces `= []` to `["[]"]` — the lone artifact entry
@@ -24,7 +24,7 @@ const clampIndex = (index, length) => index < 0 || index >= length ? null : inde
 const sanitizeDefault = (value) => value.trim();
 const validateDefault = () => true;
 function initial(args, authored) {
-	const count = (value) => typeof value === "number" && Number.isFinite(value) ? value : Infinity;
+	const count = (value) => typeof value === "number" && Number.isFinite(value) ? value : 1e400;
 	const flag = (value) => value === true;
 	const text = (value, fallback) => typeof value === "string" ? value : fallback;
 	const fn = (value, fallback) => typeof value === "function" ? value : fallback;

package/dist/tags-input/tags.transitions.d.ts

@@ -1,5 +1,5 @@
-import { TagsEvent } from "./tags.events.js";
 import { TagsContext, addFromInput, canAdd, caretAtStart, isAtMax } from "./tags.state.js";
+import { TagsEvent } from "./tags.events.js";
 export declare const setInputValue: (_ctx: TagsContext, e: TagsEvent) => Partial<TagsContext>;
 export declare const addTagFromPaste: (ctx: TagsContext, e: TagsEvent) => Partial<TagsContext>;
 export declare const deleteTag: (ctx: TagsContext, e: TagsEvent) => Partial<TagsContext>;
@@ -19,5 +19,4 @@ export declare const clearOnBlur: (ctx: TagsContext) => boolean;
 export declare const addOnPaste: (ctx: TagsContext) => boolean;
 export declare const canLeaveInput: (ctx: TagsContext, event: TagsEvent) => boolean;
 export declare const caretNotAtStart: (_ctx: TagsContext, event: TagsEvent) => boolean;
-export { addFromInput, canAdd, caretAtStart, isAtMax };
-//# sourceMappingURL=tags.transitions.d.ts.map
+export { addFromInput, canAdd, caretAtStart, isAtMax };