@fusion.dev/helix 0.143.0 → 0.145.0

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

@@ -29,6 +29,8 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Gauge, Level, Capacity
  * @documentation https://fusion.dev/helix/components/meter
  *
+ * @slot label - A visible label, above a bar and under a ring or an arc. Its words name it in place of `label`.
+ *
  * @csspart indicator - The part of the track the value fills.
  * @csspart indicator-fair - The fill while the reading is in a band next to the good band. Set alongside `indicator`.
  * @csspart indicator-good - The fill while the reading is in the good band. Set alongside `indicator`.
@@ -40,6 +42,9 @@ import type { CSSResultGroup } from 'lit';
  * @csspart value - The reading as text, shown when `show-value` is set.
  *
  * @cssproperty --meter-color - The fill color. Overrides the band's tone.
+ * @cssproperty --meter-label-color - The color of a slotted label.
+ * @cssproperty --meter-label-gap - The space between a slotted label and the meter.
+ * @cssproperty --meter-label-size - The type size of a slotted label.
  * @cssproperty --meter-ring-size - The width and height of the drawing in `ring` and `arc`.
  * @cssproperty --meter-ring-width - The thickness of the stroke in `ring` and `arc`.
  * @cssproperty --meter-size - The thickness of the bar.

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,14 @@ 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"`.
  */
 export declare class HelixNavigation extends HelixHeadlessNavigation {
     static styles: CSSResultGroup;

package/dist/notifications/notification/notification.css.js

@@ -241,6 +241,11 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
+[part="item"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: calc(var(--helix-size-focus-offset) * -1);
+}
+
 @media print {
 [part="dismiss"] {
 display: none;

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

@@ -71,6 +71,28 @@ 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"]: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 +113,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

@@ -2,9 +2,9 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`[part="field"] {
 align-items: center;
 background-color: var(--number-input-background-color, var(--helix-color-well));
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+block-size: var(--number-input-size, var(--helix-size-control));
+border: var(--helix-border-thin) solid var(--number-input-border-color, var(--helix-color-border));
+border-radius: var(--number-input-radius, var(--helix-radii-sm));
 box-sizing: border-box;
 display: flex;
 

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

@@ -33,6 +33,9 @@ import type { CSSResultGroup } from 'lit';
  * @csspart increment - The button that steps the value up.
  *
  * @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-radius - Corner radius of the field.
+ * @cssproperty --number-input-size - Height of the field.
  */
 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);
 }
@@ -90,6 +114,13 @@ 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 +133,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);
 }

package/dist/object-inspector/root/object-inspector-root.d.ts

@@ -9,7 +9,9 @@ import '../../copy-button/index.js';
  * The styled tier draws the tree in the Code Block frame. Keys and each type of
  * value take their colors from the syntax colors code blocks use. Each row is
  * one line, and a long string ends in an ellipsis, so every row has the same
- * height and a windowed tree does not measure rows one by one.
+ * height and a windowed tree does not measure rows one by one. A filter's
+ * matches take a tinted ground, and the filter field is a band of the same
+ * frame, under the label.
  *
  * @since 0.1.0
  * @status stable
@@ -21,6 +23,7 @@ import '../../copy-button/index.js';
  * @cssproperty --object-inspector-block-size - The height of the scrolling box when `windowed` is set.
  * @cssproperty --object-inspector-border-color - The color of the edge around the tree and its header.
  * @cssproperty --object-inspector-header-background-color - The background of the bar that holds the label.
+ * @cssproperty --object-inspector-match-background-color - The background of an entry a filter matched.
  * @cssproperty --object-inspector-radius - The corner radius of the tree.
  */
 export declare class HelixObjectInspector extends HelixHeadlessObjectInspector {

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

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessObjectInspector } from '@fusion.dev/helix-headless/object-inspector';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './object-inspector-root.css.js';
 import '../../copy-button/index.js';
 let HelixObjectInspector = class HelixObjectInspector extends HelixHeadlessObjectInspector {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
 };
 HelixObjectInspector = __decorate([
     customElement('helix-object-inspector')

package/dist/orb/index.d.ts

@@ -1,2 +1,2 @@
 export * from './root/orb-root.js';
-export * from './shapes.js';
+export { ORB_STATES, type OrbState } from './shapes.js';

package/dist/orb/index.js

@@ -1,2 +1,2 @@
 export * from './root/orb-root.js';
-export * from './shapes.js';
+export { ORB_STATES } from './shapes.js';

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

@@ -36,6 +36,10 @@ import { type OrbState } from '../shapes.js';
  * drawing of your own, the headless `Loader` holds the same busy progress bar
  * and its name.
  *
+ * Each state is also a custom state, such as `:state(thinking)` or
+ * `:state(done)`, so a page can style what sits around an orb by what it shows,
+ * whether the state was written as an attribute or set from script.
+ *
  * @since 0.8.0
  * @status stable
  * @category feedback
@@ -43,13 +47,31 @@ import { type OrbState } from '../shapes.js';
  * @documentation https://fusion.dev/helix/components/orb
  *
  * @csspart canvas - The canvas the dots are drawn on.
+ * @csspart live - The live region that says the new state when `announce` is set. It is rendered from the first change of state and clipped out of view.
  *
  * @cssproperty --orb-color - The color of the nearest dots. Defaults to `currentColor`.
  * @cssproperty --orb-ground - The color the farthest dots fade toward. Defaults to the page's background.
  * @cssproperty --orb-size - The diameter. Overrides `size`.
+ *
+ * @cssstate connecting - The orb shows `connecting`.
+ * @cssstate done - The orb shows `done`.
+ * @cssstate fetching - The orb shows `fetching`.
+ * @cssstate listening - The orb shows `listening`.
+ * @cssstate thinking - The orb shows `thinking`, which is also what a state it does not draw shows.
+ * @cssstate waiting - The orb shows `waiting`.
+ * @cssstate working - The orb shows `working`.
  */
 export declare class HelixOrb extends HelixElement {
     static styles: CSSResultGroup;
+    /**
+     * Says each new state through a polite live region, such as "Working" and
+     * then "Done".
+     *
+     * Off by default, because the name and the busy state already change with
+     * the state, and an orb beside a stream of messages would otherwise talk
+     * over them. Set it on an orb that is the only sign of progress on the page.
+     */
+    announce: boolean;
     /**
      * The name read by screen readers. Defaults to the name of the state, such
      * as "Thinking".
@@ -82,18 +104,22 @@ export declare class HelixOrb extends HelixElement {
      * verb we have not made a shape for should cost a reader a less specific
      * indicator, not an empty box where the indicator was.
      *
-     * Not reflected: no rule selects on it, because the state is drawn rather than
-     * styled. A consumer writing the attribute can still select on their own
-     * markup.
+     * Not reflected, because a state set from script would then write an
+     * attribute onto the host after a server sent it without one. Each state is
+     * a custom state instead, such as `:state(working)`.
      */
     state: OrbState;
     /**
      * The word for each state, for a page in another language.
      *
-     * A state left out keeps its English word, and `label` wins over both. It is
-     * a property with no attribute, keyed by state, such as `{ thinking: '…' }`.
+     * A state left out keeps its English word, and `label` wins over both.
+     * Keyed by state, such as `{ thinking: '…' }`. As an attribute it is that
+     * object as JSON, such as `state-labels='{"done":"Terminé"}'`, so server
+     * markup and plain HTML can carry the words too.
      */
     stateLabels: Partial<Record<OrbState, string>>;
+    /** The region `announce` speaks in. */
+    private readonly status;
     private canvas;
     private context;
     /**

package/dist/orb/root/orb-root.js

@@ -4,9 +4,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, HelixElement, hostAria, PaintGateController, readColor, } from '@fusion.dev/helix-core';
+import { customElement, drawStatus, HelixElement, hostAria, PaintGateController, readColor, StatusController, } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { styles as liveStyles } from '../../shared/live/live.css.js';
 import { blendStaged, evenSphere, fibonacci, meshFor, ORB_STATES, orbPoint, paramsFor, project, smoother, stateDistance, TRAIL, } from '../shapes.js';
 import { styles } from './orb-root.css.js';
 const MORPH_NEAR = 380;
@@ -22,13 +23,28 @@ const LABELS = {
     waiting: 'Waiting',
     working: 'Working',
 };
+const labelsConverter = {
+    fromAttribute: (value) => {
+        try {
+            const parsed = JSON.parse(value ?? '');
+            return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+                ? parsed
+                : {};
+        }
+        catch {
+            return {};
+        }
+    },
+};
 const GRAY = [128, 128, 128];
 let HelixOrb = class HelixOrb extends HelixElement {
     constructor() {
         super(...arguments);
+        this.announce = false;
         this.label = '';
         this.state = 'thinking';
         this.stateLabels = {};
+        this.status = new StatusController(this);
         this.context = null;
         this.gate = new PaintGateController(this, {
             canRun: () => !!this.context && !this.lost,
@@ -67,7 +83,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
             this.gate.play();
         };
     }
-    static { this.styles = styles; }
+    static { this.styles = [liveStyles, styles]; }
     willUpdate(changed) {
         super.willUpdate(changed);
         const state = ORB_STATES.includes(this.state)
@@ -78,12 +94,22 @@ let HelixOrb = class HelixOrb extends HelixElement {
             role: state === 'done' ? 'img' : 'progressbar',
         });
         this.internals.ariaBusy = state === 'done' ? 'false' : 'true';
+        this.toggleState('connecting', state === 'connecting');
+        this.toggleState('done', state === 'done');
+        this.toggleState('fetching', state === 'fetching');
+        this.toggleState('listening', state === 'listening');
+        this.toggleState('thinking', state === 'thinking');
+        this.toggleState('waiting', state === 'waiting');
+        this.toggleState('working', state === 'working');
         if (changed.has('state') && changed.get('state') !== undefined) {
             this.turn();
+            if (this.announce) {
+                this.status.say(this.label || this.stateLabels[state] || LABELS[state]);
+            }
         }
     }
     render() {
-        return html `<canvas part="canvas" aria-hidden="true"></canvas>`;
+        return html `<canvas part="canvas" aria-hidden="true"></canvas>${drawStatus(this.status)}`;
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
@@ -236,6 +262,9 @@ let HelixOrb = class HelixOrb extends HelixElement {
         }
     }
 };
+__decorate([
+    property({ type: Boolean })
+], HelixOrb.prototype, "announce", void 0);
 __decorate([
     property()
 ], HelixOrb.prototype, "label", void 0);
@@ -246,7 +275,7 @@ __decorate([
     property()
 ], HelixOrb.prototype, "state", void 0);
 __decorate([
-    property({ attribute: false })
+    property({ attribute: 'state-labels', converter: labelsConverter })
 ], HelixOrb.prototype, "stateLabels", void 0);
 HelixOrb = __decorate([
     customElement('helix-orb')

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

@@ -123,6 +123,16 @@ var(--outline-indent, var(--helix-space-sm))
 );
 }
 
+::slotted([slot="heading"]) {
+color: var(--helix-color-foreground);
+font-size: var(--helix-text-xs);
+font-weight: var(--helix-weight-semibold);
+line-height: var(--helix-leading-normal);
+margin-block: 0 var(--helix-space-xs);
+margin-inline: 0;
+padding-inline-start: calc(var(--outline-rail) + var(--helix-space-sm));
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -12,6 +12,13 @@ import type { CSSResultGroup } from 'lit';
  * `data-level` is at the top level. The outline does not read heading levels
  * from the document, because the headings are not always in the document.
  *
+ * Links in a nested `<ul>` take their indentation from your own stylesheet:
+ * the outline's styles reach the elements slotted into it and nothing inside
+ * them. Write the links flat with `data-level` for the indentation drawn here,
+ * and screen readers still hear them as nested lists.
+ *
+ * A heading slotted into `heading` is set above the links, lined up with them.
+ *
  * @since 0.1.0
  * @status stable
  * @category navigation

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

@@ -13,10 +13,11 @@ gap: var(--pin-input-gap, var(--helix-space-xs));
 
 [part="cell"] {
 all: unset;
-background-color: var(--helix-color-well);
-block-size: var(--helix-size-control);
-border: var(--helix-border-thin) solid var(--helix-color-border);
-border-radius: var(--helix-radii-sm);
+background-color: var(--pin-input-cell-background-color, var(--helix-color-well));
+block-size: var(--pin-input-cell-size, var(--helix-size-control));
+border: var(--helix-border-thin) solid
+var(--pin-input-cell-border-color, var(--helix-color-border));
+border-radius: var(--pin-input-cell-radius, var(--helix-radii-sm));
 box-sizing: border-box;
 color: var(--helix-color-foreground);
 font-family: var(--helix-font-sans);
@@ -24,7 +25,7 @@ font-size: var(--helix-text-lg);
 
 font-variant-numeric: tabular-nums;
 font-weight: var(--helix-weight-medium);
-inline-size: var(--helix-size-control);
+inline-size: var(--pin-input-cell-size, var(--helix-size-control));
 text-align: center;
 transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
@@ -56,6 +57,12 @@ background-color: transparent;
 font-size: var(--helix-text-xl);
 }
 
+[part="separator"] {
+align-self: center;
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-lg);
+}
+
 [part="cell"]::placeholder {
 color: var(--helix-color-foreground-subtle);
 }

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

@@ -21,7 +21,12 @@ import type { CSSResultGroup } from 'lit';
  *
  * @csspart cell - One box.
  * @csspart field - The row of boxes.
+ * @csspart separator - The text `format` draws between two boxes.
  *
+ * @cssproperty --pin-input-cell-background-color - Fill behind each box.
+ * @cssproperty --pin-input-cell-border-color - Edge of each box at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --pin-input-cell-radius - Corner radius of each box.
+ * @cssproperty --pin-input-cell-size - Width and height of each box.
  * @cssproperty --pin-input-gap - The space between one box and the next.
  */
 export declare class HelixPinInput extends HelixHeadlessPinInput {

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

@@ -11,6 +11,9 @@ background-color: var(--helix-color-surface-overlay);
 border: var(--popover-border-width, var(--helix-border-floating)) solid
 var(--popover-border-color, var(--helix-color-border));
 
+--_popover-edge: var(--popover-border-width, var(--helix-border-floating)) solid
+var(--popover-border-color, var(--helix-color-border));
+
 border-radius: var(--helix-radii-sm);
 box-shadow: var(--popover-shadow, var(--helix-shadow-floating));
 box-sizing: border-box;
@@ -89,6 +92,39 @@ padding: var(--popover-padding, var(--helix-space-md));
 padding: var(--popover-padding, var(--helix-space-none));
 }
 
+[part="popover"]:focus,
+[part="popover"]:focus-visible {
+outline: none;
+}
+
+[part~="arrow"] {
+background-color: var(--helix-color-surface-overlay);
+block-size: var(--popover-arrow-size, 0.5rem);
+inline-size: var(--popover-arrow-size, 0.5rem);
+position: absolute;
+rotate: 45deg;
+}
+
+[part="popover"][data-placement^="bottom"] [part~="arrow"] {
+border-left: var(--_popover-edge);
+border-top: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="top"] [part~="arrow"] {
+border-bottom: var(--_popover-edge);
+border-right: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="right"] [part~="arrow"] {
+border-bottom: var(--_popover-edge);
+border-left: var(--_popover-edge);
+}
+
+[part="popover"][data-placement^="left"] [part~="arrow"] {
+border-right: var(--_popover-edge);
+border-top: var(--_popover-edge);
+}
+
 @media print {
 :host {
 display: none;

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Popper, Flyout, Overlay
  * @documentation https://fusion.dev/helix/components/popover
  *
+ * @cssproperty --popover-arrow-size - Size of the point drawn with `arrow`. Tooltip's point is the same size.
  * @cssproperty --popover-border-color - Color of the panel's edge.
  * @cssproperty --popover-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

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

@@ -5,9 +5,29 @@ 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(--progress-label-gap, var(--helix-space-2xs));
+}
+
+slot[name="label"]::slotted(*) {
+color: var(--progress-label-color, var(--helix-color-foreground));
+display: block;
+font-size: var(--progress-label-size, var(--helix-text-sm));
+grid-column: 1 / -1;
+margin-block-end: var(--progress-label-gap, var(--helix-space-2xs));
+}
+
+:host([show-value]) slot[name="label"]::slotted(*) {
+margin-block-end: 0;
+}
+
+:host([shape="ring"]) slot[name="label"]::slotted(*) {
+
+grid-column: 1;
+margin-block: 0;
 }
 
 [part="value"] {
@@ -98,6 +118,7 @@ translate: 0;
 :host([shape="ring"]) {
 display: inline-grid;
 place-items: center;
+row-gap: var(--progress-label-gap, var(--helix-space-2xs));
 }
 
 :host([shape="ring"]) [part="track"] {

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

@@ -18,7 +18,12 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Progress bar, Loading bar
  * @documentation https://fusion.dev/helix/components/progress
  *
+ * @slot label - A visible label, above a bar and under a ring. Its words name it in place of `label`.
+ *
  * @cssproperty --progress-color - Fill of the part that is done.
+ * @cssproperty --progress-label-color - Color of a slotted label.
+ * @cssproperty --progress-label-gap - Space between a slotted label and the bar.
+ * @cssproperty --progress-label-size - Type size of a slotted label.
  * @cssproperty --progress-ring-size - Diameter of the ring.
  * @cssproperty --progress-ring-width - Thickness of the ring's stroke.
  * @cssproperty --progress-size - Thickness of the bar.

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

@@ -8,7 +8,7 @@ font: inherit;
 
 color: var(--quote-color, var(--helix-color-foreground-muted));
 font: inherit;
-font-style: italic;
+font-style: var(--quote-font-style, italic);
 }
 
 @media print {

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

@@ -14,6 +14,7 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/quote
  *
  * @cssproperty --quote-color - Color of the quoted text.
+ * @cssproperty --quote-font-style - The slant of the quoted text, `italic` by default. Set `normal` for a face whose italic is too loud, or `oblique` for one with no italic of its own.
  */
 export declare class HelixQuote extends HelixHeadlessQuote {
     static styles: CSSResultGroup;