@getflip/swirl-components-react 0.64.0 → 0.65.0

package/dist/{swirl-option-list-section.entry.276078c2.js → swirl-option-list-section.entry.95b44307.js}

@@ -1,4 +1,4 @@
-import { r as s, h as t, H as e } from "./index.bcb452a4.js";
+import { r as s, h as t, H as e } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 const o = ":host{display:block}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", l = class {

package/dist/{swirl-option-list.entry.ef8cf04f.js → swirl-option-list.entry.6789dc47.js}

@@ -1,4 +1,4 @@
-import { r as Be, c as le, h as At, H as ke, g as Xe } from "./index.bcb452a4.js";
+import { r as Be, c as le, h as At, H as ke, g as Xe } from "./index.a6af8737.js";
 import { c as ue, q as de } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";

package/dist/{swirl-pagination.entry.62c3e4c4.js → swirl-pagination.entry.a9e45681.js}

@@ -1,4 +1,4 @@
-import { r as l, c as s, h as i, H as r } from "./index.bcb452a4.js";
+import { r as l, c as s, h as i, H as r } from "./index.a6af8737.js";
 import { c as p } from "./index-d280dafb.186cdb0e.js";
 import { d as g } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-pdf-reader.entry.7fb6d154.js → swirl-pdf-reader.entry.f40954c3.js}

@@ -1,4 +1,4 @@
-import { r as l, h as e, H as n, g as d } from "./index.bcb452a4.js";
+import { r as l, h as e, H as n, g as d } from "./index.a6af8737.js";
 import { A as c } from "./a11y-dialog.esm-d7a94c8c.bd6ae411.js";
 import { d as h, e as p } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
 import { c as r } from "./index-d280dafb.186cdb0e.js";

package/dist/{swirl-popover.entry.628db952.js → swirl-popover.entry.a477dd1a.js}

@@ -1,4 +1,4 @@
-import { r as h, c as p, h as n, H as v, g as m } from "./index.bcb452a4.js";
+import { r as h, c as p, h as n, H as v, g as m } from "./index.a6af8737.js";
 import { o as l, s as c, f, c as g, a as u } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
 import { d as b, e as _ } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
 import { c as y } from "./index-d280dafb.186cdb0e.js";

package/dist/{swirl-progress-indicator.entry.43ad375d.js → swirl-progress-indicator.entry.34071ffe.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as n } from "./index.bcb452a4.js";
+import { r as t, h as s, H as n } from "./index.a6af8737.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-radio-group.entry.3d87ed79.js → swirl-radio-group.entry.225f169e.js}

@@ -1,4 +1,4 @@
-import { r as o, c as l, h as i, H as n, g as u } from "./index.bcb452a4.js";
+import { r as o, c as l, h as i, H as n, g as u } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 const d = ".sc-swirl-radio-group-h{display:block}.sc-swirl-radio-group-h *.sc-swirl-radio-group{box-sizing:border-box}.radio-group.sc-swirl-radio-group{display:flex;flex-direction:column;gap:var(--s-space-12)}", h = class {

package/dist/{swirl-radio.entry.92a885f7.js → swirl-radio.entry.e28e4b5c.js}

@@ -1,4 +1,4 @@
-import { r as e, c as l, h as i, H as c } from "./index.bcb452a4.js";
+import { r as e, c as l, h as i, H as c } from "./index.a6af8737.js";
 import { c as t } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-resource-list-file-item.entry.c566097f.js → swirl-resource-list-file-item.entry.32ac0fd0.js}

@@ -1,33 +1,32 @@
-import { r as n, c as a, h as s, H as c } from "./index.bcb452a4.js";
+import { r as n, c as a, h as e, H as c } from "./index.a6af8737.js";
 import { c as d } from "./index-d280dafb.186cdb0e.js";
 import { g as h } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";
 const m = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{outline:none}.resource-list-file-item:focus-visible{background-color:var(--s-background-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-file-item{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:""}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}', p = class {
-  constructor(i) {
-    n(this, i), this.remove = a(this, "remove", 7), this.desktopMediaQuery = h(), this.desktopMediaQueryHandler = (e) => {
-      this.forceIconProps(e.matches);
+  constructor(s) {
+    n(this, s), this.remove = a(this, "remove", 7), this.desktopMediaQuery = h(), this.desktopMediaQueryHandler = (i) => {
+      this.forceIconProps(i.matches);
     }, this.description = void 0, this.errorMessage = void 0, this.icon = "<swirl-icon-file></swirl-icon-file>", this.label = void 0, this.loading = void 0, this.removable = void 0, this.removeButtonLabel = "Remove file";
   }
   componentDidLoad() {
-    var i, e;
-    this.forceIconProps(this.desktopMediaQuery.matches), (e = (i = this.desktopMediaQuery).addEventListener) === null || e === void 0 || e.call(i, "change", this.desktopMediaQueryHandler);
+    this.forceIconProps(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
-    var i, e;
-    (e = (i = this.desktopMediaQuery).removeEventListener) === null || e === void 0 || e.call(i, "change", this.desktopMediaQueryHandler);
+    var s, i;
+    (i = (s = this.desktopMediaQuery).removeEventListener) === null || i === void 0 || i.call(s, "change", this.desktopMediaQueryHandler);
   }
-  forceIconProps(i) {
+  forceIconProps(s) {
     if (!Boolean(this.iconEl))
       return;
-    const e = this.iconEl.children[0];
-    e == null || e.setAttribute("size", i ? "20" : "24");
+    const i = this.iconEl.children[0];
+    i == null || i.setAttribute("size", s ? "20" : "24");
   }
   render() {
-    const i = Boolean(this.errorMessage), e = !i && Boolean(this.description), t = !i && this.loading, r = this.removable && !t, o = d("resource-list-file-item", {
+    const s = Boolean(this.errorMessage), i = !s && Boolean(this.description), t = !s && this.loading, r = this.removable && !t, o = d("resource-list-file-item", {
       "resource-list-file-item--has-control": t || r
     });
-    return s(c, { role: "row" }, s("div", { class: o, part: "resource-list-file-item", role: "gridcell" }, s("span", { class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (l) => this.iconEl = l }), s("span", { class: "resource-list-file-item__label-container" }, s("span", { class: "resource-list-file-item__label", id: "label" }, this.label), e && s("span", { class: "resource-list-file-item__description" }, this.description), i && s("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, s("swirl-inline-error", { message: this.errorMessage, size: "s" }))), t && s("span", { class: "resource-list-file-item__spinner" }, s("swirl-spinner", { size: "s" })), r && s("span", { class: "resource-list-file-item__remove-button" }, s("swirl-button", { hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))));
+    return e(c, { role: "row" }, e("div", { class: o, part: "resource-list-file-item", role: "gridcell" }, e("span", { class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (l) => this.iconEl = l }), e("span", { class: "resource-list-file-item__label-container" }, e("span", { class: "resource-list-file-item__label", id: "label" }, this.label), i && e("span", { class: "resource-list-file-item__description" }, this.description), s && e("span", { "aria-live": "polite", class: "resource-list-file-item__error-message" }, e("swirl-inline-error", { message: this.errorMessage, size: "s" }))), t && e("span", { class: "resource-list-file-item__spinner" }, e("swirl-spinner", { size: "s" })), r && e("span", { class: "resource-list-file-item__remove-button" }, e("swirl-button", { hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))));
   }
 };
 p.style = m;

package/dist/{swirl-search.entry.8cd499b5.js → swirl-search.entry.ec676c8a.js}

@@ -1,4 +1,4 @@
-import { r as i, c as r, h as a, H as t } from "./index.bcb452a4.js";
+import { r as i, c as r, h as a, H as t } from "./index.a6af8737.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { g as n } from "./utils-bc84f36e.1fee9865.js";
 import "react";
@@ -20,8 +20,7 @@ const o = ".sc-swirl-search-h{display:flex;width:100%}.sc-swirl-search-h *.sc-sw
     }, this.autoFocus = void 0, this.clearButtonLabel = "Clear search term", this.disabled = void 0, this.inputName = void 0, this.inputId = void 0, this.label = void 0, this.placeholder = "Search \u2026", this.value = void 0, this.variant = "filled";
   }
   componentDidLoad() {
-    var e, s;
-    this.forceIconProps(this.desktopMediaQuery.matches), (s = (e = this.desktopMediaQuery).addEventListener) === null || s === void 0 || s.call(e, "change", this.desktopMediaQueryHandler);
+    this.forceIconProps(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var e, s;

package/dist/{swirl-select.entry.6bce5081.js → swirl-select.entry.45bdb1df.js}

@@ -1,4 +1,4 @@
-import { r as a, c as r, h as s, H as c, g as d } from "./index.bcb452a4.js";
+import { r as a, c as r, h as s, H as c, g as d } from "./index.a6af8737.js";
 import { c as h } from "./index-d280dafb.186cdb0e.js";
 import { q as p } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-shell-layout.entry.33918fd6.js → swirl-shell-layout.entry.287f592b.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as t } from "./index.bcb452a4.js";
+import { r as o, h as e, H as t } from "./index.a6af8737.js";
 import { c as i } from "./index-d280dafb.186cdb0e.js";
 import { g as r, a as d } from "./utils-bc84f36e.1fee9865.js";
 import "react";
@@ -8,8 +8,8 @@ const n = `:host{--extended-sidebar-width:17rem;--collapsed-sidebar-width:4rem;d
               0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{transform:translate3d(-100%, 0, 0)}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper .shell-layout__sidebar{width:100%;box-shadow:none}@media (min-width: 992px){.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper{max-width:var(--collapsed-sidebar-width);flex-basis:var(--collapsed-sidebar-width);transform:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__sidebar{box-shadow:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__collapsed-logo{display:inline-flex;justify-content:center;align-items:center}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__expanded-logo{display:none}.shell-layout--collapsed-sidebar .shell-layout__sidebar-wrapper:not(.shell-layout__sidebar-wrapper--hovered):not(:focus-within) .shell-layout__toggle{display:none}}@media (min-width: 992px){.shell-layout--collapsed-sidebar{grid-template-columns:var(--collapsed-sidebar-width) 1fr}}.shell-layout--hide-sidebar{grid-template-columns:1fr;grid-template-areas:"banner"
     "main"}@media (min-width: 992px){.shell-layout--hide-sidebar{grid-template-columns:1fr}}.shell-layout__banner{grid-area:banner}.shell-layout__sidebar-wrapper{position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;max-width:var(--extended-sidebar-width);min-height:0;flex-basis:var(--extended-sidebar-width);flex-shrink:0;transition:max-width 0.2s, transform 0.2s;grid-area:sidebar}@media (min-width: 992px){.shell-layout__sidebar-wrapper{position:relative;inset:auto}}.shell-layout__sidebar{display:flex;width:var(--extended-sidebar-width);height:100%;border-right:var(--s-border-width-default) solid var(--s-border-default);flex-direction:column;transition:box-shadow 0.2s, width 0.2s;box-shadow:0 0.75rem 2rem rgba(25, 26, 28, 0.12),
     0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}@media (min-width: 992px){.shell-layout__sidebar{box-shadow:none}}.shell-layout__header{flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default)}.shell-layout__logo-bar{display:flex;overflow:hidden;align-items:center;height:4.5rem}.shell-layout__expanded-logo{padding-right:var(--s-space-12);padding-left:var(--s-space-12);flex-grow:1}.shell-layout__collapsed-logo{display:none;padding-right:var(--s-space-12);padding-left:var(--s-space-12);flex-grow:1}.shell-layout__toggle{padding-right:var(--s-space-16);padding-left:var(--s-space-12);flex-grow:0;flex-shrink:0}.shell-layout__mobile-toggle{position:absolute;z-index:2;top:var(--s-space-12);left:calc(100% + var(--s-space-16))}@media (min-width: 992px){.shell-layout__mobile-toggle{display:none}}.shell-layout__main-navigation{overflow:auto;flex-grow:1;background-color:var(--s-background-default)}.shell-layout__main{min-height:0;background-color:var(--s-background-default);grid-area:main}.shell-layout__main>*,.shell-layout__main ::slotted(*){height:100%}.shell-layout__backdrop{position:fixed;z-index:1;background-color:rgba(0, 0, 0, 0.4);animation:shell-layout-backdrop-fade-in 0.1s;inset:0}@media (min-width: 992px){.shell-layout__backdrop{display:none}}.shell-layout__backdrop--fading{animation:shell-layout-backdrop-fade-out 0.2s}@keyframes shell-layout-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes shell-layout-backdrop-fade-out{from{opacity:1}to{opacity:0}}`, h = class {
-  constructor(l) {
-    o(this, l), this.desktopMediaQuery = r(), this.desktopMediaQueryHandler = (a) => {
+  constructor(s) {
+    o(this, s), this.desktopMediaQuery = r(), this.desktopMediaQueryHandler = (a) => {
       a.matches ? this.expandLeftSidebar() : this.collapseLeftSidebar();
     }, this.collapseLeftSidebar = () => {
       this.collapsedSidebar = !0, this.collapsing = !0, setTimeout(() => {
@@ -22,8 +22,8 @@ const n = `:host{--extended-sidebar-width:17rem;--collapsed-sidebar-width:4rem;d
     }, this.onBackdropClick = () => {
       this.collapsedSidebar || this.collapseLeftSidebar();
     }, this.onSidebarClick = () => {
-      var a, s;
-      this.collapsedSidebar && ((a = document.activeElement) === null || a === void 0 || a.blur(), (s = d()) === null || s === void 0 || s.blur());
+      var a, l;
+      this.collapsedSidebar && ((a = document.activeElement) === null || a === void 0 || a.blur(), (l = d()) === null || l === void 0 || l.blur());
     }, this.onSidebarMouseEnter = () => {
       this.sidebarHovered = !0;
     }, this.onSidebarMouseLeave = () => {
@@ -31,8 +31,7 @@ const n = `:host{--extended-sidebar-width:17rem;--collapsed-sidebar-width:4rem;d
     }, this.hideSidebar = void 0, this.mainNavigationLabel = "Main", this.sidebarToggleLabel = "Toggle sidebar", this.collapsedSidebar = void 0, this.collapsing = void 0, this.sidebarHovered = void 0;
   }
   componentWillLoad() {
-    var l, a;
-    this.desktopMediaQuery.matches || this.collapseLeftSidebar(), (a = (l = this.desktopMediaQuery).addEventListener) === null || a === void 0 || a.call(l, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.matches || this.collapseLeftSidebar(), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   async collapseSidebar() {
     this.collapseLeftSidebar();
@@ -41,16 +40,16 @@ const n = `:host{--extended-sidebar-width:17rem;--collapsed-sidebar-width:4rem;d
     this.expandLeftSidebar();
   }
   render() {
-    const l = i("shell-layout", {
+    const s = i("shell-layout", {
       "shell-layout--collapsed-sidebar": this.collapsedSidebar,
       "shell-layout--collapsing": this.collapsing,
       "shell-layout--hide-sidebar": this.hideSidebar
     }), a = i("shell-layout__sidebar-wrapper", {
       "shell-layout__sidebar-wrapper--hovered": this.sidebarHovered
-    }), s = i("shell-layout__backdrop", {
+    }), l = i("shell-layout__backdrop", {
       "shell-layout__backdrop--fading": this.collapsing
     });
-    return e(t, null, e("div", { class: l }, e("div", { class: "shell-layout__banner" }, e("slot", { name: "banner" })), e("div", { class: a, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, !this.hideSidebar && e("div", { class: "shell-layout__sidebar" }, e("header", { class: "shell-layout__header" }, e("div", { class: "shell-layout__logo-bar" }, e("div", { class: "shell-layout__expanded-logo" }, e("slot", { name: "logo-expanded" })), e("div", { class: "shell-layout__collapsed-logo" }, e("slot", { name: "logo-collapsed" })), e("div", { class: "shell-layout__toggle" }, e("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: !0, icon: this.collapsedSidebar ? "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>" : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), e("div", { class: "shell-layout__tools" }, e("slot", { name: "tools" }))), e("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, e("slot", { name: "main-navigation" })))), e("main", { class: "shell-layout__main" }, e("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && e("div", { class: s, onClick: this.onBackdropClick })));
+    return e(t, null, e("div", { class: s }, e("div", { class: "shell-layout__banner" }, e("slot", { name: "banner" })), e("div", { class: a, onClick: this.onSidebarClick, onMouseEnter: this.onSidebarMouseEnter, onMouseLeave: this.onSidebarMouseLeave }, !this.hideSidebar && e("div", { class: "shell-layout__sidebar" }, e("header", { class: "shell-layout__header" }, e("div", { class: "shell-layout__logo-bar" }, e("div", { class: "shell-layout__expanded-logo" }, e("slot", { name: "logo-expanded" })), e("div", { class: "shell-layout__collapsed-logo" }, e("slot", { name: "logo-collapsed" })), e("div", { class: "shell-layout__toggle" }, e("swirl-button", { swirlAriaExpanded: String(!this.collapsedSidebar), hideLabel: !0, icon: this.collapsedSidebar ? "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>" : "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", label: this.sidebarToggleLabel, onClick: this.toggleSidebar }))), e("div", { class: "shell-layout__tools" }, e("slot", { name: "tools" }))), e("nav", { "aria-label": this.mainNavigationLabel, class: "shell-layout__main-navigation" }, e("slot", { name: "main-navigation" })))), e("main", { class: "shell-layout__main" }, e("slot", { name: "main" })), (!this.collapsedSidebar || this.collapsing) && e("div", { class: l, onClick: this.onBackdropClick })));
   }
 };
 h.style = n;

package/dist/{swirl-shell-navigation-item.entry.d34f925e.js → swirl-shell-navigation-item.entry.c766206c.js}

@@ -1,4 +1,4 @@
-import { r as t, h as n, H as a, g as s } from "./index.bcb452a4.js";
+import { r as t, h as n, H as a, g as s } from "./index.a6af8737.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-skeleton-box.entry.27ad733c.js → swirl-skeleton-box.entry.252c46ac.js}

@@ -1,4 +1,4 @@
-import { r as t, h as s, H as i } from "./index.bcb452a4.js";
+import { r as t, h as s, H as i } from "./index.a6af8737.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-skeleton-text.entry.49510814.js → swirl-skeleton-text.entry.7f2b04b0.js}

@@ -1,4 +1,4 @@
-import { r as l, h as t, H as a } from "./index.bcb452a4.js";
+import { r as l, h as t, H as a } from "./index.a6af8737.js";
 import { c as s } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-stack.entry.a1f653ed.js → swirl-stack.entry.db184447.js}

@@ -1,4 +1,4 @@
-import { r as i, h as s, H as e } from "./index.bcb452a4.js";
+import { r as i, h as s, H as e } from "./index.a6af8737.js";
 import { c as n } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-status-indicator.entry.9304634f.js → swirl-status-indicator.entry.1dab0ab5.js}

@@ -1,4 +1,4 @@
-import { r as i, h as t, H as n } from "./index.bcb452a4.js";
+import { r as i, h as t, H as n } from "./index.a6af8737.js";
 import { c as a } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-switch.entry.f8b49dc4.js → swirl-switch.entry.f24d3def.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as e, H as a, g as l } from "./index.bcb452a4.js";
+import { r as h, c as n, h as e, H as a, g as l } from "./index.a6af8737.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/swirl-tab-bar.entry.78c5c7f5.js

@@ -0,0 +1,33 @@
+import { r, c as i, h as e, H as s } from "./index.a6af8737.js";
+import { c as b } from "./index-d280dafb.186cdb0e.js";
+import "react";
+import "react-dom";
+const o = '.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__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);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-base);cursor:pointer}.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)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;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}', n = class {
+  constructor(a) {
+    r(this, a), this.activateNextTab = i(this, "activateNextTab", 7), this.activatePreviousTab = i(this, "activatePreviousTab", 7), this.activateTab = i(this, "activateTab", 7), this.onKeyDown = (t) => {
+      t.code === "ArrowLeft" ? (t.preventDefault(), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.activateNextTab.emit());
+    }, this.disableTabSemantics = void 0, this.label = void 0, this.tabs = [];
+  }
+  render() {
+    return e(s, null, e("div", { "aria-label": this.label, class: "tab-bar", onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist" }, this.tabs.map((a) => {
+      const t = b("tab-bar__tab", {
+        "tab-bar__tab--active": a.active
+      });
+      return e("button", {
+        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
+        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
+        class: t,
+        id: `tab-${a.id}`,
+        key: a.id,
+        onClick: () => this.activateTab.emit(a.id),
+        role: this.disableTabSemantics ? void 0 : "tab",
+        tabIndex: this.disableTabSemantics ? void 0 : a.active ? 0 : -1,
+        type: "button"
+      }, e("span", { class: "tab-bar__tab-label" }, a.label));
+    })));
+  }
+};
+n.style = o;
+export {
+  n as swirl_tab_bar
+};

package/dist/{swirl-tab.entry.399a3a65.js → swirl-tab.entry.3cb80457.js}

@@ -1,4 +1,4 @@
-import { r as a, h as s, H as i } from "./index.bcb452a4.js";
+import { r as a, h as s, H as i } from "./index.a6af8737.js";
 import { c as e } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-table-cell.entry.8b2e7e21.js → swirl-table-cell.entry.7b616af9.js}

@@ -1,4 +1,4 @@
-import { r as e, h as s, H as l } from "./index.bcb452a4.js";
+import { r as e, h as s, H as l } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 const t = ":host{display:flex;overflow:auto;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-basis:0;flex-grow:1;flex-shrink:1;align-items:center;background-color:var(--s-surface-default);word-break:break-word;-webkit-hyphens:auto;hyphens:auto;transition:box-shadow 0.15s}:host(.table-cell--has-shadow-right){box-shadow:var(--swirl-table-sticky-right-shadow)}:host(.table-cell--has-shadow-left){box-shadow:var(--swirl-table-sticky-left-shadow)}:host *{box-sizing:border-box}", o = class {

package/dist/{swirl-table-column.entry.bf92e651.js → swirl-table-column.entry.eeb86966.js}

@@ -1,4 +1,4 @@
-import { r as e, h as t, H as i, g as r } from "./index.bcb452a4.js";
+import { r as e, h as t, H as i, g as r } from "./index.a6af8737.js";
 import { c as o } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";

package/dist/{swirl-table-row-group.entry.e138fe14.js → swirl-table-row-group.entry.4c04788f.js}

@@ -1,4 +1,4 @@
-import { r as o, h as r, H as s, g as t } from "./index.bcb452a4.js";
+import { r as o, h as r, H as s, g as t } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 const a = ":host{position:relative;z-index:1;display:block}:host *{box-sizing:border-box}.table-row-group__header-row{padding:var(--s-space-12) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-surface-raised-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}@media (min-width: 768px){.table-row-group__label{position:sticky;left:var(--s-space-16)}}", l = class {

package/dist/{swirl-table-row.entry.2d3d0db6.js → swirl-table-row.entry.bdf26d92.js}

@@ -1,4 +1,4 @@
-import { r as o, h as e, H as s, g as r } from "./index.bcb452a4.js";
+import { r as o, h as e, H as s, g as r } from "./index.a6af8737.js";
 import { c as l } from "./index-d280dafb.186cdb0e.js";
 import { c as i } from "./utils-bc84f36e.1fee9865.js";
 import "react";

package/dist/{swirl-table.entry.cab8c15b.js → swirl-table.entry.f9562e2b.js}

@@ -1,4 +1,4 @@
-import { r as g, h as r, H as v, g as _ } from "./index.bcb452a4.js";
+import { r as g, h as r, H as v, g as _ } from "./index.a6af8737.js";
 import { d as S, i as R } from "./utils-bc84f36e.1fee9865.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tabs.entry.aea77453.js → swirl-tabs.entry.15ae9cf5.js}

@@ -1,4 +1,4 @@
-import { r as e, c as b, h as s, H as r, g as n } from "./index.bcb452a4.js";
+import { r as e, c as b, h as s, H as r, g as n } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 const c = ".sc-swirl-tabs-h{display:block;width:100%}.sc-swirl-tabs-h *.sc-swirl-tabs{box-sizing:border-box}.tabs.sc-swirl-tabs{width:100%}", h = class {

package/dist/{swirl-tag.entry.c2e91413.js → swirl-tag.entry.040fa949.js}

@@ -1,4 +1,4 @@
-import { r, c as s, h as t, H as n } from "./index.bcb452a4.js";
+import { r, c as s, h as t, H as n } from "./index.a6af8737.js";
 import { c as i } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-text-input.entry.46bc6bf5.js → swirl-text-input.entry.2bf6b57c.js}

@@ -1,4 +1,4 @@
-import { r as h, c as n, h as i, H as d } from "./index.bcb452a4.js";
+import { r as h, c as n, h as i, H as d } from "./index.a6af8737.js";
 import { c } from "./index-d280dafb.186cdb0e.js";
 import { g as x } from "./utils-bc84f36e.1fee9865.js";
 import "react";
@@ -37,8 +37,7 @@ const w = '.sc-swirl-text-input-h{display:block;width:100%}.sc-swirl-text-input-
     }, this.autoComplete = "on", this.autoFocus = void 0, this.autoGrow = void 0, this.autoSelect = void 0, this.clearable = void 0, this.clearButtonLabel = "Clear input", this.disabled = void 0, this.disableDynamicWidth = void 0, this.swirlAriaAutocomplete = void 0, this.swirlAriaControls = void 0, this.swirlAriaDescribedby = void 0, this.swirlAriaExpanded = void 0, this.swirlRole = void 0, this.inline = void 0, this.invalid = void 0, this.maxLength = void 0, this.max = void 0, this.min = void 0, this.mode = void 0, this.placeholder = void 0, this.prefixLabel = void 0, this.required = void 0, this.rows = 1, this.showCharacterCounter = void 0, this.spellCheck = void 0, this.suffixLabel = void 0, this.step = void 0, this.passwordToggleLabel = "Toggle password display", this.type = "text", this.value = void 0, this.iconSize = 24, this.showPassword = !1;
   }
   componentDidLoad() {
-    var e, t;
-    this.updateIconSize(this.desktopMediaQuery.matches), (t = (e = this.desktopMediaQuery).addEventListener) === null || t === void 0 || t.call(e, "change", this.desktopMediaQueryHandler);
+    this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.adjustInputSize();

package/dist/{swirl-text.entry.c015c028.js → swirl-text.entry.f763813d.js}

@@ -1,4 +1,4 @@
-import { r as I, h as b, H as J, g as T } from "./index.bcb452a4.js";
+import { r as I, h as b, H as J, g as T } from "./index.a6af8737.js";
 import { c as V } from "./index-d280dafb.186cdb0e.js";
 import { b as G } from "./balancetext-fa49c64f.754e913c.js";
 import "react";

package/dist/{swirl-theme-provider.entry.1fdc47c8.js → swirl-theme-provider.entry.b19494f7.js}

@@ -1,4 +1,4 @@
-import { r as j, c as E, h as w, H } from "./index.bcb452a4.js";
+import { r as j, c as E, h as w, H } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 function d(e, t, o) {

package/dist/swirl-time-input.entry.f0564af2.js

@@ -0,0 +1,75 @@
+import { r as h, c, h as a, H as m, g as p } from "./index.a6af8737.js";
+import { c as v } from "./index-d280dafb.186cdb0e.js";
+import { p as r, i as o, f as l, m as f } from "./maska-4866b970.5336f9cb.js";
+import { g as w } from "./utils-bc84f36e.1fee9865.js";
+import "react";
+import "react-dom";
+const g = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}", d = "HH:mm:ss", b = class {
+  constructor(i) {
+    h(this, i), this.valueChange = c(this, "valueChange", 7), this.desktopMediaQuery = w(), this.desktopMediaQueryHandler = (e) => {
+      this.updateIconSize(e.matches);
+    }, this.onChange = (e) => {
+      const t = e.target.value;
+      let n;
+      t === "" && (this.value = void 0, this.valueChange.emit(void 0));
+      const s = r(t, this.format, new Date()), u = new RegExp(`^${this.format.replace(/[Hhms]/g, "\\d")}$`);
+      !Boolean(t.match(u)) || (o(s) ? n = l(s, d) : n = l(new Date(), d), this.value = n, this.valueChange.emit(n));
+    }, this.onBlur = (e) => {
+      const t = e.target, n = r(t.value, this.format, new Date());
+      if (!o(n) && Boolean(this.value)) {
+        const s = Boolean(this.value) ? r(this.value, d, new Date()) : void 0;
+        (!Boolean(s) || !o(s)) && (this.value = ""), t.value = l(s, this.format);
+      }
+    }, this.onInput = (e) => {
+      this.onChange(e);
+    }, this.onClick = (e) => {
+      e.preventDefault();
+    }, this.onFocus = (e) => {
+      this.handleAutoSelect(e);
+    }, this.autoFocus = void 0, this.autoSelect = void 0, this.disabled = void 0, this.format = "HH:mm", this.inline = void 0, this.invalid = void 0, this.placeholder = "hh:mm", this.required = void 0, this.swirlAriaDescribedby = void 0, this.value = void 0, this.iconSize = 24;
+  }
+  componentWillLoad() {
+    const i = Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);
+    this.id = `swirl-time-input-${i}`;
+  }
+  componentDidLoad() {
+    this.setupMask(), this.updateIconSize(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    var i, e, t;
+    (i = this.mask) === null || i === void 0 || i.destroy(), (t = (e = this.desktopMediaQuery).removeEventListener) === null || t === void 0 || t.call(e, "change", this.desktopMediaQueryHandler);
+  }
+  watchFormat() {
+    this.setupMask();
+  }
+  updateIconSize(i) {
+    this.iconSize = i ? 20 : 24;
+  }
+  handleAutoSelect(i) {
+    !this.autoSelect || i.target.select();
+  }
+  setupMask() {
+    var i;
+    (i = this.mask) === null || i === void 0 || i.destroy(), this.mask = f.create(`#${this.id}`, {
+      mask: this.format.replace(/[Hhms]/g, "#")
+    });
+  }
+  render() {
+    const i = this.invalid === !0 || this.invalid === !1 ? String(this.invalid) : void 0, e = Boolean(this.value) ? r(this.value, d, new Date()) : void 0, t = o(e) ? l(e, this.format) : void 0, n = v("time-input", {
+      "time-input--inline": this.inline
+    });
+    return a(m, null, a("div", { class: n }, a("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : void 0, "aria-invalid": i, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: t }), a("span", { class: "time-input__icon" }, a("swirl-icon-time-outlined", { size: this.iconSize }))));
+  }
+  get el() {
+    return p(this);
+  }
+  static get watchers() {
+    return {
+      format: ["watchFormat"]
+    };
+  }
+};
+b.style = g;
+export {
+  b as swirl_time_input
+};

package/dist/{swirl-toast-provider.entry.521f50be.js → swirl-toast-provider.entry.0cb6a3bd.js}

@@ -1,4 +1,4 @@
-import { r as n, h as a, H as r } from "./index.bcb452a4.js";
+import { r as n, h as a, H as r } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 const c = class {

package/dist/{swirl-toast.entry.34b6ebf3.js → swirl-toast.entry.720c6627.js}

@@ -1,4 +1,4 @@
-import { r as a, c as n, h as i, H as r } from "./index.bcb452a4.js";
+import { r as a, c as n, h as i, H as r } from "./index.a6af8737.js";
 import { c as d } from "./index-d280dafb.186cdb0e.js";
 import { g as c } from "./utils-bc84f36e.1fee9865.js";
 import "react";
@@ -15,8 +15,7 @@ const l = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;
     this.startTimer();
   }
   componentDidLoad() {
-    var s, t;
-    this.startTimer(), this.forceIconProps(this.desktopMediaQuery.matches), (t = (s = this.desktopMediaQuery).addEventListener) === null || t === void 0 || t.call(s, "change", this.desktopMediaQueryHandler);
+    this.startTimer(), this.forceIconProps(this.desktopMediaQuery.matches), this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var s, t;

package/dist/{swirl-tooltip.entry.9a5082ef.js → swirl-tooltip.entry.ceb91a48.js}

@@ -1,4 +1,4 @@
-import { r as n, h as i, H as l } from "./index.bcb452a4.js";
+import { r as n, h as i, H as l } from "./index.a6af8737.js";
 import { c as r, o as p, s as h, f as d } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
 import "react";
 import "react-dom";

package/dist/{swirl-tree-navigation-item.entry.d9caa4d1.js → swirl-tree-navigation-item.entry.33baae7a.js}

@@ -1,4 +1,4 @@
-import { r as t, h as i, H as s, g as r } from "./index.bcb452a4.js";
+import { r as t, h as i, H as s, g as r } from "./index.a6af8737.js";
 import { c as o } from "./index-d280dafb.186cdb0e.js";
 import "react";
 import "react-dom";

package/dist/{swirl-video-thumbnail.entry.70634469.js → swirl-video-thumbnail.entry.e6e096a5.js}

@@ -1,4 +1,4 @@
-import { r as t, h as n, H as e } from "./index.bcb452a4.js";
+import { r as t, h as n, H as e } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 const a = `:host {

package/dist/{swirl-visually-hidden.entry.9c978123.js → swirl-visually-hidden.entry.93328806.js}

@@ -1,4 +1,4 @@
-import { r as s, h as i, H as l } from "./index.bcb452a4.js";
+import { r as s, h as i, H as l } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 const t = ":host{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}", o = class {

package/dist/{wc-datepicker.entry.938ee608.js → wc-datepicker.entry.060797eb.js}

@@ -1,4 +1,4 @@
-import { r as R, c as S, h as n, H, g as E } from "./index.bcb452a4.js";
+import { r as R, c as S, h as n, H, g as E } from "./index.a6af8737.js";
 import "react";
 import "react-dom";
 function T(e, t) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components-react",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "type": "module",
   "files": [
     "dist"
@@ -18,7 +18,7 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@getflip/swirl-components": "^0.65.0",
+    "@getflip/swirl-components": "^0.66.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/swirl-tab-bar.entry.976c2322.js

@@ -1,33 +0,0 @@
-import { r, c as i, h as e, H as s } from "./index.bcb452a4.js";
-import { c as b } from "./index-d280dafb.186cdb0e.js";
-import "react";
-import "react-dom";
-const o = '.sc-swirl-tab-bar-h{display:block}.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(--s-border-width-default) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);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-base);cursor:pointer}.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)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;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}', n = class {
-  constructor(a) {
-    r(this, a), this.activateNextTab = i(this, "activateNextTab", 7), this.activatePreviousTab = i(this, "activatePreviousTab", 7), this.activateTab = i(this, "activateTab", 7), this.onKeyDown = (t) => {
-      t.code === "ArrowLeft" ? (t.preventDefault(), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.activateNextTab.emit());
-    }, this.disableTabSemantics = void 0, this.label = void 0, this.tabs = [];
-  }
-  render() {
-    return e(s, null, e("div", { "aria-label": this.label, class: "tab-bar", onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist" }, this.tabs.map((a) => {
-      const t = b("tab-bar__tab", {
-        "tab-bar__tab--active": a.active
-      });
-      return e("button", {
-        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
-        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
-        class: t,
-        id: `tab-${a.id}`,
-        key: a.id,
-        onClick: () => this.activateTab.emit(a.id),
-        role: this.disableTabSemantics ? void 0 : "tab",
-        tabIndex: this.disableTabSemantics ? void 0 : a.active ? 0 : -1,
-        type: "button"
-      }, e("span", { class: "tab-bar__tab-label" }, a.label));
-    })));
-  }
-};
-n.style = o;
-export {
-  n as swirl_tab_bar
-};