@xtyle/core 0.5.0

package/dist/manifest/select.manifest.js

@@ -0,0 +1,262 @@
+const htmlExample = `<xtyle-select label="Theme" name="theme" value="auto">
+	<option value="auto">Match system</option>
+	<option value="light">Light</option>
+	<option value="dark">Dark</option>
+</xtyle-select>
+
+<xtyle-select label="Plan" size="lg">
+	<optgroup label="Personal">
+		<option value="free">Free</option>
+		<option value="pro">Pro</option>
+	</optgroup>
+	<optgroup label="Teams">
+		<option value="team">Team</option>
+		<option value="org">Organization</option>
+	</optgroup>
+</xtyle-select>
+
+<xtyle-select label="Country" invalid error="Select a country to continue." required>
+	<option value="" disabled selected>Choose…</option>
+	<option value="us">United States</option>
+	<option value="ca">Canada</option>
+</xtyle-select>`;
+const svelteExample = `<script lang="ts">
+	import { Select } from "@xtyle/svelte";
+	let theme = $state("auto");
+</script>
+
+<Select label="Theme" name="theme" bind:value={theme}>
+	<option value="auto">Match system</option>
+	<option value="light">Light</option>
+	<option value="dark">Dark</option>
+</Select>
+
+<Select label="Plan" size="lg">
+	<optgroup label="Personal">
+		<option value="free">Free</option>
+		<option value="pro">Pro</option>
+	</optgroup>
+	<optgroup label="Teams">
+		<option value="team">Team</option>
+		<option value="org">Organization</option>
+	</optgroup>
+</Select>
+
+<Select label="Country" invalid error="Select a country to continue." required>
+	<option value="" disabled selected>Choose…</option>
+	<option value="us">United States</option>
+	<option value="ca">Canada</option>
+</Select>`;
+const astroExample = `---
+import { Select } from "@xtyle/astro";
+---
+
+<Select label="Theme" name="theme" value="auto">
+	<option value="auto">Match system</option>
+	<option value="light">Light</option>
+	<option value="dark">Dark</option>
+</Select>
+
+<Select label="Plan" size="lg">
+	<optgroup label="Personal">
+		<option value="free">Free</option>
+		<option value="pro">Pro</option>
+	</optgroup>
+	<optgroup label="Teams">
+		<option value="team">Team</option>
+		<option value="org">Organization</option>
+	</optgroup>
+</Select>
+
+<Select label="Country" invalid error="Select a country to continue." required>
+	<option value="" disabled selected>Choose…</option>
+	<option value="us">United States</option>
+	<option value="ca">Canada</option>
+</Select>`;
+export const selectManifest = {
+    id: "select",
+    name: "Select",
+    category: "form",
+    summary: "A styled native dropdown: `.xtyle-control` chrome, a custom chevron, and a label, with valid and invalid states across three sizes.",
+    description: "Select is a thin, accessible skin over the native `<select>`. It inherits the shared `.xtyle-control` chrome (the same fill, border, radius, and focus ring as Field) so it sits flush beside other form controls, then hides the platform arrow and paints its own chevron, colored by focus, invalid, and disabled state. Options are plain `<option>` / `<optgroup>` children passed straight through to the native element, so keyboard navigation, type-ahead, and the OS picker all come for free. A `label` wires an accessible name, `invalid` plus `error` surface validation, and `sm` / `md` / `lg` tune the density.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "root",
+            description: "The vertical stack holding the label, control, and error message.",
+            selector: ".xtyle-select",
+            tokens: ["--space-1", "--font-sans"],
+        },
+        {
+            name: "label",
+            description: "The control's visible label, hidden when no `label` is set.",
+            selector: ".xtyle-select__label",
+            tokens: ["--text-sm", "--weight-medium", "--fg-1", "--leading-normal"],
+        },
+        {
+            name: "control",
+            description: "The positioning wrapper that overlays the chevron on the native select.",
+            selector: ".xtyle-select__control",
+        },
+        {
+            name: "select",
+            description: "The native `<select>` carrying the shared `.xtyle-control` chrome with the platform arrow suppressed.",
+            selector: ".xtyle-select__field",
+            tokens: ["--space-7"],
+        },
+        {
+            name: "chevron",
+            description: "The custom dropdown indicator, decorative and pointer-transparent, recolored by state.",
+            selector: ".xtyle-select__chevron",
+            tokens: ["--space-3", "--fg-2", "--accent", "--duration-fast", "--ease-standard"],
+        },
+        {
+            name: "error",
+            description: "The validation message shown when `invalid` and an `error` string are set.",
+            selector: ".xtyle-select__error",
+            tokens: ["--text-sm", "--leading-normal", "--danger"],
+        },
+    ],
+    props: [
+        {
+            name: "label",
+            type: "string",
+            description: "Visible label and accessible name. When empty, falls back to `aria-label`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "value",
+            type: "string",
+            description: "The selected option's value. Two-way bindable in Svelte.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Control density.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "name",
+            type: "string",
+            description: "Form field name, forwarded to the native select for submission.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "invalid",
+            type: "boolean",
+            default: "false",
+            description: "Marks the field invalid: danger border, danger chevron, and `aria-invalid`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "error",
+            type: "string",
+            description: "Validation message shown beneath the control; wired via `aria-describedby` when invalid.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            default: "false",
+            description: "Disables the native select and mutes the chevron.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "required",
+            type: "boolean",
+            default: "false",
+            description: "Marks the field required, reflecting `required` and `aria-required` onto the native select.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "default",
+            description: "The standard control: `.xtyle-control` chrome with the accent focus ring.",
+            className: "xtyle-select",
+        },
+        {
+            name: "invalid",
+            description: "Validation-failed treatment: danger border and chevron, danger-tinted focus ring.",
+            className: "xtyle-select--invalid",
+            tokens: ["--danger", "--danger-bg", "--border-normal"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-select--sm" },
+        { name: "md", description: "Default.", className: "xtyle-select", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-select--lg" },
+    ],
+    states: [
+        {
+            name: "focus-visible",
+            description: "Keyboard focus: the `.xtyle-control` accent ring, with the chevron tinted to match.",
+            selector: ".xtyle-select__field:focus-visible + .xtyle-select__chevron",
+            tokens: ["--accent"],
+        },
+        {
+            name: "invalid-focus",
+            description: "Focus while invalid: the danger border holds and the ring shifts to the danger tint.",
+            selector: ".xtyle-select--invalid .xtyle-select__field:focus-visible",
+            tokens: ["--danger", "--danger-bg", "--border-normal"],
+        },
+        {
+            name: "disabled",
+            description: "Non-interactive: the native control mutes and the chevron drops to the disabled ink.",
+            selector: ".xtyle-select__field:disabled + .xtyle-select__chevron",
+            tokens: ["--fg-disabled"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The `<option>` and `<optgroup>` elements, passed straight through to the native select.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-sm",
+        "--text-lg",
+        "--weight-medium",
+        "--leading-normal",
+        "--border-normal",
+        "--space-1",
+        "--space-3",
+        "--space-7",
+        "--duration-fast",
+        "--ease-standard",
+        "--fg-1",
+        "--fg-2",
+        "--fg-disabled",
+        "--accent",
+        "--danger",
+        "--danger-text",
+        "--danger-bg",
+    ],
+    composition: [
+        "Inherits `.xtyle-control` chrome from the base layer, so it lines up pixel-for-pixel with Field and Textarea.",
+        "Pair with Field for text inputs and Button for the submit action to build a complete form row.",
+        "Options are native `<option>` / `<optgroup>` elements. No custom item component required.",
+    ],
+    a11y: [
+        "Renders a native `<select>`, so keyboard navigation, type-ahead, and the OS picker work without any custom scripting.",
+        "`label` provides the accessible name via a `for`-linked `<label>`; when absent, an `aria-label` is required and the html binding warns at runtime when neither is present.",
+        "`invalid` sets `aria-invalid=\"true\"`; when an `error` string is present it is linked with `aria-describedby`.",
+        "`required` reflects both the native `required` attribute and `aria-required` for assistive tech.",
+        "The chevron is decorative (`aria-hidden`); selection state lives in the native control, not the visual.",
+        "Focus is shown with the shared `.xtyle-control` ring plus a transparent outline that the forced-colors base rule promotes to a real system outline.",
+    ],
+    examples: [
+        {
+            id: "labels-groups-and-validation",
+            title: "Labels, groups, and validation",
+            description: "A plain labelled select, a grouped large select, and an invalid required select with an error message.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=select.manifest.js.map

package/dist/manifest/select.manifest.js.map

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

package/dist/manifest/separator.manifest.d.ts

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

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

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

package/dist/manifest/separator.manifest.js

@@ -0,0 +1,164 @@
+const htmlExample = `<xtyle-separator></xtyle-separator>
+
+<xtyle-separator size="thin"></xtyle-separator>
+
+<xtyle-separator variant="with-label">OR</xtyle-separator>
+
+<div style="display: flex; height: 1.5rem; align-items: center;">
+	<span>Edit</span>
+	<xtyle-separator orientation="vertical"></xtyle-separator>
+	<span>Share</span>
+</div>`;
+const svelteExample = `<script lang="ts">
+	import { Separator } from "@xtyle/svelte";
+</script>
+
+<Separator />
+
+<Separator size="thin" />
+
+<Separator variant="with-label">OR</Separator>
+
+<div style="display: flex; height: 1.5rem; align-items: center;">
+	<span>Edit</span>
+	<Separator orientation="vertical" />
+	<span>Share</span>
+</div>`;
+const astroExample = `---
+import { Separator } from "@xtyle/astro";
+---
+
+<Separator />
+
+<Separator size="thin" />
+
+<Separator variant="with-label">OR</Separator>
+
+<div style="display: flex; height: 1.5rem; align-items: center;">
+	<span>Edit</span>
+	<Separator orientation="vertical" />
+	<span>Share</span>
+</div>`;
+export const separatorManifest = {
+    id: "separator",
+    name: "Separator",
+    category: "layout",
+    summary: "A hairline divider: horizontal or vertical, optionally with a centered label, in two weights.",
+    description: "Separator draws a thin dividing rule between content. It runs `horizontal` (a full-width rule, the default) or `vertical` (a full-height rule for inline groups like toolbars and button clusters), in two weights: `normal` uses the standard line color and `thin` uses the fainter `--line-2`. The `with-label` variant centers a label over the rule, splitting it into two segments that flank the text (the classic \"OR\" divider), and works on both axes. A bare divider is decorative and `aria-hidden`; once it carries a label it becomes a real `role=\"separator\"` so assistive tech announces the section break.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "separator",
+            description: "The root element. Bare, it is the rule itself; labeled, it is a flex track whose pseudo-elements draw the rule on either side of the label.",
+            selector: ".xtyle-separator",
+            tokens: [
+                "--line",
+                "--line-2",
+                "--border-thin",
+                "--fg-2",
+                "--font-sans",
+                "--text-xs",
+                "--weight-medium",
+                "--leading-tight",
+                "--space-2",
+                "--space-3",
+            ],
+        },
+        {
+            name: "label",
+            description: "The centered label text shown in the with-label variant, flanked by rule segments.",
+            selector: ".xtyle-separator__label",
+        },
+    ],
+    props: [
+        {
+            name: "orientation",
+            type: "Orientation",
+            default: "horizontal",
+            description: "Axis of the rule. `horizontal` spans width; `vertical` spans height for inline groups.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["horizontal", "vertical"],
+        },
+        {
+            name: "variant",
+            type: "SeparatorVariant",
+            default: "default",
+            description: "`default` is a plain rule; `with-label` centers a label over the rule.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["default", "with-label"],
+        },
+        {
+            name: "size",
+            type: "SeparatorSize",
+            default: "normal",
+            description: "Rule weight. `normal` uses the standard line color; `thin` uses the fainter `--line-2`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["thin", "normal"],
+        },
+    ],
+    variants: [
+        {
+            name: "default",
+            description: "A plain dividing rule with no label: decorative and `aria-hidden`.",
+            className: "xtyle-separator",
+            tokens: ["--line"],
+        },
+        {
+            name: "with-label",
+            description: "Centers a label over the rule, splitting it into two flanking segments; promoted to `role=\"separator\"`.",
+            className: "xtyle-separator--with-label",
+            tokens: ["--line", "--fg-2", "--space-3"],
+        },
+    ],
+    sizes: [
+        { name: "thin", description: "Faint: drawn in the lighter `--line-2`.", className: "xtyle-separator--thin" },
+        { name: "normal", description: "Default: the standard `--line` weight.", className: "xtyle-separator", isDefault: true },
+    ],
+    states: [
+        {
+            name: "vertical",
+            description: "Vertical orientation: the rule spans height instead of width, for inline groups.",
+            selector: ".xtyle-separator--vertical",
+            tokens: ["--border-thin"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The label text, shown only in the with-label variant.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-xs",
+        "--weight-medium",
+        "--leading-tight",
+        "--fg-2",
+        "--line",
+        "--line-2",
+        "--border-thin",
+        "--space-2",
+        "--space-3",
+    ],
+    composition: [
+        "Drop a bare Separator between stacked sections (list rows, card bodies, menu groups) for a quiet structural break.",
+        "Use `orientation=\"vertical\"` inside a Toolbar or a horizontal button Cluster to divide groups of controls.",
+        "Reach for `variant=\"with-label\"` for the classic \"OR\" divider between two flows, e.g. a login form split from a social-auth row.",
+    ],
+    a11y: [
+        "A bare divider is purely decorative, so it is marked `aria-hidden` and the role is omitted. It adds no noise to the accessibility tree.",
+        "The labeled variant carries real meaning (a named section break), so it becomes `role=\"separator\"` with the label as its accessible name.",
+        "Vertical orientation sets `aria-orientation=\"vertical\"` on the labeled (separator-role) form so the axis is announced.",
+        "The rule itself is drawn with backgrounds and pseudo-elements, never text, so screen readers never encounter stray glyphs.",
+    ],
+    examples: [
+        {
+            id: "orientations-and-label",
+            title: "Orientations, weights, and the labeled divider",
+            description: "A default rule, the thin weight, the labeled \"OR\" divider, and a vertical rule inside an inline group.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=separator.manifest.js.map

package/dist/manifest/separator.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.manifest.js","sourceRoot":"","sources":["../../src/manifest/separator.manifest.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG;;;;;;;;;;OAUb,CAAC;AAER,MAAM,aAAa,GAAG;;;;;;;;;;;;;;OAcf,CAAC;AAER,MAAM,YAAY,GAAG;;;;;;;;;;;;;;OAcd,CAAC;AAER,MAAM,CAAC,MAAM,iBAAiB,GAAsB;IACnD,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,+FAA+F;IACxG,WAAW,EACV,kmBAAkmB;IACnmB,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,6IAA6I;YAC1J,QAAQ,EAAE,kBAAkB;YAC5B,MAAM,EAAE;gBACP,QAAQ;gBACR,UAAU;gBACV,eAAe;gBACf,QAAQ;gBACR,aAAa;gBACb,WAAW;gBACX,iBAAiB;gBACjB,iBAAiB;gBACjB,WAAW;gBACX,WAAW;aACX;SACD;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,oFAAoF;YACjG,QAAQ,EAAE,yBAAyB;SACnC;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,YAAY;YACrB,WAAW,EAAE,wFAAwF;YACrG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;SACnC;QACD;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,kBAAkB;YACxB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,wEAAwE;YACrF,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,SAAS,EAAE,YAAY,CAAC;SAClC;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,eAAe;YACrB,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,yFAAyF;YACtG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;SAC3B;KACD;IACD,QAAQ,EAAE;QACT;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,oEAAoE;YACjF,SAAS,EAAE,iBAAiB;YAC5B,MAAM,EAAE,CAAC,QAAQ,CAAC;SAClB;QACD;YACC,IAAI,EAAE,YAAY;YAClB,WAAW,EAAE,2GAA2G;YACxH,SAAS,EAAE,6BAA6B;YACxC,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,CAAC;SACzC;KACD;IACD,KAAK,EAAE;QACN,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,yCAAyC,EAAE,SAAS,EAAE,uBAAuB,EAAE;QAC5G,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,wCAAwC,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,EAAE;KACxH;IACD,MAAM,EAAE;QACP;YACC,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,kFAAkF;YAC/F,QAAQ,EAAE,4BAA4B;YACtC,MAAM,EAAE,CAAC,eAAe,CAAC;SACzB;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,uDAAuD;YACpE,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,cAAc,EAAE;QACf,aAAa;QACb,WAAW;QACX,iBAAiB;QACjB,iBAAiB;QACjB,QAAQ;QACR,QAAQ;QACR,UAAU;QACV,eAAe;QACf,WAAW;QACX,WAAW;KACX;IACD,WAAW,EAAE;QACZ,oHAAoH;QACpH,8GAA8G;QAC9G,sIAAsI;KACtI;IACD,IAAI,EAAE;QACL,yIAAyI;QACzI,6IAA6I;QAC7I,0HAA0H;QAC1H,4HAA4H;KAC5H;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,wBAAwB;YAC5B,KAAK,EAAE,gDAAgD;YACvD,WAAW,EAAE,0GAA0G;YACvH,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;KACD;CACD,CAAC"}

package/dist/manifest/skeleton.manifest.d.ts

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

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

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

package/dist/manifest/skeleton.manifest.js

@@ -0,0 +1,141 @@
+const htmlExample = `<div aria-busy="true" aria-live="polite">
+	<xtyle-skeleton shape="circle"></xtyle-skeleton>
+	<xtyle-skeleton shape="text" style="width: 60%"></xtyle-skeleton>
+	<xtyle-skeleton shape="text"></xtyle-skeleton>
+	<xtyle-skeleton shape="block"></xtyle-skeleton>
+	<xtyle-skeleton shape="line"></xtyle-skeleton>
+</div>`;
+const svelteExample = `<script lang="ts">
+	import { Skeleton } from "@xtyle/svelte";
+</script>
+
+<div aria-busy="true" aria-live="polite">
+	<Skeleton shape="circle" />
+	<Skeleton shape="text" style="width: 60%" />
+	<Skeleton shape="text" />
+	<Skeleton shape="block" />
+	<Skeleton shape="line" />
+</div>`;
+const astroExample = `---
+import { Skeleton } from "@xtyle/astro";
+---
+
+<div aria-busy="true" aria-live="polite">
+	<Skeleton shape="circle" />
+	<Skeleton shape="text" style="width: 60%" />
+	<Skeleton shape="text" />
+	<Skeleton shape="block" />
+	<Skeleton shape="line" />
+</div>`;
+export const skeletonManifest = {
+    id: "skeleton",
+    name: "Skeleton",
+    category: "feedback",
+    summary: "A shimmering loading placeholder in four shapes: text, line, block, and circle.",
+    description: "Skeleton stands in for content that has not loaded yet, smoothing the perceived wait with a gentle shimmer that sweeps between two surface tints. Pick a `shape` to match the content it foreshadows (`text` for a run of copy, `line` for a thin rule or divider, `block` for a card or media region, `circle` for an avatar) and a `size` to scale it. The element is purely decorative and marks itself `aria-hidden`; the surrounding container owns the busy state via `aria-busy`, so assistive tech announces \"loading\" once rather than narrating every placeholder. Width is left to the caller (set it inline or via a class) so a skeleton can mirror the real content's measure.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "skeleton",
+            description: "The placeholder block carrying the shape and size classes; paints and animates the shimmer.",
+            selector: ".xtyle-skeleton",
+            tokens: ["--bg-2", "--bg-3", "--radius-md", "--duration-slow", "--ease-standard"],
+        },
+    ],
+    props: [
+        {
+            name: "shape",
+            type: "SkeletonShape",
+            default: "text",
+            description: "The placeholder geometry: what kind of content it stands in for.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["text", "line", "block", "circle"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Scales the placeholder's height (and diameter, for circle).",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+    ],
+    variants: [
+        {
+            name: "text",
+            description: "A single line of body-height copy with a soft corner radius.",
+            className: "xtyle-skeleton--text",
+            tokens: ["--text-body", "--radius-sm"],
+        },
+        {
+            name: "line",
+            description: "A thin pill standing in for a rule, divider, or caption underline.",
+            className: "xtyle-skeleton--line",
+            tokens: ["--border-thick", "--radius-full"],
+        },
+        {
+            name: "block",
+            description: "A tall rectangle for a card, image, or media region.",
+            className: "xtyle-skeleton--block",
+            tokens: ["--space-7", "--radius-md"],
+        },
+        {
+            name: "circle",
+            description: "A perfect circle for an avatar or icon placeholder.",
+            className: "xtyle-skeleton--circle",
+            tokens: ["--space-7", "--radius-full"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-skeleton--sm" },
+        { name: "md", description: "Default.", className: "xtyle-skeleton", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-skeleton--lg" },
+    ],
+    states: [
+        {
+            name: "shimmer",
+            description: "The always-on loading animation sweeping a highlight across the surface; neutralized under reduced-motion by the base layer.",
+            selector: ".xtyle-skeleton",
+            tokens: ["--bg-2", "--bg-3", "--duration-slow", "--ease-standard"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--bg-2",
+        "--bg-3",
+        "--border-normal",
+        "--border-thick",
+        "--duration-slow",
+        "--ease-standard",
+        "--radius-full",
+        "--radius-md",
+        "--radius-sm",
+        "--space-1",
+        "--space-6",
+        "--space-7",
+        "--space-8",
+        "--text-body",
+        "--text-lg",
+        "--text-sm",
+    ],
+    composition: [
+        "Compose several skeletons inside one container that carries `aria-busy=\"true\"`; swap the whole container for real content when it loads.",
+        "Set width inline (`style=\"width: 60%\"`) or via a layout class to mirror the measure of the content being awaited.",
+        "Mirror a Card's layout with a `circle` avatar plus stacked `text` lines for a faithful loading silhouette.",
+    ],
+    a11y: [
+        "The placeholder is decorative; it sets `aria-hidden=\"true\"` so screen readers skip the individual shapes.",
+        "The loading state belongs on the surrounding container via `aria-busy=\"true\"` (optionally with `aria-live=\"polite\"`), not on each skeleton.",
+        "The shimmer routes through `--duration-slow`/`--ease-standard`, so the global reduced-motion base rule stills it without extra component CSS.",
+        "Carries no focusable or interactive content, so it never traps keyboard focus while content loads.",
+    ],
+    examples: [
+        {
+            id: "loading-card",
+            title: "A loading card",
+            description: "Four shapes stacked inside an `aria-busy` container. The canonical loading silhouette.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=skeleton.manifest.js.map

package/dist/manifest/skeleton.manifest.js.map

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

package/dist/manifest/slider.manifest.d.ts

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

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

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