@fusion.dev/helix 0.145.0 → 0.146.0

package/dist/icon-button/root/icon-button-root.css.js

@@ -60,7 +60,10 @@ var(--helix-color-foreground)
 
 [part="button"] {
 align-items: center;
-background-color: var(--icon-button-background-color, transparent);
+background-color: var(
+--_icon-button-pressed-fill,
+var(--icon-button-background-color, transparent)
+);
 block-size: var(--_icon-button-size);
 border: var(--helix-border-thin) solid transparent;
 
@@ -77,7 +80,10 @@ border-start-start-radius: var(
 --button-radius-start,
 var(--icon-button-radius, var(--helix-radii-sm))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-ink));
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-ink))
+);
 cursor: pointer;
 display: inline-flex;
 
@@ -92,13 +98,24 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 
 :host(:not(:disabled)) [part="button"]:hover {
 background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 8%, transparent)
 )
+)
+);
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-ink-hover))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-ink-hover));
+}
+
+:host(:not(:disabled)) [part="button"]:active {
+--_icon-button-pressed-fill: var(--icon-button-background-color-active);
+--_icon-button-pressed-ink: var(--icon-button-foreground-color-active);
 }
 
 :host([shape="circle"]) [part="button"] {
@@ -123,55 +140,91 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 :host([emphasis="solid"]) [part="button"] {
-background-color: var(--icon-button-background-color, var(--_icon-button-fill));
+background-color: var(
+--_icon-button-pressed-fill,
+var(--icon-button-background-color, var(--_icon-button-fill))
+);
 border-color: transparent;
-color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-on-tone))
+);
 }
 :host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
 background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(--icon-button-background-color, var(--_icon-button-fill-hover))
+)
+);
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-on-tone))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
 }
 
 :host([emphasis="outlined"]) [part="button"] {
 background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 6%, transparent)
+)
 );
 border-color: var(--_icon-button-edge);
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
+);
 }
 :host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {
 background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 12%, transparent)
 )
+)
+);
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 
 :host([emphasis="subtle"]) [part="button"] {
 background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 14%, transparent)
+)
 );
 border-color: transparent;
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
+);
 }
 
 :host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
 background-color: var(
+--_icon-button-pressed-fill,
+var(
 --icon-button-background-color-hover,
 var(
 --icon-button-background-color,
 color-mix(in oklab, var(--_icon-button-tone) 22%, transparent)
 )
+)
+);
+color: var(
+--_icon-button-pressed-ink,
+var(--icon-button-foreground-color, var(--_icon-button-tone))
 );
-color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 
 :host(:disabled) [part="button"] {
@@ -189,10 +242,12 @@ visibility: hidden;
 }
 
 :host(:state(pending)) [part="button"]::after {
-animation: helix-icon-button-turn var(--_icon-button-turn) linear infinite;
+animation: helix-icon-button-turn var(--icon-button-spinner-duration, var(--_icon-button-turn))
+linear infinite;
 block-size: var(--icon-button-spinner-size, 1.15em);
-border: var(--helix-border-thick) solid color-mix(in oklab, currentColor 30%, transparent);
-border-block-start-color: currentColor;
+border: var(--helix-border-thick) solid
+color-mix(in oklab, var(--icon-button-spinner-color, currentColor) 30%, transparent);
+border-block-start-color: var(--icon-button-spinner-color, currentColor);
 border-radius: var(--helix-radii-full);
 box-sizing: border-box;
 content: "";

package/dist/icon-button/root/icon-button-root.d.ts

@@ -25,11 +25,15 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  * @csspart live - The live region that says `pending-label` when the button becomes pending under focus. It is clipped out of view and still read.
  *
  * @cssproperty --icon-button-background-color - Fill behind the button, in every state.
+ * @cssproperty --icon-button-background-color-active - Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it.
  * @cssproperty --icon-button-background-color-hover - Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
  * @cssproperty --icon-button-foreground-color - Icon color.
+ * @cssproperty --icon-button-foreground-color-active - Icon color while the button is pressed. Without it, a press shows the color of the state under it.
  * @cssproperty --icon-button-radius - Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`.
  * @cssproperty --icon-button-shadow - Shadow of a raised icon button.
  * @cssproperty --icon-button-size - Edge length of the control.
+ * @cssproperty --icon-button-spinner-color - Color of the ring a pending button turns. It follows the icon's color.
+ * @cssproperty --icon-button-spinner-duration - How long the ring takes to turn once.
  * @cssproperty --icon-button-spinner-size - Size of the ring a pending button turns.
  *
  * @cssstate pending - The button is pending: `pending` is set. A ring turns over its hidden icon.

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

@@ -39,6 +39,33 @@ padding-inline: var(--_kbd-inset);
 padding-block-start: var(--helix-border-thin);
 }
 
+:host([caps]) [part="kbd"] {
+background-color: transparent;
+border: 0;
+box-shadow: none;
+gap: var(--kbd-gap, var(--helix-space-2xs));
+min-inline-size: 0;
+padding: 0;
+}
+
+:host([caps]) [part="key"] {
+align-items: center;
+background-color: var(--kbd-background-color, var(--helix-color-surface-sunken));
+block-size: var(--_kbd-height);
+border: var(--helix-border-thin) solid var(--kbd-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-shadow: inset 0 -1px 0 0 var(--kbd-border-color, var(--helix-color-border));
+display: inline-flex;
+justify-content: center;
+min-inline-size: var(--_kbd-height);
+padding-block-start: var(--helix-border-thin);
+padding-inline: var(--_kbd-inset);
+}
+
+[part="separator"] {
+color: var(--kbd-separator-color, var(--helix-color-foreground-muted));
+}
+
 @media print {
 :host {
 box-shadow: none;

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

@@ -18,6 +18,8 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --kbd-background-color - The fill of the key.
  * @cssproperty --kbd-border-color - The color of the key's border and its bottom edge.
+ * @cssproperty --kbd-gap - The space between two keys of a chord under `caps`.
+ * @cssproperty --kbd-separator-color - The color of the `+` between two keys of a chord under `caps`.
  */
 export declare class HelixKbd extends HelixHeadlessKbd {
     static styles: CSSResultGroup;

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

@@ -20,6 +20,10 @@ min-inline-size: 0;
 display: none;
 }
 
+[part="item"] {
+transform: translate(var(--lightbox-pan-x), var(--lightbox-pan-y)) scale(var(--lightbox-zoom));
+}
+
 [part="item"] ::slotted(*) {
 max-block-size: 100%;
 max-inline-size: 100%;

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

@@ -114,6 +114,27 @@ block-size: var(--helix-size-icon);
 inline-size: var(--helix-size-icon);
 }
 
+[part="previous"] ::slotted(*),
+[part="next"] ::slotted(*),
+[part="dismiss"] ::slotted(*) {
+--icon-size: var(--helix-size-icon);
+
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+:host(:state(zoomable)) [part="dialog"] {
+touch-action: none;
+}
+
+:host(:state(zoomable)) [part="viewport"] {
+cursor: zoom-in;
+}
+
+:host(:state(zoomed)) [part="viewport"] {
+cursor: grab;
+}
+
 [part="previous"]:hover,
 [part="next"]:hover,
 [part="dismiss"]:hover {
@@ -133,6 +154,25 @@ cursor: default;
 opacity: 0.4;
 }
 
+[part="counter"] {
+background-color: var(--helix-color-surface-overlay);
+border-radius: var(--helix-radii-full);
+box-shadow: var(--helix-shadow-md);
+color: var(--lightbox-foreground, var(--helix-color-foreground));
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+inset-block-start: var(--lightbox-padding, var(--helix-space-md));
+inset-inline-start: var(--lightbox-padding, var(--helix-space-md));
+line-height: var(--helix-leading-tight);
+padding: var(--helix-space-2xs) var(--helix-space-sm);
+position: absolute;
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+visibility var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:state(idle)) [part="counter"],
 :host(:state(idle)) [part="previous"],
 :host(:state(idle)) [part="next"],
 :host(:state(idle)) [part="dismiss"] {
@@ -141,6 +181,7 @@ visibility: hidden;
 }
 
 @media (prefers-reduced-motion: reduce) {
+[part="counter"],
 [part="previous"],
 [part="next"],
 [part="dismiss"] {

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

@@ -61,6 +61,22 @@ stroke: var(--chart-series);
 color: var(--chart-series);
 }
 
+[part~="marker"] {
+background-color: var(--chart-series);
+block-size: var(--line-chart-marker-size, 6px);
+border-radius: var(--helix-radii-full);
+box-shadow: 0 0 0 var(--helix-border-thin)
+var(--line-chart-marker-ring-color, var(--helix-color-background));
+inline-size: var(--line-chart-marker-size, 6px);
+pointer-events: none;
+position: absolute;
+translate: -50% -50%;
+}
+
+:host(:dir(rtl)) [part~="marker"] {
+translate: 50% -50%;
+}
+
 :host([terminus="ring"]) [part="svg"] {
 mask-composite: intersect;
 mask-image: var(--_line-chart-holes);

package/dist/line-chart/root/line-chart-root.d.ts

@@ -38,6 +38,8 @@ import '../../tooltip/index.js';
  * @cssproperty --line-chart-block-size - Height of the drawing.
  * @cssproperty --line-chart-gap - Space between the drawing and its labels.
  * @cssproperty --line-chart-gridline-color - Color of the rules drawn across the plot under `gridlines`.
+ * @cssproperty --line-chart-marker-ring-color - Color of the ring round the mark on a reading, which matches the page. Change it when the chart sits on another surface.
+ * @cssproperty --line-chart-marker-size - Size of the mark on a reading, under `markers`.
  * @cssproperty --line-chart-width - Thickness of a line. Overrides `--chart-stroke`.
  */
 export declare class HelixLineChart extends HelixHeadlessLineChart {

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

@@ -48,6 +48,15 @@ cursor: not-allowed;
 --_collection-inset-inline: var(--helix-space-xs);
 }
 
+[part="error"] {
+color: var(--listbox-error-color, var(--helix-color-danger));
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+padding: var(--helix-space-xs);
+text-align: center;
+}
+
 [part="filter-icon"] {
 align-items: center;
 color: var(--helix-color-foreground-subtle);

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

@@ -19,6 +19,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --listbox-background-color - The panel's fill. Set it to `transparent` when the list is already inside a panel.
  * @cssproperty --listbox-border - The panel's border, as a shorthand. Set it to `none` when the list is already inside a panel.
+ * @cssproperty --listbox-error-color - The color of the line shown while `load-error` is set.
  * @cssproperty --listbox-max-block-size - Maximum height of the list before it scrolls.
  */
 export declare class HelixListbox extends HelixHeadlessListbox {

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

@@ -23,7 +23,7 @@ vertical-align: middle;
 }
 
 [part="svg"] {
-animation: helix-loader-turn var(--_loader-turn) linear infinite;
+animation: helix-loader-turn var(--loader-duration, var(--_loader-turn)) linear infinite;
 grid-area: 1 / 1;
 block-size: var(--loader-size, var(--_loader-size));
 inline-size: var(--loader-size, var(--_loader-size));
@@ -33,7 +33,7 @@ inline-size: var(--loader-size, var(--_loader-size));
 animation: helix-loader-breathe var(--_loader-breathe) ease-in-out infinite;
 opacity: 0.18;
 stroke: var(--loader-track-color, currentColor);
-stroke-width: var(--_loader-stroke);
+stroke-width: var(--loader-track-width, var(--_loader-stroke));
 }
 
 [part="mark"] {
@@ -68,7 +68,7 @@ scale: 1;
 stroke: var(--loader-color, currentColor);
 stroke-dasharray: 50, 100;
 stroke-linecap: round;
-stroke-width: var(--_loader-stroke);
+stroke-width: var(--loader-track-width, var(--_loader-stroke));
 }
 
 @keyframes helix-loader-turn {

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

@@ -20,8 +20,10 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/loader
  *
  * @cssproperty --loader-color - Color of the moving arc.
+ * @cssproperty --loader-duration - How long one turn of the arc takes, 0.8s by default. With motion reduced the turn slows to a crawl whatever this says.
  * @cssproperty --loader-size - Diameter. Defaults to the size token that `size` picks, which is 1.5rem at the default density.
  * @cssproperty --loader-track-color - Color of the circle behind the arc.
+ * @cssproperty --loader-track-width - Width of the arc and the circle behind it, in units of a 24-unit drawing. Defaults to 2.
  */
 export declare class HelixLoader extends HelixHeadlessLoader {
     /**

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

@@ -8,23 +8,23 @@ all: unset;
 box-sizing: border-box;
 
 align-items: center;
-border-radius: var(--helix-radii-sm);
-color: var(--helix-color-foreground-muted);
+border-radius: var(--megamenu-trigger-radius, var(--helix-radii-sm));
+color: var(--megamenu-trigger-color, var(--helix-color-foreground-muted));
 cursor: pointer;
 display: inline-flex;
 font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
+font-size: var(--megamenu-trigger-font-size, var(--helix-text-sm));
+font-weight: var(--megamenu-trigger-font-weight, var(--helix-weight-medium));
 gap: var(--helix-space-2xs);
 min-block-size: var(--helix-size-control-tight);
-padding-inline: var(--helix-space-xs);
+padding-inline: var(--megamenu-trigger-padding-inline, var(--helix-space-xs));
 transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
 color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="trigger"]:hover {
-color: var(--helix-color-foreground);
+color: var(--megamenu-trigger-hover-color, var(--helix-color-foreground));
 }
 
 [part="trigger"]:focus-visible {
@@ -33,8 +33,11 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 [part="trigger"][aria-expanded="true"] {
-background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
-color: var(--helix-color-foreground);
+background-color: var(
+--megamenu-trigger-open-background-color,
+color-mix(in oklab, var(--helix-color-foreground) 8%, transparent)
+);
+color: var(--megamenu-trigger-open-color, var(--helix-color-foreground));
 }
 
 [part="surface"] {
@@ -52,7 +55,7 @@ box-sizing: border-box;
 clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-xl) * -1));
 
 display: grid;
-gap: var(--helix-space-xl);
+gap: var(--megamenu-gap, var(--helix-space-xl));
 grid-auto-columns: minmax(var(--megamenu-column-size, 15rem), 1fr);
 grid-auto-flow: column;
 
@@ -60,12 +63,12 @@ inline-size: max-content;
 margin: var(--helix-space-none);
 
 max-inline-size: min(var(--megamenu-size, 52rem), calc(100% - var(--helix-space-xl) * 2));
-padding: var(--helix-space-md);
+padding: var(--megamenu-padding, var(--helix-space-md));
 
 transition:
-clip-path var(--helix-duration-slow) var(--helix-easing-decelerate),
-display var(--helix-duration-slow) allow-discrete,
-overlay var(--helix-duration-slow) allow-discrete;
+clip-path var(--megamenu-duration, var(--helix-duration-slow)) var(--helix-easing-decelerate),
+display var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete,
+overlay var(--megamenu-duration, var(--helix-duration-slow)) allow-discrete;
 }
 
 [part="surface"]:popover-open {

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

@@ -20,10 +20,21 @@ import type { CSSResultGroup } from 'lit';
  *   `--helix-border-floating`, which is `0` unless a theme changes it, so the panel stands out
  *   by its shadow.
  * @cssproperty --megamenu-column-size - The minimum width of a column before the grid wraps.
+ * @cssproperty --megamenu-duration - How long the panel takes to open and close.
  * @cssproperty --megamenu-full-size - The maximum width of the band's contents, which are centered in it.
+ * @cssproperty --megamenu-gap - The space between the panel's columns.
+ * @cssproperty --megamenu-padding - The space inside the card's edge.
  * @cssproperty --megamenu-shadow - The shadow under the panel. Follows `--helix-shadow-floating`,
  *   so the panel has a shadow by default, because it sits over content you cannot predict.
  * @cssproperty --megamenu-size - The maximum width of the panel.
+ * @cssproperty --megamenu-trigger-color - The trigger's text color at rest.
+ * @cssproperty --megamenu-trigger-font-size - The size of the trigger's text.
+ * @cssproperty --megamenu-trigger-font-weight - The weight of the trigger's text.
+ * @cssproperty --megamenu-trigger-hover-color - The trigger's text color under the pointer.
+ * @cssproperty --megamenu-trigger-open-background-color - The trigger's fill while its panel is open.
+ * @cssproperty --megamenu-trigger-open-color - The trigger's text color while its panel is open.
+ * @cssproperty --megamenu-trigger-padding-inline - The space either side of the trigger's text.
+ * @cssproperty --megamenu-trigger-radius - The trigger's corners.
  */
 export declare class HelixMegamenu extends HelixHeadlessMegamenu {
     static styles: CSSResultGroup;

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

@@ -73,6 +73,20 @@ grid-column: 2;
 min-inline-size: 0;
 }
 
+slot[name="description"] {
+color: var(--menu-item-description-color, var(--helix-color-foreground-subtle));
+display: block;
+font-weight: var(--helix-weight-regular);
+grid-column: 2;
+grid-row: 2;
+min-inline-size: 0;
+padding-block-end: var(--helix-space-2xs);
+}
+
+slot[name="description"][data-empty] {
+display: none;
+}
+
 [part="end"] {
 align-items: center;
 color: var(--menu-item-detail-color, var(--helix-color-foreground-subtle));
@@ -86,25 +100,32 @@ padding-inline-start: var(--helix-space-sm);
 display: none;
 }
 
-[part="mark"] {
+[part="mark"],
+slot[name="check"]::slotted(*),
+slot[name="chevron"]::slotted(*) {
 grid-column: 4;
+grid-row: 1;
 }
 
 [part="start"][data-empty] {
 display: none;
 }
 
-[part="mark"] {
+[part="mark"],
+slot[name="check"]::slotted(*),
+slot[name="chevron"]::slotted(*) {
 block-size: var(--helix-size-icon);
 inline-size: var(--helix-size-icon);
 justify-self: end;
 }
 
-svg[part="mark"] {
+svg[part="mark"],
+slot[name="chevron"]::slotted(*) {
 color: var(--helix-color-foreground-subtle);
 }
 
-:host(:state(checked)) svg[part="mark"] {
+:host(:state(checked)) svg[part="mark"],
+slot[name="check"]::slotted(*) {
 color: var(--helix-color-foreground);
 }
 

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

@@ -17,6 +17,7 @@ import '../../kbd/index.js';
  * @aliases Menu option, Menu row
  * @documentation https://fusion.dev/helix/components/menu
  *
+ * @cssproperty --menu-item-description-color - Color of the line under the label.
  * @cssproperty --menu-item-detail-color - Color of the shortcut and the words in the `end` slot.
  * @cssproperty --menu-item-end - Width of the trailing column, including the gap before it, which holds a check mark or a submenu caret.
  * @cssproperty --menu-item-hover-color - Fill under the pointer.

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

@@ -60,8 +60,10 @@ inline-size: 100%;
 scale: var(--meter-fraction, 0) 1;
 transform-origin: left center;
 transition:
-background-color var(--helix-duration-normal) var(--helix-easing-standard),
-scale var(--helix-duration-normal) var(--helix-easing-decelerate);
+background-color var(--meter-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-standard),
+scale var(--meter-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-decelerate);
 }
 
 :host(:dir(rtl)) [part~="indicator"] {
@@ -158,7 +160,8 @@ scale: none;
 stroke: var(--_meter-hue);
 stroke-dasharray: var(--meter-along) 100;
 stroke-linecap: round;
-transition: stroke-dasharray var(--helix-duration-normal) var(--helix-easing-standard);
+transition: stroke-dasharray var(--meter-transition-duration, var(--helix-duration-normal))
+var(--helix-easing-standard);
 }
 
 :host([shape="arc"]) [part="tick"],

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

@@ -50,6 +50,7 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --meter-size - The thickness of the bar.
  * @cssproperty --meter-tick-color - The color of the mark at each threshold.
  * @cssproperty --meter-track-color - The color of the groove behind the fill.
+ * @cssproperty --meter-transition-duration - How long the fill takes to move to a new reading, and to change its color. `0s` moves it at once.
  */
 export declare class HelixMeter extends HelixHeadlessMeter {
     /**

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

@@ -22,6 +22,13 @@ import type { CSSResultGroup } from 'lit';
  *   raised on the bar.
  * @cssproperty --navigation-item-color - Text color of a destination that is not the current one. Read by the page's stylesheet, which styles the links you slot.
  * @cssproperty --navigation-item-current-color - Text color of the current destination, the one marked `aria-current="page"`.
+ * @cssproperty --navigation-item-current-font-weight - Weight of the current destination's text.
+ * @cssproperty --navigation-item-font-size - Size of a destination's text.
+ * @cssproperty --navigation-item-font-weight - Weight of a destination's text.
+ * @cssproperty --navigation-item-hover-background-color - Background of a destination under the pointer.
+ * @cssproperty --navigation-item-hover-color - Text color of a destination under the pointer.
+ * @cssproperty --navigation-item-padding-inline - Space either side of a destination's text.
+ * @cssproperty --navigation-item-radius - Corner radius of a destination, which its hover background follows.
  */
 export declare class HelixNavigation extends HelixHeadlessNavigation {
     static styles: CSSResultGroup;

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

@@ -88,6 +88,12 @@ transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 color: var(--helix-color-foreground);
 }
 
+[part="more"][aria-disabled="true"],
+[part="more"][aria-disabled="true"]:hover {
+color: var(--helix-color-foreground-subtle);
+cursor: default;
+}
+
 [part="more"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: calc(var(--helix-size-focus-offset) * -1);