@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.4

package/es/components/pagination/pagination.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--select{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;position:relative;display:flex;width:100%;flex-direction:column;align-items:flex-start}.cds--select *,.cds--select ::after,.cds--select ::before{box-sizing:inherit}.cds--select-input__wrapper{position:relative;display:flex;width:100%;align-items:center}.cds--select-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;display:block;width:100%;height:2.5rem;padding:0 3rem 0 1rem;border:none;border-bottom:1px solid var(--cds-border-strong);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--cds-field);border-radius:0;color:var(--cds-text-primary,#161616);cursor:pointer;font-family:inherit;opacity:1;transition:outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--select-input:hover{background-color:var(--cds-field-hover)}.cds--select-input::-ms-expand{display:none}@-moz-document url-prefix(){.cds--select-input:-moz-focusring,.cds--select-input::-moz-focus-inner{background-image:none;color:transparent;text-shadow:0 0 0 #000}}.cds--select-input:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;color:var(--cds-text-primary,#161616)}@media screen and (prefers-contrast){.cds--select-input:focus{outline-style:dotted}}.cds--select-input:disabled,.cds--select-input:hover:disabled{border-bottom-color:transparent;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--select-input--sm{height:2rem;max-height:2rem}.cds--select-input--lg{height:3rem;max-height:3rem}.cds--select--disabled .cds--form__helper-text,.cds--select--disabled .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--select--warning .cds--select-input,.cds--select-input__wrapper[data-invalid] .cds--select-input{padding-right:4rem}.cds--select-input:disabled~.cds--select__arrow{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--select--light .cds--select-input{background-color:var(--cds-field-02,#fff)}.cds--select--light .cds--select-input:hover{background-color:var(--cds-field-hover)}.cds--select--light .cds--select-input:disabled,.cds--select--light .cds--select-input:hover:disabled{background-color:var(--cds-field-02,#fff);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--select__arrow{position:absolute;top:0;right:1rem;height:100%;fill:var(--cds-icon-primary,#161616);pointer-events:none}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--select__arrow path{fill:ButtonText}}.cds--select__invalid-icon{position:absolute;right:2.5rem}.cds--select-input__wrapper[data-invalid] .cds--select-input~.cds--select__invalid-icon{fill:var(--cds-support-error,#da1e28)}.cds--select__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--select__invalid-icon--warning path[fill]{fill:var(--cds-icon-primary,#161616);opacity:1}.cds--select-option,optgroup.cds--select-optgroup{background-color:var(--cds-layer-hover);color:var(--cds-text-primary,#161616)}.cds--select-option:disabled,optgroup.cds--select-optgroup:disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--select--inline{display:flex;flex-direction:row;align-items:center}.cds--select--inline.cds--select--invalid .cds--form__helper-text,.cds--select--inline.cds--select--invalid .cds--label{align-self:flex-start;margin-top:.8125rem}.cds--select--inline .cds--form__helper-text{margin-bottom:0;margin-left:.5rem}.cds--select--inline .cds--label{margin:0 .5rem 0 0;white-space:nowrap}.cds--select--inline .cds--select-input{width:auto;padding-right:2rem;padding-left:.5rem;border-bottom:none;background-color:transparent;color:var(--cds-text-primary,#161616)}.cds--select--inline .cds--select-input:focus,.cds--select--inline .cds--select-input:focus optgroup,.cds--select--inline .cds--select-input:focus option{background-color:var(--cds-background,#fff)}.cds--select--inline .cds--select-input[disabled],.cds--select--inline .cds--select-input[disabled]:hover{background-color:var(--cds-field)}.cds--select--inline .cds--select__arrow{right:.5rem}.cds--select--inline.cds--select--invalid .cds--select-input{padding-right:3.5rem}.cds--select--inline.cds--select--invalid .cds--select-input~.cds--select__invalid-icon{right:2rem}.cds--select--inline .cds--select-input:disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--select--inline .cds--select-input:disabled~*{cursor:not-allowed}.cds--select--readonly .cds--select-input{border-bottom-color:var(--cds-border-subtle);background-color:transparent;cursor:default}.cds--select--readonly .cds--select__arrow{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--select.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:100%;height:2.5rem}.cds--select.cds--skeleton:active,.cds--select.cds--skeleton:focus,.cds--select.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--select.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--select.cds--skeleton::before{animation:none}}.cds--select.cds--skeleton .cds--select-input{display:none}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--select__arrow{fill:ButtonText}}.cds--data-table-container+.cds--pagination,.cds--data-table-container+:host(cds-pagination){border-top:0}.cds--pagination,:host(cds-pagination){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;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;width:calc(100% - 1px);min-height:2.5rem;align-items:center;justify-content:space-between;border-top:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);overflow-x:auto}.cds--pagination *,.cds--pagination ::after,.cds--pagination ::before,:host(cds-pagination) *,:host(cds-pagination) ::after,:host(cds-pagination) ::before{box-sizing:inherit}@media (min-width:42rem){.cds--pagination,:host(cds-pagination){overflow:initial}.cds--pagination .cds--pagination__control-buttons,:host(cds-pagination) .cds--pagination__control-buttons{display:flex}}@media (max-width:41.98rem){.cds--pagination .cds--pagination__left>*,.cds--pagination .cds--pagination__right>*,:host(cds-pagination) .cds--pagination__left>*,:host(cds-pagination) .cds--pagination__right>*{display:none}.cds--pagination .cds--pagination__items-count,:host(cds-pagination) .cds--pagination__items-count{display:initial}.cds--pagination .cds--pagination__control-buttons,:host(cds-pagination) .cds--pagination__control-buttons{display:flex}}.cds--pagination--sm{min-height:2rem}.cds--pagination--lg{min-height:3rem}.cds--pagination .cds--select,:host(cds-pagination) .cds--select{height:100%;align-items:center}.cds--pagination .cds--select-input--inline__wrapper,:host(cds-pagination) .cds--select-input--inline__wrapper{display:flex;height:100%}.cds--pagination .cds--select-input,:host(cds-pagination) .cds--select-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);width:auto;min-width:auto;height:100%;line-height:2.5rem}.cds--pagination .cds--select--inline .cds--select-input,:host(cds-pagination) .cds--select--inline .cds--select-input{padding:0 2.25rem 0 1rem}.cds--pagination--sm .cds--select-input{line-height:2rem}.cds--pagination--lg .cds--select-input{line-height:3rem}.cds--pagination .cds--select-input:hover,:host(cds-pagination) .cds--select-input:hover{background:var(--cds-layer-hover)}.cds--pagination .cds--select--inline .cds--select-input:focus,.cds--pagination .cds--select--inline .cds--select-input:focus optgroup,.cds--pagination .cds--select--inline .cds--select-input:focus option,:host(cds-pagination) .cds--select--inline .cds--select-input:focus,:host(cds-pagination) .cds--select--inline .cds--select-input:focus optgroup,:host(cds-pagination) .cds--select--inline .cds--select-input:focus option{background-color:var(--cds-layer)}.cds--pagination .cds--select__arrow,:host(cds-pagination) .cds--select__arrow{top:50%;transform:translate(-.5rem,-50%)}.cds--pagination .cds--select__item-count .cds--select-input,.cds--pagination :host(cds-page-sizes-select) .cds--select-input,:host(cds-pagination) .cds--select__item-count .cds--select-input,:host(cds-pagination) :host(cds-page-sizes-select) .cds--select-input{border-right:1px solid var(--cds-border-subtle)}.cds--pagination__right{border-left:1px solid var(--cds-border-subtle)}.cds--pagination__left,.cds--pagination__right{display:flex;height:100%;align-items:center}.cds--pagination__left>.cds--form-item,.cds--pagination__right>.cds--form-item{height:100%}.cds--pagination__left .cds--pagination__text,.cds--pagination__right .cds--pagination__text{white-space:nowrap}.cds--pagination__left .cds--pagination__text{margin-right:.0625rem}.cds--pagination__right .cds--pagination__text{margin-right:1rem;margin-left:.0625rem}.cds--pagination__right .cds--pagination__text.cds--pagination__page-text{margin-right:.0625rem;margin-left:1rem}.cds--pagination__right .cds--pagination__text:empty{margin:0}.cds--pagination__left{padding:0 1rem 0 0}@media (min-width:42rem){.cds--pagination__left{padding:0 1rem}}@media (min-width:42rem){.cds--pagination__text{display:inline-block}}span.cds--pagination__text{margin-left:1rem;color:var(--cds-text-primary,#161616)}span.cds--pagination__text.cds--pagination__items-count{color:var(--cds-text-secondary,#525252)}.cds--btn--ghost.cds--pagination__button,.cds--pagination__button{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:flex;width:2.5rem;height:2.5rem;min-height:2rem;align-items:center;justify-content:center;border:none;border-left:1px solid var(--cds-border-subtle);margin:0;background:0 0;cursor:pointer;fill:var(--cds-icon-primary,#161616);transition:outline 110ms cubic-bezier(.2,0,.38,.9),background-color 110ms cubic-bezier(.2,0,.38,.9)}.cds--btn--ghost.cds--pagination__button *,.cds--btn--ghost.cds--pagination__button ::after,.cds--btn--ghost.cds--pagination__button ::before,.cds--pagination__button *,.cds--pagination__button ::after,.cds--pagination__button ::before{box-sizing:inherit}.cds--pagination--sm .cds--btn--ghost.cds--pagination__button,.cds--pagination--sm .cds--pagination__button{width:2rem;height:2rem}.cds--pagination--lg .cds--btn--ghost.cds--pagination__button,.cds--pagination--lg .cds--pagination__button{width:3rem;height:3rem}.cds--btn--ghost:focus.cds--pagination__button,.cds--pagination__button:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;border-left:0}@media screen and (prefers-contrast){.cds--btn--ghost:focus.cds--pagination__button,.cds--pagination__button:focus{outline-style:dotted}}.cds--btn--ghost:hover.cds--pagination__button,.cds--pagination__button:hover{background:var(--cds-layer-hover)}.cds--btn--ghost.cds--pagination__button--no-index,.cds--pagination__button--no-index{cursor:not-allowed;fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--btn--ghost:disabled:hover.cds--pagination__button,.cds--btn--ghost:hover.cds--pagination__button--no-index,.cds--pagination__button--no-index:hover,.cds--pagination__button:disabled:hover{border-color:var(--cds-border-subtle);background:var(--cds-layer);cursor:not-allowed;fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--pagination.cds--skeleton .cds--skeleton__text,.cds--skeleton:host(cds-pagination) .cds--skeleton__text{margin-right:1rem;margin-bottom:0}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--btn--ghost.cds--pagination__button,.cds--pagination__button{outline:1px solid transparent}}.cds--unstable-pagination{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;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;width:100%;min-height:2.5rem;align-items:center;justify-content:space-between;border-top:1px solid var(--cds-border-subtle);border-bottom:1px solid transparent;background-color:var(--cds-layer)}.cds--unstable-pagination *,.cds--unstable-pagination ::after,.cds--unstable-pagination ::before{box-sizing:inherit}.cds--unstable-pagination__text{margin:0 1rem;color:var(--cds-text-secondary,#525252)}@media (min-width:42rem){.cds--unstable-pagination__text{display:inline-block}}.cds--unstable-pagination__left,.cds--unstable-pagination__right{display:flex;height:100%;align-items:center}.cds--unstable-pagination__left{padding:0 1rem 0 0}.cds--unstable-pagination__left>.cds--form-item,.cds--unstable-pagination__right>.cds--form-item{height:100%}.cds--unstable-pagination__left .cds--unstable-pagination__text{margin-right:.0625rem}.cds--unstable-pagination__right .cds--unstable-pagination__text{margin-right:1rem;margin-left:.0625rem}.cds--unstable-pagination__button{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:flex;width:2.5rem;height:2.5rem;min-height:2rem;align-items:center;justify-content:center;border:none;border-left:1px solid var(--cds-border-subtle);margin:0;background:0 0;color:var(--cds-icon-primary,#161616);cursor:pointer;fill:var(--cds-icon-primary,#161616);transition:outline 110ms cubic-bezier(.2,0,.38,.9),background-color 110ms cubic-bezier(.2,0,.38,.9)}.cds--unstable-pagination__button *,.cds--unstable-pagination__button ::after,.cds--unstable-pagination__button ::before{box-sizing:inherit}.cds--unstable-pagination__button .cds--btn__icon{width:initial;height:initial}.cds--unstable-pagination__button.cds--btn--icon-only.cds--tooltip__trigger:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--unstable-pagination__button.cds--btn--icon-only.cds--tooltip__trigger:focus{outline-style:dotted}}.cds--unstable-pagination__button:hover{background:var(--cds-layer-hover);color:var(--cds-icon-primary,#161616)}.cds--unstable-pagination__button--no-index{cursor:not-allowed;fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--unstable-pagination__button.cds--btn:disabled{border-color:var(--cds-border-subtle);background:0 0}.cds--unstable-pagination__button--no-index:hover,.cds--unstable-pagination__button:disabled:hover{background:0 0;cursor:not-allowed;fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--unstable-pagination__page-selector,.cds--unstable-pagination__page-sizer{height:100%;align-items:center}.cds--unstable-pagination__page-selector .cds--select-input--inline__wrapper,.cds--unstable-pagination__page-sizer .cds--select-input--inline__wrapper{display:flex;height:100%}.cds--unstable-pagination__page-selector .cds--select-input,.cds--unstable-pagination__page-sizer .cds--select-input{font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);width:auto;min-width:auto;height:100%;padding:0 2.25rem 0 1rem;line-height:2.5rem}.cds--unstable-pagination__page-selector .cds--select-input:hover,.cds--unstable-pagination__page-sizer .cds--select-input:hover{background:var(--cds-layer-hover)}.cds--unstable-pagination__page-selector .cds--select__arrow,.cds--unstable-pagination__page-sizer .cds--select__arrow{top:50%;transform:translateY(-50%)}@media (min-width:42rem){.cds--unstable-pagination__page-selector .cds--select__arrow,.cds--unstable-pagination__page-sizer .cds--select__arrow{right:1rem}}.cds--unstable-pagination__page-selector{border-left:1px solid var(--cds-border-subtle)}.cds--unstable-pagination__page-sizer{border-right:1px solid var(--cds-border-subtle)}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}:host(cds-pagination){position:relative;outline:0}:host(cds-pagination) .cds--pagination__left{flex:1}:host(cds-pagination) .cds-ce--pagination__divider{height:100%;width:rem(1px);background-color:var(--cds-layer-accent-01,#e0e0e0)}:host(cds-pagination) .cds--pagination__control-buttons{height:100%}:host(cds-pagination) .cds--pagination__button svg{transform:rotate(0)}:host(cds-pages-select){outline:0}:host(cds-page-sizes-select){outline:0}:host(cds-page-sizes-select),:host(cds-pages-select){display:flex;align-items:center;height:100%}:host(cds-page-sizes-select) .cds--select-input,:host(cds-pages-select) .cds--select-input{font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);width:auto;min-width:auto;height:100%;padding:0 2.5rem 0 1rem;margin-right:0;border:none}@media (min-width:42rem){:host(cds-page-sizes-select) .cds--select-input,:host(cds-pages-select) .cds--select-input{padding-right:rem(36px)}}:host(cds-page-sizes-select) .cds--select-input:hover,:host(cds-pages-select) .cds--select-input:hover{background:var(--cds-field-hover-01,#e8e8e8)}:host(cds-page-sizes-select) .cds--select__arrow,:host(cds-pages-select) .cds--select__arrow{top:auto;bottom:auto}@media (min-width:42rem){:host(cds-page-sizes-select) .cds--select__arrow,:host(cds-pages-select) .cds--select__arrow{right:1rem}}:host(cds-page-sizes-select) .cds--select__item-count,:host(cds-page-sizes-select) :host(cds-page-sizes-select),:host(cds-pages-select) .cds--select__page-number,:host(cds-pages-select) :host(cds-pages-select){display:flex;align-items:center;height:100%;position:relative}:host(cds-pages-select) .cds--pagination__text{margin-right:1rem;margin-left:rem(1px)}",
+  "@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--select{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;position:relative;display:flex;width:100%;flex-direction:column;align-items:flex-start}.cds--select *,.cds--select ::after,.cds--select ::before{box-sizing:inherit}.cds--select-input__wrapper{position:relative;display:flex;width:100%;align-items:center}.cds--select-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;display:block;width:100%;height:2.5rem;padding:0 3rem 0 1rem;border:none;border-bottom:1px solid var(--cds-border-strong);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--cds-field);border-radius:0;color:var(--cds-text-primary,#161616);cursor:pointer;font-family:inherit;opacity:1;transition:outline 70ms cubic-bezier(.2,0,.38,.9)}.cds--select-input:hover{background-color:var(--cds-field-hover)}.cds--select-input::-ms-expand{display:none}@-moz-document url-prefix(){.cds--select-input:-moz-focusring,.cds--select-input::-moz-focus-inner{background-image:none;color:transparent;text-shadow:0 0 0 #000}}.cds--select-input:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;color:var(--cds-text-primary,#161616)}@media screen and (prefers-contrast){.cds--select-input:focus{outline-style:dotted}}.cds--select-input:disabled,.cds--select-input:hover:disabled{border-bottom-color:transparent;background-color:var(--cds-field);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--select-input--sm{height:2rem;max-height:2rem}.cds--select-input--lg{height:3rem;max-height:3rem}.cds--select--disabled .cds--form__helper-text,.cds--select--disabled .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--select--warning .cds--select-input,.cds--select-input__wrapper[data-invalid] .cds--select-input{padding-right:4rem}.cds--select-input:disabled~.cds--select__arrow{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--select--light .cds--select-input{background-color:var(--cds-field-02,#fff)}.cds--select--light .cds--select-input:hover{background-color:var(--cds-field-hover)}.cds--select--light .cds--select-input:disabled,.cds--select--light .cds--select-input:hover:disabled{background-color:var(--cds-field-02,#fff);color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--select__arrow{position:absolute;top:0;right:1rem;height:100%;fill:var(--cds-icon-primary,#161616);pointer-events:none}@media screen and (-ms-high-contrast:active),screen and (prefers-contrast){.cds--select__arrow path{fill:ButtonText}}.cds--select__invalid-icon{position:absolute;right:2.5rem}.cds--select-input__wrapper[data-invalid] .cds--select-input~.cds--select__invalid-icon{fill:var(--cds-support-error,#da1e28)}.cds--select__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--select__invalid-icon--warning path[fill]{fill:var(--cds-icon-primary,#161616);opacity:1}.cds--select-option,optgroup.cds--select-optgroup{background-color:var(--cds-layer-hover);color:var(--cds-text-primary,#161616)}.cds--select-option:disabled,optgroup.cds--select-optgroup:disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--select--inline{display:flex;flex-direction:row;align-items:center}.cds--select--inline.cds--select--invalid .cds--form__helper-text,.cds--select--inline.cds--select--invalid .cds--label{align-self:flex-start;margin-top:.8125rem}.cds--select--inline .cds--form__helper-text{margin-bottom:0;margin-left:.5rem}.cds--select--inline .cds--label{margin:0 .5rem 0 0;white-space:nowrap}.cds--select--inline .cds--select-input{width:auto;padding-right:2rem;padding-left:.5rem;border-bottom:none;background-color:transparent;color:var(--cds-text-primary,#161616)}.cds--select--inline .cds--select-input:focus,.cds--select--inline .cds--select-input:focus optgroup,.cds--select--inline .cds--select-input:focus option{background-color:var(--cds-background,#fff)}.cds--select--inline .cds--select-input[disabled],.cds--select--inline .cds--select-input[disabled]:hover{background-color:var(--cds-field)}.cds--select--inline .cds--select__arrow{right:.5rem}.cds--select--inline.cds--select--invalid .cds--select-input{padding-right:3.5rem}.cds--select--inline.cds--select--invalid .cds--select-input~.cds--select__invalid-icon{right:2rem}.cds--select--inline .cds--select-input:disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--select--inline .cds--select-input:disabled~*{cursor:not-allowed}.cds--select--readonly .cds--select-input{border-bottom-color:var(--cds-border-subtle);background-color:transparent;cursor:default}.cds--select--readonly .cds--select__arrow{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--select.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:100%;height:2.5rem}.cds--select.cds--skeleton:active,.cds--select.cds--skeleton:focus,.cds--select.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--select.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--select.cds--skeleton::before{animation:none}}.cds--select.cds--skeleton .cds--select-input{display:none}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--select__arrow{fill:ButtonText}}.cds--data-table-container+.cds--pagination,.cds--data-table-container+:host(cds-pagination){border-top:0}.cds--pagination,:host(cds-pagination){box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;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;width:calc(100% - 1px);min-height:2.5rem;align-items:center;justify-content:space-between;border-top:1px solid var(--cds-border-subtle);background-color:var(--cds-layer);overflow-x:auto}.cds--pagination *,.cds--pagination ::after,.cds--pagination ::before,:host(cds-pagination) *,:host(cds-pagination) ::after,:host(cds-pagination) ::before{box-sizing:inherit}@media (min-width:42rem){.cds--pagination,:host(cds-pagination){overflow:initial}.cds--pagination .cds--pagination__control-buttons,:host(cds-pagination) .cds--pagination__control-buttons{display:flex}}@media (max-width:41.98rem){.cds--pagination .cds--pagination__left>*,.cds--pagination .cds--pagination__right>*,:host(cds-pagination) .cds--pagination__left>*,:host(cds-pagination) .cds--pagination__right>*{display:none}.cds--pagination .cds--pagination__items-count,:host(cds-pagination) .cds--pagination__items-count{display:initial}.cds--pagination .cds--pagination__control-buttons,:host(cds-pagination) .cds--pagination__control-buttons{display:flex}}.cds--pagination--sm{min-height:2rem}.cds--pagination--lg{min-height:3rem}.cds--pagination .cds--select,:host(cds-pagination) .cds--select{height:100%;align-items:center}.cds--pagination .cds--select-input--inline__wrapper,:host(cds-pagination) .cds--select-input--inline__wrapper{display:flex;height:100%}.cds--pagination .cds--select-input,:host(cds-pagination) .cds--select-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);width:auto;min-width:auto;height:100%;line-height:2.5rem}.cds--pagination .cds--select--inline .cds--select-input,:host(cds-pagination) .cds--select--inline .cds--select-input{padding:0 2.25rem 0 1rem}.cds--pagination--sm .cds--select-input{line-height:2rem}.cds--pagination--lg .cds--select-input{line-height:3rem}.cds--pagination .cds--select-input:hover,:host(cds-pagination) .cds--select-input:hover{background:var(--cds-layer-hover)}.cds--pagination .cds--select--inline .cds--select-input:focus,.cds--pagination .cds--select--inline .cds--select-input:focus optgroup,.cds--pagination .cds--select--inline .cds--select-input:focus option,:host(cds-pagination) .cds--select--inline .cds--select-input:focus,:host(cds-pagination) .cds--select--inline .cds--select-input:focus optgroup,:host(cds-pagination) .cds--select--inline .cds--select-input:focus option{background-color:var(--cds-layer)}.cds--pagination .cds--select__arrow,:host(cds-pagination) .cds--select__arrow{top:50%;transform:translate(-.5rem,-50%)}.cds--pagination .cds--select__item-count .cds--select-input,:host(cds-pagination) .cds--select__item-count .cds--select-input{border-right:1px solid var(--cds-border-subtle)}.cds--pagination__right{border-left:1px solid var(--cds-border-subtle)}.cds--pagination__left,.cds--pagination__right{display:flex;height:100%;align-items:center}.cds--pagination__left>.cds--form-item,.cds--pagination__right>.cds--form-item{height:100%}.cds--pagination__left .cds--pagination__text,.cds--pagination__right .cds--pagination__text{white-space:nowrap}.cds--pagination__left .cds--pagination__text{margin-right:.0625rem}.cds--pagination__right .cds--pagination__text{margin-right:1rem;margin-left:.0625rem}.cds--pagination__right .cds--pagination__text.cds--pagination__page-text{margin-right:.0625rem;margin-left:1rem}.cds--pagination__right .cds--pagination__text:empty{margin:0}.cds--pagination__left{padding:0 1rem 0 0}@media (min-width:42rem){.cds--pagination__left{padding:0 1rem}}@media (min-width:42rem){.cds--pagination__text{display:inline-block}}span.cds--pagination__text{margin-left:1rem;color:var(--cds-text-primary,#161616)}span.cds--pagination__text.cds--pagination__items-count{color:var(--cds-text-secondary,#525252)}.cds--btn--ghost.cds--pagination__button,.cds--pagination__button{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:flex;width:2.5rem;height:2.5rem;min-height:2rem;align-items:center;justify-content:center;border:none;border-left:1px solid var(--cds-border-subtle);margin:0;background:0 0;cursor:pointer;fill:var(--cds-icon-primary,#161616);transition:outline 110ms cubic-bezier(.2,0,.38,.9),background-color 110ms cubic-bezier(.2,0,.38,.9)}.cds--btn--ghost.cds--pagination__button *,.cds--btn--ghost.cds--pagination__button ::after,.cds--btn--ghost.cds--pagination__button ::before,.cds--pagination__button *,.cds--pagination__button ::after,.cds--pagination__button ::before{box-sizing:inherit}.cds--pagination--sm .cds--btn--ghost.cds--pagination__button,.cds--pagination--sm .cds--pagination__button{width:2rem;height:2rem}.cds--pagination--lg .cds--btn--ghost.cds--pagination__button,.cds--pagination--lg .cds--pagination__button{width:3rem;height:3rem}.cds--btn--ghost:focus.cds--pagination__button,.cds--pagination__button:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;border-left:0}@media screen and (prefers-contrast){.cds--btn--ghost:focus.cds--pagination__button,.cds--pagination__button:focus{outline-style:dotted}}.cds--btn--ghost:hover.cds--pagination__button,.cds--pagination__button:hover{background:var(--cds-layer-hover)}.cds--btn--ghost.cds--pagination__button--no-index,.cds--pagination__button--no-index{cursor:not-allowed;fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--btn--ghost:disabled:hover.cds--pagination__button,.cds--btn--ghost:hover.cds--pagination__button--no-index,.cds--pagination__button--no-index:hover,.cds--pagination__button:disabled:hover{border-color:var(--cds-border-subtle);background:var(--cds-layer);cursor:not-allowed;fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--pagination.cds--skeleton .cds--skeleton__text,.cds--skeleton:host(cds-pagination) .cds--skeleton__text{margin-right:1rem;margin-bottom:0}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--btn--ghost.cds--pagination__button,.cds--pagination__button{outline:1px solid transparent}}.cds--unstable-pagination{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;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;width:100%;min-height:2.5rem;align-items:center;justify-content:space-between;border-top:1px solid var(--cds-border-subtle);border-bottom:1px solid transparent;background-color:var(--cds-layer)}.cds--unstable-pagination *,.cds--unstable-pagination ::after,.cds--unstable-pagination ::before{box-sizing:inherit}.cds--unstable-pagination__text{margin:0 1rem;color:var(--cds-text-secondary,#525252)}@media (min-width:42rem){.cds--unstable-pagination__text{display:inline-block}}.cds--unstable-pagination__left,.cds--unstable-pagination__right{display:flex;height:100%;align-items:center}.cds--unstable-pagination__left{padding:0 1rem 0 0}.cds--unstable-pagination__left>.cds--form-item,.cds--unstable-pagination__right>.cds--form-item{height:100%}.cds--unstable-pagination__left .cds--unstable-pagination__text{margin-right:.0625rem}.cds--unstable-pagination__right .cds--unstable-pagination__text{margin-right:1rem;margin-left:.0625rem}.cds--unstable-pagination__button{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:flex;width:2.5rem;height:2.5rem;min-height:2rem;align-items:center;justify-content:center;border:none;border-left:1px solid var(--cds-border-subtle);margin:0;background:0 0;color:var(--cds-icon-primary,#161616);cursor:pointer;fill:var(--cds-icon-primary,#161616);transition:outline 110ms cubic-bezier(.2,0,.38,.9),background-color 110ms cubic-bezier(.2,0,.38,.9)}.cds--unstable-pagination__button *,.cds--unstable-pagination__button ::after,.cds--unstable-pagination__button ::before{box-sizing:inherit}.cds--unstable-pagination__button .cds--btn__icon{width:initial;height:initial}.cds--unstable-pagination__button.cds--btn--icon-only.cds--tooltip__trigger:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--unstable-pagination__button.cds--btn--icon-only.cds--tooltip__trigger:focus{outline-style:dotted}}.cds--unstable-pagination__button:hover{background:var(--cds-layer-hover);color:var(--cds-icon-primary,#161616)}.cds--unstable-pagination__button--no-index{cursor:not-allowed;fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--unstable-pagination__button.cds--btn:disabled{border-color:var(--cds-border-subtle);background:0 0}.cds--unstable-pagination__button--no-index:hover,.cds--unstable-pagination__button:disabled:hover{background:0 0;cursor:not-allowed;fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--unstable-pagination__page-selector,.cds--unstable-pagination__page-sizer{height:100%;align-items:center}.cds--unstable-pagination__page-selector .cds--select-input--inline__wrapper,.cds--unstable-pagination__page-sizer .cds--select-input--inline__wrapper{display:flex;height:100%}.cds--unstable-pagination__page-selector .cds--select-input,.cds--unstable-pagination__page-sizer .cds--select-input{font-size:var(--cds-body-short-01-font-size,.875rem);font-weight:var(--cds-body-short-01-font-weight,400);line-height:var(--cds-body-short-01-line-height,1.28572);letter-spacing:var(--cds-body-short-01-letter-spacing,.16px);width:auto;min-width:auto;height:100%;padding:0 2.25rem 0 1rem;line-height:2.5rem}.cds--unstable-pagination__page-selector .cds--select-input:hover,.cds--unstable-pagination__page-sizer .cds--select-input:hover{background:var(--cds-layer-hover)}.cds--unstable-pagination__page-selector .cds--select__arrow,.cds--unstable-pagination__page-sizer .cds--select__arrow{top:50%;transform:translateY(-50%)}@media (min-width:42rem){.cds--unstable-pagination__page-selector .cds--select__arrow,.cds--unstable-pagination__page-sizer .cds--select__arrow{right:1rem}}.cds--unstable-pagination__page-selector{border-left:1px solid var(--cds-border-subtle)}.cds--unstable-pagination__page-sizer{border-right:1px solid var(--cds-border-subtle)}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}:host(cds-pagination){position:relative;outline:0}:host(cds-pagination) .cds-ce--pagination__divider{height:100%;width:rem(1px);background-color:var(--cds-layer-accent-01,#e0e0e0)}:host(cds-pagination) .cds--pagination__control-buttons{height:100%}:host(cds-pagination) .cds--pagination__button svg{transform:rotate(0)}",
 ]);

package/es/components/pagination/pagination.d.ts

@@ -7,7 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { LitElement } from 'lit';
-declare const BXPagination_base: {
+import { PAGINATION_SIZE } from './defs';
+declare const CDSPagination_base: {
     new (...args: any[]): {
         focus(): void;
         accessKey: string;
@@ -637,7 +638,9 @@ declare const BXPagination_base: {
  * @fires cds-page-sizes-select-changed
  *   The custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
  */
-declare class BXPagination extends BXPagination_base {
+declare class CDSPagination extends CDSPagination_base {
+    private _pageSizeSelect;
+    private _handleSlotChange;
     /**
      * @returns Page status text.
      */
@@ -657,17 +660,26 @@ declare class BXPagination extends BXPagination_base {
      */
     private _handleClickNextButton;
     /**
-     * Handles user-initiated change in current page.
+     * Handles user-initiated change in number of rows per page.
      *
      * @param event The event.
      */
-    private _handleChangePage;
+    private _handleChangeSelector;
     /**
-     * Handles user-initiated change in number of rows per page.
-     *
-     * @param event The event.
+     * The assistive text for the button to go to previous page.
+     */
+    backwardText: string;
+    /**
+     * The current page
      */
-    private _handleChangePageSize;
+    page: number;
+    /**
+     * The formatter for the assistive text for screen readers to announce.
+     * Should be changed upon the locale the UI is rendered with.
+     */
+    formatLabelText: ({ count }: {
+        count: any;
+    }) => string;
     /**
      * The formatter, used with determinate the total pages. Should be changed upon the locale the UI is rendered with.
      */
@@ -679,14 +691,25 @@ declare class BXPagination extends BXPagination_base {
     /**
      * The formatter, used with indeterminate the total pages. Should be changed upon the locale the UI is rendered with.
      */
-    formatStatusWithIndeterminateTotal: ({ start, end }: {
+    formatStatusWithIndeterminateTotal: ({ start, end, count }: {
         start: any;
         end: any;
+        count: any;
+    }) => string;
+    /**
+     * The formatter for the text next to the select box. Should be changed upon the locale the UI is rendered with.
+     */
+    formatSupplementalText: ({ count }: {
+        count: any;
     }) => string;
     /**
      * `true` to explicitly state that user is at the last page.
      */
-    atLastPage: boolean;
+    isLastPage: boolean;
+    /**
+     * The translatable text indicating the number of items per page.
+     */
+    itemsPerPageText: string;
     /**
      * `true` if the pagination UI should be disabled.
      */
@@ -694,19 +717,31 @@ declare class BXPagination extends BXPagination_base {
     /**
      * The assistive text for the button to go to next page.
      */
-    nextButtonText: string;
+    forwardText: string;
+    /**
+     * true if the select box to change the page should be disabled.
+     */
+    pageInputDisabled: any;
     /**
      * Number of items per page.
      */
     pageSize: number;
+    /**
+     * true if the select box to change the items per page should be disabled.
+     */
+    pageSizeInputDisabled: any;
     /**
      * The label text for the UI to select page size.
      */
     pageSizeLabelText: string;
     /**
-     * The assistive text for the button to go to previous page.
+     * true if the total number of items is unknown.
+     */
+    pagesUnknown: boolean;
+    /**
+     * Specify the size of the Pagination.
      */
-    prevButtonText: string;
+    size: PAGINATION_SIZE;
     /**
      * The row number where current page start with, index that starts with zero.
      */
@@ -714,7 +749,11 @@ declare class BXPagination extends BXPagination_base {
     /**
      * The number of total items.
      */
-    total: number;
+    totalItems: number;
+    /**
+     * The number of total pages.
+     */
+    totalPages: number;
     updated(changedProperties: any): void;
     render(): import("lit-html").TemplateResult<1>;
     /**
@@ -729,14 +768,10 @@ declare class BXPagination extends BXPagination_base {
      * The name of the custom event fired after the current row number is changed.
      */
     static get eventChangeCurrent(): string;
-    /**
-     * The name of the custom event fired after the current page is changed from `<cds-pages-select>`.
-     */
-    static get eventChangePage(): string;
     /**
      * The name of the custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
      */
-    static get eventChangePageSize(): string;
+    static get eventChangeSelect(): string;
     static shadowRootOptions: {
         delegatesFocus: boolean;
         mode: ShadowRootMode;
@@ -744,6 +779,6 @@ declare class BXPagination extends BXPagination_base {
     };
     static styles: any;
 }
-export default BXPagination;
+export default CDSPagination;
 
 //# sourceMappingURL=pagination.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/pagination/pagination.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAavC;;;;;;;;GAQG;AACH,cACM,YAAa,SAAQ,iBAAyC;IAClE;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAsBzB;;;;OAIG;IACH,OAAO,CAAC,+BAA+B;IAgBvC;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAQ9B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAQ9B;;;;OAIG;IAGH,OAAO,CAAC,iBAAiB,CAIvB;IAEF;;;;OAIG;IAGH,OAAO,CAAC,qBAAqB,CAE3B;IAEF;;OAEG;IAEH,gCAAgC;;;;iBAC6B;IAE7D;;OAEG;IAEH,kCAAkC;;;iBACwB;IAE1D;;OAEG;IAEH,UAAU,EAAG,OAAO,CAAC;IAErB;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,cAAc,SAAe;IAE7B;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,iBAAiB,EAAG,MAAM,CAAC;IAE3B;;OAEG;IAEH,cAAc,SAAmB;IAEjC;;OAEG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,KAAK,EAAG,MAAM,CAAC;IAEf,OAAO,CAAC,iBAAiB,KAAA;IAuBzB,MAAM;IAwDN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;OAEG;IACH,MAAM,KAAK,kBAAkB,WAE5B;IAED;;OAEG;IACH,MAAM,KAAK,eAAe,WAEzB;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,YAAY,CAAC","file":"pagination.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 { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport CaretLeft16 from '@carbon/icons/lib/caret--left/16';\nimport CaretRight16 from '@carbon/icons/lib/caret--right/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport { forEach } from '../../globals/internal/collection-helpers';\nimport BXPagesSelect from './pages-select';\nimport BXPageSizesSelect from './page-sizes-select';\nimport styles from './pagination.scss';\n\n/**\n * Pagination UI.\n *\n * @element cds-pagination\n * @slot page-sizes-select - Where to put in the `<page-sizes-select>`.\n * @fires cds-pages-select-changed - The custom event fired after the current page is changed from `<cds-pages-select>`.\n * @fires cds-page-sizes-select-changed\n *   The custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.\n */\n@customElement(`${prefix}-pagination`)\nclass BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {\n  /**\n   * @returns Page status text.\n   */\n  private _renderStatusText() {\n    const {\n      atLastPage,\n      start,\n      pageSize,\n      total,\n      formatStatusWithDeterminateTotal,\n      formatStatusWithIndeterminateTotal,\n    } = this;\n    // * Regular: `1-10 of 100 items`\n    // * Indeterminate total: `Item 1-10` (`Item 11-` at the last page)\n    const end = atLastPage\n      ? undefined\n      : Math.min(start + pageSize, total == null ? Infinity : total);\n    const format =\n      total == null\n        ? formatStatusWithIndeterminateTotal\n        : formatStatusWithDeterminateTotal;\n    // `start`/`end` properties starts with zero, whereas we want to show number starting with 1\n    return format({ start: start + 1, end, count: total });\n  }\n\n  /**\n   * Handles user-initiated change in the row number the current page starts with.\n   *\n   * @param start The new current row number, index that starts with zero.\n   */\n  private _handleUserInitiatedChangeStart(start: number) {\n    this.start = start;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof BXPagination).eventChangeCurrent,\n        {\n          bubbles: true,\n          composed: true,\n          detail: {\n            start,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * Handles `click` event on the previous button.\n   */\n  private _handleClickPrevButton() {\n    const { start: oldStart, pageSize } = this;\n    const newStart = Math.max(oldStart - pageSize, 0);\n    if (newStart !== oldStart) {\n      this._handleUserInitiatedChangeStart(newStart);\n    }\n  }\n\n  /**\n   * Handles `click` event on the next button.\n   */\n  private _handleClickNextButton() {\n    const { start: oldStart, pageSize, total } = this;\n    const newStart = oldStart + pageSize;\n    if (newStart < (total == null ? Infinity : total)) {\n      this._handleUserInitiatedChangeStart(newStart);\n    }\n  }\n\n  /**\n   * Handles user-initiated change in current page.\n   *\n   * @param event The event.\n   */\n  @HostListener('eventChangePage')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleChangePage = ({ detail }: CustomEvent) => {\n    const { value } = detail;\n    const { pageSize } = this;\n    this._handleUserInitiatedChangeStart(value * pageSize);\n  };\n\n  /**\n   * Handles user-initiated change in number of rows per page.\n   *\n   * @param event The event.\n   */\n  @HostListener('eventChangePageSize')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleChangePageSize = ({ detail }: CustomEvent) => {\n    this.pageSize = detail.value;\n  };\n\n  /**\n   * The formatter, used with determinate the total pages. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatusWithDeterminateTotal = ({ start, end, count }) =>\n    `${start}–${end} of ${count} item${count <= 1 ? '' : 's'}`;\n\n  /**\n   * The formatter, used with indeterminate the total pages. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatusWithIndeterminateTotal = ({ start, end }) =>\n    end == null ? `Item ${start}–` : `Item ${start}–${end}`;\n\n  /**\n   * `true` to explicitly state that user is at the last page.\n   */\n  @property({ type: Boolean, attribute: 'at-last-page' })\n  atLastPage!: boolean;\n\n  /**\n   * `true` if the pagination UI should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The assistive text for the button to go to next page.\n   */\n  @property({ attribute: 'next-button-text' })\n  nextButtonText = 'Next page';\n\n  /**\n   * Number of items per page.\n   */\n  @property({ type: Number, attribute: 'page-size' })\n  pageSize = 10;\n\n  /**\n   * The label text for the UI to select page size.\n   */\n  @property({ attribute: 'page-size-label-text' })\n  pageSizeLabelText!: string;\n\n  /**\n   * The assistive text for the button to go to previous page.\n   */\n  @property({ attribute: 'prev-button-text' })\n  prevButtonText = 'Previous page';\n\n  /**\n   * The row number where current page start with, index that starts with zero.\n   */\n  @property({ type: Number })\n  start = 0;\n\n  /**\n   * The number of total items.\n   */\n  @property({ type: Number })\n  total!: number;\n\n  updated(changedProperties) {\n    const { pageSize } = this;\n    const { selectorPageSizesSelect, selectorPagesSelect } = this\n      .constructor as typeof BXPagination;\n    if (changedProperties.has('pageSize')) {\n      forEach(this.querySelectorAll(selectorPageSizesSelect), (elem) => {\n        (elem as BXPageSizesSelect).value = pageSize;\n      });\n    }\n    if (changedProperties.has('pageSize') || changedProperties.has('start')) {\n      const { start } = this;\n      forEach(this.querySelectorAll(selectorPagesSelect), (elem) => {\n        (elem as BXPagesSelect).value = Math.floor(start / pageSize);\n      });\n    }\n    if (changedProperties.has('pageSize') || changedProperties.has('total')) {\n      const { total } = this;\n      forEach(this.querySelectorAll(selectorPagesSelect), (elem) => {\n        (elem as BXPagesSelect).total = Math.ceil(total / pageSize);\n      });\n    }\n  }\n\n  render() {\n    const {\n      disabled,\n      nextButtonText,\n      prevButtonText,\n      pageSize,\n      start,\n      total,\n      _handleClickPrevButton: handleClickPrevButton,\n      _handleClickNextButton: handleClickNextButton,\n    } = this;\n    const { atLastPage = start + pageSize >= total } = this;\n    const prevButtonDisabled = disabled || start === 0;\n    const nextButtonDisabled = disabled || atLastPage;\n    const prevButtonClasses = classMap({\n      [`${prefix}--pagination__button`]: true,\n      [`${prefix}--pagination__button--backward`]: true,\n      [`${prefix}--pagination__button--no-index`]: prevButtonDisabled,\n    });\n    const nextButtonClasses = classMap({\n      [`${prefix}--pagination__button`]: true,\n      [`${prefix}--pagination__button--forward`]: true,\n      [`${prefix}--pagination__button--no-index`]: nextButtonDisabled,\n    });\n    return html`\n      <div class=\"${prefix}--pagination__left\">\n        <slot name=\"page-sizes-select\"></slot>\n        <div class=\"${prefix}-ce--pagination__divider\"></div>\n        <span\n          class=\"${prefix}--pagination__text ${prefix}--pagination__items-count\"\n          >${this._renderStatusText()}</span\n        >\n      </div>\n      <div class=\"${prefix}-ce--pagination__divider\"></div>\n      <div class=\"${prefix}--pagination__right\">\n        <slot></slot>\n        <div class=\"${prefix}--pagination__control-buttons\">\n          <button\n            ?disabled=\"${prevButtonDisabled}\"\n            class=\"${prevButtonClasses}\"\n            title=\"${prevButtonText}\"\n            @click=\"${handleClickPrevButton}\">\n            ${CaretLeft16()}\n          </button>\n          <button\n            ?disabled=\"${nextButtonDisabled}\"\n            class=\"${nextButtonClasses}\"\n            title=\"${nextButtonText}\"\n            @click=\"${handleClickNextButton}\">\n            ${CaretRight16()}\n          </button>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the select box for the current page.\n   */\n  static get selectorPagesSelect() {\n    return `${prefix}-pages-select`;\n  }\n\n  /**\n   * A selector that will return the select box for page sizes.\n   */\n  static get selectorPageSizesSelect() {\n    return `${prefix}-page-sizes-select`;\n  }\n\n  /**\n   * The name of the custom event fired after the current row number is changed.\n   */\n  static get eventChangeCurrent() {\n    return `${prefix}-pagination-changed-current`;\n  }\n\n  /**\n   * The name of the custom event fired after the current page is changed from `<cds-pages-select>`.\n   */\n  static get eventChangePage() {\n    return `${prefix}-pages-select-changed`;\n  }\n\n  /**\n   * The name of the custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.\n   */\n  static get eventChangePageSize() {\n    return `${prefix}-page-sizes-select-changed`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default BXPagination;\n"]}
+{"version":3,"sources":["components/pagination/pagination.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AASvC,OAAO,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGzC;;;;;;;;GAQG;AACH,cACM,aAAc,SAAQ,kBAAyC;IAEnE,OAAO,CAAC,eAAe,CAAe;IAEtC,OAAO,CAAC,iBAAiB;IAYzB;;OAEG;IACH,OAAO,CAAC,iBAAiB;IAwBzB;;;;OAIG;IACH,OAAO,CAAC,+BAA+B;IAiBvC;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAS9B;;OAEG;IACH,OAAO,CAAC,sBAAsB;IAS9B;;;;OAIG;IAGH,OAAO,CAAC,qBAAqB;IAe7B;;OAEG;IAEH,YAAY,SAAmB;IAE/B;;OAEG;IAEH,IAAI,SAAK;IAET;;;OAGG;IAEH,eAAe;;iBAC2C;IAE1D;;OAEG;IAEH,gCAAgC;;;;iBAC6B;IAE7D;;OAEG;IAEH,kCAAkC;;;;iBAGmB;IAErD;;OAEG;IAEH,sBAAsB;;iBAG2B;IACjD;;OAEG;IAEH,UAAU,EAAG,OAAO,CAAC;IAErB;;OAEG;IAEH,gBAAgB,SAAqB;IAErC;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,WAAW,SAAe;IAE1B;;OAEG;IAEH,iBAAiB,MAAC;IAElB;;OAEG;IAEH,QAAQ,SAAM;IAEd;;OAEG;IAEH,qBAAqB,MAAC;IAEtB;;OAEG;IAEH,iBAAiB,EAAG,MAAM,CAAC;IAE3B;;OAEG;IAEH,YAAY,UAAS;IAErB;;OAEG;IAEH,IAAI,kBAA0B;IAE9B;;OAEG;IAEH,KAAK,SAAK;IAEV;;OAEG;IAEH,UAAU,EAAG,MAAM,CAAC;IAEpB;;OAEG;IAEH,UAAU,SAAK;IAEf,OAAO,CAAC,iBAAiB,KAAA;IAoBzB,MAAM;IAgJN;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;OAEG;IACH,MAAM,KAAK,kBAAkB,WAE5B;IAED;;OAEG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED,MAAM,CAAC,iBAAiB;;;;MAGtB;IACF,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,aAAa,CAAC","file":"pagination.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 CaretLeft16 from '@carbon/icons/lib/caret--left/16';\nimport CaretRight16 from '@carbon/icons/lib/caret--right/16';\nimport { prefix } from '../../globals/settings';\nimport FocusMixin from '../../globals/mixins/focus';\nimport HostListenerMixin from '../../globals/mixins/host-listener';\nimport HostListener from '../../globals/decorators/host-listener';\nimport styles from './pagination.scss';\nimport { PAGINATION_SIZE } from './defs';\nimport CDSSelect from '../select/select';\n\n/**\n * Pagination UI.\n *\n * @element cds-pagination\n * @slot page-sizes-select - Where to put in the `<page-sizes-select>`.\n * @fires cds-pages-select-changed - The custom event fired after the current page is changed from `<cds-pages-select>`.\n * @fires cds-page-sizes-select-changed\n *   The custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.\n */\n@customElement(`${prefix}-pagination`)\nclass CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {\n  @query(`${prefix}-select`)\n  private _pageSizeSelect!: HTMLElement;\n\n  private _handleSlotChange({ target }: Event) {\n    const content = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter(\n        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n\n    content.forEach((item) => {\n      this._pageSizeSelect.appendChild(item);\n    });\n  }\n\n  /**\n   * @returns Page status text.\n   */\n  private _renderStatusText() {\n    const {\n      start,\n      pageSize,\n      totalItems,\n      pagesUnknown,\n      formatStatusWithDeterminateTotal,\n      formatStatusWithIndeterminateTotal,\n    } = this;\n    // * Regular: `1-10 of 100 items`\n    // * Indeterminate total: `Item 1-10` (`Item 11-` at the last page)\n    const end = Math.min(\n      start + pageSize,\n      totalItems == null ? Infinity : totalItems\n    );\n    const format =\n      totalItems == null || pagesUnknown\n        ? formatStatusWithIndeterminateTotal\n        : formatStatusWithDeterminateTotal;\n\n    // `start`/`end` properties starts with zero, whereas we want to show number starting with 1\n    return format({ start: start + 1, end, count: totalItems });\n  }\n\n  /**\n   * Handles user-initiated change in the row number the current page starts with.\n   *\n   * @param start The new current row number, index that starts with zero.\n   */\n  private _handleUserInitiatedChangeStart(start: number) {\n    this.start = start;\n    this.dispatchEvent(\n      new CustomEvent(\n        (this.constructor as typeof CDSPagination).eventChangeCurrent,\n        {\n          bubbles: true,\n          composed: true,\n          detail: {\n            page: this.page,\n            pageSize: this.pageSize,\n          },\n        }\n      )\n    );\n  }\n\n  /**\n   * Handles `click` event on the previous button.\n   */\n  private _handleClickPrevButton() {\n    const { start: oldStart, pageSize } = this;\n    this.page--;\n    const newStart = Math.max(oldStart - pageSize, 0);\n    if (newStart !== oldStart) {\n      this._handleUserInitiatedChangeStart(newStart);\n    }\n  }\n\n  /**\n   * Handles `click` event on the next button.\n   */\n  private _handleClickNextButton() {\n    const { start: oldStart, pageSize, totalItems } = this;\n    this.page++;\n    const newStart = oldStart + pageSize;\n    if (newStart < (totalItems == null ? Infinity : totalItems)) {\n      this._handleUserInitiatedChangeStart(newStart);\n    }\n  }\n\n  /**\n   * Handles user-initiated change in number of rows per page.\n   *\n   * @param event The event.\n   */\n  @HostListener('eventChangeSelect')\n  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to\n  private _handleChangeSelector(event) {\n    const { value } = event.detail;\n    const { totalItems, pageSize } = this;\n\n    if (event.composedPath()[0] === this._pageSizeSelect) {\n      this.pageSize = parseInt(value);\n      this.totalPages = Math.ceil(totalItems / pageSize);\n      this.page = 1;\n      this.start = 0;\n    } else {\n      this.page = value;\n      this._handleUserInitiatedChangeStart((value - 1) * pageSize);\n    }\n  }\n\n  /**\n   * The assistive text for the button to go to previous page.\n   */\n  @property({ attribute: 'backward-text' })\n  backwardText = 'Previous page';\n\n  /**\n   * The current page\n   */\n  @property({ type: Number, reflect: true })\n  page = 1;\n\n  /**\n   * The formatter for the assistive text for screen readers to announce.\n   * Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatLabelText = ({ count }) =>\n    `Page number, of ${count} page${count <= 1 ? '' : 's'}`;\n\n  /**\n   * The formatter, used with determinate the total pages. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatusWithDeterminateTotal = ({ start, end, count }) =>\n    `${start}–${end} of ${count} item${count <= 1 ? '' : 's'}`;\n\n  /**\n   * The formatter, used with indeterminate the total pages. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatStatusWithIndeterminateTotal = ({ start, end, count }) =>\n    end == null\n      ? `Item ${start}–`\n      : `${start}–${end} item${count <= 1 ? '' : 's'}`;\n\n  /**\n   * The formatter for the text next to the select box. Should be changed upon the locale the UI is rendered with.\n   */\n  @property({ attribute: false })\n  formatSupplementalText = ({ count }) =>\n    this.pagesUnknown || !this.totalItems\n      ? `page`\n      : `of ${count} page${count <= 1 ? '' : 's'}`;\n  /**\n   * `true` to explicitly state that user is at the last page.\n   */\n  @property({ type: Boolean, attribute: 'is-last-page' })\n  isLastPage!: boolean;\n\n  /**\n   * The translatable text indicating the number of items per page.\n   */\n  @property({ attribute: 'items-per-page-text' })\n  itemsPerPageText = 'Items per page:';\n\n  /**\n   * `true` if the pagination UI should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * The assistive text for the button to go to next page.\n   */\n  @property({ attribute: 'forward-text' })\n  forwardText = 'Next page';\n\n  /**\n   * true if the select box to change the page should be disabled.\n   */\n  @property({ attribute: 'page-input-disabled' })\n  pageInputDisabled;\n\n  /**\n   * Number of items per page.\n   */\n  @property({ type: Number, attribute: 'page-size', reflect: true })\n  pageSize = 10;\n\n  /**\n   * true if the select box to change the items per page should be disabled.\n   */\n  @property({ type: Boolean, attribute: 'page-size-input-disabled' })\n  pageSizeInputDisabled;\n\n  /**\n   * The label text for the UI to select page size.\n   */\n  @property({ attribute: 'page-size-label-text' })\n  pageSizeLabelText!: string;\n\n  /**\n   * true if the total number of items is unknown.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'pages-unknown' })\n  pagesUnknown = false;\n\n  /**\n   * Specify the size of the Pagination.\n   */\n  @property({ reflect: true })\n  size = PAGINATION_SIZE.MEDIUM;\n\n  /**\n   * The row number where current page start with, index that starts with zero.\n   */\n  @property({ type: Number })\n  start = 0;\n\n  /**\n   * The number of total items.\n   */\n  @property({ type: Number, attribute: 'total-items' })\n  totalItems!: number;\n\n  /**\n   * The number of total pages.\n   */\n  @property({ type: Number })\n  totalPages = 1;\n\n  updated(changedProperties) {\n    const { page, pageSize, totalItems } = this;\n    const { selectorPageSizesSelect, selectorPagesSelect } = this\n      .constructor as typeof CDSPagination;\n\n    if (changedProperties.has('pageSize')) {\n      (this.shadowRoot!.querySelector(selectorPageSizesSelect) as any).value =\n        pageSize;\n    }\n    if (changedProperties.has('pageSize') || changedProperties.has('start')) {\n      this.totalPages = Math.ceil(totalItems / pageSize);\n      (this.shadowRoot!.querySelector(selectorPagesSelect) as CDSSelect).value =\n        this.page.toString();\n    }\n\n    if (changedProperties.has('page')) {\n      this._handleUserInitiatedChangeStart((page - 1) * pageSize);\n    }\n  }\n\n  render() {\n    const {\n      page,\n      disabled,\n      forwardText,\n      backwardText,\n      itemsPerPageText,\n      pageInputDisabled,\n      pageSize,\n      pageSizeInputDisabled,\n      pagesUnknown,\n      size,\n      start,\n      totalItems,\n      totalPages,\n      _handleClickPrevButton: handleClickPrevButton,\n      _handleClickNextButton: handleClickNextButton,\n      _handleSlotChange: handleSlotChange,\n      formatLabelText,\n      formatSupplementalText,\n    } = this;\n\n    const { isLastPage = start + pageSize >= totalItems } = this;\n    const prevButtonDisabled = disabled || start === 0;\n    const nextButtonDisabled = disabled || isLastPage;\n\n    const prevButtonClassMap = {\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--icon-only`]: true,\n      [`${prefix}--pagination__button`]: true,\n      [`${prefix}--pagination__button--backward`]: true,\n      [`${prefix}--pagination__button--no-index`]: prevButtonDisabled,\n      [`${prefix}--btn--${size}`]: true,\n      [`${prefix}--btn--ghost`]: true,\n    };\n    const nextButtonClassMap = {\n      [`${prefix}--btn`]: true,\n      [`${prefix}--btn--icon-only`]: true,\n      [`${prefix}--pagination__button`]: true,\n      [`${prefix}--pagination__button--forward`]: true,\n      [`${prefix}--pagination__button--no-index`]: nextButtonDisabled,\n      [`${prefix}--btn--${size}`]: true,\n      [`${prefix}--btn--ghost`]: true,\n    };\n\n    const prevButtonClasses = Object.entries(prevButtonClassMap)\n      .filter(([, value]) => value === true)\n      .map(([key]) => key)\n      .join(' ');\n    const nextButtonClasses = Object.entries(nextButtonClassMap)\n      .filter(([, value]) => value === true)\n      .map(([key]) => key)\n      .join(' ');\n\n    return html`\n      <div class=\"${prefix}--pagination__left\">\n        <label for=\"select\" class=\"${prefix}--pagination__text\"\n          ><slot name=\"label-text\">${itemsPerPageText}</slot></label\n        >\n        <cds-select\n          ?disabled=${disabled || pageSizeInputDisabled}\n          id=\"page-size-select\"\n          left-select\n          pagination\n          inline\n          value=\"${pageSize}\">\n          <slot @slotchange=${handleSlotChange}></slot>\n        </cds-select>\n        <span\n          class=\"${prefix}--pagination__text ${prefix}--pagination__items-count\"\n          >${this._renderStatusText()}</span\n        >\n      </div>\n      <div class=\"${prefix}--pagination__right\">\n        <label for=\"select\" class=\"${prefix}--label ${prefix}--visually-hidden\">\n          ${formatLabelText({ count: totalPages })}\n        </label>\n        ${pagesUnknown || !totalItems\n          ? html`\n              <span\n                class=\"${prefix}--pagination__text ${prefix}--pagination__page-text\"\n                >${formatSupplementalText({ count: totalPages })}</span\n              >\n\n              <cds-select\n                ?disabled=${disabled || pageInputDisabled}\n                id=\"pages-select\"\n                pagination\n                inline\n                value=\"${page}\">\n                ${Array.from(new Array(totalPages)).map(\n                  (_item, index) =>\n                    html`\n                      <cds-select-item value=\"${index + 1}\">\n                        ${index + 1}\n                      </cds-select-item>\n                    `\n                )}\n              </cds-select>\n            `\n          : html`\n              <cds-select\n                ?disabled=${disabled || pageInputDisabled}\n                id=\"pages-select\"\n                pagination\n                inline\n                value=\"${page}\">\n                ${Array.from(new Array(totalPages)).map(\n                  (_item, index) =>\n                    html`\n                      <cds-select-item value=\"${index + 1}\">\n                        ${index + 1}\n                      </cds-select-item>\n                    `\n                )}\n              </cds-select>\n              <span class=\"${prefix}--pagination__text\"\n                >${formatSupplementalText({ count: totalPages })}</span\n              >\n            `}\n\n        <div class=\"${prefix}--pagination__control-buttons\">\n          <cds-button\n            pagination\n            ?disabled=\"${prevButtonDisabled}\"\n            class-name=\"${prevButtonClasses}\"\n            tooltip-text=\"${backwardText}\"\n            @click=\"${handleClickPrevButton}\">\n            ${CaretLeft16({ slot: 'icon' })}\n          </cds-button>\n          <cds-button\n            tooltip-position=\"top-right\"\n            pagination\n            ?disabled=\"${nextButtonDisabled}\"\n            class-name=\"${nextButtonClasses}\"\n            tooltip-text=\"${forwardText}\"\n            @click=\"${handleClickNextButton}\">\n            ${CaretRight16({ slot: 'icon' })}\n          </cds-button>\n        </div>\n      </div>\n    `;\n  }\n\n  /**\n   * A selector that will return the select box for the current page.\n   */\n  static get selectorPagesSelect() {\n    return `${prefix}-select#pages-select`;\n  }\n\n  /**\n   * A selector that will return the select box for page sizes.\n   */\n  static get selectorPageSizesSelect() {\n    return `${prefix}-select`;\n  }\n\n  /**\n   * The name of the custom event fired after the current row number is changed.\n   */\n  static get eventChangeCurrent() {\n    return `${prefix}-pagination-changed-current`;\n  }\n\n  /**\n   * The name of the custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.\n   */\n  static get eventChangeSelect() {\n    return `${prefix}-select-selected`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader\n}\n\nexport default CDSPagination;\n"]}