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

package/es/components/slug/slug.d.ts

@@ -53,7 +53,7 @@ export default class CDSSlug extends CDSToggleTip {
     protected _renderTooltipButton: () => import("lit-html").TemplateResult<1>;
     protected _renderInnerContent: () => import("lit-html").TemplateResult<1>;
     attributeChangedCallback(name: any, old: any, newValue: any): void;
-    updated(): Promise<void>;
+    updated(): void;
     static styles: any;
 }
 

package/es/components/slug/slug.js

@@ -260,7 +260,7 @@ let CDSSlug = _decorate([customElement(`${prefix}-slug`)], function (_initialize
     }, {
       kind: "method",
       key: "updated",
-      value: async function updated() {
+      value: function updated() {
         _get(_getPrototypeOf(CDSSlug.prototype), "updated", this).call(this);
         if (this.kind !== SLUG_KIND.HOLLOW && this.dotType !== SLUG_DOT_TYPE.HOLLOW) {
           this.setAttribute('enabled', '');

package/es/components/slug/slug.js.map

@@ -1 +1 @@
-{"version":3,"file":"slug.js","names":["classMap","html","property","prefix","CDSToggleTip","styles","Undo16","SLUG_SIZE","SLUG_KIND","SLUG_DOT_TYPE","carbonElement","customElement","CDSSlug","_decorate","_initialize","_CDSToggleTip","constructor","args","F","d","kind","decorators","reflect","key","value","attribute","DEFAULT","type","Boolean","EXTRA_SMALL","revertActive","removeAttribute","open","_t","_","size","aiText","aiTextLabel","slugLabel","ariaLabel","classes","INLINE","_t2","id","_handleClick","_t3","autoalign","revertLabel","_t4","_t5","slot","_t6","_renderTooltipButton","_renderTooltipContent","attributeChangedCallback","name","old","newValue","_this$parentElement","_get","_getPrototypeOf","prototype","call","parentElement","requestUpdate","updated","HOLLOW","dotType","setAttribute","static","default"],"sources":["components/slug/slug.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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSToggleTip from '../toggle-tip/toggletip';\nimport styles from './slug.scss';\nimport Undo16 from '@carbon/icons/lib/undo/16';\nimport { SLUG_SIZE, SLUG_KIND, SLUG_DOT_TYPE } from './defs';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Basic slug.\n *\n * @element cds-slug\n */\n@customElement(`${prefix}-slug`)\nexport default class CDSSlug extends CDSToggleTip {\n  @property({ reflect: true })\n  slot = 'slug';\n  /**\n   * Specify the correct translation of the AI text\n   */\n  @property({ attribute: 'ai-text' })\n  aiText = 'AI';\n\n  /**\n   * Specify additional text to be rendered next to the AI label in the inline variant\n   */\n  @property({ attribute: 'ai-text-label' })\n  aiTextLabel = '';\n\n  /**\n   * Specify the type of dot that should be rendered in front of the inline variant: (default, hollow)\n   */\n  @property({ reflect: true, attribute: 'dot-type' })\n  dotType = SLUG_DOT_TYPE.DEFAULT;\n\n  /**\n   * Specify the type of Slug, from the following list of types: (default, hollow, inline)\n   */\n  @property({ reflect: true })\n  kind = SLUG_KIND.DEFAULT;\n\n  /**\n   * Specify whether the revert button should be visible\n   */\n  @property({ type: Boolean, attribute: 'revert-active' })\n  revertActive = false;\n\n  /**\n   * Specify whether the revert button should be visible\n   */\n  @property({ attribute: 'revert-label' })\n  revertLabel = 'Revert to AI input';\n\n  /**\n   * Slug size should be mini, 2xs, xs, sm, md, lg, xl.\n   */\n  @property({ reflect: true })\n  size = SLUG_SIZE.EXTRA_SMALL;\n\n  /**\n   * Specify the text that will be provided to the aria-label of the `Slug` button\n   */\n  @property({ attribute: 'slug-label' })\n  slugLabel = 'Show information';\n\n  @property()\n  previousValue;\n\n  protected _handleClick = () => {\n    if (this.revertActive) {\n      this.revertActive = false;\n      this.removeAttribute('revert-active');\n    } else {\n      this.open = !this.open;\n    }\n  };\n\n  protected _renderToggleTipLabel = () => {\n    return html``;\n  };\n\n  protected _renderTooltipButton = () => {\n    const { size, kind, aiText, aiTextLabel, slugLabel } = this;\n    const ariaLabel = `${aiText} - ${slugLabel}`;\n    const classes = classMap({\n      [`${prefix}--toggletip-button`]: true,\n      [`${prefix}--slug__button`]: true,\n      [`${prefix}--slug__button--${size}`]: size,\n      [`${prefix}--slug__button--${kind}`]: kind,\n      [`${prefix}--slug__button--inline-with-content`]:\n        kind === SLUG_KIND.INLINE && aiTextLabel,\n    });\n    return html`\n      <button\n        aria-controls=\"${this.id}\"\n        @click=\"${this._handleClick}\"\n        class=${classes}\n        aria-label=\"${ariaLabel}\">\n        <span class=\"${prefix}--slug__text\">${aiText}</span>\n        ${aiTextLabel && kind === SLUG_KIND.INLINE\n          ? html`\n              <span class=\"${prefix}--slug__additional-text\">\n                ${aiTextLabel}\n              </span>\n            `\n          : ``}\n      </button>\n    `;\n  };\n\n  protected _renderInnerContent = () => {\n    const { autoalign, revertActive, revertLabel } = this;\n    return html`\n      ${revertActive\n        ? html`\n            <cds-icon-button\n              ?autoalign=${autoalign}\n              kind=\"ghost\"\n              size=\"sm\"\n              @click=\"${this._handleClick}\">\n              <span slot=\"tooltip-content\"> ${revertLabel} </span>\n              ${Undo16({ slot: 'icon' })}\n            </cds-icon-button>\n          `\n        : html`\n            ${this._renderTooltipButton()} ${this._renderTooltipContent()}\n          `}\n    `;\n  };\n\n  attributeChangedCallback(name, old, newValue) {\n    super.attributeChangedCallback(name, old, newValue);\n\n    //@ts-ignore typescript does not think requestUpdate() exists on parentElement\n    name === 'revert-active' ? this.parentElement?.requestUpdate() : ``;\n  }\n\n  async updated() {\n    super.updated();\n    if (\n      this.kind !== SLUG_KIND.HOLLOW &&\n      this.dotType !== SLUG_DOT_TYPE.HOLLOW\n    ) {\n      this.setAttribute('enabled', '');\n    } else {\n      this.removeAttribute('enabled');\n    }\n  }\n\n  static styles = styles;\n}\n"],"mappings":"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"}
+{"version":3,"file":"slug.js","names":["classMap","html","property","prefix","CDSToggleTip","styles","Undo16","SLUG_SIZE","SLUG_KIND","SLUG_DOT_TYPE","carbonElement","customElement","CDSSlug","_decorate","_initialize","_CDSToggleTip","constructor","args","F","d","kind","decorators","reflect","key","value","attribute","DEFAULT","type","Boolean","EXTRA_SMALL","revertActive","removeAttribute","open","_t","_","size","aiText","aiTextLabel","slugLabel","ariaLabel","classes","INLINE","_t2","id","_handleClick","_t3","autoalign","revertLabel","_t4","_t5","slot","_t6","_renderTooltipButton","_renderTooltipContent","attributeChangedCallback","name","old","newValue","_this$parentElement","_get","_getPrototypeOf","prototype","call","parentElement","requestUpdate","updated","HOLLOW","dotType","setAttribute","static","default"],"sources":["components/slug/slug.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 { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport CDSToggleTip from '../toggle-tip/toggletip';\nimport styles from './slug.scss';\nimport Undo16 from '@carbon/icons/lib/undo/16';\nimport { SLUG_SIZE, SLUG_KIND, SLUG_DOT_TYPE } from './defs';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * Basic slug.\n *\n * @element cds-slug\n */\n@customElement(`${prefix}-slug`)\nexport default class CDSSlug extends CDSToggleTip {\n  @property({ reflect: true })\n  slot = 'slug';\n  /**\n   * Specify the correct translation of the AI text\n   */\n  @property({ attribute: 'ai-text' })\n  aiText = 'AI';\n\n  /**\n   * Specify additional text to be rendered next to the AI label in the inline variant\n   */\n  @property({ attribute: 'ai-text-label' })\n  aiTextLabel = '';\n\n  /**\n   * Specify the type of dot that should be rendered in front of the inline variant: (default, hollow)\n   */\n  @property({ reflect: true, attribute: 'dot-type' })\n  dotType = SLUG_DOT_TYPE.DEFAULT;\n\n  /**\n   * Specify the type of Slug, from the following list of types: (default, hollow, inline)\n   */\n  @property({ reflect: true })\n  kind = SLUG_KIND.DEFAULT;\n\n  /**\n   * Specify whether the revert button should be visible\n   */\n  @property({ type: Boolean, attribute: 'revert-active' })\n  revertActive = false;\n\n  /**\n   * Specify whether the revert button should be visible\n   */\n  @property({ attribute: 'revert-label' })\n  revertLabel = 'Revert to AI input';\n\n  /**\n   * Slug size should be mini, 2xs, xs, sm, md, lg, xl.\n   */\n  @property({ reflect: true })\n  size = SLUG_SIZE.EXTRA_SMALL;\n\n  /**\n   * Specify the text that will be provided to the aria-label of the `Slug` button\n   */\n  @property({ attribute: 'slug-label' })\n  slugLabel = 'Show information';\n\n  @property()\n  previousValue;\n\n  protected _handleClick = () => {\n    if (this.revertActive) {\n      this.revertActive = false;\n      this.removeAttribute('revert-active');\n    } else {\n      this.open = !this.open;\n    }\n  };\n\n  protected _renderToggleTipLabel = () => {\n    return html``;\n  };\n\n  protected _renderTooltipButton = () => {\n    const { size, kind, aiText, aiTextLabel, slugLabel } = this;\n    const ariaLabel = `${aiText} - ${slugLabel}`;\n    const classes = classMap({\n      [`${prefix}--toggletip-button`]: true,\n      [`${prefix}--slug__button`]: true,\n      [`${prefix}--slug__button--${size}`]: size,\n      [`${prefix}--slug__button--${kind}`]: kind,\n      [`${prefix}--slug__button--inline-with-content`]:\n        kind === SLUG_KIND.INLINE && aiTextLabel,\n    });\n    return html`\n      <button\n        aria-controls=\"${this.id}\"\n        @click=\"${this._handleClick}\"\n        class=${classes}\n        aria-label=\"${ariaLabel}\">\n        <span class=\"${prefix}--slug__text\">${aiText}</span>\n        ${aiTextLabel && kind === SLUG_KIND.INLINE\n          ? html`\n              <span class=\"${prefix}--slug__additional-text\">\n                ${aiTextLabel}\n              </span>\n            `\n          : ``}\n      </button>\n    `;\n  };\n\n  protected _renderInnerContent = () => {\n    const { autoalign, revertActive, revertLabel } = this;\n    return html`\n      ${revertActive\n        ? html`\n            <cds-icon-button\n              ?autoalign=${autoalign}\n              kind=\"ghost\"\n              size=\"sm\"\n              @click=\"${this._handleClick}\">\n              <span slot=\"tooltip-content\"> ${revertLabel} </span>\n              ${Undo16({ slot: 'icon' })}\n            </cds-icon-button>\n          `\n        : html`\n            ${this._renderTooltipButton()} ${this._renderTooltipContent()}\n          `}\n    `;\n  };\n\n  attributeChangedCallback(name, old, newValue) {\n    super.attributeChangedCallback(name, old, newValue);\n\n    //@ts-ignore typescript does not think requestUpdate() exists on parentElement\n    name === 'revert-active' ? this.parentElement?.requestUpdate() : ``;\n  }\n\n  updated() {\n    super.updated();\n    if (\n      this.kind !== SLUG_KIND.HOLLOW &&\n      this.dotType !== SLUG_DOT_TYPE.HOLLOW\n    ) {\n      this.setAttribute('enabled', '');\n    } else {\n      this.removeAttribute('enabled');\n    }\n  }\n\n  static styles = styles;\n}\n"],"mappings":"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"}

package/es/components/toggle-tip/toggletip.d.ts

@@ -675,6 +675,10 @@ declare const CDSToggletip_base: {
  * @element cds-toggletip
  */
 declare class CDSToggletip extends CDSToggletip_base {
+    /**
+     * Create popover controller instance
+     */
+    private popoverController;
     /**
      * How the tooltip is aligned to the trigger button.
      */
@@ -706,7 +710,7 @@ declare class CDSToggletip extends CDSToggletip_base {
     protected _renderTooltipButton: () => import("lit-html").TemplateResult<1>;
     protected _renderTooltipContent: () => import("lit-html").TemplateResult<1>;
     protected _renderInnerContent: () => import("lit-html").TemplateResult<1>;
-    updated(): Promise<void>;
+    updated(): void;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * A selector that will return the toggletip content.

package/es/components/toggle-tip/toggletip.js

@@ -25,7 +25,7 @@ import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
 import { POPOVER_ALIGNMENT } from '../popover/defs';
-import { floatingUIPosition } from '../../globals/internal/floating-ui';
+import PopoverController from '../../globals/controllers/popover-controller';
 import styles from "././toggletip.css.js";
 
 /**
@@ -47,6 +47,12 @@ let CDSToggletip = _decorate([customElement(`${prefix}-toggletip`)], function (_
   return {
     F: CDSToggletip,
     d: [{
+      kind: "field",
+      key: "popoverController",
+      value() {
+        return new PopoverController(this);
+      }
+    }, {
       kind: "field",
       decorators: [property({
         reflect: true
@@ -79,6 +85,10 @@ let CDSToggletip = _decorate([customElement(`${prefix}-toggletip`)], function (_
       kind: "method",
       key: "_handleActionsSlotChange",
       value:
+      /**
+       * Create popover controller instance
+       */
+
       /**
        * How the tooltip is aligned to the trigger button.
        */
@@ -213,24 +223,23 @@ let CDSToggletip = _decorate([customElement(`${prefix}-toggletip`)], function (_
     }, {
       kind: "method",
       key: "updated",
-      value: async function updated() {
-        if (this.autoalign) {
+      value: function updated() {
+        if (this.autoalign && this.open) {
           var _this$shadowRoot, _this$shadowRoot2, _this$shadowRoot3;
           // auto align functionality with @floating-ui/dom library
           const button = (_this$shadowRoot = this.shadowRoot) === null || _this$shadowRoot === void 0 ? void 0 : _this$shadowRoot.querySelector(CDSToggletip.selectorToggletipButton);
           const tooltip = (_this$shadowRoot2 = this.shadowRoot) === null || _this$shadowRoot2 === void 0 ? void 0 : _this$shadowRoot2.querySelector(CDSToggletip.selectorToggletipContent);
           const arrowElement = (_this$shadowRoot3 = this.shadowRoot) === null || _this$shadowRoot3 === void 0 ? void 0 : _this$shadowRoot3.querySelector(CDSToggletip.selectorToggletipCaret);
           if (button && tooltip) {
-            // @floating-ui/dom returns the final placement which we'll use
-            // to set the alignment attr for styling
-            const finalPlacement = await floatingUIPosition({
-              button,
-              tooltip,
-              arrowElement,
+            var _this$popoverControll;
+            (_this$popoverControll = this.popoverController) === null || _this$popoverControll === void 0 || _this$popoverControll.setPlacement({
+              trigger: button,
+              target: tooltip,
+              arrowElement: arrowElement,
               caret: true,
+              flip: true,
               alignment: this.alignment
             });
-            this.setAttribute('alignment', finalPlacement);
           }
         }
       }

package/es/components/toggle-tip/toggletip.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip.js","names":["classMap","html","LitElement","customElement","property","Information16","prefix","HostListener","HostListenerMixin","FocusMixin","POPOVER_ALIGNMENT","floatingUIPosition","styles","CDSToggletip","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","decorators","reflect","key","value","TOP","type","Boolean","_handleActionsSlotChange","target","hasContent","assignedNodes","setAttribute","removeAttribute","open","event","_handleFocusOut","contains","relatedTarget","_t","_","_t2","id","_handleClick","autoalign","_t3","_t4","_t5","_renderTooltipButton","_renderTooltipContent","updated","_this$shadowRoot","_this$shadowRoot2","_this$shadowRoot3","button","shadowRoot","querySelector","selectorToggletipButton","tooltip","selectorToggletipContent","arrowElement","selectorToggletipCaret","finalPlacement","caret","alignment","render","classes","_t6","_renderToggleTipLabel","_renderInnerContent","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/toggle-tip/toggletip.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 { classMap } from 'lit/directives/class-map.js';\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport Information16 from '@carbon/icons/lib/information/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport { floatingUIPosition } from '../../globals/internal/floating-ui';\nimport styles from './toggletip.scss';\n\n/**\n * Definition tooltip.\n *\n * @element cds-toggletip\n */\n@customElement(`${prefix}-toggletip`)\nclass CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * How the tooltip is aligned to the trigger button.\n   */\n  @property({ reflect: true })\n  alignment = POPOVER_ALIGNMENT.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   * Set whether toggletip is open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleActionsSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement).assignedNodes();\n    hasContent\n      ? this.setAttribute('has-actions', '')\n      : this.removeAttribute('has-actions');\n  }\n\n  protected _handleClick = () => {\n    this.open = !this.open;\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = async (event) => {\n    if (event.key === 'Escape') {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Handles `blur` event handler on the document this element is in.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (!this.contains(event.relatedTarget as Node)) {\n      this.open = false;\n    }\n  }\n\n  protected _renderToggleTipLabel = () => {\n    return html`\n      <span class=\"${prefix}--toggletip-label\">\n        <slot></slot>\n      </span>\n    `;\n  };\n\n  protected _renderTooltipButton = () => {\n    return html`\n      <button\n        aria-controls=\"${this.id}\"\n        class=\"${prefix}--toggletip-button\"\n        @click=${this._handleClick}>\n        ${Information16({ id: 'trigger' })}\n      </button>\n    `;\n  };\n\n  protected _renderTooltipContent = () => {\n    return this.autoalign\n      ? html`\n          <span class=\"${prefix}--popover-content\">\n            <div class=\"${prefix}--toggletip-content\">\n              <slot name=\"body-text\"></slot>\n              <div class=\"${prefix}--toggletip-actions\">\n                <slot\n                  name=\"actions\"\n                  @slotchange=\"${this._handleActionsSlotChange}\"></slot>\n              </div>\n            </div>\n            <span class=\"${prefix}--popover-caret\"></span>\n          </span>\n        `\n      : html`\n          <span class=\"${prefix}--popover\">\n            <span class=\"${prefix}--popover-content\">\n              <div class=\"${prefix}--toggletip-content\">\n                <slot name=\"body-text\"></slot>\n                <div class=\"${prefix}--toggletip-actions\">\n                  <slot\n                    name=\"actions\"\n                    @slotchange=\"${this._handleActionsSlotChange}\"></slot>\n                </div>\n              </div>\n            </span>\n            <span class=\"${prefix}--popover-caret\"></span>\n          </span>\n        `;\n  };\n\n  protected _renderInnerContent = () => {\n    return html`\n      ${this._renderTooltipButton()} ${this._renderTooltipContent()}\n    `;\n  };\n\n  async updated() {\n    if (this.autoalign) {\n      // auto align functionality with @floating-ui/dom library\n      const button = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipButton\n      );\n\n      const tooltip = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipContent\n      );\n      const arrowElement = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipCaret\n      );\n\n      if (button && tooltip) {\n        // @floating-ui/dom returns the final placement which we'll use\n        // to set the alignment attr for styling\n        const finalPlacement = await floatingUIPosition({\n          button,\n          tooltip,\n          arrowElement,\n          caret: true,\n          alignment: this.alignment,\n        });\n\n        this.setAttribute('alignment', finalPlacement);\n      }\n    }\n  }\n\n  render() {\n    const { alignment, open } = this;\n    const classes = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: true,\n      [`${prefix}--popover--high-contrast`]: true,\n      [`${prefix}--popover--open`]: open,\n      [`${prefix}--popover--${alignment}`]: alignment,\n      [`${prefix}--toggletip`]: true,\n      [`${prefix}--toggletip--open`]: open,\n    });\n    return html`\n      ${this._renderToggleTipLabel()}\n      <span class=\"${classes}\">\n        ${this._renderInnerContent()}\n      </span>\n    </span>\n    `;\n  }\n\n  /**\n   * A selector that will return the toggletip content.\n   */\n  static get selectorToggletipContent() {\n    return `.${prefix}--popover-content`;\n  }\n\n  /**\n   * A selector that will return the toggletip caret.\n   */\n  static get selectorToggletipCaret() {\n    return `.${prefix}--popover-caret`;\n  }\n\n  /**\n   * A selector that will return the trigger element.\n   */\n  static get selectorToggletipButton() {\n    return `.${prefix}--toggletip-button`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSToggletip;\n"],"mappings":"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"}
+{"version":3,"file":"toggletip.js","names":["classMap","html","LitElement","customElement","property","Information16","prefix","HostListener","HostListenerMixin","FocusMixin","POPOVER_ALIGNMENT","PopoverController","styles","CDSToggletip","_decorate","_initialize","_HostListenerMixin","constructor","args","F","d","kind","key","value","decorators","reflect","TOP","type","Boolean","_handleActionsSlotChange","target","hasContent","assignedNodes","setAttribute","removeAttribute","open","event","_handleFocusOut","contains","relatedTarget","_t","_","_t2","id","_handleClick","autoalign","_t3","_t4","_t5","_renderTooltipButton","_renderTooltipContent","updated","_this$shadowRoot","_this$shadowRoot2","_this$shadowRoot3","button","shadowRoot","querySelector","selectorToggletipButton","tooltip","selectorToggletipContent","arrowElement","selectorToggletipCaret","_this$popoverControll","popoverController","setPlacement","trigger","caret","flip","alignment","render","classes","_t6","_renderToggleTipLabel","_renderInnerContent","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/toggle-tip/toggletip.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 { classMap } from 'lit/directives/class-map.js';\nimport { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport Information16 from '@carbon/icons/lib/information/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport { POPOVER_ALIGNMENT } from '../popover/defs';\nimport PopoverController from '../../globals/controllers/popover-controller';\nimport styles from './toggletip.scss';\n\n/**\n * Definition tooltip.\n *\n * @element cds-toggletip\n */\n@customElement(`${prefix}-toggletip`)\nclass CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * Create popover controller instance\n   */\n  private popoverController = new PopoverController(this);\n\n  /**\n   * How the tooltip is aligned to the trigger button.\n   */\n  @property({ reflect: true })\n  alignment = POPOVER_ALIGNMENT.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   * Set whether toggletip is open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleActionsSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement).assignedNodes();\n    hasContent\n      ? this.setAttribute('has-actions', '')\n      : this.removeAttribute('has-actions');\n  }\n\n  protected _handleClick = () => {\n    this.open = !this.open;\n  };\n\n  /**\n   * Handles `keydown` event on this element.\n   */\n  @HostListener('keydown')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = async (event) => {\n    if (event.key === 'Escape') {\n      this.open = false;\n    }\n  };\n\n  /**\n   * Handles `blur` event handler on the document this element is in.\n   *\n   * @param event The event.\n   */\n  @HostListener('focusout')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    if (!this.contains(event.relatedTarget as Node)) {\n      this.open = false;\n    }\n  }\n\n  protected _renderToggleTipLabel = () => {\n    return html`\n      <span class=\"${prefix}--toggletip-label\">\n        <slot></slot>\n      </span>\n    `;\n  };\n\n  protected _renderTooltipButton = () => {\n    return html`\n      <button\n        aria-controls=\"${this.id}\"\n        class=\"${prefix}--toggletip-button\"\n        @click=${this._handleClick}>\n        ${Information16({ id: 'trigger' })}\n      </button>\n    `;\n  };\n\n  protected _renderTooltipContent = () => {\n    return this.autoalign\n      ? html`\n          <span class=\"${prefix}--popover-content\">\n            <div class=\"${prefix}--toggletip-content\">\n              <slot name=\"body-text\"></slot>\n              <div class=\"${prefix}--toggletip-actions\">\n                <slot\n                  name=\"actions\"\n                  @slotchange=\"${this._handleActionsSlotChange}\"></slot>\n              </div>\n            </div>\n            <span class=\"${prefix}--popover-caret\"></span>\n          </span>\n        `\n      : html`\n          <span class=\"${prefix}--popover\">\n            <span class=\"${prefix}--popover-content\">\n              <div class=\"${prefix}--toggletip-content\">\n                <slot name=\"body-text\"></slot>\n                <div class=\"${prefix}--toggletip-actions\">\n                  <slot\n                    name=\"actions\"\n                    @slotchange=\"${this._handleActionsSlotChange}\"></slot>\n                </div>\n              </div>\n            </span>\n            <span class=\"${prefix}--popover-caret\"></span>\n          </span>\n        `;\n  };\n\n  protected _renderInnerContent = () => {\n    return html`\n      ${this._renderTooltipButton()} ${this._renderTooltipContent()}\n    `;\n  };\n\n  updated() {\n    if (this.autoalign && this.open) {\n      // auto align functionality with @floating-ui/dom library\n      const button = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipButton\n      );\n\n      const tooltip = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipContent\n      );\n      const arrowElement = this.shadowRoot?.querySelector(\n        CDSToggletip.selectorToggletipCaret\n      );\n\n      if (button && tooltip) {\n        this.popoverController?.setPlacement({\n          trigger: button as HTMLElement,\n          target: tooltip as HTMLElement,\n          arrowElement: arrowElement as HTMLElement,\n          caret: true,\n          flip: true,\n          alignment: this.alignment,\n        });\n      }\n    }\n  }\n\n  render() {\n    const { alignment, open } = this;\n    const classes = classMap({\n      [`${prefix}--popover-container`]: true,\n      [`${prefix}--popover--caret`]: true,\n      [`${prefix}--popover--high-contrast`]: true,\n      [`${prefix}--popover--open`]: open,\n      [`${prefix}--popover--${alignment}`]: alignment,\n      [`${prefix}--toggletip`]: true,\n      [`${prefix}--toggletip--open`]: open,\n    });\n    return html`\n      ${this._renderToggleTipLabel()}\n      <span class=\"${classes}\">\n        ${this._renderInnerContent()}\n      </span>\n    </span>\n    `;\n  }\n\n  /**\n   * A selector that will return the toggletip content.\n   */\n  static get selectorToggletipContent() {\n    return `.${prefix}--popover-content`;\n  }\n\n  /**\n   * A selector that will return the toggletip caret.\n   */\n  static get selectorToggletipCaret() {\n    return `.${prefix}--popover-caret`;\n  }\n\n  /**\n   * A selector that will return the trigger element.\n   */\n  static get selectorToggletipButton() {\n    return `.${prefix}--toggletip-button`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  static styles = styles;\n}\n\nexport default CDSToggletip;\n"],"mappings":"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"}

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/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":";;;;;;;;AAUA,IAAAA,IAAA,GAAAC,OAAA;AAVA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAyBe,MAAMC,iBAAiB,CAA+B;EACnE;AACF;AACA;;EAGE;AACF;AACA;;EAGE;AACF;AACA;;EAGE;AACF;AACA;AACA;EACEC,WAAWA,CAACC,IAAoB,EAAE;IAAA,IAAAC,gBAAA,CAAAC,OAAA,2BAWhB,MAAY;MAC5B,IAAI,CAACC,gBAAgB,CAAC,CAAC;IACzB,CAAC;IAZC,CAAC,IAAI,CAACH,IAAI,GAAGA,IAAI,EAAEI,aAAa,CAAC,IAAI,CAAC;EACxC;EAEA,MAAMC,YAAYA,CAACC,OAAiC,GAAG,IAAI,CAACA,OAAO,EAAE;IACnE,IAAI,CAACA,OAAO,GAAGA,OAAO;IACtB,MAAM;MAAEC,OAAO;MAAEC;IAAO,CAAC,GAAGF,OAAO;IAEnC,IAAI,CAACG,OAAO,GAAG,IAAAC,eAAU,EAACH,OAAO,EAAEC,MAAM,EAAE,IAAI,CAACG,eAAe,CAAC;EAClE;EAMA,MAAMR,gBAAgBA,CAAA,EAAG;IACvB,MAAM;MAAES,YAAY;MAAEC,SAAS;MAAEC,KAAK;MAAEP,OAAO;MAAEC;IAAO,CAAC,GAAG,IAAI,CAACF,OAAO;IAExE,IAAIS,YAAY;IAChB,QAAQF,SAAS;MACf,KAAK,UAAU;QACbE,YAAY,GAAG,WAAW;QAC1B;MACF,KAAK,WAAW;QACdA,YAAY,GAAG,SAAS;QACxB;MACF,KAAK,aAAa;QAChBA,YAAY,GAAG,cAAc;QAC7B;MACF,KAAK,cAAc;QACjBA,YAAY,GAAG,YAAY;QAC3B;MACF,KAAK,aAAa;QAChBA,YAAY,GAAG,UAAU;QACzB;MACF,KAAK,UAAU;QACbA,YAAY,GAAG,YAAY;QAC3B;MACF,KAAK,cAAc;QACjBA,YAAY,GAAG,WAAW;QAC1B;MACF,KAAK,WAAW;QACdA,YAAY,GAAG,aAAa;QAC5B;MACF;QACEA,YAAY,GAAGF,SAAS;QACxB;IACJ;IAEA,MAAMG,UAAU,GAAG,CACjB,IAAAC,SAAI,EAAC;MAAEC,yBAAyB,EAAE;IAAQ,CAAC,CAAC,EAC5C,IAAAC,WAAM,EAACL,KAAK,GAAG,EAAE,GAAG,CAAC,CAAC,EACtB,IAAIA,KAAK,IAAIF,YAAY,GACrB,CAAC,IAAAQ,UAAK,EAAC;MAAEC,OAAO,EAAET,YAAY;MAAEU,OAAO,EAAE;IAAG,CAAC,CAAC,CAAC,GAC/C,EAAE,CAAC,CACR;IAED,IAAI,IAAI,CAACtB,IAAI,CAACuB,YAAY,CAAC,MAAM,CAAC,EAAE;MAClC,MAAM;QAAEC,CAAC;QAAEC,CAAC;QAAEC,SAAS;QAAEC,cAAc;QAAEC;MAAS,CAAC,GACjD,MAAM,IAAAC,oBAAe,EAACtB,OAAO,EAAEC,MAAM,EAAE;QACrCoB,QAAQ,EAAE,OAAO;QACjBZ,UAAU;QACVU,SAAS,EAAEX;MACb,CAAC,CAAC;MAEJP,MAAM,CAACsB,KAAK,CAACC,IAAI,GAAI,GAAEP,CAAE,IAAG;MAC5BhB,MAAM,CAACsB,KAAK,CAACE,GAAG,GAAI,GAAEP,CAAE,IAAG;MAC3BjB,MAAM,CAACsB,KAAK,CAACG,QAAQ,GAAI,GAAEL,QAAS,EAAC;MAErC,IAAIhB,YAAY,EAAE;QAChB;QACA,MAAM;UAAEY,CAAC,EAAEU,MAAM;UAAET,CAAC,EAAEU;QAAO,CAAC,GAAGR,cAAc,CAACP,KAAK;QAErD,MAAMgB,UAAe,GAAG;UACtBJ,GAAG,EAAE,QAAQ;UACbK,KAAK,EAAE,MAAM;UACbC,MAAM,EAAE,KAAK;UACbP,IAAI,EAAE;QACR,CAAC,CAACL,SAAS,CAACa,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;QAE1B3B,YAAY,CAACkB,KAAK,CAACC,IAAI,GAAGG,MAAM,IAAI,IAAI,GAAI,GAAEA,MAAO,IAAG,GAAG,EAAE;QAC7DtB,YAAY,CAACkB,KAAK,CAACE,GAAG,GAAGG,MAAM,IAAI,IAAI,GAAI,GAAEA,MAAO,IAAG,GAAG,EAAE;QAC5DvB,YAAY,CAACkB,KAAK,CAACO,KAAK,GAAG,EAAE;QAC7BzB,YAAY,CAACkB,KAAK,CAACQ,MAAM,GAAG,EAAE;QAC9B1B,YAAY,CAACkB,KAAK,CAACM,UAAU,CAAC,GAAI,GAAE,CAACxB,YAAY,CAAC4B,WAAW,GAAG,CAAE,IAAG;MACvE;;MAEA;MACA;MACA,IAAI,IAAI,CAACxC,IAAI,CAACyC,OAAO,KAAK,UAAU,EAAE;QAAA,IAAAC,UAAA;QACpC,CAAAA,UAAA,OAAI,CAAC1C,IAAI,cAAA0C,UAAA,eAATA,UAAA,CAAWC,YAAY,CAAC,WAAW,EAAEjB,SAAS,CAAC;MACjD;IACF;EACF;EAEAkB,WAAWA,CAAA,EAAS;IAClB,IAAI,CAAC,IAAI,CAAC5C,IAAI,CAACuB,YAAY,CAAC,MAAM,CAAC,EAAE;MAAA,IAAAsB,aAAA;MACnC,CAAAA,aAAA,OAAI,CAACpC,OAAO,cAAAoC,aAAA,eAAZA,aAAA,CAAAC,IAAA,KAAe,CAAC;MAChB,IAAI,CAACrC,OAAO,GAAGsC,SAAS;IAC1B;EACF;EAEAC,gBAAgBA,CAAA,EAAS;IAAA,IAAAC,cAAA;IACvB,CAAAA,cAAA,OAAI,CAACxC,OAAO,cAAAwC,cAAA,eAAZA,cAAA,CAAAH,IAAA,KAAe,CAAC;IAChB,IAAI,CAACrC,OAAO,GAAGsC,SAAS;EAC1B;AACF;AAACG,OAAA,CAAAhD,OAAA,GAAAJ,iBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/web-components",
-  "version": "2.4.0-rc.1",
+  "version": "2.4.0-rc.3",
   "publishConfig": {
     "access": "public"
   },
@@ -208,5 +208,5 @@
     "zone.js": "~0.14.0"
   },
   "typings": "es/index.d.ts",
-  "gitHead": "a9c5c74c4f876b05a43dec2efffd688d64bf236d"
+  "gitHead": "b287248964ddfb272d3ee87eb515b8651bcc76cf"
 }

package/scss/components/slug/slug.scss

@@ -385,6 +385,15 @@ $colorMap: (
   inline-size: $spacing-04;
 }
 
+:host(#{$prefix}-slug[autoalign][kind='hollow']),
+:host(#{$prefix}-slug[autoalign][dot-type='hollow']) {
+  .#{$prefix}--popover-caret {
+    block-size: $spacing-03;
+    inline-size: $spacing-03;
+    transform: rotate(45deg);
+  }
+}
+
 :host(
     #{$prefix}-slug[autoalign]:not([kind='hollow']):not([dot-type='hollow'])
   ) {