@xtyle/core 0.5.0

package/dist/manifest/card.manifest.js

@@ -0,0 +1,280 @@
+import { FULL_TONES } from "../vocab.js";
+const htmlExample = `<xtyle-card>
+	<h3 slot="header">Monthly report</h3>
+	<p>Revenue is up 12% over last month, driven by the new onboarding flow.</p>
+	<div slot="footer">Updated 2 hours ago</div>
+</xtyle-card>
+
+<xtyle-card overlay compact>
+	<p>A compact card on a translucent overlay surface.</p>
+</xtyle-card>
+
+<xtyle-card interactive>
+	<h3 slot="header">Pricing</h3>
+	<p>See every plan and what is included.</p>
+	<a slot="footer" href="/pricing">View plans</a>
+</xtyle-card>`;
+const htmlActionExample = `<xtyle-card action onclick="openProject('atlas')">
+	<h3 slot="header">Atlas</h3>
+	<p>Last edited 2 hours ago.</p>
+</xtyle-card>`;
+const svelteActionExample = `<script lang="ts">
+	import { Card } from "@xtyle/svelte";
+	let { openProject }: { openProject: (id: string) => void } = $props();
+</script>
+
+<Card action onclick={() => openProject("atlas")}>
+	{#snippet header()}<h3>Atlas</h3>{/snippet}
+	<p>Last edited 2 hours ago.</p>
+</Card>`;
+const astroActionExample = `---
+import { Card } from "@xtyle/astro";
+---
+
+<Card action onclick="openProject('atlas')">
+	<h3 slot="header">Atlas</h3>
+	<p>Last edited 2 hours ago.</p>
+</Card>`;
+const svelteExample = `<script lang="ts">
+	import { Card } from "@xtyle/svelte";
+</script>
+
+<Card>
+	{#snippet header()}<h3>Monthly report</h3>{/snippet}
+	<p>Revenue is up 12% over last month, driven by the new onboarding flow.</p>
+	{#snippet footer()}Updated 2 hours ago{/snippet}
+</Card>
+
+<Card overlay compact>
+	<p>A compact card on a translucent overlay surface.</p>
+</Card>
+
+<Card interactive>
+	{#snippet header()}<h3>Pricing</h3>{/snippet}
+	<p>See every plan and what is included.</p>
+	{#snippet footer()}<a href="/pricing">View plans</a>{/snippet}
+</Card>`;
+const astroExample = `---
+import { Card } from "@xtyle/astro";
+---
+
+<Card>
+	<h3 slot="header">Monthly report</h3>
+	<p>Revenue is up 12% over last month, driven by the new onboarding flow.</p>
+	<div slot="footer">Updated 2 hours ago</div>
+</Card>
+
+<Card overlay compact>
+	<p>A compact card on a translucent overlay surface.</p>
+</Card>
+
+<Card interactive>
+	<h3 slot="header">Pricing</h3>
+	<p>See every plan and what is included.</p>
+	<a slot="footer" href="/pricing">View plans</a>
+</Card>`;
+export const cardManifest = {
+    id: "card",
+    name: "Card",
+    category: "layout",
+    summary: "A surface container that groups related content, with optional header and footer regions.",
+    description: "Card is the workhorse surface: a bordered, elevated panel that frames related content as one unit. It lays its three regions (header, body, footer) out in a column with consistent spacing; the header and footer are real light-DOM parts (`.xtyle-card__header` / `.xtyle-card__footer`), so the same structure renders identically across every binding. An `overlay` variant swaps the surface for the translucent treatment used inside popovers and menus; a `compact` size tightens the padding; an `interactive` variant adds a hover elevation lift plus a focus-within ring for cards that act as a single clickable target. That last one is presentational only: it styles the surface but adds no behavior, so the consumer wraps the clickable content in a real `<button>` or `<a>` for keyboard and screen-reader semantics.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "card",
+            description: "The surface container carrying the variant and size classes.",
+            selector: ".xtyle-card",
+            tokens: [
+                "--font-sans",
+                "--text-body",
+                "--leading-normal",
+                "--fg-0",
+                "--bg-1",
+                "--border-thin",
+                "--line",
+                "--radius-lg",
+                "--elevation-2",
+                "--space-5",
+                "--space-4",
+            ],
+        },
+        {
+            name: "header",
+            description: "The top region, a heading-weight title for the card.",
+            selector: ".xtyle-card__header",
+            tokens: ["--text-lg", "--weight-semibold", "--leading-tight", "--fg-0"],
+        },
+        {
+            name: "body",
+            description: "The main content region.",
+            selector: ".xtyle-card__body",
+            tokens: ["--fg-1"],
+        },
+        {
+            name: "footer",
+            description: "The bottom region: separated by a top border, drawn in muted ink.",
+            selector: ".xtyle-card__footer",
+            tokens: ["--space-3", "--border-thin", "--line", "--fg-2"],
+        },
+    ],
+    props: [
+        {
+            name: "overlay",
+            type: "boolean",
+            default: "false",
+            description: "The translucent overlay surface, for cards floating over content (popovers, menus).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "interactive",
+            type: "boolean",
+            default: "false",
+            description: "Adds a hover elevation lift and a focus-within ring for cards that act as a single clickable target. Presentational only: it adds no role or tab stop, so wrap the clickable content in a real button or link (or use `action` when the card itself is the button).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "action",
+            type: "boolean",
+            default: "false",
+            description: "Makes the card itself the button: it takes `role=\"button\"`, a tab stop, and Enter/Space activation, so a JS `onclick` on the card is keyboard-reachable with no inner control. Implies the interactive hover lift, and its focus ring shows on keyboard entry only. Use it for a card that runs an action (open this item, select this row); for a card that navigates, use a link inside or `CardLink`. Do not put another interactive element inside an `action` card.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "compact",
+            type: "boolean",
+            default: "false",
+            description: "Tightens the padding and inner spacing for dense layouts.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "tone",
+            type: "FullTone",
+            description: "Adds a leading-edge accent bar in the chosen tone (any semantic role, accent variant, or named hue). Omit it for the plain neutral surface.",
+            bindings: ["html", "svelte", "astro"],
+            options: [...FULL_TONES],
+        },
+    ],
+    variants: [
+        {
+            name: "default",
+            description: "The standard elevated surface on the raised background.",
+            className: "xtyle-card",
+            tokens: ["--bg-1", "--line", "--elevation-2"],
+        },
+        {
+            name: "overlay",
+            description: "The translucent overlay surface, for cards floating over other content.",
+            className: "xtyle-card--overlay",
+            tokens: ["--surface-overlay", "--surface-overlay-border"],
+        },
+        {
+            name: "interactive",
+            description: "Hover elevation lift plus a focus-within ring for a clickable card.",
+            className: "xtyle-card--interactive",
+            tokens: ["--elevation-4", "--line-2", "--state-hover", "--state-press", "--ring"],
+        },
+    ],
+    sizes: [
+        { name: "default", description: "Standard padding.", className: "xtyle-card", isDefault: true },
+        { name: "compact", description: "Tightened padding and spacing.", className: "xtyle-card--compact" },
+    ],
+    states: [
+        {
+            name: "hover",
+            description: "Pointer over an interactive card; the surface lifts and the overlay paints the hover tint.",
+            selector: ".xtyle-card--interactive:hover",
+            tokens: ["--elevation-4", "--line-2", "--state-hover"],
+        },
+        {
+            name: "active",
+            description: "Interactive card pressed; the lift drops and the overlay paints the press tint.",
+            selector: ".xtyle-card--interactive:active",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "focus-within",
+            description: "Keyboard focus lands inside an interactive card: a token-colored ring, plus a transparent outline that becomes real in forced-colors mode.",
+            selector: ".xtyle-card--interactive:focus-within",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The card body content.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "header",
+            description: "The card title region, rendered above the body.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "footer",
+            description: "The card footer region, rendered below the body with a top border.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--font-sans",
+        "--text-body",
+        "--text-lg",
+        "--weight-semibold",
+        "--leading-normal",
+        "--leading-tight",
+        "--border-thin",
+        "--border-normal",
+        "--border-thick",
+        "--radius-lg",
+        ...FULL_TONES.map((t) => `--${t}`),
+        "--space-1",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-5",
+        "--duration-fast",
+        "--ease-standard",
+        "--ring",
+        "--state-hover",
+        "--state-press",
+        "--fg-0",
+        "--fg-1",
+        "--fg-2",
+        "--bg-1",
+        "--line",
+        "--line-2",
+        "--elevation-2",
+        "--elevation-4",
+        "--surface-overlay",
+        "--surface-overlay-border",
+    ],
+    composition: [
+        "Use Card as the frame for any grouped content: forms, media, summaries, list items.",
+        "For a card whose content carries its own control, set `interactive` and wrap that content in a real `<button>` or `<a>`; the variant supplies the hover/focus affordance but no behavior.",
+        "For a card that is itself one clickable target running a JS action, set `action` instead: the card becomes a keyboard-operable button (`role=\"button\"`, tab stop, Enter/Space), so an `onclick` on it works for the keyboard with nothing to wrap.",
+        "Pair the `overlay` variant with floating surfaces (popovers, menus, toasts) so the card matches their translucent treatment.",
+    ],
+    a11y: [
+        "Card is a plain surface container with no implicit role; put semantic elements (headings, lists, buttons) inside it.",
+        "The `interactive` variant is presentational only: it adds no role or tab stop. Wrap the clickable target in a native `<button>` or `<a>` so keyboard and screen-reader semantics come for free.",
+        "The `action` variant makes the card itself the button: it reflects `role=\"button\"`, takes a `tabindex` tab stop, and maps Enter/Space to the same activation a click fires. Do not nest another interactive element inside an `action` card; a button must not contain a button or link.",
+        "An `interactive` card rings on `:focus-within` (the real control inside it takes focus); an `action` card rings on `:focus-visible`, so a pointer click never paints the ring but keyboard entry does.",
+        "Focus is shown with a token ring and a transparent outline that the forced-colors base rule promotes to a real system outline.",
+    ],
+    examples: [
+        {
+            id: "regions-and-variants",
+            title: "Regions and variants",
+            description: "Header, body, and footer regions; the overlay, compact, and interactive variants.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "action-card",
+            title: "Action card",
+            description: "An `action` card is itself a keyboard-operable button: it focuses, Enter and Space fire its `onclick`, and the ring shows on keyboard entry only.",
+            source: { html: htmlActionExample, svelte: svelteActionExample, astro: astroActionExample },
+        },
+    ],
+};
+//# sourceMappingURL=card.manifest.js.map

package/dist/manifest/card.manifest.js.map

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

package/dist/manifest/carousel.manifest.d.ts

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

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

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

package/dist/manifest/carousel.manifest.js

@@ -0,0 +1,170 @@
+const htmlExample = `<xtyle-carousel label="Product photos">
+	<img src="/a.jpg" alt="Front" />
+	<img src="/b.jpg" alt="Side" />
+	<img src="/c.jpg" alt="Back" />
+</xtyle-carousel>`;
+const autoplayHtmlExample = `<xtyle-carousel label="Highlights" autoplay interval="4000" loop>
+	<div>Slide one</div>
+	<div>Slide two</div>
+	<div>Slide three</div>
+</xtyle-carousel>`;
+const autoplaySvelteExample = `<script lang="ts">
+	import { Carousel } from "@xtyle/svelte";
+</script>
+
+<Carousel label="Highlights" autoplay interval={4000} loop>
+	<div>Slide one</div>
+	<div>Slide two</div>
+</Carousel>`;
+const autoplayAstroExample = `---
+import Carousel from "@xtyle/astro/Carousel.astro";
+---
+
+<Carousel label="Highlights" autoplay interval={4000} loop>
+	<div>Slide one</div>
+	<div>Slide two</div>
+</Carousel>`;
+const svelteExample = `<script lang="ts">
+	import { Carousel } from "@xtyle/svelte";
+</script>
+
+<Carousel label="Product photos">
+	<img src="/a.jpg" alt="Front" />
+	<img src="/b.jpg" alt="Side" />
+</Carousel>`;
+const astroExample = `---
+import Carousel from "@xtyle/astro/Carousel.astro";
+import Image from "@xtyle/astro/Image.astro";
+---
+
+<Carousel label="Gallery">
+	<Image src="/a.jpg" alt="First" ratio="16/9" />
+	<Image src="/b.jpg" alt="Second" ratio="16/9" />
+</Carousel>`;
+export const carouselManifest = {
+    id: "carousel",
+    name: "Carousel",
+    since: "0.4.0",
+    category: "media",
+    summary: "A scroll-snap track of slides with prev/next controls, dots, keyboard, and opt-in autoplay.",
+    description: "Carousel lays its slotted children out as a horizontal scroll-snap track: each child is a slide, and the browser's own scrolling does the paging, so the track is swipeable and keyboard-scrollable with no JavaScript at all. When the runtime is present it grows a control bar, prev and next buttons (drawn with the chevron icons), a row of pagination dots that track and drive the active slide, and arrow-key and Home/End navigation, all wired over the same native scroll. An opt-in `autoplay` advances the track on an `interval`, pausing on hover and focus and standing still entirely under `prefers-reduced-motion`; `loop` wraps the ends. It is content-agnostic: the slides can be `Image`s, `Card`s, or any markup, and it exposes itself as a labelled carousel region with each slide named for assistive tech.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "track",
+            description: "The horizontal scroll-snap container that holds and pages the slides.",
+            selector: ".xtyle-carousel__track",
+            tokens: ["--space-3"],
+        },
+        {
+            name: "nav",
+            description: "The prev/next buttons.",
+            selector: ".xtyle-carousel__nav",
+            tokens: ["--bg-1", "--fg-1", "--line-2", "--radius-full"],
+        },
+        {
+            name: "dots",
+            description: "The pagination dots; the active one takes the accent.",
+            selector: ".xtyle-carousel__dot",
+            tokens: ["--bg-3", "--accent"],
+        },
+    ],
+    props: [
+        {
+            name: "label",
+            type: "string",
+            description: "The accessible name for the carousel region. Always set it so assistive tech can announce the carousel.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "autoplay",
+            type: "boolean",
+            default: "false",
+            description: "Auto-advances the track on the `interval`. Pauses on hover and focus, and never runs under reduced-motion.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "interval",
+            type: "number",
+            default: "5000",
+            description: "The autoplay dwell per slide, in milliseconds.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "loop",
+            type: "boolean",
+            default: "false",
+            description: "Wraps past the last slide back to the first (and the prev/next buttons stay enabled at the ends).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "controls",
+            type: "boolean",
+            default: "true",
+            description: "Shows the prev/next buttons. Set `controls=\"false\"` to hide them and rely on swipe, dots, and keys.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "dots",
+            type: "boolean",
+            default: "true",
+            description: "Shows the pagination dots. Set `dots=\"false\"` to hide them.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The slides. Each direct child becomes one slide in the track (an `Image`, a `Card`, or any markup).",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--bg-1",
+        "--bg-2",
+        "--bg-3",
+        "--fg-1",
+        "--fg-2",
+        "--accent",
+        "--line-2",
+        "--radius-full",
+        "--border-thin",
+        "--border-thick",
+        "--ring",
+        "--space-2",
+        "--space-3",
+        "--space-6",
+        "--duration-fast",
+        "--ease-standard",
+    ],
+    composition: [
+        "Put `Image`s in the track for a photo gallery; pair each with a `ratio` so the slides stay a consistent height.",
+        "Slot `Card`s for a featured-content rail, or any markup for a testimonial or onboarding sequence.",
+        "Set `autoplay` with `loop` for an unattended hero rotation; it pauses the moment a user hovers or focuses it.",
+        "Set `controls=\"false\"` on a touch-first surface to lean on swipe and dots alone.",
+    ],
+    a11y: [
+        "The carousel is a labelled `region` with `aria-roledescription=\"carousel\"`, and each slide is a labelled group announced as `N of M`.",
+        "The track is focusable and scrolls with the arrow keys and Home/End; the prev/next buttons and dots are labelled controls.",
+        "Autoplay pauses on hover and focus, and stops entirely under `prefers-reduced-motion`, so motion never runs against a user's stated preference.",
+        "With no JavaScript the slides remain visible and the track stays natively scrollable, so no content is trapped behind the enhancement.",
+    ],
+    examples: [
+        {
+            id: "gallery",
+            title: "Image gallery",
+            description: "A few slides in a scroll-snap track with prev/next controls and dots.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "autoplay",
+            title: "Autoplay and loop",
+            description: "An auto-advancing, looping track that pauses on hover or focus.",
+            source: { html: autoplayHtmlExample, svelte: autoplaySvelteExample, astro: autoplayAstroExample },
+        },
+    ],
+};
+//# sourceMappingURL=carousel.manifest.js.map

package/dist/manifest/carousel.manifest.js.map

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

package/dist/manifest/checkbox.manifest.d.ts

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

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

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