@brandsync/wc 1.6.0 → 1.8.0

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.cmp.test.js

@@ -0,0 +1,115 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+import { assertShadowParts, runAxeCheck } from "../../test/helpers/conventions";
+const btn = (el) => el?.shadowRoot?.querySelector('button');
+describe('bs-file-upload-item', () => {
+    it('has no axe-core violations in every state', async () => {
+        for (const state of ['loading', 'in-progress', 'error', 'success']) {
+            const { root } = await render(h("bs-file-upload-item", { state: state, fileName: "report.pdf", fileSize: "8MB", progress: 40 }));
+            await runAxeCheck(root);
+        }
+    });
+    it('exposes its documented shadow parts', async () => {
+        const { root } = await render(h("bs-file-upload-item", { state: "success", fileName: "a.pdf", fileSize: "1MB" }));
+        assertShadowParts(root.shadowRoot, ['item', 'thumbnail', 'name', 'size', 'status', 'action']);
+        const { root: r2 } = await render(h("bs-file-upload-item", { state: "in-progress", fileName: "a.pdf" }));
+        assertShadowParts(r2.shadowRoot, ['progress']);
+    });
+    it('shows the file name and size', async () => {
+        const { root } = await render(h("bs-file-upload-item", { fileName: "Image Name", fileSize: "8MB" }));
+        expect(root.shadowRoot.querySelector('[part="name"]').textContent).toBe('Image Name');
+        expect(root.shadowRoot.querySelector('[part="size"]').textContent).toBe('8MB');
+    });
+    it('omits the size line when there is no fileSize', async () => {
+        const { root } = await render(h("bs-file-upload-item", { fileName: "x" }));
+        expect(root.shadowRoot.querySelector('[part="size"]')).toBeNull();
+    });
+    describe('loading', () => {
+        it('renders an indeterminate progress bar labelled "Loading..."', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "loading", fileName: "a" }));
+            const bar = root.shadowRoot.querySelector('bs-progress-linear');
+            expect(bar.type).toBe('indeterminate');
+            expect(bar.size).toBe('small');
+            expect(bar.textContent).toBe('Loading...');
+        });
+    });
+    describe('in-progress', () => {
+        it('renders a determinate bar with the percentage label', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "in-progress", fileName: "a", progress: 40 }));
+            const bar = root.shadowRoot.querySelector('bs-progress-linear');
+            expect(bar.type).toBe('determinate');
+            expect(bar.value).toBe(40);
+            expect(bar.textContent).toBe('40% uploaded');
+        });
+        it('clamps and rounds progress', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "in-progress", fileName: "a", progress: 140.4 }));
+            expect(root.shadowRoot.querySelector('bs-progress-linear').textContent).toBe('100% uploaded');
+        });
+        it('names the progress bar after the file', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "in-progress", fileName: "report.pdf", progress: 10 }));
+            const bar = root.shadowRoot.querySelector('bs-progress-linear');
+            expect(bar.shadowRoot.querySelector('[role="progressbar"]')).toEqualAttribute('aria-label', 'report.pdf');
+        });
+    });
+    describe('error and success', () => {
+        it('error: red status with the default or a custom message, announced via role="status"', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "error", fileName: "a" }));
+            const status = root.shadowRoot.querySelector('[part="status"]');
+            expect(status).toEqualAttribute('role', 'status');
+            expect(status.textContent).toContain('Upload failed');
+            expect(status).toHaveClass('bs-file-upload-item__status--error');
+            const { root: r2 } = await render(h("bs-file-upload-item", { state: "error", fileName: "a", message: "File too large" }));
+            expect(r2.shadowRoot.querySelector('[part="status"]').textContent).toContain('File too large');
+        });
+        it('success: green status with the default message', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "success", fileName: "a" }));
+            const status = root.shadowRoot.querySelector('[part="status"]');
+            expect(status.textContent).toContain('File uploaded successfully');
+            expect(status).toHaveClass('bs-file-upload-item__status--success');
+        });
+        it('the final states render no progress bar', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "success", fileName: "a" }));
+            expect(root.shadowRoot.querySelector('bs-progress-linear')).toBeNull();
+        });
+    });
+    describe('action button', () => {
+        it('loading / in-progress / error: a cancel button that emits bsCancel', async () => {
+            for (const state of ['loading', 'in-progress', 'error']) {
+                const { root, spyOnEvent } = await render(h("bs-file-upload-item", { state: state, fileName: "a" }));
+                const cancel = spyOnEvent('bsCancel');
+                const remove = spyOnEvent('bsRemove');
+                const action = root.shadowRoot.querySelector('[part="action"]');
+                expect(btn(action).getAttribute('aria-label')).toBe('Cancel upload');
+                btn(action).click();
+                expect(cancel).toHaveReceivedEventTimes(1);
+                expect(remove).not.toHaveReceivedEvent();
+            }
+        });
+        it('success: a remove button that emits bsRemove', async () => {
+            const { root, spyOnEvent } = await render(h("bs-file-upload-item", { state: "success", fileName: "a" }));
+            const cancel = spyOnEvent('bsCancel');
+            const remove = spyOnEvent('bsRemove');
+            const action = root.shadowRoot.querySelector('[part="action"]');
+            expect(btn(action).getAttribute('aria-label')).toBe('Remove file');
+            btn(action).click();
+            expect(remove).toHaveReceivedEventTimes(1);
+            expect(cancel).not.toHaveReceivedEvent();
+        });
+        it('cancelLabel / removeLabel override the accessible names', async () => {
+            const { root } = await render(h("bs-file-upload-item", { state: "loading", fileName: "a", cancelLabel: "Annuller" }));
+            expect(btn(root.shadowRoot.querySelector('[part="action"]')).getAttribute('aria-label')).toBe('Annuller');
+            const { root: r2 } = await render(h("bs-file-upload-item", { state: "success", fileName: "a", removeLabel: "Fjern" }));
+            expect(btn(r2.shadowRoot.querySelector('[part="action"]')).getAttribute('aria-label')).toBe('Fjern');
+        });
+    });
+    describe('thumbnail', () => {
+        it('shows the placeholder icon without thumbnailSrc, and the image with it', async () => {
+            const { root } = await render(h("bs-file-upload-item", { fileName: "a" }));
+            expect(root.shadowRoot.querySelector('.bs-file-upload-item__placeholder')).not.toBeNull();
+            expect(root.shadowRoot.querySelector('img')).toBeNull();
+            const { root: r2 } = await render(h("bs-file-upload-item", { fileName: "a", thumbnailSrc: "data:image/gif;base64,R0lGODlhAQABAAAAACw=", thumbnailAlt: "Preview" }));
+            const img = r2.shadowRoot.querySelector('img');
+            expect(img).toEqualAttribute('alt', 'Preview');
+            expect(r2.shadowRoot.querySelector('.bs-file-upload-item__placeholder')).toBeNull();
+        });
+    });
+});

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.css

@@ -0,0 +1,154 @@
+/**
+ * @prop --bs-file-upload-item-bg: Card background. Aliased to --bs-surface-base.
+ * @prop --bs-file-upload-item-border-color: Card border color. Aliased to --bs-border-default.
+ * @prop --bs-file-upload-item-border-width: Card border width. Aliased to --bs-border-width-thin.
+ * @prop --bs-file-upload-item-radius: Card corner radius. Aliased to --bs-border-radius-150.
+ * @prop --bs-file-upload-item-padding: Card padding on all sides. Aliased to --bs-spacing-200.
+ * @prop --bs-file-upload-item-gap: Gap between the thumbnail, the content and the action. Aliased to --bs-spacing-150.
+ * @prop --bs-file-upload-item-thumbnail-size: Thumbnail width/height. 80px, per the Figma spec.
+ * @prop --bs-file-upload-item-thumbnail-radius: Thumbnail corner radius. Aliased to --bs-border-radius-100.
+ * @prop --bs-file-upload-item-thumbnail-bg: Placeholder background (when there is no image). Aliased to --bs-surface-container.
+ * @prop --bs-file-upload-item-thumbnail-icon-color: Placeholder icon color. Aliased to --bs-icon-muted.
+ * @prop --bs-file-upload-item-content-gap: Gap between the name/size block and the status line. Aliased to --bs-spacing-100.
+ * @prop --bs-file-upload-item-name-color: File name color. Aliased to --bs-text-default.
+ * @prop --bs-file-upload-item-size-color: File size color. Aliased to --bs-text-default.
+ * @prop --bs-file-upload-item-success-color: Success text color. Aliased to --bs-text-success.
+ * @prop --bs-file-upload-item-success-icon-color: Success icon color. Aliased to --bs-icon-success.
+ * @prop --bs-file-upload-item-error-color: Error text color. Aliased to --bs-text-error.
+ * @prop --bs-file-upload-item-error-icon-color: Error icon color. Aliased to --bs-icon-error.
+ */
+:host {
+  display: block;
+
+  --bs-file-upload-item-bg: var(--bs-surface-base);
+  --bs-file-upload-item-border-color: var(--bs-border-default);
+  --bs-file-upload-item-border-width: var(--bs-border-width-thin);
+  --bs-file-upload-item-radius: var(--bs-border-radius-150);
+  --bs-file-upload-item-padding: var(--bs-spacing-200);
+  --bs-file-upload-item-gap: var(--bs-spacing-150);
+
+  --bs-file-upload-item-thumbnail-size: 80px;
+  --bs-file-upload-item-thumbnail-radius: var(--bs-border-radius-100);
+  --bs-file-upload-item-thumbnail-bg: var(--bs-surface-container);
+  --bs-file-upload-item-thumbnail-icon-color: var(--bs-icon-muted);
+
+  --bs-file-upload-item-content-gap: var(--bs-spacing-100);
+  --bs-file-upload-item-name-color: var(--bs-text-default);
+  --bs-file-upload-item-size-color: var(--bs-text-default);
+
+  --bs-file-upload-item-success-color: var(--bs-text-success);
+  --bs-file-upload-item-success-icon-color: var(--bs-icon-success);
+  --bs-file-upload-item-error-color: var(--bs-text-error);
+  --bs-file-upload-item-error-icon-color: var(--bs-icon-error);
+}
+
+.bs-file-upload-item {
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--bs-file-upload-item-gap);
+  padding: var(--bs-file-upload-item-padding);
+  border: var(--bs-file-upload-item-border-width) solid var(--bs-file-upload-item-border-color);
+  border-radius: var(--bs-file-upload-item-radius);
+  background: var(--bs-file-upload-item-bg);
+  font-size: var(--bs-font-size-md);
+  line-height: calc(var(--bs-line-height-body-md) * 1px);
+}
+
+.bs-file-upload-item__thumbnail {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--bs-file-upload-item-thumbnail-size);
+  height: var(--bs-file-upload-item-thumbnail-size);
+  overflow: hidden;
+  border-radius: var(--bs-file-upload-item-thumbnail-radius);
+  background: var(--bs-file-upload-item-thumbnail-bg);
+  color: var(--bs-file-upload-item-thumbnail-icon-color);
+}
+
+.bs-file-upload-item__placeholder {
+  display: block;
+  width: 32px;
+  height: 32px;
+}
+
+.bs-file-upload-item__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bs-file-upload-item__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--bs-file-upload-item-content-gap);
+  align-self: stretch;
+  min-width: 0;
+}
+
+.bs-file-upload-item__meta {
+  display: flex;
+  flex-direction: column;
+}
+
+.bs-file-upload-item__name {
+  color: var(--bs-file-upload-item-name-color);
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.bs-file-upload-item__size {
+  color: var(--bs-file-upload-item-size-color);
+  font-size: var(--bs-font-size-sm);
+  line-height: calc(var(--bs-line-height-body-sm) * 1px);
+}
+
+.bs-file-upload-item__status {
+  display: flex;
+  align-items: center;
+  gap: var(--bs-spacing-50);
+  min-height: 24px;
+}
+
+.bs-file-upload-item__status-icon {
+  display: block;
+  flex: none;
+  width: 16px;
+  height: 16px;
+}
+
+.bs-file-upload-item__status--success {
+  color: var(--bs-file-upload-item-success-color);
+}
+.bs-file-upload-item__status--success .bs-file-upload-item__status-icon {
+  color: var(--bs-file-upload-item-success-icon-color);
+}
+
+.bs-file-upload-item__status--error {
+  color: var(--bs-file-upload-item-error-color);
+}
+.bs-file-upload-item__status--error .bs-file-upload-item__status-icon {
+  color: var(--bs-file-upload-item-error-icon-color);
+}
+
+bs-progress-linear {
+  width: 100%;
+}
+
+/* Figma uses the default icon color for the cancel/remove glyph, one step darker than the subtle
+   variant's --bs-icon-neutral-default (same re-pointing as bs-carousel's arrows). */
+bs-icon-button {
+  flex: none;
+  --bs-icon-neutral-default: var(--bs-icon-default);
+}
+
+@media (forced-colors: active) {
+  .bs-file-upload-item {
+    border-color: CanvasText;
+  }
+}

package/dist/collection/components/bs-file-upload-item/bs-file-upload-item.js

@@ -0,0 +1,329 @@
+import { h } from "@stencil/core";
+/**
+ * One file in an upload list: a thumbnail, the file name and size, a status line (a progress bar
+ * while uploading, or a success / error message) and an action button (cancel while uploading or
+ * after an error, remove once uploaded).
+ *
+ * Presentational only -- the consuming app owns the upload and drives `state`, `progress` and
+ * `message` from it. Pair with `bs-file-upload` (the dropzone that picks the files).
+ *
+ * ## When to use
+ * - Showing the status of each file the user has added, in a list under a `bs-file-upload`.
+ *
+ * ## When not to use
+ * - Attaching files to a chat message -- use `bs-attachment`.
+ *
+ * @slot thumbnail - Replaces the thumbnail content (the image-placeholder icon, or `thumbnailSrc`).
+ * @part item - The card.
+ * @part thumbnail - The thumbnail box.
+ * @part name - The file name.
+ * @part size - The file size text.
+ * @part progress - The progress bar (`loading` / `in-progress`).
+ * @part status - The success / error message line.
+ * @part action - The cancel / remove button.
+ */
+// Note: this component's CSS Custom Properties (--bs-file-upload-item-*) are documented via @prop
+// comments in bs-file-upload-item.css, not here (see bs-input.tsx's equivalent note).
+export class BsFileUploadItem {
+    /** Where the upload is. `loading` = working with no known percentage (indeterminate bar);
+     * `in-progress` = uploading with a known `progress`; `error` and `success` are final. */
+    state = 'loading';
+    /** The file name. */
+    fileName = '';
+    /** The file size, already formatted (e.g. "8MB"). */
+    fileSize;
+    /** Upload progress, 0-100. Only used when `state="in-progress"`. */
+    progress = 0;
+    /** The status text. Defaults per state: "Loading..." (`loading`), "{progress}% uploaded"
+     * (`in-progress`), "Upload failed" (`error`), "File uploaded successfully" (`success`). Provide
+     * your own for localisation or a specific error. */
+    message;
+    /** A preview image of the file. Shown instead of the placeholder icon when set. */
+    thumbnailSrc;
+    /** Alt text for `thumbnailSrc`. Leave empty when the file name already says it all. */
+    thumbnailAlt = '';
+    /** Accessible name of the cancel button (`loading`, `in-progress`, `error`). */
+    cancelLabel = 'Cancel upload';
+    /** Accessible name of the remove button (`success`). */
+    removeLabel = 'Remove file';
+    /** Fires when the cancel button is clicked (`loading`, `in-progress`, `error`). The consumer
+     * stops the upload and removes the item. */
+    bsCancel;
+    /** Fires when the remove button is clicked (`success`). The consumer removes the file. */
+    bsRemove;
+    get clampedProgress() {
+        return Math.min(100, Math.max(0, Math.round(Number.isFinite(this.progress) ? this.progress : 0)));
+    }
+    get statusText() {
+        if (this.message)
+            return this.message;
+        switch (this.state) {
+            case 'in-progress':
+                return `${this.clampedProgress}% uploaded`;
+            case 'error':
+                return 'Upload failed';
+            case 'success':
+                return 'File uploaded successfully';
+            case 'loading':
+            default:
+                return 'Loading...';
+        }
+    }
+    onAction = () => {
+        if (this.state === 'success')
+            this.bsRemove.emit();
+        else
+            this.bsCancel.emit();
+    };
+    renderStatus() {
+        const uploading = this.state === 'loading' || this.state === 'in-progress';
+        if (uploading) {
+            return (h("bs-progress-linear", { part: "progress", size: "small", type: this.state === 'loading' ? 'indeterminate' : 'determinate', value: this.clampedProgress, ariaLabel: this.fileName || 'Upload progress' }, this.statusText));
+        }
+        // Final states are announced once (role="status"); the progress bar above is deliberately not
+        // a live region, so frequent percentage updates don't flood a screen reader.
+        return (h("div", { part: "status", class: `bs-file-upload-item__status bs-file-upload-item__status--${this.state}`, role: "status" }, this.state === 'success' ? h(CheckCircleIcon, null) : h(XCircleIcon, null), h("span", { class: "bs-file-upload-item__status-text" }, this.statusText)));
+    }
+    render() {
+        const removing = this.state === 'success';
+        return (h("div", { key: 'd26aebbbdb7858444d2ff3084c421ce1e70acd9e', part: "item", class: `bs-file-upload-item bs-file-upload-item--${this.state}` }, h("div", { key: '2bf21442cc31bc9f85178e97bdae140de59fd7ce', part: "thumbnail", class: "bs-file-upload-item__thumbnail" }, h("slot", { key: 'fb9a9d723855e6d2556e61fb5cc7414e296ddf89', name: "thumbnail" }, this.thumbnailSrc ? (h("img", { class: "bs-file-upload-item__image", src: this.thumbnailSrc, alt: this.thumbnailAlt })) : (h(ImageIcon, null)))), h("div", { key: 'ca1cab03c21d93b4fe754e8e4575bbee5c6c11bd', class: "bs-file-upload-item__content" }, h("div", { key: '072532a7cfb4a699ab9920594ed4299bd094eea3', class: "bs-file-upload-item__meta" }, h("span", { key: 'f30ec89b3af9d5a4fc3ea2cf9252713f47a68ba2', part: "name", class: "bs-file-upload-item__name" }, this.fileName), this.fileSize && (h("span", { key: '63aeb6db94d78011a649fa1a0771d488890c330b', part: "size", class: "bs-file-upload-item__size" }, this.fileSize))), this.renderStatus()), h("bs-icon-button", { key: '5434d917777db308f8b16f84e2ccd5efcfb46dc8', part: "action", variant: "subtle", size: "lg", ariaLabel: removing ? this.removeLabel : this.cancelLabel, onClick: this.onAction }, removing ? h(TrashIcon, null) : h(CloseIcon, null))));
+    }
+    static get is() { return "bs-file-upload-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bs-file-upload-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bs-file-upload-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BsFileUploadItemState",
+                    "resolved": "\"error\" | \"in-progress\" | \"loading\" | \"success\"",
+                    "references": {
+                        "BsFileUploadItemState": {
+                            "location": "local",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-file-upload-item/bs-file-upload-item.tsx",
+                            "id": "src/components/bs-file-upload-item/bs-file-upload-item.tsx::BsFileUploadItemState"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Where the upload is. `loading` = working with no known percentage (indeterminate bar);\n`in-progress` = uploading with a known `progress`; `error` and `success` are final."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "state",
+                "defaultValue": "'loading'"
+            },
+            "fileName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The file name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-name",
+                "defaultValue": "''"
+            },
+            "fileSize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The file size, already formatted (e.g. \"8MB\")."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "file-size"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Upload progress, 0-100. Only used when `state=\"in-progress\"`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "progress",
+                "defaultValue": "0"
+            },
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The status text. Defaults per state: \"Loading...\" (`loading`), \"{progress}% uploaded\"\n(`in-progress`), \"Upload failed\" (`error`), \"File uploaded successfully\" (`success`). Provide\nyour own for localisation or a specific error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message"
+            },
+            "thumbnailSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A preview image of the file. Shown instead of the placeholder icon when set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thumbnail-src"
+            },
+            "thumbnailAlt": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for `thumbnailSrc`. Leave empty when the file name already says it all."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "thumbnail-alt",
+                "defaultValue": "''"
+            },
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the cancel button (`loading`, `in-progress`, `error`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-label",
+                "defaultValue": "'Cancel upload'"
+            },
+            "removeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible name of the remove button (`success`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remove-label",
+                "defaultValue": "'Remove file'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bsCancel",
+                "name": "bsCancel",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the cancel button is clicked (`loading`, `in-progress`, `error`). The consumer\nstops the upload and removes the item."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bsRemove",
+                "name": "bsRemove",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fires when the remove button is clicked (`success`). The consumer removes the file."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+// Figma exports, recolored via currentColor so the CSS tokens drive the color.
+const ImageIcon = () => (h("svg", { class: "bs-file-upload-item__placeholder", viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M5 6H27C27.5523 6 28 6.44772 28 7V25C28 25.5523 27.5523 26 27 26H5C4.44772 26 4 25.5523 4 25V7C4 6.44772 4.44772 6 5 6Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M19.5 14C20.3284 14 21 13.3284 21 12.5C21 11.6716 20.3284 11 19.5 11C18.6716 11 18 11.6716 18 12.5C18 13.3284 18.6716 14 19.5 14Z", fill: "currentColor" }), h("path", { d: "M18.4137 20.5L21.625 17.2925C21.8125 17.1051 22.0668 16.9998 22.3319 16.9998C22.597 16.9998 22.8512 17.1051 23.0387 17.2925L28 22.2575", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M4 21.0863L10.7925 14.2925C10.8854 14.1995 10.9957 14.1258 11.1171 14.0754C11.2385 14.0251 11.3686 13.9992 11.5 13.9992C11.6314 13.9992 11.7615 14.0251 11.8829 14.0754C12.0043 14.1258 12.1146 14.1995 12.2075 14.2925L23.9137 26", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const CheckCircleIcon = () => (h("svg", { class: "bs-file-upload-item__status-icon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M11.0306 5.96938C11.1005 6.03905 11.156 6.12185 11.1939 6.21301C11.2317 6.30417 11.2512 6.40191 11.2512 6.50063C11.2512 6.59934 11.2317 6.69708 11.1939 6.78824C11.156 6.8794 11.1005 6.9622 11.0306 7.03188L7.53062 10.5319C7.46095 10.6018 7.37815 10.6573 7.28699 10.6951C7.19582 10.733 7.09809 10.7525 6.99937 10.7525C6.90066 10.7525 6.80292 10.733 6.71176 10.6951C6.6206 10.6573 6.5378 10.6018 6.46812 10.5319L4.96812 9.03187C4.89836 8.96211 4.84302 8.87929 4.80526 8.78814C4.76751 8.69698 4.74807 8.59929 4.74807 8.50062C4.74807 8.40196 4.76751 8.30427 4.80526 8.21311C4.84302 8.12196 4.89836 8.03914 4.96812 7.96938C5.03789 7.89961 5.12071 7.84427 5.21186 7.80651C5.30302 7.76876 5.40071 7.74932 5.49937 7.74932C5.59804 7.74932 5.69573 7.76876 5.78689 7.80651C5.87804 7.84427 5.96086 7.89961 6.03062 7.96938L7 8.9375L9.96937 5.9675C10.0392 5.89789 10.122 5.84272 10.2131 5.80513C10.3042 5.76755 10.4018 5.7483 10.5004 5.74847C10.599 5.74865 10.6965 5.76825 10.7875 5.80615C10.8785 5.84405 10.9611 5.89952 11.0306 5.96938ZM14.75 8C14.75 9.33502 14.3541 10.6401 13.6124 11.7501C12.8707 12.8601 11.8165 13.7253 10.5831 14.2362C9.34971 14.7471 7.99251 14.8808 6.68314 14.6203C5.37377 14.3598 4.17103 13.717 3.22703 12.773C2.28302 11.829 1.64015 10.6262 1.3797 9.31686C1.11925 8.00749 1.25292 6.65029 1.76381 5.41689C2.2747 4.18349 3.13987 3.12928 4.2499 2.38758C5.35993 1.64588 6.66498 1.25 8 1.25C9.7896 1.25199 11.5053 1.96378 12.7708 3.22922C14.0362 4.49466 14.748 6.2104 14.75 8ZM13.25 8C13.25 6.96165 12.9421 5.94661 12.3652 5.08326C11.7883 4.2199 10.9684 3.54699 10.0091 3.14963C9.04978 2.75227 7.99418 2.6483 6.97578 2.85088C5.95738 3.05345 5.02191 3.55346 4.28769 4.28769C3.55346 5.02191 3.05345 5.95738 2.85088 6.97578C2.6483 7.99418 2.75227 9.04978 3.14963 10.0091C3.54699 10.9684 4.2199 11.7883 5.08326 12.3652C5.94661 12.9421 6.96165 13.25 8 13.25C9.39193 13.2485 10.7264 12.6949 11.7107 11.7107C12.6949 10.7264 13.2485 9.39193 13.25 8Z", fill: "currentColor" })));
+const XCircleIcon = () => (h("svg", { class: "bs-file-upload-item__status-icon", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M10.5306 6.53062L9.0625 8L10.5325 9.46937C10.6734 9.61027 10.7526 9.80137 10.7526 10.0006C10.7526 10.1999 10.6734 10.391 10.5325 10.5319C10.3916 10.6728 10.2005 10.7519 10.0013 10.7519C9.80199 10.7519 9.6109 10.6728 9.47 10.5319L8 9.0625L6.53062 10.5325C6.38973 10.6734 6.19863 10.7526 5.99937 10.7526C5.80012 10.7526 5.60902 10.6734 5.46812 10.5325C5.32723 10.3916 5.24807 10.2005 5.24807 10.0013C5.24807 9.80199 5.32723 9.6109 5.46812 9.47L6.9375 8L5.46937 6.53062C5.39961 6.46086 5.34427 6.37804 5.30651 6.28689C5.26876 6.19573 5.24932 6.09804 5.24932 5.99937C5.24932 5.80012 5.32848 5.60902 5.46937 5.46812C5.61027 5.32723 5.80137 5.24807 6.00062 5.24807C6.19988 5.24807 6.39098 5.32723 6.53187 5.46812L8 6.9375L9.46937 5.4675C9.61027 5.3266 9.80137 5.24745 10.0006 5.24745C10.1999 5.24745 10.391 5.3266 10.5319 5.4675C10.6728 5.6084 10.7519 5.79949 10.7519 5.99875C10.7519 6.19801 10.6728 6.3891 10.5319 6.53L10.5306 6.53062ZM14.75 8C14.75 9.33502 14.3541 10.6401 13.6124 11.7501C12.8707 12.8601 11.8165 13.7253 10.5831 14.2362C9.34971 14.7471 7.99251 14.8808 6.68314 14.6203C5.37377 14.3598 4.17103 13.717 3.22703 12.773C2.28302 11.829 1.64015 10.6262 1.3797 9.31686C1.11925 8.00749 1.25292 6.65029 1.76381 5.41689C2.2747 4.18349 3.13987 3.12928 4.2499 2.38758C5.35993 1.64588 6.66498 1.25 8 1.25C9.7896 1.25199 11.5053 1.96378 12.7708 3.22922C14.0362 4.49466 14.748 6.2104 14.75 8ZM13.25 8C13.25 6.96165 12.9421 5.94661 12.3652 5.08326C11.7883 4.2199 10.9684 3.54699 10.0091 3.14963C9.04978 2.75227 7.99418 2.6483 6.97578 2.85088C5.95738 3.05345 5.02191 3.55346 4.28769 4.28769C3.55346 5.02191 3.05345 5.95738 2.85088 6.97578C2.6483 7.99418 2.75227 9.04978 3.14963 10.0091C3.54699 10.9684 4.2199 11.7883 5.08326 12.3652C5.94661 12.9421 6.96165 13.25 8 13.25C9.39193 13.2485 10.7264 12.6949 11.7107 11.7107C12.6949 10.7264 13.2485 9.39193 13.25 8Z", fill: "currentColor" })));
+const CloseIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M18.75 5.25L5.25 18.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M18.75 18.75L5.25 5.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));
+const TrashIcon = () => (h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, h("path", { d: "M20.25 5.25H3.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M9.75 9.75V15.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M14.25 9.75V15.75", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M18.75 5.25V19.5C18.75 19.6989 18.671 19.8897 18.5303 20.0303C18.3897 20.171 18.1989 20.25 18 20.25H6C5.80109 20.25 5.61032 20.171 5.46967 20.0303C5.32902 19.8897 5.25 19.6989 5.25 19.5V5.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), h("path", { d: "M15.75 5.25V3.75C15.75 3.35218 15.592 2.97064 15.3107 2.68934C15.0294 2.40804 14.6478 2.25 14.25 2.25H9.75C9.35218 2.25 8.97064 2.40804 8.68934 2.68934C8.40804 2.97064 8.25 3.35218 8.25 3.75V5.25", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })));