@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/dist/overlay/overlay.js

@@ -0,0 +1,225 @@
+import { PositionController, } from '@oddkin/core/controllers/position';
+import { signal } from '@oddkin/core/reactive';
+import { html } from '@oddkin/core/template';
+import { closeGlyph } from '../styles/glyphs.js';
+/** The focused element, through open shadow roots. */
+export function deepActiveElement() {
+    let active = document.activeElement;
+    while (active?.shadowRoot?.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+}
+const sideways = (el) => /^(vertical|sideways)/.test(getComputedStyle(el).writingMode);
+/** A listbox surface is at least as wide as its field (Figma ListboxSurface). */
+function sizeToAnchor(surface, anchor, across = sideways(surface)) {
+    surface.style.setProperty('--_anchor-inline-size', `${across ? anchor.height : anchor.width}px`);
+}
+/** Whether `node` is `container` or inside it in the composed tree (slots and shadow roots). */
+export function composedContains(container, node) {
+    for (let n = node; n; n = n.assignedSlot ?? n.parentNode ?? n.host)
+        if (n === container)
+            return true;
+    return false;
+}
+export class Overlay {
+    #options;
+    #open = signal(false);
+    #position;
+    #scope;
+    #placing;
+    #dismissal;
+    #opener = null;
+    #restore = false;
+    /** The anchor was pressed while the surface was open, so light dismiss has closed it. */
+    #pressedOpen = false;
+    /** Whether the surface is open; bind a trigger's `aria-expanded` to it. */
+    open = this.#open;
+    constructor(options) {
+        this.#options = options;
+        const o = options;
+        this.#position = new PositionController({
+            anchor: () => o.anchor?.(),
+            surface: o.surface,
+            get side() {
+                return o.side ?? 'block-end';
+            },
+            get align() {
+                return o.align ?? 'start';
+            },
+            offset: o.offset ?? 4,
+            viewportMargin: 8,
+            onPlace: (placement) => {
+                const surface = o.surface();
+                if (surface) {
+                    const across = sideways(surface);
+                    const { availableWidth: width, availableHeight: height } = placement;
+                    const style = surface.style;
+                    style.setProperty('--_overlay-max-inline-size', `${across ? height : width}px`);
+                    style.setProperty('--_overlay-max-block-size', `${across ? width : height}px`);
+                    // Later placements follow the anchor's size changes.
+                    sizeToAnchor(surface, placement.anchor, across);
+                }
+                o.onPlace?.(placement);
+            },
+        });
+    }
+    /** The last placement, or undefined before the first. */
+    get placement() {
+        return this.#position.placement;
+    }
+    connect(scope) {
+        const surface = this.#options.surface();
+        if (!surface)
+            return;
+        this.#scope = scope;
+        if (!surface.hasAttribute('popover'))
+            surface.popover = this.#options.mode ?? 'auto';
+        scope.listen(surface, 'beforetoggle', (event) => this.#before(event, surface));
+        scope.listen(surface, 'toggle', (event) => this.#toggled(event, surface));
+        // The anchor acts as the invoker: pressing it while open closes the surface (light dismiss),
+        // and the click that follows must not open it again (`showPopover({ source })`, which says
+        // so to the browser, is above the floor).
+        const host = this.#options.host;
+        scope.listen(host, 'pointerdown', (event) => {
+            const anchor = this.#options.anchor?.();
+            this.#pressedOpen =
+                !!anchor && event.composedPath().includes(anchor) && surface.matches(':popover-open');
+        }, true);
+        // A keyboard activation never follows such a press (a press dragged away leaves the flag set).
+        scope.listen(host, 'keydown', () => (this.#pressedOpen = false), true);
+        // Disconnected: the browser hides the surface without toggle events, so focus stays put; the
+        // per-open scopes are gone with this one.
+        scope.add(() => {
+            this.#placing = undefined;
+            this.#dismissal = undefined;
+        }, 'overlay state');
+        this.#open.value = surface.matches(':popover-open');
+        this.#startPlacing();
+    }
+    show() {
+        const surface = this.#options.surface();
+        if (surface?.isConnected && !surface.matches(':popover-open'))
+            surface.showPopover();
+    }
+    hide() {
+        const surface = this.#options.surface();
+        if (surface?.matches(':popover-open'))
+            surface.hidePopover();
+    }
+    toggle(force) {
+        const pressed = this.#pressedOpen;
+        this.#pressedOpen = false;
+        const open = force ?? (!pressed && !this.#options.surface()?.matches(':popover-open'));
+        if (open)
+            this.show();
+        else
+            this.hide();
+    }
+    /** Place again now, e.g. after the content changed size; does nothing while closed. */
+    update() {
+        this.#position.update();
+    }
+    /**
+     * Placement starts once the surface shows: in the frame after `beforetoggle` (which runs before
+     * the surface is showing; a native invoker gives no later synchronous hook), or at `toggle` if
+     * that comes first, so `onToggle(true)` always follows the first placement.
+     */
+    #startPlacing() {
+        const surface = this.#options.surface();
+        if (this.#placing || !this.#scope || !surface?.matches(':popover-open'))
+            return;
+        // Before the first measurement, so a surface sized by the anchor is placed at that size.
+        const anchor = this.#options.anchor?.();
+        if (anchor)
+            sizeToAnchor(surface, anchor.getBoundingClientRect());
+        this.#placing = this.#scope.child({ name: 'overlay placement' });
+        this.#placing.use(this.#position);
+    }
+    #stopPlacing() {
+        this.#placing?.dispose();
+        this.#placing = undefined;
+    }
+    #before(event, surface) {
+        const host = this.#options.host;
+        if (surface !== host && this.#options.relay !== false) {
+            const relay = new ToggleEvent('beforetoggle', {
+                oldState: event.oldState,
+                newState: event.newState,
+                cancelable: event.cancelable,
+            });
+            host.dispatchEvent(relay);
+            if (relay.defaultPrevented) {
+                event.preventDefault();
+                return;
+            }
+        }
+        if (event.newState === 'open') {
+            this.#opener = deepActiveElement();
+            let release = () => { };
+            const frame = requestAnimationFrame(() => {
+                release();
+                this.#startPlacing();
+            });
+            release = this.#scope?.add(() => cancelAnimationFrame(frame), 'overlay frame') ?? release;
+        }
+        else {
+            this.#restore = composedContains(surface, deepActiveElement());
+            this.#stopPlacing();
+        }
+    }
+    #toggled(event, surface) {
+        const open = surface.matches(':popover-open');
+        this.#open.value = open;
+        const host = this.#options.host;
+        if (surface !== host && this.#options.relay !== false)
+            host.dispatchEvent(new ToggleEvent('toggle', { oldState: event.oldState, newState: event.newState }));
+        if (open)
+            this.#startPlacing();
+        if (open && this.#options.dismiss && !this.#dismissal)
+            this.#listenForDismissal(surface);
+        if (open) {
+            this.#options.onToggle?.(true);
+            return;
+        }
+        this.#dismissal?.dispose();
+        this.#dismissal = undefined;
+        this.#options.onToggle?.(false);
+        if (this.#restore) {
+            this.#restore = false;
+            // Unless focus deliberately moved elsewhere (ADR 0044 §6).
+            const active = deepActiveElement();
+            if (!active || active === document.body || composedContains(surface, active))
+                (this.#options.returnFocus?.() ?? this.#opener)?.focus();
+        }
+    }
+    #listenForDismissal(surface) {
+        const scope = (this.#dismissal = this.#scope?.child({ name: 'overlay dismissal' }));
+        if (!scope)
+            return;
+        const host = this.#options.host;
+        // Only while open, so Escape on a closed overlay reaches the host's own handlers.
+        scope.listen(host, 'keydown', (event) => {
+            if (event.key !== 'Escape' || event.defaultPrevented)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.hide();
+        });
+        scope.listen(document, 'pointerdown', (event) => {
+            const path = event.composedPath();
+            if (!path.includes(host) && !path.includes(surface))
+                this.hide();
+        }, true);
+    }
+}
+/** The explicit close control every dismissible surface carries (iOS floor exception, §2.6). */
+export const closeButton = (label, onClose) => html `<button
+    part="close"
+    class="overlay-close"
+    type="button"
+    aria-label=${label}
+    @click=${onClose}
+  >
+    ${closeGlyph}
+  </button>`;
+//# sourceMappingURL=overlay.js.map

package/dist/overlay/overlay.js.map

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

package/dist/pagination/foundation.d.ts

@@ -0,0 +1,6 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinPagination } from './pagination.js';
+export { paginationTemplate } from './pagination.template.js';
+export { paginationStructuralStyles } from './pagination.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/pagination/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/pagination/foundation.js

@@ -0,0 +1,8 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinPagination } from './pagination.js';
+export { paginationTemplate } from './pagination.template.js';
+export { paginationStructuralStyles } from './pagination.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/pagination/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/pagination/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/pagination/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinPagination } from './pagination.js';
+export { paginationTemplate } from './pagination.template.js';
+export { paginationStructuralStyles } from './pagination.structural.styles.js';
+export { paginationStyles } from './pagination.styles.js';
+export { paginationDefinition } from './pagination.definition.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pagination/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/pagination/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/pagination`.
+export { OddkinPagination } from './pagination.js';
+export { paginationTemplate } from './pagination.template.js';
+export { paginationStructuralStyles } from './pagination.structural.styles.js';
+export { paginationStyles } from './pagination.styles.js';
+export { paginationDefinition } from './pagination.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/pagination/index.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/pagination/pagination.d.ts

@@ -0,0 +1,91 @@
+import { OddkinElement, type ElementEvents } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import type { NavigationActionDetail } from '../side-nav/side-nav.js';
+export declare const PAGINATION_STRINGS: {
+    label: string;
+    previous: string;
+    next: string;
+    page: string;
+    status: string;
+};
+/** The side-nav action intent: `id` is the page number, `action` is `"page"`. */
+export declare const paginationActionEvent: import("@oddkin/core/element").EventDefinition<NavigationActionDetail>;
+/** One entry of the page list. */
+export type PaginationEntry = {
+    readonly kind: 'previous' | 'next';
+    readonly key: string;
+} | {
+    readonly kind: 'page';
+    readonly key: string;
+    readonly page: number;
+} | {
+    readonly kind: 'gap';
+    readonly key: string;
+};
+declare const OddkinPagination_base: import("@oddkin/core/element").WithProps<typeof OddkinElement, {
+    readonly label: import("@oddkin/core/element").PropDefinition<string>;
+    readonly current: import("@oddkin/core/element").PropDefinition<string>;
+    readonly pageCount: import("@oddkin/core/element").PropDefinition<number>;
+    readonly href: import("@oddkin/core/element").PropDefinition<string>;
+    readonly strings: import("@oddkin/core/element").PropDefinition<Partial<{
+        label: string;
+        previous: string;
+        next: string;
+        page: string;
+        status: string;
+    }> | undefined>;
+}>;
+/**
+ * Page navigation: the position as text, previous and next, and the first, last, and nearby pages
+ * with ellipses between. With `href`, pages are links; without it, buttons that report
+ * `odd-action` so the application can load the page.
+ *
+ * @csspart base - The `<nav>` surface.
+ * @csspart status - The position text ("Page 3 of 12").
+ * @csspart list - The list of controls.
+ * @csspart previous - The previous-page link or button.
+ * @csspart next - The next-page link or button.
+ * @csspart page - Each page link or button; the current one has `aria-current="page"`.
+ * @csspart ellipsis - The mark between distant pages.
+ * @cssprop --odd-pagination-radius - Corner radius of the surface.
+ * @a11y A `<nav>` landmark named by `label` (default `strings.label`). Pages are named "Page 3" (`strings.page`) and the current one has `aria-current="page"`. At the ends, previous or next is disabled (a disabled button, or a link without `href` with `aria-disabled`). Ellipses are hidden from assistive technology.
+ * @keyboard Tab moves through previous, the pages, and next; Enter (and Space on buttons) activates.
+ * @previewRole pagination
+ * @useFor Moving through a long list or result set one page at a time.
+ * @notFor Steps of a process; switching views (use odd-tabs); short lists (show everything).
+ * @category Navigation
+ * @customization 1 2 3
+ */
+export declare class OddkinPagination extends OddkinPagination_base {
+    static events: {
+        'odd-action': import("@oddkin/core/element").EventDefinition<NavigationActionDetail>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinPagination>;
+    /** @internal The number of pages, at least 1. */
+    readonly _count: Readable<number>;
+    /** @internal The current page, within 1 and the page count. */
+    readonly _page: Readable<number>;
+    /** @internal The built-in text with the author's overrides. */
+    readonly _strings: Readable<typeof PAGINATION_STRINGS>;
+    /**
+     * @internal Previous, the pages shown, gaps, and next. Shown: the first and last page, the
+     * current one and its neighbours, the first or last three near either end; a gap of one page
+     * shows that page instead.
+     */
+    readonly _entries: Readable<readonly PaginationEntry[]>;
+    /** @internal The position as text (`strings.status`). */
+    readonly _status: Readable<string>;
+    /** @internal The link to a page, from the `href` template. */
+    _hrefFor(page: number): string;
+    /** @internal A page button was activated. */
+    _go(page: number): void;
+    /** @internal The name of a page control. */
+    _pageLabel(page: number): string;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'odd-pagination': OddkinPagination;
+    }
+}
+export {};
+//# sourceMappingURL=pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEtF,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,eAAO,MAAM,kBAAkB;IAC7B,KAAK;IACL,QAAQ;IACR,IAAI;IACJ,IAAI;IACJ,MAAM;CACP,CAAC;AAEF,iFAAiF;AACjF,eAAO,MAAM,qBAAqB,wEAOhC,CAAC;AAEH,kCAAkC;AAClC,MAAM,MAAM,eAAe,GACvB;IAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC5D;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACtE;IAAE,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;;;;;;;;;;;;;;AAEnD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,gBAAiB,SAAQ,qBAcpC;IACA,OAAgB,MAAM;QAAK,YAAY;MAA0B;IACjE,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,gBAAgB,CAAC,CAAC;IAElE,iDAAiD;IACjD,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAgE;IACjG,+DAA+D;IAC/D,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,CAE9B;IACF,+DAA+D;IAC/D,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAEpD;IAEF;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,QAAQ,CAAC,SAAS,eAAe,EAAE,CAAC,CAmBpD;IAEH,yDAAyD;IACzD,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,CAKhC;IAEF,8DAA8D;IAC9D,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7B;IAED,6CAA6C;IAC7C,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAEtB;IAED,4CAA4C;IAC5C,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE/B;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,gBAAgB,CAAC;KACpC;CACF"}

package/dist/pagination/pagination.define.d.ts

@@ -0,0 +1,3 @@
+/// <reference path="pagination.d.ts" preserve="true" />
+export {};
+//# sourceMappingURL=pagination.define.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.define.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.define.ts"],"names":[],"mappings":""}

package/dist/pagination/pagination.define.js

@@ -0,0 +1,5 @@
+/// <reference path="./pagination.ts" preserve="true" />
+import { define } from '@oddkin/core/element';
+import { paginationDefinition } from './pagination.definition.js';
+define(paginationDefinition);
+//# sourceMappingURL=pagination.define.js.map

package/dist/pagination/pagination.define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.define.js","sourceRoot":"","sources":["../../src/pagination/pagination.define.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,MAAM,CAAC,oBAAoB,CAAC,CAAC"}

package/dist/pagination/pagination.definition.d.ts

@@ -0,0 +1,3 @@
+import { OddkinPagination } from './pagination.js';
+export declare const paginationDefinition: import("@oddkin/core/element").ElementDefinition<OddkinPagination>;
+//# sourceMappingURL=pagination.definition.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.definition.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.definition.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAKnD,eAAO,MAAM,oBAAoB,oEAK/B,CAAC"}

package/dist/pagination/pagination.definition.js

@@ -0,0 +1,15 @@
+import { compose } from '@oddkin/core/element';
+import { glyphStyles } from '../styles/glyphs.js';
+import { focusRingStyles } from '../styles/focus-ring.styles.js';
+import { hostStyles } from '../styles/host.styles.js';
+import { OddkinPagination } from './pagination.js';
+import { paginationStructuralStyles } from './pagination.structural.styles.js';
+import { paginationStyles } from './pagination.styles.js';
+import { paginationTemplate } from './pagination.template.js';
+export const paginationDefinition = compose({
+    name: 'odd-pagination',
+    element: OddkinPagination,
+    template: paginationTemplate,
+    styles: [hostStyles, paginationStructuralStyles, glyphStyles, focusRingStyles, paginationStyles],
+});
+//# sourceMappingURL=pagination.definition.js.map

package/dist/pagination/pagination.definition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.definition.js","sourceRoot":"","sources":["../../src/pagination/pagination.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,CAAC,MAAM,oBAAoB,GAAG,OAAO,CAAC;IAC1C,IAAI,EAAE,gBAAgB;IACtB,OAAO,EAAE,gBAAgB;IACzB,QAAQ,EAAE,kBAAkB;IAC5B,MAAM,EAAE,CAAC,UAAU,EAAE,0BAA0B,EAAE,WAAW,EAAE,eAAe,EAAE,gBAAgB,CAAC;CACjG,CAAC,CAAC"}

package/dist/pagination/pagination.js

@@ -0,0 +1,107 @@
+import { OddkinElement, event, prop } from '@oddkin/core/element';
+import { format, strings } from '@oddkin/core/i18n';
+import { computed } from '@oddkin/core/reactive';
+export const PAGINATION_STRINGS = {
+    label: 'Pagination',
+    previous: 'Previous page',
+    next: 'Next page',
+    page: 'Page {page}',
+    status: 'Page {current} of {count}',
+};
+/** The side-nav action intent: `id` is the page number, `action` is `"page"`. */
+export const paginationActionEvent = event('odd-action', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    intent: 'user',
+    description: 'A page button was activated (without `href`): `detail.id` is the page number and `detail.action` is "page". The application sets `current`.',
+});
+/**
+ * Page navigation: the position as text, previous and next, and the first, last, and nearby pages
+ * with ellipses between. With `href`, pages are links; without it, buttons that report
+ * `odd-action` so the application can load the page.
+ *
+ * @csspart base - The `<nav>` surface.
+ * @csspart status - The position text ("Page 3 of 12").
+ * @csspart list - The list of controls.
+ * @csspart previous - The previous-page link or button.
+ * @csspart next - The next-page link or button.
+ * @csspart page - Each page link or button; the current one has `aria-current="page"`.
+ * @csspart ellipsis - The mark between distant pages.
+ * @cssprop --odd-pagination-radius - Corner radius of the surface.
+ * @a11y A `<nav>` landmark named by `label` (default `strings.label`). Pages are named "Page 3" (`strings.page`) and the current one has `aria-current="page"`. At the ends, previous or next is disabled (a disabled button, or a link without `href` with `aria-disabled`). Ellipses are hidden from assistive technology.
+ * @keyboard Tab moves through previous, the pages, and next; Enter (and Space on buttons) activates.
+ * @previewRole pagination
+ * @useFor Moving through a long list or result set one page at a time.
+ * @notFor Steps of a process; switching views (use odd-tabs); short lists (show everything).
+ * @category Navigation
+ * @customization 1 2 3
+ */
+export class OddkinPagination extends OddkinElement.with({
+    label: prop.string({
+        default: '',
+        description: 'Names the navigation; default `strings.label`.',
+    }),
+    current: prop.string({ default: '1', description: 'The current page number.' }),
+    pageCount: prop.number({ default: 1, description: 'The number of pages (at least 1).' }),
+    href: prop.string({
+        default: '',
+        description: 'A link template with `{page}`, as in "?page={page}"; when set, pages are links.',
+    }),
+    strings: prop.object({
+        description: 'Localized string overrides.',
+    }),
+}) {
+    static events = { 'odd-action': paginationActionEvent };
+    /** @internal The number of pages, at least 1. */
+    _count = computed(() => Math.max(1, Math.floor(this.pageCount) || 1));
+    /** @internal The current page, within 1 and the page count. */
+    _page = computed(() => Math.min(this._count.value, Math.max(1, Math.floor(Number(this.current)) || 1)));
+    /** @internal The built-in text with the author's overrides. */
+    _strings = computed(() => strings(PAGINATION_STRINGS, this.strings));
+    /**
+     * @internal Previous, the pages shown, gaps, and next. Shown: the first and last page, the
+     * current one and its neighbours, the first or last three near either end; a gap of one page
+     * shows that page instead.
+     */
+    _entries = computed(() => {
+        const count = this._count.value;
+        const page = this._page.value;
+        const shown = new Set([1, count, page - 1, page, page + 1]);
+        if (page <= 2)
+            [1, 2, 3].forEach((p) => shown.add(p));
+        if (page >= count - 1)
+            [count - 2, count - 1, count].forEach((p) => shown.add(p));
+        const pages = [...shown].filter((p) => p >= 1 && p <= count).sort((a, b) => a - b);
+        const mode = this.href ? 'link' : 'button';
+        const entries = [{ kind: 'previous', key: `${mode}:previous` }];
+        pages.forEach((p, i) => {
+            const before = pages[i - 1];
+            if (before !== undefined && p - before === 2)
+                entries.push({ kind: 'page', key: `${mode}:${p - 1}`, page: p - 1 });
+            else if (before !== undefined && p - before > 2)
+                entries.push({ kind: 'gap', key: `${mode}:gap:${p}` });
+            entries.push({ kind: 'page', key: `${mode}:${p}`, page: p });
+        });
+        entries.push({ kind: 'next', key: `${mode}:next` });
+        return entries;
+    });
+    /** @internal The position as text (`strings.status`). */
+    _status = computed(() => format(this._strings.value.status, {
+        current: String(this._page.value),
+        count: String(this._count.value),
+    }));
+    /** @internal The link to a page, from the `href` template. */
+    _hrefFor(page) {
+        return this.href.replaceAll('{page}', String(page));
+    }
+    /** @internal A page button was activated. */
+    _go(page) {
+        this.emit(paginationActionEvent, { id: String(page), action: 'page' });
+    }
+    /** @internal The name of a page control. */
+    _pageLabel(page) {
+        return format(this._strings.value.page, { page: String(page) });
+    }
+}
+//# sourceMappingURL=pagination.js.map

package/dist/pagination/pagination.js.map

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

package/dist/pagination/pagination.structural.styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The position text at the start and the controls at the end of one row, wrapping when narrow.
+ * No brand or visual tokens.
+ */
+export declare const paginationStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=pagination.structural.styles.d.ts.map

package/dist/pagination/pagination.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.structural.styles.d.ts","sourceRoot":"","sources":["../../src/pagination/pagination.structural.styles.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,0BAA0B,yCAuDtC,CAAC"}

package/dist/pagination/pagination.structural.styles.js

@@ -0,0 +1,62 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The position text at the start and the controls at the end of one row, wrapping when narrow.
+ * No brand or visual tokens.
+ */
+export const paginationStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    min-inline-size: 0;
+  }
+  .status {
+    margin: 0;
+  }
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .tile {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    margin: 0;
+    border-style: solid;
+    font: inherit;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .tile:disabled,
+  .tile[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+  .ellipsis {
+    display: inline-flex;
+  }
+  @media (forced-colors: active) {
+    .tile {
+      border-color: ButtonText;
+    }
+    .pagination .tile[aria-current='page'] {
+      border-color: Highlight;
+      background: Highlight;
+      color: HighlightText;
+    }
+    .pagination .tile:disabled,
+    .pagination .tile[aria-disabled='true'] {
+      border-color: GrayText;
+      color: GrayText;
+    }
+  }
+`;
+//# sourceMappingURL=pagination.structural.styles.js.map

package/dist/pagination/pagination.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.structural.styles.js","sourceRoot":"","sources":["../../src/pagination/pagination.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;GAGG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuD5C,CAAC"}

package/dist/pagination/pagination.styles.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Oddkin's default pagination: Figma `Pagination` (a default surface with `control/radius`; the
+ * position in secondary text; square controls bordered in `border/default`, previous and next in
+ * `border/strong`; the current page in the selection colours).
+ */
+export declare const paginationStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=pagination.styles.d.ts.map