@carbon/web-components 2.0.0-beta.0 → 2.0.0-beta.2

package/es/components/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/textarea/textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAG/C,OAAO,EAAE,qBAAqB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEjC;;;;;;;GAOG;AACH,cACM,UAAW,SAAQ,eAAoC;IAC3D;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAIpB,eAAe,CAAC,KAAK,EAAE,KAAK;IAQ5B;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,wBAAiC;IAE5C;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,UAAU,SAAM;IAEhB;;OAEG;IAEH,EAAE,SAAM;IAER;;OAEG;IAEH,OAAO,UAAS;IAEhB;;OAEG;IAEH,SAAS,SAAM;IAEf;;OAEG;IAEH,IAAI,SAAM;IAEV;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,WAAW,SAAM;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,uBAAuB,SAAiC;IAExD;;OAEG;IAEH,IAAI,SAAK;IAET;;OAEG;IAEH,eAAe,SAAM;IAErB;;OAEG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,SAAS,CAAC,SAAS,EAAG,mBAAmB,CAAC;IAE1C,MAAM;IAwDN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,UAAU,CAAC","file":"textarea.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport { prefix } from '../../globals/settings';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { TEXTAREA_COLOR_SCHEME } from './defs';\nimport styles from './textarea.scss';\n\nexport { TEXTAREA_COLOR_SCHEME };\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 BXTextarea extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   */\n  private _handleInput({ target }: Event) {\n    this.value = (target as HTMLTextAreaElement).value;\n  }\n\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * May be any of the standard HTML autocomplete options\n   */\n  @property()\n  autocomplete = '';\n\n  /**\n   * Sets the textarea to be focussed automatically on page load. Defaults to false\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TEXTAREA_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The number of columns for the textarea to show by default\n   */\n  @property()\n  cols = 50;\n\n  /**\n   * Controls the disabled state of the textarea\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * ID to link the `label` and `textarea`\n   */\n  @property()\n  id = '';\n\n  /**\n   * Controls the invalid state and visibility of the `validityMessage`\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * Name for the textarea in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the textarea against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the textarea has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Controls the readonly state of the textarea\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   * The number of rows for the textarea to show by default\n   */\n  @property()\n  rows = 4;\n\n  /**\n   * The validity message.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the text area.\n   */\n  @property()\n  value = '';\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  render() {\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-area__invalid-icon`,\n    });\n\n    const textareaClasses = classMap({\n      [`${prefix}--text-area`]: true,\n      [`${prefix}--text-area--v2`]: true,\n      [`${prefix}--text-area--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--text-area--invalid`]: this.invalid,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: this.disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: this.disabled,\n    });\n\n    return html`\n      <label class=\"${labelClasses}\" for=\"input\">\n        <slot name=\"label-text\"> ${this.labelText} </slot>\n      </label>\n      <div\n        class=\"${prefix}--text-area__wrapper\"\n        ?data-invalid=\"${this.invalid}\">\n        ${this.invalid ? invalidIcon : 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          @input=\"${this._handleInput}\"></textarea>\n      </div>\n      <div class=\"${helperTextClasses}\">\n        <slot name=\"helper-text\"> ${this.helperText} </slot>\n      </div>\n      <div class=\"${prefix}--form-requirement\">\n        <slot name=\"validity-message\"> ${this.validityMessage} </slot>\n      </div>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXTextarea;\n"]}
+{"version":3,"sources":["components/textarea/textarea.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,YAAY,MAAM,0BAA0B,CAAC;AAGpD;;;;;;;GAOG;AACH,cACM,WAAY,SAAQ,YAAY;IACpC;;;;OAIG;IACH,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAIxC;;OAEG;IAEH,IAAI,MAAC;IAEL;;OAEG;IAEH,EAAE,SAAM;IAER;;OAEG;IAEH,OAAO,SAAM;IAEb;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,IAAI,SAAK;IAET;;;OAGG;IAEH,SAAS,CAAC,SAAS,EAAG,mBAAmB,CAAC;IAE1C,MAAM;IA2FN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,WAAW,CAAC","file":"textarea.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';\nimport { prefix } from '../../globals/settings';\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';\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   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLTextAreaElement).value;\n  }\n\n  /**\n   * The number of columns for the stextarea to show by default\n   */\n  @property({ type: Number })\n  cols;\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  render() {\n    const { enableCounter, maxCount } = this;\n\n    const textCount = this.value?.length;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-area__invalid-icon`,\n    });\n\n    const warnIcon = 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    });\n\n    const textareaWrapperClasses = classMap({\n      [`${prefix}--text-area__wrapper`]: true,\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}--label--disabled`]: this.disabled,\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=\"${labelClasses}\">\n            <slot name=\"label-text\">${textCount}/${maxCount}</slot>\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    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        ${icon()}\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=\"${ifNonEmpty(this.maxCount)}\"\n          @input=\"${this._handleInput}\"></textarea>\n      </div>\n      <div class=\"${helperTextClasses}\" ?hidden=\"${this.invalid || this.warn}\">\n        <slot name=\"helper-text\"> ${this.helperText} </slot>\n      </div>\n      <div\n        class=\"${prefix}--form-requirement\"\n        ?hidden=\"${!this.invalid && !this.warn}\">\n        <slot name=\"${this.invalid ? 'invalid-text' : 'warn-text'}\">\n          ${this.invalid ? this.invalidText : this.warnText}\n        </slot>\n      </div>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTextarea;\n"]}

package/es/components/textarea/textarea.js

@@ -1,7 +1,8 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _decorate from "@babel/runtime/helpers/esm/decorate";
 let _ = t => t,
-  _t;
+  _t,
+  _t2;
 /**
  * @license
  *
@@ -15,14 +16,12 @@ import { LitElement, html } from 'lit';
 import { property, customElement, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import WarningFilled16 from "../../icons/warning--filled/16";
+import WarningAltFilled16 from "../../icons/warning--alt--filled/16";
 import { prefix } from '../../globals/settings';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import FormMixin from '../../globals/mixins/form';
-import ValidityMixin from '../../globals/mixins/validity';
-import { TEXTAREA_COLOR_SCHEME } from './defs';
+import CDSTextInput from '../text-input/text-input';
 import styles from "././textarea.css.js";
-export { TEXTAREA_COLOR_SCHEME };
 
 /**
  * Text area.
@@ -31,16 +30,23 @@ export { TEXTAREA_COLOR_SCHEME };
  * @slot helper-text - The helper text.
  * @slot label-text - The label text.
  * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
- */
-let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_initialize, _ValidityMixin) {
-  class BXTextarea extends _ValidityMixin {
+ */ /**
+     * Text area.
+     *
+     * @element cds-textarea
+     * @slot helper-text - The helper text.
+     * @slot label-text - The label text.
+     * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
+     */
+let CDSTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_initialize, _CDSTextInput) {
+  class CDSTextarea extends _CDSTextInput {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXTextarea,
+    F: CDSTextarea,
     d: [{
       kind: "method",
       key: "_handleInput",
@@ -55,78 +61,17 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
       }) {
         this.value = target.value;
       }
-    }, {
-      kind: "method",
-      key: "_handleFormdata",
-      value: function _handleFormdata(event) {
-        const {
-          formData
-        } = event; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
-        const {
-          disabled,
-          name,
-          value
-        } = this;
-        if (!disabled) {
-          formData.append(name, value);
-        }
-      }
 
       /**
-       * May be any of the standard HTML autocomplete options
+       * The number of columns for the stextarea to show by default
        */
-    }, {
-      kind: "field",
-      decorators: [property()],
-      key: "autocomplete",
-      value() {
-        return '';
-      }
     }, {
       kind: "field",
       decorators: [property({
-        type: Boolean
+        type: Number
       })],
-      key: "autofocus",
-      value() {
-        return false;
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: 'color-scheme',
-        reflect: true
-      })],
-      key: "colorScheme",
-      value() {
-        return TEXTAREA_COLOR_SCHEME.REGULAR;
-      }
-    }, {
-      kind: "field",
-      decorators: [property()],
       key: "cols",
-      value() {
-        return 50;
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Boolean,
-        reflect: true
-      })],
-      key: "disabled",
-      value() {
-        return false;
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: 'helper-text'
-      })],
-      key: "helperText",
-      value() {
-        return '';
-      }
+      value: void 0
     }, {
       kind: "field",
       decorators: [property()],
@@ -134,32 +79,6 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
       value() {
         return '';
       }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Boolean,
-        reflect: true
-      })],
-      key: "invalid",
-      value() {
-        return false;
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: 'label-text'
-      })],
-      key: "labelText",
-      value() {
-        return '';
-      }
-    }, {
-      kind: "field",
-      decorators: [property()],
-      key: "name",
-      value() {
-        return '';
-      }
     }, {
       kind: "field",
       decorators: [property()],
@@ -167,25 +86,6 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
       value() {
         return '';
       }
-    }, {
-      kind: "field",
-      decorators: [property({
-        reflect: true
-      })],
-      key: "placeholder",
-      value() {
-        return '';
-      }
-    }, {
-      kind: "field",
-      decorators: [property({
-        type: Boolean,
-        reflect: true
-      })],
-      key: "readonly",
-      value() {
-        return false;
-      }
     }, {
       kind: "field",
       decorators: [property({
@@ -196,15 +96,6 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
       value() {
         return false;
       }
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: 'required-validity-message'
-      })],
-      key: "requiredValidityMessage",
-      value() {
-        return 'Please fill out this field.';
-      }
     }, {
       kind: "field",
       decorators: [property()],
@@ -212,22 +103,6 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
       value() {
         return 4;
       }
-    }, {
-      kind: "field",
-      decorators: [property({
-        attribute: 'validity-message'
-      })],
-      key: "validityMessage",
-      value() {
-        return '';
-      }
-    }, {
-      kind: "field",
-      decorators: [property()],
-      key: "value",
-      value() {
-        return '';
-      }
     }, {
       kind: "field",
       decorators: [query('textarea')],
@@ -237,71 +112,45 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
       kind: "method",
       key: "render",
       value:
-      /**
-       * Sets the textarea to be focussed automatically on page load. Defaults to false
-       */
-      /**
-       * The color scheme.
-       */
-      /**
-       * The number of columns for the textarea to show by default
-       */
-      /**
-       * Controls the disabled state of the textarea
-       */
-      /**
-       * The helper text.
-       */
       /**
        * ID to link the `label` and `textarea`
        */
-      /**
-       * Controls the invalid state and visibility of the `validityMessage`
-       */
-      /**
-       * The label text.
-       */
-      /**
-       * Name for the textarea in the `FormData`
-       */
       /**
        * Pattern to validate the textarea against for HTML validity checking
        */
-      /**
-       * Value to display when the textarea has an empty `value`
-       */
-      /**
-       * Controls the readonly state of the textarea
-       */
       /**
        * Boolean property to set the required status
        */
-      /**
-       * The special validity message for `required`.
-       */
       /**
        * The number of rows for the textarea to show by default
        */
-      /**
-       * The validity message.
-       */
-      /**
-       * The value of the text area.
-       */
       /**
        * Get a reference to the underlying textarea so we can directly apply values.
        * This lets us fixe a bug where after a user would clear text, the value wouldn't update programmatically
        */
       function render() {
+        var _this$value;
+        const {
+          enableCounter,
+          maxCount
+        } = this;
+        const textCount = (_this$value = this.value) === null || _this$value === void 0 ? void 0 : _this$value.length;
         const invalidIcon = WarningFilled16({
           class: `${prefix}--text-area__invalid-icon`
         });
+        const warnIcon = WarningAltFilled16({
+          class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
+        });
         const textareaClasses = classMap({
           [`${prefix}--text-area`]: true,
-          [`${prefix}--text-area--v2`]: true,
-          [`${prefix}--text-area--${this.colorScheme}`]: this.colorScheme,
+          [`${prefix}--text-area--warn`]: this.warn,
           [`${prefix}--text-area--invalid`]: this.invalid
         });
+        const textareaWrapperClasses = classMap({
+          [`${prefix}--text-area__wrapper`]: true,
+          [`${prefix}--text-area__wrapper--warn`]: this.warn,
+          [`${prefix}--text-area__wrapper--readonly`]: this.readonly
+        });
         const labelClasses = classMap({
           [`${prefix}--label`]: true,
           [`${prefix}--label--disabled`]: this.disabled
@@ -310,13 +159,25 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
           [`${prefix}--form__helper-text`]: true,
           [`${prefix}--form__helper-text--disabled`]: this.disabled
         });
-        return html(_t || (_t = _`
-      <label class="${0}" for="input">
-        <slot name="label-text"> ${0} </slot>
-      </label>
-      <div
-        class="${0}--text-area__wrapper"
-        ?data-invalid="${0}">
+        const counter = enableCounter && maxCount ? html(_t || (_t = _` <label class="${0}">
+            <slot name="label-text">${0}/${0}</slot>
+          </label>`), labelClasses, textCount, maxCount) : null;
+        const icon = () => {
+          if (this.invalid) {
+            return invalidIcon;
+          } else if (this.warn && !this.invalid) {
+            return warnIcon;
+          }
+          return null;
+        };
+        return html(_t2 || (_t2 = _`
+      <div class="${0}--text-area__label-wrapper">
+        <label class="${0}" for="input">
+          <slot name="label-text"> ${0} </slot>
+        </label>
+        ${0}
+      </div>
+      <div class="${0}" ?data-invalid="${0}">
         ${0}
         <textarea
           ?autocomplete="${0}"
@@ -333,15 +194,20 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
           ?required="${0}"
           rows="${0}"
           .value="${0}"
+          maxlength="${0}"
           @input="${0}"></textarea>
       </div>
-      <div class="${0}">
+      <div class="${0}" ?hidden="${0}">
         <slot name="helper-text"> ${0} </slot>
       </div>
-      <div class="${0}--form-requirement">
-        <slot name="validity-message"> ${0} </slot>
+      <div
+        class="${0}--form-requirement"
+        ?hidden="${0}">
+        <slot name="${0}">
+          ${0}
+        </slot>
       </div>
-    `), labelClasses, this.labelText, prefix, this.invalid, this.invalid ? invalidIcon : null, this.autocomplete, this.autofocus, textareaClasses, ifDefined(this.cols), this.invalid, this.disabled, ifNonEmpty(this.name), ifNonEmpty(this.pattern), ifNonEmpty(this.placeholder), this.readonly, this.required, ifDefined(this.rows), this.value, this._handleInput, helperTextClasses, this.helperText, prefix, this.validityMessage);
+    `), prefix, labelClasses, this.label, counter, textareaWrapperClasses, this.invalid, icon(), this.autocomplete, this.autofocus, textareaClasses, ifDefined(this.cols), this.invalid, this.disabled, ifNonEmpty(this.name), ifNonEmpty(this.pattern), ifNonEmpty(this.placeholder), this.readonly, this.required, ifDefined(this.rows), this.value, ifNonEmpty(this.maxCount), this._handleInput, helperTextClasses, this.invalid || this.warn, this.helperText, prefix, !this.invalid && !this.warn, this.invalid ? 'invalid-text' : 'warn-text', this.invalid ? this.invalidText : this.warnText);
       }
     }, {
       kind: "field",
@@ -361,6 +227,6 @@ let BXTextarea = _decorate([customElement(`${prefix}-textarea`)], function (_ini
       }
     }]
   };
-}, ValidityMixin(FormMixin(LitElement)));
-export default BXTextarea;
+}, CDSTextInput);
+export default CDSTextarea;
 //# sourceMappingURL=textarea.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":["LitElement","html","property","customElement","query","classMap","WarningFilled16","prefix","ifNonEmpty","ifDefined","FormMixin","ValidityMixin","TEXTAREA_COLOR_SCHEME","styles","BXTextarea","_decorate","_initialize","_ValidityMixin","constructor","args","F","d","kind","key","value","_handleInput","target","_handleFormdata","event","formData","disabled","name","append","decorators","type","Boolean","attribute","reflect","REGULAR","render","invalidIcon","class","textareaClasses","colorScheme","invalid","labelClasses","helperTextClasses","_t","_","labelText","autocomplete","autofocus","cols","pattern","placeholder","readonly","required","rows","helperText","validityMessage","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/textarea/textarea.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport { prefix } from '../../globals/settings';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { TEXTAREA_COLOR_SCHEME } from './defs';\nimport styles from './textarea.scss';\n\nexport { TEXTAREA_COLOR_SCHEME };\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 BXTextarea extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   */\n  private _handleInput({ target }: Event) {\n    this.value = (target as HTMLTextAreaElement).value;\n  }\n\n  _handleFormdata(event: Event) {\n    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`\n    const { disabled, name, value } = this;\n    if (!disabled) {\n      formData.append(name, value);\n    }\n  }\n\n  /**\n   * May be any of the standard HTML autocomplete options\n   */\n  @property()\n  autocomplete = '';\n\n  /**\n   * Sets the textarea to be focussed automatically on page load. Defaults to false\n   */\n  @property({ type: Boolean })\n  autofocus = false;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TEXTAREA_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The number of columns for the textarea to show by default\n   */\n  @property()\n  cols = 50;\n\n  /**\n   * Controls the disabled state of the textarea\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The helper text.\n   */\n  @property({ attribute: 'helper-text' })\n  helperText = '';\n\n  /**\n   * ID to link the `label` and `textarea`\n   */\n  @property()\n  id = '';\n\n  /**\n   * Controls the invalid state and visibility of the `validityMessage`\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText = '';\n\n  /**\n   * Name for the textarea in the `FormData`\n   */\n  @property()\n  name = '';\n\n  /**\n   * Pattern to validate the textarea against for HTML validity checking\n   */\n  @property()\n  pattern = '';\n\n  /**\n   * Value to display when the textarea has an empty `value`\n   */\n  @property({ reflect: true })\n  placeholder = '';\n\n  /**\n   * Controls the readonly state of the textarea\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   * The number of rows for the textarea to show by default\n   */\n  @property()\n  rows = 4;\n\n  /**\n   * The validity message.\n   */\n  @property({ attribute: 'validity-message' })\n  validityMessage = '';\n\n  /**\n   * The value of the text area.\n   */\n  @property()\n  value = '';\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  render() {\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-area__invalid-icon`,\n    });\n\n    const textareaClasses = classMap({\n      [`${prefix}--text-area`]: true,\n      [`${prefix}--text-area--v2`]: true,\n      [`${prefix}--text-area--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--text-area--invalid`]: this.invalid,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: this.disabled,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: this.disabled,\n    });\n\n    return html`\n      <label class=\"${labelClasses}\" for=\"input\">\n        <slot name=\"label-text\"> ${this.labelText} </slot>\n      </label>\n      <div\n        class=\"${prefix}--text-area__wrapper\"\n        ?data-invalid=\"${this.invalid}\">\n        ${this.invalid ? invalidIcon : 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          @input=\"${this._handleInput}\"></textarea>\n      </div>\n      <div class=\"${helperTextClasses}\">\n        <slot name=\"helper-text\"> ${this.helperText} </slot>\n      </div>\n      <div class=\"${prefix}--form-requirement\">\n        <slot name=\"validity-message\"> ${this.validityMessage} </slot>\n      </div>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXTextarea;\n"],"mappings":"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"}
+{"version":3,"file":"textarea.js","names":["LitElement","html","property","customElement","query","classMap","WarningFilled16","WarningAltFilled16","prefix","ifNonEmpty","ifDefined","CDSTextInput","styles","CDSTextarea","_decorate","_initialize","_CDSTextInput","constructor","args","F","d","kind","key","value","_handleInput","target","decorators","type","Number","Boolean","reflect","render","_this$value","enableCounter","maxCount","textCount","length","invalidIcon","class","warnIcon","textareaClasses","warn","invalid","textareaWrapperClasses","readonly","labelClasses","disabled","helperTextClasses","counter","_t","_","icon","_t2","label","autocomplete","autofocus","cols","name","pattern","placeholder","required","rows","helperText","invalidText","warnText","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/textarea/textarea.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';\nimport { prefix } from '../../globals/settings';\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';\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   * Handles `oninput` event on the `<input>`.\n   *\n   * @param event The event.\n   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLTextAreaElement).value;\n  }\n\n  /**\n   * The number of columns for the stextarea to show by default\n   */\n  @property({ type: Number })\n  cols;\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  render() {\n    const { enableCounter, maxCount } = this;\n\n    const textCount = this.value?.length;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-area__invalid-icon`,\n    });\n\n    const warnIcon = 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    });\n\n    const textareaWrapperClasses = classMap({\n      [`${prefix}--text-area__wrapper`]: true,\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}--label--disabled`]: this.disabled,\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=\"${labelClasses}\">\n            <slot name=\"label-text\">${textCount}/${maxCount}</slot>\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    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        ${icon()}\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=\"${ifNonEmpty(this.maxCount)}\"\n          @input=\"${this._handleInput}\"></textarea>\n      </div>\n      <div class=\"${helperTextClasses}\" ?hidden=\"${this.invalid || this.warn}\">\n        <slot name=\"helper-text\"> ${this.helperText} </slot>\n      </div>\n      <div\n        class=\"${prefix}--form-requirement\"\n        ?hidden=\"${!this.invalid && !this.warn}\">\n        <slot name=\"${this.invalid ? 'invalid-text' : 'warn-text'}\">\n          ${this.invalid ? this.invalidText : this.warnText}\n        </slot>\n      </div>\n    `;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSTextarea;\n"],"mappings":"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"}

package/es/components/textarea/textarea.rtl.css.js

@@ -8,5 +8,5 @@
  */
 import { css } from 'lit';
 export default css([
-  "@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:right}20%{opacity:1;transform:scaleX(1);transform-origin:right}28%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(0);transform-origin:left}58%{transform:scaleX(0);transform-origin:left}82%{transform:scaleX(1);transform-origin:left}83%{transform:scaleX(1);transform-origin:right}96%{transform:scaleX(0);transform-origin:right}100%{opacity:.3;transform:scaleX(0);transform-origin:right}}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 html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-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 .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;right:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.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: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{top:.2rem;right:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=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--number[data-invalid] input[type=number]: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--number[data-invalid] input[type=number]: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[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.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__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:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 1rem .5rem 2.5rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-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--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);outline:2px solid transparent;outline-offset:-2px;min-width:10rem;height:100%;min-height:2.5rem;padding:.6875rem 1rem;border:none;border-bottom:1px solid var(--cds-border-strong);background-color:var(--cds-field);color:var(--cds-text-primary,#161616);font-family:inherit;resize:vertical;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-area html{font-size:100%}.cds--text-area body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--text-area code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--text-area strong{font-weight:600}.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,rgba(22,22,22,.4));opacity:1;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px)}.cds--text-area::placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px)}.cds--text-area--light{background-color:var(--cds-field-02,#fff)}.cds--text-area--invalid{padding-left:2.5rem}.cds--text-area__wrapper{position:relative;display:flex;width:100%}.cds--text-area__invalid-icon{position:absolute;top:.75rem;left:1rem;fill:var(--cds-support-error,#da1e28)}.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{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0)}.cds--text-area:disabled{border-bottom:1px solid transparent;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;outline:0;resize:none}.cds--text-area:disabled::-moz-placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area:disabled::placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area__wrapper--readonly .cds--text-area{background:0 0}.cds--text-area.cds--text-area--light:disabled{background-color:var(--cds-field-02,#fff)}.cds--text-area.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:100%;height:6.25rem}.cds--text-area.cds--skeleton:active,.cds--text-area.cds--skeleton:focus,.cds--text-area.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--text-area.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--text-area.cds--skeleton::before{animation:none}}.cds--text-area.cds--skeleton::-moz-placeholder{color:transparent}.cds--text-area.cds--skeleton::placeholder{color:transparent}.cds--text-area__label-wrapper{display:flex;width:100%;justify-content:space-between}:host(cds-textarea){outline:0}",
+  "@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:right}20%{opacity:1;transform:scaleX(1);transform-origin:right}28%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(0);transform-origin:left}58%{transform:scaleX(0);transform-origin:left}82%{transform:scaleX(1);transform-origin:left}83%{transform:scaleX(1);transform-origin:right}96%{transform:scaleX(0);transform-origin:right}100%{opacity:.3;transform:scaleX(0);transform-origin:right}}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 html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-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 .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;right:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.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: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{top:.2rem;right:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=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--number[data-invalid] input[type=number]: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--number[data-invalid] input[type=number]: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[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.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__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:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 1rem .5rem 2.5rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-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--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area{font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px);outline:2px solid transparent;outline-offset:-2px;min-width:10rem;height:100%;min-height:2.5rem;padding:.6875rem 1rem;border:none;border-bottom:1px solid var(--cds-border-strong);background-color:var(--cds-field);color:var(--cds-text-primary,#161616);font-family:inherit;resize:vertical;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-area html{font-size:100%}.cds--text-area body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--text-area code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--text-area strong{font-weight:600}.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,rgba(22,22,22,.4));opacity:1;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px)}.cds--text-area::placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1;font-size:var(--cds-body-01-font-size,.875rem);font-weight:var(--cds-body-01-font-weight,400);line-height:var(--cds-body-01-line-height,1.42857);letter-spacing:var(--cds-body-01-letter-spacing,.16px)}.cds--text-area--light{background-color:var(--cds-field-02,#fff)}.cds--text-area--invalid{padding-left:2.5rem}.cds--text-area__wrapper{position:relative;display:flex;width:100%}.cds--text-area__invalid-icon{position:absolute;top:.75rem;left:1rem;fill:var(--cds-support-error,#da1e28)}.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{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0)}.cds--text-area:disabled{border-bottom:1px solid transparent;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;outline:0;resize:none}.cds--text-area:disabled::-moz-placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area:disabled::placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-area__wrapper--readonly .cds--text-area{border-bottom-color:var(--cds-border-subtle);background:0 0}.cds--text-area.cds--text-area--light:disabled{background-color:var(--cds-field-02,#fff)}.cds--text-area.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:100%;height:6.25rem}.cds--text-area.cds--skeleton:active,.cds--text-area.cds--skeleton:focus,.cds--text-area.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--text-area.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--text-area.cds--skeleton::before{animation:none}}.cds--text-area.cds--skeleton::-moz-placeholder{color:transparent}.cds--text-area.cds--skeleton::placeholder{color:transparent}.cds--text-area__label-wrapper{display:flex;width:100%;justify-content:space-between}:host(cds-textarea){outline:0}:host(cds-textarea) textarea:not([cols]),:host(cds-textarea) textarea[cols=\"0\"],:host(cds-textarea:not([cols])),:host(cds-textarea[cols=\"0\"]){width:100%}",
 ]);

package/es/components/tile/expandable-tile.d.ts

@@ -319,7 +319,9 @@ declare const BXExpandableTile_base: {
     _hostListeners: {
         [listenerName: string]: {
             [type: string]: {
-                options?: boolean | AddEventListenerOptions | undefined;
+                options?: boolean | AddEventListenerOptions | undefined; /**
+                 * The color scheme.
+                 */
             };
         };
     };

package/es/components/tile/expandable-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"sources":["components/tile/expandable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAI3C;;;;;;;;GAQG;AACH,cACM,gBAAiB,SAAQ,qBAAyC;IACtE;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAAK;IAEnC;;;;OAIG;IACH,OAAO,CAAC,oCAAoC;IAU5C,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,YAAY,CAIlB;IAEF;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,eAAe,UAAS;IAExB,MAAM;IAqCN;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"expandable-tile.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof BXExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXExpandableTile;\n"]}
+{"version":3,"sources":["components/tile/expandable-tile.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAQvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yEAwEzC;;mBAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAtEL;;;;;;;;GAQG;AACH,cACM,gBAAiB,SAAQ,qBAAyC;IACtE;;OAEG;IACH,OAAO,CAAC,sBAAsB,CAAK;IAEnC;;;;OAIG;IACH,OAAO,CAAC,oCAAoC;IAiB5C,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,YAAY,CAIlB;IAEF;;OAEG;IAEH,WAAW,oBAA6B;IAExC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,eAAe,UAAS;IAExB,MAAM;IAqCN;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,gBAAgB,CAAC","file":"expandable-tile.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport ChevronDown16 from '@carbon/icons/lib/chevron--down/16';\nimport { prefix } from '../../globals/settings';\nimport HostListener from '../../globals/decorators/host-listener';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport { TILE_COLOR_SCHEME } from './defs';\nimport styles from './tile.scss';\nimport { classMap } from 'lit/directives/class-map';\n\n/**\n * Expandable tile.\n *\n * @element cds-expandable-tile\n * @fires cds-expandable-tile-beingtoggled\n *   The custom event fired before the expanded state is changed upon a user gesture.\n *   Cancellation of this event stops changing the user-initiated change in expanded state.\n * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.\n */\n@customElement(`${prefix}-expandable-tile`)\nclass BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {\n  /**\n   * The computed height of the below-the-fold content.\n   */\n  private _belowTheContentHeight = 0;\n\n  /**\n   * Handles `slotchange` event on the below-the-fold content.\n   *\n   * @param event The event.\n   */\n  private _handleSlotChangeBelowTheFoldContent(event: Event) {\n    this._belowTheContentHeight = (event.target as HTMLSlotElement)\n      .assignedNodes()\n      .reduce(\n        (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),\n        0\n      );\n\n    if (!this._belowTheContentHeight) {\n      const element = getComputedStyle(\n        this.querySelector('cds-tile-below-the-fold-content') as any\n      );\n      this._belowTheContentHeight = parseInt(element.height, 10);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleExpand() {\n    const expanded = !this.expanded;\n    this.focus();\n    const init = {\n      bubbles: true,\n      composed: true,\n      detail: {\n        expanded,\n      },\n    };\n    const constructor = this.constructor as typeof BXExpandableTile;\n    const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {\n      ...init,\n      cancelable: true,\n    });\n    if (this.dispatchEvent(beforeChangeEvent)) {\n      this.expanded = expanded;\n      const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);\n      this.dispatchEvent(afterChangeEvent);\n    }\n  }\n\n  @HostListener('click')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleClick = () => {\n    if (!this.withInteractive) {\n      this._handleExpand();\n    }\n  };\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = TILE_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true })\n  expanded = false;\n\n  /**\n   * `true` to expand this expandable tile.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })\n  withInteractive = false;\n\n  render() {\n    const {\n      expanded,\n      withInteractive,\n      _belowTheContentHeight: belowTheContentHeight,\n      _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,\n    } = this;\n\n    const classes = classMap({\n      [`${prefix}--tile__chevron`]: true,\n      [`${prefix}--tile__chevron--interactive`]: withInteractive,\n    });\n    return html`\n      <button\n        class=\"${classes}\"\n        aria-labelledby=\"above-the-fold-content\"\n        aria-controls=\"below-the-fold-content\"\n        tabindex=\"0\"\n        @click=\"${withInteractive ? this._handleExpand : ''}\"\n        aria-expanded=\"${String(Boolean(expanded))}\">\n        ${ChevronDown16({\n          id: 'icon',\n        })}\n      </button>\n      <div id=\"content\" class=\"${prefix}--tile-content\">\n        <div><slot name=\"above-the-fold-content\"></slot></div>\n        <div\n          class=\"${prefix}-ce--expandable-tile--below-the-fold-content\"\n          style=\"${ifDefined(\n            !expanded ? undefined : `max-height: ${belowTheContentHeight}px`\n          )}\">\n          <slot @slotchange=\"${handleSlotChangeBelowTheFoldContent}\"></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired before the expanded state is changed upon a user gesture.\n   * Cancellation of this event stops changing the user-initiated change in expanded state.\n   */\n  static get eventBeforeToggle() {\n    return `${prefix}-expandable-tile-beingtoggled`;\n  }\n\n  /**\n   * The name of the custom event fired after a the expanded state is changed upon a user gesture.\n   */\n  static get eventToggle() {\n    return `${prefix}-expandable-tile-toggled`;\n  }\n\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXExpandableTile;\n"]}

package/es/components/tile/expandable-tile.js

@@ -65,6 +65,10 @@ let BXExpandableTile = _decorate([customElement(`${prefix}-expandable-tile`)], f
           var _offsetHeight;
           return acc + ((_offsetHeight = item.offsetHeight) !== null && _offsetHeight !== void 0 ? _offsetHeight : 0);
         }, 0);
+        if (!this._belowTheContentHeight) {
+          const element = getComputedStyle(this.querySelector('cds-tile-below-the-fold-content'));
+          this._belowTheContentHeight = parseInt(element.height, 10);
+        }
         this.requestUpdate();
       }
     }, {