@getflip/swirl-components 0.391.0 → 0.393.0

package/dist/components/swirl-table-row-group.js

@@ -44,10 +44,10 @@ const SwirlTableRowGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRo
         const iconType = this.isVisible
             ? "<swirl-icon-expand-less></swirl-icon-expand-less"
             : "<swirl-icon-expand-more></swirl-icon-expand-more";
-        return (h(Host, { key: 'adad7412dad236d8bb56639a1acc4690a3760700', class: "table-row-group", role: "rowgroup" }, h("div", { key: '29c9bd2bc56af09e3cac07fefa9bdad17730dbec', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: 'b53e018d80aba0f389930b825977d27982ba400f', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: '958ed87c78afada9e4488e0838f9d586786b398c', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: '338a566a8d861684eed10c8a7beeaeff5c424ad5', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: 'b0aee30f5c358b18f9e83edd188d1988a0772ff2', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '01ac364034bf562bddd266bc2f3f2185ae99d918', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: '930bc31f0478fa4c7cab4e7e38d9bf31168f82f8', class: {
+        return (h(Host, { key: '4fb4a408031be6c9c5708550f5723d2542fbaa4d', class: "table-row-group", role: "rowgroup" }, h("div", { key: 'a13eb8ce33a11488437cfc5f23afe626edc32ee5', class: "table-row-group__header-row", role: "row", ref: (el) => (this.headerRowElement = el) }, this.collapsible && (h("swirl-button", { key: '8add6e9720dbeed048c163545a300493a05d7d07', class: "table-row-group__collapse-icon", icon: iconType, label: this.collapseButtonLabel, onClick: this.toggleShowItems, swirlAriaExpanded: String(this.isVisible), variant: "plain", hideLabel: true })), h("span", { key: 'adc0b6d8fd904e35eb1310adbf8a8641a0b75cfd', "aria-rowspan": rowspan, class: "table-row-group__label", role: "rowheader" }, this.label, this.tooltip && (h("span", { key: 'd97a376c484a5b55129cfc4af5727ad1d7a40ebe', class: "table-row-group__tooltip" }, h("swirl-tooltip", { key: '9d485ab66fd05019d5e451289697c286d9c1c665', content: this.tooltip, position: "top", positioning: "fixed" }, h("swirl-icon-info", { key: '023e467d41b6105b3bacc3fc8c87e9329aaadbf6', size: 16, tabIndex: 0, class: "table-row-group__tooltip-icon" })))))), h("div", { key: 'b020c6220d12173c5d4da7049303212eb3eabfd0', class: {
                 "table-row-group__rows-container": true,
                 "table-row-group__rows-container--is-hidden": this.isVisible,
-            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: '900d8486d712e304a08a7760e07a82f7fb0158db' }))));
+            }, "aria-hidden": !this.isVisible, ref: (el) => (this.tableRowElements = el) }, h("slot", { key: 'fa6ae0448026527ca6d6bda329b6b3711a2e9799' }))));
     }
     get el() { return this; }
     static get style() { return swirlTableRowGroupCss; }

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

@@ -18,7 +18,7 @@ const SwirlTableRow$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTableRow ext
         const className = classNames("table-row", {
             "table-row--highlighted": this.highlighted,
         });
-        return (h(Host, { key: 'd7d696868ec0d9c2fa9afef7e3c2caa521529ebf', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: '491b4607b36a16ab1284970498963452024f0e60' })));
+        return (h(Host, { key: '42e6b38e5586661e711b077bc636d0a92d9a8a60', "aria-rowindex": this.index, class: className, role: "row" }, h("slot", { key: 'eaa3ffa24e1c4943189e4c8634812e8fe9fd1dd1' })));
     }
     get el() { return this; }
     static get style() { return swirlTableRowCss; }

package/dist/components/swirl-tabs.js

@@ -77,7 +77,7 @@ const SwirlTabs$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTabs extends HTM
         }));
     }
     render() {
-        return (h(Host, { key: '6f51599988056556afb4325ad2a918efb801a690' }, h("div", { key: 'dffa8a80445febed2cece6572d37efbb620291d6', class: "tabs" }, h("swirl-tab-bar", { key: 'fac111812a85c0bcca67bd2d4a1fdf36613c562c', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'e7e646ffc04e6e4326c9ea1d0721c2755ff4e99b' })));
+        return (h(Host, { key: 'd95a12ced0cb0a1cba77c8c0e7a1067a636fc881' }, h("div", { key: '974a81c3e650efbd622b10a01d704a04da3522c4', class: "tabs" }, h("swirl-tab-bar", { key: '5c7d1534d8fa58ca5b02ceee8b701babfec108e2', label: this.label, onActivateNextTab: this.onActivateNextTab, onActivatePreviousTab: this.onActivatePreviousTab, onActivateTab: this.onActivateTab, tabs: this.tabBarTabs, justify: this.justifyTabBar, paddingBlockEnd: this.tabBarPaddingBlockEnd, paddingBlockStart: this.tabBarPaddingBlockStart, paddingInlineEnd: this.tabBarPaddingInlineEnd, paddingInlineStart: this.tabBarPaddingInlineStart, variant: this.tabBarVariant })), h("slot", { key: 'b6d21d61fbbde20d7176b171e62325df8beb0f11' })));
     }
     get el() { return this; }
     static get style() { return swirlTabsCss; }

package/dist/components/swirl-theme-provider.js

@@ -151,7 +151,7 @@ const SwirlThemeProvider$1 = /*@__PURE__*/ proxyCustomElement(class SwirlThemePr
         this.setDesignTokens = [];
     }
     render() {
-        return (h(Host, { key: '4d298f7fdb7eb70b57bcccff39755956847ee51b' }, h("slot", { key: 'b3dace729e21553518628b6f733cd3364a23eac5' })));
+        return (h(Host, { key: 'c42a6302b1dc31a1d433abf914bfa914f9f5417a' }, h("slot", { key: '5c62068d1e6ceee187c00ec1d12253440302a8b0' })));
     }
     static get watchers() { return {
         "config": ["watchConfig"]

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

@@ -143,7 +143,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
         const className = classNames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: 'e23b038bf99ddfd9893ff2b2cc2981ee7de0fbda' }, h("div", { key: '26b6cbb9a67cfb986bae34b2ff604862992f7076', class: className }, h("input", { key: 'd5123ad3101a1c0571e491d91c5916fba51aabe9', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'd53e9ea53813798aa0cdd2ce7f6f685053859862', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '61e91a6ae302b0b64d4283525f02b97bad37e9ad', size: this.iconSize })))));
+        return (h(Host, { key: 'd6c4f0d39df730f886088b0254898035d8061d4f' }, h("div", { key: '9acf0b203e64f0442886067d5d5139725ccb1b3d', class: className }, h("input", { key: '318a0c90c6243e2fea6adc41ed125ecb4d4d3791', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, inputmode: "numeric", onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", readonly: this.readonly }), h("span", { key: 'af6ebcb46a3cfe4f624523c569aae1629ea5a243', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: 'ff76f97732b7b431146fc1a4d4a81e5d61562a80', size: this.iconSize })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-toggle-button.js

@@ -18,7 +18,7 @@ const SwirlToggleButton$1 = /*@__PURE__*/ proxyCustomElement(class SwirlToggleBu
         const classNames$1 = classNames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: '2b9620d5152ba227e725f3b2308b96f49d0d79a0', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'f2504f9c4e4ec6f85fbd3d356f71470a5a133a4b', class: "button__icon", glyph: this.icon })), h("span", { key: '5ca11b4cebdc080a2ef08761344e349ff2248c16', class: "button__label" }, this.label)));
+        return (h("button", { key: 'b00dc9f34972136f70a66e37bd00e76aa3a5dcb7', class: classNames$1, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: 'bbe9171ad046460afcaea4db6c2295c0ffc78788', class: "button__icon", glyph: this.icon })), h("span", { key: 'd8306bde008d608bcd2d9a738b24e7dbfc5da5c5', class: "button__label" }, this.label)));
     }
     static get style() { return swirlToggleButtonCss; }
 }, [1, "swirl-toggle-button", {

package/dist/components/swirl-tooltip2.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { u, P, N, D, k, b } from './floating-ui.dom.browser.min.js';
 import { c as classNames } from './index2.js';
+import { t as getPixelsFromRemToken } from './utils.js';
 
-const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
+const swirlTooltipCss = ":host{display:contents;font-weight:var(--s-font-weight-normal)}:host *{box-sizing:border-box}.tooltip{display:contents}.tooltip--active .tooltip__popper{display:block}.tooltip--visible .tooltip__popper{animation:tooltip-fade-in 0.15s;animation-delay:0.1s;animation-fill-mode:forwards;opacity:0}.tooltip--actual-placement-top .tooltip__arrow{top:calc(100% - 0.0625rem);transform:translate3d(0, -50%, 0) rotate(45deg)}.tooltip--actual-placement-bottom .tooltip__arrow{bottom:calc(100% - 0.0625rem);transform:translate3d(0, 50%, 0) rotate(45deg)}.tooltip--actual-placement-left .tooltip__arrow{left:calc(100% - 0.0625rem);transform:translate3d(-50%, 0, 0) rotate(45deg)}.tooltip--actual-placement-right .tooltip__arrow{right:calc(100% - 0.0625rem);transform:translate3d(50%, 0, 0) rotate(45deg)}.tooltip .tooltip__reference{display:contents}.tooltip__popper{position:absolute;z-index:var(--s-z-40);display:none;max-width:17.5rem;opacity:0}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:calc(var(--s-space-8) + 0.0625rem);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);box-shadow:var(--s-shadow-level-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tooltip__bubble{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tooltip__content{white-space:normal}.tooltip__arrow{position:absolute;width:0.6875rem;height:0.6875rem;border-radius:0.125rem;background-color:var(--s-surface-neutral-default)}.tooltip--promo .tooltip__bubble,.tooltip--promo .tooltip__arrow{background-color:var(--s-surface-info-default)}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
 
 const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends HTMLElement {
     constructor() {
@@ -13,9 +14,16 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
         this.delay = 200;
         this.position = "top";
         this.positioning = "absolute";
+        /**
+         * If set to true, tooltip will be initially visible.
+         * It will only be dismissible via a click and will not reappear.
+         * Tooltip will have a blue background color.
+         */
+        this.isPromo = false;
         this.visible = false;
+        this.isPromoShown = false;
         this.onKeydown = (event) => {
-            if (event.code === "Escape") {
+            if (event.code === "Escape" && !this.isPromo) {
                 this.hide();
             }
         };
@@ -37,7 +45,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             };
         };
         this.show = () => {
-            if (!this.active) {
+            if (!this.active || (this.isPromo && this.isPromoShown)) {
                 return;
             }
             this.visible = true;
@@ -71,11 +79,22 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             this.disableAutoUpdate?.();
         };
         this.updateOptions = () => {
-            const margin = +getComputedStyle(document.documentElement)
-                .getPropertyValue("--s-space-12")
-                .replace("rem", "") * 16;
+            const margin = getPixelsFromRemToken("--s-space-12");
+            const shiftPaddingY = getPixelsFromRemToken("--s-space-8");
+            const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
             this.options = {
-                middleware: [D(margin), k(), b()],
+                middleware: [
+                    D(margin),
+                    k({
+                        padding: {
+                            top: shiftPaddingY,
+                            bottom: shiftPaddingY,
+                            left: shiftPaddingX,
+                            right: shiftPaddingX,
+                        },
+                    }),
+                    b(),
+                ],
                 placement: this.position,
                 strategy: this.positioning,
             };
@@ -88,7 +107,9 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
         this.showWithDelay();
     }
     onMouseLeave() {
-        this.hide();
+        if (!this.isPromo) {
+            this.hide();
+        }
     }
     onWindowResize() {
         if (!this.active) {
@@ -107,13 +128,18 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
     }
     componentDidLoad() {
         this.updateOptions();
+        if (this.isPromo) {
+            this.show();
+            this.isPromoShown = true;
+        }
     }
     render() {
         const className = classNames("tooltip", `tooltip--actual-placement-${this.actualPosition?.placement}`, {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
+            "tooltip--promo": this.isPromo,
         });
-        return (h(Host, { key: '7d75b9d6c223d29e88edff512c881d5c7689e287', onKeydown: this.onKeydown }, h("span", { key: '3abb23525fee5aa69bf2bf67ea1d7f72601b5328', class: className }, h("span", { key: 'b79893b8952d4258edea494bc008a7b416a179af', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '710c29070174874d6a6be6a08ed5a5dd97bb1230' })), h("span", { key: '4003d8b277fc55de2460ec8c63f51535f9f64760', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: '0fa9404559103428ce19831a0b45a5330d00c9fa', onKeydown: this.onKeydown }, h("span", { key: '3602318c40723c65c318cef0254dab0161439cc6', class: className }, h("span", { key: 'a9aaf081590bcf01ad2c82c99b8ea10bc9b8f8a5', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: !this.isPromo && this.hide, onClick: this.hide, onFocusin: this.show }, h("slot", { key: '73ad565e8b91925bba6fcb490b542d74890926c1' })), h("span", { key: 'bd84b556b64f4d24f2064d00556070af818524f5', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -121,7 +147,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                     ? `${this.actualPosition?.x}px`
                     : "",
                 position: this.positioning,
-            } }, this.visible && (h("span", { key: '82c207a7951483894494abf1d7e46a1a997f1ff8', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: '178678dc65ebe2d4232437b7f12564444c687510', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '0f97538a405da7b5fdf1b39cee2a7a4db82ece2f', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '41fb5ef06491bfaf355d3fd5a98e00a92cd75a92', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'a6a22b0bc86e87f2c7728fc3888ef109a8b9be8c', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: 'b036d30ba31fbf5b4c8519b229aed70f20509874', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));
@@ -137,9 +163,11 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
         "delay": [2],
         "position": [1],
         "positioning": [1],
+        "isPromo": [4, "is-promo"],
         "actualPosition": [32],
         "arrowStyles": [32],
-        "visible": [32]
+        "visible": [32],
+        "isPromoShown": [32]
     }, [[1, "mouseenter", "onMouseEnter"], [1, "mouseleave", "onMouseLeave"], [9, "resize", "onWindowResize"], [9, "scroll", "onWindowScroll"]], {
         "position": ["watchPosition"]
     }]);

package/dist/components/swirl-tree-navigation-item.js

@@ -93,12 +93,12 @@ const SwirlTreeNavigationItem$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTr
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '1d750b175e5715e6ce44f427be7164cbf208c992', role: "none" }, h("li", { key: 'df354e4bb8486eb1b59cdc18ab76319fa6a54d8d', class: {
+        return (h(Host, { key: '8369fe819475045275719bbe9b16711c59626577', role: "none" }, h("li", { key: '3011241c3bf474f4fb5c13b8e24ed35f1d5d8047', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: '072c1e016ca496beb24b1066d9ae29322fd70418', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: 'df801a9a7bcaff5da25905dfec39b460ed055096', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '4c11dc3049f488e4a729f548bddffcea8f4a4dc0', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: 'ba8d1fbbc813568617c4e19cbbf4b6b0676acfd1', class: "tree-navigation-item__label" }, h("span", { key: 'df1fe9cda6ff97d638c9a1ea431b61275f44c8b0', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '2fefe3aa3a88bbd5041d16e629fc9089b859075e', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '3f3bf81b0c92954ef16dd9b5e1f12ef03e50f41d', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: 'd27a45e3ed535832a86e1e9630c4225d9ee95ab7', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '66b459c55c22945c6fa47278fb89e54ce12a2d8b', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '0147cef7a24a5266e6214aee2b5e0fae5f4d82c2', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
+            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, h(Tag, { key: 'c4ec90c8ed555707559fa39b81a4e5d553ebe16a', onClick: this.toggleExpanded, onKeyDown: this.onKeyDown, class: linkClassName, href: this.href, target: this.target, type: isLink ? undefined : "button", id: this.buttonId, "aria-current": this.active ? "page" : undefined, "aria-controls": this.hasChildren ? this.childrenId : undefined, "aria-expanded": this.hasChildren ? this.expanded : undefined }, h("span", { key: '904ee9daa4ed944f633511932017f5f5849fd187', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '36ee876b8e36c30334f2402b10ec317be8d485cb', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '5eb37d27c1cff2775e15ac17376fa033bdb642ce', class: "tree-navigation-item__label" }, h("span", { key: '5f25b0ee30f33ab1e56ac80432e9040e4a1ed9af', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '96b84e2080a6e6443c29b492eab4e517a8adf57a', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '409e55c6c90611553b278a29c690b7a80e840e3d', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '31392fed7e98a3355d9e5e9cb2d7c141c4539b15', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '6d1991ac134fbeb55fc0b0cdf6e52e6c0b34ff0d', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'aebe5efe827154d974dd4b61a5351048340c4439', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, h("slot", { key: '128b8af2ea1e0b39da09de3cc8ad3329fa1bc50a' }))))));
+            } }, h("slot", { key: '0e40a2bce9714b627727f9b8f5eb92fea1688abf' }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/swirl-tree-navigation.js

@@ -9,7 +9,7 @@ const SwirlTreeNavigation$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTreeNa
         this.__attachShadow();
     }
     render() {
-        return (h(Host, { key: '86870308bca066293786f8864ca39377e922f765' }, h("ul", { key: '3ebec851bb00a9d406d9bcc58df306c66b7f3724', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '3a9cf1a0069dd30b73b49ce295896ab5226f05e1' }))));
+        return (h(Host, { key: '2622a677484f0448fe54e7c5f98b18a78d0cd5f0' }, h("ul", { key: '0bb7b1384e3759d22c3b363f3332d28f78aaaa63', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '9159013c9b3c575e71c19be98d103e1f256aad17' }))));
     }
     static get style() { return swirlTreeNavigationCss; }
 }, [1, "swirl-tree-navigation", {

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

@@ -11,7 +11,7 @@ const SwirlVideoThumbnail$1 = /*@__PURE__*/ proxyCustomElement(class SwirlVideoT
         this.durationLabel = "Duration";
     }
     render() {
-        return (h(Host, { key: '89dac32f65bef0a46b67703fe29f712d8177ad26' }, h("button", { key: '5f8bebb67d9dd7de8e5313c45869f5a5e0ae6398', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'e250188befd06bacf95cceb642b6a3f99d4339a5', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'd7223f77200e3ae6385de7533faba1df176a6fd4', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '5fa5a326db2af07b947a788f5f732bd171a8ca02' }, this.durationLabel), this.duration)), h("svg", { key: 'a5036ced8bff84f95bc39135b1fe2758ac194c85', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '27ff5a6714f1c3ec692f1bed311ff0607d07b10c', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
+        return (h(Host, { key: 'f422afa5aca092e9bc2181f861f87a6384ee98bf' }, h("button", { key: '39078ec3ae8a37e75cdf22c94516f193b84a32aa', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '0bd98edc0f61a314ed5b0e0de1f9f5afd49c929e', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '4a74df71a39e576da3affdc581ce88d1191d609d', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'd53262bc81a9f1d739bb391747910655e467c45d' }, this.durationLabel), this.duration)), h("svg", { key: 'ed07dc5e4af9f9fd27c96e2de12bf8fe78208bf1', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '41af314c2e110334fe103e064019a8b1f0c1ed64', d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" })))));
     }
     static get style() { return swirlVideoThumbnailCss; }
 }, [1, "swirl-video-thumbnail", {

package/dist/components/swirl-visually-hidden2.js

@@ -8,7 +8,7 @@ const SwirlVisuallyHidden = /*@__PURE__*/ proxyCustomElement(class SwirlVisually
         this.__registerHost();
     }
     render() {
-        return (h(Host, { key: '09b1aec3ccdba045e8ebc6d830d708ab7831f74c' }, h("slot", { key: '08988756ba69ebcefe7e71f588a433c286c5adbf' })));
+        return (h(Host, { key: '956e9d1b1c480480a8f9f4fd2ba7017d587c2fab' }, h("slot", { key: 'a196c8079eedb432a2b27b74b07e293258b608d8' })));
     }
     static get style() { return swirlVisuallyHiddenCss; }
 }, [6, "swirl-visually-hidden"]);

package/dist/components/utils.js

@@ -182,5 +182,10 @@ function isDocumentMimeType(mimeType) {
         mimeType.startsWith("application/vnd.openxmlformats-officedocument.wordprocessingml.document") ||
         mimeType.startsWith("application/vnd.apple.pages"));
 }
+function getPixelsFromRemToken(token) {
+    return (+getComputedStyle(document.documentElement)
+        .getPropertyValue(token)
+        .replace("rem", "") * 16);
+}
 
-export { isSupportedImageMimeType as a, isVideoMimeType as b, isAudioMimeType as c, debounce as d, isPdfMimeType as e, isCompressedArchiveMimeType as f, getISODateString as g, isDocumentMimeType as h, isMobileViewport as i, isDescendantOf as j, getActiveElement as k, closestPassShadow as l, parentsPassShadow as m, isDesktopViewport as n, getCircularArrayIndex as o, prefersReducedMotion as p, querySelectorAllDeep as q, removeTimezoneOffset as r, getVisibleHeight as s, getDesktopMediaQuery as t };
+export { isSupportedImageMimeType as a, isVideoMimeType as b, isAudioMimeType as c, debounce as d, isPdfMimeType as e, isCompressedArchiveMimeType as f, getISODateString as g, isDocumentMimeType as h, isMobileViewport as i, isDescendantOf as j, getActiveElement as k, closestPassShadow as l, parentsPassShadow as m, isDesktopViewport as n, getCircularArrayIndex as o, prefersReducedMotion as p, querySelectorAllDeep as q, removeTimezoneOffset as r, getVisibleHeight as s, getPixelsFromRemToken as t, getDesktopMediaQuery as u };

package/dist/esm/file-manager.entry.js

@@ -55,7 +55,7 @@ const FileManager = class {
             onClick: () => this.selectItem(item) }, "type" in item ? (h("swirl-icon-file", { slot: "media" })) : (h("swirl-icon-folder-shared", { slot: "media" })))))) : (h("swirl-box", { padding: "16" }, h("swirl-text", { color: "subdued", weight: "medium" }, "This directory is empty.")));
     }
     render() {
-        return (h(Host, { key: '14083c93c9141df0ab609647a390593b71d4c22e' }, h("swirl-app-layout", { key: 'b37221b75a21db26c333a556b91dffc66f0f6e8c', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '4861921bbe71766f2b8c05ebad59af0ade0fdd43', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'c6cca65267d4ee5d7b851526311eca602d919b07', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'cc6f70b78dfdc12edf541e41fc8bfc15981d3ebf', label: "Sort items" })), h("swirl-stack", { key: '09c69a17c5bdac668bfa3a5938eeb094e493c15e', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: 'b05439a6c50fc72ed89df65873919351a6711fd3' }, h("swirl-heading", { key: '37ecbf0cdbd0e803c6f79f3adca1ceb37bf347f0', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '297447a670515ca3a88a8a7ccea466038f92f476', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: '8240220a1322361d3f2fec3fad59c5c26572fab8', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '42c52c5c8e177328cc574f9de32793854236beb9', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'bf1986bbb921c29644e329bb47aeef3128a68412', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '39480bd58bc6c28a65823ee9e341e142fbb8389b', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '323f9a781a1b12254d8e1b41ff21938ba6c8e372', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '7156996dd05db60fca86169c2740052fdacf9eed', value: ["ascending"] }, h("swirl-option-list-item", { key: 'e5534f804442f5dd2583348454dac9f19e73e8e7', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'b6f8a821b576baf0f4e0be6592cbb679c66d0eb0', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '99e497bc9b4771d75417a7320260c1c2592edc23', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '81910466342a0f783d2b04fbbb0c3ed694477f50' }, h("swirl-app-layout", { key: '6602c2eb9ce0a558bcfe2f7e790df7abe40fbc5a', appName: "Documents", backToNavigationViewButtonLabel: "Back to documents list", ctaIcon: "<swirl-icon-add></swirl-icon-add>", ctaLabel: "Upload file", navigationLabel: "Documents", onNavigationBackButtonClick: this.resetSelectedDirectory, ref: (el) => (this.layout = el), sidebarCloseButtonLabel: "Close file info", sidebarHeading: "File info", showNavigationBackButton: Boolean(this.selectedDirectory), transitionStyle: "dialog" }, h("swirl-resource-list", { key: '27fcd50e4c946b21cd96eaf5e1dfe4c1c24c700d', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'c5afd9e8fa67701de0826bcfa9ffbd2f935b3b2d', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '1e534234d64870567a28a88f554f64f495e10040', label: "Sort items" })), h("swirl-stack", { key: '0df2960e0a64ba41ac77e8e8239e4cd91dfe77a0', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '769e74f0b1a69a6a859d462f151f5789781c9752' }, h("swirl-heading", { key: 'a1e25645619ce516bcab332f9e83f9fde9dc6bde', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'cc8e991111876a80ef0990d544c2ddad079b73cf', color: "subdued", truncate: true }, this.selectedFile?.description))), Boolean(this.selectedFile) ? (h("swirl-file-viewer", { file: this.selectedFile.url, slot: "content", type: this.selectedFile.type })) : (h("swirl-box", { cover: true, centerBlock: true, centerInline: true, padding: "16", slot: "content" }, h("swirl-empty-state", { heading: "Nothing to see here.", illustration: "/images/empty-state-1.svg" }, "Please select a file from the list."))), h("div", { key: 'cc6fe632a55a25b7ceca3ea332bc75eea2470b6c', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '355db3162225bdb84081f80cd41ff9832ec79547', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'af08e4ba2220437ab1d8568079c48bc5623c72e2', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'df7d3094c2346f4312cb6411d028335e0549a409', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '01c0c3b24f6075fc597fb718fb6693ba21c4485e', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '05ee0b481d18a2ba0367f70bb7589cd327718041', value: ["ascending"] }, h("swirl-option-list-item", { key: '872f69143e27c3947e4252c332443d04305fee1a', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'f633b1764cf58ca9e408e248261dc07b891a3db2', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '9369c99a8941627d4873b1c95e96fd335c1b03ec', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
 };