@fusion.dev/helix 0.166.0 → 0.168.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.
Files changed (30) hide show
  1. package/custom-elements.json +2583 -477
  2. package/dist/canvas/root/canvas-root.css.js +1 -1
  3. package/dist/canvas/root/canvas-root.d.ts +2 -0
  4. package/dist/canvas/root/canvas-root.js +1 -0
  5. package/dist/chat/composer/chat-composer.css.js +1 -1
  6. package/dist/color-picker/root/color-picker-root.css.js +2 -2
  7. package/dist/combobox/root/combobox-root.d.ts +1 -1
  8. package/dist/combobox/root/combobox-root.js +1 -1
  9. package/dist/command/root/command-root.css.js +1 -1
  10. package/dist/element-events.generated.js +2 -0
  11. package/dist/file-input/root/file-input-root.d.ts +1 -1
  12. package/dist/file-input/root/file-input-root.js +1 -1
  13. package/dist/graph/root/graph-root.css.js +1 -1
  14. package/dist/listbox/root/listbox-root.css.js +1 -1
  15. package/dist/object-inspector/root/object-inspector-root.css.js +1 -1
  16. package/dist/sandbox/source/sandbox-source.css.js +1 -1
  17. package/dist/sandbox/terminal/sandbox-terminal.css.js +1 -1
  18. package/dist/shared/field/field-frame.css.js +1 -1
  19. package/dist/shared/field/field-segments.css.js +1 -1
  20. package/dist/table/root/table-root.css.js +7 -1
  21. package/dist/table/root/table-root.d.ts +4 -0
  22. package/dist/time-picker/root/time-picker-root.css.js +1 -1
  23. package/dist/time-picker/root/time-picker-root.d.ts +1 -0
  24. package/dist/virtual-list/root/virtual-list-root.css.js +1 -1
  25. package/dist/virtual-list/root/virtual-list-root.d.ts +1 -1
  26. package/lint.json +1 -1
  27. package/package.json +6 -6
  28. package/types/jsx.d.ts +383 -63
  29. package/types/vue.d.ts +89 -2
  30. 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([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
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.