@fusion.dev/helix-headless 0.218.0 → 0.219.0

package/dist/map/root/map-root.js

@@ -5,6 +5,7 @@ import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html as staticHtml } from 'lit/static-html.js';
 import '../../icon-button/index.js';
+import '../../tooltip/index.js';
 import { live } from 'lit/directives/live.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 const MAP_TYPES = ['standard', 'hybrid', 'satellite'];
@@ -412,9 +413,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
         }
         const entries = this.layerEntries;
         const button = this.controlTag;
+        const tip = this.tag('tooltip');
         const { material, raised } = this.controlAxes;
         return staticHtml `<${button}
         part="layers-toggle"
+        id="layers-toggle"
         exportparts="button: layers-toggle-button, live: layers-toggle-live, spinner: layers-toggle-spinner, text: layers-toggle-text"
         aria-controls="layers-menu"
         .expanded=${this.layersOpen}
@@ -436,7 +439,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             ${unsafeSVG(stack.content)}
           </svg>
         </slot>
-      </${button}>
+      </${button}><${tip} for="layers-toggle" content=${this.layersLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
       <div
         part="layers-menu"
         id="layers-menu"
@@ -494,12 +497,14 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     renderCompass(pan, rotate) {
         const { faceNorthLabel } = this;
         const button = this.controlTag;
+        const tip = this.tag('tooltip');
         const { material, raised } = this.controlAxes;
         const ground = material ?? nothing;
         return staticHtml `<div part="compass">
       ${rotate
             ? staticHtml `<${button}
               part="rotate-left"
+              id="rotate-left"
               exportparts="button: rotate-left-button, live: rotate-left-live, spinner: rotate-left-spinner, text: rotate-left-text"
               label=${this.rotateLeftLabel}
               material=${ground}
@@ -507,11 +512,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="rotate-left-icon">↺</slot>
-            </${button}>`
+            </${button}><${tip} for="rotate-left" content=${this.rotateLeftLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${pan
             ? staticHtml `<${button}
               part="pan-up"
+              id="pan-up"
               exportparts="button: pan-up-button, live: pan-up-live, spinner: pan-up-spinner, text: pan-up-text"
               label=${this.panLabel('up')}
               material=${ground}
@@ -519,11 +525,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="pan-up-icon">${this.panGlyph('up')}</slot>
-            </${button}>`
+            </${button}><${tip} for="pan-up" content=${this.panLabel('up')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${rotate
             ? staticHtml `<${button}
               part="rotate-right"
+              id="rotate-right"
               exportparts="button: rotate-right-button, live: rotate-right-live, spinner: rotate-right-spinner, text: rotate-right-text"
               label=${this.rotateRightLabel}
               material=${ground}
@@ -531,11 +538,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="rotate-right-icon">↻</slot>
-            </${button}>`
+            </${button}><${tip} for="rotate-right" content=${this.rotateRightLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${pan
             ? staticHtml `<${button}
               part="pan-start"
+              id="pan-start"
               exportparts="button: pan-start-button, live: pan-start-live, spinner: pan-start-spinner, text: pan-start-text"
               label=${this.panLabel('start')}
               material=${ground}
@@ -543,10 +551,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="pan-start-icon">${this.panGlyph('start')}</slot>
-            </${button}>`
+            </${button}><${tip} for="pan-start" content=${this.panLabel('start')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       <${button}
         part="face-north"
+        id="face-north"
         exportparts="button: face-north-button, live: face-north-live, spinner: face-north-spinner, text: face-north-text"
         label=${faceNorthLabel}
         material=${ground}
@@ -561,10 +570,11 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             <path data-end="south" d="M8 14.5 5.5 8h5Z" />
           </svg>
         </slot>
-      </${button}>
+      </${button}><${tip} for="face-north" content=${faceNorthLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
       ${pan
             ? staticHtml `<${button}
               part="pan-end"
+              id="pan-end"
               exportparts="button: pan-end-button, live: pan-end-live, spinner: pan-end-spinner, text: pan-end-text"
               label=${this.panLabel('end')}
               material=${ground}
@@ -572,11 +582,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="pan-end-icon">${this.panGlyph('end')}</slot>
-            </${button}>`
+            </${button}><${tip} for="pan-end" content=${this.panLabel('end')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${pan
             ? staticHtml `<${button}
               part="pan-down"
+              id="pan-down"
               exportparts="button: pan-down-button, live: pan-down-live, spinner: pan-down-spinner, text: pan-down-text"
               label=${this.panLabel('down')}
               material=${ground}
@@ -584,7 +595,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="pan-down-icon">${this.panGlyph('down')}</slot>
-            </${button}>`
+            </${button}><${tip} for="pan-down" content=${this.panLabel('down')} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
     </div>`;
     }
@@ -599,12 +610,14 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
             return nothing;
         }
         const button = this.controlTag;
+        const tip = this.tag('tooltip');
         const { material, raised } = this.controlAxes;
         const ground = material ?? nothing;
         return staticHtml `<div part="controls" role="toolbar" aria-label=${this.controlsLabel}>
       ${fullscreen
             ? staticHtml `<${button}
               part="fullscreen"
+              id="fullscreen"
               exportparts="button: fullscreen-button, live: fullscreen-live, spinner: fullscreen-spinner, text: fullscreen-text"
               aria-pressed=${this.filled ? 'true' : 'false'}
               label=${this.fullscreenLabel}
@@ -614,12 +627,13 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="fullscreen-icon">⤢</slot>
-            </${button}>`
+            </${button}><${tip} for="fullscreen" content=${this.fullscreenLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${menu}
       ${tilt
             ? staticHtml `<${button}
               part="tilt"
+              id="tilt"
               exportparts="button: tilt-button, live: tilt-live, spinner: tilt-spinner, text: tilt-text"
               aria-pressed=${this.pitch > 0 ? 'true' : 'false'}
               label=${this.tiltLabel}
@@ -629,11 +643,12 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
               @helix-press=${stopPress}
             >
               <slot name="tilt-icon">3D</slot>
-            </${button}>`
+            </${button}><${tip} for="tilt" content=${this.tiltLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${zoom
             ? staticHtml `<${button}
                 part="zoom-in"
+                id="zoom-in"
                 exportparts="button: zoom-in-button, live: zoom-in-live, spinner: zoom-in-spinner, text: zoom-in-text"
                 label=${this.zoomInLabel}
                 material=${ground}
@@ -642,9 +657,10 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 @helix-press=${stopPress}
               >
                 <slot name="zoom-in-icon">+</slot>
-              </${button}>
+              </${button}><${tip} for="zoom-in" content=${this.zoomInLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>
               <${button}
                 part="zoom-out"
+                id="zoom-out"
                 exportparts="button: zoom-out-button, live: zoom-out-live, spinner: zoom-out-spinner, text: zoom-out-text"
                 label=${this.zoomOutLabel}
                 material=${ground}
@@ -653,7 +669,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
                 @helix-press=${stopPress}
               >
                 <slot name="zoom-out-icon">−</slot>
-              </${button}>`
+              </${button}><${tip} for="zoom-out" content=${this.zoomOutLabel} exportparts="arrow: tooltip-arrow, arrow-bottom: tooltip-arrow-bottom, arrow-left: tooltip-arrow-left, arrow-right: tooltip-arrow-right, arrow-top: tooltip-arrow-top, surface: tooltip-surface, surface-bottom: tooltip-surface-bottom, surface-left: tooltip-surface-left, surface-right: tooltip-surface-right, surface-top: tooltip-surface-top"></${tip}>`
             : nothing}
       ${this.drawsCompass ? this.renderCompass(pan, rotate) : nothing}
     </div>`;

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

@@ -544,6 +544,14 @@ export declare class HelixHeadlessMenu extends HelixHeadlessMenu_base {
      * the filters' column. `Notifications` answers the same question for its media
      * column the same way, and for the same reason.
      *
+     * **Per section on a page with sections**, for the same reason one level
+     * down: a section has its own heading, where the reader starts reading
+     * again, so its rows line up with each other and not with another
+     * section's. A section of icons over a section of plain choices indented
+     * the plain ones by a column nothing in them filled. The rows outside any
+     * section are decided together, as before, and the trailing column stays
+     * the page's, since ticks on one edge never set labels on two.
+     *
      * Read off the light DOM rather than off the rows, so it does not depend on
      * which children have upgraded by the time this runs.
      */

package/dist/menu/root/menu-root.js

@@ -741,7 +741,28 @@ let HelixHeadlessMenu = class HelixHeadlessMenu extends MixinCollection(MixinCon
     }
     markColumns() {
         const rows = this.flies ? this.topRows : this.drilldown.rows;
-        this.toggleState('start', rows.some((row) => row.querySelector(':scope > [slot="start"]') !== null));
+        const sections = new Map();
+        for (const child of this.children) {
+            if (child.isMenuSection) {
+                sections.set(child, false);
+            }
+        }
+        let loose = false;
+        for (const row of rows) {
+            const marked = row.querySelector(':scope > [slot="start"]') !== null;
+            const parent = row.parentElement;
+            if (parent && sections.has(parent)) {
+                sections.set(parent, sections.get(parent) === true || marked);
+            }
+            else {
+                loose ||= marked;
+            }
+        }
+        this.toggleState('start', loose);
+        for (const [section, marked] of sections) {
+            ;
+            section.startColumn = marked;
+        }
         this.toggleState('mark', rows.some((row) => row.choice || this.drilldown.hasPage(row)));
     }
     mark(item, onPage) {

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

@@ -23,6 +23,10 @@ import { nothing, type PropertyValues, type TemplateResult } from 'lit';
  *
  * @csspart heading - The words that name the section.
  * @csspart section - The group that holds the heading and the rows.
+ *
+ * @cssstate start - A row in the section has content before its label, so
+ * every row in it keeps the leading column. The menu decides it for each
+ * section, apart from the rows outside one.
  */
 export declare class HelixHeadlessMenuSection extends HelixElement {
     /**
@@ -35,6 +39,11 @@ export declare class HelixHeadlessMenuSection extends HelixElement {
      * property, because the menu writes it after the section upgrades.
      */
     onPage: boolean;
+    /**
+     * @internal Set by the menu: whether a row in the section has content
+     * before its label, so the section's rows keep the leading column.
+     */
+    startColumn: boolean;
     /** @internal What a menu reads to tell a section from a row. */
     readonly isMenuSection = true;
     /**
@@ -44,6 +53,7 @@ export declare class HelixHeadlessMenuSection extends HelixElement {
      */
     private heading;
     protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
     protected firstUpdated(changed: PropertyValues): void;
     private readonly readHeading;
     protected render(): TemplateResult | typeof nothing;

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

@@ -7,6 +7,7 @@ let HelixHeadlessMenuSection = class HelixHeadlessMenuSection extends HelixEleme
         super(...arguments);
         this.label = '';
         this.onPage = true;
+        this.startColumn = false;
         this.isMenuSection = true;
         this.heading = false;
         this.readHeading = (event) => {
@@ -19,6 +20,12 @@ let HelixHeadlessMenuSection = class HelixHeadlessMenuSection extends HelixEleme
             this.heading = this.knownChildren.some((child) => child.slot === 'heading');
         }
     }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('startColumn')) {
+            this.toggleState('start', this.startColumn);
+        }
+    }
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
@@ -46,6 +53,9 @@ __decorate([
 __decorate([
     property({ attribute: false })
 ], HelixHeadlessMenuSection.prototype, "onPage", void 0);
+__decorate([
+    property({ attribute: false })
+], HelixHeadlessMenuSection.prototype, "startColumn", void 0);
 __decorate([
     state()
 ], HelixHeadlessMenuSection.prototype, "heading", void 0);

package/dist/meter/index.d.ts

@@ -1 +1,2 @@
 export * from './root/meter-root.js';
+export * from './segment/meter-segment.js';

package/dist/meter/index.js

@@ -1 +1,2 @@
 export * from './root/meter-root.js';
+export * from './segment/meter-segment.js';

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

@@ -6,7 +6,9 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @summary A measurement in a known range, with optional bands that mark it good, fair, or poor.
  *
  * @description
- * A meter shows a level within a range. Use `Progress` to show how far along a
+ * A meter shows a level within a range, or how the level divides: write
+ * `Meter.Segment` inside it for each part of the whole, and the meter measures
+ * their sum. Use `Progress` to show how far along a
  * task is. A progress bar starts empty and ends full, and full is always the
  * good end. For a meter, which end is good depends on what is measured. There
  * is no `indeterminate`, because a meter always has a value.
@@ -31,6 +33,7 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @aliases Gauge, Level, Capacity
  * @documentation https://fusion.dev/helix/components/meter
  *
+ * @slot - `Meter.Segment` elements, one for each share of the whole, drawn in the bar.
  * @slot label - A visible label. Its words name the meter in place of `label`.
  *
  * @event {HelixBandEvent} helix-band - Fired when the reading moves into another band, with the band it is in now, or `''` where it is in none. Not sent on the first render, since a meter that arrives in a band has not moved.
@@ -50,6 +53,7 @@ export type MeterBand = 'fair' | 'good' | 'poor';
  * @cssproperty --meter-along - Where a bound sits on the arc, as a length along it.
  * @cssproperty --meter-at - Where a bound sits on a linear track, as a percentage.
  * @cssproperty --meter-fraction - The value as a fraction of the range, 0 to 1.
+ * @cssproperty --meter-span - How much the range holds, `max` less `min`, which a segment divides its own value by to find its width.
  * @cssproperty --meter-sweep - How much of the circle the arc covers, as a path length.
  *
  * @cssstate fair - The reading is in a band next to the good band.
@@ -225,6 +229,17 @@ export declare class HelixHeadlessMeter extends HelixElement {
      * an empty string for none, and undefined before the first update.
      */
     private lastBand;
+    /**
+     * The segments written inside, where they can be known: none on a server or
+     * while hydrating what one sent, so the first render is the server's, and
+     * every one once the page has them.
+     */
+    private get segments();
+    /**
+     * What the meter measures: the sum of its segments where it has any, and its
+     * own `value` where it has none, so the two can never disagree.
+     */
+    private get amount();
     /** The range, clamped so `max` is never at or below `min`. */
     private get span();
     /** The reading, pulled into the range. */

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

@@ -21,6 +21,19 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         };
     }
     static { this.words = 'helix-meter'; }
+    get segments() {
+        return this.knownChildren.filter((child) => child.localName.endsWith('meter-segment'));
+    }
+    get amount() {
+        const segments = this.segments;
+        if (segments.length === 0) {
+            return this.value;
+        }
+        return segments.reduce((sum, segment) => {
+            const share = Number(segment.value ?? segment.getAttribute('value'));
+            return Number.isFinite(share) && share > 0 ? sum + share : sum;
+        }, 0);
+    }
     get span() {
         const min = Number.isFinite(this.min) ? this.min : 0;
         const max = Number.isFinite(this.max) && this.max > min ? this.max : min + 1;
@@ -28,7 +41,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     }
     get reading() {
         const { max, min } = this.span;
-        return Math.min(max, Math.max(min, Number.isFinite(this.value) ? this.value : min));
+        return Math.min(max, Math.max(min, Number.isFinite(this.amount) ? this.amount : min));
     }
     get fraction() {
         const { max, min } = this.span;
@@ -36,12 +49,12 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     }
     get ratio() {
         const { max, min } = this.span;
-        const raw = Number.isFinite(this.value) ? this.value : min;
+        const raw = Number.isFinite(this.amount) ? this.amount : min;
         return (raw - min) / (max - min);
     }
     get beyond() {
         const { max, min } = this.span;
-        const raw = Number.isFinite(this.value) ? this.value : min;
+        const raw = Number.isFinite(this.amount) ? this.amount : min;
         return raw > max ? 'over' : raw < min ? 'under' : undefined;
     }
     get thresholds() {
@@ -69,7 +82,7 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
     }
     get text() {
         return (this.valueText ||
-            readingText(Number.isFinite(this.value) ? this.value : this.span.min, this.ratio, wordsLocale(this), this.formatOptions));
+            readingText(Number.isFinite(this.amount) ? this.amount : this.span.min, this.ratio, wordsLocale(this), this.formatOptions));
     }
     willUpdate(changed) {
         super.willUpdate(changed);
@@ -134,17 +147,20 @@ let HelixHeadlessMeter = class HelixHeadlessMeter extends HelixElement {
         const at = (value) => `${((value - min) / (max - min)) * 100}%`;
         return html `<slot name="label" @slotchange=${this.renamed}></slot>${this.shape
             ? this.renderRound()
-            : html `<div part="track">
+            : html `<div part="track" style="--meter-span: ${max - min}">
+            <slot @slotchange=${this.renamed}></slot>
             ${bounds
                 ? html `<span part="tick" style="--meter-at: ${at(bounds.low)}"></span>
                     <span part="tick" style="--meter-at: ${at(bounds.high)}"></span>`
                 : nothing}
-            <div
-              part="indicator${band ? { fair: ' indicator-fair', good: ' indicator-good', poor: ' indicator-poor' }[band] : ''}${beyond ? { over: ' indicator-over', under: ' indicator-under' }[beyond] : ''}"
-              data-band=${band ?? nothing}
-              data-beyond=${beyond ?? nothing}
-              style="--meter-fraction: ${this.fraction}"
-            ></div>
+            ${this.segments.length > 0
+                ? nothing
+                : html `<div
+                    part="indicator${band ? { fair: ' indicator-fair', good: ' indicator-good', poor: ' indicator-poor' }[band] : ''}${beyond ? { over: ' indicator-over', under: ' indicator-under' }[beyond] : ''}"
+                    data-band=${band ?? nothing}
+                    data-beyond=${beyond ?? nothing}
+                    style="--meter-fraction: ${this.fraction}"
+                  ></div>`}
           </div>`}
       ${this.showValue ? html `<span part="value">${this.text}</span>` : nothing}${drawStatus(this.status)}`;
     }

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

@@ -0,0 +1,74 @@
+import { HelixElement } from '@fusion.dev/helix-core';
+import { type PropertyValues, type TemplateResult } from 'lit';
+/**
+ * @summary One share of a meter's whole, drawn as a slice of its bar.
+ *
+ * @description
+ * A segment says how much of the range one part of the whole takes, such as the
+ * tokens a model's context holds for its tools, against the tokens it holds for
+ * the conversation. Write one for each part inside a `Meter`.
+ *
+ * **The meter's reading is the sum of its segments.** `value` on the meter is
+ * ignored while it has any, so the two cannot disagree, and the bands, the ticks
+ * and the reading answer to the total. A segment is drawn as wide as its `value`
+ * is of the meter's range, so segments that add up to less than the range leave
+ * the rest of the track empty, and ones that add up to more are cut at the end.
+ *
+ * **A meter's children are presentational to a screen reader**, so a segment
+ * reaches no one that cannot see the bar. Say the breakdown in text beside it,
+ * such as a list with the name and the amount of each part, which is also where a
+ * reader finds the exact figures.
+ *
+ * A segment draws only in the bar. A meter in `ring` or `arc` draws its total.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category feedback
+ * @documentation https://fusion.dev/helix/components/meter
+ *
+ * @slot - Nothing. A segment draws its share and has no content.
+ *
+ * @csspart fill - The slice of the bar the segment takes.
+ *
+ * @cssproperty --meter-segment-value - How much of the range the segment takes, in the meter's own units.
+ */
+export declare class HelixHeadlessMeterSegment extends HelixElement {
+    /**
+     * What the segment is, such as "Tools", which names the slice when a pointer
+     * rests on it.
+     *
+     * Not announced: see the note on a meter's children above.
+     */
+    label: string;
+    /**
+     * What the segment means, as it does on a callout. Takes the tone's color in
+     * place of the next color in the series.
+     */
+    tone?: 'accent' | 'danger' | 'info' | 'neutral' | 'primary' | 'success' | 'warning';
+    /**
+     * How much of the meter's range the segment takes, in the units of the meter's
+     * `min` and `max`.
+     *
+     * A value that is not a number, or is below zero, draws nothing.
+     */
+    value: number;
+    /** The meter this is a segment of, which reads its sum. */
+    private get meter();
+    /** The amount drawn: never below zero, and never a number that is not one. */
+    private get amount();
+    /**
+     * The meter sums its segments, so it hears when one arrives or changes. The
+     * segment is the one that knows, so it reaches up by identity and the meter
+     * does not have to ask. A meter's own update never updates a segment, so this
+     * cannot loop.
+     */
+    protected updated(changed: PropertyValues): void;
+    /** A segment taken out leaves the meter with a smaller sum, which it reads again. */
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-meter-segment': HelixHeadlessMeterSegment;
+    }
+}

package/dist/meter/segment/meter-segment.js

@@ -0,0 +1,47 @@
+import { __decorate } from "tslib";
+import { closestInstance, customElement, HelixElement, numberConverter, } from '@fusion.dev/helix-core';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { HelixHeadlessMeter } from '../root/meter-root.js';
+let HelixHeadlessMeterSegment = class HelixHeadlessMeterSegment extends HelixElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.value = 0;
+    }
+    get meter() {
+        return closestInstance(this, HelixHeadlessMeter);
+    }
+    get amount() {
+        return Number.isFinite(this.value) && this.value > 0 ? this.value : 0;
+    }
+    updated(changed) {
+        super.updated(changed);
+        this.meter?.requestUpdate();
+    }
+    disconnectedCallback() {
+        const meter = this.meter;
+        super.disconnectedCallback();
+        queueMicrotask(() => meter?.requestUpdate());
+    }
+    render() {
+        return html `<span
+      part="fill"
+      title=${this.label || nothing}
+      style="--meter-segment-value: ${this.amount}"
+    ></span>`;
+    }
+};
+__decorate([
+    property()
+], HelixHeadlessMeterSegment.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixHeadlessMeterSegment.prototype, "tone", void 0);
+__decorate([
+    property({ converter: numberConverter('value', 0) })
+], HelixHeadlessMeterSegment.prototype, "value", void 0);
+HelixHeadlessMeterSegment = __decorate([
+    customElement('helix-headless-meter-segment')
+], HelixHeadlessMeterSegment);
+export { HelixHeadlessMeterSegment };

package/dist/scroll-area/root/scroll-area-root.d.ts

@@ -35,6 +35,11 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
  * scrollbar, the browser's or the component's, and clips what is past it.
  * Leave it unset to scroll both ways.
  *
+ * **A mask on the viewport also masks the browser's scrollbar.** While a
+ * scrollbar takes room beside the content, the viewport carries its size in
+ * `--scroll-area-gutter-inline-end` or `--scroll-area-gutter-block-end`, so a
+ * mask can leave that room opaque. The styled tier's fades use them.
+ *
  * The viewport's `scroll` and `scrollend` are sent again from the host, which
  * is the element you hold. A thumb dragged across the content sends one
  * `scrollend`, once it is let go. In React, bind them with `onScroll` and
@@ -56,7 +61,7 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
  * @event {Event} scrollend - The content stopped scrolling. Sent from the host, as `scroll` is, and once for a thumb dragged across the content. Does not bubble.
  *
  * @csspart corner - The square where the two scrollbars meet, under `scrollbars`. Hidden unless both are drawn.
- * @csspart edges - The layer that draws the cues on the inline start and end edges.
+ * @csspart edges - The layer over the viewport. The styled tier draws the focus ring on it, and the painted fades at the inline start and end.
  * @csspart scrollbar - Each scrollbar, under `scrollbars`. Hidden on an axis that has none.
  * @csspart scrollbar-horizontal - The scrollbar along the inline axis, alongside `scrollbar`.
  * @csspart scrollbar-vertical - The scrollbar along the block axis, alongside `scrollbar`.
@@ -66,6 +71,8 @@ declare const EDGES: readonly ['block-start', 'block-end', 'inline-start', 'inli
  * @csspart thumb-vertical - The thumb of the vertical scrollbar, alongside `thumb`.
  * @csspart viewport - The scrolling box.
  *
+ * @cssproperty --scroll-area-gutter-block-end - The room the browser's horizontal scrollbar takes at the block end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content.
+ * @cssproperty --scroll-area-gutter-inline-end - The room the browser's vertical scrollbar takes at the inline end of the viewport, in pixels. Written on the `viewport` part while that scrollbar takes room, and absent while it draws over the content.
  * @cssproperty --scroll-area-scroll-fraction - How far along its axis the content is scrolled, from 0 at the start to 1 at the end. Written on each `scrollbar` part, so its thumb inherits it. Counted from the right on a right-to-left page.
  * @cssproperty --scroll-area-thumb-fraction - The share of the track the thumb covers, from 0 to 1, which is how much of the content is in view. Written on each `scrollbar` part.
  *
@@ -119,6 +126,12 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
      * Whether there is anything to scroll at all, which decides the tab stop.
      */
     private scrolls;
+    /**
+     * The room the browser's own scrollbars take, in pixels: the vertical one at
+     * the inline end, and the horizontal one at the block end. Zero where they are
+     * drawn over the content.
+     */
+    private gutter;
     private watcher;
     /**
      * The element that scrolls. Use it to scroll the content from your code.
@@ -154,8 +167,12 @@ export declare class HelixHeadlessScrollArea extends HelixElement {
     private watchContent;
     protected updated(changed: PropertyValues): void;
     private readonly handleSlotChange;
-    /** The axis `orientation` takes away, clipped where the content would overflow it. */
-    private get clipped();
+    /**
+     * The viewport's inline style: the axis `orientation` takes away, clipped
+     * where the content would overflow it, and the room each of the browser's
+     * scrollbars takes.
+     */
+    private get viewportStyle();
     protected render(): TemplateResult;
     /**
      * The scrollbars, the thumbs in them and the corner.