@fusion.dev/helix 0.0.0-dev

package/dist/timeline/item/timeline-item.js

@@ -0,0 +1,33 @@
+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 { HelixHeadlessTimelineItem } from '@fusion.dev/helix-headless/timeline';
+import { styles } from './timeline-item.css.js';
+/**
+ * @summary One event on a timeline: when it happened, and what it was.
+ *
+ * @description
+ * Presentation only: the rail down the side, the mark on it, and the line that
+ * arrives at this entry from the one before.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category data
+ * @aliases Activity item, History entry, Event
+ * @documentation https://helix.fusion.dev/components/timeline
+ *
+ * @cssproperty --timeline-marker-radius - How round the mark is. Zero is a square, and half its size is a disc.
+ * @cssproperty --timeline-marker-size - Edge length of the mark.
+ * @cssproperty --timeline-rail-size - Width of the line.
+ */
+let HelixTimelineItem = class HelixTimelineItem extends HelixHeadlessTimelineItem {
+    static { this.styles = styles; }
+};
+HelixTimelineItem = __decorate([
+    customElement('helix-timeline-item')
+], HelixTimelineItem);
+export { HelixTimelineItem };

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

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

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

@@ -0,0 +1,12 @@
+// Generated from src/timeline/root/timeline-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;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,25 @@
+import { HelixHeadlessTimeline } from '@fusion.dev/helix-headless/timeline';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A record of what happened, in the order it happened.
+ *
+ * @description
+ * Presentation only: the direction time runs in, and the spacing between one
+ * event and the next. Every entry draws its own mark and its own line.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category data
+ * @aliases Activity feed, History, Changelog, Audit trail
+ * @documentation https://helix.fusion.dev/components/timeline
+ *
+ * @cssproperty --timeline-gap - Space between one entry and the next.
+ */
+export declare class HelixTimeline extends HelixHeadlessTimeline {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-timeline': HelixTimeline;
+    }
+}

package/dist/timeline/root/timeline-root.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 { HelixHeadlessTimeline } from '@fusion.dev/helix-headless/timeline';
+import { styles } from './timeline-root.css.js';
+/**
+ * @summary A record of what happened, in the order it happened.
+ *
+ * @description
+ * Presentation only: the direction time runs in, and the spacing between one
+ * event and the next. Every entry draws its own mark and its own line.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category data
+ * @aliases Activity feed, History, Changelog, Audit trail
+ * @documentation https://helix.fusion.dev/components/timeline
+ *
+ * @cssproperty --timeline-gap - Space between one entry and the next.
+ */
+let HelixTimeline = class HelixTimeline extends HelixHeadlessTimeline {
+    static { this.styles = styles; }
+};
+HelixTimeline = __decorate([
+    customElement('helix-timeline')
+], HelixTimeline);
+export { HelixTimeline };

package/dist/toast/index.d.ts

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

package/dist/toast/index.js

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

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

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

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

@@ -0,0 +1,233 @@
+// Generated from src/toast/item/toast-item.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+
+display: grid;
+
+grid-template-rows: minmax(0, 1fr);
+
+margin-block-start: var(--_toast-gap, var(--helix-space-xs));
+transition:
+grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard),
+margin-block-start var(--helix-duration-normal) var(--helix-easing-standard),
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+translate var(--helix-duration-normal) var(--helix-easing-standard);
+
+--helix-size-icon: var(--helix-size-icon-sm);
+--helix-size-control: var(--helix-size-control-sm);
+
+--_toast-line: calc(var(--helix-text-sm) * var(--helix-leading-normal));
+
+inline-size: var(--toast-inline-size, 22rem);
+max-inline-size: calc(100vw - var(--helix-space-xl));
+}
+
+[part="item"] {
+
+align-items: start;
+
+display: grid;
+grid-template-columns: auto 1fr;
+background-color: var(--helix-color-surface-overlay);
+border-radius: var(--helix-radii-sm);
+border: var(--toast-border-width, var(--helix-border-floating)) solid
+var(--toast-border-color, var(--helix-color-border));
+box-shadow: var(--toast-shadow, var(--helix-shadow-floating));
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+line-height: var(--helix-leading-normal);
+padding: var(--toast-item-padding, var(--helix-space-sm));
+
+padding-inline-end: calc(
+var(--helix-space-sm) +
+var(--helix-size-control-tight) +
+var(--helix-space-2xs)
+);
+
+min-block-size: 0;
+
+position: relative;
+
+overflow: hidden;
+}
+
+[part="icon"] {
+color: var(--_toast-severity, var(--helix-color-foreground-muted));
+display: inline-flex;
+grid-area: 1 / 1;
+
+margin-inline-end: var(--helix-space-sm);
+
+margin-block-start: calc((var(--_toast-line) - var(--helix-size-icon)) / 2);
+}
+
+[part="icon"] svg {
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+slot[name="icon"]::slotted(*) {
+--icon-size: var(--helix-size-icon);
+
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+[part="content"] {
+grid-area: 1 / 2;
+min-inline-size: 0;
+}
+
+[part="actions"] {
+display: flex;
+gap: var(--helix-space-2xs);
+grid-area: 2 / 2;
+}
+
+[part="actions"] slot::slotted(*) {
+margin-block-start: var(--helix-space-xs);
+}
+
+:host([tone="info"]) {
+--_toast-severity: var(--helix-color-primary);
+}
+
+:host([tone="success"]) {
+--_toast-severity: var(--helix-color-success);
+}
+
+:host([tone="warning"]) {
+--_toast-severity: var(--helix-color-warning);
+}
+
+:host([tone="danger"]) {
+--_toast-severity: var(--helix-color-danger);
+}
+
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+
+position: absolute;
+inset-block-start: calc(
+var(--toast-item-padding, var(--helix-space-sm)) +
+(var(--_toast-line) - var(--helix-size-control-tight)) /
+2
+);
+inset-inline-end: var(--helix-space-sm);
+block-size: var(--helix-size-control-tight);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+flex: 0 0 auto;
+inline-size: var(--helix-size-control-tight);
+place-content: center;
+place-items: center;
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="dismiss"] svg {
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+[part="dismiss"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="timer"] {
+animation: helix-toast-drain var(--toast-duration, 0ms) linear forwards;
+background-color: var(--_toast-severity, var(--helix-color-foreground-muted));
+block-size: var(--helix-space-2xs);
+
+inset-block-start: 0;
+inset-inline: 0;
+position: absolute;
+
+transform-origin: 0 50%;
+}
+
+[part="timer"]:dir(rtl) {
+transform-origin: 100% 50%;
+}
+
+:host([data-paused]) [part="timer"] {
+animation-play-state: paused;
+}
+
+@keyframes helix-toast-drain {
+to {
+scale: 0 1;
+}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+[part="item"] {
+
+animation: helix-toast-in var(--helix-duration-normal) var(--helix-easing-decelerate) backwards;
+}
+}
+
+@keyframes helix-toast-in {
+from {
+opacity: 0;
+
+translate: 0 var(--_toast-enter, var(--helix-space-lg));
+}
+}
+
+:host([data-closed]) [part="item"] {
+
+padding-block: 0;
+transition: padding-block var(--helix-duration-normal) var(--helix-easing-standard);
+}
+
+:host([hidden]:not([hidden="until-found"])) {
+display: grid;
+}
+
+:host([data-closed]) {
+grid-template-rows: minmax(0, 0fr);
+margin-block-start: 0;
+opacity: 0;
+translate: 0 var(--_toast-enter, var(--helix-space-lg));
+visibility: hidden;
+transition:
+grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard),
+margin-block-start var(--helix-duration-normal) var(--helix-easing-standard),
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+translate var(--helix-duration-normal) var(--helix-easing-standard),
+visibility var(--helix-duration-normal) step-end;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="item"] {
+animation: none;
+}
+
+[part="dismiss"] {
+transition: none;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host,
+:host([data-closed]),
+:host([data-closed]) [part="item"] {
+transition: none;
+}
+
+[part="timer"] {
+animation: helix-toast-drain var(--toast-duration, 0ms) linear forwards;
+}
+}`);

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

@@ -0,0 +1,31 @@
+import { HelixHeadlessToastItem } from '@fusion.dev/helix-headless/toast';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary One message in the toast region.
+ *
+ * @description
+ * A surface with a shadow, because a toast sits over whatever the reader was
+ * looking at rather than in it. The severity is a bar down the leading edge and
+ * not a fill: a message is text to be read, and a colored panel behind it
+ * costs contrast for something the mark already says.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/toast
+ *
+ * @cssproperty --toast-border-color - Color of the panel's edge.
+ * @cssproperty --toast-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 --toast-item-padding - Space between the message's edge and its contents.
+ * @cssproperty --toast-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 HelixToastItem extends HelixHeadlessToastItem {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-toast-item': HelixToastItem;
+    }
+}

package/dist/toast/item/toast-item.js

@@ -0,0 +1,37 @@
+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 { HelixHeadlessToastItem } from '@fusion.dev/helix-headless/toast';
+import { styles } from './toast-item.css.js';
+/**
+ * @summary One message in the toast region.
+ *
+ * @description
+ * A surface with a shadow, because a toast sits over whatever the reader was
+ * looking at rather than in it. The severity is a bar down the leading edge and
+ * not a fill: a message is text to be read, and a colored panel behind it
+ * costs contrast for something the mark already says.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @documentation https://helix.fusion.dev/components/toast
+ *
+ * @cssproperty --toast-border-color - Color of the panel's edge.
+ * @cssproperty --toast-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 --toast-item-padding - Space between the message's edge and its contents.
+ * @cssproperty --toast-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 HelixToastItem = class HelixToastItem extends HelixHeadlessToastItem {
+    static { this.styles = styles; }
+};
+HelixToastItem = __decorate([
+    customElement('helix-toast-item')
+], HelixToastItem);
+export { HelixToastItem };

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

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

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

@@ -0,0 +1,66 @@
+// Generated from src/toast/root/toast-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+--_toast-inset: var(--toast-inset, var(--helix-space-lg));
+
+inset-inline: var(--_toast-inset);
+pointer-events: none;
+position: fixed;
+
+z-index: var(--helix-layer-toast);
+}
+
+:host(:not([placement])) {
+inset-block-end: var(--_toast-inset);
+
+--_toast-enter: var(--helix-space-lg);
+}
+
+[part="region"] {
+display: flex;
+flex-direction: column;
+
+--_toast-gap: var(--toast-gap, var(--helix-space-xs));
+}
+
+::slotted(*) {
+pointer-events: auto;
+}
+
+:host([placement^="bottom"]) {
+inset-block-end: var(--_toast-inset);
+
+--_toast-enter: var(--helix-space-lg);
+}
+
+:host([placement^="top"]) {
+inset-block-start: var(--_toast-inset);
+
+--_toast-enter: calc(var(--helix-space-lg) * -1);
+}
+
+:host([placement^="top"]) [part="region"] {
+flex-direction: column-reverse;
+}
+
+:host(:not([placement])) [part="region"] {
+align-items: flex-end;
+}
+
+:host([placement$="start"]) [part="region"] {
+align-items: flex-start;
+}
+
+:host([placement$="end"]) [part="region"] {
+align-items: flex-end;
+}
+
+:host([placement$="center"]) [part="region"] {
+align-items: center;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);

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

@@ -0,0 +1,37 @@
+import { HelixHeadlessToast } from '@fusion.dev/helix-headless/toast';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary The region messages arrive in, and the only thing that announces them.
+ *
+ * @description
+ * Fixed to the window, and it catches nothing: the region spans a whole edge,
+ * so a stack of one message in a corner would otherwise put an invisible bar
+ * across everything beside it. The region is transparent to a pointer and the
+ * messages take it back.
+ *
+ * **It belongs at the root of the application.** `position: fixed` is
+ * positioned against the viewport only while no ancestor carries `transform`,
+ * `filter`, `perspective` or `contain`, any of which makes that ancestor the
+ * containing block instead, and it is still clipped by an ancestor with
+ * `overflow: hidden`. That is a real constraint rather than a style note, and
+ * it is the same fact that put every other floating surface in this library
+ * into the top layer.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Toaster, Snackbar, Notifications
+ * @documentation https://helix.fusion.dev/components/toast
+ *
+ * @cssproperty --toast-gap - Space between one message and the next.
+ * @cssproperty --toast-inline-size - Width of a message.
+ * @cssproperty --toast-inset - Distance from the edges of the window.
+ */
+export declare class HelixToast extends HelixHeadlessToast {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-toast': HelixToast;
+    }
+}

package/dist/toast/root/toast-root.js

@@ -0,0 +1,43 @@
+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 { HelixHeadlessToast } from '@fusion.dev/helix-headless/toast';
+import { styles } from './toast-root.css.js';
+/**
+ * @summary The region messages arrive in, and the only thing that announces them.
+ *
+ * @description
+ * Fixed to the window, and it catches nothing: the region spans a whole edge,
+ * so a stack of one message in a corner would otherwise put an invisible bar
+ * across everything beside it. The region is transparent to a pointer and the
+ * messages take it back.
+ *
+ * **It belongs at the root of the application.** `position: fixed` is
+ * positioned against the viewport only while no ancestor carries `transform`,
+ * `filter`, `perspective` or `contain`, any of which makes that ancestor the
+ * containing block instead, and it is still clipped by an ancestor with
+ * `overflow: hidden`. That is a real constraint rather than a style note, and
+ * it is the same fact that put every other floating surface in this library
+ * into the top layer.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category overlays
+ * @aliases Toaster, Snackbar, Notifications
+ * @documentation https://helix.fusion.dev/components/toast
+ *
+ * @cssproperty --toast-gap - Space between one message and the next.
+ * @cssproperty --toast-inline-size - Width of a message.
+ * @cssproperty --toast-inset - Distance from the edges of the window.
+ */
+let HelixToast = class HelixToast extends HelixHeadlessToast {
+    static { this.styles = styles; }
+};
+HelixToast = __decorate([
+    customElement('helix-toast')
+], HelixToast);
+export { HelixToast };

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

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