@unofficialbox/box-open-elements 0.3.0 → 0.5.0

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

@@ -1,6 +1,10 @@
 import { FormAssociatedElement, boeFormFieldErrorStyles, boeFormFieldSupportStyles, formDescriptionMarkup, formErrorMessageMarkup, } from "../../core/index.js";
 import { boeControl, boeInputControlStyles, boeSpace } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing, boeReducedMotionStyles, } from "../../foundations/motion/index.js";
 const DEFAULT_TAG_NAME = "box-text-field";
+const VALID_INPUT_TYPES = new Set(["text", "email", "tel", "url", "password", "search", "number"]);
+const spinnerMarkup = '<span part="spinner" aria-hidden="true"></span>';
+const validMarkup = '<svg part="valid-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.5 11L3 7.5l1-1 2.5 2.5L12 3.5l1 1z" fill="currentColor"/></svg>';
 /** Input chrome tracks BUE `@mixin box-inputs` (`src/styles/_inputs.scss`). */
 const textFieldStyles = `
   :host {
@@ -33,16 +37,92 @@ const textFieldStyles = `
     color: var(--boe-token-text-text-placeholder, #909090);
   }
 
+  /* Control wrapper holds the input plus optional leading icon and trailing
+     status. With no adornments it is layout-neutral (default renders unchanged). */
+  [part="control"] {
+    position: relative;
+    display: block;
+  }
+
+  [part="icon"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0.6rem;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    pointer-events: none;
+  }
+
+  [part="icon"]:not(.has-content) {
+    display: none;
+  }
+
+  [part="icon"]::slotted(*) {
+    inline-size: 1rem;
+    block-size: 1rem;
+    display: block;
+  }
+
+  [part="control"][data-has-icon="true"] [part="input"] {
+    padding-inline-start: 2.1rem;
+  }
+
+  [part="status"] {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 0.65rem;
+    transform: translateY(-50%);
+    display: none;
+    align-items: center;
+  }
+
+  [part="control"][data-status="loading"] [part="status"],
+  [part="control"][data-status="valid"] [part="status"] {
+    display: inline-flex;
+  }
+
+  [part="control"][data-status="loading"] [part="input"],
+  [part="control"][data-status="valid"] [part="input"] {
+    padding-inline-end: 2.2rem;
+  }
+
+  [part="spinner"] {
+    inline-size: 1rem;
+    block-size: 1rem;
+    border-radius: 999px;
+    border: 2px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 20%, transparent);
+    border-top-color: var(--boe-token-surface-surface-brand, #0061d5);
+    animation: boe-text-field-spin ${boeMotionDuration.spin} ${boeMotionEasing.linear} infinite;
+  }
+
+  @keyframes boe-text-field-spin {
+    to { transform: rotate(360deg); }
+  }
+
+  ${boeReducedMotionStyles('[part="spinner"]', "animation-duration: 1.6s;")}
+
+  [part="valid-icon"] {
+    inline-size: 1.05rem;
+    block-size: 1.05rem;
+    color: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
   ${boeFormFieldErrorStyles}
   ${boeFormFieldSupportStyles}
 `;
-export class BoxTextFieldElement extends FormAssociatedElement {
+export class TextField extends FormAssociatedElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             ...FormAssociatedElement.fieldObservedAttributes,
             "disabled",
             "label",
             "placeholder",
+            "type",
+            "loading",
+            "valid",
             "value",
         ];
     }
@@ -51,6 +131,31 @@ export class BoxTextFieldElement extends FormAssociatedElement {
     labelEl;
     descriptionEl;
     errorEl;
+    controlEl;
+    iconSlot;
+    statusEl;
+    /** Input type passthrough (text/email/tel/url/password/search/number). */
+    get type() {
+        const value = this.getAttribute("type");
+        return value && VALID_INPUT_TYPES.has(value) ? value : "text";
+    }
+    set type(value) {
+        this.setAttribute("type", value);
+    }
+    /** Shows a trailing spinner (e.g. while validating/looking up asynchronously). */
+    get loading() {
+        return this.hasAttribute("loading");
+    }
+    set loading(value) {
+        this.toggleAttribute("loading", Boolean(value));
+    }
+    /** Shows a trailing success check (explicit valid affirmation). */
+    get valid() {
+        return this.hasAttribute("valid");
+    }
+    set valid(value) {
+        this.toggleAttribute("valid", Boolean(value));
+    }
     get value() {
         return this.valueInternal;
     }
@@ -105,7 +210,11 @@ export class BoxTextFieldElement extends FormAssociatedElement {
       <label part="field">
         <span part="label"></span>
         ${formDescriptionMarkup()}
-        <input type="text" part="input" />
+        <span part="control">
+          <slot name="icon" part="icon"></slot>
+          <input type="text" part="input" />
+          <span part="status" aria-hidden="true"></span>
+        </span>
         ${formErrorMessageMarkup()}
       </label>
     `;
@@ -113,8 +222,12 @@ export class BoxTextFieldElement extends FormAssociatedElement {
         this.descriptionEl = this.shadowRoot.querySelector('[part="description"]');
         this.inputEl = this.shadowRoot.querySelector('[part="input"]');
         this.errorEl = this.shadowRoot.querySelector('[part="error-message"]');
+        this.controlEl = this.shadowRoot.querySelector('[part="control"]');
+        this.iconSlot = this.shadowRoot.querySelector('slot[name="icon"]');
+        this.statusEl = this.shadowRoot.querySelector('[part="status"]');
     }
     setupListeners() {
+        this.iconSlot.addEventListener("slotchange", () => this.syncIconSlot());
         this.inputEl.addEventListener("input", event => {
             const nextValue = event.currentTarget.value;
             this.valueInternal = nextValue;
@@ -127,12 +240,35 @@ export class BoxTextFieldElement extends FormAssociatedElement {
             }));
         });
     }
+    syncIconSlot() {
+        if (!this.iconSlot || !this.controlEl) {
+            return;
+        }
+        const hasContent = this.iconSlot.assignedNodes({ flatten: true }).length > 0;
+        this.iconSlot.classList.toggle("has-content", hasContent);
+        this.controlEl.dataset.hasIcon = hasContent ? "true" : "false";
+    }
     update() {
         if (!this.inputEl || !this.labelEl || !this.errorEl) {
             return;
         }
         this.labelEl.textContent = this.label;
+        this.inputEl.type = this.type;
         this.inputEl.placeholder = this.placeholder;
+        this.syncIconSlot();
+        // Trailing status: loading spinner takes precedence over the valid check.
+        if (this.loading) {
+            this.controlEl.dataset.status = "loading";
+            this.statusEl.innerHTML = spinnerMarkup;
+        }
+        else if (this.valid) {
+            this.controlEl.dataset.status = "valid";
+            this.statusEl.innerHTML = validMarkup;
+        }
+        else {
+            this.controlEl.removeAttribute("data-status");
+            this.statusEl.innerHTML = "";
+        }
         if (this.shadowRoot?.activeElement !== this.inputEl) {
             this.inputEl.value = this.valueInternal;
         }
@@ -147,11 +283,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;
@@ -21,9 +22,19 @@ export declare class BoxTimeFieldElement extends FormAssociatedElement {
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     protected getFormValue(): FormValue;
     protected restoreFormValue(value: FormValue): void;
+    /**
+     * Parse a human time string in 24-hour (`13:30`) or 12-hour (`1:30 PM`,
+     * `1 pm`) form to canonical `HH:MM`. Returns `""` for empty input and `null`
+     * when it cannot be parsed.
+     */
+    static parseTime(raw: string): string | null;
+    /**
+     * Set the value from a human 12h/24h string. On success updates the value and
+     * returns true; on a parse failure emits `parse-error` and returns false.
+     */
+    setTimeString(value: string): boolean;
     private syncValue;
     protected renderTemplate(): void;
     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,
@@ -132,6 +133,57 @@ export class BoxTimeFieldElement extends FormAssociatedElement {
             this.update();
         }
     }
+    /**
+     * Parse a human time string in 24-hour (`13:30`) or 12-hour (`1:30 PM`,
+     * `1 pm`) form to canonical `HH:MM`. Returns `""` for empty input and `null`
+     * when it cannot be parsed.
+     */
+    static parseTime(raw) {
+        const value = raw.trim().toLowerCase();
+        if (!value) {
+            return "";
+        }
+        const twentyFour = value.match(/^([01]?\d|2[0-3]):([0-5]\d)$/);
+        if (twentyFour) {
+            return `${twentyFour[1].padStart(2, "0")}:${twentyFour[2]}`;
+        }
+        const twelve = value.match(/^(\d{1,2})(?::([0-5]\d))?\s*(am|pm)$/);
+        if (twelve) {
+            let hours = Number.parseInt(twelve[1], 10);
+            const minutes = twelve[2] ?? "00";
+            if (hours < 1 || hours > 12) {
+                return null;
+            }
+            if (twelve[3] === "pm" && hours !== 12) {
+                hours += 12;
+            }
+            else if (twelve[3] === "am" && hours === 12) {
+                hours = 0;
+            }
+            return `${String(hours).padStart(2, "0")}:${minutes}`;
+        }
+        return null;
+    }
+    /**
+     * Set the value from a human 12h/24h string. On success updates the value and
+     * returns true; on a parse failure emits `parse-error` and returns false.
+     */
+    setTimeString(value) {
+        const parsed = TimeField.parseTime(value);
+        if (parsed === null) {
+            this.dispatchEvent(new CustomEvent("parse-error", {
+                bubbles: true,
+                composed: true,
+                detail: { value },
+            }));
+            return false;
+        }
+        this.syncValue(parsed);
+        if (this.isRendered) {
+            this.update();
+        }
+        return true;
+    }
     syncValue(nextValue) {
         this.valueInternal = nextValue;
         this.setAttribute("value", nextValue);
@@ -193,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,7 +1,11 @@
 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`. */
+    get badge(): string;
+    set badge(value: string);
     get alt(): string;
     set alt(value: string);
     get initials(): string;
@@ -16,6 +20,6 @@ export declare class BoxAvatarElement extends BaseElement {
     set tone(value: string);
     protected renderTemplate(): void;
     protected update(): void;
+    private syncBadge;
     private showAvatarFallback;
 }
-export declare const defineBoxAvatarElement: (tagName?: string) => typeof BoxAvatarElement;

package/dist/components/identity/avatar.js

@@ -76,12 +76,50 @@ const avatarStyles = `
   [part="image"][hidden] {
     display: none;
   }
+
+  /* Corner status/external indicator. Absent by default (no layout impact). */
+  [part="badge"] {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    box-sizing: border-box;
+    inline-size: max(8px, calc(var(--avatar-size, ${DEFAULT_SIZE}px) * 0.34));
+    block-size: max(8px, calc(var(--avatar-size, ${DEFAULT_SIZE}px) * 0.34));
+    border-radius: 999px;
+    border: 2px solid var(--boe-token-surface-surface, #ffffff);
+    display: grid;
+    place-items: center;
+    color: #ffffff;
+  }
+
+  [part="badge"][data-badge="online"] {
+    background: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
+  [part="badge"][data-badge="external"] {
+    background: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
+  }
+
+  [part="badge"] svg {
+    inline-size: 62%;
+    block-size: 62%;
+    fill: currentColor;
+  }
 `;
-export class BoxAvatarElement extends BaseElement {
+export class Avatar extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["alt", "initials", "name", "size", "src", "tone"];
+        return ["alt", "badge", "initials", "name", "size", "src", "tone"];
     }
     avatarEl;
+    /** Corner indicator: `""`/`none` (default), `online`, or `external`. */
+    get badge() {
+        const value = this.getAttribute("badge");
+        return value === "online" || value === "external" ? value : "none";
+    }
+    set badge(value) {
+        this.setAttribute("badge", value);
+    }
     get alt() {
         return this.getAttribute("alt") ?? this.name;
     }
@@ -171,6 +209,33 @@ export class BoxAvatarElement extends BaseElement {
             }
             this.showAvatarFallback(existingFallback, fallback);
         }
+        this.syncBadge();
+    }
+    syncBadge() {
+        const badge = this.badge;
+        let badgeEl = this.avatarEl.querySelector('[part="badge"]');
+        if (badge === "none") {
+            badgeEl?.remove();
+            return;
+        }
+        if (!badgeEl) {
+            badgeEl = document.createElement("span");
+            badgeEl.setAttribute("part", "badge");
+            this.avatarEl.append(badgeEl);
+        }
+        badgeEl.dataset.badge = badge;
+        if (badge === "external") {
+            badgeEl.setAttribute("aria-label", "External user");
+            badgeEl.setAttribute("role", "img");
+            // Outward arrow marks an external collaborator.
+            badgeEl.innerHTML =
+                '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3h7v7h-2V6.4l-6.3 6.3-1.4-1.4L9.6 5H6V3z"/></svg>';
+        }
+        else {
+            badgeEl.setAttribute("aria-label", "Online");
+            badgeEl.setAttribute("role", "img");
+            badgeEl.innerHTML = "";
+        }
     }
     showAvatarFallback(existingFallback, fallback) {
         const fallbackEl = existingFallback ?? document.createElement("span");
@@ -181,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,12 +5,21 @@ 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;
     private nameEl;
+    private externalEl;
+    private subtitleEl;
     private emailEl;
+    /** Marks the contact as an external collaborator. */
+    get external(): boolean;
+    set external(value: boolean);
+    /** Optional secondary detail line below the email (e.g. role or company). */
+    get subtitle(): string;
+    set subtitle(value: string);
     get name(): string;
     set name(value: string);
     get email(): string;
@@ -28,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

@@ -71,6 +71,13 @@ const contactStyles = `
     gap: 0.1rem;
   }
 
+  [part="name-row"] {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    min-inline-size: 0;
+  }
+
   [part="name"] {
     font-size: 0.9rem;
     font-weight: 600;
@@ -79,6 +86,35 @@ const contactStyles = `
     white-space: nowrap;
   }
 
+  /* External-collaborator marker beside the name. */
+  [part="external"] {
+    flex: none;
+    font-size: 0.66rem;
+    font-weight: 700;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    padding: 1px 5px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 18%, var(--boe-token-surface-surface, #ffffff) 82%);
+    color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 55%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="external"][hidden] {
+    display: none;
+  }
+
+  [part="subtitle"] {
+    font-size: 0.74rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  [part="subtitle"][hidden] {
+    display: none;
+  }
+
   [part="email"] {
     font-size: 0.78rem;
     color: var(--boe-token-text-text-secondary, #6f6f6f);
@@ -97,14 +133,31 @@ 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", "name", "selected", "src", "value"];
+        return ["disabled", "email", "external", "name", "selected", "src", "subtitle", "value"];
     }
     itemEl;
     avatarEl;
     nameEl;
+    externalEl;
+    subtitleEl;
     emailEl;
+    /** Marks the contact as an external collaborator. */
+    get external() {
+        return this.hasAttribute("external");
+    }
+    set external(value) {
+        this.toggleAttribute("external", value);
+    }
+    /** Optional secondary detail line below the email (e.g. role or company). */
+    get subtitle() {
+        return this.getAttribute("subtitle") ?? "";
+    }
+    set subtitle(value) {
+        this.setAttribute("subtitle", value);
+    }
     get name() {
         return this.getAttribute("name") ?? "";
     }
@@ -160,14 +213,20 @@ export class BoxContactDatalistItemElement extends BaseElement {
       <div part="item" role="option">
         <span part="avatar" aria-hidden="true"></span>
         <span part="body">
-          <span part="name"></span>
+          <span part="name-row">
+            <span part="name"></span>
+            <span part="external" hidden>External</span>
+          </span>
           <span part="email" hidden></span>
+          <span part="subtitle" hidden></span>
         </span>
       </div>
     `;
         this.itemEl = this.shadowRoot.querySelector('[part="item"]');
         this.avatarEl = this.shadowRoot.querySelector('[part="avatar"]');
         this.nameEl = this.shadowRoot.querySelector('[part="name"]');
+        this.externalEl = this.shadowRoot.querySelector('[part="external"]');
+        this.subtitleEl = this.shadowRoot.querySelector('[part="subtitle"]');
         this.emailEl = this.shadowRoot.querySelector('[part="email"]');
     }
     setupListeners() {
@@ -215,6 +274,14 @@ export class BoxContactDatalistItemElement extends BaseElement {
             }
         }
         this.nameEl.textContent = this.name;
+        const external = this.external;
+        this.externalEl.hidden = !external;
+        if (external) {
+            this.itemEl.setAttribute("aria-description", "External collaborator");
+        }
+        else {
+            this.itemEl.removeAttribute("aria-description");
+        }
         if (this.email) {
             this.emailEl.hidden = false;
             this.emailEl.textContent = this.email;
@@ -223,13 +290,9 @@ export class BoxContactDatalistItemElement extends BaseElement {
             this.emailEl.hidden = true;
             this.emailEl.textContent = "";
         }
+        const subtitle = this.subtitle;
+        this.subtitleEl.hidden = !subtitle;
+        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();