@unofficialbox/box-open-elements 0.1.0

package/dist/components/overlays/dialog.js

@@ -0,0 +1,267 @@
+import { BaseElement } from "../../core/index.js";
+import { FocusRestore, trapTabKey } from "../../foundations/a11y/index.js";
+import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeBrandInteractiveStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-dialog";
+const dialogStyles = `
+  :host {
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="backdrop"] {
+    position: fixed;
+    inset: 0;
+    z-index: 1200;
+    background: ${boeOverlay.modalBackdrop};
+    display: grid;
+    place-items: center;
+    padding: ${boeOverlay.modalPadding};
+  }
+
+  [part="dialog"] {
+    width: min(${boeOverlay.modalWidth}, calc(100vw - 3rem));
+    background: var(--boe-token-surface-surface, #ffffff);
+    border: 0;
+    border-radius: ${boeOverlay.modalRadius};
+    box-shadow: ${boeOverlay.modalShadow};
+    padding: ${boeOverlay.modalPadding};
+    display: grid;
+    gap: ${boeSpace[5]};
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="header"] h2 {
+    margin: 0;
+    font: inherit;
+    font-size: ${boeOverlay.modalTitleSize};
+    font-weight: 700;
+    line-height: 24px;
+  }
+
+  [part="description"] {
+    margin: 0;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  [part="description"][hidden] {
+    display: none;
+  }
+
+  [part="body"] {
+    color: var(--boe-token-text-text, #222222);
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  [part="footer"] {
+    display: flex;
+    justify-content: end;
+    gap: ${boeSpace[2]};
+    margin-top: ${boeSpace[2]};
+    padding-top: 0;
+    border-top: 0;
+  }
+
+  [part="cancel"],
+  [part="confirm"] {
+    appearance: none;
+    box-sizing: border-box;
+    border: 1px solid ${boeControl.buttonBorder};
+    border-radius: ${boeRadius.med};
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+    font-weight: 700;
+    letter-spacing: ${boeControl.letterSpacing};
+    min-height: ${boeControl.heightLarge};
+    padding: 0 ${boeControl.paddingInline};
+    cursor: pointer;
+  }
+
+  [part="cancel"] {
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="confirm"] {
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    background: var(--boe-token-surface-surface-brand, #0061d5);
+    color: var(--boe-token-text-text-on-brand, #ffffff);
+  }
+
+  ${boeNeutralInteractiveStyles('[part="cancel"]')}
+  ${boeBrandInteractiveStyles('[part="confirm"]')}
+`;
+export class BoxDialogElement extends BaseElement {
+    static get observedAttributes() {
+        return ["confirm-label", "description", "heading", "open"];
+    }
+    openValue = false;
+    wasOpen = false;
+    hostEl;
+    titleEl = null;
+    descriptionEl = null;
+    confirmEl = null;
+    focusRestore = new FocusRestore();
+    get open() {
+        return this.openValue;
+    }
+    set open(value) {
+        const nextOpen = Boolean(value);
+        if (this.openValue === nextOpen) {
+            return;
+        }
+        this.openValue = nextOpen;
+        if (nextOpen) {
+            this.setAttribute("open", "");
+        }
+        else {
+            this.removeAttribute("open");
+        }
+        this.dispatchEvent(new CustomEvent("open-changed", { bubbles: true, composed: true, detail: { open: nextOpen } }));
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "Dialog";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get confirmLabel() {
+        return this.getAttribute("confirm-label") ?? "Confirm";
+    }
+    set confirmLabel(value) {
+        this.setAttribute("confirm-label", value);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "open") {
+            this.openValue = this.hasAttribute("open");
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    show() {
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        // Keep styles inside the host so a closed dialog has empty textContent.
+        this.shadowRoot.innerHTML = `<div part="host"></div>`;
+        this.hostEl = this.shadowRoot.querySelector('[part="host"]');
+    }
+    setupListeners() {
+        this.hostEl.addEventListener("click", event => {
+            const target = event.target;
+            if (!target) {
+                return;
+            }
+            if (target.getAttribute("part") === "backdrop") {
+                this.close();
+                return;
+            }
+            if (target.closest('[part="cancel"]')) {
+                this.dispatchEvent(new CustomEvent("cancel", { bubbles: true, composed: true }));
+                this.close();
+                return;
+            }
+            if (target.closest('[part="confirm"]')) {
+                this.dispatchEvent(new CustomEvent("confirm", { bubbles: true, composed: true }));
+                this.close();
+            }
+        });
+        this.hostEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const dialog = keyboardEvent.target?.closest('[part="dialog"]');
+            if (!dialog || !this.hostEl.contains(dialog)) {
+                return;
+            }
+            if (keyboardEvent.key === "Escape") {
+                keyboardEvent.preventDefault();
+                this.dispatchEvent(new CustomEvent("cancel", { bubbles: true, composed: true }));
+                this.close();
+                return;
+            }
+            if (keyboardEvent.key === "Tab") {
+                trapTabKey(keyboardEvent, dialog);
+            }
+        });
+    }
+    update() {
+        if (!this.hostEl) {
+            return;
+        }
+        if (!this.openValue) {
+            const wasOpen = this.wasOpen;
+            this.hostEl.innerHTML = "";
+            this.titleEl = null;
+            this.descriptionEl = null;
+            this.confirmEl = null;
+            this.wasOpen = false;
+            if (wasOpen) {
+                this.focusRestore.restore();
+            }
+            return;
+        }
+        const justOpened = !this.wasOpen;
+        this.wasOpen = true;
+        if (justOpened) {
+            this.focusRestore.capture();
+        }
+        if (!this.hostEl.querySelector('[part="dialog"]')) {
+            this.hostEl.innerHTML = `
+        <style>${dialogStyles}</style>
+        <div part="backdrop">
+          <section part="dialog" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="dialog-title">
+            <header part="header">
+              <h2 id="dialog-title"></h2>
+            </header>
+            <p part="description" hidden></p>
+            <div part="body"><slot></slot></div>
+            <footer part="footer">
+              <button type="button" part="cancel">Cancel</button>
+              <button type="button" part="confirm"></button>
+            </footer>
+          </section>
+        </div>
+      `;
+        }
+        this.titleEl = this.hostEl.querySelector("#dialog-title");
+        this.descriptionEl = this.hostEl.querySelector('[part="description"]');
+        this.confirmEl = this.hostEl.querySelector('[part="confirm"]');
+        if (this.titleEl) {
+            this.titleEl.textContent = this.heading;
+        }
+        if (this.descriptionEl) {
+            const description = this.description;
+            this.descriptionEl.textContent = description;
+            this.descriptionEl.hidden = !description;
+        }
+        if (this.confirmEl) {
+            this.confirmEl.textContent = this.confirmLabel;
+        }
+        if (justOpened) {
+            queueMicrotask(() => {
+                this.hostEl.querySelector('[part="dialog"]')?.focus();
+            });
+        }
+    }
+}
+export const defineBoxDialogElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxDialogElement);
+    return BoxDialogElement;
+};

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

@@ -0,0 +1,32 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxDrawerElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private openValue;
+    private wasOpen;
+    private readonly focusRestore;
+    private placeholder;
+    private portaled;
+    private hostEl;
+    private backdropEl;
+    private drawerEl;
+    private titleEl;
+    private descriptionEl;
+    get description(): string;
+    set description(value: string);
+    get open(): boolean;
+    set open(value: boolean);
+    get position(): string;
+    set position(value: string);
+    get heading(): string;
+    set heading(value: string);
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    show(): void;
+    close(): void;
+    private portalToBody;
+    private restoreFromPortal;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxDrawerElement: (tagName?: string) => typeof BoxDrawerElement;

package/dist/components/overlays/drawer.js

@@ -0,0 +1,323 @@
+import { BaseElement } from "../../core/index.js";
+import { FocusRestore, trapTabKey } from "../../foundations/a11y/index.js";
+import { boeControl, boeOverlay, boePanel, boeRadius, boeSpace, } from "../../foundations/geometry/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-drawer";
+const drawerStyles = `
+  :host {
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="backdrop"] {
+    position: fixed;
+    inset: 0;
+    display: grid;
+    z-index: 1200;
+    background: ${boeOverlay.modalBackdrop};
+  }
+
+  [part="drawer"] {
+    width: min(${boePanel.drawerWidth}, calc(100vw - 2rem));
+    height: 100%;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr);
+    background: ${boePanel.background};
+    color: var(--boe-token-text-text, #222222);
+    border: ${boePanel.border};
+    box-shadow: ${boeOverlay.modalShadow};
+  }
+
+  [part="drawer"][data-position="left"] {
+    border-left: 0;
+    border-top-right-radius: ${boeOverlay.modalRadius};
+    border-bottom-right-radius: ${boeOverlay.modalRadius};
+  }
+
+  [part="drawer"][data-position="right"] {
+    border-right: 0;
+    border-top-left-radius: ${boeOverlay.modalRadius};
+    border-bottom-left-radius: ${boeOverlay.modalRadius};
+  }
+
+  [part="drawer"][data-position="bottom"] {
+    width: 100%;
+    max-width: none;
+    height: min(320px, calc(100vh - 3rem));
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 0;
+    border-top-left-radius: ${boeOverlay.modalRadius};
+    border-top-right-radius: ${boeOverlay.modalRadius};
+  }
+
+  [part="header"] {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: ${boeSpace[3]};
+    padding: ${boeSpace[4]};
+    border-bottom: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
+  }
+
+  [part="meta"] {
+    display: grid;
+    gap: ${boeSpace[1]};
+  }
+
+  [part="meta"] h2 {
+    margin: 0;
+    font: inherit;
+    font-size: ${boeOverlay.modalTitleSize};
+    font-weight: 700;
+    line-height: 24px;
+  }
+
+  [part="description"] {
+    margin: 0;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  [part="description"][hidden] {
+    display: none;
+  }
+
+  [part="close"] {
+    appearance: none;
+    box-sizing: border-box;
+    border: 1px solid ${boeControl.buttonBorder};
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: ${boeControl.fontSize};
+    font-weight: 700;
+    letter-spacing: ${boeControl.letterSpacing};
+    min-height: ${boeControl.height};
+    padding: 0 ${boeSpace[3]};
+    cursor: pointer;
+    box-shadow: none;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="close"]')}
+
+  [part="body"] {
+    padding: ${boeSpace[4]};
+    overflow: auto;
+  }
+`;
+export class BoxDrawerElement extends BaseElement {
+    static get observedAttributes() {
+        return ["description", "heading", "open", "position"];
+    }
+    openValue = false;
+    wasOpen = false;
+    focusRestore = new FocusRestore();
+    placeholder = null;
+    portaled = false;
+    hostEl;
+    backdropEl = null;
+    drawerEl = null;
+    titleEl = null;
+    descriptionEl = null;
+    get description() {
+        return this.getAttribute("description") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get open() {
+        return this.openValue;
+    }
+    set open(value) {
+        const nextOpen = Boolean(value);
+        if (this.openValue === nextOpen) {
+            return;
+        }
+        this.openValue = nextOpen;
+        if (nextOpen) {
+            this.setAttribute("open", "");
+        }
+        else {
+            this.removeAttribute("open");
+        }
+        this.dispatchEvent(new CustomEvent("open-changed", { bubbles: true, composed: true, detail: { open: nextOpen } }));
+    }
+    get position() {
+        return this.getAttribute("position") ?? "right";
+    }
+    set position(value) {
+        this.setAttribute("position", value);
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "Drawer";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    connectedCallback() {
+        if (this.openValue) {
+            this.portalToBody();
+        }
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "open") {
+            this.openValue = this.hasAttribute("open");
+            if (this.openValue) {
+                this.portalToBody();
+            }
+            else {
+                this.restoreFromPortal();
+            }
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    show() {
+        this.open = true;
+    }
+    close() {
+        this.open = false;
+        this.restoreFromPortal();
+    }
+    portalToBody() {
+        if (this.portaled || !this.isConnected || !this.ownerDocument?.body) {
+            return;
+        }
+        const parent = this.parentNode;
+        if (!parent || parent === this.ownerDocument.body) {
+            return;
+        }
+        this.placeholder = this.ownerDocument.createComment("box-drawer-placeholder");
+        parent.insertBefore(this.placeholder, this);
+        this.ownerDocument.body.append(this);
+        this.portaled = true;
+    }
+    restoreFromPortal() {
+        if (!this.portaled || !this.placeholder?.parentNode) {
+            return;
+        }
+        this.placeholder.parentNode.insertBefore(this, this.placeholder);
+        this.placeholder.remove();
+        this.placeholder = null;
+        this.portaled = false;
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        // Keep styles inside the host so a closed drawer has empty textContent.
+        this.shadowRoot.innerHTML = `<div part="host"></div>`;
+        this.hostEl = this.shadowRoot.querySelector('[part="host"]');
+    }
+    setupListeners() {
+        this.hostEl.addEventListener("click", event => {
+            const target = event.target;
+            if (!target) {
+                return;
+            }
+            if (target.getAttribute("part") === "backdrop") {
+                this.close();
+                return;
+            }
+            if (target.closest('[part="close"]')) {
+                this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+                this.close();
+            }
+        });
+        this.hostEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            const drawer = keyboardEvent.target?.closest('[part="drawer"]');
+            if (!drawer || !this.hostEl.contains(drawer)) {
+                return;
+            }
+            if (keyboardEvent.key === "Escape") {
+                keyboardEvent.preventDefault();
+                this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+                this.close();
+                return;
+            }
+            if (keyboardEvent.key === "Tab") {
+                trapTabKey(keyboardEvent, drawer);
+            }
+        });
+    }
+    update() {
+        if (!this.hostEl) {
+            return;
+        }
+        if (!this.openValue) {
+            const wasOpen = this.wasOpen;
+            this.hostEl.innerHTML = "";
+            this.backdropEl = null;
+            this.drawerEl = null;
+            this.titleEl = null;
+            this.descriptionEl = null;
+            this.wasOpen = false;
+            if (wasOpen) {
+                this.focusRestore.restore();
+            }
+            return;
+        }
+        const justOpened = !this.wasOpen;
+        this.wasOpen = true;
+        if (justOpened) {
+            this.focusRestore.capture();
+        }
+        if (!this.hostEl.querySelector('[part="drawer"]')) {
+            this.hostEl.innerHTML = `
+        <style>${drawerStyles}</style>
+        <div part="backdrop">
+          <aside part="drawer" role="dialog" aria-modal="true" aria-labelledby="drawer-title">
+            <header part="header">
+              <div part="meta">
+                <h2 id="drawer-title"></h2>
+                <p part="description" hidden></p>
+              </div>
+              <button type="button" part="close" aria-label="Close drawer">Close</button>
+            </header>
+            <div part="body">
+              <slot></slot>
+            </div>
+          </aside>
+        </div>
+      `;
+        }
+        this.backdropEl = this.hostEl.querySelector('[part="backdrop"]');
+        this.drawerEl = this.hostEl.querySelector('[part="drawer"]');
+        this.titleEl = this.hostEl.querySelector("#drawer-title");
+        this.descriptionEl = this.hostEl.querySelector('[part="description"]');
+        const isLeft = this.position === "left";
+        const isBottom = this.position === "bottom";
+        if (this.backdropEl) {
+            this.backdropEl.style.alignItems = isBottom ? "end" : "";
+            this.backdropEl.style.justifyItems = isBottom ? "stretch" : isLeft ? "start" : "end";
+        }
+        if (this.drawerEl) {
+            this.drawerEl.dataset.position = this.position;
+        }
+        if (this.titleEl) {
+            this.titleEl.textContent = this.heading;
+        }
+        if (this.descriptionEl) {
+            const description = this.description;
+            this.descriptionEl.textContent = description;
+            this.descriptionEl.hidden = !description;
+        }
+        if (justOpened) {
+            queueMicrotask(() => {
+                this.hostEl.querySelector('[part="close"]')?.focus();
+            });
+        }
+    }
+}
+export const defineBoxDrawerElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxDrawerElement);
+    return BoxDrawerElement;
+};

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

@@ -0,0 +1,35 @@
+import { BaseElement } from "../../core/index.js";
+export type PopoverPlacement = "bottom" | "top" | "start" | "end";
+export declare class BoxPopoverElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private openValue;
+    private wasOpen;
+    private documentListenersBound;
+    private triggerEl;
+    private surfaceEl;
+    private readonly focusRestore;
+    private readonly onDocumentKeydown;
+    private readonly onOutsidePointer;
+    get open(): boolean;
+    set open(value: boolean);
+    get label(): string;
+    set label(value: string);
+    get placement(): PopoverPlacement;
+    set placement(value: PopoverPlacement);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    private bindDocumentListeners;
+    private unbindDocumentListeners;
+    private syncDocumentListeners;
+    private focusSurface;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxPopoverElement: (tagName?: string) => typeof BoxPopoverElement;