@spinjs/components 0.0.0-stage → 0.1.0-preview.2

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "inbox",
+   label: "Inbox",
+   content: "Deploy notifications and mentions.",
+  },
+  {
+   value: "drafts",
+   label: "Drafts",
+   content: "Unfinished incident notes.",
+  },
+  {
+   value: "sent",
+   label: "Sent",
+   content: "Shipped changelogs and receipts.",
+  },
+ ],
+ defaultValue: "inbox",
+});
+</script>
+
+<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"
+  {...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"
+    {...machine.getTriggerProps(row)}
+   >
+    <span class="i-lucide-inbox text-sm" aria-hidden="true"
+     show={row.value === "inbox"}></span>
+    <span class="i-lucide-file-text text-sm" aria-hidden="true"
+     show={row.value === "drafts"}></span>
+    <span class="i-lucide-send text-sm" 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"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/examples/outline.html

@@ -0,0 +1,29 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  { value: "tab1", label: "Inbox", content: "Deploy notifications and mentions." },
+  { value: "tab2", label: "Drafts", content: "Unfinished incident notes." },
+  { value: "tab3", label: "Sent", content: "Shipped changelogs and receipts." },
+ ],
+ defaultValue: "tab1",
+});
+</script>
+
+<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"
+  {...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"
+    {...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"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/examples/pills.html

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "tab1",
+   label: "Overview",
+   content: "Fleet health at a glance.",
+  },
+  {
+   value: "tab2",
+   label: "Deployments",
+   content: "Deploy #4821 is live on checkout-api.",
+  },
+  {
+   value: "tab3",
+   label: "Settings",
+   content: "Workspace preferences and API tokens.",
+  },
+ ],
+ defaultValue: "tab1",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md flex-col items-center"
+ {...machine.getRootProps()}>
+ <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"
+    {...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"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/examples/project.html

@@ -0,0 +1,87 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  { value: "board", label: "Board", content: "Kanban columns." },
+  { value: "list", label: "List", content: "Task list." },
+  { value: "calendar", label: "Calendar", content: "Schedule." },
+  { value: "files", label: "Files", content: "Attachments." },
+ ],
+ defaultValue: "board",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-xl flex-col gap-6" {...machine.getRootProps()}>
+ <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"
+    {...machine.getTriggerProps(row)}
+   >{row.label}</button>
+  </template>
+ </div>
+ <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>
+    </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>
+    </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>
+    </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">
+     <input type="checkbox" />
+     <span class="text-md text-text">Draft release notes</span>
+    </div>
+    <div class="flex items-center gap-3 rounded-md border border-solid border-border bg-surface-raised p-3">
+     <input type="checkbox" checked />
+     <span class="text-md text-text 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">
+     <input type="checkbox" />
+     <span class="text-md text-text">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">
+     <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">
+     <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>
+    <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>
+    <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>
+   </div>
+  </div>
+ </template>
+</div>

package/dist/tabs/examples/settings.html

@@ -0,0 +1,100 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  { value: "account", label: "Account", content: "Profile, email, and handle." },
+  { value: "notifications", label: "Notifications", content: "Email and push preferences." },
+  { value: "security", label: "Security", content: "Password and two-factor." },
+  { value: "billing", label: "Billing", content: "Plan and payment method." },
+ ],
+ defaultValue: "account",
+});
+</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()}>
+  <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"
+    {...machine.getTriggerProps(row)}
+   >{row.label}</button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <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" />
+    </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" />
+    </div>
+    <div class="flex items-center justify-between rounded-md border border-solid border-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>
+     </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>
+   </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="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>
+     </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="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>
+     </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="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>
+     </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" />
+    </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" />
+    </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">
+     <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>
+     </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>
+    </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="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>
+     </div>
+     <button class="rounded-md border border-solid border-border px-3 py-1 text-sm font-medium text-text">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>
+   </div>
+  </div>
+ </template>
+</div>

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

@@ -0,0 +1,51 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "profile",
+   label: "Profile",
+   content: "Priya Raman, on-call this week.",
+  },
+  {
+   value: "billing",
+   label: "Billing",
+   content: "Seats, usage, and invoices.",
+  },
+  {
+   value: "notifications",
+   label: "Notifications",
+   content: "Deploy #4821 pages Tomas first.",
+  },
+ ],
+ defaultValue: "profile",
+});
+</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"
+  {...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"
+    {...machine.getTriggerProps(row)}
+   >
+    <span class="i-lucide-user text-sm" aria-hidden="true"
+     show={row.value === "profile"}></span>
+    <span class="i-lucide-credit-card text-sm" aria-hidden="true"
+     show={row.value === "billing"}></span>
+    <span class="i-lucide-bell text-sm" 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">
+  <template for={machine.items} as={row} key={row.value}>
+   <p class=" text-sm text-text-muted"
+    {...machine.getContentProps(row)}>{row.content}</p>
+  </template>
+ </div>
+</div>

package/dist/tabs/examples/stack.html

@@ -0,0 +1,28 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  { value: "tab1", label: "Profile", content: "Priya Raman, on-call this week." },
+  { value: "tab2", label: "Billing", content: "Seats, usage, and invoices." },
+  { value: "tab3", label: "Privacy", content: "Audit log retention and SSO." },
+ ],
+ defaultValue: "tab1",
+});
+</script>
+
+<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()}>
+  <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"
+    {...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"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

package/dist/tabs/examples/underline.html

@@ -0,0 +1,41 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "tab1",
+   label: "Overview",
+   content: "Fleet health at a glance.",
+  },
+  {
+   value: "tab2",
+   label: "Deployments",
+   content: "Deploy #4821 is live on checkout-api.",
+  },
+  {
+   value: "tab3",
+   label: "Settings",
+   content: "Workspace preferences and API tokens.",
+  },
+ ],
+ defaultValue: "tab1",
+});
+</script>
+
+<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"
+  {...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"
+    {...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"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "general",
+   label: "General",
+   content: "Workspace name, region, and plan.",
+  },
+  {
+   value: "members",
+   label: "Members",
+   content: "Priya, Tomas, and the on-call rotation.",
+  },
+  {
+   value: "security",
+   label: "Security",
+   content: "Two-factor auth and the audit log.",
+  },
+ ],
+ defaultValue: "general",
+ orientation: "vertical",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md items-start gap-4"
+ {...machine.getRootProps()}>
+ <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"
+    {...machine.getTriggerProps(row)}
+   >{row.label}</button>
+  </template>
+ </div>
+ <div
+  class="flex-1 rounded-lg border border-solid border-border bg-surface p-4">
+  <template for={machine.items} as={row} key={row.value}>
+   <p class=" text-sm text-text-muted"
+    {...machine.getContentProps(row)}>{row.content}</p>
+  </template>
+ </div>
+</div>

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

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

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

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

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "overview",
+   label: "Overview",
+   content: "Fleet health at a glance.",
+  },
+  {
+   value: "projects",
+   label: "Projects",
+   content: "checkout-api and its preview deploys.",
+  },
+  {
+   value: "packages",
+   label: "Packages",
+   content: "Canary channel and pinned versions.",
+  },
+ ],
+ defaultValue: "overview",
+ orientation: "vertical",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md items-start gap-4"
+ {...machine.getRootProps()}>
+ <div class="flex shrink-0 flex-col 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-3 py-2 text-left text-sm font-medium transition-all aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   >
+    <span class="i-lucide-house text-sm" aria-hidden="true"
+     show={row.value === "overview"}></span>
+    <span class="i-lucide-folder-open text-sm" aria-hidden="true"
+     show={row.value === "projects"}></span>
+    <span class="i-lucide-package text-sm" aria-hidden="true"
+     show={row.value === "packages"}></span>
+    <span>{row.label}</span>
+   </button>
+  </template>
+ </div>
+ <div
+  class="flex-1 rounded-lg border border-solid border-border bg-surface p-4">
+  <template for={machine.items} as={row} key={row.value}>
+   <p class=" text-sm text-text-muted"
+    {...machine.getContentProps(row)}>{row.content}</p>
+  </template>
+ </div>
+</div>

package/dist/tabs/examples/vertical.html

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { tabs } from "../tabs.presentation.js";
+
+const machine = tabs({
+ items: [
+  {
+   value: "tab1",
+   label: "Overview",
+   content: "Fleet health at a glance.",
+  },
+  {
+   value: "tab2",
+   label: "Deployments",
+   content: "Deploy #4821 is live on checkout-api.",
+  },
+  {
+   value: "tab3",
+   label: "Settings",
+   content: "Workspace preferences and API tokens.",
+  },
+ ],
+ defaultValue: "tab1",
+ orientation: "vertical",
+});
+</script>
+
+<div class="mx-auto flex w-full max-w-md items-start gap-4"
+ {...machine.getRootProps()}>
+ <div class="flex shrink-0 flex-col gap-1 rounded-lg bg-surface-raised p-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-all aria-[selected=true]:bg-surface aria-[selected=true]:text-text aria-[selected=true]:shadow-sm aria-[selected=false]:text-text-muted"
+    {...machine.getTriggerProps(row)}
+   >{row.label}</button>
+  </template>
+ </div>
+ <template for={machine.items} as={row} key={row.value}>
+  <p class=" flex-1 pt-2 text-left text-sm text-text-muted"
+   {...machine.getContentProps(row)}>{row.content}</p>
+ </template>
+</div>