@xtyle/core 0.5.0

package/dist/manifest/panel.manifest.js

@@ -0,0 +1,246 @@
+const htmlExample = `<xtyle-panel title="Connections" level="2">
+	<button slot="actions" class="xtyle-button xtyle-button--ghost xtyle-button--neutral xtyle-button--sm">Refresh</button>
+	<p>Two services are connected.</p>
+	<p slot="footer">Last synced a moment ago.</p>
+</xtyle-panel>
+
+<xtyle-panel title="Advanced options" variant="collapsible">
+	<label><input type="checkbox" /> Verbose logging</label>
+	<label><input type="checkbox" /> Telemetry</label>
+</xtyle-panel>
+
+<xtyle-panel title="Activity log" scroll>
+	<p>A long stream of entries that scrolls inside the panel body…</p>
+</xtyle-panel>`;
+const svelteExample = `<script lang="ts">
+	import { Panel } from "@xtyle/svelte";
+</script>
+
+<Panel title="Connections" level={2}>
+	{#snippet actions()}
+		<button class="xtyle-button xtyle-button--ghost xtyle-button--neutral xtyle-button--sm">Refresh</button>
+	{/snippet}
+	<p>Two services are connected.</p>
+	{#snippet footer()}
+		<span>Last synced a moment ago.</span>
+	{/snippet}
+</Panel>
+
+<Panel title="Advanced options" variant="collapsible">
+	<label><input type="checkbox" /> Verbose logging</label>
+	<label><input type="checkbox" /> Telemetry</label>
+</Panel>
+
+<Panel title="Activity log" scroll>
+	<p>A long stream of entries that scrolls inside the panel body…</p>
+</Panel>`;
+const astroExample = `---
+import { Panel } from "@xtyle/astro";
+---
+
+<Panel title="Connections" level={2}>
+	<button slot="actions" class="xtyle-button xtyle-button--ghost xtyle-button--neutral xtyle-button--sm">Refresh</button>
+	<p>Two services are connected.</p>
+	<p slot="footer">Last synced a moment ago.</p>
+</Panel>
+
+<Panel title="Advanced options" variant="collapsible">
+	<label><input type="checkbox" /> Verbose logging</label>
+	<label><input type="checkbox" /> Telemetry</label>
+</Panel>
+
+<Panel title="Activity log" scroll>
+	<p>A long stream of entries that scrolls inside the panel body…</p>
+</Panel>`;
+export const panelManifest = {
+    id: "panel",
+    name: "Panel",
+    category: "layout",
+    summary: "A titled content region: a header with a configurable heading and actions, a body, an optional footer, and an optional collapsible or scrollable form.",
+    description: "Panel frames a labelled section of content. Its header carries a title (rendered at a configurable heading `level` for a correct document outline), an actions slot pushed to the trailing edge by a spacer, and the body it labels via `aria-labelledby`. The `default` variant is a static `<section>`; the `collapsible` variant is a native `<details>`/`<summary>` disclosure that needs no JavaScript in markup. The custom element drives it with `aria-expanded`. A `footer` slot adds a quiet trailing row, and the `scroll` flag turns the body into a focusable, keyboard-scrollable region capped at a fixed height.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "panel",
+            description: "The root section (or details) carrying the variant and modifier classes.",
+            selector: ".xtyle-panel",
+            tokens: ["--bg-0", "--line", "--border-thin", "--radius-lg"],
+        },
+        {
+            name: "header",
+            description: "The title row; for the collapsible variant it's the clickable summary/toggle.",
+            selector: ".xtyle-panel__header",
+            tokens: ["--bg-1", "--line", "--border-thin", "--space-3", "--space-4", "--space-2"],
+        },
+        {
+            name: "title",
+            description: "The heading, rendered at the configured level and referenced by the section's aria-labelledby.",
+            selector: ".xtyle-panel__title",
+            tokens: ["--font-display", "--weight-semibold", "--text-sm", "--fg-1"],
+        },
+        {
+            name: "spacer",
+            description: "A flexible gap that pushes the actions slot to the trailing edge of the header.",
+            selector: ".xtyle-panel__spacer",
+        },
+        {
+            name: "body",
+            description: "The content region the panel labels; becomes a scroll container under the scroll flag.",
+            selector: ".xtyle-panel__body",
+            tokens: ["--space-4", "--space-3"],
+        },
+        {
+            name: "footer",
+            description: "A quiet trailing row for metadata or secondary actions.",
+            selector: ".xtyle-panel__footer",
+            tokens: ["--bg-1", "--line", "--border-thin", "--fg-2", "--text-sm", "--space-3", "--space-4", "--space-2"],
+        },
+    ],
+    props: [
+        {
+            name: "title",
+            type: "string",
+            description: "The panel heading text. When set (or an actions slot is filled) the header renders.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "level",
+            type: "1 | 2 | 3 | 4 | 5 | 6",
+            default: "2",
+            description: "The heading level for the title, so the panel slots into the document outline correctly.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["1", "2", "3", "4", "5", "6"],
+        },
+        {
+            name: "variant",
+            type: "PanelVariant",
+            default: "default",
+            description: "`default` is a static section; `collapsible` is a disclosure with a clickable header.",
+            bindings: ["html", "svelte", "astro"],
+            options: ["default", "collapsible"],
+        },
+        {
+            name: "open",
+            type: "boolean",
+            default: "false",
+            description: "For the collapsible variant: whether the body starts expanded.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "scroll",
+            type: "boolean",
+            default: "false",
+            description: "Caps the body height and makes it a focusable, keyboard-scrollable region.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [
+        {
+            name: "default",
+            description: "A static titled section.",
+            className: "xtyle-panel",
+        },
+        {
+            name: "collapsible",
+            description: "A native disclosure; the header toggles the body open and closed.",
+            className: "xtyle-panel--collapsible",
+            tokens: ["--bg-1", "--fg-1", "--state-hover", "--state-press"],
+        },
+    ],
+    sizes: [],
+    states: [
+        {
+            name: "open",
+            description: "The collapsible panel is expanded; the marker rotates to point down.",
+            selector: ".xtyle-panel--collapsible[open] > summary .xtyle-panel__marker",
+            tokens: ["--ease-emphasized", "--duration-fast"],
+        },
+        {
+            name: "collapsed",
+            description: "The collapsible panel is closed; the body is hidden, the marker points right.",
+            selector: ".xtyle-panel__marker",
+            tokens: ["--fg-2", "--duration-fast", "--ease-emphasized"],
+        },
+        {
+            name: "hover",
+            description: "Pointer over a collapsible header; the overlay paints the hover tint.",
+            selector: ".xtyle-panel--collapsible > summary:hover::after",
+            tokens: ["--state-hover"],
+        },
+        {
+            name: "active",
+            description: "Collapsible header pressed; the overlay paints the press tint.",
+            selector: ".xtyle-panel--collapsible > summary:active::after",
+            tokens: ["--state-press"],
+        },
+        {
+            name: "focus-visible",
+            description: "Keyboard focus on the toggle or the scroll body: an inset token-colored ring.",
+            selector: ".xtyle-panel__toggle:focus-visible",
+            tokens: ["--border-normal", "--border-thick", "--ring"],
+        },
+    ],
+    slots: [
+        {
+            name: "default",
+            description: "The panel body content.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "actions",
+            description: "Controls aligned to the trailing edge of the header.",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "footer",
+            description: "A quiet trailing row below the body.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: [
+        "--bg-0",
+        "--bg-1",
+        "--border-normal",
+        "--border-thick",
+        "--border-thin",
+        "--duration-fast",
+        "--ease-emphasized",
+        "--ease-standard",
+        "--fg-1",
+        "--fg-2",
+        "--font-display",
+        "--line",
+        "--line-2",
+        "--radius-lg",
+        "--ring",
+        "--space-2",
+        "--space-3",
+        "--space-4",
+        "--space-8",
+        "--state-hover",
+        "--state-press",
+        "--text-sm",
+        "--weight-semibold",
+    ],
+    composition: [
+        "Use as the building block of a Dock column; `.xtyle-dock .xtyle-panel` drops the border and radius so panels stack flush.",
+        "Put a Button cluster in the `actions` slot for per-panel controls; the spacer keeps them right-aligned.",
+        "Set `level` so nested panels keep a valid heading hierarchy: a top-level panel at 2, sub-panels at 3, and so on.",
+    ],
+    a11y: [
+        "The default variant is a native `<section>` labelled by its title via `aria-labelledby`, so it is announced as a named region.",
+        "The title renders at a configurable heading `level` so the panel participates correctly in the document outline; the binding warns when neither a title nor an actions slot supplies a heading.",
+        "The collapsible variant uses native `<details>`/`<summary>` (or a `<button>` with `aria-expanded` in the custom element), giving keyboard toggling and screen-reader disclosure semantics for free.",
+        "The disclosure marker is decorative (`aria-hidden`); expanded state lives in `[open]` / `aria-expanded`, not the rotation.",
+        "Under `scroll` the body is a focusable region (`tabindex=\"0\"`, `role=\"region\"`) so keyboard users can scroll it, with the standard inset focus ring.",
+    ],
+    examples: [
+        {
+            id: "header-collapsible-scroll",
+            title: "Header, collapsible, and scroll",
+            description: "A titled panel with actions and a footer, a collapsible disclosure, and a scrollable body.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+    ],
+};
+//# sourceMappingURL=panel.manifest.js.map

package/dist/manifest/panel.manifest.js.map

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

package/dist/manifest/parallax.manifest.d.ts

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

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

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

package/dist/manifest/parallax.manifest.js

@@ -0,0 +1,124 @@
+const htmlExample = `<xtyle-parallax min-height="24rem" amplitude="140">
+	<img data-speed="0.45" src="/sky.jpg" alt="" />
+	<img data-speed="0.85" data-direction="w" src="/hills.png" alt="" />
+	<div>
+		<h1>Into the valley</h1>
+		<p>A layered banner that drifts as you scroll.</p>
+	</div>
+</xtyle-parallax>`;
+const cursorExample = `<xtyle-parallax min-height="24rem" mode="cursor" amplitude="50">
+	<img data-speed="0.4" src="/sky.jpg" alt="" />
+	<img data-speed="0.9" src="/hills.png" alt="" />
+	<div>
+		<h1>Move your cursor</h1>
+		<p>The layers follow the pointer for depth.</p>
+	</div>
+</xtyle-parallax>`;
+const svelteExample = `<script lang="ts">
+	import { Parallax, Heading, Text } from "@xtyle/svelte";
+</script>
+
+<Parallax minHeight="24rem" amplitude={140}>
+	<img data-speed="0.45" src="/sky.jpg" alt="" />
+	<img data-speed="0.85" data-direction="w" src="/hills.png" alt="" />
+	<div>
+		<Heading level={1}>Into the valley</Heading>
+		<Text>A layered banner that drifts as you scroll.</Text>
+	</div>
+</Parallax>`;
+const astroExample = `---
+import Parallax from "@xtyle/astro/Parallax.astro";
+import Heading from "@xtyle/astro/Heading.astro";
+import Text from "@xtyle/astro/Text.astro";
+---
+
+<Parallax minHeight="24rem" amplitude={140}>
+	<img data-speed="0.45" src="/sky.jpg" alt="" />
+	<img data-speed="0.85" data-direction="w" src="/hills.png" alt="" />
+	<div>
+		<Heading level={1}>Into the valley</Heading>
+		<Text>A layered banner that drifts as you scroll.</Text>
+	</div>
+</Parallax>`;
+export const parallaxManifest = {
+    id: "parallax",
+    name: "Parallax",
+    since: "0.4.0",
+    category: "media",
+    summary: "A layered banner whose layers drift on scroll or follow the cursor, static with no JS or reduced motion.",
+    description: "Parallax stacks its children into one banner: CSS lays every child in the same grid cell, so the layers overlay and the content centers over the background with no JavaScript at all. Give a layer a `data-speed` and the runtime shifts it (the faster the speed, the deeper the drift), while a layer with no `data-speed` (the content) holds still on top. In the default `scroll` mode the shift is scroll-linked as the banner passes through the viewport; set `mode=\"cursor\"` and the layers follow the pointer instead. Each moving layer picks its own travel axis with `data-direction` (a compass token like `n`/`se`, or an angle in degrees clockwise from north), so layers can drift up, sideways, diagonally, or opposite one another; a cursor-mode layer with no direction follows the pointer in full 2D. The whole effect is an enhancement: with JavaScript off the layers sit at rest, and under `prefers-reduced-motion` the runtime leaves them alone, so the banner is always a legible layered composition and never depends on the motion to make sense. `min-height` sizes the band and `amplitude` scales how far the layers travel.",
+    bindings: ["html", "svelte", "astro"],
+    anatomy: [
+        {
+            name: "banner",
+            description: "The clipping band that stacks the layers and centers the content.",
+            selector: "xtyle-parallax",
+            tokens: ["--bg-1", "--radius-lg"],
+        },
+        {
+            name: "content",
+            description: "A layer with no `data-speed`: it holds still on top, padded and centered.",
+            selector: "xtyle-parallax > :not([data-speed])",
+            tokens: ["--space-6"],
+        },
+    ],
+    props: [
+        {
+            name: "min-height",
+            type: "string",
+            default: "22rem",
+            description: "The band's minimum height (any CSS length).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "amplitude",
+            type: "number",
+            default: "80",
+            description: "The maximum travel of a `data-speed=\"1\"` layer, in pixels; each layer scales it by its own speed. A negative value flips the whole banner's direction at once (and composes with a layer's own `data-speed` sign).",
+            bindings: ["html", "svelte", "astro"],
+        },
+        {
+            name: "mode",
+            type: `"scroll" | "cursor"`,
+            default: "scroll",
+            description: "What drives the drift: `scroll` links it to the banner passing through the viewport; `cursor` makes the layers follow the pointer.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    variants: [],
+    sizes: [],
+    states: [],
+    slots: [
+        {
+            name: "default",
+            description: "The layers, back to front. A layer with a `data-speed` (a number) drifts and fills the band, optionally along a `data-direction` axis; a negative `data-speed` reverses just that layer. A layer with no `data-speed` is the still content, centered on top.",
+            bindings: ["html", "svelte", "astro"],
+        },
+    ],
+    consumedTokens: ["--bg-1", "--radius-lg", "--space-6"],
+    composition: [
+        "Put an `Image` or two behind the content with ascending `data-speed`s (`0.3`, `0.6`) for a layered depth effect; leave the content layer without a `data-speed` so it stays put.",
+        "Drop a `Stack` of `Heading` / `Text` / `Button` as the content layer for a hero band that reads as a normal centered banner with no JS.",
+        "Pair with `Section` above and below for a full page-header shape.",
+    ],
+    a11y: [
+        "The banner is a plain container; the meaning lives in the slotted content (a `Heading`, a `Button`), so structure it as you would any hero.",
+        "Give a purely-decorative background layer an empty `alt`, so assistive tech skips it.",
+        "Under `prefers-reduced-motion` the layers never move; the banner stays a static layered composition.",
+    ],
+    examples: [
+        {
+            id: "layered-banner",
+            title: "Layered banner",
+            description: "Two drifting background layers (the hills drift sideways) behind a still content layer.",
+            source: { html: htmlExample, svelte: svelteExample, astro: astroExample },
+        },
+        {
+            id: "cursor-follow",
+            title: "Cursor follow",
+            description: "The same stack in `mode=\"cursor\"`: the layers track the pointer in 2D for a depth effect.",
+            source: { html: cursorExample },
+        },
+    ],
+};
+//# sourceMappingURL=parallax.manifest.js.map

package/dist/manifest/parallax.manifest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"parallax.manifest.js","sourceRoot":"","sources":["../../src/manifest/parallax.manifest.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG;;;;;;;kBAOF,CAAC;AAEnB,MAAM,aAAa,GAAG;;;;;;;kBAOJ,CAAC;AAEnB,MAAM,aAAa,GAAG;;;;;;;;;;;YAWV,CAAC;AAEb,MAAM,YAAY,GAAG;;;;;;;;;;;;;YAaT,CAAC;AAEb,MAAM,CAAC,MAAM,gBAAgB,GAAsB;IAClD,EAAE,EAAE,UAAU;IACd,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,OAAO;IACjB,OAAO,EAAE,0GAA0G;IACnH,WAAW,EACV,umCAAumC;IACxmC,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;IACrC,OAAO,EAAE;QACR;YACC,IAAI,EAAE,QAAQ;YACd,WAAW,EAAE,mEAAmE;YAChF,QAAQ,EAAE,gBAAgB;YAC1B,MAAM,EAAE,CAAC,QAAQ,EAAE,aAAa,CAAC;SACjC;QACD;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,2EAA2E;YACxF,QAAQ,EAAE,qCAAqC;YAC/C,MAAM,EAAE,CAAC,WAAW,CAAC;SACrB;KACD;IACD,KAAK,EAAE;QACN;YACC,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,OAAO;YAChB,WAAW,EAAE,6CAA6C;YAC1D,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,QAAQ;YACd,OAAO,EAAE,IAAI;YACb,WAAW,EACV,sNAAsN;YACvN,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;QACD;YACC,IAAI,EAAE,MAAM;YACZ,IAAI,EAAE,qBAAqB;YAC3B,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,oIAAoI;YACjJ,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,QAAQ,EAAE,EAAE;IACZ,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE;QACN;YACC,IAAI,EAAE,SAAS;YACf,WAAW,EACV,8PAA8P;YAC/P,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,CAAC;SACrC;KACD;IACD,cAAc,EAAE,CAAC,QAAQ,EAAE,aAAa,EAAE,WAAW,CAAC;IACtD,WAAW,EAAE;QACZ,kLAAkL;QAClL,yIAAyI;QACzI,mEAAmE;KACnE;IACD,IAAI,EAAE;QACL,6IAA6I;QAC7I,uFAAuF;QACvF,sGAAsG;KACtG;IACD,QAAQ,EAAE;QACT;YACC,EAAE,EAAE,gBAAgB;YACpB,KAAK,EAAE,gBAAgB;YACvB,WAAW,EAAE,yFAAyF;YACtG,MAAM,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,YAAY,EAAE;SACzE;QACD;YACC,EAAE,EAAE,eAAe;YACnB,KAAK,EAAE,eAAe;YACtB,WAAW,EAAE,6FAA6F;YAC1G,MAAM,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE;SAC/B;KACD;CACD,CAAC"}

package/dist/manifest/pie.manifest.d.ts

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

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

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