@fusion.dev/helix 0.30.1 → 0.31.0

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/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/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);
 }
 

package/dist/video-playlist/item/video-playlist-item.css.js

@@ -3,7 +3,7 @@ export const styles = createSheet(`:host {
 display: block;
 }
 
-[part="item"] {
+[part~="item"] {
 all: unset;
 box-sizing: border-box;
 
@@ -24,21 +24,21 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-:host(:not([disabled])) [part="item"]:hover {
+:host(:not([disabled])) [part~="item"]:hover {
 background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
 }
 
-[part="item"]:focus-visible {
+[part~="item"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);
 }
 
-[part="item"][aria-current="true"] {
+[part~="item"][aria-current="true"] {
 background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, transparent);
 color: var(--helix-color-foreground);
 }
 
-[part="item"][aria-current="true"]::before {
+[part~="item"][aria-current="true"]::before {
 background-color: var(--helix-color-primary);
 border-radius: var(--helix-radii-full);
 content: "";
@@ -48,7 +48,7 @@ inset-inline-start: var(--helix-space-2xs);
 position: absolute;
 }
 
-:host([disabled]) [part="item"] {
+:host([disabled]) [part~="item"] {
 cursor: not-allowed;
 opacity: 0.5;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -47,14 +47,14 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.30.1",
-    "@fusion.dev/helix-headless": "0.30.1",
-    "@fusion.dev/helix-styles": "0.30.1"
+    "@fusion.dev/helix-core": "0.31.0",
+    "@fusion.dev/helix-headless": "0.31.0",
+    "@fusion.dev/helix-styles": "0.31.0"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@fusion.dev/helix-cem": "0.30.1",
-    "@fusion.dev/helix-testing": "0.30.1",
+    "@fusion.dev/helix-cem": "0.31.0",
+    "@fusion.dev/helix-testing": "0.31.0",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",