@fusion.dev/helix 0.25.1 → 0.30.0

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

@@ -2,6 +2,10 @@ import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 
 --_loader-size: var(--helix-size-loader-md);
+
+--_loader-breathe: 2.4s;
+--_loader-stroke: 2;
+--_loader-turn: 0.8s;
 color: inherit;
 
 display: inline-grid;
@@ -19,21 +23,21 @@ vertical-align: middle;
 }
 
 [part="svg"] {
-animation: helix-loader-turn 0.8s linear infinite;
+animation: helix-loader-turn var(--_loader-turn) linear infinite;
 grid-area: 1 / 1;
 block-size: var(--loader-size, var(--_loader-size));
 inline-size: var(--loader-size, var(--_loader-size));
 }
 
 [part="track"] {
-animation: helix-loader-breathe 2.4s ease-in-out infinite;
+animation: helix-loader-breathe var(--_loader-breathe) ease-in-out infinite;
 opacity: 0.18;
 stroke: var(--loader-track-color, currentColor);
-stroke-width: 2;
+stroke-width: var(--_loader-stroke);
 }
 
 [part="mark"] {
-animation: helix-loader-breathe-mark 2.4s ease-in-out infinite;
+animation: helix-loader-breathe-mark var(--_loader-breathe) ease-in-out infinite;
 }
 
 @keyframes helix-loader-breathe {
@@ -64,7 +68,7 @@ scale: 1;
 stroke: var(--loader-color, currentColor);
 stroke-dasharray: 50, 100;
 stroke-linecap: round;
-stroke-width: 2;
+stroke-width: var(--_loader-stroke);
 }
 
 @keyframes helix-loader-turn {

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

@@ -19,16 +19,11 @@ display: contents;
 max-block-size: var(--menu-max-block-size, var(--floating-available-block-size, none));
 overflow-y: auto;
 
-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));
+--_floating-background-color: var(--menu-background-color, var(--helix-color-surface-overlay));
+--_floating-border-color: var(--menu-border-color, var(--helix-color-border));
+--_floating-border-width: var(--menu-border-width, var(--helix-border-floating));
+--_floating-shadow: var(--menu-shadow, var(--helix-shadow-floating));
 
-border: var(--menu-border-width, var(--helix-border-floating)) solid
-var(--menu-border-color, var(--helix-color-border));
-
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--menu-shadow, var(--helix-shadow-floating));
-
-inset: auto;
-margin: var(--helix-space-none);
 min-inline-size: var(--menu-min-inline-size, 12rem);
 
 padding-block: var(--helix-space-xs);
@@ -43,41 +38,6 @@ padding-inline: var(--helix-space-none);
 --menu-item-end: calc(var(--helix-size-icon) + var(--helix-space-xs));
 }
 
-[part="surface"][hidden] {
-display: none;
-}
-
-[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"][data-placement^="left"] {
 transform-origin: 100% var(--floating-arrow-y, 50%);
 }
@@ -86,15 +46,6 @@ transform-origin: 100% var(--floating-arrow-y, 50%);
 transform-origin: 0 var(--floating-arrow-y, 50%);
 }
 
-@media (prefers-reduced-motion: reduce) {
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
-}
-
 [part="header"] {
 align-items: center;
 border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
@@ -153,17 +104,6 @@ display: 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="surface"] {
 opacity: 0.5;
 }

package/dist/menu/root/menu-root.js

@@ -6,9 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessMenu } from '@fusion.dev/helix-headless/menu';
+import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
+import { styles as floatingEntranceStyles } from '../../shared/floating/entrance.css.js';
+import { styles as floatingPanelStyles } from '../../shared/floating/panel.css.js';
 import { styles } from './menu-root.css.js';
 let HelixMenu = class HelixMenu extends HelixHeadlessMenu {
-    static { this.styles = styles; }
+    static { this.styles = [
+        collectionStateStyles,
+        floatingPanelStyles,
+        floatingEntranceStyles,
+        styles,
+    ]; }
 };
 HelixMenu = __decorate([
     customElement('helix-menu')

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

@@ -174,7 +174,6 @@ grid-area: 1 / 1;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }

package/dist/notifications/group/notification-group.css.js

@@ -35,6 +35,7 @@ text-align: center;
 [part="trigger"] {
 all: unset;
 align-items: center;
+box-sizing: border-box;
 border-radius: var(--helix-radii-sm);
 cursor: pointer;
 display: inline-flex;

package/dist/notifications/notification/notification.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessNotification } from '@fusion.dev/helix-headless/notifications';
 import { property } from 'lit/decorators.js';
-import { styles as glyphStyles } from '../../icon/glyph.css.js';
+import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './notification.css.js';
 import '../../format-date/index.js';
 let HelixNotification = class HelixNotification extends HelixHeadlessNotification {

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

@@ -78,13 +78,8 @@ outline-offset: var(--helix-size-focus-offset);
 
 [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-lg);
-padding-inline: var(--helix-space-md);
-text-align: center;
+--_collection-inset-block: var(--helix-space-lg);
+--_collection-inset-inline: var(--helix-space-md);
 }
 
 @media print {

package/dist/notifications/root/notifications-root.js

@@ -6,11 +6,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessNotifications } from '@fusion.dev/helix-headless/notifications';
+import { styles as collectionStateStyles } from '../../shared/collection/state.css.js';
 import { styles } from './notifications-root.css.js';
 import '../notification/notification.js';
 let HelixNotifications = class HelixNotifications extends HelixHeadlessNotifications {
     static { this.tier = 'helix-'; }
-    static { this.styles = styles; }
+    static { this.styles = [collectionStateStyles, styles]; }
 };
 HelixNotifications = __decorate([
     customElement('helix-notifications')

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

@@ -1,13 +1,7 @@
 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"] {
 align-items: center;
-background-color: var(--helix-color-well);
+background-color: var(--number-input-background-color, var(--helix-color-well));
 block-size: var(--helix-size-control);
 border: var(--helix-border-thin) solid var(--helix-color-border);
 border-radius: var(--helix-radii-sm);
@@ -18,27 +12,6 @@ overflow: hidden;
 transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
 }
 
-:host(:not(:disabled)) [part="field"]:hover {
-border-color: var(--helix-color-foreground-muted);
-}
-
-:host(:not(:disabled)) [part="field"]:focus-within {
-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);
-}
-
-:host(:state(invalid):focus-within) [part="field"] {
-outline-color: var(--helix-color-danger);
-}
-
 :host(:disabled) [part="field"] {
 cursor: not-allowed;
 opacity: 0.5;
@@ -49,16 +22,6 @@ background-color: transparent;
 }
 
 [part="control"] {
-all: unset;
-
-box-sizing: border-box;
-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%;
-min-inline-size: 0;
-
 font-variant-numeric: tabular-nums;
 padding-inline: var(--helix-space-xs);
 text-align: center;
@@ -134,7 +97,6 @@ cursor: default;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

package/dist/number-input/root/number-input-root.d.ts

@@ -30,6 +30,8 @@ import type { CSSResultGroup } from 'lit';
  * @csspart decrement - The control that steps down.
  * @csspart field - The box holding everything.
  * @csspart increment - The control that steps up.
+ *
+ * @cssproperty --number-input-background-color - Fill behind the number.
  */
 export declare class HelixNumberInput extends HelixHeadlessNumberInput {
     static styles: CSSResultGroup;

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

@@ -7,10 +7,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessNumberInput } from '@fusion.dev/helix-headless/number-input';
 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 './number-input-root.css.js';
 let HelixNumberInput = class HelixNumberInput extends HelixHeadlessNumberInput {
-    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [
+        fieldStyles,
+        fieldFrameStyles,
+        fieldStackedStyles,
+        styles,
+    ]; }
 };
 HelixNumberInput = __decorate([
     customElement('helix-number-input')

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

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

package/dist/orb/index.d.ts

@@ -1,2 +1,2 @@
 export * from './root/orb-root.js';
-export * from './root/orb-shapes.js';
+export * from './shapes.js';

package/dist/orb/index.js

@@ -1,2 +1,2 @@
 export * from './root/orb-root.js';
-export * from './root/orb-shapes.js';
+export * from './shapes.js';

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

@@ -1,6 +1,6 @@
 import { HelixElement } from '@fusion.dev/helix-core';
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
-import { type OrbState } from './orb-shapes.js';
+import { type OrbState } from '../shapes.js';
 /**
  * @summary Says what an agent is doing, as a shape rather than a word.
  *
@@ -37,6 +37,10 @@ import { type OrbState } from './orb-shapes.js';
  * **It stops when nobody is looking**, off screen and in a background tab, and
  * `prefers-reduced-motion` gets one still frame rather than an empty box.
  *
+ * Styled only, and with behavior, which the tier split does not otherwise
+ * allow: the behavior is drawing dots to a canvas, so there is no structure a
+ * consumer could restyle and nothing for a headless twin to hold.
+ *
  * @since 0.8.0
  * @status experimental
  * @category feedback

package/dist/orb/root/orb-root.js

@@ -7,9 +7,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement, HelixElement, hostAria } from '@fusion.dev/helix-core';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { readColor } from './orb-color.js';
+import { readColor } from '../color.js';
+import { blendStaged, evenSphere, fibonacci, meshFor, ORB_STATES, orbPoint, paramsFor, project, smoother, stateDistance, TRAIL, } from '../shapes.js';
 import { styles } from './orb-root.css.js';
-import { blendStaged, evenSphere, fibonacci, meshFor, ORB_STATES, orbPoint, paramsFor, project, smoother, stateDistance, TRAIL, } from './orb-shapes.js';
 const MORPH_NEAR = 380;
 const MORPH_REACH = 580;
 const LIGHT_Y = 0.36;
@@ -68,7 +68,7 @@ let HelixOrb = class HelixOrb extends HelixElement {
             }
         };
     }
-    static { this.styles = [styles]; }
+    static { this.styles = styles; }
     willUpdate(changed) {
         super.willUpdate(changed);
         const state = ORB_STATES.includes(this.state)

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

@@ -125,6 +125,6 @@ var(--outline-indent, var(--helix-space-sm))
 
 @media print {
 :host {
-box-shadow: none;
+print-color-adjust: economy;
 }
 }`);

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

@@ -61,7 +61,6 @@ color: var(--helix-color-foreground-subtle);
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

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

@@ -196,7 +196,6 @@ stroke-dasharray: 25 100;
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }

package/dist/qr-code/root/qr-code-root.css.js

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

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

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

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

@@ -123,6 +123,9 @@ display: none;
 }
 
 :host([variant="chip"]) [part="item"] {
+
+--_radio-chip-lift: 2px;
+
 align-items: center;
 background-color: var(--helix-color-surface-sunken);
 block-size: var(--radio-chip-size, var(--helix-size-control));
@@ -143,11 +146,11 @@ translate var(--helix-duration-fast) var(--helix-easing-standard);
 background-color: var(--helix-color-surface-inverse);
 box-shadow: var(--helix-shadow-md);
 color: var(--helix-color-foreground-inverse);
-translate: 0 -2px;
+translate: 0 calc(var(--_radio-chip-lift) * -1);
 }
 
 :host(:not([disabled])[variant="chip"]) [part="item"]:hover {
-translate: 0 -1px;
+translate: 0 calc(var(--_radio-chip-lift) / -2);
 }
 
 :host([variant="chip"]) [part="item"]:focus-visible {

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

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

package/dist/scroll-area/root/scroll-area-root.css.js

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

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

@@ -76,66 +76,18 @@ white-space: nowrap;
 }
 
 [part="surface"] {
+--_floating-border-color: var(--select-border-color, var(--helix-color-border));
+--_floating-border-width: var(--select-border-width, var(--helix-border-floating));
+--_floating-shadow: var(--select-shadow, var(--helix-shadow-floating));
 
 --option-radius: var(--helix-radii-none);
 
-background-color: var(--helix-color-surface-overlay);
-border-radius: var(--helix-radii-sm);
-box-shadow: var(--select-shadow, var(--helix-shadow-floating));
-
 inline-size: var(--floating-anchor-inline-size, 100%);
 min-inline-size: max-content;
 
 max-block-size: var(--floating-available-block-size, none);
 padding-block: var(--helix-space-xs);
 padding-inline: var(--helix-space-none);
-
-border: var(--select-border-width, var(--helix-border-floating)) solid
-var(--select-border-color, var(--helix-color-border));
-inset: auto;
-margin: var(--helix-space-none);
-}
-
-[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;
-}
-
-@media (prefers-reduced-motion: reduce) {
-[part="surface"],
-[part="surface"][data-placed] {
-scale: 1;
-transform: none;
-transition: none;
-}
 }
 
 [part="indicator"],
@@ -148,11 +100,6 @@ transition: scale var(--helix-duration-fast) var(--helix-easing-standard);
 scale: 1 -1;
 }
 
-[part="surface"][hidden],
-[part="surface"]:not(:popover-open) {
-display: none;
-}
-
 [part="listbox"]::part(items) {
 background-color: transparent;
 border: none;
@@ -174,7 +121,6 @@ inline-size: var(--helix-size-icon-tight);
 
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);

package/dist/select/root/select-root.js

@@ -9,12 +9,20 @@ import { HelixHeadlessSelect } from '@fusion.dev/helix-headless/select';
 import { property } from 'lit/decorators.js';
 import { styles as fieldStyles } from '../../shared/field/field.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 } from './select-root.css.js';
 import '../../listbox/index.js';
 import '../../option/index.js';
 let HelixSelect = class HelixSelect extends HelixHeadlessSelect {
     static { this.tier = 'helix-'; }
-    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+    static { this.styles = [
+        fieldStyles,
+        fieldStackedStyles,
+        floatingPanelStyles,
+        floatingEntranceStyles,
+        styles,
+    ]; }
 };
 __decorate([
     property({ reflect: true })

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

@@ -26,9 +26,12 @@ export const styles = createSheet(`:host {
 --chart-series-24: var(--helix-color-series-24);
 }
 
+:host {
+--_chart-stroke: var(--chart-stroke, 2px);
+}
+
 @media print {
 :host {
-box-shadow: none;
 print-color-adjust: exact;
 }
 }`);