@unofficialbox/box-open-elements 0.1.0

package/dist/components/feedback/toast.js

@@ -0,0 +1,205 @@
+import { BaseElement } from "../../core/index.js";
+import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
+import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+const DEFAULT_TAG_NAME = "box-toast";
+const toastStyles = `
+  :host {
+    display: block;
+    inline-size: fit-content;
+    max-inline-size: 100%;
+    color: inherit;
+    font: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  [part="toast"] {
+    display: inline-flex;
+    align-items: center;
+    gap: ${boeSpace[3]};
+    min-height: 48px;
+    max-inline-size: min(100%, 572px);
+    padding: 10px 10px 10px 20px;
+    border: 2px solid var(--boe-token-text-text, #222222);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface-secondary, #f4f4f4);
+    color: var(--boe-token-text-text, #222222);
+    box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
+  }
+
+  [part="toast"][data-tone="success"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 20%, #fff);
+    border-color: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
+  [part="toast"][data-tone="error"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 20%, #fff);
+    border-color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+
+  [part="toast"][data-tone="warning"],
+  [part="toast"][data-tone="inprogress"] {
+    background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 20%, #fff);
+    border-color: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
+  }
+
+  [part="message"] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    padding-inline-end: ${boeSpace[3]};
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1.35;
+  }
+
+  [part="dismiss"] {
+    appearance: none;
+    flex: 0 0 auto;
+    border: 1px solid var(--boe-token-text-text, #222222);
+    border-radius: ${boeRadius.med};
+    background: transparent;
+    color: var(--boe-token-text-text, #222222);
+    font: inherit;
+    font-size: 13px;
+    font-weight: 700;
+    padding: 7px 13px;
+    cursor: pointer;
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="dismiss"]:hover:not(:disabled) {
+    background: rgb(0 0 0 / 6%);
+  }
+
+  [part="dismiss"]:active:not(:disabled) {
+    background: rgb(0 0 0 / 10%);
+  }
+
+  ${boeFocusVisibleStyles('[part="dismiss"]')}
+
+  [part="dismiss"]:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+    box-shadow: none;
+  }
+`;
+export class BoxToastElement extends BaseElement {
+    static get observedAttributes() {
+        return ["message", "open", "tone"];
+    }
+    openValue = false;
+    timeoutId = null;
+    toastEl;
+    messageEl;
+    dismissEl;
+    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 } }));
+        if (this.isRendered) {
+            this.update();
+        }
+    }
+    get message() {
+        return this.getAttribute("message") ?? "";
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get tone() {
+        return this.getAttribute("tone") ?? "info";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    disconnectedCallback() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === "open") {
+            this.openValue = this.hasAttribute("open");
+        }
+        super.attributeChangedCallback(name, oldValue, newValue);
+    }
+    show(message, options) {
+        if (typeof message === "string") {
+            this.message = message;
+        }
+        if (options?.tone) {
+            this.tone = options.tone;
+        }
+        this.open = true;
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        const duration = options?.duration ?? 2500;
+        if (duration > 0) {
+            this.timeoutId = setTimeout(() => {
+                this.hide();
+            }, duration);
+        }
+    }
+    hide() {
+        this.open = false;
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${toastStyles}</style>
+      <div part="toast" role="status" aria-live="polite">
+        <span part="message"></span>
+        <button type="button" part="dismiss">Dismiss</button>
+      </div>
+    `;
+        this.toastEl = this.shadowRoot.querySelector('[part="toast"]');
+        this.messageEl = this.shadowRoot.querySelector('[part="message"]');
+        this.dismissEl = this.shadowRoot.querySelector('[part="dismiss"]');
+    }
+    setupListeners() {
+        this.dismissEl.addEventListener("click", () => {
+            this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+            this.hide();
+        });
+    }
+    update() {
+        if (!this.toastEl) {
+            return;
+        }
+        const visible = this.openValue && Boolean(this.message);
+        this.hidden = !visible;
+        if (!visible) {
+            return;
+        }
+        this.toastEl.dataset.tone = this.tone;
+        this.messageEl.textContent = this.message;
+    }
+}
+export const defineBoxToastElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxToastElement);
+    return BoxToastElement;
+};

package/dist/components/files/drop-zone.d.ts

@@ -0,0 +1,19 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxDropZoneElement extends BaseElement {
+    static get observedAttributes(): string[];
+    private dragging;
+    private zoneEl;
+    private inputEl;
+    private labelEl;
+    private messageEl;
+    get label(): string;
+    set label(value: string);
+    get message(): string;
+    set message(value: string);
+    get description(): string;
+    set description(value: string);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxDropZoneElement: (tagName?: string) => typeof BoxDropZoneElement;

package/dist/components/files/drop-zone.js

@@ -0,0 +1,169 @@
+import { BaseElement } from "../../core/index.js";
+import { boeFocusRingShadow, boeFocusVisibleStyles, } from "../../foundations/tokens/index.js";
+import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
+import { boeRadius } from "../../foundations/geometry/index.js";
+const DEFAULT_TAG_NAME = "box-drop-zone";
+const dropZoneStyles = `
+  :host {
+    display: block;
+    color: inherit;
+    font: inherit;
+  }
+
+  [part="zone"] {
+    position: relative;
+    display: grid;
+    gap: 0.55rem;
+    justify-items: start;
+    padding: 0.75rem;
+    border: 1.5px dashed color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 16%, var(--boe-token-stroke-stroke, #e8e8e8) 84%);
+    border-radius: ${boeRadius.large};
+    background: var(--boe-token-surface-surface-secondary, #fbfbfb);
+    cursor: pointer;
+    transition:
+      border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+      box-shadow ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+  }
+
+  [part="zone"]:hover {
+    border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
+    background: var(--boe-token-surface-surface-hover, #f4f4f4);
+  }
+
+  [part="zone"]:active {
+    background: color-mix(in srgb, var(--boe-token-surface-surface-hover, #f4f4f4) 70%, var(--boe-token-surface-surface-secondary, #fbfbfb) 30%);
+  }
+
+  [part="zone"]:focus-within {
+    outline: none;
+    box-shadow: ${boeFocusRingShadow};
+  }
+
+  [part="zone"][data-dragging="true"] {
+    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 34%, transparent);
+    background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+    box-shadow:
+      inset 0 0 0 1px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent),
+      0 14px 28px rgba(15, 23, 42, 0.05);
+  }
+
+  [part="input"] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  ${boeFocusVisibleStyles('[part="input"]')}
+
+  [part="label"] {
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.25;
+  }
+
+  [part~="description"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+    line-height: 1.5;
+    max-width: 34ch;
+  }
+`;
+export class BoxDropZoneElement extends BaseElement {
+    static get observedAttributes() {
+        return ["description", "label", "message"];
+    }
+    dragging = false;
+    zoneEl;
+    inputEl;
+    labelEl;
+    messageEl;
+    get label() {
+        return this.getAttribute("label") ?? "Upload files";
+    }
+    set label(value) {
+        this.setAttribute("label", value);
+    }
+    get message() {
+        return this.getAttribute("message") ?? this.description ?? "Drag files here or click to browse.";
+    }
+    set message(value) {
+        this.setAttribute("message", value);
+    }
+    get description() {
+        return this.getAttribute("description") ?? this.getAttribute("message") ?? "";
+    }
+    set description(value) {
+        this.setAttribute("description", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${dropZoneStyles}</style>
+      <label part="zone">
+        <input type="file" part="input" multiple />
+        <strong part="label"></strong>
+        <span part="description message"></span>
+      </label>
+    `;
+        this.zoneEl = this.shadowRoot.querySelector('[part="zone"]');
+        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+        this.messageEl = this.shadowRoot.querySelector('[part~="description"]');
+    }
+    setupListeners() {
+        this.zoneEl.addEventListener("dragenter", event => {
+            event.preventDefault();
+            this.dragging = true;
+            this.update();
+        });
+        this.zoneEl.addEventListener("dragover", event => {
+            event.preventDefault();
+        });
+        this.zoneEl.addEventListener("dragleave", event => {
+            event.preventDefault();
+            if (event.target === this.zoneEl) {
+                this.dragging = false;
+                this.update();
+            }
+        });
+        this.zoneEl.addEventListener("drop", event => {
+            event.preventDefault();
+            this.dragging = false;
+            const files = Array.from(event.dataTransfer?.files ?? []);
+            this.dispatchEvent(new CustomEvent("files-selected", {
+                bubbles: true,
+                composed: true,
+                detail: { files },
+            }));
+            this.update();
+        });
+        this.inputEl.addEventListener("change", () => {
+            const files = Array.from(this.inputEl.files ?? []);
+            this.dispatchEvent(new CustomEvent("files-selected", {
+                bubbles: true,
+                composed: true,
+                detail: { files },
+            }));
+        });
+    }
+    update() {
+        if (!this.zoneEl) {
+            return;
+        }
+        this.zoneEl.dataset.dragging = String(this.dragging);
+        this.labelEl.textContent = this.label;
+        this.messageEl.textContent = this.message;
+    }
+}
+export const defineBoxDropZoneElement = (tagName = DEFAULT_TAG_NAME) => {
+    const existingElement = customElements.get(tagName);
+    if (existingElement) {
+        return existingElement;
+    }
+    customElements.define(tagName, BoxDropZoneElement);
+    return BoxDropZoneElement;
+};

package/dist/components/forms/calendar.d.ts

@@ -0,0 +1,47 @@
+import { BaseElement } from "../../core/index.js";
+export declare class BoxCalendarElement extends BaseElement {
+    static get observedAttributes(): string[];
+    /** The date the roving tabindex currently points at. */
+    private activeDate;
+    private titleEl;
+    private gridEl;
+    private weekdayCells;
+    get value(): string;
+    set value(next: string);
+    get month(): string;
+    set month(next: string);
+    get min(): string;
+    set min(next: string);
+    get max(): string;
+    set max(next: string);
+    get disabled(): boolean;
+    set disabled(next: boolean);
+    /** Optional ISO date used as "today" for highlighting / fallback month (pin for demos). */
+    get today(): string;
+    set today(next: string);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private resolveToday;
+    /** The year/month currently displayed: explicit `month`, else `value`'s month, else today. */
+    private displayedMonth;
+    private isOutOfRange;
+    private goToMonth;
+    private shiftMonth;
+    private selectDate;
+    /** Move roving focus by `delta` days, following into the neighbouring month if needed. */
+    private moveActive;
+    /**
+     * Clamp a candidate roving date to the nearest in-range day so the tabbable cell
+     * (and arrow-key navigation) never lands on a disabled/out-of-range button, which
+     * would leave the grid unreachable via Tab. When the whole calendar is disabled
+     * there is nothing to focus, so the candidate is returned untouched.
+     */
+    private clampToEnabled;
+    private focusActive;
+    /** The date the roving tabindex should default to for the displayed month. */
+    private resolveActiveDate;
+    private handleGridKeydown;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}
+export declare const defineBoxCalendarElement: (tagName?: string) => typeof BoxCalendarElement;