@getflip/swirl-components 0.230.1 → 0.233.0

package/dist/components/swirl-symbol-xing.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 swirlSymbolCss = ":host{display:inline-flex}";
 const SwirlSymbolXingStyle0 = swirlSymbolCss;
@@ -13,7 +13,7 @@ const SwirlSymbolXing$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSymbolXing
     }
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
-        const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+        const className = classNames("swirl-symbol", `swirl-symbol--size-${this.size}`);
         return (h("svg", { key: 'b69b18ff07dc6f6e2f64622c993c3bc171dcb978', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '3567d722748819656b26d273e2bb67ba24eac43c' }, h("path", { key: 'abf026e488369fdeb63528d5aaccf975dd15432c', d: "M17.158 2.128C16.9889 2.13178 16.8248 2.18623 16.687 2.28428C16.5492 2.38234 16.444 2.51949 16.385 2.678C16.385 2.678 10.173 13.698 9.967 14.059C9.98 14.079 14.067 21.578 14.067 21.578C14.1342 21.7375 14.246 21.8742 14.389 21.9717C14.5319 22.0693 14.7 22.1235 14.873 22.128H17.751C17.8257 22.1338 17.9006 22.1199 17.9683 22.0878C18.036 22.0557 18.0942 22.0065 18.137 21.945C18.1743 21.8762 18.1933 21.7989 18.192 21.7206C18.1908 21.6423 18.1694 21.5656 18.13 21.498L14.063 14.068C14.0614 14.0653 14.0606 14.0622 14.0606 14.059C14.0606 14.0558 14.0614 14.0527 14.063 14.05L20.45 2.758C20.4882 2.68988 20.5082 2.61309 20.5082 2.535C20.5082 2.4569 20.4882 2.38012 20.45 2.312C20.4084 2.25141 20.3518 2.20262 20.2857 2.17038C20.2197 2.13813 20.1464 2.12353 20.073 2.128H17.158ZM5.041 6.078C4.96541 6.07176 4.88949 6.08504 4.8205 6.11656C4.75151 6.14808 4.69177 6.19678 4.647 6.258C4.61116 6.32697 4.59388 6.40408 4.59686 6.48175C4.59984 6.55942 4.62298 6.63498 4.664 6.701L6.613 10.076V10.093L3.551 15.504C3.5116 15.5708 3.49081 15.6469 3.49081 15.7245C3.49081 15.8021 3.5116 15.8782 3.551 15.945C3.59031 16.0081 3.64585 16.0595 3.71182 16.0938C3.77779 16.1281 3.85176 16.1441 3.926 16.14H6.81C6.98108 16.1336 7.14662 16.0776 7.2865 15.9789C7.42639 15.8802 7.5346 15.743 7.598 15.584L10.709 10.076L8.728 6.614C8.66239 6.45468 8.55179 6.31791 8.40972 6.22042C8.26765 6.12292 8.10026 6.06892 7.928 6.065H5.041V6.078Z", fill: "currentColor" }))));
     }
     static get style() { return SwirlSymbolXingStyle0; }

package/dist/components/swirl-symbol-youtube.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 swirlSymbolCss = ":host{display:inline-flex}";
 const SwirlSymbolYoutubeStyle0 = swirlSymbolCss;
@@ -13,7 +13,7 @@ const SwirlSymbolYoutube$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSymbolY
     }
     render() {
         const viewBoxSize = this.size === 20 ? 24 : this.size;
-        const className = classnames("swirl-symbol", `swirl-symbol--size-${this.size}`);
+        const className = classNames("swirl-symbol", `swirl-symbol--size-${this.size}`);
         return (h("svg", { key: '3a4f02fabaeaafbb2109961cd55ddc71ab1e5f0c', class: className, fill: "none", height: this.size, part: "symbol", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, h(Fragment, { key: '881aa8e8833804804eb0a2797c23534e423bc9ee' }, h("path", { key: 'dbb413ee1e8bc56431a62ca9244a0b08da2fa70f', d: "M21.582 7.201C21.4691 6.77542 21.2463 6.38698 20.936 6.07459C20.6257 5.76219 20.2388 5.5368 19.814 5.421C18.254 5 12 5 12 5C12 5 5.74599 5 4.18599 5.421C3.76123 5.5369 3.37436 5.76231 3.06408 6.0747C2.7538 6.38708 2.53101 6.77547 2.41799 7.201C2.12953 8.79965 1.9896 10.4216 1.99999 12.046C1.9896 13.6704 2.12953 15.2923 2.41799 16.891C2.53092 17.3166 2.75368 17.705 3.06397 18.0174C3.37426 18.3298 3.76118 18.5552 4.18599 18.671C5.74499 19.092 11.999 19.092 11.999 19.092C11.999 19.092 18.253 19.092 19.813 18.671C20.2378 18.5553 20.6248 18.3299 20.9351 18.0175C21.2454 17.7051 21.4682 17.3166 21.581 16.891C21.8695 15.2923 22.0098 13.6705 22 12.046C22.0104 10.4216 21.8704 8.79965 21.582 7.201ZM9.95399 15.019V9.072L15.181 12.045L9.95399 15.019Z", fill: "currentColor" }))));
     }
     static get style() { return SwirlSymbolYoutubeStyle0; }

package/dist/components/swirl-tab-bar2.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';
 
 const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar--justify-evenly.sc-swirl-tab-bar>*.sc-swirl-tab-bar{flex:1}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:flex;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);align-items:center;border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);cursor:pointer;justify-content:center}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:calc(var(--s-space-4) + var(--s-space-2)) var(--s-space-8)}}.tab-bar__tab-icon.sc-swirl-tab-bar{display:inline-flex}.tab-bar__tab-label.sc-swirl-tab-bar{display:inline-flex;overflow:hidden;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
 const SwirlTabBarStyle0 = swirlTabBarCss;
@@ -29,7 +29,7 @@ const SwirlTabBar = /*@__PURE__*/ proxyCustomElement(class SwirlTabBar extends H
         this.tabs = [];
     }
     render() {
-        const className = classnames("tab-bar", `tab-bar--justify-${this.justify}`);
+        const className = classNames("tab-bar", `tab-bar--justify-${this.justify}`);
         const styles = {
             paddingInlineEnd: Boolean(this.paddingInlineEnd)
                 ? `var(--s-space-${this.paddingInlineEnd})`
@@ -39,7 +39,7 @@ const SwirlTabBar = /*@__PURE__*/ proxyCustomElement(class SwirlTabBar extends H
                 : undefined,
         };
         return (h(Host, { key: '938a675f7d69c9ad600f241b492721a60a06f1a1' }, h("div", { key: 'f01a2b68038cfccf77961afa000ec9ab605e2e8d', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
-            const className = classnames("tab-bar__tab", {
+            const className = classNames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
             });
             return (h("button", { "aria-controls": this.disableTabSemantics ? undefined : tab.id, "aria-selected": this.disableTabSemantics

package/dist/components/swirl-tab.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 swirlTabCss = ":host{display:none;width:100%}:host(.tab--active){display:block}:host *{box-sizing:border-box}";
 const SwirlTabStyle0 = swirlTabCss;
@@ -16,7 +16,7 @@ const SwirlTab$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTab extends HTMLE
         this.tabId = undefined;
     }
     render() {
-        const className = classnames("tab", { "tab--active": this.active });
+        const className = classNames("tab", { "tab--active": this.active });
         return (h(Host, { key: '0b92b5bb9fb189043912cdd2b02ffb766b1ede47', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1, class: className, style: { padding: `var(--s-space-${this.padding})` } }, h("slot", { key: 'ff55da0ccfc76b9386de33e57c2182a380ddc722' })));
     }
     static get style() { return SwirlTabStyle0; }

package/dist/components/swirl-table-row.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 } from './utils.js';
 
 const swirlTableRowCss = ":host{display:flex}:host(.table-row--highlighted){--swirl-ghost-button-background-default:transparent}:host(.table-row--highlighted) ::slotted(.table-cell){background-color:rgba(240, 242, 255, 1);}:host ::slotted(.table-cell){border-bottom:var(--s-border-width-default) solid var(--s-border-default)}:host *{box-sizing:border-box}";
@@ -18,7 +18,7 @@ const SwirlTableRow$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRow ext
         table?.rerender();
     }
     render() {
-        const className = classnames("table-row", {
+        const className = classNames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
         return (h(Host, { key: '08c79d4018d8395e4e5250a6ea21de50ac89ce8a', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '32d468ee348c26eb99ffc1ccc5d884f2e1b151cf' })));

package/dist/components/swirl-tag2.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$1 } from './swirl-icon-close2.js';
 
 const swirlTagCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;gap:var(--s-space-4)}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--variant-outline{border-style:solid;border-width:var(--s-border-width-default);border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-action-primary);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-action-primary)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-action-primary);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-action-primary)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-action-primary);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-action-primary)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-action-primary);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-action-primary)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-action-primary);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-action-primary)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-left:calc(-1 * var(--s-space-4))}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}";
@@ -40,7 +40,7 @@ const SwirlTag = /*@__PURE__*/ proxyCustomElement(class SwirlTag extends HTMLEle
         }
     }
     render() {
-        const className = classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
+        const className = classNames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`);
         return (h(Host, { key: '4f3801dc7f9872b38bc0340c6a8b859f0f7f545e' }, h("span", { key: 'cc5d10bc2b4f1a27584beea293da156920aa248e', class: className, part: "tag" }, this.icon && (h("span", { key: 'ddce7d37fc8ab9391c9ac1fb3e3533535f47c022', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'afd46af752a3c62ed8e26c073bcdd32e56fe91c4', class: "tag__label" }, this.label), this.removable && (h("button", { key: '46c87dd90a1e9f0f288f18b20ee750906aa2c01c', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: 'a183448bc380d12d1b2ca99d9c9df50175fc627e', size: 16 }))))));
     }
     get el() { return this; }

package/dist/components/swirl-text-input2.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$5 } from './swirl-icon-cancel2.js';
 import { d as defineCustomElement$4 } from './swirl-icon-expand-less2.js';
@@ -182,7 +182,7 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
             !showStepper &&
             !this.showCharacterCounter;
         const type = this.type === "password" && this.showPassword ? "text" : this.type;
-        const className = classnames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
+        const className = classNames("text-input", `text-input--font-size-${this.fontSize}`, `text-input--type-${this.type}`, {
             "text-input--auto-grow": this.autoGrow,
             "text-input--clearable": this.clearable,
             "text-input--disabled": this.disabled,

package/dist/components/swirl-text2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as commonjsGlobal } from './_commonjsHelpers.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 
 var balancetext = {exports: {}};
 
@@ -978,7 +978,7 @@ const SwirlText = /*@__PURE__*/ proxyCustomElement(class SwirlText extends HTMLE
     render() {
         const Tag = this.as;
         const truncate = this.truncate && (!Boolean(this.lines) || this.lines === 1);
-        const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-family-${this.fontFamily}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--truncate-direction-${this.truncateDirection}`, `text--weight-${this.weight}`, {
+        const className = classNames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-family-${this.fontFamily}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--truncate-direction-${this.truncateDirection}`, `text--weight-${this.weight}`, {
             "text--truncate": truncate,
             "text--responsive": this.responsive,
         });

package/dist/components/swirl-thumbnail2.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$4 } from './swirl-button2.js';
 import { d as defineCustomElement$3 } from './swirl-button-group2.js';
 import { d as defineCustomElement$2 } from './swirl-progress-indicator2.js';
@@ -39,7 +39,7 @@ const SwirlThumbnail = /*@__PURE__*/ proxyCustomElement(class SwirlThumbnail ext
         const showButtonGroup = showEditButton || showRemoveButton;
         const showTimestamp = Boolean(this.timestamp) && showInteractable;
         const ImageWrapper = this.interactive ? "button" : "span";
-        const className = classnames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
+        const className = classNames("thumbnail", `thumbnail--format-${this.format}`, `thumbnail--size-${this.size}`, {
             "thumbnail--interactive": this.interactive,
             "thumbnail--has-progress": this.progress !== undefined,
         });

package/dist/components/swirl-time-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 } from './utils.js';
 
@@ -122,7 +122,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
         const displayValue = isValid(dateValue)
             ? format(dateValue, this.format)
             : undefined;
-        const className = classnames("time-input", {
+        const className = classNames("time-input", {
             "time-input--inline": this.inline,
         });
         return (h(Host, { key: '2bb507836032c0d1dda9204edc739bcac4e9b0ef' }, h("div", { key: '2d60afcb5846554b16098e392faf8dbe57923cc4', class: className }, h("input", { key: '6e15b219a2e5bbc16d69b319bceb12e31d738ccd', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { key: '6a133dc058c386b00e131399be73e96e61ca20a9', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'fa224e112781bca97588c2713ccf0df8d169adbc', size: this.iconSize })))));

package/dist/components/swirl-toast2.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$1 } from './swirl-icon-close2.js';
 
@@ -61,7 +61,7 @@ const SwirlToast = /*@__PURE__*/ proxyCustomElement(class SwirlToast extends HTM
         this.timeout = undefined;
     }
     render() {
-        const className = classnames("toast", `toast--intent-${this.intent}`);
+        const className = classNames("toast", `toast--intent-${this.intent}`);
         return (h(Host, { key: '74552715fe709d5a56de877114c219e34e933d3f' }, h("div", { key: '912b2c811f1ad202d8ed3338418e180fbd8c8e80', class: className }, this.icon && (h("span", { key: 'b33cda7199cea684828b5380cabfcaeb43379158', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: 'b0326da56c13d5b7398c76af880f08ddeec6ec1e', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: 'b9dd6a1f6dffa84d914f3856927ad231f0f1876d' })), h("button", { key: 'a1cb910c86672285a2fc48f607bd9255f1fb1177', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '5eb94e0e527275387fddc1e21b33d14e999d42be', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get watchers() { return {

package/dist/components/swirl-tooltip2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { b as arrow, c as computePosition, a as autoUpdate, o as offset, s as shift, f as flip } from './floating-ui.dom.esm.js';
-import { c as classnames } from './index2.js';
+import { c as classNames } from './index2.js';
 
 const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
 const SwirlTooltipStyle0 = swirlTooltipCss;
@@ -101,7 +101,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
         this.updateOptions();
     }
     render() {
-        const className = classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
+        const className = classNames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });

package/dist/components/swirl-tree-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';
 
 const swirlTreeNavigationItemCss = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{display:inline-flex;width:100%;height:2.5rem;padding-right:var(--s-space-16);padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-8));flex-shrink:0;justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);text-decoration:none;cursor:pointer;gap:calc(var(--s-space-8) - var(--s-space-2))}.tree-navigation-item:hover{background-color:var(--s-surface-hovered)}.tree-navigation-item:active{background-color:var(--s-surface-pressed)}.tree-navigation-item:focus{outline:none}.tree-navigation-item:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item--active{background-color:var(--s-surface-raised-default);box-shadow:inset 0.25rem 0 0 0 var(--s-border-highlight)}.tree-navigation-item--active:hover{background-color:var(--s-surface-raised-hovered)}.tree-navigation-item--active:active{background-color:var(--s-surface-raised-pressed)}.tree-navigation-item--has-icon{padding-left:var(--s-space-16)}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0}.tree-navigation-item__label{overflow:hidden;min-width:0;padding-right:var(--s-space-2);padding-left:var(--s-space-2);white-space:nowrap;text-overflow:ellipsis}";
 const SwirlTreeNavigationItemStyle0 = swirlTreeNavigationItemCss;
@@ -18,7 +18,7 @@ const SwirlTreeNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTr
     render() {
         const isLink = Boolean(this.href);
         const Tag = isLink ? "a" : "button";
-        const className = classnames("tree-navigation-item", {
+        const className = classNames("tree-navigation-item", {
             "tree-navigation-item--active": this.active,
             "tree-navigation-item--has-icon": Boolean(this.icon),
         });

package/dist/components/swirl-tree-view-item.d.ts

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

package/dist/components/swirl-tree-view-item.js

@@ -0,0 +1,132 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host, Fragment } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+import { d as defineCustomElement$4 } from './swirl-icon2.js';
+import { d as defineCustomElement$3 } from './swirl-icon-chevron-right2.js';
+import { d as defineCustomElement$2 } from './swirl-icon-expand-more2.js';
+
+const swirlTreeViewItemCss = ".sc-swirl-tree-view-item-h{display:block;flex-grow:1}.sc-swirl-tree-view-item-h *.sc-swirl-tree-view-item{box-sizing:border-box}.tree-view-item.sc-swirl-tree-view-item{list-style:none}.tree-view-item--active.sc-swirl-tree-view-item>.tree-view-item__link.sc-swirl-tree-view-item{background-color:var(--s-background-hovered)}.tree-view-item--has-tags.sc-swirl-tree-view-item .tree-view-item__tags.sc-swirl-tree-view-item{display:flex}.tree-view-item__children.sc-swirl-tree-view-item{display:flex;margin:0;padding:0;flex-direction:column;gap:var(--s-space-2)}.tree-view-item__link.sc-swirl-tree-view-item{display:flex;height:2.25rem;padding:var(--s-space-4) var(--s-space-8) var(--s-space-4) var(--s-space-4);align-items:center;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:var(--s-background-default);font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);text-decoration:none;gap:var(--s-space-4)}.tree-view-item__link.sc-swirl-tree-view-item:hover{background-color:var(--s-background-hovered)}.tree-view-item__link.sc-swirl-tree-view-item:active{background-color:var(--s-background-pressed)}.tree-view-item__link.sc-swirl-tree-view-item:focus:not(:focus-visible){outline:none}.tree-view-item__link.sc-swirl-tree-view-item:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__link.sc-swirl-tree-view-item{font-size:var(--s-font-size-sm)}}.tree-view-item__icon.sc-swirl-tree-view-item{display:block;width:1.5rem;height:1.5rem;margin-right:var(--s-space-4);flex-grow:0;flex-shrink:0;color:var(--s-icon-default);font-size:var(--s-font-size-lg)}.tree-view-item__icon.sc-swirl-tree-view-item .sc-swirl-tree-view-item::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__icon.sc-swirl-tree-view-item{width:1.25rem;height:1.25rem;font-size:var(--s-font-size-base)}}.tree-view-item__toggle-icon.sc-swirl-tree-view-item{display:block;width:1.5rem;height:1.5rem;flex-grow:0;flex-shrink:0;color:var(--s-icon-default)}.tree-view-item__toggle-icon.sc-swirl-tree-view-item .sc-swirl-tree-view-item::part(icon){width:100%;height:100%}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tree-view-item__toggle-icon.sc-swirl-tree-view-item{width:1.25rem;height:1.25rem}}.tree-view-item__label.sc-swirl-tree-view-item{overflow:hidden;min-width:5rem;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.tree-view-item__tags.sc-swirl-tree-view-item{display:none;padding-left:var(--s-space-4);align-items:center;gap:var(--s-space-4)}";
+const SwirlTreeViewItemStyle0 = swirlTreeViewItemCss;
+
+const SwirlTreeViewItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeViewItem extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.expandedChange = createEvent(this, "expandedChange", 7);
+        this.itemSelected = createEvent(this, "itemSelected", 7);
+        this.onFocus = () => {
+            if (!this.selected) {
+                this.select();
+            }
+        };
+        this.onClickCollapse = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.collapse();
+        };
+        this.onClickExpand = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.expand();
+        };
+        this.active = undefined;
+        this.href = undefined;
+        this.icon = undefined;
+        this.itemId = undefined;
+        this.label = undefined;
+        this.expanded = false;
+        this.hasChildren = false;
+        this.level = 0;
+        this.selected = false;
+    }
+    componentWillLoad() {
+        this.updateLevel();
+        this.hasChildren = Boolean(this.el.querySelector("swirl-tree-view-item"));
+    }
+    async expand() {
+        this.expanded = true;
+        this.expandedChange.emit(this.expanded);
+    }
+    async collapse() {
+        this.expanded = false;
+        this.expandedChange.emit(this.expanded);
+    }
+    async select(focus) {
+        this.selected = true;
+        if (focus) {
+            this.link?.focus();
+        }
+        this.itemSelected.emit(this.el);
+    }
+    async unselect() {
+        this.selected = false;
+    }
+    updateLevel() {
+        let parentItem = this.el.parentElement?.closest("swirl-tree-view-item");
+        while (Boolean(parentItem)) {
+            this.level += 1;
+            parentItem = parentItem.parentElement?.closest("swirl-tree-view-item");
+        }
+    }
+    render() {
+        const hasTags = Boolean(this.el.querySelector('[slot="tags"]'));
+        const iconIsEmoji = Boolean(this.icon) && /\p{Extended_Pictographic}/u.test(this.icon);
+        const className = classNames("tree-view-item", {
+            "tree-view-item--active": this.active,
+            "tree-view-item--has-tags": hasTags,
+        });
+        return (h(Host, { key: '177446baadd42d3508d8c3fead6b179e26feedde', id: this.itemId, role: "none" }, h("li", { key: '72d29bdca3bbb72f398e4d481bdce1f2ce70b0a1', class: className, role: "none" }, h("a", { key: '6eb8a17c4b7982dd3445b9c7f24ecbc80a621ec6', "aria-current": this.active ? "page" : undefined, "aria-expanded": !this.hasChildren ? undefined : String(this.expanded), "aria-level": this.level + 1, "aria-owns": this.hasChildren ? `${this.itemId}-children` : undefined, "aria-selected": String(this.selected), class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, style: {
+                paddingLeft: `calc(${this.level} * var(--s-space-12) + var(--s-space-4))`,
+            }, ref: (el) => (this.link = el), role: "treeitem", tabIndex: this.selected ? 0 : -1 }, h("span", { key: '72ab5ef8765690990f04bb76d7dc610b4ae18f3b', class: "tree-view-item__toggle-icon" }, this.hasChildren && (h(Fragment, { key: 'b6809cfdd91b53eb4d37c94ce899933daeb85020' }, this.expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 }))))), Boolean(this.icon) && (h(Fragment, { key: '040fccdd39595e4988b515257cd0a7fdb62a74e1' }, h("span", { key: '9a8121ef9e3b7e5a508345259550216ed02e6337', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24 }))))), h("span", { key: '113f4b3cd34284bd6c0b022f8ca3d0fc8e28a5a1', class: "tree-view-item__label" }, this.label), h("span", { key: 'b3b1efebbaf2b6e254d90570fba4ce61c5bd979b', class: "tree-view-item__tags" }, h("slot", { key: 'f27e893394cd489ff21a36651b5cac353fbdf78e', name: "tags" }))), h("ul", { key: '3618fcdd7471c7642ed5d1aa566d9ca7615b9a6b', "aria-label": this.label, class: "tree-view-item__children", id: `${this.itemId}-children`, role: "group", style: {
+                display: !this.expanded || !this.hasChildren ? "none" : undefined,
+            } }, h("slot", { key: 'caa44b704e4de4d2dbd6a297830d2d3d9453038e' })))));
+    }
+    get el() { return this; }
+    static get style() { return SwirlTreeViewItemStyle0; }
+}, [6, "swirl-tree-view-item", {
+        "active": [4],
+        "href": [1],
+        "icon": [1],
+        "itemId": [1, "item-id"],
+        "label": [1],
+        "expanded": [32],
+        "hasChildren": [32],
+        "level": [32],
+        "selected": [32],
+        "expand": [64],
+        "collapse": [64],
+        "select": [64],
+        "unselect": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-tree-view-item", "swirl-icon", "swirl-icon-chevron-right", "swirl-icon-expand-more"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-tree-view-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlTreeViewItem$1);
+            }
+            break;
+        case "swirl-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "swirl-icon-chevron-right":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "swirl-icon-expand-more":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const SwirlTreeViewItem = SwirlTreeViewItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlTreeViewItem, defineCustomElement };

package/dist/components/swirl-tree-view.d.ts

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