@xtyle/core 0.5.0

package/dist/manifest/toast.manifest.js

@@ -0,0 +1,299 @@
+import { FULL_TONES } from "../vocab.js";
+/** The four severities: the meaning axis (glyph + live-region politeness), distinct from color. */
+const TOAST_SEVERITIES = ["success", "warn", "danger", "info"];
+const htmlExample = `<xtyle-toast-region id="toasts" placement="bottom-right"></xtyle-toast-region>
+
+<script type="module">
+	const region = document.getElementById("toasts");
+
+	region.toast({ message: "Settings saved." });
+
+	region.toast({
+		tone: "success",
+		variant: "solid",
+		message: "Your profile is live.",
+	});
+
+	region.toast({
+		tone: "danger",
+		message: "Upload failed.",
+		actionLabel: "Retry",
+		onAction: () => retryUpload(),
+	});
+
+	region.toast({
+		tone: "info",
+		message: "Sync paused while offline.",
+		duration: 0,
+	});
+</script>`;
+const svelteExample = `<script lang="ts">
+	import { Toast } from "@xtyle/svelte";
+</script>
+
+<Toast tone="success" variant="soft">Settings saved.</Toast>
+
+<Toast tone="danger" actionLabel="Retry" onaction={() => retryUpload()}>
+	Upload failed.
+</Toast>
+
+<Toast tone="info" closable={false}>Sync paused while offline.</Toast>`;
+const astroExample = `---
+import { Toast } from "@xtyle/astro";
+---
+
+<Toast tone="success" variant="soft">Settings saved.</Toast>
+
+<Toast tone="danger" actionLabel="Retry">Upload failed.</Toast>
+
+<Toast tone="info" closable={false}>Sync paused while offline.</Toast>`;
+export const toastManifest = {
+    id: "toast",
+    name: "Toast",
+    category: "feedback",
+    summary: "A transient notification that announces itself and slips away; color and meaning on independent axes, in a live-region stack.",
+    description: "Toast surfaces brief, transient feedback without stealing focus. Two axes drive it independently. `severity` (success, warn, danger, info) carries the *meaning*: the status glyph and the live-region politeness, so `danger`/`warn` announce assertively. `tone` carries the *color*, from the full palette. A severity paints its standard color by default (danger reads red), but a `tone` overrides it, and a color-only toast (a non-status `tone`, no `severity`) shows no glyph and announces politely. A `xtyle-toast-region` is a fixed live-region container with an imperative `toast(opts)` method that pushes cards; each carries one of two variants: `soft`, an overlay card with a colored edge, or `solid`, a fully filled card. Toasts enter and leave with a tokened transition, auto-dismiss after a configurable delay that pauses while the pointer or focus rests on them, and may carry a single action button and a close button. A standalone `xtyle-toast` element is also exposed for declarative, statically-placed notices.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "toast-region",
+            description: "The fixed, non-focus-stealing live-region container that stacks and announces toasts.",
+            selector: ".xtyle-toast-region",
+            tokens: ["--space-3", "--space-5", "--space-6", "--elevation-5"],
+        },
+        {
+            name: "toast",
+            description: "A single notification card carrying the variant and tone classes.",
+            selector: ".xtyle-toast",
+            tokens: [
+                "--font-sans",
+                "--text-body",
+                "--leading-normal",
+                "--surface-overlay",
+                "--surface-overlay-border",
+                "--fg-0",
+                "--border-thin",
+                "--radius-md",
+                "--shadow",
+                "--space-3",
+                "--space-4",
+                "--duration-base",
+                "--ease-emphasized",
+            ],
+        },
+        {
+            name: "icon",
+            description: "The severity glyph, shown when a `severity` is set, drawn in the card color (soft) or the on-fill ink (solid). Project an `icon` slot to override it (declarative `xtyle-toast` / `Toast`).",
+            selector: ".xtyle-toast__icon",
+            tokens: ["--text-lg"],
+        },
+        {
+            name: "message",
+            description: "The notification text; the content that gets announced.",
+            selector: ".xtyle-toast__message",
+            tokens: ["--weight-medium"],
+        },
+        {
+            name: "action",
+            description: "An optional inline action button that runs a callback then dismisses the toast.",
+            selector: ".xtyle-toast__action",
+            tokens: [
+                "--text-sm",
+                "--weight-semibold",
+                "--leading-tight",
+                "--border-thin",
+                "--radius-sm",
+                "--space-1",
+                "--space-3",
+                "--state-hover",
+                "--state-press",
+            ],
+        },
+        {
+            name: "close",
+            description: "The dismiss button in the top corner.",
+            selector: ".xtyle-toast__close",
+            tokens: ["--text-lg", "--radius-sm", "--space-0", "--space-1", "--state-hover", "--state-press"],
+        },
+    ],
+    props: [
+        {
+            name: "tone",
+            type: "ToastTone",
+            description: "The card color: any semantic role, accent variant, or named hue. Defaults to the `severity` color (info when neither is set); set it to recolor a severity or to tint a color-only notice.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "severity",
+            type: "ToastSeverity",
+            description: "The meaning, independent of color: drives the status glyph and the live-region politeness (`danger`/`warn` announce assertively). Omit for a color-only toast with no glyph. A bare status-named `tone` implies the matching severity.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...TOAST_SEVERITIES],
+        },
+        {
+            name: "variant",
+            type: "ToastVariant",
+            default: "soft",
+            description: "Visual treatment: a tone-edged overlay card or a fully tone-filled one.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["soft", "solid"],
+        },
+        {
+            name: "message",
+            type: "string",
+            description: "The toast text. Required by the imperative `toast(opts)` API; the slot carries it declaratively.",
+            bindings: ["html"],
+        },
+        {
+            name: "duration",
+            type: "number",
+            default: "5000",
+            description: "Auto-dismiss delay in milliseconds; `0` keeps the toast until dismissed. Pauses on hover/focus. (Imperative API.)",
+            bindings: ["html"],
+        },
+        {
+            name: "actionLabel",
+            type: "string",
+            description: "Label for an optional inline action button.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "closable",
+            type: "boolean",
+            default: "true",
+            description: "Whether to render the close button.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "closeLabel",
+            type: "string",
+            default: "Dismiss",
+            description: "Accessible label for the close button.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "placement",
+            type: "string",
+            default: "bottom-right",
+            description: "Region anchor: bottom-right, top, top-left, bottom-left, top-center, or bottom-center.",
+            bindings: ["html"],
+        },
+        {
+            name: "max",
+            type: "number",
+            default: "5",
+            description: "Maximum visible toasts; the oldest is dismissed when the cap is exceeded. (Region.)",
+            bindings: ["html"],
+        },
+    ],
+    variants: [
+        {
+            name: "soft",
+            description: "An overlay surface card with a tone-colored border and tone-colored icon.",
+            className: "xtyle-toast--soft",
+            tokens: ["--surface-overlay", "--fg-0", "--info"],
+        },
+        {
+            name: "solid",
+            description: "Filled with the tone color, with on-fill ink and icon.",
+            className: "xtyle-toast--solid",
+            tokens: ["--info", "--info-fg"],
+        },
+    ],
+    sizes: [],
+    states: [
+        {
+            name: "enter",
+            description: "Mount transition: the toast fades and slides into place over `--duration-base`.",
+            selector: ".xtyle-toast--enter",
+            tokens: ["--space-3", "--duration-base", "--ease-emphasized"],
+        },
+        {
+            name: "leave",
+            description: "Dismiss transition: the toast fades and slides out before removal.",
+            selector: ".xtyle-toast--leave",
+            tokens: ["--space-3", "--duration-base", "--ease-emphasized"],
+        },
+        {
+            name: "action-hover",
+            description: "Pointer over the action button: overlay paints the hover tint.",
+            selector: ".xtyle-toast__action:hover::after",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on the action or close button: a token ring plus a transparent outline promoted in forced-colors mode.",
+            selector: ".xtyle-toast__action:focus-visible, .xtyle-toast__close:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The toast message (declarative `xtyle-toast` / `Toast`).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "icon",
+            description: "Overrides the built-in severity glyph on a declarative toast; fill it to show your own icon (not available through the imperative `toast(opts)` API).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-sm",
+        "--text-lg",
+        "--weight-medium",
+        "--weight-semibold",
+        "--leading-normal",
+        "--leading-tight",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-md",
+        "--radius-sm",
+        "--space-0",
+        "--space-1",
+        "--space-3",
+        "--space-4",
+        "--space-5",
+        "--space-6",
+        "--duration-base",
+        "--duration-fast",
+        "--ease-standard",
+        "--ease-emphasized",
+        "--elevation-5",
+        "--shadow",
+        "--ring",
+        "--state-hover",
+        "--state-press",
+        "--surface-overlay",
+        "--surface-overlay-border",
+        "--fg-0",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-fg`]),
+    ],
+    composition: [
+        "Mount one `xtyle-toast-region` near the document root and push toasts from anywhere via its `toast(opts)` method.",
+        "Use the `action` slot/`actionLabel` to pair a toast with a single Button-like recovery action (Retry, Undo); keep it to one.",
+        "For persistent, in-flow status that should not auto-dismiss, reach for Alert instead; Toast is for the transient.",
+    ],
+    a11y: [
+        "The region is an `aria-live` container that never receives focus, so toasts never interrupt the user's place.",
+        "Politeness follows `severity`, not color: `danger`/`warn` get `role=\"alert\"` (assertive); other severities and color-only toasts get `role=\"status\"` (polite).",
+        "Each toast is `aria-atomic` so the whole message is announced as a unit.",
+        "Auto-dismiss pauses while the pointer hovers or focus rests inside a toast, so action and close controls stay reachable.",
+        "The tone icon is decorative (`aria-hidden`); the close button carries an `aria-label`.",
+        "Focus on the action and close buttons shows a token ring plus a transparent outline the forced-colors base rule promotes to a real system outline.",
+    ],
+    examples: [
+        {
+            id: "tones-and-region",
+            title: "Tones, variants, and the imperative region",
+            description: "Push toasts from a region, or place a standalone toast declaratively. The four status tones span both variants.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=toast.manifest.js.map

package/dist/manifest/toast.manifest.js.map

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

package/dist/manifest/toc.manifest.d.ts

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

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

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

package/dist/manifest/toc.manifest.js

@@ -0,0 +1,139 @@
+const htmlExample = `<xtyle-toc
+	label="On this page"
+	sticky
+	items='[{"id":"intro","label":"Intro"},{"id":"usage","label":"Usage"},{"id":"api","label":"API"}]'
+></xtyle-toc>`;
+const svelteExample = `<script lang="ts">
+	import { Toc } from "@xtyle/svelte";
+
+	const items = [
+		{ id: "intro", label: "Intro" },
+		{ id: "usage", label: "Usage" },
+		{ id: "api", label: "API" },
+	];
+</script>
+
+<Toc {items} label="On this page" sticky />`;
+const astroExample = `---
+import { Toc } from "@xtyle/astro";
+
+const items = [
+	{ id: "intro", label: "Intro" },
+	{ id: "usage", label: "Usage" },
+	{ id: "api", label: "API" },
+];
+---
+
+<Toc items={items} label="On this page" sticky />`;
+export const tocManifest = {
+    id: "toc",
+    name: "Toc",
+    category: "navigation",
+    summary: "An on-this-page table of contents that highlights the section currently in view.",
+    description: "Toc lists the sections of a page as in-page links and tracks which one the reader is looking at. Give it `items`: each is an `id` matching a section's element id plus a `label`, and it renders a labelled `nav` of anchor links. An `IntersectionObserver` then marks the active link as you scroll, setting `aria-current` and the accent rail. The links work as plain anchor jumps with no script, so the scrollspy is pure progressive enhancement. It reads as a vertical rail beside the content and folds into a wrapped row of chips on narrow screens. Pass `sticky` to keep it in view as the page scrolls.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "toc",
+            description: "The `nav` root carrying the rail border and (optional) sticky positioning.",
+            selector: ".xtyle-toc",
+            tokens: ["--space-3", "--space-2", "--space-5", "--border-thin", "--line", "--radius-md", "--bg-1"],
+        },
+        {
+            name: "label",
+            description: "The small uppercase heading above the list.",
+            selector: ".xtyle-toc__label",
+            tokens: ["--font-sans", "--text-xs", "--weight-semibold", "--fg-2", "--space-2"],
+        },
+        {
+            name: "link",
+            description: "A section link with its accent rail when active and a focus ring.",
+            selector: ".xtyle-toc__link",
+            tokens: ["--font-sans", "--text-sm", "--fg-2", "--fg-0", "--border-thick", "--accent-text", "--accent", "--weight-medium", "--duration-fast", "--ease-standard", "--border-normal", "--ring", "--radius-sm", "--accent-bg"],
+        },
+    ],
+    props: [
+        {
+            name: "items",
+            type: "TocItem[]",
+            description: "The sections, each `{ id, label }`; `id` matches the target element's id, `label` is the link text. On the custom element, a JSON string.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "label",
+            type: "string",
+            default: "On this page",
+            description: "The heading above the list.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "sticky",
+            type: "boolean",
+            default: "false",
+            description: "Pins the nav with `position: sticky` so it stays in view while the page scrolls.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [
+        {
+            name: "active",
+            description: "The link for the section currently in view: accent ink and rail, set alongside `aria-current`.",
+            selector: ".xtyle-toc__link.is-active",
+            tokens: ["--accent-text", "--accent", "--weight-medium", "--accent-bg"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on a link: a token ring plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-toc__link:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring", "--radius-sm"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-5",
+        "--border-thin",
+        "--border-thick",
+        "--border-normal",
+        "--line",
+        "--font-sans",
+        "--text-xs",
+        "--text-sm",
+        "--weight-semibold",
+        "--weight-medium",
+        "--fg-0",
+        "--fg-2",
+        "--accent",
+        "--accent-text",
+        "--accent-bg",
+        "--ring",
+        "--bg-1",
+        "--radius-sm",
+        "--radius-md",
+        "--duration-fast",
+        "--ease-standard",
+    ],
+    composition: [
+        "Place it in a sidebar column beside the content; pass `sticky` so it follows the scroll.",
+        "Point each `item.id` at a section's element id so the in-page anchor and the scrollspy target line up.",
+        "Pair with `Heading` sections that carry matching ids; the Toc is the map, the headings are the territory.",
+    ],
+    a11y: [
+        "The nav names itself (`aria-label`) and the active link carries `aria-current`, so assistive tech announces which section is in view.",
+        "Every entry is a real in-page anchor link, so the table of contents works fully without JavaScript; the scrollspy only decorates it.",
+        "Links show keyboard focus with a `focus-visible` ring plus a transparent outline the forced-colors base rule promotes to a real system outline.",
+    ],
+    examples: [
+        {
+            id: "a-scrollspy-table-of-contents",
+            title: "A scrollspy table of contents",
+            description: "A sticky rail of section links that tracks the section in view; on narrow screens it folds into a wrapped row.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=toc.manifest.js.map

package/dist/manifest/toc.manifest.js.map

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

package/dist/manifest/toolbar.manifest.d.ts

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

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

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