@getflip/swirl-components-react 0.10.0 → 0.11.0

package/dist/swirl-action-list-item.entry.447b2688.js

@@ -0,0 +1,34 @@
+import { r as n, h as s, H as l } from "./index.9489626d.js";
+import { c as r } from "./index-c3028f7d.557956d2.js";
+import { g as c } from "./utils-7efaa1c6.4a9c3721.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const d = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-hovered)}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}", m = class {
+  constructor(t) {
+    n(this, t), this.intent = "default", this.size = "m", this.desktopMediaQuery = c(), this.desktopMediaQueryHandler = (i) => {
+      this.forceIconProps(i.matches);
+    };
+  }
+  componentDidLoad() {
+    var t, i;
+    this.forceIconProps(this.desktopMediaQuery.matches), (i = (t = this.desktopMediaQuery).addEventListener) === null || i === void 0 || i.call(t, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var t, i;
+    (i = (t = this.desktopMediaQuery).removeEventListener) === null || i === void 0 || i.call(t, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(t) {
+    var i, e;
+    const a = (i = this.iconEl) === null || i === void 0 ? void 0 : i.children[0], o = (e = this.suffixEl) === null || e === void 0 ? void 0 : e.children[0];
+    a == null || a.setAttribute("size", t ? "20" : "24"), o == null || o.setAttribute("size", t ? "20" : "24");
+  }
+  render() {
+    const t = Boolean(this.suffix) && !this.disabled, i = r("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
+    return s(l, null, s("button", { class: i, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && s("span", { class: "action-list-item__icon", innerHTML: this.icon, ref: (e) => this.iconEl = e }), s("span", { class: "action-list-item__label-container" }, s("span", { class: "action-list-item__label" }, this.label), this.description && s("span", { class: "action-list-item__description" }, this.description)), t && s("span", { class: "action-list-item__suffix", innerHTML: this.suffix, ref: (e) => this.suffixEl = e })));
+  }
+};
+m.style = d;
+export {
+  m as swirl_action_list_item
+};

package/dist/swirl-action-list-section.entry.e84808c9.js

@@ -0,0 +1,15 @@
+import { r as i, h as t, H as e } from "./index.9489626d.js";
+import "react";
+import "react-dom";
+const a = ":host{display:block}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-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){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}", o = class {
+  constructor(s) {
+    i(this, s);
+  }
+  render() {
+    return t(e, null, t("div", { "aria-labelledby": "label", class: "action-list-section", role: "group" }, t("span", { class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), t("div", { class: "action-list-section__items" }, t("slot", null))));
+  }
+};
+o.style = a;
+export {
+  o as swirl_action_list_section
+};

package/dist/{flip-action-list.entry.7bdcff2f.js → swirl-action-list.entry.2fb802dc.js}

@@ -1,5 +1,5 @@
-import { r as s, h as i, H as n, g as r } from "./index.6f8c9509.js";
-import { q as c } from "./utils-39b2afe8.37b54ba4.js";
+import { r as s, h as i, H as n, g as r } from "./index.9489626d.js";
+import { q as c } from "./utils-7efaa1c6.4a9c3721.js";
 import "react";
 import "react-dom";
 const l = ":host{display:block}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}", a = class {
@@ -34,5 +34,5 @@ const l = ":host{display:block}:host *{box-sizing:border-box}.action-list{backgr
 };
 a.style = l;
 export {
-  a as flip_action_list
+  a as swirl_action_list
 };

package/dist/{flip-app-layout_5.entry.6e395cd4.js → swirl-app-layout_5.entry.875542b9.js}

@@ -1,6 +1,6 @@
-import { r as n, c as s, h as a, H as r, g as l } from "./index.6f8c9509.js";
-import { c as p } from "./index-6d2e18c6.289636d4.js";
-import { i as d } from "./utils-39b2afe8.37b54ba4.js";
+import { r as n, c as s, h as a, H as r, g as l } from "./index.9489626d.js";
+import { c as p } from "./index-c3028f7d.557956d2.js";
+import { i as d } from "./utils-7efaa1c6.4a9c3721.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-44457d8d.ba94af77.js";
@@ -94,7 +94,7 @@ const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-b
       "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
       "app-layout--sidebar-closing": this.sidebarClosing
     });
-    return a(r, null, a("section", { "aria-labelledby": "app-name", class: i, role: "document", tabIndex: 0 }, a("div", { class: "app-layout__grid" }, a("header", { class: "app-layout__header" }, this.showNavigationBackButton && a("span", { class: "app-layout__navigation-back-button" }, a("flip-button", { hideLabel: !0, icon: "<flip-icon-arrow-back></flip-icon-arrow-back>", intent: "primary", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), a("flip-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 2, text: this.appName }), this.hasNavigation && a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, a("slot", { name: "navigation" })), a("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? a("header", { class: "app-layout__app-bar" }, t && a("span", { class: "app-layout__back-to-navigation-button" }, a("flip-button", { hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<flip-icon-close></flip-icon-close>" : "<flip-icon-arrow-back></flip-icon-arrow-back>", intent: "primary", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), this.appBarMedia && a("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia }), a("div", { class: "app-layout__app-bar-heading" }, this.heading && a("flip-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading }), this.subheading && a("span", { class: "app-layout__app-bar-subheading" }, this.subheading)), a("div", { class: "app-layout__app-bar-controls" }, a("slot", { name: "app-bar-controls" }))) : a("header", { class: "app-layout__app-bar" }, a("flip-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("div", { class: "app-layout__content" }, a("slot", { name: "content" }))), a("aside", { class: "app-layout__sidebar" }, a("header", { class: "app-layout__sidebar-header" }, a("flip-button", { class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<flip-icon-close></flip-icon-close>", intent: "primary", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), a("flip-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 2, text: this.sidebarHeading })), a("div", { class: "app-layout__sidebar-content" }, a("slot", { name: "sidebar" }))), this.ctaLabel && a("span", { class: "app-layout__floating-cta" }, a("flip-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))));
+    return a(r, null, a("section", { "aria-labelledby": "app-name", class: i, role: "document", tabIndex: 0 }, a("div", { class: "app-layout__grid" }, a("header", { class: "app-layout__header" }, this.showNavigationBackButton && a("span", { class: "app-layout__navigation-back-button" }, a("swirl-button", { hideLabel: !0, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", intent: "primary", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick })), a("swirl-heading", { as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 2, text: this.appName }), this.hasNavigation && a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("nav", { "aria-label": this.navigationLabel, class: "app-layout__navigation" }, a("slot", { name: "navigation" })), a("section", { "aria-labelledby": this.hasNavigation ? "heading" : "app-name", class: "app-layout__body" }, this.hasNavigation ? a("header", { class: "app-layout__app-bar" }, t && a("span", { class: "app-layout__back-to-navigation-button" }, a("swirl-button", { hideLabel: !0, icon: this.transitionStyle === "dialog" ? "<swirl-icon-close></swirl-icon-close>" : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", intent: "primary", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick })), this.appBarMedia && a("div", { class: "app-layout__app-bar-media", innerHTML: this.appBarMedia }), a("div", { class: "app-layout__app-bar-heading" }, this.heading && a("swirl-heading", { as: "h2", headingId: "heading", level: 4, text: this.heading }), this.subheading && a("span", { class: "app-layout__app-bar-subheading" }, this.subheading)), a("div", { class: "app-layout__app-bar-controls" }, a("slot", { name: "app-bar-controls" }))) : a("header", { class: "app-layout__app-bar" }, a("swirl-heading", { as: "h1", headingId: "app-name", level: 2, text: this.appName }), a("span", { class: "app-layout__navigation-controls" }, a("slot", { name: "navigation-controls" }))), a("div", { class: "app-layout__content" }, a("slot", { name: "content" }))), a("aside", { class: "app-layout__sidebar" }, a("header", { class: "app-layout__sidebar-header" }, a("swirl-button", { class: "app-layout__sidebar-close-button", hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", intent: "primary", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), a("swirl-heading", { as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 2, text: this.sidebarHeading })), a("div", { class: "app-layout__sidebar-content" }, a("slot", { name: "sidebar" }))), this.ctaLabel && a("span", { class: "app-layout__floating-cta" }, a("swirl-button", { hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })))));
   }
   get el() {
     return l(this);
@@ -108,10 +108,14 @@ const m = `:host{display:flex;width:100%;height:100%}:host *{box-sizing:border-b
 h.style = m;
 const g = ":host{display:block;width:100%}:host *{box-sizing:border-box}.box--bordered{border:var(--s-border-width-default) solid var(--s-border-default)}.box--center-block{display:flex;align-items:center}.box--center-inline{display:flex;justify-content:center}.box--cover{width:100%;height:100%}", v = class {
   constructor(t) {
-    n(this, t), this.as = "div", this.padding = "0";
+    n(this, t), this.as = "div", this.overflow = "visible", this.padding = "0";
   }
   render() {
-    const t = this.as, i = { padding: `var(--s-space-${this.padding})` }, e = p("box", {
+    const t = this.as, i = {
+      overflow: this.overflow,
+      padding: `var(--s-space-${this.padding})`,
+      position: Boolean(this.overflow) ? "relative" : ""
+    }, e = p("box", {
       "box--bordered": this.bordered,
       "box--center-block": this.centerBlock,
       "box--center-inline": this.centerInline,
@@ -121,16 +125,16 @@ const g = ":host{display:block;width:100%}:host *{box-sizing:border-box}.box--bo
   }
 };
 v.style = g;
-const _ = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}", f = class {
+const _ = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}", w = class {
   constructor(t) {
     n(this, t);
   }
   render() {
-    return a(r, null, a("div", { class: "empty-state" }, this.illustration && a("img", { alt: "", class: "empty-state__illustration", src: this.illustration }), a("div", { class: "empty-state__body" }, this.heading && a("flip-heading", { align: "center", as: "p", text: this.heading }), a("div", { class: "empty-state__content" }, a("flip-text", { align: "center", color: "subdued" }, a("slot", null))))));
+    return a(r, null, a("div", { class: "empty-state" }, this.illustration && a("img", { alt: "", class: "empty-state__illustration", src: this.illustration }), a("div", { class: "empty-state__body" }, this.heading && a("swirl-heading", { align: "center", as: "p", text: this.heading }), a("div", { class: "empty-state__content" }, a("swirl-text", { align: "center", color: "subdued" }, a("slot", null))))));
   }
 };
-f.style = _;
-const w = ":host{display:block;width:100%}:host *{box-sizing:border-box}", k = class {
+w.style = _;
+const f = ":host{display:block;width:100%}:host *{box-sizing:border-box}", x = class {
   constructor(t) {
     n(this, t), this.focusedIndex = 0, this.onFocus = () => {
       this.focusItemAtIndex(this.focusedIndex);
@@ -149,7 +153,7 @@ const w = ":host{display:block;width:100%}:host *{box-sizing:border-box}", k = c
     this.collectItems(), this.removeItemsFromTabOrder();
   }
   collectItems() {
-    this.items = Array.from(this.el.querySelectorAll("flip-resource-list-item, flip-resource-list-file-item"));
+    this.items = Array.from(this.el.querySelectorAll("swirl-resource-list-item, swirl-resource-list-file-item"));
   }
   removeItemsFromTabOrder() {
     this.items.forEach((t) => {
@@ -166,14 +170,14 @@ const w = ":host{display:block;width:100%}:host *{box-sizing:border-box}", k = c
     e.setAttribute("tabIndex", "0"), e.focus(), this.focusedIndex = t;
   }
   render() {
-    return a(r, { onKeyDown: this.onKeyDown }, a("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, a("slot", null)));
+    return a(r, { onKeyDown: this.onKeyDown }, a("swirl-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, a("slot", null)));
   }
   get el() {
     return l(this);
   }
 };
-k.style = w;
-const x = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{outline:none}.resource-list-item__content:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content:focus-visible .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-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-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-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-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}', C = class {
+x.style = f;
+const k = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (min-width: 768px){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--swirl-avatar-group-border-color:var(--s-background-default);--swirl-badge-border-color:var(--s-background-default);display:flex;width:100%;margin:0;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-pressed);--swirl-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{outline:none}.resource-list-item__content:focus-visible{background-color:var(--s-background-hovered)}.resource-list-item__content:focus-visible .resource-list-item__media{--swirl-avatar-group-border-color:var(--s-background-hovered);--swirl-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.resource-list-item__content{padding:var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-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-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-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-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (min-width: 768px){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}', C = class {
   constructor(t) {
     n(this, t), this.valueChange = s(this, "valueChange", 7), this.checked = !1, this.menuTriggerLabel = "Options", this.onClick = () => {
       !this.selectable || (this.checked = !this.checked, this.valueChange.emit(this.checked));
@@ -185,11 +189,11 @@ const x = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resourc
     this.forceAvatarProps(), this.forceThumbnailProps();
   }
   forceAvatarProps() {
-    const t = this.el.querySelector("flip-avatar");
+    const t = this.el.querySelector("swirl-avatar");
     !Boolean(t) || (t.removeAttribute("interactive"), t.removeAttribute("show-label"), t.removeAttribute("variant"), t.setAttribute("size", "l"));
   }
   forceThumbnailProps() {
-    const t = this.el.querySelector("flip-thumbnail");
+    const t = this.el.querySelector("swirl-thumbnail");
     !Boolean(t) || (t.setAttribute("format", "landscape"), ["s", "m"].includes(t.getAttribute("size")) || t.setAttribute("size", "m"));
   }
   render() {
@@ -199,17 +203,17 @@ const x = ':host{display:block;width:100%}:host *{box-sizing:border-box}.resourc
       "resource-list-item--hide-divider": this.hideDivider,
       "resource-list-item--selectable": this.selectable
     });
-    return a(r, { role: "row" }, a("div", { class: y, role: "gridcell" }, a(t, { "aria-checked": b, "aria-disabled": i ? "true" : void 0, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: i, onClick: this.onClick, role: c, tabIndex: 0 }, Boolean(this.media) && a("span", { class: "resource-list-item__media", innerHTML: this.media }), a("span", { class: "resource-list-item__label-container" }, a("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && a("span", { class: "resource-list-item__description" }, this.description))), this.selectable && a("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, a("span", { class: "resource-list-item__checkbox-icon" }, this.checked && a("flip-icon-check-strong", null))), u && a("span", { class: "resource-list-item__meta" }, this.meta), o && a("flip-button", { "aria-disabled": i ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: i, hideLabel: !0, icon: "<flip-icon-more-horizontal></flip-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })));
+    return a(r, { role: "row" }, a("div", { class: y, role: "gridcell" }, a(t, { "aria-checked": b, "aria-disabled": i ? "true" : void 0, "aria-labelledby": "label", class: "resource-list-item__content", href: this.href, disabled: i, onClick: this.onClick, part: "resource-list-item__content", role: c, tabIndex: 0 }, Boolean(this.media) && a("span", { class: "resource-list-item__media", innerHTML: this.media }), a("span", { class: "resource-list-item__label-container" }, a("span", { class: "resource-list-item__label", id: "label" }, this.label), this.description && a("span", { class: "resource-list-item__description" }, this.description))), this.selectable && a("span", { "aria-hidden": "true", class: "resource-list-item__checkbox" }, a("span", { class: "resource-list-item__checkbox-icon" }, this.checked && a("swirl-icon-check-strong", null))), u && a("span", { class: "resource-list-item__meta" }, this.meta), o && a("swirl-button", { "aria-disabled": i ? "true" : void 0, class: "resource-list-item__menu-trigger", disabled: i, hideLabel: !0, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", id: this.menuTriggerId, intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })));
   }
   get el() {
     return l(this);
   }
 };
-C.style = x;
+C.style = k;
 export {
-  h as flip_app_layout,
-  v as flip_box,
-  f as flip_empty_state,
-  k as flip_resource_list,
-  C as flip_resource_list_item
+  h as swirl_app_layout,
+  v as swirl_box,
+  w as swirl_empty_state,
+  x as swirl_resource_list,
+  C as swirl_resource_list_item
 };

package/dist/swirl-autocomplete.entry.7be53f33.js

@@ -0,0 +1,70 @@
+import { r as n, c as r, h as o, H as c, g as u } from "./index.9489626d.js";
+import { a as h, c as d, o as p } from "./floating-ui.dom.esm-1a4e8b8a.87557233.js";
+import { c as m } from "./index-c3028f7d.557956d2.js";
+import { d as b } from "./utils-7efaa1c6.4a9c3721.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const g = ".sc-swirl-autocomplete-h{display:block}.sc-swirl-autocomplete-h *.sc-swirl-autocomplete{box-sizing:border-box}.autocomplete--inactive.sc-swirl-autocomplete .autocomplete__listbox-container.sc-swirl-autocomplete{display:none}.autocomplete__listbox-container.sc-swirl-autocomplete{position:fixed;z-index:var(--s-z-40);overflow:hidden;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.autocomplete__listbox-container.sc-swirl-autocomplete:empty{display:none}.autocomplete__spinner.sc-swirl-autocomplete{display:flex;padding:var(--s-space-16);justify-content:center;align-items:center}", v = class {
+  constructor(s) {
+    n(this, s), this.valueChange = r(this, "valueChange", 7), this.clearable = !0, this.clearButtonLabel = "Clear input", this.generateSuggestions = async () => [], this.menuLabel = "Suggestions", this.active = !1, this.loading = !1, this.suggestions = [], this.onChange = b(async (t) => {
+      this.value = t.detail, this.valueChange.emit(this.value), this.updateSuggestions(), this.open();
+    }, 250, !1), this.onSelect = (t) => {
+      var i;
+      Boolean(t.detail[0]) && (this.value = t.detail[0], this.valueChange.emit(this.value)), (i = this.inputEl.querySelector("input")) === null || i === void 0 || i.focus(), this.close();
+    }, this.onFocusOut = (t) => {
+      const i = t.relatedTarget;
+      Boolean(i) && !this.el.contains(i) && this.close();
+    }, this.onFocus = () => {
+      this.updateSuggestions(), this.open();
+    }, this.onKeyDown = (t) => {
+      t.code === "Escape" && (t.preventDefault(), this.inputEl.querySelector("input").focus(), this.close());
+    }, this.onInputKeyDown = (t) => {
+      t.code === "ArrowDown" && (t.preventDefault(), this.listboxEl.querySelector('[role="listbox"]').focus());
+    };
+  }
+  componentWillLoad() {
+    const s = document.querySelectorAll("swirl-datepicker").length;
+    this.id = `autocomplete-${s}`;
+  }
+  onWindowClick(s) {
+    const t = s.target;
+    this.el.contains(t) || this.close();
+  }
+  async close() {
+    !this.active || (this.disableAutoUpdate && this.disableAutoUpdate(), this.active = !1);
+  }
+  async open() {
+    this.active || (this.active = !0, requestAnimationFrame(async () => {
+      await this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = h(this.inputEl, this.listboxContainerEl, this.reposition.bind(this)), this.listboxContainerEl.scrollTop = 0;
+    }));
+  }
+  async reposition() {
+    !Boolean(this.listboxContainerEl) || (this.position = await d(this.inputEl, this.listboxContainerEl, {
+      middleware: [p({ crossAxis: -16, mainAxis: 16 })],
+      placement: "bottom-start",
+      strategy: "fixed"
+    }));
+  }
+  async updateSuggestions() {
+    this.loading = !0, this.suggestions = [], this.suggestions = await this.generateSuggestions(this.value), this.loading = !1;
+  }
+  render() {
+    var s, t, i;
+    const a = `${this.id}-suggestions`, l = m("autocomplete", {
+      "autocomplete--inactive": !this.active
+    });
+    return o(c, null, o("div", { class: l, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, o("swirl-text-input", { autoSelect: this.autoSelect, class: "autocomplete__input", clearable: this.clearable, clearButtonLabel: this.clearButtonLabel, disabled: this.disabled, disableDynamicWidth: !0, swirlAriaAutocomplete: "list", swirlAriaControls: a, swirlAriaDescribedby: this.swirlAriaDescribedby, swirlAriaExpanded: String(this.active), swirlRole: "combobox", id: this.id, invalid: this.invalid, onInputFocus: this.onFocus, onKeyDown: this.onInputKeyDown, onValueChange: this.onChange, maxLength: this.maxLength, mode: this.mode, ref: (e) => this.inputEl = e, required: this.required, spellCheck: this.spellCheck, value: this.value }), o("div", { class: "autocomplete__listbox-container", ref: (e) => this.listboxContainerEl = e, style: {
+      top: Boolean(this.position) ? `${(s = this.position) === null || s === void 0 ? void 0 : s.y}px` : "",
+      left: Boolean(this.position) ? `${(t = this.position) === null || t === void 0 ? void 0 : t.x}px` : "",
+      width: `${((i = this.inputEl) === null || i === void 0 ? void 0 : i.getBoundingClientRect().width) + 32}px`
+    } }, this.loading && o("div", { class: "autocomplete__spinner" }, o("swirl-spinner", null)), this.suggestions.length > 0 && o("swirl-option-list", { label: this.menuLabel, onValueChange: this.onSelect, optionListId: a, ref: (e) => this.listboxEl = e, value: [this.value] }, this.suggestions.map((e) => o("swirl-option-list-item", { selected: this.value === e.label, key: e.id, disabled: e.disabled, label: e.label, value: e.label }))))));
+  }
+  get el() {
+    return u(this);
+  }
+};
+v.style = g;
+export {
+  v as swirl_autocomplete
+};

package/dist/{flip-avatar-group.entry.4192d45c.js → swirl-avatar-group.entry.38bafbf0.js}

@@ -1,11 +1,11 @@
-import { r as i, h as a, H as s } from "./index.6f8c9509.js";
-import { c as e } from "./index-6d2e18c6.289636d4.js";
+import { r as s, h as a, H as i } from "./index.9489626d.js";
+import { c as e } from "./index-c3028f7d.557956d2.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const d = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--flip-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}", l = class {
+const d = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--swirl-avatar-group-border-color);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}", l = class {
   constructor(r) {
-    i(this, r);
+    s(this, r);
   }
   componentDidLoad() {
     this.forceBadgeProps();
@@ -13,17 +13,17 @@ const d = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group
   forceBadgeProps() {
     if (!Boolean(this.badge))
       return;
-    const r = this.badgeEl.querySelector("flip-badge");
+    const r = this.badgeEl.querySelector("swirl-badge");
     r == null || r.setAttribute("size", "m");
   }
   render() {
     const r = e("avatar-group", {
       "avatar-group--has-badge": Boolean(this.badge)
     }), o = e("avatar-group__badge");
-    return a(s, null, a("div", { class: r, role: "group" }, a("slot", null), this.badge && a("span", { class: o, innerHTML: this.badge, ref: (t) => this.badgeEl = t })));
+    return a(i, null, a("div", { class: r, role: "group" }, a("slot", null), this.badge && a("span", { class: o, innerHTML: this.badge, ref: (t) => this.badgeEl = t })));
   }
 };
 l.style = d;
 export {
-  l as flip_avatar_group
+  l as swirl_avatar_group
 };

package/dist/{flip-avatar.entry.f5cb1fd9.js → swirl-avatar.entry.6107d926.js}

@@ -1,5 +1,5 @@
-import { r as h, h as i, H as g, g as u } from "./index.6f8c9509.js";
-import { c as s } from "./index-6d2e18c6.289636d4.js";
+import { r as h, h as i, H as g, g as u } from "./index.9489626d.js";
+import { c as s } from "./index-c3028f7d.557956d2.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-44457d8d.ba94af77.js";
@@ -31,16 +31,16 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
   forceBadgeProps() {
     if (!Boolean(this.badge))
       return;
-    const t = this.badgeEl.querySelector("flip-badge");
+    const t = this.badgeEl.querySelector("swirl-badge");
     t == null || t.setAttribute("size", "m");
   }
   render() {
-    const t = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0), a = !t && Boolean(this.initials), e = !t && !a && Boolean(this.icon), r = !t && !a && !e, o = Boolean(this.badge) && this.size === "m", v = this.interactive ? "button" : "img", l = s("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
-      "avatar--has-icon": e || r,
+    const t = Boolean(this.src) && (this.imageAvailable || this.imageAvailable === void 0), a = !t && Boolean(this.initials), r = !t && !a && Boolean(this.icon), e = !t && !a && !r, o = Boolean(this.badge) && this.size === "m", v = this.interactive ? "button" : "img", l = s("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": r || e,
       "avatar--has-initials": a,
       "avatar--interactive": this.interactive
     }), c = s("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
-    return i(g, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: v, tabIndex: this.interactive ? 0 : void 0 }, i("span", { class: l, part: "avatar" }, t && i("span", { class: "avatar__image" }, i("img", { alt: "", height: n[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: n[this.size] })), a && i("span", { class: "avatar__initials" }, i("span", null, this.initials)), e && i("span", { class: "avatar__icon", innerHTML: this.icon }), r && i("span", { class: "avatar__icon" }, i("flip-icon-person", null)), o && i("span", { class: c, innerHTML: this.badge, ref: (d) => this.badgeEl = d })), this.showLabel && i("span", { "aria-hidden": !0, class: "avatar__label" }, this.label));
+    return i(g, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : void 0, onKeyup: this.interactive ? this.onKeyup : void 0, role: v, tabIndex: this.interactive ? 0 : void 0 }, i("span", { class: l, part: "avatar" }, t && i("span", { class: "avatar__image" }, i("img", { alt: "", height: n[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: n[this.size] })), a && i("span", { class: "avatar__initials" }, i("span", null, this.initials)), r && i("span", { class: "avatar__icon", innerHTML: this.icon }), e && i("span", { class: "avatar__icon" }, i("swirl-icon-person", null)), o && i("span", { class: c, innerHTML: this.badge, ref: (d) => this.badgeEl = d })), this.showLabel && i("span", { "aria-hidden": !0, class: "avatar__label" }, this.label));
   }
   get element() {
     return u(this);
@@ -53,5 +53,5 @@ const m = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direc
 };
 p.style = m;
 export {
-  p as flip_avatar
+  p as swirl_avatar
 };

package/dist/swirl-badge.entry.1f4d89cf.js

@@ -0,0 +1,20 @@
+import { r as t, h as e, H as i } from "./index.9489626d.js";
+import { c as r } from "./index-c3028f7d.557956d2.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const s = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--swirl-badge-border-color);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.badge--intent-banana{color:var(--s-text-dark);background-color:var(--s-decorative-banana-surface)}.badge--intent-blueberry{color:var(--s-text-on-status);background-color:var(--s-decorative-blueberry-surface)}.badge--intent-chilli{color:var(--s-text-on-status);background-color:var(--s-decorative-chilli-surface)}.badge--intent-grape{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-pumpkin{color:var(--s-text-dark);background-color:var(--s-decorative-pumpkin-surface)}.badge--intent-radish{color:var(--s-text-on-status);background-color:var(--s-decorative-radish-surface)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}", n = class {
+  constructor(a) {
+    t(this, a), this.intent = "critical", this.size = "m", this.variant = "default";
+  }
+  render() {
+    const a = r("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
+      "badge--has-icon": this.icon
+    });
+    return e(i, { role: "status" }, e("span", { class: a }, this.icon && e("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === void 0 && e("span", { class: "badge__label" }, this.label)));
+  }
+};
+n.style = s;
+export {
+  n as swirl_badge
+};

package/dist/swirl-banner.entry.2d29edfc.js

@@ -0,0 +1,49 @@
+import { r as o, c as r, h as t, H as c, g as l } from "./index.9489626d.js";
+import { c as b } from "./index-c3028f7d.557956d2.js";
+import { g as d } from "./utils-7efaa1c6.4a9c3721.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const h = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:flex-start}.banner:focus:not(:focus-visible){outline:none}.banner:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{position:relative;top:var(--s-space-2);display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;line-height:var(--s-line-height-base);gap:var(--s-space-16)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__action-button,.banner__dismiss-button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", u = {
+  default: void 0,
+  critical: "<swirl-icon-error></swirl-icon-error>",
+  success: "<swirl-icon-check-circle></swirl-icon-check-circle>",
+  warning: "<swirl-icon-warning></swirl-icon-warning>",
+  info: "<swirl-icon-info></swirl-icon-info>"
+}, _ = class {
+  constructor(i) {
+    o(this, i), this.action = r(this, "action", 7), this.dismiss = r(this, "dismiss", 7), this.dismissable = !1, this.dismissLabel = "Dismiss", this.importance = "status", this.intent = "default", this.showIcon = !1, this.desktopMediaQuery = d(), this.desktopMediaQueryHandler = (n) => {
+      this.forceIconProps(n.matches);
+    }, this.onAction = (n) => {
+      this.action.emit(n);
+    }, this.onDismiss = (n) => {
+      this.dismiss.emit(n);
+    };
+  }
+  componentDidLoad() {
+    var i, n;
+    this.forceIconProps(this.desktopMediaQuery.matches), (n = (i = this.desktopMediaQuery).addEventListener) === null || n === void 0 || n.call(i, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var i, n;
+    (n = (i = this.desktopMediaQuery).removeEventListener) === null || n === void 0 || n.call(i, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(i) {
+    var n, s;
+    const a = (n = this.iconEl) === null || n === void 0 ? void 0 : n.children[0], e = (s = this.dismissButtonEl) === null || s === void 0 ? void 0 : s.children[0];
+    a == null || a.setAttribute("size", i ? "20" : "24"), e == null || e.setAttribute("size", i ? "20" : "24");
+  }
+  render() {
+    const i = u[this.intent], n = Boolean(this.actionLabel) || this.dismissable, s = this.showIcon && Boolean(i), a = b("banner", `banner--intent-${this.intent}`, {
+      "banner--has-icon": s
+    });
+    return t(c, null, t("div", { "aria-describedby": "content", class: a, role: this.importance, tabIndex: 0 }, s && t("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: i, ref: (e) => this.iconEl = e }), t("span", { class: "banner__content", id: "content", part: "banner__content" }, this.content), n && t("span", { class: "banner__controls" }, this.actionLabel && t("button", { class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel), this.dismissable && t("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (e) => this.dismissButtonEl = e, type: "button" }, t("swirl-icon-close", null)))));
+  }
+  get element() {
+    return l(this);
+  }
+};
+_.style = h;
+export {
+  _ as swirl_banner
+};

package/dist/swirl-button-group.entry.8ce93c3c.js

@@ -0,0 +1,20 @@
+import { r as s, h as r, H as i } from "./index.9489626d.js";
+import { c as e } from "./index-c3028f7d.557956d2.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const n = ':host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:"";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled="false"][intent="primary"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}', a = class {
+  constructor(t) {
+    s(this, t), this.orientation = "horizontal";
+  }
+  render() {
+    const t = this.segmented ? "0" : "8", o = e("button-group", {
+      "button-group--segmented": this.segmented
+    });
+    return r(i, null, r("swirl-stack", { align: this.orientation === "vertical" && this.stretch ? "stretch" : "start", class: o, justify: this.orientation === "horizontal" && this.stretch ? "stretch" : "start", orientation: this.orientation, role: "group", spacing: t, wrap: this.wrap }, r("slot", null)));
+  }
+};
+a.style = n;
+export {
+  a as swirl_button_group
+};

package/dist/swirl-button.entry.42b57f80.js

@@ -0,0 +1,52 @@
+import { r as s, h as r, H as e } from "./index.9489626d.js";
+import { c as l } from "./index-c3028f7d.557956d2.js";
+import { g as c } from "./utils-7efaa1c6.4a9c3721.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const u = `.sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button.sc-swirl-button:disabled{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-default);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus:not(:focus-visible){outline:none}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-action-neutral-default)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-swirl-button:disabled{background-color:var(--s-action-neutral-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-outline.sc-swirl-button{border:var(--s-border-width-default) solid var(--s-border-strong);color:var(--s-action-primary-default)}.button--variant-outline.sc-swirl-button:disabled{border-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical);border-color:var(--s-text-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-action-primary-default)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-swirl-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-swirl-button:active:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-swirl-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+    rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-swirl-button:hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
+      rgba(255, 255, 255, 0.4)}.button--variant-on-image.sc-swirl-button:active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+      rgba(255, 255, 255, 0.5)}.button--variant-on-image.sc-swirl-button:disabled{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+      rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-swirl-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-swirl-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(
+      --swirl-icon-button-border-bottom-right-radius
+    );border-bottom-left-radius:var(
+      --swirl-icon-button-border-bottom-left-radius
+    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button__icon.sc-swirl-button{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}`, b = class {
+  constructor(o) {
+    s(this, o), this.iconPosition = "start", this.intent = "default", this.size = "m", this.type = "button", this.variant = "ghost", this.desktopMediaQuery = c(), this.desktopMediaQueryHandler = (t) => {
+      this.forceIconProps(t.matches);
+    };
+  }
+  componentDidLoad() {
+    var o, t;
+    this.forceIconProps(this.desktopMediaQuery.matches), (t = (o = this.desktopMediaQuery).addEventListener) === null || t === void 0 || t.call(o, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var o, t;
+    (t = (o = this.desktopMediaQuery).removeEventListener) === null || t === void 0 || t.call(o, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(o) {
+    if (!Boolean(this.iconEl))
+      return;
+    const t = this.iconEl.children[0];
+    t == null || t.setAttribute("size", o ? "20" : "24");
+  }
+  getAriaLabel(o) {
+    if (Boolean(this.swirlAriaLabel))
+      return this.swirlAriaLabel;
+    if (o)
+      return this.label;
+  }
+  render() {
+    const o = this.hideLabel && Boolean(this.icon) || this.variant === "floating" && this.intent === "default", t = Boolean(this.href), n = this.getAriaLabel(o), i = l("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
+      "button--icon-only": o,
+      "button--pill": this.pill
+    });
+    return r(e, null, r(t ? "a" : "button", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !t ? "true" : void 0, "aria-expanded": this.swirlAriaExpanded, "aria-label": n, class: i, disabled: t ? void 0 : this.disabled, download: t ? void 0 : this.download, form: t ? void 0 : this.form, href: this.href, name: t ? void 0 : this.name, target: t ? this.target : void 0, type: t ? void 0 : this.type, value: t ? void 0 : this.value }, this.icon && r("span", { class: "button__icon", innerHTML: this.icon, ref: (a) => this.iconEl = a }), !o && r("span", { class: "button__label" }, this.label)));
+  }
+};
+b.style = u;
+export {
+  b as swirl_button
+};

package/dist/{flip-card.entry.66635d0b.js → swirl-card.entry.a09d5cdf.js}

@@ -1,5 +1,5 @@
-import { r as t, h as e, H as o } from "./index.6f8c9509.js";
-import { c as s } from "./index-6d2e18c6.289636d4.js";
+import { r as t, h as e, H as o } from "./index.9489626d.js";
+import { c as s } from "./index-c3028f7d.557956d2.js";
 import "react";
 import "react-dom";
 import "./_commonjsHelpers-44457d8d.ba94af77.js";
@@ -18,5 +18,5 @@ const i = `:host{display:block}:host *{box-sizing:border-box}.card{display:block
 };
 c.style = i;
 export {
-  c as flip_card
+  c as swirl_card
 };