@unofficialbox/box-open-elements 0.17.0 → 0.19.0

package/dist/patterns/content-uploader/content-uploader.js

@@ -4,6 +4,7 @@ import { formatItemSize } from "../content-explorer/adapters/item-summary.js";
 import { DropZone } from "../../components/files/drop-zone.js";
 import { ProgressBar } from "../../components/feedback/progress-bar.js";
 import { BaseElement } from "../../core/index.js";
+import { DESIGN_SYSTEM_CHANGE_EVENT, resolveDesignIllustration, } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
 import { boePanel, boeRadius } from "../../foundations/geometry/index.js";
 const DEFAULT_TAG_NAME = "box-content-uploader";
@@ -62,6 +63,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: ${boePanel.gap};
@@ -171,10 +178,19 @@ const elementStyles = `
           box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
         }
 
+        /* The footer is a bar rather than a caption: Close sits apart on the
+           left, the queue-level actions group on the right, as they do in
+           box-ui-elements. */
+        /* Wraps rather than squeezes: in a narrow column the summary would
+           otherwise concertina onto three lines and the button labels break
+           mid-phrase. Wrapped, the action group drops to its own row intact. */
         [part="footer"] {
           display: flex;
+          flex-wrap: wrap;
           align-items: center;
-          gap: ${boePanel.gap};
+          gap: 0.5rem ${boePanel.gap};
+          padding-block-start: ${boePanel.gap};
+          border-block-start: 1px solid color-mix(in srgb, var(--boe-token-stroke-stroke, #e8e8e8) 82%, transparent);
         }
 
         [part="footer"][hidden] {
@@ -182,39 +198,81 @@ const elementStyles = `
         }
 
         [part="summary"] {
-          flex: 1;
+          /* Takes the slack but never forces a wrap of its own: it is a status
+             line, not a reason for the buttons to be squeezed. */
+          flex: 1 1 auto;
+          min-inline-size: 0;
           font-size: 0.85rem;
           color: var(--boe-token-text-text-secondary, #6f6f6f);
         }
 
-        [part="clear-completed"] {
+        [part="footer-actions"] {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          justify-content: flex-end;
+          /* Keeps the group right-aligned once the footer wraps it onto its
+             own row. */
+          margin-inline-start: auto;
+          gap: 0.5rem;
+        }
+
+        [part~="action"] {
           appearance: none;
           font: inherit;
           font-size: 0.875rem;
           font-weight: 600;
-          padding: 0.4rem 0.7rem;
+          padding: 0.5rem 0.9rem;
           border-radius: ${boeRadius.control};
           border: 1px solid var(--boe-token-stroke-stroke, #e8e8e8);
           background: var(--boe-token-surface-surface, #ffffff);
           color: var(--boe-token-text-text, #222222);
           cursor: pointer;
+          /* A label that breaks mid-phrase reads as two controls. */
+          white-space: nowrap;
+          transition:
+            background ${boeMotionDuration.interactive} ${boeMotionEasing.standard},
+            border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
         }
 
-        [part="clear-completed"]:hover {
+        [part~="action"]:hover:not(:disabled) {
           background: var(--boe-token-surface-surface-hover, #f4f4f4);
           border-color: var(--boe-token-stroke-stroke-hover, #bcbcbc);
         }
 
-        [part="clear-completed"]:focus-visible {
+        [part~="action"]:focus-visible {
           outline: none;
           box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 18%, transparent);
         }
+
+        /* Disabled, not removed: the control keeps its place so the footer does
+           not reflow as the queue changes, and stays discoverable. */
+        [part~="action"]:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+
+        [part~="action-primary"] {
+          border-color: transparent;
+          background: var(--boe-token-surface-surface-brand, #0061d5);
+          color: var(--boe-token-text-text-on-color, #ffffff);
+        }
+
+        [part~="action-primary"]:hover:not(:disabled) {
+          background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 86%, black 14%);
+          border-color: transparent;
+        }
+
+        [part="close"][hidden] {
+          display: none;
+        }
       `;
 export class ContentUploader extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
         return [
             "auto-start",
+            "closable",
             "concurrency",
             "drop-label",
             "drop-message",
@@ -237,6 +295,17 @@ export class ContentUploader extends BaseElement {
     summaryEl;
     queueSignature = "";
     updateScheduled = false;
+    closeEl;
+    cancelEl;
+    uploadEl;
+    clearCompletedEl;
+    illustrationEl;
+    illustrationSignature = "";
+    handleDesignSystemChange = () => {
+        if (this.isRendered) {
+            this.renderIllustration();
+        }
+    };
     get folderId() {
         return this.getAttribute("folder-id");
     }
@@ -326,14 +395,39 @@ export class ContentUploader extends BaseElement {
     set directories(value) {
         this.toggleAttribute("directories", value);
     }
+    /**
+     * Show the Close control. On by default, matching box-ui-elements; a host
+     * that owns its own dismissal (a drawer with its own close button) sets
+     * `closable="false"` rather than styling ours away.
+     */
+    get closable() {
+        return this.getAttribute("closable") !== "false";
+    }
+    set closable(value) {
+        if (value) {
+            this.removeAttribute("closable");
+            return;
+        }
+        this.setAttribute("closable", "false");
+    }
+    /**
+     * Headline of the empty state. Defaults to the box-ui-elements wording, and
+     * names folders too when they can be uploaded, so the invitation matches what
+     * the zone will actually accept.
+     */
     get dropLabel() {
-        return this.getAttribute("drop-label") ?? "Upload files";
+        return (this.getAttribute("drop-label") ??
+            (this.directories ? "Drag and drop files and folders" : "Drag and drop files"));
     }
     set dropLabel(value) {
         this.setAttribute("drop-label", value);
     }
+    /**
+     * Optional supporting line under the headline. Empty by default: the browse
+     * controls say what to do, and a sentence repeating them is noise.
+     */
     get dropMessage() {
-        return this.getAttribute("drop-message") ?? "Drag files here or click to browse.";
+        return this.getAttribute("drop-message") ?? "";
     }
     set dropMessage(value) {
         this.setAttribute("drop-message", value);
@@ -357,6 +451,7 @@ export class ContentUploader extends BaseElement {
      * else feeds the session config, so changing it re-creates the queue.
      */
     static PRESENTATION_ATTRIBUTES = new Set([
+        "closable",
         "directories",
         "drop-label",
         "drop-message",
@@ -368,10 +463,12 @@ export class ContentUploader extends BaseElement {
         super.attributeChangedCallback(name, oldValue, newValue);
     }
     connectedCallback() {
+        globalThis.addEventListener?.(DESIGN_SYSTEM_CHANGE_EVENT, this.handleDesignSystemChange);
         super.connectedCallback();
         this.scheduleStart();
     }
     disconnectedCallback() {
+        globalThis.removeEventListener?.(DESIGN_SYSTEM_CHANGE_EVENT, this.handleDesignSystemChange);
         this.teardownController();
     }
     addFiles(files) {
@@ -511,11 +608,18 @@ export class ContentUploader extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${elementStyles}</style>
       <div part="panel">
-        <box-drop-zone part="drop-zone"></box-drop-zone>
+        <box-drop-zone part="drop-zone" variant="hero">
+          <span slot="illustration" part="drop-illustration"></span>
+        </box-drop-zone>
         <ul part="queue" aria-label="Upload queue"></ul>
-        <footer part="footer" hidden>
+        <footer part="footer">
+          <button type="button" part="action close">Close</button>
           <span part="summary" role="status" aria-live="polite"></span>
-          <button type="button" part="clear-completed">Clear completed</button>
+          <span part="footer-actions">
+            <button type="button" part="action clear-completed">Clear completed</button>
+            <button type="button" part="action cancel">Cancel</button>
+            <button type="button" part="action action-primary upload">Upload</button>
+          </span>
         </footer>
       </div>
     `;
@@ -523,6 +627,25 @@ export class ContentUploader extends BaseElement {
         this.queueEl = this.shadowRoot.querySelector('[part="queue"]');
         this.footerEl = this.shadowRoot.querySelector('[part="footer"]');
         this.summaryEl = this.shadowRoot.querySelector('[part="summary"]');
+        this.closeEl = this.shadowRoot.querySelector('[part~="close"]');
+        this.cancelEl = this.shadowRoot.querySelector('[part~="cancel"]');
+        this.uploadEl = this.shadowRoot.querySelector('[part~="upload"]');
+        this.clearCompletedEl = this.shadowRoot.querySelector('[part~="clear-completed"]');
+        this.illustrationEl = this.shadowRoot.querySelector('[part="drop-illustration"]');
+    }
+    /**
+     * Paints the empty-state art from the active design system, so a host that
+     * registers its own system gets its own illustration without touching this.
+     *
+     * Resolved during update rather than at template time: a host may register or
+     * switch design systems after the element upgrades, and the art has to follow.
+     */
+    renderIllustration() {
+        const markup = resolveDesignIllustration("upload-cloud") ?? "";
+        if (markup !== this.illustrationSignature) {
+            this.illustrationSignature = markup;
+            this.illustrationEl.innerHTML = markup;
+        }
     }
     setupListeners() {
         this.dropZoneEl.addEventListener("files-selected", event => {
@@ -554,9 +677,33 @@ export class ContentUploader extends BaseElement {
                 this.removeItem(itemId);
             }
         });
-        this.footerEl.querySelector('[part="clear-completed"]')?.addEventListener("click", () => {
+        this.clearCompletedEl.addEventListener("click", () => {
             this.clearCompleted();
         });
+        this.uploadEl.addEventListener("click", () => {
+            this.start();
+        });
+        this.cancelEl.addEventListener("click", () => {
+            this.cancelAll();
+        });
+        // The uploader does not own the surface it sits in — a dialog, a drawer, a
+        // page — so Close reports the intent and the host decides what closing
+        // means. Cancellable, so a host can refuse.
+        this.closeEl.addEventListener("click", () => {
+            this.dispatchEvent(new CustomEvent("close", { bubbles: true, composed: true, cancelable: true }));
+        });
+    }
+    /** Cancel every item still queued or in flight. Settled items are untouched. */
+    cancelAll() {
+        const controller = this.controller;
+        if (!controller) {
+            return;
+        }
+        for (const item of controller.getState().items) {
+            if (item.status === "queued" || item.status === "uploading") {
+                controller.cancelItem(item.id);
+            }
+        }
     }
     rebuildQueue(items) {
         this.queueEl.innerHTML = items
@@ -605,6 +752,7 @@ export class ContentUploader extends BaseElement {
         if (!this.queueEl) {
             return;
         }
+        this.renderIllustration();
         this.dropZoneEl.label = this.dropLabel;
         this.dropZoneEl.message = this.dropMessage;
         this.dropZoneEl.directories = this.directories;
@@ -625,12 +773,29 @@ export class ContentUploader extends BaseElement {
         }
         this.patchQueueProgress(items);
         const summary = summarizeUploadQueue(items);
-        this.footerEl.hidden = summary.total === 0;
         const active = summary.queued + summary.uploading;
+        // The empty state and the queue are alternatives, not neighbours: the
+        // illustration is the invitation, and once files are in the queue the list
+        // is what a person needs to see. Dropping still works over the list.
+        this.dropZoneEl.hidden = summary.total > 0;
+        // The footer stays put with its controls disabled rather than appearing
+        // when the first file lands — a bar that materialises under the pointer is
+        // how people click the wrong thing.
+        this.uploadEl.disabled = summary.queued === 0;
+        this.cancelEl.disabled = active === 0;
+        this.clearCompletedEl.disabled = summary.succeeded + summary.cancelled === 0;
+        // Closing mid-upload would abandon transfers in flight, so Close waits.
+        // box-ui-elements disables it for any non-empty queue; that would trap a
+        // person on a finished queue with no way out, so it is only held while
+        // something is actually running.
+        this.closeEl.disabled = active > 0;
+        this.closeEl.hidden = !this.closable;
         this.summaryEl.textContent =
-            active > 0
-                ? `Uploading ${String(summary.uploading)} · ${String(summary.queued)} queued`
-                : `${String(summary.succeeded)} of ${String(summary.total)} uploaded${summary.failed ? ` · ${String(summary.failed)} failed` : ""}`;
+            summary.total === 0
+                ? ""
+                : active > 0
+                    ? `Uploading ${String(summary.uploading)} · ${String(summary.queued)} queued`
+                    : `${String(summary.succeeded)} of ${String(summary.total)} uploaded${summary.failed ? ` · ${String(summary.failed)} failed` : ""}`;
     }
 }
 DropZone.register();

package/dist/patterns/diff/compare-view.js

@@ -18,6 +18,12 @@ const elementStyles = `
           display: block;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         /*
          * The height a host sets on the element has to reach the scrollers, or
          * the panes size to their content, never overflow, and the scroll lock

package/dist/patterns/diff/diff-viewer.js

@@ -20,6 +20,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/file-request/file-request-builder.js

@@ -15,6 +15,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="builder"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/form-wizard/form-wizard.js

@@ -25,6 +25,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="wizard"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/form-wizard/wizard-summary.js

@@ -13,6 +13,12 @@ const elementStyles = `
           display: block;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="card"] {
           border: ${boePanel.border};
           border-radius: ${boePanel.radius};

package/dist/patterns/governance/governance-panel.js

@@ -15,6 +15,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/insights/bar-chart.js

@@ -14,6 +14,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/insights/chart-panel.js

@@ -15,6 +15,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: 0.6rem;

package/dist/patterns/insights/donut-chart.js

@@ -16,6 +16,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/insights/line-chart.js

@@ -14,6 +14,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/insights/metric-card.js

@@ -15,6 +15,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="card"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/bulk-action-bar.js

@@ -24,6 +24,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="bar"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/item-details-panel.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/item-form.js

@@ -16,6 +16,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="form"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/item/preview-header.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-brand-soft: color-mix(in srgb, var(--_obp-brand) 12%, var(--boe-token-surface-surface, #ffffff) 88%);
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="header"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/lineage/lineage-graph.js

@@ -39,6 +39,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         section[part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

package/dist/patterns/lineage/provenance-strip.js

@@ -21,6 +21,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         /* Read as a flow diagram rather than a breadcrumb. The anatomy is
            React Flow's, taken from its stylesheet: nodes are bordered boxes
            with a small radius (not pills), ports are 6px circles sitting on

package/dist/patterns/metadata/metadata-filter-builder.js

@@ -20,6 +20,12 @@ const builderStyles = `
     font: inherit;
   }
 
+  /* The host's own display would otherwise beat the UA rule for [hidden],
+     leaving the element on screen when a host hides it. */
+  :host([hidden]) {
+    display: none !important;
+  }
+
   [part="builder"] {
     display: grid;
     gap: ${boePanel.gap};

package/dist/patterns/metadata/metadata-inspector.js

@@ -15,6 +15,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="inspector"] {
           display: grid;
           gap: ${boePanel.gap};

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

@@ -18,6 +18,12 @@ const elementStyles = `
           display: inline-block;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="trigger"] {
           position: relative;
           appearance: none;

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

@@ -21,6 +21,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           grid-template-rows: auto auto 1fr;

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

@@ -22,6 +22,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="panel"] {
           display: grid;
           gap: ${boePanel.gap};

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

@@ -23,6 +23,12 @@ const elementStyles = `
           font: inherit;
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="toolbar"] {
           display: grid;
           gap: 0.5rem;

package/dist/patterns/preview/preview-element.js

@@ -23,6 +23,12 @@ const elementStyles = `
           --_obp-error: var(--boe-token-surface-status-surface-error, #ed3757);
         }
 
+        /* The host's own display would otherwise beat the UA rule for [hidden],
+           leaving the element on screen when a host hides it. */
+        :host([hidden]) {
+          display: none !important;
+        }
+
         [part="shell"] {
           display: grid;
           gap: 0.6rem;