@fusion.dev/helix 0.185.0 → 0.186.1

package/dist/element-events.generated.js

@@ -144,6 +144,13 @@ registerElementEvents({
     'helix-icon-button': ['helix-press'],
     'helix-image': ['error', 'load'],
     'helix-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
+    'helix-isometric-heatmap': [
+        'change',
+        'helix-before-change',
+        'helix-reading-change',
+        'helix-reading-press',
+        'helix-resize',
+    ],
     'helix-kbd': ['helix-shortcut'],
     'helix-legend': ['change', 'helix-before-change'],
     'helix-lightbox': [

package/dist/icon/all/index.d.ts

@@ -1,2 +1 @@
-import '@fusion.dev/helix-headless/icon/all';
 export * from '../index.js';

package/dist/icon/all/index.js

@@ -1,2 +1 @@
-import '@fusion.dev/helix-headless/icon/all';
 export * from '../index.js';

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

@@ -16,11 +16,6 @@ import type { CSSResultGroup } from 'lit';
  * Reduced motion stills every animation. `auto-width` gives the box the
  * glyph's own proportions, for a mark wider than it is tall.
  *
- * **`@fusion.dev/helix/icon` registers thirteen glyphs by name**, the ones a
- * control most often needs, and `@fusion.dev/helix/icon/all` registers the
- * whole set. The headless element lists the thirteen and says how a name is
- * resolved.
- *
  * @since 0.1.0
  * @status stable
  * @category media

package/dist/index.d.ts

@@ -49,10 +49,11 @@ export * from './format-date/index.js';
 export * from './graph/index.js';
 export * from './grid/index.js';
 export * from './heatmap/index.js';
-export * from './icon/all/index.js';
+export * from './icon/index.js';
 export * from './icon-button/index.js';
 export * from './image/index.js';
 export * from './input/index.js';
+export * from './isometric-heatmap/index.js';
 export * from './kbd/index.js';
 export * from './legend/index.js';
 export * from './lightbox/index.js';

package/dist/index.js

@@ -44,10 +44,11 @@ export * from './format-date/index.js';
 export * from './graph/index.js';
 export * from './grid/index.js';
 export * from './heatmap/index.js';
-export * from './icon/all/index.js';
+export * from './icon/index.js';
 export * from './icon-button/index.js';
 export * from './image/index.js';
 export * from './input/index.js';
+export * from './isometric-heatmap/index.js';
 export * from './kbd/index.js';
 export * from './legend/index.js';
 export * from './lightbox/index.js';

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

@@ -0,0 +1 @@
+export { HelixIsometricHeatmap } from './root/isometric-heatmap-root.js';

package/dist/isometric-heatmap/index.js

@@ -0,0 +1 @@
+export { HelixIsometricHeatmap } from './root/isometric-heatmap-root.js';

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,2 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {--_isometric-heatmap-cell: var(--isometric-heatmap-cell-size, 1.25rem);--heatmap-tone-accent: var(--helix-color-accent);--heatmap-tone-danger: var(--helix-color-danger);--heatmap-tone-info: var(--helix-color-info);--heatmap-tone-muted: var(--helix-color-surface-sunken);--heatmap-tone-primary: var(--helix-color-primary);--heatmap-tone-success: var(--helix-color-success);--heatmap-tone-warning: var(--helix-color-warning);--heatmap-tone-1: color-mix(in oklab, var(--helix-color-primary-active) 20%, var(--helix-color-surface-sunken));--heatmap-tone-2: color-mix(in oklab, var(--helix-color-primary-active) 40%, var(--helix-color-surface-sunken));--heatmap-tone-3: color-mix(in oklab, var(--helix-color-primary-active) 60%, var(--helix-color-surface-sunken));--heatmap-tone-4: color-mix(in oklab, var(--helix-color-primary-active) 80%, var(--helix-color-surface-sunken));--heatmap-tone-5: var(--helix-color-primary-active);display: grid;grid-template-columns: minmax(0, max-content)}[part~="strip"] {inline-size: calc(var(--isometric-heatmap-span, 1) * 0.866 * var(--_isometric-heatmap-cell));max-inline-size: 100%;position: relative}[part="drawing"] {block-size: auto;display: block;inline-size: 100%;overflow: visible}[part~="cell"] {--_isometric-heatmap-top: var(--heatmap-tone, var(--helix-color-surface-sunken));--_isometric-heatmap-left: color-mix(in oklab, var(--_isometric-heatmap-top), black var(--isometric-heatmap-left-shade, 22%));--_isometric-heatmap-right: color-mix(in oklab, var(--_isometric-heatmap-top), black var(--isometric-heatmap-right-shade, 38%))}[part~="top-face"] {--_isometric-heatmap-face: var(--_isometric-heatmap-top)}[part~="left-face"] {--_isometric-heatmap-face: var(--_isometric-heatmap-left)}[part~="right-face"] {--_isometric-heatmap-face: var(--_isometric-heatmap-right)}[part~="cell"] > * {--_isometric-heatmap-ink: oklch(from var(--_isometric-heatmap-face) clamp(0, (0.6 - l) * 1000, 1) 0 0);fill: var(--_isometric-heatmap-face);stroke: color-mix(in oklab, var(--_isometric-heatmap-face), var(--_isometric-heatmap-ink) 25%);stroke-linejoin: round;stroke-width: var(--helix-border-thin);vector-effect: non-scaling-stroke}[part~="cell-selected"] > * {stroke: var(--isometric-heatmap-selected-color, var(--_isometric-heatmap-ink));stroke-dasharray: 3px 2px;stroke-width: var(--helix-border-thick)}@media (hover: hover) {[part~="cell"]:hover > * {stroke: var(--_isometric-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}}[part~="cell-active"] > * {stroke: var(--_isometric-heatmap-ink);stroke-dasharray: none;stroke-width: var(--helix-border-thick)}[part~="strip"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="live"], [part="overview"], [part="selection"], [part="table"] {block-size: 1px;clip-path: inset(50%);inline-size: 1px;margin: var(--helix-space-none);overflow: hidden;position: absolute;white-space: nowrap}[part="footer"] {align-items: baseline;color: var(--helix-color-foreground-subtle);display: grid;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);grid-template-columns: auto minmax(0, 1fr) auto;padding-block-start: var(--helix-space-xs)}[part="summary"] {text-align: center}[part="end"] {text-align: end}[part="footer"][data-empty] {display: none}[part="empty"], [part="loading"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);text-align: center}@media print {[part~="cell"] > * {stroke: var(--helix-color-border);stroke-width: var(--helix-border-thin)}}@media (forced-colors: active) {[part~="cell"] > * {forced-color-adjust: none;stroke: CanvasText}[part~="cell-active"] > *, [part~="cell-selected"] > * {stroke: Highlight;stroke-width: var(--helix-border-thick)}}`);

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

@@ -0,0 +1,39 @@
+import { HelixHeadlessIsometricHeatmap } from '@fusion.dev/helix-headless/isometric-heatmap';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary A heatmap drawn as a relief, where each reading stands as tall as its value.
+ *
+ * @description
+ * Each reading is a prism. The top face takes the cell's tone, and the two
+ * sides are the same tone, shaded darker, so the whole relief follows your
+ * theme's colors.
+ *
+ * `tones="1 2 3 4 5"` uses the same five-step ramp as `Heatmap`, so the tone
+ * and the height both show the value. Set `--isometric-heatmap-cell-size` to
+ * change how large a cell may grow.
+ *
+ * @since 0.185.0
+ * @status experimental
+ * @category charts
+ * @documentation https://fusion.dev/helix/components/isometric-heatmap
+ *
+ * @cssproperty --isometric-heatmap-cell-size - The largest a cell grows, along its edge. The strip is never wider than its box, and draws smaller cells to fit.
+ * @cssproperty --isometric-heatmap-left-shade - How much darker the left face is than the top, as a percentage mixed toward black.
+ * @cssproperty --isometric-heatmap-right-shade - How much darker the right face is than the top, as a percentage mixed toward black.
+ * @cssproperty --isometric-heatmap-selected-color - The color of the dashed edges of a selected prism, under `selection-mode`. By default, white on a dark face and black on a light one.
+ */
+export declare class HelixIsometricHeatmap extends HelixHeadlessIsometricHeatmap {
+    static tier: string;
+    static styles: CSSResultGroup;
+    /**
+     * The smallest cell, in CSS pixels, before the strip draws fewer columns.
+     * `gap` is two pixels at that size, so a prism covers five sixths of its cell.
+     */
+    minCell: number;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-isometric-heatmap': HelixIsometricHeatmap;
+    }
+}

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

@@ -0,0 +1,18 @@
+import { __decorate } from "tslib";
+import { customElement } from '@fusion.dev/helix-core';
+import { HelixHeadlessIsometricHeatmap } from '@fusion.dev/helix-headless/isometric-heatmap';
+import { styles as tooltipStyles } from '../../shared/chart/tooltip.css.js';
+import { styles } from './isometric-heatmap-root.css.js';
+import '../../tooltip/index.js';
+let HelixIsometricHeatmap = class HelixIsometricHeatmap extends HelixHeadlessIsometricHeatmap {
+    constructor() {
+        super(...arguments);
+        this.minCell = 10;
+    }
+    static { this.tier = 'helix-'; }
+    static { this.styles = [tooltipStyles, styles]; }
+};
+HelixIsometricHeatmap = __decorate([
+    customElement('helix-isometric-heatmap')
+], HelixIsometricHeatmap);
+export { HelixIsometricHeatmap };

package/dist/sandbox/root/sandbox-root.js

@@ -464,7 +464,7 @@ let HelixSandbox = class HelixSandbox extends HelixElement {
             auditName(this, () => {
                 const tabs = [...this.renderRoot.querySelectorAll('[part~="file"]')];
                 return tabs.find((tab) => !tab.textContent?.trim()) ?? tabs[0];
-            }, 'Give each source pane a `label` or a `name`, which its file tab shows.');
+            }, 'sandbox');
         }
     }
     renderPane(name, at) {