@getflip/swirl-components 0.11.0 → 0.13.0

package/dist/components/swirl-avatar.d.ts

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

package/dist/components/swirl-avatar.js

@@ -0,0 +1,123 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './swirl-icon-person2.js';
+
+const swirlAvatarCss = ":host{display:inline-flex;flex-shrink:0;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--s-surface-raised-default)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus:not(:focus-visible){outline:none}.avatar--interactive:focus-visible{outline-color:var(--s-focus-default)}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar--color-banana .avatar__initials{color:var(--s-decorative-banana-text);background-color:var(--s-decorative-banana-surface-subdued)}.avatar--color-blueberry .avatar__initials{color:var(--s-decorative-blueberry-text);background-color:var(--s-decorative-blueberry-surface-subdued)}.avatar--color-chilli .avatar__initials{color:var(--s-decorative-chilli-text);background-color:var(--s-decorative-chilli-surface-subdued)}.avatar--color-grape .avatar__initials{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.avatar--color-kiwi .avatar__initials{color:var(--s-decorative-kiwi-text);background-color:var(--s-decorative-kiwi-surface-subdued)}.avatar--color-pumpkin .avatar__initials{color:var(--s-decorative-pumpkin-text);background-color:var(--s-decorative-pumpkin-surface-subdued)}.avatar--color-radish .avatar__initials{color:var(--s-decorative-radish-text);background-color:var(--s-decorative-radish-surface-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%}.avatar__icon{display:inline-flex;width:100%;height:100%}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{display:inline-flex;width:100%;min-width:0;height:100%;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium)}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}";
+
+const swirlAvatarSizeMappings = {
+  xs: 28,
+  s: 32,
+  m: 40,
+  l: 48,
+  xl: 64,
+  "2xl": 144,
+};
+const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.badgePosition = "bottom";
+    this.color = "kiwi";
+    this.interactive = false;
+    this.showLabel = false;
+    this.size = "m";
+    this.variant = "round";
+    this.setImageAvailable = () => {
+      this.imageAvailable = true;
+    };
+    this.setImageUnavailable = () => {
+      this.imageAvailable = false;
+    };
+    this.onKeydown = (event) => {
+      // The interactive avatar is activated by the space key on the keyup event,
+      // but the default action for space is already triggered on keydown. It
+      // needs to be prevented to stop scrolling the page before activating the
+      // avatar.
+      if (event.code === "Space") {
+        event.preventDefault();
+      }
+      else if (event.code === "Enter") {
+        event.preventDefault();
+        this.element.click();
+      }
+    };
+    this.onKeyup = (event) => {
+      if (event.code === "Space") {
+        event.preventDefault();
+        this.element.click();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
+  watchSrcProp() {
+    this.imageAvailable = undefined;
+  }
+  forceBadgeProps() {
+    if (!Boolean(this.badge)) {
+      return;
+    }
+    const badge = this.badgeEl.querySelector("swirl-badge");
+    badge === null || badge === void 0 ? void 0 : badge.setAttribute("size", "m");
+  }
+  render() {
+    const showImage = Boolean(this.src) &&
+      (this.imageAvailable || this.imageAvailable === undefined);
+    const showInitials = !showImage && Boolean(this.initials);
+    const showIcon = !showImage && !showInitials && Boolean(this.icon);
+    const showFallbackIcon = !showImage && !showInitials && !showIcon;
+    const showBadge = Boolean(this.badge) && this.size === "m";
+    const role = this.interactive ? "button" : "img";
+    const className = classnames("avatar", `avatar--color-${this.color}`, `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": showIcon || showFallbackIcon,
+      "avatar--has-initials": showInitials,
+      "avatar--interactive": this.interactive,
+    });
+    const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
+    return (h(Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { class: className, part: "avatar" }, showImage && (h("span", { class: "avatar__image" }, h("img", { alt: "", height: swirlAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { class: "avatar__initials" }, h("span", null, this.initials))), showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { class: "avatar__icon" }, h("swirl-icon-person", null))), showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) }))), this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
+  }
+  get element() { return this; }
+  static get watchers() { return {
+    "src": ["watchSrcProp"]
+  }; }
+  static get style() { return swirlAvatarCss; }
+}, [1, "swirl-avatar", {
+    "badge": [1],
+    "badgePosition": [1, "badge-position"],
+    "color": [1],
+    "icon": [1],
+    "initials": [1],
+    "interactive": [4],
+    "label": [1],
+    "showLabel": [4, "show-label"],
+    "size": [1],
+    "src": [1],
+    "variant": [1],
+    "imageAvailable": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-avatar", "swirl-icon-person"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlAvatar$1);
+      }
+      break;
+    case "swirl-icon-person":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlAvatar = SwirlAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlAvatar, defineCustomElement };

package/dist/components/swirl-badge.d.ts

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

package/dist/components/swirl-badge.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border: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}";
+
+const SwirlBadge$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.intent = "critical";
+    this.size = "m";
+    this.variant = "default";
+  }
+  render() {
+    const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
+      "badge--has-icon": this.icon,
+    });
+    return (h(Host, { role: "status" }, h("span", { class: className }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
+  }
+  static get style() { return swirlBadgeCss; }
+}, [1, "swirl-badge", {
+    "icon": [1],
+    "intent": [1],
+    "label": [1],
+    "size": [1],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlBadge$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlBadge = SwirlBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlBadge, defineCustomElement };

package/dist/components/swirl-banner.d.ts

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

package/dist/components/swirl-banner.js

@@ -0,0 +1,97 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
+
+const swirlBannerCss = ":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)}}";
+
+const swirlBannerIconMapping = {
+  default: undefined,
+  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>",
+};
+const SwirlBanner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.action = createEvent(this, "action", 7);
+    this.dismiss = createEvent(this, "dismiss", 7);
+    this.dismissable = false;
+    this.dismissLabel = "Dismiss";
+    this.importance = "status";
+    this.intent = "default";
+    this.showIcon = false;
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+    this.onAction = (event) => {
+      this.action.emit(event);
+    };
+    this.onDismiss = (event) => {
+      this.dismiss.emit(event);
+    };
+  }
+  componentDidLoad() {
+    var _a, _b;
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    var _a, _b;
+    const icon = (_a = this.iconEl) === null || _a === void 0 ? void 0 : _a.children[0];
+    const dismissButtonIcon = (_b = this.dismissButtonEl) === null || _b === void 0 ? void 0 : _b.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+    dismissButtonIcon === null || dismissButtonIcon === void 0 ? void 0 : dismissButtonIcon.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  render() {
+    const icon = swirlBannerIconMapping[this.intent];
+    const showControls = Boolean(this.actionLabel) || this.dismissable;
+    const showIcon = this.showIcon && Boolean(icon);
+    const className = classnames("banner", `banner--intent-${this.intent}`, {
+      "banner--has-icon": showIcon,
+    });
+    return (h(Host, null, h("div", { "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, showIcon && (h("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "banner__content", id: "content", part: "banner__content" }, this.content), showControls && (h("span", { class: "banner__controls" }, this.actionLabel && (h("button", { class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, part: "banner__dismiss-button", ref: (el) => (this.dismissButtonEl = el), type: "button" }, h("swirl-icon-close", null))))))));
+  }
+  get element() { return this; }
+  static get style() { return swirlBannerCss; }
+}, [1, "swirl-banner", {
+    "actionLabel": [1, "action-label"],
+    "content": [1],
+    "dismissable": [4],
+    "dismissLabel": [1, "dismiss-label"],
+    "importance": [1],
+    "intent": [1],
+    "showIcon": [4, "show-icon"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-banner", "swirl-icon-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-banner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlBanner$1);
+      }
+      break;
+    case "swirl-icon-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlBanner = SwirlBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlBanner, defineCustomElement };

package/dist/components/swirl-box.d.ts

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

package/dist/components/swirl-box.js

@@ -0,0 +1,6 @@
+import { S as SwirlBox$1, d as defineCustomElement$1 } from './swirl-box2.js';
+
+const SwirlBox = SwirlBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlBox, defineCustomElement };

package/dist/components/swirl-box2.js

@@ -0,0 +1,55 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlBoxCss = ":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%}";
+
+const SwirlBox = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.as = "div";
+    this.overflow = "visible";
+    this.padding = "0";
+  }
+  render() {
+    const Tag = this.as;
+    const styles = {
+      overflow: this.overflow,
+      padding: `var(--s-space-${this.padding})`,
+      position: Boolean(this.overflow) ? "relative" : "",
+    };
+    const className = classnames("box", {
+      "box--bordered": this.bordered,
+      "box--center-block": this.centerBlock,
+      "box--center-inline": this.centerInline,
+      "box--cover": this.cover,
+    });
+    return (h(Host, { style: this.cover ? { width: "100%", height: "100%" } : undefined }, h(Tag, { class: className, style: styles }, h("slot", null))));
+  }
+  static get style() { return swirlBoxCss; }
+}, [1, "swirl-box", {
+    "as": [1],
+    "bordered": [4],
+    "centerBlock": [4, "center-block"],
+    "centerInline": [4, "center-inline"],
+    "cover": [4],
+    "overflow": [1],
+    "padding": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-box"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-box":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlBox);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlBox as S, defineCustomElement as d };

package/dist/components/swirl-button-group.d.ts

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

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

@@ -0,0 +1,6 @@
+import { S as SwirlButtonGroup$1, d as defineCustomElement$1 } from './swirl-button-group2.js';
+
+const SwirlButtonGroup = SwirlButtonGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlButtonGroup, defineCustomElement };

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

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$1 } from './swirl-stack2.js';
+
+const swirlButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}.button-group--segmented ::slotted(*:not(:last-child)){position:relative}.button-group--segmented ::slotted(*:not(:last-child)):after{position:absolute;z-index:1;top:50%;left:100%;width:var(--s-border-width-default);height:calc(100% - var(--s-space-16));background-color:var(--s-border-strong);content:\"\";transform:translate3d(-50%, -50%, 0);pointer-events:none}.button-group--segmented ::slotted(*:not(:last-child):not([disabled])[intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:last-child)[disabled=\"false\"][intent=\"primary\"]):after{background-color:var(--s-text-on-action-primary)}.button-group--segmented ::slotted(*:not(:first-child):not(:last-child)){--swirl-button-border-top-right-radius:0;--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-bottom-left-radius:0}.button-group--segmented ::slotted(*:first-child){--swirl-button-border-top-right-radius:0;--swirl-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-right-radius:0;--swirl-icon-button-border-bottom-right-radius:0;--swirl-icon-button-border-top-left-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-left-radius:var(--s-border-radius-base)}.button-group--segmented ::slotted(*:last-child){--swirl-button-border-top-left-radius:0;--swirl-button-border-bottom-left-radius:0;--swirl-icon-button-border-top-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-bottom-right-radius:var(--s-border-radius-base);--swirl-icon-button-border-top-left-radius:0;--swirl-icon-button-border-bottom-left-radius:0}";
+
+const SwirlButtonGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.orientation = "horizontal";
+  }
+  render() {
+    const spacing = this.segmented ? "0" : "8";
+    const className = classnames("button-group", {
+      "button-group--segmented": this.segmented,
+    });
+    return (h(Host, null, h("swirl-stack", { align: this.orientation === "vertical" && this.stretch
+        ? "stretch"
+        : "start", class: className, justify: this.orientation === "horizontal" && this.stretch
+        ? "stretch"
+        : "start", orientation: this.orientation, role: "group", spacing: spacing, wrap: this.wrap }, h("slot", null))));
+  }
+  static get style() { return swirlButtonGroupCss; }
+}, [1, "swirl-button-group", {
+    "orientation": [1],
+    "segmented": [4],
+    "stretch": [4],
+    "wrap": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-button-group", "swirl-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-button-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlButtonGroup);
+      }
+      break;
+    case "swirl-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlButtonGroup as S, defineCustomElement as d };

package/dist/components/swirl-button.d.ts

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

package/dist/components/swirl-button.js

@@ -0,0 +1,6 @@
+import { S as SwirlButton$1, d as defineCustomElement$1 } from './swirl-button2.js';
+
+const SwirlButton = SwirlButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlButton, defineCustomElement };

package/dist/components/swirl-button2.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+
+const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered)}.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)),\n    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)),\n      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)),\n      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)),\n      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(\n      --swirl-icon-button-border-bottom-right-radius\n    );border-bottom-left-radius:var(\n      --swirl-icon-button-border-bottom-left-radius\n    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button__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}";
+
+const SwirlButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.iconPosition = "start";
+    this.intent = "default";
+    this.size = "m";
+    this.type = "button";
+    this.variant = "ghost";
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+  }
+  componentDidLoad() {
+    var _a, _b;
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  disconnectedCallback() {
+    var _a, _b;
+    (_b = (_a = this.desktopMediaQuery).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", smallIcon ? "20" : "24");
+  }
+  getAriaLabel(hideLabel) {
+    if (Boolean(this.swirlAriaLabel)) {
+      return this.swirlAriaLabel;
+    }
+    else if (hideLabel) {
+      return this.label;
+    }
+    return undefined;
+  }
+  render() {
+    const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
+      (this.variant === "floating" && this.intent === "default");
+    const isLink = Boolean(this.href);
+    const ariaLabel = this.getAriaLabel(hideLabel);
+    const className = classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
+      "button--icon-only": hideLabel,
+      "button--pill": this.pill,
+    });
+    const Tag = isLink ? "a" : "button";
+    return (h(Host, null, h(Tag, { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-label": ariaLabel, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
+  }
+  static get style() { return swirlButtonCss; }
+}, [2, "swirl-button", {
+    "disabled": [4],
+    "download": [1],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "swirlAriaExpanded": [1, "swirl-aria-expanded"],
+    "swirlAriaLabel": [1, "swirl-aria-label"],
+    "form": [1],
+    "hideLabel": [4, "hide-label"],
+    "href": [1],
+    "icon": [1],
+    "iconPosition": [1, "icon-position"],
+    "intent": [1],
+    "label": [1],
+    "name": [1],
+    "pill": [4],
+    "size": [1],
+    "target": [1],
+    "type": [1],
+    "value": [1],
+    "variant": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlButton);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlButton as S, defineCustomElement as d };

package/dist/components/swirl-card.d.ts

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