@fusion.dev/helix 0.143.0 → 0.145.0

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

@@ -77,6 +77,25 @@ flex-basis: 0;
 min-inline-size: var(--helix-size-icon-loose);
 }
 
+[part="segments"] {
+--_segment-focus-background-color: var(
+--date-input-segment-focus-background-color,
+var(--helix-color-primary)
+);
+--_segment-focus-color: var(
+--date-input-segment-focus-color,
+var(--helix-color-foreground-on-primary)
+);
+--_segment-literal-color: var(
+--date-input-segment-literal-color,
+var(--helix-color-foreground-muted)
+);
+--_segment-placeholder-color: var(
+--date-input-segment-placeholder-color,
+var(--helix-color-foreground-subtle)
+);
+}
+
 @media print {
 :host {
 print-color-adjust: exact;

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

@@ -27,6 +27,14 @@ import '../../tag/index.js';
  * @cssproperty --date-input-border-width - The width of the panel's border. It
  *   follows `--helix-border-floating`, which is `0`, so the panel stands out by its
  *   shadow unless a theme sets a border.
+ * @cssproperty --date-input-segment-focus-background-color - The fill behind the
+ *   segment with focus, in `segmented`. It follows `--helix-color-primary`.
+ * @cssproperty --date-input-segment-focus-color - The text of the segment with
+ *   focus, in `segmented`.
+ * @cssproperty --date-input-segment-literal-color - The text the locale writes
+ *   between two segments, in `segmented`.
+ * @cssproperty --date-input-segment-placeholder-color - The dashes of a segment
+ *   with nothing in it, in `segmented`. It matches the text field's placeholder.
  * @cssproperty --date-input-shadow - The shadow under the panel. It follows
  *   `--helix-shadow-floating`. The panel can sit over any content, so it has a
  *   shadow by default.

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

@@ -10,6 +10,7 @@ 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 fieldSegmentsStyles } from '../../shared/field/field-segments.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';
@@ -21,6 +22,7 @@ let HelixDateInput = class HelixDateInput extends HelixHeadlessDateInput {
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,
+        fieldSegmentsStyles,
         tagRowStyles,
         floatingPanelStyles,
         floatingEntranceStyles,

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

@@ -68,6 +68,74 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
+[part="heading-button"] {
+all: unset;
+box-sizing: border-box;
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+padding-inline: var(--helix-space-2xs);
+}
+
+[part="heading-button"]:hover:not(:disabled) {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part="heading-button"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="periods"] {
+display: grid;
+gap: var(--helix-space-2xs);
+inline-size: calc(var(--_calendar-track) * 7);
+}
+
+[part="period-row"] {
+display: grid;
+gap: var(--helix-space-2xs);
+grid-template-columns: repeat(3, 1fr);
+}
+
+[part~="period"] {
+align-items: center;
+block-size: var(--date-picker-period-size, calc(var(--_calendar-row) * 1.5));
+border-radius: var(--helix-radii-sm);
+cursor: pointer;
+display: inline-flex;
+font-size: var(--helix-text-sm);
+justify-content: center;
+transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part~="period"]:hover:not([aria-disabled]) {
+background-color: var(--helix-color-surface-sunken);
+}
+
+[part~="period-current"] {
+box-shadow: inset 0 0 0 var(--helix-border-thin) var(--helix-color-border);
+}
+
+[part~="period-selected"] {
+background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
+color: var(--helix-color-foreground-inverse);
+}
+
+[part~="period-selected"]:hover:not([aria-disabled]) {
+background-color: var(--date-picker-selected-color, var(--helix-color-surface-inverse));
+}
+
+[part~="period-disabled"] {
+color: var(--helix-color-foreground-subtle);
+cursor: default;
+opacity: 0.4;
+}
+
+[part~="period"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
 [part="previous"]:disabled,
 [part="next"]:disabled {
 cursor: default;

package/dist/date-picker/root/date-picker-root.d.ts

@@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit';
  *
  * @cssproperty --date-picker-columns - Months per row. Two unless there is only one.
  * @cssproperty --date-picker-day-size - Width and height of a day.
+ * @cssproperty --date-picker-period-size - Height of a month or a year in the months and years views, where `max-view` is set.
  * @cssproperty --date-picker-range-color - Band behind the days in a range.
  * @cssproperty --date-picker-row-size - Height of a week row.
  * @cssproperty --date-picker-selected-color - Fill behind a selected day.

package/dist/description-list/item/description-list-item.css.js

@@ -24,6 +24,17 @@ overflow-wrap: anywhere;
 text-align: var(--_description-list-value-align, start);
 }
 
+::slotted(dd) {
+color: var(--helix-color-foreground);
+font-variant-numeric: var(--_description-list-value-figures, normal);
+grid-column: -2 / -1;
+justify-self: var(--_description-list-value-align, stretch);
+margin: 0;
+min-inline-size: 0;
+overflow-wrap: anywhere;
+text-align: var(--_description-list-value-align, start);
+}
+
 @media print {
 :host {
 break-inside: avoid;

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

@@ -176,6 +176,53 @@ justify-content: center;
 margin-inline: auto;
 }
 
+[part="dismiss"] {
+all: unset;
+
+box-sizing: border-box;
+position: absolute;
+inset-block-start: calc(
+var(--dialog-padding, var(--helix-space-lg)) +
+(var(--helix-text-xl) * var(--helix-leading-tight) - var(--helix-size-control-sm)) /
+2
+);
+inset-inline-end: var(--helix-space-md);
+block-size: var(--helix-size-control-sm);
+border-radius: var(--helix-radii-sm);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--helix-size-control-sm);
+place-content: center;
+place-items: center;
+transition: color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+[part="dismiss"] svg {
+block-size: var(--helix-size-icon-sm);
+inline-size: var(--helix-size-icon-sm);
+}
+
+[part="dismiss"]:hover {
+background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);
+color: var(--helix-color-foreground);
+}
+
+[part="dismiss"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([dismissible]) ::slotted([slot="header"]) {
+padding-inline-end: calc(var(--helix-size-control-sm) + var(--helix-space-xs));
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="dismiss"] {
+transition: none;
+}
+}
+
 @media print {
 :host {
 display: none;

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

@@ -7,8 +7,8 @@ display: flex;
 }
 
 [part="content"] {
-color: var(--helix-color-foreground-muted);
-margin-inline: var(--helix-space-sm);
+color: var(--divider-content-color, var(--helix-color-foreground-muted));
+margin-inline: var(--divider-content-gap, var(--helix-space-sm));
 display: inline-flex;
 flex: 0 0 auto;
 font-family: var(--helix-font-sans);
@@ -49,7 +49,7 @@ flex-direction: column;
 }
 
 :host([orientation="vertical"]) [part="content"] {
-margin-block: var(--helix-space-sm);
+margin-block: var(--divider-content-gap, var(--helix-space-sm));
 margin-inline: var(--helix-space-none);
 }
 
@@ -74,6 +74,11 @@ inline-size: var(--_divider-thickness);
 min-block-size: 1em;
 }
 
+:host([content-placement="start"]) [part="line"]:has(+ [part="content"]:not([data-empty])),
+:host([content-placement="end"]) [part="content"]:not([data-empty]) + [part="line"] {
+flex: 0 0 var(--divider-content-offset, var(--helix-space-lg));
+}
+
 @media print {
 :host {
 print-color-adjust: economy;

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

@@ -8,15 +8,23 @@ import type { CSSResultGroup } from 'lit';
  * default. A vertical divider stretches to fit its flex parent, so it matches
  * the height of what it sits beside.
  *
+ * Content set into the line sits at its middle. `content-placement` moves it
+ * toward the start or the end, leaving a short length of line before or after
+ * it, the way a section label sits in a form.
+ *
  * @since 0.1.0
  * @status stable
  * @category layout
  * @aliases Separator, Rule
  * @documentation https://fusion.dev/helix/components/divider
  *
- * @csspart line - The line.
+ * @csspart content - The content set into the line.
+ * @csspart line - The line, or each half of it when content is set into it.
  *
  * @cssproperty --divider-color - The color of the line.
+ * @cssproperty --divider-content-color - The color of the content set into the line.
+ * @cssproperty --divider-content-gap - The space either side of the content set into the line.
+ * @cssproperty --divider-content-offset - The length of line before the content under `content-placement="start"`, or after it under `end`.
  * @cssproperty --divider-length - The length of a vertical line. A horizontal line takes the divider's width.
  * @cssproperty --divider-padding - The space removed from both ends of the line.
  * @cssproperty --divider-padding-end - The space removed from the end of the line only.
@@ -24,6 +32,14 @@ import type { CSSResultGroup } from 'lit';
  * @cssproperty --divider-thickness - The thickness of the line.
  */
 export declare class HelixDivider extends HelixHeadlessDivider {
+    /**
+     * Where content set into the line sits along it.
+     *
+     * Absent is the middle. `start` and `end` move it toward one end, with a
+     * short length of line, `--divider-content-offset`, kept before or after it.
+     * A divider with nothing set into it is one line whatever this says.
+     */
+    contentPlacement?: 'end' | 'start';
     static styles: CSSResultGroup;
 }
 declare global {

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

@@ -6,10 +6,14 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessDivider } from '@fusion.dev/helix-headless/divider';
+import { property } from 'lit/decorators.js';
 import { styles } from './divider-root.css.js';
 let HelixDivider = class HelixDivider extends HelixHeadlessDivider {
     static { this.styles = styles; }
 };
+__decorate([
+    property({ attribute: 'content-placement', reflect: true })
+], HelixDivider.prototype, "contentPlacement", void 0);
 HelixDivider = __decorate([
     customElement('helix-divider')
 ], HelixDivider);

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

@@ -134,7 +134,23 @@ inset-inline: 0;
 border: var(--drawer-border-width, var(--helix-border-floating)) solid
 var(--drawer-border-color, var(--helix-color-border));
 box-shadow: var(--drawer-shadow, var(--helix-shadow-floating));
-transform: translate(0, 0);
+
+transform: translate(var(--drawer-swipe-x, 0), var(--drawer-swipe-y, 0));
+}
+
+[part="panel"],
+[part="content"] {
+touch-action: pan-y;
+}
+
+:host([placement="bottom"]) [part="panel"],
+:host([placement="top"]) [part="panel"] {
+touch-action: pan-x;
+}
+
+[part="panel"][data-swiping] {
+transition: none;
+user-select: none;
 }
 
 @starting-style {
@@ -159,6 +175,17 @@ margin: var(--helix-space-none);
 margin-block-end: var(--helix-space-md);
 }
 
+[part="footer"] {
+flex: 0 0 auto;
+}
+
+::slotted([slot="footer"]) {
+display: flex;
+flex-wrap: wrap;
+gap: var(--helix-space-xs);
+margin-block-start: var(--helix-space-md);
+}
+
 [part="content"] {
 flex: 1 1 auto;
 min-block-size: 0;

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

@@ -27,7 +27,8 @@ text-overflow: ellipsis;
 white-space: nowrap;
 }
 
-[part="mark"] {
+[part="mark"],
+slot[name="chevron"]::slotted(*) {
 block-size: var(--helix-size-icon-tight);
 color: var(--helix-color-foreground-subtle);
 flex: none;

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

@@ -31,7 +31,8 @@ inline-size: var(--helix-size-control-tight);
 justify-content: center;
 }
 
-[part="back"] svg {
+[part="back"] svg,
+slot[name="back-icon"]::slotted(*) {
 block-size: var(--helix-size-icon-tight);
 inline-size: var(--helix-size-icon-tight);
 }

package/dist/element-events.generated.js

@@ -3,7 +3,9 @@ registerElementEvents({
     'helix-accordion-item': ['helix-before-close', 'helix-before-open', 'toggle'],
     'helix-announcement': ['helix-dismiss'],
     'helix-app-header': ['helix-scrolled'],
+    'helix-aura': ['helix-aura-fallback'],
     'helix-avatar': ['error', 'load'],
+    'helix-callout': ['helix-dismiss'],
     'helix-canvas': [
         'helix-before-move',
         'helix-before-reconnect',
@@ -21,7 +23,7 @@ registerElementEvents({
     ],
     'helix-carousel': ['helix-activate', 'helix-select'],
     'helix-chat': ['helix-before-pin', 'helix-history', 'helix-pin', 'helix-send'],
-    'helix-chat-composer': ['helix-send', 'input'],
+    'helix-chat-composer': ['helix-send', 'helix-typing', 'input'],
     'helix-chat-message': ['helix-send'],
     'helix-checkbox': ['change', 'helix-before-toggle', 'input'],
     'helix-checkbox-group': ['change', 'helix-before-change', 'input'],
@@ -58,11 +60,13 @@ registerElementEvents({
         'helix-select',
         'toggle',
     ],
-    'helix-copy-button': ['helix-copy'],
+    'helix-copy-button': ['helix-copy', 'helix-copy-error'],
     'helix-data-table': [
         'helix-activate',
+        'helix-expand',
         'helix-filter',
         'helix-filtered',
+        'helix-load-more',
         'helix-navigate',
         'helix-reorder',
         'helix-reordered',
@@ -84,7 +88,7 @@ registerElementEvents({
     'helix-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
     'helix-drilldown': ['helix-select'],
     'helix-drilldown-item': ['helix-select'],
-    'helix-file-input': ['change', 'helix-before-change', 'input'],
+    'helix-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
     'helix-filter-chip': ['helix-dismiss'],
     'helix-filter-input': [
         'change',
@@ -110,10 +114,11 @@ registerElementEvents({
         'helix-graph-zoom',
     ],
     'helix-heatmap': ['helix-resize'],
-    'helix-icon': ['error'],
+    'helix-icon': ['error', 'load'],
     'helix-image': ['error', 'load'],
-    'helix-input': ['change', 'helix-before-change', 'input'],
+    'helix-input': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-kbd': ['helix-shortcut'],
+    'helix-legend': ['change', 'helix-before-change'],
     'helix-lightbox': [
         'close',
         'helix-activate',
@@ -122,6 +127,8 @@ registerElementEvents({
         'helix-before-open',
         'toggle',
     ],
+    'helix-list': ['change', 'helix-action', 'helix-before-change'],
+    'helix-list-item': ['helix-action'],
     'helix-listbox': ['change', 'helix-before-change', 'helix-filter', 'input'],
     'helix-map': [
         'change',
@@ -135,6 +142,7 @@ registerElementEvents({
         'helix-map-rotate',
         'helix-map-tilt',
         'helix-map-zoom',
+        'helix-toggle',
     ],
     'helix-map-area': ['helix-map-part-change'],
     'helix-map-buildings': ['helix-map-part-change'],
@@ -151,9 +159,15 @@ registerElementEvents({
     'helix-menu-item': ['helix-before-toggle', 'helix-select'],
     'helix-notification': ['helix-dismiss', 'helix-read'],
     'helix-notification-group': ['helix-before-close', 'helix-before-open', 'toggle'],
-    'helix-notifications': ['helix-dismiss', 'helix-read'],
+    'helix-notifications': ['helix-dismiss', 'helix-load-more', 'helix-read'],
     'helix-number-input': ['change', 'helix-before-change', 'input'],
-    'helix-object-inspector': ['helix-copy'],
+    'helix-object-inspector': [
+        'helix-activate',
+        'helix-before-activate',
+        'helix-copy',
+        'helix-filter',
+        'helix-filtered',
+    ],
     'helix-option': ['helix-select'],
     'helix-outline': ['helix-activate'],
     'helix-pagination': ['helix-activate', 'helix-navigate'],
@@ -163,17 +177,21 @@ registerElementEvents({
     'helix-qr-code': ['error'],
     'helix-radio': ['helix-select'],
     'helix-radio-group': ['change', 'helix-before-change', 'helix-select', 'input'],
-    'helix-rating': ['change', 'helix-before-change', 'input'],
+    'helix-rating': ['change', 'helix-before-change', 'helix-clear', 'input'],
     'helix-sandbox': [
         'helix-before-edit',
         'helix-before-panel-resize',
         'helix-before-split',
         'helix-caret',
         'helix-console',
+        'helix-edit',
+        'helix-panel-resize',
         'helix-resize',
+        'helix-split',
     ],
     'helix-sandbox-preview': ['helix-console', 'helix-resize'],
-    'helix-sandbox-source': ['helix-before-edit', 'helix-caret'],
+    'helix-sandbox-source': ['helix-before-edit', 'helix-caret', 'helix-edit'],
+    'helix-scroll-area': ['scroll', 'scrollend'],
     'helix-select': [
         'change',
         'helix-before-change',
@@ -196,10 +214,11 @@ registerElementEvents({
     'helix-steps': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-switch': ['change', 'helix-before-toggle', 'input'],
     'helix-tab': ['helix-select'],
-    'helix-table': ['helix-sort'],
-    'helix-table-column': ['helix-before-resize'],
+    'helix-table': ['helix-select', 'helix-selected', 'helix-sort', 'helix-sorted'],
+    'helix-table-column': ['helix-before-resize', 'helix-resized'],
     'helix-tabs': ['helix-activate', 'helix-before-activate', 'helix-select'],
     'helix-tag': ['helix-dismiss'],
+    'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
     'helix-textarea': ['change', 'helix-before-change', 'input'],
     'helix-time-input': [
         'change',
@@ -226,9 +245,42 @@ registerElementEvents({
     ],
     'helix-tour-stop': ['helix-tour-ask'],
     'helix-tree': ['helix-activate', 'helix-before-activate', 'helix-select'],
-    'helix-tree-item': ['helix-before-close', 'helix-before-open', 'helix-select', 'toggle'],
-    'helix-video': ['ended', 'helix-next', 'helix-previous', 'pause', 'play'],
-    'helix-video-playlist': ['helix-activate', 'helix-before-activate'],
+    'helix-tree-item': [
+        'helix-before-close',
+        'helix-before-open',
+        'helix-load',
+        'helix-select',
+        'toggle',
+    ],
+    'helix-video': [
+        'abort',
+        'canplay',
+        'canplaythrough',
+        'durationchange',
+        'emptied',
+        'ended',
+        'error',
+        'helix-next',
+        'helix-previous',
+        'loadeddata',
+        'loadedmetadata',
+        'loadstart',
+        'pause',
+        'play',
+        'playing',
+        'progress',
+        'ratechange',
+        'resize',
+        'seeked',
+        'seeking',
+        'stalled',
+        'suspend',
+        'timeupdate',
+        'volumechange',
+        'waiting',
+    ],
+    'helix-video-playlist': ['helix-activate', 'helix-before-activate', 'helix-end'],
     'helix-video-playlist-item': ['helix-select'],
     'helix-video-playlist-menu': ['helix-select'],
+    'helix-virtual-list': ['helix-load-more', 'helix-range-change'],
 });

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

@@ -3,37 +3,37 @@ export const styles = createSheet(`:host {
 align-items: center;
 display: flex;
 flex-direction: column;
-gap: var(--helix-space-sm);
+gap: var(--empty-gap, var(--helix-space-sm));
 padding: var(--empty-padding, var(--helix-space-2xl));
 text-align: center;
 }
 
 slot[name="icon"]::slotted(*) {
 
---icon-size: var(--helix-size-icon-lg);
+--icon-size: var(--empty-icon-size, var(--helix-size-icon-lg));
 
-color: var(--helix-color-foreground-subtle);
+color: var(--empty-icon-color, var(--helix-color-foreground-subtle));
 }
 
 slot[name="heading"]::slotted(*) {
-color: var(--helix-color-foreground);
-font-size: var(--helix-text-lg);
+color: var(--empty-heading-color, var(--helix-color-foreground));
+font-size: var(--empty-heading-size, var(--helix-text-lg));
 font-weight: var(--helix-weight-semibold);
 letter-spacing: var(--helix-tracking-tight);
 margin: var(--helix-space-none);
 }
 
 slot:not([name]) {
-color: var(--helix-color-foreground-muted);
-font-size: var(--helix-text-sm);
+color: var(--empty-message-color, var(--helix-color-foreground-muted));
+font-size: var(--empty-message-size, var(--helix-text-sm));
 }
 
 slot:not([name])::slotted(*) {
 margin: var(--helix-space-none);
-max-inline-size: 46ch;
+max-inline-size: var(--empty-message-measure, 46ch);
 }
 slot[name="actions"]::slotted(*) {
-margin-block-start: var(--helix-space-sm);
+margin-block-start: var(--empty-actions-gap, var(--helix-space-sm));
 }
 
 @media print {

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

@@ -13,6 +13,15 @@ import type { CSSResultGroup } from 'lit';
  * @aliases Placeholder, NoResults, Blank
  * @documentation https://fusion.dev/helix/components/empty
  *
+ * @cssproperty --empty-actions-gap - Space added above the actions.
+ * @cssproperty --empty-gap - Space between the icon, the heading, the message and the actions.
+ * @cssproperty --empty-heading-color - Color of the heading.
+ * @cssproperty --empty-heading-size - Size of the heading.
+ * @cssproperty --empty-icon-color - Color of the icon.
+ * @cssproperty --empty-icon-size - Size of the icon.
+ * @cssproperty --empty-message-color - Color of the message.
+ * @cssproperty --empty-message-measure - Widest the message runs before it wraps.
+ * @cssproperty --empty-message-size - Size of the message.
  * @cssproperty --empty-padding - Space around the whole block.
  */
 export declare class HelixEmpty extends HelixHeadlessEmpty {

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

@@ -11,10 +11,12 @@ 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 as liveStyles } from '../../shared/live/live.css.js';
 import { styles } from './file-input-root.css.js';
 let HelixFileInput = class HelixFileInput extends HelixHeadlessFileInput {
     static { this.tier = 'helix-'; }
     static { this.styles = [
+        liveStyles,
         glyphStyles,
         fieldStyles,
         fieldFrameStyles,

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

@@ -13,10 +13,12 @@ import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.c
 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 liveStyles } from '../../shared/live/live.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 = [
+        liveStyles,
         glyphStyles,
         fieldStyles,
         fieldFrameStyles,