@unofficialbox/box-open-elements 0.24.0 → 0.25.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.24.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.25.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
@@ -77,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.24.0/docs/api-guidelines.md).
+See the versioned [API guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/api-guidelines.md).
 
 ## Developing
 
@@ -91,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.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)
+The versioned docs index is at [docs/README.md](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/README.md). The most important entries:
+
+- [Taxonomy](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/taxonomy.md)
+- [Architecture](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/architecture.md)
+- [API Guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/api-guidelines.md)
+- [Components catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/components/catalog.md) and [patterns catalog](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/catalog.md)
+- [Using with React, Angular, Vue, and Svelte](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/integration/frameworks.md)
+- [Design Tokens](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/foundations/tokens.md)
+- [Content Explorer](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/content-explorer.md)
+- [Box Server Integration](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/integration/box-server.md)
+- [Agent UI guidelines](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/agent-ui-guidelines.md), [building blocks](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/patterns/agent-ui.md), and [motion](https://github.com/unofficialbox/box-open-elements/blob/v0.25.0/docs/foundations/motion.md)
 
 ## Contributing
 

package/dist/components/actions/button.d.ts

@@ -5,6 +5,7 @@ export declare class Button extends BaseElement {
     static formAssociated: boolean;
     static get observedAttributes(): string[];
     private buttonEl;
+    focus(options?: FocusOptions): void;
     private spinnerEl;
     private iconEl;
     private labelEl;

package/dist/components/actions/button.js

@@ -74,6 +74,17 @@ const buttonStyles = `
     box-shadow: none;
   }
 
+  button[data-tone="text"], button[data-tone="text"]:hover:not(:disabled),
+  button[data-tone="text"]:active:not(:disabled), button[data-tone="text"]:focus-visible {
+    background: transparent;
+    border-color: transparent;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    padding-inline: 0;
+    white-space: normal;
+    text-align: start;
+  }
+  button[data-tone="text"]:hover:not(:disabled) { text-decoration: underline; }
+
   button[data-tone="neutral"]:hover:not(:disabled) {
     background: color-mix(in srgb, var(--boe-token-surface-surface, #ffffff) 97%, black 3%);
     border-color: ${boeControl.buttonBorder};
@@ -176,6 +187,8 @@ export class Button extends BaseElement {
         return ["disabled", "label", "size", "tone", "is-loading", "type"];
     }
     buttonEl;
+    focus(options) { if (!this.disabled)
+        this.buttonEl?.focus(options); }
     spinnerEl;
     iconEl;
     labelEl;

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

@@ -7,6 +7,7 @@ export declare class Checkbox extends FormAssociatedElement {
     private indeterminateInternal;
     private valueInternal;
     private inputEl;
+    focus(options?: FocusOptions): void;
     private labelEl;
     private descriptionEl;
     private fieldEl;

package/dist/components/forms/checkbox.js

@@ -105,6 +105,8 @@ export class Checkbox extends FormAssociatedElement {
     indeterminateInternal = false;
     valueInternal = DEFAULT_VALUE;
     inputEl;
+    focus(options) { if (!this.disabled)
+        this.inputEl?.focus(options); }
     labelEl;
     descriptionEl;
     fieldEl;

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

@@ -1,14 +1,22 @@
 import { BaseElement } from "../../core/index.js";
-import { type Completion } from "@codemirror/autocomplete";
+import { type Completion, type CompletionSource } from "@codemirror/autocomplete";
 export interface CodeProblem {
     /** One-based line and column positions. */
-    line: number;
+    line?: number;
+    /** UTF-16 offsets; when supplied, these take precedence over line/column. */
+    from?: number;
+    to?: number;
     col?: number;
     endCol?: number;
     message: string;
     tone: "error" | "warning" | "info";
 }
 export type CodeCompletion = Completion;
+export type CodeCompletionSource = CompletionSource;
+export interface CodeHighlight {
+    from: number;
+    to: number;
+}
 export interface CodeSelection {
     anchor: number;
     head: number;
@@ -24,6 +32,10 @@ export declare class CodeEditor extends BaseElement {
     private languageConfig;
     private readonlyConfig;
     private completionsConfig;
+    private wrapConfig;
+    private highlightsConfig;
+    private highlightsInternal;
+    private source?;
     private timer?;
     private pending;
     private syncing;
@@ -32,6 +44,17 @@ export declare class CodeEditor extends BaseElement {
     private escapeUntil;
     get value(): string;
     set value(value: string);
+    /** Host replacements are silent and excluded from the typing undo stack. */
+    setValue(value: string, options?: {
+        addToHistory?: boolean;
+    }): void;
+    get wrap(): boolean;
+    set wrap(value: boolean);
+    get completionSource(): CodeCompletionSource | undefined;
+    set completionSource(value: CodeCompletionSource | undefined);
+    get highlights(): readonly CodeHighlight[];
+    set highlights(value: readonly CodeHighlight[]);
+    private highlightExtension;
     get language(): string;
     set language(value: string);
     get readonly(): boolean;
@@ -44,7 +67,9 @@ export declare class CodeEditor extends BaseElement {
     set completions(value: readonly CodeCompletion[]);
     get selection(): CodeSelection;
     set selection(value: CodeSelection);
-    revealLine(line: number): void;
+    revealLine(line: number, options?: {
+        center?: boolean;
+    }): void;
     focus(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     connectedCallback(): void;

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

@@ -1,7 +1,7 @@
 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 { 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";
@@ -14,7 +14,7 @@ import { tags } from "@lezer/highlight";
 export class CodeEditor extends BaseElement {
     static tagName = "box-code-editor";
     static get observedAttributes() {
-        return ["language", "readonly", "label", "value"];
+        return ["language", "readonly", "label", "value", "wrap"];
     }
     valueInternal = "";
     problemsInternal = [];
@@ -23,6 +23,10 @@ export class CodeEditor extends BaseElement {
     languageConfig = new Compartment();
     readonlyConfig = new Compartment();
     completionsConfig = new Compartment();
+    wrapConfig = new Compartment();
+    highlightsConfig = new Compartment();
+    highlightsInternal = [];
+    source;
     timer;
     pending = false;
     syncing = false;
@@ -39,6 +43,48 @@ export class CodeEditor extends BaseElement {
         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";
     }
@@ -92,11 +138,13 @@ export class CodeEditor extends BaseElement {
             scrollIntoView: true,
         });
     }
-    revealLine(line) {
+    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() {
@@ -128,6 +176,7 @@ export class CodeEditor extends BaseElement {
       .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}
@@ -183,6 +232,8 @@ export class CodeEditor extends BaseElement {
             : javascript({ typescript: this.language === "typescript" });
     }
     completionExtension() {
+        if (this.source)
+            return autocompletion({ override: [this.source] });
         return autocompletion({
             override: [
                 (context) => {
@@ -229,6 +280,8 @@ export class CodeEditor extends BaseElement {
                             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: [
@@ -270,6 +323,10 @@ export class CodeEditor extends BaseElement {
                             },
                         ])),
                         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;
@@ -295,6 +352,7 @@ export class CodeEditor extends BaseElement {
                     clearTimeout(this.timer);
                     this.pending = false;
                     this.view.dispatch({
+                        annotations: Transaction.addToHistory.of(false),
                         changes: {
                             from: 0,
                             to: this.view.state.doc.length,
@@ -310,6 +368,8 @@ export class CodeEditor extends BaseElement {
                             EditorView.editable.of(!this.readonly),
                         ]),
                         this.completionsConfig.reconfigure(this.completionExtension()),
+                        this.wrapConfig.reconfigure(this.wrap ? EditorView.lineWrapping : []),
+                        this.highlightsConfig.reconfigure(this.highlightExtension()),
                     ],
                 });
             }
@@ -338,10 +398,15 @@ export class CodeEditor extends BaseElement {
             return [];
         const doc = this.view.state.doc;
         return this.problems
-            .filter((problem) => Number.isInteger(problem.line) &&
+            .filter((problem) => Number.isFinite(problem.from) || (Number.isInteger(problem.line) &&
             problem.line >= 1 &&
-            problem.line <= doc.lines)
+            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)

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

@@ -41,7 +41,7 @@ const numberInputStyles = `
     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:
@@ -55,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);
@@ -79,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;

package/dist/components/navigation/accordion.js

@@ -66,6 +66,10 @@ const accordionStyles = `
   [part="heading"] {
     font-weight: 600;
   }
+  [part="summary"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-weight: 400;
+  }
 
   [part="indicator"] {
     inline-size: 1.35rem;
@@ -103,7 +107,7 @@ const accordionStyles = `
 export class Accordion extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["items", "label", "value", "borderless"];
+        return ["items", "label", "value", "values", "multiple", "borderless"];
     }
     /** Flat variant with no outer card border/background. */
     get borderless() {
@@ -113,6 +117,12 @@ export class Accordion extends BaseElement {
         this.toggleAttribute("borderless", Boolean(value));
     }
     valueInternal = "";
+    valuesInternal = [];
+    get multiple() { return this.hasAttribute("multiple"); }
+    set multiple(value) { this.toggleAttribute("multiple", value); }
+    get values() { return [...this.valuesInternal]; }
+    set values(value) { this.setAttribute("values", JSON.stringify([...new Set(value)])); }
+    isOpen(value) { return this.multiple ? this.valuesInternal.includes(value) : value === this.valueInternal; }
     lastItemsJson = "";
     accordionEl;
     get label() {
@@ -151,12 +161,21 @@ export class Accordion extends BaseElement {
         if (name === "value") {
             this.valueInternal = this.getAttribute("value") ?? "";
         }
+        if (name === "values") {
+            try {
+                const values = JSON.parse(newValue ?? "[]");
+                this.valuesInternal = Array.isArray(values) ? [...new Set(values.filter((v) => typeof v === "string"))] : [];
+            }
+            catch {
+                this.valuesInternal = [];
+            }
+        }
         super.attributeChangedCallback(name, oldValue, newValue);
     }
-    renderItemsMarkup(items, selectedValue) {
+    renderItemsMarkup(items) {
         return items
             .map(item => {
-            const isOpen = item.value === selectedValue;
+            const isOpen = this.isOpen(item.value);
             const panelId = `panel-${escapeHtml(item.value)}`;
             const triggerId = `trigger-${escapeHtml(item.value)}`;
             return `
@@ -170,7 +189,7 @@ export class Accordion extends BaseElement {
                 aria-expanded="${String(isOpen)}"
                 aria-controls="${panelId}"
               >
-                ${escapeHtml(item.label)}
+                <span part="label">${escapeHtml(item.label)}${item.summary ? ` <span part="summary">${escapeHtml(item.summary)}</span>` : ""}</span>
                 <span part="indicator" aria-hidden="true">${isOpen ? "−" : "+"}</span>
               </button>
             </h3>
@@ -206,6 +225,11 @@ export class Accordion extends BaseElement {
             if (!nextValue) {
                 return;
             }
+            if (this.multiple) {
+                this.values = this.isOpen(nextValue) ? this.valuesInternal.filter(value => value !== nextValue) : [...this.valuesInternal, nextValue];
+                this.dispatchEvent(new CustomEvent("values-changed", { detail: { values: this.values }, bubbles: true, composed: true }));
+                return;
+            }
             if (nextValue === this.valueInternal) {
                 this.valueInternal = "";
                 this.setAttribute("value", "");
@@ -233,22 +257,21 @@ export class Accordion extends BaseElement {
         }
         const items = this.items;
         const itemsJson = this.getAttribute("items") ?? "";
-        if (!this.hasAttribute("value") && items.length > 0 && this.valueInternal === "") {
+        if (!this.multiple && !this.hasAttribute("value") && items.length > 0 && this.valueInternal === "") {
             this.valueInternal = items[0].value;
             this.setAttribute("value", this.valueInternal);
         }
-        const selectedValue = this.valueInternal;
         this.accordionEl.setAttribute("role", "region");
         this.accordionEl.setAttribute("aria-label", this.label);
         if (itemsJson !== this.lastItemsJson) {
-            this.accordionEl.innerHTML = this.renderItemsMarkup(items, selectedValue);
+            this.accordionEl.innerHTML = this.renderItemsMarkup(items);
             this.lastItemsJson = itemsJson;
             return;
         }
         this.accordionEl.querySelectorAll('[part="item"]').forEach(node => {
             const section = node;
             const value = section.dataset.value ?? "";
-            const isOpen = value === selectedValue;
+            const isOpen = this.isOpen(value);
             section.dataset.open = String(isOpen);
             const trigger = section.querySelector('[part="trigger"]');
             const indicator = section.querySelector('[part="indicator"]');

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

@@ -90,6 +90,7 @@ const codeStyles = `
   }
 
   ${boeFocusVisibleStyles('[part="copy"]')}
+  ${boeFocusVisibleStyles('[part="pre"]')}
 `;
 /**
  * A block of code, rendered as written.
@@ -192,7 +193,7 @@ export class CodeBlock extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${codeStyles}</style>
       <div part="block">
-        <pre part="pre"><code part="code"><slot></slot></code></pre>
+        <pre part="pre" tabindex="0" role="region"><code part="code"><slot></slot></code></pre>
         <button type="button" part="copy" data-copied="false"></button>
       </div>
     `;
@@ -221,6 +222,7 @@ export class CodeBlock extends BaseElement {
             this.slotEl.textContent = "";
         }
         const language = this.language;
+        this.preEl.setAttribute("aria-label", language ? `${language} code` : "Source code");
         if (language) {
             this.codeEl.setAttribute("data-language", language);
             this.codeEl.setAttribute("class", `language-${language}`);