@fusion.dev/helix 0.219.0 → 0.221.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 +3 -2
- package/dist/code-editor/root/code-editor-root.js +1 -0
- package/dist/editor/index.d.ts +1 -0
- package/dist/editor/index.js +1 -0
- package/dist/editor/root/editor-root.css.d.ts +1 -0
- package/dist/editor/root/editor-root.css.js +2 -0
- package/dist/editor/root/editor-root.d.ts +62 -0
- package/dist/editor/root/editor-root.js +33 -0
- package/dist/element-events.generated.js +4 -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 +2 -0
- package/dist/index.js +2 -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 +1730 -70
- package/types/svelte.d.ts +2 -0
- package/types/vue.d.ts +313 -2
- package/types/words.d.ts +227 -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
|
/**
|
|
@@ -11,7 +12,7 @@ import '../../toolbar/index.js';
|
|
|
11
12
|
* header, a find bar and a status line each a strip on the raised surface,
|
|
12
13
|
* one frame around them. It is 24rem tall unless `fill` is set or
|
|
13
14
|
* `--code-editor-block-size` says otherwise. An engine draws inside it:
|
|
14
|
-
* `@fusion.dev/helix-editor` themes CodeMirror's gutter, caret, selection and
|
|
15
|
+
* `@fusion.dev/helix-code-editor` themes CodeMirror's gutter, caret, selection and
|
|
15
16
|
* syntax from your tokens, and draws a problem's line number in its tone.
|
|
16
17
|
*
|
|
17
18
|
* Set `fill` for an editor that fills a pane, such as one side of a split
|
|
@@ -19,7 +20,7 @@ import '../../toolbar/index.js';
|
|
|
19
20
|
*
|
|
20
21
|
* @since 0.216.0
|
|
21
22
|
* @status experimental
|
|
22
|
-
* @category
|
|
23
|
+
* @category editors
|
|
23
24
|
* @aliases Code editor, CodeMirror, File editor, IDE, Monaco
|
|
24
25
|
* @documentation https://fusion.dev/helix/components/code-editor
|
|
25
26
|
*
|
|
@@ -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 {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './root/editor-root.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './root/editor-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 {display: flex;flex-direction: column}:host([fill]) {inset: 0;position: absolute}[part="region"] {background-color: var(--editor-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));border-radius: var(--editor-radius, var(--helix-radii-lg));box-sizing: border-box;display: flex;flex: 1 1 auto;flex-direction: column;min-block-size: var(--editor-min-block-size, 12rem);overflow: clip;transition: border-color var(--helix-duration-fast) var(--helix-easing-standard)}:host([fill]) [part="region"] {block-size: 100%;min-block-size: 0}:host([separation="plain"]) [part="region"] {border: none;border-radius: 0}:host(:state(document-focused):not([separation="plain"])) [part="region"] {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0}[part="header"] {--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);background-color: var(--editor-header-background-color, var(--helix-color-surface-raised));border-block-end: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));box-sizing: border-box;container-type: inline-size;display: flex;flex: 0 0 auto;flex-direction: column;gap: var(--helix-space-2xs);inset-block-start: var(--editor-header-offset, 0);padding: var(--helix-space-2xs) var(--helix-space-xs);position: sticky;z-index: 1}[part="header"][hidden] {display: none}[part="controls"] {--toolbar-separator-gap: var(--helix-space-2xs);display: flex}[part="controls"]::part(toolbar) {flex: 1 1 auto;flex-wrap: wrap;row-gap: var(--helix-space-2xs)}[part="tools"] {display: flex;gap: var(--helix-space-2xs)}[part="divider"] {align-self: center;block-size: calc(var(--helix-size-control) * 0.6)}@container (inline-size < 40rem) {[part="controls"] {--toolbar-gap: var(--helix-space-sm)}[part="divider"] {display: none}}[aria-pressed="true"], :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="block-name"] {display: inline-grid;justify-items: start}[part="block-name"] > span {grid-area: 1 / 1}[part="block-name"] > [hidden] {display: block;visibility: hidden}[part="actions"] {display: flex;gap: var(--helix-space-2xs);margin-inline-start: auto}[part="actions"][hidden] {display: none}[part="link-bar"] {--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);align-items: center;display: flex;gap: var(--helix-space-2xs);min-inline-size: 0;padding-inline-start: var(--helix-space-2xs)}[part="link-bar"][hidden] {display: none}[part="link-field"] {appearance: none;background-color: var(--editor-background-color, var(--helix-color-background));block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--editor-border-color, var(--helix-color-border));border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 12rem;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));max-inline-size: 28rem;min-inline-size: 0;padding-inline: var(--helix-space-xs)}[part="link-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset)}[part="link-controls"] {flex: 0 0 auto}[part="find"] {--find-background-color: transparent;--find-border-color: var(--editor-border-color, var(--helix-color-border));--find-field-background-color: var(--editor-background-color, var(--helix-color-background))}[part="find"]:not(:state(open)) {display: none}[part="find"]::part(bar) {border-block-end: none;padding-block: 0;padding-inline: var(--helix-space-2xs) 0}[part="viewport"] {color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;flex-direction: column;min-block-size: 0}:host([fill]) [part="viewport"] {overflow: auto}[part="viewport"] ::slotted(*) {box-sizing: border-box;caret-color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-md);line-height: var(--helix-leading-normal);outline: none;padding-block: var(--editor-padding, var(--helix-space-lg));padding-inline: max(var(--editor-padding, var(--helix-space-lg)), calc((100% - var(--editor-measure, 72ch)) / 2))}[part="footer"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs)}@media print {[part="header"] {display: none}[part="region"], :host([fill]) [part="viewport"] {overflow: visible}}`);
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { HelixHeadlessEditor } from '@fusion.dev/helix-headless/editor';
|
|
2
|
+
import type { CSSResultGroup } from 'lit';
|
|
3
|
+
import '../../button/index.js';
|
|
4
|
+
import '../../divider/index.js';
|
|
5
|
+
import '../../find/index.js';
|
|
6
|
+
import '../../icon-button/index.js';
|
|
7
|
+
import '../../menu/index.js';
|
|
8
|
+
import '../../toolbar/index.js';
|
|
9
|
+
/**
|
|
10
|
+
* @summary A frame around a document that ProseMirror or another editor draws.
|
|
11
|
+
*
|
|
12
|
+
* @description
|
|
13
|
+
* Drawn as Code Editor is: the document on the page's ground, and the toolbar
|
|
14
|
+
* a strip on the raised surface, one frame around them. The strip stays at the
|
|
15
|
+
* top of the page while a long document scrolls under it, and the frame grows
|
|
16
|
+
* with the document from `--editor-min-block-size`. Set `fill` for an editor
|
|
17
|
+
* that fills a pane, where the document scrolls inside the frame.
|
|
18
|
+
*
|
|
19
|
+
* The document's headings, lists, quotes, code, and tables are drawn by the
|
|
20
|
+
* base layer's `data-prose` rules, so it reads as your docs and chat replies
|
|
21
|
+
* do. Write `data-prose` on the document so the base layer draws it before a
|
|
22
|
+
* renderer connects, and `connectEditor` writes it too. Its lines keep to a
|
|
23
|
+
* readable length, `--editor-measure`, centered in a wide frame.
|
|
24
|
+
*
|
|
25
|
+
* @since 0.221.0
|
|
26
|
+
* @status experimental
|
|
27
|
+
* @category editors
|
|
28
|
+
* @aliases Rich text editor, WYSIWYG, Document editor, ProseMirror, Block editor
|
|
29
|
+
* @documentation https://fusion.dev/helix/components/editor
|
|
30
|
+
*
|
|
31
|
+
* @cssproperty --editor-background-color - The ground the document is drawn on. Defaults to the page's background.
|
|
32
|
+
* @cssproperty --editor-border-color - The frame's edge and the line under the toolbar.
|
|
33
|
+
* @cssproperty --editor-header-background-color - The fill of the toolbar's strip.
|
|
34
|
+
* @cssproperty --editor-header-offset - How far below the top of the page the toolbar stays while the document scrolls, such as the height of your own fixed header. `0` unless set.
|
|
35
|
+
* @cssproperty --editor-measure - The longest a line of the document runs, as a length: `72ch` unless set.
|
|
36
|
+
* @cssproperty --editor-min-block-size - The frame's least height, which it grows from with the document: `12rem` unless set. Ignored with `fill`.
|
|
37
|
+
* @cssproperty --editor-padding - The space around the document, inside the frame.
|
|
38
|
+
* @cssproperty --editor-radius - The frame's corner radius.
|
|
39
|
+
*/
|
|
40
|
+
export declare class HelixEditor extends HelixHeadlessEditor {
|
|
41
|
+
static tier: string;
|
|
42
|
+
/**
|
|
43
|
+
* Covers the container instead of growing with the document, for an editor
|
|
44
|
+
* that fills a pane, such as one side of a split view. The document scrolls
|
|
45
|
+
* inside the frame. The container needs a position, such as
|
|
46
|
+
* `position: relative`.
|
|
47
|
+
*/
|
|
48
|
+
fill: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* How the frame stands off the page. Unset, it is outlined. `plain` draws
|
|
51
|
+
* no edge or corners, for a document that fills a page or a pane of its own.
|
|
52
|
+
*/
|
|
53
|
+
separation?: 'outlined' | 'plain';
|
|
54
|
+
/** The block menu's button is drawn as the tools beside it are. */
|
|
55
|
+
protected get blockEmphasis(): 'ghost' | undefined;
|
|
56
|
+
static styles: CSSResultGroup;
|
|
57
|
+
}
|
|
58
|
+
declare global {
|
|
59
|
+
interface HTMLElementTagNameMap {
|
|
60
|
+
'helix-editor': HelixEditor;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { customElement } from '@fusion.dev/helix-core';
|
|
3
|
+
import { HelixHeadlessEditor } from '@fusion.dev/helix-headless/editor';
|
|
4
|
+
import { property } from 'lit/decorators.js';
|
|
5
|
+
import { styles as glyphStyles } from '../../shared/glyph/glyph.css.js';
|
|
6
|
+
import { styles } from './editor-root.css.js';
|
|
7
|
+
import '../../button/index.js';
|
|
8
|
+
import '../../divider/index.js';
|
|
9
|
+
import '../../find/index.js';
|
|
10
|
+
import '../../icon-button/index.js';
|
|
11
|
+
import '../../menu/index.js';
|
|
12
|
+
import '../../toolbar/index.js';
|
|
13
|
+
let HelixEditor = class HelixEditor extends HelixHeadlessEditor {
|
|
14
|
+
constructor() {
|
|
15
|
+
super(...arguments);
|
|
16
|
+
this.fill = false;
|
|
17
|
+
}
|
|
18
|
+
static { this.tier = 'helix-'; }
|
|
19
|
+
get blockEmphasis() {
|
|
20
|
+
return 'ghost';
|
|
21
|
+
}
|
|
22
|
+
static { this.styles = [glyphStyles, styles]; }
|
|
23
|
+
};
|
|
24
|
+
__decorate([
|
|
25
|
+
property({ reflect: true, type: Boolean })
|
|
26
|
+
], HelixEditor.prototype, "fill", void 0);
|
|
27
|
+
__decorate([
|
|
28
|
+
property({ reflect: true })
|
|
29
|
+
], HelixEditor.prototype, "separation", void 0);
|
|
30
|
+
HelixEditor = __decorate([
|
|
31
|
+
customElement('helix-editor')
|
|
32
|
+
], HelixEditor);
|
|
33
|
+
export { HelixEditor };
|
|
@@ -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',
|
|
@@ -134,6 +134,7 @@ registerElementEvents({
|
|
|
134
134
|
'helix-drawer': ['close', 'helix-before-close', 'helix-before-open', 'toggle'],
|
|
135
135
|
'helix-drilldown': ['helix-navigate', 'helix-select'],
|
|
136
136
|
'helix-drilldown-item': ['helix-select'],
|
|
137
|
+
'helix-editor': ['helix-found'],
|
|
137
138
|
'helix-file-input': ['change', 'helix-before-change', 'helix-reject', 'input'],
|
|
138
139
|
'helix-filter-chip': ['helix-dismiss'],
|
|
139
140
|
'helix-filter-input': [
|
|
@@ -150,6 +151,7 @@ registerElementEvents({
|
|
|
150
151
|
'toggle',
|
|
151
152
|
],
|
|
152
153
|
'helix-filter-menu': ['helix-facet'],
|
|
154
|
+
'helix-find': ['helix-before-close', 'helix-before-open', 'helix-found', 'toggle'],
|
|
153
155
|
'helix-graph': [
|
|
154
156
|
'helix-activate',
|
|
155
157
|
'helix-before-activate',
|
|
@@ -374,6 +376,7 @@ registerElementEvents({
|
|
|
374
376
|
'helix-tag-group': ['change', 'helix-before-change', 'helix-dismiss'],
|
|
375
377
|
'helix-terminal': [
|
|
376
378
|
'helix-copy',
|
|
379
|
+
'helix-found',
|
|
377
380
|
'helix-terminal-bell',
|
|
378
381
|
'helix-terminal-input',
|
|
379
382
|
'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
|
@@ -43,10 +43,12 @@ export * from './divider/index.js';
|
|
|
43
43
|
export * from './donut-chart/index.js';
|
|
44
44
|
export * from './drawer/index.js';
|
|
45
45
|
export * from './drilldown/index.js';
|
|
46
|
+
export * from './editor/index.js';
|
|
46
47
|
export * from './empty/index.js';
|
|
47
48
|
export * from './file-input/index.js';
|
|
48
49
|
export * from './filter-input/index.js';
|
|
49
50
|
export * from './filter-input/menu/index.js';
|
|
51
|
+
export * from './find/index.js';
|
|
50
52
|
export * from './flex/index.js';
|
|
51
53
|
export * from './format-date/index.js';
|
|
52
54
|
export * from './graph/index.js';
|
package/dist/index.js
CHANGED
|
@@ -38,10 +38,12 @@ export * from './divider/index.js';
|
|
|
38
38
|
export * from './donut-chart/index.js';
|
|
39
39
|
export * from './drawer/index.js';
|
|
40
40
|
export * from './drilldown/index.js';
|
|
41
|
+
export * from './editor/index.js';
|
|
41
42
|
export * from './empty/index.js';
|
|
42
43
|
export * from './file-input/index.js';
|
|
43
44
|
export * from './filter-input/index.js';
|
|
44
45
|
export * from './filter-input/menu/index.js';
|
|
46
|
+
export * from './find/index.js';
|
|
45
47
|
export * from './flex/index.js';
|
|
46
48
|
export * from './format-date/index.js';
|
|
47
49
|
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}}`);
|