@getflip/swirl-components 0.452.1 → 0.453.0

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

@@ -1,78 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-
-const swirlAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}";
-
-const SwirlAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatarGroup extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.layout = "diagonal";
-        this.semantics = "group";
-        this.avatars = [];
-        this.onSlotChange = (event) => {
-            this.avatars = event.target.assignedElements();
-            this.layOutAvatars();
-        };
-    }
-    componentDidLoad() {
-        this.forceBadgeProps();
-    }
-    forceBadgeProps() {
-        if (!Boolean(this.badge)) {
-            return;
-        }
-        const badge = this.badgeEl.querySelector("swirl-badge");
-        const badgeSize = badge?.getAttribute("size");
-        if (!Boolean(badgeSize)) {
-            badge?.setAttribute("size", "s");
-        }
-    }
-    layOutAvatars() {
-        if (this.layout === "diagonal") {
-            this.avatars.forEach((avatar) => {
-                avatar.style.position = "";
-                avatar.style.zIndex = "";
-            });
-        }
-        else {
-            this.avatars.forEach((avatar, index) => {
-                avatar.style.position = "relative";
-                avatar.style.zIndex = String(this.avatars.length - index);
-            });
-        }
-    }
-    render() {
-        const className = classNames("avatar-group", `avatar-group--${this.layout}-stack`, {
-            "avatar-group--has-badge": Boolean(this.badge),
-        });
-        const badgeClassName = classNames("avatar-group__badge");
-        return (h(Host, { key: 'ecb3e29c9099096fa82191e661f08223bf2a3137' }, h("div", { key: '6850ef790d715e45dc36ef60c9739398ada1e903', "aria-label": this.label, class: className, role: this.semantics }, h("slot", { key: '6d80247f5e0eae13ea4a2864e15c850178d190b8', onSlotchange: this.onSlotChange }), this.badge && (h("span", { key: 'cf23f016b1548812fca69315100479aad2563056', class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
-    }
-    static get style() { return swirlAvatarGroupCss; }
-}, [1, "swirl-avatar-group", {
-        "badge": [1],
-        "label": [1],
-        "layout": [1],
-        "semantics": [1],
-        "avatars": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-avatar-group"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-avatar-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlAvatarGroup$1);
-            }
-            break;
-    } });
-}
-
-const SwirlAvatarGroup = SwirlAvatarGroup$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlAvatarGroup, defineCustomElement };
+import{proxyCustomElement as a,HTMLElement as r,h as t,Host as o,transformTag as e}from"@stencil/core/internal/client";import{c as i}from"./index2.js";const s=a(class extends r{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.layout="diagonal",this.semantics="group",this.avatars=[],this.onSlotChange=a=>{this.avatars=a.target.assignedElements(),this.layOutAvatars()}}componentDidLoad(){this.forceBadgeProps()}forceBadgeProps(){if(!this.badge)return;const a=this.badgeEl.querySelector("swirl-badge"),r=a?.getAttribute("size");r||a?.setAttribute("size","s")}layOutAvatars(){this.avatars.forEach("diagonal"===this.layout?a=>{a.style.position="",a.style.zIndex=""}:(a,r)=>{a.style.position="relative",a.style.zIndex=this.avatars.length-r+""})}render(){const a=i("avatar-group",`avatar-group--${this.layout}-stack`,{"avatar-group--has-badge":!!this.badge}),r=i("avatar-group__badge");return t(o,{key:"ecb3e29c9099096fa82191e661f08223bf2a3137"},t("div",{key:"6850ef790d715e45dc36ef60c9739398ada1e903","aria-label":this.label,class:a,role:this.semantics},t("slot",{key:"6d80247f5e0eae13ea4a2864e15c850178d190b8",onSlotchange:this.onSlotChange}),this.badge&&t("span",{key:"cf23f016b1548812fca69315100479aad2563056",class:r,innerHTML:this.badge,ref:a=>this.badgeEl=a})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative}.avatar-group--diagonal-stack{display:inline-grid;grid-template-rows:repeat(9, 1fr);grid-template-columns:repeat(9, 1fr)}.avatar-group--diagonal-stack ::slotted(*:first-child){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.25rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color);grid-column-start:1;grid-column-end:7;grid-row-start:4;grid-row-end:10}.avatar-group--diagonal-stack ::slotted(*:nth-child(2)){z-index:0;display:inline-flex;border-radius:50%;grid-column-start:4;grid-column-end:10;grid-row-start:1;grid-row-end:7}.avatar-group--diagonal-stack ::slotted(*:nth-child(n+3)){display:none}.avatar-group--diagonal-stack .avatar-group__badge{position:absolute;right:calc(-1 * var(--s-space-4));bottom:calc(-1 * var(--s-space-4))}.avatar-group--horizontal-stack{display:inline-flex}.avatar-group--horizontal-stack .avatar-group__badge{display:none}.avatar-group--horizontal-stack ::slotted(*){z-index:1;display:inline-flex;border-radius:50%;box-shadow:0 0 0 0.125rem var(--swirl-avatar-group-border-color);background-color:var(--swirl-avatar-group-border-color)}.avatar-group--horizontal-stack ::slotted(*:not(:first-child)){margin-left:calc(-1 * var(--s-space-4))}.avatar-group__badge{z-index:3;display:inline-flex;width:1.5rem;height:1.5rem}.avatar-group__badge ::part(badge){box-shadow:0 0 0 0.25rem var(--swirl-badge-border-color)}"}},[257,"swirl-avatar-group",{badge:[1],label:[1],layout:[1],semantics:[1],avatars:[32]}]),l=s,d=function(){"undefined"!=typeof customElements&&["swirl-avatar-group"].forEach((a=>{"swirl-avatar-group"===a&&(customElements.get(e(a))||customElements.define(e(a),s))}))};export{l as SwirlAvatarGroup,d as defineCustomElement}

package/dist/components/swirl-avatar.js

@@ -1,172 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, 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%;border:var(--swirl-avatar-border-width, 0) solid\n    var(--swirl-avatar-border-color, transparent)}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.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-3xs{width:1.25rem;height:1.25rem}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem}.avatar--size-xs .avatar__initials{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}.avatar--size-s .avatar__initials{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}.avatar--size-m .avatar__initials{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}.avatar--size-l .avatar__initials{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}.avatar--size-xl .avatar__initials{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}.avatar--size-2xl .avatar__initials{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:1.25rem}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.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--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.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}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}";
-
-const swirlAvatarSizeMappings = {
-    "3xs": 20,
-    "2xs": 24,
-    xs: 28,
-    s: 32,
-    m: 40,
-    l: 48,
-    xl: 64,
-    "2xl": 144,
-};
-const SwirlAvatar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAvatar extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.imageError = createEvent(this, "imageError", 7);
-        this.imageLoad = createEvent(this, "imageLoad", 7);
-        this.badgePosition = "bottom";
-        this.color = "kiwi";
-        this.interactive = false;
-        this.showLabel = false;
-        this.size = "m";
-        this.toolPosition = "bottom";
-        this.variant = "round";
-        this.loadingError = false;
-        this.loaded = false;
-        this.inViewport = false;
-        this.componentLoaded = false;
-        this.onImageElementUpdate = (el) => {
-            this.imgEl?.removeEventListener("load", this.setImageAvailable);
-            this.imgEl?.removeEventListener("error", this.setImageUnavailable);
-            this.imgEl = el;
-            if (this.imgEl) {
-                this.imgEl.addEventListener("load", this.setImageAvailable);
-                this.imgEl.addEventListener("error", this.setImageUnavailable);
-            }
-        };
-        this.setImageAvailable = () => {
-            this.imageAvailable = true;
-            this.loadingError = false;
-            this.loaded = true;
-            this.imageLoad.emit();
-        };
-        this.setImageUnavailable = () => {
-            this.imageAvailable = false;
-            this.loaded = true;
-            this.loadingError = true;
-            this.imageError.emit();
-        };
-        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.setupIntersectionObserver();
-        this.componentLoaded = true;
-    }
-    connectedCallback() {
-        if (this.componentLoaded) {
-            this.setupIntersectionObserver();
-        }
-    }
-    disconnectedCallback() {
-        this.intersectionObserver?.disconnect();
-        this.imgEl?.removeEventListener("load", this.setImageAvailable);
-        this.imgEl?.removeEventListener("error", this.setImageUnavailable);
-    }
-    watchSrcProp() {
-        this.imageAvailable = undefined;
-    }
-    setupIntersectionObserver() {
-        if (this.loading !== "intersecting") {
-            return;
-        }
-        this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange.bind(this), {
-            threshold: 0,
-        });
-        this.intersectionObserver.observe(this.element);
-    }
-    onVisibilityChange(entries) {
-        this.inViewport = entries.some((entry) => entry.isIntersecting);
-    }
-    render() {
-        const showImage = Boolean(this.src) &&
-            (this.imageAvailable || this.imageAvailable === undefined) &&
-            (this.loading !== "intersecting" || this.inViewport);
-        const showInitials = (!showImage || (!this.loaded && !this.loadingError)) &&
-            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" : undefined;
-        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}`);
-        const toolClassName = classNames("avatar__tool", `avatar__tool--position-${this.toolPosition}`);
-        return (h(Host, { key: '42c11df526248247b9cb2bee6b2d58bc70aafa65', "aria-label": this.interactive ? this.label : undefined, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { key: '96a01925f8c723fca2dbb17263152b1d56d26027', class: className, part: "avatar" }, showImage && (h("span", { key: '896d136ab3094a2f583b938c2b91d04e78f0d10f', class: "avatar__image" }, h("img", { key: 'fde4999892611a1634223519cbccf76130cdb51c', alt: "", height: swirlAvatarSizeMappings[this.size], loading: this.loading !== "intersecting" ? this.loading : undefined, ref: this.onImageElementUpdate, src: this.src, width: swirlAvatarSizeMappings[this.size] }))), showInitials && (h("span", { key: '4e1e6d7539ef10c696292cbb9f8a1a9dd492a97a', class: "avatar__initials" }, h("span", { key: '866a9aaaa0b2e2ef114cc992be91b503160aac69' }, this.initials))), showIcon && h("span", { key: '1cb19789413ef94288b19c209f80b9ccab454baa', class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { key: '36dee103b6406e226e48183c4376a978a6ecedc9', class: "avatar__icon" }, h("swirl-icon-person", { key: 'b992b47b9baa52c05193fff33e9b57211c23a51e' }))), showBadge && (h("span", { key: '6134b435fa2572c24dd3d8be7ca3f02b51e6ea3c', class: badgeClassName, innerHTML: this.badge })), h("span", { key: '20e4112658cd486eb49d7e2543f13678b4d7a5fd', class: toolClassName }, h("slot", { key: 'f03881df79fb42c911c2895cd787f706c9529a9f', name: "tool" }))), this.showLabel && (h("span", { key: 'beeb327bbc2a05443d756dea01be85e0a885e507', "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],
-        "loading": [1],
-        "showLabel": [4, "show-label"],
-        "size": [1],
-        "src": [1],
-        "toolPosition": [1, "tool-position"],
-        "variant": [1],
-        "loadingError": [32],
-        "loaded": [32],
-        "imageAvailable": [32],
-        "inViewport": [32]
-    }, undefined, {
-        "src": ["watchSrcProp"]
-    }]);
-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;
-    } });
-}
-
-const SwirlAvatar = SwirlAvatar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlAvatar, defineCustomElement };
+import{proxyCustomElement as a,HTMLElement as t,createEvent as i,h as r,Host as e,transformTag as s}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as n}from"./swirl-icon-person2.js";const v={"3xs":20,"2xs":24,xs:28,s:32,m:40,l:48,xl:64,"2xl":144},l=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.imageError=i(this,"imageError",7),this.imageLoad=i(this,"imageLoad",7),this.badgePosition="bottom",this.color="kiwi",this.interactive=!1,this.showLabel=!1,this.size="m",this.toolPosition="bottom",this.variant="round",this.loadingError=!1,this.loaded=!1,this.inViewport=!1,this.componentLoaded=!1,this.onImageElementUpdate=a=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=a,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))},this.setImageAvailable=()=>{this.imageAvailable=!0,this.loadingError=!1,this.loaded=!0,this.imageLoad.emit()},this.setImageUnavailable=()=>{this.imageAvailable=!1,this.loaded=!0,this.loadingError=!0,this.imageError.emit()},this.onKeydown=a=>{"Space"===a.code?a.preventDefault():"Enter"===a.code&&(a.preventDefault(),this.element.click())},this.onKeyup=a=>{"Space"===a.code&&(a.preventDefault(),this.element.click())}}componentDidLoad(){this.setupIntersectionObserver(),this.componentLoaded=!0}connectedCallback(){this.componentLoaded&&this.setupIntersectionObserver()}disconnectedCallback(){this.intersectionObserver?.disconnect(),this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}watchSrcProp(){this.imageAvailable=void 0}setupIntersectionObserver(){"intersecting"===this.loading&&(this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange.bind(this),{threshold:0}),this.intersectionObserver.observe(this.element))}onVisibilityChange(a){this.inViewport=a.some((a=>a.isIntersecting))}render(){const a=!!this.src&&(this.imageAvailable||void 0===this.imageAvailable)&&("intersecting"!==this.loading||this.inViewport),t=!(a&&(this.loaded||this.loadingError)||!this.initials),i=!a&&!t&&!!this.icon,s=!a&&!t&&!i,n=!!this.badge&&"m"===this.size,l=this.interactive?"button":void 0,d=o("avatar","avatar--color-"+this.color,"avatar--size-"+this.size,"avatar--variant-"+this.variant,{"avatar--has-icon":i||s,"avatar--has-initials":t,"avatar--interactive":this.interactive}),c=o("avatar__badge","avatar__badge--position-"+this.badgePosition),h=o("avatar__tool","avatar__tool--position-"+this.toolPosition);return r(e,{key:"42c11df526248247b9cb2bee6b2d58bc70aafa65","aria-label":this.interactive?this.label:void 0,onKeydown:this.interactive?this.onKeydown:void 0,onKeyup:this.interactive?this.onKeyup:void 0,role:l,tabIndex:this.interactive?0:void 0},r("span",{key:"96a01925f8c723fca2dbb17263152b1d56d26027",class:d,part:"avatar"},a&&r("span",{key:"896d136ab3094a2f583b938c2b91d04e78f0d10f",class:"avatar__image"},r("img",{key:"fde4999892611a1634223519cbccf76130cdb51c",alt:"",height:v[this.size],loading:"intersecting"!==this.loading?this.loading:void 0,ref:this.onImageElementUpdate,src:this.src,width:v[this.size]})),t&&r("span",{key:"4e1e6d7539ef10c696292cbb9f8a1a9dd492a97a",class:"avatar__initials"},r("span",{key:"866a9aaaa0b2e2ef114cc992be91b503160aac69"},this.initials)),i&&r("span",{key:"1cb19789413ef94288b19c209f80b9ccab454baa",class:"avatar__icon",innerHTML:this.icon}),s&&r("span",{key:"36dee103b6406e226e48183c4376a978a6ecedc9",class:"avatar__icon"},r("swirl-icon-person",{key:"b992b47b9baa52c05193fff33e9b57211c23a51e"})),n&&r("span",{key:"6134b435fa2572c24dd3d8be7ca3f02b51e6ea3c",class:c,innerHTML:this.badge}),r("span",{key:"20e4112658cd486eb49d7e2543f13678b4d7a5fd",class:h},r("slot",{key:"f03881df79fb42c911c2895cd787f706c9529a9f",name:"tool"}))),this.showLabel&&r("span",{key:"beeb327bbc2a05443d756dea01be85e0a885e507","aria-hidden":!0,class:"avatar__label"},this.label))}get element(){return this}static get watchers(){return{src:[{watchSrcProp:0}]}}static get style(){return":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%;border:var(--swirl-avatar-border-width, 0) solid     var(--swirl-avatar-border-color, transparent)}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--swirl-avatar-background-color)}.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-3xs{width:1.25rem;height:1.25rem}.avatar--size-3xs .avatar__initials{font-size:0.625rem}.avatar--size-3xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-3xs.avatar--variant-square,.avatar--size-3xs.avatar--variant-square .avatar__image,.avatar--size-3xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-2xs{width:1.5rem;height:1.5rem}.avatar--size-2xs .avatar__initials{font-size:0.625rem}.avatar--size-2xs.avatar--has-icon{padding-right:0.125rem;padding-left:0.125rem}.avatar--size-2xs.avatar--variant-square,.avatar--size-2xs.avatar--variant-square .avatar__image,.avatar--size-2xs.avatar--variant-square .avatar__initials{border-radius:0.25rem}.avatar--size-xs{width:1.75rem;height:1.75rem}.avatar--size-xs .avatar__initials{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}.avatar--size-s .avatar__initials{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}.avatar--size-m .avatar__initials{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}.avatar--size-l .avatar__initials{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}.avatar--size-xl .avatar__initials{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}.avatar--size-2xl .avatar__initials{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:1.25rem}.avatar--size-2xl .avatar__tool{transform:translate3d(-25%, -25%, 0px)}.avatar--size-2xl .avatar__tool--position-top{transform:translate3d(-25%, 25%, 0px)}.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--color-neutral .avatar__initials{color:var(--s-text-subdued);background-color:var(--s-surface-neutral-subdued)}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}.avatar__icon{display:inline-flex}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{position:absolute;display:inline-flex;min-width:0;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;font-weight:var(--s-font-weight-medium);inset:0}.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}.avatar__tool{position:absolute;right:0;bottom:0;display:inline-flex;transform:translate3d(25%, 25%, 0)}.avatar__tool--position-top{top:0;bottom:auto;transform:translate3d(25%, -25%, 0)}"}},[257,"swirl-avatar",{badge:[1],badgePosition:[1,"badge-position"],color:[1],icon:[1],initials:[1],interactive:[4],label:[1],loading:[1],showLabel:[4,"show-label"],size:[1],src:[1],toolPosition:[1,"tool-position"],variant:[1],loadingError:[32],loaded:[32],imageAvailable:[32],inViewport:[32]},void 0,{src:[{watchSrcProp:0}]}]),d=l,c=function(){"undefined"!=typeof customElements&&["swirl-avatar","swirl-icon-person"].forEach((a=>{switch(a){case"swirl-avatar":customElements.get(s(a))||customElements.define(s(a),l);break;case"swirl-icon-person":customElements.get(s(a))||n()}}))};export{d as SwirlAvatar,c as defineCustomElement}

package/dist/components/swirl-badge.js

@@ -1,6 +1 @@
-import { S as SwirlBadge$1, d as defineCustomElement$1 } from './swirl-badge2.js';
-
-const SwirlBadge = SwirlBadge$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlBadge, defineCustomElement };
+import{S as s,d as o}from"./swirl-badge2.js";const r=s,a=o;export{r as SwirlBadge,a as defineCustomElement}

package/dist/components/swirl-badge2.js

@@ -1,49 +1 @@
-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 };
+import{proxyCustomElement as e,HTMLElement as a,h as t,Host as i,Fragment as r,transformTag as s}from"@stencil/core/internal/client";import{c as d}from"./index2.js";import{d as n}from"./swirl-visually-hidden2.js";const o=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.intent="critical",this.size="m",this.variant="default"}render(){const e=d("badge",`badge--intent-${this.intent}`,`badge--size-${this.size}`,`badge--variant-${this.variant}`,{"badge--has-icon":this.icon});return t(i,{key:"3d64f76fe54264451a966d8bb9aa044efd744939",role:"status"},t("span",{key:"918618864bcfd9cd017aecb390608a8d454218a4",class:e,part:"badge"},this.icon&&t("span",{key:"5488528c85b4851f98cfb6a6f61f0030f4dfab3c",class:"badge__icon",innerHTML:this.icon}),void 0===this.icon&&"dot"!==this.variant?t("span",{class:"badge__label"},this.label):t(r,null,void 0===this.icon&&t("span",{class:"badge__label"}," "),t("swirl-visually-hidden",null,this.label))))}static get style(){return":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}"}},[1,"swirl-badge",{icon:[1],intent:[1],label:[1],size:[1],variant:[1]}]);function l(){"undefined"!=typeof customElements&&["swirl-badge","swirl-visually-hidden"].forEach((e=>{switch(e){case"swirl-badge":customElements.get(s(e))||customElements.define(s(e),o);break;case"swirl-visually-hidden":customElements.get(s(e))||n()}}))}export{o as S,l as d}

package/dist/components/swirl-banner.js

@@ -1,97 +1 @@
-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 };
+import{proxyCustomElement as n,HTMLElement as e,createEvent as t,h as i,Host as a,transformTag as s}from"@stencil/core/internal/client";import{c as r}from"./index2.js";import{D as o}from"./media-query.service.js";import{d as c}from"./swirl-icon-close2.js";const b={default:void 0,critical:"<swirl-icon-error></swirl-icon-error>",success:"<swirl-icon-check-circle></swirl-icon-check-circle>",warning:"<swirl-icon-warning></swirl-icon-warning>",info:"<swirl-icon-info></swirl-icon-info>"},d=n(class extends e{constructor(n){super(),!1!==n&&this.__registerHost(),this.__attachShadow(),this.action=t(this,"action",7),this.dismiss=t(this,"dismiss",7),this.dismissable=!1,this.dismissLabel="Dismiss",this.importance="status",this.intent="default",this.showIcon=!1,this.size="m",this.mediaQueryUnsubscribe=()=>{},this.onAction=n=>{this.action.emit(n)},this.onDismiss=n=>{this.dismiss.emit(n)}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((n=>{this.forceIconProps(n)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(n){const e=this.iconEl?.children[0],t=this.dismissButtonEl?.children[0];e?.setAttribute("size",n?"20":"24"),t?.setAttribute("size",n?"20":"24")}determineIcon(){return this.icon?this.icon:b[this.intent]}render(){const n=this.determineIcon(),e=!!this.actionLabel||this.dismissable,t=this.icon||this.showIcon&&!!n,s=r("banner","banner--intent-"+this.intent,"banner--size-"+this.size,{"banner--has-icon":t});return i(a,{key:"11ecf5b273bb2636d5d3e779fc91df1f7b10a8e0"},i("div",{key:"bc5e53f04ad5e80defe407340d191d1951a10123","aria-describedby":"content",class:s,role:this.importance,tabIndex:0},i("div",{key:"86b3950336dca8b1d28994d1fb18113a4b4c421a",class:"banner__content",id:"content",part:"banner__content"},t&&i("span",{key:"5716e25d171cc28861459258e257c8a821ebc56d","aria-hidden":"true",class:"banner__icon",innerHTML:n,ref:n=>this.iconEl=n}),i("span",{key:"a5a5019667573c14dde87041e475481a7edf6d5e",class:"banner__text"},this.content)),e&&i("div",{key:"cf8632f83dc502caba7f10710a353d1a34f30493",class:"banner__controls"},this.actionLabel&&i("button",{key:"166c562828b381640c29783ac8b275f49b088cad",class:"banner__action-button",onClick:this.onAction,part:"banner__action-button",type:"button"},this.actionLabel),this.dismissable&&i("button",{key:"b1247a38ea5f7592d7c12f0919360041ea9061b8","aria-label":this.dismissLabel,class:"banner__dismiss-button",onClick:this.onDismiss,part:"banner__dismiss-button",ref:n=>this.dismissButtonEl=n,type:"button"},i("swirl-icon-close",{key:"12524ce0998e451f9260924e2a5226ddee4ade43"})))))}get element(){return this}static get style(){return":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}}"}},[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]}]),l=d,h=function(){"undefined"!=typeof customElements&&["swirl-banner","swirl-icon-close"].forEach((n=>{switch(n){case"swirl-banner":customElements.get(s(n))||customElements.define(s(n),d);break;case"swirl-icon-close":customElements.get(s(n))||c()}}))};export{l as SwirlBanner,h as defineCustomElement}

package/dist/components/swirl-box.js

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