@getflip/swirl-components 0.12.0 → 0.14.0

package/dist/components/swirl-pagination.js

@@ -12,13 +12,6 @@ const SwirlPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.__registerHost();
     this.__attachShadow();
     this.setPage = createEvent(this, "setPage", 7);
-    this.accessibleNextButtonLabel = "Next page";
-    this.accessiblePrevButtonLabel = "Previous page";
-    this.nextButtonLabel = "Next";
-    this.pageLabel = "out of";
-    this.prevButtonLabel = "Prev";
-    this.pageSelectLabel = "Select a page";
-    this.variant = "default";
     this.onPrevButtonClick = () => {
       const prevPage = Math.max(this.page - 1, 1);
       if (this.page === prevPage) {
@@ -40,6 +33,16 @@ const SwirlPagination$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       }
       this.setPage.emit(page);
     };
+    this.accessibleNextButtonLabel = "Next page";
+    this.accessiblePrevButtonLabel = "Previous page";
+    this.nextButtonLabel = "Next";
+    this.pageLabel = "out of";
+    this.prevButtonLabel = "Prev";
+    this.label = undefined;
+    this.page = undefined;
+    this.pages = undefined;
+    this.pageSelectLabel = "Select a page";
+    this.variant = "default";
   }
   render() {
     const hideButtonLabels = this.variant !== "advanced";
@@ -93,7 +96,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlPagination = SwirlPagination$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-pdf-reader.js

@@ -28,16 +28,6 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     super();
     this.__registerHost();
     this.__attachShadow();
-    this.autoZoomLabel = "Full width";
-    this.closeButtonLabel = "Close PDF viewer";
-    this.downloadButtonLabel = "Download PDF";
-    this.printButtonLabel = "Print PDF";
-    this.zoomInButtonLabel = "Zoom in";
-    this.zoomOutButtonLabel = "Zoom out";
-    this.zoomSelectLabel = "Select zoom";
-    this.active = false;
-    this.closing = false;
-    this.downloading = false;
     this.desktopZoomSteps = [0.5, 0.75, 1, 1.25, 1.5, 2, 3, 4];
     this.mobileZoomSteps = [0.5, 0.75, 1, 1.25, 1.5];
     this.onKeyDown = (event) => {
@@ -81,6 +71,20 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       const value = event.target.value;
       this.zoom = value === "auto" ? value : +value;
     };
+    this.autoZoomLabel = "Full width";
+    this.closeButtonLabel = "Close PDF viewer";
+    this.downloadButtonLabel = "Download PDF";
+    this.file = undefined;
+    this.label = undefined;
+    this.printButtonLabel = "Print PDF";
+    this.zoomInButtonLabel = "Zoom in";
+    this.zoomOutButtonLabel = "Zoom out";
+    this.zoomSelectLabel = "Select zoom";
+    this.active = false;
+    this.closing = false;
+    this.downloading = false;
+    this.zoom = undefined;
+    this.zoomSteps = undefined;
   }
   componentWillLoad() {
     this.updateZoomSteps();
@@ -266,7 +270,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlPdfReader = SwirlPdfReader$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-popover2.js

@@ -13,12 +13,6 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.__attachShadow();
     this.popoverClose = createEvent(this, "popoverClose", 7);
     this.popoverOpen = createEvent(this, "popoverOpen", 7);
-    this.animation = "scale-in-xy";
-    this.enableFlip = true;
-    this.offset = 8;
-    this.placement = "bottom-start";
-    this.active = false;
-    this.closing = false;
     this.toggle = (event) => {
       event.stopPropagation();
       if (this.active) {
@@ -58,6 +52,17 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.onCloseButtonClick = () => {
       this.close();
     };
+    this.animation = "scale-in-xy";
+    this.enableFlip = true;
+    this.label = undefined;
+    this.offset = 8;
+    this.placement = "bottom-start";
+    this.popoverId = undefined;
+    this.trigger = undefined;
+    this.useContainerWidth = undefined;
+    this.active = false;
+    this.closing = false;
+    this.position = undefined;
   }
   componentDidLoad() {
     this.connectTrigger();
@@ -247,6 +252,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { SwirlPopover as S, defineCustomElement as d };

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

@@ -8,6 +8,7 @@ const SwirlProgressIndicator$1 = /*@__PURE__*/ proxyCustomElement(class extends
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.label = undefined;
     this.size = "m";
     this.value = 0;
     this.variant = "bar";
@@ -40,7 +41,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlProgressIndicator = SwirlProgressIndicator$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-radio-group.js

@@ -7,6 +7,8 @@ const SwirlRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     super();
     this.__registerHost();
     this.valueChange = createEvent(this, "valueChange", 7);
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
   }
   componentDidLoad() {
     this.radioButtons = Array.from(this.el.querySelectorAll("swirl-radio"));
@@ -61,7 +63,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlRadioGroup = SwirlRadioGroup$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-radio.js

@@ -9,12 +9,18 @@ const SwirlRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.valueChange = createEvent(this, "valueChange", 7);
-    this.checked = false;
-    this.disabled = false;
     this.onChange = () => {
       this.checked = true;
       this.valueChange.emit(this.value);
     };
+    this.checked = false;
+    this.description = undefined;
+    this.disabled = false;
+    this.inputId = undefined;
+    this.inputName = undefined;
+    this.invalid = undefined;
+    this.label = undefined;
+    this.value = undefined;
   }
   getAriaCheckedLabel(checked, unchecked) {
     if (checked) {
@@ -67,7 +73,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlRadio = SwirlRadio$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-resource-list-file-item.js

@@ -15,12 +15,17 @@ const SwirlResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class exten
     this.__registerHost();
     this.__attachShadow();
     this.remove = createEvent(this, "remove", 7);
-    this.icon = "<swirl-icon-file></swirl-icon-file>";
-    this.removeButtonLabel = "Remove file";
     this.desktopMediaQuery = getDesktopMediaQuery();
     this.desktopMediaQueryHandler = (event) => {
       this.forceIconProps(event.matches);
     };
+    this.description = undefined;
+    this.errorMessage = undefined;
+    this.icon = "<swirl-icon-file></swirl-icon-file>";
+    this.label = undefined;
+    this.loading = undefined;
+    this.removable = undefined;
+    this.removeButtonLabel = "Remove file";
   }
   componentDidLoad() {
     var _a, _b;
@@ -96,7 +101,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlResourceListFileItem = SwirlResourceListFileItem$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-resource-list-item2.js

@@ -11,8 +11,6 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class extends HTM
     this.__registerHost();
     this.__attachShadow();
     this.valueChange = createEvent(this, "valueChange", 7);
-    this.checked = false;
-    this.menuTriggerLabel = "Options";
     this.onClick = () => {
       if (!this.selectable) {
         return;
@@ -25,6 +23,18 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class extends HTM
         event.stopPropagation();
       }
     };
+    this.checked = false;
+    this.description = undefined;
+    this.disabled = undefined;
+    this.hideDivider = undefined;
+    this.href = undefined;
+    this.label = undefined;
+    this.media = undefined;
+    this.menuTriggerId = undefined;
+    this.menuTriggerLabel = "Options";
+    this.meta = undefined;
+    this.selectable = undefined;
+    this.value = undefined;
   }
   componentDidLoad() {
     this.forceAvatarProps();
@@ -105,6 +115,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { SwirlResourceListItem as S, defineCustomElement as d };

package/dist/components/swirl-resource-list2.js

@@ -31,6 +31,7 @@ const SwirlResourceList = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
         this.focusItemAtIndex(this.items.length - 1);
       }
     };
+    this.label = undefined;
   }
   componentDidLoad() {
     this.collectItems();
@@ -82,6 +83,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { SwirlResourceList as S, defineCustomElement as d };

package/dist/components/swirl-search.js

@@ -13,8 +13,6 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.inputBlur = createEvent(this, "inputBlur", 7);
     this.inputFocus = createEvent(this, "inputFocus", 7);
     this.valueChange = createEvent(this, "valueChange", 7);
-    this.clearButtonLabel = "Clear search term";
-    this.placeholder = "Search …";
     this.desktopMediaQuery = getDesktopMediaQuery();
     this.desktopMediaQueryHandler = (event) => {
       this.forceIconProps(event.matches);
@@ -32,6 +30,14 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.onFocus = (event) => {
       this.inputFocus.emit(event);
     };
+    this.autoFocus = undefined;
+    this.clearButtonLabel = "Clear search term";
+    this.disabled = undefined;
+    this.inputName = undefined;
+    this.inputId = undefined;
+    this.label = undefined;
+    this.placeholder = "Search …";
+    this.value = undefined;
   }
   componentDidLoad() {
     var _a, _b;
@@ -95,7 +101,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlSearch = SwirlSearch$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-select.js

@@ -1,19 +1,19 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 import { q as querySelectorAllDeep } from './utils.js';
-import { d as defineCustomElement$5 } from './swirl-icon-expand-less2.js';
-import { d as defineCustomElement$4 } from './swirl-icon-expand-more2.js';
-import { d as defineCustomElement$3 } from './swirl-option-list2.js';
-import { d as defineCustomElement$2 } from './swirl-popover2.js';
+import { d as defineCustomElement$6 } from './swirl-icon-expand-less2.js';
+import { d as defineCustomElement$5 } from './swirl-icon-expand-more2.js';
+import { d as defineCustomElement$4 } from './swirl-option-list2.js';
+import { d as defineCustomElement$3 } from './swirl-popover2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
-const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select--disabled.sc-swirl-select .select__label.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select__label.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__label.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__indicator.sc-swirl-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}";
+const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select--disabled.sc-swirl-select .select__label.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{top:0}.select__label.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__label.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__label.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__indicator.sc-swirl-select{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;color:var(--s-icon-default)}";
 
 const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.valueChange = createEvent(this, "valueChange", 7);
-    this.options = [];
     this.select = (event) => {
       this.value = event.detail;
       this.valueChange.emit(this.value);
@@ -36,6 +36,16 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
         this.popover.open();
       }
     };
+    this.disabled = undefined;
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.label = undefined;
+    this.multiSelect = undefined;
+    this.required = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.options = [];
+    this.open = undefined;
   }
   componentWillLoad() {
     queueMicrotask(() => {
@@ -61,6 +71,7 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       : undefined;
     const className = classnames("select", {
       "select--disabled": this.disabled,
+      "select--inline": this.inline,
     });
     return (h(Host, { onKeyDown: this.onKeyDown }, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__label", disabled: this.disabled, id: "trigger", readOnly: true, type: "text", value: label }), h("span", { class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", null)) : (h("swirl-icon-expand-more", null))), h("swirl-popover", { animation: "scale-in-y", class: "select__popover", enableFlip: false, label: this.label, offset: [16, -16], onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, popoverId: "select-options", ref: (el) => (this.popover = el), trigger: "trigger", useContainerWidth: "swirl-form-control" }, h("swirl-option-list", { onValueChange: this.select, multiSelect: this.multiSelect, value: this.value }, h("slot", { onSlotchange: this.onSlotChange }))))));
   }
@@ -68,11 +79,12 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   static get style() { return swirlSelectCss; }
 }, [6, "swirl-select", {
     "disabled": [4],
-    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "inline": [4],
     "invalid": [4],
     "label": [1],
     "multiSelect": [4, "multi-select"],
     "required": [4],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
     "value": [1040],
     "options": [32],
     "open": [32]
@@ -81,7 +93,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["swirl-select", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-option-list", "swirl-popover"];
+  const components = ["swirl-select", "swirl-icon-expand-less", "swirl-icon-expand-more", "swirl-option-list", "swirl-popover", "swirl-visually-hidden"];
   components.forEach(tagName => { switch (tagName) {
     case "swirl-select":
       if (!customElements.get(tagName)) {
@@ -90,27 +102,31 @@ function defineCustomElement$1() {
       break;
     case "swirl-icon-expand-less":
       if (!customElements.get(tagName)) {
-        defineCustomElement$5();
+        defineCustomElement$6();
       }
       break;
     case "swirl-icon-expand-more":
       if (!customElements.get(tagName)) {
-        defineCustomElement$4();
+        defineCustomElement$5();
       }
       break;
     case "swirl-option-list":
       if (!customElements.get(tagName)) {
-        defineCustomElement$3();
+        defineCustomElement$4();
       }
       break;
     case "swirl-popover":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlSelect = SwirlSelect$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-separator.js

@@ -26,7 +26,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlSeparator = SwirlSeparator$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-skeleton-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlSkeletonBox extends Components.SwirlSkeletonBox, HTMLElement {}
+export const SwirlSkeletonBox: {
+  prototype: SwirlSkeletonBox;
+  new (): SwirlSkeletonBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-skeleton-box.js

@@ -0,0 +1,53 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);-webkit-animation:skeleton-box-shimmer 3s infinite;animation:skeleton-box-shimmer 3s infinite}@-webkit-keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}";
+
+const SwirlSkeletonBox$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.animated = true;
+    this.aspectRatio = undefined;
+    this.borderRadius = "base";
+    this.height = undefined;
+    this.width = undefined;
+  }
+  render() {
+    const className = classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
+    return (h(Host, null, h("div", { class: className, style: {
+        aspectRatio: this.aspectRatio,
+        borderRadius: this.borderRadius !== "pill"
+          ? `var(--s-border-radius-${this.borderRadius})`
+          : undefined,
+        height: this.height,
+        width: this.width,
+      } })));
+  }
+  static get style() { return swirlSkeletonBoxCss; }
+}, [1, "swirl-skeleton-box", {
+    "animated": [4],
+    "aspectRatio": [1, "aspect-ratio"],
+    "borderRadius": [1, "border-radius"],
+    "height": [1],
+    "width": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-skeleton-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-skeleton-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlSkeletonBox$1);
+      }
+      break;
+  } });
+}
+
+const SwirlSkeletonBox = SwirlSkeletonBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlSkeletonBox, defineCustomElement };

package/dist/components/swirl-skeleton-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface SwirlSkeletonText extends Components.SwirlSkeletonText, HTMLElement {}
+export const SwirlSkeletonText: {
+  prototype: SwirlSkeletonText;
+  new (): SwirlSkeletonText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/swirl-skeleton-text.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlSkeletonTextCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-text{position:relative}.skeleton-text--static .skeleton-text__line:after{display:none}.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n  )}.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm);border-radius:calc(var(--s-font-size-sm) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n  )}.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-base);border-radius:calc(var(--s-font-size-base) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-lg) - var(--s-font-size-lg)) / 2\n  )}.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-lg);border-radius:calc(var(--s-font-size-lg) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n    )}}.skeleton-text--size-xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-xl) - var(--s-font-size-xl)) / 2\n  )}.skeleton-text--size-xl .skeleton-text__line{height:var(--s-line-height-xl);border-radius:calc(var(--s-font-size-xl) / 2)}.skeleton-text--size-2xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-2xl) - var(--s-font-size-2xl)) / 2\n  )}.skeleton-text--size-2xl .skeleton-text__line{height:var(--s-line-height-2xl);border-radius:calc(var(--s-font-size-2xl) / 2)}.skeleton-text__line{overflow:hidden;width:100%;padding-top:var(--skeleton-text-line-padding);padding-bottom:var(--skeleton-text-line-padding)}.skeleton-text__line:before{display:block;width:100%;height:100%;border-radius:10rem;background-color:var(--s-surface-raised-hovered);content:\"\"}.skeleton-text__line:after{position:relative;z-index:1;top:-100%;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      var(--s-surface-raised-default) 33%,\n      rgba(255, 255, 255, 0) 66%\n    );content:\"\";transform:translateX(-100%);-webkit-animation:skeleton-text-shimmer 3s infinite;animation:skeleton-text-shimmer 3s infinite}.skeleton-text__line:first-child:last-child{width:100%}.skeleton-text__line:last-child:not(:first-child){width:25%}@-webkit-keyframes skeleton-text-shimmer{100%{transform:translateX(100%)}}@keyframes skeleton-text-shimmer{100%{transform:translateX(100%)}}";
+
+const SwirlSkeletonText$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.animated = true;
+    this.lines = 1;
+    this.size = "base";
+  }
+  render() {
+    const className = classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
+    const lineClassName = classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
+    return (h(Host, null, h("div", { class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
+  }
+  static get style() { return swirlSkeletonTextCss; }
+}, [1, "swirl-skeleton-text", {
+    "animated": [4],
+    "lines": [2],
+    "size": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-skeleton-text"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-skeleton-text":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlSkeletonText$1);
+      }
+      break;
+  } });
+}
+
+const SwirlSkeletonText = SwirlSkeletonText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlSkeletonText, defineCustomElement };

package/dist/components/swirl-spinner2.js

@@ -9,6 +9,7 @@ const SwirlSpinner = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.label = undefined;
     this.size = "m";
   }
   render() {
@@ -38,6 +39,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { SwirlSpinner as S, defineCustomElement as d };

package/dist/components/swirl-stack2.js

@@ -42,6 +42,5 @@ function defineCustomElement() {
       break;
   } });
 }
-defineCustomElement();
 
 export { SwirlStack as S, defineCustomElement as d };

package/dist/components/swirl-switch.js

@@ -9,9 +9,6 @@ const SwirlSwitch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     super();
     this.__registerHost();
     this.valueChange = createEvent(this, "valueChange", 7);
-    this.checked = false;
-    this.disabled = false;
-    this.size = "m";
     this.dragging = false;
     this.recentlyDragged = false;
     this.onChange = () => {
@@ -68,6 +65,13 @@ const SwirlSwitch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       }
       this.thumb.style.left = `${pos}px`;
     };
+    this.checked = false;
+    this.disabled = false;
+    this.inputId = undefined;
+    this.inputName = undefined;
+    this.label = undefined;
+    this.size = "m";
+    this.value = undefined;
   }
   onWindowPointerUp() {
     this.onEndDrag();
@@ -112,7 +116,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlSwitch = SwirlSwitch$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-tab.js

@@ -8,6 +8,9 @@ const SwirlTab$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.active = undefined;
+    this.label = undefined;
+    this.tabId = undefined;
   }
   render() {
     const className = classnames("tab", { "tab--active": this.active });
@@ -32,7 +35,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlTab = SwirlTab$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-table-cell.js

@@ -26,7 +26,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlTableCell = SwirlTableCell$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-table-column.js

@@ -9,7 +9,12 @@ const SwirlTableColumn$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.sort = undefined;
+    this.sortable = undefined;
+    this.maxWidth = undefined;
     this.minWidth = "fit-content";
+    this.sticky = undefined;
+    this.width = undefined;
   }
   render() {
     const styles = {
@@ -52,7 +57,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlTableColumn = SwirlTableColumn$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-table-row-group.js

@@ -7,6 +7,7 @@ const SwirlTableRowGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTML
     super();
     this.__registerHost();
     this.__attachShadow();
+    this.label = undefined;
   }
   render() {
     const rowspan = this.el.querySelectorAll("swirl-table-row").length;
@@ -30,7 +31,6 @@ function defineCustomElement$1() {
       break;
   } });
 }
-defineCustomElement$1();
 
 const SwirlTableRowGroup = SwirlTableRowGroup$1;
 const defineCustomElement = defineCustomElement$1;