@getflip/swirl-components 0.414.0 → 0.416.0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-UMoljGbd.js');
+var index = require('./index-C3lyTdWf.js');
 var index$1 = require('./index-DcAhLZUH.js');
 
 const swirlTreeNavigationItemCss = ":host{display:inline-flex;width:100%}:host *{box-sizing:border-box}.tree-navigation-item{width:100%;list-style:none;border-radius:var(--s-border-radius-base)}.tree-navigation-item__link{display:inline-flex;align-items:center;width:100%;height:3rem;padding:0 var(--s-space-12) 0 var(--tree-nav-item-padding, var(--s-space-12));margin-bottom:var(--s-space-2);gap:calc(var(--s-space-4) - var(--s-space-2));min-width:0;border:none;background-color:transparent;color:var(--s-text-default);cursor:pointer;text-decoration:none;font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--tree-nav-item-label-weight, var(--s-font-weight-medium));line-height:var(--s-line-height-sm);border-radius:var(--s-border-radius-base)}.tree-navigation-item__link:hover{background-color:var(--s-background-hovered)}.tree-navigation-item__link:active{background-color:var(--s-background-pressed)}.tree-navigation-item__link:focus{outline:none}.tree-navigation-item__link:focus-visible .tree-navigation-item__label{border-radius:var(--s-border-radius-xs);box-shadow:0 0 0 0.125rem var(--s-focus-default)}.tree-navigation-item__link--active{background-color:var(--s-background-hovered);color:var(--s-text-highlight);--tree-nav-item-label-weight:var(--s-font-weight-medium)}.tree-navigation-item__link--active:hover{background-color:var(--s-background-pressed)}.tree-navigation-item__link--active:active{background-color:var(--s-background-pressed)}.tree-navigation-item--expanded{height:100%}.tree-navigation-item__content{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__icon{display:inline-flex;flex-shrink:0;padding-right:var(--s-space-8)}.tree-navigation-item__toggle-icon{flex-shrink:0;max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__external-icon{max-height:1rem;color:var(--s-icon-default);margin-left:var(--s-space-4)}.tree-navigation-item__label{display:flex;align-items:center;min-width:0;flex:1}.tree-navigation-item__label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tree-navigation-item__toggle-icon,.tree-navigation-item__external-icon{flex:0 0 auto;margin-left:var(--s-space-4)}.tree-navigation-item__children{display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;height:0;transition:height 0.3s ease-out}.tree-navigation-item__children>::slotted(swirl-tree-navigation-item){--tree-nav-item-padding:2.25rem;--tree-nav-item-label-weight:var(--s-font-weight-normal)}.tree-navigation-item__children>::slotted(*){opacity:1}.tree-navigation-item__toggle-icon{transition:transform 0.3s ease}.tree-navigation-item--expanded .tree-navigation-item__toggle-icon{transform:rotate(90deg)}";

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-UMoljGbd.js');
+var index = require('./index-C3lyTdWf.js');
 
 const swirlVideoThumbnailCss = ":host {\n  display: flex;\n  width: 100%;\n}\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n.video-thumbnail {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background-color: transparent;\n  cursor: pointer;\n  container-type: inline-size;\n  container-name: video-thumbnail;\n}\n\n.video-thumbnail:after {\n    position: absolute;\n    background-color: rgba(0, 0, 0, 0.05);\n    content: \"\";\n    inset: 0;\n  }\n\n.video-thumbnail:focus:not(:focus-visible) {\n    outline: none;\n  }\n\n.video-thumbnail:focus-visible {\n    outline-color: var(--s-focus-default);\n    outline-offset: var(--s-space-4);\n  }\n\n.video-thumbnail__image {\n  width: 100%;\n}\n\n.video-thumbnail__duration {\n  position: absolute;\n  bottom: var(--s-space-8);\n  left: var(--s-space-8);\n  padding: var(--s-space-2) var(--s-space-8);\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-on-image);\n  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.1);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  letter-spacing: var(--s-letter-spacing-tighter);\n}\n\n.video-thumbnail__play-icon {\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  left: 50%;\n  width: 2.5rem;\n  height: 2.5rem;\n  transform: translate3d(-50%, -50%, 0);\n}\n\n@container video-thumbnail (min-width: 448px) {\n  .video-thumbnail__play-icon {\n    width: 3.5rem;\n    height: 4.5rem;\n  }\n}\n";
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-UMoljGbd.js');
+var index = require('./index-C3lyTdWf.js');
 
 const swirlVisuallyHiddenCss = ".sc-swirl-visually-hidden-h{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}";
 

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

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

package/dist/collection/components/swirl-button/swirl-button.css

@@ -420,6 +420,39 @@
     color: var(--s-icon-strong);
   }
 
+.button--variant-translucent {
+  color: var(--s-text-default);
+  outline: var(--s-border-width-default) solid var(--s-border-translucent-outline);
+  outline-offset: calc(var(--s-border-width-default) * -1);
+  background: var(--s-translucent-medium-default);
+  box-shadow: var(--s-shadow-level-2);
+  -webkit-backdrop-filter: blur(var(--s-blur-s));
+          backdrop-filter: blur(var(--s-blur-s));
+}
+
+.button--variant-translucent:hover {
+    background: var(--s-translucent-medium-hovered);
+  }
+
+.button--variant-translucent:active {
+    background: var(--s-translucent-medium-pressed);
+  }
+
+.button--variant-translucent .button__icon {
+    color: var(--s-icon-strong);
+  }
+
+.button--variant-translucent:disabled,
+  .button--variant-translucent.button--disabled {
+    color: var(--s-text-subdued);
+    background: var(--s-translucent-medium-default);
+  }
+
+.button--variant-translucent:disabled .button__icon, .button--variant-translucent.button--disabled .button__icon {
+      color: var(--s-icon-default);
+    }
+
+
 .button--icon-position-end .button__icon {
     margin-right: calc(-1 * var(--s-space-4));
     margin-left: 0;

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

@@ -77,13 +77,13 @@ export class SwirlButton {
             "button--pressed": this.pressed,
         });
         const Tag = isLink ? "a" : "button";
-        return (h(Host, { key: '1573a4e272a1b62d465a1e8b80277af1831f9857', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '89735f5fbfc754c86dfb33419838820137a2a559', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
+        return (h(Host, { key: '45ecb09b0608bb62c759dfe09a4f17629a843e66', style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { key: '9ca424959955c2f56665b6abc64fce23b133ee5e', "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value, style: {
                 cursor: !this.disabled && this.cursor !== "pointer"
                     ? this.cursor
                     : undefined,
                 fontSize: this.inheritFontSize ? "inherit" : undefined,
                 lineHeight: this.inheritFontSize ? "inherit" : undefined,
-            } }, Boolean(this.icon) && (h("span", { key: '36d73a47b7cf5073a1cc55d38637735c1be55c35', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '4ab65105a67da14690e989d1e6e18c7b24fe1e14', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: '6f67cbaba7cc556fec3fc4ac6ed6c44fa6912e7b', name: "icon" }))), !hideLabel && h("span", { key: '60e78db85d5932f88fa0d025d5ac67ef1afbac0b', class: "button__label" }, this.label), hasTag && (h("span", { key: '3178f0b6833fd1b0c4d8a392a1bfc7a841025b51', class: "button__tag" }, h("slot", { key: '0ddc0d9cf92d363825c2b9863da39c690382564a', name: "tag" }))), hasTrailingSlot && (h("div", { key: 'a0fab6b3cb5ad5f84c73755afeba7d18b64417b6', class: "button__trailing-slot" }, h("slot", { key: 'f7badc86eeb813254aa48733910d5ac477b972cc', name: "trailing" }))))));
+            } }, Boolean(this.icon) && (h("span", { key: '85c7e12f44561c7754296fac3b6c74be06b93c22', class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { key: '082e271c1ca38212e61f9d62aed60b016ac588f6', class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { key: 'bf24edbe91d4590049429b27da601ba5cd51e9a5', name: "icon" }))), !hideLabel && h("span", { key: '06cd510bb5617fec59496d64b32fc19bf59ba026', class: "button__label" }, this.label), hasTag && (h("span", { key: '95f4b84ae32def5b1fbf1ba1963382343dac4279', class: "button__tag" }, h("slot", { key: '9d778088353420c933a1e22089568c690909026c', name: "tag" }))), hasTrailingSlot && (h("div", { key: '1f5b393f4da411b312220673611a016e96b0d218', class: "button__trailing-slot" }, h("slot", { key: '635deb01ac5dbad192f64c79155a944f1c8b4716', name: "trailing" }))))));
     }
     static get is() { return "swirl-button"; }
     static get encapsulation() { return "scoped"; }
@@ -641,7 +641,7 @@ export class SwirlButton {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlButtonVariant",
-                    "resolved": "\"flat\" | \"floating\" | \"ghost\" | \"on-image\" | \"outline\" | \"plain\"",
+                    "resolved": "\"flat\" | \"floating\" | \"ghost\" | \"on-image\" | \"outline\" | \"plain\" | \"translucent\"",
                     "references": {
                         "SwirlButtonVariant": {
                             "location": "local",

package/dist/collection/components/swirl-file-uploader/swirl-file-uploader.js

@@ -329,7 +329,7 @@ export class SwirlFileUploader {
                 "mutable": false,
                 "complexType": {
                     "original": "SwirlButtonVariant",
-                    "resolved": "\"flat\" | \"floating\" | \"ghost\" | \"on-image\" | \"outline\" | \"plain\"",
+                    "resolved": "\"flat\" | \"floating\" | \"ghost\" | \"on-image\" | \"outline\" | \"plain\" | \"translucent\"",
                     "references": {
                         "SwirlButtonVariant": {
                             "location": "import",

package/dist/collection/components/swirl-modal-shell/swirl-modal-shell.css

@@ -8,39 +8,60 @@
 
 .modal-shell {
   position: fixed;
+  inset: 0;
   z-index: var(--s-z-40);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+}
+
+.modal-shell__backdrop {
+  position: fixed;
   inset: 0;
-  overflow-y: auto;
+  z-index: 1;
   background-color: var(--s-translucent-medium-default);
+  opacity: 1;
+  -webkit-backdrop-filter: blur(var(--s-blur-l));
+          backdrop-filter: blur(var(--s-blur-l));
   transition: opacity 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;
   transition: opacity 0.3s ease-out, backdrop-filter 0.3s ease-out;
   transition: opacity 0.3s ease-out, backdrop-filter 0.3s ease-out, -webkit-backdrop-filter 0.3s ease-out;
-  -webkit-backdrop-filter: blur(var(--s-blur-l));
-          backdrop-filter: blur(var(--s-blur-l));
 }
 
-.modal-shell__content {
-  position: relative;
+.modal-shell__scroll-container {
+  overflow-y: auto;
+  position: fixed;
+  inset: 0;
   z-index: 2;
-  max-height: 100%;
+  display: grid;
   padding: var(--s-space-24);
+  justify-content: center;
+  align-items: center;
+}
 
+.modal-shell__scroll-container__content {
   opacity: 1;
   transform: scale(1);
   transition: opacity 0.2s ease-out,
     transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1);
 }
 
-.modal-shell--closing {
-  opacity: 0;
-  -webkit-backdrop-filter: blur(0px);
-          backdrop-filter: blur(0px);
+.modal-shell__close-button {
+  position: fixed;
+  top: var(--s-space-16);
+  right: var(--s-space-16);
+  z-index: 3;
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 0.2s ease-out,
+    transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.1);
 }
 
-.modal-shell--closing .modal-shell__content {
+.modal-shell--closing .modal-shell__backdrop {
+    opacity: 0;
+    -webkit-backdrop-filter: blur(0px);
+            backdrop-filter: blur(0px);
+  }
+
+.modal-shell--closing .modal-shell__scroll-container__content,
+  .modal-shell--closing .modal-shell__close-button {
     opacity: 0;
     transform: scale(1.1);
   }

package/dist/collection/components/swirl-modal-shell/swirl-modal-shell.js

@@ -18,11 +18,7 @@ export class SwirlModalShell {
         this.onContentClick = (event) => {
             event.stopPropagation();
         };
-        this.onCloseButtonClick = (event) => {
-            event.stopPropagation();
-            this.close();
-        };
-        this.onModalClick = () => {
+        this.onClose = () => {
             this.close();
         };
     }
@@ -55,7 +51,7 @@ export class SwirlModalShell {
         const className = classnames("modal-shell", {
             "modal-shell--closing": this.isClosing,
         });
-        return (h(Host, { key: 'b289d8e1de60a166e36409e72830df6c36d068d6' }, h("section", { key: 'c088d170cc85fce3fcb63e616597222243c8eacb', "aria-label": this.label, role: "dialog", "aria-modal": "true", class: className, onClick: this.onModalClick, onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'b8195685db3015c120ebe9d378453d5c867f0730', class: "modal-shell__content" }, h("swirl-box", { key: 'de5d5126f1f108b4e56a158d12bfee6882b33de1', paddingBlockStart: "16", paddingBlockEnd: "16" }, h("swirl-button", { key: '27782e8f464e1fea61b396fd49a4d2a14863de0d', icon: "<swirl-icon-close color='strong'></swirl-icon-close>", label: this.closeButtonLabel, hideLabel: true, variant: "plain", onClick: this.onCloseButtonClick })), h("div", { key: '5a984c86b7620082df2f395a4d89c96111061012', onClick: this.onContentClick }, h("slot", { key: '46b8aa90dba93dac494f9655771b144d67121163' }))))));
+        return (h(Host, { key: 'ba3be1d341d59e784148d40444dedcf89a5fa3b5' }, h("section", { key: 'ddb6de53386676639b675d2e7ea0c2ef2d37f5ee', "aria-label": this.label, role: "dialog", "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.modalEl = el) }, h("div", { key: 'f115ac537d57f81b6a023a71b929a1b89e60a30b', class: "modal-shell__backdrop" }), h("div", { key: '39269c4e266f5d26cfb8ade16654005cca95e872', class: "modal-shell__scroll-container", onClick: this.onClose }, h("div", { key: '229f8f4f23625391775a2ce6403e5e78ec75068d', class: "modal-shell__scroll-container__content", onClick: this.onContentClick }, h("slot", { key: '68034579aff85c6d8269b4140dd2777d0d40911a' }))), h("swirl-button", { key: 'daf100e59dbf8ebf47707ea9276546f6f4d3b86a', class: "modal-shell__close-button", icon: "<swirl-icon-close color='strong'></swirl-icon-close>", label: this.closeButtonLabel, hideLabel: true, variant: "translucent", onClick: this.onClose }))));
     }
     static get is() { return "swirl-modal-shell"; }
     static get originalStyleUrls() {