npm - @getflip/swirl-components - Versions diffs - 0.507.0 → 0.509.0 - Mend

@getflip/swirl-components 0.507.0 → 0.509.0

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

Files changed (2812) hide show

package/components.json CHANGED Viewed

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-06-22T13:50:21",
+  "timestamp": "2026-06-24T11:21:33",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.1",
@@ -334,10 +334,10 @@
           "docsTags": [
             {
               "name": "default",
-              "text": "uuid()"
+              "text": "crypto.randomUUID()"
             }
           ],
-          "default": "uuid()",
+          "default": "crypto.randomUUID()",
           "values": [
             {
               "type": "string"
@@ -9483,6 +9483,10 @@
         {
           "name": "slot",
           "text": "avatar - Optional avatar displayed inside the chip. Should have size \"xs\"."
+        },
+        {
+          "name": "slot",
+          "text": "trailing-content - Optional content displayed at the end of the chip."
         }
       ],
       "usage": {},
@@ -9972,6 +9976,10 @@
         {
           "name": "avatar",
           "docs": "Optional avatar displayed inside the chip. Should have size \"xs\"."
+        },
+        {
+          "name": "trailing-content",
+          "docs": "Optional content displayed at the end of the chip."
         }
       ],
       "parts": [],
@@ -16693,6 +16701,26 @@
           "docs": "",
           "docsTags": []
         },
+        {
+          "event": "playbackSeeking",
+          "detail": "{ currentTime: number; duration: number; videoEl: HTMLVideoElement; }",
+          "bubbles": true,
+          "complexType": {
+            "original": "SwirlFileViewerVideoPlaybackDetail",
+            "resolved": "{ currentTime: number; duration: number; videoEl: HTMLVideoElement; }",
+            "references": {
+              "SwirlFileViewerVideoPlaybackDetail": {
+                "location": "local",
+                "path": "/home/runner/work/swirl/swirl/packages/swirl-components/src/components/swirl-file-viewer/viewers/swirl-file-viewer-video/swirl-file-viewer-video.tsx",
+                "id": "src/components/swirl-file-viewer/viewers/swirl-file-viewer-video/swirl-file-viewer-video.tsx::SwirlFileViewerVideoPlaybackDetail"
+              }
+            }
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "",
+          "docsTags": []
+        },
         {
           "event": "playbackTeardown",
           "detail": "{ currentTime: number; duration: number; videoEl: HTMLVideoElement; }",

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

@@ -2,7 +2,6 @@
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
-var v4 = require('./v4-Bq3ldsQe.js');
 const swirlAccordionItemCss = () => `:host{display:block}:host *{box-sizing:border-box}.accordion-item{display:grid;align-content:start;border-top:0.0625rem solid var(--s-border-default);transition:grid-template-rows 0.15s;grid-template-rows:auto 0fr;will-change:grid-template-rows}@media (prefers-reduced-motion){.accordion-item{transition:none}}.accordion-item--expanded{grid-template-rows:auto 1fr}.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);animation:accordion-overflow 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item--expanded .accordion-item__content{padding-top:var(--s-space-8)}}.accordion-item__heading{margin:0;padding:0;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__heading{font-size:var(--s-font-size-sm)}}.accordion-item__toggle{display:flex;width:100%;padding:0;padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-8);align-items:center;border:none;color:var(--s-text-default);background-color:var(--swirl-accordion-item-toggle-default);font:inherit;line-height:var(--s-line-height-lg);text-align:start;cursor:pointer;gap:var(--s-space-16)}.accordion-item__toggle:hover{background-color:var(--swirl-accordion-item-toggle-hovered)}.accordion-item__toggle:active{background-color:var(--swirl-accordion-item-toggle-pressed)}.accordion-item__toggle:disabled{color:var(--s-text-disabled);background-color:var(--swirl-accordion-item-toggle-default);cursor:default}.accordion-item__toggle:disabled .text{color:var(--s-text-disabled)}.accordion-item__toggle:focus:not(:focus-visible){outline:none}.accordion-item__toggle:focus-visible{outline-color:var(--s-focus-default)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.accordion-item__toggle{line-height:var(--s-line-height-sm)}}.accordion-item__toggle-text{flex-grow:1}.accordion-item__icon{display:inline-flex;padding-right:var(--s-space-8);flex-shrink:0}.accordion-item__content{overflow:hidden;padding-top:0;padding-bottom:0;transition:padding-top 0.15s, padding-bottom 0.15s;animation:accordion-display 0.01s;animation-delay:0.15s;animation-fill-mode:forwards}@media (prefers-reduced-motion){.accordion-item__content{transition:none}}@keyframes accordion-overflow{from{overflow:hidden}to{overflow:visible}}@keyframes accordion-display{from{display:block}to{display:none}}`;
@@ -11,9 +10,9 @@ const SwirlAccordionItem = class {
         index.registerInstance(this, hostRef);
         this.expansionChange = index.createEvent(this, "expansionChange", 7);
         this.headingLevel = 2;
-        this.itemId = v4.v4();
+        this.itemId = crypto.randomUUID();
         this.expanded = false;
-        this.headingId = `${v4.v4()}-heading`;
+        this.headingId = `${crypto.randomUUID()}-heading`;
         this.onHeadingClick = () => {
             this.toggle();
         };
@@ -61,7 +60,7 @@ const SwirlAccordionItem = class {
         const className = index$1.classnames("accordion-item", {
             "accordion-item--expanded": this.expanded,
         });
-        return (index.h(index.Host, { key: '5933848dfc0ae6a6fe4984ada99881288821de46' }, index.h("div", { key: '12c3121f48c09070a0f0a02e59368117b7beb914', class: className }, index.h(HeadingTag, { key: 'b7cb7d39fa78430371a92f8df9f6d1afdfbdf490', class: "accordion-item__heading" }, index.h("button", { key: 'a46966f870735ce49af830274f8f84fa4b80af0d', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, index.h("slot", { key: 'cb660388d911761235efffc56bff5fab5bd40721', name: "media" }), index.h("span", { key: 'f85ad3cf0498818aaabb48964e54a4cca1aea29f', class: "accordion-item__toggle-text" }, this.heading, this.description && (index.h("swirl-text", { key: 'cb70e0571dff7e72fe882f0453218ad1634856b8', as: "span", color: "subdued", size: "sm" }, this.description))), index.h("slot", { key: 'e2394a9bda1e77b841210f5a883f897ee5ae347f', name: "trailing" }), index.h("span", { key: 'a0eaf96d71b43ae37a4d902807135d74e6644f32', class: "accordion-item__icon" }, !this.expanded && (index.h("swirl-icon", { key: 'b7c4bd422fb4b7a46aba8e14ad51badd5b932f70', glyph: "chevron-right", size: 20 })), this.expanded && (index.h("swirl-icon", { key: 'e96cd1b5930a45fb189fa11a5d89e76de9f4e2cf', glyph: "expand-more", size: 20 }))))), index.h("div", { key: '5d38b2b6c0905be01fda43795d955475923ebc2b', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, index.h("slot", { key: '1bba70f1b0cd0c7abb9130b5e50643330616be11' })))));
+        return (index.h(index.Host, { key: 'ed0d988e2fc48f140515cfecc40e543ed40d14cc' }, index.h("div", { key: 'a1a9bb9a36e5018b0741aa4980659dca503cf128', class: className }, index.h(HeadingTag, { key: '4919327d90ec3b829aecd9af57601dced379009d', class: "accordion-item__heading" }, index.h("button", { key: '7d31acbf313e30827703c88027121681f0a0d6b0', "aria-controls": this.itemId, "aria-expanded": String(this.expanded), class: "accordion-item__toggle", disabled: this.disabled, id: this.headingId, onClick: this.onHeadingClick, type: "button" }, index.h("slot", { key: 'b79a174398448e9fea3407f8d7a4803d5d60d1f5', name: "media" }), index.h("span", { key: 'f092906ba953c07abdbb1d8159268b92960fdc39', class: "accordion-item__toggle-text" }, this.heading, this.description && (index.h("swirl-text", { key: '827970a298d728085b6ae63be7c8c9d44859bbda', as: "span", color: "subdued", size: "sm" }, this.description))), index.h("slot", { key: '6dc7a6efd5948d2954c4e5dce1ccb04475bee77d', name: "trailing" }), index.h("span", { key: '5626c5d1a6a8ccaa4c3f20deaeea6d169da05f89', class: "accordion-item__icon" }, !this.expanded && (index.h("swirl-icon", { key: '7656ce9908d12897902ccc81dbb3b9388f46b292', glyph: "chevron-right", size: 20 })), this.expanded && (index.h("swirl-icon", { key: '5f9ad2f5dcc97d32f30f1981356ac525286ff8d9', glyph: "expand-more", size: 20 }))))), index.h("div", { key: '5b32ae5da0caacd8891b74451a2f3aff91d640af', "aria-labelledby": this.headingId, class: "accordion-item__content", id: this.itemId, role: "region" }, index.h("slot", { key: '50ff36caf14b70bcc79fbf91db1e58ceb0c10a60' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -60,7 +60,7 @@ const SwirlAccordion = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '758ed9674900cf1e9c0a0334930d08d14d4b5173' }, index.h("slot", { key: '20a7d64a0bc4bb6fb4bcd7079a018640a8a55f16' })));
+        return (index.h(index.Host, { key: '380395f009a7fa44a47494bf0fa6aa4b36c24b74' }, index.h("slot", { key: '0ce853754c9ec49e121cc3d07edfa860944f0909' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-action-list-section.cjs.entry.js CHANGED Viewed

@@ -12,7 +12,7 @@ const SwirlActionListSection = class {
         this.hasSeparator = false;
     }
     render() {
-        return (index.h(index.Host, { key: '644e60cee7964dd641f5cda6e634bfa71c74f4f5' }, this.hasSeparator && (index.h("swirl-separator", { key: '71a77da7dbec76d18dc6e10eca15d33dff6ea921', spacing: this.separatorSpacing })), index.h("div", { key: 'd14b958e4d01b9cb79ff46a764edb4131ffced72', "aria-labelledby": "label", class: "action-list-section", role: "group" }, index.h("span", { key: '21396a3f8e8e5f166af7d1dc8c8ce960372e350b', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), index.h("swirl-stack", { key: '3c2e11cb3931c135df4f3dbc49f6bcf899a31218', spacing: this.spacing, align: "stretch" }, index.h("slot", { key: '1a43acac00b5dbcbcce7109ca4a4bb0594bc57b2' })))));
+        return (index.h(index.Host, { key: '7a63a8a0b9832c08eadcb85533b3ec9e1e03437e' }, this.hasSeparator && (index.h("swirl-separator", { key: 'aaa33960c8a3db74b8b5df83ae3d725c603e0535', spacing: this.separatorSpacing })), index.h("div", { key: '3baa8270c6c9dc3de037657506c42ecdc5d4f060', "aria-labelledby": "label", class: "action-list-section", role: "group" }, index.h("span", { key: '6187f12fa3081721f2d25e360076a27649cda8bd', class: "action-list-section__label", id: "label", part: "action-list-section__label" }, this.label), index.h("swirl-stack", { key: '4f3fbff155ad75167bcd5469a2df41e7679c5dd3', spacing: this.spacing, align: "stretch" }, index.h("slot", { key: 'f610b47db6a58184d18c950c975666abe890ba3b' })))));
     }
 };
 SwirlActionListSection.style = swirlActionListSectionCss();

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

@@ -96,7 +96,7 @@ const SwirlActionList = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'b9b6b5040dcec8f5721fcde5c5fed776291ecbd8' }, index.h("div", { key: '97e90f5b335c4ec08af4ac1fcf2d7e023ac41eb5', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, index.h("slot", { key: '8da7d6a025a0c537a6a06b536baf1e4e93630a10', onSlotchange: this.setSectionSeparator }))));
+        return (index.h(index.Host, { key: '1c75c3ab32ea63fa2f841926c7796cacca0927a7' }, index.h("div", { key: 'a1d22c1d56d559dd212da3223654bd1a8d7f173d', "aria-orientation": "vertical", class: "action-list", onFocusout: this.isInsidePopover ? undefined : this.onFocusOut, onFocus: this.isInsidePopover ? undefined : this.onFocus, onKeyDown: this.onKeyDown, part: "action-list", ref: (el) => (this.container = el), role: "menu" }, index.h("slot", { key: '16ca662b99182ed96909eb5ffbee2e4373a07325', onSlotchange: this.setSectionSeparator }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-app-icon.cjs.entry.js CHANGED Viewed

@@ -36,7 +36,7 @@ const SwirlAppIcon = class {
         const className = index$1.classnames("app-icon", {
             "app-icon--has-icon": showIcon || showFallbackIcon,
         });
-        return (index.h(index.Host, { key: 'b74e1169308c485bda65d385884dc1757f40a223' }, index.h("span", { key: 'd5a01ccd429e5771f6af3fe14a70fab8f528d594', class: className }, showImage && (index.h("img", { key: '9570eaa4b6e958fc56d0ef49a207d6d0e9644a9a', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (index.h("span", { key: 'ea58f623daccef2636598ab1a3ca06786bc1b6cb', class: "app-icon__icon", innerHTML: this.icon })))));
+        return (index.h(index.Host, { key: 'fe8d516e1120d072e2f4600ca610bc4c13fd21f5' }, index.h("span", { key: '221e8a7f2eb9c1486b3958d81e124cf2bbe12247', class: className }, showImage && (index.h("img", { key: '50a6602a09d6e1f41e218137c3bbeca0afe7954f', alt: "", height: "256", ref: this.onImageElementUpdate, src: this.src, width: "256" })), showIcon && (index.h("span", { key: '06d45bf19f89194eed5db2398fb572d6cb3125bf', class: "app-icon__icon", innerHTML: this.icon })))));
     }
 };
 SwirlAppIcon.style = swirlAppIconCss();

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

@@ -3,7 +3,7 @@
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
-const swirlCardCss = () => `:host{display:contents}:host *{box-sizing:border-box}.card{position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--translucent{background-color:transparent}.card--translucent:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}@media print{.card{overflow:visible;height:auto;min-height:-webkit-fit-content;min-height:-moz-fit-content;min-height:fit-content}.card__body{min-height:auto;flex-grow:0}.card__content{min-height:auto}}`;
+const swirlCardCss = () => `:host{display:contents}:host *{box-sizing:border-box}.card{position:relative;display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column;transition:background-color 0.2s}.card:not(.card--has-image) .card__image{overflow:hidden;height:0}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{--swirl-avatar-background-color:var(--s-surface-raised-hovered);background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{--swirl-avatar-background-color:var(--s-surface-raised-pressed);background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated.card--elevation-level-1{box-shadow:var(--s-shadow-level-1)}.card--elevated.card--elevation-level-2{box-shadow:var(--s-shadow-level-2)}.card--elevated.card--elevation-level-3{box-shadow:var(--s-shadow-level-3)}.card--flashing{background-color:var(--swirl-card-background-pressed)}.card--flashing.card--intent-default-subdued{background-color:var(--s-surface-raised-pressed)}.card--flashing.card--intent-highlight{background-color:var(--s-surface-highlight-pressed)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.card--intent-highlight{color:var(--s-text-on-surface-highlight);background-color:var(--s-surface-highlight-default)}.card--translucent{background-color:transparent}.card--translucent:before{content:"";position:absolute;inset:0;z-index:-1;background:var(--s-translucent-low-default);-webkit-backdrop-filter:blur(var(--s-blur-l));backdrop-filter:blur(var(--s-blur-l));border-radius:inherit}.card--has-floating-controls:focus-within .card__floating-controls,.card--has-floating-controls:hover .card__floating-controls{pointer-events:auto;opacity:1}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__floating-controls{position:absolute;z-index:1;top:0;right:0;padding:var(--s-space-12);transition:opacity 0.2s;pointer-events:none;opacity:0}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}.card__content{min-height:100%}@media print{.card{overflow:visible;height:auto;min-height:-moz-fit-content;min-height:fit-content}.card__body{min-height:auto;flex-grow:0}.card__content{min-height:auto}}`;
 const swirlCardBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
 const SwirlCard = class {

package/dist/cjs/swirl-carousel-slide.cjs.entry.js CHANGED Viewed

@@ -14,11 +14,11 @@ const SwirlCarouselSlide = class {
         const className = index$1.classnames("carousel-slide", {
             "carousel-slide--has-min-height": Boolean(this.minHeight),
         });
-        return (index.h(index.Host, { key: 'ab9550324b5084c27803b9988252cf3a0f539638', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
+        return (index.h(index.Host, { key: 'bd595d626cca6ad119cfe2ad89aa639ee44e06f9', "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: {
                 aspectRatio: this.aspectRatio,
                 flexBasis: this.width,
                 minHeight: this.minHeight,
-            }, tabIndex: 0 }, index.h("slot", { key: 'e19fb582325d54f88aac2ba5fa589f21edfb72c3' })));
+            }, tabIndex: 0 }, index.h("slot", { key: 'dcfd8cdfa905e26eababb896a2f48413febbe51f' })));
     }
 };
 SwirlCarouselSlide.style = swirlCarouselSlideCss();

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

@@ -5,7 +5,7 @@ var index$1 = require('./index-DcAhLZUH.js');
 var mediaQuery_service = require('./media-query.service-B8u-DqoO.js');
 require('./utils-UfZG-xPD.js');
-const swirlChipCss = () => `.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip{border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{background:var(--s-translucent-medium-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.chip--variant-translucent.chip--interactive.sc-swirl-chip:hover{background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active{background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-state-pressed)}`;
+const swirlChipCss = () => `.sc-swirl-chip-h{position:relative;display:inline-flex;max-width:100%}.sc-swirl-chip-h *.sc-swirl-chip{box-sizing:border-box}.chip.sc-swirl-chip{display:inline-flex;overflow:hidden;max-width:100%;height:2.25rem;padding:0;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:transparent;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);flex-direction:column}.chip--size-s.sc-swirl-chip{height:2rem}.chip--size-s.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.5rem + var(--s-space-12))}.chip--size-s.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.chip--size-s.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:var(--s-space-4);width:1.5rem;height:1.5rem}.chip--interactive.sc-swirl-chip{cursor:pointer}.chip--interactive.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--interactive.sc-swirl-chip:active{background-color:var(--s-state-pressed)}.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--icon-color-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:calc(1.875rem + var(--s-space-12))}.chip--intent-critical.sc-swirl-chip{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-critical)}.chip--border-radius-sm.sc-swirl-chip{border-radius:var(--s-border-radius-sm)}.chip--intent-success.sc-swirl-chip{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-success)}.chip--intent-highlight.sc-swirl-chip{border-color:var(--s-border-highlight);color:var(--s-text-highlight)}.chip--intent-highlight.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-icon-highlight)}.chip--variant-outline.chip--pressed.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default);border-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip .chip__icon.sc-swirl-chip{color:var(--s-text-on-action-primary)}.chip--variant-outline.chip--pressed.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-action-primary-hovered)}.chip--variant-outline.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active,.chip--variant-translucent.chip--pressed.sc-swirl-chip+.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-action-primary-pressed)}.chip--variant-translucent.sc-swirl-chip{background:var(--s-translucent-medium-default);-webkit-backdrop-filter:blur(var(--s-blur-s));backdrop-filter:blur(var(--s-blur-s))}.chip--variant-translucent.chip--interactive.sc-swirl-chip:hover{background:var(--s-translucent-medium-hovered)}.chip--variant-translucent.chip--interactive.sc-swirl-chip:active{background:var(--s-translucent-medium-pressed)}.chip--variant-plain.sc-swirl-chip{height:auto;border:none;border-radius:0;background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover{background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:hover .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-hovered)}.chip--variant-plain.chip--interactive.sc-swirl-chip:active{background-color:transparent}.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip::part(avatar),.chip--variant-plain.chip--interactive.sc-swirl-chip:active .sc-swirl-chip [part~="avatar"]{background-color:var(--s-surface-raised-pressed)}.chip--variant-plain.chip--removable.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:var(--s-space-12)}.chip--variant-plain.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{position:relative;top:0;right:auto}.chip--variant-plain.sc-swirl-chip .chip__inner.sc-swirl-chip{padding-right:0;padding-left:0}.chip--variant-plain.sc-swirl-chip .chip__icon.sc-swirl-chip,.chip--variant-plain.sc-swirl-chip .chip__avatar.sc-swirl-chip{margin-left:0}.chip--has-progress.sc-swirl-chip+.chip__remove-button.sc-swirl-chip{top:0.1875rem}.chip--has-progress.sc-swirl-chip:not(.chip--size-s)+.chip__remove-button.sc-swirl-chip{top:0.0625rem}.chip__inner.sc-swirl-chip{display:inline-flex;max-width:100%;height:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center}.chip__avatar.sc-swirl-chip,.chip__icon.sc-swirl-chip{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar.sc-swirl-chip{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon.sc-swirl-chip{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__trailing-icon.sc-swirl-chip,.chip__trailing-content.sc-swirl-chip{display:inline-flex;flex-shrink:0;margin-left:var(--s-space-8)}.chip__label.sc-swirl-chip{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}.chip__progress-indicator.sc-swirl-chip{width:100%}.chip__remove-button.sc-swirl-chip{position:absolute;top:0.1875rem;right:var(--s-space-4);display:inline-flex;width:1.875rem;height:1.875rem;padding:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.chip__remove-button.sc-swirl-chip:hover{background-color:var(--s-state-hovered)}.chip__remove-button.sc-swirl-chip:active{background-color:var(--s-state-pressed)}`;
 const SwirlChip = class {
     constructor(hostRef) {
@@ -52,13 +52,14 @@ const SwirlChip = class {
         const Tag = this.interactive || this.pressed !== undefined ? "button" : "span";
         const showAvatar = Boolean(this.el.querySelector('[slot="avatar"]'));
         const showIcon = !showAvatar && Boolean(this.icon);
+        const showTrailingContent = Boolean(this.el.querySelector('[slot="trailing-content"]'));
         const className = index$1.classnames("chip", `chip--border-radius-${this.borderRadius}`, `chip--icon-color-${this.iconColor}`, `chip--intent-${this.intent}`, `chip--size-${this.size}`, `chip--variant-${this.variant}`, {
             "chip--pressed": this.pressed,
             "chip--has-progress": this.progress !== undefined,
             "chip--interactive": this.interactive || this.pressed !== undefined,
             "chip--removable": this.removable,
         });
-        return (index.h(index.Host, { key: '556b0ebe143aae953feb22d5fffb385da98331b2' }, index.h(Tag, { key: 'd6f2d8fdfe06e7197632a1276046f9982d88a033', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: 'fd8aac7bfc2435a277df0be543d4c219483e5bec', class: "chip__inner" }, showAvatar && (index.h("span", { key: 'bf9c36ecbbb30672cb804bece5b67613a38c7602', class: "chip__avatar" }, index.h("slot", { key: '828c82e1f0d291ef766e8dd539737555d94f5d86', name: "avatar" }))), showIcon && (index.h("span", { key: '5d82eee4688b3250b19f10a9c5efedda7f03e187', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: 'e4e65bd102603bd86031687ce843f0556431158b', class: "chip__label" }, this.label), this.trailingIcon && (index.h("span", { key: 'ae819833c08132dbf18f6a1cf26b980030f229d1', class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (el) => (this.trailingIconEl = el) }))), this.progress !== undefined && (index.h("span", { key: '371d5d577137fe5f58653b6f2bf5afe6f2c75a29', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: '8024a8596c0f3e2ddb983184cf69a3226dd139f5', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: 'be2e97f005c28e54e52d618734bbc783b495c479', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, index.h("swirl-icon-close", { key: '9c59678ddc6aa518e7bc8d2618783cd7e7ee0057', size: 20 })))));
+        return (index.h(index.Host, { key: '42fb03e9b8bc0bdb5158411533822029fc2f7172' }, index.h(Tag, { key: 'a9353bcf8da70ba240ff50ab36d7983a51ab5d89', "aria-pressed": this.pressed !== undefined ? String(this.pressed) : undefined, class: className, onClick: this.chipClick.emit, type: this.interactive ? "button" : undefined }, index.h("span", { key: 'ded71dbe3387cabb8254e279aeb9ccc3f9d6b878', class: "chip__inner" }, showAvatar && (index.h("span", { key: 'b23cb213584d989ca408a3f918b2f62dfbefd31b', class: "chip__avatar" }, index.h("slot", { key: '4a0a97de89ce85b6a3043ba70011d389d4d8567b', name: "avatar" }))), showIcon && (index.h("span", { key: '908d96c06ccc0487da381b854103c9a3bc21da90', class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), index.h("span", { key: '388a801b5e203a2dcbe9428d6d241632eb8308fc', class: "chip__label" }, this.label), this.trailingIcon && (index.h("span", { key: '4b25f552a160cce2d9dba87dd5209b8db73ad003', class: "chip__trailing-icon", innerHTML: this.trailingIcon, ref: (el) => (this.trailingIconEl = el) })), showTrailingContent && (index.h("span", { key: 'ddc653637a58b3739c699040ba4e67439c8691e5', class: "chip__trailing-content" }, index.h("slot", { key: 'b98d5c932c275412566b46b4712a691e944b27ad', name: "trailing-content" })))), this.progress !== undefined && (index.h("span", { key: '4a9759a58972fc4b61458c8aeaf01aa57e4dc995', class: "chip__progress-indicator" }, index.h("swirl-progress-indicator", { key: 'd8f93347e50e9e815fc6c7c6df9a3bf54df10a98', label: this.progressBarLabel, value: this.progress })))), this.removable && (index.h("button", { key: '3823bdc2bf504ce3c292c3ff40e50125d05c92da', "aria-label": this.removeButtonLabel, class: "chip__remove-button", onClick: this.removeChip.emit, type: "button" }, index.h("swirl-icon-close", { key: '64576204b99032780f4bbf35a77fb94959a80ab9', size: 20 })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,7 +2,6 @@
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
-var v4 = require('./v4-Bq3ldsQe.js');
 // Clamps a value between an upper and lower bound.
 // We use ternary operators because it makes the minified code
@@ -397,7 +396,7 @@ const SwirlColorInput = class {
         this.valueChange = index.createEvent(this, "valueChange", 7);
         this.pickerButtonLabel = "Open color picker";
         this.pickerLabel = "Color picker";
-        this.pickerId = `color-picker-${v4.v4()}`;
+        this.pickerId = `color-picker-${crypto.randomUUID()}`;
         this.onPickerChange = (event) => {
             this.value = event.detail.value;
         };
@@ -446,11 +445,11 @@ const SwirlColorInput = class {
         const className = index$1.classnames("color-input", {
             "color-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: '76da054e32397ce65448ffab2ea6fef08a8aca4b' }, index.h("div", { key: 'c8c36f0d6827381ffc58eafac6e07cbe81b8dd21', class: className }, index.h("input", { key: '5f64c1253b6cba9fcdd074aa085d1d34330bc8f0', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), index.h("swirl-popover-trigger", { key: '095e071a8ff9611060c9b8558ea7ef2f23aa0d64', swirlPopover: this.pickerId }, index.h("button", { key: '29822997a707a43bbae6675d7d6325b4249d231f', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
+        return (index.h(index.Host, { key: '2ee1b42158b3caeb6ab7b0c46192a327ae9a854e' }, index.h("div", { key: 'c14754cc9fe4d74fd40ec50cb796dd1b7688d823', class: className }, index.h("input", { key: '4d884de2795ed648a11cda4eaf08e03cf825e443', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "color-input__input", disabled: this.disabled, maxLength: 7, onBlur: this.onBlur, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, spellcheck: "false", type: "text", value: this.value, readonly: this.readonly }), index.h("swirl-popover-trigger", { key: '9d543f84f7831b48af0036fa0062ea98afdbfecf', swirlPopover: this.pickerId }, index.h("button", { key: 'fe0ffd3db789188beb2c5ca62bfcdd241a932721', disabled: this.readonly, "aria-label": this.pickerButtonLabel, class: "color-input__preview-button", style: {
                 backgroundColor: this.disabled
                     ? "var(--s-border-subdued)"
                     : this.value,
-            }, type: "button" })), index.h("swirl-popover", { key: '975650e9f73b16596f4df7705ecad94a0554e803', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, index.h("swirl-box", { key: '3b6b404d252aeecb0ed35500afe42e55c48de7c6', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, index.h("hex-color-picker", { key: '3285212c0197205236ad39b538da9a03b5802162', color: this.value, ref: (el) => (this.picker = el) }))))));
+            }, type: "button" })), index.h("swirl-popover", { key: 'c9ac21281b927941dfe43851785c94ac48594c6b', animation: "scale-in-y", id: this.pickerId, label: this.pickerLabel, placement: "bottom-end" }, index.h("swirl-box", { key: 'c888476cc56718853a644e2b722defa46babd920', centerInline: true, paddingBlockEnd: "8", paddingBlockStart: "8", paddingInlineEnd: "16", paddingInlineStart: "16" }, index.h("hex-color-picker", { key: 'f5ee44a0661d3c8ae6d076a0817b76e8a646bd5a', color: this.value, ref: (el) => (this.picker = el) }))))));
     }
     static get watchers() { return {
         "value": [{

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

@@ -10,10 +10,10 @@ const SwirlColumns = class {
         this.columns = "repeat(3, minmax(0, 1fr))";
     }
     render() {
-        return (index.h(index.Host, { key: '58dca0f53eb7169ebed52d040da35e407e939fba' }, index.h("div", { key: '2c0cb89f1f7029da7265531cfa38d2e49b76dd30', class: "columns", style: {
+        return (index.h(index.Host, { key: '383a304c54f46f0e830f283317069a150c289a8e' }, index.h("div", { key: '5cab61bcb8336a1addd53f67fb8935415f25c0cd', class: "columns", style: {
                 gridTemplateColumns: this.columns,
                 gap: `var(--s-space-${this.spacing})`,
-            } }, index.h("slot", { key: '3c2f0ed4c1d8a60e9e9079fe17986bbdf79468f9' }))));
+            } }, index.h("slot", { key: 'df0b92931bb3143b865956e9116e37dec2f2b6bf' }))));
     }
 };
 SwirlColumns.style = swirlColumnsCss();

package/dist/cjs/swirl-console-layout.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
-const swirlConsoleLayoutCss = () => `:host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"         "footer";grid-template-rows:1fr -webkit-min-content;grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr -webkit-min-content;grid-template-rows:auto 1fr min-content;grid-template-areas:"header"     "navigation"     "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"     "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr -webkit-min-content;grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"     "content"     "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}`;
+const swirlConsoleLayoutCss = () => `:host{display:block;width:100%;height:100vh;--console-footer-height:4.25rem;--console-app-bar-height:3.5rem;--console-sidebar-width:18.5rem}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:"main"}@media (min-width: 768px){.console-layout{grid-template-columns:var(--console-sidebar-width) 1fr;grid-template-areas:"sidebar main"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:"content";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}@media (min-width: 768px){.console-layout--empty-app-bar.console-layout--has-footer .console-layout__main{grid-template-areas:"content"         "footer";grid-template-rows:1fr min-content}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr min-content;grid-template-areas:"header"     "navigation"     "user"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;padding:var(--s-space-16) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__main{display:grid;overflow:hidden;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:var(--console-app-bar-height) 1fr;grid-template-areas:"app-bar"     "content"}.console-layout--has-footer .console-layout__main{grid-template-rows:var(--console-app-bar-height) 1fr min-content;grid-template-areas:"app-bar"     "content"     "footer"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;display:flex;min-width:0;padding:0 var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:0 2.5rem}}.console-layout__content-container{display:flex;flex-direction:column;align-items:center;height:100%;width:100%}.console-layout__integration{flex-grow:1;padding-bottom:var(--s-space-16)}@media (min-width: 768px){.console-layout__integration{padding-bottom:2.5rem}}.console-layout__integration{width:100%}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16);padding-top:var(--s-space-16)}@media (min-width: 768px){.console-layout__content-header{padding-top:2.5rem}}.console-layout__content-header{width:100%}.console-layout--has-custom-app-bar .console-layout__content-header{padding-top:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}.console-layout__footer{position:sticky;bottom:0;z-index:var(--s-z-20);display:flex;flex-shrink:0;min-width:0;border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:footer;width:100%;min-height:var(--console-footer-height);box-sizing:border-box}.console-layout__app-bar--custom{display:flex;min-width:0;align-items:center;padding:0;border-bottom:var(--s-border-width-default) solid transparent;background-color:var(--s-background-default)}.console-layout--main-scrollable:not(.console-layout--main-scrolled-to-top) .console-layout__app-bar--custom{border-bottom-color:var(--s-border-default)}.console-layout:not(.console-layout--has-custom-app-bar) .console-layout__app-bar--custom{display:none}.console-layout:not(.console-layout--has-footer) .console-layout__footer{display:none}.console-layout--has-custom-app-bar .console-layout__app-bar:not(.console-layout__app-bar--custom){display:none}.console-layout--hide-content-header .console-layout__content{padding:0;overflow:hidden;scrollbar-gutter:auto}.console-layout--hide-content-header .console-layout__integration{padding-bottom:0}`;
 const SwirlConsoleLayout = class {
     constructor(hostRef) {
@@ -156,11 +156,11 @@ const SwirlConsoleLayout = class {
             "console-layout--main-scrolled-to-bottom": this.contentScrollState.scrolledToBottom,
             "console-layout--hide-content-header": this.hideContentHeader,
         });
-        return (index.h(index.Host, { key: 'dd5f596e430af92ac20eb8b6760be4ca383466d8' }, index.h("div", { key: '7e86f654a290e6122cea1cb4c1c9fc04299978f1', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, index.h("header", { key: '2184f547669cd9dbcfd6303009d3ebad97fa20d9', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, index.h("div", { key: 'cf79259c537f6646ea58c8688ce7dc7072634d5a', class: "console-layout__header" }, index.h("div", { key: '75955708ffa0bfdee0d429d0fbe55176102a3ec9', class: "console-layout__logo" }, index.h("svg", { key: '39681c5589a6cbc7a6b42aba1081e5ea1068cc33', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'fcfd50f2d57d40cc18196ef551e8ac7be566fe81', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), index.h("swirl-text", { key: '7f85730a473d358f41a560356763db7ddaa0cbb5', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), index.h("nav", { key: '4547620a463f461c1ee3cd95654e25d2a7a477c5', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, index.h("slot", { key: '9d1e6780c6004a198e820368854124362c63bc90', name: "navigation" })), index.h("div", { key: 'edb4595dad97cd82f728ad06ce9413eaeb9950c9', class: "console-layout__user" }, index.h("slot", { key: '3f8e98625b158238b84cfb40f02d505838f311fc', name: "user" }))), index.h("main", { key: '0401808674f2bd2e158f5b36d20b16171f141db6', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, index.h("header", { key: 'f6af124c29e613530d49f9f9fd8b5da3e6b68ba1', class: "console-layout__app-bar console-layout__app-bar--custom" }, index.h("slot", { key: 'f0e6bfcdbec0b5493d25fab6b2d3f7cfac6ec38c', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), index.h("header", { key: '88799d15f24ff0509be529d94ebafe7bd151c17d', class: "console-layout__app-bar" }, index.h("span", { key: '868c32b64c207ae05ff3ee50baabc867128ad02c', class: "console-layout__mobile-navigation-button" }, index.h("swirl-button", { key: '581c376b157d01c063482cd5ca130b7bce26984c', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        return (index.h(index.Host, { key: 'f92e62cd7a3aa3679a62cedc47003f9dc6afa138' }, index.h("div", { key: 'e64ead610749dbefebd1a48332e3e4ce9749a4ea', class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, index.h("header", { key: 'dee14aa96c8e3840343621d2cd2dc437285107f2', "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, index.h("div", { key: '5c74ea43a8d073cfaa2426b1bdc2f3c301f7f53e', class: "console-layout__header" }, index.h("div", { key: '958cf209f0c70ba4654b9d216b15dd62aeb58fd1', class: "console-layout__logo" }, index.h("svg", { key: 'c9d36c86ad44e96365b6710426c4550d0c81d7a5', class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 301 460", width: "16", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'd3b4a3cbc7564ddd805d1ddfb1b34c449b1beec5', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M2.52486 276.36C5.57709 289.149 11.02 301.094 18.2296 311.628L258.719 138.748C269.874 131.507 278.35 121.993 285.395 110.766C291.904 100.212 296.922 87.3014 298.875 74.6738C300.769 61.4277 300.809 48.353 297.757 35.5639C294.705 22.7748 289.262 10.8302 282.052 0.296051L41.5626 173.176C30.4077 180.417 21.9314 189.931 14.8867 201.158C8.37746 211.712 3.35926 224.623 1.40724 237.25C-0.544773 249.878 0.0338964 262.896 2.52486 276.36ZM80.3121 424.184C83.3644 436.973 88.8073 448.918 96.0169 459.452L229.113 363.743C240.268 356.502 248.744 346.988 255.789 335.761C262.298 325.207 267.317 312.296 269.269 299.668C271.164 286.422 271.203 273.348 268.151 260.559C265.099 247.769 259.656 235.825 252.446 225.291L119.35 320.999C108.195 328.24 99.7187 337.755 92.674 348.982C86.1647 359.535 81.1465 372.446 79.1945 385.074C77.2996 398.32 77.2599 411.395 80.3121 424.184Z", fill: "#2151F5" })), index.h("swirl-text", { key: '97d5f351e6de465c059fc357fc012dae757b5678', class: "console-layout__logo-text", weight: "medium" }, this.logoText))), index.h("nav", { key: '3bb30959d7c34a28bce82aeffc1e1c0ab0799833', "aria-label": this.navigationLabel, class: "console-layout__navigation" }, index.h("slot", { key: '497faf890249299fd21075d766f344cdbd49f47d', name: "navigation" })), index.h("div", { key: '76e25959719dabb8e5c3b779d3eed5e7e286681b', class: "console-layout__user" }, index.h("slot", { key: 'eaabb2af9392992f184f547365fc2a74063d449f', name: "user" }))), index.h("main", { key: '5e242a75ab5e24ed535e45117238ceb56b7ba69d', "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, index.h("header", { key: 'f096010fa4cc6e2a1e8b57093fbace8ad99ee2fa', class: "console-layout__app-bar console-layout__app-bar--custom" }, index.h("slot", { key: '019e8471fcc2b4b83b3eca434851c833d506a9fe', name: "app-bar", onSlotchange: this.updateCustomAppBarStatus })), index.h("header", { key: '3ad1bdad10025933e5476ad172961cea33cf8bf2', class: "console-layout__app-bar" }, index.h("span", { key: '5d3769ea1ab077f8b536ea1382db4a98c4ad300c', class: "console-layout__mobile-navigation-button" }, index.h("swirl-button", { key: '08140f76ae70e54f7bf8bbbb3a30c3e4192a7661', swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
                 ? "<swirl-icon-close></swirl-icon-close>"
                 : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
                 ? this.hideNavigationButtonLabel
-                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), index.h("div", { key: '6199b81280bb5042fa483cdd0d2ee80b7d9aeec5', class: "console-layout__app-name" }, this.appName && (index.h("swirl-heading", { key: '6a433fc1d01cbf93ce819900d7246f784df953db', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (index.h("swirl-button", { key: '7a4e7b55bcc16a6581a555811c0c926f308f3a24', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), index.h("section", { key: '8fa69e3a5885602a28b149a0473add39bbf2dc27', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, index.h("div", { key: 'd9494c7299ca3d89c9971e40e1aa9e4691525911', class: "console-layout__content-container" }, !this.hideContentHeader && (index.h("header", { key: '44d72ad95c5621f9c195878c3a3aedcc206aac49', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (index.h("swirl-button", { key: '036295ed7ad49eb7152e9774c961e3ceccc02fc0', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (index.h("div", { key: '0126fd3b2fdeb14720ae93ae44c9061277083031', class: "console-layout__heading-container" }, index.h("swirl-heading", { key: '37e617bfa62997571a4e57d03399bc4f388dc89a', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (index.h("swirl-text", { key: 'a9513b911b637ff5637b6abb1d1411efbe922db3', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (index.h("div", { key: '24d40f3a19d784adce86467b2612c0d58651c7be', class: "console-layout__heading-container" }, index.h("slot", { key: '1cbeffe9bb7113e2bffa814dc9a7dedd11d92d71', name: "heading" }))), index.h("div", { key: '0b38bd9b15e0d2938676049413ed08fa9441465c', class: "console-layout__content-header-tools" }, index.h("slot", { key: '1d694147934a10a8ae7ffff1effdbad72918de6a', name: "content-header-tools" })))), index.h("div", { key: 'f92081cead05c1e020aa6ceb2233ea20c991d0e5', class: "console-layout__integration", style: contentStyles }, index.h("slot", { key: 'cb60ef0ebb899a13ff81d4f2467308b29a8b397f', name: "content" })))), index.h("footer", { key: 'd85d196d97f4fa3b650b0e9c03456f4453dd08c5', class: "console-layout__footer" }, index.h("slot", { key: '2fe727ea7db6deeabf256e6fbc4f4b6bb10bf75e', name: "footer", onSlotchange: this.updateFooterStatus })), index.h("div", { key: '42306f3fb6a725f950708c832e556c809232f02b', class: "console-layout__overlays" }, index.h("slot", { key: 'ab75384fec82347e2eb582af4a03736fcce451d2', name: "overlays" }))))));
+                : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), index.h("div", { key: 'dd72e2beb8ee2bfc87896eb53a0ece44abb6e411', class: "console-layout__app-name" }, this.appName && (index.h("swirl-heading", { key: '5fa6495f2bc592ed2e2b7d2bb3659ca1f0ecfe38', as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (index.h("swirl-button", { key: 'ee75f146bdf639b93e02561853eb391dc58d8142', class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), index.h("section", { key: 'fa54f51cc8e703663a11fcd7027df84dc9ea57d8', "aria-labelledby": "heading", class: "console-layout__content", onScroll: this.onMainScroll, ref: (el) => (this.contentEl = el) }, index.h("div", { key: '4505b706577728b794d5c370c0d627f14db72742', class: "console-layout__content-container" }, !this.hideContentHeader && (index.h("header", { key: '9d7d64cf621cf713bd8c10abb3545791226deec2', class: "console-layout__content-header", style: contentStyles }, this.showBackButton && (index.h("swirl-button", { key: 'f170dd5a4d0292842a42df782f84491fbfa16446', class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (index.h("div", { key: '9ce1c29868fc24915b1d7060fdc30ad4e2726802', class: "console-layout__heading-container" }, index.h("swirl-heading", { key: '33d2473e87cdb94998783ba1337ea92ee34ac5b0', as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (index.h("swirl-text", { key: 'e3071a03d28e05550385fa6b5101d2c98e11a405', class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (index.h("div", { key: '62a31138ed664b4900030150e1d1959e470c1a17', class: "console-layout__heading-container" }, index.h("slot", { key: '6f1de516692eeb2922a2e18784bc8c74e5416b1d', name: "heading" }))), index.h("div", { key: '02fdc97524fee6a75524ef9eb095a59cff238cc7', class: "console-layout__content-header-tools" }, index.h("slot", { key: '159bbfad00487ee173dc708e5047e603986318f9', name: "content-header-tools" })))), index.h("div", { key: '2fce6c367d3815e7482e63836900ae4793dca055', class: "console-layout__integration", style: contentStyles }, index.h("slot", { key: '6d962aff82cf2b1276650e3eb5b9fba06994f1dc', name: "content" })))), index.h("footer", { key: 'da76594d20b410746a70960c1abc83eff0a38f59', class: "console-layout__footer" }, index.h("slot", { key: 'c07940b404f20db835967d6fa2355d9ae9c035f1', name: "footer", onSlotchange: this.updateFooterStatus })), index.h("div", { key: '39e32ef1a08100b9f15bede9180accaa884de3ee', class: "console-layout__overlays" }, index.h("slot", { key: '78d8abf993064df290ce2890ea200e246c599b0e', name: "overlays" }))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,7 +2,6 @@
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
-var v4 = require('./v4-Bq3ldsQe.js');
 const swirlDataCellStackCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell-stack{display:flex;flex-direction:column;width:100%;gap:var(--s-space-16)}.data-cell-stack__header{display:flex;align-items:flex-start;gap:var(--s-space-8);width:100%;justify-content:space-between}.data-cell-stack__header-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell-stack__label{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);margin:0}.data-cell-stack__description{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);margin:0}.data-cell-stack__cells{display:flex;flex-direction:column;gap:var(--s-space-2)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-l)     var(--s-border-radius-l) var(--s-border-radius-s) var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:last-of-type:not(:first-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)     var(--s-border-radius-s) var(--s-border-radius-l) var(--s-border-radius-l)}.data-cell-stack__cells ::slotted(swirl-data-cell:not(:first-of-type):not(:last-of-type)){--swirl-data-cell-border-radius:var(--s-border-radius-s)}.data-cell-stack__cells ::slotted(swirl-data-cell:first-of-type:last-of-type){--swirl-data-cell-border-radius:var(--s-border-radius-l)}.data-cell-stack__cta{display:flex;align-items:center;flex-shrink:0}`;
@@ -10,7 +9,7 @@ const SwirlDataCellStack = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.hideLabel = false;
-        this.headerId = `data-cell-stack-header-${v4.v4()}`;
+        this.headerId = `data-cell-stack-header-${crypto.randomUUID()}`;
         this.onSlotChange = (event) => {
             const slot = event.target;
             const elements = slot.assignedElements();
@@ -30,7 +29,7 @@ const SwirlDataCellStack = class {
         const descriptionId = this.description
             ? `${this.headerId}-description`
             : undefined;
-        return (index.h(index.Host, { key: 'abdad45f410ea28a21f54edfb9c330759eb51eec' }, index.h("div", { key: '24de9e29f59568c7606e872e547df7f73a53cf56', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (index.h("header", { key: '179c36c7fec1ec02a1bf1954e9b47a228191a2a9', class: "data-cell-stack__header", id: this.headerId }, index.h("div", { key: '57d1b326531fc34d045e1ff099865bccff448682', class: "data-cell-stack__header-content" }, showLabel && (index.h("h3", { key: 'ad2a57084e9b084fb4ee71142edbfa26d7204cbf', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (index.h("p", { key: '89b091f92c268e2a7c827fd790085967b1a0a453', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (index.h("div", { key: '56f70c1b483fdc2046d8cd8f5e5b2f8ff14f6311', class: "data-cell-stack__cta" }, index.h("slot", { key: 'fbb8710ec3932ee70a9f6fe830a5a038da280682', name: "cta" }))))), index.h("div", { key: 'a54485d11f29fa7d464813a60f88d68298aab74d', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, index.h("slot", { key: '8bd734aaf20e625167d5fec827b33719346a8df2', onSlotchange: this.onSlotChange })))));
+        return (index.h(index.Host, { key: '042c83c6f2fcbb76810f082487dba327f3cc8309' }, index.h("div", { key: '07eb0ed861d3051dcffcbaa830ec07e46b1fd624', class: className, part: "data-cell-stack", role: "group" }, (showLabel || this.description || hasCta) && (index.h("header", { key: 'e664e0c1db6346a7b7680f4b5fa1354ec27af519', class: "data-cell-stack__header", id: this.headerId }, index.h("div", { key: '6e4e5b99e5cfb6a98375bd6b19cdf8c60ccbe223', class: "data-cell-stack__header-content" }, showLabel && (index.h("h3", { key: '092b8ac7525b5edf5d0938bd8c8ddb8fe9ef9e1b', class: "data-cell-stack__label", id: labelId }, this.label)), this.description && (index.h("p", { key: 'abc7d688fadb1248b4c0fabb57f83b004fe0091d', class: "data-cell-stack__description", id: descriptionId }, this.description))), hasCta && (index.h("div", { key: '5868eff8aa04cd733d7c7d6d029585075739607a', class: "data-cell-stack__cta" }, index.h("slot", { key: '4b872cac524edaa3ef7fc102554190006fe31a5c', name: "cta" }))))), index.h("div", { key: '88bba53868d016ee19a79e75dbd3dab4fd6e87c1', class: "data-cell-stack__cells", role: "list", "aria-labelledby": labelId || undefined, "aria-describedby": descriptionId || undefined }, index.h("slot", { key: '8a7b45a1bb3b648d8fd1848ade56c0c56b5485de', onSlotchange: this.onSlotChange })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/swirl-data-cell.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,6 @@
 var index = require('./index-DfC2lanl.js');
 var index$1 = require('./index-DcAhLZUH.js');
-var v4 = require('./v4-Bq3ldsQe.js');
 const swirlDataCellCss = () => `:host{display:block;width:100%}:host *{box-sizing:border-box}.data-cell{display:flex;align-items:center;gap:var(--s-space-8);width:100%;padding:var(--s-space-12) var(--s-space-16);border-radius:var(--swirl-data-cell-border-radius, var(--s-border-radius-l))}.data-cell--interactive{cursor:pointer}.data-cell--intent-default{background-color:var(--s-surface-raised-50-default)}.data-cell--intent-info{background-color:var(--s-surface-info-subdued)}.data-cell--intent-critical{background-color:var(--s-surface-critical-subdued)}.data-cell--intent-warning{background-color:var(--s-surface-warning-subdued)}.data-cell--intent-success{background-color:var(--s-surface-success-subdued)}.data-cell--intent-special{background-color:var(--s-decorative-grape-surface-subdued)}.data-cell--intent-translucent{background-color:var(--s-surface-on-image-default)}.data-cell--intent-subdued{background-color:var(--s-surface-raised-default)}.data-cell--vertical{align-items:center}.data-cell__media{flex-shrink:0;display:flex;align-items:center}.data-cell__media ::slotted(swirl-avatar){--swirl-avatar-background-color:var(--s-surface-default)}.data-cell__content{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-space-24)}.data-cell--no-label .data-cell__content,.data-cell--no-label .data-cell__value-wrapper,.data-cell--no-label .data-cell__input{width:100%}.data-cell--vertical .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell__label-wrapper{flex-shrink:0;min-width:0}.data-cell:not(.data-cell--vertical) .data-cell__label-wrapper{width:calc(160px + var(--s-space-4) + 16px)}.data-cell__label{display:block;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-subdued);font-weight:var(--s-font-weight-normal)}.data-cell:not(.data-cell--vertical) .data-cell__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.data-cell__tooltip swirl-icon-info{flex-shrink:0;color:var(--s-text-subdued)}.data-cell__value-wrapper{display:flex;align-items:center;gap:var(--s-space-4);flex-shrink:1;min-width:0}.data-cell--vertical .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}.data-cell__value{flex:1;min-width:0;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);color:var(--s-text-default);font-weight:var(--s-font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.data-cell--vertical .data-cell__value{white-space:normal;overflow:visible;text-overflow:clip}.data-cell__suffix{flex-shrink:0}.data-cell__input{width:100%;--swirl-form-control-label-background-color:var(     --swirl-data-cell-input-background,     var(--s-surface-default)   )}.data-cell__input ::slotted(swirl-checkbox),.data-cell__input ::slotted(swirl-radio){width:100%}@media (max-width: 767px){.data-cell:not(.data-cell--vertical) .data-cell__content{flex-direction:column;align-items:flex-start;gap:var(--s-space-4)}.data-cell:not(.data-cell--vertical) .data-cell__value-wrapper{flex-direction:column;align-items:flex-start}}`;
@@ -12,7 +11,7 @@ const SwirlDataCell = class {
         this.valueChange = index.createEvent(this, "valueChange", 7);
         this.intent = "default";
         this.vertical = false;
-        this.elementId = `data-cell-${v4.v4()}`;
+        this.elementId = `data-cell-${crypto.randomUUID()}`;
         this.handleRadioClick = (event) => {
             const target = event.target;
             const radio = this.el.querySelector('swirl-radio[slot="content"]');
@@ -52,8 +51,8 @@ const SwirlDataCell = class {
         const hostRole = isInDataCellStack ? "listitem" : "group";
         const contentRole = hasCheckbox || hasRadio ? "button" : undefined;
         const wrapperRole = isInDataCellStack && !contentRole ? "group" : contentRole;
-        const labelContent = (index.h("swirl-stack", { key: '48f093525242c0bb603ec29d29ddc0ec145f56bd', orientation: "horizontal", align: "center", spacing: "4" }, index.h("span", { key: 'a1904fbf6eee9abb5d1b602331d787bc779bc810', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (index.h("swirl-tooltip", { key: '60b66fcb9970913a55e7b656f5626f05ff3f7f89', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { key: 'e811e3c7797a2ff4648c84a5b4f57c30bd58ce5e', size: 16, tabIndex: 0 })))));
-        return (index.h(index.Host, { key: '3a40f5d699ff449abd1ab76a9f7969d30f0a801d', role: hostRole }, index.h("div", { key: '4f2a98a9c7eedb8c4ec61e1258fda81569618dd8', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: wrapperRole, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (index.h("div", { key: 'd02b407100f375ec0bc4580569c4ec27fdbf5eca', class: "data-cell__media", "aria-hidden": "true" }, index.h("slot", { key: '1326338efeefbbcbe484f645dbc6e32c0da1585e', name: "media" }))), index.h("div", { key: '119f58fe18cfc46203c6f579b988d91dd61b288a', class: "data-cell__content" }, hasLabel && (index.h("div", { key: 'ca9ed0e4c3d4d4b713e61d60d378902815b7dc92', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (index.h("div", { key: 'c55d22eed287cbdb24c14cb62e112a418f56eff6', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (index.h("div", { class: "data-cell__input" }, index.h("slot", { name: "content" }))) : (this.value && index.h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (index.h("div", { key: '6f60098d9203ea359ee6d51a644fb697d22bc578', class: "data-cell__suffix" }, index.h("slot", { key: 'b3f5d2f2e9ed76eb4f42ba383ff2d84fddb09e65', name: "suffix" }))))));
+        const labelContent = (index.h("swirl-stack", { key: '7a729ce4b378c034b97979986762a0fa1d641cfb', orientation: "horizontal", align: "center", spacing: "4" }, index.h("span", { key: '40982cffdceb54b8d24792c7198d0897276f58e3', class: "data-cell__label", id: labelId, role: "term" }, this.label), this.tooltip && (index.h("swirl-tooltip", { key: 'ea28c9c22c24cbc8693ea289c1dda8a4fb1c20a9', class: "data-cell__tooltip", content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { key: '9b7e454200efa02d2fa80b8e2af0b11c8b114df2', size: 16, tabIndex: 0 })))));
+        return (index.h(index.Host, { key: '29deeeca389052e4b8224fa793930260d5626f64', role: hostRole }, index.h("div", { key: '67714930178503e615e4c57c4fb55a09e668141f', class: className, part: "data-cell", onClick: hasCheckbox || hasRadio ? this.handleClick : undefined, role: wrapperRole, tabIndex: hasCheckbox || hasRadio ? 0 : undefined }, hasMedia && (index.h("div", { key: 'befe843837b8e860175c1d21d9aba3b09be4abaa', class: "data-cell__media", "aria-hidden": "true" }, index.h("slot", { key: '04d1d43cea0aa2b597191276361972a542892a25', name: "media" }))), index.h("div", { key: '67d0e9ff7ccc92ee666b75736c1640f2f5cbfef9', class: "data-cell__content" }, hasLabel && (index.h("div", { key: 'a9ba713fcaa63c4eef2d37765c7ad709f8f53e1b', class: "data-cell__label-wrapper" }, labelContent)), (hasContent || this.value || hasSuffix) && (index.h("div", { key: '167aee81080412dcdc4766be480bf8e774a4c0ed', class: "data-cell__value-wrapper", role: "definition", "aria-labelledby": hasLabel ? labelId : undefined, id: valueId }, hasContent ? (index.h("div", { class: "data-cell__input" }, index.h("slot", { name: "content" }))) : (this.value && index.h("div", { class: "data-cell__value" }, this.value))))), hasSuffix && (index.h("div", { key: '998ac95e5c5a2dbcd1106c39261163d10ee4d538', class: "data-cell__suffix" }, index.h("slot", { key: 'bf5f0adfd4138d7831d69fbbb94045de95084040', name: "suffix" }))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -225,7 +225,7 @@ const SwirlDateInput = class {
         const className = index$2.classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (index.h(index.Host, { key: '2ba566f5272736dfa4f84ec39aadc51aac4fb70c' }, index.h("div", { key: '808f84c5c4c6fec2e3badcc194d88a6aade277e4', class: className }, index.h("input", { key: '9ce3fab9b7d85e2cf5ee3ed74a13d54b3c0cb5ab', "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 && (index.h("swirl-popover-trigger", { key: 'd7591dacf6ab8cd4cb2a5fb7b8c803e3cc2e00f1', swirlPopover: `popover-${this.id}` }, index.h("button", { key: '93c58273dfddc5dccce2cfaaa46d0c5b289980a0', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: '3c2e3d2eb6c9af45e5152bddd08a755f6a3d3341', size: this.iconSize }))))), !(this.disabled || this.readonly) && (index.h("swirl-popover", { key: 'a8f2782a07d461355458779568383a8922e9b40e', 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) }, index.h("swirl-date-picker", { key: 'f9897a43a46c5ec814b31d02451aae2f6f6892bf', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (index.h(index.Host, { key: '3d227b767aebb1422ce118c3518e7d9b981d4cdf' }, index.h("div", { key: '519ba3868d61325645f56c573cc8b0b414bc97e2', class: className }, index.h("input", { key: '2e3f60ee0e301d92b917427d637c2d621e2a1941', "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 && (index.h("swirl-popover-trigger", { key: '512ddd1e2f76b31e2a169e4eaef0c14e52720814', swirlPopover: `popover-${this.id}` }, index.h("button", { key: '50d6ee4160a5665ed7ce056a106eef6cc1238dec', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { key: '21663e5a562c6b70407422f9860cc707d6da81f8', size: this.iconSize }))))), !(this.disabled || this.readonly) && (index.h("swirl-popover", { key: '5c321be0f59ac88fc13cbd504123268f1d0c6282', 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) }, index.h("swirl-date-picker", { key: 'af484f88ccba283e5c3f2934b947686b984434bc', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/swirl-date-picker_2.cjs.entry.js CHANGED Viewed

@@ -4,7 +4,7 @@ var index = require('./index-DfC2lanl.js');
 var utils = require('./utils-UfZG-xPD.js');
 var index$1 = require('./index-DcAhLZUH.js');
-const swirlDatePickerCss = () => `:host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:transparent;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker--fixed-max-width .date-picker{max-width:17.5rem}}.date-picker__header{display:flex;margin-bottom:var(--s-space-8);align-items:center}.date-picker__current-month{display:flex;padding:var(--s-space-8);flex-grow:1;align-items:center;order:1;gap:var(--s-space-4)}.date-picker__next-month-button,.date-picker__previous-month-button{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;margin:0;padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-highlight);background-color:transparent;cursor:pointer}.date-picker__next-month-button:after,.date-picker__previous-month-button:after{position:absolute;background-color:currentColor;content:"";inset:0;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.date-picker__next-month-button:hover,.date-picker__previous-month-button:hover{background-color:var(--s-state-hovered)}.date-picker__next-month-button:active,.date-picker__previous-month-button:active{background-color:var(--s-state-pressed)}.date-picker__next-month-button:focus:not(:focus-visible),.date-picker__previous-month-button:focus:not(:focus-visible){outline:none}.date-picker__next-month-button:focus-visible,.date-picker__previous-month-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__next-month-button>svg,.date-picker__previous-month-button>svg{display:none}.date-picker__next-month-button{order:3}.date-picker__next-month-button:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E")}.date-picker__previous-month-button{order:2}.date-picker__previous-month-button:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E")}.date-picker__month-select,.date-picker__year-select{margin:0;padding:0;border:none;background-color:transparent;font:inherit;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer}.date-picker__month-select:focus:not(:focus-visible),.date-picker__year-select:focus:not(:focus-visible){outline:none}.date-picker__month-select:focus-visible,.date-picker__year-select:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-picker__month-select,.date-picker__year-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-picker__month-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-picker__year-select{max-width:4rem}.date-picker__calendar{display:block;width:100%}.date-picker__calendar tbody{display:block}.date-picker__calendar-header{display:block}.date-picker__weekday-row,.date-picker__calendar-row{display:flex}.date-picker__weekday-row{margin-bottom:var(--s-space-8)}.date-picker__weekday{display:inline-flex;min-width:2.25rem;min-height:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);font-weight:var(--s-font-weight-regular)}.date-picker--fixed-aspect-ratio .date-picker__weekday{aspect-ratio:1}.date-picker__date{position:relative;z-index:1;display:inline-flex;min-width:2.25rem;min-height:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer}.date-picker__date:before{position:absolute;z-index:-1;border-radius:50%;background-color:transparent;content:"";inset:0;aspect-ratio:1;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:auto}.date-picker__date:hover:before{background-color:var(--s-state-hovered)}.date-picker--fixed-aspect-ratio .date-picker__date{aspect-ratio:1}.date-picker__date--current:before{background-color:var(--s-state-hovered)}.date-picker__date--current:focus:not(:focus-visible){outline:none}.date-picker__date--current:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__date--overflowing{color:var(--s-text-subdued)}.date-picker__date--selected{color:var(--s-text-on-action-primary)}.date-picker__date--selected:before{background-color:var(--s-action-primary-default)}.date-picker__date--selected:hover{color:var(--s-text-on-action-primary)}.date-picker__date--selected:hover:before{background-color:var(--s-action-primary-hovered)}.date-picker__date--selected>strong{font-weight:var(--s-font-weight-medium)}.date-picker__date--in-range:not(.date-picker__date--selected):after{position:absolute;border-radius:0px;background-color:var(--s-action-primary-default);content:"";opacity:0.2;inset:0.0625rem 0px}.date-picker__date--start:not(.date-picker__date--end){color:var(--s-text-on-action-primary)}.date-picker__date--start:not(.date-picker__date--end):before{background-color:var(--s-action-primary-default)}.date-picker__date--start:not(.date-picker__date--end):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:"";opacity:0.2;inset:0.0625rem 0 0.0625rem 50%}.date-picker__date--end:not(.date-picker__date--start){color:var(--s-text-on-action-primary)}.date-picker__date--end:not(.date-picker__date--start):before{background-color:var(--s-action-primary-default)}.date-picker__date--end:not(.date-picker__date--start):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:"";opacity:0.2;inset:0.0625rem 50% 0.0625rem 0}.date-picker__date--today:before{box-shadow:inset 0 0 0 var(--s-border-width-default)       var(--s-border-highlight)}.date-picker__date--today>em{font-style:normal}.date-picker__date--disabled{color:var(--s-text-disabled);cursor:default;pointer-events:none}.date-picker__date--disabled:before{background-color:transparent}.date-picker__date--disabled:hover{color:var(--s-text-disabled)}.date-picker__date--disabled:hover:before{background-color:transparent}`;
+const swirlDatePickerCss = () => `:host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:transparent;font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker--fixed-max-width .date-picker{max-width:17.5rem}}.date-picker__header{display:flex;margin-bottom:var(--s-space-8);align-items:center}.date-picker__current-month{display:flex;padding:var(--s-space-8);flex-grow:1;align-items:center;order:1;gap:var(--s-space-4)}.date-picker__next-month-button,.date-picker__previous-month-button{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;margin:0;padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-highlight);background-color:transparent;cursor:pointer}.date-picker__next-month-button:after,.date-picker__previous-month-button:after{position:absolute;background-color:currentColor;content:"";inset:0;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.date-picker__next-month-button:hover,.date-picker__previous-month-button:hover{background-color:var(--s-state-hovered)}.date-picker__next-month-button:active,.date-picker__previous-month-button:active{background-color:var(--s-state-pressed)}.date-picker__next-month-button:focus:not(:focus-visible),.date-picker__previous-month-button:focus:not(:focus-visible){outline:none}.date-picker__next-month-button:focus-visible,.date-picker__previous-month-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__next-month-button>svg,.date-picker__previous-month-button>svg{display:none}.date-picker__next-month-button{order:3}.date-picker__next-month-button:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E")}.date-picker__previous-month-button{order:2}.date-picker__previous-month-button:after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E")}.date-picker__month-select,.date-picker__year-select{margin:0;padding:0;border:none;background-color:transparent;font:inherit;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer}.date-picker__month-select:focus:not(:focus-visible),.date-picker__year-select:focus:not(:focus-visible){outline:none}.date-picker__month-select:focus-visible,.date-picker__year-select:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-picker__month-select,.date-picker__year-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-picker__month-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-picker__year-select{max-width:4rem}.date-picker__calendar{display:block;width:100%}.date-picker__calendar tbody{display:block}.date-picker__calendar-header{display:block}.date-picker__weekday-row,.date-picker__calendar-row{display:flex}.date-picker__weekday-row{margin-bottom:var(--s-space-8)}.date-picker__weekday{display:inline-flex;min-width:2.25rem;min-height:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);font-weight:var(--s-font-weight-regular)}.date-picker--fixed-aspect-ratio .date-picker__weekday{aspect-ratio:1}.date-picker__date{position:relative;z-index:1;display:inline-flex;min-width:2.25rem;min-height:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer}.date-picker__date:before{position:absolute;z-index:-1;border-radius:50%;background-color:transparent;content:"";inset:0;aspect-ratio:1;width:-moz-fit-content;width:fit-content;margin:auto}.date-picker__date:hover:before{background-color:var(--s-state-hovered)}.date-picker--fixed-aspect-ratio .date-picker__date{aspect-ratio:1}.date-picker__date--current:before{background-color:var(--s-state-hovered)}.date-picker__date--current:focus:not(:focus-visible){outline:none}.date-picker__date--current:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__date--overflowing{color:var(--s-text-subdued)}.date-picker__date--selected{color:var(--s-text-on-action-primary)}.date-picker__date--selected:before{background-color:var(--s-action-primary-default)}.date-picker__date--selected:hover{color:var(--s-text-on-action-primary)}.date-picker__date--selected:hover:before{background-color:var(--s-action-primary-hovered)}.date-picker__date--selected>strong{font-weight:var(--s-font-weight-medium)}.date-picker__date--in-range:not(.date-picker__date--selected):after{position:absolute;border-radius:0px;background-color:var(--s-action-primary-default);content:"";opacity:0.2;inset:0.0625rem 0px}.date-picker__date--start:not(.date-picker__date--end){color:var(--s-text-on-action-primary)}.date-picker__date--start:not(.date-picker__date--end):before{background-color:var(--s-action-primary-default)}.date-picker__date--start:not(.date-picker__date--end):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:"";opacity:0.2;inset:0.0625rem 0 0.0625rem 50%}.date-picker__date--end:not(.date-picker__date--start){color:var(--s-text-on-action-primary)}.date-picker__date--end:not(.date-picker__date--start):before{background-color:var(--s-action-primary-default)}.date-picker__date--end:not(.date-picker__date--start):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:"";opacity:0.2;inset:0.0625rem 50% 0.0625rem 0}.date-picker__date--today:before{box-shadow:inset 0 0 0 var(--s-border-width-default)       var(--s-border-highlight)}.date-picker__date--today>em{font-style:normal}.date-picker__date--disabled{color:var(--s-text-disabled);cursor:default;pointer-events:none}.date-picker__date--disabled:before{background-color:transparent}.date-picker__date--disabled:hover{color:var(--s-text-disabled)}.date-picker__date--disabled:hover:before{background-color:transparent}`;
 const SwirlDatePicker = class {
     constructor(hostRef) {
@@ -45,7 +45,7 @@ const SwirlDatePicker = class {
             "date-picker--fixed-max-width": this.fixedMaxWidth,
             "date-picker--fixed-aspect-ratio": this.fixedAspectRatio,
         });
-        return (index.h(index.Host, { key: '7f552c862adcfedf1c210e923d84ab375c2a2880', onClick: this.onClick }, index.h("wc-datepicker", { key: '058e7e67e631cb64a55f1ae6d924b3816338814b', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
+        return (index.h(index.Host, { key: 'b5427fbe372af8ca42124c874a4e44b775441af0', onClick: this.onClick }, index.h("wc-datepicker", { key: '569e169295ddd23b4a2a06d3a19ad5e7f1e484fa', class: className, elementClassName: "date-picker", disableDate: this.disableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
     }
     get el() { return index.getElement(this); }
 };
@@ -65,7 +65,7 @@ const SwirlIconToday = class {
         };
         const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
         const hasLabel = Boolean(this.label);
-        return (index.h("svg", { key: '4931b84b0d313d7c47a8c715449c9a4049fbcb8e', "aria-hidden": hasLabel ? undefined : "true", class: className, fill: "none", height: this.size, part: "icon", role: hasLabel ? "img" : undefined, style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, hasLabel && index.h("title", { key: '54dd336d8943bc8458af0ef90bf0c2c38363b1a7' }, this.label), this.size === 16 && (index.h(index.Fragment, { key: '92c598487519291756e118b962c163dc288b7ce1' }, index.h("path", { key: 'a4323c237c8394d9e8cce2478dc25534e697725e', d: "M6 10.9999C5.53333 10.9999 5.13889 10.8388 4.81667 10.5166C4.49444 10.1944 4.33333 9.79992 4.33333 9.33325C4.33333 8.86658 4.49444 8.47214 4.81667 8.14992C5.13889 7.8277 5.53333 7.66658 6 7.66658C6.46667 7.66658 6.86111 7.8277 7.18333 8.14992C7.50556 8.47214 7.66667 8.86658 7.66667 9.33325C7.66667 9.79992 7.50556 10.1944 7.18333 10.5166C6.86111 10.8388 6.46667 10.9999 6 10.9999ZM3.33333 14.6666C2.96667 14.6666 2.65267 14.5361 2.39133 14.2753C2.13044 14.0139 2 13.6999 2 13.3333V3.99992C2 3.63325 2.13044 3.31947 2.39133 3.05859C2.65267 2.79725 2.96667 2.66659 3.33333 2.66659H4V1.99992C4 1.81103 4.06378 1.65259 4.19133 1.52459C4.31933 1.39703 4.47778 1.33325 4.66667 1.33325C4.85556 1.33325 5.014 1.39703 5.142 1.52459C5.26956 1.65259 5.33333 1.81103 5.33333 1.99992V2.66659H10.6667V1.99992C10.6667 1.81103 10.7307 1.65259 10.8587 1.52459C10.9862 1.39703 11.1444 1.33325 11.3333 1.33325C11.5222 1.33325 11.6804 1.39703 11.808 1.52459C11.936 1.65259 12 1.81103 12 1.99992V2.66659H12.6667C13.0333 2.66659 13.3473 2.79725 13.6087 3.05859C13.8696 3.31947 14 3.63325 14 3.99992V13.3333C14 13.6999 13.8696 14.0139 13.6087 14.2753C13.3473 14.5361 13.0333 14.6666 12.6667 14.6666H3.33333ZM3.33333 13.3333H12.6667V6.66658H3.33333V13.3333ZM3.33333 5.33325H12.6667V3.99992H3.33333V5.33325Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: 'eda8a2360b10262e278942894b760cb3e32999cd' }, index.h("path", { key: '7a5f35d1eac157415a718b3012f1edec17f770f2', d: "M9 16.5C8.3 16.5 7.70833 16.2583 7.225 15.775C6.74167 15.2917 6.5 14.7 6.5 14C6.5 13.3 6.74167 12.7083 7.225 12.225C7.70833 11.7417 8.3 11.5 9 11.5C9.7 11.5 10.2917 11.7417 10.775 12.225C11.2583 12.7083 11.5 13.3 11.5 14C11.5 14.7 11.2583 15.2917 10.775 15.775C10.2917 16.2583 9.7 16.5 9 16.5ZM5 22C4.45 22 3.979 21.8043 3.587 21.413C3.19567 21.021 3 20.55 3 20V6C3 5.45 3.19567 4.97933 3.587 4.588C3.979 4.196 4.45 4 5 4H6V3C6 2.71667 6.09567 2.479 6.287 2.287C6.479 2.09567 6.71667 2 7 2C7.28333 2 7.521 2.09567 7.713 2.287C7.90433 2.479 8 2.71667 8 3V4H16V3C16 2.71667 16.096 2.479 16.288 2.287C16.4793 2.09567 16.7167 2 17 2C17.2833 2 17.5207 2.09567 17.712 2.287C17.904 2.479 18 2.71667 18 3V4H19C19.55 4 20.021 4.196 20.413 4.588C20.8043 4.97933 21 5.45 21 6V20C21 20.55 20.8043 21.021 20.413 21.413C20.021 21.8043 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: '574dd4fc0e54ffc93988a533908d1e1cfed1f259' }, index.h("path", { key: '9aa47bc8166a958f23e7818a512f00e9808041d0', d: "M10.5 19.2499C9.68333 19.2499 8.99306 18.968 8.42917 18.4041C7.86528 17.8402 7.58333 17.1499 7.58333 16.3333C7.58333 15.5166 7.86528 14.8263 8.42917 14.2624C8.99306 13.6985 9.68333 13.4166 10.5 13.4166C11.3167 13.4166 12.0069 13.6985 12.5708 14.2624C13.1347 14.8263 13.4167 15.5166 13.4167 16.3333C13.4167 17.1499 13.1347 17.8402 12.5708 18.4041C12.0069 18.968 11.3167 19.2499 10.5 19.2499ZM5.83333 25.6666C5.19167 25.6666 4.64217 25.4383 4.18483 24.9818C3.72828 24.5244 3.5 23.9749 3.5 23.3333V6.99992C3.5 6.35825 3.72828 5.80914 4.18483 5.35259C4.64217 4.89525 5.19167 4.66659 5.83333 4.66659H7V3.49992C7 3.16936 7.11161 2.89209 7.33483 2.66809C7.55883 2.44486 7.83611 2.33325 8.16667 2.33325C8.49722 2.33325 8.7745 2.44486 8.9985 2.66809C9.22172 2.89209 9.33333 3.16936 9.33333 3.49992V4.66659H18.6667V3.49992C18.6667 3.16936 18.7787 2.89209 19.0027 2.66809C19.2259 2.44486 19.5028 2.33325 19.8333 2.33325C20.1639 2.33325 20.4408 2.44486 20.664 2.66809C20.888 2.89209 21 3.16936 21 3.49992V4.66659H22.1667C22.8083 4.66659 23.3578 4.89525 23.8152 5.35259C24.2717 5.80914 24.5 6.35825 24.5 6.99992V23.3333C24.5 23.9749 24.2717 24.5244 23.8152 24.9818C23.3578 25.4383 22.8083 25.6666 22.1667 25.6666H5.83333ZM5.83333 23.3333H22.1667V11.6666H5.83333V23.3333ZM5.83333 9.33325H22.1667V6.99992H5.83333V9.33325Z", fill: "currentColor" })))));
+        return (index.h("svg", { key: '582adf5a7e27aaa21ba1566ea577c6a11b8358ee', "aria-hidden": hasLabel ? undefined : "true", class: className, fill: "none", height: this.size, part: "icon", role: hasLabel ? "img" : undefined, style: styles, viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, hasLabel && index.h("title", { key: 'f413af85b915d58d20189b2d4703d49013ac6671' }, this.label), this.size === 16 && (index.h(index.Fragment, { key: '57f1e5479e0a4568a53fc2080f4cd18580d195b3' }, index.h("path", { key: '85094b936b32822694e1b251dde8996e597fe5ca', d: "M6 10.9999C5.53333 10.9999 5.13889 10.8388 4.81667 10.5166C4.49444 10.1944 4.33333 9.79992 4.33333 9.33325C4.33333 8.86658 4.49444 8.47214 4.81667 8.14992C5.13889 7.8277 5.53333 7.66658 6 7.66658C6.46667 7.66658 6.86111 7.8277 7.18333 8.14992C7.50556 8.47214 7.66667 8.86658 7.66667 9.33325C7.66667 9.79992 7.50556 10.1944 7.18333 10.5166C6.86111 10.8388 6.46667 10.9999 6 10.9999ZM3.33333 14.6666C2.96667 14.6666 2.65267 14.5361 2.39133 14.2753C2.13044 14.0139 2 13.6999 2 13.3333V3.99992C2 3.63325 2.13044 3.31947 2.39133 3.05859C2.65267 2.79725 2.96667 2.66659 3.33333 2.66659H4V1.99992C4 1.81103 4.06378 1.65259 4.19133 1.52459C4.31933 1.39703 4.47778 1.33325 4.66667 1.33325C4.85556 1.33325 5.014 1.39703 5.142 1.52459C5.26956 1.65259 5.33333 1.81103 5.33333 1.99992V2.66659H10.6667V1.99992C10.6667 1.81103 10.7307 1.65259 10.8587 1.52459C10.9862 1.39703 11.1444 1.33325 11.3333 1.33325C11.5222 1.33325 11.6804 1.39703 11.808 1.52459C11.936 1.65259 12 1.81103 12 1.99992V2.66659H12.6667C13.0333 2.66659 13.3473 2.79725 13.6087 3.05859C13.8696 3.31947 14 3.63325 14 3.99992V13.3333C14 13.6999 13.8696 14.0139 13.6087 14.2753C13.3473 14.5361 13.0333 14.6666 12.6667 14.6666H3.33333ZM3.33333 13.3333H12.6667V6.66658H3.33333V13.3333ZM3.33333 5.33325H12.6667V3.99992H3.33333V5.33325Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, { key: 'd5f11b0145b91865ff8a16afe93bba261ee81877' }, index.h("path", { key: 'dce1f161fef1cc2de373ab9c001dd79e44f6971d', d: "M9 16.5C8.3 16.5 7.70833 16.2583 7.225 15.775C6.74167 15.2917 6.5 14.7 6.5 14C6.5 13.3 6.74167 12.7083 7.225 12.225C7.70833 11.7417 8.3 11.5 9 11.5C9.7 11.5 10.2917 11.7417 10.775 12.225C11.2583 12.7083 11.5 13.3 11.5 14C11.5 14.7 11.2583 15.2917 10.775 15.775C10.2917 16.2583 9.7 16.5 9 16.5ZM5 22C4.45 22 3.979 21.8043 3.587 21.413C3.19567 21.021 3 20.55 3 20V6C3 5.45 3.19567 4.97933 3.587 4.588C3.979 4.196 4.45 4 5 4H6V3C6 2.71667 6.09567 2.479 6.287 2.287C6.479 2.09567 6.71667 2 7 2C7.28333 2 7.521 2.09567 7.713 2.287C7.90433 2.479 8 2.71667 8 3V4H16V3C16 2.71667 16.096 2.479 16.288 2.287C16.4793 2.09567 16.7167 2 17 2C17.2833 2 17.5207 2.09567 17.712 2.287C17.904 2.479 18 2.71667 18 3V4H19C19.55 4 20.021 4.196 20.413 4.588C20.8043 4.97933 21 5.45 21 6V20C21 20.55 20.8043 21.021 20.413 21.413C20.021 21.8043 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, { key: '7fef989f84f82f529567a06b04e27c036d7c106b' }, index.h("path", { key: '78ecae9b23c9fedbffceb1fdd0585353a247cf0d', d: "M10.5 19.2499C9.68333 19.2499 8.99306 18.968 8.42917 18.4041C7.86528 17.8402 7.58333 17.1499 7.58333 16.3333C7.58333 15.5166 7.86528 14.8263 8.42917 14.2624C8.99306 13.6985 9.68333 13.4166 10.5 13.4166C11.3167 13.4166 12.0069 13.6985 12.5708 14.2624C13.1347 14.8263 13.4167 15.5166 13.4167 16.3333C13.4167 17.1499 13.1347 17.8402 12.5708 18.4041C12.0069 18.968 11.3167 19.2499 10.5 19.2499ZM5.83333 25.6666C5.19167 25.6666 4.64217 25.4383 4.18483 24.9818C3.72828 24.5244 3.5 23.9749 3.5 23.3333V6.99992C3.5 6.35825 3.72828 5.80914 4.18483 5.35259C4.64217 4.89525 5.19167 4.66659 5.83333 4.66659H7V3.49992C7 3.16936 7.11161 2.89209 7.33483 2.66809C7.55883 2.44486 7.83611 2.33325 8.16667 2.33325C8.49722 2.33325 8.7745 2.44486 8.9985 2.66809C9.22172 2.89209 9.33333 3.16936 9.33333 3.49992V4.66659H18.6667V3.49992C18.6667 3.16936 18.7787 2.89209 19.0027 2.66809C19.2259 2.44486 19.5028 2.33325 19.8333 2.33325C20.1639 2.33325 20.4408 2.44486 20.664 2.66809C20.888 2.89209 21 3.16936 21 3.49992V4.66659H22.1667C22.8083 4.66659 23.3578 4.89525 23.8152 5.35259C24.2717 5.80914 24.5 6.35825 24.5 6.99992V23.3333C24.5 23.9749 24.2717 24.5244 23.8152 24.9818C23.3578 25.4383 22.8083 25.6666 22.1667 25.6666H5.83333ZM5.83333 23.3333H22.1667V11.6666H5.83333V23.3333ZM5.83333 9.33325H22.1667V6.99992H5.83333V9.33325Z", fill: "currentColor" })))));
     }
 };
 SwirlIconToday.style = swirlIconCss();