@fusion.dev/helix 0.142.1 → 0.144.0

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);
 
@@ -58,7 +60,7 @@ var(--helix-color-foreground)
 
 [part="button"] {
 align-items: center;
-background-color: transparent;
+background-color: var(--icon-button-background-color, transparent);
 block-size: var(--_icon-button-size);
 border: var(--helix-border-thin) solid transparent;
 
@@ -75,7 +77,7 @@ border-start-start-radius: var(
 --button-radius-start,
 var(--icon-button-radius, var(--helix-radii-sm))
 );
-color: var(--_icon-button-ink);
+color: var(--icon-button-foreground-color, var(--_icon-button-ink));
 cursor: pointer;
 display: inline-flex;
 
@@ -89,8 +91,14 @@ color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
 :host(:not(:disabled)) [part="button"]:hover {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 8%, transparent);
-color: var(--_icon-button-ink-hover);
+background-color: 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-foreground-color, var(--_icon-button-ink-hover));
 }
 
 :host([shape="circle"]) [part="button"] {
@@ -115,34 +123,55 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 :host([emphasis="solid"]) [part="button"] {
-background-color: var(--_icon-button-fill);
+background-color: var(--icon-button-background-color, var(--_icon-button-fill));
 border-color: transparent;
-color: var(--_icon-button-on-tone);
+color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
 }
 :host(:not(:disabled)[emphasis="solid"]) [part="button"]:hover {
-background-color: var(--_icon-button-fill-hover);
-color: var(--_icon-button-on-tone);
+background-color: var(
+--icon-button-background-color-hover,
+var(--icon-button-background-color, var(--_icon-button-fill-hover))
+);
+color: var(--icon-button-foreground-color, var(--_icon-button-on-tone));
 }
 
 :host([emphasis="outlined"]) [part="button"] {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 6%, transparent);
+background-color: 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-tone);
+color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 :host(:not(:disabled)[emphasis="outlined"]) [part="button"]:hover {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 12%, transparent);
-color: var(--_icon-button-tone);
+background-color: 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-foreground-color, var(--_icon-button-tone));
 }
 
 :host([emphasis="subtle"]) [part="button"] {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 14%, transparent);
+background-color: var(
+--icon-button-background-color,
+color-mix(in oklab, var(--_icon-button-tone) 14%, transparent)
+);
 border-color: transparent;
-color: var(--_icon-button-tone);
+color: var(--icon-button-foreground-color, var(--_icon-button-tone));
 }
 
 :host(:not(:disabled)[emphasis="subtle"]) [part="button"]:hover {
-background-color: color-mix(in oklab, var(--_icon-button-tone) 22%, transparent);
-color: var(--_icon-button-tone);
+background-color: 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-foreground-color, var(--_icon-button-tone));
 }
 
 :host(:disabled) [part="button"] {
@@ -150,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

@@ -21,11 +21,18 @@ declare const HelixIconButton_base: (new (...args: any[]) => import("../../share
  *
  * @slot - The icon.
  *
- * @csspart button - The inner button or anchor.
+ * @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.
+ * @cssproperty --icon-button-foreground-color - Icon color.
  * @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/image/root/image-root.css.js

@@ -19,7 +19,7 @@ object-position: var(--image-position, center);
 }
 
 :host([data-status="error"]) [part="image"] {
-visibility: hidden;
+opacity: 0;
 }
 
 [part="placeholder"],

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 /**
  * @summary A field for a single line of text.
  *
@@ -24,6 +23,9 @@ import '../../icon/index.js';
  * @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/input/root/input-root.js

@@ -6,7 +6,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
-import '../../icon/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';

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

@@ -144,4 +144,14 @@ stroke-opacity: calc(0.62 * var(--helix-material-opacity));
 
 :host([material="frosted"]) [part="line"] {
 stroke-opacity: calc(0.88 * var(--helix-material-opacity));
+}
+
+[part="summary"] {
+block-size: 1px;
+clip-path: inset(50%);
+inline-size: 1px;
+margin: var(--helix-space-none);
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
 }`);

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

@@ -63,7 +63,13 @@ grid-column: 4;
 grid-row: 1 / span 2;
 }
 
-a[part="row"] {
+[part="link"] {
+align-items: center;
 color: inherit;
+display: grid;
+grid-column: 1 / 4;
+grid-row: 1 / span 2;
+grid-template-columns: subgrid;
+grid-template-rows: subgrid;
 text-decoration: none;
 }`);

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

@@ -4,8 +4,14 @@ import type { CSSResultGroup } from 'lit';
  * @summary Shows that work of unknown length is in progress.
  *
  * @description
- * Sized in `em`, so it matches the text beside it. The color is `currentColor`,
- * so it matches the text color around it, including inside a primary button.
+ * Sized from the loader size tokens, so a loader is the same size wherever it
+ * is placed and follows the density region it sits in. Set `--loader-size:
+ * 1em` to match the text beside it, as inside a button. The color is
+ * `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
@@ -14,12 +20,12 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/loader
  *
  * @cssproperty --loader-color - Color of the moving arc.
- * @cssproperty --loader-size - Diameter. Defaults to 1.5em.
+ * @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.
  */
 export declare class HelixLoader extends HelixHeadlessLoader {
     /**
-     * Diameter relative to the surrounding text.
+     * Diameter, from the loader size tokens.
      */
     size?: 'sm' | 'md' | 'lg';
     /**

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

@@ -90,7 +90,7 @@ svg[part="mark"] {
 color: var(--helix-color-foreground-subtle);
 }
 
-:host([checked]) svg[part="mark"] {
+:host(:state(checked)) svg[part="mark"] {
 color: var(--helix-color-foreground);
 }
 

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

@@ -19,12 +19,9 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --menu-background-color - Fill of the surface.
  * @cssproperty --menu-border-color - Color of the panel's edge.
  * @cssproperty --menu-border-width - Width of the panel's edge. Defaults to `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless a theme sets a border.
- *   `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a
- *   theme says otherwise.
  * @cssproperty --menu-max-block-size - The tallest the menu grows before it scrolls.
  * @cssproperty --menu-min-inline-size - The narrowest the menu gets.
  * @cssproperty --menu-shadow - Shadow under the panel. Defaults to `--helix-shadow-floating`, so the panel keeps a shadow over any content below it.
- *   floating surface sits over content nobody can predict, so it keeps a lift by default.
  */
 export declare class HelixMenu extends HelixHeadlessMenu {
     static styles: CSSResultGroup;

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"],
@@ -131,7 +153,7 @@ stroke-dasharray: var(--meter-sweep) 100;
 :host([shape="arc"]) [part~="indicator"],
 :host([shape="ring"]) [part~="indicator"] {
 
---_meter-hue: var(--helix-color-foreground-muted);
+--_meter-hue: var(--meter-color, var(--helix-color-foreground-muted));
 scale: none;
 stroke: var(--_meter-hue);
 stroke-dasharray: var(--meter-along) 100;
@@ -151,19 +173,19 @@ stroke-dashoffset: calc(var(--meter-along) * -1);
 
 :host([shape="arc"]) [part~="indicator"][data-band="good"],
 :host([shape="ring"]) [part~="indicator"][data-band="good"] {
---_meter-hue: var(--helix-color-success);
+--_meter-hue: var(--meter-color, var(--helix-color-success));
 stroke: var(--_meter-hue);
 }
 
 :host([shape="arc"]) [part~="indicator"][data-band="fair"],
 :host([shape="ring"]) [part~="indicator"][data-band="fair"] {
---_meter-hue: var(--helix-color-warning);
+--_meter-hue: var(--meter-color, var(--helix-color-warning));
 stroke: var(--_meter-hue);
 }
 
 :host([shape="arc"]) [part~="indicator"][data-band="poor"],
 :host([shape="ring"]) [part~="indicator"][data-band="poor"] {
---_meter-hue: var(--helix-color-danger);
+--_meter-hue: var(--meter-color, var(--helix-color-danger));
 stroke: var(--_meter-hue);
 }