npm - @getflip/swirl-components - Versions diffs - 0.497.0 → 0.498.1 - Mend

@getflip/swirl-components 0.497.0 → 0.498.1

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 (1887) hide show

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 require('./utils-UfZG-xPD.js');

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

@@ -1,6 +1,6 @@
 'use strict';
-var index$1 = require('./index-6VVVqdOB.js');
+var index$1 = require('./index-tEI70rPr.js');
 var index = require('./index-DcAhLZUH.js');
 var balancetext$1 = {exports: {}};

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 const swirlThemeProviderCss = () => `.sc-swirl-theme-provider-h{display:unset}`;

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var index$1 = require('./index-DcAhLZUH.js');
 const swirlThumbnailCss = () => `:host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s)}.thumbnail--size-s{--swirl-thumbnail-size:2.5rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-m{--swirl-thumbnail-size:3rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-l{--swirl-thumbnail-size:4rem;--swirl-thumbnail-compact-button-size:1.5rem}.thumbnail--size-xl{--swirl-thumbnail-size:5.5rem;--swirl-thumbnail-compact-button-size:1.75rem;border-radius:var(--s-border-radius-sm)}.thumbnail--size-2xl{--swirl-thumbnail-size:7.5rem;border-radius:var(--s-border-radius-sm)}.thumbnail--format-landscape{width:var(--swirl-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-portrait{height:var(--swirl-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-square{width:var(--swirl-thumbnail-size);height:var(--swirl-thumbnail-size)}.thumbnail--uploading-bar .thumbnail__timestamp{bottom:var(--s-space-8)}.thumbnail__image-wrapper{position:relative;overflow:hidden;width:100%;height:100%;padding:0;border:none;border-radius:inherit;background-color:transparent;box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail__image-wrapper:focus:not(:focus-visible){outline:none}.thumbnail__image-wrapper:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail--interactive .thumbnail__image-wrapper{cursor:pointer}.thumbnail--interactive .thumbnail__image-wrapper:hover:after{position:absolute;background-color:rgba(0, 0, 0, 0.15);content:"";inset:0}.thumbnail--interactive .thumbnail__image-wrapper:active:after{position:absolute;background-color:rgba(0, 0, 0, 0.3);content:"";inset:0}.thumbnail__image{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.thumbnail__progress-indicator,.thumbnail__uploading-overlay{position:absolute;z-index:1;right:0;bottom:0;left:0}.thumbnail__uploading-overlay{inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__error{position:absolute;z-index:1;inset:0;display:flex;align-items:center;justify-content:center;background-color:var(--s-surface-on-image-default)}.thumbnail__buttons{position:absolute;z-index:1;top:var(--s-space-4);right:var(--s-space-4)}.thumbnail__compact-action{position:absolute;z-index:2;top:0;right:0}.thumbnail__compact-button{width:var(--swirl-thumbnail-compact-button-size, 1.5rem);height:var(--swirl-thumbnail-compact-button-size, 1.5rem);padding:0;border:none;border-bottom-left-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);cursor:pointer}.thumbnail__compact-button:focus:not(:focus-visible){outline:none}.thumbnail__compact-button:focus-visible{outline:0.125rem solid var(--s-focus-default);outline-offset:calc(-1 * 0.125rem)}.thumbnail__buttons,.thumbnail__compact-action{opacity:0}.thumbnail:hover .thumbnail__buttons,.thumbnail:hover .thumbnail__compact-action,.thumbnail:focus-within .thumbnail__buttons,.thumbnail:focus-within .thumbnail__compact-action{opacity:1}.thumbnail__timestamp{position:absolute;z-index:1;bottom:0;left:0;display:block;overflow:hidden;max-width:calc(100% - 2 * var(--s-space-4));height:1.25rem;padding-right:var(--s-space-4);padding-left:var(--s-space-4);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-on-image);background-color:var(--s-surface-on-image-default);font-size:var(--s-font-size-sm);line-height:1.25rem;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}`;

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var index$2 = require('./index-DcAhLZUH.js');
 var index$1 = require('./index-BOqO2Grl.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 const swirlToastProviderCss = () => `.toast-provider__stack{position:fixed;inset:unset;bottom:var(--s-space-16);left:0;right:0;pointer-events:none;margin:0 var(--s-space-24);border:none;padding:0;background:none;width:auto;overflow:unset}.toast-provider__stack::backdrop{display:none}.toast-provider__stack>*{width:auto;pointer-events:auto}`;

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 require('./utils-UfZG-xPD.js');

package/dist/cjs/swirl-toggle-button.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var index$1 = require('./index-DcAhLZUH.js');
 const swirlToggleButtonCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.button{display:inline-flex;gap:var(--s-space-8);width:100%;padding:0.375rem var(--s-space-8);justify-content:center;align-items:center;border:none;border-radius:0.375rem;color:var(--s-text-default);background-color:var(--s-surface-sunken-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer}.button:hover{background-color:var(--s-state-hovered)}.button:active{background-color:var(--s-state-pressed)}.button:focus:not(:focus-visible){outline:none}.button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.button.button--pressed{background-color:var(--s-surface-default);color:var(--s-text-highlight);box-shadow:var(--s-shadow-level-1)}.button.button--pressed .button__icon{color:var(--s-icon-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button__label{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}.button__icon{width:1.5rem;height:1.5rem;color:var(--s-icon-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button__icon{width:1.25rem;height:1.25rem}}`;

package/dist/cjs/swirl-toggle-group.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var index$1 = require('./index-DcAhLZUH.js');
 const swirlToggleGroupCss = () => `:host{display:inline-block}:host *{box-sizing:border-box}.toggle-group{padding:var(--s-space-2);background-color:var(--s-surface-sunken-default);border-radius:var(--s-space-8);transition:box-shadow 0.3s}.toggle-group--elevated{box-shadow:var(--s-shadow-level-2)}.toggle-group--variant-outline{outline:var(--s-border-width-default) solid var(--s-border-strong);outline-offset:calc(var(--s-border-width-default) * -1)}`;

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var utils = require('./utils-UfZG-xPD.js');
 const swirlToolbarCss = () => `:host{display:block}:host *{box-sizing:border-box}`;

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

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');

package/dist/cjs/swirl-tree-navigation-item.cjs.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var index$1 = require('./index-DcAhLZUH.js');
-const swirlTreeNavigationItemCss = () => `:host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}`;
+const swirlTreeNavigationItemCss = () => `:host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-state-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-state-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-state-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8);max-height:var(--s-line-height-sm)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4);opacity:0;transition:opacity 0.3s ease}.tree-navigation-item__link:hover .tree-navigation-item__external-icon,.tree-navigation-item__link:focus-visible .tree-navigation-item__external-icon{opacity:1}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}.tree-navigation-item__is-new-tag{flex-shrink:0}`;
 const SwirlTreeNavigationItem = class {
     constructor(hostRef) {
@@ -15,6 +15,7 @@ const SwirlTreeNavigationItem = class {
         this.external = false;
         this.expanded = false;
         this.hasChildren = false;
+        this.hasCustomIcon = false;
         this.childrenHeight = "0";
         this.buttonId = `${this.navigationItemId}-button`;
         this.childrenId = `${this.navigationItemId}-children`;
@@ -52,6 +53,7 @@ const SwirlTreeNavigationItem = class {
         };
     }
     componentWillLoad() {
+        this.hasCustomIcon = Boolean(this.el.querySelector("[slot='custom-icon']"));
         this.checkForChildren();
     }
     componentDidLoad() {
@@ -89,14 +91,14 @@ const SwirlTreeNavigationItem = class {
         const Tag = isLink ? "a" : "button";
         const linkClassName = index$1.classnames("tree-navigation-item__link", {
             "tree-navigation-item__link--active": this.active,
-            "tree-navigation-item__link--has-icon": Boolean(this.icon),
+            "tree-navigation-item__link--has-icon": this.hasCustomIcon || Boolean(this.icon),
         });
-        return (index.h(index.Host, { key: '24e4cc0b3091b682b1fd5dc3c8f5e95aa9ad8a8e', role: "none" }, index.h("li", { key: '913062df5274087fb7ca1e66f696b0ef3363ab81', class: {
+        return (index.h(index.Host, { key: '9d410315d9ced800c379b7d05e08ecb3e51e3814', role: "none" }, index.h("li", { key: 'c0f8691af8bf97eef0716667588fe5ab65b2c0bb', class: {
                 "tree-navigation-item": true,
                 "tree-navigation-item--expanded": this.expanded,
-            }, role: "treeitem", "aria-expanded": this.hasChildren ? this.expanded : undefined, "aria-level": this.level }, index.h(Tag, { key: '6d477b82955e16eec743bbd888bc478ea7cd9e20', 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 }, index.h("span", { key: '227c7eb98734533d53c36bdf66790ee174d092d2', class: "tree-navigation-item__content" }, this.icon && (index.h("swirl-icon", { key: 'dfff8eeb938004d4612beab1f40f37cefa1a86bf', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '30af5659cc987fdfd7bccab2e903d7e96a874daf', class: "tree-navigation-item__label" }, index.h("span", { key: '4b1ff0104cb1a5794fa2263e8f31f42bd6da0521', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: '9bac41f316d24b521b47a2781cf3d03d9222b4a8', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: 'd01b7514d87ac716d59b92c4501d11a267c21da0', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '783b0406e0201d37670fad2a78c0d4e66f8db504', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '8a7235a1abd9f536bbc08f5b6690b0e093bab05a', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (index.h("swirl-tag", { key: '3c2915464fcb3656a88d904598ce5431794b7d56', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (index.h("ul", { key: 'c99183eafaf4abd39046f493b5f3d5b65cf448ee', 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 }, index.h(Tag, { key: '82f023dd4af3ceec7b9f890097320482ce97f3a3', 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 }, index.h("span", { key: 'f3a2e20055bf7ced64f31ca036a3122db78fedc3', class: "tree-navigation-item__content" }, this.hasCustomIcon && (index.h("span", { key: 'b2951e1d5d72b55cae72dd648021651bcd15538d', class: "tree-navigation-item__icon", "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }, index.h("slot", { key: 'a13949bc1b64dbe719e5a8bf24278f875ac4f814', name: "custom-icon" }))), !this.hasCustomIcon && this.icon && (index.h("swirl-icon", { key: '3eb6fb9721525644d4c364dde958e8571a1a627f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), index.h("span", { key: '164b0449d9f2112a4d44a7b47a8a906d1599d982', class: "tree-navigation-item__label" }, index.h("span", { key: 'e64fb929e885747c7df166c35109465de8f5e981', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (index.h("span", { key: 'feb686e0c0da93524f7b8b67afceeff986940bd5', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, index.h("swirl-icon-chevron-right", { key: '0e5dcf23065a2b4d395cd247e8c67181771e9777', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (index.h("span", { key: '647dbc1098508387613ec0dbc7cdd5b279af67f3', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, index.h("swirl-icon-open-in-new", { key: '19b8f3c8a2c12448bb1bcf0b1720b0e8e24ddca5', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (index.h("swirl-tag", { key: '65a3fbcf1386227356bf6e278702be28d0b7c880', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (index.h("ul", { key: '4099707c9f4c96c9e2e990f9512c3ff738e1e0c5', class: "tree-navigation-item__children", id: this.childrenId, role: "group", "aria-label": `${this.label} submenu`, ref: (el) => (this.childrenRef = el), style: {
                 height: this.childrenHeight,
-            } }, index.h("slot", { key: 'cdbf328824b44ba777ec024367d710c1a5d51cd7' }))))));
+            } }, index.h("slot", { key: '36979963b718cbab4349e2d9f3be492641b18fd6' }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-tree-navigation.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 const swirlTreeNavigationCss = () => `:host{display:block}:host *{box-sizing:border-box}.tree-navigation{margin:0;padding:0}`;

package/dist/cjs/swirl-tree-view-item.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var sortable_esm = require('./sortable.esm-B1ZNencO.js');
 var swirlTreeView_config = require('./swirl-tree-view.config-Cg6OacWF.js');

package/dist/cjs/swirl-tree-view.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 var sortable_esm = require('./sortable.esm-B1ZNencO.js');
 var swirlTreeView_config = require('./swirl-tree-view.config-Cg6OacWF.js');

package/dist/cjs/swirl-video-thumbnail.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 const swirlVideoThumbnailCss = () => `:host{display:flex;width:100%}:host *{box-sizing:border-box}.video-thumbnail{position:relative;display:inline-flex;width:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;container-type:inline-size;container-name:video-thumbnail}.video-thumbnail:after{position:absolute;background-color:rgba(0, 0, 0, 0.05);content:"";inset:0}.video-thumbnail:focus:not(:focus-visible){outline:none}.video-thumbnail:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.video-thumbnail__image{width:100%}.video-thumbnail__duration{position:absolute;bottom:var(--s-space-8);left:var(--s-space-8);padding:var(--s-space-2) var(--s-space-8);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),     rgba(255, 255, 255, 0.1);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}.video-thumbnail__play-icon{position:absolute;z-index:1;top:50%;left:50%;width:2.5rem;height:2.5rem;transform:translate3d(-50%, -50%, 0)}@container video-thumbnail (min-width: 448px){.video-thumbnail__play-icon{width:3.5rem;height:4.5rem}}`;
@@ -10,7 +10,7 @@ const SwirlVideoThumbnail = class {
         this.durationLabel = "Duration";
     }
     render() {
-        return (index.h(index.Host, { key: '2b6dac395099522d17b958052d5ed8b41db65aaf' }, index.h("button", { key: '2be18ef35b877f84e41724903a808c06aecc8ff6', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: '55f0d229b8758654d655e404eb68441179f80184', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: '62f48f3095920204f2ccfa206cea5380baaf521f', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'd6bdbc78dd697d4a73dde90267ebd486af485ca8' }, this.durationLabel), this.duration)), index.h("svg", { key: 'ae47cd894b9006989401bc531b656417dfcc85d1', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '3442a5015d311615563ccf160ffc99a47984af15', 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 (index.h(index.Host, { key: '3022d58149ece77aa8b4ea2e64c971429fec80ba' }, index.h("button", { key: '8f8c1cdeccf74471c7d5bfaa2eb40f7e26da68db', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, index.h("img", { key: 'fef51a137116e2f7cb28443ce9039579d94696b4', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (index.h("span", { key: 'f170fe4841f2038b8489b220d7bc24891bce8eda', class: "video-thumbnail__duration", id: "duration" }, index.h("swirl-visually-hidden", { key: 'cce95ca0d643e74ec1b6b586a18544243ebde8b9' }, this.durationLabel), this.duration)), index.h("svg", { key: '3738ed4000e2bc29f51f049d4e4308c07d086ebb', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '02154d538ed641db69c3807af34a2b12aa67ae52', 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" })))));
     }
 };
 SwirlVideoThumbnail.style = swirlVideoThumbnailCss();

package/dist/cjs/swirl-visually-hidden.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 const swirlVisuallyHiddenCss = () => `.sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}`;
@@ -9,7 +9,7 @@ const SwirlVisuallyHidden = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'e065ea28425a9d0377c45ce14e4540c297006795' }, index.h("slot", { key: '348e81c45effa18d173f2d899b4b913fdb0079b0' })));
+        return (index.h(index.Host, { key: '1e62cf11ebbb1134c7176a28e6cf91346e382902' }, index.h("slot", { key: '1dd238b1e1c8c133fdfe48af7327407fbab42b00' })));
     }
 };
 SwirlVisuallyHidden.style = swirlVisuallyHiddenCss();

package/dist/cjs/wc-datepicker.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-6VVVqdOB.js');
+var index = require('./index-tEI70rPr.js');
 function addDays(date, days) {
   const newDate = new Date(date);

package/dist/collection/components/swirl-date-input/swirl-date-input.js CHANGED Viewed

@@ -203,6 +203,9 @@ export class SwirlDateInput {
                 this.invalidInput.emit(this.value);
             }
         }
+        else {
+            this.mask.value = "";
+        }
     }
     render() {
         const ariaInvalid = this.invalid === true || this.invalid === false
@@ -215,7 +218,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: 'f166999a20fff05802989608ed1329a585564547' }, h("div", { key: '11f437da98a042c658724fe906e0f921a99e97af', class: className }, h("input", { key: '3763a00b384f7be10e36101411bf28e8298dfb2e', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: '8d588fae83751487fdacceb53d09f6030fdab74b', swirlPopover: `popover-${this.id}` }, h("button", { key: '0b5a831ca17bb7a24616625ea59c5a4ce330df8f', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'd961c2eb0baf5d7b643b5d50619c36ae4a864443', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: '3fd0b3eaa50b893873d48bb3f0976b862ff4e839', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '539b2e3b63d02c53acb4449d65ae9c502d2d9f22', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '3cc04c80b9e8be4aa7461f340d10705220751b92' }, h("div", { key: 'f07cab3f83d59c05e86926490893e0455b88bc48', class: className }, h("input", { key: 'e7aa2c4be5019070fdfc0819354528600a8c5a1a', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.isInPickOnlyMode || this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text" }), !this.readonly && (h("swirl-popover-trigger", { key: '3572f4e7b818083b664f6f976a936171ecfc209b', swirlPopover: `popover-${this.id}` }, h("button", { key: 'bd20e95c764b32d27af2230ddcabb48351008f58', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: 'f51649c06b04c5873fffd4fe5866f79421578b84', size: this.iconSize }))))), !(this.disabled || this.readonly) && (h("swirl-popover", { key: 'edcee514ccc63bcf098d6669bdc0c92d106cc0e1', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '0e348d65635e249958e274bd7d2e74f76457ff8c', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     static get is() { return "swirl-date-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-tree-navigation-item/swirl-tree-navigation-item.css CHANGED Viewed

@@ -86,6 +86,7 @@
   display: inline-flex;
   flex-shrink: 0;
   padding-right: var(--s-space-8);
+  max-height: var(--s-line-height-sm);
 }
 .tree-navigation-item__toggle-icon {
@@ -99,6 +100,13 @@
   max-height: 1rem;
   color: var(--s-icon-default);
   margin-left: var(--s-space-4);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.tree-navigation-item__link:hover .tree-navigation-item__external-icon,
+.tree-navigation-item__link:focus-visible .tree-navigation-item__external-icon {
+  opacity: 1;
 }
 /* Label styles */

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

@@ -1,5 +1,8 @@
 import { h, Host, } from "@stencil/core";
 import classnames from "classnames";
+/**
+ * @slot custom-icon - Custom icon element that takes precedence over the icon prop.
+ */
 export class SwirlTreeNavigationItem {
     constructor() {
         this.markAsNewLabel = "New";
@@ -8,6 +11,7 @@ export class SwirlTreeNavigationItem {
         this.external = false;
         this.expanded = false;
         this.hasChildren = false;
+        this.hasCustomIcon = false;
         this.childrenHeight = "0";
         this.buttonId = `${this.navigationItemId}-button`;
         this.childrenId = `${this.navigationItemId}-children`;
@@ -45,6 +49,7 @@ export class SwirlTreeNavigationItem {
         };
     }
     componentWillLoad() {
+        this.hasCustomIcon = Boolean(this.el.querySelector("[slot='custom-icon']"));
         this.checkForChildren();
     }
     componentDidLoad() {
@@ -82,14 +87,14 @@ export class SwirlTreeNavigationItem {
         const Tag = isLink ? "a" : "button";
         const linkClassName = classnames("tree-navigation-item__link", {
             "tree-navigation-item__link--active": this.active,
-            "tree-navigation-item__link--has-icon": Boolean(this.icon),
+            "tree-navigation-item__link--has-icon": this.hasCustomIcon || Boolean(this.icon),
         });
-        return (h(Host, { key: '24e4cc0b3091b682b1fd5dc3c8f5e95aa9ad8a8e', role: "none" }, h("li", { key: '913062df5274087fb7ca1e66f696b0ef3363ab81', class: {
+        return (h(Host, { key: '9d410315d9ced800c379b7d05e08ecb3e51e3814', role: "none" }, h("li", { key: 'c0f8691af8bf97eef0716667588fe5ab65b2c0bb', 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: '6d477b82955e16eec743bbd888bc478ea7cd9e20', 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: '227c7eb98734533d53c36bdf66790ee174d092d2', class: "tree-navigation-item__content" }, this.icon && (h("swirl-icon", { key: 'dfff8eeb938004d4612beab1f40f37cefa1a86bf', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '30af5659cc987fdfd7bccab2e903d7e96a874daf', class: "tree-navigation-item__label" }, h("span", { key: '4b1ff0104cb1a5794fa2263e8f31f42bd6da0521', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: '9bac41f316d24b521b47a2781cf3d03d9222b4a8', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: 'd01b7514d87ac716d59b92c4501d11a267c21da0', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '783b0406e0201d37670fad2a78c0d4e66f8db504', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '8a7235a1abd9f536bbc08f5b6690b0e093bab05a', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (h("swirl-tag", { key: '3c2915464fcb3656a88d904598ce5431794b7d56', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (h("ul", { key: 'c99183eafaf4abd39046f493b5f3d5b65cf448ee', 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: '82f023dd4af3ceec7b9f890097320482ce97f3a3', 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: 'f3a2e20055bf7ced64f31ca036a3122db78fedc3', class: "tree-navigation-item__content" }, this.hasCustomIcon && (h("span", { key: 'b2951e1d5d72b55cae72dd648021651bcd15538d', class: "tree-navigation-item__icon", "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` }, h("slot", { key: 'a13949bc1b64dbe719e5a8bf24278f875ac4f814', name: "custom-icon" }))), !this.hasCustomIcon && this.icon && (h("swirl-icon", { key: '3eb6fb9721525644d4c364dde958e8571a1a627f', class: "tree-navigation-item__icon", glyph: this.icon, size: 20, "aria-hidden": "true", role: "img", "aria-label": `${this.label} icon` })), h("span", { key: '164b0449d9f2112a4d44a7b47a8a906d1599d982', class: "tree-navigation-item__label" }, h("span", { key: 'e64fb929e885747c7df166c35109465de8f5e981', class: "tree-navigation-item__label-text" }, this.label), this.expandable && this.hasChildren && !this.external && (h("span", { key: 'feb686e0c0da93524f7b8b67afceeff986940bd5', class: "tree-navigation-item__toggle-icon", "aria-hidden": "true" }, h("swirl-icon-chevron-right", { key: '0e5dcf23065a2b4d395cd247e8c67181771e9777', size: 16, role: "img", "aria-label": "Expand" }))), this.external && (h("span", { key: '647dbc1098508387613ec0dbc7cdd5b279af67f3', class: "tree-navigation-item__external-icon", "aria-hidden": "true" }, h("swirl-icon-open-in-new", { key: '19b8f3c8a2c12448bb1bcf0b1720b0e8e24ddca5', size: 16, role: "img", "aria-label": "External link" })))), this.markAsNew && (h("swirl-tag", { key: '65a3fbcf1386227356bf6e278702be28d0b7c880', class: "tree-navigation-item__is-new-tag", intent: "info", label: this.markAsNewLabel, size: "m", variant: "default" })))), this.hasChildren && (h("ul", { key: '4099707c9f4c96c9e2e990f9512c3ff738e1e0c5', 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: 'cdbf328824b44ba777ec024367d710c1a5d51cd7' }))))));
+            } }, h("slot", { key: '36979963b718cbab4349e2d9f3be492641b18fd6' }))))));
     }
     static get is() { return "swirl-tree-navigation-item"; }
     static get encapsulation() { return "shadow"; }
@@ -324,6 +329,7 @@ export class SwirlTreeNavigationItem {
         return {
             "expanded": {},
             "hasChildren": {},
+            "hasCustomIcon": {},
             "childrenHeight": {}
         };
     }

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

@@ -19,3 +19,25 @@ SwirlTreeNavigationItem.args = {
     icon: "file",
     label: "Label",
 };
+const CustomIconTemplate = (args) => {
+    const element = generateStoryElement("swirl-tree-navigation-item", args);
+    const icon = document.createElement("div");
+    icon.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
+      <path d="M15 19V18H13C12.45 18 11.9792 17.8042 11.5875 17.4125C11.1958 17.0208 11 16.55 11 16V8H9V9C9 9.55 8.80417 10.0208 8.4125 10.4125C8.02083 10.8042 7.55 11 7 11H4C3.45 11 2.97917 10.8042 2.5875 10.4125C2.19583 10.0208 2 9.55 2 9V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H7C7.55 3 8.02083 3.19583 8.4125 3.5875C8.80417 3.97917 9 4.45 9 5V6H15V5C15 4.45 15.1958 3.97917 15.5875 3.5875C15.9792 3.19583 16.45 3 17 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V9C22 9.55 21.8042 10.0208 21.4125 10.4125C21.0208 10.8042 20.55 11 20 11H17C16.45 11 15.9792 10.8042 15.5875 10.4125C15.1958 10.0208 15 9.55 15 9V8H13V16H15V15C15 14.45 15.1958 13.9792 15.5875 13.5875C15.9792 13.1958 16.45 13 17 13H20C20.55 13 21.0208 13.1958 21.4125 13.5875C21.8042 13.9792 22 14.45 22 15V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H17C16.45 21 15.9792 20.8042 15.5875 20.4125C15.1958 20.0208 15 19.55 15 19ZM17 9H20V5H17V9ZM17 19H20V15H17V19ZM4 9H7V5H4V9Z" fill="url(#paint0_linear_1684_11108)"/>
+      <defs>
+        <linearGradient id="paint0_linear_1684_11108" x1="19.5" y1="18.5" x2="6" y2="5.5" gradientUnits="userSpaceOnUse">
+          <stop offset="0.225962" stop-color="#1D79FF"/>
+          <stop offset="1" stop-color="#65DB91"/>
+        </linearGradient>
+      </defs>
+    </svg>`;
+    icon.setAttribute("slot", "custom-icon");
+    element.appendChild(icon);
+    return element;
+};
+export const WithCustomIcon = CustomIconTemplate.bind({});
+WithCustomIcon.args = {
+    icon: "file",
+    label: "Nav item with custom icon",
+    navigationItemId: "custom-icon-item",
+};

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

@@ -4,7 +4,7 @@ export class SwirlVideoThumbnail {
         this.durationLabel = "Duration";
     }
     render() {
-        return (h(Host, { key: '2b6dac395099522d17b958052d5ed8b41db65aaf' }, h("button", { key: '2be18ef35b877f84e41724903a808c06aecc8ff6', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: '55f0d229b8758654d655e404eb68441179f80184', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: '62f48f3095920204f2ccfa206cea5380baaf521f', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'd6bdbc78dd697d4a73dde90267ebd486af485ca8' }, this.durationLabel), this.duration)), h("svg", { key: 'ae47cd894b9006989401bc531b656417dfcc85d1', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '3442a5015d311615563ccf160ffc99a47984af15', 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: '3022d58149ece77aa8b4ea2e64c971429fec80ba' }, h("button", { key: '8f8c1cdeccf74471c7d5bfaa2eb40f7e26da68db', "aria-describedby": this.duration !== undefined ? "duration" : undefined, "aria-label": this.label, class: "video-thumbnail", type: "button" }, h("img", { key: 'fef51a137116e2f7cb28443ce9039579d94696b4', alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && (h("span", { key: 'f170fe4841f2038b8489b220d7bc24891bce8eda', class: "video-thumbnail__duration", id: "duration" }, h("swirl-visually-hidden", { key: 'cce95ca0d643e74ec1b6b586a18544243ebde8b9' }, this.durationLabel), this.duration)), h("svg", { key: '3738ed4000e2bc29f51f049d4e4308c07d086ebb', class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '02154d538ed641db69c3807af34a2b12aa67ae52', 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 CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class SwirlVisuallyHidden {
     render() {
-        return (h(Host, { key: 'e065ea28425a9d0377c45ce14e4540c297006795' }, h("slot", { key: '348e81c45effa18d173f2d899b4b913fdb0079b0' })));
+        return (h(Host, { key: '1e62cf11ebbb1134c7176a28e6cf91346e382902' }, h("slot", { key: '1dd238b1e1c8c133fdfe48af7327407fbab42b00' })));
     }
     static get is() { return "swirl-visually-hidden"; }
     static get encapsulation() { return "scoped"; }