@unofficialbox/box-open-elements 0.26.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 (17) 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/process-modeler/design.d.ts +1 -1
  16. package/dist/patterns/process-modeler/design.js +1 -1
  17. 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.26.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.26.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.26.0/docs/README.md). The most important entries:
95
-
96
- - [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/taxonomy.md)
97
- - [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/architecture.md)
98
- - [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/api-guidelines.md)
99
- - [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/patterns/catalog.md)
100
- - [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/integration/frameworks.md)
101
- - [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/foundations/tokens.md)
102
- - [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/patterns/content-explorer.md)
103
- - [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/integration/box-server.md)
104
- - [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.26.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.26.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/process-modeler/design.d.ts CHANGED
@@ -1,2 +1,2 @@
1
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] { 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";
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";
package/dist/patterns/process-modeler/design.js CHANGED
@@ -14,7 +14,7 @@ export const processModelerDesign = `
14
14
  background: var(--boe-token-surface-surface, #fff);
15
15
  font: 14px/1.5 var(--boe-token-font-family-base, Inter, sans-serif);
16
16
  }
17
- [part=sr-only] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
17
+ [part=sr-only], [part=status] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
18
18
  [part=toolbar] {
19
19
  min-height: 56px;
20
20
  margin: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unofficialbox/box-open-elements",
3
- "version": "0.26.0",
3
+ "version": "0.27.0",
4
4
  "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
5
5
  "license": "MIT",
6
6
  "homepage": "https://unofficialbox.github.io/box-open-elements",