@xtyle/core 0.5.0

package/dist/manifest/checkbox.manifest.js

@@ -0,0 +1,249 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-checkbox name="terms" value="accepted">I accept the terms</xtyle-checkbox>
+
+<xtyle-checkbox checked>Subscribe to the newsletter</xtyle-checkbox>
+
+<xtyle-checkbox indeterminate>Select all</xtyle-checkbox>
+
+<xtyle-checkbox size="sm" disabled>Unavailable option</xtyle-checkbox>`;
+const svelteExample = `<script lang="ts">
+	import { Checkbox } from "@xtyle/svelte";
+
+	let accepted = $state(false);
+	let all = $state(false);
+	let partial = $state(true);
+</script>
+
+<Checkbox bind:checked={accepted} name="terms" value="accepted">I accept the terms</Checkbox>
+
+<Checkbox bind:checked={all} bind:indeterminate={partial}>Select all</Checkbox>
+
+<Checkbox size="sm" disabled>Unavailable option</Checkbox>`;
+const astroExample = `---
+import { Checkbox } from "@xtyle/astro";
+---
+
+<Checkbox name="terms" value="accepted">I accept the terms</Checkbox>
+
+<Checkbox checked>Subscribe to the newsletter</Checkbox>
+
+<Checkbox indeterminate>Select all</Checkbox>
+
+<Checkbox size="sm" disabled>Unavailable option</Checkbox>`;
+const groupHtmlExample = `<xtyle-checkbox-group label="Notifications">
+  <xtyle-checkbox checked>Mentions</xtyle-checkbox>
+  <xtyle-checkbox>Replies</xtyle-checkbox>
+  <xtyle-checkbox checked>Direct messages</xtyle-checkbox>
+</xtyle-checkbox-group>`;
+const groupSvelteExample = `<script lang="ts">
+	import { CheckboxGroup, Checkbox } from "@xtyle/svelte";
+</script>
+
+<CheckboxGroup label="Notifications">
+	<Checkbox checked>Mentions</Checkbox>
+	<Checkbox>Replies</Checkbox>
+	<Checkbox checked>Direct messages</Checkbox>
+</CheckboxGroup>`;
+const groupAstroExample = `---
+import { CheckboxGroup, Checkbox } from "@xtyle/astro";
+---
+
+<CheckboxGroup label="Notifications">
+	<Checkbox checked>Mentions</Checkbox>
+	<Checkbox>Replies</Checkbox>
+	<Checkbox checked>Direct messages</Checkbox>
+</CheckboxGroup>`;
+export const checkboxManifest = {
+    id: "checkbox",
+    name: "Checkbox",
+    category: "control",
+    summary: "A styled native checkbox: checked, indeterminate, and disabled states.",
+    description: "Checkbox stages a single boolean value: unlike a switch it doesn't apply on toggle, contributing its `value` to an enclosing form only on submit. It styles a native `<input type=\"checkbox\">` with `appearance: none` and overlays a custom indicator, so it keeps every native affordance (keyboard activation, form participation, label association) while looking the part. Beyond the on/off pair it carries a third visual state, `indeterminate`, for the classic select-all / partial-selection pattern; the indicator switches from a check mark to a dash, and any user interaction clears it. Two sizes, `sm` and `md`, cover compact and default density.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "checkbox",
+            description: "The label root wrapping the control and text, so a click anywhere toggles the box.",
+            selector: ".xtyle-checkbox",
+            tokens: ["--font-sans", "--text-body", "--leading-normal", "--fg-0", "--space-2", "--space-5"],
+        },
+        {
+            name: "control",
+            description: "The native checkbox input, stripped of its default look and redrawn as the box.",
+            selector: ".xtyle-checkbox__control",
+            tokens: [
+                "--field-bg",
+                "--field-border",
+                "--border-thin",
+                "--radius-sm",
+                "--accent",
+                "--duration-fast",
+                "--ease-standard",
+            ],
+        },
+        {
+            name: "indicator",
+            description: "The overlaid check / dash glyph, drawn in the fill's foreground ink.",
+            selector: ".xtyle-checkbox__indicator",
+            tokens: ["--accent-fg"],
+        },
+        {
+            name: "label",
+            description: "The text content wrapper beside the box.",
+            selector: ".xtyle-checkbox__label",
+        },
+    ],
+    props: [
+        {
+            name: "checked",
+            type: "boolean",
+            default: "false",
+            description: "Whether the box is checked. Two-way bindable in Svelte.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "indeterminate",
+            type: "boolean",
+            default: "false",
+            description: "Third visual state (a dash) for partial selection. Cleared on any user toggle.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            default: "false",
+            description: "Disables interaction and dims the control.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Control size. Only `sm` and `md` are meaningful for a checkbox.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "accent",
+            description: "Color of the checked and indeterminate fill. Any semantic role, accent variant, or named hue.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "name",
+            type: "string",
+            description: "Form field name submitted with the enclosing form when checked.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "value",
+            type: "string",
+            default: "on",
+            description: "Value contributed to the form when checked.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "Accessible name when no visible label text is slotted.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "labelledby",
+            type: "string",
+            description: "ID of an external element naming the checkbox (sets `aria-labelledby`).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-checkbox--sm" },
+        { name: "md", description: "Default.", className: "xtyle-checkbox", isDefault: true },
+    ],
+    states: [
+        {
+            name: "checked",
+            description: "Box filled with the chosen tone (accent by default), check mark shown.",
+            selector: ".xtyle-checkbox__control:checked",
+            tokens: ["--accent", "--accent-fg"],
+        },
+        {
+            name: "indeterminate",
+            description: "Box filled, dash shown instead of the check mark.",
+            selector: ".xtyle-checkbox--indeterminate .xtyle-checkbox__control",
+            tokens: ["--accent"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-checkbox__control:focus-visible",
+            tokens: ["--border-normal", "--ring"],
+        },
+        {
+            name: "disabled",
+            description: "Non-interactive: muted fill, border, and ink.",
+            selector: '.xtyle-checkbox__control:disabled, .xtyle-checkbox__control[aria-disabled="true"]',
+            tokens: ["--state-disabled", "--field-border", "--fg-disabled"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The visible label text beside the box.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-sm",
+        "--leading-normal",
+        "--fg-0",
+        "--fg-disabled",
+        "--space-1",
+        "--space-2",
+        "--space-4",
+        "--space-5",
+        "--space-6",
+        "--weight-semibold",
+        "--field-bg",
+        "--field-border",
+        "--border-thin",
+        "--border-normal",
+        "--radius-sm",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-fg`]),
+        "--duration-fast",
+        "--ease-standard",
+        "--ring",
+        "--state-disabled",
+    ],
+    composition: [
+        "Pair with Field to give a checkbox a description, hint, or error message in a form layout.",
+        "Wrap items in a `CheckboxGroup` for a select-all heading that tri-states over them automatically (all → checked, some → indeterminate, none → off); pass `manual` to keep the heading but drive its state yourself.",
+        "For a one-of-many choice use a radio group instead; checkbox is for independent booleans.",
+    ],
+    a11y: [
+        "Wraps a native `<input type=\"checkbox\">` inside a `<label>`, so keyboard toggling, focus, and label association come for free.",
+        "`indeterminate` is a presentation-only state on the native input; the box reports checked/unchecked to assistive tech, never a mixed value.",
+        "With no slotted text the checkbox REQUIRES a `label` or `labelledby`; the binding warns at runtime when no accessible name is found.",
+        "Focus is shown with a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "The check / dash glyph is decorative (`aria-hidden`); state is conveyed by the native input, not the SVG.",
+    ],
+    examples: [
+        {
+            id: "states",
+            title: "States",
+            description: "Unchecked, checked, indeterminate, and a disabled compact checkbox.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "group",
+            title: "Group selection",
+            description: "A CheckboxGroup with a tri-state select-all heading that rolls up its items automatically.",
+            source: { html: groupHtmlExample, svelte: groupSvelteExample, astro: groupAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=checkbox.manifest.js.map

package/dist/manifest/checkbox.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.manifest.js","sourceRoot":"","sources":["../../src/manifest/checkbox.manifest.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,GAAG;;;;;;uEAMmD,CAAC;AAExE,MAAM,aAAa,GAAG;;;;;;;;;;;;2DAYqC,CAAC;AAE5D,MAAM,YAAY,GAAG;;;;;;;;;;2DAUsC,CAAC;AAE5D,MAAM,gBAAgB,GAAG;;;;wBAID,CAAC;AAEzB,MAAM,kBAAkB,GAAG;;;;;;;;iBAQV,CAAC;AAElB,MAAM,iBAAiB,GAAG;;;;;;;;iBAQT,CAAC;AAElB,MAAM,CAAC,MAAM,gBAAgB,GAAsB;IAClD,EAAE,EAAE,UAAU;IACd,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,wEAAwE;IACjF,WAAW,EACV,0oBAA0oB;IAC3oB,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,oFAAoF;YACjG,QAAQ,EAAE,iBAAiB;YAC3B,MAAM,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,kBAAkB,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAC;SAC9F;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,iFAAiF;YAC9F,QAAQ,EAAE,0BAA0B;YACpC,MAAM,EAAE;gBACP,YAAY;gBACZ,gBAAgB;gBAChB,eAAe;gBACf,aAAa;gBACb,UAAU;gBACV,iBAAiB;gBACjB,iBAAiB;aACjB;SACD;QACD;YACC,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,sEAAsE;YACnF,QAAQ,EAAE,4BAA4B;YACtC,MAAM,EAAE,CAAC,aAAa,CAAC;SACvB;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,0CAA0C;YACvD,QAAQ,EAAE,wBAAwB;SAClC;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,yDAAyD;YACtE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,eAAe;YACrB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,gFAAgF;YAC7F,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,4CAA4C;YACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,iEAAiE;YAC9E,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;SACrB;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,+FAA+F;YAC5G,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,GAAG,UAAU,CAAC;SACxB;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,iEAAiE;YAC9E,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,6CAA6C;YAC1D,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,wDAAwD;YACrE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,yEAAyE;YACtF,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE;QACN,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,oBAAoB,EAAE;QACxE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB,EAAE,SAAS,EAAE,IAAI,EAAE;KACrF;IACD,MAAM,EAAE;QACP;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,wEAAwE;YACrF,QAAQ,EAAE,kCAAkC;YAC5C,MAAM,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC;SACnC;QACD;YACC,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,mDAAmD;YAChE,QAAQ,EAAE,yDAAyD;YACnE,MAAM,EAAE,CAAC,UAAU,CAAC;SACpB;QACD;YACC,IAAI,EAAE,eAAe;YACrB,WAAW,EAAE,2GAA2G;YACxH,QAAQ,EAAE,wCAAwC;YAClD,MAAM,EAAE,CAAC,iBAAiB,EAAE,QAAQ,CAAC;SACrC;QACD;YACC,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,+CAA+C;YAC5D,QAAQ,EAAE,mFAAmF;YAC7F,MAAM,EAAE,CAAC,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,CAAC;SAC/D;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,wCAAwC;YACrD,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,cAAc,EAAE;QACf,aAAa;QACb,aAAa;QACb,WAAW;QACX,kBAAkB;QAClB,QAAQ;QACR,eAAe;QACf,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,WAAW;QACX,mBAAmB;QACnB,YAAY;QACZ,gBAAgB;QAChB,eAAe;QACf,iBAAiB;QACjB,aAAa;QACb,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACrD,iBAAiB;QACjB,iBAAiB;QACjB,QAAQ;QACR,kBAAkB;KAClB;IACD,WAAW,EAAE;QACZ,4FAA4F;QAC5F,qNAAqN;QACrN,2FAA2F;KAC3F;IACD,IAAI,EAAE;QACL,kIAAkI;QAClI,6IAA6I;QAC7I,sIAAsI;QACtI,gIAAgI;QAChI,2GAA2G;KAC3G;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,QAAQ;YACZ,KAAK,EAAE,QAAQ;YACf,WAAW,EAAE,qEAAqE;YAClF,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;QACD;YACC,EAAE,EAAE,OAAO;YACX,KAAK,EAAE,iBAAiB;YACxB,WAAW,EAAE,4FAA4F;YACzG,MAAM,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,iBAAiB,EAAE;SACxF;KACD;CACD,CAAC"}

package/dist/manifest/cluster.manifest.d.ts

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

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

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

package/dist/manifest/cluster.manifest.js

@@ -0,0 +1,132 @@
+const htmlExample = `<xtyle-cluster gap="2">
+	<xtyle-button variant="solid" tone="accent">Save</xtyle-button>
+	<xtyle-button variant="outline" tone="neutral">Cancel</xtyle-button>
+</xtyle-cluster>
+
+<xtyle-cluster gap="1" justify="between">
+	<xtyle-badge tone="success">Active</xtyle-badge>
+	<xtyle-badge tone="info">Beta</xtyle-badge>
+	<xtyle-badge tone="warn">Limited</xtyle-badge>
+</xtyle-cluster>`;
+const svelteExample = `<script lang="ts">
+	import { Cluster, Button, Badge } from "@xtyle/svelte";
+</script>
+
+<Cluster gap={2}>
+	<Button variant="solid" tone="accent">Save</Button>
+	<Button variant="outline" tone="neutral">Cancel</Button>
+</Cluster>
+
+<Cluster gap={1} justify="between">
+	<Badge tone="success">Active</Badge>
+	<Badge tone="info">Beta</Badge>
+	<Badge tone="warn">Limited</Badge>
+</Cluster>`;
+const astroExample = `---
+import { Cluster, Button, Badge } from "@xtyle/astro";
+---
+
+<Cluster gap={2}>
+	<Button variant="solid" tone="accent">Save</Button>
+	<Button variant="outline" tone="neutral">Cancel</Button>
+</Cluster>
+
+<Cluster gap={1} justify="between">
+	<Badge tone="success">Active</Badge>
+	<Badge tone="info">Beta</Badge>
+	<Badge tone="warn">Limited</Badge>
+</Cluster>`;
+const SPACE_TOKENS = [
+    "--space-0",
+    "--space-1",
+    "--space-2",
+    "--space-3",
+    "--space-4",
+    "--space-5",
+    "--space-6",
+    "--space-7",
+    "--space-8",
+];
+export const clusterManifest = {
+    id: "cluster",
+    name: "Cluster",
+    category: "layout",
+    summary: "A horizontal flex row that wraps, for toolbars, tag lists, and inline action groups.",
+    description: "Cluster lays its children out in a horizontal flex row that wraps onto new lines as space runs out, with a token-driven `gap` (0–8) between every item, including across wrapped rows. It vertically centers its children by default and exposes `align` and `justify` for finer control. A `nowrap` flag pins everything to a single row when wrapping is unwanted. Like Stack it carries no chrome of its own, making it the natural home for button groups, badge and tag lists, breadcrumb trails, and any run of inline-ish boxes that should breathe consistently.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "root",
+            description: "The wrapping flex-row container carrying the gap, align, and justify classes.",
+            selector: ".xtyle-cluster",
+            tokens: ["--space-2"],
+        },
+    ],
+    props: [
+        {
+            name: "gap",
+            type: "number",
+            default: "2",
+            description: "Spacing between children (and across wrapped rows), as a step on the `--space` scale (0–8).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["0", "1", "2", "3", "4", "5", "6", "7", "8"],
+        },
+        {
+            name: "align",
+            type: "ClusterAlign",
+            description: "Cross-axis alignment (`align-items`). Defaults to centered.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["start", "center", "end", "stretch", "baseline"],
+        },
+        {
+            name: "justify",
+            type: "ClusterJustify",
+            description: "Main-axis distribution (`justify-content`).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["start", "center", "end", "between", "around", "evenly"],
+        },
+        {
+            name: "nowrap",
+            type: "boolean",
+            default: "false",
+            description: "Pins children to a single row instead of letting them wrap.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "inline",
+            type: "boolean",
+            default: "false",
+            description: "Renders as an inline-flex row instead of a block-level one.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The children to arrange in a wrapping row.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [...SPACE_TOKENS],
+    composition: [
+        "The horizontal counterpart to Stack; reach for Grid when items need to line up in columns.",
+        "Use for button groups, badge/tag lists, breadcrumbs, and toolbar runs.",
+        "Set `nowrap` for single-row controls like a segmented toolbar; leave it off for tag clouds that should reflow.",
+    ],
+    a11y: [
+        "A generic presentational container with no implicit semantics. It adds no roles and announces nothing.",
+        "Wrap in a landmark or list element (`<nav>`, `<ul>`) where the run of items carries meaning.",
+    ],
+    examples: [
+        {
+            id: "wrapping-row",
+            title: "Wrapping row",
+            description: "Children flow left to right and wrap onto new lines, gapped consistently in both axes.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=cluster.manifest.js.map

package/dist/manifest/cluster.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cluster.manifest.js","sourceRoot":"","sources":["../../src/manifest/cluster.manifest.ts"],"names":[],"mappings":"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"}

package/dist/manifest/code.manifest.d.ts

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

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

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