@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,73 @@
+// Generated from src/image/root/image-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+aspect-ratio: var(--image-aspect, auto);
+display: block;
+overflow: hidden;
+position: relative;
+}
+
+:host([rounded]) {
+border-radius: var(--image-radius, var(--helix-radii-md));
+}
+
+[part="image"] {
+block-size: 100%;
+display: block;
+inline-size: 100%;
+object-fit: var(--image-fit, cover);
+object-position: var(--image-position, center);
+}
+
+:host([data-status="error"]) [part="image"] {
+visibility: hidden;
+}
+
+[part="placeholder"],
+[part="fallback"] {
+align-items: center;
+display: flex;
+inset: 0;
+justify-content: center;
+position: absolute;
+}
+
+:host [part="placeholder"][hidden],
+:host [part="fallback"][hidden] {
+display: none;
+}
+
+[part="placeholder"] {
+background-color: var(--image-placeholder-color, var(--helix-color-surface-sunken));
+}
+
+[part="placeholder"] ::slotted(*) {
+block-size: 100%;
+inline-size: 100%;
+}
+
+[part="fallback"] {
+background-color: var(--image-placeholder-color, var(--helix-color-surface-sunken));
+color: var(--helix-color-foreground-subtle);
+}
+
+[part="image"] {
+opacity: 0;
+transition: opacity var(--helix-duration-normal) var(--helix-easing-standard);
+}
+
+:host([data-status="loaded"]) [part="image"] {
+opacity: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="image"] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,39 @@
+import { HelixHeadlessImage } from '@fusion.dev/helix-headless/image';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A picture that says whether it arrived.
+ *
+ * @description
+ * Presentation only: the box the picture is given, how it fills it, and the
+ * fade when it lands. What the three states are and when they change is the
+ * base class.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Picture, Img, Figure
+ * @documentation https://helix.fusion.dev/components/image
+ *
+ * @cssproperty --image-aspect - The ratio of the box, as `16 / 9`.
+ * @cssproperty --image-fit - How the picture fills it.
+ * @cssproperty --image-placeholder-color - The resting surface behind both stand-ins.
+ * @cssproperty --image-position - Which part survives a crop.
+ * @cssproperty --image-radius - Corner radius, under `rounded`.
+ */
+export declare class HelixImage extends HelixHeadlessImage {
+    static styles: CSSResultGroup;
+    /**
+     * Whether the corners are cut.
+     *
+     * A boolean rather than a radius, because the radius is a token and the
+     * question a consumer is answering is whether this picture is a card's
+     * surface or a page's. `--image-radius` moves it for the case that is
+     * neither.
+     */
+    rounded: boolean;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-image': HelixImage;
+    }
+}

package/dist/image/root/image-root.js

@@ -0,0 +1,52 @@
+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 { HelixHeadlessImage } from '@fusion.dev/helix-headless/image';
+import { property } from 'lit/decorators.js';
+import { styles } from './image-root.css.js';
+/**
+ * @summary A picture that says whether it arrived.
+ *
+ * @description
+ * Presentation only: the box the picture is given, how it fills it, and the
+ * fade when it lands. What the three states are and when they change is the
+ * base class.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category media
+ * @aliases Picture, Img, Figure
+ * @documentation https://helix.fusion.dev/components/image
+ *
+ * @cssproperty --image-aspect - The ratio of the box, as `16 / 9`.
+ * @cssproperty --image-fit - How the picture fills it.
+ * @cssproperty --image-placeholder-color - The resting surface behind both stand-ins.
+ * @cssproperty --image-position - Which part survives a crop.
+ * @cssproperty --image-radius - Corner radius, under `rounded`.
+ */
+let HelixImage = class HelixImage extends HelixHeadlessImage {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the corners are cut.
+         *
+         * A boolean rather than a radius, because the radius is a token and the
+         * question a consumer is answering is whether this picture is a card's
+         * surface or a page's. `--image-radius` moves it for the case that is
+         * neither.
+         */
+        this.rounded = false;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixImage.prototype, "rounded", void 0);
+HelixImage = __decorate([
+    customElement('helix-image')
+], HelixImage);
+export { HelixImage };

package/dist/index.d.ts

@@ -0,0 +1,100 @@
+import './element-events.generated.js';
+/**
+ * Everything core exports, forwarded whole. See the note in `helix/headless`:
+ * a hand-kept list drifts, and it drifts silently until a component happens to
+ * declare a public member with a type nobody forwarded yet.
+ */
+export * from '@fusion.dev/helix-core';
+export * from './accordion/index.js';
+export * from './announcement/index.js';
+export * from './app-header/index.js';
+export * from './aura/index.js';
+export * from './avatar/index.js';
+export * from './badge/index.js';
+export * from './bar-chart/index.js';
+export * from './blockquote/index.js';
+export * from './breadcrumbs/index.js';
+export * from './button/index.js';
+export * from './button-group/index.js';
+export * from './callout/index.js';
+export * from './card/index.js';
+export * from './carousel/index.js';
+export * from './chat/index.js';
+export * from './checkbox/index.js';
+export * from './checkbox-group/index.js';
+export * from './code/index.js';
+export * from './code-block/index.js';
+export * from './color-input/index.js';
+export * from './color-picker/index.js';
+export * from './combobox/index.js';
+export * from './command/index.js';
+export * from './copy-button/index.js';
+export * from './data-table/index.js';
+export * from './date-input/index.js';
+export * from './date-picker/index.js';
+export * from './dialog/index.js';
+export * from './divider/index.js';
+export * from './donut-chart/index.js';
+export * from './drawer/index.js';
+export * from './drilldown/index.js';
+export * from './empty/index.js';
+export * from './file-input/index.js';
+export * from './flex/index.js';
+export * from './format-date/index.js';
+export * from './grid/index.js';
+export * from './heatmap/index.js';
+export * from './icon/index.js';
+export * from './icon-button/index.js';
+export * from './image/index.js';
+export * from './input/index.js';
+export * from './kbd/index.js';
+export * from './legend/index.js';
+export * from './line-chart/index.js';
+export * from './list/index.js';
+export * from './listbox/index.js';
+export * from './loader/index.js';
+export * from './megamenu/index.js';
+export * from './menu/index.js';
+export * from './meter/index.js';
+export * from './navigation/index.js';
+export * from './notifications/index.js';
+export * from './number-input/index.js';
+export * from './option/index.js';
+export * from './outline/index.js';
+export * from './pagination/index.js';
+export * from './pin-input/index.js';
+export * from './popover/index.js';
+export * from './progress/index.js';
+export * from './qr-code/index.js';
+export * from './quote/index.js';
+export * from './radio/index.js';
+export * from './rating/index.js';
+export * from './sandbox/index.js';
+export * from './scroll-area/index.js';
+export * from './select/index.js';
+export * from './skeleton/index.js';
+export * from './slider/index.js';
+export * from './sparkline/index.js';
+export * from './speed-dial/index.js';
+export * from './splitter/index.js';
+export * from './stat/index.js';
+export * from './steps/index.js';
+export * from './switch/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';
+export * from './tag/index.js';
+export * from './text/index.js';
+export * from './textarea/index.js';
+export * from './time-input/index.js';
+export * from './time-picker/index.js';
+export * from './timeline/index.js';
+export * from './toast/index.js';
+export * from './toggle/index.js';
+export * from './toolbar/index.js';
+export * from './tooltip/index.js';
+export * from './tour/index.js';
+export * from './tree/index.js';
+export * from './trend/index.js';
+export * from './video/index.js';
+export * from './video-playlist/index.js';
+export * from './virtual-list/index.js';

package/dist/index.js

@@ -0,0 +1,100 @@
+import './element-events.generated.js';
+/**
+ * Everything core exports, forwarded whole. See the note in `helix/headless`:
+ * a hand-kept list drifts, and it drifts silently until a component happens to
+ * declare a public member with a type nobody forwarded yet.
+ */
+export * from '@fusion.dev/helix-core';
+export * from './accordion/index.js';
+export * from './announcement/index.js';
+export * from './app-header/index.js';
+export * from './aura/index.js';
+export * from './avatar/index.js';
+export * from './badge/index.js';
+export * from './bar-chart/index.js';
+export * from './blockquote/index.js';
+export * from './breadcrumbs/index.js';
+export * from './button/index.js';
+export * from './button-group/index.js';
+export * from './callout/index.js';
+export * from './card/index.js';
+export * from './carousel/index.js';
+export * from './chat/index.js';
+export * from './checkbox/index.js';
+export * from './checkbox-group/index.js';
+export * from './code/index.js';
+export * from './code-block/index.js';
+export * from './color-input/index.js';
+export * from './color-picker/index.js';
+export * from './combobox/index.js';
+export * from './command/index.js';
+export * from './copy-button/index.js';
+export * from './data-table/index.js';
+export * from './date-input/index.js';
+export * from './date-picker/index.js';
+export * from './dialog/index.js';
+export * from './divider/index.js';
+export * from './donut-chart/index.js';
+export * from './drawer/index.js';
+export * from './drilldown/index.js';
+export * from './empty/index.js';
+export * from './file-input/index.js';
+export * from './flex/index.js';
+export * from './format-date/index.js';
+export * from './grid/index.js';
+export * from './heatmap/index.js';
+export * from './icon/index.js';
+export * from './icon-button/index.js';
+export * from './image/index.js';
+export * from './input/index.js';
+export * from './kbd/index.js';
+export * from './legend/index.js';
+export * from './line-chart/index.js';
+export * from './list/index.js';
+export * from './listbox/index.js';
+export * from './loader/index.js';
+export * from './megamenu/index.js';
+export * from './menu/index.js';
+export * from './meter/index.js';
+export * from './navigation/index.js';
+export * from './notifications/index.js';
+export * from './number-input/index.js';
+export * from './option/index.js';
+export * from './outline/index.js';
+export * from './pagination/index.js';
+export * from './pin-input/index.js';
+export * from './popover/index.js';
+export * from './progress/index.js';
+export * from './qr-code/index.js';
+export * from './quote/index.js';
+export * from './radio/index.js';
+export * from './rating/index.js';
+export * from './sandbox/index.js';
+export * from './scroll-area/index.js';
+export * from './select/index.js';
+export * from './skeleton/index.js';
+export * from './slider/index.js';
+export * from './sparkline/index.js';
+export * from './speed-dial/index.js';
+export * from './splitter/index.js';
+export * from './stat/index.js';
+export * from './steps/index.js';
+export * from './switch/index.js';
+export * from './table/index.js';
+export * from './tabs/index.js';
+export * from './tag/index.js';
+export * from './text/index.js';
+export * from './textarea/index.js';
+export * from './time-input/index.js';
+export * from './time-picker/index.js';
+export * from './timeline/index.js';
+export * from './toast/index.js';
+export * from './toggle/index.js';
+export * from './toolbar/index.js';
+export * from './tooltip/index.js';
+export * from './tour/index.js';
+export * from './tree/index.js';
+export * from './trend/index.js';
+export * from './video/index.js';
+export * from './video-playlist/index.js';
+export * from './virtual-list/index.js';

package/dist/input/index.d.ts

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

package/dist/input/index.js

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

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

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

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

@@ -0,0 +1,123 @@
+// Generated from src/input/root/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);
+
+--_input-size: var(--input-size, var(--helix-size-control));
+}
+
+[part="field"] {
+align-items: center;
+background-color: var(--input-background-color, var(--helix-color-well));
+block-size: var(--_input-size);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-subtle);
+display: flex;
+gap: var(--helix-space-2xs);
+padding-inline: var(--helix-space-xs);
+transition:
+border-color var(--helix-duration-fast) var(--helix-easing-standard),
+background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not(:disabled)) [part="field"]:hover {
+border-color: var(--helix-color-primary);
+}
+
+:host(:focus-within) [part="field"],
+:host(:focus-within) [part="field"]:hover {
+border-color: var(--helix-color-primary);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: 0;
+}
+
+:host(:state(invalid)) [part="field"],
+:host(:state(invalid)) [part="field"]:hover,
+:host(:state(invalid):focus-within) [part="field"],
+:host(:state(invalid):focus-within) [part="field"]:hover {
+border-color: var(--helix-color-danger);
+outline-color: var(--helix-color-danger);
+}
+
+[part="control"] {
+all: unset;
+
+box-sizing: border-box;
+block-size: 100%;
+color: var(--helix-color-foreground);
+flex: 1 1 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+}
+
+[part="control"]::-webkit-search-cancel-button {
+appearance: none;
+}
+
+slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+}
+
+:host(:disabled) [part="field"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+:host([readonly]) [part="field"] {
+background-color: transparent;
+}
+
+[part="clear"],
+[part="reveal"] {
+all: unset;
+--icon-size: var(--helix-size-icon-tight);
+
+align-items: center;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: flex;
+flex: 0 0 auto;
+justify-content: center;
+min-block-size: var(--helix-size-icon-loose);
+min-inline-size: var(--helix-size-icon-loose);
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="clear"]:hover,
+[part="reveal"]:hover {
+color: var(--helix-color-foreground);
+}
+
+[part="clear"]:focus-visible,
+[part="reveal"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="reveal"][aria-pressed="true"] {
+color: var(--helix-color-foreground);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="field"],
+[part="clear"],
+[part="reveal"] {
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,36 @@
+import { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
+import type { CSSResultGroup } from 'lit';
+import '../../icon/index.js';
+/**
+ * @summary A single line of text a reader types into.
+ *
+ * @description
+ * The frame is the field rather than the input, so anything slotted at either
+ * end sits inside the same box as the text and the focus ring is drawn once,
+ * around the whole control, instead of around a smaller box within it.
+ *
+ * The input itself is the native one, stripped rather than replaced, so the
+ * caret, the selection, the autofill, and the keyboard a phone chooses are all
+ * the platform's.
+ *
+ * Height comes from the region, like every other control: `data-density` on
+ * whatever holds it, not a `size` here. Invalid styling waits for
+ * `:user-invalid`, because a field is not wrong before anyone has filled it in.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases TextField, Field, TextInput
+ * @documentation https://helix.fusion.dev/components/input
+ *
+ * @cssproperty --input-background-color - Fill behind the text.
+ * @cssproperty --input-size - Height of the field.
+ */
+export declare class HelixInput extends HelixHeadlessInput {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-input': HelixInput;
+    }
+}

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

@@ -0,0 +1,48 @@
+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 { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
+/* The clear and reveal buttons render one, and a custom element registers on
+   import: a consumer importing this family alone would otherwise get an inert
+   unknown element where the mark should be. */
+import '../../icon/index.js';
+import { styles as glyphStyles } from '../../icon/glyph.css.js';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles } from './input-root.css.js';
+/**
+ * @summary A single line of text a reader types into.
+ *
+ * @description
+ * The frame is the field rather than the input, so anything slotted at either
+ * end sits inside the same box as the text and the focus ring is drawn once,
+ * around the whole control, instead of around a smaller box within it.
+ *
+ * The input itself is the native one, stripped rather than replaced, so the
+ * caret, the selection, the autofill, and the keyboard a phone chooses are all
+ * the platform's.
+ *
+ * Height comes from the region, like every other control: `data-density` on
+ * whatever holds it, not a `size` here. Invalid styling waits for
+ * `:user-invalid`, because a field is not wrong before anyone has filled it in.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases TextField, Field, TextInput
+ * @documentation https://helix.fusion.dev/components/input
+ *
+ * @cssproperty --input-background-color - Fill behind the text.
+ * @cssproperty --input-size - Height of the field.
+ */
+let HelixInput = class HelixInput extends HelixHeadlessInput {
+    static { this.styles = [glyphStyles, fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixInput = __decorate([
+    customElement('helix-input')
+], HelixInput);
+export { HelixInput };

package/dist/kbd/index.d.ts

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

package/dist/kbd/index.js

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

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

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

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

@@ -0,0 +1,47 @@
+// Generated from src/kbd/root/kbd-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+font: inherit;
+
+vertical-align: -0.05em;
+
+--_kbd-size: 0.85em;
+--_kbd-height: 1.5em;
+--_kbd-inset: 0.4em;
+}
+
+[part="kbd"] {
+align-items: center;
+background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));
+block-size: var(--_kbd-height);
+border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+
+box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));
+color: var(--helix-color-foreground-muted);
+display: inline-flex;
+font-family: var(--helix-font-mono);
+
+font-feature-settings:
+"liga" 0,
+"calt" 0;
+font-size: var(--_kbd-size);
+font-variant-ligatures: none;
+font-weight: var(--helix-weight-medium);
+justify-content: center;
+line-height: 1;
+
+min-inline-size: var(--_kbd-height);
+
+white-space: nowrap;
+padding-inline: var(--_kbd-inset);
+
+padding-block-start: var(--helix-border-thin);
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,30 @@
+import { HelixHeadlessKbd } from '@fusion.dev/helix-headless/kbd';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A keyboard key or chord, set inline with text.
+ *
+ * @description
+ * Drawn as a physical key: a hairline, a sunken fill, and one inset shadow
+ * along the bottom edge that reads as depth without becoming a picture of a
+ * key.
+ *
+ * Sized in `em`, so it stays proportional to whatever it is set inside rather
+ * than holding one size and looking wrong in a heading.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Key, Shortcut, Hotkey
+ * @documentation https://helix.fusion.dev/components/kbd
+ *
+ * @cssproperty --kbd-background-color - Fill of the key.
+ * @cssproperty --kbd-border-color - Color of the hairline and the edge.
+ */
+export declare class HelixKbd extends HelixHeadlessKbd {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-kbd': HelixKbd;
+    }
+}