npm - @getflip/swirl-components - Versions diffs - 0.199.0 → 0.200.0 - Mend

@getflip/swirl-components 0.199.0 → 0.200.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (278) hide show

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

@@ -174,13 +174,13 @@ const SwirlModal = class {
             "modal--scrolled": this.scrolled,
             "modal--scrolled-down": this.scrolledDown,
         });
-        return (index.h(index.Host, { key: 'e0d6cff9311b03a20519e6c5acddd02ecb9b932b' }, index.h("section", { key: '5c73a21690b7bc2c2a15df81a5d66bcfccec6044', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'e6d65f93d0b33f57ce38426ee13f965eb75e3fd6', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: '710385a07e9cfa669b5c7dfa0c5270e69401bb92', class: "modal__body", style: {
+        return (index.h(index.Host, { key: 'd101cece24cb469e6300a88cda41a67281cd2b67' }, index.h("section", { key: 'ebad873d554eb02f4935d21d52e329320d31a47e', "aria-hidden": String(!this.isOpen), "aria-label": this.label, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, role: "dialog", ref: (el) => (this.modalEl = el) }, index.h("div", { key: 'bf4a0569609c57d8f13c98ea86dc2fa22bb608d8', class: "modal__backdrop", onClick: this.onBackdropClick }), index.h("div", { key: 'd8624f029c1a40a13159ec2f6eb244233a337b9b', class: "modal__body", style: {
                 "--swirl-modal-max-height": this.maxHeight,
                 "--swirl-modal-height": this.height,
                 maxWidth: this.maxWidth,
-            } }, index.h("header", { key: '1f902c67e9443959eb8c50498338a6d8377f6d27', class: "modal__custom-header" }, index.h("slot", { key: '4b52c1d0748eefcf31f22adaf33c57e640770f68', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: '6f786d45699894589d3dcec17c988562056e7330', class: "modal__header" }, index.h("div", { key: '6e81e070e4da8af19da49f762aeb79da2d992adb', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: '10273d46ee18becf8fbbef4e33c0a4397144a687', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
+            } }, index.h("header", { key: '1bd7f42348ca11ded0c28d5324b6f070949b44c9', class: "modal__custom-header" }, index.h("slot", { key: '39fbacbcd794a371b898943bce382fee3d86a44b', name: "custom-header" })), (!this.hideLabel || !this.hideCloseButton) && (index.h("header", { key: 'c397f6bc837f3b8eb54615110f5938ed180cfb26', class: "modal__header" }, index.h("div", { key: '2a2624b81f447f14c4c02528a3cde361a9ce2dcb', class: "modal__header-bar" }, !this.hideCloseButton && (index.h("swirl-button", { key: 'eb1a57b60af155cfc640ef2ef0b6ec0e57889c88', class: "modal__close-button", hideLabel: true, icon: this.variant === "default"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: 'ed034ca8589633bddfe7ae888a3c45d7470c4fe8', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: '7952a17d7f52816034821274b13c9cc2e53854e1', class: "modal__content-container" }, index.h("div", { key: 'bb4f5f0e753acb80fd89ccd3318231ef7e25c2ae', class: "modal__primary-content" }, index.h("div", { key: 'd2a3da082c86d86eb9b9cc314ff3ddd2ee778933', class: "modal__header-tools" }, index.h("slot", { key: 'f1fddbabbc2484a571066853c5b4e79c6c8a18f8', name: "header-tools" })), index.h("div", { key: '22201b867e311ffc8b6102b858af3342b6a81143', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '2d26d89aa4bd7ef01232c01d4c5b73a5c6897c8a' }))), index.h("div", { key: 'ece7d0b4c713242b81c9d9445059902828fdb4a2', class: "modal__secondary-content" }, index.h("slot", { key: 'ec9110e80192574b46a1cbb188cd775893a1602e', name: "secondary-content" }))), index.h("div", { key: 'd70972635714292f433b045ac62b59300aa8df10', class: "modal__custom-footer" }, index.h("slot", { key: 'c1719b76ab2210a8de66bb9a31b4dde8ae441e30', name: "custom-footer" })), showControls && (index.h("footer", { key: 'ad7dbb0d9294fb7792a5ef7c2b37b8adcd050b55', class: "modal__controls" }, index.h("swirl-button-group", { key: '5002226896d72cc8970edea70303345170ef5bd9', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '076d9679fefe019467292d6977c6fe8def3ac22a', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: '48480a22f1c397ac6cf264226ec6b8ee47ecab03', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
+                : "<swirl-icon-double-arrow-right></swirl-icon-double-arrow-right>", label: this.closeButtonLabel, onClick: this.onCloseButtonClick })), !this.hideLabel && (index.h("swirl-heading", { key: '7d5e09b46ed9065e8d21830e4d7fa83687b0b911', as: "h2", class: "modal__heading", level: 3, text: this.label }))))), index.h("div", { key: 'a2e87dc146c87c1f900c1692a3d00cc05691d032', class: "modal__content-container" }, index.h("div", { key: '413163c6bc7bd8057be1bb73e30f0db901d5d9c8', class: "modal__primary-content" }, index.h("div", { key: 'cd9db06581c8286137943e5a2f05d11bc7febe42', class: "modal__header-tools" }, index.h("slot", { key: '5a92044e76f842523e6e2e74413826d9d32180da', name: "header-tools" })), index.h("div", { key: 'f1eae6dde8e0cb56ec4dd5a92903a5f99738e4cf', class: "modal__content", onScroll: this.determineScrollStatus, ref: (el) => (this.scrollContainer = el) }, index.h("slot", { key: '22fe6f164c770c6b61b0c02f0aa8ce0bed9dbf49' }))), index.h("div", { key: '5bda225a1be3dc0e41a6fba093e430096ca372c3', class: "modal__secondary-content" }, index.h("slot", { key: '24bbcea293f3f849dfec59a00ba6c78d8d9adfa6', name: "secondary-content" }))), index.h("div", { key: '1d251bb36ac9267efaff5ebbb4dfbfeceae6b001', class: "modal__custom-footer" }, index.h("slot", { key: '64bac816af117d2c1ded2e3e2296e5dc3086f1eb', name: "custom-footer" })), showControls && (index.h("footer", { key: '84941235ca72a66ec1e8e880af177bf67d6264ba', class: "modal__controls" }, index.h("swirl-button-group", { key: 'f5e332e1831b8f168375673cc51f87fd56ef7f97', wrap: true }, this.secondaryActionLabel && (index.h("swirl-button", { key: '4c104649ec6bac6f17c1e57ea8b79762490c5da3', label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { key: 'df096b033de95729cd0c12a70afc17b4afd5dbc0', intent: "primary", label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: "flat" })))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -371,7 +371,7 @@ const SwirlTag = class {
         const className = index$1.classnames("tag", `tag--intent-${this.intent}`, `tag--size-${this.size}`, {
             "tag--bordered": this.bordered,
         });
-        return (index.h(index.Host, { key: '3496f165393a6aa0a30beb97c21ff8a4ab521f42' }, index.h("span", { key: '1b44749ea7e053219db5dd6e57724815b63e4767', class: className, part: "tag" }, index.h("span", { key: 'df66f93c753e26198a1abe4ab59711e02778c442', class: "tag__label" }, this.label), this.removable && (index.h("button", { key: '0f5419a605e08152604e50f3419968d945e78814', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { key: '2ea41a2462e394244e1c02f009f53c61ab62dd8e', size: 16 }))))));
+        return (index.h(index.Host, { key: 'a7e7462eac54e144fc9d1d442d33287c480eefce' }, index.h("span", { key: 'b758ec2a9c31032caa720bfefaf769f3f2cefe6a', class: className, part: "tag" }, index.h("span", { key: '65c171c46715749bbc22c1ceff96963589e298ac', class: "tag__label" }, this.label), this.removable && (index.h("button", { key: 'd1ea6ea0df8612c3c4f2a4bb9a4d5b0be5f69279', "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { key: 'f9d220ded4892a78413f4b5415b3083842fcd0ef', size: 16 }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-pagination.cjs.entry.js CHANGED Viewed

@@ -92,7 +92,7 @@ const SwirlPagination = class {
         const showDropDown = this.variant === "advanced";
         const ariaPageLabel = `${this.page.toLocaleString()} ${this.pageLabel} ${this.pages.toLocaleString()}`;
         const className = index$1.classnames("pagination", `pagination--variant-${this.variant}`);
-        return (index.h(index.Host, { key: '32b06d1b1bc2b0c558b5535f7733231829ec8890' }, index.h("nav", { key: '5ad54318dd933938f199da1901759daf95ab9a46', "aria-label": this.label, class: className }, index.h("ul", { key: 'bf332f10858b4eb00ef829e9b9b6971e7316f508', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (index.h("li", { key: 'd98231af57b4baac83c5595dbe87d443e81e3942', class: "pagination__list-item" }, index.h("label", { key: 'caa13b6b81fbc3c5c09a6baaa32c6cb1b4599fc0', class: "pagination__page-size-selection" }, index.h("swirl-text", { key: '65fbe4ea5b971a9547cffa79a8173f942ebd9c88' }, this.pageSizeSelectLabel), index.h("swirl-stack", { key: '324004a6b0623a58c3f4aeac303f5ccae242d4ce', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, index.h("select", { key: 'e64168057e6d9d8d54d1d2a2e933dc1e0b13f008', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (index.h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), index.h("swirl-icon-expand-more", { key: '4574a8040a5cab8fa731cc00be512486956b6bb6', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), index.h("li", { key: '859e184cd3eeb8b20fa5556f14a7578d6328d5bb', class: "pagination__list-item" }, index.h("swirl-button", { key: '02429facb6f15eb7ea5146eb75cf69247f479615', 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 })), index.h("li", { key: '512d14479fcaccc7a88f28bdb471fc6b5e72b7eb', class: "pagination__list-item" }, index.h("swirl-button", { key: '4a5a3654328608b63b97dd91246b3dddddbd0829', 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 ? (index.h("li", { class: "pagination__list-item  pagination__page-label" }, index.h("span", null, showDropDown ? (index.h("span", { "aria-current": "page", class: "pagination__advanced-label" }, index.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 }), index.h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (index.h("span", { "aria-current": "page" }, ariaPageLabel))))) : (index.h("li", { class: "pagination__list-item" }, index.h("swirl-visually-hidden", null, index.h("span", { "aria-current": "page" }, ariaPageLabel)))), index.h("li", { key: '5a44c51f2c9215e55a36192e14fd966d543ba819', class: "pagination__list-item" }, index.h("swirl-button", { key: '5a52c93183d940f35adf43e710816b81a16ef3d0', 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 })), index.h("li", { key: '7b3a489abcc0b043df379eb962d36ff9e9050d55', class: "pagination__list-item" }, index.h("swirl-button", { key: 'b1cfd3eb1756a44ad4464b8c1bb5e8903187b64f', 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 (index.h(index.Host, { key: 'a868ebbd52be7109114aa9902e90da4e8b3cc05b' }, index.h("nav", { key: 'c901f4199b231df362a5c245f39793158347e597', "aria-label": this.label, class: className }, index.h("ul", { key: '030fd790cf353b89a48d8b8d990c2e13984dbad6', class: "pagination__list", part: "pagination__list" }, this.showPageSizeSelect && (index.h("li", { key: 'dcd1ee3eb343ae6a095836719c94b554b589baf1', class: "pagination__list-item" }, index.h("label", { key: '84d344807e9efb1b6c7d8ca867e234fcd1552f3e', class: "pagination__page-size-selection" }, index.h("swirl-text", { key: '76eda5b61d9c7e9a078e0c6a3538dcc548c096f7' }, this.pageSizeSelectLabel), index.h("swirl-stack", { key: 'fa95c18ef16df5f3cee53d82a3b879c124f2ea52', align: "center", class: "pagination__page-size-select-container", orientation: "horizontal" }, index.h("select", { key: 'bae99f7594c60a9db45ea6c86edf47bbeafe8ed8', class: "pagination__page-size-select", onChange: this.onPageSizeSelect }, this.pageSizeOptions.map((pageSizeOption) => (index.h("option", { key: pageSizeOption, selected: pageSizeOption === this.pageSize, value: pageSizeOption }, pageSizeOption)))), index.h("swirl-icon-expand-more", { key: '3e02befb8461a4ffc9256058bd088c91447b000c', "aria-hidden": "true", class: "pagination__page-size-select-icon", size: 16 }))))), index.h("li", { key: 'c6c21f0ee13e46586bf0982c2fb97636ee016285', class: "pagination__list-item" }, index.h("swirl-button", { key: '06f41cac26e65a3b4a1493bc3824e9d9961a83ae', 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 })), index.h("li", { key: 'f519537b3bc4b4c5dde7cee4623a23a28953c922', class: "pagination__list-item" }, index.h("swirl-button", { key: '22db009bbff5ba95a12f847e9da292ee6b2e3ba4', 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 ? (index.h("li", { class: "pagination__list-item  pagination__page-label" }, index.h("span", null, showDropDown ? (index.h("span", { "aria-current": "page", class: "pagination__advanced-label" }, index.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 }), index.h("span", { "aria-hidden": "true" }, this.pageLabel, " ", this.pages.toLocaleString()))) : (index.h("span", { "aria-current": "page" }, ariaPageLabel))))) : (index.h("li", { class: "pagination__list-item" }, index.h("swirl-visually-hidden", null, index.h("span", { "aria-current": "page" }, ariaPageLabel)))), index.h("li", { key: '5084487945838fc47988d1bab2f97aaf2198c938', class: "pagination__list-item" }, index.h("swirl-button", { key: '1b7243f892803406be2fa5956def1e79f37fcc04', 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 })), index.h("li", { key: '006a6afdc28d7033fffa3b90e72f2371a22abcd7', class: "pagination__list-item" }, index.h("swirl-button", { key: 'd409925fbd17f122bd01d32f4d17b71d40f2c414', 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 }))))));
     }
 };
 SwirlPagination.style = SwirlPaginationStyle0;

package/dist/cjs/swirl-popover_2.cjs.entry.js CHANGED Viewed

@@ -260,14 +260,14 @@ const SwirlPopover = class {
             "popover--inactive": !this.active,
             "popover--transparent": this.transparent,
         });
-        return (index.h(index.Host, { key: '5f8dcfa33c396982ce52e60ed5ad6ee5d3bac988' }, index.h("div", { key: '0c588f47287aa3332ceefaf070f6c47de1efe773', class: className, onKeyDown: this.onKeydown }, index.h("div", { key: 'b9e2689de51a542ca2f51c101f372bcc49e12034', "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 (index.h(index.Host, { key: 'f3bca2b5bafb8518298ab646ac1c348b5c56b232' }, index.h("div", { key: '5c035656e06397cec7631204d61faece94c616fb', class: className, onKeyDown: this.onKeydown }, index.h("div", { key: 'f2d24daa53c0e5165c5c60e38cd872179c5473ba', "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" }, index.h("span", { key: '63b7ed71060f0b5faf60820724c129657b19ef31', class: "popover__handle" }), index.h("div", { key: 'e1a814188f9959f0d2b129a1847ca419f619ee0b', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
+            }, tabindex: "-1" }, index.h("span", { key: '4efd18f520572ae456d0e5bbfc3c92a158b771bd', class: "popover__handle" }), index.h("div", { key: 'fa2c01019b25ec19830887d6ea72f08ca42daf27', class: "popover__scroll-container", part: "popover__scroll-container", ref: (el) => (this.scrollContainer = el), style: {
                 maxHeight: !mobile && Boolean(this.maxHeight)
                     ? this.maxHeight
                     : undefined,
-            } }, index.h("slot", { key: '4f88b5d3c4c6438f3ccff081b462fc13dc74bdb9' }))), this.active && (index.h("div", { key: 'f2d734979792f0cd84d2258008d36bec146fc7b2', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
+            } }, index.h("slot", { key: '6ea169f4b966c6bef3037e9a1f1d3f39e0bda3b3' }))), this.active && (index.h("div", { key: 'cadaaf7d7ba1a45bb07bcd41fae23b83e3d95394', class: "popover__backdrop", onClick: this.onCloseButtonClick })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-progress-indicator.cjs.entry.js CHANGED Viewed

@@ -22,7 +22,7 @@ const SwirlProgressIndicator = class {
         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 (index.h(index.Host, { key: '1775b978f39e6cada5a4f1dd183777c6264f278b', class: this.variant }, this.variant === "bar" && (index.h("progress", { key: 'aa0728a4cd40ea04b065658ddb8a814ef3014b93', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (index.h("span", { key: '9f3e31c44e00bb29e058ca3d7f5fb9839b7a58f8', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, index.h("svg", { key: 'f505f3a9c661f258fec8d47a07b254690a1e159f', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, index.h("circle", { key: 'ed74d368a592b861de6c51310b6f7ee8d228fdcd', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), index.h("circle", { key: '91cb25a49057fc18b8bf2c4d11ad5f33c465bb2e', 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 (index.h(index.Host, { key: 'ca77d885b616b669a5033061be8f2f21343a21d7', class: this.variant }, this.variant === "bar" && (index.h("progress", { key: '71195582ff12f2710703846d15549aa8ceeb3712', "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className, max: 100, value: this.value })), this.variant === "circle" && (index.h("span", { key: '2d0da5160a59cd6002c8ee9fd2b907b6fe7210bd', role: "progressbar", "aria-label": this.label, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": this.value, class: className }, index.h("svg", { key: '758e7629cb59f15066e898f5b052d3e861bf4c1d', class: "progress-indicator__circle", focusable: "false", viewBox: `0 0 ${(radius + strokeWidth) * 2} ${(radius + strokeWidth) * 2}` }, index.h("circle", { key: '3a50b796bdd0d77bfdca2fd6260e98674094e4d4', class: "progress-indicator__circle-background", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth }), index.h("circle", { key: 'f5a460cc868e4445682312f7ce48e06cc71e95b8', class: "progress-indicator__circle-value", cx: radius + strokeWidth, cy: radius + strokeWidth, r: radius, fill: "none", "stroke-width": strokeWidth, "stroke-dasharray": circumference, "stroke-dashoffset": dashOffset }))))));
     }
 };
 SwirlProgressIndicator.style = SwirlProgressIndicatorStyle0;

package/dist/cjs/swirl-radio.cjs.entry.js CHANGED Viewed

@@ -46,7 +46,7 @@ const SwirlRadio = class {
             "radio--invalid": this.invalid,
             "radio--unchecked": unchecked,
         });
-        return (index.h(index.Host, { key: '356f0ffb73ee231dd2628b5140e49cb26f9125d2', style: { width: this.variant === "card" ? "100%" : undefined } }, index.h("label", { key: '2d53f5c89e7b6c1d183c82833aebd53c187bcaf8', class: className, htmlFor: this.inputId }, index.h("span", { key: 'f24232f655cb662a3bc2e4e7d9fd5fdb207126fa', class: "radio__control" }, index.h("swirl-visually-hidden", { key: '92af7f54824462774b9979a9c14465b0bd88309c' }, index.h("input", { key: '53a2420a5939ed9b9ce6154fc1db632a9ecc6998', "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 })), index.h("span", { key: 'e173e8f8368e57a81c79b6a5579950cf9b7e768c', "aria-hidden": "true", class: "radio__box" })), index.h("span", { key: '2bfe5599e18cf9e9698c224dcd10fa4c0cb03a3d', class: "radio__label-container" }, this.label && index.h("span", { key: '821bcfe218c5dc5dbc81fdf43282b772542eef55', class: "radio__label" }, this.label), this.description && (index.h("span", { key: '45cd8e26727739a330c5332ece9fceef25e98fc1', class: "radio__description", innerHTML: this.description }))))));
+        return (index.h(index.Host, { key: '406d97d8e87da8a17bbff7b67cf6ecbf7d908064', style: { width: this.variant === "card" ? "100%" : undefined } }, index.h("label", { key: '6e4e93dc91ebfb3264226fc58e9322184179698d', class: className, htmlFor: this.inputId }, index.h("span", { key: '255519514587f38e0e9aa1beb3cee17993ff5cc4', class: "radio__control" }, index.h("swirl-visually-hidden", { key: '1bb98d55d2caceb15f72a2a82c3a0957a6509d0b' }, index.h("input", { key: '928992a95349bd917415be1a34c73bacec246bad', "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 })), index.h("span", { key: 'd912ffceed37c2f4201396d74cdff439cb41e735', "aria-hidden": "true", class: "radio__box" })), index.h("span", { key: 'c3cdad462855597283f685bca62bf7bdef10e04d', class: "radio__label-container" }, this.label && index.h("span", { key: '56a0225a0c1e8e42e08187f895ddf31745528fa5', class: "radio__label" }, this.label), this.description && (index.h("span", { key: '844c8355d1f8fc2d679df288fb19a6edc497d009', class: "radio__description", innerHTML: this.description }))))));
     }
 };
 SwirlRadio.style = SwirlRadioStyle0;

package/dist/cjs/swirl-search.cjs.entry.js CHANGED Viewed

@@ -77,7 +77,7 @@ const SwirlSearch = class {
         const className = index$1.classnames("search", `search--variant-${this.variant}`, {
             "search--disabled": this.disabled,
         });
-        return (index.h(index.Host, { key: '9e344f91f91a22e9ca16798c23ddef6cbd2be45f' }, index.h("span", { key: '35b19da8d567cdb39f3b6fb3b37a304c45f7947b', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: '4a44038ca74e7b10d656ad4dc1cd287a5ac32f66', "aria-hidden": "true", class: "search__icon" }), index.h("input", { key: '52fca9f3a7061ecf476ab11ad07fa04eac393cd7', "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 && (index.h("button", { key: 'f8f0a775a767c9a0e618179461cdeb9ece66b337', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, index.h("swirl-icon-cancel", { key: 'e53c5ea165eb86907884c90aad9233b7492fb622' }))))));
+        return (index.h(index.Host, { key: '5bf70e02de79109b2b06f398d3ce1859f76df9e3' }, index.h("span", { key: '826ecc2b262862f239e554b2185329580cd83a17', class: className, ref: (el) => (this.iconEl = el) }, index.h("swirl-icon-search", { key: 'adb74eac3160bffcffc8088c1a500f2215967165', "aria-hidden": "true", class: "search__icon" }), index.h("input", { key: '9b3504f92c7cec190ef9b4a6613d513ebd960e7e', "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 && (index.h("button", { key: 'fe42a660d21d6681cc30e648f7f616e6636446c3', "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, index.h("swirl-icon-cancel", { key: 'cd55c1ccdb59ab69129e9751dd4d25f0157f585a' }))))));
     }
 };
 SwirlSearch.style = SwirlSearchStyle0;

package/dist/cjs/swirl-skeleton-box.cjs.entry.js CHANGED Viewed

@@ -19,11 +19,11 @@ const SwirlSkeletonBox = class {
     }
     render() {
         const className = index$1.classnames("skeleton-box", `skeleton-box--border-radius-${this.borderRadius}`, { "skeleton-box--static": !this.animated });
-        return (index.h(index.Host, { key: 'dbfc23f08900575a026547b16ef9a4ff409545ca', style: {
+        return (index.h(index.Host, { key: 'd2dbe289c28013f1e5a3e09beb6e7a7a893d6144', style: {
                 width: !Boolean(this.width) && !Boolean(this.aspectRatio)
                     ? "100%"
                     : undefined,
-            } }, index.h("div", { key: '967a8b05bfaf1f5c358db0bb3ef353f0fc5c27c6', class: className, style: {
+            } }, index.h("div", { key: 'd6b77cbe897bd99e91070bb83f2598a6e8d4c09f', class: className, style: {
                 aspectRatio: this.aspectRatio,
                 borderRadius: this.borderRadius !== "pill"
                     ? `var(--s-border-radius-${this.borderRadius})`

package/dist/cjs/swirl-skeleton-text.cjs.entry.js CHANGED Viewed

@@ -18,7 +18,7 @@ const SwirlSkeletonText = class {
     render() {
         const className = index$1.classnames("skeleton-text", `skeleton-text--size-${this.size}`, { "skeleton-text--static": !this.animated });
         const lineClassName = index$1.classnames("skeleton-text__line", `skeleton-text__line--size-${this.size}`);
-        return (index.h(index.Host, { key: '3fefdb893eed87b924e019a62a85d44e570ae40a' }, index.h("div", { key: '798a7745556411beb6d53e60ea4282a498a85392', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index$1) => (index.h("div", { class: lineClassName, key: index$1, part: lineClassName }))))));
+        return (index.h(index.Host, { key: '69157cd4b1f456890f3d60e0710b7c7df75d7995' }, index.h("div", { key: '4645af2dfd3e79330282cd80cdde83a9409a749f', class: className, part: className }, new Array(this.lines).fill(undefined).map((_, index$1) => (index.h("div", { class: lineClassName, key: index$1, part: lineClassName }))))));
     }
 };
 SwirlSkeletonText.style = SwirlSkeletonTextStyle0;

package/dist/cjs/swirl-stack.cjs.entry.js CHANGED Viewed

@@ -22,7 +22,7 @@ const SwirlStack = class {
     render() {
         const Tag = this.as;
         const className = index$1.classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
-        return (index.h(index.Host, { key: 'abb1e7453f56949da78f787cc919efdf3eb0d6e0', style: { height: this.height } }, index.h(Tag, { key: '7edebedd12178a98119a6fb79dcb971c8050a6ec', class: className, style: { gap: `var(--s-space-${this.spacing})`, height: this.height } }, index.h("slot", { key: '73090a7a80f5469adc2f0ba90f6cc29e066a4fb4' }))));
+        return (index.h(index.Host, { key: '24ab0f168eba0b98ba7023b8e80da49d0a23a45e', style: { height: this.height } }, index.h(Tag, { key: '79d1ef08f5268fbe5789c1568461282c7e4097a6', class: className, style: { gap: `var(--s-space-${this.spacing})`, height: this.height } }, index.h("slot", { key: 'a4f47f46c9ff3b75b9f4d18cc320cd48cdab5d02' }))));
     }
 };
 SwirlStack.style = SwirlStackStyle0;

package/dist/cjs/swirl-status-indicator.cjs.entry.js CHANGED Viewed

@@ -16,7 +16,7 @@ const SwirlStatusIndicator = class {
     }
     render() {
         const className = index$1.classnames("status-indicator", `status-indicator--intent-${this.intent}`);
-        return (index.h(index.Host, { key: '097aef85995b5de1061c44b92f00cb43fff6ff0a' }, index.h("div", { key: '6b4c5685ea39ac25aea01f6cff8be8b4b4d7fe75', class: className }, index.h("span", { key: '69554b422b9c76fb963b7e9c3c36b8a9c2934977', class: "status-indicator__dot" }), index.h("span", { key: '0d1e23026f740310c798af236f662868f6135df2', class: "status-indicator__label" }, this.label))));
+        return (index.h(index.Host, { key: '9f0e9b4f7d3cc04409dc6daaa77be11d8b4fefe7' }, index.h("div", { key: '6ae100f4aad059d72855d0214901a60d67820457', class: className }, index.h("span", { key: '31c5883aa6ef6582f5abc00f7f97d7e25bff97b1', class: "status-indicator__dot" }), index.h("span", { key: '4c5bf98ee5b89260c147351678dae6ddaa04008e', class: "status-indicator__label" }, this.label))));
     }
 };
 SwirlStatusIndicator.style = SwirlStatusIndicatorStyle0;

package/dist/cjs/swirl-switch.cjs.entry.js CHANGED Viewed

@@ -34,7 +34,7 @@ const SwirlSwitch = class {
             "switch--on": on,
             "switch--disabled": this.disabled,
         });
-        return (index.h(index.Host, { key: '1262cec53f0e5c69bbb4bfe128268ec3e0bd548a' }, index.h("label", { key: '82980138871ccfe2b2f645e62f23c4f66b86e7df', class: className, htmlFor: this.inputId }, index.h("span", { key: '1e44c405fea154510f67f3c15929b81833144b45', class: "switch__control" }, index.h("swirl-visually-hidden", { key: '5d650fa027a5c5f0a3c4e5ff237ef503e3ec67fa' }, index.h("input", { key: '6a1f716d991ce5d6d4bd05d849eb01a54817d16a', "aria-checked": ariaCheckedLabel, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, role: "switch", type: "checkbox", value: this.value })), index.h("span", { key: '64c87d8cbb5997c8d9261456719978b999b2328d', "aria-hidden": "true", class: "switch__thumb" })), this.label && !this.hideLabel && (index.h("span", { key: '1e4e173d8362ad17a6e1d5cbe12ff421fe4ddcab', class: "switch__label" }, this.label)), this.label && this.hideLabel && (index.h("swirl-visually-hidden", { key: '2f11a9c72341b91ccf06622a72d83ef37c6f1c39' }, this.label)))));
+        return (index.h(index.Host, { key: 'b73a0baa355e8c9d735a35e21db0f159ac1464fa' }, index.h("label", { key: 'd64e138a07f24f7fa242f64708c8bbbca609f7b5', class: className, htmlFor: this.inputId }, index.h("span", { key: '1cac1350333259d1da98005f12659d6b34b4dbe0', class: "switch__control" }, index.h("swirl-visually-hidden", { key: '95d140a3410b7f3eb3ffaf63ba803d7105b901a6' }, index.h("input", { key: '167ca5da2cf126def2e683ad58b1ac34deee90ab', "aria-checked": ariaCheckedLabel, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, role: "switch", type: "checkbox", value: this.value })), index.h("span", { key: '939fc3e8248a03a90c073a2352cae494b3f70732', "aria-hidden": "true", class: "switch__thumb" })), this.label && !this.hideLabel && (index.h("span", { key: 'cb48d52eb206492642afc9443a4607ecaf000a1f', class: "switch__label" }, this.label)), this.label && this.hideLabel && (index.h("swirl-visually-hidden", { key: 'c4e32359d986473fb122062777c8f978b45a1fa5' }, this.label)))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-tab-bar.cjs.entry.js CHANGED Viewed

@@ -29,7 +29,7 @@ const SwirlTabBar = class {
         this.tabs = [];
     }
     render() {
-        return (index.h(index.Host, { key: 'fc4f658346077ae3c5bf9c2018a0bfdd7544dd3a' }, index.h("div", { key: '8257bb3517c2ce5bdf74195974e350922548c2cc', "aria-label": this.label, class: "tab-bar", onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist" }, this.tabs.map((tab) => {
+        return (index.h(index.Host, { key: '4313606f0cb6043928ba1b873221c2fc43e3dbd0' }, index.h("div", { key: 'ad4b27c49f6a0e8da48628dbc0fc2db53e050d0e', "aria-label": this.label, class: "tab-bar", onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? undefined : "tablist" }, this.tabs.map((tab) => {
             const className = index$1.classnames("tab-bar__tab", {
                 "tab-bar__tab--active": tab.active,
             });

package/dist/cjs/swirl-tab.cjs.entry.js CHANGED Viewed

@@ -19,7 +19,7 @@ const SwirlTab = class {
     }
     render() {
         const className = index$1.classnames("tab", { "tab--active": this.active });
-        return (index.h(index.Host, { key: '039c09954838d369d4cac1b644ab5fac92426b78', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, index.h("div", { key: '5e6b5cc9a9813172450663d48c73ff6aa8b79fe2', class: className, style: { padding: `var(--s-space-${this.padding})` } }, index.h("slot", { key: '7d458496de5f1d427e99f27fb779babe945c49c4' }))));
+        return (index.h(index.Host, { key: '66e47f42bb3d80f2dc0b2564c656df71d353a1d3', "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, index.h("div", { key: '5b88cc86d431aa4baaabdf280ee3503bbca825e6', class: className, style: { padding: `var(--s-space-${this.padding})` } }, index.h("slot", { key: '30f1dbeaccae338f6dbb99633aa48d275f3a75b2' }))));
     }
 };
 SwirlTab.style = SwirlTabStyle0;

package/dist/cjs/swirl-table-column.cjs.entry.js CHANGED Viewed

@@ -28,7 +28,7 @@ const SwirlTableColumn = class {
             maxWidth: this.maxWidth || "",
             minWidth: this.minWidth || "",
         };
-        return (index.h(index.Host, { key: '0860ee11f470871129c4a11ef63043d810770091', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, index.h("span", { key: '53b2dcdd01d45394dd6e1157c7b53af3a71d4817' }, index.h("slot", { key: '205514f166aae08b121a2aca2d0165886cb519af' })), this.sortable && (index.h("span", { key: 'e43739825c670d2a296bd803ea097df0aa83715d', class: "table-column__sort-indicator" }, this.sort === "ascending" && (index.h("swirl-icon-arrow-upward", { key: '9c2e4b52377abc81f2c4dd34ee964a1571307595', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (index.h("swirl-icon-arrow-downward", { key: '9651fbc3d2bad5eeb7ed0cad1c7f28e7124f1620', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
+        return (index.h(index.Host, { key: '4fac797a0fbaf5bd13c68857a708086a4cf4e6ee', "aria-sort": this.sort, class: "table-column", role: "columnheader", style: styles }, index.h("span", { key: 'e60434b33312042f5f572f4e27919c0212ed5f0c' }, index.h("slot", { key: '33e649b664d6113d8f497cbedee8fd186cc0cb96' })), this.sortable && (index.h("span", { key: 'b621d6748bb81ffc3c4c5c36d5b97867ff4e42f7', class: "table-column__sort-indicator" }, this.sort === "ascending" && (index.h("swirl-icon-arrow-upward", { key: '358c6f0c54f321e97209f5da1fe6b9f990df0d10', "aria-hidden": "true", size: 20 })), this.sort === "descending" && (index.h("swirl-icon-arrow-downward", { key: '2b0ec5fbd66ee0a91074d7e9b9707ef3e6c85f09', "aria-hidden": "true", size: 20 })), !Boolean(this.sort) && " "))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-text-input.cjs.entry.js CHANGED Viewed

@@ -188,7 +188,7 @@ const SwirlTextInput = class {
             "text-input--inline": this.inline,
             "text-input--show-password": this.type === "password" && this.showPassword,
         });
-        return (index.h(index.Host, { key: '9c6b8e465aacc0b430d921efed332c3c8caad960' }, index.h("div", { key: 'c2d84474ab893c7f1b902eb03efaee6b7ec1989a', class: className }, this.prefixLabel && (index.h("span", { key: '0184f6971b270c4389d2fd0e30faaec3546a209d', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '22c98797b69a238173095566ee18ee746194b52a', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '5d84435db35ce107a5f5e400f06546cd4777260d', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: '2af1c940dcb277a0170b4fc1ed2d4a193efbd2e2', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: '657cdb8fab5f887de32ff0d33238f67076205f7c', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: 'c69a64b9f4ab0103a87ef09630fc038ec03c2e7d', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: '227b28011bc49ad413c2f89939fea5239fc197c1', class: "text-input__stepper" }, index.h("button", { key: '4f70c5a9e9ff7e7e4109805275b9d258c1ab6f57', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: 'ee223fc15fb936c6eb96f9ba277617b8749dcab5', size: this.iconSize })), index.h("button", { key: 'd0ca4cdac4c3a5c48e2fafe0a5ebeb365d7049a2', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: '1aa6fc4287ec8652e745a412e35e75b4590b6d61', size: this.iconSize })))), this.showCharacterCounter && (index.h("span", { key: '9f3a325a74ab32e16aaa582e5ef353e6de09af14', class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+        return (index.h(index.Host, { key: 'c28a27d2de16b8bab0bcbdedeb4577cc3c5926f1' }, index.h("div", { key: 'de1f6b38914d6dc549145a3a37730689429c9647', class: className }, this.prefixLabel && (index.h("span", { key: '188008d2d73f51127abe4de37306c82110344b29', class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { key: '2264633163429eb618346241bbc99384a62fd4bb', "aria-autocomplete": this.swirlAriaAutocomplete, "aria-controls": this.swirlAriaControls, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, placeholder: !Boolean(this.suffixLabel) ? this.placeholder : undefined, ref: (el) => (this.inputEl = el), required: this.required, role: this.swirlRole, rows: this.rows > 1 ? this.rows : this.autoGrow ? 1 : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.value }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { key: '5c226c6d35fe35b226c08182bce3ee479584d3bc', class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { key: '0825d6c0aa246d8ec97d0f47ca7a33e7437c69fb', "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, part: "text-input__clear-button", type: "button" }, index.h("swirl-icon-cancel", { key: 'cb6d259a99c490949d946014aaccb9b92dd18a45', size: this.iconSize }))), showPasswordToggle && (index.h("button", { key: '5638f04a71fac455dc1a2dc9aff4a19ad55bf9b3', "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("swirl-icon-visibility-off", { size: this.iconSize })) : (index.h("swirl-icon-visibility", { size: this.iconSize })))), showStepper && (index.h("span", { key: '6f8f117c6690ea375472c86befa0bc82d5c1b04d', class: "text-input__stepper" }, index.h("button", { key: '38ddc8bcc00c22f54a4f60195420179bfce8916d', "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-less", { key: 'd7445a23fa97ec57672d65f1334be7ac74368347', size: this.iconSize })), index.h("button", { key: '0295b7bd2bdcb0b3afb431e35c714c01d305eaa5', "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("swirl-icon-expand-more", { key: 'ad77b5281090dcf3dbbdc2adaf2147f937be7273', size: this.iconSize })))), this.showCharacterCounter && (index.h("span", { key: 'c3cdea8f4d70aba88baba76c6c74c39ca83ca367', class: "text-input__character-counter" }, this.value?.length || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
     }
     static get watchers() { return {
         "value": ["watchValue"]

package/dist/cjs/swirl-text.cjs.entry.js CHANGED Viewed

@@ -986,7 +986,7 @@ const SwirlText = class {
         const styles = {
             whiteSpace: truncate ? "nowrap" : this.whiteSpace,
         };
-        return (index.h(index.Host, { key: '95b48ea9b31fc3998c73bf81a08f4132a6f6ca2d' }, index.h(Tag, { key: '1b215e39f34aa46ac6c312f741426e56fa2c92a3', class: className, ref: (el) => (this.textEl = el), style: styles }, index.h("slot", { key: 'f555ec8d79ee07291e07add6e4f2200b1438bb5e' }))));
+        return (index.h(index.Host, { key: '532fc3d60139b1b6c27a3e2713f94e1a3a855d45' }, index.h(Tag, { key: '944a5502b8d218989035dd89c9ce1f33d0003399', class: className, ref: (el) => (this.textEl = el), style: styles }, index.h("slot", { key: 'bb53161691a0f57a003360b3437d8c6fc34fd29c' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-toast-provider.cjs.entry.js CHANGED Viewed

@@ -55,7 +55,7 @@ const SwirlToastProvider = class {
         return newToastWithId;
     }
     render() {
-        return (index.h(index.Host, { key: 'be3a6cc246c26c1522b59e08003e66856f558a24', role: "status" }, index.h("swirl-stack", { key: '48346bb0378ea0c4b9722e30ac37b17ae4ddd439', spacing: "12" }, this.toasts.map((toast) => {
+        return (index.h(index.Host, { key: '1db8b2f832869490670c34067ae5fc8e19d7f987', role: "status" }, index.h("swirl-stack", { key: 'a616e31585de124b6f953151ec71cada1e8f051f', spacing: "12" }, this.toasts.map((toast) => {
             const props = { ...toast, content: undefined };
             return (index.h("swirl-toast", { key: toast.toastId, onDismiss: this.onDismiss, ...props }, toast.content));
         }))));

package/dist/cjs/swirl-toast.cjs.entry.js CHANGED Viewed

@@ -63,7 +63,7 @@ const SwirlToast = class {
     }
     render() {
         const className = index$1.classnames("toast", `toast--intent-${this.intent}`);
-        return (index.h(index.Host, { key: 'c1622ceeb538072212692c8ec31552f4d1fab869' }, index.h("div", { key: '86b5d008d4a86b0ff1bc0343be1e22f93b1cc8dd', class: className }, this.icon && (index.h("span", { key: '4b589498166da780a4f77ca091b5a8c26502b2ff', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'db596b66212f3c4eb80df06805766196fb89e6e4', class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", { key: '34f348b1d6b2a08d53d1ac7cb5a994556d87805e' })), index.h("button", { key: '9a6dc80768d2c385fd8baf6856f955b86be5b9cb', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { key: 'da00f4f612e5812a23f44e7a7f436d590b652238', ref: (el) => (this.dismissIconEl = el) }))))));
+        return (index.h(index.Host, { key: '35695f50ea63a19bb96de63dd68a7667a679356f' }, index.h("div", { key: 'f8e3c2c30bdd6867274c548e3a745a4a3591b503', class: className }, this.icon && (index.h("span", { key: '43dea51f1849ccf1c7064b9522d793d0e16f49a4', class: "toast__icon", innerHTML: this.icon, part: "toast__icon", ref: (el) => (this.iconEl = el) })), index.h("span", { key: '5171e135301ba31ac09e9a5fad3090803e7d82d4', class: "toast__content", innerHTML: this.content, part: "toast__content" }, index.h("slot", { key: '13a75cb56789364ee8193c571c86b4f752743a8a' })), index.h("button", { key: 'aeaec3b3e2770da4db5834735cf1d85eb13be6d3', "aria-label": this.dismissLabel || this.accessibleDismissLabel, class: "toast__dismiss-button", onClick: this.onDismiss, type: "button" }, this.dismissLabel, !Boolean(this.dismissLabel) && (index.h("swirl-icon-close", { key: '039599ec0303620b134c1bc580468a1bf176b066', ref: (el) => (this.dismissIconEl = el) }))))));
     }
     static get watchers() { return {
         "duration": ["watchDuration"]

package/dist/cjs/swirl-toolbar.cjs.entry.js CHANGED Viewed

@@ -75,7 +75,7 @@ const SwirlToolbar = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '22343aaf6671a392716868f0913619f3e67b008f' }, index.h("swirl-stack", { key: 'a87ee8eb543fc865dd0e893425f0df1ac19be37c', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, index.h("slot", { key: '19593191cd91fa105900c4d6c6c8f186a7c7132a' }))));
+        return (index.h(index.Host, { key: '93dcf545129b0037257412e87c2a5723a2cbd70c' }, index.h("swirl-stack", { key: '2200658e9fa82b528b594ac267623fe9bdb4050b', align: "center", "aria-label": this.label, "aria-orientation": this.orientation, role: "toolbar", onKeyDown: this.onKeyDown, orientation: this.orientation, spacing: "8" }, index.h("slot", { key: '94a5dc9998cfdc6b064c1e749c49663cca87b5d1' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-tooltip.cjs.entry.js CHANGED Viewed

@@ -105,7 +105,7 @@ const SwirlTooltip = class {
         const className = index$1.classnames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
             "tooltip--visible": this.visible,
         });
-        return (index.h(index.Host, { key: 'b0719dae99f8b66181aa5b179897e41c3b95ce26', onKeydown: this.onKeydown }, index.h("span", { key: '133d8504fc0aa3cc03c5c80473760dd75ded0314', class: className }, index.h("span", { key: '297e5a4a1134752443eb3d04fcdcd443cc5b3eba', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", { key: 'b828835d2ef1c913f7e8522a6658477125631679' })), index.h("span", { key: '72d0bea47330db511feeaa051449d77d406eb4ec', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (index.h(index.Host, { key: '03fbc0a205e7fc6ab4caf3c25153108cb332e94a', onKeydown: this.onKeydown }, index.h("span", { key: '67440b05dfffb0f797720e0817a19b6eb6a4f648', class: className }, index.h("span", { key: '7f4e9715d29a88af39b051d705b159c37ffe42f7', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, index.h("slot", { key: '71d597a32e6a16ae688482a75fa823d09424d2c7' })), index.h("span", { key: '2e7bf8796bcfa4a0721a578a29e29e6b66d99b64', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -113,7 +113,7 @@ const SwirlTooltip = class {
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (index.h("span", { key: 'dcc6c9bf1adff51240d807afd28cabf4efc7bb2e', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: '37ecc6b48ef54423ec078802de2732c8fadc1a4c', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '4540e1a5474cca2e3f867d7fbdcfaa81adc40983', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (index.h("span", { key: 'f9ac600db0ef8778651018a38c69d800b8ed9f59', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: 'ee843dd7927f410ec0695027cb867e18d3bf1de4', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '5b2549165b80b6d8389bf1d61d655c34beeb89a8', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

package/dist/collection/collection-manifest.json CHANGED Viewed

@@ -2,6 +2,7 @@
   "entries": [
     "components/swirl-heading/swirl-heading.js",
     "components/swirl-action-list-item/swirl-action-list-item.js",
+    "components/swirl-app-bar/swirl-app-bar.js",
     "components/swirl-app-layout/swirl-app-layout.js",
     "components/swirl-text-input/swirl-text-input.js",
     "components/swirl-autocomplete/swirl-autocomplete.js",
@@ -55,7 +56,6 @@
     "components/swirl-accordion-item/swirl-accordion-item.js",
     "components/swirl-action-list/swirl-action-list.js",
     "components/swirl-action-list-section/swirl-action-list-section.js",
-    "components/swirl-app-bar/swirl-app-bar.js",
     "components/swirl-app-icon/swirl-app-icon.js",
     "components/swirl-avatar-group/swirl-avatar-group.js",
     "components/swirl-carousel/swirl-carousel.js",

package/dist/collection/components/swirl-accordion/swirl-accordion.js CHANGED Viewed

@@ -36,7 +36,7 @@ export class SwirlAccordion {
         });
     }
     render() {
-        return (h(Host, { key: '8164310633ef979061ffa19a7b7559a93951b664' }, h("slot", { key: 'eac2e80e25b9300dfb9b5efacf53e97c11cd9779' })));
+        return (h(Host, { key: 'ad20b40fee8a6ecbcf5078bcc67da0738792ee59' }, h("slot", { key: 'b4def8c0c8fde90a8f5431c033aefb7bf6e15842' })));
     }
     static get is() { return "swirl-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-accordion-item/swirl-accordion-item.js CHANGED Viewed

@@ -58,7 +58,7 @@ export class SwirlAccordionItem {
         const className = classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (h(Host, { key: '4d16bbdd80e7e7de2c9233fd0990d2056f1918e2' }, h("div", { key: '663b2d9fcbdfd816e42f20a27fdf21b15f5c8eaa', class: className }, h(HeadingTag, { key: 'b588fac98fc927b31088f55d1a4a42077c7c93d7', class: "accordion-item__heading" }, h("button", { key: '93a756f44cbab598814774adcfedaefd6bddf37c', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '88aa6b5112d6cece27b33b053b31a76fb48e1e3a', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: 'dfb03ef35815cb5de6a7982fb8faa2176d422158', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: 'b9b1ea22c4b43f531b5b1819220f0089797ad8a5', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: '11d5a1e2bfaaf84d8c0ec7c4eb37a2ed69475acd', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'b6209a67579e3800e250dbb6cc85ae38edf97537', glyph: "expand-more", size: 20 }))))), h("div", { key: 'dedd47f75b8aa3eabe5170bcb10c1815bae0489b', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: 'af9c88e96816a003f3126bf76aead45c0d4dc9df' })))));
+        return (h(Host, { key: '006861d6031bc49ef4c68d5e5aee2eaba58e0cc6' }, h("div", { key: '47c5fe06e4da5aff6b675d1b4ad5d223a73e5b3b', class: className }, h(HeadingTag, { key: 'd396f75989f831eddd66510f67c9f5ca523a1e80', class: "accordion-item__heading" }, h("button", { key: '9bfdb9f316d3d64356091ff35086493c153ad9ae', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, h("span", { key: '0696232de801d6c5aedac6bb1a8714f9c1b9362d', class: "accordion-item__toggle-text" }, this.heading, this.description && (h("swirl-text", { key: '21c86a4e3a8956917fc15ea4387e697be2408beb', as: "span", color: "subdued", size: "sm" }, this.description))), h("span", { key: '50fa0cd1da17d126ecd26757bcda453302dd2182', class: "accordion-item__icon" }, !this.expanded && (h("swirl-icon", { key: 'a05d59697919662a816363c92da91940ece29cf9', glyph: "chevron-right", size: 20 })), this.expanded && (h("swirl-icon", { key: 'e99c77b661c4b4efbd1bf56c69a97f2ff12787c5', glyph: "expand-more", size: 20 }))))), h("div", { key: 'f5e7bbdc5025f952de1fb09bf19c1dae72f53c8f', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, h("slot", { key: '4f755a5f113d956df138f0a7803bb8274149c4cc' })))));
     }
     static get is() { return "swirl-accordion-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-action-list/swirl-action-list.js CHANGED Viewed

@@ -76,7 +76,7 @@ export class SwirlActionList {
             item === activeElement?.querySelector('[role="menuitem"]'));
     }
     render() {
-        return (h(Host, { key: '43e99f67cf6932db44df3821525f66e847ea7560' }, h("div", { key: '936f925f573d52544a1728ffc7be61af50d55ea9', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: 'a5f9f50b6f3947a8a868a02527759ccfed9bf91f' }))));
+        return (h(Host, { key: '36322caabed257ed68473c6a2faef239318b2ebf' }, h("div", { key: '9a3c533acdd8f9ba50366f3c85473a59b1d97b1f', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, h("slot", { key: 'b969b7469999bcdbe84fa81bd92858c1bd24b1ad' }))));
     }
     static get is() { return "swirl-action-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-action-list-section/swirl-action-list-section.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class SwirlActionListSection {
         this.label = undefined;
     }
     render() {
-        return (h(Host, { key: '11b03762c4dd5f0231ba8448a2b59d7cb40e492f' }, h("div", { key: '25bb16b68f4e6c499d1969dc436b122b8e604b87', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'e8d33697e0528c1b9fa24841d984285e3d9573aa', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: 'bb5e0c93bcdb79495eab8545ca1213b704cc2704', class: "action-list-section__items" }, h("slot", { key: '279562f8571a3e4579a8a455857c0b6749d027b7' })))));
+        return (h(Host, { key: '44a9deefaca9838b3fd25179d39e7b9d961d5910' }, h("div", { key: '3f19a2ea5d7593b8516de8a8657ac7138bd65385', "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { key: 'bba5651dde645a819341872f7bdf918abf1a5fdb', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), h("div", { key: 'c59c1f6060488ec7995c4b582d30484905a45397', class: "action-list-section__items" }, h("slot", { key: 'fb444405ab1b8beb208044b641fbf16887880ffe' })))));
     }
     static get is() { return "swirl-action-list-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-app-bar/swirl-app-bar.js CHANGED Viewed

@@ -23,6 +23,8 @@ export class SwirlAppBar {
         this.backButtonLabel = "Go back";
         this.closeButtonIcon = "<swirl-icon-close></swirl-icon-close>";
         this.closeButtonLabel = "Close";
+        this.paddingInlineEnd = "16";
+        this.paddingInlineStart = "16";
         this.stepUpButtonLabel = "Previous item";
         this.stepDownButtonLabel = "Next item";
         this.showBackButton = undefined;
@@ -52,7 +54,11 @@ export class SwirlAppBar {
             "app-bar--has-cta": this.hasCta,
             "app-bar--has-right-controls": hasRightControls,
         });
-        return (h(Host, { key: '6e388dda9ffef64afa31b8c8459eb57bf96f4fed' }, h("div", { key: '1df5d686a248760beb5c7def4e631f73857fdced', class: className }, showLeftControls && (h("div", { key: '1ffff6f9233a3667412a41c406ff64d635163e1c', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: '46bfd07993a16398388cb6a90229e1d3ef74de5c', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '825955e782cf0d5335070339a4dce4a3d828ef19', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: 'e6fa7c44810105ca709f37f3c2852708d2680264', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: 'b1d8dfcd982b8aa8b9ca5de0f48d39db34ff2cfe', class: "app-bar__stepper-controls" }, h("swirl-button", { key: '4c28d257da981b5e9f3957428b9015eb954bef7c', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'da3ce3294de7848b1283bd578c1cc44125774289', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: 'edb99f5558d6bb0424a2f25aedda9eea6218f66b', class: "app-bar__cta" }, h("slot", { key: 'b32c4cdc062cb44aa0492770344bb11565795b38', name: "cta" })), h("div", { key: '69b1c2d31a364938e64501037bbc97f7ca69c22e', class: "app-bar__heading" }, h("slot", { key: '022ddeaecfde7a4352e1a123098736a92cd34f3d', name: "heading" })), h("div", { key: 'ce88acc0923db756f6197e87b12561690d2f4919', class: "app-bar__center-controls" }, h("slot", { key: '885ff0edacef21993abb094a7b0920a1d77129ef', name: "center-controls" })), h("div", { key: 'e823a044960e274b15fab2a1c495bad4ec46c929', class: "app-bar__right-controls" }, h("slot", { key: '3fd346d6300e188983476ed930fff62ec5529093', name: "right-controls" })))));
+        const styles = {
+            paddingInlineEnd: `var(--s-space-${this.paddingInlineEnd})`,
+            paddingInlineStart: `var(--s-space-${this.paddingInlineStart})`,
+        };
+        return (h(Host, { key: 'e3c441ae152c5f32628341d93ab9c01267fdcd14' }, h("div", { key: 'f5d2d48ddb1a3226e0fb5ca4789ff59ddd866dec', class: className, style: styles }, showLeftControls && (h("div", { key: 'c9f3c6f1cab3c15d99f373ddc53ee6dce3e51a6a', class: "app-bar__left-controls" }, (this.showBackButton || this.showCloseButton) && (h("div", { key: '9ae0620bef35977af26de20b4fbe7725062ab0d0', class: "app-bar__main-navigation-control" }, this.showBackButton && (h("swirl-button", { key: '05e57714c3649dbf722d74f135d0c5fb7591e16b', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButtonLabel, onClick: this.onBackButtonClick })), this.showCloseButton && (h("swirl-button", { key: '54d48e492a7cbc94e7784829ce4288e339e38526', hideLabel: true, icon: this.closeButtonIcon, label: this.closeButtonLabel, onClick: this.onCloseButtonClick })))), this.showStepperControls && (h("div", { key: '65637f25c16f60d7b7028a8b985520688439a2a8', class: "app-bar__stepper-controls" }, h("swirl-button", { key: 'b46ca47a50c9ff3f938d0adc4e5145e1c4d7a6d5', hideLabel: true, icon: "<swirl-icon-arrow-upward></swirl-icon-arrow-upward>", label: this.stepUpButtonLabel, onClick: this.onStepUpButtonClick }), h("swirl-button", { key: 'ce4bbb821ad76249caf680965853aefed6bbf041', hideLabel: true, icon: "<swirl-icon-arrow-downward></swirl-icon-arrow-downward>", label: this.stepDownButtonLabel, onClick: this.onStepDownButtonClick }))))), h("div", { key: '75042cd5d3c9c5f82d1d8c2b5a1ba156890f83a0', class: "app-bar__cta" }, h("slot", { key: '195d9d91da4e64688b281f0a7c5cd8dfdd3f661d', name: "cta" })), h("div", { key: '92fdfb5748e8e1578205c97c13ff361fd3020fac', class: "app-bar__heading" }, h("slot", { key: 'c62711620a9b717c340bfac1a92f8eb639207fd0', name: "heading" })), h("div", { key: 'cd37b16d36b2115ca3c63adbae7635b5a412ba38', class: "app-bar__center-controls" }, h("slot", { key: '1b884ef50fdbf39da5bb738174defa6e17b93efa', name: "center-controls" })), h("div", { key: '9dc46b4fa36e8d34837c26aed63b4bb80c2c08fe', class: "app-bar__right-controls" }, h("slot", { key: '83aa64ac31b9a68f6777e8ad75a0c1ad262a815b', name: "right-controls" })))));
     }
     static get is() { return "swirl-app-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -122,6 +128,54 @@ export class SwirlAppBar {
                 "reflect": false,
                 "defaultValue": "\"Close\""
             },
+            "paddingInlineEnd": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlAppBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlAppBarPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-app-bar/swirl-app-bar.tsx",
+                            "id": "src/components/swirl-app-bar/swirl-app-bar.tsx::SwirlAppBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-inline-end",
+                "reflect": false,
+                "defaultValue": "\"16\""
+            },
+            "paddingInlineStart": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SwirlAppBarPadding",
+                    "resolved": "\"0\" | \"12\" | \"16\" | \"2\" | \"20\" | \"24\" | \"32\" | \"4\" | \"8\"",
+                    "references": {
+                        "SwirlAppBarPadding": {
+                            "location": "local",
+                            "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-app-bar/swirl-app-bar.tsx",
+                            "id": "src/components/swirl-app-bar/swirl-app-bar.tsx::SwirlAppBarPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "padding-inline-start",
+                "reflect": false,
+                "defaultValue": "\"16\""
+            },
             "stepUpButtonLabel": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/swirl-app-bar/swirl-app-bar.spec.js CHANGED Viewed

@@ -21,7 +21,7 @@ describe("swirl-app-bar", () => {
         expect(page.root).toEqualHtml(`
       <swirl-app-bar>
         <mock:shadow-root>
-          <div class="app-bar app-bar--has-cta app-bar--has-right-controls">
+          <div class="app-bar app-bar--has-cta app-bar--has-right-controls" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__cta">
               <slot name="cta"></slot>
             </div>
@@ -69,7 +69,7 @@ describe("swirl-app-bar", () => {
         expect(page.root).toEqualHtml(`
       <swirl-app-bar show-stepper-controls="true">
         <mock:shadow-root>
-          <div class="app-bar">
+          <div class="app-bar" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__left-controls">
               <div class="app-bar__stepper-controls">
                 <swirl-button hidelabel="" icon="<swirl-icon-arrow-upward></swirl-icon-arrow-upward>" label="Previous item"></swirl-button>
@@ -107,7 +107,7 @@ describe("swirl-app-bar", () => {
         expect(page.root).toEqualHtml(`
       <swirl-app-bar show-close-button="true">
         <mock:shadow-root>
-          <div class="app-bar">
+          <div class="app-bar" style="padding-inline-end: 16; padding-inline-start: 16;">
             <div class="app-bar__left-controls">
               <div class="app-bar__main-navigation-control">
                 <swirl-button hidelabel="" icon="<swirl-icon-close></swirl-icon-close>" label="Close"></swirl-button>

package/dist/collection/components/swirl-app-layout/swirl-app-layout.js CHANGED Viewed

@@ -197,9 +197,9 @@ export class SwirlAppLayout {
             "app-layout--sidebar-active": this.mobileView === "sidebar" || this.sidebarActive,
             "app-layout--sidebar-closing": this.sidebarClosing,
         });
-        return (h(Host, { key: '6669b2c98406333feee455553fe0d5d03d3244b8' }, h("section", { key: '1ee92631037025987491babda4e78ea63d35377b', "aria-labelledby": "app-name", class: className }, h("div", { key: '63ae4a87fbe7e728c81183def7afdf108588f83e', class: "app-layout__grid" }, h("header", { key: '6182b13fd6f4031aa0581c286cc4b517d3c5f66d', class: "app-layout__header" }, h("span", { key: 'f4932b66237cbdcab317641027ef62428b98dfff', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '684aa1471fd24535b36e75408a45f41bc03345e1', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: '8f0d872fb075ef91f0f62a514dfe25a0124f252c', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '7f6025c9f07eecb118fc6939ee0b0b78c4aee6d7', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: 'd635de3c9562eac9b4bce1c70baa8b90ae277b69', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '87fc56959a7f02183166ad6b356c4ac06316ccbb', class: "app-layout__navigation-controls" }, h("slot", { key: '8b091346c443dfe4383ac1a2e1500fbd2379b9b3', name: "navigation-controls" })))), h("nav", { key: 'f204ad5f648228d9a47e1fb47eab5e5b69631f02', "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { key: '02c4eef4f8b62ab328a370045174c245402f662a', name: "navigation" })), h("section", { key: '37bc6fa312a75e60f0a6702e41de1f5036efb008', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: 'c43967cff5d5cb3283707b063b0cb8fb14dcfec4', class: "app-layout__app-bar" }, h("span", { key: '410c2ebe8d9e737706cc307af7447c3b8ea0d75d', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: 'd9a962e75a42b2d4f333d5f12a42e1ea1a12951b', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: '4ed9a8d4868bc5ceaf311b132f8f325144fa707c', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '442aa8979bc5c95ce973d41bbe7c28f2a991d11d', hideLabel: true, icon: this.transitionStyle === "dialog"
+        return (h(Host, { key: '6d961491aca6930666b7d587789eb3bff6bf1e2d' }, h("section", { key: 'e34654e362f28c3a57aa4716a3a10a86909d9aa8', "aria-labelledby": "app-name", class: className }, h("div", { key: '3e6cc02c9c3701e195a8a92f97f2fa49be7a5325', class: "app-layout__grid" }, h("header", { key: '7b4b7743aa9225c591f05705f18d50bd3009bfff', class: "app-layout__header" }, h("span", { key: '18050ae2d54fd438da16a6df7a57ecd80fac35a6', class: "app-layout__navigation-mobile-menu-button" }, h("slot", { key: '2a4a8d6f30c2e5e02ab512ff2be09197ea61c68c', name: "navigation-mobile-menu-button" })), this.showNavigationBackButton && (h("span", { key: 'c461ab4bd9f6f116cd6c019c0e967633946f0a5c', class: "app-layout__navigation-back-button" }, h("swirl-button", { key: '94a59959334c405d871b9d89b7d72c25a644571c', hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.navigationBackButtonLabel, onClick: this.onNavigationBackButtonClick }))), h("swirl-heading", { key: 'f5fd24b0ad24656831b66da8c024df6d1f5c62a6', as: "h1", class: "app-layout__app-name", headingId: "app-name", level: 3, text: this.appName }), this.hasNavigation && (h("span", { key: '04a2d228a04980e946b2d764bf1783a7c75a8e2f', class: "app-layout__navigation-controls" }, h("slot", { key: '1850db373293226330e64f6c45cb6d2b1792b6fe', name: "navigation-controls" })))), h("nav", { key: 'f90677d445f076e80615a73265e1abf5fd206821', "aria-label": this.navigationLabel, class: "app-layout__navigation" }, h("slot", { key: '1342aa7f9766d8bc7f5ceff39ae14b407871ba5b', name: "navigation" })), h("section", { key: '54bbd47bd318cf77ccfeee3ca0176504928d6c62', "aria-labelledby": "app-name", class: "app-layout__body" }, !this.hideAppBar && (h("header", { key: '6861a37fd4fbafcf4389f9df561abc1010fe94b8', class: "app-layout__app-bar" }, h("span", { key: 'e92f067fbf50cca7931213bc75cf195210d5cd29', class: "app-layout__app-bar-mobile-menu-button" }, h("slot", { key: '37c85dcf2fa77c37ea3aef4537c313ac14eb9ad9', name: "app-bar-mobile-menu-button" })), showBackToNavigationButton && (h("span", { key: 'a647140e357d1099774c239dbdb0c486aeedc74e', class: "app-layout__back-to-navigation-button" }, h("swirl-button", { key: '86b0502d617c12fb7123ef81c46126cc5ea18fca', hideLabel: true, icon: this.transitionStyle === "dialog"
                 ? "<swirl-icon-close></swirl-icon-close>"
-                : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { key: 'e98e6c634278149c73b9b064e7364aaa25eb97fd', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: 'f06666455e54a7dfcfa9b94aa47fc24db9281675', name: "custom-app-bar-back-button" })), h("div", { key: 'c7f9906b22f61219203162cd3dceb21afb807ecf', class: "app-layout__app-bar-content" }, h("slot", { key: '1ec7cb2569a93ad414b57f2da951aa4036592d57', name: "app-bar" })), h("div", { key: 'f951fa2be8b2a92175a0bd5b007e2fe131b79c35', class: "app-layout__app-bar-controls" }, h("slot", { key: '95bc12dd1a1695d05d972de033979231752fa0eb', name: "app-bar-controls" })))), h("div", { key: '73f3e5b01666ad0b8744d557d8ac620296de069e', class: "app-layout__banner" }, h("slot", { key: '4b3041a0fd7f6e4e4457b0868832e33cc76852a4', name: "banner" })), h("div", { key: '7143b730f21f69330a2d35081ed9fe8553757879', class: "app-layout__content" }, h("slot", { key: '88922dd8cb925df0e8905954c7740969c09c74d2', name: "content" })), h("div", { key: 'd28078f915fd03d80031749d7c46f45a43405b7f', class: "app-layout__bottom-bar" }, h("slot", { key: '5290d8ed20d1528c11c7389c64b8c89e3d9220e3', name: "bottom-bar" }))), h("aside", { key: '4fa7b0476c3ce9f0644de3a3bb91de47e13e2333', class: "app-layout__sidebar" }, h("header", { key: '5cc37ad993a66e0c5b452656877b026daedf2a22', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '85e16e72ca427e58b477b999b33f6eb8309b050d', name: "custom-sidebar-header" })), h("header", { key: '99bd578231f336f0e518556fa431c87570b06db8', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '17b6c0dfc018646775b7f21647a4fc5d71e32991', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '6c94f955b7792ea20dbaea185697c976532b0880', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: 'd582f3a4988013796c0130e7e9de2ae376bdd88e', class: "app-layout__sidebar-content" }, h("slot", { key: '8a22cc1a9d2fc54d860407685b7f1f00d72fcc40', name: "sidebar" }))), h("span", { key: '41d05516195ef0b8a39d0307bdd63b3686fb18d9', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '020fed78f1d6741cdf85113a370851596f826f80', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '7e4f9fb98d67d7befddec8a62b66659ddd22d232', name: "floating-action-button" }))))));
+                : "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backToNavigationViewButtonLabel, onClick: this.onBackToNavigationViewButtonClick }))), h("span", { key: '0d1bef25d834457390cc3f1e8a16af30ee8ec411', class: "app-layout__custom-app-bar-back-button" }, h("slot", { key: 'ef609f9b32db88320c940927939b2bd3f87a28e5', name: "custom-app-bar-back-button" })), h("div", { key: 'd885bbea33f0c6b046e8cd574f61623e3b7cc225', class: "app-layout__app-bar-content" }, h("slot", { key: '70189b7672d8b70f490c3efdfde15d82c0b5c48c', name: "app-bar" })), h("div", { key: '23b3747628acc4fd2c61ee54de55253a3fc41203', class: "app-layout__app-bar-controls" }, h("slot", { key: '1bb20b112b186544833b10d3f67d48b002773bbc', name: "app-bar-controls" })))), h("div", { key: '33bad47951b64672f1f838b96d51e7e9f9d7c832', class: "app-layout__banner" }, h("slot", { key: 'e59682438a1d7aaec36e143c0c07d69a2205a24f', name: "banner" })), h("div", { key: '322eab095e9bf9d01f331adccdcd8953fcfa9fd0', class: "app-layout__content" }, h("slot", { key: '259690ee199cdc0ac3d037733b54544ea2b483ee', name: "content" })), h("div", { key: '7495427d0a523a22268c19c4ae56c977b4e295d0', class: "app-layout__bottom-bar" }, h("slot", { key: '50cc7202f5bbec17324ca23378617831d9fc199d', name: "bottom-bar" }))), h("aside", { key: '781981ef566aa8717d94331549272e7b9d2eeb6a', class: "app-layout__sidebar" }, h("header", { key: 'e6df1707394682f125448c1cf770600539bb1cfa', class: "app-layout__custom-sidebar-header" }, h("slot", { key: '6e6187ae87c94d9c2a2e7e6f573a384dcea43125', name: "custom-sidebar-header" })), h("header", { key: '7d9a21343c070d3a9aeea9236852be1a2cb12e1e', class: "app-layout__sidebar-header" }, h("swirl-button", { key: '6f4a53a16176d30139d497f4b510586f3bef2252', class: "app-layout__sidebar-close-button", hideLabel: true, icon: "<swirl-icon-close></swirl-icon-close>", label: this.sidebarCloseButtonLabel, onClick: this.onSidebarCloseButtonClick }), h("swirl-heading", { key: '6b32dc32a6844cfd258d0148a949f06fa86a222b', as: "h3", class: "app-layout__sidebar-heading", headingId: "sidebar-heading", level: 3, text: this.sidebarHeading })), h("div", { key: '64914275c88e1843af23ad087774d48092c70a36', class: "app-layout__sidebar-content" }, h("slot", { key: 'c6667fcf5d7702704752360854d9181d8ff35652', name: "sidebar" }))), h("span", { key: '7b8347d1a450aaed9c2e31ae1f308f46a760227b', class: "app-layout__floating-action-button" }, this.ctaLabel && (h("swirl-button", { key: '62393818e2205700c6b090dee8783049f95c747c', hideLabel: Boolean(this.ctaIcon), icon: this.ctaIcon, intent: "primary", label: this.ctaLabel, onClick: this.onCtaClick, variant: "floating" })), h("slot", { key: '32708bdfa2a5a36fbc7cd79bf0012bbf1928db68', name: "floating-action-button" }))))));
     }
     static get is() { return "swirl-app-layout"; }
     static get encapsulation() { return "shadow"; }