@getflip/swirl-components 0.407.0 → 0.409.0

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

@@ -165,7 +165,7 @@ export class SwirlTimeInput {
         const className = classnames("time-input", {
             "time-input--inline": this.inline,
         });
-        return (h(Host, { key: '03ab0da446784077b458f9c8269b2d05c176b2c8' }, h("div", { key: 'e116e6628a68adcc0c9145ea6b1435e542425f03', class: className }, h("input", { key: '49a22dcc3a1efd4792c645c684ccbc6c3339eb92', "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: 'f60f2f61b85e93d6dbf036f0efc622ead2c28a31', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '76b706f625460ad0ff98c0689b5c1236fd03fa70', size: this.iconSize })))));
+        return (h(Host, { key: 'cd4dec918c1c70c68b9b4a80f292df80a767dfeb' }, h("div", { key: 'c7a58a4e8de450ded9e07436441b0865b641798c', class: className }, h("input", { key: 'b09306879ed74d00937db89daeaf0528f35c86d9', "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: 'af660e49ef12354b947c997c503b2a1fef743ce0', class: "time-input__icon" }, h("swirl-icon-time-outlined", { key: '3ffa32671c2810c33cf67ce65909db4fd5a26b48', size: this.iconSize })))));
     }
     static get is() { return "swirl-time-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -11,7 +11,7 @@ export class SwirlToggleButton {
         const classNames = classnames("button", {
             "button--pressed": this.isPressed,
         });
-        return (h("button", { key: '63432b7cbbd91762fef7110008eae809c83fd2bc', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '8a6136e7b9f4df5f3073d6bc73d85d84ec96cb1b', class: "button__icon", glyph: this.icon })), h("span", { key: 'c2a756f60bc27c7fe9d39c3eff64eb5061ad038e', class: "button__label" }, this.label)));
+        return (h("button", { key: '3691085ad6ac20eecf0bd698c0fc454e7c896300', class: classNames, type: "button", "aria-pressed": this.isPressed ? "true" : "false", onClick: this.onClick }, this.icon && (h("swirl-icon", { key: '788fc3af9cee267eb85376536e8631f20eea2fde', class: "button__icon", glyph: this.icon })), h("span", { key: 'c40c68ae6c0691077ad28e22f527c4f4b67c9967', class: "button__label" }, this.label)));
     }
     static get is() { return "swirl-toggle-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlTreeNavigation {
     render() {
-        return (h(Host, { key: '78932b92386edc1f8d31fd494351dc4321da29c6' }, h("ul", { key: 'f4eaa660a12e48a9550a69a2118ef9a3f6741d40', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '3b2eeb626a3c4f7092f0f776710c471c6250f5fc' }))));
+        return (h(Host, { key: '0f15f21e5e300ca35b50c028696fe2bc36631db9' }, h("ul", { key: 'd2ba302cf26759679fe6d6e4014f7da8c66a9e5c', "aria-label": this.label, class: "tree-navigation", role: "tree" }, h("slot", { key: '95c332aa0fa1a8816e5db360377020a8fe678665' }))));
     }
     static get is() { return "swirl-tree-navigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,12 +83,12 @@ export class SwirlTreeNavigationItem {
             "tree-navigation-item__link--active": this.active,
             "tree-navigation-item__link--has-icon": Boolean(this.icon),
         });
-        return (h(Host, { key: '621ae792f9eb477341a9534320be2ab9e2ca27c1', role: "none" }, h("li", { key: 'bb3581e2192fb80f4628a2a0f27c70e746e2081e', class: {
+        return (h(Host, { key: '57964d38e2fc7faa3d73515530983a43a3ea9148', role: "none" }, h("li", { key: 'c922cb6f910e791995da88ff870956d390996cb4', 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: '6d4b5dd9f2138b97a191f0d89dad2b0ed9b47c1f', 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: '42feb43c08e7df27bbf086dcbe71bb96a45d1420', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: '2d8220256f6b971daa75718ea4ebabe04fbd21cd', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '86e031b78e2e8b14e58a5d2dd57106d1e6a1a23b', class: "tree-navigation-item__label" }, h("span", { key: '6e9fcb6b857290eac953426aabae8deb9827c39a', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'a3bcf65724f407b9d65005dd2093506ee3d3d4b1', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '808909c28007253376562e02ae942cbd1a0471a9', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '31dc142a5d2ab125b52d79b6e87b428c87e695fd', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '70ffaff6846b64ad0bd24cb11bdf7cd0d6f63399', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: 'c413bc0709b2964d5b2ead46a15b7a62c8961a9f', 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: 'c2a7da91d363f0f10145a45c8dda27d626dbfed3', 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: '4209b27b776f65d228ba91d5397dc584b8c010c3', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'cdbb812043202a8b4ab98bf833c40df12fc8430f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '73238d37e98d458f50e246787a208a4de1de35a5', class: "tree-navigation-item__label" }, h("span", { key: '86032116cad84a5380f43d5f3dd8abcb6da1c39b', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'f44d90f4ba3d07a74130ad746a74cab0f8299834', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'f0377430fe46b99621443cc7eeac49edafe49f2d', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '43a141f81b93b684e677aa67469ba6a40a3e92ab', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: 'c506137e85a995252c9b446e7fcdd41b1042f074', size: 16, role: "img", "aria-label": "External link" })))))), this.hasChildren && (h("ul", { key: '92a58cd3e6d996f1db4563296f8a189a569b3bae', 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: 'e4aff6890273813cdba6d868aa56cd4121940ad7' }))))));
+            } }, h("slot", { key: '7eb210372db3a64dead6f034d3538a1010b3df1a' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ export class SwirlVideoThumbnail {
         this.durationLabel = "Duration";
     }
     render() {
-        return (h(Host, { key: 'b7c2ffa7c9c9663fa2d34e7674ebf406f5b9d192' }, h("button", { key: '0303f0f2f7196639266db3cc51a850b78b521365', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '558e5e40fce4ff8c54a3b5d89ce660929eba6193', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'd85422f57771d31aea4e551c57ab9c865816d546', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'fba1f6ad553f69c015e10568097ea8e1229b6599' }, this.durationLabel), this.duration)), h("svg", { key: 'd1307ddde90dae8a211318dac31e6b442227d19b', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f8815b7fdb8a453d002d8d3cda437fb5a8430157', 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: 'cb9680f6d756ff0d9f83a68a49a5bf1ba1527c59' }, h("button", { key: '25e0ed9171e13a33d7aa836d11f4dbb879224c9b', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'a1d8079f6c047ff39b4c88890e8c32efd41cc63e', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '365ead456d4f7c7e28ce0c9fe285330e6862d446', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: '2aeb47693af3c96ae330b3a2e15428941cc31ed8' }, this.durationLabel), this.duration)), h("svg", { key: '949498c4c6d4562aa021be2afed3d3c5ef56d57b', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '552049b7718e6d5626102848a2848e79261c6cbb', 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 is() { return "swirl-video-thumbnail"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-visually-hidden/swirl-visually-hidden.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlVisuallyHidden {
     render() {
-        return (h(Host, { key: '9ca197471a06c7bc65a533fb7e72790e19714c16' }, h("slot", { key: '3f4b2fe55a08a6e93ee86457a5994d2eb8c49929' })));
+        return (h(Host, { key: '3854d9bfbc515f3a0bec07cff8bee6aab8cf61be' }, h("slot", { key: '00e9463ed5ac99c1d00a6acebf6b924b79a2582c' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/prototypes/file-manager/file-manager.js

@@ -53,7 +53,7 @@ export class FileManager {
             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: '933282e5d7b61c5d9523e5292a3202061c2231c7' }, h("swirl-app-layout", { key: 'b81370c384895dee865880da20d7398de69e7dbd', 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: '5da58a4136138b0b6d4a1533ec76c52fddd572e1', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: 'fda8be398cfa4d0e9e91e40113a4556b61a34a28', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: 'd89d3a96b7d1fbe6cf9eedb8e321e09e6a6e75e5', label: "Sort items" })), h("swirl-stack", { key: 'd2e047ce6e5ffb27c098f814973e660674f382db', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '72cb5ad2e1409e3e238592d65134f8474f161f07' }, h("swirl-heading", { key: 'bb98c7272c6a1a3f8d353071134e1fed32e808e3', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: '5748950cf2f6a4bb4a071cef02df1142bfec49e4', 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: '446a94e91c99ff7fe7d29d523842fae99fd8223e', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '00fa3bc27c267af962f22bd4afdad084aa09e94a', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: '70a0caceb5c3b402b60ef129247abefd21f40e5c', padding: "16", slot: "sidebar" }, h("swirl-text", { key: 'dfb1b0d4c18d2cc58a62444bbb67c872e974f305', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: '155b9f1aa46daf464dbe88e967ac1967861fa852', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '5878b8dd2a0c5e7e36ea742f2f6a95a8c43c7ca9', value: ["ascending"] }, h("swirl-option-list-item", { key: 'e02d8b566578a32df3a3256fb7911b591de2f379', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'ef7db2f6eb886e355e59482f2b4dbb1ead5c1e0a', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '142d290d4390d9cffd6034845f9421fb9318074e', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
+        return (h(Host, { key: '8ca6724c11a9bcf6b3e2e4e7decd1be0673d39db' }, h("swirl-app-layout", { key: 'bd977909ec40a4a715d548244c2479ea1f7518bb', 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: '0268f8c52326314035af1722a562c03d96328738', label: "Documents", slot: "navigation" }, this.renderNavigation()), h("swirl-popover-trigger", { key: '49f226345648895fd9e09db6f6f6eb3c1675e2f5', swirlPopover: this.sortMenu, slot: "navigation-controls" }, h("swirl-button", { key: '701856c72a838d1810ee959c0b6371d1f89a9345', label: "Sort items" })), h("swirl-stack", { key: '54e8822d6ffbc939196b34546ab7f93418a963d2', orientation: "horizontal", slot: "app-bar" }, h("swirl-stack", { key: '0a9bee05994d36ca651ddf122eb0866b5833dce5' }, h("swirl-heading", { key: '95af0bf0a0552775575cb00a7430f51f6ce37d9c', as: "h2", level: 4, text: this.selectedFile?.name }), h("swirl-text", { key: 'bbc6315b5979b629fd0ec09a8520b16da40bc2ee', 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: '509af3ea85d2b9db1e20ddf317782b340b9d5806', slot: "app-bar-controls" }, this.selectedFile && (h("swirl-button", { key: '74d946faf722b95803b1665b3210649ea6e256bd', "hide-label": true, class: "info-button", icon: "<swirl-icon-info></swirl-icon-info>", label: "Open file info", onClick: this.toggleSidebar }))), h("swirl-box", { key: 'd350cf75ce6133d7ac3d09bfac339caa9514ae70', padding: "16", slot: "sidebar" }, h("swirl-text", { key: '1ddfe29dc6894f6b32172c7a300d69656a6203e8', color: "subdued", weight: "medium" }, "File info goes here \u2026"))), h("swirl-popover", { key: 'f811e502fd6a59ee316abe00f9c5b3c83346ae3a', label: "Sort items", ref: (el) => (this.sortMenu = el) }, h("swirl-option-list", { key: '6d6f3e5eb00de053c8fb4fa4e169909e4c4faed0', value: ["ascending"] }, h("swirl-option-list-item", { key: '666d3060048147470b212ff4a631c62f1f367947', icon: "<swirl-icon-expand-less></swirl-icon-expand-less>", label: "Ascending", value: "ascending" }), h("swirl-option-list-item", { key: 'f9f5a4dac0fa88a032ec42d808649737d06035d0', icon: "<swirl-icon-expand-more></swirl-icon-expand-more>", label: "Descending", value: "descending" }), h("swirl-option-list-item", { key: '47c056aaf33647bec8cd86d40975f2291fefc4bc', icon: "<swirl-icon-time-outlined></swirl-icon-time-outlined>", label: "By date", value: "date" })))));
     }
     static get is() { return "file-manager"; }
     static get encapsulation() { return "shadow"; }