@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,61 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup, TemplateResult } from 'lit';
+/**
+ * @summary Lays children out in a row or a column.
+ *
+ * @description
+ * The host is the flex container itself and the only child is a slot, so the
+ * element adds no box of its own: `<helix-flex>` costs exactly the `<div>` it
+ * replaces.
+ *
+ * There is no separate Stack. A stack is this with `direction="column"`, and a
+ * second element whose whole definition is one default of the first is a name
+ * to learn rather than a capability to gain.
+ *
+ * Gap takes a space token name rather than a length, so spacing stays on the
+ * scale. A layout that can say `gap="13px"` is one that will.
+ *
+ * Presentation only, so there is no headless tier: the split exists to keep
+ * behavior separate from styling, and this is entirely styling.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Stack, Row, Column, HStack, VStack
+ * @documentation https://helix.fusion.dev/components/flex
+ *
+ * @slot - The items to lay out.
+ */
+export declare class HelixFlex extends HelixElement {
+    /**
+     * Whether items run across or down.
+     */
+    direction?: 'row' | 'column';
+    /**
+     * Space between items, named on the space scale.
+     */
+    gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * Alignment across the direction.
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    /**
+     * Distribution along the direction.
+     */
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around';
+    /**
+     * Whether items wrap onto more lines.
+     */
+    wrap: boolean;
+    /**
+     * Flows with surrounding text instead of taking the full width.
+     */
+    inline: boolean;
+    protected render(): TemplateResult;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-flex': HelixFlex;
+    }
+}

package/dist/flex/root/flex-root.js

@@ -0,0 +1,75 @@
+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, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styles } from './flex-root.css.js';
+/**
+ * @summary Lays children out in a row or a column.
+ *
+ * @description
+ * The host is the flex container itself and the only child is a slot, so the
+ * element adds no box of its own: `<helix-flex>` costs exactly the `<div>` it
+ * replaces.
+ *
+ * There is no separate Stack. A stack is this with `direction="column"`, and a
+ * second element whose whole definition is one default of the first is a name
+ * to learn rather than a capability to gain.
+ *
+ * Gap takes a space token name rather than a length, so spacing stays on the
+ * scale. A layout that can say `gap="13px"` is one that will.
+ *
+ * Presentation only, so there is no headless tier: the split exists to keep
+ * behavior separate from styling, and this is entirely styling.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Stack, Row, Column, HStack, VStack
+ * @documentation https://helix.fusion.dev/components/flex
+ *
+ * @slot - The items to lay out.
+ */
+let HelixFlex = class HelixFlex extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether items wrap onto more lines.
+         */
+        this.wrap = false;
+        /**
+         * Flows with surrounding text instead of taking the full width.
+         */
+        this.inline = false;
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixFlex.prototype, "direction", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixFlex.prototype, "gap", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixFlex.prototype, "align", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixFlex.prototype, "justify", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixFlex.prototype, "wrap", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixFlex.prototype, "inline", void 0);
+HelixFlex = __decorate([
+    customElement('helix-flex')
+], HelixFlex);
+export { HelixFlex };

package/dist/format-date/index.d.ts

@@ -0,0 +1 @@
+export { HelixFormatDate } from './root/format-date-root.js';

package/dist/format-date/index.js

@@ -0,0 +1 @@
+export { HelixFormatDate } from './root/format-date-root.js';

package/dist/format-date/root/format-date-root.css.d.ts

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

package/dist/format-date/root/format-date-root.css.js

@@ -0,0 +1,15 @@
+// Generated from src/format-date/root/format-date-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline;
+}
+
+:host([elapsed]) {
+font-variant-numeric: tabular-nums;
+}
+
+@media print {
+:host([elapsed]) [part="time"]::after {
+content: " (" attr(datetime) ")";
+}
+}`);

package/dist/format-date/root/format-date-root.d.ts

@@ -0,0 +1,28 @@
+import { HelixHeadlessFormatDate } from '@fusion.dev/helix-headless/format-date';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A timestamp, written the way the reader's locale writes one.
+ *
+ * @description
+ * The base tier does the reading; this adds the one thing a design system has to
+ * say about it. A timestamp takes the family, size and color of the text around
+ * it, so almost nothing here is a decision. The exception is figures: an elapsed
+ * reading counts up under the reader, and proportional digits move the trailing
+ * edge as it does, which in a feed is a whole column shifting whenever any row
+ * in it ticks over. `tabular-nums` in that mode and not in the other, because a
+ * date is written once and should sit in the text like the text.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category typography
+ * @documentation https://helix.fusion.dev/components/format-date
+ */
+export declare class HelixFormatDate extends HelixHeadlessFormatDate {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-format-date': HelixFormatDate;
+    }
+}

package/dist/format-date/root/format-date-root.js

@@ -0,0 +1,34 @@
+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 { HelixHeadlessFormatDate } from '@fusion.dev/helix-headless/format-date';
+import { styles } from './format-date-root.css.js';
+/**
+ * @summary A timestamp, written the way the reader's locale writes one.
+ *
+ * @description
+ * The base tier does the reading; this adds the one thing a design system has to
+ * say about it. A timestamp takes the family, size and color of the text around
+ * it, so almost nothing here is a decision. The exception is figures: an elapsed
+ * reading counts up under the reader, and proportional digits move the trailing
+ * edge as it does, which in a feed is a whole column shifting whenever any row
+ * in it ticks over. `tabular-nums` in that mode and not in the other, because a
+ * date is written once and should sit in the text like the text.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category typography
+ * @documentation https://helix.fusion.dev/components/format-date
+ */
+let HelixFormatDate = class HelixFormatDate extends HelixHeadlessFormatDate {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixFormatDate = __decorate([
+    customElement('helix-format-date')
+], HelixFormatDate);
+export { HelixFormatDate };

package/dist/grid/index.d.ts

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

package/dist/grid/index.js

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

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

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

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

@@ -0,0 +1,74 @@
+// Generated from src/grid/root/grid-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: grid;
+
+gap: var(--helix-space-none);
+grid-template-columns: var(--grid-columns, var(--_grid-template, minmax(0, 1fr)));
+}
+
+:host([columns="2"]) {
+grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(2, minmax(0, 1fr))));
+}
+:host([columns="3"]) {
+grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(3, minmax(0, 1fr))));
+}
+:host([columns="4"]) {
+grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(4, minmax(0, 1fr))));
+}
+:host([columns="5"]) {
+grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(5, minmax(0, 1fr))));
+}
+:host([columns="6"]) {
+grid-template-columns: var(--grid-columns, var(--_grid-template, repeat(6, minmax(0, 1fr))));
+}
+
+:host([gap="none"]) {
+gap: var(--helix-space-none);
+}
+:host([gap="2xs"]) {
+gap: var(--helix-space-2xs);
+}
+:host([gap="xs"]) {
+gap: var(--helix-space-xs);
+}
+:host([gap="sm"]) {
+gap: var(--helix-space-sm);
+}
+
+:host([gap="md"]) {
+gap: var(--helix-space-md);
+}
+:host([gap="lg"]) {
+gap: var(--helix-space-lg);
+}
+:host([gap="xl"]) {
+gap: var(--helix-space-xl);
+}
+:host([gap="2xl"]) {
+gap: var(--helix-space-2xl);
+}
+
+:host([gap="3xl"]) {
+gap: var(--helix-space-3xl);
+}
+
+:host([align]) {
+text-align: inherit;
+}
+
+:host([align="start"]) {
+align-items: start;
+}
+:host([align="center"]) {
+align-items: center;
+}
+:host([align="end"]) {
+align-items: end;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,79 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+/**
+ * @summary Lays children out on a grid.
+ *
+ * @description
+ * Two ways to declare columns, and only two. `columns` is a fixed count;
+ * `min` fills as many equal columns as fit above that width, which is a
+ * responsive layout with no breakpoint to maintain. Setting `min` wins, because
+ * a fixed count that also reflows is two intentions in one element.
+ *
+ * Presentation only, so there is no headless tier.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Layout, Columns
+ * @documentation https://helix.fusion.dev/components/grid
+ *
+ * @slot - The items to lay out.
+ *
+ * @cssproperty --grid-columns - An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say.
+ */
+export declare class HelixGrid extends HelixElement {
+    /**
+     * Fixed number of equal columns.
+     */
+    columns?: number;
+    /**
+     * Minimum column width, filling as many as fit.
+     *
+     * Takes precedence over `columns`: a grid that both fixes a count and reflows
+     * is two intentions in one element.
+     */
+    min: string;
+    /**
+     * Space between cells, named on the space scale.
+     */
+    gap?: 'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * Alignment of each cell within its row.
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Writes the track list into the shadow root's own stylesheet.
+     *
+     * Into a `<style>` rather than onto `this.style`, and the difference is
+     * hydration. An inline style on the host is an attribute the element gives
+     * itself once it upgrades, so a React consumer's server markup does not have
+     * it and hydration reports a mismatch it will not patch up. The shadow root
+     * is not part of the tree React hydrates, so a rule written there is free.
+     *
+     * The element is filled imperatively because Lit refuses expressions inside
+     * `<style>`: it is an invalid binding location and throws while rendering
+     * rather than at build time. Hence a static, empty element in the template
+     * and its `textContent` set here.
+     *
+     * It sets a custom property rather than the track list itself. A shadow
+     * root's adopted stylesheets cascade *after* its own `<style>` elements, and
+     * `static styles` is adopted, so a `grid-template-columns` here lost to the
+     * one in the stylesheet and every `min` grid came out a single column. The
+     * stylesheet only ever reads `--_grid-template`, so there is nothing to
+     * lose against.
+     *
+     * The consequence is that a server-rendered grid falls back to the
+     * stylesheet's single column until it upgrades. That is why `columns` is also
+     * expressed as plain CSS below: the fixed-count case, which can be enumerated,
+     * needs no JavaScript at all, and only `min` depends on this.
+     */
+    private applyTemplate;
+    protected updated(changed: PropertyValues): void;
+    protected render(): TemplateResult;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-grid': HelixGrid;
+    }
+}

package/dist/grid/root/grid-root.js

@@ -0,0 +1,125 @@
+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, HelixElement } from '@fusion.dev/helix-core';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styles } from './grid-root.css.js';
+/**
+ * @summary Lays children out on a grid.
+ *
+ * @description
+ * Two ways to declare columns, and only two. `columns` is a fixed count;
+ * `min` fills as many equal columns as fit above that width, which is a
+ * responsive layout with no breakpoint to maintain. Setting `min` wins, because
+ * a fixed count that also reflows is two intentions in one element.
+ *
+ * Presentation only, so there is no headless tier.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category layout
+ * @aliases Layout, Columns
+ * @documentation https://helix.fusion.dev/components/grid
+ *
+ * @slot - The items to lay out.
+ *
+ * @cssproperty --grid-columns - An explicit track list, which wins over `min` and `columns`. For a layout of unequal tracks, which neither attribute can say.
+ */
+let HelixGrid = class HelixGrid extends HelixElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Minimum column width, filling as many as fit.
+         *
+         * Takes precedence over `columns`: a grid that both fixes a count and reflows
+         * is two intentions in one element.
+         */
+        this.min = '';
+    }
+    /**
+     * Writes the track list into the shadow root's own stylesheet.
+     *
+     * Into a `<style>` rather than onto `this.style`, and the difference is
+     * hydration. An inline style on the host is an attribute the element gives
+     * itself once it upgrades, so a React consumer's server markup does not have
+     * it and hydration reports a mismatch it will not patch up. The shadow root
+     * is not part of the tree React hydrates, so a rule written there is free.
+     *
+     * The element is filled imperatively because Lit refuses expressions inside
+     * `<style>`: it is an invalid binding location and throws while rendering
+     * rather than at build time. Hence a static, empty element in the template
+     * and its `textContent` set here.
+     *
+     * It sets a custom property rather than the track list itself. A shadow
+     * root's adopted stylesheets cascade *after* its own `<style>` elements, and
+     * `static styles` is adopted, so a `grid-template-columns` here lost to the
+     * one in the stylesheet and every `min` grid came out a single column. The
+     * stylesheet only ever reads `--_grid-template`, so there is nothing to
+     * lose against.
+     *
+     * The consequence is that a server-rendered grid falls back to the
+     * stylesheet's single column until it upgrades. That is why `columns` is also
+     * expressed as plain CSS below: the fixed-count case, which can be enumerated,
+     * needs no JavaScript at all, and only `min` depends on this.
+     */
+    applyTemplate() {
+        const sheet = this.renderRoot.querySelector('#template');
+        if (!sheet) {
+            return;
+        }
+        /* **`min` is checked against a length before it reaches a stylesheet, and
+           that is a security fix rather than tidiness.** It is a public attribute
+           and it was concatenated into a `<style>` element's text, so
+           `min="1px,1fr)} :host{background:url(//elsewhere/?stolen)} @media all{"`
+           closed the rule and wrote arbitrary CSS into this component's shadow
+           root. That is enough to exfiltrate through `url()` and to lay an
+           invisible plate over the page.
+         *
+         * `createSheet` says in its own documentation that consumer input must not
+         * be interpolated into CSS, and this was the one place in the library that
+         * did it. A pattern rather than an escape, because a length has a small,
+         * known grammar and anything outside it is a mistake worth ignoring rather
+         * than a string worth repairing. */
+        const length = /^-?(?:\d+\.?\d*|\.\d+)(?:px|r?em|%|v[hw]|ch|ex|cm|mm|in|pt|pc|q)$/i;
+        const min = this.min?.trim() ?? '';
+        sheet.textContent =
+            min !== '' && length.test(min)
+                ? `:host { --_grid-template: repeat(auto-fit, minmax(min(${min}, 100%), 1fr)); }`
+                : '';
+    }
+    /* `updated` alone, where there was a `firstUpdated` beside it doing the same
+       thing. Lit puts every initial property into the first `changed`, so a grid
+       with a `min` ran `applyTemplate` twice on every mount, and one without it
+       ran it once to write the empty string an empty `<style>` already held. */
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('min')) {
+            this.applyTemplate();
+        }
+    }
+    render() {
+        return html `<style id="template"></style>
+      <slot></slot>`;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true, type: Number })
+], HelixGrid.prototype, "columns", void 0);
+__decorate([
+    property()
+], HelixGrid.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixGrid.prototype, "gap", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixGrid.prototype, "align", void 0);
+HelixGrid = __decorate([
+    customElement('helix-grid')
+], HelixGrid);
+export { HelixGrid };

package/dist/heatmap/index.d.ts

@@ -0,0 +1 @@
+export { HelixHeatmap } from './root/heatmap-root.js';

package/dist/heatmap/index.js

@@ -0,0 +1 @@
+export { HelixHeatmap } from './root/heatmap-root.js';

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

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

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

@@ -0,0 +1,141 @@
+// Generated from src/heatmap/root/heatmap-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+display: grid;
+grid-template-columns: minmax(0, max-content);
+
+--_heatmap-cell-width: var(--heatmap-cell-inline-size, var(--heatmap-cell-size, 0.75rem));
+--_heatmap-cell-height: var(--heatmap-cell-height, var(--heatmap-cell-size, 0.75rem));
+
+--heatmap-tone-accent: var(--helix-color-accent);
+--heatmap-tone-danger: var(--helix-color-danger);
+--heatmap-tone-info: var(--helix-color-info);
+--heatmap-tone-muted: var(--helix-color-surface-sunken);
+--heatmap-tone-primary: var(--helix-color-primary);
+--heatmap-tone-success: var(--helix-color-success);
+--heatmap-tone-warning: var(--helix-color-warning);
+
+--heatmap-tone-1: color-mix(
+in oklab,
+var(--helix-color-primary-active) 20%,
+var(--helix-color-surface-sunken)
+);
+--heatmap-tone-2: color-mix(
+in oklab,
+var(--helix-color-primary-active) 40%,
+var(--helix-color-surface-sunken)
+);
+--heatmap-tone-3: color-mix(
+in oklab,
+var(--helix-color-primary-active) 60%,
+var(--helix-color-surface-sunken)
+);
+--heatmap-tone-4: color-mix(
+in oklab,
+var(--helix-color-primary-active) 80%,
+var(--helix-color-surface-sunken)
+);
+--heatmap-tone-5: var(--helix-color-primary-active);
+}
+
+[part="strip"] {
+display: grid;
+gap: var(--heatmap-gap, var(--helix-space-2xs));
+grid-auto-columns: var(--_heatmap-cell-width);
+grid-auto-flow: column;
+grid-template-rows: repeat(var(--_heatmap-rows, 1), var(--_heatmap-cell-height));
+justify-content: start;
+
+position: relative;
+}
+
+[part="cell"] {
+background-color: var(--heatmap-tone, var(--helix-color-surface-sunken));
+border-radius: var(--heatmap-cell-radius, calc(var(--helix-radii-sm) * 0.5));
+inline-size: var(--_heatmap-cell-width);
+}
+
+[part="mark"] {
+block-size: 1px;
+inline-size: 1px;
+pointer-events: none;
+position: absolute;
+}
+
+[part="tooltip-anchor"] {
+inset: 0;
+pointer-events: none;
+position: absolute;
+}
+
+[part="tooltip-label"] {
+color: var(--helix-color-foreground-muted);
+display: block;
+font-weight: var(--helix-weight-medium);
+}
+
+[part="tooltip-cell"] {
+align-items: baseline;
+display: flex;
+gap: var(--helix-space-sm);
+justify-content: space-between;
+}
+
+[part="tooltip-name"] {
+color: var(--helix-color-foreground-muted);
+}
+
+[part="tooltip-value"] {
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+}
+
+@media (hover: hover) {
+[part="cell"]:hover {
+outline: var(--helix-border-thin) solid var(--helix-color-foreground);
+outline-offset: var(--helix-border-thin);
+}
+
+[part="strip"]:not([data-spaced]) [part="cell"]:hover {
+outline-offset: calc(var(--helix-border-thin) * -1);
+}
+}
+
+[part="footer"] {
+align-items: baseline;
+color: var(--helix-color-foreground-subtle);
+display: grid;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+gap: var(--helix-space-xs);
+grid-template-columns: auto minmax(0, 1fr) auto;
+padding-block-start: var(--helix-space-xs);
+}
+
+[part="summary"] {
+text-align: center;
+}
+
+[part="end"] {
+text-align: end;
+}
+
+[part="footer"][data-empty] {
+display: none;
+}
+
+[part="empty"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+text-align: center;
+}
+
+@media print {
+[part="cell"] {
+outline: var(--helix-border-thin) solid var(--helix-color-border);
+outline-offset: calc(var(--helix-border-thin) * -1);
+}
+}`);