@getflip/swirl-components 0.80.0 → 0.81.0

package/dist/components/swirl-lightbox.js

@@ -3,14 +3,16 @@ import { A as A11yDialog } from './a11y-dialog.esm.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
 import { c as classnames } from './index2.js';
 import { q as querySelectorAllDeep } from './utils.js';
-import { d as defineCustomElement$d } from './swirl-action-list2.js';
-import { d as defineCustomElement$c } from './swirl-action-list-item2.js';
-import { d as defineCustomElement$b } from './swirl-icon-arrow-left2.js';
-import { d as defineCustomElement$a } from './swirl-icon-arrow-right2.js';
-import { d as defineCustomElement$9 } from './swirl-icon-close2.js';
-import { d as defineCustomElement$8 } from './swirl-icon-more-vertikal2.js';
-import { d as defineCustomElement$7 } from './swirl-popover2.js';
-import { d as defineCustomElement$6 } from './swirl-popover-trigger2.js';
+import { d as defineCustomElement$f } from './swirl-action-list2.js';
+import { d as defineCustomElement$e } from './swirl-action-list-item2.js';
+import { d as defineCustomElement$d } from './swirl-button2.js';
+import { d as defineCustomElement$c } from './swirl-icon-arrow-left2.js';
+import { d as defineCustomElement$b } from './swirl-icon-arrow-right2.js';
+import { d as defineCustomElement$a } from './swirl-icon-close2.js';
+import { d as defineCustomElement$9 } from './swirl-icon-more-vertikal2.js';
+import { d as defineCustomElement$8 } from './swirl-popover2.js';
+import { d as defineCustomElement$7 } from './swirl-popover-trigger2.js';
+import { d as defineCustomElement$6 } from './swirl-progress-indicator2.js';
 import { d as defineCustomElement$5 } from './swirl-separator2.js';
 import { d as defineCustomElement$4 } from './swirl-stack2.js';
 import { d as defineCustomElement$3 } from './swirl-text2.js';
@@ -267,7 +269,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-lightbox", "swirl-action-list", "swirl-action-list-item", "swirl-icon-arrow-left", "swirl-icon-arrow-right", "swirl-icon-close", "swirl-icon-more-vertikal", "swirl-popover", "swirl-popover-trigger", "swirl-separator", "swirl-stack", "swirl-text", "swirl-thumbnail"];
+  const components = ["swirl-lightbox", "swirl-action-list", "swirl-action-list-item", "swirl-button", "swirl-icon-arrow-left", "swirl-icon-arrow-right", "swirl-icon-close", "swirl-icon-more-vertikal", "swirl-popover", "swirl-popover-trigger", "swirl-progress-indicator", "swirl-separator", "swirl-stack", "swirl-text", "swirl-thumbnail"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-lightbox":
       if (!customElements.get(tagName)) {
@@ -276,40 +278,50 @@ function defineCustomElement$1() {
       break;
     case "swirl-action-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$d();
+        defineCustomElement$f();
       }
       break;
     case "swirl-action-list-item":
       if (!customElements.get(tagName)) {
-        defineCustomElement$c();
+        defineCustomElement$e();
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$d();
       }
       break;
     case "swirl-icon-arrow-left":
       if (!customElements.get(tagName)) {
-        defineCustomElement$b();
+        defineCustomElement$c();
       }
       break;
     case "swirl-icon-arrow-right":
       if (!customElements.get(tagName)) {
-        defineCustomElement$a();
+        defineCustomElement$b();
       }
       break;
     case "swirl-icon-close":
       if (!customElements.get(tagName)) {
-        defineCustomElement$9();
+        defineCustomElement$a();
       }
       break;
     case "swirl-icon-more-vertikal":
       if (!customElements.get(tagName)) {
-        defineCustomElement$8();
+        defineCustomElement$9();
       }
       break;
     case "swirl-popover":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "swirl-popover-trigger":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "swirl-progress-indicator":
       if (!customElements.get(tagName)) {
         defineCustomElement$6();
       }

package/dist/components/swirl-modal.js

@@ -1194,6 +1194,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
     this.hideCloseButton = undefined;
     this.hideLabel = undefined;
     this.label = undefined;
+    this.maxHeight = undefined;
     this.maxWidth = undefined;
     this.padded = true;
     this.primaryActionLabel = undefined;
@@ -1294,7 +1295,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
       "modal--scrolled": this.scrolled,
       "modal--scrolled-down": this.scrolledDown,
     });
-    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxWidth: this.maxWidth } }, h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { class: "modal__header" }, h("div", { class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+    return (h(Host, null, h("section", { "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, h("div", { class: "modal__backdrop", onClick: this.onBackdropClick }), h("div", { class: "modal__body", style: { maxHeight: this.maxHeight, maxWidth: this.maxWidth } }, h("header", { class: "modal__custom-header" }, h("slot", { name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (h("header", { class: "modal__header" }, h("div", { class: "modal__header-bar" }, !this.hideCloseButton && (h("swirl-button", { class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
         ? "<swirl-icon-close></swirl-icon-close>"
         : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (h("swirl-heading", { as: "h2", class: "modal__heading", level: 3, text: this.label }))), h("div", { class: "modal__header-tools" }, h("slot", { name: "header-tools" })))), h("div", { class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, h("slot", null)), h("div", { class: "modal__custom-footer" }, h("slot", { name: "custom-footer" })), showControls && (h("footer", { class: "modal__controls" }, h("swirl-button-group", { wrap: true }, this.secondaryActionLabel && (h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
   }
@@ -1308,6 +1309,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
     "hideCloseButton": [4, "hide-close-button"],
     "hideLabel": [4, "hide-label"],
     "label": [1],
+    "maxHeight": [1, "max-height"],
     "maxWidth": [1, "max-width"],
     "padded": [4],
     "primaryActionLabel": [1, "primary-action-label"],

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

@@ -1,47 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.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-raised-default)}.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-border-default);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 SwirlProgressIndicator$1 = /*@__PURE__*/ proxyCustomElement(class SwirlProgressIndicator extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.label = undefined;
-    this.size = "m";
-    this.value = 0;
-    this.variant = "bar";
-  }
-  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 circumference = Math.round(radius * 2 * Math.PI);
-    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
-    return (h(Host, { class: this.variant }, this.variant === "bar" && (h("progress", { "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", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { 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 style() { return swirlProgressIndicatorCss; }
-}, [1, "swirl-progress-indicator", {
-    "label": [1],
-    "size": [1],
-    "value": [2],
-    "variant": [1]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["swirl-progress-indicator"];
-  components.forEach(tagName => { switch (tagName) {
-    case "swirl-progress-indicator":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SwirlProgressIndicator$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { S as SwirlProgressIndicator$1, d as defineCustomElement$1 } from './swirl-progress-indicator2.js';
 
 const SwirlProgressIndicator = SwirlProgressIndicator$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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-raised-default)}.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-border-default);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 SwirlProgressIndicator = /*@__PURE__*/ proxyCustomElement(class SwirlProgressIndicator extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+    this.size = "m";
+    this.value = 0;
+    this.variant = "bar";
+  }
+  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 circumference = Math.round(radius * 2 * Math.PI);
+    const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
+    return (h(Host, { class: this.variant }, this.variant === "bar" && (h("progress", { "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", { role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { 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 style() { return swirlProgressIndicatorCss; }
+}, [1, "swirl-progress-indicator", {
+    "label": [1],
+    "size": [1],
+    "value": [2],
+    "variant": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-progress-indicator"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-progress-indicator":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlProgressIndicator);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlProgressIndicator as S, defineCustomElement as d };

package/dist/components/swirl-thumbnail2.js

@@ -1,7 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './swirl-button2.js';
+import { d as defineCustomElement$1 } from './swirl-progress-indicator2.js';
 
-const swirlThumbnailCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-landscape .thumbnail__image{width:100%}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-portrait .thumbnail__image{height:100%}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--format-square .thumbnail__image{width:100%}.thumbnail__image{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
+const swirlThumbnailCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem}.thumbnail--size-l .thumbnail__remove-button{top:0;right:0;transform:scale(0.75)}.thumbnail--size-xl{--swirl-thumbnail-size:5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-landscape .thumbnail__image{width:100%}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-portrait .thumbnail__image{height:100%}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--format-square .thumbnail__image{width:100%}.thumbnail--has-progress .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail__image{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}.thumbnail__progress-indicator{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__remove-button{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}.thumbnail__timestamp{position:absolute;z-index:1;bottom:var(--s-space-4);left:var(--s-space-4);display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.5rem;padding-right:var(--s-space-8);padding-left:var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-size:var(--s-font-size-sm);line-height:1.5rem;white-space:nowrap;text-overflow:ellipsis}";
 
 const SwirlThumbnail = /*@__PURE__*/ proxyCustomElement(class SwirlThumbnail extends HTMLElement {
   constructor() {
@@ -10,31 +12,55 @@ const SwirlThumbnail = /*@__PURE__*/ proxyCustomElement(class SwirlThumbnail ext
     this.__attachShadow();
     this.alt = undefined;
     this.format = "landscape";
+    this.progress = undefined;
+    this.progressLabel = "Loading progress";
+    this.removeButtonLabel = "Remove";
+    this.showRemoveButton = undefined;
     this.size = "m";
     this.src = undefined;
+    this.timestamp = undefined;
   }
   render() {
-    const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`);
-    return (h(Host, null, h("span", { class: className }, h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }))));
+    const showRemoveButton = this.showRemoveButton && this.size === "xl" && this.format === "square";
+    const showTimestamp = Boolean(this.timestamp) && this.size === "xl" && this.format === "square";
+    const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
+      "thumbnail--has-progress": this.progress !== undefined,
+    });
+    return (h(Host, null, h("span", { class: className, role: "group" }, h("img", { alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src }), this.progress !== undefined && (h("span", { class: "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { label: this.progressLabel, value: this.progress }))), showRemoveButton && (h("span", { class: "thumbnail__remove-button" }, h("swirl-button", { hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, pill: true, variant: "on-image" }))), showTimestamp && (h("span", { class: "thumbnail__timestamp" }, this.timestamp)))));
   }
   static get style() { return swirlThumbnailCss; }
 }, [1, "swirl-thumbnail", {
     "alt": [1],
     "format": [1],
+    "progress": [2],
+    "progressLabel": [1, "progress-label"],
+    "removeButtonLabel": [1, "remove-button-label"],
+    "showRemoveButton": [4, "show-remove-button"],
     "size": [1],
-    "src": [1]
+    "src": [1],
+    "timestamp": [1]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-thumbnail"];
+  const components = ["swirl-thumbnail", "swirl-button", "swirl-progress-indicator"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-thumbnail":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, SwirlThumbnail);
       }
       break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "swirl-progress-indicator":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
   } });
 }
 defineCustomElement();

package/dist/esm/index-99d0060d.js

@@ -2295,6 +2295,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-folder.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-format-h-one':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-format-h-one.entry.js').then(processMod, consoleError);
         case 'swirl-icon-gif':
           return import(
             /* webpackMode: "lazy" */
@@ -2411,6 +2415,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-message.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-mic':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-mic.entry.js').then(processMod, consoleError);
         case 'swirl-icon-more-horizontal':
           return import(
             /* webpackMode: "lazy" */
@@ -2435,10 +2443,22 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-notifications-off.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-open-in-full':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-open-in-full.entry.js').then(processMod, consoleError);
         case 'swirl-icon-open-in-new':
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-open-in-new.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-pause':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-pause.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-pause-circle':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-pause-circle.entry.js').then(processMod, consoleError);
         case 'swirl-icon-people-alt':
           return import(
             /* webpackMode: "lazy" */
@@ -2471,6 +2491,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-reply.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-report':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-report.entry.js').then(processMod, consoleError);
         case 'swirl-icon-roadmap':
           return import(
             /* webpackMode: "lazy" */
@@ -2499,6 +2523,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-spellcheck.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-stop':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-stop.entry.js').then(processMod, consoleError);
         case 'swirl-icon-sync':
           return import(
             /* webpackMode: "lazy" */
@@ -2515,6 +2543,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-time-filled.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-translate':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-translate.entry.js').then(processMod, consoleError);
         case 'swirl-icon-undo':
           return import(
             /* webpackMode: "lazy" */
@@ -2591,10 +2623,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-pdf-reader.entry.js').then(processMod, consoleError);
-        case 'swirl-progress-indicator':
-          return import(
-            /* webpackMode: "lazy" */
-            './swirl-progress-indicator.entry.js').then(processMod, consoleError);
         case 'swirl-radio':
           return import(
             /* webpackMode: "lazy" */
@@ -3019,6 +3047,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-check-small_3.entry.js').then(processMod, consoleError);
+        case 'swirl-progress-indicator':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-progress-indicator.entry.js').then(processMod, consoleError);
         case 'swirl-icon-expand-more':
           return import(
             /* webpackMode: "lazy" */