@fusion.dev/helix 0.142.1 → 0.144.0

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

@@ -14,13 +14,17 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/tag
  *
  * @slot - The tag's label.
+ * @slot dismiss-icon - Replaces the glyph on the remove button.
  *
  * @event {HelixDismissEvent} helix-dismiss - The remove button was pressed. The tag does not remove itself, so remove it in response. Cancelable.
  *
+ * @csspart cell - The grid cell in a `Tag.Group`, which takes focus and draws the ring round the whole tag.
  * @csspart dismiss - The remove button, when `dismissible`.
+ * @csspart link - The link around the label, under `href`.
  *
  * @cssproperty --tag-background-color - The fill behind the tag.
  * @cssproperty --tag-border-color - The color of the tag's edge.
+ * @cssproperty --tag-disabled-opacity - How strongly a `disabled` tag is drawn.
  * @cssproperty --tag-foreground-color - The label color.
  * @cssproperty --tag-radius - The corner radius of the tag.
  */
@@ -47,9 +51,8 @@ export declare class HelixTag extends HelixHeadlessTag {
      * already calls them. `helix component`'s `axes` holds the vocabulary.
      *
      * **Not all seven are statuses, and `accent` is the one worth saying out
-     * loud**: it is the second emphasis, a rotation off the brand seed rather than
-     * a color of its own, so it stays in relation when somebody rethemes.
-     * `primary` is the seed itself. The four that are statuses are the four
+     * loud**: it is the second emphasis, the second color a theme names, and the
+     * brand itself until one is named. `primary` is the brand. The four that are statuses are the four
      * `HelixStatusTone` names, and those are the ones that would carry a glyph
      * somewhere that draws one.
      *

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

@@ -49,7 +49,8 @@ letter-spacing: var(--helix-tracking-normal);
 line-height: var(--helix-leading-heading);
 }
 
-:host([variant="body"]) {
+:host([variant="body"]),
+:host(:not([variant])[as="p"]) {
 font-family: var(--helix-font-sans);
 font-size: var(--helix-text-md);
 font-weight: var(--helix-weight-regular);
@@ -111,6 +112,62 @@ line-height: var(--helix-leading-normal);
 color: var(--_heading-ink, currentColor);
 }
 
+:host([emphasis="muted"]) {
+color: var(--helix-color-foreground-muted);
+}
+
+:host([emphasis="subtle"]) {
+color: var(--helix-color-foreground-subtle);
+}
+
+:host([tone="accent"]) {
+color: var(--helix-color-accent);
+}
+
+:host([tone="danger"]) {
+color: var(--helix-color-danger);
+}
+
+:host([tone="info"]) {
+color: var(--helix-color-info);
+}
+
+:host([tone="primary"]) {
+color: var(--helix-color-primary);
+}
+
+:host([tone="success"]) {
+color: var(--helix-color-success);
+}
+
+:host([tone="warning"]) {
+color: var(--helix-color-warning);
+}
+
+:host([tone="accent"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-accent-muted);
+}
+
+:host([tone="danger"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-danger-muted);
+}
+
+:host([tone="info"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-info-muted);
+}
+
+:host([tone="primary"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-primary-muted);
+}
+
+:host([tone="success"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-success-muted);
+}
+
+:host([tone="warning"]:is([emphasis="muted"], [emphasis="subtle"])) {
+color: var(--helix-color-warning-muted);
+}
+
 [part="text"] {
 color: inherit;
 font: inherit;

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

@@ -1,5 +1,5 @@
 import { HelixElement } from '@fusion.dev/helix-core';
-import type { CSSResultGroup } from 'lit';
+import type { CSSResultGroup, PropertyValues } from 'lit';
 /**
  * @summary Text, with its HTML element and its type style set separately.
  *
@@ -40,6 +40,11 @@ export declare class HelixText extends HelixElement {
      * The HTML element to render.
      *
      * Decides the outline and the semantics.
+     *
+     * **`label` gives the label ramp and labels no control.** The element is in
+     * this one's shadow root, which neither `for` nor a wrapped control can
+     * reach, so a page that writes either is warned. Name a Helix field with its
+     * own `label`, and a native control with `<label data-text="label">`.
      */
     as?: 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'strong' | 'em' | 'code' | 'label';
     /**
@@ -74,9 +79,13 @@ export declare class HelixText extends HelixElement {
     /**
      * The type style, which sets the size, weight, leading, and tracking.
      *
-     * Defaults to the one that matches `as`.
+     * Defaults to the one that matches `as`: `body` for `p`, `body-strong` for
+     * `strong`, `h5` and `h6`. A `span` or an `em` keeps the type around it.
      */
     variant?: 'display' | 'heading' | 'subheading' | 'title' | 'body' | 'body-strong' | 'caption' | 'label' | 'code';
+    protected updated(changed: PropertyValues): void;
+    /** Whether the page wrote this as the label of a control, which it cannot be. */
+    private labelsNothing;
     protected render(): unknown;
     static styles: CSSResultGroup;
 }

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { customElement, HelixElement } from '@fusion.dev/helix-core';
+import { customElement, HelixElement, reportRuntime } from '@fusion.dev/helix-core';
 import { property } from 'lit/decorators.js';
 import { literal, html as staticHtml } from 'lit/static-html.js';
 import { styles } from './text-root.css.js';
@@ -23,6 +23,24 @@ const TAGS = {
     strong: literal `strong`,
 };
 let HelixText = class HelixText extends HelixElement {
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('as') && this.as === 'label' && this.labelsNothing()) {
+            reportRuntime({
+                kind: 'unreachable-label',
+                message: '<helix-text as="label"> names no control: its label is in a shadow root, which ' +
+                    '`for` and a wrapped control cannot reach. Give a Helix field its own `label`, or ' +
+                    'write `<label data-text="label">` for a native control.',
+                tag: this.localName,
+            });
+        }
+    }
+    labelsNothing() {
+        const fields = [...this.querySelectorAll('*')].some((element) => element.constructor.formAssociated === true);
+        return (fields ||
+            this.hasAttribute('for') ||
+            this.querySelector('input, select, textarea, button, meter, output, progress') !== null);
+    }
     render() {
         const tag = (this.as && Object.hasOwn(TAGS, this.as) ? TAGS[this.as] : undefined) ?? literal `span`;
         return staticHtml `<${tag} part="text"><slot></slot></${tag}>`;

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

@@ -1,10 +1,11 @@
 import { createSheet } from '@fusion.dev/helix-core';
 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);
+border: var(--helix-border-thin) solid var(--textarea-border-color, var(--helix-color-border));
+border-radius: var(--textarea-radius, var(--helix-radii-sm));
 display: flex;
-padding: var(--helix-space-xs);
+gap: var(--helix-space-2xs);
+padding: var(--textarea-padding, var(--helix-space-xs));
 transition:
 border-color var(--helix-duration-fast) var(--helix-easing-standard),
 background-color var(--helix-duration-fast) var(--helix-easing-standard);
@@ -14,7 +15,14 @@ background-color var(--helix-duration-fast) var(--helix-easing-standard);
 line-height: var(--helix-leading-normal);
 overflow-wrap: break-word;
 
-resize: vertical;
+resize: var(--textarea-resize, vertical);
+}
+
+slot[name="start"]::slotted(*),
+slot[name="end"]::slotted(*) {
+align-self: flex-start;
+color: var(--helix-color-foreground-subtle);
+flex: 0 0 auto;
 }
 
 :host([auto-grow]) [part="control"] {

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

@@ -15,6 +15,10 @@ import type { CSSResultGroup } from 'lit';
  * @documentation https://fusion.dev/helix/components/textarea
  *
  * @cssproperty --textarea-background-color - Fill behind the text.
+ * @cssproperty --textarea-border-color - Edge of the field at rest. Hover, focus and an error still draw their own.
+ * @cssproperty --textarea-padding - Space between the edge of the field and the text.
+ * @cssproperty --textarea-radius - Corner radius of the field.
+ * @cssproperty --textarea-resize - Which way a reader can drag the field: `vertical` by default, `none`, `both` or `horizontal`. A field under `auto-grow` has nothing to drag.
  */
 export declare class HelixTextarea extends HelixHeadlessTextarea {
     static styles: CSSResultGroup;

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

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

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessTimeInput } from '@fusion.dev/helix-headless/time-input';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 import '../../tag/index.js';
 import '../../time-picker/index.js';
 /**
@@ -26,6 +25,14 @@ import '../../time-picker/index.js';
  * @cssproperty --time-input-border-width - Width of the panel's edge. Defaults to
  *   `--helix-border-floating`, which is `0`, so the panel stands out by its shadow unless
  *   your theme sets a width.
+ * @cssproperty --time-input-segment-focus-background-color - The fill behind the
+ *   segment with focus, in `segmented`. It follows `--helix-color-primary`.
+ * @cssproperty --time-input-segment-focus-color - The text of the segment with
+ *   focus, in `segmented`.
+ * @cssproperty --time-input-segment-literal-color - The text the locale writes
+ *   between two segments, in `segmented`.
+ * @cssproperty --time-input-segment-placeholder-color - The dashes of a segment
+ *   with nothing in it, in `segmented`. It matches the text field's placeholder.
  * @cssproperty --time-input-shadow - Shadow under the panel. Defaults to
  *   `--helix-shadow-floating`, because the panel can sit over any content.
  */

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

@@ -6,11 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessTimeInput } from '@fusion.dev/helix-headless/time-input';
-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 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';
@@ -22,6 +22,7 @@ let HelixTimeInput = class HelixTimeInput extends HelixHeadlessTimeInput {
         fieldStyles,
         fieldFrameStyles,
         fieldStackedStyles,
+        fieldSegmentsStyles,
         tagRowStyles,
         floatingPanelStyles,
         floatingEntranceStyles,

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

@@ -150,6 +150,22 @@ outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
 outline-offset: var(--helix-size-focus-offset);
 }
 
+[part="item"],
+[part="item"] > * {
+touch-action: pan-y;
+}
+
+[part="content"] > slot {
+display: block;
+touch-action: pan-y;
+}
+
+[part="item"][data-swiping] {
+transition: none;
+translate: var(--toast-swipe-x, 0) 0;
+user-select: none;
+}
+
 [part="timer"] {
 animation: helix-toast-drain var(--toast-duration, 0ms) linear forwards;
 background-color: var(--_toast-severity, var(--helix-color-foreground-muted));

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

@@ -1,24 +1,42 @@
 import { createSheet } from '@fusion.dev/helix-core';
 export const styles = createSheet(`:host {
 --_toast-inset: var(--toast-inset, var(--helix-space-lg));
-
-inset-inline: var(--_toast-inset);
-pointer-events: none;
-position: fixed;
-
-z-index: var(--helix-layer-toast);
+display: contents;
 }
 
 :host(:not([placement])) {
 --_toast-enter: var(--helix-space-lg);
-inset-block-end: var(--_toast-inset);
 }
 
 [part="region"] {
 
 --_toast-gap: var(--toast-gap, var(--helix-space-xs));
+background: none;
+block-size: auto;
+border: none;
+color: inherit;
 display: flex;
 flex-direction: column;
+inline-size: auto;
+inset: auto;
+inset-inline: var(--_toast-inset);
+margin: var(--helix-space-none);
+max-block-size: none;
+max-inline-size: none;
+overflow: visible;
+padding: var(--helix-space-none);
+pointer-events: none;
+position: fixed;
+
+z-index: var(--helix-layer-toast);
+}
+
+:host(:not([placement])) [part="region"] {
+inset-block-end: var(--_toast-inset);
+}
+
+[part="region"]:not(:popover-open) {
+display: none;
 }
 
 ::slotted(*) {
@@ -27,11 +45,17 @@ pointer-events: auto;
 
 :host([placement^="bottom"]) {
 --_toast-enter: var(--helix-space-lg);
+}
+
+:host([placement^="bottom"]) [part="region"] {
 inset-block-end: var(--_toast-inset);
 }
 
 :host([placement^="top"]) {
 --_toast-enter: calc(var(--helix-space-lg) * -1);
+}
+
+:host([placement^="top"]) [part="region"] {
 inset-block-start: var(--_toast-inset);
 }
 

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

@@ -4,16 +4,13 @@ import type { CSSResultGroup } from 'lit';
  * @summary The region that holds toast messages, and the only element that announces them.
  *
  * @description
- * Fixed to the window. The region spans a whole edge, so it ignores the pointer
- * and only the messages receive clicks. Content beside a message stays
- * clickable.
+ * Fixed to the window, in the top layer. The region spans a whole edge, so it
+ * ignores the pointer and only the messages receive clicks. Content beside a
+ * message stays clickable.
  *
- * **Place the region at the root of your application.** `position: fixed`
- * positions against the viewport only while no ancestor has `transform`,
- * `filter`, `perspective`, or `contain`. Any of these makes that ancestor the
- * containing block, and an ancestor with `overflow: hidden` still clips the
- * region. The other floating surfaces in Helix use the top layer for the same
- * reason.
+ * Because the stack is in the top layer, an ancestor with `transform`,
+ * `filter`, `contain`, or `overflow: hidden` does not move or clip it, and a
+ * message that arrives while a modal dialog is open shows above the dialog.
  *
  * @since 0.1.0
  * @status stable

package/dist/toggle/group/toggle-group.css.js

@@ -111,4 +111,20 @@ gap: var(--helix-space-sm);
 
 [part="row"] [part="track"] {
 flex: 1 1 auto;
+}
+
+:host([selection-mode="multiple"]) ::slotted(helix-toggle:state(pressed)) {
+background-color: var(--toggle-group-indicator-color, var(--_indicator-surface));
+border-radius: var(--_toggle-radius, var(--helix-radii-sm));
+box-shadow: var(--helix-shadow-sm);
+}
+
+:host([orientation="vertical"]) [part="track"] {
+align-items: stretch;
+flex-direction: column;
+flex-wrap: nowrap;
+}
+
+:host([orientation="vertical"]) ::slotted(helix-toggle) {
+flex: 0 0 auto;
 }`);

package/dist/toggle/group/toggle-group.d.ts

@@ -19,6 +19,9 @@ import type { CSSResultGroup } from 'lit';
  *
  * @slot - The group's items.
  * @slot end - Content after the track, on the same line, such as a count or a reset.
+ * @slot feedback - The message that says what is wrong, for content richer than a string. It shows while there is a message.
+ * @slot hint - Help under the control, for content richer than the `hint` text.
+ * @slot label - The label, for content richer than the `label` text.
  * @slot start - Content before the track, on the same line, such as an icon or a caption.
  *
  * @csspart indicator - The moving marker behind the selected item.

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

@@ -17,6 +17,14 @@ inline-size var(--helix-duration-normal) var(--helix-easing-standard);
 z-index: var(--helix-layer-overlay);
 }
 
+[part="backdrop"] {
+background-color: var(--tour-scrim-color, var(--helix-color-overlay));
+inset: 0;
+pointer-events: none;
+position: fixed;
+z-index: var(--helix-layer-overlay);
+}
+
 @media print {
 :host {
 display: none;

package/dist/tour/stop/tour-stop.css.js

@@ -22,10 +22,43 @@ padding: var(--tour-padding, var(--helix-space-md));
 position: fixed;
 }
 
+[part="bubble"]:focus,
+[part="bubble"]:focus-visible {
+outline: none;
+}
+
 :host [part="bubble"][hidden] {
 display: none;
 }
 
+:host([type="dialog"]) [part="bubble"] {
+margin: auto;
+}
+
+:host([type="floating"]) [part="bubble"] {
+inset: auto;
+inset-block-end: var(--helix-space-lg);
+inset-inline-end: var(--helix-space-lg);
+}
+
+::slotted([slot="heading"]) {
+font-size: var(--helix-text-md);
+font-weight: var(--helix-weight-semibold);
+margin: var(--helix-space-none);
+}
+
+::slotted([slot="description"]) {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-sm);
+margin: var(--helix-space-none);
+}
+
+[part="progress"] {
+color: var(--helix-color-foreground-muted);
+font-size: var(--helix-text-sm);
+font-variant-numeric: tabular-nums;
+}
+
 [part="content"] {
 display: flex;
 flex-direction: column;
@@ -70,4 +103,8 @@ border-left: var(--helix-border-thin) solid var(--helix-color-border);
 [part="bubble"][data-placement^="left"] [part~="arrow"] {
 border-right: var(--helix-border-thin) solid var(--helix-color-border);
 border-top: var(--helix-border-thin) solid var(--helix-color-border);
+}
+
+:host([type]) [part~="arrow"] {
+display: none;
 }`);

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

@@ -4,13 +4,13 @@ align-items: center;
 display: inline-flex;
 font-size: var(--helix-text-sm);
 font-weight: var(--helix-weight-medium);
-gap: var(--helix-space-2xs);
+gap: var(--trend-gap, var(--helix-space-2xs));
 line-height: var(--helix-leading-tight);
 }
 
 :host {
 
---_trend-color: var(--helix-color-foreground-muted);
+--_trend-color: var(--trend-neutral-color, var(--helix-color-foreground-muted));
 color: var(--trend-color, var(--_trend-color));
 }
 
@@ -18,14 +18,21 @@ color: var(--trend-color, var(--_trend-color));
 --icon-size: var(--trend-icon-size, 1em);
 }
 
+slot[name="icon"]::slotted(*) {
+--icon-size: var(--trend-icon-size, 1em);
+
+block-size: var(--trend-icon-size, 1em);
+inline-size: var(--trend-icon-size, 1em);
+}
+
 :host([direction="up"][good="up"]),
 :host([direction="down"][good="down"]) {
---_trend-color: var(--helix-color-success);
+--_trend-color: var(--trend-better-color, var(--helix-color-success));
 }
 
 :host([direction="up"][good="down"]),
 :host([direction="down"][good="up"]) {
---_trend-color: var(--helix-color-danger);
+--_trend-color: var(--trend-worse-color, var(--helix-color-danger));
 }
 
 [part="direction"] {
@@ -38,7 +45,7 @@ white-space: nowrap;
 }
 
 slot[name="label"] {
-color: var(--helix-color-foreground-muted);
+color: var(--trend-label-color, var(--helix-color-foreground-muted));
 font-weight: var(--helix-weight-regular);
 }
 

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessTrend } from '@fusion.dev/helix-headless/trend';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 /**
  * @summary An indicator that shows which way a measurement moved, and whether the change is good.
  *
@@ -25,8 +24,13 @@ import '../../icon/index.js';
  * @aliases Delta, Change, Movement
  * @documentation https://fusion.dev/helix/components/trend
  *
+ * @cssproperty --trend-better-color - Color of a move that `good` says is an improvement.
  * @cssproperty --trend-color - Color of the arrow. Setting it overrides the color that `good` sets.
- * @cssproperty --trend-icon-size - Size of the arrow.
+ * @cssproperty --trend-gap - Space between the arrow, the metric and the label.
+ * @cssproperty --trend-icon-size - Size of the arrow, or of a glyph in the `icon` slot.
+ * @cssproperty --trend-label-color - Color of the label.
+ * @cssproperty --trend-neutral-color - Color of a trend that `good` does not judge, or one that did not move.
+ * @cssproperty --trend-worse-color - Color of a move that `good` says is a setback.
  */
 export declare class HelixTrend extends HelixHeadlessTrend {
     static styles: CSSResultGroup;

package/dist/trend/root/trend-root.js

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

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

@@ -1,6 +1,5 @@
 import { HelixHeadlessVideo } from '@fusion.dev/helix-headless/video';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 import '../../menu/index.js';
 /**
  * @summary A video player with controls drawn by Helix.

package/dist/video/root/video-root.js

@@ -7,7 +7,6 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideo } from '@fusion.dev/helix-headless/video';
 import { property } from 'lit/decorators.js';
-import '../../icon/index.js';
 import '../../menu/index.js';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles as liveStyles } from '../../shared/live/live.css.js';

package/dist/video-playlist/menu/video-playlist-menu.d.ts

@@ -1,6 +1,5 @@
 import { HelixHeadlessVideoPlaylistMenu } from '@fusion.dev/helix-headless/video-playlist';
 import type { CSSResultGroup } from 'lit';
-import '../../icon/index.js';
 import '../../menu/index.js';
 /**
  * @summary The playlist's entries, as a menu inside the player's control bar.

package/dist/video-playlist/menu/video-playlist-menu.js

@@ -8,7 +8,6 @@ import { customElement } from '@fusion.dev/helix-core';
 import { HelixHeadlessVideoPlaylistMenu } from '@fusion.dev/helix-headless/video-playlist';
 import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
 import { styles } from './video-playlist-menu.css.js';
-import '../../icon/index.js';
 import '../../menu/index.js';
 let HelixVideoPlaylistMenu = class HelixVideoPlaylistMenu extends HelixHeadlessVideoPlaylistMenu {
     static { this.tier = 'helix-'; }