@getflip/swirl-components 0.0.0-beta-20260114160010

package/dist/components/swirl-accordion-item.d.ts

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

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

@@ -0,0 +1,109 @@
+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: 'b35263203580fbfed36b2007641d1f83a63c6e6d' }, h("div", { key: '35c217c4a3e34ecf98b10bc39e53b1ffba8d0fc5', class: className }, h(HeadingTag, { key: '5a9e428ef98f63224fd0d025cf09b7b914337fc9', class: "accordion-item__heading" }, h("button", { key: '7c0ddadaeaa5df01bf70a8c4cb6ad74dc40557cd', "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: '42a75751024d1df6ca107276fcdbe7f3f882aa5e', name: "media" }), h("span", { key: 'dfe928fb6416203e7476e1103f5577b703f3c1d8', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'd580febd870c6e2e44bccb23ba2c38c8ceabf997', as: "span", color: "subdued", size: "sm" }, this.description))), h("slot", { key: '66fe643c962611eb0f9a1fe40ebdf98f40f4d088', name: "trailing" }), h("span", { key: '9a717649ec1c02ab576b69d2ab5a819f7cf3cfed', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '7c62cddc6b7a9af65fb2114c9398641f96c06e3e', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: '5deea0602d5390bdabf6ab46834aa6b623436e5c', glyph: "expand-more", size: 20 }))))), h("div", { key: 'db1eb88c10e0ff64166188b483387f55969a8619', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '10d46819cced462a6f1fa9398cc34c325d0bc0ce' })))));
+    }
+    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 };

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

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

package/dist/components/swirl-accordion.js

@@ -0,0 +1,78 @@
+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: '460a845a82b2d480c008336395d835cc94e43452' }, h("slot", { key: '38b47130b8c7b415a26c5ccdec36bc8edbabb6f2' })));
+    }
+    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 };

package/dist/components/swirl-action-list-item.d.ts

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

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

@@ -0,0 +1,6 @@
+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 };

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

@@ -0,0 +1,72 @@
+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:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered);--swirl-tag-background-default:var(--s-surface-sunken-pressed)}.action-list-item:focus{outline:none}.action-list-item:focus-visible{background-color:var(--s-surface-overlay-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-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.action-list-item{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-8)}}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;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.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: '6e0ba3475bbabc4b456d23070aada4ad73a7bef7' }, h("button", { key: '568753980452f56f6305573cfacc1540728f8a64', "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: '90c23d6a829bdb2903ff76eda7852101b174b198', name: "avatar" }), this.icon && (h("span", { key: '1855b294b64760c5399cfb9b371715399ed2e985', class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: '1db1f001b6a4e9d40d4e11dddb5f2a45c8c81106', class: "action-list-item__icon-badge", innerHTML: this.iconBadge, ref: (el) => (this.iconBadgeEl = el) })))), h("span", { key: 'a55df1b640cb5c5109dc632c39dca728fce290da', class: "action-list-item__label-container" }, h("span", { key: 'ae479a05bbfd854b8472d3977d7489df73e611cb', class: "action-list-item__label" }, this.label), this.description && (h("span", { key: '959761897cc5c8d4d2474795460b66bb5d22475b', class: "action-list-item__description" }, this.description))), showBadge && (h("span", { key: 'cd679c3648c86d6d7f5c9c37f1d02e8b14cd2bfe', class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { key: '88754ec73e17680ebdc939f42df996dace73fdce', class: "action-list-item__suffix", innerHTML: !showSuffixSlot ? this.suffix : undefined, ref: (el) => (this.suffixEl = el) }, h("slot", { key: '37b5c4659a5ff5c1e36e9dd47292180e9b9a5dac', 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]
+    }]);
+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 };

package/dist/components/swirl-action-list-section.d.ts

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

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

@@ -0,0 +1,53 @@
+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{background-color:var(--s-surface-overlay-default)}.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: '0bc222deb3a1bff86e6d5848eccc54f76fb34ce8' }, this.hasSeparator && (h("swirl-separator", { key: 'd11407df329bdb42e01574020636e0bad8cce670', spacing: this.separatorSpacing })), h("div", { key: '9615a451dd4b4ead12b371e5d5ee7185087d9aeb', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'fcd3b4cee29e7f17331fccb71a5e70eb9cb78618', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("swirl-stack", { key: '748e7da4efcbd321db239694fabb7516dda850d7', spacing: this.spacing, align: "stretch" }, h("slot", { key: '5e05616181c45744e7a22d326ff4ce12198bfb9f' })))));
+    }
+    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 };

package/dist/components/swirl-action-list.d.ts

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

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

@@ -0,0 +1,6 @@
+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 };

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

@@ -0,0 +1,116 @@
+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}.action-list{background-color:var(--s-surface-overlay-default)}";
+
+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();
+                this.focusNextItem();
+            }
+            else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
+                event.preventDefault();
+                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: '09d1bc4e31b1945570f416728e29691ab8d3c3e3' }, h("div", { key: '22e9fd9171e10e4848b4c8abe27294aa9b27f135', "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: 'f8774d4ee3df61df23e9219a24bd9cceb9f85b45', 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 };

package/dist/components/swirl-app-bar.d.ts

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

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

@@ -0,0 +1,105 @@
+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 };

package/dist/components/swirl-app-icon.d.ts

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