@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/components/swirl-badge2.js

@@ -0,0 +1,49 @@
+import { proxyCustomElement, HTMLElement, h, Host, Fragment } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+import { d as defineCustomElement$1 } from './swirl-visually-hidden2.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-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);box-shadow:0 0 0 0.125rem var(--swirl-badge-border-color)}.badge--size-xs{min-width:1rem;height:1rem;font-size:0.6875rem}.badge--size-xs .badge__label{padding-right:0.25rem;padding-left:0.25rem}.badge--size-xs .badge__icon>swirl-icon,.badge--size-xs .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-s{min-width:1.25rem;height:1.25rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--size-s .badge__icon>swirl-icon,.badge--size-s .badge__icon>*::part(icon){width:1rem;height:1rem}.badge--size-m{min-width:1.5rem;height:1.5rem}.badge--size-m .badge__label{padding-right:0.4375rem;padding-left:0.4375rem}.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-info{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.badge--intent-kiwi{color:var(--s-text-on-status);background-color:var(--s-decorative-kiwi-surface)}.badge--intent-neutral{color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued)}.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--intent-strong{color:var(--s-text-on-status);background-color:var(--s-interactive-neutral-default)}.badge--variant-dot{width:1.5rem;min-width:0;height:1.5rem}.badge--variant-dot.badge--size-xs{width:0.5rem;height:0.5rem}.badge--variant-dot.badge--size-s{width:0.75rem;height:0.75rem}.badge--variant-dot.badge--size-m{width:1rem;height:1rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>swirl-icon,.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 = /*@__PURE__*/ proxyCustomElement(class SwirlBadge 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, { key: '3d64f76fe54264451a966d8bb9aa044efd744939', role: "status" }, h("span", { key: '918618864bcfd9cd017aecb390608a8d454218a4', class: className, part: "badge" }, this.icon && h("span", { key: '5488528c85b4851f98cfb6a6f61f0030f4dfab3c', class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && this.variant !== "dot" ? (h("span", { class: "badge__label" }, this.label)) : (h(Fragment, null, this.icon === undefined && (h("span", { class: "badge__label" }, "\u00A0")), h("swirl-visually-hidden", null, this.label))))));
+    }
+    static get style() { return swirlBadgeCss; }
+}, [1, "swirl-badge", {
+        "icon": [1],
+        "intent": [1],
+        "label": [1],
+        "size": [1],
+        "variant": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["swirl-badge", "swirl-visually-hidden"];
+    components.forEach(tagName => { switch (tagName) {
+        case "swirl-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SwirlBadge);
+            }
+            break;
+        case "swirl-visually-hidden":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { SwirlBadge as S, defineCustomElement as d };

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 { D as DesktopMediaQuery } from './media-query.service.js';
+import { d as defineCustomElement$2 } from './swirl-icon-close2.js';
+
+const swirlBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;align-items:flex-start;gap:var(--s-space-16);max-width:100%;min-height:3.5rem;padding:var(--s-space-16)}.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: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner{padding:var(--s-space-16);min-height:3.25rem}}.banner--size-s{padding:var(--s-space-8);justify-content:center}.banner--size-s .banner__content{flex-grow:0;text-align:center}.banner--size-s .banner__controls{margin-left:0}.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)}.banner__content{display:flex;align-items:flex-start;min-height:1.5rem;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);min-height:1.25rem}}.banner__icon{display:none;width:1.5rem;height:1.5rem;margin-right:var(--s-space-8);flex-shrink:0;color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__icon{width:1.25rem;height:1.25rem}}.banner__text{min-height:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.banner__text{min-height:1.25rem}}.banner__controls{display:inline-flex;flex-shrink:0;align-items:flex-start;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);height:1.25rem}}";
+
+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 SwirlBanner 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.size = "m";
+        this.mediaQueryUnsubscribe = () => { };
+        this.onAction = (event) => {
+            this.action.emit(event);
+        };
+        this.onDismiss = (event) => {
+            this.dismiss.emit(event);
+        };
+    }
+    componentDidLoad() {
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    forceIconProps(smallIcon) {
+        const icon = this.iconEl?.children[0];
+        const dismissButtonIcon = this.dismissButtonEl?.children[0];
+        icon?.setAttribute("size", smallIcon ? "20" : "24");
+        dismissButtonIcon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+    determineIcon() {
+        return this.icon ? this.icon : swirlBannerIconMapping[this.intent];
+    }
+    render() {
+        const icon = this.determineIcon();
+        const showControls = Boolean(this.actionLabel) || this.dismissable;
+        const showIcon = this.icon || (this.showIcon && Boolean(icon));
+        const className = classNames("banner", `banner--intent-${this.intent}`, `banner--size-${this.size}`, {
+            "banner--has-icon": showIcon,
+        });
+        return (h(Host, { key: '11ecf5b273bb2636d5d3e779fc91df1f7b10a8e0' }, h("div", { key: 'bc5e53f04ad5e80defe407340d191d1951a10123', "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, h("div", { key: '86b3950336dca8b1d28994d1fb18113a4b4c421a', class: "banner__content", id: "content", part: "banner__content" }, showIcon && (h("span", { key: '5716e25d171cc28861459258e257c8a821ebc56d', "aria-hidden": "true", class: "banner__icon", innerHTML: icon, ref: (el) => (this.iconEl = el) })), h("span", { key: 'a5a5019667573c14dde87041e475481a7edf6d5e', class: "banner__text" }, this.content)), showControls && (h("div", { key: 'cf8632f83dc502caba7f10710a353d1a34f30493', class: "banner__controls" }, this.actionLabel && (h("button", { key: '166c562828b381640c29783ac8b275f49b088cad', class: "banner__action-button", onClick: this.onAction, part: "banner__action-button", type: "button" }, this.actionLabel)), this.dismissable && (h("button", { key: 'b1247a38ea5f7592d7c12f0919360041ea9061b8', "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", { key: '12524ce0998e451f9260924e2a5226ddee4ade43' }))))))));
+    }
+    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"],
+        "icon": [1],
+        "size": [1]
+    }]);
+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;
+    } });
+}
+
+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,147 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+
+const swirlBoxCss = ":host{display:block;width:100%}:host(.box--bordered){border:var(--s-border-width-default) solid var(--s-border-default)}:host(.box--border-color-default){border-color:var(--s-border-default)}:host(.box--border-color-strong){border-color:var(--s-border-strong)}:host(.box--bordered-block-end){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid}:host(.box--bordered-block-start){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid}:host(.box--bordered-inline-end){border-inline-end-width:var(--s-border-width-default);border-inline-end-style:solid}:host(.box--bordered-inline-start){border-inline-start-width:var(--s-border-width-default);border-inline-start-style:solid}:host(.box--bordered-block-start-when-scrolled.box--scrollable){border-block-start-width:var(--s-border-width-default);border-block-start-style:solid;border-block-start-color:transparent}:host(.box--bordered-block-start-when-scrolled.box--scrollable:not(.box--scrolled-to-top)){border-block-start-color:var(--s-border-default)}:host(.box--bordered-block-end-when-scrolled.box--scrollable){border-block-end-width:var(--s-border-width-default);border-block-end-style:solid;border-block-end-color:transparent}:host(.box--bordered-block-end-when-scrolled.box--scrollable:not(.box--scrolled-to-bottom)){border-block-end-color:var(--s-border-default)}:host(.box--cover){width:100%;height:100%}:host *{box-sizing:border-box}";
+
+const SwirlBox = /*@__PURE__*/ proxyCustomElement(class SwirlBox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.componentLoad = createEvent(this, "componentLoad", 7);
+        this.borderColor = "default";
+        this.overflow = "visible";
+        this.padding = "0";
+        this.scrollState = {
+            scrollable: false,
+            scrolledToBottom: false,
+            scrolledToTop: false,
+        };
+        this.onScroll = () => {
+            this.updateScrollState();
+        };
+    }
+    componentDidLoad() {
+        this.componentLoad.emit();
+        queueMicrotask(() => {
+            this.updateScrollState();
+        });
+    }
+    updateScrollState() {
+        if (!this.el.isConnected) {
+            return;
+        }
+        const newScrollState = {
+            scrollable: this.el.scrollHeight > this.el.clientHeight,
+            scrolledToTop: this.el.scrollTop === 0,
+            scrolledToBottom: Math.round(this.el.scrollTop + this.el.clientHeight) >=
+                this.el.scrollHeight,
+        };
+        if (Object.keys(newScrollState).some((key) => newScrollState[key] !== this.scrollState[key])) {
+            this.scrollState = newScrollState;
+        }
+    }
+    render() {
+        const styles = {
+            alignItems: this.centerBlock ? "center" : undefined,
+            bottom: this.bottom,
+            display: this.centerBlock || this.centerInline ? "flex" : undefined,
+            flexBasis: this.basis,
+            flexShrink: this.shrink,
+            flexGrow: this.grow,
+            height: this.cover ? "100%" : this.height,
+            justifyContent: this.centerInline ? "center" : undefined,
+            left: this.left,
+            maxHeight: this.maxHeight,
+            minHeight: this.minHeight,
+            maxWidth: this.maxWidth,
+            minWidth: this.minWidth,
+            overflow: this.overflow,
+            padding: `var(--s-space-${this.padding})`,
+            paddingBlockEnd: Boolean(this.paddingBlockEnd)
+                ? `var(--s-space-${this.paddingBlockEnd})`
+                : undefined,
+            paddingBlockStart: Boolean(this.paddingBlockStart)
+                ? `var(--s-space-${this.paddingBlockStart})`
+                : undefined,
+            paddingInlineEnd: Boolean(this.paddingInlineEnd)
+                ? `var(--s-space-${this.paddingInlineEnd})`
+                : undefined,
+            paddingInlineStart: Boolean(this.paddingInlineStart)
+                ? `var(--s-space-${this.paddingInlineStart})`
+                : undefined,
+            position: Boolean(this.overflow)
+                ? this.position || "relative"
+                : this.position,
+            right: this.right,
+            top: this.top,
+            width: this.cover ? "100%" : this.width,
+            zIndex: this.zIndex,
+        };
+        const className = classNames("box", `box--border-color-${this.borderColor}`, {
+            "box--bordered": this.bordered,
+            "box--bordered-block-end": this.borderedBlockEnd,
+            "box--bordered-block-end-when-scrolled": this.borderedBlockEndWhenScrolled,
+            "box--bordered-block-start": this.borderedBlockStart,
+            "box--bordered-block-start-when-scrolled": this.borderedBlockStartWhenScrolled,
+            "box--bordered-inline-end": this.borderedInlineEnd,
+            "box--bordered-inline-start": this.borderedInlineStart,
+            "box--cover": this.cover,
+            "box--scrollable": this.scrollState.scrollable,
+            "box--scrolled-to-top": this.scrollState.scrolledToTop,
+            "box--scrolled-to-bottom": this.scrollState.scrolledToBottom,
+        });
+        return (h(Host, { key: 'e9eeaa11b7a04b59744d8cf369855874fb8eab02', class: className, onScroll: this.onScroll, style: styles }, h("slot", { key: '0d5e86f34e2efb3dd7f9bfaf24a3a18578e6f507' })));
+    }
+    get el() { return this; }
+    static get style() { return swirlBoxCss; }
+}, [1, "swirl-box", {
+        "borderColor": [1, "border-color"],
+        "bordered": [4],
+        "borderedBlockEnd": [4, "bordered-block-end"],
+        "borderedBlockEndWhenScrolled": [4, "bordered-block-end-when-scrolled"],
+        "borderedBlockStart": [4, "bordered-block-start"],
+        "borderedBlockStartWhenScrolled": [4, "bordered-block-start-when-scrolled"],
+        "borderedInlineEnd": [4, "bordered-inline-end"],
+        "borderedInlineStart": [4, "bordered-inline-start"],
+        "bottom": [1],
+        "centerBlock": [4, "center-block"],
+        "centerInline": [4, "center-inline"],
+        "cover": [4],
+        "height": [1],
+        "left": [1],
+        "maxHeight": [1, "max-height"],
+        "minHeight": [1, "min-height"],
+        "maxWidth": [1, "max-width"],
+        "minWidth": [1, "min-width"],
+        "overflow": [1],
+        "padding": [1],
+        "paddingBlockEnd": [1, "padding-block-end"],
+        "paddingBlockStart": [1, "padding-block-start"],
+        "paddingInlineEnd": [1, "padding-inline-end"],
+        "paddingInlineStart": [1, "padding-inline-start"],
+        "position": [1],
+        "right": [1],
+        "basis": [1],
+        "shrink": [1],
+        "grow": [1],
+        "top": [1],
+        "width": [1],
+        "zIndex": [1, "z-index"],
+        "scrollState": [32]
+    }]);
+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;
+    } });
+}
+
+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,53 @@
+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 SwirlButtonGroup extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.orientation = "horizontal";
+        this.spacing = "8";
+    }
+    render() {
+        const spacing = this.segmented ? "0" : this.spacing;
+        const className = classNames("button-group", {
+            "button-group--segmented": this.segmented,
+        });
+        return (h(Host, { key: '1c5dcaf521e8ee19f572f03e428f6f6297106ae0' }, h("swirl-stack", { key: '78073a9c28c55e16c68c9f32f4573e18f08d8822', 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", { key: '4936fecbd49610aec18174458b1cd7ef42723eba' }))));
+    }
+    static get style() { return swirlButtonGroupCss; }
+}, [1, "swirl-button-group", {
+        "orientation": [1],
+        "segmented": [4],
+        "spacing": [1],
+        "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;
+    } });
+}
+
+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,133 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classNames } from './index2.js';
+import { D as DesktopMediaQuery } from './media-query.service.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);transition:box-shadow 0.3s}.button.sc-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button--elevated.sc-swirl-button{box-shadow:var(--s-shadow-level-2)}.button.sc-swirl-button:disabled,.button.button--disabled.sc-swirl-button{color:var(--s-text-disabled);cursor:default}.button.sc-swirl-button:disabled:where(:not(.button--variant-ghost)),.button.button--disabled.sc-swirl-button:where(:not(.button--variant-ghost)){background-color:var(--swirl-ghost-button-background-disabled)}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.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--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.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(--swirl-flat-button-background-default);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled,.button--variant-flat.button--disabled.sc-swirl-button{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-on-status);background-color:var(--s-action-critical-default)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):hover{background-color:var(--s-action-critical-hovered)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)):active{background-color:var(--s-action-critical-pressed)}.button--variant-flat.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-on-status)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-flat.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-flat.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}.button--variant-outline.sc-swirl-button:disabled,.button--variant-outline.button--disabled.sc-swirl-button{outline-color:var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-critical);outline-color:var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)),.button--variant-outline.button--pressed.sc-swirl-button{color:var(--s-text-highlight);outline-color:var(--s-border-highlight)}.button--variant-outline.button--intent-primary.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button,.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.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-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--swirl-plain-button-text-color-default);background-color:transparent}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-hovered);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-hovered)}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--swirl-plain-button-text-color-pressed);background-color:transparent}.button--variant-plain.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-pressed)}.button--variant-plain.sc-swirl-button:disabled,.button--variant-plain.button--disabled.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--swirl-plain-button-text-color-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.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:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)){color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:active:where(:not(:disabled):not(.button--disabled)) .button__icon.sc-swirl-button{color:var(--s-interactive-primary-pressed)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-plain.button--intent-primary.button--disabled.sc-swirl-button .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{margin-left:0;color:var(--swirl-plain-button-text-color-default)}.button--variant-plain.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-plain.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled,.button--variant-on-image.button--disabled.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-on-image.button--disabled.sc-swirl-button .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-on-image.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-on-image.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default)}.button--variant-floating.sc-swirl-button:not(.button--elevated){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:where(:not(:disabled):not(.button--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:where(:not(:disabled):not(.button--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,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-floating.button--intent-primary.button--disabled.sc-swirl-button .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--variant-translucent.sc-swirl-button{color:var(--s-text-default);outline:var(--s-border-width-default) solid\n    var(--s-border-translucent-outline);outline-offset:calc(var(--s-border-width-default) * -1);background:var(--s-translucent-medium-default);box-shadow:var(--s-shadow-level-2);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.button--variant-translucent.sc-swirl-button:hover{background:var(--s-translucent-medium-hovered)}.button--variant-translucent.sc-swirl-button:active{background:var(--s-translucent-medium-pressed)}.button--variant-translucent.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-translucent.sc-swirl-button:disabled,.button--variant-translucent.button--disabled.sc-swirl-button{color:var(--s-text-subdued);background:var(--s-translucent-medium-default)}.button--variant-translucent.sc-swirl-button:disabled .button__icon.sc-swirl-button,.button--variant-translucent.button--disabled.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-default)}.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--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__tag.sc-swirl-button{padding-left:var(--s-space-8);order:3}.button__trailing-slot.sc-swirl-button{order:4}.button__icon.sc-swirl-button{display:none;width:1.5rem;height:1.5rem;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon.sc-swirl-button{width:1.25rem;height:1.25rem}}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
+
+const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.cursor = "pointer";
+        this.iconPosition = "start";
+        this.intent = "default";
+        this.size = "m";
+        this.textAlign = "center";
+        this.type = "button";
+        this.variant = "ghost";
+        this.mediaQueryUnsubscribe = () => { };
+    }
+    componentDidLoad() {
+        this.updateFormAttribute();
+        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
+            this.forceIconProps(isDesktop);
+        });
+    }
+    componentDidRender() {
+        this.updateFormAttribute();
+    }
+    disconnectedCallback() {
+        this.mediaQueryUnsubscribe();
+    }
+    forceIconProps(smallIcon) {
+        if (!Boolean(this.iconEl)) {
+            return;
+        }
+        const icon = this.iconEl.children[0];
+        if (icon?.tagName.startsWith("SWIRL-ICON") ||
+            icon?.tagName.startsWith("SWIRL-EMOJI") ||
+            icon?.tagName.startsWith("SWIRL-SYMBOL")) {
+            icon?.setAttribute("size", smallIcon ? "20" : "24");
+        }
+    }
+    getAriaLabel(hideLabel) {
+        if (Boolean(this.swirlAriaLabel)) {
+            return this.swirlAriaLabel;
+        }
+        else if (hideLabel) {
+            return this.label;
+        }
+        return undefined;
+    }
+    updateFormAttribute() {
+        // Workaround: form attribute cannot be set via Stencil JSX
+        // https://github.com/ionic-team/stencil/issues/2703
+        const isLink = Boolean(this.href);
+        if (isLink || !Boolean(this.form)) {
+            this.buttonEl?.removeAttribute("form");
+        }
+        else {
+            this.buttonEl?.setAttribute("form", this.form);
+        }
+    }
+    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 hasIcon = this.icon || Boolean(this.el.querySelector("[slot='icon']"));
+        const hasTag = Boolean(this.el.querySelector("[slot='tag']"));
+        const hasTrailingSlot = Boolean(this.el.querySelector("[slot='trailing']"));
+        const className = classNames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
+            "button--elevated": this.elevated,
+            "button--disabled": this.disabled,
+            "button--has-icon": hasIcon,
+            "button--icon-only": hideLabel,
+            "button--pill": this.pill,
+            "button--pressed": this.pressed,
+        });
+        const Tag = isLink ? "a" : "button";
+        return (h(Host, { key: '45ecb09b0608bb62c759dfe09a4f17629a843e66', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '9ca424959955c2f56665b6abc64fce23b133ee5e', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, 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, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
+                cursor: !this.disabled && this.cursor !== "pointer"
+                    ? this.cursor
+                    : undefined,
+                fontSize: this.inheritFontSize ? "inherit" : undefined,
+                lineHeight: this.inheritFontSize ? "inherit" : undefined,
+            } }, Boolean(this.icon) && (h("span", { key: '85c7e12f44561c7754296fac3b6c74be06b93c22', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '082e271c1ca38212e61f9d62aed60b016ac588f6', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'bf24edbe91d4590049429b27da601ba5cd51e9a5', name: "icon" }))), !hideLabel && h("span", { key: '06cd510bb5617fec59496d64b32fc19bf59ba026', class: "button__label" }, this.label), hasTag && (h("span", { key: '95f4b84ae32def5b1fbf1ba1963382343dac4279', class: "button__tag" }, h("slot", { key: '9d778088353420c933a1e22089568c690909026c', name: "tag" }))), hasTrailingSlot && (h("div", { key: '1f5b393f4da411b312220673611a016e96b0d218', class: "button__trailing-slot" }, h("slot", { key: '635deb01ac5dbad192f64c79155a944f1c8b4716', name: "trailing" }))))));
+    }
+    get el() { return this; }
+    static get style() { return swirlButtonCss; }
+}, [6, "swirl-button", {
+        "cursor": [1],
+        "disabled": [4],
+        "download": [1],
+        "elevated": [4],
+        "form": [1],
+        "hideLabel": [4, "hide-label"],
+        "href": [1],
+        "icon": [1],
+        "iconPosition": [1, "icon-position"],
+        "intent": [1],
+        "inheritFontSize": [4, "inherit-font-size"],
+        "label": [1],
+        "name": [1],
+        "pill": [4],
+        "pressed": [4],
+        "size": [1],
+        "swirlAriaControls": [1, "swirl-aria-controls"],
+        "swirlAriaCurrent": [1, "swirl-aria-current"],
+        "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+        "swirlAriaExpanded": [1, "swirl-aria-expanded"],
+        "swirlAriaHaspopup": [1, "swirl-aria-haspopup"],
+        "swirlAriaLabel": [1, "swirl-aria-label"],
+        "target": [1],
+        "textAlign": [1, "text-align"],
+        "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;
+    } });
+}
+
+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;