@xtyle/core 0.5.0

package/dist/manifest/table.manifest.js

@@ -0,0 +1,303 @@
+const htmlExample = `<xtyle-table variant="striped" hover sticky aria-label="Recent orders">
+	<table>
+		<caption class="xtyle-table__caption">Recent orders</caption>
+		<thead class="xtyle-table__head">
+			<tr class="xtyle-table__row">
+				<th class="xtyle-table__header-cell xtyle-table__header-cell--sortable" scope="col" aria-sort="ascending">
+					<span class="xtyle-table__header-content">Order
+						<span class="xtyle-table__sort" aria-hidden="true">
+							<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 8l5 6H7l5-6Z" /></svg>
+						</span>
+					</span>
+				</th>
+				<th class="xtyle-table__header-cell" scope="col">Customer</th>
+				<th class="xtyle-table__header-cell" scope="col">Total</th>
+			</tr>
+		</thead>
+		<tbody class="xtyle-table__body">
+			<tr class="xtyle-table__row">
+				<td class="xtyle-table__cell">#1024</td>
+				<td class="xtyle-table__cell">Ada Lovelace</td>
+				<td class="xtyle-table__cell">$42.00</td>
+			</tr>
+			<tr class="xtyle-table__row">
+				<td class="xtyle-table__cell">#1025</td>
+				<td class="xtyle-table__cell">Alan Turing</td>
+				<td class="xtyle-table__cell">$17.50</td>
+			</tr>
+		</tbody>
+	</table>
+</xtyle-table>`;
+const svelteExample = `<script lang="ts">
+	import { Table } from "@xtyle/svelte";
+
+	let sort: "ascending" | "descending" = $state("ascending");
+</script>
+
+<Table variant="striped" hover sticky ariaLabel="Recent orders">
+	<table>
+		<caption class="xtyle-table__caption">Recent orders</caption>
+		<thead class="xtyle-table__head">
+			<tr class="xtyle-table__row">
+				<th
+					class="xtyle-table__header-cell xtyle-table__header-cell--sortable"
+					scope="col"
+					aria-sort={sort}
+					tabindex="0"
+					onclick={() => (sort = sort === "ascending" ? "descending" : "ascending")}
+				>
+					<span class="xtyle-table__header-content">Order
+						<span class="xtyle-table__sort" aria-hidden="true">
+							<svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 8l5 6H7l5-6Z" /></svg>
+						</span>
+					</span>
+				</th>
+				<th class="xtyle-table__header-cell" scope="col">Customer</th>
+				<th class="xtyle-table__header-cell" scope="col">Total</th>
+			</tr>
+		</thead>
+		<tbody class="xtyle-table__body">
+			<tr class="xtyle-table__row">
+				<td class="xtyle-table__cell">#1024</td>
+				<td class="xtyle-table__cell">Ada Lovelace</td>
+				<td class="xtyle-table__cell">$42.00</td>
+			</tr>
+		</tbody>
+	</table>
+</Table>`;
+const astroExample = `---
+import { Table } from "@xtyle/astro";
+---
+
+<Table variant="bordered" size="compact" aria-label="Pricing">
+	<table>
+		<thead class="xtyle-table__head">
+			<tr class="xtyle-table__row">
+				<th class="xtyle-table__header-cell" scope="col">Plan</th>
+				<th class="xtyle-table__header-cell" scope="col">Price</th>
+			</tr>
+		</thead>
+		<tbody class="xtyle-table__body">
+			<tr class="xtyle-table__row">
+				<th class="xtyle-table__header-cell" scope="row">Starter</th>
+				<td class="xtyle-table__cell">$0</td>
+			</tr>
+			<tr class="xtyle-table__row">
+				<th class="xtyle-table__header-cell" scope="row">Pro</th>
+				<td class="xtyle-table__cell">$12</td>
+			</tr>
+		</tbody>
+	</table>
+</Table>`;
+export const tableManifest = {
+    id: "table",
+    name: "Table",
+    category: "content",
+    summary: "A styled data table around native `<table>`: zebra, bordered, hover, sticky header, and a sortable-header affordance.",
+    description: "Table dresses a native `<table>` in xtyle styling without taking over its markup. The binding is a thin wrapper that relays consumer-authored rows: you write the real `<thead>`/`<tbody>`/`<tr>`/`<th>`/`<td>` and tag them with the `xtyle-table__*` part classes, and the wrapper supplies the scroll container, variant, size, hover, and sticky behavior. Variants `default`/`striped`/`bordered` set the row and cell chrome; `compact`/`normal` sizes set the cell padding. The sortable-header affordance renders a sort glyph and exposes an `aria-sort` hook on the header cell; the engine is presentation-only, so the consumer wires the actual sort and toggles `aria-sort` (`ascending`/`descending`/`none`), and the glyph rotates to match. `scope` belongs on every header cell so screen readers associate it with its row or column.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "wrap",
+            description: "The horizontal-scroll container that clips the table to its width and rounds the corners.",
+            selector: ".xtyle-table-wrap",
+            tokens: ["--radius-lg"],
+        },
+        {
+            name: "table",
+            description: "The `<table>` itself: collapsed borders, surface background, base typography.",
+            selector: ".xtyle-table",
+            tokens: ["--font-sans", "--text-body", "--leading-normal", "--fg-0", "--bg-1"],
+        },
+        {
+            name: "caption",
+            description: "An optional `<caption>` rendered above the table as a muted label.",
+            selector: ".xtyle-table__caption",
+            tokens: ["--space-2", "--space-4", "--text-sm", "--fg-2"],
+        },
+        {
+            name: "head",
+            description: "The `<thead>` group; its last header row carries the heavier under-rule.",
+            selector: ".xtyle-table__head",
+            tokens: ["--border-normal", "--line-2"],
+        },
+        {
+            name: "body",
+            description: "The `<tbody>` group that zebra striping and hover target.",
+            selector: ".xtyle-table__body",
+        },
+        {
+            name: "row",
+            description: "A `<tr>`: the unit zebra striping and row hover apply to.",
+            selector: ".xtyle-table__row",
+        },
+        {
+            name: "header-cell",
+            description: "A `<th>`: semibold ink on a tint, with `scope` and an optional sortable affordance.",
+            selector: ".xtyle-table__header-cell",
+            tokens: ["--space-3", "--space-4", "--weight-semibold", "--fg-1", "--bg-2", "--line"],
+        },
+        {
+            name: "cell",
+            description: "A `<td>`: the standard data cell with a row-separating bottom rule.",
+            selector: ".xtyle-table__cell",
+            tokens: ["--space-3", "--space-4", "--line"],
+        },
+        {
+            name: "sort",
+            description: "The decorative sort glyph inside a sortable header; rotates and colors per `aria-sort`.",
+            selector: ".xtyle-table__sort",
+            tokens: ["--fg-3", "--accent-text", "--duration-fast", "--ease-standard"],
+        },
+        {
+            name: "footer-cell",
+            description: "A `<td>`/`<th>` in `<tfoot>`: a summary cell on a tint above a heavy top rule.",
+            selector: ".xtyle-table__footer-cell",
+            tokens: ["--space-3", "--space-4", "--weight-medium", "--fg-1", "--bg-2", "--border-normal", "--line-2"],
+        },
+    ],
+    props: [
+        {
+            name: "variant",
+            type: "TableVariant",
+            default: "default",
+            description: "Row and cell chrome. `striped` zebra-stripes body rows; `bordered` outlines every cell.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["default", "striped", "bordered"],
+        },
+        {
+            name: "size",
+            type: "TableSize",
+            default: "normal",
+            description: "Cell density. `compact` tightens the cell padding.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["normal", "compact"],
+        },
+        {
+            name: "hover",
+            type: "boolean",
+            default: "false",
+            description: "Highlights the body row under the pointer with the hover state tint.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "sticky",
+            type: "boolean",
+            default: "false",
+            description: "Pins the header cells to the top of the scroll container while the body scrolls.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "ariaLabel",
+            type: "string",
+            description: "Accessible name for the table. Required when there is no `<caption>`; the binding warns when both are missing.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "default",
+            description: "Plain rows separated by a bottom rule; no class needed.",
+            className: "xtyle-table",
+        },
+        {
+            name: "striped",
+            description: "Alternating body-row backgrounds for scannability.",
+            className: "xtyle-table--striped",
+            tokens: ["--bg-1", "--bg-2"],
+        },
+        {
+            name: "bordered",
+            description: "A full grid; every cell gets a border.",
+            className: "xtyle-table--bordered",
+            tokens: ["--line", "--border-thin", "--line-2", "--border-normal"],
+        },
+    ],
+    sizes: [
+        { name: "normal", description: "Default density.", className: "xtyle-table", isDefault: true },
+        { name: "compact", description: "Tighter cell padding.", className: "xtyle-table--compact" },
+    ],
+    states: [
+        {
+            name: "hover",
+            description: "Pointer over a body row (with `hover`); the row paints the hover tint.",
+            selector: ".xtyle-table--hover .xtyle-table__body .xtyle-table__row:hover",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "sortable",
+            description: "A sortable header cell: pointer cursor and a hover tint behind the label.",
+            selector: ".xtyle-table__header-cell--sortable",
+            tokens: ["--state-hover", "--duration-fast", "--ease-standard"],
+        },
+        {
+            name: "sorted",
+            description: "A header cell with `aria-sort` set; the glyph colors and points up (asc) or down (desc).",
+            selector: '.xtyle-table__header-cell[aria-sort="ascending"]',
+            tokens: ["--accent-text"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on a sortable header: an inset token ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-table__header-cell--sortable:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The consumer-authored `<table>` (with `xtyle-table__*` part classes on its rows and cells).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--radius-lg",
+        "--font-sans",
+        "--text-body",
+        "--text-sm",
+        "--leading-normal",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--fg-3",
+        "--bg-1",
+        "--bg-2",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--weight-medium",
+        "--weight-semibold",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--line",
+        "--line-2",
+        "--accent-text",
+        "--ring",
+        "--state-hover",
+        "--duration-fast",
+        "--ease-standard",
+    ],
+    composition: [
+        "Pair header cells with the sortable affordance and wire sorting yourself: toggle `aria-sort` between `ascending`/`descending`/`none`; the glyph follows.",
+        "Drop a Badge or Avatar into any cell for status pills and row identities.",
+        "Wrap the table in a Card for an elevated, contained data surface.",
+    ],
+    a11y: [
+        "Built on a native `<table>` with `<thead>`/`<tbody>`/`<tfoot>`, `<th scope>`, and an optional `<caption>`. Row/column semantics come for free.",
+        "Every header cell SHOULD carry `scope` (`col` or `row`) so assistive tech associates data cells correctly.",
+        "A table with no `<caption>` needs an `aria-label`; the binding warns at runtime when both are missing.",
+        "Sortable headers expose state via `aria-sort` (`ascending`/`descending`/`none`), not via the glyph, which is `aria-hidden`.",
+        "The sortable header is keyboard-focusable; focus shows a token ring plus a transparent outline the forced-colors base rule promotes to a real system outline.",
+    ],
+    examples: [
+        {
+            id: "variants-and-sorting",
+            title: "Variants, sticky header, and a sortable column",
+            description: "Striped rows with hover and a sticky, sortable header; the consumer supplies rows and owns the sort.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=table.manifest.js.map

package/dist/manifest/table.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.manifest.js","sourceRoot":"","sources":["../../src/manifest/table.manifest.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eA6BL,CAAC;AAEhB,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoCb,CAAC;AAEV,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;SAuBZ,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,GAAsB;IAC/C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,uHAAuH;IAChI,WAAW,EACV,0zBAA0zB;IAC3zB,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,2FAA2F;YACxG,QAAQ,EAAE,mBAAmB;YAC7B,MAAM,EAAE,CAAC,aAAa,CAAC;SACvB;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,+EAA+E;YAC5F,QAAQ,EAAE,cAAc;YACxB,MAAM,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,CAAC;SAC9E;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,oEAAoE;YACjF,QAAQ,EAAE,uBAAuB;YACjC,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,CAAC;SACzD;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,0EAA0E;YACvF,QAAQ,EAAE,oBAAoB;YAC9B,MAAM,EAAE,CAAC,iBAAiB,EAAE,UAAU,CAAC;SACvC;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,2DAA2D;YACxE,QAAQ,EAAE,oBAAoB;SAC9B;QACD;YACC,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,2DAA2D;YACxE,QAAQ,EAAE,mBAAmB;SAC7B;QACD;YACC,IAAI,EAAE,aAAa;YACnB,WAAW,EAAE,qFAAqF;YAClG,QAAQ,EAAE,2BAA2B;YACrC,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,mBAAmB,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC;SACrF;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,qEAAqE;YAClF,QAAQ,EAAE,oBAAoB;YAC9B,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,CAAC;SAC5C;QACD;YACC,IAAI,EAAE,MAAM;YACZ,WAAW,EAAE,yFAAyF;YACtG,QAAQ,EAAE,oBAAoB;YAC9B,MAAM,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;SACzE;QACD;YACC,IAAI,EAAE,aAAa;YACnB,WAAW,EAAE,gFAAgF;YAC7F,QAAQ,EAAE,2BAA2B;YACrC,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,UAAU,CAAC;SACxG;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,yFAAyF;YACtG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC;SAC3C;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,oDAAoD;YACjE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC;SAC9B;QACD;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,sEAAsE;YACnF,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,kFAAkF;YAC/F,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,gHAAgH;YAC7H,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,QAAQ,EAAE;QACT;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,yDAAyD;YACtE,SAAS,EAAE,aAAa;SACxB;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,oDAAoD;YACjE,SAAS,EAAE,sBAAsB;YACjC,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;SAC5B;QACD;YACC,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,wCAAwC;YACrD,SAAS,EAAE,uBAAuB;YAClC,MAAM,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,UAAU,EAAE,iBAAiB,CAAC;SAClE;KACD;IACD,KAAK,EAAE;QACN,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,kBAAkB,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,IAAI,EAAE;QAC9F,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,uBAAuB,EAAE,SAAS,EAAE,sBAAsB,EAAE;KAC5F;IACD,MAAM,EAAE;QACP;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,wEAAwE;YACrF,QAAQ,EAAE,gEAAgE;YAC1E,MAAM,EAAE,CAAC,eAAe,CAAC;SACzB;QACD;YACC,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,2EAA2E;YACxF,QAAQ,EAAE,qCAAqC;YAC/C,MAAM,EAAE,CAAC,eAAe,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;SAC/D;QACD;YACC,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,0FAA0F;YACvG,QAAQ,EAAE,kDAAkD;YAC5D,MAAM,EAAE,CAAC,eAAe,CAAC;SACzB;QACD;YACC,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,+HAA+H;YAC5I,QAAQ,EAAE,mDAAmD;YAC7D,MAAM,EAAE,CAAC,iBAAiB,EAAE,gBAAgB,EAAE,QAAQ,CAAC;SACvD;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,6FAA6F;YAC1G,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,cAAc,EAAE;QACf,aAAa;QACb,aAAa;QACb,aAAa;QACb,WAAW;QACX,kBAAkB;QAClB,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,mBAAmB;QACnB,eAAe;QACf,iBAAiB;QACjB,gBAAgB;QAChB,QAAQ;QACR,UAAU;QACV,eAAe;QACf,QAAQ;QACR,eAAe;QACf,iBAAiB;QACjB,iBAAiB;KACjB;IACD,WAAW,EAAE;QACZ,0JAA0J;QAC1J,2EAA2E;QAC3E,mEAAmE;KACnE;IACD,IAAI,EAAE;QACL,gJAAgJ;QAChJ,4GAA4G;QAC5G,wGAAwG;QACxG,6HAA6H;QAC7H,+JAA+J;KAC/J;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,sBAAsB;YAC1B,KAAK,EAAE,gDAAgD;YACvD,WAAW,EAAE,sGAAsG;YACnH,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;KACD;CACD,CAAC"}

package/dist/manifest/tabs.manifest.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentManifest } from "./types.js";
+export declare const tabsManifest: ComponentManifest;
+//# sourceMappingURL=tabs.manifest.d.ts.map

package/dist/manifest/tabs.manifest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.manifest.d.ts","sourceRoot":"","sources":["../../src/manifest/tabs.manifest.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AA8FpD,eAAO,MAAM,YAAY,EAAE,iBAyQ1B,CAAC"}

package/dist/manifest/tabs.manifest.js

@@ -0,0 +1,343 @@
+const htmlExample = `<xtyle-tabs variant="underline" label="Account settings" value="profile">
+	<button slot="tab" value="profile">Profile</button>
+	<div slot="panel">
+		<p>Your public profile information.</p>
+	</div>
+
+	<button slot="tab" value="billing">Billing</button>
+	<div slot="panel">
+		<p>Manage your subscription and payment methods.</p>
+	</div>
+
+	<button slot="tab" value="api" disabled>API</button>
+	<div slot="panel">
+		<p>API keys (coming soon).</p>
+	</div>
+</xtyle-tabs>`;
+const svelteExample = `<script lang="ts">
+	import { Tabs } from "@xtyle/svelte";
+
+	let active = $state("profile");
+	const tabs = [
+		{ value: "profile", label: "Profile" },
+		{ value: "billing", label: "Billing" },
+		{ value: "api", label: "API", disabled: true },
+	];
+</script>
+
+<Tabs {tabs} variant="pill" label="Account settings" bind:value={active}>
+	{#snippet panel(value)}
+		{#if value === "profile"}<p>Your public profile information.</p>{/if}
+		{#if value === "billing"}<p>Manage your subscription and payment methods.</p>{/if}
+		{#if value === "api"}<p>API keys (coming soon).</p>{/if}
+	{/snippet}
+</Tabs>`;
+const astroExample = `---
+import { Tabs } from "@xtyle/astro";
+---
+
+<Tabs variant="enclosed" label="Account settings" value="profile">
+	<button slot="tab" value="profile">Profile</button>
+	<div slot="panel">
+		<p>Your public profile information.</p>
+	</div>
+
+	<button slot="tab" value="billing">Billing</button>
+	<div slot="panel">
+		<p>Manage your subscription and payment methods.</p>
+	</div>
+</Tabs>`;
+const headlessSvelte = `<script lang="ts">
+	import { Tabs } from "@xtyle/svelte";
+
+	let view = $state("editor");
+	const tabs = [
+		{ value: "editor", label: "Editor" },
+		{ value: "preview", label: "Preview" },
+		{ value: "diff", label: "Diff" },
+	];
+</script>
+
+<!-- No panel snippet: Tabs is a bare tablist driving \`view\`. -->
+<Tabs {tabs} label="Workspace view" bind:value={view} />
+
+<div class="workspace">
+	<main>
+		{#if view === "editor"}<CodeEditor />{/if}
+		{#if view === "preview"}<Preview />{/if}
+		{#if view === "diff"}<DiffView />{/if}
+	</main>
+	<!-- The inspector lives outside the tabs, so it keeps its scroll and selection across switches. -->
+	<aside><Inspector /></aside>
+</div>`;
+const headlessHtml = `<xtyle-tabs id="view-tabs" tablist label="Workspace view" value="editor">
+	<button slot="tab" value="editor">Editor</button>
+	<button slot="tab" value="preview">Preview</button>
+	<button slot="tab" value="diff">Diff</button>
+</xtyle-tabs>
+
+<div class="workspace">
+	<main id="view"><!-- rendered by your own change listener --></main>
+	<aside><!-- persists across tab switches --></aside>
+</div>
+
+<script type="module">
+	const tabs = document.getElementById("view-tabs");
+	tabs.addEventListener("change", (e) => renderView(e.detail.value));
+</script>`;
+export const tabsManifest = {
+    id: "tabs",
+    name: "Tabs",
+    category: "navigation",
+    summary: "Sectioned content switching with a full WAI-ARIA tablist: three visual treatments, keyboard-driven.",
+    description: "Tabs presents one panel of content at a time, switched by a row of tab triggers. It implements the complete WAI-ARIA tabs pattern: a `role=\"tablist\"` of `role=\"tab\"` buttons paired with `role=\"tabpanel\"` regions, roving tabindex (only the selected tab is in the tab order), arrow-key navigation with Home/End jumps, and `aria-selected` / `aria-controls` / `aria-labelledby` wiring done for you. The `activation` knob chooses automatic activation (arrowing selects as you move) or manual (arrow to move focus, Enter/Space to select). Three visual treatments (underline, pill, and enclosed) change the chrome without touching the semantics. Authors declare each tab as a `slot=\"tab\"` element and its content as the matching `slot=\"panel\"` element; the element pairs them by order, assigns ids, and owns the selection state.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "tabs",
+            description: "The root wrapper carrying the variant and size classes; stacks the tablist over the active panel.",
+            selector: ".xtyle-tabs",
+            tokens: ["--space-3", "--font-sans", "--fg-0"],
+        },
+        {
+            name: "tablist",
+            description: "The horizontal row of tab triggers (role=tablist).",
+            selector: ".xtyle-tabs__tablist",
+            tokens: ["--space-1", "--space-2", "--bg-2", "--line", "--border-thin", "--radius-lg"],
+        },
+        {
+            name: "tab",
+            description: "A single tab trigger (role=tab). Selected, hover, active, focus, and disabled states all live here.",
+            selector: ".xtyle-tabs__tab",
+            tokens: [
+                "--text-body",
+                "--weight-medium",
+                "--leading-tight",
+                "--fg-2",
+                "--radius-md",
+                "--space-2",
+                "--space-4",
+                "--border-thin",
+                "--duration-fast",
+                "--ease-standard",
+            ],
+        },
+        {
+            name: "panel",
+            description: "A content region (role=tabpanel) shown only when its tab is selected; focusable so keyboard users can scroll it.",
+            selector: ".xtyle-tabs__panel",
+            tokens: ["--fg-1", "--radius-sm"],
+        },
+        {
+            name: "overlay",
+            description: "The pseudo-element behind each tab that paints hover and active state tints.",
+            selector: ".xtyle-tabs__tab::after",
+            tokens: ["--state-hover", "--state-press"],
+        },
+    ],
+    props: [
+        {
+            name: "variant",
+            type: "TabsVariant",
+            default: "underline",
+            description: "Visual treatment of the tablist. Does not affect behavior or semantics.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["underline", "pill", "enclosed"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Tab trigger size. Only `sm` and `md` are supported.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md"],
+        },
+        {
+            name: "activation",
+            type: "TabsActivation",
+            default: "automatic",
+            description: "Automatic activation selects a tab as soon as it receives focus via arrow keys; manual moves focus first and requires Enter or Space to select.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["automatic", "manual"],
+        },
+        {
+            name: "value",
+            type: "string",
+            description: "The selected tab's `value` (or its zero-based index if no value is set). Reflected on change; bindable in Svelte. Defaults to the first enabled tab.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "Accessible name for the tablist, applied as `aria-label`. Required unless `labelledby` is set.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "labelledby",
+            type: "string",
+            description: "Id of an external element naming the tablist, applied as `aria-labelledby`. Takes precedence over `label`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "sticky",
+            type: "boolean",
+            default: "false",
+            description: "Pins the tablist in place while the active panel scrolls under it, for tall, app-like panels where the tabs should stay reachable. Off by default so inline tabs scroll away with their content. Offset it past a fixed header with `xtyle-tabs::part(tablist) { top: … }`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "tablist",
+            type: "boolean",
+            default: "false",
+            description: "Render only the tab strip, no panel region: the element drives selection, roving focus, and keyboard nav as a bare `role=\"tablist\"` while you render the content yourself against the `change` event / bound `value`. Lets a persistent sidebar or split live outside the panel region and keep its own state across switches. In Svelte, omit the `panel` snippet to get this automatically. Tabs omit `aria-controls` in this mode since the element owns no panels.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "tabs",
+            type: "TabItem[]",
+            description: "Svelte only: an array of `{ value, label, disabled? }` declaring the tabs; panel content comes from the `panel` snippet keyed by value.",
+            bindings: ["svelte"],
+        },
+        {
+            name: "lazy",
+            type: "boolean",
+            default: "false",
+            description: "Svelte only: mount a panel's `panel` snippet only once its tab is first shown, then keep it mounted (keep-alive). Off by default (every panel renders up front). Reach for it when panels are heavy (an editor, a chart, a data grid) or must lay out only while visible; the tab strip, roving focus, and a11y are unchanged. The active panel mounts on the client after hydration, so an SSR page shows it a beat later.",
+            bindings: ["svelte"],
+        },
+    ],
+    variants: [
+        {
+            name: "underline",
+            description: "A minimal row with a moving underline under the selected tab. The default.",
+            className: "xtyle-tabs--underline",
+            tokens: ["--accent", "--accent-text", "--line"],
+        },
+        {
+            name: "pill",
+            description: "Tabs sit in a tinted track; the selected tab becomes a solid accent pill.",
+            className: "xtyle-tabs--pill",
+            tokens: ["--bg-2", "--accent", "--accent-fg"],
+        },
+        {
+            name: "enclosed",
+            description: "Folder-style tabs that connect to the panel; the selected tab joins the content surface.",
+            className: "xtyle-tabs--enclosed",
+            tokens: ["--bg-1", "--line", "--accent-text"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-tabs--sm" },
+        { name: "md", description: "Default.", className: "xtyle-tabs", isDefault: true },
+    ],
+    states: [
+        {
+            name: "selected",
+            description: "The active tab. Tone-colored text, plus the variant's selection chrome (underline / pill / folder). When the theme's `--selection-cue` resolves to `marker` (a high-contrast or redundant-cues algorithm), the selected tab gains a non-color check glyph so selection never rests on color alone.",
+            selector: '.xtyle-tabs__tab[aria-selected="true"]',
+            tokens: ["--accent", "--accent-text", "--accent-fg", "--bg-1", "--line", "--selection-cue"],
+        },
+        {
+            name: "hover",
+            description: "Pointer over an unselected tab; overlay paints the hover tint and the text brightens.",
+            selector: ".xtyle-tabs__tab:hover",
+            tokens: ["--fg-0", "--state-hover"],
+        },
+        {
+            name: "active",
+            description: "Tab pressed. Overlay paints the press tint.",
+            selector: ".xtyle-tabs__tab:active::after",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on a tab or panel. A token-colored ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-tabs__tab:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+        {
+            name: "disabled",
+            description: "A non-selectable tab. Muted ink, overlay suppressed, skipped by arrow-key navigation.",
+            selector: '.xtyle-tabs__tab:disabled, .xtyle-tabs__tab[aria-disabled="true"]',
+            tokens: ["--fg-disabled"],
+        },
+    ],
+    slots: [
+        {
+            name: "tab",
+            description: "A tab trigger's label. Each `slot=\"tab\"` element becomes a tab; its `value` attribute keys it and `disabled` marks it unselectable. (html / astro)",
+            bindings: ["html", "astro"],
+        },
+        {
+            name: "panel",
+            description: "A tab's content. Each `slot=\"panel\"` element is paired with the `slot=\"tab\"` of the same order. In Svelte this is a `panel` snippet receiving the active value.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--accent",
+        "--accent-fg",
+        "--accent-text",
+        "--bg-1",
+        "--bg-2",
+        "--border-normal",
+        "--border-thick",
+        "--border-thin",
+        "--duration-fast",
+        "--ease-standard",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--fg-disabled",
+        "--font-sans",
+        "--leading-tight",
+        "--line",
+        "--radius-lg",
+        "--radius-md",
+        "--radius-none",
+        "--radius-sm",
+        "--ring",
+        "--selection-cue",
+        "--space-0",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--state-hover",
+        "--state-press",
+        "--text-body",
+        "--text-sm",
+        "--weight-medium",
+    ],
+    composition: [
+        "Pair each panel's content with any other component: a Field-laden form, a Card grid, a table.",
+        "Use `activation=\"manual\"` when switching tabs is expensive (each panel fetches data), so arrowing previews focus without triggering loads.",
+        "Drive `value` from app state and listen for the `change` event (CustomEvent with `detail.value`) to keep tabs and routing in sync.",
+        "Set `tablist` (or omit the Svelte `panel` snippet) when the tabs control only part of a layout: an editor whose left pane switches per tab while a right sidebar persists across all of them, keeping its own scroll and selection.",
+    ],
+    a11y: [
+        "Implements the WAI-ARIA tabs pattern: `role=\"tablist\"` / `role=\"tab\"` / `role=\"tabpanel\"` with `aria-selected`, `aria-controls`, and `aria-labelledby` wired automatically; in `tablist` mode the element owns no panels, so tabs omit `aria-controls` and stand as a bare tablist.",
+        "Roving tabindex: only the selected tab is in the tab order; arrow keys move between tabs, Home/End jump to the first/last enabled tab.",
+        "`activation` chooses automatic (select on focus) or manual (Enter/Space to select) per the WAI-ARIA guidance for cheap vs. expensive panels.",
+        "Disabled tabs are announced as disabled and skipped by arrow-key navigation.",
+        "Each panel is focusable (`tabindex=\"0\"`) so keyboard users can reach and scroll content with no focusable children.",
+        "The tablist REQUIRES an accessible name; provide `label` or `labelledby`. The binding warns at runtime when neither is set.",
+        "Focus is shown with a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "Selection carries a non-color channel on demand: when the theme sets `--selection-cue: marker`, the selected tab gains a check glyph alongside the color, satisfying WCAG 1.4.1. High-contrast emits `marker` by default, and any algorithm can opt in via the `cues` knob.",
+    ],
+    examples: [
+        {
+            id: "variants-and-activation",
+            title: "Variants and activation",
+            description: "The same tablist semantics across the three treatments; declare tabs and panels as paired slotted elements (or, in Svelte, a `tabs` array plus a `panel` snippet).",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "headless-tablist",
+            title: "Headless tablist",
+            description: "Omit the panels and the element is a bare tablist that drives a value: the tabs switch the main view while a sidebar persists outside the panel region, keeping its own state. In Svelte, drop the `panel` snippet; in html / astro, set `tablist`.",
+            source: { html: headlessHtml, svelte: headlessSvelte },
+        },
+    ],
+};
+//# sourceMappingURL=tabs.manifest.js.map