@fusion.dev/helix 0.0.0-dev

package/dist/accordion/index.d.ts

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

package/dist/accordion/index.js

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

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

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

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

@@ -0,0 +1,92 @@
+// Generated from src/accordion/item/accordion-item.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="trigger"] {
+all: unset;
+
+box-sizing: border-box;
+align-items: center;
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: flex;
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-medium);
+inline-size: 100%;
+
+gap: var(--helix-space-xs);
+
+min-block-size: var(--helix-size-control);
+padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="chevron"] {
+block-size: 1em;
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
+inline-size: 1em;
+transform: scaleY(1);
+transition: transform var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not([chevron-placement="start"])) [part="chevron"] {
+margin-inline-start: auto;
+}
+
+:host(:state(open)) [part="chevron"] {
+transform: scaleY(-1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="chevron"] {
+transition: none;
+}
+}
+
+[part="trigger"]:hover [part="chevron"] {
+color: var(--helix-color-foreground);
+}
+
+[part="trigger"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="content"] {
+display: grid;
+grid-template-rows: 0fr;
+transition: grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard);
+}
+
+:host(:state(open)) [part="content"] {
+grid-template-rows: 1fr;
+}
+
+[part="content-inner"] {
+
+min-block-size: 0;
+overflow: hidden;
+}
+
+[part="content-inner"] > slot {
+color: var(--helix-color-foreground-muted);
+display: block;
+line-height: var(--helix-leading-normal);
+padding: var(--accordion-item-padding, var(--helix-space-sm) var(--helix-space-md));
+padding-block-start: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="content"] {
+transition: none;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="trigger"] {
+transition: none;
+}
+}`);

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

@@ -0,0 +1,39 @@
+import { HelixHeadlessAccordionItem } from '@fusion.dev/helix-headless/accordion';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One collapsible section of an accordion.
+ *
+ * @description
+ * The open and close transition animates `grid-template-rows` from `0fr` to
+ * `1fr`, which is the only technique that reaches the content's intrinsic
+ * height without measuring it in JavaScript. It is disabled under
+ * `prefers-reduced-motion`.
+ *
+ * Usable on its own as a disclosure, with no accordion around it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Collapsible, Expander, Disclosure
+ * @documentation https://helix.fusion.dev/components/accordion
+ *
+ * @slot - The content revealed when open.
+ * @slot summary - The always-visible trigger content.
+ *
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart chevron - The open and close indicator.
+ * @csspart container - The outer wrapper.
+ * @csspart content - The revealed region.
+ * @csspart content-inner - Padding wrapper inside the animated region.
+ * @csspart trigger - The clickable summary row.
+ *
+ * @cssproperty --accordion-item-padding - Inset of the trigger and content.
+ */
+export declare class HelixAccordionItem extends HelixHeadlessAccordionItem {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-accordion-item': HelixAccordionItem;
+    }
+}

package/dist/accordion/item/accordion-item.js

@@ -0,0 +1,45 @@
+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 { HelixHeadlessAccordionItem } from '@fusion.dev/helix-headless/accordion';
+import { styles } from './accordion-item.css.js';
+/**
+ * @summary One collapsible section of an accordion.
+ *
+ * @description
+ * The open and close transition animates `grid-template-rows` from `0fr` to
+ * `1fr`, which is the only technique that reaches the content's intrinsic
+ * height without measuring it in JavaScript. It is disabled under
+ * `prefers-reduced-motion`.
+ *
+ * Usable on its own as a disclosure, with no accordion around it.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases Collapsible, Expander, Disclosure
+ * @documentation https://helix.fusion.dev/components/accordion
+ *
+ * @slot - The content revealed when open.
+ * @slot summary - The always-visible trigger content.
+ *
+ * @event {HelixBeforeOpenEvent} helix-before-open - Fired before the item opens or closes. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart chevron - The open and close indicator.
+ * @csspart container - The outer wrapper.
+ * @csspart content - The revealed region.
+ * @csspart content-inner - Padding wrapper inside the animated region.
+ * @csspart trigger - The clickable summary row.
+ *
+ * @cssproperty --accordion-item-padding - Inset of the trigger and content.
+ */
+let HelixAccordionItem = class HelixAccordionItem extends HelixHeadlessAccordionItem {
+    static { this.styles = styles; }
+};
+HelixAccordionItem = __decorate([
+    customElement('helix-accordion-item')
+], HelixAccordionItem);
+export { HelixAccordionItem };

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

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

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

@@ -0,0 +1,25 @@
+// Generated from src/accordion/root/accordion-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+:host([separation="outlined"]) {
+border: var(--helix-border-thin) solid var(--accordion-border-color, var(--helix-color-border));
+
+border-radius: var(--accordion-radius, var(--helix-radii-sm));
+
+overflow: hidden;
+}
+
+::slotted(* + *) {
+border-block-start: var(--helix-border-thin) solid
+var(--accordion-border-color, var(--helix-color-border));
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,49 @@
+import { HelixHeadlessAccordion } from '@fusion.dev/helix-headless/accordion';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Groups collapsible sections, one open at a time by default.
+ *
+ * @description
+ * Items share one rule between neighbours rather than each drawing its own, so
+ * the seam between two items is one pixel and not two. Those seams are what
+ * carry the grouping, which is why the surrounding frame is opt-in rather than
+ * the default: an accordion is a list, where a card is a surface.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category layout
+ * @aliases Collapse, Expander group
+ * @documentation https://helix.fusion.dev/components/accordion
+ *
+ * @slot - The accordion's items.
+ *
+ * @cssproperty --accordion-border-color - Color of the seams, and of the frame when outlined.
+ * @cssproperty --accordion-radius - Corner radius of the stack, when outlined.
+ */
+export declare class HelixAccordion extends HelixHeadlessAccordion {
+    /**
+     * How the stack separates itself from the page.
+     *
+     * Two of the axis's four values, which is what this surface has meaning for:
+     * a stack of items is already told apart by its seams, so a lift would be a
+     * third statement and a fill a second.
+     *
+     * - `plain` is the default and is what an application usually wants: the
+     *   seams between items already say the items are one set, so a frame is a
+     *   second statement of the same thing. Inside a card, a panel, a dialog or a
+     *   sidebar, it is a line and no meaning.
+     * - `outlined` frames the stack, for an accordion sitting directly on the
+     *   page where nothing else says where it starts and stops. A marketing
+     *   page's FAQ is the case it is for.
+     *
+     * Both are writable, so a generated page can say which it means rather than
+     * relying on the absence of an attribute.
+     */
+    separation?: 'outlined' | 'plain';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-accordion': HelixAccordion;
+    }
+}

package/dist/accordion/root/accordion-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 { HelixHeadlessAccordion } from '@fusion.dev/helix-headless/accordion';
+import { property } from 'lit/decorators.js';
+import { styles } from './accordion-root.css.js';
+/**
+ * @summary Groups collapsible sections, one open at a time by default.
+ *
+ * @description
+ * Items share one rule between neighbours rather than each drawing its own, so
+ * the seam between two items is one pixel and not two. Those seams are what
+ * carry the grouping, which is why the surrounding frame is opt-in rather than
+ * the default: an accordion is a list, where a card is a surface.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category layout
+ * @aliases Collapse, Expander group
+ * @documentation https://helix.fusion.dev/components/accordion
+ *
+ * @slot - The accordion's items.
+ *
+ * @cssproperty --accordion-border-color - Color of the seams, and of the frame when outlined.
+ * @cssproperty --accordion-radius - Corner radius of the stack, when outlined.
+ */
+let HelixAccordion = class HelixAccordion extends HelixHeadlessAccordion {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixAccordion.prototype, "separation", void 0);
+HelixAccordion = __decorate([
+    customElement('helix-accordion')
+], HelixAccordion);
+export { HelixAccordion };

package/dist/announcement/index.d.ts

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

package/dist/announcement/index.js

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

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

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

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

@@ -0,0 +1,145 @@
+// Generated from src/announcement/root/announcement-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-control: var(--helix-size-control-sm);
+
+--_announcement-color: var(--helix-color-foreground-muted);
+
+align-items: center;
+background-color: var(--helix-color-surface-sunken);
+
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+color: var(--helix-color-foreground);
+display: flex;
+font-size: var(--helix-text-sm);
+
+font-weight: var(--helix-weight-medium);
+inline-size: 100%;
+padding-block: var(--helix-space-xs);
+padding-inline: var(--announcement-inset, var(--helix-space-lg));
+
+position: relative;
+}
+
+:host([tone="info"]) {
+--_announcement-color: var(--helix-color-info);
+}
+
+:host([tone="success"]) {
+--_announcement-color: var(--helix-color-success);
+}
+
+:host([tone="warning"]) {
+--_announcement-color: var(--helix-color-warning);
+}
+
+:host([tone="danger"]) {
+--_announcement-color: var(--helix-color-danger);
+}
+
+:host([tone="neutral"]) {
+background-image: none;
+border-block-end-color: var(--helix-color-border);
+}
+
+:host([tone="surface"]) {
+background-color: var(--helix-color-surface);
+background-image: none;
+border-block-end-color: var(--helix-color-border);
+}
+
+:host([tone="primary"]) {
+--_announcement-color: var(--helix-color-primary);
+}
+
+:host([tone]:not([tone="neutral"], [tone="surface"])) {
+background-image: linear-gradient(
+to right,
+light-dark(
+color-mix(in oklab, var(--_announcement-color) 18%, var(--helix-color-background)),
+color-mix(in oklab, var(--_announcement-color) 32%, var(--helix-color-background))
+),
+light-dark(
+color-mix(in oklab, var(--_announcement-color) 10%, var(--helix-color-background)),
+color-mix(in oklab, var(--_announcement-color) 20%, var(--helix-color-background))
+)
+);
+border-block-end-color: color-mix(
+in oklab,
+var(--_announcement-color) 40%,
+var(--helix-color-background)
+);
+}
+
+[part="content"] {
+flex: 1 1 auto;
+min-inline-size: 0;
+text-align: center;
+}
+
+[part="actions"] slot::slotted(*) {
+margin-inline-start: var(--helix-space-md);
+}
+
+[part="actions"] {
+align-items: center;
+display: flex;
+flex: 0 0 auto;
+gap: var(--helix-space-xs);
+}
+
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+
+block-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
+inline-size: calc(var(--helix-size-icon) + var(--helix-space-2xs) * 2);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+flex: 0 0 auto;
+place-content: center;
+place-items: center;
+
+position: absolute;
+inset-inline-end: var(--announcement-inset, var(--helix-space-lg));
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="dismiss"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="dismiss"] svg {
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="dismiss"] {
+transition: none;
+}
+}
+
+[part="actions"][data-empty] {
+display: none;
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,26 @@
+import { HelixHeadlessAnnouncement } from '@fusion.dev/helix-headless/announcement';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A page-level message above the masthead, which can be dismissed.
+ *
+ * @description
+ * Full width and flat, with the severity carried by a tinted fill and a
+ * hairline beneath rather than by a border on four sides: an announcement is a
+ * band across the top of the page, not a box that happens to be wide.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Banner, Notification bar, Alert bar
+ * @documentation https://helix.fusion.dev/components/announcement
+ *
+ * @cssproperty --announcement-inset - Inline padding, matched to the page.
+ */
+export declare class HelixAnnouncement extends HelixHeadlessAnnouncement {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-announcement': HelixAnnouncement;
+    }
+}

package/dist/announcement/root/announcement-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 { HelixHeadlessAnnouncement } from '@fusion.dev/helix-headless/announcement';
+import { styles } from './announcement-root.css.js';
+/**
+ * @summary A page-level message above the masthead, which can be dismissed.
+ *
+ * @description
+ * Full width and flat, with the severity carried by a tinted fill and a
+ * hairline beneath rather than by a border on four sides: an announcement is a
+ * band across the top of the page, not a box that happens to be wide.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @aliases Banner, Notification bar, Alert bar
+ * @documentation https://helix.fusion.dev/components/announcement
+ *
+ * @cssproperty --announcement-inset - Inline padding, matched to the page.
+ */
+let HelixAnnouncement = class HelixAnnouncement extends HelixHeadlessAnnouncement {
+    static { this.styles = styles; }
+};
+HelixAnnouncement = __decorate([
+    customElement('helix-announcement')
+], HelixAnnouncement);
+export { HelixAnnouncement };

package/dist/app-header/index.d.ts

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

package/dist/app-header/index.js

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

package/dist/app-header/root/app-header-root.css.d.ts

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

package/dist/app-header/root/app-header-root.css.js

@@ -0,0 +1,112 @@
+// Generated from src/app-header/root/app-header-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+--helix-size-checkbox: var(--helix-size-checkbox-sm);
+
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-control: var(--helix-size-control-sm);
+--helix-size-tag: var(--helix-size-tag-sm);
+
+background-color: var(--app-header-background-color, var(--helix-color-background));
+border-block-end: var(--helix-border-thin) solid var(--app-header-border-color, transparent);
+display: block;
+inline-size: 100%;
+
+transition:
+backdrop-filter var(--helix-duration-normal) var(--helix-easing-standard),
+background-color var(--helix-duration-normal) var(--helix-easing-standard),
+border-color var(--helix-duration-normal) var(--helix-easing-standard);
+}
+
+:host([material="glass"]) {
+backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));
+background-color: var(--app-header-background-color, var(--helix-material-translucent));
+}
+
+:host([material="frosted"]) {
+backdrop-filter: var(--app-header-backdrop, blur(var(--helix-material-blur-lg)));
+background-color: var(--app-header-background-color, var(--helix-material-translucent-strong));
+}
+
+:host([material="transparent"]) {
+background-color: var(--app-header-background-color, transparent);
+}
+
+:host([material="transparent"]:state(scrolled)) {
+backdrop-filter: var(--app-header-backdrop, var(--helix-material-backdrop));
+background-color: var(--app-header-background-color, var(--helix-material-translucent));
+}
+
+:host([sticky]) {
+inset-block-start: 0;
+position: sticky;
+z-index: var(--helix-layer-sticky);
+}
+
+[part="row"] {
+align-items: center;
+block-size: var(--app-header-block-size, var(--helix-size-header));
+display: grid;
+gap: var(--helix-space-lg);
+grid-template-columns: 1fr auto 1fr;
+margin-inline: auto;
+max-inline-size: var(--app-header-max-inline-size, 72rem);
+padding-inline: var(--app-header-padding, var(--helix-space-lg));
+}
+
+[part="start"] {
+align-items: center;
+display: flex;
+min-inline-size: 0;
+}
+
+[part="end"] {
+align-items: center;
+display: flex;
+gap: var(--helix-space-xs);
+justify-content: flex-end;
+min-inline-size: 0;
+}
+
+:host([content-align="start"]) [part="row"] {
+grid-template-columns: auto 1fr auto;
+}
+
+slot[name="start"]::slotted(*) {
+align-items: center;
+color: var(--helix-color-foreground);
+display: flex;
+flex: 0 0 auto;
+font-weight: var(--helix-weight-semibold);
+gap: var(--helix-space-xs);
+letter-spacing: var(--helix-tracking-tight);
+}
+
+[part="content"] {
+align-items: center;
+display: flex;
+
+position: relative;
+gap: var(--helix-space-md);
+justify-content: center;
+
+min-inline-size: 0;
+overflow-x: auto;
+}
+
+:host([content-align="start"]) [part="content"] {
+justify-content: flex-start;
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host {
+transition: none;
+}
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);