@getflip/swirl-components 0.452.1 → 0.453.0

package/dist/components/swirl-accordion-item.js

@@ -1,109 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classNames } from './index2.js';
-import { d as defineCustomElement$3 } from './swirl-icon2.js';
-import { d as defineCustomElement$2 } from './swirl-text2.js';
-import { v as v4 } from './v4.js';
-
-const swirlAccordionItemCss = ":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-8);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}";
-
-const SwirlAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordionItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.expansionChange = createEvent(this, "expansionChange", 7);
-        this.headingLevel = 2;
-        this.itemId = v4();
-        this.expanded = false;
-        this.headingId = `${v4()}-heading`;
-        this.onHeadingClick = () => {
-            this.toggle();
-        };
-    }
-    componentWillLoad() {
-        this.accordion = this.el.closest("swirl-accordion");
-        this.expanded = (this.initiallyOpen && !this.disabled) || false;
-        if (!Boolean(this.accordion)) {
-            throw new Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.");
-        }
-    }
-    /**
-     * Collapses the accordion item.
-     */
-    async collapse() {
-        if (!this.expanded || this.disabled) {
-            return;
-        }
-        this.expanded = false;
-        this.expansionChange.emit(this.expanded);
-    }
-    /**
-     * Expands the accordion item.
-     */
-    async expand() {
-        if (this.expanded || this.disabled) {
-            return;
-        }
-        this.expanded = true;
-        this.expansionChange.emit(this.expanded);
-    }
-    /**
-     * Toggles the accordion item.
-     */
-    async toggle() {
-        if (this.expanded) {
-            this.collapse();
-        }
-        else {
-            this.expand();
-        }
-    }
-    render() {
-        const HeadingTag = `h${this.headingLevel}`;
-        const className = classNames("accordion-item", {
-            "accordion-item--expanded": this.expanded,
-        });
-        return (h(Host, { key: 'c4fe7aa9518cbd2624ccde341a9fd8f08169634b' }, h("div", { key: '314c5b587eaf6aad300233678256980630c821f0', class: className }, h(HeadingTag, { key: 'ce84e7a2814012b19ab355e6f619f28ed7c0f1c7', class: "accordion-item__heading" }, h("button", { key: '0c1fe4c0aa0d0a559186673f58117def8b7ab0f7', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("slot", { key: 'e48cc2afbf319a4e538612a2044b751df6083988', name: "media" }), h("span", { key: 'c09958a6a26155e174329cd9ba6a021778de431c', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '170527fc534a79cc76befa53ca244168a14f6974', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: 'bf0a3c3838d90f6143ac263f11516a0de3052d61', name: "trailing" }), h("span", { key: '71216599861aab62931348d6225e55f9864d6e92', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '56a97f8530efdce0a5a03e844d93614a7e5bf284', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '738101f1ee0ec13581f96514a43a6657f75ae378', glyph: "expand-more", size: 20 }))))), h("div", { key: '23dddfeb777370ef41939410d5a9786c1a682a07', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '55b5ec014bd9a2f15e653bf14ff05e06d95253fe' })))));
-    }
-    get el() { return this; }
-    static get style() { return swirlAccordionItemCss; }
-}, [1, "swirl-accordion-item", {
-        "description": [1],
-        "disabled": [4],
-        "heading": [1],
-        "headingLevel": [2, "heading-level"],
-        "initiallyOpen": [4, "initially-open"],
-        "itemId": [1, "item-id"],
-        "expanded": [32],
-        "collapse": [64],
-        "expand": [64],
-        "toggle": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-accordion-item", "swirl-icon", "swirl-text"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-accordion-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlAccordionItem$1);
-            }
-            break;
-        case "swirl-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlAccordionItem = SwirlAccordionItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlAccordionItem, defineCustomElement };
+import{proxyCustomElement as i,HTMLElement as e,createEvent as o,h as t,Host as a,transformTag as d}from"@stencil/core/internal/client";import{c as s}from"./index2.js";import{d as n}from"./swirl-icon2.js";import{d as r}from"./swirl-text2.js";import{v as c}from"./v4.js";const l=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.expansionChange=o(this,"expansionChange",7),this.headingLevel=2,this.itemId=c(),this.expanded=!1,this.headingId=c()+"-heading",this.onHeadingClick=()=>{this.toggle()}}componentWillLoad(){if(this.accordion=this.el.closest("swirl-accordion"),this.expanded=this.initiallyOpen&&!this.disabled||!1,!this.accordion)throw Error("[Swirl] swirl-accordion-item must be a child of a swirl-accordion.")}async collapse(){this.expanded&&!this.disabled&&(this.expanded=!1,this.expansionChange.emit(this.expanded))}async expand(){this.expanded||this.disabled||(this.expanded=!0,this.expansionChange.emit(this.expanded))}async toggle(){this.expanded?this.collapse():this.expand()}render(){const i="h"+this.headingLevel,e=s("accordion-item",{"accordion-item--expanded":this.expanded});return t(a,{key:"b1b85c0a693750019ccb5071e6b235ec6c78493e"},t("div",{key:"7fa07bf5dba36af47df5797db7dcba9af18cf2fd",class:e},t(i,{key:"fafb7a08b97c1562d4f2563b21050e7e8a73533d",class:"accordion-item__heading"},t("button",{key:"0ed88741b57bf20118d8d3645a3e256bd4bd1f76","aria-controls":this.itemId,"aria-expanded":this.expanded+"",class:"accordion-item__toggle",disabled:this.disabled,id:this.headingId,onClick:this.onHeadingClick,type:"button"},t("slot",{key:"104f9eb7b1981a77eb0d9d39857ac8df052d69f2",name:"media"}),t("span",{key:"a692679421ebfb686bf0b883ca81464a40e63eba",class:"accordion-item__toggle-text"},this.heading,this.description&&t("swirl-text",{key:"fba4713262a5a6348f44fe8ac44745fb22303af7",as:"span",color:"subdued",size:"sm"},this.description)),t("slot",{key:"f4af2aa5669cdc0de33b9e467602550b1c2eb75f",name:"trailing"}),t("span",{key:"4963beac74ee0793c871590a43f5b3c228c52ae6",class:"accordion-item__icon"},!this.expanded&&t("swirl-icon",{key:"927a7efe463420da15a885996a86c3ef831872e6",glyph:"chevron-right",size:20}),this.expanded&&t("swirl-icon",{key:"9b8072373dfb2acf6c13d4aa03fb6ece4cd89d14",glyph:"expand-more",size:20})))),t("div",{key:"793f298e9fecb22c613683f9d34c5d8be01d4baa","aria-labelledby":this.headingId,class:"accordion-item__content",id:this.itemId,role:"region"},t("slot",{key:"6d845c3009d4768e20f24c409cc7e65dcaf0bb80"}))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-8);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}"}},[257,"swirl-accordion-item",{description:[1],disabled:[4],heading:[1],headingLevel:[2,"heading-level"],initiallyOpen:[4,"initially-open"],itemId:[1,"item-id"],expanded:[32],collapse:[64],expand:[64],toggle:[64]}]),m=l,h=function(){"undefined"!=typeof customElements&&["swirl-accordion-item","swirl-icon","swirl-text"].forEach((i=>{switch(i){case"swirl-accordion-item":customElements.get(d(i))||customElements.define(d(i),l);break;case"swirl-icon":customElements.get(d(i))||n();break;case"swirl-text":customElements.get(d(i))||r()}}))};export{m as SwirlAccordionItem,h as defineCustomElement}

package/dist/components/swirl-accordion.js

@@ -1,78 +1 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-
-const swirlAccordionCss = ":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}";
-
-const SwirlAccordion$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAccordion extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.expandedItemChange = createEvent(this, "expandedItemChange", 7);
-        this.multiExpand = false;
-    }
-    componentDidLoad() {
-        this.el.addEventListener("expansionChange", (event) => {
-            if (event.detail) {
-                this.expandedItemChange.emit(event.target.itemId);
-                this.collapseInactiveItems(event.target);
-            }
-        });
-    }
-    /**
-     * Collapses an accordion item.
-     */
-    async collapseItem(itemId) {
-        const item = Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((item) => item.itemId === itemId);
-        if (!Boolean(item)) {
-            return;
-        }
-        item.collapse();
-    }
-    /**
-     * Expands an accordion item.
-     */
-    async expandItem(itemId) {
-        const item = Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((item) => item.itemId === itemId);
-        if (!Boolean(item)) {
-            return;
-        }
-        item.expand();
-    }
-    collapseInactiveItems(activeItem) {
-        if (this.multiExpand) {
-            return;
-        }
-        Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((item) => {
-            if (item !== activeItem) {
-                item.collapse();
-            }
-        });
-    }
-    render() {
-        return (h(Host, { key: '52a92a47d8c69d2d9b7f0ddca32331625edb454f' }, h("slot", { key: '6bbc72261850776b1a785f7c85eef462bc012b54' })));
-    }
-    get el() { return this; }
-    static get style() { return swirlAccordionCss; }
-}, [1, "swirl-accordion", {
-        "multiExpand": [4, "multi-expand"],
-        "collapseItem": [64],
-        "expandItem": [64]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-accordion"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-accordion":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlAccordion$1);
-            }
-            break;
-    } });
-}
-
-const SwirlAccordion = SwirlAccordion$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlAccordion, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as t,createEvent as s,h as c,Host as o,transformTag as i}from"@stencil/core/internal/client";const r=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.expandedItemChange=s(this,"expandedItemChange",7),this.multiExpand=!1}componentDidLoad(){this.el.addEventListener("expansionChange",(e=>{e.detail&&(this.expandedItemChange.emit(e.target.itemId),this.collapseInactiveItems(e.target))}))}async collapseItem(e){const t=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((t=>t.itemId===e));t&&t.collapse()}async expandItem(e){const t=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((t=>t.itemId===e));t&&t.expand()}collapseInactiveItems(e){this.multiExpand||Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((t=>{t!==e&&t.collapse()}))}render(){return c(o,{key:"5c7ab1cd24393d1cd8598364ee95473e7a212b0b"},c("slot",{key:"34d835300bedaca2ec5bea34cac96c6cae4fc5ec"}))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}::slotted(*:last-child){border-bottom:0.0625rem solid var(--s-border-default)}"}},[257,"swirl-accordion",{multiExpand:[4,"multi-expand"],collapseItem:[64],expandItem:[64]}]),n=r,a=function(){"undefined"!=typeof customElements&&["swirl-accordion"].forEach((e=>{"swirl-accordion"===e&&(customElements.get(i(e))||customElements.define(i(e),r))}))};export{n as SwirlAccordion,a as defineCustomElement}

package/dist/components/swirl-action-list-item.js

@@ -1,6 +1 @@
-import { S as SwirlActionListItem$1, d as defineCustomElement$1 } from './swirl-action-list-item2.js';
-
-const SwirlActionListItem = SwirlActionListItem$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlActionListItem, defineCustomElement };
+import{S as s,d as t}from"./swirl-action-list-item2.js";const i=s,o=t;export{i as SwirlActionListItem,o as defineCustomElement}

package/dist/components/swirl-action-list-item2.js

@@ -1,74 +1 @@
-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 swirlActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-translucent-low-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-translucent-low-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-translucent-low-pressed)}.action-list-item:disabled{cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}";
-
-const SwirlActionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlActionListItem extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.intent = "default";
-        this.size = "m";
-        this.truncateLabel = true;
-        this.mediaQueryUnsubscribe = () => { };
-    }
-    componentDidLoad() {
-        this.mediaQueryUnsubscribe = DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-        });
-    }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
-    }
-    forceIconProps(smallIcon) {
-        const icon = this.iconEl?.children[0];
-        const suffix = this.suffixEl?.children[0];
-        icon?.setAttribute("size", smallIcon ? "20" : "24");
-        const iconBadge = this.iconBadgeEl?.children[0];
-        iconBadge?.setAttribute("size", "xs");
-        iconBadge?.setAttribute("variant", "dot");
-        if (suffix?.tagName === "SWIRL-TAG")
-            return;
-        suffix?.setAttribute("size", smallIcon ? "20" : "24");
-    }
-    render() {
-        const showBadge = Boolean(this.badge);
-        const showIconBadge = Boolean(this.iconBadge);
-        const showSuffixSlot = Boolean(this.el.querySelector('[slot="suffix"]'));
-        const showSuffix = (Boolean(this.suffix) || showSuffixSlot) && !this.disabled;
-        const className = classNames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-        return (h(Host, { key: 'a8ec31c9d8234291c8379e9b3521f91c176e811e' }, h("button", { key: '3018e2f041a84b321b9cef388c85c59afa518b79', "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, h("slot", { key: '34bebbac07562f76eb29e1b93900019a75143add', name: "avatar" }), this.icon && (h("span", { key: '15b82e7eb50d334254f1f6da7d55cecad4706475', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '0c4c8fc78fd13d707cb33dab2309c85f97a4e201', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: 'c3c1a34a74a8dfbec8a82cb3fc797ce03e6ddd55', class: "action-list-item__label-container" }, h("span", { key: '9626f3a01f7c95da947b7665e7c97a9542f48cfb', class: "action-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" } }, this.label), this.description && (h("span", { key: 'e002430aa42252b68c1550af4d2c75dd744f78ee', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: '1aca4916c0f3fca1601c49db73ae72516520572f', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: 'c355f7123d3d5deba0a72ca3ee1142ef3210d96e', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: 'd3d6cac336709a2592f637971f0479587cbf0dee', name: "suffix" }))))));
-    }
-    get el() { return this; }
-    static get style() { return swirlActionListItemCss; }
-}, [1, "swirl-action-list-item", {
-        "badge": [1],
-        "disabled": [4],
-        "description": [1],
-        "icon": [1],
-        "iconBadge": [1, "icon-badge"],
-        "intent": [1],
-        "label": [1],
-        "size": [1],
-        "swirlAriaExpanded": [1, "swirl-aria-expanded"],
-        "swirlAriaHaspopup": [1, "swirl-aria-haspopup"],
-        "suffix": [1],
-        "truncateLabel": [4, "truncate-label"]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-action-list-item"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-action-list-item":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlActionListItem);
-            }
-            break;
-    } });
-}
-
-export { SwirlActionListItem as S, defineCustomElement as d };
+import{proxyCustomElement as i,HTMLElement as t,h as e,Host as a,transformTag as s}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{D as o}from"./media-query.service.js";const l=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.intent="default",this.size="m",this.truncateLabel=!0,this.mediaQueryUnsubscribe=()=>{}}componentDidLoad(){this.mediaQueryUnsubscribe=o.subscribe((i=>{this.forceIconProps(i)}))}disconnectedCallback(){this.mediaQueryUnsubscribe()}forceIconProps(i){const t=this.iconEl?.children[0],e=this.suffixEl?.children[0];t?.setAttribute("size",i?"20":"24");const a=this.iconBadgeEl?.children[0];a?.setAttribute("size","xs"),a?.setAttribute("variant","dot"),"SWIRL-TAG"!==e?.tagName&&e?.setAttribute("size",i?"20":"24")}render(){const i=Boolean(this.badge),t=Boolean(this.iconBadge),s=Boolean(this.el.querySelector('[slot="suffix"]')),o=(Boolean(this.suffix)||s)&&!this.disabled,l=n("action-list-item",`action-list-item--intent-${this.intent}`,`action-list-item--size-${this.size}`);return e(a,{key:"a8ec31c9d8234291c8379e9b3521f91c176e811e"},e("button",{key:"3018e2f041a84b321b9cef388c85c59afa518b79","aria-expanded":this.swirlAriaExpanded,"aria-haspopup":this.swirlAriaHaspopup,class:l,disabled:this.disabled,part:"action-list-item",role:"menuitem",tabIndex:-1,type:"button"},e("slot",{key:"34bebbac07562f76eb29e1b93900019a75143add",name:"avatar"}),this.icon&&e("span",{key:"15b82e7eb50d334254f1f6da7d55cecad4706475",class:"action-list-item__icon",innerHTML:this.icon,ref:i=>this.iconEl=i},t&&e("span",{key:"0c4c8fc78fd13d707cb33dab2309c85f97a4e201",class:"action-list-item__icon-badge",innerHTML:this.iconBadge,ref:i=>this.iconBadgeEl=i})),e("span",{key:"c3c1a34a74a8dfbec8a82cb3fc797ce03e6ddd55",class:"action-list-item__label-container"},e("span",{key:"9626f3a01f7c95da947b7665e7c97a9542f48cfb",class:"action-list-item__label",style:{whiteSpace:this.truncateLabel?"nowrap":"normal"}},this.label),this.description&&e("span",{key:"e002430aa42252b68c1550af4d2c75dd744f78ee",class:"action-list-item__description"},this.description)),i&&e("span",{key:"1aca4916c0f3fca1601c49db73ae72516520572f",class:"action-list-item__badge",innerHTML:this.badge}),o&&e("span",{key:"c355f7123d3d5deba0a72ca3ee1142ef3210d96e",class:"action-list-item__suffix",innerHTML:s?void 0:this.suffix,ref:i=>this.suffixEl=i},e("slot",{key:"d3d6cac336709a2592f637971f0479587cbf0dee",name:"suffix"}))))}get el(){return this}static get style(){return":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;border-radius:var(--s-border-radius-sm);color:var(--s-text-default);background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-translucent-low-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-translucent-low-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}.action-list-item:active{background-color:var(--s-translucent-low-pressed)}.action-list-item:disabled{cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item__icon{width:1.25rem;height:1.25rem}}.action-list-item__icon-badge{position:absolute;display:grid;bottom:0;right:0}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;flex-shrink:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__badge{overflow:hidden;min-width:4rem;padding-left:var(--s-space-8);flex-shrink:3;color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);text-align:right;white-space:nowrap;text-overflow:ellipsis}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}"}},[257,"swirl-action-list-item",{badge:[1],disabled:[4],description:[1],icon:[1],iconBadge:[1,"icon-badge"],intent:[1],label:[1],size:[1],swirlAriaExpanded:[1,"swirl-aria-expanded"],swirlAriaHaspopup:[1,"swirl-aria-haspopup"],suffix:[1],truncateLabel:[4,"truncate-label"]}]);function c(){"undefined"!=typeof customElements&&["swirl-action-list-item"].forEach((i=>{"swirl-action-list-item"===i&&(customElements.get(s(i))||customElements.define(s(i),l))}))}export{l as S,c as d}

package/dist/components/swirl-action-list-section.js

@@ -1,53 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$3 } from './swirl-separator2.js';
-import { d as defineCustomElement$2 } from './swirl-stack2.js';
-
-const swirlActionListSectionCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}";
-
-const SwirlActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class SwirlActionListSection extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.separatorSpacing = "4";
-        this.spacing = "0";
-        this.hasSeparator = false;
-    }
-    render() {
-        return (h(Host, { key: 'c353e574f05fe969e8da34d168d49b303393e63c' }, this.hasSeparator && (h("swirl-separator", { key: 'a2ee97295f8008855b8b49df50a16c81ab846a4a', spacing: this.separatorSpacing })), h("div", { key: '7acec8b0a4b14d44c993d27e9972ce424cded911', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'b44a649448a5317d7047098ece65d455d7da34de', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '259331672891860273deeaa0b21e633dd3ad18aa', spacing: this.spacing, align: "stretch" }, h("slot", { key: 'd08ae1429c8f4ed5079ebba44216952e0e5fec52' })))));
-    }
-    static get style() { return swirlActionListSectionCss; }
-}, [1, "swirl-action-list-section", {
-        "label": [1],
-        "separatorSpacing": [1, "separator-spacing"],
-        "spacing": [1],
-        "hasSeparator": [4, "has-separator"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-action-list-section", "swirl-separator", "swirl-stack"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-action-list-section":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlActionListSection$1);
-            }
-            break;
-        case "swirl-separator":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$3();
-            }
-            break;
-        case "swirl-stack":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlActionListSection = SwirlActionListSection$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlActionListSection, defineCustomElement };
+import{proxyCustomElement as e,HTMLElement as s,h as a,Host as t,transformTag as i}from"@stencil/core/internal/client";import{d as r}from"./swirl-separator2.js";import{d as c}from"./swirl-stack2.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){return a(t,{key:"c353e574f05fe969e8da34d168d49b303393e63c"},this.hasSeparator&&a("swirl-separator",{key:"a2ee97295f8008855b8b49df50a16c81ab846a4a",spacing:this.separatorSpacing}),a("div",{key:"7acec8b0a4b14d44c993d27e9972ce424cded911","aria-labelledby":"label",class:"action-list-section",role:"group"},a("span",{key:"b44a649448a5317d7047098ece65d455d7da34de",class:"action-list-section__label",id:"label",part:"action-list-section__label"},this.label),a("swirl-stack",{key:"259331672891860273deeaa0b21e633dd3ad18aa",spacing:this.spacing,align:"stretch"},a("slot",{key:"d08ae1429c8f4ed5079ebba44216952e0e5fec52"}))))}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-section__label{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);padding:var(--s-space-8) var(--s-space-12)}}"}},[257,"swirl-action-list-section",{label:[1],separatorSpacing:[1,"separator-spacing"],spacing:[1],hasSeparator:[4,"has-separator"]}]),o=l,n=function(){"undefined"!=typeof customElements&&["swirl-action-list-section","swirl-separator","swirl-stack"].forEach((e=>{switch(e){case"swirl-action-list-section":customElements.get(i(e))||customElements.define(i(e),l);break;case"swirl-separator":customElements.get(i(e))||r();break;case"swirl-stack":customElements.get(i(e))||c()}}))};export{o as SwirlActionListSection,n as defineCustomElement}

package/dist/components/swirl-action-list.js

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

package/dist/components/swirl-action-list2.js

@@ -1,118 +1 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { q as querySelectorAllDeep, k as getActiveElement } from './utils.js';
-
-const swirlActionListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
-
-const SwirlActionList = /*@__PURE__*/ proxyCustomElement(class SwirlActionList extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.onKeyDown = (event) => {
-            if (event.code === "ArrowDown" || event.code === "ArrowRight") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusNextItem();
-            }
-            else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
-                event.preventDefault();
-                event.stopPropagation();
-                this.focusPreviousItem();
-            }
-        };
-        this.onFocusOut = (event) => {
-            if (this.isInsidePopover) {
-                return;
-            }
-            const elementReceivingFocus = event.relatedTarget;
-            const elementLosingFocus = event.target;
-            const losingElementIsListItem = elementLosingFocus?.tagName === "SWIRL-ACTION-LIST-ITEM";
-            const receivingElementIsOutsideActionList = elementReceivingFocus === null ||
-                !this.el.contains(elementReceivingFocus);
-            if (!this.isInsidePopover &&
-                receivingElementIsOutsideActionList &&
-                losingElementIsListItem) {
-                this.container.setAttribute("tabindex", "0");
-            }
-        };
-        this.onFocus = () => {
-            if (this.isInsidePopover) {
-                return;
-            }
-            this.container.removeAttribute("tabindex");
-            const items = this.getItems();
-            const activeItemIndex = this.getActiveItemIndex();
-            if (activeItemIndex > -1) {
-                items[activeItemIndex]?.focus();
-            }
-            else {
-                items[0]?.focus();
-            }
-        };
-    }
-    componentDidLoad() {
-        queueMicrotask(() => {
-            this.isInsidePopover = this.el.closest("swirl-popover") !== null;
-            if (!this.isInsidePopover) {
-                this.container.setAttribute("tabindex", "0");
-            }
-        });
-        this.setSectionSeparator();
-    }
-    getItems() {
-        return querySelectorAllDeep(this.el, '[role="menuitem"]');
-    }
-    focusNextItem() {
-        const items = this.getItems();
-        const activeItemIndex = this.getActiveItemIndex();
-        const newIndex = (activeItemIndex + 1) % items.length;
-        items[newIndex].focus();
-    }
-    focusPreviousItem() {
-        const items = this.getItems();
-        const activeItemIndex = this.getActiveItemIndex();
-        const newIndex = activeItemIndex === 0 ? items.length - 1 : activeItemIndex - 1;
-        items[newIndex]?.focus();
-    }
-    getActiveItemIndex() {
-        const items = this.getItems();
-        const activeElement = getActiveElement();
-        return items.findIndex((item) => item === activeElement ||
-            item === activeElement?.querySelector('[role="menuitem"]'));
-    }
-    setSectionSeparator() {
-        if (!this.el) {
-            return;
-        }
-        const sections = Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((el) => el.isConnected);
-        sections.forEach((section, index) => {
-            // First section should not have a separator if there are no items above
-            if (index === 0 &&
-                section.previousElementSibling?.tagName !== "SWIRL-ACTION-LIST-ITEM") {
-                section.hasSeparator = false;
-            }
-        });
-    }
-    render() {
-        return (h(Host, { key: '5442b552f660a65607f637d1e658ce03cc0102df' }, h("div", { key: '163eb820320b9013cfcdc8853c147aacdbd77e50', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: '0056a5e3b7f6d6e9723fee4e5fb00d8bb9ed10e5', onSlotchange: this.setSectionSeparator }))));
-    }
-    get el() { return this; }
-    static get style() { return swirlActionListCss; }
-}, [1, "swirl-action-list", {
-        "isInsidePopover": [32]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-action-list"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-action-list":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlActionList);
-            }
-            break;
-    } });
-}
-
-export { SwirlActionList as S, defineCustomElement as d };
+import{proxyCustomElement as t,HTMLElement as s,h as i,Host as e,transformTag as o}from"@stencil/core/internal/client";import{q as n,k as r}from"./utils.js";const c=t(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.onKeyDown=t=>{"ArrowDown"===t.code||"ArrowRight"===t.code?(t.preventDefault(),t.stopPropagation(),this.focusNextItem()):"ArrowUp"!==t.code&&"ArrowLeft"!==t.code||(t.preventDefault(),t.stopPropagation(),this.focusPreviousItem())},this.onFocusOut=t=>{if(this.isInsidePopover)return;const s=t.relatedTarget,i=t.target,e="SWIRL-ACTION-LIST-ITEM"===i?.tagName,o=null===s||!this.el.contains(s);!this.isInsidePopover&&o&&e&&this.container.setAttribute("tabindex","0")},this.onFocus=()=>{if(this.isInsidePopover)return;this.container.removeAttribute("tabindex");const t=this.getItems(),s=this.getActiveItemIndex();s>-1?t[s]?.focus():t[0]?.focus()}}componentDidLoad(){queueMicrotask((()=>{this.isInsidePopover=null!==this.el.closest("swirl-popover"),this.isInsidePopover||this.container.setAttribute("tabindex","0")})),this.setSectionSeparator()}getItems(){return n(this.el,'[role="menuitem"]')}focusNextItem(){const t=this.getItems();t[(this.getActiveItemIndex()+1)%t.length].focus()}focusPreviousItem(){const t=this.getItems(),s=this.getActiveItemIndex(),i=0===s?t.length-1:s-1;t[i]?.focus()}getActiveItemIndex(){const t=this.getItems(),s=r();return t.findIndex((t=>t===s||t===s?.querySelector('[role="menuitem"]')))}setSectionSeparator(){this.el&&Array.from(this.el.querySelectorAll("swirl-action-list-section")).filter((t=>t.isConnected)).forEach(((t,s)=>{0===s&&"SWIRL-ACTION-LIST-ITEM"!==t.previousElementSibling?.tagName&&(t.hasSeparator=!1)}))}render(){return i(e,{key:"5442b552f660a65607f637d1e658ce03cc0102df"},i("div",{key:"163eb820320b9013cfcdc8853c147aacdbd77e50","aria-orientation":"vertical",class:"action-list",onFocusout:this.isInsidePopover?void 0:this.onFocusOut,onFocus:this.isInsidePopover?void 0:this.onFocus,onKeyDown:this.onKeyDown,part:"action-list",ref:t=>this.container=t,role:"menu"},i("slot",{key:"0056a5e3b7f6d6e9723fee4e5fb00d8bb9ed10e5",onSlotchange:this.setSectionSeparator})))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}"}},[257,"swirl-action-list",{isInsidePopover:[32]}]);function h(){"undefined"!=typeof customElements&&["swirl-action-list"].forEach((t=>{"swirl-action-list"===t&&(customElements.get(o(t))||customElements.define(o(t),c))}))}export{c as S,h as d}

package/dist/components/swirl-app-bar.js

@@ -1,105 +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-button2.js';
-
-const swirlAppBarCss = ":host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:\"\";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar:not(.app-bar--has-heading) .app-bar__center-controls{display:flex}.app-bar:not(.app-bar--has-heading) .app-bar__heading{display:none}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}";
-
-const SwirlAppBar$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAppBar extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.backButtonClick = createEvent(this, "backButtonClick", 7);
-        this.closeButtonClick = createEvent(this, "closeButtonClick", 7);
-        this.stepUpButtonClick = createEvent(this, "stepUpButtonClick", 7);
-        this.stepDownButtonClick = createEvent(this, "stepDownButtonClick", 7);
-        this.backButtonLabel = "Go back";
-        this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>";
-        this.closeButtonLabel = "Close";
-        this.paddingInlineEnd = "16";
-        this.paddingInlineStart = "16";
-        this.stepUpButtonLabel = "Previous item";
-        this.stepDownButtonLabel = "Next item";
-        this.showHeading = true;
-        this.onBackButtonClick = (event) => {
-            this.backButtonClick.emit(event);
-        };
-        this.onCloseButtonClick = (event) => {
-            this.closeButtonClick.emit(event);
-        };
-        this.onStepUpButtonClick = (event) => {
-            this.stepUpButtonClick.emit(event);
-        };
-        this.onStepDownButtonClick = (event) => {
-            this.stepDownButtonClick.emit(event);
-        };
-    }
-    componentWillLoad() {
-        this.mutationObserver = new MutationObserver(() => {
-            this.updateCtaStatus();
-        });
-        this.mutationObserver.observe(this.el, { childList: true });
-        queueMicrotask(() => {
-            this.updateCtaStatus();
-        });
-    }
-    disconnectedCallback() {
-        this.mutationObserver?.disconnect();
-    }
-    updateCtaStatus() {
-        this.hasCta = Boolean(this.el.querySelector('[slot="cta"]'));
-    }
-    render() {
-        const showLeftControls = this.showBackButton || this.showCloseButton || this.showStepperControls;
-        const hasRightControls = Boolean(this.el.querySelector('[slot="right-controls"]'));
-        const hasHeading = Boolean(this.el.querySelector('[slot="heading"]'));
-        const className = classNames("app-bar", {
-            "app-bar--has-cta": this.hasCta,
-            "app-bar--has-right-controls": hasRightControls,
-            "app-bar--has-heading": hasHeading && this.showHeading,
-        });
-        const styles = {
-            paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
-            paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
-        };
-        return (h(Host, { key: '2fc2dc7672ca8ab6c3ea4a2bea33d52730eaea3f' }, h("div", { key: '853eac25f0092f4e3c9159bcb928f953026c6e87', class: className, style: styles }, showLeftControls && (h("div", { key: '272353acea74c10e90d43d894fb535d65fcb1af3', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: '04b34c7a362ca98d02e4692da4e11196122e4d2a', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '82188c1a465798ef652ee7a642bf038ccdd21d5a', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '9a31265626092d9079b4b4a27461b483e489fff9', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '0b089aedecaf8f42a9d656174fc93dd5837dbe7c', class: "app-bar__stepper-controls" }, h("swirl-button", { key: '8a5a2de50ae5c53e2b9af7ab9597f9988d476863', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: '090451b7e112346d617018aae45782af57924276', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: 'caf1b7b3e2d6a9f3fd45080b47200ba23f06de2f', class: "app-bar__cta" }, h("slot", { key: 'f8a5d105b77db1f107dac0364e56f8fc498d22b5', name: "cta" })), h("div", { key: 'a3d5e082c9c2957791fc5aa1fd767d466acf70dc', class: "app-bar__heading" }, h("slot", { key: 'a3188a9e1ab5b93d645293074ba6930e8a88df32', name: "heading" })), h("div", { key: '0466ef640baf9d738f48c221ceb99446f3dcb352', class: "app-bar__center-controls" }, h("slot", { key: '56cf69f32c293072015f45bfe017627bf61706c7', name: "center-controls" })), h("div", { key: 'd24c3205c5c6f6b8cee93590694c71fb87a9307b', class: "app-bar__right-controls" }, h("slot", { key: 'bc29b52f8e205b03e48449cfb05f57b5b348766d', name: "right-controls" })))));
-    }
-    get el() { return this; }
-    static get style() { return swirlAppBarCss; }
-}, [1, "swirl-app-bar", {
-        "backButtonLabel": [1, "back-button-label"],
-        "closeButtonIcon": [1, "close-button-icon"],
-        "closeButtonLabel": [1, "close-button-label"],
-        "paddingInlineEnd": [1, "padding-inline-end"],
-        "paddingInlineStart": [1, "padding-inline-start"],
-        "stepUpButtonLabel": [1, "step-up-button-label"],
-        "stepDownButtonLabel": [1, "step-down-button-label"],
-        "showBackButton": [4, "show-back-button"],
-        "showCloseButton": [4, "show-close-button"],
-        "showHeading": [4, "show-heading"],
-        "showStepperControls": [4, "show-stepper-controls"],
-        "hasCta": [32]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["swirl-app-bar", "swirl-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "swirl-app-bar":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SwirlAppBar$1);
-            }
-            break;
-        case "swirl-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-
-const SwirlAppBar = SwirlAppBar$1;
-const defineCustomElement = defineCustomElement$1;
-
-export { SwirlAppBar, defineCustomElement };
+import{proxyCustomElement as a,HTMLElement as t,createEvent as e,h as s,Host as i,transformTag as n}from"@stencil/core/internal/client";import{c as o}from"./index2.js";import{d as r}from"./swirl-button2.js";const l=a(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.backButtonClick=e(this,"backButtonClick",7),this.closeButtonClick=e(this,"closeButtonClick",7),this.stepUpButtonClick=e(this,"stepUpButtonClick",7),this.stepDownButtonClick=e(this,"stepDownButtonClick",7),this.backButtonLabel="Go back",this.closeButtonIcon="<swirl-icon-close></swirl-icon-close>",this.closeButtonLabel="Close",this.paddingInlineEnd="16",this.paddingInlineStart="16",this.stepUpButtonLabel="Previous item",this.stepDownButtonLabel="Next item",this.showHeading=!0,this.onBackButtonClick=a=>{this.backButtonClick.emit(a)},this.onCloseButtonClick=a=>{this.closeButtonClick.emit(a)},this.onStepUpButtonClick=a=>{this.stepUpButtonClick.emit(a)},this.onStepDownButtonClick=a=>{this.stepDownButtonClick.emit(a)}}componentWillLoad(){this.mutationObserver=new MutationObserver((()=>{this.updateCtaStatus()})),this.mutationObserver.observe(this.el,{childList:!0}),queueMicrotask((()=>{this.updateCtaStatus()}))}disconnectedCallback(){this.mutationObserver?.disconnect()}updateCtaStatus(){this.hasCta=!!this.el.querySelector('[slot="cta"]')}render(){const a=this.showBackButton||this.showCloseButton||this.showStepperControls,t=!!this.el.querySelector('[slot="right-controls"]'),e=!!this.el.querySelector('[slot="heading"]'),n=o("app-bar",{"app-bar--has-cta":this.hasCta,"app-bar--has-right-controls":t,"app-bar--has-heading":e&&this.showHeading});return s(i,{key:"3780ddd0d31da42b5debfb9a4a239db65d2b9f6a"},s("div",{key:"6a64894f59b6e56a3ea43a2fd2186bcc00f4d1a5",class:n,style:{paddingInlineEnd:`var(--s-space-${this.paddingInlineEnd})`,paddingInlineStart:`var(--s-space-${this.paddingInlineStart})`}},a&&s("div",{key:"ca74718a2032cac792a1fbc43745eac49a71d5fe",class:"app-bar__left-controls"},(this.showBackButton||this.showCloseButton)&&s("div",{key:"2066d1cab1565885df8a31a6a983980205e1ea82",class:"app-bar__main-navigation-control"},this.showBackButton&&s("swirl-button",{key:"67f59277ee4523b25ee497ca9a1d2d0f6690088b",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButtonLabel,onClick:this.onBackButtonClick}),this.showCloseButton&&s("swirl-button",{key:"da058aef20dedd56df6ebd911f6e5822a8b1af37",hideLabel:!0,icon:this.closeButtonIcon,label:this.closeButtonLabel,onClick:this.onCloseButtonClick})),this.showStepperControls&&s("div",{key:"c9da007e15d4f351535c44a8766d285cd7fdf758",class:"app-bar__stepper-controls"},s("swirl-button",{key:"b75f27203ca254564147a45180240f4a050607c0",hideLabel:!0,icon:"<swirl-icon-arrow-upward></swirl-icon-arrow-upward>",label:this.stepUpButtonLabel,onClick:this.onStepUpButtonClick}),s("swirl-button",{key:"4a6aebc86c7e3e73cc80579ce79c22fa17c2f2bd",hideLabel:!0,icon:"<swirl-icon-arrow-downward></swirl-icon-arrow-downward>",label:this.stepDownButtonLabel,onClick:this.onStepDownButtonClick}))),s("div",{key:"05efc306d01e5a8f29436001e583496fdbc4d474",class:"app-bar__cta"},s("slot",{key:"794013782abe08494ef50da060da52c95e5f8e50",name:"cta"})),s("div",{key:"d3ee2f096ada2ccb1a0cefa7e3f4b52a5180e3fe",class:"app-bar__heading"},s("slot",{key:"a3f2f4adf696a08752874556b2cad106dbbe8cef",name:"heading"})),s("div",{key:"971230dd573cb3a35650534365b5a16506ad117a",class:"app-bar__center-controls"},s("slot",{key:"d26903808a059b4645efd868dc1847e87e4daf96",name:"center-controls"})),s("div",{key:"466c2ec56b707d9d4d33022fb83ad87648e3f177",class:"app-bar__right-controls"},s("slot",{key:"786e1a1b3a962d82989a23f6ed6304e4bce1bbf0",name:"right-controls"}))))}get el(){return this}static get style(){return':host{display:block;overflow-x:auto;width:100%}:host *{box-sizing:border-box}.app-bar{display:flex;min-height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;gap:var(--s-space-16)}.app-bar--has-cta .app-bar__cta{display:block}.app-bar:not(.app-bar--has-right-controls) .app-bar__right-controls{display:none}.app-bar__left-controls{display:flex;min-width:0;flex-shrink:0;align-items:center;gap:var(--s-space-16)}.app-bar__main-navigation-control{flex-shrink:0}.app-bar__cta{display:none}.app-bar__heading{display:flex;min-width:10rem;flex-grow:1;align-items:center}@media (min-width: 992px){.app-bar__heading{min-width:0;flex-grow:0}}.app-bar__stepper-controls{position:relative;display:flex;flex-shrink:0;gap:var(--s-space-4)}.app-bar__stepper-controls:not(:first-child){padding-left:var(--s-space-16)}.app-bar__stepper-controls:not(:first-child):after{position:absolute;top:50%;left:0;width:var(--s-border-width-default);height:1.25rem;background-color:var(--s-border-default);content:"";transform:translateY(-50%)}.app-bar__center-controls{display:none;flex-grow:1;justify-content:center;align-items:center}@media (min-width: 992px){.app-bar__center-controls{display:flex}}.app-bar:not(.app-bar--has-heading) .app-bar__center-controls{display:flex}.app-bar:not(.app-bar--has-heading) .app-bar__heading{display:none}.app-bar__right-controls{display:flex;min-width:0;flex-shrink:0;justify-content:flex-end;align-items:center}'}},[257,"swirl-app-bar",{backButtonLabel:[1,"back-button-label"],closeButtonIcon:[1,"close-button-icon"],closeButtonLabel:[1,"close-button-label"],paddingInlineEnd:[1,"padding-inline-end"],paddingInlineStart:[1,"padding-inline-start"],stepUpButtonLabel:[1,"step-up-button-label"],stepDownButtonLabel:[1,"step-down-button-label"],showBackButton:[4,"show-back-button"],showCloseButton:[4,"show-close-button"],showHeading:[4,"show-heading"],showStepperControls:[4,"show-stepper-controls"],hasCta:[32]}]),c=l,d=function(){"undefined"!=typeof customElements&&["swirl-app-bar","swirl-button"].forEach((a=>{switch(a){case"swirl-app-bar":customElements.get(n(a))||customElements.define(n(a),l);break;case"swirl-button":customElements.get(n(a))||r()}}))};export{c as SwirlAppBar,d as defineCustomElement}