@unofficialbox/box-open-elements 0.20.0 → 0.21.0

package/dist/patterns/notifications/notification-inbox.js

@@ -17,6 +17,8 @@ const elementStyles = `
 
         :host {
           display: block;
+          min-inline-size: 0;
+          container: boe-notification-inbox / inline-size;
           color: inherit;
           font: inherit;
         }
@@ -29,6 +31,7 @@ const elementStyles = `
 
         [part="panel"] {
           display: grid;
+          grid-template-columns: minmax(0, 1fr);
           grid-template-rows: auto auto 1fr;
           gap: ${boePanel.gap};
           padding: ${boePanel.padding};
@@ -40,11 +43,13 @@ const elementStyles = `
 
         [part="header"] {
           display: flex;
+          flex-wrap: wrap;
           align-items: center;
           gap: 0.5rem;
         }
 
         [part="title"] {
+          overflow-wrap: anywhere;
           margin: 0;
           font: inherit;
           font-size: 1.05rem;
@@ -56,7 +61,7 @@ const elementStyles = `
           padding: 0.1rem 0.45rem;
           border-radius: 999px;
           background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 14%, transparent);
-          color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 78%, black 22%);
+          color: var(--boe-token-text-status-text-error, #b92340);
           font-size: 0.72rem;
           font-weight: 700;
         }
@@ -134,7 +139,7 @@ const elementStyles = `
           text-transform: none;
           letter-spacing: normal;
           font-size: 0.7rem;
-          color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 78%, black 22%);
+          color: var(--boe-token-text-status-text-error, #b92340);
         }
 
         [part="items"] {
@@ -147,7 +152,7 @@ const elementStyles = `
 
         [part="item"] {
           display: grid;
-          grid-template-columns: auto 1fr auto;
+          grid-template-columns: auto minmax(0, 1fr) auto;
           gap: 0.5rem;
           align-items: start;
           padding: 0.5rem 0.55rem;
@@ -174,6 +179,7 @@ const elementStyles = `
 
         [part="item-body"] {
           display: grid;
+          overflow-wrap: anywhere;
           gap: 0.15rem;
           min-inline-size: 0;
         }
@@ -223,6 +229,7 @@ const elementStyles = `
 
         [part="item-actions"] {
           display: flex;
+          flex-wrap: wrap;
           gap: 0.25rem;
         }
 
@@ -251,6 +258,15 @@ const elementStyles = `
           text-align: center;
         }
 
+        @container boe-notification-inbox (max-width: 32rem) {
+          [part="item"] {
+            grid-template-columns: auto minmax(0, 1fr);
+          }
+          [part="item-actions"] {
+            grid-column: 2;
+          }
+        }
+
         [part="filter"]:focus-visible,
         [part="mark-all"]:focus-visible,
         [part="item-title"]:focus-visible,

package/dist/patterns/preview/annotation-inspector.js

@@ -66,7 +66,7 @@ const elementStyles = `
           padding: 0.65rem;
           border-radius: ${boePanel.radius};
           border: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 48%, transparent);
-          background: rgba(255, 255, 255, 0.72);
+          background: var(--boe-token-surface-surface, #ffffff);
         }
 
         [part="annotation-header"] {
@@ -254,7 +254,7 @@ const elementStyles = `
         [part="action"][data-tone="primary"] {
           border-color: transparent;
           background: var(--boe-token-surface-surface-brand, #0061d5);
-          color: #fff;
+          color: var(--boe-token-text-text-on-brand, #ffffff);
         }
       `;
 export class AnnotationInspector extends BaseElement {

package/dist/patterns/undo/index.d.ts

@@ -0,0 +1,19 @@
+import { Toast } from "../../components/feedback/toast.js";
+/** Remove once and return an idempotent restore preserving the original object's identity. */
+export declare function removeAt<T>(list: T[], index: number): () => void;
+/** Never overwrite a key recreated after removal. */
+export declare function removeKey<T>(map: Record<string, T>, key: string): () => void;
+/** Restore into the current list, preserving intervening edits and clamping the index. */
+export declare function removeFromMapList<T>(map: Record<string, T[]>, key: string, index: number): () => void;
+export interface UndoOffer {
+    readonly toast: Toast | null;
+    undo(): void;
+    dispose(): void;
+}
+export interface UndoOptions {
+    container?: HTMLElement;
+    duration?: number;
+    onRestore?: () => void;
+}
+/** Offer a single document-scoped undo. Hosts call dispose on teardown. SSR-safe. */
+export declare function offerUndo(message: string, restore: () => void, options?: UndoOptions): UndoOffer;

package/dist/patterns/undo/index.js

@@ -0,0 +1,106 @@
+import { Toast } from "../../components/feedback/toast.js";
+import { announce } from "../../foundations/a11y/index.js";
+/** Remove once and return an idempotent restore preserving the original object's identity. */
+export function removeAt(list, index) {
+    if (!Number.isInteger(index) || index < 0 || index >= list.length)
+        return () => { };
+    const item = list.splice(index, 1)[0];
+    let restored = false;
+    return () => {
+        if (restored)
+            return;
+        restored = true;
+        list.splice(Math.min(index, list.length), 0, item);
+    };
+}
+/** Never overwrite a key recreated after removal. */
+export function removeKey(map, key) {
+    if (!Object.hasOwn(map, key))
+        return () => { };
+    const value = map[key];
+    delete map[key];
+    let restored = false;
+    return () => {
+        if (restored)
+            return;
+        restored = true;
+        if (!Object.hasOwn(map, key))
+            Object.defineProperty(map, key, { value, writable: true, enumerable: true, configurable: true });
+    };
+}
+/** Restore into the current list, preserving intervening edits and clamping the index. */
+export function removeFromMapList(map, key, index) {
+    const list = Object.hasOwn(map, key) ? map[key] : undefined;
+    if (!list || !Number.isInteger(index) || index < 0 || index >= list.length)
+        return () => { };
+    const item = list.splice(index, 1)[0];
+    if (!list.length)
+        delete map[key];
+    let restored = false;
+    return () => {
+        if (restored)
+            return;
+        restored = true;
+        if (!Object.hasOwn(map, key))
+            Object.defineProperty(map, key, { value: list, writable: true, enumerable: true, configurable: true });
+        const target = map[key];
+        target.splice(Math.min(index, target.length), 0, item);
+    };
+}
+const offers = new WeakMap();
+/** Offer a single document-scoped undo. Hosts call dispose on teardown. SSR-safe. */
+export function offerUndo(message, restore, options = {}) {
+    const doc = options.container?.ownerDocument ?? globalThis.document;
+    if (!doc?.body)
+        return { toast: null, undo() { }, dispose() { } };
+    offers.get(doc)?.dispose();
+    const toast = doc.createElement(Toast.tagName);
+    const action = doc.createElement("button");
+    action.type = "button";
+    action.slot = "action";
+    action.textContent = "Undo";
+    const mac = /Mac|iPhone|iPad/.test(doc.defaultView?.navigator.platform ?? "");
+    const shortcut = mac ? "Command-Z" : "Control-Z";
+    action.setAttribute("aria-keyshortcuts", mac ? "Meta+Z" : "Control+Z");
+    toast.append(action);
+    let live = true;
+    const dispose = () => {
+        if (!live)
+            return;
+        live = false;
+        doc.removeEventListener("keydown", onKey);
+        toast.removeEventListener("open-changed", onOpen);
+        toast.hide();
+        toast.remove();
+        if (offers.get(doc) === offer)
+            offers.delete(doc);
+    };
+    const undo = () => {
+        if (!live)
+            return;
+        dispose();
+        restore();
+        options.onRestore?.();
+        announce("Restored", "polite", doc);
+    };
+    const onKey = (event) => {
+        if (event.defaultPrevented || event.isComposing || event.shiftKey || event.altKey || !(event.metaKey || event.ctrlKey) || event.key.toLowerCase() !== "z")
+            return;
+        const editing = event.composedPath().some(target => target instanceof HTMLElement && (target.matches("input, textarea, select, [role=textbox]") || target.isContentEditable));
+        if (editing)
+            return;
+        event.preventDefault();
+        undo();
+    };
+    const onOpen = (event) => { if (!event.detail.open)
+        dispose(); };
+    const offer = { toast, undo, dispose };
+    offers.set(doc, offer);
+    action.addEventListener("click", undo);
+    toast.addEventListener("open-changed", onOpen);
+    doc.addEventListener("keydown", onKey);
+    (options.container ?? doc.body).append(toast);
+    // Toast owns the one persistent announcement, avoiding duplicate live messages.
+    toast.show(`${message}. Undo available with ${shortcut}.`, { duration: options.duration ?? 8000 });
+    return offer;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Box Open Elements: an open, framework-agnostic design system and web component library for Box-style experiences",
   "license": "MIT",
   "homepage": "https://unofficialbox.github.io/box-open-elements",
@@ -28,6 +28,14 @@
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
+    "./patterns/undo": {
+      "types": "./dist/patterns/undo/index.d.ts",
+      "import": "./dist/patterns/undo/index.js"
+    },
+    "./patterns/flow-builder": {
+      "types": "./dist/patterns/flow-builder/index.d.ts",
+      "import": "./dist/patterns/flow-builder/index.js"
+    },
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -173,8 +181,9 @@
     "dist"
   ],
   "scripts": {
+    "bundles:check": "bun tools/adapters/bundle-check.ts",
     "build": "bun run build:core && bun run build:adapters",
-    "build:core": "tsc -p tsconfig.json",
+    "build:core": "tsc -p tsconfig.json && cp src/foundations/icons/glyphs/package.json dist/foundations/icons/glyphs/package.json",
     "build:adapters": "bun run adapters:version && bun run --cwd packages/react build && bun run --cwd packages/angular build && bun run --cwd packages/vue build && bun run --cwd packages/svelte build",
     "build:watch": "tsc -p tsconfig.json --watch --preserveWatchOutput",
     "prepublishOnly": "bun run build",