@getflip/swirl-components 0.232.0 → 0.233.1

package/dist/components/file-manager.js

@@ -90,7 +90,7 @@ const FileManager$1 = /*@__PURE__*/ proxyCustomElement(class FileManager extends
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: 'c0eb98fdfc638cc1dcb06483b59c34073ba54552' }, h("swirl-app-layout", { key: '556761b8d4f4d437ae0985c790a22e60c9315f1d', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '39885e858c41e429cab968112aa7b984f9705ea2', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '77c6ea5fe1b94028a5695e9d9ee632c36531fa0d', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '44c5aaa2536049f775c618dce507b3958e7cdd2a', label: "Sort items" })), h("swirl-stack", { key: 'f67fa0a23d84b5d8ee934abc92ca510d566a9ca8', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '6db42bf7b5f71cf829392ad4a0c93d8dd715180f' }, h("swirl-heading", { key: '8f78f58b16624d768574ca3cf210c8caae1207fa', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '8a08ec5e7ebbcf1b186a74782efe4e2255fe36ee', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '6c6e485139d39df02ededf75d8a8e6b010df2bb9', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: 'dae62a4ba25cae3853b62d81a000fed470e1ff2d', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '815594196ba28b9e8e434201d88dbf5a6dd85a87', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '3afe3f3e24a5b5462e9f6881c61522e1478c849f', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '9f2e84faef9a03e396c1dc668f330d2622c7697e', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: 'bc6a5c70fe046c88bab5464e7df49d3a20b3feb9', value: ["ascending"] }, h("swirl-option-list-item", { key: 'ec52b57885f7c33ca477ef8f6a505f57b31a6683', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '56e2c341fe923eb943777655d687a6410224a1d3', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: 'd51a2dbf1785bc86823b72c36facc0c2427b987b', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '3eff9c0bba9c10b143916cb3d00cedbc5bcfe050' }, h("swirl-app-layout", { key: '85f69e777a24d3362bc5eed4d724c54e1326c845', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '98d7da7702fdd4c4accb0e8249f2ccc5ecf55e29', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '16eb5271929830c6715f18b63b63588df73c11fe', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '59b711996f00146f8759376e8b8cabafcc76920c', label: "Sort items" })), h("swirl-stack", { key: 'c282643701ea09f60ec3eb79a703e9e4d098fbbd', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'bb0a446b2eb61a634ea0d791a87ce5d9f3ba6e0a' }, h("swirl-heading", { key: '41445130a7b9024c35db0df369c9ad5985c23a46', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'e159850b75591af14e56cdfcebbb270acb545add', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '56527b6068e3e6af690b851c1ee405f2e6561ed3', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '91be84a2271698f308c09b8dbfcfa9fdb0c67d41', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '8d9dcb8e0b2fa44fa7a57892edbe262150f0750b', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '9958d84992b0dcf5a079d924b6e3e02bb2b8f544', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'f5ceccc29d6488b528b32d363511731a38688a80', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '736355e26ee48634d7a6005b235fc9c5e0940746', value: ["ascending"] }, h("swirl-option-list-item", { key: '8f256bc83e158f1eb51b5e0d749a85fbba94eff1', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: '03092be4c5bf6c3363b95b06304a834c991d7cf5', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '21a718300bbc7ec8092a0c2c97844e56493f44cd', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 }, [1, "file-manager", {
         "selectedDirectory": [32],

package/dist/components/index.js

@@ -343,6 +343,8 @@ import { SwirlToastProvider } from './swirl-toast-provider.js';
 import { SwirlToolbar } from './swirl-toolbar.js';
 import { SwirlTooltip } from './swirl-tooltip.js';
 import { SwirlTreeNavigationItem } from './swirl-tree-navigation-item.js';
+import { SwirlTreeView } from './swirl-tree-view.js';
+import { SwirlTreeViewItem } from './swirl-tree-view-item.js';
 import { SwirlVideoThumbnail } from './swirl-video-thumbnail.js';
 import { SwirlVisuallyHidden } from './swirl-visually-hidden.js';
 import { WcDatepicker } from './wc-datepicker.js';
@@ -696,6 +698,8 @@ const defineCustomElements = (opts) => {
             SwirlToolbar,
             SwirlTooltip,
             SwirlTreeNavigationItem,
+            SwirlTreeView,
+            SwirlTreeViewItem,
             SwirlVideoThumbnail,
             SwirlVisuallyHidden,
             WcDatepicker,

package/dist/components/index2.js

@@ -1,4 +1,4 @@
-var classnames$1 = {exports: {}};
+var classnames = {exports: {}};
 
 /*!
   Copyright (c) 2018 Jed Watson.
@@ -54,8 +54,8 @@ var classnames$1 = {exports: {}};
 		window.classNames = classNames;
 	}
 }());
-}(classnames$1));
+}(classnames));
 
-const classnames = classnames$1.exports;
+const classNames = classnames.exports;
 
-export { classnames as c };
+export { classNames as c };

package/dist/components/swirl-accordion-item.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { d as defineCustomElement$3 } from './swirl-icon2.js';
 import { d as defineCustomElement$2 } from './swirl-text2.js';
 import { v as v4 } from './v4.js';
@@ -65,7 +65,7 @@ const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordi
     }
     render() {
         const HeadingTag = `h${this.headingLevel}`;
-        const className = classnames("accordion-item", {
+        const className = classNames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
         return (h(Host, { key: '11c14d9dfed09379d80099bf6f65ad7fd4e2abd1' }, h("div", { key: '528a89c896b091f2037cf9d84b81f3930eadce91', class: className }, h(HeadingTag, { key: '23536a431d58019eca2c40e0fce121dc00cc611f', class: "accordion-item__heading" }, h("button", { key: '4b5f8bba01228c8640a5ec19433299362de3777a', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '322983a1bb1eedd46543dd563a15c5f4317268e9', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'b4aba41917ab4274caf0b4f897017dd43113fde5', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '64e2fcd9102f2992077199f0fcfab14e77111fdf', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '8b9f2b492f6db1164cc4bde2ace9fa3a62440eb3', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'd19c09e37a42536ad74fc8144ee835a13db5f9fb', glyph: "expand-more", size: 20 }))))), h("div", { key: 'b2752a5e87fb19b21ca993487a75c3f0fa19e594', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '30c6f733029289d95bd4f8ea1acd432cc92956dc' })))));

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { g as getDesktopMediaQuery } from './utils.js';
 
 const swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{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-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
@@ -47,7 +47,7 @@ const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionLi
         const showBadge = Boolean(this.badge);
         const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
         const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
-        const className = classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
+        const className = classNames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
         return (h(Host, { key: '06605ecf01b587dbfb1de890ba776cdb72926c5b' }, h("button", { key: 'c70ad0ecbc3e58a6b5c8543c37907346f3301284', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && (h("span", { key: 'e250cabb8119ad251d4d3d70cd080408f2122d5d', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '28361e8c9cd8696c3661d7263d550a66c87fd26e', class: "action-list-item__label-container" }, h("span", { key: 'c8d504ca27d5ba2d1c8979ce45dda984c1e48436', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: '303dec5fe699a2c47a4e9e5417d06e3285a30d6f', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: '96c4500b611acc6a1cb40cbb8b6088deffb273b6', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '739d6e49ad6890a23c1b12eea9037da43c9c9e52', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: 'a391b536421efd55d4132772d143ec89e757c9d8', name: "suffix" }))))));
     }
     get el() { return this; }

package/dist/components/swirl-app-bar.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 
 const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}@media (min-width: 992px){.app-bar{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
@@ -56,7 +56,7 @@ const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends
     render() {
         const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
         const hasRightControls = Boolean(this.el.querySelector('[slot="right-controls"]'));
-        const className = classnames("app-bar", {
+        const className = classNames("app-bar", {
             "app-bar--has-cta": this.hasCta,
             "app-bar--has-right-controls": hasRightControls,
         });

package/dist/components/swirl-app-icon.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 
 const swirlAppIconCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}";
 const SwirlAppIconStyle0 = swirlAppIconCss;
@@ -24,7 +24,7 @@ const SwirlAppIcon$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppIcon exten
             (this.imageAvailable || this.imageAvailable === undefined);
         const showIcon = !showImage && Boolean(this.icon);
         const showFallbackIcon = !showImage && !showIcon;
-        const className = classnames("app-icon", {
+        const className = classNames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
         return (h(Host, { key: '937316f91558e4de6d0c4f6b7184f705d88fe6e7' }, h("span", { key: '03109a483290d210b5b2962bd1e06ef228551159', class: className }, showImage && (h("img", { key: 'e425539db0f95cf89ff0db1e7944b2d267fa6097', alt: "", height: "256", onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: "256" })), showIcon && (h("span", { key: '8c550c7bdf1588c81f212708b304858690db1ba8', class: "app-icon__icon", innerHTML: this.icon })))));

package/dist/components/swirl-app-layout2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { i as isMobileViewport, f as prefersReducedMotion } from './utils.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 import { d as defineCustomElement$1 } from './swirl-heading2.js';
@@ -184,7 +184,7 @@ const SwirlAppLayout = /*@__PURE__*/ proxyCustomElement(class SwirlAppLayout ext
         const hasCustomSidebarHeader = Boolean(this.el.querySelector('[slot="custom-sidebar-header"]'));
         const hasFloatingActionButton = Boolean(this.el.querySelector('[slot="floating-action-button"]')) ||
             Boolean(this.ctaLabel);
-        const className = classnames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
+        const className = classNames("app-layout", `app-layout--mobile-view-${this.mobileView}`, `app-layout--transitioning-from-${this.transitioningFrom}`, `app-layout--transitioning-to-${this.transitioningTo}`, `app-layout--transition-style-${this.transitionStyle}`, {
             "app-layout--has-app-bar-mobile-menu-button": hasAppBarMobileMenuButton,
             "app-layout--has-app-bar-controls": hasAppBarControls,
             "app-layout--has-bottom-bar": hasBottomBar,

package/dist/components/swirl-autocomplete.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.esm.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { d as debounce } from './utils.js';
 import { d as defineCustomElement$h } from './swirl-icon-cancel2.js';
 import { d as defineCustomElement$g } from './swirl-icon-check-small2.js';
@@ -220,7 +220,7 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
         const valueLabel = this.multiSelect
             ? undefined
             : this.value?.label || "";
-        const className = classnames("autocomplete", {
+        const className = classNames("autocomplete", {
             "autocomplete--inactive": !this.active,
         });
         return (h(Host, { key: 'e523e43c9a3f188b280212d75eb7cda439efa16a' }, h("div", { key: 'bc223dea7f5ee6dcfcb7ff1fec7548f3e70ba02f', class: className, onKeyDown: this.onKeyDown }, this.multiSelect &&

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 
 const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4));display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";
 const SwirlAvatarGroupStyle0 = swirlAvatarGroupCss;
@@ -25,10 +25,10 @@ const SwirlAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatarGro
         }
     }
     render() {
-        const className = classnames("avatar-group", {
+        const className = classNames("avatar-group", {
             "avatar-group--has-badge": Boolean(this.badge),
         });
-        const badgeClassName = classnames("avatar-group__badge");
+        const badgeClassName = classNames("avatar-group__badge");
         return (h(Host, { key: 'f16344ade441c4be4d7691d23d97fc5fc14dee0e' }, h("div", { key: 'b9436677d5c1bfe783500aa7db2d4e9dd4550cb7', class: className, role: "group" }, h("slot", { key: '9cfcfa7578ff29268f47547c6812a5ea0d492adc' }), this.badge && (h("span", { key: '534ee5051d37fefb0b7e097f2cbbb9017127cc25', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
     }
     static get style() { return SwirlAvatarGroupStyle0; }

package/dist/components/swirl-avatar.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-person2.js';
 
 const swirlAvatarCss = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-3xs{width:1.25rem;height:1.25rem;font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem;font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--size-2xl .avatar__tool{transform:none}.avatar--size-2xl .avatar__tool--position-top{transform:none}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}";
@@ -102,13 +102,13 @@ const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends
         const showFallbackIcon = !showImage && !showInitials && !showIcon;
         const showBadge = Boolean(this.badge) && this.size === "m";
         const role = this.interactive ? "button" : undefined;
-        const className = classnames("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+        const className = classNames("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
             "avatar--has-icon": showIcon || showFallbackIcon,
             "avatar--has-initials": showInitials,
             "avatar--interactive": this.interactive,
         });
-        const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
-        const toolClassName = classnames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
+        const badgeClassName = classNames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
+        const toolClassName = classNames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
         return (h(Host, { key: 'a846927adb4c374f3663f856b05d50603915502d', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: 'db1b5a6ae753350cb74562ebbcaffdcd1fe9b73a', class: className, part: "avatar" }, showImage && (h("span", { key: '92421d372f10ca75f3a4d40b5318ab88073f05ef', class: "avatar__image" }, h("img", { key: '7003338128d40de0ed8a97ed92c84d17d2b886f1', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '1b9fbbcee47c46c1264dbdefe20b71fe6edc91d7', class: "avatar__initials" }, h("span", { key: 'a41ef5f739b738726027bb0ba6cf9f6aca9808c8' }, this.initials))), showIcon && h("span", { key: '8b1933c8be2d2072824aeda245a771f84d7a9707', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: 'afc1c2e68873784d757587881cc05cfbb98f848a', class: "avatar__icon" }, h("swirl-icon-person", { key: '40a6e6fdc13ae07cb18ab9d0ac1fecfb092217f4' }))), showBadge && (h("span", { key: '69dc8a86df183237882c7241b0b73d7babfcf9fe', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '822c6123a6984406e709cfc6083070eaf35044e5', class: toolClassName }, h("slot", { key: 'd5e8246097832bf808fcb91dc5a822d1923db2a4', name: "tool" }))), this.showLabel && (h("span", { key: '10e6e09526bf6f3818ff5e54b270695adaf29e15', "aria-hidden": true, class: "avatar__label" }, this.label))));
     }
     get element() { return this; }

package/dist/components/swirl-badge2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+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}";
@@ -17,7 +17,7 @@ const SwirlBadge = /*@__PURE__*/ proxyCustomElement(class SwirlBadge extends HTM
         this.variant = "default";
     }
     render() {
-        const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
+        const className = classNames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
             "badge--has-icon": this.icon,
         });
         return (h(Host, { key: '33f35cb8399a9a9af91d771dff6b640b577c3b69', role: "status" }, h("span", { key: '95465982eb5690342abae2235b57644afd8cdd4d', class: className, part: "badge" }, this.icon && h("span", { key: '8a775d6ceb801d34380e82450879108dab4fcb37', 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))))));

package/dist/components/swirl-banner.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { g as getDesktopMediaQuery } from './utils.js';
 import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
 
@@ -60,7 +60,7 @@ const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class SwirlBanner extends
         const icon = this.determineIcon();
         const showControls = Boolean(this.actionLabel) || this.dismissable;
         const showIcon = this.icon || (this.showIcon && Boolean(icon));
-        const className = classnames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
+        const className = classNames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
             "banner--has-icon": showIcon,
         });
         return (h(Host, { key: '7d1d0fe808a0d56888901519a1d2c7d7a5953703' }, h("div", { key: '6f0482657ddd0b91ba5ca740db378e3fa5cad176', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '82bc8952ea7cc638a13eb8997492515280793e70', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: 'd2d6aa7d78d04fdb16a5d9d632fef49977400690', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '637f8d6f03aa8b9ed71798b60a2a8b6f68c96e6b', class: "banner__text" }, this.content)), showControls && (h("div", { key: '8c6ed8081c22c3f9121223ea2dc6bd3918f1babf', class: "banner__controls" }, this.actionLabel && (h("button", { key: 'afd0254e27d026a1f828ec203eed23a6934c8dbe', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: '7842e8dc33cfc78226ade9d5b8d141809efbb9e7', "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: '44118f5b5f92f476440b3adb6d33b3c88ef3b5a8' }))))))));

package/dist/components/swirl-box2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+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--bordered-block-end){border-block-end:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-block-start){border-block-start:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-inline-end){border-inline-end:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--bordered-inline-start){border-inline-start:var(--s-border-width-default) solid\n      var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}";
 const SwirlBoxStyle0 = swirlBoxCss;
@@ -80,7 +80,7 @@ const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLEle
             width: this.cover ? "100%" : this.width,
             zIndex: this.zIndex,
         };
-        const className = classnames("box", {
+        const className = classNames("box", {
             "box--bordered": this.bordered,
             "box--bordered-block-end": this.borderedBlockEnd,
             "box--bordered-block-start": this.borderedBlockStart,

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+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}";
@@ -17,7 +17,7 @@ const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class SwirlButtonGroup
     }
     render() {
         const spacing = this.segmented ? "0" : "8";
-        const className = classnames("button-group", {
+        const className = classNames("button-group", {
             "button-group--segmented": this.segmented,
         });
         return (h(Host, { key: '557c6898580f3ed020e594a92f3751478c5c3779' }, h("swirl-stack", { key: '7d6103e477a8f7ae88d48e7d1ece170d45c31456', align: this.orientation === "vertical" && this.stretch

package/dist/components/swirl-button2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { g as getDesktopMediaQuery } from './utils.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)}.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.sc-swirl-button:disabled{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{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus: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:not(:disabled){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(: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{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:not(: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-outline.sc-swirl-button{color:var(--s-text-default);box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.button--variant-outline.sc-swirl-button:disabled{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical);box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-highlight)}.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:not(: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:not(:disabled) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:not(:disabled){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:not(:disabled) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .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:not(:disabled){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:not(: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{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .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-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{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{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-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);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:not(: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:not(: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{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .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}";
@@ -88,7 +88,7 @@ const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends H
         const ariaLabel = this.getAriaLabel(hideLabel);
         const hasIcon = this.icon || Boolean(this.el.querySelector("[slot='icon']"));
         const hasTag = Boolean(this.el.querySelector("[slot='tag']"));
-        const className = classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
+        const className = classNames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
             "button--has-icon": hasIcon,
             "button--icon-only": hideLabel,
             "button--pill": this.pill,

package/dist/components/swirl-card.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+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);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)}.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__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)}";
 const SwirlCardStyle0 = swirlCardCss;
@@ -75,7 +75,7 @@ const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCard extends HTM
                 ? `var(--s-space-${this.paddingInlineStart})`
                 : undefined,
         };
-        const className = classnames("card", `card--elevation-level-${this.elevationLevel}`, `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
+        const className = classNames("card", `card--elevation-level-${this.elevationLevel}`, `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
             "card--elevated": this.elevated,
             "card--flashing": this.flashing,
             "card--has-image": hasImage,

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+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;
@@ -14,7 +14,7 @@ const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouse
         this.width = "15.5rem";
     }
     render() {
-        const className = classnames("carousel-slide", {
+        const className = classNames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
         return (h(Host, { key: 'b64340fe67a804d87f260086010ce7b475757e0b', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", { key: '47ba79a64973df8b19fb3c67c5b4a92c733a44d7' })));

package/dist/components/swirl-checkbox.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { d as defineCustomElement$3 } from './swirl-icon-check-strong2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
@@ -47,7 +47,7 @@ const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCheckbox ext
         const ariaInvalid = this.invalid === true || this.invalid === false
             ? String(this.invalid)
             : undefined;
-        const className = classnames("checkbox", `checkbox--label-weight-${this.labelWeight}`, `checkbox--variant-${this.variant}`, {
+        const className = classNames("checkbox", `checkbox--label-weight-${this.labelWeight}`, `checkbox--variant-${this.variant}`, {
             "checkbox--checked": checked,
             "checkbox--disabled": this.disabled,
             "checkbox--indeterminate": indeterminate,

package/dist/components/swirl-chip.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { g as getDesktopMediaQuery } from './utils.js';
 import { d as defineCustomElement$3 } from './swirl-icon-close2.js';
 import { d as defineCustomElement$2 } from './swirl-progress-indicator2.js';
@@ -50,7 +50,7 @@ const SwirlChip$1 = /*@__PURE__*/ proxyCustomElement(class SwirlChip extends HTM
         const Tag = this.interactive || this.pressed !== undefined ? "button" : "span";
         const showAvatar = Boolean(this.el.querySelector('[slot="avatar"]'));
         const showIcon = !showAvatar && Boolean(this.icon);
-        const className = classnames("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
+        const className = classNames("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 !== undefined,
             "chip--interactive": this.interactive || this.pressed !== undefined,

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { d as defineCustomElement$4 } from './swirl-box2.js';
 import { d as defineCustomElement$3 } from './swirl-popover2.js';
 import { d as defineCustomElement$2 } from './swirl-popover-trigger2.js';
@@ -455,7 +455,7 @@ const SwirlColorInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlColorInput
         const ariaInvalid = this.invalid === true || this.invalid === false
             ? String(this.invalid)
             : undefined;
-        const className = classnames("color-input", {
+        const className = classNames("color-input", {
             "color-input--inline": this.inline,
         });
         return (h(Host, { key: '4ca17afe5b50d24b416ea733002f276d8fb70711' }, h("div", { key: '6c1f470367d7763af551c9165d47db17e311d02d', class: className }, h("input", { key: '2a66462a91ab377d737ffc8ba728cf5130aeefb8', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, 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: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value }), h("swirl-popover-trigger", { key: '6d90ddb69f523f7247648e252f6ad9fa070b84f7', swirlPopover: this.pickerId }, h("button", { key: '9e5539e693c42cc7d2443e55e0b7d57e67617568', "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {

package/dist/components/swirl-console-layout.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { i as isMobileViewport } from './utils.js';
 import { d as defineCustomElement$4 } from './swirl-button2.js';
 import { d as defineCustomElement$3 } from './swirl-heading2.js';
@@ -122,7 +122,7 @@ const SwirlConsoleLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlConsole
                 width: "100%",
             }
             : undefined;
-        const className = classnames("console-layout", {
+        const className = classNames("console-layout", {
             "console-layout--sidebar-active": this.sidebarActive,
             "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
         });

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { p as parse, i as isValid, f as format, m as maska } from './maska.js';
 import { g as getDesktopMediaQuery, i as isMobileViewport } from './utils.js';
 import { d as defineCustomElement$6 } from './swirl-date-picker2.js';
@@ -155,7 +155,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
         const displayValue = isValid(dateValue)
             ? format(dateValue, this.format)
             : undefined;
-        const className = classnames("date-input", {
+        const className = classNames("date-input", {
             "date-input--inline": this.inline,
         });
         return (h(Host, { key: 'db4b7e8ee3bb1591be2dd9d047b0488fea64e291' }, h("div", { key: 'ba76203c10375791ff0d71604aece968139ab82b', class: className }, h("input", { key: 'ba8b462724747deb752cd9e01082c5b58fe174e8', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: '5979f6dd6915885d267b43099849f91b62ce355d', swirlPopover: `popover-${this.id}` }, h("button", { key: '4cc43dcf9d966899c60ec7ec52bf7c1c06be1b76', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '59eef5f027ffa65d6ec19a2b4fab0bf94fffaec7', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'c13ff08277fca8afa05d3fa640e73d89060bef5a', animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: 'a81bed829f465247ab47663ae5d5fe32310638a1', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));

package/dist/components/swirl-description-list-item.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { d as defineCustomElement$3 } from './swirl-icon-info2.js';
 import { d as defineCustomElement$2 } from './swirl-tooltip2.js';
 
@@ -19,7 +19,7 @@ const SwirlDescriptionListItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlD
     render() {
         const hasTools = Boolean(this.el.querySelector('[slot="tools"]'));
         const hasAdditionalContent = Boolean(this.el.querySelector('[slot="additional-content"]'));
-        const className = classnames("description-list-item", {
+        const className = classNames("description-list-item", {
             "description-list-item--bordered": this.bordered,
             "description-list-item--has-additional-content": hasAdditionalContent,
             "description-list-item--has-tools": hasTools,

package/dist/components/swirl-dialog.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { A as A11yDialog } from './a11y-dialog.esm.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { d as defineCustomElement$2 } from './swirl-button2.js';
 
 const swirlDialogCss = ":host{display:block}:host *{box-sizing:border-box}.dialog{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden=\"true\"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{animation:none}}.dialog:not(.dialog--closing) .dialog__body{animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{animation:none}}.dialog--closing{animation:0.15s dialog-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-16);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__body{width:25rem;border-radius:var(--s-border-radius-base)}}@media (min-width: 992px){.dialog__body{text-align:start}}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);padding-right:var(--s-space-8);padding-left:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__heading{line-height:var(--s-line-height-base)}}.dialog__content{margin-bottom:var(--s-space-20);padding-right:var(--s-space-8);padding-left:var(--s-space-8);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px){.dialog__content{margin-bottom:var(--s-space-24)}}.dialog__controls{display:flex;flex-wrap:wrap;justify-content:stretch;gap:var(--s-space-8)}.dialog__controls>*{flex-grow:1}@media (min-width: 992px){.dialog__controls>*{flex-grow:0}}@media (min-width: 992px){.dialog__controls{justify-content:flex-end}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";
@@ -72,7 +72,7 @@ const SwirlDialog$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDialog extends
         }, 150);
     }
     render() {
-        const className = classnames("dialog", { "dialog--closing": this.closing });
+        const className = classNames("dialog", { "dialog--closing": this.closing });
         return (h(Host, { key: 'a479a8b294450830e04247b7d29e6cadbf7f775c' }, h("div", { key: '47d0b859590c6c15afd21e388ca3ffb84a3e5118', "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, h("div", { key: '017e3c6944ec7b262a18caae4837533fddb92c91', class: "dialog__backdrop", onClick: this.onBackdropClick }), h("div", { key: '9ac5955b7693c065818b25b36626d9739c94d840', class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (h("h2", { key: '9b001136a2453ea11dcbc7506fb3d2507a9a0231', class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), h("div", { key: 'b031c9502ae683d91892418d03b7c9344a7f0325', class: "dialog__content", part: "dialog__content", id: "content" }, h("slot", { key: '09e6fd5009b33263031f6230e04a8f83a9cee807' })), h("div", { key: '35d45d6c5a667b53cfd4afed58d8393a798bc6f2', class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (h("swirl-button", { key: '5cd580534a90ad420c17a9346d4002462e58c371', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (h("swirl-button", { key: 'f3cfcac8d46cc0c0add1740a31d692db932a4431', intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))));
     }
     static get style() { return SwirlDialogStyle0; }

package/dist/components/swirl-emoji-clap.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 
 const swirlEmojiCss = ":host{display:inline-flex}";
 const SwirlEmojiClapStyle0 = swirlEmojiCss;
@@ -13,7 +13,7 @@ const SwirlEmojiClap$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiClap e
         this.size = 24;
     }
     render() {
-        const className = classnames("emoji", `emoji--size-${this.size}`);
+        const className = classNames("emoji", `emoji--size-${this.size}`);
         return (h(Fragment, { key: 'af0041492c1c5ffcb101d1491767551714be1bd9' }, this.size === 16 && (h("img", { key: 'a82cc92a70f644723fb98d2a21f3f3ecd3422855', alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (h("img", { key: 'ae22b35ec719e403234b1071ea7ed994ef48d4c8', alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (h("img", { key: '657d9e6837622a8caf01bbc3601ff56a06cc1c69', alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (h("img", { key: '32f618332cd723dfcb6cfd789528b886ae657a42', alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
     }
     static get style() { return SwirlEmojiClapStyle0; }

package/dist/components/swirl-emoji-happy.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 
 const swirlEmojiCss = ":host{display:inline-flex}";
 const SwirlEmojiHappyStyle0 = swirlEmojiCss;
@@ -13,7 +13,7 @@ const SwirlEmojiHappy$1 = /*@__PURE__*/ proxyCustomElement(class SwirlEmojiHappy
         this.size = 24;
     }
     render() {
-        const className = classnames("emoji", `emoji--size-${this.size}`);
+        const className = classNames("emoji", `emoji--size-${this.size}`);
         return (h(Fragment, { key: '51ae525573cbcb17769ecc50b13eafdf611ddbbb' }, this.size === 16 && (h("img", { key: '8054ec4a3b5406c3821414ab846efb0cc714c1af', alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (h("img", { key: '4b8ff616474664ed80d78b5aaac359b10aebf9c4', alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (h("img", { key: '983283ab8a9dc12115049beac7acbc67af5d26c2', alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (h("img", { key: '7a8f556faac85533526cf2853927399e5955cfbb', alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
     }
     static get style() { return SwirlEmojiHappyStyle0; }