@esri/calcite-components 1.5.0-next.29 → 1.5.0-next.30

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.29
+ * v1.5.0-next.30
  */
 'use strict';
 
@@ -15707,8 +15707,9 @@ const DIMENSIONS = {
     },
   },
 };
+const SCOPE_SIZE = 1;
 
-const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
+const clamp$1 = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
 const decimalPlaces = (value) => {
   const match = ("" + value).match(decimalNumberRegex);
@@ -15722,7 +15723,7 @@ const decimalPlaces = (value) => {
     (match[2] ? +match[2] : 0));
 };
 
-const colorPickerCss = "/*!@:host([disabled])*/[disabled].sc-calcite-color-picker-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-color-picker-h *.sc-calcite-color-picker,.sc-calcite-color-picker-h[disabled] .sc-calcite-color-picker-s>*{pointer-events:none}/*!@:host*/.sc-calcite-color-picker-h{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-color-picker-h[disabled] .sc-calcite-color-picker-s>[calcite-hydrated][disabled],[disabled].sc-calcite-color-picker-h [calcite-hydrated][disabled].sc-calcite-color-picker{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-color-picker-h{--calcite-color-picker-spacing:8px}/*!@:host([scale=s]) .container*/[scale=s].sc-calcite-color-picker-h .container.sc-calcite-color-picker{inline-size:160px}/*!@:host([scale=s]) .saved-colors*/[scale=s].sc-calcite-color-picker-h .saved-colors.sc-calcite-color-picker{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}/*!@:host([scale=m])*/[scale=m].sc-calcite-color-picker-h{--calcite-color-picker-spacing:12px}/*!@:host([scale=m]) .container*/[scale=m].sc-calcite-color-picker-h .container.sc-calcite-color-picker{inline-size:272px}/*!@:host([scale=l])*/[scale=l].sc-calcite-color-picker-h{--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l]) .container*/[scale=l].sc-calcite-color-picker-h .container.sc-calcite-color-picker{inline-size:464px}/*!@:host([scale=l]) .section:first-of-type*/[scale=l].sc-calcite-color-picker-h .section.sc-calcite-color-picker:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}/*!@:host([scale=l]) .saved-colors*/[scale=l].sc-calcite-color-picker-h .saved-colors.sc-calcite-color-picker{grid-template-columns:repeat(auto-fill, 32px)}/*!@:host([scale=l]) .control-section*/[scale=l].sc-calcite-color-picker-h .control-section.sc-calcite-color-picker{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}/*!@:host([scale=l]) .color-hex-options*/[scale=l].sc-calcite-color-picker-h .color-hex-options.sc-calcite-color-picker{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}/*!@:host([scale=l]) .color-mode-container*/[scale=l].sc-calcite-color-picker-h .color-mode-container.sc-calcite-color-picker{flex-shrink:3}/*!@.container*/.container.sc-calcite-color-picker{background-color:var(--calcite-ui-foreground-1);display:inline-block;border:1px solid var(--calcite-ui-border-1)}/*!@.control-and-scope*/.control-and-scope.sc-calcite-color-picker{position:relative;display:flex;cursor:pointer;touch-action:none}/*!@.scope*/.scope.sc-calcite-color-picker{position:absolute;z-index:var(--calcite-app-z-index);font-size:var(--calcite-font-size--1);outline-color:transparent}/*!@.scope:focus*/.scope.sc-calcite-color-picker:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );outline-offset:16px}/*!@.hex-and-channels-group*/.hex-and-channels-group.sc-calcite-color-picker{inline-size:100%}/*!@.hex-and-channels-group,\n.control-section*/.hex-and-channels-group.sc-calcite-color-picker,.control-section.sc-calcite-color-picker{display:flex;flex-direction:row;flex-wrap:wrap}/*!@.section*/.section.sc-calcite-color-picker{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}/*!@.section:first-of-type*/.section.sc-calcite-color-picker:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}/*!@.sliders*/.sliders.sc-calcite-color-picker{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing)}/*!@.preview-and-sliders*/.preview-and-sliders.sc-calcite-color-picker{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}/*!@.color-hex-options,\n.section--split*/.color-hex-options.sc-calcite-color-picker,.section--split.sc-calcite-color-picker{flex-grow:1}/*!@.header*/.header.sc-calcite-color-picker{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-ui-text-1)}/*!@.color-mode-container*/.color-mode-container.sc-calcite-color-picker{padding-block-start:var(--calcite-color-picker-spacing)}/*!@.channels*/.channels.sc-calcite-color-picker{display:flex;row-gap:0.125rem}/*!@.channel[data-channel-index=\"3\"]*/.channel[data-channel-index=\"3\"].sc-calcite-color-picker{inline-size:159px}/*!@:host([scale=s]) .channels*/[scale=s].sc-calcite-color-picker-h .channels.sc-calcite-color-picker{flex-wrap:wrap}/*!@:host([scale=s]) .channel*/[scale=s].sc-calcite-color-picker-h .channel.sc-calcite-color-picker{flex-basis:30%;flex-grow:1}/*!@:host([scale=s]) .channel[data-channel-index=\"3\"]*/[scale=s].sc-calcite-color-picker-h .channel[data-channel-index=\"3\"].sc-calcite-color-picker{inline-size:unset;margin-inline-start:unset}/*!@:host([scale=l]) .channel[data-channel-index=\"3\"]*/[scale=l].sc-calcite-color-picker-h .channel[data-channel-index=\"3\"].sc-calcite-color-picker{inline-size:131px}/*!@.saved-colors*/.saved-colors.sc-calcite-color-picker{display:grid;gap:0.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill, 24px)}/*!@.saved-colors-buttons*/.saved-colors-buttons.sc-calcite-color-picker{display:flex}/*!@.saved-color*/.saved-color.sc-calcite-color-picker{outline-offset:0;outline-color:transparent;cursor:pointer}/*!@.saved-color:focus*/.saved-color.sc-calcite-color-picker:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}/*!@.saved-color:hover*/.saved-color.sc-calcite-color-picker:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-ui-border-2);outline-offset:2px}/*!@:host([hidden])*/[hidden].sc-calcite-color-picker-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-color-picker{display:none}";
+const colorPickerCss = "/*!@:host([disabled])*/[disabled].sc-calcite-color-picker-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-color-picker-h *.sc-calcite-color-picker,.sc-calcite-color-picker-h[disabled] .sc-calcite-color-picker-s>*{pointer-events:none}/*!@:host*/.sc-calcite-color-picker-h{display:inline-block;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-normal)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-color-picker-h[disabled] .sc-calcite-color-picker-s>[calcite-hydrated][disabled],[disabled].sc-calcite-color-picker-h [calcite-hydrated][disabled].sc-calcite-color-picker{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-color-picker-h{--calcite-color-picker-spacing:8px}/*!@:host([scale=s]) .container*/[scale=s].sc-calcite-color-picker-h .container.sc-calcite-color-picker{inline-size:160px}/*!@:host([scale=s]) .saved-colors*/[scale=s].sc-calcite-color-picker-h .saved-colors.sc-calcite-color-picker{gap:0.25rem;grid-template-columns:repeat(auto-fill, 20px)}/*!@:host([scale=m])*/[scale=m].sc-calcite-color-picker-h{--calcite-color-picker-spacing:12px}/*!@:host([scale=m]) .container*/[scale=m].sc-calcite-color-picker-h .container.sc-calcite-color-picker{inline-size:272px}/*!@:host([scale=l])*/[scale=l].sc-calcite-color-picker-h{--calcite-color-picker-spacing:16px;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l]) .container*/[scale=l].sc-calcite-color-picker-h .container.sc-calcite-color-picker{inline-size:464px}/*!@:host([scale=l]) .section:first-of-type*/[scale=l].sc-calcite-color-picker-h .section.sc-calcite-color-picker:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}/*!@:host([scale=l]) .saved-colors*/[scale=l].sc-calcite-color-picker-h .saved-colors.sc-calcite-color-picker{grid-template-columns:repeat(auto-fill, 32px)}/*!@:host([scale=l]) .control-section*/[scale=l].sc-calcite-color-picker-h .control-section.sc-calcite-color-picker{flex-wrap:nowrap;align-items:baseline;flex-wrap:wrap}/*!@:host([scale=l]) .color-hex-options*/[scale=l].sc-calcite-color-picker-h .color-hex-options.sc-calcite-color-picker{display:flex;flex-shrink:1;flex-direction:column;justify-content:space-around}/*!@:host([scale=l]) .color-mode-container*/[scale=l].sc-calcite-color-picker-h .color-mode-container.sc-calcite-color-picker{flex-shrink:3}/*!@.container*/.container.sc-calcite-color-picker{background-color:var(--calcite-ui-foreground-1);display:inline-block;border:1px solid var(--calcite-ui-border-1)}/*!@.control-and-scope*/.control-and-scope.sc-calcite-color-picker{position:relative;display:flex;cursor:pointer;touch-action:none}/*!@.scope*/.scope.sc-calcite-color-picker{pointer-events:none;position:absolute;z-index:var(--calcite-app-z-index);block-size:1px;inline-size:1px;border-radius:9999px;background-color:transparent;font-size:var(--calcite-font-size--1);outline-color:transparent}/*!@.scope:focus*/.scope.sc-calcite-color-picker:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          );outline-offset:11px}/*!@.hex-and-channels-group*/.hex-and-channels-group.sc-calcite-color-picker{inline-size:100%}/*!@.hex-and-channels-group,\n.control-section*/.hex-and-channels-group.sc-calcite-color-picker,.control-section.sc-calcite-color-picker{display:flex;flex-direction:row;flex-wrap:wrap}/*!@.section*/.section.sc-calcite-color-picker{padding-block:0 var(--calcite-color-picker-spacing);padding-inline:var(--calcite-color-picker-spacing)}/*!@.section:first-of-type*/.section.sc-calcite-color-picker:first-of-type{padding-block-start:var(--calcite-color-picker-spacing)}/*!@.sliders*/.sliders.sc-calcite-color-picker{display:flex;flex-direction:column;justify-content:space-between;margin-inline-start:var(--calcite-color-picker-spacing)}/*!@.preview-and-sliders*/.preview-and-sliders.sc-calcite-color-picker{display:flex;align-items:center;padding:var(--calcite-color-picker-spacing)}/*!@.color-hex-options,\n.section--split*/.color-hex-options.sc-calcite-color-picker,.section--split.sc-calcite-color-picker{flex-grow:1}/*!@.header*/.header.sc-calcite-color-picker{display:flex;align-items:center;justify-content:space-between;color:var(--calcite-ui-text-1)}/*!@.color-mode-container*/.color-mode-container.sc-calcite-color-picker{padding-block-start:var(--calcite-color-picker-spacing)}/*!@.channels*/.channels.sc-calcite-color-picker{display:flex;row-gap:0.125rem}/*!@.channel[data-channel-index=\"3\"]*/.channel[data-channel-index=\"3\"].sc-calcite-color-picker{inline-size:159px}/*!@:host([scale=s]) .channels*/[scale=s].sc-calcite-color-picker-h .channels.sc-calcite-color-picker{flex-wrap:wrap}/*!@:host([scale=s]) .channel*/[scale=s].sc-calcite-color-picker-h .channel.sc-calcite-color-picker{flex-basis:30%;flex-grow:1}/*!@:host([scale=s]) .channel[data-channel-index=\"3\"]*/[scale=s].sc-calcite-color-picker-h .channel[data-channel-index=\"3\"].sc-calcite-color-picker{inline-size:unset;margin-inline-start:unset}/*!@:host([scale=l]) .channel[data-channel-index=\"3\"]*/[scale=l].sc-calcite-color-picker-h .channel[data-channel-index=\"3\"].sc-calcite-color-picker{inline-size:131px}/*!@.saved-colors*/.saved-colors.sc-calcite-color-picker{display:grid;gap:0.5rem;padding-block-start:var(--calcite-color-picker-spacing);grid-template-columns:repeat(auto-fill, 24px)}/*!@.saved-colors-buttons*/.saved-colors-buttons.sc-calcite-color-picker{display:flex}/*!@.saved-color*/.saved-color.sc-calcite-color-picker{outline-offset:0;outline-color:transparent;cursor:pointer}/*!@.saved-color:focus*/.saved-color.sc-calcite-color-picker:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}/*!@.saved-color:hover*/.saved-color.sc-calcite-color-picker:hover{transition:outline-color var(--calcite-internal-animation-timing-fast) ease-in-out;outline:2px solid var(--calcite-ui-border-2);outline-offset:2px}/*!@:host([hidden])*/[hidden].sc-calcite-color-picker-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-color-picker{display:none}";
 
 const throttleFor60FpsInMs = 16;
 class ColorPicker {
@@ -15802,7 +15803,7 @@ class ColorPicker {
       else {
         const value = Number(input.value);
         const adjustedValue = value + this.shiftKeyChannelAdjustment;
-        const clamped = clamp(adjustedValue, 0, limit);
+        const clamped = clamp$1(adjustedValue, 0, limit);
         inputValue = clamped.toString();
       }
       input.value = inputValue;
@@ -16032,15 +16033,17 @@ class ColorPicker {
       const modifier = event.shiftKey ? 10 : 1;
       const { key } = event;
       const arrowKeyToXOffset = {
-        ArrowUp: 1,
-        ArrowRight: 1,
-        ArrowDown: -1,
-        ArrowLeft: -1,
+        ArrowUp: 0.01,
+        ArrowRight: 0.01,
+        ArrowDown: -0.01,
+        ArrowLeft: -0.01,
       };
       if (arrowKeyToXOffset[key]) {
         event.preventDefault();
-        const delta = opacityToAlpha(arrowKeyToXOffset[key] * modifier);
-        this.captureHueSliderColor(this.opacityScopeLeft + delta);
+        const delta = arrowKeyToXOffset[key] * modifier;
+        const alpha = this.baseColorFieldColor.alpha();
+        const color = this.baseColorFieldColor.alpha(alpha + delta);
+        this.internalColorSet(color, false);
       }
     };
     this.allowEmpty = false;
@@ -16219,29 +16222,41 @@ class ColorPicker {
   //
   //--------------------------------------------------------------------------
   render() {
-    const { allowEmpty, channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, dimensions: { colorField: { width: colorFieldWidth }, slider: { width: sliderWidth }, thumb: { radius: thumbRadius }, }, hexDisabled, hideChannels, hideHex, hideSaved, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation, } = this;
+    const { allowEmpty, channelsDisabled, color, colorFieldScopeLeft, colorFieldScopeTop, dimensions: { slider: { width: sliderWidth }, thumb: { radius: thumbRadius }, }, hexDisabled, hideChannels, hideHex, hideSaved, hueScopeLeft, messages, alphaChannel, opacityScopeLeft, savedColors, savedDisabled, scale, scopeOrientation, } = this;
     const selectedColorInHex = color ? hexify(color, alphaChannel) : null;
     const hueTop = thumbRadius;
     const hueLeft = hueScopeLeft ?? (sliderWidth * DEFAULT_COLOR$1.hue()) / HSV_LIMITS.h;
     const opacityTop = thumbRadius;
     const opacityLeft = opacityScopeLeft ??
-      (colorFieldWidth * alphaToOpacity(DEFAULT_COLOR$1.alpha())) / OPACITY_LIMITS.max;
+      (sliderWidth * alphaToOpacity(DEFAULT_COLOR$1.alpha())) / OPACITY_LIMITS.max;
     const noColor = color === null;
     const vertical = scopeOrientation === "vertical";
     const noHex = hexDisabled || hideHex;
     const noChannels = channelsDisabled || hideChannels;
     const noSaved = savedDisabled || hideSaved;
+    const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
+    const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
+    const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
     return (hAsync("div", { class: CSS$T.container }, hAsync("div", { class: CSS$T.controlAndScope }, hAsync("canvas", { class: CSS$T.colorField, onPointerDown: this.handleColorFieldPointerDown,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.initColorField }), hAsync("div", { "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$T.scope]: true, [CSS$T.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0",
+      ref: this.initColorField }), hAsync("div", { "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$T.scope]: true, [CSS$T.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, role: "slider", style: {
+        top: `${adjustedColorFieldScopeTop || 0}px`,
+        left: `${adjustedColorFieldScopeLeft || 0}px`,
+      }, tabindex: "0",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.storeColorFieldScope })), hAsync("div", { class: CSS$T.previewAndSliders }, hAsync("calcite-color-picker-swatch", { class: CSS$T.preview, color: selectedColorInHex, scale: "l" }), hAsync("div", { class: CSS$T.sliders }, hAsync("div", { class: CSS$T.controlAndScope }, hAsync("canvas", { class: { [CSS$T.slider]: true, [CSS$T.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.initHueSlider }), hAsync("div", { "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$T.scope]: true, [CSS$T.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0",
+      ref: this.initHueSlider }), hAsync("div", { "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$T.scope]: true, [CSS$T.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: {
+        top: `${adjustedHueScopeTop}px`,
+        left: `${adjustedHueScopeLeft}px`,
+      }, tabindex: "0",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.storeHueScope })), alphaChannel ? (hAsync("div", { class: CSS$T.controlAndScope }, hAsync("canvas", { class: { [CSS$T.slider]: true, [CSS$T.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: this.initOpacitySlider }), hAsync("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR$1).round().alpha(), class: { [CSS$T.scope]: true, [CSS$T.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, role: "slider", style: { top: `${opacityTop}px`, left: `${opacityLeft}px` }, tabindex: "0",
+      ref: this.initOpacitySlider }), hAsync("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR$1).round().alpha(), class: { [CSS$T.scope]: true, [CSS$T.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, role: "slider", style: {
+        top: `${adjustedOpacityScopeTop}px`,
+        left: `${adjustedOpacityScopeLeft}px`,
+      }, tabindex: "0",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.storeOpacityScope }))) : null)), noHex && noChannels ? null : (hAsync("div", { class: {
         [CSS$T.controlSection]: true,
@@ -16548,6 +16563,9 @@ class ColorPicker {
     }
     return channels;
   }
+  getAdjustedScopePosition(left, top) {
+    return [left - SCOPE_SIZE / 2, top - SCOPE_SIZE / 2];
+  }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -16988,20 +17006,126 @@ const filter = (data, value) => {
   return result;
 };
 
+const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
+const min = Math.min;
+const max = Math.max;
+const round = Math.round;
+const createCoords = v => ({
+  x: v,
+  y: v
+});
+const oppositeSideMap = {
+  left: 'right',
+  right: 'left',
+  bottom: 'top',
+  top: 'bottom'
+};
+const oppositeAlignmentMap = {
+  start: 'end',
+  end: 'start'
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === 'function' ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split('-')[0];
+}
 function getAlignment(placement) {
   return placement.split('-')[1];
 }
-
-function getLengthFromAxis(axis) {
+function getOppositeAxis(axis) {
+  return axis === 'x' ? 'y' : 'x';
+}
+function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
-
-function getSide(placement) {
-  return placement.split('-')[0];
+function getSideAxis(placement) {
+  return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
 }
-
-function getMainAxisFromPlacement(placement) {
-  return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+}
+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;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  return {
+    ...rect,
+    top: rect.y,
+    left: rect.x,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
+  };
 }
 
 function computeCoordsFromPlacement(_ref, placement, rtl) {
@@ -17009,13 +17133,14 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
     reference,
     floating
   } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === 'y';
   const commonX = reference.x + reference.width / 2 - floating.width / 2;
   const commonY = reference.y + reference.height / 2 - floating.height / 2;
-  const mainAxis = getMainAxisFromPlacement(placement);
-  const length = getLengthFromAxis(mainAxis);
-  const commonAlign = reference[length] / 2 - floating[length] / 2;
-  const side = getSide(placement);
-  const isVertical = mainAxis === 'x';
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
   let coords;
   switch (side) {
     case 'top':
@@ -17050,10 +17175,10 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   switch (getAlignment(placement)) {
     case 'start':
-      coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
       break;
     case 'end':
-      coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
       break;
   }
   return coords;
@@ -17151,39 +17276,6 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
-function evaluate(value, param) {
-  return typeof value === 'function' ? value(param) : value;
-}
-
-function expandPaddingObject(padding) {
-  return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...padding
-  };
-}
-
-function getSideObjectFromPadding(padding) {
-  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
-    top: padding,
-    right: padding,
-    bottom: padding,
-    left: padding
-  };
-}
-
-function rectToClientRect(rect) {
-  return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
-  };
-}
-
 /**
  * Resolves with an object of overflow side offsets that determine how much the
  * element is overflowing a given clipping boundary on each side.
@@ -17212,7 +17304,7 @@ async function detectOverflow(state, options) {
     altBoundary = false,
     padding = 0
   } = evaluate(options, state);
-  const paddingObject = getSideObjectFromPadding(padding);
+  const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === 'floating' ? 'reference' : 'floating';
   const element = elements[altBoundary ? altContext : elementContext];
   const clippingClientRect = rectToClientRect(await platform.getClippingRect({
@@ -17247,13 +17339,6 @@ async function detectOverflow(state, options) {
   };
 }
 
-const min$1 = Math.min;
-const max$1 = Math.max;
-
-function within(min$1$1, value, max$1$1) {
-  return max$1(min$1$1, min$1(value, max$1$1));
-}
-
 /**
  * Provides data to position an inner element of the floating element so that it
  * appears centered to the reference element.
@@ -17279,13 +17364,13 @@ const arrow = options => ({
     if (element == null) {
       return {};
     }
-    const paddingObject = getSideObjectFromPadding(padding);
+    const paddingObject = getPaddingObject(padding);
     const coords = {
       x,
       y
     };
-    const axis = getMainAxisFromPlacement(placement);
-    const length = getLengthFromAxis(axis);
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
     const arrowDimensions = await platform.getDimensions(element);
     const isYAxis = axis === 'y';
     const minProp = isYAxis ? 'top' : 'left';
@@ -17305,22 +17390,22 @@ const arrow = options => ({
     // If the padding is large enough that it causes the arrow to no longer be
     // centered, modify the padding so that it is centered.
     const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
-    const minPadding = min$1(paddingObject[minProp], largestPossiblePadding);
-    const maxPadding = min$1(paddingObject[maxProp], largestPossiblePadding);
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
 
     // Make sure the arrow doesn't overflow the floating element if the center
     // point is outside the floating element's bounds.
-    const min$1$1 = minPadding;
+    const min$1 = minPadding;
     const max = clientSize - arrowDimensions[length] - maxPadding;
     const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = within(min$1$1, center, max);
+    const offset = clamp(min$1, center, max);
 
     // If the reference is small enough that the arrow's padding causes it to
     // to point to nothing for an aligned placement, adjust the offset of the
     // floating element itself. This stops `shift()` from taking action, but can
     // be worked around by calling it again after the `arrow()` if desired.
-    const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
-    const alignmentOffset = shouldAddOffset ? center < min$1$1 ? min$1$1 - center : max - center : 0;
+    const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? min$1 - center : max - center : 0;
     return {
       [axis]: coords[axis] - alignmentOffset,
       data: {
@@ -17331,44 +17416,6 @@ const arrow = options => ({
   }
 });
 
-const sides = ['top', 'right', 'bottom', 'left'];
-const allPlacements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-start", side + "-end"), []);
-
-const oppositeSideMap = {
-  left: 'right',
-  right: 'left',
-  bottom: 'top',
-  top: 'bottom'
-};
-function getOppositePlacement(placement) {
-  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 oppositeAlignmentMap = {
-  start: 'end',
-  end: 'start'
-};
-function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
-}
-
 function getPlacementList(alignment, autoAlignment, allowedPlacements) {
   const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
   return allowedPlacementsSortedByAlignment.filter(placement => {
@@ -17403,36 +17450,33 @@ const autoPlacement = function (options) {
       const {
         crossAxis = false,
         alignment,
-        allowedPlacements = allPlacements,
+        allowedPlacements = placements,
         autoAlignment = true,
         ...detectOverflowOptions
       } = evaluate(options, state);
-      const placements = alignment !== undefined || allowedPlacements === allPlacements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
       const overflow = await detectOverflow(state, detectOverflowOptions);
       const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
-      const currentPlacement = placements[currentIndex];
+      const currentPlacement = placements$1[currentIndex];
       if (currentPlacement == null) {
         return {};
       }
-      const {
-        main,
-        cross
-      } = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
 
       // Make `computeCoords` start from the right place.
       if (placement !== currentPlacement) {
         return {
           reset: {
-            placement: placements[0]
+            placement: placements$1[0]
           }
         };
       }
-      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[main], overflow[cross]];
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
       const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
         placement: currentPlacement,
         overflows: currentOverflows
       }];
-      const nextPlacement = placements[currentIndex + 1];
+      const nextPlacement = placements$1[currentIndex + 1];
 
       // There are more placements to check.
       if (nextPlacement) {
@@ -17475,40 +17519,6 @@ const autoPlacement = function (options) {
   };
 };
 
-function getExpandedPlacements(placement) {
-  const oppositePlacement = getOppositePlacement(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;
-}
-
 /**
  * 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
@@ -17556,11 +17566,8 @@ const flip = function (options) {
         overflows.push(overflow[side]);
       }
       if (checkCrossAxis) {
-        const {
-          main,
-          cross
-        } = getAlignmentSides(placement, rects, rtl);
-        overflows.push(overflow[main], overflow[cross]);
+        const sides = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides[0]], overflow[sides[1]]);
       }
       overflowsData = [...overflowsData, {
         placement,
@@ -17688,6 +17695,8 @@ const hide = function (options) {
   };
 };
 
+// For type backwards-compatibility, the `OffsetOptions` type was also
+// Derivable.
 async function convertValueToCoords(state, options) {
   const {
     placement,
@@ -17697,7 +17706,7 @@ async function convertValueToCoords(state, options) {
   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 isVertical = getSideAxis(placement) === 'y';
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
@@ -17758,10 +17767,6 @@ const offset = function (options) {
   };
 };
 
-function getCrossAxis(axis) {
-  return axis === 'x' ? 'y' : 'x';
-}
-
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
@@ -17802,8 +17807,8 @@ const shift = function (options) {
         y
       };
       const overflow = await detectOverflow(state, detectOverflowOptions);
-      const mainAxis = getMainAxisFromPlacement(getSide(placement));
-      const crossAxis = getCrossAxis(mainAxis);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
       let crossAxisCoord = coords[crossAxis];
       if (checkMainAxis) {
@@ -17811,14 +17816,14 @@ const shift = function (options) {
         const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
         const min = mainAxisCoord + overflow[minSide];
         const max = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = within(min, mainAxisCoord, max);
+        mainAxisCoord = clamp(min, mainAxisCoord, max);
       }
       if (checkCrossAxis) {
         const minSide = crossAxis === 'y' ? 'top' : 'left';
         const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
         const min = crossAxisCoord + overflow[minSide];
         const max = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = within(min, crossAxisCoord, max);
+        crossAxisCoord = clamp(min, crossAxisCoord, max);
       }
       const limitedCoords = limiter.fn({
         ...state,
@@ -17836,18 +17841,6 @@ const shift = function (options) {
   };
 };
 
-function getWindow(node) {
-  var _node$ownerDocument;
-  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
-}
-
-function getComputedStyle$1(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-
-function isNode(value) {
-  return value instanceof getWindow(value).Node;
-}
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || '').toLowerCase();
@@ -17857,16 +17850,29 @@ function getNodeName(node) {
   // https://github.com/floating-ui/floating-ui/issues/2317
   return '#document';
 }
-
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
 function isHTMLElement(value) {
   return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
 }
-function isShadowRoot(node) {
+function isShadowRoot(value) {
   // Browsers without `ShadowRoot` support.
   if (typeof ShadowRoot === 'undefined') {
     return false;
   }
-  return node instanceof getWindow(node).ShadowRoot || node instanceof ShadowRoot;
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
 function isOverflowElement(element) {
   const {
@@ -17881,27 +17887,83 @@ function isTableElement(element) {
   return ['table', 'td', 'th'].includes(getNodeName(element));
 }
 function isContainingBlock(element) {
-  const safari = isSafari();
+  const webkit = isWebKit();
   const css = getComputedStyle$1(element);
 
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !safari && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !safari && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
+  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
 }
-function isSafari() {
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else {
+      currentNode = getParentNode(currentNode);
+    }
+  }
+  return null;
+}
+function isWebKit() {
   if (typeof CSS === 'undefined' || !CSS.supports) return false;
   return CSS.supports('-webkit-backdrop-filter', 'none');
 }
 function isLastTraversableNode(node) {
   return ['html', 'body', '#document'].includes(getNodeName(node));
 }
-
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-const createCoords = v => ({
-  x: v,
-  y: v
-});
+function getComputedStyle$1(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.pageXOffset,
+    scrollTop: element.pageYOffset
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === 'html') {
+    return node;
+  }
+  const result =
+  // Step into the shadow DOM of the parent of a slotted node.
+  node.assignedSlot ||
+  // DOM Element detected.
+  node.parentNode ||
+  // ShadowRoot detected.
+  isShadowRoot(node) && node.host ||
+  // Fallback.
+  getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
+}
 
 function getCssDimensions(element) {
   const css = getComputedStyle$1(element);
@@ -17924,10 +17986,6 @@ function getCssDimensions(element) {
   };
 }
 
-function isElement(value) {
-  return value instanceof Element || value instanceof getWindow(value).Element;
-}
-
 function unwrapElement(element) {
   return !isElement(element) ? element.contextElement : element;
 }
@@ -17963,7 +18021,7 @@ function getScale(element) {
 const noOffsets = /*#__PURE__*/createCoords(0);
 function getVisualOffsets(element) {
   const win = getWindow(element);
-  if (!isSafari() || !win.visualViewport) {
+  if (!isWebKit() || !win.visualViewport) {
     return noOffsets;
   }
   return {
@@ -18012,7 +18070,7 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== win) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle(currentIFrame);
+      const css = getComputedStyle$1(currentIFrame);
       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
@@ -18032,24 +18090,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
   });
 }
 
-function getNodeScroll(element) {
-  if (isElement(element)) {
-    return {
-      scrollLeft: element.scrollLeft,
-      scrollTop: element.scrollTop
-    };
-  }
-  return {
-    scrollLeft: element.pageXOffset,
-    scrollTop: element.pageYOffset
-  };
-}
-
-function getDocumentElement(node) {
-  var _ref;
-  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
-}
-
 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
   let {
     rect,
@@ -18117,47 +18157,6 @@ function getDocumentRect(element) {
   };
 }
 
-function getParentNode(node) {
-  if (getNodeName(node) === 'html') {
-    return node;
-  }
-  const result =
-  // Step into the shadow DOM of the parent of a slotted node.
-  node.assignedSlot ||
-  // DOM Element detected.
-  node.parentNode ||
-  // ShadowRoot detected.
-  isShadowRoot(node) && node.host ||
-  // Fallback.
-  getDocumentElement(node);
-  return isShadowRoot(result) ? result.host : result;
-}
-
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
-  }
-  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
-    return parentNode;
-  }
-  return getNearestOverflowAncestor(parentNode);
-}
-
-function getOverflowAncestors(node, list) {
-  var _node$ownerDocument;
-  if (list === void 0) {
-    list = [];
-  }
-  const scrollableAncestor = getNearestOverflowAncestor(node);
-  const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
-  const win = getWindow(scrollableAncestor);
-  if (isBody) {
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
-  }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
-}
-
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
   const html = getDocumentElement(element);
@@ -18169,7 +18168,7 @@ function getViewportRect(element, strategy) {
   if (visualViewport) {
     width = visualViewport.width;
     height = visualViewport.height;
-    const visualViewportBased = isSafari();
+    const visualViewportBased = isWebKit();
     if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
       x = visualViewport.offsetLeft;
       y = visualViewport.offsetTop;
@@ -18306,7 +18305,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
-    if (isHTMLElement(offsetParent)) {
+    if (isOffsetParentAnElement) {
       const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
       offsets.y = offsetRect.y + offsetParent.clientTop;
@@ -18331,17 +18330,6 @@ function getTrueOffsetParent(element, polyfill) {
   }
   return element.offsetParent;
 }
-function getContainingBlock(element) {
-  let currentNode = getParentNode(element);
-  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    if (isContainingBlock(currentNode)) {
-      return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
-    }
-  }
-  return null;
-}
 
 // Gets the closest ancestor positioned element. Handles some edge cases,
 // such as table ancestors and cross browser bugs.
@@ -18379,7 +18367,7 @@ const getElementRects = async function (_ref) {
 };
 
 function isRTL(element) {
-  return getComputedStyle(element).direction === 'rtl';
+  return getComputedStyle$1(element).direction === 'rtl';
 }
 
 const platform = {
@@ -34058,7 +34046,7 @@ class ShellPanel {
     const roundedWidth = Math.round(width);
     this.contentWidth =
       typeof contentWidthMax === "number" && typeof contentWidthMin === "number"
-        ? clamp(roundedWidth, contentWidthMin, contentWidthMax)
+        ? clamp$1(roundedWidth, contentWidthMin, contentWidthMax)
         : roundedWidth;
   }
   updateAriaValues() {
@@ -34077,7 +34065,7 @@ class ShellPanel {
     const roundedWidth = Math.round(height);
     this.contentHeight =
       typeof contentHeightMax === "number" && typeof contentHeightMin === "number"
-        ? clamp(roundedWidth, contentHeightMin, contentHeightMax)
+        ? clamp$1(roundedWidth, contentHeightMin, contentHeightMax)
         : roundedWidth;
   }
   updateWidths(computedStyle) {
@@ -34734,7 +34722,7 @@ class Slider {
    * @internal
    */
   clamp(value, prop) {
-    value = clamp(value, this.min, this.max);
+    value = clamp$1(value, this.min, this.max);
     // ensure that maxValue and minValue don't swap positions
     if (prop === "maxValue") {
       value = Math.max(value, this.minValue);