@fusion.dev/helix-headless 0.184.0 → 0.186.0

package/dist/isometric-heatmap/root/isometric-heatmap-root.d.ts

@@ -0,0 +1,118 @@
+import { nothing, type TemplateResult } from 'lit';
+import '../../tooltip/index.js';
+import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
+/**
+ * @summary A heatmap drawn as a relief, where each reading stands as tall as its value.
+ *
+ * @description
+ * The same strip as `Heatmap`, seen from above at an angle. Each reading is a
+ * prism: its top face takes the cell's tone, and its height repeats the value,
+ * measured from zero against the highest reading in the table. `rows="7"`
+ * makes a contribution graph, with each week a column running down to the
+ * right.
+ *
+ * **The height says what the tone says.** Read the exact value from the tooltip
+ * or the table, and compare readings by tone. A tall reading at the front can
+ * hide a short one behind it, so the newest column stands at the front, where
+ * nothing covers it.
+ *
+ * **Everything else is `Heatmap`.** The table named by `for`, the tones and
+ * thresholds, the keys, the tooltip, the overview, `selection-mode`, and the
+ * events all work as they do there. The class extends the headless heatmap,
+ * and its own entry point carries the drawing, so a page using only `Heatmap`
+ * loads none of it.
+ *
+ * **`flat` lays every prism down** at no height, which leaves the tones on a
+ * plane at the same angle.
+ *
+ * **`gap` and `min-cell` set the smallest cell.** The drawing scales as a
+ * whole, so a wider box draws larger cells and the gap grows with them. A box
+ * too narrow for every column at `min-cell` draws the newest that fit.
+ *
+ * **The drawing is SVG and holds still.** It scales with its box through its
+ * `viewBox`, needs no WebGL, and has no motion to pause.
+ *
+ * **Keyboard.** The keys are `Heatmap`'s. Down moves to the next reading in a
+ * column, drawn down to the left, and Right to the same reading in the next
+ * column, drawn down to the right.
+ *
+ * | Key | What it does |
+ * |---|---|
+ * | Tab | Moves focus to the strip and shows the first cell. |
+ * | Down, Up | Moves to the next or the previous cell. |
+ * | Right, Left | Moves a column on or back, a week with `rows="7"`. On a right-to-left page, Left moves on. |
+ * | Home, End | Moves to the first or the last cell. |
+ * | Page Down, Page Up | Moves a month on or back where the rows carry dates, and four columns otherwise. |
+ * | Enter, Space | Presses the cell, which sends `helix-reading-press`, and selects it or lets it go under `selection-mode`. |
+ * | Shift with an arrow, Home, End, Page Up or Page Down | Selects every cell from the last one pressed to where the key went, under `selection-mode="multiple"`. |
+ * | Escape | Puts the cell's tooltip away. |
+ *
+ * @since 0.185.0
+ * @status experimental
+ * @category charts
+ * @aliases Isometric chart, 3D heatmap, Relief chart, Isometric contribution graph
+ * @documentation https://fusion.dev/helix/components/isometric-heatmap
+ *
+ * @csspart cell - One reading: a group holding its three faces.
+ * @csspart drawing - The SVG every prism is drawn in. It is mirrored on a right-to-left page.
+ * @csspart left-face - The face of a prism toward the next row, drawn at its lower left.
+ * @csspart right-face - The face of a prism toward the next column, drawn at its lower right.
+ * @csspart row - A column of prisms, which a grid reads as a row, under `selection-mode`.
+ * @csspart strip - The box the drawing fills, which takes focus to be read by key. It is named by the host's `aria-labelledby` or `aria-label`, then by `label`, then by the caption of the table.
+ * @csspart top-face - The top of a prism, which carries the reading's tone.
+ *
+ * @cssproperty --isometric-heatmap-span - How many cells the drawing spans across: its columns and its rows together. The component writes it on the strip, and a stylesheet that caps the cell size reads it.
+ */
+export declare class HelixHeadlessIsometricHeatmap extends HelixHeadlessHeatmap {
+    /**
+     * The key this family's words are registered under, its styled tag:
+     * `registerWords('de', { 'helix-isometric-heatmap': { emptyText: 'Keine Werte' } })`.
+     */
+    static words: string;
+    protected static markRules: string[];
+    /**
+     * Draws every prism at no height, so the tones lie on a plane.
+     */
+    flat: boolean;
+    /**
+     * How tall the highest reading stands, in cells. Every other reading stands
+     * at its share of it.
+     */
+    relief: number;
+    /** The prisms drawn on the last render, which the tooltip is placed against. */
+    private shown;
+    /**
+     * How many readings fit, as whole columns, newest kept.
+     *
+     * The drawing runs at 30 degrees, so a cell takes `ACROSS` of its width, and
+     * the rows run across too: a strip `rows` deep starts that many cells to the
+     * left of its first column.
+     */
+    protected get room(): number;
+    /** The drawn readings as prisms, standing against the highest reading in the table. */
+    private drawnRelief;
+    protected render(): TemplateResult;
+    /**
+     * One reading as a prism. The sides come first, so the top face is painted
+     * over the edge they share with it.
+     *
+     * Under `selection-mode` the prism is a `gridcell` named by its row in the
+     * table and saying whether it is selected, as the flat strip's cell is.
+     */
+    private renderPrism;
+    /**
+     * The prisms as a grid's rows, one for each column of the strip, which is
+     * also the order they are painted in.
+     */
+    private renderPrismRows;
+    /**
+     * The bubble over the top face of the reading the pointer or the keys rest
+     * on, placed as a share of the drawing, which the strip's box matches.
+     */
+    protected renderTooltip(grid?: boolean): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-headless-isometric-heatmap': HelixHeadlessIsometricHeatmap;
+    }
+}

package/dist/isometric-heatmap/root/isometric-heatmap-root.js

@@ -0,0 +1,127 @@
+import { __decorate } from "tslib";
+import { CHART_PLOT, commaList, customElement, drawTooltip, MIRROR_RULE, spokenReading, writtenList, writtenNumbers, } from '@fusion.dev/helix-core';
+import { html, nothing, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import '../../tooltip/index.js';
+import { fits, toneOf } from '../../heatmap/root/buckets.js';
+import { HelixHeadlessHeatmap } from '../../heatmap/root/heatmap-root.js';
+import { ACROSS, heightsOf, highestOf, reliefOf } from '../projection.js';
+let HelixHeadlessIsometricHeatmap = class HelixHeadlessIsometricHeatmap extends HelixHeadlessHeatmap {
+    constructor() {
+        super(...arguments);
+        this.flat = false;
+        this.relief = 2;
+        this.shown = undefined;
+    }
+    static { this.words = 'helix-isometric-heatmap'; }
+    static { this.markRules = [MIRROR_RULE]; }
+    get room() {
+        const width = this.width;
+        if (width === undefined) {
+            return this.points.length;
+        }
+        const pitch = this.cellPx + this.gapPx;
+        const across = width / ACROSS - this.rowCount * pitch - this.gapPx;
+        return fits(this.points.length, Math.max(across, Number.MIN_VALUE), this.cellPx, this.gapPx, this.rowCount);
+    }
+    drawnRelief() {
+        const tallest = this.flat ? 0 : Math.max(0, this.relief || 0);
+        const highest = highestOf(this.points.map((point) => point.value));
+        const heights = heightsOf(this.drawn.map((point) => point.value), highest, tallest);
+        return reliefOf(heights, this.rowCount, this.cellPx / (this.cellPx + this.gapPx));
+    }
+    render() {
+        const bounds = writtenNumbers(this.thresholds);
+        const palette = writtenList(this.tones);
+        const cells = this.drawn;
+        const readable = cells.length > 0;
+        const grid = readable && this.selectionMode !== undefined;
+        const keys = this.selectionMode ? this.keysOf(cells) : [];
+        const chosen = new Set(this.selectionMode ? commaList(this.value) : []);
+        const relief = this.drawnRelief();
+        this.shown = relief;
+        const at = this.pointer.at;
+        const prisms = relief.prisms.map((prism) => this.renderPrism(prism.index, prism.top, prism.left, prism.right, at === prism.index, chosen.has(keys[prism.index] ?? ''), grid, toneOf(cells[prism.index] ?? { value: undefined }, bounds, palette)));
+        const { box } = relief;
+        const drawing = readable
+            ? html `<svg
+          aria-hidden=${grid ? nothing : 'true'}
+          data-mirror
+          part="drawing"
+          role=${grid ? 'none' : nothing}
+          viewBox="${box.x} ${box.y} ${box.width} ${box.height}"
+          xmlns="http://www.w3.org/2000/svg"
+        >${grid ? this.renderPrismRows(prisms) : prisms}</svg>`
+            : nothing;
+        return html `<div
+        aria-activedescendant=${grid && at >= 0 ? `cell-${at}` : nothing}
+        aria-describedby=${readable ? 'helix-chart-summary' : nothing}
+        aria-label=${this.named || this.stripLabel}
+        aria-multiselectable=${grid && this.selectionMode === 'multiple' ? 'true' : nothing}
+        part="strip plot"
+        id=${CHART_PLOT}
+        role=${grid ? 'grid' : readable ? 'application' : 'img'}
+        style="--isometric-heatmap-span: ${Math.ceil(cells.length / this.rowCount) + Math.min(this.rowCount, cells.length)}"
+        tabindex=${readable ? '0' : nothing}
+        @click=${this.onClick}
+        @keydown=${this.onStripKeydown}
+        @pointerover=${this.onPointerOver}
+        @pointerleave=${this.onPointerLeave}
+        @pointerup=${this.onPointerUp}
+      >${drawing}${this.renderTooltip(grid)}</div>
+      ${cells.length === 0 ? this.renderStatus() : nothing}
+      <div part="footer">
+        <span part="start"><slot name="start"></slot></span>
+        <span part="summary"><slot name="summary"></slot></span>
+        <span part="end"><slot name="end"></slot></span>
+      </div>${readable ? this.renderOverview(cells) : nothing}${this.status.spoken
+            ? html `<span part="selection" role="status">${this.status.said}</span>`
+            : nothing}${this.renderTable()}`;
+    }
+    renderPrism(index, top, left, right, active, picked, grid, tone) {
+        const row = grid ? this.sourceRows[this.points.length - this.drawn.length + index] : undefined;
+        const name = row ? spokenReading(row) : '';
+        return svg `<g
+      aria-label=${grid && name ? name : nothing}
+      aria-selected=${grid ? (picked ? 'true' : 'false') : nothing}
+      data-index=${index}
+      data-tone=${tone ?? nothing}
+      id=${grid ? `cell-${index}` : nothing}
+      part="cell${active ? ' cell-active' : ''}${picked ? ' cell-selected' : ''}"
+      role=${grid ? 'gridcell' : nothing}
+      style=${tone === undefined ? nothing : `--heatmap-tone: var(--heatmap-tone-${tone})`}
+    ><path d=${left} part="left-face"></path><path d=${right} part="right-face"></path><path d=${top} part="top-face"></path></g>`;
+    }
+    renderPrismRows(prisms) {
+        const size = this.rowCount === 1 ? prisms.length : this.rowCount;
+        const rows = [];
+        for (let start = 0; start < prisms.length; start += size) {
+            rows.push(svg `<g part="row" role="row">${prisms.slice(start, start + size)}</g>`);
+        }
+        return rows;
+    }
+    renderTooltip(grid = false) {
+        const at = this.pointer.at;
+        const prism = this.shown?.prisms[at];
+        const box = this.shown?.box;
+        const reading = grid ? undefined : this.pointer;
+        if (at < 0 || !prism || !box || box.width <= 0 || box.height <= 0) {
+            return drawTooltip(this.sourceRows, -1, this.tag('tooltip'), undefined, undefined, reading);
+        }
+        return drawTooltip(this.sourceRows, this.points.length - this.drawn.length + at, this.tag('tooltip'), {
+            placement: 'top',
+            x: `${((prism.peak.x - box.x) / box.width) * 100}%`,
+            y: `${((prism.peak.y - box.y) / box.height) * 100}%`,
+        }, undefined, reading);
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], HelixHeadlessIsometricHeatmap.prototype, "flat", void 0);
+__decorate([
+    property({ type: Number })
+], HelixHeadlessIsometricHeatmap.prototype, "relief", void 0);
+HelixHeadlessIsometricHeatmap = __decorate([
+    customElement('helix-headless-isometric-heatmap')
+], HelixHeadlessIsometricHeatmap);
+export { HelixHeadlessIsometricHeatmap };

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

@@ -356,7 +356,7 @@ let HelixHeadlessLightbox = class HelixHeadlessLightbox extends MixinControllerA
             return;
         }
         if (this.open && !dialog.open) {
-            auditName(this, () => null, 'Give it a `label`, such as "Project photos".', () => this.label !== '');
+            auditName(this, () => null, 'lightbox', () => this.label !== '');
             dialog.showModal();
             dialog.focus({ preventScroll: true });
             this.idle.stir();

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

@@ -366,7 +366,7 @@ let HelixHeadlessList = class HelixHeadlessList extends HelixElement {
             this.sync();
         }
         if (this.interactive) {
-            auditName(this, () => null, 'Give it a `label`, or an `aria-label` that says what the rows are.', () => this.label !== '');
+            auditName(this, () => null, 'list', () => this.label !== '');
         }
         if (this.childrenKnown) {
             this.toggleState('empty', this.rows.length === 0);

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

@@ -346,7 +346,7 @@ let HelixHeadlessMap = class HelixHeadlessMap extends MixinViewport(HelixElement
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
-        auditName(this, () => null, 'Give it a `label` that says what the map shows, such as "Stores in Edinburgh".', () => this.label !== '');
+        auditName(this, () => null, 'map', () => this.label !== '');
     }
     updated(changed) {
         super.updated(changed);

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

@@ -116,7 +116,7 @@ let HelixHeadlessMenuItem = class HelixHeadlessMenuItem extends HelixElement {
                 : [],
         });
         if (this.partNamed('item')) {
-            auditName(this, () => this.partNamed('item') ?? undefined, 'Give the row words in its default slot, or a label on the icon it holds.');
+            auditName(this, () => this.partNamed('item') ?? undefined, 'row');
         }
     }
     renderDescription() {

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

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, plainClick, reflectElements, scrollItemIntoView, scrollingAncestor, words, } from '@fusion.dev/helix-core';
+import { customElement, elementById, HelixActivateEvent, HelixElement, IndicatorController, plainClick, reflectElements, scrollingAncestor, scrollWithin, words, } from '@fusion.dev/helix-core';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { levelOf, nest } from '../levels.js';
@@ -151,7 +151,7 @@ let HelixHeadlessOutline = class HelixHeadlessOutline extends HelixElement {
         const sections = this.scroller;
         const node = scrollingAncestor(link, { axis: 'y', overflowing: true, stop: this.page });
         if (node && node !== sections && !node.contains(sections)) {
-            scrollItemIntoView(link, { scroller: node });
+            scrollWithin(link, node);
         }
     }
     get atEnd() {

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

@@ -216,7 +216,7 @@ let HelixHeadlessPopover = class HelixHeadlessPopover extends MixinControllerOpe
         this.tellTrigger();
         this.nameByHeading();
         if (changed.has('open') && this.open) {
-            auditName(this, () => null, 'Give it a `label`, or a heading in the panel.', () => this.label !== '' || this.namedByHeading || headingIn(this.slotted) != null);
+            auditName(this, () => null, 'popover', () => this.label !== '' || this.namedByHeading || headingIn(this.slotted) != null);
         }
         if (this.settled) {
             this.hideAround();

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

@@ -243,13 +243,11 @@ export declare class HelixHeadlessTable extends HelixHeadlessTable_base {
      * **It is also the only track list a server can send.** The shim has no tree
      * to walk, so a render there knows of no columns and this attribute is the
      * whole answer: a table given one lays its grid out in the first paint, and a
-     * table sized only by its columns is one track wide until it upgrades.
+     * table sized only by its columns takes, until it upgrades, a track for each
+     * column at the width a column with no `width` takes (`helix.css`).
      *
-     * **Data Table has none of this, and should not.** Its columns are its schema
-     * rather than an option, so there is always a column to write a `width` on
-     * and a list here would be a second way to say what that says. This table's
-     * cells are markup, and a table written as rows of cells with no column
-     * declared in it has nowhere else to be sized from.
+     * Data Table takes the same list, for the same reason: a data table that
+     * serves its first page as rows is laid out by it before it upgrades.
      */
     columns: string;
     /**

package/dist/table/root/table-root.js

@@ -1,38 +1,12 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, anchorAt, assignSlots, auditName, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, splitValues, toggleEvery, treeArrow, VIRTUAL_RULE, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, anchorAt, assignSlots, auditName, commaList, customElement, cycle, everyState, followLink, format, formatWords, HelixBeforeToggleEvent, HelixElement, HelixLoadMoreEvent, HelixSelectEvent, HelixSelectedEvent, HelixSortEvent, HelixSortedEvent, HelixToggleEvent, inRowOrder, MixinCollection, onAndroid, parse, ReorderController, rangeAdd, reflectElements, requestChange, scrollingAncestor, sort, toggleEvery, treeArrow, VIRTUAL_RULE, VirtualizeController, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 import '../../checkbox/index.js';
 import { edgeOf } from '../column/table-column.js';
 import { TableGridController } from '../grid-controller.js';
-const tracksOf = (list, wanted) => {
-    const words = splitValues(list, ' ');
-    const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
-    const tracks = [];
-    let names = '';
-    for (const one of words) {
-        if (tracks.length >= wanted) {
-            break;
-        }
-        if (one.startsWith('[')) {
-            names += `${one} `;
-            continue;
-        }
-        const repeat = /^repeat\(\s*(\d+)\s*,(.*)\)$/is.exec(one);
-        if (repeat) {
-            const inner = tracksOf(repeat[2] ?? '', wanted);
-            for (let time = 0; time < Number(repeat[1]) && tracks.length < wanted; time += 1) {
-                tracks.push(...inner.map((track, index) => (time === 0 && index === 0 ? names + track : track)));
-            }
-        }
-        else if (!/^repeat\(/i.test(one)) {
-            tracks.push(valid(names + one) ? names + one : '');
-        }
-        names = '';
-    }
-    return tracks.slice(0, wanted);
-};
+import { tracksOf } from '../tracks.js';
 const SHORT = 32;
 const FLOOR = '14ch';
 const SAMPLE = 200;
@@ -812,7 +786,7 @@ let HelixHeadlessTable = class HelixHeadlessTable extends MixinCollection(HelixE
         this.markSorted();
         this.markSelected();
         this.nameByHeading();
-        auditName(this, () => null, 'Give it a `label`, or put a heading in its `heading` slot, that says what the rows are.', () => this.label !== '' || this.headings.length > 0);
+        auditName(this, () => null, 'table', () => this.label !== '' || this.headings.length > 0);
         if (this.childrenKnown) {
             this.gridKeys.mark();
             this.gridKeys.place();

package/dist/table/tracks.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The first `wanted` tracks of a track list, one entry each, so every declared
+ * column can take the one in its place.
+ *
+ * Split on the spaces between tracks and never inside a function, so
+ * `minmax(0, 1fr)` stays one track. A `repeat()` with a count is that many
+ * tracks, written out; an automatic one names no count and yields none. Line
+ * names go with the track after them.
+ *
+ * Everything above the split is a fact about a grid track list rather than
+ * about a value list, which is why only the split itself is shared.
+ *
+ * **A track the grid would refuse yields nothing either**, where the platform
+ * can say. One invalid track makes the whole `grid-template-columns` invalid,
+ * which a grid ignores in silence and draws as one column. That is the failure
+ * that once had `columns` deprecated, a list of headings handed over as widths,
+ * and dealt out a track at a time it costs the one column its width and no
+ * more.
+ */
+export declare const tracksOf: (list: string, wanted: number) => string[];

package/dist/table/tracks.js

@@ -0,0 +1,28 @@
+import { splitValues } from '@fusion.dev/helix-core';
+export const tracksOf = (list, wanted) => {
+    const words = splitValues(list, ' ');
+    const valid = (track) => typeof CSS === 'undefined' || CSS.supports('grid-template-columns', track);
+    const tracks = [];
+    let names = '';
+    for (const one of words) {
+        if (tracks.length >= wanted) {
+            break;
+        }
+        if (one.startsWith('[')) {
+            names += `${one} `;
+            continue;
+        }
+        const repeat = /^repeat\(\s*(\d+)\s*,(.*)\)$/is.exec(one);
+        if (repeat) {
+            const inner = tracksOf(repeat[2] ?? '', wanted);
+            for (let time = 0; time < Number(repeat[1]) && tracks.length < wanted; time += 1) {
+                tracks.push(...inner.map((track, index) => (time === 0 && index === 0 ? names + track : track)));
+            }
+        }
+        else if (!/^repeat\(/i.test(one)) {
+            tracks.push(valid(names + one) ? names + one : '');
+        }
+        names = '';
+    }
+    return tracks.slice(0, wanted);
+};

package/dist/tabs/root/tabs-root.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { AriaForwardController, customElement, deepActiveElement, HelixActivateEvent, HelixElement, IndicatorController, isRtl, KeyboardNavigationController, MIRROR_RULE, MixinControllerActive, scrollItemIntoView, whenHydrated, words, } from '@fusion.dev/helix-core';
+import { AriaForwardController, customElement, deepActiveElement, glyphPath, HelixActivateEvent, HelixElement, IndicatorController, isRtl, KeyboardNavigationController, MIRROR_RULE, MixinControllerActive, scrollWithin, whenHydrated, words, } from '@fusion.dev/helix-core';
 import { caretDown, caretLeft, caretRight, caretUp } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import { HelixHeadlessTabPanel } from '../panel/tab-panel.js';
 import { HelixHeadlessTab } from '../tab/tab.js';
 let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(HelixElement) {
@@ -192,7 +191,7 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         const strip = this.partNamed('tabs');
         const tab = this.tabs.find((one) => one.selected);
         if (strip && tab) {
-            scrollItemIntoView(tab, { padding: this.scrollControls ? 40 : 0, scroller: strip });
+            scrollWithin(tab, strip, { padding: this.scrollControls ? 40 : 0 });
         }
     }
     updated(changed) {
@@ -223,8 +222,8 @@ let HelixHeadlessTabs = class HelixHeadlessTabs extends MixinControllerActive(He
         const icon = down ? (toward > 0 ? caretDown : caretUp) : toward > 0 ? caretRight : caretLeft;
         const mirror = down ? nothing : '';
         return toward > 0
-            ? html `<slot name="scroll-end-icon"><svg part="scroll-end-mark" data-mirror=${mirror} aria-hidden="true" fill="currentColor" viewBox=${icon.viewBox}>${unsafeSVG(icon.content)}</svg></slot>`
-            : html `<slot name="scroll-start-icon"><svg part="scroll-start-mark" data-mirror=${mirror} aria-hidden="true" fill="currentColor" viewBox=${icon.viewBox}>${unsafeSVG(icon.content)}</svg></slot>`;
+            ? html `<slot name="scroll-end-icon"><svg part="scroll-end-mark" data-mirror=${mirror} aria-hidden="true" fill="currentColor" viewBox=${icon.viewBox}><path d=${glyphPath(icon)}></path></svg></slot>`
+            : html `<slot name="scroll-start-icon"><svg part="scroll-start-mark" data-mirror=${mirror} aria-hidden="true" fill="currentColor" viewBox=${icon.viewBox}><path d=${glyphPath(icon)}></path></svg></slot>`;
     }
     render() {
         return html `<div

package/dist/tabs/tab/tab.js

@@ -1,9 +1,8 @@
 import { __decorate } from "tslib";
-import { customElement, HelixElement, MixinDismissible, MixinSelectableItem, plainClick, reflectElements, words, } from '@fusion.dev/helix-core';
+import { customElement, glyphPath, HelixElement, MixinDismissible, MixinSelectableItem, plainClick, reflectElements, words, } from '@fusion.dev/helix-core';
 import { x } from '@fusion.dev/helix-icons';
 import { html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
-import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSelectableItem(HelixElement)) {
     constructor() {
         super(...arguments);
@@ -49,7 +48,7 @@ let HelixHeadlessTab = class HelixHeadlessTab extends MixinDismissible(MixinSele
         }
         return html `<span part="dismiss" aria-hidden="true" title=${this.dismissLabel} @click=${this.handleDismissPress}
       ><slot name="dismiss-icon"
-        ><svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true">${unsafeSVG(x.content)}</svg></slot
+        ><svg part="dismiss-mark" fill="currentColor" viewBox=${x.viewBox} aria-hidden="true"><path d=${glyphPath(x)}></path></svg></slot
       ></span
     >`;
     }

package/dist/time-picker/root/time-picker-root.js

@@ -375,7 +375,7 @@ let HelixHeadlessTimePicker = class HelixHeadlessTimePicker extends MixinPickerF
     }
     firstUpdated(changed) {
         super.firstUpdated(changed);
-        auditName(this, () => null, 'Give it a `label`, a label in the `label` slot, or an `aria-label` that says what the time is for.', () => this.listName !== '');
+        auditName(this, () => null, 'time-picker', () => this.listName !== '');
         const list = this.partNamed('list');
         if (list) {
             auditName(list, () => null, '', () => true);

package/dist/toggle/root/toggle-root.js

@@ -34,7 +34,7 @@ let HelixHeadlessToggle = class HelixHeadlessToggle extends MixinSelectableItem(
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.finishHydration();
-        auditName(this, () => this.partNamed('item'), 'Give it words in its default slot, an `aria-label`, or a label on the icon it holds.');
+        auditName(this, () => this.partNamed('item'), 'toggle');
     }
     click() {
         if (!this.clicks.click()) {

package/dist/tour/root/tour-root.js

@@ -233,7 +233,7 @@ let HelixHeadlessTour = class HelixHeadlessTour extends MixinControllerOpen(Heli
         this.settle();
         this.light();
         if (changed.has('open') && this.open) {
-            auditName(this, () => null, 'Give it a `label`, such as "Getting started".', () => this.label !== '');
+            auditName(this, () => null, 'tour', () => this.label !== '');
         }
         this.follow(changed);
         this.wait();

package/dist/tree/root/tree-root.js

@@ -468,7 +468,7 @@ let HelixHeadlessTree = class HelixHeadlessTree extends MixinCollection(MixinCon
     firstUpdated(changed) {
         super.firstUpdated(changed);
         this.syncItems();
-        auditName(this, () => null, 'Give it a `label` that says what it holds, such as "Files".', () => this.hasAttribute('label') || this.label !== 'Tree');
+        auditName(this, () => null, 'tree', () => this.hasAttribute('label') || this.label !== 'Tree');
     }
     updated(changed) {
         super.updated(changed);

package/dist/video/root/video-root.js

@@ -459,7 +459,7 @@ let HelixHeadlessVideo = class HelixHeadlessVideo extends HelixElement {
     firstUpdated(changed) {
         super.firstUpdated?.(changed);
         this.finishHydration();
-        auditName(this, () => null, 'Give it a `label` that says what the video shows, such as "Product tour".', () => this.label !== '');
+        auditName(this, () => null, 'video', () => this.label !== '');
         const video = this.video;
         if (video) {
             if (this.defaultMuted || this.silent) {