@carbon/web-components 2.52.0 → 2.53.0

package/es/components/tearsheet/tearsheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"tearsheet.js","names":["customElement"],"sources":["../../../src/components/tearsheet/tearsheet.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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 { LitElement, html } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../button/index';\nimport '../layer/index';\nimport '../button/button-set-base';\nimport '../modal/index';\nimport {\n  TEARSHEET_INFLUENCER_PLACEMENT,\n  TEARSHEET_INFLUENCER_WIDTH,\n  TEARSHEET_WIDTH,\n} from './defs';\n\nexport {\n  TEARSHEET_INFLUENCER_PLACEMENT,\n  TEARSHEET_INFLUENCER_WIDTH,\n  TEARSHEET_WIDTH,\n};\n\nconst maxStackDepth = 3;\ntype StackHandler = (newDepth: number, newPosition: number) => void;\ninterface StackState {\n  open: StackHandler[];\n  all: StackHandler[];\n}\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--tearsheet`;\nconst blockClassModalHeader = `${prefix}--modal-header`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Tearsheet.\n *\n * @deprecated Use Carbon for IBM Products `tearsheet` component.\n *   This component has been deprecated in `@carbon/web-components` and will instead be maintained\n *   in the Carbon for IBM Products library:\n *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-tearsheet\n * @csspart dialog The dialog.\n * @fires cds-tearsheet-beingclosed\n *   The custom event fired before this tearsheet is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this tearsheet.\n * @fires cds-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.\n */\n@customElement(`${prefix}-tearsheet`)\nclass CDSTearsheet extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this tearsheet gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of tearsheet content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of tearsheet content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track tearsheet.\n   */\n  @query(`.${blockClass}__container`)\n  private _tearsheet!: HTMLDivElement;\n\n  @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n  private _actions!: Array<HTMLElement>;\n\n  @state()\n  _actionsCount = 0;\n\n  @state()\n  _hasHeaderActions = false;\n\n  @state()\n  _hasLabel = false;\n\n  @state()\n  _hasSlug = false;\n\n  @state()\n  _hasTitle = false;\n\n  @state()\n  _hasDescription = false;\n\n  @state()\n  _hasInfluencerLeft = false;\n\n  @state()\n  _hasInfluencerRight = false;\n\n  @state()\n  _isOpen = false;\n\n  @state()\n  _hasHeaderNavigation = false;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    if (\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      event.composedPath().indexOf(this.shadowRoot!) < 0 &&\n      !this.preventCloseOnClickOutside\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.relatedTarget The event relatedTarget.\n   */\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    if (!this._topOfStack()) {\n      return;\n    }\n\n    const {\n      // condensedActions,\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This tearsheet is open\n    // * The viewport still has focus\n    // * Tearsheet body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForTearsheet } = this\n      .constructor as typeof CDSTearsheet;\n\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForTearsheet),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForTearsheet),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if ((key === 'Esc' || key === 'Escape') && this._topOfStack()) {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  private _checkSetHasSlot(e: Event) {\n    const t = e.target as HTMLSlotElement;\n    const dataPostfix = t.getAttribute('data-postfix');\n    const postfix = dataPostfix ? `-${dataPostfix}` : '';\n\n    // snake `ab-cd-ef` to _has camel case _hasAbCdEf\n    const hasName = `_has-${t.name}${postfix}`.replace(/-./g, (c) =>\n      c[1].toUpperCase()\n    );\n    this[hasName] = (t?.assignedElements()?.length ?? 0) > 0;\n  }\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  private _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof CDSTearsheet).selectorCloseButton\n      )\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this tearsheet.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSTearsheet).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSTearsheet).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  private _handleSlugChange(e: Event) {\n    const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n    this._hasSlug = childItems.length > 0;\n    if (this._hasSlug) {\n      childItems[0].setAttribute('size', 'lg');\n      this.setAttribute('slug', '');\n    } else {\n      this.removeAttribute('slug');\n    }\n  }\n\n  /**\n   * Optional aria label for the tearsheet\n   */\n  @property({ reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * Sets the close button icon description\n   */\n  @property({ reflect: true, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * Enable a close icon ('x') in the header area of the tearsheet. By default,\n   * (when this prop is omitted, or undefined or null) a tearsheet does not\n   * display a close icon if there are navigation actions (\"transactional\n   * tearsheet\") and displays one if there are no navigation actions (\"passive\n   * tearsheet\"), and that behavior can be overridden if required by setting\n   * this prop to either true or false.\n   */\n\n  @property({ reflect: true, type: Boolean, attribute: 'has-close-icon' })\n  hasCloseIcon = false;\n\n  /**\n   * The placement of the influencer section, 'left' or 'right'.\n   */\n  @property({ reflect: true, attribute: 'influencer-placement' })\n  influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;\n\n  /**\n   * The width of the influencer section, 'narrow' or 'wide'.\n   */\n  @property({ reflect: true, attribute: 'influencer-width' })\n  influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;\n\n  /**\n   * `true` if the tearsheet should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Prevent closing on click outside of tearsheet\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * The initial location of focus in the side panel\n   */\n  @property({\n    reflect: true,\n    attribute: 'selector-initial-focus',\n    type: String,\n  })\n  selectorInitialFocus;\n\n  /**\n   * The width of the influencer section, 'narrow' or 'wide'.\n   */\n  @property({ reflect: true, attribute: 'width' })\n  width = TEARSHEET_WIDTH.NARROW;\n\n  private _checkUpdateActionSizes = () => {\n    if (this._actions) {\n      for (let i = 0; i < this._actions.length; i++) {\n        this._actions[i].setAttribute(\n          'size',\n          this.width === 'wide' ? '2xl' : 'xl'\n        );\n      }\n    }\n  };\n\n  private _maxActions = 4;\n  private _handleActionsChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const actions = target?.assignedElements();\n    const actionsCount = actions?.length ?? 0;\n\n    if (actionsCount > this._maxActions) {\n      this._actionsCount = this._maxActions;\n      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n      console.error(`Too many tearsheet actions, max ${this._maxActions}.`);\n    } else {\n      this._actionsCount = actionsCount;\n    }\n\n    for (let i = 0; i < actions?.length; i++) {\n      if (i + 1 > this._maxActions) {\n        // hide excessive tearsheet actions\n        actions[i].setAttribute('hidden', 'true');\n        actions[i].setAttribute(\n          `data-actions-limit-${this._maxActions}-exceeded`,\n          `${actions.length}`\n        );\n      } else {\n        actions[i].classList.add(`${blockClassActionSet}__action-button`);\n      }\n    }\n    this._checkUpdateActionSizes();\n  }\n\n  // Data structure to communicate the state of tearsheet stacking\n  // (i.e. when more than one tearsheet is open). Each tearsheet supplies a\n  // handler to be called whenever the stacking of the tearsheets changes, which\n  // happens when a tearsheet opens or closes. The 'open' array contains one\n  // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.\n  // The 'all' array contains all the handlers for open and closed tearsheets.\n\n  @state()\n  _stackDepth = -1;\n\n  @state()\n  _stackPosition = -1;\n\n  private _topOfStack = () => {\n    return this._stackDepth === this._stackPosition;\n  };\n\n  private static _stack: StackState = {\n    open: [],\n    all: [],\n  };\n  private _notifyStack = () => {\n    CDSTearsheet._stack.all.forEach(\n      (handler: (stackSize: number, position: number) => void) => {\n        handler(\n          Math.min(CDSTearsheet._stack.open.length, maxStackDepth),\n          CDSTearsheet._stack.open.indexOf(handler) + 1\n        );\n      }\n    );\n  };\n\n  private _handleStackChange: StackHandler = (newDepth, newPosition) => {\n    this._stackDepth = newDepth;\n    this._stackPosition = newPosition;\n    if (this._stackDepth > 1 && this._stackPosition > 0) {\n      this.setAttribute('stack-position', `${newPosition}`);\n      this.setAttribute('stack-depth', `${this._stackDepth}`);\n    } else {\n      this.removeAttribute('stack-position');\n      this.removeAttribute('stack-depth');\n    }\n  };\n\n  private _updateStack = () => {\n    if (this.open) {\n      CDSTearsheet._stack.open.push(this._handleStackChange);\n    } else {\n      const indexOpen = CDSTearsheet._stack.open.indexOf(\n        this._handleStackChange\n      );\n      if (indexOpen >= 0) {\n        CDSTearsheet._stack.open.splice(indexOpen, 1);\n      }\n    }\n    this._notifyStack();\n  };\n\n  actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    CDSTearsheet._stack.all.push(this._handleStackChange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    const indexAll = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n    CDSTearsheet._stack.all.splice(indexAll, 1);\n    const indexOpen = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n    CDSTearsheet._stack.open.splice(indexOpen, 1);\n  }\n\n  render() {\n    const {\n      closeIconDescription,\n      influencerPlacement,\n      influencerWidth,\n      open,\n      width,\n    } = this;\n\n    const actionsMultiple = ['', 'single', 'double', 'triple'][\n      this._actionsCount\n    ];\n\n    const headerFieldsTemplate = html`<div\n      class=${`${blockClass}__header-fields`}>\n      <h2 class=${`${blockClassModalHeader}__label`} ?hidden=${!this._hasLabel}>\n        <slot name=\"label\" @slotchange=${this._checkSetHasSlot}></slot>\n      </h2>\n      <h3\n        class=${`${blockClassModalHeader}__heading ${blockClass}__heading`}\n        ?hidden=${!this._hasTitle}>\n        <slot name=\"title\" @slotchange=${this._checkSetHasSlot}></slot>\n      </h3>\n      <div\n        class=${`${blockClass}__header-description`}\n        ?hidden=${!this._hasDescription}>\n        <slot name=\"description\" @slotchange=${this._checkSetHasSlot}></slot>\n      </div>\n    </div>`;\n\n    const headerActionsTemplate = html` <div\n      class=${`${blockClass}__header-actions`}\n      ?hidden=${!this._hasHeaderActions || this.width === 'narrow'}>\n      <slot name=\"header-actions\" @slotchange=${this._checkSetHasSlot}></slot>\n    </div>`;\n\n    const headerTemplate = html` <cds-modal-header\n      class=${`${blockClass}__header`}\n      ?has-close-icon=${this.hasCloseIcon || this?._actionsCount === 0}\n      ?has-navigation=${this._hasHeaderNavigation && this.width === 'wide'}\n      ?has-header-actions=${this._hasHeaderActions && this.width === 'wide'}\n      ?has-actions=${this?._actionsCount > 0}\n      ?has-slug=${this?._hasSlug}\n      width=${width}>\n      ${this.width === TEARSHEET_WIDTH.WIDE\n        ? html`<cds-layer level=\"1\" class=${`${blockClass}__header-content`}\n            >${headerFieldsTemplate}${headerActionsTemplate}</cds-layer\n          >`\n        : html`<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}\n\n      <div\n        class=${`${blockClass}__header-navigation`}\n        ?hidden=${!this._hasHeaderNavigation || this.width === 'narrow'}>\n        <slot\n          name=\"header-navigation\"\n          @slotchange=${this._checkSetHasSlot}></slot>\n      </div>\n      <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n      ${this.hasCloseIcon || this?._actionsCount === 0\n        ? html`<cds-modal-close-button\n            close-button-label=${closeIconDescription}\n            @click=${this._handleUserInitiatedClose}></cds-modal-close-button>`\n        : ''}\n    </cds-modal-header>`;\n\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div\n        aria-label=${this.ariaLabel}\n        class=${`${blockClass}__container ${prefix}--modal-container ${prefix}--modal-container--sm`}\n        part=\"dialog\"\n        role=\"complementary\"\n        ?open=${this._isOpen}\n        ?opening=${open && !this._isOpen}\n        ?closing=${!open && this._isOpen}\n        width=${width}\n        stack-position=${this._stackPosition}\n        stack-depth=${this._stackDepth}\n        @click=${this._handleClickContainer}>\n        <!-- Header -->\n        ${headerTemplate}\n\n        <!-- Body  -->\n        <cds-modal-body class=${`${blockClass}__body`} width=${width}>\n          <!-- Influencer when on left -->\n          ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n            ? html`<div\n                class=${`${blockClass}__influencer`}\n                ?wide=${influencerWidth === 'wide'}\n                ?hidden=${!this._hasInfluencerLeft ||\n                this.width === TEARSHEET_WIDTH.NARROW}>\n                <slot\n                  name=\"influencer\"\n                  data-postfix=\"left\"\n                  @slotchange=${this._checkSetHasSlot}></slot>\n              </div>`\n            : ''}\n\n          <div class=${`${blockClass}__right`}>\n            <div class=${`${blockClass}__main`}>\n              <div class=${`${blockClass}__content`}>\n                <cds-layer level=\"0\">\n                  <slot></slot>\n                </cds-layer>\n              </div>\n\n              <!-- Influencer when on right -->\n              ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n                ? html`<div\n                    class=${`${blockClass}__influencer`}\n                    ?wide=${influencerWidth}\n                    ?hidden=${!this._hasInfluencerRight ||\n                    this.width === TEARSHEET_WIDTH.NARROW}>\n                    <slot\n                      name=\"influencer\"\n                      data-postfix=\"right\"\n                      @slotchange=${this._checkSetHasSlot}></slot>\n                  </div>`\n                : ''}\n            </div>\n            <!-- Action buttons -->\n            <cds-button-set-base\n              class=${`${blockClass}__buttons ${blockClass}__button-container`}\n              actions-multiple=${actionsMultiple}\n              ?tearsheet-wide=${width === 'wide'}\n              ?hidden=${this._actionsCount === 0}>\n              <slot\n                name=\"actions\"\n                @slotchange=${this._handleActionsChange}></slot>\n            </cds-button-set-base>\n          </div>\n        </cds-modal-body>\n      </div>\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  _checkSetOpen = () => {\n    const { _tearsheet: tearsheet } = this;\n    if (tearsheet && this._isOpen) {\n      // wait until the tearsheet has transitioned off the screen to remove\n      tearsheet.addEventListener('transitionend', () => {\n        this._isOpen = false;\n      });\n    } else {\n      // allow the html to render before animating in the tearsheet\n      window.requestAnimationFrame(() => {\n        this._isOpen = this.open;\n      });\n    }\n  };\n\n  async updated(changedProperties) {\n    if (changedProperties.has('width')) {\n      this._checkUpdateActionSizes();\n    }\n\n    if (\n      process.env.NODE_ENV === 'development' &&\n      (changedProperties.has('width') ||\n        changedProperties.has('_hasHeaderNavigation') ||\n        changedProperties.has('_hasInfluencerLeft') ||\n        changedProperties.has('_hasInfluencerRight') ||\n        changedProperties.has('_hasHeaderActions'))\n    ) {\n      if (this.width === 'narrow') {\n        if (this._hasHeaderNavigation) {\n          // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n          console.error(\n            `Header navigation is not permitted in narrow Tearsheet.`\n          );\n        }\n        if (this._hasInfluencerLeft || this._hasInfluencerRight) {\n          // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n          console.error(`Influencer is not permitted in narrow Tearsheet.`);\n        }\n        if (this._hasHeaderActions) {\n          // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n          console.error(\n            `Header actions are not permitted in narrow Tearsheet.`\n          );\n        }\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      this._updateStack();\n\n      this._checkSetOpen();\n      if (this.open) {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const focusNode =\n          this.selectorInitialFocus &&\n          this.querySelector(this.selectorInitialFocus);\n\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (focusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-tearsheet>`'s first update/render cycle\n          (focusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSTearsheet).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this tearsheet is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this tearsheet.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tearsheet-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tearsheet is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tearsheet-closed`;\n  }\n\n  /**\n   * The name of the custom event fired on clicking the navigate back button\n   */\n  static get eventNavigateBack() {\n    return `${prefix}-tearsheet-header-navigate-back`;\n  }\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}
+{"version":3,"file":"tearsheet.js","names":["customElement"],"sources":["../../../src/components/tearsheet/tearsheet.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2023, 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 { LitElement, html } from 'lit';\nimport {\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { selectorTabbable } from '../../globals/settings';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport '../button/index';\nimport '../layer/index';\nimport '../button/button-set-base';\nimport '../modal/index';\nimport {\n  TEARSHEET_INFLUENCER_PLACEMENT,\n  TEARSHEET_INFLUENCER_WIDTH,\n  TEARSHEET_WIDTH,\n} from './defs';\n\nexport {\n  TEARSHEET_INFLUENCER_PLACEMENT,\n  TEARSHEET_INFLUENCER_WIDTH,\n  TEARSHEET_WIDTH,\n};\n\nconst maxStackDepth = 3;\ntype StackHandler = (newDepth: number, newPosition: number) => void;\ninterface StackState {\n  open: StackHandler[];\n  all: StackHandler[];\n}\n\nconst PRECEDING =\n  Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;\n\nconst FOLLOWING =\n  Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_CONTAINED_BY;\n\nconst blockClass = `${prefix}--tearsheet`;\nconst blockClassModalHeader = `${prefix}--modal-header`;\nconst blockClassActionSet = `${prefix}--action-set`;\n\n/**\n * Tries to focus on the given elements and bails out if one of them is successful.\n *\n * @param elems The elements.\n * @param reverse `true` to go through the list in reverse order.\n * @returns `true` if one of the attempts is successful, `false` otherwise.\n */\nfunction tryFocusElems(elems: NodeListOf<HTMLElement>, reverse: boolean) {\n  if (!reverse) {\n    for (let i = 0; i < elems.length; ++i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  } else {\n    for (let i = elems.length - 1; i >= 0; --i) {\n      const elem = elems[i];\n      elem.focus();\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      if (elem.ownerDocument!.activeElement === elem) {\n        return true;\n      }\n    }\n  }\n  return false;\n}\n\n/**\n * Tearsheet.\n *\n * @deprecated Use Carbon for IBM Products `tearsheet` component.\n *   This component has been deprecated in `@carbon/web-components` and will instead be maintained\n *   in the Carbon for IBM Products library:\n *   https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components\n * @element cds-tearsheet\n * @csspart dialog The dialog.\n * @fires cds-tearsheet-beingclosed\n *   The custom event fired before this tearsheet is being closed upon a user gesture.\n *   Cancellation of this event stops the user-initiated action of closing this tearsheet.\n * @fires cds-tearsheet-closed - The custom event fired after this tearsheet is closed upon a user gesture.\n */\n@customElement(`${prefix}-tearsheet`)\nclass CDSTearsheet extends HostListenerMixin(LitElement) {\n  /**\n   * The element that had focus before this tearsheet gets open.\n   */\n  private _launcher: Element | null = null;\n\n  /**\n   * Node to track focus going outside of tearsheet content.\n   */\n  @query('#start-sentinel')\n  private _startSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track focus going outside of tearsheet content.\n   */\n  @query('#end-sentinel')\n  private _endSentinelNode!: HTMLAnchorElement;\n\n  /**\n   * Node to track tearsheet.\n   */\n  @query(`.${blockClass}__container`)\n  private _tearsheet!: HTMLDivElement;\n\n  @queryAssignedElements({ slot: 'actions', selector: `${prefix}-button` })\n  private _actions!: Array<HTMLElement>;\n\n  @state()\n  _actionsCount = 0;\n\n  @state()\n  _hasHeaderActions = false;\n\n  @state()\n  _hasLabel = false;\n\n  @state()\n  _hasSlug = false;\n\n  @state()\n  _hasTitle = false;\n\n  @state()\n  _hasDescription = false;\n\n  @state()\n  _hasInfluencerLeft = false;\n\n  @state()\n  _hasInfluencerRight = false;\n\n  @state()\n  _isOpen = false;\n\n  @state()\n  _hasHeaderNavigation = false;\n\n  /**\n   * Handles `click` event on this element.\n   *\n   * @param event The event.\n   */\n  @HostListener('click')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = (event: MouseEvent) => {\n    if (\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n      event.composedPath().indexOf(this.shadowRoot!) < 0 &&\n      !this.preventCloseOnClickOutside\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  };\n\n  /**\n   * Handles `blur` event on this element.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   * @param event.relatedTarget The event relatedTarget.\n   */\n  @HostListener('shadowRoot:focusout')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleBlur = async ({ target, relatedTarget }: FocusEvent) => {\n    if (!this._topOfStack()) {\n      return;\n    }\n\n    const {\n      // condensedActions,\n      open,\n      _startSentinelNode: startSentinelNode,\n      _endSentinelNode: endSentinelNode,\n    } = this;\n\n    const oldContains = target !== this && this.contains(target as Node);\n    const currentContains =\n      relatedTarget !== this &&\n      (this.contains(relatedTarget as Node) ||\n        (this.shadowRoot?.contains(relatedTarget as Node) &&\n          relatedTarget !== (startSentinelNode as Node) &&\n          relatedTarget !== (endSentinelNode as Node)));\n\n    // Performs focus wrapping if _all_ of the following is met:\n    // * This tearsheet is open\n    // * The viewport still has focus\n    // * Tearsheet body used to have focus but no longer has focus\n    const { selectorTabbable: selectorTabbableForTearsheet } = this\n      .constructor as typeof CDSTearsheet;\n\n    if (open && relatedTarget && oldContains && !currentContains) {\n      const comparisonResult = (target as Node).compareDocumentPosition(\n        relatedTarget as Node\n      );\n\n      if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForTearsheet),\n            true\n          ) &&\n          relatedTarget !== this\n        ) {\n          this.focus();\n        }\n      } else if (\n        relatedTarget === endSentinelNode ||\n        comparisonResult & FOLLOWING\n      ) {\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (\n          !tryFocusElems(\n            this.querySelectorAll(selectorTabbableForTearsheet),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      }\n    }\n  };\n\n  @HostListener('document:keydown')\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleKeydown = ({ key, target }: KeyboardEvent) => {\n    if ((key === 'Esc' || key === 'Escape') && this._topOfStack()) {\n      this._handleUserInitiatedClose(target);\n    }\n  };\n\n  private _checkSetHasSlot(e: Event) {\n    const t = e.target as HTMLSlotElement;\n    const dataPostfix = t.getAttribute('data-postfix');\n    const postfix = dataPostfix ? `-${dataPostfix}` : '';\n\n    // snake `ab-cd-ef` to _has camel case _hasAbCdEf\n    const hasName = `_has-${t.name}${postfix}`.replace(/-./g, (c) =>\n      c[1].toUpperCase()\n    );\n    this[hasName] = (t?.assignedElements()?.length ?? 0) > 0;\n  }\n\n  /**\n   * Handles `click` event on the modal container.\n   *\n   * @param event The event.\n   */\n  private _handleClickContainer(event: MouseEvent) {\n    if (\n      (event.target as Element).matches(\n        (this.constructor as typeof CDSTearsheet).selectorCloseButton\n      )\n    ) {\n      this._handleUserInitiatedClose(event.target);\n    }\n  }\n\n  /**\n   * Handles user-initiated close request of this tearsheet.\n   *\n   * @param triggeredBy The element that triggered this close request.\n   */\n  private _handleUserInitiatedClose(triggeredBy: EventTarget | null) {\n    if (this.open) {\n      const init = {\n        bubbles: true,\n        cancelable: true,\n        composed: true,\n        detail: {\n          triggeredBy,\n        },\n      };\n      if (\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSTearsheet).eventBeforeClose,\n            init\n          )\n        )\n      ) {\n        this.open = false;\n        this.dispatchEvent(\n          new CustomEvent(\n            (this.constructor as typeof CDSTearsheet).eventClose,\n            init\n          )\n        );\n      }\n    }\n  }\n\n  private _handleSlugChange(e: Event) {\n    const childItems = (e.target as HTMLSlotElement).assignedElements();\n\n    this._hasSlug = childItems.length > 0;\n    if (this._hasSlug) {\n      childItems[0].setAttribute('size', 'lg');\n      this.setAttribute('slug', '');\n    } else {\n      this.removeAttribute('slug');\n    }\n  }\n\n  /**\n   * Optional aria label for the tearsheet\n   */\n  @property({ reflect: true, attribute: 'aria-label' })\n  ariaLabel = '';\n\n  /**\n   * Sets the close button icon description\n   */\n  @property({ reflect: true, attribute: 'close-icon-description' })\n  closeIconDescription = 'Close';\n\n  /**\n   * Enable a close icon ('x') in the header area of the tearsheet. By default,\n   * (when this prop is omitted, or undefined or null) a tearsheet does not\n   * display a close icon if there are navigation actions (\"transactional\n   * tearsheet\") and displays one if there are no navigation actions (\"passive\n   * tearsheet\"), and that behavior can be overridden if required by setting\n   * this prop to either true or false.\n   */\n\n  @property({ reflect: true, type: Boolean, attribute: 'has-close-icon' })\n  hasCloseIcon = false;\n\n  /**\n   * The placement of the influencer section, 'left' or 'right'.\n   */\n  @property({ reflect: true, attribute: 'influencer-placement' })\n  influencerPlacement = TEARSHEET_INFLUENCER_PLACEMENT.RIGHT;\n\n  /**\n   * The width of the influencer section, 'narrow' or 'wide'.\n   */\n  @property({ reflect: true, attribute: 'influencer-width' })\n  influencerWidth = TEARSHEET_INFLUENCER_WIDTH.NARROW;\n\n  /**\n   * `true` if the tearsheet should be open.\n   */\n  @property({ type: Boolean, reflect: true })\n  open = false;\n\n  /**\n   * Prevent closing on click outside of tearsheet\n   */\n  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })\n  preventCloseOnClickOutside = false;\n\n  /**\n   * The initial location of focus in the side panel\n   */\n  @property({\n    reflect: true,\n    attribute: 'selector-initial-focus',\n    type: String,\n  })\n  selectorInitialFocus;\n\n  /**\n   * The width of the influencer section, 'narrow' or 'wide'.\n   */\n  @property({ reflect: true, attribute: 'width' })\n  width = TEARSHEET_WIDTH.NARROW;\n\n  private _checkUpdateActionSizes = () => {\n    if (this._actions) {\n      for (let i = 0; i < this._actions.length; i++) {\n        this._actions[i].setAttribute(\n          'size',\n          this.width === 'wide' ? '2xl' : 'xl'\n        );\n      }\n    }\n  };\n\n  private _maxActions = 4;\n  private _handleActionsChange(e: Event) {\n    const target = e.target as HTMLSlotElement;\n    const actions = target?.assignedElements();\n    const actionsCount = actions?.length ?? 0;\n\n    if (actionsCount > this._maxActions) {\n      this._actionsCount = this._maxActions;\n      // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n      console.error(`Too many tearsheet actions, max ${this._maxActions}.`);\n    } else {\n      this._actionsCount = actionsCount;\n    }\n\n    for (let i = 0; i < actions?.length; i++) {\n      if (i + 1 > this._maxActions) {\n        // hide excessive tearsheet actions\n        actions[i].setAttribute('hidden', 'true');\n        actions[i].setAttribute(\n          `data-actions-limit-${this._maxActions}-exceeded`,\n          `${actions.length}`\n        );\n      } else {\n        actions[i].classList.add(`${blockClassActionSet}__action-button`);\n      }\n    }\n    this._checkUpdateActionSizes();\n  }\n\n  // Data structure to communicate the state of tearsheet stacking\n  // (i.e. when more than one tearsheet is open). Each tearsheet supplies a\n  // handler to be called whenever the stacking of the tearsheets changes, which\n  // happens when a tearsheet opens or closes. The 'open' array contains one\n  // handler per OPEN tearsheet ordered from lowest to highest in visual z-order.\n  // The 'all' array contains all the handlers for open and closed tearsheets.\n\n  @state()\n  _stackDepth = -1;\n\n  @state()\n  _stackPosition = -1;\n\n  private _topOfStack = () => {\n    return this._stackDepth === this._stackPosition;\n  };\n\n  private static _stack: StackState = {\n    open: [],\n    all: [],\n  };\n  private _notifyStack = () => {\n    CDSTearsheet._stack.all.forEach(\n      (handler: (stackSize: number, position: number) => void) => {\n        handler(\n          Math.min(CDSTearsheet._stack.open.length, maxStackDepth),\n          CDSTearsheet._stack.open.indexOf(handler) + 1\n        );\n      }\n    );\n  };\n\n  private _handleStackChange: StackHandler = (newDepth, newPosition) => {\n    this._stackDepth = newDepth;\n    this._stackPosition = newPosition;\n    if (this._stackDepth > 1 && this._stackPosition > 0) {\n      this.setAttribute('stack-position', `${newPosition}`);\n      this.setAttribute('stack-depth', `${this._stackDepth}`);\n    } else {\n      this.removeAttribute('stack-position');\n      this.removeAttribute('stack-depth');\n    }\n  };\n\n  private _updateStack = () => {\n    if (this.open) {\n      CDSTearsheet._stack.open.push(this._handleStackChange);\n    } else {\n      const indexOpen = CDSTearsheet._stack.open.indexOf(\n        this._handleStackChange\n      );\n      if (indexOpen >= 0) {\n        CDSTearsheet._stack.open.splice(indexOpen, 1);\n      }\n    }\n    this._notifyStack();\n  };\n\n  actionsMultiple = ['', 'single', 'double', 'triple'][this._actionsCount];\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    CDSTearsheet._stack.all.push(this._handleStackChange);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    const indexAll = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n    CDSTearsheet._stack.all.splice(indexAll, 1);\n    const indexOpen = CDSTearsheet._stack.all.indexOf(this._handleStackChange);\n    CDSTearsheet._stack.open.splice(indexOpen, 1);\n  }\n\n  render() {\n    const {\n      closeIconDescription,\n      influencerPlacement,\n      influencerWidth,\n      open,\n      width,\n    } = this;\n\n    const actionsMultiple = ['', 'single', 'double', 'triple'][\n      this._actionsCount\n    ];\n\n    const headerFieldsTemplate = html`<div\n      class=${`${blockClass}__header-fields`}>\n      <h2 class=${`${blockClassModalHeader}__label`} ?hidden=${!this._hasLabel}>\n        <slot name=\"label\" @slotchange=${this._checkSetHasSlot}></slot>\n      </h2>\n      <h3\n        class=${`${blockClassModalHeader}__heading ${blockClass}__heading`}\n        ?hidden=${!this._hasTitle}>\n        <slot name=\"title\" @slotchange=${this._checkSetHasSlot}></slot>\n      </h3>\n      <div\n        class=${`${blockClass}__header-description`}\n        ?hidden=${!this._hasDescription}>\n        <slot name=\"description\" @slotchange=${this._checkSetHasSlot}></slot>\n      </div>\n    </div>`;\n\n    const headerActionsTemplate = html` <div\n      class=${`${blockClass}__header-actions`}\n      ?hidden=${!this._hasHeaderActions || this.width === 'narrow'}>\n      <slot name=\"header-actions\" @slotchange=${this._checkSetHasSlot}></slot>\n    </div>`;\n\n    const headerTemplate = html` <cds-modal-header\n      class=${`${blockClass}__header`}\n      ?has-close-icon=${this.hasCloseIcon || this?._actionsCount === 0}\n      ?has-navigation=${this._hasHeaderNavigation && this.width === 'wide'}\n      ?has-header-actions=${this._hasHeaderActions && this.width === 'wide'}\n      ?has-actions=${this?._actionsCount > 0}\n      ?has-slug=${this?._hasSlug}\n      width=${width}>\n      ${this.width === TEARSHEET_WIDTH.WIDE\n        ? html`<cds-layer level=\"1\" class=${`${blockClass}__header-content`}\n            >${headerFieldsTemplate}${headerActionsTemplate}</cds-layer\n          >`\n        : html`<div>${headerFieldsTemplate}${headerActionsTemplate}</div>`}\n\n      <div\n        class=${`${blockClass}__header-navigation`}\n        ?hidden=${!this._hasHeaderNavigation || this.width === 'narrow'}>\n        <slot\n          name=\"header-navigation\"\n          @slotchange=${this._checkSetHasSlot}></slot>\n      </div>\n      <slot name=\"slug\" @slotchange=${this._handleSlugChange}></slot>\n      ${this.hasCloseIcon || this?._actionsCount === 0\n        ? html`<cds-modal-close-button\n            close-button-label=${closeIconDescription}\n            @click=${this._handleUserInitiatedClose}></cds-modal-close-button>`\n        : ''}\n    </cds-modal-header>`;\n\n    return html`\n      <a\n        id=\"start-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n      <div\n        aria-label=${this.ariaLabel}\n        class=${`${blockClass}__container ${prefix}--modal-container ${prefix}--modal-container--sm`}\n        part=\"dialog\"\n        role=\"complementary\"\n        ?open=${this._isOpen}\n        ?opening=${open && !this._isOpen}\n        ?closing=${!open && this._isOpen}\n        width=${width}\n        stack-position=${this._stackPosition}\n        stack-depth=${this._stackDepth}\n        @click=${this._handleClickContainer}>\n        <!-- Header -->\n        ${headerTemplate}\n\n        <!-- Body  -->\n        <cds-modal-body class=${`${blockClass}__body`} width=${width}>\n          <!-- Influencer when on left -->\n          ${influencerPlacement !== TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n            ? html`<div\n                class=${`${blockClass}__influencer`}\n                ?wide=${influencerWidth === 'wide'}\n                ?hidden=${!this._hasInfluencerLeft ||\n                this.width === TEARSHEET_WIDTH.NARROW}>\n                <slot\n                  name=\"influencer\"\n                  data-postfix=\"left\"\n                  @slotchange=${this._checkSetHasSlot}></slot>\n              </div>`\n            : ''}\n\n          <div class=${`${blockClass}__right`}>\n            <div class=${`${blockClass}__main`}>\n              <div class=${`${blockClass}__content`}>\n                <cds-layer level=\"0\">\n                  <slot></slot>\n                </cds-layer>\n              </div>\n\n              <!-- Influencer when on right -->\n              ${influencerPlacement === TEARSHEET_INFLUENCER_PLACEMENT.RIGHT\n                ? html`<div\n                    class=${`${blockClass}__influencer`}\n                    ?wide=${influencerWidth}\n                    ?hidden=${!this._hasInfluencerRight ||\n                    this.width === TEARSHEET_WIDTH.NARROW}>\n                    <slot\n                      name=\"influencer\"\n                      data-postfix=\"right\"\n                      @slotchange=${this._checkSetHasSlot}></slot>\n                  </div>`\n                : ''}\n            </div>\n            <!-- Action buttons -->\n            <cds-button-set-base\n              class=${`${blockClass}__buttons ${blockClass}__button-container`}\n              actions-multiple=${actionsMultiple}\n              ?tearsheet-wide=${width === 'wide'}\n              ?hidden=${this._actionsCount === 0}>\n              <slot\n                name=\"actions\"\n                @slotchange=${this._handleActionsChange}></slot>\n            </cds-button-set-base>\n          </div>\n        </cds-modal-body>\n      </div>\n      <a\n        id=\"end-sentinel\"\n        class=\"${prefix}--visually-hidden\"\n        href=\"javascript:void 0\"\n        role=\"navigation\"></a>\n    `;\n  }\n\n  _checkSetOpen = () => {\n    const { _tearsheet: tearsheet } = this;\n    if (tearsheet && this._isOpen) {\n      // wait until the tearsheet has transitioned off the screen to remove\n      tearsheet.addEventListener('transitionend', () => {\n        this._isOpen = false;\n      });\n    } else {\n      // allow the html to render before animating in the tearsheet\n      window.requestAnimationFrame(() => {\n        this._isOpen = this.open;\n      });\n    }\n  };\n\n  async updated(changedProperties) {\n    if (changedProperties.has('width')) {\n      this._checkUpdateActionSizes();\n    }\n\n    if (\n      process.env.NODE_ENV === 'development' &&\n      (changedProperties.has('width') ||\n        changedProperties.has('_hasHeaderNavigation') ||\n        changedProperties.has('_hasInfluencerLeft') ||\n        changedProperties.has('_hasInfluencerRight') ||\n        changedProperties.has('_hasHeaderActions'))\n    ) {\n      if (this.width === 'narrow') {\n        if (this._hasHeaderNavigation) {\n          // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n          console.error(\n            `Header navigation is not permitted in narrow Tearsheet.`\n          );\n        }\n        if (this._hasInfluencerLeft || this._hasInfluencerRight) {\n          // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n          console.error(`Influencer is not permitted in narrow Tearsheet.`);\n        }\n        if (this._hasHeaderActions) {\n          // eslint-disable-next-line no-console -- https://github.com/carbon-design-system/carbon/issues/20452\n          console.error(\n            `Header actions are not permitted in narrow Tearsheet.`\n          );\n        }\n      }\n    }\n\n    if (changedProperties.has('open')) {\n      this._updateStack();\n\n      this._checkSetOpen();\n      if (this.open) {\n        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n        this._launcher = this.ownerDocument!.activeElement;\n        const focusNode =\n          this.selectorInitialFocus &&\n          this.querySelector(this.selectorInitialFocus);\n\n        await (this.constructor as typeof CDSTearsheet)._delay();\n        if (focusNode) {\n          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,\n          // where its first update/render cycle that makes it focusable happens after `<cds-tearsheet>`'s first update/render cycle\n          (focusNode as HTMLElement).focus();\n        } else if (\n          !tryFocusElems(\n            this.querySelectorAll(\n              (this.constructor as typeof CDSTearsheet).selectorTabbable\n            ),\n            true\n          )\n        ) {\n          this.focus();\n        }\n      } else if (\n        this._launcher &&\n        typeof (this._launcher as HTMLElement).focus === 'function'\n      ) {\n        (this._launcher as HTMLElement).focus();\n        this._launcher = null;\n      }\n    }\n  }\n\n  /**\n   * @param ms The number of milliseconds.\n   * @returns A promise that is resolves after the given milliseconds.\n   */\n  private static _delay(ms = 0) {\n    return new Promise((resolve) => {\n      setTimeout(resolve, ms);\n    });\n  }\n\n  /**\n   * A selector selecting buttons that should close this modal.\n   */\n  static get selectorCloseButton() {\n    return `[data-modal-close],${prefix}-modal-close-button`;\n  }\n\n  /**\n   * A selector selecting tabbable nodes.\n   */\n  static get selectorTabbable() {\n    return selectorTabbable;\n  }\n\n  /**\n   * The name of the custom event fired before this tearsheet is being closed upon a user gesture.\n   * Cancellation of this event stops the user-initiated action of closing this tearsheet.\n   */\n  static get eventBeforeClose() {\n    return `${prefix}-tearsheet-beingclosed`;\n  }\n\n  /**\n   * The name of the custom event fired after this tearsheet is closed upon a user gesture.\n   */\n  static get eventClose() {\n    return `${prefix}-tearsheet-closed`;\n  }\n\n  /**\n   * The name of the custom event fired on clicking the navigate back button\n   */\n  static get eventNavigateBack() {\n    return `${prefix}-tearsheet-header-navigate-back`;\n  }\n}\n\nexport default CDSTearsheet;\n"],"mappings":"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"}

package/es/components/text-input/defs.js

@@ -6,7 +6,6 @@
  */
 
 import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
-
 //#region src/components/text-input/defs.ts
 /**
 * Input size.
@@ -83,7 +82,7 @@ let INPUT_TYPE = /* @__PURE__ */ function(INPUT_TYPE) {
 	INPUT_TYPE["URL"] = "url";
 	return INPUT_TYPE;
 }({});
-
 //#endregion
 export { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_DIRECTION, INPUT_TYPE };
+
 //# sourceMappingURL=defs.js.map

package/es/components/text-input/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/text-input/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/**\n * Input size.\n */\nexport enum INPUT_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Regular size, same as medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  // TODO: deprecate\n  /**\n   * Extra large size.\n   */\n  EXTRA_LARGE = 'xl',\n}\n\n/**\n * Input tooltop alignment\n */\nexport enum INPUT_TOOLTIP_ALIGNMENT {\n  /**\n   * Small size.\n   */\n  START = 'start',\n\n  /**\n   * Regular size, same as medium size.\n   */\n  CENTER = 'center',\n\n  /**\n   * Large size.\n   */\n  END = 'end',\n}\n\n/**\n * Input tooltop direction\n */\nexport enum INPUT_TOOLTIP_DIRECTION {\n  /**\n   * Small size.\n   */\n  TOP = 'top',\n\n  /**\n   * Regular size, same as medium size.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Large size.\n   */\n  BOTTOM = 'bottom',\n\n  /**\n   * Regular size, same as medium size.\n   */\n  LEFT = 'left',\n}\n\n/**\n * Supported input types.\n *\n * For this component we only support textual types\n */\nexport enum INPUT_TYPE {\n  EMAIL = 'email',\n  PASSWORD = 'password',\n  TEL = 'tel',\n  TEXT = 'text',\n  URL = 'url',\n}\n"],"mappings":";;;;;;;;;;;;;AAYA,IAAY,kDAAL;;;;AAIL;;;;AAKA;;;;AAKA;;;;AAMA;;;;;;AAMF,IAAY,4EAAL;;;;AAIL;;;;AAKA;;;;AAKA;;;;;;AAMF,IAAY,4EAAL;;;;AAIL;;;;AAKA;;;;AAKA;;;;AAKA;;;;;;;;AAQF,IAAY,kDAAL;AACL;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"defs.js","names":[],"sources":["../../../src/components/text-input/defs.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2020, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nexport { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME } from '../../globals/shared-enums';\n\n/**\n * Input size.\n */\nexport enum INPUT_SIZE {\n  /**\n   * Small size.\n   */\n  SMALL = 'sm',\n\n  /**\n   * Regular size, same as medium size.\n   */\n  MEDIUM = 'md',\n\n  /**\n   * Large size.\n   */\n  LARGE = 'lg',\n\n  // TODO: deprecate\n  /**\n   * Extra large size.\n   */\n  EXTRA_LARGE = 'xl',\n}\n\n/**\n * Input tooltop alignment\n */\nexport enum INPUT_TOOLTIP_ALIGNMENT {\n  /**\n   * Small size.\n   */\n  START = 'start',\n\n  /**\n   * Regular size, same as medium size.\n   */\n  CENTER = 'center',\n\n  /**\n   * Large size.\n   */\n  END = 'end',\n}\n\n/**\n * Input tooltop direction\n */\nexport enum INPUT_TOOLTIP_DIRECTION {\n  /**\n   * Small size.\n   */\n  TOP = 'top',\n\n  /**\n   * Regular size, same as medium size.\n   */\n  RIGHT = 'right',\n\n  /**\n   * Large size.\n   */\n  BOTTOM = 'bottom',\n\n  /**\n   * Regular size, same as medium size.\n   */\n  LEFT = 'left',\n}\n\n/**\n * Supported input types.\n *\n * For this component we only support textual types\n */\nexport enum INPUT_TYPE {\n  EMAIL = 'email',\n  PASSWORD = 'password',\n  TEL = 'tel',\n  TEXT = 'text',\n  URL = 'url',\n}\n"],"mappings":";;;;;;;;;;;;AAYA,IAAY,aAAL,yBAAA,YAAA;;;;AAIL,YAAA,WAAA;;;;AAKA,YAAA,YAAA;;;;AAKA,YAAA,WAAA;;;;AAMA,YAAA,iBAAA;;KACD;;;;AAKD,IAAY,0BAAL,yBAAA,yBAAA;;;;AAIL,yBAAA,WAAA;;;;AAKA,yBAAA,YAAA;;;;AAKA,yBAAA,SAAA;;KACD;;;;AAKD,IAAY,0BAAL,yBAAA,yBAAA;;;;AAIL,yBAAA,SAAA;;;;AAKA,yBAAA,WAAA;;;;AAKA,yBAAA,YAAA;;;;AAKA,yBAAA,UAAA;;KACD;;;;;;AAOD,IAAY,aAAL,yBAAA,YAAA;AACL,YAAA,WAAA;AACA,YAAA,cAAA;AACA,YAAA,SAAA;AACA,YAAA,UAAA;AACA,YAAA,SAAA;;KACD"}

package/es/components/text-input/stories/helpers.js

@@ -5,11 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { FORM_ELEMENT_COLOR_SCHEME } from "../../../globals/shared-enums.js";
-import { INPUT_SIZE, INPUT_TYPE } from "../defs.js";
+import "../../../globals/shared-enums.js";
+import { INPUT_TYPE } from "../defs.js";
 import "../text-input.js";
 import { action } from "storybook/actions";
-
 //#region src/components/text-input/stories/helpers.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -22,16 +21,16 @@ const inputTypes = Object.entries(INPUT_TYPE).reduce((acc, [key, val]) => ({
 	[`${key.toLowerCase()}`]: val
 }), {});
 const sizes = {
-	[`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-	[`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
-	[`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE
+	[`Small size (sm)`]: "sm",
+	[`Medium size (md)`]: "md",
+	[`Large size (lg)`]: "lg"
 };
 const colorSchemes = {
 	[`Regular`]: null,
-	[`Light (${FORM_ELEMENT_COLOR_SCHEME.LIGHT})`]: FORM_ELEMENT_COLOR_SCHEME.LIGHT
+	[`Light (light)`]: "light"
 };
 const createProps = ({ boolean, textNonEmpty, select }) => {
-	const type = select("Input type (type)", inputTypes, INPUT_TYPE.TEXT);
+	const type = select("Input type (type)", inputTypes, "text");
 	return {
 		colorScheme: select("Color scheme (color-scheme)", colorSchemes, null),
 		disabled: boolean("Disabled (disabled)", false),
@@ -39,12 +38,12 @@ const createProps = ({ boolean, textNonEmpty, select }) => {
 		placeholder: textNonEmpty("Placeholder text (placeholder)", "Optional placeholder text"),
 		invalid: boolean("Invalid (invalid)", false),
 		onInput: action("input"),
-		showPasswordVisibilityToggle: type === INPUT_TYPE.TEXT || type === INPUT_TYPE.PASSWORD ? boolean("Show password visibility toggle (show-password-visibility-toggle)", false) : null,
-		size: select("Input size (size)", sizes, INPUT_SIZE.MEDIUM),
+		showPasswordVisibilityToggle: type === "text" || type === "password" ? boolean("Show password visibility toggle (show-password-visibility-toggle)", false) : null,
+		size: select("Input size (size)", sizes, "md"),
 		type
 	};
 };
-
 //#endregion
 export { createProps as default };
+
 //# sourceMappingURL=helpers.js.map

package/es/components/text-input/stories/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":["INPUT_COLOR_SCHEME"],"sources":["../../../../src/components/text-input/stories/helpers.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { action } from 'storybook/actions';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from '../text-input';\n\nconst inputTypes = Object.entries(INPUT_TYPE).reduce(\n  (acc, [key, val]) => ({\n    ...acc,\n    [`${key.toLowerCase()}`]: val,\n  }),\n  {}\n);\n\nconst sizes = {\n  [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,\n  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,\n  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,\n};\n\nconst colorSchemes = {\n  [`Regular`]: null,\n  [`Light (${INPUT_COLOR_SCHEME.LIGHT})`]: INPUT_COLOR_SCHEME.LIGHT,\n};\n\nconst createProps = ({ boolean, textNonEmpty, select }) => {\n  const type = select('Input type (type)', inputTypes, INPUT_TYPE.TEXT);\n  return {\n    colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),\n    disabled: boolean('Disabled (disabled)', false),\n    value: textNonEmpty('Input value (value)', ''),\n    placeholder: textNonEmpty(\n      'Placeholder text (placeholder)',\n      'Optional placeholder text'\n    ),\n    invalid: boolean('Invalid (invalid)', false),\n    onInput: action('input'),\n    showPasswordVisibilityToggle:\n      type === INPUT_TYPE.TEXT || type === INPUT_TYPE.PASSWORD\n        ? boolean(\n            'Show password visibility toggle (show-password-visibility-toggle)',\n            false\n          )\n        : null,\n    size: select('Input size (size)', sizes, INPUT_SIZE.MEDIUM),\n    type,\n  };\n};\n\nexport default createProps;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,MAAM,aAAa,OAAO,QAAQ,WAAW,CAAC,QAC3C,KAAK,CAAC,KAAK,UAAU;CACpB,GAAG;EACF,GAAG,IAAI,aAAa,KAAK;CAC3B,GACD,EAAE,CACH;AAED,MAAM,QAAQ;EACX,eAAe,WAAW,MAAM,KAAK,WAAW;EAChD,gBAAgB,WAAW,OAAO,KAAK,WAAW;EAClD,eAAe,WAAW,MAAM,KAAK,WAAW;CAClD;AAED,MAAM,eAAe;EAClB,YAAY;EACZ,UAAUA,0BAAmB,MAAM,KAAKA,0BAAmB;CAC7D;AAED,MAAM,eAAe,EAAE,SAAS,cAAc,aAAa;CACzD,MAAM,OAAO,OAAO,qBAAqB,YAAY,WAAW,KAAK;AACrE,QAAO;EACL,aAAa,OAAO,+BAA+B,cAAc,KAAK;EACtE,UAAU,QAAQ,uBAAuB,MAAM;EAC/C,OAAO,aAAa,uBAAuB,GAAG;EAC9C,aAAa,aACX,kCACA,4BACD;EACD,SAAS,QAAQ,qBAAqB,MAAM;EAC5C,SAAS,OAAO,QAAQ;EACxB,8BACE,SAAS,WAAW,QAAQ,SAAS,WAAW,WAC5C,QACE,qEACA,MACD,GACD;EACN,MAAM,OAAO,qBAAqB,OAAO,WAAW,OAAO;EAC3D;EACD"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../../../src/components/text-input/stories/helpers.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { action } from 'storybook/actions';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from '../text-input';\n\nconst inputTypes = Object.entries(INPUT_TYPE).reduce(\n  (acc, [key, val]) => ({\n    ...acc,\n    [`${key.toLowerCase()}`]: val,\n  }),\n  {}\n);\n\nconst sizes = {\n  [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,\n  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,\n  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,\n};\n\nconst colorSchemes = {\n  [`Regular`]: null,\n  [`Light (${INPUT_COLOR_SCHEME.LIGHT})`]: INPUT_COLOR_SCHEME.LIGHT,\n};\n\nconst createProps = ({ boolean, textNonEmpty, select }) => {\n  const type = select('Input type (type)', inputTypes, INPUT_TYPE.TEXT);\n  return {\n    colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),\n    disabled: boolean('Disabled (disabled)', false),\n    value: textNonEmpty('Input value (value)', ''),\n    placeholder: textNonEmpty(\n      'Placeholder text (placeholder)',\n      'Optional placeholder text'\n    ),\n    invalid: boolean('Invalid (invalid)', false),\n    onInput: action('input'),\n    showPasswordVisibilityToggle:\n      type === INPUT_TYPE.TEXT || type === INPUT_TYPE.PASSWORD\n        ? boolean(\n            'Show password visibility toggle (show-password-visibility-toggle)',\n            false\n          )\n        : null,\n    size: select('Input size (size)', sizes, INPUT_SIZE.MEDIUM),\n    type,\n  };\n};\n\nexport default createProps;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,aAAa,OAAO,QAAQ,WAAW,CAAC,QAC3C,KAAK,CAAC,KAAK,UAAU;CACpB,GAAG;EACF,GAAG,IAAI,aAAa,KAAK;CAC3B,GACD,EAAE,CACH;AAED,MAAM,QAAQ;EACX,oBAAgC;EAChC,qBAAkC;EAClC,oBAAgC;CAClC;AAED,MAAM,eAAe;EAClB,YAAY;EACZ,kBAAmC;CACrC;AAED,MAAM,eAAe,EAAE,SAAS,cAAc,aAAa;CACzD,MAAM,OAAO,OAAO,qBAAqB,YAAA,OAA4B;AACrE,QAAO;EACL,aAAa,OAAO,+BAA+B,cAAc,KAAK;EACtE,UAAU,QAAQ,uBAAuB,MAAM;EAC/C,OAAO,aAAa,uBAAuB,GAAG;EAC9C,aAAa,aACX,kCACA,4BACD;EACD,SAAS,QAAQ,qBAAqB,MAAM;EAC5C,SAAS,OAAO,QAAQ;EACxB,8BACE,SAAA,UAA4B,SAAA,aACxB,QACE,qEACA,MACD,GACD;EACN,MAAM,OAAO,qBAAqB,OAAA,KAAyB;EAC3D;EACD"}

package/es/components/text-input/text-input-skeleton.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2019, 2025
+ * Copyright IBM Corp. 2019, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -8,7 +8,7 @@ import { LitElement } from 'lit';
 /**
  * @element cds-text-input-skeleton
  *
- * Skeleton of number input.
+ * Skeleton of text input.
  */
 declare class CDSTextInputSkeleton extends LitElement {
     /**

package/es/components/text-input/text-input-skeleton.js

@@ -5,16 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import text_input_default from "./text-input.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
-
 //#region src/components/text-input/text-input-skeleton.ts
 /**
-* Copyright IBM Corp. 2019, 2025
+* Copyright IBM Corp. 2019, 2026
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
@@ -22,7 +21,7 @@ import { property } from "lit/decorators.js";
 /**
 * @element cds-text-input-skeleton
 *
-* Skeleton of number input.
+* Skeleton of text input.
 */
 let CDSTextInputSkeleton = class CDSTextInputSkeleton extends LitElement {
 	constructor(..._args) {
@@ -32,8 +31,8 @@ let CDSTextInputSkeleton = class CDSTextInputSkeleton extends LitElement {
 	render() {
 		const { hideLabel } = this;
 		return html`
-      ${hideLabel ? "" : html`<span class="${prefix}--label ${prefix}--skeleton"></span>`}
-      <div class="${prefix}--text-input ${prefix}--skeleton"></div>
+      ${hideLabel ? "" : html`<span class="${"cds"}--label ${"cds"}--skeleton"></span>`}
+      <div class="${"cds"}--text-input ${"cds"}--skeleton"></div>
     `;
 	}
 	static {
@@ -45,9 +44,9 @@ __decorate([property({
 	reflect: true,
 	attribute: "hide-label"
 })], CDSTextInputSkeleton.prototype, "hideLabel", void 0);
-CDSTextInputSkeleton = __decorate([carbonElement(`${prefix}-text-input-skeleton`)], CDSTextInputSkeleton);
+CDSTextInputSkeleton = __decorate([carbonElement(`cds-text-input-skeleton`)], CDSTextInputSkeleton);
 var text_input_skeleton_default = CDSTextInputSkeleton;
-
 //#endregion
 export { text_input_skeleton_default as default };
+
 //# sourceMappingURL=text-input-skeleton.js.map

package/es/components/text-input/text-input-skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/text-input/text-input-skeleton.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 { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './text-input.scss?lit';\n\n/**\n * @element cds-text-input-skeleton\n *\n * Skeleton of number input.\n */\n@customElement(`${prefix}-text-input-skeleton`)\nclass CDSTextInputSkeleton extends LitElement {\n  /**\n   * Specify whether the label should be hidden, or not\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  render() {\n    const { hideLabel } = this;\n    return html`\n      ${hideLabel\n        ? ''\n        : html`<span class=\"${prefix}--label ${prefix}--skeleton\"></span>`}\n      <div class=\"${prefix}--text-input ${prefix}--skeleton\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTextInputSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,iCACM,6BAA6B,WAAW;;;mBAKhC;;CAEZ,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;QACP,YACE,KACA,IAAI,gBAAgB,OAAO,UAAU,OAAO,qBAAqB;oBACvD,OAAO,eAAe,OAAO;;;;gBAI/BA;;;YAbf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC;mCALrEC,cAAc,GAAG,OAAO,sBAAsB;AAqB/C,kCAAe"}
+{"version":3,"file":"text-input-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/text-input/text-input-skeleton.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2019, 2026\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 { property } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { prefix } from '../../globals/settings';\nimport styles from './text-input.scss?lit';\n\n/**\n * @element cds-text-input-skeleton\n *\n * Skeleton of text input.\n */\n@customElement(`${prefix}-text-input-skeleton`)\nclass CDSTextInputSkeleton extends LitElement {\n  /**\n   * Specify whether the label should be hidden, or not\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  render() {\n    const { hideLabel } = this;\n    return html`\n      ${hideLabel\n        ? ''\n        : html`<span class=\"${prefix}--label ${prefix}--skeleton\"></span>`}\n      <div class=\"${prefix}--text-input ${prefix}--skeleton\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTextInputSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,uBAAA,MACM,6BAA6B,WAAW;;;mBAKhC;;CAEZ,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;QACP,YACE,KACA,IAAI,gBAAA,MAAuB,UAAA,MAAiB,qBAAqB;0BAChD,eAAA,MAAsB;;;;gBAI/BA;;;YAbf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC,CAAA,EAAA,qBAAA,WAAA,aAAA,KAAA,EAAA;mCALrEC,cAAc,0BAAgC,CAAA,EAAA,qBAAA;AAqB/C,IAAA,8BAAe"}

package/es/components/text-input/text-input.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { prefix } from "../../globals/settings.js";
+import "../../globals/settings.js";
 import { carbonElement } from "../../globals/decorators/carbon-element.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.112.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
 import iconLoader from "../../globals/internal/icon-loader.js";
 import FormMixin from "../../globals/mixins/form.js";
 import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
@@ -22,7 +22,6 @@ import WarningFilled16 from "@carbon/icons/es/warning--filled/16.js";
 import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16.js";
 import View16 from "@carbon/icons/es/view/16.js";
 import ViewOff16 from "@carbon/icons/es/view--off/16.js";
-
 //#region src/components/text-input/text-input.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -63,12 +62,12 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
 		this.hidePasswordLabel = "Hide password";
 		this.showPasswordLabel = "Show password";
 		this.showPasswordVisibilityToggle = false;
-		this.size = INPUT_SIZE.MEDIUM;
+		this.size = "md";
 		this.isFluid = false;
 		this.inline = false;
-		this.tooltipAlignment = INPUT_TOOLTIP_ALIGNMENT.CENTER;
-		this.tooltipDirection = INPUT_TOOLTIP_DIRECTION.BOTTOM;
-		this.type = INPUT_TYPE.TEXT;
+		this.tooltipAlignment = "center";
+		this.tooltipDirection = "bottom";
+		this.type = "text";
 		this.validityMessage = "";
 	}
 	/**
@@ -116,12 +115,12 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
 	* @deprecated will be removed in the next major version, use `cds-password-input` instead
 	*/
 	togglePasswordVisibility() {
-		this.type = this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;
+		this.type = this.type === "password" ? "text" : "password";
 	}
 	render() {
 		const { disabled, enableCounter, helperText, hideLabel, inline, isFluid, invalid, invalidText, label, maxCount, readonly, required, size, type, warn, warnText, value, _handleInput: handleInput, _hasAILabel: hasAILabel, _handleSlotChange: handleSlotChange } = this;
-		const invalidIcon = iconLoader(WarningFilled16, { class: `${prefix}--text-input__invalid-icon` });
-		const warnIcon = iconLoader(WarningAltFilled16, { class: `${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning` });
+		const invalidIcon = iconLoader(WarningFilled16, { class: `cds--text-input__invalid-icon` });
+		const warnIcon = iconLoader(WarningAltFilled16, { class: `cds--text-input__invalid-icon cds--text-input__invalid-icon--warning` });
 		const normalizedProps = {
 			disabled: !readonly && disabled,
 			invalid: !readonly && invalid,
@@ -140,57 +139,57 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
 			normalizedProps["slot-text"] = warnText;
 		}
 		const counterClasses = classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--text-input__label-counter`]: true,
-			[`${prefix}--label--disabled`]: disabled
+			[`cds--label`]: true,
+			[`cds--text-input__label-counter`]: true,
+			[`cds--label--disabled`]: disabled
 		});
 		const inputWrapperClasses = classMap({
-			[`${prefix}--form-item`]: true,
-			[`${prefix}--text-input-wrapper`]: true,
-			[`${prefix}--text-input-wrapper--inline`]: inline,
-			[`${prefix}--text-input-wrapper--readonly`]: readonly,
-			[`${prefix}--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid
+			[`cds--form-item`]: true,
+			[`cds--text-input-wrapper`]: true,
+			[`cds--text-input-wrapper--inline`]: inline,
+			[`cds--text-input-wrapper--readonly`]: readonly,
+			[`cds--text-input-wrapper--inline--invalid`]: inline && normalizedProps.invalid
 		});
 		const inputClasses = classMap({
-			[`${prefix}--text-input`]: true,
-			[`${prefix}--text-input--invalid`]: normalizedProps.invalid,
-			[`${prefix}--text-input--warning`]: normalizedProps.warn,
-			[`${prefix}--text-input--${size}`]: size,
-			[`${prefix}--layout--size-${size}`]: size,
-			[`${prefix}--password-input`]: type === INPUT_TYPE.PASSWORD,
-			[`${prefix}--text-input__field-wrapper--decorator`]: hasAILabel
+			[`cds--text-input`]: true,
+			[`cds--text-input--invalid`]: normalizedProps.invalid,
+			[`cds--text-input--warning`]: normalizedProps.warn,
+			[`cds--text-input--${size}`]: size,
+			[`cds--layout--size-${size}`]: size,
+			[`cds--password-input`]: type === "password",
+			[`cds--text-input__field-wrapper--decorator`]: hasAILabel
 		});
 		const fieldOuterWrapperClasses = classMap({
-			[`${prefix}--text-input__field-outer-wrapper`]: true,
-			[`${prefix}--text-input__field-outer-wrapper--inline`]: inline
+			[`cds--text-input__field-outer-wrapper`]: true,
+			[`cds--text-input__field-outer-wrapper--inline`]: inline
 		});
 		const fieldWrapperClasses = classMap({
-			[`${prefix}--text-input__field-wrapper`]: true,
-			[`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn
+			[`cds--text-input__field-wrapper`]: true,
+			[`cds--text-input__field-wrapper--warning`]: normalizedProps.warn
 		});
 		const labelClasses = classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--visually-hidden`]: hideLabel,
-			[`${prefix}--label--disabled`]: normalizedProps.disabled
+			[`cds--label`]: true,
+			[`cds--visually-hidden`]: hideLabel,
+			[`cds--label--disabled`]: normalizedProps.disabled
 		});
 		const helperTextClasses = classMap({
-			[`${prefix}--form__helper-text`]: true,
-			[`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled
+			[`cds--form__helper-text`]: true,
+			[`cds--form__helper-text--disabled`]: normalizedProps.disabled
 		});
-		const passwordIsVisible = type !== INPUT_TYPE.PASSWORD;
-		const passwordVisibilityIcon = passwordIsVisible ? iconLoader(ViewOff16, { class: `${prefix}--icon-visibility-off` }) : iconLoader(View16, { class: `${prefix}--icon-visibility-on` });
+		const passwordIsVisible = type !== "password";
+		const passwordVisibilityIcon = passwordIsVisible ? iconLoader(ViewOff16, { class: `cds--icon-visibility-off` }) : iconLoader(View16, { class: `cds--icon-visibility-on` });
 		const passwordVisibilityToggleClasses = classMap({
-			[`${prefix}--text-input--password__visibility__toggle`]: true,
-			[`${prefix}--btn`]: true,
-			[`${prefix}--btn--icon-only`]: true,
-			[`${prefix}--tooltip__trigger`]: true,
-			[`${prefix}--tooltip--a11y`]: true,
-			[`${prefix}--btn--disabled`]: normalizedProps.disabled,
-			[`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,
-			[`${prefix}--tooltip--align-${this.tooltipAlignment}`]: this.tooltipAlignment
+			[`cds--text-input--password__visibility__toggle`]: true,
+			[`cds--btn`]: true,
+			[`cds--btn--icon-only`]: true,
+			[`cds--tooltip__trigger`]: true,
+			[`cds--tooltip--a11y`]: true,
+			[`cds--btn--disabled`]: normalizedProps.disabled,
+			[`cds--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,
+			[`cds--tooltip--align-${this.tooltipAlignment}`]: this.tooltipAlignment
 		});
 		const passwordButtonLabel = html`
-      <span class="${prefix}--assistive-text">
+      <span class="${"cds"}--assistive-text">
         ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}
       </span>
     `;
@@ -205,7 +204,7 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
       </button>
     `;
 		const textCount = value?.length;
-		const labelWrapper = html`<div class="${prefix}--text-input__label-wrapper">
+		const labelWrapper = html`<div class="${"cds"}--text-input__label-wrapper">
       <label class="${labelClasses}">
         <slot name="label-text">${label}</slot>
       </label>
@@ -225,7 +224,7 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
       </slot>
     </div>`;
 		const validationMessage = normalizedProps.invalid || normalizedProps.warn ? html`<div
-            class="${prefix}--form-requirement"
+            class="${"cds"}--form-requirement"
             ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
             <slot name="${normalizedProps["slot-name"]}">
               ${normalizedProps["slot-text"]}
@@ -233,7 +232,7 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
           </div>` : null;
 		return html`
       <div class="${inputWrapperClasses}">
-        ${!inline ? labelWrapper : html`<div class="${prefix}--text-input__label-helper-wrapper">
+        ${!inline ? labelWrapper : html`<div class="${"cds"}--text-input__label-helper-wrapper">
               ${labelWrapper} ${!isFluid ? validationMessage || helper : null}
             </div>`}
         <div class="${fieldOuterWrapperClasses}">
@@ -258,8 +257,8 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
               @input="${handleInput}" />
             <slot name="ai-label" @slotchange="${handleSlotChange}"></slot>
             <slot name="slug" @slotchange="${handleSlotChange}"></slot>
-            ${this.showPasswordVisibilityToggle && (type === INPUT_TYPE.PASSWORD || type === INPUT_TYPE.TEXT) ? passwordVisibilityButton() : null}
-            ${isFluid ? html`<hr class="${prefix}--text-input__divider" />` : null}
+            ${this.showPasswordVisibilityToggle && (type === "password" || type === "text") ? passwordVisibilityButton() : null}
+            ${isFluid ? html`<hr class="${"cds"}--text-input__divider" />` : null}
             ${isFluid && !inline ? validationMessage : null}
           </div>
 
@@ -272,8 +271,8 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
 	updated() {
 		this.toggleAttribute("ai-label", this._hasAILabel);
 		const label = this.shadowRoot?.querySelector("slot[name='ai-label']");
-		if (label) label?.classList.toggle(`${prefix}--slug--revert`, this.querySelector(`${prefix}-ai-label`)?.hasAttribute("revert-active"));
-		else this.shadowRoot?.querySelector("slot[name='slug']")?.classList.toggle(`${prefix}--slug--revert`, this.querySelector(`${prefix}-slug`)?.hasAttribute("revert-active"));
+		if (label) label?.classList.toggle(`cds--slug--revert`, this.querySelector(`cds-ai-label`)?.hasAttribute("revert-active"));
+		else this.shadowRoot?.querySelector("slot[name='slug']")?.classList.toggle(`cds--slug--revert`, this.querySelector(`cds-slug`)?.hasAttribute("revert-active"));
 	}
 	/**
 	* A selector that will return the slug item.
@@ -281,13 +280,13 @@ let CDSTextInput = class CDSTextInput extends ValidityMixin(FormMixin(LitElement
 	* remove in v12
 	*/
 	static get slugItem() {
-		return `${prefix}-slug`;
+		return `cds-slug`;
 	}
 	/**
 	* A selector that will return the AI Label item.
 	*/
 	static get aiLabelItem() {
-		return `${prefix}-ai-label`;
+		return `cds-ai-label`;
 	}
 	static {
 		this.shadowRootOptions = {
@@ -364,9 +363,9 @@ __decorate([property()], CDSTextInput.prototype, "tooltipDirection", void 0);
 __decorate([property({ reflect: true })], CDSTextInput.prototype, "type", void 0);
 __decorate([property({ attribute: "validity-message" })], CDSTextInput.prototype, "validityMessage", void 0);
 __decorate([property({ reflect: true })], CDSTextInput.prototype, "value", null);
-CDSTextInput = __decorate([carbonElement(`${prefix}-text-input`)], CDSTextInput);
+CDSTextInput = __decorate([carbonElement(`cds-text-input`)], CDSTextInput);
 var text_input_default = CDSTextInput;
-
 //#endregion
 export { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TOOLTIP_ALIGNMENT, INPUT_TOOLTIP_DIRECTION, INPUT_TYPE, text_input_default as default };
+
 //# sourceMappingURL=text-input.js.map