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

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

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

package/dist/steps/examples/navigation.html

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

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

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

package/dist/steps/examples/onboarding.html

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

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

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

package/dist/steps/examples/progress.html

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

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

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

package/dist/steps/examples/segmented.html

@@ -10,14 +10,14 @@ const machine = steps({
 
 <div class="w-full" {...machine.getRootProps()}>
  <div class="mb-3 flex items-center justify-between gap-2">
-  <span class="text-sm font-medium text-text">Deploy #4821</span>
+  <span class="type-label">Deploy #4821</span>
   <span
-   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+   class="type-caption text-muted">Step {machine.value + 1} of {machine.count}</span>
  </div>
 
  <div class="flex items-center gap-4">
   <button
-   class="secondary icon s-sm p-2 transition-colors hover:bg-surface disabled:opacity-50"
+   class="secondary icon s-sm disabled:opacity-50"
    {...machine.getPrevTriggerProps()}><span class="i-lucide-chevron-left"></span></button>
   <ol class="row-list flex-1 items-start gap-1" {...machine.getListProps()}>
    <template for={machine.getItems()} as={row} key={row}>
@@ -27,14 +27,14 @@ const machine = steps({
      class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
      {...machine.getTriggerProps(row)}
     ><span
-      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label", { "border bg-surface-raised text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).current || machine.getItemState(row).completed }]}
       {...machine.getIndicatorProps(row)}
-     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+   ></span><span class="type-label">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden="true" class={["mx-3 h-1 flex-1", { "bg-primary/20": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
    </li>
    </template>
   </ol>
   <button
-   class="secondary icon s-sm p-2 transition-colors hover:bg-surface disabled:opacity-50"
+   class="secondary icon s-sm disabled:opacity-50"
    {...machine.getNextTriggerProps()}><span class="i-lucide-chevron-right"></span></button>
  </div>
 </div>

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

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

package/dist/steps/examples/vertical.html

@@ -11,9 +11,9 @@ const machine = steps({
 
 <div class="w-full" {...machine.getRootProps()}>
  <div class="mb-3 flex items-center justify-between gap-2">
-  <span class="text-sm font-medium text-text">Onboarding</span>
+  <span class="type-label">Onboarding</span>
   <span
-   class="text-xs text-text-muted">Step {machine.value + 1} of {machine.count}</span>
+   class="type-caption text-muted">Step {machine.value + 1} of {machine.count}</span>
  </div>
 
  <ol class="flow-list flex flex-col items-stretch gap-1" {...machine.getListProps()}>
@@ -24,9 +24,9 @@ const machine = steps({
      class="bare flex shrink-0 items-center gap-3 bg-transparent text-left"
      {...machine.getTriggerProps(row)}
     ><span
-      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid text-sm font-semibold", { "border-border bg-surface-raised text-text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).completed, "border-primary bg-surface text-primary": machine.getItemState(row).current }]}
+      class={["relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label", { "border bg-surface-raised text-muted": machine.getItemState(row).incomplete, "border-primary bg-primary text-on-primary": machine.getItemState(row).completed, "border-primary bg-surface text-primary": machine.getItemState(row).current }]}
       {...machine.getIndicatorProps(row)}
-     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 0}><span class="i-lucide-user text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 1}><span class="i-lucide-settings text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 2}><span class="i-lucide-refresh-cw text-sm"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 3}><span class="i-lucide-check text-sm"></span></span></span><span class="flex flex-col"><span class="text-sm font-medium text-text">{machine.getItemTitle(row)}</span><span class="text-xs text-text-muted" show={row === 0}>Personal details</span><span class="text-xs text-text-muted" show={row === 1}>Account prefs</span><span class="text-xs text-text-muted" show={row === 2}>Sync data</span><span class="text-xs text-text-muted" show={row === 3}>All done</span></span></button><span show={row < machine.count - 1} aria-hidden="true" class={["ml-4 my-1 h-6 w-1 rounded-full", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
+     ><span aria-hidden="true" show={machine.getItemState(row).completed}><span class="i-lucide-check type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 0}><span class="i-lucide-user type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 1}><span class="i-lucide-settings type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 2}><span class="i-lucide-refresh-cw type-code"></span></span><span aria-hidden="true" show={machine.getItemState(row).completed === false && row === 3}><span class="i-lucide-check type-code"></span></span></span><span class="flex flex-col"><span class="type-label">{machine.getItemTitle(row)}</span><span class="type-caption text-muted" show={row === 0}>Personal details</span><span class="type-caption text-muted" show={row === 1}>Account prefs</span><span class="type-caption text-muted" show={row === 2}>Sync data</span><span class="type-caption text-muted" show={row === 3}>All done</span></span></button><span show={row < machine.count - 1} aria-hidden="true" class={["ml-4 my-1 h-6 w-1 rounded-full", { "bg-border": machine.getItemState(row).completed === false, "bg-primary": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>
    </li>
   </template>
  </ol>
@@ -42,7 +42,7 @@ const machine = steps({
 
  <div class="mt-3" {...machine.getContentProps(machine.value)}>
   <p
-   class="rounded-md border border-solid border-border bg-surface-raised p-3 text-sm text-text">{machine.getItemTitle(machine.value)}</p>
+   class="rounded-md border bg-surface-raised p-3">{machine.getItemTitle(machine.value)}</p>
  </div>
 
  <div class="mt-3 flex items-center gap-2">

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

@@ -0,0 +1,5 @@
+// src/steps/examples/vertical.html
+var vertical_default = "<script lang=\"ts\">\nimport { steps } from \"../steps.presentation.ts\";\n\nconst machine = steps({\n count: 4,\n titles: [\"Profile\", \"Settings\", \"Sync\", \"Complete\"],\n step: 1,\n orientation: \"vertical\",\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n <div class=\"mb-3 flex items-center justify-between gap-2\">\n  <span class=\"type-label\">Onboarding</span>\n  <span\n   class=\"type-caption text-muted\">Step {machine.value + 1} of {machine.count}</span>\n </div>\n\n <ol class=\"flow-list flex flex-col items-stretch gap-1\" {...machine.getListProps()}>\n  <template for={machine.getItems()} as={row} key={row}>\n   <li class=\"relative flex min-w-0 flex-col items-start\"\n    {...machine.getItemProps(row)}>\n    <button\n     class=\"bare flex shrink-0 items-center gap-3 bg-transparent text-left\"\n     {...machine.getTriggerProps(row)}\n    ><span\n      class={[\"relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label\", { \"border bg-surface-raised text-muted\": machine.getItemState(row).incomplete, \"border-primary bg-primary text-on-primary\": machine.getItemState(row).completed, \"border-primary bg-surface text-primary\": machine.getItemState(row).current }]}\n      {...machine.getIndicatorProps(row)}\n     ><span aria-hidden=\"true\" show={machine.getItemState(row).completed}><span class=\"i-lucide-check type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false && row === 0}><span class=\"i-lucide-user type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false && row === 1}><span class=\"i-lucide-settings type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false && row === 2}><span class=\"i-lucide-refresh-cw type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false && row === 3}><span class=\"i-lucide-check type-code\"></span></span></span><span class=\"flex flex-col\"><span class=\"type-label\">{machine.getItemTitle(row)}</span><span class=\"type-caption text-muted\" show={row === 0}>Personal details</span><span class=\"type-caption text-muted\" show={row === 1}>Account prefs</span><span class=\"type-caption text-muted\" show={row === 2}>Sync data</span><span class=\"type-caption text-muted\" show={row === 3}>All done</span></span></button><span show={row < machine.count - 1} aria-hidden=\"true\" class={[\"ml-4 my-1 h-6 w-1 rounded-full\", { \"bg-border\": machine.getItemState(row).completed === false, \"bg-primary\": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>\n   </li>\n  </template>\n </ol>\n\n <div\n  class=\"mt-3 h-2 w-full overflow-hidden rounded-full bg-surface-sunken\"\n  {...machine.getProgressProps()}\n >\n  <div\n   class=\"h-full rounded-full bg-primary transition-all duration-fast ease-decelerate\"\n   {...machine.getProgressFillProps()}></div>\n </div>\n\n <div class=\"mt-3\" {...machine.getContentProps(machine.value)}>\n  <p\n   class=\"rounded-md border bg-surface-raised p-3\">{machine.getItemTitle(machine.value)}</p>\n </div>\n\n <div class=\"mt-3 flex items-center gap-2\">\n  <button\n   class=\"secondary s-sm disabled:opacity-50\"\n   {...machine.getPrevTriggerProps()}\n  >Back</button>\n  <button\n   class=\"s-sm disabled:opacity-50\"\n   {...machine.getNextTriggerProps()}\n  >Next</button>\n </div>\n</div>";
+export { vertical_default as default };
+
+//# sourceMappingURL=vertical.html.js.map

package/dist/steps/examples/verticallabels.html

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

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

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

package/dist/steps/examples/verticalnavigation.html

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

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

@@ -0,0 +1,5 @@
+// src/steps/examples/verticalnavigation.html
+var verticalnavigation_default = "<script lang=\"ts\">\nimport { steps } from \"../steps.presentation.ts\";\n\nconst machine = steps({\n count: 4,\n titles: [\"Build\", \"Test\", \"Rollout\", \"Verify\"],\n step: 0,\n orientation: \"vertical\",\n});\n<\/script>\n\n<div class=\"w-full\" {...machine.getRootProps()}>\n <ol class=\"flow-list flex flex-col gap-1\" {...machine.getListProps()}>\n  <template for={machine.getItems()} as={row} key={row}>\n   <li class=\"relative flex min-w-0 flex-col items-start\"\n    {...machine.getItemProps(row)}>\n    <button\n     class=\"bare flex shrink-0 items-center gap-3 bg-transparent text-left\"\n     {...machine.getTriggerProps(row)}\n    ><span\n      class={[\"relative grid h-8 w-8 shrink-0 place-items-center rounded-full border-2 border-solid type-label\", { \"border bg-surface-raised text-muted\": machine.getItemState(row).incomplete, \"border-primary bg-primary text-on-primary\": machine.getItemState(row).current || machine.getItemState(row).completed }]}\n      {...machine.getIndicatorProps(row)}\n     ><span aria-hidden=\"true\" show={machine.getItemState(row).completed}><span class=\"i-lucide-check type-code\"></span></span><span aria-hidden=\"true\" show={machine.getItemState(row).completed === false}>{row + 1}</span></span><span class=\"type-label\">{machine.getItemTitle(row)}</span></button><span show={row < machine.count - 1} aria-hidden=\"true\" class={[\"ml-4 my-1 h-5 w-1 rounded-full\", { \"bg-border\": machine.getItemState(row).completed === false, \"bg-primary\": machine.getItemState(row).completed }]} {...machine.getSeparatorProps(row)}></span>\n   </li>\n  </template>\n </ol>\n\n <div class=\"mt-4 flex items-center gap-2\">\n  <button\n   class=\"secondary s-sm disabled:opacity-50\"\n   {...machine.getPrevTriggerProps()}>Prev step</button>\n  <button\n   class=\"secondary s-sm disabled:opacity-50\"\n   {...machine.getNextTriggerProps()}>Next step</button>\n </div>\n</div>\n";
+export { verticalnavigation_default as default };
+
+//# sourceMappingURL=verticalnavigation.html.js.map

package/dist/steps/steps.events.d.ts

@@ -1,4 +1,4 @@
-import { EventUnion } from "@spinjs/runtime/fsm";
+import { EventUnion } from "@spinjs/components/fsm";
 export interface StepsEvents {
   "STEP.SET": {
     value: number;
@@ -23,5 +23,4 @@ export type StepsInvalid = {
   readonly step: number;
   action: "next" | "set";
   targetStep: number;
-};
-//# sourceMappingURL=steps.events.d.ts.map
+};

package/dist/steps/steps.machine.d.ts

@@ -1,6 +1,6 @@
+/** Steps machine: one idle state with guarded transitions. */
 import { StepsArgs, StepsContext, StepsItemState, StepsState, hasNextStep, hasPrevStep, isCompleted, itemState, percent } from "./steps.state.js";
 import { StepsEvents, StepsInvalid, StepsStepChange } from "./steps.events.js";
-import { Machine } from "@spinjs/runtime/fsm";
+import { Machine } from "@spinjs/components/fsm";
 export declare function steps(args?: StepsArgs, authored?: (name: string) => boolean): Machine<StepsContext, StepsEvents, StepsState>;
-export { type StepsInvalid, type StepsItemState, type StepsStepChange, hasNextStep, hasPrevStep, isCompleted, itemState, percent };
-//# sourceMappingURL=steps.machine.d.ts.map
+export { type StepsInvalid, type StepsItemState, type StepsStepChange, hasNextStep, hasPrevStep, isCompleted, itemState, percent };

package/dist/steps/steps.machine.js

@@ -1,6 +1,6 @@
 import { hasNextStep, hasPrevStep, initial, isCompleted, itemState, percent } from "./steps.state.js";
 import { applyNextStep, applySetStep, canNextStep, canSetStep, prevStep, recordInvalidNext, recordInvalidSet, resetStep, setCount } from "./steps.transitions.js";
-import { createMachine } from "@spinjs/runtime/fsm";
+import { createMachine } from "@spinjs/components/fsm";
 // src/steps/steps.machine.ts
 /** Steps machine: one idle state with guarded transitions. */
 function steps(args = {}, authored = () => false) {

package/dist/steps/steps.presentation.d.ts

@@ -1,6 +1,6 @@
 import { StepsArgs, StepsContext, StepsItemState, StepsState } from "./steps.state.js";
 import { StepsEvents } from "./steps.events.js";
-import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/components/runtime";
 export type StepsComplete = {
   readonly step: number;
 };
@@ -8,7 +8,7 @@ type ScopeLike = ViewFor<StepsContext, StepsEvents, StepsState>;
 type SlotLike<R> = SlotViewFor<R, StepsContext, StepsEvents, StepsState>;
 export declare const def: {
   name: string;
-  machine: (args: StepsArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<StepsContext, StepsEvents, "idle">;
+  machine: (args: StepsArgs, authored: (name: string) => boolean) => import("@spinjs/components/runtime").Machine<StepsContext, StepsEvents, "idle">;
   start: "idle";
   parts: {
     root: {
@@ -172,6 +172,5 @@ export declare const def: {
   };
 };
 export type StepsApi = ApiOf<typeof def>;
-export declare const steps: import("@spinjs/runtime").DefinedComponent<StepsApi, StepsArgs>;
-export type { StepsArgs, StepsState };
-//# sourceMappingURL=steps.presentation.d.ts.map
+export declare const steps: import("@spinjs/components/runtime").DefinedComponent<StepsApi, StepsArgs>;
+export type { StepsArgs, StepsState };

package/dist/steps/steps.presentation.js

@@ -1,6 +1,6 @@
 import { hasNextStep, hasPrevStep, isCompleted, itemState, percent } from "./steps.state.js";
 import { steps as steps$1 } from "./steps.machine.js";
-import { ariaControls, ariaCurrent, ariaHidden, ariaLabelledBy, ariaOrientation, ariaOwns, defineComponent, optionRow, sliderThumb } from "@spinjs/runtime";
+import { ariaControls, ariaCurrent, ariaHidden, ariaLabelledBy, ariaOrientation, ariaOwns, defineComponent, optionRow, sliderThumb } from "@spinjs/components/runtime";
 // src/steps/steps.presentation.ts
 const parseTitles = (raw) => {
 	if (Array.isArray(raw)) return raw.filter((item) => typeof item === "string");

package/dist/steps/steps.state.d.ts

@@ -35,5 +35,4 @@ export interface StepsItemState {
   readonly last: boolean;
 }
 export declare function itemState(ctx: StepsContext, index: number): StepsItemState;
-export declare function initial(args: StepsArgs | undefined, authored: (name: string) => boolean): StepsContext;
-//# sourceMappingURL=steps.state.d.ts.map
+export declare function initial(args: StepsArgs | undefined, authored: (name: string) => boolean): StepsContext;

package/dist/steps/steps.state.js

@@ -1,4 +1,4 @@
-import { defaultTwin } from "@spinjs/runtime";
+import { defaultTwin } from "@spinjs/components/runtime";
 // src/steps/steps.state.ts
 const asCount = (raw, fallback) => {
 	const n = typeof raw === "number" ? raw : typeof raw === "string" && raw.trim() !== "" ? Number(raw.trim()) : NaN;

package/dist/steps/steps.transitions.d.ts

@@ -1,6 +1,6 @@
-import { StepsContext } from "./steps.state.js";
 import { StepsEvents } from "./steps.events.js";
-import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+import { StepsContext } from "./steps.state.js";
+import { AssignFor, GuardFor } from "@spinjs/components/fsm";
 type StepsAssign<K extends keyof StepsEvents = keyof StepsEvents> = AssignFor<StepsContext, StepsEvents, K>;
 export declare const setCount: StepsAssign<"SET_COUNT">;
 export declare const canSetStep: GuardFor<StepsContext, StepsEvents, "STEP.SET">;
@@ -11,5 +11,4 @@ export declare const applyNextStep: StepsAssign<"STEP.NEXT">;
 export declare const recordInvalidNext: StepsAssign<"STEP.NEXT">;
 export declare const prevStep: StepsAssign<"STEP.PREV">;
 export declare const resetStep: StepsAssign<"STEP.RESET">;
-export {};
-//# sourceMappingURL=steps.transitions.d.ts.map
+export {};

package/dist/tabs/examples/basic.html

@@ -29,13 +29,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-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 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=" 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/basic.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/basic.html
+var basic_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});\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-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 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=\"text-center text-muted\"\n   {...machine.getContentProps(row)}>{row.content}</p>\n </template>\n</div>\n";
+export { basic_default as default };
+
+//# sourceMappingURL=basic.html.js.map

package/dist/tabs/examples/dashboard.html

@@ -16,7 +16,7 @@ const machine = tabs({
  <div class="flex gap-2" {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare rounded-md px-4 py-2 text-md font-medium transition-colors 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 type-body-emphasized transition-colors aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
    >{row.label}</button>
   </template>
@@ -25,21 +25,21 @@ const machine = tabs({
   <div class="grid gap-6" {...machine.getContentProps(row)}>
    <div class="grid gap-4" show={row.value === "overview"}>
     <div class="grid grid-cols-3 gap-4">
-     <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
-      <span class="text-sm text-text-muted">Active users</span>
-      <p class="text-2xl font-semibold text-text">12,480</p>
+     <div class="rounded-md border bg-surface-raised p-4">
+      <span class="type-body text-muted">Active users</span>
+      <div class="type-title">12,480</div>
      </div>
-     <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
-      <span class="text-sm text-text-muted">Conversion</span>
-      <p class="text-2xl font-semibold text-text">3.2%</p>
+     <div class="rounded-md border bg-surface-raised p-4">
+      <span class="type-body text-muted">Conversion</span>
+      <div class="type-title">3.2%</div>
      </div>
-     <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
-      <span class="text-sm text-text-muted">Revenue</span>
-      <p class="text-2xl font-semibold text-text">$48.2k</p>
+     <div class="rounded-md border bg-surface-raised p-4">
+      <span class="type-body text-muted">Revenue</span>
+      <div class="type-title">$48.2k</div>
      </div>
     </div>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
-     <span class="text-md font-medium text-text">Traffic over 7 days</span>
+    <div class="grid gap-3 rounded-md border bg-surface-raised p-6">
+     <span class="type-body-emphasized">Traffic over 7 days</span>
      <div class="mt-4 flex items-end gap-2" style="height: 8rem;">
       <div class="w-full rounded-md bg-primary" style="height: 60%;"></div>
       <div class="w-full rounded-md bg-primary" style="height: 75%;"></div>
@@ -52,60 +52,60 @@ const machine = tabs({
     </div>
    </div>
    <div class="grid gap-4" show={row.value === "analytics"}>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
-     <span class="text-md font-medium text-text">Top pages</span>
-     <ul class="mt-3 grid gap-2">
-      <li class="flex items-center justify-between text-sm text-text"><span>/pricing</span><span class="text-text-muted">4,210</span></li>
-      <li class="flex items-center justify-between text-sm text-text"><span>/docs</span><span class="text-text-muted">3,880</span></li>
-      <li class="flex items-center justify-between text-sm text-text"><span>/blog</span><span class="text-text-muted">2,104</span></li>
+    <div class="grid gap-3 rounded-md border bg-surface-raised p-6">
+     <span class="type-body-emphasized">Top pages</span>
+     <ul class="grid gap-2">
+      <li class="flex items-center justify-between"><span>/pricing</span><span class="text-muted">4,210</span></li>
+      <li class="flex items-center justify-between"><span>/docs</span><span class="text-muted">3,880</span></li>
+      <li class="flex items-center justify-between"><span>/blog</span><span class="text-muted">2,104</span></li>
      </ul>
     </div>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
-     <span class="text-md font-medium text-text">Devices</span>
-     <div class="mt-3 grid gap-2">
-      <div class="flex items-center justify-between text-sm text-text"><span>Desktop</span><span class="text-text-muted">62%</span></div>
-      <div class="flex items-center justify-between text-sm text-text"><span>Mobile</span><span class="text-text-muted">31%</span></div>
-      <div class="flex items-center justify-between text-sm text-text"><span>Tablet</span><span class="text-text-muted">7%</span></div>
+    <div class="grid gap-3 rounded-md border bg-surface-raised p-6">
+     <span class="type-body-emphasized">Devices</span>
+     <div class="grid gap-2">
+      <div class="flex items-center justify-between type-body"><span>Desktop</span><span class="text-muted">62%</span></div>
+      <div class="flex items-center justify-between type-body"><span>Mobile</span><span class="text-muted">31%</span></div>
+      <div class="flex items-center justify-between type-body"><span>Tablet</span><span class="text-muted">7%</span></div>
      </div>
     </div>
    </div>
    <div class="grid gap-4" show={row.value === "reports"}>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
-     <span class="text-md font-medium text-text">Scheduled reports</span>
-     <ul class="mt-3 grid gap-3">
+    <div class="grid gap-3 rounded-md border bg-surface-raised p-6">
+     <span class="type-body-emphasized">Scheduled reports</span>
+     <ul class="grid gap-3">
       <li class="flex items-center justify-between">
        <div class="grid gap-1">
-        <span class="text-sm font-medium text-text">Weekly revenue</span>
-        <span class="text-xs text-text-muted">Every Monday, 09:00</span>
+        <span class="type-label">Weekly revenue</span>
+        <span class="type-caption text-muted">Every Monday, 09:00</span>
        </div>
-       <button class="rounded-md border border-solid border-border px-3 py-1 text-sm font-medium text-text">Edit</button>
+       <button class="secondary s-sm">Edit</button>
       </li>
       <li class="flex items-center justify-between">
        <div class="grid gap-1">
-        <span class="text-sm font-medium text-text">Monthly active users</span>
-        <span class="text-xs text-text-muted">First of month</span>
+        <span class="type-label">Monthly active users</span>
+        <span class="type-caption text-muted">First of month</span>
        </div>
-       <button class="rounded-md border border-solid border-border px-3 py-1 text-sm font-medium text-text">Edit</button>
+       <button class="secondary s-sm">Edit</button>
       </li>
      </ul>
     </div>
    </div>
    <div class="grid gap-4" show={row.value === "team"}>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-6">
-     <span class="text-md font-medium text-text">Members</span>
-     <ul class="mt-3 grid gap-3">
+    <div class="grid gap-3 rounded-md border bg-surface-raised p-6">
+     <span class="type-body-emphasized">Members</span>
+     <ul class="grid gap-3">
       <li class="flex items-center gap-3">
-       <span class="grid h-8 w-8 place-items-center rounded-full bg-selected text-sm font-semibold text-on-selected">AL</span>
+       <span class="grid h-8 w-8 place-items-center rounded-full bg-selected type-label text-on-selected">AL</span>
        <div class="grid gap-0">
-        <span class="text-sm font-medium text-text">Ada Lovelace</span>
-        <span class="text-xs text-text-muted">Owner</span>
+        <span class="type-label">Ada Lovelace</span>
+        <span class="type-caption text-muted">Owner</span>
        </div>
       </li>
       <li class="flex items-center gap-3">
-       <span class="grid h-8 w-8 place-items-center rounded-full bg-surface-sunken text-sm font-semibold text-text">TG</span>
+       <span class="grid h-8 w-8 place-items-center rounded-full bg-surface-sunken type-label">TG</span>
        <div class="grid gap-0">
-        <span class="text-sm font-medium text-text">Tomas G.</span>
-        <span class="text-xs text-text-muted">Editor</span>
+        <span class="type-label">Tomas G.</span>
+        <span class="type-caption text-muted">Editor</span>
        </div>
       </li>
      </ul>

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

@@ -0,0 +1,5 @@
+// src/tabs/examples/dashboard.html
+var dashboard_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  { value: \"overview\", label: \"Overview\", content: \"Fleet health at a glance.\" },\n  { value: \"analytics\", label: \"Analytics\", content: \"Traffic and conversion.\" },\n  { value: \"reports\", label: \"Reports\", content: \"Scheduled exports.\" },\n  { value: \"team\", label: \"Team\", content: \"Members and roles.\" },\n ],\n defaultValue: \"overview\",\n});\n<\/script>\n\n<div class=\"mx-auto flex w-full max-w-xl flex-col gap-6\" {...machine.getRootProps()}>\n <div class=\"flex gap-2\" {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare rounded-md px-4 py-2 type-body-emphasized transition-colors 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  <div class=\"grid gap-6\" {...machine.getContentProps(row)}>\n   <div class=\"grid gap-4\" show={row.value === \"overview\"}>\n    <div class=\"grid grid-cols-3 gap-4\">\n     <div class=\"rounded-md border bg-surface-raised p-4\">\n      <span class=\"type-body text-muted\">Active users</span>\n      <div class=\"type-title\">12,480</div>\n     </div>\n     <div class=\"rounded-md border bg-surface-raised p-4\">\n      <span class=\"type-body text-muted\">Conversion</span>\n      <div class=\"type-title\">3.2%</div>\n     </div>\n     <div class=\"rounded-md border bg-surface-raised p-4\">\n      <span class=\"type-body text-muted\">Revenue</span>\n      <div class=\"type-title\">$48.2k</div>\n     </div>\n    </div>\n    <div class=\"grid gap-3 rounded-md border bg-surface-raised p-6\">\n     <span class=\"type-body-emphasized\">Traffic over 7 days</span>\n     <div class=\"mt-4 flex items-end gap-2\" style=\"height: 8rem;\">\n      <div class=\"w-full rounded-md bg-primary\" style=\"height: 60%;\"></div>\n      <div class=\"w-full rounded-md bg-primary\" style=\"height: 75%;\"></div>\n      <div class=\"w-full rounded-md bg-primary\" style=\"height: 50%;\"></div>\n      <div class=\"w-full rounded-md bg-primary\" style=\"height: 90%;\"></div>\n      <div class=\"w-full rounded-md bg-primary\" style=\"height: 65%;\"></div>\n      <div class=\"w-full rounded-md bg-primary\" style=\"height: 80%;\"></div>\n      <div class=\"w-full rounded-md bg-primary\" style=\"height: 70%;\"></div>\n     </div>\n    </div>\n   </div>\n   <div class=\"grid gap-4\" show={row.value === \"analytics\"}>\n    <div class=\"grid gap-3 rounded-md border bg-surface-raised p-6\">\n     <span class=\"type-body-emphasized\">Top pages</span>\n     <ul class=\"grid gap-2\">\n      <li class=\"flex items-center justify-between\"><span>/pricing</span><span class=\"text-muted\">4,210</span></li>\n      <li class=\"flex items-center justify-between\"><span>/docs</span><span class=\"text-muted\">3,880</span></li>\n      <li class=\"flex items-center justify-between\"><span>/blog</span><span class=\"text-muted\">2,104</span></li>\n     </ul>\n    </div>\n    <div class=\"grid gap-3 rounded-md border bg-surface-raised p-6\">\n     <span class=\"type-body-emphasized\">Devices</span>\n     <div class=\"grid gap-2\">\n      <div class=\"flex items-center justify-between type-body\"><span>Desktop</span><span class=\"text-muted\">62%</span></div>\n      <div class=\"flex items-center justify-between type-body\"><span>Mobile</span><span class=\"text-muted\">31%</span></div>\n      <div class=\"flex items-center justify-between type-body\"><span>Tablet</span><span class=\"text-muted\">7%</span></div>\n     </div>\n    </div>\n   </div>\n   <div class=\"grid gap-4\" show={row.value === \"reports\"}>\n    <div class=\"grid gap-3 rounded-md border bg-surface-raised p-6\">\n     <span class=\"type-body-emphasized\">Scheduled reports</span>\n     <ul class=\"grid gap-3\">\n      <li class=\"flex items-center justify-between\">\n       <div class=\"grid gap-1\">\n        <span class=\"type-label\">Weekly revenue</span>\n        <span class=\"type-caption text-muted\">Every Monday, 09:00</span>\n       </div>\n       <button class=\"secondary s-sm\">Edit</button>\n      </li>\n      <li class=\"flex items-center justify-between\">\n       <div class=\"grid gap-1\">\n        <span class=\"type-label\">Monthly active users</span>\n        <span class=\"type-caption text-muted\">First of month</span>\n       </div>\n       <button class=\"secondary s-sm\">Edit</button>\n      </li>\n     </ul>\n    </div>\n   </div>\n   <div class=\"grid gap-4\" show={row.value === \"team\"}>\n    <div class=\"grid gap-3 rounded-md border bg-surface-raised p-6\">\n     <span class=\"type-body-emphasized\">Members</span>\n     <ul class=\"grid gap-3\">\n      <li class=\"flex items-center gap-3\">\n       <span class=\"grid h-8 w-8 place-items-center rounded-full bg-selected type-label text-on-selected\">AL</span>\n       <div class=\"grid gap-0\">\n        <span class=\"type-label\">Ada Lovelace</span>\n        <span class=\"type-caption text-muted\">Owner</span>\n       </div>\n      </li>\n      <li class=\"flex items-center gap-3\">\n       <span class=\"grid h-8 w-8 place-items-center rounded-full bg-surface-sunken type-label\">TG</span>\n       <div class=\"grid gap-0\">\n        <span class=\"type-label\">Tomas G.</span>\n        <span class=\"type-caption text-muted\">Editor</span>\n       </div>\n      </li>\n     </ul>\n    </div>\n   </div>\n  </div>\n </template>\n</div>\n";
+export { dashboard_default as default };
+
+//# sourceMappingURL=dashboard.html.js.map