@fusion.dev/helix 0.145.0 → 0.147.0

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

@@ -1,241 +1,25 @@
 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;
-border-radius: var(--helix-radii-sm);
-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(
+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(
+);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(
+);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-heading-ink, 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(--helix-color-surface-raised);
-color: var(--helix-color-foreground);
-}
-
-:host(:state(selected)) [part="row"] {
-background-color: var(--helix-color-surface-sunken);
-color: var(--helix-color-foreground);
-}
-
-[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:
+);}[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%;
-}
-
-:host([disabled]) [part="row"] {
-cursor: not-allowed;
-opacity: 0.5;
-}
-
-:host([disabled]) [part="row"]:hover {
-background-color: transparent;
-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;
-}
-}`);
+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%;}: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/item/tree-item.d.ts

@@ -39,6 +39,15 @@ import type { CSSResultGroup } from 'lit';
  * @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-checked-background-color - Fill of a checked row, in a tree with `selection-mode="multiple"`. Unset, the box alone marks it.
+ * @cssproperty --tree-row-checked-color - Text color of a checked row, in a tree with `selection-mode="multiple"`.
+ * @cssproperty --tree-row-color - Text color of a row at rest.
+ * @cssproperty --tree-row-disabled-opacity - How faint a disabled row is drawn.
+ * @cssproperty --tree-row-hover-background-color - Fill of a row under the pointer.
+ * @cssproperty --tree-row-hover-color - Text color of a row under the pointer.
+ * @cssproperty --tree-row-radius - Corners of a row's fill.
+ * @cssproperty --tree-row-selected-background-color - Fill of the chosen row, in a tree of one choice.
+ * @cssproperty --tree-row-selected-color - Text color of the chosen row, in a tree of one choice.
  * @cssproperty --tree-row-size - Minimum height of a row, so rows with and without an icon match.
  */
 export declare class HelixTreeItem extends HelixHeadlessTreeItem {

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

@@ -1,41 +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-subtle);
---_tree-heading-text: var(--helix-text-xs);
---_tree-heading-tracking: var(--helix-tracking-wide);
-}
-
-:host([loading]) [part="tree"] {
-opacity: 0.5;
-}
-
-@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-subtle);--_tree-heading-text: var(--helix-text-xs);--_tree-heading-tracking: var(--helix-tracking-wide);}:host([loading]) [part="tree"] {opacity: 0.5;}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -1,56 +1,6 @@
 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(--trend-gap, var(--helix-space-2xs));
-line-height: var(--helix-leading-tight);
-}
-
-:host {
-
---_trend-color: var(--trend-neutral-color, var(--helix-color-foreground-muted));
-color: var(--trend-color, var(--_trend-color));
-}
-
-[part="icon"] {
---icon-size: var(--trend-icon-size, 1em);
-}
-
-slot[name="icon"]::slotted(*) {
---icon-size: var(--trend-icon-size, 1em);
-
-block-size: var(--trend-icon-size, 1em);
-inline-size: var(--trend-icon-size, 1em);
-}
-
-:host([direction="up"][good="up"]),
-:host([direction="down"][good="down"]) {
---_trend-color: var(--trend-better-color, var(--helix-color-success));
-}
-
-:host([direction="up"][good="down"]),
-:host([direction="down"][good="up"]) {
---_trend-color: var(--trend-worse-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(--trend-label-color, var(--helix-color-foreground-muted));
-font-weight: var(--helix-weight-regular);
-}
-
-@media print {
-:host {
-print-color-adjust: economy;
-}
-}`);
+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(--trend-gap, var(--helix-space-2xs));line-height: var(--helix-leading-tight);}:host {--_trend-color: var(--trend-neutral-color, var(--helix-color-foreground-muted));color: var(--trend-color, var(--_trend-color));}[part="icon"] {--icon-size: var(--trend-icon-size, 1em);}slot[name$="icon"]::slotted(*) {--icon-size: var(--trend-icon-size, 1em);block-size: var(--trend-icon-size, 1em);inline-size: var(--trend-icon-size, 1em);}:host(:state(better)),
+:host(:not(:defined)[good="up"][movement="up"]),
+:host(:not(:defined)[good="down"][movement="down"]) {--_trend-color: var(--trend-better-color, var(--helix-color-success));}:host(:state(worse)),
+:host(:not(:defined)[good="up"][movement="down"]),
+:host(:not(:defined)[good="down"][movement="up"]) {--_trend-color: var(--trend-worse-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(--trend-label-color, var(--helix-color-foreground-muted));font-weight: var(--helix-weight-regular);}@media print {:host {print-color-adjust: economy;}}`);

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

@@ -13,7 +13,7 @@ import type { CSSResultGroup } from 'lit';
  * no surface for material, and no area for a wash. The text weight comes from
  * `Text` and the size from the region.
  *
- * The meaning axis is derived: `direction` and `good` resolve to success,
+ * The meaning axis is derived: `movement` and `good` resolve to success,
  * danger, or muted, so you state the metric's polarity once. There is no
  * `tone`, because a declared tone could disagree with the arrow.
  *
@@ -27,7 +27,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --trend-better-color - Color of a move that `good` says is an improvement.
  * @cssproperty --trend-color - Color of the arrow. Setting it overrides the color that `good` sets.
  * @cssproperty --trend-gap - Space between the arrow, the metric and the label.
- * @cssproperty --trend-icon-size - Size of the arrow, or of a glyph in the `icon` slot.
+ * @cssproperty --trend-icon-size - Size of the arrow, or of a glyph in one of the icon slots.
  * @cssproperty --trend-label-color - Color of the label.
  * @cssproperty --trend-neutral-color - Color of a trend that `good` does not judge, or one that did not move.
  * @cssproperty --trend-worse-color - Color of a move that `good` says is a setback.