@xtyle/core 0.5.0

package/dist/manifest/button.manifest.js

@@ -0,0 +1,377 @@
+import { FULL_TONES } from "../vocab.js";
+/** The four-token family every tone exposes: the exact set a tone-driven component consumes. */
+const toneTokens = FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-bg`, `--${t}-fg`, `--${t}-text`]);
+const htmlExample = `<xtyle-button variant="solid" tone="accent">Save changes</xtyle-button>
+
+<xtyle-button variant="outline" tone="neutral">Cancel</xtyle-button>
+
+<xtyle-button variant="subtle" tone="danger" icon-only aria-label="Delete">
+	<svg slot="icon-start" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+		<path fill="currentColor" d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-1 12H7L6 9Z" />
+	</svg>
+</xtyle-button>
+
+<xtyle-button variant="solid" tone="success" loading>Saving…</xtyle-button>
+
+<xtyle-button variant="link" tone="info" href="/docs">Read the docs</xtyle-button>`;
+const svelteExample = `<script lang="ts">
+	import { Button } from "@xtyle/svelte";
+</script>
+
+<Button variant="solid" tone="accent" onclick={() => save()}>Save changes</Button>
+
+<Button variant="outline" tone="neutral">Cancel</Button>
+
+<Button variant="subtle" tone="danger" iconOnly ariaLabel="Delete">
+	{#snippet iconStart()}
+		<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+			<path fill="currentColor" d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-1 12H7L6 9Z" />
+		</svg>
+	{/snippet}
+</Button>
+
+<Button variant="solid" tone="success" loading>Saving…</Button>
+
+<Button variant="link" tone="info" href="/docs">Read the docs</Button>`;
+const astroExample = `---
+import { Button } from "@xtyle/astro";
+---
+
+<Button variant="solid" tone="accent">Save changes</Button>
+
+<Button variant="outline" tone="neutral">Cancel</Button>
+
+<Button variant="subtle" tone="danger" iconOnly aria-label="Delete">
+	<svg slot="icon-start" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+		<path fill="currentColor" d="M9 3h6l1 2h4v2H4V5h4l1-2Zm-3 6h12l-1 12H7L6 9Z" />
+	</svg>
+</Button>
+
+<Button variant="link" tone="info" href="/docs">Read the docs</Button>`;
+const listRowHtml = `<xtyle-button block align="start" variant="ghost" tone="neutral">
+	<svg slot="icon-start" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+		<path fill="currentColor" d="M4 4h16v4H4V4Zm0 6h16v4H4v-4Zm0 6h10v4H4v-4Z" />
+	</svg>
+	Recent projects
+	<svg slot="icon-end" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+		<path fill="currentColor" d="m9 6 6 6-6 6-1.4-1.4L11.2 12 7.6 8.4 9 6Z" />
+	</svg>
+</xtyle-button>`;
+const listRowSvelte = `<Button block align="start" variant="ghost" tone="neutral" onclick={() => openRecent()}>
+	{#snippet iconStart()}
+		<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+			<path fill="currentColor" d="M4 4h16v4H4V4Zm0 6h16v4H4v-4Zm0 6h10v4H4v-4Z" />
+		</svg>
+	{/snippet}
+	Recent projects
+	{#snippet iconEnd()}
+		<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+			<path fill="currentColor" d="m9 6 6 6-6 6-1.4-1.4L11.2 12 7.6 8.4 9 6Z" />
+		</svg>
+	{/snippet}
+</Button>`;
+const listRowAstro = `<Button block align="start" variant="ghost" tone="neutral">
+	<svg slot="icon-start" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+		<path fill="currentColor" d="M4 4h16v4H4V4Zm0 6h16v4H4v-4Zm0 6h10v4H4v-4Z" />
+	</svg>
+	Recent projects
+	<svg slot="icon-end" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
+		<path fill="currentColor" d="m9 6 6 6-6 6-1.4-1.4L11.2 12 7.6 8.4 9 6Z" />
+	</svg>
+</Button>`;
+export const buttonManifest = {
+    id: "button",
+    name: "Button",
+    category: "control",
+    summary: "A clickable action: five variants across six semantic tones.",
+    description: "Button triggers an action or navigates. Visual treatment (`variant`) and semantic color (`tone`) are independent axes: any of the five variants (solid, outline, ghost, subtle, link) can carry any of the six tones (accent, neutral, danger, success, warn, info). It renders a native `<button>` by default and an `<a>` when given an `href`, so the same component covers both actions and links. Icon slots, an icon-only square form, a loading state with an inline accessible spinner, and a full-width block mode round out the surface.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "root",
+            description: "The button or anchor element carrying the variant, tone, and size classes.",
+            selector: ".xtyle-button",
+            tokens: [
+                "--font-sans",
+                "--text-body",
+                "--weight-medium",
+                "--leading-tight",
+                "--border-thin",
+                "--radius-md",
+                "--space-2",
+                "--space-4",
+                "--duration-fast",
+                "--ease-standard",
+            ],
+        },
+        {
+            name: "overlay",
+            description: "The pseudo-element behind the content that paints hover and active state tints.",
+            selector: ".xtyle-button::after",
+            tokens: ["--state-hover", "--state-press"],
+        },
+        {
+            name: "icon",
+            description: "An icon slot rendered before or after the label (icon-start / icon-end).",
+            selector: ".xtyle-button__icon",
+        },
+        {
+            name: "label",
+            description: "The text content wrapper, hidden while loading so the spinner takes its place.",
+            selector: ".xtyle-button__label",
+        },
+        {
+            name: "spinner",
+            description: "The inline accessible spinner shown while loading, drawn in currentColor.",
+            selector: ".xtyle-button__spinner",
+            tokens: ["--border-normal", "--radius-full", "--duration-slow"],
+        },
+    ],
+    props: [
+        {
+            name: "variant",
+            type: "ButtonVariant",
+            default: "solid",
+            description: "Visual treatment. Independent of tone.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["solid", "outline", "ghost", "subtle", "link"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "accent",
+            description: "Color tone driving fill, text, and border per variant: any semantic role, accent variant, or named hue.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Control size.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "type",
+            type: '"button" | "submit" | "reset"',
+            default: "button",
+            description: "Native button type. Ignored when `href` is set.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "href",
+            type: "string",
+            description: "When set, the button renders as an `<a>`. Dropped (with `aria-disabled`) when also disabled.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            default: "false",
+            description: "Disables interaction. On an anchor, applies `aria-disabled` and removes `href`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "loading",
+            type: "boolean",
+            default: "false",
+            description: "Shows the spinner, sets `aria-busy`, and blocks interaction.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "block",
+            type: "boolean",
+            default: "false",
+            description: "Stretches the button to fill its container's width.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "align",
+            type: '"start" | "center" | "end"',
+            default: "center",
+            description: "Justifies the content within the button. Visible only when the button is wider than its content (with `block` or an explicit width): `start` left-aligns the label and icons for a list-row button, `end` right-aligns them.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["start", "center", "end"],
+        },
+        {
+            name: "iconOnly",
+            type: "boolean",
+            default: "false",
+            description: "Square, equal-padding form for a single icon. Requires an accessible name (aria-label).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "pressed",
+            type: "boolean",
+            description: "Turns the button into a toggle and reflects its state to `aria-pressed`. Set it (`pressed` / `pressed=\"true\"`) for on, `pressed=\"false\"` for off, and omit it entirely for a plain button. Controlled: flip it in your own click handler; the button reflects state, it does not self-toggle.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "selected",
+            type: "boolean",
+            description: "Marks the button as selected within a set and reflects its state to `aria-selected`; distinct from `pressed`'s on/off toggle. Set it (`selected` / `selected=\"true\"`) for selected, `selected=\"false\"` for not, and omit it entirely for a button with no selection semantics. Controlled: flip it in your own click handler; the button reflects state, it does not self-toggle.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "solid",
+            description: "Filled with the tone color; the primary, highest-emphasis treatment.",
+            className: "xtyle-button--solid",
+            tokens: ["--accent", "--accent-fg"],
+        },
+        {
+            name: "outline",
+            description: "Transparent fill with a tone-colored border and text.",
+            className: "xtyle-button--outline",
+            tokens: ["--accent", "--accent-text"],
+        },
+        {
+            name: "ghost",
+            description: "No chrome until hover, then a neutral state tint; tone-colored text.",
+            className: "xtyle-button--ghost",
+            tokens: ["--accent-text", "--state-hover"],
+        },
+        {
+            name: "subtle",
+            description: "A soft tone-tinted background with tone-colored text.",
+            className: "xtyle-button--subtle",
+            tokens: ["--accent-bg", "--accent-text"],
+        },
+        {
+            name: "link",
+            description: "Looks like a link: no box, no padding, underline on hover.",
+            className: "xtyle-button--link",
+            tokens: ["--accent-text", "--radius-sm"],
+        },
+    ],
+    sizes: [
+        { name: "xs", description: "Densest, for compact toolbar pills.", className: "xtyle-button--xs" },
+        { name: "sm", description: "Compact.", className: "xtyle-button--sm" },
+        { name: "md", description: "Default.", className: "xtyle-button", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-button--lg" },
+    ],
+    states: [
+        {
+            name: "hover",
+            description: "Pointer over the button: overlay paints the hover tint.",
+            selector: ".xtyle-button:hover::after",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "active",
+            description: "Button pressed: overlay paints the press tint.",
+            selector: ".xtyle-button:active::after",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "pressed",
+            description: "Toggle engaged: `aria-pressed=\"true\"` paints the press overlay persistently, so an on toggle reads as sunken across every variant.",
+            selector: '.xtyle-button[aria-pressed="true"]',
+            tokens: ["--state-press"],
+        },
+        {
+            name: "selected",
+            description: "Selected within a set: `aria-selected=\"true\"` paints the selected overlay persistently, so a chosen pill reads as active across every variant.",
+            selector: '.xtyle-button[aria-selected="true"]',
+            tokens: ["--state-selected"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-button:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+        {
+            name: "disabled",
+            description: "Non-interactive: muted fill and ink, overlay suppressed.",
+            selector: '.xtyle-button:disabled, .xtyle-button[aria-disabled="true"]',
+            tokens: ["--fg-disabled", "--state-disabled"],
+        },
+        {
+            name: "loading",
+            description: "Busy: content hidden behind the centered spinner, pointer set to progress.",
+            selector: ".xtyle-button--loading",
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The button label.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "icon-start",
+            description: "An icon rendered before the label.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "icon-end",
+            description: "An icon rendered after the label.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-xs",
+        "--text-sm",
+        "--text-lg",
+        "--weight-medium",
+        "--leading-tight",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-md",
+        "--radius-sm",
+        "--radius-full",
+        "--space-0",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-5",
+        "--duration-fast",
+        "--duration-slow",
+        "--ease-standard",
+        "--ring",
+        "--state-hover",
+        "--state-press",
+        "--state-selected",
+        "--state-disabled",
+        "--fg-disabled",
+        ...toneTokens,
+    ],
+    composition: [
+        "Pair with Field for form submit/reset actions; bind the button `type` accordingly.",
+        "Use the `icon-start` / `icon-end` slots with an Icon component once it lands; for now any inline SVG works.",
+        "The icon-only form is the seed of a future IconButton convenience wrapper.",
+        "For a left-aligned action row (a settings entry, a recent-file row, or a nav item running a callback), pair `block` with `align=\"start\"` and hang a chevron or meta in the `icon-end` slot.",
+    ],
+    a11y: [
+        "Renders a native `<button>` (or `<a>` with `href`) so keyboard and screen-reader semantics come for free.",
+        "`disabled` blocks interaction; on an anchor it applies `aria-disabled` and drops `href` (anchors cannot be natively disabled).",
+        "`loading` sets `aria-busy=\"true\"` and prevents activation.",
+        "`pressed` makes it a toggle via `aria-pressed`; it is controlled, so the consumer flips the state on click. The button reflects, it does not self-toggle.",
+        "`selected` marks membership in a set via `aria-selected` (distinct from `pressed`); it is controlled the same way. The consumer flips it, the button reflects.",
+        "The icon-only form has no visible text, so it REQUIRES an `aria-label`; the binding warns at runtime when one is missing.",
+        "Focus is shown with a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "The spinner is decorative (`aria-hidden`); busy state is conveyed by `aria-busy`, not the spinner.",
+    ],
+    examples: [
+        {
+            id: "variants-and-tones",
+            title: "Variants and tones",
+            description: "The five variants and the six tones are independent. Mix freely.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "list-row",
+            title: "List-row button",
+            description: "A full-width action row that runs a callback: `block` gives it the width, `align=\"start\"` left-aligns the label, and a trailing icon reads as a chevron.",
+            source: { html: listRowHtml, svelte: listRowSvelte, astro: listRowAstro },
+        },
+    ],
+};
+//# sourceMappingURL=button.manifest.js.map

package/dist/manifest/button.manifest.js.map

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

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

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

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

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

package/dist/manifest/card-link.manifest.js

@@ -0,0 +1,133 @@
+const htmlExample = `<xtyle-card-link href="/components/button" interactive>
+	<strong slot="header">Button</strong>
+	The thing people click: variants, tones, and sizes.
+	<span slot="footer">View component →</span>
+</xtyle-card-link>`;
+const svelteExample = `<script lang="ts">
+	import { CardLink } from "@xtyle/svelte";
+</script>
+
+<CardLink href="/components/button" interactive>
+	{#snippet header()}<strong>Button</strong>{/snippet}
+	The thing people click: variants, tones, and sizes.
+	{#snippet footer()}<span>View component →</span>{/snippet}
+</CardLink>`;
+const astroExample = `---
+import { CardLink } from "@xtyle/astro";
+---
+
+<CardLink href="/components/button" interactive>
+	<strong slot="header">Button</strong>
+	The thing people click: variants, tones, and sizes.
+	<span slot="footer">View component →</span>
+</CardLink>`;
+export const cardLinkManifest = {
+    id: "card-link",
+    name: "Card Link",
+    category: "layout",
+    summary: "A whole card that is a single link: the click target is the card, not a button inside it.",
+    description: "Card Link is a `Card` that navigates. It renders one `<a>` carrying the card's surface, padding, and slots, so the entire card is the click target instead of a link buried in it. It composes the same `interactive`, `overlay`, and `compact` looks as `Card`, defaults to `interactive` (a link card invites the click), and resets the underline and ink so the card reads as a card, not a hyperlink. Pass `href` (plus optional `target`/`rel`); a keyboard `focus-visible` ring lands on the card itself. Reach for it wherever a card *is* a destination: a pager, a nav grid, a list of entries.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "card-link",
+            description: "The anchor root carrying the card classes plus the link reset.",
+            selector: ".xtyle-card-link",
+            tokens: [],
+        },
+        {
+            name: "focus",
+            description: "The keyboard focus ring on the card itself.",
+            selector: ".xtyle-card-link:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    props: [
+        {
+            name: "href",
+            type: "string",
+            description: "The destination. Renders as the anchor's `href`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "target",
+            type: "string",
+            description: "The anchor `target` (e.g. `_blank`).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "rel",
+            type: "string",
+            description: "The anchor `rel` (e.g. `noreferrer`).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "interactive",
+            type: "boolean",
+            default: "true",
+            description: "The lift-and-highlight hover treatment. On by default, since a link card invites the click; set `false` for a flat link card.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "overlay",
+            type: "boolean",
+            default: "false",
+            description: "The overlay surface: a translucent fill over whatever sits behind it.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "compact",
+            type: "boolean",
+            default: "false",
+            description: "Tighter padding and gap for dense lists of link cards.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on the card: a token ring plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-card-link:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The card body.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "header",
+            description: "An optional header row, set off from the body.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "footer",
+            description: "An optional footer row, ruled off below the body.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: ["--border-normal", "--border-thick", "--ring"],
+    composition: [
+        "Use it for a prev/next pager: one `CardLink` per direction, the whole card a navigation target.",
+        "Lay a grid of `CardLink`s for an index: each card a destination, no nested anchors to trip a screen reader.",
+        "It composes `Card`'s surface; reach for plain `Card` when the click target is a `Button` *inside* the card, not the card itself.",
+    ],
+    a11y: [
+        "The card is a single `<a>`, so there is exactly one tab stop and one announced link. Never nest another link or button inside it.",
+        "Focus shows on the card with a `focus-visible` ring plus a transparent outline the forced-colors base rule promotes to a real system outline.",
+        "Give the link a clear accessible name through its content (a heading or label), since the whole card is the link text.",
+    ],
+    examples: [
+        {
+            id: "a-card-that-navigates",
+            title: "A card that navigates",
+            description: "The whole card is one link, with the interactive lift on hover and a header and footer.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=card-link.manifest.js.map

package/dist/manifest/card-link.manifest.js.map

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

package/dist/manifest/card.manifest.d.ts

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

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

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