@brandsync/wc 1.5.4 → 1.7.0

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" })));

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

@@ -0,0 +1,54 @@
+import { html } from "lit";
+import { componentDescription, propDescription } from "../../stories-utils";
+const states = ['loading', 'in-progress', 'error', 'success'];
+// A real photo (Unsplash, free-to-use license) -- URL checked to resolve (200, image/jpeg), same as
+// the other stories that need an image.
+const THUMB = 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?fm=jpg&q=80&w=160&h=160&fit=crop&auto=format';
+// The consumer owns what happens on cancel/remove -- the component never removes itself. Hiding the
+// item here lets the story show the action working.
+const hideOnAction = (ev) => {
+    ev.currentTarget.style.display = 'none';
+};
+const meta = {
+    title: 'Components/bs-file-upload-item',
+    parameters: { docs: { description: { component: componentDescription('bs-file-upload-item') } } },
+    render: args => html `
+    <bs-file-upload-item
+      style="max-width: 536px;"
+      state=${args.state}
+      file-name=${args.fileName}
+      file-size=${args.fileSize}
+      progress=${args.progress}
+      message=${args.message}
+      thumbnail-src=${args.thumbnailSrc}
+      @bsCancel=${hideOnAction}
+      @bsRemove=${hideOnAction}
+    ></bs-file-upload-item>
+  `,
+    argTypes: {
+        state: { control: { type: 'select' }, options: states, description: propDescription('bs-file-upload-item', 'state') },
+        fileName: { control: 'text', description: propDescription('bs-file-upload-item', 'fileName') },
+        fileSize: { control: 'text', description: propDescription('bs-file-upload-item', 'fileSize') },
+        progress: { control: { type: 'range', min: 0, max: 100 }, description: propDescription('bs-file-upload-item', 'progress') },
+        message: { control: 'text', description: propDescription('bs-file-upload-item', 'message') },
+        thumbnailSrc: { control: 'text', description: propDescription('bs-file-upload-item', 'thumbnailSrc') },
+    },
+    args: { state: 'loading', fileName: 'Image Name', fileSize: '8MB', progress: 40, message: '', thumbnailSrc: '' },
+};
+export default meta;
+export const Loading = {};
+export const InProgress = { name: 'In progress', args: { state: 'in-progress' } };
+export const ErrorState = { name: 'Error', args: { state: 'error', fileName: 'File Name', message: 'Error message' } };
+export const Success = { args: { state: 'success', fileName: 'File Name', thumbnailSrc: THUMB } };
+// The four Figma states in the order the design shows them.
+export const AllStates = {
+    name: 'All states',
+    render: () => html `
+    <div style="display: flex; flex-direction: column; gap: 16px; max-width: 536px;">
+      <bs-file-upload-item state="loading" file-name="Image Name" file-size="8MB"></bs-file-upload-item>
+      <bs-file-upload-item state="in-progress" progress="40" file-name="Image Name" file-size="8MB"></bs-file-upload-item>
+      <bs-file-upload-item state="error" message="Error message" file-name="File Name" file-size="8MB"></bs-file-upload-item>
+      <bs-file-upload-item state="success" thumbnail-src=${THUMB} file-name="File Name" file-size="8MB"></bs-file-upload-item>
+    </div>
+  `,
+};

package/dist/collection/components/bs-input/bs-input.js

@@ -341,10 +341,10 @@ export class BsInput {
         return (h("div", { part: "field", class: `bs-input__field bs-input__field--pin ${errorClass} ${disabledClass}` }, Array.from({ length: this.length }).map((_, i) => (h("input", { id: i === 0 ? 'control' : undefined, ref: el => (this.pinInputs[i] = el), part: "control", class: "bs-input__pin-cell", type: "text", inputMode: "numeric", maxLength: 1, value: this.value[i] ?? '', disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, onInput: this.onPinInput(i), onKeyDown: this.onPinKeydown(i) })))));
     }
     render() {
-        return (h("div", { key: '68d08fa3dce086122838a91898c60de837b7228e', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
+        return (h("div", { key: 'd65ab3191cd18c77385ffbb8b827e6161dafceaf', class: `bs-input ${this.error ? 'bs-input--error' : ''}` }, this.label && (
         // "control" is a fixed id, not a generated one -- safe because Shadow DOM scopes ids
         // to this instance's own shadow root, so it can never collide with another bs-input.
-        h("label", { key: '8b21f1f9873841feb455343960c0152576269314', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '622be18a55520512f9b5b4001e7435e7f544512e', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
+        h("label", { key: '762c10bb8afcd1f0609ba75b0d6d8162c483b5b5', part: "label", class: "bs-input__label", htmlFor: "control" }, this.label, this.required && (h("span", { key: '9a74743816c07b81b4db39616cee80ef69d60ca1', part: "required", class: "bs-input__required", "aria-hidden": "true" }, "*")))), this.type === 'pin' ? this.renderPinField() : this.type === 'initials' ? this.renderInitialsField() : this.renderField(), this.error ? (h("span", { id: "description-or-error", part: "error", class: "bs-input__error" }, h("svg", { part: "error-icon", class: "bs-input__error-icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, h("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", "stroke-width": "1.2" }), h("path", { d: "M8 5V8.5", stroke: "currentColor", "stroke-width": "1.2", "stroke-linecap": "round" }), h("circle", { cx: "8", cy: "11", r: "0.75", fill: "currentColor" })), this.error)) : this.description ? (h("span", { id: "description-or-error", part: "description", class: "bs-input__description" }, this.description)) : null));
     }
     static get is() { return "bs-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-logo/bs-logo.js

@@ -105,7 +105,7 @@ export class BsLogo {
                     "references": {
                         "BsLogoVariant": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-logo/bs-logo.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-logo/bs-logo.tsx",
                             "id": "src/components/bs-logo/bs-logo.tsx::BsLogoVariant"
                         }
                     }
@@ -131,7 +131,7 @@ export class BsLogo {
                     "references": {
                         "BsLogoBackground": {
                             "location": "local",
-                            "path": "/home/runner/work/Brandsync-webcomponents/Brandsync-webcomponents/packages/wc/src/components/bs-logo/bs-logo.tsx",
+                            "path": "/home/runner/work/eg-brandsync-storybook/eg-brandsync-storybook/packages/wc/src/components/bs-logo/bs-logo.tsx",
                             "id": "src/components/bs-logo/bs-logo.tsx::BsLogoBackground"
                         }
                     }

package/dist/collection/components/bs-menu/bs-menu.js

@@ -22,7 +22,7 @@ import { h } from "@stencil/core";
  */
 export class BsMenu {
     render() {
-        return (h("div", { key: '6dab08819f32793e41598ffe621761d319d45c1a', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '6f391e9b01ea7e2d60fa8f9703a16af3d57a9b74' })));
+        return (h("div", { key: '6d24ccbadf6c68bba52b6737e91c4d131fbce331', part: "list", class: "bs-menu", role: "menu" }, h("slot", { key: '94cc6884049a7836b3438a2fc112f0a2c7a1473a' })));
     }
     static get is() { return "bs-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-menu-item/bs-menu-item.js

@@ -47,7 +47,7 @@ export class BsMenuItem {
         this.bsSelect.emit();
     };
     render() {
-        return (h("button", { key: '237e49e6c177aa2dc7427d55a00867ba48922c63', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: '0e66b5e5fdcdc16348d0c6ba0b3ca4ee972ea6fa', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '15f7cc57d8783b3c2b23720b640b40b1748a7e4b', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '8d2c92e06c0fd88f02cbbc1d77604af1c30ae26c', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '8b6c088f606f99538411f6366b349462924fc4d9' }))));
+        return (h("button", { key: '02e1255e64ab0bd0b283927f1321fb5e660c78b6', type: "button", part: "item", role: "menuitem", class: `bs-menu-item ${this.disabled ? 'bs-menu-item--disabled' : ''}`, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : undefined, onClick: this.onClick }, h("span", { key: 'fb36594dd48bd601a26d9debda9fb1c9bde37f88', part: "icon", class: `bs-menu-item__icon ${this.hasIcon ? 'bs-menu-item__icon--has-content' : ''}` }, h("slot", { key: '19049f5f1f79e6136cd9cc8bcb3669ff97d79c18', name: "icon", onSlotchange: this.onIconSlotchange })), h("span", { key: '6ac351a3d3a07bea5bbb5f69bd58c1a7189283fe', part: "label", class: "bs-menu-item__label" }, h("slot", { key: '04215578eb545d824c090cb72f1e493474dca409' }))));
     }
     static get is() { return "bs-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-pagination/bs-pagination.js

@@ -87,7 +87,7 @@ export class BsPagination {
     }
     render() {
         const pageList = this.getPageList();
-        return (h("nav", { key: '679f591fdfc485a7cd963238177c2586030f2354', "aria-label": "Pagination" }, h("ul", { key: '7d6f19579c56a49e749a523587b08d3c408c22f0', part: "list", class: "bs-pagination__list" }, h("li", { key: '1499d8990fc69d22b4367d1105a81dbac88fa3bb', part: "item", class: "bs-pagination__item" }, h("button", { key: '5b3b180e4334558780cf871f92e772c477bff843', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'c50e237ec8b8208387334cd9bfb0deea5e348088' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '845a96e60020024653b93d0e0a5640d9f538fefa', part: "item", class: "bs-pagination__item" }, h("button", { key: '8173081e2dfd190d8b4665a21cdf46e698bd4f4b', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '4ca0e3c1ac5b3529fad3296ce478111e881aeceb' }))))));
+        return (h("nav", { key: 'f5f1e20a72ffc81ca14b05ad735e3ca714069ed3', "aria-label": "Pagination" }, h("ul", { key: '416ef86fe6aca589869e529d1248cbca7ad254ac', part: "list", class: "bs-pagination__list" }, h("li", { key: 'c550eada1eb765db7734e0971f4a2222ad1488e8', part: "item", class: "bs-pagination__item" }, h("button", { key: '8a88280dc813abe71ba3315048ca8931ef2b20cf', part: "prev", type: "button", class: "bs-pagination__control", "aria-label": this.previousLabel, disabled: this.currentPage <= 1, onClick: () => this.goToPage(this.currentPage - 1) }, h(ChevronLeftIcon, { key: 'ea30181c70ff4c7c39852cb978b4cc9307bfa736' }))), pageList.map((item, index) => item === 'ellipsis' ? (h("li", { part: "item", class: "bs-pagination__item", key: `ellipsis-${index}` }, h("span", { part: "ellipsis", class: "bs-pagination__ellipsis", "aria-hidden": "true" }, h(EllipsisIcon, null)))) : (h("li", { part: "item", class: "bs-pagination__item", key: item }, h("button", { part: item === this.currentPage ? 'page current' : 'page', type: "button", class: `bs-pagination__control bs-pagination__page ${item === this.currentPage ? 'bs-pagination__page--current' : ''}`, "aria-label": `Go to page ${item}`, "aria-current": item === this.currentPage ? 'page' : undefined, onClick: () => this.goToPage(item) }, item)))), h("li", { key: '1c587333c1795e4b189c793b442c03e75937ab11', part: "item", class: "bs-pagination__item" }, h("button", { key: '707144112eb882431b9d6ad43f7557be32d08e78', part: "next", type: "button", class: "bs-pagination__control", "aria-label": this.nextLabel, disabled: this.currentPage >= this.safeTotalPages, onClick: () => this.goToPage(this.currentPage + 1) }, h(ChevronRightIcon, { key: '5c94c76cbda7938da625f326ea2ef7ddadce3929' }))))));
     }
     static get is() { return "bs-pagination"; }
     static get encapsulation() { return "shadow"; }