@getflip/swirl-components 0.230.1 → 0.233.0

package/dist/components/swirl-image-grid.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 swirlImageGridCss = ":host{display:block}:host *{box-sizing:border-box}.image-grid{display:grid;overflow:hidden;width:100%;min-height:0;border-radius:var(--s-border-radius-sm);gap:var(--s-space-2)}.image-grid--item-count-1{grid-template-columns:100%;grid-template-rows:100%}.image-grid--item-count-2{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2))}.image-grid--item-count-3{grid-template-columns:calc(100% / 3 * 2 - var(--space-2) / 2) calc(\n      100% / 3 - var(--s-space-2) / 2\n    )}.image-grid--item-count-3 ::slotted(*:nth-child(1)){grid-column-start:1;grid-row-start:1;grid-row-end:3}.image-grid--item-count-3 ::slotted(*:nth-child(3)){grid-column-start:2}.image-grid--item-count-4{grid-template-columns:repeat(2, calc(50% - var(--s-space-2) / 2));grid-template-rows:repeat(2, calc(50% - var(--s-space-2) / 2))}";
 const SwirlImageGridStyle0 = swirlImageGridCss;
@@ -23,7 +23,7 @@ const SwirlImageGrid$1 = /*@__PURE__*/ proxyCustomElement(class SwirlImageGrid e
         this.updateItems();
     }
     render() {
-        const className = classnames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
+        const className = classNames("image-grid", `image-grid--item-count-${Math.min(4, this.items.length)}`);
         return (h(Host, { key: 'b2564d792fdbce7fcbc201eb4c677f89c04e0bd6' }, h("div", { key: '4b51439e745d894c1ec7c80f9c627c11717bba9e', "aria-label": this.label, class: className, role: "list", style: { aspectRatio: this.aspectRatio } }, h("slot", { key: '480e6c84034264b9e49ae8940513aae36d679949', onSlotchange: this.updateItems }))));
     }
     get el() { return this; }

package/dist/components/swirl-inline-error2.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';
 import { d as defineCustomElement$1 } from './swirl-icon-error2.js';
 
@@ -40,7 +40,7 @@ const SwirlInlineError = /*@__PURE__*/ proxyCustomElement(class SwirlInlineError
         icon?.setAttribute("size", iconSize);
     }
     render() {
-        const className = classnames("inline-error", `inline-error--size-${this.size}`);
+        const className = classNames("inline-error", `inline-error--size-${this.size}`);
         return (h(Host, { key: '2d7ddbb3db2a711644aa0c1c0dcc8efb668c5d42' }, h("span", { key: '4a21b384384e90c973890feb0d5529b1fbec41dd', class: className, part: "inline-error" }, h("span", { key: '98eb3f9280636eedd64760cc7ced9f44d8273425', class: "inline-error__icon", ref: (el) => (this.iconEl = el) }, h("swirl-icon-error", { key: '8bec0928b899c208c3f16cfaed56d2488f185ff8' })), h("span", { key: '1c8913d1fae663bc5b4aad8d938aee6457226965', class: "inline-error__message" }, this.message))));
     }
     static get style() { return SwirlInlineErrorStyle0; }

package/dist/components/swirl-inline-notification.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$6 } from './swirl-icon-check-circle2.js';
 import { d as defineCustomElement$5 } from './swirl-icon-error2.js';
 import { d as defineCustomElement$4 } from './swirl-icon-info2.js';
@@ -19,7 +19,7 @@ const SwirlInlineNotification$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIn
         this.intent = "info";
     }
     render() {
-        const className = classnames("inline-notification", `inline-notification--intent-${this.intent}`);
+        const className = classNames("inline-notification", `inline-notification--intent-${this.intent}`);
         return (h(Host, { key: '4d79ac271aa6469d5c8464c3a09e57d35fc033dc' }, h("div", { key: '4bc1f4870a5783b549211a23d2c5acf86bee7dc8', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("span", { key: 'abd6d3c23ec81aaee833f734cf40c735c8f5b0c5', "aria-hidden": "true", class: "inline-notification__icon" }, this.intent === "critical" && (h("swirl-icon-error", { key: '5d11a62e045b797b55f152e8f53271a5309881d6', size: 20 })), this.intent === "success" && (h("swirl-icon-check-circle", { key: '28bf6ed1856c5158520263e9a6f9a87b9ada7dda', size: 20 })), this.intent === "warning" && (h("swirl-icon-warning", { key: '69b531d7296b2561cca8c0d7a3782fd845e151d4', size: 20 })), this.intent === "info" && (h("swirl-icon-info", { key: 'd047126e51adc886e0745cb20e1b3517019e3c22', size: 20 }))), h("span", { key: '49ce64607550bdae14e9fe0cf1697d37f59069d4', class: "inline-notification__content", id: "content" }, h("swirl-text", { key: '55c08d447cb9fb668eada6611f9a583e895bda0e', class: "inline-notification__heading", size: "sm", weight: "semibold" }, this.heading), h("slot", { key: '8fbf2d78d8ec4e318f75275e497eafec6d562f55' })))));
     }
     static get style() { return SwirlInlineNotificationStyle0; }

package/dist/components/swirl-inline-status.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 swirlInlineStatusCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.inline-status{display:inline-flex;color:var(--s-text-default);line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.inline-status--size-s{font-size:var(--s-font-size-sm)}.inline-status--size-s .inline-status__icon{width:1rem;height:1rem;margin-top:0.125rem}.inline-status--size-s .inline-status__message{padding-top:0}.inline-status--intent-critical{color:var(--s-text-critical)}.inline-status--intent-critical .inline-status__icon{color:var(--s-icon-critical)}.inline-status--intent-info{color:var(--s-text-info)}.inline-status--intent-info .inline-status__icon{color:var(--s-icon-info)}.inline-status--intent-neutral{color:var(--s-text-subdued)}.inline-status--intent-neutral .inline-status__icon{color:var(--s-icon-default)}.inline-status--intent-success{color:var(--s-text-success)}.inline-status--intent-success .inline-status__icon{color:var(--s-icon-success)}.inline-status--intent-warning{color:var(--s-text-warning)}.inline-status--intent-warning .inline-status__icon{color:var(--s-icon-warning)}.inline-status__icon{display:inline-flex;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);color:var(--s-icon-default);align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__icon{width:1.25rem;height:1.25rem}}.inline-status__message{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.inline-status__message{padding-top:0}}";
@@ -45,7 +45,7 @@ const SwirlInlineStatus$1 = /*@__PURE__*/ proxyCustomElement(class SwirlInlineSt
         icon.setAttribute("size", iconSize);
     }
     render() {
-        const className = classnames("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
+        const className = classNames("inline-status", `inline-status--intent-${this.intent}`, `inline-status--size-${this.size}`);
         return (h(Host, { key: 'fe0723967885cc882cadbdc3d46530ca18ce3b05' }, h("span", { key: '23e3cc77fa189a68120c877f5d53bc1b69ad07d0', class: className, part: "inline-status" }, this.icon && (h("span", { key: 'a0a68a0c617d9d5d6b58a9bcd26950016e237691', class: "inline-status__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '0125076a5ce37f690a169cb39bb61b4bc74c9aa7', class: "inline-status__message" }, this.message))));
     }
     static get style() { return SwirlInlineStatusStyle0; }

package/dist/components/swirl-lightbox.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { c as createFocusTrap } from './focus-trap.esm.js';
 import { q as querySelectorAllDeep } from './utils.js';
 import { d as defineCustomElement$g } from './swirl-action-list2.js';
@@ -276,7 +276,7 @@ const SwirlLightbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLightbox ext
         const hasMenuItems = Boolean(this.el.querySelector("[slot='menu-items']")) ||
             this.downloadButtonEnabled;
         const hasToolbar = Boolean(this.el.querySelector("[slot='toolbar']"));
-        const className = classnames("lightbox", {
+        const className = classNames("lightbox", {
             "lightbox--closing": this.closing,
             "lightbox--hide-menu": !hasMenuItems,
             "lightbox--hide-toolbar": !hasToolbar,

package/dist/components/swirl-link.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 swirlLinkCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}";
 const SwirlLinkStyle0 = swirlLinkCss;
@@ -15,7 +15,7 @@ const SwirlLink$1 = /*@__PURE__*/ proxyCustomElement(class SwirlLink extends HTM
         this.target = undefined;
     }
     render() {
-        const className = classnames("link", `link--color-${this.color}`);
+        const className = classNames("link", `link--color-${this.color}`);
         return (h(Host, { key: '20fccde48e4bbf967f627b2176e94417d556daf8' }, h("a", { key: 'cf727f4cb2888210a18c359700537de74596c854', class: className, href: this.href, part: "link", target: this.target }, this.label)));
     }
     static get style() { return SwirlLinkStyle0; }

package/dist/components/swirl-menu-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 { c as closestPassShadow, p as parentsPassShadow } from './utils.js';
 import { d as defineCustomElement$6 } from './swirl-action-list-item2.js';
 import { d as defineCustomElement$5 } from './swirl-icon-check-small2.js';
@@ -105,7 +105,7 @@ const SwirlMenuItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenuItem ext
         return (h("swirl-option-list-item", { disabled: this.disabled, icon: this.icon, label: this.label, onClick: this.onOptionListItemClick, onKeyDown: this.onOptionListItemKeyDown, onKeyUp: this.onOptionListItemKeyUp, ref: (el) => (this.optionListItem = el), selected: this.parentMenu?.value === this.value, swirlAriaRole: "menuitemradio", value: this.value }));
     }
     render() {
-        const className = classnames("menu-item", {
+        const className = classNames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
         return (h(Host, { key: '33859b6684e71600e61d53375c78e59ebb620177' }, h("div", { key: '201ddbb3f74dd0e87d7a230e96021645a75cfb93', class: className }, this.parentMenu?.variant === "selection"

package/dist/components/swirl-menu.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as computePosition, o as offset, f as flip, a as autoUpdate } from './floating-ui.dom.esm.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { q as querySelectorAllDeep, c as closestPassShadow, p as parentsPassShadow, i as isMobileViewport, b as getActiveElement } from './utils.js';
 import { d as defineCustomElement$3 } from './swirl-button2.js';
 import { d as defineCustomElement$2 } from './swirl-heading2.js';
@@ -273,7 +273,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
         const ariaLabel = isTopLevelMenu && this.mobile ? undefined : this.label;
         const ariaLabelledby = isTopLevelMenu && this.mobile ? "menu-title" : undefined;
         const role = isTopLevelMenu ? "menubar" : "menu";
-        const className = classnames("menu", `menu--level-${this.level}`, {
+        const className = classNames("menu", `menu--level-${this.level}`, {
             "menu--active": this.active,
             "menu--mobile": this.mobile,
             "menu--root": isTopLevelMenu,

package/dist/components/swirl-modal.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { c as createFocusTrap } from './focus-trap.esm.js';
 import { d as defineCustomElement$5 } from './swirl-button2.js';
 import { d as defineCustomElement$4 } from './swirl-button-group2.js';
@@ -158,7 +158,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
     }
     render() {
         const showControls = Boolean(this.primaryActionLabel) || Boolean(this.secondaryActionLabel);
-        const className = classnames("modal", `modal--variant-${this.variant}`, {
+        const className = classNames("modal", `modal--variant-${this.variant}`, {
             "modal--closing": this.closing,
             "modal--has-custom-footer": this.hasCustomFooter,
             "modal--has-custom-header": this.hasCustomHeader,

package/dist/components/swirl-option-list-item2.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-check-small2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-check-strong2.js';
@@ -68,7 +68,7 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
         const showCheckbox = this.context === "multi-select";
         const showIcon = Boolean(this.icon) && this.context === "single-select";
         const showSelectionIcon = this.selected && this.context === "single-select";
-        const className = classnames("option-list-item", `option-list-item--context-${this.context}`, {
+        const className = classNames("option-list-item", `option-list-item--context-${this.context}`, {
             "option-list-item--disabled": this.disabled,
             "option-list-item--draggable": this.allowDrag,
             "option-list-item--dragging": this.dragging,

package/dist/components/swirl-pagination.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 debounce } from './utils.js';
 import { d as defineCustomElement$6 } from './swirl-button2.js';
 import { d as defineCustomElement$5 } from './swirl-icon-expand-more2.js';
@@ -94,7 +94,7 @@ const SwirlPagination$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPagination
         const showPageLabel = this.variant !== "simple";
         const showDropDown = this.variant === "advanced";
         const ariaPageLabel = `${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`;
-        const className = classnames("pagination", `pagination--variant-${this.variant}`);
+        const className = classNames("pagination", `pagination--variant-${this.variant}`);
         return (h(Host, { key: '19ef10f877c70e8ff494e02e2f4aa5517b08d174' }, h("nav", { key: '5444d4c520425cec52c306308080494990f80911', "aria-label": this.label, class: className }, h("ul", { key: 'def276c2ef95853df1ad271de739d5b0d866ce93', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: '03b027b48bdc30ab1749c1d0cf87695f38c009b7', class: "pagination__list-item" }, h("label", { key: '9b651fb7a48972ab433f98a6ab2a939654d21637', class: "pagination__page-size-selection" }, h("swirl-text", { key: '2be473479b617d2ed6f1beb918d2b6cb828b8f14' }, this.pageSizeSelectLabel), h("swirl-stack", { key: '2eaa59de79fac45847f61c5849fc9fef22e25a95', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: 'e4db400bf40baa6cafaaf6c5cdfc561fa9358cb1', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), h("swirl-icon-expand-more", { key: 'f427d80ecf63e91eeb9b81ac5a431609858265bc', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: '0d03e0be976c4aad6cfa859c02f75fff0310d1a7', class: "pagination__list-item" }, h("swirl-button", { key: 'a6c57c7adb05b54895db39c351a922abc7031a51', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), h("li", { key: '837c9d21d8f25eb3673a4deadf4c3036454335d4', class: "pagination__list-item" }, h("swirl-button", { key: '7f974e2774fb40fcaf35a8ea6a0675f2b9904ce8', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { key: 'eeed63aaaecf4e7f245e253aa395c7857dc320a5', class: "pagination__list-item" }, h("swirl-button", { key: 'c2ebb6e8d9333833832616d34781dc4c959c1e31', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), h("li", { key: '627ed42cf6d79604ca88d4441fc5ead9386b2bed', class: "pagination__list-item" }, h("swirl-button", { key: 'd6c53b82e9445f57a1b3f0629e9a98e8a7a93b6c', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
     }
     static get style() { return SwirlPaginationStyle0; }

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

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { A as A11yDialog } from './a11y-dialog.esm.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { q as querySelectorAllDeep, i as isMobileViewport } from './utils.js';
 import { d as defineCustomElement$t } from './swirl-action-list2.js';
 import { d as defineCustomElement$s } from './swirl-action-list-item2.js';
@@ -212,14 +212,14 @@ const SwirlPdfReader$1 = /*@__PURE__*/ proxyCustomElement(class SwirlPdfReader e
         const hasMenuItems = Boolean(this.el.querySelector("[slot='menu-items']")) ||
             this.printButtonEnabled ||
             this.downloadButtonEnabled;
-        const className = classnames("pdf-reader", {
+        const className = classNames("pdf-reader", {
             "pdf-reader--closing": this.closing,
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
         return (h(Host, { key: 'e88e8b86d5d6a6bcb28c5e62a81aeafc34467fa6' }, h("section", { key: 'b26561c5c61d74fead667abff2ac1b103f7cf76e', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'c41a6ee80af42d511df915d97f16d9973f84fa67', class: "pdf-reader__body", role: "document" }, h("header", { key: '3e6180722000c8d2fbf327455229fbd12969345c', class: "pdf-reader__header" }, h("span", { key: 'a20149eb971b2244366431b47a48cc5891f44441', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'd2c0648653d196ffae772b644a2fa157b8fa774d', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: 'a0c45eb8e768b6b0aa05d367cbdeef87fd3743f7', class: "pdf-reader__label" }, this.label)), h("span", { key: '93445b16f07e7d210054868bd0ccd53689f421b6', class: "pdf-reader__header-center" }, h("span", { key: '6835907fb25a004d5c21923aa8ea257eeddd9d39', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '0289de3234797b8f53bfa94c599cab70f935768b', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: '0af97936b127e04b4d844a70ac89fb64a59cc8c6', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: 'c732f61b8856f6954810456a808dfd18c593b042', class: "pdf-reader__zoom-select-container" }, h("select", { key: '12b3d71a5f96642cd52c720d67944ebc66dae932', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '4146c64670429608d91ca35820c642516a24dfd7', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: 'f2e9aa628806109804993a4492a9340a56a6bc4a', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '34bc7216688b1a36bb8beecc24fee5f02063ae08', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '30e01d410f0d3638ca8dc8439606b0b745067785', swirlPopover: this.menu }, h("swirl-button", { key: '6c77e61182220ff3f4abb631ff57a1d0d59ad195', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '554835274cc215832ea4f8b775d793262810b111', class: "pdf-reader__floating-tools" }, h("button", { key: '2bb625edf367522f530631ee1e84464a21dd78cf', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '0ba569fe48252bed9e7b75120816840ffa5027eb' })), h("button", { key: '04d6c8ae691e3a926f667da954677e2ba6aa1e5d', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: 'd104658df6b35671a655d10dcf236bbbf45b7afd' })))), h("div", { key: 'cca0fce2012980659d01bffa8c39ac437c648583', class: "pdf-reader__content" }, h("nav", { key: 'd6ecf05293c722dcbd4a329bcbc8535a590ea782', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: 'dcc729a2ed2d4907de434cc643dbe5016224dc34' }), !this.loadingThumbnails &&
             this.thumbnails.map((thumbnail, index) => {
-                const thumbnailClassName = classnames("pdf-reader__thumbnail", {
+                const thumbnailClassName = classNames("pdf-reader__thumbnail", {
                     "pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
                 });
                 return (h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index), type: "button" }, h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));

package/dist/components/swirl-popover2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { o as offset, s as shift, f as flip, c as computePosition, a as autoUpdate } from './floating-ui.dom.esm.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 import { i as isMobileViewport, q as querySelectorAllDeep, b as getActiveElement } from './utils.js';
 
 const swirlPopoverCss = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{animation:none}}.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;animation:0.15s popover-fade-scale-in-xy}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--closing .popover__backdrop{animation:0.15s popover-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{animation:none}}.popover--closing .popover__content{animation:0.15s popover-slide-out;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{animation:none}}.popover--inactive .popover__content{display:none}@media (max-width: 767px){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--active:not(.popover--closing) .popover__content{animation:none}}.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:0.15s popover-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--fullscreen-bottom-sheet.popover--closing .popover__content{animation:none}}.popover--fullscreen-bottom-sheet .popover__backdrop{display:none}.popover--fullscreen-bottom-sheet .popover__content{top:0;border-top-left-radius:0;border-top-right-radius:0}.popover--fullscreen-bottom-sheet .popover__scroll-container{height:100%;max-height:none;padding-top:0;padding-bottom:0}.popover--fullscreen-bottom-sheet .popover__handle{display:none}}@media (min-width: 768px){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-scale-in-y}}@media (prefers-reduced-motion){.popover--animation-scale-in-y.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:0.15s popover-fade-in}}@media (prefers-reduced-motion){.popover--animation-fade-in.popover--active:not(.popover--closing) .popover__content{animation:none}}@media (min-width: 768px){.popover--transparent .popover__content{background-color:transparent;box-shadow:none}}@media (min-width: 768px){.popover--transparent .popover__scroll-container{padding:0}}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-sm);animation:none;box-shadow:var(--s-shadow-level-2)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-scale-in-xy{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in-y{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}";
@@ -251,7 +251,7 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
     }
     render() {
         const mobile = !window.matchMedia("(min-width: 768px)").matches;
-        const className = classnames("popover", `popover--animation-${this.animation}`, `popover--placement-${this.position?.placement}`, {
+        const className = classNames("popover", `popover--animation-${this.animation}`, `popover--placement-${this.position?.placement}`, {
             "popover--active": this.active,
             "popover--closing": this.closing,
             "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,

package/dist/components/swirl-progress-indicator2.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 swirlProgressIndicatorCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}:host(.circle){display:inline-flex;width:auto}.progress-indicator--variant-bar{display:block;width:100%;height:0.25rem;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.progress-indicator--variant-bar::-webkit-progress-bar{border-radius:0.125rem;background-color:var(--s-surface-raised-default)}.progress-indicator--variant-bar::-webkit-progress-value{border-radius:0.125rem;background-color:var(--s-border-highlight);-webkit-transition:width 0.25s;transition:width 0.25s}.progress-indicator--variant-bar::-moz-progress-bar{height:0.25rem;border-radius:0.125rem;background-color:var(--s-border-highlight);-moz-transition:width 0.25s;transition:width 0.25s}@media (prefers-reduced-motion){.progress-indicator--variant-bar::-moz-progress-bar{-moz-transition:none;transition:none}}.progress-indicator--variant-bar.progress-indicator--size-s{height:0.125rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-bar{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-webkit-progress-value{border-radius:0.0625rem}.progress-indicator--variant-bar.progress-indicator--size-s::-moz-progress-bar{height:0.125rem;border-radius:0.0625rem}.progress-indicator--variant-circle{position:relative;display:inline-flex;overflow:hidden;width:3rem;height:3rem}.progress-indicator--variant-circle.progress-indicator--size-s{width:1.5rem;height:1.5rem}.progress-indicator__circle{position:absolute;width:100%;height:100%;transform:rotate(-90deg);inset:0}.progress-indicator__circle-background{stroke:var(--s-border-default);stroke-linecap:round}.progress-indicator__circle-value{transition:stroke-dashoffset 0.25s;stroke:var(--s-interactive-primary-default);stroke-linecap:round}@media (prefers-reduced-motion){.progress-indicator__circle-value{transition:none}}";
 const SwirlProgressIndicatorStyle0 = swirlProgressIndicatorCss;
@@ -15,7 +15,7 @@ const SwirlProgressIndicator = /*@__PURE__*/ proxyCustomElement(class SwirlProgr
         this.variant = "bar";
     }
     render() {
-        const className = classnames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
+        const className = classNames("progress-indicator", `progress-indicator--size-${this.size}`, `progress-indicator--variant-${this.variant}`);
         const strokeWidth = this.size === "m" ? 4 : 2;
         const radius = this.size === "m" ? 20 : 10;
         const circumference = Math.round(radius * 2 * Math.PI);

package/dist/components/swirl-radio.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-visually-hidden2.js';
 
 const swirlRadioCss = ".sc-swirl-radio-h{display:inline-flex}.sc-swirl-radio-h *.sc-swirl-radio{box-sizing:border-box}.radio.sc-swirl-radio{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.radio.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio{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)}.radio--variant-card.sc-swirl-radio:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),\n      0 0 0 0.25rem var(--s-focus-default)}.radio--variant-card.sc-swirl-radio:focus-within .radio__box.sc-swirl-radio{box-shadow:none}.radio--variant-card.sc-swirl-radio:hover:not(.radio--disabled){background-color:var(--s-surface-hovered)}.radio--variant-card.sc-swirl-radio:active:not(.radio--disabled){background-color:var(--s-surface-pressed)}.radio--variant-card.radio--checked.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-highlight)}.radio--variant-card.radio--invalid.sc-swirl-radio:not(.radio--disabled){border-color:var(--s-border-critical)}.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio,.radio--invalid.radio--indeterminate.sc-swirl-radio .radio__box.sc-swirl-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-swirl-radio{cursor:default}.radio--disabled.radio--checked.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-swirl-radio .radio__box.sc-swirl-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:transparent}.radio--disabled.sc-swirl-radio .radio__box.sc-swirl-radio{border-color:var(--s-icon-disabled)}.radio--disabled.sc-swirl-radio .radio__description.sc-swirl-radio,.radio--disabled.sc-swirl-radio .radio__label.sc-swirl-radio{color:var(--s-text-disabled)}.radio__control.sc-swirl-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-swirl-radio:hover .radio__box.sc-swirl-radio{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__control.sc-swirl-radio{width:1.375rem;height:1.375rem}}.radio__box.sc-swirl-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-swirl-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-swirl-radio{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__label.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.radio__description.sc-swirl-radio{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.radio__description.sc-swirl-radio{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
@@ -38,7 +38,7 @@ const SwirlRadio$1 = /*@__PURE__*/ proxyCustomElement(class SwirlRadio extends H
         const checked = this.checked === true || this.checked === "true";
         const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
         const ariaInvalid = this.invalid;
-        const className = classnames("radio", `radio--variant-${this.variant}`, {
+        const className = classNames("radio", `radio--variant-${this.variant}`, {
             "radio--checked": checked,
             "radio--disabled": this.disabled,
             "radio--invalid": this.invalid,

package/dist/components/swirl-resource-list-file-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 { g as getDesktopMediaQuery } from './utils.js';
 import { d as defineCustomElement$6 } from './swirl-button2.js';
 import { d as defineCustomElement$5 } from './swirl-icon-error2.js';
@@ -46,7 +46,7 @@ const SwirlResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class Swirl
         const showDescription = !showError && Boolean(this.description);
         const showSpinner = !showError && this.loading;
         const showRemoveButton = this.removable && !showSpinner;
-        const className = classnames("resource-list-file-item", {
+        const className = classNames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
         return (h(Host, { key: '3c10795e77b48bcb1f76f2cd7b57cb138e8eb768', role: "row" }, h("div", { key: '7f5c9feb9e9059769f7fa722935fc20b29b785c5', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '13780eef8d807dcceb2521d0e2e3be3de63a4556', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '906811a5beae1556cec1f5409f3fff4167ea5a97', class: "resource-list-file-item__label-container" }, h("span", { key: '24b8649344bb31c2cff431b45fdfdea407f14df3', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'e51c2c4511354fb624b28bdb0894b74fabf9dfbe', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: 'd28309e8c6465cc6b3cf54fb23797206c71b64d7', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '2a25a331151cdc0b3103d5008284088449ed52ca', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '32bba8b8a3701392b108f2534da7b4199535d5c0', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'a33e630db7eac6b02711c3c5584d1b1f4732ec8a', size: "s" }))), showRemoveButton && (h("span", { key: 'b4dd6ae8d056517dfd6ffb805db96bd10826d18b', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: 'ca4b510b0610e1d7b69c7df16ea9ec9545dc7e3b', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));

package/dist/components/swirl-resource-list-item2.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$4 } from './swirl-button2.js';
 import { d as defineCustomElement$3 } from './swirl-icon-check-strong2.js';
@@ -145,7 +145,7 @@ const SwirlResourceListItem = /*@__PURE__*/ proxyCustomElement(class SwirlResour
                 paddingRight: `calc(${this.controlContainer?.getBoundingClientRect().width}px + var(--s-space-16))`,
             }
             : undefined;
-        const className = classnames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
+        const className = classNames("resource-list-item", `resource-list-item--label-weight-${this.labelWeight}`, {
             "resource-list-item--active": this.active,
             "resource-list-item--checked": this.checked,
             "resource-list-item--compact": this.compact,

package/dist/components/swirl-search.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-cancel2.js';
 import { d as defineCustomElement$2 } from './swirl-icon-search2.js';
@@ -73,7 +73,7 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSearch extends
         }
     }
     render() {
-        const className = classnames("search", `search--variant-${this.variant}`, {
+        const className = classNames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
         return (h(Host, { key: 'ceae5da523aa816ce7622c9ef37294b6170ffba4' }, h("span", { key: '9f1222ded2f5023fe3fac44fcbe39b3d7786bb5c', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: '3277b43b597777998051589a6181c4cf132ece92', "aria-hidden": "true", class: "search__icon" }), h("input", { key: 'f61260a4ddad79d484cd19b4bf1c52b599885fde', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: 'ec7b6490ebe051c4dfda08aa9527132923553d54', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: 'e900528f58b0fa8d6d2c52a11ca616635ffe3533' }))))));

package/dist/components/swirl-select.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 { q as querySelectorAllDeep } from './utils.js';
 import { d as defineCustomElement$c } from './swirl-icon-close2.js';
 import { d as defineCustomElement$b } from './swirl-icon-expand-less2.js';
@@ -131,7 +131,7 @@ const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends
         const offset = formControl?.inline || formControl?.labelPosition === "outside"
             ? -12
             : -16;
-        const className = classnames("select", `select--placement-${this.placement}`, {
+        const className = classNames("select", `select--placement-${this.placement}`, {
             "select--disabled": this.disabled,
             "select--inline": this.inline,
             "select--multi": this.multiSelect,

package/dist/components/swirl-separator2.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 swirlSeparatorCss = ":host{display:flex;width:100%;align-items:center}:host *{box-sizing:border-box}:host(.separator--orientation-vertical){display:inline-flex;width:auto}:host(.separator--orientation-vertical) .separator__line{width:var(--s-border-width-default);height:100%;min-height:1.125rem}:host(.separator--border-color-strong) .separator__line{background-color:var(--s-border-strong)}.separator__line{display:block;width:100%;height:var(--s-border-width-default);background-color:var(--s-border-default)}";
 const SwirlSeparatorStyle0 = swirlSeparatorCss;
@@ -23,7 +23,7 @@ const SwirlSeparator = /*@__PURE__*/ proxyCustomElement(class SwirlSeparator ext
                 paddingRight: `var(--s-space-${this.spacing})`,
                 paddingLeft: `var(--s-space-${this.spacing})`,
             };
-        const className = classnames("separator", `separator--border-color-${this.borderColor}`, `separator--orientation-${this.orientation}`);
+        const className = classNames("separator", `separator--border-color-${this.borderColor}`, `separator--orientation-${this.orientation}`);
         return (h(Host, { key: '4072fb521a6a98f765464940920b799cf0af00c1', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: '97d2b84b763a641dde38d6c5850d04fbcd7a3790', class: "separator__line" })));
     }
     static get style() { return SwirlSeparatorStyle0; }

package/dist/components/swirl-shell-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 { c as createFocusTrap } from './focus-trap.esm.js';
 import { e as isDesktopViewport } from './utils.js';
 import { d as defineCustomElement$e } from './swirl-badge2.js';
@@ -192,7 +192,7 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
         const hasSidebarToggleBadgeWithLabel = this.sidebarToggleBadge !== true && this.sidebarToggleBadge !== "true";
         const mainNavCollapsed = this.navigationCollapsed && this.isDesktopViewport;
         const hasSecondaryNav = Boolean(this.el.querySelector("[slot='secondary-nav']"));
-        const className = classnames("shell-layout", {
+        const className = classNames("shell-layout", {
             "shell-layout--branded-header": this.brandedHeader,
             "shell-layout--secondary-nav-collapsed": this.secondaryNavCollapsed,
             "shell-layout--has-secondary-nav": hasSecondaryNav,

package/dist/components/swirl-shell-navigation-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$4 } from './swirl-badge2.js';
 import { d as defineCustomElement$3 } from './swirl-tooltip2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
@@ -22,14 +22,14 @@ const SwirlShellNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlS
         this.tiled = undefined;
     }
     render() {
-        const className = classnames("shell-navigation-item", {
+        const className = classNames("shell-navigation-item", {
             "shell-navigation-item--active": this.active,
             "shell-navigation-item--boxed": this.boxed,
             "shell-navigation-item--tiled": this.tiled,
         });
         const isLink = Boolean(this.href);
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '82a90c5140f363e242e47dba35cfbea27647328f' }, h("swirl-tooltip", { key: '45a7bb3c737490195899d63c0d184017d7fedff0', active: this.hideLabel, content: this.label, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'f0e60832d3e34974e6a2a34259e216cff4f2d992', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: 'b4f478010058bcdda6800cac98d06e715bee8081', class: "shell-navigation-item__icon" }, h("slot", { key: 'e9a9b8a9cfd4eaa9b1b847df2e53a677e062da37', name: "icon" })), !this.hideLabel ? (h("span", { class: "shell-navigation-item__label" }, this.label)) : (h("swirl-visually-hidden", null, h("span", { class: "shell-navigation-item__label" }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { key: '2beb6d4e26af287b191e3e857d37de7235d612ca', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        return (h(Host, { key: '82a90c5140f363e242e47dba35cfbea27647328f' }, h("swirl-tooltip", { key: '45a7bb3c737490195899d63c0d184017d7fedff0', active: this.hideLabel, content: this.label, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'f0e60832d3e34974e6a2a34259e216cff4f2d992', class: className, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: 'b4f478010058bcdda6800cac98d06e715bee8081', class: "shell-navigation-item__icon" }, h("slot", { key: 'e9a9b8a9cfd4eaa9b1b847df2e53a677e062da37', name: "icon" })), !this.hideLabel ? (h("span", { class: "shell-navigation-item__label" }, this.label)) : (h("swirl-visually-hidden", null, h("span", { class: "shell-navigation-item__label" }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { key: '2beb6d4e26af287b191e3e857d37de7235d612ca', "aria-label": this.badgeLabel, class: classNames("shell-navigation-item__badge", {
                 "shell-navigation-item__badge--dot": this.badgeLabel === "",
             }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))))));
     }

package/dist/components/swirl-skeleton-box.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 swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}";
 const SwirlSkeletonBoxStyle0 = swirlSkeletonBoxCss;
@@ -16,7 +16,7 @@ const SwirlSkeletonBox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSkeletonB
         this.width = undefined;
     }
     render() {
-        const className = classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
+        const className = classNames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
         return (h(Host, { key: '4a0b16adcb0a5ad0c52b1373c9bae1da0fa734d3', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"

package/dist/components/swirl-skeleton-text.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 swirlSkeletonTextCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.skeleton-text{position:relative}.skeleton-text--static .skeleton-text__line:after{display:none}.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n  )}.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm);border-radius:calc(var(--s-font-size-sm) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-sm{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n  )}.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-base);border-radius:calc(var(--s-font-size-base) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base .skeleton-text__line{height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-base{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-sm) - var(--s-font-size-sm)) / 2\n    )}}.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-lg) - var(--s-font-size-lg)) / 2\n  )}.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-lg);border-radius:calc(var(--s-font-size-lg) / 2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg .skeleton-text__line{height:var(--s-line-height-base)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.skeleton-text--size-lg{--skeleton-text-line-padding:calc(\n      (var(--s-line-height-base) - var(--s-font-size-base)) / 2\n    )}}.skeleton-text--size-xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-xl) - var(--s-font-size-xl)) / 2\n  )}.skeleton-text--size-xl .skeleton-text__line{height:var(--s-line-height-xl);border-radius:calc(var(--s-font-size-xl) / 2)}.skeleton-text--size-2xl{--skeleton-text-line-padding:calc(\n    (var(--s-line-height-2xl) - var(--s-font-size-2xl)) / 2\n  )}.skeleton-text--size-2xl .skeleton-text__line{height:var(--s-line-height-2xl);border-radius:calc(var(--s-font-size-2xl) / 2)}.skeleton-text__line{overflow:hidden;width:100%;padding-top:var(--skeleton-text-line-padding);padding-bottom:var(--skeleton-text-line-padding)}.skeleton-text__line:before{display:block;width:100%;height:100%;border-radius:10rem;background-color:var(--s-surface-raised-hovered);content:\"\"}.skeleton-text__line:after{position:relative;z-index:1;top:-100%;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      var(--s-surface-raised-default) 33%,\n      rgba(255, 255, 255, 0) 66%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-text-shimmer 3s infinite}.skeleton-text__line:first-child:last-child{width:100%}.skeleton-text__line:last-child:not(:first-child){width:25%}@keyframes skeleton-text-shimmer{100%{transform:translateX(100%)}}";
 const SwirlSkeletonTextStyle0 = swirlSkeletonTextCss;
@@ -14,8 +14,8 @@ const SwirlSkeletonText$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSkeleton
         this.size = "base";
     }
     render() {
-        const className = classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
-        const lineClassName = classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
+        const className = classNames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
+        const lineClassName = classNames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
         return (h(Host, { key: '2d1750044760a421b45bc1bf7cf8bd38f6e25d68' }, h("div", { key: 'd2abf5827563249b5889c58183a2b9280d302c20', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index) => (h("div", { class: lineClassName, key: index, part: lineClassName }))))));
     }
     static get style() { return SwirlSkeletonTextStyle0; }

package/dist/components/swirl-spinner2.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-visually-hidden2.js';
 
 const swirlSpinnerCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.spinner{position:relative;display:inline-flex;overflow:hidden;width:2.25rem;height:2.25rem}.spinner--size-xs,.spinner--size-20{width:1.25rem;height:1.25rem}.spinner--size-xs .spinner__circle,.spinner--size-20 .spinner__circle{stroke-width:0.1875rem}.spinner--size-s,.spinner--size-24{width:1.5rem;height:1.5rem}.spinner--size-s .spinner__circle,.spinner--size-24 .spinner__circle{stroke-width:0.1875rem}.spinner__indicator{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;animation:spinner-rotate 2s linear infinite}.spinner__background{stroke:var(--s-border-default);stroke-linecap:round}.spinner__circle{animation:spinner-dash 1.5s ease-in-out infinite;stroke:var(--s-interactive-primary-default);stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}";
@@ -14,7 +14,7 @@ const SwirlSpinner = /*@__PURE__*/ proxyCustomElement(class SwirlSpinner extends
         this.size = "m";
     }
     render() {
-        const className = classnames("spinner", `spinner--size-${this.size}`);
+        const className = classNames("spinner", `spinner--size-${this.size}`);
         return (h(Host, { key: '579ed774e9e615362a128e8f1ff5a69951d1d4c6' }, h("span", { key: 'e4cd6d244d95656e859382a73a6eb5ce35c58d2e', class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { key: 'c7dbc58db4a8cb38b1f6cdaaee7039ab5ccd21ec', "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { key: '37c408876479b993315e3124ba0a4e6058fec98d', class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { key: '4ef237325004887c5e98b25d6a11f5706614d16e', class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("swirl-visually-hidden", { key: 'f00396f6d20eb946c5c8a1cf2f69d35e0beb845d' }, h("span", { key: 'fa287dafea6698a7d462ce4562185c46a47e9efb', class: "spinner__label" }, this.label))))));
     }
     static get style() { return SwirlSpinnerStyle0; }

package/dist/components/swirl-stack2.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 swirlStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%;margin:0}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:1}ol.stack,ul.stack{margin:0;padding:0;list-style:none}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-vertical-reverse{flex-direction:column-reverse}.stack--orientation-horizontal{flex-direction:row}.stack--orientation-horizontal-reverse{flex-direction:row-reverse}.stack--wrap{flex-wrap:wrap}";
 const SwirlStackStyle0 = swirlStackCss;
@@ -19,7 +19,7 @@ const SwirlStack = /*@__PURE__*/ proxyCustomElement(class SwirlStack extends HTM
     }
     render() {
         const Tag = this.as;
-        const className = classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
+        const className = classNames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
         return (h(Host, { key: 'c112a608a7c804409ba2189be3a504044c8737ae', style: { height: this.height } }, h(Tag, { key: '84ec94492511d380a203973e1b601eacc4f0e70a', class: className, style: { gap: `var(--s-space-${this.spacing})`, height: this.height } }, h("slot", { key: 'd18444ad2e7bac46bca455405ed678198404fa4f' }))));
     }
     static get style() { return SwirlStackStyle0; }

package/dist/components/swirl-status-indicator.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 swirlStatusIndicatorCss = ":host{display:block}:host *{box-sizing:border-box}.status-indicator{display:flex;align-items:center;gap:var(--s-space-4)}.status-indicator--intent-critical .status-indicator__dot:before{background-color:var(--s-icon-critical)}.status-indicator--intent-info .status-indicator__dot:before{background-color:var(--s-icon-info)}.status-indicator--intent-success .status-indicator__dot:before{background-color:var(--s-icon-success)}.status-indicator--intent-warning .status-indicator__dot:before{background-color:var(--s-icon-warning)}.status-indicator__dot{display:inline-flex;width:1.25rem;height:1.25rem;flex-shrink:0;justify-content:center;align-items:center}.status-indicator__dot:before{display:inline-flex;width:0.5rem;height:0.5rem;border-radius:50%;content:\"\"}.status-indicator__label{overflow:hidden;min-width:0;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis}";
 const SwirlStatusIndicatorStyle0 = swirlStatusIndicatorCss;
@@ -13,7 +13,7 @@ const SwirlStatusIndicator$1 = /*@__PURE__*/ proxyCustomElement(class SwirlStatu
         this.label = undefined;
     }
     render() {
-        const className = classnames("status-indicator", `status-indicator--intent-${this.intent}`);
+        const className = classNames("status-indicator", `status-indicator--intent-${this.intent}`);
         return (h(Host, { key: '0903c53ed61e86be0296b65b454449809c9b68a7' }, h("div", { key: '5fe2d133b1b9127be0debde562fcaa66e7c9e0c0', class: className }, h("span", { key: '853fc2150308f68cf729e9c929a837cd3d3d92a2', class: "status-indicator__dot" }), h("span", { key: '8e4390e05e14de2d99ca3a3b4a0f91fa0a611dc0', class: "status-indicator__label" }, this.label))));
     }
     static get style() { return SwirlStatusIndicatorStyle0; }

package/dist/components/swirl-switch.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-visually-hidden2.js';
 
 const swirlSwitchCss = ".sc-swirl-switch-h{display:inline-flex}.sc-swirl-switch-h *.sc-swirl-switch{box-sizing:border-box}.switch.sc-swirl-switch{display:inline-flex;align-items:center;touch-action:none}.switch.sc-swirl-switch:focus-within .switch__control.sc-swirl-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.switch--label-position-start.sc-swirl-switch{flex-direction:row-reverse}.switch--label-position-start.sc-swirl-switch .switch__label.sc-swirl-switch{margin-right:var(--s-space-12);margin-left:0}.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 1.25rem - var(--s-space-2))}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch--on.sc-swirl-switch .switch__thumb.sc-swirl-switch{left:calc(100% - 0.875rem - var(--s-space-2))}}.switch--on.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-default)}.switch--disabled.sc-swirl-switch .switch__control.sc-swirl-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-swirl-switch .switch__thumb.sc-swirl-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-swirl-switch .switch__label.sc-swirl-switch{color:var(--s-text-disabled)}.switch__control.sc-swirl-switch{position:relative;width:2.75rem;height:1.5rem;flex-shrink:0;border-radius:calc(1.5rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__control.sc-swirl-switch{width:1.875rem;height:1.125rem;border-radius:calc(1.125rem / 2)}}.switch__thumb.sc-swirl-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:1.25rem;height:1.25rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-swirl-switch{transition:none}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.switch__thumb.sc-swirl-switch{width:0.875rem;height:0.875rem}}.switch__label.sc-swirl-switch{position:relative;z-index:1;margin-left:var(--s-space-12);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);white-space:nowrap}";
@@ -33,7 +33,7 @@ const SwirlSwitch$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSwitch extends
         const off = !this.checked;
         const on = this.checked;
         const ariaCheckedLabel = on ? "true" : "false";
-        const className = classnames("switch", `switch--label-position-${this.labelPosition}`, {
+        const className = classNames("switch", `switch--label-position-${this.labelPosition}`, {
             "switch--off": off,
             "switch--on": on,
             "switch--disabled": this.disabled,