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

package/es/components/tooltip/tooltip.d.ts

@@ -1,7 +1,7 @@
 /**
  * @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.
@@ -354,6 +354,10 @@ declare class CDSTooltip extends CDSTooltip_base {
      * Specify how the trigger should align with the tooltip
      */
     align: string;
+    /**
+     * Specify whether a auto align functionality should be applied
+     */
+    autoalign: boolean;
     /**
      * `true` if this tooltip is in a data table row
      */

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":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,GAAG,QAAQ,KAAK;AACzB,SAASC,QAAQ,QAAQ,mBAAmB;AAC5C,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,YAAY,MAAM,wCAAwC;AACjE,OAAOC,iBAAiB,MAAM,oCAAoC;AAClE,OAAOC,UAAU,MAAM,oBAAoB;AAC3C,OAAO,4BAA4B;AACnC,OAAOC,OAAM,MAAM,oBAAgB;AAEnC,SAASC,aAAa,IAAIC,aAAa,QAAQ,yCAAyC;;AAExF;AACA;AACA;AACA;AACA;AAJA,IAMMC,UAAU,GAAAC,SAAA,EADfF,aAAa,CAAE,GAAEN,MAAO,UAAS,CAAC,aAAAS,WAAA,EAAAC,kBAAA;EAAnC,MACMH,UAAU,SAAAG,kBAAA,CAAuC;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EA+LvD;EAAC;IAAAI,CAAA,EA/LKN,UAAU;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIbjB,QAAQ,CAAC;QAAEkB,OAAO,EAAE,IAAI;QAAEC,IAAI,EAAEC;MAAO,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OAClC,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKZjB,QAAQ,CAAC;QAAEmB,IAAI,EAAEI,OAAO;QAAEL,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAG,GAAA;MAAAC,MAAA;QAAA,OAC/B,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKhBjB,QAAQ,CAAC;QAAEmB,IAAI,EAAEI,OAAO;QAAEL,OAAO,EAAE,IAAI;QAAEM,SAAS,EAAE;MAAa,CAAC,CAAC;MAAAH,GAAA;MAAAC,MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKhBjB,QAAQ,CAAC;QAAEkB,OAAO,EAAE,IAAI;QAAEC,IAAI,EAAEI;MAAQ,CAAC,CAAC;MAAAF,GAAA;MAAAC,MAAA;QAAA,OACvB,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKxBjB,QAAQ,CAAC;QAAEkB,OAAO,EAAE,IAAI;QAAEC,IAAI,EAAEI;MAAQ,CAAC,CAAC;MAAAF,GAAA;MAAAC,MAAA;QAAA,OAC7B,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKlBjB,QAAQ,CAAC;QAAEwB,SAAS,EAAE,gBAAgB;QAAEL,IAAI,EAAEM;MAAO,CAAC,CAAC;MAAAJ,GAAA;MAAAC,MAAA;QAAA,OACzC,GAAG;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKjBjB,QAAQ,CAAC;QAAEwB,SAAS,EAAE,gBAAgB;QAAEL,IAAI,EAAEM;MAAO,CAAC,CAAC;MAAAJ,GAAA;MAAAC,MAAA;QAAA,OACzC,GAAG;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKjBjB,QAAQ,CAAC;QAAEkB,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAG,GAAA;MAAAC,MAAA;QAAA,OACrB,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKXjB,QAAQ,CAAC;QAAEkB,OAAO,EAAE;MAAK,CAAC,CAAC;MAAAG,GAAA;MAAAC,MAAA;QAAA,OAChB,CAAC;MAAA;IAAA;MAAAN,IAAA;MAAAC,UAAA,GAKZjB,QAAQ,CAAC;QAAEkB,OAAO,EAAE,IAAI;QAAEM,SAAS,EAAE,gBAAgB;QAAEL,IAAI,EAAEI;MAAQ,CAAC,CAAC;MAAAF,GAAA;MAAAC,MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAAN,IAAA;MAAAK,GAAA;MAAAC,MAAA;QAAA,OAKE,YAAY;UACjCI,MAAM,CAACC,YAAY,CAAC,IAAI,CAACC,SAAS,CAAC;UACnC,IAAI,CAACA,SAAS,GAAGF,MAAM,CAACG,UAAU,CAAC,YAAY;YAC7C,IAAI,CAACC,IAAI,GAAG,IAAI;YAChB,MAAM;cAAEA,IAAI;cAAEC;YAAe,CAAC,GAAG,IAAI;YACrC,IAAID,IAAI,EAAE;cAAA,IAAAE,mBAAA;cACR,MAAMD,cAAc;cACpB,MAAM;gBAAEE;cAAuB,CAAC,GAAG,IAAI,CACpCrB,WAAgC;cACnC,CAAAoB,mBAAA,GAAC,IAAI,CAACE,aAAa,CAACD,sBAAsB,CAAC,cAAAD,mBAAA,eAA3CA,mBAAA,CAA6DG,KAAK,CAAC,CAAC;YACtE;UACF,CAAC,EAAE,IAAI,CAACC,YAAY,CAAC;QACvB,CAAC;MAAA;IAAA;MAAApB,IAAA;MAAAK,GAAA;MAAAC,MAAA;QAAA,OAKyB,YAAY;UACpCI,MAAM,CAACC,YAAY,CAAC,IAAI,CAACC,SAAS,CAAC;UACnC,IAAI,CAACA,SAAS,GAAGF,MAAM,CAACG,UAAU,CAAC,YAAY;YAC7C,MAAM;cAAEC;YAAK,CAAC,GAAG,IAAI;YACrB,IAAIA,IAAI,EAAE;cACR,IAAI,CAACA,IAAI,GAAG,KAAK;YACnB;UACF,CAAC,EAAE,IAAI,CAACO,YAAY,CAAC;QACvB,CAAC;MAAA;IAAA;MAAArB,IAAA;MAAAC,UAAA,GAKAf,YAAY,CAAC,OAAO,CAAC;MAAAmB,GAAA;MAAAC,MAAA;QAAA,OAEC,YAAY;UACjC,IAAI,IAAI,CAACgB,iBAAiB,EAAE;YAC1B,IAAI,CAACC,eAAe,CAAC,CAAC;UACxB;QACF,CAAC;MAAA;IAAA;MAAAvB,IAAA;MAAAC,UAAA,GAKAf,YAAY,CAAC,OAAO,CAAC;MAAAmB,GAAA;MAAAC,MAAA;QAAA,OAEG,MAAOkB,KAAK,IAAK;UACxC,IAAIA,KAAK,CAACnB,GAAG,KAAK,GAAG,IAAImB,KAAK,CAACnB,GAAG,KAAK,OAAO,IAAImB,KAAK,CAACnB,GAAG,KAAK,QAAQ,EAAE;YACxE,IAAI,CAACkB,eAAe,CAAC,CAAC;UACxB;QACF,CAAC;MAAA;IAAA;MAAAvB,IAAA;MAAAK,GAAA;MAAAC,KAAA;MA9GD;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAIE;AACF;AACA;;MAeE;AACF;AACA;;MAWE;AACF;AACA;;MASE;AACF;AACA;;MASE;AACF;AACA;MACE,SAAAmB,kBAA4B;QAAEC;MAAc,CAAC,EAAE;QAC7C,MAAMC,SAAS,GAAID,MAAM,CACtBE,aAAa,CAAC,CAAC,CACfC,MAAM,CACJC,IAAI,IAAKA,IAAI,CAACC,QAAQ,KAAKC,IAAI,CAACC,SAAS,IAAIH,IAAI,CAAEI,WAAW,CAAEC,IAAI,CAAC,CACxE,CAAC;QACH,IAAI,CAACR,SAAS,CAAC,CAAC,CAAC,EAAE;UACjB;QACF;QACCA,SAAS,CAAC,CAAC,CAAC,CAAiBS,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAACC,YAAY,CAAC;QACzEV,SAAS,CAAC,CAAC,CAAC,CAAiBS,gBAAgB,CAC5C,UAAU,EACV,IAAI,CAACb,eACP,CAAC;QACAI,SAAS,CAAC,CAAC,CAAC,CAAiBS,gBAAgB,CAC5C,WAAW,EACX,IAAI,CAACC,YACP,CAAC;QACAV,SAAS,CAAC,CAAC,CAAC,CAAiBS,gBAAgB,CAC5C,YAAY,EACZ,IAAI,CAACb,eACP,CAAC;QACD,IAAI,CAACe,aAAa,CAAC,CAAC;MACtB;IAAC;MAAAtC,IAAA;MAAAK,GAAA;MAAAC,KAAA,EAED,SAAAiC,kBAAA,EAAoB;QAClB,IAAI,CAAC,IAAI,CAACC,YAAY,CAAC,cAAc,CAAC,EAAE;UACtC,IAAI,CAACC,YAAY,CAAC,cAAc,EAAE,EAAE,CAAC;QACvC;QACA,IAAI,CAAC,IAAI,CAACC,UAAU,EAAE;UACpB,IAAI,CAACC,YAAY,CAAC;YAAEC,IAAI,EAAE;UAAO,CAAC,CAAC;QACrC;QACAC,IAAA,CAAAC,eAAA,CApJEtD,UAAU,CAAAuD,SAAA,8BAAAC,IAAA;MAqJd;IAAC;MAAAhD,IAAA;MAAAK,GAAA;MAAAC,KAAA,EAED,SAAA2C,QAAQC,iBAAiB,EAAE;QAAA,IAAAC,gBAAA;QACzB,MAAM;UAAElC;QAAuB,CAAC,GAAG,IAAI,CAACrB,WAAgC;QACxE,MAAMwD,cAAc,GAAG,IAAI,CAAClC,aAAa,CAACD,sBAAsB,CAAC;QAEjE,IAAIiC,iBAAiB,CAACG,GAAG,CAAC,aAAa,CAAC,EAAE;UACxC,IAAI,CAACvC,IAAI,GAAG,IAAI,CAACwC,WAAW;QAC9B;QAEA,IAAIJ,iBAAiB,CAACG,GAAG,CAAC,MAAM,CAAC,EAAE;UACjC,IAAI,CAACvC,IAAI,GACLsC,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEX,YAAY,CAAC,MAAM,EAAE,EAAE,CAAC,GACxCW,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAEG,eAAe,CAAC,MAAM,CAAC;QAC7C;QAEA,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,CAAC,CAACC,OAAO,CAAEC,IAAI,IAAK;UAChD,IAAIP,iBAAiB,CAACG,GAAG,CAACI,IAAI,CAAC,EAAE;YAC/B,MAAM;cAAE,CAACA,IAAI,GAAuBnD;YAAM,CAAC,GAAG,IAAI;YACjD8C,cAAc,CAAuBK,IAAI,CAAC,GAAGnD,KAAK;UACrD;QACF,CAAC,CAAC;QAEF,CAAA6C,gBAAA,OAAI,CAACT,UAAU,cAAAS,gBAAA,gBAAAA,gBAAA,GAAfA,gBAAA,CACIjC,aAAa,CAAE,IAAGjC,MAAO,qBAAoB,CAAC,cAAAkE,gBAAA,eADlDA,gBAAA,CAEIO,SAAS,CAACC,GAAG,CAAE,GAAE1E,MAAO,WAAU,CAAC;QAEvC4D,IAAA,CAAAC,eAAA,CAhLEtD,UAAU,CAAAuD,SAAA,oBAAAC,IAAA,OAgLEE,iBAAiB;MACjC;;MAEA;AACF;AACA;IAFE;MAAAlD,IAAA;MAAA4D,MAAA;MAAAvD,GAAA;MAAAC,KAAA,EAGA,SAAAW,uBAAA,EAAoC;QAClC,OAAQ,GAAEhC,MAAO,kBAAiB;MACpC;IAAC;MAAAe,IAAA;MAAA4D,MAAA;MAAAvD,GAAA;MAAAC,KAAA,EAED,SAAAjB,OAAA,EAAoB;QAClB,OAAON,GAAG,CAAA8E,EAAA,KAAAA,EAAA,GAAAC,CAAC;AACf,QAAM,CAAe,IAAS;AAC9B,KAAI,GAAAjB,IAAA,CAAAC,eAAA,CA7LEtD,UAAU,oBA4LOH,OAAM;MAE3B,CAAC,CAAC;IAAA;EAAA;AAAA,GA9LqBF,iBAAiB,CAACC,UAAU,CAAC;AAiMtD,eAAeI,UAAU"}

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

@@ -0,0 +1,47 @@
+/**
+ * @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 { ReactiveController, LitElement } from 'lit';
+type PopoverControllerOptions = {
+    target: HTMLElement;
+    trigger: HTMLElement;
+    arrowElement?: HTMLElement | undefined;
+    alignment: string;
+    flip: boolean;
+    caret: boolean;
+};
+interface PopoverElement extends LitElement {
+    open: boolean;
+}
+export default class PopoverController implements ReactiveController {
+    /**
+     * Host component
+     */
+    private host;
+    /**
+     * Floating-ui options to pass to `computePlacement()`
+     */
+    private options;
+    /**
+     * cleanup function to stop auto updates
+     */
+    private cleanup?;
+    /**
+     * register with host component
+     * @param host host component
+     */
+    constructor(host: PopoverElement);
+    setPlacement(options?: PopoverControllerOptions): Promise<void>;
+    updatePlacement: () => void;
+    computePlacement(): Promise<void>;
+    hostUpdated(): void;
+    hostDisconnected(): void;
+}
+export {};
+
+//# sourceMappingURL=popover-controller.d.ts.map

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

@@ -0,0 +1,142 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+/**
+ * @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, autoUpdate } from '@floating-ui/dom';
+export default class PopoverController {
+  /**
+   * Host component
+   */
+
+  /**
+   * Floating-ui options to pass to `computePlacement()`
+   */
+
+  /**
+   * cleanup function to stop auto updates
+   */
+
+  /**
+   * register with host component
+   * @param host host component
+   */
+  constructor(host) {
+    _defineProperty(this, "updatePlacement", () => {
+      this.computePlacement();
+    });
+    (this.host = host).addController(this);
+  }
+  async setPlacement(options = this.options) {
+    this.options = options;
+    const {
+      trigger,
+      target
+    } = options;
+    this.cleanup = autoUpdate(trigger, target, this.updatePlacement);
+  }
+  async computePlacement() {
+    const {
+      arrowElement,
+      alignment,
+      caret,
+      trigger,
+      target
+    } = this.options;
+    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;
+    }
+    const middleware = [flip({
+      fallbackAxisSideDirection: 'start'
+    }), offset(caret ? 10 : 0), ...(caret && arrowElement ? [arrow({
+      element: arrowElement,
+      padding: 15
+    })] : [])];
+    if (this.host.hasAttribute('open')) {
+      const {
+        x,
+        y,
+        placement,
+        middlewareData,
+        strategy
+      } = await computePosition(trigger, target, {
+        strategy: 'fixed',
+        middleware,
+        placement: shimmedAlign
+      });
+      target.style.left = `${x}px`;
+      target.style.top = `${y}px`;
+      target.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`;
+      }
+
+      // adding specific case here where the style of the caret/arrow
+      // is dependent on the placement
+      if (this.host.tagName === 'CDS-SLUG') {
+        var _this$host;
+        (_this$host = this.host) === null || _this$host === void 0 || _this$host.setAttribute('alignment', placement);
+      }
+    }
+  }
+  hostUpdated() {
+    if (!this.host.hasAttribute('open')) {
+      var _this$cleanup;
+      (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 || _this$cleanup.call(this);
+      this.cleanup = undefined;
+    }
+  }
+  hostDisconnected() {
+    var _this$cleanup2;
+    (_this$cleanup2 = this.cleanup) === null || _this$cleanup2 === void 0 || _this$cleanup2.call(this);
+    this.cleanup = undefined;
+  }
+}
+//# sourceMappingURL=popover-controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-controller.js","names":["computePosition","flip","offset","arrow","autoUpdate","PopoverController","constructor","host","_defineProperty","computePlacement","addController","setPlacement","options","trigger","target","cleanup","updatePlacement","arrowElement","alignment","caret","shimmedAlign","middleware","fallbackAxisSideDirection","element","padding","hasAttribute","x","y","placement","middlewareData","strategy","style","left","top","position","arrowX","arrowY","staticSide","right","bottom","split","offsetWidth","tagName","_this$host","setAttribute","hostUpdated","_this$cleanup","call","undefined","hostDisconnected","_this$cleanup2"],"sources":["globals/controllers/popover-controller.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 { ReactiveController, LitElement } from 'lit';\nimport {\n  computePosition,\n  flip,\n  offset,\n  arrow,\n  autoUpdate,\n  Placement,\n} from '@floating-ui/dom';\n\ntype PopoverControllerOptions = {\n  target: HTMLElement;\n  trigger: HTMLElement;\n  arrowElement?: HTMLElement | undefined;\n  alignment: string;\n  flip: boolean;\n  caret: boolean;\n};\n\ninterface PopoverElement extends LitElement {\n  open: boolean;\n}\n\nexport default class PopoverController implements ReactiveController {\n  /**\n   * Host component\n   */\n  private host!: PopoverElement;\n\n  /**\n   * Floating-ui options to pass to `computePlacement()`\n   */\n  private options!: PopoverControllerOptions;\n\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: PopoverElement) {\n    (this.host = host).addController(this);\n  }\n\n  async setPlacement(options: PopoverControllerOptions = this.options) {\n    this.options = options;\n    const { trigger, target } = options;\n\n    this.cleanup = autoUpdate(trigger, target, this.updatePlacement);\n  }\n\n  updatePlacement = (): void => {\n    this.computePlacement();\n  };\n\n  async computePlacement() {\n    const { arrowElement, alignment, caret, trigger, target } = this.options;\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({ fallbackAxisSideDirection: 'start' }),\n      offset(caret ? 10 : 0),\n      ...(caret && arrowElement\n        ? [arrow({ element: arrowElement, padding: 15 })]\n        : []),\n    ];\n\n    if (this.host.hasAttribute('open')) {\n      const { x, y, placement, middlewareData, strategy } =\n        await computePosition(trigger, target, {\n          strategy: 'fixed',\n          middleware,\n          placement: shimmedAlign as Placement,\n        });\n\n      target.style.left = `${x}px`;\n      target.style.top = `${y}px`;\n      target.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\n      // adding specific case here where the style of the caret/arrow\n      // is dependent on the placement\n      if (this.host.tagName === 'CDS-SLUG') {\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"],"mappings":"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"}

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/lib/globals/controllers/popover-controller.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _dom = require("@floating-ui/dom");
+/**
+ * @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.
+ */
+
+class PopoverController {
+  /**
+   * Host component
+   */
+
+  /**
+   * Floating-ui options to pass to `computePlacement()`
+   */
+
+  /**
+   * cleanup function to stop auto updates
+   */
+
+  /**
+   * register with host component
+   * @param host host component
+   */
+  constructor(host) {
+    (0, _defineProperty2.default)(this, "updatePlacement", () => {
+      this.computePlacement();
+    });
+    (this.host = host).addController(this);
+  }
+  async setPlacement(options = this.options) {
+    this.options = options;
+    const {
+      trigger,
+      target
+    } = options;
+    this.cleanup = (0, _dom.autoUpdate)(trigger, target, this.updatePlacement);
+  }
+  async computePlacement() {
+    const {
+      arrowElement,
+      alignment,
+      caret,
+      trigger,
+      target
+    } = this.options;
+    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;
+    }
+    const middleware = [(0, _dom.flip)({
+      fallbackAxisSideDirection: 'start'
+    }), (0, _dom.offset)(caret ? 10 : 0), ...(caret && arrowElement ? [(0, _dom.arrow)({
+      element: arrowElement,
+      padding: 15
+    })] : [])];
+    if (this.host.hasAttribute('open')) {
+      const {
+        x,
+        y,
+        placement,
+        middlewareData,
+        strategy
+      } = await (0, _dom.computePosition)(trigger, target, {
+        strategy: 'fixed',
+        middleware,
+        placement: shimmedAlign
+      });
+      target.style.left = `${x}px`;
+      target.style.top = `${y}px`;
+      target.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`;
+      }
+
+      // adding specific case here where the style of the caret/arrow
+      // is dependent on the placement
+      if (this.host.tagName === 'CDS-SLUG') {
+        var _this$host;
+        (_this$host = this.host) === null || _this$host === void 0 || _this$host.setAttribute('alignment', placement);
+      }
+    }
+  }
+  hostUpdated() {
+    if (!this.host.hasAttribute('open')) {
+      var _this$cleanup;
+      (_this$cleanup = this.cleanup) === null || _this$cleanup === void 0 || _this$cleanup.call(this);
+      this.cleanup = undefined;
+    }
+  }
+  hostDisconnected() {
+    var _this$cleanup2;
+    (_this$cleanup2 = this.cleanup) === null || _this$cleanup2 === void 0 || _this$cleanup2.call(this);
+    this.cleanup = undefined;
+  }
+}
+exports.default = PopoverController;
+//# sourceMappingURL=popover-controller.js.map

package/lib/globals/controllers/popover-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-controller.js","names":["_dom","require","PopoverController","constructor","host","_defineProperty2","default","computePlacement","addController","setPlacement","options","trigger","target","cleanup","autoUpdate","updatePlacement","arrowElement","alignment","caret","shimmedAlign","middleware","flip","fallbackAxisSideDirection","offset","arrow","element","padding","hasAttribute","x","y","placement","middlewareData","strategy","computePosition","style","left","top","position","arrowX","arrowY","staticSide","right","bottom","split","offsetWidth","tagName","_this$host","setAttribute","hostUpdated","_this$cleanup","call","undefined","hostDisconnected","_this$cleanup2","exports"],"sources":["globals/controllers/popover-controller.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 { ReactiveController, LitElement } from 'lit';\nimport {\n  computePosition,\n  flip,\n  offset,\n  arrow,\n  autoUpdate,\n  Placement,\n} from '@floating-ui/dom';\n\ntype PopoverControllerOptions = {\n  target: HTMLElement;\n  trigger: HTMLElement;\n  arrowElement?: HTMLElement | undefined;\n  alignment: string;\n  flip: boolean;\n  caret: boolean;\n};\n\ninterface PopoverElement extends LitElement {\n  open: boolean;\n}\n\nexport default class PopoverController implements ReactiveController {\n  /**\n   * Host component\n   */\n  private host!: PopoverElement;\n\n  /**\n   * Floating-ui options to pass to `computePlacement()`\n   */\n  private options!: PopoverControllerOptions;\n\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: PopoverElement) {\n    (this.host = host).addController(this);\n  }\n\n  async setPlacement(options: PopoverControllerOptions = this.options) {\n    this.options = options;\n    const { trigger, target } = options;\n\n    this.cleanup = autoUpdate(trigger, target, this.updatePlacement);\n  }\n\n  updatePlacement = (): void => {\n    this.computePlacement();\n  };\n\n  async computePlacement() {\n    const { arrowElement, alignment, caret, trigger, target } = this.options;\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({ fallbackAxisSideDirection: 'start' }),\n      offset(caret ? 10 : 0),\n      ...(caret && arrowElement\n        ? [arrow({ element: arrowElement, padding: 15 })]\n        : []),\n    ];\n\n    if (this.host.hasAttribute('open')) {\n      const { x, y, placement, middlewareData, strategy } =\n        await computePosition(trigger, target, {\n          strategy: 'fixed',\n          middleware,\n          placement: shimmedAlign as Placement,\n        });\n\n      target.style.left = `${x}px`;\n      target.style.top = `${y}px`;\n      target.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\n      // adding specific case here where the style of the caret/arrow\n      // is dependent on the placement\n      if (this.host.tagName === 'CDS-SLUG') {\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"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.4.0-rc.0",
+  "version": "2.4.0-rc.2",
   "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": "e4cd73d870fe341b84ef93161f1b51f70cd2eaaf"
 }

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 {