@getflip/swirl-components 0.49.2 → 0.50.0

package/dist/components/swirl-icon-unlock-person.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlIconCss = ":host{display:inline-flex}";
+
+const SwirlIconUnlockPerson$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (h(Fragment, null, h("path", { d: "M3.99733 13.3339V6.66724H11.9973V7.3339C12.464 7.3339 12.9107 7.40057 13.3307 7.52724V6.66724C13.3307 5.9339 12.7307 5.3339 11.9973 5.3339H3.99733C3.264 5.3339 2.664 5.9339 2.664 6.66724V13.3339C2.664 14.0672 3.264 14.6672 3.99733 14.6672H8.17067C7.89067 14.2672 7.67067 13.8139 7.524 13.3339H3.99733ZM9.99733 5.3339H5.99733Z", fill: "currentColor" }), h("path", { d: "M11.9973 8.66724C10.1573 8.66724 8.664 10.1606 8.664 12.0006C8.664 13.8406 10.1573 15.3339 11.9973 15.3339C13.8373 15.3339 15.3307 13.8406 15.3307 12.0006C15.3307 10.1606 13.8373 8.66724 11.9973 8.66724ZM11.9973 10.0006C12.5507 10.0006 12.9973 10.4472 12.9973 11.0006C12.9973 11.5539 12.5507 12.0006 11.9973 12.0006C11.444 12.0006 10.9973 11.5539 10.9973 11.0006C10.9973 10.4472 11.444 10.0006 11.9973 10.0006ZM11.9973 14.0006C11.3107 14.0006 10.704 13.6539 10.344 13.1206C10.8307 12.8406 11.3907 12.6672 11.9973 12.6672C12.604 12.6672 13.164 12.8406 13.6507 13.1206C13.2907 13.6539 12.684 14.0006 11.9973 14.0006Z", fill: "currentColor" }), h("path", { d: "M11.3307 5.3339V4.00057C11.3307 2.16057 9.83734 0.667236 7.99734 0.667236C6.15734 0.667236 4.664 2.16057 4.664 4.00057H5.99734C5.99734 2.8939 6.89067 2.00057 7.99734 2.00057C9.104 2.00057 9.99734 2.8939 9.99734 4.00057L9.99733 5.3339L11.3307 5.3339Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M5.99597 20.0007V10.0007H17.996V11.0007C18.696 11.0007 19.366 11.1007 19.996 11.2907V10.0007C19.996 8.90073 19.096 8.00073 17.996 8.00073H5.99597C4.89597 8.00073 3.99597 8.90073 3.99597 10.0007V20.0007C3.99597 21.1007 4.89597 22.0007 5.99597 22.0007H12.256C11.836 21.4007 11.506 20.7207 11.286 20.0007H5.99597ZM14.996 8.00073H8.99597Z", fill: "currentColor" }), h("path", { d: "M17.996 13.0007C15.236 13.0007 12.996 15.2407 12.996 18.0007C12.996 20.7607 15.236 23.0007 17.996 23.0007C20.756 23.0007 22.996 20.7607 22.996 18.0007C22.996 15.2407 20.756 13.0007 17.996 13.0007ZM17.996 15.0007C18.826 15.0007 19.496 15.6707 19.496 16.5007C19.496 17.3307 18.826 18.0007 17.996 18.0007C17.166 18.0007 16.496 17.3307 16.496 16.5007C16.496 15.6707 17.166 15.0007 17.996 15.0007ZM17.996 21.0007C16.966 21.0007 16.056 20.4807 15.516 19.6807C16.246 19.2607 17.086 19.0007 17.996 19.0007C18.906 19.0007 19.746 19.2607 20.476 19.6807C19.936 20.4807 19.026 21.0007 17.996 21.0007Z", fill: "currentColor" }), h("path", { d: "M16.996 8.00073V6.00073C16.996 3.24073 14.756 1.00073 11.996 1.00073C9.23597 1.00073 6.99597 3.24073 6.99597 6.00073H8.99597C8.99597 4.34073 10.336 3.00073 11.996 3.00073C13.656 3.00073 14.996 4.34073 14.996 6.00073L14.996 8.00073L16.996 8.00073Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M6.99532 23.3341V11.6675H20.9953V12.8341C21.812 12.8341 22.5937 12.9508 23.3287 13.1725V11.6675C23.3287 10.3841 22.2787 9.33415 20.9953 9.33415H6.99532C5.71199 9.33415 4.66199 10.3841 4.66199 11.6675V23.3341C4.66199 24.6175 5.71199 25.6675 6.99532 25.6675H14.2987C13.8087 24.9675 13.4237 24.1741 13.167 23.3341H6.99532ZM17.4953 9.33415H10.4953Z", fill: "currentColor" }), h("path", { d: "M20.9953 15.1675C17.7753 15.1675 15.162 17.7808 15.162 21.0008C15.162 24.2208 17.7753 26.8341 20.9953 26.8341C24.2153 26.8341 26.8287 24.2208 26.8287 21.0008C26.8287 17.7808 24.2153 15.1675 20.9953 15.1675ZM20.9953 17.5008C21.9637 17.5008 22.7453 18.2825 22.7453 19.2508C22.7453 20.2191 21.9637 21.0008 20.9953 21.0008C20.027 21.0008 19.2453 20.2191 19.2453 19.2508C19.2453 18.2825 20.027 17.5008 20.9953 17.5008ZM20.9953 24.5008C19.7937 24.5008 18.732 23.8941 18.102 22.9608C18.9537 22.4708 19.9337 22.1675 20.9953 22.1675C22.057 22.1675 23.037 22.4708 23.8887 22.9608C23.2587 23.8941 22.197 24.5008 20.9953 24.5008Z", fill: "currentColor" }), h("path", { d: "M19.8287 9.33415V7.00081C19.8287 3.78081 17.2153 1.16748 13.9953 1.16748C10.7753 1.16748 8.16199 3.78081 8.16199 7.00081H10.4953C10.4953 5.06415 12.0587 3.50081 13.9953 3.50081C15.932 3.50081 17.4953 5.06415 17.4953 7.00081L17.4953 9.33415L19.8287 9.33415Z", fill: "currentColor" })))));
+  }
+  static get style() { return swirlIconCss; }
+}, [1, "swirl-icon-unlock-person", {
+    "size": [2]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-icon-unlock-person"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-icon-unlock-person":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlIconUnlockPerson$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlIconUnlockPerson = SwirlIconUnlockPerson$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlIconUnlockPerson, defineCustomElement };

package/dist/esm/{floating-ui.dom.esm-b9f28f6d.js → floating-ui.dom.esm-ac7cc24e.js}

@@ -1,19 +1,19 @@
-function getSide(placement) {
-  return placement.split('-')[0];
-}
-
 function getAlignment(placement) {
   return placement.split('-')[1];
 }
 
-function getMainAxisFromPlacement(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
-}
-
 function getLengthFromAxis(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
 
+function getSide(placement) {
+  return placement.split('-')[0];
+}
+
+function getMainAxisFromPlacement(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
+}
+
 function computeCoordsFromPlacement(_ref, placement, rtl) {
   let {
     reference,
@@ -27,7 +27,6 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   const side = getSide(placement);
   const isVertical = mainAxis === 'x';
   let coords;
-
   switch (side) {
     case 'top':
       coords = {
@@ -35,45 +34,38 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
         y: reference.y - floating.height
       };
       break;
-
     case 'bottom':
       coords = {
         x: commonX,
         y: reference.y + reference.height
       };
       break;
-
     case 'right':
       coords = {
         x: reference.x + reference.width,
         y: commonY
       };
       break;
-
     case 'left':
       coords = {
         x: reference.x - floating.width,
         y: commonY
       };
       break;
-
     default:
       coords = {
         x: reference.x,
         y: reference.y
       };
   }
-
   switch (getAlignment(placement)) {
     case 'start':
       coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
       break;
-
     case 'end':
       coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
       break;
   }
-
   return coords;
 }
 
@@ -84,7 +76,6 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
  * This export does not have any `platform` interface logic. You will need to
  * write one for the platform you are using Floating UI with.
  */
-
 const computePosition$1 = async (reference, floating, config) => {
   const {
     placement = 'bottom',
@@ -92,8 +83,8 @@ const computePosition$1 = async (reference, floating, config) => {
     middleware = [],
     platform
   } = config;
+  const validMiddleware = middleware.filter(Boolean);
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
-
   let rects = await platform.getElementRects({
     reference,
     floating,
@@ -106,12 +97,11 @@ const computePosition$1 = async (reference, floating, config) => {
   let statefulPlacement = placement;
   let middlewareData = {};
   let resetCount = 0;
-
-  for (let i = 0; i < middleware.length; i++) {
+  for (let i = 0; i < validMiddleware.length; i++) {
     const {
       name,
       fn
-    } = middleware[i];
+    } = validMiddleware[i];
     const {
       x: nextX,
       y: nextY,
@@ -133,20 +123,19 @@ const computePosition$1 = async (reference, floating, config) => {
     });
     x = nextX != null ? nextX : x;
     y = nextY != null ? nextY : y;
-    middlewareData = { ...middlewareData,
-      [name]: { ...middlewareData[name],
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
         ...data
       }
     };
-
     if (reset && resetCount <= 50) {
       resetCount++;
-
       if (typeof reset === 'object') {
         if (reset.placement) {
           statefulPlacement = reset.placement;
         }
-
         if (reset.rects) {
           rects = reset.rects === true ? await platform.getElementRects({
             reference,
@@ -154,18 +143,15 @@ const computePosition$1 = async (reference, floating, config) => {
             strategy
           }) : reset.rects;
         }
-
         ({
           x,
           y
         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
       }
-
       i = -1;
       continue;
     }
   }
-
   return {
     x,
     y,
@@ -195,7 +181,8 @@ function getSideObjectFromPadding(padding) {
 }
 
 function rectToClientRect(rect) {
-  return { ...rect,
+  return {
+    ...rect,
     top: rect.y,
     left: rect.x,
     right: rect.x + rect.width,
@@ -205,19 +192,17 @@ function rectToClientRect(rect) {
 
 /**
  * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary.
+ * element is overflowing a given clipping boundary on each side.
  * - positive = overflowing the boundary by that number of pixels
  * - negative = how many pixels left before it will overflow
  * - 0 = lies flush with the boundary
  * @see https://floating-ui.com/docs/detectOverflow
  */
-async function detectOverflow(middlewareArguments, options) {
+async function detectOverflow(state, options) {
   var _await$platform$isEle;
-
   if (options === void 0) {
     options = {};
   }
-
   const {
     x,
     y,
@@ -225,7 +210,7 @@ async function detectOverflow(middlewareArguments, options) {
     rects,
     elements,
     strategy
-  } = middlewareArguments;
+  } = state;
   const {
     boundary = 'clippingAncestors',
     rootBoundary = 'viewport',
@@ -242,19 +227,29 @@ async function detectOverflow(middlewareArguments, options) {
     rootBoundary,
     strategy
   }));
+  const rect = elementContext === 'floating' ? {
+    ...rects.floating,
+    x,
+    y
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
   const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    rect: elementContext === 'floating' ? { ...rects.floating,
-      x,
-      y
-    } : rects.reference,
-    offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
+    rect,
+    offsetParent,
     strategy
-  }) : rects[elementContext]);
+  }) : rect);
   return {
-    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
-    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
-    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
-    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
   };
 }
 
@@ -265,42 +260,39 @@ function within(min$1$1, value, max$1$1) {
   return max$1(min$1$1, min$1(value, max$1$1));
 }
 
-const hash$1 = {
+const oppositeSideMap = {
   left: 'right',
   right: 'left',
   bottom: 'top',
   top: 'bottom'
 };
 function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, matched => hash$1[matched]);
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
 }
 
 function getAlignmentSides(placement, rects, rtl) {
   if (rtl === void 0) {
     rtl = false;
   }
-
   const alignment = getAlignment(placement);
   const mainAxis = getMainAxisFromPlacement(placement);
   const length = getLengthFromAxis(mainAxis);
   let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
-
   if (rects.reference[length] > rects.floating[length]) {
     mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
   }
-
   return {
     main: mainAlignmentSide,
     cross: getOppositePlacement(mainAlignmentSide)
   };
 }
 
-const hash = {
+const oppositeAlignmentMap = {
   start: 'end',
   end: 'start'
 };
 function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, matched => hash[matched]);
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
 }
 
 function getExpandedPlacements(placement) {
@@ -308,23 +300,50 @@ function getExpandedPlacements(placement) {
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
 
+function getSideList(side, isStart, rtl) {
+  const lr = ['left', 'right'];
+  const rl = ['right', 'left'];
+  const tb = ['top', 'bottom'];
+  const bt = ['bottom', 'top'];
+  switch (side) {
+    case 'top':
+    case 'bottom':
+      if (rtl) return isStart ? rl : lr;
+      return isStart ? lr : rl;
+    case 'left':
+    case 'right':
+      return isStart ? tb : bt;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === 'start', rtl);
+  if (alignment) {
+    list = list.map(side => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+
 /**
- * Changes the placement of the floating element to one that will fit if the
- * initially specified `placement` does not.
+ * Optimizes the visibility of the floating element by flipping the `placement`
+ * in order to keep it in view when the preferred placement(s) will overflow the
+ * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
 const flip = function (options) {
   if (options === void 0) {
     options = {};
   }
-
   return {
     name: 'flip',
     options,
-
-    async fn(middlewareArguments) {
+    async fn(state) {
       var _middlewareData$flip;
-
       const {
         placement,
         middlewareData,
@@ -332,48 +351,49 @@ const flip = function (options) {
         initialPlacement,
         platform,
         elements
-      } = middlewareArguments;
+      } = state;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
         fallbackPlacements: specifiedFallbackPlacements,
         fallbackStrategy = 'bestFit',
+        fallbackAxisSideDirection = 'none',
         flipAlignment = true,
         ...detectOverflowOptions
       } = options;
       const side = getSide(placement);
-      const isBasePlacement = side === initialPlacement;
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
       const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
-
       if (checkMainAxis) {
         overflows.push(overflow[side]);
       }
-
       if (checkCrossAxis) {
         const {
           main,
           cross
-        } = getAlignmentSides(placement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+        } = getAlignmentSides(placement, rects, rtl);
         overflows.push(overflow[main], overflow[cross]);
       }
-
       overflowsData = [...overflowsData, {
         placement,
         overflows
-      }]; // One or more sides is overflowing
+      }];
 
+      // One or more sides is overflowing.
       if (!overflows.every(side => side <= 0)) {
-        var _middlewareData$flip$, _middlewareData$flip2;
-
-        const nextIndex = ((_middlewareData$flip$ = (_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) != null ? _middlewareData$flip$ : 0) + 1;
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
         const nextPlacement = placements[nextIndex];
-
         if (nextPlacement) {
-          // Try next placement and re-run the lifecycle
+          // Try next placement and re-run the lifecycle.
           return {
             data: {
               index: nextIndex,
@@ -385,27 +405,27 @@ const flip = function (options) {
           };
         }
 
-        let resetPlacement = 'bottom';
-
-        switch (fallbackStrategy) {
-          case 'bestFit':
-            {
-              var _overflowsData$map$so;
-
-              const placement = (_overflowsData$map$so = overflowsData.map(d => [d, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0].placement;
-
-              if (placement) {
-                resetPlacement = placement;
+        // First, find the candidates that fit on the mainAxis side of overflow,
+        // then find the placement that fits the best on the main crossAxis side.
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+
+        // Otherwise fallback.
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case 'bestFit':
+              {
+                var _overflowsData$map$so;
+                const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
+                if (placement) {
+                  resetPlacement = placement;
+                }
+                break;
               }
-
+            case 'initialPlacement':
+              resetPlacement = initialPlacement;
               break;
-            }
-
-          case 'initialPlacement':
-            resetPlacement = initialPlacement;
-            break;
+          }
         }
-
         if (placement !== resetPlacement) {
           return {
             reset: {
@@ -414,27 +434,26 @@ const flip = function (options) {
           };
         }
       }
-
       return {};
     }
-
   };
 };
 
-async function convertValueToCoords(middlewareArguments, value) {
+async function convertValueToCoords(state, value) {
   const {
     placement,
     platform,
     elements
-  } = middlewareArguments;
+  } = state;
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getMainAxisFromPlacement(placement) === 'x';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const
+  const rawValue = typeof value === 'function' ? value(state) : value;
 
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -449,11 +468,9 @@ async function convertValueToCoords(middlewareArguments, value) {
     alignmentAxis: null,
     ...rawValue
   };
-
   if (alignment && typeof alignmentAxis === 'number') {
     crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
   }
-
   return isVertical ? {
     x: crossAxis * crossAxisMulti,
     y: mainAxis * mainAxisMulti
@@ -462,33 +479,33 @@ async function convertValueToCoords(middlewareArguments, value) {
     y: crossAxis * crossAxisMulti
   };
 }
+
 /**
- * Displaces the floating element from its reference element.
+ * Modifies the placement by translating the floating element along the
+ * specified axes.
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
+ * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-
 const offset = function (value) {
   if (value === void 0) {
     value = 0;
   }
-
   return {
     name: 'offset',
     options: value,
-
-    async fn(middlewareArguments) {
+    async fn(state) {
       const {
         x,
         y
-      } = middlewareArguments;
-      const diffCoords = await convertValueToCoords(middlewareArguments, value);
+      } = state;
+      const diffCoords = await convertValueToCoords(state, value);
       return {
         x: x + diffCoords.x,
         y: y + diffCoords.y,
         data: diffCoords
       };
     }
-
   };
 };
 
@@ -497,25 +514,23 @@ function getCrossAxis(axis) {
 }
 
 /**
- * Shifts the floating element in order to keep it in view when it will overflow
- * a clipping boundary.
+ * Optimizes the visibility of the floating element by shifting it in order to
+ * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
 const shift = function (options) {
   if (options === void 0) {
     options = {};
   }
-
   return {
     name: 'shift',
     options,
-
-    async fn(middlewareArguments) {
+    async fn(state) {
       const {
         x,
         y,
         placement
-      } = middlewareArguments;
+      } = state;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -537,12 +552,11 @@ const shift = function (options) {
         x,
         y
       };
-      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
       const mainAxis = getMainAxisFromPlacement(getSide(placement));
       const crossAxis = getCrossAxis(mainAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
-
       if (checkMainAxis) {
         const minSide = mainAxis === 'y' ? 'top' : 'left';
         const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
@@ -550,7 +564,6 @@ const shift = function (options) {
         const max = mainAxisCoord - overflow[maxSide];
         mainAxisCoord = within(min, mainAxisCoord, max);
       }
-
       if (checkCrossAxis) {
         const minSide = crossAxis === 'y' ? 'top' : 'left';
         const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
@@ -558,19 +571,19 @@ const shift = function (options) {
         const max = crossAxisCoord - overflow[maxSide];
         crossAxisCoord = within(min, crossAxisCoord, max);
       }
-
-      const limitedCoords = limiter.fn({ ...middlewareArguments,
+      const limitedCoords = limiter.fn({
+        ...state,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
-      return { ...limitedCoords,
+      return {
+        ...limitedCoords,
         data: {
           x: limitedCoords.x - x,
           y: limitedCoords.y - y
         }
       };
     }
-
   };
 };