@getflip/swirl-components 0.487.0 → 0.489.0

package/dist/cjs/swirl-file-chip.cjs.entry.js

@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
 var FileSaver_min = require('./FileSaver.min-B46-_whJ.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlFileChipCss = () => `:host{display:inline-block;max-width:100%;overflow:hidden;background-color:var(--s-background-default);border-radius:var(--s-border-radius-sm);outline:1px solid var(--s-border-strong);outline-offset:-1px}.file-chip{display:flex;position:relative;align-items:center;max-width:100%;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);background-color:transparent;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);gap:var(--s-space-12)}@media (hover: hover){.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action{background-color:var(--s-state-hovered);cursor:pointer}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description{opacity:0;pointer-events:none}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions{opacity:1;pointer-events:auto}}.file-chip__icon{display:flex;flex-shrink:0;padding:var(--s-space-4);background-color:var(--s-decorative-blueberry-surface-subdued);border-radius:50%;color:var(--s-decorative-blueberry-text)}.file-chip__info{display:flex;align-items:center;gap:var(--s-space-12);flex-grow:1;min-width:0}.file-chip__name{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold)}.file-chip__suffix{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--s-space-12);flex-grow:1;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@media (hover: hover){.file-chip__suffix{display:inline-grid;justify-items:end;gap:0}}.file-chip__suffix swirl-button{display:inline-flex}@media (hover: hover){.file-chip__description,.file-chip__actions{grid-area:1 / 1}}.file-chip__description{color:var(--s-text-subdued);font-size:var(--s-font-size-xs)}.file-chip__name,.file-chip__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-chip__actions{display:flex;align-items:center;gap:var(--s-space-8)}@media (hover: hover){.file-chip__actions{opacity:0;pointer-events:none}}.file-chip--no-suffix .file-chip__suffix{display:none}.file-chip--has-description .file-chip__info{align-items:baseline}.file-chip--type-image .file-chip__icon{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.file-chip--type-video .file-chip__icon{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.file-chip--type-audio .file-chip__icon{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.file-chip--type-pdf .file-chip__icon{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.file-chip--type-compressed .file-chip__icon{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.file-chip--type-document .file-chip__icon{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.file-chip--type-unknown .file-chip__icon{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.file-chip--loading .file-chip__icon{padding:var(--s-space-2)}.file-chip--loading .file-chip__icon{background-color:transparent}`;
+const swirlFileChipCss = () => `:host{display:inline-block;max-width:100%;overflow:hidden;background-color:var(--s-background-default);border-radius:var(--s-border-radius-sm);outline:1px solid var(--s-border-strong);outline-offset:-1px}.file-chip{display:flex;position:relative;align-items:center;max-width:100%;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);background-color:transparent;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);gap:var(--s-space-12)}@media (hover: hover){.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action{background-color:var(--s-state-hovered);cursor:pointer}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description{opacity:0;pointer-events:none}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions{opacity:1;pointer-events:auto}}.file-chip__icon{display:flex;flex-shrink:0;padding:var(--s-space-4);background-color:var(--s-decorative-blueberry-surface-subdued);border-radius:50%;color:var(--s-decorative-blueberry-text)}.file-chip__info{display:flex;align-items:center;gap:var(--s-space-12);flex-grow:1;min-width:0}.file-chip__name{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold)}.file-chip__suffix{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--s-space-12);flex-grow:1;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@media (hover: hover){.file-chip__suffix{display:inline-grid;justify-items:end;gap:0}}.file-chip__suffix swirl-button{display:inline-flex}@media (hover: hover){.file-chip__description,.file-chip__actions{grid-area:1 / 1}}.file-chip__description{color:var(--s-text-subdued);font-size:var(--s-font-size-xs)}.file-chip__name,.file-chip__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-chip__actions{display:flex;align-items:center;gap:var(--s-space-8)}@media (hover: hover){.file-chip__actions{opacity:0;pointer-events:none}}.file-chip--no-suffix .file-chip__suffix{display:none}.file-chip--has-description .file-chip__info{align-items:baseline}.file-chip--type-image .file-chip__icon{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.file-chip--type-video .file-chip__icon{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.file-chip--type-audio .file-chip__icon{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.file-chip--type-pdf .file-chip__icon{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.file-chip--type-compressed .file-chip__icon{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.file-chip--type-document .file-chip__icon{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.file-chip--type-unknown .file-chip__icon{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.file-chip--loading .file-chip__icon{padding:var(--s-space-2)}.file-chip--loading .file-chip__icon{background-color:transparent}.file-chip--has-error .file-chip__icon{background-color:var(--s-surface-critical-subdued)}.file-chip--has-error .file-chip__description{color:var(--s-text-critical)}`;
 
 const SwirlFileChip = class {
     constructor(hostRef) {
@@ -15,6 +15,7 @@ const SwirlFileChip = class {
         this.preview = index.createEvent(this, "preview", 7);
         this.deleteButtonLabel = "Delete";
         this.downloadButtonLabel = "Download";
+        this.errorLabel = "Error";
         this.loadingLabel = "Loading …";
         this.previewButtonLabel = "Preview";
         this.fileType = "unknown";
@@ -68,6 +69,9 @@ const SwirlFileChip = class {
         this.setFileType();
     }
     getFileIcon() {
+        if (this.hasError) {
+            return index.h("swirl-icon-error", { color: "critical", size: 20 });
+        }
         if (this.loading) {
             return index.h("swirl-spinner", { size: "s", label: this.loadingLabel });
         }
@@ -104,16 +108,21 @@ const SwirlFileChip = class {
             !this.showPreviewButton &&
             !this.showDownloadButton &&
             !this.showDeleteButton;
-        const hasDescription = this.description || this.loading;
+        const hasDescription = this.description || this.loading || this.hasError;
         const className = index$1.classnames("file-chip", `file-chip--type-${this.fileType}`, {
             "file-chip--loading": this.loading,
+            "file-chip--has-error": this.hasError,
             "file-chip--has-description": hasDescription,
             "file-chip--has-download-action": this.showDownloadButton,
             "file-chip--has-preview-action": this.showPreviewButton,
             "file-chip--no-actions": !hasAction,
             "file-chip--no-suffix": noSuffix,
         });
-        return (index.h(index.Host, { key: '6a3351ad90e6ebbab0e46b1b10e3f3d69fb9a775' }, index.h("span", { key: '774678fbb4e000fc6ced058198473b01fd4cea72', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, index.h("span", { key: '5ae123dd154322c28eeecce1f1d021c7fe38a327', class: "file-chip__icon" }, this.getFileIcon()), index.h("span", { key: 'df3471cbfa87de7662702a8ac9134e28461be4f9', class: "file-chip__info" }, index.h("span", { key: '23ca5a33bf127923fa625c91a82bc946466c4b6f', class: "file-chip__name", title: this.name }, this.name), index.h("span", { key: '05815291c345976fb6e598a4e5a15334b6b07b10', class: "file-chip__suffix" }, (this.description || this.loading) && (index.h("span", { key: 'b3271eabf403d1b956c97f90b17d778351ee0783', class: "file-chip__description" }, this.loading ? this.loadingLabel : this.description)), hasAction && !this.loading && (index.h("span", { key: '91e6d3b86c67a35336c369e88c3a5c795c7a2f41', class: "file-chip__actions" }, this.showPreviewButton && (index.h("swirl-button", { key: 'ef8f3d5ed69b6a108f133d2d634599682c5c2a21', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (index.h("swirl-button", { key: 'efd22a35ef0e7988bc178494a26f2573e87fd350', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (index.h("swirl-button", { key: '1637ae6ccf7d657d45fe2635ee16c874d163310b', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
+        return (index.h(index.Host, { key: '7ffd07e38c155e7f70258088b5c3f593fb957d04' }, index.h("span", { key: 'f4ca6b7e58890d0dc1a9006c8c28eda86e64dbfd', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, index.h("span", { key: 'dda7f1612e92a45f54aac0ae5fb19a49113e84fa', class: "file-chip__icon" }, this.getFileIcon()), index.h("span", { key: '7f016dbb7414ab330afa6053b640aa1843ceb2cc', class: "file-chip__info" }, index.h("span", { key: '3aecd4189d19e31474fba1214658007cd45a5d99', class: "file-chip__name", title: this.name }, this.name), index.h("span", { key: 'bd1aeff1a43fda9bb5f17d99141fff90c843ae03', class: "file-chip__suffix" }, (this.description || this.loading || this.hasError) && (index.h("span", { key: 'e1ed1644a3bf7149bb556ac045195a557b6da144', class: "file-chip__description", role: this.hasError ? "status" : undefined }, this.hasError
+            ? this.errorLabel
+            : this.loading
+                ? this.loadingLabel
+                : this.description)), hasAction && !this.loading && (index.h("span", { key: 'fb4e7efb492cb7e0a405d8cfcb6e806240619f59', class: "file-chip__actions" }, this.showPreviewButton && (index.h("swirl-button", { key: '8f81e70e5e589228620bc46142a296dbc7be9ae8', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (index.h("swirl-button", { key: 'b64f629efd950aca0a1fe8c7201f6e6f0a16c1e7', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (index.h("swirl-button", { key: '4971f424dce6897b830129c01d193bf93939acc6', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
     }
     static get watchers() { return {
         "type": [{

package/dist/cjs/swirl-progress-indicator.cjs.entry.js

@@ -3,8 +3,13 @@
 var index = require('./index-DlHdtZvn.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlProgressIndicatorCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}`;
+const swirlProgressIndicatorCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-xs,.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-xs{width:1.25rem;height:1.25rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}`;
 
+const circleSizeConfig = {
+    xs: { radius: 8, strokeWidth: 2 },
+    s: { radius: 10, strokeWidth: 2 },
+    m: { radius: 20, strokeWidth: 4 },
+};
 const SwirlProgressIndicator = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -14,11 +19,10 @@ const SwirlProgressIndicator = class {
     }
     render() {
         const className = index$1.classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
-        const strokeWidth = this.size === "m" ? 4 : 2;
-        const radius = this.size === "m" ? 20 : 10;
+        const { radius, strokeWidth } = circleSizeConfig[this.size];
         const circumference = Math.round(radius * 2 * Math.PI);
         const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
-        return (index.h(index.Host, { key: '554a77d6a3d9c769f7ae35d17ff07d04595edc67', class: this.variant }, this.variant === "bar" && (index.h("progress", { key: 'b881a20eb065e7ed9853d1d192c1d3826c251dbf', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (index.h("span", { key: 'bf687e4aaf398642b0539a2315865c9c180a74df', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, index.h("svg", { key: 'b149cd39096a93aac3a168b01e44a92cce4ddc77', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, index.h("circle", { key: '90a45e5b3321c0af48dc6bcf368570193f32f278', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), index.h("circle", { key: '916b93e693312a1e9c1057e38f1e4251f89277c1', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+        return (index.h(index.Host, { key: 'b3966ffacbbf84e0e39f1d2831bb0210e2a2c69b', class: this.variant }, this.variant === "bar" && (index.h("progress", { key: 'c6270e22a26078deae4d69b77d8cf05bf4ad80bd', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (index.h("span", { key: '551279b3aa31161691811cfc0ca7730abee281fe', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, index.h("svg", { key: 'de6416fe984c8c95fe8eaf51d743f1ddbfb5378f', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, index.h("circle", { key: '296bf634184734621255dba0569d4d15c81e9049', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), index.h("circle", { key: '177c36b6061a1b92c75930771fe285aecaa11acb', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
     }
 };
 SwirlProgressIndicator.style = swirlProgressIndicatorCss();

package/dist/collection/components/swirl-file-chip/swirl-file-chip.css

@@ -173,3 +173,11 @@
 .file-chip--loading .file-chip__icon {
     background-color: transparent;
   }
+
+.file-chip--has-error .file-chip__icon {
+    background-color: var(--s-surface-critical-subdued);
+  }
+
+.file-chip--has-error .file-chip__description {
+    color: var(--s-text-critical);
+  }

package/dist/collection/components/swirl-file-chip/swirl-file-chip.js

@@ -6,6 +6,7 @@ export class SwirlFileChip {
     constructor() {
         this.deleteButtonLabel = "Delete";
         this.downloadButtonLabel = "Download";
+        this.errorLabel = "Error";
         this.loadingLabel = "Loading …";
         this.previewButtonLabel = "Preview";
         this.fileType = "unknown";
@@ -59,6 +60,9 @@ export class SwirlFileChip {
         this.setFileType();
     }
     getFileIcon() {
+        if (this.hasError) {
+            return h("swirl-icon-error", { color: "critical", size: 20 });
+        }
         if (this.loading) {
             return h("swirl-spinner", { size: "s", label: this.loadingLabel });
         }
@@ -95,16 +99,21 @@ export class SwirlFileChip {
             !this.showPreviewButton &&
             !this.showDownloadButton &&
             !this.showDeleteButton;
-        const hasDescription = this.description || this.loading;
+        const hasDescription = this.description || this.loading || this.hasError;
         const className = classnames("file-chip", `file-chip--type-${this.fileType}`, {
             "file-chip--loading": this.loading,
+            "file-chip--has-error": this.hasError,
             "file-chip--has-description": hasDescription,
             "file-chip--has-download-action": this.showDownloadButton,
             "file-chip--has-preview-action": this.showPreviewButton,
             "file-chip--no-actions": !hasAction,
             "file-chip--no-suffix": noSuffix,
         });
-        return (h(Host, { key: '6a3351ad90e6ebbab0e46b1b10e3f3d69fb9a775' }, h("span", { key: '774678fbb4e000fc6ced058198473b01fd4cea72', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, h("span", { key: '5ae123dd154322c28eeecce1f1d021c7fe38a327', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: 'df3471cbfa87de7662702a8ac9134e28461be4f9', class: "file-chip__info" }, h("span", { key: '23ca5a33bf127923fa625c91a82bc946466c4b6f', class: "file-chip__name", title: this.name }, this.name), h("span", { key: '05815291c345976fb6e598a4e5a15334b6b07b10', class: "file-chip__suffix" }, (this.description || this.loading) && (h("span", { key: 'b3271eabf403d1b956c97f90b17d778351ee0783', class: "file-chip__description" }, this.loading ? this.loadingLabel : this.description)), hasAction && !this.loading && (h("span", { key: '91e6d3b86c67a35336c369e88c3a5c795c7a2f41', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: 'ef8f3d5ed69b6a108f133d2d634599682c5c2a21', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (h("swirl-button", { key: 'efd22a35ef0e7988bc178494a26f2573e87fd350', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (h("swirl-button", { key: '1637ae6ccf7d657d45fe2635ee16c874d163310b', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
+        return (h(Host, { key: '7ffd07e38c155e7f70258088b5c3f593fb957d04' }, h("span", { key: 'f4ca6b7e58890d0dc1a9006c8c28eda86e64dbfd', "aria-label": this.name, class: className, onClick: this.handleClick, role: "group" }, h("span", { key: 'dda7f1612e92a45f54aac0ae5fb19a49113e84fa', class: "file-chip__icon" }, this.getFileIcon()), h("span", { key: '7f016dbb7414ab330afa6053b640aa1843ceb2cc', class: "file-chip__info" }, h("span", { key: '3aecd4189d19e31474fba1214658007cd45a5d99', class: "file-chip__name", title: this.name }, this.name), h("span", { key: 'bd1aeff1a43fda9bb5f17d99141fff90c843ae03', class: "file-chip__suffix" }, (this.description || this.loading || this.hasError) && (h("span", { key: 'e1ed1644a3bf7149bb556ac045195a557b6da144', class: "file-chip__description", role: this.hasError ? "status" : undefined }, this.hasError
+            ? this.errorLabel
+            : this.loading
+                ? this.loadingLabel
+                : this.description)), hasAction && !this.loading && (h("span", { key: 'fb4e7efb492cb7e0a405d8cfcb6e806240619f59', class: "file-chip__actions" }, this.showPreviewButton && (h("swirl-button", { key: '8f81e70e5e589228620bc46142a296dbc7be9ae8', hideLabel: true, icon: "<swirl-icon-preview></swirl-icon-preview>", label: this.previewButtonLabel, onClick: this.handlePreviewClick, part: "file-chip__preview", variant: "plain" })), this.showDownloadButton && (h("swirl-button", { key: 'b64f629efd950aca0a1fe8c7201f6e6f0a16c1e7', hideLabel: true, icon: "<swirl-icon-download></swirl-icon-download>", label: this.downloadButtonLabel, onClick: this.handleDownloadClick, part: "file-chip__download", variant: "plain" })), this.showDeleteButton && (h("swirl-button", { key: '4971f424dce6897b830129c01d193bf93939acc6', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.deleteButtonLabel, onClick: this.handleDeleteClick, part: "file-chip__delete", variant: "plain" })))))))));
     }
     static get is() { return "swirl-file-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -179,6 +188,45 @@ export class SwirlFileChip {
                 "attribute": "download-button-label",
                 "defaultValue": "\"Download\""
             },
+            "hasError": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-error"
+            },
+            "errorLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-label",
+                "defaultValue": "\"Error\""
+            },
             "loading": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/swirl-progress-indicator/swirl-progress-indicator.css

@@ -50,19 +50,20 @@
   }
     }
 
-.progress-indicator--variant-bar.progress-indicator--size-s {
+.progress-indicator--variant-bar.progress-indicator--size-xs,
+  .progress-indicator--variant-bar.progress-indicator--size-s {
     height: 0.125rem;
   }
 
-.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar {
+.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar, .progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar {
       border-radius: 0.0625rem;
     }
 
-.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value {
+.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value, .progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value {
       border-radius: 0.0625rem;
     }
 
-.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar {
+.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar, .progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar {
       height: 0.125rem;
       border-radius: 0.0625rem;
     }
@@ -75,6 +76,11 @@
   height: 3rem;
 }
 
+.progress-indicator--variant-circle.progress-indicator--size-xs {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
 .progress-indicator--variant-circle.progress-indicator--size-s {
     width: 1.5rem;
     height: 1.5rem;

package/dist/collection/components/swirl-progress-indicator/swirl-progress-indicator.js

@@ -1,5 +1,10 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
+const circleSizeConfig = {
+    xs: { radius: 8, strokeWidth: 2 },
+    s: { radius: 10, strokeWidth: 2 },
+    m: { radius: 20, strokeWidth: 4 },
+};
 export class SwirlProgressIndicator {
     constructor() {
         this.size = "m";
@@ -8,11 +13,10 @@ export class SwirlProgressIndicator {
     }
     render() {
         const className = classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
-        const strokeWidth = this.size === "m" ? 4 : 2;
-        const radius = this.size === "m" ? 20 : 10;
+        const { radius, strokeWidth } = circleSizeConfig[this.size];
         const circumference = Math.round(radius * 2 * Math.PI);
         const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
-        return (h(Host, { key: '554a77d6a3d9c769f7ae35d17ff07d04595edc67', class: this.variant }, this.variant === "bar" && (h("progress", { key: 'b881a20eb065e7ed9853d1d192c1d3826c251dbf', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: 'bf687e4aaf398642b0539a2315865c9c180a74df', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'b149cd39096a93aac3a168b01e44a92cce4ddc77', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '90a45e5b3321c0af48dc6bcf368570193f32f278', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '916b93e693312a1e9c1057e38f1e4251f89277c1', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+        return (h(Host, { key: 'b3966ffacbbf84e0e39f1d2831bb0210e2a2c69b', class: this.variant }, this.variant === "bar" && (h("progress", { key: 'c6270e22a26078deae4d69b77d8cf05bf4ad80bd', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: '551279b3aa31161691811cfc0ca7730abee281fe', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'de6416fe984c8c95fe8eaf51d743f1ddbfb5378f', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '296bf634184734621255dba0569d4d15c81e9049', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '177c36b6061a1b92c75930771fe285aecaa11acb', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
     }
     static get is() { return "swirl-progress-indicator"; }
     static get encapsulation() { return "shadow"; }
@@ -52,7 +56,7 @@ export class SwirlProgressIndicator {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlProgressIndicatorSize",
-                    "resolved": "\"m\" | \"s\"",
+                    "resolved": "\"m\" | \"s\" | \"xs\"",
                     "references": {
                         "SwirlProgressIndicatorSize": {
                             "location": "local",

package/dist/components/swirl-file-chip.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as e,createEvent as s,h as o,Host as t,transformTag as a}from"@stencil/core/internal/client";import{c}from"./index2.js";import{F as l}from"./FileSaver.min.js";import{a as n,b as r,c as h,e as d,f as p,h as f}from"./utils.js";import{d as u}from"./swirl-button2.js";import{d as w}from"./swirl-icon-attachment2.js";import{d as b}from"./swirl-icon-audio-file2.js";import{d as v}from"./swirl-icon-file2.js";import{d as m}from"./swirl-icon-folder2.js";import{d as _}from"./swirl-icon-image2.js";import{d as g}from"./swirl-icon-picture-as-pdf2.js";import{d as y}from"./swirl-icon-video-player2.js";import{d as k}from"./swirl-spinner2.js";import{d as x}from"./swirl-visually-hidden2.js";const j=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.delete=s(this,"delete",7),this.download=s(this,"download",7),this.preview=s(this,"preview",7),this.deleteButtonLabel="Delete",this.downloadButtonLabel="Download",this.loadingLabel="Loading …",this.previewButtonLabel="Preview",this.fileType="unknown",this.isHovered=!1,this.fileIconMap={image:o("swirl-icon-image",{size:20}),video:o("swirl-icon-video-player",{size:20}),audio:o("swirl-icon-audio-file",{size:20}),pdf:o("swirl-icon-picture-as-pdf",{size:20}),compressed:o("swirl-icon-folder",{size:20}),document:o("swirl-icon-file",{size:20}),unknown:o("swirl-icon-attachment",{size:20})},this.handleClick=()=>{this.loading||(this.showPreviewButton?this.handlePreviewClick():this.showDownloadButton&&this.handleDownloadClick())},this.handleDownloadClick=i=>{if(i?.stopPropagation(),this.download.emit(),this.skipNativeDownload)return;const e=this.name||this.url.split("/").pop();fetch(this.url).then((i=>i.blob())).then((i=>{l.saveAs(i,e)}))},this.handlePreviewClick=i=>{i?.stopPropagation(),this.preview.emit()},this.handleDeleteClick=i=>{i?.stopPropagation(),this.delete.emit()}}componentWillLoad(){this.setFileType()}watchType(){this.setFileType()}getFileIcon(){return this.loading?o("swirl-spinner",{size:"s",label:this.loadingLabel}):this.fileIconMap[this.fileType]}setFileType(){this.fileType=n(this.type)?"image":r(this.type)?"video":h(this.type)?"audio":d(this.type)?"pdf":p(this.type)?"compressed":f(this.type)?"document":"unknown"}render(){const i=this.showPreviewButton||this.showDownloadButton||this.showDeleteButton,e=c("file-chip","file-chip--type-"+this.fileType,{"file-chip--loading":this.loading,"file-chip--has-description":this.description||this.loading,"file-chip--has-download-action":this.showDownloadButton,"file-chip--has-preview-action":this.showPreviewButton,"file-chip--no-actions":!i,"file-chip--no-suffix":!(this.description||this.showPreviewButton||this.showDownloadButton||this.showDeleteButton)});return o(t,{key:"6a3351ad90e6ebbab0e46b1b10e3f3d69fb9a775"},o("span",{key:"774678fbb4e000fc6ced058198473b01fd4cea72","aria-label":this.name,class:e,onClick:this.handleClick,role:"group"},o("span",{key:"5ae123dd154322c28eeecce1f1d021c7fe38a327",class:"file-chip__icon"},this.getFileIcon()),o("span",{key:"df3471cbfa87de7662702a8ac9134e28461be4f9",class:"file-chip__info"},o("span",{key:"23ca5a33bf127923fa625c91a82bc946466c4b6f",class:"file-chip__name",title:this.name},this.name),o("span",{key:"05815291c345976fb6e598a4e5a15334b6b07b10",class:"file-chip__suffix"},(this.description||this.loading)&&o("span",{key:"b3271eabf403d1b956c97f90b17d778351ee0783",class:"file-chip__description"},this.loading?this.loadingLabel:this.description),i&&!this.loading&&o("span",{key:"91e6d3b86c67a35336c369e88c3a5c795c7a2f41",class:"file-chip__actions"},this.showPreviewButton&&o("swirl-button",{key:"ef8f3d5ed69b6a108f133d2d634599682c5c2a21",hideLabel:!0,icon:"<swirl-icon-preview></swirl-icon-preview>",label:this.previewButtonLabel,onClick:this.handlePreviewClick,part:"file-chip__preview",variant:"plain"}),this.showDownloadButton&&o("swirl-button",{key:"efd22a35ef0e7988bc178494a26f2573e87fd350",hideLabel:!0,icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.handleDownloadClick,part:"file-chip__download",variant:"plain"}),this.showDeleteButton&&o("swirl-button",{key:"1637ae6ccf7d657d45fe2635ee16c874d163310b",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.deleteButtonLabel,onClick:this.handleDeleteClick,part:"file-chip__delete",variant:"plain"}))))))}static get watchers(){return{type:[{watchType:0}]}}static get style(){return":host{display:inline-block;max-width:100%;overflow:hidden;background-color:var(--s-background-default);border-radius:var(--s-border-radius-sm);outline:1px solid var(--s-border-strong);outline-offset:-1px}.file-chip{display:flex;position:relative;align-items:center;max-width:100%;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);background-color:transparent;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);gap:var(--s-space-12)}@media (hover: hover){.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action{background-color:var(--s-state-hovered);cursor:pointer}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description{opacity:0;pointer-events:none}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions{opacity:1;pointer-events:auto}}.file-chip__icon{display:flex;flex-shrink:0;padding:var(--s-space-4);background-color:var(--s-decorative-blueberry-surface-subdued);border-radius:50%;color:var(--s-decorative-blueberry-text)}.file-chip__info{display:flex;align-items:center;gap:var(--s-space-12);flex-grow:1;min-width:0}.file-chip__name{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold)}.file-chip__suffix{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--s-space-12);flex-grow:1;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@media (hover: hover){.file-chip__suffix{display:inline-grid;justify-items:end;gap:0}}.file-chip__suffix swirl-button{display:inline-flex}@media (hover: hover){.file-chip__description,.file-chip__actions{grid-area:1 / 1}}.file-chip__description{color:var(--s-text-subdued);font-size:var(--s-font-size-xs)}.file-chip__name,.file-chip__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-chip__actions{display:flex;align-items:center;gap:var(--s-space-8)}@media (hover: hover){.file-chip__actions{opacity:0;pointer-events:none}}.file-chip--no-suffix .file-chip__suffix{display:none}.file-chip--has-description .file-chip__info{align-items:baseline}.file-chip--type-image .file-chip__icon{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.file-chip--type-video .file-chip__icon{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.file-chip--type-audio .file-chip__icon{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.file-chip--type-pdf .file-chip__icon{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.file-chip--type-compressed .file-chip__icon{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.file-chip--type-document .file-chip__icon{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.file-chip--type-unknown .file-chip__icon{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.file-chip--loading .file-chip__icon{padding:var(--s-space-2)}.file-chip--loading .file-chip__icon{background-color:transparent}"}},[1,"swirl-file-chip",{deleteButtonLabel:[1,"delete-button-label"],description:[1],downloadButtonLabel:[1,"download-button-label"],loading:[4],loadingLabel:[1,"loading-label"],name:[1],previewButtonLabel:[1,"preview-button-label"],showDeleteButton:[4,"show-delete-button"],showDownloadButton:[4,"show-download-button"],showPreviewButton:[4,"show-preview-button"],skipNativeDownload:[4,"skip-native-download"],type:[1],url:[1],fileType:[32],isHovered:[32]},void 0,{type:[{watchType:0}]}]),z=j,E=function(){"undefined"!=typeof customElements&&["swirl-file-chip","swirl-button","swirl-icon-attachment","swirl-icon-audio-file","swirl-icon-file","swirl-icon-folder","swirl-icon-image","swirl-icon-picture-as-pdf","swirl-icon-video-player","swirl-spinner","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-file-chip":customElements.get(a(i))||customElements.define(a(i),j);break;case"swirl-button":customElements.get(a(i))||u();break;case"swirl-icon-attachment":customElements.get(a(i))||w();break;case"swirl-icon-audio-file":customElements.get(a(i))||b();break;case"swirl-icon-file":customElements.get(a(i))||v();break;case"swirl-icon-folder":customElements.get(a(i))||m();break;case"swirl-icon-image":customElements.get(a(i))||_();break;case"swirl-icon-picture-as-pdf":customElements.get(a(i))||g();break;case"swirl-icon-video-player":customElements.get(a(i))||y();break;case"swirl-spinner":customElements.get(a(i))||k();break;case"swirl-visually-hidden":customElements.get(a(i))||x()}}))};export{z as SwirlFileChip,E as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as e,createEvent as s,h as o,Host as t,transformTag as a}from"@stencil/core/internal/client";import{c}from"./index2.js";import{F as r}from"./FileSaver.min.js";import{a as l,b as n,c as h,e as d,f as p,h as f}from"./utils.js";import{d as u}from"./swirl-button2.js";import{d as w}from"./swirl-icon-attachment2.js";import{d as b}from"./swirl-icon-audio-file2.js";import{d as m}from"./swirl-icon-error2.js";import{d as v}from"./swirl-icon-file2.js";import{d as _}from"./swirl-icon-folder2.js";import{d as g}from"./swirl-icon-image2.js";import{d as y}from"./swirl-icon-picture-as-pdf2.js";import{d as k}from"./swirl-icon-video-player2.js";import{d as x}from"./swirl-spinner2.js";import{d as j}from"./swirl-visually-hidden2.js";const E=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.delete=s(this,"delete",7),this.download=s(this,"download",7),this.preview=s(this,"preview",7),this.deleteButtonLabel="Delete",this.downloadButtonLabel="Download",this.errorLabel="Error",this.loadingLabel="Loading …",this.previewButtonLabel="Preview",this.fileType="unknown",this.isHovered=!1,this.fileIconMap={image:o("swirl-icon-image",{size:20}),video:o("swirl-icon-video-player",{size:20}),audio:o("swirl-icon-audio-file",{size:20}),pdf:o("swirl-icon-picture-as-pdf",{size:20}),compressed:o("swirl-icon-folder",{size:20}),document:o("swirl-icon-file",{size:20}),unknown:o("swirl-icon-attachment",{size:20})},this.handleClick=()=>{this.loading||(this.showPreviewButton?this.handlePreviewClick():this.showDownloadButton&&this.handleDownloadClick())},this.handleDownloadClick=i=>{if(i?.stopPropagation(),this.download.emit(),this.skipNativeDownload)return;const e=this.name||this.url.split("/").pop();fetch(this.url).then((i=>i.blob())).then((i=>{r.saveAs(i,e)}))},this.handlePreviewClick=i=>{i?.stopPropagation(),this.preview.emit()},this.handleDeleteClick=i=>{i?.stopPropagation(),this.delete.emit()}}componentWillLoad(){this.setFileType()}watchType(){this.setFileType()}getFileIcon(){return this.hasError?o("swirl-icon-error",{color:"critical",size:20}):this.loading?o("swirl-spinner",{size:"s",label:this.loadingLabel}):this.fileIconMap[this.fileType]}setFileType(){this.fileType=l(this.type)?"image":n(this.type)?"video":h(this.type)?"audio":d(this.type)?"pdf":p(this.type)?"compressed":f(this.type)?"document":"unknown"}render(){const i=this.showPreviewButton||this.showDownloadButton||this.showDeleteButton,e=c("file-chip","file-chip--type-"+this.fileType,{"file-chip--loading":this.loading,"file-chip--has-error":this.hasError,"file-chip--has-description":this.description||this.loading||this.hasError,"file-chip--has-download-action":this.showDownloadButton,"file-chip--has-preview-action":this.showPreviewButton,"file-chip--no-actions":!i,"file-chip--no-suffix":!(this.description||this.showPreviewButton||this.showDownloadButton||this.showDeleteButton)});return o(t,{key:"7ffd07e38c155e7f70258088b5c3f593fb957d04"},o("span",{key:"f4ca6b7e58890d0dc1a9006c8c28eda86e64dbfd","aria-label":this.name,class:e,onClick:this.handleClick,role:"group"},o("span",{key:"dda7f1612e92a45f54aac0ae5fb19a49113e84fa",class:"file-chip__icon"},this.getFileIcon()),o("span",{key:"7f016dbb7414ab330afa6053b640aa1843ceb2cc",class:"file-chip__info"},o("span",{key:"3aecd4189d19e31474fba1214658007cd45a5d99",class:"file-chip__name",title:this.name},this.name),o("span",{key:"bd1aeff1a43fda9bb5f17d99141fff90c843ae03",class:"file-chip__suffix"},(this.description||this.loading||this.hasError)&&o("span",{key:"e1ed1644a3bf7149bb556ac045195a557b6da144",class:"file-chip__description",role:this.hasError?"status":void 0},this.hasError?this.errorLabel:this.loading?this.loadingLabel:this.description),i&&!this.loading&&o("span",{key:"fb4e7efb492cb7e0a405d8cfcb6e806240619f59",class:"file-chip__actions"},this.showPreviewButton&&o("swirl-button",{key:"8f81e70e5e589228620bc46142a296dbc7be9ae8",hideLabel:!0,icon:"<swirl-icon-preview></swirl-icon-preview>",label:this.previewButtonLabel,onClick:this.handlePreviewClick,part:"file-chip__preview",variant:"plain"}),this.showDownloadButton&&o("swirl-button",{key:"b64f629efd950aca0a1fe8c7201f6e6f0a16c1e7",hideLabel:!0,icon:"<swirl-icon-download></swirl-icon-download>",label:this.downloadButtonLabel,onClick:this.handleDownloadClick,part:"file-chip__download",variant:"plain"}),this.showDeleteButton&&o("swirl-button",{key:"4971f424dce6897b830129c01d193bf93939acc6",hideLabel:!0,icon:"<swirl-icon-close></swirl-icon-close>",label:this.deleteButtonLabel,onClick:this.handleDeleteClick,part:"file-chip__delete",variant:"plain"}))))))}static get watchers(){return{type:[{watchType:0}]}}static get style(){return":host{display:inline-block;max-width:100%;overflow:hidden;background-color:var(--s-background-default);border-radius:var(--s-border-radius-sm);outline:1px solid var(--s-border-strong);outline-offset:-1px}.file-chip{display:flex;position:relative;align-items:center;max-width:100%;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);background-color:transparent;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);gap:var(--s-space-12)}@media (hover: hover){.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-preview-action,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading).file-chip--has-download-action{background-color:var(--s-state-hovered);cursor:pointer}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__description{opacity:0;pointer-events:none}.file-chip:hover:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions,.file-chip:focus-within:not(.file-chip--no-actions):not(.file-chip--loading) .file-chip__actions{opacity:1;pointer-events:auto}}.file-chip__icon{display:flex;flex-shrink:0;padding:var(--s-space-4);background-color:var(--s-decorative-blueberry-surface-subdued);border-radius:50%;color:var(--s-decorative-blueberry-text)}.file-chip__info{display:flex;align-items:center;gap:var(--s-space-12);flex-grow:1;min-width:0}.file-chip__name{color:var(--s-text-default);font-weight:var(--s-font-weight-semibold)}.file-chip__suffix{display:inline-flex;align-items:center;justify-content:flex-end;gap:var(--s-space-12);flex-grow:1;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}@media (hover: hover){.file-chip__suffix{display:inline-grid;justify-items:end;gap:0}}.file-chip__suffix swirl-button{display:inline-flex}@media (hover: hover){.file-chip__description,.file-chip__actions{grid-area:1 / 1}}.file-chip__description{color:var(--s-text-subdued);font-size:var(--s-font-size-xs)}.file-chip__name,.file-chip__description{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-chip__actions{display:flex;align-items:center;gap:var(--s-space-8)}@media (hover: hover){.file-chip__actions{opacity:0;pointer-events:none}}.file-chip--no-suffix .file-chip__suffix{display:none}.file-chip--has-description .file-chip__info{align-items:baseline}.file-chip--type-image .file-chip__icon{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.file-chip--type-video .file-chip__icon{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.file-chip--type-audio .file-chip__icon{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.file-chip--type-pdf .file-chip__icon{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.file-chip--type-compressed .file-chip__icon{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.file-chip--type-document .file-chip__icon{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.file-chip--type-unknown .file-chip__icon{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.file-chip--loading .file-chip__icon{padding:var(--s-space-2)}.file-chip--loading .file-chip__icon{background-color:transparent}.file-chip--has-error .file-chip__icon{background-color:var(--s-surface-critical-subdued)}.file-chip--has-error .file-chip__description{color:var(--s-text-critical)}"}},[1,"swirl-file-chip",{deleteButtonLabel:[1,"delete-button-label"],description:[1],downloadButtonLabel:[1,"download-button-label"],hasError:[4,"has-error"],errorLabel:[1,"error-label"],loading:[4],loadingLabel:[1,"loading-label"],name:[1],previewButtonLabel:[1,"preview-button-label"],showDeleteButton:[4,"show-delete-button"],showDownloadButton:[4,"show-download-button"],showPreviewButton:[4,"show-preview-button"],skipNativeDownload:[4,"skip-native-download"],type:[1],url:[1],fileType:[32],isHovered:[32]},void 0,{type:[{watchType:0}]}]),z=E,L=function(){"undefined"!=typeof customElements&&["swirl-file-chip","swirl-button","swirl-icon-attachment","swirl-icon-audio-file","swirl-icon-error","swirl-icon-file","swirl-icon-folder","swirl-icon-image","swirl-icon-picture-as-pdf","swirl-icon-video-player","swirl-spinner","swirl-visually-hidden"].forEach((i=>{switch(i){case"swirl-file-chip":customElements.get(a(i))||customElements.define(a(i),E);break;case"swirl-button":customElements.get(a(i))||u();break;case"swirl-icon-attachment":customElements.get(a(i))||w();break;case"swirl-icon-audio-file":customElements.get(a(i))||b();break;case"swirl-icon-error":customElements.get(a(i))||m();break;case"swirl-icon-file":customElements.get(a(i))||v();break;case"swirl-icon-folder":customElements.get(a(i))||_();break;case"swirl-icon-image":customElements.get(a(i))||g();break;case"swirl-icon-picture-as-pdf":customElements.get(a(i))||y();break;case"swirl-icon-video-player":customElements.get(a(i))||k();break;case"swirl-spinner":customElements.get(a(i))||x();break;case"swirl-visually-hidden":customElements.get(a(i))||j()}}))};export{z as SwirlFileChip,L as defineCustomElement}

package/dist/components/swirl-progress-indicator2.js

@@ -1 +1 @@
-import{proxyCustomElement as r,HTMLElement as e,h as i,Host as s,transformTag as a}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const t=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.size="m",this.value=0,this.variant="bar"}render(){const r=o("progress-indicator",`progress-indicator--size-${this.size}`,`progress-indicator--variant-${this.variant}`),e="m"===this.size?4:2,a="m"===this.size?20:10,t=Math.round(2*a*Math.PI),n=Math.round(t*((100-this.value)/100));return i(s,{key:"554a77d6a3d9c769f7ae35d17ff07d04595edc67",class:this.variant},"bar"===this.variant&&i("progress",{key:"b881a20eb065e7ed9853d1d192c1d3826c251dbf","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r,max:100,value:this.value}),"circle"===this.variant&&i("span",{key:"bf687e4aaf398642b0539a2315865c9c180a74df",role:"progressbar","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r},i("svg",{key:"b149cd39096a93aac3a168b01e44a92cce4ddc77",class:"progress-indicator__circle",focusable:"false",viewBox:`0 0 ${2*(a+e)} ${2*(a+e)}`},i("circle",{key:"90a45e5b3321c0af48dc6bcf368570193f32f278",class:"progress-indicator__circle-background",cx:a+e,cy:a+e,r:a,fill:"none","stroke-width":e}),i("circle",{key:"916b93e693312a1e9c1057e38f1e4251f89277c1",class:"progress-indicator__circle-value",cx:a+e,cy:a+e,r:a,fill:"none","stroke-width":e,"stroke-dasharray":t,"stroke-dashoffset":n}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}"}},[1,"swirl-progress-indicator",{label:[1],size:[1],value:[2],variant:[1]}]);function n(){"undefined"!=typeof customElements&&["swirl-progress-indicator"].forEach((r=>{"swirl-progress-indicator"===r&&(customElements.get(a(r))||customElements.define(a(r),t))}))}export{t as S,n as d}
+import{proxyCustomElement as r,HTMLElement as i,h as e,Host as s,transformTag as a}from"@stencil/core/internal/client";import{c as o}from"./index2.js";const t={xs:{radius:8,strokeWidth:2},s:{radius:10,strokeWidth:2},m:{radius:20,strokeWidth:4}},n=r(class extends i{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.size="m",this.value=0,this.variant="bar"}render(){const r=o("progress-indicator",`progress-indicator--size-${this.size}`,`progress-indicator--variant-${this.variant}`),{radius:i,strokeWidth:a}=t[this.size],n=Math.round(2*i*Math.PI),c=Math.round(n*((100-this.value)/100));return e(s,{key:"b3966ffacbbf84e0e39f1d2831bb0210e2a2c69b",class:this.variant},"bar"===this.variant&&e("progress",{key:"c6270e22a26078deae4d69b77d8cf05bf4ad80bd","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r,max:100,value:this.value}),"circle"===this.variant&&e("span",{key:"551279b3aa31161691811cfc0ca7730abee281fe",role:"progressbar","aria-label":this.label,"aria-valuemax":100,"aria-valuemin":0,"aria-valuenow":this.value,class:r},e("svg",{key:"de6416fe984c8c95fe8eaf51d743f1ddbfb5378f",class:"progress-indicator__circle",focusable:"false",viewBox:`0 0 ${2*(i+a)} ${2*(i+a)}`},e("circle",{key:"296bf634184734621255dba0569d4d15c81e9049",class:"progress-indicator__circle-background",cx:i+a,cy:i+a,r:i,fill:"none","stroke-width":a}),e("circle",{key:"177c36b6061a1b92c75930771fe285aecaa11acb",class:"progress-indicator__circle-value",cx:i+a,cy:i+a,r:i,fill:"none","stroke-width":a,"stroke-dasharray":n,"stroke-dashoffset":c}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-sunken-pressed)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-xs,.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-webkit-progress-value,.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-xs::-moz-progress-bar,.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-xs{width:1.25rem;height:1.25rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-surface-sunken-pressed);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}"}},[1,"swirl-progress-indicator",{label:[1],size:[1],value:[2],variant:[1]}]);function c(){"undefined"!=typeof customElements&&["swirl-progress-indicator"].forEach((r=>{"swirl-progress-indicator"===r&&(customElements.get(a(r))||customElements.define(a(r),n))}))}export{n as S,c as d}