@fusion.dev/helix 0.26.0 → 0.30.1

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

@@ -15,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;
-}
-
 [part="trigger"] {
 all: unset;
 block-size: var(--helix-size-icon);
@@ -64,53 +42,15 @@ outline-offset: var(--helix-size-focus-offset);
 }
 
 [part="surface"] {
-background-color: var(--helix-color-surface-overlay);
-border: var(--date-input-border-width, var(--helix-border-floating)) solid
-var(--date-input-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--date-input-shadow, var(--helix-shadow-floating));
+--_floating-border-color: var(--date-input-border-color, var(--helix-color-border));
+--_floating-border-width: var(--date-input-border-width, var(--helix-border-floating));
+--_floating-shadow: var(--date-input-shadow, var(--helix-shadow-floating));
+
 inline-size: max-content;
-inset: auto;
-margin: var(--helix-space-none);
 padding: var(--helix-space-sm);
 position: absolute;
 }
 
-[part="surface"] {
---_travel: calc(var(--helix-space-2xs) * -1);
-opacity: 0;
-transform: translateY(var(--_travel));
-scale: 0.96;
-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);
-}
-
-[part="surface"][data-placed] {
-opacity: 1;
-scale: 1;
-transform: none;
-}
-
-[part="surface"][data-placement^="top"] {
-transform-origin: var(--floating-arrow-x, 50%) 100%;
-}
-
-[part="surface"][data-placement^="bottom"] {
-transform-origin: var(--floating-arrow-x, 50%) 0;
-}
-
-[part="surface"][hidden] {
-display: none;
-}
-
 :host(:disabled) [part="field"] {
 color: var(--helix-color-foreground-subtle);
 }
@@ -125,13 +65,6 @@ cursor: not-allowed;
 [part="trigger"] {
 transition: none;
 }
-
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
 }
 
 [part="date"] {
@@ -144,17 +77,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/date-input/root/date-input-root.js

@@ -9,12 +9,23 @@ import { HelixHeadlessDateInput } from '@fusion.dev/helix-headless/date-input';
 import '../../date-picker/index.js';
 import '../../tag/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 './date-input-root.css.js';
 let HelixDateInput = class HelixDateInput extends HelixHeadlessDateInput {
     static { this.tier = 'helix-'; }
-    static { this.styles = [fieldStyles, fieldStackedStyles, tagRowStyles, styles]; }
+    static { this.styles = [
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        tagRowStyles,
+        floatingPanelStyles,
+        floatingEntranceStyles,
+        styles,
+    ]; }
 };
 HelixDateInput = __decorate([
     customElement('helix-date-input')

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

@@ -76,6 +76,6 @@ min-block-size: 1em;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

package/dist/donut-chart/root/donut-chart-root.css.js

@@ -56,9 +56,11 @@ translate: -50% -50%;
 
 box-sizing: border-box;
 
+--_donut-chart-ring: 80;
+
 container-type: inline-size;
 display: grid;
-inline-size: calc(100% * (80 - var(--donut-chart-stroke, 16)) / 100);
+inline-size: calc(100% * (var(--_donut-chart-ring) - var(--donut-chart-stroke, 16)) / 100);
 place-items: center;
 text-align: center;
 }
@@ -128,7 +130,6 @@ font-size: 6.5cqi;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }

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

@@ -102,17 +102,6 @@ animation: none;
 scale: -1 1;
 }
 
-[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="page"] {
 opacity: 0.5;
 }

package/dist/drilldown/root/drilldown-root.js

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

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

@@ -38,7 +38,6 @@ margin-block-start: var(--helix-space-sm);
 
 @media print {
 :host {
-background-color: transparent;
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -21,13 +21,8 @@ opacity: 0;
 position: absolute;
 }
 
-:host {
-display: block;
-}
-
-[part="field"]:has([part="control"]:focus-visible) {
-outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
-outline-offset: 0;
+:host(:focus-within) [part="field"]:not(:focus-within) {
+outline: none;
 }
 
 [part="field"][data-dropping] {
@@ -55,7 +50,7 @@ display: flex;
 flex-direction: column;
 gap: var(--helix-space-2xs);
 list-style: none;
-margin-block: var(--helix-space-xs) 0;
+margin-block: var(--helix-space-2xs) 0;
 padding: var(--helix-space-none);
 }
 
@@ -154,10 +149,6 @@ color: var(--helix-color-foreground-subtle);
 cursor: not-allowed;
 }
 
-:host(:not(:disabled)) [part="field"]:hover {
-border-color: var(--helix-color-foreground-muted);
-}
-
 @media (prefers-reduced-motion: reduce) {
 [part="field"],
 [part="file"],
@@ -177,17 +168,8 @@ scale: 1 1;
 color: var(--helix-color-foreground-muted);
 }
 
-: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/file-input/root/file-input-root.js

@@ -8,13 +8,20 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessFileInput } from '@fusion.dev/helix-headless/file-input';
 import '../../icon/index.js';
 import '../../tag/index.js';
-import { styles as glyphStyles } from '../../icon/glyph.css.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 glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './file-input-root.css.js';
 let HelixFileInput = class HelixFileInput extends HelixHeadlessFileInput {
     static { this.tier = 'helix-'; }
-    static { this.styles = [glyphStyles, fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [
+        glyphStyles,
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        styles,
+    ]; }
 };
 HelixFileInput = __decorate([
     customElement('helix-file-input')

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

@@ -1,9 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_filter-input-size: var(--filter-input-size, var(--helix-size-control));
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
 }
 
 [part="field"] {
@@ -24,39 +21,13 @@ 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);
-}
-
 ::slotted([slot="tags"]) {
 flex: 0 0 auto;
 max-inline-size: 100%;
 }
 
 [part="control"] {
-all: unset;
-box-sizing: border-box;
-color: var(--helix-color-foreground);
 flex: 1 1 var(--filter-input-control-size, 6ch);
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
 }
 
 [part="lead"] {
@@ -122,21 +93,17 @@ opacity: 0.5;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }
 
 [part="surface"] {
-background-color: var(--helix-color-surface-overlay);
-border: var(--filter-input-border-width, var(--helix-border-floating)) solid
-var(--filter-input-border-color, var(--helix-color-border));
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--filter-input-shadow, var(--helix-shadow-floating));
+--_floating-border-color: var(--filter-input-border-color, var(--helix-color-border));
+--_floating-border-width: var(--filter-input-border-width, var(--helix-border-floating));
+--_floating-shadow: var(--filter-input-shadow, var(--helix-shadow-floating));
+
 box-sizing: border-box;
 inline-size: var(--filter-input-panel-size, var(--floating-anchor-inline-size, 100%));
-inset: auto;
-margin: var(--helix-space-none);
 
 max-block-size: var(--floating-available-block-size, 20rem);
 min-inline-size: max-content;
@@ -144,49 +111,4 @@ overflow-y: auto;
 padding-block: var(--helix-space-2xs);
 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],
-[part="surface"]:not(:popover-open) {
-display: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
 }`);

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

@@ -8,17 +8,23 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessFilterInput } from '@fusion.dev/helix-headless/filter-input';
 import '../../icon/index.js';
 import '../../option/index.js';
-import { styles as glyphStyles } from '../../icon/glyph.css.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 glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles as tagRowStyles } from '../../shared/tags/tags.css.js';
 import { styles } from './filter-input-root.css.js';
 let HelixFilterInput = class HelixFilterInput extends HelixHeadlessFilterInput {
     static { this.styles = [
         glyphStyles,
         fieldStyles,
+        fieldFrameStyles,
         fieldStackedStyles,
         tagRowStyles,
+        floatingPanelStyles,
+        floatingEntranceStyles,
         styles,
     ]; }
 };

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

@@ -75,6 +75,6 @@ justify-content: space-around;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -68,6 +68,6 @@ align-items: end;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -14,6 +14,6 @@ inline-size: 100%;
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

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

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

@@ -1,9 +1,6 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_input-size: var(--input-size, var(--helix-size-control));
-display: flex;
-flex-direction: column;
-gap: var(--helix-space-2xs);
 }
 
 [part="field"] {
@@ -21,36 +18,8 @@ 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;
 block-size: 100%;
-color: var(--helix-color-foreground);
-flex: 1 1 auto;
-font-family: var(--helix-font-sans);
-font-size: var(--helix-text-sm);
-font-weight: var(--helix-weight-medium);
-min-inline-size: 0;
 }
 
 [part="control"]::-webkit-search-cancel-button {
@@ -107,7 +76,6 @@ color: var(--helix-color-foreground);
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

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

@@ -7,12 +7,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessInput } from '@fusion.dev/helix-headless/input';
 import '../../icon/index.js';
-import { styles as glyphStyles } from '../../icon/glyph.css.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 glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './input-root.css.js';
 let HelixInput = class HelixInput extends HelixHeadlessInput {
-    static { this.styles = [glyphStyles, fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [
+        glyphStyles,
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        styles,
+    ]; }
 };
 HelixInput = __decorate([
     customElement('helix-input')

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

@@ -76,13 +76,12 @@ color-mix(in oklab, var(--chart-series) calc(var(--_legend-through, 1) * 100%),
 --_legend-through: calc(0.62 * var(--helix-material-opacity));
 }
 
-[part="entry"][data-material="frosted"],
 :host([material="frosted"]) [part="entry"]:not([data-material]) [part="swatch"] {
 --_legend-through: calc(0.88 * var(--helix-material-opacity));
 }
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

package/dist/line-chart/root/line-chart-root.css.js

@@ -21,7 +21,8 @@ overflow: visible;
 [part="line"] {
 stroke-linecap: round;
 stroke-linejoin: round;
-stroke-width: var(--line-chart-width, 2px);
+
+stroke-width: var(--line-chart-width, var(--_chart-stroke));
 vector-effect: non-scaling-stroke;
 }
 
@@ -117,7 +118,6 @@ fill: var(--line-chart-band-color, var(--helix-color-surface-sunken));
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }

package/dist/line-chart/root/line-chart-root.d.ts

@@ -24,12 +24,14 @@ import '../../tooltip/index.js';
  * @aliases Time Series, Trend Chart, Multi-line Chart
  * @documentation https://helix.fusion.dev/components/line-chart
  *
+ * @cssproperty --chart-stroke - Thickness of a series drawn as a line, here and on Area
+ *   Chart's top edge and Bar Chart's `lines`. Each family's own width hook overrides it.
  * @cssproperty --line-chart-area-opacity - How much of a line's color its wash takes.
  * @cssproperty --line-chart-band-color - The slot the pointer is resting in.
  * @cssproperty --line-chart-block-size - Height of the drawing.
  * @cssproperty --line-chart-gap - Space between the drawing and its labels.
  * @cssproperty --line-chart-gridline-color - One rule across the plot, under `gridlines`.
- * @cssproperty --line-chart-width - Thickness of a line.
+ * @cssproperty --line-chart-width - Thickness of a line, over `--chart-stroke`.
  */
 export declare class HelixLineChart extends HelixHeadlessLineChart {
     /**

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

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

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

@@ -44,13 +44,8 @@ cursor: not-allowed;
 
 [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-xs);
-padding-inline: var(--helix-space-xs);
-text-align: center;
+--_collection-inset-block: var(--helix-space-xs);
+--_collection-inset-inline: var(--helix-space-xs);
 }
 
 [part="filter-icon"] {
@@ -103,7 +98,6 @@ opacity: 0.5;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

package/dist/listbox/root/listbox-root.js

@@ -6,11 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessListbox } from '@fusion.dev/helix-headless/listbox';
+import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles as fieldStyles } from '../../shared/field/field.css.js';
 import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
 import { styles } from './listbox-root.css.js';
 let HelixListbox = class HelixListbox extends HelixHeadlessListbox {
-    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [
+        collectionStateStyles,
+        fieldStyles,
+        fieldStackedStyles,
+        styles,
+    ]; }
 };
 HelixListbox = __decorate([
     customElement('helix-listbox')