@fusion.dev/helix-headless 0.185.0 → 0.186.1

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.js

@@ -786,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/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) {