@fusion.dev/helix 0.30.2 → 0.32.0

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

@@ -126,6 +126,18 @@ transform: translate(0, 0);
 flex: 0 0 auto;
 }
 
+::slotted([slot="header"]) {
+color: var(--helix-color-foreground);
+display: block;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-lg);
+font-weight: var(--helix-weight-semibold);
+letter-spacing: var(--helix-tracking-tight);
+line-height: var(--helix-leading-tight);
+margin: var(--helix-space-none);
+margin-block-end: var(--helix-space-md);
+}
+
 [part="content"] {
 flex: 1 1 auto;
 min-block-size: 0;

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

@@ -27,6 +27,17 @@ text-overflow: ellipsis;
 white-space: nowrap;
 }
 
+[part="mark"] {
+block-size: var(--helix-size-icon-tight);
+color: var(--helix-color-foreground-subtle);
+flex: none;
+inline-size: var(--helix-size-icon-tight);
+}
+
+:host(:dir(rtl)) [part="mark"] {
+scale: -1 1;
+}
+
 :host(:not([disabled])) [part="item"]:hover {
 background-color: var(
 --drilldown-item-hover-color,

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

@@ -69,9 +69,9 @@ position: absolute;
 }
 
 [part="tooltip-label"] {
-color: var(--helix-color-foreground-muted);
 display: block;
 font-weight: var(--helix-weight-medium);
+opacity: 0.72;
 }
 
 [part="tooltip-cell"] {
@@ -82,7 +82,7 @@ justify-content: space-between;
 }
 
 [part="tooltip-name"] {
-color: var(--helix-color-foreground-muted);
+opacity: 0.72;
 }
 
 [part="tooltip-value"] {

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

@@ -33,6 +33,7 @@ import '../../tooltip/index.js';
  * @csspart strip - The grid of cells.
  * @csspart tooltip - The bubble, forwarded from `Tooltip`.
  * @csspart tooltip-anchor - The `Tooltip` element itself.
+ * @csspart tooltip-arrow - The bubble's point, forwarded from `Tooltip`.
  * @csspart tooltip-cell - One column's name and value inside the tooltip.
  * @csspart tooltip-label - The reading's own name inside the tooltip.
  * @csspart tooltip-name - A column's name inside the tooltip.

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

@@ -42,7 +42,7 @@ background-color: transparent;
 }
 
 [part="clear"],
-[part="reveal"] {
+[part~="reveal"] {
 --icon-size: var(--helix-size-icon-tight);
 all: unset;
 
@@ -60,17 +60,17 @@ transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="clear"]:hover,
-[part="reveal"]:hover {
+[part~="reveal"]:hover {
 color: var(--helix-color-foreground);
 }
 
 [part="clear"]:focus-visible,
-[part="reveal"]:focus-visible {
+[part~="reveal"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
-[part="reveal"][aria-pressed="true"] {
+[part~="reveal"][aria-pressed="true"] {
 color: var(--helix-color-foreground);
 }
 

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

@@ -30,7 +30,7 @@ overflow: hidden;
 position: relative;
 }
 
-[part="indicator"] {
+[part~="indicator"] {
 --_meter-hue: var(--meter-color, var(--helix-color-primary));
 background-color: var(--_meter-hue);
 block-size: 100%;
@@ -43,31 +43,31 @@ background-color var(--helix-duration-normal) var(--helix-easing-standard),
 scale var(--helix-duration-normal) var(--helix-easing-decelerate);
 }
 
-:host(:dir(rtl)) [part="indicator"] {
+:host(:dir(rtl)) [part~="indicator"] {
 transform-origin: right center;
 }
 
-[part="indicator"][data-band="good"] {
+[part~="indicator"][data-band="good"] {
 --_meter-hue: var(--meter-color, var(--helix-color-success));
 background-color: var(--_meter-hue);
 }
 
-[part="indicator"][data-band="fair"] {
+[part~="indicator"][data-band="fair"] {
 --_meter-hue: var(--meter-color, var(--helix-color-warning));
 background-color: var(--_meter-hue);
 }
 
-[part="indicator"][data-band="poor"] {
+[part~="indicator"][data-band="poor"] {
 --_meter-hue: var(--meter-color, var(--helix-color-danger));
 background-color: var(--_meter-hue);
 }
 
-[part="indicator"][data-beyond="over"] {
+[part~="indicator"][data-beyond="over"] {
 border-end-end-radius: var(--helix-radii-none);
 border-start-end-radius: var(--helix-radii-none);
 }
 
-[part="indicator"][data-beyond="under"] {
+[part~="indicator"][data-beyond="under"] {
 border-end-start-radius: var(--helix-radii-none);
 border-start-start-radius: var(--helix-radii-none);
 }
@@ -110,10 +110,10 @@ rotate: 135deg;
 }
 
 :host([shape="arc"]) [part="groove"],
-:host([shape="arc"]) [part="indicator"],
+:host([shape="arc"]) [part~="indicator"],
 :host([shape="arc"]) [part="tick"],
 :host([shape="ring"]) [part="groove"],
-:host([shape="ring"]) [part="indicator"],
+:host([shape="ring"]) [part~="indicator"],
 :host([shape="ring"]) [part="tick"] {
 cx: 50%;
 cy: 50%;
@@ -128,8 +128,8 @@ stroke: var(--meter-track-color, var(--helix-color-surface-sunken));
 stroke-dasharray: var(--meter-sweep) 100;
 }
 
-:host([shape="arc"]) [part="indicator"],
-:host([shape="ring"]) [part="indicator"] {
+:host([shape="arc"]) [part~="indicator"],
+:host([shape="ring"]) [part~="indicator"] {
 
 --_meter-hue: var(--helix-color-foreground-muted);
 scale: none;
@@ -149,20 +149,20 @@ stroke-dasharray: 1 99;
 stroke-dashoffset: calc(var(--meter-along) * -1);
 }
 
-:host([shape="arc"]) [part="indicator"][data-band="good"],
-:host([shape="ring"]) [part="indicator"][data-band="good"] {
+:host([shape="arc"]) [part~="indicator"][data-band="good"],
+:host([shape="ring"]) [part~="indicator"][data-band="good"] {
 --_meter-hue: var(--helix-color-success);
 stroke: var(--_meter-hue);
 }
 
-:host([shape="arc"]) [part="indicator"][data-band="fair"],
-:host([shape="ring"]) [part="indicator"][data-band="fair"] {
+:host([shape="arc"]) [part~="indicator"][data-band="fair"],
+:host([shape="ring"]) [part~="indicator"][data-band="fair"] {
 --_meter-hue: var(--helix-color-warning);
 stroke: var(--_meter-hue);
 }
 
-:host([shape="arc"]) [part="indicator"][data-band="poor"],
-:host([shape="ring"]) [part="indicator"][data-band="poor"] {
+:host([shape="arc"]) [part~="indicator"][data-band="poor"],
+:host([shape="ring"]) [part~="indicator"][data-band="poor"] {
 --_meter-hue: var(--helix-color-danger);
 stroke: var(--_meter-hue);
 }
@@ -178,7 +178,7 @@ print-color-adjust: exact;
 }
 }
 
-:host([emphasis="subtle"]) [part="indicator"] {
+:host([emphasis="subtle"]) [part~="indicator"] {
 background-color: color-mix(
 in oklab,
 var(--_meter-hue) 30%,
@@ -186,8 +186,8 @@ var(--meter-track-color, var(--helix-color-surface-sunken))
 );
 }
 
-:host([emphasis="subtle"][shape="arc"]) [part="indicator"],
-:host([emphasis="subtle"][shape="ring"]) [part="indicator"] {
+:host([emphasis="subtle"][shape="arc"]) [part~="indicator"],
+:host([emphasis="subtle"][shape="ring"]) [part~="indicator"] {
 stroke: color-mix(
 in oklab,
 var(--_meter-hue) 30%,

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

@@ -39,6 +39,11 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://helix.fusion.dev/components/meter
  *
  * @csspart indicator - The part of it the value fills.
+ * @csspart indicator-fair - The fill while the reading is in a band beside the good one, beside `indicator`.
+ * @csspart indicator-good - The fill while the reading is in the good band, beside `indicator`.
+ * @csspart indicator-over - The fill while the value is past the top, beside `indicator`.
+ * @csspart indicator-poor - The fill while the reading is two bands from the good one, beside `indicator`.
+ * @csspart indicator-under - The fill while the value is below the floor, beside `indicator`.
  * @csspart tick - A mark at `low` or at `high`.
  * @csspart track - The whole range.
  * @csspart value - The reading, under `show-value`.

package/dist/object-inspector/root/object-inspector-root.css.js

@@ -57,7 +57,7 @@ overscroll-behavior: contain;
 outline: none;
 }
 
-[part="row"] {
+[part~="row"] {
 cursor: default;
 overflow: hidden;
 padding-inline-end: var(--helix-space-2xl);
@@ -72,7 +72,7 @@ text-overflow: ellipsis;
 white-space: nowrap;
 }
 
-[part="row"][aria-expanded] {
+[part~="row"][aria-expanded] {
 cursor: pointer;
 padding-inline-start: calc(
 var(--object-inspector-level) *
@@ -81,11 +81,11 @@ var(--helix-space-sm)
 );
 }
 
-[part="tree"]:focus [part="row"][data-active] {
+[part="tree"]:focus [part~="row"][data-active] {
 background-color: var(--helix-color-surface-sunken);
 }
 
-[part="tree"]:focus-visible [part="row"][data-active] {
+[part="tree"]:focus-visible [part~="row"][data-active] {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);
 }
@@ -98,7 +98,7 @@ margin-inline-end: var(--helix-space-2xs);
 vertical-align: -0.125em;
 }
 
-:host(:dir(rtl)) [part="row"][aria-expanded="false"] > [part="toggle"] {
+:host(:dir(rtl)) [part~="row"][aria-expanded="false"] > [part="toggle"] {
 scale: -1 1;
 }
 

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

@@ -9,7 +9,7 @@ display: block;
 display: none;
 }
 
-[part="item"] {
+[part~="item"] {
 align-items: center;
 
 border-radius: var(--option-radius, var(--helix-radii-sm));
@@ -54,7 +54,7 @@ text-overflow: ellipsis;
 white-space: nowrap;
 }
 
-:host(:state(selected)) [part="item"]::after {
+:host(:state(selected)) [part~="item"]::after {
 content: "";
 background-color: currentColor;
 block-size: var(--helix-size-icon-tight);
@@ -67,8 +67,8 @@ mask-repeat: no-repeat;
 mask-size: contain;
 }
 
-:host([data-active]) [part="item"],
-:host(:not([disabled])) [part="item"]:hover {
+:host([data-active]) [part~="item"],
+:host(:not([disabled])) [part~="item"]:hover {
 
 background-color: var(
 --option-active-color,
@@ -79,7 +79,7 @@ color-mix(in oklab, var(--helix-color-foreground) 12%, transparent)
 );
 }
 
-:host([disabled]) [part="item"] {
+:host([disabled]) [part~="item"] {
 cursor: default;
 opacity: 0.5;
 }

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

@@ -121,7 +121,7 @@ export declare class HelixOrb extends HelixElement {
     private last;
     protected willUpdate(changed: PropertyValues): void;
     protected render(): TemplateResult;
-    protected firstUpdated(): void;
+    protected firstUpdated(changed: PropertyValues): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private start;

package/dist/orb/root/orb-root.js

@@ -86,7 +86,8 @@ let HelixOrb = class HelixOrb extends HelixElement {
     render() {
         return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
     }
-    firstUpdated() {
+    firstUpdated(changed) {
+        super.firstUpdated(changed);
         this.start();
     }
     connectedCallback() {

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

@@ -25,7 +25,7 @@ display: inline-flex;
 [part="first"],
 [part="gap"],
 [part="last"],
-[part="page"],
+[part~="page"],
 [part="previous"],
 [part="next"] {
 align-items: center;
@@ -52,7 +52,7 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 [part="first"]:hover,
 [part="gap"]:hover,
 [part="last"]:hover,
-[part="page"]:hover,
+[part~="page"]:hover,
 [part="previous"]:hover,
 [part="next"]:hover {
 background-color: var(--pagination-hover-color, var(--helix-color-surface-sunken));
@@ -62,15 +62,15 @@ color: var(--helix-color-foreground);
 [part="first"]:focus-visible,
 [part="gap"]:focus-visible,
 [part="last"]:focus-visible,
-[part="page"]:focus-visible,
+[part~="page"]:focus-visible,
 [part="previous"]:focus-visible,
 [part="next"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
-[part="page"][aria-current="page"],
-[part="page"][aria-current="page"]:hover {
+[part~="page"][aria-current="page"],
+[part~="page"][aria-current="page"]:hover {
 background-color: var(--pagination-current-color, var(--helix-color-surface-raised));
 border-color: var(--helix-color-border);
 color: var(--helix-color-foreground);

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

@@ -41,6 +41,7 @@ import type { CSSResultGroup } from 'lit';
  * @csspart list - The run of pages.
  * @csspart next - The control that moves forward one page.
  * @csspart page - The control for one page.
+ * @csspart page-current - The page you are on, beside `page`.
  * @csspart previous - The control that moves back one page.
  * @csspart status - The reading of where you are, in `compact`.
  *

package/dist/pagination/size/pagination-size.d.ts

@@ -10,8 +10,9 @@ import '../../select/index.js';
  * stands in a column of fields; this one stands in a footer beside a run of page
  * numbers, where a two-line control makes the whole row two lines tall.
  *
- * `Select`'s own parts are exported, so `::part(trigger)` and `::part(label)`
- * reach through both boundaries and a consumer styles it as the select it is.
+ * `Select`'s own parts are exported under `control-`, so `::part(control-trigger)` and
+ * `::part(control-label)` reach through both boundaries and a consumer styles it
+ * as the select it is.
  *
  * @since 0.1.0
  * @status experimental

package/dist/scatter-chart/root/scatter-chart-root.css.js

@@ -4,13 +4,13 @@ column-gap: var(--helix-space-xs);
 container-type: inline-size;
 display: grid;
 grid-template-areas:
-"y-name ."
+"y-name y-name"
 "y-axis plot"
 ". x-axis"
 ". x-name";
 grid-template-columns: auto minmax(0, 1fr);
 position: relative;
-row-gap: var(--scatter-chart-gap, var(--helix-space-2xs));
+row-gap: var(--scatter-chart-gap, var(--helix-space-xs));
 }
 
 [part="plot"] {
@@ -32,7 +32,7 @@ stroke-width: var(--helix-border-thin);
 vector-effect: non-scaling-stroke;
 }
 
-[part="point"] {
+[part~="point"] {
 background-color: var(--chart-series);
 block-size: var(--scatter-chart-point-size, 8px);
 border-radius: var(--helix-radii-full);
@@ -51,7 +51,7 @@ scale var(--helix-duration-fast) var(--helix-easing-decelerate);
 translate: -50% -50%;
 }
 
-[part="point"][data-active] {
+[part~="point"][data-active] {
 opacity: 1;
 scale: 1.5;
 }
@@ -126,7 +126,7 @@ white-space: nowrap;
 }
 
 @starting-style {
-[part="point"] {
+[part~="point"] {
 opacity: 0;
 }
 }

package/dist/stat/group/stat-group.css.js

@@ -1,11 +1,18 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
+--_stat-group-gap: var(--stat-group-gap, var(--helix-space-2xl));
 display: flex;
 flex-wrap: wrap;
-gap: var(--stat-group-gap, var(--helix-space-2xl));
+gap: var(--_stat-group-gap);
 }
 
-:host([divided]) ::slotted(*:not(:first-child)) {
+:host([divided]) {
+column-gap: calc(var(--_stat-group-gap) * 2);
+overflow-x: clip;
+}
+
+:host([divided]) ::slotted(*) {
 border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
-padding-inline-start: var(--stat-group-gap, var(--helix-space-2xl));
+margin-inline-start: calc(var(--_stat-group-gap) * -1 - var(--helix-border-thin));
+padding-inline-start: var(--_stat-group-gap);
 }`);

package/dist/table/column/table-column.css.js

@@ -5,22 +5,30 @@ display: contents;
 
 [part="column"] {
 align-items: center;
-border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+border-block-end: var(--helix-border-thin) solid
+var(--_table-heading-rule-color, var(--helix-color-border));
 box-sizing: border-box;
 
-color: var(--helix-color-foreground-muted);
+color: var(--_table-heading-color, var(--helix-color-foreground-muted));
 display: flex;
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
+font-size: var(--_table-heading-text, var(--helix-text-sm));
 font-weight: var(--helix-weight-semibold);
 
 min-block-size: var(--helix-size-control-loose);
 min-inline-size: 0;
-padding-inline-end: var(--helix-space-md);
+padding-block: var(--_table-heading-padding-block, var(--helix-space-none));
+padding-inline: var(
+--_table-heading-padding-inline,
+var(--helix-space-none) var(--helix-space-md)
+);
 }
 
 [part="column"] {
-position: relative;
+background-color: var(--_table-heading-background-color, transparent);
+inset-block-start: 0;
+position: var(--_table-heading-position, relative);
+z-index: var(--_table-heading-layer, auto);
 }
 
 [part="sort"] {
@@ -34,6 +42,16 @@ gap: var(--helix-space-2xs);
 min-inline-size: 0;
 }
 
+:host([align="center"]) [part="column"],
+:host([align="center"]) [part="sort"] {
+justify-content: center;
+}
+
+:host([align="end"]) [part="column"],
+:host([align="end"]) [part="sort"] {
+justify-content: flex-end;
+}
+
 [part="sort"]:focus-visible,
 [part="grip"]:focus-visible,
 [part="resizer"]:focus-visible {

package/dist/time-picker/root/time-picker-root.css.js

@@ -4,7 +4,10 @@ display: block;
 }
 
 [part="list"] {
---listbox-max-block-size: var(--time-picker-list-block-size, 16rem);
+--listbox-max-block-size: var(
+--time-picker-list-block-size,
+calc(var(--helix-size-control-tight) * 7)
+);
 
 display: block;
 }
@@ -16,13 +19,13 @@ border-radius: var(--helix-radii-none);
 padding-block: var(--helix-space-none);
 }
 
-:host([mode="range"]) [part="option"]:state(selected)::part(item) {
+:host([mode="range"]) [part~="option"]:state(selected)::part(item) {
 
 background-color: var(--helix-color-surface-inverse);
 color: var(--helix-color-foreground-inverse);
 }
 
-[part="option"][data-between]::part(item) {
+[part~="option"][data-between]::part(item) {
 background-color: var(
 --time-picker-range-color,
 light-dark(
@@ -32,7 +35,7 @@ color-mix(in oklab, var(--helix-color-foreground) 14%, transparent)
 );
 }
 
-[part="option"][data-between]::part(item)::after {
+[part~="option"][data-between]::part(item)::after {
 content: "";
 background-color: currentColor;
 block-size: var(--helix-size-icon-tight);
@@ -69,19 +72,19 @@ scroll-snap-type: y mandatory;
 scrollbar-width: none;
 }
 
-[part="column"] [part="option"] {
+[part="column"] [part~="option"] {
 scroll-snap-align: center;
 }
 
-[part="column"] [part="option"]::part(item) {
+[part="column"] [part~="option"]::part(item) {
 justify-content: center;
 }
 
-[part="column"] [part="option"]::part(label) {
+[part="column"] [part~="option"]::part(label) {
 text-align: center;
 }
 
-[part="column"] [part="option"]::part(item) {
+[part="column"] [part~="option"]::part(item) {
 min-block-size: var(--_time-row);
 min-inline-size: var(--_time-row);
 
@@ -89,11 +92,11 @@ padding-block: var(--helix-space-none);
 padding-inline: var(--helix-space-sm);
 }
 
-[part="column"] [part="option"]::part(item) {
+[part="column"] [part~="option"]::part(item) {
 background-color: transparent;
 }
 
-[part="column"] [part="option"]::part(label) {
+[part="column"] [part~="option"]::part(label) {
 align-items: center;
 block-size: var(--_time-row);
 
@@ -105,22 +108,22 @@ padding-inline: var(--helix-space-2xs);
 transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="column"] [part="option"]:not([disabled]):hover::part(label),
-[part="column"] [part="option"][data-active]::part(label) {
+[part="column"] [part~="option"]:not([disabled]):hover::part(label),
+[part="column"] [part~="option"][data-active]::part(label) {
 background-color: var(--helix-color-surface-sunken);
 }
 
-[part="column"] [part="option"]:state(selected)::part(label) {
+[part="column"] [part~="option"]:state(selected)::part(label) {
 background-color: var(--time-picker-selected-color, var(--helix-color-surface-inverse));
 color: var(--helix-color-foreground-inverse);
 }
 
-[part="column"] [part="option"]::part(item)::after {
+[part="column"] [part~="option"]::part(item)::after {
 content: none;
 }
 
-:host([invalid]) [part="option"]:state(selected)::part(item),
-:host([invalid]) [part="column"] [part="option"]:state(selected)::part(label) {
+:host([invalid]) [part~="option"]:state(selected)::part(item),
+:host([invalid]) [part="column"] [part~="option"]:state(selected)::part(label) {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-danger);
 outline-offset: var(--helix-size-focus-offset);
 }

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

@@ -7,7 +7,6 @@ display: block;
 
 [part="item"] {
 border-radius: var(--helix-radii-sm);
-margin-block-end: var(--tree-gap, var(--helix-space-2xs));
 outline: none;
 }
 
@@ -18,9 +17,12 @@ 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));
+
+font-size: 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)
@@ -55,10 +57,6 @@ font-weight: var(--helix-weight-medium);
 font-weight: var(--helix-weight-medium);
 }
 
-slot[name="children"]::slotted(*) {
---_tree-text: var(--helix-text-xs);
-}
-
 [part="row"]:hover {
 background-color: var(--helix-color-surface-raised);
 color: var(--helix-color-foreground);

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

@@ -13,6 +13,9 @@ position: relative;
 [part="stage"] {
 border-radius: var(--video-radius, var(--helix-radii-md));
 display: block;
+
+outline: var(--helix-border-thin) solid var(--helix-color-border);
+outline-offset: calc(var(--helix-border-thin) * -1);
 overflow: hidden;
 position: relative;
 }
@@ -332,7 +335,7 @@ font-weight: var(--helix-weight-medium);
 min-inline-size: var(--video-speed-size, 2.5rem);
 }
 
-[part="remote"][aria-pressed="true"] {
+[part~="remote"][aria-pressed="true"] {
 color: var(--helix-color-primary);
 }