@getflip/swirl-components 0.63.0 → 0.64.0

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-83363034.js');
 const index$1 = require('./index-2ddd0598.js');
-const utils = require('./utils-f1b4e064.js');
+const utils = require('./utils-c00c09b9.js');
 
 const swirlToastCss = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);box-shadow:var(--s-shadow-level-2)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__icon{margin-top:0}}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left;align-self:flex-start}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.toast__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.toast__content ::part(link){color:var(--text-default)}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}";
 

package/dist/cjs/{utils-f1b4e064.js → utils-c00c09b9.js}

@@ -71,6 +71,23 @@ function getVisibleHeight(element, container) {
 function isMobileViewport() {
   return !window.matchMedia("(min-width: 768px)").matches;
 }
+function parentsPassShadow(node, selector, matches = []) {
+  if (!node) {
+    return matches;
+  }
+  if (node instanceof ShadowRoot) {
+    return parentsPassShadow(node.host, selector, matches);
+  }
+  if (node instanceof HTMLElement) {
+    if (node.matches(selector)) {
+      return parentsPassShadow(node.parentNode, selector, [...matches, node]);
+    }
+    else {
+      return parentsPassShadow(node.parentNode, selector, matches);
+    }
+  }
+  return parentsPassShadow(node.parentNode, selector, matches);
+}
 function querySelectorAllDeep(root, selector) {
   function collectAllElementsDeep(selector, root) {
     if (!Boolean(root)) {
@@ -102,4 +119,5 @@ exports.getActiveElement = getActiveElement;
 exports.getDesktopMediaQuery = getDesktopMediaQuery;
 exports.getVisibleHeight = getVisibleHeight;
 exports.isMobileViewport = isMobileViewport;
+exports.parentsPassShadow = parentsPassShadow;
 exports.querySelectorAllDeep = querySelectorAllDeep;

package/dist/collection/collection-manifest.json

@@ -25,6 +25,7 @@
     "./components/swirl-inline-notification/swirl-inline-notification.js",
     "./components/swirl-inline-status/swirl-inline-status.js",
     "./components/swirl-link/swirl-link.js",
+    "./components/swirl-menu/swirl-menu.js",
     "./components/swirl-modal/swirl-modal.js",
     "./components/swirl-option-list-item/swirl-option-list-item.js",
     "./components/swirl-pagination/swirl-pagination.js",
@@ -193,6 +194,7 @@
     "./components/swirl-icon/icons/swirl-icon-warning.js",
     "./components/swirl-lightbox/swirl-lightbox.js",
     "./components/swirl-list/swirl-list.js",
+    "./components/swirl-menu-item/swirl-menu-item.js",
     "./components/swirl-option-list/swirl-option-list.js",
     "./components/swirl-option-list-section/swirl-option-list-section.js",
     "./components/swirl-pdf-reader/swirl-pdf-reader.js",

package/dist/collection/components/swirl-action-list-item/swirl-action-list-item.css

@@ -90,6 +90,7 @@
   display: inline-flex;
   min-width: 0;
   flex-grow: 1;
+  flex-shrink: 1;
   align-items: flex-start;
   flex-direction: column;
 }
@@ -106,6 +107,18 @@
   color: var(--s-text-subdued);
 }
 
+.action-list-item__badge {
+  overflow: hidden;
+  min-width: 4rem;
+  padding-left: var(--s-space-8);
+  flex-shrink: 3;
+  color: var(--s-text-subdued);
+  font-weight: var(--s-font-weight-medium);
+  text-align: right;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .action-list-item__suffix {
   display: inline-flex;
   flex-shrink: 0;

package/dist/collection/components/swirl-action-list-item/swirl-action-list-item.js

@@ -7,12 +7,15 @@ export class SwirlActionListItem {
     this.desktopMediaQueryHandler = (event) => {
       this.forceIconProps(event.matches);
     };
+    this.badge = undefined;
     this.disabled = undefined;
     this.description = undefined;
     this.icon = undefined;
     this.intent = "default";
     this.label = undefined;
     this.size = "m";
+    this.swirlAriaExpanded = undefined;
+    this.swirlAriaHaspopup = undefined;
     this.suffix = undefined;
   }
   componentDidLoad() {
@@ -35,9 +38,10 @@ export class SwirlActionListItem {
     suffix === null || suffix === void 0 ? void 0 : suffix.setAttribute("size", smallIcon ? "20" : "24");
   }
   render() {
+    const showBadge = Boolean(this.badge);
     const showSuffix = Boolean(this.suffix) && !this.disabled;
     const className = classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
-    return (h(Host, null, h("button", { class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && (h("span", { class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "action-list-item__label-container" }, h("span", { class: "action-list-item__label" }, this.label), this.description && (h("span", { class: "action-list-item__description" }, this.description))), showSuffix && (h("span", { class: "action-list-item__suffix", innerHTML: this.suffix, ref: (el) => (this.suffixEl = el) })))));
+    return (h(Host, null, h("button", { "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, class: className, disabled: this.disabled, part: "action-list-item", role: "menuitem", tabIndex: -1, type: "button" }, this.icon && (h("span", { class: "action-list-item__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "action-list-item__label-container" }, h("span", { class: "action-list-item__label" }, this.label), this.description && (h("span", { class: "action-list-item__description" }, this.description))), showBadge && (h("span", { class: "action-list-item__badge", innerHTML: this.badge })), showSuffix && (h("span", { class: "action-list-item__suffix", innerHTML: this.suffix, ref: (el) => (this.suffixEl = el) })))));
   }
   static get is() { return "swirl-action-list-item"; }
   static get encapsulation() { return "shadow"; }
@@ -53,6 +57,23 @@ export class SwirlActionListItem {
   }
   static get properties() {
     return {
+      "badge": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "badge",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -167,6 +188,40 @@ export class SwirlActionListItem {
         "reflect": false,
         "defaultValue": "\"m\""
       },
+      "swirlAriaExpanded": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "swirl-aria-expanded",
+        "reflect": false
+      },
+      "swirlAriaHaspopup": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "swirl-aria-haspopup",
+        "reflect": false
+      },
       "suffix": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-action-list-item/swirl-action-list-item.stories.js

@@ -24,6 +24,7 @@ const Template = (args) => {
 };
 export const SwirlActionListItem = Template.bind({});
 SwirlActionListItem.args = {
+  badge: "Badge",
   description: "Description of the action list item",
   icon: `<swirl-icon-mention></swirl-icon-mention>`,
   label: "This is an action",

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

@@ -196,6 +196,10 @@
       color: var(--s-interactive-neutral-disabled);
     }
 
+.button--variant-plain.button--icon-only {
+    padding: 0;
+  }
+
 .button--variant-plain.button--intent-primary {
     color: var(--s-interactive-primary-default);
   }

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

@@ -0,0 +1,98 @@
+:host {
+  display: block;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.menu {
+  width: 100%;
+
+  --swirl-ghost-button-background-default: var(--s-surface-overlay-default);
+  --swirl-ghost-button-background-hovered: var(--s-surface-overlay-hovered);
+  --swirl-ghost-button-background-pressed: var(--s-surface-overlay-pressed);
+}
+
+.menu--mobile.menu--root {
+    position: relative;
+  }
+
+.menu--mobile.menu--root .menu__menu {
+      top: 3.5rem;
+      transition: left 0.2s;
+    }
+
+.menu--mobile.menu--active .menu__menu {
+      display: block;
+    }
+
+.menu--mobile .menu__menu {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: none;
+    width: 100%;
+  }
+
+:not(.menu--mobile).menu--root {
+    position: relative;
+  }
+
+:not(.menu--mobile).menu--root .menu__menu {
+      position: relative;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+:not(.menu--mobile):not(.menu--root) .menu__menu {
+      z-index: 1;
+      max-width: 22.5rem;
+      border-radius: var(--s-border-radius-sm);
+      box-shadow: var(--s-shadow-level-1);
+    }
+
+:not(.menu--mobile).menu--active .menu__menu {
+      display: block;
+    }
+
+:not(.menu--mobile) .menu__menu {
+    position: fixed;
+    display: none;
+  }
+
+.menu__mobile-header {
+  display: flex;
+  height: 3.5rem;
+  padding-right: var(--s-space-16);
+  padding-left: var(--s-space-16);
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: var(--s-border-width-default) solid var(--s-border-default);
+  gap: var(--s-space-8);
+}
+
+.menu__mobile-header > * {
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+
+.menu__title {
+  min-width: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.menu__title swirl-heading {
+    min-width: 0;
+  }
+
+.menu__done-button {
+  margin-right: calc(-1 * var(--s-space-8));
+}
+
+.menu__menu {
+  padding-top: var(--s-space-8);
+  padding-bottom: var(--s-space-8);
+  background-color: var(--s-surface-overlay-default);
+}