@unofficialbox/box-open-elements 0.4.0 → 0.6.0

package/dist/components/forms/spin-button.d.ts

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxSpinButtonElement extends FormAssociatedElement {
+export declare class SpinButton extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private inputEl;
@@ -30,4 +31,3 @@ export declare class BoxSpinButtonElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxSpinButtonElement: (tagName?: string) => typeof BoxSpinButtonElement;

package/dist/components/forms/spin-button.js

@@ -123,7 +123,8 @@ const spinButtonStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxSpinButtonElement extends FormAssociatedElement {
+export class SpinButton extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -342,11 +343,4 @@ export class BoxSpinButtonElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxSpinButtonElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSpinButtonElement);
-    return BoxSpinButtonElement;
-};
+SpinButton.register();

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

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxSwitchElement extends FormAssociatedElement {
+export declare class Switch extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private checkedInternal;
     private valueInternal;
@@ -29,4 +30,3 @@ export declare class BoxSwitchElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxSwitchElement: (tagName?: string) => typeof BoxSwitchElement;

package/dist/components/forms/switch.js

@@ -109,7 +109,8 @@ const switchStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxSwitchElement extends FormAssociatedElement {
+export class Switch extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -292,11 +293,4 @@ export class BoxSwitchElement extends FormAssociatedElement {
         this.applyInvalidState(this.switchEl, this.errorEl);
     }
 }
-export const defineBoxSwitchElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSwitchElement);
-    return BoxSwitchElement;
-};
+Switch.register();

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

@@ -6,7 +6,8 @@ import type { FormValue } from "../../core/index.js";
  * available as the `tags` array property and mirrored to the `value` attribute
  * as a comma-separated list.
  */
-export declare class BoxTagInputElement extends FormAssociatedElement {
+export declare class TagInput extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private tagsInternal;
     private draft;
@@ -43,4 +44,3 @@ export declare class BoxTagInputElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTagInputElement: (tagName?: string) => typeof BoxTagInputElement;

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

@@ -145,7 +145,8 @@ const tagInputStyles = `
  * available as the `tags` array property and mirrored to the `value` attribute
  * as a comma-separated list.
  */
-export class BoxTagInputElement extends FormAssociatedElement {
+export class TagInput extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -410,11 +411,4 @@ export class BoxTagInputElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxTagInputElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTagInputElement);
-    return BoxTagInputElement;
-};
+TagInput.register();

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

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxTextAreaElement extends FormAssociatedElement {
+export declare class TextArea extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private textareaEl;
@@ -23,4 +24,3 @@ export declare class BoxTextAreaElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTextAreaElement: (tagName?: string) => typeof BoxTextAreaElement;

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

@@ -59,7 +59,8 @@ const textAreaStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxTextAreaElement extends FormAssociatedElement {
+export class TextArea extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -178,11 +179,4 @@ export class BoxTextAreaElement extends FormAssociatedElement {
         this.applyInvalidState(this.textareaEl, this.errorEl);
     }
 }
-export const defineBoxTextAreaElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTextAreaElement);
-    return BoxTextAreaElement;
-};
+TextArea.register();

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

@@ -1,8 +1,14 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxTextFieldElement extends FormAssociatedElement {
+/** Detail of this element's `value-changed` event, for typed listeners. */
+export interface TextFieldValueChangedDetail {
+    value: string;
+}
+export declare class TextField extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
+    private revealed;
     private inputEl;
     private labelEl;
     private descriptionEl;
@@ -10,9 +16,25 @@ export declare class BoxTextFieldElement extends FormAssociatedElement {
     private controlEl;
     private iconSlot;
     private statusEl;
+    private revealEl;
     /** Input type passthrough (text/email/tel/url/password/search/number). */
     get type(): string;
     set type(value: string);
+    /**
+     * `autocomplete` passthrough to the inner input ("email",
+     * "current-password", "off", …). Without it password managers and
+     * autofill cannot classify the field — the shadow boundary hides any
+     * autocomplete the host writes on the custom element itself.
+     */
+    get autocomplete(): string;
+    set autocomplete(value: string);
+    /**
+     * Opt-in visibility toggle for `type="password"`: renders a Show/Hide
+     * control that swaps the inner input between password and text without
+     * changing the field's declared `type`.
+     */
+    get reveal(): boolean;
+    set reveal(value: boolean);
     /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
     get loading(): boolean;
     set loading(value: boolean);
@@ -35,4 +57,3 @@ export declare class BoxTextFieldElement extends FormAssociatedElement {
     private syncIconSlot;
     protected update(): void;
 }
-export declare const defineBoxTextFieldElement: (tagName?: string) => typeof BoxTextFieldElement;

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

@@ -109,16 +109,60 @@ const textFieldStyles = `
     color: var(--boe-token-surface-status-surface-success, #26c281);
   }
 
+  /* Password visibility toggle: a word, not an eye glyph, so the state is
+     stated. Hidden entirely unless reveal is opted in on a password. */
+  [part="reveal"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 0.35rem;
+    transform: translateY(-50%);
+    appearance: none;
+    border: 0;
+    padding: 0.15rem 0.4rem;
+    border-radius: 4px;
+    background: transparent;
+    font: inherit;
+    font-size: 0.78rem;
+    font-weight: 700;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    cursor: pointer;
+  }
+
+  [part="reveal"]:hover {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, transparent);
+  }
+
+  [part="reveal"]:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    outline-offset: 1px;
+  }
+
+  [part="control"][data-reveal="true"] [part="input"] {
+    padding-inline-end: 3.4rem;
+  }
+
+  /* Reveal and a trailing status can coexist: the status shifts inward. */
+  [part="control"][data-reveal="true"] [part="status"] {
+    inset-inline-end: 3.4rem;
+  }
+
+  [part="control"][data-reveal="true"][data-status] [part="input"] {
+    padding-inline-end: 5rem;
+  }
+
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxTextFieldElement extends FormAssociatedElement {
+export class TextField extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
+            "autocomplete",
             "disabled",
             "label",
             "placeholder",
+            "reveal",
             "type",
             "loading",
             "valid",
@@ -126,6 +170,7 @@ export class BoxTextFieldElement extends FormAssociatedElement {
         ];
     }
     valueInternal = "";
+    revealed = false;
     inputEl;
     labelEl;
     descriptionEl;
@@ -133,6 +178,7 @@ export class BoxTextFieldElement extends FormAssociatedElement {
     controlEl;
     iconSlot;
     statusEl;
+    revealEl;
     /** Input type passthrough (text/email/tel/url/password/search/number). */
     get type() {
         const value = this.getAttribute("type");
@@ -141,6 +187,34 @@ export class BoxTextFieldElement extends FormAssociatedElement {
     set type(value) {
         this.setAttribute("type", value);
     }
+    /**
+     * `autocomplete` passthrough to the inner input ("email",
+     * "current-password", "off", …). Without it password managers and
+     * autofill cannot classify the field — the shadow boundary hides any
+     * autocomplete the host writes on the custom element itself.
+     */
+    get autocomplete() {
+        return this.getAttribute("autocomplete") ?? "";
+    }
+    set autocomplete(value) {
+        if (value) {
+            this.setAttribute("autocomplete", value);
+        }
+        else {
+            this.removeAttribute("autocomplete");
+        }
+    }
+    /**
+     * Opt-in visibility toggle for `type="password"`: renders a Show/Hide
+     * control that swaps the inner input between password and text without
+     * changing the field's declared `type`.
+     */
+    get reveal() {
+        return this.hasAttribute("reveal");
+    }
+    set reveal(value) {
+        this.toggleAttribute("reveal", Boolean(value));
+    }
     /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
     get loading() {
         return this.hasAttribute("loading");
@@ -213,6 +287,7 @@ export class BoxTextFieldElement extends FormAssociatedElement {
           <slot name="icon" part="icon"></slot>
           <input type="text" part="input" />
           <span part="status" aria-hidden="true"></span>
+          <button type="button" part="reveal" aria-pressed="false" hidden></button>
         </span>
         ${formErrorMessageMarkup()}
       </label>
@@ -224,9 +299,14 @@ export class BoxTextFieldElement extends FormAssociatedElement {
         this.controlEl = this.shadowRoot.querySelector('[part="control"]');
         this.iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
         this.statusEl = this.shadowRoot.querySelector('[part="status"]');
+        this.revealEl = this.shadowRoot.querySelector('[part="reveal"]');
     }
     setupListeners() {
         this.iconSlot.addEventListener("slotchange", () => this.syncIconSlot());
+        this.revealEl.addEventListener("click", () => {
+            this.revealed = !this.revealed;
+            this.update();
+        });
         this.inputEl.addEventListener("input", event => {
             const nextValue = event.currentTarget.value;
             this.valueInternal = nextValue;
@@ -252,9 +332,29 @@ export class BoxTextFieldElement extends FormAssociatedElement {
             return;
         }
         this.labelEl.textContent = this.label;
-        this.inputEl.type = this.type;
+        const revealActive = this.reveal && this.type === "password";
+        this.inputEl.type = revealActive && this.revealed ? "text" : this.type;
         this.inputEl.placeholder = this.placeholder;
+        if (this.autocomplete) {
+            this.inputEl.setAttribute("autocomplete", this.autocomplete);
+        }
+        else {
+            this.inputEl.removeAttribute("autocomplete");
+        }
         this.syncIconSlot();
+        // The reveal control only exists for a password with reveal opted in.
+        this.revealEl.hidden = !revealActive;
+        this.controlEl.dataset.reveal = revealActive ? "true" : "false";
+        if (revealActive) {
+            // 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");
+            this.revealEl.setAttribute("aria-pressed", String(this.revealed));
+        }
+        else {
+            this.revealed = false;
+        }
         // Trailing status: loading spinner takes precedence over the valid check.
         if (this.loading) {
             this.controlEl.dataset.status = "loading";
@@ -282,11 +382,4 @@ export class BoxTextFieldElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxTextFieldElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTextFieldElement);
-    return BoxTextFieldElement;
-};
+TextField.register();

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

@@ -1,6 +1,7 @@
 import { FormAssociatedElement } from "../../core/index.js";
 import type { FormValue } from "../../core/index.js";
-export declare class BoxTimeFieldElement extends FormAssociatedElement {
+export declare class TimeField extends FormAssociatedElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private inputEl;
@@ -37,4 +38,3 @@ export declare class BoxTimeFieldElement extends FormAssociatedElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTimeFieldElement: (tagName?: string) => typeof BoxTimeFieldElement;

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

@@ -54,7 +54,8 @@ const timeFieldStyles = `
 
   ${boeFormFieldErrorStyles}
 `;
-export class BoxTimeFieldElement extends FormAssociatedElement {
+export class TimeField extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.formObservedAttributes,
@@ -168,7 +169,7 @@ export class BoxTimeFieldElement extends FormAssociatedElement {
      * returns true; on a parse failure emits `parse-error` and returns false.
      */
     setTimeString(value) {
-        const parsed = BoxTimeFieldElement.parseTime(value);
+        const parsed = TimeField.parseTime(value);
         if (parsed === null) {
             this.dispatchEvent(new CustomEvent("parse-error", {
                 bubbles: true,
@@ -244,11 +245,4 @@ export class BoxTimeFieldElement extends FormAssociatedElement {
         this.applyInvalidState(this.inputEl, this.errorEl);
     }
 }
-export const defineBoxTimeFieldElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTimeFieldElement);
-    return BoxTimeFieldElement;
-};
+TimeField.register();

package/dist/components/identity/avatar.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxAvatarElement extends BaseElement {
+export declare class Avatar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private avatarEl;
     /** Corner indicator: `""`/`none` (default), `online`, or `external`. */
@@ -22,4 +23,3 @@ export declare class BoxAvatarElement extends BaseElement {
     private syncBadge;
     private showAvatarFallback;
 }
-export declare const defineBoxAvatarElement: (tagName?: string) => typeof BoxAvatarElement;

package/dist/components/identity/avatar.js

@@ -106,7 +106,8 @@ const avatarStyles = `
     fill: currentColor;
   }
 `;
-export class BoxAvatarElement extends BaseElement {
+export class Avatar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["alt", "badge", "initials", "name", "size", "src", "tone"];
     }
@@ -245,11 +246,4 @@ export class BoxAvatarElement extends BaseElement {
         }
     }
 }
-export const defineBoxAvatarElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxAvatarElement);
-    return BoxAvatarElement;
-};
+Avatar.register();

package/dist/components/identity/contact-datalist-item.d.ts

@@ -5,7 +5,8 @@ import { BaseElement } from "../../core/index.js";
  * `role="option"` that emits `select` with its `value` on click or Enter/Space
  * and reflects `selected` to `aria-selected`; the host owns the list.
  */
-export declare class BoxContactDatalistItemElement extends BaseElement {
+export declare class ContactDatalistItem extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private itemEl;
     private avatarEl;
@@ -36,4 +37,3 @@ export declare class BoxContactDatalistItemElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxContactDatalistItemElement: (tagName?: string) => typeof BoxContactDatalistItemElement;

package/dist/components/identity/contact-datalist-item.js

@@ -133,7 +133,8 @@ const contactStyles = `
  * `role="option"` that emits `select` with its `value` on click or Enter/Space
  * and reflects `selected` to `aria-selected`; the host owns the list.
  */
-export class BoxContactDatalistItemElement extends BaseElement {
+export class ContactDatalistItem extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["disabled", "email", "external", "name", "selected", "src", "subtitle", "value"];
     }
@@ -294,11 +295,4 @@ export class BoxContactDatalistItemElement extends BaseElement {
         this.subtitleEl.textContent = subtitle;
     }
 }
-export const defineBoxContactDatalistItemElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxContactDatalistItemElement);
-    return BoxContactDatalistItemElement;
-};
+ContactDatalistItem.register();

package/dist/components/identity/persona.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxPersonaElement extends BaseElement {
+export declare class Persona extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private avatarEl;
     private nameEl;
@@ -25,4 +26,3 @@ export declare class BoxPersonaElement extends BaseElement {
     protected update(): void;
     private showAvatarFallback;
 }
-export declare const defineBoxPersonaElement: (tagName?: string) => typeof BoxPersonaElement;

package/dist/components/identity/persona.js

@@ -120,7 +120,8 @@ const personaStyles = `
     color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 58%, var(--boe-token-text-text, #222222) 42%);
   }
 `;
-export class BoxPersonaElement extends BaseElement {
+export class Persona extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["description", "initials", "name", "size", "src", "status", "subtitle", "tone"];
     }
@@ -262,11 +263,4 @@ export class BoxPersonaElement extends BaseElement {
         }
     }
 }
-export const defineBoxPersonaElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxPersonaElement);
-    return BoxPersonaElement;
-};
+Persona.register();

package/dist/components/layout/app-shell.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxAppShellElement extends BaseElement {
+export declare class AppShell extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private shellEl;
     private titleEl;
@@ -23,4 +24,3 @@ export declare class BoxAppShellElement extends BaseElement {
     private syncLandmarkVisibility;
     protected update(): void;
 }
-export declare const defineBoxAppShellElement: (tagName?: string) => typeof BoxAppShellElement;

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

@@ -134,7 +134,8 @@ const appShellStyles = `
     }
   }
 `;
-export class BoxAppShellElement extends BaseElement {
+export class AppShell extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["heading", "nav-label", "aside-label"];
     }
@@ -248,11 +249,4 @@ export class BoxAppShellElement extends BaseElement {
         this.syncLandmarkVisibility();
     }
 }
-export const defineBoxAppShellElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxAppShellElement);
-    return BoxAppShellElement;
-};
+AppShell.register();

package/dist/components/layout/divider.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxDividerElement extends BaseElement {
+export declare class Divider extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private dividerEl;
     get label(): string;
@@ -9,4 +10,3 @@ export declare class BoxDividerElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxDividerElement: (tagName?: string) => typeof BoxDividerElement;

package/dist/components/layout/divider.js

@@ -59,7 +59,8 @@ const dividerStyles = `
     color: var(--boe-token-text-text-secondary, #6f6f6f);
   }
 `;
-export class BoxDividerElement extends BaseElement {
+export class Divider extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["label", "orientation"];
     }
@@ -109,11 +110,4 @@ export class BoxDividerElement extends BaseElement {
         }
     }
 }
-export const defineBoxDividerElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDividerElement);
-    return BoxDividerElement;
-};
+Divider.register();

package/dist/components/layout/nav-sidebar.d.ts

@@ -9,8 +9,15 @@ import { BaseElement } from "../../core/index.js";
  * Collapsed icon contract: slot `a`/`button` rows with an icon and a
  * `[data-nav-label]` span. Host exposes `--boe-nav-label-display` (`none` when
  * collapsed) so light-DOM CSS can hide labels without piercing the shadow tree.
+ *
+ * Hiding the label span removes the row's only accessible name, so while
+ * collapsed this element mirrors each row's label text onto `aria-label` (and
+ * `title`, for the hover tooltip) — but only on rows the host has not named
+ * itself, and it removes exactly what it added on expand. The host stays the
+ * authority: an author-set `aria-label` or `title` is never overwritten.
  */
-export declare class BoxNavSidebarElement extends BaseElement {
+export declare class NavSidebar extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private sidebarEl;
     get collapsed(): boolean;
@@ -18,6 +25,13 @@ export declare class BoxNavSidebarElement extends BaseElement {
     get label(): string;
     set label(value: string);
     protected renderTemplate(): void;
+    protected setupListeners(): void;
+    /**
+     * Collapsing hides `[data-nav-label]`, which is a row's only accessible
+     * name. Mirror the label text onto `aria-label`/`title` while collapsed —
+     * marked, so expand removes only what collapse added and a host-authored
+     * name is never touched.
+     */
+    private syncCollapsedRowNames;
     protected update(): void;
 }
-export declare const defineBoxNavSidebarElement: (tagName?: string) => typeof BoxNavSidebarElement;