@unofficialbox/box-open-elements 0.23.0 → 0.24.0

package/README.md

@@ -12,7 +12,7 @@
 
 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.
 
-The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/taxonomy.md) for the canonical model):
+The library is organized around three layers (see [taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/taxonomy.md) for the canonical model):
 
 - **Foundations** — design decisions as data: tokens, color, typography, iconography, accessibility, theming
 - **Components** — accessible Web Components for single controls, organized by category
@@ -21,6 +21,8 @@ The library is organized around three layers (see [taxonomy](https://github.com/
 Core implementation principles:
 
 - plain TypeScript modules, no React requirement in the core package — zero runtime dependencies
+- Optional `code-editor` entrypoint uses CodeMirror 6; its dependencies are not
+  loaded by the root catalog or other component imports.
 - state and business logic separate from rendering: controllers and stores, not framework components
 - standard DOM events where a UI layer needs them
 - accessibility semantics and keyboard support as part of the component contract
@@ -75,7 +77,7 @@ selection.toggleSelection("1");
 - optimized component entrypoints: `@unofficialbox/box-open-elements/<name>`
 - patterns: `@unofficialbox/box-open-elements/patterns/<area>` and `@unofficialbox/box-open-elements/patterns/<area>/<module>`
 
-See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/api-guidelines.md).
+See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/api-guidelines.md).
 
 ## Developing
 
@@ -89,17 +91,17 @@ bun run docs     # build + serve the docs site at http://localhost:4600
 
 ## Documentation
 
-The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/README.md). The most important entries:
-
-- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/taxonomy.md)
-- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/architecture.md)
-- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/api-guidelines.md)
-- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/catalog.md)
-- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/integration/frameworks.md)
-- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/foundations/tokens.md)
-- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/content-explorer.md)
-- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/integration/box-server.md)
-- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.23.0/docs/foundations/motion.md)
+The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.24.0/docs/foundations/motion.md)
 
 ## Contributing
 

package/dist/components/actions/button.js

@@ -64,7 +64,7 @@ const buttonStyles = `
     outline: none;
     background: var(--boe-token-surface-surface-brand-hover, #006ae9);
     border-color: var(--boe-token-surface-surface-brand, #0061d5);
-    box-shadow: ${boeControl.primaryFocusShadow};
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-tone="neutral"] {
@@ -86,7 +86,7 @@ const buttonStyles = `
 
   button[data-tone="neutral"]:focus-visible {
     border-color: var(--boe-token-text-text, #222222);
-    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-tone="danger"] {
@@ -106,7 +106,7 @@ const buttonStyles = `
   }
 
   button[data-tone="danger"]:focus-visible {
-    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 80%), 0 1px 2px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 0 2px var(--boe-token-surface-surface, #ffffff), 0 0 0 5px var(--boe-token-surface-surface-brand, #0061d5);
   }
 
   button[data-size="small"] {

package/dist/components/actions/segmented-control.d.ts

@@ -9,6 +9,7 @@ export declare class SegmentedControl extends BaseElement {
     static get observedAttributes(): string[];
     private valueInternal;
     private controlEl;
+    private renderedOptions;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;

package/dist/components/actions/segmented-control.js

@@ -84,6 +84,7 @@ export class SegmentedControl extends BaseElement {
     }
     valueInternal = "";
     controlEl;
+    renderedOptions = "";
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -121,17 +122,17 @@ export class SegmentedControl extends BaseElement {
         }
     }
     set options(value) {
-        this.setAttribute("options", JSON.stringify(value));
+        const serialized = JSON.stringify(value);
+        if (serialized !== this.getAttribute("options"))
+            this.setAttribute("options", serialized);
     }
     get value() {
         return this.valueInternal;
     }
     set value(nextValue) {
-        this.valueInternal = nextValue;
+        if (nextValue === this.valueInternal)
+            return;
         this.setAttribute("value", nextValue);
-        if (this.isRendered) {
-            this.update();
-        }
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (name === "value") {
@@ -198,7 +199,20 @@ export class SegmentedControl extends BaseElement {
         this.controlEl.dataset.layout = this.layout;
         this.controlEl.setAttribute("aria-label", this.label);
         this.controlEl.setAttribute("aria-disabled", String(this.disabled));
-        // Rebuild segments (count may change)
+        const serialized = JSON.stringify(options);
+        if (serialized === this.renderedOptions) {
+            this.controlEl.querySelectorAll('[part="segment"]').forEach((button, index) => {
+                const selected = options[index].value === selectedValue;
+                button.dataset.layout = this.layout;
+                button.dataset.selected = String(selected);
+                button.setAttribute("aria-checked", String(selected));
+                button.tabIndex = selected ? 0 : -1;
+                button.disabled = this.disabled || Boolean(options[index].disabled);
+            });
+            return;
+        }
+        this.renderedOptions = serialized;
+        // Rebuild only when the options themselves change.
         this.controlEl.innerHTML = options
             .map((option, index) => {
             const position = options.length === 1

package/dist/components/feedback/alert.js

@@ -131,7 +131,7 @@ const alertStyles = `
     border: 0;
     border-radius: ${boeRadius.med};
     background: transparent;
-    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    color: var(--boe-token-text-text, #222222);
     font: inherit;
     font-size: 13px;
     font-weight: 700;

package/dist/components/feedback/progress-bar.js

@@ -30,8 +30,8 @@ const progressBarStyles = `
   [part="label"] {
     font-size: 0.8rem;
     font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
+    letter-spacing: normal;
+    text-transform: none;
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 

package/dist/components/forms/checkbox.js

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
@@ -86,12 +86,13 @@ const checkboxStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class Checkbox extends FormAssociatedElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "checked",
             "description",
             "disabled",
@@ -288,6 +289,7 @@ export class Checkbox extends FormAssociatedElement {
         }
         this.inputEl.setAttribute("aria-label", this.label);
         this.labelEl.textContent = this.label;
+        this.applyFieldSupport(this.labelEl, this.inputEl, null);
         const description = this.description;
         if (description) {
             this.descriptionEl.hidden = false;

package/dist/components/forms/code-editor.d.ts

@@ -0,0 +1,61 @@
+import { BaseElement } from "../../core/index.js";
+import { type Completion } from "@codemirror/autocomplete";
+export interface CodeProblem {
+    /** One-based line and column positions. */
+    line: number;
+    col?: number;
+    endCol?: number;
+    message: string;
+    tone: "error" | "warning" | "info";
+}
+export type CodeCompletion = Completion;
+export interface CodeSelection {
+    anchor: number;
+    head: number;
+}
+/** Optional CodeMirror entrypoint. Import `code-editor`, not the root catalog. */
+export declare class CodeEditor extends BaseElement {
+    static readonly tagName = "box-code-editor";
+    static get observedAttributes(): string[];
+    private valueInternal;
+    private problemsInternal;
+    private completionsInternal;
+    private view?;
+    private languageConfig;
+    private readonlyConfig;
+    private completionsConfig;
+    private timer?;
+    private pending;
+    private syncing;
+    private problemIndex;
+    private savedSelection;
+    private escapeUntil;
+    get value(): string;
+    set value(value: string);
+    get language(): string;
+    set language(value: string);
+    get readonly(): boolean;
+    set readonly(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get problems(): readonly CodeProblem[];
+    set problems(value: readonly CodeProblem[]);
+    get completions(): readonly CodeCompletion[];
+    set completions(value: readonly CodeCompletion[]);
+    get selection(): CodeSelection;
+    set selection(value: CodeSelection);
+    revealLine(line: number): void;
+    focus(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private languageExtension;
+    private completionExtension;
+    protected update(): void;
+    private flushChange;
+    private diagnostics;
+    private syncProblems;
+    navigateProblem(direction: number): void;
+}

package/dist/components/forms/code-editor.js

@@ -0,0 +1,382 @@
+import { BaseElement } from "../../core/index.js";
+import { basicSetup } from "codemirror";
+import { Compartment, EditorSelection, EditorState, Prec, } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { indentWithTab } from "@codemirror/commands";
+import { javascript } from "@codemirror/lang-javascript";
+import { go } from "@codemirror/lang-go";
+import { autocompletion, closeCompletion, startCompletion, } from "@codemirror/autocomplete";
+import { closeSearchPanel } from "@codemirror/search";
+import { lintGutter, setDiagnostics } from "@codemirror/lint";
+import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { tags } from "@lezer/highlight";
+/** Optional CodeMirror entrypoint. Import `code-editor`, not the root catalog. */
+export class CodeEditor extends BaseElement {
+    static tagName = "box-code-editor";
+    static get observedAttributes() {
+        return ["language", "readonly", "label", "value"];
+    }
+    valueInternal = "";
+    problemsInternal = [];
+    completionsInternal = [];
+    view;
+    languageConfig = new Compartment();
+    readonlyConfig = new Compartment();
+    completionsConfig = new Compartment();
+    timer;
+    pending = false;
+    syncing = false;
+    problemIndex = -1;
+    savedSelection = { anchor: 0, head: 0 };
+    escapeUntil = 0;
+    get value() {
+        return this.valueInternal;
+    }
+    set value(value) {
+        if (this.valueInternal === value)
+            return;
+        this.valueInternal = value;
+        if (this.isRendered)
+            this.update();
+    }
+    get language() {
+        return this.getAttribute("language") ?? "typescript";
+    }
+    set language(value) {
+        this.setAttribute("language", value);
+    }
+    get readonly() {
+        return this.hasAttribute("readonly");
+    }
+    set readonly(value) {
+        this.toggleAttribute("readonly", value);
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Code editor";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get problems() {
+        return this.problemsInternal;
+    }
+    set problems(value) {
+        this.problemsInternal = [...value];
+        this.problemIndex = -1;
+        this.syncProblems();
+    }
+    get completions() {
+        return this.completionsInternal;
+    }
+    set completions(value) {
+        this.completionsInternal = [...value];
+        if (this.isRendered)
+            this.update();
+    }
+    get selection() {
+        return this.view
+            ? {
+                anchor: this.view.state.selection.main.anchor,
+                head: this.view.state.selection.main.head,
+            }
+            : this.savedSelection;
+    }
+    set selection(value) {
+        const clamp = (offset) => Math.max(0, Math.min(this.value.length, Number.isFinite(offset) ? offset : 0));
+        this.savedSelection = {
+            anchor: clamp(value.anchor),
+            head: clamp(value.head),
+        };
+        this.view?.dispatch({
+            selection: EditorSelection.single(this.savedSelection.anchor, this.savedSelection.head),
+            scrollIntoView: true,
+        });
+    }
+    revealLine(line) {
+        if (!this.view)
+            return;
+        const target = this.view.state.doc.line(Math.max(1, Math.min(this.view.state.doc.lines, Math.floor(line) || 1)));
+        this.selection = { anchor: target.from, head: target.from };
+        this.view.focus();
+    }
+    focus() {
+        this.view?.focus();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "value")
+            this.valueInternal = newValue ?? "";
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        this.flushChange();
+        this.savedSelection = this.selection;
+        this.view?.destroy();
+        this.view = undefined;
+    }
+    renderTemplate() {
+        this.shadowRoot.innerHTML = `<style>
+      :host{display:block;min-width:0;color:var(--boe-token-text-text,#222);font:inherit}
+      :host([hidden]){display:none!important}
+      [part=editor]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;overflow:hidden}
+      .cm-editor{background:var(--boe-token-surface-surface,#fff);color:var(--boe-token-text-text,#222)}
+      [part=editor]:focus-within{box-shadow:0 0 0 3px var(--boe-token-surface-surface-brand,#0061d5)}
+      .cm-editor.cm-focused{outline:none}
+      .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}
+      .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}
+      .cm-cursor{border-left-color:var(--boe-token-text-text,#222)}
+      .cm-activeLine,.cm-activeLineGutter,.cm-selectionBackground{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent)!important}
+      .cm-matchingBracket,.cm-selectionMatch{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 15%,transparent)!important;color:inherit!important}
+      .cm-nonmatchingBracket{color:var(--boe-token-text-status-text-error,#b92340)!important}
+      .cm-searchMatch{background:color-mix(in srgb,var(--boe-token-text-status-text-warning,#9a6500) 20%,transparent);outline:none}
+      .cm-searchMatch-selected,.cm-tooltip-autocomplete ul li[aria-selected=true]{background:var(--boe-token-surface-surface-brand,#0061d5)!important;color:var(--boe-token-text-text-on-brand,#fff)!important}
+      .cm-panels input,.cm-panels button,.cm-foldPlaceholder{background:var(--boe-token-surface-surface,#fff);color:var(--boe-token-text-text,#222);border:1px solid var(--boe-token-stroke-stroke,#ddd)}
+      .cm-lintRange-error,.cm-lintRange-warning,.cm-lintRange-info{background-image:none;text-decoration-line:underline;text-decoration-style:wavy;text-decoration-thickness:1px;text-underline-offset:3px}
+      .cm-lintRange-error,.cm-diagnostic-error{color:inherit;text-decoration-color:var(--boe-token-text-status-text-error,#b92340);border-left-color:var(--boe-token-text-status-text-error,#b92340)}
+      .cm-lintRange-warning,.cm-diagnostic-warning{text-decoration-color:var(--boe-token-text-status-text-warning,#9a6500);border-left-color:var(--boe-token-text-status-text-warning,#9a6500)}
+      .cm-lintRange-info,.cm-diagnostic-info{text-decoration-color:var(--boe-token-surface-surface-brand,#0061d5);border-left-color:var(--boe-token-surface-surface-brand,#0061d5)}
+      .cm-lint-marker-error{background-image:radial-gradient(circle,var(--boe-token-text-status-text-error,#b92340) 45%,transparent 50%)!important}
+      .cm-lint-marker-warning{background-image:radial-gradient(circle,var(--boe-token-text-status-text-warning,#9a6500) 45%,transparent 50%)!important}
+      .cm-lint-marker-info{background-image:radial-gradient(circle,var(--boe-token-surface-surface-brand,#0061d5) 45%,transparent 50%)!important}
+      [part=help],[part=problems]{font-size:13px;color:var(--boe-token-text-text-secondary,#666);margin:8px 0}
+      [part=toolbar]{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
+      button{font:inherit;color:inherit;background:var(--boe-token-surface-surface,#fff);border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;padding:8px;min-height:36px}
+      button:focus-visible{outline:3px solid var(--boe-token-surface-surface-brand,#0061d5);outline-offset:2px}
+      @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
+    </style><div part="editor"></div><p part="help" id="editor-help">Press Escape then Tab to leave the editor. Use Control-Space for suggestions.</p><div part="toolbar"><button type="button" data-direction="-1">Previous problem</button><button type="button" data-direction="1">Next problem</button><span part="problems" role="status" aria-live="polite"></span></div>`;
+    }
+    setupListeners() {
+        this.shadowRoot.querySelectorAll("button[data-direction]").forEach((button) => button.addEventListener("click", () => this.navigateProblem(Number(button.dataset.direction))));
+        // Keep the advertised escape hatch independent of completion/search keymaps.
+        this.shadowRoot.addEventListener("keydown", (event) => {
+            const key = event;
+            if (!key.target.closest(".cm-content"))
+                return;
+            if (key.ctrlKey && (key.code === "Space" || key.key === " ")) {
+                key.preventDefault();
+                key.stopPropagation();
+                if (this.view && !this.readonly)
+                    startCompletion(this.view);
+            }
+            else if (key.key === "Escape")
+                this.escapeUntil = Date.now() + 2000;
+            else if (key.key === "Tab" && Date.now() <= this.escapeUntil) {
+                key.preventDefault();
+                key.stopPropagation();
+                this.escapeUntil = 0;
+                const target = this.shadowRoot.querySelector("button:not(:disabled)") ?? this.shadowRoot.querySelector("[part=help]");
+                target.setAttribute("tabindex", "0");
+                target.focus();
+            }
+            else if (!key.ctrlKey &&
+                !key.metaKey &&
+                !key.altKey &&
+                key.key !== "Shift")
+                this.escapeUntil = 0;
+        }, { capture: true });
+    }
+    languageExtension() {
+        return this.language === "go"
+            ? go()
+            : javascript({ typescript: this.language === "typescript" });
+    }
+    completionExtension() {
+        return autocompletion({
+            override: [
+                (context) => {
+                    const word = context.matchBefore(/[\w$]+(?:\.[\w$]*)*/);
+                    if (!word && !context.explicit)
+                        return null;
+                    let from = word?.from ?? context.pos;
+                    // A full SDK name replaces its prefix; a method replaces only the
+                    // identifier after the receiver's dot (for example flow().st).
+                    if (word?.text.includes(".") &&
+                        !this.completionsInternal.some((option) => option.label.startsWith(word.text))) {
+                        from += word.text.lastIndexOf(".") + 1;
+                    }
+                    return { from, options: [...this.completionsInternal] };
+                },
+            ],
+        });
+    }
+    update() {
+        if (!this.view) {
+            this.view = new EditorView({
+                parent: this.shadowRoot.querySelector("[part=editor]"),
+                root: this.shadowRoot,
+                state: EditorState.create({
+                    doc: this.value,
+                    extensions: [
+                        basicSetup,
+                        lintGutter(),
+                        keymap.of([indentWithTab]),
+                        Prec.highest(keymap.of([
+                            {
+                                key: "Escape",
+                                run: (view) => {
+                                    closeCompletion(view);
+                                    closeSearchPanel(view);
+                                    view.setTabFocusMode(2000);
+                                    return true;
+                                },
+                            },
+                        ])),
+                        this.languageConfig.of(this.languageExtension()),
+                        this.readonlyConfig.of([
+                            EditorState.readOnly.of(this.readonly),
+                            EditorView.editable.of(!this.readonly),
+                        ]),
+                        this.completionsConfig.of(this.completionExtension()),
+                        syntaxHighlighting(HighlightStyle.define([
+                            {
+                                tag: [
+                                    tags.variableName,
+                                    tags.definition(tags.variableName),
+                                    tags.propertyName,
+                                    tags.operator,
+                                    tags.punctuation,
+                                ],
+                                color: "var(--boe-token-text-text,#222)",
+                            },
+                            {
+                                tag: tags.keyword,
+                                color: "var(--boe-token-surface-surface-brand,#0061d5)",
+                            },
+                            {
+                                tag: [
+                                    tags.typeName,
+                                    tags.className,
+                                    tags.function(tags.variableName),
+                                ],
+                                color: "var(--boe-token-surface-surface-brand,#0061d5)",
+                            },
+                            {
+                                tag: tags.string,
+                                color: "var(--boe-token-text-status-text-success,#138a58)",
+                            },
+                            {
+                                tag: tags.comment,
+                                color: "var(--boe-token-text-text-secondary,#666)",
+                            },
+                            {
+                                tag: tags.number,
+                                color: "var(--boe-token-text-status-text-warning,#9a6500)",
+                            },
+                            {
+                                tag: [tags.bool, tags.null, tags.atom],
+                                color: "var(--boe-token-text-status-text-warning,#9a6500)",
+                            },
+                        ])),
+                        EditorView.updateListener.of((update) => {
+                            if (update.docChanged && !this.syncing) {
+                                this.valueInternal = update.state.doc.toString();
+                                this.pending = true;
+                                clearTimeout(this.timer);
+                                this.timer = setTimeout(() => this.flushChange(), 200);
+                            }
+                        }),
+                        EditorView.domEventHandlers({
+                            blur: () => {
+                                this.flushChange();
+                                return false;
+                            },
+                        }),
+                    ],
+                }),
+            });
+            this.selection = this.savedSelection;
+        }
+        else {
+            this.syncing = true;
+            try {
+                if (this.view.state.doc.toString() !== this.value) {
+                    clearTimeout(this.timer);
+                    this.pending = false;
+                    this.view.dispatch({
+                        changes: {
+                            from: 0,
+                            to: this.view.state.doc.length,
+                            insert: this.value,
+                        },
+                    });
+                }
+                this.view.dispatch({
+                    effects: [
+                        this.languageConfig.reconfigure(this.languageExtension()),
+                        this.readonlyConfig.reconfigure([
+                            EditorState.readOnly.of(this.readonly),
+                            EditorView.editable.of(!this.readonly),
+                        ]),
+                        this.completionsConfig.reconfigure(this.completionExtension()),
+                    ],
+                });
+            }
+            finally {
+                this.syncing = false;
+            }
+        }
+        this.view.contentDOM.setAttribute("aria-label", this.label);
+        this.view.contentDOM.setAttribute("tabindex", "0");
+        this.view.contentDOM.setAttribute("aria-describedby", "editor-help");
+        this.syncProblems();
+    }
+    flushChange() {
+        clearTimeout(this.timer);
+        if (!this.pending)
+            return;
+        this.pending = false;
+        this.dispatchEvent(new CustomEvent("value-changed", {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    diagnostics() {
+        if (!this.view)
+            return [];
+        const doc = this.view.state.doc;
+        return this.problems
+            .filter((problem) => Number.isInteger(problem.line) &&
+            problem.line >= 1 &&
+            problem.line <= doc.lines)
+            .map((problem) => {
+            const line = doc.line(problem.line);
+            const column = Number.isFinite(problem.col) ? problem.col : 1;
+            const endColumn = Number.isFinite(problem.endCol)
+                ? problem.endCol
+                : column + 1;
+            const from = line.from + Math.max(0, Math.min(line.length, column - 1));
+            const to = Math.max(from, Math.min(line.to, line.from + endColumn - 1));
+            return { from, to, message: problem.message, severity: problem.tone };
+        });
+    }
+    syncProblems() {
+        if (!this.view)
+            return;
+        const diagnostics = this.diagnostics();
+        this.view.dispatch(setDiagnostics(this.view.state, diagnostics));
+        this.shadowRoot.querySelector("[part=problems]").textContent =
+            `${diagnostics.length} problem${diagnostics.length === 1 ? "" : "s"}`;
+        this.shadowRoot.querySelectorAll("button[data-direction]").forEach((button) => (button.disabled = diagnostics.length === 0));
+    }
+    navigateProblem(direction) {
+        const diagnostics = this.diagnostics();
+        if (!diagnostics.length)
+            return;
+        this.problemIndex =
+            this.problemIndex < 0
+                ? direction < 0
+                    ? diagnostics.length - 1
+                    : 0
+                : (this.problemIndex + (direction < 0 ? -1 : 1) + diagnostics.length) %
+                    diagnostics.length;
+        const problem = diagnostics[this.problemIndex];
+        this.selection = { anchor: problem.from, head: problem.to };
+        this.focus();
+        this.shadowRoot.querySelector("[part=problems]").textContent =
+            `Problem ${this.problemIndex + 1} of ${diagnostics.length}: ${problem.message}`;
+    }
+}
+CodeEditor.register();

package/dist/components/forms/number-input.js

@@ -35,6 +35,9 @@ const numberInputStyles = `
   }
 
   [part="input"] {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
     font: inherit;
     color: var(--boe-token-text-text, #222222);
     padding: 0.45rem 0.7rem;
@@ -64,7 +67,7 @@ export class NumberInput extends FormAssociatedElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "max",