@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,249 @@
+// Generated from src/combobox/root/combobox-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);
+position: relative;
+}
+
+[part="field"] {
+align-items: center;
+background-color: var(--combobox-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;
+display: flex;
+gap: var(--helix-space-xs);
+padding-inline: var(--helix-space-xs);
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="field"]:has([part="tags"]) {
+block-size: auto;
+flex-wrap: wrap;
+min-block-size: var(--helix-size-control);
+
+padding-block: var(--helix-space-2xs);
+padding-inline-end: calc(var(--helix-space-xs) + var(--helix-size-icon));
+position: relative;
+}
+
+[part="indicator"],
+::slotted([slot="indicator"]) {
+transition: scale var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="field"]:has([part="tags"]) [part="indicator"],
+[part="field"]:has([part="tags"]) ::slotted([slot="indicator"]) {
+inset-block-start: 50%;
+inset-inline-end: var(--helix-space-xs);
+position: absolute;
+translate: 0 -50%;
+}
+
+[part="tags"] {
+display: contents;
+}
+
+[part="tag"] {
+flex: 0 0 auto;
+max-inline-size: 100%;
+}
+
+[part="rest"] {
+align-self: center;
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+white-space: nowrap;
+}
+
+[part="control"] {
+all: unset;
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+flex: 1 1 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+}
+
+[part="field"]:has([part="tags"]) [part="control"] {
+flex: 1 1 var(--combobox-control-size, 4ch);
+}
+
+[part="control"]::placeholder {
+color: var(--helix-color-foreground-subtle);
+font-weight: var(--helix-weight-medium);
+}
+
+: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);
+}
+
+:host(:disabled) [part="field"] {
+color: var(--helix-color-foreground-subtle);
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+[part="indicator"] {
+block-size: var(--helix-size-icon);
+color: var(--helix-color-foreground-muted);
+flex: 0 0 auto;
+inline-size: var(--helix-size-icon);
+}
+
+:host(:state(open)) [part="indicator"],
+:host(:state(open)) ::slotted([slot="indicator"]) {
+scale: 1 -1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="indicator"],
+::slotted([slot="indicator"]) {
+transition: none;
+}
+}
+
+slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {
+--icon-size: var(--helix-size-icon);
+
+color: var(--helix-color-foreground-muted);
+flex: 0 0 auto;
+}
+
+[part="surface"] {
+background-color: var(--helix-color-surface-overlay);
+border: var(--combobox-border-width, var(--helix-border-floating)) solid
+var(--combobox-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--combobox-shadow, var(--helix-shadow-floating));
+box-sizing: border-box;
+inline-size: var(--combobox-panel-size, var(--floating-anchor-inline-size, 100%));
+inset: auto;
+margin: var(--helix-space-none);
+max-block-size: var(--floating-available-block-size, none);
+min-inline-size: max-content;
+overflow: hidden;
+padding: var(--helix-space-none);
+position: absolute;
+}
+
+[part="create"] {
+all: unset;
+
+border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: block;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+inline-size: 100%;
+padding: var(--helix-space-xs) var(--helix-space-sm);
+text-align: start;
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="create"]:hover {
+background-color: light-dark(
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
+color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
+);
+}
+
+[part="create"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="listbox"] {
+--listbox-background-color: transparent;
+
+border: none;
+display: block;
+}
+
+[part="surface"] {
+--_travel: calc(var(--helix-space-2xs) * -1);
+
+opacity: 0;
+scale: 0.96;
+transform: translateY(var(--_travel));
+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="surface"][data-placement^="top"] {
+--_travel: var(--helix-space-2xs);
+
+transform-origin: var(--floating-arrow-x, 50%) 100%;
+}
+
+[part="surface"][data-placement^="bottom"] {
+transform-origin: var(--floating-arrow-x, 50%) 0;
+}
+
+[part="surface"][data-placed] {
+opacity: 1;
+scale: 1;
+transform: none;
+}
+
+[part="surface"][hidden],
+[part="surface"]:not(:popover-open) {
+display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="field"] {
+transition: none;
+}
+
+[part="create"] {
+transition: none;
+}
+
+[part="surface"],
+[part="surface"][data-placed] {
+scale: 1;
+transform: none;
+transition: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,37 @@
+import { HelixHeadlessCombobox } from '@fusion.dev/helix-headless/combobox';
+import type { CSSResultGroup } from 'lit';
+import '../../listbox/index.js';
+import '../../tag/index.js';
+/**
+ * @summary A field that filters a list as it is typed into.
+ *
+ * @description
+ * The frame is the field rather than the input, so the caret, the marks and the
+ * focus ring are drawn once around the whole control, which is the arrangement
+ * Input, Color Input and Date Input all take.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Autocomplete, Typeahead, Search select
+ * @documentation https://helix.fusion.dev/components/combobox
+ *
+ * @cssproperty --combobox-background-color - Fill behind the field.
+ * @cssproperty --combobox-border-color - Color of the panel's edge.
+ * @cssproperty --combobox-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 --combobox-control-size - Smallest the text field shrinks to
+ * @cssproperty --combobox-panel-size - Width of the panel. Follows the field by default.
+ * @cssproperty --combobox-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 HelixCombobox extends HelixHeadlessCombobox {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-combobox': HelixCombobox;
+    }
+}

package/dist/combobox/root/combobox-root.js

@@ -0,0 +1,49 @@
+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 { HelixHeadlessCombobox } from '@fusion.dev/helix-headless/combobox';
+/* Side-effect import, because the tier below renders `<helix-listbox>` 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-listbox>`
+   in it to remind anyone. `check:composed` enforces it. */
+import '../../listbox/index.js';
+import '../../tag/index.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 './combobox-root.css.js';
+/**
+ * @summary A field that filters a list as it is typed into.
+ *
+ * @description
+ * The frame is the field rather than the input, so the caret, the marks and the
+ * focus ring are drawn once around the whole control, which is the arrangement
+ * Input, Color Input and Date Input all take.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Autocomplete, Typeahead, Search select
+ * @documentation https://helix.fusion.dev/components/combobox
+ *
+ * @cssproperty --combobox-background-color - Fill behind the field.
+ * @cssproperty --combobox-border-color - Color of the panel's edge.
+ * @cssproperty --combobox-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 --combobox-control-size - Smallest the text field shrinks to
+ * @cssproperty --combobox-panel-size - Width of the panel. Follows the field by default.
+ * @cssproperty --combobox-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 HelixCombobox = class HelixCombobox extends HelixHeadlessCombobox {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixCombobox = __decorate([
+    customElement('helix-combobox')
+], HelixCombobox);
+export { HelixCombobox };

package/dist/command/index.d.ts

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

package/dist/command/index.js

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

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

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

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

@@ -0,0 +1,76 @@
+// Generated from src/command/root/command-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`helix-dialog::part(dialog) {
+align-self: start;
+inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));
+margin-block-start: 20vh;
+padding: var(--helix-space-none);
+}
+
+:host {
+--option-padding: var(--helix-space-sm);
+}
+
+[part="listbox"] {
+--listbox-background-color: transparent;
+
+border: none;
+display: block;
+}
+
+helix-listbox::part(items) {
+
+background-color: transparent;
+border: none;
+max-block-size: var(--command-list-size, 22rem);
+
+padding-block: var(--helix-space-xs);
+}
+
+helix-listbox::part(search) {
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+padding: var(--option-padding);
+}
+
+helix-listbox::part(search-field) {
+font-size: var(--helix-text-md);
+}
+
+:host {
+--_command-row: var(--helix-space-sm);
+}
+
+:host([data-density="sm"]),
+:host(:where([data-density="sm"] *)) {
+--_command-row: var(--helix-space-2xs);
+}
+
+:host([data-density="lg"]),
+:host(:where([data-density="lg"] *)) {
+--_command-row: var(--helix-space-md);
+}
+
+:host {
+--option-block-padding: var(--_command-row);
+}
+
+[part="footer"] {
+align-items: center;
+border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+color: var(--helix-color-foreground-muted);
+display: flex;
+font-size: var(--helix-text-xs);
+gap: var(--helix-space-sm);
+
+padding: var(--helix-space-xs) var(--option-padding);
+}
+
+[part="footer"][hidden] {
+display: none;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,31 @@
+import { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
+import type { CSSResultGroup } from 'lit';
+import '../../dialog/index.js';
+import '../../listbox/index.js';
+/**
+ * @summary A list of commands, opened from anywhere and filtered by typing.
+ *
+ * @description
+ * The palette is a dialog holding a filterable listbox, so what this tier adds
+ * is where that dialog sits and how the list reads inside it. It opens against
+ * the top of the window rather than centered, which is where every palette a
+ * reader has used opens: a list that grows and shrinks as it is filtered would
+ * otherwise walk up and down the screen under the words being typed.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category navigation
+ * @documentation https://helix.fusion.dev/components/command
+ *
+ * @cssproperty --command-list-size - How tall the list grows before it scrolls.
+ * @cssproperty --command-size - How wide the palette is. Defaults to `40rem`.
+ */
+export declare class HelixCommand extends HelixHeadlessCommand {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-command': HelixCommand;
+    }
+}

package/dist/command/root/command-root.js

@@ -0,0 +1,40 @@
+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 { HelixHeadlessCommand } from '@fusion.dev/helix-headless/command';
+/* Side-effect imports: this renders both, and a custom element registers on
+   import, so a consumer importing this family alone would otherwise get two
+   inert unknown elements. */
+import '../../dialog/index.js';
+import '../../listbox/index.js';
+import { styles } from './command-root.css.js';
+/**
+ * @summary A list of commands, opened from anywhere and filtered by typing.
+ *
+ * @description
+ * The palette is a dialog holding a filterable listbox, so what this tier adds
+ * is where that dialog sits and how the list reads inside it. It opens against
+ * the top of the window rather than centered, which is where every palette a
+ * reader has used opens: a list that grows and shrinks as it is filtered would
+ * otherwise walk up and down the screen under the words being typed.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category navigation
+ * @documentation https://helix.fusion.dev/components/command
+ *
+ * @cssproperty --command-list-size - How tall the list grows before it scrolls.
+ * @cssproperty --command-size - How wide the palette is. Defaults to `40rem`.
+ */
+let HelixCommand = class HelixCommand extends HelixHeadlessCommand {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixCommand = __decorate([
+    customElement('helix-command')
+], HelixCommand);
+export { HelixCommand };

package/dist/copy-button/index.d.ts

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

package/dist/copy-button/index.js

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

package/dist/copy-button/root/copy-button-root.css.d.ts

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

package/dist/copy-button/root/copy-button-root.css.js

@@ -0,0 +1,37 @@
+// Generated from src/copy-button/root/copy-button-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="button"] {
+display: inline-grid;
+place-items: center;
+}
+
+[part="button"] > slot {
+grid-area: 1 / 1;
+}
+
+slot[hidden] {
+display: none;
+}
+
+[part="button"] > slot[hidden] {
+display: none;
+}
+
+[part="button"][data-copied] {
+color: var(--helix-color-success);
+}
+
+:host(:not(:disabled)) [part="button"][data-copied]:hover {
+color: var(--helix-color-success);
+}
+
+slot > svg {
+block-size: var(--helix-size-icon-tight);
+inline-size: var(--helix-size-icon-tight);
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

package/dist/copy-button/root/copy-button-root.d.ts

@@ -0,0 +1,28 @@
+import { HelixHeadlessCopyButton } from '@fusion.dev/helix-headless/copy-button';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+declare const HelixCopyButton_base: (new (...args: any[]) => import("../../mixins/mixin-control-surface/mixin-control-surface.js").MixinControlSurfaceInterface) & typeof HelixHeadlessCopyButton;
+/**
+ * @summary A button that puts a string on the clipboard and says it did.
+ *
+ * @description
+ * Takes the icon button's square box, then stacks its two faces in one grid
+ * cell so the press never changes the button's size. See the stylesheet: a
+ * control that resizes under the pointer at the moment a reader is looking at
+ * it for reassurance reads as a second, accidental press.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @documentation https://helix.fusion.dev/components/copy-button
+ */
+export declare class HelixCopyButton extends HelixCopyButton_base {
+    static tier: string;
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-copy-button': HelixCopyButton;
+    }
+}
+export {};

package/dist/copy-button/root/copy-button-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 { HelixHeadlessCopyButton } from '@fusion.dev/helix-headless/copy-button';
+import { HelixIconButton } from '../../icon-button/root/icon-button-root.js';
+import { MixinControlSurface } from '../../mixins/mixin-control-surface/mixin-control-surface.js';
+import { styles } from './copy-button-root.css.js';
+import '../../tooltip/index.js';
+/**
+ * @summary A button that puts a string on the clipboard and says it did.
+ *
+ * @description
+ * Takes the icon button's square box, then stacks its two faces in one grid
+ * cell so the press never changes the button's size. See the stylesheet: a
+ * control that resizes under the pointer at the moment a reader is looking at
+ * it for reassurance reads as a second, accidental press.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category actions
+ * @documentation https://helix.fusion.dev/components/copy-button
+ */
+let HelixCopyButton = class HelixCopyButton extends MixinControlSurface(HelixHeadlessCopyButton) {
+    static { this.tier = 'helix-'; }
+    static { this.styles = [HelixIconButton.styles, styles].flat(); }
+};
+HelixCopyButton = __decorate([
+    customElement('helix-copy-button')
+], HelixCopyButton);
+export { HelixCopyButton };

package/dist/data-table/index.d.ts

@@ -0,0 +1 @@
+export { HelixDataTable } from './root/data-table-root.js';

package/dist/data-table/index.js

@@ -0,0 +1 @@
+export { HelixDataTable } from './root/data-table-root.js';

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

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