@fusion.dev/helix 0.0.0-dev

package/dist/steps/step/step.css.js

@@ -0,0 +1,158 @@
+// Generated from src/steps/step/step.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+align-items: start;
+column-gap: var(--helix-space-2xs);
+counter-increment: helix-step;
+display: grid;
+flex: 0 0 auto;
+grid-template-columns: var(--_steps-columns, minmax(0, 1fr));
+min-inline-size: 0;
+position: relative;
+row-gap: var(--_steps-row-gap, var(--helix-space-2xs));
+
+--_step-inset: var(--helix-space-sm);
+}
+
+[part="lead"],
+[part="trail"] {
+background-color: var(--steps-connector-color, var(--helix-color-border));
+position: absolute;
+z-index: 0;
+}
+
+[part="lead"] {
+block-size: var(--_steps-lead-block-size, var(--helix-border-thin));
+inline-size: var(--_steps-lead-inline-size, 0);
+inset-block-start: var(--_steps-lead-block-start, 50%);
+inset-inline-start: var(--_steps-lead-inline-start, 0);
+}
+
+[part="trail"] {
+block-size: var(--_steps-trail-block-size, var(--helix-border-thin));
+inline-size: var(--_steps-trail-inline-size, 0);
+inset-block-start: var(--_steps-trail-block-start, 50%);
+inset-inline-start: var(--_steps-trail-inline-start, 0);
+}
+
+:host(:first-child) [part="lead"],
+:host(:last-child) [part="trail"] {
+display: none;
+}
+
+[part="marker"] {
+align-items: center;
+grid-column: var(--_steps-marker-column, 1);
+grid-row: 1;
+justify-self: var(--_steps-marker-justify, center);
+block-size: var(--_steps-mark-box, var(--helix-size-icon));
+box-sizing: border-box;
+color: var(--_steps-marker-color, var(--helix-color-border));
+display: inline-flex;
+flex: 0 0 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-semibold);
+inline-size: var(--_steps-mark-box, var(--helix-size-icon));
+justify-content: center;
+position: relative;
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+z-index: 1;
+}
+
+[part="marker"] slot {
+align-items: center;
+display: inline-flex;
+justify-content: center;
+}
+
+[part="marker"]::after {
+content: var(--_steps-count, none);
+}
+
+[part="marker"] svg {
+block-size: var(--_steps-m, var(--helix-size-icon));
+display: var(--_steps-mark, inline);
+flex: 0 0 auto;
+inline-size: var(--_steps-m, var(--helix-size-icon));
+}
+
+slot[name="marker"]::slotted(*) {
+--icon-size: var(--_steps-m, var(--helix-size-icon));
+}
+
+:host([complete]) [part="marker"] {
+color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));
+}
+
+:host([current]) [part="marker"] {
+color: var(--steps-current-color, var(--_steps-ink-current, var(--helix-color-primary)));
+}
+
+:host([complete][current]) [part="marker"] {
+color: var(--steps-complete-color, var(--_steps-ink-complete, var(--helix-color-success)));
+}
+
+[part="body"] {
+align-items: var(--_steps-body-align, center);
+grid-column: var(--_steps-body-column, 1);
+grid-row: var(--_steps-body-row, 2);
+display: flex;
+flex-direction: column;
+min-inline-size: 0;
+position: relative;
+z-index: 1;
+}
+
+[part="label"] {
+--helix-size-control: var(--helix-size-control-sm);
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-space-control: var(--_step-inset);
+--helix-text-control: var(--helix-text-sm);
+--button-foreground-color: var(--helix-color-foreground-muted);
+
+max-inline-size: 100%;
+}
+
+:host([complete]) [part="label"],
+:host([current]) [part="label"] {
+--button-foreground-color: var(--helix-color-foreground);
+}
+
+[part="description"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+padding-inline: var(--_step-inset);
+}
+
+:host([disabled]) [part="marker"],
+:host([disabled]) [part="description"] {
+opacity: 0.5;
+}
+
+[part="content"] {
+display: var(--_steps-content, none);
+grid-column: var(--_steps-body-column, 1);
+grid-row: calc(var(--_steps-body-row, 2) + 1);
+grid-template-rows: 0fr;
+padding-inline: var(--_step-inset);
+transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);
+}
+
+:host([current]) [part="content"] {
+grid-template-rows: 1fr;
+}
+
+[part="content"] > slot {
+display: block;
+min-block-size: 0;
+overflow: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="marker"],
+[part="content"] {
+transition: none;
+}
+}`);

package/dist/steps/step/step.d.ts

@@ -0,0 +1,20 @@
+import { HelixHeadlessStep } from '@fusion.dev/helix-headless/steps';
+import type { CSSResultGroup } from 'lit';
+import '../../button/index.js';
+/**
+ * @summary One stage in a sequence.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Stage
+ * @documentation https://helix.fusion.dev/components/steps
+ */
+export declare class HelixStep extends HelixHeadlessStep {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-step': HelixStep;
+    }
+}

package/dist/steps/step/step.js

@@ -0,0 +1,30 @@
+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 { HelixHeadlessStep } from '@fusion.dev/helix-headless/steps';
+/* Side-effect import, because the tier below renders `<helix-button>` and a custom
+   element registers on import. Inherited from the base along with the template,
+   which is why it is restated here: this file has no `<helix-button>` in it to
+   remind anyone. `check:composed` enforces it. */
+import '../../button/index.js';
+import { styles } from './step.css.js';
+/**
+ * @summary One stage in a sequence.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Stage
+ * @documentation https://helix.fusion.dev/components/steps
+ */
+let HelixStep = class HelixStep extends HelixHeadlessStep {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixStep = __decorate([
+    customElement('helix-step')
+], HelixStep);
+export { HelixStep };

package/dist/switch/index.d.ts

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

package/dist/switch/index.js

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

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

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

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

@@ -0,0 +1,113 @@
+// Generated from src/switch/root/switch-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+
+--_switch-height: var(--switch-block-size, var(--helix-size-switch));
+
+--_switch-width: var(--switch-inline-size, calc(var(--_switch-height) * 1.75));
+
+--_switch-inset: calc(var(--helix-space-2xs) / 2);
+
+--_field-control-inline-size: var(--_switch-width);
+}
+
+[part="field"] {
+align-items: center;
+cursor: pointer;
+display: inline-flex;
+gap: var(--helix-space-xs);
+}
+
+:host(:disabled) [part="field"] {
+cursor: default;
+}
+
+:host(:disabled) {
+opacity: 0.5;
+}
+
+[part="track"] {
+background-color: var(--helix-color-surface-sunken);
+block-size: var(--_switch-height);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-full);
+display: grid;
+flex: 0 0 auto;
+inline-size: var(--_switch-width);
+position: relative;
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="thumb"] {
+
+background-color: var(--switch-thumb-color, var(--helix-color-surface-overlay));
+block-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-full);
+inline-size: calc(var(--_switch-height) - var(--_switch-inset) * 2);
+inset-block-start: 50%;
+
+inset-inline-start: calc(var(--_switch-inset) - var(--helix-border-thin));
+pointer-events: none;
+position: absolute;
+translate: 0 -50%;
+transition: translate var(--helix-duration-fast) var(--helix-easing-emphasized);
+}
+
+:host(:state(checked)) [part="thumb"] {
+border-color: transparent;
+}
+
+:host(:state(checked)) [part="track"] {
+background-color: var(--switch-on-color, var(--helix-color-primary));
+border-color: var(--switch-on-color, var(--helix-color-primary));
+}
+
+[part="control"] {
+appearance: none;
+block-size: 100%;
+cursor: inherit;
+grid-area: 1 / 1;
+inline-size: 100%;
+margin: var(--helix-space-none);
+opacity: 0;
+}
+
+:host(:state(checked)) [part="thumb"] {
+
+background-color: var(--switch-thumb-color, var(--helix-color-foreground-on-accent));
+
+translate: calc(var(--_switch-width) - var(--_switch-height)) -50%;
+}
+
+[part="control"]:focus-visible + [part="thumb"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host(:state(invalid)) [part="track"] {
+border-color: var(--helix-color-danger);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="thumb"],
+[part="track"] {
+transition: none;
+}
+}
+
+[part="label"][data-empty] {
+display: none;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,42 @@
+import { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A control that turns something on or off.
+ *
+ * @description
+ * A thumb traveling in a groove, which is the one place in the library color
+ * is used to say "on". A checkbox does not, because a tick is legible on its
+ * own; a switch has no mark, so the fill is the whole of what distinguishes the
+ * two states and there is nothing else for it to be.
+ *
+ * The input itself is the hit target and is drawn as the track, stretched over
+ * it and invisible, so the press, the focus and the label forwarding are all
+ * the platform's while the picture is ours.
+ *
+ * **Its height is `--helix-size-switch`, which is one step above the
+ * checkbox's** at every density rather than the same as it. A checkbox is a box
+ * with a mark in it; a switch is a track with a thumb inside it, and at the
+ * checkbox's height the thumb has two pixels of groove around it and the whole
+ * control reads as a small dash. The width follows the height, so setting
+ * `--switch-block-size` widens it too and the proportion is not something a
+ * consumer has to keep.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases Toggle switch, On/off
+ * @documentation https://helix.fusion.dev/components/switch
+ *
+ * @cssproperty --switch-block-size - Height of the track. The width follows it.
+ * @cssproperty --switch-inline-size - Length of the track, if not the derived one.
+ * @cssproperty --switch-on-color - Fill when it is on.
+ * @cssproperty --switch-thumb-color - The handle, in both states.
+ */
+export declare class HelixSwitch extends HelixHeadlessSwitch {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-switch': HelixSwitch;
+    }
+}

package/dist/switch/root/switch-root.js

@@ -0,0 +1,50 @@
+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 { HelixHeadlessSwitch } from '@fusion.dev/helix-headless/switch';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldInlineStyles } from '../../shared/field/field-inline.css.js';
+import { styles } from './switch-root.css.js';
+/**
+ * @summary A control that turns something on or off.
+ *
+ * @description
+ * A thumb traveling in a groove, which is the one place in the library color
+ * is used to say "on". A checkbox does not, because a tick is legible on its
+ * own; a switch has no mark, so the fill is the whole of what distinguishes the
+ * two states and there is nothing else for it to be.
+ *
+ * The input itself is the hit target and is drawn as the track, stretched over
+ * it and invisible, so the press, the focus and the label forwarding are all
+ * the platform's while the picture is ours.
+ *
+ * **Its height is `--helix-size-switch`, which is one step above the
+ * checkbox's** at every density rather than the same as it. A checkbox is a box
+ * with a mark in it; a switch is a track with a thumb inside it, and at the
+ * checkbox's height the thumb has two pixels of groove around it and the whole
+ * control reads as a small dash. The width follows the height, so setting
+ * `--switch-block-size` widens it too and the proportion is not something a
+ * consumer has to keep.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases Toggle switch, On/off
+ * @documentation https://helix.fusion.dev/components/switch
+ *
+ * @cssproperty --switch-block-size - Height of the track. The width follows it.
+ * @cssproperty --switch-inline-size - Length of the track, if not the derived one.
+ * @cssproperty --switch-on-color - Fill when it is on.
+ * @cssproperty --switch-thumb-color - The handle, in both states.
+ */
+let HelixSwitch = class HelixSwitch extends HelixHeadlessSwitch {
+    static { this.styles = [fieldStyles, fieldInlineStyles, styles]; }
+};
+HelixSwitch = __decorate([
+    customElement('helix-switch')
+], HelixSwitch);
+export { HelixSwitch };

package/dist/table/cell/table-cell.css.d.ts

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

package/dist/table/cell/table-cell.css.js

@@ -0,0 +1,25 @@
+// Generated from src/table/cell/table-cell.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+box-sizing: border-box;
+
+color: var(--helix-color-foreground);
+display: flex;
+font-size: var(--helix-text-sm);
+min-block-size: var(--helix-size-control);
+min-inline-size: 0;
+
+overflow-wrap: anywhere;
+padding: var(--helix-space-xs) var(--helix-space-md) var(--helix-space-xs) var(--helix-space-none);
+}
+
+::slotted(*) {
+min-inline-size: 0;
+}
+
+:host([header]) {
+font-weight: var(--helix-weight-medium);
+}`);

package/dist/table/cell/table-cell.d.ts

@@ -0,0 +1,24 @@
+import { HelixHeadlessTableCell } from '@fusion.dev/helix-headless/table';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One cell of a table.
+ *
+ * @description
+ * Hairline rules between rows and no fill, per the rule that depth comes from a
+ * single border rather than from elevation. A dense table earns its density by
+ * decorating none of it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The cell's content.
+ */
+export declare class HelixTableCell extends HelixHeadlessTableCell {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-table-cell': HelixTableCell;
+    }
+}

package/dist/table/cell/table-cell.js

@@ -0,0 +1,30 @@
+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 { HelixHeadlessTableCell } from '@fusion.dev/helix-headless/table';
+import { styles } from './table-cell.css.js';
+/**
+ * @summary One cell of a table.
+ *
+ * @description
+ * Hairline rules between rows and no fill, per the rule that depth comes from a
+ * single border rather than from elevation. A dense table earns its density by
+ * decorating none of it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The cell's content.
+ */
+let HelixTableCell = class HelixTableCell extends HelixHeadlessTableCell {
+    static { this.styles = styles; }
+};
+HelixTableCell = __decorate([
+    customElement('helix-table-cell')
+], HelixTableCell);
+export { HelixTableCell };

package/dist/table/column/table-column.css.d.ts

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

package/dist/table/column/table-column.css.js

@@ -0,0 +1,21 @@
+// Generated from src/table/column/table-column.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: contents;
+}
+
+[part="column"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+box-sizing: border-box;
+
+color: var(--helix-color-foreground-muted);
+display: flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-semibold);
+
+min-block-size: var(--helix-size-control-loose);
+min-inline-size: 0;
+padding-inline-end: var(--helix-space-md);
+}`);

package/dist/table/column/table-column.d.ts

@@ -0,0 +1,23 @@
+import { HelixHeadlessTableColumn } from '@fusion.dev/helix-headless/table';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One column of a table: its heading, and how wide it is.
+ *
+ * @description
+ * Styled as the header cell it is, and it carries the same rule and inset as
+ * the cells beneath it so the heading and its column read as one line down the
+ * table.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Column header, Th
+ * @documentation https://helix.fusion.dev/components/table
+ */
+export declare class HelixTableColumn extends HelixHeadlessTableColumn {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-table-column': HelixTableColumn;
+    }
+}

package/dist/table/column/table-column.js

@@ -0,0 +1,29 @@
+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 { HelixHeadlessTableColumn } from '@fusion.dev/helix-headless/table';
+import { styles } from './table-column.css.js';
+/**
+ * @summary One column of a table: its heading, and how wide it is.
+ *
+ * @description
+ * Styled as the header cell it is, and it carries the same rule and inset as
+ * the cells beneath it so the heading and its column read as one line down the
+ * table.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Column header, Th
+ * @documentation https://helix.fusion.dev/components/table
+ */
+let HelixTableColumn = class HelixTableColumn extends HelixHeadlessTableColumn {
+    static { this.styles = styles; }
+};
+HelixTableColumn = __decorate([
+    customElement('helix-table-column')
+], HelixTableColumn);
+export { HelixTableColumn };

package/dist/table/index.d.ts

@@ -0,0 +1,4 @@
+export * from './cell/table-cell.js';
+export * from './column/table-column.js';
+export * from './root/table-root.js';
+export * from './row/table-row.js';

package/dist/table/index.js

@@ -0,0 +1,4 @@
+export * from './cell/table-cell.js';
+export * from './column/table-column.js';
+export * from './root/table-root.js';
+export * from './row/table-row.js';

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

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

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

@@ -0,0 +1,39 @@
+// Generated from src/table/root/table-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+overflow-x: auto;
+}
+
+[part="table"] {
+display: grid;
+
+grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));
+inline-size: 100%;
+}
+
+[part="head"] {
+display: contents;
+}
+
+[part="empty"],
+[part="loading"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+padding-block: var(--helix-space-md);
+padding-inline: var(--helix-space-sm);
+text-align: center;
+}
+
+:host([loading]) [part="table"] {
+opacity: 0.5;
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,29 @@
+import { HelixHeadlessTable } from '@fusion.dev/helix-headless/table';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Tabular data laid out on a grid.
+ *
+ * @description
+ * Hairline rules between rows and no fill, per the rule that depth comes from a
+ * single border rather than from elevation. A dense table earns its density by
+ * decorating none of it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category data
+ * @documentation https://helix.fusion.dev/components/table
+ *
+ * @slot - The table's rows.
+ *
+ * @csspart table - The grid.
+ *
+ * @cssproperty --table-columns - Track list for the columns.
+ */
+export declare class HelixTable extends HelixHeadlessTable {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-table': HelixTable;
+    }
+}