@getflip/swirl-components 0.432.0 → 0.433.0

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-31zRgX-7.js');
-var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-PA1q-Uql.js');
+var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 
@@ -151,7 +151,7 @@ const SwirlAutocomplete = class {
             if (this.disableAutoUpdate) {
                 this.disableAutoUpdate();
             }
-            this.disableAutoUpdate = floatingUi_dom_browser_min.N(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
+            this.disableAutoUpdate = floatingUi_dom.autoUpdate(this.inputEl, this.listboxContainerEl, this.reposition.bind(this), { animationFrame: true });
             this.listboxContainerEl.scrollTop = 0;
             this.updateSuggestions(this.inputEl.querySelector("input").value);
         });
@@ -160,8 +160,8 @@ const SwirlAutocomplete = class {
         if (!Boolean(this.listboxContainerEl)) {
             return;
         }
-        this.position = await floatingUi_dom_browser_min.P(this.inputEl, this.listboxContainerEl, {
-            middleware: [floatingUi_dom_browser_min.D({ crossAxis: -16, mainAxis: 16 })],
+        this.position = await floatingUi_dom.computePosition(this.inputEl, this.listboxContainerEl, {
+            middleware: [floatingUi_dom.offset({ crossAxis: -16, mainAxis: 16 })],
             placement: "bottom-start",
             strategy: "fixed",
         });

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-31zRgX-7.js');
-var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-PA1q-Uql.js');
+var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 
@@ -58,10 +58,10 @@ const SwirlMenu = class {
                 return;
             }
             requestAnimationFrame(async () => {
-                this.position = await floatingUi_dom_browser_min.P(trigger, this.menuContainer, {
+                this.position = await floatingUi_dom.computePosition(trigger, this.menuContainer, {
                     placement: "right-start",
                     strategy: "fixed",
-                    middleware: [floatingUi_dom_browser_min.D({ mainAxis: -10, crossAxis: 0 }), floatingUi_dom_browser_min.k(), floatingUi_dom_browser_min.b()],
+                    middleware: [floatingUi_dom.offset({ mainAxis: -10, crossAxis: 0 }), floatingUi_dom.shift(), floatingUi_dom.flip()],
                 });
             });
         };
@@ -129,7 +129,7 @@ const SwirlMenu = class {
         if (this.disableAutoUpdate) {
             this.disableAutoUpdate();
         }
-        this.disableAutoUpdate = floatingUi_dom_browser_min.N(this.el.parentElement, this.menuContainer, this.reposition);
+        this.disableAutoUpdate = floatingUi_dom.autoUpdate(this.el.parentElement, this.menuContainer, this.reposition);
     }
     watchValue() {
         this.updateActiveItem();

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-31zRgX-7.js');
-var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-PA1q-Uql.js');
+var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
 var bodyScrollLock_esm = require('./bodyScrollLock.esm-DMDeaEpJ.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
@@ -51,16 +51,16 @@ const SwirlPopover = class {
                 ? { mainAxis: this.offset, crossAxis: 0 }
                 : { mainAxis: this.offset[0], crossAxis: this.offset[1] };
             const shiftPaddingX = utils.getPixelsFromRemToken("--s-space-16");
-            const shiftWithPadding = floatingUi_dom_browser_min.k({
+            const shiftWithPadding = floatingUi_dom.shift({
                 padding: {
                     left: shiftPaddingX,
                     right: shiftPaddingX,
                 },
             });
             const middleware = this.enableFlip
-                ? [floatingUi_dom_browser_min.D(offsetOptions), shiftWithPadding, floatingUi_dom_browser_min.b()]
-                : [floatingUi_dom_browser_min.D(offsetOptions), shiftWithPadding];
-            this.position = await floatingUi_dom_browser_min.P(this.triggerEl, this.contentContainer, {
+                ? [floatingUi_dom.offset(offsetOptions), shiftWithPadding, floatingUi_dom.flip()]
+                : [floatingUi_dom.offset(offsetOptions), shiftWithPadding];
+            this.position = await floatingUi_dom.computePosition(this.triggerEl, this.contentContainer, {
                 middleware,
                 placement: this.placement,
                 strategy: "fixed",
@@ -186,7 +186,7 @@ const SwirlPopover = class {
             if (this.disableAutoUpdate) {
                 this.disableAutoUpdate();
             }
-            this.disableAutoUpdate = floatingUi_dom_browser_min.N(this.triggerEl, this.contentContainer, () => this.reposition());
+            this.disableAutoUpdate = floatingUi_dom.autoUpdate(this.triggerEl, this.contentContainer, () => this.reposition());
             this.scrollContainer.scrollTop = 0;
             this.lockBodyScroll();
         });

package/dist/cjs/swirl-skeleton-box.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-31zRgX-7.js');
 var index$1 = require('./index-DcAhLZUH.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 = class {
     constructor(hostRef) {

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-31zRgX-7.js');
-var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-PA1q-Uql.js');
+var floatingUi_dom = require('./floating-ui.dom-C8bqk2dV.js');
 var index$1 = require('./index-DcAhLZUH.js');
 var utils = require('./utils-UfZG-xPD.js');
 
@@ -39,10 +39,10 @@ const SwirlTooltip = class {
                 return;
             }
             const middleware = [
-                ...this.options.middleware.filter((middleware) => middleware.name !== "arrow"),
-                floatingUi_dom_browser_min.u({ element: this.arrowElement, padding: 12 }),
+                ...this.options.middleware.filter((middleware) => middleware && middleware.name !== "arrow"),
+                floatingUi_dom.arrow({ element: this.arrowElement, padding: 12 }),
             ];
-            this.actualPosition = await floatingUi_dom_browser_min.P(referenceElement, this.popperEl, { ...this.options, middleware });
+            this.actualPosition = await floatingUi_dom.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 = class {
             const shiftPaddingX = utils.getPixelsFromRemToken("--s-space-16");
             this.options = {
                 middleware: [
-                    floatingUi_dom_browser_min.D(margin),
-                    floatingUi_dom_browser_min.k({
+                    floatingUi_dom.offset(margin),
+                    floatingUi_dom.shift({
                         padding: {
                             top: shiftPaddingY,
                             bottom: shiftPaddingY,
@@ -77,7 +77,7 @@ const SwirlTooltip = class {
                             right: shiftPaddingX,
                         },
                     }),
-                    floatingUi_dom_browser_min.b(),
+                    floatingUi_dom.flip(),
                 ],
                 placement: this.position,
                 strategy: this.positioning,
@@ -126,7 +126,7 @@ const SwirlTooltip = class {
                 return;
             }
             this.reposition();
-            this.disableAutoUpdate = floatingUi_dom_browser_min.N(referenceElement, this.popperEl, this.reposition.bind(this));
+            this.disableAutoUpdate = floatingUi_dom.autoUpdate(referenceElement, this.popperEl, this.reposition.bind(this));
         });
     }
     async hide() {
@@ -142,7 +142,7 @@ const SwirlTooltip = class {
             "tooltip--active": this.active,
             "tooltip--visible": this.visible,
         });
-        return (index.h(index.Host, { key: '62242ca0238a1cb072fc0253b57732bb6fe8ba1d', onKeydown: this.onKeydown }, index.h("span", { key: '4613ceba81107da0ad513184b72628cef5e889c8', class: className }, index.h("span", { key: 'ed854da20f19bc50077926a2fd28297113dcc359', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, index.h("slot", { key: '1302b8ce283daf7e2f1357b2f595bf9cc3038d5c' })), index.h("span", { key: 'a1105e62cb7154e9818c7d9db5cd1625d2519833', class: "tooltip__popper", ref: (el) => (this.popperEl = el), style: {
+        return (index.h(index.Host, { key: 'e5a7884c4f3f45294efc913baa4767a937afd07d', onKeydown: this.onKeydown }, index.h("span", { key: '9952c41dc93f61aa103e87f4384e17c271c9a600', class: className }, index.h("span", { key: '7fcef15d2b640e8cb685fae4275321c0776c0f20', class: "tooltip__reference", "aria-describedby": "tooltip", onFocusout: this.onFocusOut, onClick: this.hide, onFocusin: this.onFocusIn }, index.h("slot", { key: '7b975f73546287509b4b04b6c14e304c976e291b' })), index.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 = class {
                     : "",
                 position: this.positioning,
                 maxWidth: this.maxWidth,
-            } }, this.visible && (index.h("span", { key: 'b039c561fac0504934448f157417c8dca033b0e1', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: 'ef6ab50e99dd78d3152a1cb2068ac3a3b6081798', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '087f97b8b1a01cf85f841089ff5d2d2e7bff6746', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
+            } }, this.visible && (index.h("span", { key: '7792c9acbe8745684b460789492aafc71e9e75c7', class: "tooltip__bubble", id: "tooltip", part: "tooltip__bubble", role: "tooltip" }, index.h("span", { key: 'd4c6edd15ff7a8bb22932fccc9a2d555ccde11c0', class: "tooltip__content", innerHTML: this.content }))), index.h("span", { key: '117ba01694bfb6a78db345392a7de85977d2ba03', class: "tooltip__arrow", ref: (el) => (this.arrowElement = el), style: {
                 ...this.arrowStyles,
                 visibility: this.visible ? "visible" : "hidden",
             } })))));

package/dist/collection/components/swirl-skeleton-box/swirl-skeleton-box.css

@@ -13,9 +13,8 @@
   background-color: var(--s-surface-raised-hovered);
 }
 
-.skeleton-box:before {
+.skeleton-box:after {
     position: relative;
-    z-index: 1;
     display: block;
     width: 100%;
     height: 100%;

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

@@ -33,7 +33,7 @@ export class SwirlTooltip {
                 return;
             }
             const middleware = [
-                ...this.options.middleware.filter((middleware) => middleware.name !== "arrow"),
+                ...this.options.middleware.filter((middleware) => middleware && middleware.name !== "arrow"),
                 arrow({ element: this.arrowElement, padding: 12 }),
             ];
             this.actualPosition = await computePosition(referenceElement, this.popperEl, { ...this.options, middleware });
@@ -136,7 +136,7 @@ export class SwirlTooltip {
             "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`
                     : "",
@@ -145,7 +145,7 @@ export class SwirlTooltip {
                     : "",
                 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",
             } })))));