@getflip/swirl-components 0.502.1 → 0.504.0

package/dist/collection/components/swirl-tab-bar/swirl-tab-bar.js

@@ -39,6 +39,7 @@ export class SwirlTabBar {
         const className = classnames("tab-bar", `tab-bar--justify-${this.justify}`, {
             "tab-bar--variant-pill": this.variant === "pill",
             "tab-bar--variant-default": this.variant === "default",
+            "tab-bar--wrap": this.wrap,
         });
         const styles = {
             paddingInlineEnd: Boolean(this.paddingInlineEnd)
@@ -54,7 +55,7 @@ export class SwirlTabBar {
                 ? `var(--s-space-${this.paddingBlockStart})`
                 : undefined,
         };
-        return (h(Host, { key: '628b2db8f71d0a6927d78a12d7059ab491d9dfdf' }, h("div", { key: 'fb4b2be69d372ac85aae4c9555300e899bf64980', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
+        return (h(Host, { key: 'cea695a31584e81e5cf93c399a4936260549eebd' }, h("div", { key: '21bc9de307bcbbdb0021bd64f0a6033326413568', "aria-label": this.label, class: className, onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist", style: styles }, this.tabs.map((tab) => {
             const className = classnames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
                 "tab-bar__tab--variant-pill": this.variant === "pill",
@@ -299,6 +300,25 @@ export class SwirlTabBar {
                 "reflect": false,
                 "attribute": "variant",
                 "defaultValue": "\"default\""
+            },
+            "wrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "wrap"
             }
         };
     }

package/dist/collection/components/swirl-table/swirl-table.js

@@ -495,7 +495,7 @@ export class SwirlTable {
             "table--show-empty-state": this.empty && !this.loading,
             "table--keyboard-move": this.movingViaKeyboard,
         });
-        return (h(Host, { key: 'c09513da5518bdefcee578c6efceae1e1f3fee68' }, h("div", { key: '35b0a5094a70f4647684dfbc44b1c4d26a391009', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: 'fe42f114b7415062d0451f6497a6112b72cb83e9' }, h("span", { key: 'f6eec0ad58042009c3253e3b3c6c76550d4f4295', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: 'b53d68ac5b91135476f587a09af076e6d12e0dad', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: '13ad295da62729b5cdc5349e1d30738767063638', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'f88015fe89b806f50f94efe0aee3565238422bb5' }, h("div", { key: '01124aabbc17b27491329866b0b093e721b18cc6', id: "caption" }, this.caption))), h("div", { key: '0b97a4dc081bfd9b5dace14e9b2e5db15d09dbae', role: "rowgroup" }, h("div", { key: '23e378bb2bd3150ae75bb1e43b0f1bc881b0bf4b', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: '94204f4f68af17b7831cd1a0a90c4c089bc5f2e7', name: "columns" }))), h("div", { key: 'db4871eaa08b11ff17412db3fa9526e53bd871b1', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: '5b006032cfa9ac408ec1f8c94bb3495c753910bb', name: "rows" }), h("div", { key: '65584539f8112a1766794a2109af59f47b1ce40f', class: "table__empty-row", role: "row" }, h("div", { key: 'cf76a928e889a97d9ee7dab479cf6f380a7d7fe9', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: 'ea6937060cc8c7dc26344d5d634eeb736ad52a43', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: 'c535e96c11ea5ee7c940a1fb1097ad098998fac8', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
+        return (h(Host, { key: '88148e3f9b732d152621c7db0ba4ed69dc1a85fb' }, h("div", { key: '17fad7061ef36d0cfa2be6dba15b43038fb4eae5', class: className }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '1c71aaa406d89ed5f67166af65ce03f95a1b92cb' }, h("span", { key: '247b9abb0857d53a84c2cb03eb2654bfc34f2824', "aria-live": "assertive" }, this.liveRegionText))), h("div", { key: '7e50be37d444e77be28a7a4840a4b1240688734c', class: "table__container", onFocusin: this.onFocus, onFocusout: this.onBlur, onKeyDown: this.onKeyDown, onScroll: this.onScroll, ref: (el) => (this.container = el), tabIndex: -1 }, h("div", { key: '787928503b2cd10a4389410577aa259cbf8db205', "aria-describedby": Boolean(this.caption) ? "caption" : undefined, "aria-label": this.label, role: "table", class: "table__table" }, this.caption && (h("swirl-visually-hidden", { key: 'eb9700a96bb98a4f7e08cfb7466e1d7bb5e54f17' }, h("div", { key: '3b6222acaa81484cfe7daa679737ffcc4bcd67c2', id: "caption" }, this.caption))), h("div", { key: '35eb6251d3910b4585eab091aa74975818b3fb55', role: "rowgroup" }, h("div", { key: '081ebc76ff839883225e381ff48ecb5ede972c31', class: "table__header", ref: (el) => (this.headerEl = el), role: "row" }, h("slot", { key: '82f30623474139c84b7b8cc941253d73d9ce1ada', name: "columns" }))), h("div", { key: '0dcb1df20b07fdce82af2f9b7c51ba5241a56714', class: "table__body", ref: (el) => (this.bodyEl = el) }, h("slot", { key: 'cac1e7addec05d86353fd87d3b380e1bc4259be7', name: "rows" }), h("div", { key: '0e10c52673bca428e430890e035c86ce468afe6e', class: "table__empty-row", role: "row" }, h("div", { key: '49f29f8b3aaaa9ddb19c93b68f9475d8bbadc3a6', "aria-colspan": this.getColumns().length, class: "table__empty-row-cell", role: "cell" }, h("slot", { key: '61ebfc91546c0569361a2273bc27b20fd0e5c377', name: "empty" }), !hasEmptyStateSlotAssignment && (h("swirl-text", { key: '03e6ae3f8dbdd63e0b0d3727d8fcdadf13862669', align: "center", size: "sm" }, this.emptyStateLabel))))))))));
     }
     static get is() { return "swirl-table"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-table-column/swirl-table-column.js

@@ -25,7 +25,7 @@ export class SwirlTableColumn {
             "table-column--sunken": variant === "sunken",
             "table-column--raised": variant === "raised",
         });
-        return (h(Host, { key: '1d49180d7045ebea68edc1a7e2c6606c0e6876a7', "aria-sort": this.sort, class: className, role: "columnheader", style: styles }, h("span", { key: '19454dcbe0a1e7018fd0c0dd7d1abe1dd411764f' }, h("slot", { key: 'a71ff653f24c948bb87ff13436db7c02c9054f28' })), this.sortable && (h("span", { key: 'cd463d4a168ae9745f5c5f638bc480e47c189d57', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: '42576b5cef0657669789c2e4078ec0274673f35f', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: '15dcd329b5a9570121a374f96309a5c83d6d9b57', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (h(Host, { key: '94ccf173e9160210752e99bf016fbc324fd09068', "aria-sort": this.sort, class: className, role: "columnheader", style: styles }, h("span", { key: 'f5f345d62629979b93050d31bb2094742e8deb3c' }, h("slot", { key: 'a8472f20cf1cbd5467c536a62f6dde86d308db5d' })), this.sortable && (h("span", { key: '30491c00341cc87ce81dd4e306a969e152baaf58', class: "table-column__sort-indicator" }, this.sort === "ascending" && (h("swirl-icon-arrow-upward", { key: 'a7a558b2819a086f29bb68453c8be0ecfd6e26e4', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (h("swirl-icon-arrow-downward", { key: 'aa5696ad673dae4857c90ab80b6f10570b4827e6', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
     }
     static get is() { return "swirl-table-column"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tag/swirl-tag.js

@@ -32,7 +32,7 @@ export class SwirlTag {
     }
     render() {
         const className = classnames("tag", `tag--icon-position-${this.iconPosition}`, `tag--intent-${this.intent}`, `tag--size-${this.size}`, `tag--variant-${this.variant}`, { "tag--hide-label": this.hideLabel });
-        return (h(Host, { key: 'b37ce40ec971e4d0897d8ef34063c34dd8c4ebaa' }, h("span", { key: '3bb01aeff9859f42f906c6176c23d7772641f7fc', class: className, part: "tag" }, this.icon && (h("span", { key: 'b08ea0453a747c487757151ce438afbfa6d24373', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '52f12c162364a473638318e92ea765a0624757a5', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '5f21f72e3a84e25bad909552f08804140ad23fea', size: 16 }))))));
+        return (h(Host, { key: '89ba38f520f187bf71a2a53787396b0170e82d08' }, h("span", { key: '5f81df561f687200fc57cb60b33e048e5f67e162', class: className, part: "tag" }, this.icon && (h("span", { key: 'c372b3910f4bf56626c661b6700813be2b45bd7a', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (h("span", { class: "tag__label" }, this.label)) : (h("swirl-visually-hidden", null, this.label)), this.removable && (h("button", { key: '27b3617587d03aff92e0eed75e95c386e9156d16', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { key: '4d67258c0b7176bb0bfdc8fc3163a24373232708', size: 16 }))))));
     }
     static get is() { return "swirl-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-text/swirl-text.js

@@ -54,7 +54,7 @@ export class SwirlText {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (h(Host, { key: 'a207700f866a3995ec1ca55d26299b09e3d216cb' }, h(Tag, { key: 'ef4058b338624642f46c00fb09425782b41206df', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '4b2befad804ad00197d45174ed36a68b10bcc656' }))));
+        return (h(Host, { key: 'baf8175c29c018ad991098c2e764057085e2acbd' }, h(Tag, { key: 'c56bb801fc8c0e745144e61500c15afa3151043d', class: className, ref: (el) => (this.textEl = el), style: styles }, h("slot", { key: '02cad27030cf03b3231e0e495b58c9393fbdda8c' }))));
     }
     static get is() { return "swirl-text"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-thumbnail/swirl-thumbnail.js

@@ -71,16 +71,16 @@ export class SwirlThumbnail {
             "thumbnail--interactive": this.interactive,
             "thumbnail--uploading-bar": isUploading && !isCompact,
         });
-        const imageWrapper = (h(ImageWrapper, { key: 'b8e3a39b8ece3cce36aad84edc789b660f42adf3', class: "thumbnail__image-wrapper", onClick: useThumbnailAsPopoverTrigger ? undefined : this.thumbnailClick.emit, style: isImageWrapperButton && this.cursor !== "pointer"
+        const imageWrapper = (h(ImageWrapper, { key: '60ae7147652152c4d3494f130c7e41358ee3013d', class: "thumbnail__image-wrapper", onClick: useThumbnailAsPopoverTrigger ? undefined : this.thumbnailClick.emit, style: isImageWrapperButton && this.cursor !== "pointer"
                 ? { cursor: this.cursor }
-                : undefined, type: isImageWrapperButton ? "button" : undefined }, h("img", { key: '57cb6479e80e11da6cb034348e125850c98a2abc', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })));
-        return (h(Host, { key: '11545ed39393b774ce489ea845ec36d58564b87b' }, h("span", { key: '9799c6daf25ecffa433d4ab5b6551abec84c90d1', class: className, role: "group" }, useThumbnailAsPopoverTrigger ? (h("swirl-popover-trigger", { ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, imageWrapper)) : (imageWrapper), showUploadingOverlay && (h("span", { key: 'e96161e800a3fb4a9f5baa7c59b45e30bc55643b', class: isCompact
+                : undefined, type: isImageWrapperButton ? "button" : undefined }, h("img", { key: '5a37a6930046e0cfd260fa8d84cbb5e575cfa628', alt: this.alt, class: "thumbnail__image", loading: "lazy", src: this.src })));
+        return (h(Host, { key: '4c88680e632905de35436902389a3bd5bfbc4cf1' }, h("span", { key: '559168a938b8029443a40e53eca8f3eb49a27078', class: className, role: "group" }, useThumbnailAsPopoverTrigger ? (h("swirl-popover-trigger", { ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, imageWrapper)) : (imageWrapper), showUploadingOverlay && (h("span", { key: '898f056cf1aa60b223cd6c11219ae0ff6653220f', class: isCompact
                 ? "thumbnail__uploading-overlay"
-                : "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '83b369212a42fd5b587c2532db65d40314c21873', label: this.progressLabel, size: isCompact ? "s" : undefined, value: this.progress, variant: isCompact ? "circle" : undefined }))), showError && (h("span", { key: 'f287f7dbe6e05dcf4f3a8b87231475cc99011daf', class: "thumbnail__error" }, h("swirl-icon-error", { key: '19cbfe6562cb0e95494c32405375613c78aa0dcd', color: "critical" }))), showSegmentedGroup && (h("swirl-button-group", { key: '1e0fac89a5ec3a740c0cc4d8b48db8b9d262777b', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: '0201b2ab186c571d36f341ee481c5c703c703924' }, h("swirl-button", { key: '1f4225dcae429e39de7c7926d54efecdd14c9ec3', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, variant: "on-image" }))), showRemoveButton && (h("span", { key: 'ad6c68242c5ecf71a5cc1a6033a1d50249c0686d' }, h("swirl-button", { key: '7780aedcc53ffdc41c5c753ae1d47a064a16c5e6', hideLabel: true, icon: this.removeButtonIcon, label: this.removeButtonLabel, onClick: this.removeThumbnail.emit, variant: "on-image" }))))), (showCompactEditButton || showCompactRemoveButton) && (h("span", { key: 'b637c8893afadb884f167601b7858e92c13f7981', class: "thumbnail__compact-action" }, h("button", { key: '1b9fbe19a5ccbd8e5f59d6cb60898a6756a9fe72', "aria-label": showCompactEditButton
+                : "thumbnail__progress-indicator" }, h("swirl-progress-indicator", { key: '7af3e81b35b5a0f0285a826c1adafe8e6ed07a4f', label: this.progressLabel, size: isCompact ? "s" : undefined, value: this.progress, variant: isCompact ? "circle" : undefined }))), showError && (h("span", { key: '1972d9700e8bb4d4a9a8aad41f5cdc50dcdc421e', class: "thumbnail__error" }, h("swirl-icon-error", { key: 'b0cccb68b2dbbbf4337709c7255e03ce700b821c', color: "critical" }))), showSegmentedGroup && (h("swirl-button-group", { key: 'bbe13e53cc2eca57569dad7a4951d49fff588a97', class: "thumbnail__buttons", segmented: showEditButton && showRemoveButton }, showEditButton && (h("span", { key: 'db12057d2e9a4e480c8d54f9ace810fab31c12b2' }, h("swirl-button", { key: '2e7ed3a7bde8483187742846d1f98ed0a2be9e54', hideLabel: true, icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.edit.emit, variant: "on-image" }))), showRemoveButton && (h("span", { key: 'bfbf412240887830c485f7d183a1ddfb250d6763' }, h("swirl-button", { key: '7a4dc4dc1aa852c3063ab759c8a670c856047568', hideLabel: true, icon: this.removeButtonIcon, label: this.removeButtonLabel, onClick: this.removeThumbnail.emit, variant: "on-image" }))))), (showCompactEditButton || showCompactRemoveButton) && (h("span", { key: '61750d19da3e0e5fd00dd1e04d3bf44847fa3ca5', class: "thumbnail__compact-action" }, h("button", { key: 'c2563e951910b12abf05739b2e1025f946cd9974', "aria-label": showCompactEditButton
                 ? this.editButtonLabel
-                : this.removeButtonLabel, class: "thumbnail__compact-button", onClick: showCompactEditButton ? this.edit.emit : this.removeThumbnail.emit, type: "button" }, h("span", { key: '08fdcd72d0a5eb77c0c187da244ad719be95b540', innerHTML: showCompactEditButton
+                : this.removeButtonLabel, class: "thumbnail__compact-button", onClick: showCompactEditButton ? this.edit.emit : this.removeThumbnail.emit, type: "button" }, h("span", { key: '9a7a590941c758b59ff8436a85d4ea26732736fc', innerHTML: showCompactEditButton
                 ? this.editButtonIcon
-                : this.removeButtonIcon, ref: (el) => el?.children[0]?.setAttribute("size", "20") })))), showCompactMenu && (h("span", { key: 'f3ab50ab63824e04398b9db2c04b4fbfc783d39e', class: "thumbnail__compact-action" }, h("swirl-popover-trigger", { key: '7fd9cc2398aa828d343ef32f78a0b73dc270fdf1', ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, h("button", { key: 'a3974c28b50c23fbaa46468ef087c59c070a9ca1', "aria-label": this.menuButtonLabel, class: "thumbnail__compact-button", type: "button" }, h("swirl-icon-more-horizontal", { key: '8f6ef9edaf11cbefdd8b090e812a4a0c39fed01b', size: 20 }))))), showPopover && (h("swirl-popover", { key: '7b58a97d8a74066075cc81b67c55822e6f3dfdf3', label: this.menuButtonLabel, placement: "bottom-end", padded: false, ref: (el) => (this.popoverEl = el) }, h("swirl-action-list", { key: '1fe44385c4f22672a4e80f6d47679a1729323181' }, showOpenAction && (h("swirl-action-list-item", { key: 'f1d21f491fa80c1195a14e45e61527b547703373', icon: this.openButtonIcon, label: this.openButtonLabel, onClick: this.onOpenClick })), showEditButton && (h("swirl-action-list-item", { key: 'd564e0635e91bce637032bf7c25fb0200a968bb2', icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.onEditClick })), showRemoveButton && (h("swirl-action-list-item", { key: '2e256383292c83e44540181ae98f334f13b56d03', icon: this.removeButtonIcon, intent: "critical", label: this.removeButtonLabel, onClick: this.onRemoveClick }))))), showTimestamp && !hideTimestampForUploading && (h("span", { key: 'f85ffaf9a1e54f4a3aa2fee859ef44b719ddba51', class: "thumbnail__timestamp" }, this.timestamp)))));
+                : this.removeButtonIcon, ref: (el) => el?.children[0]?.setAttribute("size", "20") })))), showCompactMenu && (h("span", { key: 'fc786e89ae96af8d93394224bc2711e2014e566a', class: "thumbnail__compact-action" }, h("swirl-popover-trigger", { key: 'b556f7ef29ec9fc72f53855f43b9c6a08072f091', ref: (el) => (this.popoverTriggerEl = el), swirlPopover: this.popoverEl }, h("button", { key: 'fbffe9108cd8cb624666d5f437e9ad7228ed1d31', "aria-label": this.menuButtonLabel, class: "thumbnail__compact-button", type: "button" }, h("swirl-icon-more-horizontal", { key: '5435df18ee3ff8c61cfd65712d7e906af6364033', size: 20 }))))), showPopover && (h("swirl-popover", { key: '3124b6fbfdf5611f0c78e4e7c2b11d6306f838f1', label: this.menuButtonLabel, placement: "bottom-end", padded: false, ref: (el) => (this.popoverEl = el) }, h("swirl-action-list", { key: 'b2be077864a5b950fdfa6e684a30c70c016fe07d' }, showOpenAction && (h("swirl-action-list-item", { key: 'f93f14869d993397aac82cc4e12be11434bf0c28', icon: this.openButtonIcon, label: this.openButtonLabel, onClick: this.onOpenClick })), showEditButton && (h("swirl-action-list-item", { key: 'dae9af6670af5dfbd07c1bc2a805d905e145fb81', icon: this.editButtonIcon, label: this.editButtonLabel, onClick: this.onEditClick })), showRemoveButton && (h("swirl-action-list-item", { key: 'a24b8112005df2ce84f0fe72d03914892fb4c6dd', icon: this.removeButtonIcon, intent: "critical", label: this.removeButtonLabel, onClick: this.onRemoveClick }))))), showTimestamp && !hideTimestampForUploading && (h("span", { key: 'ea94af6c272abf1595a3e77cc52f61d275dad7ea', class: "thumbnail__timestamp" }, this.timestamp)))));
     }
     static get is() { return "swirl-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toast/swirl-toast.js

@@ -53,7 +53,7 @@ export class SwirlToast {
     }
     render() {
         const className = classnames("toast", `toast--intent-${this.intent}`, `toast--action-position-${this.actionPosition}`);
-        return (h(Host, { key: '2ae9a317c62c35f96b69aa0b4945c74101e210b3' }, h("div", { key: '21f1e47be66edf5eb91c2fa346a5e10311da9c83', class: className }, this.icon && (h("span", { key: '1d01a3d3005ccf694c5f67a02c6e69ec0dcd6f75', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '4cbdc5ee5adf56abe15f40de536310cbf94b2a33', class: "toast__content-container" }, h("span", { key: '9ccd54d6874f64b40f832d004c8ebca06e2ae6e5', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '8c26ac36fe46baf6f6cabe0b02263bd9730bb1e4' })), this.actionLabel && (h("swirl-button", { key: '7fc42c302778f67bc9592b52a0955e9a1354fd8d', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), h("button", { key: 'bba7173b62602a8a110baa92003d8878d5c2c972', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '88821f51f8ae050f6e69822baa1800e5f2bcb898', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (h(Host, { key: '7386027f740a8904696e71b3de8f74d206968b61' }, h("div", { key: 'e0f5dc52a68a85df0c09a2a5c0106dea1561298e', class: className }, this.icon && (h("span", { key: '4d5db087714e9a0791f9bc516fff57b7e2c30cd1', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), h("span", { key: '57b8c1cf978953d6127cd48f2519744145f403f1', class: "toast__content-container" }, h("span", { key: 'f6daa794e9592de02c9d1563daa2db7efff1482a', class: "toast__content", innerHTML: this.content, part: "toast__content" }, h("slot", { key: '44414a79fde7d6b9b1e4192bddb2a8abab31e167' })), this.actionLabel && (h("swirl-button", { key: '4384097dc32af327e74b9712e11aaabf23341f42', class: "toast__action-button", label: this.actionLabel, onClick: this.onAction, variant: "plain" }))), h("button", { key: 'e04510da4406157be7865630a91da57a9912b9ac', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (h("swirl-icon-close", { key: '32963beda9e0ccc242f94387e4200e8ee21cbbee', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get is() { return "swirl-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toast-provider/swirl-toast-provider.js

@@ -115,7 +115,7 @@ export class SwirlToastProvider {
         this.popoverEl.showPopover();
     }
     render() {
-        return (h(Host, { key: '6851e3f997a7ead3b8a217622234f9d09e356db8', role: "status" }, h("swirl-stack", { key: '04454efcc163d9f5f45d43eaae68d82f0c424fdd', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
+        return (h(Host, { key: '39113c788e86206b6ca81cb6d2cee28024e2e311', role: "status" }, h("swirl-stack", { key: '47c63f0ff053d7f7c96b8a2dc46d4648aa22996d', class: "toast-provider__stack", part: "toast-provider__stack", popover: "manual", spacing: "12", align: "center", ref: (el) => (this.popoverEl = el) }, this.toasts.map((toast) => {
             const props = {
                 ...toast,
                 content: undefined,

package/dist/collection/components/swirl-toggle-group/swirl-toggle-group.js

@@ -55,7 +55,7 @@ export class SwirlToggleGroup {
         const className = classnames("toggle-group", `toggle-group--variant-${this.variant}`, {
             "toggle-group--elevated": this.elevated,
         });
-        return (h("swirl-stack", { key: '8d041df037a1235032fea927ad0717e8e400144a', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: '355821ac9d0dd0505894aaf5d278ec1855c09341', onSlotchange: this.onSlotChange })));
+        return (h("swirl-stack", { key: 'f4de23aaccfc14e1c93fdf3dd559eb20f79f9ad2', class: className, "aria-label": this.swirlAriaLabel, spacing: "4", orientation: "horizontal", align: "center", role: "group" }, h("slot", { key: 'df63f940ba8f412948fcbb941dd7742d43302ee5', onSlotchange: this.onSlotChange })));
     }
     static get is() { return "swirl-toggle-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-toolbar/swirl-toolbar.js

@@ -66,7 +66,7 @@ export class SwirlToolbar {
         });
     }
     render() {
-        return (h(Host, { key: 'b6ac2a4124dafe8fa0fac9395001366271c4d1d5' }, h("swirl-stack", { key: 'ae28c6d3a4b70f9da63d30d3cf1b3143b1173fef', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: this.spacing, wrap: true }, h("slot", { key: '0d39fa3ecb5e4bd2acfefde88d4459d81a470f9c' }))));
+        return (h(Host, { key: '25debb5624e315846c720ca0166150c65c53d72c' }, h("swirl-stack", { key: '4182fab3d7dec1a0d78779f19642952bcb2545b3', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: this.spacing, wrap: true }, h("slot", { key: '5a19caec9ad726cc40b205d70d6c42b346884061' }))));
     }
     static get is() { return "swirl-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tree-view/swirl-tree-view.js

@@ -327,7 +327,7 @@ export class SwirlTreeView {
         }
     }
     render() {
-        return (h(Host, { key: 'c4924320ec1fe292cdbc9df3ca6d14525878c32a' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '637b328cb91975d4507c1f56b8c9ad233cdd07f9' }, h("span", { key: '20796768c4c49f56bd24c589351c4b269d9d4030', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '204bcb7f17078f4c61ccbc1cad65ee4985a7de71', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: '834075856c950ca6a493928a4cbba632b9d4dac0', onSlotchange: this.onSlotChange }))));
+        return (h(Host, { key: '7b4136fd912ca7990b5e55f1575421ec3672dc8f' }, this.enableDragDrop && (h("swirl-visually-hidden", { key: '2196f8f992789a4fda56d48e236d602db85035f7' }, h("span", { key: 'd49c50de8d0c0db64ee5a97c1ccdcd67f8d9ad84', "aria-live": "assertive" }, this.liveRegionText))), h("ul", { key: '8835b6dccdf5550788c877c9f8795c440420e540', "aria-label": this.label, class: "tree-view", onFocusin: this.onFocus, onFocusout: this.onBlur, role: this.semantics === "tree" ? "tree" : undefined, ref: (el) => (this.listElement = el), tabIndex: -1 }, h("slot", { key: 'ac46b0399f32189de2372e3fd7c6c108b28a46b1', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "swirl-tree-view"; }
     static get originalStyleUrls() {

package/dist/collection/components/swirl-tree-view-item/swirl-tree-view-item.js

@@ -329,17 +329,17 @@ export class SwirlTreeViewItem {
             "tree-view-item--disable-drag": this.disableDrag,
             "tree-view-item--has-tags": hasTags,
         });
-        return (h(Host, { key: '73d1f4a9397356ae42ac6e7eff3a232bc8044b81', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: '43a7b8a02f7e275527b653de1b3f3641947fa9c6', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: 'd39b5cee6d1e5f0d7dea38ee822762b4a81b91e2', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
+        return (h(Host, { key: 'f571e0aa5fab77a62b4b6a63e1226011b61202ce', id: this.itemId, role: semantics === "tree" ? "none" : "listitem" }, h(Tag, { key: 'a13caedc50c5df33f7674c93696a141c019a0be4', class: className, role: semantics === "tree" ? "none" : undefined }, h("a", { key: 'e9a32fadc3d8d07e757d42f54f8e9e44976e2b4a', "aria-current": this.active ? "page" : undefined, "aria-expanded": !hasChildren || semantics !== "tree"
                 ? undefined
                 : String(expanded), "aria-level": semantics === "tree" ? this.level + 1 : undefined, "aria-owns": hasChildren && semantics === "tree"
                 ? `${this.itemId}-children`
-                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: 'a218ad345f47dedf2fcd839926eb401b9348e8fd', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '48b7647a53a8717336ef3918de98c266bc94a12c', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: 'e6d9298d67b80046e65b68dbfb74f82e35a7d522', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '7ed530e7233b18e670e53836afc53ebf7bc4c7d7' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: '8f64d41f0514402a26f14e8892887b3d6b693c94' }, h("span", { key: 'f6c8c8024ae589a47912a727e7ad4c4539f6d2fc', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '385aa803866c02e6b9a5791747d639984c6315d1', class: "tree-view-item__label" }, this.label), h("span", { key: '688e67dd3cfc6d5854d91846781c36bc5853b79f', class: "tree-view-item__tags" }, h("slot", { key: 'f3fe801f732e0430a8e6f4f519688bb7025fc673', name: "tags" }))), h("ul", { key: '8d3e1b1db911768b5a985e46e3d09d6701a8e53f', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
+                : undefined, "aria-selected": semantics === "tree" ? String(this.selected) : undefined, class: "tree-view-item__link", href: this.href, onFocus: this.onFocus, onKeyDown: this.onKeyDown, ref: (el) => (this.link = el), role: semantics === "tree" ? "treeitem" : undefined, tabIndex: tabIndex }, !this.disableDrag && this.enableDragDrop && (h("span", { key: '943ebb467ca02496363deccd1757eaa4878680ab', class: "tree-view-item__drag-handle" }, h("swirl-icon-drag-handle", { key: '00c15f06df99116176b9759abb86794a5306aa1d', size: 20 }))), this.expandable && semantics === "tree" && (h("span", { key: 'dbdd4b084c23f48caee3245a3a2f414cba1fcce1', class: "tree-view-item__toggle-icon" }, hasChildren && (h(Fragment, { key: '48b76c4675d392b25ad97d9e73f0911f43fc6918' }, expanded ? (h("swirl-icon-expand-more", { onClick: this.onClickCollapse, size: 24 })) : (h("swirl-icon-chevron-right", { onClick: this.onClickExpand, size: 24 })))))), Boolean(this.icon) && (h(Fragment, { key: 'd98c931c4f9db219e70fd31365304808c53808da' }, h("span", { key: 'c041476e9a1940dcc3c2c4edccde824e0d6f9c81', class: "tree-view-item__icon" }, iconIsEmoji ? (this.icon) : (h("swirl-icon", { glyph: this.icon, size: 24, color: this.iconColor }))))), h("span", { key: '92c600e90332b236742f47ca8ba190e2be704a00', class: "tree-view-item__label" }, this.label), h("span", { key: '143e4df9520c3be93508e1e63c5cdad62f26dc90', class: "tree-view-item__tags" }, h("slot", { key: 'e8a16506b1c9fa9bdc2a0dab23c042efee9373dc', name: "tags" }))), h("ul", { key: '95d6d7047fa12c5a0fc51848457db871f5ec7abe', "aria-label": this.label, class: `tree-view-item__children ${shouldShowChildrenDropZone
                 ? "tree-view-item__children--drop-zone"
                 : ""}`, id: `${this.itemId}-children`, ref: (el) => (this.childList = el), role: semantics === "tree" ? "group" : undefined, style: {
                 display: (!expanded || !hasChildren) && !shouldShowChildrenDropZone
                     ? "none"
                     : undefined,
-            } }, h("slot", { key: 'b063cb022bd4895bf96944bc6755b7d006c99fec' })))));
+            } }, h("slot", { key: '556e0b1487930406f6179a0d50d2ef0c832e2e45' })))));
     }
     static get is() { return "swirl-tree-view-item"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-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:"06999da47eaba55763a447cbbb544d92da636760"},t("div",{key:"5484984dcea351c0e224ab4796c1460bba704fe3",class:e},t(i,{key:"72eaf7a42cec947e810de91c6116b7f50b0c1598",class:"accordion-item__heading"},t("button",{key:"98f4adc35db13350b76dbba86c7e22f1bac2aa2a","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:"94a467d23569e323a2dedf7110c91c0f5244f60b",name:"media"}),t("span",{key:"ed3131d3e0a2c02ffe6925a52045e9c547fac2bc",class:"accordion-item__toggle-text"},this.heading,this.description&&t("swirl-text",{key:"3030464b2a7b19222563bd8a355be5a5af1baca7",as:"span",color:"subdued",size:"sm"},this.description)),t("slot",{key:"108256c9d74efda48d746f7a40037a68420a40e4",name:"trailing"}),t("span",{key:"5c3367b2ee839b214d4a013f10f800de16b57d4a",class:"accordion-item__icon"},!this.expanded&&t("swirl-icon",{key:"5b5906edb7cf2e24fbb11e405bfe8ea9df65b1ef",glyph:"chevron-right",size:20}),this.expanded&&t("swirl-icon",{key:"c4249ab5c3ce934be473771f0b831fabce7cd3f7",glyph:"expand-more",size:20})))),t("div",{key:"10d0287d13bd323e42de265a6ff3944fa9959eb2","aria-labelledby":this.headingId,class:"accordion-item__content",id:this.itemId,role:"region"},t("slot",{key:"e8cccd0d6e0f6a3a5911efd964930e5ba4273b73"}))))}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}
+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:"66dcf3013445eb4eaae38af64494afd0d3526733"},t("div",{key:"3aeae0c7c69628927741e47031803c1740f4e0fc",class:e},t(i,{key:"20726452d1e3cb5ddc52a8e911e7d196f5f87361",class:"accordion-item__heading"},t("button",{key:"f4735c22030a444810a69f2e7fee21246fd9927d","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:"a271c24aee551592660241e680a356a004d0e807",name:"media"}),t("span",{key:"f5ab902961328fa85e4618e17cbcc6b2b23e78c9",class:"accordion-item__toggle-text"},this.heading,this.description&&t("swirl-text",{key:"2b7c2d6b2139b3e53050f6304118db4d46d2c02b",as:"span",color:"subdued",size:"sm"},this.description)),t("slot",{key:"e71d8b24cd6856864af39c4f55c99f9c85808af8",name:"trailing"}),t("span",{key:"e460fa8dabb032a77a553d3bb747eac3f25d01b9",class:"accordion-item__icon"},!this.expanded&&t("swirl-icon",{key:"b350211853ca3547793ee5b828631a2a9414327d",glyph:"chevron-right",size:20}),this.expanded&&t("swirl-icon",{key:"c99d8e911db4081bdd284f1677e707993631ed4c",glyph:"expand-more",size:20})))),t("div",{key:"d66b94dc0f7ed13ac077f39a2d18f0d36d480a1b","aria-labelledby":this.headingId,class:"accordion-item__content",id:this.itemId,role:"region"},t("slot",{key:"8967e37cd77d9fc4cd36fb1a1622e59407927ed2"}))))}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 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.expandedItemChange=s(this,"expandedItemChange",7),this.multiExpand=!1,this.componentLoaded=!1,this.onExpansionChange=t=>{t.detail&&(this.expandedItemChange.emit(t.target.itemId),this.collapseInactiveItems(t.target))}}connectedCallback(){this.componentLoaded&&this.el.addEventListener("expansionChange",this.onExpansionChange)}componentDidLoad(){this.el.addEventListener("expansionChange",this.onExpansionChange),this.componentLoaded=!0}disconnectedCallback(){this.el.removeEventListener("expansionChange",this.onExpansionChange)}async collapseItem(t){const e=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((e=>e.itemId===t));e&&e.collapse()}async expandItem(t){const e=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((e=>e.itemId===t));e&&e.expand()}collapseInactiveItems(t){this.multiExpand||Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((e=>{e!==t&&e.collapse()}))}render(){return i(n,{key:"3145ae0baa7f64589d40182d31a0b3b05e26c2f8"},i("slot",{key:"e7544fbcc0b50f06e12b52b10f9c0773c0a69713"}))}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]}]),a=c,r=function(){"undefined"!=typeof customElements&&["swirl-accordion"].forEach((t=>{"swirl-accordion"===t&&(customElements.get(o(t))||customElements.define(o(t),c))}))};export{a as SwirlAccordion,r as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as s,h as i,Host as n,transformTag as o}from"@stencil/core/internal/client";const c=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.expandedItemChange=s(this,"expandedItemChange",7),this.multiExpand=!1,this.componentLoaded=!1,this.onExpansionChange=t=>{t.detail&&(this.expandedItemChange.emit(t.target.itemId),this.collapseInactiveItems(t.target))}}connectedCallback(){this.componentLoaded&&this.el.addEventListener("expansionChange",this.onExpansionChange)}componentDidLoad(){this.el.addEventListener("expansionChange",this.onExpansionChange),this.componentLoaded=!0}disconnectedCallback(){this.el.removeEventListener("expansionChange",this.onExpansionChange)}async collapseItem(t){const e=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((e=>e.itemId===t));e&&e.collapse()}async expandItem(t){const e=Array.from(this.el.querySelectorAll("swirl-accordion-item")).find((e=>e.itemId===t));e&&e.expand()}collapseInactiveItems(t){this.multiExpand||Array.from(this.el.querySelectorAll("swirl-accordion-item")).forEach((e=>{e!==t&&e.collapse()}))}render(){return i(n,{key:"d440556c2534042f582b172e58c89a71866d8429"},i("slot",{key:"51efb93e43377f66792de872d872e90ad0107b57"}))}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]}]),r=c,a=function(){"undefined"!=typeof customElements&&["swirl-accordion"].forEach((t=>{"swirl-accordion"===t&&(customElements.get(o(t))||customElements.define(o(t),c))}))};export{r as SwirlAccordion,a as defineCustomElement}

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

@@ -1 +1 @@
-import{proxyCustomElement as s,HTMLElement as e,h as t,Host as a,transformTag as i}from"@stencil/core/internal/client";import{d as c}from"./swirl-separator2.js";import{d as r}from"./swirl-stack2.js";const l=s(class extends e{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){return t(a,{key:"c9f4e4a9f5c548ca890ad61c9f497c27f3b797a7"},this.hasSeparator&&t("swirl-separator",{key:"b0a7f642ff96f23b69dd7e29cca1b258674ef75e",spacing:this.separatorSpacing}),t("div",{key:"849ee3049d337414b102caca1d00f632b016f5e2","aria-labelledby":"label",class:"action-list-section",role:"group"},t("span",{key:"2b31af6217534b05b153b1784c2df074665a1673",class:"action-list-section__label",id:"label",part:"action-list-section__label"},this.label),t("swirl-stack",{key:"2f4d8c9c1b7d07c63495052cfb2a3edc89893968",spacing:this.spacing,align:"stretch"},t("slot",{key:"2e07c838eb056cff1708cd6f3f7c913b29c7351a"}))))}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((s=>{switch(s){case"swirl-action-list-section":customElements.get(i(s))||customElements.define(i(s),l);break;case"swirl-separator":customElements.get(i(s))||c();break;case"swirl-stack":customElements.get(i(s))||r()}}))};export{o as SwirlActionListSection,n as defineCustomElement}
+import{proxyCustomElement as s,HTMLElement as t,h as e,Host as a,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=s(class extends t{constructor(s){super(),!1!==s&&this.__registerHost(),this.__attachShadow(),this.separatorSpacing="4",this.spacing="0",this.hasSeparator=!1}render(){return e(a,{key:"f32a9b84b313c6cdd6f4d5c8da62dedd3621c2b8"},this.hasSeparator&&e("swirl-separator",{key:"d4f6d8e304c74b7b04c51286998871503e628715",spacing:this.separatorSpacing}),e("div",{key:"c5248441fc8aa6bdbbc44343f4b8aad5a9d73b94","aria-labelledby":"label",class:"action-list-section",role:"group"},e("span",{key:"8da06dc7e9d9828ea9680d0df19a332d7d2aa71f",class:"action-list-section__label",id:"label",part:"action-list-section__label"},this.label),e("swirl-stack",{key:"a88437d2b7f3875f00f03d886de2688b36fcf543",spacing:this.spacing,align:"stretch"},e("slot",{key:"52329df1d56058f1837914f8547ea98cb64e14de"}))))}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((s=>{switch(s){case"swirl-action-list-section":customElements.get(i(s))||customElements.define(i(s),l);break;case"swirl-separator":customElements.get(i(s))||r();break;case"swirl-stack":customElements.get(i(s))||c()}}))};export{o as SwirlActionListSection,n as defineCustomElement}

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

@@ -1 +1 @@
-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:"29cb100e2c4dda657ae43dfcfbbfde7e1803bf35"},i("div",{key:"a5894ffd17df4488b41318368d48056991d28c20","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:"b0cc65e1c60829887ea80531c2487ec664fc6491",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}
+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:"73a668b1fd3531635442ba496c900030f11d24b1"},i("div",{key:"bb77cca10848e2096ff694bd58e29654163ed7db","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:"b16547c53c72f8dc5f0c6d9e33fa75bcfbe91979",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-icon.js

@@ -1 +1 @@
-import{proxyCustomElement as i,HTMLElement as t,h as s,Host as e,transformTag as o}from"@stencil/core/internal/client";import{c}from"./index2.js";const n=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.setImageAvailable=()=>{this.imageAvailable=!0},this.setImageUnavailable=()=>{this.imageAvailable=!1},this.onImageElementUpdate=i=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=i,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))}}disconnectedCallback(){this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}render(){const i=!!this.src&&(this.imageAvailable||void 0===this.imageAvailable),t=!i&&!!this.icon,o=c("app-icon",{"app-icon--has-icon":t||!i&&!t});return s(e,{key:"d09c1d1aaa21068830200c308f2b3f720422a96c"},s("span",{key:"24523d60801284e612620ba2255e4238955d2b3f",class:o},i&&s("img",{key:"c83f11a2814beac394aad6194af386b8a77200e8",alt:"",height:"256",ref:this.onImageElementUpdate,src:this.src,width:"256"}),t&&s("span",{key:"00593a27391e4d0df84cf8c387ec1a0c14c6ecb6",class:"app-icon__icon",innerHTML:this.icon})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}"}},[1,"swirl-app-icon",{icon:[1],src:[1],imageAvailable:[32]}]),a=n,r=function(){"undefined"!=typeof customElements&&["swirl-app-icon"].forEach((i=>{"swirl-app-icon"===i&&(customElements.get(o(i))||customElements.define(o(i),n))}))};export{a as SwirlAppIcon,r as defineCustomElement}
+import{proxyCustomElement as i,HTMLElement as t,h as s,Host as e,transformTag as o}from"@stencil/core/internal/client";import{c}from"./index2.js";const n=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.setImageAvailable=()=>{this.imageAvailable=!0},this.setImageUnavailable=()=>{this.imageAvailable=!1},this.onImageElementUpdate=i=>{this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable),this.imgEl=i,this.imgEl&&(this.imgEl.addEventListener("load",this.setImageAvailable),this.imgEl.addEventListener("error",this.setImageUnavailable))}}disconnectedCallback(){this.imgEl?.removeEventListener("load",this.setImageAvailable),this.imgEl?.removeEventListener("error",this.setImageUnavailable)}render(){const i=!!this.src&&(this.imageAvailable||void 0===this.imageAvailable),t=!i&&!!this.icon,o=c("app-icon",{"app-icon--has-icon":t||!i&&!t});return s(e,{key:"32d65dc28415f6a9cddf111f62d4106ed90b2c1d"},s("span",{key:"4491d2d2a924ded411ac6e40b5195563d2bb79b5",class:o},i&&s("img",{key:"89d8be5b1cb0f6dfc0d6a86636cd89e51094dd1b",alt:"",height:"256",ref:this.onImageElementUpdate,src:this.src,width:"256"}),t&&s("span",{key:"b6c68e36d4bd4deed51000d27133ec7d0a86851f",class:"app-icon__icon",innerHTML:this.icon})))}static get style(){return":host{display:inline-flex}:host *{box-sizing:border-box}.app-icon{position:relative;overflow:hidden;width:var(--swirl-app-icon-size);height:var(--swirl-app-icon-size);border-radius:var(--s-border-radius-sm)}.app-icon>img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.app-icon__icon{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}"}},[1,"swirl-app-icon",{icon:[1],src:[1],imageAvailable:[32]}]),r=n,d=function(){"undefined"!=typeof customElements&&["swirl-app-icon"].forEach((i=>{"swirl-app-icon"===i&&(customElements.get(o(i))||customElements.define(o(i),n))}))};export{r as SwirlAppIcon,d as defineCustomElement}

package/dist/components/swirl-carousel-slide.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as a}from"./index2.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.width="15.5rem"}render(){const e=a("carousel-slide",{"carousel-slide--has-min-height":!!this.minHeight});return t(i,{key:"7f5c8e11f7aacefbfa72ccae416b5d94d0f3e9a7","aria-roledescription":"slide","aria-label":this.label,class:e,role:"group",style:{aspectRatio:this.aspectRatio,flexBasis:this.width,minHeight:this.minHeight},tabIndex:0},t("slot",{key:"25cdf099ba287290ef10a7cb40375ca2ea0c94ad"}))}static get style(){return":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}"}},[257,"swirl-carousel-slide",{aspectRatio:[1,"aspect-ratio"],label:[1],minHeight:[1,"min-height"],width:[1]}]),r=l,c=function(){"undefined"!=typeof customElements&&["swirl-carousel-slide"].forEach((e=>{"swirl-carousel-slide"===e&&(customElements.get(o(e))||customElements.define(o(e),l))}))};export{r as SwirlCarouselSlide,c as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as l}from"./index2.js";const r=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.width="15.5rem"}render(){const e=l("carousel-slide",{"carousel-slide--has-min-height":!!this.minHeight});return t(i,{key:"95b07c3e3faa5b8bd28eedb5a9884d11bb564e63","aria-roledescription":"slide","aria-label":this.label,class:e,role:"group",style:{aspectRatio:this.aspectRatio,flexBasis:this.width,minHeight:this.minHeight},tabIndex:0},t("slot",{key:"dd7c65765f02d5eee33d628a918dbe9278e246aa"}))}static get style(){return":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}"}},[257,"swirl-carousel-slide",{aspectRatio:[1,"aspect-ratio"],label:[1],minHeight:[1,"min-height"],width:[1]}]),a=r,d=function(){"undefined"!=typeof customElements&&["swirl-carousel-slide"].forEach((e=>{"swirl-carousel-slide"===e&&(customElements.get(o(e))||customElements.define(o(e),r))}))};export{a as SwirlCarouselSlide,d as defineCustomElement}

package/dist/components/swirl-color-input.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as a}from"./swirl-box2.js";import{d as l}from"./swirl-popover2.js";import{d as c}from"./swirl-popover-trigger2.js";import{v as h}from"./v4.js";const d=(t,e=0,r=1)=>t>r?r:t<e?e:t,u=(t,e=0,r=Math.pow(10,e))=>Math.round(r*t)/r,p=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?u(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?u(parseInt(t.substring(6,8),16)/255,2):1}),b=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)*r/100;return{h:u(t),s:u(i>0&&i<200?e*r/100/(i<=100?i:200-i)*100:0),l:u(i/2),a:u(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},m=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},f=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},g={},v=t=>{let e=g[t];return e||(e=document.createElement("template"),e.innerHTML=t,g[t]=e),e},w=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let x=!1;const k=t=>"touches"in t,y=(t,e)=>{const r=k(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();w(t.el,"move",t.getMove({x:d((r.pageX-(s.left+window.pageXOffset))/s.width),y:d((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class _{constructor(t,e,r,s){const i=v(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(x?"touchmove":"mousemove",this),e(x?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(x&&!k(t)||(x||(x=k(t)),0)))(t)||!x&&0!=t.button)return;this.el.focus(),y(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),y(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),w(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class E extends _{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:b({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",""+u(t))}getMove(t,e){return{h:e?d(this.h+360*t.x,0,360):360*t.x}}}class $ extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:t.s+"%",color:b(t)},{"background-color":b({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${u(t.s)}%, Brightness ${u(t.v)}%`)}getMove(t,e){return{s:e?d(this.hsva.s+100*t.x,0,100):100*t.x,v:e?d(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const I=Symbol("same"),S=Symbol("color"),C=Symbol("hsva"),M=Symbol("update"),z=Symbol("parts"),B=Symbol("css"),L=Symbol("sliders");class j extends HTMLElement{static get observedAttributes(){return["color"]}get[B](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[L](){return[$,E]}get color(){return this[S]}set color(t){if(!this[I](t)){const e=this.colorModel.toHsva(t);this[M](e),this[S]=t}}constructor(){super();const t=v(`<style>${this[B].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[z]=this[L].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[I](s)||(this.color=s)}handleEvent(t){const e=this[C],r={...e,...t.detail};let s;this[M](r),f(r,e)||this[I](s=this.colorModel.fromHsva(r))||(this[S]=s,w(this,"color-changed",{value:s}))}[I](t){return this.color&&this.colorModel.equal(t,this.color)}[M](t){this[C]=t,this[z].forEach((e=>e.update(t)))}}const H={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:u(60*(n<0?n+6:n)),s:u(i?o/i*100:0),v:u(i/255*100),a:s}})(p(t)),fromHsva:({h:t,s:e,v:r})=>(t=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?m(u(255*s)):"";return"#"+m(t)+m(e)+m(r)+i})((({h:t,s:e,v:r,a:s})=>{e/=100,r/=100;const i=Math.floor(t=t/360*6),o=r*(1-e),n=r*(1-(t-i)*e),a=r*(1-(1-t+i)*e),l=i%6;return{r:u(255*[r,n,o,o,a,r][l]),g:u(255*[a,r,r,n,o,o][l]),b:u(255*[o,o,a,r,r,n][l]),a:u(s,2)}})(t)))({h:t,s:e,v:r,a:1}),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||f(p(t),p(e)),fromAttr:t=>t};class A extends j{get colorModel(){return H}}customElements.define("hex-color-picker",class extends A{});const F=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.valueChange=r(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId="color-picker-"+h(),this.onPickerChange=t=>{this.value=t.detail.value},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,e=n("color-input",{"color-input--inline":this.inline});return s(i,{key:"5a710686ad471748049e2246186febb4d7a3fd87"},s("div",{key:"6f9beacf28b62e48db30001e9586ca7248a35ff8",class:e},s("input",{key:"848bb9cde49f688a4007242a0900cc3755a54bba","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value,readonly:this.readonly}),s("swirl-popover-trigger",{key:"e400c9f79451c30009555c451406260090925d41",swirlPopover:this.pickerId},s("button",{key:"546f4a60eb80aad2e813b4e034c3db2af1bbbc53",disabled:this.readonly,"aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),s("swirl-popover",{key:"f6ba4b19ebeed724563ce771efeb446d7a0072bf",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},s("swirl-box",{key:"ed091dbb4c85fb35be4b64aff43c95f599be3729",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},s("hex-color-picker",{key:"21e2f5281d5e1f6619a9ab1b637cc7ab770aac59",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}"}},[2,"swirl-color-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],inline:[4],invalid:[4],pickerButtonLabel:[1,"picker-button-label"],pickerLabel:[1,"picker-label"],placeholder:[1],required:[4],value:[1537],readonly:[4]},void 0,{value:[{watchValue:0}]}]),q=F,T=function(){"undefined"!=typeof customElements&&["swirl-color-input","swirl-box","swirl-popover","swirl-popover-trigger"].forEach((t=>{switch(t){case"swirl-color-input":customElements.get(o(t))||customElements.define(o(t),F);break;case"swirl-box":customElements.get(o(t))||a();break;case"swirl-popover":customElements.get(o(t))||l();break;case"swirl-popover-trigger":customElements.get(o(t))||c()}}))};export{q as SwirlColorInput,T as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as e,createEvent as r,h as s,Host as i,transformTag as o}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{d as a}from"./swirl-box2.js";import{d as l}from"./swirl-popover2.js";import{d as c}from"./swirl-popover-trigger2.js";import{v as h}from"./v4.js";const d=(t,e=0,r=1)=>t>r?r:t<e?e:t,u=(t,e=0,r=Math.pow(10,e))=>Math.round(r*t)/r,p=t=>("#"===t[0]&&(t=t.substring(1)),t.length<6?{r:parseInt(t[0]+t[0],16),g:parseInt(t[1]+t[1],16),b:parseInt(t[2]+t[2],16),a:4===t.length?u(parseInt(t[3]+t[3],16)/255,2):1}:{r:parseInt(t.substring(0,2),16),g:parseInt(t.substring(2,4),16),b:parseInt(t.substring(4,6),16),a:8===t.length?u(parseInt(t.substring(6,8),16)/255,2):1}),b=t=>{const{h:e,s:r,l:s}=(({h:t,s:e,v:r,a:s})=>{const i=(200-e)*r/100;return{h:u(t),s:u(i>0&&i<200?e*r/100/(i<=100?i:200-i)*100:0),l:u(i/2),a:u(s,2)}})(t);return`hsl(${e}, ${r}%, ${s}%)`},m=t=>{const e=t.toString(16);return e.length<2?"0"+e:e},f=(t,e)=>{if(t===e)return!0;for(const r in t)if(t[r]!==e[r])return!1;return!0},g={},v=t=>{let e=g[t];return e||(e=document.createElement("template"),e.innerHTML=t,g[t]=e),e},w=(t,e,r)=>{t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r}))};let x=!1;const k=t=>"touches"in t,y=(t,e)=>{const r=k(e)?e.touches[0]:e,s=t.el.getBoundingClientRect();w(t.el,"move",t.getMove({x:d((r.pageX-(s.left+window.pageXOffset))/s.width),y:d((r.pageY-(s.top+window.pageYOffset))/s.height)}))};class _{constructor(t,e,r,s){const i=v(`<div role="slider" tabindex="0" part="${e}" ${r}><div part="${e}-pointer"></div></div>`);t.appendChild(i.content.cloneNode(!0));const o=t.querySelector(`[part=${e}]`);o.addEventListener("mousedown",this),o.addEventListener("touchstart",this),o.addEventListener("keydown",this),this.el=o,this.xy=s,this.nodes=[o.firstChild,o]}set dragging(t){const e=t?document.addEventListener:document.removeEventListener;e(x?"touchmove":"mousemove",this),e(x?"touchend":"mouseup",this)}handleEvent(t){switch(t.type){case"mousedown":case"touchstart":if(t.preventDefault(),!(t=>!(x&&!k(t)||(x||(x=k(t)),0)))(t)||!x&&0!=t.button)return;this.el.focus(),y(this,t),this.dragging=!0;break;case"mousemove":case"touchmove":t.preventDefault(),y(this,t);break;case"mouseup":case"touchend":this.dragging=!1;break;case"keydown":((t,e)=>{const r=e.keyCode;r>40||t.xy&&r<37||r<33||(e.preventDefault(),w(t.el,"move",t.getMove({x:39===r?.01:37===r?-.01:34===r?.05:33===r?-.05:35===r?1:36===r?-1:0,y:40===r?.01:38===r?-.01:0},!0)))})(this,t)}}style(t){t.forEach(((t,e)=>{for(const r in t)this.nodes[e].style.setProperty(r,t[r])}))}}class E extends _{constructor(t){super(t,"hue",'aria-label="Hue" aria-valuemin="0" aria-valuemax="360"',!1)}update({h:t}){this.h=t,this.style([{left:t/360*100+"%",color:b({h:t,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuenow",""+u(t))}getMove(t,e){return{h:e?d(this.h+360*t.x,0,360):360*t.x}}}class $ extends _{constructor(t){super(t,"saturation",'aria-label="Color"',!0)}update(t){this.hsva=t,this.style([{top:100-t.v+"%",left:t.s+"%",color:b(t)},{"background-color":b({h:t.h,s:100,v:100,a:1})}]),this.el.setAttribute("aria-valuetext",`Saturation ${u(t.s)}%, Brightness ${u(t.v)}%`)}getMove(t,e){return{s:e?d(this.hsva.s+100*t.x,0,100):100*t.x,v:e?d(this.hsva.v-100*t.y,0,100):Math.round(100-100*t.y)}}}const I=Symbol("same"),S=Symbol("color"),C=Symbol("hsva"),M=Symbol("update"),z=Symbol("parts"),B=Symbol("css"),L=Symbol("sliders");class j extends HTMLElement{static get observedAttributes(){return["color"]}get[B](){return[':host{display:flex;flex-direction:column;position:relative;width:200px;height:200px;user-select:none;-webkit-user-select:none;cursor:default}:host([hidden]){display:none!important}[role=slider]{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;outline:0}[role=slider]:last-child{border-radius:0 0 8px 8px}[part$=pointer]{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;display:flex;place-content:center center;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}[part$=pointer]::after{content:"";width:100%;height:100%;border-radius:inherit;background-color:currentColor}[role=slider]:focus [part$=pointer]{transform:translate(-50%,-50%) scale(1.1)}',"[part=hue]{flex:0 0 24px;background:linear-gradient(to right,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%)}[part=hue-pointer]{top:50%;z-index:2}","[part=saturation]{flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}[part=saturation-pointer]{z-index:3}"]}get[L](){return[$,E]}get color(){return this[S]}set color(t){if(!this[I](t)){const e=this.colorModel.toHsva(t);this[M](e),this[S]=t}}constructor(){super();const t=v(`<style>${this[B].join("")}</style>`),e=this.attachShadow({mode:"open"});e.appendChild(t.content.cloneNode(!0)),e.addEventListener("move",this),this[z]=this[L].map((t=>new t(e)))}connectedCallback(){if(this.hasOwnProperty("color")){const t=this.color;delete this.color,this.color=t}else this.color||(this.color=this.colorModel.defaultColor)}attributeChangedCallback(t,e,r){const s=this.colorModel.fromAttr(r);this[I](s)||(this.color=s)}handleEvent(t){const e=this[C],r={...e,...t.detail};let s;this[M](r),f(r,e)||this[I](s=this.colorModel.fromHsva(r))||(this[S]=s,w(this,"color-changed",{value:s}))}[I](t){return this.color&&this.colorModel.equal(t,this.color)}[M](t){this[C]=t,this[z].forEach((e=>e.update(t)))}}const H={defaultColor:"#000",toHsva:t=>(({r:t,g:e,b:r,a:s})=>{const i=Math.max(t,e,r),o=i-Math.min(t,e,r),n=o?i===t?(e-r)/o:i===e?2+(r-t)/o:4+(t-e)/o:0;return{h:u(60*(n<0?n+6:n)),s:u(i?o/i*100:0),v:u(i/255*100),a:s}})(p(t)),fromHsva:({h:t,s:e,v:r})=>(t=>(({r:t,g:e,b:r,a:s})=>{const i=s<1?m(u(255*s)):"";return"#"+m(t)+m(e)+m(r)+i})((({h:t,s:e,v:r,a:s})=>{e/=100,r/=100;const i=Math.floor(t=t/360*6),o=r*(1-e),n=r*(1-(t-i)*e),a=r*(1-(1-t+i)*e),l=i%6;return{r:u(255*[r,n,o,o,a,r][l]),g:u(255*[a,r,r,n,o,o][l]),b:u(255*[o,o,a,r,r,n][l]),a:u(s,2)}})(t)))({h:t,s:e,v:r,a:1}),equal:(t,e)=>t.toLowerCase()===e.toLowerCase()||f(p(t),p(e)),fromAttr:t=>t};class A extends j{get colorModel(){return H}}customElements.define("hex-color-picker",class extends A{});const F=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.inputBlur=r(this,"inputBlur",7),this.inputFocus=r(this,"inputFocus",7),this.valueChange=r(this,"valueChange",7),this.pickerButtonLabel="Open color picker",this.pickerLabel="Color picker",this.pickerId="color-picker-"+h(),this.onPickerChange=t=>{this.value=t.detail.value},this.onChange=t=>{this.value=t.target.value},this.onBlur=t=>{this.inputBlur.emit(t)},this.onFocus=t=>{this.inputFocus.emit(t),this.handleAutoSelect(t)},this.onInput=t=>{this.onChange(t)}}componentDidLoad(){this.autoFocus&&setTimeout((()=>{this.inputEl.focus()})),this.picker.addEventListener("color-changed",this.onPickerChange)}disconnectedCallback(){this.picker?.removeEventListener("color-changed",this.onPickerChange)}watchValue(t,e){t!==e&&this.valueChange.emit(t)}handleAutoSelect(t){this.autoSelect&&t.target.select()}render(){const t=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,e=n("color-input",{"color-input--inline":this.inline});return s(i,{key:"50c7edbbdef091650a347f864439c91aa6346fad"},s("div",{key:"c2861598c6787b7cab5592e61416331453c35223",class:e},s("input",{key:"60bfd28e425eb49ddacbbe296c8037288577ebc9","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"color-input__input",disabled:this.disabled,maxLength:7,onBlur:this.onBlur,onFocus:this.onFocus,onInput:this.onInput,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,spellcheck:"false",type:"text",value:this.value,readonly:this.readonly}),s("swirl-popover-trigger",{key:"aefc7ebda72548ee747558ca449fd4da6ce99b4d",swirlPopover:this.pickerId},s("button",{key:"7ac877a4572ca0e5e156be6f6d8b55442e568428",disabled:this.readonly,"aria-label":this.pickerButtonLabel,class:"color-input__preview-button",style:{backgroundColor:this.disabled?"var(--s-border-subdued)":this.value},type:"button"})),s("swirl-popover",{key:"7806956fa6e628a8ed937100e9c648990902e0b0",animation:"scale-in-y",id:this.pickerId,label:this.pickerLabel,placement:"bottom-end"},s("swirl-box",{key:"378fed4d43130131bd0429ac7997f8111772e70f",centerInline:!0,paddingBlockEnd:"8",paddingBlockStart:"8",paddingInlineEnd:"16",paddingInlineStart:"16"},s("hex-color-picker",{key:"9024b831e9f0e19aef504ca4f31cc3e791094019",color:this.value,ref:t=>this.picker=t})))))}static get watchers(){return{value:[{watchValue:0}]}}static get style(){return".sc-swirl-color-input-h{display:block;width:100%}.sc-swirl-color-input-h *.sc-swirl-color-input{box-sizing:border-box}.color-input.sc-swirl-color-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm);cursor:text}.color-input--inline.sc-swirl-color-input .color-input__preview-button.sc-swirl-color-input{width:1.5rem;height:1.5rem;margin-top:-0.125rem;margin-right:-0.25rem;margin-bottom:-0.125rem}.color-input__input.sc-swirl-color-input{display:inline-flex;width:100%;margin:0;padding:0;flex-grow:1;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.color-input__input.sc-swirl-color-input:focus{outline:none}.color-input__input.sc-swirl-color-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.color-input__input.sc-swirl-color-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.color-input__preview-button.sc-swirl-color-input{width:2.75rem;height:2.75rem;margin-top:-1.25rem;flex-shrink:0;border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-s);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}"}},[2,"swirl-color-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],disabled:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],inline:[4],invalid:[4],pickerButtonLabel:[1,"picker-button-label"],pickerLabel:[1,"picker-label"],placeholder:[1],required:[4],value:[1537],readonly:[4]},void 0,{value:[{watchValue:0}]}]),q=F,T=function(){"undefined"!=typeof customElements&&["swirl-color-input","swirl-box","swirl-popover","swirl-popover-trigger"].forEach((t=>{switch(t){case"swirl-color-input":customElements.get(o(t))||customElements.define(o(t),F);break;case"swirl-box":customElements.get(o(t))||a();break;case"swirl-popover":customElements.get(o(t))||l();break;case"swirl-popover-trigger":customElements.get(o(t))||c()}}))};export{q as SwirlColorInput,T as defineCustomElement}

package/dist/components/swirl-console-layout.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as o,createEvent as a,h as t,Host as s,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as n,i as r}from"./utils.js";import{d}from"./swirl-button2.js";import{d as c}from"./swirl-heading2.js";import{d as h}from"./swirl-text2.js";const b=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.backButtonClick=a(this,"backButtonClick",7),this.helpButtonClick=a(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=!!this.el.querySelector('[slot="app-bar"]')},this.updateFooterStatus=()=>{this.hasFooter=!!this.el.querySelector('[slot="footer"]')},this.onMainScroll=n((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=e=>{this.backButtonClick.emit(e)},this.onHelpButtonClick=e=>{this.helpButtonClick.emit(e)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=e=>{const o=e.target,a=!!o.closest(".console-layout__mobile-navigation-button"),t="overlays"===o.closest("[slot]")?.slot;e.composedPath().includes(this.sidebarEl)||a||t||!this.sidebarActive||this.deactivateSidebar()},this.onKeyDown=e=>{"Escape"===e.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{r()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const e={scrollable:this.contentEl.scrollHeight>this.contentEl.clientHeight,scrolledToTop:0===this.contentEl.scrollTop,scrolledToBottom:Math.round(this.contentEl.scrollTop+this.contentEl.clientHeight)>=this.contentEl.scrollHeight};Object.keys(e).some((o=>e[o]!==this.contentScrollState[o]))&&(this.contentScrollState=e)}onWindowResize(){const e=r();e||this.sidebarActive?e&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive||this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),r()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,r()&&this.sidebarEl.setAttribute("inert","")}render(){const e=this.maxContentWidth?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const o=l("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!this.appName&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom,"console-layout--hide-content-header":this.hideContentHeader});return t(s,{key:"a4158e13d33d78b4d27fb2024290f11c49fd0e5f"},t("div",{key:"3f1291ef4b8ac9828151a09e07657b68954b678c",class:o,onClick:this.onClick,onKeyDown:this.onKeyDown},t("header",{key:"cefb587ec5daa8096a4c3d3f13344cc440e5f97d","aria-hidden":!this.sidebarActive+"",class:"console-layout__sidebar",ref:e=>this.sidebarEl=e},t("div",{key:"ca149c639283c4bc8e733ea1cf8fa1619ee0e434",class:"console-layout__header"},t("div",{key:"a59ae357c46b8d35fc3f5c8a99f1ef753008327c",class:"console-layout__logo"},t("svg",{key:"42c6c8e6250510d5d0593b202bc9d2cde0a9590d",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 301 460",width:"16",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"64900a6758a8d12ee196ab708e6d50d836a52f61","fill-rule":"evenodd","clip-rule":"evenodd",d:"M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z",fill:"#2151F5"})),t("swirl-text",{key:"57d5701d08b4c53af4de4ca3284b7e04c4e0e54b",class:"console-layout__logo-text",weight:"medium"},this.logoText))),t("nav",{key:"76dab062b840632dea8308756703bb3e119f2081","aria-label":this.navigationLabel,class:"console-layout__navigation"},t("slot",{key:"cf89e7ddbebb6e87119368dbfff3c8295868ce27",name:"navigation"})),t("div",{key:"5d49517e16eff2f164b945f48dcbd6407bce5031",class:"console-layout__user"},t("slot",{key:"ff73023ebb64f240ec9a782ec086b4aebd555f34",name:"user"}))),t("main",{key:"5d9470b3d8cb91853c0dedfd0075c7f90c2dd439","aria-labelledby":this.appName?"app-name":void 0,class:"console-layout__main"},t("header",{key:"a6a5bd4c6ca674ebae0cc8e97fb4aa47265fd2cd",class:"console-layout__app-bar console-layout__app-bar--custom"},t("slot",{key:"fbbde6af44031e9b51af81972d5a0ca07dc639be",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),t("header",{key:"2265183fea6bf47f09cc019ecc508e7168c17029",class:"console-layout__app-bar"},t("span",{key:"f7e7c811938694c46a473001ee0a2f8937395078",class:"console-layout__mobile-navigation-button"},t("swirl-button",{key:"711f48b45b46753f118a0463f2304eda2f9c0a27",swirlAriaExpanded:this.sidebarActive+"",hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),t("div",{key:"b232051bf3cb60ce36bb2159a11853dd139168c0",class:"console-layout__app-name"},this.appName&&t("swirl-heading",{key:"5ccb29bfef3aaae85ed8c8bf818665c14a86b2a2",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&t("swirl-button",{key:"fb402a6f585112cfa1115274982b2f8e645ce44b",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),t("section",{key:"fe702ca29858dc085ffdd02e767098dbf85dce9b","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:e=>this.contentEl=e},t("div",{key:"8c0bc9d8f5b68e176d166620e5114d15b52c42f9",class:"console-layout__content-container"},!this.hideContentHeader&&t("header",{key:"a3f358a3e96dd6e9d818a390516b6cd67d0c6aa0",class:"console-layout__content-header",style:e},this.showBackButton&&t("swirl-button",{key:"1b7a95dd315ccd55f1bb1281b54eb7876b1f7852",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),!!this.heading&&t("div",{key:"596834d4d9308e355f8be0bab370141448b28e3c",class:"console-layout__heading-container"},t("swirl-heading",{key:"91e2b51e6fe28d9974ab4eb62ceee52be660fc1b",as:this.appName?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&t("swirl-text",{key:"4baf247b67882cbc726a7b741dbac737ed2bc7b6",class:"console-layout__subheading",color:"subdued"},this.subheading)),!this.heading&&t("div",{key:"fec65282ac397f9a8955a568a0c11d162ade6a4d",class:"console-layout__heading-container"},t("slot",{key:"db73df06bc3f6618f262b1a79053a0d1054f1a72",name:"heading"})),t("div",{key:"148cfe997f855a7ce9c24e2567bb3336be629e67",class:"console-layout__content-header-tools"},t("slot",{key:"cb087749b934ccfa488781874671cec70f82b83d",name:"content-header-tools"}))),t("div",{key:"68d29de55d12e3a38aae91cbd0b20b7d21e83b3a",class:"console-layout__integration",style:e},t("slot",{key:"0d509ae9c95910196c160c324c93a3029bec3a76",name:"content"})))),t("footer",{key:"958b494dc87397b8909edbdd3c71a9a66767e6fc",class:"console-layout__footer"},t("slot",{key:"c852db01bc215f6b4da9eef67163259a3ddfaae3",name:"footer",onSlotchange:this.updateFooterStatus})),t("div",{key:"68aebf8d1319138ff2bf530111369746ad17781a",class:"console-layout__overlays"},t("slot",{key:"0312cb654e3b771c7ca87319e7ac44e2d3aba4a9",name:"overlays"})))))}get el(){return this}static get style(){return':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"         "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"     "navigation"     "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"     "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"     "content"     "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}'}},[257,"swirl-console-layout",{appName:[1,"app-name"],backButonLabel:[1,"back-buton-label"],heading:[1],helpButonLabel:[1,"help-buton-label"],hideNavigationButtonLabel:[1,"hide-navigation-button-label"],logoText:[1,"logo-text"],navigationLabel:[1,"navigation-label"],maxContentWidth:[1,"max-content-width"],showBackButton:[4,"show-back-button"],showHelpButton:[4,"show-help-button"],showNavigationButtonLabel:[1,"show-navigation-button-label"],subheading:[1],hideContentHeader:[4,"hide-content-header"],sidebarActive:[32],contentScrollState:[32],hasCustomAppBar:[32],hasFooter:[32],toggleSidebar:[64],showSidebar:[64],hideSidebar:[64]},[[9,"resize","onWindowResize"]]]),u=b,p=function(){"undefined"!=typeof customElements&&["swirl-console-layout","swirl-button","swirl-heading","swirl-text"].forEach((e=>{switch(e){case"swirl-console-layout":customElements.get(i(e))||customElements.define(i(e),b);break;case"swirl-button":customElements.get(i(e))||d();break;case"swirl-heading":customElements.get(i(e))||c();break;case"swirl-text":customElements.get(i(e))||h()}}))};export{u as SwirlConsoleLayout,p as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as o,createEvent as a,h as t,Host as s,transformTag as i}from"@stencil/core/internal/client";import{c as l}from"./index2.js";import{d as n,i as r}from"./utils.js";import{d}from"./swirl-button2.js";import{d as c}from"./swirl-heading2.js";import{d as h}from"./swirl-text2.js";const b=e(class extends o{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.backButtonClick=a(this,"backButtonClick",7),this.helpButtonClick=a(this,"helpButtonClick",7),this.backButonLabel="Back",this.helpButonLabel="Help",this.hideNavigationButtonLabel="Hide main navigation",this.logoText="Admin",this.navigationLabel="Main",this.showNavigationButtonLabel="Show main navigation",this.contentScrollState={scrollable:!1,scrolledToTop:!1,scrolledToBottom:!1},this.updateCustomAppBarStatus=()=>{this.hasCustomAppBar=!!this.el.querySelector('[slot="app-bar"]')},this.updateFooterStatus=()=>{this.hasFooter=!!this.el.querySelector('[slot="footer"]')},this.onMainScroll=n((()=>{this.updateContentScrollState()}),16),this.onBackButtonClick=e=>{this.backButtonClick.emit(e)},this.onHelpButtonClick=e=>{this.helpButtonClick.emit(e)},this.onMobileNavigationToggleClick=()=>{this.toggleSidebar()},this.onClick=e=>{const o=e.target,a=!!o.closest(".console-layout__mobile-navigation-button"),t="overlays"===o.closest("[slot]")?.slot;e.composedPath().includes(this.sidebarEl)||a||t||!this.sidebarActive||this.deactivateSidebar()},this.onKeyDown=e=>{"Escape"===e.code&&this.sidebarActive&&this.deactivateSidebar()}}componentDidLoad(){queueMicrotask((()=>{r()?this.deactivateSidebar():this.activateSidebar(),this.updateContentScrollState(),this.updateCustomAppBarStatus(),this.updateFooterStatus()}))}updateContentScrollState(){if(!this.contentEl)return;const e={scrollable:this.contentEl.scrollHeight>this.contentEl.clientHeight,scrolledToTop:0===this.contentEl.scrollTop,scrolledToBottom:Math.round(this.contentEl.scrollTop+this.contentEl.clientHeight)>=this.contentEl.scrollHeight};Object.keys(e).some((o=>e[o]!==this.contentScrollState[o]))&&(this.contentScrollState=e)}onWindowResize(){const e=r();e||this.sidebarActive?e&&this.deactivateSidebar():this.activateSidebar()}async toggleSidebar(){this.sidebarActive?this.deactivateSidebar():this.activateSidebar()}async showSidebar(){this.sidebarActive||this.activateSidebar()}async hideSidebar(){this.sidebarActive&&this.deactivateSidebar()}activateSidebar(){this.sidebarActive=!0,this.sidebarEl.removeAttribute("inert"),r()&&this.el.querySelector("swirl-tree-navigation-item")?.focus()}deactivateSidebar(){this.sidebarActive=!1,r()&&this.sidebarEl.setAttribute("inert","")}render(){const e=this.maxContentWidth?{maxWidth:this.maxContentWidth,justifySelf:"center",width:"100%"}:void 0;this.updateCustomAppBarStatus(),this.updateFooterStatus();const o=l("console-layout",{"console-layout--sidebar-active":this.sidebarActive,"console-layout--empty-app-bar":!this.appName&&!this.showHelpButton&&!this.hasCustomAppBar,"console-layout--has-footer":this.hasFooter,"console-layout--has-custom-app-bar":this.hasCustomAppBar,"console-layout--main-scrollable":this.contentScrollState.scrollable,"console-layout--main-scrolled-to-top":this.contentScrollState.scrolledToTop,"console-layout--main-scrolled-to-bottom":this.contentScrollState.scrolledToBottom,"console-layout--hide-content-header":this.hideContentHeader});return t(s,{key:"5d09a8c63d410fa62308cda784202952c7ae8c13"},t("div",{key:"2a4f2d497c61546bacce29bf9fef4d91168c909d",class:o,onClick:this.onClick,onKeyDown:this.onKeyDown},t("header",{key:"fc85c4aa6003c983daa352afaf37759d9b7ed12c","aria-hidden":!this.sidebarActive+"",class:"console-layout__sidebar",ref:e=>this.sidebarEl=e},t("div",{key:"a5acaf8a5027a691f488ef8f6c85ec1cdd38ea2f",class:"console-layout__header"},t("div",{key:"0b173a4668e0885fa2eae85d8642ad9603a8f3c3",class:"console-layout__logo"},t("svg",{key:"35019948c32be3eea97e499b3ba830716f358854",class:"console-layout__logo-mark",fill:"none",height:"26",viewBox:"0 0 301 460",width:"16",xmlns:"http://www.w3.org/2000/svg"},t("path",{key:"9e999a1d54e068d2c2e9c6a62133144bf66c636c","fill-rule":"evenodd","clip-rule":"evenodd",d:"M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z",fill:"#2151F5"})),t("swirl-text",{key:"9867ab49457fbb979fac29eb07d9cfdcd90b8616",class:"console-layout__logo-text",weight:"medium"},this.logoText))),t("nav",{key:"9bcad767766a47f47757fdd9afcfeab6860d3232","aria-label":this.navigationLabel,class:"console-layout__navigation"},t("slot",{key:"7f07a5dbd86126548375913abcc3552184f1d778",name:"navigation"})),t("div",{key:"797ea642b8aac5314a7c4f4271064468f9ac2a99",class:"console-layout__user"},t("slot",{key:"c411a0c3a5bd5907b34dd52365b3b25c55d9383b",name:"user"}))),t("main",{key:"0c71deabe7137081a284f277f0d5320fe561a48b","aria-labelledby":this.appName?"app-name":void 0,class:"console-layout__main"},t("header",{key:"cada32f38a0a7f09dbc1980271430347a8c7064a",class:"console-layout__app-bar console-layout__app-bar--custom"},t("slot",{key:"2e934dfd45e82516d290763ce481a314d2e168ea",name:"app-bar",onSlotchange:this.updateCustomAppBarStatus})),t("header",{key:"e16c33016d4d274e30283db2da03a4482f0d66dc",class:"console-layout__app-bar"},t("span",{key:"d816c0f56caad845fad084a0baa9a3de8e7ddf3e",class:"console-layout__mobile-navigation-button"},t("swirl-button",{key:"d45285afa211eec8076c66887fba0feb9b7c54fc",swirlAriaExpanded:this.sidebarActive+"",hideLabel:!0,icon:this.sidebarActive?"<swirl-icon-close></swirl-icon-close>":"<swirl-icon-menu></swirl-icon-menu>",label:this.sidebarActive?this.hideNavigationButtonLabel:this.showNavigationButtonLabel,onClick:this.onMobileNavigationToggleClick})),t("div",{key:"07504a35afcbc6e9e4210422ebaf6c07438d423d",class:"console-layout__app-name"},this.appName&&t("swirl-heading",{key:"b77b11b9ae84b744df31b71df7209c127f46e114",as:"h1",headingId:"app-name",level:4,text:this.appName})),this.showHelpButton&&t("swirl-button",{key:"d12872a31d256eb38af549b990c36674b2f9251a",class:"console-layout__help-button",hideLabel:!0,icon:"<swirl-icon-help></swirl-icon-help>",label:this.helpButonLabel,onClick:this.onHelpButtonClick})),t("section",{key:"d22e35a265257382c81113f04e5844c4d90d591d","aria-labelledby":"heading",class:"console-layout__content",onScroll:this.onMainScroll,ref:e=>this.contentEl=e},t("div",{key:"3a0d7cc797cfdb90796f695a7a48d5c84fbf5641",class:"console-layout__content-container"},!this.hideContentHeader&&t("header",{key:"504ad20a00c7287b53e011381110725764affea7",class:"console-layout__content-header",style:e},this.showBackButton&&t("swirl-button",{key:"9f508cd05667433ab5f3f6058386c0447a077e76",class:"console-layout__back-button",hideLabel:!0,icon:"<swirl-icon-arrow-back></swirl-icon-arrow-back>",label:this.backButonLabel,onClick:this.onBackButtonClick}),!!this.heading&&t("div",{key:"3e0d05f38fcfc7b1e6a4a1e6bd8adb213d33a83a",class:"console-layout__heading-container"},t("swirl-heading",{key:"c99e0af968e10942714e78049707780bedb5f473",as:this.appName?"h2":"h1",class:"console-layout__heading",headingId:"heading",level:1,text:this.heading}),this.subheading&&t("swirl-text",{key:"c91b6ff09387f989add0966e76305b2f169a2522",class:"console-layout__subheading",color:"subdued"},this.subheading)),!this.heading&&t("div",{key:"5f9bd046fb38987374ef70310a8d7fe10584070f",class:"console-layout__heading-container"},t("slot",{key:"952dadcfb09b0409906f1571bee0991704a1c0c4",name:"heading"})),t("div",{key:"b29870e34d1acc32917e0f1c3f0e7b1c85e94ee7",class:"console-layout__content-header-tools"},t("slot",{key:"23a42d65e4641a59b11205b68bbbf8f0d3d4089e",name:"content-header-tools"}))),t("div",{key:"e4faed336c026e9104850664235a49da0d0089a3",class:"console-layout__integration",style:e},t("slot",{key:"eabe7e379db5c8a3574f332553bb93f733e1c3a0",name:"content"})))),t("footer",{key:"a4dbf7ec10a443607970fd5cf4f61d645b5c71ec",class:"console-layout__footer"},t("slot",{key:"4958d2838da54be6626563695685d29dc4854654",name:"footer",onSlotchange:this.updateFooterStatus})),t("div",{key:"e1eb0783268ff8afde5feb6936a0d4ba105f6908",class:"console-layout__overlays"},t("slot",{key:"9e085357507c590cc4a4e19c93493885abce6adc",name:"overlays"})))))}get el(){return this}static get style(){return':host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"         "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"     "navigation"     "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"     "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"     "content"     "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}'}},[257,"swirl-console-layout",{appName:[1,"app-name"],backButonLabel:[1,"back-buton-label"],heading:[1],helpButonLabel:[1,"help-buton-label"],hideNavigationButtonLabel:[1,"hide-navigation-button-label"],logoText:[1,"logo-text"],navigationLabel:[1,"navigation-label"],maxContentWidth:[1,"max-content-width"],showBackButton:[4,"show-back-button"],showHelpButton:[4,"show-help-button"],showNavigationButtonLabel:[1,"show-navigation-button-label"],subheading:[1],hideContentHeader:[4,"hide-content-header"],sidebarActive:[32],contentScrollState:[32],hasCustomAppBar:[32],hasFooter:[32],toggleSidebar:[64],showSidebar:[64],hideSidebar:[64]},[[9,"resize","onWindowResize"]]]),u=b,p=function(){"undefined"!=typeof customElements&&["swirl-console-layout","swirl-button","swirl-heading","swirl-text"].forEach((e=>{switch(e){case"swirl-console-layout":customElements.get(i(e))||customElements.define(i(e),b);break;case"swirl-button":customElements.get(i(e))||d();break;case"swirl-heading":customElements.get(i(e))||c();break;case"swirl-text":customElements.get(i(e))||h()}}))};export{u as SwirlConsoleLayout,p as defineCustomElement}

package/dist/components/swirl-data-cell-stack.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as a,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{c}from"./index2.js";import{v as d}from"./v4.js";const r=e(class extends a{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.headerId="data-cell-stack-header-"+d(),this.onSlotChange=e=>{e.target.assignedElements().filter((e=>"SWIRL-DATA-CELL"!==e.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const e=!!this.el.querySelector('[slot="cta"]'),a=!!this.label&&!this.hideLabel,l=c("data-cell-stack",{"data-cell-stack--has-cta":e}),d=a?this.headerId+"-label":void 0,r=this.description?this.headerId+"-description":void 0;return t(s,{key:"c3da49e9b7790874f8360fee4d0314204e79f56b"},t("div",{key:"841705fac518ef6a01525df95dba2cbdc2d5a3e0",class:l,part:"data-cell-stack",role:"group"},(a||this.description||e)&&t("header",{key:"11ae4c9b357be3b834c31bd7eda0e642fa3ddf23",class:"data-cell-stack__header",id:this.headerId},t("div",{key:"3a75787b65c88d645535b63b4ca8679898399cce",class:"data-cell-stack__header-content"},a&&t("h3",{key:"65bc8b13f560ee9adeabf18c5fbf35623e0542c3",class:"data-cell-stack__label",id:d},this.label),this.description&&t("p",{key:"0742e498e5deb487bdb1947aca8ae92b74137bee",class:"data-cell-stack__description",id:r},this.description)),e&&t("div",{key:"86fcb90372ad2e9179389ce69735d812c1d21952",class:"data-cell-stack__cta"},t("slot",{key:"385924b0cdf96c2b76605268b30eea4be3f510cf",name:"cta"}))),t("div",{key:"284c754322880cfed92c85534241be24af898bc7",class:"data-cell-stack__cells",role:"list","aria-labelledby":d||void 0,"aria-describedby":r||void 0},t("slot",{key:"d8e255560793646082e0552b75dddee75d6f1051",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l)     var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)     var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}"}},[257,"swirl-data-cell-stack",{description:[1],hideLabel:[4,"hide-label"],label:[1]}]),i=r,o=function(){"undefined"!=typeof customElements&&["swirl-data-cell-stack"].forEach((e=>{"swirl-data-cell-stack"===e&&(customElements.get(l(e))||customElements.define(l(e),r))}))};export{i as SwirlDataCellStack,o as defineCustomElement}
+import{proxyCustomElement as a,HTMLElement as e,h as t,Host as s,transformTag as l}from"@stencil/core/internal/client";import{c}from"./index2.js";import{v as d}from"./v4.js";const r=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow(),this.hideLabel=!1,this.headerId="data-cell-stack-header-"+d(),this.onSlotChange=a=>{a.target.assignedElements().filter((a=>"SWIRL-DATA-CELL"!==a.tagName)).length>0&&console.warn("[SwirlDataCellStack] Only swirl-data-cell elements are allowed as direct children.")}}render(){const a=!!this.el.querySelector('[slot="cta"]'),e=!!this.label&&!this.hideLabel,l=c("data-cell-stack",{"data-cell-stack--has-cta":a}),d=e?this.headerId+"-label":void 0,r=this.description?this.headerId+"-description":void 0;return t(s,{key:"7482563cd21a37a6e92e131bc47b1a38000bf9ad"},t("div",{key:"d64f6e8477dc9b17c1a3737ebabe0dacbfda35ba",class:l,part:"data-cell-stack",role:"group"},(e||this.description||a)&&t("header",{key:"4b7aca0365f8e146d2c54a56f1d17c68175edbeb",class:"data-cell-stack__header",id:this.headerId},t("div",{key:"119a9ea7030f2ff314290ad602f4df0f7f2c7dfe",class:"data-cell-stack__header-content"},e&&t("h3",{key:"95f48f703af2fef4a2d8dc5581bcd0468534670c",class:"data-cell-stack__label",id:d},this.label),this.description&&t("p",{key:"42359e5aa833a85cb7eb7e9f3de5624966d2dc8c",class:"data-cell-stack__description",id:r},this.description)),a&&t("div",{key:"3386ca0845ec8242d442b79b8a2edfd4e16fc968",class:"data-cell-stack__cta"},t("slot",{key:"f44cca1026f863ce72bbf3d2ef8205f5b4982121",name:"cta"}))),t("div",{key:"b6582fb24361eb4ed51fdf14ea95f50fe8478ba1",class:"data-cell-stack__cells",role:"list","aria-labelledby":d||void 0,"aria-describedby":r||void 0},t("slot",{key:"4a14f26e31144a00eab6fb63be8283c9847c9692",onSlotchange:this.onSlotChange}))))}get el(){return this}static get style(){return":host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l)     var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)     var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}"}},[257,"swirl-data-cell-stack",{description:[1],hideLabel:[4,"hide-label"],label:[1]}]),i=r,o=function(){"undefined"!=typeof customElements&&["swirl-data-cell-stack"].forEach((a=>{"swirl-data-cell-stack"===a&&(customElements.get(l(a))||customElements.define(l(a),r))}))};export{i as SwirlDataCellStack,o as defineCustomElement}

package/dist/components/swirl-date-input.js

@@ -1 +1 @@
-import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as a,transformTag as r}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{f as o,I as d,p as c,i as h}from"./index3.js";import{D as l}from"./media-query.service.js";import{i as p}from"./utils.js";import{d as u}from"./swirl-date-picker2.js";import{d as m}from"./swirl-icon-today2.js";import{d as f}from"./swirl-popover2.js";import{d as w}from"./swirl-popover-trigger2.js";import{d as b}from"./wc-datepicker2.js";const y="yyyy-MM-dd",k=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.invalidInput=e(this,"invalidInput",7),this.valueChange=e(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.isInPickOnlyMode=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),this.readonly||"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),p()||this.focus())},this.onMouseDown=()=>{this.readonly||"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{if(this.readonly)return;const i=this.pickerPopover.contains(t.relatedTarget);this.setIsInPickOnlyMode(!i)},this.onPickDate=t=>{const i=t.detail,e=o(i,y);this.value=e,this.inputEl.value=o(i,this.pattern),this.mask.updateValue(),this.setIsInPickOnlyMode(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id="swirl-date-input-"+t,this.setIsInPickOnlyMode(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=l.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}async openPicker(){this.pickerPopover.open(this.el)}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setIsInPickOnlyMode(t){this.isInPickOnlyMode=!("pick"!==this.preferredInputMode||!p())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern||(this.pattern=y),this.mask=d(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:d.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:d.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:d.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:d.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=o(t,this.pattern);return h(t)?(this.value=o(t,y),i):(this.invalidInput.emit(""+t),"")},parse:t=>c(t,this.pattern,new Date)}),this.mask.on("accept",(()=>{""===this.mask.value&&(this.value="",this.valueChange.emit(""))})),this.updateValue()}updateValue(){if(this.value){const t=c(this.value,y,new Date);if(h(t)){const i=o(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}else this.mask.value=""}render(){const t=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,i=this.value?c(this.value,y,new Date):void 0,e=h(i)?i:void 0,r=n("date-input",{"date-input--inline":this.inline});return s(a,{key:"837329ab8c80cad44421fc19a79124c684846e8f"},s("div",{key:"7116bfaf64a4b4da2eebe5851a881bae29581174",class:r},s("input",{key:"3abfdb8840ce728d0f75e550482aeddeaa854f44","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.isInPickOnlyMode||this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),!this.readonly&&s("swirl-popover-trigger",{key:"a6d3c22092affdc5370fd93009a70907d1bd651e",swirlPopover:"popover-"+this.id},s("button",{key:"42325d18293a1ffcae71385d5d190c9d8419e527","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},s("swirl-icon-today",{key:"6eb5d29bd5bc825cd30ddaf21df1bac22fae09dc",size:this.iconSize})))),!(this.disabled||this.readonly)&&s("swirl-popover",{key:"293941dc84a9a953e8a8760262380c9a9b567ece",animation:"scale-in-y",class:"date-input__date-picker-popover",id:"popover-"+this.id,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},s("swirl-date-picker",{key:"c45bd7a0309af4c8e8080655c1dd3f855c9751ed",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:e,startDate:e})))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}"}},[2,"swirl-date-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],datePickerDisableDate:[16],datePickerLabel:[1,"date-picker-label"],datePickerTriggerLabel:[1,"date-picker-trigger-label"],disabled:[4],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inline:[4],invalid:[4],labels:[16],locale:[1],placeholder:[1],preferredInputMode:[1,"preferred-input-mode"],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32],isInPickOnlyMode:[32],openPicker:[64]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),v=k,g=function(){"undefined"!=typeof customElements&&["swirl-date-input","swirl-date-picker","swirl-icon-today","swirl-popover","swirl-popover-trigger","wc-datepicker"].forEach((t=>{switch(t){case"swirl-date-input":customElements.get(r(t))||customElements.define(r(t),k);break;case"swirl-date-picker":customElements.get(r(t))||u();break;case"swirl-icon-today":customElements.get(r(t))||m();break;case"swirl-popover":customElements.get(r(t))||f();break;case"swirl-popover-trigger":customElements.get(r(t))||w();break;case"wc-datepicker":customElements.get(r(t))||b()}}))};export{v as SwirlDateInput,g as defineCustomElement}
+import{proxyCustomElement as t,HTMLElement as i,createEvent as e,h as s,Host as a,transformTag as r}from"@stencil/core/internal/client";import{c as n}from"./index2.js";import{f as o,I as d,p as c,i as h}from"./index3.js";import{D as l}from"./media-query.service.js";import{i as p}from"./utils.js";import{d as u}from"./swirl-date-picker2.js";import{d as m}from"./swirl-icon-today2.js";import{d as f}from"./swirl-popover2.js";import{d as b}from"./swirl-popover-trigger2.js";import{d as w}from"./wc-datepicker2.js";const y="yyyy-MM-dd",k=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.invalidInput=e(this,"invalidInput",7),this.valueChange=e(this,"valueChange",7),this.datePickerDisableDate=()=>!1,this.datePickerLabel="Date picker",this.datePickerTriggerLabel="Open date picker",this.firstDayOfWeek=0,this.format="yyyy-MM-dd",this.locale="en-US",this.placeholder="yyyy-mm-dd",this.preferredInputMode="input",this.iconSize=24,this.isInPickOnlyMode=!1,this.mediaQueryUnsubscribe=()=>{},this.onClick=t=>{t.preventDefault(),this.readonly||"pick"===this.preferredInputMode&&(this.pickerPopover.open(this.el),p()||this.focus())},this.onMouseDown=()=>{this.readonly||"pick"===this.preferredInputMode&&this.pickerPopover.close()},this.onFocus=t=>{this.handleAutoSelect(t)},this.onBlur=t=>{if(this.readonly)return;const i=this.pickerPopover.contains(t.relatedTarget);this.setIsInPickOnlyMode(!i)},this.onPickDate=t=>{const i=t.detail,e=o(i,y);this.value=e,this.inputEl.value=o(i,this.pattern),this.mask.updateValue(),this.setIsInPickOnlyMode(!0),this.pickerPopover.close()}}componentWillLoad(){const t=Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);this.id="swirl-date-input-"+t,this.setIsInPickOnlyMode(!0)}componentDidLoad(){this.setupMask(),this.mediaQueryUnsubscribe=l.subscribe((t=>{this.updateIconSize(t)})),this.autoFocus&&this.focus()}disconnectedCallback(){this.mask?.destroy(),this.mediaQueryUnsubscribe()}watchFormat(){this.setupMask()}watchValue(t,i){t!==i&&this.updateValue()}async openPicker(){this.pickerPopover.open(this.el)}focus(){setTimeout((()=>{this.inputEl.focus()}))}updateIconSize(t){this.iconSize=t?20:24}handleAutoSelect(t){this.autoSelect?t.target&&t.target instanceof HTMLInputElement&&t.target.select():setTimeout((()=>{t.target&&t.target instanceof HTMLInputElement&&t.target.setSelectionRange&&t.target.setSelectionRange(0,0)}))}setIsInPickOnlyMode(t){this.isInPickOnlyMode=!("pick"!==this.preferredInputMode||!p())&&t}setupMask(){this.mask?.destroy(),this.pattern=this.format.replace(/(?<!d)d(?!d)/g,"dd").replace(/(?<!M)M(?!M)/g,"MM").replace(/(?<!y)y(?!y)/g,"yyyy").replace(/(?<!y)yyy(?!y)/g,"yyyy"),this.pattern||(this.pattern=y),this.mask=d(this.inputEl,{mask:Date,pattern:this.pattern.replace(/([^A-Za-z0-9])/g,"$1`"),autofix:"pad",lazy:!0,overwrite:!0,eager:"append",blocks:{dd:{mask:d.MaskedRange,from:1,to:31,maxLength:2},MM:{mask:d.MaskedRange,from:1,to:12,maxLength:2},yy:{mask:d.MaskedRange,from:0,to:99,maxLength:2},yyyy:{mask:d.MaskedRange,from:1e3,to:9999,maxLength:4}},format:t=>{const i=o(t,this.pattern);return h(t)?(this.value=o(t,y),i):(this.invalidInput.emit(""+t),"")},parse:t=>c(t,this.pattern,new Date)}),this.mask.on("accept",(()=>{""===this.mask.value&&(this.value="",this.valueChange.emit(""))})),this.updateValue()}updateValue(){if(this.value){const t=c(this.value,y,new Date);if(h(t)){const i=o(t,this.pattern);this.mask.value=i,this.valueChange.emit(this.value)}else this.invalidInput.emit(this.value)}else this.mask.value=""}render(){const t=!0===this.invalid||!1===this.invalid?this.invalid+"":void 0,i=this.value?c(this.value,y,new Date):void 0,e=h(i)?i:void 0,r=n("date-input",{"date-input--inline":this.inline});return s(a,{key:"9268c3541330cab8173bddb4682b5b60a7737aa0"},s("div",{key:"c39cb00aa7d28353cdfd394aa3da5462b89318ef",class:r},s("input",{key:"a560447922c7f0b0e1fa9a700765d59bc5f20f6a","aria-describedby":this.swirlAriaDescribedby,"aria-disabled":this.disabled?"true":void 0,"aria-invalid":t,autoFocus:this.autoFocus,class:"date-input__input",disabled:this.disabled,readonly:this.isInPickOnlyMode||this.readonly,id:this.id,inputmode:"numeric",onClick:this.onClick,onMouseDown:this.onMouseDown,onFocus:this.onFocus,onBlur:this.onBlur,placeholder:this.placeholder,ref:t=>this.inputEl=t,required:this.required,type:"text"}),!this.readonly&&s("swirl-popover-trigger",{key:"ffad693a85647b0e843c56ef392c25203f5a5180",swirlPopover:"popover-"+this.id},s("button",{key:"6773dbc41845564906d8e55aa3b0349f0ecd0bcf","aria-label":this.datePickerTriggerLabel,class:"date-input__date-picker-button",disabled:this.disabled,type:"button"},s("swirl-icon-today",{key:"d08c1d0836688314cb710fc95621ad4860838326",size:this.iconSize})))),!(this.disabled||this.readonly)&&s("swirl-popover",{key:"fb4ea5d008b3179da9fe07351ca7b3f6b76ab544",animation:"scale-in-y",class:"date-input__date-picker-popover",id:"popover-"+this.id,label:this.datePickerLabel,placement:"bottom-end",ref:t=>this.pickerPopover=t},s("swirl-date-picker",{key:"7c7d87288342a8a6a55589644f333fbe34e2f464",disableDate:this.datePickerDisableDate,firstDayOfWeek:this.firstDayOfWeek,labels:this.labels,locale:this.locale,onValueChange:this.onPickDate,value:e,startDate:e})))}get el(){return this}static get watchers(){return{format:[{watchFormat:0}],value:[{watchValue:0}]}}static get style(){return".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}@media (max-width: 767px){.date-input__date-picker-popover.sc-swirl-date-input{position:fixed}}"}},[2,"swirl-date-input",{autoFocus:[4,"auto-focus"],autoSelect:[4,"auto-select"],datePickerDisableDate:[16],datePickerLabel:[1,"date-picker-label"],datePickerTriggerLabel:[1,"date-picker-trigger-label"],disabled:[4],firstDayOfWeek:[2,"first-day-of-week"],format:[1],inline:[4],invalid:[4],labels:[16],locale:[1],placeholder:[1],preferredInputMode:[1,"preferred-input-mode"],required:[4],swirlAriaDescribedby:[1,"swirl-aria-describedby"],value:[1537],readonly:[4],iconSize:[32],isInPickOnlyMode:[32],openPicker:[64]},void 0,{format:[{watchFormat:0}],value:[{watchValue:0}]}]),v=k,g=function(){"undefined"!=typeof customElements&&["swirl-date-input","swirl-date-picker","swirl-icon-today","swirl-popover","swirl-popover-trigger","wc-datepicker"].forEach((t=>{switch(t){case"swirl-date-input":customElements.get(r(t))||customElements.define(r(t),k);break;case"swirl-date-picker":customElements.get(r(t))||u();break;case"swirl-icon-today":customElements.get(r(t))||m();break;case"swirl-popover":customElements.get(r(t))||f();break;case"swirl-popover-trigger":customElements.get(r(t))||b();break;case"wc-datepicker":customElements.get(r(t))||w()}}))};export{v as SwirlDateInput,g as defineCustomElement}