@getflip/swirl-components 0.106.0 → 0.108.0

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

@@ -15,6 +15,10 @@
   text-align: start;
 }
 
+.heading--balanced {
+  text-wrap: balance;
+}
+
 .heading--align-start {
   text-align: start;
 }

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

@@ -1,6 +1,5 @@
 import { h, Host } from "@stencil/core";
 import classnames from "classnames";
-import balanceText from "balance-text";
 export class SwirlHeading {
   constructor() {
     this.align = "start";
@@ -12,18 +11,6 @@ export class SwirlHeading {
     this.text = undefined;
     this.truncate = undefined;
   }
-  componentDidRender() {
-    this.rebalance();
-  }
-  onWindowResize() {
-    this.rebalance();
-  }
-  rebalance() {
-    if (!this.balance || !Boolean(this.headingEl) || Boolean(this.lines)) {
-      return;
-    }
-    balanceText(this.headingEl);
-  }
   render() {
     const Tag = this.as || `h${this.level}`;
     const styles = Boolean(this.lines)
@@ -36,9 +23,10 @@ export class SwirlHeading {
       }
       : undefined;
     const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`, {
+      "heading--balanced": this.balance,
       "heading--truncate": this.truncate,
     });
-    return (h(Host, null, h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el), style: styles }, this.text)));
+    return (h(Host, null, h(Tag, { class: className, id: this.headingId, style: styles }, this.text)));
   }
   static get is() { return "swirl-heading"; }
   static get encapsulation() { return "scoped"; }
@@ -210,13 +198,4 @@ export class SwirlHeading {
       }
     };
   }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "onWindowResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }

package/dist/collection/components/swirl-heading/swirl-heading.spec.js

@@ -9,7 +9,7 @@ describe("swirl-heading", () => {
     expect(page.root).toEqualHtml(`
       <swirl-heading heading-id="id" level="3">
         Heading
-        <h3 class="heading heading--align-start heading--level-3" id="id"></h3>
+        <h3 class="heading heading--align-start heading--balanced heading--level-3" id="id"></h3>
       </swirl-heading>
     `);
   });
@@ -21,7 +21,7 @@ describe("swirl-heading", () => {
     expect(page.root).toEqualHtml(`
       <swirl-heading as="h6" heading-id="id" level="3">
         Heading
-        <h6 class="heading heading--align-start heading--level-3" id="id"></h6>
+        <h6 class="heading heading--align-start heading--balanced heading--level-3" id="id"></h6>
       </swirl-heading>
     `);
   });

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

@@ -37,32 +37,30 @@ const Template = (args) => {
   trigger.label = "Open modal";
   trigger.addEventListener("click", () => element.open());
   element.innerHTML = `
-    <swirl-box padding-block-start="16">
-      <swirl-text>
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-        sit amet.
-      </swirl-text>
-    </swirl-box>
-
-    <swirl-box cover slot="secondary-content">
-      <swirl-card elevated="false" height="100%" intent="default-subdued" is-borderless>
-        <swirl-text slot="content">
-          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-          eirmod tempor invidunt.
-        </swirl-text>
-      </swirl-card>
-    </swirl-box>
-
-    <swirl-box padding-block-start="4" padding-block-end="16" slot="header-tools">
-      <swirl-search auto-focus label="Search"></swirl-search>
-    </div>
+  <swirl-box padding-block-start="16">
+  <swirl-text>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+    amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+    diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+    sit amet.
+  </swirl-text>
+</swirl-box>
+<swirl-box cover slot="secondary-content">
+  <swirl-card elevated="false" height="100%" intent="default-subdued" is-borderless>
+    <swirl-text slot="content">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt.
+    </swirl-text>
+  </swirl-card>
+</swirl-box>
+<swirl-box padding-block-start="4" padding-block-end="16" slot="header-tools">
+  <swirl-search auto-focus label="Search"></swirl-search>
+</div>
   `;
   container.append(trigger, element);
   return container;

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

@@ -56,6 +56,7 @@ export class SwirlPopover {
     this.offset = 8;
     this.popoverId = undefined;
     this.placement = "bottom-start";
+    this.returnFocusToTrigger = true;
     this.trigger = undefined;
     this.triggerContainer = undefined;
     this.useContainerWidth = undefined;
@@ -78,18 +79,21 @@ export class SwirlPopover {
       return;
     }
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const isWKWebView = "webkit" in window;
+    const isSafariOrWKWebView = isSafari || isWKWebView;
     const target = event.target;
     const relatedTarget = event.relatedTarget;
     const activeElement = getActiveElement();
-    const popoverLostFocus = !this.el.contains(target) &&
-      !this.el.contains(activeElement) &&
-      target !== this.triggerEl &&
-      !this.triggerEl?.contains(target) &&
-      (!isSafari ||
-        (isSafari &&
-          !this.el.contains(relatedTarget || target) &&
-          relatedTarget !== this.el));
-    if (popoverLostFocus) {
+    // Check if the focus has moved outside the popover or its trigger.
+    const focusIsOutsidePopover = !this.el.contains(target) && !this.el.contains(activeElement);
+    const focusIsNotOnTrigger = target !== this.triggerEl && !this.triggerEl?.contains(target);
+    const extraCheckForSafariOrWKWebView = isSafariOrWKWebView &&
+      !this.el.contains(relatedTarget || target) &&
+      relatedTarget !== this.el;
+    // Close the popover if the focus is outside and additional checks for Safari or WKWebView pass.
+    if (focusIsOutsidePopover &&
+      focusIsNotOnTrigger &&
+      (!isSafariOrWKWebView || extraCheckForSafariOrWKWebView)) {
       this.close();
     }
   }
@@ -128,7 +132,9 @@ export class SwirlPopover {
       this.updateTriggerAttributes();
     }, 150);
     this.unlockBodyScroll();
-    this.getNativeTriggerElement()?.focus();
+    if (this.returnFocusToTrigger) {
+      this.getNativeTriggerElement()?.focus();
+    }
   }
   /**
    * Open the popover.
@@ -430,6 +436,24 @@ export class SwirlPopover {
         "reflect": false,
         "defaultValue": "\"bottom-start\""
       },
+      "returnFocusToTrigger": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "return-focus-to-trigger",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "trigger": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/swirl-popover/swirl-popover.stories.js

@@ -12,6 +12,9 @@ export default {
         type: "number",
       },
     },
+    returnFocusToTrigger: {
+      description: "By default, the focus is returned to the trigger element when the popover is closed. Pass false to disable this behavior.",
+    },
     trigger: {
       description: "**Deprecated! Please use the swirl-popover-trigger component instead.** ID of the trigger element or the trigger DOM element.",
       control: {

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

@@ -53,6 +53,7 @@ const Template = (args) => {
   popover.animation = "scale-in-y";
   popover.label = "Options";
   popover.placement = "bottom-end";
+  popover.returnFocusToTrigger = false;
   popover.innerHTML = `
     <swirl-action-list>
       <swirl-action-list-item

package/dist/collection/components/swirl-search/swirl-search.stories.js

@@ -12,9 +12,6 @@ export default {
 };
 const Template = (args) => {
   const element = generateStoryElement("swirl-search", args);
-  element.addEventListener("inputInput", (event) => {
-    console.log(event);
-  });
   return element;
 };
 export const SwirlSearch = Template.bind({});

package/dist/collection/components/swirl-theme-provider/swirl-theme-provider.stories.js

@@ -77,9 +77,6 @@ const Template = (args) => {
     element.resetPreferredTheme();
   });
   element.append(lightModeButton, darkModeButton, tenantButton, resetButton);
-  element.addEventListener("themeChange", (event) => {
-    console.log(event.detail);
-  });
   return element;
 };
 export const SwirlThemeProvider = Template.bind({});

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

@@ -29,9 +29,6 @@ const Template = (args) => {
   const element = generateStoryElement("swirl-time-input", args);
   formControl.setAttribute("label", "Time");
   formControl.append("\n  ", element, "\n");
-  element.addEventListener("valueChange", (event) => {
-    console.log(event);
-  });
   return formControl;
 };
 export const SwirlTimeInput = Template.bind({});

package/dist/components/swirl-heading2.js

@@ -1,8 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-import { b as balancetext } from './balancetext.js';
 
-const swirlHeadingCss = ".sc-swirl-heading-h{display:block;width:100%}.sc-swirl-heading-h *.sc-swirl-heading{box-sizing:border-box}.heading.sc-swirl-heading{display:block;width:100%;margin:0;padding:0;text-align:start}.heading--align-start.sc-swirl-heading{text-align:start}.heading--align-center.sc-swirl-heading{text-align:center}.heading--align-end.sc-swirl-heading{text-align:end}.heading--level-1.sc-swirl-heading{font-size:var(--s-font-size-2xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-2xl);letter-spacing:var(--s-letter-spacing-tight)}.heading--level-2.sc-swirl-heading{font-size:var(--s-font-size-xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-xl)}.heading--level-3.sc-swirl-heading{font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.heading--level-4.sc-swirl-heading{font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}.heading--level-5.sc-swirl-heading,.heading--level-6.sc-swirl-heading{font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-sm)}.heading--truncate.sc-swirl-heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
+const swirlHeadingCss = ".sc-swirl-heading-h{display:block;width:100%}.sc-swirl-heading-h *.sc-swirl-heading{box-sizing:border-box}.heading.sc-swirl-heading{display:block;width:100%;margin:0;padding:0;text-align:start}.heading--balanced.sc-swirl-heading{text-wrap:balance}.heading--align-start.sc-swirl-heading{text-align:start}.heading--align-center.sc-swirl-heading{text-align:center}.heading--align-end.sc-swirl-heading{text-align:end}.heading--level-1.sc-swirl-heading{font-size:var(--s-font-size-2xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-2xl);letter-spacing:var(--s-letter-spacing-tight)}.heading--level-2.sc-swirl-heading{font-size:var(--s-font-size-xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-xl)}.heading--level-3.sc-swirl-heading{font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.heading--level-4.sc-swirl-heading{font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}.heading--level-5.sc-swirl-heading,.heading--level-6.sc-swirl-heading{font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-sm)}.heading--truncate.sc-swirl-heading{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
 
 const SwirlHeading = /*@__PURE__*/ proxyCustomElement(class SwirlHeading extends HTMLElement {
   constructor() {
@@ -17,18 +16,6 @@ const SwirlHeading = /*@__PURE__*/ proxyCustomElement(class SwirlHeading extends
     this.text = undefined;
     this.truncate = undefined;
   }
-  componentDidRender() {
-    this.rebalance();
-  }
-  onWindowResize() {
-    this.rebalance();
-  }
-  rebalance() {
-    if (!this.balance || !Boolean(this.headingEl) || Boolean(this.lines)) {
-      return;
-    }
-    balancetext(this.headingEl);
-  }
   render() {
     const Tag = this.as || `h${this.level}`;
     const styles = Boolean(this.lines)
@@ -41,9 +28,10 @@ const SwirlHeading = /*@__PURE__*/ proxyCustomElement(class SwirlHeading extends
       }
       : undefined;
     const className = classnames("heading", `heading--align-${this.align}`, `heading--level-${this.level}`, {
+      "heading--balanced": this.balance,
       "heading--truncate": this.truncate,
     });
-    return (h(Host, null, h(Tag, { class: className, id: this.headingId, ref: (el) => (this.headingEl = el), style: styles }, this.text)));
+    return (h(Host, null, h(Tag, { class: className, id: this.headingId, style: styles }, this.text)));
   }
   static get style() { return swirlHeadingCss; }
 }, [2, "swirl-heading", {
@@ -55,7 +43,7 @@ const SwirlHeading = /*@__PURE__*/ proxyCustomElement(class SwirlHeading extends
     "lines": [2],
     "text": [1],
     "truncate": [4]
-  }, [[9, "resize", "onWindowResize"]]]);
+  }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/swirl-popover2.js

@@ -61,6 +61,7 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
     this.offset = 8;
     this.popoverId = undefined;
     this.placement = "bottom-start";
+    this.returnFocusToTrigger = true;
     this.trigger = undefined;
     this.triggerContainer = undefined;
     this.useContainerWidth = undefined;
@@ -83,18 +84,21 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
       return;
     }
     const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+    const isWKWebView = "webkit" in window;
+    const isSafariOrWKWebView = isSafari || isWKWebView;
     const target = event.target;
     const relatedTarget = event.relatedTarget;
     const activeElement = getActiveElement();
-    const popoverLostFocus = !this.el.contains(target) &&
-      !this.el.contains(activeElement) &&
-      target !== this.triggerEl &&
-      !this.triggerEl?.contains(target) &&
-      (!isSafari ||
-        (isSafari &&
-          !this.el.contains(relatedTarget || target) &&
-          relatedTarget !== this.el));
-    if (popoverLostFocus) {
+    // Check if the focus has moved outside the popover or its trigger.
+    const focusIsOutsidePopover = !this.el.contains(target) && !this.el.contains(activeElement);
+    const focusIsNotOnTrigger = target !== this.triggerEl && !this.triggerEl?.contains(target);
+    const extraCheckForSafariOrWKWebView = isSafariOrWKWebView &&
+      !this.el.contains(relatedTarget || target) &&
+      relatedTarget !== this.el;
+    // Close the popover if the focus is outside and additional checks for Safari or WKWebView pass.
+    if (focusIsOutsidePopover &&
+      focusIsNotOnTrigger &&
+      (!isSafariOrWKWebView || extraCheckForSafariOrWKWebView)) {
       this.close();
     }
   }
@@ -133,7 +137,9 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
       this.updateTriggerAttributes();
     }, 150);
     this.unlockBodyScroll();
-    this.getNativeTriggerElement()?.focus();
+    if (this.returnFocusToTrigger) {
+      this.getNativeTriggerElement()?.focus();
+    }
   }
   /**
    * Open the popover.
@@ -265,6 +271,7 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
     "offset": [2],
     "popoverId": [1, "popover-id"],
     "placement": [1],
+    "returnFocusToTrigger": [4, "return-focus-to-trigger"],
     "trigger": [1],
     "triggerContainer": [16],
     "useContainerWidth": [8, "use-container-width"],