@unofficialbox/box-open-elements 0.3.0 → 0.5.0

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

@@ -10,7 +10,8 @@ import { BaseElement } from "../../core/index.js";
  * `[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.
  */
-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;
@@ -20,4 +21,3 @@ export declare class BoxNavSidebarElement extends BaseElement {
     protected renderTemplate(): void;
     protected update(): void;
 }
-export declare const defineBoxNavSidebarElement: (tagName?: string) => typeof BoxNavSidebarElement;

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

@@ -88,6 +88,29 @@ const navSidebarStyles = `
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 8%, var(--boe-token-surface-surface, #ffffff) 92%);
   }
 
+  /* Grouped nav (NavList): slot a [data-nav-group] element as a section header,
+     and <hr> as a divider. Group labels collapse to nothing in the icon strip. */
+  [part="body"] ::slotted([data-nav-group]) {
+    display: block;
+    padding: 0.5rem 0.45rem 0.15rem;
+    font-size: 0.72rem;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="sidebar"][data-collapsed="true"] ::slotted([data-nav-group]) {
+    display: none;
+  }
+
+  [part="body"] ::slotted(hr) {
+    inline-size: 100%;
+    border: 0;
+    border-top: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 68%, transparent);
+    margin: 0.35rem 0.2rem;
+  }
+
   [part="sidebar"][data-collapsed="true"] ::slotted(a),
   [part="sidebar"][data-collapsed="true"] ::slotted(button) {
     justify-content: center;
@@ -112,7 +135,8 @@ const navSidebarStyles = `
  * `[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.
  */
-export class BoxNavSidebarElement extends BaseElement {
+export class NavSidebar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["collapsed", "label"];
     }
@@ -157,11 +181,4 @@ export class BoxNavSidebarElement extends BaseElement {
         this.sidebarEl.setAttribute("aria-label", this.label);
     }
 }
-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,9 +6,13 @@ 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`. */
+    get direction(): string;
+    set direction(value: string);
     get expanded(): boolean;
     set expanded(value: boolean);
     get disabled(): boolean;
@@ -23,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

@@ -37,10 +37,19 @@ const sidebarToggleButtonStyles = `
     color: var(--boe-token-text-text, #222222);
   }
 
-  /* Rotate the chevron to point the way the next activation will move. */
+  /* Point the glyph the way the next activation will move (left sidebar default). */
   [part="button"][data-expanded="false"] svg {
     transform: scaleX(-1);
   }
+
+  /* Right-side sidebar mirrors the direction. */
+  [part="button"][data-direction="right"][data-expanded="true"] svg {
+    transform: scaleX(-1);
+  }
+
+  [part="button"][data-direction="right"][data-expanded="false"] svg {
+    transform: none;
+  }
 `;
 /**
  * A disclosure control that expands and collapses a companion `box-nav-sidebar`.
@@ -49,11 +58,19 @@ 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"];
+        return ["controls", "disabled", "expanded", "label", "direction"];
     }
     buttonEl;
+    /** Which side the companion sidebar sits on: `left` (default) or `right`. */
+    get direction() {
+        return this.getAttribute("direction") === "right" ? "right" : "left";
+    }
+    set direction(value) {
+        this.setAttribute("direction", value);
+    }
     get expanded() {
         // Default to expanded: a sidebar renders open until the user collapses it.
         return !this.hasAttribute("expanded") || this.getAttribute("expanded") !== "false";
@@ -116,8 +133,11 @@ export class BoxSidebarToggleButtonElement extends BaseElement {
         }
         const expanded = this.expanded;
         this.buttonEl.dataset.expanded = expanded ? "true" : "false";
+        this.buttonEl.dataset.direction = this.direction;
         this.buttonEl.setAttribute("aria-expanded", expanded ? "true" : "false");
         this.buttonEl.setAttribute("aria-label", this.label);
+        // Native hover tooltip reflects the action the next click performs.
+        this.buttonEl.title = expanded ? "Collapse sidebar" : "Expand sidebar";
         if (this.controls) {
             this.buttonEl.setAttribute("aria-controls", this.controls);
         }
@@ -127,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,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxSplitViewElement extends BaseElement {
+export declare class SplitView extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private isResizing;
     private splitViewEl;
@@ -16,4 +17,3 @@ export declare class BoxSplitViewElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxSplitViewElement: (tagName?: string) => typeof BoxSplitViewElement;

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

@@ -34,7 +34,8 @@ const splitViewStyles = `
     background: color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
   }
 `;
-export class BoxSplitViewElement extends BaseElement {
+export class SplitView extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["label", "ratio", "resizable"];
     }
@@ -147,11 +148,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,8 +4,12 @@ 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;
+    set borderless(value: boolean);
     private valueInternal;
     private lastItemsJson;
     private accordionEl;
@@ -21,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

@@ -84,11 +84,27 @@ const accordionStyles = `
     display: none;
   }
 
+  /* Borderless variant: drop the outer card chrome, keep row dividers. */
+  :host([borderless]) [part="accordion"] {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    overflow: visible;
+  }
+
   ${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"];
+        return ["items", "label", "value", "borderless"];
+    }
+    /** Flat variant with no outer card border/background. */
+    get borderless() {
+        return this.hasAttribute("borderless");
+    }
+    set borderless(value) {
+        this.toggleAttribute("borderless", Boolean(value));
     }
     valueInternal = "";
     lastItemsJson = "";
@@ -158,7 +174,7 @@ export class BoxAccordionElement extends BaseElement {
               role="region"
               aria-labelledby="${triggerId}"
               ${isOpen ? "" : "hidden"}
-            >${escapeHtml(item.content ?? "")}</div>
+            ><slot name="panel-${escapeHtml(item.value)}">${escapeHtml(item.content ?? "")}</slot></div>
           </section>
         `;
         })
@@ -243,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/context-menu.d.ts

@@ -12,7 +12,8 @@ export interface ContextMenuItem {
  * menu at the pointer, positioned with `foundations/overlay` so it stays in the
  * viewport. Full keyboard menu: arrows, Home/End, Enter/Space, Escape.
  */
-export declare class BoxContextMenuElement extends BaseElement {
+export declare class ContextMenu extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     private targetEl;
@@ -39,4 +40,3 @@ export declare class BoxContextMenuElement extends BaseElement {
     private unbindDocument;
     protected update(): void;
 }
-export declare const defineBoxContextMenuElement: (tagName?: string) => typeof BoxContextMenuElement;

package/dist/components/overlays/context-menu.js

@@ -82,7 +82,8 @@ const contextMenuStyles = `
  * menu at the pointer, positioned with `foundations/overlay` so it stays in the
  * viewport. Full keyboard menu: arrows, Home/End, Enter/Space, Escape.
  */
-export class BoxContextMenuElement extends BaseElement {
+export class ContextMenu extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["items", "disabled"];
     }
@@ -250,11 +251,4 @@ export class BoxContextMenuElement extends BaseElement {
             this.renderItems();
     }
 }
-export const defineBoxContextMenuElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxContextMenuElement);
-    return BoxContextMenuElement;
-};
+ContextMenu.register();

package/dist/components/overlays/dialog.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxDialogElement extends BaseElement {
+export declare class Dialog extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     private wasOpen;
@@ -31,4 +32,3 @@ export declare class BoxDialogElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxDialogElement: (tagName?: string) => typeof BoxDialogElement;

package/dist/components/overlays/dialog.js

@@ -104,7 +104,8 @@ const dialogStyles = `
   ${boeNeutralInteractiveStyles('[part="cancel"]')}
   ${boeBrandInteractiveStyles('[part="confirm"]')}
 `;
-export class BoxDialogElement extends BaseElement {
+export class Dialog extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["confirm-label", "description", "heading", "open", "size"];
     }
@@ -300,11 +301,4 @@ export class BoxDialogElement extends BaseElement {
         }
     }
 }
-export const defineBoxDialogElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDialogElement);
-    return BoxDialogElement;
-};
+Dialog.register();

package/dist/components/overlays/drawer.d.ts

@@ -1,5 +1,6 @@
 import { BaseElement } from "../../core/index.js";
-export declare class BoxDrawerElement extends BaseElement {
+export declare class Drawer extends BaseElement {
+    static readonly tagName: string;
     static get observedAttributes(): string[];
     private openValue;
     private wasOpen;
@@ -29,4 +30,3 @@ export declare class BoxDrawerElement extends BaseElement {
     protected setupListeners(): void;
     protected update(): void;
 }
-export declare const defineBoxDrawerElement: (tagName?: string) => typeof BoxDrawerElement;

package/dist/components/overlays/drawer.js

@@ -108,7 +108,8 @@ const drawerStyles = `
     overflow: auto;
   }
 `;
-export class BoxDrawerElement extends BaseElement {
+export class Drawer extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return ["description", "heading", "open", "position"];
     }
@@ -313,11 +314,4 @@ export class BoxDrawerElement extends BaseElement {
         }
     }
 }
-export const defineBoxDrawerElement = (tagName = DEFAULT_TAG_NAME) => {
-    const existingElement = customElements.get(tagName);
-    if (existingElement) {
-        return existingElement;
-    }
-    customElements.define(tagName, BoxDrawerElement);
-    return BoxDrawerElement;
-};
+Drawer.register();

package/dist/components/overlays/guide-tooltip.d.ts

@@ -0,0 +1,51 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * A guided-tour callout that points at a target element and walks a user through
+ * a sequence of steps. Anchor it with `for` (the id of a target) or a slotted
+ * `anchor` element; it self-anchors to the host otherwise. It renders a
+ * `heading`, a body (default slot), a `step`/`total` indicator, and Back/Next/
+ * Close controls, emitting `next`, `back`, and `close` (each with `detail.step`)
+ * so the host can advance the tour (moving `for`/`step`). Positioned as a
+ * viewport-fixed overlay via `foundations/overlay`.
+ */
+export declare class GuideTooltip extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    private openValue;
+    private positionCleanup;
+    private headingId;
+    private calloutEl;
+    private closeEl;
+    private headingEl;
+    private stepEl;
+    private backEl;
+    private nextEl;
+    private anchorSlot;
+    get open(): boolean;
+    set open(value: boolean);
+    get heading(): string;
+    set heading(value: string);
+    get placement(): string;
+    set placement(value: string);
+    private resolvedPlacement;
+    /** 1-based current step; paired with `total` for the "n of m" indicator. */
+    get step(): number;
+    set step(value: number);
+    get total(): number;
+    set total(value: number);
+    get htmlFor(): string;
+    set htmlFor(value: string);
+    private get nextLabel();
+    private get backLabel();
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    show(): void;
+    hide(): void;
+    /** Resolve the element the callout points at. */
+    private resolveAnchor;
+    private stopTracking;
+    disconnectedCallback(): void;
+    protected renderTemplate(): void;
+    private emit;
+    protected setupListeners(): void;
+    protected update(): void;
+}