@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,106 @@
+import { HelixHeadlessLineChart } from '@fusion.dev/helix-headless/line-chart';
+import type { CSSResultGroup } from 'lit';
+import '../../tooltip/index.js';
+/**
+ * @summary A series over time as a line, read from a table.
+ *
+ * @description
+ * The lines take the series palette in order, so a chart of one is series one
+ * and a chart of four is the first four, and a legend beside it maps the same
+ * twenty-four.
+ *
+ * The stroke does not scale with the box. `preserveAspectRatio="none"` is what
+ * lets one drawing fill a narrow card and a wide panel, and without
+ * `vector-effect: non-scaling-stroke` the same line comes out hairline in the
+ * first and heavy in the second. It rescues strokes and not geometry, which is
+ * why the readings are joined by lines and marked by nothing: a circle in a
+ * stretched coordinate space is an ellipse, and there is no vector-effect that
+ * answers for a shape.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Time Series, Trend Chart, Multi-line Chart
+ * @documentation https://helix.fusion.dev/components/line-chart
+ *
+ * @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.
+ */
+export declare class HelixLineChart extends HelixHeadlessLineChart {
+    /**
+     * **The styled tier, so the tooltip this renders is the styled one.**
+     *
+     * `tag()` builds a child's tag name from this prefix, and the base declares
+     * `helix-headless-`. Every other styled component that renders a child
+     * overrides it; the three charts that draw a tooltip did not, so a
+     * `helix-bar-chart` on a page put a `helix-headless-tooltip` in its shadow
+     * root: the behavior with none of the surface. What showed was the browser's
+     * own popover defaults, a white 1.5px border, square corners, `0.25em` of
+     * padding and the page's font size, which is why the reading bubble looked
+     * like no other tooltip on the site.
+     *
+     * Measured before the fix: the chart's bubble computed
+     * `border: 1.5px solid rgb(255, 255, 255)`, `border-radius: 0px`,
+     * `padding: 3.5px`, `font-size: 14px`. The masthead's, a `helix-tooltip`,
+     * had the component's own `none`, `radii-sm`, `2xs xs` and `text-xs`.
+     */
+    static tier: string;
+    /**
+     * How much ink the lines claim.
+     *
+     * `subtle` mixes each series toward the page, so a chart that is context stays
+     * legible without competing. Toward the page rather than translucent, because a
+     * translucent line takes its color from whatever it crosses, which on a chart
+     * with several is the whole risk.
+     *
+     * `outlined` thins the wash and leaves the line at full weight, so the boundary
+     * carries the reading, which is the trade `BarChart` makes on a column. `solid`
+     * takes the wash to full strength and the fill carries it instead.
+     *
+     * **This refused `outlined` until 25 Aug 2026, and `area` was the reason
+     * given**: on a column `outlined` is the edge without the loud fill, the line
+     * chart's version of that is the line without its wash, and `area` already says
+     * exactly that. `area` is unchanged and still says it. What the argument
+     * conflated is existence with weight: `area` decides whether a wash is drawn,
+     * which is structural and belongs to the tier below, and emphasis decides which
+     * of the two marks is carrying the reading. Both ends need a wash present and
+     * neither can summon one.
+     *
+     * `ghost` would be a chart with no lines.
+     */
+    emphasis?: 'outlined' | 'solid' | 'subtle';
+    /**
+     * What the lines are made of.
+     *
+     * `glass` lets the gridlines read through them, which is what translucency is
+     * for on a chart rather than decoration.
+     *
+     * On the lines and not the wash: the wash is already scaled by
+     * `--helix-material-opacity` whatever this says, being a wash by nature, and
+     * scaling it twice would compound the policy against itself.
+     *
+     * **This paints a mark rather than a ground, and the axis still reads the
+     * same way.** On a surface the points are how much of the page shows through;
+     * on a series they are how much ink the mark has, and the order is the same:
+     * `glass` admits most, `frosted` admits less, absent is opaque. The two
+     * factors, 0.62 and 0.88, carry the relationship the surface tokens carry
+     * between `material-translucent` and `material-translucent-strong`, so a
+     * chart and a card mean the same thing by the word.
+     *
+     * **`transparent` is where this one stops.** A mark with no ink is not a
+     * material choice, it is an absent series, and a chart says that by not
+     * having the datum rather than by painting it invisibly. See 270.
+     */
+    material?: 'frosted' | 'glass';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-line-chart': HelixLineChart;
+    }
+}

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

@@ -0,0 +1,74 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessLineChart } from '@fusion.dev/helix-headless/line-chart';
+import { property } from 'lit/decorators.js';
+import { styles as seriesStyles } from '../../shared/chart/series.css.js';
+import { styles as terminusStyles } from '../../shared/chart/terminus.css.js';
+import { styles } from './line-chart-root.css.js';
+import '../../tooltip/index.js';
+/**
+ * @summary A series over time as a line, read from a table.
+ *
+ * @description
+ * The lines take the series palette in order, so a chart of one is series one
+ * and a chart of four is the first four, and a legend beside it maps the same
+ * twenty-four.
+ *
+ * The stroke does not scale with the box. `preserveAspectRatio="none"` is what
+ * lets one drawing fill a narrow card and a wide panel, and without
+ * `vector-effect: non-scaling-stroke` the same line comes out hairline in the
+ * first and heavy in the second. It rescues strokes and not geometry, which is
+ * why the readings are joined by lines and marked by nothing: a circle in a
+ * stretched coordinate space is an ellipse, and there is no vector-effect that
+ * answers for a shape.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @category charts
+ * @groups charts
+ * @aliases Time Series, Trend Chart, Multi-line Chart
+ * @documentation https://helix.fusion.dev/components/line-chart
+ *
+ * @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.
+ */
+let HelixLineChart = class HelixLineChart extends HelixHeadlessLineChart {
+    /**
+     * **The styled tier, so the tooltip this renders is the styled one.**
+     *
+     * `tag()` builds a child's tag name from this prefix, and the base declares
+     * `helix-headless-`. Every other styled component that renders a child
+     * overrides it; the three charts that draw a tooltip did not, so a
+     * `helix-bar-chart` on a page put a `helix-headless-tooltip` in its shadow
+     * root: the behavior with none of the surface. What showed was the browser's
+     * own popover defaults, a white 1.5px border, square corners, `0.25em` of
+     * padding and the page's font size, which is why the reading bubble looked
+     * like no other tooltip on the site.
+     *
+     * Measured before the fix: the chart's bubble computed
+     * `border: 1.5px solid rgb(255, 255, 255)`, `border-radius: 0px`,
+     * `padding: 3.5px`, `font-size: 14px`. The masthead's, a `helix-tooltip`,
+     * had the component's own `none`, `radii-sm`, `2xs xs` and `text-xs`.
+     */
+    static { this.tier = 'helix-'; }
+    static { this.styles = [seriesStyles, terminusStyles, styles]; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixLineChart.prototype, "emphasis", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixLineChart.prototype, "material", void 0);
+HelixLineChart = __decorate([
+    customElement('helix-line-chart')
+], HelixLineChart);
+export { HelixLineChart };

package/dist/list/index.d.ts

@@ -0,0 +1,2 @@
+export * from './item/list-item.js';
+export * from './root/list-root.js';

package/dist/list/index.js

@@ -0,0 +1,2 @@
+export * from './item/list-item.js';
+export * from './root/list-root.js';

package/dist/list/item/list-item.css.d.ts

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

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

@@ -0,0 +1,70 @@
+// Generated from src/list/item/list-item.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+}
+
+[part="row"] {
+align-items: center;
+display: grid;
+
+grid-template-columns: auto auto 1fr auto;
+padding: var(--list-item-padding, var(--helix-space-sm) var(--helix-space-md));
+}
+
+[part="rail"] {
+align-self: start;
+color: var(--helix-color-foreground-muted);
+display: var(--list-item-rail-display, none);
+font-family: var(--helix-font-mono);
+font-size: var(--helix-text-xs);
+grid-column: 1;
+grid-row: 1;
+letter-spacing: var(--helix-tracking-wide);
+line-height: calc(var(--helix-text-sm) * var(--helix-leading-normal));
+inline-size: var(--list-rail-inline-size, var(--helix-space-3xl));
+}
+
+[part="rail"]::before {
+content: var(--list-item-rail-content, "");
+}
+
+slot[name="start"]::slotted(*) {
+color: var(--helix-color-foreground-muted);
+grid-column: 2;
+margin-inline-end: var(--helix-space-sm);
+grid-row: 1 / span 2;
+}
+
+slot:not([name]) {
+color: var(--helix-color-foreground);
+display: block;
+font-size: var(--helix-text-sm);
+
+font-weight: var(--list-item-term-weight, var(--helix-weight-regular));
+grid-column: 3;
+grid-row: 1;
+}
+
+slot[name="supporting"] {
+color: var(--helix-color-foreground-muted);
+display: block;
+font-size: var(--helix-text-xs);
+grid-column: 3;
+grid-row: 2;
+}
+
+slot:not([name])::slotted(*),
+slot[name="supporting"]::slotted(*) {
+margin: var(--helix-space-none);
+}
+
+slot[name="end"]::slotted(*) {
+grid-column: 4;
+grid-row: 1 / span 2;
+}
+
+a[part="row"] {
+color: inherit;
+text-decoration: none;
+}`);

package/dist/list/item/list-item.d.ts

@@ -0,0 +1,49 @@
+import { HelixHeadlessListItem } from '@fusion.dev/helix-headless/list';
+import { type CSSResultGroup, type TemplateResult } from 'lit';
+/**
+ * @summary One row of a list.
+ *
+ * @description
+ * A grid rather than a flex row, so the supporting text lines up under the
+ * label rather than under the leading icon. The leading and trailing regions
+ * hold their own width and the middle takes the rest.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Row, Entry
+ * @documentation https://helix.fusion.dev/components/list
+ *
+ * @csspart rail - The cell a railed list draws its number in.
+ *
+ * @cssproperty --list-item-padding - Padding inside the row.
+ * @cssproperty --list-item-rail-content - What the rail cell shows. Written by the list.
+ * @cssproperty --list-item-rail-display - Whether there is a rail at all. Written by the list.
+ * @cssproperty --list-item-term-weight - Weight of a description list's term.
+ */
+export declare class HelixListItem extends HelixHeadlessListItem {
+    static styles: CSSResultGroup;
+    /**
+     * The rail cell, which this tier can afford because it has a sheet.
+     *
+     * An element rather than `[part="row"]::before`, which could hold the same
+     * counter. Generated content can only ever be a string, and this cell is the
+     * one place a row's ordinal lives, so a consumer replacing it with a state
+     * mark or a step glyph wants somewhere to put it. It is also a name: a part is
+     * in `custom-elements.json` and a pseudo-element on another part is not, and a
+     * hook nobody can find is a hook nobody uses.
+     *
+     * Always rendered, because a row cannot know whether its list asked for a
+     * rail, and drawn `display: none` until the list says so. *Absent* and not
+     * *empty*: an empty box is free to layout and is not free to the native
+     * marker, which aligns to the first line box it can see. Measured against the
+     * same tree without it, every row and label sat on the identical pixel and 178
+     * pixels of the markers on a plain ordered list moved, which is a retaken
+     * baseline for a feature that list is not using.
+     */
+    protected renderRail(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-list-item': HelixListItem;
+    }
+}

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

@@ -0,0 +1,58 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessListItem } from '@fusion.dev/helix-headless/list';
+import { html } from 'lit';
+import { styles } from './list-item.css.js';
+/**
+ * @summary One row of a list.
+ *
+ * @description
+ * A grid rather than a flex row, so the supporting text lines up under the
+ * label rather than under the leading icon. The leading and trailing regions
+ * hold their own width and the middle takes the rest.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @aliases Row, Entry
+ * @documentation https://helix.fusion.dev/components/list
+ *
+ * @csspart rail - The cell a railed list draws its number in.
+ *
+ * @cssproperty --list-item-padding - Padding inside the row.
+ * @cssproperty --list-item-rail-content - What the rail cell shows. Written by the list.
+ * @cssproperty --list-item-rail-display - Whether there is a rail at all. Written by the list.
+ * @cssproperty --list-item-term-weight - Weight of a description list's term.
+ */
+let HelixListItem = class HelixListItem extends HelixHeadlessListItem {
+    static { this.styles = styles; }
+    /**
+     * The rail cell, which this tier can afford because it has a sheet.
+     *
+     * An element rather than `[part="row"]::before`, which could hold the same
+     * counter. Generated content can only ever be a string, and this cell is the
+     * one place a row's ordinal lives, so a consumer replacing it with a state
+     * mark or a step glyph wants somewhere to put it. It is also a name: a part is
+     * in `custom-elements.json` and a pseudo-element on another part is not, and a
+     * hook nobody can find is a hook nobody uses.
+     *
+     * Always rendered, because a row cannot know whether its list asked for a
+     * rail, and drawn `display: none` until the list says so. *Absent* and not
+     * *empty*: an empty box is free to layout and is not free to the native
+     * marker, which aligns to the first line box it can see. Measured against the
+     * same tree without it, every row and label sat on the identical pixel and 178
+     * pixels of the markers on a plain ordered list moved, which is a retaken
+     * baseline for a feature that list is not using.
+     */
+    renderRail() {
+        return html `<span part="rail"></span>`;
+    }
+};
+HelixListItem = __decorate([
+    customElement('helix-list-item')
+], HelixListItem);
+export { HelixListItem };

package/dist/list/root/list-root.css.d.ts

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

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

@@ -0,0 +1,76 @@
+// Generated from src/list/root/list-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+gap: var(--list-gap, var(--helix-space-none));
+}
+
+:host([divided]) ::slotted(*:not(:first-child)) {
+border-block-start: var(--helix-border-thin) solid var(--helix-color-border);
+}
+
+:host([kind="ordered"]),
+:host([kind="unordered"]) {
+
+padding-inline-start: var(--list-marker-gutter, var(--helix-space-md));
+}
+
+:host([kind="ordered"]) ::slotted(*),
+:host([kind="unordered"]) ::slotted(*) {
+display: list-item;
+list-style-position: outside;
+}
+
+:host([kind="ordered"]) ::slotted(*) {
+list-style-type: decimal;
+}
+
+:host([kind="ordered"][type="a"]) ::slotted(*) {
+list-style-type: lower-alpha;
+}
+
+:host([kind="ordered"][type="A"]) ::slotted(*) {
+list-style-type: upper-alpha;
+}
+
+:host([kind="ordered"][type="i"]) ::slotted(*) {
+list-style-type: lower-roman;
+}
+
+:host([kind="ordered"][type="I"]) ::slotted(*) {
+list-style-type: upper-roman;
+}
+
+:host([kind="unordered"]) ::slotted(*) {
+list-style-type: disc;
+}
+
+:host([marker="rail"]) {
+counter-reset: list-rail;
+
+padding-inline-start: var(--helix-space-none);
+}
+
+:host([marker="rail"]) ::slotted(*) {
+--list-item-rail-content: counter(list-rail, var(--list-rail-style, decimal-leading-zero));
+
+--list-item-rail-display: block;
+counter-increment: list-rail;
+}
+
+:host([kind="ordered"][marker="rail"]) ::slotted(*),
+:host([kind="unordered"][marker="rail"]) ::slotted(*) {
+display: block;
+list-style: none;
+}
+
+:host([kind="description"]) ::slotted(*) {
+--list-item-term-weight: var(--helix-weight-semibold);
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,54 @@
+import { HelixHeadlessList } from '@fusion.dev/helix-headless/list';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A set of rows, read as a set.
+ *
+ * @description
+ * Rules between rows rather than around each one, so a list reads as one object
+ * with divisions instead of as a stack of cards. `divided` is off by default,
+ * because space alone separates rows perfectly well and a rule at every seam is
+ * decoration doing what emptiness already does.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category data
+ * @aliases Rows, Stack, Menu
+ * @documentation https://helix.fusion.dev/components/list
+ *
+ * @cssproperty --list-gap - Space between rows.
+ * @cssproperty --list-marker-gutter - Room the ordered and unordered markers hang into.
+ * @cssproperty --list-rail-inline-size - The width of the rail's track.
+ * @cssproperty --list-rail-style - What a rail counts with. Any `list-style-type`.
+ */
+export declare class HelixList extends HelixHeadlessList {
+    /**
+     * Whether a rule sits between rows.
+     */
+    divided: boolean;
+    /**
+     * Where the marker sits.
+     *
+     * On the styled tier because it is decoration, which is the other half of the
+     * argument `kind` makes on the headless one: *that* a list is numbered is a
+     * fact about the content, and *where the numbers are drawn* is not. A railed
+     * ordered list and a plain one say the same thing about their rows.
+     *
+     * - unset draws the platform's marker beside the row, which is what a list of
+     *   short rows wants.
+     * - `rail` draws the ordinal in a track of its own at the start edge of the
+     *   block, so the numbers read as a column and every row's text begins at one
+     *   measure. This is how a numbered argument is set: a claim per item, prose
+     *   under it, and the numbering carried down the left rather than tucked
+     *   against the words.
+     *
+     * A rail replaces the marker rather than joining it, so it applies to
+     * `unordered` too, where it numbers what a bullet did not.
+     */
+    marker?: 'rail';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-list': HelixList;
+    }
+}

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

@@ -0,0 +1,50 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    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 } from '@fusion.dev/helix-core';
+import { HelixHeadlessList } from '@fusion.dev/helix-headless/list';
+import { property } from 'lit/decorators.js';
+import { styles } from './list-root.css.js';
+/**
+ * @summary A set of rows, read as a set.
+ *
+ * @description
+ * Rules between rows rather than around each one, so a list reads as one object
+ * with divisions instead of as a stack of cards. `divided` is off by default,
+ * because space alone separates rows perfectly well and a rule at every seam is
+ * decoration doing what emptiness already does.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category data
+ * @aliases Rows, Stack, Menu
+ * @documentation https://helix.fusion.dev/components/list
+ *
+ * @cssproperty --list-gap - Space between rows.
+ * @cssproperty --list-marker-gutter - Room the ordered and unordered markers hang into.
+ * @cssproperty --list-rail-inline-size - The width of the rail's track.
+ * @cssproperty --list-rail-style - What a rail counts with. Any `list-style-type`.
+ */
+let HelixList = class HelixList extends HelixHeadlessList {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether a rule sits between rows.
+         */
+        this.divided = false;
+    }
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HelixList.prototype, "divided", void 0);
+__decorate([
+    property({ reflect: true })
+], HelixList.prototype, "marker", void 0);
+HelixList = __decorate([
+    customElement('helix-list')
+], HelixList);
+export { HelixList };

package/dist/listbox/index.d.ts

@@ -0,0 +1 @@
+export * from './root/listbox-root.js';

package/dist/listbox/index.js

@@ -0,0 +1 @@
+export * from './root/listbox-root.js';

package/dist/listbox/root/listbox-root.css.d.ts

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

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

@@ -0,0 +1,110 @@
+// Generated from src/listbox/root/listbox-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-2xs);
+}
+
+[part="items"] {
+
+--option-radius: var(--helix-radii-none);
+
+background-color: var(--helix-color-surface);
+border: var(--helix-border-thin) solid var(--helix-color-border);
+border-radius: var(--helix-radii-sm);
+display: flex;
+flex-direction: column;
+gap: var(--helix-space-none);
+max-block-size: var(--listbox-max-block-size, 14rem);
+overflow-y: auto;
+
+padding-block: var(--helix-space-2xs);
+padding-inline: var(--helix-space-none);
+}
+
+[part="items"]:focus-visible {
+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="items"],
+:host(:state(invalid)) [part="items"]:focus-visible {
+border-color: var(--helix-color-danger);
+outline-color: var(--helix-color-danger);
+}
+
+:host(:disabled) {
+opacity: 0.5;
+}
+
+:host(:disabled) [part="items"] {
+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;
+}
+
+[part="filter-icon"] {
+align-items: center;
+color: var(--helix-color-foreground-subtle);
+display: inline-flex;
+flex: 0 0 auto;
+}
+
+[part="filter-icon"] svg,
+slot[name="filter-icon"]::slotted(*) {
+--icon-size: var(--helix-size-icon-tight);
+
+block-size: var(--helix-size-icon-tight);
+inline-size: var(--helix-size-icon-tight);
+}
+
+[part="search"] {
+align-items: center;
+border-block-end: var(--helix-border-thin) solid var(--helix-color-border);
+display: flex;
+gap: var(--helix-space-2xs);
+padding: var(--helix-space-2xs);
+padding-inline-start: var(--helix-space-xs);
+}
+
+[part="search-field"] {
+appearance: none;
+flex: 1 1 auto;
+min-inline-size: 0;
+background-color: transparent;
+block-size: var(--helix-size-control-tight);
+border: none;
+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%;
+padding-inline: var(--helix-space-xs);
+}
+
+[part="search-field"]:focus-visible {
+outline: none;
+}
+
+:host([loading]) [part="items"] {
+opacity: 0.5;
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);