@fusion.dev/helix 0.0.0-dev

package/dist/pagination/summary/pagination-summary.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 { HelixHeadlessPaginationSummary } from '@fusion.dev/helix-headless/pagination';
+import { styles } from './pagination-summary.css.js';
+/**
+ * @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
+ */
+let HelixPaginationSummary = class HelixPaginationSummary extends HelixHeadlessPaginationSummary {
+    static { this.styles = styles; }
+};
+HelixPaginationSummary = __decorate([
+    customElement('helix-pagination-summary')
+], HelixPaginationSummary);
+export { HelixPaginationSummary };

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';

package/dist/pin-input/root/pin-input-root.css.d.ts

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

package/dist/pin-input/root/pin-input-root.css.js

@@ -0,0 +1,74 @@
+// Generated from src/pin-input/root/pin-input-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+}
+
+[part="field"] {
+display: flex;
+gap: var(--pin-input-gap, var(--helix-space-xs));
+}
+
+[part="cell"] {
+all: unset;
+background-color: var(--helix-color-well);
+block-size: var(--helix-size-control);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-lg);
+
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+inline-size: var(--helix-size-control);
+text-align: center;
+transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not(:disabled)) [part="cell"]:hover {
+border-color: var(--helix-color-foreground-muted);
+}
+
+[part="cell"]:focus-visible {
+border-color: var(--helix-color-primary);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host(:state(invalid)) [part="cell"] {
+border-color: var(--helix-color-danger);
+}
+
+:host(:disabled) [part="cell"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+:host([readonly]) [part="cell"] {
+background-color: transparent;
+}
+
+:host([mask]) [part="cell"] {
+font-size: var(--helix-text-xl);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="cell"] {
+transition: none;
+}
+}
+
+[part="cell"]::placeholder {
+color: var(--helix-color-foreground-subtle);
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,37 @@
+import { HelixHeadlessPinInput } from '@fusion.dev/helix-headless/pin-input';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A short code, one character to a box.
+ *
+ * @description
+ * Square boxes at the control height with real space between them, which is the
+ * whole picture: a code is read as separate characters, and boxes shoulder to
+ * shoulder read as one field with lines drawn in it.
+ *
+ * The focus ring is on the box the reader is in rather than around the row. A
+ * code is entered one character at a time and the boxes exist to say which one
+ * is next, so a ring around all six would answer the question the component is
+ * for.
+ *
+ * Figures are tabular, so a 1 takes the room an 8 does and the row does not
+ * breathe as a code is typed into it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases PinField, OTP, One-time code, Verification code, InputPin
+ * @documentation https://helix.fusion.dev/components/pin-input
+ *
+ * @csspart cell - One box.
+ * @csspart field - The row of boxes.
+ *
+ * @cssproperty --pin-input-gap - Space between one box and the next.
+ */
+export declare class HelixPinInput extends HelixHeadlessPinInput {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-pin-input': HelixPinInput;
+    }
+}

package/dist/pin-input/root/pin-input-root.js

@@ -0,0 +1,45 @@
+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 { HelixHeadlessPinInput } from '@fusion.dev/helix-headless/pin-input';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles } from './pin-input-root.css.js';
+/**
+ * @summary A short code, one character to a box.
+ *
+ * @description
+ * Square boxes at the control height with real space between them, which is the
+ * whole picture: a code is read as separate characters, and boxes shoulder to
+ * shoulder read as one field with lines drawn in it.
+ *
+ * The focus ring is on the box the reader is in rather than around the row. A
+ * code is entered one character at a time and the boxes exist to say which one
+ * is next, so a ring around all six would answer the question the component is
+ * for.
+ *
+ * Figures are tabular, so a 1 takes the room an 8 does and the row does not
+ * breathe as a code is typed into it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases PinField, OTP, One-time code, Verification code, InputPin
+ * @documentation https://helix.fusion.dev/components/pin-input
+ *
+ * @csspart cell - One box.
+ * @csspart field - The row of boxes.
+ *
+ * @cssproperty --pin-input-gap - Space between one box and the next.
+ */
+let HelixPinInput = class HelixPinInput extends HelixHeadlessPinInput {
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixPinInput = __decorate([
+    customElement('helix-pin-input')
+], HelixPinInput);
+export { HelixPinInput };

package/dist/popover/index.d.ts

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

package/dist/popover/index.js

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

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

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

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

@@ -0,0 +1,93 @@
+// Generated from src/popover/root/popover-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+display: contents;
+}
+
+[part="popover"] {
+overflow: visible;
+background-color: var(--helix-color-surface-overlay);
+
+border: var(--popover-border-width, var(--helix-border-floating)) solid
+var(--popover-border-color, var(--helix-color-border));
+
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--popover-shadow, var(--helix-shadow-floating));
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+
+inset: auto;
+margin: var(--helix-space-none);
+
+max-inline-size: calc(100vw - var(--helix-space-lg));
+padding: var(--popover-padding, var(--helix-space-md));
+inline-size: var(--popover-inline-size, max-content);
+}
+
+[part="popover"]:not(:popover-open) {
+display: none;
+}
+
+:host([separation="plain"]) [part="popover"] {
+padding: var(--popover-padding, var(--helix-space-none));
+}
+
+[part="popover"] {
+opacity: 0;
+--_travel: calc(var(--helix-space-2xs) * -1);
+transform: translateY(var(--_travel));
+scale: var(--_popover-from, 0.96);
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-fast) var(--helix-easing-emphasized),
+transform var(--helix-duration-fast) var(--helix-easing-emphasized),
+display var(--helix-duration-fast) allow-discrete,
+overlay var(--helix-duration-fast) allow-discrete;
+}
+
+[part="popover"][data-placement^="top"] {
+--_travel: var(--helix-space-2xs);
+}
+
+[part="popover"][data-placed] {
+opacity: 1;
+scale: 1;
+transform: none;
+}
+
+[part="popover"][data-placement^="top"] {
+transform-origin: var(--floating-arrow-x, 50%) 100%;
+}
+
+[part="popover"][data-placement^="bottom"] {
+transform-origin: var(--floating-arrow-x, 50%) 0;
+}
+
+[part="popover"][data-placement^="left"] {
+transform-origin: 100% var(--floating-arrow-y, 50%);
+}
+
+[part="popover"][data-placement^="right"] {
+transform-origin: 0 var(--floating-arrow-y, 50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="popover"],
+[part="popover"][data-placed] {
+scale: 1;
+transform: none;
+transition: none;
+}
+}
+
+[part="content"] {
+max-block-size: var(--popover-max-block-size, var(--floating-available-block-size, none));
+overflow: auto;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,53 @@
+import { HelixHeadlessPopover } from '@fusion.dev/helix-headless/popover';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A panel that opens against a trigger and holds anything.
+ *
+ * @description
+ * A surface with an inset and a shadow, and nothing about what goes in it. The
+ * inset is the panel's rather than the consumer's, which is the same call
+ * `Dialog` and `Drawer` make and for the same reason: everyone was writing it,
+ * and everyone was writing the same one.
+ *
+ * It arrives from the side it opened on. `data-placement` is written by the
+ * positioning, so the panel knows which way it flipped and can animate from the
+ * trigger rather than from a fixed direction that would be backwards half the
+ * time.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category overlays
+ * @aliases Popper, Flyout, Overlay
+ * @documentation https://helix.fusion.dev/components/popover
+ *
+ * @cssproperty --popover-border-color - Color of the panel's edge.
+ * @cssproperty --popover-border-width - Width of the panel's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --popover-inline-size - Width of the panel.
+ * @cssproperty --popover-max-block-size - Tallest the panel grows before it scrolls.
+ * @cssproperty --popover-padding - Space between the panel's edge and its contents.
+ * @cssproperty --popover-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
+ *   floating surface sits over content nobody can predict, so it keeps a lift by default.
+ */
+export declare class HelixPopover extends HelixHeadlessPopover {
+    /**
+     * How the panel separates itself from what it floats over.
+     *
+     * One of the axis's four values, which is all this surface has meaning for: a
+     * floating panel keeps its lift by default, `ThemeIntent.separation.floating`
+     * refusing `space` for the reason it refuses it everywhere, that a panel over
+     * content nobody can predict has to be readable.
+     *
+     * Unset is a surface with an inset, which is what a panel of content wants.
+     * `plain` removes both, for a panel holding something that brings its own,
+     * such as a list whose rows run to the edges.
+     */
+    separation?: 'plain';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-popover': HelixPopover;
+    }
+}

package/dist/popover/root/popover-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 { HelixHeadlessPopover } from '@fusion.dev/helix-headless/popover';
+import { property } from 'lit/decorators.js';
+import { styles } from './popover-root.css.js';
+/**
+ * @summary A panel that opens against a trigger and holds anything.
+ *
+ * @description
+ * A surface with an inset and a shadow, and nothing about what goes in it. The
+ * inset is the panel's rather than the consumer's, which is the same call
+ * `Dialog` and `Drawer` make and for the same reason: everyone was writing it,
+ * and everyone was writing the same one.
+ *
+ * It arrives from the side it opened on. `data-placement` is written by the
+ * positioning, so the panel knows which way it flipped and can animate from the
+ * trigger rather than from a fixed direction that would be backwards half the
+ * time.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category overlays
+ * @aliases Popper, Flyout, Overlay
+ * @documentation https://helix.fusion.dev/components/popover
+ *
+ * @cssproperty --popover-border-color - Color of the panel's edge.
+ * @cssproperty --popover-border-width - Width of the panel's edge. Follows
+ *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
+ *   theme says otherwise.
+ * @cssproperty --popover-inline-size - Width of the panel.
+ * @cssproperty --popover-max-block-size - Tallest the panel grows before it scrolls.
+ * @cssproperty --popover-padding - Space between the panel's edge and its contents.
+ * @cssproperty --popover-shadow - Lift under the panel. Follows `--helix-shadow-floating`: a
+ *   floating surface sits over content nobody can predict, so it keeps a lift by default.
+ */
+let HelixPopover = class HelixPopover extends HelixHeadlessPopover {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixPopover.prototype, "separation", void 0);
+HelixPopover = __decorate([
+    customElement('helix-popover')
+], HelixPopover);
+export { HelixPopover };

package/dist/progress/index.d.ts

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

package/dist/progress/index.js

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

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

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

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

@@ -0,0 +1,225 @@
+// Generated from src/progress/root/progress-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+:host([show-value]) {
+align-items: center;
+display: grid;
+gap: var(--helix-space-sm);
+grid-template-columns: 1fr auto;
+}
+
+[part="value"] {
+color: var(--helix-color-foreground-muted);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+min-inline-size: 3ch;
+text-align: end;
+}
+
+[part="track"] {
+background-color: var(--progress-track-color, var(--helix-color-surface-sunken));
+block-size: var(--progress-size, var(--helix-size-progress));
+border-radius: var(--helix-radii-full);
+inline-size: 100%;
+
+overflow: hidden;
+}
+
+[part="indicator"] {
+background-color: var(--progress-color, var(--helix-color-primary));
+block-size: 100%;
+border-radius: inherit;
+inline-size: 100%;
+scale: var(--progress-fraction, 0) 1;
+transform-origin: left center;
+transition: scale var(--helix-duration-normal) var(--helix-easing-decelerate);
+}
+
+:host(:dir(rtl)) [part="indicator"] {
+transform-origin: right center;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"] {
+transition: none;
+}
+}
+
+:host([indeterminate]) {
+--_progress-cycle: calc(var(--helix-duration-slow) * 5);
+}
+
+:host([indeterminate]) [part="indicator"] {
+animation: helix-progress-indeterminate var(--_progress-cycle) linear infinite;
+
+transition: none;
+}
+
+:host([indeterminate]) [part="indicator"] {
+--_progress-way: 1;
+}
+
+:host([indeterminate]:dir(rtl)) [part="indicator"] {
+--_progress-way: -1;
+}
+
+@keyframes helix-progress-indeterminate {
+0% {
+scale: 0.18 1;
+translate: calc(-18% * var(--_progress-way, 1));
+}
+
+35% {
+scale: 0.5 1;
+translate: calc(12% * var(--_progress-way, 1));
+}
+
+65% {
+scale: 0.5 1;
+translate: calc(52% * var(--_progress-way, 1));
+}
+
+100% {
+scale: 0.18 1;
+translate: calc(100% * var(--_progress-way, 1));
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([indeterminate]) [part="indicator"] {
+animation: none;
+background-image: repeating-linear-gradient(
+-45deg,
+var(--helix-color-background) 0 var(--helix-space-xs),
+transparent var(--helix-space-xs) calc(var(--helix-space-xs) * 2)
+);
+scale: 1 1;
+translate: 0;
+}
+}
+
+:host([shape="ring"]) {
+display: inline-grid;
+place-items: center;
+}
+
+:host([shape="ring"]) [part="track"] {
+--_ring-stroke: var(--progress-ring-width, var(--helix-size-progress));
+
+background-color: transparent;
+block-size: var(--progress-ring-size, 4rem);
+grid-area: 1 / 1;
+inline-size: var(--progress-ring-size, 4rem);
+
+rotate: -90deg;
+}
+
+:host([shape="ring"]) [part="groove"],
+:host([shape="ring"]) [part="indicator"] {
+cx: 50%;
+cy: 50%;
+fill: none;
+r: calc(50% - var(--_ring-stroke) / 2);
+stroke-width: var(--_ring-stroke);
+}
+
+:host([shape="ring"]) [part="groove"] {
+stroke: var(--progress-track-color, var(--helix-color-surface-sunken));
+}
+
+:host([shape="ring"]) [part="indicator"] {
+scale: none;
+stroke: var(--progress-color, var(--helix-color-primary));
+stroke-dasharray: calc(var(--progress-fraction) * 100) 100;
+stroke-linecap: round;
+transition: stroke-dasharray var(--helix-duration-normal) var(--helix-easing-decelerate);
+}
+
+:host([shape="ring"][show-value]) {
+gap: var(--helix-space-none);
+grid-template-columns: auto;
+}
+
+:host([shape="ring"]) [part="value"] {
+grid-area: 1 / 1;
+min-inline-size: 0;
+text-align: center;
+}
+
+:host([shape="ring"][indeterminate]) [part="track"] {
+animation: helix-progress-ring var(--_progress-cycle) linear infinite;
+}
+
+:host([shape="ring"][indeterminate]) [part="indicator"] {
+animation: helix-progress-ring-sweep calc(var(--_progress-cycle) * 0.7) ease-in-out infinite;
+transition: none;
+}
+
+@keyframes helix-progress-ring {
+from {
+rotate: -90deg;
+}
+
+to {
+rotate: 270deg;
+}
+}
+
+@keyframes helix-progress-ring-sweep {
+0% {
+stroke-dasharray: 10 100;
+stroke-dashoffset: 0;
+}
+
+50% {
+stroke-dasharray: 70 100;
+stroke-dashoffset: -25;
+}
+
+100% {
+stroke-dasharray: 10 100;
+stroke-dashoffset: -100;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([shape="ring"]) [part="indicator"] {
+transition: none;
+}
+
+:host([shape="ring"][indeterminate]) [part="track"] {
+animation-duration: calc(var(--_progress-cycle) * 12);
+}
+
+:host([shape="ring"][indeterminate]) [part="indicator"] {
+animation: none;
+stroke-dasharray: 25 100;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}
+
+:host([emphasis="subtle"]) [part="indicator"] {
+background-color: color-mix(
+in oklab,
+var(--progress-color, var(--helix-color-primary)) 30%,
+var(--progress-track-color, var(--helix-color-surface-sunken))
+);
+}
+
+:host([emphasis="subtle"][shape="ring"]) [part="indicator"] {
+stroke: color-mix(
+in oklab,
+var(--progress-color, var(--helix-color-primary)) 30%,
+var(--progress-track-color, var(--helix-color-surface-sunken))
+);
+}`);