@getflip/swirl-components 0.339.0 → 0.340.0

package/dist/components/swirl-badge2.js

@@ -3,16 +3,13 @@ import { c as classNames } from './index2.js';
 import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
 
 const swirlBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);box-shadow:0 0 0 0.125rem var(--swirl-badge-border-color)}.badge--size-xs{min-width:1rem;height:1rem;font-size:0.6875rem}.badge--size-xs .badge__label{padding-right:0.25rem;padding-left:0.25rem}.badge--size-xs .badge__icon>swirl-icon,.badge--size-xs .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-s{min-width:1.25rem;height:1.25rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:1rem;height:1rem}.badge--size-m{min-width:1.5rem;height:1.5rem}.badge--size-m .badge__label{padding-right:0.4375rem;padding-left:0.4375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-neutral{color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.5rem;min-width:0;height:1.5rem}.badge--variant-dot.badge--size-xs{width:0.5rem;height:0.5rem}.badge--variant-dot.badge--size-s{width:0.75rem;height:0.75rem}.badge--variant-dot.badge--size-m{width:1rem;height:1rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
-const SwirlBadgeStyle0 = swirlBadgeCss;
 
 const SwirlBadge = /*@__PURE__*/ proxyCustomElement(class SwirlBadge extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.icon = undefined;
         this.intent = "critical";
-        this.label = undefined;
         this.size = "m";
         this.variant = "default";
     }
@@ -22,7 +19,7 @@ const SwirlBadge = /*@__PURE__*/ proxyCustomElement(class SwirlBadge extends HTM
         });
         return (h(Host, { key: 'd5da40b81526b3b205e8250b20efb829ecf2a3d5', role: "status" }, h("span", { key: '450074bef0b5751fa7608c159c7fc0cd10952358', class: className, part: "badge" }, this.icon && h("span", { key: 'e9f0f37242ad3e2bd513915311632fae41256d49', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
     }
-    static get style() { return SwirlBadgeStyle0; }
+    static get style() { return swirlBadgeCss; }
 }, [1, "swirl-badge", {
         "icon": [1],
         "intent": [1],

package/dist/components/swirl-banner.js

@@ -4,7 +4,6 @@ import { D as DesktopMediaQuery } from './media-query.service.js';
 import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
 
 const swirlBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;align-items:flex-start;gap:var(--s-space-16);max-width:100%;min-height:3.5rem;padding:var(--s-space-16)}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner{padding:var(--s-space-16);min-height:3.25rem}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-left:0}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}.banner__content{display:flex;align-items:flex-start;min-height:1.5rem;flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);min-height:1.25rem}}.banner__icon{display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__text{min-height:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__text{min-height:1.25rem}}.banner__controls{display:inline-flex;flex-shrink:0;align-items:flex-start;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);height:1.25rem}}";
-const SwirlBannerStyle0 = swirlBannerCss;
 
 const swirlBannerIconMapping = {
     default: undefined,
@@ -20,6 +19,12 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         this.__attachShadow();
         this.action = createEvent(this, "action", 7);
         this.dismiss = createEvent(this, "dismiss", 7);
+        this.dismissable = false;
+        this.dismissLabel = "Dismiss";
+        this.importance = "status";
+        this.intent = "default";
+        this.showIcon = false;
+        this.size = "m";
         this.mediaQueryUnsubscribe = () => { };
         this.onAction = (event) => {
             this.action.emit(event);
@@ -27,15 +32,6 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         this.onDismiss = (event) => {
             this.dismiss.emit(event);
         };
-        this.actionLabel = undefined;
-        this.content = undefined;
-        this.dismissable = false;
-        this.dismissLabel = "Dismiss";
-        this.importance = "status";
-        this.intent = "default";
-        this.showIcon = false;
-        this.icon = undefined;
-        this.size = "m";
     }
     componentDidLoad() {
         this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
@@ -64,7 +60,7 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         return (h(Host, { key: '52901533a924083e7080527d05c024dfeca4cfd8' }, h("div", { key: '3f9b2e12dae3fd6ac3320f1f207c3f80163b4895', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '210dfff43e7867341485e8a08ca9f646d8f788f6', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '4f52c17e778ad0a097b15df1bb957c00108f5f40', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '388cac66f35b9d5230e83edfa6b4ee1f83343c95', class: "banner__text" }, this.content)), showControls && (h("div", { key: 'dd2c85861e304e20b7413d8543b7d44b2403e2ce', class: "banner__controls" }, this.actionLabel && (h("button", { key: '60020c45f5b232742c5dfae378fac62bb1b552a0', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '0fd55fb8949212dcb7e21a3c47806acdfa00fa6b', "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", { key: 'a1f408e4beaef07ff7379ea7625f590dd943a87f' }))))))));
     }
     get element() { return this; }
-    static get style() { return SwirlBannerStyle0; }
+    static get style() { return swirlBannerCss; }
 }, [1, "swirl-banner", {
         "actionLabel": [1, "action-label"],
         "content": [1],

package/dist/components/swirl-box2.js

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classNames } from './index2.js';
 
 const swirlBoxCss = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--border-color-default){border-color:var(--s-border-default)}:host(.box--border-color-strong){border-color:var(--s-border-strong)}:host(.box--bordered-block-end){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid}:host(.box--bordered-block-start){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid}:host(.box--bordered-inline-end){border-inline-end-width:var(--s-border-width-default);border-inline-end-style:solid}:host(.box--bordered-inline-start){border-inline-start-width:var(--s-border-width-default);border-inline-start-style:solid}:host(.box--bordered-block-start-when-scrolled.box--scrollable){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid;border-block-start-color:transparent}:host(.box--bordered-block-start-when-scrolled.box--scrollable:not(.box--scrolled-to-top)){border-block-start-color:var(--s-border-default)}:host(.box--bordered-block-end-when-scrolled.box--scrollable){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid;border-block-end-color:transparent}:host(.box--bordered-block-end-when-scrolled.box--scrollable:not(.box--scrolled-to-bottom)){border-block-end-color:var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}";
-const SwirlBoxStyle0 = swirlBoxCss;
 
 const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLElement {
     constructor() {
@@ -10,46 +9,17 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.componentLoad = createEvent(this, "componentLoad", 7);
-        this.onScroll = () => {
-            this.updateScrollState();
-        };
         this.borderColor = "default";
-        this.bordered = undefined;
-        this.borderedBlockEnd = undefined;
-        this.borderedBlockEndWhenScrolled = undefined;
-        this.borderedBlockStart = undefined;
-        this.borderedBlockStartWhenScrolled = undefined;
-        this.borderedInlineEnd = undefined;
-        this.borderedInlineStart = undefined;
-        this.bottom = undefined;
-        this.centerBlock = undefined;
-        this.centerInline = undefined;
-        this.cover = undefined;
-        this.height = undefined;
-        this.left = undefined;
-        this.maxHeight = undefined;
-        this.minHeight = undefined;
-        this.maxWidth = undefined;
-        this.minWidth = undefined;
         this.overflow = "visible";
         this.padding = "0";
-        this.paddingBlockEnd = undefined;
-        this.paddingBlockStart = undefined;
-        this.paddingInlineEnd = undefined;
-        this.paddingInlineStart = undefined;
-        this.position = undefined;
-        this.right = undefined;
-        this.basis = undefined;
-        this.shrink = undefined;
-        this.grow = undefined;
-        this.top = undefined;
-        this.width = undefined;
-        this.zIndex = undefined;
         this.scrollState = {
             scrollable: false,
             scrolledToBottom: false,
             scrolledToTop: false,
         };
+        this.onScroll = () => {
+            this.updateScrollState();
+        };
     }
     componentDidLoad() {
         this.componentLoad.emit();
@@ -124,7 +94,7 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
         return (h(Host, { key: '9eb887b775004a6c938285b4713f7d42a76d63c4', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '801d75966176bee2182fa524131d230e2ec273f5' })));
     }
     get el() { return this; }
-    static get style() { return SwirlBoxStyle0; }
+    static get style() { return swirlBoxCss; }
 }, [1, "swirl-box", {
         "borderColor": [1, "border-color"],
         "bordered": [4],

package/dist/components/swirl-button-group2.js

@@ -3,7 +3,6 @@ import { c as classNames } from './index2.js';
 import { d as defineCustomElement$1 } from './swirl-stack2.js';
 
 const swirlButtonGroupCss = ":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}";
-const SwirlButtonGroupStyle0 = swirlButtonGroupCss;
 
 const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class SwirlButtonGroup extends HTMLElement {
     constructor() {
@@ -11,10 +10,7 @@ const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class SwirlButtonGroup
         this.__registerHost();
         this.__attachShadow();
         this.orientation = "horizontal";
-        this.segmented = undefined;
         this.spacing = "8";
-        this.stretch = undefined;
-        this.wrap = undefined;
     }
     render() {
         const spacing = this.segmented ? "0" : this.spacing;
@@ -27,7 +23,7 @@ const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class SwirlButtonGroup
                 ? "stretch"
                 : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", { key: 'fdb01addb654c8f56dacf6a1ad2bb661a452ed0c' }))));
     }
-    static get style() { return SwirlButtonGroupStyle0; }
+    static get style() { return swirlButtonGroupCss; }
 }, [1, "swirl-button-group", {
         "orientation": [1],
         "segmented": [4],

package/dist/components/swirl-button2.js

@@ -3,39 +3,18 @@ import { c as classNames } from './index2.js';
 import { D as DesktopMediaQuery } from './media-query.service.js';
 
 const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-disabled);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus:where(:not(:focus-visible)){outline:none}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n      --swirl-icon-button-border-bottom-right-radius\n    );border-bottom-left-radius:var(\n      --swirl-icon-button-border-bottom-left-radius\n    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
-const SwirlButtonStyle0 = swirlButtonCss;
 
 const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.mediaQueryUnsubscribe = () => { };
-        this.elevated = undefined;
-        this.disabled = undefined;
-        this.download = undefined;
-        this.swirlAriaControls = undefined;
-        this.swirlAriaCurrent = undefined;
-        this.swirlAriaDescribedby = undefined;
-        this.swirlAriaExpanded = undefined;
-        this.swirlAriaHaspopup = undefined;
-        this.swirlAriaLabel = undefined;
-        this.form = undefined;
-        this.hideLabel = undefined;
-        this.href = undefined;
-        this.icon = undefined;
         this.iconPosition = "start";
         this.intent = "default";
-        this.label = undefined;
-        this.name = undefined;
-        this.pill = undefined;
-        this.pressed = undefined;
         this.size = "m";
-        this.target = undefined;
         this.textAlign = "center";
         this.type = "button";
-        this.value = undefined;
         this.variant = "ghost";
-        this.inheritFontSize = undefined;
+        this.mediaQueryUnsubscribe = () => { };
     }
     componentDidLoad() {
         this.updateFormAttribute();
@@ -101,7 +80,7 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
                 : {} }, Boolean(this.icon) && (h("span", { key: '371fbdd6575181f62250eef491b6e4ed56b5b0e1', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: 'e3af04a049701785eddba2142ca9c3d9f376eda8', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'e9a101f204201023c4c62539578cb408adccde85', name: "icon" }))), !hideLabel && h("span", { key: 'e08c03769f2981aac46e02c8519d06bb1b88c801', class: "button__label" }, this.label), hasTag && (h("span", { key: '5fa04e35b9980d2f6684ba3bf40006053d204949', class: "button__tag" }, h("slot", { key: 'b9cab88a1ab1e53f3f1240d1bd32cb0175cc261f', name: "tag" }))))));
     }
     get el() { return this; }
-    static get style() { return SwirlButtonStyle0; }
+    static get style() { return swirlButtonCss; }
 }, [6, "swirl-button", {
         "elevated": [4],
         "disabled": [4],

package/dist/components/swirl-card.js

@@ -2,7 +2,6 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classNames } from './index2.js';
 
 const swirlCardCss = ":host{display:contents}:host *{box-sizing:border-box}.card{--swirl-ghost-button-background-default:var(--s-surface-default);--swirl-ghost-button-background-hovered:var(--s-surface-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-pressed);--swirl-resource-list-item-background-default:var(--s-surface-default);--swirl-resource-list-item-background-hovered:var(--s-surface-hovered);--swirl-resource-list-item-background-pressed:var(--s-surface-pressed);position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{--swirl-resource-list-item-background-default:var(\n    --s-surface-raised-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-raised-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-raised-pressed\n  );--swirl-ghost-button-background-default:var(--s-surface-raised-default);--swirl-ghost-button-background-hovered:var(--s-surface-raised-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-raised-pressed);background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}";
-const SwirlCardStyle0 = swirlCardCss;
 
 const swirlCardBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCard extends HTMLElement {
@@ -13,27 +12,9 @@ const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCard extends HTM
         this.componentLoad = createEvent(this, "componentLoad", 7);
         this.as = "div";
         this.borderRadius = "base";
-        this.customBackgroundColor = undefined;
-        this.elevated = undefined;
         this.elevationLevel = 3;
-        this.height = undefined;
-        this.highlighted = undefined;
-        this.href = undefined;
-        this.imageAspectRatio = undefined;
         this.intent = "default";
-        this.isBorderless = undefined;
-        this.interactive = undefined;
         this.justifyContent = "start";
-        this.linkTarget = undefined;
-        this.minHeight = undefined;
-        this.overflow = undefined;
-        this.padding = undefined;
-        this.paddingBlockEnd = undefined;
-        this.paddingBlockStart = undefined;
-        this.paddingInlineEnd = undefined;
-        this.paddingInlineStart = undefined;
-        this.swirlAriaLabel = undefined;
-        this.swirlAriaLabelledby = undefined;
         this.flashing = false;
     }
     /**
@@ -96,7 +77,7 @@ const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCard extends HTM
                 : undefined, style: styles, target: this.linkTarget }, h("div", { key: '31c2805728761dfcb0c52a40ca35dde8db717395', class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { key: 'acad13c8d0ae94025b38efdceb3f57c08c46e1ea', name: "image" })), h("div", { key: 'acb6863ba75f792b6b63d345d21a5501d2606ae9', class: "card__floating-controls" }, h("slot", { key: '4ea72ed42dfb59b4e2d6a756084a51731811ac8f', name: "floating-controls" })), h("div", { key: '58ec0bd8db851413e5f00bc7f68fe0c7c180ebdc', class: "card__body", style: bodyStyles }, h("div", { key: '8cca2590d51f405927f0632abe25e63e681e7175', class: "card__content" }, h("slot", { key: '012022e6119ae081a3fac9edade9c8f8789635ad', name: "content" }))))));
     }
     get el() { return this; }
-    static get style() { return SwirlCardStyle0; }
+    static get style() { return swirlCardCss; }
 }, [1, "swirl-card", {
         "as": [1],
         "borderRadius": [1, "border-radius"],

package/dist/components/swirl-carousel-slide.js

@@ -2,16 +2,12 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classNames } from './index2.js';
 
 const swirlCarouselSlideCss = ":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%}";
-const SwirlCarouselSlideStyle0 = swirlCarouselSlideCss;
 
 const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouselSlide extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.aspectRatio = undefined;
-        this.label = undefined;
-        this.minHeight = undefined;
         this.width = "15.5rem";
     }
     render() {
@@ -24,7 +20,7 @@ const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouse
                 minHeight: this.minHeight,
             }, tabIndex: 0 }, h("slot", { key: '3648067d02370a7c2710bbc2adfa65c4db42f02b' })));
     }
-    static get style() { return SwirlCarouselSlideStyle0; }
+    static get style() { return swirlCarouselSlideCss; }
 }, [1, "swirl-carousel-slide", {
         "aspectRatio": [1, "aspect-ratio"],
         "label": [1],

package/dist/components/swirl-carousel.js

@@ -4,7 +4,6 @@ import { d as debounce } from './utils.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 
 const swirlCarouselCss = ":host{--swirl-carousel-spacing:var(--s-space-16);--swirl-carousel-fade-color:var(--s-background-default);position:relative;display:block;overflow:hidden;width:100%}:host(:hover) .carousel__previous-slide-button,:host(:hover) .carousel__next-slide-button{pointer-events:auto}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel:before,.carousel:after{position:absolute;z-index:1;top:0;width:var(--s-space-32);height:100%;content:\"\";transition:opacity 0.2s;pointer-events:none;opacity:0}.carousel:before{left:0;background:linear-gradient(\n      90deg,\n      var(--swirl-carousel-fade-color) 0%,\n      transparent 100%\n    )}.carousel:after{right:0;background:linear-gradient(\n      270deg,\n      var(--swirl-carousel-fade-color) 0%,\n      transparent 100%\n    )}.carousel--fade:before,.carousel--fade:after{opacity:1}.carousel--is-at-start:before,.carousel--is-at-end:after{opacity:0}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*:not(:first-of-type)){margin-left:var(--swirl-carousel-spacing)}.carousel__slides ::slotted(*){flex-grow:0;flex-shrink:0;scroll-snap-align:start}.carousel__previous-slide-button,.carousel__next-slide-button{position:absolute;z-index:2;top:50%;transform:translateY(-50%) scale(0.72);pointer-events:none}.carousel__previous-slide-button{left:var(--s-space-4)}.carousel__next-slide-button{right:var(--s-space-4)}";
-const SwirlCarouselStyle0 = swirlCarouselCss;
 
 const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel extends HTMLElement {
     constructor() {
@@ -12,6 +11,13 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
         this.__registerHost();
         this.__attachShadow();
         this.activeSlidesChange = createEvent(this, "activeSlidesChange", 7);
+        this.nextSlideButtonLabel = "Next slide";
+        this.previousSlideButtonLabel = "Previous slide";
+        this.fade = false;
+        this.fadeColor = "default";
+        this.loopAround = false;
+        this.padding = "16";
+        this.spacing = "16";
         this.activeSlides = [];
         this.carouselFadeColorMap = {
             default: "var(--s-background-default)",
@@ -43,21 +49,6 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
             this.updateActiveSlideReferences();
             this.checkScrollPosition();
         };
-        this.label = undefined;
-        this.nextSlideButtonLabel = "Next slide";
-        this.previousSlideButtonLabel = "Previous slide";
-        this.fade = false;
-        this.fadeColor = "default";
-        this.loopAround = false;
-        this.padding = "16";
-        this.paddingBlockEnd = undefined;
-        this.paddingBlockStart = undefined;
-        this.paddingInlineEnd = undefined;
-        this.paddingInlineStart = undefined;
-        this.spacing = "16";
-        this.isAtEnd = undefined;
-        this.isAtStart = undefined;
-        this.isScrollable = undefined;
     }
     onWindowResize() {
         this.checkScrollStatus();
@@ -171,7 +162,7 @@ const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel ext
         return (h(Host, { key: '455ff284d8c95ca37ebbfaa3efeccfa0a4eced53', "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { key: '576af4479a93ed30ac2ca67b4d32f3559f075125', class: className }, this.isScrollable && !this.isAtStart && (h("swirl-button", { key: 'e32e058989e1d95e36d97b58b8da8deebd9a8468', class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { key: '8544229fe77186f043315fbc50e463ebc84197bf', class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { key: 'ccccbc484f6ae31f2bf63782005bc994b42d325a', "aria-live": "polite", class: "carousel__slides", style: slidesStyles, onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'bbff9ce6b8c0e05002cf85d3955fb72acb309a87', onSlotchange: this.onSlotChange })))));
     }
     get el() { return this; }
-    static get style() { return SwirlCarouselStyle0; }
+    static get style() { return swirlCarouselCss; }
 }, [1, "swirl-carousel", {
         "label": [1],
         "nextSlideButtonLabel": [1, "next-slide-button-label"],

package/dist/components/swirl-checkbox.js

@@ -4,30 +4,21 @@ import { d as defineCustomElement$3 } from './swirl-icon-check-strong2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
 const swirlCheckboxCss = ".sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.checkbox--variant-card.sc-swirl-checkbox:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),\n      0 0 0 0.25rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:none}.checkbox--variant-card.sc-swirl-checkbox:hover:not(.checkbox--disabled){background-color:var(--s-surface-hovered)}.checkbox--variant-card.sc-swirl-checkbox:active:not(.checkbox--disabled){background-color:var(--s-surface-pressed)}.checkbox--variant-card.checkbox--checked.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-highlight)}.checkbox--variant-card.checkbox--invalid.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-critical)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox--label-weight-regular.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-regular)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);align-items:flex-start;flex-direction:column}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
-const SwirlCheckboxStyle0 = swirlCheckboxCss;
 
 const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCheckbox extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.valueChange = createEvent(this, "valueChange", 7);
+        this.checked = false;
+        this.disabled = false;
+        this.labelWeight = "medium";
+        this.variant = "default";
         this.onChange = () => {
             this.checked =
                 this.checked === true || this.checked === "true" ? false : true;
             this.valueChange.emit(this.checked);
         };
-        this.checked = false;
-        this.description = undefined;
-        this.disabled = false;
-        this.swirlAriaDescribedby = undefined;
-        this.swirlAriaLabel = undefined;
-        this.inputId = undefined;
-        this.inputName = undefined;
-        this.invalid = undefined;
-        this.label = undefined;
-        this.labelWeight = "medium";
-        this.value = undefined;
-        this.variant = "default";
     }
     getAriaCheckedLabel(checked, unchecked) {
         if (checked) {
@@ -56,7 +47,7 @@ const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCheckbox ext
         });
         return (h(Host, { key: '678ea990bd9fe0d3db3c48372a7a34d48dff2d00', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '7034996fb426722179792d3a0c47804d137d530e', class: className, htmlFor: this.inputId }, h("span", { key: 'ca8596a7dd921f8ef3a7e60ed0d7c164eb94d4bc', class: "checkbox__control" }, h("swirl-visually-hidden", { key: '3ec6ced18278385e8e5fe4c84938cdd80397782f' }, h("input", { key: '83ceed4941de2152204ba4cc7ab207a4523ffef3', "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { key: '254e1a71e83e67415e571b9ae63076954e8a4f66', "aria-hidden": "true", class: "checkbox__box" }, h("span", { key: 'ec1004329eb2c8f074e7bb79deeb44b33e129841', class: "checkbox__icon" }, checked && h("swirl-icon-check-strong", { key: 'c0bc328e436dfac5309f5bc1410492edbf5396ed' }), indeterminate && (h("span", { key: '04c1f9c3bcd98ccb85671dec4616e1da03100789', class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (h("span", { key: '51f607d635ce44a09a936f9809e7a3d439d9a981', class: "checkbox__label-container" }, this.label && h("span", { key: 'fc52f9ab78dc555ce4cad9f2f6e31720c84059eb', class: "checkbox__label" }, this.label), this.description && (h("span", { key: 'e1e07e745fea0d5be76ae92f463c5908172c8772', class: "checkbox__description" }, this.description)))))));
     }
-    static get style() { return SwirlCheckboxStyle0; }
+    static get style() { return swirlCheckboxCss; }
 }, [2, "swirl-checkbox", {
         "checked": [1032],
         "description": [1],

package/dist/components/swirl-chip.js

@@ -5,7 +5,6 @@ import { d as defineCustomElement$3 } from './swirl-icon-close2.js';
 import { d as defineCustomElement$2 } from './swirl-progress-indicator2.js';
 
 const swirlChipCss = ".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)}";
-const SwirlChipStyle0 = swirlChipCss;
 
 const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTMLElement {
     constructor() {
@@ -13,20 +12,15 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
         this.__registerHost();
         this.chipClick = createEvent(this, "chipClick", 7);
         this.removeChip = createEvent(this, "remove", 7);
-        this.mediaQueryUnsubscribe = () => { };
         this.borderRadius = "pill";
-        this.icon = undefined;
         this.iconColor = "default";
         this.intent = "default";
         this.interactive = false;
-        this.label = undefined;
-        this.progress = undefined;
-        this.pressed = undefined;
         this.progressBarLabel = "Loading progress";
-        this.removable = undefined;
         this.removeButtonLabel = "Remove";
         this.size = "m";
         this.variant = "outline";
+        this.mediaQueryUnsubscribe = () => { };
     }
     componentDidLoad() {
         this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
@@ -57,7 +51,7 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
         return (h(Host, { key: 'aacfe2b81480beb943d294ac98858014b53e7d9c' }, h(Tag, { key: 'fe3ed0c535267aaf8d5add2ba73b1ab017202a5a', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, h("span", { key: '0e55458a8c3841ed02994ba7c105036424923018', class: "chip__inner" }, showAvatar && (h("span", { key: '6065e1ebed3ec0f236195b682ba12e85684de876', class: "chip__avatar" }, h("slot", { key: '950dd5ad2213171c4eae631c1e95c75647ec5ee2', name: "avatar" }))), showIcon && (h("span", { key: '118532298ad5ada83f2cfb15f571cc2ee857d3bd', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '22fa5011815883c566d59b59008a8af87077fc30', class: "chip__label" }, this.label)), this.progress !== undefined && (h("span", { key: '623b2f0fcc739776ef0eb46ac0cf91a3912a24f3', class: "chip__progress-indicator" }, h("swirl-progress-indicator", { key: 'dcb29d9a57a76190704b63917d443c23f3892224', label: this.progressBarLabel, value: this.progress })))), this.removable && (h("button", { key: '722397ffd1828842a1f5848d65c2c6c18a9b7893', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, h("swirl-icon-close", { key: 'd96fea1d3acd2b549197808c6563d574836a278b', size: 20 })))));
     }
     get el() { return this; }
-    static get style() { return SwirlChipStyle0; }
+    static get style() { return swirlChipCss; }
 }, [6, "swirl-chip", {
         "borderRadius": [1, "border-radius"],
         "icon": [1],

package/dist/components/swirl-color-input.js

@@ -275,11 +275,11 @@ class Saturation extends Slider {
     }
 }
 
-const css = `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;
+var css = `:host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}`;
 
-const hueCss = `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;
+var hueCss = `[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}`;
 
-const saturationCss = `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;
+var saturationCss = `[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}`;
 
 const $isSame = Symbol('same');
 const $color = Symbol('color');
@@ -389,7 +389,6 @@ class HexColorPicker extends HexBase {
 customElements.define('hex-color-picker', HexColorPicker);
 
 const swirlColorInputCss = ".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}";
-const SwirlColorInputStyle0 = swirlColorInputCss;
 
 const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput extends HTMLElement$1 {
     constructor() {
@@ -398,6 +397,8 @@ const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput
         this.inputBlur = createEvent(this, "inputBlur", 7);
         this.inputFocus = createEvent(this, "inputFocus", 7);
         this.valueChange = createEvent(this, "valueChange", 7);
+        this.pickerButtonLabel = "Open color picker";
+        this.pickerLabel = "Color picker";
         this.pickerId = `color-picker-${v4()}`;
         this.onPickerChange = (event) => {
             this.value = event.detail.value;
@@ -416,17 +417,6 @@ const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput
         this.onInput = (event) => {
             this.onChange(event);
         };
-        this.autoFocus = undefined;
-        this.autoSelect = undefined;
-        this.disabled = undefined;
-        this.swirlAriaDescribedby = undefined;
-        this.inline = undefined;
-        this.invalid = undefined;
-        this.pickerButtonLabel = "Open color picker";
-        this.pickerLabel = "Color picker";
-        this.placeholder = undefined;
-        this.required = undefined;
-        this.value = undefined;
     }
     componentDidLoad() {
         // see https://stackoverflow.com/a/27314017
@@ -467,7 +457,7 @@ const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput
     static get watchers() { return {
         "value": ["watchValue"]
     }; }
-    static get style() { return SwirlColorInputStyle0; }
+    static get style() { return swirlColorInputCss; }
 }, [2, "swirl-color-input", {
         "autoFocus": [4, "auto-focus"],
         "autoSelect": [4, "auto-select"],

package/dist/components/swirl-columns.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const swirlColumnsCss = ":host{display:block}:host *{box-sizing:border-box}.columns{display:grid;width:100%}";
-const SwirlColumnsStyle0 = swirlColumnsCss;
 
 const SwirlColumns$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColumns extends HTMLElement {
     constructor() {
@@ -9,7 +8,6 @@ const SwirlColumns$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColumns exten
         this.__registerHost();
         this.__attachShadow();
         this.columns = "repeat(3, minmax(0, 1fr))";
-        this.spacing = undefined;
     }
     render() {
         return (h(Host, { key: 'ce1826ac58a146237bb04b85f2d9ac93acfcb2db' }, h("div", { key: 'bfd1b19b96669e972b6e9afe9e5c2fe60a49c934', class: "columns", style: {
@@ -17,7 +15,7 @@ const SwirlColumns$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColumns exten
                 gap: `var(--s-space-${this.spacing})`,
             } }, h("slot", { key: '3e3f34b8aeb09057a17645bfca47cc4ade17cda2' }))));
     }
-    static get style() { return SwirlColumnsStyle0; }
+    static get style() { return swirlColumnsCss; }
 }, [1, "swirl-columns", {
         "columns": [1],
         "spacing": [1]