@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,30 @@
+import { HelixHeadlessListbox } from '@fusion.dev/helix-headless/listbox';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A list of options, one or several of which are the answer.
+ *
+ * @description
+ * A framed, scrolling list with the field's three parts around it. The frame is
+ * the list rather than the host, so a filter that empties it leaves a box with
+ * a message in it rather than a border collapsing to nothing.
+ *
+ * `--listbox-max-block-size` is what makes it scroll rather than run down the
+ * page. The keyboard brings the active option into that box itself, so a long
+ * list moves under the reader rather than the reader moving to find it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Options, Select list
+ * @documentation https://helix.fusion.dev/components/listbox
+ *
+ * @cssproperty --listbox-max-block-size - How tall it gets before it scrolls.
+ */
+export declare class HelixListbox extends HelixHeadlessListbox {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-listbox': HelixListbox;
+    }
+}

package/dist/listbox/root/listbox-root.js

@@ -0,0 +1,38 @@
+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 { HelixHeadlessListbox } from '@fusion.dev/helix-headless/listbox';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles } from './listbox-root.css.js';
+/**
+ * @summary A list of options, one or several of which are the answer.
+ *
+ * @description
+ * A framed, scrolling list with the field's three parts around it. The frame is
+ * the list rather than the host, so a filter that empties it leaves a box with
+ * a message in it rather than a border collapsing to nothing.
+ *
+ * `--listbox-max-block-size` is what makes it scroll rather than run down the
+ * page. The keyboard brings the active option into that box itself, so a long
+ * list moves under the reader rather than the reader moving to find it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category forms
+ * @aliases Options, Select list
+ * @documentation https://helix.fusion.dev/components/listbox
+ *
+ * @cssproperty --listbox-max-block-size - How tall it gets before it scrolls.
+ */
+let HelixListbox = class HelixListbox extends HelixHeadlessListbox {
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixListbox = __decorate([
+    customElement('helix-listbox')
+], HelixListbox);
+export { HelixListbox };

package/dist/loader/index.d.ts

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

package/dist/loader/index.js

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

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

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

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

@@ -0,0 +1,159 @@
+// Generated from src/loader/root/loader-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+color: inherit;
+
+display: inline-grid;
+flex-shrink: 0;
+place-items: center;
+vertical-align: middle;
+
+--_loader-size: var(--helix-size-loader-md);
+}
+
+:host([size="sm"]) {
+--_loader-size: var(--helix-size-loader-sm);
+}
+
+:host([size="lg"]) {
+--_loader-size: var(--helix-size-loader-lg);
+}
+
+[part="svg"] {
+animation: helix-loader-turn 0.8s linear infinite;
+grid-area: 1 / 1;
+block-size: var(--loader-size, var(--_loader-size));
+inline-size: var(--loader-size, var(--_loader-size));
+}
+
+[part="track"] {
+animation: helix-loader-breathe 2.4s ease-in-out infinite;
+opacity: 0.18;
+stroke: var(--loader-track-color, currentColor);
+stroke-width: 2;
+}
+
+[part="mark"] {
+animation: helix-loader-breathe-mark 2.4s ease-in-out infinite;
+}
+
+@keyframes helix-loader-breathe {
+0%,
+100% {
+opacity: 0.12;
+}
+
+50% {
+opacity: 0.24;
+}
+}
+
+@keyframes helix-loader-breathe-mark {
+0%,
+100% {
+opacity: 0.45;
+scale: 0.82;
+}
+
+50% {
+opacity: 1;
+scale: 1;
+}
+}
+
+[part="indicator"] {
+stroke: var(--loader-color, currentColor);
+stroke-dasharray: 50, 100;
+stroke-linecap: round;
+stroke-width: 2;
+}
+
+@keyframes helix-loader-turn {
+to {
+transform: rotate(1turn);
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="track"],
+[part="mark"] {
+animation: none;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="svg"] {
+animation-duration: calc(var(--helix-duration-slow) * 12);
+}
+}
+
+[part="mark"] {
+
+--_mark-size: calc(var(--loader-size, var(--_loader-size)) * 0.4);
+--icon-size: var(--_mark-size);
+
+align-items: center;
+block-size: var(--_mark-size);
+display: flex;
+grid-area: 1 / 1;
+inline-size: var(--_mark-size);
+justify-content: center;
+}
+
+[part="mark"] ::slotted(*) {
+block-size: 100%;
+inline-size: 100%;
+}
+
+:host([variant="pulse"]) [part="indicator"] {
+display: none;
+}
+
+:host([variant="pulse"]) [part="svg"] {
+animation: none;
+}
+
+:host([variant="pulse"]) {
+--_loader-size: calc(var(--helix-size-loader-lg) * 2);
+}
+
+:host([variant="pulse"][size="sm"]) {
+--_loader-size: var(--helix-size-loader-lg);
+}
+
+:host([variant="pulse"][size="lg"]) {
+--_loader-size: calc(var(--helix-size-loader-lg) * 3);
+}
+
+:host([variant="pulse"]) [part="track"] {
+display: none;
+}
+
+:host([variant="pulse"]) [part="mark"] {
+animation-name: helix-loader-pulse-mark;
+}
+
+@keyframes helix-loader-pulse-mark {
+0%,
+100% {
+opacity: 0.35;
+}
+
+50% {
+opacity: 1;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+:host([variant="pulse"]) [part="mark"] {
+animation: none;
+opacity: 1;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,49 @@
+import { HelixHeadlessLoader } from '@fusion.dev/helix-headless/loader';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Says that something indeterminate is in progress.
+ *
+ * @description
+ * Sized in `em`, so it matches whatever text it sits beside without being told.
+ * The color is `currentColor` for the same reason: a loader inside a primary
+ * button is on the accent, and one in body copy is not, and neither should have
+ * to say so.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Spinner, Busy, Activity
+ * @documentation https://helix.fusion.dev/components/loader
+ *
+ * @cssproperty --loader-color - Color of the moving arc.
+ * @cssproperty --loader-size - Diameter. Defaults to 1.5em.
+ * @cssproperty --loader-track-color - Color of the circle behind it.
+ */
+export declare class HelixLoader extends HelixHeadlessLoader {
+    /**
+     * How the waiting is drawn.
+     *
+     * Unset is the turning arc, which is what most waits want and what this
+     * component was called for years.
+     *
+     * `pulse` takes the arc away and lets the middle carry the motion on its own:
+     * the ring stays as the quiet outline and swells, and whatever is slotted
+     * swells with it, in step. It is the shape for a wait that has a mark to
+     * show, a splash or a first paint behind a wordmark, where a rotating rim
+     * around a logo reads as chrome bolted to the brand.
+     *
+     * That the component can now be drawn without anything spinning is why it is
+     * no longer called Spinner: the old name described one appearance of two.
+     */
+    variant?: 'pulse';
+    /**
+     * Diameter relative to the surrounding text.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-loader': HelixLoader;
+    }
+}

package/dist/loader/root/loader-root.js

@@ -0,0 +1,42 @@
+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 { HelixHeadlessLoader } from '@fusion.dev/helix-headless/loader';
+import { property } from 'lit/decorators.js';
+import { styles } from './loader-root.css.js';
+/**
+ * @summary Says that something indeterminate is in progress.
+ *
+ * @description
+ * Sized in `em`, so it matches whatever text it sits beside without being told.
+ * The color is `currentColor` for the same reason: a loader inside a primary
+ * button is on the accent, and one in body copy is not, and neither should have
+ * to say so.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Spinner, Busy, Activity
+ * @documentation https://helix.fusion.dev/components/loader
+ *
+ * @cssproperty --loader-color - Color of the moving arc.
+ * @cssproperty --loader-size - Diameter. Defaults to 1.5em.
+ * @cssproperty --loader-track-color - Color of the circle behind it.
+ */
+let HelixLoader = class HelixLoader extends HelixHeadlessLoader {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixLoader.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixLoader.prototype, "size", void 0);
+HelixLoader = __decorate([
+    customElement('helix-loader')
+], HelixLoader);
+export { HelixLoader };

package/dist/megamenu/index.d.ts

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

package/dist/megamenu/index.js

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

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

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

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

@@ -0,0 +1,153 @@
+// Generated from src/megamenu/root/megamenu-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline-flex;
+}
+
+[part="trigger"] {
+all: unset;
+box-sizing: border-box;
+
+align-items: center;
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+gap: var(--helix-space-2xs);
+min-block-size: var(--helix-size-control-tight);
+padding-inline: var(--helix-space-xs);
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="trigger"]:hover {
+color: var(--helix-color-foreground);
+}
+
+[part="trigger"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="trigger"][aria-expanded="true"] {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="surface"] {
+
+backdrop-filter: var(--megamenu-backdrop, none);
+background-color: var(--megamenu-background-color, var(--helix-color-background));
+
+border: var(--megamenu-border-width, var(--helix-border-thin)) solid
+light-dark(transparent, var(--helix-color-border));
+border-radius: var(--helix-radii-md);
+box-shadow: var(--megamenu-shadow, var(--helix-shadow-floating));
+box-sizing: border-box;
+
+clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));
+
+display: grid;
+gap: var(--helix-space-xl);
+grid-auto-columns: minmax(var(--megamenu-column-size, 15rem), 1fr);
+grid-auto-flow: column;
+
+inline-size: max-content;
+margin: var(--helix-space-none);
+
+max-inline-size: min(var(--megamenu-size, 52rem), calc(100% - var(--helix-space-xl) * 2));
+padding: var(--helix-space-md);
+
+transition:
+clip-path var(--helix-duration-slow) var(--helix-easing-decelerate),
+display var(--helix-duration-slow) allow-discrete,
+overlay var(--helix-duration-slow) allow-discrete;
+}
+
+[part="surface"]:popover-open {
+clip-path: inset(
+0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1)
+calc(var(--helix-space-xl) * -1)
+);
+}
+
+@starting-style {
+[part="surface"]:popover-open {
+clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));
+}
+}
+
+:host([variant="full"]) [part="surface"],
+:host([data-narrow]) [part="surface"] {
+
+backdrop-filter: var(--megamenu-backdrop, none);
+background-color: var(--megamenu-background-color, var(--helix-color-background));
+
+border: none;
+border-radius: var(--helix-radii-none);
+box-shadow: var(--helix-shadow-md);
+
+clip-path: inset(0 0 100% 0);
+
+display: grid;
+grid-auto-flow: row;
+grid-template-columns: repeat(auto-fit, minmax(var(--megamenu-column-size, 15rem), 1fr));
+inline-size: auto;
+inset-block-start: var(--megamenu-top, 100%);
+inset-inline: 0;
+max-inline-size: none;
+
+padding-block: var(--helix-space-md) var(--helix-space-xl);
+
+padding-inline: max(var(--helix-space-xl), calc((100% - var(--megamenu-full-size, 80rem)) / 2));
+position: fixed;
+}
+
+:host([variant="full"]) [part="surface"]:popover-open,
+:host([data-narrow]) [part="surface"]:popover-open {
+clip-path: inset(0 0 calc(var(--helix-space-xl) * -1) 0);
+}
+
+@starting-style {
+:host([variant="full"]) [part="surface"]:popover-open,
+:host([data-narrow]) [part="surface"]:popover-open {
+clip-path: inset(0 0 100% 0);
+}
+}
+
+:host([data-narrow]) [part="surface"] {
+grid-auto-flow: row;
+grid-template-columns: 1fr;
+
+max-block-size: calc(100dvh - var(--megamenu-top, 0px) - var(--helix-space-xl));
+overflow-y: auto;
+overscroll-behavior: contain;
+padding-inline: var(--helix-space-md);
+}
+
+:host [part="surface"][hidden] {
+display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="trigger"] {
+transition: none;
+}
+
+[part="surface"] {
+clip-path: none;
+transition:
+display var(--helix-duration-instant) allow-discrete,
+overlay var(--helix-duration-instant) allow-discrete;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,34 @@
+import { HelixHeadlessMegamenu } from '@fusion.dev/helix-headless/megamenu';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A section of a navigation that opens a panel of destinations.
+ *
+ * @description
+ * Presentation only: the trigger, and the panel it opens as a grid of columns.
+ * Everything about what opens it and what closes it is the base class.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Mega menu, Flyout, Nav panel
+ * @documentation https://helix.fusion.dev/components/megamenu
+ *
+ * @cssproperty --megamenu-backdrop - A filter behind the panel, for glass.
+ * @cssproperty --megamenu-background-color - The panel's own fill.
+ * @cssproperty --megamenu-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 --megamenu-column-size - The narrowest a column goes before the grid wraps.
+ * @cssproperty --megamenu-full-size - How wide the band's contents may get, centered in it.
+ * @cssproperty --megamenu-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.
+ * @cssproperty --megamenu-size - How wide the panel may get.
+ */
+export declare class HelixMegamenu extends HelixHeadlessMegamenu {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-megamenu': HelixMegamenu;
+    }
+}

package/dist/megamenu/root/megamenu-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 { HelixHeadlessMegamenu } from '@fusion.dev/helix-headless/megamenu';
+import { styles } from './megamenu-root.css.js';
+/**
+ * @summary A section of a navigation that opens a panel of destinations.
+ *
+ * @description
+ * Presentation only: the trigger, and the panel it opens as a grid of columns.
+ * Everything about what opens it and what closes it is the base class.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Mega menu, Flyout, Nav panel
+ * @documentation https://helix.fusion.dev/components/megamenu
+ *
+ * @cssproperty --megamenu-backdrop - A filter behind the panel, for glass.
+ * @cssproperty --megamenu-background-color - The panel's own fill.
+ * @cssproperty --megamenu-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 --megamenu-column-size - The narrowest a column goes before the grid wraps.
+ * @cssproperty --megamenu-full-size - How wide the band's contents may get, centered in it.
+ * @cssproperty --megamenu-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.
+ * @cssproperty --megamenu-size - How wide the panel may get.
+ */
+let HelixMegamenu = class HelixMegamenu extends HelixHeadlessMegamenu {
+    static { this.styles = styles; }
+};
+HelixMegamenu = __decorate([
+    customElement('helix-megamenu')
+], HelixMegamenu);
+export { HelixMegamenu };

package/dist/menu/index.d.ts

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

package/dist/menu/index.js

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

package/dist/menu/item/menu-item.css.d.ts

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

package/dist/menu/item/menu-item.css.js

@@ -0,0 +1,87 @@
+// Generated from src/menu/item/menu-item.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="item"] {
+align-items: center;
+
+text-decoration: none;
+
+border-radius: var(--helix-radii-none);
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: grid;
+
+font-size: var(--helix-text-xs);
+
+font-weight: var(--helix-weight-medium);
+gap: var(--helix-space-xs);
+
+grid-template-columns:
+var(--menu-item-start, var(--helix-size-icon))
+minmax(0, 1fr)
+var(--helix-size-icon);
+min-block-size: var(--helix-size-control-tight);
+
+padding-inline: var(--helix-space-sm);
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+user-select: none;
+}
+
+[part="item"]:hover {
+background-color: var(
+--menu-item-hover-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
+}
+
+[part="item"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="item"][aria-disabled="true"] {
+cursor: not-allowed;
+opacity: 0.5;
+}
+
+[part="start"] {
+--icon-size: var(--helix-size-icon-tight);
+
+align-items: center;
+color: var(--helix-color-foreground-subtle);
+display: flex;
+inline-size: var(--menu-item-start, var(--helix-size-icon));
+justify-content: center;
+
+min-block-size: var(--helix-size-icon);
+}
+
+[part="mark"] {
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+svg[part="mark"] {
+color: var(--helix-color-foreground-subtle);
+}
+
+:host([checked]) svg[part="mark"] {
+color: var(--helix-color-foreground);
+}
+
+slot[name="submenu"] {
+display: contents;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="item"] {
+transition: none;
+}
+}
+
+:host(:dir(rtl)) [part="mark"][data-submenu] {
+scale: -1 1;
+}`);