@fusion.dev/helix 0.0.0-dev

package/dist/element-events.generated.js

@@ -0,0 +1,123 @@
+/* Generated by `bun run element-events` from this package's manifest. Do not edit.
+ *
+ * Which events each tag dispatches, registered so the React prop audit can tell
+ * a handler on the wrong element from one on the right one. See
+ * `helix/core/src/events/element-events.ts`. */
+import { registerElementEvents } from '@fusion.dev/helix-core';
+registerElementEvents({
+    'helix-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-announcement': ['helix-dismiss'],
+    'helix-app-header': ['helix-scrolled'],
+    'helix-avatar': ['error', 'load'],
+    'helix-carousel': ['helix-select'],
+    'helix-chat': ['helix-before-pin'],
+    'helix-chat-composer': ['helix-send'],
+    'helix-chat-message': ['helix-send'],
+    'helix-checkbox': ['change', 'helix-before-toggle', 'input'],
+    'helix-checkbox-group': ['change', 'helix-before-change', 'input'],
+    'helix-color-input': [
+        'change',
+        'helix-before-change',
+        'helix-before-close',
+        'helix-before-open',
+        'input',
+        'toggle',
+    ],
+    'helix-color-picker': [
+        'change',
+        'helix-before-change',
+        'helix-copy',
+        'helix-sample-end',
+        'helix-sample-start',
+        'input',
+    ],
+    'helix-combobox': [
+        'change',
+        'helix-before-change',
+        'helix-before-close',
+        'helix-before-open',
+        'helix-create',
+        'input',
+        'toggle',
+    ],
+    'helix-command': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
+    'helix-copy-button': ['helix-copy'],
+    'helix-data-table': ['helix-filter', 'helix-navigate', 'helix-sort'],
+    'helix-date-input': [
+        'change',
+        'helix-before-change',
+        'helix-before-close',
+        'helix-before-open',
+        'input',
+        'toggle',
+    ],
+    'helix-date-picker': ['change', 'helix-before-change', 'helix-navigate', 'input'],
+    'helix-dialog': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-drilldown': ['helix-select'],
+    'helix-drilldown-item': ['helix-select'],
+    'helix-file-input': ['change', 'helix-before-change', 'input'],
+    'helix-heatmap': ['helix-resize'],
+    'helix-image': ['error', 'load'],
+    'helix-input': ['change', 'helix-before-change', 'input'],
+    'helix-kbd': ['helix-shortcut'],
+    'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
+    'helix-megamenu': ['helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-menu': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
+    'helix-menu-item': ['helix-select'],
+    'helix-notification': ['helix-dismiss', 'helix-read'],
+    'helix-notifications': ['helix-read'],
+    'helix-number-input': ['change', 'helix-before-change', 'input'],
+    'helix-option': ['helix-select'],
+    'helix-outline': ['helix-before-activate'],
+    'helix-pagination': ['helix-navigate'],
+    'helix-pagination-size': ['helix-before-change'],
+    'helix-pin-input': ['change', 'helix-before-change', 'helix-complete', 'input'],
+    'helix-popover': ['helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-radio': ['helix-select'],
+    'helix-radio-group': ['change', 'helix-before-change', 'input'],
+    'helix-rating': ['change', 'helix-before-change', 'input'],
+    'helix-sandbox': ['helix-before-panel-resize', 'helix-before-split'],
+    'helix-sandbox-preview': ['helix-console', 'helix-resize'],
+    'helix-sandbox-source': ['helix-before-edit', 'helix-caret'],
+    'helix-select': [
+        'change',
+        'helix-before-change',
+        'helix-before-close',
+        'helix-before-open',
+        'input',
+        'toggle',
+    ],
+    'helix-slider': ['change', 'helix-before-change', 'input'],
+    'helix-speed-dial': ['helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-speed-dial-item': ['helix-select'],
+    'helix-splitter': ['helix-before-collapse', 'helix-before-resize'],
+    'helix-step': ['helix-select'],
+    'helix-steps': ['helix-activate', 'helix-before-activate'],
+    'helix-switch': ['change', 'helix-before-toggle', 'input'],
+    'helix-tab': ['helix-select'],
+    'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
+    'helix-tag': ['helix-dismiss'],
+    'helix-textarea': ['change', 'helix-before-change', 'input'],
+    'helix-time-input': [
+        'change',
+        'helix-before-change',
+        'helix-before-close',
+        'helix-before-open',
+        'input',
+        'toggle',
+    ],
+    'helix-time-picker': ['change', 'helix-before-change', 'input'],
+    'helix-toast-item': ['helix-dismiss'],
+    'helix-toggle': ['helix-select'],
+    'helix-toggle-group': ['change', 'helix-before-change', 'helix-select', 'input'],
+    'helix-tooltip': ['helix-before-close', 'helix-before-open', 'toggle'],
+    'helix-tour': ['helix-before-activate', 'helix-before-close', 'helix-complete', 'toggle'],
+    'helix-tour-stop': ['helix-tour-ask'],
+    'helix-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],
+    'helix-tree-item': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
+    'helix-video': ['ended', 'helix-next', 'helix-previous', 'pause', 'play'],
+    'helix-video-playlist': ['helix-activate', 'helix-before-activate'],
+    'helix-video-playlist-item': ['helix-select'],
+    'helix-video-playlist-menu': ['helix-select'],
+});

package/dist/empty/index.d.ts

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

package/dist/empty/index.js

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

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

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

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

@@ -0,0 +1,45 @@
+// Generated from src/empty/root/empty-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-direction: column;
+gap: var(--helix-space-sm);
+padding: var(--empty-padding, var(--helix-space-2xl));
+text-align: center;
+}
+
+slot[name="icon"]::slotted(*) {
+
+--icon-size: var(--helix-size-icon-lg);
+
+color: var(--helix-color-foreground-subtle);
+}
+
+slot[name="heading"]::slotted(*) {
+color: var(--helix-color-foreground);
+font-size: var(--helix-text-lg);
+font-weight: var(--helix-weight-semibold);
+letter-spacing: var(--helix-tracking-tight);
+margin: var(--helix-space-none);
+}
+
+slot:not([name]) {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-sm);
+}
+
+slot:not([name])::slotted(*) {
+margin: var(--helix-space-none);
+max-inline-size: 46ch;
+}
+slot[name="actions"]::slotted(*) {
+margin-block-start: var(--helix-space-sm);
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,26 @@
+import { HelixHeadlessEmpty } from '@fusion.dev/helix-headless/empty';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Says that a region has nothing in it, and what to do about it.
+ *
+ * @description
+ * Centered and given room, because an empty view is the only thing on screen
+ * and crowding it against the top edge makes the region look broken rather than
+ * empty.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Placeholder, NoResults, Blank
+ * @documentation https://helix.fusion.dev/components/empty
+ *
+ * @cssproperty --empty-padding - Space around the whole block.
+ */
+export declare class HelixEmpty extends HelixHeadlessEmpty {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-empty': HelixEmpty;
+    }
+}

package/dist/empty/root/empty-root.js

@@ -0,0 +1,32 @@
+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 { HelixHeadlessEmpty } from '@fusion.dev/helix-headless/empty';
+import { styles } from './empty-root.css.js';
+/**
+ * @summary Says that a region has nothing in it, and what to do about it.
+ *
+ * @description
+ * Centered and given room, because an empty view is the only thing on screen
+ * and crowding it against the top edge makes the region look broken rather than
+ * empty.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Placeholder, NoResults, Blank
+ * @documentation https://helix.fusion.dev/components/empty
+ *
+ * @cssproperty --empty-padding - Space around the whole block.
+ */
+let HelixEmpty = class HelixEmpty extends HelixHeadlessEmpty {
+    static { this.styles = styles; }
+};
+HelixEmpty = __decorate([
+    customElement('helix-empty')
+], HelixEmpty);
+export { HelixEmpty };

package/dist/file-input/index.d.ts

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

package/dist/file-input/index.js

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

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

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

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

@@ -0,0 +1,194 @@
+// Generated from src/file-input/root/file-input-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="field"] {
+align-items: center;
+position: relative;
+background-color: var(--file-input-background-color, var(--helix-color-well));
+border: var(--helix-border-thin) dashed var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+display: flex;
+gap: var(--helix-space-xs);
+justify-content: center;
+padding: var(--file-input-padding, var(--helix-space-md));
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="control"] {
+cursor: pointer;
+inset: 0;
+opacity: 0;
+position: absolute;
+}
+
+:host {
+display: block;
+}
+
+[part="field"]:has([part="control"]:focus-visible) {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="field"][data-dropping] {
+background-color: var(--helix-color-primary-subtle);
+border-color: var(--helix-color-primary);
+border-style: solid;
+}
+
+[part="trigger"] {
+align-items: center;
+color: var(--helix-color-foreground);
+display: flex;
+flex-direction: column;
+font-family: var(--helix-font-sans);
+gap: var(--helix-space-2xs);
+text-align: center;
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-medium);
+
+pointer-events: none;
+}
+
+[part="list"] {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+list-style: none;
+margin-block: var(--helix-space-xs) 0;
+padding: var(--helix-space-none);
+}
+
+[part="file"] {
+align-items: center;
+background-color: var(--helix-color-surface);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+display: flex;
+gap: var(--helix-space-sm);
+opacity: 1;
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-sm);
+scale: 1 1;
+transform-origin: top;
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-fast) var(--helix-easing-emphasized);
+}
+
+@starting-style {
+[part="file"] {
+opacity: 0;
+scale: 1 0.9;
+}
+}
+
+[part="detail"] {
+align-items: center;
+column-gap: var(--helix-space-sm);
+display: flex;
+flex: 1 1 auto;
+flex-wrap: wrap;
+min-inline-size: 0;
+row-gap: var(--helix-space-2xs);
+}
+
+[part="name"] {
+min-inline-size: min(100%, 16ch);
+}
+
+[part="meta"] {
+--helix-size-tag: var(--helix-size-tag-sm);
+
+display: flex;
+flex-wrap: wrap;
+gap: var(--helix-space-2xs);
+}
+
+[part="size"] {
+font-variant-numeric: tabular-nums;
+}
+
+[part="name"] {
+color: var(--helix-color-foreground);
+flex: 1 1 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+
+overflow-wrap: anywhere;
+}
+
+[part="remove"] {
+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: none;
+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="remove"]:hover {
+color: var(--helix-color-danger);
+}
+
+[part="remove"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host(:disabled) [part="field"] {
+border-style: solid;
+color: var(--helix-color-foreground-subtle);
+}
+
+:host(:disabled) [part="control"],
+:host(:disabled) [part="trigger"] {
+cursor: not-allowed;
+}
+
+:host(:not(:disabled)) [part="field"]:hover {
+border-color: var(--helix-color-foreground-muted);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="field"],
+[part="file"],
+[part="remove"] {
+transition: none;
+}
+
+[part="file"] {
+opacity: 1;
+scale: 1 1;
+}
+}
+
+::slotted(helix-icon[slot="trigger"]) {
+--icon-size: var(--helix-size-icon-loose);
+
+color: var(--helix-color-foreground-muted);
+}
+
+: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);
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,40 @@
+import { HelixHeadlessFileInput } from '@fusion.dev/helix-headless/file-input';
+import type { CSSResultGroup } from 'lit';
+import '../../icon/index.js';
+import '../../tag/index.js';
+/**
+ * @summary A control for choosing files, by pointer or by dropping them on it.
+ *
+ * @description
+ * The field is a box rather than a line, because nothing is typed into it: its
+ * height is not a line of text, and what a reader aims at is the whole area. The
+ * border is dashed for the same reason a drop target usually is, which is the
+ * only affordance one has before anything is being dragged.
+ *
+ * The native input is kept and laid over the field at zero opacity rather than
+ * hidden, so a click anywhere on the box lands on the input itself and opens the
+ * picker. Hiding it with `display: none` would take it out of the tab order and
+ * out of the form, and a script clicking a hidden input is the same thing with
+ * more moving parts.
+ *
+ * The focus ring is drawn on the field, because the control it belongs to is
+ * invisible.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases FileUpload, FilePicker, Dropzone, InputFile
+ * @documentation https://helix.fusion.dev/components/file-input
+ *
+ * @cssproperty --file-input-background-color - Fill behind the field.
+ * @cssproperty --file-input-padding - Padding inside the field.
+ */
+export declare class HelixFileInput extends HelixHeadlessFileInput {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-file-input': HelixFileInput;
+    }
+}

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

@@ -0,0 +1,53 @@
+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 { HelixHeadlessFileInput } from '@fusion.dev/helix-headless/file-input';
+/* Side-effect import, because the tier below renders `<helix-icon>` for each
+   file's remove control and a custom element registers on import. Inherited from
+   the base along with the template, which is why it is restated here.
+   `check:composed` enforces it. */
+import '../../icon/index.js';
+import '../../tag/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 './file-input-root.css.js';
+/**
+ * @summary A control for choosing files, by pointer or by dropping them on it.
+ *
+ * @description
+ * The field is a box rather than a line, because nothing is typed into it: its
+ * height is not a line of text, and what a reader aims at is the whole area. The
+ * border is dashed for the same reason a drop target usually is, which is the
+ * only affordance one has before anything is being dragged.
+ *
+ * The native input is kept and laid over the field at zero opacity rather than
+ * hidden, so a click anywhere on the box lands on the input itself and opens the
+ * picker. Hiding it with `display: none` would take it out of the tab order and
+ * out of the form, and a script clicking a hidden input is the same thing with
+ * more moving parts.
+ *
+ * The focus ring is drawn on the field, because the control it belongs to is
+ * invisible.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category forms
+ * @aliases FileUpload, FilePicker, Dropzone, InputFile
+ * @documentation https://helix.fusion.dev/components/file-input
+ *
+ * @cssproperty --file-input-background-color - Fill behind the field.
+ * @cssproperty --file-input-padding - Padding inside the field.
+ */
+let HelixFileInput = class HelixFileInput extends HelixHeadlessFileInput {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [glyphStyles, fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixFileInput = __decorate([
+    customElement('helix-file-input')
+], HelixFileInput);
+export { HelixFileInput };

package/dist/flex/index.d.ts

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

package/dist/flex/index.js

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

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

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

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

@@ -0,0 +1,81 @@
+// Generated from src/flex/root/flex-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: row;
+gap: var(--helix-space-none);
+}
+
+:host([inline]) {
+display: inline-flex;
+}
+
+:host([direction="column"]) {
+flex-direction: column;
+}
+
+:host([wrap]) {
+flex-wrap: wrap;
+}
+
+: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: flex-start;
+}
+:host([align="center"]) {
+align-items: center;
+}
+:host([align="end"]) {
+align-items: flex-end;
+}
+:host([align="baseline"]) {
+align-items: baseline;
+}
+
+:host([justify="center"]) {
+justify-content: center;
+}
+:host([justify="end"]) {
+justify-content: flex-end;
+}
+:host([justify="between"]) {
+justify-content: space-between;
+}
+:host([justify="around"]) {
+justify-content: space-around;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);