npm - @carbon/web-components - Versions diffs - 2.0.0-beta.0 → 2.0.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (567) hide show

package/es/components/slider/slider.css.js CHANGED Viewed

@@ -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--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-right:2.5rem}.cds--text-input--sm.cds--password-input{padding-right:2rem}.cds--text-input--lg.cds--password-input{padding-right: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%;right: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:left;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:\"\";left: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;left: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;right: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-right:2.5rem}.cds--text-input--invalid.cds--password-input{padding-right:4rem}.cds--text-input--invalid+.cds--text-input--password__visibility__toggle{right:1rem}.cds--password-input-wrapper .cds--text-input__invalid-icon{right: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{right: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;left: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-right: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}.cds--slider-container{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--slider{position:relative;width:100%;min-width:12.5rem;max-width:40rem;padding:1rem 0;margin:0 1rem;cursor:pointer}.cds--slider__range-label{font-family:var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);font-size:var(--cds-code-02-font-size,.875rem);font-weight:var(--cds-code-02-font-weight,400);line-height:var(--cds-code-02-line-height,1.42857);letter-spacing:var(--cds-code-02-letter-spacing,.32px);color:var(--cds-text-primary,#161616);white-space:nowrap}.cds--slider__range-label:last-of-type{margin-right:1rem}.cds--slider__track{position:absolute;width:100%;height:.125rem;background:var(--cds-border-subtle);transform:translate(0,-50%)}.cds--slider__track:before{position:absolute;top:-.3125rem;left:50%;display:inline-block;width:.125rem;height:.25rem;background:var(--cds-border-subtle);content:\"\";transform:translate(-50%,0)}.cds--slider__filled-track{position:absolute;width:100%;height:.125rem;background:var(--cds-layer-selected-inverse,#161616);pointer-events:none;transform:translate(0,-50%);transform-origin:left;transition:background 110ms cubic-bezier(.2,0,.38,.9)}.cds--slider__thumb{position:absolute;z-index:3;width:.875rem;height:.875rem;background:var(--cds-layer-selected-inverse,#161616);border-radius:50%;box-shadow:inset 0 0 0 1px transparent,inset 0 0 0 2px transparent;outline:0;transform:translate(-50%,-50%);transition:transform 110ms cubic-bezier(.2,0,.38,.9),background 110ms cubic-bezier(.2,0,.38,.9),box-shadow 110ms cubic-bezier(.2,0,.38,.9)}.cds--slider__thumb:hover{transform:translate(-50%,-50%) scale(1.4286)}.cds--slider__thumb:focus{background-color:var(--cds-interactive,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-interactive,#0f62fe),inset 0 0 0 3px var(--cds-layer);transform:translate(-50%,-50%) scale(1.4286)}.cds--slider__thumb:active{box-shadow:inset 0 0 0 2px var(--cds-interactive,#0f62fe);transform:translate(-50%,-50%) scale(1.4286)}.cds--slider__input{display:none}.cds--slider-text-input,.cds-slider-text-input{width:4rem;height:2.5rem;-moz-appearance:textfield;text-align:center}.cds--slider-text-input::-webkit-inner-spin-button,.cds--slider-text-input::-webkit-outer-spin-button,.cds-slider-text-input::-webkit-inner-spin-button,.cds-slider-text-input::-webkit-outer-spin-button{display:none}.cds--slider-text-input--hidden{display:none}.cds--slider-text-input.cds--text-input--invalid{padding-right:1rem}.cds--slider__thumb:focus~.cds--slider__filled-track{background-color:var(--cds-interactive,#0f62fe)}.cds--label--disabled~.cds--slider-container>.cds--slider__range-label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--slider--disabled.cds--slider{cursor:not-allowed}.cds--slider--disabled .cds--slider__thumb{background-color:var(--cds-border-disabled,#c6c6c6)}.cds--slider--disabled .cds--slider__thumb:hover{cursor:not-allowed;transform:translate(-50%,-50%)}.cds--slider--disabled .cds--slider__thumb:focus{background-color:var(--cds-border-disabled,#c6c6c6);box-shadow:none;outline:0;transform:translate(-50%,-50%)}.cds--slider--disabled .cds--slider__thumb:active{background:var(--cds-border-disabled,#c6c6c6);transform:translate(-50%,-50%)}.cds--slider--disabled .cds--slider__filled-track,.cds--slider--disabled .cds--slider__thumb:focus~.cds--slider__filled-track,.cds--slider--disabled .cds--slider__track{background-color:var(--cds-border-disabled,#c6c6c6)}.cds--slider--disabled~.cds--form-item .cds--slider-text-input,.cds--slider--disabled~.cds--slider-text-input{border:none;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;transition:none}.cds--slider--disabled~.cds--form-item .cds--slider-text-input:active,.cds--slider--disabled~.cds--form-item .cds--slider-text-input:focus,.cds--slider--disabled~.cds--form-item .cds--slider-text-input:hover,.cds--slider--disabled~.cds--slider-text-input:active,.cds--slider--disabled~.cds--slider-text-input:focus,.cds--slider--disabled~.cds--slider-text-input:hover{color:var(--cds-text-disabled,rgba(22,22,22,.25));outline:0}.cds--slider--readonly{cursor:default}.cds--slider--readonly .cds--slider__thumb{width:0;height:0}.cds--slider--readonly~.cds--slider-text-input{background-color:transparent}.cds--slider-container.cds--skeleton .cds--slider__range-label{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:1.25rem;height:.75rem}.cds--slider-container.cds--skeleton .cds--slider__range-label:active,.cds--slider-container.cds--skeleton .cds--slider__range-label:focus,.cds--slider-container.cds--skeleton .cds--slider__range-label:hover{border:none;cursor:default;outline:0}.cds--slider-container.cds--skeleton .cds--slider__range-label::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--slider-container.cds--skeleton .cds--slider__range-label::before{animation:none}}.cds--slider-container.cds--skeleton .cds--slider__track{cursor:default;pointer-events:none}.cds--slider-container.cds--skeleton .cds--slider__thumb{left:50%;cursor:default;pointer-events:none}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--slider__thumb{outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--slider__thumb:focus{color:Highlight;outline:1px solid Highlight}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--slider__track{outline:1px solid transparent}}:host(cds-slider){outline:0}:host(cds-slider) .cds--slider{transform:rotate(0)}:host(cds-slider) .cds-ce--slider__filled-track-container{transform:rotate(0)}:host(cds-slider) .cds--slider__thumb{transform:translate(-50%,-50%)}:host(cds-slider) .cds--slider__thumb:focus~.cds-ce--slider__filled-track-container .cds--slider__filled-track{background-color:var(--cds-interactive,#0f62fe)}:host(cds-slider-input){outline:0}",
+  "@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin: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--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-right:2.5rem}.cds--text-input--sm.cds--password-input{padding-right:2rem}.cds--text-input--lg.cds--password-input{padding-right: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%;right: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:left;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:\"\";left: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;left: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;right: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-right:2.5rem}.cds--text-input--invalid.cds--password-input{padding-right:4rem}.cds--text-input--invalid+.cds--text-input--password__visibility__toggle{right:1rem}.cds--password-input-wrapper .cds--text-input__invalid-icon{right: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{right: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;left: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-right: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{border-bottom-color:var(--cds-border-subtle);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}.cds--slider-container{display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--slider{position:relative;width:100%;min-width:12.5rem;max-width:40rem;padding:1rem 0;margin:0 1rem;cursor:pointer}.cds--slider__range-label{font-family:var(--cds-code-02-font-family, 'IBM Plex Mono', system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', monospace);font-size:var(--cds-code-02-font-size,.875rem);font-weight:var(--cds-code-02-font-weight,400);line-height:var(--cds-code-02-line-height,1.42857);letter-spacing:var(--cds-code-02-letter-spacing,.32px);color:var(--cds-text-primary,#161616);white-space:nowrap}.cds--slider__range-label:last-of-type{margin-right:1rem}.cds--slider__track{position:absolute;width:100%;height:.125rem;background:var(--cds-border-subtle);transform:translate(0,-50%)}.cds--slider__track:before{position:absolute;top:-.3125rem;left:50%;display:inline-block;width:.125rem;height:.25rem;background:var(--cds-border-subtle);content:\"\";transform:translate(-50%,0)}.cds--slider__filled-track{position:absolute;width:100%;height:.125rem;background:var(--cds-layer-selected-inverse,#161616);pointer-events:none;transform:translate(0,-50%);transform-origin:left;transition:background 110ms cubic-bezier(.2,0,.38,.9)}.cds--slider__thumb{position:absolute;z-index:3;width:.875rem;height:.875rem;background:var(--cds-layer-selected-inverse,#161616);border-radius:50%;box-shadow:inset 0 0 0 1px transparent,inset 0 0 0 2px transparent;outline:0;transform:translate(-50%,-50%);transition:transform 110ms cubic-bezier(.2,0,.38,.9),background 110ms cubic-bezier(.2,0,.38,.9),box-shadow 110ms cubic-bezier(.2,0,.38,.9)}.cds--slider__thumb:hover{transform:translate(-50%,-50%) scale(1.4286)}.cds--slider__thumb:focus{background-color:var(--cds-interactive,#0f62fe);box-shadow:inset 0 0 0 2px var(--cds-interactive,#0f62fe),inset 0 0 0 3px var(--cds-layer);transform:translate(-50%,-50%) scale(1.4286)}.cds--slider__thumb:active{box-shadow:inset 0 0 0 2px var(--cds-interactive,#0f62fe);transform:translate(-50%,-50%) scale(1.4286)}.cds--slider__input{display:none}.cds--slider-text-input,.cds-slider-text-input{width:4rem;height:2.5rem;-moz-appearance:textfield;text-align:center}.cds--slider-text-input::-webkit-inner-spin-button,.cds--slider-text-input::-webkit-outer-spin-button,.cds-slider-text-input::-webkit-inner-spin-button,.cds-slider-text-input::-webkit-outer-spin-button{display:none}.cds--slider-text-input--hidden{display:none}.cds--slider-text-input.cds--text-input--invalid{padding-right:1rem}.cds--slider__thumb:focus~.cds--slider__filled-track{background-color:var(--cds-interactive,#0f62fe)}.cds--label--disabled~.cds--slider-container>.cds--slider__range-label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--slider--disabled.cds--slider{cursor:not-allowed}.cds--slider--disabled .cds--slider__thumb{background-color:var(--cds-border-disabled,#c6c6c6)}.cds--slider--disabled .cds--slider__thumb:hover{cursor:not-allowed;transform:translate(-50%,-50%)}.cds--slider--disabled .cds--slider__thumb:focus{background-color:var(--cds-border-disabled,#c6c6c6);box-shadow:none;outline:0;transform:translate(-50%,-50%)}.cds--slider--disabled .cds--slider__thumb:active{background:var(--cds-border-disabled,#c6c6c6);transform:translate(-50%,-50%)}.cds--slider--disabled .cds--slider__filled-track,.cds--slider--disabled .cds--slider__thumb:focus~.cds--slider__filled-track,.cds--slider--disabled .cds--slider__track{background-color:var(--cds-border-disabled,#c6c6c6)}.cds--slider--disabled~.cds--form-item .cds--slider-text-input,.cds--slider--disabled~.cds--slider-text-input{border:none;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;transition:none}.cds--slider--disabled~.cds--form-item .cds--slider-text-input:active,.cds--slider--disabled~.cds--form-item .cds--slider-text-input:focus,.cds--slider--disabled~.cds--form-item .cds--slider-text-input:hover,.cds--slider--disabled~.cds--slider-text-input:active,.cds--slider--disabled~.cds--slider-text-input:focus,.cds--slider--disabled~.cds--slider-text-input:hover{color:var(--cds-text-disabled,rgba(22,22,22,.25));outline:0}.cds--slider--readonly{cursor:default}.cds--slider--readonly .cds--slider__thumb{width:0;height:0}.cds--slider--readonly~.cds--slider-text-input{background-color:transparent}.cds--slider-container.cds--skeleton .cds--slider__range-label{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:1.25rem;height:.75rem}.cds--slider-container.cds--skeleton .cds--slider__range-label:active,.cds--slider-container.cds--skeleton .cds--slider__range-label:focus,.cds--slider-container.cds--skeleton .cds--slider__range-label:hover{border:none;cursor:default;outline:0}.cds--slider-container.cds--skeleton .cds--slider__range-label::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--slider-container.cds--skeleton .cds--slider__range-label::before{animation:none}}.cds--slider-container.cds--skeleton .cds--slider__track{cursor:default;pointer-events:none}.cds--slider-container.cds--skeleton .cds--slider__thumb{left:50%;cursor:default;pointer-events:none}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--slider__thumb{outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--slider__thumb:focus{color:Highlight;outline:1px solid Highlight}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--slider__track{outline:1px solid transparent}}:host(cds-slider){outline:0}:host(cds-slider) .cds--slider{transform:rotate(0)}:host(cds-slider) .cds-ce--slider__filled-track-container{transform:rotate(0)}:host(cds-slider) .cds--slider__thumb{transform:translate(-50%,-50%)}:host(cds-slider) .cds--slider__thumb:focus~.cds-ce--slider__filled-track-container .cds--slider__filled-track{background-color:var(--cds-interactive,#0f62fe)}:host(cds-slider-input) input{box-sizing:border-box}:host(cds-slider-input)[readonly] input{background-color:transparent}",
 ]);

package/es/components/slider/slider.d.ts CHANGED Viewed

@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
-declare const BXSlider_base: {
+declare const CDSSlider_base: {
     new (...args: any[]): {
         _handles: Set<import("../../globals/internal/handle").default>;
         connectedCallback(): void;
@@ -321,7 +321,9 @@ declare const BXSlider_base: {
                 options?: boolean | AddEventListenerOptions | undefined;
             };
         };
-    };
+    }; /**
+     * Handles `click` event on the `<label>` to focus on the thumb.
+     */
 } & (abstract new (...args: any[]) => {
     _hFormdata: import("../../globals/internal/handle").default | null;
     _handleFormdata(event: Event): void;
@@ -944,7 +946,7 @@ declare const BXSlider_base: {
  * @slot min-text - The text for minimum value.
  * @fires cds-slider-changed - The custom event fired after the value is changed by user gesture.
  */
-declare class BXSlider extends BXSlider_base {
+declare class CDSSlider extends CDSSlider_base {
     /**
      * The internal value of `max` property.
      */
@@ -958,9 +960,9 @@ declare class BXSlider extends BXSlider_base {
      */
     private _step;
     /**
-     * The internal value of `stepRatio` property.
+     * The internal value of `stepMultiplier` property.
      */
-    private _stepRatio;
+    private _stepMultiplier;
     /**
      * The handle for the throttled listener of `pointermove` event.
      */
@@ -1025,23 +1027,35 @@ declare class BXSlider extends BXSlider_base {
      */
     disabled: boolean;
     /**
-     * The formatter for the text for maximum value.
-     * Should be changed upon the locale the UI is rendered with.
+     * 	true to specify if the control is required.
      */
-    formatMaxText: ({ max }: {
-        max: string;
-    }) => string;
+    required: boolean;
     /**
-     * The formatter for the text for minimum value.
-     * Should be changed upon the locale the UI is rendered with.
+     * 	Whether the slider should be read-only
      */
-    formatMinText: ({ min }: {
-        min: string;
-    }) => string;
+    readonly: boolean;
     /**
      * The label text.
      */
     labelText: string;
+    /**
+     * The label associated with the maximum value.
+     */
+    maxLabel: string;
+    /**
+     * The label associated with the minimum value.
+     */
+    minLabel: string;
+    /**
+     * The formatter for the text for maximum value.
+     * Should be changed upon the locale the UI is rendered with.
+     */
+    formatMaxText: (max: string, maxLabel: string | undefined) => string;
+    /**
+     * The formatter for the text for min/max value.
+     * Should be changed upon the locale the UI is rendered with.
+     */
+    formatMinText: (min: string, minLabel: string | undefined) => string;
     /**
      * The maximum value.
      */
@@ -1056,6 +1070,10 @@ declare class BXSlider extends BXSlider_base {
      * The form name.
      */
     name: string;
+    /**
+     * true to specify if the control is invalid.
+     */
+    invalid: boolean;
     /**
      * The snapping step of the value.
      */
@@ -1063,14 +1081,14 @@ declare class BXSlider extends BXSlider_base {
     set step(value: string);
     /**
      * A value determining how much the value should increase/decrease by Shift+arrow keys,
-     * which will be `(max - min) / stepRatio`.
+     * which will be `(max - min) / stepMultiplier`.
      */
-    get stepRatio(): string;
-    set stepRatio(value: string);
+    get stepMultiplier(): string;
+    set stepMultiplier(value: string);
     /**
      * The value.
      */
-    value: number;
+    value: any;
     connectedCallback(): void;
     disconnectedCallback(): void;
     shouldUpdate(changedProperties: any): boolean;
@@ -1094,6 +1112,6 @@ declare class BXSlider extends BXSlider_base {
     };
     static styles: any;
 }
-export default BXSlider;
+export default CDSSlider;
 //# sourceMappingURL=slider.d.ts.map

package/es/components/slider/slider.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/slider/slider.ts"],"names":[],"mappings":"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","file":"slider.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 throttle from 'lodash-es/throttle';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport ifNonEmpty from '../../globals/directives/if-non-empty';\nimport BXSliderInput from './slider-input';\nimport styles from './slider.scss';\n\ninterface Cancelable {\n cancel(): void;\n}\n\n/\n The direction to move the thumb, associated with key symbols.\n /\nconst THUMB_DIRECTION = {\n Left: -1,\n ArrowLeft: -1,\n Up: -1,\n ArrowUp: -1,\n Right: 1,\n ArrowRight: 1,\n Down: 1,\n ArrowDown: 1,\n};\n\n/\n Slider.\n \n @element cds-slider\n * @slot label-text - The label text.\n * @slot max-text - The text for maximum value.\n * @slot min-text - The text for minimum value.\n * @fires cds-slider-changed - The custom event fired after the value is changed by user gesture.\n /\n@customElement(`${prefix}-slider`)\nclass BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {\n /\n The internal value of `max` property.\n /\n private _max = '100';\n\n /\n The internal value of `min` property.\n /\n private _min = '0';\n\n /\n The internal value of `step` property.\n /\n private _step = '1';\n\n /\n The internal value of `stepRatio` property.\n /\n private _stepRatio = '4';\n\n /\n The handle for the throttled listener of `pointermove` event.\n /\n private _throttledHandlePointermoveImpl:\n \| (((event: PointerEvent) => void) & Cancelable)\n \| null = null;\n\n /\n `true` if dragging of thumb is in progress.\n /\n private _dragging = false;\n\n /\n The rate of the thumb position in the track.\n * When we try to set a new value, we adjust the value considering `step` property.\n /\n private get _rate() {\n const { max, min, value } = this;\n // Copes with out-of-range value coming programmatically or from `<cds-slider-input>`\n return (\n (Math.min(Number(max), Math.max(Number(min), value)) - Number(min)) /\n (Number(max) - Number(min))\n );\n }\n\n private set _rate(rate: number) {\n const { max, min, step } = this;\n this.value =\n Number(min) +\n Math.round(\n ((Number(max) - Number(min)) Math.min(1, Math.max(0, rate))) /\n Number(step)\n ) \n Number(step);\n }\n\n /\n The DOM element of the thumb.\n /\n @query('#thumb')\n private _thumbNode!: HTMLDivElement;\n\n /\n The DOM element of the track.\n /\n @query('#track')\n private _trackNode!: HTMLDivElement;\n\n /\n Handles `click` event on the `<label>` to focus on the thumb.\n /\n _handleClickLabel() {\n this._thumbNode?.focus();\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, String(value));\n }\n }\n\n /\n Handles `keydown` event on the thumb to increase/decrease the value.\n /\n private _handleKeydown({ key, shiftKey }: KeyboardEvent) {\n if (!this.disabled) {\n if (key in THUMB_DIRECTION) {\n const {\n max: rawMax,\n min: rawMin,\n step: rawStep,\n stepRatio: rawStepRatio,\n value,\n } = this;\n const max = Number(rawMax);\n const min = Number(rawMin);\n const step = Number(rawStep);\n const stepRatio = Number(rawStepRatio);\n const diff =\n (!shiftKey ? step : (max - min) / stepRatio) THUMB_DIRECTION[key];\n const stepCount = (value + diff) / step;\n // Snaps to next\n this.value = Math.min(\n max,\n Math.max(\n min,\n (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step\n )\n );\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof BXSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n intermediate: false,\n },\n })\n );\n }\n }\n }\n\n /*\n Handles `pointerdown` event on the thumb to start dragging.\n /\n private _startDrag() {\n this._dragging = true;\n this._thumbNode.style.touchAction = 'none';\n }\n\n /\n Handles `pointerdown` event on the track to update the thumb position and the value as necessary.\n /\n private _handleClick(event: PointerEvent) {\n if (!this.disabled) {\n const { _trackNode: trackNode } = this;\n const isRtl =\n trackNode\n .ownerDocument!.defaultView!.getComputedStyle(trackNode)\n .getPropertyValue('direction') === 'rtl';\n const thumbPosition = event.clientX;\n const { left: trackLeft, width: trackWidth } =\n trackNode.getBoundingClientRect();\n this._rate =\n (isRtl\n ? trackLeft + trackWidth - thumbPosition\n : thumbPosition - trackLeft) / trackWidth;\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof BXSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n })\n );\n }\n }\n\n /\n Handles `pointermove` to update the thumb position and the value as necessary.\n \n @param event The event.\n /\n @HostListener('document:pointermove')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handlePointermove = (event: PointerEvent) => {\n const { disabled, _dragging: dragging } = this;\n if (!disabled && dragging) {\n this._throttledHandlePointermoveImpl!(event);\n }\n };\n\n /\n Updates thumb position and value upon user's `pointermove` gesture.\n \n @param event The event.\n /\n private _handlePointermoveImpl(event: PointerEvent) {\n const { disabled, _dragging: dragging, _trackNode: trackNode } = this;\n if (!disabled && dragging) {\n const isRtl =\n trackNode\n .ownerDocument!.defaultView!.getComputedStyle(trackNode)\n .getPropertyValue('direction') === 'rtl';\n const thumbPosition = event.clientX;\n const { left: trackLeft, width: trackWidth } =\n this._trackNode.getBoundingClientRect();\n this._rate =\n (isRtl\n ? trackLeft + trackWidth - thumbPosition\n : thumbPosition - trackLeft) / trackWidth;\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof BXSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n intermediate: true,\n },\n })\n );\n }\n }\n\n /\n Handles `pointerup` and `pointerleave` event to finishing dragging.\n /\n private _endDrag = () => {\n if (this._dragging) {\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof BXSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n })\n );\n this._dragging = false;\n this._thumbNode.style.touchAction = '';\n }\n };\n\n /\n Handles `${prefix}-slider-input-changed` event to update the value.\n /\n @HostListener('eventChangeInput')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleChangeInput = ({ detail }: CustomEvent) => {\n const { intermediate, value } = detail;\n this.value = value;\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof BXSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value,\n intermediate,\n },\n })\n );\n };\n\n /\n `true` if the check box should be disabled.\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n The formatter for the text for maximum value.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatMaxText = ({ max }: { max: string }) => max;\n\n /\n The formatter for the text for minimum value.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatMinText = ({ min }: { min: string }) => min;\n\n /\n The label text.\n /\n @property({ attribute: 'label-text' })\n labelText = '';\n\n /\n The maximum value.\n /\n @property({ type: Number, reflect: true })\n get max() {\n return this._max.toString();\n }\n\n set max(value) {\n const { max: oldMax } = this;\n this._max = value;\n this.requestUpdate('max', oldMax);\n }\n\n /\n The minimum value.\n /\n @property({ type: Number, reflect: true })\n get min() {\n return this._min.toString();\n }\n\n set min(value) {\n const { min: oldMin } = this;\n this._min = value;\n this.requestUpdate('min', oldMin);\n }\n\n /\n The form name.\n /\n @property()\n name!: string;\n\n /\n The snapping step of the value.\n /\n @property({ type: Number, reflect: true })\n get step() {\n return this._step.toString();\n }\n\n set step(value) {\n const { step: oldStep } = this;\n this._step = value;\n this.requestUpdate('step', oldStep);\n }\n\n /\n A value determining how much the value should increase/decrease by Shift+arrow keys,\n * which will be `(max - min) / stepRatio`.\n /\n @property({ type: Number, reflect: true, attribute: 'step-ratio' })\n get stepRatio() {\n return this._stepRatio.toString();\n }\n\n set stepRatio(value) {\n const { stepRatio: oldStepRatio } = this;\n this._stepRatio = value;\n this.requestUpdate('stepRatio', oldStepRatio);\n }\n\n /\n The value.\n /\n @property({ type: Number })\n value = 50;\n\n connectedCallback() {\n super.connectedCallback();\n if (!this._throttledHandlePointermoveImpl) {\n this._throttledHandlePointermoveImpl = throttle(\n this._handlePointermoveImpl,\n 10\n );\n }\n }\n\n disconnectedCallback() {\n if (this._throttledHandlePointermoveImpl) {\n this._throttledHandlePointermoveImpl.cancel();\n this._throttledHandlePointermoveImpl = null;\n }\n super.disconnectedCallback();\n }\n\n shouldUpdate(changedProperties) {\n const input = this.querySelector(\n (this.constructor as typeof BXSlider).selectorInput\n ) as BXSliderInput;\n if (changedProperties.has('disabled')) {\n if (input) {\n input.disabled = this.disabled;\n }\n if (this.disabled) {\n this._dragging = false;\n }\n }\n if (input) {\n ['max', 'min', 'step', 'value'].forEach((name) => {\n if (changedProperties.has(name)) {\n input[name] = this[name];\n }\n });\n }\n return true;\n }\n\n render() {\n const {\n disabled,\n formatMaxText,\n formatMinText,\n labelText,\n max,\n min,\n name,\n value,\n _rate: rate,\n _handleClickLabel: handleClickLabel,\n _handleKeydown: handleKeydown,\n _handleClick: handleClick,\n _startDrag: startDrag,\n _endDrag: endDrag,\n } = this;\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: disabled,\n });\n const sliderClasses = classMap({\n [`${prefix}--slider`]: true,\n [`${prefix}--slider--disabled`]: disabled,\n });\n return html`\n <label class=\"${labelClasses}\" @click=\"${handleClickLabel}\">\n <slot name=\"label-text\">${labelText}</slot>\n </label>\n <div class=\"${prefix}--slider-container\">\n <span class=\"${prefix}--slider__range-label\">\n <slot name=\"min-text\">${formatMinText({ min })}</slot>\n </span>\n <div\n @keydown=\"${handleKeydown}\"\n @click=\"${handleClick}\"\n @pointerup=\"${endDrag}\"\n @pointerleave=\"${endDrag}\"\n class=\"${sliderClasses}\"\n role=\"presentation\">\n <div\n id=\"thumb\"\n class=\"${prefix}--slider__thumb\"\n role=\"slider\"\n tabindex=\"0\"\n aria-valuemax=\"${max}\"\n aria-valuemin=\"${min}\"\n aria-valuenow=\"${value}\"\n style=\"left: ${rate 100}%\"\n @pointerdown=\"${startDrag}\"></div>\n <div id=\"track\" class=\"${prefix}--slider__track\"></div>\n <div class=\"${prefix}-ce--slider__filled-track-container\">\n <div\n class=\"${prefix}--slider__filled-track\"\n style=\"transform: translate(0%, -50%) scaleX(${rate})\"></div>\n </div>\n <input\n class=\"${prefix}--slider__input\"\n type=\"hidden\"\n name=\"${ifNonEmpty(name)}\"\n .value=\"${value}\"\n min=\"${ifNonEmpty(min)}\"\n max=\"${ifNonEmpty(max)}\" />\n </div>\n <span class=\"${prefix}--slider__range-label\">\n <slot name=\"max-text\">${formatMaxText({ max })}</slot>\n </span>\n <slot></slot>\n </div>\n `;\n }\n\n /*\n A selector that will return the `<input>` box got entering the value directly.\n /\n static get selectorInput() {\n return `${prefix}-slider-input`;\n }\n\n /\n The name of the custom event fired after the value is changed by user gesture.\n /\n static get eventChange() {\n return `${prefix}-slider-changed`;\n }\n\n /\n The name of the custom event fired after the value is changed in `<cds-slider-input>` by user gesture.\n */\n static get eventChangeInput() {\n return `${prefix}-slider-input-changed`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default BXSlider;\n"]}
1	+ {"version":3,"sources":["components/slider/slider.ts"],"names":[],"mappings":"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","file":"slider.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 throttle from 'lodash-es/throttle';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport FormMixin from '../../globals/mixins/form';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport CDSSliderInput from './slider-input';\nimport styles from './slider.scss';\n\ninterface Cancelable {\n cancel(): void;\n}\n\n/\n The direction to move the thumb, associated with key symbols.\n /\nconst THUMB_DIRECTION = {\n Left: -1,\n ArrowLeft: -1,\n Up: -1,\n ArrowUp: -1,\n Right: 1,\n ArrowRight: 1,\n Down: 1,\n ArrowDown: 1,\n};\n\n/\n Slider.\n \n @element cds-slider\n * @slot label-text - The label text.\n * @slot max-text - The text for maximum value.\n * @slot min-text - The text for minimum value.\n * @fires cds-slider-changed - The custom event fired after the value is changed by user gesture.\n /\n@customElement(`${prefix}-slider`)\nclass CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {\n /\n The internal value of `max` property.\n /\n private _max = '100';\n\n /\n The internal value of `min` property.\n /\n private _min = '0';\n\n /\n The internal value of `step` property.\n /\n private _step = '1';\n\n /\n The internal value of `stepMultiplier` property.\n /\n private _stepMultiplier = '4';\n\n /\n The handle for the throttled listener of `pointermove` event.\n /\n private _throttledHandlePointermoveImpl:\n \| (((event: PointerEvent) => void) & Cancelable)\n \| null = null;\n\n /\n `true` if dragging of thumb is in progress.\n /\n private _dragging = false;\n\n /\n The rate of the thumb position in the track.\n * When we try to set a new value, we adjust the value considering `step` property.\n /\n private get _rate() {\n const { max, min, value } = this;\n // Copes with out-of-range value coming programmatically or from `<cds-slider-input>`\n return (\n (Math.min(Number(max), Math.max(Number(min), value)) - Number(min)) /\n (Number(max) - Number(min))\n );\n }\n\n private set _rate(rate: number) {\n const { max, min, step } = this;\n this.value =\n Number(min) +\n Math.round(\n ((Number(max) - Number(min)) Math.min(1, Math.max(0, rate))) /\n Number(step)\n ) \n Number(step);\n }\n\n /\n The DOM element of the thumb.\n /\n @query('#thumb')\n private _thumbNode!: HTMLDivElement;\n\n /\n The DOM element of the track.\n /\n @query('#track')\n private _trackNode!: HTMLDivElement;\n\n /\n Handles `click` event on the `<label>` to focus on the thumb.\n /\n _handleClickLabel() {\n this._thumbNode?.focus();\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, String(value));\n }\n }\n\n /\n Handles `keydown` event on the thumb to increase/decrease the value.\n /\n private _handleKeydown({ key, shiftKey }: KeyboardEvent) {\n if (!this.disabled) {\n if (key in THUMB_DIRECTION) {\n const {\n max: rawMax,\n min: rawMin,\n step: rawStep,\n stepMultiplier: rawstepMultiplier,\n value,\n } = this;\n const max = Number(rawMax);\n const min = Number(rawMin);\n const step = Number(rawStep);\n const stepMultiplier = Number(rawstepMultiplier);\n const diff =\n (!shiftKey ? step : (max - min) / stepMultiplier) \n THUMB_DIRECTION[key];\n const stepCount = (value + diff) / step;\n // Snaps to next\n this.value = Math.min(\n max,\n Math.max(\n min,\n (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step\n )\n );\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n intermediate: false,\n },\n })\n );\n }\n }\n }\n\n /*\n Handles `pointerdown` event on the thumb to start dragging.\n /\n private _startDrag() {\n this._dragging = true;\n this._thumbNode.style.touchAction = 'none';\n }\n\n /\n Handles `pointerdown` event on the track to update the thumb position and the value as necessary.\n /\n private _handleClick(event: PointerEvent) {\n if (!this.disabled) {\n const { _trackNode: trackNode } = this;\n const isRtl =\n trackNode\n .ownerDocument!.defaultView!.getComputedStyle(trackNode)\n .getPropertyValue('direction') === 'rtl';\n const thumbPosition = event.clientX;\n const { left: trackLeft, width: trackWidth } =\n trackNode.getBoundingClientRect();\n this._rate =\n (isRtl\n ? trackLeft + trackWidth - thumbPosition\n : thumbPosition - trackLeft) / trackWidth;\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n })\n );\n }\n }\n\n /\n Handles `pointermove` to update the thumb position and the value as necessary.\n \n @param event The event.\n /\n @HostListener('document:pointermove')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handlePointermove = (event: PointerEvent) => {\n const { disabled, _dragging: dragging } = this;\n if (!disabled && dragging) {\n this._throttledHandlePointermoveImpl!(event);\n }\n };\n\n /\n Updates thumb position and value upon user's `pointermove` gesture.\n \n @param event The event.\n /\n private _handlePointermoveImpl(event: PointerEvent) {\n const { disabled, _dragging: dragging, _trackNode: trackNode } = this;\n if (!disabled && dragging) {\n const isRtl =\n trackNode\n .ownerDocument!.defaultView!.getComputedStyle(trackNode)\n .getPropertyValue('direction') === 'rtl';\n const thumbPosition = event.clientX;\n const { left: trackLeft, width: trackWidth } =\n this._trackNode.getBoundingClientRect();\n this._rate =\n (isRtl\n ? trackLeft + trackWidth - thumbPosition\n : thumbPosition - trackLeft) / trackWidth;\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n intermediate: true,\n },\n })\n );\n }\n }\n\n /\n Handles `pointerup` and `pointerleave` event to finishing dragging.\n /\n private _endDrag = () => {\n if (this._dragging) {\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value: this.value,\n },\n })\n );\n this._dragging = false;\n this._thumbNode.style.touchAction = '';\n }\n };\n\n /\n Handles `${prefix}-slider-input-changed` event to update the value.\n /\n @HostListener('eventChangeInput')\n // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n private _handleChangeInput = ({ detail }: CustomEvent) => {\n const { intermediate, value } = detail;\n this.value = value;\n this.dispatchEvent(\n new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {\n bubbles: true,\n composed: true,\n detail: {\n value,\n intermediate,\n },\n })\n );\n };\n\n /\n `true` if the check box should be disabled.\n /\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /\n \ttrue to specify if the control is required.\n /\n @property({ type: Boolean, reflect: true })\n required = false;\n\n /\n \tWhether the slider should be read-only\n /\n @property({ type: Boolean, reflect: true })\n readonly = false;\n\n /\n The label text.\n /\n @property({ attribute: 'label-text' })\n labelText = '';\n\n /\n The label associated with the maximum value.\n /\n @property({ attribute: 'max-label', reflect: true })\n maxLabel = '';\n\n /\n The label associated with the minimum value.\n /\n @property({ attribute: 'min-label', reflect: true })\n minLabel = '';\n\n /\n The formatter for the text for maximum value.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatMaxText = (max: string, maxLabel: string \| undefined) =>\n `${max}${maxLabel}`;\n\n /\n The formatter for the text for min/max value.\n * Should be changed upon the locale the UI is rendered with.\n /\n @property({ attribute: false })\n formatMinText = (min: string, minLabel: string \| undefined) =>\n `${min}${minLabel}`;\n\n /\n The maximum value.\n /\n @property({ type: Number, reflect: true })\n get max() {\n return this._max.toString();\n }\n\n set max(value) {\n const { max: oldMax } = this;\n this._max = value;\n this.requestUpdate('max', oldMax);\n }\n\n /\n The minimum value.\n /\n @property({ type: Number, reflect: true })\n get min() {\n return this._min.toString();\n }\n\n set min(value) {\n const { min: oldMin } = this;\n this._min = value;\n this.requestUpdate('min', oldMin);\n }\n\n /\n The form name.\n /\n @property()\n name!: string;\n\n /\n true to specify if the control is invalid.\n /\n @property({ type: Boolean })\n invalid = false;\n\n /\n The snapping step of the value.\n /\n @property({ type: Number, reflect: true })\n get step() {\n return this._step.toString();\n }\n\n set step(value) {\n const { step: oldStep } = this;\n this._step = value;\n this.requestUpdate('step', oldStep);\n }\n\n /\n A value determining how much the value should increase/decrease by Shift+arrow keys,\n * which will be `(max - min) / stepMultiplier`.\n /\n @property({ type: Number, reflect: true, attribute: 'step-multiplier' })\n get stepMultiplier() {\n return this._stepMultiplier.toString();\n }\n\n set stepMultiplier(value) {\n const { stepMultiplier: oldstepMultiplier } = this;\n this._stepMultiplier = value;\n this.requestUpdate('stepMultiplier', oldstepMultiplier);\n }\n\n /\n The value.\n /\n @property({ type: Number })\n value;\n\n connectedCallback() {\n super.connectedCallback();\n if (!this._throttledHandlePointermoveImpl) {\n this._throttledHandlePointermoveImpl = throttle(\n this._handlePointermoveImpl,\n 10\n );\n }\n }\n\n disconnectedCallback() {\n if (this._throttledHandlePointermoveImpl) {\n this._throttledHandlePointermoveImpl.cancel();\n this._throttledHandlePointermoveImpl = null;\n }\n super.disconnectedCallback();\n }\n\n shouldUpdate(changedProperties) {\n const input = this.querySelector(\n (this.constructor as typeof CDSSlider).selectorInput\n ) as CDSSliderInput;\n if (changedProperties.has('disabled')) {\n if (input) {\n input.disabled = this.disabled;\n }\n if (this.disabled) {\n this._dragging = false;\n }\n }\n if (changedProperties.has('readonly')) {\n if (input) {\n input.readonly = this.readonly;\n }\n if (this.readonly) {\n this._dragging = false;\n }\n }\n if (input) {\n ['max', 'min', 'step', 'value'].forEach((name) => {\n if (changedProperties.has(name)) {\n input[name] = this[name];\n }\n });\n\n if (changedProperties.has('value') \|\| changedProperties.has('invalid')) {\n if (this.value < this.min \|\| this.value > this.max \|\| this.invalid) {\n input.invalid = true;\n } else {\n input.invalid = false;\n }\n }\n }\n return true;\n }\n\n render() {\n const {\n disabled,\n formatMaxText,\n formatMinText,\n labelText,\n max,\n min,\n maxLabel,\n minLabel,\n value,\n readonly,\n _rate: rate,\n _handleClickLabel: handleClickLabel,\n _handleKeydown: handleKeydown,\n _handleClick: handleClick,\n _startDrag: startDrag,\n _endDrag: endDrag,\n } = this;\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: disabled,\n });\n const sliderClasses = classMap({\n [`${prefix}--slider`]: true,\n [`${prefix}--slider--disabled`]: disabled,\n [`${prefix}--slider--readonly`]: readonly,\n });\n return html`\n <label class=\"${labelClasses}\" @click=\"${handleClickLabel}\">\n <slot name=\"label-text\">${labelText}</slot>\n </label>\n <div class=\"${prefix}--slider-container\">\n <span class=\"${prefix}--slider__range-label\">\n <slot name=\"min-text\">${formatMinText(min, minLabel)}</slot>\n </span>\n <div\n @keydown=\"${handleKeydown}\"\n @click=\"${handleClick}\"\n @pointerup=\"${endDrag}\"\n @pointerleave=\"${endDrag}\"\n class=\"${sliderClasses}\"\n tabindex=\"-1\"\n role=\"presentation\">\n <div\n id=\"thumb\"\n class=\"${prefix}--slider__thumb\"\n role=\"slider\"\n tabindex=\"${!readonly ? 0 : -1}\"\n aria-valuemax=\"${max}\"\n aria-valuemin=\"${min}\"\n aria-valuenow=\"${value}\"\n style=\"left: ${rate 100}%\"\n @pointerdown=\"${startDrag}\"></div>\n <div id=\"track\" class=\"${prefix}--slider__track\"></div>\n <div class=\"${prefix}-ce--slider__filled-track-container\">\n <div\n class=\"${prefix}--slider__filled-track\"\n style=\"transform: translate(0%, -50%) scaleX(${rate})\"></div>\n </div>\n </div>\n <span class=\"${prefix}--slider__range-label\">\n <slot name=\"max-text\">${formatMaxText(max, maxLabel)}</slot>\n </span>\n <slot></slot>\n </div>\n `;\n }\n\n /*\n A selector that will return the `<input>` box got entering the value directly.\n /\n static get selectorInput() {\n return `${prefix}-slider-input`;\n }\n\n /\n The name of the custom event fired after the value is changed by user gesture.\n /\n static get eventChange() {\n return `${prefix}-slider-changed`;\n }\n\n /\n The name of the custom event fired after the value is changed in `<cds-slider-input>` by user gesture.\n */\n static get eventChangeInput() {\n return `${prefix}-slider-input-changed`;\n }\n\n static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n static styles = styles;\n}\n\nexport default CDSSlider;\n"]}