@unofficialbox/box-open-elements 0.1.0

package/dist/components/feedback/alert.js

@@ -0,0 +1,263 @@
+import { BaseElement } from "../../core/index.js";
+import { 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-alert";
+const toneAccessibleLabel = (tone) => {
+    switch (tone) {
+        case "success":
+            return "Success";
+        case "error":
+            return "Error";
+        case "warning":
+            return "Warning";
+        case "inprogress":
+            return "In progress";
+        case "info":
+            return "Info";
+        default:
+            return tone.charAt(0).toUpperCase() + tone.slice(1);
+    }
+};
+const alertStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  [part="alert"] {
+    display: flex;
+    align-items: start;
+    justify-content: space-between;
+    gap: ${boeSpace[3]};
+    margin: ${boeSpace[3]} 0;
+    padding: 14px 10px;
+    border: 1px solid var(--boe-token-text-text-secondary, #6f6f6f);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface-secondary, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="alert"][data-tone="info"] {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, #fff);
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 50%, #fff);
+  }
+
+  [part="alert"][data-tone="success"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 10%, #fff);
+    border-color: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
+  [part="alert"][data-tone="error"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, #fff);
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 50%, #fff);
+  }
+
+  [part="alert"][data-tone="warning"],
+  [part="alert"][data-tone="inprogress"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 10%, #fff);
+    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 50%, #fff);
+  }
+
+  [part="content"] {
+    display: grid;
+    gap: ${boeSpace[1]};
+    line-height: 1.45;
+  }
+
+  [part="title"] {
+    margin: 0;
+    font: inherit;
+    font-weight: 700;
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="title"][hidden] {
+    display: none;
+  }
+
+  [part~="description"] {
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part~="description"][hidden] {
+    display: none;
+  }
+
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  [part="dismiss"] {
+    appearance: none;
+    flex: none;
+    border: 0;
+    border-radius: ${boeRadius.med};
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 700;
+    padding: ${boeSpace[1]} ${boeSpace[2]};
+    cursor: pointer;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  ${boeNeutralInteractiveStyles('[part="dismiss"]')}
+`;
+export class BoxAlertElement extends BaseElement {
+    static get observedAttributes() {
+        return ["description", "heading", "message", "open", "tone"];
+    }
+    openValue = true;
+    alertEl;
+    toneLabelEl;
+    titleEl;
+    messageEl;
+    dismissEl;
+    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();
+        }
+    }
+    get heading() {
+        return this.getAttribute("heading") ?? "";
+    }
+    set heading(value) {
+        this.setAttribute("heading", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? this.description;
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? this.getAttribute("message") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "info";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    connectedCallback() {
+        this.openValue = this.hasAttribute("open") || !this.hasAttribute("open");
+        super.connectedCallback();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "open") {
+            this.openValue = this.hasAttribute("open");
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    dismiss() {
+        if (!this.openValue) {
+            return;
+        }
+        this.open = false;
+        this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${alertStyles}</style>
+      <div part="alert" role="status" aria-live="polite">
+        <div part="content">
+          <span part="tone-label" class="sr-only"></span>
+          <h2 part="title" id="alert-title" hidden></h2>
+          <span part="description message" hidden></span>
+        </div>
+        <button type="button" part="dismiss" aria-label="Dismiss alert">Dismiss</button>
+      </div>
+    `;
+        this.alertEl = this.shadowRoot.querySelector('[part="alert"]');
+        this.toneLabelEl = this.shadowRoot.querySelector('[part="tone-label"]');
+        this.titleEl = this.shadowRoot.querySelector('[part="title"]');
+        this.messageEl = this.shadowRoot.querySelector('[part~="description"]');
+        this.dismissEl = this.shadowRoot.querySelector('[part="dismiss"]');
+    }
+    setupListeners() {
+        this.dismissEl.addEventListener("click", () => {
+            this.dismiss();
+        });
+    }
+    update() {
+        if (!this.alertEl) {
+            return;
+        }
+        const visible = this.openValue && Boolean(this.heading || this.message);
+        this.hidden = !visible;
+        if (!visible) {
+            return;
+        }
+        this.alertEl.dataset.tone = this.tone;
+        this.toneLabelEl.textContent = toneAccessibleLabel(this.tone);
+        if (this.heading) {
+            this.alertEl.setAttribute("aria-labelledby", "alert-title");
+            this.alertEl.removeAttribute("aria-label");
+            this.titleEl.hidden = false;
+            this.titleEl.textContent = this.heading;
+        }
+        else {
+            this.alertEl.removeAttribute("aria-labelledby");
+            const accessibleName = this.message
+                ? `${toneAccessibleLabel(this.tone)}: ${this.message}`
+                : toneAccessibleLabel(this.tone);
+            this.alertEl.setAttribute("aria-label", accessibleName);
+            this.titleEl.hidden = true;
+            this.titleEl.textContent = "";
+        }
+        if (this.message) {
+            this.messageEl.hidden = false;
+            this.messageEl.textContent = this.message;
+        }
+        else {
+            this.messageEl.hidden = true;
+            this.messageEl.textContent = "";
+        }
+    }
+}
+export const defineBoxAlertElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxAlertElement);
+    return BoxAlertElement;
+};

package/dist/components/feedback/badge.d.ts

@@ -0,0 +1,12 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxBadgeElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private badgeEl;
+    get label(): string;
+    set label(value: string);
+    get tone(): string;
+    set tone(value: string);
+    protected renderTemplate(): void;
+    protected update(): void;
+}
+export declare const defineBoxBadgeElement: (tagName?: string) => typeof BoxBadgeElement;

package/dist/components/feedback/badge.js

@@ -0,0 +1,99 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-badge";
+const badgeStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="badge"] {
+    display: inline-block;
+    padding: 2px 4px 3px;
+    border-radius: ${boeRadius.size};
+    background: var(--boe-token-surface-surface-secondary, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 12px;
+    letter-spacing: 0;
+    text-align: center;
+    text-transform: none;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="badge"][data-tone="neutral"] {
+    background: var(--boe-token-surface-surface-secondary, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+  }
+
+  [part="badge"][data-tone="info"],
+  [part="badge"][data-tone="brand"] {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 50%, #fff);
+    color: #ffffff;
+  }
+
+  [part="badge"][data-tone="success"] {
+    background: var(--boe-token-surface-status-surface-success, #26c281);
+    color: #ffffff;
+  }
+
+  [part="badge"][data-tone="error"] {
+    background: var(--boe-token-surface-status-surface-error, #ed3757);
+    color: #ffffff;
+  }
+
+  [part="badge"][data-tone="warning"],
+  [part="badge"][data-tone="inprogress"] {
+    background: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
+    color: #ffffff;
+  }
+`;
+export class BoxBadgeElement extends BaseElement {
+    static get observedAttributes() {
+        return ["label", "tone"];
+    }
+    badgeEl;
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "neutral";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${badgeStyles}</style>
+      <span part="badge" role="status"></span>
+    `;
+        this.badgeEl = this.shadowRoot.querySelector('[part="badge"]');
+    }
+    update() {
+        if (!this.badgeEl) {
+            return;
+        }
+        this.badgeEl.dataset.tone = this.tone;
+        this.badgeEl.setAttribute("aria-label", this.label);
+        this.badgeEl.textContent = this.label;
+    }
+}
+export const defineBoxBadgeElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxBadgeElement);
+    return BoxBadgeElement;
+};

package/dist/components/feedback/chip.d.ts

@@ -0,0 +1,33 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * A compact, labelled token. Unlike `box-badge` (a passive status marker) a chip
+ * is interactive: it can be selected and it can be dismissed, emitting `remove`
+ * with its `value` so a host list can drop it.
+ */
+export declare class BoxChipElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private chipEl;
+    private labelEl;
+    private removeEl;
+    get label(): string;
+    set label(value: string);
+    get value(): string;
+    set value(value: string);
+    get tone(): string;
+    set tone(value: string);
+    get removable(): boolean;
+    set removable(value: boolean);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get selectable(): boolean;
+    set selectable(value: boolean);
+    dismiss(): void;
+    private toggleSelection;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    private syncRemoveButton;
+    protected update(): void;
+}
+export declare const defineBoxChipElement: (tagName?: string) => typeof BoxChipElement;

package/dist/components/feedback/chip.js

@@ -0,0 +1,261 @@
+import { BaseElement } from "../../core/index.js";
+import { boeFocusVisibleStyles, boeNeutralInteractiveStyles, } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-chip";
+const chipStyles = `
+  :host {
+    display: inline-block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="chip"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.28rem 0.35rem 0.28rem 0.7rem;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, var(--boe-token-surface-surface, #ffffff) 18%);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-secondary, #fbfbfb) 70%, var(--boe-token-surface-surface, #ffffff) 30%);
+    color: var(--boe-token-text-text, #222222);
+    font-size: 0.82rem;
+    font-weight: 600;
+    line-height: 1.2;
+    white-space: nowrap;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="chip"]:not([data-removable="true"]) {
+    padding-inline-end: 0.7rem;
+  }
+
+  [part="chip"][data-interactive="true"] {
+    cursor: pointer;
+  }
+
+  [part="chip"][data-interactive="true"]:hover:not([data-disabled="true"]) {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part="chip"][data-interactive="true"]:active:not([data-disabled="true"]) {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 70%, var(--boe-token-surface-surface-secondary, #fbfbfb) 30%);
+  }
+
+  [part="chip"][data-tone="brand"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 26%, transparent);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, var(--boe-token-surface-surface, #ffffff) 90%);
+    color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 72%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="chip"][data-selected="true"],
+  [part="chip"][data-selected="true"]:hover:not([data-disabled="true"]),
+  [part="chip"][data-selected="true"]:active:not([data-disabled="true"]) {
+    border-color: var(--boe-token-surface-surface-brand, #0061d5);
+    background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 14%, var(--boe-token-surface-surface, #ffffff) 86%);
+    color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 74%, var(--boe-token-text-text, #222222));
+  }
+
+  [part="chip"][data-disabled="true"] {
+    opacity: 0.55;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  ${boeFocusVisibleStyles('[part="chip"]')}
+
+  [part="remove"] {
+    appearance: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.15rem;
+    block-size: 1.15rem;
+    padding: 0;
+    border: 0;
+    border-radius: 999px;
+    background: transparent;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    cursor: pointer;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="remove"] svg {
+    inline-size: 0.7rem;
+    block-size: 0.7rem;
+  }
+
+  ${boeNeutralInteractiveStyles('[part="remove"]')}
+`;
+/**
+ * A compact, labelled token. Unlike `box-badge` (a passive status marker) a chip
+ * is interactive: it can be selected and it can be dismissed, emitting `remove`
+ * with its `value` so a host list can drop it.
+ */
+export class BoxChipElement extends BaseElement {
+    static get observedAttributes() {
+        return ["disabled", "label", "removable", "selectable", "selected", "tone", "value"];
+    }
+    chipEl;
+    labelEl;
+    removeEl = null;
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get value() {
+        return this.getAttribute("value") ?? this.label;
+    }
+    set value(value) {
+        this.setAttribute("value", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "neutral";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    get removable() {
+        return this.hasAttribute("removable");
+    }
+    set removable(value) {
+        this.toggleAttribute("removable", value);
+    }
+    get selected() {
+        return this.hasAttribute("selected");
+    }
+    set selected(value) {
+        this.toggleAttribute("selected", value);
+    }
+    get disabled() {
+        return this.hasAttribute("disabled");
+    }
+    set disabled(value) {
+        this.toggleAttribute("disabled", value);
+    }
+    get selectable() {
+        return this.hasAttribute("selectable");
+    }
+    set selectable(value) {
+        this.toggleAttribute("selectable", value);
+    }
+    dismiss() {
+        if (this.disabled || !this.removable) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent("remove", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value },
+        }));
+    }
+    toggleSelection() {
+        if (this.disabled) {
+            return;
+        }
+        this.selected = !this.selected;
+        this.dispatchEvent(new CustomEvent("select", {
+            bubbles: true,
+            composed: true,
+            detail: { value: this.value, selected: this.selected },
+        }));
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${chipStyles}</style>
+      <span part="chip">
+        <span part="label"></span>
+      </span>
+    `;
+        this.chipEl = this.shadowRoot.querySelector('[part="chip"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+    }
+    setupListeners() {
+        this.chipEl.addEventListener("click", event => {
+            if (event.target.closest('[part="remove"]')) {
+                return;
+            }
+            if (this.selectable) {
+                this.toggleSelection();
+            }
+        });
+        this.chipEl.addEventListener("keydown", event => {
+            if (!this.selectable) {
+                return;
+            }
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                this.toggleSelection();
+            }
+        });
+    }
+    syncRemoveButton() {
+        if (this.removable) {
+            if (!this.removeEl) {
+                const button = document.createElement("button");
+                button.type = "button";
+                button.setAttribute("part", "remove");
+                button.innerHTML =
+                    '<svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg>';
+                button.addEventListener("click", event => {
+                    event.stopPropagation();
+                    this.dismiss();
+                });
+                this.chipEl.append(button);
+                this.removeEl = button;
+            }
+            this.removeEl.setAttribute("aria-label", `Remove ${this.label}`);
+            this.removeEl.disabled = this.disabled;
+        }
+        else if (this.removeEl) {
+            this.removeEl.remove();
+            this.removeEl = null;
+        }
+    }
+    update() {
+        if (!this.chipEl) {
+            return;
+        }
+        this.chipEl.dataset.tone = this.tone;
+        this.chipEl.dataset.removable = this.removable ? "true" : "false";
+        this.chipEl.dataset.selected = this.selected ? "true" : "false";
+        this.chipEl.dataset.disabled = this.disabled ? "true" : "false";
+        this.chipEl.dataset.interactive = this.selectable && !this.disabled ? "true" : "false";
+        this.chipEl.setAttribute("role", this.selectable ? "button" : "listitem");
+        if (this.selectable) {
+            this.chipEl.setAttribute("aria-pressed", this.selected ? "true" : "false");
+            if (this.disabled) {
+                this.chipEl.setAttribute("aria-disabled", "true");
+            }
+            else {
+                this.chipEl.removeAttribute("aria-disabled");
+            }
+            if (!this.disabled) {
+                this.chipEl.tabIndex = 0;
+            }
+            else {
+                this.chipEl.removeAttribute("tabindex");
+            }
+        }
+        else {
+            this.chipEl.removeAttribute("aria-pressed");
+            this.chipEl.removeAttribute("aria-disabled");
+            this.chipEl.removeAttribute("tabindex");
+        }
+        this.labelEl.textContent = this.label;
+        this.syncRemoveButton();
+    }
+}
+export const defineBoxChipElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxChipElement);
+    return BoxChipElement;
+};

package/dist/components/feedback/empty-state.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxEmptyStateElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private titleEl;
+    private messageEl;
+    private actionEl;
+    get heading(): string;
+    set heading(value: string);
+    get message(): string;
+    set message(value: string);
+    get description(): string;
+    set description(value: string);
+    get actionLabel(): string;
+    set actionLabel(value: string);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxEmptyStateElement: (tagName?: string) => typeof BoxEmptyStateElement;