@unofficialbox/box-open-elements 0.25.0 → 0.27.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 (25) hide show
  1. package/README.md +13 -13
  2. package/dist/components/actions/button.js +10 -6
  3. package/dist/components/forms/code-editor.d.ts +9 -0
  4. package/dist/components/forms/code-editor.js +48 -29
  5. package/dist/components/forms/combobox.d.ts +1 -0
  6. package/dist/components/forms/combobox.js +9 -5
  7. package/dist/components/navigation/accordion.d.ts +3 -0
  8. package/dist/components/navigation/accordion.js +21 -5
  9. package/dist/components/output/code-block.d.ts +3 -0
  10. package/dist/components/output/code-block.js +12 -2
  11. package/dist/components/overlays/command-palette.js +4 -0
  12. package/dist/core/index.d.ts +1 -1
  13. package/dist/core/index.js +1 -1
  14. package/dist/patterns/call-console/call-console.js +1 -1
  15. package/dist/patterns/flow-builder/primitives.d.ts +1 -0
  16. package/dist/patterns/flow-builder/primitives.js +10 -3
  17. package/dist/patterns/process-modeler/design.d.ts +2 -0
  18. package/dist/patterns/process-modeler/design.js +288 -0
  19. package/dist/patterns/process-modeler/geometry.d.ts +2 -0
  20. package/dist/patterns/process-modeler/geometry.js +30 -7
  21. package/dist/patterns/process-modeler/model.d.ts +67 -2
  22. package/dist/patterns/process-modeler/model.js +2 -2
  23. package/dist/patterns/process-modeler/process-modeler.d.ts +68 -4
  24. package/dist/patterns/process-modeler/process-modeler.js +1257 -167
  25. package/package.json +1 -1
package/README.md CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  Browse the full catalog on the **[live docs site](https://unofficialbox.github.io/box-open-elements)** — live previews, an events/properties inspector, per-framework code snippets (React / Angular / Vue / Svelte / HTML), and the foundations pages.
14
14
 
15
- The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/taxonomy.md) for the canonical model):
15
+ The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/taxonomy.md) for the canonical model):
16
16
 
17
17
  - **Foundations** — design decisions as data: tokens, color, typography, iconography, accessibility, theming
18
18
  - **Components** — accessible Web Components for single controls, organized by category
@@ -77,7 +77,7 @@ selection.toggleSelection("1");
77
77
  - optimized component entrypoints: `@unofficialbox/box-open-elements/<name>`
78
78
  - patterns: `@unofficialbox/box-open-elements/patterns/<area>` and `@unofficialbox/box-open-elements/patterns/<area>/<module>`
79
79
 
80
- See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/api-guidelines.md).
80
+ See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/api-guidelines.md).
81
81
 
82
82
  ## Developing
83
83
 
@@ -91,17 +91,17 @@ bun run docs # build + serve the docs site at http://localhost:4600
91
91
 
92
92
  ## Documentation
93
93
 
94
- The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/README.md). The most important entries:
95
-
96
- - [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/taxonomy.md)
97
- - [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/architecture.md)
98
- - [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/api-guidelines.md)
99
- - [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/catalog.md)
100
- - [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/integration/frameworks.md)
101
- - [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/foundations/tokens.md)
102
- - [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/content-explorer.md)
103
- - [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/integration/box-server.md)
104
- - [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/foundations/motion.md)
94
+ The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/README.md). The most important entries:
95
+
96
+ - [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/taxonomy.md)
97
+ - [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/architecture.md)
98
+ - [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/api-guidelines.md)
99
+ - [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/patterns/catalog.md)
100
+ - [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/integration/frameworks.md)
101
+ - [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/foundations/tokens.md)
102
+ - [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/patterns/content-explorer.md)
103
+ - [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/integration/box-server.md)
104
+ - [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.27.0/docs/foundations/motion.md)
105
105
 
106
106
  ## Contributing
107
107
 
package/dist/components/actions/button.js CHANGED
@@ -2,6 +2,10 @@ import { BaseElement } from "../../core/index.js";
2
2
  import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
3
3
  import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
4
4
  const DEFAULT_TAG_NAME = "box-button";
5
+ // The status red is appropriate for accents, but white button text on it
6
+ // misses 4.5:1 in the light theme. Mix toward the theme's primary text color
7
+ // (dark in light mode, light in dark mode) without changing shared error tokens.
8
+ const dangerFill = "var(--boe-button-danger-background, color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 80%, var(--boe-token-text-text, #222222) 20%))";
5
9
  /**
6
10
  * Visual language tracks box-ui-elements `.btn` / `.btn-primary`
7
11
  * (`src/styles/common/_buttons.scss` + constants/_buttons.scss).
@@ -101,19 +105,19 @@ const buttonStyles = `
101
105
  }
102
106
 
103
107
  button[data-tone="danger"] {
104
- background: var(--boe-token-surface-status-surface-error, #ed3757);
105
- border-color: var(--boe-token-surface-status-surface-error, #ed3757);
108
+ background: ${dangerFill};
109
+ border-color: ${dangerFill};
106
110
  color: var(--boe-token-text-text-on-brand, #ffffff);
107
111
  }
108
112
 
109
113
  button[data-tone="danger"]:hover:not(:disabled) {
110
- background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 92%, white 8%);
111
- border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 92%, white 8%);
114
+ background: color-mix(in srgb, ${dangerFill} 92%, white 8%);
115
+ border-color: color-mix(in srgb, ${dangerFill} 92%, white 8%);
112
116
  }
113
117
 
114
118
  button[data-tone="danger"]:active:not(:disabled) {
115
- background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 88%, black 12%);
116
- border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 88%, black 12%);
119
+ background: color-mix(in srgb, ${dangerFill} 88%, black 12%);
120
+ border-color: color-mix(in srgb, ${dangerFill} 88%, black 12%);
117
121
  }
118
122
 
119
123
  button[data-tone="danger"]:focus-visible {
package/dist/components/forms/code-editor.d.ts CHANGED
@@ -21,6 +21,11 @@ export interface CodeSelection {
21
21
  anchor: number;
22
22
  head: number;
23
23
  }
24
+ export interface CodeLine {
25
+ number: number;
26
+ from: number;
27
+ to: number;
28
+ }
24
29
  /** Optional CodeMirror entrypoint. Import `code-editor`, not the root catalog. */
25
30
  export declare class CodeEditor extends BaseElement {
26
31
  static readonly tagName = "box-code-editor";
@@ -67,6 +72,10 @@ export declare class CodeEditor extends BaseElement {
67
72
  set completions(value: readonly CodeCompletion[]);
68
73
  get selection(): CodeSelection;
69
74
  set selection(value: CodeSelection);
75
+ /** One-based line containing a UTF-16 document offset, including before mount. */
76
+ lineAt(position: number): CodeLine;
77
+ /** Start offset of a one-based line; out-of-range lines clamp to the document. */
78
+ lineStart(number: number): number;
70
79
  revealLine(line: number, options?: {
71
80
  center?: boolean;
72
81
  }): void;
package/dist/components/forms/code-editor.js CHANGED
@@ -138,6 +138,19 @@ export class CodeEditor extends BaseElement {
138
138
  scrollIntoView: true,
139
139
  });
140
140
  }
141
+ /** One-based line containing a UTF-16 document offset, including before mount. */
142
+ lineAt(position) {
143
+ const doc = this.view?.state.doc ?? EditorState.create({ doc: this.value }).doc;
144
+ const offset = Math.max(0, Math.min(doc.length, Number.isFinite(position) ? Math.floor(position) : 0));
145
+ const { number, from, to } = doc.lineAt(offset);
146
+ return { number, from, to };
147
+ }
148
+ /** Start offset of a one-based line; out-of-range lines clamp to the document. */
149
+ lineStart(number) {
150
+ const doc = this.view?.state.doc ?? EditorState.create({ doc: this.value }).doc;
151
+ const line = Math.max(1, Math.min(doc.lines, Number.isFinite(number) ? Math.floor(number) : 1));
152
+ return doc.line(line).from;
153
+ }
141
154
  revealLine(line, options = {}) {
142
155
  if (!this.view)
143
156
  return;
@@ -169,13 +182,16 @@ export class CodeEditor extends BaseElement {
169
182
  :host{display:block;min-width:0;color:var(--boe-token-text-text,#222);font:inherit}
170
183
  :host([hidden]){display:none!important}
171
184
  [part=editor]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;overflow:hidden}
172
- .cm-editor{background:var(--boe-token-surface-surface,#fff);color:var(--boe-token-text-text,#222)}
185
+ .cm-editor{background:var(--boe-code-background,var(--boe-token-surface-surface,#fff));color:var(--boe-code-foreground,var(--boe-token-text-text,#222))}
173
186
  [part=editor]:focus-within{box-shadow:0 0 0 3px var(--boe-token-surface-surface-brand,#0061d5)}
174
187
  .cm-editor.cm-focused{outline:none}
175
- .cm-scroller{max-height:var(--boe-code-editor-height,420px);min-height:160px;overflow:auto;font-family:monospace;font-size:14px;line-height:1.6}
176
- .cm-gutters,.cm-panels,.cm-tooltip{background:var(--boe-token-surface-surface-secondary,#fbfbfb)!important;color:var(--boe-token-text-text,#222)!important;border-color:var(--boe-token-stroke-stroke,#ddd)!important}
177
- .cm-cursor{border-left-color:var(--boe-token-text-text,#222)}
178
- .cm-activeLine,.cm-activeLineGutter,.cm-selectionBackground{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent)!important}
188
+ .cm-scroller{max-height:var(--boe-code-editor-height,420px);min-height:160px;overflow:auto;font-family:var(--boe-code-font-family,monospace);font-size:var(--boe-code-font-size,14px);line-height:var(--boe-code-line-height,1.6)}
189
+ .cm-gutters,.cm-panels,.cm-tooltip{background:var(--boe-token-surface-surface-secondary,#fbfbfb)!important;color:var(--boe-code-foreground,var(--boe-token-text-text,#222))!important;border-color:var(--boe-token-stroke-stroke,#ddd)!important}
190
+ .cm-gutters{color:var(--boe-code-gutter,var(--boe-token-text-text,#222))!important;border-right:var(--boe-code-gutter-border,1px solid var(--boe-token-stroke-stroke,#ddd))!important}
191
+ .cm-cursor{border-left-color:var(--boe-code-caret,var(--boe-token-text-text,#222))}
192
+ .cm-activeLine,.cm-activeLineGutter{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent)!important}
193
+ .cm-activeLineGutter{color:var(--boe-code-gutter-active,var(--boe-code-gutter,var(--boe-token-text-text,#222)))!important}
194
+ .cm-selectionBackground,.cm-content ::selection{background:var(--boe-code-selection,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent))!important}
179
195
  .boe-code-highlight{background:var(--boe-code-highlight-background,color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 10%,transparent))!important;box-shadow:inset 3px 0 var(--boe-token-surface-surface-brand,#0061d5)}
180
196
  .cm-matchingBracket,.cm-selectionMatch{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 15%,transparent)!important;color:inherit!important}
181
197
  .cm-nonmatchingBracket{color:var(--boe-token-text-status-text-error,#b92340)!important}
@@ -284,42 +300,45 @@ export class CodeEditor extends BaseElement {
284
300
  this.highlightsConfig.of(this.highlightExtension()),
285
301
  syntaxHighlighting(HighlightStyle.define([
286
302
  {
287
- tag: [
288
- tags.variableName,
289
- tags.definition(tags.variableName),
290
- tags.propertyName,
291
- tags.operator,
292
- tags.punctuation,
293
- ],
294
- color: "var(--boe-token-text-text,#222)",
303
+ tag: tags.controlKeyword,
304
+ color: "var(--boe-code-control,var(--boe-code-keyword,var(--boe-token-surface-surface-brand,#0061d5)))",
295
305
  },
296
306
  {
297
- tag: tags.keyword,
298
- color: "var(--boe-token-surface-surface-brand,#0061d5)",
307
+ tag: [tags.keyword, tags.moduleKeyword, tags.definitionKeyword, tags.operatorKeyword],
308
+ color: "var(--boe-code-keyword,var(--boe-token-surface-surface-brand,#0061d5))",
299
309
  },
300
310
  {
301
- tag: [
302
- tags.typeName,
303
- tags.className,
304
- tags.function(tags.variableName),
305
- ],
306
- color: "var(--boe-token-surface-surface-brand,#0061d5)",
311
+ tag: [tags.function(tags.variableName), tags.function(tags.propertyName)],
312
+ color: "var(--boe-code-function,var(--boe-token-surface-surface-brand,#0061d5))",
307
313
  },
308
314
  {
309
- tag: tags.string,
310
- color: "var(--boe-token-text-status-text-success,#138a58)",
315
+ tag: [tags.typeName, tags.className, tags.namespace],
316
+ color: "var(--boe-code-type,var(--boe-token-surface-surface-brand,#0061d5))",
311
317
  },
312
318
  {
313
- tag: tags.comment,
314
- color: "var(--boe-token-text-text-secondary,#666)",
319
+ tag: tags.propertyName,
320
+ color: "var(--boe-code-property,var(--boe-token-text-text,#222))",
321
+ },
322
+ {
323
+ tag: [tags.variableName, tags.definition(tags.variableName)],
324
+ color: "var(--boe-code-variable,var(--boe-token-text-text,#222))",
315
325
  },
316
326
  {
317
- tag: tags.number,
318
- color: "var(--boe-token-text-status-text-warning,#9a6500)",
327
+ tag: [tags.string, tags.special(tags.string)],
328
+ color: "var(--boe-code-string,var(--boe-token-text-status-text-success,#138a58))",
329
+ },
330
+ {
331
+ tag: [tags.number, tags.bool, tags.null, tags.atom],
332
+ color: "var(--boe-code-number,var(--boe-token-text-status-text-warning,#9a6500))",
333
+ },
334
+ {
335
+ tag: tags.comment,
336
+ color: "var(--boe-code-comment,var(--boe-token-text-text-secondary,#666))",
337
+ fontStyle: "var(--boe-code-comment-style,normal)",
319
338
  },
320
339
  {
321
- tag: [tags.bool, tags.null, tags.atom],
322
- color: "var(--boe-token-text-status-text-warning,#9a6500)",
340
+ tag: [tags.punctuation, tags.bracket, tags.operator, tags.separator],
341
+ color: "var(--boe-code-punctuation,var(--boe-token-text-text,#222))",
323
342
  },
324
343
  ])),
325
344
  EditorView.updateListener.of((update) => {
package/dist/components/forms/combobox.d.ts CHANGED
@@ -20,6 +20,7 @@ export declare class Combobox extends FormAssociatedElement {
20
20
  private listboxId;
21
21
  private inputEl;
22
22
  private labelEl;
23
+ private descriptionEl;
23
24
  private controlEl;
24
25
  private listboxEl;
25
26
  private errorEl;
package/dist/components/forms/combobox.js CHANGED
@@ -1,4 +1,4 @@
1
- import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
1
+ import { FormAssociatedElement, FORM_LABEL_ID, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
2
2
  import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
3
3
  import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
4
4
  import { boeControl, boeOverlay, boeRadius } from "../../foundations/geometry/index.js";
@@ -137,12 +137,13 @@ const comboboxStyles = `
137
137
  }
138
138
 
139
139
  ${boeFormFieldErrorStyles}
140
+ ${boeFormFieldSupportStyles}
140
141
  `;
141
142
  export class Combobox extends FormAssociatedElement {
142
143
  static tagName = DEFAULT_TAG_NAME;
143
144
  static get observedAttributes() {
144
145
  return [
145
- ...FormAssociatedElement.formObservedAttributes,
146
+ ...FormAssociatedElement.fieldObservedAttributes,
146
147
  "disabled",
147
148
  "label",
148
149
  "options",
@@ -159,6 +160,7 @@ export class Combobox extends FormAssociatedElement {
159
160
  listboxId = `box-combobox-list-${Math.random().toString(36).slice(2, 10)}`;
160
161
  inputEl;
161
162
  labelEl;
163
+ descriptionEl;
162
164
  controlEl;
163
165
  listboxEl;
164
166
  errorEl;
@@ -372,7 +374,7 @@ export class Combobox extends FormAssociatedElement {
372
374
  this.shadowRoot.innerHTML = `
373
375
  <style>${comboboxStyles}</style>
374
376
  <div part="field">
375
- <span part="label" id="${this.listboxId}-label"></span>
377
+ <span part="label" id="${FORM_LABEL_ID}"></span>
376
378
  <div part="control">
377
379
  <input
378
380
  type="text"
@@ -384,11 +386,13 @@ export class Combobox extends FormAssociatedElement {
384
386
  aria-controls="${this.listboxId}"
385
387
  />
386
388
  </div>
387
- <ul part="listbox" id="${this.listboxId}" role="listbox" aria-labelledby="${this.listboxId}-label" hidden></ul>
389
+ ${formDescriptionMarkup()}
390
+ <ul part="listbox" id="${this.listboxId}" role="listbox" aria-labelledby="${FORM_LABEL_ID}" hidden></ul>
388
391
  ${formErrorMessageMarkup()}
389
392
  </div>
390
393
  `;
391
394
  this.labelEl = this.shadowRoot.querySelector('[part="label"]');
395
+ this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
392
396
  this.inputEl = this.shadowRoot.querySelector('[part="input"]');
393
397
  this.controlEl = this.shadowRoot.querySelector('[part="control"]');
394
398
  this.listboxEl = this.shadowRoot.querySelector('[part="listbox"]');
@@ -511,7 +515,7 @@ export class Combobox extends FormAssociatedElement {
511
515
  }
512
516
  this.labelEl.textContent = this.label;
513
517
  this.inputEl.placeholder = this.placeholder;
514
- this.inputEl.setAttribute("aria-label", this.label);
518
+ this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
515
519
  if (this.shadowRoot?.activeElement !== this.inputEl && this.filterText == null) {
516
520
  this.inputEl.value = this.getDisplayValue();
517
521
  }
package/dist/components/navigation/accordion.d.ts CHANGED
@@ -11,6 +11,9 @@ export declare class Accordion extends BaseElement {
11
11
  /** Flat variant with no outer card border/background. */
12
12
  get borderless(): boolean;
13
13
  set borderless(value: boolean);
14
+ /** Omit region landmarks when many accordions or panels share a label. */
15
+ get plainPanels(): boolean;
16
+ set plainPanels(value: boolean);
14
17
  private valueInternal;
15
18
  private valuesInternal;
16
19
  get multiple(): boolean;
package/dist/components/navigation/accordion.js CHANGED
@@ -107,7 +107,7 @@ const accordionStyles = `
107
107
  export class Accordion extends BaseElement {
108
108
  static tagName = DEFAULT_TAG_NAME;
109
109
  static get observedAttributes() {
110
- return ["items", "label", "value", "values", "multiple", "borderless"];
110
+ return ["items", "label", "value", "values", "multiple", "borderless", "plain-panels"];
111
111
  }
112
112
  /** Flat variant with no outer card border/background. */
113
113
  get borderless() {
@@ -116,6 +116,9 @@ export class Accordion extends BaseElement {
116
116
  set borderless(value) {
117
117
  this.toggleAttribute("borderless", Boolean(value));
118
118
  }
119
+ /** Omit region landmarks when many accordions or panels share a label. */
120
+ get plainPanels() { return this.hasAttribute("plain-panels"); }
121
+ set plainPanels(value) { this.toggleAttribute("plain-panels", Boolean(value)); }
119
122
  valueInternal = "";
120
123
  valuesInternal = [];
121
124
  get multiple() { return this.hasAttribute("multiple"); }
@@ -196,8 +199,7 @@ export class Accordion extends BaseElement {
196
199
  <div
197
200
  part="panel"
198
201
  id="${panelId}"
199
- role="region"
200
- aria-labelledby="${triggerId}"
202
+ ${this.plainPanels ? "" : `role="region" aria-labelledby="${triggerId}"`}
201
203
  ${isOpen ? "" : "hidden"}
202
204
  ><slot name="panel-${escapeHtml(item.value)}">${escapeHtml(item.content ?? "")}</slot></div>
203
205
  </section>
@@ -261,8 +263,14 @@ export class Accordion extends BaseElement {
261
263
  this.valueInternal = items[0].value;
262
264
  this.setAttribute("value", this.valueInternal);
263
265
  }
264
- this.accordionEl.setAttribute("role", "region");
265
- this.accordionEl.setAttribute("aria-label", this.label);
266
+ if (this.plainPanels) {
267
+ this.accordionEl.removeAttribute("role");
268
+ this.accordionEl.removeAttribute("aria-label");
269
+ }
270
+ else {
271
+ this.accordionEl.setAttribute("role", "region");
272
+ this.accordionEl.setAttribute("aria-label", this.label);
273
+ }
266
274
  if (itemsJson !== this.lastItemsJson) {
267
275
  this.accordionEl.innerHTML = this.renderItemsMarkup(items);
268
276
  this.lastItemsJson = itemsJson;
@@ -284,6 +292,14 @@ export class Accordion extends BaseElement {
284
292
  }
285
293
  if (panel) {
286
294
  panel.hidden = !isOpen;
295
+ if (this.plainPanels) {
296
+ panel.removeAttribute("role");
297
+ panel.removeAttribute("aria-labelledby");
298
+ }
299
+ else {
300
+ panel.setAttribute("role", "region");
301
+ panel.setAttribute("aria-labelledby", trigger?.id ?? "");
302
+ }
287
303
  }
288
304
  });
289
305
  }
package/dist/components/output/code-block.d.ts CHANGED
@@ -40,6 +40,9 @@ export declare class CodeBlock extends BaseElement {
40
40
  /** Accessible name for the copy button. */
41
41
  get copyLabel(): string;
42
42
  set copyLabel(value: string);
43
+ /** Accessible name for the scrollable code region. */
44
+ get label(): string;
45
+ set label(value: string);
43
46
  private copy;
44
47
  private markCopied;
45
48
  disconnectedCallback(): void;
package/dist/components/output/code-block.js CHANGED
@@ -116,7 +116,7 @@ const codeStyles = `
116
116
  export class CodeBlock extends BaseElement {
117
117
  static tagName = DEFAULT_TAG_NAME;
118
118
  static get observedAttributes() {
119
- return ["code", "copy-label", "language"];
119
+ return ["code", "copy-label", "language", "label"];
120
120
  }
121
121
  preEl;
122
122
  codeEl;
@@ -147,6 +147,16 @@ export class CodeBlock extends BaseElement {
147
147
  set copyLabel(value) {
148
148
  this.setAttribute("copy-label", value);
149
149
  }
150
+ /** Accessible name for the scrollable code region. */
151
+ get label() {
152
+ return this.getAttribute("label") ?? "";
153
+ }
154
+ set label(value) {
155
+ if (value)
156
+ this.setAttribute("label", value);
157
+ else
158
+ this.removeAttribute("label");
159
+ }
150
160
  async copy() {
151
161
  const text = this.code || this.textContent?.trim() || "";
152
162
  if (!text) {
@@ -222,7 +232,7 @@ export class CodeBlock extends BaseElement {
222
232
  this.slotEl.textContent = "";
223
233
  }
224
234
  const language = this.language;
225
- this.preEl.setAttribute("aria-label", language ? `${language} code` : "Source code");
235
+ this.preEl.setAttribute("aria-label", this.label || (language ? `${language} code` : "Source code"));
226
236
  if (language) {
227
237
  this.codeEl.setAttribute("data-language", language);
228
238
  this.codeEl.setAttribute("class", `language-${language}`);
package/dist/components/overlays/command-palette.js CHANGED
@@ -170,6 +170,10 @@ const elementStyles = `
170
170
  white-space: nowrap;
171
171
  }
172
172
 
173
+ [part="option"][aria-selected="true"] [part="shortcut"] {
174
+ color: var(--boe-token-text-text, #1f1e1b);
175
+ }
176
+
173
177
  [part="empty"] {
174
178
  padding: 1.4rem 0.9rem;
175
179
  text-align: center;
package/dist/core/index.d.ts CHANGED
@@ -2,7 +2,7 @@ export { Controller } from "./controller.js";
2
2
  export { TypedEventEmitter } from "./event-emitter.js";
3
3
  export type { EventMap, Unsubscribe } from "./event-emitter.js";
4
4
  export { BaseElement } from "./element.js";
5
- export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
5
+ export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FORM_LABEL_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
6
6
  export type { FormValue } from "./form-associated.js";
7
7
  export { resolveRowWindow, sameRowWindow } from "./virtualize.js";
8
8
  export type { RowWindow, WindowMetrics } from "./virtualize.js";
package/dist/core/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export { Controller } from "./controller.js";
2
2
  export { TypedEventEmitter } from "./event-emitter.js";
3
3
  export { BaseElement } from "./element.js";
4
- export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
4
+ export { FORM_DESCRIPTION_ID, FORM_ERROR_MESSAGE_ID, FORM_LABEL_ID, FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDataFromNamedValues, formDataFromRange, formDescriptionMarkup, formErrorMessageMarkup, getMirroredFormValue, rangeFromFormValue, stringValuesFromFormValue, } from "./form-associated.js";
5
5
  export { resolveRowWindow, sameRowWindow } from "./virtualize.js";
6
6
  export { buildOffsetIndex, offsetOfItem, resolveOffsetWindow } from "./offset-window.js";
package/dist/patterns/call-console/call-console.js CHANGED
@@ -86,7 +86,7 @@ export class CallConsole extends BaseElement {
86
86
  <section part="console" aria-label="API call console">
87
87
  <header><div part="heading"><h2></h2><small>Inspect requests, responses, and tool outcomes</small></div><span id="connection" role="status"></span><box-button id="retry" label="Reconnect" tone="neutral" hidden></box-button></header>
88
88
  <div class="filters"><label class="search">Search <input id="search" type="search" placeholder="Method, URL, or summary"></label><label>Service <select id="service" aria-label="Service"><option value="">All services</option></select></label><label><input type="checkbox" id="errors"> Errors only</label><box-button id="clear" label="Clear calls" tone="neutral"></box-button></div>
89
- <box-split-view resizable ratio="0.42" label="Calls and request inspector"><section slot="primary" aria-label="Calls"><div class="pane-heading"><h3>Requests</h3><span id="count" class="muted" role="status"></span></div><div id="list"></div><p id="list-empty" role="status" hidden></p></section><section aria-label="Request inspector"><div class="pane-heading"><h3>Inspector</h3><box-button data-copy="both" label="Copy both" tone="neutral"></box-button><span id="copy-status" role="status"></span></div><p id="detail-empty">Select a request to inspect its details.</p><div id="inspector" hidden><h3 id="summary"></h3><p id="metadata" class="muted"></p><p id="outcome" role="status" hidden></p><h3 class="code-heading">Request</h3><box-code-block id="request" copy-label="Copy request" wrap></box-code-block><h3 class="code-heading">Response</h3><box-code-block id="response" copy-label="Copy response" wrap></box-code-block></div></section></box-split-view></section>`;
89
+ <box-split-view resizable ratio="0.42" label="Calls and request inspector"><section slot="primary" aria-label="Calls"><div class="pane-heading"><h3>Requests</h3><span id="count" class="muted" role="status"></span></div><div id="list"></div><p id="list-empty" role="status" hidden></p></section><section aria-label="Request inspector"><div class="pane-heading"><h3>Inspector</h3><box-button data-copy="both" label="Copy both" tone="neutral"></box-button><span id="copy-status" role="status"></span></div><p id="detail-empty">Select a request to inspect its details.</p><div id="inspector" hidden><h3 id="summary"></h3><p id="metadata" class="muted"></p><p id="outcome" role="status" hidden></p><h3 class="code-heading">Request</h3><box-code-block id="request" label="Request" copy-label="Copy request" wrap></box-code-block><h3 class="code-heading">Response</h3><box-code-block id="response" label="Response" copy-label="Copy response" wrap></box-code-block></div></section></box-split-view></section>`;
90
90
  }
91
91
  setupListeners() {
92
92
  this.shadowRoot.querySelector("#list").addEventListener("keydown", event => {
package/dist/patterns/flow-builder/primitives.d.ts CHANGED
@@ -31,6 +31,7 @@ export declare class KindPicker extends BaseElement {
31
31
  static readonly tagName = "box-kind-picker";
32
32
  catalog: readonly FlowKind[];
33
33
  variant: "inline" | "menu";
34
+ searchable: boolean;
34
35
  protected renderTemplate(): void;
35
36
  protected setupListeners(): void;
36
37
  refresh(): void;
package/dist/patterns/flow-builder/primitives.js CHANGED
@@ -67,8 +67,10 @@ export class KindPicker extends BaseElement {
67
67
  static tagName = "box-kind-picker";
68
68
  catalog = [];
69
69
  variant = "inline";
70
- renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=choices]{display:grid;gap:8px} button{text-align:start;padding:10px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;background:var(--boe-token-surface-surface,#fff)} button.has-icon{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start} [part=choice-icon]{grid-row:1/span 2;width:20px;height:20px;color:var(--boe-token-surface-surface-brand,#0061d5)} [part=choice-icon][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [part=choice-icon] svg{display:block;width:20px;height:20px} [part=choice-label]{display:block} small{display:block;color:var(--boe-token-text-text-secondary,#666)} h3{font:inherit;font-weight:650;margin:12px 0 4px}</style><div part="choices"></div>`; }
70
+ searchable = false;
71
+ renderTemplate() { this.shadowRoot.innerHTML = `<style>${styles} [part=search]{width:100%;min-height:36px;margin-bottom:8px;padding:8px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;background:var(--boe-token-surface-surface,#fff);font:inherit;color:inherit} [part=choices]{display:grid;gap:8px} button{text-align:start;padding:10px;border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;background:var(--boe-token-surface-surface,#fff)} button.has-icon{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:10px;align-items:start} [part=choice-icon]{grid-row:1/span 2;width:20px;height:20px;color:var(--boe-token-surface-surface-brand,#0061d5)} [part=choice-icon][data-tone=neutral]{color:var(--boe-token-text-text-secondary,#666)} [part=choice-icon] svg{display:block;width:20px;height:20px} [part=choice-label]{display:block} small{display:block;color:var(--boe-token-text-text-secondary,#666)} h3{font:inherit;font-weight:650;margin:12px 0 4px}</style><input part="search" type="search" aria-label="Find a building block" placeholder="Find a building block"><div part="choices"></div>`; }
71
72
  setupListeners() {
73
+ this.shadowRoot.querySelector('[part=search]').addEventListener('input', () => this.update());
72
74
  this.shadowRoot.addEventListener("keydown", event => {
73
75
  const e = event;
74
76
  if (this.variant !== "menu")
@@ -78,6 +80,8 @@ export class KindPicker extends BaseElement {
78
80
  emit(this, "picker-cancel", {});
79
81
  return;
80
82
  }
83
+ if (e.target === this.shadowRoot.querySelector('[part=search]') && e.key !== "ArrowDown")
84
+ return;
81
85
  const buttons = Array.from(this.shadowRoot.querySelectorAll("button"));
82
86
  if (!buttons.length)
83
87
  return;
@@ -92,14 +96,17 @@ export class KindPicker extends BaseElement {
92
96
  }
93
97
  refresh() { if (this.isRendered)
94
98
  this.update(); }
95
- focus(options) { this.shadowRoot?.querySelector("button")?.focus(options); }
99
+ focus(options) { (this.searchable ? this.shadowRoot?.querySelector('[part=search]') : this.shadowRoot?.querySelector("button"))?.focus(options); }
96
100
  update() {
97
101
  const choices = this.shadowRoot.querySelector("[part=choices]");
102
+ const search = this.shadowRoot.querySelector('[part=search]');
103
+ search.hidden = !this.searchable;
104
+ const query = this.searchable ? search.value.trim().toLowerCase() : '';
98
105
  choices.setAttribute("role", this.variant === "menu" ? "menu" : "group");
99
106
  choices.setAttribute("aria-label", "Choose a step type");
100
107
  choices.replaceChildren();
101
108
  let group = "";
102
- this.catalog.forEach((kind, index) => {
109
+ this.catalog.filter(kind => `${kind.label} ${kind.description} ${kind.group ?? ''} ${kind.aliases?.join(' ') ?? ''}`.toLowerCase().includes(query)).forEach((kind, index) => {
103
110
  if (kind.group && group !== kind.group) {
104
111
  const heading = document.createElement("h3");
105
112
  heading.textContent = kind.group;
package/dist/patterns/process-modeler/design.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ /** Riptide Diagram anatomy expressed through public Box Open Elements tokens. */
2
+ export declare const processModelerDesign = "\n :host([hidden]), [hidden] { display: none !important; }\n *, *::before, *::after { box-sizing: border-box; }\n button, input, textarea, select { font: inherit; color: inherit; }\n button { min-height: 36px; padding: 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); cursor: pointer; }\n button:disabled { opacity: .5; cursor: default; }\n :is(button,input,textarea,select,[part=canvas],[part=minimap],[part=box],[part=frame]):focus-visible { outline: 2px solid var(--boe-token-surface-surface-brand, #0061d5); outline-offset: 2px; }\n :host {\n display: block;\n min-width: 0;\n --boe-process-box-edge: color-mix(in srgb, var(--boe-token-text-text, #141413) 55%, var(--boe-token-surface-surface, #fff));\n color: var(--boe-token-text-text, #141413);\n background: var(--boe-token-surface-surface, #fff);\n font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);\n }\n [part=sr-only], [part=status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n [part=toolbar] {\n min-height: 56px;\n margin: 0;\n padding: 8px 16px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n flex-wrap: wrap;\n border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);\n background: var(--boe-token-surface-surface, #fff);\n }\n [part=toolbar] button, [part=controls] button, [part=selection-toolbar] button {\n min-height: 30px;\n padding: 4px 10px;\n border: 1px solid transparent;\n border-radius: 8px;\n background: transparent;\n font-size: 13px;\n font-weight: 600;\n }\n [part=toolbar] svg, [part=controls] svg { width: 16px; height: 16px; display: block; }\n [part=toolbar] [data-command=undo], [part=toolbar] [data-command=redo], [part=controls] button:not([data-command=reset]) { width: 30px; height: 30px; padding: 6px; display: grid; place-items: center; }\n [part=controls] [data-command=snap][aria-pressed=true], [part=controls] [data-command=lock][aria-pressed=true] { background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=toolbar] button:hover, [part=controls] button:hover, [part=selection-toolbar] button:hover {\n background: var(--boe-token-surface-surface-hover, #f4f4f4);\n }\n [part=toolbar] [data-command=tidy] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; }\n [part=view-switch] { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 20px; }\n [part=view-switch] button { border-radius: 16px; }\n [part=view-switch] button[aria-pressed=true] { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface, #fff); }\n [part=run-toggle] { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 13px; font-weight: 600; }\n [part=run-toggle] input { accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=view-menu] { display: none; position: relative; }\n [part=view-menu] summary { list-style: none; padding: 4px 14px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; }\n [part=view-menu][open] { z-index: 20; }\n [part=view-menu-options] { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 192px; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=view-menu] button { display: block; width: 100%; text-align: start; background: transparent; }\n [part=layout] {\n display: grid;\n grid-template-columns: 248px minmax(0, 1fr) 320px;\n gap: 0;\n min-height: 0;\n height: var(--boe-process-height, 660px);\n overflow: hidden;\n }\n [part=pane-drawer] { display: contents; color: inherit; }\n [part=pane-drawer]::backdrop, [part=insert-chooser]::backdrop { background: rgb(0 0 0 / .45); }\n [part=pane-close], [data-command=palette], [data-command=details] { display: none; }\n [part=palette], [part=inspector] {\n min-width: 0;\n overflow: auto;\n padding: 12px;\n border: 0;\n border-radius: 0;\n background: var(--boe-token-surface-surface, #fff);\n }\n [part=palette] { display: flex; flex-direction: column; gap: 12px; border-right: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=skip-link] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }\n [part=skip-link]:focus-visible { position: static; width: auto; height: auto; clip-path: none; }\n [part=inspector] { border-left: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); padding: 16px 0; }\n [part=palette] label { font-size: 0; position: relative; }\n [part=search-icon] { position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; color: var(--boe-token-text-text-secondary, #6f6f6f); pointer-events: none; }\n [part=palette] input {\n width: 100%; min-width: 0;\n height: 36px;\n padding: 0 12px 0 36px;\n border: 1px solid transparent;\n border-radius: 24px;\n background: var(--boe-token-surface-surface-hover, #f4f4f4);\n font-size: 13px;\n }\n [part=palette] input:focus-visible { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: var(--boe-token-surface-surface, #fff); }\n [part=choices] { display: grid; align-content: start; gap: 4px; max-height: none; overflow: visible; }\n [part=group] { margin: 4px 4px 6px; font-size: 12px; font-weight: 650; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=choice] {\n display: grid; grid-template-columns: 20px minmax(0,1fr); gap: 0 10px;\n min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px;\n text-align: start; background: transparent; cursor: grab;\n }\n [part=choice]:hover { border-color: var(--boe-token-stroke-stroke, #e8e8e8); background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n [part=choice-icon] { grid-row: span 2; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=choice][data-tone=accent] [part=choice-icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=choice-icon] svg { width: 20px; height: 20px; }\n [part=choice-name] { font-size: 13px; font-weight: 600; line-height: 1.3; }\n [part=choice-description] { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.35; }\n [part=palette-hint] { margin: 4px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n [part=canvas] {\n position: relative; min-width: 0; height: 100%; overflow: hidden;\n border: 0; border-radius: 0;\n background-color: var(--boe-token-surface-surface-secondary, #fbfbfb);\n background-image: radial-gradient(circle, var(--boe-token-stroke-stroke-hover, #d3d3d3) 1px, transparent 1.2px);\n background-size: 12px 12px;\n touch-action: none; user-select: none; cursor: grab;\n }\n [part=canvas][data-panning] { cursor: grabbing; }\n [part=hold] { position: absolute; z-index: 12; top: 12px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 12px; border: 1px solid var(--boe-token-stroke-status-stroke-warning, #9a6b00); border-radius: 8px; background: var(--boe-token-surface-status-surface-warning, #fff7df); color: var(--boe-token-text-status-text-warning, #6b4a00); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); font-size: 12.5px; cursor: default; }\n [part=hold] button { min-height: 28px; padding: 3px 8px; border: 1px solid currentColor; border-radius: 6px; background: transparent; font-size: 12px; font-weight: 650; white-space: nowrap; }\n [part=world] { position: absolute; inset: 0; transform-origin: 0 0; }\n [part=lines] { position: absolute; inset: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 3; }\n [part=line] { stroke: var(--boe-token-text-text-secondary, #6f6f6f); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }\n [part=line][data-selected=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2; }\n [part=line][data-drop=true] { stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n [part=line-hit] { fill: none; stroke: transparent; stroke-width: 24; pointer-events: stroke; }\n [part=connection-preview] { fill: none; stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 2.5; stroke-dasharray: 6 4; }\n [part=pinned-end] { fill: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n [part=box], [part=frame] {\n position: absolute; touch-action: none; text-align: start; z-index: 4; display: grid; grid-template-columns: 20px minmax(0,1fr); align-content: center;\n gap: 2px 10px; min-width: 0; min-height: 64px; padding: 11px 12px;\n border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585));\n border-radius: 8px; background: var(--boe-token-surface-surface, #fff);\n font-size: 13px; line-height: 1.3;\n transition: border-color var(--boe-profile-motion-interactive, 200ms) ease-out,\n background var(--boe-profile-motion-interactive, 200ms) ease-out;\n }\n [part=box]:hover, [part=frame]:hover { border-color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [data-connect-target=true] { border-color: var(--boe-token-surface-surface-brand, #0061d5) !important; }\n [part=box] strong, [part=frame] strong { overflow-wrap: anywhere; }\n [part=box] strong, [part=frame] strong { font-size: 13.5px; font-weight: 650; line-height: 1.3; }\n [part=box] small, [part=frame] small { grid-column: 2; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.35; }\n [part=technical-description] { font: 12px/1.4 ui-monospace, 'SF Mono', Menlo, Consolas, monospace !important; overflow-wrap: anywhere; }\n [part=metrics] { grid-column: 2; font-size: 12px; font-variant-numeric: tabular-nums; }\n [part=metric-warning] { color: var(--boe-token-text-status-text-warning, #8a5800); }\n [part=icon] { grid-row: span 3; width: 20px; height: 20px; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=icon] svg { display: block; width: 20px; height: 20px; }\n [data-tone=accent] > [part=icon] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=box][aria-current=true], [part=frame][aria-current=true] {\n border: 1px solid var(--boe-token-surface-surface-brand, #0061d5);\n background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff));\n }\n [data-invalid=true] { border-color: var(--boe-token-text-status-text-error, #b92340) !important; }\n [part=problem] { grid-column: 1 / -1; color: var(--boe-token-text-status-text-error, #b92340); font-size: 12px; }\n [part=frame] { z-index: 1; align-content: start; border-radius: 12px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 78%, transparent); }\n [part=frame] small { grid-column: 2; }\n [part=loop-mark] { position: absolute; right: 12px; bottom: 8px; font-size: 20px; line-height: 1; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=frame-resize] { position: absolute; right: -12px; bottom: -12px; z-index: 8; width: 28px; height: 28px; min-height: 28px; padding: 0; border: 0; border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: 0 0 0 1px var(--boe-process-box-edge, #858585); cursor: nwse-resize; }\n [part=frame-resize]::before { content: ''; position: absolute; right: 7px; bottom: 7px; width: 11px; height: 11px; border-right: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); border-bottom: 2px solid var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=frame]:not([aria-current=true]) [part=frame-resize] { visibility: hidden; }\n [data-shape=gateway], [data-shape=event] { width: 56px !important; height: 56px !important; min-height: 0; padding: 0; border: 0 !important; background: transparent !important; display: block; overflow: visible; }\n [data-shape=gateway]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; rotate: 45deg; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n [data-shape=event]::before { content: ''; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border: 1.5px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [data-shape=event][data-kind=finish]::before { border-width: 4px; }\n [data-shape=event][data-kind=scheduled-start]::after { content: ''; position: absolute; left: 13px; top: 13px; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; }\n [data-shape=gateway] > [part=icon], [data-shape=event] > [part=icon] { position: absolute; left: 18px; top: 18px; z-index: 1; }\n [data-shape=gateway] > strong, [data-shape=event] > strong { position: absolute; top: 58px; left: 50%; width: 150px; translate: -50% 0; text-align: center; font-size: 12px; }\n [data-shape=gateway] > small { display: none; }\n [data-shape=event] > small { position: absolute; top: 75px; left: 50%; width: 172px; translate: -50% 0; text-align: center; font-size: 11px; line-height: 1.25; }\n [data-shape=gateway][aria-current=true]::before, [data-shape=event][aria-current=true]::before { border-color: var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #fff)); }\n [part=port] { position: absolute; z-index: 5; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; opacity: 0; }\n [part=port][data-side=north] { left: calc(50% - 12px); top: -12px; }\n [part=port][data-side=south] { left: calc(50% - 12px); bottom: -12px; }\n [part=port][data-side=east] { right: -12px; top: calc(50% - 12px); }\n [part=port][data-side=west] { left: -12px; top: calc(50% - 12px); }\n [part=port]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [part=port]:hover::before, [part=port]:focus-visible::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=port]::after { position: absolute; inset: 1px; display: none; place-items: center; color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }\n [part=port][data-side=north]::after { content: '\u2191'; }\n [part=port][data-side=east]::after { content: '\u2192'; }\n [part=port][data-side=south]::after { content: '\u2193'; }\n [part=port][data-side=west]::after { content: '\u2190'; }\n [part=port]:hover::after, [part=port]:focus-visible::after, [part=port][data-hot=true]::after { display: grid; }\n [part=port][data-hot=true] { opacity: 1; }\n [part=port][data-hot=true]::before { width: 22px; height: 22px; margin: 1px; background: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=end-grip] { position: absolute; z-index: 8; width: 24px; height: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; }\n [part=end-grip]::before { content: ''; display: block; width: 10px; height: 10px; margin: 7px; border: 1.5px solid var(--boe-token-surface-surface-brand, #0061d5); border-radius: 50%; background: var(--boe-token-surface-surface, #fff); }\n [part=box]:hover [part=port], [part=box]:focus-within [part=port], [part=box][aria-current=true] [part=port], [part=frame]:hover [part=port] { opacity: 1; }\n [part=connection] { position: absolute; z-index: 5; display: flex; align-items: center; gap: 4px; transform: translate(-50%,-50%); min-width: 0; min-height: 0; padding: 2px 6px; border-radius: 6px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 12px; font-weight: 600; white-space: nowrap; }\n [part=connection]:has(> span:empty) { padding: 0; background: transparent; min-width: 0; min-height: 0; }\n [part=connection-actions] { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; width: max-content; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); opacity: 0; pointer-events: none; }\n [part=connection]:hover [part=connection-actions], [part=connection]:focus-within [part=connection-actions] { opacity: 1; pointer-events: auto; }\n [part=connection-actions] button { min-height: 32px; padding: 4px; font-size: 12px; }\n [part=note] { width: 208px; border: 1px dashed var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 8px; }\n [part=section] { z-index: 0; border: 1px solid var(--boe-process-box-edge, var(--boe-control-edge, #858585)); border-radius: 16px; background: color-mix(in srgb, var(--boe-token-surface-surface, #fff) 45%, transparent); }\n [part=section] strong { display: block; font-size: 12.5px; font-weight: 650; line-height: 1.3; }\n [part=section] small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; line-height: 1.35; }\n [part=note], [part=section] { position: absolute; padding: 8px; pointer-events: none; }\n [part=marquee] { position: absolute; border: 2px solid var(--boe-token-surface-surface-brand, #0061d5); background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 12%, transparent); pointer-events: none; }\n [part=connect-tooltip] { position: absolute; z-index: 20; max-width: 240px; padding: 5px 8px; border-radius: 7px; background: var(--boe-token-text-text, #141413); color: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=connect-tooltip][data-invalid=true] { background: var(--boe-token-text-status-text-error, #b92340); color: #fff; }\n [part=ghost-box], [part=palette-ghost] { position: absolute; z-index: 5; display: flex; align-items: center; padding: 11px 12px; border: 1.5px dashed var(--boe-token-surface-surface-brand, #0061d5); border-radius: 8px; background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #fff)); font-size: 13px; font-weight: 650; pointer-events: none; }\n [part=guide] { position: absolute; background: var(--boe-token-surface-surface-brand, #0061d5); pointer-events: none; }\n [part=measure] { position: absolute; padding: 4px; background: var(--boe-token-surface-surface, #fff); font-size: 12px; pointer-events: none; }\n [part=insert-chooser] { max-width: calc(100vw - 32px); max-height: 65vh; overflow: auto; padding: 12px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); }\n [part=controls] { position: absolute; left: 16px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=controls] [data-command=reset] { min-width: 56px; font-variant-numeric: tabular-nums; }\n [part=minimap] { position: absolute; right: 16px; bottom: 16px; width: 208px; height: 136px; touch-action: none; background: var(--boe-token-surface-surface, #fff); border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=minimap] rect:not([data-viewport]) { fill: var(--boe-token-stroke-stroke-hover, #d3d3d3); }\n [part=minimap] [data-viewport] { fill: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 9%, transparent); stroke: var(--boe-token-surface-surface-brand, #0061d5); stroke-width: 1; }\n [part=selection-toolbar] { position: absolute; bottom: auto; z-index: 11; display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); white-space: nowrap; }\n [part=checks] { display: grid; gap: 6px; margin-top: 12px; }\n [part=checks] button { color: var(--boe-token-text-status-text-error, #b92340); }\n [part=process-heading] { display: grid; gap: 2px; padding: 0 16px 12px; }\n :host([embed-mode]) [part=process-heading], :host([embed-mode]) [part=view-switch], :host([embed-mode]) [part=run-toggle], :host([embed-mode]) [part=view-menu] { display: none; }\n [part=process-title] { font-size: 15px; line-height: 1.4; }\n [part=process-summary] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n [part=pane-tabs] { display: flex; flex-wrap: nowrap; gap: 4px; margin: 0; padding: 0 16px; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); overflow-x: auto; }\n [part=pane-tabs] button { flex: none; min-height: 40px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 13px; font-weight: 600; }\n [part=pane-tabs] button[aria-selected=true] { color: var(--boe-token-text-text, #141413); border-bottom-color: currentColor; }\n [part=editor], [part=pane-content] { padding: 8px 16px; }\n [part=editor] { display: grid; align-content: start; gap: 12px; }\n [part=inspector-kind] { display: none; }\n [part=inspector-purpose] { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; }\n [part=field] { display: grid; gap: 4px; }\n [part=field] label { display: grid; gap: 5px; font-size: 12.5px; font-weight: 650; }\n [part=field] :is(input:not([type=checkbox]),textarea,select) { width: 100%; min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); color: var(--boe-token-text-text, #141413); font-family: inherit; font-size: 13px; line-height: 1.4; }\n [part=field] textarea { min-height: 76px; resize: vertical; }\n [part=field]:has([part=action-options]) { position: relative; }\n [part=field]:has([part=action-options]) input { padding-right: 34px; }\n [part=action-caret] { position: absolute; z-index: 1; top: 25px; right: 2px; width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; font-size: 18px; }\n [part=action-options] { position: absolute; z-index: 30; top: calc(100% - 1px); left: 0; right: 0; max-height: 280px; overflow: auto; padding: 6px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 10px; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .16)); }\n [part=action-options][hidden] { display: none; }\n [part=action-options] button { display: block; width: 100%; min-height: 36px; padding: 7px 9px; border: 0; border-radius: 7px; text-align: start; background: transparent; font-size: 12.5px; }\n [part=action-options] button:hover, [part=action-options] [aria-selected=true] { background: var(--boe-token-surface-surface-hover, #f4f4f4); }\n [part=action-options] button strong { display: block; font-size: 13px; font-weight: 650; }\n [part=action-options] button small { display: block; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=action-options] [part=action-back] { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=field] input[type=checkbox] { justify-self: start; width: 18px; height: 18px; accent-color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=field] small { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.4; }\n [part=field] [part=field-problem] { color: var(--boe-token-text-status-text-error, #b92340); }\n [part=variable-chips] { display: flex; flex-wrap: wrap; gap: 4px; }\n [part=variable-chips] button { min-height: 24px; padding: 2px 8px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 12px; background: var(--boe-token-surface-surface-secondary, #fbfbfb); font-size: 11.5px; }\n [part=leads-to] { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=leads-to] h3 { margin: 0; font-size: 12.5px; }\n [part=lead-row] { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }\n [part=lead-row] button, [part=leads-to] > button, [part=inspector-actions] button { min-height: 28px; padding: 4px 8px; font-size: 12px; }\n [part=inspector-metrics] { margin: 0; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12px; font-variant-numeric: tabular-nums; }\n [part=inspector-metrics] h3 { margin: 0 0 6px; font-size: 12.5px; }\n [part=inspector-metrics] dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 0; }\n [part=inspector-metrics] dt { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=inspector-metrics] dd { margin: 0; font-weight: 650; }\n [part=inspector-actions] { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); }\n [part=arrange-actions] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; }\n [part=arrange-actions] button { min-height: 32px; padding: 5px 7px; font-size: 12px; text-align: start; }\n [part=outline-intro] { margin: 4px 0 14px; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12.5px; line-height: 1.5; }\n [part=copy-outline] { justify-self: start; min-height: 28px; margin-bottom: 8px; padding: 4px 10px; border-radius: 16px; font-size: 12px; font-weight: 650; }\n [part=outline-list] { margin: 0; padding-left: 18px; display: grid; gap: 8px; }\n [part=outline-list] [part=outline-list] { margin: 6px 0 0; gap: 6px; }\n [part=outline-list] li { padding-left: 0; font-size: 12.5px; }\n [part=outline-list] li::marker { color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=outline-list] button, [part=outline-list] strong { border: 0; border-radius: 4px; background: transparent; padding: 0; min-height: 0; font-size: 12.5px; font-weight: 650; line-height: 1.45; text-align: start; }\n [part=outline-list] button:hover { color: var(--boe-token-surface-surface-brand, #0061d5); text-decoration: underline; }\n [part=outline-list] button[aria-current=true] { color: var(--boe-token-surface-surface-brand, #0061d5); }\n [part=outline-list] p { margin: 2px 0 0; color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 12px; line-height: 1.45; }\n [part=inspector-heading] { margin: 0 0 2px; font-size: 15px; font-weight: 650; }\n [part=inspector-heading][data-single=true]:not(:focus-visible) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n [part=checks] { margin: 0; padding: 0; }\n [part=checks] button { width: 100%; border: 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 0; text-align: start; background: transparent; }\n [part=variable-row], [part=connection-row] { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); font-size: 12.5px; }\n [part=variable-row] p { margin: 0; color: var(--boe-token-text-text-secondary, #6f6f6f); }\n [part=variable-scope] { color: var(--boe-token-text-text-secondary, #6f6f6f); font-size: 11.5px; }\n [part=variable-row] label { display: grid; gap: 4px; font-weight: 650; }\n [part=variable-row] input { min-height: 36px; padding: 7px 10px; border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8); border-radius: 8px; background: var(--boe-token-surface-surface, #fff); }\n [part=help] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n :host([data-narrow]) [part=layout] { grid-template-columns: minmax(0,1fr); }\n :host([data-narrow]) [part=pane-drawer] { display: none; position: fixed; z-index: 40; margin: 0; max-width: none; max-height: none; padding: 0; overflow: auto; border: 0; border-radius: 0; background: var(--boe-token-surface-surface, #fff); box-shadow: var(--boe-shadow-overlay, 0 4px 12px rgb(0 0 0 / .24)); }\n :host([data-narrow]) [part=pane-drawer][open] { display: block; }\n :host([data-narrow]) [part=pane-close], :host([data-narrow]) [data-command=palette], :host([data-narrow]) [data-command=details] { display: inline-block; }\n :host([data-narrow]) [part=pane-close] { position: absolute; top: 12px; right: 12px; z-index: 1; min-height: 28px; padding: 4px 9px; border-radius: 14px; font-size: 12px; }\n :host([data-narrow]) [part=pane-drawer][data-pane=palette] { left: 0; top: 0; bottom: 0; width: min(320px, 86vw); }\n :host([data-narrow]) [part=pane-drawer][data-pane=inspector] { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: min(62vh, 560px); border-radius: 24px 24px 0 0; }\n :host([data-narrow]) [part=pane-drawer][data-pane=inspector]::before { content: ''; display: block; width: 36px; height: 4px; margin: 6px auto; border-radius: 2px; background: var(--boe-token-surface-surface-secondary, #e8e8e8); }\n :host([data-narrow]) [part=palette], :host([data-narrow]) [part=inspector] { height: 100%; }\n :host([data-narrow]) [part=palette] { padding-top: 54px; }\n :host([data-narrow]) [part=minimap] { display: none; }\n :host([data-narrow]) [part=toolbar] { justify-content: flex-start; }\n :host([data-narrow]) [part=view-switch], :host([data-narrow]) [part=run-toggle] { display: none; }\n :host([data-narrow]) [part=view-menu] { display: block; }\n :host([data-narrow]) [part=controls] { left: 12px; bottom: 12px; }\n :host([data-phone]) [data-command=tidy] { display: none; }\n @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; } }\n";