@fusion.dev/helix 0.218.0 → 0.219.0

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), 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}}`);

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 {