@fusion.dev/helix 0.25.1 → 0.30.0

package/dist/shared/chart/tooltip.css.js

@@ -37,105 +37,10 @@ grid-column: 3;
 }
 
 [part="tooltip-cell"][data-series]::before {
+background-color: var(--chart-series);
 block-size: 0.5em;
 border-radius: var(--helix-radii-full);
 content: "";
 grid-column: 1;
 inline-size: 0.5em;
-}
-
-[part="tooltip-cell"][data-series="1"]::before {
-background-color: var(--chart-series-1);
-}
-
-[part="tooltip-cell"][data-series="2"]::before {
-background-color: var(--chart-series-2);
-}
-
-[part="tooltip-cell"][data-series="3"]::before {
-background-color: var(--chart-series-3);
-}
-
-[part="tooltip-cell"][data-series="4"]::before {
-background-color: var(--chart-series-4);
-}
-
-[part="tooltip-cell"][data-series="5"]::before {
-background-color: var(--chart-series-5);
-}
-
-[part="tooltip-cell"][data-series="6"]::before {
-background-color: var(--chart-series-6);
-}
-
-[part="tooltip-cell"][data-series="7"]::before {
-background-color: var(--chart-series-7);
-}
-
-[part="tooltip-cell"][data-series="8"]::before {
-background-color: var(--chart-series-8);
-}
-
-[part="tooltip-cell"][data-series="9"]::before {
-background-color: var(--chart-series-9);
-}
-
-[part="tooltip-cell"][data-series="10"]::before {
-background-color: var(--chart-series-10);
-}
-
-[part="tooltip-cell"][data-series="11"]::before {
-background-color: var(--chart-series-11);
-}
-
-[part="tooltip-cell"][data-series="12"]::before {
-background-color: var(--chart-series-12);
-}
-
-[part="tooltip-cell"][data-series="13"]::before {
-background-color: var(--chart-series-13);
-}
-
-[part="tooltip-cell"][data-series="14"]::before {
-background-color: var(--chart-series-14);
-}
-
-[part="tooltip-cell"][data-series="15"]::before {
-background-color: var(--chart-series-15);
-}
-
-[part="tooltip-cell"][data-series="16"]::before {
-background-color: var(--chart-series-16);
-}
-
-[part="tooltip-cell"][data-series="17"]::before {
-background-color: var(--chart-series-17);
-}
-
-[part="tooltip-cell"][data-series="18"]::before {
-background-color: var(--chart-series-18);
-}
-
-[part="tooltip-cell"][data-series="19"]::before {
-background-color: var(--chart-series-19);
-}
-
-[part="tooltip-cell"][data-series="20"]::before {
-background-color: var(--chart-series-20);
-}
-
-[part="tooltip-cell"][data-series="21"]::before {
-background-color: var(--chart-series-21);
-}
-
-[part="tooltip-cell"][data-series="22"]::before {
-background-color: var(--chart-series-22);
-}
-
-[part="tooltip-cell"][data-series="23"]::before {
-background-color: var(--chart-series-23);
-}
-
-[part="tooltip-cell"][data-series="24"]::before {
-background-color: var(--chart-series-24);
 }`);

package/dist/shared/collection/state.css.js

@@ -0,0 +1,11 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[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);
+padding-block: var(--_collection-inset-block, var(--helix-space-md));
+padding-inline: var(--_collection-inset-inline, var(--helix-space-sm));
+text-align: center;
+}`);

package/dist/shared/field/field-frame.css.d.ts

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

package/dist/shared/field/field-frame.css.js

@@ -0,0 +1,36 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+}
+
+:host(:not(:disabled)) [part="field"]:hover {
+border-color: var(--helix-color-primary);
+}
+
+:host(:focus-within) [part="field"],
+:host(:focus-within) [part="field"]:hover {
+border-color: var(--helix-color-primary);
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: 0;
+}
+
+:host(:state(invalid)) [part="field"],
+:host(:state(invalid)) [part="field"]:hover,
+:host(:state(invalid):focus-within) [part="field"],
+:host(:state(invalid):focus-within) [part="field"]:hover {
+border-color: var(--helix-color-danger);
+outline-color: var(--helix-color-danger);
+}
+
+[part="control"] {
+all: unset;
+box-sizing: border-box;
+color: var(--helix-color-foreground);
+flex: 1 1 auto;
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-medium);
+min-inline-size: 0;
+}`);

package/dist/shared/field/field.css.js

@@ -49,10 +49,4 @@ inline-size: 1px;
 overflow: hidden;
 position: absolute;
 white-space: nowrap;
-}
-
-@media print {
-:host {
-box-shadow: none;
-}
 }`);

package/dist/shared/floating/entrance.css.d.ts

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

package/dist/shared/floating/entrance.css.js

@@ -0,0 +1,39 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="surface"] {
+--_travel: calc(var(--helix-space-2xs) * -1);
+
+opacity: 0;
+scale: 0.96;
+transform: translateY(var(--_travel));
+transition:
+opacity var(--helix-duration-fast) var(--helix-easing-standard),
+scale var(--helix-duration-fast) var(--helix-easing-emphasized),
+transform var(--helix-duration-fast) var(--helix-easing-emphasized),
+display var(--helix-duration-fast) allow-discrete,
+overlay var(--helix-duration-fast) allow-discrete;
+}
+
+[part="surface"][data-placement^="top"] {
+--_travel: var(--helix-space-2xs);
+
+transform-origin: var(--floating-arrow-x, 50%) 100%;
+}
+
+[part="surface"][data-placement^="bottom"] {
+transform-origin: var(--floating-arrow-x, 50%) 0;
+}
+
+[part="surface"][data-placed] {
+opacity: 1;
+scale: 1;
+transform: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="surface"],
+[part="surface"][data-placed] {
+scale: 1;
+transform: none;
+transition: none;
+}
+}`);

package/dist/shared/floating/panel.css.d.ts

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

package/dist/shared/floating/panel.css.js

@@ -0,0 +1,18 @@
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`[part="surface"] {
+background-color: var(--_floating-background-color, var(--helix-color-surface-overlay));
+border: var(--_floating-border-width, var(--helix-border-floating)) solid
+var(--_floating-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+box-shadow: var(--_floating-shadow, var(--helix-shadow-floating));
+inset: auto;
+margin: var(--helix-space-none);
+}
+
+[part="surface"][hidden] {
+display: none;
+}
+
+[part="surface"]:not(:popover-open) {
+display: none;
+}`);

package/dist/shared/glyph/glyph.css.d.ts

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

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

@@ -76,7 +76,6 @@ circle at var(--chart-terminus-x) var(--chart-terminus-y),
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }

package/dist/speed-dial/root/speed-dial-root.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessSpeedDial } from '@fusion.dev/helix-headless/speed-dial';
-import { styles as glyphStyles } from '../../icon/glyph.css.js';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './speed-dial-root.css.js';
 import '../../icon/index.js';
 let HelixSpeedDial = class HelixSpeedDial extends HelixHeadlessSpeedDial {

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

@@ -182,8 +182,6 @@ pointer-events: none;
 
 @media print {
 :host {
-box-shadow: none;
-max-block-size: none;
 overflow: visible;
 }
 }`);

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

@@ -54,6 +54,6 @@ order: 1;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -86,6 +86,6 @@ flex-direction: column;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -98,7 +98,6 @@ display: none;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

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

@@ -4,9 +4,10 @@ import type { CSSResultGroup } from 'lit';
  * @summary One cell of a table.
  *
  * @description
- * Hairline rules between rows and no fill, per the rule that depth comes from a
- * single border rather than from elevation. A dense table earns its density by
- * decorating none of it.
+ * Every cell is the same height whatever it holds, so a row with a tag or an
+ * icon button in it sits level with a row of text. Content is set in full
+ * foreground, since the cells are what a reader is reading, and a long
+ * identifier breaks rather than running into the next column.
  *
  * @since 0.1.0
  * @status experimental

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

@@ -15,24 +15,12 @@ inline-size: 100%;
 display: contents;
 }
 
-[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);
-padding-block: var(--helix-space-md);
-padding-inline: var(--helix-space-sm);
-text-align: center;
-}
-
 :host([loading]) [part="table"] {
 opacity: 0.5;
 }
 
 @media print {
 :host {
-background-color: transparent;
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -6,9 +6,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTable } from '@fusion.dev/helix-headless/table';
+import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles } from './table-root.css.js';
 let HelixTable = class HelixTable extends HelixHeadlessTable {
-    static { this.styles = styles; }
+    static { this.styles = [collectionStateStyles, styles]; }
 };
 HelixTable = __decorate([
     customElement('helix-table')

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

@@ -4,9 +4,10 @@ import type { CSSResultGroup } from 'lit';
  * @summary One row of a table.
  *
  * @description
- * Hairline rules between rows and no fill, per the rule that depth comes from a
- * single border rather than from elevation. A dense table earns its density by
- * decorating none of it.
+ * No box of its own, so its cells become items of the table's grid and line up
+ * with every other row's. The element still exists, which is what lets a row be
+ * selected, hidden or made interactive without a wrapper that would break the
+ * columns.
  *
  * @since 0.1.0
  * @status experimental

package/dist/tabs/panel/tab-panel.d.ts

@@ -4,9 +4,9 @@ import type { CSSResultGroup } from 'lit';
  * @summary The content shown for one tab.
  *
  * @description
- * Selection is marked with a rule under the active tab rather than a filled
- * pill, which keeps the row flat and lets the underline animate between tabs as
- * a movement instead of two separate fills.
+ * No box of its own, so only the panel that is showing takes space: a tab set
+ * with four panels gives the visible one the whole height rather than a
+ * quarter of it.
  *
  * @since 0.1.0
  * @status experimental

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

@@ -123,7 +123,6 @@ z-index: var(--helix-layer-raised);
 @media print {
 :host {
 box-shadow: none;
-max-block-size: none;
 overflow: visible;
 }
 }`);

package/dist/tabs/tab/tab.d.ts

@@ -4,9 +4,10 @@ import type { CSSResultGroup } from 'lit';
  * @summary One tab in a tab list.
  *
  * @description
- * Selection is marked with a rule under the active tab rather than a filled
- * pill, which keeps the row flat and lets the underline animate between tabs as
- * a movement instead of two separate fills.
+ * A control's height, so a tab row sits level with the buttons beside it. The
+ * current tab is not marked here: one indicator travels along the tab list, and
+ * each tab keeps a transparent edge of the same width so its box does not move
+ * when it becomes current.
  *
  * @since 0.1.0
  * @status experimental

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

@@ -105,6 +105,6 @@ opacity: 0.75;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -107,6 +107,6 @@ font-style: italic;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -1,11 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
-}
-
-[part="field"] {
+export const styles = createSheet(`[part="field"] {
 background-color: var(--textarea-background-color, var(--helix-color-well));
 border: var(--helix-border-thin) solid var(--helix-color-border);
 border-radius: var(--helix-radii-sm);
@@ -16,36 +10,9 @@ border-color var(--helix-duration-fast) var(--helix-easing-standard),
 background-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-:host(:not(:disabled)) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-}
-
-:host(:focus-within) [part="field"],
-:host(:focus-within) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
-:host(:state(invalid)) [part="field"],
-:host(:state(invalid)) [part="field"]:hover,
-:host(:state(invalid):focus-within) [part="field"],
-:host(:state(invalid):focus-within) [part="field"]:hover {
-border-color: var(--helix-color-danger);
-outline-color: var(--helix-color-danger);
-}
-
 [part="control"] {
-all: unset;
-
-box-sizing: border-box;
-overflow-wrap: break-word;
-color: var(--helix-color-foreground);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-inline-size: 100%;
 line-height: var(--helix-leading-normal);
+overflow-wrap: break-word;
 
 resize: vertical;
 }
@@ -66,7 +33,6 @@ background-color: transparent;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

package/dist/textarea/root/textarea-root.js

@@ -7,10 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTextarea } from '@fusion.dev/helix-headless/textarea';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles } from './textarea-root.css.js';
 let HelixTextarea = class HelixTextarea extends HelixHeadlessTextarea {
-    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        styles,
+    ]; }
 };
 HelixTextarea = __decorate([
     customElement('helix-textarea')

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

@@ -1,9 +1,5 @@
 import { createSheet } from '@fusion.dev/helix-core';
-export const styles = createSheet(`:host {
-display: block;
-}
-
-[part="field"] {
+export const styles = createSheet(`[part="field"] {
 align-items: center;
 background-color: var(--time-input-background-color, var(--helix-color-well));
 flex-wrap: wrap;
@@ -19,28 +15,6 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard),
 border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-[part="control"] {
-all: unset;
-box-sizing: border-box;
-color: var(--helix-color-foreground);
-flex: 1 1 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-md);
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
-}
-
-:host(:not(:disabled)) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-}
-
-:host(:focus-within) [part="field"],
-:host(:focus-within) [part="field"]:hover {
-border-color: var(--helix-color-primary);
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
-}
-
 :host(:disabled) [part="field"] {
 color: var(--helix-color-foreground-subtle);
 }
@@ -50,6 +24,8 @@ color: var(--helix-color-foreground-subtle);
 all: unset;
 
 align-items: center;
+
+box-sizing: border-box;
 color: var(--helix-color-foreground-muted);
 cursor: pointer;
 display: flex;
@@ -80,14 +56,11 @@ cursor: not-allowed;
 }
 
 [part="surface"] {
-background-color: var(--helix-color-surface-overlay);
-border: var(--time-input-border-width, var(--helix-border-floating)) solid
-var(--time-input-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--time-input-shadow, var(--helix-shadow-floating));
+--_floating-border-color: var(--time-input-border-color, var(--helix-color-border));
+--_floating-border-width: var(--time-input-border-width, var(--helix-border-floating));
+--_floating-shadow: var(--time-input-shadow, var(--helix-shadow-floating));
+
 inline-size: var(--floating-anchor-inline-size, 100%);
-inset: auto;
-margin: var(--helix-space-none);
 min-inline-size: max-content;
 
 overflow: hidden;
@@ -96,50 +69,11 @@ padding-inline: var(--helix-space-none);
 position: absolute;
 }
 
-[part="surface"] {
---_travel: calc(var(--helix-space-2xs) * -1);
-opacity: 0;
-scale: 0.96;
-transform: translateY(var(--_travel));
-transition:
-opacity var(--helix-duration-fast) var(--helix-easing-standard),
-scale var(--helix-duration-fast) var(--helix-easing-emphasized),
-transform var(--helix-duration-fast) var(--helix-easing-emphasized),
-display var(--helix-duration-fast) allow-discrete,
-overlay var(--helix-duration-fast) allow-discrete;
-}
-
-[part="surface"][data-placement^="top"] {
---_travel: var(--helix-space-2xs);
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part="surface"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part="surface"][data-placed] {
-opacity: 1;
-scale: 1;
-transform: none;
-}
-
-[part="surface"][hidden] {
-display: none;
-}
-
 @media (prefers-reduced-motion: reduce) {
 [part="field"],
 [part="trigger"] {
 transition: none;
 }
-
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
 }
 
 :host([variant="wheels"]) [part="surface"] {
@@ -156,17 +90,8 @@ flex-basis: 0;
 min-inline-size: var(--helix-size-icon-loose);
 }
 
-:host(:state(invalid)) [part="field"],
-:host(:state(invalid)) [part="field"]:hover,
-:host(:state(invalid):focus-within) [part="field"],
-:host(:state(invalid):focus-within) [part="field"]:hover {
-border-color: var(--helix-color-danger);
-outline-color: var(--helix-color-danger);
-}
-
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

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

@@ -10,12 +10,23 @@ import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
+import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
 import { styles as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './time-input-root.css.js';
 let HelixTimeInput = class HelixTimeInput extends HelixHeadlessTimeInput {
     static { this.tier = 'helix-'; }
-    static { this.styles = [fieldStyles, fieldStackedStyles, tagRowStyles, styles]; }
+    static { this.styles = [
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        tagRowStyles,
+        floatingPanelStyles,
+        floatingEntranceStyles,
+        styles,
+    ]; }
 };
 HelixTimeInput = __decorate([
     customElement('helix-time-input')

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

@@ -134,7 +134,6 @@ outline-offset: var(--helix-size-focus-offset);
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);