@fusion.dev/helix 0.142.1 → 0.143.0

package/dist/tabs/panel/tab-panel.d.ts

@@ -14,6 +14,8 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The panel's content.
  *
  * @csspart panel - The panel container.
+ *
+ * @cssproperty --tabs-panel-padding-block-start - The space between the tab row and the panel's content.
  */
 export declare class HelixTabPanel extends HelixHeadlessTabPanel {
     static styles: CSSResultGroup;

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

@@ -18,12 +18,15 @@ background-position: bottom;
 background-repeat: repeat-x;
 background-size: 100% var(--helix-border-thin);
 display: flex;
-gap: var(--helix-space-2xs);
+gap: var(--tabs-gap, var(--helix-space-2xs));
 overflow-x: auto;
 }
 
 :host([variant="underlined"]) {
---_tabs-rule: linear-gradient(var(--helix-color-border), var(--helix-color-border));
+--_tabs-rule: linear-gradient(
+var(--tabs-rule-color, var(--helix-color-border)),
+var(--tabs-rule-color, var(--helix-color-border))
+);
 --_tab-radius: var(--helix-radii-none);
 --_tab-selected-shadow: none;
 --_tab-selected-surface: transparent;
@@ -87,14 +90,17 @@ z-index: var(--helix-layer-raised);
 }
 
 :host([variant="underlined"]) [part="indicator"] {
---_indicator-block: var(--helix-border-thick);
---_indicator-color: var(--helix-color-primary);
---_indicator-offset: calc(var(--indicator-block-size, 0px) - var(--helix-border-thick));
+--_indicator-block: var(--tabs-indicator-thickness, var(--helix-border-thick));
+--_indicator-color: var(--tabs-indicator-color, var(--helix-color-primary));
+--_indicator-offset: calc(
+var(--indicator-block-size, 0px) -
+var(--tabs-indicator-thickness, var(--helix-border-thick))
+);
 }
 
 :host([variant="segmented"]) [part="indicator"] {
 --_indicator-block: var(--indicator-block-size, 0);
---_indicator-color: var(--helix-color-surface-overlay);
+--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));
 --_indicator-radius: calc(var(--helix-radii-sm) - var(--helix-border-thin));
 --_indicator-shadow: var(--helix-shadow-sm);
 --_indicator-offset: 0px;
@@ -109,7 +115,7 @@ z-index: var(--helix-layer-raised);
 
 --_indicator-border: var(--helix-border-thin);
 --_indicator-border-color: var(--helix-color-border);
---_indicator-color: var(--helix-color-surface-overlay);
+--_indicator-color: var(--tabs-indicator-color, var(--helix-color-surface-overlay));
 --_indicator-radius: var(--helix-radii-sm);
 --_indicator-shadow: var(--helix-shadow-sm);
 --_indicator-offset: 0px;

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

@@ -26,6 +26,11 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart panels - The panel container.
  * @csspart tabs - The tab list.
+ *
+ * @cssproperty --tabs-gap - The space between tabs.
+ * @cssproperty --tabs-indicator-color - The fill of the mark on the current tab: the bar under `underlined`, and the pill otherwise.
+ * @cssproperty --tabs-indicator-thickness - The height of the bar under `underlined`.
+ * @cssproperty --tabs-rule-color - The color of the rule under the row in `underlined`.
  */
 export declare class HelixTabs extends HelixHeadlessTabs {
     static styles: CSSResultGroup;

package/dist/tabs/tab/tab.css.js

@@ -7,19 +7,19 @@ display: inline-flex;
 align-items: center;
 background-color: transparent;
 
-block-size: var(--_tab-height, var(--helix-size-control));
+block-size: var(--_tab-height, var(--tabs-tab-block-size, var(--helix-size-control)));
 border: none;
 
 border-block-end: var(--helix-border-thick) solid transparent;
 border-radius: var(--_tab-radius, var(--helix-radii-none));
-color: var(--helix-color-foreground-subtle);
+color: var(--tabs-tab-color, var(--helix-color-foreground-subtle));
 cursor: pointer;
 font: inherit;
 font-size: var(--helix-text-sm);
 font-weight: var(--helix-weight-medium);
 display: inline-flex;
 justify-content: center;
-padding-inline: var(--helix-space-sm);
+padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));
 transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-normal) var(--helix-easing-emphasized),
@@ -36,7 +36,7 @@ color: var(--helix-color-foreground);
 :host(:state(selected)) [part="tab"]:hover {
 background-color: var(--_tab-selected-surface, transparent);
 box-shadow: var(--_tab-selected-shadow, none);
-color: var(--helix-color-foreground);
+color: var(--tabs-tab-selected-color, var(--helix-color-foreground));
 }
 
 [part="tab"]:disabled {

package/dist/tabs/tab/tab.d.ts

@@ -16,6 +16,11 @@ import type { CSSResultGroup } from 'lit';
  * @slot - The tab's label.
  *
  * @csspart tab - The tab itself.
+ *
+ * @cssproperty --tabs-tab-block-size - The height of a tab. `segmented` sizes its tabs to the track and does not read it.
+ * @cssproperty --tabs-tab-color - The label color of a tab that is not current.
+ * @cssproperty --tabs-tab-padding-inline - The space either side of the label.
+ * @cssproperty --tabs-tab-selected-color - The label color of the current tab.
  */
 export declare class HelixTab extends HelixHeadlessTab {
     static styles: CSSResultGroup;

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

@@ -47,9 +47,8 @@ export declare class HelixTag extends HelixHeadlessTag {
      * already calls them. `helix component`'s `axes` holds the vocabulary.
      *
      * **Not all seven are statuses, and `accent` is the one worth saying out
-     * loud**: it is the second emphasis, a rotation off the brand seed rather than
-     * a color of its own, so it stays in relation when somebody rethemes.
-     * `primary` is the seed itself. The four that are statuses are the four
+     * loud**: it is the second emphasis, the second color a theme names, and the
+     * brand itself until one is named. `primary` is the brand. The four that are statuses are the four
      * `HelixStatusTone` names, and those are the ones that would carry a glyph
      * somewhere that draws one.
      *

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

@@ -49,7 +49,8 @@ letter-spacing: var(--helix-tracking-normal);
 line-height: var(--helix-leading-heading);
 }
 
-:host([variant="body"]) {
+:host([variant="body"]),
+:host(:not([variant])[as="p"]) {
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-md);
 font-weight: var(--helix-weight-regular);
@@ -111,6 +112,62 @@ line-height: var(--helix-leading-normal);
 color: var(--_heading-ink, currentColor);
 }
 
+:host([emphasis="muted"]) {
+color: var(--helix-color-foreground-muted);
+}
+
+:host([emphasis="subtle"]) {
+color: var(--helix-color-foreground-subtle);
+}
+
+:host([tone="accent"]) {
+color: var(--helix-color-accent);
+}
+
+:host([tone="danger"]) {
+color: var(--helix-color-danger);
+}
+
+:host([tone="info"]) {
+color: var(--helix-color-info);
+}
+
+:host([tone="primary"]) {
+color: var(--helix-color-primary);
+}
+
+:host([tone="success"]) {
+color: var(--helix-color-success);
+}
+
+:host([tone="warning"]) {
+color: var(--helix-color-warning);
+}
+
+:host([tone="accent"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-accent-muted);
+}
+
+:host([tone="danger"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-danger-muted);
+}
+
+:host([tone="info"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-info-muted);
+}
+
+:host([tone="primary"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-primary-muted);
+}
+
+:host([tone="success"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-success-muted);
+}
+
+:host([tone="warning"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-warning-muted);
+}
+
 [part="text"] {
 color: inherit;
 font: inherit;

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 /**
  * @summary Text, with its HTML element and its type style set separately.
  *
@@ -40,6 +40,11 @@ export declare class HelixText extends HelixElement {
      * The HTML element to render.
      *
      * Decides the outline and the semantics.
+     *
+     * **`label` gives the label ramp and labels no control.** The element is in
+     * this one's shadow root, which neither `for` nor a wrapped control can
+     * reach, so a page that writes either is warned. Name a Helix field with its
+     * own `label`, and a native control with `<label data-text="label">`.
      */
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code' | 'label';
     /**
@@ -74,9 +79,13 @@ export declare class HelixText extends HelixElement {
     /**
      * The type style, which sets the size, weight, leading, and tracking.
      *
-     * Defaults to the one that matches `as`.
+     * Defaults to the one that matches `as`: `body` for `p`, `body-strong` for
+     * `strong`, `h5` and `h6`. A `span` or an `em` keeps the type around it.
      */
     variant?: 'display' | 'heading' | 'subheading' | 'title' | 'body' | 'body-strong' | 'caption' | 'label' | 'code';
+    protected updated(changed: PropertyValues): void;
+    /** Whether the page wrote this as the label of a control, which it cannot be. */
+    private labelsNothing;
     protected render(): unknown;
     static styles: CSSResultGroup;
 }

package/dist/text/root/text-root.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { property } from 'lit/decorators.js';
 import { literal, html as staticHtml } from 'lit/static-html.js';
 import { styles } from './text-root.css.js';
@@ -23,6 +23,24 @@ const TAGS = {
     strong: literal `strong`,
 };
 let HelixText = class HelixText extends HelixElement {
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('as') && this.as === 'label' && this.labelsNothing()) {
+            reportRuntime({
+                kind: 'unreachable-label',
+                message: '<helix-text as="label"> names no control: its label is in a shadow root, which ' +
+                    '`for` and a wrapped control cannot reach. Give a Helix field its own `label`, or ' +
+                    'write `<label data-text="label">` for a native control.',
+                tag: this.localName,
+            });
+        }
+    }
+    labelsNothing() {
+        const fields = [...this.querySelectorAll('*')].some((element) => element.constructor.formAssociated === true);
+        return (fields ||
+            this.hasAttribute('for') ||
+            this.querySelector('input, select, textarea, button, meter, output, progress') !== null);
+    }
     render() {
         const tag = (this.as && Object.hasOwn(TAGS, this.as) ? TAGS[this.as] : undefined) ?? literal `span`;
         return staticHtml `<${tag} part="text"><slot></slot></${tag}>`;

package/dist/time-input/root/time-input-root.d.ts

@@ -1,6 +1,5 @@
 import { HelixHeadlessTimeInput } from '@fusion.dev/helix-headless/time-input';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
 /**

package/dist/time-input/root/time-input-root.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTimeInput } from '@fusion.dev/helix-headless/time-input';
-import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';

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

@@ -1,24 +1,42 @@
 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);
+display: contents;
 }
 
 :host(:not([placement])) {
 --_toast-enter: var(--helix-space-lg);
-inset-block-end: var(--_toast-inset);
 }
 
 [part="region"] {
 
 --_toast-gap: var(--toast-gap, var(--helix-space-xs));
+background: none;
+block-size: auto;
+border: none;
+color: inherit;
 display: flex;
 flex-direction: column;
+inline-size: auto;
+inset: auto;
+inset-inline: var(--_toast-inset);
+margin: var(--helix-space-none);
+max-block-size: none;
+max-inline-size: none;
+overflow: visible;
+padding: var(--helix-space-none);
+pointer-events: none;
+position: fixed;
+
+z-index: var(--helix-layer-toast);
+}
+
+:host(:not([placement])) [part="region"] {
+inset-block-end: var(--_toast-inset);
+}
+
+[part="region"]:not(:popover-open) {
+display: none;
 }
 
 ::slotted(*) {
@@ -27,11 +45,17 @@ pointer-events: auto;
 
 :host([placement^="bottom"]) {
 --_toast-enter: var(--helix-space-lg);
+}
+
+:host([placement^="bottom"]) [part="region"] {
 inset-block-end: var(--_toast-inset);
 }
 
 :host([placement^="top"]) {
 --_toast-enter: calc(var(--helix-space-lg) * -1);
+}
+
+:host([placement^="top"]) [part="region"] {
 inset-block-start: var(--_toast-inset);
 }
 

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

@@ -4,16 +4,13 @@ import type { CSSResultGroup } from 'lit';
  * @summary The region that holds toast messages, and the only element that announces them.
  *
  * @description
- * Fixed to the window. The region spans a whole edge, so it ignores the pointer
- * and only the messages receive clicks. Content beside a message stays
- * clickable.
+ * Fixed to the window, in the top layer. The region spans a whole edge, so it
+ * ignores the pointer and only the messages receive clicks. Content beside a
+ * message stays clickable.
  *
- * **Place the region at the root of your application.** `position: fixed`
- * positions against the viewport only while no ancestor has `transform`,
- * `filter`, `perspective`, or `contain`. Any of these makes that ancestor the
- * containing block, and an ancestor with `overflow: hidden` still clips the
- * region. The other floating surfaces in Helix use the top layer for the same
- * reason.
+ * Because the stack is in the top layer, an ancestor with `transform`,
+ * `filter`, `contain`, or `overflow: hidden` does not move or clip it, and a
+ * message that arrives while a modal dialog is open shows above the dialog.
  *
  * @since 0.1.0
  * @status stable

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

@@ -19,6 +19,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The group's items.
  * @slot end - Content after the track, on the same line, such as a count or a reset.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot start - Content before the track, on the same line, such as an icon or a caption.
  *
  * @csspart indicator - The moving marker behind the selected item.

package/dist/tour/stop/tour-stop.css.js

@@ -22,6 +22,11 @@ padding: var(--tour-padding, var(--helix-space-md));
 position: fixed;
 }
 
+[part="bubble"]:focus,
+[part="bubble"]:focus-visible {
+outline: none;
+}
+
 :host [part="bubble"][hidden] {
 display: none;
 }

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessTrend } from '@fusion.dev/helix-headless/trend';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 /**
  * @summary An indicator that shows which way a measurement moved, and whether the change is good.
  *

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

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTrend } from '@fusion.dev/helix-headless/trend';
-import '../../icon/index.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './trend-root.css.js';
 let HelixTrend = class HelixTrend extends HelixHeadlessTrend {

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessVideo } from '@fusion.dev/helix-headless/video';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 import '../../menu/index.js';
 /**
  * @summary A video player with controls drawn by Helix.

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

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideo } from '@fusion.dev/helix-headless/video';
 import { property } from 'lit/decorators.js';
-import '../../icon/index.js';
 import '../../menu/index.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';

package/dist/video-playlist/menu/video-playlist-menu.d.ts

@@ -1,6 +1,5 @@
 import { HelixHeadlessVideoPlaylistMenu } from '@fusion.dev/helix-headless/video-playlist';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 import '../../menu/index.js';
 /**
  * @summary The playlist's entries, as a menu inside the player's control bar.

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -8,7 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideoPlaylistMenu } from '@fusion.dev/helix-headless/video-playlist';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './video-playlist-menu.css.js';
-import '../../icon/index.js';
 import '../../menu/index.js';
 let HelixVideoPlaylistMenu = class HelixVideoPlaylistMenu extends HelixHeadlessVideoPlaylistMenu {
     static { this.tier = 'helix-'; }