@xtyle/core 0.5.0

package/dist/elements/number-input.js

@@ -0,0 +1,224 @@
+import { XtyleElement, define } from "./base.js";
+import { numberInputHostCss, clampNumber } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/number-input/source.generated.js";
+export class XtyleNumberInput extends XtyleElement {
+    get styleMode() {
+        return "auto";
+    }
+    static formAssociated = true;
+    internals = null;
+    elementId = `xtyle-number-${Math.random().toString(36).slice(2, 8)}`;
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "number-input", {
+        applyIntent: (intent, event) => this.applyIntent(intent, event),
+        afterApply: () => this.syncStepButtons(),
+    });
+    static get observedAttributes() {
+        return ["value", "min", "max", "step", "alt-step", "alt-default", "modifier", "disabled", "size", "label", "labelledby", "name", "placeholder"];
+    }
+    constructor() {
+        super();
+        if (typeof this.attachInternals === "function")
+            this.internals = this.attachInternals();
+    }
+    get min() {
+        const raw = this.getAttribute("min");
+        return raw === null ? undefined : Number(raw);
+    }
+    get max() {
+        const raw = this.getAttribute("max");
+        return raw === null ? undefined : Number(raw);
+    }
+    /** `step="any"` (the native free-form contract) puts the field in unstepped mode: typed values
+     * commit verbatim with no grid snap and no precision cap, and the steppers fall back to a whole step. */
+    get unstepped() {
+        return (this.getAttribute("step") ?? "").trim().toLowerCase() === "any";
+    }
+    get step() {
+        if (this.unstepped)
+            return 1;
+        const step = Number(this.getAttribute("step") ?? "1");
+        return step > 0 ? step : 1;
+    }
+    get altStep() {
+        const raw = Number(this.getAttribute("alt-step"));
+        return this.getAttribute("alt-step") !== null && raw > 0 ? raw : this.step * 10;
+    }
+    get altDefault() {
+        return this.hasAttribute("alt-default");
+    }
+    get modifier() {
+        const raw = (this.getAttribute("modifier") ?? "shift").toLowerCase();
+        return raw === "alt" || raw === "ctrl" || raw === "meta" ? raw : "shift";
+    }
+    get snapGrid() {
+        return Math.min(this.step, this.altStep);
+    }
+    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 value() {
+        return this.getAttribute("value") ?? "";
+    }
+    set value(next) {
+        if (next === "")
+            this.removeAttribute("value");
+        else
+            this.setAttribute("value", String(this.clamp(Number(next))));
+    }
+    clamp(value) {
+        return clampNumber(value, { min: this.min, max: this.max, grid: this.snapGrid, unstepped: this.unstepped });
+    }
+    get numeric() {
+        const v = Number(this.value);
+        return this.value !== "" && !Number.isNaN(v) ? v : (this.min ?? 0);
+    }
+    get input() {
+        return this.root.querySelector(".xtyle-number__input");
+    }
+    syncStepButtons() {
+        const dec = this.root.querySelector(".xtyle-number__step--dec");
+        const inc = this.root.querySelector(".xtyle-number__step--inc");
+        if (dec)
+            dec.disabled = !this.canDec;
+        if (inc)
+            inc.disabled = !this.canInc;
+        const input = this.input;
+        if (input) {
+            if (this.min !== undefined)
+                input.setAttribute("aria-valuemin", String(this.min));
+            else
+                input.removeAttribute("aria-valuemin");
+            if (this.max !== undefined)
+                input.setAttribute("aria-valuemax", String(this.max));
+            else
+                input.removeAttribute("aria-valuemax");
+        }
+    }
+    get canDec() {
+        const n = this.numeric;
+        return !(this.disabled || (this.min !== undefined && n <= this.min));
+    }
+    get canInc() {
+        const n = this.numeric;
+        return !(this.disabled || (this.max !== undefined && n >= this.max));
+    }
+    attributeChangedCallback(name) {
+        if (!this.root.firstChild)
+            return;
+        if (name === "value") {
+            this.fragment.update(this.bindings);
+            this.syncDisplay();
+        }
+        else
+            this.render();
+    }
+    syncForm() {
+        this.internals?.setFormValue(this.value);
+    }
+    syncDisplay() {
+        const input = this.input;
+        if (input && input !== this.root.activeElement)
+            input.value = this.value;
+        this.syncForm();
+    }
+    commit(raw, kind) {
+        if (this.disabled)
+            return;
+        const trimmed = raw.trim();
+        if (trimmed === "") {
+            this.value = "";
+        }
+        else {
+            const n = Number(trimmed);
+            if (Number.isNaN(n)) {
+                this.fragment.update(this.bindings);
+                this.syncDisplay();
+                return;
+            }
+            this.value = String(n);
+        }
+        this.fragment.update(this.bindings);
+        this.syncDisplay();
+        this.dispatchEvent(new Event(kind, { bubbles: true, composed: true }));
+    }
+    modifierPressed(event) {
+        switch (this.modifier) {
+            case "alt":
+                return event.altKey;
+            case "ctrl":
+                return event.ctrlKey;
+            case "meta":
+                return event.metaKey;
+            default:
+                return event.shiftKey;
+        }
+    }
+    stepFor(event) {
+        const useAlt = this.altDefault ? !this.modifierPressed(event) : this.modifierPressed(event);
+        return useAlt ? this.altStep : this.step;
+    }
+    nudge(direction, step) {
+        if (this.disabled)
+            return;
+        this.commit(String(this.clamp(this.numeric + direction * step)), "change");
+    }
+    warnIfUnnamed() {
+        if (!this.getAttribute("label") && !this.getAttribute("labelledby")) {
+            console.warn("xtyle-number-input: no accessible name. Provide a `label` or `labelledby` so the field is announced.");
+        }
+    }
+    applyIntent(intent, event) {
+        if (intent.preventDefault)
+            event.preventDefault();
+        if (intent.nudge) {
+            const step = intent.forceAlt ? this.altStep : this.stepFor(event);
+            this.nudge(intent.nudge > 0 ? 1 : -1, step);
+            return;
+        }
+        if (intent.commit !== undefined)
+            this.commit(intent.commit, "change");
+    }
+    get bindings() {
+        return {
+            value: this.value,
+            min: this.min,
+            max: this.max,
+            disabled: this.disabled,
+            size: this.size,
+            label: this.getAttribute("label"),
+            labelledby: this.getAttribute("labelledby"),
+            placeholder: this.getAttribute("placeholder"),
+            elementId: this.elementId,
+            canDec: this.canDec,
+            canInc: this.canInc,
+        };
+    }
+    /** Structural state ops can't patch incrementally: the `disabled` boolean attr and whether
+     * the label span exists. A change here rebuilds; a value or step-availability flip is a cheap patch. */
+    shapeSignature() {
+        return `${this.disabled}|${this.getAttribute("label") != null}|${this.getAttribute("labelledby") != null}|${this.getAttribute("placeholder") != null}`;
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(numberInputHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.warnIfUnnamed();
+        this.syncDisplay();
+    }
+}
+define("xtyle-number-input", XtyleNumberInput);
+//# sourceMappingURL=number-input.js.map

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

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

package/dist/elements/overlay-position.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Shared viewport-aware placement geometry for overlay surfaces (Tooltip, Menu,
+ * Swatch details). Pure math — no DOM, no `window` — so it is unit-testable and
+ * environment-neutral; callers pass in the anchor rect, the content size, and the
+ * viewport size (from `getBoundingClientRect` / `innerWidth` at the call site).
+ *
+ * The contract: honor the preferred side when the content fits there, flip to the
+ * opposite side when it does not, and clamp the cross-axis so the overlay never
+ * spills past a viewport edge. This is the portable fallback for browsers without
+ * CSS anchor positioning (`position-try`), which is not yet cross-engine.
+ */
+export type OverlayPlacement = "top" | "bottom" | "left" | "right";
+/**
+ * Cross-axis alignment of the overlay against the anchor: `start` aligns the
+ * leading edges (dropdown-menu behavior), `center` centers on the anchor
+ * (tooltip behavior), `end` aligns the trailing edges.
+ */
+export type OverlayAlign = "start" | "center" | "end";
+export interface OverlayRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface OverlaySize {
+    width: number;
+    height: number;
+}
+export interface PlaceOverlayInput {
+    /** Anchor (trigger) rect in viewport coordinates. */
+    anchor: OverlayRect;
+    /** The overlay content's intrinsic size. */
+    content: OverlaySize;
+    /** Viewport size in CSS pixels. */
+    viewport: OverlaySize;
+    /** Preferred side; flips to the opposite when it does not fit. Defaults to `bottom`. */
+    preferred?: OverlayPlacement;
+    /** Cross-axis alignment against the anchor. Defaults to `center`. */
+    align?: OverlayAlign;
+    /** Space between the anchor and the overlay, in px. Defaults to `4`. */
+    gap?: number;
+    /** Minimum inset kept from every viewport edge, in px. Defaults to `8`. */
+    margin?: number;
+}
+export interface PlaceOverlayResult {
+    /** The side actually used — equal to `preferred` unless it had to flip. */
+    placement: OverlayPlacement;
+    top: number;
+    left: number;
+    /** True when the opposite of `preferred` was chosen. */
+    flipped: boolean;
+}
+/**
+ * Resolve the on-screen coordinates for an overlay anchored to a trigger,
+ * flipping to the opposite side when the preferred side lacks room and clamping
+ * the cross-axis to the viewport.
+ */
+export declare function placeOverlay(input: PlaceOverlayInput): PlaceOverlayResult;
+export interface TetherShiftInput {
+    /** The side the overlay landed on (from `placeOverlay`). */
+    placement: OverlayPlacement;
+    /** The clamped left from `placeOverlay`. */
+    placedLeft: number;
+    /** The clamped top from `placeOverlay`. */
+    placedTop: number;
+    /** Anchor (trigger) rect in viewport coordinates. */
+    anchor: OverlayRect;
+    /** The overlay content's intrinsic size. */
+    content: OverlaySize;
+    /** Keep the arrow at least this far from the content's near edge, in px. Defaults to `10`. */
+    arrowInset?: number;
+}
+export interface TetherShift {
+    /** Cross-axis px to add to the centered content's transform after viewport clamping. */
+    content: number;
+    /** Cross-axis px to translate the arrow so it keeps pointing at the anchor center, bounded to the content. */
+    arrow: number;
+}
+/**
+ * For a center-aligned, arrow-bearing overlay (the tooltip), resolve how far the
+ * clamped content drifted off the anchor center and how far the arrow must
+ * counter-shift to keep pointing at it — bounded so the arrow never leaves the
+ * content's own edge. Pure: the cross axis is horizontal for `top`/`bottom` and
+ * vertical for `left`/`right`.
+ */
+export declare function tooltipTetherShift(input: TetherShiftInput): TetherShift;
+//# sourceMappingURL=overlay-position.d.ts.map

package/dist/elements/overlay-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-position.d.ts","sourceRoot":"","sources":["../../src/elements/overlay-position.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,MAAM,MAAM,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnE;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;AAEtD,MAAM,WAAW,WAAW;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IACjC,qDAAqD;IACrD,MAAM,EAAE,WAAW,CAAC;IACpB,4CAA4C;IAC5C,OAAO,EAAE,WAAW,CAAC;IACrB,mCAAmC;IACnC,QAAQ,EAAE,WAAW,CAAC;IACtB,wFAAwF;IACxF,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,qEAAqE;IACrE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IAClC,2EAA2E;IAC3E,SAAS,EAAE,gBAAgB,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,wDAAwD;IACxD,OAAO,EAAE,OAAO,CAAC;CACjB;AA2ED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,kBAAkB,CAiCzE;AAED,MAAM,WAAW,gBAAgB;IAChC,4DAA4D;IAC5D,SAAS,EAAE,gBAAgB,CAAC;IAC5B,4CAA4C;IAC5C,UAAU,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,MAAM,EAAE,WAAW,CAAC;IACpB,4CAA4C;IAC5C,OAAO,EAAE,WAAW,CAAC;IACrB,8FAA8F;IAC9F,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,WAAW;IAC3B,wFAAwF;IACxF,OAAO,EAAE,MAAM,CAAC;IAChB,8GAA8G;IAC9G,KAAK,EAAE,MAAM,CAAC;CACd;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,GAAG,WAAW,CAYvE"}

package/dist/elements/overlay-position.js

@@ -0,0 +1,124 @@
+/**
+ * Shared viewport-aware placement geometry for overlay surfaces (Tooltip, Menu,
+ * Swatch details). Pure math — no DOM, no `window` — so it is unit-testable and
+ * environment-neutral; callers pass in the anchor rect, the content size, and the
+ * viewport size (from `getBoundingClientRect` / `innerWidth` at the call site).
+ *
+ * The contract: honor the preferred side when the content fits there, flip to the
+ * opposite side when it does not, and clamp the cross-axis so the overlay never
+ * spills past a viewport edge. This is the portable fallback for browsers without
+ * CSS anchor positioning (`position-try`), which is not yet cross-engine.
+ */
+const OPPOSITE = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left",
+};
+function isVertical(placement) {
+    return placement === "top" || placement === "bottom";
+}
+function crossAxisStart(align, anchorStart, anchorExtent, contentExtent) {
+    switch (align) {
+        case "start":
+            return anchorStart;
+        case "end":
+            return anchorStart + anchorExtent - contentExtent;
+        case "center":
+            return anchorStart + anchorExtent / 2 - contentExtent / 2;
+    }
+}
+function clamp(value, min, max) {
+    if (max < min)
+        return min;
+    return Math.min(Math.max(value, min), max);
+}
+function spaceOnSide(placement, anchor, viewport) {
+    switch (placement) {
+        case "top":
+            return anchor.top;
+        case "bottom":
+            return viewport.height - (anchor.top + anchor.height);
+        case "left":
+            return anchor.left;
+        case "right":
+            return viewport.width - (anchor.left + anchor.width);
+    }
+}
+function extentNeeded(placement, content, gap) {
+    return (isVertical(placement) ? content.height : content.width) + gap;
+}
+function choosePlacement(input) {
+    const { preferred, anchor, content, viewport, gap, margin } = input;
+    const opposite = OPPOSITE[preferred];
+    const need = extentNeeded(preferred, content, gap) + margin;
+    if (spaceOnSide(preferred, anchor, viewport) >= need) {
+        return { placement: preferred, flipped: false };
+    }
+    if (spaceOnSide(opposite, anchor, viewport) >= need) {
+        return { placement: opposite, flipped: true };
+    }
+    const preferredSpace = spaceOnSide(preferred, anchor, viewport);
+    const oppositeSpace = spaceOnSide(opposite, anchor, viewport);
+    return oppositeSpace > preferredSpace
+        ? { placement: opposite, flipped: true }
+        : { placement: preferred, flipped: false };
+}
+/**
+ * Resolve the on-screen coordinates for an overlay anchored to a trigger,
+ * flipping to the opposite side when the preferred side lacks room and clamping
+ * the cross-axis to the viewport.
+ */
+export function placeOverlay(input) {
+    const resolved = {
+        preferred: input.preferred ?? "bottom",
+        align: input.align ?? "center",
+        gap: input.gap ?? 4,
+        margin: input.margin ?? 8,
+        anchor: input.anchor,
+        content: input.content,
+        viewport: input.viewport,
+    };
+    const { anchor, content, viewport, align, gap, margin } = resolved;
+    const { placement, flipped } = choosePlacement(resolved);
+    let top;
+    let left;
+    if (isVertical(placement)) {
+        top =
+            placement === "bottom"
+                ? anchor.top + anchor.height + gap
+                : anchor.top - content.height - gap;
+        const cross = crossAxisStart(align, anchor.left, anchor.width, content.width);
+        left = clamp(cross, margin, viewport.width - content.width - margin);
+    }
+    else {
+        left =
+            placement === "right"
+                ? anchor.left + anchor.width + gap
+                : anchor.left - content.width - gap;
+        const cross = crossAxisStart(align, anchor.top, anchor.height, content.height);
+        top = clamp(cross, margin, viewport.height - content.height - margin);
+    }
+    return { placement, top: Math.round(top), left: Math.round(left), flipped };
+}
+/**
+ * For a center-aligned, arrow-bearing overlay (the tooltip), resolve how far the
+ * clamped content drifted off the anchor center and how far the arrow must
+ * counter-shift to keep pointing at it — bounded so the arrow never leaves the
+ * content's own edge. Pure: the cross axis is horizontal for `top`/`bottom` and
+ * vertical for `left`/`right`.
+ */
+export function tooltipTetherShift(input) {
+    const { placement, placedLeft, placedTop, anchor, content } = input;
+    const arrowInset = input.arrowInset ?? 10;
+    const vertical = isVertical(placement);
+    const naturalStart = vertical
+        ? anchor.left + anchor.width / 2 - content.width / 2
+        : anchor.top + anchor.height / 2 - content.height / 2;
+    const contentShift = (vertical ? placedLeft : placedTop) - naturalStart;
+    const bound = Math.max(0, (vertical ? content.width : content.height) / 2 - arrowInset);
+    // + 0 normalizes -0 to 0 for stable equality/serialization
+    const arrow = clamp(-contentShift, -bound, bound) + 0;
+    return { content: contentShift + 0, arrow };
+}
+//# sourceMappingURL=overlay-position.js.map

package/dist/elements/overlay-position.js.map

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

package/dist/elements/pagination.d.ts

@@ -0,0 +1,38 @@
+import { XtyleElement, type StyleMode } from "./base.js";
+import type { FullTone, Size } from "../index.js";
+/**
+ * A page navigator: previous/next controls around a windowed list of page numbers with ellipses.
+ * When an `href` template is set the pages render as links (zero-JS navigation); otherwise they
+ * render as buttons and the element emits a `page-change` event carrying the chosen page.
+ */
+export declare class XtylePagination extends XtyleElement {
+    private fragment;
+    private clickWired;
+    protected get styleMode(): StyleMode;
+    static get observedAttributes(): string[];
+    get page(): number;
+    set page(value: number);
+    get total(): number;
+    set total(value: number);
+    get siblings(): number;
+    set siblings(value: number);
+    get boundaries(): number;
+    set boundaries(value: number);
+    get href(): string | null;
+    set href(value: string | null | undefined);
+    get tone(): FullTone;
+    set tone(value: FullTone);
+    get size(): Size;
+    set size(value: Size);
+    get label(): string;
+    set label(value: string | null | undefined);
+    attributeChangedCallback(): void;
+    private get bindings();
+    /** Inputs that change the rendered list structure; a diff here triggers remount rather than patch. */
+    private shapeSignature;
+    protected template(): string;
+    protected render(): void;
+    /** In button mode (no `href`) emit `page-change` when a page or control is activated; links navigate on their own. */
+    private wireClicks;
+}
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/elements/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAU,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AAEjE,OAAO,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAIlD;;;;GAIG;AACH,qBAAa,eAAgB,SAAQ,YAAY;IAChD,OAAO,CAAC,QAAQ,CAEb;IACH,OAAO,CAAC,UAAU,CAAS;IAE3B,cAAuB,SAAS,IAAI,SAAS,CAE5C;IAED,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAEzB;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,CAExB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAExC;IAED,IAAI,IAAI,IAAI,QAAQ,CAEnB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,QAAQ,EAEvB;IAED,IAAI,IAAI,IAAI,IAAI,CAEf;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,IAAI,EAEnB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAEzC;IAED,wBAAwB,IAAI,IAAI;IAIhC,OAAO,KAAK,QAAQ,GAanB;IAED,sGAAsG;IACtG,OAAO,CAAC,cAAc;IAUtB,SAAS,CAAC,QAAQ,IAAI,MAAM;cAIT,MAAM,IAAI,IAAI;IAQjC,sHAAsH;IACtH,OAAO,CAAC,UAAU;CAWlB"}

package/dist/elements/pagination.js

@@ -0,0 +1,124 @@
+import { XtyleElement, define } from "./base.js";
+import { paginationHostCss } from "../markup/index.js";
+import { FragmentHost } from "./fragment-host.js";
+import { manifest, fragmentSources } from "./fragments/pagination/source.generated.js";
+/**
+ * A page navigator: previous/next controls around a windowed list of page numbers with ellipses.
+ * When an `href` template is set the pages render as links (zero-JS navigation); otherwise they
+ * render as buttons and the element emits a `page-change` event carrying the chosen page.
+ */
+export class XtylePagination extends XtyleElement {
+    fragment = new FragmentHost(this.root, manifest, fragmentSources, "pagination", {
+        applyIntent: () => { },
+    });
+    clickWired = false;
+    get styleMode() {
+        return "auto";
+    }
+    static get observedAttributes() {
+        return ["page", "total", "siblings", "boundaries", "href", "tone", "size", "label", "prev-label", "next-label"];
+    }
+    get page() {
+        return Math.max(1, Number(this.getAttribute("page") ?? 1) || 1);
+    }
+    set page(value) {
+        this.setAttribute("page", String(value));
+    }
+    get total() {
+        return Math.max(1, Number(this.getAttribute("total") ?? 1) || 1);
+    }
+    set total(value) {
+        this.setAttribute("total", String(value));
+    }
+    get siblings() {
+        return Math.max(0, Number(this.getAttribute("siblings") ?? 1) || 0);
+    }
+    set siblings(value) {
+        this.setAttribute("siblings", String(value));
+    }
+    get boundaries() {
+        return Math.max(1, Number(this.getAttribute("boundaries") ?? 1) || 1);
+    }
+    set boundaries(value) {
+        this.setAttribute("boundaries", String(value));
+    }
+    get href() {
+        return this.getAttribute("href");
+    }
+    set href(value) {
+        this.reflectString("href", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "accent";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    get size() {
+        return this.getAttribute("size") ?? "md";
+    }
+    set size(value) {
+        this.setAttribute("size", value);
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Pagination";
+    }
+    set label(value) {
+        this.reflectString("label", value);
+    }
+    attributeChangedCallback() {
+        if (this.root.firstChild)
+            this.render();
+    }
+    get bindings() {
+        return {
+            page: this.page,
+            total: this.total,
+            siblings: this.siblings,
+            boundaries: this.boundaries,
+            href: this.href ?? undefined,
+            tone: this.tone,
+            size: this.size,
+            label: this.label,
+            prevLabel: this.getAttribute("prev-label") ?? undefined,
+            nextLabel: this.getAttribute("next-label") ?? undefined,
+        };
+    }
+    /** Inputs that change the rendered list structure; a diff here triggers remount rather than patch. */
+    shapeSignature() {
+        return JSON.stringify({
+            page: this.page,
+            total: this.total,
+            siblings: this.siblings,
+            boundaries: this.boundaries,
+            href: this.href,
+        });
+    }
+    template() {
+        return "";
+    }
+    render() {
+        this.adoptComponentSheet();
+        this.fragment.ensureScaffold(paginationHostCss);
+        this.fragment.reshapeIfChanged(this.shapeSignature());
+        this.fragment.update(this.bindings);
+        this.wireClicks();
+    }
+    /** In button mode (no `href`) emit `page-change` when a page or control is activated; links navigate on their own. */
+    wireClicks() {
+        if (this.clickWired || this.href !== null)
+            return;
+        this.clickWired = true;
+        this.root.addEventListener("click", (event) => {
+            const target = event.target?.closest("[data-page]");
+            if (!target)
+                return;
+            const page = Number(target.getAttribute("data-page"));
+            if (!Number.isInteger(page) || page === this.page)
+                return;
+            this.dispatchEvent(new CustomEvent("page-change", { bubbles: true, composed: true, detail: { page } }));
+        });
+    }
+}
+define("xtyle-pagination", XtylePagination);
+//# sourceMappingURL=pagination.js.map

package/dist/elements/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","sourceRoot":"","sources":["../../src/elements/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,EAAkB,MAAM,WAAW,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAEvF;;;;GAIG;AACH,MAAM,OAAO,eAAgB,SAAQ,YAAY;IACxC,QAAQ,GAAG,IAAI,YAAY,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE;QACvF,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;KACrB,CAAC,CAAC;IACK,UAAU,GAAG,KAAK,CAAC;IAE3B,IAAuB,SAAS;QAC/B,OAAO,MAAM,CAAC;IACf,CAAC;IAED,MAAM,KAAK,kBAAkB;QAC5B,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;IACjH,CAAC;IAED,IAAI,IAAI;QACP,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACjE,CAAC;IACD,IAAI,IAAI,CAAC,KAAa;QACrB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1C,CAAC;IAED,IAAI,KAAK;QACR,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAClE,CAAC;IACD,IAAI,KAAK,CAAC,KAAa;QACtB,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC3C,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACrE,CAAC;IACD,IAAI,QAAQ,CAAC,KAAa;QACzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC9C,CAAC;IAED,IAAI,UAAU;QACb,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IACvE,CAAC;IACD,IAAI,UAAU,CAAC,KAAa;QAC3B,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAChD,CAAC;IAED,IAAI,IAAI;QACP,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC;IACD,IAAI,IAAI,CAAC,KAAgC;QACxC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,IAAI,IAAI;QACP,OAAQ,IAAI,CAAC,YAAY,CAAC,MAAM,CAAc,IAAI,QAAQ,CAAC;IAC5D,CAAC;IACD,IAAI,IAAI,CAAC,KAAe;QACvB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IAClC,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,KAAK;QACR,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,YAAY,CAAC;IACnD,CAAC;IACD,IAAI,KAAK,CAAC,KAAgC;QACzC,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACpC,CAAC;IAED,wBAAwB;QACvB,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACzC,CAAC;IAED,IAAY,QAAQ;QACnB,OAAO;YACN,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,SAAS;YAC5B,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,SAAS;YACvD,SAAS,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,SAAS;SACvD,CAAC;IACH,CAAC;IAED,sGAAsG;IAC9F,cAAc;QACrB,OAAO,IAAI,CAAC,SAAS,CAAC;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,UAAU,EAAE,IAAI,CAAC,UAAU;YAC3B,IAAI,EAAE,IAAI,CAAC,IAAI;SACf,CAAC,CAAC;IACJ,CAAC;IAES,QAAQ;QACjB,OAAO,EAAE,CAAC;IACX,CAAC;IAEkB,MAAM;QACxB,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;QAChD,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,UAAU,EAAE,CAAC;IACnB,CAAC;IAED,sHAAsH;IAC9G,UAAU;QACjB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI;YAAE,OAAO;QAClD,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YAC7C,MAAM,MAAM,GAAI,KAAK,CAAC,MAA6B,EAAE,OAAO,CAAc,aAAa,CAAC,CAAC;YACzF,IAAI,CAAC,MAAM;gBAAE,OAAO;YACpB,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,CAAC;YACtD,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,IAAI;gBAAE,OAAO;YAC1D,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;QACzG,CAAC,CAAC,CAAC;IACJ,CAAC;CACD;AAED,MAAM,CAAC,kBAAkB,EAAE,eAAe,CAAC,CAAC"}