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

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

@@ -21,15 +21,15 @@ import styles from "././number-input.css.js";
  */ /**
      * Skeleton of number input.
      */
-let BXNumberInputSkeleton = _decorate([customElement(`${prefix}-number-input-skeleton`)], function (_initialize, _LitElement) {
-  class BXNumberInputSkeleton extends _LitElement {
+let CDSNumberInputSkeleton = _decorate([customElement(`${prefix}-number-input-skeleton`)], function (_initialize, _LitElement) {
+  class CDSNumberInputSkeleton extends _LitElement {
     constructor(...args) {
       super(...args);
       _initialize(this);
     }
   }
   return {
-    F: BXNumberInputSkeleton,
+    F: CDSNumberInputSkeleton,
     d: [{
       kind: "field",
       decorators: [property({
@@ -68,5 +68,5 @@ let BXNumberInputSkeleton = _decorate([customElement(`${prefix}-number-input-ske
     }]
   };
 }, LitElement);
-export default BXNumberInputSkeleton;
+export default CDSNumberInputSkeleton;
 //# sourceMappingURL=number-input-skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"number-input-skeleton.js","names":["LitElement","html","property","customElement","prefix","styles","BXNumberInputSkeleton","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","type","Boolean","reflect","attribute","key","value","render","hideLabel","_t","_","_t2","static"],"sources":["components/number-input/number-input-skeleton.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './number-input.scss';\n\n/**\n * Skeleton of number input.\n */\n@customElement(`${prefix}-number-input-skeleton`)\nclass BXNumberInputSkeleton extends LitElement {\n  /**\n   * `true` if the label should be hidden. Corresponds to the attribute with the same name.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  render() {\n    const { hideLabel } = this;\n    return html`\n      ${!hideLabel &&\n      html` <span class=\"${prefix}--label ${prefix}--skeleton\"></span> `}\n      <div class=\"${prefix}--number ${prefix}--skeleton\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default BXNumberInputSkeleton;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,MAAM,MAAM,yBAAqB;;AAExC;AACA;AACA,GAFA;AACA;AACA;AAFA,IAIMC,qBAAqB,GAAAC,SAAA,EAD1BJ,aAAa,CAAE,GAAEC,MAAO,wBAAuB,CAAC,aAAAI,WAAA,EAAAC,WAAA;EAAjD,MACMH,qBAAqB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAiB/C;EAAC;IAAAI,CAAA,EAjBKN,qBAAqB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIxBb,QAAQ,CAAC;QAAEc,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAa,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAAP,IAAA;MAAAM,GAAA;MAAAC,KAAA;MAJjB;AACF;AACA;;MAIE,SAAAC,OAAA,EAAS;QACP,MAAM;UAAEC;QAAU,CAAC,GAAG,IAAI;QAC1B,OAAOtB,IAAI,CAAAuB,EAAA,KAAAA,EAAA,GAAAC,CAAC;AAChB,QAAM,CACmE;AACzE,oBAAkB,CAAS,YAAS,CAAS;AAC7C,KAAI,GAHI,CAACF,SAAS,IACZtB,IAAI,CAAAyB,GAAA,KAAAA,GAAA,GAAAD,CAAC,iBAAc,CAAS,WAAQ,CAAS,sBAAoB,GAA5CrB,MAAM,EAAWA,MAAM,CAAsB,EACpDA,MAAM,EAAYA,MAAM;MAE1C;IAAC;MAAAU,IAAA;MAAAa,MAAA;MAAAP,GAAA;MAAAC,MAAA;QAAA,OAEehB,MAAM;MAAA;IAAA;EAAA;AAAA,GAhBYL,UAAU;AAmB9C,eAAeM,qBAAqB"}
+{"version":3,"file":"number-input-skeleton.js","names":["LitElement","html","property","customElement","prefix","styles","CDSNumberInputSkeleton","_decorate","_initialize","_LitElement","constructor","args","F","d","kind","decorators","type","Boolean","reflect","attribute","key","value","render","hideLabel","_t","_","_t2","static"],"sources":["components/number-input/number-input-skeleton.ts"],"sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2023\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { prefix } from '../../globals/settings';\nimport styles from './number-input.scss';\n\n/**\n * Skeleton of number input.\n */\n@customElement(`${prefix}-number-input-skeleton`)\nclass CDSNumberInputSkeleton extends LitElement {\n  /**\n   * `true` if the label should be hidden. Corresponds to the attribute with the same name.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  render() {\n    const { hideLabel } = this;\n    return html`\n      ${!hideLabel &&\n      html` <span class=\"${prefix}--label ${prefix}--skeleton\"></span> `}\n      <div class=\"${prefix}--number ${prefix}--skeleton\"></div>\n    `;\n  }\n\n  static styles = styles;\n}\n\nexport default CDSNumberInputSkeleton;\n"],"mappings":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,EAAEC,IAAI,QAAQ,KAAK;AACtC,SAASC,QAAQ,EAAEC,aAAa,QAAQ,mBAAmB;AAC3D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAOC,MAAM,MAAM,yBAAqB;;AAExC;AACA;AACA,GAFA;AACA;AACA;AAFA,IAIMC,sBAAsB,GAAAC,SAAA,EAD3BJ,aAAa,CAAE,GAAEC,MAAO,wBAAuB,CAAC,aAAAI,WAAA,EAAAC,WAAA;EAAjD,MACMH,sBAAsB,SAAAG,WAAA,CAAoB;IAAAC,YAAA,GAAAC,IAAA;MAAA,SAAAA,IAAA;MAAAH,WAAA;IAAA;EAiBhD;EAAC;IAAAI,CAAA,EAjBKN,sBAAsB;IAAAO,CAAA;MAAAC,IAAA;MAAAC,UAAA,GAIzBb,QAAQ,CAAC;QAAEc,IAAI,EAAEC,OAAO;QAAEC,OAAO,EAAE,IAAI;QAAEC,SAAS,EAAE;MAAa,CAAC,CAAC;MAAAC,GAAA;MAAAC,MAAA;QAAA,OACxD,KAAK;MAAA;IAAA;MAAAP,IAAA;MAAAM,GAAA;MAAAC,KAAA;MAJjB;AACF;AACA;;MAIE,SAAAC,OAAA,EAAS;QACP,MAAM;UAAEC;QAAU,CAAC,GAAG,IAAI;QAC1B,OAAOtB,IAAI,CAAAuB,EAAA,KAAAA,EAAA,GAAAC,CAAC;AAChB,QAAM,CACmE;AACzE,oBAAkB,CAAS,YAAS,CAAS;AAC7C,KAAI,GAHI,CAACF,SAAS,IACZtB,IAAI,CAAAyB,GAAA,KAAAA,GAAA,GAAAD,CAAC,iBAAc,CAAS,WAAQ,CAAS,sBAAoB,GAA5CrB,MAAM,EAAWA,MAAM,CAAsB,EACpDA,MAAM,EAAYA,MAAM;MAE1C;IAAC;MAAAU,IAAA;MAAAa,MAAA;MAAAP,GAAA;MAAAC,MAAA;QAAA,OAEehB,MAAM;MAAA;IAAA;EAAA;AAAA,GAhBaL,UAAU;AAmB/C,eAAeM,sBAAsB"}

package/es/components/number-input/number-input.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:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset 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;left:.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;left:.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 2.5rem .5rem 1rem;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--number{position:relative;display:flex;width:100%;flex-direction:column}.cds--number html{font-size:100%}.cds--number 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--number code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--number strong{font-weight:600}.cds--number input[type=number]{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;display:inline-flex;width:100%;min-width:9.375rem;height:2.5rem;box-sizing:border-box;padding-right:8rem;padding-left:1rem;border:0;border-bottom:.0625rem solid var(--cds-border-strong);-moz-appearance:textfield;background-color:var(--cds-field);border-radius:0;color:var(--cds-text-primary,#161616);font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;font-weight:400;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--number input[type=number]:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--number input[type=number]:focus{outline-style:dotted}}.cds--number input[type=number]:disabled~.cds--number__controls{cursor:not-allowed;pointer-events:none}.cds--number input[type=number]:disabled~.cds--number__controls svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--number input[type=number]::-ms-clear{display:none}.cds--number input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none}.cds--number--lg.cds--number input[type=number]{padding-right:9rem}.cds--number--sm.cds--number input[type=number]{padding-right:7rem}.cds--number input[type=number]:disabled{border-bottom-color:transparent;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--number__input-wrapper{position:relative;display:flex;align-items:center}.cds--number__controls{position:absolute;top:50%;right:0;display:flex;width:5rem;height:100%;flex-direction:row;align-items:center;justify-content:center;transform:translateY(-50%)}.cds--number__controls html{font-size:100%}.cds--number__controls 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--number__controls code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--number__controls strong{font-weight:600}.cds--number__control-btn{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%;position:relative;display:inline-flex;height:100%;align-items:center;justify-content:center;border-bottom:.0625rem solid var(--cds-border-strong);color:var(--cds-icon-primary,#161616)}.cds--number__control-btn *,.cds--number__control-btn ::after,.cds--number__control-btn ::before{box-sizing:inherit}.cds--number__control-btn::-moz-focus-inner{border:0}.cds--number__control-btn::after,.cds--number__control-btn::before{position:absolute;top:.125rem;display:block;width:.125rem;height:2.25rem;background-color:var(--cds-field);content:\"\"}.cds--number__control-btn::before{left:0}.cds--number__control-btn::after{right:0}.cds--number__control-btn svg{fill:currentColor}.cds--number__control-btn:focus{outline:1px solid var(--cds-focus,#0f62fe);color:var(--cds-icon-primary,#161616);outline-offset:-2px;outline-width:2px}@media screen and (prefers-contrast){.cds--number__control-btn:focus{outline-style:dotted}}.cds--number__control-btn:hover{background-color:var(--cds-field-hover);color:var(--cds-icon-primary,#161616);cursor:pointer}.cds--number__control-btn:hover::after,.cds--number__control-btn:hover::before{background-color:var(--cds-field-hover)}.cds--number__control-btn:focus::after,.cds--number__control-btn:focus::before,.cds--number__control-btn:hover:focus::after,.cds--number__control-btn:hover:focus::before{background-color:transparent}.cds--number__control-btn:disabled{border-bottom-color:transparent;color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--number__control-btn.down-icon{order:1}.cds--number__control-btn.up-icon{order:2}.cds--number input[type=number]:focus~.cds--number__controls .cds--number__control-btn{border-bottom-width:0}.cds--number input[type=number]:focus~.cds--number__controls .cds--number__control-btn:hover{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;border:0}@media screen and (prefers-contrast){.cds--number input[type=number]:focus~.cds--number__controls .cds--number__control-btn:hover{outline-style:dotted}}.cds--number input[type=number][data-invalid]~.cds--number__controls .cds--number__control-btn{border-bottom-width:0}.cds--number input[type=number][data-invalid]:not(:focus)~.cds--number__controls .cds--number__control-btn:hover{outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--number input[type=number][data-invalid]:not(:focus)~.cds--number__controls .cds--number__control-btn:hover{outline-style:dotted}}.cds--number input[type=number]:focus~.cds--number__controls .cds--number__control-btn.up-icon::after{background-color:transparent}.cds--number input[type=number][data-invalid]~.cds--number__controls .cds--number__control-btn.up-icon::after{background-color:var(--cds-support-error,#da1e28)}.cds--number input[type=number][data-invalid]:focus~.cds--number__controls .cds--number__control-btn.up-icon::after,.cds--number input[type=number][data-invalid]~.cds--number__controls .cds--number__control-btn.up-icon:focus::after{background-color:var(--cds-focus,#0f62fe)}.cds--number__rule-divider{position:absolute;z-index:6000;width:.0625rem;height:1rem;background-color:var(--cds-border-subtle)}.cds--number__rule-divider:first-of-type{order:0}.cds--number__controls .cds--number__rule-divider:first-of-type{left:0;background-color:transparent}.cds--number__invalid+.cds--number__controls .cds--number__rule-divider:first-of-type{background-color:var(--cds-border-subtle)}.cds--number--light .cds--number__invalid+.cds--number__controls .cds--number__rule-divider:first-of-type,.cds--number--light .cds--number__rule-divider{background-color:var(--cds-border-subtle-02,#e0e0e0)}.cds--number input[type=number]:disabled+.cds--number__controls .cds--number__rule-divider:first-of-type{background-color:transparent}.cds--number input[type=number]:disabled+.cds--number__controls .cds--number__rule-divider{background-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--number__control-btn:focus~.cds--number__rule-divider{background-color:transparent}.cds--number__invalid{position:absolute;right:6rem;fill:var(--cds-support-error,#da1e28)}.cds--number--lg .cds--number__invalid{right:7rem}.cds--number--sm .cds--number__invalid{right:5rem}.cds--number__invalid+.cds--number__rule-divider{position:absolute;right:5rem}.cds--number--lg .cds--number__invalid+.cds--number__rule-divider{right:6rem}.cds--number--sm .cds--number__invalid+.cds--number__rule-divider{right:4rem}.cds--number__control-btn.down-icon:focus~.cds--number__rule-divider,.cds--number__control-btn.down-icon:hover~.cds--number__rule-divider,.cds--number__control-btn.up-icon:focus+.cds--number__rule-divider,.cds--number__control-btn.up-icon:hover+.cds--number__rule-divider{background-color:transparent}.cds--number__invalid--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--number__invalid--warning path:first-of-type{fill:#000;opacity:1}.cds--number--light input[type=number]{background-color:var(--cds-field-02,#fff)}.cds--number--light input[type=number]:disabled{background-color:var(--cds-field-02,#fff)}.cds--number--light .cds--number__control-btn::after,.cds--number--light .cds--number__control-btn::before{background-color:var(--cds-field-02,#fff)}.cds--number--light .cds--number__control-btn:focus::after,.cds--number--light .cds--number__control-btn:focus::before{background-color:transparent}.cds--number--light .cds--number__control-btn:hover,.cds--number--light .cds--number__control-btn:not(:focus):hover::after,.cds--number--light .cds--number__control-btn:not(:focus):hover::before{background-color:var(--cds-layer-hover-02,#e8e8e8)}.cds--number--lg input[type=number]{height:3rem}.cds--number--lg .cds--number__controls{width:6rem}.cds--number--lg .cds--number__control-btn{width:3rem}.cds--number--lg .cds--number__control-btn::after,.cds--number--lg .cds--number__control-btn::before{height:2.75rem}.cds--number--sm input[type=number]{height:2rem}.cds--number--sm .cds--number__controls{width:4rem}.cds--number--sm .cds--number__control-btn{width:2rem}.cds--number--sm .cds--number__control-btn::after,.cds--number--sm .cds--number__control-btn::before{height:1.75rem}.cds--number--nolabel .cds--label+.cds--form__helper-text{margin-top:0}.cds--number--nosteppers input[type=number]{padding-right:3rem}.cds--number--nosteppers .cds--number__invalid{right:1rem}.cds--number--readonly input[type=number]{background:0 0}.cds--number--readonly .cds--number__control-btn{color:var(--cds-icon-disabled,rgba(22,22,22,.25));pointer-events:none}.cds--number--readonly .cds--number__control-btn:hover{background-color:transparent;cursor:pointer}.cds--number--readonly .cds--number__control-btn:hover::after,.cds--number--readonly .cds--number__control-btn:hover::before{background-color:transparent}.cds--number--readonly input[type=number]:focus~.cds--number__controls .cds--number__control-btn:hover{outline:0}.cds--number--readonly .cds--number__control-btn::after,.cds--number--readonly .cds--number__control-btn::before{background:0 0}.cds--number--readonly .cds--number__controls:hover .cds--number__rule-divider:not(:first-of-type){background-color:var(--cds-border-subtle)}.cds--number.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:100%;height:2.5rem}.cds--number.cds--skeleton:active,.cds--number.cds--skeleton:focus,.cds--number.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--number.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--number.cds--skeleton::before{animation:none}}.cds--number.cds--skeleton input[type=number]{display:none}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--number__control-btn:focus,.cds--number__control-btn:hover{color:Highlight;outline:1px solid Highlight}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--number__control-btn{outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--number__control-btn svg{fill:ButtonText}}:host(cds-number-input),:host(cds-number-input-skeleton){width:100%;outline:0}:host(cds-number-input) .cds--form-requirement[hidden],:host(cds-number-input-skeleton) .cds--form-requirement[hidden]{display:none}",
+  "@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:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}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;left:.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;left:.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 2.5rem .5rem 1rem;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--number{position:relative;display:flex;width:100%;flex-direction:column}.cds--number html{font-size:100%}.cds--number 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--number code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--number strong{font-weight:600}.cds--number input[type=number]{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;display:inline-flex;width:100%;min-width:9.375rem;height:2.5rem;box-sizing:border-box;padding-right:8rem;padding-left:1rem;border:0;border-bottom:.0625rem solid var(--cds-border-strong);-moz-appearance:textfield;background-color:var(--cds-field);border-radius:0;color:var(--cds-text-primary,#161616);font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;font-weight:400;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--number input[type=number]:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--number input[type=number]:focus{outline-style:dotted}}.cds--number input[type=number]:disabled~.cds--number__controls{cursor:not-allowed;pointer-events:none}.cds--number input[type=number]:disabled~.cds--number__controls svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--number input[type=number]::-ms-clear{display:none}.cds--number input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none}.cds--number--lg.cds--number input[type=number]{padding-right:9rem}.cds--number--sm.cds--number input[type=number]{padding-right:7rem}.cds--number input[type=number]:disabled{border-bottom-color:transparent;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--number__input-wrapper{position:relative;display:flex;align-items:center}.cds--number__controls{position:absolute;top:50%;right:0;display:flex;width:5rem;height:100%;flex-direction:row;align-items:center;justify-content:center;transform:translateY(-50%)}.cds--number__controls html{font-size:100%}.cds--number__controls 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--number__controls code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--number__controls strong{font-weight:600}.cds--number__control-btn{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%;position:relative;display:inline-flex;height:100%;align-items:center;justify-content:center;border-bottom:.0625rem solid var(--cds-border-strong);color:var(--cds-icon-primary,#161616)}.cds--number__control-btn *,.cds--number__control-btn ::after,.cds--number__control-btn ::before{box-sizing:inherit}.cds--number__control-btn::-moz-focus-inner{border:0}.cds--number__control-btn::after,.cds--number__control-btn::before{position:absolute;top:.125rem;display:block;width:.125rem;height:2.25rem;background-color:var(--cds-field);content:\"\"}.cds--number__control-btn::before{left:0}.cds--number__control-btn::after{right:0}.cds--number__control-btn svg{fill:currentColor}.cds--number__control-btn:focus{outline:1px solid var(--cds-focus,#0f62fe);color:var(--cds-icon-primary,#161616);outline-offset:-2px;outline-width:2px}@media screen and (prefers-contrast){.cds--number__control-btn:focus{outline-style:dotted}}.cds--number__control-btn:hover{background-color:var(--cds-field-hover);color:var(--cds-icon-primary,#161616);cursor:pointer}.cds--number__control-btn:hover::after,.cds--number__control-btn:hover::before{background-color:var(--cds-field-hover)}.cds--number__control-btn:focus::after,.cds--number__control-btn:focus::before,.cds--number__control-btn:hover:focus::after,.cds--number__control-btn:hover:focus::before{background-color:transparent}.cds--number__control-btn:disabled{border-bottom-color:transparent;color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--number__control-btn.down-icon{order:1}.cds--number__control-btn.up-icon{order:2}.cds--number input[type=number]:focus~.cds--number__controls .cds--number__control-btn{border-bottom-color:transparent}.cds--number input[type=number]:focus~.cds--number__controls .cds--number__control-btn:hover{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--number input[type=number]:focus~.cds--number__controls .cds--number__control-btn:hover{outline-style:dotted}}.cds--number input[type=number][data-invalid]~.cds--number__controls .cds--number__control-btn{border-bottom-color:transparent}.cds--number input[type=number][data-invalid]:not(:focus)~.cds--number__controls .cds--number__control-btn:hover{outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--number input[type=number][data-invalid]:not(:focus)~.cds--number__controls .cds--number__control-btn:hover{outline-style:dotted}}.cds--number input[type=number]:focus~.cds--number__controls .cds--number__control-btn.up-icon::after{background-color:transparent}.cds--number input[type=number][data-invalid]~.cds--number__controls .cds--number__control-btn.up-icon::after{background-color:var(--cds-support-error,#da1e28)}.cds--number input[type=number][data-invalid]:focus~.cds--number__controls .cds--number__control-btn.up-icon::after,.cds--number input[type=number][data-invalid]~.cds--number__controls .cds--number__control-btn.up-icon:focus::after{background-color:var(--cds-focus,#0f62fe)}.cds--number__rule-divider{position:absolute;z-index:6000;width:.0625rem;height:1rem;background-color:var(--cds-border-subtle)}.cds--number__rule-divider:first-of-type{order:0}.cds--number__controls .cds--number__rule-divider:first-of-type{left:0;background-color:transparent}.cds--number__invalid+.cds--number__controls .cds--number__rule-divider:first-of-type{background-color:var(--cds-border-subtle)}.cds--number--light .cds--number__invalid+.cds--number__controls .cds--number__rule-divider:first-of-type,.cds--number--light .cds--number__rule-divider{background-color:var(--cds-border-subtle-02,#e0e0e0)}.cds--number input[type=number]:disabled+.cds--number__controls .cds--number__rule-divider:first-of-type{background-color:transparent}.cds--number input[type=number]:disabled+.cds--number__controls .cds--number__rule-divider{background-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--number__control-btn:focus~.cds--number__rule-divider{background-color:transparent}.cds--number__invalid{position:absolute;right:6rem;fill:var(--cds-support-error,#da1e28)}.cds--number--lg .cds--number__invalid{right:7rem}.cds--number--sm .cds--number__invalid{right:5rem}.cds--number__invalid+.cds--number__rule-divider{position:absolute;right:5rem}.cds--number--lg .cds--number__invalid+.cds--number__rule-divider{right:6rem}.cds--number--sm .cds--number__invalid+.cds--number__rule-divider{right:4rem}.cds--number__control-btn.down-icon:focus~.cds--number__rule-divider,.cds--number__control-btn.down-icon:hover~.cds--number__rule-divider,.cds--number__control-btn.up-icon:focus+.cds--number__rule-divider,.cds--number__control-btn.up-icon:hover+.cds--number__rule-divider{background-color:transparent}.cds--number__invalid--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--number__invalid--warning path:first-of-type{fill:#000;opacity:1}.cds--number--light input[type=number]{background-color:var(--cds-field-02,#fff)}.cds--number--light input[type=number]:disabled{background-color:var(--cds-field-02,#fff)}.cds--number--light .cds--number__control-btn::after,.cds--number--light .cds--number__control-btn::before{background-color:var(--cds-field-02,#fff)}.cds--number--light .cds--number__control-btn:focus::after,.cds--number--light .cds--number__control-btn:focus::before{background-color:transparent}.cds--number--light .cds--number__control-btn:hover,.cds--number--light .cds--number__control-btn:not(:focus):hover::after,.cds--number--light .cds--number__control-btn:not(:focus):hover::before{background-color:var(--cds-layer-hover-02,#e8e8e8)}.cds--number--lg input[type=number]{height:3rem}.cds--number--lg .cds--number__controls{width:6rem}.cds--number--lg .cds--number__control-btn{width:3rem}.cds--number--lg .cds--number__control-btn::after,.cds--number--lg .cds--number__control-btn::before{height:2.75rem}.cds--number--sm input[type=number]{height:2rem}.cds--number--sm .cds--number__controls{width:4rem}.cds--number--sm .cds--number__control-btn{width:2rem}.cds--number--sm .cds--number__control-btn::after,.cds--number--sm .cds--number__control-btn::before{height:1.75rem}.cds--number--nolabel .cds--label+.cds--form__helper-text{margin-top:0}.cds--number--nosteppers input[type=number]{padding-right:3rem}.cds--number--nosteppers .cds--number__invalid{right:1rem}.cds--number--readonly input[type=number]{border-bottom-color:var(--cds-border-subtle);background:0 0}.cds--number--readonly .cds--number__control-btn{color:var(--cds-icon-disabled,rgba(22,22,22,.25));pointer-events:none}.cds--number--readonly .cds--number__control-btn:hover{background-color:transparent;cursor:pointer}.cds--number--readonly .cds--number__control-btn:hover::after,.cds--number--readonly .cds--number__control-btn:hover::before{background-color:transparent}.cds--number--readonly input[type=number]:focus~.cds--number__controls .cds--number__control-btn:hover{outline:0}.cds--number--readonly .cds--number__control-btn::after,.cds--number--readonly .cds--number__control-btn::before{background:0 0}.cds--number--readonly .cds--number__controls:hover .cds--number__rule-divider:not(:first-of-type){background-color:var(--cds-border-subtle)}.cds--number.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:100%;height:2.5rem}.cds--number.cds--skeleton:active,.cds--number.cds--skeleton:focus,.cds--number.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--number.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--number.cds--skeleton::before{animation:none}}.cds--number.cds--skeleton input[type=number]{display:none}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--number__control-btn:focus,.cds--number__control-btn:hover{color:Highlight;outline:1px solid Highlight}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--number__control-btn{outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--number__control-btn svg{fill:ButtonText}}:host(cds-number-input),:host(cds-number-input-skeleton){width:100%;outline:0}:host(cds-number-input) .cds--form-requirement[hidden],:host(cds-number-input-skeleton) .cds--form-requirement[hidden]{display:none}.cds--number .cds--number__invalid~input[type=number]:disabled+.cds--number__controls .cds--number__rule-divider:first-of-type,.cds--number__invalid~.cds--number__controls .cds--number__rule-divider:first-of-type{background-color:var(--cds-border-subtle)}",
 ]);

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

@@ -6,9 +6,9 @@
  * 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 { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS } from './defs';
-import BXInput, { INPUT_SIZE } from '../input/input';
-export { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS };
+import { NUMBER_INPUT_VALIDATION_STATUS } from './defs';
+import CDSTextInput, { INPUT_SIZE } from '../text-input/text-input';
+export { NUMBER_INPUT_VALIDATION_STATUS };
 /**
  * Number input.
  *
@@ -17,7 +17,7 @@ export { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS };
  * @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 BXNumberInput extends BXInput {
+declare class CDSNumberInput extends CDSTextInput {
     /**
      * Handles `input` event on the `<input>` in the shadow DOM.
      */
@@ -34,15 +34,10 @@ declare class BXNumberInput extends BXInput {
      * The underlying input element
      */
     protected _input: HTMLInputElement;
-    _testValidity(): string;
-    _getValidityMessage(state: string): any;
+    _getInputValidity(): boolean;
     protected _min: string;
     protected _max: string;
     protected _step: string;
-    /**
-     * The color scheme.
-     */
-    colorScheme: NUMBER_INPUT_COLOR_SCHEME;
     /**
      * The minimum value allowed in the input
      */
@@ -58,10 +53,6 @@ declare class BXNumberInput extends BXInput {
      */
     get step(): string;
     set step(value: string);
-    /**
-     * Set to `true` to enable the mobile variant of the number input
-     */
-    mobile: boolean;
     /**
      * Aria text for the button that increments the value
      */
@@ -71,21 +62,17 @@ declare class BXNumberInput extends BXInput {
      */
     decrementButtonAssistiveText: string;
     /**
-     * The input box size.
+     * Specify whether you want the steppers to be hidden
      */
-    size: INPUT_SIZE;
+    hideSteppers: boolean;
     /**
-     * The validity message shown when the value is greater than the maximum
-     *
-     * Also available via the `validity-message-max` slot
+     * `true` to allow empty string.
      */
-    validityMessageMax: string;
+    allowEmpty: boolean;
     /**
-     * The validity message shown when the value is less than the minimum
-     *
-     * Also available via the `validity-message-min` slot
+     * The input box size.
      */
-    validityMessageMin: string;
+    size: INPUT_SIZE;
     /**
      * Handles incrementing the value in the input
      */
@@ -106,6 +93,6 @@ declare class BXNumberInput extends BXInput {
     };
     static styles: any;
 }
-export default BXNumberInput;
+export default CDSNumberInput;
 
 //# sourceMappingURL=number-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/number-input/number-input.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAUH,OAAO,EACL,yBAAyB,EACzB,8BAA8B,EAC/B,MAAM,QAAQ,CAAC;AAEhB,OAAO,OAAO,EAAE,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,yBAAyB,EAAE,8BAA8B,EAAE,CAAC;AAErE;;;;;;;GAOG;AACH,cACM,aAAc,SAAQ,OAAO;IACjC;;OAEG;IACH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;IAgBnC;;OAEG;IAEH,SAAS,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK;IAe/C;;OAEG;IAEH,SAAS,CAAC,0BAA0B,CAAC,CAAC,EAAE,KAAK;IAe7C;;OAEG;IAEH,SAAS,CAAC,MAAM,EAAG,gBAAgB,CAAC;IAEpC,aAAa;IAUb,mBAAmB,CAAC,KAAK,EAAE,MAAM;IAiBjC,SAAS,CAAC,IAAI,SAAM;IAEpB,SAAS,CAAC,IAAI,SAAM;IAEpB,SAAS,CAAC,KAAK,SAAO;IAEtB;;OAEG;IAEH,WAAW,4BAAqC;IAEhD;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,IAAI,WAEP;IAED,IAAI,IAAI,CAAC,KAAK,QAAA,EAIb;IAED;;OAEG;IAEH,MAAM,UAAS;IAEf;;OAEG;IAEH,4BAA4B,SAA2B;IAEvD;;OAEG;IAEH,4BAA4B,SAA2B;IAEvD;;OAEG;IAEH,IAAI,aAAsB;IAE1B;;;;OAIG;IAEH,kBAAkB,SAAM;IAExB;;;;OAIG;IAEH,kBAAkB,SAAM;IAExB;;OAEG;IACH,MAAM;IAIN;;OAEG;IACH,QAAQ;IAIR,MAAM;IA2HN;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"number-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 WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport CaretUp16 from '@carbon/icons/lib/caret--up/16';\nimport CaretDown16 from '@carbon/icons/lib/caret--down/16';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport {\n  NUMBER_INPUT_COLOR_SCHEME,\n  NUMBER_INPUT_VALIDATION_STATUS,\n} from './defs';\nimport styles from './number-input.scss';\nimport BXInput, { INPUT_SIZE } from '../input/input';\n\nexport { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS };\n\n/**\n * Number input.\n *\n * @element cds-number-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}-number-input`)\nclass BXNumberInput extends BXInput {\n  /**\n   * Handles `input` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleInput(event: Event) {\n    const { target } = event;\n    const { value } = target as HTMLInputElement;\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value,\n        },\n      })\n    );\n    super._handleInput(event);\n  }\n\n  /**\n   * Handles `click` event on the up button in the shadow DOM.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleUserInitiatedStepDown(_: Event) {\n    const { _input: input } = this;\n    this.stepDown();\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: input.value,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `click` event on the down button in the shadow DOM.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleUserInitiatedStepUp(_: Event) {\n    const { _input: input } = this;\n    this.stepUp();\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: input.value,\n        },\n      })\n    );\n  }\n\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\n\n  _testValidity() {\n    if (this._input?.valueAsNumber > Number(this.max)) {\n      return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM;\n    }\n    if (this._input?.valueAsNumber < Number(this.min)) {\n      return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;\n    }\n    return super._testValidity();\n  }\n\n  _getValidityMessage(state: string) {\n    if (\n      Object.values(NUMBER_INPUT_VALIDATION_STATUS).includes(\n        state as NUMBER_INPUT_VALIDATION_STATUS\n      )\n    ) {\n      const stateMessageMap = {\n        [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM]:\n          this.validityMessageMax,\n        [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM]:\n          this.validityMessageMin,\n      };\n      return stateMessageMap[state];\n    }\n    return super._getValidityMessage(state);\n  }\n\n  protected _min = '';\n\n  protected _max = '';\n\n  protected _step = '1';\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = NUMBER_INPUT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * The minimum value allowed in the input\n   */\n  @property({ reflect: true })\n  get min() {\n    return this._min.toString();\n  }\n\n  set min(value) {\n    const oldValue = this.min;\n    this._min = value;\n    this.requestUpdate('min', oldValue);\n  }\n\n  /**\n   * The maximum value allowed in the input\n   */\n  @property({ reflect: true })\n  get max() {\n    return this._max.toString();\n  }\n\n  set max(value) {\n    const oldValue = this.max;\n    this._max = value;\n    this.requestUpdate('max', oldValue);\n  }\n\n  /**\n   * The amount the value should increase or decrease by\n   */\n  @property({ reflect: true })\n  get step() {\n    return this._step.toString();\n  }\n\n  set step(value) {\n    const oldValue = this.step;\n    this._step = value;\n    this.requestUpdate('step', oldValue);\n  }\n\n  /**\n   * Set to `true` to enable the mobile variant of the number input\n   */\n  @property({ type: Boolean, reflect: true })\n  mobile = false;\n\n  /**\n   * Aria text for the button that increments the value\n   */\n  @property({ attribute: 'increment-button-assistive-text' })\n  incrementButtonAssistiveText = 'increase number input';\n\n  /**\n   * Aria text for the button that decrements the value\n   */\n  @property({ attribute: 'decrement-button-assistive-text' })\n  decrementButtonAssistiveText = 'decrease number input';\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.REGULAR;\n\n  /**\n   * The validity message shown when the value is greater than the maximum\n   *\n   * Also available via the `validity-message-max` slot\n   */\n  @property({ attribute: 'validity-message-max' })\n  validityMessageMax = '';\n\n  /**\n   * The validity message shown when the value is less than the minimum\n   *\n   * Also available via the `validity-message-min` slot\n   */\n  @property({ attribute: 'validity-message-min' })\n  validityMessageMin = '';\n\n  /**\n   * Handles incrementing the value in the input\n   */\n  stepUp() {\n    this._input.stepUp();\n  }\n\n  /**\n   * Handles decrementing the value in the input\n   */\n  stepDown() {\n    this._input.stepDown();\n  }\n\n  render() {\n    const {\n      _handleInput: handleInput,\n      _handleUserInitiatedStepDown: handleUserInitiatedStepDown,\n      _handleUserInitiatedStepUp: handleUserInitiatedStepUp,\n    } = this;\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--number__invalid`,\n    });\n\n    const validity = this._testValidity();\n\n    const isGenericallyInvalid = () =>\n      this.invalid &&\n      validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM &&\n      validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;\n\n    const wrapperClasses = classMap({\n      [`${prefix}--number`]: true,\n      [`${prefix}--number--${this.colorScheme}`]: this.colorScheme,\n      [`${prefix}--number--mobile`]: this.mobile,\n      [`${prefix}--number--${this.size}`]: this.size,\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 incrementButton = html`\n      <button\n        class=\"${prefix}--number__control-btn up-icon\"\n        aria-label=\"${this.incrementButtonAssistiveText}\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        type=\"button\"\n        ?disabled=${this.disabled}\n        @click=${handleUserInitiatedStepUp}>\n        ${CaretUp16()}\n      </button>\n    `;\n    const decrementButton = html`\n      <button\n        class=\"${prefix}--number__control-btn down-icon\"\n        aria-label=\"${this.decrementButtonAssistiveText}\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        type=\"button\"\n        ?disabled=${this.disabled}\n        @click=${handleUserInitiatedStepDown}>\n        ${CaretDown16()}\n      </button>\n    `;\n\n    const input = html`\n      <input\n        ?autocomplete=\"${this.autocomplete}\"\n        ?autofocus=\"${this.autofocus}\"\n        ?data-invalid=\"${this.invalid}\"\n        ?disabled=\"${this.disabled}\"\n        id=\"input\"\n        name=\"${ifNonEmpty(this.name)}\"\n        pattern=\"${ifNonEmpty(this.pattern)}\"\n        placeholder=\"${ifNonEmpty(this.placeholder)}\"\n        ?readonly=\"${this.readonly}\"\n        ?required=\"${this.required}\"\n        type=\"number\"\n        .value=\"${this._value}\"\n        @input=\"${handleInput}\"\n        min=\"${ifNonEmpty(this.min)}\"\n        max=\"${ifNonEmpty(this.max)}\"\n        step=\"${ifNonEmpty(this.step)}\"\n        role=\"alert\"\n        aria-atomic=\"true\" />\n    `;\n\n    const defaultLayout = html`\n      ${this.invalid ? invalidIcon : null} ${input}\n      <div class=\"${prefix}--number__controls\">\n        ${incrementButton} ${decrementButton}\n      </div>\n    `;\n\n    const mobileLayout = html` ${decrementButton} ${input} ${incrementButton} `;\n\n    return html`\n      <div class=\"${wrapperClasses}\" ?data-invalid=${this.invalid}>\n        <label class=\"${labelClasses}\" for=\"input\">\n          <slot name=\"label-text\"> ${this.labelText} </slot>\n        </label>\n        <div class=\"${prefix}--number__input-wrapper\">\n          ${this.mobile ? mobileLayout : defaultLayout}\n        </div>\n        <div class=\"${helperTextClasses}\">\n          <slot name=\"helper-text\"> ${this.helperText} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${!isGenericallyInvalid()}\">\n          <slot name=\"validity-message\"> ${this.validityMessage} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${validity !==\n          NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM}\">\n          <slot name=\"validity-message-max\"> ${this.validityMessageMax} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${validity !==\n          NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM}\">\n          <slot name=\"validity-message-min\"> ${this.validityMessageMin} </slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed upon a user gesture.\n   */\n  static get eventInput() {\n    return `${prefix}-number-input`;\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 BXNumberInput;\n"]}
+{"version":3,"sources":["components/number-input/number-input.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAWH,OAAO,EAAE,8BAA8B,EAAE,MAAM,QAAQ,CAAC;AAExD,OAAO,YAAY,EAAE,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAEpE,OAAO,EAAE,8BAA8B,EAAE,CAAC;AAE1C;;;;;;;GAOG;AACH,cACM,cAAe,SAAQ,YAAY;IACvC;;OAEG;IACH,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;IAgBnC;;OAEG;IAEH,SAAS,CAAC,4BAA4B,CAAC,CAAC,EAAE,KAAK;IAe/C;;OAEG;IAEH,SAAS,CAAC,0BAA0B,CAAC,CAAC,EAAE,KAAK;IAe7C;;OAEG;IAEH,SAAS,CAAC,MAAM,EAAG,gBAAgB,CAAC;IAEpC,iBAAiB;IAgBjB,SAAS,CAAC,IAAI,SAAM;IAEpB,SAAS,CAAC,IAAI,SAAM;IAEpB,SAAS,CAAC,KAAK,SAAO;IAEtB;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,GAAG,WAEN;IAED,IAAI,GAAG,CAAC,KAAK,QAAA,EAIZ;IAED;;OAEG;IACH,IACI,IAAI,WAEP;IAED,IAAI,IAAI,CAAC,KAAK,QAAA,EAIb;IAED;;OAEG;IAEH,4BAA4B,SAA2B;IAEvD;;OAEG;IAEH,4BAA4B,SAA2B;IAEvD;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,UAAU,UAAS;IAEnB;;OAEG;IAEH,IAAI,aAAqB;IAEzB;;OAEG;IACH,MAAM;IAIN;;OAEG;IACH,QAAQ;IAIR,MAAM;IAwIN;;OAEG;IACH,MAAM,KAAK,UAAU,WAEpB;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"number-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 WarningFilled16 from '@carbon/icons/lib/warning--filled/16';\nimport WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';\nimport Add16 from '@carbon/icons/lib/add/16';\nimport Subtract16 from '@carbon/icons/lib/subtract/16';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport { NUMBER_INPUT_VALIDATION_STATUS } from './defs';\nimport styles from './number-input.scss';\nimport CDSTextInput, { INPUT_SIZE } from '../text-input/text-input';\n\nexport { NUMBER_INPUT_VALIDATION_STATUS };\n\n/**\n * Number input.\n *\n * @element cds-number-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}-number-input`)\nclass CDSNumberInput extends CDSTextInput {\n  /**\n   * Handles `input` event on the `<input>` in the shadow DOM.\n   */\n  protected _handleInput(event: Event) {\n    const { target } = event;\n    const { value } = target as HTMLInputElement;\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof CDSNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value,\n        },\n      })\n    );\n    super._handleInput(event);\n  }\n\n  /**\n   * Handles `click` event on the up button in the shadow DOM.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleUserInitiatedStepDown(_: Event) {\n    const { _input: input } = this;\n    this.stepDown();\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof CDSNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: input.value,\n        },\n      })\n    );\n  }\n\n  /**\n   * Handles `click` event on the down button in the shadow DOM.\n   */\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleUserInitiatedStepUp(_: Event) {\n    const { _input: input } = this;\n    this.stepUp();\n    this.dispatchEvent(\n      new CustomEvent((this.constructor as typeof CDSNumberInput).eventInput, {\n        bubbles: true,\n        composed: true,\n        cancelable: false,\n        detail: {\n          value: input.value,\n        },\n      })\n    );\n  }\n\n  /**\n   * The underlying input element\n   */\n  @query('input')\n  protected _input!: HTMLInputElement;\n\n  _getInputValidity() {\n    if (this.invalid) {\n      return false;\n    }\n    if (\n      this._input?.valueAsNumber > Number(this.max) ||\n      this._input?.valueAsNumber < Number(this.min)\n    ) {\n      return false;\n    }\n    if (this.value === '') {\n      return this.allowEmpty;\n    }\n    return true;\n  }\n\n  protected _min = '';\n\n  protected _max = '';\n\n  protected _step = '1';\n\n  /**\n   * The minimum value allowed in the input\n   */\n  @property({ reflect: true })\n  get min() {\n    return this._min.toString();\n  }\n\n  set min(value) {\n    const oldValue = this.min;\n    this._min = value;\n    this.requestUpdate('min', oldValue);\n  }\n\n  /**\n   * The maximum value allowed in the input\n   */\n  @property({ reflect: true })\n  get max() {\n    return this._max.toString();\n  }\n\n  set max(value) {\n    const oldValue = this.max;\n    this._max = value;\n    this.requestUpdate('max', oldValue);\n  }\n\n  /**\n   * The amount the value should increase or decrease by\n   */\n  @property({ reflect: true })\n  get step() {\n    return this._step.toString();\n  }\n\n  set step(value) {\n    const oldValue = this.step;\n    this._step = value;\n    this.requestUpdate('step', oldValue);\n  }\n\n  /**\n   * Aria text for the button that increments the value\n   */\n  @property({ attribute: 'increment-button-assistive-text' })\n  incrementButtonAssistiveText = 'increase number input';\n\n  /**\n   * Aria text for the button that decrements the value\n   */\n  @property({ attribute: 'decrement-button-assistive-text' })\n  decrementButtonAssistiveText = 'decrease number input';\n\n  /**\n   * Specify whether you want the steppers to be hidden\n   */\n  @property({ type: Boolean, attribute: 'hide-steppers', reflect: true })\n  hideSteppers = false;\n\n  /**\n   * `true` to allow empty string.\n   */\n  @property({ type: Boolean, attribute: 'allow-empty', reflect: true })\n  allowEmpty = false;\n\n  /**\n   * The input box size.\n   */\n  @property({ reflect: true })\n  size = INPUT_SIZE.MEDIUM;\n\n  /**\n   * Handles incrementing the value in the input\n   */\n  stepUp() {\n    this._input.stepUp();\n  }\n\n  /**\n   * Handles decrementing the value in the input\n   */\n  stepDown() {\n    this._input.stepDown();\n  }\n\n  render() {\n    const {\n      _handleInput: handleInput,\n      _handleUserInitiatedStepDown: handleUserInitiatedStepDown,\n      _handleUserInitiatedStepUp: handleUserInitiatedStepUp,\n    } = this;\n\n    const isValid = this._getInputValidity();\n\n    const invalidIcon = WarningFilled16({\n      class: `${prefix}--number__invalid`,\n    });\n\n    const warnIcon = WarningAltFilled16({\n      class: `${prefix}--number__invalid ${prefix}--number__invalid--warning`,\n    });\n\n    let normalizedProps = {\n      disabled: !this.readonly && this.disabled,\n      invalid: !this.readonly && !isValid,\n      warn: !this.readonly && isValid && this.warn,\n      'slot-name': '',\n      'slot-text': '',\n      icon: null,\n    };\n\n    const wrapperClasses = classMap({\n      [`${prefix}--number`]: true,\n      [`${prefix}--number--${this.size}`]: this.size,\n      [`${prefix}--number--nosteppers`]: this.hideSteppers,\n      [`${prefix}--number--readonly`]: this.readonly,\n    });\n\n    const inputWrapperClasses = classMap({\n      [`${prefix}--number__input-wrapper`]: true,\n      [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn,\n    });\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--label--disabled`]: normalizedProps.disabled,\n      [`${prefix}--visually-hidden`]: this.hideLabel,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,\n    });\n\n    const incrementButton = html`\n      <button\n        class=\"${prefix}--number__control-btn up-icon\"\n        aria-label=\"${this.incrementButtonAssistiveText}\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        type=\"button\"\n        ?disabled=${normalizedProps.disabled}\n        @click=${handleUserInitiatedStepUp}>\n        ${Add16()}\n      </button>\n      <div class=\"${prefix}--number__rule-divider\"></div>\n    `;\n    const decrementButton = html`\n      <button\n        class=\"${prefix}--number__control-btn down-icon\"\n        aria-label=\"${this.decrementButtonAssistiveText}\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        type=\"button\"\n        ?disabled=${normalizedProps.disabled}\n        @click=${handleUserInitiatedStepDown}>\n        ${Subtract16()}\n      </button>\n      <div class=\"${prefix}--number__rule-divider\"></div>\n    `;\n\n    const input = html`\n      <input\n        ?autocomplete=\"${this.autocomplete}\"\n        ?autofocus=\"${this.autofocus}\"\n        ?data-invalid=\"${normalizedProps.invalid}\"\n        ?disabled=\"${normalizedProps.disabled}\"\n        id=\"input\"\n        name=\"${ifNonEmpty(this.name)}\"\n        pattern=\"${ifNonEmpty(this.pattern)}\"\n        ?readonly=\"${this.readonly}\"\n        ?required=\"${this.required}\"\n        type=\"number\"\n        .value=\"${this._value}\"\n        @input=\"${handleInput}\"\n        min=\"${ifNonEmpty(this.min)}\"\n        max=\"${ifNonEmpty(this.max)}\"\n        step=\"${ifNonEmpty(this.step)}\"\n        role=\"alert\"\n        aria-atomic=\"true\" />\n    `;\n\n    if (normalizedProps.invalid) {\n      normalizedProps.icon = invalidIcon;\n      normalizedProps['slot-name'] = 'invalid-text';\n      normalizedProps['slot-text'] = this.invalidText;\n    } else if (normalizedProps.warn) {\n      normalizedProps.icon = warnIcon;\n      normalizedProps['slot-name'] = 'warn-text';\n      normalizedProps['slot-text'] = this.warnText;\n    }\n\n    return html`\n      <div class=\"${wrapperClasses}\" ?data-invalid=${normalizedProps.invalid}>\n        <label class=\"${labelClasses}\" for=\"input\">\n          <slot name=\"label-text\"> ${this.label} </slot>\n        </label>\n        <div class=\"${inputWrapperClasses}\">\n          ${normalizedProps.icon} ${input}\n          <div class=\"${prefix}--number__controls\">\n            ${!this.hideSteppers\n              ? html`${decrementButton} ${incrementButton}`\n              : null}\n          </div>\n        </div>\n        <div\n          class=\"${helperTextClasses}\"\n          ?hidden=\"${normalizedProps.invalid || normalizedProps.warn}\">\n          <slot name=\"helper-text\"> ${this.helperText} </slot>\n        </div>\n        <div\n          class=\"${prefix}--form-requirement\"\n          ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n          <slot name=\"${normalizedProps['slot-name']}\">\n            ${normalizedProps['slot-text']}\n          </slot>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * The name of the custom event fired after the value is changed upon a user gesture.\n   */\n  static get eventInput() {\n    return `${prefix}-number-input`;\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 CDSNumberInput;\n"]}