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

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

@@ -8,5 +8,5 @@
  */
 import { css } from 'lit';
 export default css([
-  "@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;left:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{top:.2rem;left:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--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

@@ -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;
@@ -944,7 +944,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 +958,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 +1025,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 +1068,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 +1079,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 +1110,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

@@ -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"]}
+{"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"]}