@xtyle/core 0.5.0

package/dist/manifest/section.manifest.js

@@ -0,0 +1,173 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-section tone="accent" bordered>
+	<h2>A page band</h2>
+	<p>A full-width strip with its own surface and hairline rules.</p>
+</xtyle-section>
+
+<xtyle-section variant="stage" label="live · @xtyle/astro">
+	<xtyle-button>A framed demo ground</xtyle-button>
+</xtyle-section>`;
+const svelteExample = `<script lang="ts">
+	import { Section, Button } from "@xtyle/svelte";
+</script>
+
+<Section tone="accent" bordered>
+	<h2>A page band</h2>
+	<p>A full-width strip with its own surface and hairline rules.</p>
+</Section>
+
+<Section variant="stage" label="live · @xtyle/svelte">
+	<Button>A framed demo ground</Button>
+</Section>`;
+const astroExample = `---
+import { Section, Button } from "@xtyle/astro";
+---
+
+<Section tone="accent" bordered>
+	<h2>A page band</h2>
+	<p>A full-width strip with its own surface and hairline rules.</p>
+</Section>
+
+<Section variant="stage" label="live · @xtyle/astro">
+	<Button>A framed demo ground</Button>
+</Section>`;
+export const sectionManifest = {
+    id: "section",
+    name: "Section",
+    category: "layout",
+    summary: "A page band or a framed stage: the full-width strips and demo grounds a page is built from.",
+    description: "Section is the structural strip between the page primitives and the page itself: a padded surface band you lay content across, or a framed `stage` for showing something off. As a **band** it carries a `tone` (transparent (`plain`), a neutral raise (`quiet`), or a tint from the full tone roster: any semantic role, accent variant, or named hue) and optional `bordered` hairlines top and bottom, with a `padding` rhythm that eases off on narrow screens. As a **stage** (`variant=\"stage\"`) it becomes an elevated, accent-tinted frame with an optional corner `label`: the demo ground this very site sits its live examples in. It owns surface and spacing only; arrange what goes inside with `Stack`, `Cluster`, or `Grid`.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "section",
+            description: "The band or stage root carrying the variant, tone, border, and padding classes.",
+            selector: ".xtyle-section",
+            tokens: ["--space-8", "--space-6", "--space-5", "--space-4", "--bg-1", "--accent-bg", "--border-thin", "--line", "--accent"],
+        },
+        {
+            name: "stage",
+            description: "The framed-demo treatment: an accent-tinted, elevated, rounded ground.",
+            selector: ".xtyle-section--stage",
+            tokens: ["--accent-bg", "--bg-2", "--border-thin", "--accent", "--radius-lg", "--elevation-3", "--ring-bg", "--space-6"],
+        },
+        {
+            name: "label",
+            description: "The optional monospace corner tag on a stage, pinned top-right.",
+            selector: ".xtyle-section__label",
+            tokens: ["--space-2", "--space-3", "--font-mono", "--text-xs", "--accent-text"],
+        },
+    ],
+    props: [
+        {
+            name: "as",
+            type: "SectionTag",
+            default: "section",
+            description: "The element to render. A landmark band is usually `section`; a stage is often a `div`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["section", "div", "header", "footer"],
+        },
+        {
+            name: "variant",
+            type: "SectionVariant",
+            default: "band",
+            description: "A full-width surface `band`, or a framed, elevated `stage`.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["band", "stage"],
+        },
+        {
+            name: "tone",
+            type: "SectionTone",
+            default: "plain",
+            description: "The band surface: transparent (`plain`), a neutral raise (`quiet`), or a tint from the full tone roster, any semantic role, accent variant, or named hue (`accent`, `success`, `pink`, …). Ignored by the stage.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["plain", "quiet", ...FULL_TONES],
+        },
+        {
+            name: "bordered",
+            type: "boolean",
+            default: "false",
+            description: "Adds hairline rules along the top and bottom of a band, in the tone's edge color.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "padding",
+            type: "SectionPadding",
+            default: "lg",
+            description: "Vertical rhythm of the band, eased off under 40rem. (`lg` is the base; the stage sets its own.)",
+            bindings: ["html", "svelte", "astro"],
+            options: ["none", "sm", "md", "lg"],
+        },
+        {
+            name: "label",
+            type: "string",
+            description: "A corner tag for a stage (e.g. a `live · @xtyle/astro` provenance line).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "band",
+            description: "A full-width surface strip, toned and optionally ruled; the default variant.",
+            className: "xtyle-section",
+            tokens: ["--bg-1", "--accent-bg", "--line", "--accent", "--border-thin"],
+        },
+        {
+            name: "stage",
+            description: "A framed, elevated, accent-tinted demo ground with an optional corner label.",
+            className: "xtyle-section--stage",
+            tokens: ["--accent-bg", "--bg-2", "--radius-lg", "--elevation-3", "--ring-bg", "--border-thin", "--accent"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Tighter band padding.", className: "xtyle-section--sm" },
+        { name: "md", description: "Medium band padding.", className: "xtyle-section--md" },
+        { name: "lg", description: "Generous band padding (default).", className: "xtyle-section", isDefault: true },
+    ],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The band or stage contents.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-bg`]),
+        "--accent-text",
+        "--bg-1",
+        "--bg-2",
+        "--border-thin",
+        "--elevation-3",
+        "--font-mono",
+        "--line",
+        "--radius-lg",
+        "--ring-bg",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-5",
+        "--space-6",
+        "--space-8",
+        "--text-xs",
+    ],
+    composition: [
+        "Stack page bands down a route (a `plain` hero, a `quiet` stats band, an `accent` call-to-action) for rhythm without bespoke section CSS.",
+        "Use `variant=\"stage\"` to frame a live demo or a hero preview, and pass `label` for a provenance tag.",
+        "Section owns surface and padding only; compose the contents with `Stack`, `Cluster`, or `Grid`.",
+    ],
+    a11y: [
+        "Choose `as` for the landmark you mean: `section` (optionally with an `aria-label`), `header`, or `footer`. A plain `div` stage carries no landmark role, which is usually right for a demo frame.",
+        "Surface tones are decorative; the band's meaning comes from its content and heading, never the background color.",
+        "The stage corner `label` is plain text in the flow; keep it short, since it reads before the framed content.",
+    ],
+    examples: [
+        {
+            id: "bands-and-stages",
+            title: "Bands and stages",
+            description: "The three band tones with and without rules, the padding rhythm, and the framed stage with a corner label.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=section.manifest.js.map

package/dist/manifest/section.manifest.js.map

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

package/dist/manifest/segmented.manifest.d.ts

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

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

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

package/dist/manifest/segmented.manifest.js

@@ -0,0 +1,261 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-segmented label="View" options="Day,Week,Month" value="Week"></xtyle-segmented>
+
+<xtyle-segmented label="Align" options="Left:start,Center:center,Right:end" value="center"></xtyle-segmented>
+
+<xtyle-segmented size="sm" label="Theme" options="Light,Dark,Auto" value="Auto"></xtyle-segmented>
+
+<xtyle-segmented label="Locked" options="One,Two,Three" value="Two" disabled></xtyle-segmented>`;
+const htmlStructuredExample = `<xtyle-segmented id="fmt" label="Export"></xtyle-segmented>
+<script>
+	document.getElementById("fmt").options = [
+		{ value: "md", label: "Markdown" },
+		{ value: "html", label: "HTML" },
+		{ value: "epub", label: "EPUB" },
+	];
+</script>`;
+const svelteStructuredExample = `<script lang="ts">
+	import { Segmented } from "@xtyle/svelte";
+
+	const formats = [
+		{ value: "md", label: "Markdown" },
+		{ value: "html", label: "HTML" },
+		{ value: "epub", label: "EPUB" },
+	];
+	let format = $state("md");
+</script>
+
+<Segmented label="Export" options={formats} bind:value={format} />`;
+const perOptionExample = `<xtyle-segmented id="run-view" label="Run output"></xtyle-segmented>
+<script>
+	document.getElementById("run-view").options = [
+		{ value: "report", label: "Report", badge: "128" },
+		{ value: "text", label: "Text", disabled: true },
+		{ value: "log", label: "Log", disabled: true },
+	];
+</script>`;
+const astroStructuredExample = `---
+import { Segmented } from "@xtyle/astro";
+const formats = [
+	{ value: "md", label: "Markdown" },
+	{ value: "html", label: "HTML" },
+	{ value: "epub", label: "EPUB" },
+];
+---
+
+<Segmented label="Export" options={formats} value="md" />`;
+const htmlSlottedExample = `<xtyle-segmented label="Severity" value="info">
+	<span slot="segment" value="info" label="Info"><xtyle-icon name="info"></xtyle-icon></span>
+	<span slot="segment" value="warn" label="Warnings"><xtyle-icon name="warning"></xtyle-icon></span>
+	<span slot="segment" value="error" label="Errors"><xtyle-icon name="error"></xtyle-icon></span>
+</xtyle-segmented>`;
+const svelteSlottedExample = `<script lang="ts">
+	import { Segmented, Segment, Icon } from "@xtyle/svelte";
+
+	let severity = $state("info");
+</script>
+
+<Segmented label="Severity" bind:value={severity}>
+	<Segment value="info" label="Info"><Icon name="info" /></Segment>
+	<Segment value="warn" label="Warnings"><Icon name="warning" /></Segment>
+	<Segment value="error" label="Errors"><Icon name="error" /></Segment>
+</Segmented>`;
+const astroSlottedExample = `---
+import { Segmented, Segment, Icon } from "@xtyle/astro";
+---
+
+<Segmented label="Severity" value="info">
+	<Segment value="info" label="Info"><Icon name="info" /></Segment>
+	<Segment value="warn" label="Warnings"><Icon name="warning" /></Segment>
+	<Segment value="error" label="Errors"><Icon name="error" /></Segment>
+</Segmented>`;
+const svelteExample = `<script lang="ts">
+	import { Segmented } from "@xtyle/svelte";
+
+	let view = $state("Week");
+</script>
+
+<Segmented label="View" options="Day,Week,Month" bind:value={view} />
+
+<Segmented label="Align" options="Left:start,Center:center,Right:end" value="center" />
+
+<Segmented size="sm" label="Theme" options="Light,Dark,Auto" value="Auto" />
+
+<Segmented label="Locked" options="One,Two,Three" value="Two" disabled />`;
+const astroExample = `---
+import { Segmented } from "@xtyle/astro";
+---
+
+<Segmented label="View" options="Day,Week,Month" value="Week" />
+
+<Segmented label="Align" options="Left:start,Center:center,Right:end" value="center" />
+
+<Segmented size="sm" label="Theme" options="Light,Dark,Auto" value="Auto" />
+
+<Segmented label="Locked" options="One,Two,Three" value="Two" disabled />`;
+export const segmentedManifest = {
+    id: "segmented",
+    name: "Segmented",
+    category: "control",
+    summary: "A single-select toggle bar: pick one of a few options from a connected button group.",
+    description: "Segmented picks one option from a small, fixed set rendered as a connected button bar. It's the compact alternative to a radio group when the choices are few and worth showing at once. It is a `role=\"radiogroup\"` of `role=\"radio\"` buttons with roving tabindex: the selected segment is the tab stop, arrow keys move and select with wraparound, and Home/End jump to the ends. Options are declared as a comma-separated `options` string (bare labels, or `label:value` pairs), or as a structured `{ value, label }[]` when a label differs from its value or carries a comma or colon. For rich segments, drop in `<Segment value=\"…\" label=\"…\">` children holding an icon or other markup instead of a text label; they win over `options` when both are present. It's form-associated; give it a `name` and the chosen value submits. Three sizes: `sm`, `md`, `lg`.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "field",
+            description: "The wrapper stacking the optional label over the toggle bar.",
+            selector: ".xtyle-segmented-field",
+            tokens: ["--font-sans", "--space-2"],
+        },
+        {
+            name: "segmented",
+            description: "The `role=\"radiogroup\"` track holding the options.",
+            selector: ".xtyle-segmented",
+            tokens: ["--space-1", "--bg-1", "--border-thin", "--line-2", "--radius-md"],
+        },
+        {
+            name: "option",
+            description: "Each `role=\"radio\"` segment; the selected one fills with the accent.",
+            selector: ".xtyle-segmented__option",
+            tokens: ["--fg-1", "--fg-0", "--text-sm", "--text-body", "--weight-medium", "--space-1", "--space-2", "--space-3", "--space-4", "--radius-sm", "--accent", "--accent-fg", "--state-hover", "--state-press"],
+        },
+        {
+            name: "label",
+            description: "The optional visible label, referenced as the group's accessible name.",
+            selector: ".xtyle-segmented__label",
+            tokens: ["--fg-1", "--text-sm"],
+        },
+        {
+            name: "badge",
+            description: "A per-option trailing count/status inside its segment; reach it at `::part(badge)`.",
+            selector: ".xtyle-segmented__badge",
+            tokens: ["--space-1"],
+        },
+    ],
+    props: [
+        { name: "value", type: "string", description: "The selected option's value. Defaults to the first option. Reflected and form-submitted.", bindings: ["html", "svelte", "astro"] },
+        {
+            name: "options",
+            type: "string | { value: string; label?: string; disabled?: boolean; badge?: string }[]",
+            description: "The options. The comma-string shorthand takes bare labels (`Day,Week`, the label is the value) or `label:value` pairs (`Left:start`). For labels that differ from their value or carry a comma or colon, pass a `{ value, label }[]` instead (the JS property in html / svelte, a JSON array attribute in Astro); a bare `string[]` works too. The structured form also takes a per-option `disabled` (a choice the current data can't offer, skipped by pointer and keyboard) and a `badge` (trailing text like a count) per segment.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        { name: "disabled", type: "boolean", default: "false", description: "Disables selection and mutes the bar.", bindings: ["html", "svelte", "astro"] },
+        { name: "size", type: "Size", default: "md", description: "Control size: `sm`, `md`, or `lg`.", bindings: ["html", "svelte", "astro"], options: ["sm", "md", "lg"] },
+        { name: "tone", type: "FullTone", default: "accent", description: "Color of the selected segment's fill. Any semantic role, accent variant, or named hue.", bindings: ["html", "svelte", "astro"], options: [...FULL_TONES] },
+        { name: "label", type: "string", description: "Visible label, also the accessible name via `aria-labelledby`.", bindings: ["html", "svelte", "astro"] },
+        { name: "labelledby", type: "string", description: "ID of an external element that names the group. Takes precedence over `label`.", bindings: ["html", "svelte", "astro"] },
+        { name: "aria-label", type: "string", description: "Names the group with no visible label, for a compact icon bar (a toolbar) where a heading would be noise. `labelledby` and a visible `label` both win over it.", bindings: ["html", "svelte", "astro"] },
+        { name: "name", type: "string", description: "Form field name; the selected value submits with the form.", bindings: ["html", "svelte", "astro"] },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-segmented--sm" },
+        { name: "md", description: "Default.", className: "xtyle-segmented", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-segmented--lg" },
+    ],
+    states: [
+        {
+            name: "selected",
+            description: "The chosen segment: filled with the accent and its readable foreground. When the theme's `--selection-cue` resolves to `marker` (a high-contrast or redundant-cues algorithm), the selected segment gains a non-color check glyph so selection never rests on color alone.",
+            selector: '.xtyle-segmented__option[aria-checked="true"]',
+            tokens: ["--accent", "--accent-fg", "--selection-cue"],
+        },
+        {
+            name: "hover",
+            description: "Pointer over an unselected segment; an overlay paints the hover tint.",
+            selector: ".xtyle-segmented__option:hover::after",
+            tokens: ["--state-hover", "--fg-0"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on a segment: a token ring plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-segmented__option:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+        {
+            name: "disabled",
+            description: "The whole group disabled: muted, non-interactive.",
+            selector: ".xtyle-segmented--disabled",
+            tokens: ["--fg-disabled", "--state-disabled"],
+        },
+    ],
+    slots: [
+        {
+            name: "segment",
+            description: "Rich-content segments: one `[slot=\"segment\"]` child (a `<Segment>`) per option, each carrying `value`, an accessible `label`, and markup like an `<Icon>`. The element derives selection, roving tabindex, and the form value from them exactly as it would from `options`, and projects each child's live content into its radio. Children win over `options` when both are given.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-sm",
+        "--text-body",
+        "--weight-medium",
+        "--fg-0",
+        "--fg-1",
+        "--fg-disabled",
+        "--bg-1",
+        "--line-2",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-md",
+        "--radius-sm",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-fg`]),
+        "--ring",
+        "--selection-cue",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--state-hover",
+        "--state-press",
+        "--state-disabled",
+        "--duration-fast",
+        "--ease-standard",
+    ],
+    composition: [
+        "Reach for it over a radio group when there are two to five options worth showing at once: view switches, alignment, light/dark/auto.",
+        "For many options, a long list, or free text, use Select instead.",
+        "Pair with a form and a `name` so the chosen value submits like any field.",
+        "For icon-only or icon-plus-text segments, use `<Segment>` children instead of `options`, and give each an accessible `label`.",
+    ],
+    a11y: [
+        "The bar is `role=\"radiogroup\"` and each segment `role=\"radio\"` with `aria-checked`, never conveying selection by color alone.",
+        "Roving tabindex: the selected segment is the single tab stop; arrow keys move and select with wraparound, Home/End jump to the ends, click selects.",
+        "Requires an accessible name: `labelledby` wins, then a visible `label`, then a bare `aria-label` for an unlabeled icon bar; the binding warns at runtime when none is present.",
+        "An icon segment owns its option's name and tooltip: the radio carries `aria-label` and a `title` from the `<Segment>`'s `label`, so the projected icon stays decorative and hovering the option (not the glyph) shows what it selects.",
+        "Focus is shown with a token ring and a transparent outline the forced-colors base rule promotes to a real system outline.",
+        "Selection carries a non-color channel on demand: when the theme sets `--selection-cue: marker`, the selected segment gains a check glyph alongside the color fill, satisfying WCAG 1.4.1. High-contrast emits `marker` by default, and any algorithm can opt in via the `cues` knob.",
+        "The group-level `disabled` blocks selection, drops the segments out of the tab order, and mutes the bar; a per-option `disabled` does the same for one segment, so the arrow keys skip it and the default selection lands on the first enabled option.",
+        "A per-option `badge` is trailing text inside the segment (a count); it rides along with the option's label as part of that radio's accessible name.",
+    ],
+    examples: [
+        {
+            id: "views-pairs-sizes",
+            title: "Labels, value pairs, and sizes",
+            description: "A view switch, an alignment control using `label:value` pairs, the compact size, and a disabled group.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "structured-options",
+            title: "Structured options",
+            description: "An export-format row built from a `{ value, label }[]`, showing `Markdown` / `HTML` / `EPUB` while the handler receives `md` / `html` / `epub`.",
+            source: { html: htmlStructuredExample, svelte: svelteStructuredExample, astro: astroStructuredExample },
+        },
+        {
+            id: "per-option-state",
+            title: "Per-option disabled and badges",
+            description: "A data-conditional view switch: a `report` segment carries a count while `text` / `log` stay disabled until their data exists, so the arrow keys skip them and the selection lands on the first enabled option.",
+            source: { html: perOptionExample },
+        },
+        {
+            id: "rich-segments",
+            title: "Icon segments",
+            description: "Drop `<Segment>` children holding an `<Icon>` in place of text labels; each carries a `value` and an accessible `label`, and the bar keeps its selection, roving focus, and form value unchanged. The children project live, so framework-owned content stays reactive.",
+            source: { html: htmlSlottedExample, svelte: svelteSlottedExample, astro: astroSlottedExample },
+        },
+    ],
+};
+//# sourceMappingURL=segmented.manifest.js.map

package/dist/manifest/segmented.manifest.js.map

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

package/dist/manifest/select.manifest.d.ts

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

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

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