@getflip/swirl-components 0.285.0 → 0.287.0

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.js

@@ -33,6 +33,7 @@ export class SwirlOptionListItem {
         this.dragHandleDescription = "Press spacebar to toggle grab";
         this.dragHandleLabel = "Move option";
         this.icon = undefined;
+        this.iconBadge = undefined;
         this.label = undefined;
         this.selected = false;
         this.swirlAriaRole = "option";
@@ -60,6 +61,7 @@ export class SwirlOptionListItem {
         const ariaSelected = 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"]') &&
             this.context === "single-select";
         const showSelectionIcon = this.selected && this.context === "single-select";
@@ -70,9 +72,9 @@ export class SwirlOptionListItem {
             "option-list-item--selected": this.selected,
             "option-list-item--show-avatar": showAvatar,
         });
-        return (h(Host, { key: 'd9c7f868a5095b92f8cf0f4d9b46e540ba59cb94' }, h("div", { key: '66ccb7bcb85e9de0c815e358121fae8b7937e5af', "aria-checked": this.swirlAriaRole === "menuitemradio" ? ariaSelected : undefined, "aria-describedby": Boolean(this.description)
+        return (h(Host, { key: '571967136a03f1cf4a3f0a14b4db18ffea6cee70' }, h("div", { key: 'edee17217bbe6135429b62c39ea430a49e66b39d', "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 && (h("span", { key: '1d4f748ba162b10b90ba36772bbc5ce2cfcbf688', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { key: '85bb99e98f1a4eb6e88f3c8f0025934f54e5f549', class: "option-list-item__avatar" }, h("slot", { key: '94ee311dc31470fc16ad053456393178c0ca1955', name: "avatar" })), showCheckbox && (h("span", { key: 'c64037453972f6dd2c36324f5e321ebdda0eba83', class: "option-list-item__checkbox" }, h("span", { key: 'ba30e1247bd9355e8fc89b2f6be52ad3ba58cd92', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: 'b364efbf3c1167a3bab08a6c53d0f82c4e2bf770', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'e8f98dddc19fe9c5c9cc0e2663504bd4ba10b96a', class: "option-list-item__label-container" }, h("span", { key: '6af24ab9900c92cf8ae3156838733ea70fd3e85a', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: 'f9a2bb319a510968994f0a01d5cd62221322401a', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '8346d30734b95770e30b4f7f9083e7c255ba7ed8', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'f0a31fe5087b91f36ff731f893827010f9664cb9', size: this.iconSize })))), this.allowDrag && (h("button", { key: 'e127b3a0535f0a7a726d55e9e97e9619c79b6d9f', "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" }, h("swirl-icon-drag-handle", { key: 'c507f84cd536ce945d8b7e98902e6c9f4703d63f', size: this.iconSize })))));
+                : 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 && (h("span", { key: '55191d396106978ae8d444fb05f7fce76ac2e574', class: "option-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }, showIconBadge && (h("span", { key: 'be4ca95a4c7d8f7b4110db7993edb0f3ce3972e8', class: "option-list-item__icon-badge", innerHTML: this.iconBadge })))), h("span", { key: '7dbb9384750e7c2ccac2c7ab3109f13b951f3061', class: "option-list-item__avatar" }, h("slot", { key: '2ad759cf4624a24d9f1fe94c456a36243857ebf4', name: "avatar" })), showCheckbox && (h("span", { key: '02f71ffe6bb74c85617157b7b9cb7adec010cce3', class: "option-list-item__checkbox" }, h("span", { key: '64edbd1f5c23878297ebf29087d1ff188db01856', class: "option-list-item__checkbox-box" }, this.selected && (h("swirl-icon-check-strong", { key: 'b793ba564a4fdd251f2f70cf68720d240b6b39d1', class: "option-list-item__checkbox-icon", size: 16 }))))), h("span", { key: 'b35ad7c3bd7f2b22c30729b3012bd5b4db320c85', class: "option-list-item__label-container" }, h("span", { key: '1a4d118965706046092e70c320593c04f06b19a2', class: "option-list-item__label", id: `option-list-item-${this.elementId}-label`, part: "option-list-item__label" }, this.label), this.description && (h("span", { key: '374aeefa73f78c2926ed0fd81dd254c3afcd7663', class: "option-list-item__description", id: `option-list-item-${this.elementId}-description` }, this.description))), showSelectionIcon && (h("span", { key: '0df5b07795109dbd28195b6e14ef10b7fd587e77', class: "option-list-item__selection-icon" }, h("swirl-icon-check-small", { key: 'accd8448bdf36a253e8f79be9c989a4d791361c3', size: this.iconSize })))), this.allowDrag && (h("button", { key: 'a1b622a719ca5fadff72a06be63d353a8c29d571', "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" }, h("swirl-icon-drag-handle", { key: '6a5c73788d36010e27e443aeea2977ad441742bd', size: this.iconSize })))));
     }
     static get is() { return "swirl-option-list-item"; }
     static get encapsulation() { return "scoped"; }
@@ -233,6 +235,23 @@ export class SwirlOptionListItem {
                 "attribute": "icon",
                 "reflect": false
             },
+            "iconBadge": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon-badge",
+                "reflect": false
+            },
             "label": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/swirl-option-list-item/swirl-option-list-item.stories.js

@@ -33,4 +33,6 @@ export const SwirlOptionListItem = Template.bind({});
 SwirlOptionListItem.args = {
     label: "Option List Item",
     value: "Value",
+    icon: `<swirl-icon-mention></swirl-icon-mention>`,
+    iconBadge: `<swirl-badge label="1"></swirl-badge>`,
 };

package/dist/collection/components/swirl-option-list-section/swirl-option-list-section.js

@@ -7,7 +7,7 @@ export class SwirlOptionListSection {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '886f128f4adac71c66e18cd48928b4aaa8fb1740' }, h("div", { key: '2618e2099bc6167ffc57fdc52ff4e38e8866261b', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: 'b67845388db7da756a5b8a235fc5f940ddbb30e3', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("div", { key: 'c4ed155d194346006167d468a3b118960605cd5e', class: "option-list-section__items" }, h("slot", { key: 'c43201c5bced887b1c843aa889cdeaf873e0cfba' })))));
+        return (h(Host, { key: 'e2401f37b99516ccd62cbed3fdb4637bd5a8b68a' }, h("div", { key: '31bf726f13e37ea9d3ad74a74ac6078228bc1118', "aria-labelledby": "label", class: "option-list-section", role: "group" }, h("span", { key: '8551ef2c99a481cb66dda9ed22958432075b37a3', class: "option-list-section__label", id: "label", part: "option-list-section__label" }, this.label), h("div", { key: 'ba28fd3e52e4542ab60745e01106a9df92faed69', class: "option-list-section__items" }, h("slot", { key: '402e4c95d254d4477223dece4d0696d3226bf305' })))));
     }
     static get is() { return "swirl-option-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -81,7 +81,7 @@ export class SwirlPagination {
         const showDropDown = this.variant === "advanced";
         const ariaPageLabel = `${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`;
         const className = classnames("pagination", `pagination--variant-${this.variant}`);
-        return (h(Host, { key: '73ae765ec8dbf588bfc32a4bbd6852291604214e' }, h("nav", { key: '4eda9560a9a019e82f821e187a6e83443979697e', "aria-label": this.label, class: className }, h("ul", { key: 'cc5367e85ca4e251e4f7d033bfa850968889caa6', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: '38f5fb33b9c24315271764e2784f1ebfe1d8723e', class: "pagination__list-item" }, h("label", { key: '9dbfeb8a3e464d50379746ec85c865cafd52ac51', class: "pagination__page-size-selection" }, h("swirl-text", { key: '748fe2c2ec1fbf50d4c4e4347e23571553f30c36', whiteSpace: "inherit" }, this.pageSizeSelectLabel), h("swirl-stack", { key: 'e9982f4cc6830489314d2bd13aa927201e51d415', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: '48a9950fa6a353d49883c69ec7918c38a26a2619', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), h("swirl-icon-expand-more", { key: '60d4677d0c8d24adf39cfc90f31b27660526233a', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: '7829d37667bdf4f643669d5aa7394b8c67300295', class: "pagination__list-item" }, h("swirl-button", { key: '774e9ba9e1bb90800b6e35b0ee531c1c4c88d405', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), h("li", { key: '582aecb2808382dc58032e872cfb97d29d772c83', class: "pagination__list-item" }, h("swirl-button", { key: '01395eb8e5bf7b0b06c55926213b5023b22a5fcc', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { key: '6848c16b69f7e9b67f7924eeb7c4d10bdf7ede4c', class: "pagination__list-item" }, h("swirl-button", { key: '566365451279b0578be3ba9378204c144791db8d', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), h("li", { key: 'fec0371d798351e16ea95a2b3b886ff310a71bd5', class: "pagination__list-item" }, h("swirl-button", { key: 'b1d0b4b994695ab9d46eaeb10835a8cf23cb7ed8', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
+        return (h(Host, { key: 'fba8207382cf0734db42a2dea298004f8943c17f' }, h("nav", { key: 'e166fe66e852e224c321627921c57605628d0ac4', "aria-label": this.label, class: className }, h("ul", { key: '3a4affd8175c790ef5d25f5e80523daf9b94fa01', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (h("li", { key: 'cf8dd212fdecbcc44f3e8462a45e99ea7ac2ddc0', class: "pagination__list-item" }, h("label", { key: '9f6e04dc201cd60da406324be6c4ad9363c450b9', class: "pagination__page-size-selection" }, h("swirl-text", { key: 'c2c85487931e6912edf0821eaa201e67e64bdc65', whiteSpace: "inherit" }, this.pageSizeSelectLabel), h("swirl-stack", { key: 'c7e46aae5f41adef62625b81e4335466f3ae51e8', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, h("select", { key: '354fef3715e457285692f4fb4cfcaf9ef6d47b1c', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), h("swirl-icon-expand-more", { key: 'f6ef8a317e72eb0239aaa6acad36bc148c873a29', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), h("li", { key: 'bf02a4f8f0413dee0791c39f26c6cbd46207474e', class: "pagination__list-item" }, h("swirl-button", { key: 'e6aba96a8c7156e573ad7ff33d1b36be8f248158', class: "pagination__first-page-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-double-arrow-left></swirl-icon-double-arrow-left>", intent: "primary", label: this.firstPageButtonLabel, onClick: this.onFirstPageButtonClick })), h("li", { key: '47dccc4d81e2c94c8025f5b4905f9a2dcedbffa1', class: "pagination__list-item" }, h("swirl-button", { key: 'ad00543f21637b669f341ffa7ff7dc9c985f7b11', class: "pagination__prev-button", disabled: this.page <= 1, hideLabel: true, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", intent: "primary", label: this.prevButtonLabel, onClick: this.onPrevButtonClick })), showPageLabel ? (h("li", { class: "pagination__list-item  pagination__page-label" }, h("span", null, showDropDown ? (h("span", { "aria-current": "page", class: "pagination__advanced-label" }, h("input", { "aria-label": this.pageSelectLabel, class: "pagination__page-input", onFocus: this.onFocusPageInput, onInput: this.onPageInput, ref: (el) => (this.pageInput = el), type: "text", value: this.page }), h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (h("span", { "aria-current": "page" }, ariaPageLabel))))) : (h("li", { class: "pagination__list-item" }, h("swirl-visually-hidden", null, h("span", { "aria-current": "page" }, ariaPageLabel)))), h("li", { key: 'f33a629ea11be2c8c1b1c07906b71f49b05afa35', class: "pagination__list-item" }, h("swirl-button", { key: 'ae4becccba62f16b92e4056ce44d49ba800bacec', class: "pagination__next-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-chevron-right></swirl-icon-chevron-right>", iconPosition: "end", intent: "primary", label: this.nextButtonLabel, onClick: this.onNextButtonClick })), h("li", { key: 'da1add506c324ae199592b1ef100737149a28ccf', class: "pagination__list-item" }, h("swirl-button", { key: 'be7e1d28fe3af44062e3eda3c3889ed32f413499', class: "pagination__last-page-button", disabled: this.page >= this.pages, hideLabel: true, icon: "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", intent: "primary", label: this.lastPageButtonLabel, onClick: this.onLastPageButtonClick }))))));
     }
     static get is() { return "swirl-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-pdf-reader/swirl-pdf-reader.js

@@ -180,15 +180,15 @@ export class SwirlPdfReader {
             "pdf-reader--hide-menu": !hasMenuItems,
             "pdf-reader--show-thumbnails": this.showThumbnails,
         });
-        return (h(Host, { key: 'b98e2d55d898dc79865d67169e3915143904964f' }, h("section", { key: '79c7969d68c722c4a731c6feb17f6b037a67ac9b', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'a31f466d3d56f5183b0a5ce12c342d305abc13a6', class: "pdf-reader__body", role: "document" }, h("header", { key: '429b0e53eb529cd937805f416c5f687548ea7aaa', class: "pdf-reader__header" }, h("span", { key: 'a05280d69ee9a8d507971f7a3fa672cf0d3deda2', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'f1d79af38c7b7ee5152718af881b1485bf5ee600', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: '7eb3753ca638dfa8833f1ece407e2df42b0ce9b8', class: "pdf-reader__label" }, this.label)), h("span", { key: '1f6ebdee5beda1b4b9efb9dc7f5f498db674645f', class: "pdf-reader__header-center" }, h("span", { key: 'f8726ccafc993fba57433ecfc07a0f617e2c2906', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: 'd4f03d6f39440324085d2fe469fcf0c7b2d75168', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: '0c18f0c9ff0e32470344d8233a13b9097551cd38', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: '4eca318e5e989487a7118d376017f7cabd5c77d0', class: "pdf-reader__zoom-select-container" }, h("select", { key: '04b861a96873d63125d8d7e877326959d5adf920', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: '17cd08bea4ae1a51f83ca979b30882d206d70a5f', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: '693977adf2884dbe1a6aa9ae1eb869216a8755f9', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: '3237fc070374cf1376f9f8986784ce3f538ec5e6', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '3c7fdd4fbfffc00c28df32a696274031ef406ac0', swirlPopover: this.menu }, h("swirl-button", { key: 'fbaad43371abdaad13e4c92a002ec511ecbe61d8', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '785f05b31ed8bb4bf44b953cb1357c0f32b90591', class: "pdf-reader__floating-tools" }, h("button", { key: '40d2fba151469f0a21fc3d403f58d4787a205894', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '0a6f7dc866c83d3629e795398e6e4f039097c102' })), h("button", { key: 'dcf71874a2645920cb4e0532bd57e9646c5686d2', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: '8f9d0937eb27f3eb0d75188e48e5b1d5ba238368' })))), h("div", { key: 'e82b50d1ba99ca2d4aa3548ddd9f18805d955e77', class: "pdf-reader__content" }, h("nav", { key: '80637a1a2ab6df90e4ea2f92a17a466e8046d116', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '5a42f8d16dae2e3694159cfe3a6a3f83c36c8e6a' }), !this.loadingThumbnails &&
+        return (h(Host, { key: '81d5e89fd73cdf93940502130d39382d68757763' }, h("section", { key: '77fd45b43ab3ba8d424b105fd956d7637dab08ac', "aria-hidden": "true", "aria-label": this.label, class: className, id: "pdf-reader", onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: '97398c5d3531d0f210543efd5f4db5629c7f1b5d', class: "pdf-reader__body", role: "document" }, h("header", { key: '524e7c7fcfb5ec456403c4c7354ce1dc8565a31c', class: "pdf-reader__header" }, h("span", { key: '1a7f36ceab510764e4fd58be82db76c96ef849fb', class: "pdf-reader__header-left" }, h("swirl-button", { key: 'fae99230801a2d755a86701bbc492d4260e9919d', class: "pdf-reader__close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick }), h("span", { key: '49ddb9cc5ce3a929f4031c6ab6ea374ca9313ef4', class: "pdf-reader__label" }, this.label)), h("span", { key: 'e26499b4bcf6c62f6b356020e4d84053bafb4b75', class: "pdf-reader__header-center" }, h("span", { key: '64cb978c4c8b46160fbee21fd1c27d658441660b', class: "pdf-reader__zoom-button-container" }, h("swirl-button", { key: '86ffdb46374cbe575746d5de3d227f6663ddf8e7', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[0], hideLabel: true, icon: "<swirl-icon-remove></swirl-icon-remove>", label: this.zoomOutButtonLabel, onClick: this.onZoomOutButtonClick }), h("swirl-button", { key: 'cfac8e6d9ef38dc58966fdc42059382e474ba1d4', class: "pdf-reader__zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], hideLabel: true, icon: "<swirl-icon-add></swirl-icon-add>", label: this.zoomInButtonLabel, onClick: this.onZoomInButtonClick })), h("span", { key: 'e94afea8d541b40eeaf0f86d620797c07c850ad8', class: "pdf-reader__zoom-select-container" }, h("select", { key: '3abbbcc6a5feca804e7fd288a4f45d0d6904c29c', "aria-label": this.zoomSelectLabel, class: "pdf-reader__zoom-select", name: "zoom-select", id: "zoom-select", onChange: this.onZoomChange }, h("option", { key: 'c1e9ec582b5594664c3d64ebd858b89682a9602a', selected: this.zoom === "auto", value: "auto" }, this.autoZoomLabel), this.zoomSteps.map((zoom) => (h("option", { key: zoom, selected: this.zoom === zoom, value: zoom }, zoom * 100, "%")))), h("swirl-icon-expand-more", { key: '29d8ac50214cfdb1fb4c21b5ab0012dc3d258867', class: "pdf-reader__zoom-select-icon" }))), h("span", { key: 'fac4a6296c778b801a5963a9fbbb4610451c9fc0', class: "pdf-reader__header-right" }, h("swirl-popover-trigger", { key: '5dbebf1825f3a762f27513b0c26a1334a1a5e2ab', swirlPopover: this.menu }, h("swirl-button", { key: '1ca64fd2b9e222b27c29b5acd30011858de16658', class: "pdf-reader__menu-button", hideLabel: true, icon: "<swirl-icon-more-vertikal></swirl-icon-more-vertikal>", label: this.menuTriggerLabel }))), h("span", { key: '70dec652c63d082e7d5083d8cc8720cd2b5172d4', class: "pdf-reader__floating-tools" }, h("button", { key: '60d418dde1e7e6bf2e5b4c2dc91bdda1ebdc302d', "aria-label": this.sideBySideButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleViewMode, type: "button" }, h("swirl-icon-menu-book", { key: '58fde27cc6af25fff66e01c72cb60772a1989b8e' })), h("button", { key: 'bd9e31b3c67695b8fe37fa128914d05e792dc015', "aria-controls": "thumbnails", "aria-expanded": String(Boolean(this.showThumbnails)), "aria-label": this.thumbnailsButtonLabel, class: "pdf-reader__floating-tool-button", onClick: this.toggleThumbnals, type: "button" }, h("swirl-icon-file-copy", { key: 'b2a6b1e5f124924dc7352898e78b8fc400dbe023' })))), h("div", { key: '49c372ff04c32b061a045863669f446b161978b1', class: "pdf-reader__content" }, h("nav", { key: '5fc70757f58b12c3ee7e2bdfbd06f91a3f5cb887', "aria-label": this.thumbnailsLabel, class: "pdf-reader__thumbnails", id: "thumbnails" }, this.loadingThumbnails && h("swirl-spinner", { key: '8eb682ef0eb16ee71b3dd0748de265941ac146f4' }), !this.loadingThumbnails &&
             this.thumbnails.map((thumbnail, index) => {
                 const thumbnailClassName = classnames("pdf-reader__thumbnail", {
                     "pdf-reader__thumbnail--active": this.visiblePages[0] === index + 1,
                 });
                 return (h("button", { "aria-label": `${this.thumbnailButtonLabel} ${index + 1}`, class: thumbnailClassName, onClick: this.onThumbnailClick(index), type: "button" }, h("img", { src: thumbnail.toDataURL("image/png"), alt: "" })));
-            })), h("swirl-file-viewer", { key: '93968c37c3fb60094507ff98551761a4c5f6d5b5', active: this.active, class: "pdf-reader__viewer", file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom }), h("div", { key: 'a43f60a606c1bb6a71c798ddf013f7ec6b3577dd', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: 'add4aab18be18484e003bb7b7f3de12d1a745909', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: 'dc6cbf23eb401cdbe7731bb4b90d5a3ebebc0a41', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: '6d9cb1897157fce7cb6719b787af24ec45dd993f' })), h("button", { key: '8bbcfca12368ac943883538cae6ecde36a6d6830', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: 'e7621f5f69e9fb049af458bfe69514ee4b757884' }))))), h("swirl-popover", { key: '47a19324ad61a4f85b3e978b87273cdb5265b458', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: 'd582e076616b4b58e80c5ed69414e087574f9e2d' }, h("div", { key: 'eba1d8f0f59825c617d460274d126868018e8902', class: "pdf-reader__meta" }, h("div", { key: '9e482c5c9d5e245291834796057f1a33f73d5200', class: "pdf-reader__file-icon" }, h("svg", { key: '5b98560f82b34390e70c1e08c66861d5041b8cf7', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: 'a457163273d46c89ba8c898157dfd392d6c699da', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'a566ae2306d2f71ca392d1680852522d1104ff8f', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'c95e02e13bc82555a13403d07e5f000c1147fd87', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: 'c9d1954f66e1dee43656c900f36c15699f3daceb', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: '47913f83ef77d0ae284d356f8d802577044d913b', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: '15559f8ae2b8d9d33931431dc933d9f2a675c5dc', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: '3d865301834f93a733fa7c6de9bdb2bd244e93ae', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'e7a2cd443c4eaa6d7a52b1da02028e4bb1261eba', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '6bedc40cac0e6e5b2f58112e19f41acc835e29f6', class: "pdf-reader__file-info" }, h("swirl-text", { key: '8e4bf6b3308baf3a6cc4d67f43433e561bccee41', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '48383b264bc1ea29301905502f53cf69a4a5f451', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: 'e012f1ab3b1d30058e42ed7621542c925b9bb267' }), h("swirl-action-list", { key: 'e96277f5425ce80ec7bffbb2f0ca52e135b5de57', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: 'a0c40f36c120a7352afad28355684abd39892096', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '6dcbb8a7f4716423947cd42bd0123e5d6b1a0007', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
+            })), h("swirl-file-viewer", { key: '101b56bb9a17e754866767610f178813c2db46de', active: this.active, class: "pdf-reader__viewer", file: this.file, fileName: this.fileName, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, pdfWorkerSrc: this.pdfWorkerSrc, ref: (el) => (this.viewer = el), type: "application/pdf", viewMode: this.viewMode, zoom: this.zoom }), h("div", { key: 'baf1b664b7966ef07411fa92207abfed8b466e1c', class: "pdf-reader__mobile-zoom-controls" }, h("button", { key: 'fa16e93ac77cd1c800227a6706a2b0bfde5fae28', "aria-label": this.autoZoomLabel, class: "pdf-reader__mobile-zoom-button", onClick: this.onZoomAutoButtonClick, type: "button" }, this.zoom === "auto" ? (h("swirl-icon-fullscreen-exit", null)) : (h("swirl-icon-fullscreen", null))), h("button", { key: 'cac6b459d2f424348bc737bc6efbe3dfc3f15e40', "aria-label": this.zoomInButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[this.zoomSteps.length - 1], onClick: this.onZoomInButtonClick, type: "button" }, h("swirl-icon-add", { key: '9f22c2f191ea77ffd2a9c9ddb9c521d5b6360f0d' })), h("button", { key: 'c3c1bf865ee86007b6806b965ddfeb875bc3893a', "aria-label": this.zoomOutButtonLabel, class: "pdf-reader__mobile-zoom-button", disabled: this.zoom === this.zoomSteps[0], onClick: this.onZoomOutButtonClick, type: "button" }, h("swirl-icon-remove", { key: '7d88c0725e991fbc8951a5c9c3d2863d8f5ab679' }))))), h("swirl-popover", { key: '1e9c2732f6b208f7143fbe78b6ea99652373b47c', animation: "scale-in-y", disableScrollLock: true, id: "menu", label: this.menuLabel, placement: "bottom-end", ref: (el) => (this.menu = el) }, h("swirl-stack", { key: '9fd356755e76115ac89f97c4a929183eadd325f0' }, h("div", { key: 'efda7662f54e9cbd0f9cdc56c0dde04d89ace796', class: "pdf-reader__meta" }, h("div", { key: '88a33932c2fc2075dacfe9b6c824a4746b45c224', class: "pdf-reader__file-icon" }, h("svg", { key: '913544df7dbc97da4eef47a4fe0c1e8064934b3d', fill: "none", height: "36", viewBox: "0 0 24 36", width: "24" }, h("path", { key: '1fa0b0d843b909c616f23d291f00fa4f8e089ecb', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'c3a612adf57e7800d2461bcf9243b623806327f5', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: 'd59e131de4dfff7a981a468a31245fc757c02544', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }), h("path", { key: '6f4d8c47e0a13955050de7c54a1081392dbe1b82', d: "M3.59961 9.00001C3.59961 8.0059 4.4055 7.20001 5.39961 7.20001H14.854C15.3314 7.20001 15.7893 7.38965 16.1268 7.72722L19.8724 11.4728C20.21 11.8104 20.3996 12.2682 20.3996 12.7456V27C20.3996 27.9941 19.5937 28.8 18.5996 28.8H5.39961C4.4055 28.8 3.59961 27.9941 3.59961 27V9.00001Z", fill: "#FF574D" }), h("path", { key: '48cd4136c99fe57c08996470bc75614643300ff0', d: "M15.5996 7.36166V10.2C15.5996 11.1941 16.4055 12 17.3996 12H20.2379C20.3237 12.1884 20.3768 12.3913 20.3937 12.6H17.3996C16.0785 12.6 15.0067 11.5325 14.9996 10.213L14.9996 7.20587C15.2083 7.2228 15.4112 7.27593 15.5996 7.36166Z", fill: "white" }), h("path", { key: '408f2d9be89e1d79ce0f29bfb1be6a432aeea11f', d: "M7.01755 21.6V15.192H8.39455C8.64655 15.192 8.86855 15.225 9.06055 15.291C9.25255 15.357 9.42655 15.474 9.58255 15.642C9.73855 15.81 9.84655 16.008 9.90655 16.236C9.96655 16.458 9.99655 16.761 9.99655 17.145C9.99655 17.433 9.97855 17.676 9.94255 17.874C9.91255 18.072 9.84355 18.258 9.73555 18.432C9.60955 18.642 9.44155 18.807 9.23155 18.927C9.02155 19.041 8.74555 19.098 8.40355 19.098H7.93555V21.6H7.01755ZM7.93555 16.056V18.234H8.37655C8.56255 18.234 8.70655 18.207 8.80855 18.153C8.91055 18.099 8.98555 18.024 9.03355 17.928C9.08155 17.838 9.10855 17.727 9.11455 17.595C9.12655 17.463 9.13255 17.316 9.13255 17.154C9.13255 17.004 9.12955 16.863 9.12355 16.731C9.11755 16.593 9.09055 16.473 9.04255 16.371C8.99455 16.269 8.92255 16.191 8.82655 16.137C8.73055 16.083 8.59255 16.056 8.41255 16.056H7.93555Z", fill: "white" }), h("path", { key: 'f938659112f6e9fc86556e7571ce865f6d06ad9d', d: "M10.6826 21.6V15.192H12.0416C12.5696 15.192 12.9686 15.336 13.2386 15.624C13.5146 15.912 13.6526 16.32 13.6526 16.848V19.845C13.6526 20.445 13.5056 20.889 13.2116 21.177C12.9236 21.459 12.5066 21.6 11.9606 21.6H10.6826ZM11.6006 16.056V20.736H12.0236C12.2816 20.736 12.4646 20.673 12.5726 20.547C12.6806 20.415 12.7346 20.211 12.7346 19.935V16.848C12.7346 16.596 12.6836 16.401 12.5816 16.263C12.4796 16.125 12.2936 16.056 12.0236 16.056H11.6006Z", fill: "white" }), h("path", { key: '387377193f9ae487182e4b22d03e2052a6ed9c10', d: "M14.5146 21.6V15.192H17.2506V16.056H15.4326V18H17.0166V18.864H15.4326V21.6H14.5146Z", fill: "white" }))), h("div", { key: '7c8e3a0935be4192a87d6cbd146fbe6646f77a4a', class: "pdf-reader__file-info" }, h("swirl-text", { key: 'a3213ad51f4e330e265ab2eb38a825717af4a687', truncate: true, weight: "semibold" }, this.label), h("swirl-text", { key: '9f50fe4b4de372e801ceb4c02f8c3299ebbb6f44', color: "subdued", size: "sm", truncate: true }, this.fileTypeLabel))), hasMenuItems && h("swirl-separator", { key: '560ad0e0e1df5a4807b32ec5d2b4e98fe5f64c46' }), h("swirl-action-list", { key: '8ade0c1800a31901a0c0030e54a03863d26b912d', class: "pdf-reader__menu" }, this.printButtonEnabled && (h("swirl-action-list-item", { key: '8514d3e65061a3a50c2200756b1724da07c8692f', class: "pdf-reader__print-button", icon: "<swirl-icon-print></swirl-icon-print>", label: this.printButtonLabel, onClick: this.onPrintButtonClick })), this.downloadButtonEnabled && (h("swirl-action-list-item", { key: '73e5b021562fa7244ec1408398d44ae575a0c289', class: "pdf-reader__download-button", disabled: this.downloading, icon: !this.downloading
                 ? "<swirl-icon-download></swirl-icon-download>"
-                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '281de19c25482e9ac0bb2744e5d65a8fc4c22467', name: "menu-items" })))))));
+                : '<swirl-spinner size="xs"></swirl-spinner>', label: this.downloadButtonLabel, onClick: this.onDownloadButtonClick })), h("slot", { key: '39a090c22adc5081d628f9d097fb537293a53d50', name: "menu-items" })))))));
     }
     static get is() { return "swirl-pdf-reader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-popover/swirl-popover.css

@@ -220,11 +220,19 @@
 
 .popover__scroll-container {
     max-height: 22rem;
-    padding-top: var(--s-space-8);
-    padding-bottom: var(--s-space-8)
+    padding-top: 0;
+    padding-bottom: 0
 }
   }
 
+@media (min-width: 768px) {
+
+.popover--padded .popover__scroll-container {
+      padding-top: var(--s-space-8);
+      padding-bottom: var(--s-space-8)
+  }
+    }
+
 .popover__handle {
   position: absolute;
   top: var(--s-space-8);

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

@@ -55,6 +55,7 @@ export class SwirlPopover {
         this.label = undefined;
         this.maxHeight = "22rem";
         this.offset = 8;
+        this.padded = true;
         this.popoverId = undefined;
         this.placement = "bottom-start";
         this.returnFocusToTrigger = true;
@@ -258,15 +259,16 @@ export class SwirlPopover {
             "popover--fullscreen-bottom-sheet": this.fullscreenBottomSheet,
             "popover--inactive": !this.active,
             "popover--transparent": this.transparent,
+            "popover--padded": this.padded,
         });
-        return (h(Host, { key: '99534cc34240b1baeddb8ee17927d587912dc044' }, h("div", { key: 'e661ff024e5e74b9312509f09b80f87f75adef13', class: className, onKeyDown: this.onKeydown }, h("div", { key: '7d4c81aab941a8b63c8512199507e382eec77fcd', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
+        return (h(Host, { key: 'df476e6322d8d9d846f63c77d2150f058ff510f4' }, h("div", { key: '9be59d3e4afcdc085d6c6da4c6cf73117352ae15', class: className, onKeyDown: this.onKeydown }, h("div", { key: 'da116f880c0744a9b626e772a79a8833deaf92b7', "aria-hidden": !this.active ? "true" : "false", "aria-label": this.label, class: "popover__content", id: this.popoverId, part: "popover__content", role: "dialog", ref: (el) => (this.contentContainer = el), style: {
                 top: Boolean(this.position) ? `${this.position?.y}px` : "",
                 left: Boolean(this.position) ? `${this.position?.x}px` : "",
-            }, tabindex: "-1" }, h("span", { key: '2bed2c3bd3829cfbab6b95b11cfb98494c1f70b2', class: "popover__handle" }), h("div", { key: '962b91b8ce00f33f4faeaa1d23dd6284d650522a', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, h("span", { key: 'fcbd5a764f47a2fe387893203c5fe5f7d3e5d158', class: "popover__handle" }), h("div", { key: 'dc8acca5962062f9c48ae39181046c8c2c769771', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, h("slot", { key: 'f5237b619333de1b78eb449f2e9de90d2455568a' }))), this.active && (h("div", { key: 'c37ea60b95e20c2d84bb090ae3a8cdc1b5a3aabc', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, h("slot", { key: 'c3941c4f0600dafcafdc9cf4328f2eb6319cbe79' }))), this.active && (h("div", { key: '7f94b4404281c6ac68551584e6e1f273d99810df', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     static get is() { return "swirl-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -411,6 +413,24 @@ export class SwirlPopover {
                 "reflect": false,
                 "defaultValue": "8"
             },
+            "padded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padded",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "popoverId": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/swirl-popover/swirl-popover.spec.js

@@ -37,7 +37,7 @@ describe("swirl-popover", () => {
         </swirl-popover-trigger>
         <swirl-popover id="popover" label="Popover">
           <mock:shadow-root>
-            <div class="popover popover--animation-scale-in-xy popover--inactive  popover--placement-undefined">
+            <div class="popover popover--animation-scale-in-xy popover--inactive popover--padded popover--placement-undefined">
               <div aria-hidden="true" aria-label="Popover" class="popover__content" part="popover__content" role="dialog" tabindex="-1">
                 <span class="popover__handle"></span>
                 <div class="popover__scroll-container" part="popover__scroll-container">

package/dist/collection/components/swirl-popover/swirl-popover.stories.js

@@ -12,6 +12,9 @@ export default {
                 type: "number",
             },
         },
+        padded: {
+            description: "Adds a small amount of free space to the top and bottom of the popover.",
+        },
         returnFocusToTrigger: {
             description: "By default, the focus is returned to the trigger element when the popover is closed. Pass false to disable this behavior.",
         },

package/dist/collection/components/swirl-popover-trigger/swirl-popover-trigger.js

@@ -158,7 +158,7 @@ export class SwirlPopoverTrigger {
         return isActive;
     }
     render() {
-        return (h(Host, { key: '301b84437aa2fdc12b313ed844a66386a70d12dc', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '0ed5e952b04c3aa9eef3540ab2056ee2021275f9' })));
+        return (h(Host, { key: 'f24c307c0c793b723219d70536814ad68cb894a1', onClick: this.onClick, onMouseenter: this.onMouseenter, onMouseleave: this.onMouseleave }, h("slot", { key: '82f8797bcca392f456ed38085bb057fda4561e28' })));
     }
     static get is() { return "swirl-popover-trigger"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-progress-indicator/swirl-progress-indicator.js

@@ -13,7 +13,7 @@ export class SwirlProgressIndicator {
         const radius = this.size === "m" ? 20 : 10;
         const circumference = Math.round(radius * 2 * Math.PI);
         const dashOffset = Math.round(circumference * ((100 - this.value) / 100));
-        return (h(Host, { key: 'b0055e1af4f90544d14efab8c1c1e7bbfd88b59a', class: this.variant }, this.variant === "bar" && (h("progress", { key: '8af1fec195f11ae75d74ca69994ec7fad91f933d', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: '2539beb6d3fd754ea7550c7a5351b9318d1dc3d7', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'be87aaf4d43e3dd65e9be85dbd8a2f5a93ff7162', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '194f56603d0076e7ab254346d431f7257384af4e', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: 'b78e26c2945bfc2465e8edb0e120f9e3cc52055a', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
+        return (h(Host, { key: 'ec67df0261c2d7085b5993de26b9e8f8ef30aee5', class: this.variant }, this.variant === "bar" && (h("progress", { key: '22cbde6694554a5fadec799363a7ee3ea9c783a8', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (h("span", { key: '60e257b78d70f3bd56b3a45178c6d97e84ba5dcc', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, h("svg", { key: 'ddf18412e0bcc8acf6703471f812d19f9f65d7dc', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, h("circle", { key: '14dd6d446c100b80ac0ea3ca13f0f0f265222019', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), h("circle", { key: '8ccaa481b7637c0e7f3c57b9a9eecb495ede602c', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
     }
     static get is() { return "swirl-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

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

@@ -37,7 +37,7 @@ export class SwirlRadio {
             "radio--invalid": this.invalid,
             "radio--unchecked": unchecked,
         });
-        return (h(Host, { key: 'fbf3f0ee0b30c72b5ad65ac0692b6e9d31b7d90a', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: 'a7ea6566aa319b575a84929840b7a73a5a0b9056', class: className, htmlFor: this.inputId }, h("span", { key: '013c04a9fc328161c2f7ef1277918bd678017abf', class: "radio__control" }, h("swirl-visually-hidden", { key: 'ec6a686366bbfc2f0eb880f64228b743b054208c' }, h("input", { key: 'c1f503b67a5e04ce44e26e719656282d94e03461', "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { key: '31655ce0ba8f93ae33e472cae75a901eaef8d0be', "aria-hidden": "true", class: "radio__box" })), h("span", { key: '7bdf6ef7ce9b2c66f4fef128e7f0d5b5a2dbc3d6', class: "radio__label-container" }, this.label && (h("span", { key: '7a12b6a227a56b1054ad2e3598bf56e57fdbfc9c', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: '392c3f0be615b16c51d272aef5bfb8babf6378ef', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: '321bba48e44221a8d17d196d7e6fb044aa41ca3f', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: '6f8c09868609b23f9d67aa0b31c972a549f499ff', class: "radio__description", innerHTML: this.description }))))));
+        return (h(Host, { key: '4511fc8bead880f2a7466f8329220752d17d0325', style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { key: '555b8c019f96022c8b9ad454862e4c6532004448', class: className, htmlFor: this.inputId }, h("span", { key: '18f02be569b58bd87648e70c03bea4118017b156', class: "radio__control" }, h("swirl-visually-hidden", { key: 'db1e1c34d76b0f537bc7f405a1e0e978319c8478' }, h("input", { key: '5f4aadfc527b06daf0a4a658c96c11fda7692a8d', "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { key: 'f73f6e2708d5b0453b54a5650e9a23c75e25e19d', "aria-hidden": "true", class: "radio__box" })), h("span", { key: 'e4f5f4eee6ce7fd06362067983dd522f98739fcb', class: "radio__label-container" }, this.label && (h("span", { key: '99b22ffb4d9b5b7e43ef0bbae23317e4cf3c91f9', class: "radio__label" }, this.label, this.tooltip && (h("swirl-tooltip", { key: 'b22e0419ab77eaa2d2bff4302998e927eacfcfd3', content: this.tooltip, position: "top" }, h("swirl-icon-help", { key: 'f7bd26220e164febd139175c17585f36c7d937a3', color: "default", size: 20, tabIndex: 0 }))))), this.description && (h("span", { key: 'ec75b1f0cf9e6aed549e25295534881b39b40cee', class: "radio__description", innerHTML: this.description }))))));
     }
     static get is() { return "swirl-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -37,7 +37,7 @@ export class SwirlRadioGroup {
         }
     }
     render() {
-        return (h(Host, { key: '1e01eb6ceacb20bcd71535219b96cc9a2a54ade6', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: '86b29d67758d1fef3172a8c3c83fc443c732ec2e', class: "radio-group" }, h("slot", { key: 'b9073f0993b00cd97ef1eb8bc925181e9b6c1062' }))));
+        return (h(Host, { key: '4d62efbff3589261ebe21f9819ccbff59b5d7d44', "aria-describedby": this.swirlAriaDescribedby, role: "radiogroup" }, h("div", { key: 'fb0b457aec9c6004b5110ad66d6d88be6dd63140', class: "radio-group" }, h("slot", { key: '9596bc61932d368521ed3ae511e05689013b4e1f' }))));
     }
     static get is() { return "swirl-radio-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list/swirl-resource-list.js

@@ -249,7 +249,7 @@ export class SwirlResourceList {
         });
     }
     render() {
-        return (h(Host, { key: '24ef8717e06eaa5e2c8dff08d50bd8c7582b89af', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: '4ea549d10ec775e1851efc2a86c101f99fb094a8', role: "alert" }, this.assistiveText), h("swirl-box", { key: '5c40504ad7d017f9271db414d065b3d4fc756e53', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: '3a913c951fef4f788536068ce572f2131d203322', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: 'bd026e40cf0cd5067eb3d2b6c2d6b5da2e044859' })))));
+        return (h(Host, { key: '07a472a8a7bcb02703c483c0ad755d9d787acb5c', onKeyDown: this.onKeyDown }, h("swirl-visually-hidden", { key: 'f14c34e2922d82431f0de15aea599d9c61d0a195', role: "alert" }, this.assistiveText), h("swirl-box", { key: 'f58048586f6f46a678db400bf3e3ed9af21b38b0', paddingInlineEnd: "8", paddingInlineStart: "8" }, h("swirl-stack", { key: 'ead6286f509dc5874e3492624a79f0c9ec1a6879', "aria-label": this.label, class: "resource-list", id: this.listId, ref: (el) => (this.gridEl = el), role: "grid", spacing: this.spacing }, h("slot", { key: 'fdf20fb257cfc1df4e8c307a4368acfa13bc06ad' })))));
     }
     static get is() { return "swirl-resource-list"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-file-item/swirl-resource-list-file-item.js

@@ -37,7 +37,7 @@ export class SwirlResourceListFileItem {
         const className = classnames("resource-list-file-item", {
             "resource-list-file-item--has-control": showSpinner || showRemoveButton,
         });
-        return (h(Host, { key: 'bbf7d4cf8f9eae81bad49bec1307cf45a2004f11', role: "row" }, h("div", { key: '0959caa4bede9ed5a649b80c98366568eff0e4bc', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '0eeef5e65fad8fa597a643458c5fb264149fa7cc', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: 'fea932a17c0b6964be6c566ddd3ee9bd79a17df4', class: "resource-list-file-item__label-container" }, h("span", { key: '724df159b81a3051a99ce643008a687b46ad49a5', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: 'bddfdd71675b637955c9de19d64ae4bca023ca3d', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '44b7e596c8497af50b6cd32f3fb6b03890291297', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: '0c867d1feaf0656c8f7c133964a32813905ccc15', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: 'aba4068b2354414f4d3894847e25d724eedbcbd9', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: 'aa0bf9e3e0b0d92847929ddec9e2ebf54ea9aaae', size: "s" }))), showRemoveButton && (h("span", { key: '0eaa41587f80cc96aa159039670a72eb3771afc7', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '45830b0497beb5dee13ef0c1e61252b73d16fc03', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
+        return (h(Host, { key: '9bb3ef70133735654524bd510124cae8d4321e42', role: "row" }, h("div", { key: '1179c9aa1979500876810e64b5ad0c61e3329c32', class: className, part: "resource-list-file-item", role: "gridcell" }, h("span", { key: '081c7068de1c9c55e678dbf0e9ad6ce0ee52b762', class: "resource-list-file-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) }), h("span", { key: '9341f71ea91a3d080d68e2bb8dbd15755e79f91a', class: "resource-list-file-item__label-container" }, h("span", { key: 'c31d9cef43167e5b531cb108cca285ac59ecb3d8', class: "resource-list-file-item__label", id: "label" }, this.label), showDescription && (h("span", { key: '1616529961268c9dad657383d9cd6c3b4bda89d4', class: "resource-list-file-item__description" }, this.description)), showError && (h("span", { key: '7ce7536ce5fe7c39e63140d1059a22db2b8cbb10', "aria-live": "polite", class: "resource-list-file-item__error-message" }, h("swirl-inline-error", { key: 'd96eb7bcf6931a5d62c1fee20010cfcd7f3a29b8', message: this.errorMessage, size: "s" })))), showSpinner && (h("span", { key: '199eb340ff5efb7736eb6f2e198987aa1cd74ce8', class: "resource-list-file-item__spinner" }, h("swirl-spinner", { key: '0f622305a27a9d14cb54bf1adbfa62fa98a1d284', size: "s" }))), showRemoveButton && (h("span", { key: 'e306ce21915b56159170c3ebb7870a5dbc6888c6', class: "resource-list-file-item__remove-button" }, h("swirl-button", { key: '49da8673e828b30d115ecc6bf13ea018295ed992', hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.removeButtonLabel, onClick: this.remove.emit }))))));
     }
     static get is() { return "swirl-resource-list-file-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-item/swirl-resource-list-item.js

@@ -154,7 +154,7 @@ export class SwirlResourceListItem {
             "resource-list-item--wrap-description": this.descriptionWrap,
             "resource-list-item--wrap-label": this.labelWrap,
         });
-        return (h(Host, { key: 'ee71a35a51909f48b6481e88902952de6c551d5d', role: "row" }, h("div", { key: '52cadb9dcc3b255500dfca0cfa5b786e7a8b90dc', class: className, role: "gridcell" }, h(Tag, { key: '4ef3eec2ec3fc2ed8299e8f52b5bfeaa751410e8', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: '8c748b14176c0da6263e6609f218c4e02996a744', class: "resource-list-item__media" }, h("slot", { key: '9126fbb711cec2f4179f0ad051ecfc2c91af018c', name: "media" }))), h("span", { key: 'f49e3b7fc7998ef327fc75f95a3ebc336ecc8c73', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: 'ebcaa12a4655cb2615f798806b721d53ba3a18ca', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'b64963c940cfa8b0d309929e6c77485363611313', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: '3d0da6bcdb783d85071cac3c3bf1f0b3af9fe6a0', class: "resource-list-item__meta" }, h("span", { key: '2c939bf964eaa4b1fdcd43a48c67cf5da6755485', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: '21216b62f38fd1031bad7d07746db1c595d01be9', class: "resource-list-item__badges" }, h("slot", { key: '7c30e294778db39c7ead121948fce77a940a2f9c', name: "badges" }))))), this.selectable && (h("span", { key: '3ed06e50ccd5a9096337f2c7d4ffb7ff4bc7853a', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '81ee8c5911ba9d23ac29d6ea9568b404a163a9dd', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: '8aded72608b52bfedccc1d9889c5322b967825ba' }))))), h("span", { key: '08f435f707be1eff4276daede7f9bc8dea0a9eef', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: 'ac76664b4fc00749ee6c4e2b78a09ac7d706f5b9', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '9a8d921b73538b651d1877d3f960349b85121162', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '1f99dfc95d71205f7c171f7bdc4346eeb563227c', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: '5683928a73c254aad8a55cc709b669dcd54ad2df', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '8aa0c74b94c6b2ad083d2289cc099db67d5114ab', size: this.iconSize })))));
+        return (h(Host, { key: '157d4fc9cba405bb31a8cb05407427afbefebb51', role: "row" }, h("div", { key: '55163da3bb7467cb2e55b22649c857ebba8cf3bb', class: className, role: "gridcell" }, h(Tag, { key: 'f72a323c58fd8dd2a02ecfa773f438e25e20aa19', "aria-checked": ariaChecked, "aria-disabled": disabled ? "true" : undefined, "aria-label": ariaLabel, "aria-labelledby": Boolean(this.swirlAriaLabel) ? undefined : this.elementId, class: "resource-list-item__content", href: href, disabled: disabled, onClick: this.onClick, onBlur: this.onBlur, onFocus: this.onFocus, part: "resource-list-item__content", role: role, tabIndex: 0, type: Tag === "button" ? "button" : undefined }, this.hasMedia && (h("span", { key: 'e0daee03791106cb35b354f83ca66f1b434f8dc7', class: "resource-list-item__media" }, h("slot", { key: '8b2812557c5778cc77e1e224dbfc58a8365202c4', name: "media" }))), h("span", { key: 'debf86b9b7b5df6e944cb9e62bf61626ca469f21', class: "resource-list-item__label-container", style: labelContainerStyles }, h("span", { key: 'dffbea7a465e5c0bf7fd6c5410e83daddfb3acea', class: "resource-list-item__label", id: this.elementId, innerHTML: this.allowHtml ? this.label : undefined }, !this.allowHtml && this.label), this.description && (h("span", { key: 'fb12e69166e4981e643a7c10709138a349fed78d', class: "resource-list-item__description", innerHTML: this.allowHtml ? this.description : undefined }, !this.allowHtml && this.description))), showMeta && (h("span", { key: 'b086cca27c69ed8d7410b274fa5132e5a0ff2fa5', class: "resource-list-item__meta" }, h("span", { key: '5adda4d904035658783411cb568b20560ad670fc', class: "resource-list-item__meta-text" }, this.meta), h("span", { key: 'acd7b96926d0922728990a4867bbf1dae4785249', class: "resource-list-item__badges" }, h("slot", { key: 'b1d5013e66c771f77112044663d664456e01d833', name: "badges" }))))), this.selectable && (h("span", { key: 'a35df9328d978ded4b10b7c72fd33642ab9994c4', "aria-hidden": "true", class: "resource-list-item__checkbox" }, h("span", { key: '89a4ffe0830737606c4899d8b1d80ca586aaf351', class: "resource-list-item__checkbox-icon" }, this.checked && (h("swirl-icon-check-strong", { key: 'f3df832b9f0beca06f9bd1e1e9628de20ae96f0a' }))))), h("span", { key: '01fa67e1edbe005dc754dd4a4d008dc0246c2b85', class: "resource-list-item__control", onClick: this.onControlClick, ref: (el) => (this.controlContainer = el) }, h("slot", { key: '6716e77c8ad2654684c306f33102be7c52f25eea', name: "control" })), showMenu && (h("swirl-popover-trigger", { key: '2c56ac7fbf140c1a917e2dac77fb127b391a2d5d', swirlPopover: this.menuTriggerId }, h("swirl-button", { key: '0d0803fedb6400d80b31500faffb2f0a24cbabb2', "aria-disabled": disabled ? "true" : undefined, class: "resource-list-item__menu-trigger", disabled: disabled, hideLabel: true, icon: "<swirl-icon-more-horizontal></swirl-icon-more-horizontal>", intent: "primary", label: this.menuTriggerLabel, onClick: this.onMenuTriggerClick })))), this.allowDrag && (h("button", { key: 'b266295b821e8610e977d00123bb0e38d20d034f', "aria-describedby": this.dragHandleDescription, "aria-label": `${this.dragHandleLabel} "${this.label}"`, class: "resource-list-item__drag-handle", onKeyDown: this.onDragHandleKeyDown, type: "button" }, h("swirl-icon-drag-handle", { key: '0a42e8696eee548149f46812ae0bc567613bf512', size: this.iconSize })))));
     }
     static get is() { return "swirl-resource-list-item"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-resource-list-section/swirl-resource-list-section.js

@@ -10,7 +10,7 @@ export class SwirlResourceListSection {
         this.hasSeparator = false;
     }
     render() {
-        return (h(Host, { key: '97625ee360ec9abe158f5082d47c6a0143ab549d' }, this.hasSeparator && (h("swirl-separator", { key: '7c4d8d3e04ccc10ae18047b49295950780bd7ce6', spacing: this.separatorSpacing })), h("div", { key: 'ecd4081a7af326616db50bbbb6940be54a49dae9', "aria-labelledby": "label", role: "rowgroup" }, h("span", { key: 'fc1a6ec3f9b12d93896f9d6bac739181604e59cb', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'cbad51573b8932d9bcaf13129a173ab008ac2079', spacing: this.spacing }, h("slot", { key: '19ae8536965b4a019524253a98dc480695c419cf' })))));
+        return (h(Host, { key: '66b19a0b67bb9852159a48a9e9519d98870e1e28' }, this.hasSeparator && (h("swirl-separator", { key: '09bf9a3261d4cde9ff52ef570622e5feaab226c4', spacing: this.separatorSpacing })), h("div", { key: 'e8746e32c6fbd741337d322c37aa1a49450d365c', "aria-labelledby": "label", role: "rowgroup" }, h("span", { key: 'e4d14f26aae32356c5f575e183ec1823c3a3364c', id: "label", class: "resource-list-section-label", part: "resource-list-section-label" }, this.label), h("swirl-stack", { key: 'dfc0d9f52168a67d5439755b774c66cb6ca9bff3', spacing: this.spacing }, h("slot", { key: '600f8565505f85c946a72e205deef8b894f72c28' })))));
     }
     static get is() { return "swirl-resource-list-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ export class SwirlSearch {
         const className = classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (h(Host, { key: 'f830fa0298aeb9964b387ead34933777c99a6f08' }, h("span", { key: 'e7890af7315af940ca4cd0cb71bf99debf271e9e', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'beed185035923e749bb89e76a46173240a0a62a9', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '41a49f1f07380196b2f82894b190912b5e3de1f0', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: '2269c36181e09cbccd1220975f86192816d08ce8', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: 'f5544b823a90130d1c21c4517b284438ba400add' }))))));
+        return (h(Host, { key: '54dcbfc6288862ac0a989b5415a03b2e2392e5f2' }, h("span", { key: '790a7475e943bce186a43c65ea98ce279cc3c0a1', class: className, ref: (el) => (this.iconEl = el) }, h("swirl-icon-search", { key: 'aabb9e62c43b638f316cec7cfc9ebd1fdbff174b', "aria-hidden": "true", class: "search__icon" }), h("input", { key: '9a47eed049fbd48af61bc6f4d5f3a8c071ee6325', "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { key: '1eccdc18fb5794a2cfd2327124ad71265e758e05', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("swirl-icon-cancel", { key: '6f34a0be9acda42257bf2fd5659c00a9b0b3dc57' }))))));
     }
     static get is() { return "swirl-search"; }
     static get encapsulation() { return "scoped"; }

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

@@ -126,11 +126,11 @@ export class SwirlSelect {
             "select--search-loading": this.searchLoading,
             "select--standalone": this.standalone,
         });
-        return (h(Host, { key: 'e4c4aeec0c23ceb10e14b3db511b3cdf80dcb953', onKeyDown: this.onKeyDown }, h("div", { key: '0db57b420288cfad0afe5416e487e42a22bad267', class: className }, h("swirl-popover-trigger", { key: '9175666caee15b648fa7a03620982d54c1f1f1e5', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'b9fc7cbecfe9f107edb7909a3f5ecd474dbf869d', class: "select__value-container" }, this.standalone && (h("span", { key: 'db0e8a2ff9ad650c487bed7497ad3afe3015e604', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: '6be05a6d1a8f2ba562a15a4266bfc08a7484bca1', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '4f9f13507e1a53ef28aa88f2c1f9d501bdff6eca', class: "select__multi-select-values" }, this.value
+        return (h(Host, { key: 'f4d1a32e6f1a373a6597c3994697c1e41231e80d', onKeyDown: this.onKeyDown }, h("div", { key: 'b569382d1c19ca5006541d12ec66220d985f02bc', class: className }, h("swirl-popover-trigger", { key: '58af3ccf7e08d5c89ce941b7a6feb99cd399491d', swirlPopover: this.swirlPopover, setAriaAttributes: false }, h("swirl-stack", { key: 'ae0fa89c7fa0a1a9f33be2f4b65bae75bec7fee2', class: "select__value-container" }, this.standalone && (h("span", { key: '5925fdb57028f69b37ec11ce49d9417445670426', "aria-hidden": "true", class: "select__resize-helper" }, label)), h("input", { key: 'e22d665fa1b455683d9b029ec1d8d0c3606c0c87', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, class: "select__input", disabled: this.disabled, readOnly: true, ref: (el) => (this.input = el), type: "text", value: label }))), h("span", { key: '0f41a50d84757fe69c9ff6f18af3602facad4386', class: "select__multi-select-values" }, this.value
             ?.map((value) => this.options.find((option) => option.value === value))
             ?.map((option) => (h("swirl-tag", { "aria-hidden": "true", label: option?.label,
             // eslint-disable-next-line react/jsx-no-bind
-            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: '3a1f1f423fd7455e9b531e87222262f8bba7b6e1', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: '6a2ce51375de331525f2627f30672bb4dce4fc1d', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: 'c9de5168f5a66c254ebc27e3f4f4eebec462b278', class: "select__search" }, h("swirl-icon-search", { key: 'f71e3ea1539c50d71f73b32f9695979e6d084630', class: "select__search-icon", size: 20 }), h("input", { key: 'e72f94990346ca928f7ef96356e5f8c318127fe9', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '9e411c05763d21227f4ec6df57854ac1b90ce86c', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: 'a1c53e85baa83a9bde5b01919037eecf293368e7', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: 'c9c8b315c77ba9d276a0393dc9b31a96bb8a6095', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '199b726f248edcff4e725827373bd8b91f659ce4', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '71661c8a2ba9163902de76bb928131c268c3b3fc', onSlotchange: this.onSlotChange }))))));
+            onRemove: () => this.unselectOption(option?.value), removable: !this.disabled && this.allowDeselect })))), h("span", { key: 'bec388f4617fc7e76ecf3257fefbe606e35222b7', class: "select__indicator" }, this.open ? (h("swirl-icon-expand-less", { size: this.standalone ? 20 : 24 })) : (h("swirl-icon-expand-more", { size: this.standalone ? 20 : 24 }))), h("swirl-popover", { key: 'a86dc806e0f318351a82cf2873f336b09ed2b1be', animation: "scale-in-y", class: "select__popover", id: `select-options-${this.selectId}`, label: this.label, offset: offset, onPopoverClose: this.onClose, onPopoverOpen: this.onOpen, ref: (el) => (this.swirlPopover = el), useContainerWidth: this.standalone ? false : "swirl-form-control" }, this.withSearch && (h("div", { key: 'b8a402b67be647f16cc67fc2bbc267f88fc9985a', class: "select__search" }, h("swirl-icon-search", { key: '6bc2304573c12ef7c2564afa811925a5e35543f2', class: "select__search-icon", size: 20 }), h("input", { key: 'd8031cb8385895c3338f75b85440d81a6521fe1c', "aria-label": this.searchInputLabel, class: "select__search-input", onInput: this.onSearchInput, placeholder: this.searchPlaceholder, ref: (el) => (this.searchInput = el), type: "search" }), this.searchLoading && (h("swirl-spinner", { key: '102850e362aadd1424136a4d417b6d9fa0606cd7', class: "select__search-spinner", size: "s" })))), h("swirl-option-list", { key: '0f914332c497c4a578cc45f16fed8626dcc50d5c', allowDeselect: this.allowDeselect, onValueChange: this.select, multiSelect: this.multiSelect, ref: (el) => (this.optionList = el), value: this.value }, !this.searchLoading && (h("div", { key: '17818d47966d414150ddee87b65d964f86924cac', "aria-disabled": "true", class: "select__empty-list-label", role: "option" }, h("swirl-text", { key: '6543eaaebfda3ea643897a2f0aebb5792440d986', color: "subdued", weight: "medium" }, this.emptyListLabel))), h("slot", { key: '954c68c83c8280dce551f50273c3c4565ba706e9', onSlotchange: this.onSlotChange }))))));
     }
     static get is() { return "swirl-select"; }
     static get encapsulation() { return "scoped"; }

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

@@ -28,7 +28,7 @@ export class SwirlSeparator {
                 paddingLeft: `var(--s-space-${this.spacing})`,
             };
         const className = classnames("separator", `separator--color-${this.color}`, `separator--orientation-${this.orientation}`);
-        return (h(Host, { key: '9cb972d889442ef48f3ab65f6c60019822d93258', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: 'f776b4d21bd22a4c4a7d1960f6dda0c5f317a634', class: "separator__line" }), this.label && (h(Fragment, { key: '582ebc1523ef4670dccc0385839efe00297c608a' }, h("span", { key: '43adeaf3215ac01addc7a311d7ee39d74033aa82', class: "separator__label" }, this.label), h("span", { key: 'c9096ba71a04b585360117a9e8654c6f0ed708d0', class: "separator__line" })))));
+        return (h(Host, { key: 'c05d1d332582c5198e5f63e1ae53373f70d8fdac', "aria-orientation": this.orientation, class: className, role: "separator", style: styles }, h("span", { key: 'b8b4c682b382df9418f52d74fbdf26d4a110699b', class: "separator__line" }), this.label && (h(Fragment, { key: '6697d4bfeb553631eadd666b46dc56e23409c713' }, h("span", { key: '6902b5d08130def36212dae141122f09090f52e6', class: "separator__label" }, this.label), h("span", { key: 'eeb5d993a3d44d3f42a8f9456b3931f5db2107ce', class: "separator__line" })))));
     }
     static get is() { return "swirl-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.js

@@ -212,25 +212,25 @@ export class SwirlShellLayout {
             "shell-layout--sidebar-scrollable": this.sidebarScrollState.scrollable,
             "shell-layout--sidebar-scrolled-to-top": this.sidebarScrollState.scrolledToTop,
         });
-        return (h(Host, { key: '45964e60b621481351ea8590327923526fe41c83' }, h("div", { key: '4c0a9c31e33018a28d5cd16a7620dfafe209e588', class: className }, h("header", { key: '7bc9ffb46445894ed45f268fa608799b3809ffb9', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'd4958f3a0e9c4bfc6fd54eda4c4993387dda245e', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '2c49018914fc1343fea3f952cecba065acf657e9', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '3e85281b8eefa5937b4adbcdca52a51335da57d2', content: this.navigationCollapsed
+        return (h(Host, { key: '3c2ac344059ef37c76bfef5a6b6cb8d7cbae80dc' }, h("div", { key: 'd6aeb2ed917792505be3480f8811e851de7e1155', class: className }, h("header", { key: '27aa3cf088add6c1e0897434bf12ffb79b90366a', class: "shell-layout__header", "data-tauri-drag-region": "true" }, h("button", { key: 'e6e235acd759ea0401b616a67745544034d21381', class: "shell-layout__skip-link", onClick: this.skipLinkClick.emit, type: "button" }, this.skipLinkLabel), h("div", { key: '5a5c6b7e5bd649886d615e938a19488c65fc4c6d', class: "shell-layout__header-left" }, h("swirl-tooltip", { key: '02669c8373a687e7bba1f10ed88ae8cba06d288c', content: this.navigationCollapsed
                 ? this.expandNavigationButtonLabel
-                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '7d2a1a7fd8be280022c7a628b23197db2068925e', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '7bc0de0818480a6a33f9d9c5d50869f21f7eee29' }, this.navigationCollapsed
+                : this.collapseNavigationButtonLabel, delay: 100, position: "right" }, h("button", { key: '58d7d953dd28a65f9020abd862eb52eb863e43e0', class: "shell-layout__header-tool", onClick: this.onNavigationToggleClick, type: "button" }, this.navigationCollapsed ? (h("swirl-icon-dock-left-expand", { size: 20 })) : (h("swirl-icon-dock-left-collapse", { size: 20 })), h("swirl-visually-hidden", { key: '99a620badadc304b3b8ce40fa206695740becbb3' }, this.navigationCollapsed
             ? this.expandNavigationButtonLabel
-            : this.collapseNavigationButtonLabel))), h("a", { key: 'eff87f971675981de2138ba6e33b9b27c420c617', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: '4745125d5cda1a89b4b18f315a71a2cfea0b601e', size: 20 }), h("swirl-visually-hidden", { key: '402981d495e0c144de142dcedcd88ffbd5327751' }, this.browserBackButtonLabel)), h("a", { key: 'a72c1875f2ad7cd61fff79528b2471e9a04b9dec', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: '34777414c7ccbe5eeb9fe41291f54ff766ba0769', size: 20 }), h("swirl-visually-hidden", { key: '2fd9d67976998a96e1e5f16a525c7a3167577ac9' }, this.browserForwardButtonLabel)), h("slot", { key: 'e5c37b5ec90e87070f2612b71e6240da19943cac', name: "left-header-tools" })), h("div", { key: '8527f7fdd4a1ae445cbc04b140425e9da90f07c8', class: "shell-layout__logo" }, h("slot", { key: 'ea5895ff85db8b6932e9e37d1fd8a968ac209143', name: "logo" })), h("div", { key: '2ae31bed0231583af920393b7093b85aee9cb53f', class: "shell-layout__header-right" }, h("slot", { key: 'f8bbd238bac11142bdfdcaa166da1b99dc288872', name: "right-header-tools" }), h("button", { key: '916b0eb53f8e3b757323651073bd67a0319bf78f', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: 'd75f155d4f01e4e4abe9289d984af1edffeb413a', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: '4f47470a11fbff70814dfb95184b1757c5ca7440' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '7fc1a2da01f6cde471534ccc40fb073c0428b5b2', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
+            : this.collapseNavigationButtonLabel))), h("a", { key: '77280486b428930bd12af6bf132f357b96049617', class: "shell-layout__header-tool", href: "javascript:history.back()" }, h("swirl-icon-arrow-back", { key: 'a5a99e4fecf7f4ccb0181ad3c379e746decb6537', size: 20 }), h("swirl-visually-hidden", { key: '3d74b37f4960ce4d70698f95bd4b2f4cdc061f85' }, this.browserBackButtonLabel)), h("a", { key: '6809cf6536897f4474487207ef0f9e24c1d70f43', class: "shell-layout__header-tool", href: "javascript:history.forward()" }, h("swirl-icon-arrow-forward", { key: 'd3a261c883a535cca9b862b59b48870f74b65652', size: 20 }), h("swirl-visually-hidden", { key: 'd15ec089e3984c3d76e78f9028b0ccb2b47d6a4b' }, this.browserForwardButtonLabel)), h("slot", { key: '077f824eb6da5c1a7c7a858c2a4b0ffae6efee88', name: "left-header-tools" })), h("div", { key: 'eb4394aaf78c8b15aea173be09dc0d3f8809f1bb', class: "shell-layout__logo" }, h("slot", { key: 'd2ef8b47a938f5bbff4a68b205bb22d98ad49bac', name: "logo" })), h("div", { key: '8c529be112d23997e728632853bebe7c62b3f259', class: "shell-layout__header-right" }, h("slot", { key: '89b9fdad0be724c3965349128ad772e3b1c00a40', name: "right-header-tools" }), h("button", { key: 'bdec18a0e04c0f70f731ed920eef08a574a176d7', class: "shell-layout__header-tool shell-layout__sidebar-toggle", onClick: this.sidebarToggleClick.emit, type: "button" }, h("swirl-icon", { key: '94b23a781f146d70e3092a3c694891fd59c0960c', glyph: this.sidebarToggleIcon, size: 20 }), h("swirl-visually-hidden", { key: 'c9aaf6c7ab7b883cd953bdcdb78a48b822586c7c' }, this.sidebarToggleLabel), this.sidebarToggleBadge && (h("swirl-badge", { key: '64df1457136519849839dc871980af569ddf46e8', "aria-label": this.sidebarToggleBadgeAriaLabel, label: !hasSidebarToggleBadgeWithLabel
                 ? this.sidebarToggleBadgeAriaLabel
-                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: 'a8757397ca17b7b7be1c780d6de54794106878e7', name: "avatar" }))), h("div", { key: '76257047270efe42bf2576aa521b40442160ed2f', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: '05b829a7680467dbdac8c4e52173a86eb29599b5', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: '0d5afd67c99058c681bf49e367c231bdfb191a23', class: "shell-layout__mobile-header" }, h("slot", { key: '4ffe61e6cda0ce52dc96dbbd7185b73b6dcdd7d8', name: "mobile-logo" }), h("div", { key: '61867cd4afb38ecebc87d875a8e0547d91386218', class: "shell-layout__mobile-header-tools" }, h("slot", { key: '8798dc7157c5411cfec8c4082a3dfe5ccfb92ce0', name: "mobile-header-tools" }), h("button", { key: 'c3ba2e0e966e62a9a3b3a03fe7e86c423362f87f', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'f27f906df5f50fa010e317c6b78ae5a8375adab8', size: 20 }), h("swirl-visually-hidden", { key: '551fe07b112b50a1a9d390fae0d569da8a1bf863' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: '78ae440e5ae9deeb7b04870f40f4ed52f2ef38af', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'f5e7f93dafde181772a16ea40e005461d5d5596a' }, h("span", { key: 'f76170fa32db6e65cdb2d83ac8376a6dc62a7d21', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: '4dc97d00628e95714eb95761206399e7b3f3e62c', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '299175ab36b2ccbbaf43010e79740540da8b50ee', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '81853b8d559c69d35c3827ba64f6b033d7be4d3c', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'ee12c7d539d53eaf3422768f120ded08f92250a3', paddingBlockEnd: "16" }, h("swirl-stack", { key: '400109696a4e2622391cfe6f9c5e5dcfc8fc0328', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '908817774ea37ebfea93091a4dfedb011488acf2', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
+                : String(this.sidebarToggleBadge), size: "xs", variant: !hasSidebarToggleBadgeWithLabel ? "dot" : "default" }))), h("slot", { key: '468da72048d32b5b602de80c8e97b049d2755ea5', name: "avatar" }))), h("div", { key: '515317c8a88419e1a156521ddb05656d220c7cad', class: "shell-layout__mobile-nav-backdrop", onClick: this.onNavigationClick }), h("nav", { key: 'c81f2ee3e31bd2a7264f7c7264f2c48150798b36', "aria-labelledby": "main-navigation-label", class: "shell-layout__nav", onClick: this.onNavigationClick, ref: (el) => (this.navElement = el) }, h("div", { key: 'aef50f21bf0e2a0313b5138689b07a8fd9b919b1', class: "shell-layout__mobile-header" }, h("slot", { key: 'b8301b3773354794bd822a63b91f7677d3e2ec59', name: "mobile-logo" }), h("div", { key: '5286fc9473b6896c79861f18aa88de0a3deaa968', class: "shell-layout__mobile-header-tools" }, h("slot", { key: 'ef725c8ca0e5e856e08c2d13a0834d737393953d', name: "mobile-header-tools" }), h("button", { key: '41a97643f7f70cea8b4dd29f6b3389d8bd3405ed', class: "shell-layout__header-tool", type: "button" }, h("swirl-icon-double-arrow-left", { key: 'b9e4265dab5ceac0f2a5dda36d5968f9bb197187', size: 20 }), h("swirl-visually-hidden", { key: 'dc801458ed0be7a694021cd3e035c04f197c9916' }, this.hideMobileNavigationButtonLabel)))), h("div", { key: 'c23f2961e03427ff0650659cea63336147d323d6', class: "shell-layout__nav-body" }, h("swirl-visually-hidden", { key: 'c1d085122f8e1eb4bbf6061ba6c9ba02640287d8' }, h("span", { key: 'd08cf81b5366576455300056b509d0ef556b2e85', id: "main-navigation-label" }, this.navigationLabel)), h("slot", { key: 'f72f5044ea94c9c3a68045d7d8b37241ddea0799', name: "nav", onSlotchange: this.collectNavItems }), h("div", { key: '8bbef6e1ef4b8a3af5fbb1151af036b7ce3a5eac', class: "shell-layout__secondary-nav" }, h("swirl-separator", { key: '3f24b1d4d0ee6bb4d6ca066065a139f3b6dd1fc9', color: "strong", spacing: "16" }), this.enableSecondaryNavGridLayout && (h("swirl-box", { key: 'fe64ad93e40a3fb9c2260688cdd037fcffe7a713', paddingBlockEnd: "16" }, h("swirl-stack", { key: '9148f7d326df839080c4e8fc75894f1f423125b4', justify: mainNavCollapsed ? "center" : "space-between", orientation: "horizontal" }, h("swirl-button", { key: '16d903a163d9794bbb7cda25e09887882f6fe575', hideLabel: mainNavCollapsed, icon: this.secondaryNavCollapsed
                 ? "<swirl-icon-expand-more></swirl-icon-expand-more>"
                 : "<swirl-icon-expand-less></swirl-icon-expand-less>", label: this.secondaryNavCollapsed
                 ? this.secondaryNavExpandLabel
-                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: 'ec9f8bb35c7425848722f09d03e75a3a386ec1d2', icon: this.secondaryNavView === "grid"
+                : this.secondaryNavCollapseLabel, onClick: this.toggleSecondaryNavCollapse, variant: "plain" }), !mainNavCollapsed && !this.secondaryNavCollapsed && (h("swirl-button", { key: '4379487752649a7838eb4ad51f76a518a2b9417f', icon: this.secondaryNavView === "grid"
                 ? "<swirl-icon-menu></swirl-icon-menu>"
                 : "<swirl-icon-hamburger-menu></swirl-icon-hamburger-menu>", iconPosition: "end", label: this.secondaryNavView === "grid"
                 ? this.gridNavLayoutToggleLabel
-                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '2b579ae6cb35b22c47305a5cb938ff31df46f1f9', class: {
+                : this.listNavLayoutToggleLabel, onClick: this.toggleSecondaryNavView, variant: "plain" }))))), h("div", { key: '224675be0ab1a25081849e00aca78b6786f792f2', class: {
                 "shell-layout__secondary-nav-items": true,
                 "shell-layout__secondary-nav-items--grid-view": this.enableSecondaryNavGridLayout &&
                     (this.secondaryNavView === "grid" || mainNavCollapsed),
-            } }, h("slot", { key: 'cb1a07937211453eae9950ef2a3ec3651f148b1a', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: 'ac96d89d110035a88b58381c4c348838301d9a28', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '3f3857701b1a9779a2d1652a9a243d5ba1c05b16' })), h("aside", { key: 'f22ef8f36c4d5c503b3a8d9082d84f505f2ed9d8', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: '43ccf10c7a9c3b6446b8b37b35e4c8ef08a32944', class: "shell-layout__sidebar-body" }, h("div", { key: '839e277bddd60541a7d9e1bb01ec494bb57c6812', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: 'de023c880c9666cd3a57d67ea9d1906aa55c7ccf', name: "sidebar-app-bar" })), h("div", { key: '17c6880f74c6ff3f07c2ff6df7ff5bfbe9b290e8', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '1b1005cfa77fb9618bcde0a7fc57d12447a4e674', name: "sidebar" })))))));
+            } }, h("slot", { key: '48c268d6979f56da311630c754c5428c3aa3f5c3', name: "secondary-nav", onSlotchange: this.collectNavItems }))))), h("main", { key: '34a6aa2110a59bfd0cd15ce28379745fd09546b1', class: "shell-layout__main", id: "main-content" }, h("slot", { key: '64afad82d89ceeb9979d551eded7fc2df1a70d77' })), h("aside", { key: 'fede910a0f0c9ec1ccbc8ec5435c073a657d5ffe', class: "shell-layout__sidebar", inert: this.sidebarActive ? undefined : true }, h("div", { key: 'fc1a113e85dfc0d8f3e8e7e3abd55d42d93d94a1', class: "shell-layout__sidebar-body" }, h("div", { key: 'dcd1225bdd9718638eff2c7d99bf93f8f14be4d0', class: "shell-layout__sidebar-app-bar" }, h("slot", { key: '9d331ceb7d9f81f85a5d6c30cf0b91da395eda94', name: "sidebar-app-bar" })), h("div", { key: '6d96ee15abaa6ab8789a2a66b0c8b96d9958999a', class: "shell-layout__sidebar-content", onScroll: this.onSidebarScroll, ref: (el) => (this.sidebarContentEl = el) }, h("slot", { key: '0ffe908103871d8084f4bd409c92c1adb67de4f4', name: "sidebar" })))))));
     }
     static get is() { return "swirl-shell-layout"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-shell-navigation-item/swirl-shell-navigation-item.js

@@ -31,7 +31,7 @@ export class SwirlShellNavigationItem {
         });
         const isLink = Boolean(this.href);
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: 'a1b3ea3ad7cb246cef823a156e4fc430c215d122' }, h("swirl-tooltip", { key: '25aaea24d23b3829c8d63e3f82b337c20d0d2251', active: this.hideLabel, content: this.label, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: '51d8abca1acaf7c01c93dbd238aeef8a70492167', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '87eb8ac822b8cb939ccaffe223e7c1a7503ce42a', class: "shell-navigation-item__icon" }, h("slot", { key: '3f3c223699f98e38a05dd2a2ed1d8afebdd3de42', name: "icon" })), !this.hideLabel ? (h("span", { class: labelClassNames }, this.label)) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { key: '3321b835ce0dfacbf936f9448fa7a5e7e732ae75', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
+        return (h(Host, { key: 'c16ddc8b000ad97dbcfcddb70e9bf3b5bdc87f1b' }, h("swirl-tooltip", { key: '684cdbc0eef4f9e265e4590b448d25c53f0870b4', active: this.hideLabel, content: this.label, delay: 100, position: "right", positioning: "fixed" }, h(Tag, { key: 'cb3ddc1e3d8ebc7afafbd2db61a434d10c66fbcf', class: tagClassNames, href: this.href, target: this.target, type: isLink ? undefined : "button" }, h("span", { key: '7142bceff2889a4a16f2dcd6e050c2c4c0278722', class: "shell-navigation-item__icon" }, h("slot", { key: '85d7c6a35e2f7dac518234562a8bf43062a944cf', name: "icon" })), !this.hideLabel ? (h("span", { class: labelClassNames }, this.label)) : (h("swirl-visually-hidden", null, h("span", { class: labelClassNames }, this.label))), this.badgeLabel !== undefined && this.badgeLabel !== null && (h("swirl-badge", { key: '2e412bc87973db3c4f6aaafe0f99962e7dfa85b0', "aria-label": this.badgeLabel, class: classnames("shell-navigation-item__badge", {
                 "shell-navigation-item__badge--dot": this.badgeLabel === "",
             }), label: this.badgeLabel, size: "xs", variant: this.badgeLabel === "" ? "dot" : "default" }))))));
     }

package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.js

@@ -10,11 +10,11 @@ export class SwirlSkeletonBox {
     }
     render() {
         const className = classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
-        return (h(Host, { key: '3547e916b38260198087a2edce3344e043779f4c', style: {
+        return (h(Host, { key: 'b9a49a4e913403f4d41b986af4a55fb5c68e0936', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
                     : undefined,
-            } }, h("div", { key: 'a5aba4e82e92fc667a94278aa7f26e240438db05', class: className, style: {
+            } }, h("div", { key: 'fb9bb2460b77a00ee56fee7ed091a99f036a9ebf', class: className, style: {
                 aspectRatio: this.aspectRatio,
                 borderRadius: this.borderRadius !== "pill"
                     ? `var(--s-border-radius-${this.borderRadius})`