@carbon/web-components 2.37.0 → 2.38.0

package/es/components/toggle/toggle-skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-skeleton.js","sources":["../../../src/components/toggle/toggle-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './toggle.scss?lit';\n\n/**\n * @element cds-toggle-skeleton\n *\n * Skeleton of toggle.\n */\n@customElement(`${prefix}-toggle-skeleton`)\nclass CDSToggleSkeleton extends LitElement {\n  render() {\n    const skeletonClasses = classMap({\n      [`${prefix}--toggle`]: true,\n      [`${prefix}--toggle--skeleton`]: true,\n    });\n\n    return html`\n      <div class=${skeletonClasses}>\n        <div class=\"${prefix}--toggle__skeleton-circle\"></div>\n        <div class=\"${prefix}--toggle__skeleton-rectangle\"></div>\n      </div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSToggleSkeleton;\n"],"names":["customElement"],"mappings":";;;;;;;;;;;;;;AAAA;;;;;AAKG;AAQH;;;;AAIG;AAEH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU,CAAA;IACxC,MAAM,GAAA;QACJ,MAAM,eAAe,GAAG,QAAQ,CAAC;AAC/B,YAAA,CAAC,CAAG,EAAA,MAAM,CAAU,QAAA,CAAA,GAAG,IAAI;AAC3B,YAAA,CAAC,CAAG,EAAA,MAAM,CAAoB,kBAAA,CAAA,GAAG,IAAI;AACtC,SAAA,CAAC;AAEF,QAAA,OAAO,IAAI,CAAA;mBACI,eAAe,CAAA;sBACZ,MAAM,CAAA;sBACN,MAAM,CAAA;;KAEvB;;;AAGI,iBAAM,CAAA,MAAA,GAAG,MAAH;AAfT,iBAAiB,GAAA,UAAA,CAAA;AADtB,IAAAA,aAAa,CAAC,CAAA,EAAG,MAAM,CAAA,gBAAA,CAAkB;AACpC,CAAA,EAAA,iBAAiB,CAgBtB;AAED,0BAAe,iBAAiB;;;;"}

package/es/components/toggle/toggle.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -370,11 +370,11 @@ declare class CDSToggle extends CDSToggle_base {
      * Handles `click` event on the `<button>` in the shadow DOM.
      */
     protected _handleChange(): void;
+    protected _renderCheckmark(): import("lit-html").TemplateResult<1> | undefined;
     /**
-     * Handles `keydown` event on the toggle button.
+     * Specify another element's id to be used as the label for this toggle
      */
-    protected _handleKeydown: (event: KeyboardEvent) => Promise<void>;
-    protected _renderCheckmark(): import("lit-html").TemplateResult<1> | undefined;
+    ariaLabelledby?: string;
     /**
      * The text for the checked state.
      */
@@ -395,6 +395,21 @@ declare class CDSToggle extends CDSToggle_base {
      * The text for the unchecked state.
      */
     labelB: string;
+    /**
+     * Private references of external <label> elements that are
+     * `for="this-toggle-element-id"`
+     */
+    private _externalLabels;
+    /**
+     * Handles `click` on external `<label>`
+     */
+    private _onExternalLabelClick;
+    /**
+     * Finds external toggle `<label>`s and attaches handlers.
+     */
+    private _attachExternalLabels;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
     /**
      * The name of the custom event fired after this changebox changes its checked state.

package/es/components/toggle/toggle.js

@@ -14,12 +14,11 @@ import { prefix } from '../../globals/settings.js';
 import CDSCheckbox from '../checkbox/checkbox.js';
 import { TOGGLE_SIZE } from './defs.js';
 import styles from './toggle.scss.js';
-import HostListener from '../../globals/decorators/host-listener.js';
 import HostListenerMixin from '../../globals/mixins/host-listener.js';
 import { carbonElement } from '../../globals/decorators/carbon-element.js';
 
 /**
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -36,19 +35,10 @@ import { carbonElement } from '../../globals/decorators/carbon-element.js';
 let CDSToggle = class CDSToggle extends HostListenerMixin(CDSCheckbox) {
     constructor() {
         super(...arguments);
-        /**
-         * Handles `keydown` event on the toggle button.
-         */
-        this._handleKeydown = async (event) => {
-            const { key } = event;
-            if (key === ' ') {
-                this._handleChange();
-            }
-        };
         /**
          * The text for the checked state.
          */
-        this.labelA = '';
+        this.labelA = 'On';
         /**
          * Hide label text.
          */
@@ -64,24 +54,36 @@ let CDSToggle = class CDSToggle extends HostListenerMixin(CDSCheckbox) {
         /**
          * The text for the unchecked state.
          */
-        this.labelB = '';
+        this.labelB = 'Off';
+        /**
+         * Private references of external <label> elements that are
+         * `for="this-toggle-element-id"`
+         */
+        this._externalLabels = [];
+        /**
+         * Handles `click` on external `<label>`
+         */
+        this._onExternalLabelClick = () => {
+            var _a;
+            (_a = this._checkboxNode) === null || _a === void 0 ? void 0 : _a.focus();
+            this._handleChange();
+        };
     }
     /**
      * Handles `click` event on the `<button>` in the shadow DOM.
      */
     _handleChange() {
-        const { checked, indeterminate } = this._checkboxNode;
+        const { checked } = this._checkboxNode;
         if (this.disabled || this.readOnly) {
             return;
         }
         this.checked = !checked;
-        this.indeterminate = indeterminate;
         const { eventChange } = this.constructor;
         this.dispatchEvent(new CustomEvent(eventChange, {
             bubbles: true,
             composed: true,
             detail: {
-                indeterminate,
+                checked: this.checked,
             },
         }));
     }
@@ -99,7 +101,31 @@ let CDSToggle = class CDSToggle extends HostListenerMixin(CDSCheckbox) {
       </svg>
     `;
     }
+    /**
+     * Finds external toggle `<label>`s and attaches handlers.
+     */
+    _attachExternalLabels() {
+        const doc = this.ownerDocument || document;
+        const found = this.id
+            ? [...doc.querySelectorAll(`label[for="${this.id}"]`)]
+            : [];
+        this._externalLabels = Array.from(new Set(found));
+        this._externalLabels.forEach((lbl) => {
+            lbl.addEventListener('click', this._onExternalLabelClick);
+        });
+    }
+    connectedCallback() {
+        var _a;
+        (_a = super.connectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this._attachExternalLabels();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = super.disconnectedCallback) === null || _a === void 0 ? void 0 : _a.call(this);
+        this._externalLabels.forEach((lbl) => lbl.removeEventListener('click', this._onExternalLabelClick));
+    }
     render() {
+        var _a, _b;
         const { checked, disabled, labelText, hideLabel, id, name, size, labelA, labelB, value, _handleChange: handleChange, } = this;
         const inputClasses = classMap({
             [`${prefix}--toggle__appearance`]: true,
@@ -111,32 +137,38 @@ let CDSToggle = class CDSToggle extends HostListenerMixin(CDSCheckbox) {
         });
         const labelTextClasses = classMap({
             [`${prefix}--toggle__label-text`]: labelText,
+            [`${prefix}--visually-hidden`]: hideLabel,
         });
-        const stateText = checked ? labelA : labelB;
+        let stateText = '';
+        if (hideLabel) {
+            stateText = labelText || '';
+        }
+        else {
+            stateText = checked ? labelA : labelB;
+        }
+        const labelId = id ? `${id}_label` : undefined;
+        const hasLabelText = ((_a = this.labelText) !== null && _a !== void 0 ? _a : '') !== '';
+        const ariaLabelledby = (_b = this.ariaLabelledby) !== null && _b !== void 0 ? _b : (hasLabelText && labelId);
         return html `
       <button
         class="${prefix}--toggle__button"
         role="switch"
         type="button"
         aria-checked=${checked}
-        aria-lable=${labelText}
-        .checked="${checked}"
+        aria-labelledby=${ifDefined(ariaLabelledby)}
+        .checked=${checked}
         name="${ifDefined(name)}"
         value="${ifDefined(value)}"
         ?disabled=${disabled}
-        id="${id}"></button>
+        id="${id}"
+        @click=${handleChange}></button>
       <label for="${id}" class="${prefix}--toggle__label">
         ${labelText
             ? html `<span class="${labelTextClasses}">${labelText}</span>`
             : null}
         <div class="${inputClasses}">
-          <div class="${toggleClasses}" @click=${handleChange}>
-            ${this._renderCheckmark()}
-          </div>
-          <span
-            ?hidden="${hideLabel}"
-            class="${prefix}--toggle__text"
-            aria-hidden="true"
+          <div class="${toggleClasses}">${this._renderCheckmark()}</div>
+          <span class="${prefix}--toggle__text" aria-hidden="true"
             >${stateText}</span
           >
         </div>
@@ -155,10 +187,8 @@ __decorate([
     query('button')
 ], CDSToggle.prototype, "_checkboxNode", void 0);
 __decorate([
-    HostListener('keydown')
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071
-    // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-], CDSToggle.prototype, "_handleKeydown", void 0);
+    property({ type: String, attribute: 'aria-labelledby' })
+], CDSToggle.prototype, "ariaLabelledby", void 0);
 __decorate([
     property({ attribute: 'label-a' })
 ], CDSToggle.prototype, "labelA", void 0);

package/es/components/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.ts"],"sourcesContent":["/**\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, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSCheckbox from '../checkbox/checkbox';\nimport { TOGGLE_SIZE } from './defs';\nimport styles from './toggle.scss?lit';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TOGGLE_SIZE };\n\n/**\n * Basic toggle.\n *\n * @element cds-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass CDSToggle extends HostListenerMixin(CDSCheckbox) {\n  @query('button')\n  protected _checkboxNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on the `<button>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    const { checked, indeterminate } = this._checkboxNode;\n    if (this.disabled || this.readOnly) {\n      return;\n    }\n    this.checked = !checked;\n    this.indeterminate = indeterminate;\n    const { eventChange } = this.constructor as typeof CDSCheckbox;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          indeterminate,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `keydown` event on the toggle button.\n   */\n  @HostListener('keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleKeydown = async (event: KeyboardEvent) => {\n    const { key } = event;\n\n    if (key === ' ') {\n      this._handleChange();\n    }\n  };\n\n  protected _renderCheckmark() {\n    if (this.size !== TOGGLE_SIZE.SMALL) {\n      return undefined;\n    }\n    return html`\n      <svg\n        class=\"${prefix}--toggle__check\"\n        width=\"6px\"\n        height=\"5px\"\n        viewBox=\"0 0 6 5\">\n        <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n      </svg>\n    `;\n  }\n\n  /**\n   * The text for the checked state.\n   */\n  @property({ attribute: 'label-a' })\n  labelA = '';\n\n  /**\n   * Hide label text.\n   */\n  @property({ reflect: true, type: Boolean })\n  hideLabel = false;\n\n  /**\n   * Read only boolean.\n   */\n  @property({ reflect: true, attribute: 'read-only', type: Boolean })\n  readOnly = false;\n\n  /**\n   * Toggle size.\n   */\n  @property({ reflect: true })\n  size = TOGGLE_SIZE.REGULAR;\n\n  /**\n   * The text for the unchecked state.\n   */\n  @property({ attribute: 'label-b' })\n  labelB = '';\n\n  render() {\n    const {\n      checked,\n      disabled,\n      labelText,\n      hideLabel,\n      id,\n      name,\n      size,\n      labelA,\n      labelB,\n      value,\n      _handleChange: handleChange,\n    } = this;\n    const inputClasses = classMap({\n      [`${prefix}--toggle__appearance`]: true,\n      [`${prefix}--toggle__appearance--${size}`]: size,\n    });\n    const toggleClasses = classMap({\n      [`${prefix}--toggle__switch`]: true,\n      [`${prefix}--toggle__switch--checked`]: checked,\n    });\n\n    const labelTextClasses = classMap({\n      [`${prefix}--toggle__label-text`]: labelText,\n    });\n    const stateText = checked ? labelA : labelB;\n    return html`\n      <button\n        class=\"${prefix}--toggle__button\"\n        role=\"switch\"\n        type=\"button\"\n        aria-checked=${checked}\n        aria-lable=${labelText}\n        .checked=\"${checked}\"\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        ?disabled=${disabled}\n        id=\"${id}\"></button>\n      <label for=\"${id}\" class=\"${prefix}--toggle__label\">\n        ${labelText\n          ? html`<span class=\"${labelTextClasses}\">${labelText}</span>`\n          : null}\n        <div class=\"${inputClasses}\">\n          <div class=\"${toggleClasses}\" @click=${handleChange}>\n            ${this._renderCheckmark()}\n          </div>\n          <span\n            ?hidden=\"${hideLabel}\"\n            class=\"${prefix}--toggle__text\"\n            aria-hidden=\"true\"\n            >${stateText}</span\n          >\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this changebox changes its checked state.\n   */\n  static get eventChange() {\n    return `${prefix}-toggle-changed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSToggle;\n"],"names":["customElement"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../../src/components/toggle/toggle.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../globals/settings';\nimport CDSCheckbox from '../checkbox/checkbox';\nimport { TOGGLE_SIZE } from './defs';\nimport styles from './toggle.scss?lit';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\nexport { TOGGLE_SIZE };\n\n/**\n * Basic toggle.\n *\n * @element cds-toggle\n * @slot label-text - The label text.\n * @slot checked-text - The text for the checked state.\n * @slot unchecked-text - The text for the unchecked state.\n * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.\n */\n@customElement(`${prefix}-toggle`)\nclass CDSToggle extends HostListenerMixin(CDSCheckbox) {\n  @query('button')\n  protected _checkboxNode!: HTMLInputElement;\n\n  /**\n   * Handles `click` event on the `<button>` in the shadow DOM.\n   */\n  protected _handleChange() {\n    const { checked } = this._checkboxNode;\n    if (this.disabled || this.readOnly) {\n      return;\n    }\n    this.checked = !checked;\n    const { eventChange } = this.constructor as typeof CDSToggle;\n    this.dispatchEvent(\n      new CustomEvent(eventChange, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          checked: this.checked,\n        },\n      })\n    );\n  }\n\n  protected _renderCheckmark() {\n    if (this.size !== TOGGLE_SIZE.SMALL) {\n      return undefined;\n    }\n    return html`\n      <svg\n        class=\"${prefix}--toggle__check\"\n        width=\"6px\"\n        height=\"5px\"\n        viewBox=\"0 0 6 5\">\n        <path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\" />\n      </svg>\n    `;\n  }\n\n  /**\n   * Specify another element's id to be used as the label for this toggle\n   */\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledby?: string;\n\n  /**\n   * The text for the checked state.\n   */\n  @property({ attribute: 'label-a' })\n  labelA = 'On';\n\n  /**\n   * Hide label text.\n   */\n  @property({ reflect: true, type: Boolean })\n  hideLabel = false;\n\n  /**\n   * Read only boolean.\n   */\n  @property({ reflect: true, attribute: 'read-only', type: Boolean })\n  readOnly = false;\n\n  /**\n   * Toggle size.\n   */\n  @property({ reflect: true })\n  size = TOGGLE_SIZE.REGULAR;\n\n  /**\n   * The text for the unchecked state.\n   */\n  @property({ attribute: 'label-b' })\n  labelB = 'Off';\n\n  /**\n   * Private references of external <label> elements that are\n   * `for=\"this-toggle-element-id\"`\n   */\n  private _externalLabels: HTMLLabelElement[] = [];\n\n  /**\n   * Handles `click` on external `<label>`\n   */\n  private _onExternalLabelClick = () => {\n    this._checkboxNode?.focus();\n    this._handleChange();\n  };\n\n  /**\n   * Finds external toggle `<label>`s and attaches handlers.\n   */\n  private _attachExternalLabels() {\n    const doc = this.ownerDocument || document;\n\n    const found = this.id\n      ? [...doc.querySelectorAll<HTMLLabelElement>(`label[for=\"${this.id}\"]`)]\n      : [];\n\n    this._externalLabels = Array.from(new Set(found));\n    this._externalLabels.forEach((lbl) => {\n      lbl.addEventListener('click', this._onExternalLabelClick);\n    });\n  }\n\n  connectedCallback() {\n    super.connectedCallback?.();\n    this._attachExternalLabels();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback?.();\n    this._externalLabels.forEach((lbl) =>\n      lbl.removeEventListener('click', this._onExternalLabelClick)\n    );\n  }\n\n  render() {\n    const {\n      checked,\n      disabled,\n      labelText,\n      hideLabel,\n      id,\n      name,\n      size,\n      labelA,\n      labelB,\n      value,\n      _handleChange: handleChange,\n    } = this;\n    const inputClasses = classMap({\n      [`${prefix}--toggle__appearance`]: true,\n      [`${prefix}--toggle__appearance--${size}`]: size,\n    });\n    const toggleClasses = classMap({\n      [`${prefix}--toggle__switch`]: true,\n      [`${prefix}--toggle__switch--checked`]: checked,\n    });\n\n    const labelTextClasses = classMap({\n      [`${prefix}--toggle__label-text`]: labelText,\n      [`${prefix}--visually-hidden`]: hideLabel,\n    });\n\n    let stateText = '';\n\n    if (hideLabel) {\n      stateText = labelText || '';\n    } else {\n      stateText = checked ? labelA : labelB;\n    }\n\n    const labelId = id ? `${id}_label` : undefined;\n\n    const hasLabelText = (this.labelText ?? '') !== '';\n\n    const ariaLabelledby = this.ariaLabelledby ?? (hasLabelText && labelId);\n\n    return html`\n      <button\n        class=\"${prefix}--toggle__button\"\n        role=\"switch\"\n        type=\"button\"\n        aria-checked=${checked}\n        aria-labelledby=${ifDefined(ariaLabelledby)}\n        .checked=${checked}\n        name=\"${ifDefined(name)}\"\n        value=\"${ifDefined(value)}\"\n        ?disabled=${disabled}\n        id=\"${id}\"\n        @click=${handleChange}></button>\n      <label for=\"${id}\" class=\"${prefix}--toggle__label\">\n        ${labelText\n          ? html`<span class=\"${labelTextClasses}\">${labelText}</span>`\n          : null}\n        <div class=\"${inputClasses}\">\n          <div class=\"${toggleClasses}\">${this._renderCheckmark()}</div>\n          <span class=\"${prefix}--toggle__text\" aria-hidden=\"true\"\n            >${stateText}</span\n          >\n        </div>\n      </label>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after this changebox changes its checked state.\n   */\n  static get eventChange() {\n    return `${prefix}-toggle-changed`;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSToggle;\n"],"names":["customElement"],"mappings":"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"}

package/es/components/toggle/toggle.scss.js

@@ -7,7 +7,7 @@
 
 import { css } from 'lit';
 
-var styles = css([".cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--toggle{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--toggle__label-text{color:var(--cds-text-secondary,#525252);display:block;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:1rem}.cds--toggle__button{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--toggle__button:focus{outline:none}.cds--toggle__appearance{align-items:center;-moz-column-gap:.5rem;column-gap:.5rem;cursor:pointer;display:inline-grid;grid-template-columns:max-content max-content}.cds--toggle__switch{background-color:var(--cds-toggle-off,#8d8d8d);block-size:1.5rem;border-radius:.75rem;inline-size:3rem;position:relative;transition:background-color 70ms cubic-bezier(.2,0,1,.9)}.cds--toggle__switch:before{background-color:var(--cds-icon-on-color,#fff);block-size:1.125rem;border-radius:50%;content:\"\";inline-size:1.125rem;inset-block-start:.1875rem;inset-inline-start:.1875rem;position:absolute;transition:transform 70ms cubic-bezier(.2,0,1,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--toggle__switch:before{transition:none}}.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch:after,.cds--toggle__button:focus+.cds--toggle__label .cds--toggle__switch:after{block-size:100%;border-radius:1rem;content:\"\";display:block;outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--toggle__switch--checked{background-color:var(--cds-support-success,#24a148)}.cds--toggle__switch--checked:before{transform:translateX(1.5rem)}.cds--toggle__text{color:var(--cds-text-primary,#161616);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.cds--toggle__appearance--sm .cds--toggle__switch{block-size:1rem;inline-size:2rem}.cds--toggle__appearance--sm .cds--toggle__switch:before{block-size:.625rem;inline-size:.625rem}.cds--toggle__appearance--sm .cds--toggle__switch--checked:before{transform:translateX(1rem)}.cds--toggle__check{block-size:.3125rem;position:absolute;fill:var(--cds-support-success,#24a148);inline-size:.375rem;inset-block-start:.375rem;inset-inline-end:.3125rem;visibility:hidden}.cds--toggle__switch--checked .cds--toggle__check{visibility:visible}.cds--toggle--disabled .cds--toggle__appearance,:host(cds-toggle[disabled]) .cds--toggle__appearance{cursor:not-allowed}.cds--toggle--disabled .cds--toggle__label-text,.cds--toggle--disabled .cds--toggle__text,:host(cds-toggle[disabled]) .cds--toggle__label-text,:host(cds-toggle[disabled]) .cds--toggle__text{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--toggle--disabled .cds--toggle__switch,:host(cds-toggle[disabled]) .cds--toggle__switch{background-color:var(--cds-button-disabled,#c6c6c6)}.cds--toggle--disabled .cds--toggle__switch:before,:host(cds-toggle[disabled]) .cds--toggle__switch:before{background-color:var(--cds-icon-on-color-disabled,#8d8d8d)}.cds--toggle--disabled .cds--toggle__check,:host(cds-toggle[disabled]) .cds--toggle__check{fill:var(--cds-button-disabled,#c6c6c6)}.cds--toggle--readonly .cds--toggle__appearance,:host(cds-toggle[read-only]) .cds--toggle__appearance{cursor:default}.cds--toggle--readonly .cds--toggle__switch,:host(cds-toggle[read-only]) .cds--toggle__switch{background-color:transparent;border:1px solid var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--toggle--readonly .cds--toggle__switch:before,:host(cds-toggle[read-only]) .cds--toggle__switch:before{background-color:var(--cds-text-primary,#161616);inset-block-start:.125rem;inset-inline-start:.125rem}.cds--toggle--readonly .cds--toggle__check,:host(cds-toggle[read-only]) .cds--toggle__check{fill:var(--cds-background,#fff);inset-block-start:.3125rem;inset-inline-end:.25rem}.cds--toggle--readonly .cds--toggle__text,:host(cds-toggle[read-only]) .cds--toggle__text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--toggle__switch,.cds--toggle__switch:before{outline:1px solid transparent}.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch,.cds--toggle__button:focus+.cds--toggle__label .cds--toggle__switch{color:Highlight;outline:1px solid Highlight}}.cds--toggle--skeleton{align-items:center;display:flex}.cds--toggle--skeleton .cds--toggle__skeleton-circle{background:var(--cds-skeleton-background,#e8e8e8);block-size:1.125rem;border-radius:50%;inline-size:1.125rem;overflow:hidden;position:relative}.cds--toggle--skeleton .cds--toggle__skeleton-circle:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:200%;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--toggle--skeleton .cds--toggle__skeleton-circle:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--toggle--skeleton .cds--toggle__skeleton-circle{background:CanvasText}.cds--toggle--skeleton .cds--toggle__skeleton-circle:before{background:Canvas;forced-color-adjust:none}}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle{background:var(--cds-skeleton-background,#e8e8e8);block-size:.5rem;border:none;box-shadow:none;inline-size:1.5rem;margin-inline-start:.5rem;padding:0;pointer-events:none;position:relative}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active,.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus,.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover{border:none;cursor:default;outline:none}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--toggle--skeleton .cds--toggle__skeleton-rectangle{background:CanvasText}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:before{background:Canvas;forced-color-adjust:none}}[dir=rtl] .cds--toggle__switch--checked:before{transform:translateX(-1.5rem)}[dir=rtl] .cds--toggle__appearance--sm .cds--toggle__switch--checked:before{transform:translateX(-1rem)}:host(cds-toggle){outline:none}:host(cds-toggle[disabled]) .cds--toggle__appearance{cursor:not-allowed}"]);
+var styles = css([".cds--assistive-text,.cds--visually-hidden{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}@keyframes cds--hide-feedback{0%{opacity:1;visibility:inherit}to{opacity:0;visibility:hidden}}@keyframes cds--show-feedback{0%{opacity:0;visibility:hidden}to{opacity:1;visibility:inherit}}@keyframes cds--skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}to{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--toggle{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--toggle__label-text{color:var(--cds-text-secondary,#525252);display:block;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333);margin-block-end:1rem}.cds--toggle__button{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px;visibility:inherit;white-space:nowrap}.cds--toggle__button:focus{outline:none}.cds--toggle__appearance{align-items:center;-moz-column-gap:.5rem;column-gap:.5rem;cursor:pointer;display:inline-grid;grid-template-columns:max-content max-content}.cds--toggle__switch{background-color:var(--cds-toggle-off,#8d8d8d);block-size:1.5rem;border-radius:.75rem;inline-size:3rem;position:relative;transition:background-color 70ms cubic-bezier(.2,0,1,.9)}.cds--toggle__switch:before{background-color:var(--cds-icon-on-color,#fff);block-size:1.125rem;border-radius:50%;content:\"\";inline-size:1.125rem;inset-block-start:.1875rem;inset-inline-start:.1875rem;position:absolute;transition:transform 70ms cubic-bezier(.2,0,1,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--toggle__switch:before{transition:none}}.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch:after,.cds--toggle__button:focus+.cds--toggle__label .cds--toggle__switch:after{block-size:100%;border-radius:1rem;content:\"\";display:block;outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--toggle__switch--checked{background-color:var(--cds-support-success,#24a148)}.cds--toggle__switch--checked:before{transform:translateX(1.5rem)}.cds--toggle__text{color:var(--cds-text-primary,#161616);font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);letter-spacing:var(--cds-body-01-letter-spacing,.16px);line-height:var(--cds-body-01-line-height,1.42857)}.cds--toggle__appearance--sm .cds--toggle__switch{block-size:1rem;inline-size:2rem}.cds--toggle__appearance--sm .cds--toggle__switch:before{block-size:.625rem;inline-size:.625rem}.cds--toggle__appearance--sm .cds--toggle__switch--checked:before{transform:translateX(1rem)}.cds--toggle__check{block-size:.3125rem;position:absolute;fill:var(--cds-support-success,#24a148);inline-size:.375rem;inset-block-start:.375rem;inset-inline-end:.3125rem;visibility:hidden}.cds--toggle__switch--checked .cds--toggle__check{visibility:visible}.cds--toggle--disabled .cds--toggle__appearance,:host(cds-toggle[disabled]) .cds--toggle__appearance{cursor:not-allowed}.cds--toggle--disabled .cds--toggle__label-text,.cds--toggle--disabled .cds--toggle__text,:host(cds-toggle[disabled]) .cds--toggle__label-text,:host(cds-toggle[disabled]) .cds--toggle__text{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--toggle--disabled .cds--toggle__switch,:host(cds-toggle[disabled]) .cds--toggle__switch{background-color:var(--cds-button-disabled,#c6c6c6)}.cds--toggle--disabled .cds--toggle__switch:before,:host(cds-toggle[disabled]) .cds--toggle__switch:before{background-color:var(--cds-icon-on-color-disabled,#8d8d8d)}.cds--toggle--disabled .cds--toggle__check,:host(cds-toggle[disabled]) .cds--toggle__check{fill:var(--cds-button-disabled,#c6c6c6)}.cds--toggle--readonly .cds--toggle__appearance,:host(cds-toggle[read-only]) .cds--toggle__appearance{cursor:default}.cds--toggle--readonly .cds--toggle__switch,:host(cds-toggle[read-only]) .cds--toggle__switch{background-color:transparent;border:1px solid var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--toggle--readonly .cds--toggle__switch:before,:host(cds-toggle[read-only]) .cds--toggle__switch:before{background-color:var(--cds-text-primary,#161616);inset-block-start:.125rem;inset-inline-start:.125rem}.cds--toggle--readonly .cds--toggle__check,:host(cds-toggle[read-only]) .cds--toggle__check{fill:var(--cds-background,#fff);inset-block-start:.3125rem;inset-inline-end:.25rem}.cds--toggle--readonly .cds--toggle__text,:host(cds-toggle[read-only]) .cds--toggle__text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--toggle__switch,.cds--toggle__switch:before{outline:1px solid transparent}.cds--toggle:not(.cds--toggle--disabled):active .cds--toggle__switch,.cds--toggle__button:focus+.cds--toggle__label .cds--toggle__switch{color:Highlight;outline:1px solid Highlight}}.cds--toggle--skeleton{align-items:center;display:flex}.cds--toggle--skeleton .cds--toggle__skeleton-circle{background:var(--cds-skeleton-background,#e8e8e8);block-size:1.125rem;border-radius:50%;inline-size:1.125rem;overflow:hidden;position:relative}.cds--toggle--skeleton .cds--toggle__skeleton-circle:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:200%;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--toggle--skeleton .cds--toggle__skeleton-circle:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--toggle--skeleton .cds--toggle__skeleton-circle{background:CanvasText}.cds--toggle--skeleton .cds--toggle__skeleton-circle:before{background:Canvas;forced-color-adjust:none}}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle{background:var(--cds-skeleton-background,#e8e8e8);block-size:.5rem;border:none;box-shadow:none;inline-size:1.5rem;margin-inline-start:.5rem;padding:0;pointer-events:none;position:relative}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:active,.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:focus,.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:hover{border:none;cursor:default;outline:none}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:before{animation:cds--skeleton 3s ease-in-out infinite;background:var(--cds-skeleton-element,#c6c6c6);block-size:100%;content:\"\";inline-size:100%;inset-inline-start:0;position:absolute;will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--toggle--skeleton .cds--toggle__skeleton-rectangle{background:CanvasText}.cds--toggle--skeleton .cds--toggle__skeleton-rectangle:before{background:Canvas;forced-color-adjust:none}}[dir=rtl] .cds--toggle__switch--checked:before{transform:translateX(-1.5rem)}[dir=rtl] .cds--toggle__appearance--sm .cds--toggle__switch--checked:before{transform:translateX(-1rem)}:host(cds-toggle){outline:none}:host(cds-toggle) .cds--toggle__label{-webkit-user-select:none;-moz-user-select:none;user-select:none}:host(cds-toggle[disabled]) .cds--toggle__appearance{cursor:not-allowed}:host(cds-toggle[read-only]) .cds--toggle__switch{border:none;box-shadow:inset 0 0 0 1px var(--cds-icon-disabled,hsla(0,0%,9%,.25))}:host(cds-toggle[read-only]) .cds--toggle__switch:before{inset-block-start:.1875rem;inset-inline-start:.1875rem}:host(cds-toggle[read-only]) .cds--toggle__check{inset-block-start:.375rem;inset-inline-end:.3125rem}"]);
 
 export { styles as default };
 //# sourceMappingURL=toggle.scss.js.map

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

@@ -153,9 +153,11 @@ let CDSToggletip = CDSToggletip_1 = class CDSToggletip extends HostListenerMixin
      * @param event The event.
      */
     _handleFocusOut(event) {
-        if (!this.contains(event.relatedTarget)) {
-            this.open = false;
+        const path = event.composedPath();
+        if (path.includes(this)) {
+            return;
         }
+        this.open = false;
     }
     updated() {
         var _a, _b, _c, _d;

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

@@ -1 +1 @@
-{"version":3,"file":"toggletip.js","sources":["../../../src/components/toggle-tip/toggletip.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport Information16 from '@carbon/icons/es/information/16.js';\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 FloatingUIContoller from '../../globals/controllers/floating-controller';\nimport styles from './toggletip.scss?lit';\nimport { iconLoader } from '../../globals/internal/icon-loader';\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 FloatingUIContoller(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   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.\n   */\n  @property({ type: Number, attribute: 'alignment-axis-offset' })\n  alignmentAxisOffset = 0;\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   * The label for the toggle button\n   */\n  @property({ attribute: 'button-label' })\n  buttonLabel = 'Show information';\n\n  /**\n   * Set whether toggletip is open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Set whether toggletip is open by default.\n   */\n  @property({ type: Boolean, attribute: 'default-open' })\n  defaultOpen = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.defaultOpen && !this.hasAttribute('open')) {\n      this.open = true;\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleActionsSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement).assignedNodes();\n    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071\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  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071\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  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071\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        aria-label=\"${this.buttonLabel}\"\n        class=\"${prefix}--toggletip-button\"\n        @click=${this._handleClick}>\n        <slot name=\"trigger\"\n          >${iconLoader(Information16, { id: 'trigger' })}\n        </slot>\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) {\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        // Ensure toggletip is visible when rendered in a large scrollable container (storybook parity)\n        button.scrollIntoView({ block: 'center', inline: 'center' });\n\n        this.popoverController?.setPlacement({\n          trigger: button as HTMLElement,\n          target: tooltip as HTMLElement,\n          arrowElement: arrowElement as HTMLElement,\n          caret: true,\n          flipArguments: { fallbackAxisSideDirection: 'start' },\n          alignment: this.alignment,\n          open: this.open,\n          alignmentAxisOffset: this.alignmentAxisOffset,\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}\"> ${this._renderInnerContent()} </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"],"names":["FloatingUIContoller","customElement"],"mappings":"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"}
+{"version":3,"file":"toggletip.js","sources":["../../../src/components/toggle-tip/toggletip.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2025\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport Information16 from '@carbon/icons/es/information/16.js';\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 FloatingUIContoller from '../../globals/controllers/floating-controller';\nimport styles from './toggletip.scss?lit';\nimport { iconLoader } from '../../globals/internal/icon-loader';\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 FloatingUIContoller(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   * **Experimental:** Provide an offset value for alignment axis. Only takes effect when `autoalign` is enabled.\n   */\n  @property({ type: Number, attribute: 'alignment-axis-offset' })\n  alignmentAxisOffset = 0;\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   * The label for the toggle button\n   */\n  @property({ attribute: 'button-label' })\n  buttonLabel = 'Show information';\n\n  /**\n   * Set whether toggletip is open\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Set whether toggletip is open by default.\n   */\n  @property({ type: Boolean, attribute: 'default-open' })\n  defaultOpen = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.defaultOpen && !this.hasAttribute('open')) {\n      this.open = true;\n    }\n  }\n\n  /**\n   * Handles `slotchange` event.\n   */\n  private _handleActionsSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement).assignedNodes();\n    // eslint-disable-next-line  @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20071\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  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071\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  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20071\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  protected _handleFocusOut(event: FocusEvent) {\n    const path = event.composedPath();\n    if (path.includes(this as unknown as EventTarget)) {\n      return;\n    }\n    this.open = false;\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        aria-label=\"${this.buttonLabel}\"\n        class=\"${prefix}--toggletip-button\"\n        @click=${this._handleClick}>\n        <slot name=\"trigger\"\n          >${iconLoader(Information16, { id: 'trigger' })}\n        </slot>\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) {\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        // Ensure toggletip is visible when rendered in a large scrollable container (storybook parity)\n        button.scrollIntoView({ block: 'center', inline: 'center' });\n\n        this.popoverController?.setPlacement({\n          trigger: button as HTMLElement,\n          target: tooltip as HTMLElement,\n          arrowElement: arrowElement as HTMLElement,\n          caret: true,\n          flipArguments: { fallbackAxisSideDirection: 'start' },\n          alignment: this.alignment,\n          open: this.open,\n          alignmentAxisOffset: this.alignmentAxisOffset,\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}\"> ${this._renderInnerContent()} </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"],"names":["FloatingUIContoller","customElement"],"mappings":"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"}