@fusion.dev/helix 0.143.0 → 0.145.0

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

@@ -1,4 +1,4 @@
-import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon';
+import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon/root';
 import type { CSSResultGroup } from 'lit';
 /**
  * @summary A named icon from the Helix set.

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

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { customElement } from '@fusion.dev/helix-core';
-import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon';
+import { HelixHeadlessIcon } from '@fusion.dev/helix-headless/icon/root';
 import { styles } from './icon-root.css.js';
 let HelixIcon = class HelixIcon extends HelixHeadlessIcon {
     static { this.styles = styles; }

package/dist/icon/root/index.d.ts

@@ -0,0 +1,2 @@
+export { type IconResolver, registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon/root';
+export * from './icon-root.js';

package/dist/icon/root/index.js

@@ -0,0 +1,2 @@
+export { registerIconLibrary, registerIcons, resolveIcon, } from '@fusion.dev/helix-headless/icon/root';
+export * from './icon-root.js';

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

@@ -6,6 +6,8 @@ display: inline-flex;
 
 :host {
 --_icon-button-edge: var(--helix-color-border);
+
+--_icon-button-turn: 0.8s;
 --_icon-button-ink: var(--helix-color-foreground-muted);
 --_icon-button-ink-hover: var(--helix-color-foreground);
 
@@ -177,6 +179,41 @@ cursor: not-allowed;
 opacity: 0.5;
 }
 
+:host(:state(pending)) [part="button"] {
+cursor: progress;
+position: relative;
+}
+
+:host(:state(pending)) [part="button"] > * {
+visibility: hidden;
+}
+
+:host(:state(pending)) [part="button"]::after {
+animation: helix-icon-button-turn 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-radius: var(--helix-radii-full);
+box-sizing: border-box;
+content: "";
+inline-size: var(--icon-button-spinner-size, 1.15em);
+inset: 0;
+margin: auto;
+position: absolute;
+}
+
+@keyframes helix-icon-button-turn {
+to {
+rotate: 1turn;
+}
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host(:state(pending)) [part="button"]::after {
+animation-duration: calc(var(--helix-duration-slow) * 12);
+}
+}
+
 @media print {
 :host {
 display: none;

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

@@ -22,6 +22,7 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  * @slot - The icon.
  *
  * @csspart button - The inner button.
+ * @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-hover - Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover.
@@ -29,6 +30,9 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  * @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-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.
  */
 export declare class HelixIconButton extends HelixIconButton_base {
     /**

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

@@ -7,6 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessIconButton } from '@fusion.dev/helix-headless/icon-button';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { MixinControlSurface } from '../../shared/mixin-control-surface/mixin-control-surface.js';
 import { styles } from './icon-button-root.css.js';
 let HelixIconButton = class HelixIconButton extends MixinControlSurface(HelixHeadlessIconButton) {
@@ -14,7 +15,7 @@ let HelixIconButton = class HelixIconButton extends MixinControlSurface(HelixHea
         super(...arguments);
         this.raised = false;
     }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 __decorate([
     property({ reflect: true, type: Boolean })

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

@@ -7,12 +7,12 @@ export const styles = createSheet(`:host {
 align-items: center;
 background-color: var(--input-background-color, var(--helix-color-well));
 block-size: var(--_input-size);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+border: var(--helix-border-thin) solid var(--input-border-color, var(--helix-color-border));
+border-radius: var(--input-radius, var(--helix-radii-sm));
 color: var(--helix-color-foreground-subtle);
 display: flex;
 gap: var(--helix-space-2xs);
-padding-inline: var(--helix-space-xs);
+padding-inline: var(--input-padding-inline, var(--helix-space-xs));
 transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
 background-color var(--helix-duration-fast) var(--helix-easing-standard);

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

@@ -23,6 +23,9 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/input
  *
  * @cssproperty --input-background-color - Fill behind the text.
+ * @cssproperty --input-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --input-padding-inline - Space between the edge of the field and what is inside it.
+ * @cssproperty --input-radius - Corner radius of the field.
  * @cssproperty --input-size - Height of the field.
  */
 export declare class HelixInput extends HelixHeadlessInput {

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

@@ -14,12 +14,12 @@ margin: var(--helix-space-none);
 padding: var(--helix-space-none);
 }
 
-[part="entry"] {
+[part~="entry"] {
 align-items: center;
 color: var(--helix-color-foreground-muted);
 display: flex;
 font-size: var(--helix-text-sm);
-gap: var(--helix-space-2xs);
+gap: var(--legend-entry-gap, var(--helix-space-2xs));
 line-height: var(--helix-leading-tight);
 }
 
@@ -28,23 +28,23 @@ line-height: var(--helix-leading-tight);
 flex-direction: column;
 }
 
-:host([placement="end"]) [part="entry"] {
+:host([placement="end"]) [part~="entry"] {
 flex-direction: row-reverse;
 text-align: end;
 }
 
-[part="entry"]::before {
+[part~="entry"]::before {
 --_legend-shade: color-mix(in oklab, var(--chart-series) 60%, var(--helix-color-background));
 
 block-size: var(--legend-swatch-size, var(--helix-space-sm));
 
-border-radius: var(--helix-radii-sm);
+border-radius: var(--legend-swatch-radius, var(--helix-radii-sm));
 content: "";
 flex: 0 0 auto;
 inline-size: var(--legend-swatch-size, var(--helix-space-sm));
 }
 
-[part="entry"]::before {
+[part~="entry"]::before {
 background-color: color-mix(
 in oklab,
 var(--chart-series) calc(var(--_legend-area, 1) * var(--_legend-through, 1) * 100%),
@@ -52,8 +52,8 @@ transparent
 );
 }
 
-[part="entry"][data-emphasis="outlined"]::before,
-:host([emphasis="outlined"]) [part="entry"]:not([data-emphasis])::before {
+[part~="entry"][data-emphasis="outlined"]::before,
+:host([emphasis="outlined"]) [part~="entry"]:not([data-emphasis])::before {
 background-color: color-mix(
 in oklab,
 var(--_legend-shade) calc(var(--_legend-through, 1) * 100%),
@@ -63,22 +63,49 @@ border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
 }
 
-[part="entry"][data-emphasis="subtle"]::before,
-:host([emphasis="subtle"]) [part="entry"]:not([data-emphasis])::before {
+[part~="entry"][data-emphasis="subtle"]::before,
+:host([emphasis="subtle"]) [part~="entry"]:not([data-emphasis])::before {
 --_legend-area: 0.2;
 border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid
 color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%), transparent);
 }
 
-[part="entry"][data-material="glass"]::before,
-:host([material="glass"]) [part="entry"]:not([data-material])::before {
+[part~="entry"][data-material="glass"]::before,
+:host([material="glass"]) [part~="entry"]:not([data-material])::before {
 --_legend-through: calc(0.62 * var(--helix-material-opacity));
 }
 
-:host([material="frosted"]) [part="entry"]:not([data-material])::before {
+:host([material="frosted"]) [part~="entry"]:not([data-material])::before {
 --_legend-through: calc(0.88 * var(--helix-material-opacity));
 }
 
+[part="toggle"] {
+all: unset;
+box-sizing: border-box;
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+}
+
+[part="toggle"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+@media (hover: hover) {
+[part="toggle"]:hover {
+color: var(--helix-color-foreground);
+}
+}
+
+[part~="entry-hidden"] {
+opacity: var(--legend-hidden-opacity, 0.56);
+}
+
+[part~="entry-hidden"]::before {
+background-color: transparent;
+border: var(--legend-swatch-stroke, var(--helix-border-thick)) solid var(--chart-series);
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -14,6 +14,9 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * put a color in the headless tier. Charts and legends share the file, so both
  * use the same twenty-four color names.
  *
+ * Under `toggles`, each name is a button. A hidden series' entry fades and
+ * its swatch empties to an outline, so the color stays readable.
+ *
  * @since 0.1.0
  * @status stable
  * @category charts
@@ -22,7 +25,10 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
  * @documentation https://fusion.dev/helix/components/legend
  *
  * @cssproperty --legend-direction - The direction the entries run: `row`, which wraps, or `column`.
+ * @cssproperty --legend-entry-gap - The space between a swatch and its name.
  * @cssproperty --legend-gap - The space between entries.
+ * @cssproperty --legend-hidden-opacity - How strongly a hidden series' entry is drawn, under `toggles`.
+ * @cssproperty --legend-swatch-radius - The corner of the color swatch.
  * @cssproperty --legend-swatch-size - The size of the color swatch.
  * @cssproperty --legend-swatch-stroke - The width of the edge an `outlined` or
  *   `subtle` swatch is drawn with.

package/dist/legend/root/legend-root.js

@@ -29,7 +29,7 @@ let HelixLegend = class HelixLegend extends HelixHeadlessLegend {
         const outlined = slots(this.outlined);
         const subtle = slots(this.subtle);
         const glass = slots(this.glass);
-        const entries = [...this.renderRoot.querySelectorAll('[part="entry"]')];
+        const entries = [...this.renderRoot.querySelectorAll('[part~="entry"]')];
         for (const [at, entry] of entries.entries()) {
             mark(entry, 'emphasis', outlined.has(at) ? 'outlined' : subtle.has(at) ? 'subtle' : undefined);
             mark(entry, 'material', glass.has(at) ? 'glass' : undefined);

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

@@ -17,6 +17,8 @@ inline-size: 100vw;
 max-block-size: 100dvh;
 max-inline-size: 100vw;
 padding: var(--lightbox-padding, var(--helix-space-md));
+
+touch-action: pan-y pinch-zoom;
 }
 
 [part="dialog"]:focus-visible {
@@ -64,6 +66,88 @@ transition: none;
 }
 }
 
+[part="previous"],
+[part="next"],
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+align-items: center;
+background-color: var(--helix-color-surface-overlay);
+block-size: var(--lightbox-control-size, var(--helix-size-control));
+border-radius: var(--helix-radii-full);
+box-shadow: var(--helix-shadow-md);
+color: var(--lightbox-foreground, var(--helix-color-foreground));
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--lightbox-control-size, var(--helix-size-control));
+justify-content: center;
+position: absolute;
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+visibility var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="previous"],
+[part="next"] {
+inset-block-start: 50%;
+translate: 0 -50%;
+}
+
+[part="previous"] {
+inset-inline-start: var(--lightbox-padding, var(--helix-space-md));
+}
+
+[part="next"] {
+inset-inline-end: var(--lightbox-padding, var(--helix-space-md));
+}
+
+[part="dismiss"] {
+inset-block-start: var(--lightbox-padding, var(--helix-space-md));
+inset-inline-end: var(--lightbox-padding, var(--helix-space-md));
+}
+
+[part="previous"] svg,
+[part="next"] svg,
+[part="dismiss"] svg {
+block-size: var(--helix-size-icon);
+inline-size: var(--helix-size-icon);
+}
+
+[part="previous"]:hover,
+[part="next"]:hover,
+[part="dismiss"]:hover {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="previous"]:focus-visible,
+[part="next"]:focus-visible,
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="previous"][aria-disabled="true"],
+[part="next"][aria-disabled="true"] {
+cursor: default;
+opacity: 0.4;
+}
+
+:host(:state(idle)) [part="previous"],
+:host(:state(idle)) [part="next"],
+:host(:state(idle)) [part="dismiss"] {
+opacity: 0;
+visibility: hidden;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="previous"],
+[part="next"],
+[part="dismiss"] {
+transition: none;
+}
+}
+
 @media print {
 :host {
 display: none;

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

@@ -23,6 +23,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @event {HelixActivateEvent} helix-activate - Fired after the shown item changes, when the element already holds the new item.
  *
+ * @cssproperty --lightbox-control-size - Size of the previous, next and close controls drawn with `controls`.
  * @cssproperty --lightbox-foreground - Color of the controls and text drawn over the content.
  * @cssproperty --lightbox-gap - Space between the header or footer and the content.
  * @cssproperty --lightbox-padding - Inset from the edges of the screen.

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

@@ -3,7 +3,7 @@ export const styles = createSheet(`:host {
 display: block;
 }
 
-[part="row"] {
+[part~="row"] {
 align-items: center;
 display: grid;
 
@@ -72,4 +72,24 @@ grid-row: 1 / span 2;
 grid-template-columns: subgrid;
 grid-template-rows: subgrid;
 text-decoration: none;
+}
+
+[part~="row-current"] {
+background-color: var(--list-item-current-background-color, var(--helix-color-well));
+border-radius: var(--helix-radii-sm);
+}
+
+[part~="row"]:focus-visible {
+border-radius: var(--helix-radii-sm);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
+:host(:state(selected)) [part~="row"] {
+background-color: var(--list-item-selected-background-color, var(--helix-color-primary-subtle));
+border-radius: var(--helix-radii-sm);
+}
+
+:host([disabled]) {
+opacity: var(--list-item-disabled-opacity, 0.5);
 }`);

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

@@ -14,9 +14,12 @@ import { type CSSResultGroup, type TemplateResult } from 'lit';
  *
  * @csspart rail - The cell that holds the number in a railed list.
  *
+ * @cssproperty --list-item-current-background-color - The fill behind a row that is `current`.
+ * @cssproperty --list-item-disabled-opacity - The opacity of a `disabled` row.
  * @cssproperty --list-item-padding - The padding inside the row.
  * @cssproperty --list-item-rail-content - What the rail cell shows. The list sets it.
  * @cssproperty --list-item-rail-display - Whether the row has a rail. The list sets it.
+ * @cssproperty --list-item-selected-background-color - The fill behind a selected row, in a list that selects.
  * @cssproperty --list-item-term-weight - The font weight of a term in a description list.
  */
 export declare class HelixListItem extends HelixHeadlessListItem {

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/loader/root/loader-root.css.js

@@ -155,6 +155,16 @@ opacity: 1;
 }
 }
 
+[part="svg"][hidden] {
+display: inline;
+visibility: hidden;
+}
+
+[part="mark"][hidden] {
+display: flex;
+visibility: hidden;
+}
+
 @media print {
 :host {
 display: none;

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

@@ -10,6 +10,9 @@ import type { CSSResultGroup } from 'lit';
  * `currentColor`, so it matches the text color around it, including inside a
  * primary button.
  *
+ * While `delay` runs, the loader keeps its size and draws nothing, so the line
+ * it sits in does not move when it appears.
+ *
  * @since 0.1.0
  * @status stable
  * @category feedback

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,8 +73,21 @@ grid-column: 2;
 min-inline-size: 0;
 }
 
-[part="mark"] {
+[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"] {
+grid-column: 4;
 }
 
 [part="start"][data-empty] {

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,13 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Menu option, Menu row
  * @documentation https://fusion.dev/helix/components/menu
  *
+ * @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

@@ -5,9 +5,30 @@ display: block;
 
 :host([show-value]) {
 align-items: center;
+column-gap: var(--helix-space-sm);
 display: grid;
-gap: var(--helix-space-sm);
 grid-template-columns: 1fr auto;
+
+row-gap: var(--meter-label-gap, var(--helix-space-2xs));
+}
+
+slot[name="label"]::slotted(*) {
+color: var(--meter-label-color, var(--helix-color-foreground));
+display: block;
+font-size: var(--meter-label-size, var(--helix-text-sm));
+grid-column: 1 / -1;
+margin-block-end: var(--meter-label-gap, var(--helix-space-2xs));
+}
+
+:host([show-value]) slot[name="label"]::slotted(*) {
+margin-block-end: 0;
+}
+
+:host([shape="arc"]) slot[name="label"]::slotted(*),
+:host([shape="ring"]) slot[name="label"]::slotted(*) {
+
+grid-column: 1;
+margin-block: 0;
 }
 
 [part="value"] {
@@ -88,6 +109,7 @@ z-index: var(--helix-layer-raised);
 :host([shape="ring"]) {
 display: inline-grid;
 place-items: center;
+row-gap: var(--meter-label-gap, var(--helix-space-2xs));
 }
 
 :host([shape="arc"]) [part="track"],