@fusion.dev/helix 0.166.0 → 0.167.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/custom-elements.json +2583 -477
- package/dist/canvas/root/canvas-root.css.js +1 -1
- package/dist/canvas/root/canvas-root.d.ts +2 -0
- package/dist/canvas/root/canvas-root.js +1 -0
- package/dist/chat/composer/chat-composer.css.js +1 -1
- package/dist/color-picker/root/color-picker-root.css.js +2 -2
- package/dist/combobox/root/combobox-root.d.ts +1 -1
- package/dist/combobox/root/combobox-root.js +1 -1
- package/dist/command/root/command-root.css.js +1 -1
- package/dist/element-events.generated.js +2 -0
- package/dist/file-input/root/file-input-root.d.ts +1 -1
- package/dist/file-input/root/file-input-root.js +1 -1
- package/dist/graph/root/graph-root.css.js +1 -1
- package/dist/listbox/root/listbox-root.css.js +1 -1
- package/dist/object-inspector/root/object-inspector-root.css.js +1 -1
- package/dist/sandbox/source/sandbox-source.css.js +1 -1
- package/dist/sandbox/terminal/sandbox-terminal.css.js +1 -1
- package/dist/shared/field/field-frame.css.js +1 -1
- package/dist/shared/field/field-segments.css.js +1 -1
- package/dist/table/root/table-root.css.js +7 -1
- package/dist/table/root/table-root.d.ts +4 -0
- package/dist/time-picker/root/time-picker-root.css.js +1 -1
- package/dist/time-picker/root/time-picker-root.d.ts +1 -0
- package/dist/virtual-list/root/virtual-list-root.css.js +1 -1
- package/dist/virtual-list/root/virtual-list-root.d.ts +1 -1
- package/lint.json +1 -1
- package/package.json +6 -6
- package/types/jsx.d.ts +383 -63
- package/types/vue.d.ts +89 -2
- package/types/words.d.ts +27 -0
|
@@ -9,7 +9,7 @@ var(--helix-color-border) var(--helix-border-thin),
|
|
|
9
9
|
transparent 0
|
|
10
10
|
);}:host(:state(direct)) [part="board"],
|
|
11
11
|
:host(:state(direct)) [part="viewport"] {transition: none;}@media (prefers-reduced-motion: reduce) {[part="board"],
|
|
12
|
-
:host([grid]) [part="viewport"] {transition: none;}}[part="edges"] {inset: 0;overflow: visible;position: absolute;z-index: var(--helix-layer-beneath);}[part="edge"] {stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));stroke-width: var(--canvas-edge-width, var(--helix-border-thick));}[part="edge"] {pointer-events: none;}[part="edge-target"] {cursor: grab;pointer-events: stroke;stroke: transparent;stroke-width: var(--canvas-edge-target-width, 12px);}[part="edge-target"]:focus {outline: none;}[part="edge-target"]:hover + [part="edge"] {stroke: var(--helix-color-focus-ring);}[part="edge-target"]:focus-visible + [part="edge"] {stroke: var(--helix-color-focus-ring);stroke-width: calc(var(--canvas-edge-width, var(--helix-border-thick)) * 2);}[part="edge-end"] {background-color: var(--canvas-selected-color, var(--helix-color-accent));block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--helix-color-surface);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: grab;inline-size: var(--canvas-handle-size, 0.625rem);left: var(--_canvas-end-x);position: absolute;top: var(--_canvas-end-y);transform: translate(-50%, -50%);z-index: 1;}[part="edge-end"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}@media (pointer: coarse) {[part="edge-end"]::after {inset: calc((2.75rem - 100%) / -2);}}:host(:state(holding)) [part="viewport"] {cursor: grabbing;}[part="label-editor"] {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-accent);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);inline-size: var(--canvas-label-editor-inline-size, 12rem);left: var(--_canvas-editor-x);padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;text-align: center;top: var(--_canvas-editor-y);transform: translate(-50%, -50%);z-index: 1;}[part="label-editor"][data-target="group"] {text-align: start;transform: translate(0, -100%);}[part="label-editor"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="marquee"] {background-color: color-mix(
|
|
12
|
+
:host([grid]) [part="viewport"] {transition: none;}}[part="edges"] {inset: 0;overflow: visible;position: absolute;z-index: var(--helix-layer-beneath);}[part="edge"] {stroke: var(--_canvas-edge-color, var(--canvas-edge-color, var(--helix-color-border)));stroke-width: var(--canvas-edge-width, var(--helix-border-thick));}[part="edge"] {pointer-events: none;}[part="edge-target"] {cursor: grab;pointer-events: stroke;stroke: transparent;stroke-width: var(--canvas-edge-target-width, 12px);}[part="edge-target"]:focus {outline: none;}[part="edge-target"]:hover + [part="edge"] {stroke: var(--helix-color-focus-ring);}[part="edge-target"]:focus-visible + [part="edge"] {stroke: var(--helix-color-focus-ring);stroke-width: calc(var(--canvas-edge-width, var(--helix-border-thick)) * 2);}[part="edge-end"] {background-color: var(--canvas-selected-color, var(--helix-color-accent));block-size: var(--canvas-handle-size, 0.625rem);border: var(--helix-border-thick) solid var(--helix-color-surface);border-radius: var(--helix-radii-full);box-sizing: border-box;cursor: grab;inline-size: var(--canvas-handle-size, 0.625rem);left: var(--_canvas-end-x);position: absolute;top: var(--_canvas-end-y);transform: translate(-50%, -50%);z-index: 1;}[part="edge-end"]::after {content: "";inset: calc(var(--helix-space-sm) * -1);position: absolute;}@media (pointer: coarse) {[part="edge-end"]::after {inset: calc((2.75rem - 100%) / -2);}}:host(:state(holding)) [part="viewport"] {cursor: grabbing;}[part="label-editor"] {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-accent);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-xs));inline-size: var(--canvas-label-editor-inline-size, 12rem);left: var(--_canvas-editor-x);padding: var(--helix-space-2xs) var(--helix-space-xs);position: absolute;text-align: center;top: var(--_canvas-editor-y);transform: translate(-50%, -50%);z-index: 1;}[part="label-editor"][data-target="group"] {text-align: start;transform: translate(0, -100%);}[part="label-editor"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="marquee"] {background-color: color-mix(
|
|
13
13
|
in oklab,
|
|
14
14
|
var(--canvas-selected-color, var(--helix-color-accent)) 10%,
|
|
15
15
|
transparent
|
|
@@ -37,6 +37,8 @@ import type { CSSResultGroup } from 'lit';
|
|
|
37
37
|
* @cssproperty --viewport-control-background-color - The background of the pan and zoom buttons. `Map` uses the same property.
|
|
38
38
|
*/
|
|
39
39
|
export declare class HelixCanvas extends HelixHeadlessCanvas {
|
|
40
|
+
/** A paste adds this tier's cards and connections. */
|
|
41
|
+
static tier: string;
|
|
40
42
|
/**
|
|
41
43
|
* Draws `lines` or `dots` on the board's plane, so you can see it move.
|
|
42
44
|
*
|
|
@@ -11,6 +11,7 @@ import { styles as liveStyles } from '../../shared/live/live.css.js';
|
|
|
11
11
|
import { styles as viewportStyles } from '../../shared/viewport/viewport.css.js';
|
|
12
12
|
import { styles } from './canvas-root.css.js';
|
|
13
13
|
let HelixCanvas = class HelixCanvas extends HelixHeadlessCanvas {
|
|
14
|
+
static { this.tier = 'helix-'; }
|
|
14
15
|
static { this.styles = [liveStyles, viewportStyles, styles]; }
|
|
15
16
|
};
|
|
16
17
|
__decorate([
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
2
|
export const styles = createSheet(`:host {display: block;}[part="composer"] {background-color: var(--chat-composer-background-color, var(--helix-color-surface));border: var(--chat-composer-border-width, var(--helix-border-thin)) solid
|
|
3
3
|
var(--helix-color-border);border-radius: var(--helix-radii-md);display: grid;gap: var(--helix-space-2xs);padding: var(--helix-space-xs);}[part="composer"]:focus-within {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="composer"],
|
|
4
|
-
:host(:state(invalid)) [part="composer"]:focus-within {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none;}[part="field"]:focus-visible {outline: none;}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end;}[part="start"],
|
|
4
|
+
:host(:state(invalid)) [part="composer"]:focus-within {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="field"] {background-color: transparent;border: 0;color: var(--helix-color-foreground);field-sizing: content;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));line-height: var(--helix-leading-normal);max-block-size: var(--chat-composer-max-block-size, 12rem);padding-block: var(--helix-space-2xs);padding-inline: calc(var(--helix-space-sm) - var(--helix-space-xs) - var(--helix-border-thin));resize: none;}[part="field"]:focus-visible {outline: none;}[part="tools"] {align-items: center;display: flex;gap: var(--helix-space-2xs);justify-content: flex-end;}[part="start"],
|
|
5
5
|
[part="end"] {--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-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);align-items: center;display: flex;gap: var(--helix-space-2xs);}[part="start"] {margin-inline-end: auto;}[part="end"] {margin-inline-end: var(--helix-space-2xs);}[part="start"][data-empty],
|
|
6
6
|
[part="end"][data-empty] {display: none;}[part="send"] {align-items: center;background-color: transparent;block-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));border: 0;border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground-muted);cursor: pointer;display: inline-flex;inline-size: calc(var(--helix-size-control-tight) - var(--helix-space-2xs));justify-content: center;padding: var(--helix-space-none);}[part="mark"] {block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="send"]:hover:not(:disabled) {background-color: color-mix(in oklab, var(--helix-color-foreground) 8%, transparent);color: var(--helix-color-foreground);}[part="send"]:disabled {cursor: not-allowed;opacity: 0.5;}[part="send"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}`);
|
|
@@ -66,11 +66,11 @@ var(--helix-color-surface-sunken) 0 75%,
|
|
|
66
66
|
var(--helix-color-surface) 0
|
|
67
67
|
);background-size:
|
|
68
68
|
100% 100%,
|
|
69
|
-
var(--helix-space-sm) var(--helix-space-sm);}[part="channel"] {--slider-fill-color: transparent;--slider-track-color: transparent;}[part="footer"]:empty {display: none;}[part="footer"] {display: flex;gap: var(--helix-space-xs);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="value"] {all: unset;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-control);font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="value"]:hover {border-color: var(--helix-color-foreground-muted);}[part="value"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host([invalid]) [part="value"],
|
|
69
|
+
var(--helix-space-sm) var(--helix-space-sm);}[part="channel"] {--slider-fill-color: transparent;--slider-track-color: transparent;}[part="footer"]:empty {display: none;}[part="footer"] {display: flex;gap: var(--helix-space-xs);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="value"] {all: unset;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-control));font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="value"]:hover {border-color: var(--helix-color-foreground-muted);}[part="value"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host([invalid]) [part="value"],
|
|
70
70
|
:host([invalid]) [part="value"]:hover,
|
|
71
71
|
:host([invalid]) [part="value"]:focus-visible,
|
|
72
72
|
:host(:state(invalid)) [part="value"],
|
|
73
73
|
:host(:state(invalid)) [part="value"]:hover,
|
|
74
|
-
:host(:state(invalid)) [part="value"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="fields"] {display: grid;gap: var(--color-picker-fields-gap, var(--helix-space-xs));grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column;margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}:host([alpha]) [part="fields"] {grid-auto-flow: row;grid-template-columns: repeat(2, minmax(0, 1fr));}[part="field"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);min-inline-size: 0;}[part="field-label"] {color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);}[part="field-input"] {all: unset;appearance: textfield;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-control);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);inline-size: 100%;min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="field-input"]::-webkit-inner-spin-button,
|
|
74
|
+
:host(:state(invalid)) [part="value"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="fields"] {display: grid;gap: var(--color-picker-fields-gap, var(--helix-space-xs));grid-auto-columns: minmax(0, 1fr);grid-auto-flow: column;margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}:host([alpha]) [part="fields"] {grid-auto-flow: row;grid-template-columns: repeat(2, minmax(0, 1fr));}[part="field"] {display: flex;flex-direction: column;gap: var(--helix-space-2xs);min-inline-size: 0;}[part="field-label"] {color: var(--color-picker-field-label-color, var(--helix-color-foreground-muted));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);}[part="field-input"] {all: unset;appearance: textfield;background-color: var(--helix-color-surface-sunken);block-size: var(--helix-size-control);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-control));font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);inline-size: 100%;min-inline-size: 0;padding-inline: var(--helix-space-xs);transition: border-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="field-input"]::-webkit-inner-spin-button,
|
|
75
75
|
[part="field-input"]::-webkit-outer-spin-button {appearance: none;margin: 0;}[part="field-input"]:hover {border-color: var(--helix-color-foreground-muted);}[part="field-input"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}[part="actions"] {display: flex;flex: 1 1 auto;}[part="actions"] helix-button {flex: 1 1 0;}::slotted([slot="eyedropper-icon"]) {block-size: var(--icon-size, var(--helix-size-icon));flex: 0 0 auto;inline-size: var(--icon-size, var(--helix-size-icon));}[part="format"] {font-family: var(--helix-font-mono);font-variant-caps: all-small-caps;}[part="swatches"] {border-block-start: var(--helix-border-thin) solid var(--helix-color-border);display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);margin-block-start: var(--helix-space-sm);padding-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="swatch"] {block-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));cursor: pointer;inline-size: var(--color-picker-swatch-size, var(--helix-size-icon-loose));padding: var(--helix-space-none);}[part="label"] {color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);line-height: var(--helix-leading-tight);margin-block-end: var(--helix-space-xs);padding-inline: var(--color-picker-padding, var(--helix-space-none));}:host([required]) [part="label"]::after {color: var(--helix-color-danger);content: "*";margin-inline-start: var(--helix-space-2xs);}@supports (content: "*" / "") {:host([required]) [part="label"]::after {content: "*" / "";}}[part="hint"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);margin-block-start: var(--helix-space-sm);padding-inline: var(--color-picker-padding, var(--helix-space-none));}[part="feedback"] {color: var(--color-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);padding-inline: var(--color-picker-padding, var(--helix-space-none));}@media (prefers-reduced-motion: reduce) {[part="sample"] {transition: none;}[part="sample"][data-copied] {scale: 1;}}:host(:disabled) {cursor: not-allowed;opacity: 0.5;}:host([readonly]) [part="grid"],
|
|
76
76
|
:host([readonly]) [part="swatch"] {cursor: default;}@media print {:host {box-shadow: none;print-color-adjust: exact;}}`);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { HelixHeadlessCombobox } from '@fusion.dev/helix-headless/combobox';
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
3
|
import '../../listbox/index.js';
|
|
4
|
-
import '../../tag/index.js';
|
|
4
|
+
import '../../tag/root/index.js';
|
|
5
5
|
/**
|
|
6
6
|
* @summary A text field that filters a list of options as you type.
|
|
7
7
|
*
|
|
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
8
|
import { HelixHeadlessCombobox } from '@fusion.dev/helix-headless/combobox';
|
|
9
9
|
import '../../listbox/index.js';
|
|
10
|
-
import '../../tag/index.js';
|
|
10
|
+
import '../../tag/root/index.js';
|
|
11
11
|
import { styles as fieldStyles } from '../../shared/field/field.css.js';
|
|
12
12
|
import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
|
|
13
13
|
import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`helix-dialog::part(dialog) {align-self: start;inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));margin-block-start: 20vh;padding: var(--helix-space-none);}:host {--option-padding: var(--helix-space-sm);}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block;}helix-listbox::part(items) {background-color: transparent;border: none;max-block-size: var(--command-list-size, 22rem);padding-block: var(--helix-space-xs);}helix-listbox::part(search) {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);padding: var(--option-padding);}helix-listbox::part(search-field) {font-size: var(--helix-text-md);}:host {--_command-row: var(--helix-space-sm);--option-block-padding: var(--_command-row);}:host([data-density="sm"]),
|
|
2
|
+
export const styles = createSheet(`helix-dialog::part(dialog) {align-self: start;inline-size: min(var(--command-size, 40rem), calc(100vw - var(--helix-space-xl) * 2));margin-block-start: 20vh;padding: var(--helix-space-none);}:host {--option-padding: var(--helix-space-sm);}[part="listbox"] {--listbox-background-color: transparent;border: none;display: block;}helix-listbox::part(items) {background-color: transparent;border: none;max-block-size: var(--command-list-size, 22rem);padding-block: var(--helix-space-xs);}helix-listbox::part(search) {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);padding: var(--option-padding);}helix-listbox::part(search-field) {font-size: max(var(--helix-text-field-min), var(--helix-text-md));}:host {--_command-row: var(--helix-space-sm);--option-block-padding: var(--_command-row);}:host([data-density="sm"]),
|
|
3
3
|
:host(:where([data-density="sm"] *)) {--_command-row: var(--helix-space-2xs);}:host([data-density="lg"]),
|
|
4
4
|
:host(:where([data-density="lg"] *)) {--_command-row: var(--helix-space-md);}[part="footer"] {align-items: center;border-block-start: var(--helix-border-thin) solid var(--helix-color-border);color: var(--helix-color-foreground-muted);display: flex;font-size: var(--helix-text-xs);gap: var(--helix-space-sm);padding: var(--helix-space-xs) var(--option-padding);}[part="footer"][hidden] {display: none;}:host([inline]) {background-color: var(--helix-color-surface);border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);display: block;inline-size: min(var(--command-size, 40rem), 100%);overflow: hidden;}@media print {:host {display: none;}}`);
|
|
@@ -13,6 +13,7 @@ registerElementEvents({
|
|
|
13
13
|
'helix-callout': ['helix-dismiss'],
|
|
14
14
|
'helix-canvas': [
|
|
15
15
|
'helix-before-move',
|
|
16
|
+
'helix-before-paste',
|
|
16
17
|
'helix-before-reconnect',
|
|
17
18
|
'helix-before-relabel',
|
|
18
19
|
'helix-canvas-edit',
|
|
@@ -21,6 +22,7 @@ registerElementEvents({
|
|
|
21
22
|
'helix-canvas-zoom',
|
|
22
23
|
'helix-connect',
|
|
23
24
|
'helix-move',
|
|
25
|
+
'helix-pasted',
|
|
24
26
|
'helix-reconnect',
|
|
25
27
|
'helix-relabel',
|
|
26
28
|
'helix-remove',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { HelixHeadlessFileInput } from '@fusion.dev/helix-headless/file-input';
|
|
2
2
|
import type { CSSResultGroup } from 'lit';
|
|
3
|
-
import '../../tag/index.js';
|
|
3
|
+
import '../../tag/root/index.js';
|
|
4
4
|
/**
|
|
5
5
|
* @summary A field for choosing files from a picker or by dropping them on it.
|
|
6
6
|
*
|
|
@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
6
6
|
};
|
|
7
7
|
import { customElement } from '@fusion.dev/helix-core';
|
|
8
8
|
import { HelixHeadlessFileInput } from '@fusion.dev/helix-headless/file-input';
|
|
9
|
-
import '../../tag/index.js';
|
|
9
|
+
import '../../tag/root/index.js';
|
|
10
10
|
import { styles as fieldStyles } from '../../shared/field/field.css.js';
|
|
11
11
|
import { styles as fieldFrameStyles } from '../../shared/field/field-frame.css.js';
|
|
12
12
|
import { styles as fieldStackedStyles } from '../../shared/field/field-stacked.css.js';
|
|
@@ -8,7 +8,7 @@ export const styles = createSheet(`:host {display: contents;}[part="region"] {ba
|
|
|
8
8
|
"start . end zoomout"
|
|
9
9
|
". down . notes"
|
|
10
10
|
". . . full";}[part="legend"] {display: flex;flex-wrap: wrap;gap: var(--helix-space-2xs);inset-block-end: var(--helix-space-sm);inset-inline-start: var(--helix-space-sm);max-inline-size: calc(100% - var(--helix-space-sm) * 3 - var(--helix-size-control-sm));position: absolute;}:host([controls-placement="bottom-start"]) [part="legend"] {inset-inline: auto var(--helix-space-sm);}@container (inline-size < 40rem) {[part="legend"] {flex-wrap: nowrap;inset-block-end: calc(var(--helix-space-sm) - var(--helix-space-2xs));inset-inline-start: calc(var(--helix-space-sm) - var(--helix-space-2xs));overflow-x: auto;padding: var(--helix-space-2xs);scrollbar-width: none;}}[part~="legend-item"] {align-items: center;background-color: var(--viewport-control-background-color, var(--helix-color-surface-overlay));block-size: var(--helix-size-control-tight);border: var(--helix-border-floating) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);box-shadow: var(--helix-shadow-floating);color: var(--helix-color-foreground);cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);gap: var(--helix-space-2xs);padding-inline: var(--helix-space-xs);white-space: nowrap;}[part~="legend-item"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part~="legend-item"]:nth-child(24n + 1) {--_graph-swatch: var(--helix-color-series-1);}[part~="legend-item"]:nth-child(24n + 2) {--_graph-swatch: var(--helix-color-series-2);}[part~="legend-item"]:nth-child(24n + 3) {--_graph-swatch: var(--helix-color-series-3);}[part~="legend-item"]:nth-child(24n + 4) {--_graph-swatch: var(--helix-color-series-4);}[part~="legend-item"]:nth-child(24n + 5) {--_graph-swatch: var(--helix-color-series-5);}[part~="legend-item"]:nth-child(24n + 6) {--_graph-swatch: var(--helix-color-series-6);}[part~="legend-item"]:nth-child(24n + 7) {--_graph-swatch: var(--helix-color-series-7);}[part~="legend-item"]:nth-child(24n + 8) {--_graph-swatch: var(--helix-color-series-8);}[part~="legend-item"]:nth-child(24n + 9) {--_graph-swatch: var(--helix-color-series-9);}[part~="legend-item"]:nth-child(24n + 10) {--_graph-swatch: var(--helix-color-series-10);}[part~="legend-item"]:nth-child(24n + 11) {--_graph-swatch: var(--helix-color-series-11);}[part~="legend-item"]:nth-child(24n + 12) {--_graph-swatch: var(--helix-color-series-12);}[part~="legend-item"]:nth-child(24n + 13) {--_graph-swatch: var(--helix-color-series-13);}[part~="legend-item"]:nth-child(24n + 14) {--_graph-swatch: var(--helix-color-series-14);}[part~="legend-item"]:nth-child(24n + 15) {--_graph-swatch: var(--helix-color-series-15);}[part~="legend-item"]:nth-child(24n + 16) {--_graph-swatch: var(--helix-color-series-16);}[part~="legend-item"]:nth-child(24n + 17) {--_graph-swatch: var(--helix-color-series-17);}[part~="legend-item"]:nth-child(24n + 18) {--_graph-swatch: var(--helix-color-series-18);}[part~="legend-item"]:nth-child(24n + 19) {--_graph-swatch: var(--helix-color-series-19);}[part~="legend-item"]:nth-child(24n + 20) {--_graph-swatch: var(--helix-color-series-20);}[part~="legend-item"]:nth-child(24n + 21) {--_graph-swatch: var(--helix-color-series-21);}[part~="legend-item"]:nth-child(24n + 22) {--_graph-swatch: var(--helix-color-series-22);}[part~="legend-item"]:nth-child(24n + 23) {--_graph-swatch: var(--helix-color-series-23);}[part~="legend-item"]:nth-child(24n + 24) {--_graph-swatch: var(--helix-color-series-24);}[part~="legend-item"][data-tone="accent"] {--_graph-swatch: var(--helix-color-accent);}[part~="legend-item"][data-tone="danger"] {--_graph-swatch: var(--helix-color-danger);}[part~="legend-item"][data-tone="info"] {--_graph-swatch: var(--helix-color-info);}[part~="legend-item"][data-tone="neutral"] {--_graph-swatch: var(--helix-color-foreground-muted);}[part~="legend-item"][data-tone="primary"] {--_graph-swatch: var(--helix-color-primary);}[part~="legend-item"][data-tone="success"] {--_graph-swatch: var(--helix-color-success);}[part~="legend-item"][data-tone="warning"] {--_graph-swatch: var(--helix-color-warning);}[part="legend-swatch"] {block-size: var(--helix-space-xs);border: var(--helix-border-thin) solid var(--_graph-swatch, var(--helix-color-foreground-muted));border-radius: var(--helix-radii-full);box-sizing: border-box;background-color: var(--_graph-swatch, var(--helix-color-foreground-muted));flex: 0 0 auto;inline-size: var(--helix-space-xs);}[part~="legend-item-hidden"] {color: var(--helix-color-foreground-subtle);}[part~="legend-item-hidden"] [part="legend-swatch"] {background-color: transparent;}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs);}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto;}[part="filter-icon"] svg,
|
|
11
|
-
slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search-field"] {appearance: none;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);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;padding-inline: var(--helix-space-2xs);}[part="search-field"]::placeholder {color: var(--helix-color-foreground-subtle);}[part="search-field"]:focus-visible {outline: none;}[part="search"]:has([part="search-field"]:focus-visible),
|
|
11
|
+
slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search-field"] {appearance: none;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));font-weight: var(--helix-weight-medium);min-inline-size: 0;padding-inline: var(--helix-space-2xs);}[part="search-field"]::placeholder {color: var(--helix-color-foreground-subtle);}[part="search-field"]:focus-visible {outline: none;}[part="search"]:has([part="search-field"]:focus-visible),
|
|
12
12
|
[part="list"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="count"] {color: var(--helix-color-foreground-muted);flex: 0 0 auto;font-size: var(--helix-text-xs);font-variant-numeric: tabular-nums;padding-inline-end: calc(var(--helix-space-xs) - var(--helix-space-2xs));}[part="empty"] {color: var(--helix-color-foreground-muted);font-size: var(--helix-text-sm);grid-area: 2 / 1;padding: var(--helix-space-sm);}[part="list"] {min-block-size: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: var(--helix-space-2xs);}[part~="note"] {align-items: center;box-sizing: border-box;cursor: pointer;display: flex;font-size: var(--graph-note-text, var(--helix-text-sm));gap: var(--helix-space-sm);min-block-size: var(--helix-size-control-tight);padding-block: var(--helix-space-2xs);padding-inline: var(--graph-note-padding-inline, var(--helix-space-xs));user-select: none;}[part~="note"]:hover,
|
|
13
13
|
[part="list"]:focus-visible [part~="note-cursor"] {--_graph-wash: var(
|
|
14
14
|
--graph-note-hover-color,
|
|
@@ -5,4 +5,4 @@ minmax(min(var(--listbox-column-min-inline-size, 8rem), 100%), 1fr)
|
|
|
5
5
|
);}[part="items"]:focus-visible {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="items"],
|
|
6
6
|
:host(:state(invalid)) [part="items"]:focus-visible {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}:host(:disabled) {opacity: 0.5;}:host(:disabled) [part="items"] {cursor: not-allowed;}[part="empty"],
|
|
7
7
|
[part="loading"] {--_collection-inset-block: var(--helix-space-xs);--_collection-inset-inline: var(--helix-space-xs);}[part="error"] {color: var(--listbox-error-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding: var(--helix-space-xs);text-align: center;}[part="filter-icon"] {align-items: center;color: var(--helix-color-foreground-subtle);display: inline-flex;flex: 0 0 auto;}[part="filter-icon"] svg,
|
|
8
|
-
slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs);}[part="search-field"] {appearance: none;flex: 1 1 auto;min-inline-size: 0;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);inline-size: 100%;padding-inline: var(--helix-space-xs);}[part="search-field"]:focus-visible {outline: none;}:host([loading]) [part="items"] {opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}`);
|
|
8
|
+
slot[name="filter-icon"]::slotted(*) {--icon-size: var(--helix-size-icon-tight);block-size: var(--helix-size-icon-tight);inline-size: var(--helix-size-icon-tight);}[part="search"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;gap: var(--helix-space-2xs);padding: var(--helix-space-2xs);padding-inline-start: var(--helix-space-xs);}[part="search-field"] {appearance: none;flex: 1 1 auto;min-inline-size: 0;background-color: transparent;block-size: var(--helix-size-control-tight);border: none;box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));font-weight: var(--helix-weight-medium);inline-size: 100%;padding-inline: var(--helix-space-xs);}[part="search-field"]:focus-visible {outline: none;}:host([loading]) [part="items"] {opacity: 0.5;}@media print {:host {print-color-adjust: exact;}}`);
|
|
@@ -5,7 +5,7 @@ var(--helix-color-surface-raised)
|
|
|
5
5
|
);border: var(--helix-border-thin) solid
|
|
6
6
|
var(--object-inspector-border-color, var(--helix-color-border));border-block-end: none;border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));display: flex;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="label"] {color: var(--helix-color-foreground-muted);font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);font-weight: var(--helix-weight-medium);}[part="frame"] {position: relative;}[part="tree"] {background-color: var(--object-inspector-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid
|
|
7
7
|
var(--object-inspector-border-color, var(--helix-color-border));border-radius: var(--object-inspector-radius, var(--helix-radii-lg));font-family: var(--helix-font-mono);line-height: var(--helix-leading-normal);padding-block: var(--helix-space-xs);}[part="search-field"] {appearance: none;background-color: var(--object-inspector-background-color, var(--helix-color-background));border: var(--helix-border-thin) solid
|
|
8
|
-
var(--object-inspector-border-color, var(--helix-color-border));border-block-end: none;border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);inline-size: 100%;margin: 0;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="search-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="header"] + [part="search-field"],
|
|
8
|
+
var(--object-inspector-border-color, var(--helix-color-border));border-block-end: none;border-start-end-radius: var(--object-inspector-radius, var(--helix-radii-lg));border-start-start-radius: var(--object-inspector-radius, var(--helix-radii-lg));box-sizing: border-box;color: var(--helix-color-foreground);font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-sm));inline-size: 100%;margin: 0;padding-block: var(--helix-space-xs);padding-inline: var(--helix-space-md);}[part="search-field"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="header"] + [part="search-field"],
|
|
9
9
|
:is([part="header"], [part="search-field"]) ~ [part="frame"] [part="tree"] {border-start-end-radius: var(--helix-radii-none);border-start-start-radius: var(--helix-radii-none);}:host([windowed]) [part="tree"] {block-size: var(--object-inspector-block-size, 24em);overflow-y: auto;overscroll-behavior: contain;}[part~="row"] {cursor: default;overflow: hidden;padding-inline-end: var(--helix-space-2xl);padding-inline-start: calc(
|
|
10
10
|
var(--object-inspector-level) *
|
|
11
11
|
var(--helix-space-lg) +
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
2
|
export const styles = createSheet(`:host {display: block;block-size: 100%;}[part="highlight"],
|
|
3
|
-
[part="source"] {border: none;color: var(--helix-color-foreground-muted);font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);inline-size: 100%;line-height: var(--helix-leading-normal);min-block-size: var(--sandbox-source-min-block-size, 12rem);padding: var(--helix-space-sm);tab-size: 2;}[part="source"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: block;resize: none;}[part="source"]:focus-visible {background-color: var(--helix-color-surface);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="field"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: grid;grid-template-rows: minmax(max-content, auto);overflow: auto;}[part="field"]:focus-within {background-color: var(--helix-color-surface);}[part="field"]:has(> [part="source"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="field"] > [part] {grid-area: 1 / 1;letter-spacing: normal;margin: 0;overflow-wrap: break-word;white-space: pre-wrap;}[part="field"] > [part="source"],
|
|
3
|
+
[part="source"] {border: none;color: var(--helix-color-foreground-muted);font-family: var(--helix-font-mono);font-size: max(var(--helix-text-field-min), var(--helix-text-xs));inline-size: 100%;line-height: var(--helix-leading-normal);min-block-size: var(--sandbox-source-min-block-size, 12rem);padding: var(--helix-space-sm);tab-size: 2;}[part="source"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: block;resize: none;}[part="source"]:focus-visible {background-color: var(--helix-color-surface);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="field"] {background-color: var(--sandbox-source-background-color, var(--helix-color-background));block-size: 100%;display: grid;grid-template-rows: minmax(max-content, auto);overflow: auto;}[part="field"]:focus-within {background-color: var(--helix-color-surface);}[part="field"]:has(> [part="source"]:focus-visible) {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="field"] > [part] {grid-area: 1 / 1;letter-spacing: normal;margin: 0;overflow-wrap: break-word;white-space: pre-wrap;}[part="field"] > [part="source"],
|
|
4
4
|
[part="field"] > [part="source"]:focus-visible {-webkit-text-fill-color: transparent;align-self: stretch;background-color: transparent;block-size: auto;caret-color: var(--helix-color-foreground);color: transparent;outline: none;overflow: hidden;}[data-kind="callable"] {color: var(--sandbox-source-callable-color, var(--helix-color-syntax-callable));}[data-kind="comment"] {color: var(--sandbox-source-comment-color, var(--helix-color-syntax-comment));}[data-kind="constant"] {color: var(--sandbox-source-constant-color, var(--helix-color-syntax-constant));}[data-kind="invalid"] {color: var(--sandbox-source-invalid-color, var(--helix-color-syntax-invalid));}[data-kind="keyword"] {color: var(--sandbox-source-keyword-color, var(--helix-color-syntax-keyword));}[data-kind="name"] {color: var(--sandbox-source-name-color, var(--helix-color-syntax-name));}[data-kind="string"] {color: var(--sandbox-source-string-color, var(--helix-color-syntax-string));}[data-kind="tag"] {color: var(--sandbox-source-tag-color, var(--helix-color-syntax-tag));}`);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
2
|
export const styles = createSheet(`:host {block-size: var(--sandbox-terminal-size, 100%);display: grid;grid-template-rows: minmax(0, 1fr);min-block-size: 0;}:host([controls]) {grid-template-rows: auto minmax(0, 1fr);}[part="controls"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);display: flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-xs);gap: var(--helix-space-xs);justify-content: space-between;padding: var(--helix-space-2xs) var(--helix-space-sm);}[part="filter"],
|
|
3
|
-
[part="clear"] {background-color: transparent;border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);font: inherit;padding: var(--helix-space-2xs) var(--helix-space-xs);}[part="clear"] {cursor: pointer;}[part="clear"]:hover {background-color: var(--helix-color-surface-sunken);}[part="filter"]:focus-visible,
|
|
3
|
+
[part="clear"] {background-color: transparent;border: var(--helix-border-thin) solid var(--helix-color-border);border-radius: var(--helix-radii-sm);color: var(--helix-color-foreground);font: inherit;padding: var(--helix-space-2xs) var(--helix-space-xs);}[part="filter"] {font-size: max(var(--helix-text-field-min), var(--helix-text-xs));}[part="clear"] {cursor: pointer;}[part="clear"]:hover {background-color: var(--helix-color-surface-sunken);}[part="filter"]:focus-visible,
|
|
4
4
|
[part="clear"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="log"] {font-family: var(--helix-font-mono);font-size: var(--helix-text-xs);line-height: var(--helix-leading-normal);overflow: auto;padding: var(--helix-space-xs) var(--helix-space-sm);}[part="log"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="empty"] {color: var(--helix-color-foreground-subtle);margin: var(--helix-space-none);}[part="entry"] {align-items: baseline;color: var(--helix-color-foreground-muted);display: grid;gap: var(--helix-space-xs);grid-template-columns: 3.5rem minmax(0, 1fr) auto;padding-block: var(--helix-space-2xs);}[part="level"] {color: var(--helix-color-foreground-subtle);text-transform: uppercase;}[part="message"] {white-space: pre-wrap;word-break: break-word;}[part="count"] {background-color: var(--helix-color-surface-sunken);border-radius: var(--helix-radii-full);color: var(--helix-color-foreground-subtle);padding-inline: var(--helix-space-2xs);}[data-level="warn"],
|
|
5
5
|
[data-level="warn"] [part="level"] {color: var(--helix-color-warning);}[data-level="error"],
|
|
6
6
|
[data-level="error"] [part="level"] {color: var(--helix-color-danger);}`);
|
|
@@ -3,4 +3,4 @@ export const styles = createSheet(`:host {display: flex;flex-direction: column;g
|
|
|
3
3
|
:host(:focus-within) [part="field"]:hover {border-color: var(--helix-color-primary);outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: 0;}:host(:state(invalid)) [part="field"],
|
|
4
4
|
:host(:state(invalid)) [part="field"]:hover,
|
|
5
5
|
:host(:state(invalid):focus-within) [part="field"],
|
|
6
|
-
:host(:state(invalid):focus-within) [part="field"]:hover {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="control"] {all: unset;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-md);font-weight: var(--helix-weight-medium);min-inline-size: 0;}`);
|
|
6
|
+
:host(:state(invalid):focus-within) [part="field"]:hover {border-color: var(--helix-color-danger);outline-color: var(--helix-color-danger);}[part="control"] {all: unset;box-sizing: border-box;color: var(--helix-color-foreground);flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-md));font-weight: var(--helix-weight-medium);min-inline-size: 0;}`);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
|
-
export const styles = createSheet(`[part="segments"] {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: var(--helix-text-md);font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);min-inline-size: 0;white-space: nowrap;}[part~="segment"] {border-radius: var(--helix-radii-sm);caret-color: transparent;outline: none;padding-inline: calc(var(--helix-space-2xs) / 2);}[part~="segment"]:focus {background-color: var(--_segment-focus-background-color, var(--helix-color-primary));color: var(--_segment-focus-color, var(--helix-color-foreground-on-primary));}[part~="segment-placeholder"] {color: var(--_segment-placeholder-color, var(--helix-color-foreground-subtle));}[part~="literal"] {color: var(--_segment-literal-color, var(--helix-color-foreground-muted));white-space: pre;}:host(:disabled) [part="segments"] {color: var(--helix-color-foreground-subtle);cursor: not-allowed;}`);
|
|
2
|
+
export const styles = createSheet(`[part="segments"] {align-items: center;color: var(--helix-color-foreground);display: flex;flex: 1 1 auto;font-family: var(--helix-font-sans);font-size: max(var(--helix-text-field-min), var(--helix-text-md));font-variant-numeric: tabular-nums;font-weight: var(--helix-weight-medium);min-inline-size: 0;white-space: nowrap;}[part~="segment"] {border-radius: var(--helix-radii-sm);caret-color: transparent;outline: none;padding-inline: calc(var(--helix-space-2xs) / 2);}[part~="segment"]:focus {background-color: var(--_segment-focus-background-color, var(--helix-color-primary));color: var(--_segment-focus-color, var(--helix-color-foreground-on-primary));}[part~="segment-placeholder"] {color: var(--_segment-placeholder-color, var(--helix-color-foreground-subtle));}[part~="literal"] {color: var(--_segment-literal-color, var(--helix-color-foreground-muted));white-space: pre;}:host(:disabled) [part="segments"] {color: var(--helix-color-foreground-subtle);cursor: not-allowed;}`);
|
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
2
|
export const styles = createSheet(`:host {display: block;overflow-x: auto;}[part="table"] {display: grid;grid-template-columns: var(--table-columns, var(--table-template, minmax(0, 1fr)));inline-size: 100%;}[part="head"] {display: contents;}::slotted([slot="heading"]) {color: var(--table-title-color, var(--helix-color-foreground));display: block;font-family: var(--helix-font-sans);font-size: var(--table-title-text, var(--helix-text-md));font-weight: var(--helix-weight-semibold);margin-block: var(--helix-space-none) var(--table-title-gap, var(--helix-space-sm));}[part="select-all"] {align-items: center;border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;display: flex;min-block-size: var(--helix-size-control-loose);padding-inline: var(--helix-space-none) var(--helix-space-md);}[part="grip-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose);}[part="expand-head"] {border-block-end: var(--helix-border-thin) solid var(--helix-color-border);box-sizing: border-box;min-block-size: var(--helix-size-control-loose);}[part="expand-head"]:focus-visible,
|
|
3
3
|
[part="grip-head"]:focus-visible,
|
|
4
|
-
[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="error"] {color: var(--table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center;}:host([
|
|
4
|
+
[part="select-all"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: calc(var(--helix-size-focus-offset) * -1);}[part="error"] {color: var(--table-error-color, var(--helix-color-foreground));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-none);padding-block: var(--helix-space-md);padding-inline: var(--helix-space-sm);text-align: center;}:host([windowed]) [part="table"] {align-content: start;block-size: var(--table-block-size, 24em);overflow-y: auto;overscroll-behavior: contain;}:host([windowed]) ::slotted(helix-table-column) {--_table-heading-background-color: var(
|
|
5
|
+
--table-heading-background-color,
|
|
6
|
+
var(--helix-color-background)
|
|
7
|
+
);--_table-heading-layer: var(--helix-layer-sticky);--_table-heading-position: sticky;}:host([windowed]) [part="expand-head"],
|
|
8
|
+
:host([windowed]) [part="grip-head"],
|
|
9
|
+
:host([windowed]) [part="select-all"] {background-color: var(--table-heading-background-color, var(--helix-color-background));inset-block-start: 0;position: sticky;z-index: var(--helix-layer-sticky);}[part="after"],
|
|
10
|
+
[part="before"] {grid-column: 1 / -1;}:host([loading]) [part="table"] {opacity: 0.5;}[part="drag-preview"] {background-color: var(--table-drag-preview-background-color, var(--helix-color-surface-raised));border: var(--table-drag-preview-border-width, var(--helix-border-floating)) solid
|
|
5
11
|
var(--table-drag-preview-border-color, var(--helix-color-border));border-radius: var(--table-drag-preview-radius, var(--helix-radii-sm));box-shadow: var(--table-drag-preview-shadow, var(--helix-shadow-floating));opacity: var(--table-drag-preview-opacity, 0.9);}@media print {:host {print-color-adjust: economy;}}`);
|
|
@@ -19,10 +19,13 @@ import '../../checkbox/index.js';
|
|
|
19
19
|
* @slot heading - Words that name the table, shown above it in the weight of a heading.
|
|
20
20
|
* @slot loading - Content shown while the rows load, such as a spinner. Falls back to `loading-text`, which the live region still says.
|
|
21
21
|
*
|
|
22
|
+
* @csspart after - The space that stands in for the rows below the window. Only while `windowed`.
|
|
23
|
+
* @csspart before - The space that stands in for the rows above the window. Only while `windowed`.
|
|
22
24
|
* @csspart drag-preview - A copy of the row a pointer drags by its grip, which follows the pointer in the top layer until the row is let go, in a `reorderable` table. Hidden from assistive technology.
|
|
23
25
|
* @csspart live - A live region that repeats the empty and loading text, and says each step of a move, so screen readers announce it when it changes. Visually hidden in the styled tier.
|
|
24
26
|
* @csspart table - The grid.
|
|
25
27
|
*
|
|
28
|
+
* @cssproperty --table-block-size - How tall the table's box is while `windowed`, when it scrolls its rows. 24em by default.
|
|
26
29
|
* @cssproperty --table-columns - Track list for the columns. It overrides the track list worked out from the columns.
|
|
27
30
|
* @cssproperty --table-drag-preview-background-color - The fill behind the copy of a row a pointer drags.
|
|
28
31
|
* @cssproperty --table-drag-preview-border-color - The color of the edge around the copy of a row a pointer drags.
|
|
@@ -31,6 +34,7 @@ import '../../checkbox/index.js';
|
|
|
31
34
|
* @cssproperty --table-drag-preview-radius - The corner radius of the copy of a row a pointer drags.
|
|
32
35
|
* @cssproperty --table-drag-preview-shadow - The shadow that raises the copy of a row a pointer drags over the page.
|
|
33
36
|
* @cssproperty --table-error-color - The color of the words in the line shown while `error-text` is set.
|
|
37
|
+
* @cssproperty --table-heading-background-color - The fill behind the headings while `windowed`, which the rows scroll under. The page's background by default.
|
|
34
38
|
* @cssproperty --table-title-color - The color of the words in the `heading` slot.
|
|
35
39
|
* @cssproperty --table-title-gap - The space between the `heading` slot and the grid.
|
|
36
40
|
* @cssproperty --table-title-text - The font size of the words in the `heading` slot.
|
|
@@ -20,4 +20,4 @@ var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(
|
|
|
20
20
|
:host([invalid]) [part="columns"][data-unset],
|
|
21
21
|
:host(:state(invalid)) [part="list"][data-unset],
|
|
22
22
|
:host(:state(invalid)) [part="columns"][data-unset] {border-radius: var(--helix-radii-sm);outline: var(--helix-size-focus-ring) solid
|
|
23
|
-
var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(--helix-size-focus-offset);}[part="hint"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}[part="feedback"] {color: var(--time-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}@media print {:host {print-color-adjust: exact;}}`);
|
|
23
|
+
var(--time-picker-invalid-color, var(--helix-color-danger));outline-offset: var(--helix-size-focus-offset);}[part="hint"] {color: var(--helix-color-foreground-subtle);font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}[part="feedback"] {color: var(--time-picker-feedback-color, var(--helix-color-danger));font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);margin: var(--helix-space-sm) var(--helix-space-none) var(--helix-space-none);}[part="now"] {all: unset;align-items: center;block-size: var(--helix-size-control-tight);border-radius: var(--helix-radii-sm);box-sizing: border-box;color: var(--time-picker-now-color, var(--helix-color-primary));cursor: pointer;display: inline-flex;font-family: var(--helix-font-sans);font-size: var(--helix-text-sm);font-weight: var(--helix-weight-medium);margin-block-start: var(--helix-space-xs);padding-inline: var(--helix-space-xs);transition: background-color var(--helix-duration-fast) var(--helix-easing-standard);}[part="now"]:not(:disabled):hover {background-color: var(--helix-color-surface-raised);}[part="now"]:focus-visible {outline: var(--helix-size-focus-ring) solid var(--helix-color-focus-ring);outline-offset: var(--helix-size-focus-offset);}[part="now"]:disabled {color: var(--helix-color-foreground-subtle);cursor: not-allowed;}@media print {:host {print-color-adjust: exact;}}`);
|
|
@@ -25,6 +25,7 @@ import '../../option/root/index.js';
|
|
|
25
25
|
* @cssproperty --time-picker-invalid-color - The ring around the chosen time, or around the times while nothing is chosen, while the picker is invalid.
|
|
26
26
|
* @cssproperty --time-picker-list-block-size - How tall the list is before it scrolls.
|
|
27
27
|
* @cssproperty --time-picker-mark-radius - The corners of the mark on a wheel's row.
|
|
28
|
+
* @cssproperty --time-picker-now-color - The ink of the button that chooses the current time, with `show-now`.
|
|
28
29
|
* @cssproperty --time-picker-range-color - Fill behind the times inside a range.
|
|
29
30
|
* @cssproperty --time-picker-row-size - Height and minimum width of one row in a wheel.
|
|
30
31
|
* @cssproperty --time-picker-selected-color - Fill on the chosen row of a wheel.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { createSheet } from '@fusion.dev/helix-core';
|
|
2
2
|
export const styles = createSheet(`:host {display: block;}[part="viewport"] {block-size: var(--virtual-list-block-size, 20em);margin-inline: calc(var(--helix-size-focus-reach) * -1);overflow-y: auto;overscroll-behavior: contain;padding-inline: var(--helix-size-focus-reach);scrollbar-color: var(--virtual-list-scrollbar-thumb-color, var(--helix-scrollbar-thumb-color))
|
|
3
|
-
var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin;}[part="viewport"]:hover {scrollbar-color: var(
|
|
3
|
+
var(--virtual-list-scrollbar-track-color, var(--helix-scrollbar-track-color));scrollbar-width: thin;}:host(:state(horizontal)) [part="viewport"] {block-size: var(--virtual-list-block-size, auto);margin-block: calc(var(--helix-size-focus-reach) * -1);margin-inline: 0;overflow-x: auto;overflow-y: hidden;padding-block: var(--helix-size-focus-reach);padding-inline: 0;}[part="viewport"]:hover {scrollbar-color: var(
|
|
4
4
|
--virtual-list-scrollbar-thumb-hover-color,
|
|
5
5
|
var(--helix-scrollbar-thumb-hover-color)
|
|
6
6
|
)
|
|
@@ -22,7 +22,7 @@ import type { CSSResultGroup } from 'lit';
|
|
|
22
22
|
* @csspart loading - The row after the last item while `loading` is set.
|
|
23
23
|
* @csspart viewport - The scrolling box.
|
|
24
24
|
*
|
|
25
|
-
* @cssproperty --virtual-list-block-size - How tall the scrolling box is.
|
|
25
|
+
* @cssproperty --virtual-list-block-size - How tall the scrolling box is. A list that runs across is as tall as its rows unless you set it.
|
|
26
26
|
* @cssproperty --virtual-list-disabled-opacity - How faint a row `disabled-keys` names is drawn.
|
|
27
27
|
* @cssproperty --virtual-list-empty-color - The color of the text in the row shown when there are no items.
|
|
28
28
|
* @cssproperty --virtual-list-empty-padding - The space around the text in the row shown when there are no items.
|