@xtyle/core 0.5.0

package/dist/manifest/number-input.manifest.js

@@ -0,0 +1,193 @@
+const htmlExample = `<xtyle-number-input label="Quantity" value="1" min="0" max="99"></xtyle-number-input>
+
+<xtyle-number-input label="Step by 5" value="20" min="0" max="100" step="5"></xtyle-number-input>
+
+<xtyle-number-input label="Price" value="9.99" min="0" step="0.01"></xtyle-number-input>
+
+<xtyle-number-input label="Locked" value="42" disabled></xtyle-number-input>`;
+const svelteExample = `<script lang="ts">
+	import { NumberInput } from "@xtyle/svelte";
+
+	let qty = $state(1);
+</script>
+
+<NumberInput label="Quantity" bind:value={qty} min={0} max={99} />
+
+<NumberInput label="Step by 5" value={20} min={0} max={100} step={5} />
+
+<NumberInput label="Price" value={9.99} min={0} step={0.01} />
+
+<NumberInput label="Locked" value={42} disabled />`;
+const astroExample = `---
+import { NumberInput } from "@xtyle/astro";
+---
+
+<NumberInput label="Quantity" value={1} min={0} max={99} />
+
+<NumberInput label="Step by 5" value={20} min={0} max={100} step={5} />
+
+<NumberInput label="Price" value={9.99} min={0} step={0.01} />
+
+<NumberInput label="Locked" value={42} disabled />`;
+const altHtmlExample = `<xtyle-number-input label="Volume" value="50" min="0" max="100" alt-step="10"></xtyle-number-input>
+
+<xtyle-number-input label="Fine tune" value="1" step="1" alt-step="0.1" alt-default></xtyle-number-input>`;
+const altSvelteExample = `<NumberInput label="Volume" value={50} min={0} max={100} altStep={10} />
+
+<NumberInput label="Fine tune" value={1} step={1} altStep={0.1} altDefault />`;
+const altAstroExample = `<NumberInput label="Volume" value={50} min={0} max={100} altStep={10} />
+
+<NumberInput label="Fine tune" value={1} step={1} altStep={0.1} altDefault />`;
+const freeHtmlExample = `<xtyle-number-input label="Graph parameter" value="3.14159" step="any"></xtyle-number-input>`;
+const freeSvelteExample = `<NumberInput label="Graph parameter" value={3.14159} step="any" />`;
+const freeAstroExample = `<NumberInput label="Graph parameter" value={3.14159} step="any" />`;
+export const numberInputManifest = {
+    id: "number-input",
+    name: "Number Input",
+    category: "form",
+    summary: "A numeric field with stepper buttons, bounds, and step snapping, driven by pointer or keyboard.",
+    description: "Number Input edits a single number. A `role=\"spinbutton\"` text field sits between decrease and increase buttons; the buttons, the up/down arrow keys, and direct typing all change the value, which snaps to `step` and clamps to `[min, max]` on commit. It is form-associated; give it a `name` and its value submits with the form. It accepts decimals (e.g. a `0.01` step for currency). Set `step=\"any\"` for a free-form field: typed values commit verbatim with no grid snap and no precision cap (a graph literal, a coordinate, a scientific value), while the steppers fall back to a whole-number nudge; with no `min`/`max` the value is unbounded, exactly the native `<input type=\"number\" step=\"any\">` contract. A second granularity rides alongside `step`: holding the `modifier` (Shift by default) on a click or arrow applies `altStep`, ten times `step` out of the box, while `PageUp`/`PageDown` always jump by it, and `altDefault` flips which one is primary. Out-of-range typing reverts on commit, and the stepper buttons disable at the bounds. Three sizes: `sm`, the default `md`, and `lg`.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "number",
+            description: "The wrapper carrying the size and disabled classes and stacking the optional label over the control.",
+            selector: ".xtyle-number",
+            tokens: ["--font-sans", "--fg-0", "--space-2"],
+        },
+        {
+            name: "control",
+            description: "The bordered row grouping the stepper buttons and the input; shows the focus ring when the input is focused.",
+            selector: ".xtyle-number__control",
+            tokens: ["--border-thin", "--line-2", "--radius-md", "--bg-0", "--accent", "--border-thick", "--ring"],
+        },
+        {
+            name: "input",
+            description: "The `role=\"spinbutton\"` text field, centered, accepting typed numbers.",
+            selector: ".xtyle-number__input",
+            tokens: ["--fg-0", "--text-body", "--space-1", "--space-2"],
+        },
+        {
+            name: "step",
+            description: "The decrease and increase buttons; out of the tab order (the input is the focus stop), disabled at the bounds.",
+            selector: ".xtyle-number__step",
+            tokens: ["--space-6", "--neutral-bg", "--fg-1", "--text-body", "--state-hover", "--state-press", "--fg-disabled", "--state-disabled"],
+        },
+        {
+            name: "label",
+            description: "The optional visible label, referenced as the field's accessible name.",
+            selector: ".xtyle-number__label",
+            tokens: ["--fg-1", "--text-sm"],
+        },
+    ],
+    props: [
+        { name: "value", type: "number", description: "The current value, snapped to `step` and clamped to the bounds on commit. Empty is allowed. Reflected and form-submitted.", bindings: ["html", "svelte", "astro"] },
+        { name: "min", type: "number", description: "Lower bound; the decrease button disables here.", bindings: ["html", "svelte", "astro"] },
+        { name: "max", type: "number", description: "Upper bound; the increase button disables here.", bindings: ["html", "svelte", "astro"] },
+        { name: "step", type: "number | \"any\"", default: "1", description: "Granularity for the buttons and arrow keys; values snap to it. Use `0.01` for currency, or `\"any\"` for a free-form field that commits typed values verbatim (no snap, no precision cap) with the steppers nudging by 1.", bindings: ["html", "svelte", "astro"] },
+        { name: "altStep", type: "number", default: "step × 10", description: "The alternate granularity, applied when the modifier is held on a click or arrow (and by `PageUp`/`PageDown` always). Defaults to ten times `step`; set it to anything, including a finer value below `step`.", bindings: ["html", "svelte", "astro"] },
+        { name: "altDefault", type: "boolean", default: "false", description: "Swaps which step is primary: when set, plain clicks and arrows use `altStep`, and the modifier falls back to `step`; coarse-by-default with a fine modifier is as easy as the reverse.", bindings: ["html", "svelte", "astro"] },
+        { name: "modifier", type: "\"shift\" | \"alt\" | \"ctrl\" | \"meta\"", default: "shift", description: "The key that swaps to the alternate step on a click or arrow press.", bindings: ["html", "svelte", "astro"], options: ["shift", "alt", "ctrl", "meta"] },
+        { name: "disabled", type: "boolean", default: "false", description: "Disables typing and the steppers; mutes the control.", 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: "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 field. Takes precedence over `label`.", bindings: ["html", "svelte", "astro"] },
+        { name: "name", type: "string", description: "Form field name; the value submits with the form.", bindings: ["html", "svelte", "astro"] },
+        { name: "placeholder", type: "string", description: "Placeholder shown when the field is empty.", bindings: ["html", "svelte", "astro"] },
+    ],
+    variants: [],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-number--sm" },
+        { name: "md", description: "Default.", className: "xtyle-number", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-number--lg" },
+    ],
+    states: [
+        {
+            name: "focus-within",
+            description: "The input is focused. The control border takes the accent and a token ring appears.",
+            selector: ".xtyle-number__control:focus-within",
+            tokens: ["--accent", "--border-thick", "--ring"],
+        },
+        {
+            name: "step-hover",
+            description: "Pointer over a stepper button: the hover tint.",
+            selector: ".xtyle-number__step:hover",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "step-disabled",
+            description: "A stepper button at its bound: muted and non-interactive.",
+            selector: ".xtyle-number__step:disabled",
+            tokens: ["--fg-disabled", "--state-disabled"],
+        },
+        {
+            name: "disabled",
+            description: "The whole field disabled: muted control, no typing or stepping.",
+            selector: ".xtyle-number--disabled",
+            tokens: ["--fg-disabled", "--state-disabled"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-sm",
+        "--fg-0",
+        "--fg-1",
+        "--fg-disabled",
+        "--bg-0",
+        "--line-2",
+        "--border-thin",
+        "--border-thick",
+        "--radius-md",
+        "--accent",
+        "--ring",
+        "--neutral-bg",
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-5",
+        "--space-6",
+        "--space-7",
+        "--state-hover",
+        "--state-press",
+        "--state-disabled",
+        "--duration-fast",
+        "--ease-standard",
+    ],
+    composition: [
+        "Pair with Field or a form to capture the value; give it a `name` so it submits.",
+        "Use `step=\"0.01\"` with `min=\"0\"` for currency, or a wide range with `step=\"1\"` for counts.",
+        "Reach for `step=\"any\"` (and no `min`/`max`) when the field holds a free-form literal (a graph parameter, a coordinate, a scientific value) that must not snap to a grid or clamp.",
+        "For an unbounded continuous range with a visible track, reach for Slider instead.",
+    ],
+    a11y: [
+        "The field is `role=\"spinbutton\"` with `aria-valuenow` (and `aria-valuemin`/`aria-valuemax` when bounds are set) kept in sync.",
+        "Up and down arrow keys nudge by `step`, or `altStep` while the `modifier` is held; `PageUp`/`PageDown` always jump by `altStep`; Enter commits typed input; the keys' default behavior is handled so the value stays in range.",
+        "The stepper buttons are out of the tab order (the input is the single focus stop) and are labeled Decrease / Increase; they disable at the bounds.",
+        "Requires an accessible name: `labelledby` wins, then `label`; the binding warns at runtime when neither is present.",
+        "Focus is shown on the control via `:focus-within`. The input's own outline is suppressed in favor of the grouped ring.",
+        "`disabled` blocks typing and stepping and mutes the control.",
+    ],
+    examples: [
+        {
+            id: "bounds-steps-and-form",
+            title: "Bounds, steps, and form association",
+            description: "A bounded quantity, a stepped range, a currency field, and a disabled one.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "alternate-step",
+            title: "Alternate step and modifier",
+            description: "A volume that jumps by ten on Shift (or PageUp/PageDown), and a fine-tuner that steps by `0.1` plainly with Shift falling back to whole units via `altDefault`.",
+            source: { html: altHtmlExample, svelte: altSvelteExample, astro: altAstroExample },
+        },
+        {
+            id: "free-form",
+            title: "Free-form (step=\"any\")",
+            description: "An unstepped, unbounded field for an arbitrary literal: typing `3.14159` commits it verbatim with no snap and no clamp, while the steppers still nudge by 1.",
+            source: { html: freeHtmlExample, svelte: freeSvelteExample, astro: freeAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=number-input.manifest.js.map

package/dist/manifest/number-input.manifest.js.map

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

package/dist/manifest/pagination.manifest.d.ts

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

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

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

package/dist/manifest/pagination.manifest.js

@@ -0,0 +1,213 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<!-- link mode: each page is a real anchor, zero JS needed -->
+<xtyle-pagination page="3" total="20" href="/blog?page={page}"></xtyle-pagination>
+
+<!-- button mode: listen for page-change -->
+<xtyle-pagination page="3" total="20" tone="neutral"></xtyle-pagination>
+
+<script>
+	document.querySelector("xtyle-pagination:not([href])")
+		.addEventListener("page-change", (e) => console.log(e.detail.page));
+</script>`;
+const svelteExample = `<script lang="ts">
+	import { Pagination } from "@xtyle/svelte";
+	let page = $state(3);
+</script>
+
+<Pagination {page} total={20} onpagechange={(e) => (page = e.detail.page)} />`;
+const astroExample = `---
+import Pagination from "@xtyle/astro/Pagination.astro";
+const page = Number(Astro.url.searchParams.get("page") ?? 1);
+---
+
+<Pagination page={page} total={20} href="/blog?page={page}" />`;
+export const paginationManifest = {
+    id: "pagination",
+    name: "Pagination",
+    category: "navigation",
+    summary: "A page navigator: previous/next controls around a windowed list of page numbers with ellipses.",
+    description: 'Pagination walks a reader through a paged collection. It is a `<nav>` landmark wrapping previous and next controls and an ordered list of page numbers; the current page is marked `aria-current="page"`, and a sibling window around it keeps the control compact, collapsing the gaps to an ellipsis when there are more pages than fit. The visible range is computed from `page` and `total` plus two knobs: `siblings` (links on each side of the current page) and `boundaries` (links pinned at each end). Give it an `href` template containing `{page}` and every page renders as a real link, so the control navigates with zero JavaScript and works on the static Astro path; omit the template and the pages render as buttons that emit a `page-change` event carrying the chosen page. A `tone` colors the current-page pill and three `size`s scale the type.',
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "pagination",
+            description: "The `<nav>` landmark laying the controls and page list out in a wrapping row.",
+            selector: ".xtyle-pagination",
+            tokens: ["--font-sans", "--text-sm", "--leading-normal", "--fg-2", "--space-1"],
+        },
+        {
+            name: "page",
+            description: "A page number, a link (href mode) or button, with a hover wash and a focus ring.",
+            selector: ".xtyle-pagination__page",
+            tokens: ["--fg-1", "--bg-2", "--radius-sm", "--space-0", "--space-1"],
+        },
+        {
+            name: "current",
+            description: "The current page: a filled pill in the tone color, carrying `aria-current`. When the theme's `--selection-cue` resolves to `marker` (a high-contrast or redundant-cues algorithm), a non-color underline bar is added so the current page never rests on color alone.",
+            selector: ".xtyle-pagination__page--current",
+            tokens: ["--accent", "--accent-fg", "--selection-cue", "--weight-medium"],
+        },
+        {
+            name: "control",
+            description: "The previous / next arrows; dimmed and inert at the ends of the range.",
+            selector: ".xtyle-pagination__control",
+            tokens: ["--fg-1", "--fg-3", "--bg-2"],
+        },
+        {
+            name: "ellipsis",
+            description: "The collapsed-gap marker between distant pages, hidden from assistive tech.",
+            selector: ".xtyle-pagination__ellipsis",
+            tokens: ["--fg-3"],
+        },
+    ],
+    props: [
+        {
+            name: "page",
+            type: "number",
+            default: "1",
+            description: "The current page, 1-based. Clamped into `[1, total]`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "total",
+            type: "number",
+            default: "1",
+            description: "The total number of pages.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "siblings",
+            type: "number",
+            default: "1",
+            description: "How many page links to show on each side of the current page.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "boundaries",
+            type: "number",
+            default: "1",
+            description: "How many page links to pin at each end of the range.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "href",
+            type: "string",
+            description: "A URL template with a `{page}` placeholder. When set, every page is a real link (zero-JS navigation); when omitted, pages are buttons that emit `page-change`.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            default: "accent",
+            description: "Color of the current-page pill, any of the 21 tones: the six semantic roles, `accent-2/3/4`, or the twelve named hues.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+        {
+            name: "size",
+            type: "Size",
+            default: "md",
+            description: "Type scale of the control.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["sm", "md", "lg"],
+        },
+        {
+            name: "label",
+            type: "string",
+            default: "Pagination",
+            description: "The accessible name of the `<nav>` landmark.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "accent",
+            description: "Current-page pill in the accent tone (the default).",
+            className: "xtyle-pagination--accent",
+            tokens: ["--accent", "--accent-fg"],
+        },
+        {
+            name: "neutral",
+            description: "Current-page pill in neutral ink for a quieter control.",
+            className: "xtyle-pagination--neutral",
+            tokens: ["--neutral", "--neutral-fg"],
+        },
+    ],
+    sizes: [
+        { name: "sm", description: "Compact.", className: "xtyle-pagination--sm" },
+        { name: "md", description: "Default.", className: "xtyle-pagination", isDefault: true },
+        { name: "lg", description: "Large.", className: "xtyle-pagination--lg" },
+    ],
+    states: [
+        {
+            name: "hover",
+            description: "Pointer over a page or control; a soft wash fills behind it.",
+            selector: ".xtyle-pagination__page:hover",
+            tokens: ["--bg-2"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus: a token-colored ring, plus a transparent outline promoted to a real one in forced-colors mode.",
+            selector: ".xtyle-pagination__page:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+        {
+            name: "current",
+            description: "The active page: a filled tone pill, no hover, `aria-current`.",
+            selector: ".xtyle-pagination__page--current",
+            tokens: ["--accent", "--accent-fg"],
+        },
+        {
+            name: "disabled",
+            description: "A previous/next control at the end of the range: dimmed and non-interactive.",
+            selector: '.xtyle-pagination__control[aria-disabled="true"]',
+            tokens: ["--fg-3"],
+        },
+    ],
+    slots: [],
+    consumedTokens: [
+        "--bg-2",
+        "--border-normal",
+        "--border-thick",
+        "--border-thin",
+        "--duration-fast",
+        "--ease-standard",
+        "--fg-1",
+        "--fg-2",
+        "--fg-3",
+        "--font-sans",
+        "--leading-normal",
+        "--radius-sm",
+        "--ring",
+        "--selection-cue",
+        "--space-0",
+        "--space-1",
+        "--text-body",
+        "--text-sm",
+        "--text-xs",
+        "--weight-medium",
+        ...FULL_TONES.flatMap((t) => [`--${t}`, `--${t}-fg`]),
+    ],
+    composition: [
+        "Pair below a Table or a card grid to page through a long collection.",
+        "Use `href` for content routes (blog, search results) so the pages are crawlable links; use button mode with `page-change` for in-app state.",
+        "Drop `siblings`/`boundaries` to `0`/`1` for the most compact control, or raise `siblings` when there's room for a wider window.",
+    ],
+    a11y: [
+        'Renders a `<nav>` landmark with an accessible name (`aria-label`, default "Pagination") so screen readers can find and announce the pager.',
+        'The current page carries `aria-current="page"` and is not actionable; it is the destination, not a target.',
+        "Each page and control has an explicit accessible name (`Go to page N`, `Previous page`, `Next page`), so the digit or arrow glyph is never read bare.",
+        'Previous/next at the ends of the range are marked `aria-disabled="true"` and made non-interactive rather than removed, so their position stays stable.',
+        "The ellipsis is decorative and `aria-hidden`, never announced between pages.",
+        "In button mode the pages are real `<button>`s, keyboard-operable and focusable for free; the chosen page rides a `page-change` event.",
+    ],
+    examples: [
+        {
+            id: "link-and-button",
+            title: "Link and button modes",
+            description: "An `href` template makes each page a zero-JS link; without it the pages are buttons that emit `page-change`.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=pagination.manifest.js.map

package/dist/manifest/pagination.manifest.js.map

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

package/dist/manifest/panel.manifest.d.ts

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

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

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