@unofficialbox/box-open-elements 0.1.0

package/dist/components/overlays/popover.js

@@ -0,0 +1,317 @@
+import { BaseElement } from "../../core/index.js";
+import { FocusRestore, getTabbableElements } from "../../foundations/a11y/index.js";
+import { boeControl, boeOverlay, boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-popover";
+const resolvePlacement = (value) => {
+    if (value === "top" || value === "start" || value === "end" || value === "bottom") {
+        return value;
+    }
+    return "bottom";
+};
+const popoverStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="container"] {
+    position: relative;
+    display: inline-grid;
+    justify-items: start;
+  }
+
+  [part="trigger"] {
+    appearance: none;
+    box-sizing: border-box;
+    min-height: ${boeControl.height};
+    padding: 0 ${boeControl.paddingInline};
+    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};
+    cursor: pointer;
+    box-shadow: none;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  ${boeNeutralInteractiveStyles('[part="trigger"]')}
+
+  [part="surface"] {
+    position: absolute;
+    z-index: 30;
+    inset-block-start: calc(100% + ${boeSpace[1]});
+    inset-inline-start: 0;
+    width: min(360px, calc(100vw - 5rem));
+    min-width: 200px;
+    padding: ${boeOverlay.padding};
+    border: ${boeOverlay.border};
+    border-radius: ${boeOverlay.radius};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text, #222222);
+    box-shadow: ${boeOverlay.shadow};
+    line-height: 1.5;
+  }
+
+  :host([placement="top"]) [part="surface"] {
+    inset-block-start: auto;
+    inset-block-end: calc(100% + ${boeSpace[1]});
+  }
+
+  :host([placement="start"]) [part="surface"] {
+    inset-block-start: 0;
+    inset-inline-start: auto;
+    inset-inline-end: calc(100% + ${boeSpace[1]});
+  }
+
+  :host([placement="end"]) [part="surface"] {
+    inset-block-start: 0;
+    inset-inline-start: calc(100% + ${boeSpace[1]});
+  }
+
+  [part="surface"][hidden] {
+    display: none;
+  }
+`;
+export class BoxPopoverElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "label", "open", "placement"];
+    }
+    openValue = false;
+    wasOpen = false;
+    documentListenersBound = false;
+    triggerEl;
+    surfaceEl;
+    focusRestore = new FocusRestore();
+    onDocumentKeydown = (event) => {
+        if (!this.openValue || event.key !== "Escape") {
+            return;
+        }
+        event.preventDefault();
+        this.hide();
+    };
+    onOutsidePointer = (event) => {
+        if (!this.openValue) {
+            return;
+        }
+        const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+        if (!path.some(node => node === this)) {
+            this.hide();
+        }
+    };
+    get open() {
+        return this.openValue;
+    }
+    set open(value) {
+        const nextOpen = Boolean(value);
+        if (this.disabled && nextOpen) {
+            return;
+        }
+        if (this.openValue === nextOpen) {
+            return;
+        }
+        this.openValue = nextOpen;
+        if (nextOpen) {
+            this.setAttribute("open", "");
+        }
+        else {
+            this.removeAttribute("open");
+        }
+        this.syncDocumentListeners();
+        this.dispatchEvent(new CustomEvent("open-changed", { bubbles: true, composed: true, detail: { open: nextOpen } }));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get label() {
+        return this.getAttribute("label") ?? "Details";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get placement() {
+        return resolvePlacement(this.getAttribute("placement"));
+    }
+    set placement(value) {
+        this.setAttribute("placement", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        if (value) {
+            this.setAttribute("disabled", "");
+            if (this.openValue) {
+                this.hide();
+            }
+        }
+        else {
+            this.removeAttribute("disabled");
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncDocumentListeners();
+    }
+    disconnectedCallback() {
+        this.unbindDocumentListeners();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "open") {
+            if (this.disabled && this.hasAttribute("open")) {
+                this.openValue = false;
+                this.removeAttribute("open");
+                this.syncDocumentListeners();
+                if (this.isRendered) {
+                    this.update();
+                }
+            }
+            else {
+                this.openValue = this.hasAttribute("open");
+                this.syncDocumentListeners();
+            }
+        }
+        if (name === "disabled" && this.disabled && this.openValue) {
+            this.hide();
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    show() {
+        if (this.disabled) {
+            return;
+        }
+        this.open = true;
+    }
+    hide() {
+        this.open = false;
+    }
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        if (this.openValue) {
+            this.hide();
+        }
+        else {
+            this.show();
+        }
+    }
+    bindDocumentListeners() {
+        if (this.documentListenersBound) {
+            return;
+        }
+        document.addEventListener("keydown", this.onDocumentKeydown);
+        document.addEventListener("pointerdown", this.onOutsidePointer);
+        this.documentListenersBound = true;
+    }
+    unbindDocumentListeners() {
+        if (!this.documentListenersBound) {
+            return;
+        }
+        document.removeEventListener("keydown", this.onDocumentKeydown);
+        document.removeEventListener("pointerdown", this.onOutsidePointer);
+        this.documentListenersBound = false;
+    }
+    syncDocumentListeners() {
+        if (this.openValue && this.isConnected) {
+            this.bindDocumentListeners();
+        }
+        else {
+            this.unbindDocumentListeners();
+        }
+    }
+    focusSurface() {
+        const candidates = [];
+        const slot = this.surfaceEl.querySelector("slot");
+        for (const node of slot?.assignedElements({ flatten: true }) ?? []) {
+            if (!(node instanceof HTMLElement)) {
+                continue;
+            }
+            candidates.push(...getTabbableElements(node));
+            if (candidates.length === 0 &&
+                !node.hasAttribute("disabled") &&
+                (node.matches("button, a[href], input:not([type='hidden']), select, textarea") || node.tabIndex >= 0)) {
+                candidates.push(node);
+            }
+        }
+        candidates.push(...getTabbableElements(this.surfaceEl));
+        (candidates[0] ?? this.surfaceEl).focus();
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${popoverStyles}</style>
+      <div part="container">
+        <button type="button" part="trigger" id="boe-popover-trigger" aria-haspopup="dialog" aria-controls="boe-popover-surface"></button>
+        <div part="surface" role="dialog" id="boe-popover-surface" aria-labelledby="boe-popover-trigger" tabindex="-1" hidden>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+        this.triggerEl = this.shadowRoot.querySelector('[part="trigger"]');
+        this.surfaceEl = this.shadowRoot.querySelector('[part="surface"]');
+    }
+    setupListeners() {
+        this.triggerEl.addEventListener("click", () => {
+            this.toggle();
+        });
+        this.triggerEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === "Escape") {
+                keyboardEvent.preventDefault();
+                this.hide();
+            }
+        });
+        this.surfaceEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === "Escape") {
+                keyboardEvent.preventDefault();
+                this.hide();
+            }
+        });
+    }
+    update() {
+        if (!this.triggerEl || !this.surfaceEl) {
+            return;
+        }
+        this.triggerEl.textContent = this.label;
+        this.triggerEl.setAttribute("aria-expanded", this.openValue ? "true" : "false");
+        if (this.disabled) {
+            this.triggerEl.setAttribute("disabled", "");
+        }
+        else {
+            this.triggerEl.removeAttribute("disabled");
+        }
+        const justOpened = this.openValue && !this.wasOpen;
+        const justClosed = !this.openValue && this.wasOpen;
+        this.surfaceEl.hidden = !this.openValue;
+        this.syncDocumentListeners();
+        if (justOpened) {
+            this.focusRestore.capture(this.triggerEl);
+            queueMicrotask(() => this.focusSurface());
+        }
+        else if (justClosed) {
+            this.focusRestore.restore();
+        }
+        this.wasOpen = this.openValue;
+    }
+}
+export const defineBoxPopoverElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxPopoverElement);
+    return BoxPopoverElement;
+};

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

@@ -0,0 +1,26 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxTooltipElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private openValue;
+    private tooltipId;
+    private triggerHostEl;
+    private triggerSlot;
+    private fallbackTriggerEl;
+    private tooltipEl;
+    private describedTrigger;
+    get label(): string;
+    set label(value: string);
+    get triggerLabel(): string;
+    set triggerLabel(value: string);
+    get open(): boolean;
+    set open(value: boolean);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    show(): void;
+    hide(): void;
+    private resolveDescribedTrigger;
+    private clearDescribedBy;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxTooltipElement: (tagName?: string) => typeof BoxTooltipElement;

package/dist/components/overlays/tooltip.js

@@ -0,0 +1,204 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
+const DEFAULT_TAG_NAME = "box-tooltip";
+const DEFAULT_TRIGGER_LABEL = "More information";
+const tooltipStyles = `
+  :host {
+    display: inline-block;
+    position: relative;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="container"] {
+    display: inline-grid;
+  }
+
+  [part="trigger-host"] {
+    display: inline-grid;
+  }
+
+  [part="trigger"] {
+    width: 1.7rem;
+    height: 1.7rem;
+    display: inline-grid;
+    place-items: center;
+    appearance: none;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 80%, var(--boe-token-surface-surface, #ffffff) 20%);
+    border-radius: ${boeRadius.med};
+    background: var(--boe-token-surface-surface, #ffffff);
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    padding: 0;
+    cursor: pointer;
+    box-shadow: none;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="trigger"]')}
+
+  [part="tooltip"] {
+    position: absolute;
+    inset-block-start: calc(100% + 0.5rem);
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    z-index: 1;
+    width: min(13.75rem, calc(100vw - 6rem));
+    padding: 0.5rem 0.65rem;
+    border-radius: ${boeRadius.xlarge};
+    border: 1px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, rgba(255, 255, 255, 0.08));
+    background: var(--boe-token-surface-tooltip-surface, #4e4e4e);
+    color: rgba(255, 255, 255, 0.94);
+    box-shadow: 0 16px 28px rgba(16, 24, 32, 0.18);
+    line-height: 1.45;
+  }
+
+  [part="tooltip"][hidden] {
+    display: none;
+  }
+`;
+export class BoxTooltipElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "open", "trigger-label"];
+    }
+    openValue = false;
+    tooltipId = `box-tooltip-${Math.random().toString(36).slice(2, 10)}`;
+    triggerHostEl;
+    triggerSlot;
+    fallbackTriggerEl;
+    tooltipEl;
+    describedTrigger = null;
+    get label() {
+        return this.getAttribute("label") ?? "Helpful context";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get triggerLabel() {
+        return this.getAttribute("trigger-label") ?? DEFAULT_TRIGGER_LABEL;
+    }
+    set triggerLabel(value) {
+        this.setAttribute("trigger-label", value);
+    }
+    get open() {
+        return this.openValue;
+    }
+    set open(value) {
+        const nextValue = Boolean(value);
+        if (this.openValue === nextValue) {
+            return;
+        }
+        this.openValue = nextValue;
+        if (nextValue) {
+            this.setAttribute("open", "");
+        }
+        else {
+            this.removeAttribute("open");
+        }
+        this.dispatchEvent(new CustomEvent("open-changed", { bubbles: true, composed: true, detail: { open: nextValue } }));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "open") {
+            this.openValue = this.hasAttribute("open");
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this.open = false;
+    }
+    resolveDescribedTrigger() {
+        const slotted = this.triggerSlot.assignedElements({ flatten: true })[0];
+        if (!slotted) {
+            return this.fallbackTriggerEl;
+        }
+        const nestedFocusable = slotted.matches("button, a[href], input, select, textarea, [tabindex]")
+            ? slotted
+            : (slotted.querySelector("button, a[href], input, select, textarea, [tabindex]") ?? null);
+        return nestedFocusable ?? slotted;
+    }
+    clearDescribedBy() {
+        if (this.describedTrigger?.hasAttribute("aria-describedby")) {
+            this.describedTrigger.removeAttribute("aria-describedby");
+        }
+        this.describedTrigger = null;
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${tooltipStyles}</style>
+      <span part="container">
+        <span part="trigger-host">
+          <slot><button type="button" part="trigger">?</button></slot>
+        </span>
+        <div id="${this.tooltipId}" part="tooltip" role="tooltip" hidden></div>
+      </span>
+    `;
+        this.triggerHostEl = this.shadowRoot.querySelector('[part="trigger-host"]');
+        this.triggerSlot = this.shadowRoot.querySelector("slot");
+        this.fallbackTriggerEl = this.shadowRoot.querySelector('[part="trigger"]');
+        this.tooltipEl = this.shadowRoot.querySelector('[part="tooltip"]');
+    }
+    setupListeners() {
+        this.triggerHostEl.addEventListener("mouseenter", () => this.show());
+        this.triggerHostEl.addEventListener("mouseleave", () => this.hide());
+        this.triggerHostEl.addEventListener("focusin", () => this.show());
+        this.triggerHostEl.addEventListener("focusout", event => {
+            const next = event.relatedTarget;
+            // Slotted light-DOM nodes are not descendants of the shadow trigger host.
+            if (next && (this.triggerHostEl.contains(next) || this.contains(next))) {
+                return;
+            }
+            this.hide();
+        });
+        // Idempotent show: pointer activation focuses first (which opens), then click
+        // must not toggle closed again in the same gesture.
+        this.triggerHostEl.addEventListener("click", () => {
+            this.show();
+        });
+        this.triggerHostEl.addEventListener("keydown", event => {
+            const keyboardEvent = event;
+            if (keyboardEvent.key === "Escape") {
+                keyboardEvent.preventDefault();
+                this.hide();
+            }
+        });
+        this.triggerSlot.addEventListener("slotchange", () => {
+            if (this.isRendered) {
+                this.update();
+            }
+        });
+    }
+    update() {
+        if (!this.triggerHostEl || !this.tooltipEl || !this.triggerSlot) {
+            return;
+        }
+        const label = this.label;
+        this.tooltipEl.textContent = label;
+        this.tooltipEl.hidden = !this.openValue;
+        const trigger = this.resolveDescribedTrigger();
+        if (trigger === this.fallbackTriggerEl) {
+            this.fallbackTriggerEl.setAttribute("aria-label", this.triggerLabel);
+        }
+        this.clearDescribedBy();
+        if (this.openValue) {
+            trigger.setAttribute("aria-describedby", this.tooltipId);
+            this.describedTrigger = trigger;
+        }
+    }
+}
+export const defineBoxTooltipElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxTooltipElement);
+    return BoxTooltipElement;
+};

package/dist/components/visuals/illustration.d.ts

@@ -0,0 +1,26 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxIllustrationElement extends BaseElement {
+    private readonly handleDesignSystemChange;
+    static get observedAttributes(): string[];
+    private figureEl;
+    private artEl;
+    private titleEl;
+    private captionEl;
+    private artSignature;
+    get caption(): string;
+    set caption(value: string);
+    get asset(): string;
+    set asset(value: string);
+    get message(): string;
+    set message(value: string);
+    get shape(): string;
+    set shape(value: string);
+    get heading(): string;
+    set heading(value: string);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private renderShape;
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxIllustrationElement: (tagName?: string) => typeof BoxIllustrationElement;