@fusion.dev/helix 0.0.0-dev

package/dist/outline/root/outline-root.css.js

@@ -0,0 +1,144 @@
+// Generated from src/outline/root/outline-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+
+--outline-rail: var(--helix-space-2xs);
+}
+
+[part="nav"] {
+background-image: linear-gradient(var(--helix-color-border), var(--helix-color-border));
+
+background-position: calc((var(--outline-rail) - var(--helix-border-thin)) / 2) 0;
+background-repeat: repeat-y;
+background-size: var(--helix-border-thin) 100%;
+display: flex;
+flex-direction: column;
+
+position: relative;
+}
+
+[part="indicator"] {
+--_mark-width: var(--helix-border-thin);
+
+background-color: var(--helix-color-primary);
+block-size: var(--indicator-block-size, 0);
+border-radius: var(--helix-radii-full);
+inline-size: var(--_mark-width);
+inset-block-start: 0;
+inset-inline-start: calc((var(--outline-rail) - var(--_mark-width)) / 2);
+opacity: 0;
+position: absolute;
+translate: 0 var(--indicator-y, 0);
+
+transition:
+translate var(--helix-duration-normal) var(--helix-easing-spring),
+block-size var(--helix-duration-slow) var(--helix-easing-decelerate),
+inline-size var(--helix-duration-normal) var(--helix-easing-standard),
+inset-inline-start var(--helix-duration-normal) var(--helix-easing-standard),
+opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="indicator"][data-placed] {
+opacity: 1;
+}
+
+:host(:hover) [part="indicator"]:not([data-moving]) {
+--_mark-width: var(--helix-border-thick);
+}
+
+[part="indicator"][data-moving] {
+--_mark-width: var(--outline-rail);
+
+transition:
+translate var(--helix-duration-normal) var(--helix-easing-spring),
+block-size var(--helix-duration-slow) var(--helix-easing-decelerate),
+inline-size var(--helix-duration-fast) var(--helix-easing-decelerate),
+inset-inline-start var(--helix-duration-fast) var(--helix-easing-decelerate),
+opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"],
+[part="indicator"][data-moving] {
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+}
+
+::slotted(a) {
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+
+font-size: var(--helix-text-xs);
+
+font-weight: var(--helix-weight-medium);
+line-height: var(--helix-leading-normal);
+
+margin-inline-start: var(--outline-rail, var(--helix-border-thick));
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-sm);
+text-decoration: none;
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+::slotted(a):hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);
+color: var(--helix-color-foreground);
+text-decoration: none;
+}
+
+::slotted(a[aria-current]) {
+color: var(--helix-color-foreground);
+
+font-weight: var(--helix-weight-semibold);
+}
+
+::slotted(a[data-level="2"]) {
+padding-inline-start: calc(var(--helix-space-sm) + var(--outline-indent, var(--helix-space-sm)));
+}
+
+::slotted(a[data-level="3"]) {
+padding-inline-start: calc(
+var(--helix-space-sm) +
+2 *
+var(--outline-indent, var(--helix-space-sm))
+);
+}
+
+::slotted(a[data-level="4"]) {
+padding-inline-start: calc(
+var(--helix-space-sm) +
+3 *
+var(--outline-indent, var(--helix-space-sm))
+);
+}
+
+::slotted(a[data-level="5"]) {
+padding-inline-start: calc(
+var(--helix-space-sm) +
+4 *
+var(--outline-indent, var(--helix-space-sm))
+);
+}
+
+::slotted(a[data-level="6"]) {
+padding-inline-start: calc(
+var(--helix-space-sm) +
+5 *
+var(--outline-indent, var(--helix-space-sm))
+);
+}
+
+@media (prefers-reduced-motion: reduce) {
+::slotted(a) {
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

package/dist/outline/root/outline-root.d.ts

@@ -0,0 +1,31 @@
+import { HelixHeadlessOutline } from '@fusion.dev/helix-headless/outline';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Links to the headings on this page, marking the one being read.
+ *
+ * @description
+ * A rule down the leading edge with the current section lit along it, which is
+ * the shape a table of contents has taken since printed marginalia: the line
+ * says the list is one thing, and the lit segment says where in it you are.
+ *
+ * Nesting is the consumer's, expressed as `data-level` on a link. A outline
+ * that read heading levels itself would have to look at the document, and the
+ * document is not always where the headings are.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Table of contents, On this page, Outline
+ * @documentation https://helix.fusion.dev/components/outline
+ *
+ * @cssproperty --outline-indent - How far each level is inset from the one above.
+ * @cssproperty --outline-rail - Width of the gutter the rule and the traveling mark share.
+ */
+export declare class HelixOutline extends HelixHeadlessOutline {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-outline': HelixOutline;
+    }
+}

package/dist/outline/root/outline-root.js

@@ -0,0 +1,37 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessOutline } from '@fusion.dev/helix-headless/outline';
+import { styles } from './outline-root.css.js';
+/**
+ * @summary Links to the headings on this page, marking the one being read.
+ *
+ * @description
+ * A rule down the leading edge with the current section lit along it, which is
+ * the shape a table of contents has taken since printed marginalia: the line
+ * says the list is one thing, and the lit segment says where in it you are.
+ *
+ * Nesting is the consumer's, expressed as `data-level` on a link. A outline
+ * that read heading levels itself would have to look at the document, and the
+ * document is not always where the headings are.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Table of contents, On this page, Outline
+ * @documentation https://helix.fusion.dev/components/outline
+ *
+ * @cssproperty --outline-indent - How far each level is inset from the one above.
+ * @cssproperty --outline-rail - Width of the gutter the rule and the traveling mark share.
+ */
+let HelixOutline = class HelixOutline extends HelixHeadlessOutline {
+    static { this.styles = styles; }
+};
+HelixOutline = __decorate([
+    customElement('helix-outline')
+], HelixOutline);
+export { HelixOutline };

package/dist/pagination/index.d.ts

@@ -0,0 +1,3 @@
+export * from './root/pagination-root.js';
+export * from './size/pagination-size.js';
+export * from './summary/pagination-summary.js';

package/dist/pagination/index.js

@@ -0,0 +1,3 @@
+export * from './root/pagination-root.js';
+export * from './size/pagination-size.js';
+export * from './summary/pagination-summary.js';

package/dist/pagination/root/pagination-root.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/pagination/root/pagination-root.css.js

@@ -0,0 +1,158 @@
+// Generated from src/pagination/root/pagination-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+align-items: center;
+display: flex;
+flex-wrap: wrap;
+font-size: var(--helix-text-sm);
+gap: var(--pagination-gap, var(--helix-space-2xs));
+}
+
+[part="list"] {
+align-items: center;
+display: flex;
+flex-wrap: wrap;
+gap: var(--pagination-gap, var(--helix-space-2xs));
+
+list-style: none;
+margin: var(--helix-space-none);
+padding: var(--helix-space-none);
+}
+
+[part="item"] {
+display: inline-flex;
+}
+
+[part="first"],
+[part="gap"],
+[part="last"],
+[part="page"],
+[part="previous"],
+[part="next"] {
+align-items: center;
+appearance: none;
+background-color: transparent;
+block-size: var(--pagination-size, var(--helix-size-control-tight));
+border: var(--helix-border-thin) solid transparent;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+font: inherit;
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+justify-content: center;
+min-inline-size: var(--pagination-size, var(--helix-size-control-tight));
+padding-inline: var(--helix-space-2xs);
+text-decoration: none;
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="first"]:hover,
+[part="gap"]:hover,
+[part="last"]:hover,
+[part="page"]:hover,
+[part="previous"]:hover,
+[part="next"]:hover {
+background-color: var(--pagination-hover-color, var(--helix-color-surface-sunken));
+color: var(--helix-color-foreground);
+}
+
+[part="first"]:focus-visible,
+[part="gap"]:focus-visible,
+[part="last"]:focus-visible,
+[part="page"]:focus-visible,
+[part="previous"]:focus-visible,
+[part="next"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="page"][aria-current="page"],
+[part="page"][aria-current="page"]:hover {
+background-color: var(--pagination-current-color, var(--helix-color-surface-raised));
+border-color: var(--helix-color-border);
+color: var(--helix-color-foreground);
+font-weight: var(--helix-weight-semibold);
+}
+
+[part="first"]:disabled,
+[part="last"]:disabled,
+[part="previous"]:disabled,
+[part="next"]:disabled,
+[part="first"][aria-disabled="true"],
+[part="last"][aria-disabled="true"],
+[part="previous"][aria-disabled="true"],
+[part="next"][aria-disabled="true"] {
+color: var(--helix-color-foreground-subtle);
+cursor: default;
+opacity: 0.5;
+pointer-events: none;
+}
+
+[part="first"] svg,
+[part="last"] svg,
+[part="previous"] svg,
+[part="next"] svg,
+::slotted([slot="first-icon"]),
+::slotted([slot="last-icon"]),
+::slotted([slot="previous-icon"]),
+::slotted([slot="next-icon"]) {
+block-size: var(--helix-size-icon-tight);
+inline-size: var(--helix-size-icon-tight);
+}
+
+:host(:dir(rtl)) [part="first"] svg,
+:host(:dir(rtl)) [part="last"] svg,
+:host(:dir(rtl)) [part="previous"] svg,
+:host(:dir(rtl)) [part="next"] svg,
+:host(:dir(rtl)) ::slotted([slot="first-icon"]),
+:host(:dir(rtl)) ::slotted([slot="last-icon"]),
+:host(:dir(rtl)) ::slotted([slot="previous-icon"]),
+:host(:dir(rtl)) ::slotted([slot="next-icon"]) {
+scale: -1 1;
+}
+
+[part="gap"] {
+color: var(--helix-color-foreground-subtle);
+user-select: none;
+}
+
+:host(:state(empty)) {
+display: none;
+}
+
+[part="live"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+[part="status"] {
+color: var(--helix-color-foreground-muted);
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+padding-inline: var(--helix-space-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="first"],
+[part="gap"],
+[part="last"],
+[part="page"],
+[part="previous"],
+[part="next"] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,59 @@
+import { HelixHeadlessPagination } from '@fusion.dev/helix-headless/pagination';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Moves between pages of a longer result.
+ *
+ * @description
+ * One box for every control in the row, arrows and numbers alike, so the run has
+ * a single rhythm and the steps sit at the numbers' height rather than between
+ * them. Square, because a page number is one or two characters and a box sized
+ * to the widest would leave the short ones swimming; `min-inline-size` rather
+ * than a fixed one, so page 100 grows instead of overflowing.
+ *
+ * Figures are tabular throughout. A page number is the one thing here that
+ * changes under the pointer, and proportional digits make the whole row shuffle
+ * as it does.
+ *
+ * The current page is a raised chip rather than a brand fill, which is the
+ * treatment `Tabs` gives its selected tab. Brand on a page number claims more
+ * than the state deserves: it is not a choice the reader made about anything,
+ * it is where they happen to be standing, and a row of gray numbers with one
+ * blue one reads as the blue one being an action.
+ *
+ * Selected on `aria-current` rather than on a second attribute saying the same
+ * thing: the state is already in the accessibility tree, and a `data-current`
+ * beside it would be two places to keep in step.
+ *
+ * The gap takes the same box as everything else in the row and only sits back a
+ * shade in color. It is a control, so it answers hover and focus like one; it
+ * is a way through rather than a destination, so it does not compete.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Pager, Page nav
+ * @documentation https://helix.fusion.dev/components/pagination
+ *
+ * @csspart first - The control that jumps to the first page, under `ends`.
+ * @csspart gap - The control standing over pages not shown, which jumps into them.
+ * @csspart item - One slot in the run, holding a page or a gap.
+ * @csspart last - The control that jumps to the last page, under `ends`.
+ * @csspart list - The run of pages.
+ * @csspart next - The control that moves forward one page.
+ * @csspart page - The control for one page.
+ * @csspart previous - The control that moves back one page.
+ * @csspart status - The reading of where you are, in `compact`.
+ *
+ * @cssproperty --pagination-current-color - Fill behind the page you are on.
+ * @cssproperty --pagination-gap - Space between one control and the next.
+ * @cssproperty --pagination-hover-color - Fill behind a control under the pointer.
+ * @cssproperty --pagination-size - The box every control in the row takes.
+ */
+export declare class HelixPagination extends HelixHeadlessPagination {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-pagination': HelixPagination;
+    }
+}

package/dist/pagination/root/pagination-root.js

@@ -0,0 +1,65 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessPagination } from '@fusion.dev/helix-headless/pagination';
+import { styles } from './pagination-root.css.js';
+/**
+ * @summary Moves between pages of a longer result.
+ *
+ * @description
+ * One box for every control in the row, arrows and numbers alike, so the run has
+ * a single rhythm and the steps sit at the numbers' height rather than between
+ * them. Square, because a page number is one or two characters and a box sized
+ * to the widest would leave the short ones swimming; `min-inline-size` rather
+ * than a fixed one, so page 100 grows instead of overflowing.
+ *
+ * Figures are tabular throughout. A page number is the one thing here that
+ * changes under the pointer, and proportional digits make the whole row shuffle
+ * as it does.
+ *
+ * The current page is a raised chip rather than a brand fill, which is the
+ * treatment `Tabs` gives its selected tab. Brand on a page number claims more
+ * than the state deserves: it is not a choice the reader made about anything,
+ * it is where they happen to be standing, and a row of gray numbers with one
+ * blue one reads as the blue one being an action.
+ *
+ * Selected on `aria-current` rather than on a second attribute saying the same
+ * thing: the state is already in the accessibility tree, and a `data-current`
+ * beside it would be two places to keep in step.
+ *
+ * The gap takes the same box as everything else in the row and only sits back a
+ * shade in color. It is a control, so it answers hover and focus like one; it
+ * is a way through rather than a destination, so it does not compete.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Pager, Page nav
+ * @documentation https://helix.fusion.dev/components/pagination
+ *
+ * @csspart first - The control that jumps to the first page, under `ends`.
+ * @csspart gap - The control standing over pages not shown, which jumps into them.
+ * @csspart item - One slot in the run, holding a page or a gap.
+ * @csspart last - The control that jumps to the last page, under `ends`.
+ * @csspart list - The run of pages.
+ * @csspart next - The control that moves forward one page.
+ * @csspart page - The control for one page.
+ * @csspart previous - The control that moves back one page.
+ * @csspart status - The reading of where you are, in `compact`.
+ *
+ * @cssproperty --pagination-current-color - Fill behind the page you are on.
+ * @cssproperty --pagination-gap - Space between one control and the next.
+ * @cssproperty --pagination-hover-color - Fill behind a control under the pointer.
+ * @cssproperty --pagination-size - The box every control in the row takes.
+ */
+let HelixPagination = class HelixPagination extends HelixHeadlessPagination {
+    static { this.styles = styles; }
+};
+HelixPagination = __decorate([
+    customElement('helix-pagination')
+], HelixPagination);
+export { HelixPagination };

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,24 @@
+// Generated from src/pagination/size/pagination-size.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+}
+
+:host(:state(empty)) {
+display: none;
+}
+
+[part="control"] {
+align-items: center;
+flex-direction: row;
+gap: var(--helix-space-xs);
+}
+
+[part="control"]::part(label) {
+padding-block-end: var(--helix-space-none);
+white-space: nowrap;
+}
+
+[part="control"]::part(trigger) {
+block-size: var(--helix-size-control-tight);
+}`);

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

@@ -0,0 +1,31 @@
+import { HelixHeadlessPaginationSize } from '@fusion.dev/helix-headless/pagination';
+import type { CSSResultGroup } from 'lit';
+import '../../option/index.js';
+import '../../select/index.js';
+/**
+ * @summary Chooses how many items a page holds.
+ *
+ * @description
+ * A `Select`, laid out on one row. Every other field stacks its label because it
+ * stands in a column of fields; this one stands in a footer beside a run of page
+ * numbers, where a two-line control makes the whole row two lines tall.
+ *
+ * `Select`'s own parts are exported, so `::part(trigger)` and `::part(label)`
+ * reach through both boundaries and a consumer styles it as the select it is.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Page size, Rows per page
+ * @documentation https://helix.fusion.dev/components/pagination
+ *
+ * @csspart control - The select.
+ */
+export declare class HelixPaginationSize extends HelixHeadlessPaginationSize {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-pagination-size': HelixPaginationSize;
+    }
+}

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

@@ -0,0 +1,44 @@
+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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessPaginationSize } from '@fusion.dev/helix-headless/pagination';
+/* Side-effect imports, for the reason `Select` gives about the listbox it
+   renders: this renders `<helix-select>` and `<helix-option>` in its own shadow
+   root, a custom element registers on import, and an unregistered one is legal
+   HTML that reports nothing and simply never upgrades. */
+import '../../option/index.js';
+import '../../select/index.js';
+import { styles } from './pagination-size.css.js';
+/**
+ * @summary Chooses how many items a page holds.
+ *
+ * @description
+ * A `Select`, laid out on one row. Every other field stacks its label because it
+ * stands in a column of fields; this one stands in a footer beside a run of page
+ * numbers, where a two-line control makes the whole row two lines tall.
+ *
+ * `Select`'s own parts are exported, so `::part(trigger)` and `::part(label)`
+ * reach through both boundaries and a consumer styles it as the select it is.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Page size, Rows per page
+ * @documentation https://helix.fusion.dev/components/pagination
+ *
+ * @csspart control - The select.
+ */
+let HelixPaginationSize = class HelixPaginationSize extends HelixHeadlessPaginationSize {
+    /* So the seam renders `helix-select` and `helix-option` rather than the base
+       pair the headless tier composes. One word, and the template stays in one
+       place. */
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixPaginationSize = __decorate([
+    customElement('helix-pagination-size')
+], HelixPaginationSize);
+export { HelixPaginationSize };

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,9 @@
+// Generated from src/pagination/summary/pagination-summary.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+color: var(--helix-color-foreground-subtle);
+display: inline-block;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+}`);

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

@@ -0,0 +1,23 @@
+import { HelixHeadlessPaginationSummary } from '@fusion.dev/helix-headless/pagination';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Reads out which items of how many are on show.
+ *
+ * @description
+ * Prose beside the controls rather than one of them: no box and no hover, in the
+ * subtler of the two muted steps, because it is a fact about the result and not
+ * a way to move through it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Result count, Range
+ * @documentation https://helix.fusion.dev/components/pagination
+ */
+export declare class HelixPaginationSummary extends HelixHeadlessPaginationSummary {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-pagination-summary': HelixPaginationSummary;
+    }
+}