@unofficialbox/box-open-elements 0.4.0 → 0.6.0

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

@@ -134,8 +134,15 @@ const navSidebarStyles = `
  * 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 class BoxNavSidebarElement extends BaseElement {
+export class NavSidebar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["collapsed", "label"];
     }
@@ -172,19 +179,55 @@ export class BoxNavSidebarElement extends BaseElement {
     `;
         this.sidebarEl = this.shadowRoot.querySelector('[part="sidebar"]');
     }
+    setupListeners() {
+        // Rows slotted in while already collapsed still need their names mirrored.
+        this.shadowRoot
+            ?.querySelector('[part="body"] slot')
+            ?.addEventListener("slotchange", () => {
+            this.update();
+        });
+    }
+    /**
+     * 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.
+     */
+    syncCollapsedRowNames() {
+        for (const row of Array.from(this.querySelectorAll("a, button"))) {
+            if (this.collapsed) {
+                const label = row.querySelector("[data-nav-label]")?.textContent?.trim();
+                if (!label) {
+                    continue;
+                }
+                if (!row.hasAttribute("aria-label")) {
+                    row.setAttribute("aria-label", label);
+                    row.setAttribute("data-boe-managed-name", "");
+                }
+                if (!row.hasAttribute("title")) {
+                    row.setAttribute("title", label);
+                    row.setAttribute("data-boe-managed-title", "");
+                }
+            }
+            else {
+                if (row.hasAttribute("data-boe-managed-name")) {
+                    row.removeAttribute("aria-label");
+                    row.removeAttribute("data-boe-managed-name");
+                }
+                if (row.hasAttribute("data-boe-managed-title")) {
+                    row.removeAttribute("title");
+                    row.removeAttribute("data-boe-managed-title");
+                }
+            }
+        }
+    }
     update() {
         if (!this.sidebarEl) {
             return;
         }
         this.sidebarEl.dataset.collapsed = this.collapsed ? "true" : "false";
         this.sidebarEl.setAttribute("aria-label", this.label);
+        this.syncCollapsedRowNames();
     }
 }
-export const defineBoxNavSidebarElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxNavSidebarElement);
-    return BoxNavSidebarElement;
-};
+NavSidebar.register();

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

@@ -5,7 +5,8 @@ import { BaseElement } from "../../core/index.js";
  * content. The `<section>` is labelled by its heading via `aria-labelledby` so
  * it is announced as a named region. Layout-only — it owns no behavior.
  */
-export declare class BoxSectionElement extends BaseElement {
+export declare class Section extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private headerMainEl;
     get heading(): string;
@@ -17,4 +18,3 @@ export declare class BoxSectionElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxSectionElement: (tagName?: string) => typeof BoxSectionElement;

package/dist/components/layout/section.js

@@ -72,7 +72,8 @@ const sectionStyles = `
  * content. The `<section>` is labelled by its heading via `aria-labelledby` so
  * it is announced as a named region. Layout-only — it owns no behavior.
  */
-export class BoxSectionElement extends BaseElement {
+export class Section extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["description", "eyebrow", "heading"];
     }
@@ -133,11 +134,4 @@ export class BoxSectionElement extends BaseElement {
     `;
     }
 }
-export const defineBoxSectionElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSectionElement);
-    return BoxSectionElement;
-};
+Section.register();

package/dist/components/layout/sidebar-toggle-button.d.ts

@@ -6,7 +6,8 @@ import { BaseElement } from "../../core/index.js";
  * property. `controls` reflects to `aria-controls` so assistive tech can tie the
  * button to the region it operates.
  */
-export declare class BoxSidebarToggleButtonElement extends BaseElement {
+export declare class SidebarToggleButton extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private buttonEl;
     /** Which side the companion sidebar sits on: `left` (default) or `right`. */
@@ -26,4 +27,3 @@ export declare class BoxSidebarToggleButtonElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxSidebarToggleButtonElement: (tagName?: string) => typeof BoxSidebarToggleButtonElement;

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

@@ -58,7 +58,8 @@ const sidebarToggleButtonStyles = `
  * property. `controls` reflects to `aria-controls` so assistive tech can tie the
  * button to the region it operates.
  */
-export class BoxSidebarToggleButtonElement extends BaseElement {
+export class SidebarToggleButton extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["controls", "disabled", "expanded", "label", "direction"];
     }
@@ -146,11 +147,4 @@ export class BoxSidebarToggleButtonElement extends BaseElement {
         this.buttonEl.disabled = this.disabled;
     }
 }
-export const defineBoxSidebarToggleButtonElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSidebarToggleButtonElement);
-    return BoxSidebarToggleButtonElement;
-};
+SidebarToggleButton.register();

package/dist/components/layout/split-view.d.ts

@@ -1,5 +1,10 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxSplitViewElement extends BaseElement {
+/** Detail of `detail-dismissed`: what asked the slide-over to close. */
+export interface SplitViewDetailDismissedDetail {
+    source: "escape";
+}
+export declare class SplitView extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private isResizing;
     private splitViewEl;
@@ -10,10 +15,19 @@ export declare class BoxSplitViewElement extends BaseElement {
     set ratio(value: number);
     get resizable(): boolean;
     set resizable(value: boolean);
+    /** "auto" collapses to master-detail when the container narrows. */
+    get collapse(): string;
+    set collapse(value: string);
+    /**
+     * Host-controlled: whether the secondary pane shows as a slide-over while
+     * collapsed. The host sets it on selection and clears it on
+     * `detail-dismissed` — selection state stays where it lives, in the list.
+     */
+    get detailOpen(): boolean;
+    set detailOpen(value: boolean);
     private setRatioFromResize;
     private stopResize;
     protected renderTemplate(): void;
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxSplitViewElement: (tagName?: string) => typeof BoxSplitViewElement;

package/dist/components/layout/split-view.js

@@ -33,10 +33,47 @@ const splitViewStyles = `
     height: 100%;
     background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
   }
+
+  :host {
+    container-type: inline-size;
+  }
+
+  /* Master-detail collapse (opt-in via collapse="auto"): when the container
+     narrows, the primary pane takes the full width and the secondary pane
+     becomes a slide-over that the host opens with detail-open — typically on
+     selection — and closes by clearing it (Escape asks via detail-dismissed).
+     The slotted content never moves; only the shadow wrapper changes shape. */
+  @container (max-width: 640px) {
+    :host([collapse="auto"]) [part="split-view"] {
+      grid-template-columns: minmax(0, 1fr) !important;
+    }
+
+    :host([collapse="auto"]) [part="separator"] {
+      display: none;
+    }
+
+    :host([collapse="auto"]) [part="secondary"] {
+      display: none;
+    }
+
+    :host([collapse="auto"][detail-open]) [part="secondary"] {
+      display: block;
+      position: fixed;
+      inset-block: 0;
+      inset-inline-end: 0;
+      z-index: 1100;
+      width: min(90vw, 26rem);
+      overflow: auto;
+      background: var(--boe-token-surface-surface, #ffffff);
+      border-inline-start: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+      box-shadow: -12px 0 32px rgb(0 0 0 / 18%);
+    }
+  }
 `;
-export class BoxSplitViewElement extends BaseElement {
+export class SplitView extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["label", "ratio", "resizable"];
+        return ["collapse", "detail-open", "label", "ratio", "resizable"];
     }
     isResizing = false;
     splitViewEl;
@@ -63,6 +100,29 @@ export class BoxSplitViewElement extends BaseElement {
     set resizable(value) {
         this.toggleAttribute("resizable", value);
     }
+    /** "auto" collapses to master-detail when the container narrows. */
+    get collapse() {
+        return this.getAttribute("collapse") ?? "";
+    }
+    set collapse(value) {
+        if (value) {
+            this.setAttribute("collapse", value);
+        }
+        else {
+            this.removeAttribute("collapse");
+        }
+    }
+    /**
+     * Host-controlled: whether the secondary pane shows as a slide-over while
+     * collapsed. The host sets it on selection and clears it on
+     * `detail-dismissed` — selection state stays where it lives, in the list.
+     */
+    get detailOpen() {
+        return this.hasAttribute("detail-open");
+    }
+    set detailOpen(value) {
+        this.toggleAttribute("detail-open", Boolean(value));
+    }
     setRatioFromResize(nextRatio) {
         const clamped = Math.max(0.2, Math.min(0.8, nextRatio));
         const previous = this.ratio;
@@ -107,6 +167,26 @@ export class BoxSplitViewElement extends BaseElement {
         this.separatorEl = this.shadowRoot.querySelector('[part="separator"]');
     }
     setupListeners() {
+        // Escape inside the collapsed slide-over asks the host to close it; the
+        // host owns detail-open, so this only asks.
+        this.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key !== "Escape" || !this.detailOpen || this.collapse !== "auto") {
+                return;
+            }
+            // The slide-over only exists under the 640px container query; on a wide
+            // container the secondary pane is an ordinary pane and Escape means
+            // nothing. Mirror the CSS condition rather than emitting a phantom ask.
+            if (this.offsetWidth > 640) {
+                return;
+            }
+            keyboardEvent.preventDefault();
+            this.dispatchEvent(new CustomEvent("detail-dismissed", {
+                bubbles: true,
+                composed: true,
+                detail: { source: "escape" },
+            }));
+        });
         this.separatorEl.addEventListener("pointerdown", event => {
             const pointerEvent = event;
             this.isResizing = true;
@@ -147,11 +227,4 @@ export class BoxSplitViewElement extends BaseElement {
         this.separatorEl.hidden = !resizable;
     }
 }
-export const defineBoxSplitViewElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxSplitViewElement);
-    return BoxSplitViewElement;
-};
+SplitView.register();

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

@@ -4,7 +4,8 @@ type BoxAccordionItem = {
     label: string;
     value: string;
 };
-export declare class BoxAccordionElement extends BaseElement {
+export declare class Accordion extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     /** Flat variant with no outer card border/background. */
     get borderless(): boolean;
@@ -24,5 +25,4 @@ export declare class BoxAccordionElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxAccordionElement: (tagName?: string) => typeof BoxAccordionElement;
 export {};

package/dist/components/navigation/accordion.js

@@ -94,7 +94,8 @@ const accordionStyles = `
 
   ${boeNeutralInteractiveStyles('[part="trigger"]')}
 `;
-export class BoxAccordionElement extends BaseElement {
+export class Accordion extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["items", "label", "value", "borderless"];
     }
@@ -258,11 +259,4 @@ export class BoxAccordionElement extends BaseElement {
         });
     }
 }
-export const defineBoxAccordionElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxAccordionElement);
-    return BoxAccordionElement;
-};
+Accordion.register();

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

@@ -11,7 +11,8 @@ export interface BreadcrumbItem {
  * `Breadcrumb`. When the trail is longer than `max-items` the middle crumbs
  * collapse into an ellipsis, always keeping the first crumb and the last two.
  */
-export declare class BoxBreadcrumbElement extends BaseElement {
+export declare class Breadcrumb extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private listEl;
     get items(): BreadcrumbItem[];
@@ -27,4 +28,3 @@ export declare class BoxBreadcrumbElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxBreadcrumbElement: (tagName?: string) => typeof BoxBreadcrumbElement;

package/dist/components/navigation/breadcrumb.js

@@ -82,7 +82,8 @@ const ELLIPSIS = Symbol("ellipsis");
  * `Breadcrumb`. When the trail is longer than `max-items` the middle crumbs
  * collapse into an ellipsis, always keeping the first crumb and the last two.
  */
-export class BoxBreadcrumbElement extends BaseElement {
+export class Breadcrumb extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["items", "label", "max-items"];
     }
@@ -180,11 +181,4 @@ export class BoxBreadcrumbElement extends BaseElement {
             .join("");
     }
 }
-export const defineBoxBreadcrumbElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxBreadcrumbElement);
-    return BoxBreadcrumbElement;
-};
+Breadcrumb.register();

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

@@ -3,7 +3,8 @@ type BoxTabOption = {
     label: string;
     value: string;
 };
-export declare class BoxTabsElement extends BaseElement {
+export declare class Tabs extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private valueInternal;
     private lastOptionsJson;
@@ -27,5 +28,4 @@ export declare class BoxTabsElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxTabsElement: (tagName?: string) => typeof BoxTabsElement;
 export {};

package/dist/components/navigation/tabs.js

@@ -105,7 +105,8 @@ const tabsStyles = `
     border-radius: ${boeRadius.med};
   }
 `;
-export class BoxTabsElement extends BaseElement {
+export class Tabs extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["label", "layout", "options", "value"];
     }
@@ -327,11 +328,4 @@ export class BoxTabsElement extends BaseElement {
         });
     }
 }
-export const defineBoxTabsElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxTabsElement);
-    return BoxTabsElement;
-};
+Tabs.register();

package/dist/components/overlays/command-palette.d.ts

@@ -0,0 +1,62 @@
+import type { CommandDescriptor } from "./command-types.js";
+import { BaseElement } from "../../core/index.js";
+/**
+ * Keyboard-first action launcher (CLM gap 4) over the existing overlay and
+ * listbox machinery.
+ *
+ * Follows the ARIA combobox-with-listbox pattern: focus never leaves the
+ * search input, so typing and navigating are the same gesture. The active
+ * option is communicated with `aria-activedescendant` rather than by moving
+ * focus, which is what lets Up/Down browse results while the query stays
+ * editable.
+ *
+ * The host owns what commands mean — the palette only reports the choice.
+ */
+export declare class CommandPalette extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    private hostEl;
+    private readonly focusRestore;
+    private openValue;
+    private wasOpen;
+    private query;
+    private activeIndex;
+    /** Flattened, ranked matches — the index space the keyboard walks. */
+    private rankedMatches;
+    private commandsRaw;
+    private commandsCache;
+    private recentIdsValue;
+    private readonly onDocumentKeydown;
+    get open(): boolean;
+    set open(value: boolean);
+    get placeholder(): string;
+    set placeholder(value: string);
+    /**
+     * Global shortcut that opens the palette, e.g. `mod+k`. `mod` resolves to
+     * Cmd or Ctrl per platform. Omit to let the host own the trigger.
+     */
+    get hotkey(): string;
+    set hotkey(value: string);
+    get hideDisabled(): boolean;
+    set hideDisabled(value: boolean);
+    /** Command catalogue; JSON payloads are validated per record. */
+    get commands(): CommandDescriptor[];
+    set commands(value: CommandDescriptor[]);
+    /** Most recently run command ids, most recent first; boosts ranking. */
+    get recentIds(): string[];
+    set recentIds(value: string[]);
+    /** The ranked matches currently on screen. */
+    get visibleCommands(): CommandDescriptor[];
+    show(): void;
+    hide(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private runActive;
+    private moveActive;
+    private scrollActiveIntoView;
+    private optionHtml;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}