@carbon/web-components 2.4.0-rc.0 → 2.4.0-rc.1

package/es/components/tooltip/tooltip.js

@@ -6,7 +6,7 @@ let _ = t => t,
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -46,6 +46,16 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
       value() {
         return 'top';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "autoalign",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -195,6 +205,10 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
        * Specify how the trigger should align with the tooltip
        */
 
+      /**
+       * Specify whether a auto align functionality should be applied
+       */
+
       /**
        * `true` if this tooltip is in a data table row
        */
@@ -288,7 +302,7 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
         if (changedProperties.has('open')) {
           this.open ? toolTipContent === null || toolTipContent === void 0 ? void 0 : toolTipContent.setAttribute('open', '') : toolTipContent === null || toolTipContent === void 0 ? void 0 : toolTipContent.removeAttribute('open');
         }
-        ['align', 'caret'].forEach(name => {
+        ['align', 'caret', 'autoalign'].forEach(name => {
           if (changedProperties.has(name)) {
             const {
               [name]: value
@@ -297,6 +311,7 @@ let CDSTooltip = _decorate([customElement(`${prefix}-tooltip`)], function (_init
           }
         });
         (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 || (_this$shadowRoot = _this$shadowRoot.querySelector(`.${prefix}--popover-container`)) === null || _this$shadowRoot === void 0 || _this$shadowRoot.classList.add(`${prefix}--tooltip`);
+        _get(_getPrototypeOf(CDSTooltip.prototype), "updated", this).call(this, changedProperties);
       }
 
       /**

package/es/components/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["css","property","prefix","HostListener","HostListenerMixin","CDSPopover","styles","carbonElement","customElement","CDSTooltip","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","reflect","type","String","key","value","Boolean","attribute","Number","window","clearTimeout","timeoutId","setTimeout","open","updateComplete","_this$querySelector","selectorTooltipContent","querySelector","focus","enterDelayMs","leaveDelayMs","closeOnActivation","_handleHoverOut","event","_handleSlotChange","target","component","assignedNodes","filter","node","nodeType","Node","TEXT_NODE","textContent","trim","addEventListener","_handleHover","requestUpdate","connectedCallback","hasAttribute","setAttribute","shadowRoot","attachShadow","mode","_get","_getPrototypeOf","prototype","call","updated","changedProperties","_this$shadowRoot","toolTipContent","has","defaultOpen","removeAttribute","forEach","name","classList","add","static","_t","_"],"sources":["components/tooltip/tooltip.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\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 { css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss';\nimport CDSTooltipContent from './tooltip-content';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * `true` if this tooltip is in a data table row\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'data-table' })\n  dataTable = false;\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Specify the size of the tooltip\n   */\n  @property({ reflect: true })\n  size = false;\n\n  /**\n   * Specify the timeout reference for the tooltip\n   */\n  @property({ reflect: true })\n  timeoutId = 0;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, attribute: 'toolbar-action', type: Boolean })\n  toolbarAction = false;\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = async () => {\n    window.clearTimeout(this.timeoutId);\n    this.timeoutId = window.setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    window.clearTimeout(this.timeoutId);\n    this.timeoutId = window.setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = async () => {\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    if (!component[0]) {\n      return;\n    }\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseover',\n      this._handleHover\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseleave',\n      this._handleHoverOut\n    );\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      this.open\n        ? toolTipContent?.setAttribute('open', '')\n        : toolTipContent?.removeAttribute('open');\n    }\n\n    ['align', 'caret'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  } // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTooltip;\n"],"mappings":"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"}
+{"version":3,"file":"tooltip.js","names":["css","property","prefix","HostListener","HostListenerMixin","CDSPopover","styles","carbonElement","customElement","CDSTooltip","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","reflect","type","String","key","value","Boolean","attribute","Number","window","clearTimeout","timeoutId","setTimeout","open","updateComplete","_this$querySelector","selectorTooltipContent","querySelector","focus","enterDelayMs","leaveDelayMs","closeOnActivation","_handleHoverOut","event","_handleSlotChange","target","component","assignedNodes","filter","node","nodeType","Node","TEXT_NODE","textContent","trim","addEventListener","_handleHover","requestUpdate","connectedCallback","hasAttribute","setAttribute","shadowRoot","attachShadow","mode","_get","_getPrototypeOf","prototype","call","updated","changedProperties","_this$shadowRoot","toolTipContent","has","defaultOpen","removeAttribute","forEach","name","classList","add","static","_t","_"],"sources":["components/tooltip/tooltip.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 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 { css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport CDSPopover from '../popover/popover';\nimport '../popover/popover-content';\nimport styles from './tooltip.scss';\nimport CDSTooltipContent from './tooltip-content';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Trigger button of tooltip.\n *\n * @element cds-tooltip\n */\n@customElement(`${prefix}-tooltip`)\nclass CDSTooltip extends HostListenerMixin(CDSPopover) {\n  /**\n   * Specify how the trigger should align with the tooltip\n   */\n  @property({ reflect: true, type: String })\n  align = 'top';\n\n  /**\n   * Specify whether a auto align functionality should be applied\n   */\n  @property({ type: Boolean, reflect: true })\n  autoalign = false;\n\n  /**\n   * `true` if this tooltip is in a data table row\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'data-table' })\n  dataTable = false;\n\n  /**\n   * Specify whether the tooltip should be closed when clicked\n   */\n  @property({ reflect: true, type: Boolean })\n  closeOnActivation = false;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, type: Boolean })\n  defaultOpen = false;\n\n  /**\n   * Specify the duration in milliseconds to delay before displaying the tooltip\n   */\n  @property({ attribute: 'enter-delay-ms', type: Number })\n  enterDelayMs = 100;\n\n  /**\n   * Specify the duration in milliseconds to delay before hiding the tooltip\n   */\n  @property({ attribute: 'leave-delay-ms', type: Number })\n  leaveDelayMs = 300;\n\n  /**\n   * Specify the size of the tooltip\n   */\n  @property({ reflect: true })\n  size = false;\n\n  /**\n   * Specify the timeout reference for the tooltip\n   */\n  @property({ reflect: true })\n  timeoutId = 0;\n\n  /**\n   * Specify whether the tooltip should be open when it first renders\n   */\n  @property({ reflect: true, attribute: 'toolbar-action', type: Boolean })\n  toolbarAction = false;\n\n  /**\n   * Handles `mouseover` event on this element.\n   */\n  private _handleHover = async () => {\n    window.clearTimeout(this.timeoutId);\n    this.timeoutId = window.setTimeout(async () => {\n      this.open = true;\n      const { open, updateComplete } = this;\n      if (open) {\n        await updateComplete;\n        const { selectorTooltipContent } = this\n          .constructor as typeof CDSTooltip;\n        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();\n      }\n    }, this.enterDelayMs);\n  };\n\n  /**\n   * Handles `mouseleave` event on this element.\n   */\n  private _handleHoverOut = async () => {\n    window.clearTimeout(this.timeoutId);\n    this.timeoutId = window.setTimeout(async () => {\n      const { open } = this;\n      if (open) {\n        this.open = false;\n      }\n    }, this.leaveDelayMs);\n  };\n\n  /**\n   * Handles `click` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = async () => {\n    if (this.closeOnActivation) {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = async (event) => {\n    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {\n      this._handleHoverOut();\n    }\n  };\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const component = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n    if (!component[0]) {\n      return;\n    }\n    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);\n    (component[0] as HTMLElement).addEventListener(\n      'focusout',\n      this._handleHoverOut\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseover',\n      this._handleHover\n    );\n    (component[0] as HTMLElement).addEventListener(\n      'mouseleave',\n      this._handleHoverOut\n    );\n    this.requestUpdate();\n  }\n\n  connectedCallback() {\n    if (!this.hasAttribute('highContrast')) {\n      this.setAttribute('highContrast', '');\n    }\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n    }\n    super.connectedCallback();\n  }\n\n  updated(changedProperties) {\n    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;\n    const toolTipContent = this.querySelector(selectorTooltipContent);\n\n    if (changedProperties.has('defaultOpen')) {\n      this.open = this.defaultOpen;\n    }\n\n    if (changedProperties.has('open')) {\n      this.open\n        ? toolTipContent?.setAttribute('open', '')\n        : toolTipContent?.removeAttribute('open');\n    }\n\n    ['align', 'caret', 'autoalign'].forEach((name) => {\n      if (changedProperties.has(name)) {\n        const { [name as keyof CDSTooltip]: value } = this;\n        (toolTipContent as CDSTooltipContent)[name] = value;\n      }\n    });\n\n    this.shadowRoot\n      ?.querySelector(`.${prefix}--popover-container`)\n      ?.classList.add(`${prefix}--tooltip`);\n\n    super.updated(changedProperties);\n  }\n\n  /**\n   * A selector that will return the CDSTooltipContent.\n   */\n  static get selectorTooltipContent() {\n    return `${prefix}-tooltip-content`;\n  }\n\n  static get styles() {\n    return css`\n      ${super.styles}${styles}\n    `;\n  } // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTooltip;\n"],"mappings":"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"}

package/es/globals/internal/floating-ui.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Utilitize @floating-ui/dom library to compute positioning
+ * of tooltip and caret
+ *
+ * @param object
+ * @param {node} object.button trigger element
+ * @param {node} object.tooltip tooltip / popover element
+ * @param {node} object.arrowElement caret element
+ * @param {boolean} object.caret if caret is visible
+ * @param {string} object.alignment alignment to display tooltip
+ *
+ * @returns {string} placement final placement of the tooltip
+ */
+export declare function floatingUIPosition({ button, tooltip, arrowElement, caret, alignment, }: {
+    button: any;
+    tooltip: any;
+    arrowElement: any;
+    caret?: boolean | undefined;
+    alignment?: string | undefined;
+}): Promise<"left" | "right" | "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "left-end" | "left-start" | "right-end" | "right-start">;
+
+//# sourceMappingURL=floating-ui.d.ts.map

package/es/globals/internal/floating-ui.js

@@ -0,0 +1,102 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2024
+ *
+ * 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 { computePosition, flip, offset, arrow } from '@floating-ui/dom';
+
+/**
+ * Utilitize @floating-ui/dom library to compute positioning
+ * of tooltip and caret
+ *
+ * @param object
+ * @param {node} object.button trigger element
+ * @param {node} object.tooltip tooltip / popover element
+ * @param {node} object.arrowElement caret element
+ * @param {boolean} object.caret if caret is visible
+ * @param {string} object.alignment alignment to display tooltip
+ *
+ * @returns {string} placement final placement of the tooltip
+ */
+export function floatingUIPosition({
+  button,
+  tooltip,
+  arrowElement,
+  caret = false,
+  alignment = 'bottom'
+}) {
+  let shimmedAlign;
+  switch (alignment) {
+    case 'top-left':
+      shimmedAlign = 'top-start';
+      break;
+    case 'top-right':
+      shimmedAlign = 'top-end';
+      break;
+    case 'bottom-left':
+      shimmedAlign = 'bottom-start';
+      break;
+    case 'bottom-right':
+      shimmedAlign = 'bottom-end';
+      break;
+    case 'left-bottom':
+      shimmedAlign = 'left-end';
+      break;
+    case 'left-top':
+      shimmedAlign = 'left-start';
+      break;
+    case 'right-bottom':
+      shimmedAlign = 'right-end';
+      break;
+    case 'right-top':
+      shimmedAlign = 'right-start';
+      break;
+    default:
+      shimmedAlign = alignment;
+      break;
+  }
+  return computePosition(button, tooltip, {
+    strategy: 'absolute',
+    middleware: [flip({
+      fallbackAxisSideDirection: 'start'
+    }), offset(caret ? 10 : 0), arrow({
+      element: arrowElement,
+      padding: 15
+    })],
+    placement: shimmedAlign
+  }).then(({
+    x,
+    y,
+    placement,
+    strategy,
+    middlewareData
+  }) => {
+    tooltip.style.left = `${x}px`;
+    tooltip.style.top = `${y}px`;
+    tooltip.style.position = `${strategy}`;
+    if (arrowElement) {
+      // @ts-ignore
+      const {
+        x: arrowX,
+        y: arrowY
+      } = middlewareData.arrow;
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[placement.split('-')[0]];
+      arrowElement.style.left = arrowX != null ? `${arrowX}px` : '';
+      arrowElement.style.top = arrowY != null ? `${arrowY}px` : '';
+      arrowElement.style.right = '';
+      arrowElement.style.bottom = '';
+      arrowElement.style[staticSide] = `${-arrowElement.offsetWidth / 2}px`;
+    }
+    return placement;
+  });
+}
+//# sourceMappingURL=floating-ui.js.map

package/es/globals/internal/floating-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"floating-ui.js","names":["computePosition","flip","offset","arrow","floatingUIPosition","button","tooltip","arrowElement","caret","alignment","shimmedAlign","strategy","middleware","fallbackAxisSideDirection","element","padding","placement","then","x","y","middlewareData","style","left","top","position","arrowX","arrowY","staticSide","right","bottom","split","offsetWidth"],"sources":["globals/internal/floating-ui.ts"],"sourcesContent":["/**\n * @license\n *\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 {\n  computePosition,\n  flip,\n  offset,\n  arrow,\n  Placement,\n} from '@floating-ui/dom';\n\n/**\n * Utilitize @floating-ui/dom library to compute positioning\n * of tooltip and caret\n *\n * @param object\n * @param {node} object.button trigger element\n * @param {node} object.tooltip tooltip / popover element\n * @param {node} object.arrowElement caret element\n * @param {boolean} object.caret if caret is visible\n * @param {string} object.alignment alignment to display tooltip\n *\n * @returns {string} placement final placement of the tooltip\n */\nexport function floatingUIPosition({\n  button,\n  tooltip,\n  arrowElement,\n  caret = false,\n  alignment = 'bottom',\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  return computePosition(button, tooltip, {\n    strategy: 'absolute',\n    middleware: [\n      flip({ fallbackAxisSideDirection: 'start' }),\n      offset(caret ? 10 : 0),\n      arrow({ element: arrowElement, padding: 15 }),\n    ],\n    placement: shimmedAlign as Placement,\n  }).then(({ x, y, placement, strategy, middlewareData }) => {\n    tooltip.style.left = `${x}px`;\n    tooltip.style.top = `${y}px`;\n    tooltip.style.position = `${strategy}`;\n\n    if (arrowElement) {\n      // @ts-ignore\n      const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\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    return placement;\n  });\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,eAAe,EACfC,IAAI,EACJC,MAAM,EACNC,KAAK,QAEA,kBAAkB;;AAEzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,kBAAkBA,CAAC;EACjCC,MAAM;EACNC,OAAO;EACPC,YAAY;EACZC,KAAK,GAAG,KAAK;EACbC,SAAS,GAAG;AACd,CAAC,EAAE;EACD,IAAIC,YAAY;EAChB,QAAQD,SAAS;IACf,KAAK,UAAU;MACbC,YAAY,GAAG,WAAW;MAC1B;IACF,KAAK,WAAW;MACdA,YAAY,GAAG,SAAS;MACxB;IACF,KAAK,aAAa;MAChBA,YAAY,GAAG,cAAc;MAC7B;IACF,KAAK,cAAc;MACjBA,YAAY,GAAG,YAAY;MAC3B;IACF,KAAK,aAAa;MAChBA,YAAY,GAAG,UAAU;MACzB;IACF,KAAK,UAAU;MACbA,YAAY,GAAG,YAAY;MAC3B;IACF,KAAK,cAAc;MACjBA,YAAY,GAAG,WAAW;MAC1B;IACF,KAAK,WAAW;MACdA,YAAY,GAAG,aAAa;MAC5B;IACF;MACEA,YAAY,GAAGD,SAAS;MACxB;EACJ;EAEA,OAAOT,eAAe,CAACK,MAAM,EAAEC,OAAO,EAAE;IACtCK,QAAQ,EAAE,UAAU;IACpBC,UAAU,EAAE,CACVX,IAAI,CAAC;MAAEY,yBAAyB,EAAE;IAAQ,CAAC,CAAC,EAC5CX,MAAM,CAACM,KAAK,GAAG,EAAE,GAAG,CAAC,CAAC,EACtBL,KAAK,CAAC;MAAEW,OAAO,EAAEP,YAAY;MAAEQ,OAAO,EAAE;IAAG,CAAC,CAAC,CAC9C;IACDC,SAAS,EAAEN;EACb,CAAC,CAAC,CAACO,IAAI,CAAC,CAAC;IAAEC,CAAC;IAAEC,CAAC;IAAEH,SAAS;IAAEL,QAAQ;IAAES;EAAe,CAAC,KAAK;IACzDd,OAAO,CAACe,KAAK,CAACC,IAAI,GAAI,GAAEJ,CAAE,IAAG;IAC7BZ,OAAO,CAACe,KAAK,CAACE,GAAG,GAAI,GAAEJ,CAAE,IAAG;IAC5Bb,OAAO,CAACe,KAAK,CAACG,QAAQ,GAAI,GAAEb,QAAS,EAAC;IAEtC,IAAIJ,YAAY,EAAE;MAChB;MACA,MAAM;QAAEW,CAAC,EAAEO,MAAM;QAAEN,CAAC,EAAEO;MAAO,CAAC,GAAGN,cAAc,CAACjB,KAAK;MAErD,MAAMwB,UAAe,GAAG;QACtBJ,GAAG,EAAE,QAAQ;QACbK,KAAK,EAAE,MAAM;QACbC,MAAM,EAAE,KAAK;QACbP,IAAI,EAAE;MACR,CAAC,CAACN,SAAS,CAACc,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;MAE1BvB,YAAY,CAACc,KAAK,CAACC,IAAI,GAAGG,MAAM,IAAI,IAAI,GAAI,GAAEA,MAAO,IAAG,GAAG,EAAE;MAC7DlB,YAAY,CAACc,KAAK,CAACE,GAAG,GAAGG,MAAM,IAAI,IAAI,GAAI,GAAEA,MAAO,IAAG,GAAG,EAAE;MAC5DnB,YAAY,CAACc,KAAK,CAACO,KAAK,GAAG,EAAE;MAC7BrB,YAAY,CAACc,KAAK,CAACQ,MAAM,GAAG,EAAE;MAC9BtB,YAAY,CAACc,KAAK,CAACM,UAAU,CAAC,GAAI,GAAE,CAACpB,YAAY,CAACwB,WAAW,GAAG,CAAE,IAAG;IACvE;IACA,OAAOf,SAAS;EAClB,CAAC,CAAC;AACJ"}

package/lib/components/popover/defs.js

@@ -7,7 +7,7 @@ exports.POPOVER_ALIGNMENT = void 0;
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -20,14 +20,22 @@ let POPOVER_ALIGNMENT = exports.POPOVER_ALIGNMENT = void 0;
   POPOVER_ALIGNMENT["TOP"] = "top";
   POPOVER_ALIGNMENT["TOP_LEFT"] = "top-left";
   POPOVER_ALIGNMENT["TOP_RIGHT"] = "top-right";
+  POPOVER_ALIGNMENT["TOP_START"] = "top-start";
+  POPOVER_ALIGNMENT["TOP_END"] = "top-end";
   POPOVER_ALIGNMENT["BOTTOM"] = "bottom";
   POPOVER_ALIGNMENT["BOTTOM_LEFT"] = "bottom-left";
   POPOVER_ALIGNMENT["BOTTOM_RIGHT"] = "bottom-right";
+  POPOVER_ALIGNMENT["BOTTOM_START"] = "bottom-start";
+  POPOVER_ALIGNMENT["BOTTOM_END"] = "bottom-end";
   POPOVER_ALIGNMENT["LEFT"] = "left";
   POPOVER_ALIGNMENT["LEFT_BOTTOM"] = "left-bottom";
   POPOVER_ALIGNMENT["LEFT_TOP"] = "left-top";
+  POPOVER_ALIGNMENT["LEFT_START"] = "left-start";
+  POPOVER_ALIGNMENT["LEFT_END"] = "left-end";
   POPOVER_ALIGNMENT["RIGHT"] = "right";
   POPOVER_ALIGNMENT["RIGHT_BOTTOM"] = "right-bottom";
   POPOVER_ALIGNMENT["RIGHT_TOP"] = "right-top";
+  POPOVER_ALIGNMENT["RIGHT_START"] = "right-start";
+  POPOVER_ALIGNMENT["RIGHT_END"] = "right-end";
 })(POPOVER_ALIGNMENT || (exports.POPOVER_ALIGNMENT = POPOVER_ALIGNMENT = {}));
 //# sourceMappingURL=defs.js.map

package/lib/components/popover/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":["POPOVER_ALIGNMENT","exports"],"sources":["components/popover/defs.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2023\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\n/**\n * The alignment choices of popover.\n */\nexport enum POPOVER_ALIGNMENT {\n  /**\n   * Align the top position for the popover content.\n   */\n  TOP = 'top',\n\n  /**\n   * Align the top-left position for the popover content.\n   */\n  TOP_LEFT = 'top-left',\n\n  /**\n   * Align the top right position for the popover content.\n   */\n  TOP_RIGHT = 'top-right',\n\n  /**\n   * Align the bottom position for the popover content.\n   */\n  BOTTOM = 'bottom',\n\n  /**\n   * Align the bottom left position for the popover content.\n   */\n  BOTTOM_LEFT = 'bottom-left',\n\n  /**\n   * Align the bottom right position for the popover content.\n   */\n  BOTTOM_RIGHT = 'bottom-right',\n\n  /**\n   * Align the left position for the popover content.\n   */\n  LEFT = 'left',\n\n  /**\n   * Align the left bottom position for the popover content.\n   */\n  LEFT_BOTTOM = 'left-bottom',\n\n  /**\n   * Align the left top position for the popover content.\n   */\n  LEFT_TOP = 'left-top',\n\n  /**\n   * Align the right position for the popover content.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Align the right bottom position for the popover content.\n   */\n  RIGHT_BOTTOM = 'right-bottom',\n\n  /**\n   * Align the right top position for the popover content.\n   */\n  RIGHT_TOP = 'right-top',\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAFA,IAGYA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA;AAAA,WAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;AAAA,GAAjBA,iBAAiB,KAAAC,OAAA,CAAAD,iBAAA,GAAjBA,iBAAiB"}
+{"version":3,"file":"defs.js","names":["POPOVER_ALIGNMENT","exports"],"sources":["components/popover/defs.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 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/**\n * The alignment choices of popover.\n */\nexport enum POPOVER_ALIGNMENT {\n  /**\n   * Align the top position for the popover content.\n   */\n  TOP = 'top',\n\n  /**\n   * Align the top-left position for the popover content.\n   *\n   * @deprecated\n   */\n  TOP_LEFT = 'top-left',\n\n  /**\n   * Align the top right position for the popover content.\n   *\n   * @deprecated\n   */\n  TOP_RIGHT = 'top-right',\n\n  /**\n   * Align the top-start position for the popover content.\n   */\n  TOP_START = 'top-start',\n\n  /**\n   * Align the top end position for the popover content.\n   */\n  TOP_END = 'top-end',\n\n  /**\n   * Align the bottom position for the popover content.\n   */\n  BOTTOM = 'bottom',\n\n  /**\n   * Align the bottom left position for the popover content.\n   *\n   * @deprecated\n   */\n  BOTTOM_LEFT = 'bottom-left',\n\n  /**\n   * Align the bottom right position for the popover content.\n   *\n   * @deprecated\n   */\n  BOTTOM_RIGHT = 'bottom-right',\n\n  /**\n   * Align the bottom start position for the popover content.\n   */\n  BOTTOM_START = 'bottom-start',\n\n  /**\n   * Align the bottom end position for the popover content.\n   */\n  BOTTOM_END = 'bottom-end',\n\n  /**\n   * Align the left position for the popover content.\n   */\n  LEFT = 'left',\n\n  /**\n   * Align the left bottom position for the popover content.\n   *\n   * @deprecated\n   */\n  LEFT_BOTTOM = 'left-bottom',\n\n  /**\n   * Align the left top position for the popover content.\n   *\n   * @deprecated\n   */\n  LEFT_TOP = 'left-top',\n\n  /**\n   * Align the left start position for the popover content.\n   */\n  LEFT_START = 'left-start',\n\n  /**\n   * Align the left end position for the popover content.\n   */\n  LEFT_END = 'left-end',\n\n  /**\n   * Align the right position for the popover content.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Align the right bottom position for the popover content.\n   *\n   * @deprecated\n   */\n  RIGHT_BOTTOM = 'right-bottom',\n\n  /**\n   * Align the right top position for the popover content.\n   *\n   * @deprecated\n   */\n  RIGHT_TOP = 'right-top',\n\n  /**\n   * Align the right start position for the popover content.\n   */\n  RIGHT_START = 'right-start',\n\n  /**\n   * Align the right end position for the popover content.\n   */\n  RIGHT_END = 'right-end',\n}\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAFA,IAGYA,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA;AAAA,WAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;EAAjBA,iBAAiB;AAAA,GAAjBA,iBAAiB,KAAAC,OAAA,CAAAD,iBAAA,GAAjBA,iBAAiB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.4.0-rc.0",
+  "version": "2.4.0-rc.1",
   "publishConfig": {
     "access": "public"
   },
@@ -70,6 +70,7 @@
     "@babel/runtime": "^7.16.3",
     "@carbon/ibm-products-styles": "^2.24.0",
     "@carbon/styles": "1.51.0",
+    "@floating-ui/dom": "^1.6.3",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"
@@ -207,5 +208,5 @@
     "zone.js": "~0.14.0"
   },
   "typings": "es/index.d.ts",
-  "gitHead": "d1fdbf6806f2c9e78ea5ddfca97f130be4a0490b"
+  "gitHead": "a9c5c74c4f876b05a43dec2efffd688d64bf236d"
 }

package/scss/components/data-table/_table-core.scss

@@ -72,7 +72,6 @@
 }
 
 :host(#{$prefix}-table-header-cell[sort-direction]) {
-  position: relative;
   block-size: $spacing-09;
 
   .#{$prefix}--table-sort__flex {

package/scss/components/popover/popover.scss

@@ -92,10 +92,10 @@ $popover-caret-height: custom-property.get-var(
   );
 }
 
-:host(#{$prefix}-tooltip-content[align^='bottom']),
-:host(#{$prefix}-popover-content[align^='bottom']),
-:host(#{$prefix}-toggletip[alignment^='bottom']),
-:host(#{$prefix}-slug[alignment^='bottom']) {
+:host(#{$prefix}-tooltip-content[align^='bottom']:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='bottom']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='bottom']:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='bottom']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-height;
     clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
@@ -106,10 +106,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='bottom']),
-:host(#{$prefix}-popover-content[align='bottom']),
-:host(#{$prefix}-toggletip[alignment='bottom']),
-:host(#{$prefix}-slug[alignment='bottom']) {
+:host(#{$prefix}-tooltip-content[align='bottom']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='bottom']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='bottom']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='bottom']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
     inset-inline-start: 50%;
@@ -117,10 +117,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='bottom-left']),
-:host(#{$prefix}-popover-content[align='bottom-left']),
-:host(#{$prefix}-toggletip[alignment='bottom-left']),
-:host(#{$prefix}-slug[alignment='bottom-left']) {
+:host(#{$prefix}-tooltip-content[align='bottom-left']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='bottom-left']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='bottom-left']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='bottom-left']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
     inset-inline-start: 0;
@@ -131,10 +131,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='bottom-right']),
-:host(#{$prefix}-popover-content[align='bottom-right']),
-:host(#{$prefix}-toggletip[alignment='bottom-right']),
-:host(#{$prefix}-slug[alignment='bottom-right']) {
+:host(#{$prefix}-tooltip-content[align='bottom-right']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='bottom-right']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='bottom-right']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='bottom-right']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 0;
     inset-inline-end: 0;
@@ -142,10 +142,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align^='left']),
-:host(#{$prefix}-popover-content[align^='left']),
-:host(#{$prefix}-toggletip[alignment^='left']),
-:host(#{$prefix}-slug[alignment^='left']) {
+:host(#{$prefix}-tooltip-content[align^='left']:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='left']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='left']:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='left']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-width;
     clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
@@ -156,10 +156,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='left']),
-:host(#{$prefix}-popover-content[align='left']),
-:host(#{$prefix}-toggletip[alignment='left']),
-:host(#{$prefix}-slug[alignment='left']) {
+:host(#{$prefix}-tooltip-content[align='left']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='left']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='left']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='left']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 50%;
     inset-inline-end: 100%;
@@ -169,10 +169,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='left-bottom']),
-:host(#{$prefix}-popover-content[align='left-bottom']),
-:host(#{$prefix}-toggletip[alignment='left-bottom']),
-:host(#{$prefix}-slug[alignment='left-bottom']) {
+:host(#{$prefix}-tooltip-content[align='left-bottom']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='left-bottom']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='left-bottom']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='left-bottom']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 50%;
     inset-inline-end: 100%;
@@ -185,10 +185,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='left-top']),
-:host(#{$prefix}-popover-content[align='left-top']),
-:host(#{$prefix}-toggletip[alignment='left-top']),
-:host(#{$prefix}-slug[alignment='left-top']) {
+:host(#{$prefix}-tooltip-content[align='left-top']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='left-top']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='left-top']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='left-top']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 50%;
     inset-inline-end: 100%;
@@ -201,10 +201,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align^='right']),
-:host(#{$prefix}-popover-content[align^='right']),
-:host(#{$prefix}-toggletip[alignment^='right']),
-:host(#{$prefix}-slug[alignment^='right']) {
+:host(#{$prefix}-tooltip-content[align^='right']:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='right']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='right']:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='right']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-width;
     clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
@@ -215,10 +215,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='right']),
-:host(#{$prefix}-popover-content[align='right']),
-:host(#{$prefix}-toggletip[alignment='right']),
-:host(#{$prefix}-slug[alignment='right']) {
+:host(#{$prefix}-tooltip-content[align='right']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='right']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='right']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='right']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 50%;
     inset-inline-start: 100%;
@@ -228,10 +228,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='right-bottom']),
-:host(#{$prefix}-popover-content[align='right-bottom']),
-:host(#{$prefix}-toggletip[alignment='right-bottom']),
-:host(#{$prefix}-slug[alignment='right-bottom']) {
+:host(#{$prefix}-tooltip-content[align='right-bottom']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='right-bottom']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='right-bottom']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='right-bottom']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-end: 50%;
     inset-inline-start: 100%;
@@ -239,10 +239,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='right-top']),
-:host(#{$prefix}-popover-content[align='right-top']),
-:host(#{$prefix}-toggletip[alignment='right-top']),
-:host(#{$prefix}-slug[alignment='right-top']) {
+:host(#{$prefix}-tooltip-content[align='right-top']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='right-top']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='right-top']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='right-top']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 50%;
     inset-inline-start: 100%;
@@ -253,10 +253,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align^='top']),
-:host(#{$prefix}-popover-content[align^='top']),
-:host(#{$prefix}-toggletip[alignment^='top']),
-:host(#{$prefix}-slug[alignment^='top']) {
+:host(#{$prefix}-tooltip-content[align^='top']:not([autoalign])),
+:host(#{$prefix}-popover-content[align^='top']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment^='top']:not([autoalign])),
+:host(#{$prefix}-slug[alignment^='top']:not([autoalign])) {
   .#{$prefix}--popover-caret {
     block-size: $popover-caret-height;
     clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
@@ -267,10 +267,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='top']),
-:host(#{$prefix}-popover-content[align='top']),
-:host(#{$prefix}-toggletip[alignment='top']),
-:host(#{$prefix}-slug[alignment='top']) {
+:host(#{$prefix}-tooltip-content[align='top']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='top']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='top']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='top']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
     inset-inline-start: 50%;
@@ -278,10 +278,10 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='top-left']),
-:host(#{$prefix}-popover-content[align='top-left']),
-:host(#{$prefix}-toggletip[alignment='top-left']),
-:host(#{$prefix}-slug[alignment='top-left']) {
+:host(#{$prefix}-tooltip-content[align='top-left']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='top-left']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='top-left']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='top-left']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
     inset-inline-start: 0;
@@ -292,13 +292,32 @@ $popover-caret-height: custom-property.get-var(
   }
 }
 
-:host(#{$prefix}-tooltip-content[align='top-right']),
-:host(#{$prefix}-popover-content[align='top-right']),
-:host(#{$prefix}-toggletip[alignment='top-right']),
-:host(#{$prefix}-slug[alignment='top-right']) {
+:host(#{$prefix}-tooltip-content[align='top-right']:not([autoalign])),
+:host(#{$prefix}-popover-content[align='top-right']:not([autoalign])),
+:host(#{$prefix}-toggletip[alignment='top-right']:not([autoalign])),
+:host(#{$prefix}-slug[alignment='top-right']:not([autoalign])) {
   .#{$prefix}--popover-content {
     inset-block-start: 0;
     inset-inline-end: 0;
     transform: translate($popover-offset, calc(-100% - $popover-offset));
   }
 }
+
+:host(#{$prefix}-toggletip[autoalign]),
+:host(#{$prefix}-tooltip-content[autoalign]),
+:host(#{$prefix}-popover-content[autoalign]) {
+  .#{$prefix}--popover-caret {
+    block-size: 8px;
+    inline-size: 8px;
+    transform: rotate(45deg);
+  }
+}
+
+:host(#{$prefix}-slug[autoalign]),
+:host(#{$prefix}-tooltip[autoalign]),
+:host(#{$prefix}-toggletip[autoalign]),
+:host(#{$prefix}-popover[autoalign]) {
+  .#{$prefix}--popover-container {
+    position: static;
+  }
+}