@fusion.dev/helix 0.218.0 → 0.220.0

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

@@ -16,6 +16,19 @@ import type { CSSResultGroup } from 'lit';
  * - `underlined` makes it a bar along the bottom of the strip, on a rule.
  * - `segmented` makes it the size of the tab's box, inside a sunken track.
  *
+ * `emphasis="subtle"` makes the mark quieter, for tabs inside other chrome
+ * such as a pane's header: a tint with no edge or shadow, the same wash a
+ * subtle button takes.
+ *
+ * **Tabs with no panels are a strip.** Where what each tab stands for lives
+ * outside the set, such as a pane's pages or shells, leave the panels out: the
+ * tabs keep their keys and their selection, `active` and `helix-activate` say
+ * which is current, and the page shows the rest. Put a control that adds a tab,
+ * such as a plus, beside the set rather than in it, so the tab list holds tabs
+ * alone. With `dismissible` tabs, `dismiss-marks="hover"` keeps each close
+ * mark out of sight until the tab is current, under the pointer, or holds
+ * focus, as a browser's tabs do.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation
@@ -45,6 +58,29 @@ import type { CSSResultGroup } from 'lit';
  */
 export declare class HelixTabs extends HelixHeadlessTabs {
     static styles: CSSResultGroup;
+    /**
+     * When the close mark of each `dismissible` tab shows.
+     *
+     * Unset, or `always`, every mark shows. `hover` shows a tab's mark while it
+     * is current, under the pointer, or holds focus, and keeps its room on every
+     * tab, so the labels do not move as the marks come and go. For a strip of
+     * many dismissible tabs, where a mark on each reads as a row of crosses. A
+     * keyboard closes a tab with Delete whether its mark shows or not.
+     */
+    dismissMarks?: 'always' | 'hover';
+    /**
+     * How loud the mark on the current tab is.
+     *
+     * Unset is the mark `variant` draws at rest. `subtle` is a tint with no
+     * edge or shadow: the raised pill becomes a wash, the `segmented` track's
+     * pill does the same inside it, and the `underlined` bar takes the
+     * foreground's ink in place of the primary color. For tabs inside other
+     * chrome, where a raised mark reads as a control laid on top of it.
+     *
+     * Independent of `variant`, since each of its marks has a quiet form: the two
+     * answer different questions, which is the test the axis registry applies.
+     */
+    emphasis?: 'subtle';
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,10 +1,17 @@
 import { __decorate } from "tslib";
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTabs } from '@fusion.dev/helix-headless/tabs';
+import { property } from 'lit/decorators.js';
 import { styles } from './tabs-root.css.js';
 let HelixTabs = class HelixTabs extends HelixHeadlessTabs {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'dismiss-marks', reflect: true })
+], HelixTabs.prototype, "dismissMarks", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixTabs.prototype, "emphasis", void 0);
 HelixTabs = __decorate([
     customElement('helix-tabs')
 ], HelixTabs);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: inline-flex}[part="tab"] {align-items: center;background-color: transparent;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(--tabs-tab-radius, var(--_tab-radius, var(--helix-radii-none)));color: var(--tabs-tab-color, var(--helix-color-foreground-muted));cursor: pointer;font: inherit;font-size: var(--tabs-tab-font-size, var(--helix-text-sm));font-weight: var(--tabs-tab-font-weight, var(--helix-weight-medium));display: inline-flex;inline-size: var(--_tab-inline-size, auto);justify-content: var(--_tab-justify, center);padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));text-decoration: none;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-normal) var(--helix-easing-emphasized), color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="tab"]:hover:not(:disabled, [aria-disabled="true"]) {background-color: var(--tabs-tab-hover-background-color, color-mix(in oklab, var(--helix-color-foreground) 5%, transparent));color: var(--tabs-tab-hover-color, var(--helix-color-foreground))}:host(:state(selected)) [part="tab"], :host(:state(selected)) [part="tab"]:hover {background-color: var(--tabs-tab-selected-background-color, var(--_tab-selected-surface, transparent));box-shadow: var(--_tab-selected-shadow, none);color: var(--tabs-tab-selected-color, var(--helix-color-foreground))}[part="tab"]:disabled, [part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5)}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="dismiss"] {align-items: center;border-radius: var(--helix-radii-sm);color: var(--tabs-tab-dismiss-color, currentColor);display: inline-flex;margin-inline: var(--helix-space-2xs) calc(var(--helix-space-2xs) * -1);padding: var(--helix-space-none)}[part="dismiss"] svg {block-size: 1em;inline-size: 1em}slot[name="dismiss-icon"]::slotted(*) {--icon-size: 1em;block-size: 1em;inline-size: 1em}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent)}`);
+export const styles = createSheet(`:host {display: inline-flex;max-inline-size: var(--tabs-tab-max-inline-size, none)}[part="tab"] {max-inline-size: 100%;min-inline-size: 0}[part="label"] {display: block;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}@supports (text-box: trim-both cap alphabetic) {[part="label"] {padding-block: calc((1lh - 1cap) / 2);text-box: trim-both cap alphabetic}}[part="tab"] {align-items: center;background-color: transparent;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(--tabs-tab-radius, var(--_tab-radius, var(--helix-radii-none)));color: var(--tabs-tab-color, var(--helix-color-foreground-muted));cursor: pointer;font: inherit;font-size: var(--tabs-tab-font-size, var(--helix-text-control));font-weight: var(--tabs-tab-font-weight, var(--helix-weight-medium));display: inline-flex;inline-size: var(--_tab-inline-size, auto);justify-content: var(--_tab-justify, center);padding-block: var(--helix-border-thick) 0;padding-inline: var(--tabs-tab-padding-inline, var(--helix-space-sm));text-decoration: none;transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), border-color var(--helix-duration-normal) var(--helix-easing-emphasized), color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="tab"]:hover:not(:disabled, [aria-disabled="true"]) {background-color: var(--tabs-tab-hover-background-color, color-mix(in oklab, var(--helix-color-foreground) 5%, transparent));color: var(--tabs-tab-hover-color, var(--helix-color-foreground))}:host(:state(selected)) [part="tab"], :host(:state(selected)) [part="tab"]:hover {background-color: var(--tabs-tab-selected-background-color, var(--_tab-selected-surface, transparent));box-shadow: var(--_tab-selected-shadow, none);color: var(--tabs-tab-selected-color, var(--helix-color-foreground))}[part="tab"]:disabled, [part="tab"][aria-disabled="true"] {cursor: not-allowed;opacity: var(--tabs-tab-disabled-opacity, 0.5)}[part="tab"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="dismiss"] {align-items: center;border-radius: var(--helix-radii-sm);color: var(--tabs-tab-dismiss-color, currentColor);display: inline-flex;margin-inline: var(--helix-space-2xs) calc(var(--helix-space-2xs) * -1);opacity: var(--_tabs-dismiss-rest, 1);padding: var(--helix-space-none);transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(selected)) [part="dismiss"], :host(:hover) [part="dismiss"], :host(:focus-within) [part="dismiss"] {opacity: 1}[part="dismiss"] svg {block-size: 1em;inline-size: 1em}slot[name="dismiss-icon"]::slotted(*) {--icon-size: 1em;block-size: 1em;inline-size: 1em}[part="dismiss"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 10%, transparent)}`);

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart dismiss - The mark a pointer presses to close a `dismissible` tab.
  * @csspart dismiss-mark - The glyph on that mark, where none is slotted.
+ * @csspart label - The slot the tab's label is in, which shortens with an ellipsis under `--tabs-tab-max-inline-size`.
  * @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.
@@ -28,6 +29,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --tabs-tab-font-weight - The weight of a tab's label.
  * @cssproperty --tabs-tab-hover-background-color - The wash under the pointer.
  * @cssproperty --tabs-tab-hover-color - The label color under the pointer.
+ * @cssproperty --tabs-tab-max-inline-size - The widest a tab grows. A longer label ends in an ellipsis, as a tag's does. Unset, a tab is as wide as its label.
  * @cssproperty --tabs-tab-padding-inline - The space either side of the label.
  * @cssproperty --tabs-tab-radius - The corners of a tab, which the hover wash takes.
  * @cssproperty --tabs-tab-selected-background-color - The fill of the current tab itself, under the moving mark.

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--terminal-active-match-background-color: color-mix(in oklab, var(--helix-color-warning) 45%, var(--terminal-background-color));--terminal-active-match-border-color: var(--helix-color-warning);--terminal-ansi-black: light-dark(var(--helix-color-foreground), var(--helix-color-border));--terminal-ansi-blue: var(--helix-color-info);--terminal-ansi-bright-black: var(--helix-color-foreground-muted);--terminal-ansi-bright-blue: color-mix(in oklab, var(--terminal-ansi-blue) 75%, var(--helix-color-foreground));--terminal-ansi-bright-cyan: color-mix(in oklab, var(--terminal-ansi-cyan) 75%, var(--helix-color-foreground));--terminal-ansi-bright-green: color-mix(in oklab, var(--terminal-ansi-green) 75%, var(--helix-color-foreground));--terminal-ansi-bright-magenta: color-mix(in oklab, var(--terminal-ansi-magenta) 75%, var(--helix-color-foreground));--terminal-ansi-bright-red: color-mix(in oklab, var(--terminal-ansi-red) 75%, var(--helix-color-foreground));--terminal-ansi-bright-white: light-dark(var(--helix-color-border), var(--helix-color-foreground));--terminal-ansi-bright-yellow: color-mix(in oklab, var(--terminal-ansi-yellow) 75%, var(--helix-color-foreground));--terminal-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--terminal-ansi-green: var(--helix-color-success);--terminal-ansi-magenta: var(--helix-color-syntax-callable);--terminal-ansi-red: var(--helix-color-danger);--terminal-ansi-white: light-dark(var(--helix-color-foreground-subtle), color-mix(in oklab, var(--helix-color-foreground-muted), var(--helix-color-foreground)));--terminal-ansi-yellow: var(--helix-color-warning);--terminal-background-color: var(--helix-color-background);--terminal-color: var(--helix-color-foreground);--terminal-cursor-color: var(--helix-color-primary);--terminal-match-background-color: color-mix(in oklab, var(--helix-color-warning) 22%, var(--terminal-background-color));--terminal-scrollbar-thumb-color: var(--helix-scrollbar-thumb-color);--terminal-selection-background-color: color-mix(in oklab, var(--helix-color-primary) 30%, transparent);display: block}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--terminal-background-color);block-size: var(--terminal-block-size, 24rem);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--terminal-radius, var(--helix-radii-lg));box-sizing: border-box;display: grid;grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;overflow: hidden;position: relative}:host([fill]) [part="region"], :host(:state(fullscreen)) [part="region"] {block-size: 100%}:host([separation="plain"]) [part="region"], :host(:state(fullscreen)) [part="region"] {border: none;border-radius: 0}:host(:fullscreen) {display: block}[part="header"], [part="find-bar"], [part="status"] {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);align-items: center;background-color: var(--terminal-header-background-color, var(--helix-color-surface-raised));box-sizing: border-box;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="header"] {grid-row: header;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));min-block-size: calc(var(--helix-size-control) + var(--helix-space-2xs) * 2)}[part="header"][hidden], [part="find-bar"][hidden], [part="status"][hidden] {display: none}[part="label"] {color: var(--helix-color-foreground);display: block;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="actions"], [part="find-actions"] {display: contents}[part="controls"], [part="find-controls"] {flex: 0 0 auto}[part="exit-actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs)}:host(:state(find-open)) [part="find"], :host(:state(fullscreen)) [part="fullscreen"], [part="find-match-case"][aria-pressed="true"], [part="find-whole-word"][aria-pressed="true"], [part="find-regex"][aria-pressed="true"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="find-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="find-bar"], [part="find-controls"] {--helix-size-control: calc(var(--helix-size-control-sm) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8)}[part="find-bar"] {grid-row: find;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border))}[part="find-field"] {appearance: none;background-color: var(--terminal-background-color);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));inline-size: 100%;max-inline-size: 20rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="find-field"]::-webkit-search-cancel-button, [part="find-field"]::-webkit-search-decoration {appearance: none}[part="find-field"]::placeholder {color: var(--helix-color-foreground-muted)}[part="find-count"] {color: var(--helix-color-foreground-muted);flex: 1 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;min-inline-size: 7em;padding-inline: var(--helix-space-xs);white-space: nowrap}[part="viewport"] {grid-row: viewport;color: var(--terminal-color);font-family: var(--terminal-font-family, var(--helix-font-mono));font-size: var(--terminal-font-size, var(--helix-text-sm));min-block-size: 0;overflow: auto;padding: var(--terminal-padding, var(--helix-space-xs) var(--helix-space-sm));position: relative}[part="viewport"] ::slotted(*) {block-size: 100%;inline-size: 100%}[part="viewport"]::after {background-color: var(--helix-color-foreground);content: "";inset: 0;opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(bell)) [part="viewport"]::after {opacity: 0.08;transition: none}[part="status"] {grid-row: status;border-block-start: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs) var(--helix-space-sm);padding-inline: var(--helix-space-sm)}[part="status"] > span {flex: 1 1 16rem;min-inline-size: 0}[part="restart"] {--button-border-color: var(--terminal-border-color, var(--helix-color-border))}@media (prefers-reduced-motion: reduce) {[part="viewport"]::after {transition: none}}@media print {[part="controls"], [part="find-bar"], [part="restart"], [part="exit-actions"] {display: none}}`);
+export const styles = createSheet(`:host {--terminal-active-match-background-color: color-mix(in oklab, var(--helix-color-warning) 45%, var(--terminal-background-color));--terminal-active-match-border-color: var(--helix-color-warning);--terminal-ansi-black: light-dark(var(--helix-color-foreground), var(--helix-color-border));--terminal-ansi-blue: var(--helix-color-info);--terminal-ansi-bright-black: var(--helix-color-foreground-muted);--terminal-ansi-bright-blue: color-mix(in oklab, var(--terminal-ansi-blue) 75%, var(--helix-color-foreground));--terminal-ansi-bright-cyan: color-mix(in oklab, var(--terminal-ansi-cyan) 75%, var(--helix-color-foreground));--terminal-ansi-bright-green: color-mix(in oklab, var(--terminal-ansi-green) 75%, var(--helix-color-foreground));--terminal-ansi-bright-magenta: color-mix(in oklab, var(--terminal-ansi-magenta) 75%, var(--helix-color-foreground));--terminal-ansi-bright-red: color-mix(in oklab, var(--terminal-ansi-red) 75%, var(--helix-color-foreground));--terminal-ansi-bright-white: light-dark(var(--helix-color-border), var(--helix-color-foreground));--terminal-ansi-bright-yellow: color-mix(in oklab, var(--terminal-ansi-yellow) 75%, var(--helix-color-foreground));--terminal-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--terminal-ansi-green: var(--helix-color-success);--terminal-ansi-magenta: var(--helix-color-syntax-callable);--terminal-ansi-red: var(--helix-color-danger);--terminal-ansi-white: light-dark(var(--helix-color-foreground-subtle), color-mix(in oklab, var(--helix-color-foreground-muted), var(--helix-color-foreground)));--terminal-ansi-yellow: var(--helix-color-warning);--terminal-background-color: var(--helix-color-background);--terminal-color: var(--helix-color-foreground);--terminal-cursor-color: var(--helix-color-primary);--terminal-match-background-color: color-mix(in oklab, var(--helix-color-warning) 22%, var(--terminal-background-color));--terminal-scrollbar-thumb-color: var(--helix-scrollbar-thumb-color);--terminal-selection-background-color: color-mix(in oklab, var(--helix-color-primary) 30%, transparent);display: block}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--terminal-background-color);block-size: var(--terminal-block-size, 24rem);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--terminal-radius, var(--helix-radii-lg));box-sizing: border-box;display: grid;grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;overflow: hidden;position: relative}:host([fill]) [part="region"], :host(:state(fullscreen)) [part="region"] {block-size: 100%}:host([separation="plain"]) [part="region"], :host(:state(fullscreen)) [part="region"] {border: none;border-radius: 0}:host(:fullscreen) {display: block}[part="header"], [part="status"] {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);align-items: center;background-color: var(--terminal-header-background-color, var(--helix-color-surface-raised));box-sizing: border-box;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="header"] {grid-row: header;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));min-block-size: calc(var(--helix-size-control) + var(--helix-space-2xs) * 2)}[part="header"][hidden], [part="status"][hidden] {display: none}[part="label"] {color: var(--helix-color-foreground);display: block;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="actions"] {display: contents}[part="controls"] {flex: 0 0 auto}[part="exit-actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs)}:host(:state(find-open)) [part="find-toggle"], :host(:state(fullscreen)) [part="fullscreen"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="find"] {--find-background-color: var(--terminal-header-background-color, var(--helix-color-surface-raised));--find-border-color: var(--terminal-border-color, var(--helix-color-border));--find-field-background-color: var(--terminal-background-color);grid-row: find}[part="viewport"] {grid-row: viewport;color: var(--terminal-color);font-family: var(--terminal-font-family, var(--helix-font-mono));font-size: var(--terminal-font-size, var(--helix-text-sm));min-block-size: 0;overflow: auto;padding: var(--terminal-padding, var(--helix-space-xs) var(--helix-space-sm));position: relative}[part="viewport"] ::slotted(*) {block-size: 100%;inline-size: 100%}[part="viewport"]::after {background-color: var(--helix-color-foreground);content: "";inset: 0;opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(bell)) [part="viewport"]::after {opacity: 0.08;transition: none}[part="status"] {grid-row: status;border-block-start: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs) var(--helix-space-sm);padding-inline: var(--helix-space-sm)}[part="status"] > span {flex: 1 1 16rem;min-inline-size: 0}[part="restart"] {--button-border-color: var(--terminal-border-color, var(--helix-color-border))}@media (prefers-reduced-motion: reduce) {[part="viewport"]::after {transition: none}}@media print {[part="controls"], [part="find"], [part="restart"], [part="exit-actions"] {display: none}}`);

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

@@ -1,7 +1,9 @@
 import { HelixHeadlessTerminal } from '@fusion.dev/helix-headless/terminal';
 import type { CSSResultGroup } from 'lit';
 import '../../button/index.js';
+import '../../find/index.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import '../../toolbar/index.js';
 /**
  * @summary A frame around a terminal emulator that runs a shell you connect.

package/dist/terminal/root/terminal-root.js

@@ -6,7 +6,9 @@ import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './terminal-root.css.js';
 import '../../button/index.js';
+import '../../find/index.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import '../../toolbar/index.js';
 let HelixTerminal = class HelixTerminal extends HelixHeadlessTerminal {
     constructor() {

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

@@ -23,8 +23,7 @@ import '../../time-picker/index.js';
  * @cssproperty --time-input-background-color - Fill behind the field.
  * @cssproperty --time-input-border-color - Color of the panel's edge.
  * @cssproperty --time-input-border-width - Width of the panel's edge. Defaults to
- *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless
- *   your theme sets a width.
+ *   `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
  * @cssproperty --time-input-segment-focus-background-color - The fill behind the
  *   segment with focus, in `segmented`. It follows `--helix-color-primary-surface`.
  * @cssproperty --time-input-segment-focus-color - The text of the segment with

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

@@ -15,8 +15,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --toast-background-color - The panel's color. Follows `--helix-color-surface-overlay`.
  * @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 stands out by its shadow unless your
- *   theme sets a border.
+ *   `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
  * @cssproperty --toast-color - Color of the message's text.
  * @cssproperty --toast-description-color - Color of the line in the `description` slot, under the heading.
  * @cssproperty --toast-dismiss-color - Color of the dismiss control's mark at rest.

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part~="surface"] {overflow: visible;align-items: center;display: flex;gap: var(--tooltip-gap, var(--helix-space-2xs));background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));border: none;border-radius: var(--tooltip-radius, var(--helix-radii-sm));color: var(--tooltip-color, var(--helix-color-foreground-inverse));font-family: var(--helix-font-sans);font-size: var(--tooltip-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-regular);inline-size: max-content;line-height: var(--helix-leading-tight);margin: var(--helix-space-none);max-inline-size: var(--tooltip-max-inline-size, 16rem);opacity: 0;padding: var(--tooltip-padding, var(--helix-space-2xs) var(--helix-space-xs));position: fixed;scale: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part~="surface"][data-placed] {opacity: 1;scale: 1}[part~="arrow"] {background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));block-size: var(--tooltip-arrow-size, 0.5rem);inline-size: var(--tooltip-arrow-size, 0.5rem);position: absolute;rotate: 45deg}:host([material="glass"]) [part~="surface"], :host([material="glass"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, var(--helix-material-backdrop));background-color: var(--tooltip-background-color, var(--helix-material-translucent))}:host([material="frosted"]) [part~="surface"], :host([material="frosted"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--tooltip-background-color, var(--helix-material-translucent-strong))}:host([material="frosted"]) [part~="surface"], :host([material="glass"]) [part~="surface"] {border: var(--helix-border-thin) solid var(--tooltip-border-color, var(--helix-color-border));color: var(--tooltip-color, var(--helix-color-foreground))}[part~="surface"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%}[part~="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part~="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part~="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part~="surface"]:not(:popover-open) {display: none}@media (prefers-reduced-motion: reduce) {[part~="surface"] {scale: 1;transition: none}[part~="surface"][data-placed] {scale: 1}}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {display: contents}[part~="surface"] {overflow: visible;align-items: center;display: flex;gap: var(--tooltip-gap, var(--helix-space-2xs));background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));border: none;border-radius: var(--tooltip-radius, var(--helix-radii-sm));color: var(--tooltip-color, var(--helix-color-foreground-inverse));font-family: var(--helix-font-sans);font-size: var(--tooltip-font-size, var(--helix-text-xs));font-weight: var(--helix-weight-regular);inline-size: max-content;line-height: var(--helix-leading-tight);margin: var(--helix-space-none);max-inline-size: var(--tooltip-max-inline-size, 16rem);opacity: 0;padding: var(--tooltip-padding, var(--helix-space-2xs) var(--helix-space-xs));position: fixed;scale: 0;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard), scale var(--helix-duration-fast) var(--helix-easing-emphasized), display var(--helix-duration-fast) allow-discrete, overlay var(--helix-duration-fast) allow-discrete}[part~="surface"][data-placed] {opacity: 1;scale: 1}[part~="arrow"] {background-color: var(--tooltip-background-color, var(--helix-color-surface-inverse));block-size: var(--tooltip-arrow-size, 0.5rem);inline-size: var(--tooltip-arrow-size, 0.5rem);position: absolute;rotate: 45deg}:host([material="glass"]) [part~="surface"], :host([material="glass"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, var(--helix-material-backdrop));background-color: var(--tooltip-background-color, var(--helix-material-translucent))}:host([material="frosted"]) [part~="surface"], :host([material="frosted"]) [part~="arrow"] {backdrop-filter: var(--tooltip-backdrop, blur(var(--helix-material-blur-lg)));background-color: var(--tooltip-background-color, var(--helix-material-translucent-strong))}:host([material="frosted"]) [part~="surface"], :host([material="glass"]) [part~="surface"] {border: var(--helix-border-thin) solid var(--tooltip-border-color, var(--helix-color-border));color: var(--tooltip-color, var(--helix-color-foreground))}[part~="surface"][data-placement^="top"] {transform-origin: var(--floating-arrow-x, 50%) 100%}[part~="surface"][data-placement^="bottom"] {transform-origin: var(--floating-arrow-x, 50%) 0}[part~="surface"][data-placement^="left"] {transform-origin: 100% var(--floating-arrow-y, 50%)}[part~="surface"][data-placement^="right"] {transform-origin: 0 var(--floating-arrow-y, 50%)}[part~="surface"]:not(:popover-open) {display: none}@media (prefers-reduced-motion: reduce) {[part~="surface"] {scale: 1;transition: none}[part~="surface"][data-placed] {scale: 1}}@supports not (overlay: auto) {[part~="surface"] {transition-behavior: normal}}@media print {:host {display: none}}`);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: contents}[part="spotlight"] {border-radius: var(--tour-spotlight-radius, var(--helix-radii-md));box-shadow: 0 0 0 100vmax var(--tour-scrim-color, var(--helix-color-overlay));pointer-events: none;position: fixed;transition: left var(--helix-duration-normal) var(--helix-easing-standard), top var(--helix-duration-normal) var(--helix-easing-standard), block-size var(--helix-duration-normal) var(--helix-easing-standard), inline-size var(--helix-duration-normal) var(--helix-easing-standard);z-index: var(--helix-layer-overlay)}[part="backdrop"] {background-color: var(--tour-scrim-color, var(--helix-color-overlay));inset: 0;pointer-events: none;position: fixed;z-index: var(--helix-layer-overlay)}@media print {:host {display: none}}`);
+export const styles = createSheet(`:host {display: contents}[part="spotlight"] {border-radius: var(--tour-spotlight-radius, var(--helix-radii-md));box-shadow: 0 0 0 200vmax var(--tour-scrim-color, var(--helix-color-overlay));pointer-events: none;position: fixed;transition: left var(--helix-duration-normal) var(--helix-easing-standard), top var(--helix-duration-normal) var(--helix-easing-standard), block-size var(--helix-duration-normal) var(--helix-easing-standard), inline-size var(--helix-duration-normal) var(--helix-easing-standard);z-index: var(--helix-layer-overlay)}[part="backdrop"] {background-color: var(--tour-scrim-color, var(--helix-color-overlay));inset: 0;pointer-events: none;position: fixed;z-index: var(--helix-layer-overlay)}@media print {:host {display: none}}`);

package/dist/tour/stop/tour-stop.d.ts

@@ -16,8 +16,7 @@ import '../../button/index.js';
  *
  * @cssproperty --tour-arrow-size - The size of the arrow's box, before it is rotated.
  * @cssproperty --tour-border-width - The width of the panel's border. It follows
- *   `--helix-border-floating`, which is `0`, so the panel stands out by its
- *   shadow unless a theme sets a border.
+ *   `--helix-border-floating`, a hairline, so the panel has an edge as well as its shadow over a dark page. Set it to `0` for the shadow alone.
  * @cssproperty --tour-bubble-size - The widest the panel can grow.
  * @cssproperty --tour-padding - The padding inside the panel.
  * @cssproperty --tour-shadow - The shadow under the panel. It follows

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {--_tree-chevron: var(--tree-chevron-size, var(--helix-size-icon-tight));display: block}[part="item"] {border-radius: var(--helix-radii-sm);outline: none}[part="row"] {align-items: center;background-color: var(--_tree-row-fill, transparent);border-radius: var(--tree-row-radius, var(--helix-radii-sm));color: var(--_tree-row-ink, var(--tree-row-color, var(--helix-color-foreground-muted)));cursor: pointer;display: flex;font-size: var(--_tree-text, var(--helix-text-sm));gap: var(--helix-space-2xs);margin-block-end: var(--tree-gap, var(--helix-space-2xs));block-size: max(var(--tree-row-size, var(--helix-size-control-tight)), calc(1lh + var(--helix-space-xs) * 2));min-block-size: var(--tree-row-size, var(--helix-size-control-tight));padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-xs);padding-inline-start: calc(var(--helix-space-xs) + (var(--tree-level, 1) - 1) * var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);user-select: none}[part="row"]:not(:has([part="toggle"])) {padding-inline-start: calc(var(--helix-space-xs) + (var(--tree-level, 1) - 1) * var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))) + var(--_tree-reserve, calc(var(--_tree-chevron) + var(--helix-space-2xs))))}[part="row"]:has([part="toggle"]) {color: var(--_tree-row-ink, var(--_tree-heading-ink, var(--tree-row-color, var(--helix-color-foreground-muted))));font-size: var(--_tree-heading-text, var(--_tree-text, var(--helix-text-sm)));font-weight: var(--helix-weight-medium);letter-spacing: var(--_tree-heading-tracking, var(--helix-tracking-normal))}[part="row"]:not(:has([part="toggle"])) {font-weight: var(--helix-weight-medium)}slot[name="children"]::slotted(*) {--_tree-text: var(--_tree-nested-text, var(--helix-text-sm))}[part="row"]:hover {background-color: var(--tree-row-hover-background-color, var(--helix-color-surface-raised));color: var(--tree-row-hover-color, var(--helix-color-foreground))}:host(:state(selected)) [part="row"] {background-color: var(--tree-row-selected-background-color, var(--helix-color-surface-sunken));color: var(--tree-row-selected-color, var(--helix-color-foreground))}:host(:state(checked)) [part="row"] {--_tree-row-fill: var(--tree-row-checked-background-color, transparent);--_tree-row-ink: var(--tree-row-checked-color)}[part="item"]:focus-visible [part="row"], [part="row"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}a[part="row"] {text-decoration: none}[part="toggle"] {block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="toggle"] {transform: rotate(90deg)}:host(:state(open)) [part="toggle"] {transform: rotate(0deg)}[part="label"] {align-self: stretch;flex: 1;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="label"] slot::slotted(a) {display: block;overflow: hidden;text-overflow: ellipsis}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {flex: 0 0 auto}slot[name="end"] {align-items: center;display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto;order: 1}slot[name="start"]::slotted(*) {color: var(--helix-color-foreground-subtle)}[part="group"] {display: grid;grid-template-rows: 1fr;transition: grid-template-rows var(--helix-duration-fast) var(--helix-easing-standard), display var(--helix-duration-fast) allow-discrete}[part="group"] > slot {display: block;min-block-size: 0;overflow: hidden}[part="group"][hidden] {display: none;grid-template-rows: 0fr}@starting-style {[part="group"]:not([hidden]) {grid-template-rows: 0fr}}[part="toggle"] {align-self: center;margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0)}slot[name="chevron"]::slotted(*) {align-self: center;block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) slot[name="chevron"]::slotted(*) {transform: rotate(90deg)}:host(:state(open)) slot[name="chevron"]::slotted(*) {transform: rotate(0deg)}[part~="checkbox"] {align-self: center;background-color: var(--tree-checkbox-background-color, var(--helix-color-background));block-size: var(--tree-checkbox-size, var(--_tree-chevron));border: var(--helix-border-thin) solid var(--tree-checkbox-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);color: var(--tree-checkbox-mark-color, var(--helix-color-foreground));display: grid;flex: 0 0 auto;inline-size: var(--tree-checkbox-size, var(--_tree-chevron));place-items: center}[part~="checkbox-checked"], [part~="checkbox-mixed"] {border-color: var(--tree-checkbox-border-color, var(--helix-color-foreground))}[part~="checkbox"] svg {block-size: 80%;inline-size: 80%}[part="grip"] {align-items: center;color: var(--tree-grip-color, var(--helix-color-foreground-subtle));cursor: grab;display: inline-flex;flex: 0 0 auto;order: 3;touch-action: none}[part="grip"]:active {cursor: grabbing}[part="grip-mark"] {block-size: var(--_tree-chevron);inline-size: var(--_tree-chevron)}:host(:state(dragging)) [part="item"] {opacity: var(--tree-dragging-opacity, 0.5)}:host(:state(drop-before)) [part="item"], :host(:state(drop-after)) [part="item"] {position: relative}:host(:state(drop-before)) [part="item"]::before, :host(:state(drop-after)) [part="item"]::after {background-color: var(--tree-drop-indicator-color, var(--helix-color-primary));block-size: var(--tree-drop-indicator-size, var(--helix-border-thick));content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1}:host(:state(drop-before)) [part="item"]::before {inset-block-start: 0}:host(:state(drop-after)) [part="item"]::after {inset-block-end: 0}:host([disabled]) [part="row"] {cursor: not-allowed;opacity: var(--tree-row-disabled-opacity, 0.5)}:host([disabled]) [part="row"]:hover {background-color: transparent;color: var(--tree-row-color, var(--helix-color-foreground-muted))}:host(:state(loading)) [part="toggle"], :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: tree-loading var(--helix-duration-slow) var(--helix-easing-standard) infinite alternate}@keyframes tree-loading {to {opacity: 0.3}}@media (prefers-reduced-motion: reduce) {:host(:state(loading)) [part="toggle"], :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: none}}`);
+export const styles = createSheet(`:host {--_tree-chevron: var(--tree-chevron-size, var(--helix-size-icon-tight));--_tree-pad: calc((var(--helix-size-control-tight) - 1rem) / 2);display: block}[part="item"] {border-radius: var(--helix-radii-sm);outline: none}[part="row"] {align-items: center;background-color: var(--_tree-row-fill, transparent);border-radius: var(--tree-row-radius, var(--helix-radii-sm));color: var(--_tree-row-ink, var(--tree-row-color, var(--helix-color-foreground-muted)));cursor: pointer;display: flex;font-size: var(--_tree-text, var(--helix-text-control));gap: var(--helix-space-2xs);margin-block-end: var(--tree-gap, var(--helix-space-2xs));block-size: max(var(--tree-row-size, var(--helix-size-control-tight)), calc(1lh + var(--_tree-pad) * 2));min-block-size: var(--tree-row-size, var(--helix-size-control-tight));padding-block: var(--_tree-pad);padding-inline: var(--helix-space-xs);padding-inline-start: calc(var(--helix-space-xs) + (var(--tree-level, 1) - 1) * var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);user-select: none}[part="row"]:not(:has([part="toggle"])) {padding-inline-start: calc(var(--helix-space-xs) + (var(--tree-level, 1) - 1) * var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))) + var(--_tree-reserve, calc(var(--_tree-chevron) + var(--helix-space-2xs))))}[part="row"]:has([part="toggle"]) {color: var(--_tree-row-ink, var(--_tree-heading-ink, var(--tree-row-color, var(--helix-color-foreground-muted))));font-size: var(--_tree-heading-text, var(--_tree-text, var(--helix-text-control)));font-weight: var(--helix-weight-medium);letter-spacing: var(--_tree-heading-tracking, var(--helix-tracking-normal))}[part="row"]:not(:has([part="toggle"])) {font-weight: var(--helix-weight-medium)}slot[name="children"]::slotted(*) {--_tree-text: var(--_tree-nested-text, var(--helix-text-control))}[part="row"]:hover {background-color: var(--tree-row-hover-background-color, var(--helix-color-surface-raised));color: var(--tree-row-hover-color, var(--helix-color-foreground))}:host(:state(selected)) [part="row"] {background-color: var(--tree-row-selected-background-color, var(--helix-color-surface-sunken));color: var(--tree-row-selected-color, var(--helix-color-foreground))}:host(:state(checked)) [part="row"] {--_tree-row-fill: var(--tree-row-checked-background-color, transparent);--_tree-row-ink: var(--tree-row-checked-color)}[part="item"]:focus-visible [part="row"], [part="row"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}a[part="row"] {text-decoration: none}[part="toggle"] {block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="toggle"] {transform: rotate(90deg)}:host(:state(open)) [part="toggle"] {transform: rotate(0deg)}[part="label"] {align-self: stretch;flex: 1;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="row"]:has([part="toggle"]) [part="label"] {flex: var(--_tree-label-flex, 1)}[part="label"] slot::slotted(a) {display: block;overflow: hidden;text-overflow: ellipsis}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {flex: 0 0 auto}slot[name="end"] {align-items: center;display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto;order: 1}slot[name="start"]::slotted(*) {color: var(--helix-color-foreground-subtle)}[part="group"] {display: grid;grid-template-rows: 1fr;transition: grid-template-rows var(--helix-duration-fast) var(--helix-easing-standard), content-visibility var(--helix-duration-fast) allow-discrete}[part="group"] > slot {display: block;min-block-size: 0;overflow: hidden}[part="group"][hidden] {grid-template-rows: 0fr}@starting-style {[part="group"]:not([hidden]) {grid-template-rows: 0fr}}[part="toggle"] {align-self: center;margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0)}slot[name="chevron"]::slotted(*) {align-self: center;block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) slot[name="chevron"]::slotted(*) {transform: rotate(90deg)}:host(:state(open)) slot[name="chevron"]::slotted(*) {transform: rotate(0deg)}[part~="checkbox"] {align-self: center;background-color: var(--tree-checkbox-background-color, var(--helix-color-background));block-size: var(--tree-checkbox-size, var(--_tree-chevron));border: var(--helix-border-thin) solid var(--tree-checkbox-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);color: var(--tree-checkbox-mark-color, var(--helix-color-foreground));display: grid;flex: 0 0 auto;inline-size: var(--tree-checkbox-size, var(--_tree-chevron));place-items: center}[part~="checkbox-checked"], [part~="checkbox-mixed"] {border-color: var(--tree-checkbox-border-color, var(--helix-color-foreground))}[part~="checkbox"] svg {block-size: 80%;inline-size: 80%}[part="grip"] {align-items: center;color: var(--tree-grip-color, var(--helix-color-foreground-subtle));cursor: grab;display: inline-flex;flex: 0 0 auto;order: 3;touch-action: none}[part="grip"]:active {cursor: grabbing}[part="grip-mark"] {block-size: var(--_tree-chevron);inline-size: var(--_tree-chevron)}:host(:state(dragging)) [part="item"] {opacity: var(--tree-dragging-opacity, 0.5)}:host(:state(drop-before)) [part="item"], :host(:state(drop-after)) [part="item"] {position: relative}:host(:state(drop-before)) [part="item"]::before, :host(:state(drop-after)) [part="item"]::after {background-color: var(--tree-drop-indicator-color, var(--helix-color-primary));block-size: var(--tree-drop-indicator-size, var(--helix-border-thick));content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1}:host(:state(drop-before)) [part="item"]::before {inset-block-start: 0}:host(:state(drop-after)) [part="item"]::after {inset-block-end: 0}:host([disabled]) [part="row"] {cursor: not-allowed;opacity: var(--tree-row-disabled-opacity, 0.5)}:host([disabled]) [part="row"]:hover {background-color: transparent;color: var(--tree-row-color, var(--helix-color-foreground-muted))}:host(:state(loading)) [part="toggle"], :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: tree-loading var(--helix-duration-slow) var(--helix-easing-standard) infinite alternate}@keyframes tree-loading {to {opacity: 0.3}}@media (prefers-reduced-motion: reduce) {:host(:state(loading)) [part="toggle"], :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: none}}`);

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

@@ -1,2 +1,2 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {display: block}[part="tree"] {display: flex;flex-direction: column}:host {--tree-chevron-order: 0}:host([chevron-placement="end"]) {--tree-chevron-order: 2;--tree-chevron-gap: var(--helix-space-none);--_tree-reserve: var(--helix-space-none)}:host([nesting="subordinate"]) {--_tree-nested-text: var(--helix-text-xs)}:host([nesting="heading"]) {--_tree-heading-ink: var(--helix-color-foreground-muted);--_tree-heading-text: var(--helix-text-xs);--_tree-heading-tracking: var(--helix-tracking-wide)}:host([loading]) [part="tree"] {opacity: 0.5}[part="drag-preview"] {background-color: var(--tree-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--tree-drag-preview-border-width, var(--helix-border-floating)) solid var(--tree-drag-preview-border-color, var(--helix-color-border));border-radius: var(--tree-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--tree-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--tree-drag-preview-opacity, 0.9)}@media print {:host {print-color-adjust: economy}}`);
+export const styles = createSheet(`:host {display: block}[part="tree"] {display: flex;flex-direction: column}:host {--tree-chevron-order: 0}:host([chevron-placement="end"]) {--tree-chevron-order: 2;--tree-chevron-gap: var(--helix-space-none);--_tree-reserve: var(--helix-space-none)}:host([nesting="subordinate"]) {--_tree-nested-text: var(--helix-text-xs)}:host([nesting="heading"]) {--_tree-heading-ink: var(--helix-color-foreground-muted);--_tree-heading-text: var(--helix-text-xs);--_tree-heading-tracking: var(--helix-tracking-wide)}:host([loading]) [part="tree"] {opacity: 0.5}[part="drag-preview"] {background-color: var(--tree-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--tree-drag-preview-border-width, var(--helix-border-floating)) solid var(--tree-drag-preview-border-color, var(--helix-color-border));border-radius: var(--tree-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--tree-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--tree-drag-preview-opacity, 0.9)}@media print {:host {print-color-adjust: economy}}:host([chevron-placement="label"]) {--tree-chevron-order: 1;--tree-chevron-gap: var(--helix-space-none);--_tree-label-flex: 0 1 auto;--_tree-reserve: var(--helix-space-none)}`);

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

@@ -52,13 +52,17 @@ export declare class HelixTree extends HelixHeadlessTree {
      * the same fault `href` and `target` had on `Button`. The resting arrangement
      * is the absence of the attribute, and the stylesheet only asks about `end`.
      *
+     * `label` sets the chevron against the end of a branch's name, where the name
+     * takes only its own width, and leaves the `end` slot at the row's far side.
+     * A leaf is unchanged, since it has no chevron.
+     *
      * It is worth owning rather than leaving to `::part(toggle)`, which a
      * consumer could reach for: the naive version is `order` plus an auto margin,
      * and the row's `end` slot already carries an auto margin of its own, so the
      * two split the free space and the chevron lands halfway along. Measured at
      * 70px short. That is the kind of thing a component should absorb once.
      */
-    chevronPlacement?: 'start' | 'end';
+    chevronPlacement?: 'start' | 'end' | 'label';
     static styles: CSSResultGroup;
 }
 declare global {