@carbon/web-components 2.42.0-rc.0 → 2.42.0

package/es/globals/controllers/floating-controller.d.ts

@@ -1,10 +1,11 @@
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import { ReactiveController, ReactiveElement } from 'lit';
+import { type Boundary } from '@floating-ui/dom';
 type FloatingControllerOptions = {
     target: HTMLElement;
     trigger: HTMLElement;
@@ -16,6 +17,8 @@ type FloatingControllerOptions = {
     matchWidth?: boolean;
     open: boolean;
     alignmentAxisOffset?: number;
+    autoAlignBoundary?: Boundary;
+    isTabTip?: boolean;
 };
 /**
  * Controller for positioning the menu using Floating UI.

package/es/globals/controllers/floating-controller.js

@@ -5,10 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { autoUpdate, flip, offset, arrow, size, computePosition } from '@floating-ui/dom';
+import { autoUpdate, offset, flip, size, arrow, hide, computePosition } from '@floating-ui/dom';
 
 /**
- * Copyright IBM Corp. 2024
+ * Copyright IBM Corp. 2024, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -34,8 +34,8 @@ class FloatingController {
         this.cleanup = autoUpdate(trigger, target, this.updatePlacement);
     }
     async computePlacement() {
-        var _a;
-        const { arrowElement, alignment, caret, trigger, target, styleElement, matchWidth, open, flipArguments, alignmentAxisOffset, } = this.options;
+        var _a, _b, _c;
+        const { arrowElement, alignment, caret, trigger, target, styleElement, matchWidth, open, alignmentAxisOffset, autoAlignBoundary, isTabTip, } = this.options;
         const element = styleElement !== null && styleElement !== void 0 ? styleElement : target;
         if (!element)
             return;
@@ -69,12 +69,56 @@ class FloatingController {
                 shimmedAlign = alignment;
                 break;
         }
+        const cs = getComputedStyle(element);
+        const toPx = (val) => {
+            const raw = parseFloat(val);
+            return val.trim().endsWith('rem') ? raw * 16 : raw;
+        };
+        const offsetPx = !isTabTip
+            ? ((_a = toPx(cs.getPropertyValue('--cds-popover-offset').trim())) !== null && _a !== void 0 ? _a : 10)
+            : 0;
         const middleware = [
-            flip(flipArguments),
-            offset((alignmentAxisOffset !== null && alignmentAxisOffset !== void 0 ? alignmentAxisOffset : 0) + (caret ? 10 : 0)),
-            ...(caret && arrowElement
-                ? [arrow({ element: arrowElement, padding: 15 })]
-                : []),
+            offset(caret && !isTabTip
+                ? { alignmentAxis: alignmentAxisOffset, mainAxis: offsetPx }
+                : 0),
+            flip({
+                fallbackPlacements: isTabTip
+                    ? shimmedAlign.includes('bottom')
+                        ? ['bottom-start', 'bottom-end', 'top-start', 'top-end']
+                        : ['top-start', 'top-end', 'bottom-start', 'bottom-end']
+                    : shimmedAlign.includes('bottom')
+                        ? [
+                            'bottom',
+                            'bottom-start',
+                            'bottom-end',
+                            'right',
+                            'right-start',
+                            'right-end',
+                            'left',
+                            'left-start',
+                            'left-end',
+                            'top',
+                            'top-start',
+                            'top-end',
+                        ]
+                        : [
+                            'top',
+                            'top-start',
+                            'top-end',
+                            'left',
+                            'left-start',
+                            'left-end',
+                            'right',
+                            'right-start',
+                            'right-end',
+                            'bottom',
+                            'bottom-start',
+                            'bottom-end',
+                        ],
+                fallbackStrategy: 'initialPlacement',
+                fallbackAxisSideDirection: 'start',
+                boundary: autoAlignBoundary,
+            }),
             ...(matchWidth && (shimmedAlign === 'bottom' || shimmedAlign === 'top')
                 ? [
                     size({
@@ -90,6 +134,10 @@ class FloatingController {
                         },
                     }),
                 ]),
+            ...(caret && arrowElement
+                ? [arrow({ element: arrowElement, padding: 15 })]
+                : []),
+            ...[hide()],
         ];
         if (open) {
             const { x, y, placement, middlewareData, strategy } = await computePosition(trigger, element, {
@@ -97,9 +145,13 @@ class FloatingController {
                 middleware,
                 placement: shimmedAlign,
             });
+            element.setAttribute('align', placement);
             element.style.left = `${x}px`;
             element.style.top = `${y}px`;
             element.style.position = `${strategy}`;
+            element.style.visibility = ((_b = middlewareData.hide) === null || _b === void 0 ? void 0 : _b.referenceHidden)
+                ? 'hidden'
+                : 'visible';
             if (arrowElement) {
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
                 // @ts-ignore
@@ -122,7 +174,7 @@ class FloatingController {
             // TODO: remove reference to slug in v12
             if (this.host.tagName === 'CDS-AI-LABEL' ||
                 this.host.tagName === 'CDS-SLUG') {
-                (_a = this.host) === null || _a === void 0 ? void 0 : _a.setAttribute('alignment', placement);
+                (_c = this.host) === null || _c === void 0 ? void 0 : _c.setAttribute('alignment', placement);
             }
         }
     }

package/es/globals/controllers/floating-controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-controller.js","sources":["../../../src/globals/controllers/floating-controller.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ReactiveController, ReactiveElement } from 'lit';\nimport {\n  computePosition,\n  flip,\n  size,\n  offset,\n  arrow,\n  autoUpdate,\n  Placement,\n} from '@floating-ui/dom';\n\ntype FloatingControllerOptions = {\n  target: HTMLElement;\n  trigger: HTMLElement;\n  alignment: string;\n\n  arrowElement?: HTMLElement | undefined;\n  flipArguments?: object;\n  caret?: boolean;\n\n  styleElement?: HTMLElement;\n  matchWidth?: boolean;\n  open: boolean;\n  alignmentAxisOffset?: number;\n};\n\n/**\n * Controller for positioning the menu using Floating UI.\n */\nexport default class FloatingController implements ReactiveController {\n  /**\n   * Host component\n   */\n  private host: ReactiveElement;\n  /**\n   * Floating-ui options to pass to `computePlacement()`\n   */\n  private options!: FloatingControllerOptions;\n  /**\n   * cleanup function to stop auto updates\n   */\n  private cleanup?: () => void;\n\n  /**\n   * register with host component\n   * @param host host component\n   */\n  constructor(host: ReactiveElement) {\n    this.host = host;\n    host.addController(this);\n  }\n\n  async setPlacement(options: FloatingControllerOptions = this.options) {\n    this.options = options;\n    const { trigger, target } = options;\n    this.cleanup = autoUpdate(trigger, target, this.updatePlacement);\n  }\n\n  updatePlacement = (): void => {\n    this.computePlacement();\n  };\n\n  async computePlacement() {\n    const {\n      arrowElement,\n      alignment,\n      caret,\n      trigger,\n      target,\n      styleElement,\n      matchWidth,\n      open,\n      flipArguments,\n      alignmentAxisOffset,\n    } = this.options;\n\n    const element = styleElement ?? target;\n\n    if (!element) return;\n\n    let shimmedAlign;\n    switch (alignment) {\n      case 'top-left':\n        shimmedAlign = 'top-start';\n        break;\n      case 'top-right':\n        shimmedAlign = 'top-end';\n        break;\n      case 'bottom-left':\n        shimmedAlign = 'bottom-start';\n        break;\n      case 'bottom-right':\n        shimmedAlign = 'bottom-end';\n        break;\n      case 'left-bottom':\n        shimmedAlign = 'left-end';\n        break;\n      case 'left-top':\n        shimmedAlign = 'left-start';\n        break;\n      case 'right-bottom':\n        shimmedAlign = 'right-end';\n        break;\n      case 'right-top':\n        shimmedAlign = 'right-start';\n        break;\n      default:\n        shimmedAlign = alignment;\n        break;\n    }\n\n    const middleware = [\n      flip(flipArguments),\n      offset((alignmentAxisOffset ?? 0) + (caret ? 10 : 0)),\n      ...(caret && arrowElement\n        ? [arrow({ element: arrowElement, padding: 15 })]\n        : []),\n      ...(matchWidth && (shimmedAlign === 'bottom' || shimmedAlign === 'top')\n        ? [\n            size({\n              apply({ rects, elements }) {\n                elements.floating.style.width = `${rects.reference.width}px`;\n              },\n            }),\n          ]\n        : [\n            size({\n              apply({ elements }) {\n                elements.floating.style.removeProperty('width');\n              },\n            }),\n          ]),\n    ];\n\n    if (open) {\n      const { x, y, placement, middlewareData, strategy } =\n        await computePosition(trigger, element, {\n          strategy: 'fixed',\n          middleware,\n          placement: shimmedAlign as Placement,\n        });\n\n      element.style.left = `${x}px`;\n      element.style.top = `${y}px`;\n      element.style.position = `${strategy}`;\n\n      if (arrowElement) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n        // @ts-ignore\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n        const staticSide: any = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';\n        arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';\n        arrowElement.style.right = '';\n        arrowElement.style.bottom = '';\n        arrowElement.style[staticSide] = `${-arrowElement.offsetWidth / 2}px`;\n      }\n\n      // adding specific case here where the style of the caret/arrow\n      // is dependent on the placement\n      // TODO: remove reference to slug in v12\n      if (\n        this.host.tagName === 'CDS-AI-LABEL' ||\n        this.host.tagName === 'CDS-SLUG'\n      ) {\n        this.host?.setAttribute('alignment', placement);\n      }\n    }\n  }\n\n  hostUpdated(): void {\n    if (!this.host.hasAttribute('open')) {\n      this.cleanup?.();\n      this.cleanup = undefined;\n    }\n  }\n\n  hostDisconnected(): void {\n    this.cleanup?.();\n    this.cleanup = undefined;\n  }\n}\n"],"names":[],"mappings":";;;;;;;;;AAAA;;;;;AAKG;AA4BH;;AAEG;AACW,MAAO,kBAAkB,CAAA;AAcrC;;;AAGG;AACH,IAAA,WAAA,CAAY,IAAqB,EAAA;QAWjC,IAAe,CAAA,eAAA,GAAG,MAAW;YAC3B,IAAI,CAAC,gBAAgB,EAAE;AACzB,SAAC;AAZC,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;AAChB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;;AAG1B,IAAA,MAAM,YAAY,CAAC,OAAqC,GAAA,IAAI,CAAC,OAAO,EAAA;AAClE,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,OAAO;AACnC,QAAA,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,eAAe,CAAC;;AAOlE,IAAA,MAAM,gBAAgB,GAAA;;QACpB,MAAM,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,EACP,MAAM,EACN,YAAY,EACZ,UAAU,EACV,IAAI,EACJ,aAAa,EACb,mBAAmB,GACpB,GAAG,IAAI,CAAC,OAAO;QAEhB,MAAM,OAAO,GAAG,YAAY,KAAA,IAAA,IAAZ,YAAY,KAAZ,MAAA,GAAA,YAAY,GAAI,MAAM;AAEtC,QAAA,IAAI,CAAC,OAAO;YAAE;AAEd,QAAA,IAAI,YAAY;QAChB,QAAQ,SAAS;AACf,YAAA,KAAK,UAAU;gBACb,YAAY,GAAG,WAAW;gBAC1B;AACF,YAAA,KAAK,WAAW;gBACd,YAAY,GAAG,SAAS;gBACxB;AACF,YAAA,KAAK,aAAa;gBAChB,YAAY,GAAG,cAAc;gBAC7B;AACF,YAAA,KAAK,cAAc;gBACjB,YAAY,GAAG,YAAY;gBAC3B;AACF,YAAA,KAAK,aAAa;gBAChB,YAAY,GAAG,UAAU;gBACzB;AACF,YAAA,KAAK,UAAU;gBACb,YAAY,GAAG,YAAY;gBAC3B;AACF,YAAA,KAAK,cAAc;gBACjB,YAAY,GAAG,WAAW;gBAC1B;AACF,YAAA,KAAK,WAAW;gBACd,YAAY,GAAG,aAAa;gBAC5B;AACF,YAAA;gBACE,YAAY,GAAG,SAAS;gBACxB;;AAGJ,QAAA,MAAM,UAAU,GAAG;YACjB,IAAI,CAAC,aAAa,CAAC;YACnB,MAAM,CAAC,CAAC,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,MAAA,GAAA,mBAAmB,GAAI,CAAC,KAAK,KAAK,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;YACrD,IAAI,KAAK,IAAI;AACX,kBAAE,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;kBAC9C,EAAE,CAAC;YACP,IAAI,UAAU,KAAK,YAAY,KAAK,QAAQ,IAAI,YAAY,KAAK,KAAK;AACpE,kBAAE;AACE,oBAAA,IAAI,CAAC;AACH,wBAAA,KAAK,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAA;AACvB,4BAAA,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAG,EAAA,KAAK,CAAC,SAAS,CAAC,KAAK,IAAI;yBAC7D;qBACF,CAAC;AACH;AACH,kBAAE;AACE,oBAAA,IAAI,CAAC;wBACH,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAA;4BAChB,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC;yBAChD;qBACF,CAAC;iBACH,CAAC;SACP;QAED,IAAI,IAAI,EAAE;AACR,YAAA,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,GACjD,MAAM,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE;AACtC,gBAAA,QAAQ,EAAE,OAAO;gBACjB,UAAU;AACV,gBAAA,SAAS,EAAE,YAAyB;AACrC,aAAA,CAAC;YAEJ,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,CAAG,EAAA,CAAC,IAAI;YAC7B,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,CAAG,EAAA,CAAC,IAAI;YAC5B,OAAO,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAG,EAAA,QAAQ,EAAE;YAEtC,IAAI,YAAY,EAAE;;;AAGhB,gBAAA,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,cAAc,CAAC,KAAK;;AAGrD,gBAAA,MAAM,UAAU,GAAQ;AACtB,oBAAA,GAAG,EAAE,QAAQ;AACb,oBAAA,KAAK,EAAE,MAAM;AACb,oBAAA,MAAM,EAAE,KAAK;AACb,oBAAA,IAAI,EAAE,OAAO;iBACd,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAE1B,gBAAA,YAAY,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,IAAI,IAAI,GAAG,GAAG,MAAM,CAAA,EAAA,CAAI,GAAG,EAAE;AAC7D,gBAAA,YAAY,CAAC,KAAK,CAAC,GAAG,GAAG,MAAM,IAAI,IAAI,GAAG,GAAG,MAAM,CAAA,EAAA,CAAI,GAAG,EAAE;AAC5D,gBAAA,YAAY,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE;AAC7B,gBAAA,YAAY,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE;AAC9B,gBAAA,YAAY,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,CAAA,EAAG,CAAC,YAAY,CAAC,WAAW,GAAG,CAAC,IAAI;;;;;AAMvE,YAAA,IACE,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,cAAc;AACpC,gBAAA,IAAI,CAAC,IAAI,CAAC,OAAO,KAAK,UAAU,EAChC;gBACA,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC;;;;IAKrD,WAAW,GAAA;;QACT,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AACnC,YAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;AAChB,YAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;;IAI5B,gBAAgB,GAAA;;AACd,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,CAAI;AAChB,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;AAE3B;;;;"}
+{"version":3,"file":"floating-controller.js","sources":["../../../src/globals/controllers/floating-controller.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2024, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { ReactiveController, ReactiveElement } from 'lit';\nimport {\n  computePosition,\n  flip,\n  size,\n  offset,\n  arrow,\n  autoUpdate,\n  hide,\n  Placement,\n  type Boundary,\n} from '@floating-ui/dom';\n\ntype FloatingControllerOptions = {\n  target: HTMLElement;\n  trigger: HTMLElement;\n  alignment: string;\n\n  arrowElement?: HTMLElement | undefined;\n  flipArguments?: object;\n  caret?: boolean;\n\n  styleElement?: HTMLElement;\n  matchWidth?: boolean;\n  open: boolean;\n  alignmentAxisOffset?: number;\n  autoAlignBoundary?: Boundary;\n  isTabTip?: boolean;\n};\n\n/**\n * Controller for positioning the menu using Floating UI.\n */\nexport default class FloatingController implements ReactiveController {\n  /**\n   * Host component\n   */\n  private host: ReactiveElement;\n  /**\n   * Floating-ui options to pass to `computePlacement()`\n   */\n  private options!: FloatingControllerOptions;\n  /**\n   * cleanup function to stop auto updates\n   */\n  private cleanup?: () => void;\n\n  /**\n   * register with host component\n   * @param host host component\n   */\n  constructor(host: ReactiveElement) {\n    this.host = host;\n    host.addController(this);\n  }\n\n  async setPlacement(options: FloatingControllerOptions = this.options) {\n    this.options = options;\n    const { trigger, target } = options;\n    this.cleanup = autoUpdate(trigger, target, this.updatePlacement);\n  }\n\n  updatePlacement = (): void => {\n    this.computePlacement();\n  };\n\n  async computePlacement() {\n    const {\n      arrowElement,\n      alignment,\n      caret,\n      trigger,\n      target,\n      styleElement,\n      matchWidth,\n      open,\n      alignmentAxisOffset,\n      autoAlignBoundary,\n      isTabTip,\n    } = this.options;\n\n    const element = styleElement ?? target;\n\n    if (!element) return;\n\n    let shimmedAlign;\n    switch (alignment) {\n      case 'top-left':\n        shimmedAlign = 'top-start';\n        break;\n      case 'top-right':\n        shimmedAlign = 'top-end';\n        break;\n      case 'bottom-left':\n        shimmedAlign = 'bottom-start';\n        break;\n      case 'bottom-right':\n        shimmedAlign = 'bottom-end';\n        break;\n      case 'left-bottom':\n        shimmedAlign = 'left-end';\n        break;\n      case 'left-top':\n        shimmedAlign = 'left-start';\n        break;\n      case 'right-bottom':\n        shimmedAlign = 'right-end';\n        break;\n      case 'right-top':\n        shimmedAlign = 'right-start';\n        break;\n      default:\n        shimmedAlign = alignment;\n        break;\n    }\n    const cs = getComputedStyle(element);\n    const toPx = (val: string) => {\n      const raw = parseFloat(val);\n      return val.trim().endsWith('rem') ? raw * 16 : raw;\n    };\n    const offsetPx = !isTabTip\n      ? (toPx(cs.getPropertyValue('--cds-popover-offset').trim()) ?? 10)\n      : 0;\n\n    const middleware = [\n      offset(\n        caret && !isTabTip\n          ? { alignmentAxis: alignmentAxisOffset, mainAxis: offsetPx }\n          : 0\n      ),\n      flip({\n        fallbackPlacements: isTabTip\n          ? shimmedAlign.includes('bottom')\n            ? ['bottom-start', 'bottom-end', 'top-start', 'top-end']\n            : ['top-start', 'top-end', 'bottom-start', 'bottom-end']\n          : shimmedAlign.includes('bottom')\n            ? [\n                'bottom',\n                'bottom-start',\n                'bottom-end',\n                'right',\n                'right-start',\n                'right-end',\n                'left',\n                'left-start',\n                'left-end',\n                'top',\n                'top-start',\n                'top-end',\n              ]\n            : [\n                'top',\n                'top-start',\n                'top-end',\n                'left',\n                'left-start',\n                'left-end',\n                'right',\n                'right-start',\n                'right-end',\n                'bottom',\n                'bottom-start',\n                'bottom-end',\n              ],\n\n        fallbackStrategy: 'initialPlacement',\n        fallbackAxisSideDirection: 'start',\n        boundary: autoAlignBoundary,\n      }),\n      ...(matchWidth && (shimmedAlign === 'bottom' || shimmedAlign === 'top')\n        ? [\n            size({\n              apply({ rects, elements }) {\n                elements.floating.style.width = `${rects.reference.width}px`;\n              },\n            }),\n          ]\n        : [\n            size({\n              apply({ elements }) {\n                elements.floating.style.removeProperty('width');\n              },\n            }),\n          ]),\n\n      ...(caret && arrowElement\n        ? [arrow({ element: arrowElement, padding: 15 })]\n        : []),\n\n      ...[hide()],\n    ];\n\n    if (open) {\n      const { x, y, placement, middlewareData, strategy } =\n        await computePosition(trigger, element, {\n          strategy: 'fixed',\n          middleware,\n          placement: shimmedAlign as Placement,\n        });\n\n      element.setAttribute('align', placement);\n\n      element.style.left = `${x}px`;\n      element.style.top = `${y}px`;\n      element.style.position = `${strategy}`;\n\n      element.style.visibility = middlewareData.hide?.referenceHidden\n        ? 'hidden'\n        : 'visible';\n\n      if (arrowElement) {\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n        // @ts-ignore\n        const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452\n        const staticSide: any = {\n          top: 'bottom',\n          right: 'left',\n          bottom: 'top',\n          left: 'right',\n        }[placement.split('-')[0]];\n\n        arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';\n        arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';\n        arrowElement.style.right = '';\n        arrowElement.style.bottom = '';\n        arrowElement.style[staticSide] = `${-arrowElement.offsetWidth / 2}px`;\n      }\n\n      // adding specific case here where the style of the caret/arrow\n      // is dependent on the placement\n      // TODO: remove reference to slug in v12\n      if (\n        this.host.tagName === 'CDS-AI-LABEL' ||\n        this.host.tagName === 'CDS-SLUG'\n      ) {\n        this.host?.setAttribute('alignment', placement);\n      }\n    }\n  }\n\n  hostUpdated(): void {\n    if (!this.host.hasAttribute('open')) {\n      this.cleanup?.();\n      this.cleanup = undefined;\n    }\n  }\n\n  hostDisconnected(): void {\n    this.cleanup?.();\n    this.cleanup = undefined;\n  }\n}\n"],"names":[],"mappings":"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"}