@carbon/web-components 2.52.0 → 2.53.0

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/text-input/text-input.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, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport View16 from '@carbon/icons/es/view/16.js';\nimport ViewOff16 from '@carbon/icons/es/view--off/16.js';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport {\n  INPUT_COLOR_SCHEME,\n  INPUT_SIZE,\n  INPUT_TOOLTIP_ALIGNMENT,\n  INPUT_TOOLTIP_DIRECTION,\n  INPUT_TYPE,\n} from './defs';\nimport styles from './text-input.scss?lit';\n\nexport {\n  INPUT_COLOR_SCHEME,\n  INPUT_SIZE,\n  INPUT_TOOLTIP_ALIGNMENT,\n  INPUT_TOOLTIP_DIRECTION,\n  INPUT_TYPE,\n};\n\n/**\n * Text Input element. Supports all the usual attributes for textual input types\n *\n * @element cds-text-input\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-text-input`)\nclass CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * `true` if there is an AI Label.\n   */\n  protected _hasAILabel = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTextInput).aiLabelItem\n            ) ||\n            // remove reference to slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTextInput).slugItem\n            )\n          : false\n      );\n\n    this._hasAILabel = Boolean(hasContent);\n    (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n    this.requestUpdate();\n  }\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\n\n  @query('slot[name=\"helper-text\"]')\n  protected _slotHelperTextNode!: HTMLSlotElement;\n\n  /**\n   * The internal value.\n   */\n  protected _value = '';\n\n  /**\n   * Handles `oninput` event on the `input`.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLInputElement).value;\n  }\n\n  _handleFormdata(event: FormDataEvent) {\n    const { formData } = event;\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  protected _handleHelperTextSlotChange() {\n    this.requestUpdate();\n  }\n\n  /**\n   * May be any of the standard HTML autocomplete options\n   */\n  @property()\n  autocomplete = '';\n\n  /**\n   * Sets the input to be focussed automatically on page load. Defaults to false\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * Controls the disabled state of the input\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify whether to display the character counter\n   */\n  @property({ type: Boolean, attribute: 'enable-counter', reflect: true })\n  enableCounter = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * Specify if the currently value is invalid.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Max character count allowed for input. This is needed in order for enableCounter to display\n   */\n  @property({ type: Number, attribute: 'max-count', reflect: true })\n  maxCount;\n\n  /**\n   * Specify whether the control is currently in warning state\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Provide the text that is displayed when the control is in warning state\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  /**\n   * Specify whether you want the underlying label to be visually hidden\n   */\n  @property({ attribute: 'hide-label', type: Boolean, reflect: true })\n  hideLabel = false;\n\n  /**\n   * Generic label that will be used as the textual representation of what this field is for\n   */\n  @property({ attribute: 'label' })\n  label = '';\n\n  /**\n   * Name for the input in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the input against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the input has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Specify if the component should be read-only\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Boolean property to set the required status\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * \"Hide password\" tooltip text on password visibility toggle\n   *\n   * @deprecated will be removed in the next major version, use `cds-password-input` instead\n   */\n  @property()\n  hidePasswordLabel = 'Hide password';\n\n  /**\n   * \"Show password\" tooltip text on password visibility toggle\n   *\n   * @deprecated will be removed in the next major version, use `cds-password-input` instead\n   */\n  @property()\n  showPasswordLabel = 'Show password';\n\n  /**\n   * Boolean property to render password visibility toggle\n   *\n   * @deprecated will be removed in the next major version, use `cds-password-input` instead\n   */\n  @property({\n    type: Boolean,\n    attribute: 'show-password-visibility-toggle',\n    reflect: true,\n  })\n  showPasswordVisibilityToggle = false;\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.MEDIUM;\n\n  @property({ type: Boolean })\n  isFluid = false;\n\n  /**\n   * true to use the inline version.\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Specify the alignment of the tooltip to the icon-only button.\n   * Can be one of: start, center, or end.\n   */\n  @property()\n  tooltipAlignment = INPUT_TOOLTIP_ALIGNMENT.CENTER;\n\n  /**\n   * Specify the direction of the tooltip for icon-only buttons.\n   * Can be either top, right, bottom, or left.\n   */\n  @property()\n  tooltipDirection = INPUT_TOOLTIP_DIRECTION.BOTTOM;\n\n  /**\n   * The type of the input. Can be one of the types listed in the INPUT_TYPE enum\n   */\n  @property({ reflect: true })\n  type = INPUT_TYPE.TEXT;\n\n  /**\n   * The validity message. If present and non-empty, this input shows the UI of its invalid state.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the input.\n   */\n  @property({ reflect: true })\n  get value() {\n    // FIXME: Figure out how to deal with TS2611\n    // once we have the input we can directly query for the value\n    if (this._input) {\n      return this._input.value;\n    }\n    // but before then _value will work fine\n    return this._value;\n  }\n\n  set value(value) {\n    const oldValue = this._value;\n    this._value = value;\n    // make sure that lit-element updates the right properties\n    this.requestUpdate('value', oldValue);\n    // we set the value directly on the input (when available)\n    // so that programatic manipulation updates the UI correctly\n    if (this._input) {\n      this._input.value = value;\n    }\n  }\n\n  /**\n   * Handles password visibility toggle button click\n   *\n   * @deprecated will be removed in the next major version, use `cds-password-input` instead\n   */\n  private togglePasswordVisibility() {\n    this.type =\n      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n  }\n\n  render() {\n    const {\n      disabled,\n      enableCounter,\n      helperText,\n      hideLabel,\n      inline,\n      isFluid,\n      invalid,\n      invalidText,\n      label,\n      maxCount,\n      readonly,\n      required,\n      size,\n      type,\n      warn,\n      warnText,\n      value,\n      _handleInput: handleInput,\n      _hasAILabel: hasAILabel,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n\n    const invalidIcon = iconLoader(WarningFilled16, {\n      class: `${prefix}--text-input__invalid-icon`,\n    });\n\n    const warnIcon = iconLoader(WarningAltFilled16, {\n      class: `${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning`,\n    });\n\n    const normalizedProps: {\n      disabled: boolean;\n      invalid: boolean;\n      warn: boolean;\n      'slot-name': string;\n      'slot-text': string;\n      icon: ReturnType<typeof iconLoader>;\n    } = {\n      disabled: !readonly && disabled,\n      invalid: !readonly && invalid,\n      warn: !readonly && !invalid && warn,\n      'slot-name': '',\n      'slot-text': '',\n      icon: null,\n    };\n\n    if (normalizedProps.invalid) {\n      normalizedProps.icon = invalidIcon;\n      normalizedProps['slot-name'] = 'invalid-text';\n      normalizedProps['slot-text'] = invalidText;\n    } else if (normalizedProps.warn) {\n      normalizedProps.icon = warnIcon;\n      normalizedProps['slot-name'] = 'warn-text';\n      normalizedProps['slot-text'] = warnText;\n    }\n\n    const counterClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--text-input__label-counter`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n\n    const inputWrapperClasses = classMap({\n      [`${prefix}--form-item`]: true,\n      [`${prefix}--text-input-wrapper`]: true,\n      [`${prefix}--text-input-wrapper--inline`]: inline,\n      [`${prefix}--text-input-wrapper--readonly`]: readonly,\n      [`${prefix}--text-input-wrapper--inline--invalid`]:\n        inline && normalizedProps.invalid,\n    });\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--invalid`]: normalizedProps.invalid,\n      [`${prefix}--text-input--warning`]: normalizedProps.warn,\n      [`${prefix}--text-input--${size}`]: size,\n      [`${prefix}--layout--size-${size}`]: size,\n      [`${prefix}--password-input`]: type === INPUT_TYPE.PASSWORD, // TODO: deprecated, remove in v12\n      [`${prefix}--text-input__field-wrapper--decorator`]: hasAILabel,\n    });\n\n    const fieldOuterWrapperClasses = classMap({\n      [`${prefix}--text-input__field-outer-wrapper`]: true,\n      [`${prefix}--text-input__field-outer-wrapper--inline`]: inline,\n    });\n\n    const fieldWrapperClasses = classMap({\n      [`${prefix}--text-input__field-wrapper`]: true,\n      [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--visually-hidden`]: hideLabel,\n      [`${prefix}--label--disabled`]: normalizedProps.disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,\n    });\n\n    // TODO: deprecated, remove in v12\n    const passwordIsVisible = type !== INPUT_TYPE.PASSWORD;\n    const passwordVisibilityIcon = passwordIsVisible\n      ? iconLoader(ViewOff16, { class: `${prefix}--icon-visibility-off` })\n      : iconLoader(View16, { class: `${prefix}--icon-visibility-on` });\n\n    // TODO: deprecated, remove in v12\n    const passwordVisibilityToggleClasses = classMap({\n      [`${prefix}--text-input--password__visibility__toggle`]: true,\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--icon-only`]: true,\n      [`${prefix}--tooltip__trigger`]: true,\n      [`${prefix}--tooltip--a11y`]: true,\n      [`${prefix}--btn--disabled`]: normalizedProps.disabled,\n      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n        this.tooltipAlignment,\n    });\n\n    // TODO: deprecated, remove in v12\n    const passwordButtonLabel = html`\n      <span class=\"${prefix}--assistive-text\">\n        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n      </span>\n    `;\n\n    // TODO: deprecated, remove in v12\n    const passwordVisibilityButton = () => html`\n      <button\n        type=\"button\"\n        class=\"${passwordVisibilityToggleClasses}\"\n        ?disabled=\"${normalizedProps.disabled}\"\n        @click=\"${this.togglePasswordVisibility}\">\n        ${!normalizedProps.disabled ? passwordButtonLabel : null}\n        ${passwordVisibilityIcon}\n      </button>\n    `;\n\n    const textCount = value?.length;\n\n    const counter =\n      enableCounter && maxCount\n        ? html` <label class=\"${counterClasses}\">\n            <slot name=\"label-text\">${textCount}/${maxCount}</slot>\n          </label>`\n        : null;\n\n    const labelWrapper = html`<div class=\"${prefix}--text-input__label-wrapper\">\n      <label class=\"${labelClasses}\">\n        <slot name=\"label-text\">${label}</slot>\n      </label>\n      ${counter}\n    </div>`;\n\n    const hasHelperText =\n      helperText || (this._slotHelperTextNode?.assignedNodes().length ?? 0) > 0;\n\n    const helper = html`<div\n      class=\"${helperTextClasses}\"\n      id=\"helper-text\"\n      ?hidden=\"${normalizedProps.invalid ||\n      normalizedProps.warn ||\n      !hasHelperText}\">\n      <slot\n        name=\"helper-text\"\n        @slotchange=\"${this._handleHelperTextSlotChange}\">\n        ${helperText}\n      </slot>\n    </div>`;\n\n    const validationMessage =\n      normalizedProps.invalid || normalizedProps.warn\n        ? html`<div\n            class=\"${prefix}--form-requirement\"\n            ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n            <slot name=\"${normalizedProps['slot-name']}\">\n              ${normalizedProps['slot-text']}\n            </slot>\n          </div>`\n        : null;\n\n    return html`\n      <div class=\"${inputWrapperClasses}\">\n        ${!inline\n          ? labelWrapper\n          : html`<div class=\"${prefix}--text-input__label-helper-wrapper\">\n              ${labelWrapper} ${!isFluid ? validationMessage || helper : null}\n            </div>`}\n        <div class=\"${fieldOuterWrapperClasses}\">\n          <div class=\"${fieldWrapperClasses}\" ?data-invalid=\"${invalid}\">\n            ${normalizedProps.icon}\n            <input\n              autocomplete=\"${this.autocomplete}\"\n              ?autofocus=\"${this.autofocus}\"\n              class=\"${inputClasses}\"\n              ?data-invalid=\"${invalid}\"\n              ?disabled=\"${disabled}\"\n              ?aria-describedby=\"${hasHelperText ? 'helper-text' : undefined}\"\n              id=\"input\"\n              name=\"${ifNonEmpty(this.name)}\"\n              pattern=\"${ifNonEmpty(this.pattern)}\"\n              placeholder=\"${ifNonEmpty(this.placeholder)}\"\n              ?readonly=\"${readonly}\"\n              ?required=\"${required}\"\n              type=\"${ifNonEmpty(type)}\"\n              .value=\"${this._value}\"\n              maxlength=\"${ifNonEmpty(maxCount)}\"\n              @input=\"${handleInput}\" />\n            <slot name=\"ai-label\" @slotchange=\"${handleSlotChange}\"></slot>\n            <slot name=\"slug\" @slotchange=\"${handleSlotChange}\"></slot>\n            ${this.showPasswordVisibilityToggle &&\n            (type === INPUT_TYPE.PASSWORD || type === INPUT_TYPE.TEXT)\n              ? passwordVisibilityButton()\n              : null}\n            ${isFluid\n              ? html`<hr class=\"${prefix}--text-input__divider\" />`\n              : null}\n            ${isFluid && !inline ? validationMessage : null}\n          </div>\n\n          ${/* Non-fluid: validation and helper outside field wrapper */ ''}\n          ${!isFluid && !inline ? validationMessage || helper : null}\n        </div>\n      </div>\n    `;\n  }\n\n  updated() {\n    this.toggleAttribute('ai-label', this._hasAILabel);\n    const label = this.shadowRoot?.querySelector(\"slot[name='ai-label']\");\n\n    if (label) {\n      label?.classList.toggle(\n        `${prefix}--slug--revert`,\n        this.querySelector(`${prefix}-ai-label`)?.hasAttribute('revert-active')\n      );\n    } else {\n      this.shadowRoot\n        ?.querySelector(\"slot[name='slug']\")\n        ?.classList.toggle(\n          `${prefix}--slug--revert`,\n          this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')\n        );\n    }\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSTextInput;\n"],"mappings":"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"}
+{"version":3,"file":"text-input.js","names":["ifNonEmpty","styles","customElement"],"sources":["../../../src/components/text-input/text-input.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, query } from 'lit/decorators.js';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport { iconLoader } from '../../globals/internal/icon-loader';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport View16 from '@carbon/icons/es/view/16.js';\nimport ViewOff16 from '@carbon/icons/es/view--off/16.js';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport {\n  INPUT_COLOR_SCHEME,\n  INPUT_SIZE,\n  INPUT_TOOLTIP_ALIGNMENT,\n  INPUT_TOOLTIP_DIRECTION,\n  INPUT_TYPE,\n} from './defs';\nimport styles from './text-input.scss?lit';\n\nexport {\n  INPUT_COLOR_SCHEME,\n  INPUT_SIZE,\n  INPUT_TOOLTIP_ALIGNMENT,\n  INPUT_TOOLTIP_DIRECTION,\n  INPUT_TYPE,\n};\n\n/**\n * Text Input element. Supports all the usual attributes for textual input types\n *\n * @element cds-text-input\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-text-input`)\nclass CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * `true` if there is an AI Label.\n   */\n  protected _hasAILabel = false;\n\n  /**\n   * Handles `slotchange` event.\n   */\n  protected _handleSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTextInput).aiLabelItem\n            ) ||\n            // remove reference to slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSTextInput).slugItem\n            )\n          : false\n      );\n\n    this._hasAILabel = Boolean(hasContent);\n    (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n    this.requestUpdate();\n  }\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\n\n  @query('slot[name=\"helper-text\"]')\n  protected _slotHelperTextNode!: HTMLSlotElement;\n\n  /**\n   * The internal value.\n   */\n  protected _value = '';\n\n  /**\n   * Handles `oninput` event on the `input`.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLInputElement).value;\n  }\n\n  _handleFormdata(event: FormDataEvent) {\n    const { formData } = event;\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  protected _handleHelperTextSlotChange() {\n    this.requestUpdate();\n  }\n\n  /**\n   * May be any of the standard HTML autocomplete options\n   */\n  @property()\n  autocomplete = '';\n\n  /**\n   * Sets the input to be focussed automatically on page load. Defaults to false\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * Controls the disabled state of the input\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Specify whether to display the character counter\n   */\n  @property({ type: Boolean, attribute: 'enable-counter', reflect: true })\n  enableCounter = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * Specify if the currently value is invalid.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Max character count allowed for input. This is needed in order for enableCounter to display\n   */\n  @property({ type: Number, attribute: 'max-count', reflect: true })\n  maxCount;\n\n  /**\n   * Specify whether the control is currently in warning state\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Provide the text that is displayed when the control is in warning state\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  /**\n   * Specify whether you want the underlying label to be visually hidden\n   */\n  @property({ attribute: 'hide-label', type: Boolean, reflect: true })\n  hideLabel = false;\n\n  /**\n   * Generic label that will be used as the textual representation of what this field is for\n   */\n  @property({ attribute: 'label' })\n  label = '';\n\n  /**\n   * Name for the input in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the input against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the input has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Specify if the component should be read-only\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * Boolean property to set the required status\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The special validity message for `required`.\n   */\n  @property({ attribute: 'required-validity-message' })\n  requiredValidityMessage = 'Please fill out this field.';\n\n  /**\n   * \"Hide password\" tooltip text on password visibility toggle\n   *\n   * @deprecated will be removed in the next major version, use `cds-password-input` instead\n   */\n  @property()\n  hidePasswordLabel = 'Hide password';\n\n  /**\n   * \"Show password\" tooltip text on password visibility toggle\n   *\n   * @deprecated will be removed in the next major version, use `cds-password-input` instead\n   */\n  @property()\n  showPasswordLabel = 'Show password';\n\n  /**\n   * Boolean property to render password visibility toggle\n   *\n   * @deprecated will be removed in the next major version, use `cds-password-input` instead\n   */\n  @property({\n    type: Boolean,\n    attribute: 'show-password-visibility-toggle',\n    reflect: true,\n  })\n  showPasswordVisibilityToggle = false;\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.MEDIUM;\n\n  @property({ type: Boolean })\n  isFluid = false;\n\n  /**\n   * true to use the inline version.\n   */\n  @property({ type: Boolean, reflect: true })\n  inline = false;\n\n  /**\n   * Specify the alignment of the tooltip to the icon-only button.\n   * Can be one of: start, center, or end.\n   */\n  @property()\n  tooltipAlignment = INPUT_TOOLTIP_ALIGNMENT.CENTER;\n\n  /**\n   * Specify the direction of the tooltip for icon-only buttons.\n   * Can be either top, right, bottom, or left.\n   */\n  @property()\n  tooltipDirection = INPUT_TOOLTIP_DIRECTION.BOTTOM;\n\n  /**\n   * The type of the input. Can be one of the types listed in the INPUT_TYPE enum\n   */\n  @property({ reflect: true })\n  type = INPUT_TYPE.TEXT;\n\n  /**\n   * The validity message. If present and non-empty, this input shows the UI of its invalid state.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the input.\n   */\n  @property({ reflect: true })\n  get value() {\n    // FIXME: Figure out how to deal with TS2611\n    // once we have the input we can directly query for the value\n    if (this._input) {\n      return this._input.value;\n    }\n    // but before then _value will work fine\n    return this._value;\n  }\n\n  set value(value) {\n    const oldValue = this._value;\n    this._value = value;\n    // make sure that lit-element updates the right properties\n    this.requestUpdate('value', oldValue);\n    // we set the value directly on the input (when available)\n    // so that programatic manipulation updates the UI correctly\n    if (this._input) {\n      this._input.value = value;\n    }\n  }\n\n  /**\n   * Handles password visibility toggle button click\n   *\n   * @deprecated will be removed in the next major version, use `cds-password-input` instead\n   */\n  private togglePasswordVisibility() {\n    this.type =\n      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n  }\n\n  render() {\n    const {\n      disabled,\n      enableCounter,\n      helperText,\n      hideLabel,\n      inline,\n      isFluid,\n      invalid,\n      invalidText,\n      label,\n      maxCount,\n      readonly,\n      required,\n      size,\n      type,\n      warn,\n      warnText,\n      value,\n      _handleInput: handleInput,\n      _hasAILabel: hasAILabel,\n      _handleSlotChange: handleSlotChange,\n    } = this;\n\n    const invalidIcon = iconLoader(WarningFilled16, {\n      class: `${prefix}--text-input__invalid-icon`,\n    });\n\n    const warnIcon = iconLoader(WarningAltFilled16, {\n      class: `${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning`,\n    });\n\n    const normalizedProps: {\n      disabled: boolean;\n      invalid: boolean;\n      warn: boolean;\n      'slot-name': string;\n      'slot-text': string;\n      icon: ReturnType<typeof iconLoader>;\n    } = {\n      disabled: !readonly && disabled,\n      invalid: !readonly && invalid,\n      warn: !readonly && !invalid && warn,\n      'slot-name': '',\n      'slot-text': '',\n      icon: null,\n    };\n\n    if (normalizedProps.invalid) {\n      normalizedProps.icon = invalidIcon;\n      normalizedProps['slot-name'] = 'invalid-text';\n      normalizedProps['slot-text'] = invalidText;\n    } else if (normalizedProps.warn) {\n      normalizedProps.icon = warnIcon;\n      normalizedProps['slot-name'] = 'warn-text';\n      normalizedProps['slot-text'] = warnText;\n    }\n\n    const counterClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--text-input__label-counter`]: true,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n\n    const inputWrapperClasses = classMap({\n      [`${prefix}--form-item`]: true,\n      [`${prefix}--text-input-wrapper`]: true,\n      [`${prefix}--text-input-wrapper--inline`]: inline,\n      [`${prefix}--text-input-wrapper--readonly`]: readonly,\n      [`${prefix}--text-input-wrapper--inline--invalid`]:\n        inline && normalizedProps.invalid,\n    });\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--invalid`]: normalizedProps.invalid,\n      [`${prefix}--text-input--warning`]: normalizedProps.warn,\n      [`${prefix}--text-input--${size}`]: size,\n      [`${prefix}--layout--size-${size}`]: size,\n      [`${prefix}--password-input`]: type === INPUT_TYPE.PASSWORD, // TODO: deprecated, remove in v12\n      [`${prefix}--text-input__field-wrapper--decorator`]: hasAILabel,\n    });\n\n    const fieldOuterWrapperClasses = classMap({\n      [`${prefix}--text-input__field-outer-wrapper`]: true,\n      [`${prefix}--text-input__field-outer-wrapper--inline`]: inline,\n    });\n\n    const fieldWrapperClasses = classMap({\n      [`${prefix}--text-input__field-wrapper`]: true,\n      [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--visually-hidden`]: hideLabel,\n      [`${prefix}--label--disabled`]: normalizedProps.disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,\n    });\n\n    // TODO: deprecated, remove in v12\n    const passwordIsVisible = type !== INPUT_TYPE.PASSWORD;\n    const passwordVisibilityIcon = passwordIsVisible\n      ? iconLoader(ViewOff16, { class: `${prefix}--icon-visibility-off` })\n      : iconLoader(View16, { class: `${prefix}--icon-visibility-on` });\n\n    // TODO: deprecated, remove in v12\n    const passwordVisibilityToggleClasses = classMap({\n      [`${prefix}--text-input--password__visibility__toggle`]: true,\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--icon-only`]: true,\n      [`${prefix}--tooltip__trigger`]: true,\n      [`${prefix}--tooltip--a11y`]: true,\n      [`${prefix}--btn--disabled`]: normalizedProps.disabled,\n      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n        this.tooltipAlignment,\n    });\n\n    // TODO: deprecated, remove in v12\n    const passwordButtonLabel = html`\n      <span class=\"${prefix}--assistive-text\">\n        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n      </span>\n    `;\n\n    // TODO: deprecated, remove in v12\n    const passwordVisibilityButton = () => html`\n      <button\n        type=\"button\"\n        class=\"${passwordVisibilityToggleClasses}\"\n        ?disabled=\"${normalizedProps.disabled}\"\n        @click=\"${this.togglePasswordVisibility}\">\n        ${!normalizedProps.disabled ? passwordButtonLabel : null}\n        ${passwordVisibilityIcon}\n      </button>\n    `;\n\n    const textCount = value?.length;\n\n    const counter =\n      enableCounter && maxCount\n        ? html` <label class=\"${counterClasses}\">\n            <slot name=\"label-text\">${textCount}/${maxCount}</slot>\n          </label>`\n        : null;\n\n    const labelWrapper = html`<div class=\"${prefix}--text-input__label-wrapper\">\n      <label class=\"${labelClasses}\">\n        <slot name=\"label-text\">${label}</slot>\n      </label>\n      ${counter}\n    </div>`;\n\n    const hasHelperText =\n      helperText || (this._slotHelperTextNode?.assignedNodes().length ?? 0) > 0;\n\n    const helper = html`<div\n      class=\"${helperTextClasses}\"\n      id=\"helper-text\"\n      ?hidden=\"${normalizedProps.invalid ||\n      normalizedProps.warn ||\n      !hasHelperText}\">\n      <slot\n        name=\"helper-text\"\n        @slotchange=\"${this._handleHelperTextSlotChange}\">\n        ${helperText}\n      </slot>\n    </div>`;\n\n    const validationMessage =\n      normalizedProps.invalid || normalizedProps.warn\n        ? html`<div\n            class=\"${prefix}--form-requirement\"\n            ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n            <slot name=\"${normalizedProps['slot-name']}\">\n              ${normalizedProps['slot-text']}\n            </slot>\n          </div>`\n        : null;\n\n    return html`\n      <div class=\"${inputWrapperClasses}\">\n        ${!inline\n          ? labelWrapper\n          : html`<div class=\"${prefix}--text-input__label-helper-wrapper\">\n              ${labelWrapper} ${!isFluid ? validationMessage || helper : null}\n            </div>`}\n        <div class=\"${fieldOuterWrapperClasses}\">\n          <div class=\"${fieldWrapperClasses}\" ?data-invalid=\"${invalid}\">\n            ${normalizedProps.icon}\n            <input\n              autocomplete=\"${this.autocomplete}\"\n              ?autofocus=\"${this.autofocus}\"\n              class=\"${inputClasses}\"\n              ?data-invalid=\"${invalid}\"\n              ?disabled=\"${disabled}\"\n              ?aria-describedby=\"${hasHelperText ? 'helper-text' : undefined}\"\n              id=\"input\"\n              name=\"${ifNonEmpty(this.name)}\"\n              pattern=\"${ifNonEmpty(this.pattern)}\"\n              placeholder=\"${ifNonEmpty(this.placeholder)}\"\n              ?readonly=\"${readonly}\"\n              ?required=\"${required}\"\n              type=\"${ifNonEmpty(type)}\"\n              .value=\"${this._value}\"\n              maxlength=\"${ifNonEmpty(maxCount)}\"\n              @input=\"${handleInput}\" />\n            <slot name=\"ai-label\" @slotchange=\"${handleSlotChange}\"></slot>\n            <slot name=\"slug\" @slotchange=\"${handleSlotChange}\"></slot>\n            ${this.showPasswordVisibilityToggle &&\n            (type === INPUT_TYPE.PASSWORD || type === INPUT_TYPE.TEXT)\n              ? passwordVisibilityButton()\n              : null}\n            ${isFluid\n              ? html`<hr class=\"${prefix}--text-input__divider\" />`\n              : null}\n            ${isFluid && !inline ? validationMessage : null}\n          </div>\n\n          ${/* Non-fluid: validation and helper outside field wrapper */ ''}\n          ${!isFluid && !inline ? validationMessage || helper : null}\n        </div>\n      </div>\n    `;\n  }\n\n  updated() {\n    this.toggleAttribute('ai-label', this._hasAILabel);\n    const label = this.shadowRoot?.querySelector(\"slot[name='ai-label']\");\n\n    if (label) {\n      label?.classList.toggle(\n        `${prefix}--slug--revert`,\n        this.querySelector(`${prefix}-ai-label`)?.hasAttribute('revert-active')\n      );\n    } else {\n      this.shadowRoot\n        ?.querySelector(\"slot[name='slug']\")\n        ?.classList.toggle(\n          `${prefix}--slug--revert`,\n          this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')\n        );\n    }\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSTextInput;\n"],"mappings":"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"}

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

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/text-input/text-input.scss?lit
 var text_input_default = css(["@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--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.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}.cds--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds--layer-one.cds--layer__with-background,.cds--layer-three.cds--layer__with-background,.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--fieldset *,.cds--fieldset :after,.cds--fieldset :before{box-sizing:inherit}.cds--form-item{align-items:flex-start;display:flex;flex:1 1 auto;flex-direction:column;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.cds--label html{font-size:100%}.cds--label body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--label strong{font-weight:600}.cds--label{color:var(--cds-text-secondary,#525252);display:inline-block;font-weight:var(--cds-label-01-font-weight,400);font-weight:400;line-height:var(--cds-label-01-line-height,1.33333);line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds--label,.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label .cds--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds--label--no-margin{margin-block-end:0}.cds--label+.cds--tooltip{inset-block-start:.2rem;inset-inline-start:.5rem;position:relative}.cds--label+.cds--tooltip .cds--tooltip__trigger{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-size:100%;inline-size:100%;margin:0;padding:0;text-align:start;vertical-align:baseline}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger :after,.cds--label+.cds--tooltip .cds--tooltip__trigger :before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger{align-items:center;display:flex;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);justify-content:center;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label.cds--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--label.cds--skeleton: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--label.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--label.cds--skeleton{background:CanvasText}.cds--label.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--label.cds--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker--warning~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;font-weight:400;max-block-size:12.5rem;overflow:visible}.cds--select--inline.cds--select--warning .cds--select-input--inline__wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement{display:inline-flex;inline-size:100%;margin:0;margin-block-end:0;max-block-size:100%;overflow:visible;padding-inline-start:.5rem}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:none}.cds--form--fluid .cds--form-requirement{margin:0;padding:.5rem 2.5rem .5rem 1rem}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--form-requirement strong{font-weight:600}.cds--form-requirement{display:none;font-size:var(--cds-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin:.25rem 0 0;max-block-size:0;overflow:hidden}.cds--select--inline .cds--form__helper-text{margin-block-start:0}.cds--form__helper-text{color:var(--cds-text-helper,#6f6f6f);font-size:var(--cds-helper-text-01-font-size,.75rem);inline-size:100%;letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin-block-start:.25rem;opacity:1;z-index:0}.cds--form__helper-text--disabled,.cds--label--disabled,fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--text-input{--cds-layout-size-height-local:clamp(max(var(--cds-layout-size-height-min),var(--cds-layout-size-height-sm)),var(--cds-layout-size-height,var(--cds-layout-size-height-md)),min(var(--cds-layout-size-height-max),var(--cds-layout-size-height-lg)));--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min),var(--cds-layout-density-padding-inline,var(--cds-layout-density-padding-inline-normal)),var(--cds-layout-density-padding-inline-max));border:0;box-sizing:border-box;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--text-input *,.cds--text-input :after,.cds--text-input :before{box-sizing:inherit}.cds--text-input{background-color:var(--cds-field);block-size:var(--cds-layout-size-height-local);border:none;border-block-end:1px solid var(--cds-border-strong);color:var(--cds-text-primary,#161616);font-family:inherit;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);inline-size:100%;letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572);outline:2px solid transparent;outline-offset:-2px;padding:0 var(--cds-layout-density-padding-inline-local);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-input:active,.cds--text-input:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--text-input:active,.cds--text-input:focus{outline-style:dotted}}.cds--text-input-wrapper svg[hidden]{display:none}.cds--password-input{padding-inline-end:2.5rem}.cds--text-input--sm.cds--password-input{padding-inline-end:2rem}.cds--text-input--lg.cds--password-input{padding-inline-end:3rem}.cds--text-input::-moz-placeholder{color:var(--cds-text-placeholder,hsla(0,0%,9%,.4));opacity:1}.cds--text-input::placeholder{color:var(--cds-text-placeholder,hsla(0,0%,9%,.4));opacity:1}.cds--text-input--light{background-color:var(--cds-field-02,#fff)}.cds--text-input__field-wrapper{display:flex;inline-size:100%;position:relative}.cds--text-input__invalid-icon{position:absolute;fill:var(--cds-support-error,#da1e28);inset-block-start:50%;inset-inline-end:1rem;transform:translateY(-50%)}.cds--text-input__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--text-input__invalid-icon--warning path:first-of-type{fill:#000;opacity:1}.cds--text-input--password__visibility{align-items:center;display:inline-flex;overflow:visible;position:relative}.cds--text-input--password__visibility:focus{outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--text-input--password__visibility:focus{outline-style:dotted}}.cds--text-input--password__visibility{cursor:pointer}.cds--text-input--password__visibility:focus{outline:1px solid transparent}.cds--text-input--password__visibility:focus svg{outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--text-input--password__visibility:focus svg{outline-style:dotted}}.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after,.cds--text-input--password__visibility:before{align-items:center;display:flex;opacity:0;pointer-events:none;position:absolute;z-index:6000}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after,.cds--text-input--password__visibility:before{display:inline-block}}.cds--text-input--password__visibility:after,.cds--text-input--password__visibility:before{transition:opacity 70ms cubic-bezier(.2,0,.38,.9)}@media screen and (prefers-reduced-motion:reduce){.cds--text-input--password__visibility:after,.cds--text-input--password__visibility:before{transition:none}}.cds--text-input--password__visibility.cds--tooltip--a11y:after,.cds--text-input--password__visibility.cds--tooltip--a11y:before{transition:none}.cds--text-input--password__visibility:before{block-size:0;border-style:solid;content:\"\";inline-size:0}.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text{box-sizing:content-box;color:inherit;opacity:1;white-space:normal;word-break:break-word}.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after{background-color:var(--cds-background-inverse,#393939);block-size:auto;border-radius:.125rem;box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));color:var(--cds-text-inverse,#fff);font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:400;font-weight:var(--cds-body-compact-01-font-weight,400);inline-size:-moz-max-content;inline-size:max-content;letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572);max-inline-size:13rem;min-inline-size:1.5rem;padding:.1875rem 1rem;text-align:start;transform:translateX(-50%);z-index:6000}@media (-ms-high-contrast:active),(-ms-high-contrast:none){.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after{inline-size:auto}}@supports (-ms-accelerator:true){.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after{inline-size:auto}}@supports (-ms-ime-align:auto){.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after{inline-size:auto}}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after{border:1px solid transparent}}.cds--text-input--password__visibility:after{content:attr(aria-label)}.cds--text-input--password__visibility.cds--tooltip--a11y:after{content:none}.cds--text-input--password__visibility.cds--tooltip--visible:after,.cds--text-input--password__visibility.cds--tooltip--visible:before,.cds--text-input--password__visibility:focus:after,.cds--text-input--password__visibility:focus:before,.cds--text-input--password__visibility:hover:after,.cds--text-input--password__visibility:hover:before{opacity:1}@keyframes cds--tooltip-fade{0%{opacity:0}to{opacity:1}}.cds--text-input--password__visibility.cds--tooltip--visible .cds--assistive-text,.cds--text-input--password__visibility.cds--tooltip--visible+.cds--assistive-text,.cds--text-input--password__visibility:focus .cds--assistive-text,.cds--text-input--password__visibility:focus+.cds--assistive-text,.cds--text-input--password__visibility:hover .cds--assistive-text,.cds--text-input--password__visibility:hover+.cds--assistive-text{margin:auto;overflow:visible;clip:auto}.cds--text-input--password__visibility.cds--tooltip--visible .cds--assistive-text,.cds--text-input--password__visibility.cds--tooltip--visible+.cds--assistive-text,.cds--text-input--password__visibility.cds--tooltip--visible.cds--tooltip--a11y:before,.cds--text-input--password__visibility:focus .cds--assistive-text,.cds--text-input--password__visibility:focus+.cds--assistive-text,.cds--text-input--password__visibility:focus.cds--tooltip--a11y:before,.cds--text-input--password__visibility:hover .cds--assistive-text,.cds--text-input--password__visibility:hover+.cds--assistive-text,.cds--text-input--password__visibility:hover.cds--tooltip--a11y:before{animation:cds--tooltip-fade 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-input--password__visibility.cds--tooltip--hidden .cds--assistive-text,.cds--text-input--password__visibility.cds--tooltip--hidden+.cds--assistive-text{margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}.cds--text-input--password__visibility.cds--tooltip--hidden.cds--tooltip--a11y:before{animation:none;opacity:0}.cds--text-input--password__visibility .cds--assistive-text:after{block-size:.75rem;content:\"\";display:block;inline-size:100%;inset-block-start:-.75rem;inset-inline-start:0;position:absolute}.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after,.cds--text-input--password__visibility:before{inset-block-end:0;inset-inline-start:50%}.cds--text-input--password__visibility:before{border-color:transparent transparent var(--cds-background-inverse,#393939);border-width:0 .25rem .3125rem;inset-block-end:-.5rem;transform:translate(-50%,100%)}.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility:after{inset-block-end:-.8125rem;transform:translate(-50%,100%)}.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{align-items:center;background:none;block-size:100%;border:0;cursor:pointer;display:flex;inline-size:2.5rem;inset-inline-end:0;justify-content:center;min-block-size:auto;outline:2px solid transparent;outline-offset:-2px;padding:0;position:absolute;transition:outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--toggle-password-tooltip .cds--popover{inset-inline-start:-2.5rem}.cds--toggle-password-tooltip .cds--popover-content{min-inline-size:2.5rem}.cds--text-input--sm+.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{inline-size:2rem}.cds--text-input--lg+.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{inline-size:3rem}.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg{fill:var(--cds-icon-primary,#161616)}.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus{outline-style:dotted}}.cds--text-input--invalid,.cds--text-input--warning{padding-inline-end:2.5rem}.cds--text-input--invalid.cds--password-input{padding-inline-end:4rem}.cds--text-input--invalid+.cds--text-input--password__visibility__toggle{inset-inline-end:1rem}.cds--password-input-wrapper .cds--text-input__invalid-icon{inset-inline-end:2.5rem}.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{cursor:not-allowed}.cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger svg,.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger{cursor:default}.cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover svg{fill:var(--cds-icon-disabled,hsla(0,0%,9%,.25))}.cds--text-input--password__visibility__toggle:disabled.cds--tooltip__trigger:hover{cursor:default}.cds--text-input__counter-alert{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px}.cds--text-input:disabled{background-color:var(--cds-field);border-block-end:1px solid transparent;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed;outline:2px solid transparent;outline-offset:-2px;-webkit-text-fill-color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--text-input--light:disabled{background-color:var(--cds-field-02,#fff)}.cds--text-input:disabled::-moz-placeholder{color:var(--cds-text-disabled,hsla(0,0%,9%,.25));opacity:1}.cds--text-input:disabled::placeholder{color:var(--cds-text-disabled,hsla(0,0%,9%,.25));opacity:1}.cds--text-input--invalid{outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--text-input--invalid{outline-style:dotted}}.cds--text-input--invalid{box-shadow:none}.cds--text-input--invalid .cds--text-input--password__visibility__toggle{inset-inline-end:2.5rem}.cds--skeleton.cds--text-input{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--skeleton.cds--text-input:active,.cds--skeleton.cds--text-input:focus,.cds--skeleton.cds--text-input:hover{border:none;cursor:default;outline:none}.cds--skeleton.cds--text-input: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--skeleton.cds--text-input:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--skeleton.cds--text-input{background:CanvasText}.cds--skeleton.cds--text-input:before{background:Canvas;forced-color-adjust:none}}.cds--form--fluid .cds--text-input-wrapper{background:var(--cds-field);position:relative;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--form--fluid .cds--label{align-items:center;block-size:1rem;display:flex;inset-block-start:.8125rem;inset-inline-start:1rem;margin:0;position:absolute;z-index:1}.cds--form--fluid .cds--form__helper-text{display:none}.cds--form--fluid .cds--text-input{min-block-size:4rem;padding:2rem 1rem .8125rem}.cds--form--fluid .cds--text-input__divider,.cds--text-input__divider{display:none}.cds--form--fluid .cds--text-input--invalid,.cds--form--fluid .cds--text-input--warning{border-block-end:none}.cds--form--fluid .cds--text-input--invalid+.cds--text-input__divider,.cds--form--fluid .cds--text-input--warning+.cds--text-input__divider{border-color:var(--cds-border-subtle);border-style:solid;border-block-end:none;display:block;margin:0 1rem}.cds--form--fluid .cds--text-input__invalid-icon{inset-block-start:5rem}.cds--form--fluid .cds--text-input__field-wrapper--warning>.cds--text-input--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid{outline:none}.cds--form--fluid .cds--text-input__field-wrapper--warning{border-block-end:1px solid var(--cds-border-strong)}.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus){outline-style:dotted}}.cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within{outline-style:dotted}}.cds--form--fluid .cds--text-input__field-wrapper--warning>.cds--text-input--warning:focus,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:focus{outline:none}.cds--text-input-wrapper.cds--text-input-wrapper--inline{flex-flow:row wrap}.cds--text-input-wrapper .cds--label--inline{flex:1;margin:.8125rem 0 0;overflow-wrap:break-word;word-break:break-word}.cds--text-input-wrapper .cds--label--inline--sm{margin-block-start:.5625rem}.cds--text-input-wrapper .cds--label--inline--lg{margin-block-start:1.0625rem}.cds--text-input__label-helper-wrapper{flex:2;flex-direction:column;margin-inline-end:1.5rem;max-inline-size:8rem;overflow-wrap:break-word}.cds--text-input-wrapper .cds--form__helper-text--inline{margin-block-start:.125rem}.cds--text-input__field-outer-wrapper{align-items:flex-start;display:flex;flex:1 1 auto;flex-direction:column;inline-size:100%}.cds--text-input__field-outer-wrapper--inline{flex:8;flex-direction:column}.cds--text-input-wrapper--inline .cds--form-requirement{display:block;font-weight:400;max-block-size:12.5rem;overflow:visible}.cds--text-input-wrapper--inline--invalid .cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input-wrapper--readonly,.cds--text-input-wrapper--readonly .cds--text-input{background:transparent;border-block-end-color:var(--cds-border-subtle)}.cds--text-input__field-wrapper .cds--ai-label,.cds--text-input__field-wrapper .cds--slug,.cds--text-input__field-wrapper--decorator .cds--text-input__field-inner-wrapper--decorator>*{inset-block-start:50%;inset-inline-end:1rem;position:absolute;transform:translateY(-50%)}.cds--text-input__field-wrapper--decorator .cds--text-input:has(~.cds--text-input__field-inner-wrapper--decorator .cds--ai-label):not(:has(~.cds--text-input__field-inner-wrapper--decorator .cds--ai-label--revert)),.cds--text-input__field-wrapper--slug .cds--text-input:has(~.cds--ai-label):not(:has(~.cds--ai-label--revert)),.cds--text-input__field-wrapper--slug .cds--text-input:has(~.cds--slug):not(:has(~.cds--slug--revert)){background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds--text-input__field-wrapper--decorator .cds--text-input:has(~.cds--text-input__field-inner-wrapper--decorator>*),.cds--text-input__field-wrapper--slug .cds--text-input:has(~.cds--ai-label),.cds--text-input__field-wrapper--slug .cds--text-input:has(~.cds--slug){padding-inline-end:2.5rem}.cds--text-input--invalid:has(~.cds--ai-label),.cds--text-input--invalid:has(~.cds--slug),.cds--text-input--invalid:has(~.cds--text-input__field-inner-wrapper--decorator>*),.cds--text-input--warning:has(~.cds--ai-label),.cds--text-input--warning:has(~.cds--slug),.cds--text-input--warning:has(~.cds--text-input__field-inner-wrapper--decorator>*){padding-inline-end:4rem}.cds--text-input--invalid~.cds--ai-label,.cds--text-input--invalid~.cds--slug,.cds--text-input--invalid~.cds--text-input__field-inner-wrapper--decorator>*,.cds--text-input--warning~.cds--ai-label,.cds--text-input--warning~.cds--slug,.cds--text-input--warning~.cds--text-input__field-inner-wrapper--decorator>*{inset-inline-end:2.5rem}.cds--text-input__field-wrapper--decorator .cds--text-input__field-inner-wrapper--decorator:not(:has(.cds--ai-label))>*{block-size:1rem}.cds--text-input__label-wrapper{display:flex;inline-size:100%;justify-content:space-between}:host(cds-text-input),:host(cds-text-input-skeleton){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;inline-size:100%;outline:none}:host(cds-text-input) ::slotted(cds-ai-label),:host(cds-text-input) ::slotted(cds-slug){inset-block-start:50%;inset-inline-end:1rem;position:absolute}:host(cds-text-input) ::slotted(cds-ai-label:not([revert-active])),:host(cds-text-input) ::slotted(cds-slug:not([revert-active])){transform:translateY(-50%)}:host(cds-text-input[show-password-visibility-toggle]) .cds--text-input{padding-inline-end:2.5rem}:host(cds-text-input[show-password-visibility-toggle]) .cds--text-input__invalid-icon{inset-inline-end:2.5rem}:host(cds-text-input[invalid]) .cds--text-input__field-wrapper--decorator .cds--text-input,:host(cds-text-input[warn]) .cds--text-input__field-wrapper--decorator .cds--text-input{padding-inline-end:4rem}:host(cds-text-input[invalid]) ::slotted(cds-ai-label),:host(cds-text-input[invalid]) ::slotted(cds-slug),:host(cds-text-input[warn]) ::slotted(cds-ai-label),:host(cds-text-input[warn]) ::slotted(cds-slug){inset-inline-end:2.5rem}:host(cds-text-input[ai-label]) .cds--text-input__field-wrapper--decorator{background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}"]);
-
 //#endregion
 export { text_input_default as default };
+
 //# sourceMappingURL=text-input.scss.js.map

package/es/components/textarea/defs.js

@@ -6,5 +6,4 @@
  */
 
 import { FORM_ELEMENT_COLOR_SCHEME } from "../../globals/shared-enums.js";
-
-export { FORM_ELEMENT_COLOR_SCHEME as TEXTAREA_COLOR_SCHEME };
+export { FORM_ELEMENT_COLOR_SCHEME as TEXTAREA_COLOR_SCHEME };

package/es/components/textarea/stories/helpers.js

@@ -6,7 +6,6 @@
  */
 
 import { action } from "storybook/actions";
-
 //#region src/components/textarea/stories/helpers.ts
 /**
 * Copyright IBM Corp. 2019, 2023
@@ -32,7 +31,7 @@ const createProps = ({ boolean, textNullable, number }) => ({
 	warn: boolean("Warn (warn)", false),
 	warnText: textNullable("Warn text (warn-text)", "This is a warning message.")
 });
-
 //#endregion
 export { createProps as default };
+
 //# sourceMappingURL=helpers.js.map

package/es/components/textarea/stories/helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.js","names":[],"sources":["../../../../src/components/textarea/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';\n\nconst createProps = ({ boolean, textNullable, number }) => ({\n  cols: number('Number of columns (cols)', 0),\n  disabled: boolean('Disabled (disabled)', false),\n  enableCounter: boolean('Enable character counter (enable-counter)', true),\n  helperText: textNullable('Helper text (helper-text)', 'Textarea helper text'),\n  hideLabel: boolean('Hide label (hide-label)', false),\n  invalid: boolean('Invalid (invalid)', false),\n  invalidText: textNullable('Invalid text (invalid-text)', 'Invalid text'),\n  label: textNullable('Label (label)', 'Textarea label'),\n  maxCount: number('Max character count (max-count', 500),\n  onInput: action('input'),\n  placeholder: textNullable('Placeholder text (placeholder)', ''),\n  readonly: boolean('Read only (readonly)', false),\n  rows: number('Number of rows (rows)', 4),\n  value: textNullable('Value (value)', ''),\n  warn: boolean('Warn (warn)', false),\n  warnText: textNullable('Warn text (warn-text)', 'This is a warning message.'),\n});\n\nexport default createProps;\n"],"mappings":";;;;;;;;;;;;;;;;AASA,MAAM,eAAe,EAAE,SAAS,cAAc,cAAc;CAC1D,MAAM,OAAO,4BAA4B,EAAE;CAC3C,UAAU,QAAQ,uBAAuB,MAAM;CAC/C,eAAe,QAAQ,6CAA6C,KAAK;CACzE,YAAY,aAAa,6BAA6B,uBAAuB;CAC7E,WAAW,QAAQ,2BAA2B,MAAM;CACpD,SAAS,QAAQ,qBAAqB,MAAM;CAC5C,aAAa,aAAa,+BAA+B,eAAe;CACxE,OAAO,aAAa,iBAAiB,iBAAiB;CACtD,UAAU,OAAO,kCAAkC,IAAI;CACvD,SAAS,OAAO,QAAQ;CACxB,aAAa,aAAa,kCAAkC,GAAG;CAC/D,UAAU,QAAQ,wBAAwB,MAAM;CAChD,MAAM,OAAO,yBAAyB,EAAE;CACxC,OAAO,aAAa,iBAAiB,GAAG;CACxC,MAAM,QAAQ,eAAe,MAAM;CACnC,UAAU,aAAa,yBAAyB,6BAA6B;CAC9E"}
+{"version":3,"file":"helpers.js","names":[],"sources":["../../../../src/components/textarea/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';\n\nconst createProps = ({ boolean, textNullable, number }) => ({\n  cols: number('Number of columns (cols)', 0),\n  disabled: boolean('Disabled (disabled)', false),\n  enableCounter: boolean('Enable character counter (enable-counter)', true),\n  helperText: textNullable('Helper text (helper-text)', 'Textarea helper text'),\n  hideLabel: boolean('Hide label (hide-label)', false),\n  invalid: boolean('Invalid (invalid)', false),\n  invalidText: textNullable('Invalid text (invalid-text)', 'Invalid text'),\n  label: textNullable('Label (label)', 'Textarea label'),\n  maxCount: number('Max character count (max-count', 500),\n  onInput: action('input'),\n  placeholder: textNullable('Placeholder text (placeholder)', ''),\n  readonly: boolean('Read only (readonly)', false),\n  rows: number('Number of rows (rows)', 4),\n  value: textNullable('Value (value)', ''),\n  warn: boolean('Warn (warn)', false),\n  warnText: textNullable('Warn text (warn-text)', 'This is a warning message.'),\n});\n\nexport default createProps;\n"],"mappings":";;;;;;;;;;;;;;;AASA,MAAM,eAAe,EAAE,SAAS,cAAc,cAAc;CAC1D,MAAM,OAAO,4BAA4B,EAAE;CAC3C,UAAU,QAAQ,uBAAuB,MAAM;CAC/C,eAAe,QAAQ,6CAA6C,KAAK;CACzE,YAAY,aAAa,6BAA6B,uBAAuB;CAC7E,WAAW,QAAQ,2BAA2B,MAAM;CACpD,SAAS,QAAQ,qBAAqB,MAAM;CAC5C,aAAa,aAAa,+BAA+B,eAAe;CACxE,OAAO,aAAa,iBAAiB,iBAAiB;CACtD,UAAU,OAAO,kCAAkC,IAAI;CACvD,SAAS,OAAO,QAAQ;CACxB,aAAa,aAAa,kCAAkC,GAAG;CAC/D,UAAU,QAAQ,wBAAwB,MAAM;CAChD,MAAM,OAAO,yBAAyB,EAAE;CACxC,OAAO,aAAa,iBAAiB,GAAG;CACxC,MAAM,QAAQ,eAAe,MAAM;CACnC,UAAU,aAAa,yBAAyB,6BAA6B;CAC9E"}

package/es/components/textarea/textarea-skeleton.js

@@ -5,13 +5,12 @@
  * 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 textarea_default from "./textarea.scss.js";
 import { LitElement, html } from "lit";
 import { property } from "lit/decorators.js";
-
 //#region src/components/textarea/textarea-skeleton.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -32,8 +31,8 @@ let CDSTextareaSkeleton = class CDSTextareaSkeleton extends LitElement {
 	render() {
 		const { hideLabel } = this;
 		return html`
-      ${hideLabel ? "" : html`<span class="${prefix}--label ${prefix}--skeleton"></span>`}
-      <div class="${prefix}--skeleton ${prefix}--text-area"></div>
+      ${hideLabel ? "" : html`<span class="${"cds"}--label ${"cds"}--skeleton"></span>`}
+      <div class="${"cds"}--skeleton ${"cds"}--text-area"></div>
     `;
 	}
 	static {
@@ -45,9 +44,9 @@ __decorate([property({
 	reflect: true,
 	attribute: "hide-label"
 })], CDSTextareaSkeleton.prototype, "hideLabel", void 0);
-CDSTextareaSkeleton = __decorate([carbonElement(`${prefix}-textarea-skeleton`)], CDSTextareaSkeleton);
+CDSTextareaSkeleton = __decorate([carbonElement(`cds-textarea-skeleton`)], CDSTextareaSkeleton);
 var textarea_skeleton_default = CDSTextareaSkeleton;
-
 //#endregion
 export { textarea_skeleton_default as default };
+
 //# sourceMappingURL=textarea-skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/textarea/textarea-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 { prefix } from '../../globals/settings';\nimport styles from './textarea.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * @element cds-textarea-skeleton\n *\n * Skeleton of text area.\n */\n@customElement(`${prefix}-textarea-skeleton`)\nclass CDSTextareaSkeleton 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}--skeleton ${prefix}--text-area\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTextareaSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,gCACM,4BAA4B,WAAW;;;mBAK/B;;CAEZ,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;QACP,YACE,KACA,IAAI,gBAAgB,OAAO,UAAU,OAAO,qBAAqB;oBACvD,OAAO,aAAa,OAAO;;;;gBAI7BA;;;YAbf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC;kCALrEC,cAAc,GAAG,OAAO,oBAAoB;AAqB7C,gCAAe"}
+{"version":3,"file":"textarea-skeleton.js","names":["styles","customElement"],"sources":["../../../src/components/textarea/textarea-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 { prefix } from '../../globals/settings';\nimport styles from './textarea.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\n\n/**\n * @element cds-textarea-skeleton\n *\n * Skeleton of text area.\n */\n@customElement(`${prefix}-textarea-skeleton`)\nclass CDSTextareaSkeleton 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}--skeleton ${prefix}--text-area\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSTextareaSkeleton;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkBA,IAAA,sBAAA,MACM,4BAA4B,WAAW;;;mBAK/B;;CAEZ,SAAS;EACP,MAAM,EAAE,cAAc;AACtB,SAAO,IAAI;QACP,YACE,KACA,IAAI,gBAAA,MAAuB,UAAA,MAAiB,qBAAqB;0BAChD,aAAA,MAAoB;;;;gBAI7BA;;;YAbf,SAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAc,CAAC,CAAA,EAAA,oBAAA,WAAA,aAAA,KAAA,EAAA;kCALrEC,cAAc,wBAA8B,CAAA,EAAA,oBAAA;AAqB7C,IAAA,4BAAe"}

package/es/components/textarea/textarea.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 if_non_empty_default from "../../globals/directives/if-non-empty.js";
 import text_input_default from "../text-input/text-input.js";
@@ -18,7 +18,6 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import WarningFilled16 from "@carbon/icons/es/warning--filled/16.js";
 import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16.js";
-
 //#region src/components/textarea/textarea.ts
 /**
 * Copyright IBM Corp. 2019, 2025
@@ -91,33 +90,33 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
 		const { enableCounter, maxCount } = this;
 		const textCount = this.value?.length ?? 0;
 		const wordCount = this.value?.match(/\p{L}+/gu)?.length || 0;
-		const invalidIcon = iconLoader(WarningFilled16, { class: `${prefix}--text-area__invalid-icon` });
-		const warnIcon = iconLoader(WarningAltFilled16, { class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning` });
+		const invalidIcon = iconLoader(WarningFilled16, { class: `cds--text-area__invalid-icon` });
+		const warnIcon = iconLoader(WarningAltFilled16, { class: `cds--text-area__invalid-icon cds--text-area__invalid-icon--warning` });
 		const textareaClasses = classMap({
-			[`${prefix}--text-area`]: true,
-			[`${prefix}--text-area--warn`]: this.warn,
-			[`${prefix}--text-area--invalid`]: this.invalid,
-			[`${prefix}--text-area__wrapper--decorator`]: this._hasAILabel
+			[`cds--text-area`]: true,
+			[`cds--text-area--warn`]: this.warn,
+			[`cds--text-area--invalid`]: this.invalid,
+			[`cds--text-area__wrapper--decorator`]: this._hasAILabel
 		});
 		const textareaWrapperClasses = classMap({
-			[`${prefix}--text-area__wrapper`]: true,
-			[`${prefix}--text-area__wrapper--cols`]: this.cols,
-			[`${prefix}--text-area__wrapper--warn`]: this.warn,
-			[`${prefix}--text-area__wrapper--readonly`]: this.readonly
+			[`cds--text-area__wrapper`]: true,
+			[`cds--text-area__wrapper--cols`]: this.cols,
+			[`cds--text-area__wrapper--warn`]: this.warn,
+			[`cds--text-area__wrapper--readonly`]: this.readonly
 		});
 		const labelClasses = classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--visually-hidden`]: this.hideLabel,
-			[`${prefix}--label--disabled`]: this.disabled
+			[`cds--label`]: true,
+			[`cds--visually-hidden`]: this.hideLabel,
+			[`cds--label--disabled`]: this.disabled
 		});
 		const counterClasses = classMap({
-			[`${prefix}--label`]: true,
-			[`${prefix}--label--disabled`]: this.disabled,
-			[`${prefix}--text-area__label-counter`]: true
+			[`cds--label`]: true,
+			[`cds--label--disabled`]: this.disabled,
+			[`cds--text-area__label-counter`]: true
 		});
 		const helperTextClasses = classMap({
-			[`${prefix}--form__helper-text`]: true,
-			[`${prefix}--form__helper-text--disabled`]: this.disabled
+			[`cds--form__helper-text`]: true,
+			[`cds--form__helper-text--disabled`]: this.disabled
 		});
 		const counter = enableCounter && maxCount ? html` <label class="${counterClasses}">
             <slot name="label-text"
@@ -142,7 +141,7 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
 		};
 		const validationMessage = html`
       <div
-        class="${prefix}--form-requirement"
+        class="${"cds"}--form-requirement"
         ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
         <slot name="${normalizedProps["slot-name"]}">
           ${normalizedProps["slot-text"]} ${this.isFluid ? icon() : null}
@@ -150,7 +149,7 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
       </div>
     `;
 		return html`
-      <div class="${prefix}--text-area__label-wrapper">
+      <div class="${"cds"}--text-area__label-wrapper">
         <label class="${labelClasses}" for="input">
           <slot name="label-text"> ${this.label} </slot>
         </label>
@@ -180,7 +179,7 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
         <slot name="ai-label" @slotchange="${this._handleSlotChange}"></slot>
         <slot name="slug" @slotchange="${this._handleSlotChange}"></slot>
         ${this.isFluid ? html`
-              <hr class="${prefix}--text-area__divider" />
+              <hr class="${"cds"}--text-area__divider" />
               ${validationMessage}
             ` : null}
       </div>
@@ -196,7 +195,7 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
 			else textarea.removeAttribute("maxlength");
 			this._prevCounterMode = this.counterMode;
 		}
-		const wrapper = this.shadowRoot?.querySelector(`.${prefix}--text-area__wrapper`);
+		const wrapper = this.shadowRoot?.querySelector(`.cds--text-area__wrapper`);
 		if (!wrapper) return;
 		this._resizeObserver = new ResizeObserver(() => {
 			this._measureWrapper();
@@ -208,8 +207,8 @@ let CDSTextarea = class CDSTextarea extends text_input_default {
 	* helper-text and invalid/warn-text
 	*/
 	_measureWrapper() {
-		const wrapperWidth = (this.shadowRoot?.querySelector(`.${prefix}--text-area__wrapper`))?.scrollWidth;
-		[this.shadowRoot?.querySelector(`.${prefix}--form__helper-text`), this.shadowRoot?.querySelector(`.${prefix}--form-requirement`)].forEach((el) => {
+		const wrapperWidth = (this.shadowRoot?.querySelector(`.cds--text-area__wrapper`))?.scrollWidth;
+		[this.shadowRoot?.querySelector(`.cds--form__helper-text`), this.shadowRoot?.querySelector(`.cds--form-requirement`)].forEach((el) => {
 			if (el) {
 				el.style.maxWidth = `${wrapperWidth}px`;
 				el.style.overflowWrap = "break-word";
@@ -249,9 +248,9 @@ __decorate([property({
 })], CDSTextarea.prototype, "required", void 0);
 __decorate([property()], CDSTextarea.prototype, "rows", void 0);
 __decorate([query("textarea")], CDSTextarea.prototype, "_textarea", void 0);
-CDSTextarea = __decorate([carbonElement(`${prefix}-textarea`)], CDSTextarea);
+CDSTextarea = __decorate([carbonElement(`cds-textarea`)], CDSTextarea);
 var textarea_default = CDSTextarea;
-
 //#endregion
 export { textarea_default as default };
+
 //# sourceMappingURL=textarea.js.map

package/es/components/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":["CDSTextInput","ifNonEmpty","styles","customElement"],"sources":["../../../src/components/textarea/textarea.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, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CDSTextInput from '../text-input/text-input';\nimport styles from './textarea.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Text area.\n *\n * @element cds-textarea\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-textarea`)\nclass CDSTextarea extends CDSTextInput {\n  /**\n   * Manually handles maxCount for counterMode = 'word'\n   * @param event The keyboard event.\n   */\n  protected _onKeyDown(evt: KeyboardEvent) {\n    if (!this.disabled && this.enableCounter && this.counterMode === 'word') {\n      const currentWordCount = this.value?.match(/\\p{L}+/gu)?.length || 0;\n      if (\n        (this.maxCount &&\n          currentWordCount >= this.maxCount &&\n          evt.key === ' ') ||\n        (this.maxCount &&\n          currentWordCount >= this.maxCount &&\n          evt.key === 'Enter')\n      ) {\n        evt.preventDefault();\n      }\n    }\n  }\n\n  /**\n   * Handles `onPaste` event on the `<input>`.\n   * Manually handles maxCount for counterMode = 'word' when\n   * the user is pasting text\n   *\n   * @param event The clipboard event.\n   */\n  protected _onPaste(evt: ClipboardEvent) {\n    if (\n      this.counterMode === 'word' &&\n      this.enableCounter &&\n      typeof this.maxCount !== 'undefined'\n    ) {\n      const existingWords: string[] =\n        this._textarea.value.match(/\\p{L}+/gu) || [];\n      const pastedWords: string[] =\n        evt.clipboardData?.getData('Text').match(/\\p{L}+/gu) || [];\n\n      const totalWords = existingWords.length + pastedWords.length;\n\n      if (totalWords > this.maxCount) {\n        evt.preventDefault();\n\n        const allowedWords = existingWords\n          .concat(pastedWords)\n          .slice(0, this.maxCount);\n\n        this._textarea.value = allowedWords.join(' ');\n        this._textarea.dispatchEvent(\n          new InputEvent('input', {\n            inputType: 'insertFromPaste',\n            data: allowedWords.join(' '),\n            bubbles: true,\n          })\n        );\n      }\n    }\n  }\n  /**\n   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLTextAreaElement).value;\n  }\n\n  /**\n   * The number of columns for the textarea to show by default\n   */\n  @property({ type: Number })\n  cols;\n\n  /**\n   * Specify whether the textarea is fluid or not\n   */\n  @property({ type: Boolean })\n  isFluid = false;\n\n  /**\n   * Specify the method used for calculating the counter number\n   */\n  @property({\n    type: String,\n    reflect: true,\n    hasChanged(newVal: string, oldVal: string) {\n      if ((newVal === 'character' || newVal === 'word') && newVal !== oldVal) {\n        return true;\n      }\n      return false;\n    },\n    attribute: 'counter-mode',\n  })\n  counterMode: 'character' | 'word' = 'character';\n\n  /**\n   * ID to link the `label` and `textarea`\n   */\n  @property()\n  id = '';\n\n  /**\n   * Pattern to validate the textarea against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Boolean property to set the required status\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The number of rows for the textarea to show by default\n   */\n  @property()\n  rows = 4;\n\n  /**\n   * Get a reference to the underlying textarea so we can directly apply values.\n   * This lets us fixe a bug where after a user would clear text, the value wouldn't update programmatically\n   */\n  @query('textarea')\n  protected _textarea!: HTMLTextAreaElement;\n\n  /**\n   * The previous counterMode selected. This lets the counterMode state update\n   * when the user toggles between both modes.\n   */\n  private _prevCounterMode: 'character' | 'word' = this.counterMode;\n\n  /**\n   * Observes the textarea wrapper’s size to re-measure helper/invalid/warn text width when\n   * cols is updated\n   */\n  private _resizeObserver?: ResizeObserver;\n\n  render() {\n    const { enableCounter, maxCount } = this;\n\n    const textCount = this.value?.length ?? 0;\n    const wordCount = this.value?.match(/\\p{L}+/gu)?.length || 0;\n\n    const invalidIcon = iconLoader(WarningFilled16, {\n      class: `${prefix}--text-area__invalid-icon`,\n    });\n\n    const warnIcon = iconLoader(WarningAltFilled16, {\n      class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`,\n    });\n\n    const textareaClasses = classMap({\n      [`${prefix}--text-area`]: true,\n      [`${prefix}--text-area--warn`]: this.warn,\n      [`${prefix}--text-area--invalid`]: this.invalid,\n      [`${prefix}--text-area__wrapper--decorator`]: this._hasAILabel,\n    });\n\n    const textareaWrapperClasses = classMap({\n      [`${prefix}--text-area__wrapper`]: true,\n      [`${prefix}--text-area__wrapper--cols`]: this.cols,\n      [`${prefix}--text-area__wrapper--warn`]: this.warn,\n      [`${prefix}--text-area__wrapper--readonly`]: this.readonly,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--visually-hidden`]: this.hideLabel,\n      [`${prefix}--label--disabled`]: this.disabled,\n    });\n\n    const counterClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: this.disabled,\n      [`${prefix}--text-area__label-counter`]: true,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: this.disabled,\n    });\n\n    const counter =\n      enableCounter && maxCount\n        ? html` <label class=\"${counterClasses}\">\n            <slot name=\"label-text\"\n              >${this.counterMode === 'word'\n                ? wordCount\n                : textCount}/${maxCount}</slot\n            >\n          </label>`\n        : null;\n\n    const icon = () => {\n      if (this.invalid) {\n        return invalidIcon;\n      } else if (this.warn && !this.invalid) {\n        return warnIcon;\n      }\n      return null;\n    };\n\n    const helper = html`\n      <div class=\"${helperTextClasses}\" id=\"helper-text\">\n        <slot name=\"helper-text\">${this.helperText}</slot>\n      </div>\n    `;\n\n    const normalizedProps = {\n      invalid: this.invalid,\n      warn: this.warn,\n      'slot-name': this.invalid ? 'invalid-text' : 'warn-text',\n      'slot-text': this.invalid ? this.invalidText : this.warnText,\n    };\n\n    const validationMessage = html`\n      <div\n        class=\"${prefix}--form-requirement\"\n        ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n        <slot name=\"${normalizedProps['slot-name']}\">\n          ${normalizedProps['slot-text']} ${this.isFluid ? icon() : null}\n        </slot>\n      </div>\n    `;\n\n    return html`\n      <div class=\"${prefix}--text-area__label-wrapper\">\n        <label class=\"${labelClasses}\" for=\"input\">\n          <slot name=\"label-text\"> ${this.label} </slot>\n        </label>\n        ${counter}\n      </div>\n      <div class=\"${textareaWrapperClasses}\" ?data-invalid=\"${this.invalid}\">\n        ${!this.isFluid ? icon() : null}\n        <textarea\n          autocomplete=\"${this.autocomplete}\"\n          ?autofocus=\"${this.autofocus}\"\n          class=\"${textareaClasses}\"\n          cols=\"${ifDefined(this.cols)}\"\n          ?data-invalid=\"${this.invalid}\"\n          ?disabled=\"${this.disabled}\"\n          id=\"input\"\n          name=\"${ifNonEmpty(this.name)}\"\n          pattern=\"${ifNonEmpty(this.pattern)}\"\n          placeholder=\"${ifNonEmpty(this.placeholder)}\"\n          ?readonly=\"${this.readonly}\"\n          ?required=\"${this.required}\"\n          rows=\"${ifDefined(this.rows)}\"\n          .value=\"${this.value}\"\n          maxlength=\"${this.counterMode === 'character'\n            ? ifNonEmpty(this.maxCount)\n            : ''}\"\n          @keydown=\"${this._onKeyDown}\"\n          @paste=\"${this._onPaste}\"\n          @input=\"${this._handleInput}\"></textarea>\n        <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.isFluid\n          ? html`\n              <hr class=\"${prefix}--text-area__divider\" />\n              ${validationMessage}\n            `\n          : null}\n      </div>\n      ${/* Non-fluid: validation and helper outside field wrapper */ ''}\n      ${!this.isFluid ? html` ${helper} ${validationMessage} ` : null}\n    `;\n  }\n  updated(): void {\n    super.updated?.();\n    if (this.counterMode !== this._prevCounterMode) {\n      const textarea = this._textarea;\n      if (textarea) {\n        if (this.counterMode === 'character') {\n          textarea.setAttribute('maxlength', String(this.maxCount));\n        } else {\n          textarea.removeAttribute('maxlength');\n        }\n      }\n      this._prevCounterMode = this.counterMode;\n    }\n\n    const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${prefix}--text-area__wrapper`\n    );\n    if (!wrapper) return;\n\n    this._resizeObserver = new ResizeObserver(() => {\n      this._measureWrapper();\n    });\n    this._resizeObserver.observe(wrapper);\n  }\n\n  /**\n   * Measures the width of the wrapper and applies that to the max-width of the\n   * helper-text and invalid/warn-text\n   */\n  private _measureWrapper() {\n    const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${prefix}--text-area__wrapper`\n    );\n\n    const wrapperWidth = wrapper?.scrollWidth;\n\n    const helper = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${prefix}--form__helper-text`\n    );\n    const requirement = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${prefix}--form-requirement`\n    );\n    [helper, requirement].forEach((el) => {\n      if (el) {\n        el.style.maxWidth = `${wrapperWidth}px`;\n        el.style.overflowWrap = 'break-word';\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback?.();\n    this._resizeObserver?.disconnect();\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSTextarea;\n"],"mappings":"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"}
+{"version":3,"file":"textarea.js","names":["CDSTextInput","ifNonEmpty","styles","customElement"],"sources":["../../../src/components/textarea/textarea.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, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { prefix } from '../../globals/settings';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport CDSTextInput from '../text-input/text-input';\nimport styles from './textarea.scss?lit';\nimport { carbonElement as customElement } from '../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../globals/internal/icon-loader';\n\n/**\n * Text area.\n *\n * @element cds-textarea\n * @slot helper-text - The helper text.\n * @slot label-text - The label text.\n * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.\n */\n@customElement(`${prefix}-textarea`)\nclass CDSTextarea extends CDSTextInput {\n  /**\n   * Manually handles maxCount for counterMode = 'word'\n   * @param event The keyboard event.\n   */\n  protected _onKeyDown(evt: KeyboardEvent) {\n    if (!this.disabled && this.enableCounter && this.counterMode === 'word') {\n      const currentWordCount = this.value?.match(/\\p{L}+/gu)?.length || 0;\n      if (\n        (this.maxCount &&\n          currentWordCount >= this.maxCount &&\n          evt.key === ' ') ||\n        (this.maxCount &&\n          currentWordCount >= this.maxCount &&\n          evt.key === 'Enter')\n      ) {\n        evt.preventDefault();\n      }\n    }\n  }\n\n  /**\n   * Handles `onPaste` event on the `<input>`.\n   * Manually handles maxCount for counterMode = 'word' when\n   * the user is pasting text\n   *\n   * @param event The clipboard event.\n   */\n  protected _onPaste(evt: ClipboardEvent) {\n    if (\n      this.counterMode === 'word' &&\n      this.enableCounter &&\n      typeof this.maxCount !== 'undefined'\n    ) {\n      const existingWords: string[] =\n        this._textarea.value.match(/\\p{L}+/gu) || [];\n      const pastedWords: string[] =\n        evt.clipboardData?.getData('Text').match(/\\p{L}+/gu) || [];\n\n      const totalWords = existingWords.length + pastedWords.length;\n\n      if (totalWords > this.maxCount) {\n        evt.preventDefault();\n\n        const allowedWords = existingWords\n          .concat(pastedWords)\n          .slice(0, this.maxCount);\n\n        this._textarea.value = allowedWords.join(' ');\n        this._textarea.dispatchEvent(\n          new InputEvent('input', {\n            inputType: 'insertFromPaste',\n            data: allowedWords.join(' '),\n            bubbles: true,\n          })\n        );\n      }\n    }\n  }\n  /**\n   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   * @param event.target The event target.\n   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLTextAreaElement).value;\n  }\n\n  /**\n   * The number of columns for the textarea to show by default\n   */\n  @property({ type: Number })\n  cols;\n\n  /**\n   * Specify whether the textarea is fluid or not\n   */\n  @property({ type: Boolean })\n  isFluid = false;\n\n  /**\n   * Specify the method used for calculating the counter number\n   */\n  @property({\n    type: String,\n    reflect: true,\n    hasChanged(newVal: string, oldVal: string) {\n      if ((newVal === 'character' || newVal === 'word') && newVal !== oldVal) {\n        return true;\n      }\n      return false;\n    },\n    attribute: 'counter-mode',\n  })\n  counterMode: 'character' | 'word' = 'character';\n\n  /**\n   * ID to link the `label` and `textarea`\n   */\n  @property()\n  id = '';\n\n  /**\n   * Pattern to validate the textarea against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Boolean property to set the required status\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * The number of rows for the textarea to show by default\n   */\n  @property()\n  rows = 4;\n\n  /**\n   * Get a reference to the underlying textarea so we can directly apply values.\n   * This lets us fixe a bug where after a user would clear text, the value wouldn't update programmatically\n   */\n  @query('textarea')\n  protected _textarea!: HTMLTextAreaElement;\n\n  /**\n   * The previous counterMode selected. This lets the counterMode state update\n   * when the user toggles between both modes.\n   */\n  private _prevCounterMode: 'character' | 'word' = this.counterMode;\n\n  /**\n   * Observes the textarea wrapper’s size to re-measure helper/invalid/warn text width when\n   * cols is updated\n   */\n  private _resizeObserver?: ResizeObserver;\n\n  render() {\n    const { enableCounter, maxCount } = this;\n\n    const textCount = this.value?.length ?? 0;\n    const wordCount = this.value?.match(/\\p{L}+/gu)?.length || 0;\n\n    const invalidIcon = iconLoader(WarningFilled16, {\n      class: `${prefix}--text-area__invalid-icon`,\n    });\n\n    const warnIcon = iconLoader(WarningAltFilled16, {\n      class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`,\n    });\n\n    const textareaClasses = classMap({\n      [`${prefix}--text-area`]: true,\n      [`${prefix}--text-area--warn`]: this.warn,\n      [`${prefix}--text-area--invalid`]: this.invalid,\n      [`${prefix}--text-area__wrapper--decorator`]: this._hasAILabel,\n    });\n\n    const textareaWrapperClasses = classMap({\n      [`${prefix}--text-area__wrapper`]: true,\n      [`${prefix}--text-area__wrapper--cols`]: this.cols,\n      [`${prefix}--text-area__wrapper--warn`]: this.warn,\n      [`${prefix}--text-area__wrapper--readonly`]: this.readonly,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--visually-hidden`]: this.hideLabel,\n      [`${prefix}--label--disabled`]: this.disabled,\n    });\n\n    const counterClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: this.disabled,\n      [`${prefix}--text-area__label-counter`]: true,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: this.disabled,\n    });\n\n    const counter =\n      enableCounter && maxCount\n        ? html` <label class=\"${counterClasses}\">\n            <slot name=\"label-text\"\n              >${this.counterMode === 'word'\n                ? wordCount\n                : textCount}/${maxCount}</slot\n            >\n          </label>`\n        : null;\n\n    const icon = () => {\n      if (this.invalid) {\n        return invalidIcon;\n      } else if (this.warn && !this.invalid) {\n        return warnIcon;\n      }\n      return null;\n    };\n\n    const helper = html`\n      <div class=\"${helperTextClasses}\" id=\"helper-text\">\n        <slot name=\"helper-text\">${this.helperText}</slot>\n      </div>\n    `;\n\n    const normalizedProps = {\n      invalid: this.invalid,\n      warn: this.warn,\n      'slot-name': this.invalid ? 'invalid-text' : 'warn-text',\n      'slot-text': this.invalid ? this.invalidText : this.warnText,\n    };\n\n    const validationMessage = html`\n      <div\n        class=\"${prefix}--form-requirement\"\n        ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n        <slot name=\"${normalizedProps['slot-name']}\">\n          ${normalizedProps['slot-text']} ${this.isFluid ? icon() : null}\n        </slot>\n      </div>\n    `;\n\n    return html`\n      <div class=\"${prefix}--text-area__label-wrapper\">\n        <label class=\"${labelClasses}\" for=\"input\">\n          <slot name=\"label-text\"> ${this.label} </slot>\n        </label>\n        ${counter}\n      </div>\n      <div class=\"${textareaWrapperClasses}\" ?data-invalid=\"${this.invalid}\">\n        ${!this.isFluid ? icon() : null}\n        <textarea\n          autocomplete=\"${this.autocomplete}\"\n          ?autofocus=\"${this.autofocus}\"\n          class=\"${textareaClasses}\"\n          cols=\"${ifDefined(this.cols)}\"\n          ?data-invalid=\"${this.invalid}\"\n          ?disabled=\"${this.disabled}\"\n          id=\"input\"\n          name=\"${ifNonEmpty(this.name)}\"\n          pattern=\"${ifNonEmpty(this.pattern)}\"\n          placeholder=\"${ifNonEmpty(this.placeholder)}\"\n          ?readonly=\"${this.readonly}\"\n          ?required=\"${this.required}\"\n          rows=\"${ifDefined(this.rows)}\"\n          .value=\"${this.value}\"\n          maxlength=\"${this.counterMode === 'character'\n            ? ifNonEmpty(this.maxCount)\n            : ''}\"\n          @keydown=\"${this._onKeyDown}\"\n          @paste=\"${this._onPaste}\"\n          @input=\"${this._handleInput}\"></textarea>\n        <slot name=\"ai-label\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        <slot name=\"slug\" @slotchange=\"${this._handleSlotChange}\"></slot>\n        ${this.isFluid\n          ? html`\n              <hr class=\"${prefix}--text-area__divider\" />\n              ${validationMessage}\n            `\n          : null}\n      </div>\n      ${/* Non-fluid: validation and helper outside field wrapper */ ''}\n      ${!this.isFluid ? html` ${helper} ${validationMessage} ` : null}\n    `;\n  }\n  updated(): void {\n    super.updated?.();\n    if (this.counterMode !== this._prevCounterMode) {\n      const textarea = this._textarea;\n      if (textarea) {\n        if (this.counterMode === 'character') {\n          textarea.setAttribute('maxlength', String(this.maxCount));\n        } else {\n          textarea.removeAttribute('maxlength');\n        }\n      }\n      this._prevCounterMode = this.counterMode;\n    }\n\n    const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${prefix}--text-area__wrapper`\n    );\n    if (!wrapper) return;\n\n    this._resizeObserver = new ResizeObserver(() => {\n      this._measureWrapper();\n    });\n    this._resizeObserver.observe(wrapper);\n  }\n\n  /**\n   * Measures the width of the wrapper and applies that to the max-width of the\n   * helper-text and invalid/warn-text\n   */\n  private _measureWrapper() {\n    const wrapper = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${prefix}--text-area__wrapper`\n    );\n\n    const wrapperWidth = wrapper?.scrollWidth;\n\n    const helper = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${prefix}--form__helper-text`\n    );\n    const requirement = this.shadowRoot?.querySelector<HTMLElement>(\n      `.${prefix}--form-requirement`\n    );\n    [helper, requirement].forEach((el) => {\n      if (el) {\n        el.style.maxWidth = `${wrapperWidth}px`;\n        el.style.overflowWrap = 'break-word';\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback?.();\n    this._resizeObserver?.disconnect();\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSTextarea;\n"],"mappings":"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"}

package/es/components/textarea/textarea.scss.js

@@ -6,10 +6,9 @@
  */
 
 import { css } from "lit";
-
 //#region src/components/textarea/textarea.scss?lit
 var textarea_default = css([".cds--layout--size-xs{--cds-layout-size-height-context:var(--cds-layout-size-height-xs,1.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xs{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xs,1.5rem))}.cds--layout-constraint--size__min-xs{--cds-layout-size-height-min:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout-constraint--size__max-xs{--cds-layout-size-height-max:var(--cds-layout-size-height-xs,1.5rem)}.cds--layout--size-sm{--cds-layout-size-height-context:var(--cds-layout-size-height-sm,2rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-sm{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-sm,2rem))}.cds--layout-constraint--size__min-sm{--cds-layout-size-height-min:var(--cds-layout-size-height-sm,2rem)}.cds--layout-constraint--size__max-sm{--cds-layout-size-height-max:var(--cds-layout-size-height-sm,2rem)}.cds--layout--size-md{--cds-layout-size-height-context:var(--cds-layout-size-height-md,2.5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-md{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-md,2.5rem))}.cds--layout-constraint--size__min-md{--cds-layout-size-height-min:var(--cds-layout-size-height-md,2.5rem)}.cds--layout-constraint--size__max-md{--cds-layout-size-height-max:var(--cds-layout-size-height-md,2.5rem)}.cds--layout--size-lg{--cds-layout-size-height-context:var(--cds-layout-size-height-lg,3rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-lg{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-lg,3rem))}.cds--layout-constraint--size__min-lg{--cds-layout-size-height-min:var(--cds-layout-size-height-lg,3rem)}.cds--layout-constraint--size__max-lg{--cds-layout-size-height-max:var(--cds-layout-size-height-lg,3rem)}.cds--layout--size-xl{--cds-layout-size-height-context:var(--cds-layout-size-height-xl,4rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-xl,4rem))}.cds--layout-constraint--size__min-xl{--cds-layout-size-height-min:var(--cds-layout-size-height-xl,4rem)}.cds--layout-constraint--size__max-xl{--cds-layout-size-height-max:var(--cds-layout-size-height-xl,4rem)}.cds--layout--size-2xl{--cds-layout-size-height-context:var(--cds-layout-size-height-2xl,5rem);--cds-layout-size-height:var(--cds-layout-size-height-context)}.cds--layout-constraint--size__default-2xl{--cds-layout-size-height:var(--cds-layout-size-height-context,var(--cds-layout-size-height-2xl,5rem))}.cds--layout-constraint--size__min-2xl{--cds-layout-size-height-min:var(--cds-layout-size-height-2xl,5rem)}.cds--layout-constraint--size__max-2xl{--cds-layout-size-height-max:var(--cds-layout-size-height-2xl,5rem)}.cds--layout--density-condensed{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-condensed,0.5rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-condensed{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-condensed,0.5rem))}.cds--layout-constraint--density__min-condensed{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout-constraint--density__max-condensed{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-condensed,0.5rem)}.cds--layout--density-normal{--cds-layout-density-padding-inline-context:var(--cds-layout-density-padding-inline-normal,1rem);--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context)}.cds--layout-constraint--density__default-normal{--cds-layout-density-padding-inline:var(--cds-layout-density-padding-inline-context,var(--cds-layout-density-padding-inline-normal,1rem))}.cds--layout-constraint--density__min-normal{--cds-layout-density-padding-inline-min:var(--cds-layout-density-padding-inline-normal,1rem)}.cds--layout-constraint--density__max-normal{--cds-layout-density-padding-inline-max:var(--cds-layout-density-padding-inline-normal,1rem)}:root{--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px}.cds--layer-one,:root{--cds-layer:var(--cds-layer-01,#f4f4f4);--cds-layer-active:var(--cds-layer-active-01,#c6c6c6);--cds-layer-background:var(--cds-layer-background-01,#fff);--cds-layer-hover:var(--cds-layer-hover-01,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-01,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-01,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-01,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-01,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-01,#a8a8a8);--cds-field:var(--cds-field-01,#f4f4f4);--cds-field-hover:var(--cds-field-hover-01,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-00,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-01,#c6c6c6);--cds-border-strong:var(--cds-border-strong-01,#8d8d8d);--cds-border-tile:var(--cds-border-tile-01,#c6c6c6)}.cds--layer-two{--cds-layer:var(--cds-layer-02,#fff);--cds-layer-active:var(--cds-layer-active-02,#c6c6c6);--cds-layer-background:var(--cds-layer-background-02,#f4f4f4);--cds-layer-hover:var(--cds-layer-hover-02,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-02,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-02,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-02,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-02,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-02,#a8a8a8);--cds-field:var(--cds-field-02,#fff);--cds-field-hover:var(--cds-field-hover-02,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-01,#c6c6c6);--cds-border-subtle-selected:var(--cds-border-subtle-selected-02,#c6c6c6);--cds-border-strong:var(--cds-border-strong-02,#8d8d8d);--cds-border-tile:var(--cds-border-tile-02,#a8a8a8)}.cds--layer-three{--cds-layer:var(--cds-layer-03,#f4f4f4);--cds-layer-active:var(--cds-layer-active-03,#c6c6c6);--cds-layer-background:var(--cds-layer-background-03,#fff);--cds-layer-hover:var(--cds-layer-hover-03,#e8e8e8);--cds-layer-selected:var(--cds-layer-selected-03,#e0e0e0);--cds-layer-selected-hover:var(--cds-layer-selected-hover-03,#d1d1d1);--cds-layer-accent:var(--cds-layer-accent-03,#e0e0e0);--cds-layer-accent-hover:var(--cds-layer-accent-hover-03,#d1d1d1);--cds-layer-accent-active:var(--cds-layer-accent-active-03,#a8a8a8);--cds-field:var(--cds-field-03,#f4f4f4);--cds-field-hover:var(--cds-field-hover-03,#e8e8e8);--cds-border-subtle:var(--cds-border-subtle-02,#e0e0e0);--cds-border-subtle-selected:var(--cds-border-subtle-selected-03,#c6c6c6);--cds-border-strong:var(--cds-border-strong-03,#8d8d8d);--cds-border-tile:var(--cds-border-tile-03,#c6c6c6)}.cds--layer-one.cds--layer__with-background,.cds--layer-three.cds--layer__with-background,.cds--layer-two.cds--layer__with-background{background-color:var(--cds-layer-background)}@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}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset{border:0;box-sizing:border-box;font-family:inherit;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--fieldset *,.cds--fieldset :after,.cds--fieldset :before{box-sizing:inherit}.cds--form-item{align-items:flex-start;display:flex;flex:1 1 auto;flex-direction:column;font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);line-height:var(--cds-body-compact-01-line-height,1.28572)}.cds--label html{font-size:100%}.cds--label body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--label strong{font-weight:600}.cds--label{color:var(--cds-text-secondary,#525252);display:inline-block;font-weight:var(--cds-label-01-font-weight,400);font-weight:400;line-height:var(--cds-label-01-line-height,1.33333);line-height:1rem;margin-block-end:.5rem;vertical-align:baseline}.cds--label,.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label .cds--toggletip-label{font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333)}.cds--label--no-margin{margin-block-end:0}.cds--label+.cds--tooltip{inset-block-start:.2rem;inset-inline-start:.5rem;position:relative}.cds--label+.cds--tooltip .cds--tooltip__trigger{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-size:100%;inline-size:100%;margin:0;padding:0;text-align:start;vertical-align:baseline}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger :after,.cds--label+.cds--tooltip .cds--tooltip__trigger :before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger{align-items:center;display:flex;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);justify-content:center;letter-spacing:var(--cds-label-01-letter-spacing,.32px);line-height:var(--cds-label-01-line-height,1.33333)}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{inset-block-start:.2rem;inset-inline-start:.5rem}.cds--label.cds--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--label.cds--skeleton: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--label.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--label.cds--skeleton{background:CanvasText}.cds--label.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--label.cds--skeleton{block-size:.875rem;inline-size:4.6875rem}input[type=number],input[type=text].cds--number{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused,.cds--combo-box--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--number[data-invalid] input[type=text]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker--warning~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;font-weight:400;max-block-size:12.5rem;overflow:visible}.cds--select--inline.cds--select--warning .cds--select-input--inline__wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement{display:inline-flex;inline-size:100%;margin:0;margin-block-end:0;max-block-size:100%;overflow:visible;padding-inline-start:.5rem}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input--inline__wrapper[data-invalid]~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:none}.cds--form--fluid .cds--form-requirement{margin:0;padding:.5rem 2.5rem .5rem 1rem}input:not(output,[data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,sans-serif;font-weight:400;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:IBM Plex Mono,system-ui,-apple-system,BlinkMacSystemFont,\\.SFNSText-Regular,monospace}.cds--form-requirement strong{font-weight:600}.cds--form-requirement{display:none;font-size:var(--cds-helper-text-01-font-size,.75rem);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin:.25rem 0 0;max-block-size:0;overflow:hidden}.cds--select--inline .cds--form__helper-text{margin-block-start:0}.cds--form__helper-text{color:var(--cds-text-helper,#6f6f6f);font-size:var(--cds-helper-text-01-font-size,.75rem);inline-size:100%;letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);line-height:var(--cds-helper-text-01-line-height,1.33333);margin-block-start:.25rem;opacity:1;z-index:0}.cds--form__helper-text--disabled,.cds--label--disabled,fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.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}.cds--text-area{border:0;box-sizing:border-box;font-size:100%;margin:0;padding:0;vertical-align:baseline}.cds--text-area *,.cds--text-area :after,.cds--text-area :before{box-sizing:inherit}.cds--text-area{background-color:var(--cds-field);block-size:100%;border:none;border-block-end:1px solid var(--cds-border-strong);color:var(--cds-text-primary,#161616);font-family:inherit;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);min-block-size:2.5rem;min-inline-size:10rem;outline:2px solid transparent;outline-offset:-2px;padding:.6875rem var(--cds-layout-density-padding-inline-local);resize:vertical;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-area:active,.cds--text-area:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--text-area:active,.cds--text-area:focus{outline-style:dotted}}.cds--text-area::-moz-placeholder{color:var(--cds-text-placeholder,hsla(0,0%,9%,.4));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);opacity:1}.cds--text-area::placeholder{color:var(--cds-text-placeholder,hsla(0,0%,9%,.4));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);opacity:1}.cds--text-area--light{background-color:var(--cds-field-02,#fff)}.cds--text-area__wrapper{--cds-layout-density-padding-inline-local:clamp(var(--cds-layout-density-padding-inline-min),var(--cds-layout-density-padding-inline,var(--cds-layout-density-padding-inline-normal)),var(--cds-layout-density-padding-inline-max));display:flex;inline-size:100%;max-inline-size:100%;position:relative}.cds--text-area__wrapper--cols{inline-size:auto}.cds--text-area__invalid-icon{position:absolute;fill:var(--cds-support-error,#da1e28);inset-block-start:.75rem;inset-inline-end:var(--cds-layout-density-padding-inline-local)}.cds--text-area__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--text-area__invalid-icon--warning path[fill]{fill:#000;opacity:1}.cds--text-area__counter-alert{block-size:1px;border:0;margin:-1px;overflow:hidden;padding:0;position:absolute;clip:rect(0,0,0,0);inline-size:1px}.cds--form-item:has(.cds--text-area__wrapper--cols){inline-size:-moz-fit-content;inline-size:fit-content}.cds--text-area:disabled{background-color:var(--cds-field);border-block-end:1px solid transparent;color:var(--cds-text-disabled,hsla(0,0%,9%,.25));cursor:not-allowed;outline:none;resize:none}.cds--text-area:disabled::-moz-placeholder{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--text-area:disabled::placeholder{color:var(--cds-text-disabled,hsla(0,0%,9%,.25))}.cds--text-area__wrapper--readonly .cds--text-area{background:transparent;border-block-end-color:var(--cds-border-subtle)}.cds--text-area__wrapper--decorator .cds--text-area__inner-wrapper--decorator>*,.cds--text-area__wrapper--slug .cds--ai-label,.cds--text-area__wrapper--slug .cds--slug{inset-block-start:.75rem;inset-inline-end:1rem;position:absolute}.cds--text-area__wrapper--decorator .cds--ai-label.cds--ai-label--revert,.cds--text-area__wrapper--slug .cds--ai-label.cds--ai-label--revert,.cds--text-area__wrapper--slug .cds--slug.cds--slug--revert{inset-block-start:.25rem;inset-inline-end:.5rem;transform:translate(0)}.cds--text-area__wrapper--decorator .cds--text-area:has(~.cds--text-area__inner-wrapper--decorator .cds--ai-label):not(:has(~.cds--text-area__inner-wrapper--decorator .cds--ai-label--revert)),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--ai-label):not(:has(~.cds--ai-label--revert)),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--slug):not(:has(~.cds--slug--revert)){background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds--text-area__wrapper--decorator .cds--text-area:has(~.cds--text-area__inner-wrapper--decorator>*),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--ai-label),.cds--text-area__wrapper--slug .cds--text-area:has(~.cds--slug){padding-inline-end:2.5rem}.cds--text-area--invalid:has(~.cds--ai-label),.cds--text-area--invalid:has(~.cds--slug),.cds--text-area--invalid:has(~.cds--text-area__inner-wrapper--decorator>*),.cds--text-area--warn:has(~.cds--ai-label),.cds--text-area--warn:has(~.cds--slug),.cds--text-area--warn:has(~.cds--text-area__inner-wrapper--decorator>*){padding-inline-end:4rem}.cds--text-area--invalid~.cds--ai-label,.cds--text-area--invalid~.cds--slug,.cds--text-area--invalid~.cds--text-area__inner-wrapper--decorator>*,.cds--text-area--warn~.cds--ai-label,.cds--text-area--warn~.cds--slug,.cds--text-area--warn~.cds--text-area__inner-wrapper--decorator>*{inset-inline-end:2.5rem}.cds--text-area--invalid~.cds--ai-label.cds--ai-label--revert,.cds--text-area--invalid~.cds--slug.cds--slug--revert,.cds--text-area--invalid~.cds--text-area__inner-wrapper--decorator>.cds--ai-label.cds--ai-label--revert,.cds--text-area--warn~.cds--ai-label.cds--ai-label--revert,.cds--text-area--warn~.cds--slug.cds--slug--revert,.cds--text-area--warn~.cds--text-area__inner-wrapper--decorator>.cds--ai-label.cds--ai-label--revert{inset-inline-end:2rem}.cds--text-area.cds--skeleton{background:var(--cds-skeleton-background,#e8e8e8);border:none;box-shadow:none;padding:0;pointer-events:none;position:relative}.cds--text-area.cds--skeleton:active,.cds--text-area.cds--skeleton:focus,.cds--text-area.cds--skeleton:hover{border:none;cursor:default;outline:none}.cds--text-area.cds--skeleton: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--text-area.cds--skeleton:before{animation:none}}@media (forced-colors:active),screen and (-ms-high-contrast:active){.cds--text-area.cds--skeleton{background:CanvasText}.cds--text-area.cds--skeleton:before{background:Canvas;forced-color-adjust:none}}.cds--text-area.cds--skeleton{block-size:6.25rem;inline-size:100%}.cds--text-area.cds--skeleton::-moz-placeholder{color:transparent}.cds--text-area.cds--skeleton::placeholder{color:transparent}.cds--text-area__label-wrapper{display:flex;inline-size:100%;justify-content:space-between;position:relative}:host(cds-textarea){--cds-layout-size-height-xs:1.5rem;--cds-layout-size-height-sm:2rem;--cds-layout-size-height-md:2.5rem;--cds-layout-size-height-lg:3rem;--cds-layout-size-height-xl:4rem;--cds-layout-size-height-2xl:5rem;--cds-layout-size-height-min:0px;--cds-layout-size-height-max:999999999px;--cds-layout-density-padding-inline-condensed:0.5rem;--cds-layout-density-padding-inline-normal:1rem;--cds-layout-density-padding-inline-min:0px;--cds-layout-density-padding-inline-max:999999999px;outline:none}:host(cds-textarea) ::slotted(cds-ai-label),:host(cds-textarea) ::slotted(cds-slug){inset-block-start:.75rem;inset-inline-end:1rem;position:absolute}:host(cds-textarea) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea) ::slotted(cds-slug[revert-active]){inset-block-start:.25rem;inset-inline-end:.5rem;transform:translate(0)}:host(cds-textarea) textarea:not([cols]),:host(cds-textarea) textarea[cols=\"0\"],:host(cds-textarea:not([cols])),:host(cds-textarea[cols=\"0\"]){inline-size:100%}:host(cds-textarea[invalid]) .cds--text-area__wrapper--decorator .cds--text-area,:host(cds-textarea[warn]) .cds--text-area__wrapper--decorator .cds--text-area{padding-inline-end:4rem}:host(cds-textarea[invalid]) ::slotted(cds-ai-label),:host(cds-textarea[invalid]) ::slotted(cds-slug),:host(cds-textarea[warn]) ::slotted(cds-ai-label),:host(cds-textarea[warn]) ::slotted(cds-slug){inset-inline-end:2.5rem}:host(cds-textarea[invalid]) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea[invalid]) ::slotted(cds-slug[revert-active]),:host(cds-textarea[warn]) ::slotted(cds-ai-label[revert-active]),:host(cds-textarea[warn]) ::slotted(cds-slug[revert-active]){inset-inline-end:2rem}:host(cds-textarea[ai-label]) .cds--text-area__wrapper--decorator{background-image:linear-gradient(0deg,var(--cds-ai-aura-start-sm,rgba(69,137,255,.16)) 0,15%,var(--cds-ai-aura-end,hsla(0,0%,100%,0)) 50%,transparent 100%);border-block-end-color:var(--cds-ai-border-strong,#4589ff)}.cds--text-area__wrapper--cols{display:inline-flex}"]);
-
 //#endregion
 export { textarea_default as default };
+
 //# sourceMappingURL=textarea.scss.js.map