@xtyle/core 0.5.0

package/dist/elements/section.js

@@ -0,0 +1,83 @@
+import { XtyleElement, define } from "./base.js";
+import { sectionHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/section/source.generated.js";
+export class XtyleSection extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "section", {
+        applyIntent: () => { },
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["as", "variant", "tone", "bordered", "padding", "label"];
+    }
+    get as() {
+        return this.getAttribute("as") ?? "section";
+    }
+    set as(value) {
+        this.setAttribute("as", value);
+    }
+    get variant() {
+        return this.getAttribute("variant") ?? "band";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "plain";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    get bordered() {
+        return this.hasAttribute("bordered");
+    }
+    set bordered(value) {
+        this.reflectBoolean("bordered", value);
+    }
+    get padding() {
+        return this.getAttribute("padding") ?? "lg";
+    }
+    set padding(value) {
+        this.setAttribute("padding", value);
+    }
+    get label() {
+        return this.getAttribute("label");
+    }
+    set label(value) {
+        this.reflectString("label", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            as: this.as,
+            variant: this.variant,
+            tone: this.tone,
+            bordered: this.bordered,
+            padding: this.padding,
+            label: this.label,
+        };
+    }
+    /** A signature of the state ops can't express incrementally — the tag (`as`) and whether the
+     * stage label node exists (a `<span>` a `setAttr`/`setText` can't add or remove). When it
+     * changes, the structure is rebuilt rather than patched. */
+    shapeSignature() {
+        const hasLabel = this.variant === "stage" && this.label != null && this.label !== "";
+        return `${this.as}|${hasLabel}`;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(sectionHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-section", XtyleSection);
+//# sourceMappingURL=section.js.map

package/dist/elements/section.js.map

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

package/dist/elements/segmented.d.ts

@@ -0,0 +1,61 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { Size, FullTone } from "../index.js";
+import { type Segment, type SegmentInput } from "../markup/index.js";
+export declare class XtyleSegmented extends XtyleElement {
+    protected get styleMode(): StyleMode;
+    static formAssociated: boolean;
+    private internals;
+    private elementId;
+    private fragment;
+    static get observedAttributes(): string[];
+    constructor();
+    private settleHandle;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Re-assert the child→slot mapping once the DOM settles after connect: a framework re-render or a
+     * view-transition swap can connect this element before its `[slot="segment"]` children are in place,
+     * which would leave a segment unslotted and its content unstyled until the next render. A second pass
+     * on the next frame runs against the settled child set. */
+    private scheduleSettle;
+    private optionsProp;
+    /** The light-DOM segment children — `[slot="segment"]` before the element reindexes them, and
+     * `[slot^="segment-"]` after — the rich-content authoring mode where each segment projects an
+     * icon or other framework-owned markup instead of a plain text label. */
+    private get segChildren();
+    /** Derive segments from the light-DOM children: `value` / `label` / `disabled` read off each child
+     * (attributes, or the DOM properties a framework may set instead), plus the `slot` name the fill
+     * projects the child's content through. Selection, roving tabindex, and the form value are then
+     * identical to the `options` path — the segments just carry a slot instead of a text label. */
+    private childSegments;
+    /** Options as the comma-string shorthand (`label:value` pairs or bare labels), or a structured
+     * `{ value, label }[]` set through the JS property for labels that differ from their value or carry
+     * commas / colons the shorthand can't survive. Light-DOM `[slot="segment"]` children win over both
+     * when present, so a rich-content bar can still fall back to the `options` shorthand. */
+    private get segments();
+    /** Project each light-DOM child through its own named slot so live framework content stays mounted
+     * and reactive — mirrors the fill's `<slot name="segment-${i}">` by index. */
+    private assignSegmentSlots;
+    get options(): Segment[];
+    set options(value: SegmentInput | null | undefined);
+    get value(): string;
+    set value(next: string);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get size(): Size;
+    set size(value: Size);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** Structural state ops can't patch incrementally: the option set and the `disabled` boolean
+     * attr on each button, plus whether the label span exists. A change here rebuilds; a selection
+     * move is a cheap patch that keeps the focused node. */
+    private shapeSignature;
+    private syncForm;
+    private navContext;
+    private applyIntent;
+    private warnIfUnnamed;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=segmented.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../src/elements/segmented.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAA8C,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACrG,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAsD,KAAK,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAQzH,qBAAa,cAAe,SAAQ,YAAY;IAC/C,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,SAAS,CAAiC;IAClD,OAAO,CAAC,SAAS,CAA+D;IAChF,OAAO,CAAC,QAAQ,CAGb;IAEH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;;IAOD,OAAO,CAAC,YAAY,CAAK;IAEhB,iBAAiB,IAAI,IAAI;IAKlC,oBAAoB,IAAI,IAAI;IAK5B;;;+DAG2D;IAC3D,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,WAAW,CAA0B;IAE7C;;6EAEyE;IACzE,OAAO,KAAK,WAAW,GAItB;IAED;;;mGAG+F;IAC/F,OAAO,CAAC,aAAa;IAWrB;;;6FAGyF;IACzF,OAAO,KAAK,QAAQ,GAInB;IAED;kFAC8E;IAC9E,OAAO,CAAC,kBAAkB;IAI1B,IAAI,OAAO,IAAI,OAAO,EAAE,CAEvB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,EAGjD;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,IAAI,EAAE,MAAM,EAErB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAEvB;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAYnB;IAED;;4DAEwD;IACxD,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,QAAQ;IAIhB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,aAAa;IAQrB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CASjC"}

package/dist/elements/segmented.js

@@ -0,0 +1,182 @@
+import { XtyleElement, define, readAttrOrProp, readBoolAttrOrProp } from "./base.js";
+import { segmentedHostCss, normalizeSegments, selectedValue } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/segmented/source.generated.js";
+export class XtyleSegmented extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    static formAssociated = true;
+    internals = null;
+    elementId = `xtyle-segmented-${Math.random().toString(36).slice(2, 8)}`;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "segmented", {
+        context: (handler) => (handler === "navKeydown" ? this.navContext() : undefined),
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+    });
+    static get observedAttributes() {
+        return ["value", "options", "disabled", "size", "tone", "label", "labelledby", "aria-label", "name"];
+    }
+    constructor() {
+        super();
+        if (typeof this.attachInternals === "function")
+            this.internals = this.attachInternals();
+    }
+    settleHandle = 0;
+    connectedCallback() {
+        super.connectedCallback();
+        this.scheduleSettle();
+    }
+    disconnectedCallback() {
+        if (this.settleHandle && typeof cancelAnimationFrame !== "undefined")
+            cancelAnimationFrame(this.settleHandle);
+        this.settleHandle = 0;
+    }
+    /** Re-assert the child→slot mapping once the DOM settles after connect: a framework re-render or a
+     * view-transition swap can connect this element before its `[slot="segment"]` children are in place,
+     * which would leave a segment unslotted and its content unstyled until the next render. A second pass
+     * on the next frame runs against the settled child set. */
+    scheduleSettle() {
+        if (typeof requestAnimationFrame === "undefined")
+            return;
+        if (this.settleHandle)
+            cancelAnimationFrame(this.settleHandle);
+        this.settleHandle = requestAnimationFrame(() => {
+            this.settleHandle = 0;
+            if (this.isConnected && this.root.firstChild)
+                this.render();
+        });
+    }
+    optionsProp = null;
+    /** The light-DOM segment children — `[slot="segment"]` before the element reindexes them, and
+     * `[slot^="segment-"]` after — the rich-content authoring mode where each segment projects an
+     * icon or other framework-owned markup instead of a plain text label. */
+    get segChildren() {
+        return Array.from(this.querySelectorAll(':scope > [slot="segment"], :scope > [slot^="segment-"]'));
+    }
+    /** Derive segments from the light-DOM children: `value` / `label` / `disabled` read off each child
+     * (attributes, or the DOM properties a framework may set instead), plus the `slot` name the fill
+     * projects the child's content through. Selection, roving tabindex, and the form value are then
+     * identical to the `options` path — the segments just carry a slot instead of a text label. */
+    childSegments() {
+        return this.segChildren.map((child, i) => {
+            const value = readAttrOrProp(child, "value") ?? String(i);
+            const label = readAttrOrProp(child, "label") ?? child.getAttribute("aria-label") ?? value;
+            const disabled = readBoolAttrOrProp(child, "disabled") || child.getAttribute("aria-disabled") === "true";
+            const seg = { value, label, slot: `segment-${i}` };
+            if (disabled)
+                seg.disabled = true;
+            return seg;
+        });
+    }
+    /** Options as the comma-string shorthand (`label:value` pairs or bare labels), or a structured
+     * `{ value, label }[]` set through the JS property for labels that differ from their value or carry
+     * commas / colons the shorthand can't survive. Light-DOM `[slot="segment"]` children win over both
+     * when present, so a rich-content bar can still fall back to the `options` shorthand. */
+    get segments() {
+        const fromChildren = this.childSegments();
+        if (fromChildren.length > 0)
+            return fromChildren;
+        return this.optionsProp ?? normalizeSegments(this.getAttribute("options"));
+    }
+    /** Project each light-DOM child through its own named slot so live framework content stays mounted
+     * and reactive — mirrors the fill's `<slot name="segment-${i}">` by index. */
+    assignSegmentSlots() {
+        this.segChildren.forEach((child, i) => child.setAttribute("slot", `segment-${i}`));
+    }
+    get options() {
+        return this.segments;
+    }
+    set options(value) {
+        this.optionsProp = value == null ? null : normalizeSegments(value);
+        if (this.root.firstChild)
+            this.render();
+    }
+    get value() {
+        return selectedValue(this.segments, this.getAttribute("value"));
+    }
+    set value(next) {
+        this.setAttribute("value", next);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.reflectBoolean("disabled", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "accent";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            segments: this.segments,
+            value: this.getAttribute("value"),
+            disabled: this.disabled,
+            size: this.size,
+            tone: this.tone,
+            label: this.getAttribute("label"),
+            labelledby: this.getAttribute("labelledby"),
+            ariaLabel: this.getAttribute("aria-label"),
+            elementId: this.elementId,
+        };
+    }
+    /** Structural state ops can't patch incrementally: the option set and the `disabled` boolean
+     * attr on each button, plus whether the label span exists. A change here rebuilds; a selection
+     * move is a cheap patch that keeps the focused node. */
+    shapeSignature() {
+        const segs = JSON.stringify(this.segments);
+        const naming = `${this.getAttribute("label")}|${this.getAttribute("labelledby")}|${this.getAttribute("aria-label")}`;
+        return `${this.disabled}|${naming}|${segs}`;
+    }
+    syncForm() {
+        this.internals?.setFormValue(this.value);
+    }
+    navContext() {
+        const enabledKeys = this.disabled ? [] : this.segments.filter((s) => !s.disabled).map((s) => s.value);
+        return { enabledKeys };
+    }
+    applyIntent(intent, event) {
+        if (intent.preventDefault)
+            event.preventDefault();
+        if (intent.select !== undefined && intent.select !== this.value) {
+            this.value = intent.select;
+            this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+            this.syncForm();
+        }
+        if (intent.focus !== undefined) {
+            const option = this.root.querySelector(`[role="radio"][data-value="${CSS.escape(intent.focus)}"]`);
+            option?.focus();
+        }
+    }
+    warnIfUnnamed() {
+        if (!this.getAttribute("label") && !this.getAttribute("labelledby") && !this.getAttribute("aria-label")) {
+            console.warn("xtyle-segmented: no accessible name. Provide a `label`, `labelledby`, or `aria-label` so the group is announced.");
+        }
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.assignSegmentSlots();
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(segmentedHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.warnIfUnnamed();
+        this.syncForm();
+    }
+}
+define("xtyle-segmented", XtyleSegmented);
+//# sourceMappingURL=segmented.js.map

package/dist/elements/segmented.js.map

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

package/dist/elements/select.d.ts

@@ -0,0 +1,35 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { Size } from "../index.js";
+export declare class XtyleSelect extends XtyleElement {
+    private selectNumber;
+    private fieldId;
+    private errorId;
+    private changeWired;
+    private fragment;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get value(): string;
+    set value(value: string | null | undefined);
+    get size(): Size;
+    set size(value: Size);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get invalid(): boolean;
+    set invalid(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    private get field();
+    private optionsHtml;
+    private get bindings();
+    /** Structural state ops can't patch incrementally: the `disabled`/`required` boolean attrs and `name`
+     * presence on the native `<select>`, plus the projected option set. A change here rebuilds; flipping
+     * `invalid`/`error`/`value` is a cheap patch that keeps the live `<select>` and its focus. */
+    private shapeSignature;
+    private syncField;
+    private warnIfUnnamed;
+    private wireChange;
+    attributeChangedCallback(): void;
+    protected render(): void;
+    protected template(): string;
+}
+//# sourceMappingURL=select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/elements/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACjE,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAOxC,qBAAa,WAAY,SAAQ,YAAY;IAC5C,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,OAAO,CAAuC;IACtD,OAAO,CAAC,OAAO,CAA6C;IAC5D,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,QAAQ,CAEb;IAEH,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,WAAW;IAUnB,OAAO,KAAK,QAAQ,GAcnB;IAED;;kGAE8F;IAC9F,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,aAAa;IAgBrB,OAAO,CAAC,UAAU;IAUlB,wBAAwB,IAAI,IAAI;cAIb,MAAM,IAAI,IAAI;IASjC,SAAS,CAAC,QAAQ,IAAI,MAAM;CAG5B"}

package/dist/elements/select.js

@@ -0,0 +1,144 @@
+import { XtyleElement, define } from "./base.js";
+import { selectHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/select/source.generated.js";
+let selectCounter = 0;
+export class XtyleSelect extends XtyleElement {
+    selectNumber = ++selectCounter;
+    fieldId = `xtyle-select-${this.selectNumber}`;
+    errorId = `xtyle-select-error-${this.selectNumber}`;
+    changeWired = false;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "select", {
+        applyIntent: () => { },
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["label", "value", "size", "disabled", "invalid", "required", "error", "name"];
+    }
+    get value() {
+        return this.field?.value ?? this.getAttribute("value") ?? "";
+    }
+    set value(value) {
+        this.reflectStringLive("value", value, () => this.field);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.reflectBoolean("disabled", value);
+    }
+    get invalid() {
+        return this.hasAttribute("invalid");
+    }
+    set invalid(value) {
+        this.reflectBoolean("invalid", value);
+    }
+    get required() {
+        return this.hasAttribute("required");
+    }
+    set required(value) {
+        this.reflectBoolean("required", value);
+    }
+    get field() {
+        return this.root.querySelector("select");
+    }
+    optionsHtml() {
+        return Array.from(this.children)
+            .filter((child) => {
+            const tag = child.tagName.toLowerCase();
+            return tag === "option" || tag === "optgroup";
+        })
+            .map((child) => child.outerHTML)
+            .join("");
+    }
+    get bindings() {
+        return {
+            label: this.getAttribute("label") ?? "",
+            value: this.getAttribute("value"),
+            size: this.size,
+            disabled: this.disabled,
+            invalid: this.invalid,
+            required: this.required,
+            error: this.getAttribute("error") ?? "",
+            name: this.getAttribute("name"),
+            fieldId: this.fieldId,
+            errorId: this.errorId,
+            optionsHtml: this.optionsHtml(),
+        };
+    }
+    /** Structural state ops can't patch incrementally: the `disabled`/`required` boolean attrs and `name`
+     * presence on the native `<select>`, plus the projected option set. A change here rebuilds; flipping
+     * `invalid`/`error`/`value` is a cheap patch that keeps the live `<select>` and its focus. */
+    shapeSignature() {
+        return `${this.disabled}|${this.required}|${this.getAttribute("name") ?? ""}|${this.optionsHtml()}`;
+    }
+    syncField() {
+        const field = this.field;
+        if (!field)
+            return;
+        field.disabled = this.disabled;
+        field.required = this.required;
+        if (this.required)
+            field.setAttribute("aria-required", "true");
+        else
+            field.removeAttribute("aria-required");
+        const value = this.getAttribute("value");
+        if (value !== null && field.value !== value)
+            field.value = value;
+        const error = this.getAttribute("error") ?? "";
+        if (this.invalid && error.length > 0)
+            field.setAttribute("aria-describedby", this.errorId);
+        else
+            field.removeAttribute("aria-describedby");
+        this.warnIfUnnamed(field);
+    }
+    warnIfUnnamed(field) {
+        const labelText = this.getAttribute("label") ?? "";
+        if (labelText.length > 0) {
+            field.removeAttribute("aria-label");
+            return;
+        }
+        const aria = this.getAttribute("aria-label") ?? this.getAttribute("aria-labelledby");
+        if (aria) {
+            field.setAttribute(this.hasAttribute("aria-label") ? "aria-label" : "aria-labelledby", aria);
+            return;
+        }
+        console.warn("xtyle-select: a select with no `label` has no accessible name. Provide a `label` or `aria-label` so it is announced.");
+    }
+    wireChange() {
+        if (this.changeWired)
+            return;
+        this.changeWired = true;
+        this.root.addEventListener("change", (event) => {
+            if (!(event.target instanceof HTMLSelectElement))
+                return;
+            this.setAttribute("value", event.target.value);
+            this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+        });
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(selectHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.syncField();
+        this.wireChange();
+    }
+    template() {
+        return "";
+    }
+}
+define("xtyle-select", XtyleSelect);
+//# sourceMappingURL=select.js.map

package/dist/elements/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/elements/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,wCAAwC,CAAC;AAEnF,IAAI,aAAa,GAAG,CAAC,CAAC;AAEtB,MAAM,OAAO,WAAY,SAAQ,YAAY;IACpC,YAAY,GAAG,EAAE,aAAa,CAAC;IAC/B,OAAO,GAAG,gBAAgB,IAAI,CAAC,YAAY,EAAE,CAAC;IAC9C,OAAO,GAAG,sBAAsB,IAAI,CAAC,YAAY,EAAE,CAAC;IACpD,WAAW,GAAG,KAAK,CAAC;IACpB,QAAQ,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE;QACnF,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;KACrB,CAAC,CAAC;IAEH,IAAuB,SAAS;QAC/B,OAAO,MAAM,CAAC;IACf,CAAC;IAED,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;IACvF,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,KAAK,EAAE,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IAC9D,CAAC;IACD,IAAI,KAAK,CAAC,KAAgC;QACzC,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,IAAI;QACP,OAAQ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAU,IAAI,IAAI,CAAC;IACpD,CAAC;IACD,IAAI,IAAI,CAAC,KAAW;QACnB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACtC,CAAC;IACD,IAAI,QAAQ,CAAC,KAAc;QAC1B,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,OAAO;QACV,OAAO,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACrC,CAAC;IACD,IAAI,OAAO,CAAC,KAAc;QACzB,IAAI,CAAC,cAAc,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;IACtC,CAAC;IACD,IAAI,QAAQ,CAAC,KAAc;QAC1B,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,IAAY,KAAK;QAChB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC1C,CAAC;IAEO,WAAW;QAClB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC9B,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE;YACjB,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;YACxC,OAAO,GAAG,KAAK,QAAQ,IAAI,GAAG,KAAK,UAAU,CAAC;QAC/C,CAAC,CAAC;aACD,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC;aAC/B,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,CAAC;IAED,IAAY,QAAQ;QACnB,OAAO;YACN,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;YACvC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC;YACjC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE;YACvC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAC/B,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE;SAC/B,CAAC;IACH,CAAC;IAED;;kGAE8F;IACtF,cAAc;QACrB,OAAO,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACrG,CAAC;IAEO,SAAS;QAChB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,CAAC,KAAK;YAAE,OAAO;QACnB,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,IAAI,CAAC,QAAQ;YAAE,KAAK,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;;YAC1D,KAAK,CAAC,eAAe,CAAC,eAAe,CAAC,CAAC;QAC5C,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzC,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,KAAK,KAAK,KAAK;YAAE,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;QACjE,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC/C,IAAI,IAAI,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;YAAE,KAAK,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;;YACtF,KAAK,CAAC,eAAe,CAAC,kBAAkB,CAAC,CAAC;QAC/C,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAEO,aAAa,CAAC,KAAwB;QAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACnD,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC1B,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;YACpC,OAAO;QACR,CAAC;QACD,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACrF,IAAI,IAAI,EAAE,CAAC;YACV,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;YAC7F,OAAO;QACR,CAAC;QACD,OAAO,CAAC,IAAI,CACX,sHAAsH,CACtH,CAAC;IACH,CAAC;IAEO,UAAU;QACjB,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO;QAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YAC9C,IAAI,CAAC,CAAC,KAAK,CAAC,MAAM,YAAY,iBAAiB,CAAC;gBAAE,OAAO;YACzD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAC/C,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC5E,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,wBAAwB;QACvB,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IAEkB,MAAM;QACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;QAC5C,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,UAAU,EAAE,CAAC;IACnB,CAAC;IAES,QAAQ;QACjB,OAAO,EAAE,CAAC;IACX,CAAC;CACD;AAED,MAAM,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC"}

package/dist/elements/separator.d.ts

@@ -0,0 +1,25 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+export type Orientation = "horizontal" | "vertical";
+export type SeparatorVariant = "default" | "with-label";
+export type SeparatorSize = "thin" | "normal";
+export declare class XtyleSeparator extends XtyleElement {
+    private fragment;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get orientation(): Orientation;
+    set orientation(value: Orientation);
+    get variant(): SeparatorVariant;
+    set variant(value: SeparatorVariant);
+    get size(): SeparatorSize;
+    set size(value: SeparatorSize);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** A signature of the state ops can't express incrementally — the `with-label` variant (different
+     * children and `role`/`aria-hidden`) and the orientation (which adds or drops `aria-orientation`,
+     * a boolean-shaped attr a `setAttr` can't remove). When it changes, the structure is rebuilt
+     * rather than patched. */
+    private shapeSignature;
+    protected template(): string;
+    protected render(): void;
+}
+//# sourceMappingURL=separator.d.ts.map

package/dist/elements/separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../../src/elements/separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAKjE,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,YAAY,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9C,qBAAa,cAAe,SAAQ,YAAY;IAC/C,OAAO,CAAC,QAAQ,CAEb;IAEH,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,WAAW,IAAI,WAAW,CAE7B;IACD,IAAI,WAAW,CAAC,KAAK,EAAE,WAAW,EAEjC;IAED,IAAI,OAAO,IAAI,gBAAgB,CAE9B;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,gBAAgB,EAElC;IAED,IAAI,IAAI,IAAI,aAAa,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,EAE5B;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAMnB;IAED;;;8BAG0B;IAC1B,OAAO,CAAC,cAAc;IAItB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;CAMjC"}

package/dist/elements/separator.js

@@ -0,0 +1,62 @@
+import { XtyleElement, define } from "./base.js";
+import { separatorHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/separator/source.generated.js";
+export class XtyleSeparator extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "separator", {
+        applyIntent: () => { },
+    });
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["orientation", "variant", "size"];
+    }
+    get orientation() {
+        return this.getAttribute("orientation") ?? "horizontal";
+    }
+    set orientation(value) {
+        this.setAttribute("orientation", value);
+    }
+    get variant() {
+        return this.getAttribute("variant") ?? "default";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "normal";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            orientation: this.orientation,
+            variant: this.variant,
+            size: this.size,
+        };
+    }
+    /** A signature of the state ops can't express incrementally — the `with-label` variant (different
+     * children and `role`/`aria-hidden`) and the orientation (which adds or drops `aria-orientation`,
+     * a boolean-shaped attr a `setAttr` can't remove). When it changes, the structure is rebuilt
+     * rather than patched. */
+    shapeSignature() {
+        return `${this.variant}|${this.orientation}`;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(separatorHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+    }
+}
+define("xtyle-separator", XtyleSeparator);
+//# sourceMappingURL=separator.js.map

package/dist/elements/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","sourceRoot":"","sources":["../../src/elements/separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,2CAA2C,CAAC;AAMtF,MAAM,OAAO,cAAe,SAAQ,YAAY;IACvC,QAAQ,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE;QACtF,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;KACrB,CAAC,CAAC;IAEH,IAAuB,SAAS;QAC/B,OAAO,MAAM,CAAC;IACf,CAAC;IAED,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,aAAa,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;IAC3C,CAAC;IAED,IAAI,WAAW;QACd,OAAQ,IAAI,CAAC,YAAY,CAAC,aAAa,CAAiB,IAAI,YAAY,CAAC;IAC1E,CAAC;IACD,IAAI,WAAW,CAAC,KAAkB;QACjC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC;IAED,IAAI,OAAO;QACV,OAAQ,IAAI,CAAC,YAAY,CAAC,SAAS,CAAsB,IAAI,SAAS,CAAC;IACxE,CAAC;IACD,IAAI,OAAO,CAAC,KAAuB;QAClC,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,IAAI;QACP,OAAQ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAmB,IAAI,QAAQ,CAAC;IACjE,CAAC;IACD,IAAI,IAAI,CAAC,KAAoB;QAC5B,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IAED,wBAAwB;QACvB,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IAED,IAAY,QAAQ;QACnB,OAAO;YACN,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;SACf,CAAC;IACH,CAAC;IAED;;;8BAG0B;IAClB,cAAc;QACrB,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;IAC9C,CAAC;IAES,QAAQ;QACjB,OAAO,EAAE,CAAC;IACX,CAAC;IAEkB,MAAM;QACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;QAC/C,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;QACtD,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;CACD;AAED,MAAM,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC"}