@xtyle/core 0.5.0

package/dist/markup/breadcrumb.js

@@ -0,0 +1,53 @@
+import { escapeHtml, escapeAttr } from "./escape.js";
+/** The host-layout rule for a breadcrumb — the one `:host` rule, shared by the element's `styles()` and the SSR declarative shadow root. */
+export const breadcrumbHostCss = ":host { display: block; }";
+export function breadcrumbClass(props) {
+    const tone = props.tone ?? "accent";
+    const size = props.size ?? "md";
+    return ["xtyle-breadcrumb", `xtyle-breadcrumb--${tone}`, size !== "md" && `xtyle-breadcrumb--${size}`]
+        .filter(Boolean)
+        .join(" ");
+}
+function separatorMarkup(separator) {
+    return `<li class="xtyle-breadcrumb__separator" part="separator" aria-hidden="true">${escapeHtml(separator)}</li>`;
+}
+/** One crumb's inner cell: the current crumb is plain text, an `href` crumb is a link, a valued crumb
+ * (no `href`, not current) is a button that fires `select`, and anything else is plain text. */
+function crumbCell(item, isCurrent, label) {
+    const title = item.title ? ` title="${escapeAttr(item.title)}"` : "";
+    if (isCurrent)
+        return `<span class="xtyle-breadcrumb__current" part="item" aria-current="page"${title}>${label}</span>`;
+    if (item.href)
+        return `<a class="xtyle-breadcrumb__link" part="item" href="${escapeAttr(item.href)}"${title}>${label}</a>`;
+    if (item.value !== undefined)
+        return `<button type="button" class="xtyle-breadcrumb__link" part="item" data-value="${escapeAttr(item.value)}"${title}>${label}</button>`;
+    return `<span class="xtyle-breadcrumb__current" part="item"${title}>${label}</span>`;
+}
+function inner(props) {
+    const items = props.items ?? [];
+    if (items.length === 0) {
+        return `<ol class="xtyle-breadcrumb__list" part="list"><slot></slot></ol>`;
+    }
+    const separator = props.separator ?? "/";
+    const lastIndex = items.length - 1;
+    const rows = items.map((item, index) => {
+        const isCurrent = item.current === true || (item.current === undefined && index === lastIndex);
+        const label = escapeHtml(item.label ?? "");
+        const cell = crumbCell(item, isCurrent, label);
+        const row = `<li class="xtyle-breadcrumb__item" part="item-wrap">${cell}</li>`;
+        return index < lastIndex ? `${row}${separatorMarkup(separator)}` : row;
+    });
+    return `<ol class="xtyle-breadcrumb__list" part="list">${rows.join("")}</ol>`;
+}
+/**
+ * The single source of a breadcrumb's shadow markup. The custom element renders it
+ * into its shadow root at runtime; the `@xtyle/astro` binding emits the same string
+ * into a declarative shadow root at build. Data-driven: pass the parsed `items`
+ * array and the function maps over it exactly as the element does. Pure and
+ * DOM-free, so it is safe to import in any environment (SSR included).
+ */
+export function breadcrumbMarkup(props) {
+    const label = props.label ?? "Breadcrumb";
+    return `<nav part="breadcrumb" class="${breadcrumbClass(props)}" aria-label="${escapeAttr(label)}">${inner(props)}</nav>`;
+}
+//# sourceMappingURL=breadcrumb.js.map

package/dist/markup/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../src/markup/breadcrumb.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAwBrD,4IAA4I;AAC5I,MAAM,CAAC,MAAM,iBAAiB,GAAG,2BAA2B,CAAC;AAE7D,MAAM,UAAU,eAAe,CAAC,KAA4B;IAC3D,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC;IACpC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC;IAChC,OAAO,CAAC,kBAAkB,EAAE,qBAAqB,IAAI,EAAE,EAAE,IAAI,KAAK,IAAI,IAAI,qBAAqB,IAAI,EAAE,CAAC;SACpG,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;AACb,CAAC;AAED,SAAS,eAAe,CAAC,SAAiB;IACzC,OAAO,+EAA+E,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC;AACpH,CAAC;AAED;gGACgG;AAChG,SAAS,SAAS,CAAC,IAAoB,EAAE,SAAkB,EAAE,KAAa;IACzE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACrE,IAAI,SAAS;QAAE,OAAO,0EAA0E,KAAK,IAAI,KAAK,SAAS,CAAC;IACxH,IAAI,IAAI,CAAC,IAAI;QAAE,OAAO,uDAAuD,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,KAAK,MAAM,CAAC;IAC3H,IAAI,IAAI,CAAC,KAAK,KAAK,SAAS;QAC3B,OAAO,gFAAgF,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,KAAK,WAAW,CAAC;IAC5I,OAAO,sDAAsD,KAAK,IAAI,KAAK,SAAS,CAAC;AACtF,CAAC;AAED,SAAS,KAAK,CAAC,KAA4B;IAC1C,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IAChC,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,mEAAmE,CAAC;IAC5E,CAAC;IACD,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,GAAG,CAAC;IACzC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IACnC,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QACtC,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,KAAK,KAAK,SAAS,CAAC,CAAC;QAC/F,MAAM,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QAC3C,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;QAC/C,MAAM,GAAG,GAAG,uDAAuD,IAAI,OAAO,CAAC;QAC/E,OAAO,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,eAAe,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IACxE,CAAC,CAAC,CAAC;IACH,OAAO,kDAAkD,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC;AAC/E,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC5D,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,YAAY,CAAC;IAC1C,OAAO,iCAAiC,eAAe,CAAC,KAAK,CAAC,iBAAiB,UAAU,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;AAC3H,CAAC"}

package/dist/markup/button.d.ts

@@ -0,0 +1,5 @@
+import type { Size } from "../vocab.js";
+export type ButtonSize = Size | "xs";
+/** The host-layout rules for a button — the `:host` rules, shared by the element's scaffold and the SSR declarative shadow root. */
+export declare const buttonHostCss = ":host { display: inline-flex; } :host([block]) { display: flex; }";
+//# sourceMappingURL=button.d.ts.map

package/dist/markup/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/markup/button.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAC;AAErC,oIAAoI;AACpI,eAAO,MAAM,aAAa,sEAAsE,CAAC"}

package/dist/markup/button.js

@@ -0,0 +1,3 @@
+/** The host-layout rules for a button — the `:host` rules, shared by the element's scaffold and the SSR declarative shadow root. */
+export const buttonHostCss = `:host { display: inline-flex; } :host([block]) { display: flex; }`;
+//# sourceMappingURL=button.js.map

package/dist/markup/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../src/markup/button.ts"],"names":[],"mappings":"AAIA,oIAAoI;AACpI,MAAM,CAAC,MAAM,aAAa,GAAG,mEAAmE,CAAC"}

package/dist/markup/card-link.d.ts

@@ -0,0 +1,11 @@
+export interface CardLinkMarkupProps {
+    href?: string | null;
+    target?: string | null;
+    rel?: string | null;
+    interactive?: boolean;
+    overlay?: boolean;
+    compact?: boolean;
+}
+/** The host-layout rule for a card-link — the one `:host` rule, shared by the element's scaffold and the SSR declarative shadow root. */
+export declare const cardLinkHostCss = ":host { display: block; }";
+//# sourceMappingURL=card-link.d.ts.map

package/dist/markup/card-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-link.d.ts","sourceRoot":"","sources":["../../src/markup/card-link.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,mBAAmB;IACnC,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,yIAAyI;AACzI,eAAO,MAAM,eAAe,8BAA8B,CAAC"}

package/dist/markup/card-link.js

@@ -0,0 +1,3 @@
+/** The host-layout rule for a card-link — the one `:host` rule, shared by the element's scaffold and the SSR declarative shadow root. */
+export const cardLinkHostCss = ":host { display: block; }";
+//# sourceMappingURL=card-link.js.map

package/dist/markup/card-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-link.js","sourceRoot":"","sources":["../../src/markup/card-link.ts"],"names":[],"mappings":"AASA,yIAAyI;AACzI,MAAM,CAAC,MAAM,eAAe,GAAG,2BAA2B,CAAC"}

package/dist/markup/card.d.ts

@@ -0,0 +1,3 @@
+/** The host-layout rule for a card — the one `:host` rule, shared by the element's scaffold and the SSR declarative shadow root. */
+export declare const cardHostCss = ":host { display: block; }";
+//# sourceMappingURL=card.d.ts.map

package/dist/markup/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../src/markup/card.ts"],"names":[],"mappings":"AAAA,oIAAoI;AACpI,eAAO,MAAM,WAAW,8BAA8B,CAAC"}

package/dist/markup/card.js

@@ -0,0 +1,3 @@
+/** The host-layout rule for a card — the one `:host` rule, shared by the element's scaffold and the SSR declarative shadow root. */
+export const cardHostCss = ":host { display: block; }";
+//# sourceMappingURL=card.js.map

package/dist/markup/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../src/markup/card.ts"],"names":[],"mappings":"AAAA,oIAAoI;AACpI,MAAM,CAAC,MAAM,WAAW,GAAG,2BAA2B,CAAC"}

package/dist/markup/checkbox.d.ts

@@ -0,0 +1,24 @@
+/** The host-layout rule for a checkbox — the one `:host` rule, shared by the element's scaffold and the SSR declarative shadow root. */
+export declare const checkboxHostCss = ":host { display: inline-block; }";
+/** The host-layout rule for a checkbox group — shared by the element's `styles()` and the SSR declarative shadow root. */
+export declare const checkboxGroupHostCss = ":host { display: block; }";
+export interface CheckboxGroupMarkupProps {
+    label?: string | null;
+    labelledby?: string | null;
+    tone?: string;
+    size?: string;
+    disabled?: boolean;
+    /** Heading state at render time; the element re-derives it from its items on hydration. */
+    checked?: boolean;
+    indeterminate?: boolean;
+    labelId: string;
+}
+export declare function checkboxGroupHeadingClass(props: CheckboxGroupMarkupProps): string;
+/**
+ * The single source of a checkbox group's shadow markup: a tri-state "select all" heading
+ * checkbox the group owns, followed by a slot for its item checkboxes. The custom element
+ * renders it at runtime; the `@xtyle/astro` binding emits the same string into a declarative
+ * shadow root at build. Pure and DOM-free.
+ */
+export declare function checkboxGroupMarkup(props: CheckboxGroupMarkupProps): string;
+//# sourceMappingURL=checkbox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/markup/checkbox.ts"],"names":[],"mappings":"AAAA,wIAAwI;AACxI,eAAO,MAAM,eAAe,qCAAqC,CAAC;AAElE,0HAA0H;AAC1H,eAAO,MAAM,oBAAoB,8BAA8B,CAAC;AAEhE,MAAM,WAAW,wBAAwB;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2FAA2F;IAC3F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,MAAM,CAAC;CAChB;AASD,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,wBAAwB,GAAG,MAAM,CAYjF;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,MAAM,CAiB3E"}

package/dist/markup/checkbox.js

@@ -0,0 +1,48 @@
+/** The host-layout rule for a checkbox — the one `:host` rule, shared by the element's scaffold and the SSR declarative shadow root. */
+export const checkboxHostCss = ":host { display: inline-block; }";
+/** The host-layout rule for a checkbox group — shared by the element's `styles()` and the SSR declarative shadow root. */
+export const checkboxGroupHostCss = `:host { display: block; }`;
+const GROUP_INDICATOR = `<span class="xtyle-checkbox__indicator" part="indicator" aria-hidden="true">` +
+    `<svg viewBox="0 0 16 16" width="16" height="16">` +
+    `<path class="xtyle-checkbox__check" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m4 8 3 3 5-6" />` +
+    `<path class="xtyle-checkbox__dash" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" d="M4 8h8" />` +
+    `</svg></span>`;
+export function checkboxGroupHeadingClass(props) {
+    const tone = props.tone ?? "accent";
+    const size = props.size ?? "md";
+    return [
+        "xtyle-checkbox",
+        "xtyle-checkbox-group__heading",
+        `xtyle-checkbox--${tone}`,
+        size !== "md" && `xtyle-checkbox--${size}`,
+        props.indeterminate && "xtyle-checkbox--indeterminate",
+    ]
+        .filter(Boolean)
+        .join(" ");
+}
+/**
+ * The single source of a checkbox group's shadow markup: a tri-state "select all" heading
+ * checkbox the group owns, followed by a slot for its item checkboxes. The custom element
+ * renders it at runtime; the `@xtyle/astro` binding emits the same string into a declarative
+ * shadow root at build. Pure and DOM-free.
+ */
+export function checkboxGroupMarkup(props) {
+    const label = props.label ?? "";
+    const checkedAttr = props.checked ? " checked" : "";
+    const disabledAttr = props.disabled ? " disabled" : "";
+    const heading = `<label class="${checkboxGroupHeadingClass(props)}">` +
+        `<span class="xtyle-checkbox__box" part="box">` +
+        `<input part="control" class="xtyle-checkbox__control" type="checkbox"${checkedAttr}${disabledAttr} />` +
+        GROUP_INDICATOR +
+        `</span>` +
+        `<span class="xtyle-checkbox__label" part="label" id="${props.labelId}">${label}</span>` +
+        `</label>`;
+    let nameAttr = "";
+    if (props.labelledby)
+        nameAttr = ` aria-labelledby="${props.labelledby}"`;
+    else if (label)
+        nameAttr = ` aria-labelledby="${props.labelId}"`;
+    const ariaDisabled = props.disabled ? ` aria-disabled="true"` : "";
+    return `<div role="group" class="xtyle-checkbox-group"${nameAttr}${ariaDisabled}>${heading}<div class="xtyle-checkbox-group__items" part="items"><slot></slot></div></div>`;
+}
+//# sourceMappingURL=checkbox.js.map

package/dist/markup/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../src/markup/checkbox.ts"],"names":[],"mappings":"AAAA,wIAAwI;AACxI,MAAM,CAAC,MAAM,eAAe,GAAG,kCAAkC,CAAC;AAElE,0HAA0H;AAC1H,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAA2B,CAAC;AAchE,MAAM,eAAe,GACpB,8EAA8E;IAC9E,kDAAkD;IAClD,2JAA2J;IAC3J,4HAA4H;IAC5H,eAAe,CAAC;AAEjB,MAAM,UAAU,yBAAyB,CAAC,KAA+B;IACxE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,QAAQ,CAAC;IACpC,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,IAAI,IAAI,CAAC;IAChC,OAAO;QACN,gBAAgB;QAChB,+BAA+B;QAC/B,mBAAmB,IAAI,EAAE;QACzB,IAAI,KAAK,IAAI,IAAI,mBAAmB,IAAI,EAAE;QAC1C,KAAK,CAAC,aAAa,IAAI,+BAA+B;KACtD;SACC,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;AACb,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IAClE,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;IAChC,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACpD,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IACvD,MAAM,OAAO,GACZ,iBAAiB,yBAAyB,CAAC,KAAK,CAAC,IAAI;QACrD,+CAA+C;QAC/C,wEAAwE,WAAW,GAAG,YAAY,KAAK;QACvG,eAAe;QACf,SAAS;QACT,wDAAwD,KAAK,CAAC,OAAO,KAAK,KAAK,SAAS;QACxF,UAAU,CAAC;IACZ,IAAI,QAAQ,GAAG,EAAE,CAAC;IAClB,IAAI,KAAK,CAAC,UAAU;QAAE,QAAQ,GAAG,qBAAqB,KAAK,CAAC,UAAU,GAAG,CAAC;SACrE,IAAI,KAAK;QAAE,QAAQ,GAAG,qBAAqB,KAAK,CAAC,OAAO,GAAG,CAAC;IACjE,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnE,OAAO,iDAAiD,QAAQ,GAAG,YAAY,IAAI,OAAO,iFAAiF,CAAC;AAC7K,CAAC"}

package/dist/markup/cluster.d.ts

@@ -0,0 +1,3 @@
+/** The host-layout rules for a cluster — the `:host` rules, shared by the element's scaffold and the SSR declarative shadow root. */
+export declare const clusterHostCss = ":host { display: block; } :host([inline]) { display: inline-block; }";
+//# sourceMappingURL=cluster.d.ts.map

package/dist/markup/cluster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cluster.d.ts","sourceRoot":"","sources":["../../src/markup/cluster.ts"],"names":[],"mappings":"AAAA,qIAAqI;AACrI,eAAO,MAAM,cAAc,yEAAyE,CAAC"}

package/dist/markup/cluster.js

@@ -0,0 +1,3 @@
+/** The host-layout rules for a cluster — the `:host` rules, shared by the element's scaffold and the SSR declarative shadow root. */
+export const clusterHostCss = ":host { display: block; } :host([inline]) { display: inline-block; }";
+//# sourceMappingURL=cluster.js.map

package/dist/markup/cluster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cluster.js","sourceRoot":"","sources":["../../src/markup/cluster.ts"],"names":[],"mappings":"AAAA,qIAAqI;AACrI,MAAM,CAAC,MAAM,cAAc,GAAG,sEAAsE,CAAC"}

package/dist/markup/code.d.ts

@@ -0,0 +1,50 @@
+export interface CodeMarkupProps {
+    /** The canonical language id the markup was tokenized for, or `null` for the plain fallback. */
+    language?: string | null;
+    /** Pre-rendered inner HTML: `.token.*` spans when highlighted, escaped text for the plain fallback. */
+    html: string;
+}
+/**
+ * The host-layout rule for a code block — `block` so it owns its line, like a `<pre>`, and a
+ * positioning context so the copy button can anchor to the block's top-right corner.
+ */
+export declare const codeHostCss = ":host { display: block; position: relative; }";
+export declare function codeClass(props: CodeMarkupProps): string;
+/**
+ * The single source of a code block's shadow markup. The custom element renders it
+ * into its shadow root at runtime; the `@xtyle/astro` binding emits the same string
+ * into a declarative shadow root at build (pre-tokenized). The `language-*` class on
+ * both `pre` and `code` is what the Prism-mapping CSS keys its container rules off,
+ * so the `--code-*` colors apply. `html` is already escaped/tokenized HTML — never
+ * raw user text — so it is interpolated verbatim. Pure and DOM-free, safe to import
+ * in any environment (SSR included).
+ */
+export declare function codeMarkup(props: CodeMarkupProps): string;
+/** Escape raw source for the plain-but-themed first paint, before any grammar resolves. */
+export declare function plainCodeHtml(code: string): string;
+/**
+ * Wrap each logical line of already-tokenized (or escaped-plain) code HTML in a
+ * `.xtyle-code-line` row so a CSS counter can number it and a `highlight` set can tint
+ * chosen lines. Tag-aware: a token span that straddles a newline (a block comment, a
+ * multi-line string) is closed at the line end and re-opened on the next line, so each
+ * row's markup is well-formed. The line's content is nested in a `__text` cell — the flex
+ * sibling of the counter gutter — so it wraps cleanly under soft-wrap while the gutter
+ * stays put. Any 1-based line number in `highlight` gets a `data-line-highlight` attribute
+ * the CSS tints. A single trailing newline is dropped so a file ending in `\n` reads as N
+ * lines, not N+1; an empty line keeps a zero-width space so its row still has height. Pure
+ * and DOM-free — safe on the SSR path. `html` is already escaped/tokenized, never raw user text.
+ */
+export declare function splitCodeLines(html: string, highlight?: ReadonlySet<number>): {
+    html: string;
+    lines: number;
+};
+/** The gutter width that fits a block's largest line number, with a little breathing room. */
+export declare function codeGutterWidth(lines: number): string;
+/**
+ * Parse a line-highlight spec (`"2"`, `"2,4"`, `"4-6"`, `"1,3-5,8"`) into a set of 1-based
+ * line numbers. Whitespace is ignored, a reversed range (`6-4`) reads either way, and any
+ * non-numeric or zero/negative entry is skipped rather than thrown — a hand-typed spec
+ * degrades to whatever lines it could name. Pure and DOM-free.
+ */
+export declare function parseLineSpec(spec: string): Set<number>;
+//# sourceMappingURL=code.d.ts.map

package/dist/markup/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../src/markup/code.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC/B,gGAAgG;IAChG,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,uGAAuG;IACvG,IAAI,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,kDAAkD,CAAC;AAE3E,wBAAgB,SAAS,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAGxD;AAED;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAOzD;AAED,2FAA2F;AAC3F,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAElD;AAOD;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CA8B7G;AAED,8FAA8F;AAC9F,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAErD;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAgBvD"}

package/dist/markup/code.js

@@ -0,0 +1,112 @@
+import { escapeHtml } from "./escape.js";
+/**
+ * The host-layout rule for a code block — `block` so it owns its line, like a `<pre>`, and a
+ * positioning context so the copy button can anchor to the block's top-right corner.
+ */
+export const codeHostCss = ":host { display: block; position: relative; }";
+export function codeClass(props) {
+    const lang = props.language ?? "none";
+    return `language-${lang}`;
+}
+/**
+ * The single source of a code block's shadow markup. The custom element renders it
+ * into its shadow root at runtime; the `@xtyle/astro` binding emits the same string
+ * into a declarative shadow root at build (pre-tokenized). The `language-*` class on
+ * both `pre` and `code` is what the Prism-mapping CSS keys its container rules off,
+ * so the `--code-*` colors apply. `html` is already escaped/tokenized HTML — never
+ * raw user text — so it is interpolated verbatim. Pure and DOM-free, safe to import
+ * in any environment (SSR included).
+ */
+export function codeMarkup(props) {
+    const cls = codeClass(props);
+    return (`<pre part="pre" class="xtyle-code ${cls}"><code part="code" class="${cls}">${props.html}</code></pre>` +
+        `<button part="copy" class="xtyle-code-copy" type="button" data-copy aria-label="Copy code" hidden>` +
+        `<span class="xtyle-code-copy-label" data-copy-label>Copy</span></button>`);
+}
+/** Escape raw source for the plain-but-themed first paint, before any grammar resolves. */
+export function plainCodeHtml(code) {
+    return escapeHtml(code);
+}
+function closeTagFor(openTag) {
+    const name = /^<\s*([a-z0-9-]+)/i.exec(openTag)?.[1] ?? "span";
+    return `</${name}>`;
+}
+/**
+ * Wrap each logical line of already-tokenized (or escaped-plain) code HTML in a
+ * `.xtyle-code-line` row so a CSS counter can number it and a `highlight` set can tint
+ * chosen lines. Tag-aware: a token span that straddles a newline (a block comment, a
+ * multi-line string) is closed at the line end and re-opened on the next line, so each
+ * row's markup is well-formed. The line's content is nested in a `__text` cell — the flex
+ * sibling of the counter gutter — so it wraps cleanly under soft-wrap while the gutter
+ * stays put. Any 1-based line number in `highlight` gets a `data-line-highlight` attribute
+ * the CSS tints. A single trailing newline is dropped so a file ending in `\n` reads as N
+ * lines, not N+1; an empty line keeps a zero-width space so its row still has height. Pure
+ * and DOM-free — safe on the SSR path. `html` is already escaped/tokenized, never raw user text.
+ */
+export function splitCodeLines(html, highlight) {
+    const open = [];
+    const rows = [];
+    let row = "";
+    for (const part of html.split(/(<[^>]+>)/g)) {
+        if (!part)
+            continue;
+        if (part[0] === "<") {
+            row += part;
+            if (part[1] === "/")
+                open.pop();
+            else if (part[part.length - 2] !== "/")
+                open.push(part);
+            continue;
+        }
+        const segments = part.split("\n");
+        for (let i = 0; i < segments.length; i++) {
+            row += segments[i];
+            if (i < segments.length - 1) {
+                row += open.map(closeTagFor).reverse().join("");
+                rows.push(row);
+                row = open.join("");
+            }
+        }
+    }
+    rows.push(row);
+    if (rows.length > 1 && rows[rows.length - 1] === "")
+        rows.pop();
+    return {
+        html: rows
+            .map((r, i) => `<span class="xtyle-code-line"${highlight?.has(i + 1) ? " data-line-highlight" : ""}><span class="xtyle-code-line__text">${r || "\u200b"}</span></span>`)
+            .join(""),
+        lines: rows.length,
+    };
+}
+/** The gutter width that fits a block's largest line number, with a little breathing room. */
+export function codeGutterWidth(lines) {
+    return `${Math.max(2, String(lines).length) + 0.5}ch`;
+}
+/**
+ * Parse a line-highlight spec (`"2"`, `"2,4"`, `"4-6"`, `"1,3-5,8"`) into a set of 1-based
+ * line numbers. Whitespace is ignored, a reversed range (`6-4`) reads either way, and any
+ * non-numeric or zero/negative entry is skipped rather than thrown — a hand-typed spec
+ * degrades to whatever lines it could name. Pure and DOM-free.
+ */
+export function parseLineSpec(spec) {
+    const lines = new Set();
+    for (const part of spec.split(",")) {
+        const trimmed = part.trim();
+        if (!trimmed)
+            continue;
+        const range = /^(\d+)\s*-\s*(\d+)$/.exec(trimmed);
+        if (range) {
+            const lo = Math.min(Number(range[1]), Number(range[2]));
+            const hi = Math.max(Number(range[1]), Number(range[2]));
+            for (let n = lo; n <= hi; n++)
+                if (n > 0)
+                    lines.add(n);
+            continue;
+        }
+        const single = Number(trimmed);
+        if (Number.isInteger(single) && single > 0)
+            lines.add(single);
+    }
+    return lines;
+}
+//# sourceMappingURL=code.js.map

package/dist/markup/code.js.map

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

package/dist/markup/color-picker.d.ts

@@ -0,0 +1,64 @@
+import { type ChannelDef, type ChannelModel, type ColorFormat, type HarmonyScheme } from "../convert.js";
+/** The chroma axis cap and internal canvas resolution for the OKLCH perceptual plane. */
+export declare const PLANE_MAX_C = 0.4;
+export declare const PLANE_W = 160;
+export declare const PLANE_H = 120;
+/** Out-of-gamut samples desaturate toward their own luma (greyed, not darkened) with a contour at the edge. */
+export declare const OUT_OF_GAMUT_DESAT = 0.8;
+export declare const PLANE_EDGE_SHADE = 0.45;
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+export declare function clamp01(n: number): number;
+/** Render a channel value to the precision its step implies (0.001 → 3 dp, 1 → integer). */
+export declare function formatChannelValue(value: number, def: ChannelDef): string;
+export declare function namedSnapLabel(name: string): {
+    text: string;
+    aria: string;
+};
+export declare function channelSliders(model: ChannelModel, hsv: Hsv, alpha: number, disabled: boolean): string;
+export interface ColorPickerMarkupProps {
+    /** The live HSV state (derived from the `value` attribute / color string). */
+    hsv: Hsv;
+    /** The live alpha (0–1); only surfaced when `alphaEnabled`. */
+    alpha: number;
+    /** The resolved readout format (already clamped to the `modes` set). */
+    format: ColorFormat;
+    /** The resolved channel-slider model, or null when channels are off. */
+    channelModel: ChannelModel | null;
+    /** The resolved snap targets (web-safe / named), empty when snapping is off. */
+    snapTargets: string[];
+    /** The parsed preset swatch strings (the raw `swatches` entries). */
+    swatches: string[];
+    /** Whether the OKLCH perceptual plane is shown. */
+    planeEnabled: boolean;
+    /** Whether the picker collapses to a trigger button + popover. */
+    triggerEnabled: boolean;
+    /** The active harmony scheme, or null. */
+    harmonyScheme: HarmonyScheme | null;
+    /** Whether the alpha track is shown. */
+    alphaEnabled: boolean;
+    /** The contrast comparison color string, or null. */
+    contrastAgainst: string | null;
+    disabled: boolean;
+    label: string | null;
+    labelledby: string | null;
+    /** Stable id seed for the label, popover, and `aria` wiring. */
+    elementId: string;
+    /** Whether the EyeDropper API is available (the element gates the button on it). */
+    hasEyeDropper: boolean;
+}
+/**
+ * The single source of a color picker's shadow markup. The custom element renders it into
+ * its shadow root at runtime; the `@xtyle/astro` binding emits the same string into a
+ * declarative shadow root at build. Both paths render one identical control from one
+ * source — no per-binding reimplementation. Pure and DOM-free, so it is safe to
+ * import in any environment (SSR included). The handle positions and live readouts are
+ * painted in place by the element after hydration; the SSR shadow is the static fallback.
+ */
+export declare function colorPickerMarkup(props: ColorPickerMarkupProps): string;
+/** The host-layout rule for a color picker — the one `:host` rule, shared by the element's `styles()` and the SSR declarative shadow root. */
+export declare const colorPickerHostCss = ":host { display: inline-block; }";
+//# sourceMappingURL=color-picker.d.ts.map

package/dist/markup/color-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.ts","sourceRoot":"","sources":["../../src/markup/color-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAQN,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,MAAM,eAAe,CAAC;AAEvB,yFAAyF;AACzF,eAAO,MAAM,WAAW,MAAM,CAAC;AAC/B,eAAO,MAAM,OAAO,MAAM,CAAC;AAC3B,eAAO,MAAM,OAAO,MAAM,CAAC;AAC3B,+GAA+G;AAC/G,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,MAAM,WAAW,GAAG;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACV;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAEzC;AAED,4FAA4F;AAC5F,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,GAAG,MAAM,CAGzE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAE3E;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,GAAG,MAAM,CAUtG;AAED,MAAM,WAAW,sBAAsB;IACtC,8EAA8E;IAC9E,GAAG,EAAE,GAAG,CAAC;IACT,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,MAAM,EAAE,WAAW,CAAC;IACpB,wEAAwE;IACxE,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,gFAAgF;IAChF,WAAW,EAAE,MAAM,EAAE,CAAC;IACtB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,mDAAmD;IACnD,YAAY,EAAE,OAAO,CAAC;IACtB,kEAAkE;IAClE,cAAc,EAAE,OAAO,CAAC;IACxB,0CAA0C;IAC1C,aAAa,EAAE,aAAa,GAAG,IAAI,CAAC;IACpC,wCAAwC;IACxC,YAAY,EAAE,OAAO,CAAC;IACtB,qDAAqD;IACrD,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,gEAAgE;IAChE,SAAS,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,aAAa,EAAE,OAAO,CAAC;CACvB;AAOD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,MAAM,CAuEvE;AAED,8IAA8I;AAC9I,eAAO,MAAM,kBAAkB,qCAAqC,CAAC"}

package/dist/markup/color-picker.js

@@ -0,0 +1,112 @@
+import { channelsOf, colorToChannels, formatColor, hsvToRgb, nearestNamedColor, oklchToDisplay, parseColor, } from "../convert.js";
+/** The chroma axis cap and internal canvas resolution for the OKLCH perceptual plane. */
+export const PLANE_MAX_C = 0.4;
+export const PLANE_W = 160;
+export const PLANE_H = 120;
+/** Out-of-gamut samples desaturate toward their own luma (greyed, not darkened) with a contour at the edge. */
+export const OUT_OF_GAMUT_DESAT = 0.8;
+export const PLANE_EDGE_SHADE = 0.45;
+export function clamp01(n) {
+    return Math.min(1, Math.max(0, n));
+}
+/** Render a channel value to the precision its step implies (0.001 → 3 dp, 1 → integer). */
+export function formatChannelValue(value, def) {
+    const decimals = def.step >= 1 ? 0 : Math.min(3, Math.ceil(-Math.log10(def.step)));
+    return `${value.toFixed(decimals)}${def.unit ?? ""}`;
+}
+export function namedSnapLabel(name) {
+    return { text: `≈ ${name}`, aria: `Snap to the nearest named color: ${name}` };
+}
+export function channelSliders(model, hsv, alpha, disabled) {
+    const values = colorToChannels(hsvToRgb({ ...hsv, alpha }), model);
+    return channelsOf(model)
+        .map((def, i) => {
+        const value = values[i] ?? def.min;
+        const name = `${def.label}${def.unit ? ` (${def.unit})` : ""}`;
+        const formatted = formatChannelValue(value, def);
+        return `<label class="xtyle-color-picker__channel" part="channel"><span class="xtyle-color-picker__channel-label" aria-hidden="true">${def.label}</span><input class="xtyle-color-picker__channel-input" part="channel-input" type="range" min="${def.min}" max="${def.max}" step="${def.step}" value="${value}" aria-label="${name}" aria-valuetext="${formatted}"${disabled ? " disabled" : ""} /><span class="xtyle-color-picker__channel-value" part="channel-value" aria-hidden="true">${formatted}</span></label>`;
+    })
+        .join("");
+}
+/** The current alpha respecting the opt-in: 1 unless alpha is enabled. */
+function currentAlpha(props) {
+    return props.alphaEnabled ? props.alpha : 1;
+}
+/**
+ * The single source of a color picker's shadow markup. The custom element renders it into
+ * its shadow root at runtime; the `@xtyle/astro` binding emits the same string into a
+ * declarative shadow root at build. Both paths render one identical control from one
+ * source — no per-binding reimplementation. Pure and DOM-free, so it is safe to
+ * import in any environment (SSR included). The handle positions and live readouts are
+ * painted in place by the element after hydration; the SSR shadow is the static fallback.
+ */
+export function colorPickerMarkup(props) {
+    const labelText = props.label;
+    const labelledby = props.labelledby;
+    const labelId = `${props.elementId}-label`;
+    const groupName = labelledby
+        ? ` aria-labelledby="${labelledby}"`
+        : labelText
+            ? ` aria-labelledby="${labelId}"`
+            : "";
+    const tabindex = props.disabled ? "-1" : "0";
+    const disabledClass = props.disabled ? " xtyle-color-picker--disabled" : "";
+    const disabledAttr = props.disabled ? " disabled" : "";
+    const label = labelText
+        ? `<span class="xtyle-color-picker__label" part="label" id="${labelId}">${labelText}</span>`
+        : "";
+    const eyedropper = props.hasEyeDropper
+        ? `<button class="xtyle-color-picker__eyedropper" part="eyedropper" type="button" aria-label="Pick a color from the screen"${disabledAttr}><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m18 3 3 3-9 9-4 1 1-4 9-9ZM5 21l3-3" /></svg></button>`
+        : "";
+    const currentHex = formatColor(hsvToRgb({ ...props.hsv, alpha: props.alpha }), "hex");
+    const swatches = props.swatches
+        .map((entry) => {
+        const parsed = parseColor(entry);
+        return parsed ? { entry, hex: formatColor(parsed, "hex") } : null;
+    })
+        .filter((s) => s !== null);
+    const presets = swatches.length
+        ? `<div class="xtyle-color-picker__presets" part="presets" role="group" aria-label="Preset colors">${swatches
+            .map(({ entry, hex }) => `<button class="xtyle-color-picker__preset" part="preset" type="button" data-color="${entry}" data-hex="${hex}" style="--cp-chip: ${hex}" aria-label="${entry}" aria-pressed="${String(hex.toLowerCase() === currentHex.toLowerCase())}"${disabledAttr}></button>`)
+            .join("")}</div>`
+        : "";
+    const contrastPanel = props.contrastAgainst && parseColor(props.contrastAgainst)
+        ? `<div class="xtyle-color-picker__contrast" part="contrast"><div class="xtyle-color-picker__contrast-sample" aria-hidden="true">Aa</div><div class="xtyle-color-picker__contrast-readout"><span class="xtyle-color-picker__contrast-ratio">1.00</span><span class="xtyle-color-picker__contrast-badges"><span class="xtyle-color-picker__contrast-badge" data-level="aa">AA</span><span class="xtyle-color-picker__contrast-badge" data-level="aaa">AAA</span></span></div></div>`
+        : "";
+    const alphaTrack = props.alphaEnabled
+        ? `<div class="xtyle-color-picker__alpha" part="alpha"><div class="xtyle-color-picker__alpha-handle" part="alpha-handle" role="slider" tabindex="${tabindex}" aria-label="Opacity" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"></div></div>`
+        : "";
+    const harmonyRow = props.harmonyScheme
+        ? `<div class="xtyle-color-picker__presets xtyle-color-picker__harmony" part="harmony" role="group" aria-label="${props.harmonyScheme} harmony"></div>`
+        : "";
+    const channelModel = props.channelModel;
+    const channelRows = channelModel
+        ? `<div class="xtyle-color-picker__channels" part="channels" role="group" aria-label="${channelModel.toUpperCase()} channels">${channelSliders(channelModel, props.hsv, currentAlpha(props), props.disabled)}</div>`
+        : "";
+    const planeBlock = props.planeEnabled
+        ? `<div class="xtyle-color-picker__plane-field" part="plane-field"><div class="xtyle-color-picker__plane-wrap" part="plane-wrap"><canvas class="xtyle-color-picker__plane" part="plane" width="${PLANE_W}" height="${PLANE_H}"></canvas><div class="xtyle-color-picker__plane-handle" part="plane-handle" role="slider" tabindex="${tabindex}" aria-label="OKLCH lightness and chroma" aria-valuetext="" aria-valuemin="0" aria-valuemax="100"></div></div><div class="xtyle-color-picker__plane-readout" part="plane-readout" aria-hidden="true"></div></div>`
+        : "";
+    const snapTargets = props.snapTargets;
+    const snapsRow = snapTargets.length
+        ? `<div class="xtyle-color-picker__snaps" part="snaps" role="group" aria-label="Snap to palette">${snapTargets
+            .map((target) => {
+            if (target === "named") {
+                const labels = namedSnapLabel(nearestNamedColor(hsvToRgb({ ...props.hsv, alpha: currentAlpha(props) })).name);
+                return `<button class="xtyle-color-picker__snap xtyle-color-picker__snap--named" part="snap" type="button" data-snap="named" aria-label="${labels.aria}"${disabledAttr}>${labels.text}</button>`;
+            }
+            return `<button class="xtyle-color-picker__snap" part="snap" type="button" data-snap="web-safe" aria-label="Snap to the nearest web-safe color"${disabledAttr}>Web-safe</button>`;
+        })
+            .join("")}</div>`
+        : "";
+    const body = `<div class="xtyle-color-picker__area" part="area"><div class="xtyle-color-picker__sv-handle" part="sv-handle" role="slider" tabindex="${tabindex}" aria-label="Saturation and brightness" aria-valuetext="" aria-valuemin="0" aria-valuemax="100"></div></div>${planeBlock}<div class="xtyle-color-picker__controls" part="controls"><div class="xtyle-color-picker__swatch" part="swatch" aria-hidden="true"></div><div class="xtyle-color-picker__sliders"><div class="xtyle-color-picker__hue" part="hue"><div class="xtyle-color-picker__hue-handle" part="hue-handle" role="slider" tabindex="${tabindex}" aria-label="Hue" aria-valuemin="0" aria-valuemax="360" aria-valuenow="0"></div></div>${alphaTrack}<div class="xtyle-color-picker__field" part="field"><button class="xtyle-color-picker__format" part="format" type="button" aria-label="Cycle color format"${disabledAttr}>${props.format.toUpperCase()}</button><input class="xtyle-color-picker__value" part="value" type="text" inputmode="text" spellcheck="false" autocomplete="off" aria-label="Color value"${disabledAttr} />${eyedropper}</div></div></div>${channelRows}${snapsRow}${presets}${harmonyRow}${contrastPanel}`;
+    const triggerBadge = props.triggerEnabled && props.contrastAgainst && parseColor(props.contrastAgainst)
+        ? `<span class="xtyle-color-picker__trigger-badge" part="trigger-badge" data-level="" aria-hidden="true"></span>`
+        : "";
+    const shell = props.triggerEnabled
+        ? `<button class="xtyle-color-picker__trigger" part="trigger" type="button" popovertarget="${props.elementId}-popover" aria-label="Open color picker"${disabledAttr}><svg class="xtyle-color-picker__trigger-caret" viewBox="0 0 12 12" aria-hidden="true"><path d="M3 5l3 3 3-3" fill="none" stroke="#fff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>${triggerBadge}</button><div class="xtyle-color-picker__popover" part="popover" id="${props.elementId}-popover" popover>${body}</div>`
+        : body;
+    return `<div class="xtyle-color-picker${disabledClass}${props.triggerEnabled ? " xtyle-color-picker--trigger" : ""}" part="picker" role="group"${groupName}>${label}${shell}</div>`;
+}
+/** The host-layout rule for a color picker — the one `:host` rule, shared by the element's `styles()` and the SSR declarative shadow root. */
+export const colorPickerHostCss = ":host { display: inline-block; }";
+//# sourceMappingURL=color-picker.js.map

package/dist/markup/color-picker.js.map

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

package/dist/markup/dialog.d.ts

@@ -0,0 +1,3 @@
+/** The host-layout rule for a dialog — the `:host` rule plus the scaffold wrapper, shared by the element's fragment scaffold and the SSR declarative shadow root. */
+export declare const dialogHostCss = ":host { display: contents; } .xtyle-dialog-host { display: contents; }";
+//# sourceMappingURL=dialog.d.ts.map

package/dist/markup/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/markup/dialog.ts"],"names":[],"mappings":"AAAA,qKAAqK;AACrK,eAAO,MAAM,aAAa,2EAA2E,CAAC"}