@unofficialbox/box-open-elements 0.17.0 → 0.18.0

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

@@ -5,8 +5,13 @@ export declare class DropZone extends BaseElement {
     private dragging;
     private zoneEl;
     private inputEl;
+    private folderInputEl;
     private labelEl;
     private messageEl;
+    private browseEl;
+    private folderBrowseEl;
+    private separatorEl;
+    private illustrationEl;
     get label(): string;
     set label(value: string);
     get message(): string;
@@ -14,15 +19,31 @@ export declare class DropZone extends BaseElement {
     get description(): string;
     set description(value: string);
     /**
-     * Make the browse dialog pick a folder rather than files.
+     * Offer folder selection from the browse controls as well as files.
      *
-     * Drag-and-drop reads folders regardless — a dropped directory is always
-     * traversed. This only governs the click-to-browse path, where the platform
-     * makes it either/or: an input is a file picker or a folder picker, never
-     * both.
+     * A single `<input>` is either a file picker or a folder picker, never both —
+     * so this adds a *second* control backed by its own `webkitdirectory` input
+     * rather than converting the first, which is how box-ui-elements does it and
+     * means a person is never made to choose between the two.
+     *
+     * Drag-and-drop reads folders regardless; a dropped directory is always
+     * traversed whatever this is set to.
      */
     get directories(): boolean;
     set directories(value: boolean);
+    /** Text of the file-browse control. */
+    get browseLabel(): string;
+    set browseLabel(value: string);
+    /** Text of the folder-browse control, shown only when `directories` is set. */
+    get folderLabel(): string;
+    set folderLabel(value: string);
+    /**
+     * `"compact"` (default) keeps the small inline target; `"hero"` is the tall
+     * centred empty state, with room for an illustration in the `illustration`
+     * slot.
+     */
+    get variant(): string;
+    set variant(value: string);
     /**
      * What the browse dialog offers, in the `<input accept>` syntax —
      * `".pdf,.docx"` or `"image/*"`.

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

@@ -11,12 +11,19 @@ const dropZoneStyles = `
     font: inherit;
   }
 
+  /* Without this, the host's own display:block beats the UA rule for [hidden]
+     and the element stays visible when a host hides it. */
+  :host([hidden]) {
+    display: none;
+  }
+
   [part="zone"] {
     position: relative;
     display: grid;
     gap: 0.55rem;
     justify-items: start;
     padding: 0.75rem;
+    text-align: start;
     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);
@@ -49,7 +56,9 @@ const dropZoneStyles = `
       0 14px 28px rgba(15, 23, 42, 0.05);
   }
 
-  [part="input"] {
+  /* The inputs are never the focusable control — the browse buttons are — so
+     they are taken out of the tab order rather than merely hidden. */
+  [part~="file-input"] {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -57,8 +66,6 @@ const dropZoneStyles = `
     pointer-events: none;
   }
 
-  ${boeFocusVisibleStyles('[part="input"]')}
-
   [part="label"] {
     font-size: 1rem;
     font-weight: 700;
@@ -70,17 +77,99 @@ const dropZoneStyles = `
     line-height: 1.5;
     max-width: 34ch;
   }
+
+  [part="actions"] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem 0.5rem;
+  }
+
+  [part~="browse"] {
+    appearance: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    font-weight: 600;
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: ${boeRadius.control};
+  }
+
+  [part~="browse"]:hover {
+    text-decoration: underline;
+  }
+
+  ${boeFocusVisibleStyles('[part~="browse"]')}
+
+  [part="separator"] {
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  /* Hero: the full-height empty state, centred, with room for an illustration.
+     Matches the shape box-ui-elements gives its uploader. */
+  :host([variant="hero"]) [part="zone"] {
+    justify-items: center;
+    align-content: center;
+    gap: 0.35rem;
+    min-block-size: 18rem;
+    padding: 2rem 1.5rem;
+    text-align: center;
+  }
+
+  :host([variant="hero"]) [part="label"] {
+    font-size: 1.0625rem;
+  }
+
+  :host([variant="hero"]) [part~="description"] {
+    max-width: 42ch;
+  }
+
+  [part="illustration"] {
+    display: none;
+  }
+
+  :host([variant="hero"]) [part="illustration"] {
+    display: block;
+    /* The art carries its own padding inside the viewBox, so the box is set a
+       little larger than the 130px box-ui-elements uses for the drawn area. */
+    inline-size: min(10.5rem, 70%);
+    margin-block-end: 0.15rem;
+  }
+
+  ::slotted([slot="illustration"]) {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+  }
 `;
 export class DropZone extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["accept", "description", "directories", "label", "message"];
+        return [
+            "accept",
+            "browse-label",
+            "description",
+            "directories",
+            "folder-label",
+            "label",
+            "message",
+            "variant",
+        ];
     }
     dragging = false;
     zoneEl;
     inputEl;
+    folderInputEl;
     labelEl;
     messageEl;
+    browseEl;
+    folderBrowseEl;
+    separatorEl;
+    illustrationEl;
     get label() {
         return this.getAttribute("label") ?? "Upload files";
     }
@@ -100,12 +189,15 @@ export class DropZone extends BaseElement {
         this.setAttribute("description", value);
     }
     /**
-     * Make the browse dialog pick a folder rather than files.
+     * Offer folder selection from the browse controls as well as files.
+     *
+     * A single `<input>` is either a file picker or a folder picker, never both —
+     * so this adds a *second* control backed by its own `webkitdirectory` input
+     * rather than converting the first, which is how box-ui-elements does it and
+     * means a person is never made to choose between the two.
      *
-     * Drag-and-drop reads folders regardless — a dropped directory is always
-     * traversed. This only governs the click-to-browse path, where the platform
-     * makes it either/or: an input is a file picker or a folder picker, never
-     * both.
+     * Drag-and-drop reads folders regardless; a dropped directory is always
+     * traversed whatever this is set to.
      */
     get directories() {
         return this.hasAttribute("directories");
@@ -113,6 +205,31 @@ export class DropZone extends BaseElement {
     set directories(value) {
         this.toggleAttribute("directories", value);
     }
+    /** Text of the file-browse control. */
+    get browseLabel() {
+        return this.getAttribute("browse-label") ?? "Browse your device";
+    }
+    set browseLabel(value) {
+        this.setAttribute("browse-label", value);
+    }
+    /** Text of the folder-browse control, shown only when `directories` is set. */
+    get folderLabel() {
+        return this.getAttribute("folder-label") ?? "Select folders";
+    }
+    set folderLabel(value) {
+        this.setAttribute("folder-label", value);
+    }
+    /**
+     * `"compact"` (default) keeps the small inline target; `"hero"` is the tall
+     * centred empty state, with room for an illustration in the `illustration`
+     * slot.
+     */
+    get variant() {
+        return this.getAttribute("variant") === "hero" ? "hero" : "compact";
+    }
+    set variant(value) {
+        this.setAttribute("variant", value);
+    }
     /**
      * What the browse dialog offers, in the `<input accept>` syntax —
      * `".pdf,.docx"` or `"image/*"`.
@@ -135,16 +252,31 @@ export class DropZone extends BaseElement {
         if (!this.shadowRoot) {
             return;
         }
+        // A div rather than a label wrapping the input: the browse controls are
+        // real buttons, and a button inside a label is both ambiguous to assistive
+        // technology and prone to firing the picker twice.
         this.shadowRoot.innerHTML = `
       <style>${dropZoneStyles}</style>
-      <label part="zone">
-        <input type="file" part="input" multiple />
+      <div part="zone">
+        <input type="file" part="input file-input" multiple tabindex="-1" aria-hidden="true" />
+        <input type="file" part="folder-input file-input" multiple tabindex="-1" aria-hidden="true" webkitdirectory />
+        <span part="illustration"><slot name="illustration"></slot></span>
         <strong part="label"></strong>
         <span part="description message"></span>
-      </label>
+        <span part="actions">
+          <button type="button" part="browse browse-files"></button>
+          <span part="separator" hidden>or</span>
+          <button type="button" part="browse browse-folders" hidden></button>
+        </span>
+      </div>
     `;
         this.zoneEl = this.shadowRoot.querySelector('[part="zone"]');
-        this.inputEl = this.shadowRoot.querySelector('[part="input"]');
+        this.inputEl = this.shadowRoot.querySelector('[part~="input"]');
+        this.folderInputEl = this.shadowRoot.querySelector('[part~="folder-input"]');
+        this.browseEl = this.shadowRoot.querySelector('[part~="browse-files"]');
+        this.folderBrowseEl = this.shadowRoot.querySelector('[part~="browse-folders"]');
+        this.separatorEl = this.shadowRoot.querySelector('[part="separator"]');
+        this.illustrationEl = this.shadowRoot.querySelector('[part="illustration"]');
         this.labelEl = this.shadowRoot.querySelector('[part="label"]');
         this.messageEl = this.shadowRoot.querySelector('[part~="description"]');
     }
@@ -177,11 +309,30 @@ export class DropZone extends BaseElement {
                 this.emitSelection(entries, skipped);
             });
         });
-        this.inputEl.addEventListener("change", () => {
-            // `webkitdirectory` reports the tree through each file's
-            // webkitRelativePath rather than through entries.
-            this.emitSelection(entriesFromFileList(Array.from(this.inputEl.files ?? [])));
+        // Clicking the body of the zone still opens the file picker, as it did when
+        // the zone was a label. Clicks that land on a button are left alone, or the
+        // picker would be asked to open twice.
+        this.zoneEl.addEventListener("click", event => {
+            if (event.target.closest('[part~="browse"]')) {
+                return;
+            }
+            this.inputEl.click();
+        });
+        this.browseEl.addEventListener("click", () => {
+            this.inputEl.click();
+        });
+        this.folderBrowseEl.addEventListener("click", () => {
+            this.folderInputEl.click();
         });
+        for (const input of [this.inputEl, this.folderInputEl]) {
+            input.addEventListener("change", () => {
+                // A folder picked through `webkitdirectory` reports its tree through
+                // each file's webkitRelativePath rather than through entries.
+                this.emitSelection(entriesFromFileList(Array.from(input.files ?? [])));
+                // Cleared so choosing the same folder twice in a row still fires.
+                input.value = "";
+            });
+        }
     }
     /**
      * Report a selection.
@@ -213,13 +364,21 @@ export class DropZone extends BaseElement {
         this.zoneEl.dataset.dragging = String(this.dragging);
         this.labelEl.textContent = this.label;
         this.messageEl.textContent = this.message;
-        // webkitdirectory turns the browse dialog into a folder picker. It is a
-        // property as well as an attribute, and only the property is honoured
-        // reliably once the input exists.
+        // Hidden rather than left empty, so it does not open a gap in the stack.
+        this.messageEl.hidden = this.message.trim() === "";
+        this.browseEl.textContent = this.browseLabel;
+        this.folderBrowseEl.textContent = this.folderLabel;
+        // The folder control is a second input rather than a mode on the first, so
+        // files and folders are both reachable instead of mutually exclusive.
         const directories = this.directories;
-        this.inputEl.toggleAttribute("webkitdirectory", directories);
-        this.inputEl.webkitdirectory = directories;
+        this.folderBrowseEl.hidden = !directories;
+        this.separatorEl.hidden = !directories;
+        // webkitdirectory is a property as well as an attribute, and only the
+        // property is honoured reliably once the input exists.
+        this.folderInputEl.webkitdirectory = true;
+        // A folder picker offers folders, so an extension filter would only mislead.
         this.inputEl.accept = this.accept;
+        this.illustrationEl.hidden = this.variant !== "hero";
     }
 }
 DropZone.register();

package/dist/foundations/tokens/box-defaults.js

@@ -46,6 +46,42 @@ export const boxDefaultDesignSystem = {
     },
     illustrations: {
         "empty-state-folder": illustrationSvg("0 0 140 140", '<g fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-rule="evenodd" clip-rule="evenodd" opacity="0.1"><path d="M47.11 36H35.383c-1.261 0-2.294.97-2.378 2.198L33 38.36v48.604c0 2.162 1.716 3.926 3.872 4.031l.546.005h.257l.19-.036c1.743-.375 3.062-1.86 3.152-3.663l.005-.197V73.972a.98.98 0 0 1 .017-.18.87.87 0 0 1-.032-.155L41 73.52V56.717c0-4.209 3.7-7.59 8.268-7.713l.26-.004L97 48.999v-2.26c0-3.08-2.463-5.592-5.546-5.707l-.221-.004H54.118a4.402 4.402 0 0 1-3.51-1.738l-.14-.197-1.375-2.042a2.386 2.386 0 0 0-1.8-1.044L47.11 36Z" /><path d="M51 96a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm47-66c5.523 0 10 4.477 10 10s-4.477 10-10 10-10-4.477-10-10 4.477-10 10-10Z" /></g><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-rule="evenodd" d="M95 90c0-7.18-5.82-13-13-13s-13 5.82-13 13 5.82 13 13 13 13-5.82 13-13Zm-12.268-6.723a1.03 1.03 0 0 0-1.269-.107l-.105.079-.061.057-.057.061-4.99 5.898-.074.098a1.06 1.06 0 0 0 .187 1.384l.098.076c.17.115.371.177.578.177H79l.001 4.921c0 .596.497 1.08 1.11 1.08h3.779c.614 0 1.11-.484 1.11-1.081V91h1.96l.115-.006c.52-.057.925-.503.925-1.045 0-.249-.087-.489-.246-.679l-4.932-5.898-.09-.095Z" clip-rule="evenodd" /><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" d="M44.156 39c.466 0 .844.448.844 1s-.378 1-.844 1h-6.312c-.466 0-.844-.448-.844-1s.378-1 .844-1h6.312Zm41.952 21c.493 0 .892.448.892 1s-.4 1-.892 1H61.892c-.493 0-.892-.448-.892-1s.4-1 .892-1h24.216Z" /><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-rule="evenodd" d="M99 91a6 6 0 0 0 5.996-5.775L105 85l.005-28.283c0-2.983-2.745-5.672-6.005-5.708l-49.473-.019c-3.55 0-6.403 2.476-6.528 5.518l-.004.209c0 10.13.005 20.255.005 30.387a5.817 5.817 0 0 1-1.497 3.897L65 91a1 1 0 0 1 0 2H37c-3.238 0-5.878-2.521-5.996-5.675L31 87.104V38.347c0-2.33 1.85-4.232 4.174-4.342l.212-.005h11.727a4.4 4.4 0 0 1 3.509 1.739l.14.197 1.376 2.043c.407.607 1.073.99 1.799 1.045l.183.007h37.11c4.208 0 7.636 3.316 7.766 7.456l.004.244v2.284c4.358.24 7.863 3.449 7.996 7.464l.004.238V85a8 8 0 0 1-7.75 7.996L99 93a1 1 0 0 1 0-2ZM35.383 36H47.11l.183.007a2.386 2.386 0 0 1 1.8 1.044l1.375 2.042.14.197a4.402 4.402 0 0 0 3.51 1.738h37.115l.221.004c3.083.115 5.546 2.627 5.546 5.707v2.26L49.528 49l-.26.004C44.7 49.127 41 52.508 41 56.717c0 10.129.022 20.258.022 30.387l-.005.197c-.09 1.803-1.409 3.288-3.152 3.663l-.19.036h-.257l-.546-.005C34.716 90.89 33 89.126 33 86.964V38.36l.005-.162A2.374 2.374 0 0 1 35.383 36Z" clip-rule="evenodd" />'),
+        // Fanned file cards behind a cloud carrying an upload arrow — the empty
+        // state for box-content-uploader, matching what box-ui-elements shows.
+        // Cards are stroked rather than filled so they read on a dark surface too.
+        "upload-cloud": illustrationSvg("0 0 140 140", [
+            '<ellipse cx="70" cy="116" rx="27" ry="3.5" fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" opacity="0.1" />',
+            '<g fill="var(--boe-token-surface-surface, #ffffff)" stroke="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" stroke-width="2" stroke-linejoin="round">',
+            // Five cards fanned across an arc. Each is drawn at the origin and
+            // placed by transform, so the shape is written once.
+            [
+                { x: 44, y: 72, rotate: -26, glyph: "grid" },
+                { x: 57, y: 65, rotate: -13, glyph: "lines" },
+                { x: 70, y: 62, rotate: 0, glyph: "lines" },
+                { x: 83, y: 65, rotate: 13, glyph: "image" },
+                { x: 96, y: 72, rotate: 26, glyph: "grid" },
+            ]
+                .map(card => {
+                const glyphs = {
+                    lines: '<rect x="5" y="13" width="16" height="2" rx="1" /><rect x="5" y="18" width="16" height="2" rx="1" /><rect x="5" y="23" width="10" height="2" rx="1" />',
+                    image: '<circle cx="9" cy="15" r="2" /><path d="M5 25l5-6 4 5 3-3 4 5v1H5z" />',
+                    grid: '<rect x="5" y="13" width="7" height="6" rx="1" /><rect x="14" y="13" width="7" height="6" rx="1" /><rect x="5" y="21" width="7" height="6" rx="1" /><rect x="14" y="21" width="7" height="6" rx="1" />',
+                };
+                return [
+                    `<g transform="translate(${String(card.x)} ${String(card.y)}) rotate(${String(card.rotate)}) translate(-13 -17)">`,
+                    '<path d="M0 4a4 4 0 0 1 4-4h14l8 8v22a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V4Z" />',
+                    '<path d="M18 0v6a2 2 0 0 0 2 2h6" fill="none" />',
+                    `<g fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" stroke="none" opacity="0.45">${glyphs[card.glyph] ?? ""}</g>`,
+                    "</g>",
+                ].join("");
+            })
+                .join(""),
+            "</g>",
+            // The cloud sits in front of the cards, so only their tops show.
+            '<path d="M52 108A14 14 0 0 1 52 80A20 20 0 0 1 88 80A14 14 0 0 1 88 108Z" fill="var(--boe-token-surface-surface, #ffffff)" stroke="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" stroke-width="2" stroke-linejoin="round" />',
+            '<circle cx="70" cy="89" r="11.5" fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-opacity="0.12" stroke="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" stroke-width="1.75" stroke-dasharray="2 3.5" stroke-linecap="round" />',
+            '<path d="M70 83l5 5h-3v5h-4v-5h-3z" fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" />',
+        ].join("")),
         "files-information": illustrationSvg("0 0 140 140", '<path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-opacity="0.1" d="M97.5 99a2.5 2.5 0 0 1 2.5 2.5v7a2.5 2.5 0 1 1-5 0v-7a2.5 2.5 0 0 1 2.5-2.5ZM97.5 91a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM74 78a2 2 0 1 1 0 4H57a2 2 0 1 1 0-4h17ZM90.01 67a1.99 1.99 0 0 1 0 3.978H56.99a1.99 1.99 0 0 1 0-3.978h33.02ZM90 56a2 2 0 1 1 0 4H57a2 2 0 1 1 0-4h33ZM80.058 27c.61 0 1.202.206 1.671.595C83.773 29.286 87.784 32.783 92 37c4.641 4.641 8.41 8.877 9.859 10.81a.73.73 0 0 1-1.105.944L98.89 46.89a3.037 3.037 0 0 0-2.148-.89h-9.264A4.479 4.479 0 0 1 83 41.522v-8.743a4.479 4.479 0 0 0-1.22-3.073L79.226 27h.83Z" /><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-opacity="0.25" d="M45 91.001a8 8 0 0 0 8 8h28.068c-.044.494-.068.994-.068 1.499a16.42 16.42 0 0 0 2.966 9.439A7.896 7.896 0 0 1 83 110H43c-5.523 0-10-4.477-10-10V47a7 7 0 0 1 7-7h5v51.001Z" /><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-rule="evenodd" d="M97.5 98.25a3.25 3.25 0 0 1 3.25 3.25v7a3.25 3.25 0 1 1-6.5 0v-7a3.25 3.25 0 0 1 3.25-3.25Zm0 1.5a1.75 1.75 0 0 0-1.75 1.75v7a1.75 1.75 0 0 0 3.5 0v-7a1.75 1.75 0 0 0-1.75-1.75ZM97.5 90.25a3.25 3.25 0 1 1 0 6.5 3.25 3.25 0 0 1 0-6.5Zm0 1.5a1.75 1.75 0 1 0 0 3.5 1.75 1.75 0 0 0 0-3.5Z" clip-rule="evenodd" /><path fill="var(--boe-token-surface-illustration-surface-box-neutral, #0061d5)" fill-rule="evenodd" d="M79.1 26.25a7.75 7.75 0 0 1 5.481 2.27l15.899 15.899a7.749 7.749 0 0 1 2.27 5.48v34.165c6.96 2.222 12 8.74 12 16.436 0 9.527-7.723 17.25-17.25 17.25-5.743 0-10.83-2.807-13.965-7.123-.5.08-1.013.123-1.535.123H42c-5.385 0-9.75-4.365-9.75-9.75V47A7.75 7.75 0 0 1 40 39.25h4.25V34A7.75 7.75 0 0 1 52 26.25h27.1Zm18.4 58.5c-8.698 0-15.75 7.052-15.75 15.75s7.052 15.75 15.75 15.75 15.75-7.052 15.75-15.75-7.052-15.75-15.75-15.75Zm-57.5-44A6.25 6.25 0 0 0 33.75 47v54a8.25 8.25 0 0 0 8.25 8.25h40c.207 0 .413-.011.616-.026a17.172 17.172 0 0 1-2.348-9.473H52a7.75 7.75 0 0 1-7.75-7.75V40.75H40Zm12-13A6.25 6.25 0 0 0 45.75 34v58.001a6.25 6.25 0 0 0 6.25 6.25h28.395c1.103-8.464 8.34-15.001 17.105-15.001 1.288 0 2.543.141 3.75.41V51.112c0-.514-.204-1.007-.567-1.37l-1.902-1.901a3.73 3.73 0 0 0-2.637-1.092h-8.666a5.229 5.229 0 0 1-5.228-5.228v-8.743c0-.951-.364-1.866-1.017-2.558l-1.756-1.864a1.938 1.938 0 0 0-1.41-.607H52Zm30.325 1.441a5.23 5.23 0 0 1 1.425 3.588v8.742c0 2.06 1.67 3.729 3.728 3.729h8.666a5.23 5.23 0 0 1 3.698 1.531l1.056 1.057a6.241 6.241 0 0 0-1.48-2.358L83.52 29.581a6.252 6.252 0 0 0-2.15-1.403l.956 1.013Z" clip-rule="evenodd" />'),
     },
 };

package/dist/patterns/content-uploader/content-uploader.d.ts

@@ -14,6 +14,13 @@ export declare class ContentUploader extends BaseElement {
     private summaryEl;
     private queueSignature;
     private updateScheduled;
+    private closeEl;
+    private cancelEl;
+    private uploadEl;
+    private clearCompletedEl;
+    private illustrationEl;
+    private illustrationSignature;
+    private readonly handleDesignSystemChange;
     get folderId(): string | null;
     set folderId(value: string | null);
     get token(): string | null;
@@ -50,8 +57,24 @@ export declare class ContentUploader extends BaseElement {
      */
     get directories(): boolean;
     set directories(value: boolean);
+    /**
+     * 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(): boolean;
+    set closable(value: boolean);
+    /**
+     * 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(): string;
     set dropLabel(value: string);
+    /**
+     * 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(): string;
     set dropMessage(value: string);
     get transport(): UploadTransport | null;
@@ -98,7 +121,17 @@ export declare class ContentUploader extends BaseElement {
     private scheduleUpdate;
     private teardownController;
     protected renderTemplate(): void;
+    /**
+     * 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.
+     */
+    private renderIllustration;
     protected setupListeners(): void;
+    /** Cancel every item still queued or in flight. Settled items are untouched. */
+    cancelAll(): void;
     private rebuildQueue;
     private patchQueueProgress;
     protected update(): void;

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";
@@ -171,10 +172,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 +192,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 +289,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 +389,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 +445,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 +457,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 +602,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 +621,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 +671,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 +746,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 +767,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unofficialbox/box-open-elements",
-  "version": "0.17.0",
+  "version": "0.18.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",