@fusion.dev/helix 0.0.0-dev

package/dist/tree/root/tree-root.js

@@ -0,0 +1,47 @@
+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 { HelixHeadlessTree } from '@fusion.dev/helix-headless/tree';
+import { property } from 'lit/decorators.js';
+import { styles } from './tree-root.css.js';
+/**
+ * @summary A tree of items, navigable entirely from the keyboard.
+ *
+ * @description
+ * Quiet by default: no rules between rows and no fill except on the selected
+ * item. A navigation tree is read by scanning, and every line of chrome added
+ * to it is one more thing between the reader and the label.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category navigation
+ * @aliases FileTree, Navigation tree
+ * @documentation https://helix.fusion.dev/components/tree
+ *
+ * @slot - The tree's items.
+ *
+ * @event {HelixSelectEvent} helix-select - Fired when an item is chosen. Dispatched by the item and listened for here, because the tree is what a consumer holds a reference to. Cancelable: refusing it takes the decision and nothing moves.
+ *
+ * @csspart tree - The tree container.
+ *
+ * @cssproperty --tree-chevron-gap - Set from `chevron-placement`; the space before the chevron.
+ * @cssproperty --tree-chevron-order - Set from `chevron-placement`; read by each item.
+ * @cssproperty --tree-chevron-size - Size of the chevron, and the gutter a leaf reserves.
+ * @cssproperty --tree-gap - Space between rows.
+ * @cssproperty --tree-indent - Indent added per level.
+ * @cssproperty --tree-row-size - Least height of a row, so rows with and without an icon match.
+ */
+let HelixTree = class HelixTree extends HelixHeadlessTree {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ attribute: 'chevron-placement', reflect: true })
+], HelixTree.prototype, "chevronPlacement", void 0);
+HelixTree = __decorate([
+    customElement('helix-tree')
+], HelixTree);
+export { HelixTree };

package/dist/trend/index.d.ts

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

package/dist/trend/index.js

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

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

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

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

@@ -0,0 +1,50 @@
+// Generated from src/trend/root/trend-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+align-items: center;
+display: inline-flex;
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+gap: var(--helix-space-2xs);
+line-height: var(--helix-leading-tight);
+}
+
+:host {
+color: var(--trend-color, var(--_trend-color));
+
+--_trend-color: var(--helix-color-foreground-muted);
+}
+
+[part="icon"] {
+--icon-size: var(--trend-icon-size, 1em);
+}
+
+:host([direction="up"][good="up"]),
+:host([direction="down"][good="down"]) {
+--_trend-color: var(--helix-color-success);
+}
+
+:host([direction="up"][good="down"]),
+:host([direction="down"][good="up"]) {
+--_trend-color: var(--helix-color-danger);
+}
+
+[part="direction"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+slot[name="label"] {
+color: var(--helix-color-foreground-muted);
+font-weight: var(--helix-weight-regular);
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,48 @@
+import { HelixHeadlessTrend } from '@fusion.dev/helix-headless/trend';
+import type { CSSResultGroup } from 'lit';
+import '../../icon/index.js';
+/**
+ * @summary Which way a measurement moved, and whether that is good news.
+ *
+ * @description
+ * The arrow takes the judgment color and the number does not, which is the
+ * opposite of the dashboard convention and is measured rather than preferred:
+ * in light mode the success token is 3.8:1 on the surface, enough for a glyph
+ * and short of what 13px text needs, and there is no darker green in the ramp.
+ * The number therefore keeps the page's own foreground and stays the most
+ * legible thing here, which is right anyway, since the number is what a reader
+ * reads and the judgment is a gloss on it.
+ *
+ * **No visual axis applies here, and that is the answer rather than a gap.**
+ * This family carries `@groups charts`, so `check:axes` reports it beside eight
+ * that do declare one. Each of the three was asked and each refuses for a reason
+ * about what this is rather than about the axis. `emphasis` is how much ink a
+ * mark claims, and there is no mark: an arrow glyph and two runs of text, whose
+ * weight is `Text`'s business and whose size is the region's. `material` is what
+ * reads through a surface, and a 13px glyph has nothing behind it. `wash` is a
+ * gradient across an area, and there is no area.
+ *
+ * The meaning axis is here and is *derived*, which is the more interesting half:
+ * `direction` and `good` together resolve to success, danger or muted, so a
+ * consumer states the metric's polarity once rather than picking a color. A
+ * declared `tone` would let the color disagree with the arrow, which is the one
+ * thing this component exists to stop.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category charts
+ * @groups charts
+ * @aliases Delta, Change, Movement
+ * @documentation https://helix.fusion.dev/components/trend
+ *
+ * @cssproperty --trend-color - Color of the arrow, overriding the judgment.
+ * @cssproperty --trend-icon-size - Size of the arrow.
+ */
+export declare class HelixTrend extends HelixHeadlessTrend {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-trend': HelixTrend;
+    }
+}

package/dist/trend/root/trend-root.js

@@ -0,0 +1,55 @@
+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 { HelixHeadlessTrend } from '@fusion.dev/helix-headless/trend';
+import '../../icon/index.js';
+import { styles as glyphStyles } from '../../icon/glyph.css.js';
+import { styles } from './trend-root.css.js';
+/**
+ * @summary Which way a measurement moved, and whether that is good news.
+ *
+ * @description
+ * The arrow takes the judgment color and the number does not, which is the
+ * opposite of the dashboard convention and is measured rather than preferred:
+ * in light mode the success token is 3.8:1 on the surface, enough for a glyph
+ * and short of what 13px text needs, and there is no darker green in the ramp.
+ * The number therefore keeps the page's own foreground and stays the most
+ * legible thing here, which is right anyway, since the number is what a reader
+ * reads and the judgment is a gloss on it.
+ *
+ * **No visual axis applies here, and that is the answer rather than a gap.**
+ * This family carries `@groups charts`, so `check:axes` reports it beside eight
+ * that do declare one. Each of the three was asked and each refuses for a reason
+ * about what this is rather than about the axis. `emphasis` is how much ink a
+ * mark claims, and there is no mark: an arrow glyph and two runs of text, whose
+ * weight is `Text`'s business and whose size is the region's. `material` is what
+ * reads through a surface, and a 13px glyph has nothing behind it. `wash` is a
+ * gradient across an area, and there is no area.
+ *
+ * The meaning axis is here and is *derived*, which is the more interesting half:
+ * `direction` and `good` together resolve to success, danger or muted, so a
+ * consumer states the metric's polarity once rather than picking a color. A
+ * declared `tone` would let the color disagree with the arrow, which is the one
+ * thing this component exists to stop.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category charts
+ * @groups charts
+ * @aliases Delta, Change, Movement
+ * @documentation https://helix.fusion.dev/components/trend
+ *
+ * @cssproperty --trend-color - Color of the arrow, overriding the judgment.
+ * @cssproperty --trend-icon-size - Size of the arrow.
+ */
+let HelixTrend = class HelixTrend extends HelixHeadlessTrend {
+    static { this.styles = [glyphStyles, styles]; }
+};
+HelixTrend = __decorate([
+    customElement('helix-trend')
+], HelixTrend);
+export { HelixTrend };

package/dist/video/index.d.ts

@@ -0,0 +1 @@
+export { HelixVideo } from './root/video-root.js';

package/dist/video/index.js

@@ -0,0 +1 @@
+export { HelixVideo } from './root/video-root.js';

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

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

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

@@ -0,0 +1,404 @@
+// Generated from src/video/root/video-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+color-scheme: dark;
+
+display: block;
+position: relative;
+}
+
+[part="stage"] {
+border-radius: var(--video-radius, var(--helix-radii-md));
+display: block;
+overflow: hidden;
+position: relative;
+}
+
+[part="stage"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="video"] {
+
+aspect-ratio: var(--video-aspect-ratio, var(--video-intrinsic-ratio, 16 / 9));
+
+background-color: var(--video-well-color, var(--helix-color-surface-media));
+block-size: auto;
+display: block;
+inline-size: 100%;
+object-fit: contain;
+}
+
+[part="controls"] {
+align-items: center;
+
+color: var(--video-controls-color, var(--helix-color-foreground));
+display: flex;
+gap: var(--helix-space-xs);
+inset-block-end: 0;
+inset-inline: 0;
+opacity: 1;
+padding: var(--helix-space-xs) var(--helix-space-sm);
+position: absolute;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host([separation="filled"]) [part="controls"] {
+background-color: var(--helix-color-surface);
+color: var(--helix-color-foreground);
+}
+
+[part="stage"]::before {
+background-image: linear-gradient(to top, var(--helix-color-overlay), transparent);
+block-size: calc(var(--helix-size-icon-loose) + var(--helix-space-2xl));
+content: "";
+inset-block-end: 0;
+inset-inline: 0;
+opacity: 1;
+pointer-events: none;
+position: absolute;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host([separation="filled"]) [part="stage"]::before {
+content: none;
+}
+
+:host([separation="filled"][data-idle]:not(:focus-within)) [part="controls"] {
+opacity: 1;
+}
+
+:host([data-idle]:not(:focus-within)) [part="stage"]::before {
+opacity: 0;
+}
+
+:host([separation="plain"]) [part="stage"]::before,
+:host([controls]) [part="stage"]::before {
+content: none;
+}
+
+:host([data-idle]:not(:focus-within)) [part="controls"] {
+opacity: 0;
+}
+
+[part="controls"] :where(a, button) {
+all: unset;
+--icon-size: var(--helix-size-icon-tight);
+
+align-items: center;
+border-radius: var(--helix-radii-sm);
+box-sizing: border-box;
+color: inherit;
+cursor: pointer;
+display: flex;
+flex: 0 0 auto;
+justify-content: center;
+min-block-size: var(--helix-size-icon-loose);
+min-inline-size: var(--helix-size-icon-loose);
+}
+
+[part="controls"] :where(a, button):focus-visible,
+[part="scrubber"]:focus-visible,
+[part="volume"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="time"] {
+color: inherit;
+flex: 0 0 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+}
+
+[part="scrubber"],
+[part="volume"] {
+appearance: none;
+border-radius: var(--helix-radii-full);
+cursor: pointer;
+margin: var(--helix-space-none);
+}
+
+[part="scrubber"] {
+background-color: color-mix(in oklab, currentColor 28%, transparent);
+background-image: linear-gradient(
+to right,
+var(--_video-fill) calc(var(--_video-at, 0) * 100%),
+transparent calc(var(--_video-at, 0) * 100%)
+);
+block-size: 4px;
+}
+
+[part="scrubber"] {
+--_video-at: var(--video-progress, 0);
+--_video-fill: var(--video-accent-color, var(--helix-color-primary));
+
+flex: 1 1 auto;
+min-inline-size: 0;
+}
+
+[part="volume"] {
+--_video-at: var(--video-level, 1);
+--_video-fill: currentColor;
+}
+
+[part="sound"] {
+--_video-level-size: 4.5rem;
+
+--_video-level-gap: var(--helix-space-2xs);
+--_video-level-lift: calc(100% + var(--_video-level-gap));
+
+align-items: center;
+display: flex;
+flex: 0 0 auto;
+position: relative;
+}
+
+[part="volume"] {
+
+writing-mode: vertical-rl;
+
+background-color: color-mix(in oklab, currentColor 28%, transparent);
+background-image: linear-gradient(
+to top,
+var(--_video-fill) calc(var(--_video-at, 1) * 100%),
+transparent calc(var(--_video-at, 1) * 100%)
+);
+
+block-size: 4px;
+bottom: var(--_video-level-lift);
+
+direction: rtl;
+inline-size: var(--_video-level-size);
+
+left: 50%;
+opacity: 0;
+padding: var(--helix-space-none);
+pointer-events: none;
+position: absolute;
+transition: opacity var(--helix-duration-fast) var(--helix-easing-standard);
+translate: -50% 0;
+}
+
+[part="sound"]:hover [part="volume"],
+[part="sound"]:focus-within [part="volume"] {
+opacity: 1;
+pointer-events: auto;
+}
+
+[part="sound"]:hover::after,
+[part="sound"]:focus-within::after {
+block-size: var(--_video-level-gap);
+bottom: 100%;
+content: "";
+inline-size: var(--helix-size-icon-loose);
+left: 50%;
+position: absolute;
+translate: -50% 0;
+}
+
+[part="sound"]:hover::before,
+[part="sound"]:focus-within::before {
+background-color: var(--helix-color-overlay);
+border-radius: var(--helix-radii-full);
+content: "";
+block-size: calc(var(--_video-level-size) + var(--helix-space-xs) * 2);
+
+bottom: calc(var(--_video-level-lift) - var(--helix-space-xs));
+inline-size: var(--helix-size-icon-loose);
+left: 50%;
+position: absolute;
+translate: -50% 0;
+}
+
+[part="scrubber"]::-webkit-slider-thumb,
+[part="volume"]::-webkit-slider-thumb {
+appearance: none;
+background-color: currentColor;
+block-size: 12px;
+border: none;
+border-radius: var(--helix-radii-full);
+inline-size: 12px;
+}
+
+[part="scrubber"]::-moz-range-thumb,
+[part="volume"]::-moz-range-thumb {
+background-color: currentColor;
+block-size: 12px;
+border: none;
+border-radius: var(--helix-radii-full);
+inline-size: 12px;
+}
+
+:host([separation="filled"]) [part="sound"] {
+--_video-level-gap: calc(var(--helix-space-xs) * 2);
+}
+
+[part="overflow"] {
+display: contents;
+}
+
+[part="start"] {
+all: unset;
+--icon-size: 40%;
+
+align-items: center;
+aspect-ratio: 1;
+background-color: var(--helix-color-overlay);
+border-radius: var(--helix-radii-full);
+box-shadow: 0 0 0 var(--helix-border-thin)
+color-mix(in oklab, var(--helix-color-foreground) 40%, transparent);
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+cursor: pointer;
+display: flex;
+
+inline-size: var(
+--video-start-size,
+clamp(var(--helix-size-control), 15%, calc(var(--helix-size-control-loose) * 1.5))
+);
+inset-block-start: 50%;
+inset-inline-start: 50%;
+justify-content: center;
+position: absolute;
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+translate: -50% -50%;
+}
+
+[part="start"]:hover {
+background-color: color-mix(
+in oklab,
+var(--helix-color-overlay) 88%,
+var(--helix-color-foreground)
+);
+}
+
+[part="start"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="cue"] {
+background-color: var(--helix-color-overlay);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+inline-size: max-content;
+inset-block-end: calc(var(--helix-size-icon-loose) + var(--helix-space-lg));
+inset-inline-start: 50%;
+margin: var(--helix-space-none);
+max-inline-size: min(80%, 36rem);
+padding: var(--helix-space-2xs) var(--helix-space-xs);
+position: absolute;
+text-align: center;
+text-wrap: balance;
+transition: inset-block-end var(--helix-duration-fast) var(--helix-easing-standard);
+translate: -50% 0;
+}
+
+:host([data-idle]:not(:focus-within)) [part="cue"] {
+inset-block-end: var(--helix-space-lg);
+}
+
+[part="poster"] {
+display: block;
+inset: 0;
+
+pointer-events: none;
+position: absolute;
+}
+
+[part="poster"]::slotted(*) {
+pointer-events: auto;
+}
+
+[part="poster"]::slotted(*) {
+block-size: 100%;
+display: block;
+inline-size: 100%;
+object-fit: contain;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="controls"],
+[part="cue"],
+[part="stage"]::before,
+[part="start"],
+[part="volume"] {
+transition: none;
+}
+}
+
+[part="speed"] {
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-xs);
+font-variant-numeric: tabular-nums;
+font-weight: var(--helix-weight-medium);
+min-inline-size: var(--video-speed-size, 2.5rem);
+}
+
+[part="remote"][aria-pressed="true"] {
+color: var(--helix-color-primary);
+}
+
+[part="loading"],
+[part="failure"] {
+align-items: center;
+background-color: color-mix(in oklab, var(--helix-color-surface-media) 72%, transparent);
+border-radius: var(--helix-radii-md);
+color: var(--helix-color-foreground-media);
+display: flex;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+gap: var(--helix-space-xs);
+inset-block-start: 50%;
+inset-inline-start: 50%;
+padding: var(--helix-space-xs) var(--helix-space-sm);
+position: absolute;
+translate: -50% -50%;
+}
+
+[part="loading-mark"] {
+
+animation: video-spin 0.8s linear infinite;
+block-size: var(--helix-size-icon-tight);
+border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--helix-color-foreground-media) 30%, transparent);
+border-block-start-color: var(--helix-color-foreground-media);
+border-radius: var(--helix-radii-full);
+flex: 0 0 auto;
+inline-size: var(--helix-size-icon-tight);
+}
+
+@keyframes video-spin {
+to {
+rotate: 1turn;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="loading-mark"] {
+animation: none;
+}
+}
+
+[part="back"] {
+inset-block-start: var(--helix-space-sm);
+inset-inline-start: var(--helix-space-sm);
+opacity: inherit;
+position: absolute;
+z-index: var(--helix-layer-raised);
+}
+
+[part="back"]:not(:has(*)) {
+display: none;
+}
+
+@media print {
+:host {
+display: none;
+}
+}`);