@xtyle/core 0.5.0

package/dist/manifest/swatch.manifest.js

@@ -0,0 +1,215 @@
+const htmlExample = `<xtyle-swatch color="#ff0099" label="Hot pink" value="#ff0099"></xtyle-swatch>
+<xtyle-swatch color="#22c55e" label="Success"></xtyle-swatch>
+
+<xtyle-swatch color="#0ea5e9" size="sm"></xtyle-swatch>
+<xtyle-swatch color="#0ea5e9" size="lg" label="Sky" value="#0ea5e9"></xtyle-swatch>`;
+const svelteExample = `<script lang="ts">
+	import { Swatch } from "@xtyle/svelte";
+</script>
+
+<Swatch color="#ff0099" label="Hot pink" value="#ff0099" />
+<Swatch color="#22c55e" label="Success" />`;
+const astroExample = `---
+import Swatch from "@xtyle/astro/Swatch.astro";
+---
+
+<Swatch color="#ff0099" label="Hot pink" value="#ff0099" />
+<Swatch color="#22c55e" label="Success" />`;
+const htmlInteractiveExample = `<xtyle-swatch color="#0ea5e9" label="Sky" interactive selected></xtyle-swatch>
+<xtyle-swatch color="#22c55e" label="Emerald" interactive></xtyle-swatch>
+
+<xtyle-swatch color="#ff0099" label="Hot pink" details></xtyle-swatch>
+
+<script>
+	document.querySelector("xtyle-swatch[interactive]")
+		.addEventListener("select", (e) => console.log(e.detail));
+</script>`;
+const svelteInteractiveExample = `<script lang="ts">
+	import { Swatch } from "@xtyle/svelte";
+	let picked = $state("#0ea5e9");
+</script>
+
+<Swatch color="#0ea5e9" label="Sky" interactive selected={picked === "#0ea5e9"}
+	onselect={(e) => (picked = e.detail.color)} />
+<Swatch color="#ff0099" label="Hot pink" details />`;
+const astroInteractiveExample = `---
+import Swatch from "@xtyle/astro/Swatch.astro";
+---
+
+<Swatch color="#0ea5e9" label="Sky" interactive selected />
+<Swatch color="#ff0099" label="Hot pink" details />`;
+export const swatchManifest = {
+    id: "swatch",
+    name: "Swatch",
+    category: "control",
+    summary: "A color chip pairing a colored dot with an optional label and value.",
+    description: "Swatch is the smallest way to show a color and say what it is. A filled dot beside an optional name and an optional value in mono; the shape every `label + value + dot` row and palette rail is built from. The color it shows is *data*, not theme: it comes in on the `color` prop and is painted straight onto the dot as an inline fill, so a swatch can carry any color a user hands it, including one nowhere in the current theme. Its own chrome is the derived part: the dot's hairline border, the label and value type, the corner radius all read from the same tokens the rest of the UI does, so the chip frames a foreign color in the theme's own voice. A thin border keeps even a near-background color legible against the surface. The `size` prop steps the whole chip with the surrounding type from `sm` to `lg`.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "swatch",
+            description: "The chip root: a row laying out the dot, label, and value.",
+            selector: ".xtyle-swatch",
+        },
+        {
+            name: "dot",
+            description: "The color chip itself, filled with the inline `color` data and ringed by a hairline border so a near-background color still reads.",
+            selector: ".xtyle-swatch__dot",
+            tokens: ["--line-2", "--border-thin", "--radius-sm"],
+        },
+        {
+            name: "label",
+            description: "The optional color name, set in body text.",
+            selector: ".xtyle-swatch__label",
+            tokens: ["--fg-1", "--text-sm", "--leading-tight"],
+        },
+        {
+            name: "value",
+            description: "The optional raw value (e.g. a hex string), set in mono and dimmed.",
+            selector: ".xtyle-swatch__value",
+            tokens: ["--fg-2", "--font-mono", "--text-xs", "--leading-tight"],
+        },
+        {
+            name: "details",
+            description: "The optional hover/focus popover listing the color across models; an overlay card whose chrome is derived even though the values inside are the swatch's own color, parsed and reformatted.",
+            selector: ".xtyle-swatch__details",
+            tokens: ["--surface-overlay", "--surface-overlay-border", "--radius-md", "--elevation-2", "--space-1", "--space-2", "--space-8"],
+        },
+        {
+            name: "detail-model",
+            description: "A color-model name (`hex`, `rgb`, …) in the details popover, set in body type.",
+            selector: ".xtyle-swatch__detail-model",
+            tokens: ["--fg-2", "--font-sans", "--text-xs", "--leading-tight"],
+        },
+        {
+            name: "detail-value",
+            description: "A formatted color value in the details popover, set in mono.",
+            selector: ".xtyle-swatch__detail-value",
+            tokens: ["--fg-1", "--font-mono", "--text-xs", "--leading-tight"],
+        },
+    ],
+    props: [
+        {
+            name: "color",
+            type: "string",
+            description: "The color the dot displays; arbitrary user data, painted as an inline fill. Any CSS color works, but it is not a theme token.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "An optional name for the color, shown beside the dot.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "value",
+            type: "string",
+            description: "An optional raw value (e.g. a hex string) shown after the label in mono.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "SwatchSize",
+            default: "md",
+            description: "The chip size, stepping with the type scale: `sm`, `md`, or `lg`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "interactive",
+            type: "boolean",
+            default: "false",
+            description: "For pickable palettes: render the chip as a `<button>` that emits a `select` event (carrying `{ color, label, value }`) on click, Enter, or Space. Off by default, so a swatch stays a passive display chip.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "selected",
+            type: "boolean",
+            default: "false",
+            description: "The chosen state for an interactive chip; rings the dot in the accent and sets `aria-pressed`. Controlled: the consumer owns it and flips it in response to `select`, so a single-choice rail stays authoritative.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "details",
+            type: "boolean",
+            default: "false",
+            description: "Show a popover on hover and focus listing the color across `hex` / `rgb` / `hsl` / `oklch`, parsed and reformatted by the engine; a built-in way to read a color without leaving the chip.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "A compact chip for dense palette rails.", className: "xtyle-swatch--sm" },
+        { name: "md", description: "The default chip, sized with body text.", className: "xtyle-swatch", isDefault: true },
+        { name: "lg", description: "A prominent chip for a featured color.", className: "xtyle-swatch--lg" },
+    ],
+    states: [
+        {
+            name: "selected",
+            description: "An interactive chip in its chosen state: the dot ringed in the accent, `aria-pressed` set.",
+            selector: ".xtyle-swatch--selected .xtyle-swatch__dot",
+            tokens: ["--border-thick", "--accent"],
+        },
+        {
+            name: "focus-visible",
+            description: "An interactive chip focused by keyboard; a ring picks it out for the next selection.",
+            selector: ".xtyle-swatch--interactive:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--border-thin",
+        "--line-2",
+        "--radius-sm",
+        "--radius-md",
+        "--fg-1",
+        "--fg-2",
+        "--text-sm",
+        "--text-xs",
+        "--text-lg",
+        "--leading-tight",
+        "--font-mono",
+        "--font-sans",
+        "--border-normal",
+        "--border-thick",
+        "--ring",
+        "--bg-1",
+        "--accent",
+        "--space-1",
+        "--space-2",
+        "--space-8",
+        "--surface-overlay",
+        "--surface-overlay-border",
+        "--elevation-2",
+        "--duration-fast",
+        "--ease-standard",
+    ],
+    composition: [
+        "Stack named swatches in a `Stack` for a legend: each a `label + value + dot` row.",
+        "Set bare swatches (color only) in a tight `Cluster` for a palette rail.",
+        "Pair a swatch with a `Badge` or `Text` in a `Cluster` to annotate a color in running UI.",
+    ],
+    a11y: [
+        "The dot is marked `aria-hidden`. Color alone carries no meaning to assistive tech, so the `label` and `value` text carry the identity.",
+        "Always provide a `label` (and ideally a `value`) when the color is meaningful, so the chip is announced by name, not by an invisible swatch.",
+        "An `interactive` chip is a real `<button>`, so Enter and Space activate it and Tab reaches it for free; when it carries no visible label it borrows its `value` or `color` as an `aria-label`.",
+        "`selected` reflects to `aria-pressed`, so a picked chip announces its chosen state to assistive tech, not just its accent ring. Each chip is an independent toggle; if a rail is single-choice, the consumer enforces that by clearing the others on `select`.",
+        "A `details` chip is keyboard-reachable even when it isn't `interactive`: it takes `tabindex` and points `aria-describedby` at the popover, so the color readout is available on focus, not hover alone.",
+    ],
+    examples: [
+        {
+            id: "named-and-sizes",
+            title: "Named swatches and sizes",
+            description: "Labeled chips with values, plus the bare dot across the three sizes.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "interactive-and-details",
+            title: "Pickable chips and color details",
+            description: "An `interactive` chip emits `select` and shows a `selected` ring; a `details` chip reveals the color across models on hover and focus.",
+            source: { html: htmlInteractiveExample, svelte: svelteInteractiveExample, astro: astroInteractiveExample },
+        },
+    ],
+};
+//# sourceMappingURL=swatch.manifest.js.map

package/dist/manifest/swatch.manifest.js.map

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

package/dist/manifest/switch.manifest.d.ts

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

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

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

package/dist/manifest/switch.manifest.js

@@ -0,0 +1,323 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-switch label="Wi-Fi" checked></xtyle-switch>
+
+<xtyle-switch label="Notifications" on-label="On" off-label="Off"></xtyle-switch>
+
+<xtyle-switch size="sm" label="Compact mode"></xtyle-switch>
+
+<xtyle-switch label="Alerts" tone="danger" checked></xtyle-switch>
+
+<xtyle-switch label="Square" shape="square" checked></xtyle-switch>
+
+<xtyle-switch label="Vertical" orientation="vertical" checked></xtyle-switch>
+
+<xtyle-switch label="Reversed" reverse checked></xtyle-switch>
+
+<xtyle-switch label="Label after" label-side="end" checked></xtyle-switch>
+
+<xtyle-switch label="Sync" name="sync" value="enabled" checked></xtyle-switch>
+
+<xtyle-switch label="Locked" disabled checked></xtyle-switch>`;
+const svelteExample = `<script lang="ts">
+	import { Switch } from "@xtyle/svelte";
+
+	let wifi = $state(true);
+	let notify = $state(false);
+</script>
+
+<Switch label="Wi-Fi" bind:checked={wifi} />
+
+<Switch label="Notifications" onLabel="On" offLabel="Off" bind:checked={notify} />
+
+<Switch size="sm" label="Compact mode" />
+
+<Switch label="Alerts" tone="danger" checked />
+
+<Switch label="Square" shape="square" checked />
+
+<Switch label="Vertical" orientation="vertical" checked />
+
+<Switch label="Reversed" reverse checked />
+
+<Switch label="Label after" labelSide="end" checked />
+
+<Switch label="Sync" name="sync" value="enabled" bind:checked={wifi} />
+
+<Switch label="Locked" disabled checked />`;
+const astroExample = `---
+import { Switch } from "@xtyle/astro";
+---
+
+<Switch label="Wi-Fi" checked />
+
+<Switch label="Notifications" onLabel="On" offLabel="Off" />
+
+<Switch size="sm" label="Compact mode" />
+
+<Switch label="Alerts" tone="danger" checked />
+
+<Switch label="Square" shape="square" checked />
+
+<Switch label="Vertical" orientation="vertical" checked />
+
+<Switch label="Reversed" reverse checked />
+
+<Switch label="Label after" labelSide="end" checked />
+
+<Switch label="Sync" name="sync" value="enabled" checked />
+
+<Switch label="Locked" disabled checked />`;
+export const switchManifest = {
+    id: "switch",
+    name: "Switch",
+    category: "control",
+    summary: "An on/off toggle that applies immediately, with an accessible name and optional state labels.",
+    description: "Switch is a `role=\"switch\"` toggle for a setting that takes effect immediately, distinct from a checkbox that stages a value until a form submit. It renders a native `<button>` track with a sliding thumb, so pointer, Space, and Enter all flip it and the state lives in `aria-checked`. An optional leading label and optional `on-label`/`off-label` state text make the toggle self-describing, and it is form-associated: give it a `name` (and optional `value`) and it contributes to form data only while on. Two sizes: the default `md` and a compact `sm`.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "switch",
+            description: "The row wrapper carrying the size and disabled classes and laying out label, track, and state text.",
+            selector: ".xtyle-switch",
+            tokens: ["--font-sans", "--text-body", "--leading-tight", "--fg-0", "--space-2"],
+        },
+        {
+            name: "track",
+            description: "The interactive `role=\"switch\"` button: the pill the thumb slides within.",
+            selector: ".xtyle-switch__track",
+            tokens: [
+                "--space-7",
+                "--space-5",
+                "--space-2",
+                "--border-thin",
+                "--line-2",
+                "--radius-full",
+                "--neutral-bg",
+                "--duration-base",
+                "--ease-emphasized",
+                "--duration-fast",
+                "--ease-standard",
+            ],
+        },
+        {
+            name: "thumb",
+            description: "The circular knob: a darkened cast of the track's tone, kept visible on and off.",
+            selector: ".xtyle-switch__thumb",
+            tokens: ["--space-1", "--radius-full", "--elevation-1"],
+        },
+        {
+            name: "label",
+            description: "The visible leading label that names the toggle and is referenced as its accessible name.",
+            selector: ".xtyle-switch__label",
+        },
+        {
+            name: "state",
+            description: "Optional trailing on/off state text; becomes the accessible name when no other label is given.",
+            selector: ".xtyle-switch__state",
+            tokens: ["--fg-2", "--text-sm"],
+        },
+        {
+            name: "overlay",
+            description: "The pseudo-element behind the track that paints hover and active state tints.",
+            selector: ".xtyle-switch__track::after",
+            tokens: ["--state-hover", "--state-press"],
+        },
+    ],
+    props: [
+        {
+            name: "checked",
+            type: "boolean",
+            default: "false",
+            description: "The on/off state. Two-way bindable in Svelte; reflected to `aria-checked` and the element's `.checked`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "disabled",
+            type: "boolean",
+            default: "false",
+            description: "Disables interaction; mutes the track, suppresses the overlay, and sets `aria-disabled`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Control size. Only `sm` differs from the default.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "accent",
+            description: "Color of the on-state track and thumb ink. Any of the semantic roles, accent variants, or named hues.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "shape",
+            type: "\"pill\" | \"square\"",
+            default: "pill",
+            description: "Track and thumb corner shape: the default rounded pill, or a squared track for a chunkier control.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["pill", "square"],
+        },
+        {
+            name: "orientation",
+            type: "\"horizontal\" | \"vertical\"",
+            default: "horizontal",
+            description: "Track axis. Horizontal slides the thumb left-to-right (on at the right); vertical stands the track up and follows a wall switch: down is off, up is on.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["horizontal", "vertical"],
+        },
+        {
+            name: "reverse",
+            type: "boolean",
+            default: "false",
+            description: "Flip the on/off direction: horizontal puts on at the left, vertical puts on at the bottom. The label is unaffected.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "labelSide",
+            type: "\"start\" | \"end\"",
+            default: "start",
+            description: "Which side the label sits on relative to the track. `end` puts the control first and the label after it.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["start", "end"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "Visible leading label, also wired as the accessible name via `aria-labelledby`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "labelledby",
+            type: "string",
+            description: "ID of an external element that names the toggle. Takes precedence over `label`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "onLabel",
+            type: "string",
+            description: "State text shown (and announced as the name, absent `label`) when on.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "offLabel",
+            type: "string",
+            description: "State text shown (and announced as the name, absent `label`) when off.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "name",
+            type: "string",
+            description: "Form field name; the toggle contributes `value` to form data only while on.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "value",
+            type: "string",
+            default: "on",
+            description: "The value submitted with the form when the toggle is on.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        { name: "square", description: "Squared track and thumb corners.", className: "xtyle-switch--square" },
+        { name: "vertical", description: "Track stood on its end; down is off, up is on.", className: "xtyle-switch--vertical" },
+        { name: "reverse", description: "On/off direction flipped (on at the left, or the bottom when vertical).", className: "xtyle-switch--reverse" },
+        { name: "label-end", description: "Label after the control instead of before it.", className: "xtyle-switch--label-end" },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-switch--sm" },
+        { name: "md", description: "Default.", className: "xtyle-switch", isDefault: true },
+    ],
+    states: [
+        {
+            name: "on",
+            description: "Toggle is on: the track fills with the chosen tone (accent by default) and the thumb slides to the end.",
+            selector: '.xtyle-switch__track[aria-checked="true"]',
+            tokens: ["--accent", "--accent-fg"],
+        },
+        {
+            name: "hover",
+            description: "Pointer over the track: overlay paints the hover tint.",
+            selector: ".xtyle-switch__track:hover::after",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "active",
+            description: "Track pressed: overlay paints the press tint.",
+            selector: ".xtyle-switch__track:active::after",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-switch__track:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+        {
+            name: "disabled",
+            description: "Non-interactive: muted track and thumb, overlay suppressed.",
+            selector: '.xtyle-switch__track:disabled, .xtyle-switch__track[aria-disabled="true"]',
+            tokens: ["--state-disabled", "--fg-disabled"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-sm",
+        "--leading-tight",
+        "--fg-0",
+        "--fg-2",
+        "--fg-disabled",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-full",
+        "--radius-sm",
+        "--space-1",
+        "--space-2",
+        "--space-4",
+        "--space-5",
+        "--space-6",
+        "--space-7",
+        "--line-2",
+        "--neutral-bg",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-fg`]),
+        "--elevation-1",
+        "--duration-base",
+        "--duration-fast",
+        "--ease-emphasized",
+        "--ease-standard",
+        "--ring",
+        "--state-hover",
+        "--state-press",
+        "--state-disabled",
+    ],
+    composition: [
+        "Pair with Field or a form to capture the toggle; give it a `name` so it contributes to submitted data.",
+        "Use `label` for a persistent name, or `on-label`/`off-label` for a control whose name is its current state.",
+        "For a staged value that only applies on submit, reach for a checkbox instead. A switch applies immediately.",
+    ],
+    a11y: [
+        "Renders a native `<button>` with `role=\"switch\"`, so click, Space, and Enter all toggle it; Space's default scroll is prevented.",
+        "State is carried in `aria-checked` and mirrored on the element's reflected `.checked`, never by color alone.",
+        "Requires an accessible name: `labelledby` wins, then `label`, then the on/off state text; the binding warns at runtime when none is present.",
+        "The thumb and state-only labels are wired so the toggle is always announced with a name, even when only `on-label`/`off-label` are given.",
+        "Focus is shown with a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.",
+        "`disabled` blocks interaction and sets `aria-disabled`; the track is muted and the overlay suppressed.",
+    ],
+    examples: [
+        {
+            id: "labels-tones-shapes-and-form",
+            title: "Labels, tones, shapes, and form association",
+            description: "A named toggle, on/off state text, the compact size, a toned switch, the square / vertical / reversed variants, a form-bound switch, and a disabled one.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=switch.manifest.js.map

package/dist/manifest/switch.manifest.js.map

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

package/dist/manifest/table.manifest.d.ts

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

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

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