@getflip/swirl-components 0.452.0 → 0.453.0

package/dist/cjs/swirl-lightbox.cjs.entry.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 var bodyScrollLock_esm = require('./bodyScrollLock.esm-DMDeaEpJ.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var index_esm = require('./index.esm-D5HbQDBa.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlLightboxCss = ":host{display:block}:host *{box-sizing:border-box}.lightbox{--swirl-lightbox-view-height:100vh;position:fixed;z-index:var(--s-z-40);display:block;overflow:visible;width:auto;max-width:none;height:var(--swirl-lightbox-view-height);max-height:none;margin:0;padding:0;border:none;background-color:rgba(0, 0, 0, 1);inset:0}.lightbox::backdrop{display:none}.lightbox:not([open]){display:none}@supports (height: 100dvh){.lightbox{--swirl-lightbox-view-height:100dvh}}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);align-items:flex-start;pointer-events:none;gap:var(--s-space-12);justify-content:space-between}.lightbox__header .lightbox__close-button{order:-1}@media (min-width: 768px){.lightbox__header{justify-content:flex-end}.lightbox__header .lightbox__close-button{order:unset}}.lightbox__toolbar{display:flex;align-items:center;pointer-events:auto;gap:var(--s-space-12)}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{width:2.25rem;height:2.25rem}}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}";
+const swirlLightboxCss = () => `:host{display:block}:host *{box-sizing:border-box}.lightbox{--swirl-lightbox-view-height:100vh;position:fixed;z-index:var(--s-z-40);display:block;overflow:visible;width:auto;max-width:none;height:var(--swirl-lightbox-view-height);max-height:none;margin:0;padding:0;border:none;background-color:rgba(0, 0, 0, 1);inset:0}.lightbox::backdrop{display:none}.lightbox:not([open]){display:none}@supports (height: 100dvh){.lightbox{--swirl-lightbox-view-height:100dvh}}@media (min-width: 768px){.lightbox{background-color:rgba(0, 0, 0, 0.8)}}.lightbox:not(.lightbox--closing) .lightbox__body{animation:0.15s lightbox-fade-in}@media (prefers-reduced-motion){.lightbox:not(.lightbox--closing) .lightbox__body{animation:none}}.lightbox--closing{animation:0.15s lightbox-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.lightbox--closing{animation:none}}.lightbox__body{position:relative;width:100%;height:100%}.lightbox__header{position:absolute;z-index:1;top:0;right:0;left:0;display:flex;padding:var(--s-space-12) var(--s-space-16);align-items:flex-start;pointer-events:none;gap:var(--s-space-12);justify-content:space-between}.lightbox__header .lightbox__close-button{order:-1}@media (min-width: 768px){.lightbox__header{justify-content:flex-end}.lightbox__header .lightbox__close-button{order:unset}}.lightbox__toolbar{display:flex;align-items:center;pointer-events:auto;gap:var(--s-space-12)}.lightbox__controls{position:absolute;z-index:1;top:50%;right:0;left:0;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:flex-start;pointer-events:none}@media (min-width: 768px){.lightbox__controls{display:flex}}.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{display:inline-flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-on-image);background-color:rgba(0, 0, 0, 0.6);cursor:pointer;transition:opacity 0.15s;pointer-events:auto}.lightbox__close-button:disabled,.lightbox__download-button:disabled,.lightbox__previous-slide-button:disabled,.lightbox__next-slide-button:disabled{pointer-events:none;opacity:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.lightbox__close-button,.lightbox__download-button,.lightbox__previous-slide-button,.lightbox__next-slide-button{width:2.25rem;height:2.25rem}}.lightbox__content{overflow:hidden;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.lightbox__slides{display:flex;width:100%;height:100%}.lightbox__slides ::slotted(*){flex-basis:100%;flex-shrink:0;transition:transform 0.3s}@media (min-width: 768px){.lightbox__slides ::slotted(*){padding:4rem 5rem}}@media (prefers-reduced-motion){.lightbox__slides ::slotted(*){transition:none}}.lightbox__pagination{position:absolute;bottom:var(--s-space-32);left:50%;padding:var(--s-space-4) var(--s-space-12);border-radius:var(--s-border-radius-base);color:var(--s-text-on-image);background-color:rgba(0, 0, 0, 0.6);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);transform:translateX(-50%);pointer-events:none}@media (min-width: 768px){.lightbox__pagination{display:none}}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}@keyframes lightbox-fade-out{from{opacity:1}to{opacity:0}}`;
 
 const SwirlLightbox = class {
     constructor(hostRef) {
@@ -279,13 +279,15 @@ const SwirlLightbox = class {
         const className = index$1.classnames("lightbox", {
             "lightbox--closing": this.closing,
         });
-        return (index.h(index.Host, { key: 'caadbd78ee4e9e9c5b7264745167bfe8a1663103' }, index.h("dialog", { key: '59b8f72b6e0622cada0b0fcd3187e1e1a7335b5c', "aria-label": this.label, class: className, id: "lightbox", onKeyDown: this.onKeyDown, onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'fcd0ade89641546bf6d9fa221ed150c9e9496829', class: "lightbox__body", role: "document" }, index.h("header", { key: 'f2e20c1b3377ae036f1c4d79ae852285c279299f', class: "lightbox__header" }, index.h("div", { key: '3925b60332f25ebf68ffccf71e950760ac604e50', class: "lightbox__toolbar" }, index.h("slot", { key: '2cfc6e04a8d1baf92d84609bf686e040246364c4', name: "toolbar" }), this.downloadButtonEnabled && (index.h("button", { key: 'f9d6311f83d88022a22fb03f3c79fdf7a4385f8d', "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick, type: "button" }, index.h("swirl-icon-download", { key: '93993a97b686bb632ed90673e61e0854bf7de20a' })))), index.h("button", { key: '3f856522c482e48c0c96566c881d7e98cf6f0eac', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick, type: "button" }, index.h("swirl-icon-close", { key: 'fe6719a907b995b2a73075e6b221ac0ed31c081a' }))), index.h("div", { key: '59383f367adf0448ef2d37ae66985b841c7a3c21', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: '2351f3e8a522378ef905165ec9ae90f94eea4ac5', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: 'e9556e519a32d1f52307039ced390c69324507cc', onSlotchange: this.registerSlides }))), index.h("div", { key: '137b240eeb19979747a40ac42035da9dfd97a5c6', class: "lightbox__controls" }, index.h("button", { key: '5f854a218990aed479729120a3914292f5b4c9e5', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick, ref: (el) => (this.previousSlideButton = el) }, index.h("swirl-icon-arrow-left", { key: '64c9f4385d557505c3322473e17ad2074d94232b' })), index.h("button", { key: 'aa5a754b64ce224d0718d06128c65d4fab224670', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick, ref: (el) => (this.nextSlideButton = el) }, index.h("swirl-icon-arrow-right", { key: '36f20cacded3de1c48deec4f9b2a82bd80ff3e13' }))), showPagination && (index.h("span", { key: '08745aad05e12802fa74696df1a9819b05c47fdd', class: "lightbox__pagination" }, index.h("span", { key: '0ff0bd2935928000c4dfe2f5ecad1d0f610dfd56', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))))));
+        return (index.h(index.Host, { key: 'cf6f6d7abd1f3fb5e2f9769c21f829d80557ad44' }, index.h("dialog", { key: '89f94eda06bf90dea70b87381aecb2365b4fade3', "aria-label": this.label, class: className, id: "lightbox", onKeyDown: this.onKeyDown, onMouseDown: this.onPointerDown, onMouseMove: this.onPointerMove, onMouseOut: this.onPointerUp, onMouseUp: this.onPointerUp, onTouchEnd: this.onPointerUp, onTouchMove: this.onPointerMove, onTouchStart: this.onPointerDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'd098147a11d84bf9a06ce0d9b1a53106cd79724a', class: "lightbox__body", role: "document" }, index.h("header", { key: '6f0fceb8782cec90bd0642439c227c4bfefebe5a', class: "lightbox__header" }, index.h("div", { key: '7844450e9891b0c850a5f80976da33cde4a36050', class: "lightbox__toolbar" }, index.h("slot", { key: 'b28f19529feda7db00928033f1afc9b575a63aed', name: "toolbar" }), this.downloadButtonEnabled && (index.h("button", { key: 'a9031f5b62c1e4e46dbf2ab48c79935968e59cb7', "aria-label": this.downloadButtonLabel, class: "lightbox__download-button", onClick: this.onDownloadButtonClick, type: "button" }, index.h("swirl-icon-download", { key: '7d63ddf171b0dcc7d18aa110759cef8fddd19b07' })))), index.h("button", { key: 'cd821ad8092cdb51ddd7ce7bc72eccd6887cabeb', "aria-label": this.closeButtonLabel, class: "lightbox__close-button", onClick: this.onCloseButtonClick, type: "button" }, index.h("swirl-icon-close", { key: '3b56834e74120dfacce910df890ed2d05ea1dba1' }))), index.h("div", { key: '4c7db70c404d2fae2f2de8d8baaab38fc6f28c53', "aria-roledescription": "carousel", class: "lightbox__content", role: "group" }, index.h("div", { key: '8964109347c86af8aa0982474672d830b2396049', "aria-atomic": "false", "aria-live": "polite", class: "lightbox__slides", onClick: this.onBackdropClick, onContextMenu: this.onContextMenu, ref: (el) => (this.slidesContainer = el) }, index.h("slot", { key: '9b4074e3fe5f47db791ade8095e1a15f4914fc4c', onSlotchange: this.registerSlides }))), index.h("div", { key: '9c5e848e1663ad5790790aa763b688d401d1f142', class: "lightbox__controls" }, index.h("button", { key: 'ca010b94aa5ccc31b216eeed19700733f2650331', "aria-label": this.previousSlideButtonLabel, class: "lightbox__previous-slide-button", disabled: this.activeSlideIndex === 0, onClick: this.onPreviousSlideClick, ref: (el) => (this.previousSlideButton = el) }, index.h("swirl-icon-arrow-left", { key: '4c9a00731fdabf37d5b6b51377cd5ddfbfe5f449' })), index.h("button", { key: 'ecb49d5db425fb948614e72609034eb2a77076f4', "aria-label": this.nextSlideButtonLabel, class: "lightbox__next-slide-button", disabled: this.activeSlideIndex === this.slides.length - 1, onClick: this.onNextSlideClick, ref: (el) => (this.nextSlideButton = el) }, index.h("swirl-icon-arrow-right", { key: 'bb2d38a2dadbde31ffc97c75eb067907ac4b6b71' }))), showPagination && (index.h("span", { key: '15394638842b1564672d34ea9fb10a06ac4c9b30', class: "lightbox__pagination" }, index.h("span", { key: '795a0ffc875f42caa41df7b96f2fe6c6c96dea21', "aria-current": "page" }, this.activeSlideIndex + 1), " /", " ", this.slides.length))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "activeSlideIndex": ["watchActiveSlideIndex"]
+        "activeSlideIndex": [{
+                "watchActiveSlideIndex": 0
+            }]
     }; }
 };
-SwirlLightbox.style = swirlLightboxCss;
+SwirlLightbox.style = swirlLightboxCss();
 
 exports.swirl_lightbox = SwirlLightbox;

package/dist/cjs/swirl-link.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlLinkCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}";
+const swirlLinkCss = () => `:host{display:inline-flex}:host *{box-sizing:border-box}.link{color:var(--s-interactive-primary-default);line-height:var(--s-line-height-base);text-underline-offset:var(--s-space-4)}.link:hover{color:var(--s-interactive-primary-hovered)}.link:active{color:var(--s-interactive-primary-pressed)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.link{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.link--color-subdued{color:var(--s-interactive-neutral-default);font-weight:var(--s-font-weight-medium);text-decoration:none}.link--color-subdued:hover{color:var(--s-interactive-neutral-hovered)}.link--color-subdued:active{color:var(--s-interactive-neutral-pressed)}`;
 
 const SwirlLink = class {
     constructor(hostRef) {
@@ -15,6 +15,6 @@ const SwirlLink = class {
         return (index.h(index.Host, { key: 'c64f20c3eae2d9a9009f40ea6ffb056ad1a5d710' }, index.h("a", { key: '5b0f5102b6946580849bc0c407478976c367507e', class: className, href: this.href, part: "link", target: this.target }, this.label)));
     }
 };
-SwirlLink.style = swirlLinkCss;
+SwirlLink.style = swirlLinkCss();
 
 exports.swirl_link = SwirlLink;

package/dist/cjs/swirl-list.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 
-const swirlListCss = ":host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:\"•\"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) \".\";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) \".\";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+const swirlListCss = () => `:host{display:block}:host *{box-sizing:border-box}.swirl-list{line-height:var(--s-line-height-base)}.swirl-list ul,.swirl-list ol{margin:0;padding:0;list-style-position:outside;list-style-type:none}.swirl-list ul li{padding-left:1.5rem}.swirl-list ul li:before{display:inline-block;width:1.5rem;margin-left:-1.5rem;text-align:center;content:"•"}.swirl-list ol{counter-reset:item}.swirl-list ol ol{counter-reset:letter}.swirl-list ol ol li:before{content:counter(letter, lower-alpha) ".";counter-increment:letter}.swirl-list ol li{padding-left:1.5rem}.swirl-list ol li:before{display:inline-block;min-width:1.5rem;margin-left:-1.5rem;padding-right:var(--s-space-8);text-align:right;content:counter(item) ".";counter-increment:item;font-variant-numeric:tabular-nums}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.swirl-list{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}`;
 
 const SwirlList = class {
     constructor(hostRef) {
@@ -18,6 +18,6 @@ const SwirlList = class {
         return (index.h(index.Host, { key: '957dafe714e338cddcc7b2bf8ad16a94ee53c4e6' }, index.h("div", { key: '09be997bd062d45f3faaa0bc10816a6b0dfb76e7', class: "swirl-list", ref: (el) => (this.containerEl = el) }, index.h("slot", { key: 'c458f5304714b9ddab49626b3de3ee6ae5b94e31' }))));
     }
 };
-SwirlList.style = swirlListCss;
+SwirlList.style = swirlListCss();
 
 exports.swirl_list = SwirlList;

package/dist/cjs/swirl-menu-item.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlMenuItemCss = ":host{display:block}:host *{box-sizing:border-box}.menu-item--expanded ::part(action-list-item){background-color:var(--s-surface-overlay-hovered)}";
+const swirlMenuItemCss = () => `:host{display:block}:host *{box-sizing:border-box}.menu-item--expanded ::part(action-list-item){background-color:var(--s-surface-overlay-hovered)}`;
 
 const SwirlMenuItem = class {
     constructor(hostRef) {
@@ -110,15 +110,17 @@ const SwirlMenuItem = class {
         const className = index$1.classnames("menu-item", {
             "menu-item--expanded": this.expanded,
         });
-        return (index.h(index.Host, { key: '841a6180301fe7c712c12dbdd36657024b94288e' }, index.h("div", { key: 'd77bebf8a3b13634ec9ff9122171ef5cebc01ca0', class: className }, this.parentMenu?.variant === "selection"
+        return (index.h(index.Host, { key: '97db9cbdf5a167c864ea81c7f4b89bae9b148c04' }, index.h("div", { key: '0cb4f60bdc99ba1d72ceb0cf5455904b5cf3aaf4', class: className }, this.parentMenu?.variant === "selection"
             ? this.renderOptionListItem()
-            : this.renderActionListItem(), index.h("slot", { key: '96fa6990b1c94932a8aa9fbea46a031721cc0048', onSlotchange: this.onSlotChange }))));
+            : this.renderActionListItem(), index.h("slot", { key: 'aead68231f618a4d562936a8dfb3aa2d0a3e9d4e', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "expanded": ["watchExpanded"]
+        "expanded": [{
+                "watchExpanded": 0
+            }]
     }; }
 };
-SwirlMenuItem.style = swirlMenuItemCss;
+SwirlMenuItem.style = swirlMenuItemCss();
 
 exports.swirl_menu_item = SwirlMenuItem;

package/dist/cjs/swirl-menu.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 
-const swirlMenuCss = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{background-color:var(--s-surface-overlay-default);}";
+const swirlMenuCss = () => `:host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-1);padding:var(--s-space-4)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{background-color:var(--s-surface-overlay-default);}`;
 
 const SwirlMenu = class {
     constructor(hostRef) {
@@ -295,7 +295,7 @@ const SwirlMenu = class {
             "menu--mobile": this.mobile,
             "menu--root": isTopLevelMenu,
         });
-        return (index.h(index.Host, { key: 'e1c6caf06e858c3a1f7192b59a9ecde8e632f7c9' }, index.h("div", { key: '64ea408d1ade29f207c5d14a2a1845dabcb30e5e', class: className }, this.mobile && isTopLevelMenu && (index.h("div", { key: '5980965bfad45b148f42bf54239417ab0e68efc8', class: "menu__mobile-header" }, this.activeLevel === 0 && (index.h("swirl-button", { key: 'd79ae0bdcf00c191e96704faf42f95d0beba917e', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (index.h("swirl-button", { key: 'bd478d3a4c68ddc8cf6349f8132d95a384721139', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), index.h("span", { key: '907d0c18125e10bfbff078395c2b56595e26b5ff', class: "menu__title", id: "menu-title" }, index.h("swirl-heading", { key: '32cf186494fce08cb5d46a06d3ab4cf391d28ef2', align: "center", as: "span", level: 4, text: this.label, truncate: true })), index.h("swirl-button", { key: 'c90984e6cd1ccdbcb5002c92f51b42dbca7b6048', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), index.h("div", { key: 'e5599b93b24f9e2612564649a895f9e34cdbd10f', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
+        return (index.h(index.Host, { key: '42edf6e81c9f614bdf85ce5edde5b73b0035b751' }, index.h("div", { key: 'b0746f43cad0c1e853806493f82171b68cb56679', class: className }, this.mobile && isTopLevelMenu && (index.h("div", { key: '701a34e9b99e00a90a7867689c6e8d762ac50560', class: "menu__mobile-header" }, this.activeLevel === 0 && (index.h("swirl-button", { key: '65e8e0422bc7e0855cb4c380dfd661a836eed1b2', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" })), this.activeLevel > 0 && (index.h("swirl-button", { key: 'a2d478169dc0dd43e128fadd8a5bb9355caf7464', hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" })), index.h("span", { key: '7aac16525e44f45e2ce1f307ad3a0164bacebe6d', class: "menu__title", id: "menu-title" }, index.h("swirl-heading", { key: '466eafe63df31807e389486c3561691454bbbfe0', align: "center", as: "span", level: 4, text: this.label, truncate: true })), index.h("swirl-button", { key: '186c68f2c67f7f67906c97db412ded234e30aeeb', class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone }))), index.h("div", { key: '6e71cf04d367f8a438adc3c65e7e56ff7eea1d8a', "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (el) => (this.menuContainer = el), role: role, style: !this.mobile && this.level > 0
                 ? {
                     top: Boolean(this.position) ? `${this.position?.y}px` : "",
                     left: Boolean(this.position) ? `${this.position?.x}px` : "",
@@ -307,14 +307,18 @@ const SwirlMenu = class {
                             ? `calc(-100% * ${this.activeLevel})`
                             : "100%",
                     }
-                    : undefined }, index.h("slot", { key: '83f1fde86d53cf4f036081aea9b4fa5c4ff278f1' })))));
+                    : undefined }, index.h("slot", { key: '401ab7048cc220a4db3f587193162ba4c3349231' })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "active": ["watchActive"],
-        "value": ["watchValue"]
+        "active": [{
+                "watchActive": 0
+            }],
+        "value": [{
+                "watchValue": 0
+            }]
     }; }
 };
-SwirlMenu.style = swirlMenuCss;
+SwirlMenu.style = swirlMenuCss();
 
 exports.swirl_menu = SwirlMenu;

package/dist/cjs/swirl-modal-shell.cjs.entry.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 var bodyScrollLock_esm = require('./bodyScrollLock.esm-DMDeaEpJ.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
-const swirlModalShellCss = ".sc-swirl-modal-shell-h{display:block}.sc-swirl-modal-shell-h *.sc-swirl-modal-shell{box-sizing:border-box}.modal-shell.sc-swirl-modal-shell{position:fixed;inset:0;z-index:var(--s-z-40);border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible;background:transparent}.modal-shell.sc-swirl-modal-shell::backdrop{display:none}.modal-shell__backdrop.sc-swirl-modal-shell{position:fixed;inset:0;z-index:1;background-color:var(--s-translucent-medium-default);opacity:1;-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));transition:opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out}.modal-shell__scroll-container.sc-swirl-modal-shell{overflow-y:auto;position:fixed;inset:0;z-index:2;display:grid;padding:var(--s-space-24);justify-content:center;align-items:center}.modal-shell__scroll-container__content.sc-swirl-modal-shell{opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,\n    transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell__close-button.sc-swirl-modal-shell{position:fixed;top:var(--s-space-16);right:var(--s-space-16);z-index:3;opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,\n    transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__backdrop.sc-swirl-modal-shell{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__scroll-container__content.sc-swirl-modal-shell,.modal-shell--closing.sc-swirl-modal-shell .modal-shell__close-button.sc-swirl-modal-shell{opacity:0;transform:scale(1.1)}";
+const swirlModalShellCss = () => `.sc-swirl-modal-shell-h{display:block}.sc-swirl-modal-shell-h *.sc-swirl-modal-shell{box-sizing:border-box}.modal-shell.sc-swirl-modal-shell{position:fixed;inset:0;z-index:var(--s-z-40);border:none;padding:0;width:100%;height:100%;max-width:none;max-height:none;overflow:visible;background:transparent}.modal-shell.sc-swirl-modal-shell::backdrop{display:none}.modal-shell__backdrop.sc-swirl-modal-shell{position:fixed;inset:0;z-index:1;background-color:var(--s-translucent-medium-default);opacity:1;-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));transition:opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;transition:opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out}.modal-shell__scroll-container.sc-swirl-modal-shell{overflow-y:auto;position:fixed;inset:0;z-index:2;display:grid;padding:var(--s-space-24);justify-content:center;align-items:center}.modal-shell__scroll-container__content.sc-swirl-modal-shell{opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell__close-button.sc-swirl-modal-shell{position:fixed;top:var(--s-space-16);right:var(--s-space-16);z-index:3;opacity:1;transform:scale(1);transition:opacity 0.2s ease-out,     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__backdrop.sc-swirl-modal-shell{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}.modal-shell--closing.sc-swirl-modal-shell .modal-shell__scroll-container__content.sc-swirl-modal-shell,.modal-shell--closing.sc-swirl-modal-shell .modal-shell__close-button.sc-swirl-modal-shell{opacity:0;transform:scale(1.1)}`;
 
 const ANIMATION_DURATION_MS = 300;
 const SwirlModalShell = class {
@@ -59,6 +59,6 @@ const SwirlModalShell = class {
         return (index.h(index.Host, { key: 'd11bfd3eb940c5557a17658eec4767c19ccacabb' }, index.h("dialog", { key: 'ed411a1318726797cf33d42ec238a76044781861', "aria-label": this.label, class: className, onClose: this.onDialogClose, onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'b4b90a96b4491429b51e0efcb3b7af18cd34026b', class: "modal-shell__backdrop" }), index.h("div", { key: '07c8a6f595af8ff47a43209808ce14ae512ea838', class: "modal-shell__scroll-container", onClick: this.onClose }, index.h("div", { key: '59806c0b8a9b85ceebc63deb5692f62b51ba16fb', class: "modal-shell__scroll-container__content", onClick: this.onContentClick }, index.h("slot", { key: 'a12073a8f95f12adcf3f7bafb6c8f0d0dd2ae022' }))), index.h("swirl-button", { key: '95fc7d5440a8d7dbde792ab1d710d2749ffb38ba', class: "modal-shell__close-button", icon: "<swirl-icon-close color='strong'></swirl-icon-close>", label: this.closeButtonLabel, hideLabel: true, variant: "translucent", onClick: this.onClose }))));
     }
 };
-SwirlModalShell.style = swirlModalShellCss;
+SwirlModalShell.style = swirlModalShellCss();
 
 exports.swirl_modal_shell = SwirlModalShell;

package/dist/cjs/swirl-modal.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 var bodyScrollLock_esm = require('./bodyScrollLock.esm-DMDeaEpJ.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var index_esm = require('./index.esm-D5HbQDBa.js');
 
-const swirlModalCss = ":host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(\n    --s-surface-overlay-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-overlay-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-overlay-pressed\n  );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)\n    var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)\n    var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) +\n        var(--swirl-modal-max-secondary-content-width)\n    )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)\n    )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,\n    max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(\n      var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +\n        var(--swirl-modal-max-secondary-content-width)\n    )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}";
+const swirlModalCss = () => `:host{display:block}:host *{box-sizing:border-box}.modal{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);--swirl-resource-list-item-background-default:var(     --s-surface-overlay-default   );--swirl-resource-list-item-background-hovered:var(     --s-surface-overlay-hovered   );--swirl-resource-list-item-background-pressed:var(     --s-surface-overlay-pressed   );--swirl-modal-height:auto;--swirl-modal-max-height:90vh;--swirl-modal-view-height:100vh;--swirl-modal-header-height:3.75rem;--swirl-modal-max-width:40rem;--swirl-modal-sidebar-width:25rem;--swirl-modal-max-secondary-content-width:24rem;--swirl-modal-footer-padding-small:var(--s-space-12) var(--s-space-16)     var(--s-space-12) var(--s-space-16);--swirl-modal-footer-padding-large:var(--s-space-16) var(--s-space-24)     var(--s-space-16) var(--s-space-24)}@supports (height: 100dvh){.modal{--swirl-modal-max-height:90dvh;--swirl-modal-view-height:100dvh}}.modal{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;height:var(--swirl-modal-view-height);inset:0;border:none;padding:0;width:auto;background:transparent;max-width:none;max-height:none;overflow:visible}.modal::backdrop{display:none}.modal:not([open]){display:none}.modal--variant-default.modal--closing{animation:0.15s modal-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-default.modal--closing{animation:none}}.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:0.15s modal-backdrop-fade-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__backdrop{animation:none}}.modal--variant-default:not(.modal--closing) .modal__body{animation:0.15s modal-scale-in}@media (prefers-reduced-motion){.modal--variant-default:not(.modal--closing) .modal__body{animation:none}}.modal--variant-drawer{justify-content:end;align-items:stretch}.modal--variant-drawer.modal--closing{animation:0.15s modal-drawer-slide-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.modal--variant-drawer.modal--closing{animation:none}}@media (min-width: 768px){.modal--variant-drawer.modal--hide-label .modal__header-bar{height:auto;padding-top:var(--s-space-4);padding-bottom:var(--s-space-4)}}.modal--variant-drawer .modal__backdrop{background-color:transparent;animation:none}.modal--variant-drawer .modal__body{height:100%;max-height:none;border-radius:0;animation:0.15s modal-drawer-slide-in;box-shadow:var(--s-shadow-level-3)}@media (prefers-reduced-motion){.modal--variant-drawer .modal__body{animation:none}}.modal--variant-drawer .modal__header-bar{background-color:var(--s-surface-overlay-default)}.modal--variant-drawer .modal__header-bar .modal__close-button{margin-left:calc(-1 * var(--s-space-8))}.modal--variant-drawer .modal__header-bar .modal__fullscreen-button{display:none}@media (min-width: 768px){.modal--variant-drawer .modal__header-bar{flex-direction:row}}@media (min-width: 768px){.modal--variant-drawer.modal--padded .modal__content{padding-top:var(--s-space-8)}}.modal--padded .modal__content{padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-24);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal--padded .modal__content{padding-top:0;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:var(--s-space-24)}}@media (min-width: 768px){.modal--scrollable .modal__content{padding-bottom:0}}.modal--scrollable:not(.modal--scrolled-down).modal--has-custom-footer .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--scrollable:not(.modal--scrolled-down):not(.modal--has-custom-footer) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-custom-header .modal__custom-header{display:block}.modal--has-custom-header .modal__content{padding-top:var(--s-space-16)}.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-custom-footer .modal__custom-footer{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-header-tools .modal__header{border-bottom-color:transparent}.modal--has-header-tools .modal__header-tools{display:block}.modal--has-secondary-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal--has-secondary-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) +         var(--swirl-modal-max-secondary-content-width)     )}.modal--has-secondary-content:not(.modal--has-header-tools):not(.modal--hide-secondary-content-borders) .modal__header{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-header-tools:not(.modal--hide-secondary-content-borders) .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--has-secondary-content.modal--has-custom-footer:not(.modal--hide-secondary-content-borders) .modal__custom-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal--has-secondary-content:not(.modal--has-custom-footer):not(.modal--hide-secondary-content-borders) .modal__controls{border-top:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 992px){.modal--has-secondary-content .modal__header-tools,.modal--has-secondary-content .modal__content{padding-right:0}}.modal--has-secondary-content .modal__primary-content{overflow:visible;max-height:60%;flex-basis:auto}@media (min-width: 992px){.modal--has-secondary-content .modal__primary-content{max-width:calc(100% - var(--swirl-modal-max-secondary-content-width));max-height:none;flex-basis:calc(100% - var(--swirl-modal-max-secondary-content-width))}}.modal--has-secondary-content .modal__secondary-content{display:block}.modal__main-content{display:flex;flex-direction:column;overflow-y:auto;flex-grow:1}.modal__sidebar{display:none}.modal.modal--has-sidebar-content.modal.modal--variant-default:not(.modal--fullscreen) .modal__body,.modal.modal--has-sidebar-content.modal.modal--variant-drawer:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width)     )}@media (min-width: 768px){.modal.modal--has-sidebar-content .modal__sidebar{display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;width:var(--swirl-modal-sidebar-width);border-right:var(--s-border-width-default) solid var(--s-border-default)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header{border-bottom:var(--s-border-width-default) solid transparent;display:flex;align-items:center;gap:var(--s-space-8);padding-right:var(--s-space-24);padding-left:var(--s-space-24)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header.modal__sidebar-header--has-close-button{padding-left:var(--s-space-16)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-header .modal__sidebar-heading{display:flex;align-items:center;height:var(--swirl-modal-header-height)}.modal.modal--has-sidebar-content .modal__sidebar .modal__sidebar-content{display:block;flex-grow:1;overflow-y:auto}}@media (min-width: 992px){.modal.modal--has-sidebar-content .modal__primary-content{flex-basis:calc(100% - 20rem)}}.modal--sidebar-padded .modal__sidebar .modal__sidebar-content{padding-left:var(--s-space-24);padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.modal--scrolled:not(.modal--hide-scrolled-header-border):not(.modal--has-header-tools) .modal__header{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border).modal--has-header-tools .modal__header-tools{border-bottom-color:var(--s-border-default)}.modal--scrolled:not(.modal--hide-scrolled-header-border) .modal__custom-header{border-bottom-color:var(--s-border-default)}}@media (min-width: 768px){.modal--sidebar-scrolled .modal__sidebar .modal__sidebar-header{border-bottom-color:var(--s-border-default)}}.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-small)}@media (min-width: 768px){.modal--has-sidebar-footer.modal--sidebar-footer-padded .modal__sidebar-footer{padding:var(--swirl-modal-footer-padding-large)}}@media (min-width: 768px){.modal--sidebar-scrollable .modal__sidebar-content{padding-bottom:0 !important}}.modal--sidebar-scrollable:not(.modal--sidebar-scrolled-down).modal--has-sidebar-footer .modal__sidebar-footer{border-top:var(--s-border-width-default) solid var(--s-border-default)}.modal__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.modal__body{--swirl-card-background-default:var(--s-surface-overlay-default);--swirl-card-background-hovered:var(--s-surface-overlay-hovered);--swirl-card-background-pressed:var(--s-surface-overlay-pressed);--swirl-accordion-item-toggle-default:var(--s-surface-overlay-default);--swirl-accordion-item-toggle-hovered:var(--s-surface-overlay-hovered);--swirl-accordion-item-toggle-pressed:var(--s-surface-overlay-pressed);position:relative;z-index:var(--s-z-40);display:flex;flex-direction:row;overflow:hidden;width:100vw;max-width:100vw;height:var(--swirl-modal-view-height);max-height:var(--swirl-modal-view-height);background-color:var(--s-surface-overlay-default)}.modal--fullscreen .modal__body{min-height:var(--swirl-modal-view-height)}.modal--fullscreen-transitioning .modal__body{transition:width 0.15s ease-out, max-width 0.15s ease-out,     max-height 0.15s ease-out, min-height 0.15s ease-out}@media (min-width: 768px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{width:90vw;max-width:var(--swirl-modal-max-width);max-height:var(--swirl-modal-max-height);min-height:0;border-radius:var(--s-border-radius-base);box-shadow:var(--s-shadow-level-3)}}@media (min-width: 992px){.modal.modal--variant-default:not(.modal--fullscreen) .modal__body{height:var(--swirl-modal-height)}}.modal__header{border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header{border-bottom:var(--s-border-width-default) solid transparent}}.modal__header-bar{display:flex;height:3.5rem;padding-top:var(--s-space-8);padding-right:var(--s-space-16);padding-bottom:var(--s-space-8);padding-left:var(--s-space-16);flex-shrink:0;align-items:center;gap:var(--s-space-8)}@media (min-width: 768px){.modal__header-bar{height:var(--swirl-modal-header-height);padding-top:var(--s-space-12);padding-right:var(--s-space-24);padding-bottom:var(--s-space-12);padding-left:var(--s-space-24);flex-direction:row-reverse}}.modal__fullscreen-button{display:none}@media (min-width: 768px){.modal__fullscreen-button{display:block}}.modal__header-tools{display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__header-tools{padding-right:var(--s-space-24);padding-left:var(--s-space-24);border-bottom-color:transparent}}.modal__custom-header{display:none;flex-shrink:0;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (min-width: 768px){.modal__custom-header{border-bottom-color:transparent}}.modal__heading{overflow:hidden}.modal__heading .heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.modal__content-container{display:flex;overflow:hidden;flex-grow:1;flex-direction:column;gap:var(--s-space-24)}@media (min-width: 992px){.modal__content-container{flex-direction:row}}.modal__primary-content{display:flex;overflow:hidden;overflow-y:auto;min-width:0;flex-basis:100%;flex-grow:1;flex-direction:column}.modal__content{overflow-x:hidden;overflow-y:auto;height:100%}.modal__content ::slotted(*){margin:0}.modal__secondary-content{display:none;overflow:visible;overflow-x:hidden;overflow-y:auto;min-width:0;max-width:none;max-height:40%;padding-right:var(--s-space-16);padding-left:var(--s-space-16)}@media (min-width: 768px){.modal__secondary-content{padding-left:var(--s-space-24)}}@media (min-width: 992px){.modal__secondary-content{overflow-x:hidden;overflow-y:auto;max-width:var(--swirl-modal-max-secondary-content-width);max-height:none;padding-right:var(--s-space-24);padding-bottom:var(--s-space-16);padding-left:0;flex-basis:50%;flex-grow:1}}.modal__custom-footer{flex-shrink:0}.modal__controls{display:flex;padding:var(--swirl-modal-footer-padding-small);flex-shrink:0;justify-content:flex-end}@media (min-width: 768px){.modal__controls{padding:var(--swirl-modal-footer-padding-large)}}.modal--has-secondary-content.modal--has-sidebar-content:not(.modal--fullscreen) .modal__body{max-width:calc(       var(--swirl-modal-max-width) + var(--swirl-modal-sidebar-width) +         var(--swirl-modal-max-secondary-content-width)     )}@keyframes modal-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes modal-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes modal-fade-out{from{opacity:1}to{opacity:0}}@keyframes modal-drawer-slide-in{from{transform:translate3d(100%, 0, 0)}to{transform:translate3d(0, 0, 0)}}@keyframes modal-drawer-slide-out{from{transform:translate3d(0, 0, 0)}to{transform:translate3d(100%, 0, 0)}}`;
 
 const SwirlModal = class {
     constructor(hostRef) {
@@ -281,29 +281,29 @@ const SwirlModal = class {
             "modal--sidebar-scrolled-down": this.sidebarScrolledDown,
             "modal--sidebar-scrollable": this.sidebarScrollable,
         });
-        return (index.h(index.Host, { key: '61ffab6a33f8fee6e6a12c4805d94ac8a900dc77' }, index.h("dialog", { key: '13069fa5bfbd16f34662272f82a30de0aa402df7', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '655377a1c2e116d3ad42041d8b38001fd50ad505', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '8bab4ab4bebe63c79a8e30b5cb969215ef695dd4', class: "modal__body", part: "modal__body", style: !this.isFullscreen
+        return (index.h(index.Host, { key: '4c129470481d438dfb76e1d84b1430288f3c4e95' }, index.h("dialog", { key: '58036b99b452c917283874bd4196e3c8dfef3bf5', "aria-label": this.label, class: className, onClose: this.onClose, onKeyDown: this.onKeyDown, onToggle: this.onToggle, ref: (el) => (this.modalEl = el) }, index.h("div", { key: '870ce3427d01b4f3da800ab453bd95af66ac12ab', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '024700cf69e947a5e7c21ced26cd117153b3b009', class: "modal__body", part: "modal__body", style: !this.isFullscreen
                 ? {
                     "--swirl-modal-max-height": this.maxHeight,
                     "--swirl-modal-height": this.height,
                     minHeight: this.minHeight,
                     maxWidth: this.maxWidth,
                 }
-                : {} }, index.h("aside", { key: 'e73a7003c0445e6014d99a843f2a1024fa5dfabd', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '2f5caf3be132b3712565fc669b31ad179659f82f', class: index$1.classnames("modal__sidebar-header", {
+                : {} }, index.h("aside", { key: '5f4e394f2801182e4b53a07c5a095b4409deff60', class: "modal__sidebar" }, this.sidebarLabel && (index.h("header", { key: '7a3d862bf850df19f9822b97b26226bd85b758b9', class: index$1.classnames("modal__sidebar-header", {
                 "modal__sidebar-header--has-close-button": this.hasSidebarCloseButton,
-            }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: '7f80ac736fff2c8c23154b69b4f7ec3849767fc8', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: '4d7f033bc87f4c1695bdd727a2879d641831403b', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: 'ffaeb97210b589d67d7d3c7bf4e7012dc88ac2be', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: 'ec46ede2b5b15e2b875dc79c09f3f20f149bb7fb', name: "sidebar-content" })), index.h("div", { key: '0b38548f46422f3bae761c1d96de83e8b26ff7fb', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '22a1e5ce8b7e2e9ffc13cc47f94980e2ba167a5a', name: "sidebar-footer" }))), index.h("div", { key: 'e3832e0c0762d3dbd783947c085d0d71d8132af8', class: "modal__main-content" }, index.h("header", { key: '579f410f5f5ec72b4417133cec992d63805e560b', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: '01b27a350d01240b31f7324987f9be54a1ee5ce7', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '05bd390544271123a4a88779ad0517d7d3a91087', class: "modal__header" }, index.h("div", { key: '323781d228352b5e255b12390f1e805f576df850', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'c6a0ed8bc4570ffb033d02a192dc98a5b2146f2d', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            }) }, this.hasSidebarCloseButton && (index.h("swirl-button", { key: 'bf5f9a9d3df7066bef9e7d40e4afc07df0fd5466', hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick })), index.h("swirl-heading", { key: 'e2064c656033dd3f05f7d3c2d350ad127c1b93d5', as: "h3", class: "modal__sidebar-heading", level: 5, text: this.sidebarLabel }))), index.h("div", { key: 'cfaf71cd9c8ebaf1233221be79e8af04e382063e', class: "modal__sidebar-content", onScroll: this.determineSidebarScrollStatus, ref: (el) => (this.sidebarScrollContainer = el) }, index.h("slot", { key: 'fa8eb76cba3dca00294e17e3c80245bc032677d5', name: "sidebar-content" })), index.h("div", { key: '589bbd806f6bc6824cb08b1537f0c225fbe1caa5', class: "modal__sidebar-footer", part: "modal__sidebar-footer" }, index.h("slot", { key: '9c813673f2924048c2237e2d859e0da2608ff93b', name: "sidebar-footer" }))), index.h("div", { key: 'd1b26bd208b902608cf8d32db654aa931b9faf01', class: "modal__main-content" }, index.h("header", { key: '03123b17392e485f429f2519c55f128653e5f573', class: "modal__custom-header", part: "modal__custom-header" }, index.h("slot", { key: 'ade0fef0ba570a8ef2bf0931707822b0a456874e', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '1d7c34b9ecddd879b644374016c046a148a7b3b2', class: "modal__header" }, index.h("div", { key: '14e7bc70bc984296dda21fb336cd91256cb82331', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'fd6ff870b47d1cd08581a98a313887609e442809', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'b7e7ce93192ef096f25cf4f5e4bc8f281f8c69af', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), this.showFullscreenButton && (index.h("swirl-button", { key: 'f6b03f1e05c25b8e5809d52caf402ee985730241', class: "modal__fullscreen-button", hideLabel: true, icon: this.isFullscreen
                 ? "<swirl-icon-close-fullscreen></swirl-icon-close-fullscreen>"
                 : "<swirl-icon-open-in-full></swirl-icon-open-in-full>", label: this.isFullscreen
                 ? this.fullscreenDisableButtonLabel
-                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'efb34f855b39a80247923792c4222bac3e0858ef', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '152770903da15057110292671f1c065eb666c18e', class: "modal__content-container", style: {
+                : this.fullscreenEnableButtonLabel, onClick: this.onFullscreenButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'ba18a30318b9383cd933f3d9b860429c3675ba34', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '16207301ca2cc9cebbe25a8cdf20adf1a8e314c5', class: "modal__content-container", style: {
                 gap: this.contentGap
                     ? `var(--s-space-${this.contentGap})`
                     : undefined,
-            } }, index.h("div", { key: 'bbc24ff889924ae2aeb3c86582c0065713991b0f', class: "modal__primary-content", style: {
+            } }, index.h("div", { key: '0447007b3f6da633c993392ff98ad8f44b3ea870', class: "modal__primary-content", style: {
                 maxWidth: this.primaryContentMaxWidth,
                 flex: this.primaryContentFlex,
-            } }, index.h("div", { key: '7ba9d08b64a0dbf1f53a916546fbd0c7946520dd', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '355a7aa17905eeb678f1cd1c187cf5cad56bc415', name: "header-tools" })), index.h("div", { key: '29b5dc1de4c6781241dffb39e08d166dc79d20c9', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '645ad81ca4d11aa3c73fbac26b3ce2db55ea4be9' }))), index.h("div", { key: '1fe66b8b37ec68fb76562068cb7bb79321d72058', class: "modal__secondary-content", style: {
+            } }, index.h("div", { key: 'e66e61f2ba8c67ca2fe5795680e7e3cea98eece5', class: "modal__header-tools", part: "modal__header-tools" }, index.h("slot", { key: '99c78e99e085ba12e266fa6881569821fa8a2911', name: "header-tools" })), index.h("div", { key: 'd80856621970d55210fb9f184bd478373d731e27', class: "modal__content", onScroll: this.determineMainScrollStatus, part: "modal__content", ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '126ca7163ad19321d0f349911f5b72c05e61773b' }))), index.h("div", { key: '697bd3e7d6f63b4dbdbe7337a9a19729c651ad28', class: "modal__secondary-content", style: {
                 maxWidth: this.secondaryContentMaxWidth,
                 flex: this.secondaryContentFlex,
                 padding: Boolean(this.secondaryContentPadding)
@@ -321,10 +321,10 @@ const SwirlModal = class {
                 paddingInlineStart: Boolean(this.secondaryContentPaddingInlineStart)
                     ? `var(--s-space-${this.secondaryContentPaddingInlineStart})`
                     : undefined,
-            } }, index.h("slot", { key: '02f930518ef96d25a2fc21cb9352b82f4522522d', name: "secondary-content" }))), index.h("div", { key: '16877b33a20910de6cfa4338b8469318bc848893', class: "modal__custom-footer" }, index.h("slot", { key: '2d3d85fe952d8ed341d3f5c6aa96ce707bd73df2', name: "custom-footer" })), showControls && (index.h("footer", { key: '50972e539deb065a875b35024f26220d9524a0f9', class: "modal__controls" }, index.h("swirl-button-group", { key: '9f444d541828d0c1eb1b087c93b0af9c0de5043d', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '528efbc6b81a46725b8db9fcd955301e55599b3f', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'b4a696203e7e244804e7fcaffce63cd814484cfe', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
+            } }, index.h("slot", { key: '464802826308dc8e330c8547d7d96c3ffdc5ca74', name: "secondary-content" }))), index.h("div", { key: '5441ae7ec9fe95fdc5fccfaa4024a055e2925f3f', class: "modal__custom-footer" }, index.h("slot", { key: '0e595122140db963df9f1018aca1a920c6d777be', name: "custom-footer" })), showControls && (index.h("footer", { key: '0ab71291c1720c3d321baa681828c45f52575529', class: "modal__controls" }, index.h("swirl-button-group", { key: '622c0921ff1e043b15f8f6e70765757ab56b8b91', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '3a807ff22cd43e40e28dab637a43d94b921bb14d', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'e62111e628bd608cb202050f89cd139b32a4405f', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" }))))))))));
     }
     get el() { return index.getElement(this); }
 };
-SwirlModal.style = swirlModalCss;
+SwirlModal.style = swirlModalCss();
 
 exports.swirl_modal = SwirlModal;

package/dist/cjs/swirl-option-list-section.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 
-const swirlOptionListSectionCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.option-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){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+const swirlOptionListSectionCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.option-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){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}`;
 
 const SwirlOptionListSection = class {
     constructor(hostRef) {
@@ -15,6 +15,6 @@ const SwirlOptionListSection = class {
         return (index.h(index.Host, { key: 'f5fa128939f7117f9e1449adbe9d58a772e3b143' }, this.hasSeparator && (index.h("swirl-separator", { key: 'ade58ed9da5c1df6eb2e440a749a71f17878b740', spacing: this.separatorSpacing })), index.h("div", { key: '382932e4626f0243c76d1094b9eaa336cdbcb887', "aria-labelledby": "label", class: "option-list-section", role: "group" }, index.h("span", { key: 'd3fbce7276e20208ff66af80aed54f5b457f8c18', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), index.h("swirl-stack", { key: '6e8e34474f10305aece14119644ba85b2b22ed6b', spacing: this.spacing, align: "stretch" }, index.h("slot", { key: '3b38bbd12bd9314e5a579102ea4bb1a79c4d3fd5' })))));
     }
 };
-SwirlOptionListSection.style = swirlOptionListSectionCss;
+SwirlOptionListSection.style = swirlOptionListSectionCss();
 
 exports.swirl_option_list_section = SwirlOptionListSection;

package/dist/cjs/swirl-option-list_2.cjs.entry.js

@@ -1,13 +1,12 @@
 'use strict';
 
-var index = require('./index-BH-xCNGW.js');
+var index = require('./index-CnaJlT6Y.js');
 var sortable_esm = require('./sortable.esm-B1ZNencO.js');
 var utils = require('./utils-UfZG-xPD.js');
 var v4 = require('./v4-Bq3ldsQe.js');
 var index$1 = require('./index-DcAhLZUH.js');
-var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 
-const swirlOptionListCss = ".sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}";
+const swirlOptionListCss = () => `.sc-swirl-option-list-h{display:block}.sc-swirl-option-list-h *.sc-swirl-option-list{box-sizing:border-box}`;
 
 const SwirlOptionList = class {
     constructor(hostRef) {
@@ -431,86 +430,67 @@ const SwirlOptionList = class {
         const ariaMultiselectable = this.multiSelect ? "true" : undefined;
         const tabIndex = Boolean(this.dragging) ? 0 : undefined;
         const showSelectAll = this.multiSelect && this.showSelectAll;
-        return (index.h(index.Host, { key: '6a5f729782fe0854995bb1a18a5ebb5c5c4f6f03' }, index.h("swirl-visually-hidden", { key: 'e2ea8ccbfc3153f1482913043838557e62fab592', role: "alert" }, this.assistiveText), index.h("div", { key: '21e331cfa9e281b7564d516241d6dfc528a2edac', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (index.h("swirl-option-list-item", { key: '2980aa38ed13642b25358d87e253b49e48a256fe', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), index.h("slot", { key: '1fe061b71ba1250d16148693a6f09ea8f3a99eac', onSlotchange: this.setSectionSeparator }))));
+        return (index.h(index.Host, { key: 'aae5ddbb4d5a665fc814ecb49670e4abd748661d' }, index.h("swirl-visually-hidden", { key: '124178cf6546bdf130fe5afea974bea78ad82d5b', role: "alert" }, this.assistiveText), index.h("div", { key: '5ac2949159391cd820e319ca8c98436751b64a47', "aria-label": this.label, "aria-multiselectable": ariaMultiselectable, class: "option-list", id: this.optionListId, onClick: this.onClick, onKeyDown: this.onKeyDown, ref: (el) => (this.listboxEl = el), role: "listbox", tabIndex: tabIndex }, showSelectAll && (index.h("swirl-option-list-item", { key: '47e9b7841b5b086fca41da8cb6ce456b34f435bf', ref: (el) => (this.selectAllEl = el), label: this.selectAllLabel, disabled: this.disabled, context: "multi-select", selected: this.selectAllState === true, indeterminate: this.selectAllState === "indeterminate", value: this.selectAllValue })), index.h("slot", { key: 'c6b68a0e89ff5a483c3c634ff17d94138a3d5534', onSlotchange: this.setSectionSeparator }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "allowDrag": ["watchAllowDrag"],
-        "disabled": ["watchDisabled"],
-        "multiSelect": ["watchMultiSelect"],
-        "value": ["watchValue"]
+        "allowDrag": [{
+                "watchAllowDrag": 0
+            }],
+        "disabled": [{
+                "watchDisabled": 0
+            }],
+        "multiSelect": [{
+                "watchMultiSelect": 0
+            }],
+        "value": [{
+                "watchValue": 0
+            }]
     }; }
 };
-SwirlOptionList.style = swirlOptionListCss;
+SwirlOptionList.style = swirlOptionListCss();
 
-const swirlOptionListItemCss = ".sc-swirl-option-list-item-h{position:relative;display:block;width:100%}.sc-swirl-option-list-item-h *.sc-swirl-option-list-item{box-sizing:border-box}.option-list-item--drag.sc-swirl-option-list-item-h{border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-medium-pressed)}.option-list-item.sc-swirl-option-list-item{display:inline-flex;position:relative;width:100%;min-width:15rem;min-height:3rem;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--s-border-radius-sm);align-items:center;background-color:transparent;cursor:pointer;gap:var(--s-space-12)}.option-list-item.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-hovered)}.option-list-item.sc-swirl-option-list-item:active:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item.sc-swirl-option-list-item:focus{outline:none}.option-list-item.sc-swirl-option-list-item:focus-visible{background-color:var(--s-translucent-low-hovered);outline-color:var(--s-focus-default);outline-style:solid;outline-width:0.125rem;z-index:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item.sc-swirl-option-list-item{min-height:0;padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-8)}}.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1.5rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item--draggable.sc-swirl-option-list-item .option-list-item__label-container.sc-swirl-option-list-item{padding-right:calc(var(--s-space-16) + 1rem)}}.option-list-item--dragging.sc-swirl-option-list-item{z-index:1;border-radius:var(--s-border-radius-s);background-color:var(--s-translucent-low-pressed);box-shadow:0 0.0625rem 0.125rem rgba(25, 26, 28, 0.08),\n    0 0.25rem 2rem rgba(25, 26, 28, 0.16)}.option-list-item--dragging.sc-swirl-option-list-item:hover:not(.option-list-item--disabled){background-color:var(--s-translucent-low-pressed)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item{color:var(--s-icon-highlight)}.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item,.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.option-list-item--disabled.sc-swirl-option-list-item{cursor:default}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{background-color:var(--s-icon-disabled)}.option-list-item--disabled.option-list-item--selected.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-text-on-status)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__label.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__selection-icon.sc-swirl-option-list-item,.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-icon.sc-swirl-option-list-item{color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);background-color:var(--s-surface-overlay-default)}.option-list-item--disabled.option-list-item--indeterminate.sc-swirl-option-list-item .option-list-item__checkbox-box.sc-swirl-option-list-item{border-color:var(--s-icon-disabled);color:var(--s-text-on-status);background-color:var(--s-icon-disabled)}.option-list-item--disabled.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{filter:grayscale(100%)}.option-list-item--show-avatar.sc-swirl-option-list-item .option-list-item__avatar.sc-swirl-option-list-item{display:inline-flex}.option-list-item__label-container.sc-swirl-option-list-item{display:flex;flex-grow:1;flex-direction:column;overflow:hidden}.option-list-item__label-container.sc-swirl-option-list-item>*.sc-swirl-option-list-item{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.option-list-item__label.sc-swirl-option-list-item{color:var(--s-text-default);font-size:var(--s-font-size-base);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){.option-list-item__label.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__description.sc-swirl-option-list-item{color:var(--s-text-subdued);font-size:var(--s-font-size-base);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){.option-list-item__description.sc-swirl-option-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.option-list-item__avatar.sc-swirl-option-list-item{display:none;flex-shrink:0}.option-list-item__icon.sc-swirl-option-list-item{display:inline-flex;position:relative;width:1.5rem;height:1.5rem;flex-shrink:0;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__icon.sc-swirl-option-list-item{width:1.25rem;height:1.25rem}}.option-list-item__icon-badge.sc-swirl-option-list-item{position:absolute;display:grid;bottom:0;right:0}.option-list-item__selection-icon.sc-swirl-option-list-item{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}.option-list-item__checkbox.sc-swirl-option-list-item{display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-item__checkbox.sc-swirl-option-list-item{width:1.375rem;height:1.375rem}}.option-list-item__checkbox-box.sc-swirl-option-list-item{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.option-list-item__checkbox-icon.sc-swirl-option-list-item{display:inline-flex}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item{position:relative;width:100%;height:100%}.option-list-item__checkbox-indeterminate-icon.sc-swirl-option-list-item:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.option-list-item__drag-handle.sc-swirl-option-list-item{position:absolute;z-index:1;top:50%;right:var(--s-space-4);display:inline-flex;margin:0;padding:0;padding:var(--s-space-8);flex-shrink:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:grab;transform:translateY(-50%)}.option-list-item__drag-handle.sc-swirl-option-list-item:active{cursor:grabbing}.option-list-item__drag-handle.sc-swirl-option-list-item:focus:not(:focus-visible){outline:none}.option-list-item__drag-handle.sc-swirl-option-list-item:focus-visible{outline-color:var(--s-focus-default)}";
+const swirlTagCss = () => `:host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.tag{display:inline-flex;max-width:100%;align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--swirl-tag-background-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;border-style:solid;border-width:var(--s-border-width-default);border-color:transparent}.tag--size-s{padding:var(--s-space-0) var(--s-space-4)}.tag--size-s.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-2))}.tag--size-s .tag__icon{margin-left:calc(-1 * var(--s-space-2))}.tag--size-m{padding:var(--s-space-2) var(--s-space-8)}.tag--icon-position-end .tag__icon{margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);order:2}.tag--hide-label{padding-right:0;padding-left:0}.tag--hide-label.tag--size-s .tag__icon{margin-right:0;margin-left:0}.tag--hide-label .tag__icon{margin-right:var(--s-space-2);margin-left:var(--s-space-2)}.tag--variant-outline{border-color:var(--s-border-strong)}.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--s-icon-info)}.tag--intent-info.tag--variant-outline{border-color:var(--s-border-info)}.tag--intent-info.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-info-default)}.tag--intent-info.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--s-icon-critical)}.tag--intent-critical.tag--variant-outline{border-color:var(--s-border-critical)}.tag--intent-critical.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-critical-default)}.tag--intent-critical.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--s-icon-warning)}.tag--intent-warning.tag--variant-outline{border-color:var(--s-border-warning)}.tag--intent-warning.tag--variant-strong{color:var(--s-text-dark);background-color:var(--s-surface-warning-default)}.tag--intent-warning.tag--variant-strong .tag__removal-button{color:var(--s-icon-dark)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--s-icon-success)}.tag--intent-success.tag--variant-outline{border-color:var(--s-border-success)}.tag--intent-success.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-surface-success-default)}.tag--intent-success.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-special{color:var(--s-decorative-grape-text);background-color:var(--s-decorative-grape-surface-subdued)}.tag--intent-special .tag__removal-button{color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-outline{border-color:var(--s-decorative-grape-text)}.tag--intent-special.tag--variant-strong{color:var(--s-text-on-status);background-color:var(--s-decorative-grape-surface)}.tag--intent-special.tag--variant-strong .tag__removal-button{color:var(--s-icon-on-status)}.tag--intent-translucent{color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default)}.tag--intent-translucent .tag__removal-button{color:var(--s-icon-on-image)}.tag--intent-translucent.tag--variant-outline{border-color:var(--s-text-on-image)}.tag__icon{display:inline-flex;margin-right:var(--s-space-4);margin-left:calc(-1 * var(--s-space-4));flex-shrink:0;order:0}.tag__label{overflow:hidden;min-width:0;white-space:nowrap;text-overflow:ellipsis;order:1}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));margin-left:var(--s-space-4);padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer;flex-shrink:0;order:3}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}`;
 
-const SwirlOptionListItem = class {
+const SwirlTag = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.toggleDrag = index.createEvent(this, "toggleDrag", 7);
-        this.context = "single-select";
-        this.dragHandleDescription = "Press spacebar to toggle grab";
-        this.dragHandleLabel = "Move option";
-        this.selected = false;
-        this.indeterminate = false;
-        this.swirlAriaRole = "option";
-        this.truncateLabel = true;
-        this.iconSize = 24;
-        this.elementId = v4.v4();
-        this.mediaQueryUnsubscribe = () => { };
-        this.onDragHandleKeyDown = (event) => {
-            if (event.code === "Space" || event.code === "Enter") {
-                event.preventDefault();
-                this.toggleDrag.emit(this.el);
-            }
-        };
-        this.onBlur = () => {
-            this.focused = false;
-        };
-        this.onFocus = () => {
-            this.focused = true;
+        this.removeTag = index.createEvent(this, "remove", 7);
+        this.iconPosition = "start";
+        this.intent = "default";
+        this.size = "m";
+        this.removalButtonLabel = "Remove";
+        this.variant = "default";
+        this.onRemove = (event) => {
+            this.removeTag?.emit(event);
         };
     }
     componentDidLoad() {
-        this.mediaQueryUnsubscribe = mediaQuery_service.DesktopMediaQuery.subscribe((isDesktop) => {
-            this.forceIconProps(isDesktop);
-            this.updateIconSize(isDesktop);
-        });
+        this.forceIconProps();
     }
-    disconnectedCallback() {
-        this.mediaQueryUnsubscribe();
+    componentWillLoad() {
+        this.forceVariant();
+    }
+    componentDidRender() {
+        this.forceIconProps();
     }
-    forceIconProps(smallIcon) {
+    forceIconProps() {
         const icon = this.iconEl?.children[0];
-        icon?.setAttribute("size", smallIcon ? "20" : "24");
+        icon?.setAttribute("size", "16");
     }
-    updateIconSize(smallIcon) {
-        this.iconSize = smallIcon ? 20 : 24;
+    forceVariant() {
+        if (Boolean(this.bordered)) {
+            console.warn('[Swirl] The "bordered" prop of swirl-tag is deprecated and will be removed with the next major release. Please use the "variant" prop as "outline" to achieve the same result.');
+            this.variant = "outline";
+        }
     }
     render() {
-        const ariaDisabled = this.disabled ? "true" : undefined;
-        const ariaSelected = this.indeterminate ? undefined : String(this.selected);
-        const showCheckbox = this.context === "multi-select";
-        const showIcon = Boolean(this.icon) && this.context === "single-select";
-        const showIconBadge = Boolean(this.iconBadge);
-        const showAvatar = this.el.querySelector('[slot="avatar"]');
-        const showSelectionIcon = this.selected && this.context === "single-select";
-        const className = index$1.classnames("option-list-item", `option-list-item--context-${this.context}`, {
-            "option-list-item--disabled": this.disabled,
-            "option-list-item--draggable": this.allowDrag,
-            "option-list-item--dragging": this.dragging,
-            "option-list-item--selected": this.selected,
-            "option-list-item--indeterminate": this.indeterminate && !this.selected,
-            "option-list-item--show-avatar": showAvatar,
-        });
-        return (index.h(index.Host, { key: '02293f18ce711fb24b8532295aa9f4d45c566911' }, index.h("div", { key: 'be835093d1496611cef54f6f13181fcbbb7f25aa', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
-                ? `option-list-item-${this.elementId}-description`
-                : undefined, "aria-disabled": ariaDisabled, "aria-labelledby": `option-list-item-${this.elementId}-label`, "aria-selected": this.swirlAriaRole === "option" ? ariaSelected : undefined, class: className, id: `option-list-item-${this.elementId}`, onBlur: this.onBlur, onFocus: this.onFocus, part: "option-list-item", role: this.swirlAriaRole }, showIcon && (index.h("span", { key: 'c7614742890b1fa5fa222abe974dcd4fa8c6143f', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (index.h("span", { key: '2cd49bbbd6e3aa241353d6aeb7ed333f78a4ef41', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), showCheckbox && (index.h("span", { key: '4b7a643317890b7c3654ddf8d383ad0973d711c0', class: "option-list-item__checkbox" }, index.h("span", { key: '161766550f0a605e216462f21be8557dc9fb6270', class: "option-list-item__checkbox-box" }, this.selected && (index.h("swirl-icon-check-strong", { key: '228a74fac821ff162735251eac9f2a362a217781', class: "option-list-item__checkbox-icon", size: 16 })), !this.selected && this.indeterminate && (index.h("span", { key: 'e0d51eb5acf821389633983b5aa3135b1cba0759', class: "option-list-item__checkbox-indeterminate-icon" }))))), index.h("span", { key: '2ba67d47820c475856f4457c28eb001f3a8f9c7b', class: "option-list-item__avatar" }, index.h("slot", { key: '08e0c07e70dc02d14c38da601e8b8f9e460dfa11', name: "avatar" })), index.h("span", { key: 'c1694cef10bbcc06e3a9516f2af83e0b56d899fa', class: "option-list-item__label-container" }, index.h("span", { key: 'a412d45d82f1977841e9dc9289f1c81f34afc370', class: "option-list-item__label", style: { whiteSpace: this.truncateLabel ? "nowrap" : "normal" }, id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (index.h("span", { key: '9efb7fe4f60764c801b837c901cb3a95c5c5ee91', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (index.h("span", { key: '921a292fbe56875283f25066e78724a5ddc10389', class: "option-list-item__selection-icon" }, index.h("swirl-icon-check-small", { key: '6eea4a17b52637f1d486cbf4963f890ce2a2ed8c', size: this.iconSize })))), this.allowDrag && (index.h("button", { key: '36dc3c233448ab5c7dc67c60bb703904e4cb3777', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "option-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, tabIndex: this.focused ? 0 : -1, type: "button" }, index.h("swirl-icon-drag-handle", { key: 'cadc1a84934ba28d6a89854b1c5214e89e2737c9', size: this.iconSize })))));
+        const className = index$1.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 (index.h(index.Host, { key: '31e81a17decfcb629da2aadd602ab3885f28e9d9' }, index.h("span", { key: '37ca68bf8d46b677e457c817185444d4600b622a', class: className, part: "tag" }, this.icon && (index.h("span", { key: '634b28092772482c1a93e3cbfa4d7e5f855c8ab2', class: "tag__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !this.hideLabel ? (index.h("span", { class: "tag__label" }, this.label)) : (index.h("swirl-visually-hidden", null, this.label)), this.removable && (index.h("button", { key: '65c1ce66fb4460767f2b84d13d0f6c3bf3af1a92', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { key: '08bbf5e8cf6750392db278c488ab39e373c1b1a2', size: 16 }))))));
     }
     get el() { return index.getElement(this); }
 };
-SwirlOptionListItem.style = swirlOptionListItemCss;
+SwirlTag.style = swirlTagCss();
 
 exports.swirl_option_list = SwirlOptionList;
-exports.swirl_option_list_item = SwirlOptionListItem;
+exports.swirl_tag = SwirlTag;