@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,151 @@
+// Generated from src/drawer/root/drawer-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+display: contents;
+
+--_drawer-size: var(--drawer-size, 20rem);
+}
+
+:host {
+--_drawer-scrim: var(--helix-color-overlay);
+}
+
+[part="panel"]::backdrop {
+background-color: var(--drawer-scrim, var(--_drawer-scrim));
+opacity: 0;
+transition:
+opacity var(--helix-duration-normal) var(--helix-easing-standard),
+display var(--helix-duration-normal) allow-discrete,
+overlay var(--helix-duration-normal) allow-discrete;
+}
+
+[part="panel"][open]::backdrop {
+opacity: 1;
+}
+
+@starting-style {
+[part="panel"][open]::backdrop {
+opacity: 0;
+}
+}
+
+[part="panel"] {
+
+border-radius: var(--drawer-radius, var(--helix-radii-sm));
+
+margin: var(--helix-space-none);
+border: none;
+max-inline-size: none;
+max-block-size: none;
+
+inset: auto;
+
+inline-size: auto;
+block-size: auto;
+
+background-color: var(--helix-color-surface-overlay);
+
+padding: var(--drawer-padding, var(--helix-space-lg));
+
+padding-block-start: var(
+--drawer-padding-block-start,
+var(--drawer-padding, var(--helix-space-2xl))
+);
+display: flex;
+flex-direction: column;
+outline: none;
+position: fixed;
+
+transition:
+transform var(--helix-duration-normal) var(--helix-easing-decelerate),
+display var(--helix-duration-normal) allow-discrete,
+overlay var(--helix-duration-normal) allow-discrete;
+z-index: var(--helix-layer-overlay);
+}
+
+:host([material="glass"]) [part="panel"] {
+backdrop-filter: var(--drawer-backdrop, var(--helix-material-backdrop));
+background-color: var(--drawer-background-color, var(--helix-material-translucent));
+}
+
+:host([material="frosted"]) [part="panel"] {
+backdrop-filter: var(--drawer-backdrop, blur(var(--helix-material-blur-lg)));
+background-color: var(--drawer-background-color, var(--helix-material-translucent-strong));
+}
+
+:host(:not([placement])) [part="panel"],
+:host([placement="end"]) [part="panel"] {
+
+border-start-end-radius: var(--helix-radii-none);
+border-end-end-radius: var(--helix-radii-none);
+block-size: 100%;
+inline-size: min(var(--_drawer-size), 100%);
+inset-block: 0;
+inset-inline-end: 0;
+transform: translateX(100%);
+}
+
+:host([placement="start"]) [part="panel"] {
+border-start-start-radius: var(--helix-radii-none);
+border-end-start-radius: var(--helix-radii-none);
+block-size: 100%;
+inline-size: min(var(--_drawer-size), 100%);
+inset-block: 0;
+inset-inline-start: 0;
+transform: translateX(-100%);
+}
+
+:host([placement="bottom"]) [part="panel"] {
+border-end-start-radius: var(--helix-radii-none);
+border-end-end-radius: var(--helix-radii-none);
+block-size: min(var(--_drawer-size), 100%);
+inset-block-end: 0;
+inset-inline: 0;
+transform: translateY(100%);
+}
+
+:host([placement="top"]) [part="panel"] {
+border-start-start-radius: var(--helix-radii-none);
+border-start-end-radius: var(--helix-radii-none);
+block-size: min(var(--_drawer-size), 100%);
+inset-block-start: 0;
+inset-inline: 0;
+transform: translateY(-100%);
+}
+
+:host(:state(open)) [part="panel"] {
+border: var(--drawer-border-width, var(--helix-border-floating)) solid
+var(--drawer-border-color, var(--helix-color-border));
+box-shadow: var(--drawer-shadow, var(--helix-shadow-floating));
+transform: translate(0, 0);
+}
+
+[part="header"] {
+flex: 0 0 auto;
+}
+
+[part="content"] {
+flex: 1 1 auto;
+min-block-size: 0;
+
+margin-inline: calc(var(--helix-size-focus-reach) * -1);
+overflow-y: auto;
+padding-inline: var(--helix-size-focus-reach);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="panel"] {
+transition: none;
+}
+
+[part="panel"]::backdrop {
+transition: none;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,69 @@
+import { HelixHeadlessDrawer } from '@fusion.dev/helix-headless/drawer';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A panel that slides in from an edge.
+ *
+ * @description
+ * The panel translates and the scrim fades, both on transform and opacity only,
+ * which is the one place motion is allowed to carry the work: the surface at
+ * rest is flat and the movement is what says something happened.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Sheet, Sidebar, Panel, Off-canvas
+ * @documentation https://helix.fusion.dev/components/drawer
+ *
+ * @slot - The drawer's content.
+ * @slot header - Content pinned above the scrolling area.
+ *
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart content - The scrolling content region.
+ * @csspart header - The header region.
+ * @csspart panel - The sliding panel.
+ *
+ * @cssproperty --drawer-backdrop - Filter applied behind a `material="glass"` drawer.
+ *   Follows the theme's material policy; set it to override the strength on one drawer.
+ * @cssproperty --drawer-background-color - Surface behind the panel.
+ * @cssproperty --drawer-border-color - Color of the panel's edge.
+ * @cssproperty --drawer-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 --drawer-padding - Padding inside the panel.
+ * @cssproperty --drawer-padding-block-start - Padding above the content, which clears the close control.
+ * @cssproperty --drawer-radius - Corner radius on the edges that face the page.
+ * @cssproperty --drawer-scrim - The wash over the page behind the drawer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
+ * @cssproperty --drawer-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 --drawer-size - Width or height of the panel.
+ */
+export declare class HelixDrawer extends HelixHeadlessDrawer {
+    /**
+     * Whether the panel is glass rather than opaque.
+     *
+     * **The same pair `Card` and `App Header` draw**, and one attribute for the
+     * same reason: a backdrop filter behind an opaque ground filters nothing and a
+     * translucent ground with no filter is a tint, so a consumer says what it
+     * wants rather than assembling it out of two hooks.
+     *
+     * A drawer is the case where the pair earns the most, because there is already
+     * something behind it worth seeing: the page it covers, under its own scrim.
+     *
+     * Absent is opaque, per the rule that a reflected property takes no default,
+     * so the stylesheet only describes the departure.
+     *
+     * **`transparent` is where this one stops, and that is the statement 270
+     * asks for rather than an omission.** A panel that floats over arbitrary page
+     * content is only readable because it has a ground; dropping it does not make
+     * a lighter drawer, it makes an unreadable one. `frosted` and `glass` are the
+     * two honest points here.
+     */
+    material?: 'frosted' | 'glass';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-drawer': HelixDrawer;
+    }
+}

package/dist/drawer/root/drawer-root.js

@@ -0,0 +1,58 @@
+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 { HelixHeadlessDrawer } from '@fusion.dev/helix-headless/drawer';
+import { property } from 'lit/decorators.js';
+import { styles } from './drawer-root.css.js';
+/**
+ * @summary A panel that slides in from an edge.
+ *
+ * @description
+ * The panel translates and the scrim fades, both on transform and opacity only,
+ * which is the one place motion is allowed to carry the work: the surface at
+ * rest is flat and the movement is what says something happened.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Sheet, Sidebar, Panel, Off-canvas
+ * @documentation https://helix.fusion.dev/components/drawer
+ *
+ * @slot - The drawer's content.
+ * @slot header - Content pinned above the scrolling area.
+ *
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the drawer opens or closes. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart content - The scrolling content region.
+ * @csspart header - The header region.
+ * @csspart panel - The sliding panel.
+ *
+ * @cssproperty --drawer-backdrop - Filter applied behind a `material="glass"` drawer.
+ *   Follows the theme's material policy; set it to override the strength on one drawer.
+ * @cssproperty --drawer-background-color - Surface behind the panel.
+ * @cssproperty --drawer-border-color - Color of the panel's edge.
+ * @cssproperty --drawer-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 --drawer-padding - Padding inside the panel.
+ * @cssproperty --drawer-padding-block-start - Padding above the content, which clears the close control.
+ * @cssproperty --drawer-radius - Corner radius on the edges that face the page.
+ * @cssproperty --drawer-scrim - The wash over the page behind the drawer. Set on the host, where a token still resolves: a `var()` written inside `::backdrop` cannot see one.
+ * @cssproperty --drawer-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 --drawer-size - Width or height of the panel.
+ */
+let HelixDrawer = class HelixDrawer extends HelixHeadlessDrawer {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixDrawer.prototype, "material", void 0);
+HelixDrawer = __decorate([
+    customElement('helix-drawer')
+], HelixDrawer);
+export { HelixDrawer };

package/dist/drilldown/index.d.ts

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

package/dist/drilldown/index.js

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

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

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

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

@@ -0,0 +1,47 @@
+// Generated from src/drilldown/item/drilldown-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"] {
+all: unset;
+align-items: center;
+block-size: var(--helix-size-control-tight);
+box-sizing: border-box;
+inline-size: 100%;
+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);
+
+padding-inline: var(--helix-space-sm);
+user-select: none;
+}
+
+[part="label"] {
+flex: 1 1 auto;
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+:host(:not([disabled])) [part="item"]:hover {
+background-color: var(
+--drilldown-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);
+}
+
+:host([disabled]) [part="item"] {
+cursor: default;
+opacity: 0.5;
+}`);

package/dist/drilldown/item/drilldown-item.d.ts

@@ -0,0 +1,25 @@
+import { HelixHeadlessDrilldownItem } from '@fusion.dev/helix-headless/drilldown';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One row of a drill-down, which may hold a page of its own.
+ *
+ * @description
+ * A row is a full-width band rather than an inset pill, for the reason the
+ * select's options are: it reaches both edges of the panel, so a highlight
+ * lines up with the edge the eye is already following down the list.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Panel item, Drill row
+ * @documentation https://helix.fusion.dev/components/drilldown
+ *
+ * @cssproperty --drilldown-item-hover-color - Fill when a row is under the pointer.
+ */
+export declare class HelixDrilldownItem extends HelixHeadlessDrilldownItem {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-drilldown-item': HelixDrilldownItem;
+    }
+}

package/dist/drilldown/item/drilldown-item.js

@@ -0,0 +1,31 @@
+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 { HelixHeadlessDrilldownItem } from '@fusion.dev/helix-headless/drilldown';
+import { styles } from './drilldown-item.css.js';
+/**
+ * @summary One row of a drill-down, which may hold a page of its own.
+ *
+ * @description
+ * A row is a full-width band rather than an inset pill, for the reason the
+ * select's options are: it reaches both edges of the panel, so a highlight
+ * lines up with the edge the eye is already following down the list.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Panel item, Drill row
+ * @documentation https://helix.fusion.dev/components/drilldown
+ *
+ * @cssproperty --drilldown-item-hover-color - Fill when a row is under the pointer.
+ */
+let HelixDrilldownItem = class HelixDrilldownItem extends HelixHeadlessDrilldownItem {
+    static { this.styles = styles; }
+};
+HelixDrilldownItem = __decorate([
+    customElement('helix-drilldown-item')
+], HelixDrilldownItem);
+export { HelixDrilldownItem };

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

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

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

@@ -0,0 +1,125 @@
+// Generated from src/drilldown/root/drilldown-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+background-color: var(--drilldown-background-color, var(--helix-color-surface));
+block-size: fit-content;
+display: block;
+inline-size: var(--drilldown-inline-size, 100%);
+
+overflow: hidden;
+}
+
+[part="header"] {
+align-items: center;
+
+block-size: var(--helix-size-control);
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+display: flex;
+gap: var(--helix-space-2xs);
+padding-inline: var(--helix-space-2xs);
+}
+
+[part="back"] {
+all: unset;
+align-items: center;
+block-size: var(--helix-size-control-tight);
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: flex;
+inline-size: var(--helix-size-control-tight);
+justify-content: center;
+}
+
+[part="back"] svg {
+block-size: var(--helix-size-icon-tight);
+inline-size: var(--helix-size-icon-tight);
+}
+
+[part="back"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="back"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="title"] {
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+overflow: hidden;
+text-overflow: ellipsis;
+white-space: nowrap;
+}
+
+[part="page"] {
+padding-block: var(--helix-space-2xs);
+}
+
+:host([data-direction="forward"]) [part="page"] {
+animation: drilldown-forward var(--helix-duration-normal) var(--helix-easing-decelerate);
+}
+
+:host([data-direction="back"]) [part="page"] {
+animation: drilldown-back var(--helix-duration-normal) var(--helix-easing-decelerate);
+}
+
+@keyframes drilldown-forward {
+from {
+opacity: 0;
+translate: 12% 0;
+}
+}
+
+@keyframes drilldown-back {
+from {
+opacity: 0;
+translate: -12% 0;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([data-direction]) [part="page"] {
+animation: none;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([data-direction="forward"]) [part="page"] {
+animation: none;
+}
+
+:host([data-direction="back"]) [part="page"] {
+animation: none;
+}
+}
+
+:host(:dir(rtl)) [part="back"] svg {
+scale: -1 1;
+}
+
+[part="empty"],
+[part="loading"] {
+color: var(--helix-color-foreground-subtle);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+padding-block: var(--helix-space-md);
+padding-inline: var(--helix-space-sm);
+text-align: center;
+}
+
+:host([loading]) [part="page"] {
+opacity: 0.5;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,33 @@
+import { HelixHeadlessDrilldown } from '@fusion.dev/helix-headless/drilldown';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A stack of pages, one showing at a time, with a way back.
+ *
+ * @description
+ * **The pages slide, and the direction is the point.** Both moves replace one
+ * page with another, so with no motion a reader cannot tell whether they went
+ * deeper or came back: the panel simply holds different words. Sliding in the
+ * direction of travel says which happened, and it is most of the reason this is
+ * a component rather than a menu with its trigger removed.
+ *
+ * An animation rather than a transition, because there is nothing to transition
+ * from: the page arriving was not in the DOM a frame ago. Under
+ * `prefers-reduced-motion` it becomes the instant swap `Menu` does.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Panel, Nested list, Drill-in
+ * @documentation https://helix.fusion.dev/components/drilldown
+ *
+ * @cssproperty --drilldown-background-color - Fill behind the pages.
+ * @cssproperty --drilldown-inline-size - Width of the region.
+ */
+export declare class HelixDrilldown extends HelixHeadlessDrilldown {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-drilldown': HelixDrilldown;
+    }
+}

package/dist/drilldown/root/drilldown-root.js

@@ -0,0 +1,39 @@
+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 { HelixHeadlessDrilldown } from '@fusion.dev/helix-headless/drilldown';
+import { styles } from './drilldown-root.css.js';
+/**
+ * @summary A stack of pages, one showing at a time, with a way back.
+ *
+ * @description
+ * **The pages slide, and the direction is the point.** Both moves replace one
+ * page with another, so with no motion a reader cannot tell whether they went
+ * deeper or came back: the panel simply holds different words. Sliding in the
+ * direction of travel says which happened, and it is most of the reason this is
+ * a component rather than a menu with its trigger removed.
+ *
+ * An animation rather than a transition, because there is nothing to transition
+ * from: the page arriving was not in the DOM a frame ago. Under
+ * `prefers-reduced-motion` it becomes the instant swap `Menu` does.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases Panel, Nested list, Drill-in
+ * @documentation https://helix.fusion.dev/components/drilldown
+ *
+ * @cssproperty --drilldown-background-color - Fill behind the pages.
+ * @cssproperty --drilldown-inline-size - Width of the region.
+ */
+let HelixDrilldown = class HelixDrilldown extends HelixHeadlessDrilldown {
+    static { this.styles = styles; }
+};
+HelixDrilldown = __decorate([
+    customElement('helix-drilldown')
+], HelixDrilldown);
+export { HelixDrilldown };

package/dist/element-events.generated.d.ts

@@ -0,0 +1 @@
+export {};