@getflip/swirl-components 0.432.0 → 0.433.0

package/dist/components/swirl-autocomplete.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { N, P, D } from './floating-ui.dom.browser.min.js';
+import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.js';
 import { c as classNames } from './index2.js';
 import { d as debounce } from './utils.js';
 import { d as defineCustomElement$h } from './swirl-icon-cancel2.js';
@@ -166,7 +166,7 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
             if (this.disableAutoUpdate) {
                 this.disableAutoUpdate();
             }
-            this.disableAutoUpdate = N(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
+            this.disableAutoUpdate = autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
             this.listboxContainerEl.scrollTop = 0;
             this.updateSuggestions(this.inputEl.querySelector("input").value);
         });
@@ -175,8 +175,8 @@ const SwirlAutocomplete$1 = /*@__PURE__*/ proxyCustomElement(class SwirlAutocomp
         if (!Boolean(this.listboxContainerEl)) {
             return;
         }
-        this.position = await P(this.inputEl, this.listboxContainerEl, {
-            middleware: [D({ crossAxis: -16, mainAxis: 16 })],
+        this.position = await computePosition(this.inputEl, this.listboxContainerEl, {
+            middleware: [offset({ crossAxis: -16, mainAxis: 16 })],
             placement: "bottom-start",
             strategy: "fixed",
         });

package/dist/components/swirl-menu.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P, N, D, k, b } from './floating-ui.dom.browser.min.js';
+import { c as computePosition, a as autoUpdate, o as offset, s as shift, f as flip } from './floating-ui.dom.js';
 import { c as classNames } from './index2.js';
 import { q as querySelectorAllDeep, l as closestPassShadow, m as parentsPassShadow, i as isMobileViewport, k as getActiveElement } from './utils.js';
 import { d as defineCustomElement$3 } from './swirl-button2.js';
@@ -60,10 +60,10 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
                 return;
             }
             requestAnimationFrame(async () => {
-                this.position = await P(trigger, this.menuContainer, {
+                this.position = await computePosition(trigger, this.menuContainer, {
                     placement: "right-start",
                     strategy: "fixed",
-                    middleware: [D({ mainAxis: -10, crossAxis: 0 }), k(), b()],
+                    middleware: [offset({ mainAxis: -10, crossAxis: 0 }), shift(), flip()],
                 });
             });
         };
@@ -131,7 +131,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
         if (this.disableAutoUpdate) {
             this.disableAutoUpdate();
         }
-        this.disableAutoUpdate = N(this.el.parentElement, this.menuContainer, this.reposition);
+        this.disableAutoUpdate = autoUpdate(this.el.parentElement, this.menuContainer, this.reposition);
     }
     watchValue() {
         this.updateActiveItem();

package/dist/components/swirl-popover2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { P, N, k, D, b } from './floating-ui.dom.browser.min.js';
+import { c as computePosition, a as autoUpdate, s as shift, o as offset, f as flip } from './floating-ui.dom.js';
 import { d as disableBodyScroll, e as enableBodyScroll } from './bodyScrollLock.esm.js';
 import { c as classNames } from './index2.js';
 import { i as isMobileViewport, t as getPixelsFromRemToken, k as getActiveElement, q as querySelectorAllDeep } from './utils.js';
@@ -51,16 +51,16 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
                 ? { mainAxis: this.offset, crossAxis: 0 }
                 : { mainAxis: this.offset[0], crossAxis: this.offset[1] };
             const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
-            const shiftWithPadding = k({
+            const shiftWithPadding = shift({
                 padding: {
                     left: shiftPaddingX,
                     right: shiftPaddingX,
                 },
             });
             const middleware = this.enableFlip
-                ? [D(offsetOptions), shiftWithPadding, b()]
-                : [D(offsetOptions), shiftWithPadding];
-            this.position = await P(this.triggerEl, this.contentContainer, {
+                ? [offset(offsetOptions), shiftWithPadding, flip()]
+                : [offset(offsetOptions), shiftWithPadding];
+            this.position = await computePosition(this.triggerEl, this.contentContainer, {
                 middleware,
                 placement: this.placement,
                 strategy: "fixed",
@@ -186,7 +186,7 @@ const SwirlPopover = /*@__PURE__*/ proxyCustomElement(class SwirlPopover extends
             if (this.disableAutoUpdate) {
                 this.disableAutoUpdate();
             }
-            this.disableAutoUpdate = N(this.triggerEl, this.contentContainer, () => this.reposition());
+            this.disableAutoUpdate = autoUpdate(this.triggerEl, this.contentContainer, () => this.reposition());
             this.scrollContainer.scrollTop = 0;
             this.lockBodyScroll();
         });

package/dist/components/swirl-skeleton-box2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classNames } from './index2.js';
 
-const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:before{position:relative;z-index:1;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
+const swirlSkeletonBoxCss = ":host{display:block}:host *{box-sizing:border-box}.skeleton-box{position:relative;overflow:hidden;min-height:var(--s-font-size-sm);background-color:var(--s-surface-raised-hovered)}.skeleton-box:after{position:relative;display:block;width:100%;height:100%;background-image:linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0,\n      rgba(255, 255, 255, 0) 12%,\n      var(--s-surface-raised-default) 50%,\n      rgba(255, 255, 255, 0) 88%,\n      rgba(255, 255, 255, 0) 100%\n    );content:\"\";transform:translateX(-100%);animation:skeleton-box-shimmer 3s infinite}@keyframes skeleton-box-shimmer{100%{transform:translateX(100%)}}.skeleton-box--static:before{display:none}.skeleton-box--border-radius-pill{border-radius:100rem}.skeleton-box--border-radius-none{border-radius:0}";
 
 const SwirlSkeletonBox = /*@__PURE__*/ proxyCustomElement(class SwirlSkeletonBox extends HTMLElement {
     constructor() {

package/dist/components/swirl-tooltip2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { u, P, D, k, b, N } from './floating-ui.dom.browser.min.js';
+import { b as arrow, c as computePosition, o as offset, s as shift, f as flip, a as autoUpdate } from './floating-ui.dom.js';
 import { c as classNames } from './index2.js';
 import { t as getPixelsFromRemToken } from './utils.js';
 
@@ -39,10 +39,10 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                 return;
             }
             const middleware = [
-                ...this.options.middleware.filter((middleware) => middleware.name !== "arrow"),
-                u({ element: this.arrowElement, padding: 12 }),
+                ...this.options.middleware.filter((middleware) => middleware && middleware.name !== "arrow"),
+                arrow({ element: this.arrowElement, padding: 12 }),
             ];
-            this.actualPosition = await P(referenceElement, this.popperEl, { ...this.options, middleware });
+            this.actualPosition = await computePosition(referenceElement, this.popperEl, { ...this.options, middleware });
             const arrowX = this.actualPosition.middlewareData.arrow?.x;
             const arrowY = this.actualPosition.middlewareData.arrow?.y;
             this.arrowStyles = {
@@ -68,8 +68,8 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             const shiftPaddingX = getPixelsFromRemToken("--s-space-16");
             this.options = {
                 middleware: [
-                    D(margin),
-                    k({
+                    offset(margin),
+                    shift({
                         padding: {
                             top: shiftPaddingY,
                             bottom: shiftPaddingY,
@@ -77,7 +77,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                             right: shiftPaddingX,
                         },
                     }),
-                    b(),
+                    flip(),
                 ],
                 placement: this.position,
                 strategy: this.positioning,
@@ -126,7 +126,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                 return;
             }
             this.reposition();
-            this.disableAutoUpdate = N(referenceElement, this.popperEl, this.reposition.bind(this));
+            this.disableAutoUpdate = autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
         });
     }
     async hide() {
@@ -142,7 +142,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (h(Host, { key: '62242ca0238a1cb072fc0253b57732bb6fe8ba1d', onKeydown: this.onKeydown }, h("span", { key: '4613ceba81107da0ad513184b72628cef5e889c8', class: className }, h("span", { key: 'ed854da20f19bc50077926a2fd28297113dcc359', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: '1302b8ce283daf7e2f1357b2f595bf9cc3038d5c' })), h("span", { key: 'a1105e62cb7154e9818c7d9db5cd1625d2519833', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (h(Host, { key: 'e5a7884c4f3f45294efc913baa4767a937afd07d', onKeydown: this.onKeydown }, h("span", { key: '9952c41dc93f61aa103e87f4384e17c271c9a600', class: className }, h("span", { key: '7fcef15d2b640e8cb685fae4275321c0776c0f20', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, h("slot", { key: '7b975f73546287509b4b04b6c14e304c976e291b' })), h("span", { key: 'a385f4ab99e66b5164b1151fffed552a61718da9', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
                 top: Boolean(this.actualPosition)
                     ? `${this.actualPosition?.y}px`
                     : "",
@@ -151,7 +151,7 @@ const SwirlTooltip = /*@__PURE__*/ proxyCustomElement(class SwirlTooltip extends
                     : "",
                 position: this.positioning,
                 maxWidth: this.maxWidth,
-            } }, this.visible && (h("span", { key: 'b039c561fac0504934448f157417c8dca033b0e1', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'ef6ab50e99dd78d3152a1cb2068ac3a3b6081798', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '087f97b8b1a01cf85f841089ff5d2d2e7bff6746', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (h("span", { key: '7792c9acbe8745684b460789492aafc71e9e75c7', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, h("span", { key: 'd4c6edd15ff7a8bb22932fccc9a2d555ccde11c0', class: "tooltip__content", innerHTML: this.content }))), h("span", { key: '117ba01694bfb6a78db345392a7de85977d2ba03', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));