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

package/dist/tabs/examples/ghost.html

@@ -16,13 +16,13 @@ const machine = tabs({
  <div class="mb-4 flex gap-1" {...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-colors hover:bg-surface hover:text-text aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=false]:text-text-muted"
+    class="bare rounded-md px-4 py-2 type-label transition-colors hover:bg-surface aria-[selected=true]:bg-surface 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/ghost.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/ghost.html
+var ghost_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  { value: \"tab1\", label: \"Files\", content: \"The checkout-api release bundle.\" },\n  { value: \"tab2\", label: \"History\", content: \"Every deploy, rollback, and flag flip.\" },\n  { value: \"tab3\", label: \"Security\", content: \"API tokens, members, and audit log.\" },\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\" {...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-colors hover:bg-surface aria-[selected=true]:bg-surface 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 { ghost_default as default };
+
+//# sourceMappingURL=ghost.html.js.map

package/dist/tabs/examples/icon-above.html

@@ -26,25 +26,25 @@ 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-6 border-b border-solid border-border"
+  class="relative mb-4 flex w-fit gap-6 border-b"
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare flex flex-col items-center gap-2 border-b-2 border-solid px-3 py-2 text-xs 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 flex-col items-center gap-2 border-b-2 border-solid px-3 py-2 type-caption-emphasized 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-md" aria-hidden="true"
+    <span class="i-lucide-house type-body" aria-hidden="true"
      show={row.value === "overview"}></span>
-    <span class="i-lucide-folder-open text-md" aria-hidden="true"
+    <span class="i-lucide-folder-open type-body" aria-hidden="true"
      show={row.value === "projects"}></span>
-    <span class="i-lucide-package text-md" aria-hidden="true"
+    <span class="i-lucide-package type-body" 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/icon-above.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/icon-above.html
+var icon_above_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-6 border-b\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare flex flex-col items-center gap-2 border-b-2 border-solid px-3 py-2 type-caption-emphasized transition-colors aria-[selected=true]:border-primary aria-[selected=false]:border-transparent aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   >\n    <span class=\"i-lucide-house type-body\" aria-hidden=\"true\"\n     show={row.value === \"overview\"}></span>\n    <span class=\"i-lucide-folder-open type-body\" aria-hidden=\"true\"\n     show={row.value === \"projects\"}></span>\n    <span class=\"i-lucide-package type-body\" aria-hidden=\"true\"\n     show={row.value === \"packages\"}></span>\n    <span>{row.label}</span>\n   </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 { icon_above_default as default };
+
+//# sourceMappingURL=icon-above.html.js.map

package/dist/tabs/examples/icon-only.html

@@ -25,13 +25,13 @@ const machine = tabs({
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare grid h-10 w-10 place-items-center rounded-md 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 grid h-10 w-10 place-items-center rounded-md transition-all aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
-   ><span class="i-lucide-chart-bar text-sm" aria-hidden="true" show={row.value === "tab1"}></span><span class="i-lucide-users text-sm" aria-hidden="true" show={row.value === "tab2"}></span><span class="i-lucide-settings text-sm" aria-hidden="true" show={row.value === "tab3"}></span><span class="sr-only">{row.label}</span></button>
+   ><span class="i-lucide-chart-bar type-code" aria-hidden="true" show={row.value === "tab1"}></span><span class="i-lucide-users type-code" aria-hidden="true" show={row.value === "tab2"}></span><span class="i-lucide-settings type-code" aria-hidden="true" show={row.value === "tab3"}></span><span class="sr-only">{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/icon-only.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/icon-only.html
+var icon_only_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"tab1\",\n   label: \"Charts\",\n   content: \"Latency and error budgets for Deploy #4821.\",\n  },\n  { value: \"tab2\", label: \"Team\", content: \"Priya, Tomas, and the on-call rotation.\" },\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 w-fit 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 grid h-10 w-10 place-items-center rounded-md transition-all aria-[selected=true]:bg-surface aria-[selected=true]:shadow-sm aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   ><span class=\"i-lucide-chart-bar type-code\" aria-hidden=\"true\" show={row.value === \"tab1\"}></span><span class=\"i-lucide-users type-code\" aria-hidden=\"true\" show={row.value === \"tab2\"}></span><span class=\"i-lucide-settings type-code\" aria-hidden=\"true\" show={row.value === \"tab3\"}></span><span class=\"sr-only\">{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 { icon_only_default as default };
+
+//# sourceMappingURL=icon-only.html.js.map

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

@@ -26,25 +26,25 @@ const machine = tabs({
 <div class="mx-auto flex w-full max-w-md flex-col items-center"
  {...machine.getRootProps()}>
  <div
-  class="mb-4 flex w-fit rounded-lg border border-solid border-border p-1"
+  class="mb-4 flex w-fit rounded-lg border p-1"
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare flex items-center gap-2 rounded-md px-4 py-1 text-sm font-medium transition-colors aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=false]:text-text-muted"
+    class="bare flex items-center gap-2 rounded-md px-4 py-1 type-label transition-colors aria-[selected=true]:bg-surface aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
    >
-    <span class="i-lucide-inbox text-sm" aria-hidden="true"
+    <span class="i-lucide-inbox type-code" aria-hidden="true"
      show={row.value === "inbox"}></span>
-    <span class="i-lucide-file-text text-sm" aria-hidden="true"
+    <span class="i-lucide-file-text type-code" aria-hidden="true"
      show={row.value === "drafts"}></span>
-    <span class="i-lucide-send text-sm" aria-hidden="true"
+    <span class="i-lucide-send type-code" aria-hidden="true"
      show={row.value === "sent"}></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/outline-with-icons.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/outline-with-icons.html
+var outline_with_icons_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"inbox\",\n   label: \"Inbox\",\n   content: \"Deploy notifications and mentions.\",\n  },\n  {\n   value: \"drafts\",\n   label: \"Drafts\",\n   content: \"Unfinished incident notes.\",\n  },\n  {\n   value: \"sent\",\n   label: \"Sent\",\n   content: \"Shipped changelogs and receipts.\",\n  },\n ],\n defaultValue: \"inbox\",\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=\"mb-4 flex w-fit rounded-lg border 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-4 py-1 type-label transition-colors aria-[selected=true]:bg-surface aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   >\n    <span class=\"i-lucide-inbox type-code\" aria-hidden=\"true\"\n     show={row.value === \"inbox\"}></span>\n    <span class=\"i-lucide-file-text type-code\" aria-hidden=\"true\"\n     show={row.value === \"drafts\"}></span>\n    <span class=\"i-lucide-send type-code\" aria-hidden=\"true\"\n     show={row.value === \"sent\"}></span>\n    <span>{row.label}</span>\n   </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 { outline_with_icons_default as default };
+
+//# sourceMappingURL=outline-with-icons.html.js.map

package/dist/tabs/examples/outline.html

@@ -13,17 +13,17 @@ const machine = tabs({
 
 <div class="mx-auto flex w-full max-w-md flex-col items-center"
  {...machine.getRootProps()}>
- <div class="mb-4 flex w-fit overflow-hidden rounded-lg border border-solid border-border"
+ <div class="mb-4 flex w-fit overflow-hidden rounded-lg border"
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare px-4 py-2 text-sm font-medium transition-colors aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=false]:text-text-muted"
+    class="bare px-4 py-2 type-label transition-colors aria-[selected=true]:bg-surface 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/outline.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/outline.html
+var outline_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  { value: \"tab1\", label: \"Inbox\", content: \"Deploy notifications and mentions.\" },\n  { value: \"tab2\", label: \"Drafts\", content: \"Unfinished incident notes.\" },\n  { value: \"tab3\", label: \"Sent\", content: \"Shipped changelogs and receipts.\" },\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 w-fit overflow-hidden rounded-lg border\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare px-4 py-2 type-label transition-colors aria-[selected=true]:bg-surface 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 { outline_default as default };
+
+//# sourceMappingURL=outline.html.js.map

package/dist/tabs/examples/pills.html

@@ -28,13 +28,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 rounded-full border border-solid px-4 py-1 text-sm font-medium transition-all aria-[selected=true]:border-selected aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected aria-[selected=false]:border-border aria-[selected=false]:text-text-muted"
+    class="bare rounded-full border px-4 py-1 type-label transition-all aria-[selected=true]:border-selected aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected aria-[selected=false]:border 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/pills.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/pills.html
+var pills_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-2\" {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare rounded-full border px-4 py-1 type-label transition-all aria-[selected=true]:border-selected aria-[selected=true]:bg-selected aria-[selected=true]:text-on-selected aria-[selected=false]:border 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 { pills_default as default };
+
+//# sourceMappingURL=pills.html.js.map

package/dist/tabs/examples/project.html

@@ -16,7 +16,7 @@ const machine = tabs({
  <div class="flex gap-1 rounded-lg bg-surface-raised p-1" {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare flex items-center gap-2 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 flex items-center gap-2 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>
@@ -24,62 +24,62 @@ const machine = tabs({
  <template for={machine.items} as={row} key={row.value}>
   <div class="grid gap-6" {...machine.getContentProps(row)}>
    <div class="grid grid-cols-3 gap-4" show={row.value === "board"}>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
-     <span class="text-sm font-semibold text-text">To do</span>
-     <div class="mt-3 grid gap-2">
-      <div class="rounded-md bg-surface p-3 text-sm text-text">Draft release notes</div>
-      <div class="rounded-md bg-surface p-3 text-sm text-text">Review PR #482</div>
+    <div class="grid gap-3 rounded-md border bg-surface-raised p-4">
+     <span class="type-label">To do</span>
+     <div class="grid gap-2">
+      <div class="rounded-md bg-surface p-3 type-body">Draft release notes</div>
+      <div class="rounded-md bg-surface p-3 type-body">Review PR #482</div>
      </div>
     </div>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
-     <span class="text-sm font-semibold text-text">In progress</span>
-     <div class="mt-3 grid gap-2">
-      <div class="rounded-md bg-surface p-3 text-sm text-text">Migrate auth module</div>
+    <div class="grid gap-3 rounded-md border bg-surface-raised p-4">
+     <span class="type-label">In progress</span>
+     <div class="grid gap-2">
+      <div class="rounded-md bg-surface p-3 type-body">Migrate auth module</div>
      </div>
     </div>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
-     <span class="text-sm font-semibold text-text">Done</span>
-     <div class="mt-3 grid gap-2">
-      <div class="rounded-md bg-surface p-3 text-sm text-text">Ship v0.9</div>
+    <div class="grid gap-3 rounded-md border bg-surface-raised p-4">
+     <span class="type-label">Done</span>
+     <div class="grid gap-2">
+      <div class="rounded-md bg-surface p-3 type-body">Ship v0.9</div>
      </div>
     </div>
    </div>
    <div class="grid gap-2" show={row.value === "list"}>
-    <div class="flex items-center gap-3 rounded-md border border-solid border-border bg-surface-raised p-3">
+    <div class="flex items-center gap-3 rounded-md border bg-surface-raised p-3">
      <input type="checkbox" />
-     <span class="text-md text-text">Draft release notes</span>
+     <span class="type-body">Draft release notes</span>
     </div>
-    <div class="flex items-center gap-3 rounded-md border border-solid border-border bg-surface-raised p-3">
+    <div class="flex items-center gap-3 rounded-md border bg-surface-raised p-3">
      <input type="checkbox" checked />
-     <span class="text-md text-text line-through">Ship v0.9</span>
+     <span class="type-body line-through">Ship v0.9</span>
     </div>
-    <div class="flex items-center gap-3 rounded-md border border-solid border-border bg-surface-raised p-3">
+    <div class="flex items-center gap-3 rounded-md border bg-surface-raised p-3">
      <input type="checkbox" />
-     <span class="text-md text-text">Migrate auth module</span>
+     <span class="type-body">Migrate auth module</span>
     </div>
    </div>
-   <div class="rounded-md border border-solid border-border bg-surface-raised p-6" show={row.value === "calendar"}>
-    <span class="text-md font-medium text-text">October 2026</span>
-    <div class="mt-3 grid grid-cols-7 gap-1 text-center text-sm text-text-muted">
+   <div class="rounded-md border bg-surface-raised p-6" show={row.value === "calendar"}>
+    <span class="type-body-emphasized">October 2026</span>
+    <div class="grid grid-cols-7 gap-1 text-center type-body text-muted">
      <span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span>
     </div>
-    <div class="mt-2 grid grid-cols-7 gap-1 text-center text-sm text-text">
+    <div class="mt-2 grid grid-cols-7 gap-1 text-center type-body">
      <span class="rounded-md bg-primary text-on-primary">15</span>
      <span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span>
     </div>
    </div>
    <div class="grid gap-3" show={row.value === "files"}>
-    <div class="flex items-center justify-between rounded-md border border-solid border-border bg-surface-raised p-4">
-     <span class="text-md text-text">spec.md</span>
-     <span class="text-sm text-text-muted">12 KB</span>
+    <div class="flex items-center justify-between rounded-md border bg-surface-raised p-4">
+     <span class="type-body">spec.md</span>
+     <span class="type-body text-muted">12 KB</span>
     </div>
-    <div class="flex items-center justify-between rounded-md border border-solid border-border bg-surface-raised p-4">
-     <span class="text-md text-text">design.fig</span>
-     <span class="text-sm text-text-muted">4.1 MB</span>
+    <div class="flex items-center justify-between rounded-md border bg-surface-raised p-4">
+     <span class="type-body">design.fig</span>
+     <span class="type-body text-muted">4.1 MB</span>
     </div>
-    <div class="flex items-center justify-between rounded-md border border-solid border-border bg-surface-raised p-4">
-     <span class="text-md text-text">release.zip</span>
-     <span class="text-sm text-text-muted">88 MB</span>
+    <div class="flex items-center justify-between rounded-md border bg-surface-raised p-4">
+     <span class="type-body">release.zip</span>
+     <span class="type-body text-muted">88 MB</span>
     </div>
    </div>
   </div>

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

@@ -0,0 +1,5 @@
+// src/tabs/examples/project.html
+var project_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  { value: \"board\", label: \"Board\", content: \"Kanban columns.\" },\n  { value: \"list\", label: \"List\", content: \"Task list.\" },\n  { value: \"calendar\", label: \"Calendar\", content: \"Schedule.\" },\n  { value: \"files\", label: \"Files\", content: \"Attachments.\" },\n ],\n defaultValue: \"board\",\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-1 rounded-lg bg-surface-raised p-1\" {...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-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 grid-cols-3 gap-4\" show={row.value === \"board\"}>\n    <div class=\"grid gap-3 rounded-md border bg-surface-raised p-4\">\n     <span class=\"type-label\">To do</span>\n     <div class=\"grid gap-2\">\n      <div class=\"rounded-md bg-surface p-3 type-body\">Draft release notes</div>\n      <div class=\"rounded-md bg-surface p-3 type-body\">Review PR #482</div>\n     </div>\n    </div>\n    <div class=\"grid gap-3 rounded-md border bg-surface-raised p-4\">\n     <span class=\"type-label\">In progress</span>\n     <div class=\"grid gap-2\">\n      <div class=\"rounded-md bg-surface p-3 type-body\">Migrate auth module</div>\n     </div>\n    </div>\n    <div class=\"grid gap-3 rounded-md border bg-surface-raised p-4\">\n     <span class=\"type-label\">Done</span>\n     <div class=\"grid gap-2\">\n      <div class=\"rounded-md bg-surface p-3 type-body\">Ship v0.9</div>\n     </div>\n    </div>\n   </div>\n   <div class=\"grid gap-2\" show={row.value === \"list\"}>\n    <div class=\"flex items-center gap-3 rounded-md border bg-surface-raised p-3\">\n     <input type=\"checkbox\" />\n     <span class=\"type-body\">Draft release notes</span>\n    </div>\n    <div class=\"flex items-center gap-3 rounded-md border bg-surface-raised p-3\">\n     <input type=\"checkbox\" checked />\n     <span class=\"type-body line-through\">Ship v0.9</span>\n    </div>\n    <div class=\"flex items-center gap-3 rounded-md border bg-surface-raised p-3\">\n     <input type=\"checkbox\" />\n     <span class=\"type-body\">Migrate auth module</span>\n    </div>\n   </div>\n   <div class=\"rounded-md border bg-surface-raised p-6\" show={row.value === \"calendar\"}>\n    <span class=\"type-body-emphasized\">October 2026</span>\n    <div class=\"grid grid-cols-7 gap-1 text-center type-body text-muted\">\n     <span>M</span><span>T</span><span>W</span><span>T</span><span>F</span><span>S</span><span>S</span>\n    </div>\n    <div class=\"mt-2 grid grid-cols-7 gap-1 text-center type-body\">\n     <span class=\"rounded-md bg-primary text-on-primary\">15</span>\n     <span>16</span><span>17</span><span>18</span><span>19</span><span>20</span><span>21</span>\n    </div>\n   </div>\n   <div class=\"grid gap-3\" show={row.value === \"files\"}>\n    <div class=\"flex items-center justify-between rounded-md border bg-surface-raised p-4\">\n     <span class=\"type-body\">spec.md</span>\n     <span class=\"type-body text-muted\">12 KB</span>\n    </div>\n    <div class=\"flex items-center justify-between rounded-md border bg-surface-raised p-4\">\n     <span class=\"type-body\">design.fig</span>\n     <span class=\"type-body text-muted\">4.1 MB</span>\n    </div>\n    <div class=\"flex items-center justify-between rounded-md border bg-surface-raised p-4\">\n     <span class=\"type-body\">release.zip</span>\n     <span class=\"type-body text-muted\">88 MB</span>\n    </div>\n   </div>\n  </div>\n </template>\n</div>\n";
+export { project_default as default };
+
+//# sourceMappingURL=project.html.js.map

package/dist/tabs/examples/settings.html

@@ -13,10 +13,10 @@ const machine = tabs({
 </script>
 
 <div class="mx-auto flex w-full max-w-xl flex-col gap-6" {...machine.getRootProps()}>
- <div class="flex gap-1 border-b border-solid border-border" {...machine.getListProps()}>
+ <div class="flex gap-1 border-b" {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare px-4 py-3 text-md font-medium transition-colors aria-[selected=true]:border-b-2 aria-[selected=true]:border-primary aria-[selected=true]:text-text aria-[selected=false]:text-text-muted"
+    class="bare px-4 py-3 type-body-emphasized transition-colors aria-[selected=true]:border-b-2 aria-[selected=true]:border-primary aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
    >{row.label}</button>
   </template>
@@ -25,74 +25,74 @@ const machine = tabs({
   <div class="grid gap-6" {...machine.getContentProps(row)}>
    <div class="grid gap-4" show={row.value === "account"}>
     <div class="grid gap-2">
-     <label class="text-sm font-medium text-text">Display name</label>
-     <input class="rounded-md border border-solid border-border bg-surface px-3 py-2 text-md text-text" type="text" value="Ada Lovelace" />
+     <label>Display name</label>
+     <input type="text" value="Ada Lovelace" />
     </div>
     <div class="grid gap-2">
-     <label class="text-sm font-medium text-text">Email</label>
-     <input class="rounded-md border border-solid border-border bg-surface px-3 py-2 text-md text-text" type="email" value="ada@spinjs.dev" />
+     <label>Email</label>
+     <input type="email" value="ada@spinjs.dev" />
     </div>
-    <div class="flex items-center justify-between rounded-md border border-solid border-border bg-surface-raised p-4">
+    <div class="flex items-center justify-between rounded-md border bg-surface-raised p-4">
      <div class="grid gap-1">
-      <span class="text-md font-medium text-text">Public profile</span>
-      <span class="text-sm text-text-muted">Show your profile to everyone.</span>
+      <span class="type-body-emphasized">Public profile</span>
+      <span class="type-body text-muted">Show your profile to everyone.</span>
      </div>
      <input type="checkbox" checked />
     </div>
-    <button class="w-fit rounded-md bg-primary px-4 py-2 text-md font-medium text-on-primary">Save changes</button>
+    <button class="primary w-fit">Save changes</button>
    </div>
    <div class="grid gap-4" show={row.value === "notifications"}>
-    <div class="flex items-center justify-between rounded-md border border-solid border-border bg-surface-raised p-4">
+    <div class="flex items-center justify-between rounded-md border bg-surface-raised p-4">
      <div class="grid gap-1">
-      <span class="text-md font-medium text-text">Email digest</span>
-      <span class="text-sm text-text-muted">Weekly summary of activity.</span>
+      <span class="type-body-emphasized">Email digest</span>
+      <span class="type-body text-muted">Weekly summary of activity.</span>
      </div>
      <input type="checkbox" checked />
     </div>
-    <div class="flex items-center justify-between rounded-md border border-solid border-border bg-surface-raised p-4">
+    <div class="flex items-center justify-between rounded-md border bg-surface-raised p-4">
      <div class="grid gap-1">
-      <span class="text-md font-medium text-text">Push notifications</span>
-      <span class="text-sm text-text-muted">Real-time alerts on your devices.</span>
+      <span class="type-body-emphasized">Push notifications</span>
+      <span class="type-body text-muted">Real-time alerts on your devices.</span>
      </div>
      <input type="checkbox" />
     </div>
-    <div class="flex items-center justify-between rounded-md border border-solid border-border bg-surface-raised p-4">
+    <div class="flex items-center justify-between rounded-md border bg-surface-raised p-4">
      <div class="grid gap-1">
-      <span class="text-md font-medium text-text">Mention alerts</span>
-      <span class="text-sm text-text-muted">When someone mentions you.</span>
+      <span class="type-body-emphasized">Mention alerts</span>
+      <span class="type-body text-muted">When someone mentions you.</span>
      </div>
      <input type="checkbox" checked />
     </div>
    </div>
    <div class="grid gap-4" show={row.value === "security"}>
     <div class="grid gap-2">
-     <label class="text-sm font-medium text-text">Current password</label>
-     <input class="rounded-md border border-solid border-border bg-surface px-3 py-2 text-md text-text" type="password" />
+     <label>Current password</label>
+     <input type="password" />
     </div>
     <div class="grid gap-2">
-     <label class="text-sm font-medium text-text">New password</label>
-     <input class="rounded-md border border-solid border-border bg-surface px-3 py-2 text-md text-text" type="password" />
+     <label>New password</label>
+     <input type="password" />
     </div>
-    <button class="w-fit rounded-md bg-primary px-4 py-2 text-md font-medium text-on-primary">Update password</button>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
+    <button class="primary w-fit">Update password</button>
+    <div class="rounded-md border bg-surface-raised p-4">
      <div class="grid gap-1">
-      <span class="text-md font-medium text-text">Two-factor authentication</span>
-      <span class="text-sm text-text-muted">Add an authenticator app.</span>
+      <span class="type-body-emphasized">Two-factor authentication</span>
+      <span class="type-body text-muted">Add an authenticator app.</span>
      </div>
-     <button class="mt-3 w-fit rounded-md border border-solid border-border px-3 py-1 text-sm font-medium text-text">Enable</button>
+     <button class="secondary s-sm mt-3 w-fit">Enable</button>
     </div>
    </div>
    <div class="grid gap-4" show={row.value === "billing"}>
-    <div class="flex items-center justify-between rounded-md border border-solid border-border bg-surface-raised p-4">
+    <div class="flex items-center justify-between rounded-md border bg-surface-raised p-4">
      <div class="grid gap-1">
-      <span class="text-md font-medium text-text">Current plan</span>
-      <span class="text-sm text-text-muted">Pro — $24 / month</span>
+      <span class="type-body-emphasized">Current plan</span>
+      <span class="type-body text-muted">Pro — $24 / month</span>
      </div>
-     <button class="rounded-md border border-solid border-border px-3 py-1 text-sm font-medium text-text">Change plan</button>
+     <button class="secondary s-sm">Change plan</button>
     </div>
-    <div class="rounded-md border border-solid border-border bg-surface-raised p-4">
-     <span class="text-md font-medium text-text">Payment method</span>
-     <p class="mt-1 text-sm text-text-muted">Visa ending 4242, expires 08/27.</p>
+    <div class="grid gap-1 rounded-md border bg-surface-raised p-4">
+     <span class="type-body-emphasized">Payment method</span>
+     <p class="text-muted">Visa ending 4242, expires 08/27.</p>
     </div>
    </div>
   </div>

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

@@ -0,0 +1,5 @@
+// src/tabs/examples/settings.html
+var settings_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  { value: \"account\", label: \"Account\", content: \"Profile, email, and handle.\" },\n  { value: \"notifications\", label: \"Notifications\", content: \"Email and push preferences.\" },\n  { value: \"security\", label: \"Security\", content: \"Password and two-factor.\" },\n  { value: \"billing\", label: \"Billing\", content: \"Plan and payment method.\" },\n ],\n defaultValue: \"account\",\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-1 border-b\" {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare px-4 py-3 type-body-emphasized transition-colors aria-[selected=true]:border-b-2 aria-[selected=true]:border-primary 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 === \"account\"}>\n    <div class=\"grid gap-2\">\n     <label>Display name</label>\n     <input type=\"text\" value=\"Ada Lovelace\" />\n    </div>\n    <div class=\"grid gap-2\">\n     <label>Email</label>\n     <input type=\"email\" value=\"ada@spinjs.dev\" />\n    </div>\n    <div class=\"flex items-center justify-between rounded-md border bg-surface-raised p-4\">\n     <div class=\"grid gap-1\">\n      <span class=\"type-body-emphasized\">Public profile</span>\n      <span class=\"type-body text-muted\">Show your profile to everyone.</span>\n     </div>\n     <input type=\"checkbox\" checked />\n    </div>\n    <button class=\"primary w-fit\">Save changes</button>\n   </div>\n   <div class=\"grid gap-4\" show={row.value === \"notifications\"}>\n    <div class=\"flex items-center justify-between rounded-md border bg-surface-raised p-4\">\n     <div class=\"grid gap-1\">\n      <span class=\"type-body-emphasized\">Email digest</span>\n      <span class=\"type-body text-muted\">Weekly summary of activity.</span>\n     </div>\n     <input type=\"checkbox\" checked />\n    </div>\n    <div class=\"flex items-center justify-between rounded-md border bg-surface-raised p-4\">\n     <div class=\"grid gap-1\">\n      <span class=\"type-body-emphasized\">Push notifications</span>\n      <span class=\"type-body text-muted\">Real-time alerts on your devices.</span>\n     </div>\n     <input type=\"checkbox\" />\n    </div>\n    <div class=\"flex items-center justify-between rounded-md border bg-surface-raised p-4\">\n     <div class=\"grid gap-1\">\n      <span class=\"type-body-emphasized\">Mention alerts</span>\n      <span class=\"type-body text-muted\">When someone mentions you.</span>\n     </div>\n     <input type=\"checkbox\" checked />\n    </div>\n   </div>\n   <div class=\"grid gap-4\" show={row.value === \"security\"}>\n    <div class=\"grid gap-2\">\n     <label>Current password</label>\n     <input type=\"password\" />\n    </div>\n    <div class=\"grid gap-2\">\n     <label>New password</label>\n     <input type=\"password\" />\n    </div>\n    <button class=\"primary w-fit\">Update password</button>\n    <div class=\"rounded-md border bg-surface-raised p-4\">\n     <div class=\"grid gap-1\">\n      <span class=\"type-body-emphasized\">Two-factor authentication</span>\n      <span class=\"type-body text-muted\">Add an authenticator app.</span>\n     </div>\n     <button class=\"secondary s-sm mt-3 w-fit\">Enable</button>\n    </div>\n   </div>\n   <div class=\"grid gap-4\" show={row.value === \"billing\"}>\n    <div class=\"flex items-center justify-between rounded-md border bg-surface-raised p-4\">\n     <div class=\"grid gap-1\">\n      <span class=\"type-body-emphasized\">Current plan</span>\n      <span class=\"type-body text-muted\">Pro — $24 / month</span>\n     </div>\n     <button class=\"secondary s-sm\">Change plan</button>\n    </div>\n    <div class=\"grid gap-1 rounded-md border bg-surface-raised p-4\">\n     <span class=\"type-body-emphasized\">Payment method</span>\n     <p class=\"text-muted\">Visa ending 4242, expires 08/27.</p>\n    </div>\n   </div>\n  </div>\n </template>\n</div>\n";
+export { settings_default as default };
+
+//# sourceMappingURL=settings.html.js.map

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

@@ -24,27 +24,27 @@ const machine = tabs({
 </script>
 
 <div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
- <div class=" flex gap-1 border-b border-solid border-border px-2"
+ <div class=" flex gap-1 border-b px-2"
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare relative flex items-center gap-2 rounded-ss-md rounded-se-md border border-b-0 border-solid px-4 py-2 text-sm font-medium transition-colors aria-[selected=true]:border-border aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=false]:border-transparent aria-[selected=false]:text-text-muted"
+    class="bare relative flex items-center gap-2 rounded-ss-md rounded-se-md border border-b-0 border-solid px-4 py-2 type-label transition-colors aria-[selected=true]:border aria-[selected=true]:bg-surface aria-[selected=false]:border-transparent aria-[selected=false]:text-muted"
     {...machine.getTriggerProps(row)}
    >
-    <span class="i-lucide-user text-sm" aria-hidden="true"
+    <span class="i-lucide-user type-code" aria-hidden="true"
      show={row.value === "profile"}></span>
-    <span class="i-lucide-credit-card text-sm" aria-hidden="true"
+    <span class="i-lucide-credit-card type-code" aria-hidden="true"
      show={row.value === "billing"}></span>
-    <span class="i-lucide-bell text-sm" aria-hidden="true"
+    <span class="i-lucide-bell type-code" aria-hidden="true"
      show={row.value === "notifications"}></span>
     <span>{row.label}</span>
    </button>
   </template>
  </div>
  <div
-  class="rounded-lg border border-t-0 border-solid border-border bg-surface p-4">
+  class="rounded-lg border border-t-0 border-solid 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/stack-with-icons.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/stack-with-icons.html
+var stack_with_icons_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  {\n   value: \"profile\",\n   label: \"Profile\",\n   content: \"Priya Raman, on-call this week.\",\n  },\n  {\n   value: \"billing\",\n   label: \"Billing\",\n   content: \"Seats, usage, and invoices.\",\n  },\n  {\n   value: \"notifications\",\n   label: \"Notifications\",\n   content: \"Deploy #4821 pages Tomas first.\",\n  },\n ],\n defaultValue: \"profile\",\n});\n<\/script>\n\n<div class=\"mx-auto w-full max-w-md\" {...machine.getRootProps()}>\n <div class=\" flex gap-1 border-b px-2\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare relative flex items-center gap-2 rounded-ss-md rounded-se-md border border-b-0 border-solid px-4 py-2 type-label transition-colors aria-[selected=true]:border aria-[selected=true]:bg-surface aria-[selected=false]:border-transparent aria-[selected=false]:text-muted\"\n    {...machine.getTriggerProps(row)}\n   >\n    <span class=\"i-lucide-user type-code\" aria-hidden=\"true\"\n     show={row.value === \"profile\"}></span>\n    <span class=\"i-lucide-credit-card type-code\" aria-hidden=\"true\"\n     show={row.value === \"billing\"}></span>\n    <span class=\"i-lucide-bell type-code\" aria-hidden=\"true\"\n     show={row.value === \"notifications\"}></span>\n    <span>{row.label}</span>\n   </button>\n  </template>\n </div>\n <div\n  class=\"rounded-lg border border-t-0 border-solid 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 { stack_with_icons_default as default };
+
+//# sourceMappingURL=stack-with-icons.html.js.map

package/dist/tabs/examples/stack.html

@@ -13,16 +13,16 @@ const machine = tabs({
 
 <div class="mx-auto flex w-full max-w-md flex-col items-center"
  {...machine.getRootProps()}>
- <div class="mb-3 flex w-full justify-center gap-1 border-b border-solid border-border px-2" {...machine.getListProps()}>
+ <div class="mb-3 flex w-full justify-center gap-1 border-b px-2" {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare rounded-ss-md rounded-se-md border border-b-0 border-solid px-6 py-2 text-sm font-medium transition-colors aria-[selected=true]:border-border aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=false]:border-transparent aria-[selected=false]:text-text-muted"
+    class="bare rounded-ss-md rounded-se-md border border-b-0 border-solid px-6 py-2 type-label transition-colors aria-[selected=true]:border aria-[selected=true]:bg-surface aria-[selected=false]:border-transparent 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/stack.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/stack.html
+var stack_default = "<script lang=\"ts\">\nimport { tabs } from \"../tabs.presentation.ts\";\n\nconst machine = tabs({\n items: [\n  { value: \"tab1\", label: \"Profile\", content: \"Priya Raman, on-call this week.\" },\n  { value: \"tab2\", label: \"Billing\", content: \"Seats, usage, and invoices.\" },\n  { value: \"tab3\", label: \"Privacy\", content: \"Audit log retention and SSO.\" },\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-3 flex w-full justify-center gap-1 border-b px-2\" {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare rounded-ss-md rounded-se-md border border-b-0 border-solid px-6 py-2 type-label transition-colors aria-[selected=true]:border aria-[selected=true]:bg-surface aria-[selected=false]:border-transparent 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 { stack_default as default };
+
+//# sourceMappingURL=stack.html.js.map

package/dist/tabs/examples/underline.html

@@ -25,17 +25,17 @@ const machine = tabs({
 
 <div class="mx-auto flex w-full max-w-md flex-col items-center"
  {...machine.getRootProps()}>
- <div class="mb-4 flex gap-4 border-b border-solid border-border"
+ <div class="mb-4 flex gap-4 border-b"
   {...machine.getListProps()}>
   <template for={machine.items} as={row} key={row.value}>
    <button
-    class="bare relative -mb-0 border-b-2 border-solid px-2 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 relative -mb-0 border-b-2 border-solid px-2 py-2 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>
  <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/underline.html.js

@@ -0,0 +1,5 @@
+// src/tabs/examples/underline.html
+var underline_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-4 border-b\"\n  {...machine.getListProps()}>\n  <template for={machine.items} as={row} key={row.value}>\n   <button\n    class=\"bare relative -mb-0 border-b-2 border-solid px-2 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   >{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 { underline_default as default };
+
+//# sourceMappingURL=underline.html.js.map

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

@@ -29,15 +29,15 @@ const machine = tabs({
  <div class="flex shrink-0 flex-col gap-1" {...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-colors hover:bg-surface-raised hover:text-text aria-[selected=true]:bg-surface-raised aria-[selected=true]:text-text aria-[selected=false]:text-text-muted"
+    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"
     {...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>