@unofficialbox/box-open-elements 0.22.0 → 0.24.0

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/combobox.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/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 { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";

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

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-date-field";

package/dist/components/forms/dropdown.js

@@ -1,7 +1,7 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { FocusRestore, applyRovingTabindex, focusRovingItem, nextRovingIndex, } from "../../foundations/a11y/index.js";
-import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-dropdown";

package/dist/components/forms/multi-select.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromNamedValues, formErrorMessageMarkup, stringValuesFromFormValue, } from "../../core/index.js";
-import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/index.js";
+import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-multi-select";

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

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeControl, boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-number-input";
@@ -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",

package/dist/components/forms/radio-group.js

@@ -1,5 +1,5 @@
 import { FORM_ERROR_MESSAGE_ID, FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/index.js";
+import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-radio-group";

package/dist/components/forms/range-slider.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formDataFromRange, formErrorMessageMarkup, rangeFromFormValue, } from "../../core/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-range-slider";
 const parseNumber = (value, fallback) => {
     if (value == null || value === "") {

package/dist/components/forms/slider.js

@@ -1,5 +1,5 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-slider";
 const parseNumber = (value, fallback) => {
     if (value == null || value === "") {

package/dist/components/forms/tile-group.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeFocusRingShadow } from "../../foundations/tokens/index.js";
+import { boeFocusRingShadow } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-tile-group";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/components/layout/sidebar-toggle-button.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-sidebar-toggle-button";

package/dist/components/navigation/accordion.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-accordion";
 const escapeHtml = (value) => value
     .replaceAll("&", "&")

package/dist/components/navigation/tabs.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeControl, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
-import { boeFocusVisibleStyles, } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles, } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-tabs";
 const escapeHtml = (value) => value

package/dist/components/output/code-block.js

@@ -1,6 +1,6 @@
 import { BaseElement } from "../../core/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-code-block";
 const COPY_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" focusable="false"><rect x="5.5" y="5.5" width="8" height="8" rx="1.5"/><path d="M10.5 3.5v-1a1 1 0 00-1-1h-7a1 1 0 00-1 1v7a1 1 0 001 1h1"/></svg>`;
 const COPIED_ICON = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M3 8.5l3.2 3.2L13 5"/></svg>`;

package/dist/components/overlays/dialog.js

@@ -2,7 +2,7 @@ import { BaseElement } from "../../core/index.js";
 import { dismissModal, promoteModal } from "../../foundations/overlay/index.js";
 import { FocusRestore, trapTabKey } from "../../foundations/a11y/index.js";
 import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
-import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-dialog";
 const dialogStyles = `
   :host {

package/dist/components/overlays/drawer.js

@@ -2,7 +2,7 @@ import { BaseElement } from "../../core/index.js";
 import { FocusRestore, trapTabKey } from "../../foundations/a11y/index.js";
 import { dismissModal, promoteModal } from "../../foundations/overlay/index.js";
 import { boeControl, boeOverlay, boePanel, boeRadius, boeSpace, } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 const DEFAULT_TAG_NAME = "box-drawer";
 const drawerStyles = `
   :host {

package/dist/components/overlays/guide-tooltip.js

@@ -1,7 +1,7 @@
 import { BaseElement } from "../../core/index.js";
 import { dismissPopover, promotePopover } from "../../foundations/overlay/index.js";
 import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-guide-tooltip";

package/dist/components/overlays/popover.js

@@ -2,7 +2,7 @@ import { BaseElement } from "../../core/index.js";
 import { dismissPopover, promotePopover } from "../../foundations/overlay/index.js";
 import { FocusRestore, getTabbableElements } from "../../foundations/a11y/index.js";
 import { boeControl, boeOverlay, boeRadius } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-popover";

package/dist/components/overlays/tooltip.js

@@ -1,7 +1,7 @@
 import { BaseElement } from "../../core/index.js";
 import { dismissPopover, promotePopover } from "../../foundations/overlay/index.js";
 import { boeRadius } from "../../foundations/geometry/index.js";
-import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { parsePlacement, trackAnchor, } from "../../foundations/overlay/index.js";
 const DEFAULT_TAG_NAME = "box-tooltip";
 const DEFAULT_TRIGGER_LABEL = "More information";

package/dist/core/form-associated.d.ts

@@ -30,6 +30,7 @@ export declare const boeFormFieldErrorStyles = "\n  :host([invalid]) [part=\"inp
 export declare const FORM_ERROR_MESSAGE_ID = "boe-field-error";
 export declare const formErrorMessageMarkup: () => string;
 export declare const FORM_DESCRIPTION_ID = "boe-field-description";
+export declare const FORM_LABEL_ID = "boe-field-label";
 /** Optional help text rendered under the label (shown only when `description` is set). */
 export declare const formDescriptionMarkup: () => string;
 /**

package/dist/core/form-associated.js

@@ -125,6 +125,7 @@ export const boeFormFieldErrorStyles = `
 export const FORM_ERROR_MESSAGE_ID = "boe-field-error";
 export const formErrorMessageMarkup = () => `<p part="error-message" id="${FORM_ERROR_MESSAGE_ID}" role="alert" hidden></p>`;
 export const FORM_DESCRIPTION_ID = "boe-field-description";
+export const FORM_LABEL_ID = "boe-field-label";
 /** Optional help text rendered under the label (shown only when `description` is set). */
 export const formDescriptionMarkup = () => `<p part="description" id="${FORM_DESCRIPTION_ID}" hidden></p>`;
 /**
@@ -302,6 +303,7 @@ export class FormAssociatedElement extends BaseElement {
         const required = this.required;
         const description = this.description;
         if (labelEl) {
+            labelEl.id = FORM_LABEL_ID;
             const existing = labelEl.querySelector(".boe-required-mark");
             if (required && !existing) {
                 const mark = document.createElement("span");
@@ -315,6 +317,7 @@ export class FormAssociatedElement extends BaseElement {
             }
         }
         if (control) {
+            control.setAttribute("aria-labelledby", FORM_LABEL_ID);
             control.toggleAttribute("required", required);
             control.setAttribute("aria-required", String(required));
             if (description) {

package/dist/entries/code-editor.d.ts

@@ -0,0 +1 @@
+export * from "../components/forms/code-editor.js";

package/dist/entries/code-editor.js

@@ -0,0 +1 @@
+export * from "../components/forms/code-editor.js";