@fusion.dev/helix-headless 0.0.0-dev

package/dist/pagination/size/pagination-size.d.ts

@@ -0,0 +1,127 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { nothing, type PropertyValues, type TemplateResult } from 'lit';
+import '../../option/index.js';
+import '../../select/index.js';
+/**
+ * @summary Chooses how many items a page holds.
+ *
+ * @description
+ * Its own element beside `Pagination` rather than a slot inside it, for the
+ * reason `Pagination.Summary` is: a footer's direction and order are the
+ * consumer's, and a control that can only sit at one end of one row has taken
+ * that decision for them.
+ *
+ * **`Select`, not a native `<select>`.** It was native first, on the argument
+ * that the platform's own menu is a wheel on a phone and the widget a
+ * screen-reader user already knows. What that argument leaves out is that the
+ * library then has two dropdowns that are identical closed and different open,
+ * and a reader meets both in the same footer as a table's filters. Consistency
+ * is the whole product here, and it wins.
+ *
+ * What it takes back with it: the caret is `Select`'s again rather than a color
+ * literal baked into a data URI, because a background image cannot read
+ * `currentColor`, and the label is a real `<label for>` against the trigger's
+ * own id, which `Select` already renders and already tests.
+ *
+ * **The label sits on the row, not above it.** Every other field in the library
+ * stacks its label because it stands in a column of fields; this one stands in a
+ * footer beside a run of page numbers, and a two-line control there makes the
+ * whole row two lines tall. `Select`'s host is a column, and an outer-tree rule
+ * beats a `:host` rule, so turning it into a row needs no property on `Select`
+ * and nothing written into the consumer's markup.
+ *
+ * **An empty `sizes` renders nothing.** A chooser with nothing to choose from
+ * is a control a reader can operate and cannot use, which is worse than an
+ * absence. Falling back to the built-in list was the other answer and it is a
+ * component overruling a consumer who said "none". Same rule as `Pagination`
+ * over a single page, and reported the same way, through
+ * `ElementInternals.states` rather than an attribute the server never wrote.
+ *
+ * `value` is the controlled property and `default-value` seeds one this owns,
+ * the same contract every other stateful element here carries. Changing it
+ * announces `helix-before-change`; what a consumer does with that is re-query and move
+ * back to page one, which is theirs to decide because only they know whether
+ * the reader's position should survive it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Page size, Rows per page
+ * @documentation https://helix.fusion.dev/components/pagination
+ *
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the size changes, and cancelable. The only way to refuse one.
+ *
+ * @csspart control - The select.
+ * @csspart label - The words beside the number, forwarded from the select.
+ * @csspart trigger - The closed control, forwarded from the select.
+ * @csspart value - The chosen size inside the trigger, forwarded from the select.
+ */
+export declare class HelixHeadlessPaginationSize extends HelixElement {
+    /**
+     * The sizes offered, comma separated.
+     *
+     * A string rather than an array, so the whole control is expressible in
+     * markup and survives a server render. Anything that is not a positive number
+     * is dropped rather than rendered as an option that cannot mean anything.
+     */
+    sizes: string;
+    /**
+     * The size in force.
+     *
+     * Reading gives the real one; writing declares it the consumer's, and
+     * `default-value` seeds one this element owns. Same accessor pair as
+     * `Pagination.page` and the calendar's `month`.
+     *
+     *
+     */
+    get value(): number;
+    set value(next: number);
+    /**
+     * Size to start on, where nothing declared one.
+     */
+    defaultValue: number;
+    /**
+     * The words beside the control.
+     */
+    label: string;
+    /**
+     * Locale for the numbers.
+     *
+     * Absent uses the runtime's own.
+     */
+    locale: string;
+    /** The size, whoever set it, and `undefined` until somebody has. */
+    private valueState;
+    /** Held across every component asking for the same locale. */
+    private get numbers();
+    /** The sizes, parsed once, with anything that is not a size dropped. */
+    private get options();
+    /** The one in force, which is the first offered where nothing named one. */
+    private get current();
+    private readonly handleChange;
+    protected willUpdate(changed: PropertyValues): void;
+    /**
+     * The control itself, which is the whole of this part, behind a seam the styled tier can move.
+     *
+     * A method rather than a fragment inline, so a tier above can render its own,
+     * wrap this one, pass it a property the base does not know about, or leave it
+     * out, without reimplementing the whole template to do any of them.
+     *
+     * **The tags are interpolated, so each tier renders its own.** They were
+     * written out as `<helix-select>` on the argument that each tier imports its
+     * own element under that name, which works and costs more than it looks: the
+     * name means two different things depending on what a consumer imported, this
+     * tier composes an element it does not ship, and the composition cannot be
+     * tested here at all, since there is no `helix-select` on this tier to test it
+     * against. `tier` resolves the name instead, and the styled subclass changes
+     * it in one line rather than reimplementing this method. A tier that renders
+     * its own elements is a tier that stands alone, which is the claim the package
+     * makes.
+     */
+    protected renderSelect(): TemplateResult;
+    protected render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-pagination-size': HelixHeadlessPaginationSize;
+    }
+}

package/dist/pagination/size/pagination-size.js

@@ -0,0 +1,232 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, formatNumbers, HelixBeforeChangeEvent, HelixElement, requestChange, } from '@fusion.dev/helix-core';
+import { nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { html } from 'lit/static-html.js';
+/* Side-effect imports, because this renders a select and an option in its own
+   shadow root and a custom element registers on import. The paths are relative,
+   so this registers the base pair and the styled file's identical imports
+   register the styled pair; `tier` picks which names the template asks for. */
+import '../../option/index.js';
+import '../../select/index.js';
+/**
+ * @summary Chooses how many items a page holds.
+ *
+ * @description
+ * Its own element beside `Pagination` rather than a slot inside it, for the
+ * reason `Pagination.Summary` is: a footer's direction and order are the
+ * consumer's, and a control that can only sit at one end of one row has taken
+ * that decision for them.
+ *
+ * **`Select`, not a native `<select>`.** It was native first, on the argument
+ * that the platform's own menu is a wheel on a phone and the widget a
+ * screen-reader user already knows. What that argument leaves out is that the
+ * library then has two dropdowns that are identical closed and different open,
+ * and a reader meets both in the same footer as a table's filters. Consistency
+ * is the whole product here, and it wins.
+ *
+ * What it takes back with it: the caret is `Select`'s again rather than a color
+ * literal baked into a data URI, because a background image cannot read
+ * `currentColor`, and the label is a real `<label for>` against the trigger's
+ * own id, which `Select` already renders and already tests.
+ *
+ * **The label sits on the row, not above it.** Every other field in the library
+ * stacks its label because it stands in a column of fields; this one stands in a
+ * footer beside a run of page numbers, and a two-line control there makes the
+ * whole row two lines tall. `Select`'s host is a column, and an outer-tree rule
+ * beats a `:host` rule, so turning it into a row needs no property on `Select`
+ * and nothing written into the consumer's markup.
+ *
+ * **An empty `sizes` renders nothing.** A chooser with nothing to choose from
+ * is a control a reader can operate and cannot use, which is worse than an
+ * absence. Falling back to the built-in list was the other answer and it is a
+ * component overruling a consumer who said "none". Same rule as `Pagination`
+ * over a single page, and reported the same way, through
+ * `ElementInternals.states` rather than an attribute the server never wrote.
+ *
+ * `value` is the controlled property and `default-value` seeds one this owns,
+ * the same contract every other stateful element here carries. Changing it
+ * announces `helix-before-change`; what a consumer does with that is re-query and move
+ * back to page one, which is theirs to decide because only they know whether
+ * the reader's position should survive it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Page size, Rows per page
+ * @documentation https://helix.fusion.dev/components/pagination
+ *
+ * @event {HelixBeforeChangeEvent} helix-before-change - Fired before the size changes, and cancelable. The only way to refuse one.
+ *
+ * @csspart control - The select.
+ * @csspart label - The words beside the number, forwarded from the select.
+ * @csspart trigger - The closed control, forwarded from the select.
+ * @csspart value - The chosen size inside the trigger, forwarded from the select.
+ */
+let HelixHeadlessPaginationSize = class HelixHeadlessPaginationSize extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The sizes offered, comma separated.
+         *
+         * A string rather than an array, so the whole control is expressible in
+         * markup and survives a server render. Anything that is not a positive number
+         * is dropped rather than rendered as an option that cannot mean anything.
+         */
+        this.sizes = '10,25,50,100';
+        /**
+         * Size to start on, where nothing declared one.
+         */
+        this.defaultValue = 0;
+        /**
+         * The words beside the control.
+         */
+        this.label = 'Per page';
+        /**
+         * Locale for the numbers.
+         *
+         * Absent uses the runtime's own.
+         */
+        this.locale = '';
+        /** The size, whoever set it, and `undefined` until somebody has. */
+        this.valueState = undefined;
+        this.handleChange = (event) => {
+            /* Stopped, then re-announced under this element's own name. `Select`'s
+               `helix-before-change` bubbles and is composed, so left alone it would cross this
+               shadow boundary and be retargeted to look like this element's: a consumer
+               would get two events per change, one of them carrying `Select`'s idea of
+               what a name and a value are. */
+            event.stopPropagation();
+            const next = Number.parseInt(event.detail?.value ?? '', 10);
+            if (!Number.isFinite(next) || next === this.current) {
+                return;
+            }
+            requestChange({
+                apply: (size) => {
+                    const previous = this.value;
+                    this.valueState = size;
+                    this.requestUpdate('value', previous);
+                },
+                event: (size) => new HelixBeforeChangeEvent({ value: String(size) }),
+                host: this,
+                next,
+            });
+            /* Put back where the consumer refused it or owns it, because the control has
+               already moved: a select changes itself and then tells you, which is the
+               one case `requestChange` cannot announce ahead of. Lit skips a
+               property binding whose value has not changed, so a refusal leaves the
+               select holding the reader's choice and nothing else would put it back.
+               Deferred, so the read happens after the render a successful change asked
+               for rather than racing it. */
+            this.updateComplete.then(() => {
+                const control = this.renderRoot?.querySelector('[part="control"]');
+                if (control && control.value !== String(this.current)) {
+                    control.value = String(this.current);
+                }
+            });
+        };
+    }
+    /**
+     * The size in force.
+     *
+     * Reading gives the real one; writing declares it the consumer's, and
+     * `default-value` seeds one this element owns. Same accessor pair as
+     * `Pagination.page` and the calendar's `month`.
+     *
+     *
+     */
+    get value() {
+        return this.valueState ?? this.defaultValue;
+    }
+    set value(next) {
+        const previous = this.value;
+        this.valueState = next;
+        this.requestUpdate('value', previous);
+    }
+    /** Held across every component asking for the same locale. */
+    get numbers() {
+        return formatNumbers(this.locale);
+    }
+    /** The sizes, parsed once, with anything that is not a size dropped. */
+    get options() {
+        return this.sizes
+            .split(',')
+            .map((one) => Number.parseInt(one.trim(), 10))
+            .filter((one) => Number.isFinite(one) && one > 0);
+    }
+    /** The one in force, which is the first offered where nothing named one. */
+    get current() {
+        const options = this.options;
+        return options.includes(this.value) ? this.value : (options[0] ?? 0);
+    }
+    willUpdate(changed) {
+        super.willUpdate(changed);
+        /* Through `toggleState`, like `Pagination`'s: an engine without
+           `CustomStateSet` gets an empty select rather than no element, which is the
+           behavior this had before. */
+        this.toggleState('empty', this.options.length === 0);
+    }
+    /**
+     * The control itself, which is the whole of this part, behind a seam the styled tier can move.
+     *
+     * A method rather than a fragment inline, so a tier above can render its own,
+     * wrap this one, pass it a property the base does not know about, or leave it
+     * out, without reimplementing the whole template to do any of them.
+     *
+     * **The tags are interpolated, so each tier renders its own.** They were
+     * written out as `<helix-select>` on the argument that each tier imports its
+     * own element under that name, which works and costs more than it looks: the
+     * name means two different things depending on what a consumer imported, this
+     * tier composes an element it does not ship, and the composition cannot be
+     * tested here at all, since there is no `helix-select` on this tier to test it
+     * against. `tier` resolves the name instead, and the styled subclass changes
+     * it in one line rather than reimplementing this method. A tier that renders
+     * its own elements is a tier that stands alone, which is the claim the package
+     * makes.
+     */
+    renderSelect() {
+        const select = this.tag('select');
+        const option = this.tag('option');
+        return html `<${select}
+      part="control"
+      exportparts="label, trigger, value"
+      label=${this.label}
+      .value=${String(this.current)}
+      @helix-before-change=${this.handleChange}
+    >
+      ${this.options.map((size) => html `<${option} value=${String(size)}>${this.numbers(size)}</${option}>`)}
+    </${select}>`;
+    }
+    render() {
+        if (this.options.length === 0) {
+            return nothing;
+        }
+        /* `Select` renders the label and gives the trigger the id it points at, so
+           the association is the platform's and is already covered by that
+           component's own specs. Nothing here reconstructs it. */
+        return html `${this.renderSelect()}`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessPaginationSize.prototype, "sizes", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessPaginationSize.prototype, "value", null);
+__decorate([
+    property({ attribute: 'default-value', type: Number })
+], HelixHeadlessPaginationSize.prototype, "defaultValue", void 0);
+__decorate([
+    property()
+], HelixHeadlessPaginationSize.prototype, "label", void 0);
+__decorate([
+    property()
+], HelixHeadlessPaginationSize.prototype, "locale", void 0);
+HelixHeadlessPaginationSize = __decorate([
+    customElement('helix-headless-pagination-size')
+], HelixHeadlessPaginationSize);
+export { HelixHeadlessPaginationSize };

package/dist/pagination/summary/pagination-summary.d.ts

@@ -0,0 +1,90 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type TemplateResult } from 'lit';
+/**
+ * @summary Reads out which items of how many are on show.
+ *
+ * @description
+ * Its own element rather than a part of `Pagination`, so a consumer decides
+ * where it goes. Inside the run it could only ever be at one end of one row;
+ * beside it, it goes above, below, in a table's caption, or on the other side of
+ * the page, and the direction and order of the whole footer are the consumer's.
+ *
+ * **It repeats `page`, `page-size` and `total`, and the cost of that is skew
+ * rather than verbosity.** Those three come from the consumer's own query, so
+ * writing them on two elements is one variable used twice; what it risks is the
+ * two disagreeing, and a count reading `76-100 of 248` beside a run showing page
+ * 7 is the same failure this element's own clamping exists to prevent, arriving
+ * from the outside instead.
+ *
+ * **Nothing removes it at this level, and that was measured rather than
+ * assumed.** A coordinating root can only reach children the consumer laid out
+ * by writing attributes onto them, which a framework reports as a hydration
+ * error, or through context, which is dead on a server: `@lit/context`
+ * subscribes from `connectedCallback`, and Lit SSR does not call it, so every
+ * value is `undefined` in exactly the render this element exists to be part of.
+ * Confirmed against Lit SSR directly. The fork is real: children in the light
+ * DOM mean the consumer owns the layout and no root can feed them; children in a
+ * shadow root mean a root feeds them by ordinary binding and owns the layout.
+ *
+ * **It resolves one level up, at a composite, and the state is why.** `page`,
+ * `page-size` and `total` are facts about a *result*, not about a pagination, so
+ * the element that should hold them once is the one that holds the result: a
+ * data table composing a pagination inside itself, rather than a pagination root
+ * invented to hold three pagination elements together. That root would have been
+ * plumbing; a table's paging state is the thing itself. And because a composite
+ * renders its parts into its own shadow root, it lands on the side of the fork
+ * where binding works and the server renders, at no cost to anyone.
+ *
+ * Renders nothing without a `total` and a `page-size`. A wrong count is worse
+ * than none: it is the one number in a footer a reader cannot check against
+ * anything else on screen.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Result count, Range
+ * @documentation https://helix.fusion.dev/components/pagination
+ */
+export declare class HelixHeadlessPaginationSummary extends HelixElement {
+    /**
+     * The page on show, one-based.
+     */
+    page: number;
+    /**
+     * How many items are on a page.
+     */
+    pageSize: number;
+    /**
+     * How many items there are across every page.
+     */
+    total: number;
+    /**
+     * The reading, with `{from}`, `{to}` and `{total}` filled in.
+     *
+     * A template rather than a prefix and a suffix, because word order is not
+     * universal: `format="{total} 件中 {from}-{to} 件"` is one attribute here and
+     * three concatenations anywhere else.
+     *
+     * **`format`, not `label`, and the difference is worth the rename.** `label`
+     * across this library means the accessible name of a thing that has one:
+     * `Pagination.label` names the landmark and `Pagination.Size.label` is the
+     * words beside the control. This is neither. It is the whole visible content
+     * of the element, so calling it `label` put one word on three jobs inside one
+     * family. The root's templates are `pageLabel`, `statusLabel` and `gapLabel`,
+     * which each label something; this labels nothing, it *is* the thing.
+     */
+    format: string;
+    /**
+     * Locale for the numbers.
+     *
+     * Absent uses the runtime's own.
+     */
+    locale: string;
+    /** Held across every component asking for the same locale. */
+    private get numbers();
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-pagination-summary': HelixHeadlessPaginationSummary;
+    }
+}

package/dist/pagination/summary/pagination-summary.js

@@ -0,0 +1,145 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement, formatNumbers, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+/**
+ * @summary Reads out which items of how many are on show.
+ *
+ * @description
+ * Its own element rather than a part of `Pagination`, so a consumer decides
+ * where it goes. Inside the run it could only ever be at one end of one row;
+ * beside it, it goes above, below, in a table's caption, or on the other side of
+ * the page, and the direction and order of the whole footer are the consumer's.
+ *
+ * **It repeats `page`, `page-size` and `total`, and the cost of that is skew
+ * rather than verbosity.** Those three come from the consumer's own query, so
+ * writing them on two elements is one variable used twice; what it risks is the
+ * two disagreeing, and a count reading `76-100 of 248` beside a run showing page
+ * 7 is the same failure this element's own clamping exists to prevent, arriving
+ * from the outside instead.
+ *
+ * **Nothing removes it at this level, and that was measured rather than
+ * assumed.** A coordinating root can only reach children the consumer laid out
+ * by writing attributes onto them, which a framework reports as a hydration
+ * error, or through context, which is dead on a server: `@lit/context`
+ * subscribes from `connectedCallback`, and Lit SSR does not call it, so every
+ * value is `undefined` in exactly the render this element exists to be part of.
+ * Confirmed against Lit SSR directly. The fork is real: children in the light
+ * DOM mean the consumer owns the layout and no root can feed them; children in a
+ * shadow root mean a root feeds them by ordinary binding and owns the layout.
+ *
+ * **It resolves one level up, at a composite, and the state is why.** `page`,
+ * `page-size` and `total` are facts about a *result*, not about a pagination, so
+ * the element that should hold them once is the one that holds the result: a
+ * data table composing a pagination inside itself, rather than a pagination root
+ * invented to hold three pagination elements together. That root would have been
+ * plumbing; a table's paging state is the thing itself. And because a composite
+ * renders its parts into its own shadow root, it lands on the side of the fork
+ * where binding works and the server renders, at no cost to anyone.
+ *
+ * Renders nothing without a `total` and a `page-size`. A wrong count is worse
+ * than none: it is the one number in a footer a reader cannot check against
+ * anything else on screen.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Result count, Range
+ * @documentation https://helix.fusion.dev/components/pagination
+ */
+let HelixHeadlessPaginationSummary = class HelixHeadlessPaginationSummary extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The page on show, one-based.
+         */
+        this.page = 1;
+        /**
+         * How many items are on a page.
+         */
+        this.pageSize = 0;
+        /**
+         * How many items there are across every page.
+         */
+        this.total = 0;
+        /**
+         * The reading, with `{from}`, `{to}` and `{total}` filled in.
+         *
+         * A template rather than a prefix and a suffix, because word order is not
+         * universal: `format="{total} 件中 {from}-{to} 件"` is one attribute here and
+         * three concatenations anywhere else.
+         *
+         * **`format`, not `label`, and the difference is worth the rename.** `label`
+         * across this library means the accessible name of a thing that has one:
+         * `Pagination.label` names the landmark and `Pagination.Size.label` is the
+         * words beside the control. This is neither. It is the whole visible content
+         * of the element, so calling it `label` put one word on three jobs inside one
+         * family. The root's templates are `pageLabel`, `statusLabel` and `gapLabel`,
+         * which each label something; this labels nothing, it *is* the thing.
+         */
+        this.format = '{from}-{to} of {total}';
+        /**
+         * Locale for the numbers.
+         *
+         * Absent uses the runtime's own.
+         */
+        this.locale = '';
+    }
+    /** Held across every component asking for the same locale. */
+    get numbers() {
+        return formatNumbers(this.locale);
+    }
+    render() {
+        /* An empty template rather than `nothing`, so the element generates a box
+           with no text in it: a footer laid out as a grid keeps its column, and a
+           count that appears when the total loads does not move the controls beside
+           it. */
+        if (this.total <= 0 || this.pageSize <= 0) {
+            return html ``;
+        }
+        const size = Math.max(1, Math.floor(this.pageSize));
+        /* **The page is clamped to the range, not just the window inside it.**
+           Only the end was, so a `page` past the last one produced a start past the
+           total and an end pinned to it: at page 99 of a 10-page result this read
+           "2,451-248 of 248", a range running backwards. That is the worst kind of
+           wrong here, because a count is the one number in a footer a reader cannot
+           check against anything else on screen.
+        
+           A page past the end is not far-fetched either: it is a bookmarked query
+           after the result shrank, and the run beside this clamps it silently, so
+           the two would disagree with only this one visibly broken. */
+        const pages = Math.max(1, Math.ceil(this.total / size));
+        const page = Math.min(pages, Math.max(1, Math.floor(this.page) || 1));
+        const from = (page - 1) * size + 1;
+        /* And the end is clamped to the total, because the last page is rarely
+           full: 248 items at 25 a page end at 248, not at 250. */
+        const to = Math.min(this.total, from + size - 1);
+        return html `${this.format
+            .replaceAll('{from}', this.numbers(from))
+            .replaceAll('{to}', this.numbers(to))
+            .replaceAll('{total}', this.numbers(this.total))}`;
+    }
+};
+__decorate([
+    property({ type: Number })
+], HelixHeadlessPaginationSummary.prototype, "page", void 0);
+__decorate([
+    property({ attribute: 'page-size', type: Number })
+], HelixHeadlessPaginationSummary.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessPaginationSummary.prototype, "total", void 0);
+__decorate([
+    property()
+], HelixHeadlessPaginationSummary.prototype, "format", void 0);
+__decorate([
+    property()
+], HelixHeadlessPaginationSummary.prototype, "locale", void 0);
+HelixHeadlessPaginationSummary = __decorate([
+    customElement('helix-headless-pagination-summary')
+], HelixHeadlessPaginationSummary);
+export { HelixHeadlessPaginationSummary };

package/dist/pin-input/index.d.ts

@@ -0,0 +1 @@
+export * from './root/pin-input-root.js';

package/dist/pin-input/index.js

@@ -0,0 +1 @@
+export * from './root/pin-input-root.js';