@fusion.dev/helix 0.144.0 → 0.146.0

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

@@ -47,6 +47,14 @@ list-style-type: upper-roman;
 list-style-type: disc;
 }
 
+:host([kind="ordered"]) ::slotted(*) {
+counter-increment: list-item var(--list-step, 1);
+}
+
+:host([kind="ordered"]) ::slotted(:first-child) {
+counter-set: list-item var(--list-first);
+}
+
 :host([marker="rail"]) {
 counter-reset: list-rail;
 
@@ -57,7 +65,11 @@ padding-inline-start: var(--helix-space-none);
 --list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));
 
 --list-item-rail-display: block;
-counter-increment: list-rail;
+counter-increment: list-rail var(--list-step, 1);
+}
+
+:host([marker="rail"]) ::slotted(:first-child) {
+counter-set: list-rail var(--list-first);
 }
 
 :host([kind="ordered"][marker="rail"]) ::slotted(*),

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/index.d.ts

@@ -1,2 +1,3 @@
 export * from './item/menu-item.js';
 export * from './root/menu-root.js';
+export * from './section/menu-section.js';

package/dist/menu/index.js

@@ -1,2 +1,3 @@
 export * from './item/menu-item.js';
 export * from './root/menu-root.js';
+export * from './section/menu-section.js';

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

@@ -20,6 +20,7 @@ font-weight: var(--helix-weight-medium);
 grid-template-columns:
 var(--menu-item-start, 0px)
 minmax(0, 1fr)
+auto
 var(--menu-item-end, 0px);
 
 min-block-size: var(--helix-size-control);
@@ -72,25 +73,59 @@ grid-column: 2;
 min-inline-size: 0;
 }
 
-[part="mark"] {
+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));
+display: flex;
+gap: var(--helix-space-2xs);
 grid-column: 3;
+padding-inline-start: var(--helix-space-sm);
+}
+
+[part="end"][data-empty] {
+display: none;
+}
+
+[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

@@ -1,5 +1,6 @@
 import { HelixHeadlessMenuItem } from '@fusion.dev/helix-headless/menu';
 import type { CSSResultGroup } from 'lit';
+import '../../kbd/index.js';
 /**
  * @summary One row in a menu: a command, a choice, or a way into a submenu.
  *
@@ -16,11 +17,14 @@ import type { CSSResultGroup } from 'lit';
  * @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.
  * @cssproperty --menu-item-start - Width of the leading column, including the gap after it, for a row with more than a mark. The menu sets it for each page, and `0` removes the column.
  */
 export declare class HelixMenuItem extends HelixHeadlessMenuItem {
+    static tier: string;
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -6,8 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessMenuItem } from '@fusion.dev/helix-headless/menu';
+import '../../kbd/index.js';
 import { styles } from './menu-item.css.js';
 let HelixMenuItem = class HelixMenuItem extends HelixHeadlessMenuItem {
+    static { this.tier = 'helix-'; }
     static { this.styles = styles; }
 };
 HelixMenuItem = __decorate([

package/dist/menu/section/menu-section.css.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,14 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="heading"] {
+color: var(--menu-section-heading-color, var(--helix-color-foreground-subtle));
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-medium);
+line-height: var(--helix-leading-normal);
+padding-block: var(--helix-space-xs) var(--helix-space-2xs);
+padding-inline: var(--helix-space-sm);
+user-select: none;
+}`);

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

@@ -0,0 +1,24 @@
+import { HelixHeadlessMenuSection } from '@fusion.dev/helix-headless/menu';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A group of rows in a menu, under a heading.
+ *
+ * @description
+ * The heading is set in the menu's small type, quieter than the rows, with the
+ * rows' own inset, so it reads as the name of what follows.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Menu group, Menu heading
+ * @documentation https://fusion.dev/helix/components/menu
+ *
+ * @cssproperty --menu-section-heading-color - Color of the heading.
+ */
+export declare class HelixMenuSection extends HelixHeadlessMenuSection {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-menu-section': HelixMenuSection;
+    }
+}

package/dist/menu/section/menu-section.js

@@ -0,0 +1,16 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessMenuSection } from '@fusion.dev/helix-headless/menu';
+import { styles } from './menu-section.css.js';
+let HelixMenuSection = class HelixMenuSection extends HelixHeadlessMenuSection {
+    static { this.styles = styles; }
+};
+HelixMenuSection = __decorate([
+    customElement('helix-menu-section')
+], HelixMenuSection);
+export { HelixMenuSection };

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.css.js

@@ -6,7 +6,7 @@ display: block;
 [part="nav"] {
 align-items: center;
 
-block-size: var(--helix-size-control-sm);
+block-size: var(--navigation-block-size, var(--helix-size-control-sm));
 display: flex;
 gap: var(--navigation-gap, var(--helix-space-2xs));
 
@@ -19,7 +19,8 @@ position: relative;
 [part="indicator"] {
 background-color: var(--navigation-indicator-color, var(--helix-color-surface-sunken));
 block-size: var(--indicator-block-size, 0);
-border-radius: var(--helix-radii-sm);
+border-radius: var(--navigation-indicator-radius, var(--helix-radii-sm));
+box-shadow: var(--navigation-indicator-shadow, none);
 inline-size: var(--indicator-inline-size, 0);
 inset-block-start: 50%;
 inset-inline-start: 0;

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

@@ -14,8 +14,21 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Nav, NavList, Tabs
  * @documentation https://fusion.dev/helix/components/navigation
  *
+ * @cssproperty --navigation-block-size - Height of the bar in a row. Each destination fills it.
  * @cssproperty --navigation-gap - Space between destinations.
  * @cssproperty --navigation-indicator-color - Fill of the marker on the current destination.
+ * @cssproperty --navigation-indicator-radius - Corner radius of the marker.
+ * @cssproperty --navigation-indicator-shadow - Shadow under the marker, for a marker that sits
+ *   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

@@ -71,6 +71,34 @@ transition: color var(--helix-duration-fast) var(--helix-easing-standard);
 color: var(--helix-color-foreground);
 }
 
+[part="more"] {
+background: none;
+border: 0;
+border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+inline-size: 100%;
+padding-block: var(--helix-space-sm);
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="more"]:hover {
+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);
+}
+
 [part="mark-all"]:focus-visible {
 outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
@@ -91,7 +119,8 @@ max-block-size: none;
 overflow-y: visible;
 }
 
-[part="mark-all"] {
+[part="mark-all"],
+[part="more"] {
 display: none;
 }
 }`);

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

@@ -25,6 +25,7 @@ import '../notification/notification.js';
  * @csspart list - The list itself.
  * @csspart live - A copy of the empty and loading messages, in a live region that screen readers announce when they change. Visually hidden in the styled tier.
  * @csspart mark-all - The control that marks everything read.
+ * @csspart more - The button after the list that asks for more, while `load-more` is set and the feed is not loading.
  *
  * @cssproperty --notifications-max-block-size - How tall the feed may get before the list scrolls.
  * @cssproperty --notifications-media-column - Width of the media column that every item keeps when any item in the feed has media.

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

@@ -23,7 +23,7 @@ background-color: transparent;
 
 [part="control"] {
 font-variant-numeric: tabular-nums;
-padding-inline: var(--helix-space-xs);
+padding-inline: var(--number-input-padding-inline, var(--helix-space-xs));
 text-align: center;
 }
 
@@ -46,12 +46,13 @@ padding-inline-end: var(--helix-space-xs);
 all: unset;
 align-items: center;
 align-self: stretch;
+background-color: var(--number-input-stepper-background-color, transparent);
 box-sizing: border-box;
-color: var(--helix-color-foreground-muted);
+color: var(--number-input-stepper-color, var(--helix-color-foreground-muted));
 cursor: pointer;
 display: flex;
 flex: none;
-inline-size: var(--helix-size-control);
+inline-size: var(--number-input-stepper-size, var(--helix-size-control));
 justify-content: center;
 transition:
 background-color var(--helix-duration-fast) var(--helix-easing-standard),
@@ -59,17 +60,19 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 [part="decrement"] {
-border-inline-end: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-end: var(--helix-border-thin) solid
+var(--number-input-stepper-border-color, var(--helix-color-border));
 }
 
 [part="increment"] {
-border-inline-start: var(--helix-border-thin) solid var(--helix-color-border);
+border-inline-start: var(--helix-border-thin) solid
+var(--number-input-stepper-border-color, var(--helix-color-border));
 }
 
 [part="decrement"]:hover:not(:disabled),
 [part="increment"]:hover:not(:disabled) {
-background-color: var(--helix-color-surface);
-color: var(--helix-color-foreground);
+background-color: var(--number-input-stepper-background-color-hover, var(--helix-color-surface));
+color: var(--number-input-stepper-color-hover, var(--helix-color-foreground));
 }
 
 [part="decrement"]:disabled,
@@ -80,8 +83,8 @@ opacity: 0.4;
 
 [part="decrement"] svg,
 [part="increment"] svg {
-block-size: var(--helix-size-icon-tight);
-inline-size: var(--helix-size-icon-tight);
+block-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));
+inline-size: var(--number-input-stepper-icon-size, var(--helix-size-icon-tight));
 }
 
 :host([scrub]) [part="label"] {

package/dist/number-input/root/number-input-root.d.ts

@@ -34,8 +34,16 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --number-input-background-color - The fill behind the number.
  * @cssproperty --number-input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --number-input-padding-inline - Space at each side of the number, inside the steppers.
  * @cssproperty --number-input-radius - Corner radius of the field.
  * @cssproperty --number-input-size - Height of the field.
+ * @cssproperty --number-input-stepper-background-color - Fill behind each stepper button at rest.
+ * @cssproperty --number-input-stepper-background-color-hover - Fill behind a stepper button under the pointer.
+ * @cssproperty --number-input-stepper-border-color - The rule between each stepper button and the number.
+ * @cssproperty --number-input-stepper-color - Icon color of the stepper buttons at rest.
+ * @cssproperty --number-input-stepper-color-hover - Icon color of a stepper button under the pointer.
+ * @cssproperty --number-input-stepper-icon-size - Width and height of the stepper icons.
+ * @cssproperty --number-input-stepper-size - Width of each stepper button.
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {
     static styles: CSSResultGroup;

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

@@ -42,7 +42,31 @@ line-height: var(--helix-leading-normal);
 padding-block: var(--helix-space-xs);
 }
 
-[part="header"] + [part="frame"] [part="tree"] {
+[part="search-field"] {
+appearance: none;
+background-color: var(--object-inspector-background-color, var(--helix-color-background));
+border: var(--helix-border-thin) solid
+var(--object-inspector-border-color, var(--helix-color-border));
+border-block-end: none;
+border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));
+border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+inline-size: 100%;
+margin: 0;
+padding-block: var(--helix-space-xs);
+padding-inline: var(--helix-space-md);
+}
+
+[part="search-field"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+[part="header"] + [part="search-field"],
+:is([part="header"], [part="search-field"]) ~ [part="frame"] [part="tree"] {
 border-start-end-radius: var(--helix-radii-none);
 border-start-start-radius: var(--helix-radii-none);
 }
@@ -53,10 +77,6 @@ overflow-y: auto;
 overscroll-behavior: contain;
 }
 
-[part="tree"]:focus-visible {
-outline: none;
-}
-
 [part~="row"] {
 cursor: default;
 overflow: hidden;
@@ -81,15 +101,22 @@ var(--helix-space-sm)
 );
 }
 
-[part="tree"]:focus [part~="row-active"] {
+[part="tree"]:focus-within [part~="row-active"] {
 background-color: var(--helix-color-surface-sunken);
 }
 
-[part="tree"]:focus-visible [part~="row-active"] {
+[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);
 }
 
+[part~="row-match"] {
+background-color: var(
+--object-inspector-match-background-color,
+var(--helix-color-accent-subtle)
+);
+}
+
 [part="toggle"] {
 block-size: 1em;
 color: var(--helix-color-foreground-muted);
@@ -102,6 +129,10 @@ vertical-align: -0.125em;
 color: var(--helix-color-syntax-name);
 }
 
+[part~="row-match"] [part="key"] {
+color: var(--helix-color-foreground);
+}
+
 [part="string"] {
 color: var(--helix-color-syntax-string);
 }