@unofficialbox/box-open-elements 0.16.0 → 0.18.0

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/index.d.ts

@@ -10,6 +10,7 @@ export type { ApplyDesignProfileOptions, DesignProfileChangeDetail, DesignProfil
 export { boxIconography, boxIconographyAliases } from "./foundations/icons/index.js";
 export * from "./foundations/layout/index.js";
 export * from "./foundations/format/index.js";
+export * from "./foundations/files/index.js";
 export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./foundations/overlay/index.js";
 export type { OverlayAlign, OverlayPlacement, OverlaySide, PositionOptions, PositionResult, } from "./foundations/overlay/index.js";
 export * from "./components/actions/button.js";

package/dist/index.js

@@ -9,6 +9,9 @@ export { boxIconography, boxIconographyAliases } from "./foundations/icons/index
 export * from "./foundations/layout/index.js";
 // Foundations: locale-aware typed-value formatting (shared by box-formatted-*)
 export * from "./foundations/format/index.js";
+// Foundations: reading dropped files and folders (shared by box-drop-zone and
+// the content-uploader pattern)
+export * from "./foundations/files/index.js";
 // Foundations: viewport-aware overlay positioning (for building custom overlays)
 export { anchorFloating, parsePlacement, resolvePosition, trackAnchor, } from "./foundations/overlay/index.js";
 // Components: actions

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

@@ -13,6 +13,14 @@ export declare class ContentUploader extends BaseElement {
     private footerEl;
     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;
@@ -30,8 +38,43 @@ export declare class ContentUploader extends BaseElement {
     /** Maximum accepted file size in bytes. */
     get maxFileSize(): number | undefined;
     set maxFileSize(value: number | undefined);
+    /**
+     * Most files the queue will hold, default 100 — the same ceiling
+     * box-ui-elements uses. Further files are rejected with
+     * `file-limit-reached` rather than enqueued.
+     *
+     * A default matters here in a way it does not for the other constraints: a
+     * dropped folder can carry thousands of files, and an unbounded queue has no
+     * back pressure at all.
+     */
+    get fileLimit(): number;
+    set fileLimit(value: number);
+    /**
+     * Make the browse dialog pick a folder rather than files.
+     *
+     * Dropping a folder works either way; the platform only forces the choice on
+     * the click-to-browse path.
+     */
+    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;
@@ -39,10 +82,24 @@ export declare class ContentUploader extends BaseElement {
     get state(): Readonly<UploaderState> | null;
     /** The live queue controller. Null until configured. */
     get uploaderController(): ContentUploaderController | null;
+    /**
+     * Attributes that only affect how the drop zone presents itself. Everything
+     * else feeds the session config, so changing it re-creates the queue.
+     */
+    private static readonly PRESENTATION_ATTRIBUTES;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     addFiles(files: UploadFileLike[]): UploadQueueItem[];
+    /**
+     * Queue files that carry a directory path relative to the destination, the
+     * way a dropped folder does. Requires `createFolder` on the transport;
+     * without it each pathed file is rejected with `folder-unsupported`.
+     */
+    addEntries(entries: Array<{
+        file: UploadFileLike;
+        path?: string;
+    }>): UploadQueueItem[];
     start(): void;
     cancelItem(itemId: string): void;
     retryItem(itemId: string): void;
@@ -53,9 +110,28 @@ export declare class ContentUploader extends BaseElement {
     private startController;
     private readConfig;
     private subscribeToController;
+    /**
+     * Coalesce the re-render for a burst of controller events.
+     *
+     * A folder drop adds up to `fileLimit` items in one go, each emitting its own
+     * `itemAdded`; rendering per event rebuilt the whole queue once per file,
+     * which is quadratic in the size of the drop. One render per microtask turn
+     * gives the same result for a fraction of the work.
+     */
+    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,9 +4,12 @@ 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";
+/** Matches the box-ui-elements ceiling, so a port behaves the same way. */
+const DEFAULT_FILE_LIMIT = 100;
 const escapeHtml = (value) => value
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
@@ -169,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] {
@@ -180,43 +192,87 @@ 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",
+            "directories",
             "extensions",
+            "file-limit",
             "folder-id",
             "language",
             "max-file-size",
@@ -232,6 +288,18 @@ export class ContentUploader extends BaseElement {
     footerEl;
     summaryEl;
     queueSignature = "";
+    updateScheduled = false;
+    closeEl;
+    cancelEl;
+    uploadEl;
+    clearCompletedEl;
+    illustrationEl;
+    illustrationSignature = "";
+    handleDesignSystemChange = () => {
+        if (this.isRendered) {
+            this.renderIllustration();
+        }
+    };
     get folderId() {
         return this.getAttribute("folder-id");
     }
@@ -293,14 +361,67 @@ export class ContentUploader extends BaseElement {
         }
         this.removeAttribute("max-file-size");
     }
+    /**
+     * Most files the queue will hold, default 100 — the same ceiling
+     * box-ui-elements uses. Further files are rejected with
+     * `file-limit-reached` rather than enqueued.
+     *
+     * A default matters here in a way it does not for the other constraints: a
+     * dropped folder can carry thousands of files, and an unbounded queue has no
+     * back pressure at all.
+     */
+    get fileLimit() {
+        const raw = Number(this.getAttribute("file-limit"));
+        return Number.isFinite(raw) && raw >= 1 ? Math.floor(raw) : DEFAULT_FILE_LIMIT;
+    }
+    set fileLimit(value) {
+        this.setAttribute("file-limit", String(value));
+    }
+    /**
+     * Make the browse dialog pick a folder rather than files.
+     *
+     * Dropping a folder works either way; the platform only forces the choice on
+     * the click-to-browse path.
+     */
+    get directories() {
+        return this.hasAttribute("directories");
+    }
+    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);
@@ -319,23 +440,42 @@ export class ContentUploader extends BaseElement {
     get uploaderController() {
         return this.controller;
     }
+    /**
+     * Attributes that only affect how the drop zone presents itself. Everything
+     * else feeds the session config, so changing it re-creates the queue.
+     */
+    static PRESENTATION_ATTRIBUTES = new Set([
+        "closable",
+        "directories",
+        "drop-label",
+        "drop-message",
+    ]);
     attributeChangedCallback(name, oldValue, newValue) {
-        // Drop-zone copy is presentation-only; everything else re-creates the queue.
-        if (name !== "drop-label" && name !== "drop-message") {
+        if (!ContentUploader.PRESENTATION_ATTRIBUTES.has(name)) {
             this.scheduleStart();
         }
         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) {
         return this.controller?.addFiles(files) ?? [];
     }
+    /**
+     * Queue files that carry a directory path relative to the destination, the
+     * way a dropped folder does. Requires `createFolder` on the transport;
+     * without it each pathed file is rejected with `folder-unsupported`.
+     */
+    addEntries(entries) {
+        return this.controller?.addEntries(entries) ?? [];
+    }
     start() {
         this.controller?.start();
     }
@@ -396,6 +536,7 @@ export class ContentUploader extends BaseElement {
             autoStart: this.autoStart,
             concurrency: this.concurrency,
             extensions: this.extensions.length ? this.extensions : undefined,
+            fileLimit: this.fileLimit,
             folderId: this.folderId,
             language: this.language ?? undefined,
             maxFileSizeBytes: this.maxFileSize,
@@ -422,10 +563,28 @@ export class ContentUploader extends BaseElement {
                 composed: true,
                 detail: payload,
             }));
+            this.scheduleUpdate();
+        }));
+    }
+    /**
+     * Coalesce the re-render for a burst of controller events.
+     *
+     * A folder drop adds up to `fileLimit` items in one go, each emitting its own
+     * `itemAdded`; rendering per event rebuilt the whole queue once per file,
+     * which is quadratic in the size of the drop. One render per microtask turn
+     * gives the same result for a fraction of the work.
+     */
+    scheduleUpdate() {
+        if (!this.isRendered || this.updateScheduled) {
+            return;
+        }
+        this.updateScheduled = true;
+        queueMicrotask(() => {
+            this.updateScheduled = false;
             if (this.isRendered) {
                 this.update();
             }
-        }));
+        });
     }
     teardownController() {
         for (const unsubscribe of this.unsubscribeFns) {
@@ -443,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>
     `;
@@ -455,12 +621,34 @@ 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 => {
-            const files = event.detail?.files ?? [];
-            if (files.length) {
-                this.addFiles(files);
+            const detail = event.detail;
+            // Prefer entries: they carry the folder each file came from. `files` is
+            // the flat fallback for a host dispatching this event by hand.
+            const entries = detail?.entries ?? (detail?.files ?? []).map(file => ({ file, path: "" }));
+            if (entries.length) {
+                this.controller?.addEntries(entries);
             }
         });
         this.queueEl.addEventListener("click", event => {
@@ -483,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
@@ -534,8 +746,17 @@ 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;
+        // Greys out the files the queue would reject anyway, so the picker stops
+        // offering a choice that ends in a rejection. The queue's own check still
+        // decides — `accept` is advisory, and does nothing for a drop.
+        // A leading dot is optional in `extensions`, as it is for the queue check.
+        this.dropZoneEl.accept = this.extensions
+            .map(extension => `.${extension.replace(/^\./, "")}`)
+            .join(",");
         const items = this.controller?.getState().items ?? [];
         // Structural changes rebuild the rows; progress ticks patch the bars in
         // place so in-row focus (Cancel while uploading) survives.
@@ -546,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();