@xtyle/core 0.5.0

package/dist/manifest/icon.manifest.js

@@ -0,0 +1,177 @@
+import { FULL_TONES } from "../vocab.js";
+import { ICON_NAMES } from "../icons.js";
+const htmlExample = `<xtyle-icon name="search"></xtyle-icon>
+<xtyle-icon name="check"></xtyle-icon>
+<xtyle-icon name="chevron-right"></xtyle-icon>
+
+<xtyle-icon name="menu" size="sm"></xtyle-icon>
+<xtyle-icon name="menu" size="lg"></xtyle-icon>`;
+const toneHtmlExample = `<xtyle-icon name="success" tone="success"></xtyle-icon>
+<xtyle-icon name="warning" tone="warn"></xtyle-icon>
+<xtyle-icon name="error" tone="danger"></xtyle-icon>
+
+<xtyle-icon name="loader" spin label="Loading"></xtyle-icon>`;
+const svelteExample = `<script lang="ts">
+	import { Icon } from "@xtyle/svelte";
+</script>
+
+<Icon name="search" />
+<Icon name="check" />`;
+const toneSvelteExample = `<script lang="ts">
+	import { Icon } from "@xtyle/svelte";
+</script>
+
+<Icon name="success" tone="success" />
+<Icon name="loader" spin label="Loading" />`;
+const astroExample = `---
+import Icon from "@xtyle/astro/Icon.astro";
+---
+
+<Icon name="search" />
+<Icon name="check" />`;
+const genHtmlExample = `<!-- a name carrying a spec is composed, not looked up -->
+<xtyle-icon name="crest--shield-c3--star-s45-c1" size="xl"></xtyle-icon>
+
+<!-- a functional glyph rides as a charge by its bare name -->
+<xtyle-icon name="check-badge--circle-c5--check-s55-c1" size="xl"></xtyle-icon>
+
+<!-- a negative-space die: three pips knocked out of a rounded face -->
+<xtyle-icon name="dice-3--square3-c3--dot-p7-s14-ko--dot-s14-ko--dot-p3-s14-ko" size="xl"></xtyle-icon>
+
+<!-- the same spec re-skinned by scheme -->
+<xtyle-icon name="chip--hex-c3--dot-s30-c4" colors="statuses" size="xl"></xtyle-icon>`;
+const genSvelteExample = `<script lang="ts">
+	import { Icon } from "@xtyle/svelte";
+</script>
+
+<Icon name="crest--shield-c3--star-s45-c1" size="xl" />
+<Icon name="chip--hex-c3--dot-s30-c4" colors="statuses" size="xl" />`;
+const genAstroExample = `---
+import Icon from "@xtyle/astro/Icon.astro";
+---
+
+<Icon name="crest--shield-c3--star-s45-c1" size="xl" />
+<Icon name="chip--hex-c3--dot-s30-c4" colors="statuses" size="xl" />`;
+const toneAstroExample = `---
+import Icon from "@xtyle/astro/Icon.astro";
+---
+
+<Icon name="success" tone="success" />
+<Icon name="error" tone="danger" />`;
+export const iconManifest = {
+    id: "icon",
+    name: "Icon",
+    since: "0.4.0",
+    category: "media",
+    summary: "A functional glyph, or a mark generated from a name, drawn in the current text color.",
+    description: "Icon renders one glyph from a small functional set (chevrons, arrows, close, check, the status marks, a spinner, the menu dots, and the media-transport family: play, pause, stop, skip-forward, skip-back) as inline SVG. It carries no color of its own: the glyph is drawn in `currentColor`, so it inherits the text color around it and matches the derived theme with nothing to wire. It sizes off the surrounding type by default, so an icon set beside a word lines up with it; `size` steps it in fixed `em` for a standalone glyph. An optional `tone` tints it to a semantic role or named hue, `spin` turns it into a loading affordance, and a `label` promotes it from decorative to a named image for assistive tech. Beyond the lookup, a `name` can carry a spec: a terse grammar (`shield--star-s45-c1`) the engine parses into a layered mark and composes on the fly, placing primitives on a grid, sizing, rotating, outlining, or knocking them out, and coloring them from the theme's own series via `colors` so a generated mark recolors with the theme. Lookup for the common glyph, generation for everything else, one element for both.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "icon",
+            description: "The `<svg>` glyph, drawn in `currentColor` on a 24×24 grid.",
+            selector: ".xtyle-icon",
+            tokens: [],
+        },
+    ],
+    props: [
+        {
+            name: "name",
+            type: "IconName | string",
+            description: "A functional-set glyph name, or a generated-mark spec (a name carrying a `--` grammar, e.g. `crest--shield-c3--star-s45-c1`). A plain name that is neither renders a visible placeholder box.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...ICON_NAMES],
+        },
+        {
+            name: "colors",
+            type: "SeriesScheme",
+            default: "accents",
+            description: "For a generated mark, the series scheme its `c3+` color slots draw from (`accents`, `skittles`, `statuses`, …), so one spec re-skins across schemes. Ignored for a functional glyph.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["accents", "skittles", "statuses", "thermal", "status"],
+        },
+        {
+            name: "size",
+            type: "IconSize",
+            default: "md",
+            description: "The glyph size, stepping in `em` off the surrounding text: `sm`, `md`, `lg`, `xl`. Omit to match the current text size.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg", "xl"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            description: "Tints the glyph to a semantic role (accent, success, danger, …) or a named hue (red … black). Omit to inherit the surrounding `currentColor`.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "An accessible name. Set it and the icon is exposed as an image with this name; omit it and the icon is decorative and hidden from assistive tech.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "spin",
+            type: "boolean",
+            default: "false",
+            description: "Continuously rotates the glyph as a loading affordance. Honors `prefers-reduced-motion`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "static",
+            type: "boolean",
+            default: "false",
+            description: "Astro only: emit the resolved light-DOM markup but never load the runtime to hydrate it, for a zero-JS glyph or mark. The Svelte and raw-element paths always upgrade, so they carry no equivalent.",
+            bindings: ["astro"],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "A compact glyph for dense inline hints.", className: "xtyle-icon--sm" },
+        { name: "md", description: "The default glyph, matching body text.", className: "xtyle-icon", isDefault: true },
+        { name: "lg", description: "A prominent glyph for a featured control.", className: "xtyle-icon--lg" },
+        { name: "xl", description: "A large glyph for an empty-state or hero mark.", className: "xtyle-icon--xl" },
+    ],
+    states: [
+        {
+            name: "spin",
+            description: "Rotates continuously as a loading affordance; suppressed under reduced-motion.",
+            selector: ".xtyle-icon--spin",
+        },
+    ],
+    slots: [],
+    consumedTokens: [...FULL_TONES.map((t) => `--${t}`)],
+    composition: [
+        "Drop an Icon inside a `Button` before or after the label for an icon-and-text control, or on its own in an icon-only button.",
+        "Set an Icon inline in `Text` at its default size to sit a glyph on the baseline mid-sentence.",
+        "Pair `tone` with a matching status glyph (`success` + `tone=\"success\"`) for a colored inline indicator.",
+        "Use `spin` on the `loader` glyph for a lightweight busy indicator where a full `Spinner` is too much.",
+    ],
+    a11y: [
+        "Decorative by default: with no `label` the icon is `aria-hidden`, so an adjacent text label carries the meaning and the icon is not announced twice.",
+        "Set `label` for a standalone icon that conveys meaning on its own (an icon-only button's glyph); it becomes `role=\"img\"` with the name.",
+        "`spin` honors `prefers-reduced-motion`, freezing the glyph for users who ask for less motion.",
+    ],
+    examples: [
+        {
+            id: "glyphs-and-sizes",
+            title: "Glyphs and sizes",
+            description: "A few glyphs from the set, and the size steps.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "toned-and-spinning",
+            title: "Toned and spinning",
+            description: "A `tone` colors the glyph; `spin` turns the loader into a busy indicator.",
+            source: { html: toneHtmlExample, svelte: toneSvelteExample, astro: toneAstroExample },
+        },
+        {
+            id: "generated-marks",
+            title: "Generated marks",
+            description: "A `name` carrying a spec is composed on the fly: primitives on a grid, sized / rotated / outlined / knocked out, colored from the theme's series via `colors`.",
+            source: { html: genHtmlExample, svelte: genSvelteExample, astro: genAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=icon.manifest.js.map

package/dist/manifest/icon.manifest.js.map

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

package/dist/manifest/image.manifest.d.ts

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

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

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

package/dist/manifest/image.manifest.js

@@ -0,0 +1,186 @@
+const htmlExample = `<xtyle-image
+	src="/photo.jpg"
+	alt="A city skyline at dusk"
+	ratio="16/9"
+	caption="Downtown, golden hour"
+></xtyle-image>`;
+const lightboxHtmlExample = `<xtyle-image
+	src="/photo.jpg"
+	alt="A city skyline at dusk"
+	ratio="4/3"
+	lightbox
+></xtyle-image>`;
+const svelteExample = `<script lang="ts">
+	import { Image } from "@xtyle/svelte";
+</script>
+
+<Image src="/photo.jpg" alt="A city skyline at dusk" ratio="16/9" />`;
+const lightboxSvelteExample = `<script lang="ts">
+	import { Image } from "@xtyle/svelte";
+</script>
+
+<Image src="/photo.jpg" alt="A city skyline at dusk" ratio="4/3" lightbox />`;
+const astroExample = `---
+import Image from "@xtyle/astro/Image.astro";
+---
+
+<Image src="/photo.jpg" alt="A city skyline at dusk" ratio="16/9" caption="Downtown, golden hour" />`;
+const lightboxAstroExample = `---
+import Image from "@xtyle/astro/Image.astro";
+---
+
+<Image src="/photo.jpg" alt="A city skyline at dusk" ratio="4/3" lightbox />`;
+export const imageManifest = {
+    id: "image",
+    name: "Image",
+    since: "0.4.0",
+    category: "media",
+    summary: "A responsive image in an aspect-ratio frame, with a loading shimmer and an opt-in lightbox.",
+    description: "Image wraps a picture in a frame that holds its shape while it loads: give it a `ratio` and the box reserves the space so the page never reflows when the pixels arrive, and a shimmer placeholder fills the frame until they do, fading the image in on load. It stays honest with JavaScript off; the image renders at full opacity with no shimmer to hide it, and the blur-up is a progressive enhancement layered on top, never a curtain that traps the image behind a script that failed to run. `fit` chooses cover or contain, `radius` rounds the frame off the scale, an optional `caption` renders a `figcaption`, and native `loading=\"lazy\"` defers off-screen images for free. Set `lightbox` and the frame becomes a control that opens the full image in a top-layer dialog: a scrim, a close button, backdrop and Escape to dismiss, and focus handled by the platform, all wired only when the runtime is present so the static markup stays inert and safe.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "frame",
+            description: "The aspect-ratio box that clips the image and holds its shape while loading.",
+            selector: ".xtyle-image__frame",
+            tokens: ["--bg-2", "--radius-md"],
+        },
+        {
+            name: "placeholder",
+            description: "The shimmer shown behind the image while it loads.",
+            selector: ".xtyle-image__placeholder",
+            tokens: ["--bg-2", "--bg-3", "--duration-slow"],
+        },
+        {
+            name: "caption",
+            description: "The optional caption rendered as a `figcaption` below the frame.",
+            selector: ".xtyle-image__caption",
+            tokens: ["--fg-2", "--text-sm"],
+        },
+        {
+            name: "lightbox",
+            description: "The top-layer dialog that shows the full image, with its scrim and close button.",
+            selector: ".xtyle-image__lightbox",
+            tokens: ["--scrim", "--bg-1"],
+        },
+    ],
+    props: [
+        {
+            name: "src",
+            type: "string",
+            description: "The image URL.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "alt",
+            type: "string",
+            description: "The alternative text. Leave empty only for a decorative image; it carries the accessible name and the lightbox trigger's label.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "ratio",
+            type: "string",
+            description: "An aspect ratio for the frame (a CSS `aspect-ratio` value like `16/9` or `1/1`). Omit to size to the image's natural ratio.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "fit",
+            type: "ImageFit",
+            default: "cover",
+            description: "How the image fills the frame: `cover` crops to fill, `contain` fits the whole image.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["cover", "contain"],
+        },
+        {
+            name: "radius",
+            type: "ImageRadius",
+            default: "md",
+            description: "The frame's corner rounding off the radius scale: `none`, `sm`, `md`, `lg`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["none", "sm", "md", "lg"],
+        },
+        {
+            name: "loading",
+            type: "ImageLoading",
+            default: "lazy",
+            description: "The native browser loading strategy: `lazy` defers off-screen images, `eager` loads immediately.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["lazy", "eager"],
+        },
+        {
+            name: "lightbox",
+            type: "boolean",
+            default: "false",
+            description: "Makes the frame a control that opens the full image in a top-layer dialog. Wired only when the runtime is present.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "caption",
+            type: "string",
+            description: "An optional caption, rendered as a `figcaption` below the frame.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [
+        {
+            name: "loading",
+            description: "While the image loads: the shimmer placeholder shows and the image is held at zero opacity.",
+            selector: ".xtyle-image__frame[data-loading]",
+        },
+        {
+            name: "error",
+            description: "When the image fails to load: a muted frame with a warning glyph replaces the picture.",
+            selector: ".xtyle-image__frame[data-error]",
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--bg-1",
+        "--bg-2",
+        "--bg-3",
+        "--fg-1",
+        "--fg-2",
+        "--radius-sm",
+        "--radius-md",
+        "--radius-lg",
+        "--radius-full",
+        "--duration-slow",
+        "--ease-standard",
+        "--text-sm",
+        "--leading-normal",
+        "--space-2",
+        "--space-6",
+        "--scrim",
+        "--ring",
+        "--border-thick",
+    ],
+    composition: [
+        "Give every content image a `ratio` so the frame reserves its space and the page doesn't reflow as images load.",
+        "Drop an Image into a `Card` media slot for a thumbnail with a caption, or into a `Grid` for a gallery.",
+        "Set `lightbox` on gallery thumbnails so a click opens the full image over a scrim; the close control uses the built-in `close` icon.",
+        "Pair `fit=\"contain\"` with a framed `ratio` for logos or art that must not be cropped.",
+    ],
+    a11y: [
+        "Always set `alt`: it names the image for assistive tech and labels the lightbox trigger. Use an empty `alt` only for a purely decorative image.",
+        "The lightbox opens a native modal dialog, so focus is trapped inside it, Escape closes it, and focus returns to the trigger on close, all handled by the platform.",
+        "The blur-up and lightbox are progressive enhancements: with no JavaScript the image renders normally and is never hidden behind a script.",
+        "The loading shimmer and the fade-in honor `prefers-reduced-motion`.",
+    ],
+    examples: [
+        {
+            id: "framed-with-caption",
+            title: "Framed with a caption",
+            description: "A responsive image in a `16/9` frame with a caption; the frame reserves its space while the image loads.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "lightbox",
+            title: "Lightbox",
+            description: "Set `lightbox` and the frame opens the full image in a top-layer dialog on click.",
+            source: { html: lightboxHtmlExample, svelte: lightboxSvelteExample, astro: lightboxAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=image.manifest.js.map

package/dist/manifest/image.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.manifest.js","sourceRoot":"","sources":["../../src/manifest/image.manifest.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG;;;;;gBAKJ,CAAC;AAEjB,MAAM,mBAAmB,GAAG;;;;;gBAKZ,CAAC;AAEjB,MAAM,aAAa,GAAG;;;;qEAI+C,CAAC;AAEtE,MAAM,qBAAqB,GAAG;;;;6EAI+C,CAAC;AAE9E,MAAM,YAAY,GAAG;;;;qGAIgF,CAAC;AAEtG,MAAM,oBAAoB,GAAG;;;;6EAIgD,CAAC;AAE9E,MAAM,CAAC,MAAM,aAAa,GAAsB;IAC/C,EAAE,EAAE,OAAO;IACX,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,OAAO;IACjB,OAAO,EAAE,6FAA6F;IACtG,WAAW,EACV,m7BAAm7B;IACp7B,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,8EAA8E;YAC3F,QAAQ,EAAE,qBAAqB;YAC/B,MAAM,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC;SACjC;QACD;YACC,IAAI,EAAE,aAAa;YACnB,WAAW,EAAE,oDAAoD;YACjE,QAAQ,EAAE,2BAA2B;YACrC,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC;SAC/C;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,kEAAkE;YAC/E,QAAQ,EAAE,uBAAuB;YACjC,MAAM,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC;SAC/B;QACD;YACC,IAAI,EAAE,UAAU;YAChB,WAAW,EAAE,kFAAkF;YAC/F,QAAQ,EAAE,wBAAwB;YAClC,MAAM,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC;SAC7B;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,gBAAgB;YAC7B,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,iIAAiI;YAC9I,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,OAAO;YACb,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,6HAA6H;YAC1I,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,KAAK;YACX,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,uFAAuF;YACpG,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC;SAC7B;QACD;YACC,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,6EAA6E;YAC1F,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;SACnC;QACD;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,cAAc;YACpB,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kGAAkG;YAC/G,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;SAC1B;QACD;YACC,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,oHAAoH;YACjI,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,kEAAkE;YAC/E,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,EAAE;IACT,MAAM,EAAE;QACP;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,6FAA6F;YAC1G,QAAQ,EAAE,mCAAmC;SAC7C;QACD;YACC,IAAI,EAAE,OAAO;YACb,WAAW,EAAE,wFAAwF;YACrG,QAAQ,EAAE,iCAAiC;SAC3C;KACD;IACD,KAAK,EAAE,EAAE;IACT,cAAc,EAAE;QACf,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,aAAa;QACb,aAAa;QACb,aAAa;QACb,eAAe;QACf,iBAAiB;QACjB,iBAAiB;QACjB,WAAW;QACX,kBAAkB;QAClB,WAAW;QACX,WAAW;QACX,SAAS;QACT,QAAQ;QACR,gBAAgB;KAChB;IACD,WAAW,EAAE;QACZ,gHAAgH;QAChH,wGAAwG;QACxG,sIAAsI;QACtI,yFAAyF;KACzF;IACD,IAAI,EAAE;QACL,iJAAiJ;QACjJ,oKAAoK;QACpK,2IAA2I;QAC3I,qEAAqE;KACrE;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,qBAAqB;YACzB,KAAK,EAAE,uBAAuB;YAC9B,WAAW,EAAE,0GAA0G;YACvH,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;QACD;YACC,EAAE,EAAE,UAAU;YACd,KAAK,EAAE,UAAU;YACjB,WAAW,EAAE,mFAAmF;YAChG,MAAM,EAAE,EAAE,IAAI,EAAE,mBAAmB,EAAE,MAAM,EAAE,qBAAqB,EAAE,KAAK,EAAE,oBAAoB,EAAE;SACjG;KACD;CACD,CAAC"}

package/dist/manifest/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export { components, getComponent, listComponents } from "./registry.js";
+export { tokensInCss, declaredPropsInCss, styleQueriedTokensInCss, styleQueryPairsInCss, consumedTokensInCss, lintManifest, lintStyleQueryDomains, lintHostControls, } from "./lint.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/manifest/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EACN,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,YAAY,EACZ,qBAAqB,EACrB,gBAAgB,GAChB,MAAM,WAAW,CAAC"}

package/dist/manifest/index.js

@@ -0,0 +1,4 @@
+export * from "./types.js";
+export { components, getComponent, listComponents } from "./registry.js";
+export { tokensInCss, declaredPropsInCss, styleQueriedTokensInCss, styleQueryPairsInCss, consumedTokensInCss, lintManifest, lintStyleQueryDomains, lintHostControls, } from "./lint.js";
+//# sourceMappingURL=index.js.map

package/dist/manifest/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/manifest/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EACN,WAAW,EACX,kBAAkB,EAClB,uBAAuB,EACvB,oBAAoB,EACpB,mBAAmB,EACnB,YAAY,EACZ,qBAAqB,EACrB,gBAAgB,GAChB,MAAM,WAAW,CAAC"}

package/dist/manifest/kbd.manifest.d.ts

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

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

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

package/dist/manifest/kbd.manifest.js

@@ -0,0 +1,119 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-kbd>Ctrl</xtyle-kbd>
+<xtyle-kbd>K</xtyle-kbd>
+
+<xtyle-kbd size="sm">Esc</xtyle-kbd>
+<xtyle-kbd size="lg">Enter</xtyle-kbd>`;
+const toneHtmlExample = `<xtyle-kbd tone="accent">⌘</xtyle-kbd>
+<xtyle-kbd tone="success">Enter</xtyle-kbd>
+<xtyle-kbd tone="danger">Del</xtyle-kbd>`;
+const svelteExample = `<script lang="ts">
+	import { Kbd } from "@xtyle/svelte";
+</script>
+
+<Kbd>Ctrl</Kbd>
+<Kbd>K</Kbd>`;
+const toneSvelteExample = `<script lang="ts">
+	import { Kbd } from "@xtyle/svelte";
+</script>
+
+<Kbd tone="accent">⌘</Kbd>
+<Kbd tone="danger">Del</Kbd>`;
+const astroExample = `---
+import Kbd from "@xtyle/astro/Kbd.astro";
+---
+
+<Kbd>Ctrl</Kbd>
+<Kbd>K</Kbd>`;
+const toneAstroExample = `---
+import Kbd from "@xtyle/astro/Kbd.astro";
+---
+
+<Kbd tone="accent">⌘</Kbd>
+<Kbd tone="danger">Del</Kbd>`;
+export const kbdManifest = {
+    id: "kbd",
+    name: "Kbd",
+    category: "content",
+    summary: "A keycap for the keys in a shortcut.",
+    description: "Kbd renders a single key as a physical keycap: a mono-faced label on a raised surface, the depth read from a heavier bottom edge rather than a drop shadow, so it sits cleanly inline in running text. It carries no layout of its own: set a few side by side in a `Cluster` to spell a chord (`Ctrl` `+` `K`). Everything about its look is derived chrome: the surface, the edge, the radius all come from the same tokens the rest of the theme does, so a keycap matches the UI it documents. The `size` prop steps it with the surrounding type from `sm` to `lg`, and an optional `tone` tints the whole keycap (face, edge, and label) to any of the semantic roles or named hues for a primary-chord or status key.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "kbd",
+            description: "The keycap root: a raised surface with a weighted bottom edge.",
+            selector: ".xtyle-kbd",
+            tokens: ["--bg-2", "--fg-1", "--line-2", "--border-thick", "--radius-sm", "--font-mono"],
+        },
+    ],
+    props: [
+        {
+            name: "size",
+            type: "KbdSize",
+            default: "md",
+            description: "The keycap size, stepping with the type scale: `sm`, `md`, or `lg`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "tone",
+            type: "KbdTone",
+            description: "Tints the keycap face, edge, and label to a semantic role (accent, success, danger, …) or a named hue (red … black). Omit for the neutral keycap.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "A compact keycap for dense inline hints.", className: "xtyle-kbd--sm" },
+        { name: "md", description: "The default keycap, sized with body text.", className: "xtyle-kbd", isDefault: true },
+        { name: "lg", description: "A prominent keycap for a featured shortcut.", className: "xtyle-kbd--lg" },
+    ],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The key label: a glyph or short word like `K`, `Esc`, or `Enter`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--bg-2",
+        "--fg-1",
+        "--line-2",
+        "--border-thin",
+        "--border-thick",
+        "--radius-sm",
+        "--font-mono",
+        "--text-sm",
+        "--text-xs",
+        "--text-lg",
+        "--weight-medium",
+        "--leading-tight",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-bg`, `--${t}-text`]),
+    ],
+    composition: [
+        "Spell a chord by setting keys in a `Cluster` with a small gap: `Ctrl` `+` `K`.",
+        "Drop a Kbd inline in `Text` to name a shortcut mid-sentence. It sits on the baseline without breaking the line.",
+        "Pair shortcuts with their actions in a `Table` or a `Stack` of `Cluster`s for a key map.",
+    ],
+    a11y: [
+        "Renders the semantic `<kbd>` element, so assistive tech announces the content as keyboard input.",
+        "Keep the label the literal key name; the keycap styling is presentational and adds no meaning of its own.",
+    ],
+    examples: [
+        {
+            id: "keys-and-sizes",
+            title: "Keys and sizes",
+            description: "Single keys and a chord, shown across the three sizes.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "toned-keys",
+            title: "Toned keycaps",
+            description: "A `tone` tints the whole keycap for a primary-chord or status key.",
+            source: { html: toneHtmlExample, svelte: toneSvelteExample, astro: toneAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=kbd.manifest.js.map

package/dist/manifest/kbd.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.manifest.js","sourceRoot":"","sources":["../../src/manifest/kbd.manifest.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,MAAM,WAAW,GAAG;;;;uCAImB,CAAC;AAExC,MAAM,eAAe,GAAG;;yCAEiB,CAAC;AAE1C,MAAM,aAAa,GAAG;;;;;aAKT,CAAC;AAEd,MAAM,iBAAiB,GAAG;;;;;6BAKG,CAAC;AAE9B,MAAM,YAAY,GAAG;;;;;aAKR,CAAC;AAEd,MAAM,gBAAgB,GAAG;;;;;6BAKI,CAAC;AAE9B,MAAM,CAAC,MAAM,WAAW,GAAsB;IAC7C,EAAE,EAAE,KAAK;IACT,IAAI,EAAE,KAAK;IACX,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,sCAAsC;IAC/C,WAAW,EACV,8rBAA8rB;IAC/rB,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,KAAK;YACX,WAAW,EAAE,gEAAgE;YAC7E,QAAQ,EAAE,YAAY;YACtB,MAAM,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,aAAa,EAAE,aAAa,CAAC;SACxF;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,IAAI;YACb,WAAW,EAAE,qEAAqE;YAClF,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;SAC3B;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,SAAS;YACf,WAAW,EACV,mJAAmJ;YACpJ,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,CAAC,GAAG,UAAU,CAAC;SACxB;KACD;IACD,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE;QACN,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,0CAA0C,EAAE,SAAS,EAAE,eAAe,EAAE;QACnG,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,2CAA2C,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE;QACjH,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,6CAA6C,EAAE,SAAS,EAAE,eAAe,EAAE;KACtG;IACD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,mEAAmE;YAChF,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,cAAc,EAAE;QACf,QAAQ;QACR,QAAQ;QACR,UAAU;QACV,eAAe;QACf,gBAAgB;QAChB,aAAa;QACb,aAAa;QACb,WAAW;QACX,WAAW;QACX,WAAW;QACX,iBAAiB;QACjB,iBAAiB;QACjB,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;KACpE;IACD,WAAW,EAAE;QACZ,gFAAgF;QAChF,iHAAiH;QACjH,0FAA0F;KAC1F;IACD,IAAI,EAAE;QACL,kGAAkG;QAClG,2GAA2G;KAC3G;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,gBAAgB;YACpB,KAAK,EAAE,gBAAgB;YACvB,WAAW,EAAE,wDAAwD;YACrE,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;QACD;YACC,EAAE,EAAE,YAAY;YAChB,KAAK,EAAE,eAAe;YACtB,WAAW,EAAE,oEAAoE;YACjF,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,EAAE,iBAAiB,EAAE,KAAK,EAAE,gBAAgB,EAAE;SACrF;KACD;CACD,CAAC"}

package/dist/manifest/link.manifest.d.ts

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

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

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