@fusion.dev/helix 0.0.0-dev

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

@@ -0,0 +1,54 @@
+import { HelixHeadlessProgress } from '@fusion.dev/helix-headless/progress';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Shows how far along a task is, when that is known.
+ *
+ * @description
+ * A track and the part of it that is done. The height comes from a token rather
+ * than from a size property, for the reason the rest of the library gives about
+ * controls: how heavy a bar is says something about the region it is in, and a
+ * `--progress-size` on that region says it once.
+ *
+ * The fill transitions, which is worth more here than it looks. Progress
+ * arrives in steps, often large ones, and a bar that jumps between them reads
+ * as a series of unrelated states where one that travels reads as a single
+ * thing advancing.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @groups charts
+ * @aliases Progress bar, Loading bar
+ * @documentation https://helix.fusion.dev/components/progress
+ *
+ * @cssproperty --progress-color - Fill of the part that is done.
+ * @cssproperty --progress-ring-size - Diameter of the ring appearance.
+ * @cssproperty --progress-ring-width - Thickness of its stroke.
+ */
+export declare class HelixProgress extends HelixHeadlessProgress {
+    /**
+     * How much ink the bar claims.
+     *
+     * `subtle` is the bar as a wash of its own color: still legible, no longer
+     * the loudest thing in the region. The case is a background task: something uploading while the reader is doing something else has to be visible and must not compete with what they are actually looking at.
+     *
+     * **One value and not the four, which is the judgment this axis asks for
+     * rather than a partial sweep.** `ghost` would leave a track with nothing in
+     * it, which is not a quiet reading but an absent one. `outlined` is the
+     * interesting refusal: `BarChart` makes it work by keeping the area and fading
+     * it toward the page, so an outlined column still encodes its value, and the
+     * reason it earns the value there is that a chart has other series for the
+     * outlined one to be a *different kind of fact from* (a forecast, a target,
+     * a budget). A progress bar is alone in its region and has nothing to differ from, so an outline there costs legibility and buys no distinction. `solid` is the resting state and is written by not
+     * writing it, per the rule that a reflected property takes no default.
+     * @cssproperty --progress-size - Thickness of the bar.
+     * @cssproperty --progress-track-color - Fill of the part that is not.
+     */
+    emphasis?: 'subtle';
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-progress': HelixProgress;
+    }
+}

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

@@ -0,0 +1,45 @@
+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 { HelixHeadlessProgress } from '@fusion.dev/helix-headless/progress';
+import { property } from 'lit/decorators.js';
+import { styles } from './progress-root.css.js';
+/**
+ * @summary Shows how far along a task is, when that is known.
+ *
+ * @description
+ * A track and the part of it that is done. The height comes from a token rather
+ * than from a size property, for the reason the rest of the library gives about
+ * controls: how heavy a bar is says something about the region it is in, and a
+ * `--progress-size` on that region says it once.
+ *
+ * The fill transitions, which is worth more here than it looks. Progress
+ * arrives in steps, often large ones, and a bar that jumps between them reads
+ * as a series of unrelated states where one that travels reads as a single
+ * thing advancing.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category feedback
+ * @groups charts
+ * @aliases Progress bar, Loading bar
+ * @documentation https://helix.fusion.dev/components/progress
+ *
+ * @cssproperty --progress-color - Fill of the part that is done.
+ * @cssproperty --progress-ring-size - Diameter of the ring appearance.
+ * @cssproperty --progress-ring-width - Thickness of its stroke.
+ */
+let HelixProgress = class HelixProgress extends HelixHeadlessProgress {
+    static { this.styles = styles; }
+};
+__decorate([
+    property({ reflect: true })
+], HelixProgress.prototype, "emphasis", void 0);
+HelixProgress = __decorate([
+    customElement('helix-progress')
+], HelixProgress);
+export { HelixProgress };

package/dist/qr-code/index.d.ts

@@ -0,0 +1 @@
+export { HelixQrCode } from './root/qr-code-root.js';

package/dist/qr-code/index.js

@@ -0,0 +1 @@
+export { HelixQrCode } from './root/qr-code-root.js';

package/dist/qr-code/root/qr-code-root.css.d.ts

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

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

@@ -0,0 +1,58 @@
+// Generated from src/qr-code/root/qr-code-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+--_qr-size: var(--qr-code-size, 12rem);
+
+background-color: var(--qr-code-background-color, var(--helix-color-foreground-media));
+block-size: var(--_qr-size);
+border-radius: var(--helix-radii-sm);
+color: var(--qr-code-color, var(--helix-color-surface-media));
+display: block;
+inline-size: var(--_qr-size);
+position: relative;
+}
+
+[part="code"] {
+block-size: 100%;
+display: block;
+inline-size: 100%;
+}
+
+[part="finders"] {
+fill: var(--qr-code-finder-color, currentColor);
+}
+
+[part="logo"] {
+align-items: center;
+background-color: var(--qr-code-background-color, var(--helix-color-surface-raised));
+border-radius: var(--helix-radii-sm);
+
+box-sizing: border-box;
+display: flex;
+inset-block-start: 50%;
+inset-inline-start: 50%;
+justify-content: center;
+max-block-size: var(--qr-code-logo-size, 27%);
+max-inline-size: var(--qr-code-logo-size, 27%);
+min-block-size: var(--qr-code-logo-size, 27%);
+min-inline-size: var(--qr-code-logo-size, 27%);
+padding: var(--qr-code-logo-padding, 6%);
+position: absolute;
+translate: -50% -50%;
+}
+
+[part="logo"] slot::slotted(*) {
+block-size: 100%;
+inline-size: 100%;
+object-fit: contain;
+}
+
+[part="logo"][hidden] {
+display: none;
+}
+
+@media print {
+:host {
+box-shadow: none;
+}
+}`);

package/dist/qr-code/root/qr-code-root.d.ts

@@ -0,0 +1,37 @@
+import { HelixHeadlessQrCode } from '@fusion.dev/helix-headless/qr-code';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Encodes a short piece of text as a scannable square.
+ *
+ * @description
+ * The picture is the headless tier's. What this adds is a size that can be set
+ * once, the colours a scanner needs, and the box that holds a center mark.
+ *
+ * **The ink is `currentColor` and the ground is a real fill.** A code has to be
+ * dark on light to read, and the pair that guarantees it is not the page's
+ * foreground and background: those invert together in dark mode, and a code
+ * drawn light-on-dark is refused by a good half of the scanners in the world.
+ * So the ground is stated and the ink is the foreground it is chosen for.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category media
+ * @documentation https://helix.fusion.dev/components/qr-code
+ *
+ * @cssproperty --qr-code-background-color - Behind them, including the quiet zone.
+ * @cssproperty --qr-code-color - The dark modules. Defaults to the page's ink.
+ * @cssproperty --qr-code-finder-color - The three corner squares. Defaults to
+ * the same ink as the modules.
+ * @cssproperty --qr-code-logo-padding - The quiet zone around that mark.
+ * @cssproperty --qr-code-logo-size - How much of the middle a mark may cover.
+ * Defaults to `27%`, which `H` correction carries: it can lose thirty percent.
+ * @cssproperty --qr-code-size - How wide the square is. Defaults to `12rem`.
+ */
+export declare class HelixQrCode extends HelixHeadlessQrCode {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-qr-code': HelixQrCode;
+    }
+}

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

@@ -0,0 +1,43 @@
+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 { HelixHeadlessQrCode } from '@fusion.dev/helix-headless/qr-code';
+import { styles } from './qr-code-root.css.js';
+/**
+ * @summary Encodes a short piece of text as a scannable square.
+ *
+ * @description
+ * The picture is the headless tier's. What this adds is a size that can be set
+ * once, the colours a scanner needs, and the box that holds a center mark.
+ *
+ * **The ink is `currentColor` and the ground is a real fill.** A code has to be
+ * dark on light to read, and the pair that guarantees it is not the page's
+ * foreground and background: those invert together in dark mode, and a code
+ * drawn light-on-dark is refused by a good half of the scanners in the world.
+ * So the ground is stated and the ink is the foreground it is chosen for.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category media
+ * @documentation https://helix.fusion.dev/components/qr-code
+ *
+ * @cssproperty --qr-code-background-color - Behind them, including the quiet zone.
+ * @cssproperty --qr-code-color - The dark modules. Defaults to the page's ink.
+ * @cssproperty --qr-code-finder-color - The three corner squares. Defaults to
+ * the same ink as the modules.
+ * @cssproperty --qr-code-logo-padding - The quiet zone around that mark.
+ * @cssproperty --qr-code-logo-size - How much of the middle a mark may cover.
+ * Defaults to `27%`, which `H` correction carries: it can lose thirty percent.
+ * @cssproperty --qr-code-size - How wide the square is. Defaults to `12rem`.
+ */
+let HelixQrCode = class HelixQrCode extends HelixHeadlessQrCode {
+    static { this.styles = styles; }
+};
+HelixQrCode = __decorate([
+    customElement('helix-qr-code')
+], HelixQrCode);
+export { HelixQrCode };

package/dist/quote/index.d.ts

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

package/dist/quote/index.js

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

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

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

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

@@ -0,0 +1,20 @@
+// Generated from src/quote/root/quote-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: inline;
+font: inherit;
+}
+
+[part="quote"] {
+
+color: var(--quote-color, var(--helix-color-foreground-muted));
+font: inherit;
+font-style: italic;
+}
+
+@media print {
+:host {
+background-color: transparent;
+box-shadow: none;
+}
+}`);

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

@@ -0,0 +1,25 @@
+import { HelixHeadlessQuote } from '@fusion.dev/helix-headless/quote';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A short quotation, set inline with the text around it.
+ *
+ * @description
+ * Takes the surrounding type rather than a size of its own, because a quotation
+ * inside a paragraph is that paragraph's text with marks around it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Q, InlineQuote
+ * @documentation https://helix.fusion.dev/components/quote
+ *
+ * @cssproperty --quote-color - Color of the quoted text.
+ */
+export declare class HelixQuote extends HelixHeadlessQuote {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-quote': HelixQuote;
+    }
+}

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

@@ -0,0 +1,31 @@
+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 { HelixHeadlessQuote } from '@fusion.dev/helix-headless/quote';
+import { styles } from './quote-root.css.js';
+/**
+ * @summary A short quotation, set inline with the text around it.
+ *
+ * @description
+ * Takes the surrounding type rather than a size of its own, because a quotation
+ * inside a paragraph is that paragraph's text with marks around it.
+ *
+ * @since 0.1.0
+ * @status stable
+ * @category typography
+ * @aliases Q, InlineQuote
+ * @documentation https://helix.fusion.dev/components/quote
+ *
+ * @cssproperty --quote-color - Color of the quoted text.
+ */
+let HelixQuote = class HelixQuote extends HelixHeadlessQuote {
+    static { this.styles = styles; }
+};
+HelixQuote = __decorate([
+    customElement('helix-quote')
+], HelixQuote);
+export { HelixQuote };

package/dist/radio/group/radio-group.css.d.ts

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

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

@@ -0,0 +1,23 @@
+// Generated from src/radio/group/radio-group.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"] {
+display: flex;
+flex-direction: column;
+gap: var(--radio-group-gap, var(--helix-space-xs));
+}
+
+:host([orientation="horizontal"]) [part="items"] {
+column-gap: var(--radio-group-gap, var(--helix-space-md));
+flex-direction: row;
+flex-wrap: wrap;
+}
+
+:host(:state(invalid)) [part="items"] {
+--radio-border-color: var(--helix-color-danger);
+}`);

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

@@ -0,0 +1,26 @@
+import { HelixHeadlessRadioGroup } from '@fusion.dev/helix-headless/radio';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary A set of choices where exactly one is the answer.
+ *
+ * @description
+ * The field's three parts, laid out the way every other field lays them out: a
+ * question over the set, and one line under it that is help until something is
+ * wrong. `orientation` lays out the choices and not the field, so a horizontal
+ * group keeps its question above the row rather than beside the first choice.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases RadioButtons, Choice group
+ * @documentation https://helix.fusion.dev/components/radio-group
+ *
+ * @cssproperty --radio-group-gap - Space between the choices.
+ */
+export declare class HelixRadioGroup extends HelixHeadlessRadioGroup {
+    static styles: CSSResultGroup;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'helix-radio-group': HelixRadioGroup;
+    }
+}

package/dist/radio/group/radio-group.js

@@ -0,0 +1,34 @@
+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 { HelixHeadlessRadioGroup } from '@fusion.dev/helix-headless/radio';
+import { styles as fieldStyles } from '../../shared/field/field.css.js';
+import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
+import { styles } from './radio-group.css.js';
+/**
+ * @summary A set of choices where exactly one is the answer.
+ *
+ * @description
+ * The field's three parts, laid out the way every other field lays them out: a
+ * question over the set, and one line under it that is help until something is
+ * wrong. `orientation` lays out the choices and not the field, so a horizontal
+ * group keeps its question above the row rather than beside the first choice.
+ *
+ * @since 0.1.0
+ * @status experimental
+ * @aliases RadioButtons, Choice group
+ * @documentation https://helix.fusion.dev/components/radio-group
+ *
+ * @cssproperty --radio-group-gap - Space between the choices.
+ */
+let HelixRadioGroup = class HelixRadioGroup extends HelixHeadlessRadioGroup {
+    static { this.styles = [fieldStyles, fieldStackedStyles, styles]; }
+};
+HelixRadioGroup = __decorate([
+    customElement('helix-radio-group')
+], HelixRadioGroup);
+export { HelixRadioGroup };

package/dist/radio/index.d.ts

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

package/dist/radio/index.js

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

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

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

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

@@ -0,0 +1,198 @@
+// Generated from src/radio/root/radio-root.css by `bun run styles`. Do not edit.
+import { createSheet } from '@fusion.dev/helix-core';
+export const styles = createSheet(`:host {
+display: block;
+
+--_radio-size: var(--radio-size, var(--helix-size-checkbox));
+}
+
+[part="item"] {
+all: unset;
+align-items: center;
+box-sizing: border-box;
+cursor: pointer;
+display: inline-flex;
+gap: var(--helix-space-xs);
+}
+
+:host([disabled]) [part="item"] {
+cursor: default;
+}
+
+:host([disabled]) {
+opacity: 0.5;
+}
+
+[part="box"] {
+
+background-color: var(--radio-background-color, var(--helix-color-background));
+block-size: var(--_radio-size);
+border: var(--helix-border-thin) solid var(--radio-border-color, var(--helix-color-border));
+
+border-radius: var(--helix-radii-full);
+display: grid;
+flex: 0 0 auto;
+inline-size: var(--_radio-size);
+place-items: center;
+transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not([disabled])) [part="item"]:hover [part="box"] {
+border-color: var(--radio-border-color, var(--helix-color-foreground-muted));
+}
+
+:host(:state(selected)) [part="box"] {
+border-color: var(--radio-border-color, var(--helix-color-foreground));
+}
+
+[part="mark"] {
+background-color: var(--radio-mark-color, var(--helix-color-foreground));
+block-size: calc(var(--_radio-size) * 0.4);
+border-radius: var(--helix-radii-full);
+inline-size: calc(var(--_radio-size) * 0.4);
+
+scale: 0;
+transition: scale var(--helix-duration-fast) var(--helix-easing-emphasized);
+}
+
+:host(:state(selected)) [part="mark"] {
+scale: 1;
+}
+
+[part="item"]:focus-visible [part="box"] {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+[part="label"] {
+color: var(--helix-color-foreground);
+font-family: var(--helix-font-sans);
+font-size: var(--helix-text-sm);
+font-weight: var(--helix-weight-medium);
+line-height: var(--helix-leading-tight);
+}
+
+@media (prefers-reduced-motion: reduce) {
+[part="mark"],
+[part="box"] {
+transition: none;
+}
+}
+
+:host([variant="card"]) {
+display: block;
+}
+
+:host([variant="card"]) [part="item"] {
+align-items: start;
+background-color: var(--radio-card-background-color, var(--helix-color-surface));
+border: var(--helix-border-thin) solid var(--radio-card-border-color, var(--helix-color-border));
+border-radius: var(--helix-radii-sm);
+display: flex;
+gap: var(--helix-space-sm);
+inline-size: 100%;
+padding: var(--radio-card-padding, var(--helix-space-md));
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+border-color var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host(:not([disabled])[variant="card"]) [part="item"]:hover {
+border-color: var(--helix-color-foreground-muted);
+}
+
+:host([variant="card"]:state(selected)) [part="item"] {
+background-color: var(--helix-color-surface-raised);
+border-color: var(--helix-color-primary);
+box-shadow: 0 0 0 var(--helix-border-thick) var(--helix-color-primary);
+}
+
+:host([variant="card"]) [part="item"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([variant="card"]) [part="item"]:focus-visible [part="box"] {
+outline: none;
+}
+
+:host([variant="card"]) [part="box"] {
+margin-block-start: calc(
+(var(--helix-text-sm) * var(--helix-leading-tight) - var(--_radio-size)) /
+2
+);
+}
+
+:host([variant="card"][hide-control]) [part="box"] {
+display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([variant="card"]) [part="item"] {
+transition: none;
+}
+}
+
+:host([variant="chip"]) [part="box"] {
+display: none;
+}
+
+:host([variant="chip"]) [part="item"] {
+align-items: center;
+background-color: var(--helix-color-surface-sunken);
+block-size: var(--radio-chip-size, var(--helix-size-control));
+border-radius: var(--helix-radii-full);
+color: var(--helix-color-foreground-muted);
+cursor: pointer;
+display: inline-flex;
+inline-size: var(--radio-chip-size, var(--helix-size-control));
+justify-content: center;
+padding: 0;
+transition:
+background-color var(--helix-duration-fast) var(--helix-easing-standard),
+box-shadow var(--helix-duration-fast) var(--helix-easing-standard),
+translate var(--helix-duration-fast) var(--helix-easing-standard);
+}
+
+:host([variant="chip"]:state(selected)) [part="item"] {
+background-color: var(--helix-color-surface-inverse);
+box-shadow: var(--helix-shadow-md);
+color: var(--helix-color-foreground-inverse);
+translate: 0 -2px;
+}
+
+:host(:not([disabled])[variant="chip"]) [part="item"]:hover {
+translate: 0 -1px;
+}
+
+:host([variant="chip"]) [part="item"]:focus-visible {
+outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);
+outline-offset: var(--helix-size-focus-offset);
+}
+
+:host([variant="chip"]) [part="label"] {
+clip-path: inset(50%);
+block-size: 1px;
+inline-size: 1px;
+overflow: hidden;
+position: absolute;
+white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+:host([variant="chip"]) [part="item"] {
+transition: none;
+}
+
+:host([variant="chip"]:state(selected)) [part="item"],
+:host(:not([disabled])[variant="chip"]) [part="item"]:hover {
+translate: none;
+}
+}
+
+@media print {
+:host {
+box-shadow: none;
+print-color-adjust: exact;
+}
+}`);