@unofficialbox/box-open-elements 0.23.0 → 0.25.0

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

@@ -0,0 +1,447 @@
+import { BaseElement } from "../../core/index.js";
+import { basicSetup } from "codemirror";
+import { Compartment, EditorSelection, EditorState, Prec, Transaction, } from "@codemirror/state";
+import { Decoration, 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", "wrap"];
+    }
+    valueInternal = "";
+    problemsInternal = [];
+    completionsInternal = [];
+    view;
+    languageConfig = new Compartment();
+    readonlyConfig = new Compartment();
+    completionsConfig = new Compartment();
+    wrapConfig = new Compartment();
+    highlightsConfig = new Compartment();
+    highlightsInternal = [];
+    source;
+    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();
+    }
+    /** Host replacements are silent and excluded from the typing undo stack. */
+    setValue(value, options = {}) {
+        if (!options.addToHistory || !this.view) {
+            this.value = value;
+            return;
+        }
+        clearTimeout(this.timer);
+        this.pending = false;
+        this.syncing = true;
+        try {
+            this.view.dispatch({ changes: { from: 0, to: this.view.state.doc.length, insert: value } });
+            this.valueInternal = value;
+        }
+        finally {
+            this.syncing = false;
+        }
+        this.syncProblems();
+    }
+    get wrap() { return this.hasAttribute("wrap"); }
+    set wrap(value) { this.toggleAttribute("wrap", value); }
+    get completionSource() { return this.source; }
+    set completionSource(value) { this.source = value; if (this.isRendered)
+        this.update(); }
+    get highlights() { return this.highlightsInternal.map(range => ({ ...range })); }
+    set highlights(value) { this.highlightsInternal = value.map(range => ({ ...range })); if (this.isRendered)
+        this.update(); }
+    highlightExtension() {
+        return EditorView.decorations.of(view => {
+            const doc = view.state.doc;
+            const lines = new Set();
+            for (const range of this.highlightsInternal) {
+                if (!Number.isFinite(range.from) || !Number.isFinite(range.to))
+                    continue;
+                const from = Math.max(0, Math.min(doc.length, range.from));
+                const to = Math.max(from, Math.min(doc.length, range.to));
+                for (let line = doc.lineAt(from).number; line <= doc.lineAt(Math.max(from, to - 1)).number; line++) {
+                    lines.add(doc.line(line).from);
+                }
+            }
+            return Decoration.set([...lines].sort((a, b) => a - b).map(from => Decoration.line({ class: "boe-code-highlight", attributes: { part: "highlight" } }).range(from)));
+        });
+    }
+    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, options = {}) {
+        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 };
+        if (options.center)
+            this.view.dispatch({ effects: EditorView.scrollIntoView(target.from, { y: "center" }) });
+        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}
+      .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)}
+      .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() {
+        if (this.source)
+            return autocompletion({ override: [this.source] });
+        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()),
+                        this.wrapConfig.of(this.wrap ? EditorView.lineWrapping : []),
+                        this.highlightsConfig.of(this.highlightExtension()),
+                        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.selectionSet && !this.syncing && !update.startState.selection.eq(update.state.selection)) {
+                                const { anchor, head } = update.state.selection.main;
+                                this.dispatchEvent(new CustomEvent("selection-changed", { detail: { anchor, head }, bubbles: true, composed: true }));
+                            }
+                            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({
+                        annotations: Transaction.addToHistory.of(false),
+                        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()),
+                        this.wrapConfig.reconfigure(this.wrap ? EditorView.lineWrapping : []),
+                        this.highlightsConfig.reconfigure(this.highlightExtension()),
+                    ],
+                });
+            }
+            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.isFinite(problem.from) || (Number.isInteger(problem.line) &&
+            problem.line >= 1 &&
+            problem.line <= doc.lines))
+            .map((problem) => {
+            if (Number.isFinite(problem.from)) {
+                const from = Math.max(0, Math.min(doc.length, Math.floor(problem.from)));
+                const to = Math.max(from, Math.min(doc.length, Number.isFinite(problem.to) ? Math.floor(problem.to) : from + 1));
+                return { from, to, message: problem.message, severity: problem.tone };
+            }
+            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/combobox.js

@@ -1,7 +1,7 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
-import { boeOverlay, boeRadius } from "../../foundations/geometry/index.js";
+import { boeControl, boeOverlay, boeRadius } from "../../foundations/geometry/index.js";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-combobox";
 const escapeHtml = (value) => value
@@ -29,11 +29,9 @@ const comboboxStyles = `
   }
 
   [part="label"] {
-    font-size: 0.8rem;
+    font-size: ${boeControl.fontSize};
     font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    color: var(--boe-token-text-text, #222222);
   }
 
   [part="control"] {
@@ -48,7 +46,7 @@ const comboboxStyles = `
     font: inherit;
     color: var(--boe-token-text-text, #222222);
     padding: 0.45rem 0.7rem;
-    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    border: 1px solid ${boeControl.inputBorder};
     border-radius: ${boeRadius.control};
     background: var(--boe-token-surface-surface, #ffffff);
     transition:
@@ -62,6 +60,7 @@ const comboboxStyles = `
   }
 
   ${boeNeutralInteractiveStyles('[part="input"]')}
+  [part="input"]:hover:not(:disabled) { border-color: ${boeControl.inputBorder}; }
 
   [part="input"]:focus-visible {
     border-color: var(--boe-token-surface-surface-brand, #0061d5);
@@ -126,8 +125,8 @@ const comboboxStyles = `
     padding: 6px 10px 2px;
     font-size: 0.72rem;
     font-weight: 700;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
+    letter-spacing: normal;
+    text-transform: none;
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 

package/dist/components/forms/number-input.d.ts

@@ -5,6 +5,7 @@ export declare class NumberInput extends FormAssociatedElement {
     static get observedAttributes(): string[];
     private valueInternal;
     private inputEl;
+    focus(options?: FocusOptions): void;
     private labelEl;
     private errorEl;
     private descriptionEl;

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

@@ -35,10 +35,13 @@ 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;
-    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    border: 1px solid ${boeControl.inputBorder};
     border-radius: ${boeRadius.control};
     background: var(--boe-token-surface-surface, #ffffff);
     transition:
@@ -52,6 +55,7 @@ const numberInputStyles = `
   }
 
   ${boeNeutralInteractiveStyles('[part="input"]')}
+  [part="input"]:hover:not(:disabled) { border-color: ${boeControl.inputBorder}; }
 
   [part="input"]:focus-visible {
     border-color: var(--boe-token-surface-surface-brand, #0061d5);
@@ -64,7 +68,7 @@ export class NumberInput extends FormAssociatedElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "max",
@@ -76,6 +80,8 @@ export class NumberInput extends FormAssociatedElement {
     }
     valueInternal = 0;
     inputEl;
+    focus(options) { if (!this.disabled)
+        this.inputEl?.focus(options); }
     labelEl;
     errorEl;
     descriptionEl;

package/dist/components/forms/select.d.ts

@@ -17,6 +17,7 @@ export declare class Select extends FormAssociatedElement {
     private valueInternal;
     private valuesInternal;
     private selectEl;
+    focus(options?: FocusOptions): void;
     private labelEl;
     private descriptionEl;
     private errorEl;

package/dist/components/forms/select.js

@@ -64,7 +64,7 @@ const selectStyles = `
   }
 
   [part="select"]:hover:not(:disabled) {
-    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    border-color: ${boeControl.inputBorder};
   }
 
   [part="select"]:focus-visible {
@@ -150,6 +150,8 @@ export class Select extends FormAssociatedElement {
     valueInternal = "";
     valuesInternal = [];
     selectEl;
+    focus(options) { if (!this.disabled)
+        this.selectEl?.focus(options); }
     labelEl;
     descriptionEl;
     errorEl;

package/dist/components/forms/text-area.js

@@ -1,6 +1,6 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
-import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeControl, boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-text-area";
 const textAreaStyles = `
   :host {
@@ -21,11 +21,9 @@ const textAreaStyles = `
   }
 
   [part="label"] {
-    font-size: 0.8rem;
+    font-size: ${boeControl.fontSize};
     font-weight: 700;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    color: var(--boe-token-text-text, #222222);
   }
 
   [part="textarea"] {
@@ -33,7 +31,7 @@ const textAreaStyles = `
     font: inherit;
     color: var(--boe-token-text-text, #222222);
     padding: 0.45rem 0.7rem;
-    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 78%, var(--boe-token-surface-surface, #ffffff) 22%);
+    border: 1px solid ${boeControl.inputBorder};
     border-radius: ${boeRadius.control};
     background: var(--boe-token-surface-surface, #ffffff);
     resize: vertical;
@@ -49,7 +47,7 @@ const textAreaStyles = `
   }
 
   [part="textarea"]:hover:not(:disabled) {
-    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    border-color: ${boeControl.inputBorder};
   }
 
   [part="textarea"]:focus-visible {

package/dist/components/forms/text-field.d.ts

@@ -10,6 +10,7 @@ export declare class TextField extends FormAssociatedElement {
     private valueInternal;
     private revealed;
     private inputEl;
+    focus(options?: FocusOptions): void;
     private labelEl;
     private descriptionEl;
     private errorEl;

package/dist/components/forms/text-field.js

@@ -178,6 +178,8 @@ export class TextField extends FormAssociatedElement {
     valueInternal = "";
     revealed = false;
     inputEl;
+    focus(options) { if (!this.disabled)
+        this.inputEl?.focus(options); }
     labelEl;
     descriptionEl;
     errorEl;

package/dist/components/navigation/accordion.d.ts

@@ -1,6 +1,7 @@
 import { BaseElement } from "../../core/index.js";
 type BoxAccordionItem = {
     content?: string;
+    summary?: string;
     label: string;
     value: string;
 };
@@ -11,6 +12,12 @@ export declare class Accordion extends BaseElement {
     get borderless(): boolean;
     set borderless(value: boolean);
     private valueInternal;
+    private valuesInternal;
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    get values(): string[];
+    set values(value: string[]);
+    private isOpen;
     private lastItemsJson;
     private accordionEl;
     get label(): string;