@carbon/web-components 2.0.0-alpha.0 → 2.0.0-beta.1

package/es/components/input/input.d.ts

@@ -10,7 +10,7 @@ import { LitElement } from 'lit';
 import { FLOATING_MENU_ALIGNMENT, FLOATING_MENU_DIRECTION } from '../floating-menu/floating-menu';
 import { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from './defs';
 export { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };
-declare const BXInput_base: (abstract new (...args: any[]) => {
+declare const CDSInput_base: (abstract new (...args: any[]) => {
     _getValidityMessage(state: string): string | undefined;
     _testValidity(): string;
     invalid: boolean;
@@ -638,7 +638,7 @@ declare const BXInput_base: (abstract new (...args: any[]) => {
  * @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.
  */
-declare class BXInput extends BXInput_base {
+declare class CDSInput extends CDSInput_base {
     /**
      * The underlying input element
      */
@@ -670,18 +670,42 @@ declare class BXInput extends BXInput_base {
      * Controls the disabled state of the input
      */
     disabled: boolean;
+    /**
+     * Specify whether to display the character counter
+     */
+    enableCounter: boolean;
     /**
      * The helper text.
      */
     helperText: string;
     /**
-     * Controls the invalid state and visibility of the `validityMessage`
+     * Specify if the currently value is invalid.
      */
     invalid: boolean;
     /**
-     * The label text.
+     * Max character count allowed for input. This is needed in order for enableCounter to display
+     */
+    maxCount: any;
+    /**
+     * Specify whether the control is currently in warning state
+     */
+    warn: boolean;
+    /**
+     * Provide the text that is displayed when the control is in warning state
+     */
+    warnText: string;
+    /**
+     * Message which is displayed if the value is invalid.
+     */
+    invalidText: string;
+    /**
+     * Specify whether you want the underlying label to be visually hidden
+     */
+    hideLabel: boolean;
+    /**
+     * Generic label that will be used as the textual representation of what this field is for
      */
-    labelText: string;
+    label: string;
     /**
      * Name for the input in the `FormData`
      */
@@ -695,7 +719,7 @@ declare class BXInput extends BXInput_base {
      */
     placeholder: string;
     /**
-     * Controls the readonly state of the input
+     * Specify if the component should be read-only
      */
     readonly: boolean;
     /**
@@ -757,6 +781,6 @@ declare class BXInput extends BXInput_base {
     };
     static styles: any;
 }
-export default BXInput;
+export default CDSInput;
 
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/input/input.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACxB,MAAM,gCAAgC,CAAC;AAIxC,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAGpE,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEtD;;;;;;;GAOG;AACH,cACM,OAAQ,SAAQ,YAAoC;IACxD;;OAEG;IAEH,SAAS,CAAC,MAAM,EAAG,gBAAgB,CAAC;IAEpC;;OAEG;IACH,SAAS,CAAC,MAAM,SAAM;IAEtB;;;;OAIG;IACH,SAAS,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK;IAIxC,eAAe,CAAC,KAAK,EAAE,KAAK;IAQ5B;;OAEG;IAEH,YAAY,SAAM;IAElB;;OAEG;IAEH,SAAS,UAAS;IAElB;;OAEG;IAEH,WAAW,qBAA8B;IAEzC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,UAAU,SAAM;IAEhB;;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,iBAAiB,SAAmB;IAEpC;;OAEG;IAEH,iBAAiB,SAAmB;IAEpC;;OAEG;IAMH,4BAA4B,UAAS;IAErC;;OAEG;IAEH,IAAI,aAAsB;IAE1B;;;OAGG;IAEH,gBAAgB,0BAAkC;IAElD;;;OAGG;IAEH,gBAAgB,0BAAkC;IAElD;;OAEG;IAEH,IAAI,aAAmB;IAEvB;;OAEG;IAEH,eAAe,SAAM;IAErB;;OAEG;IACH,IACI,KAAK,WAQR;IAED,IAAI,KAAK,CAAC,KAAK,QAAA,EAUd;IAED;;OAEG;IACH,OAAO,CAAC,8BAA8B;IAKtC,MAAM;IAgGN,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,OAAO,CAAC","file":"input.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 { prefix } from '../../globals/settings';\nimport View16 from '@carbon/icons/lib/view/16';\nimport ViewOff16 from '@carbon/icons/lib/view--off/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport {\n  FLOATING_MENU_ALIGNMENT,\n  FLOATING_MENU_DIRECTION,\n} from '../floating-menu/floating-menu';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from './defs';\nimport styles from './input.scss';\n\nexport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };\n\n/**\n * Input element. Supports all the usual attributes for textual input types\n *\n * @element cds-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}-input`)\nclass BXInput extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\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   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLInputElement).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 input 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 = INPUT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * Controls the disabled state of the input\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   * 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 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   * Controls the readonly state of the input\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  @property()\n  hidePasswordLabel = 'Hide password';\n\n  /**\n   * \"Show password\" tooltip text on password visibility toggle\n   */\n  @property()\n  showPasswordLabel = 'Show password';\n\n  /**\n   * Boolean property to render password visibility toggle\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.REGULAR;\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 = FLOATING_MENU_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 = FLOATING_MENU_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  private handleTogglePasswordVisibility() {\n    this.type =\n      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n  }\n\n  render() {\n    const { _handleInput: handleInput } = this;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-input__invalid-icon`,\n    });\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--text-input--invalid`]: this.invalid,\n      [`${prefix}--text-input--${this.size}`]: this.size,\n      [`${prefix}--password-input`]: this.type === INPUT_TYPE.PASSWORD,\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 passwordIsVisible = this.type !== INPUT_TYPE.PASSWORD;\n    const passwordVisibilityIcon = passwordIsVisible\n      ? ViewOff16({ class: `${prefix}--icon-visibility-off` })\n      : View16({ class: `${prefix}--icon-visibility-on` });\n\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`]: this.disabled,\n      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n        this.tooltipAlignment,\n    });\n\n    const passwordButtonLabel = html`\n      <span class=\"${prefix}--assistive-text\">\n        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n      </span>\n    `;\n\n    const passwordVisibilityButton = () => html`\n      <button\n        type=\"button\"\n        class=\"${passwordVisibilityToggleClasses}\"\n        ?disabled=\"${this.disabled}\"\n        @click=\"${this.handleTogglePasswordVisibility}\">\n        ${!this.disabled && passwordButtonLabel} ${passwordVisibilityIcon}\n      </button>\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-input__field-wrapper\"\n        ?data-invalid=\"${this.invalid}\">\n        ${this.invalid ? invalidIcon : null}\n        <input\n          ?autocomplete=\"${this.autocomplete}\"\n          ?autofocus=\"${this.autofocus}\"\n          class=\"${inputClasses}\"\n          ?data-invalid=\"${this.invalid}\"\n          ?disabled=\"${this.disabled}\"\n          aria-describedby=\"helper-text\"\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          type=\"${ifNonEmpty(this.type)}\"\n          .value=\"${this._value}\"\n          @input=\"${handleInput}\" />\n        ${this.showPasswordVisibilityToggle &&\n        (this.type === INPUT_TYPE.PASSWORD || this.type === INPUT_TYPE.TEXT)\n          ? passwordVisibilityButton()\n          : null}\n      </div>\n      <div class=\"${helperTextClasses}\" id=\"helper-text\">\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 BXInput;\n"]}
+{"version":3,"sources":["components/input/input.ts"],"names":[],"mappings":"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","file":"input.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 { prefix } from '../../globals/settings';\nimport View16 from '@carbon/icons/lib/view/16';\nimport ViewOff16 from '@carbon/icons/lib/view--off/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport {\n  FLOATING_MENU_ALIGNMENT,\n  FLOATING_MENU_DIRECTION,\n} from '../floating-menu/floating-menu';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from './defs';\nimport styles from './input.scss';\n\nexport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };\n\n/**\n * Input element. Supports all the usual attributes for textual input types\n *\n * @element cds-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}-input`)\nclass CDSInput extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\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   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLInputElement).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 input 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 = INPUT_COLOR_SCHEME.REGULAR;\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   * 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   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\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 = 'label text';\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  @property()\n  hidePasswordLabel = 'Hide password';\n\n  /**\n   * \"Show password\" tooltip text on password visibility toggle\n   */\n  @property()\n  showPasswordLabel = 'Show password';\n\n  /**\n   * Boolean property to render password visibility toggle\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  /**\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 = FLOATING_MENU_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 = FLOATING_MENU_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  private handleTogglePasswordVisibility() {\n    this.type =\n      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n  }\n\n  render() {\n    const { _handleInput: handleInput } = this;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-input__invalid-icon`,\n    });\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--text-input--invalid`]: this.invalid,\n      [`${prefix}--text-input--${this.size}`]: this.size,\n      [`${prefix}--password-input`]: this.type === INPUT_TYPE.PASSWORD,\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 passwordIsVisible = this.type !== INPUT_TYPE.PASSWORD;\n    const passwordVisibilityIcon = passwordIsVisible\n      ? ViewOff16({ class: `${prefix}--icon-visibility-off` })\n      : View16({ class: `${prefix}--icon-visibility-on` });\n\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`]: this.disabled,\n      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n        this.tooltipAlignment,\n    });\n\n    const passwordButtonLabel = html`\n      <span class=\"${prefix}--assistive-text\">\n        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n      </span>\n    `;\n\n    const passwordVisibilityButton = () => html`\n      <button\n        type=\"button\"\n        class=\"${passwordVisibilityToggleClasses}\"\n        ?disabled=\"${this.disabled}\"\n        @click=\"${this.handleTogglePasswordVisibility}\">\n        ${!this.disabled && passwordButtonLabel} ${passwordVisibilityIcon}\n      </button>\n    `;\n\n    return html`\n      <label class=\"${labelClasses}\" for=\"input\">\n        <slot name=\"label-text\"> ${this.label} </slot>\n      </label>\n      <div\n        class=\"${prefix}--text-input__field-wrapper\"\n        ?data-invalid=\"${this.invalid}\">\n        ${this.invalid ? invalidIcon : null}\n        <input\n          ?autocomplete=\"${this.autocomplete}\"\n          ?autofocus=\"${this.autofocus}\"\n          class=\"${inputClasses}\"\n          ?data-invalid=\"${this.invalid}\"\n          ?disabled=\"${this.disabled}\"\n          aria-describedby=\"helper-text\"\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          type=\"${ifNonEmpty(this.type)}\"\n          .value=\"${this._value}\"\n          @input=\"${handleInput}\" />\n        ${this.showPasswordVisibilityToggle &&\n        (this.type === INPUT_TYPE.PASSWORD || this.type === INPUT_TYPE.TEXT)\n          ? passwordVisibilityButton()\n          : null}\n      </div>\n      <div class=\"${helperTextClasses}\" id=\"helper-text\">\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 CDSInput;\n"]}

package/es/components/input/input.js

@@ -36,15 +36,15 @@ export { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };
  * @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 BXInput = _decorate([customElement(`${prefix}-input`)], function (_initialize, _ValidityMixin) {
-  class BXInput extends _ValidityMixin {
+let CDSInput = _decorate([customElement(`${prefix}-input`)], function (_initialize, _ValidityMixin) {
+  class CDSInput extends _ValidityMixin {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXInput,
+    F: CDSInput,
     d: [{
       kind: "field",
       decorators: [query('input')],
@@ -134,6 +134,17 @@ let BXInput = _decorate([customElement(`${prefix}-input`)], function (_initializ
       value() {
         return false;
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        attribute: 'enable-counter',
+        reflect: true
+      })],
+      key: "enableCounter",
+      value() {
+        return false;
+      }
     }, {
       kind: "field",
       decorators: [property({
@@ -156,12 +167,60 @@ let BXInput = _decorate([customElement(`${prefix}-input`)], function (_initializ
     }, {
       kind: "field",
       decorators: [property({
-        attribute: 'label-text'
+        type: Number,
+        attribute: 'max-count',
+        reflect: true
+      })],
+      key: "maxCount",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Boolean,
+        reflect: true
+      })],
+      key: "warn",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'warn-text'
+      })],
+      key: "warnText",
+      value() {
+        return '';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'invalid-text'
       })],
-      key: "labelText",
+      key: "invalidText",
       value() {
         return '';
       }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'hide-label',
+        type: Boolean,
+        reflect: true
+      })],
+      key: "hideLabel",
+      value() {
+        return false;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: 'label'
+      })],
+      key: "label",
+      value() {
+        return 'label text';
+      }
     }, {
       kind: "field",
       decorators: [property()],
@@ -246,7 +305,7 @@ let BXInput = _decorate([customElement(`${prefix}-input`)], function (_initializ
       })],
       key: "size",
       value() {
-        return INPUT_SIZE.REGULAR;
+        return INPUT_SIZE.MEDIUM;
       }
     }, {
       kind: "field",
@@ -296,14 +355,32 @@ let BXInput = _decorate([customElement(`${prefix}-input`)], function (_initializ
       /**
        * Controls the disabled state of the input
        */
+      /**
+       * Specify whether to display the character counter
+       */
       /**
        * The helper text.
        */
       /**
-       * Controls the invalid state and visibility of the `validityMessage`
+       * Specify if the currently value is invalid.
+       */
+      /**
+       * Max character count allowed for input. This is needed in order for enableCounter to display
+       */
+      /**
+       * Specify whether the control is currently in warning state
+       */
+      /**
+       * Provide the text that is displayed when the control is in warning state
+       */
+      /**
+       * Message which is displayed if the value is invalid.
+       */
+      /**
+       * Specify whether you want the underlying label to be visually hidden
        */
       /**
-       * The label text.
+       * Generic label that will be used as the textual representation of what this field is for
        */
       /**
        * Name for the input in the `FormData`
@@ -315,7 +392,7 @@ let BXInput = _decorate([customElement(`${prefix}-input`)], function (_initializ
        * Value to display when the input has an empty `value`
        */
       /**
-       * Controls the readonly state of the input
+       * Specify if the component should be read-only
        */
       /**
        * Boolean property to set the required status
@@ -472,7 +549,7 @@ let BXInput = _decorate([customElement(`${prefix}-input`)], function (_initializ
       <div class="${0}--form-requirement">
         <slot name="validity-message"> ${0} </slot>
       </div>
-    `), labelClasses, this.labelText, prefix, this.invalid, this.invalid ? invalidIcon : null, this.autocomplete, this.autofocus, inputClasses, this.invalid, this.disabled, ifNonEmpty(this.name), ifNonEmpty(this.pattern), ifNonEmpty(this.placeholder), this.readonly, this.required, ifNonEmpty(this.type), this._value, handleInput, this.showPasswordVisibilityToggle && (this.type === INPUT_TYPE.PASSWORD || this.type === INPUT_TYPE.TEXT) ? passwordVisibilityButton() : null, helperTextClasses, this.helperText, prefix, this.validityMessage);
+    `), labelClasses, this.label, prefix, this.invalid, this.invalid ? invalidIcon : null, this.autocomplete, this.autofocus, inputClasses, this.invalid, this.disabled, ifNonEmpty(this.name), ifNonEmpty(this.pattern), ifNonEmpty(this.placeholder), this.readonly, this.required, ifNonEmpty(this.type), this._value, handleInput, this.showPasswordVisibilityToggle && (this.type === INPUT_TYPE.PASSWORD || this.type === INPUT_TYPE.TEXT) ? passwordVisibilityButton() : null, helperTextClasses, this.helperText, prefix, this.validityMessage);
       }
     }, {
       kind: "field",
@@ -493,5 +570,5 @@ let BXInput = _decorate([customElement(`${prefix}-input`)], function (_initializ
     }]
   };
 }, ValidityMixin(FormMixin(LitElement)));
-export default BXInput;
+export default CDSInput;
 //# sourceMappingURL=input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["LitElement","html","property","customElement","query","classMap","prefix","View16","ViewOff16","WarningFilled16","FLOATING_MENU_ALIGNMENT","FLOATING_MENU_DIRECTION","ifNonEmpty","FormMixin","ValidityMixin","INPUT_COLOR_SCHEME","INPUT_SIZE","INPUT_TYPE","styles","BXInput","_decorate","_initialize","_ValidityMixin","constructor","args","F","d","kind","decorators","key","value","_handleInput","target","_handleFormdata","event","formData","disabled","name","append","type","Boolean","attribute","reflect","REGULAR","CENTER","BOTTOM","TEXT","_input","_value","oldValue","requestUpdate","handleTogglePasswordVisibility","PASSWORD","render","handleInput","invalidIcon","class","inputClasses","colorScheme","invalid","size","labelClasses","helperTextClasses","passwordIsVisible","passwordVisibilityIcon","passwordVisibilityToggleClasses","tooltipDirection","tooltipAlignment","passwordButtonLabel","_t","_","hidePasswordLabel","showPasswordLabel","passwordVisibilityButton","_t2","_t3","labelText","autocomplete","autofocus","pattern","placeholder","readonly","required","showPasswordVisibilityToggle","helperText","validityMessage","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/input/input.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 { prefix } from '../../globals/settings';\nimport View16 from '@carbon/icons/lib/view/16';\nimport ViewOff16 from '@carbon/icons/lib/view--off/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport {\n  FLOATING_MENU_ALIGNMENT,\n  FLOATING_MENU_DIRECTION,\n} from '../floating-menu/floating-menu';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from './defs';\nimport styles from './input.scss';\n\nexport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };\n\n/**\n * Input element. Supports all the usual attributes for textual input types\n *\n * @element cds-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}-input`)\nclass BXInput extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\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   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLInputElement).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 input 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 = INPUT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * Controls the disabled state of the input\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   * 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 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   * Controls the readonly state of the input\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  @property()\n  hidePasswordLabel = 'Hide password';\n\n  /**\n   * \"Show password\" tooltip text on password visibility toggle\n   */\n  @property()\n  showPasswordLabel = 'Show password';\n\n  /**\n   * Boolean property to render password visibility toggle\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.REGULAR;\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 = FLOATING_MENU_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 = FLOATING_MENU_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  private handleTogglePasswordVisibility() {\n    this.type =\n      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n  }\n\n  render() {\n    const { _handleInput: handleInput } = this;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-input__invalid-icon`,\n    });\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--text-input--invalid`]: this.invalid,\n      [`${prefix}--text-input--${this.size}`]: this.size,\n      [`${prefix}--password-input`]: this.type === INPUT_TYPE.PASSWORD,\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 passwordIsVisible = this.type !== INPUT_TYPE.PASSWORD;\n    const passwordVisibilityIcon = passwordIsVisible\n      ? ViewOff16({ class: `${prefix}--icon-visibility-off` })\n      : View16({ class: `${prefix}--icon-visibility-on` });\n\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`]: this.disabled,\n      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n        this.tooltipAlignment,\n    });\n\n    const passwordButtonLabel = html`\n      <span class=\"${prefix}--assistive-text\">\n        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n      </span>\n    `;\n\n    const passwordVisibilityButton = () => html`\n      <button\n        type=\"button\"\n        class=\"${passwordVisibilityToggleClasses}\"\n        ?disabled=\"${this.disabled}\"\n        @click=\"${this.handleTogglePasswordVisibility}\">\n        ${!this.disabled && passwordButtonLabel} ${passwordVisibilityIcon}\n      </button>\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-input__field-wrapper\"\n        ?data-invalid=\"${this.invalid}\">\n        ${this.invalid ? invalidIcon : null}\n        <input\n          ?autocomplete=\"${this.autocomplete}\"\n          ?autofocus=\"${this.autofocus}\"\n          class=\"${inputClasses}\"\n          ?data-invalid=\"${this.invalid}\"\n          ?disabled=\"${this.disabled}\"\n          aria-describedby=\"helper-text\"\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          type=\"${ifNonEmpty(this.type)}\"\n          .value=\"${this._value}\"\n          @input=\"${handleInput}\" />\n        ${this.showPasswordVisibilityToggle &&\n        (this.type === INPUT_TYPE.PASSWORD || this.type === INPUT_TYPE.TEXT)\n          ? passwordVisibilityButton()\n          : null}\n      </div>\n      <div class=\"${helperTextClasses}\" id=\"helper-text\">\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 BXInput;\n"],"mappings":"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"}
+{"version":3,"file":"input.js","names":["LitElement","html","property","customElement","query","classMap","prefix","View16","ViewOff16","WarningFilled16","FLOATING_MENU_ALIGNMENT","FLOATING_MENU_DIRECTION","ifNonEmpty","FormMixin","ValidityMixin","INPUT_COLOR_SCHEME","INPUT_SIZE","INPUT_TYPE","styles","CDSInput","_decorate","_initialize","_ValidityMixin","constructor","args","F","d","kind","decorators","key","value","_handleInput","target","_handleFormdata","event","formData","disabled","name","append","type","Boolean","attribute","reflect","REGULAR","Number","MEDIUM","CENTER","BOTTOM","TEXT","_input","_value","oldValue","requestUpdate","handleTogglePasswordVisibility","PASSWORD","render","handleInput","invalidIcon","class","inputClasses","colorScheme","invalid","size","labelClasses","helperTextClasses","passwordIsVisible","passwordVisibilityIcon","passwordVisibilityToggleClasses","tooltipDirection","tooltipAlignment","passwordButtonLabel","_t","_","hidePasswordLabel","showPasswordLabel","passwordVisibilityButton","_t2","_t3","label","autocomplete","autofocus","pattern","placeholder","readonly","required","showPasswordVisibilityToggle","helperText","validityMessage","static","_objectSpread","shadowRootOptions","delegatesFocus"],"sources":["components/input/input.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 { prefix } from '../../globals/settings';\nimport View16 from '@carbon/icons/lib/view/16';\nimport ViewOff16 from '@carbon/icons/lib/view--off/16';\nimport WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport {\n  FLOATING_MENU_ALIGNMENT,\n  FLOATING_MENU_DIRECTION,\n} from '../floating-menu/floating-menu';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport FormMixin from '../../globals/mixins/form';\nimport ValidityMixin from '../../globals/mixins/validity';\nimport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from './defs';\nimport styles from './input.scss';\n\nexport { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };\n\n/**\n * Input element. Supports all the usual attributes for textual input types\n *\n * @element cds-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}-input`)\nclass CDSInput extends ValidityMixin(FormMixin(LitElement)) {\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\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   */\n  protected _handleInput({ target }: Event) {\n    this.value = (target as HTMLInputElement).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 input 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 = INPUT_COLOR_SCHEME.REGULAR;\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   * 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   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\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 = 'label text';\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  @property()\n  hidePasswordLabel = 'Hide password';\n\n  /**\n   * \"Show password\" tooltip text on password visibility toggle\n   */\n  @property()\n  showPasswordLabel = 'Show password';\n\n  /**\n   * Boolean property to render password visibility toggle\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  /**\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 = FLOATING_MENU_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 = FLOATING_MENU_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  private handleTogglePasswordVisibility() {\n    this.type =\n      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;\n  }\n\n  render() {\n    const { _handleInput: handleInput } = this;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--text-input__invalid-icon`,\n    });\n\n    const inputClasses = classMap({\n      [`${prefix}--text-input`]: true,\n      [`${prefix}--text-input--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--text-input--invalid`]: this.invalid,\n      [`${prefix}--text-input--${this.size}`]: this.size,\n      [`${prefix}--password-input`]: this.type === INPUT_TYPE.PASSWORD,\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 passwordIsVisible = this.type !== INPUT_TYPE.PASSWORD;\n    const passwordVisibilityIcon = passwordIsVisible\n      ? ViewOff16({ class: `${prefix}--icon-visibility-off` })\n      : View16({ class: `${prefix}--icon-visibility-on` });\n\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`]: this.disabled,\n      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,\n      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:\n        this.tooltipAlignment,\n    });\n\n    const passwordButtonLabel = html`\n      <span class=\"${prefix}--assistive-text\">\n        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}\n      </span>\n    `;\n\n    const passwordVisibilityButton = () => html`\n      <button\n        type=\"button\"\n        class=\"${passwordVisibilityToggleClasses}\"\n        ?disabled=\"${this.disabled}\"\n        @click=\"${this.handleTogglePasswordVisibility}\">\n        ${!this.disabled && passwordButtonLabel} ${passwordVisibilityIcon}\n      </button>\n    `;\n\n    return html`\n      <label class=\"${labelClasses}\" for=\"input\">\n        <slot name=\"label-text\"> ${this.label} </slot>\n      </label>\n      <div\n        class=\"${prefix}--text-input__field-wrapper\"\n        ?data-invalid=\"${this.invalid}\">\n        ${this.invalid ? invalidIcon : null}\n        <input\n          ?autocomplete=\"${this.autocomplete}\"\n          ?autofocus=\"${this.autofocus}\"\n          class=\"${inputClasses}\"\n          ?data-invalid=\"${this.invalid}\"\n          ?disabled=\"${this.disabled}\"\n          aria-describedby=\"helper-text\"\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          type=\"${ifNonEmpty(this.type)}\"\n          .value=\"${this._value}\"\n          @input=\"${handleInput}\" />\n        ${this.showPasswordVisibilityToggle &&\n        (this.type === INPUT_TYPE.PASSWORD || this.type === INPUT_TYPE.TEXT)\n          ? passwordVisibilityButton()\n          : null}\n      </div>\n      <div class=\"${helperTextClasses}\" id=\"helper-text\">\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 CDSInput;\n"],"mappings":"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"}

package/es/components/input/input.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(:focus),.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(:focus),.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[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-input{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);outline:2px solid transparent;outline-offset:-2px;width:100%;height:2.5rem;padding:0 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;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-input html{font-size:100%}.cds--text-input 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-input code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--text-input strong{font-weight:600}.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--text-input--lg{height:3rem}.cds--text-input--sm{height:2rem}.cds--password-input{padding-left:2.5rem}.cds--text-input--sm.cds--password-input{padding-left:2rem}.cds--text-input--lg.cds--password-input{padding-left:3rem}.cds--text-input::-moz-placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1}.cds--text-input::placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1}.cds--text-input--light{background-color:var(--cds-field-02,#fff)}.cds--text-input__field-wrapper{position:relative;display:flex;width:100%}.cds--text-input__invalid-icon{position:absolute;top:50%;left:1rem;fill:var(--cds-support-error,#da1e28);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{position:relative;display:inline-flex;overflow:visible;align-items:center;cursor:pointer}.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: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{position:absolute;z-index:6000;display:flex;align-items:center;opacity:0;pointer-events:none}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.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{width:0;height:0;border-style:solid;content:\"\"}.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{box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));z-index:6000;width:-moz-max-content;width:max-content;min-width:1.5rem;max-width:13rem;height:auto;padding:.1875rem 1rem;background-color:var(--cds-background-inverse,#393939);border-radius:.125rem;color:var(--cds-text-inverse,#fff);font-weight:400;text-align:right;transform:translateX(50%);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)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility::after{width: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{width: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{width: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 tooltip-fade{from{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{overflow:visible;margin:auto;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: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{overflow:hidden;margin:-1px;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{position:absolute;display:block;content:\"\";right:0;width:100%;height:.75rem;top:-.75rem}.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{bottom:0;right:50%}.cds--text-input--password__visibility::before{bottom:-.5rem;border-width:0 .25rem .3125rem .25rem;border-color:transparent transparent var(--cds-background-inverse,#393939) transparent;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{bottom:-.8125rem;transform:translate(50%,100%)}.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{outline:2px solid transparent;outline-offset:-2px;position:absolute;left:0;display:flex;width:2.5rem;height:100%;min-height:auto;align-items:center;justify-content:center;padding:0;border:0;background:0 0;cursor:pointer;transition:outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-input--sm+.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{width:2rem}.cds--text-input--lg+.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{width:3rem}.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252);transition:fill 70ms cubic-bezier(.2,0,.38,.9)}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg{fill:ButtonText}}.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--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg,.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg{fill:var(--cds-icon-primary,#161616)}.cds--text-input--invalid,.cds--text-input--warning{padding-left:2.5rem}.cds--text-input--invalid.cds--password-input{padding-left:4rem}.cds--text-input--invalid+.cds--text-input--password__visibility__toggle{left:1rem}.cds--password-input-wrapper .cds--text-input__invalid-icon{left:2.5rem}.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{cursor:not-allowed}.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--text-input__counter-alert{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0)}.cds--text-input:disabled{outline:2px solid transparent;outline-offset:-2px;border-bottom:1px solid transparent;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;-webkit-text-fill-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-input--light:disabled{background-color:var(--cds-field-02,#fff)}.cds--text-input:disabled::-moz-placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25));opacity:1}.cds--text-input:disabled::placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25));opacity:1}.cds--text-input--invalid{outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px;box-shadow:none}@media screen and (prefers-contrast){.cds--text-input--invalid{outline-style:dotted}}.cds--text-input--invalid .cds--text-input--password__visibility__toggle{left:2.5rem}.cds--skeleton.cds--text-input{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none}.cds--skeleton.cds--text-input:active,.cds--skeleton.cds--text-input:focus,.cds--skeleton.cds--text-input:hover{border:none;cursor:default;outline:0}.cds--skeleton.cds--text-input::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--skeleton.cds--text-input::before{animation:none}}.cds--form--fluid .cds--text-input-wrapper{position:relative;background:var(--cds-field);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--form--fluid .cds--label{position:absolute;z-index:1;top:.8125rem;right:1rem;display:flex;height:1rem;align-items:center;margin:0}.cds--form--fluid .cds--form__helper-text{display:none}.cds--form--fluid .cds--text-input{min-height: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-bottom:none}.cds--form--fluid .cds--text-input--invalid+.cds--text-input__divider,.cds--form--fluid .cds--text-input--warning+.cds--text-input__divider{display:block;border-style:solid;border-color:var(--cds-border-subtle);border-bottom:none;margin:0 1rem}.cds--form--fluid .cds--text-input__invalid-icon{top: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:0}.cds--form--fluid .cds--text-input__field-wrapper--warning{border-bottom: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:0}.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 0;overflow-wrap:break-word;word-break:break-word}.cds--text-input-wrapper .cds--label--inline--sm{margin-top:.5625rem}.cds--text-input-wrapper .cds--label--inline--lg{margin-top:1.0625rem}.cds--text-input__label-helper-wrapper{max-width:8rem;flex:2;flex-direction:column;margin-left:1.5rem;overflow-wrap:break-word}.cds--text-input-wrapper .cds--form__helper-text--inline{margin-top:.125rem}.cds--text-input__field-outer-wrapper{display:flex;width:100%;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--text-input__field-outer-wrapper--inline{flex:8;flex-direction:column}.cds--text-input-wrapper--inline .cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.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:0 0}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,.cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg{fill:ButtonText}}.cds--text-input__label-wrapper{display:flex;width:100%;justify-content:space-between}.cds--text-input__label-wrapper .cds--text-input__label-counter{align-self:end}:host(cds-input){width:100%;outline:0}:host(cds-input[show-password-visibility-toggle]) .cds--text-input{padding-left:2.5rem}:host(cds-input[show-password-visibility-toggle][size=sm]) .cds--text-input__invalid-icon{left:2rem}:host(cds-input[show-password-visibility-toggle]) .cds--text-input__invalid-icon,:host(cds-input[show-password-visibility-toggle][size=md]) .cds--text-input__invalid-icon{left:2.5rem}:host(cds-input[show-password-visibility-toggle][size=lg]) .cds--text-input__invalid-icon{left:3rem}",
+  "@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-input{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);outline:2px solid transparent;outline-offset:-2px;width:100%;height:2.5rem;padding:0 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;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-input html{font-size:100%}.cds--text-input 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-input code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--text-input strong{font-weight:600}.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--text-input--lg{height:3rem}.cds--text-input--sm{height:2rem}.cds--password-input{padding-left:2.5rem}.cds--text-input--sm.cds--password-input{padding-left:2rem}.cds--text-input--lg.cds--password-input{padding-left:3rem}.cds--text-input::-moz-placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1}.cds--text-input::placeholder{color:var(--cds-text-placeholder,rgba(22,22,22,.4));opacity:1}.cds--text-input--light{background-color:var(--cds-field-02,#fff)}.cds--text-input__field-wrapper{position:relative;display:flex;width:100%}.cds--text-input__invalid-icon{position:absolute;top:50%;left:1rem;fill:var(--cds-support-error,#da1e28);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{position:relative;display:inline-flex;overflow:visible;align-items:center;cursor:pointer}.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: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{position:absolute;z-index:6000;display:flex;align-items:center;opacity:0;pointer-events:none}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.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{width:0;height:0;border-style:solid;content:\"\"}.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{box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));z-index:6000;width:-moz-max-content;width:max-content;min-width:1.5rem;max-width:13rem;height:auto;padding:.1875rem 1rem;background-color:var(--cds-background-inverse,#393939);border-radius:.125rem;color:var(--cds-text-inverse,#fff);font-weight:400;text-align:right;transform:translateX(50%);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)}@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){.cds--text-input--password__visibility .cds--assistive-text,.cds--text-input--password__visibility+.cds--assistive-text,.cds--text-input--password__visibility::after{width: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{width: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{width: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 tooltip-fade{from{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{overflow:visible;margin:auto;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: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{overflow:hidden;margin:-1px;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{position:absolute;display:block;content:\"\";right:0;width:100%;height:.75rem;top:-.75rem}.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{bottom:0;right:50%}.cds--text-input--password__visibility::before{bottom:-.5rem;border-width:0 .25rem .3125rem .25rem;border-color:transparent transparent var(--cds-background-inverse,#393939) transparent;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{bottom:-.8125rem;transform:translate(50%,100%)}.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{outline:2px solid transparent;outline-offset:-2px;position:absolute;left:0;display:flex;width:2.5rem;height:100%;min-height:auto;align-items:center;justify-content:center;padding:0;border:0;background:0 0;cursor:pointer;transition:outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--text-input--sm+.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{width:2rem}.cds--text-input--lg+.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{width:3rem}.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252);transition:fill 70ms cubic-bezier(.2,0,.38,.9)}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg{fill:ButtonText}}.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--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:focus svg,.cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg{fill:var(--cds-icon-primary,#161616)}.cds--text-input--invalid,.cds--text-input--warning{padding-left:2.5rem}.cds--text-input--invalid.cds--password-input{padding-left:4rem}.cds--text-input--invalid+.cds--text-input--password__visibility__toggle{left:1rem}.cds--password-input-wrapper .cds--text-input__invalid-icon{left:2.5rem}.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger{cursor:not-allowed}.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--text-input:disabled~.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--text-input__counter-alert{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0)}.cds--text-input:disabled{outline:2px solid transparent;outline-offset:-2px;border-bottom:1px solid transparent;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;-webkit-text-fill-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--text-input--light:disabled{background-color:var(--cds-field-02,#fff)}.cds--text-input:disabled::-moz-placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25));opacity:1}.cds--text-input:disabled::placeholder{color:var(--cds-text-disabled,rgba(22,22,22,.25));opacity:1}.cds--text-input--invalid{outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px;box-shadow:none}@media screen and (prefers-contrast){.cds--text-input--invalid{outline-style:dotted}}.cds--text-input--invalid .cds--text-input--password__visibility__toggle{left:2.5rem}.cds--skeleton.cds--text-input{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none}.cds--skeleton.cds--text-input:active,.cds--skeleton.cds--text-input:focus,.cds--skeleton.cds--text-input:hover{border:none;cursor:default;outline:0}.cds--skeleton.cds--text-input::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--skeleton.cds--text-input::before{animation:none}}.cds--form--fluid .cds--text-input-wrapper{position:relative;background:var(--cds-field);transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--form--fluid .cds--label{position:absolute;z-index:1;top:.8125rem;right:1rem;display:flex;height:1rem;align-items:center;margin:0}.cds--form--fluid .cds--form__helper-text{display:none}.cds--form--fluid .cds--text-input{min-height: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-bottom:none}.cds--form--fluid .cds--text-input--invalid+.cds--text-input__divider,.cds--form--fluid .cds--text-input--warning+.cds--text-input__divider{display:block;border-style:solid;border-color:var(--cds-border-subtle);border-bottom:none;margin:0 1rem}.cds--form--fluid .cds--text-input__invalid-icon{top: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:0}.cds--form--fluid .cds--text-input__field-wrapper--warning{border-bottom: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:0}.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 0;overflow-wrap:break-word;word-break:break-word}.cds--text-input-wrapper .cds--label--inline--sm{margin-top:.5625rem}.cds--text-input-wrapper .cds--label--inline--lg{margin-top:1.0625rem}.cds--text-input__label-helper-wrapper{max-width:8rem;flex:2;flex-direction:column;margin-left:1.5rem;overflow-wrap:break-word}.cds--text-input-wrapper .cds--form__helper-text--inline{margin-top:.125rem}.cds--text-input__field-outer-wrapper{display:flex;width:100%;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--text-input__field-outer-wrapper--inline{flex:8;flex-direction:column}.cds--text-input-wrapper--inline .cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.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:0 0}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg,.cds--btn.cds--btn--icon-only.cds--text-input--password__visibility__toggle.cds--tooltip__trigger:hover svg{fill:ButtonText}}.cds--text-input__label-wrapper{display:flex;width:100%;justify-content:space-between}.cds--text-input__label-wrapper .cds--text-input__label-counter{align-self:end}:host(cds-input){width:100%;outline:0}:host(cds-input[show-password-visibility-toggle]) .cds--text-input{padding-left:2.5rem}:host(cds-input[show-password-visibility-toggle][size=sm]) .cds--text-input__invalid-icon{left:2rem}:host(cds-input[show-password-visibility-toggle]) .cds--text-input__invalid-icon,:host(cds-input[show-password-visibility-toggle][size=md]) .cds--text-input__invalid-icon{left:2.5rem}:host(cds-input[show-password-visibility-toggle][size=lg]) .cds--text-input__invalid-icon{left:3rem}",
 ]);

package/es/components/layer/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './layer';
+
+//# sourceMappingURL=index.d.ts.map

package/es/components/layer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/layer/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,SAAS,CAAC","file":"index.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2021, 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 './layer';\n"]}

package/es/components/layer/index.js

@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './layer';
+//# sourceMappingURL=index.js.map

package/es/components/layer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["components/layer/index.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2021, 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 './layer';\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,SAAS"}

package/es/components/layer/layer.css.js

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit';
+export default css([
+  ':root{--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--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-one,:host(cds-layer)[level="0"]{--cds-layer:var(--cds-layer-01, #f4f4f4);--cds-layer-active:var(--cds-layer-active-01, #c6c6c6);--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,:host(cds-layer)[level="1"]{--cds-layer:var(--cds-layer-02, #ffffff);--cds-layer-active:var(--cds-layer-active-02, #c6c6c6);--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, #ffffff);--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,:host(cds-layer)[level="2"]{--cds-layer:var(--cds-layer-03, #f4f4f4);--cds-layer-active:var(--cds-layer-active-03, #c6c6c6);--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)}',
+]);