@fusion.dev/helix 0.0.0-dev

package/dist/notifications/root/notifications-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 { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notifications';
+import { styles } from './notifications-root.css.js';
+import '../notification/notification.js';
+/**
+ * @summary A feed a reader comes back to, made of notifications they may not have seen.
+ *
+ * @description
+ * Three rows: header, a list that scrolls, footer. The list scrolls and the
+ * other two do not, because a panel is opened at a fixed height and a mark-all
+ * control that slides away as the reader scrolls is the control they were
+ * reaching for.
+ *
+ * **It does not virtualize and it cannot**, which is the headless tier's note
+ * and worth repeating where the choice is made: the items are the consumer's own
+ * elements, so N notifications is N elements by construction. A feed that really
+ * holds thousands wants `helix-data-table` with a custom cell.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @documentation https://helix.fusion.dev/components/notifications
+ *
+ * @slot - The notifications, as `helix-notification` children.
+ * @slot footer - Below the list, for a link to everything.
+ * @slot header - Above the list, for a title and the mark-all control.
+ *
+ * @csspart list - The list itself.
+ * @csspart mark-all - The control that marks everything read.
+ *
+ * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
+ * @cssproperty --notifications-media-column - The gutter every item holds open where something in the feed has media.
+ * @cssproperty --notifications-padding-inline - Space either side of the header and footer.
+ * @cssproperty --notifications-rule - The hairline between items and around the regions.
+ */
+let HelixNotifications = class HelixNotifications extends HelixHeadlessNotifications {
+    static { this.tier = 'helix-'; }
+    static { this.styles = styles; }
+};
+HelixNotifications = __decorate([
+    customElement('helix-notifications')
+], HelixNotifications);
+export { HelixNotifications };

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

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

package/dist/number-input/index.js

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

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

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

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

@@ -0,0 +1,149 @@
+// Generated from src/number-input/root/number-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"] {
+align-items: center;
+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;
+
+overflow: hidden;
+transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not(:disabled)) [part="field"]:hover {
+border-color: var(--helix-color-foreground-muted);
+}
+
+:host(:not(:disabled)) [part="field"]:focus-within {
+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="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);
+}
+
+:host(:state(invalid):focus-within) [part="field"] {
+outline-color: var(--helix-color-danger);
+}
+
+:host(:disabled) [part="field"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+:host([readonly]) [part="field"] {
+background-color: transparent;
+}
+
+[part="control"] {
+all: unset;
+
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+inline-size: 100%;
+min-inline-size: 0;
+
+font-variant-numeric: tabular-nums;
+padding-inline: var(--helix-space-xs);
+text-align: center;
+}
+
+slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+}
+
+slot[name="start"]::slotted(*) {
+padding-inline-start: var(--helix-space-xs);
+}
+
+slot[name="end"]::slotted(*) {
+padding-inline-end: var(--helix-space-xs);
+}
+
+[part="decrement"],
+[part="increment"] {
+all: unset;
+align-items: center;
+align-self: stretch;
+box-sizing: border-box;
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: flex;
+flex: none;
+inline-size: var(--helix-size-control);
+justify-content: center;
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="decrement"] {
+border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
+}
+
+[part="increment"] {
+border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
+}
+
+[part="decrement"]:hover:not(:disabled),
+[part="increment"]:hover:not(:disabled) {
+background-color: var(--helix-color-surface);
+color: var(--helix-color-foreground);
+}
+
+[part="decrement"]:disabled,
+[part="increment"]:disabled {
+cursor: default;
+opacity: 0.4;
+}
+
+[part="decrement"] svg,
+[part="increment"] svg {
+block-size: var(--helix-size-icon-tight);
+inline-size: var(--helix-size-icon-tight);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="field"],
+[part="decrement"],
+[part="increment"] {
+transition: none;
+}
+}
+
+:host([scrub]) [part="label"] {
+cursor: ew-resize;
+touch-action: none;
+user-select: none;
+}
+
+:host([scrub]:disabled) [part="label"],
+:host([scrub][readonly]) [part="label"] {
+cursor: default;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,41 @@
+import { HelixHeadlessNumberInput } from '@fusion.dev/helix-headless/number-input';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A number a reader types or steps to.
+ *
+ * @description
+ * The frame an `Input` wears, because in a form this stands in a row with them.
+ * The difference is inside it: a button at each end of the box rather than
+ * beside it, so the whole reads as one field rather than a field with two
+ * controls after it.
+ *
+ * The number is centered and set in tabular figures, which is the one place this
+ * differs from every other field in the library. Digits are what changes under a
+ * repeated press, and proportional ones make the number shuffle while it counts.
+ *
+ * The steppers are out of the tab order. A keyboard reader already has four keys
+ * on the field itself, and two more tab stops per number is a form that takes
+ * three times as long to cross.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases NumberField, Stepper, InputNumber
+ * @documentation https://helix.fusion.dev/components/number-input
+ *
+ * @slot end - After it.
+ * @slot start - Before the number, for a unit or an icon.
+ *
+ * @csspart control - The field itself.
+ * @csspart decrement - The control that steps down.
+ * @csspart field - The box holding everything.
+ * @csspart increment - The control that steps up.
+ */
+export declare class HelixNumberInput extends HelixHeadlessNumberInput {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-number-input': HelixNumberInput;
+    }
+}

package/dist/number-input/root/number-input-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 { HelixHeadlessNumberInput } from '@fusion.dev/helix-headless/number-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 './number-input-root.css.js';
+/**
+ * @summary A number a reader types or steps to.
+ *
+ * @description
+ * The frame an `Input` wears, because in a form this stands in a row with them.
+ * The difference is inside it: a button at each end of the box rather than
+ * beside it, so the whole reads as one field rather than a field with two
+ * controls after it.
+ *
+ * The number is centered and set in tabular figures, which is the one place this
+ * differs from every other field in the library. Digits are what changes under a
+ * repeated press, and proportional ones make the number shuffle while it counts.
+ *
+ * The steppers are out of the tab order. A keyboard reader already has four keys
+ * on the field itself, and two more tab stops per number is a form that takes
+ * three times as long to cross.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases NumberField, Stepper, InputNumber
+ * @documentation https://helix.fusion.dev/components/number-input
+ *
+ * @slot end - After it.
+ * @slot start - Before the number, for a unit or an icon.
+ *
+ * @csspart control - The field itself.
+ * @csspart decrement - The control that steps down.
+ * @csspart field - The box holding everything.
+ * @csspart increment - The control that steps up.
+ */
+let HelixNumberInput = class HelixNumberInput extends HelixHeadlessNumberInput {
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixNumberInput = __decorate([
+    customElement('helix-number-input')
+], HelixNumberInput);
+export { HelixNumberInput };

package/dist/option/group/option-group.css.d.ts

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

package/dist/option/group/option-group.css.js

@@ -0,0 +1,24 @@
+// Generated from src/option/group/option-group.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+:host(:not(:first-of-type)) {
+margin-block-start: var(--helix-space-xs);
+}
+
+:host([hidden]) {
+display: none;
+}
+
+[part="label"] {
+color: var(--helix-color-foreground-subtle);
+display: block;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+padding-block: var(--helix-space-2xs);
+
+padding-inline: var(--option-padding, var(--helix-space-xs));
+}`);

package/dist/option/group/option-group.d.ts

@@ -0,0 +1,23 @@
+import { HelixHeadlessOptionGroup } from '@fusion.dev/helix-headless/option';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A named run of options inside a listbox.
+ *
+ * @description
+ * The heading is set small and quiet, because it is a divider that happens to
+ * have words on it: a run of options is read as a list and the heading is what
+ * tells you which list, not something to read on its own.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases OptGroup, Section
+ * @documentation https://helix.fusion.dev/components/option-group
+ */
+export declare class HelixOptionGroup extends HelixHeadlessOptionGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-option-group': HelixOptionGroup;
+    }
+}

package/dist/option/group/option-group.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 { HelixHeadlessOptionGroup } from '@fusion.dev/helix-headless/option';
+import { styles } from './option-group.css.js';
+/**
+ * @summary A named run of options inside a listbox.
+ *
+ * @description
+ * The heading is set small and quiet, because it is a divider that happens to
+ * have words on it: a run of options is read as a list and the heading is what
+ * tells you which list, not something to read on its own.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases OptGroup, Section
+ * @documentation https://helix.fusion.dev/components/option-group
+ */
+let HelixOptionGroup = class HelixOptionGroup extends HelixHeadlessOptionGroup {
+    static { this.styles = styles; }
+};
+HelixOptionGroup = __decorate([
+    customElement('helix-option-group')
+], HelixOptionGroup);
+export { HelixOptionGroup };

package/dist/option/index.d.ts

@@ -0,0 +1,2 @@
+export * from './group/option-group.js';
+export * from './root/option-root.js';

package/dist/option/index.js

@@ -0,0 +1,2 @@
+export * from './group/option-group.js';
+export * from './root/option-root.js';

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

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

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

@@ -0,0 +1,93 @@
+// Generated from src/option/root/option-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--_option-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M104 192a8 8 0 0 1-5.7-2.3l-56-56a8 8 0 0 1 11.4-11.4L104 172.7 210.3 66.3a8 8 0 0 1 11.4 11.4l-112 112A8 8 0 0 1 104 192Z'/%3E%3C/svg%3E");
+display: block;
+}
+
+:host([hidden]) {
+display: none;
+}
+
+[part="item"] {
+align-items: center;
+
+border-radius: var(--option-radius, var(--helix-radii-sm));
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+gap: var(--helix-space-xs);
+
+min-block-size: var(--helix-size-control-tight);
+box-sizing: border-box;
+
+padding-block: var(--option-block-padding, var(--helix-space-2xs));
+
+padding-inline: var(--option-padding, var(--helix-space-xs));
+
+user-select: none;
+}
+
+[part="text"] {
+display: flex;
+flex: 1 1 auto;
+flex-direction: column;
+min-inline-size: 0;
+}
+
+[part="description"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-xs);
+line-height: var(--helix-leading-tight);
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part="label"] {
+min-inline-size: 0;
+
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+:host(:state(selected)) [part="item"]::after {
+content: "";
+background-color: currentColor;
+block-size: var(--helix-size-icon-tight);
+flex: 0 0 auto;
+inline-size: var(--helix-size-icon-tight);
+margin-inline-start: auto;
+mask-image: var(--_option-check);
+mask-position: center;
+mask-repeat: no-repeat;
+mask-size: contain;
+}
+
+:host([data-active]) [part="item"],
+:host(:not([disabled])) [part="item"]:hover {
+
+background-color: var(
+--option-active-color,
+light-dark(
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent),
+color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
+)
+);
+}
+
+:host([disabled]) [part="item"] {
+cursor: default;
+opacity: 0.5;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);

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

@@ -0,0 +1,30 @@
+import { HelixHeadlessOption } from '@fusion.dev/helix-headless/option';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One choice in a listbox.
+ *
+ * @description
+ * Two states that look different on purpose: chosen, which is a fact about the
+ * value, and active, which is where the keyboard is. A list that draws them the
+ * same way leaves a reader arrowing through it unable to tell what they have
+ * picked from what they are looking at.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Item, Choice
+ * @documentation https://helix.fusion.dev/components/option
+ *
+ * @cssproperty --option-active-color - Wash behind the option the keyboard is on.
+ * @cssproperty --option-block-padding - Space above and below it. `Command` raises this, a palette being a page of rows read at speed rather than a select's short list.
+ * @cssproperty --option-padding - Space before the label, shared with a group heading.
+ * @cssproperty --option-radius - Corner radius of the row. A listbox and a select flatten it.
+ */
+export declare class HelixOption extends HelixHeadlessOption {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-option': HelixOption;
+    }
+}

package/dist/option/root/option-root.js

@@ -0,0 +1,36 @@
+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 { HelixHeadlessOption } from '@fusion.dev/helix-headless/option';
+import { styles } from './option-root.css.js';
+/**
+ * @summary One choice in a listbox.
+ *
+ * @description
+ * Two states that look different on purpose: chosen, which is a fact about the
+ * value, and active, which is where the keyboard is. A list that draws them the
+ * same way leaves a reader arrowing through it unable to tell what they have
+ * picked from what they are looking at.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Item, Choice
+ * @documentation https://helix.fusion.dev/components/option
+ *
+ * @cssproperty --option-active-color - Wash behind the option the keyboard is on.
+ * @cssproperty --option-block-padding - Space above and below it. `Command` raises this, a palette being a page of rows read at speed rather than a select's short list.
+ * @cssproperty --option-padding - Space before the label, shared with a group heading.
+ * @cssproperty --option-radius - Corner radius of the row. A listbox and a select flatten it.
+ */
+let HelixOption = class HelixOption extends HelixHeadlessOption {
+    static { this.styles = styles; }
+};
+HelixOption = __decorate([
+    customElement('helix-option')
+], HelixOption);
+export { HelixOption };

package/dist/outline/index.d.ts

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

package/dist/outline/index.js

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

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

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