@xtyle/core 0.5.0

package/dist/manifest/breadcrumb.manifest.d.ts

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

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

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

package/dist/manifest/breadcrumb.manifest.js

@@ -0,0 +1,280 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-breadcrumb
+	items='[
+		{"label":"Home","href":"/"},
+		{"label":"Library","href":"/library"},
+		{"label":"Themes"}
+	]'
+></xtyle-breadcrumb>
+
+<xtyle-breadcrumb tone="neutral" separator="›" items='[
+	{"label":"Docs","href":"/docs"},
+	{"label":"Components","href":"/docs/components"},
+	{"label":"Breadcrumb"}
+]'></xtyle-breadcrumb>
+
+<xtyle-breadcrumb label="You are here">
+	<li class="xtyle-breadcrumb__item"><a class="xtyle-breadcrumb__link" href="/">Home</a></li>
+	<li class="xtyle-breadcrumb__separator" aria-hidden="true">/</li>
+	<li class="xtyle-breadcrumb__item"><span class="xtyle-breadcrumb__current" aria-current="page">Settings</span></li>
+</xtyle-breadcrumb>`;
+const svelteExample = `<script lang="ts">
+	import { Breadcrumb } from "@xtyle/svelte";
+
+	const trail = [
+		{ label: "Home", href: "/" },
+		{ label: "Library", href: "/library" },
+		{ label: "Themes" },
+	];
+</script>
+
+<Breadcrumb items={trail} />
+
+<Breadcrumb tone="neutral" separator="›" items={trail} />`;
+const astroExample = `---
+import { Breadcrumb } from "@xtyle/astro";
+
+const trail = [
+	{ label: "Home", href: "/" },
+	{ label: "Library", href: "/library" },
+	{ label: "Themes" },
+];
+---
+
+<Breadcrumb items={trail} />
+
+<Breadcrumb tone="neutral" separator="›" items={trail} />`;
+const interactiveHtmlExample = `<xtyle-breadcrumb id="tree-trail" label="Node ancestry" items='[
+	{"label":"root","value":"0"},
+	{"label":"window","value":"1"},
+	{"label":"toolbar"}
+]'></xtyle-breadcrumb>
+<script>
+	// a valued crumb drives app state instead of navigating
+	document.querySelector("#tree-trail").addEventListener("select", (e) => {
+		selectNode(e.detail.value); // { value, index }
+	});
+</script>`;
+const interactiveSvelteExample = `<script lang="ts">
+	import { Breadcrumb } from "@xtyle/svelte";
+
+	const ancestry = [
+		{ label: "root", value: "0" },
+		{ label: "window", value: "1" },
+		{ label: "toolbar" }, // the current node: no value, not clickable
+	];
+</script>
+
+<Breadcrumb label="Node ancestry" items={ancestry} onselect={(e) => selectNode(e.detail.value)} />`;
+const interactiveAstroExample = `---
+import { Breadcrumb } from "@xtyle/astro";
+
+const ancestry = [
+	{ label: "root", value: "0" },
+	{ label: "window", value: "1" },
+	{ label: "toolbar" },
+];
+---
+
+<Breadcrumb label="Node ancestry" items={ancestry} />
+<script>
+	document.querySelector("xtyle-breadcrumb").addEventListener("select", (e) => {
+		selectNode(e.detail.value);
+	});
+</script>`;
+const titleHtmlExample = `<!-- a title reveals the full value behind a shortened crumb -->
+<xtyle-breadcrumb items='[
+	{"label":"~","href":"/","title":"/home/ada"},
+	{"label":"…","href":"/p","title":"projects/2026/q3"},
+	{"label":"report.md","title":"projects/2026/q3/report.md"}
+]'></xtyle-breadcrumb>`;
+const titleSvelteExample = `<script lang="ts">
+	import { Breadcrumb } from "@xtyle/svelte";
+
+	const path = [
+		{ label: "~", href: "/", title: "/home/ada" },
+		{ label: "…", href: "/p", title: "projects/2026/q3" }, // middle-truncated, full path on hover
+		{ label: "report.md", title: "projects/2026/q3/report.md" },
+	];
+</script>
+
+<Breadcrumb items={path} />`;
+const titleAstroExample = `---
+import { Breadcrumb } from "@xtyle/astro";
+
+const path = [
+	{ label: "~", href: "/", title: "/home/ada" },
+	{ label: "…", href: "/p", title: "projects/2026/q3" },
+	{ label: "report.md", title: "projects/2026/q3/report.md" },
+];
+---
+
+<Breadcrumb items={path} />`;
+export const breadcrumbManifest = {
+    id: "breadcrumb",
+    name: "Breadcrumb",
+    category: "navigation",
+    summary: "A hierarchy trail showing where a page sits, with linked ancestors and a marked current location.",
+    description: "Breadcrumb renders a location trail: an ordered list of ancestor links ending in the current page, with a separator glyph between each step. It is a `<nav>` landmark labeled \"Breadcrumb\" wrapping an `<ol>`; ancestors render as anchors and the final crumb renders as plain text carrying `aria-current=\"page\"`. Pass the trail declaratively via the `items` array (each entry is `{ label, href?, value?, title?, current? }`) and the engine builds the list, injects the separators, and marks the last item current. For an in-app trail where a crumb drives state instead of navigating (selecting an ancestor node, not following a URL), give the item a `value` and no `href`: it renders as a real button and fires a `select` event carrying `{ value, index }` on click or Enter/Space, so interactive crumbs never have to drop to the slot. `href` wins when both are set. The separator glyph defaults to `/` and is purely decorative. A `tone` tints the ancestor links and three `size`s scale the type. For fully custom crumbs, omit `items` and provide your own `<li>` markup in the default slot.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "breadcrumb",
+            description: "The `<nav>` landmark wrapping the trail, carrying the tone and size classes.",
+            selector: ".xtyle-breadcrumb",
+            tokens: ["--font-sans", "--text-sm", "--leading-normal", "--fg-2"],
+        },
+        {
+            name: "list",
+            description: "The ordered list laying the crumbs and separators out in a wrapping row.",
+            selector: ".xtyle-breadcrumb__list",
+            tokens: ["--space-1"],
+        },
+        {
+            name: "item",
+            description: "An ancestor link (anchor) or the current crumb (text). Links tint with the tone; the current crumb is bold neutral ink.",
+            selector: ".xtyle-breadcrumb__link, .xtyle-breadcrumb__current",
+            tokens: ["--accent-vivid", "--fg-0", "--weight-medium", "--radius-sm", "--space-0", "--space-1"],
+        },
+        {
+            name: "separator",
+            description: "The decorative glyph between crumbs, hidden from assistive tech.",
+            selector: ".xtyle-breadcrumb__separator",
+            tokens: ["--fg-3"],
+        },
+    ],
+    props: [
+        {
+            name: "items",
+            type: "BreadcrumbItem[]",
+            description: "The trail, ordered root → current. Each item is `{ label, href?, value?, title?, current? }`. Items with an `href` (and not current) render as links; a non-current item with a `value` and no `href` renders as a button that fires `select`; the last item, or any item with `current: true`, renders as the current page. An optional `title` becomes the crumb's hover tooltip (and its accessible description), for an abbreviated or truncated label whose full value should still be reachable. In the HTML binding this is a JSON-string attribute.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "separator",
+            type: "string",
+            default: "/",
+            description: "The glyph drawn between crumbs; decorative and hidden from assistive technology.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "accent",
+            description: "Color tinting the ancestor links, from any tone in the roster: a semantic role, an accent variant, or a named hue.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Type scale of the trail.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "label",
+            type: "string",
+            default: "Breadcrumb",
+            description: "The accessible name of the `<nav>` landmark.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "accent",
+            description: "Ancestor links tinted with the accent tone (the default).",
+            className: "xtyle-breadcrumb--accent",
+            tokens: ["--accent-vivid"],
+        },
+        {
+            name: "neutral",
+            description: "Ancestor links in neutral ink for a quieter trail.",
+            className: "xtyle-breadcrumb--neutral",
+            tokens: ["--neutral-vivid"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-breadcrumb--sm" },
+        { name: "md", description: "Default.", className: "xtyle-breadcrumb", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-breadcrumb--lg" },
+    ],
+    states: [
+        {
+            name: "hover",
+            description: "Pointer over an ancestor link; it underlines.",
+            selector: ".xtyle-breadcrumb__link:hover",
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on a link: a token-colored ring, plus a transparent outline promoted to a real one in forced-colors mode.",
+            selector: ".xtyle-breadcrumb__link:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "Custom crumb markup (`<li>` items and separators) used when `items` is omitted.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-sm",
+        "--text-xs",
+        "--text-body",
+        "--leading-normal",
+        "--weight-medium",
+        "--fg-0",
+        "--fg-2",
+        "--fg-3",
+        "--radius-sm",
+        "--space-0",
+        "--space-1",
+        "--duration-fast",
+        "--ease-standard",
+        "--border-normal",
+        "--border-thick",
+        "--ring",
+        ...FULL_TONES.map((t) => `--${t}-vivid`),
+    ],
+    composition: [
+        "Place at the top of a page or panel, above the Heading, to anchor where the user is.",
+        "Pair with a Link or Button `home` action for the root crumb when you need richer affordances than a plain anchor.",
+        "For app chrome, sits naturally inside a Toolbar's start group.",
+        "For an in-app trail (a crumb selects a node rather than navigating), give items a `value` instead of an `href` and listen for `select` (`detail: { value, index }`); the valued crumb is a keyboard-accessible button, so interactive breadcrumbs never need the slot.",
+        "Slotted crumbs (the `items`-less default slot) are styled by the component in light-DOM mode, but in shadow mode `::slotted()` reaches only the top-level `<li>` (its layout), not the `<a>`/`<span>` inside; carry the trail in `items` when you want the component's link and current styling to reach every crumb.",
+    ],
+    a11y: [
+        "Renders a `<nav>` landmark with an accessible name (`aria-label`, default \"Breadcrumb\") so screen readers can jump to and announce the trail.",
+        "The trail is an ordered list (`<ol>`), conveying sequence and position to assistive technology.",
+        "The current page is plain text marked `aria-current=\"page\"`, not a link. It is the destination, not a navigation target.",
+        "Separators are decorative and `aria-hidden`, so they are never read aloud between crumbs.",
+        "Link focus is shown with a token ring plus a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "An interactive crumb (an item with a `value`) is a real `<button>`, so it is a keyboard tab stop and activates on Enter and Space, not a `<span>` with a mouse-only handler.",
+        "An item's `title` is a hover tooltip and the crumb's accessible description, so a shortened or glyph label keeps its full value reachable without changing the crumb's accessible name.",
+    ],
+    examples: [
+        {
+            id: "trail",
+            title: "A location trail",
+            description: "An ordered trail of linked ancestors ending in the current page; tone and separator are adjustable.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "interactive",
+            title: "In-app crumbs (select, not navigate)",
+            description: "Give a crumb a `value` instead of an `href` and it becomes a keyboard-accessible button that fires `select` with `{ value, index }`, so clicking an ancestor drives app state rather than following a URL.",
+            source: { html: interactiveHtmlExample, svelte: interactiveSvelteExample, astro: interactiveAstroExample },
+        },
+        {
+            id: "titles",
+            title: "Shortened crumbs with hover detail",
+            description: "A `title` on an item reveals the full value behind an abbreviated, truncated, or glyph label on hover, and carries it to assistive tech as the crumb's accessible description.",
+            source: { html: titleHtmlExample, svelte: titleSvelteExample, astro: titleAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=breadcrumb.manifest.js.map

package/dist/manifest/breadcrumb.manifest.js.map

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

package/dist/manifest/button.manifest.d.ts

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

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

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