@fusion.dev/helix 0.219.0 → 0.220.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/api.json +1 -1
- package/custom-elements.json +1 -1
- package/dist/code-editor/root/code-editor-root.css.js +1 -1
- package/dist/code-editor/root/code-editor-root.d.ts +1 -0
- package/dist/code-editor/root/code-editor-root.js +1 -0
- package/dist/element-events.generated.js +3 -1
- package/dist/find/index.d.ts +1 -0
- package/dist/find/index.js +1 -0
- package/dist/find/root/find-root.css.d.ts +1 -0
- package/dist/find/root/find-root.css.js +2 -0
- package/dist/find/root/find-root.d.ts +38 -0
- package/dist/find/root/find-root.js +17 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/log/group/log-group.css.js +1 -1
- package/dist/terminal/root/terminal-root.css.js +1 -1
- package/dist/terminal/root/terminal-root.d.ts +1 -0
- package/dist/terminal/root/terminal-root.js +1 -0
- package/dist/tree/item/tree-item.css.js +1 -1
- package/examples.json +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/skills/helix/SKILL.md +2 -2
- package/types/jsx.d.ts +796 -64
- package/types/svelte.d.ts +1 -0
- package/types/vue.d.ts +156 -0
- package/types/words.d.ts +87 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: flex;flex-direction: column}:host([fill]) {inset: 0;position: absolute}[part="field"] {background-color: var(--code-editor-background-color, var(--helix-color-background));block-size: var(--code-editor-block-size, 24rem);border: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));border-radius: var(--code-editor-radius, var(--helix-radii-lg));box-sizing: border-box;display: flex;flex-direction: column;overflow: hidden}:host([fill]) [part="field"] {block-size: 100%}:host([separation="plain"]) [part="field"] {border: none;border-radius: 0}[part="header"], [part="
|
|
2
|
+
export const styles = createSheet(`:host {display: flex;flex-direction: column}:host([fill]) {inset: 0;position: absolute}[part="field"] {background-color: var(--code-editor-background-color, var(--helix-color-background));block-size: var(--code-editor-block-size, 24rem);border: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));border-radius: var(--code-editor-radius, var(--helix-radii-lg));box-sizing: border-box;display: flex;flex-direction: column;overflow: hidden}:host([fill]) [part="field"] {block-size: 100%}:host([separation="plain"]) [part="field"] {border: none;border-radius: 0}[part="header"], [part="status"] {--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);align-items: center;background-color: var(--code-editor-header-background-color, var(--helix-color-surface-raised));box-sizing: border-box;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs) var(--helix-space-xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="header"] {border-block-end: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));min-block-size: calc(var(--helix-size-control) + var(--helix-space-2xs) * 2)}[part="label"] {display: block;flex: 0 1 auto;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="language"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs)}[part="controls"] {flex: 0 0 auto;margin-inline-start: auto}:host(:state(find-open)) [part="find-toggle"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="find"] {--find-background-color: var(--code-editor-header-background-color, var(--helix-color-surface-raised));--find-border-color: var(--code-editor-border-color, var(--helix-color-border));--find-field-background-color: var(--code-editor-background-color, var(--helix-color-background));flex: 0 0 auto}[part="body"] {color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;font-family: var(--helix-font-mono);font-size: var(--code-editor-font-size, var(--helix-text-sm));font-variant-ligatures: none;min-block-size: 0}[part="control"] {all: unset;box-sizing: border-box;caret-color: var(--helix-color-foreground);flex: 1 1 auto;font: inherit;line-height: var(--helix-leading-normal);min-inline-size: 0;overflow: auto;padding: var(--helix-space-xs) var(--helix-space-sm);tab-size: 2;white-space: pre}:host([wrap]) [part="control"] {white-space: pre-wrap}[part="view"] {flex: 1 1 auto;min-block-size: 0;min-inline-size: 0}[part="control"][hidden], [part="view"][hidden] {display: none}[part="diagnostics"] {border-block-start: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));flex: 0 0 auto;list-style: none;margin: var(--helix-space-none);max-block-size: calc(5 * (var(--helix-text-xs) * var(--helix-leading-normal) + var(--helix-space-2xs) * 2));overflow: auto;padding: var(--helix-space-none)}[part~="diagnostic"] {--icon-size: var(--helix-size-icon-tight);all: unset;align-items: center;box-sizing: border-box;color: var(--helix-color-foreground);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);inline-size: 100%;line-height: var(--helix-leading-normal);padding: var(--helix-space-2xs) var(--helix-space-sm)}[part~="diagnostic"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 6%, transparent)}[part~="diagnostic"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="diagnostic-icon"] {display: inline-flex;flex: 0 0 auto}[part~="diagnostic-danger"] [part="diagnostic-icon"] {color: var(--helix-color-danger)}[part~="diagnostic-warning"] [part="diagnostic-icon"] {color: var(--helix-color-warning)}[part~="diagnostic-info"] [part="diagnostic-icon"] {color: var(--helix-color-info)}[part="status"] {border-block-start: var(--helix-border-thin) solid var(--code-editor-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;gap: var(--helix-space-md);justify-content: space-between;padding-inline: var(--helix-space-sm)}:host(:disabled) [part="field"] {cursor: not-allowed;opacity: 0.5}@media print {[part="controls"], [part="find"], [part="status"] {display: none}}`);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { HelixHeadlessCodeEditor } from '@fusion.dev/helix-headless/code-editor';
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
import '../../button/index.js';
|
|
4
|
+
import '../../find/index.js';
|
|
4
5
|
import '../../icon-button/index.js';
|
|
5
6
|
import '../../toolbar/index.js';
|
|
6
7
|
/**
|
|
@@ -6,6 +6,7 @@ import { styles as fieldStyles } from '../../shared/field/field.css.js';
|
|
|
6
6
|
import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
|
|
7
7
|
import { styles } from './code-editor-root.css.js';
|
|
8
8
|
import '../../button/index.js';
|
|
9
|
+
import '../../find/index.js';
|
|
9
10
|
import '../../icon-button/index.js';
|
|
10
11
|
import '../../toolbar/index.js';
|
|
11
12
|
let HelixCodeEditor = class HelixCodeEditor extends HelixHeadlessCodeEditor {
|
|
@@ -49,7 +49,7 @@ registerElementEvents({
|
|
|
49
49
|
'helix-copy-error',
|
|
50
50
|
'helix-toggle',
|
|
51
51
|
],
|
|
52
|
-
'helix-code-editor': ['change', 'helix-before-change', 'input'],
|
|
52
|
+
'helix-code-editor': ['change', 'helix-before-change', 'helix-found', 'input'],
|
|
53
53
|
'helix-code-input': [
|
|
54
54
|
'change',
|
|
55
55
|
'helix-before-change',
|
|
@@ -150,6 +150,7 @@ registerElementEvents({
|
|
|
150
150
|
'toggle',
|
|
151
151
|
],
|
|
152
152
|
'helix-filter-menu': ['helix-facet'],
|
|
153
|
+
'helix-find': ['helix-before-close', 'helix-before-open', 'helix-found', 'toggle'],
|
|
153
154
|
'helix-graph': [
|
|
154
155
|
'helix-activate',
|
|
155
156
|
'helix-before-activate',
|
|
@@ -374,6 +375,7 @@ registerElementEvents({
|
|
|
374
375
|
'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
|
|
375
376
|
'helix-terminal': [
|
|
376
377
|
'helix-copy',
|
|
378
|
+
'helix-found',
|
|
377
379
|
'helix-terminal-bell',
|
|
378
380
|
'helix-terminal-input',
|
|
379
381
|
'helix-terminal-link',
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './root/find-root.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './root/find-root.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const styles: import("lit").CSSResult;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
+
export const styles = createSheet(`:host {container-type: inline-size;display: block}[part="bar"], [part="controls"] {--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: calc(var(--helix-size-control-sm) * 0.8);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8)}[part="bar"] {align-items: center;background-color: var(--find-background-color, var(--helix-color-surface-raised));border-block-end: var(--helix-border-thin) solid var(--find-border-color, var(--helix-color-border));box-sizing: border-box;display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs) var(--helix-space-xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="bar"][hidden] {display: none}[part="field"], [part="replace-field"] {appearance: none;background-color: var(--find-field-background-color, var(--helix-color-background));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--find-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 10rem;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));max-inline-size: 20rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="field"]:focus-visible, [part="replace-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="field"][aria-invalid="true"] {border-color: var(--helix-color-danger)}[part="field"]::-webkit-search-cancel-button, [part="field"]::-webkit-search-decoration {appearance: none}[part="field"]::placeholder, [part="replace-field"]::placeholder {color: var(--helix-color-foreground-muted)}[part="count"] {color: var(--helix-color-foreground-muted);flex: 1 0 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;min-inline-size: 7em;white-space: nowrap}[part="actions"] {display: contents}[part="controls"], [part="replace-toggle"] {flex: 0 0 auto}[part="controls"] {margin-inline-start: auto}[part~="match-case-pressed"], [part~="whole-word-pressed"], [part~="regex-pressed"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}:host(:state(replace-open)) [part="bar"]::after {content: "";flex-basis: 100%;order: 1}[part="replace-field"], [part="replace"], [part="replace-all"] {order: 2}:host(:state(replace-open)) [part="replace-field"] {margin-inline-start: calc(var(--helix-size-control) + var(--helix-space-xs))}@container (inline-size < 30rem) {:host(:state(replace-open)) [part="replace-field"] {flex-basis: calc(100% - var(--helix-size-control) - var(--helix-space-xs))}[part="replace"] {margin-inline-start: auto}}@media print {:host {display: none}}`);
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { HelixHeadlessFind } from '@fusion.dev/helix-headless/find';
|
|
2
|
+
import type { CSSResultGroup } from 'lit';
|
|
3
|
+
import '../../button/index.js';
|
|
4
|
+
import '../../icon-button/index.js';
|
|
5
|
+
import '../../toolbar/index.js';
|
|
6
|
+
/**
|
|
7
|
+
* @summary A bar that finds words in content and moves among the matches.
|
|
8
|
+
*
|
|
9
|
+
* @description
|
|
10
|
+
* Drawn as the find bars of Terminal and Code Editor are: a dense strip on the
|
|
11
|
+
* raised surface, with a line under it where it meets the content. Place it
|
|
12
|
+
* above the content it searches, such as at the top of a pane, or make it
|
|
13
|
+
* sticky with `position: sticky` on the element.
|
|
14
|
+
*
|
|
15
|
+
* Every match is painted with `::highlight(helix-find-match)` and the current
|
|
16
|
+
* one with `::highlight(helix-find-current)`, both in the base layer. Text is
|
|
17
|
+
* painted from the tree it lives in, so content in a shadow root of your own
|
|
18
|
+
* needs the two rules in that root's styles.
|
|
19
|
+
*
|
|
20
|
+
* @since 0.220.0
|
|
21
|
+
* @status experimental
|
|
22
|
+
* @category navigation
|
|
23
|
+
* @aliases Find in page, Search bar, Find and replace, Search in content
|
|
24
|
+
* @documentation https://fusion.dev/helix/components/find
|
|
25
|
+
*
|
|
26
|
+
* @cssproperty --find-background-color - The bar's fill. Defaults to the raised surface.
|
|
27
|
+
* @cssproperty --find-border-color - The line under the bar and the fields' edges.
|
|
28
|
+
* @cssproperty --find-field-background-color - The fields' fill. Defaults to the page's background.
|
|
29
|
+
*/
|
|
30
|
+
export declare class HelixFind extends HelixHeadlessFind {
|
|
31
|
+
static tier: string;
|
|
32
|
+
static styles: CSSResultGroup;
|
|
33
|
+
}
|
|
34
|
+
declare global {
|
|
35
|
+
interface HTMLElementTagNameMap {
|
|
36
|
+
'helix-find': HelixFind;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from '@fusion.dev/helix-core';
|
|
3
|
+
import { HelixHeadlessFind } from '@fusion.dev/helix-headless/find';
|
|
4
|
+
import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
|
|
5
|
+
import { styles as liveStyles } from '../../shared/live/live.css.js';
|
|
6
|
+
import { styles } from './find-root.css.js';
|
|
7
|
+
import '../../button/index.js';
|
|
8
|
+
import '../../icon-button/index.js';
|
|
9
|
+
import '../../toolbar/index.js';
|
|
10
|
+
let HelixFind = class HelixFind extends HelixHeadlessFind {
|
|
11
|
+
static { this.tier = 'helix-'; }
|
|
12
|
+
static { this.styles = [liveStyles, glyphStyles, styles]; }
|
|
13
|
+
};
|
|
14
|
+
HelixFind = __decorate([
|
|
15
|
+
customElement('helix-find')
|
|
16
|
+
], HelixFind);
|
|
17
|
+
export { HelixFind };
|
package/dist/index.d.ts
CHANGED
|
@@ -47,6 +47,7 @@ export * from './empty/index.js';
|
|
|
47
47
|
export * from './file-input/index.js';
|
|
48
48
|
export * from './filter-input/index.js';
|
|
49
49
|
export * from './filter-input/menu/index.js';
|
|
50
|
+
export * from './find/index.js';
|
|
50
51
|
export * from './flex/index.js';
|
|
51
52
|
export * from './format-date/index.js';
|
|
52
53
|
export * from './graph/index.js';
|
package/dist/index.js
CHANGED
|
@@ -42,6 +42,7 @@ export * from './empty/index.js';
|
|
|
42
42
|
export * from './file-input/index.js';
|
|
43
43
|
export * from './filter-input/index.js';
|
|
44
44
|
export * from './filter-input/menu/index.js';
|
|
45
|
+
export * from './find/index.js';
|
|
45
46
|
export * from './flex/index.js';
|
|
46
47
|
export * from './format-date/index.js';
|
|
47
48
|
export * from './graph/index.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {display: block}[part="summary"] {all: unset;box-sizing: border-box;align-items: center;border-radius: var(--_log-row-radius, var(--helix-radii-none));color: var(--_log-row-color, var(--helix-color-foreground));column-gap: var(--helix-space-xs);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-weight: var(--_log-heading-weight, var(--helix-weight-medium));inline-size: calc(100% + var(--_log-row-inset, 0px) * 2);margin-inline: calc(var(--_log-row-inset, 0px) * -1);padding-block: var(--helix-space-2xs);padding-inline: var(--_log-row-inset, var(--log-padding-inline, var(--helix-space-md)));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="summary"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);color: var(--helix-color-foreground)}[part="summary"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark"] {block-size: var(--_log-caret-size, var(--helix-size-icon-sm));color: var(--helix-color-foreground-subtle);flex: none;font-family: var(--log-font-family, var(--helix-font-mono));inline-size: var(--_log-caret-size, var(--helix-size-icon-sm));margin-inline-end: var(--_log-caret-end, calc(var(--helix-space-md) - var(--helix-space-xs)));margin-inline-start: var(--_log-caret-start, calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) - var(--helix-size-icon-sm)));order: var(--_log-caret-order, 0);rotate: -90deg;transition: color var(--helix-duration-fast) var(--helix-easing-standard), rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="mark"] {rotate: 90deg}:host(:state(open)) [part="mark"] {rotate: none}[part="summary"]:hover [part="mark"] {color: var(--helix-color-foreground-muted)}[part="status"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-muted);flex: none;inline-size: var(--helix-size-icon-sm)}:host([status="done"]) [part="status"] {color: var(--helix-color-success)}:host([status="failed"]) [part="status"] {color: var(--helix-color-danger)}:host([status="running"]) [part="status"] {color: var(--helix-color-info)}[part="heading"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}[part="duration"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-regular);margin-inline-start: var(--_log-duration-start, auto)}
|
|
2
|
+
export const styles = createSheet(`:host {display: block}[part="summary"] {all: unset;box-sizing: border-box;align-items: center;border-radius: var(--_log-row-radius, var(--helix-radii-none));color: var(--_log-row-color, var(--helix-color-foreground));column-gap: var(--helix-space-xs);cursor: pointer;display: flex;font-family: var(--helix-font-sans);font-weight: var(--_log-heading-weight, var(--helix-weight-medium));inline-size: calc(100% + var(--_log-row-inset, 0px) * 2);margin-inline: calc(var(--_log-row-inset, 0px) * -1);padding-block: var(--helix-space-2xs);padding-inline: var(--_log-row-inset, var(--log-padding-inline, var(--helix-space-md)));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard), color var(--helix-duration-fast) var(--helix-easing-standard);white-space: nowrap}[part="summary"]:hover {background-color: color-mix(in oklab, var(--helix-color-foreground) 5%, transparent);color: var(--helix-color-foreground)}[part="summary"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}[part="mark"] {block-size: var(--_log-caret-size, var(--helix-size-icon-sm));color: var(--helix-color-foreground-subtle);flex: none;font-family: var(--log-font-family, var(--helix-font-mono));inline-size: var(--_log-caret-size, var(--helix-size-icon-sm));margin-inline-end: var(--_log-caret-end, calc(var(--helix-space-md) - var(--helix-space-xs)));margin-inline-start: var(--_log-caret-start, calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) - var(--helix-size-icon-sm)));order: var(--_log-caret-order, 0);rotate: -90deg;transition: color var(--helix-duration-fast) var(--helix-easing-standard), rotate var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="mark"] {rotate: 90deg}:host(:state(open)) [part="mark"] {rotate: none}[part="summary"]:hover [part="mark"] {color: var(--helix-color-foreground-muted)}[part="status"] {block-size: var(--helix-size-icon-sm);color: var(--helix-color-foreground-muted);flex: none;inline-size: var(--helix-size-icon-sm)}:host([status="done"]) [part="status"] {color: var(--helix-color-success)}:host([status="failed"]) [part="status"] {color: var(--helix-color-danger)}:host([status="running"]) [part="status"] {color: var(--helix-color-info)}[part="heading"] {min-inline-size: 0;overflow: hidden;text-overflow: ellipsis}[part="duration"] {color: var(--helix-color-foreground-muted);flex: none;font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-regular);margin-inline-start: var(--_log-duration-start, auto)}:host(:state(empty)) [part="mark"] {visibility: hidden}:host(:state(empty)) [part="content"] {display: none}::slotted(helix-log-group) {margin-inline-start: var(--_log-nest-indent, calc(max(var(--helix-size-icon-sm), calc(var(--log-digits, 2) * 1ch)) + var(--helix-space-md)))}:host(:state(steps)) [part="content"] {--_log-line-inset: var(--_log-nest-indent);border-inline-start: var(--_log-step-rule, none);margin-inline-start: var(--_log-step-rule-start, var(--helix-space-none))}:host(:not(:state(steps))) [part="content"] {--_log-line-inset: var(--_log-step-line-inset);background-color: var(--_log-step-surface, transparent);border-radius: var(--_log-step-radius, var(--helix-radii-none));margin-block: var(--_log-step-margin-block, var(--helix-space-none));margin-inline-start: var(--_log-step-start, var(--helix-space-none));max-block-size: var(--_log-step-max-block-size, none);overflow: var(--_log-step-overflow, visible);overscroll-behavior: contain;padding-block: var(--_log-step-padding-block, var(--helix-space-none));scrollbar-color: var(--log-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color)) var(--log-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin}@supports (animation-timeline: scroll()) {:host(:not(:state(steps))) [part="content"] {animation-fill-mode: both;animation-name: var(--_log-step-fade, none);animation-timeline: scroll(self block);animation-timing-function: linear}}@media (prefers-reduced-motion: reduce) {:host(:not(:state(steps))) [part="content"] {animation: none}}@keyframes log-step-fade {0% {mask-image: linear-gradient(to bottom, #000 calc(100% - var(--helix-space-lg)), transparent)}1%, 99% {mask-image: linear-gradient(to bottom, transparent, #000 var(--helix-space-lg), #000 calc(100% - var(--helix-space-lg)), transparent)}100% {mask-image: linear-gradient(to bottom, transparent, #000 var(--helix-space-lg))}}@media print {:host {print-color-adjust: economy}[part="content"] {max-block-size: none;overflow: visible}}:host [part="content"][hidden] {animation: none;background-color: transparent;border: none;margin: 0;max-block-size: none;padding: 0}`);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--terminal-active-match-background-color: color-mix(in oklab, var(--helix-color-warning) 45%, var(--terminal-background-color));--terminal-active-match-border-color: var(--helix-color-warning);--terminal-ansi-black: light-dark(var(--helix-color-foreground), var(--helix-color-border));--terminal-ansi-blue: var(--helix-color-info);--terminal-ansi-bright-black: var(--helix-color-foreground-muted);--terminal-ansi-bright-blue: color-mix(in oklab, var(--terminal-ansi-blue) 75%, var(--helix-color-foreground));--terminal-ansi-bright-cyan: color-mix(in oklab, var(--terminal-ansi-cyan) 75%, var(--helix-color-foreground));--terminal-ansi-bright-green: color-mix(in oklab, var(--terminal-ansi-green) 75%, var(--helix-color-foreground));--terminal-ansi-bright-magenta: color-mix(in oklab, var(--terminal-ansi-magenta) 75%, var(--helix-color-foreground));--terminal-ansi-bright-red: color-mix(in oklab, var(--terminal-ansi-red) 75%, var(--helix-color-foreground));--terminal-ansi-bright-white: light-dark(var(--helix-color-border), var(--helix-color-foreground));--terminal-ansi-bright-yellow: color-mix(in oklab, var(--terminal-ansi-yellow) 75%, var(--helix-color-foreground));--terminal-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--terminal-ansi-green: var(--helix-color-success);--terminal-ansi-magenta: var(--helix-color-syntax-callable);--terminal-ansi-red: var(--helix-color-danger);--terminal-ansi-white: light-dark(var(--helix-color-foreground-subtle), color-mix(in oklab, var(--helix-color-foreground-muted), var(--helix-color-foreground)));--terminal-ansi-yellow: var(--helix-color-warning);--terminal-background-color: var(--helix-color-background);--terminal-color: var(--helix-color-foreground);--terminal-cursor-color: var(--helix-color-primary);--terminal-match-background-color: color-mix(in oklab, var(--helix-color-warning) 22%, var(--terminal-background-color));--terminal-scrollbar-thumb-color: var(--helix-scrollbar-thumb-color);--terminal-selection-background-color: color-mix(in oklab, var(--helix-color-primary) 30%, transparent);display: block}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--terminal-background-color);block-size: var(--terminal-block-size, 24rem);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--terminal-radius, var(--helix-radii-lg));box-sizing: border-box;display: grid;grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;overflow: hidden;position: relative}:host([fill]) [part="region"], :host(:state(fullscreen)) [part="region"] {block-size: 100%}:host([separation="plain"]) [part="region"], :host(:state(fullscreen)) [part="region"] {border: none;border-radius: 0}:host(:fullscreen) {display: block}[part="header"], [part="
|
|
2
|
+
export const styles = createSheet(`:host {--terminal-active-match-background-color: color-mix(in oklab, var(--helix-color-warning) 45%, var(--terminal-background-color));--terminal-active-match-border-color: var(--helix-color-warning);--terminal-ansi-black: light-dark(var(--helix-color-foreground), var(--helix-color-border));--terminal-ansi-blue: var(--helix-color-info);--terminal-ansi-bright-black: var(--helix-color-foreground-muted);--terminal-ansi-bright-blue: color-mix(in oklab, var(--terminal-ansi-blue) 75%, var(--helix-color-foreground));--terminal-ansi-bright-cyan: color-mix(in oklab, var(--terminal-ansi-cyan) 75%, var(--helix-color-foreground));--terminal-ansi-bright-green: color-mix(in oklab, var(--terminal-ansi-green) 75%, var(--helix-color-foreground));--terminal-ansi-bright-magenta: color-mix(in oklab, var(--terminal-ansi-magenta) 75%, var(--helix-color-foreground));--terminal-ansi-bright-red: color-mix(in oklab, var(--terminal-ansi-red) 75%, var(--helix-color-foreground));--terminal-ansi-bright-white: light-dark(var(--helix-color-border), var(--helix-color-foreground));--terminal-ansi-bright-yellow: color-mix(in oklab, var(--terminal-ansi-yellow) 75%, var(--helix-color-foreground));--terminal-ansi-cyan: color-mix(in oklab, var(--helix-color-info), var(--helix-color-success));--terminal-ansi-green: var(--helix-color-success);--terminal-ansi-magenta: var(--helix-color-syntax-callable);--terminal-ansi-red: var(--helix-color-danger);--terminal-ansi-white: light-dark(var(--helix-color-foreground-subtle), color-mix(in oklab, var(--helix-color-foreground-muted), var(--helix-color-foreground)));--terminal-ansi-yellow: var(--helix-color-warning);--terminal-background-color: var(--helix-color-background);--terminal-color: var(--helix-color-foreground);--terminal-cursor-color: var(--helix-color-primary);--terminal-match-background-color: color-mix(in oklab, var(--helix-color-warning) 22%, var(--terminal-background-color));--terminal-scrollbar-thumb-color: var(--helix-scrollbar-thumb-color);--terminal-selection-background-color: color-mix(in oklab, var(--helix-color-primary) 30%, transparent);display: block}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--terminal-background-color);block-size: var(--terminal-block-size, 24rem);border: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));border-radius: var(--terminal-radius, var(--helix-radii-lg));box-sizing: border-box;display: grid;grid-template-rows: [header] auto [find] auto [viewport] minmax(0, 1fr) [status] auto;overflow: hidden;position: relative}:host([fill]) [part="region"], :host(:state(fullscreen)) [part="region"] {block-size: 100%}:host([separation="plain"]) [part="region"], :host(:state(fullscreen)) [part="region"] {border: none;border-radius: 0}:host(:fullscreen) {display: block}[part="header"], [part="status"] {--helix-size-checkbox: var(--helix-size-checkbox-sm);--helix-size-checkbox-loose: calc(var(--helix-size-checkbox) * 1.2);--helix-size-checkbox-tight: calc(var(--helix-size-checkbox) * 0.8);--helix-size-icon: var(--helix-size-icon-sm);--helix-size-icon-loose: calc(var(--helix-size-icon) * 1.2);--helix-size-icon-tight: calc(var(--helix-size-icon) * 0.8);--helix-size-control: var(--helix-size-control-sm);--helix-size-control-loose: calc(var(--helix-size-control) * 1.2);--helix-size-control-tight: calc(var(--helix-size-control) * 0.8);--helix-size-tag: var(--helix-size-tag-sm);align-items: center;background-color: var(--terminal-header-background-color, var(--helix-color-surface-raised));box-sizing: border-box;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-block: var(--helix-space-2xs);padding-inline: var(--helix-space-sm) var(--helix-space-2xs)}[part="header"] {grid-row: header;border-block-end: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));min-block-size: calc(var(--helix-size-control) + var(--helix-space-2xs) * 2)}[part="header"][hidden], [part="status"][hidden] {display: none}[part="label"] {color: var(--helix-color-foreground);display: block;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="actions"] {display: contents}[part="controls"] {flex: 0 0 auto}[part="exit-actions"] {align-items: center;display: flex;flex: 0 0 auto;gap: var(--helix-space-2xs)}:host(:state(find-open)) [part="find-toggle"], :host(:state(fullscreen)) [part="fullscreen"] {--icon-button-background-color: color-mix(in oklab, var(--helix-color-foreground) 12%, transparent);--icon-button-foreground-color: var(--helix-color-foreground)}[part="find"] {--find-background-color: var(--terminal-header-background-color, var(--helix-color-surface-raised));--find-border-color: var(--terminal-border-color, var(--helix-color-border));--find-field-background-color: var(--terminal-background-color);grid-row: find}[part="viewport"] {grid-row: viewport;color: var(--terminal-color);font-family: var(--terminal-font-family, var(--helix-font-mono));font-size: var(--terminal-font-size, var(--helix-text-sm));min-block-size: 0;overflow: auto;padding: var(--terminal-padding, var(--helix-space-xs) var(--helix-space-sm));position: relative}[part="viewport"] ::slotted(*) {block-size: 100%;inline-size: 100%}[part="viewport"]::after {background-color: var(--helix-color-foreground);content: "";inset: 0;opacity: 0;pointer-events: none;position: absolute;transition: opacity var(--helix-duration-fast) var(--helix-easing-standard)}:host(:state(bell)) [part="viewport"]::after {opacity: 0.08;transition: none}[part="status"] {grid-row: status;border-block-start: var(--helix-border-thin) solid var(--terminal-border-color, var(--helix-color-border));color: var(--helix-color-foreground-muted);flex-wrap: wrap;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);gap: var(--helix-space-xs) var(--helix-space-sm);padding-inline: var(--helix-space-sm)}[part="status"] > span {flex: 1 1 16rem;min-inline-size: 0}[part="restart"] {--button-border-color: var(--terminal-border-color, var(--helix-color-border))}@media (prefers-reduced-motion: reduce) {[part="viewport"]::after {transition: none}}@media print {[part="controls"], [part="find"], [part="restart"], [part="exit-actions"] {display: none}}`);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { HelixHeadlessTerminal } from '@fusion.dev/helix-headless/terminal';
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
import '../../button/index.js';
|
|
4
|
+
import '../../find/index.js';
|
|
4
5
|
import '../../icon-button/index.js';
|
|
5
6
|
import '../../tooltip/index.js';
|
|
6
7
|
import '../../toolbar/index.js';
|
|
@@ -6,6 +6,7 @@ import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
|
|
|
6
6
|
import { styles as liveStyles } from '../../shared/live/live.css.js';
|
|
7
7
|
import { styles } from './terminal-root.css.js';
|
|
8
8
|
import '../../button/index.js';
|
|
9
|
+
import '../../find/index.js';
|
|
9
10
|
import '../../icon-button/index.js';
|
|
10
11
|
import '../../tooltip/index.js';
|
|
11
12
|
import '../../toolbar/index.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`:host {--_tree-chevron: var(--tree-chevron-size, var(--helix-size-icon-tight));--_tree-pad: calc((var(--helix-size-control-tight) - 1rem) / 2);display: block}[part="item"] {border-radius: var(--helix-radii-sm);outline: none}[part="row"] {align-items: center;background-color: var(--_tree-row-fill, transparent);border-radius: var(--tree-row-radius, var(--helix-radii-sm));color: var(--_tree-row-ink, var(--tree-row-color, var(--helix-color-foreground-muted)));cursor: pointer;display: flex;font-size: var(--_tree-text, var(--helix-text-control));gap: var(--helix-space-2xs);margin-block-end: var(--tree-gap, var(--helix-space-2xs));block-size: max(var(--tree-row-size, var(--helix-size-control-tight)), calc(1lh + var(--_tree-pad) * 2));min-block-size: var(--tree-row-size, var(--helix-size-control-tight));padding-block: var(--_tree-pad);padding-inline: var(--helix-space-xs);padding-inline-start: calc(var(--helix-space-xs) + (var(--tree-level, 1) - 1) * var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);user-select: none}[part="row"]:not(:has([part="toggle"])) {padding-inline-start: calc(var(--helix-space-xs) + (var(--tree-level, 1) - 1) * var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))) + var(--_tree-reserve, calc(var(--_tree-chevron) + var(--helix-space-2xs))))}[part="row"]:has([part="toggle"]) {color: var(--_tree-row-ink, var(--_tree-heading-ink, var(--tree-row-color, var(--helix-color-foreground-muted))));font-size: var(--_tree-heading-text, var(--_tree-text, var(--helix-text-control)));font-weight: var(--helix-weight-medium);letter-spacing: var(--_tree-heading-tracking, var(--helix-tracking-normal))}[part="row"]:not(:has([part="toggle"])) {font-weight: var(--helix-weight-medium)}slot[name="children"]::slotted(*) {--_tree-text: var(--_tree-nested-text, var(--helix-text-control))}[part="row"]:hover {background-color: var(--tree-row-hover-background-color, var(--helix-color-surface-raised));color: var(--tree-row-hover-color, var(--helix-color-foreground))}:host(:state(selected)) [part="row"] {background-color: var(--tree-row-selected-background-color, var(--helix-color-surface-sunken));color: var(--tree-row-selected-color, var(--helix-color-foreground))}:host(:state(checked)) [part="row"] {--_tree-row-fill: var(--tree-row-checked-background-color, transparent);--_tree-row-ink: var(--tree-row-checked-color)}[part="item"]:focus-visible [part="row"], [part="row"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}a[part="row"] {text-decoration: none}[part="toggle"] {block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="toggle"] {transform: rotate(90deg)}:host(:state(open)) [part="toggle"] {transform: rotate(0deg)}[part="label"] {align-self: stretch;flex: 1;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="row"]:has([part="toggle"]) [part="label"] {flex: var(--_tree-label-flex, 1)}[part="label"] slot::slotted(a) {display: block;overflow: hidden;text-overflow: ellipsis}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {flex: 0 0 auto}slot[name="end"] {align-items: center;display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto;order: 1}slot[name="start"]::slotted(*) {color: var(--helix-color-foreground-subtle)}[part="group"] {display: grid;grid-template-rows: 1fr;transition: grid-template-rows var(--helix-duration-fast) var(--helix-easing-standard),
|
|
2
|
+
export const styles = createSheet(`:host {--_tree-chevron: var(--tree-chevron-size, var(--helix-size-icon-tight));--_tree-pad: calc((var(--helix-size-control-tight) - 1rem) / 2);display: block}[part="item"] {border-radius: var(--helix-radii-sm);outline: none}[part="row"] {align-items: center;background-color: var(--_tree-row-fill, transparent);border-radius: var(--tree-row-radius, var(--helix-radii-sm));color: var(--_tree-row-ink, var(--tree-row-color, var(--helix-color-foreground-muted)));cursor: pointer;display: flex;font-size: var(--_tree-text, var(--helix-text-control));gap: var(--helix-space-2xs);margin-block-end: var(--tree-gap, var(--helix-space-2xs));block-size: max(var(--tree-row-size, var(--helix-size-control-tight)), calc(1lh + var(--_tree-pad) * 2));min-block-size: var(--tree-row-size, var(--helix-size-control-tight));padding-block: var(--_tree-pad);padding-inline: var(--helix-space-xs);padding-inline-start: calc(var(--helix-space-xs) + (var(--tree-level, 1) - 1) * var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))));transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);user-select: none}[part="row"]:not(:has([part="toggle"])) {padding-inline-start: calc(var(--helix-space-xs) + (var(--tree-level, 1) - 1) * var(--tree-indent, calc(var(--_tree-chevron) + var(--helix-space-2xs))) + var(--_tree-reserve, calc(var(--_tree-chevron) + var(--helix-space-2xs))))}[part="row"]:has([part="toggle"]) {color: var(--_tree-row-ink, var(--_tree-heading-ink, var(--tree-row-color, var(--helix-color-foreground-muted))));font-size: var(--_tree-heading-text, var(--_tree-text, var(--helix-text-control)));font-weight: var(--helix-weight-medium);letter-spacing: var(--_tree-heading-tracking, var(--helix-tracking-normal))}[part="row"]:not(:has([part="toggle"])) {font-weight: var(--helix-weight-medium)}slot[name="children"]::slotted(*) {--_tree-text: var(--_tree-nested-text, var(--helix-text-control))}[part="row"]:hover {background-color: var(--tree-row-hover-background-color, var(--helix-color-surface-raised));color: var(--tree-row-hover-color, var(--helix-color-foreground))}:host(:state(selected)) [part="row"] {background-color: var(--tree-row-selected-background-color, var(--helix-color-surface-sunken));color: var(--tree-row-selected-color, var(--helix-color-foreground))}:host(:state(checked)) [part="row"] {--_tree-row-fill: var(--tree-row-checked-background-color, transparent);--_tree-row-ink: var(--tree-row-checked-color)}[part="item"]:focus-visible [part="row"], [part="row"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1)}a[part="row"] {text-decoration: none}[part="toggle"] {block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) [part="toggle"] {transform: rotate(90deg)}:host(:state(open)) [part="toggle"] {transform: rotate(0deg)}[part="label"] {align-self: stretch;flex: 1;min-inline-size: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}[part="row"]:has([part="toggle"]) [part="label"] {flex: var(--_tree-label-flex, 1)}[part="label"] slot::slotted(a) {display: block;overflow: hidden;text-overflow: ellipsis}slot[name="start"]::slotted(*), slot[name="end"]::slotted(*) {flex: 0 0 auto}slot[name="end"] {align-items: center;display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto;order: 1}slot[name="start"]::slotted(*) {color: var(--helix-color-foreground-subtle)}[part="group"] {display: grid;grid-template-rows: 1fr;transition: grid-template-rows var(--helix-duration-fast) var(--helix-easing-standard), content-visibility var(--helix-duration-fast) allow-discrete}[part="group"] > slot {display: block;min-block-size: 0;overflow: hidden}[part="group"][hidden] {grid-template-rows: 0fr}@starting-style {[part="group"]:not([hidden]) {grid-template-rows: 0fr}}[part="toggle"] {align-self: center;margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0)}slot[name="chevron"]::slotted(*) {align-self: center;block-size: var(--_tree-chevron);color: var(--helix-color-foreground-subtle);flex: 0 0 auto;inline-size: var(--_tree-chevron);margin-inline-start: var(--tree-chevron-gap, var(--helix-space-none));order: var(--tree-chevron-order, 0);transform: rotate(-90deg);transition: transform var(--helix-duration-fast) var(--helix-easing-standard)}:host(:dir(rtl)) slot[name="chevron"]::slotted(*) {transform: rotate(90deg)}:host(:state(open)) slot[name="chevron"]::slotted(*) {transform: rotate(0deg)}[part~="checkbox"] {align-self: center;background-color: var(--tree-checkbox-background-color, var(--helix-color-background));block-size: var(--tree-checkbox-size, var(--_tree-chevron));border: var(--helix-border-thin) solid var(--tree-checkbox-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);color: var(--tree-checkbox-mark-color, var(--helix-color-foreground));display: grid;flex: 0 0 auto;inline-size: var(--tree-checkbox-size, var(--_tree-chevron));place-items: center}[part~="checkbox-checked"], [part~="checkbox-mixed"] {border-color: var(--tree-checkbox-border-color, var(--helix-color-foreground))}[part~="checkbox"] svg {block-size: 80%;inline-size: 80%}[part="grip"] {align-items: center;color: var(--tree-grip-color, var(--helix-color-foreground-subtle));cursor: grab;display: inline-flex;flex: 0 0 auto;order: 3;touch-action: none}[part="grip"]:active {cursor: grabbing}[part="grip-mark"] {block-size: var(--_tree-chevron);inline-size: var(--_tree-chevron)}:host(:state(dragging)) [part="item"] {opacity: var(--tree-dragging-opacity, 0.5)}:host(:state(drop-before)) [part="item"], :host(:state(drop-after)) [part="item"] {position: relative}:host(:state(drop-before)) [part="item"]::before, :host(:state(drop-after)) [part="item"]::after {background-color: var(--tree-drop-indicator-color, var(--helix-color-primary));block-size: var(--tree-drop-indicator-size, var(--helix-border-thick));content: "";inset-inline: 0;pointer-events: none;position: absolute;z-index: 1}:host(:state(drop-before)) [part="item"]::before {inset-block-start: 0}:host(:state(drop-after)) [part="item"]::after {inset-block-end: 0}:host([disabled]) [part="row"] {cursor: not-allowed;opacity: var(--tree-row-disabled-opacity, 0.5)}:host([disabled]) [part="row"]:hover {background-color: transparent;color: var(--tree-row-color, var(--helix-color-foreground-muted))}:host(:state(loading)) [part="toggle"], :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: tree-loading var(--helix-duration-slow) var(--helix-easing-standard) infinite alternate}@keyframes tree-loading {to {opacity: 0.3}}@media (prefers-reduced-motion: reduce) {:host(:state(loading)) [part="toggle"], :host(:state(loading)) slot[name="chevron"]::slotted(*) {animation: none}}`);
|