@getflip/swirl-components-react 0.326.0 → 0.328.0

package/dist/{swirl-button-group.entry.8a2f65ab.js → swirl-button-group.entry.dcbcf150.js}

@@ -1,8 +1,8 @@
-import { r as s, h as r, H as i } from "./index.0cee1557.js";
+import { r as s, h as r, H as i } from "./index.7086f041.js";
 import { c as e } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
-const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:"";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}', a = n, d = class {
+const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:"";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}', d = n, a = class {
   constructor(t) {
     s(this, t), this.orientation = "horizontal", this.segmented = void 0, this.spacing = "8", this.stretch = void 0, this.wrap = void 0;
   }
@@ -10,10 +10,10 @@ const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segm
     const t = this.segmented ? "0" : this.spacing, o = e("button-group", {
       "button-group--segmented": this.segmented
     });
-    return r(i, { key: "3ba97e21adc41e84cc00510846c4afa0908a0346" }, r("swirl-stack", { key: "68274c5d09b125086e29a2c47351f66d1f2b6bc4", align: this.orientation === "vertical" && this.stretch ? "stretch" : "start", class: o, justify: this.orientation === "horizontal" && this.stretch ? "stretch" : "start", orientation: this.orientation, role: "group", spacing: t, wrap: this.wrap }, r("slot", { key: "8116255c942708969132eab81ef8ecaeb2a29ff7" })));
+    return r(i, { key: "62fdc66541bdbcc2d9ae974ff53feff7d4699651" }, r("swirl-stack", { key: "7227deb457a14162fe12dfae41c19a013b388253", align: this.orientation === "vertical" && this.stretch ? "stretch" : "start", class: o, justify: this.orientation === "horizontal" && this.stretch ? "stretch" : "start", orientation: this.orientation, role: "group", spacing: t, wrap: this.wrap }, r("slot", { key: "fdb01addb654c8f56dacf6a1ad2bb661a452ed0c" })));
   }
 };
-d.style = a;
+a.style = d;
 export {
-  d as swirl_button_group
+  a as swirl_button_group
 };

package/dist/{swirl-button.entry.64d99285.js → swirl-button.entry.3dcd2000.js}

@@ -1,4 +1,4 @@
-import { r as b, h as o, H as u, g as d } from "./index.0cee1557.js";
+import { r as b, h as o, H as u, g as d } from "./index.7086f041.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
 import { g as v } from "./utils-877a768f.c277f897.js";
 import "react";
@@ -48,7 +48,7 @@ const h = `.sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}
       "button--pill": this.pill,
       "button--pressed": this.pressed
     }), l = t ? "a" : "button";
-    return o(u, { key: "ec50c354c4a6047647366a6f628c6a77cd8c35e4", style: { pointerEvents: this.disabled ? "none" : "" } }, o(l, { key: "b6b6e9d6e4720258779a90c2f07c4c034d7addb9", "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !t ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": r, "aria-pressed": this.pressed ? "true" : void 0, class: e, disabled: t ? void 0 : this.disabled, download: t ? void 0 : this.download, form: t ? void 0 : this.form, href: this.href, name: t ? void 0 : this.name, ref: (i) => this.buttonEl = i, target: t ? this.target : void 0, type: t ? void 0 : this.type, value: t ? void 0 : this.value, style: this.inheritFontSize ? { fontSize: "inherit", lineHeight: "inherit" } : {} }, Boolean(this.icon) && o("span", { key: "d3d978cff96c7d1fcab00e7fae34b11cbb5c1ffd", class: "button__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), !Boolean(this.icon) && o("span", { key: "b233c5fc5ca4f89a90f7f7cdd7a8e8c34d1d4e64", class: "button__icon", ref: (i) => this.iconEl = i }, o("slot", { key: "b5af0649f15c349eeacde2bbe6730ded1d7c6719", name: "icon" })), !n && o("span", { key: "6652f55e0d2cce9dc6897d7eb26db48493b70b8c", class: "button__label" }, this.label), s && o("span", { key: "82ea4f82b99e3966081feeb88aada27dd90fef4c", class: "button__tag" }, o("slot", { key: "a0e3276c4f51787f5970852cc4620056ea6bb539", name: "tag" }))));
+    return o(u, { key: "d6d3ce3dc37e1baae931a9889310d2b95d1e2a1c", style: { pointerEvents: this.disabled ? "none" : "" } }, o(l, { key: "ddf5437dfcd007cd797e8c02b1755faaca0af7cb", "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !t ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": r, "aria-pressed": this.pressed ? "true" : void 0, class: e, disabled: t ? void 0 : this.disabled, download: t ? void 0 : this.download, form: t ? void 0 : this.form, href: this.href, name: t ? void 0 : this.name, ref: (i) => this.buttonEl = i, target: t ? this.target : void 0, type: t ? void 0 : this.type, value: t ? void 0 : this.value, style: this.inheritFontSize ? { fontSize: "inherit", lineHeight: "inherit" } : {} }, Boolean(this.icon) && o("span", { key: "db012c0296c21362c90ba800a16f96292b745717", class: "button__icon", innerHTML: this.icon, ref: (i) => this.iconEl = i }), !Boolean(this.icon) && o("span", { key: "f62b2479f0a236cc3bd49e636436c9b8ac86d59f", class: "button__icon", ref: (i) => this.iconEl = i }, o("slot", { key: "c0e02250891e12f1f61fe6838da9d398f1d51119", name: "icon" })), !n && o("span", { key: "6d08f04545e0227873c57731bfe5c62726a28ee2", class: "button__label" }, this.label), s && o("span", { key: "dba345465a93e5bba27c72878db5830316ddb84b", class: "button__tag" }, o("slot", { key: "267c787320f98ffc06a1393660c0a6dd4bc75c74", name: "tag" }))));
   }
   get el() {
     return d(this);

package/dist/{swirl-card.entry.1b243917.js → swirl-card.entry.dfa6a90d.js}

@@ -1,4 +1,4 @@
-import { r as n, c as o, h as e, H as c, g as l } from "./index.0cee1557.js";
+import { r as n, c as o, h as e, H as c, g as l } from "./index.7086f041.js";
 import { c as h } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -42,7 +42,7 @@ const u = `:host{display:contents}:host *{box-sizing:border-box}.card{--swirl-gh
       "card--interactive": this.interactive || this.href,
       "card--is--borderless": this.isBorderless
     });
-    return e(c, { key: "8960d67072f02f102f00b69b0967dae41ea7d5ab", styles: { height: this.height } }, e(a, { key: "f2dff01ee8d98b008a190f2176f9899cc2889e91", "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: d, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank" ? "noreferrer" : void 0, style: t, target: this.linkTarget }, e("div", { key: "d151fb7e77abc0b37185600cf2ba35ed15e35444", class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, e("slot", { key: "b67664c6c62d9d7eae24f1b8391b9e647d833efb", name: "image" })), e("div", { key: "64eb79d9e82e3b05511c1ab484c948add6742055", class: "card__floating-controls" }, e("slot", { key: "7888a5a6f28f883fa9b704230c728a89f055e12d", name: "floating-controls" })), e("div", { key: "309ddc2116d9638419800863b42edc1f7cc1a831", class: "card__body", style: i }, e("div", { key: "134cc12bafee8ff048b081e765804a2240da5d0c", class: "card__content" }, e("slot", { key: "47af946472d86c3afc9672ded29b858551a76757", name: "content" })))));
+    return e(c, { key: "478f476dd1540d6717515b98275f8b844869fd7c", styles: { height: this.height } }, e(a, { key: "8e92bef0024a98a95b4ee57b14fc8f6774646279", "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: d, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank" ? "noreferrer" : void 0, style: t, target: this.linkTarget }, e("div", { key: "31c2805728761dfcb0c52a40ca35dde8db717395", class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, e("slot", { key: "acad13c8d0ae94025b38efdceb3f57c08c46e1ea", name: "image" })), e("div", { key: "acb6863ba75f792b6b63d345d21a5501d2606ae9", class: "card__floating-controls" }, e("slot", { key: "4ea72ed42dfb59b4e2d6a756084a51731811ac8f", name: "floating-controls" })), e("div", { key: "58ec0bd8db851413e5f00bc7f68fe0c7c180ebdc", class: "card__body", style: i }, e("div", { key: "8cca2590d51f405927f0632abe25e63e681e7175", class: "card__content" }, e("slot", { key: "012022e6119ae081a3fac9edade9c8f8789635ad", name: "content" })))));
   }
   get el() {
     return l(this);

package/dist/swirl-carousel-slide.entry.05a3fe26.js

@@ -0,0 +1,23 @@
+import { r as i, h as s, H as t } from "./index.7086f041.js";
+import { c as l } from "./index-267776a4.6beb4f4b.js";
+import "react";
+import "react-dom";
+const o = ":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}", a = o, r = class {
+  constructor(e) {
+    i(this, e), this.aspectRatio = void 0, this.label = void 0, this.minHeight = void 0, this.width = "15.5rem";
+  }
+  render() {
+    const e = l("carousel-slide", {
+      "carousel-slide--has-min-height": Boolean(this.minHeight)
+    });
+    return s(t, { key: "9bc4985739dc192b039b2dea6524e1d561b89c80", "aria-roledescription": "slide", "aria-label": this.label, class: e, role: "group", style: {
+      aspectRatio: this.aspectRatio,
+      flexBasis: this.width,
+      minHeight: this.minHeight
+    }, tabIndex: 0 }, s("slot", { key: "42d69c816388c933e8e7529e5eed0a7e8a65ffd9" }));
+  }
+};
+r.style = a;
+export {
+  r as swirl_carousel_slide
+};

package/dist/{swirl-carousel.entry.b5037a66.js → swirl-carousel.entry.9ca8c60c.js}

@@ -1,4 +1,4 @@
-import { r as n, c as a, h as l, H as r, g as d } from "./index.0cee1557.js";
+import { r as n, c as a, h as l, H as r, g as d } from "./index.7086f041.js";
 import { c } from "./index-267776a4.6beb4f4b.js";
 import { d as h } from "./utils-877a768f.c277f897.js";
 import "react";
@@ -87,7 +87,7 @@ const u = `:host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fad
       "carousel--is-at-start": this.isAtStart,
       "carousel--is-at-end": this.isAtEnd
     });
-    return l(r, { key: "1e26fcf73b92609c88ed3f702fe53e750e26f6da", "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, l("div", { key: "02e7684b10d536d75a1590dfa162315307b01118", class: e }, this.isScrollable && !this.isAtStart && l("swirl-button", { key: "0becf4dd5a8184cc3e25738bca97c266cee87a4d", class: "carousel__previous-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: !0, variant: "floating" }), this.isScrollable && !this.isAtEnd && l("swirl-button", { key: "08fe60febb3c9cc4c0c5747126277586d7f24e6e", class: "carousel__next-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: !0, variant: "floating" }), l("div", { key: "b421a6ef4b4c1870aefbb0e54d785811cfa701d9", "aria-live": "polite", class: "carousel__slides", style: i, onScroll: this.onScroll, ref: (t) => this.slidesContainer = t }, l("slot", { key: "e46a799bf218fd0ceeb4baa718c9d975e82f377a", onSlotchange: this.onSlotChange }))));
+    return l(r, { key: "455ff284d8c95ca37ebbfaa3efeccfa0a4eced53", "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, l("div", { key: "576af4479a93ed30ac2ca67b4d32f3559f075125", class: e }, this.isScrollable && !this.isAtStart && l("swirl-button", { key: "e32e058989e1d95e36d97b58b8da8deebd9a8468", class: "carousel__previous-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: !0, variant: "floating" }), this.isScrollable && !this.isAtEnd && l("swirl-button", { key: "8544229fe77186f043315fbc50e463ebc84197bf", class: "carousel__next-slide-button", hideLabel: !0, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: !0, variant: "floating" }), l("div", { key: "ccccbc484f6ae31f2bf63782005bc994b42d325a", "aria-live": "polite", class: "carousel__slides", style: i, onScroll: this.onScroll, ref: (t) => this.slidesContainer = t }, l("slot", { key: "bbff9ce6b8c0e05002cf85d3955fb72acb309a87", onSlotchange: this.onSlotChange }))));
   }
   get el() {
     return d(this);

package/dist/{swirl-checkbox.entry.89c05104.js → swirl-checkbox.entry.b82a9daa.js}

@@ -1,4 +1,4 @@
-import { r as b, c as d, h as c, H as t } from "./index.0cee1557.js";
+import { r as b, c as d, h as c, H as t } from "./index.7086f041.js";
 import { c as l } from "./index-267776a4.6beb4f4b.js";
 import "react";
 import "react-dom";
@@ -21,7 +21,7 @@ const n = `.sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-sw
       "checkbox--invalid": this.invalid,
       "checkbox--unchecked": e
     });
-    return c(t, { key: "cf3e5aa42775aac75e4f08499cf762cb35687864", style: { width: this.variant === "card" ? "100%" : void 0 } }, c("label", { key: "098d2d0509e46a530c5cb5a034d1512fb82a20eb", class: a, htmlFor: this.inputId }, c("span", { key: "6d6dbf85fc99f5b16e23b9b3884ccd3cf1e95baa", class: "checkbox__control" }, c("swirl-visually-hidden", { key: "6bfe18790ed2a36783eb27f5df531cf702440b8b" }, c("input", { key: "d25db1141a3603555a2c8ce4636d0c31f11404cc", "aria-checked": r, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": h, "aria-label": this.swirlAriaLabel, checked: i, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: o, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), c("span", { key: "5a7ee20a4c27974aa85cab4c6fc4df6fe3e047f5", "aria-hidden": "true", class: "checkbox__box" }, c("span", { key: "2b90e1b1c1af1b5abbcc2da9cd92a6f8771da9b5", class: "checkbox__icon" }, i && c("swirl-icon-check-strong", { key: "69f89ef7f9af74d6478cdcd1f45f0dc0e40779b9" }), o && c("span", { key: "abb3beb0868e23cca2dfd7b766ccb3e982453096", class: "checkbox__indeterminate-icon" })))), s && c("span", { key: "63519992e86d671a9b877d6b4efc5774faee8086", class: "checkbox__label-container" }, this.label && c("span", { key: "c82b989c165ecf22b03c9ed046d52532bfed30e7", class: "checkbox__label" }, this.label), this.description && c("span", { key: "7359cd851c8c410fc4ee8762922a21adaa6058f0", class: "checkbox__description" }, this.description))));
+    return c(t, { key: "678ea990bd9fe0d3db3c48372a7a34d48dff2d00", style: { width: this.variant === "card" ? "100%" : void 0 } }, c("label", { key: "7034996fb426722179792d3a0c47804d137d530e", class: a, htmlFor: this.inputId }, c("span", { key: "ca8596a7dd921f8ef3a7e60ed0d7c164eb94d4bc", class: "checkbox__control" }, c("swirl-visually-hidden", { key: "3ec6ced18278385e8e5fe4c84938cdd80397782f" }, c("input", { key: "83ceed4941de2152204ba4cc7ab207a4523ffef3", "aria-checked": r, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": h, "aria-label": this.swirlAriaLabel, checked: i, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: o, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), c("span", { key: "254e1a71e83e67415e571b9ae63076954e8a4f66", "aria-hidden": "true", class: "checkbox__box" }, c("span", { key: "ec1004329eb2c8f074e7bb79deeb44b33e129841", class: "checkbox__icon" }, i && c("swirl-icon-check-strong", { key: "c0bc328e436dfac5309f5bc1410492edbf5396ed" }), o && c("span", { key: "04c1f9c3bcd98ccb85671dec4616e1da03100789", class: "checkbox__indeterminate-icon" })))), s && c("span", { key: "51f607d635ce44a09a936f9809e7a3d439d9a981", class: "checkbox__label-container" }, this.label && c("span", { key: "fc52f9ab78dc555ce4cad9f2f6e31720c84059eb", class: "checkbox__label" }, this.label), this.description && c("span", { key: "e1e07e745fea0d5be76ae92f463c5908172c8772", class: "checkbox__description" }, this.description))));
   }
 };
 x.style = k;

package/dist/{swirl-chip.entry.999a7ced.js → swirl-chip.entry.aea1964d.js}

@@ -1,11 +1,11 @@
-import { r as o, c as s, h as e, H as h, g as n } from "./index.0cee1557.js";
+import { r as o, c, h as e, H as h, g as n } from "./index.7086f041.js";
 import { c as p } from "./index-267776a4.6beb4f4b.js";
 import { g as l } from "./utils-877a768f.c277f897.js";
 import "react";
 import "react-dom";
 const d = ".sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.5rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-raised-default)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--interactive.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-surface-overlay-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--variant-outline.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active+.chip__remove-button.sc-swirl-chip{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.3125rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:var(--s-surface-overlay-default);cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-surface-overlay-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-surface-overlay-pressed)}", v = d, u = class {
   constructor(r) {
-    o(this, r), this.chipClick = s(this, "chipClick", 7), this.removeChip = s(this, "remove", 7), this.desktopMediaQuery = l(), this.desktopMediaQueryHandler = (i) => {
+    o(this, r), this.chipClick = c(this, "chipClick", 7), this.removeChip = c(this, "remove", 7), this.desktopMediaQuery = l(), this.desktopMediaQueryHandler = (i) => {
       this.forceIconProps(i.matches);
     }, this.borderRadius = "pill", this.icon = void 0, this.iconColor = "default", this.intent = "default", this.interactive = !1, this.label = void 0, this.progress = void 0, this.pressed = void 0, this.progressBarLabel = "Loading progress", this.removable = void 0, this.removeButtonLabel = "Remove", this.size = "m", this.variant = "outline";
   }
@@ -19,17 +19,17 @@ const d = ".sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%
   forceIconProps(r) {
     if (!Boolean(this.iconEl))
       return;
-    const i = this.iconEl.children[0], c = this.size === "s" ? "16" : r ? "20" : "24";
-    i == null || i.setAttribute("size", c);
+    const i = this.iconEl.children[0], s = this.size === "s" ? "16" : r ? "20" : "24";
+    i == null || i.setAttribute("size", s);
   }
   render() {
-    const r = this.interactive || this.pressed !== void 0 ? "button" : "span", i = Boolean(this.el.querySelector('[slot="avatar"]')), c = !i && Boolean(this.icon), a = p("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
+    const r = this.interactive || this.pressed !== void 0 ? "button" : "span", i = Boolean(this.el.querySelector('[slot="avatar"]')), s = !i && Boolean(this.icon), a = p("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
       "chip--pressed": this.pressed,
       "chip--has-progress": this.progress !== void 0,
       "chip--interactive": this.interactive || this.pressed !== void 0,
       "chip--removable": this.removable
     });
-    return e(h, { key: "f560cdad4c3f0c55b3d2ac10b19fbac5b20b5d18" }, e(r, { key: "fb294108ab4910ee09840ceaf5eb350fb3eb5132", "aria-pressed": this.pressed !== void 0 ? String(this.pressed) : void 0, class: a, onClick: this.chipClick.emit, type: this.interactive ? "button" : void 0 }, e("span", { key: "197c45a751c28a376183f620498f9576e5b2cf21", class: "chip__inner" }, i && e("span", { key: "4810eaa36a411443ff8ac2d68638ae2a2e42b198", class: "chip__avatar" }, e("slot", { key: "9c1cfca4b04eebd73a9145c5771eb16e9314e787", name: "avatar" })), c && e("span", { key: "99b902e7815b01e79a8c6347585a5ef6fc6c3e14", class: "chip__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), e("span", { key: "b7e7de490429f25f45348e2746bcd75be8be811c", class: "chip__label" }, this.label)), this.progress !== void 0 && e("span", { key: "ff6870b703c8c087dc3b728fb1dde0455aea9026", class: "chip__progress-indicator" }, e("swirl-progress-indicator", { key: "4813ebd472d8c60cfe7de1330133915deb42cf24", label: this.progressBarLabel, value: this.progress }))), this.removable && e("button", { key: "160475d7e28c3446a06066915c2b62ba1ef95905", "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, e("swirl-icon-close", { key: "e5c5ee4dada04ae33650ac748dce5f4b02791976", size: 20 })));
+    return e(h, { key: "67ed7962107673d2b27886cbc6b22c451335ba4b" }, e(r, { key: "ee65c5950ec0eb61037282966e60c47d113ecd4f", "aria-pressed": this.pressed !== void 0 ? String(this.pressed) : void 0, class: a, onClick: this.chipClick.emit, type: this.interactive ? "button" : void 0 }, e("span", { key: "7a2fea34626f32eb01f09424ee77e663e03a4815", class: "chip__inner" }, i && e("span", { key: "ceacda3a0a82ab42a0eeb9016eef8d50fed975d5", class: "chip__avatar" }, e("slot", { key: "f16326da71143e85dd6601038f6c22eaefab8e8b", name: "avatar" })), s && e("span", { key: "9e2b3f42b74c210d2a6a4485f7ea2e4e81b9b442", class: "chip__icon", innerHTML: this.icon, ref: (t) => this.iconEl = t }), e("span", { key: "7c51f843fabc323d4564f1af9baf978c262fec5d", class: "chip__label" }, this.label)), this.progress !== void 0 && e("span", { key: "c1a1eb80d19f17af33532025e5130d624defba32", class: "chip__progress-indicator" }, e("swirl-progress-indicator", { key: "aac475d0b313f0844511d6eb0b718e135013450e", label: this.progressBarLabel, value: this.progress }))), this.removable && e("button", { key: "f5da3e24bdc9b3c05ad2385250dea4472125765c", "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, e("swirl-icon-close", { key: "ed9878871eb6aa8755ee47fe7a44d06a55e39929", size: 20 })));
   }
   get el() {
     return n(this);

package/dist/{swirl-color-input.entry.7f6d0737.js → swirl-color-input.entry.f27876f8.js}

@@ -1,4 +1,4 @@
-import { r as L, c as f, h as l, H as B } from "./index.0cee1557.js";
+import { r as L, c as f, h as l, H as B } from "./index.7086f041.js";
 import { c as T } from "./index-267776a4.6beb4f4b.js";
 import { v as z } from "./v4-23648a96.77c7c20f.js";
 import "react";
@@ -253,9 +253,9 @@ const Z = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-inpu
     const e = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, t = T("color-input", {
       "color-input--inline": this.inline
     });
-    return l(B, { key: "84cc3e16101043574dd4d30f7903ce92b034309c" }, l("div", { key: "439383e3e3384bcd255bec502a2df0dd5be1a661", class: t }, l("input", { key: "59edc6b99c9cb8cfecbb4d672584a37edcbad943", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (o) => this.inputEl = o, required: this.required, spellcheck: "false", type: "text", value: this.value }), l("swirl-popover-trigger", { key: "f5f6ae99f40c8bc2dd565fa2114cc5aeb795ecae", swirlPopover: this.pickerId }, l("button", { key: "aef319ab0793cc4882632d73a73ca38f9484a1ec", "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+    return l(B, { key: "db984e1d6f60cd74d1b5b0b64d441e9d87e5198c" }, l("div", { key: "b68c0b8c7c5e426959e2bcd9c6f0ecf79d8ad92b", class: t }, l("input", { key: "20a8d4adab4ce97069423829f8882c6ebff51b48", "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": e, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (o) => this.inputEl = o, required: this.required, spellcheck: "false", type: "text", value: this.value }), l("swirl-popover-trigger", { key: "3e3b890953d2f6a86491ee68f8968b81b4c152ae", swirlPopover: this.pickerId }, l("button", { key: "0a962dde3571d8b59fcb333fe944faa545f29616", "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
       backgroundColor: this.disabled ? "var(--s-border-subdued)" : this.value
-    }, type: "button" })), l("swirl-popover", { key: "948eb8d67e9497014133f4bf757d5a5c900ff83d", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "c6987312e10639e16573f8129fae48aa71b2d734", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "f182577c4d61d00aabb8547fa02c809ee8959243", color: this.value, ref: (o) => this.picker = o })))));
+    }, type: "button" })), l("swirl-popover", { key: "7549e1eeb25e478176999aba5fd22f8d1f7d9238", animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, l("swirl-box", { key: "25ab3e99d518d2fb443ced81d7929d385e576dfe", centerInline: !0, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, l("hex-color-picker", { key: "ff1ad9a924e424c438d1784f8be2b6afaf939ae4", color: this.value, ref: (o) => this.picker = o })))));
   }
   static get watchers() {
     return {

package/dist/swirl-columns.entry.f91a9bcc.js

@@ -0,0 +1,18 @@
+import { r as c, h as s, H as a } from "./index.7086f041.js";
+import "react";
+import "react-dom";
+const o = ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}", t = o, i = class {
+  constructor(e) {
+    c(this, e), this.columns = "repeat(3, minmax(0, 1fr))", this.spacing = void 0;
+  }
+  render() {
+    return s(a, { key: "ce1826ac58a146237bb04b85f2d9ac93acfcb2db" }, s("div", { key: "bfd1b19b96669e972b6e9afe9e5c2fe60a49c934", class: "columns", style: {
+      gridTemplateColumns: this.columns,
+      gap: `var(--s-space-${this.spacing})`
+    } }, s("slot", { key: "3e3f34b8aeb09057a17645bfca47cc4ade17cda2" })));
+  }
+};
+i.style = t;
+export {
+  i as swirl_columns
+};