@carbon/web-components 2.0.0-beta.3 → 2.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -9
- package/custom-elements.json +4026 -1801
- package/es/components/breadcrumb/breadcrumb.css.js +1 -1
- package/es/components/breadcrumb/breadcrumb.rtl.css.js +1 -1
- package/es/components/button/button.css.js +1 -1
- package/es/components/button/button.d.ts +12 -4
- package/es/components/button/button.d.ts.map +1 -1
- package/es/components/button/button.js +57 -19
- package/es/components/button/button.js.map +1 -1
- package/es/components/button/button.rtl.css.js +1 -1
- package/es/components/checkbox/checkbox.css.js +1 -1
- package/es/components/checkbox/checkbox.d.ts +9 -0
- package/es/components/checkbox/checkbox.d.ts.map +1 -1
- package/es/components/checkbox/checkbox.js +32 -1
- package/es/components/checkbox/checkbox.js.map +1 -1
- package/es/components/checkbox/checkbox.rtl.css.js +1 -1
- package/es/components/code-snippet/code-snippet-skeleton.d.ts +2 -2
- package/es/components/code-snippet/code-snippet-skeleton.d.ts.map +1 -1
- package/es/components/code-snippet/code-snippet-skeleton.js +4 -4
- package/es/components/code-snippet/code-snippet-skeleton.js.map +1 -1
- package/es/components/code-snippet/code-snippet.css.js +1 -1
- package/es/components/code-snippet/code-snippet.d.ts +75 -29
- package/es/components/code-snippet/code-snippet.d.ts.map +1 -1
- package/es/components/code-snippet/code-snippet.js +370 -164
- package/es/components/code-snippet/code-snippet.js.map +1 -1
- package/es/components/code-snippet/code-snippet.rtl.css.js +1 -1
- package/es/components/copy/copy.d.ts +1 -2
- package/es/components/copy/copy.d.ts.map +1 -1
- package/es/components/copy/copy.js +6 -13
- package/es/components/copy/copy.js.map +1 -1
- package/es/components/copy-button/copy-button.css.js +1 -1
- package/es/components/copy-button/copy-button.d.ts +8 -0
- package/es/components/copy-button/copy-button.d.ts.map +1 -1
- package/es/components/copy-button/copy-button.js +38 -2
- package/es/components/copy-button/copy-button.js.map +1 -1
- package/es/components/copy-button/copy-button.rtl.css.js +1 -1
- package/es/components/data-table/data-table.css.js +1 -1
- package/es/components/data-table/data-table.rtl.css.js +1 -1
- package/es/components/data-table/defs.d.ts +0 -13
- package/es/components/data-table/defs.d.ts.map +1 -1
- package/es/components/data-table/defs.js +0 -9
- package/es/components/data-table/defs.js.map +1 -1
- package/es/components/data-table/index.d.ts +6 -5
- package/es/components/data-table/index.d.ts.map +1 -1
- package/es/components/data-table/index.js +6 -5
- package/es/components/data-table/index.js.map +1 -1
- package/es/components/data-table/table-batch-actions.d.ts +7 -2
- package/es/components/data-table/table-batch-actions.d.ts.map +1 -1
- package/es/components/data-table/table-batch-actions.js +25 -6
- package/es/components/data-table/table-batch-actions.js.map +1 -1
- package/es/components/data-table/table-body.d.ts +8 -4
- package/es/components/data-table/table-body.d.ts.map +1 -1
- package/es/components/data-table/table-body.js +21 -14
- package/es/components/data-table/table-body.js.map +1 -1
- package/es/components/data-table/table-cell-content.d.ts +21 -0
- package/es/components/data-table/table-cell-content.d.ts.map +1 -0
- package/es/components/data-table/table-cell-content.js +53 -0
- package/es/components/data-table/table-cell-content.js.map +1 -0
- package/es/components/data-table/table-cell.d.ts +15 -2
- package/es/components/data-table/table-cell.d.ts.map +1 -1
- package/es/components/data-table/table-cell.js +43 -8
- package/es/components/data-table/table-cell.js.map +1 -1
- package/es/components/data-table/table-expanded-row.d.ts +336 -2
- package/es/components/data-table/table-expanded-row.d.ts.map +1 -1
- package/es/components/data-table/table-expanded-row.js +69 -16
- package/es/components/data-table/table-expanded-row.js.map +1 -1
- package/es/components/data-table/table-head.d.ts +7 -2
- package/es/components/data-table/table-head.d.ts.map +1 -1
- package/es/components/data-table/table-head.js +15 -6
- package/es/components/data-table/table-head.js.map +1 -1
- package/es/components/data-table/table-header-cell.d.ts +21 -3
- package/es/components/data-table/table-header-cell.d.ts.map +1 -1
- package/es/components/data-table/table-header-cell.js +67 -10
- package/es/components/data-table/table-header-cell.js.map +1 -1
- package/es/components/data-table/table-header-description.d.ts +21 -0
- package/es/components/data-table/table-header-description.d.ts.map +1 -0
- package/es/components/data-table/table-header-description.js +53 -0
- package/es/components/data-table/table-header-description.js.map +1 -0
- package/es/components/data-table/table-header-row.d.ts +3 -3
- package/es/components/data-table/table-header-row.d.ts.map +1 -1
- package/es/components/data-table/table-header-row.js +6 -6
- package/es/components/data-table/table-header-row.js.map +1 -1
- package/es/components/data-table/table-header-title.d.ts +21 -0
- package/es/components/data-table/table-header-title.d.ts.map +1 -0
- package/es/components/data-table/table-header-title.js +53 -0
- package/es/components/data-table/table-header-title.js.map +1 -0
- package/es/components/data-table/table-row.d.ts +413 -5
- package/es/components/data-table/table-row.d.ts.map +1 -1
- package/es/components/data-table/table-row.js +386 -45
- package/es/components/data-table/table-row.js.map +1 -1
- package/es/components/data-table/table-skeleton.d.ts +59 -0
- package/es/components/data-table/table-skeleton.d.ts.map +1 -0
- package/es/components/data-table/table-skeleton.js +259 -0
- package/es/components/data-table/table-skeleton.js.map +1 -0
- package/es/components/data-table/table-toolbar-content.d.ts +6 -2
- package/es/components/data-table/table-toolbar-content.d.ts.map +1 -1
- package/es/components/data-table/table-toolbar-content.js +21 -4
- package/es/components/data-table/table-toolbar-content.js.map +1 -1
- package/es/components/data-table/table-toolbar-search.d.ts +7 -3
- package/es/components/data-table/table-toolbar-search.d.ts.map +1 -1
- package/es/components/data-table/table-toolbar-search.js +25 -8
- package/es/components/data-table/table-toolbar-search.js.map +1 -1
- package/es/components/data-table/table-toolbar.d.ts +19 -2
- package/es/components/data-table/table-toolbar.d.ts.map +1 -1
- package/es/components/data-table/table-toolbar.js +68 -13
- package/es/components/data-table/table-toolbar.js.map +1 -1
- package/es/components/data-table/table.d.ts +556 -6
- package/es/components/data-table/table.d.ts.map +1 -1
- package/es/components/data-table/table.js +1012 -15
- package/es/components/data-table/table.js.map +1 -1
- package/es/components/dropdown/defs.d.ts +6 -6
- package/es/components/dropdown/defs.d.ts.map +1 -1
- package/es/components/dropdown/defs.js +2 -2
- package/es/components/dropdown/defs.js.map +1 -1
- package/es/components/dropdown/dropdown-item.d.ts.map +1 -1
- package/es/components/dropdown/dropdown-item.js +1 -1
- package/es/components/dropdown/dropdown-item.js.map +1 -1
- package/es/components/dropdown/dropdown.d.ts +9 -2
- package/es/components/dropdown/dropdown.d.ts.map +1 -1
- package/es/components/dropdown/dropdown.js +83 -62
- package/es/components/dropdown/dropdown.js.map +1 -1
- package/es/components/file-uploader/demo-file-uploader.d.ts +1 -1
- package/es/components/file-uploader/demo-file-uploader.d.ts.map +1 -1
- package/es/components/file-uploader/demo-file-uploader.js +38 -4
- package/es/components/file-uploader/demo-file-uploader.js.map +1 -1
- package/es/components/floating-menu/defs.d.ts +1 -39
- package/es/components/floating-menu/defs.d.ts.map +1 -1
- package/es/components/floating-menu/defs.js +2 -23
- package/es/components/floating-menu/defs.js.map +1 -1
- package/es/components/floating-menu/floating-menu-trigger.d.ts +3 -3
- package/es/components/floating-menu/floating-menu-trigger.d.ts.map +1 -1
- package/es/components/floating-menu/floating-menu.d.ts +11 -13
- package/es/components/floating-menu/floating-menu.d.ts.map +1 -1
- package/es/components/floating-menu/floating-menu.js +44 -54
- package/es/components/floating-menu/floating-menu.js.map +1 -1
- package/es/components/form/form-item.d.ts +2 -2
- package/es/components/form/form-item.d.ts.map +1 -1
- package/es/components/form/form-item.js +4 -4
- package/es/components/form/form-item.js.map +1 -1
- package/es/components/form-group/form-group.css.js +12 -0
- package/es/components/form-group/form-group.d.ts +44 -0
- package/es/components/form-group/form-group.d.ts.map +1 -0
- package/es/components/form-group/form-group.js +141 -0
- package/es/components/form-group/form-group.js.map +1 -0
- package/es/components/form-group/form-group.rtl.css.js +12 -0
- package/es/components/form-group/index.d.ts +11 -0
- package/es/components/form-group/index.d.ts.map +1 -0
- package/es/components/form-group/index.js +11 -0
- package/es/components/form-group/index.js.map +1 -0
- package/es/components/icon-button/icon-button.css.js +1 -1
- package/es/components/icon-button/icon-button.d.ts +1 -1
- package/es/components/icon-button/icon-button.d.ts.map +1 -1
- package/es/components/icon-button/icon-button.js +5 -3
- package/es/components/icon-button/icon-button.js.map +1 -1
- package/es/components/icon-button/icon-button.rtl.css.js +1 -1
- package/es/components/list/list.css.js +1 -1
- package/es/components/list/list.rtl.css.js +1 -1
- package/es/components/modal/defs.d.ts +3 -3
- package/es/components/modal/defs.d.ts.map +1 -1
- package/es/components/modal/defs.js +2 -2
- package/es/components/modal/defs.js.map +1 -1
- package/es/components/modal/index.d.ts +2 -1
- package/es/components/modal/index.d.ts.map +1 -1
- package/es/components/modal/index.js +2 -1
- package/es/components/modal/index.js.map +1 -1
- package/es/components/modal/modal-body-content.d.ts +21 -0
- package/es/components/modal/modal-body-content.d.ts.map +1 -0
- package/es/components/modal/modal-body-content.js +53 -0
- package/es/components/modal/modal-body-content.js.map +1 -0
- package/es/components/modal/modal-body.d.ts +2 -2
- package/es/components/modal/modal-body.d.ts.map +1 -1
- package/es/components/modal/modal-body.js +4 -4
- package/es/components/modal/modal-body.js.map +1 -1
- package/es/components/modal/modal-close-button.d.ts +5 -5
- package/es/components/modal/modal-close-button.d.ts.map +1 -1
- package/es/components/modal/modal-close-button.js +9 -9
- package/es/components/modal/modal-close-button.js.map +1 -1
- package/es/components/modal/modal-footer.d.ts +3 -3
- package/es/components/modal/modal-footer.d.ts.map +1 -1
- package/es/components/modal/modal-footer.js +13 -21
- package/es/components/modal/modal-footer.js.map +1 -1
- package/es/components/modal/modal-header.d.ts +2 -2
- package/es/components/modal/modal-header.d.ts.map +1 -1
- package/es/components/modal/modal-header.js +4 -4
- package/es/components/modal/modal-header.js.map +1 -1
- package/es/components/modal/modal-heading.d.ts +2 -2
- package/es/components/modal/modal-heading.d.ts.map +1 -1
- package/es/components/modal/modal-heading.js +4 -4
- package/es/components/modal/modal-heading.js.map +1 -1
- package/es/components/modal/modal-label.d.ts +2 -2
- package/es/components/modal/modal-label.d.ts.map +1 -1
- package/es/components/modal/modal-label.js +4 -4
- package/es/components/modal/modal-label.js.map +1 -1
- package/es/components/modal/modal.css.js +1 -1
- package/es/components/modal/modal.d.ts +33 -3
- package/es/components/modal/modal.d.ts.map +1 -1
- package/es/components/modal/modal.js +121 -14
- package/es/components/modal/modal.js.map +1 -1
- package/es/components/modal/modal.rtl.css.js +1 -1
- package/es/components/multi-select/defs.d.ts +27 -0
- package/es/components/multi-select/defs.d.ts.map +1 -0
- package/es/components/multi-select/defs.js +19 -0
- package/es/components/multi-select/defs.js.map +1 -0
- package/es/components/multi-select/multi-select-item.d.ts.map +1 -1
- package/es/components/multi-select/multi-select-item.js +9 -14
- package/es/components/multi-select/multi-select-item.js.map +1 -1
- package/es/components/multi-select/multi-select.css.js +1 -1
- package/es/components/multi-select/multi-select.d.ts +44 -5
- package/es/components/multi-select/multi-select.d.ts.map +1 -1
- package/es/components/multi-select/multi-select.js +250 -32
- package/es/components/multi-select/multi-select.js.map +1 -1
- package/es/components/multi-select/multi-select.rtl.css.js +1 -1
- package/es/components/number-input/number-input.css.js +1 -1
- package/es/components/number-input/number-input.d.ts.map +1 -1
- package/es/components/number-input/number-input.js +1 -1
- package/es/components/number-input/number-input.js.map +1 -1
- package/es/components/number-input/number-input.rtl.css.js +1 -1
- package/es/components/overflow-menu/defs.d.ts +4 -9
- package/es/components/overflow-menu/defs.d.ts.map +1 -1
- package/es/components/overflow-menu/defs.js +1 -4
- package/es/components/overflow-menu/defs.js.map +1 -1
- package/es/components/overflow-menu/overflow-menu-body.d.ts +16 -15
- package/es/components/overflow-menu/overflow-menu-body.d.ts.map +1 -1
- package/es/components/overflow-menu/overflow-menu-body.js +49 -28
- package/es/components/overflow-menu/overflow-menu-body.js.map +1 -1
- package/es/components/overflow-menu/overflow-menu-item.d.ts +12 -3
- package/es/components/overflow-menu/overflow-menu-item.d.ts.map +1 -1
- package/es/components/overflow-menu/overflow-menu-item.js +44 -12
- package/es/components/overflow-menu/overflow-menu-item.js.map +1 -1
- package/es/components/overflow-menu/overflow-menu.css.js +1 -1
- package/es/components/overflow-menu/overflow-menu.d.ts +22 -10
- package/es/components/overflow-menu/overflow-menu.d.ts.map +1 -1
- package/es/components/overflow-menu/overflow-menu.js +89 -40
- package/es/components/overflow-menu/overflow-menu.js.map +1 -1
- package/es/components/overflow-menu/overflow-menu.rtl.css.js +1 -1
- package/es/components/pagination/defs.d.ts +27 -0
- package/es/components/pagination/defs.d.ts.map +1 -0
- package/es/components/pagination/defs.js +19 -0
- package/es/components/pagination/defs.js.map +1 -0
- package/es/components/pagination/index.d.ts +1 -3
- package/es/components/pagination/index.d.ts.map +1 -1
- package/es/components/pagination/index.js +1 -3
- package/es/components/pagination/index.js.map +1 -1
- package/es/components/pagination/pagination.css.js +1 -1
- package/es/components/pagination/pagination.d.ts +55 -20
- package/es/components/pagination/pagination.d.ts.map +1 -1
- package/es/components/pagination/pagination.js +303 -123
- package/es/components/pagination/pagination.js.map +1 -1
- package/es/components/pagination/pagination.rtl.css.js +1 -1
- package/es/components/progress-indicator/progress-indicator-skeleton.d.ts +1 -2
- package/es/components/progress-indicator/progress-indicator-skeleton.d.ts.map +1 -1
- package/es/components/progress-indicator/progress-indicator-skeleton.js +5 -5
- package/es/components/progress-indicator/progress-indicator-skeleton.js.map +1 -1
- package/es/components/progress-indicator/progress-indicator.css.js +1 -1
- package/es/components/progress-indicator/progress-indicator.d.ts +8 -3
- package/es/components/progress-indicator/progress-indicator.d.ts.map +1 -1
- package/es/components/progress-indicator/progress-indicator.js +35 -8
- package/es/components/progress-indicator/progress-indicator.js.map +1 -1
- package/es/components/progress-indicator/progress-indicator.rtl.css.js +1 -1
- package/es/components/progress-indicator/progress-step-skeleton.d.ts +2 -2
- package/es/components/progress-indicator/progress-step-skeleton.d.ts.map +1 -1
- package/es/components/progress-indicator/progress-step-skeleton.js +12 -12
- package/es/components/progress-indicator/progress-step-skeleton.js.map +1 -1
- package/es/components/progress-indicator/progress-step.d.ts +11 -3
- package/es/components/progress-indicator/progress-step.d.ts.map +1 -1
- package/es/components/progress-indicator/progress-step.js +65 -24
- package/es/components/progress-indicator/progress-step.js.map +1 -1
- package/es/components/radio-button/radio-button.css.js +1 -1
- package/es/components/radio-button/radio-button.d.ts +4 -0
- package/es/components/radio-button/radio-button.d.ts.map +1 -1
- package/es/components/radio-button/radio-button.js +22 -0
- package/es/components/radio-button/radio-button.js.map +1 -1
- package/es/components/radio-button/radio-button.rtl.css.js +1 -1
- package/es/components/select/select.css.js +1 -1
- package/es/components/select/select.d.ts.map +1 -1
- package/es/components/select/select.js +3 -1
- package/es/components/select/select.js.map +1 -1
- package/es/components/select/select.rtl.css.js +1 -1
- package/es/components/slider/slider.css.js +1 -1
- package/es/components/slider/slider.rtl.css.js +1 -1
- package/es/components/stack/defs.d.ts +29 -0
- package/es/components/stack/defs.d.ts.map +1 -0
- package/es/components/stack/defs.js +31 -0
- package/es/components/stack/defs.js.map +1 -0
- package/es/components/stack/index.d.ts +11 -0
- package/es/components/stack/index.d.ts.map +1 -0
- package/es/components/stack/index.js +11 -0
- package/es/components/stack/index.js.map +1 -0
- package/es/components/stack/stack.css.js +12 -0
- package/es/components/stack/stack.d.ts +46 -0
- package/es/components/stack/stack.d.ts.map +1 -0
- package/es/components/stack/stack.js +116 -0
- package/es/components/stack/stack.js.map +1 -0
- package/es/components/stack/stack.rtl.css.js +12 -0
- package/es/components/structured-list/structured-list.css.js +1 -1
- package/es/components/structured-list/structured-list.d.ts +9 -0
- package/es/components/structured-list/structured-list.d.ts.map +1 -1
- package/es/components/structured-list/structured-list.js +47 -1
- package/es/components/structured-list/structured-list.js.map +1 -1
- package/es/components/structured-list/structured-list.rtl.css.js +1 -1
- package/es/components/tabs/tabs.css.js +1 -1
- package/es/components/tabs/tabs.rtl.css.js +1 -1
- package/es/components/text-input/defs.d.ts +38 -0
- package/es/components/text-input/defs.d.ts.map +1 -1
- package/es/components/text-input/defs.js +24 -3
- package/es/components/text-input/defs.js.map +1 -1
- package/es/components/text-input/text-input.d.ts +4 -5
- package/es/components/text-input/text-input.d.ts.map +1 -1
- package/es/components/text-input/text-input.js +5 -6
- package/es/components/text-input/text-input.js.map +1 -1
- package/es/components/textarea/textarea.d.ts.map +1 -1
- package/es/components/textarea/textarea.js +1 -1
- package/es/components/textarea/textarea.js.map +1 -1
- package/es/components/tile/expandable-tile.d.ts +1 -3
- package/es/components/tile/expandable-tile.d.ts.map +1 -1
- package/es/components/tile/expandable-tile.js +1 -1
- package/es/components/tile/expandable-tile.js.map +1 -1
- package/es/components/tile/radio-tile.d.ts.map +1 -1
- package/es/components/tile/radio-tile.js +2 -2
- package/es/components/tile/radio-tile.js.map +1 -1
- package/es/components/toggle-tip/toggletip.d.ts +1 -1
- package/es/components/toggle-tip/toggletip.d.ts.map +1 -1
- package/es/components/toggle-tip/toggletip.js +28 -3
- package/es/components/toggle-tip/toggletip.js.map +1 -1
- package/es/components/tooltip/tooltip.css.js +1 -1
- package/es/components/tooltip/tooltip.d.ts +12 -1
- package/es/components/tooltip/tooltip.d.ts.map +1 -1
- package/es/components/tooltip/tooltip.js +47 -1
- package/es/components/tooltip/tooltip.js.map +1 -1
- package/es/components/tooltip/tooltip.rtl.css.js +1 -1
- package/es/components/ui-shell/header-global-action.d.ts +31 -0
- package/es/components/ui-shell/header-global-action.d.ts.map +1 -0
- package/es/components/ui-shell/header-global-action.js +88 -0
- package/es/components/ui-shell/header-global-action.js.map +1 -0
- package/es/components/ui-shell/header-menu-button.d.ts +6 -6
- package/es/components/ui-shell/header-menu-button.d.ts.map +1 -1
- package/es/components/ui-shell/header-menu-button.js +10 -10
- package/es/components/ui-shell/header-menu-button.js.map +1 -1
- package/es/components/ui-shell/header-menu-item.d.ts +3 -3
- package/es/components/ui-shell/header-menu-item.d.ts.map +1 -1
- package/es/components/ui-shell/header-menu-item.js +6 -6
- package/es/components/ui-shell/header-menu-item.js.map +1 -1
- package/es/components/ui-shell/header-menu.d.ts +11 -3
- package/es/components/ui-shell/header-menu.d.ts.map +1 -1
- package/es/components/ui-shell/header-menu.js +47 -7
- package/es/components/ui-shell/header-menu.js.map +1 -1
- package/es/components/ui-shell/header-name.d.ts +3 -3
- package/es/components/ui-shell/header-name.d.ts.map +1 -1
- package/es/components/ui-shell/header-name.js +4 -4
- package/es/components/ui-shell/header-name.js.map +1 -1
- package/es/components/ui-shell/header-nav-item.d.ts +11 -3
- package/es/components/ui-shell/header-nav-item.d.ts.map +1 -1
- package/es/components/ui-shell/header-nav-item.js +39 -6
- package/es/components/ui-shell/header-nav-item.js.map +1 -1
- package/es/components/ui-shell/header-nav.d.ts +2 -2
- package/es/components/ui-shell/header-nav.d.ts.map +1 -1
- package/es/components/ui-shell/header-nav.js +5 -5
- package/es/components/ui-shell/header-nav.js.map +1 -1
- package/es/components/ui-shell/header-panel.d.ts +30 -0
- package/es/components/ui-shell/header-panel.d.ts.map +1 -0
- package/es/components/ui-shell/header-panel.js +72 -0
- package/es/components/ui-shell/header-panel.js.map +1 -0
- package/es/components/ui-shell/header-side-nav-items.d.ts +27 -0
- package/es/components/ui-shell/header-side-nav-items.d.ts.map +1 -0
- package/es/components/ui-shell/header-side-nav-items.js +80 -0
- package/es/components/ui-shell/header-side-nav-items.js.map +1 -0
- package/es/components/ui-shell/header.css.js +1 -1
- package/es/components/ui-shell/header.d.ts +2 -2
- package/es/components/ui-shell/header.d.ts.map +1 -1
- package/es/components/ui-shell/header.js +5 -5
- package/es/components/ui-shell/header.js.map +1 -1
- package/es/components/ui-shell/header.rtl.css.js +1 -1
- package/es/components/ui-shell/index.d.ts +5 -0
- package/es/components/ui-shell/index.d.ts.map +1 -1
- package/es/components/ui-shell/index.js +5 -0
- package/es/components/ui-shell/index.js.map +1 -1
- package/es/components/ui-shell/side-nav-divider.d.ts +2 -2
- package/es/components/ui-shell/side-nav-divider.d.ts.map +1 -1
- package/es/components/ui-shell/side-nav-divider.js +5 -5
- package/es/components/ui-shell/side-nav-divider.js.map +1 -1
- package/es/components/ui-shell/side-nav-items.d.ts +2 -2
- package/es/components/ui-shell/side-nav-items.d.ts.map +1 -1
- package/es/components/ui-shell/side-nav-items.js +6 -6
- package/es/components/ui-shell/side-nav-items.js.map +1 -1
- package/es/components/ui-shell/side-nav-link.d.ts +7 -3
- package/es/components/ui-shell/side-nav-link.d.ts.map +1 -1
- package/es/components/ui-shell/side-nav-link.js +18 -5
- package/es/components/ui-shell/side-nav-link.js.map +1 -1
- package/es/components/ui-shell/side-nav-menu-item.d.ts +3 -3
- package/es/components/ui-shell/side-nav-menu-item.d.ts.map +1 -1
- package/es/components/ui-shell/side-nav-menu-item.js +4 -4
- package/es/components/ui-shell/side-nav-menu-item.js.map +1 -1
- package/es/components/ui-shell/side-nav-menu.d.ts +7 -3
- package/es/components/ui-shell/side-nav-menu.d.ts.map +1 -1
- package/es/components/ui-shell/side-nav-menu.js +18 -5
- package/es/components/ui-shell/side-nav-menu.js.map +1 -1
- package/es/components/ui-shell/side-nav.css.js +1 -1
- package/es/components/ui-shell/side-nav.d.ts +35 -13
- package/es/components/ui-shell/side-nav.d.ts.map +1 -1
- package/es/components/ui-shell/side-nav.js +142 -48
- package/es/components/ui-shell/side-nav.js.map +1 -1
- package/es/components/ui-shell/side-nav.rtl.css.js +1 -1
- package/es/components/ui-shell/switcher-divider.d.ts +21 -0
- package/es/components/ui-shell/switcher-divider.d.ts.map +1 -0
- package/es/components/ui-shell/switcher-divider.js +56 -0
- package/es/components/ui-shell/switcher-divider.js.map +1 -0
- package/es/components/{pagination/page-sizes-select.d.ts → ui-shell/switcher-item.d.ts} +18 -22
- package/es/components/ui-shell/switcher-item.d.ts.map +1 -0
- package/es/components/ui-shell/switcher-item.js +162 -0
- package/es/components/ui-shell/switcher-item.js.map +1 -0
- package/es/components/ui-shell/switcher.d.ts +35 -0
- package/es/components/ui-shell/switcher.d.ts.map +1 -0
- package/es/components/ui-shell/switcher.js +95 -0
- package/es/components/ui-shell/switcher.js.map +1 -0
- package/es/components-react/code-snippet/code-snippet-skeleton.d.ts +2 -2
- package/es/components-react/code-snippet/code-snippet.d.ts +2 -2
- package/es/components-react/data-table/table-batch-actions.d.ts +2 -2
- package/es/components-react/data-table/table-body.d.ts +2 -2
- package/es/components-react/{pagination/pages-select.d.ts → data-table/table-cell-content.d.ts} +2 -6
- package/es/components-react/{pagination/pages-select.js → data-table/table-cell-content.js} +4 -10
- package/es/components-react/data-table/table-cell.d.ts +2 -2
- package/es/components-react/data-table/table-expanded-row.d.ts +2 -2
- package/es/components-react/data-table/table-head.d.ts +2 -2
- package/es/components-react/data-table/table-header-cell.d.ts +2 -2
- package/es/components-react/{pagination/page-sizes-select.d.ts → data-table/table-header-description.d.ts} +2 -6
- package/es/components-react/{pagination/page-sizes-select.js → data-table/table-header-description.js} +4 -10
- package/es/components-react/data-table/table-header-row.d.ts +2 -2
- package/es/components-react/data-table/table-header-title.d.ts +15 -0
- package/es/components-react/data-table/{table-header-cell-skeleton.js → table-header-title.js} +4 -6
- package/es/components-react/data-table/table-row.d.ts +19 -2
- package/es/components-react/data-table/table-row.js +16 -0
- package/es/components-react/data-table/table-skeleton.d.ts +15 -0
- package/es/components-react/data-table/table-skeleton.js +21 -0
- package/es/components-react/data-table/table-toolbar-content.d.ts +2 -2
- package/es/components-react/data-table/table-toolbar-search.d.ts +2 -2
- package/es/components-react/data-table/table-toolbar.d.ts +2 -2
- package/es/components-react/data-table/table.d.ts +44 -2
- package/es/components-react/data-table/table.js +45 -3
- package/es/components-react/file-uploader/demo-file-uploader.d.ts +0 -49
- package/es/components-react/file-uploader/demo-file-uploader.js +3 -51
- package/es/components-react/floating-menu/floating-menu.d.ts +2 -2
- package/es/components-react/floating-menu/floating-menu.js +0 -2
- package/es/components-react/form/form-item.d.ts +2 -2
- package/es/components-react/form-group/form-group.d.ts +15 -0
- package/es/components-react/form-group/form-group.js +21 -0
- package/es/components-react/form-group/index.d.ts +14 -0
- package/es/components-react/form-group/index.js +8 -0
- package/es/components-react/modal/modal-body-content.d.ts +15 -0
- package/es/components-react/modal/modal-body-content.js +21 -0
- package/es/components-react/modal/modal-body.d.ts +2 -2
- package/es/components-react/modal/modal-close-button.d.ts +2 -2
- package/es/components-react/modal/modal-footer.d.ts +2 -2
- package/es/components-react/modal/modal-header.d.ts +2 -2
- package/es/components-react/modal/modal-heading.d.ts +2 -2
- package/es/components-react/modal/modal-label.d.ts +2 -2
- package/es/components-react/modal/modal.d.ts +2 -2
- package/es/components-react/multi-select/defs.d.ts +14 -0
- package/es/components-react/multi-select/defs.js +9 -0
- package/es/components-react/multi-select/multi-select.js +6 -1
- package/es/components-react/overflow-menu/overflow-menu-body.d.ts +2 -2
- package/es/components-react/overflow-menu/overflow-menu-item.d.ts +2 -2
- package/es/components-react/overflow-menu/overflow-menu.d.ts +4 -5
- package/es/components-react/overflow-menu/overflow-menu.js +5 -3
- package/es/components-react/pagination/defs.d.ts +14 -0
- package/es/components-react/pagination/defs.js +9 -0
- package/es/components-react/pagination/pagination.d.ts +3 -7
- package/es/components-react/pagination/pagination.js +3 -7
- package/es/components-react/progress-indicator/progress-indicator-skeleton.d.ts +2 -3
- package/es/components-react/progress-indicator/progress-indicator.d.ts +2 -3
- package/es/components-react/progress-indicator/progress-step-skeleton.d.ts +2 -3
- package/es/components-react/progress-indicator/progress-step.d.ts +2 -3
- package/es/components-react/stack/defs.d.ts +14 -0
- package/es/components-react/stack/defs.js +9 -0
- package/es/components-react/stack/index.d.ts +14 -0
- package/es/components-react/stack/index.js +8 -0
- package/es/components-react/stack/stack.d.ts +15 -0
- package/es/components-react/stack/stack.js +22 -0
- package/es/components-react/text-input/text-input.js +7 -1
- package/es/components-react/toggle-tip/toggletip.d.ts +0 -5
- package/es/components-react/toggle-tip/toggletip.js +3 -13
- package/es/components-react/{data-table/table-cell-skeleton.d.ts → ui-shell/header-global-action.d.ts} +3 -3
- package/es/components-react/{data-table/table-cell-skeleton.js → ui-shell/header-global-action.js} +4 -4
- package/es/components-react/ui-shell/header-menu-button.d.ts +2 -2
- package/es/components-react/ui-shell/header-menu-item.d.ts +2 -2
- package/es/components-react/ui-shell/header-menu.d.ts +2 -2
- package/es/components-react/ui-shell/header-name.d.ts +2 -2
- package/es/components-react/ui-shell/header-nav-item.d.ts +2 -2
- package/es/components-react/ui-shell/header-nav.d.ts +2 -2
- package/es/components-react/ui-shell/header-panel.d.ts +15 -0
- package/es/components-react/ui-shell/header-panel.js +21 -0
- package/es/components-react/ui-shell/header-side-nav-items.d.ts +15 -0
- package/es/components-react/ui-shell/header-side-nav-items.js +21 -0
- package/es/components-react/ui-shell/header.d.ts +2 -2
- package/es/components-react/ui-shell/side-nav-divider.d.ts +2 -2
- package/es/components-react/ui-shell/side-nav-items.d.ts +2 -2
- package/es/components-react/ui-shell/side-nav-link.d.ts +2 -2
- package/es/components-react/ui-shell/side-nav-menu-item.d.ts +2 -2
- package/es/components-react/ui-shell/side-nav-menu.d.ts +2 -2
- package/es/components-react/ui-shell/side-nav.d.ts +2 -2
- package/es/components-react/ui-shell/switcher-divider.d.ts +15 -0
- package/es/components-react/ui-shell/switcher-divider.js +21 -0
- package/es/components-react/ui-shell/switcher-item.d.ts +15 -0
- package/es/components-react/ui-shell/switcher-item.js +21 -0
- package/es/components-react/ui-shell/switcher.d.ts +15 -0
- package/es/components-react/ui-shell/switcher.js +21 -0
- package/es/icons/arrow--down/16.js +1 -1
- package/es/icons/arrow--down/32.js +1 -1
- package/es/icons/arrows--vertical/16.js +1 -1
- package/es/icons/arrows--vertical/32.js +1 -1
- package/es/icons/overflow-menu--vertical/16.js +1 -1
- package/es/index.d.ts +12 -2
- package/es/index.d.ts.map +1 -1
- package/es/index.js +12 -2
- package/es/index.js.map +1 -1
- package/lib/components/data-table/defs.js +1 -10
- package/lib/components/data-table/defs.js.map +1 -1
- package/lib/components/dropdown/defs.js +2 -2
- package/lib/components/dropdown/defs.js.map +1 -1
- package/lib/components/floating-menu/defs.js +3 -24
- package/lib/components/floating-menu/defs.js.map +1 -1
- package/lib/components/modal/defs.js +2 -2
- package/lib/components/modal/defs.js.map +1 -1
- package/lib/components/multi-select/defs.js +25 -0
- package/lib/components/multi-select/defs.js.map +1 -0
- package/lib/components/overflow-menu/defs.js +2 -11
- package/lib/components/overflow-menu/defs.js.map +1 -1
- package/lib/components/pagination/defs.js +25 -0
- package/lib/components/pagination/defs.js.map +1 -0
- package/lib/components/stack/defs.js +36 -0
- package/lib/components/stack/defs.js.map +1 -0
- package/lib/components/text-input/defs.js +25 -4
- package/lib/components/text-input/defs.js.map +1 -1
- package/lib/components-react-node/{pagination/pages-select.js → data-table/table-cell-content.js} +3 -9
- package/lib/components-react-node/{pagination/page-sizes-select.js → data-table/table-header-description.js} +3 -9
- package/lib/components-react-node/data-table/{table-cell-skeleton.js → table-header-title.js} +3 -4
- package/lib/components-react-node/data-table/table-row.js +16 -0
- package/lib/components-react-node/data-table/{table-header-cell-skeleton.js → table-skeleton.js} +3 -4
- package/lib/components-react-node/data-table/table.js +44 -8
- package/lib/components-react-node/file-uploader/demo-file-uploader.js +3 -89
- package/lib/components-react-node/floating-menu/floating-menu.js +0 -12
- package/lib/components-react-node/form-group/form-group.js +36 -0
- package/lib/components-react-node/form-group/index.js +9 -0
- package/lib/components-react-node/modal/modal-body-content.js +36 -0
- package/lib/components-react-node/multi-select/defs.js +24 -0
- package/lib/components-react-node/multi-select/multi-select.js +13 -0
- package/lib/components-react-node/overflow-menu/overflow-menu.js +3 -8
- package/lib/components-react-node/pagination/defs.js +24 -0
- package/lib/components-react-node/pagination/pagination.js +3 -7
- package/lib/components-react-node/stack/defs.js +24 -0
- package/lib/components-react-node/stack/index.js +9 -0
- package/lib/components-react-node/stack/stack.js +49 -0
- package/lib/components-react-node/text-input/text-input.js +12 -0
- package/lib/components-react-node/toggle-tip/toggletip.js +3 -51
- package/lib/components-react-node/ui-shell/header-global-action.js +37 -0
- package/lib/components-react-node/ui-shell/header-panel.js +36 -0
- package/lib/components-react-node/ui-shell/header-side-nav-items.js +36 -0
- package/lib/components-react-node/ui-shell/switcher-divider.js +36 -0
- package/lib/components-react-node/ui-shell/switcher-item.js +36 -0
- package/lib/components-react-node/ui-shell/switcher.js +36 -0
- package/package.json +6 -7
- package/scss/components/button/button.scss +48 -1
- package/scss/components/checkbox/checkbox.scss +16 -0
- package/scss/components/code-snippet/code-snippet.scss +82 -101
- package/scss/components/copy-button/copy-button.scss +17 -0
- package/scss/components/data-table/_table-action.scss +50 -32
- package/scss/components/data-table/_table-core.scss +253 -29
- package/scss/components/data-table/_table-expandable.scss +25 -32
- package/scss/components/data-table/_table-selection.scss +36 -20
- package/scss/components/data-table/_table-sizes.scss +162 -20
- package/scss/components/data-table/_table-sort.scss +5 -21
- package/scss/components/data-table/data-table.scss +4 -3
- package/scss/components/form-group/form-group.scss +23 -0
- package/scss/components/modal/modal.scss +61 -87
- package/scss/components/multi-select/multi-select.scss +54 -19
- package/scss/components/overflow-menu/overflow-menu.scss +21 -9
- package/scss/components/pagination/pagination.scss +0 -66
- package/scss/components/progress-indicator/progress-indicator.scss +11 -10
- package/scss/components/radio-button/radio-button.scss +11 -1
- package/scss/components/select/select.scss +28 -1
- package/scss/components/stack/stack.scss +33 -0
- package/scss/components/structured-list/structured-list.scss +90 -20
- package/scss/components/tooltip/tooltip.scss +26 -0
- package/scss/components/ui-shell/header.scss +69 -0
- package/scss/components/ui-shell/side-nav.scss +27 -49
- package/es/components/data-table/table-cell-skeleton.d.ts +0 -20
- package/es/components/data-table/table-cell-skeleton.d.ts.map +0 -1
- package/es/components/data-table/table-cell-skeleton.js +0 -42
- package/es/components/data-table/table-cell-skeleton.js.map +0 -1
- package/es/components/data-table/table-expand-row.d.ts +0 -371
- package/es/components/data-table/table-expand-row.d.ts.map +0 -1
- package/es/components/data-table/table-expand-row.js +0 -192
- package/es/components/data-table/table-expand-row.js.map +0 -1
- package/es/components/data-table/table-header-cell-skeleton.d.ts +0 -19
- package/es/components/data-table/table-header-cell-skeleton.d.ts.map +0 -1
- package/es/components/data-table/table-header-cell-skeleton.js +0 -33
- package/es/components/data-table/table-header-cell-skeleton.js.map +0 -1
- package/es/components/data-table/table-header-expand-row.d.ts +0 -33
- package/es/components/data-table/table-header-expand-row.d.ts.map +0 -1
- package/es/components/data-table/table-header-expand-row.js +0 -68
- package/es/components/data-table/table-header-expand-row.js.map +0 -1
- package/es/components/pagination/page-sizes-select.d.ts.map +0 -1
- package/es/components/pagination/page-sizes-select.js +0 -172
- package/es/components/pagination/page-sizes-select.js.map +0 -1
- package/es/components/pagination/pages-select.d.ts +0 -362
- package/es/components/pagination/pages-select.d.ts.map +0 -1
- package/es/components/pagination/pages-select.js +0 -185
- package/es/components/pagination/pages-select.js.map +0 -1
- package/es/components-react/data-table/table-expand-row.d.ts +0 -24
- package/es/components-react/data-table/table-expand-row.js +0 -33
- package/es/components-react/data-table/table-header-cell-skeleton.d.ts +0 -14
- package/es/components-react/data-table/table-header-expand-row.d.ts +0 -29
- package/es/components-react/data-table/table-header-expand-row.js +0 -37
- package/lib/components-react-node/data-table/table-expand-row.js +0 -47
- package/lib/components-react-node/data-table/table-header-expand-row.js +0 -51
- package/scss/components/data-table/_table-skeleton.scss +0 -27
|
@@ -8,5 +8,5 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import { css } from 'lit';
|
|
10
10
|
export default css([
|
|
11
|
-
"@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--tag{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);background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#393939);display:inline-flex;min-width:2rem;max-width:100%;min-height:1.5rem;align-items:center;justify-content:center;padding:.25rem .5rem;margin:.25rem;border-radius:.9375rem;cursor:default;vertical-align:middle;word-break:break-word}.cds--tag .cds--tag__close-icon:hover,.cds--tag.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-gray,#c6c6c6)}.cds--tag:not(:first-child){margin-left:0}.cds--tag--red{background-color:var(--cds-tag-background-red,#ffd7d9);color:var(--cds-tag-color-red,#750e13)}.cds--tag--red .cds--tag__close-icon:hover,.cds--tag--red.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-red,#ffb3b8)}.cds--tag--magenta{background-color:var(--cds-tag-background-magenta,#ffd6e8);color:var(--cds-tag-color-magenta,#740937)}.cds--tag--magenta .cds--tag__close-icon:hover,.cds--tag--magenta.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-magenta,#ffafd2)}.cds--tag--purple{background-color:var(--cds-tag-background-purple,#e8daff);color:var(--cds-tag-color-purple,#491d8b)}.cds--tag--purple .cds--tag__close-icon:hover,.cds--tag--purple.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-purple,#d4bbff)}.cds--tag--blue{background-color:var(--cds-tag-background-blue,#d0e2ff);color:var(--cds-tag-color-blue,#002d9c)}.cds--tag--blue .cds--tag__close-icon:hover,.cds--tag--blue.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-blue,#a6c8ff)}.cds--tag--cyan{background-color:var(--cds-tag-background-cyan,#bae6ff);color:var(--cds-tag-color-cyan,#003a6d)}.cds--tag--cyan .cds--tag__close-icon:hover,.cds--tag--cyan.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-cyan,#82cfff)}.cds--tag--teal{background-color:var(--cds-tag-background-teal,#9ef0f0);color:var(--cds-tag-color-teal,#004144)}.cds--tag--teal .cds--tag__close-icon:hover,.cds--tag--teal.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-teal,#3ddbd9)}.cds--tag--green{background-color:var(--cds-tag-background-green,#a7f0ba);color:var(--cds-tag-color-green,#044317)}.cds--tag--green .cds--tag__close-icon:hover,.cds--tag--green.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-green,#6fdc8c)}.cds--tag--gray{background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#393939)}.cds--tag--gray .cds--tag__close-icon:hover,.cds--tag--gray.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-gray,#c6c6c6)}.cds--tag--cool-gray{background-color:var(--cds-tag-background-cool-gray,#dde1e6);color:var(--cds-tag-color-cool-gray,#343a3f)}.cds--tag--cool-gray .cds--tag__close-icon:hover,.cds--tag--cool-gray.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-cool-gray,#c1c7cd)}.cds--tag--warm-gray{background-color:var(--cds-tag-background-warm-gray,#e5e0df);color:var(--cds-tag-color-warm-gray,#3c3838)}.cds--tag--warm-gray .cds--tag__close-icon:hover,.cds--tag--warm-gray.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-warm-gray,#cac5c4)}.cds--tag--high-contrast{background-color:var(--cds-background-inverse,#393939);color:var(--cds-text-inverse,#fff)}.cds--tag--high-contrast .cds--tag__close-icon:hover,.cds--tag--high-contrast.cds--tag--interactive:hover{background-color:var(--cds-background-inverse-hover,#474747)}.cds--tag--outline{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);box-shadow:0 0 0 1px var(--cds-background-inverse,#393939)}.cds--tag--outline .cds--tag__close-icon:hover,.cds--tag--outline.cds--tag--interactive:hover{background-color:var(--cds-layer-hover)}.cds--tag--disabled,.cds--tag--filter.cds--tag--disabled,.cds--tag--interactive.cds--tag--disabled{background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));box-shadow:none}.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--disabled.cds--tag--interactive:hover,.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--filter.cds--tag--disabled.cds--tag--interactive:hover,.cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--interactive.cds--tag--disabled.cds--tag--interactive:hover{background-color:var(--cds-layer)}.cds--tag--disabled:hover,.cds--tag--filter.cds--tag--disabled:hover,.cds--tag--interactive.cds--tag--disabled:hover{cursor:not-allowed}.cds--tag__label{overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.cds--tag--interactive:focus{box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:0}.cds--tag--interactive:hover{cursor:pointer}.cds--tag--filter{padding-top:0;padding-right:0;padding-bottom:0;cursor:pointer}.cds--tag--filter:hover{outline:0}.cds--tag--interactive{transition:background-color 70ms cubic-bezier(0,0,.38,.9)}.cds--tag__close-icon{display:flex;width:1.5rem;height:1.5rem;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;margin:0 0 0 .125rem;background-color:transparent;border-radius:50%;color:currentColor;cursor:pointer;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),box-shadow 70ms cubic-bezier(.2,0,.38,.9)}.cds--tag__close-icon svg{fill:currentColor}.cds--tag__custom-icon{width:1rem;height:1rem;flex-shrink:0;padding:0;border:0;margin-right:.25rem;background-color:transparent;color:currentColor;outline:0}.cds--tag__custom-icon svg{fill:currentColor}.cds--tag--disabled .cds--tag__close-icon{cursor:not-allowed}.cds--tag__close-icon:focus{border-radius:50%;box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:0}.cds--tag--high-contrast .cds--tag__close-icon:focus{box-shadow:inset 0 0 0 1px var(--cds-focus-inverse,#fff)}.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover{background-color:transparent}.cds--tag--filter.cds--tag--disabled svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--tag--sm{min-height:1.125rem;padding:0 .5rem}.cds--tag--sm.cds--tag--filter{padding-right:0}.cds--tag--sm .cds--tag__close-icon{width:1.125rem;height:1.125rem;margin-left:.3125rem}.cds--tag.cds--skeleton{background-color:var(--cds-skeleton-background,#e8e8e8);color:var(--cds-text-primary,#161616);overflow:hidden;width:3.75rem}.cds--tag.cds--skeleton .cds--tag__close-icon:hover,.cds--tag.cds--skeleton.cds--tag--interactive:hover{background-color:var(--cds-skeleton-background,#e8e8e8)}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.cds--tag.cds--skeleton{transform:translateZ(0)}}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag{outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag__close-icon svg,.cds--tag__custom-icon svg{fill:ButtonText}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag__close-icon:focus{color:Highlight;outline:1px solid Highlight}}.cds--list-box__wrapper--inline,:host(cds-multi-select[type=inline]){display:inline-grid;align-items:center;grid-gap:.25rem;grid-template:auto auto/auto auto}.cds--list-box__wrapper--inline .cds--label,:host(cds-multi-select[type=inline]) .cds--label{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)}.cds--list-box__wrapper--inline .cds--form-requirement,.cds--list-box__wrapper--inline .cds--form__helper-text,.cds--list-box__wrapper--inline .cds--label,:host(cds-multi-select[type=inline]) .cds--form-requirement,:host(cds-multi-select[type=inline]) .cds--form__helper-text,:host(cds-multi-select[type=inline]) .cds--label{margin:0}.cds--list-box__wrapper--inline .cds--form__helper-text,:host(cds-multi-select[type=inline]) .cds--form__helper-text{max-width:none}.cds--list-box__wrapper--inline .cds--form-requirement,:host(cds-multi-select[type=inline]) .cds--form-requirement{grid-column:2}.cds--list-box{position:relative;width:100%;height:2.5rem;max-height:2.5rem;border:none;border-bottom:1px solid var(--cds-border-strong);background-color:var(--cds-field);color:var(--cds-text-primary,#161616);cursor:pointer;transition:all 70ms cubic-bezier(.2,0,.38,.9)}.cds--list-box html{font-size:100%}.cds--list-box 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--list-box code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--list-box strong{font-weight:600}.cds--list-box:hover{background-color:var(--cds-field-hover)}.cds--list-box--lg{height:3rem;max-height:3rem}.cds--list-box--sm{height:2rem;max-height:2rem}.cds--list-box--expanded{border-bottom-color:var(--cds-border-subtle)}.cds--list-box--expanded:hover{background-color:var(--cds-field)}.cds--list-box--expanded:hover.cds--list-box--light:hover{background-color:var(--cds-field-02,#fff)}.cds--list-box .cds--text-input{min-width:0;height:100%}.cds--list-box__invalid-icon{position:absolute;top:50%;right:2.5rem;fill:var(--cds-support-error,#da1e28);transform:translateY(-50%)}.cds--list-box__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--list-box__invalid-icon--warning path[fill]{fill:#000;opacity:1}.cds--list-box.cds--list-box--warning .cds--list-box__field,.cds--list-box[data-invalid] .cds--list-box__field{padding-right:4rem;border-bottom:0}.cds--list-box.cds--list-box--warning.cds--list-box--inline .cds--list-box__field,.cds--list-box[data-invalid].cds--list-box--inline .cds--list-box__field{padding-right:3.5rem}.cds--list-box--light{background-color:var(--cds-field-02,#fff)}.cds--list-box--light:hover{background-color:var(--cds-field-hover)}.cds--list-box--light .cds--list-box__menu{background:var(--cds-layer)}.cds--list-box--light .cds--list-box__menu-item__option{border-top-color:var(--cds-border-subtle)}.cds--list-box--light.cds--list-box--expanded{border-bottom-color:transparent}.cds--list-box--disabled:hover{background-color:var(--cds-field)}.cds--list-box--light.cds--list-box--disabled{background-color:var(--cds-field-02,#fff)}.cds--list-box--disabled,.cds--list-box--disabled .cds--list-box__field,.cds--list-box--disabled .cds--list-box__field:focus{border-bottom-color:transparent;outline:0}.cds--list-box--disabled .cds--list-box__label,.cds--list-box--disabled.cds--list-box--inline .cds--list-box__label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--list-box--disabled .cds--list-box__menu-icon>svg,.cds--list-box--disabled .cds--list-box__selection>svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--list-box--disabled,.cds--list-box--disabled .cds--list-box__field,.cds--list-box--disabled .cds--list-box__menu-icon{cursor:not-allowed}.cds--list-box--disabled .cds--list-box__menu-item,.cds--list-box--disabled .cds--list-box__menu-item--highlighted,.cds--list-box--disabled .cds--list-box__menu-item:hover,.cds--list-box--disabled :host(cds-multi-select-item){color:var(--cds-text-disabled,rgba(22,22,22,.25));text-decoration:none}.cds--list-box--disabled .cds--list-box__selection:hover{cursor:not-allowed}.cds--list-box--disabled.cds--list-box[data-invalid] .cds--list-box__field{padding-right:3rem}.cds--list-box--disabled.cds--list-box[data-invalid].cds--list-box--inline .cds--list-box__field{padding-right:2rem}.cds--list-box.cds--list-box--inline{border-width:0;background-color:transparent}.cds--list-box.cds--list-box--inline:hover{background-color:var(--cds-layer-hover)}.cds--list-box.cds--list-box--inline.cds--list-box--expanded{border-bottom-width:0}.cds--list-box.cds--list-box--inline.cds--list-box--expanded .cds--list-box__field[aria-expanded=true]{border-width:0}.cds--list-box.cds--list-box--inline.cds--list-box--disabled:hover,.cds--list-box.cds--list-box--inline.cds--list-box--expanded:hover{background-color:transparent}.cds--list-box.cds--list-box--inline .cds--list-box__field{padding:0 2rem 0 .5rem}.cds--list-box.cds--list-box--inline .cds--list-box__menu-icon{right:.5rem}.cds--list-box.cds--list-box--inline .cds--list-box__invalid-icon{right:2rem}.cds--list-box--inline .cds--list-box__label{color:var(--cds-text-primary,#161616)}.cds--list-box--inline .cds--list-box__field{height:100%}.cds--dropdown--inline .cds--list-box__field{max-width:30rem}.cds--dropdown--inline .cds--list-box__menu{min-width:18rem;max-width:30rem}.cds--list-box__field{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;position:relative;display:inline-flex;overflow:hidden;height:calc(100% + 1px);align-items:center;padding:0 3rem 0 1rem;cursor:pointer;outline:0;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.cds--list-box__field *,.cds--list-box__field ::after,.cds--list-box__field ::before{box-sizing:inherit}.cds--list-box__field::-moz-focus-inner{border:0}.cds--list-box__field:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--list-box__field:focus{outline-style:dotted}}.cds--list-box__field[disabled]{color:var(--cds-text-disabled,rgba(22,22,22,.25));outline:0}.cds--list-box__field .cds--text-input{padding-right:4.5rem}.cds--list-box--warning .cds--list-box__field .cds--text-input,.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input{padding-right:6.125rem}.cds--list-box--warning .cds--list-box__field .cds--text-input+.cds--list-box__invalid-icon,.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input+.cds--list-box__invalid-icon{right:4.125rem}.cds--list-box__field .cds--text-input--empty{padding-right:3rem}.cds--list-box--warning .cds--list-box__field .cds--text-input--empty,.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty{padding-right:carbon--mini-units(9)}.cds--list-box--warning .cds--list-box__field .cds--text-input--empty+.cds--list-box__invalid-icon,.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty+.cds--list-box__invalid-icon{right:2.5rem}.cds--list-box__label{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);overflow:hidden;color:var(--cds-text-primary,#161616);text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.cds--list-box__menu-icon{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;position:absolute;right:1rem;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;cursor:pointer;outline:0;transition:transform 70ms cubic-bezier(.2,0,.38,.9)}.cds--list-box__menu-icon *,.cds--list-box__menu-icon ::after,.cds--list-box__menu-icon ::before{box-sizing:inherit}.cds--list-box__menu-icon::-moz-focus-inner{border:0}.cds--list-box__menu-icon>svg{fill:var(--cds-icon-primary,#161616)}.cds--list-box__menu-icon--open{width:1.5rem;justify-content:center;transform:rotate(180deg)}.cds--list-box__selection{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;position:absolute;top:50%;right:2.25rem;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-50%);transition:background-color 70ms cubic-bezier(.2,0,.38,.9);-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--list-box__selection *,.cds--list-box__selection ::after,.cds--list-box__selection ::before{box-sizing:inherit}.cds--list-box__selection::-moz-focus-inner{border:0}.cds--list-box__selection:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--list-box__selection:focus{outline-style:dotted}}.cds--list-box__selection:focus:hover{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--list-box__selection:focus:hover{outline-style:dotted}}.cds--list-box__selection>svg{fill:var(--cds-icon-primary,#161616)}.cds--list-box--disabled .cds--list-box__selection:focus{outline:0}.cds--list-box__selection--multi{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);position:static;top:auto;display:flex;width:auto;height:1.5rem;align-items:center;justify-content:space-between;padding:.5rem;padding-right:.125rem;margin-right:.625rem;background-color:var(--cds-background-inverse,#393939);border-radius:.75rem;color:var(--cds-text-inverse,#fff);line-height:0;transform:none}.cds--list-box__selection--multi>svg{width:1.25rem;height:1.25rem;padding:.125rem;margin-left:.25rem;fill:var(--cds-icon-inverse,#fff)}.cds--list-box__selection--multi>svg:hover{background-color:var(--cds-button-secondary-hover,#474747);border-radius:50%}.cds--list-box--disabled .cds--list-box__selection--multi{background-color:var(--cds-text-disabled,rgba(22,22,22,.25));color:var(--cds-layer)}.cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover,.cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--interactive:hover{background-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--list-box--disabled .cds--list-box__selection--multi>svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--list-box--disabled .cds--list-box__selection--multi>svg:hover{background-color:initial}.cds--list-box__selection--multi:hover{outline:0}.cds--list-box__menu{box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));position:absolute;z-index:9100;right:0;left:0;width:100%;background-color:var(--cds-layer);overflow-y:auto;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}.cds--list-box__menu:focus{outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--list-box__menu:focus{outline-style:dotted}}.cds--list-box .cds--list-box__field[aria-expanded=false]+.cds--list-box__menu{display:none;max-height:0}.cds--list-box--expanded .cds--list-box__menu{display:block;max-height:13.75rem}.cds--list-box--expanded.cds--list-box--lg .cds--list-box__menu{max-height:16.5rem}.cds--list-box--expanded.cds--list-box--sm .cds--list-box__menu{max-height:11rem}.cds--list-box__menu-item,:host(cds-multi-select-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);position:relative;height:2.5rem;color:var(--cds-text-secondary,#525252);cursor:pointer;transition:background 70ms cubic-bezier(.2,0,.38,.9);-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--list-box__menu-item:hover,:hover:host(cds-multi-select-item){background-color:var(--cds-layer-hover)}.cds--list-box__menu-item:active,:active:host(cds-multi-select-item){background-color:var(--cds-layer-selected)}.cds--list-box--light .cds--list-box__menu-item:hover,.cds--list-box--light :hover:host(cds-multi-select-item){background-color:var(--cds-layer-hover)}.cds--list-box--sm .cds--list-box__menu-item,.cds--list-box--sm :host(cds-multi-select-item){height:2rem}.cds--list-box--lg .cds--list-box__menu-item,.cds--list-box--lg :host(cds-multi-select-item){height:3rem}.cds--list-box--disabled .cds--list-box__menu-item:hover,.cds--list-box--disabled :hover:host(cds-multi-select-item){background-color:transparent}.cds--list-box--light .cds--list-box__menu-item:active,.cds--list-box--light :active:host(cds-multi-select-item){background-color:var(--cds-layer-selected)}.cds--list-box--disabled .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-border-subtle)}.cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option,:first-of-type:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:transparent}.cds--list-box__menu-item:hover .cds--list-box__menu-item__option,:hover:host(cds-multi-select-item) .cds--list-box__menu-item__option{color:var(--cds-text-primary,#161616)}.cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box__menu-item:hover+:host(cds-multi-select-item) .cds--list-box__menu-item__option,:hover:host(cds-multi-select-item)+.cds--list-box__menu-item .cds--list-box__menu-item__option,:hover:host(cds-multi-select-item)+:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:transparent}.cds--list-box--disabled .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box--disabled .cds--list-box__menu-item:hover+:host(cds-multi-select-item) .cds--list-box__menu-item__option,.cds--list-box--disabled :hover:host(cds-multi-select-item)+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box--disabled :hover:host(cds-multi-select-item)+:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:var(--cds-border-subtle)}.cds--list-box__menu-item__option{outline:2px solid transparent;outline-offset:-2px;display:block;overflow:hidden;height:2.5rem;padding:.6875rem 0;padding-right:1.5rem;border-top:1px solid transparent;border-top-color:var(--cds-border-subtle);border-bottom:1px solid transparent;margin:0 1rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;text-decoration:none;text-overflow:ellipsis;transition:border-color 70ms cubic-bezier(.2,0,.38,.9),color 70ms cubic-bezier(.2,0,.38,.9);white-space:nowrap}.cds--list-box__menu-item__option:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;padding:.6875rem 1rem;border-color:transparent;margin:0}@media screen and (prefers-contrast){.cds--list-box__menu-item__option:focus{outline-style:dotted}}.cds--list-box__menu-item__option:hover{border-color:transparent;color:var(--cds-text-primary,#161616)}.cds--list-box--sm .cds--list-box__menu-item__option{height:2rem;padding-top:.4375rem;padding-bottom:.4375rem}.cds--list-box--lg .cds--list-box__menu-item__option{height:3rem;padding-top:.9375rem;padding-bottom:.9375rem}.cds--list-box--disabled .cds--list-box__menu-item:hover .cds--list-box__menu-item__option,.cds--list-box--disabled .cds--list-box__menu-item__option{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--list-box__menu-item[disabled],.cds--list-box__menu-item[disabled] *,.cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,.cds--list-box__menu-item[disabled]:hover,[disabled]:host(cds-multi-select-item),[disabled]:host(cds-multi-select-item) *,[disabled]:host(cds-multi-select-item) .cds--list-box__menu-item__option{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;outline:0}.cds--list-box__menu-item[disabled]:hover,[disabled]:hover:host(cds-multi-select-item){background-color:revert}.cds--list-box__menu-item[disabled] .cds--checkbox-label::before,[disabled]:host(cds-multi-select-item) .cds--checkbox-label::before{border-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,[disabled]:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:var(--cds-border-subtle)}.cds--list-box__menu-item[disabled]:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box__menu-item[disabled]:hover+:host(cds-multi-select-item) .cds--list-box__menu-item__option,[disabled]:hover:host(cds-multi-select-item)+.cds--list-box__menu-item .cds--list-box__menu-item__option,[disabled]:hover:host(cds-multi-select-item)+:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:var(--cds-border-subtle)}.cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option{margin:0 .5rem}.cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option:focus{padding-right:.5rem;padding-left:.5rem;margin:0}.cds--list-box__menu-item--highlighted,:host(cds-multi-select-item[highlighted]),:host(cds-multi-select-item[selected]){border-color:transparent;background-color:var(--cds-layer-selected);color:var(--cds-text-primary,#161616)}.cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,.cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box__menu-item--highlighted+:host(cds-multi-select-item) .cds--list-box__menu-item__option,:host(cds-multi-select-item[highlighted]) .cds--list-box__menu-item__option,:host(cds-multi-select-item[highlighted])+.cds--list-box__menu-item .cds--list-box__menu-item__option,:host(cds-multi-select-item[highlighted])+:host(cds-multi-select-item) .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected])+.cds--list-box__menu-item .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected])+:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:transparent}.cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host(cds-multi-select-item[highlighted]) .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option{color:var(--cds-text-primary,#161616)}.cds--list-box__menu-item--active,:host(cds-multi-select-item[selected]){border-bottom-color:var(--cds-layer-selected);background-color:var(--cds-layer-selected);color:var(--cds-text-primary,#161616)}.cds--list-box--light .cds--list-box__menu-item--active,.cds--list-box--light :host(cds-multi-select-item[selected]){border-bottom-color:var(--cds-layer-selected);background-color:var(--cds-layer-selected)}.cds--list-box__menu-item--active:hover,:hover:host(cds-multi-select-item[selected]){border-bottom-color:var(--cds-layer-selected-hover);background-color:var(--cds-layer-selected-hover)}.cds--list-box__menu-item--active .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option{color:var(--cds-text-primary,#161616)}.cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option,.cds--list-box__menu-item--active+:host(cds-multi-select-item)>.cds--list-box__menu-item__option,:host(cds-multi-select-item[selected])+.cds--list-box__menu-item>.cds--list-box__menu-item__option,:host(cds-multi-select-item[selected])+:host(cds-multi-select-item)>.cds--list-box__menu-item__option{border-top-color:transparent}.cds--list-box__menu-item__selected-icon{position:absolute;top:50%;right:1rem;display:none;fill:var(--cds-icon-primary,#161616);transform:translateY(-50%)}.cds--list-box--inline .cds--list-box__menu-item__selected-icon{right:.5rem}.cds--list-box__menu-item--active .cds--list-box__menu-item__selected-icon,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__selected-icon{display:block}.cds--list-box__menu-item .cds--checkbox-label,:host(cds-multi-select-item) .cds--checkbox-label{width:100%}.cds--list-box__menu-item .cds--checkbox-label-text,:host(cds-multi-select-item) .cds--checkbox-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds--list-box--up .cds--list-box__menu{bottom:2.5rem}.cds--list-box--up .cds--list-box--sm .cds--list-box__menu,.cds--list-box--up.cds--dropdown--sm .cds--list-box__menu,.cds--list-box--up.cds--list-box--sm .cds--list-box__menu{bottom:2rem}.cds--list-box--up .cds--list-box--lg .cds--list-box__menu,.cds--list-box--up.cds--dropdown--lg .cds--list-box__menu,.cds--list-box--up.cds--list-box--lg .cds--list-box__menu{bottom:3rem}.cds--list-box input[role=combobox],.cds--list-box input[type=text]{min-width:0;background-color:inherit;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--list-box__field,.cds--list-box__menu,.cds--multi-select .cds--tag--filter{outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--list-box__field:focus,.cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,.cds--multi-select .cds--tag__close-icon:focus,:host(cds-multi-select-item[highlighted]) .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option{color:Highlight;outline:1px solid Highlight}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--list-box__menu-icon>svg,.cds--list-box__selection--multi>svg,.cds--list-box__selection>svg{fill:ButtonText}}.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}.cds--checkbox-group html{font-size:100%}.cds--checkbox-group 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--checkbox-group code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--checkbox-group strong{font-weight:600}.cds--form-item.cds--checkbox-wrapper{position:relative;margin-bottom:.25rem}.cds--form-item.cds--checkbox-wrapper:first-of-type{margin-top:.1875rem}.cds--label+.cds--form-item.cds--checkbox-wrapper{margin-top:-.125rem}.cds--form-item.cds--checkbox-wrapper:last-of-type{margin-bottom:.1875rem}.cds--checkbox{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;top:1.25rem;left:.7rem}.cds--checkbox-label{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);position:relative;display:flex;min-height:1.5rem;padding-top:.1875rem;padding-left:1.25rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--checkbox-label html{font-size:100%}.cds--checkbox-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--checkbox-label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--checkbox-label strong{font-weight:600}.cds--checkbox-label-text{padding-left:.375rem}.cds--checkbox-label::after,.cds--checkbox-label::before{box-sizing:border-box}.cds--checkbox-label::before{position:absolute;top:.125rem;left:0;width:1rem;height:1rem;border:1px solid var(--cds-icon-primary,#161616);margin:.125rem .125rem .125rem .1875rem;background-color:transparent;border-radius:2px;content:\"\"}.cds--checkbox-label::after{position:absolute;top:.46875rem;left:.4375rem;width:.5625rem;height:.3125rem;border-bottom:1.5px solid var(--cds-icon-inverse,#fff);border-left:1.5px solid var(--cds-icon-inverse,#fff);margin-top:-.1875rem;background:0 0;content:\"\";transform:scale(0) rotate(-45deg);transform-origin:bottom right}.cds--checkbox-label[data-contained-checkbox-state=true]::before,.cds--checkbox:checked+.cds--checkbox-label::before,.cds--checkbox:indeterminate+.cds--checkbox-label::before{border:none;border-width:1px;background-color:var(--cds-icon-primary,#161616)}.cds--checkbox-label[data-contained-checkbox-state=true]::after,.cds--checkbox:checked+.cds--checkbox-label::after{transform:scale(1) rotate(-45deg)}.cds--checkbox:indeterminate+.cds--checkbox-label::after{top:.6875rem;width:.5rem;border-bottom:2px solid var(--cds-icon-inverse,#fff);border-left:0 solid var(--cds-icon-inverse,#fff);transform:scale(1) rotate(0)}.cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before,.cds--checkbox-label__focus::before,.cds--checkbox:checked:focus+.cds--checkbox-label::before,.cds--checkbox:focus+.cds--checkbox-label::before,.cds--checkbox:indeterminate:focus+.cds--checkbox-label::before{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--checkbox-label[data-contained-checkbox-disabled=true],.cds--checkbox:disabled+.cds--checkbox-label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--checkbox-label[data-contained-checkbox-disabled=true]::before,.cds--checkbox:disabled+.cds--checkbox-label::before{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before,.cds--checkbox:checked:disabled+.cds--checkbox-label::before,.cds--checkbox:indeterminate:disabled+.cds--checkbox-label::before{background-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--checkbox-group[data-invalid] .cds--checkbox-label::before,.cds--checkbox-wrapper--invalid .cds--checkbox-label::before,.cds--checkbox-wrapper--invalid .cds--checkbox:checked+.cds--checkbox-label::before{border:1px solid var(--cds-support-error,#da1e28)}.cds--checkbox-group .cds--checkbox-wrapper--invalid>.cds--checkbox__validation-msg,.cds--checkbox-group .cds--checkbox-wrapper--warning>.cds--checkbox__validation-msg,.cds--checkbox-group .cds--checkbox-wrapper>.cds--form__helper-text{display:none}.cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,.cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked+.cds--checkbox-label::before{border:1px solid var(--cds-icon-primary,#161616)}.cds--checkbox-group__validation-msg,.cds--checkbox__validation-msg{display:none;align-items:flex-end;margin-top:.25rem}.cds--checkbox__invalid-icon{margin:0 .0625rem 0 .1875rem;fill:var(--cds-support-error,#da1e28)}.cds--checkbox__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--checkbox__invalid-icon--warning path:first-of-type{fill:#000}.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg,.cds--checkbox-group--warning .cds--checkbox-group__validation-msg,.cds--checkbox-wrapper--invalid>.cds--checkbox__validation-msg,.cds--checkbox-wrapper--warning>.cds--checkbox__validation-msg{display:flex}.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,.cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement,.cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement,.cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement{display:block;overflow:visible;max-height:100%;margin-top:0;margin-left:.5rem}.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,.cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--checkbox-group--readonly .cds--checkbox-label,.cds--checkbox-wrapper--readonly .cds--checkbox-label{cursor:default}.cds--checkbox-group--readonly .cds--checkbox-label-text,.cds--checkbox-wrapper--readonly .cds--checkbox-label-text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.cds--checkbox-group--readonly .cds--checkbox+.cds--checkbox-label::before,.cds--checkbox-wrapper--readonly .cds--checkbox+.cds--checkbox-label::before{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--checkbox-group--readonly .cds--checkbox:checked+.cds--checkbox-label::before,.cds--checkbox-wrapper--readonly .cds--checkbox:checked+.cds--checkbox-label::before{border:1px solid var(--cds-icon-disabled,rgba(22,22,22,.25));background:0 0}.cds--checkbox-group--readonly .cds--checkbox:checked+.cds--checkbox-label::after,.cds--checkbox-wrapper--readonly .cds--checkbox:checked+.cds--checkbox-label::after{border-color:var(--cds-text-primary,#161616)}.cds--checkbox-skeleton .cds--checkbox-label{cursor:default}.cds--checkbox-label-text.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:6.25rem;height:1rem;margin:.0625rem 0 0 .375rem}.cds--checkbox-label-text.cds--skeleton:active,.cds--checkbox-label-text.cds--skeleton:focus,.cds--checkbox-label-text.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--checkbox-label-text.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--checkbox-label-text.cds--skeleton::before{animation:none}}.cds--checkbox--inline{position:relative}:host(cds-multi-select){outline:0}:host(cds-multi-select) .cds--assistive-text{left:-100%;top:-100%}:host(cds-multi-select) .cds--label[hidden]{display:none}:host(cds-multi-select) .cds--list-box__menu{top:100%;margin-top:1px}:host(cds-multi-select) .cds--text-input{border:none;padding-left:0}:host(cds-multi-select) .cds--text-input:focus{outline:0}:host(cds-multi-select)[filterable] .cds--list-box__field:focus-within{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(cds-multi-select-item){display:block}:host(cds-multi-select-item) .cds--checkbox:checked~.cds--checkbox-label-text{color:var(--cds-text-primary,#161616)}:host(cds-multi-select-item) .cds--checkbox:focus+.cds--checkbox-label::before{box-shadow:none}:host(cds-multi-select-item) .cds--list-box__menu-item__option{height:100%}:host(cds-multi-select-item) .cds--list-box__menu-item__option .cds--checkbox-wrapper{width:100%;height:100%;display:flex;align-items:center}:host(cds-multi-select-item) .cds--list-box__menu-item__option>.cds--form-item{margin:0;flex-direction:row}:host(cds-multi-select-item)[filtered]{display:none}:host(cds-multi-select-item[size=sm]){height:rem(32px)}:host(cds-multi-select-item[size=sm]) .cds--list-box__menu-item__option{padding-top:rem(7px);padding-bottom:rem(7px)}:host(cds-multi-select-item[size=xl]){height:rem(48px)}:host(cds-multi-select-item[size=xl]) .cds--list-box__menu-item__option{padding-top:rem(15px);padding-bottom:rem(15px)}:host(cds-multi-select-item[disabled]){color:var(--cds-text-disabled,rgba(22,22,22,.25));text-decoration:none}:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option{color:var(--cds-text-primary,#161616)}",
|
|
11
|
+
"@keyframes hide-feedback{0%{opacity:1;visibility:inherit}100%{opacity:0;visibility:hidden}}@keyframes show-feedback{0%{opacity:0;visibility:hidden}100%{opacity:1;visibility:inherit}}@keyframes skeleton{0%{opacity:.3;transform:scaleX(0);transform-origin:left}20%{opacity:1;transform:scaleX(1);transform-origin:left}28%{transform:scaleX(1);transform-origin:right}51%{transform:scaleX(0);transform-origin:right}58%{transform:scaleX(0);transform-origin:right}82%{transform:scaleX(1);transform-origin:right}83%{transform:scaleX(1);transform-origin:left}96%{transform:scaleX(0);transform-origin:left}100%{opacity:.3;transform:scaleX(0);transform-origin:left}}.cds--assistive-text,.cds--visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip:rect(0,0,0,0);visibility:inherit;white-space:nowrap}input:-webkit-autofill,input:-webkit-autofill:focus,input:-webkit-autofill:hover,textarea:-webkit-autofill,textarea:-webkit-autofill:focus,textarea:-webkit-autofill:hover{box-shadow:0 0 0 1000px var(--cds-field) inset;-webkit-text-fill-color:var(--cds-text-primary,#161616)}.cds--fieldset html{font-size:100%}.cds--fieldset body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--fieldset code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--fieldset strong{font-weight:600}.cds--form-item{font-size:var(--cds-body-compact-01-font-size,.875rem);font-weight:var(--cds-body-compact-01-font-weight,400);line-height:var(--cds-body-compact-01-line-height,1.28572);letter-spacing:var(--cds-body-compact-01-letter-spacing,.16px);display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start}.cds--label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:inline-block;margin-bottom:.5rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;vertical-align:baseline}.cds--label html{font-size:100%}.cds--label body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--label strong{font-weight:600}.cds--label .cds--toggletip-label{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label--no-margin{margin-bottom:0}.cds--label+.cds--tooltip{position:relative;top:.2rem;left:.5rem}.cds--label+.cds--tooltip .cds--tooltip__trigger{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;display:flex;align-items:center;justify-content:center;font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px)}.cds--label+.cds--tooltip .cds--tooltip__trigger *,.cds--label+.cds--tooltip .cds--tooltip__trigger ::after,.cds--label+.cds--tooltip .cds--tooltip__trigger ::before{box-sizing:inherit}.cds--label+.cds--tooltip .cds--tooltip__trigger::-moz-focus-inner{border:0}.cds--label+.cds--tooltip .cds--tooltip__trigger:focus{outline:1px solid var(--cds-focus,#0f62fe)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg{fill:var(--cds-icon-secondary,#525252)}.cds--label+.cds--tooltip .cds--tooltip__trigger svg :hover{fill:var(--cds-icon-primary,#161616)}.cds--label+.cds--toggletip{top:.2rem;left:.5rem}.cds--label.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:4.6875rem;height:.875rem}.cds--label.cds--skeleton:active,.cds--label.cds--skeleton:focus,.cds--label.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--label.cds--skeleton::before{position:absolute;width:100%;height:100%;animation:3s ease-in-out skeleton infinite;background:var(--cds-skeleton-element,#c6c6c6);content:\"\";will-change:transform-origin,transform,opacity}@media (prefers-reduced-motion:reduce){.cds--label.cds--skeleton::before{animation:none}}input[type=number]{font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif}.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline:2px solid var(--cds-support-error,#da1e28);outline-offset:-2px}@media screen and (prefers-contrast){.cds--combo-box[data-invalid]:not(.cds--multi-select--selected) .cds--text-input:not(:focus),.cds--list-box[data-invalid]:not(.cds--multi-select--invalid--focused),.cds--number[data-invalid] input[type=number]:not(:focus),.cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),.cds--text-area__wrapper[data-invalid]>.cds--text-area--invalid:not(:focus),.cds--text-input__field-wrapper[data-invalid]>.cds--text-input--invalid:not(:focus),input[data-invalid]:not(:focus){outline-style:dotted}}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper--warn~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box--warning~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--number__input-wrapper--warning~.cds--form-requirement,.cds--select--warning .cds--select-input__wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper--warn~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper--warning>.cds--text-input~.cds--form-requirement,.cds--text-input__field-wrapper--warning~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{display:block;overflow:visible;max-height:12.5rem;font-weight:400}.cds--date-picker-input__wrapper--invalid~.cds--form-requirement,.cds--date-picker-input__wrapper~.cds--form-requirement,.cds--list-box[data-invalid]~.cds--form-requirement,.cds--number[data-invalid] .cds--number__input-wrapper~.cds--form-requirement,.cds--select-input__wrapper[data-invalid]~.cds--form-requirement,.cds--text-area__wrapper[data-invalid]~.cds--form-requirement,.cds--text-input__field-wrapper[data-invalid]~.cds--form-requirement,.cds--time-picker--invalid~.cds--form-requirement,.cds--time-picker[data-invalid]~.cds--form-requirement,input[data-invalid]~.cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--form--fluid .cds--text-input__field-wrapper--warning,.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]{display:block}.cds--form--fluid input[data-invalid]{outline:0}.cds--form--fluid .cds--form-requirement{padding:.5rem 2.5rem .5rem 1rem;margin:0}input:not(output):not([data-invalid]):-moz-ui-invalid{box-shadow:none}.cds--form-requirement{font-size:var(--cds-label-01-font-size,.75rem);font-weight:var(--cds-label-01-font-weight,400);line-height:var(--cds-label-01-line-height,1.33333);letter-spacing:var(--cds-label-01-letter-spacing,.32px);display:none;overflow:hidden;max-height:0;margin:.25rem 0 0}.cds--form-requirement html{font-size:100%}.cds--form-requirement body{font-weight:400;font-family:'IBM Plex Sans',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cds--form-requirement code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--form-requirement strong{font-weight:600}.cds--select--inline .cds--form__helper-text{margin-top:0}.cds--form__helper-text{font-size:var(--cds-helper-text-01-font-size,.75rem);line-height:var(--cds-helper-text-01-line-height,1.33333);letter-spacing:var(--cds-helper-text-01-letter-spacing,.32px);z-index:0;width:100%;margin-top:.25rem;color:var(--cds-text-secondary,#525252);opacity:1}.cds--form__helper-text--disabled,.cds--label--disabled{color:var(--cds-text-disabled,rgba(22,22,22,.25))}fieldset[disabled] .cds--form__helper-text,fieldset[disabled] .cds--label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--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--tag{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);background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#393939);display:inline-flex;min-width:2rem;max-width:100%;min-height:1.5rem;align-items:center;justify-content:center;padding:.25rem .5rem;margin:.25rem;border-radius:.9375rem;cursor:default;vertical-align:middle;word-break:break-word}.cds--tag .cds--tag__close-icon:hover,.cds--tag.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-gray,#c6c6c6)}.cds--tag:not(:first-child){margin-left:0}.cds--tag--red{background-color:var(--cds-tag-background-red,#ffd7d9);color:var(--cds-tag-color-red,#750e13)}.cds--tag--red .cds--tag__close-icon:hover,.cds--tag--red.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-red,#ffb3b8)}.cds--tag--magenta{background-color:var(--cds-tag-background-magenta,#ffd6e8);color:var(--cds-tag-color-magenta,#740937)}.cds--tag--magenta .cds--tag__close-icon:hover,.cds--tag--magenta.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-magenta,#ffafd2)}.cds--tag--purple{background-color:var(--cds-tag-background-purple,#e8daff);color:var(--cds-tag-color-purple,#491d8b)}.cds--tag--purple .cds--tag__close-icon:hover,.cds--tag--purple.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-purple,#d4bbff)}.cds--tag--blue{background-color:var(--cds-tag-background-blue,#d0e2ff);color:var(--cds-tag-color-blue,#002d9c)}.cds--tag--blue .cds--tag__close-icon:hover,.cds--tag--blue.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-blue,#a6c8ff)}.cds--tag--cyan{background-color:var(--cds-tag-background-cyan,#bae6ff);color:var(--cds-tag-color-cyan,#003a6d)}.cds--tag--cyan .cds--tag__close-icon:hover,.cds--tag--cyan.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-cyan,#82cfff)}.cds--tag--teal{background-color:var(--cds-tag-background-teal,#9ef0f0);color:var(--cds-tag-color-teal,#004144)}.cds--tag--teal .cds--tag__close-icon:hover,.cds--tag--teal.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-teal,#3ddbd9)}.cds--tag--green{background-color:var(--cds-tag-background-green,#a7f0ba);color:var(--cds-tag-color-green,#044317)}.cds--tag--green .cds--tag__close-icon:hover,.cds--tag--green.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-green,#6fdc8c)}.cds--tag--gray{background-color:var(--cds-tag-background-gray,#e0e0e0);color:var(--cds-tag-color-gray,#393939)}.cds--tag--gray .cds--tag__close-icon:hover,.cds--tag--gray.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-gray,#c6c6c6)}.cds--tag--cool-gray{background-color:var(--cds-tag-background-cool-gray,#dde1e6);color:var(--cds-tag-color-cool-gray,#343a3f)}.cds--tag--cool-gray .cds--tag__close-icon:hover,.cds--tag--cool-gray.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-cool-gray,#c1c7cd)}.cds--tag--warm-gray{background-color:var(--cds-tag-background-warm-gray,#e5e0df);color:var(--cds-tag-color-warm-gray,#3c3838)}.cds--tag--warm-gray .cds--tag__close-icon:hover,.cds--tag--warm-gray.cds--tag--interactive:hover{background-color:var(--cds-tag-hover-warm-gray,#cac5c4)}.cds--tag--high-contrast{background-color:var(--cds-background-inverse,#393939);color:var(--cds-text-inverse,#fff)}.cds--tag--high-contrast .cds--tag__close-icon:hover,.cds--tag--high-contrast.cds--tag--interactive:hover{background-color:var(--cds-background-inverse-hover,#474747)}.cds--tag--outline{background-color:var(--cds-background,#fff);color:var(--cds-text-primary,#161616);box-shadow:0 0 0 1px var(--cds-background-inverse,#393939)}.cds--tag--outline .cds--tag__close-icon:hover,.cds--tag--outline.cds--tag--interactive:hover{background-color:var(--cds-layer-hover)}.cds--tag--disabled,.cds--tag--filter.cds--tag--disabled,.cds--tag--interactive.cds--tag--disabled,:host(cds-multi-select) .cds--tag--disabled{background-color:var(--cds-layer);color:var(--cds-text-disabled,rgba(22,22,22,.25));box-shadow:none}.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--disabled.cds--tag--interactive:hover,.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--filter.cds--tag--disabled.cds--tag--interactive:hover,.cds--tag--interactive.cds--tag--disabled .cds--tag__close-icon:hover,.cds--tag--interactive.cds--tag--disabled.cds--tag--interactive:hover{background-color:var(--cds-layer)}.cds--tag--disabled:hover,.cds--tag--filter.cds--tag--disabled:hover,.cds--tag--interactive.cds--tag--disabled:hover{cursor:not-allowed}.cds--tag__label{overflow:hidden;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.cds--tag--interactive:focus{box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:0}.cds--tag--interactive:hover{cursor:pointer}.cds--tag--filter{padding-top:0;padding-right:0;padding-bottom:0;cursor:pointer}.cds--tag--filter:hover{outline:0}.cds--tag--interactive{transition:background-color 70ms cubic-bezier(0,0,.38,.9)}.cds--tag__close-icon{display:flex;width:1.5rem;height:1.5rem;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:0;margin:0 0 0 .125rem;background-color:transparent;border-radius:50%;color:currentColor;cursor:pointer;transition:background-color 70ms cubic-bezier(.2,0,.38,.9),box-shadow 70ms cubic-bezier(.2,0,.38,.9)}.cds--tag__close-icon svg{fill:currentColor}.cds--tag__custom-icon{width:1rem;height:1rem;flex-shrink:0;padding:0;border:0;margin-right:.25rem;background-color:transparent;color:currentColor;outline:0}.cds--tag__custom-icon svg{fill:currentColor}.cds--tag--disabled .cds--tag__close-icon{cursor:not-allowed}.cds--tag__close-icon:focus{border-radius:50%;box-shadow:inset 0 0 0 1px var(--cds-focus,#0f62fe);outline:0}.cds--tag--high-contrast .cds--tag__close-icon:focus{box-shadow:inset 0 0 0 1px var(--cds-focus-inverse,#fff)}.cds--tag--filter.cds--tag--disabled .cds--tag__close-icon:hover{background-color:transparent}.cds--tag--filter.cds--tag--disabled svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--tag--sm{min-height:1.125rem;padding:0 .5rem}.cds--tag--sm.cds--tag--filter{padding-right:0}.cds--tag--sm .cds--tag__close-icon{width:1.125rem;height:1.125rem;margin-left:.3125rem}.cds--tag.cds--skeleton{background-color:var(--cds-skeleton-background,#e8e8e8);color:var(--cds-text-primary,#161616);overflow:hidden;width:3.75rem}.cds--tag.cds--skeleton .cds--tag__close-icon:hover,.cds--tag.cds--skeleton.cds--tag--interactive:hover{background-color:var(--cds-skeleton-background,#e8e8e8)}@media not all and (min-resolution:0.001dpcm){@supports (-webkit-appearance:none) and (stroke-color:transparent){.cds--tag.cds--skeleton{transform:translateZ(0)}}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag{outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag__close-icon svg,.cds--tag__custom-icon svg{fill:ButtonText}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--tag__close-icon:focus{color:Highlight;outline:1px solid Highlight}}.cds--list-box__wrapper--inline,:host(cds-multi-select)[type=inline]{display:inline-grid;align-items:center;grid-gap:.25rem;grid-template:auto auto/auto auto}.cds--list-box__wrapper--inline .cds--label,:host(cds-multi-select)[type=inline] .cds--label{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)}.cds--list-box__wrapper--inline .cds--form-requirement,.cds--list-box__wrapper--inline .cds--form__helper-text,.cds--list-box__wrapper--inline .cds--label,:host(cds-multi-select)[type=inline] .cds--form-requirement,:host(cds-multi-select)[type=inline] .cds--form__helper-text,:host(cds-multi-select)[type=inline] .cds--label{margin:0}.cds--list-box__wrapper--inline .cds--form__helper-text,:host(cds-multi-select)[type=inline] .cds--form__helper-text{max-width:none}.cds--list-box__wrapper--inline .cds--form-requirement,:host(cds-multi-select)[type=inline] .cds--form-requirement{grid-column:2}.cds--list-box{position:relative;width:100%;height:2.5rem;max-height:2.5rem;border:none;border-bottom:1px solid var(--cds-border-strong);background-color:var(--cds-field);color:var(--cds-text-primary,#161616);cursor:pointer;transition:all 70ms cubic-bezier(.2,0,.38,.9)}.cds--list-box html{font-size:100%}.cds--list-box 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--list-box code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--list-box strong{font-weight:600}.cds--list-box:hover{background-color:var(--cds-field-hover)}.cds--list-box--lg{height:3rem;max-height:3rem}.cds--list-box--sm{height:2rem;max-height:2rem}.cds--list-box--expanded{border-bottom-color:var(--cds-border-subtle)}.cds--list-box--expanded:hover{background-color:var(--cds-field)}.cds--list-box--expanded:hover.cds--list-box--light:hover{background-color:var(--cds-field-02,#fff)}.cds--list-box .cds--text-input{min-width:0;height:100%}.cds--list-box__invalid-icon{position:absolute;top:50%;right:2.5rem;fill:var(--cds-support-error,#da1e28);transform:translateY(-50%)}.cds--list-box__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--list-box__invalid-icon--warning path[fill]{fill:#000;opacity:1}.cds--list-box.cds--list-box--warning .cds--list-box__field,.cds--list-box[data-invalid] .cds--list-box__field{padding-right:4rem;border-bottom:0}.cds--list-box.cds--list-box--warning.cds--list-box--inline .cds--list-box__field,.cds--list-box[data-invalid].cds--list-box--inline .cds--list-box__field{padding-right:3.5rem}.cds--list-box--light{background-color:var(--cds-field-02,#fff)}.cds--list-box--light:hover{background-color:var(--cds-field-hover)}.cds--list-box--light .cds--list-box__menu{background:var(--cds-layer)}.cds--list-box--light .cds--list-box__menu-item__option{border-top-color:var(--cds-border-subtle)}.cds--list-box--light.cds--list-box--expanded{border-bottom-color:transparent}.cds--list-box--disabled:hover{background-color:var(--cds-field)}.cds--list-box--light.cds--list-box--disabled{background-color:var(--cds-field-02,#fff)}.cds--list-box--disabled,.cds--list-box--disabled .cds--list-box__field,.cds--list-box--disabled .cds--list-box__field:focus{border-bottom-color:transparent;outline:0}.cds--list-box--disabled .cds--list-box__label,.cds--list-box--disabled.cds--list-box--inline .cds--list-box__label{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--list-box--disabled .cds--list-box__menu-icon>svg,.cds--list-box--disabled .cds--list-box__selection>svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--list-box--disabled,.cds--list-box--disabled .cds--list-box__field,.cds--list-box--disabled .cds--list-box__menu-icon{cursor:not-allowed}.cds--list-box--disabled .cds--list-box__menu-item,.cds--list-box--disabled .cds--list-box__menu-item--highlighted,.cds--list-box--disabled .cds--list-box__menu-item:hover,.cds--list-box--disabled :host(cds-multi-select-item){color:var(--cds-text-disabled,rgba(22,22,22,.25));text-decoration:none}.cds--list-box--disabled .cds--list-box__selection:hover{cursor:not-allowed}.cds--list-box--disabled.cds--list-box[data-invalid] .cds--list-box__field{padding-right:3rem}.cds--list-box--disabled.cds--list-box[data-invalid].cds--list-box--inline .cds--list-box__field{padding-right:2rem}.cds--list-box.cds--list-box--inline{border-width:0;background-color:transparent}.cds--list-box.cds--list-box--inline:hover{background-color:var(--cds-layer-hover)}.cds--list-box.cds--list-box--inline.cds--list-box--expanded{border-bottom-width:0}.cds--list-box.cds--list-box--inline.cds--list-box--expanded .cds--list-box__field[aria-expanded=true]{border-width:0}.cds--list-box.cds--list-box--inline.cds--list-box--disabled:hover,.cds--list-box.cds--list-box--inline.cds--list-box--expanded:hover{background-color:transparent}.cds--list-box.cds--list-box--inline .cds--list-box__field{padding:0 2rem 0 .5rem}.cds--list-box.cds--list-box--inline .cds--list-box__menu-icon{right:.5rem}.cds--list-box.cds--list-box--inline .cds--list-box__invalid-icon{right:2rem}.cds--list-box--inline .cds--list-box__label{color:var(--cds-text-primary,#161616)}.cds--list-box--inline .cds--list-box__field{height:100%}.cds--dropdown--inline .cds--list-box__field{max-width:30rem}.cds--dropdown--inline .cds--list-box__menu{min-width:18rem;max-width:30rem}.cds--list-box__field{box-sizing:border-box;padding:0;border:0;margin:0;font-family:inherit;font-size:100%;vertical-align:baseline;display:inline-block;padding:0;border:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;cursor:pointer;text-align:start;width:100%;position:relative;display:inline-flex;overflow:hidden;height:calc(100% + 1px);align-items:center;padding:0 3rem 0 1rem;cursor:pointer;outline:0;text-overflow:ellipsis;vertical-align:top;white-space:nowrap}.cds--list-box__field *,.cds--list-box__field ::after,.cds--list-box__field ::before{box-sizing:inherit}.cds--list-box__field::-moz-focus-inner{border:0}.cds--list-box__field:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--list-box__field:focus{outline-style:dotted}}.cds--list-box__field[disabled]{color:var(--cds-text-disabled,rgba(22,22,22,.25));outline:0}.cds--list-box__field .cds--text-input{padding-right:4.5rem}.cds--list-box--warning .cds--list-box__field .cds--text-input,.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input{padding-right:6.125rem}.cds--list-box--warning .cds--list-box__field .cds--text-input+.cds--list-box__invalid-icon,.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input+.cds--list-box__invalid-icon{right:4.125rem}.cds--list-box__field .cds--text-input--empty{padding-right:3rem}.cds--list-box--warning .cds--list-box__field .cds--text-input--empty,.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty{padding-right:carbon--mini-units(9)}.cds--list-box--warning .cds--list-box__field .cds--text-input--empty+.cds--list-box__invalid-icon,.cds--list-box[data-invalid] .cds--list-box__field .cds--text-input--empty+.cds--list-box__invalid-icon{right:2.5rem}.cds--list-box__label{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);overflow:hidden;color:var(--cds-text-primary,#161616);text-overflow:ellipsis;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.cds--list-box__menu-icon{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;position:absolute;right:1rem;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;cursor:pointer;outline:0;transition:transform 70ms cubic-bezier(.2,0,.38,.9)}.cds--list-box__menu-icon *,.cds--list-box__menu-icon ::after,.cds--list-box__menu-icon ::before{box-sizing:inherit}.cds--list-box__menu-icon::-moz-focus-inner{border:0}.cds--list-box__menu-icon>svg{fill:var(--cds-icon-primary,#161616)}.cds--list-box__menu-icon--open{width:1.5rem;justify-content:center;transform:rotate(180deg)}.cds--list-box__selection{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;position:absolute;top:50%;right:2.25rem;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;cursor:pointer;transform:translateY(-50%);transition:background-color 70ms cubic-bezier(.2,0,.38,.9);-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--list-box__selection *,.cds--list-box__selection ::after,.cds--list-box__selection ::before{box-sizing:inherit}.cds--list-box__selection::-moz-focus-inner{border:0}.cds--list-box__selection:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--list-box__selection:focus{outline-style:dotted}}.cds--list-box__selection:focus:hover{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--list-box__selection:focus:hover{outline-style:dotted}}.cds--list-box__selection>svg{fill:var(--cds-icon-primary,#161616)}.cds--list-box--disabled .cds--list-box__selection:focus{outline:0}.cds--list-box__selection--multi{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);position:static;top:auto;display:flex;width:auto;height:1.5rem;align-items:center;justify-content:space-between;padding:.5rem;padding-right:.125rem;margin-right:.625rem;background-color:var(--cds-background-inverse,#393939);border-radius:.75rem;color:var(--cds-text-inverse,#fff);line-height:0;transform:none}.cds--list-box__selection--multi>svg{width:1.25rem;height:1.25rem;padding:.125rem;margin-left:.25rem;fill:var(--cds-icon-inverse,#fff)}.cds--list-box__selection--multi>svg:hover{background-color:var(--cds-button-secondary-hover,#474747);border-radius:50%}.cds--list-box--disabled .cds--list-box__selection--multi{background-color:var(--cds-text-disabled,rgba(22,22,22,.25));color:var(--cds-layer)}.cds--list-box--disabled .cds--list-box__selection--multi .cds--tag__close-icon:hover,.cds--list-box--disabled .cds--list-box__selection--multi.cds--tag--interactive:hover{background-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--list-box--disabled .cds--list-box__selection--multi>svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--list-box--disabled .cds--list-box__selection--multi>svg:hover{background-color:initial}.cds--list-box__selection--multi:hover{outline:0}.cds--list-box__menu{box-shadow:0 2px 6px var(--cds-shadow,rgba(0,0,0,.3));position:absolute;z-index:9100;right:0;left:0;width:100%;background-color:var(--cds-layer);overflow-y:auto;transition:max-height 110ms cubic-bezier(.2,0,.38,.9)}.cds--list-box__menu:focus{outline:1px solid var(--cds-focus,#0f62fe)}@media screen and (prefers-contrast){.cds--list-box__menu:focus{outline-style:dotted}}.cds--list-box .cds--list-box__field[aria-expanded=false]+.cds--list-box__menu{display:none;max-height:0}.cds--list-box--expanded .cds--list-box__menu{display:block;max-height:13.75rem}.cds--list-box--expanded.cds--list-box--lg .cds--list-box__menu{max-height:16.5rem}.cds--list-box--expanded.cds--list-box--sm .cds--list-box__menu{max-height:11rem}.cds--list-box__menu-item,:host(cds-multi-select-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);position:relative;height:2.5rem;color:var(--cds-text-secondary,#525252);cursor:pointer;transition:background 70ms cubic-bezier(.2,0,.38,.9);-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--list-box__menu-item:hover,:hover:host(cds-multi-select-item){background-color:var(--cds-layer-hover)}.cds--list-box__menu-item:active,:active:host(cds-multi-select-item){background-color:var(--cds-layer-selected)}.cds--list-box--light .cds--list-box__menu-item:hover,.cds--list-box--light :hover:host(cds-multi-select-item){background-color:var(--cds-layer-hover)}.cds--list-box--sm .cds--list-box__menu-item,.cds--list-box--sm :host(cds-multi-select-item){height:2rem}.cds--list-box--lg .cds--list-box__menu-item,.cds--list-box--lg :host(cds-multi-select-item){height:3rem}.cds--list-box--disabled .cds--list-box__menu-item:hover,.cds--list-box--disabled :hover:host(cds-multi-select-item){background-color:transparent}.cds--list-box--light .cds--list-box__menu-item:active,.cds--list-box--light :active:host(cds-multi-select-item){background-color:var(--cds-layer-selected)}.cds--list-box--disabled .cds--list-box__menu-item__option:hover{border-top-color:var(--cds-border-subtle)}.cds--list-box__menu-item:first-of-type .cds--list-box__menu-item__option,:first-of-type:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:transparent}.cds--list-box__menu-item:hover .cds--list-box__menu-item__option,:hover:host(cds-multi-select-item) .cds--list-box__menu-item__option{color:var(--cds-text-primary,#161616)}.cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box__menu-item:hover+:host(cds-multi-select-item) .cds--list-box__menu-item__option,:hover:host(cds-multi-select-item)+.cds--list-box__menu-item .cds--list-box__menu-item__option,:hover:host(cds-multi-select-item)+:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:transparent}.cds--list-box--disabled .cds--list-box__menu-item:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box--disabled .cds--list-box__menu-item:hover+:host(cds-multi-select-item) .cds--list-box__menu-item__option,.cds--list-box--disabled :hover:host(cds-multi-select-item)+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box--disabled :hover:host(cds-multi-select-item)+:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:var(--cds-border-subtle)}.cds--list-box__menu-item__option{outline:2px solid transparent;outline-offset:-2px;display:block;overflow:hidden;height:2.5rem;padding:.6875rem 0;padding-right:1.5rem;border-top:1px solid transparent;border-top-color:var(--cds-border-subtle);border-bottom:1px solid transparent;margin:0 1rem;color:var(--cds-text-secondary,#525252);font-weight:400;line-height:1rem;text-decoration:none;text-overflow:ellipsis;transition:border-color 70ms cubic-bezier(.2,0,.38,.9),color 70ms cubic-bezier(.2,0,.38,.9);white-space:nowrap}.cds--list-box__menu-item__option:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px;padding:.6875rem 1rem;border-color:transparent;margin:0}@media screen and (prefers-contrast){.cds--list-box__menu-item__option:focus{outline-style:dotted}}.cds--list-box__menu-item__option:hover{border-color:transparent;color:var(--cds-text-primary,#161616)}.cds--list-box--sm .cds--list-box__menu-item__option{height:2rem;padding-top:.4375rem;padding-bottom:.4375rem}.cds--list-box--lg .cds--list-box__menu-item__option{height:3rem;padding-top:.9375rem;padding-bottom:.9375rem}.cds--list-box--disabled .cds--list-box__menu-item:hover .cds--list-box__menu-item__option,.cds--list-box--disabled .cds--list-box__menu-item__option{color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--list-box__menu-item[disabled],.cds--list-box__menu-item[disabled] *,.cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,.cds--list-box__menu-item[disabled]:hover,[disabled]:host(cds-multi-select-item),[disabled]:host(cds-multi-select-item) *,[disabled]:host(cds-multi-select-item) .cds--list-box__menu-item__option{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed;outline:0}.cds--list-box__menu-item[disabled]:hover,[disabled]:hover:host(cds-multi-select-item){background-color:revert}.cds--list-box__menu-item[disabled] .cds--checkbox-label::before,[disabled]:host(cds-multi-select-item) .cds--checkbox-label::before{border-color:var(--cds-text-disabled,rgba(22,22,22,.25))}.cds--list-box__menu-item[disabled] .cds--list-box__menu-item__option,[disabled]:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:var(--cds-border-subtle)}.cds--list-box__menu-item[disabled]:hover+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box__menu-item[disabled]:hover+:host(cds-multi-select-item) .cds--list-box__menu-item__option,[disabled]:hover:host(cds-multi-select-item)+.cds--list-box__menu-item .cds--list-box__menu-item__option,[disabled]:hover:host(cds-multi-select-item)+:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:var(--cds-border-subtle)}.cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option{margin:0 .5rem}.cds--list-box.cds--list-box--inline .cds--list-box__menu-item__option:focus{padding-right:.5rem;padding-left:.5rem;margin:0}.cds--list-box__menu-item--highlighted,:host(cds-multi-select-item[highlighted]),:host(cds-multi-select-item[selected]){border-color:transparent;background-color:var(--cds-layer-selected);color:var(--cds-text-primary,#161616)}.cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,.cds--list-box__menu-item--highlighted+.cds--list-box__menu-item .cds--list-box__menu-item__option,.cds--list-box__menu-item--highlighted+:host(cds-multi-select-item) .cds--list-box__menu-item__option,:host(cds-multi-select-item[highlighted]) .cds--list-box__menu-item__option,:host(cds-multi-select-item[highlighted])+.cds--list-box__menu-item .cds--list-box__menu-item__option,:host(cds-multi-select-item[highlighted])+:host(cds-multi-select-item) .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected])+.cds--list-box__menu-item .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected])+:host(cds-multi-select-item) .cds--list-box__menu-item__option{border-top-color:transparent}.cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,:host(cds-multi-select-item[highlighted]) .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option{color:var(--cds-text-primary,#161616)}.cds--list-box__menu-item--active,:host(cds-multi-select-item[selected]){border-bottom-color:var(--cds-layer-selected);background-color:var(--cds-layer-selected);color:var(--cds-text-primary,#161616)}.cds--list-box--light .cds--list-box__menu-item--active,.cds--list-box--light :host(cds-multi-select-item[selected]){border-bottom-color:var(--cds-layer-selected);background-color:var(--cds-layer-selected)}.cds--list-box__menu-item--active:hover,:hover:host(cds-multi-select-item[selected]){border-bottom-color:var(--cds-layer-selected-hover);background-color:var(--cds-layer-selected-hover)}.cds--list-box__menu-item--active .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option{color:var(--cds-text-primary,#161616)}.cds--list-box__menu-item--active+.cds--list-box__menu-item>.cds--list-box__menu-item__option,.cds--list-box__menu-item--active+:host(cds-multi-select-item)>.cds--list-box__menu-item__option,:host(cds-multi-select-item[selected])+.cds--list-box__menu-item>.cds--list-box__menu-item__option,:host(cds-multi-select-item[selected])+:host(cds-multi-select-item)>.cds--list-box__menu-item__option{border-top-color:transparent}.cds--list-box__menu-item__selected-icon{position:absolute;top:50%;right:1rem;display:none;fill:var(--cds-icon-primary,#161616);transform:translateY(-50%)}.cds--list-box--inline .cds--list-box__menu-item__selected-icon{right:.5rem}.cds--list-box__menu-item--active .cds--list-box__menu-item__selected-icon,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__selected-icon{display:block}.cds--list-box__menu-item .cds--checkbox-label,:host(cds-multi-select-item) .cds--checkbox-label{width:100%}.cds--list-box__menu-item .cds--checkbox-label-text,:host(cds-multi-select-item) .cds--checkbox-label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cds--list-box--up .cds--list-box__menu,:host(cds-multi-select)[direction=top] .cds--list-box__menu{bottom:2.5rem}.cds--dropdown--sm[direction=top]:host(cds-multi-select) .cds--list-box__menu,.cds--list-box--sm[direction=top]:host(cds-multi-select) .cds--list-box__menu,.cds--list-box--up .cds--list-box--sm .cds--list-box__menu,.cds--list-box--up.cds--dropdown--sm .cds--list-box__menu,.cds--list-box--up.cds--list-box--sm .cds--list-box__menu,:host(cds-multi-select)[direction=top] .cds--list-box--sm .cds--list-box__menu{bottom:2rem}.cds--dropdown--lg[direction=top]:host(cds-multi-select) .cds--list-box__menu,.cds--list-box--lg[direction=top]:host(cds-multi-select) .cds--list-box__menu,.cds--list-box--up .cds--list-box--lg .cds--list-box__menu,.cds--list-box--up.cds--dropdown--lg .cds--list-box__menu,.cds--list-box--up.cds--list-box--lg .cds--list-box__menu,:host(cds-multi-select)[direction=top] .cds--list-box--lg .cds--list-box__menu{bottom:3rem}.cds--list-box input[role=combobox],.cds--list-box input[type=text]{min-width:0;background-color:inherit;text-overflow:ellipsis}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--list-box__field,.cds--list-box__menu,.cds--multi-select .cds--tag--filter{outline:1px solid transparent}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--list-box__field:focus,.cds--list-box__menu-item--highlighted .cds--list-box__menu-item__option,.cds--multi-select .cds--tag__close-icon:focus,:host(cds-multi-select-item[highlighted]) .cds--list-box__menu-item__option,:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option{color:Highlight;outline:1px solid Highlight}}@media screen and (-ms-high-contrast:active),(forced-colors:active){.cds--list-box__menu-icon>svg,.cds--list-box__selection--multi>svg,.cds--list-box__selection>svg{fill:ButtonText}}.cds--multi-select .cds--list-box__field--wrapper{display:inline-flex;width:100%;height:calc(100% + 1px);align-items:center}.cds--multi-select .cds--list-box__field:focus{outline:2px solid transparent;outline-offset:-2px}.cds--multi-select .cds--tag{min-width:auto;margin:0 .5rem 0 1rem}.cds--multi-select .cds--list-box__menu{min-width:auto}.cds--multi-select .cds--list-box__menu-item__option .cds--checkbox-wrapper{display:flex;width:100%;height:100%;align-items:center}.cds--multi-select .cds--list-box__menu-item__option .cds--checkbox-label{display:inline-block;overflow:hidden;width:100%;padding-left:1.75rem;text-overflow:ellipsis;white-space:nowrap}.cds--multi-select .cds--list-box__menu-item__option>.cds--form-item{flex-direction:row;margin:0}.cds--multi-select .cds--list-box__menu-item .cds--checkbox:checked~.cds--checkbox-label-text,.cds--multi-select :host(cds-multi-select-item) .cds--checkbox:checked~.cds--checkbox-label-text{color:var(--cds-text-primary,#161616)}.cds--multi-select--filterable{transition:outline-color 70ms cubic-bezier(.2,0,.38,.9)}.cds--multi-select--filterable.cds--combo-box .cds--text-input{border:.125rem solid transparent;background-clip:padding-box;outline:0}.cds--multi-select .cds--list-box__field--wrapper--input-focused,.cds--multi-select--filterable--input-focused,:host(cds-multi-select) .cds--list-box__field:focus{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}@media screen and (prefers-contrast){.cds--multi-select .cds--list-box__field--wrapper--input-focused,.cds--multi-select--filterable--input-focused,:host(cds-multi-select) .cds--list-box__field:focus{outline-style:dotted}}.cds--multi-select--filterable.cds--multi-select--selected .cds--text-input,.cds--multi-select.cds--multi-select--selected .cds--list-box__field{padding-left:0}.cds--multi-select--filterable.cds--list-box--disabled:hover:not(.cds--multi-select--filterable) .cds--text-input{background-color:var(--cds-field)}.cds--multi-select--filterable .cds--list-box__selection--multi{margin:0 0 0 1rem}.cds--multi-select--filterable.cds--multi-select--inline,.cds--multi-select--filterable.cds--multi-select--inline .cds--text-input{border-bottom:0;background-color:transparent}.cds--multi-select:not(.cds--list-box--expanded) .cds--list-box__menu{visibility:hidden}.cds--multi-select.cds--multi-select--readonly,.cds--multi-select.cds--multi-select--readonly:hover{border-bottom-color:var(--cds-border-subtle);background-color:transparent}.cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--multi-select.cds--multi-select--readonly .cds--tag--filter,.cds--multi-select.cds--multi-select--readonly .cds--tag__close-icon:hover{background-color:transparent;color:var(--cds-text-primary,#161616);cursor:default}.cds--multi-select.cds--multi-select--readonly .cds--tag--filter{box-shadow:0 0 0 1px var(--cds-background-inverse,#393939)}.cds--multi-select.cds--multi-select--readonly .cds--tag--filter svg{fill:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--multi-select.cds--multi-select--readonly .cds--list-box__field,.cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon{cursor:default}.cds--checkbox-group html{font-size:100%}.cds--checkbox-group 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--checkbox-group code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--checkbox-group strong{font-weight:600}.cds--form-item.cds--checkbox-wrapper{position:relative;margin-bottom:.25rem}.cds--form-item.cds--checkbox-wrapper:first-of-type{margin-top:.1875rem}.cds--label+.cds--form-item.cds--checkbox-wrapper{margin-top:-.125rem}.cds--form-item.cds--checkbox-wrapper:last-of-type{margin-bottom:.1875rem}.cds--checkbox{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;top:1.25rem;left:.7rem}.cds--checkbox-label{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);position:relative;display:flex;min-height:1.5rem;padding-top:.1875rem;padding-left:1.25rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.cds--checkbox-label html{font-size:100%}.cds--checkbox-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--checkbox-label code{font-family:'IBM Plex Mono',system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',monospace}.cds--checkbox-label strong{font-weight:600}.cds--checkbox-label-text{padding-left:.375rem}.cds--checkbox-label::after,.cds--checkbox-label::before{box-sizing:border-box}.cds--checkbox-label::before{position:absolute;top:.125rem;left:0;width:1rem;height:1rem;border:1px solid var(--cds-icon-primary,#161616);margin:.125rem .125rem .125rem .1875rem;background-color:transparent;border-radius:2px;content:\"\"}.cds--checkbox-label::after{position:absolute;top:.46875rem;left:.4375rem;width:.5625rem;height:.3125rem;border-bottom:1.5px solid var(--cds-icon-inverse,#fff);border-left:1.5px solid var(--cds-icon-inverse,#fff);margin-top:-.1875rem;background:0 0;content:\"\";transform:scale(0) rotate(-45deg);transform-origin:bottom right}.cds--checkbox-label[data-contained-checkbox-state=true]::before,.cds--checkbox:checked+.cds--checkbox-label::before,.cds--checkbox:indeterminate+.cds--checkbox-label::before{border:none;border-width:1px;background-color:var(--cds-icon-primary,#161616)}.cds--checkbox-label[data-contained-checkbox-state=true]::after,.cds--checkbox:checked+.cds--checkbox-label::after{transform:scale(1) rotate(-45deg)}.cds--checkbox:indeterminate+.cds--checkbox-label::after{top:.6875rem;width:.5rem;border-bottom:2px solid var(--cds-icon-inverse,#fff);border-left:0 solid var(--cds-icon-inverse,#fff);transform:scale(1) rotate(0)}.cds--checkbox-label[data-contained-checkbox-state=true].cds--checkbox-label__focus::before,.cds--checkbox-label__focus::before,.cds--checkbox:checked:focus+.cds--checkbox-label::before,.cds--checkbox:focus+.cds--checkbox-label::before,.cds--checkbox:indeterminate:focus+.cds--checkbox-label::before{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:1px}.cds--checkbox-label[data-contained-checkbox-disabled=true],.cds--checkbox:disabled+.cds--checkbox-label{color:var(--cds-text-disabled,rgba(22,22,22,.25));cursor:not-allowed}.cds--checkbox-label[data-contained-checkbox-disabled=true]::before,.cds--checkbox:disabled+.cds--checkbox-label::before{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--checkbox-label[data-contained-checkbox-state=true][data-contained-checkbox-disabled=true]::before,.cds--checkbox:checked:disabled+.cds--checkbox-label::before,.cds--checkbox:indeterminate:disabled+.cds--checkbox-label::before{background-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--checkbox-group[data-invalid] .cds--checkbox-label::before,.cds--checkbox-wrapper--invalid .cds--checkbox-label::before,.cds--checkbox-wrapper--invalid .cds--checkbox:checked+.cds--checkbox-label::before{border:1px solid var(--cds-support-error,#da1e28)}.cds--checkbox-group .cds--checkbox-wrapper--invalid>.cds--checkbox__validation-msg,.cds--checkbox-group .cds--checkbox-wrapper--warning>.cds--checkbox__validation-msg,.cds--checkbox-group .cds--checkbox-wrapper>.cds--form__helper-text{display:none}.cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox-label::before,.cds--checkbox-group:not(.cds--checkbox-group[data-invalid]) .cds--checkbox-wrapper--invalid .cds--checkbox:checked+.cds--checkbox-label::before{border:1px solid var(--cds-icon-primary,#161616)}.cds--checkbox-group__validation-msg,.cds--checkbox__validation-msg{display:none;align-items:flex-end;margin-top:.25rem}.cds--checkbox__invalid-icon{margin:0 .0625rem 0 .1875rem;fill:var(--cds-support-error,#da1e28)}.cds--checkbox__invalid-icon--warning{fill:var(--cds-support-warning,#f1c21b)}.cds--checkbox__invalid-icon--warning path:first-of-type{fill:#000}.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg,.cds--checkbox-group--warning .cds--checkbox-group__validation-msg,.cds--checkbox-wrapper--invalid>.cds--checkbox__validation-msg,.cds--checkbox-wrapper--warning>.cds--checkbox__validation-msg{display:flex}.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,.cds--checkbox-group--warning .cds--checkbox-group__validation-msg .cds--form-requirement,.cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement,.cds--checkbox-wrapper--warning .cds--checkbox__validation-msg .cds--form-requirement{display:block;overflow:visible;max-height:100%;margin-top:0;margin-left:.5rem}.cds--checkbox-group--invalid .cds--checkbox-group__validation-msg .cds--form-requirement,.cds--checkbox-wrapper--invalid .cds--checkbox__validation-msg .cds--form-requirement{color:var(--cds-text-error,#da1e28)}.cds--checkbox-group--readonly .cds--checkbox-label,.cds--checkbox-wrapper--readonly .cds--checkbox-label{cursor:default}.cds--checkbox-group--readonly .cds--checkbox-label-text,.cds--checkbox-wrapper--readonly .cds--checkbox-label-text{cursor:text;-webkit-user-select:text;-moz-user-select:text;user-select:text}.cds--checkbox-group--readonly .cds--checkbox+.cds--checkbox-label::before,.cds--checkbox-wrapper--readonly .cds--checkbox+.cds--checkbox-label::before{border-color:var(--cds-icon-disabled,rgba(22,22,22,.25))}.cds--checkbox-group--readonly .cds--checkbox:checked+.cds--checkbox-label::before,.cds--checkbox-wrapper--readonly .cds--checkbox:checked+.cds--checkbox-label::before{border:1px solid var(--cds-icon-disabled,rgba(22,22,22,.25));background:0 0}.cds--checkbox-group--readonly .cds--checkbox:checked+.cds--checkbox-label::after,.cds--checkbox-wrapper--readonly .cds--checkbox:checked+.cds--checkbox-label::after{border-color:var(--cds-text-primary,#161616)}.cds--checkbox-skeleton .cds--checkbox-label{cursor:default}.cds--checkbox-label-text.cds--skeleton{position:relative;padding:0;border:none;background:var(--cds-skeleton-background,#e8e8e8);box-shadow:none;pointer-events:none;width:6.25rem;height:1rem;margin:.0625rem 0 0 .375rem}.cds--checkbox-label-text.cds--skeleton:active,.cds--checkbox-label-text.cds--skeleton:focus,.cds--checkbox-label-text.cds--skeleton:hover{border:none;cursor:default;outline:0}.cds--checkbox-label-text.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--checkbox-label-text.cds--skeleton::before{animation:none}}.cds--checkbox--inline{position:relative}:host(cds-multi-select){outline:0}:host(cds-multi-select) .cds--assistive-text{left:-100%;top:-100%}:host(cds-multi-select) .cds--label[hidden]{display:none}:host(cds-multi-select) .cds--list-box__menu{top:100%;margin-top:1px}:host(cds-multi-select) .cds--text-input{border:none;padding-left:0}:host(cds-multi-select) .cds--text-input:focus{outline:0}:host(cds-multi-select)[filterable] .cds--list-box__field:focus-within{outline:2px solid var(--cds-focus,#0f62fe);outline-offset:-2px}:host(cds-multi-select)[direction=top] .cds--list-box__menu{top:auto}:host(cds-multi-select)[invalid] .cds--list-box__field{outline:0}:host(cds-multi-select)[invalid] .cds--form__helper-text{color:var(--cds-text-error,#da1e28)}:host(cds-multi-select)[type=inline] .cds--form__helper-text{grid-column:2}:host(cds-multi-select)[type=inline][warn] .cds--list-box__field{padding-right:3.5rem}:host(cds-multi-select-item){display:block}:host(cds-multi-select-item) .cds--checkbox-label{display:inline-block;overflow:hidden;width:100%;padding-left:1.75rem;text-overflow:ellipsis;white-space:nowrap}:host(cds-multi-select-item) .cds--list-box__menu-item__option{box-sizing:border-box}:host(cds-multi-select-item) .cds--list-box__menu-item__option .cds--checkbox-wrapper{width:100%;height:100%;display:flex;align-items:center}:host(cds-multi-select-item) .cds--list-box__menu-item__option>.cds--form-item{flex-direction:row}:host(cds-multi-select-item)[filtered]{display:none}:host(cds-multi-select-item[size=sm]){height:-moz-fit-content;height:fit-content}:host(cds-multi-select-item[size=sm]) .cds--list-box__menu-item__option{height:2rem;padding-top:.4375rem;padding-bottom:.4375rem}:host(cds-multi-select-item[size=lg]){height:-moz-fit-content;height:fit-content}:host(cds-multi-select-item[size=lg]) .cds--list-box__menu-item__option{height:3rem;padding-top:.9375rem;padding-bottom:.9375rem}:host(cds-multi-select-item[disabled]){color:var(--cds-text-disabled,rgba(22,22,22,.25));text-decoration:none}:host(cds-multi-select-item[selected]) .cds--list-box__menu-item__option{color:var(--cds-text-primary,#161616)}",
|
|
12
12
|
]);
|
|
@@ -8,8 +8,10 @@
|
|
|
8
8
|
*/
|
|
9
9
|
import { TemplateResult } from 'lit';
|
|
10
10
|
import CDSDropdown from '../dropdown/dropdown';
|
|
11
|
+
import { SELECTION_FEEDBACK_OPTION } from './defs';
|
|
11
12
|
import CDSMultiSelectItem from './multi-select-item';
|
|
12
|
-
export { DROPDOWN_SIZE, DROPDOWN_TYPE } from '../dropdown/dropdown';
|
|
13
|
+
export { DROPDOWN_SIZE, DROPDOWN_TYPE, DROPDOWN_DIRECTION, } from '../dropdown/dropdown';
|
|
14
|
+
export { SELECTION_FEEDBACK_OPTION };
|
|
13
15
|
/**
|
|
14
16
|
* Multi select.
|
|
15
17
|
*
|
|
@@ -38,6 +40,10 @@ declare class CDSMultiSelect extends CDSDropdown {
|
|
|
38
40
|
* The selection button.
|
|
39
41
|
*/
|
|
40
42
|
private _selectionButtonNode;
|
|
43
|
+
/**
|
|
44
|
+
* The menu body.
|
|
45
|
+
*/
|
|
46
|
+
private _menuBodyNode;
|
|
41
47
|
/**
|
|
42
48
|
* The `<input>` for filtering.
|
|
43
49
|
*/
|
|
@@ -58,7 +64,8 @@ declare class CDSMultiSelect extends CDSDropdown {
|
|
|
58
64
|
* variation is disabled
|
|
59
65
|
*/
|
|
60
66
|
protected _handleKeypressInnerFlterable(event: KeyboardEvent): void;
|
|
61
|
-
protected
|
|
67
|
+
protected _renderTitleLabel(): TemplateResult<1>;
|
|
68
|
+
protected _renderPrecedingLabel(): TemplateResult<1> | undefined;
|
|
62
69
|
/**
|
|
63
70
|
@returns The main content of the trigger button.
|
|
64
71
|
*/
|
|
@@ -82,6 +89,18 @@ declare class CDSMultiSelect extends CDSDropdown {
|
|
|
82
89
|
* The `aria-label` attribute for the icon to clear selection.
|
|
83
90
|
*/
|
|
84
91
|
clearSelectionLabel: string;
|
|
92
|
+
/**
|
|
93
|
+
* Specify the text that should be read for screen readers that describes total items selected
|
|
94
|
+
*/
|
|
95
|
+
clearSelectionDescription: string;
|
|
96
|
+
/**
|
|
97
|
+
* Specify the text that should be read for screen readers to clear selection.
|
|
98
|
+
*/
|
|
99
|
+
clearSelectionText: string;
|
|
100
|
+
/**
|
|
101
|
+
* Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control.
|
|
102
|
+
*/
|
|
103
|
+
locale: string;
|
|
85
104
|
/**
|
|
86
105
|
* An assistive text for screen reader to announce, telling that an item is unselected.
|
|
87
106
|
*/
|
|
@@ -90,12 +109,32 @@ declare class CDSMultiSelect extends CDSDropdown {
|
|
|
90
109
|
* An assistive text for screen reader to announce, telling that all items are unselected.
|
|
91
110
|
*/
|
|
92
111
|
unselectedAllAssistiveText: string;
|
|
112
|
+
/**
|
|
113
|
+
* Specify feedback (mode) of the selection.
|
|
114
|
+
* `top`: selected item jumps to top
|
|
115
|
+
* `fixed`: selected item stays at it's position
|
|
116
|
+
* `top-after-reopen`: selected item jump to top after reopen dropdown
|
|
117
|
+
*/
|
|
118
|
+
selectionFeedback: SELECTION_FEEDBACK_OPTION;
|
|
119
|
+
/**
|
|
120
|
+
* The CSS class list for multi-select listbox
|
|
121
|
+
*/
|
|
122
|
+
protected get _classes(): import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/class-map").ClassMapDirective>;
|
|
123
|
+
protected compareItems: (itemA: any, itemB: any, { locale }: {
|
|
124
|
+
locale: any;
|
|
125
|
+
}) => void;
|
|
126
|
+
protected sortItems: (menuItems: NodeList, { values, compareItems, locale }: {
|
|
127
|
+
values: any;
|
|
128
|
+
compareItems: any;
|
|
129
|
+
locale?: string | undefined;
|
|
130
|
+
}) => Node[];
|
|
93
131
|
shouldUpdate(changedProperties: any): boolean;
|
|
132
|
+
updated(changedProperties: any): void;
|
|
133
|
+
connectedCallback(): void;
|
|
94
134
|
/**
|
|
95
|
-
* A selector
|
|
96
|
-
* Primary for the checkbox label where the `click` event will happen from the associated check box.
|
|
135
|
+
* A selector that will return menu body.
|
|
97
136
|
*/
|
|
98
|
-
|
|
137
|
+
static get selectorMenuBody(): string;
|
|
99
138
|
/**
|
|
100
139
|
* A selector that will return highlighted items.
|
|
101
140
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/multi-select/multi-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAS3C,OAAO,WAAyC,MAAM,sBAAsB,CAAC;AAC7E,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AAGrD,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEpE;;;;;;;;;;;;;GAaG;AACH,cACM,cAAe,SAAQ,WAAW;IAEtC,UAAU,MAAC;IAEX;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAK;IAEhC;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAe;IAEvC;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAe;IAE3C;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAoB;IAE5C;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAe;IAEnC,SAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,kBAAkB;IAKlE,SAAS,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,kBAAkB;IA6B/D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAuB7C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,aAAa;IA0BnD;;;OAGG;IAEH,SAAS,CAAC,6BAA6B,CAAC,KAAK,EAAE,aAAa;IAgC5D,SAAS,CAAC,8BAA8B;IAkBxC;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,cAAc;IAoBxC,SAAS,CAAC,qBAAqB,IAAI,cAAc,GAAG,IAAI;IAkBxD;;OAEG;IACH,SAAS,CAAC,YAAY;IAsBtB;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM;IA0BrC;;OAEG;IACH,SAAS,CAAC,8BAA8B;IAWxC;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,2BAA2B,SAAyB;IAEpD;;OAEG;IAEH,0BAA0B,SAA2B;IAErD,YAAY,CAAC,iBAAiB,KAAA;IAwB9B;;;OAGG;IACH,OAAO,CAAC,MAAM,KAAK,wBAAwB,GAE1C;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;;OAGG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"multi-select.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 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 { html, TemplateResult } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport { prefix } from '../../globals/settings';\nimport {\n filter,\n forEach,\n indexOf,\n} from '../../globals/internal/collection-helpers';\nimport CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';\nimport CDSMultiSelectItem from './multi-select-item';\nimport styles from './multi-select.scss';\n\nexport { DROPDOWN_SIZE, DROPDOWN_TYPE } from '../dropdown/dropdown';\n\n/**\n * Multi select.\n *\n * @element cds-multi-select\n * @fires cds-multi-select-beingselected\n * The custom event fired before a multi select item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.\n * @fires cds-multi-select-beingtoggled\n * The custom event fired before the open state of this multi select is toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated toggling.\n * @fires cds-multi-select-toggled\n * The custom event fired after the open state of this multi select is toggled upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass CDSMultiSelect extends CDSDropdown {\n @property({ type: Boolean })\n filterable;\n\n /**\n * The count of selected items.\n */\n private _selectedItemsCount = 0;\n\n /**\n * The clear button.\n */\n @query('#clear-button')\n private _clearButtonNode!: HTMLElement;\n\n /**\n * The selection button.\n */\n @query('#selection-button')\n private _selectionButtonNode!: HTMLElement;\n\n /**\n * The `<input>` for filtering.\n */\n @query('input')\n private _filterInputNode!: HTMLInputElement;\n\n /**\n * The trigger button.\n */\n @query(`.${prefix}--list-box__field`)\n private _triggerNode!: HTMLElement;\n\n protected _selectionShouldChange(itemToSelect?: CDSMultiSelectItem) {\n // If we are selecting an item, assumes we always toggle\n return Boolean(this.value || itemToSelect);\n }\n\n protected _selectionDidChange(itemToSelect?: CDSMultiSelectItem) {\n if (itemToSelect) {\n itemToSelect.selected = !itemToSelect.selected;\n this._assistiveStatusText = itemToSelect.selected\n ? this.selectedItemAssistiveText\n : this.unselectedItemAssistiveText;\n } else {\n forEach(\n this.querySelectorAll(\n (this.constructor as typeof CDSMultiSelect).selectorItemSelected\n ),\n (item) => {\n (item as CDSMultiSelectItem).selected = false;\n }\n );\n this._handleUserInitiatedToggle(false);\n this._assistiveStatusText = this.unselectedAllAssistiveText;\n }\n // Change in `.selected` hasn't been reflected to the corresponding attribute yet\n this.value = filter(\n this.querySelectorAll(\n (this.constructor as typeof CDSMultiSelect).selectorItem\n ),\n (item) => (item as CDSMultiSelectItem).selected\n )\n .map((item) => (item as CDSMultiSelectItem).value)\n .join(',');\n }\n\n protected _handleClickInner(event: MouseEvent) {\n if (this._selectionButtonNode?.contains(event.target as Node)) {\n this._handleUserInitiatedSelectItem();\n if (this.filterable) {\n this._filterInputNode.focus();\n } else {\n this._triggerNode.focus();\n }\n } else if (this._clearButtonNode?.contains(event.target as Node)) {\n this._handleUserInitiatedClearInput();\n } else {\n const shouldIgnoreClickInner = (elem) =>\n elem.closest &&\n elem.closest(\n (this.constructor as typeof CDSMultiSelect).selectorIgnoreClickInner\n );\n if (!event.composedPath().some(shouldIgnoreClickInner)) {\n super._handleClickInner(event);\n }\n if (this.filterable) this._filterInputNode.focus();\n }\n }\n\n /**\n * Handler for the `keypress` event, ensures filter still works upon entering space\n */\n protected _handleKeypressInner(event: KeyboardEvent) {\n const { key } = event;\n const action = (this.constructor as typeof CDSDropdown).getAction(key);\n const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n\n if (\n this._clearButtonNode?.contains(event.target as Node) &&\n // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n (action === TRIGGERING || key === ' ')\n ) {\n this._handleUserInitiatedClearInput();\n } else if (this._selectionButtonNode?.contains(event.target as Node)) {\n this._handleUserInitiatedSelectItem();\n this.open = true;\n if (this.filterable) {\n this._filterInputNode.focus();\n } else {\n this._triggerNode.focus();\n }\n } else if (this.filterable) {\n this._handleKeypressInnerFlterable(event);\n } else {\n super._handleKeypressInner(event);\n }\n }\n\n /**\n * Special andler for the `keypress` event, ensures space selection for filterable\n * variation is disabled\n */\n\n protected _handleKeypressInnerFlterable(event: KeyboardEvent) {\n const { key } = event;\n const action = (this.constructor as typeof CDSDropdown).getAction(key);\n if (!this.open) {\n switch (action) {\n case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n this._handleUserInitiatedToggle(true);\n break;\n default:\n break;\n }\n } else {\n switch (key) {\n case 'Enter':\n {\n const constructor = this.constructor as typeof CDSDropdown;\n const highlightedItem = this.querySelector(\n constructor.selectorItemHighlighted\n ) as CDSMultiSelectItem;\n if (highlightedItem) {\n this._handleUserInitiatedSelectItem(highlightedItem);\n } else {\n this._handleUserInitiatedToggle(false);\n }\n }\n break;\n default:\n break;\n }\n }\n }\n\n protected _renderPrecedingTriggerContent() {\n const { clearSelectionLabel, _selectedItemsCount: selectedItemsCount } =\n this;\n return selectedItemsCount === 0\n ? undefined\n : html`\n <div\n id=\"selection-button\"\n role=\"button\"\n class=\"${prefix}--list-box__selection ${prefix}--list-box__selection--multi ${prefix}--tag--filter\"\n tabindex=\"0\"\n title=\"${clearSelectionLabel}\">\n ${selectedItemsCount}\n ${Close16({ 'aria-label': clearSelectionLabel })}\n </div>\n `;\n }\n\n /**\n @returns The main content of the trigger button.\n */\n protected _renderLabel(): TemplateResult {\n const { label, _selectedItemContent: selectedItemContent } = this;\n return !this.filterable\n ? html`\n <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n >${selectedItemContent || label}</span\n >\n `\n : html`\n <input\n id=\"trigger-label\"\n class=\"${prefix}--text-input\"\n placeholder=\"${label}\"\n role=\"combobox\"\n aria-controls=\"menu-body\"\n aria-autocomplete=\"list\"\n @input=\"${this._handleInput}\" />\n `;\n }\n\n protected _renderFollowingLabel(): TemplateResult | void {\n const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;\n return filterInputNode &&\n filterInputNode.value.length > 0 &&\n this.filterable\n ? html`\n <div\n id=\"clear-button\"\n role=\"button\"\n class=\"${prefix}--list-box__selection\"\n tabindex=\"0\"\n title=\"${clearSelectionLabel}\">\n ${Close16({ 'aria-label': clearSelectionLabel })}\n </div>\n `\n : undefined;\n }\n\n /**\n * Handles `input` event on the `<input>` for filtering.\n */\n protected _handleInput() {\n const items = this.querySelectorAll(\n (this.constructor as typeof CDSMultiSelect).selectorItem\n );\n const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n\n if (!this.open) this.open = true;\n\n forEach(items, (item) => {\n const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n if (!itemValue.includes(inputValue)) {\n (item as CDSMultiSelectItem).setAttribute('filtered', '');\n (item as CDSMultiSelectItem).removeAttribute('highlighted');\n } else {\n (item as CDSMultiSelectItem).removeAttribute('filtered');\n }\n });\n\n this.requestUpdate();\n }\n\n /**\n * Navigate through dropdown items.\n *\n * @param direction `-1` to navigate backward, `1` to navigate forward.\n */\n protected _navigate(direction: number) {\n if (!this.filterable) {\n this._triggerNode.focus();\n super._navigate(direction);\n } else {\n // only navigate through remaining item\n const constructor = this.constructor as typeof CDSMultiSelect;\n const items = this.querySelectorAll(constructor.selectorItemResults);\n const highlightedItem = this.querySelector(\n constructor.selectorItemHighlighted\n );\n const highlightedIndex = indexOf(items, highlightedItem!);\n\n let nextIndex = highlightedIndex + direction;\n if (nextIndex < 0) {\n nextIndex = items.length - 1;\n }\n if (nextIndex >= items.length) {\n nextIndex = 0;\n }\n forEach(items, (item, i) => {\n (item as CDSMultiSelectItem).highlighted = i === nextIndex;\n });\n }\n }\n\n /**\n * Handles user-initiated clearing the `<input>` for filtering.\n */\n protected _handleUserInitiatedClearInput() {\n const constructor = this.constructor as typeof CDSMultiSelect;\n const items = this.querySelectorAll(constructor.selectorItemFiltered);\n this._filterInputNode.value = '';\n this.open = true;\n this._filterInputNode.focus();\n forEach(items, (item) => {\n (item as CDSMultiSelectItem).removeAttribute('filtered');\n });\n }\n\n /**\n * The `aria-label` attribute for the icon to clear selection.\n */\n @property({ attribute: 'clear-selection-label' })\n clearSelectionLabel = '';\n\n /**\n * An assistive text for screen reader to announce, telling that an item is unselected.\n */\n @property({ attribute: 'unselected-item-assistive-text' })\n unselectedItemAssistiveText = 'Unselected an item.';\n\n /**\n * An assistive text for screen reader to announce, telling that all items are unselected.\n */\n @property({ attribute: 'unselected-all-assistive-text' })\n unselectedAllAssistiveText = 'Unselected all items.';\n\n shouldUpdate(changedProperties) {\n const { selectorItem } = this.constructor as typeof CDSMultiSelect;\n if (changedProperties.has('size')) {\n forEach(this.querySelectorAll(selectorItem), (elem) => {\n (elem as CDSMultiSelectItem).size = this.size;\n });\n }\n if (changedProperties.has('value')) {\n const { value } = this;\n const values = !value ? [] : value.split(',');\n // Updates selection beforehand because our rendering logic for `<cds-multi-select>` looks for selected items via `qSA()`\n const items = this.querySelectorAll(selectorItem);\n forEach(items, (elem) => {\n (elem as CDSMultiSelectItem).selected =\n values.indexOf((elem as CDSMultiSelectItem).value) >= 0;\n });\n this._selectedItemsCount = filter(\n items,\n (elem) => values.indexOf((elem as CDSMultiSelectItem).value) >= 0\n ).length;\n }\n return true;\n }\n\n /**\n * A selector to ignore the `click` events from.\n * Primary for the checkbox label where the `click` event will happen from the associated check box.\n */\n private static get selectorIgnoreClickInner() {\n return `.${prefix}--checkbox-label`;\n }\n\n /**\n * A selector that will return highlighted items.\n */\n static get selectorItemHighlighted() {\n return `${prefix}-multi-select-item[highlighted]`;\n }\n\n /**\n * A selector that will return multi select items.\n * We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.\n */\n static get selectorItem() {\n return `${prefix}-multi-select-item`;\n }\n\n /**\n * A selector that will return remaining items after a filter.\n */\n static get selectorItemFiltered() {\n return `${prefix}-multi-select-item[filtered]`;\n }\n\n /**\n * A selector that will return remaining items after a filter.\n */\n static get selectorItemResults() {\n return `${prefix}-multi-select-item:not([filtered])`;\n }\n\n /**\n * A selector that will return selected items.\n */\n static get selectorItemSelected() {\n return `${prefix}-multi-select-item[selected]`;\n }\n\n /**\n * The name of the custom event fired before this multi select item is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n */\n static get eventBeforeToggle() {\n return `${prefix}-multi-select-beingtoggled`;\n }\n\n /**\n * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-multi-select-toggled`;\n }\n\n /**\n * The name of the custom event fired before a multi select item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n */\n static get eventBeforeSelect() {\n return `${prefix}-multi-select-beingselected`;\n }\n\n /**\n * The name of the custom event fired after a a multi select item is selected upon a user gesture.\n */\n static get eventSelect() {\n return `${prefix}-multi-select-selected`;\n }\n\n static styles = styles;\n}\n\nexport default CDSMultiSelect;\n"]}
|
|
1
|
+
{"version":3,"sources":["components/multi-select/multi-select.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAU3C,OAAO,WAGN,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,yBAAyB,EAAE,MAAM,QAAQ,CAAC;AACnD,OAAO,kBAAkB,MAAM,qBAAqB,CAAC;AAGrD,OAAO,EACL,aAAa,EACb,aAAa,EACb,kBAAkB,GACnB,MAAM,sBAAsB,CAAC;AAE9B,OAAO,EAAE,yBAAyB,EAAE,CAAC;AAErC;;;;;;;;;;;;;GAaG;AACH,cACM,cAAe,SAAQ,WAAW;IAEtC,UAAU,MAAC;IAEX;;OAEG;IACH,OAAO,CAAC,mBAAmB,CAAK;IAEhC;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAe;IAEvC;;OAEG;IAEH,OAAO,CAAC,oBAAoB,CAAe;IAE3C;;OAEG;IAEH,OAAO,CAAC,aAAa,CAAe;IAEpC;;OAEG;IAEH,OAAO,CAAC,gBAAgB,CAAoB;IAE5C;;OAEG;IAEH,OAAO,CAAC,YAAY,CAAe;IAEnC,SAAS,CAAC,sBAAsB,CAAC,YAAY,CAAC,EAAE,kBAAkB;IAKlE,SAAS,CAAC,mBAAmB,CAAC,YAAY,CAAC,EAAE,kBAAkB;IA6B/D,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;IAmB7C;;OAEG;IACH,SAAS,CAAC,oBAAoB,CAAC,KAAK,EAAE,aAAa;IA0BnD;;;OAGG;IAEH,SAAS,CAAC,6BAA6B,CAAC,KAAK,EAAE,aAAa;IAgC5D,SAAS,CAAC,iBAAiB;IA0C3B,SAAS,CAAC,qBAAqB;IAmC/B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,cAAc;IAoBxC,SAAS,CAAC,qBAAqB,IAAI,cAAc,GAAG,IAAI;IAkBxD;;OAEG;IACH,SAAS,CAAC,YAAY;IAsBtB;;;;OAIG;IACH,SAAS,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM;IAyBrC;;OAEG;IACH,SAAS,CAAC,8BAA8B;IAWxC;;OAEG;IAEH,mBAAmB,SAAM;IAEzB;;OAEG;IAEH,yBAAyB,SAA4B;IAErD;;OAEG;IAEH,kBAAkB,SAAoD;IAEtE;;OAEG;IAEH,MAAM,SAAQ;IAEd;;OAEG;IAEH,2BAA2B,SAAyB;IAEpD;;OAEG;IAEH,0BAA0B,SAA2B;IAErD;;;;;OAKG;IAEH,iBAAiB,4BAA8C;IAE/D;;OAEG;IACH,SAAS,KAAK,QAAQ,mHA2BrB;IAED,SAAS,CAAC,YAAY;;eAEpB;IAEF,SAAS,CAAC,SAAS,cACN,QAAQ;;;;iBA4BnB;IAEF,YAAY,CAAC,iBAAiB,KAAA;IAiD9B,OAAO,CAAC,iBAAiB,KAAA;IAOzB,iBAAiB;IAejB;;OAEG;IACH,MAAM,KAAK,gBAAgB,WAE1B;IAED;;OAEG;IACH,MAAM,KAAK,uBAAuB,WAEjC;IAED;;;OAGG;IACH,MAAM,KAAK,YAAY,WAEtB;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;OAEG;IACH,MAAM,KAAK,mBAAmB,WAE7B;IAED;;OAEG;IACH,MAAM,KAAK,oBAAoB,WAE9B;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED;;;OAGG;IACH,MAAM,KAAK,iBAAiB,WAE3B;IAED;;OAEG;IACH,MAAM,KAAK,WAAW,WAErB;IAED,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"multi-select.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2020, 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 { html, TemplateResult } from 'lit';\nimport { property, customElement, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport Close16 from '@carbon/icons/lib/close/16';\nimport { prefix } from '../../globals/settings';\nimport {\n filter,\n forEach,\n indexOf,\n} from '../../globals/internal/collection-helpers';\nimport CDSDropdown, {\n DROPDOWN_KEYBOARD_ACTION,\n DROPDOWN_TYPE,\n} from '../dropdown/dropdown';\nimport { SELECTION_FEEDBACK_OPTION } from './defs';\nimport CDSMultiSelectItem from './multi-select-item';\nimport styles from './multi-select.scss';\n\nexport {\n DROPDOWN_SIZE,\n DROPDOWN_TYPE,\n DROPDOWN_DIRECTION,\n} from '../dropdown/dropdown';\n\nexport { SELECTION_FEEDBACK_OPTION };\n\n/**\n * Multi select.\n *\n * @element cds-multi-select\n * @fires cds-multi-select-beingselected\n * The custom event fired before a multi select item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n * @fires cds-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.\n * @fires cds-multi-select-beingtoggled\n * The custom event fired before the open state of this multi select is toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated toggling.\n * @fires cds-multi-select-toggled\n * The custom event fired after the open state of this multi select is toggled upon a user gesture.\n */\n@customElement(`${prefix}-multi-select`)\nclass CDSMultiSelect extends CDSDropdown {\n @property({ type: Boolean })\n filterable;\n\n /**\n * The count of selected items.\n */\n private _selectedItemsCount = 0;\n\n /**\n * The clear button.\n */\n @query('#clear-button')\n private _clearButtonNode!: HTMLElement;\n\n /**\n * The selection button.\n */\n @query('#selection-button')\n private _selectionButtonNode!: HTMLElement;\n\n /**\n * The menu body.\n */\n @query('#menu-body')\n private _menuBodyNode!: HTMLElement;\n\n /**\n * The `<input>` for filtering.\n */\n @query('input')\n private _filterInputNode!: HTMLInputElement;\n\n /**\n * The trigger button.\n */\n @query(`.${prefix}--list-box__field`)\n private _triggerNode!: HTMLElement;\n\n protected _selectionShouldChange(itemToSelect?: CDSMultiSelectItem) {\n // If we are selecting an item, assumes we always toggle\n return Boolean(this.value || itemToSelect);\n }\n\n protected _selectionDidChange(itemToSelect?: CDSMultiSelectItem) {\n if (itemToSelect) {\n itemToSelect.selected = !itemToSelect.selected;\n this._assistiveStatusText = itemToSelect.selected\n ? this.selectedItemAssistiveText\n : this.unselectedItemAssistiveText;\n } else {\n forEach(\n this.querySelectorAll(\n (this.constructor as typeof CDSMultiSelect).selectorItemSelected\n ),\n (item) => {\n (item as CDSMultiSelectItem).selected = false;\n }\n );\n this._handleUserInitiatedToggle(false);\n this._assistiveStatusText = this.unselectedAllAssistiveText;\n }\n // Change in `.selected` hasn't been reflected to the corresponding attribute yet\n this.value = filter(\n this.querySelectorAll(\n (this.constructor as typeof CDSMultiSelect).selectorItem\n ),\n (item) => (item as CDSMultiSelectItem).selected\n )\n .map((item) => (item as CDSMultiSelectItem).value)\n .join(',');\n }\n\n protected _handleClickInner(event: MouseEvent) {\n if (\n this._selectionButtonNode?.contains(event.target as Node) &&\n !this.readOnly\n ) {\n this._handleUserInitiatedSelectItem();\n if (this.filterable) {\n this._filterInputNode.focus();\n } else {\n this._triggerNode.focus();\n }\n } else if (this._clearButtonNode?.contains(event.target as Node)) {\n this._handleUserInitiatedClearInput();\n } else {\n super._handleClickInner(event);\n if (this.filterable) this._filterInputNode.focus();\n }\n }\n\n /**\n * Handler for the `keypress` event, ensures filter still works upon entering space\n */\n protected _handleKeypressInner(event: KeyboardEvent) {\n const { key } = event;\n const action = (this.constructor as typeof CDSDropdown).getAction(key);\n const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;\n\n if (\n this._clearButtonNode?.contains(event.target as Node) &&\n // Space key should be handled by `<input>` unless \"clear selection\" button has focus\n (action === TRIGGERING || key === ' ')\n ) {\n this._handleUserInitiatedClearInput();\n } else if (this._selectionButtonNode?.contains(event.target as Node)) {\n this._handleUserInitiatedSelectItem();\n this.open = true;\n if (this.filterable) {\n this._filterInputNode.focus();\n } else {\n this._triggerNode.focus();\n }\n } else if (this.filterable) {\n this._handleKeypressInnerFlterable(event);\n } else {\n super._handleKeypressInner(event);\n }\n }\n\n /**\n * Special andler for the `keypress` event, ensures space selection for filterable\n * variation is disabled\n */\n\n protected _handleKeypressInnerFlterable(event: KeyboardEvent) {\n const { key } = event;\n const action = (this.constructor as typeof CDSDropdown).getAction(key);\n if (!this.open) {\n switch (action) {\n case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:\n this._handleUserInitiatedToggle(true);\n break;\n default:\n break;\n }\n } else {\n switch (key) {\n case 'Enter':\n {\n const constructor = this.constructor as typeof CDSDropdown;\n const highlightedItem = this.querySelector(\n constructor.selectorItemHighlighted\n ) as CDSMultiSelectItem;\n if (highlightedItem) {\n this._handleUserInitiatedSelectItem(highlightedItem);\n } else {\n this._handleUserInitiatedToggle(false);\n }\n }\n break;\n default:\n break;\n }\n }\n }\n\n protected _renderTitleLabel() {\n const {\n clearSelectionDescription,\n clearSelectionText,\n disabled,\n hideLabel,\n titleText,\n _selectedItemsCount: selectedItemsCount,\n _slotTitleTextNode: slotTitleTextNode,\n _handleSlotchangeLabelText: handleSlotchangeLabelText,\n } = this;\n\n const labelClasses = classMap({\n [`${prefix}--label`]: true,\n [`${prefix}--label--disabled`]: disabled,\n [`${prefix}--visually-hidden`]: hideLabel,\n });\n\n const hasTitleText =\n titleText ||\n (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);\n\n return html`\n <label\n part=\"title-text\"\n class=\"${labelClasses}\"\n ?hidden=\"${!hasTitleText}\">\n <slot name=\"title-text\" @slotchange=\"${handleSlotchangeLabelText}\"\n >${titleText}</slot\n >\n ${selectedItemsCount > 0\n ? html`\n <span class=\"${prefix}--visually-hidden\">\n ${clearSelectionDescription} ${selectedItemsCount},\n ${clearSelectionText}\n </span>\n `\n : null}\n </label>\n `;\n }\n\n protected _renderPrecedingLabel() {\n const {\n disabled,\n readOnly,\n clearSelectionLabel,\n _selectedItemsCount: selectedItemsCount,\n } = this;\n\n const selectionButtonClasses = classMap({\n [`${prefix}--list-box__selection`]: true,\n [`${prefix}--list-box__selection--multi`]: true,\n [`${prefix}--tag`]: true,\n [`${prefix}--tag--filter`]: true,\n [`${prefix}--tag--high-contrast`]: true,\n [`${prefix}--tag--disabled`]: disabled,\n });\n return selectedItemsCount === 0\n ? undefined\n : html`\n <div\n id=\"selection-button\"\n role=\"button\"\n class=\"${selectionButtonClasses}\"\n tabindex=\"-1\"\n aria-disabled=${readOnly}\n title=\"${clearSelectionLabel}\">\n ${selectedItemsCount}\n ${Close16({\n 'aria-label': clearSelectionLabel,\n class: `${prefix}--tag__close-icon`,\n })}\n </div>\n `;\n }\n\n /**\n @returns The main content of the trigger button.\n */\n protected _renderLabel(): TemplateResult {\n const { label, _selectedItemContent: selectedItemContent } = this;\n return !this.filterable\n ? html`\n <span id=\"trigger-label\" class=\"${prefix}--list-box__label\"\n >${selectedItemContent || label}</span\n >\n `\n : html`\n <input\n id=\"trigger-label\"\n class=\"${prefix}--text-input\"\n placeholder=\"${label}\"\n role=\"combobox\"\n aria-controls=\"menu-body\"\n aria-autocomplete=\"list\"\n @input=\"${this._handleInput}\" />\n `;\n }\n\n protected _renderFollowingLabel(): TemplateResult | void {\n const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;\n return filterInputNode &&\n filterInputNode.value.length > 0 &&\n this.filterable\n ? html`\n <div\n id=\"clear-button\"\n role=\"button\"\n class=\"${prefix}--list-box__selection\"\n tabindex=\"0\"\n title=\"${clearSelectionLabel}\">\n ${Close16({ 'aria-label': clearSelectionLabel })}\n </div>\n `\n : undefined;\n }\n\n /**\n * Handles `input` event on the `<input>` for filtering.\n */\n protected _handleInput() {\n const items = this.querySelectorAll(\n (this.constructor as typeof CDSMultiSelect).selectorItem\n );\n const inputValue = this._filterInputNode.value.toLocaleLowerCase();\n\n if (!this.open) this.open = true;\n\n forEach(items, (item) => {\n const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();\n\n if (!itemValue.includes(inputValue)) {\n (item as CDSMultiSelectItem).setAttribute('filtered', '');\n (item as CDSMultiSelectItem).removeAttribute('highlighted');\n } else {\n (item as CDSMultiSelectItem).removeAttribute('filtered');\n }\n });\n\n this.requestUpdate();\n }\n\n /**\n * Navigate through dropdown items.\n *\n * @param direction `-1` to navigate backward, `1` to navigate forward.\n */\n protected _navigate(direction: number) {\n if (!this.filterable) {\n super._navigate(direction);\n } else {\n // only navigate through remaining item\n const constructor = this.constructor as typeof CDSMultiSelect;\n const items = this.querySelectorAll(constructor.selectorItemResults);\n const highlightedItem = this.querySelector(\n constructor.selectorItemHighlighted\n );\n const highlightedIndex = indexOf(items, highlightedItem!);\n\n let nextIndex = highlightedIndex + direction;\n if (nextIndex < 0) {\n nextIndex = items.length - 1;\n }\n if (nextIndex >= items.length) {\n nextIndex = 0;\n }\n forEach(items, (item, i) => {\n (item as CDSMultiSelectItem).highlighted = i === nextIndex;\n });\n }\n }\n\n /**\n * Handles user-initiated clearing the `<input>` for filtering.\n */\n protected _handleUserInitiatedClearInput() {\n const constructor = this.constructor as typeof CDSMultiSelect;\n const items = this.querySelectorAll(constructor.selectorItemFiltered);\n this._filterInputNode.value = '';\n this.open = true;\n this._filterInputNode.focus();\n forEach(items, (item) => {\n (item as CDSMultiSelectItem).removeAttribute('filtered');\n });\n }\n\n /**\n * The `aria-label` attribute for the icon to clear selection.\n */\n @property({ attribute: 'clear-selection-label' })\n clearSelectionLabel = '';\n\n /**\n * Specify the text that should be read for screen readers that describes total items selected\n */\n @property({ attribute: 'clear-selection-description' })\n clearSelectionDescription = 'Total items selected: ';\n\n /**\n * Specify the text that should be read for screen readers to clear selection.\n */\n @property({ attribute: 'clear-selection-text' })\n clearSelectionText = 'To clear selection, press Delete or Backspace.';\n\n /**\n * Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control.\n */\n @property()\n locale = 'en';\n\n /**\n * An assistive text for screen reader to announce, telling that an item is unselected.\n */\n @property({ attribute: 'unselected-item-assistive-text' })\n unselectedItemAssistiveText = 'Unselected an item.';\n\n /**\n * An assistive text for screen reader to announce, telling that all items are unselected.\n */\n @property({ attribute: 'unselected-all-assistive-text' })\n unselectedAllAssistiveText = 'Unselected all items.';\n\n /**\n * Specify feedback (mode) of the selection.\n * `top`: selected item jumps to top\n * `fixed`: selected item stays at it's position\n * `top-after-reopen`: selected item jump to top after reopen dropdown\n */\n @property({ attribute: 'selection-feedback' })\n selectionFeedback = SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN;\n\n /**\n * The CSS class list for multi-select listbox\n */\n protected get _classes() {\n const {\n disabled,\n size,\n type,\n invalid,\n readOnly,\n open,\n warn,\n _selectedItemsCount: selectedItemsCount,\n } = this;\n const inline = type === DROPDOWN_TYPE.INLINE;\n\n return classMap({\n [`${prefix}--multi-select`]: true,\n [`${prefix}--list-box`]: true,\n [`${prefix}--list-box--disabled`]: disabled,\n [`${prefix}--list-box--inline`]: inline,\n [`${prefix}--list-box--expanded`]: open,\n [`${prefix}--list-box--${size}`]: size,\n [`${prefix}--multi-select--invalid`]: invalid,\n [`${prefix}--multi-select--warn`]: warn,\n [`${prefix}--multi-select--inline`]: inline,\n [`${prefix}--list-box--inline`]: inline,\n [`${prefix}--multi-select--readonly`]: readOnly,\n [`${prefix}--multi-select--selected`]: selectedItemsCount > 0,\n });\n }\n\n protected compareItems = (itemA, itemB, { locale }) => {\n itemA.localeCompare(itemB, locale, { numeric: true });\n };\n\n protected sortItems = (\n menuItems: NodeList,\n { values, compareItems, locale = 'en' }\n ) => {\n const menuItemsArray = Array.from(menuItems);\n\n const sortedArray = menuItemsArray.sort((itemA, itemB) => {\n const hasItemA = values.includes((itemA as HTMLInputElement).value);\n const hasItemB = values.includes((itemB as HTMLInputElement).value);\n\n // Prefer whichever item is in the `value` array first\n if (hasItemA && !hasItemB) {\n return -1;\n }\n\n if (hasItemB && !hasItemA) {\n return 1;\n }\n\n return compareItems(\n (itemA as HTMLInputElement).value,\n (itemB as HTMLInputElement).value,\n {\n locale,\n }\n );\n });\n\n return sortedArray;\n };\n\n shouldUpdate(changedProperties) {\n const { selectorItem } = this.constructor as typeof CDSMultiSelect;\n const items = this.querySelectorAll(selectorItem);\n\n const { value, locale } = this;\n const values = !value ? [] : value.split(',');\n\n if (changedProperties.has('size')) {\n forEach(this.querySelectorAll(selectorItem), (elem) => {\n (elem as CDSMultiSelectItem).size = this.size;\n });\n }\n if (changedProperties.has('value')) {\n // Updates selection beforehand because our rendering logic for `<cds-multi-select>` looks for selected items via `qSA()`\n forEach(items, (elem) => {\n (elem as CDSMultiSelectItem).selected =\n values.indexOf((elem as CDSMultiSelectItem).value) >= 0;\n });\n this._selectedItemsCount = filter(\n items,\n (elem) => values.indexOf((elem as CDSMultiSelectItem).value) >= 0\n ).length;\n\n if (this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP) {\n const sortedMenuItems = this.sortItems(items, {\n values,\n compareItems: this.compareItems,\n locale,\n });\n\n this.replaceChildren(...sortedMenuItems);\n }\n }\n if (changedProperties.has('open')) {\n if (\n this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN\n ) {\n const sortedMenuItems = this.sortItems(items, {\n values,\n compareItems: this.compareItems,\n locale,\n });\n\n this.replaceChildren(...sortedMenuItems);\n }\n }\n return true;\n }\n\n updated(changedProperties) {\n if (changedProperties.has('open') && this.open && !this.filterable) {\n // move focus to menu body when open for non-filterable mulit-select\n this._menuBodyNode.focus();\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n /**\n * Detect if multi-select already has initially selected items\n */\n this.value = filter(\n this.querySelectorAll(\n (this.constructor as typeof CDSMultiSelect).selectorItem\n ),\n (item) => (item as CDSMultiSelectItem).selected\n )\n .map((item) => (item as CDSMultiSelectItem).value)\n .join(',');\n }\n\n /**\n * A selector that will return menu body.\n */\n static get selectorMenuBody() {\n return `div[part=\"menu-body\"]`;\n }\n\n /**\n * A selector that will return highlighted items.\n */\n static get selectorItemHighlighted() {\n return `${prefix}-multi-select-item[highlighted]`;\n }\n\n /**\n * A selector that will return multi select items.\n * We use a separate property from `.itemTagName` due to the nature in difference of tag name vs. selector.\n */\n static get selectorItem() {\n return `${prefix}-multi-select-item`;\n }\n\n /**\n * A selector that will return remaining items after a filter.\n */\n static get selectorItemFiltered() {\n return `${prefix}-multi-select-item[filtered]`;\n }\n\n /**\n * A selector that will return remaining items after a filter.\n */\n static get selectorItemResults() {\n return `${prefix}-multi-select-item:not([filtered])`;\n }\n\n /**\n * A selector that will return selected items.\n */\n static get selectorItemSelected() {\n return `${prefix}-multi-select-item[selected]`;\n }\n\n /**\n * The name of the custom event fired before this multi select item is being toggled upon a user gesture.\n * Cancellation of this event stops the user-initiated action of toggling this multi select item.\n */\n static get eventBeforeToggle() {\n return `${prefix}-multi-select-beingtoggled`;\n }\n\n /**\n * The name of the custom event fired after this multi select item is toggled upon a user gesture.\n */\n static get eventToggle() {\n return `${prefix}-multi-select-toggled`;\n }\n\n /**\n * The name of the custom event fired before a multi select item is selected upon a user gesture.\n * Cancellation of this event stops changing the user-initiated selection.\n */\n static get eventBeforeSelect() {\n return `${prefix}-multi-select-beingselected`;\n }\n\n /**\n * The name of the custom event fired after a a multi select item is selected upon a user gesture.\n */\n static get eventSelect() {\n return `${prefix}-multi-select-selected`;\n }\n\n static styles = styles;\n}\n\nexport default CDSMultiSelect;\n"]}
|