@unofficialbox/box-open-elements 0.26.0 → 0.28.0

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

@@ -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", "wrap"];
+        return ["current-line-style", "fill-height", "hide-help", "hide-problems", "language", "readonly", "label", "value", "wrap"];
     }
     valueInternal = "";
     problemsInternal = [];
@@ -24,6 +24,7 @@ export class CodeEditor extends BaseElement {
     readonlyConfig = new Compartment();
     completionsConfig = new Compartment();
     wrapConfig = new Compartment();
+    wrapIndentConfig = new Compartment();
     highlightsConfig = new Compartment();
     highlightsInternal = [];
     source;
@@ -63,12 +64,48 @@ export class CodeEditor extends BaseElement {
     }
     get wrap() { return this.hasAttribute("wrap"); }
     set wrap(value) { this.toggleAttribute("wrap", value); }
+    get currentLineStyle() {
+        const value = this.getAttribute("current-line-style");
+        return value === "border" || value === "none" ? value : "fill";
+    }
+    set currentLineStyle(value) { this.setAttribute("current-line-style", value); }
+    get hideHelp() { return this.hasAttribute("hide-help"); }
+    set hideHelp(value) { this.toggleAttribute("hide-help", value); }
+    get hideProblems() { return this.hasAttribute("hide-problems"); }
+    set hideProblems(value) { this.toggleAttribute("hide-problems", value); }
+    get fillHeight() { return this.hasAttribute("fill-height"); }
+    set fillHeight(value) { this.toggleAttribute("fill-height", 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(); }
+    wrapIndentExtension() {
+        return EditorView.decorations.of(view => {
+            if (!this.wrap)
+                return Decoration.none;
+            const ranges = [];
+            const seen = new Set();
+            for (const visible of view.visibleRanges) {
+                const first = view.state.doc.lineAt(visible.from).number;
+                const last = view.state.doc.lineAt(visible.to).number;
+                for (let number = first; number <= last; number++) {
+                    const line = view.state.doc.line(number);
+                    if (seen.has(line.from))
+                        continue;
+                    seen.add(line.from);
+                    const whitespace = line.text.match(/^[\t ]*/)?.[0] ?? "";
+                    const columns = Math.min(24, whitespace.replaceAll("\t", "    ").length);
+                    if (columns)
+                        ranges.push(Decoration.line({ attributes: {
+                                style: `padding-left:${columns}ch;text-indent:-${columns}ch`,
+                            } }).range(line.from));
+                }
+            }
+            return Decoration.set(ranges, true);
+        });
+    }
     highlightExtension() {
         return EditorView.decorations.of(view => {
             const doc = view.state.doc;
@@ -138,6 +175,19 @@ export class CodeEditor extends BaseElement {
             scrollIntoView: true,
         });
     }
+    /** One-based line containing a UTF-16 document offset, including before mount. */
+    lineAt(position) {
+        const doc = this.view?.state.doc ?? EditorState.create({ doc: this.value }).doc;
+        const offset = Math.max(0, Math.min(doc.length, Number.isFinite(position) ? Math.floor(position) : 0));
+        const { number, from, to } = doc.lineAt(offset);
+        return { number, from, to };
+    }
+    /** Start offset of a one-based line; out-of-range lines clamp to the document. */
+    lineStart(number) {
+        const doc = this.view?.state.doc ?? EditorState.create({ doc: this.value }).doc;
+        const line = Math.max(1, Math.min(doc.lines, Number.isFinite(number) ? Math.floor(number) : 1));
+        return doc.line(line).from;
+    }
     revealLine(line, options = {}) {
         if (!this.view)
             return;
@@ -166,16 +216,24 @@ export class CodeEditor extends BaseElement {
     }
     renderTemplate() {
         this.shadowRoot.innerHTML = `<style>
-      :host{display:block;min-width:0;color:var(--boe-token-text-text,#222);font:inherit}
+      :host{display:flex;flex-direction:column;min-width:0;min-height: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]{border:1px solid var(--boe-token-stroke-stroke,#ddd);border-radius:8px;overflow:hidden;min-height:0;flex:1 1 auto}
+      .cm-editor{background:var(--boe-code-background,var(--boe-token-surface-surface,#fff));color:var(--boe-code-foreground,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-scroller{max-height:var(--boe-code-editor-height,420px);min-height:160px;overflow:auto;font-family:var(--boe-code-font-family,monospace);font-size:var(--boe-code-font-size,14px);line-height:var(--boe-code-line-height,1.6)}
+      :host([fill-height]){height:100%}
+      :host([fill-height]) [part=editor],:host([fill-height]) .cm-editor,:host([fill-height]) .cm-scroller{height:100%;max-height:none;min-height:0}
+      .cm-gutters,.cm-panels,.cm-tooltip{background:var(--boe-token-surface-surface-secondary,#fbfbfb)!important;color:var(--boe-code-foreground,var(--boe-token-text-text,#222))!important;border-color:var(--boe-token-stroke-stroke,#ddd)!important}
+      .cm-gutters{color:var(--boe-code-gutter,var(--boe-token-text-text,#222))!important;border-right:var(--boe-code-gutter-border,1px solid var(--boe-token-stroke-stroke,#ddd))!important}
+      .cm-cursor{border-left-color:var(--boe-code-caret,var(--boe-token-text-text,#222))}
+      .cm-activeLine,.cm-activeLineGutter{background:color-mix(in srgb,var(--boe-token-surface-surface-brand,#0061d5) 12%,transparent)!important}
+      :host([current-line-style=border]) .cm-activeLine{background:transparent!important;box-shadow:inset 0 1px var(--boe-code-current-line-border,var(--boe-token-stroke-stroke,#ddd)),inset 0 -1px var(--boe-code-current-line-border,var(--boe-token-stroke-stroke,#ddd))}
+      :host([current-line-style=none]) .cm-activeLine{background:transparent!important}
+      :host([current-line-style=border]) .cm-activeLineGutter,:host([current-line-style=none]) .cm-activeLineGutter{background:transparent!important}
+      .cm-activeLineGutter{color:var(--boe-code-gutter-active,var(--boe-code-gutter,var(--boe-token-text-text,#222)))!important}
+      .cm-selectionBackground,.cm-content ::selection{background:var(--boe-code-selection,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}
@@ -190,6 +248,7 @@ export class CodeEditor extends BaseElement {
       .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=help][hidden],[part=toolbar][hidden]{display:none}
       [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}
@@ -281,45 +340,49 @@ export class CodeEditor extends BaseElement {
                         ]),
                         this.completionsConfig.of(this.completionExtension()),
                         this.wrapConfig.of(this.wrap ? EditorView.lineWrapping : []),
+                        this.wrapIndentConfig.of(this.wrapIndentExtension()),
                         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.controlKeyword,
+                                color: "var(--boe-code-control,var(--boe-code-keyword,var(--boe-token-surface-surface-brand,#0061d5)))",
                             },
                             {
-                                tag: tags.keyword,
-                                color: "var(--boe-token-surface-surface-brand,#0061d5)",
+                                tag: [tags.keyword, tags.moduleKeyword, tags.definitionKeyword, tags.operatorKeyword],
+                                color: "var(--boe-code-keyword,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.function(tags.variableName), tags.function(tags.propertyName)],
+                                color: "var(--boe-code-function,var(--boe-token-surface-surface-brand,#0061d5))",
                             },
                             {
-                                tag: tags.string,
-                                color: "var(--boe-token-text-status-text-success,#138a58)",
+                                tag: [tags.typeName, tags.className, tags.namespace],
+                                color: "var(--boe-code-type,var(--boe-token-surface-surface-brand,#0061d5))",
                             },
                             {
-                                tag: tags.comment,
-                                color: "var(--boe-token-text-text-secondary,#666)",
+                                tag: tags.propertyName,
+                                color: "var(--boe-code-property,var(--boe-token-text-text,#222))",
+                            },
+                            {
+                                tag: [tags.variableName, tags.definition(tags.variableName)],
+                                color: "var(--boe-code-variable,var(--boe-token-text-text,#222))",
+                            },
+                            {
+                                tag: [tags.string, tags.special(tags.string)],
+                                color: "var(--boe-code-string,var(--boe-token-text-status-text-success,#138a58))",
+                            },
+                            {
+                                tag: [tags.number, tags.bool, tags.null, tags.atom],
+                                color: "var(--boe-code-number,var(--boe-token-text-status-text-warning,#9a6500))",
                             },
                             {
-                                tag: tags.number,
-                                color: "var(--boe-token-text-status-text-warning,#9a6500)",
+                                tag: tags.comment,
+                                color: "var(--boe-code-comment,var(--boe-token-text-text-secondary,#666))",
+                                fontStyle: "var(--boe-code-comment-style,normal)",
                             },
                             {
-                                tag: [tags.bool, tags.null, tags.atom],
-                                color: "var(--boe-token-text-status-text-warning,#9a6500)",
+                                tag: [tags.punctuation, tags.bracket, tags.operator, tags.separator],
+                                color: "var(--boe-code-punctuation,var(--boe-token-text-text,#222))",
                             },
                         ])),
                         EditorView.updateListener.of((update) => {
@@ -369,6 +432,7 @@ export class CodeEditor extends BaseElement {
                         ]),
                         this.completionsConfig.reconfigure(this.completionExtension()),
                         this.wrapConfig.reconfigure(this.wrap ? EditorView.lineWrapping : []),
+                        this.wrapIndentConfig.reconfigure(this.wrapIndentExtension()),
                         this.highlightsConfig.reconfigure(this.highlightExtension()),
                     ],
                 });
@@ -379,7 +443,12 @@ export class CodeEditor extends BaseElement {
         }
         this.view.contentDOM.setAttribute("aria-label", this.label);
         this.view.contentDOM.setAttribute("tabindex", "0");
-        this.view.contentDOM.setAttribute("aria-describedby", "editor-help");
+        if (this.hideHelp)
+            this.view.contentDOM.removeAttribute("aria-describedby");
+        else
+            this.view.contentDOM.setAttribute("aria-describedby", "editor-help");
+        this.shadowRoot.querySelector('[part=help]').hidden = this.hideHelp;
+        this.shadowRoot.querySelector('[part=toolbar]').hidden = this.hideProblems;
         this.syncProblems();
     }
     flushChange() {

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

@@ -20,6 +20,7 @@ export declare class Combobox extends FormAssociatedElement {
     private listboxId;
     private inputEl;
     private labelEl;
+    private descriptionEl;
     private controlEl;
     private listboxEl;
     private errorEl;

package/dist/components/forms/combobox.js

@@ -1,4 +1,4 @@
-import { FormAssociatedElement, boeFormFieldErrorStyles, formErrorMessageMarkup, } from "../../core/index.js";
+import { FormAssociatedElement, FORM_LABEL_ID, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeNeutralInteractiveStyles } from "../../foundations/tokens/interaction.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boeControl, boeOverlay, boeRadius } from "../../foundations/geometry/index.js";
@@ -137,12 +137,13 @@ const comboboxStyles = `
   }
 
   ${boeFormFieldErrorStyles}
+  ${boeFormFieldSupportStyles}
 `;
 export class Combobox extends FormAssociatedElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
-            ...FormAssociatedElement.formObservedAttributes,
+            ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "options",
@@ -159,6 +160,7 @@ export class Combobox extends FormAssociatedElement {
     listboxId = `box-combobox-list-${Math.random().toString(36).slice(2, 10)}`;
     inputEl;
     labelEl;
+    descriptionEl;
     controlEl;
     listboxEl;
     errorEl;
@@ -372,7 +374,7 @@ export class Combobox extends FormAssociatedElement {
         this.shadowRoot.innerHTML = `
       <style>${comboboxStyles}</style>
       <div part="field">
-        <span part="label" id="${this.listboxId}-label"></span>
+        <span part="label" id="${FORM_LABEL_ID}"></span>
         <div part="control">
           <input
             type="text"
@@ -384,11 +386,13 @@ export class Combobox extends FormAssociatedElement {
             aria-controls="${this.listboxId}"
           />
         </div>
-        <ul part="listbox" id="${this.listboxId}" role="listbox" aria-labelledby="${this.listboxId}-label" hidden></ul>
+        ${formDescriptionMarkup()}
+        <ul part="listbox" id="${this.listboxId}" role="listbox" aria-labelledby="${FORM_LABEL_ID}" hidden></ul>
         ${formErrorMessageMarkup()}
       </div>
     `;
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.controlEl = this.shadowRoot.querySelector('[part="control"]');
         this.listboxEl = this.shadowRoot.querySelector('[part="listbox"]');
@@ -511,7 +515,7 @@ export class Combobox extends FormAssociatedElement {
         }
         this.labelEl.textContent = this.label;
         this.inputEl.placeholder = this.placeholder;
-        this.inputEl.setAttribute("aria-label", this.label);
+        this.applyFieldSupport(this.labelEl, this.inputEl, this.descriptionEl);
         if (this.shadowRoot?.activeElement !== this.inputEl && this.filterText == null) {
             this.inputEl.value = this.getDisplayValue();
         }

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

@@ -9,6 +9,7 @@ export declare class NumberInput extends FormAssociatedElement {
     private labelEl;
     private errorEl;
     private descriptionEl;
+    private clampStatusEl;
     get disabled(): boolean;
     set disabled(value: boolean);
     get label(): string;

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

@@ -85,6 +85,7 @@ export class NumberInput extends FormAssociatedElement {
     labelEl;
     errorEl;
     descriptionEl;
+    clampStatusEl;
     get disabled() {
         return this.hasAttribute("disabled");
     }
@@ -183,6 +184,14 @@ export class NumberInput extends FormAssociatedElement {
     }
     syncValue(nextValue) {
         const normalizedValue = this.clamp(nextValue);
+        if (normalizedValue !== nextValue) {
+            this.inputEl.value = String(normalizedValue);
+            const boundary = nextValue > normalizedValue ? "most" : "least";
+            this.clampStatusEl.textContent = `Changed to ${normalizedValue}, the ${boundary} allowed`;
+        }
+        else {
+            this.clampStatusEl.textContent = "";
+        }
         this.valueInternal = normalizedValue;
         this.setAttribute("value", String(normalizedValue));
         this.syncFormAssociation();
@@ -202,6 +211,7 @@ export class NumberInput extends FormAssociatedElement {
         <span part="label"></span>
         ${formDescriptionMarkup()}
         <input type="number" part="input" />
+        <span part="clamp-status" role="status" style="position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)"></span>
         ${formErrorMessageMarkup()}
       </label>
     `;
@@ -209,6 +219,7 @@ export class NumberInput extends FormAssociatedElement {
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
         this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
+        this.clampStatusEl = this.shadowRoot.querySelector('[part="clamp-status"]');
     }
     setupListeners() {
         this.inputEl.addEventListener("input", event => {

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

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

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

@@ -77,6 +77,8 @@ export class TextArea extends FormAssociatedElement {
     }
     valueInternal = "";
     textareaEl;
+    focus(options) { if (!this.disabled)
+        this.textareaEl?.focus(options); }
     labelEl;
     errorEl;
     get value() {

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

@@ -36,6 +36,9 @@ export declare class TextField extends FormAssociatedElement {
      */
     get reveal(): boolean;
     set reveal(value: boolean);
+    /** Noun used in the Show/Hide control's accessible name. Defaults to the field label. */
+    get revealLabel(): string;
+    set revealLabel(value: string);
     /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
     get loading(): boolean;
     set loading(value: boolean);

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

@@ -125,6 +125,8 @@ const textFieldStyles = `
     appearance: none;
     border: 0;
     padding: 0.15rem 0.4rem;
+    min-inline-size: 24px;
+    min-block-size: 24px;
     border-radius: 4px;
     background: transparent;
     font: inherit;
@@ -169,6 +171,7 @@ export class TextField extends FormAssociatedElement {
             "label",
             "placeholder",
             "reveal",
+            "reveal-label",
             "type",
             "loading",
             "valid",
@@ -223,6 +226,16 @@ export class TextField extends FormAssociatedElement {
     set reveal(value) {
         this.toggleAttribute("reveal", Boolean(value));
     }
+    /** Noun used in the Show/Hide control's accessible name. Defaults to the field label. */
+    get revealLabel() {
+        return this.getAttribute("reveal-label") ?? "";
+    }
+    set revealLabel(value) {
+        if (value)
+            this.setAttribute("reveal-label", value);
+        else
+            this.removeAttribute("reveal-label");
+    }
     /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
     get loading() {
         return this.hasAttribute("loading");
@@ -357,7 +370,8 @@ export class TextField extends FormAssociatedElement {
             // The visible word and the accessible name agree; aria-pressed makes
             // the toggle state machine explicit to AT.
             this.revealEl.textContent = this.revealed ? "Hide" : "Show";
-            this.revealEl.setAttribute("aria-label", this.revealed ? "Hide password" : "Show password");
+            const noun = this.revealLabel || (this.hasAttribute("label") ? this.label : "password");
+            this.revealEl.setAttribute("aria-label", `${this.revealed ? "Hide" : "Show"} ${noun}`);
             this.revealEl.setAttribute("aria-pressed", String(this.revealed));
         }
         else {

package/dist/components/forms/tile-group.d.ts

@@ -3,8 +3,14 @@ import { BaseElement } from "../../core/index.js";
 export interface TileOption {
     description?: string;
     disabled?: boolean;
+    disabledReason?: string;
     id: string;
     label: string;
+    meta?: string;
+    status?: {
+        label: string;
+        tone?: "neutral" | "success" | "warning" | "error";
+    };
 }
 /** Attribute payloads are author input — validate every record. */
 export declare const isTileOptionRecord: (value: unknown) => value is TileOption;

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

@@ -14,7 +14,14 @@ export const isTileOptionRecord = (value) => {
         return false;
     }
     const item = value;
-    return typeof item.id === "string" && typeof item.label === "string";
+    return typeof item.id === "string" && typeof item.label === "string"
+        && (item.description === undefined || typeof item.description === "string")
+        && (item.meta === undefined || typeof item.meta === "string")
+        && (item.disabledReason === undefined || typeof item.disabledReason === "string")
+        && (item.status === undefined || (typeof item.status === "object" && item.status !== null
+            && typeof item.status.label === "string"
+            && [undefined, "neutral", "success", "warning", "error"]
+                .includes(item.status.tone)));
 };
 const tileStyles = `
   :host {
@@ -109,6 +116,17 @@ const tileStyles = `
   [part="tile-description"]:empty {
     display: none;
   }
+
+  [part="tile-meta"], [part="tile-status"], [part="tile-disabled-reason"] {
+    font-size: 0.76rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow-wrap: normal;
+  }
+  [part="tile-status"] { font-weight: 700; }
+  [part="tile-status"][data-tone="success"] { color: var(--boe-token-text-status-text-success, #176b45); }
+  [part="tile-status"][data-tone="warning"] { color: var(--boe-token-text-status-text-warning, #805500); }
+  [part="tile-status"][data-tone="error"] { color: var(--boe-token-text-status-text-error, #ad1b36); }
+  .boe-sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
 `;
 /**
  * Choose one option, or several, as cards rather than radios.
@@ -199,8 +217,11 @@ export class TileGroup extends BaseElement {
     rebuild() {
         const type = this.multiple ? "checkbox" : "radio";
         this.groupEl.innerHTML = this.options
-            .map(option => {
+            .map((option, index) => {
             const id = escapeHtml(option.id);
+            const detailsId = `tile-details-${index}`;
+            const details = [option.description, option.meta, option.status?.label, option.disabledReason]
+                .filter(Boolean).join(". ");
             return `
           <label part="tile" data-option-id="${id}" data-selected="false" data-disabled="${option.disabled ? "true" : "false"}">
             <input
@@ -208,10 +229,16 @@ export class TileGroup extends BaseElement {
               type="${type}"
               name="${escapeHtml(this.name)}"
               value="${id}"
+              aria-label="${escapeHtml(option.label)}"
+              ${details ? `aria-describedby="${detailsId}"` : ""}
               ${option.disabled ? "disabled" : ""}
             />
             <span part="tile-label">${escapeHtml(option.label)}</span>
             <span part="tile-description">${escapeHtml(option.description ?? "")}</span>
+            ${option.meta ? `<span part="tile-meta">${escapeHtml(option.meta)}</span>` : ""}
+            ${option.status ? `<span part="tile-status" data-tone="${escapeHtml(option.status.tone ?? "neutral")}">${escapeHtml(option.status.label)}</span>` : ""}
+            ${option.disabledReason ? `<span part="tile-disabled-reason">${escapeHtml(option.disabledReason)}</span>` : ""}
+            ${details ? `<span id="${detailsId}" class="boe-sr-only">${escapeHtml(details)}</span>` : ""}
           </label>
         `;
         })

package/dist/components/layout/app-shell.js

@@ -189,9 +189,9 @@ export class AppShell extends BaseElement {
           </div>
         </header>
         <div part="frame">
-          <nav part="nav" aria-label="Primary">
+          <div part="nav" role="navigation" aria-label="Primary">
             <slot name="nav"></slot>
-          </nav>
+          </div>
           <main part="main">
             <slot></slot>
           </main>
@@ -240,6 +240,17 @@ export class AppShell extends BaseElement {
             return;
         }
         this.navEl.hidden = !this.hasNamedSlotContent("nav", this.navSlot);
+        // A slotted NavSidebar supplies its own labelled nav landmark. Keep this
+        // wrapper for layout, but never nest a second navigation landmark around it.
+        const childOwnsNavigation = Array.from(this.children).some(el => el.getAttribute("slot") === "nav" && el.localName === "box-nav-sidebar");
+        if (childOwnsNavigation) {
+            this.navEl.removeAttribute("role");
+            this.navEl.removeAttribute("aria-label");
+        }
+        else {
+            this.navEl.setAttribute("role", "navigation");
+            this.navEl.setAttribute("aria-label", this.navLabel);
+        }
         this.asideEl.hidden = !this.hasNamedSlotContent("aside", this.asideSlot);
         this.footerEl.hidden = !this.hasNamedSlotContent("footer", this.footerSlot);
     }
@@ -250,7 +261,6 @@ export class AppShell extends BaseElement {
         const heading = this.heading;
         this.shellEl.setAttribute("aria-label", heading);
         this.titleEl.textContent = heading;
-        this.navEl.setAttribute("aria-label", this.navLabel);
         this.asideEl.setAttribute("aria-label", this.asideLabel);
         this.syncLandmarkVisibility();
     }

package/dist/components/layout/nav-sidebar.js

@@ -37,8 +37,8 @@ const navSidebarStyles = `
     transition: inline-size ${boeMotionDuration.medium} ${boeMotionEasing.standard};
   }
 
-  /* Collapsed: shrink to an icon strip. The header and footer usually hold
-     branding and labels, so they hide; the body (icon nav) stays. */
+  /* Collapsed: shrink to an icon strip. Keep the header when it owns the
+     companion toggle; otherwise branding-only headers can disappear. */
   [part="sidebar"][data-collapsed="true"] {
     inline-size: 3.75rem;
     padding-inline: 0.55rem;
@@ -55,6 +55,14 @@ const navSidebarStyles = `
     display: none;
   }
 
+  [part="sidebar"][data-collapsed="true"][data-header-toggle="true"] [part="header"] {
+    display: block;
+  }
+
+  [part="sidebar"][data-collapsed="true"] [part="header"] ::slotted(:not(box-sidebar-toggle-button)) {
+    display: none;
+  }
+
   [part="body"] {
     display: flex;
     flex-direction: column;
@@ -192,6 +200,9 @@ export class NavSidebar extends BaseElement {
             ?.addEventListener("slotchange", () => {
             this.update();
         });
+        this.shadowRoot
+            ?.querySelector('slot[name="header"]')
+            ?.addEventListener("slotchange", () => this.update());
     }
     /**
      * Collapsing hides `[data-nav-label]`, which is a row's only accessible
@@ -232,6 +243,7 @@ export class NavSidebar extends BaseElement {
             return;
         }
         this.sidebarEl.dataset.collapsed = this.collapsed ? "true" : "false";
+        this.sidebarEl.dataset.headerToggle = Array.from(this.children).some(el => el.getAttribute("slot") === "header" && el.localName === "box-sidebar-toggle-button") ? "true" : "false";
         this.sidebarEl.setAttribute("aria-label", this.label);
         this.syncCollapsedRowNames();
     }

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

@@ -11,6 +11,9 @@ export declare class Accordion extends BaseElement {
     /** Flat variant with no outer card border/background. */
     get borderless(): boolean;
     set borderless(value: boolean);
+    /** Omit region landmarks when many accordions or panels share a label. */
+    get plainPanels(): boolean;
+    set plainPanels(value: boolean);
     private valueInternal;
     private valuesInternal;
     get multiple(): boolean;

package/dist/components/navigation/accordion.js

@@ -107,7 +107,7 @@ const accordionStyles = `
 export class Accordion extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["items", "label", "value", "values", "multiple", "borderless"];
+        return ["items", "label", "value", "values", "multiple", "borderless", "plain-panels"];
     }
     /** Flat variant with no outer card border/background. */
     get borderless() {
@@ -116,6 +116,9 @@ export class Accordion extends BaseElement {
     set borderless(value) {
         this.toggleAttribute("borderless", Boolean(value));
     }
+    /** Omit region landmarks when many accordions or panels share a label. */
+    get plainPanels() { return this.hasAttribute("plain-panels"); }
+    set plainPanels(value) { this.toggleAttribute("plain-panels", Boolean(value)); }
     valueInternal = "";
     valuesInternal = [];
     get multiple() { return this.hasAttribute("multiple"); }
@@ -196,8 +199,7 @@ export class Accordion extends BaseElement {
             <div
               part="panel"
               id="${panelId}"
-              role="region"
-              aria-labelledby="${triggerId}"
+              ${this.plainPanels ? "" : `role="region" aria-labelledby="${triggerId}"`}
               ${isOpen ? "" : "hidden"}
             ><slot name="panel-${escapeHtml(item.value)}">${escapeHtml(item.content ?? "")}</slot></div>
           </section>
@@ -261,8 +263,14 @@ export class Accordion extends BaseElement {
             this.valueInternal = items[0].value;
             this.setAttribute("value", this.valueInternal);
         }
-        this.accordionEl.setAttribute("role", "region");
-        this.accordionEl.setAttribute("aria-label", this.label);
+        if (this.plainPanels) {
+            this.accordionEl.removeAttribute("role");
+            this.accordionEl.removeAttribute("aria-label");
+        }
+        else {
+            this.accordionEl.setAttribute("role", "region");
+            this.accordionEl.setAttribute("aria-label", this.label);
+        }
         if (itemsJson !== this.lastItemsJson) {
             this.accordionEl.innerHTML = this.renderItemsMarkup(items);
             this.lastItemsJson = itemsJson;
@@ -284,6 +292,14 @@ export class Accordion extends BaseElement {
             }
             if (panel) {
                 panel.hidden = !isOpen;
+                if (this.plainPanels) {
+                    panel.removeAttribute("role");
+                    panel.removeAttribute("aria-labelledby");
+                }
+                else {
+                    panel.setAttribute("role", "region");
+                    panel.setAttribute("aria-labelledby", trigger?.id ?? "");
+                }
             }
         });
     }