material-inspired-component-library 8.1.0 → 9.0.0
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 +106 -18
- package/components/README.md +1 -1
- package/components/accordion/README.md +6 -6
- package/components/alert/README.md +10 -10
- package/components/alert/index.scss +27 -52
- package/components/appbar/README.md +19 -6
- package/components/appbar/index.scss +40 -44
- package/components/badge/README.md +12 -10
- package/components/badge/index.scss +21 -25
- package/components/bottomsheet/README.md +26 -1
- package/components/bottomsheet/index.scss +58 -44
- package/components/button/README.md +70 -10
- package/components/button/_shared.scss +210 -0
- package/components/button/index.scss +75 -389
- package/components/card/README.md +97 -85
- package/components/card/index.scss +46 -65
- package/components/checkbox/README.md +25 -14
- package/{tools/shapes/check.mjs → components/checkbox/_label.scss} +37 -42
- package/components/checkbox/index.scss +66 -66
- package/components/chip/README.md +186 -0
- package/components/chip/index.scss +285 -0
- package/components/datepicker/README.md +79 -0
- package/components/datepicker/index.scss +346 -315
- package/components/dialog/README.md +20 -10
- package/components/dialog/index.scss +55 -66
- package/components/divider/README.md +16 -15
- package/components/divider/index.scss +9 -25
- package/components/iconbutton/README.md +63 -12
- package/components/iconbutton/index.scss +142 -303
- package/components/list/README.md +89 -156
- package/components/list/index.scss +34 -36
- package/components/menu/README.md +81 -155
- package/components/menu/index.scss +52 -58
- package/components/navigationbar/README.md +108 -0
- package/components/navigationbar/index.scss +185 -0
- package/components/navigationrail/README.md +62 -37
- package/components/navigationrail/_navitem.scss +96 -0
- package/components/navigationrail/index.scss +78 -132
- package/components/progressindicator/README.md +83 -47
- package/components/progressindicator/index.scss +622 -172
- package/components/radio/README.md +11 -9
- package/components/radio/index.scss +36 -33
- package/components/select/README.md +12 -7
- package/components/select/index.scss +26 -34
- package/components/shapes/README.md +3 -3
- package/components/shapes/index.scss +0 -1
- package/components/sidesheet/README.md +21 -9
- package/components/sidesheet/index.scss +38 -46
- package/components/slider/README.md +21 -0
- package/components/slider/index.scss +108 -139
- package/components/snackbar/README.md +32 -35
- package/components/snackbar/index.scss +10 -22
- package/components/stepper/README.md +14 -7
- package/components/stepper/index.scss +58 -39
- package/components/switch/README.md +22 -15
- package/components/switch/index.scss +68 -60
- package/components/textfield/README.md +48 -5
- package/components/textfield/index.scss +192 -248
- package/components/timepicker/README.md +53 -23
- package/components/timepicker/index.scss +110 -128
- package/dist/alert.css +1 -1
- package/dist/alert.js +1 -1
- package/dist/appbar.css +1 -1
- package/dist/appbar.js +1 -1
- package/dist/badge.css +1 -1
- package/dist/badge.js +1 -1
- package/dist/base.css +1 -0
- package/dist/base.js +1 -0
- package/dist/bottomsheet.css +1 -1
- package/dist/bottomsheet.js +1 -1
- package/dist/button.css +1 -1
- package/dist/button.js +1 -1
- package/dist/card.css +1 -1
- package/dist/card.js +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/chip.css +1 -0
- package/dist/chip.js +1 -0
- package/dist/components/button/index.d.ts +1 -1
- package/dist/components/iconbutton/index.d.ts +2 -7
- package/dist/components/slider/index.d.ts +1 -1
- package/dist/components/textfield/index.d.ts +2 -2
- package/dist/datepicker.css +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/dialog.css +1 -1
- package/dist/dialog.js +1 -1
- package/dist/divider.css +1 -1
- package/dist/divider.js +1 -1
- package/dist/field.css +1 -0
- package/dist/field.js +1 -0
- package/dist/foundations/form/index.js +1 -1
- package/dist/foundations/runtime.d.ts +15 -0
- package/dist/foundations/runtime.js +1 -0
- package/dist/iconbutton.css +1 -1
- package/dist/iconbutton.js +1 -1
- package/dist/layout.css +1 -1
- package/dist/layout.js +1 -1
- package/dist/list.css +1 -1
- package/dist/list.js +1 -1
- package/dist/menu.css +1 -1
- package/dist/menu.js +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.d.ts +14 -5
- package/dist/micl.js +1 -1
- package/dist/navigationbar.css +1 -0
- package/dist/navigationbar.js +1 -0
- package/dist/navigationrail.css +1 -1
- package/dist/navigationrail.js +1 -1
- package/dist/progressindicator.css +1 -1
- package/dist/progressindicator.js +1 -1
- package/dist/radio.css +1 -1
- package/dist/radio.js +1 -1
- package/dist/scrollbar.js +1 -1
- package/dist/select.css +1 -1
- package/dist/select.js +1 -1
- package/dist/shapes.css +1 -1
- package/dist/shapes.js +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/sidesheet.js +1 -1
- package/dist/slider.css +1 -1
- package/dist/slider.js +1 -1
- package/dist/snackbar.css +1 -1
- package/dist/snackbar.js +1 -1
- package/dist/stepper.css +1 -1
- package/dist/stepper.js +1 -1
- package/dist/switch.css +1 -1
- package/dist/switch.js +1 -1
- package/dist/textfield.css +1 -1
- package/dist/textfield.js +1 -1
- package/dist/timepicker.css +1 -1
- package/dist/timepicker.js +1 -1
- package/foundations/_index.scss +35 -0
- package/foundations/{index.scss → base/index.scss} +21 -56
- package/foundations/field/index.scss +37 -0
- package/foundations/layout/index.scss +64 -65
- package/package.json +23 -9
- package/styles/statelayer.scss +20 -5
- package/styles.scss +5 -2
- package/.claude/settings.local.json +0 -14
- package/.editorconfig +0 -12
- package/.gitattributes +0 -9
- package/.github/ISSUE_TEMPLATE/bug_report.md +0 -35
- package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
- package/CLAUDE.md +0 -53
- package/CODE_OF_CONDUCT.md +0 -128
- package/components/bottomsheet/index.ts +0 -153
- package/components/button/index.ts +0 -79
- package/components/checkbox/index.ts +0 -148
- package/components/datepicker/index.ts +0 -693
- package/components/iconbutton/index.ts +0 -77
- package/components/list/index.ts +0 -138
- package/components/menu/index.ts +0 -145
- package/components/navigationrail/index.ts +0 -87
- package/components/progressindicator/index.ts +0 -77
- package/components/slider/index.ts +0 -149
- package/components/snackbar/index.ts +0 -118
- package/components/stepper/index.ts +0 -248
- package/components/textfield/index.ts +0 -188
- package/components/timepicker/index.ts +0 -413
- package/dist/components/progressindicator/index.d.ts +0 -6
- package/dist/foundations.css +0 -1
- package/dist/foundations.js +0 -1
- package/docs/accordion.html +0 -344
- package/docs/alert.html +0 -177
- package/docs/bottomsheet.html +0 -240
- package/docs/button.html +0 -290
- package/docs/card-awards.webp +0 -0
- package/docs/card-cabinet.webp +0 -0
- package/docs/card-city.webp +0 -0
- package/docs/card-fingerprint.webp +0 -0
- package/docs/card-holiday.webp +0 -0
- package/docs/card-names.webp +0 -0
- package/docs/card.html +0 -159
- package/docs/checkbox.html +0 -147
- package/docs/datepicker.html +0 -274
- package/docs/dialog.html +0 -195
- package/docs/divider.html +0 -139
- package/docs/docs.css +0 -26
- package/docs/docs.js +0 -139
- package/docs/iconbutton.html +0 -329
- package/docs/index.html +0 -431
- package/docs/list.html +0 -310
- package/docs/menu.html +0 -574
- package/docs/micl.css +0 -1
- package/docs/micl.js +0 -1
- package/docs/navigationrail.html +0 -138
- package/docs/progressindicator.html +0 -288
- package/docs/radio.html +0 -123
- package/docs/select.html +0 -337
- package/docs/shapes.css +0 -1
- package/docs/shapes.html +0 -159
- package/docs/shapes.js +0 -1
- package/docs/sidesheet.html +0 -149
- package/docs/slider.html +0 -141
- package/docs/snackbar.html +0 -102
- package/docs/stepper.html +0 -319
- package/docs/switch.html +0 -196
- package/docs/textfield.html +0 -208
- package/docs/themes/airblue/dark-hc.css +0 -51
- package/docs/themes/airblue/dark-mc.css +0 -51
- package/docs/themes/airblue/dark.css +0 -51
- package/docs/themes/airblue/light-hc.css +0 -51
- package/docs/themes/airblue/light-mc.css +0 -51
- package/docs/themes/airblue/light.css +0 -51
- package/docs/themes/airblue/theme.css +0 -306
- package/docs/themes/barnred/dark-hc.css +0 -51
- package/docs/themes/barnred/dark-mc.css +0 -51
- package/docs/themes/barnred/dark.css +0 -51
- package/docs/themes/barnred/light-hc.css +0 -51
- package/docs/themes/barnred/light-mc.css +0 -51
- package/docs/themes/barnred/light.css +0 -51
- package/docs/themes/barnred/theme.css +0 -306
- package/docs/themes/citrine/dark-hc.css +0 -51
- package/docs/themes/citrine/dark-mc.css +0 -51
- package/docs/themes/citrine/dark.css +0 -51
- package/docs/themes/citrine/light-hc.css +0 -51
- package/docs/themes/citrine/light-mc.css +0 -51
- package/docs/themes/citrine/light.css +0 -51
- package/docs/themes/citrine/theme.css +0 -306
- package/docs/themes/gray/dark-hc.css +0 -51
- package/docs/themes/gray/dark-mc.css +0 -51
- package/docs/themes/gray/dark.css +0 -51
- package/docs/themes/gray/light-hc.css +0 -51
- package/docs/themes/gray/light-mc.css +0 -51
- package/docs/themes/gray/light.css +0 -51
- package/docs/themes/gray/theme.css +0 -306
- package/docs/themes/greenery/dark-hc.css +0 -51
- package/docs/themes/greenery/dark-mc.css +0 -51
- package/docs/themes/greenery/dark.css +0 -51
- package/docs/themes/greenery/light-hc.css +0 -51
- package/docs/themes/greenery/light-mc.css +0 -51
- package/docs/themes/greenery/light.css +0 -51
- package/docs/themes/greenery/theme.css +0 -306
- package/docs/themes/hermana/dark-hc.css +0 -51
- package/docs/themes/hermana/dark-mc.css +0 -51
- package/docs/themes/hermana/dark.css +0 -51
- package/docs/themes/hermana/light-hc.css +0 -51
- package/docs/themes/hermana/light-mc.css +0 -51
- package/docs/themes/hermana/light.css +0 -51
- package/docs/themes/hermana/theme.css +0 -306
- package/docs/themes/illuminating/dark-hc.css +0 -51
- package/docs/themes/illuminating/dark-mc.css +0 -51
- package/docs/themes/illuminating/dark.css +0 -51
- package/docs/themes/illuminating/light-hc.css +0 -51
- package/docs/themes/illuminating/light-mc.css +0 -51
- package/docs/themes/illuminating/light.css +0 -51
- package/docs/themes/illuminating/theme.css +0 -306
- package/docs/themes/magenta/dark-hc.css +0 -51
- package/docs/themes/magenta/dark-mc.css +0 -51
- package/docs/themes/magenta/dark.css +0 -51
- package/docs/themes/magenta/light-hc.css +0 -51
- package/docs/themes/magenta/light-mc.css +0 -51
- package/docs/themes/magenta/light.css +0 -51
- package/docs/themes/magenta/theme.css +0 -306
- package/docs/themes/mocha/dark-hc.css +0 -51
- package/docs/themes/mocha/dark-mc.css +0 -51
- package/docs/themes/mocha/dark.css +0 -51
- package/docs/themes/mocha/light-hc.css +0 -51
- package/docs/themes/mocha/light-mc.css +0 -51
- package/docs/themes/mocha/light.css +0 -51
- package/docs/themes/mocha/theme.css +0 -306
- package/docs/themes/olivegreen/dark-hc.css +0 -51
- package/docs/themes/olivegreen/dark-mc.css +0 -51
- package/docs/themes/olivegreen/dark.css +0 -51
- package/docs/themes/olivegreen/light-hc.css +0 -51
- package/docs/themes/olivegreen/light-mc.css +0 -51
- package/docs/themes/olivegreen/light.css +0 -51
- package/docs/themes/olivegreen/theme.css +0 -306
- package/docs/themes/peri/dark-hc.css +0 -51
- package/docs/themes/peri/dark-mc.css +0 -51
- package/docs/themes/peri/dark.css +0 -51
- package/docs/themes/peri/light-hc.css +0 -51
- package/docs/themes/peri/light-mc.css +0 -51
- package/docs/themes/peri/light.css +0 -51
- package/docs/themes/peri/theme.css +0 -306
- package/docs/timepicker.html +0 -160
- package/foundations/form/index.ts +0 -174
- package/foundations/layout/README.md +0 -127
- package/intl.d.ts +0 -9
- package/micl.ts +0 -221
- package/styles/README.md +0 -196
- package/tools/shapes/generate.mjs +0 -828
- package/tsconfig.json +0 -116
- package/webpack.config.js +0 -104
package/dist/list.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-sys-icon-size: 24px;--md-sys-padding-xxs: 4px;--md-sys-padding-xs: 8px;--md-sys-padding-s: 12px;--md-sys-padding-m: 16px;--md-sys-padding-l: 20px;--md-sys-padding-xl: 24px;--md-sys-padding-xxl: 28px}.micl-hidden{display:none !important}.micl-no-transition{transition:none !important}.micl-flex--vcenter{display:flex;flex-direction:row;align-items:center}.micl-grid-field,.micl-grid-iconfield{box-sizing:border-box;display:grid;row-gap:var(--md-sys-padding-xl, 24px)}.micl-grid-iconfield{grid-template-columns:48px 1fr}.micl-grid-iconfield__icon{grid-column:1;margin-block-start:.6rem}.micl-grid-iconfield__field{grid-column:2}.micl-link{display:flex;align-items:center;justify-content:center;text-decoration:none}@property --micl-ripple{syntax:"<integer>";inherits:false;initial-value:0}@property --micl-x{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-y{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-width{syntax:"<length>";inherits:true;initial-value:0px}@property --micl-height{syntax:"<length>";inherits:true;initial-value:0px}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level4: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 2px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 6px 10px 4px}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-dragged-state-layer-opacity: 16%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-inner-offset: -3px}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 5000ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0%,100%}to{background-size:10000%,100%}}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:root{--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem}:root{--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.0125rem}:root{--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem}:root{--md-comp-accordion-item-space: 0px}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:not(.micl-list-item--disabled){cursor:pointer}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):hover:not(.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-hovered-expressive-shape, var(--md-sys-shape-corner-medium, 12px));--_headline-color: var(--md-comp-list-item-hover-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-hover-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-hover-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-hover-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--statelayer-color: var(--md-comp-list-item-hover-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%))}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):focus-visible:not(.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-focused-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-focus-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-focus-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-focus-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-focus-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--statelayer-color: var(--md-comp-list-item-focus-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));outline:var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px))}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)):active:not(.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-pressed-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-pressed-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-pressed-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-pressed-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-pressed-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--statelayer-color: var(--md-comp-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%))}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:not(:has(input[type=checkbox]:checked)):not(:where(details[open]>*)).micl-list-item--dragging:not(.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-dragged-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-dragged-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-dragged-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-dragged-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-dragged-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-dragged-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--statelayer-color: var(--md-comp-list-item-dragged-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity, 16%));box-shadow:var(--md-comp-list-item-dragged-container-elevation, var(--md-sys-elevation-level4));cursor:grabbing}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:not(.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-selected-hovered-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-hover-leading-icon-color, var(--md-sys-color-on-surface));--_supporting-text-color: var(--md-comp-list-item-selected-hover-supporting-text-color, var(--md-sys-color-on-surface));--_trailing-icon-color: var(--md-comp-list-item-selected-hover-trailing-icon-color, var(--md-sys-color-on-surface));--_trailing-text-color: var(--md-comp-list-item-selected-hover-trailing-supporting-text-color, var(--md-sys-color-on-surface));--statelayer-color: var(--md-comp-list-item-selected-hover-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%))}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:not(.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-selected-focused-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-focus-leading-icon-color, var(--md-sys-color-on-surface));--_supporting-text-color: var(--md-comp-list-item-selected-focus-supporting-text-color, var(--md-sys-color-on-surface));--_trailing-icon-color: var(--md-comp-list-item-selected-focus-trailing-icon-color, var(--md-sys-color-on-surface));--_trailing-text-color: var(--md-comp-list-item-selected-focus-trailing-supporting-text-color, var(--md-sys-color-on-surface));--statelayer-color: var(--md-comp-list-item-selected-focus-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));outline:var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px))}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)):active:not(.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-selected-pressed-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-pressed-leading-icon-color, var(--md-sys-color-on-surface));--_supporting-text-color: var(--md-comp-list-item-selected-pressed-supporting-text-color, var(--md-sys-color-on-surface));--_trailing-icon-color: var(--md-comp-list-item-selected-pressed-trailing-icon-color, var(--md-sys-color-on-surface));--_trailing-text-color: var(--md-comp-list-item-selected-pressed-trailing-supporting-text-color, var(--md-sys-color-on-surface));--statelayer-color: var(--md-comp-list-item-selected-pressed-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%))}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),select .micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-one:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-two:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(.micl-list-item--disabled),.micl-list>details>summary.micl-list-item-three:is(:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:not(.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-selected-dragged-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-selected-dragged-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-dragged-leading-icon-color, var(--md-sys-color-on-surface));--_supporting-text-color: var(--md-comp-list-item-selected-dragged-supporting-text-color, var(--md-sys-color-on-surface));--_trailing-icon-color: var(--md-comp-list-item-selected-dragged-trailing-icon-color, var(--md-sys-color-on-surface));--_trailing-text-color: var(--md-comp-list-item-selected-dragged-trailing-supporting-text-color, var(--md-sys-color-on-surface));--statelayer-color: var(--md-comp-list-item-selected-dragged-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity, 16%));box-shadow:var(--md-comp-list-item-selected-dragged-container-elevation, var(--md-sys-elevation-level4))}.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-rippling.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-rippling.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled),.micl-list:has(.micl-list-item-one[tabindex],.micl-list-item-two[tabindex],.micl-list-item-three[tabindex]) .micl-rippling.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled),select .micl-rippling.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled),select .micl-rippling.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled),select .micl-rippling.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled),.micl-list>details>summary.micl-rippling.micl-list-item-one:not(.micl-list-item--disabled),.micl-list>details>summary.micl-rippling.micl-list-item-two:not(.micl-list-item--disabled),.micl-list>details>summary.micl-rippling.micl-list-item-three:not(.micl-list-item--disabled){animation:micl-ripple var(--md-sys-state-ripple-duration) cubic-bezier(0.2, 0, 0, 1)}.micl-list{--md-comp-list-motion-effects: cubic-bezier(0.42, 1.67, 0.21, 0.9);--md-comp-list-motion-duration: 200ms;--md-comp-accordion-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-accordion-motion-duration: 500ms;--md-sys-divider-space: 0.5px;--_list-shape: var(--md-comp-list-container-shape, var(--md-sys-shape-corner-large, 16px));--_list-item-background-color: var(--md-comp-list-item-container-color, transparent);--_list-item-background-opacity: 0%;display:flex;flex-direction:column;margin:var(--md-comp-list-container-space, 0px) 0;padding:0;border-radius:var(--_list-shape);interpolate-size:allow-keywords;list-style-type:none;background-color:var(--md-comp-list-container-color, transparent)}.micl-list.micl-list--segmented{--_list-item-background-color: var(--md-comp-list-item-segmented-container-color, var(--md-sys-color-surface));--_list-item-background-opacity: 100%;row-gap:var(--md-comp-list-segment-gap, 2px)}.micl-list>details::details-content{block-size:0;overflow:hidden;transition:block-size var(--md-comp-accordion-motion-duration) var(--md-comp-accordion-motion-spatial),content-visibility var(--md-comp-accordion-motion-duration) linear allow-discrete}.micl-list>details[open]::details-content{block-size:auto;margin-block-end:var(--md-comp-accordion-item-space, 0px)}.micl-list>details[open] .micl-list-item__icon--expander{transform:rotate(180deg)}.micl-list>details>summary.micl-list-item-one,.micl-list>details>summary.micl-list-item-two,.micl-list>details>summary.micl-list-item-three{position:relative}.micl-list>details>summary.micl-list-item-one::-webkit-details-marker,.micl-list>details>summary.micl-list-item-two::-webkit-details-marker,.micl-list>details>summary.micl-list-item-three::-webkit-details-marker{display:none}.micl-list>details>summary.micl-list-item-one.micl-list-item--disabled,.micl-list>details>summary.micl-list-item-two.micl-list-item--disabled,.micl-list>details>summary.micl-list-item-three.micl-list-item--disabled{pointer-events:none}.micl-list>details .micl-list-item__content{box-sizing:border-box;padding-inline-start:var(--md-comp-list-item-leading-space, 16px);background-color:rgb(from var(--_list-item-background-color) r g b/var(--_list-item-background-opacity));overflow:hidden}.micl-list-item-one,.micl-list-item-two,.micl-list-item-three{--statelayer-color: var(--md-sys-color-on-surface);--_list-item-shape: var(--md-comp-list-item-container-expressive-shape, var(--md-sys-shape-corner-extra-small, 4px));--_overline-color: var(--md-comp-list-item-overline-color, var(--md-sys-color-on-surface-variant));--_headline-color: var(--md-comp-list-item-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant));box-sizing:border-box;display:flex;align-items:center;column-gap:var(--md-comp-list-item-between-space, 12px);padding-block:var(--md-comp-list-item-top-space, 10px) var(--md-comp-list-item-bottom-space, 10px);padding-inline:var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);border:none;border-radius:var(--_list-item-shape);outline:none;background-color:rgb(from var(--_list-item-background-color) r g b/var(--_list-item-background-opacity));background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:0%,100%;list-style:none;transition:border-radius var(--md-comp-list-motion-duration) var(--md-comp-list-motion-effects),background-size 0ms,--statelayer-opacity var(--md-comp-list-motion-duration) linear;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micl-list-item-one:first-of-type,.micl-list-item-two:first-of-type,.micl-list-item-three:first-of-type{border-start-start-radius:max(var(--_list-item-shape),var(--_list-shape));border-start-end-radius:max(var(--_list-item-shape),var(--_list-shape))}.micl-list-item-one:last-of-type,.micl-list-item-two:last-of-type,.micl-list-item-three:last-of-type{border-end-start-radius:max(var(--_list-item-shape),var(--_list-shape));border-end-end-radius:max(var(--_list-item-shape),var(--_list-shape))}.micl-list-item-one:not(:has(>button)),.micl-list-item-two:not(:has(>button)),.micl-list-item-three:not(:has(>button)){--micl-ripple: 1}.micl-list-item-one>a,.micl-list-item-one>button,.micl-list-item-one>label,.micl-list-item-two>a,.micl-list-item-two>button,.micl-list-item-two>label,.micl-list-item-three>a,.micl-list-item-three>button,.micl-list-item-three>label{box-sizing:border-box;display:inherit;align-items:inherit;column-gap:inherit;min-block-size:inherit;inline-size:100%;padding-block:var(--md-comp-list-item-top-space, 10px) var(--md-comp-list-item-bottom-space, 10px);padding-inline:var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);border:none;border-radius:inherit;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer}.micl-list-item-one:has(>a,>button,>label),.micl-list-item-two:has(>a,>button,>label),.micl-list-item-three:has(>a,>button,>label){padding:0}.micl-list-item-one:disabled,.micl-list-item-one.micl-list-item--disabled,.micl-list-item-two:disabled,.micl-list-item-two.micl-list-item--disabled,.micl-list-item-three:disabled,.micl-list-item-three.micl-list-item--disabled{--_list-item-shape: var(--md-comp-list-item-container-disabled-expressive-shape, var(--md-sys-shape-corner-extra-small, 4px));--_overline-color: rgb(from var(--md-comp-list-item-disabled-overline-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-overline-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_headline-color: rgb(from var(--md-comp-list-item-disabled-label-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_leading-icon-color: rgb(from var(--md-comp-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_supporting-text-color: rgb(from var(--md-comp-list-item-disabled-supporting-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_trailing-icon-color: rgb(from var(--md-comp-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_trailing-text-color: rgb(from var(--md-comp-list-item-disabled-trailing-supporting-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--statelayer-color: var(--md-comp-list-item-disabled-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-disabled-state-layer-opacity, 0%)}.micl-list-item-one:disabled a,.micl-list-item-one:disabled button,.micl-list-item-one:disabled label,.micl-list-item-one.micl-list-item--disabled a,.micl-list-item-one.micl-list-item--disabled button,.micl-list-item-one.micl-list-item--disabled label,.micl-list-item-two:disabled a,.micl-list-item-two:disabled button,.micl-list-item-two:disabled label,.micl-list-item-two.micl-list-item--disabled a,.micl-list-item-two.micl-list-item--disabled button,.micl-list-item-two.micl-list-item--disabled label,.micl-list-item-three:disabled a,.micl-list-item-three:disabled button,.micl-list-item-three:disabled label,.micl-list-item-three.micl-list-item--disabled a,.micl-list-item-three.micl-list-item--disabled button,.micl-list-item-three.micl-list-item--disabled label{pointer-events:none;cursor:auto}.micl-list-item-one:disabled .micl-list-item__image,.micl-list-item-one:disabled .micl-list-item__thumbnail,.micl-list-item-one.micl-list-item--disabled .micl-list-item__image,.micl-list-item-one.micl-list-item--disabled .micl-list-item__thumbnail,.micl-list-item-two:disabled .micl-list-item__image,.micl-list-item-two:disabled .micl-list-item__thumbnail,.micl-list-item-two.micl-list-item--disabled .micl-list-item__image,.micl-list-item-two.micl-list-item--disabled .micl-list-item__thumbnail,.micl-list-item-three:disabled .micl-list-item__image,.micl-list-item-three:disabled .micl-list-item__thumbnail,.micl-list-item-three.micl-list-item--disabled .micl-list-item__image,.micl-list-item-three.micl-list-item--disabled .micl-list-item__thumbnail{opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}.micl-list-item-one:disabled:checked,.micl-list-item-one:disabled:has(input[type=checkbox]:checked),.micl-list-item-one:disabled:where(details[open]>*),.micl-list-item-one.micl-list-item--disabled:checked,.micl-list-item-one.micl-list-item--disabled:has(input[type=checkbox]:checked),.micl-list-item-one.micl-list-item--disabled:where(details[open]>*),.micl-list-item-two:disabled:checked,.micl-list-item-two:disabled:has(input[type=checkbox]:checked),.micl-list-item-two:disabled:where(details[open]>*),.micl-list-item-two.micl-list-item--disabled:checked,.micl-list-item-two.micl-list-item--disabled:has(input[type=checkbox]:checked),.micl-list-item-two.micl-list-item--disabled:where(details[open]>*),.micl-list-item-three:disabled:checked,.micl-list-item-three:disabled:has(input[type=checkbox]:checked),.micl-list-item-three:disabled:where(details[open]>*),.micl-list-item-three.micl-list-item--disabled:checked,.micl-list-item-three.micl-list-item--disabled:has(input[type=checkbox]:checked),.micl-list-item-three.micl-list-item--disabled:where(details[open]>*){--_list-item-background-color: var(--md-comp-list-item-selected-disabled-container-color, var(--md-sys-color-on-surface));--_list-item-background-opacity: var(--md-comp-list-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--_list-item-shape: var(--md-comp-list-item-container-selected-disabled-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_overline-color: rgb(from var(--md-comp-list-item-selected-disabled-overline-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-overline-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_headline-color: rgb(from var(--md-comp-list-item-selected-disabled-label-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_leading-icon-color: rgb(from var(--md-comp-list-item-selected-disabled-leading-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_supporting-text-color: rgb(from var(--md-comp-list-item-selected-disabled-supporting-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_trailing-icon-color: rgb(from var(--md-comp-list-item-selected-disabled-trailing-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_trailing-text-color: rgb(from var(--md-comp-list-item-selected-disabled-trailing-supporting-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--statelayer-color: var(--md-comp-list-item-selected-disabled-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-disabled-state-layer-opacity, 0%)}.micl-list-item-one:checked,.micl-list-item-one:has(input[type=checkbox]:checked),.micl-list-item-one:where(details[open]>*),.micl-list-item-two:checked,.micl-list-item-two:has(input[type=checkbox]:checked),.micl-list-item-two:where(details[open]>*),.micl-list-item-three:checked,.micl-list-item-three:has(input[type=checkbox]:checked),.micl-list-item-three:where(details[open]>*){--_list-item-background-color: var(--md-comp-list-item-selected-container-color, var(--md-sys-color-secondary-container));--_list-item-background-opacity: 100%;--_overline-color: var(--md-comp-list-item-selected-overline-color, var(--md-sys-color-on-secondary-container));--_headline-color: var(--md-comp-list-item-selected-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-leading-icon-color, var(--md-sys-color-on-secondary-container));--_supporting-text-color: var(--md-comp-list-item-selected-supporting-text-color, var(--md-sys-color-on-secondary-container));--_trailing-text-color: var(--md-comp-list-item-selected-trailing-supporting-text-color, var(--md-sys-color-on-secondary-container));--_trailing-icon-color: var(--md-comp-list-item-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container))}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):checked,.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked),.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled):where(details[open]>*),.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):checked,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked),.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled):where(details[open]>*),.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):checked,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):has(input[type=checkbox]:checked),.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled):where(details[open]>*){--_list-item-shape: var(--md-comp-list-item-container-selected-expressive-shape, var(--md-sys-shape-corner-large, 16px))}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover,.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active{--statelayer-opacity: 0%}.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover.micl-switch::after,.micl-list-item-one:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active.micl-switch::after,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover.micl-switch::after,.micl-list-item-two:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active.micl-switch::after,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover.micl-switch::after,.micl-list-item-three:not(:disabled):not(.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active.micl-switch::after{border-color:rgba(0,0,0,0)}.micl-list-item-one{min-block-size:var(--md-comp-list-item-one-line-container-height, 56px)}.micl-list-item-two{min-block-size:var(--md-comp-list-item-two-line-container-height, 72px)}.micl-list-item-two .micl-list-item__supporting-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.micl-list-item-three{min-block-size:var(--md-comp-list-item-three-line-container-height, 88px);align-items:flex-start}.micl-list-item-three .micl-list-item__supporting-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.micl-list-item-one input[type=checkbox].micl-checkbox,.micl-list-item-two input[type=checkbox].micl-checkbox,.micl-list-item-three input[type=checkbox].micl-checkbox{block-size:24px;min-block-size:24px;inline-size:24px;min-inline-size:24px}.micl-list-item__icon{min-inline-size:var(--md-comp-list-item-leading-icon-expressive-size, 20px);font-size:var(--md-comp-list-item-leading-icon-expressive-size, 20px);font-variation-settings:"FILL" 0;color:var(--_leading-icon-color);transition:font-variation-settings var(--md-comp-list-motion-duration) linear}.micl-list-item__icon.micl-list-item__icon--expander{transform:rotate(0deg);transition:transform var(--md-comp-list-motion-duration) linear}.micl-list-item__text~.micl-list-item__icon{min-inline-size:var(--md-comp-list-item-trailing-icon-expressive-size, 20px);font-size:var(--md-comp-list-item-trailing-icon-expressive-size, 20px);color:var(--_trailing-icon-color)}.micl-list-item__avatar{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking);display:flex;align-items:center;justify-content:center;block-size:var(--md-comp-list-item-leading-avatar-size, 40px);min-inline-size:var(--md-comp-list-item-leading-avatar-size, 40px);border-radius:var(--md-comp-list-item-leading-avatar-shape, var(--md-sys-shape-corner-full, 50%));color:var(--md-comp-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container));background-color:var(--md-comp-list-item-leading-avatar-color, var(--md-sys-color-primary-container))}.micl-list-item__image{align-self:stretch;display:inline-block;max-block-size:var(--md-comp-list-item-leading-image-height, 56px);inline-size:var(--md-comp-list-item-leading-image-width, 56px);max-inline-size:var(--md-comp-list-item-leading-image-width, 56px);min-inline-size:var(--md-comp-list-item-leading-image-width, 56px);border-radius:var(--md-comp-list-item-leading-image-expressive-shape, var(--md-sys-shape-corner-small, 8px));background-position:center;background-repeat:no-repeat;background-size:cover}.micl-list-item__thumbnail{align-self:stretch;display:inline-block;max-block-size:var(--md-comp-list-item-leading-video-height, 56px);inline-size:var(--md-comp-list-item-leading-video-width, 100px);max-inline-size:var(--md-comp-list-item-leading-video-width, 100px);min-inline-size:var(--md-comp-list-item-leading-video-width, 100px);border-radius:var(--md-comp-list-item-leading-video-shape, var(--md-sys-shape-corner-small, 8px));background-position:center;background-repeat:no-repeat;background-size:cover}.micl-list-item__text{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);display:flex;flex-direction:column;flex-basis:100%;min-inline-size:0;text-align:start;color:var(--_headline-color)}.micl-list-item__text .micl-list-item__overline{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking);color:var(--_overline-color)}.micl-list-item__text .micl-list-item__headline{color:var(--_headline-color)}.micl-list-item__text::after,.micl-list-item__text .micl-list-item__supporting-text{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking);color:var(--_supporting-text-color)}.micl-list-item__trailing-text{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking);color:var(--_trailing-text-color)}[dir=rtl] .micl-list details[open] .micl-list-item__icon--expander{transform:rotate(-180deg)}
|
|
1
|
+
:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level4: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 2px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 6px 10px 4px}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-dragged-state-layer-opacity: 16%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-inner-offset: -3px}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:root{--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem}:root{--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.0125rem}:root{--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem}:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){cursor:pointer}:focus-visible:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){outline:var(--md-comp-list-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px)) solid var(--md-comp-list-item-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-comp-list-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px))}:not(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-hovered-expressive-shape, var(--md-sys-shape-corner-medium, 12px));--_headline-color: var(--md-comp-list-item-hover-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-hover-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-hover-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-hover-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-hover-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--statelayer-color: var(--md-comp-list-item-hover-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%))}:not(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-focused-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-focus-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-focus-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-focus-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-focus-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-focus-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--statelayer-color: var(--md-comp-list-item-focus-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%))}:not(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)):active:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-pressed-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-pressed-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-pressed-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-pressed-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-pressed-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--statelayer-color: var(--md-comp-list-item-pressed-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%))}:not(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-dragged-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-dragged-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-dragged-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-dragged-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-dragged-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-dragged-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--statelayer-color: var(--md-comp-list-item-dragged-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity, 16%));box-shadow:var(--md-comp-list-item-dragged-container-elevation, var(--md-sys-elevation-level4));cursor:grabbing}:is(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)):hover:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-selected-hovered-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-selected-hover-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-hover-leading-icon-color, var(--md-sys-color-on-surface));--_supporting-text-color: var(--md-comp-list-item-selected-hover-supporting-text-color, var(--md-sys-color-on-surface));--_trailing-icon-color: var(--md-comp-list-item-selected-hover-trailing-icon-color, var(--md-sys-color-on-surface));--_trailing-text-color: var(--md-comp-list-item-selected-hover-trailing-supporting-text-color, var(--md-sys-color-on-surface));--statelayer-color: var(--md-comp-list-item-selected-hover-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%))}:is(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)):focus-visible:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-selected-focused-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-selected-focus-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-focus-leading-icon-color, var(--md-sys-color-on-surface));--_supporting-text-color: var(--md-comp-list-item-selected-focus-supporting-text-color, var(--md-sys-color-on-surface));--_trailing-icon-color: var(--md-comp-list-item-selected-focus-trailing-icon-color, var(--md-sys-color-on-surface));--_trailing-text-color: var(--md-comp-list-item-selected-focus-trailing-supporting-text-color, var(--md-sys-color-on-surface));--statelayer-color: var(--md-comp-list-item-selected-focus-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%))}:is(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)):active:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-selected-pressed-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-selected-pressed-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-pressed-leading-icon-color, var(--md-sys-color-on-surface));--_supporting-text-color: var(--md-comp-list-item-selected-pressed-supporting-text-color, var(--md-sys-color-on-surface));--_trailing-icon-color: var(--md-comp-list-item-selected-pressed-trailing-icon-color, var(--md-sys-color-on-surface));--_trailing-text-color: var(--md-comp-list-item-selected-pressed-trailing-supporting-text-color, var(--md-sys-color-on-surface));--statelayer-color: var(--md-comp-list-item-selected-pressed-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%))}:is(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)).micl-list-item--dragging:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){--_list-item-shape: var(--md-comp-list-item-container-selected-dragged-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_headline-color: var(--md-comp-list-item-selected-dragged-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-dragged-leading-icon-color, var(--md-sys-color-on-surface));--_supporting-text-color: var(--md-comp-list-item-selected-dragged-supporting-text-color, var(--md-sys-color-on-surface));--_trailing-icon-color: var(--md-comp-list-item-selected-dragged-trailing-icon-color, var(--md-sys-color-on-surface));--_trailing-text-color: var(--md-comp-list-item-selected-dragged-trailing-supporting-text-color, var(--md-sys-color-on-surface));--statelayer-color: var(--md-comp-list-item-selected-dragged-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-dragged-state-layer-opacity, var(--md-sys-state-dragged-state-layer-opacity, 16%));box-shadow:var(--md-comp-list-item-selected-dragged-container-elevation, var(--md-sys-elevation-level4))}.micl-rippling:is(.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three),:is(.micl-list:has(>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)[tabindex]),select,optgroup)>:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)):not(:disabled,.micl-list-item--disabled){animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}.micl-list{--md-comp-list-motion-effects: cubic-bezier(0.42, 1.67, 0.21, 0.9);--md-comp-list-motion-duration: 200ms;--md-comp-accordion-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-accordion-motion-duration: 500ms;--md-comp-divider-space: 0.5px;--_list-shape: var(--md-comp-list-container-shape, var(--md-sys-shape-corner-large, 16px));--_list-item-background-color: var(--md-comp-list-item-container-color, transparent);--_list-item-background-opacity: 0%;display:flex;flex-direction:column;margin:var(--md-comp-list-container-space, 0px) 0;padding:0;border-radius:var(--_list-shape);interpolate-size:allow-keywords;list-style-type:none;background-color:var(--md-comp-list-container-color, transparent)}.micl-list.micl-list--segmented{--_list-item-background-color: var(--md-comp-list-item-segmented-container-color, var(--md-sys-color-surface));--_list-item-background-opacity: 100%;row-gap:var(--md-comp-list-segment-gap, 2px)}.micl-list>details::details-content{block-size:0;overflow:hidden;transition:block-size var(--md-comp-accordion-motion-duration) var(--md-comp-accordion-motion-spatial),content-visibility var(--md-comp-accordion-motion-duration) linear allow-discrete}.micl-list>details[open]::details-content{block-size:auto;margin-block-end:var(--md-comp-accordion-item-space, 0px)}.micl-list>details[open] .micl-list-item__icon--expander{transform:rotate(180deg)}.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three){position:relative}.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)::-webkit-details-marker{display:none}.micl-list>details>summary:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three).micl-list-item--disabled{pointer-events:none}.micl-list>details .micl-list-item__content{box-sizing:border-box;padding-inline-start:var(--md-comp-list-item-leading-space, 16px);background-color:rgb(from var(--_list-item-background-color) r g b/var(--_list-item-background-opacity));overflow:hidden}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three){--statelayer-color: var(--md-sys-color-on-surface);--_list-item-shape: var(--md-comp-list-item-container-expressive-shape, var(--md-sys-shape-corner-extra-small, 4px));--_overline-color: var(--md-comp-list-item-overline-color, var(--md-sys-color-on-surface-variant));--_headline-color: var(--md-comp-list-item-label-text-color, var(--md-sys-color-on-surface));--_leading-icon-color: var(--md-comp-list-item-leading-icon-color, var(--md-sys-color-on-surface-variant));--_supporting-text-color: var(--md-comp-list-item-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-text-color: var(--md-comp-list-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--_trailing-icon-color: var(--md-comp-list-item-trailing-icon-color, var(--md-sys-color-on-surface-variant));box-sizing:border-box;display:flex;align-items:center;column-gap:var(--md-comp-list-item-between-space, 12px);padding-block:var(--md-comp-list-item-top-space, 10px) var(--md-comp-list-item-bottom-space, 10px);padding-inline:var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);border:none;border-radius:var(--_list-item-shape);outline:none;background-color:rgb(from var(--_list-item-background-color) r g b/var(--_list-item-background-opacity));background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%;list-style:none;transition:border-radius var(--md-comp-list-motion-duration) var(--md-comp-list-motion-effects),background-size 0ms,--statelayer-opacity var(--md-comp-list-motion-duration) linear;-webkit-tap-highlight-color:rgba(0,0,0,0)}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):first-of-type{border-start-start-radius:max(var(--_list-item-shape),var(--_list-shape));border-start-end-radius:max(var(--_list-item-shape),var(--_list-shape))}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):last-of-type{border-end-start-radius:max(var(--_list-item-shape),var(--_list-shape));border-end-end-radius:max(var(--_list-item-shape),var(--_list-shape))}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):not(:has(>button)){--micl-ripple: 1}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>a,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>button,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>label{box-sizing:border-box;display:inherit;align-items:inherit;column-gap:inherit;min-block-size:inherit;inline-size:100%;padding-block:var(--md-comp-list-item-top-space, 10px) var(--md-comp-list-item-bottom-space, 10px);padding-inline:var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);border:none;border-radius:inherit;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):has(>a,>button,>label){padding:0}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):disabled,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three).micl-list-item--disabled{--_list-item-shape: var(--md-comp-list-item-container-disabled-expressive-shape, var(--md-sys-shape-corner-extra-small, 4px));--_overline-color: rgb(from var(--md-comp-list-item-disabled-overline-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-overline-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_headline-color: rgb(from var(--md-comp-list-item-disabled-label-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_leading-icon-color: rgb(from var(--md-comp-list-item-disabled-leading-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_supporting-text-color: rgb(from var(--md-comp-list-item-disabled-supporting-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_trailing-icon-color: rgb(from var(--md-comp-list-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_trailing-text-color: rgb(from var(--md-comp-list-item-disabled-trailing-supporting-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--statelayer-color: var(--md-comp-list-item-disabled-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-disabled-state-layer-opacity, 0%)}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):disabled a,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):disabled button,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):disabled label,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three).micl-list-item--disabled a,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three).micl-list-item--disabled button,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three).micl-list-item--disabled label{pointer-events:none;cursor:auto}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):disabled .micl-list-item__image,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):disabled .micl-list-item__thumbnail,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three).micl-list-item--disabled .micl-list-item__image,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three).micl-list-item--disabled .micl-list-item__thumbnail{opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):disabled:is(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)),:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three).micl-list-item--disabled:is(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)){--_list-item-background-color: var(--md-comp-list-item-selected-disabled-container-color, var(--md-sys-color-on-surface));--_list-item-background-opacity: var(--md-comp-list-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--_list-item-shape: var(--md-comp-list-item-container-selected-disabled-expressive-shape, var(--md-sys-shape-corner-large, 16px));--_overline-color: rgb(from var(--md-comp-list-item-selected-disabled-overline-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-overline-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_headline-color: rgb(from var(--md-comp-list-item-selected-disabled-label-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_leading-icon-color: rgb(from var(--md-comp-list-item-selected-disabled-leading-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_supporting-text-color: rgb(from var(--md-comp-list-item-selected-disabled-supporting-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_trailing-icon-color: rgb(from var(--md-comp-list-item-selected-disabled-trailing-icon-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--_trailing-text-color: rgb(from var(--md-comp-list-item-selected-disabled-trailing-supporting-text-color, var(--md-sys-color-on-surface)) r g b / var(--md-comp-list-item-selected-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%)));--statelayer-color: var(--md-comp-list-item-selected-disabled-state-layer-color, var(--md-sys-color-on-surface));--statelayer-opacity: var(--md-comp-list-item-selected-disabled-state-layer-opacity, 0%)}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):is(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)){--_list-item-background-color: var(--md-comp-list-item-selected-container-color, var(--md-sys-color-secondary-container));--_list-item-background-opacity: 100%;--_overline-color: var(--md-comp-list-item-selected-overline-color, var(--md-sys-color-on-secondary-container));--_headline-color: var(--md-comp-list-item-selected-label-text-color, var(--md-sys-color-on-secondary-container));--_leading-icon-color: var(--md-comp-list-item-selected-leading-icon-color, var(--md-sys-color-on-secondary-container));--_supporting-text-color: var(--md-comp-list-item-selected-supporting-text-color, var(--md-sys-color-on-secondary-container));--_trailing-text-color: var(--md-comp-list-item-selected-trailing-supporting-text-color, var(--md-sys-color-on-secondary-container));--_trailing-icon-color: var(--md-comp-list-item-selected-trailing-icon-color, var(--md-sys-color-on-secondary-container))}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):not(:disabled,.micl-list-item--disabled):is(:checked,:has(input[type=checkbox]:checked),:where(details[open]>*)){--_list-item-shape: var(--md-comp-list-item-container-selected-expressive-shape, var(--md-sys-shape-corner-large, 16px))}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):not(:disabled,.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):not(:disabled,.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active{--statelayer-opacity: 0%}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):not(:disabled,.micl-list-item--disabled) input[type=checkbox]:not(:disabled):hover.micl-switch::after,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three):not(:disabled,.micl-list-item--disabled) input[type=checkbox]:not(:disabled):active.micl-switch::after{border-color:rgba(0,0,0,0)}.micl-list-item-one{min-block-size:var(--md-comp-list-item-one-line-container-height, 56px)}.micl-list-item-two{min-block-size:var(--md-comp-list-item-two-line-container-height, 72px)}.micl-list-item-two .micl-list-item__supporting-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.micl-list-item-three{min-block-size:var(--md-comp-list-item-three-line-container-height, 88px);align-items:flex-start}.micl-list-item-three .micl-list-item__supporting-text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three) input[type=checkbox].micl-checkbox{block-size:24px;min-block-size:24px;inline-size:24px;min-inline-size:24px}.micl-list-item__icon{min-inline-size:var(--md-comp-list-item-leading-icon-expressive-size, 20px);font-size:var(--md-comp-list-item-leading-icon-expressive-size, 20px);font-variation-settings:"FILL" 0;color:var(--_leading-icon-color);transition:font-variation-settings var(--md-comp-list-motion-duration) linear}.micl-list-item__icon.micl-list-item__icon--expander{transform:rotate(0deg);transition:transform var(--md-comp-list-motion-duration) linear}.micl-list-item__text~.micl-list-item__icon{min-inline-size:var(--md-comp-list-item-trailing-icon-expressive-size, 20px);font-size:var(--md-comp-list-item-trailing-icon-expressive-size, 20px);color:var(--_trailing-icon-color)}.micl-list-item__avatar{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking);display:flex;align-items:center;justify-content:center;block-size:var(--md-comp-list-item-leading-avatar-size, 40px);min-inline-size:var(--md-comp-list-item-leading-avatar-size, 40px);border-radius:var(--md-comp-list-item-leading-avatar-shape, var(--md-sys-shape-corner-full, 50%));color:var(--md-comp-list-item-leading-avatar-label-color, var(--md-sys-color-on-primary-container));background-color:var(--md-comp-list-item-leading-avatar-color, var(--md-sys-color-primary-container))}.micl-list-item__image{align-self:stretch;display:inline-block;max-block-size:var(--md-comp-list-item-leading-image-height, 56px);inline-size:var(--md-comp-list-item-leading-image-width, 56px);max-inline-size:var(--md-comp-list-item-leading-image-width, 56px);min-inline-size:var(--md-comp-list-item-leading-image-width, 56px);border-radius:var(--md-comp-list-item-leading-image-expressive-shape, var(--md-sys-shape-corner-small, 8px));background-position:center;background-repeat:no-repeat;background-size:cover}.micl-list-item__thumbnail{align-self:stretch;display:inline-block;max-block-size:var(--md-comp-list-item-leading-video-height, 56px);inline-size:var(--md-comp-list-item-leading-video-width, 100px);max-inline-size:var(--md-comp-list-item-leading-video-width, 100px);min-inline-size:var(--md-comp-list-item-leading-video-width, 100px);border-radius:var(--md-comp-list-item-leading-video-shape, var(--md-sys-shape-corner-small, 8px));background-position:center;background-repeat:no-repeat;background-size:cover}.micl-list-item__text{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);display:flex;flex-direction:column;flex-basis:100%;min-inline-size:0;text-align:start;color:var(--_headline-color)}.micl-list-item__text .micl-list-item__overline{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking);color:var(--_overline-color)}.micl-list-item__text .micl-list-item__headline{color:var(--_headline-color)}.micl-list-item__text::after,.micl-list-item__text .micl-list-item__supporting-text{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking);color:var(--_supporting-text-color)}.micl-list-item__trailing-text{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking);color:var(--_trailing-text-color)}.micl-list details[open] .micl-list-item__icon--expander:dir(rtl){transform:rotate(-180deg)}
|
package/dist/list.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={56(e,t,n){const o=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},r=()=>Object.keys(o.map).join(","),i=e=>Object.entries(o.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],c=e=>{const t=i(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},l=e=>{const t=i(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},a=e=>{const t=r();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const o=i(n),c=e.type;o&&"function"==typeof o.component[c]&&o.component[c]?.(e)},s=()=>{o.activated||(o.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=r();t&&e.matches(t)&&c(e),t&&e.querySelectorAll(t).forEach(c)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=r();t&&e.matches(t)&&l(e),(e=>{const t=r();t&&e.querySelectorAll(t).forEach(l)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=r();t&&e.querySelectorAll(t).forEach(c),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{o.rippled.has(e)||"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&(e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();const n=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-n.left)/n.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-n.top)/n.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const o=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",o))};e.addEventListener("animationend",o)}),o.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())})(document),document.addEventListener("change",a),document.addEventListener("input",a),document.addEventListener("keydown",a))},d=()=>{document.removeEventListener("DOMContentLoaded",d),s()};"loading"!==document.readyState?s():document.addEventListener("DOMContentLoaded",d),n.d(t,["register",0,(e,t,n)=>(o.map[e]={component:t,type:n},o.activated&&document.querySelectorAll(e).forEach(c),t)])}};const t={};function n(o){const r=t[o];if(void 0!==r)return r.exports;const i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var o=0;o<t.length;){var r=t[o++],i=t[o++];n.o(e,r)?0===i&&o++:0===i?Object.defineProperty(e,r,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,r,{enumerable:!0,get:i})}else for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let o={};n.r(o);var r=n(56);const i=".micl-list",c=e=>e?.matches(":has(input[type=checkbox]:checked)"),l=(0,r.register)(i,{keydown(e){const t=e.target;if(!(e instanceof KeyboardEvent&&t?.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const n=t.parentElement;if(!n)return;const o=n instanceof HTMLDetailsElement;let r=[];if(o?r=Array.from(n.parentElement?.children||[]).map(e=>e.querySelector(":scope > summary")).filter(Boolean):["UL","OL"].includes(n.tagName)&&(r=Array.from(n.children).filter(e=>e instanceof HTMLLIElement&&"separator"!==e.getAttribute("role"))),r=r.filter(e=>!(e=>e?.classList.contains("micl-list-item--disabled"))(e)),!r.length)return;const i=r.indexOf(t);if(-1===i)return;let l=i;switch(e.key){case"ArrowDown":e.preventDefault(),l=(i+1)%r.length;break;case"ArrowUp":e.preventDefault(),l=(i-1+r.length)%r.length;break;case"Tab":if(!o){const e=r.findIndex(c);l=-1===e?0:e}break;case" ":case"Enter":if(o)break;" "===e.key&&e.preventDefault();const n=t.querySelector("input[type=checkbox], a[href], button");n instanceof HTMLInputElement?(n.checked=!n.checked,n.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))):n?.click()}l!==i&&(o||(t.setAttribute("tabindex","-1"),r[l].setAttribute("tabindex","0")),r[l].focus())},initialize(e){e.dataset.miclinitialized||(e.dataset.miclinitialized="1",e.querySelectorAll(":scope > details > summary.micl-list-item--disabled").forEach(e=>e.setAttribute("tabindex","-1")),e.querySelector('li[tabindex="0"]')&&e.querySelectorAll('li:not([role="separator"])').forEach(e=>{"0"!==e.getAttribute("tabindex")&&e.setAttribute("tabindex","-1"),e.querySelectorAll("a, button, input").forEach(e=>e.setAttribute("tabindex","-1")),(e=>e?.matches(":has(input[type=checkbox])"))(e)&&(e.setAttribute("role","option"),e.parentElement?.setAttribute("role","listbox"))}))}},HTMLElement);return n.d(o,["default",0,l,"listSelector",0,i]),o})());
|
package/dist/menu.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-sys-icon-size: 24px;--md-sys-padding-xxs: 4px;--md-sys-padding-xs: 8px;--md-sys-padding-s: 12px;--md-sys-padding-m: 16px;--md-sys-padding-l: 20px;--md-sys-padding-xl: 24px;--md-sys-padding-xxl: 28px}.micl-hidden{display:none !important}.micl-no-transition{transition:none !important}.micl-flex--vcenter{display:flex;flex-direction:row;align-items:center}.micl-grid-field,.micl-grid-iconfield{box-sizing:border-box;display:grid;row-gap:var(--md-sys-padding-xl, 24px)}.micl-grid-iconfield{grid-template-columns:48px 1fr}.micl-grid-iconfield__icon{grid-column:1;margin-block-start:.6rem}.micl-grid-iconfield__field{grid-column:2}.micl-link{display:flex;align-items:center;justify-content:center;text-decoration:none}@property --micl-ripple{syntax:"<integer>";inherits:false;initial-value:0}@property --micl-x{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-y{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-width{syntax:"<length>";inherits:true;initial-value:0px}@property --micl-height{syntax:"<length>";inherits:true;initial-value:0px}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-inner-offset: -3px}:root{--md-sys-state-backdrop-opacity: 32%}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:root{--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem}:root{--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem}:root{--md-comp-menu-width-max: 320px;--md-comp-menu-width-min: 112px}.micl-menu[popover],select{--md-comp-menu-motion-effects: cubic-bezier(0.31, 0.94, 0.34, 1);--md-comp-menu-motion-effects-duration: 200ms;--md-comp-menu-motion-effects-duration-reverse: 200ms;--md-comp-menu-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-menu-motion-spatial-duration: 500ms;--md-comp-menu-motion-spatial-duration-reverse: 350ms;--md-comp-list-container-shape: var(--md-comp-menu-active-container-shape, var(--md-comp-menu-container-shape, var(--md-sys-shape-corner-large, 16px)));--md-comp-list-item-container-expressive-shape: var(--md-comp-menu-item-shape, var(--md-sys-shape-corner-small, 8px));--md-comp-list-item-container-selected-expressive-shape: var(--md-comp-menu-item-selected-shape, var(--md-sys-shape-corner-large, 16px));--md-comp-list-item-between-space: 12px;--md-comp-list-item-leading-space: calc(var(--md-comp-menu-item-leading-space, 16px) - 4px);--md-comp-list-item-leading-icon-expressive-size: var(--md-comp-menu-item-leading-icon-size, 20px);--md-comp-list-item-trailing-icon-expressive-size: var(--md-comp-menu-item-trailing-icon-size, 20px);--md-comp-list-item-trailing-space: calc(var(--md-comp-menu-item-trailing-space, 16px) - 4px);--md-comp-list-item-top-space: var(--md-comp-menu-item-top-space, 8px);--md-comp-list-item-bottom-space: var(--md-comp-menu-item-bottom-space, 8px);--md-comp-list-item-one-line-container-height: var(--md-comp-menu-item-height, 44px);--md-comp-list-item-two-line-container-height: var(--md-comp-menu-item-height, 44px);--md-comp-list-item-three-line-container-height: var(--md-comp-menu-item-height, 44px);--md-comp-list-item-focus-indicator-color: var(--md-comp-menu-item-focus-indicator-color, var(--md-sys-color-secondary));--md-comp-list-item-focus-indicator-offset: var(--md-comp-menu-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));--md-comp-list-item-focus-indicator-thickness: var(--md-comp-menu-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px));--md-comp-list-item-container-color: var(--md-comp-menu-standard-menu-item-container-color, var(--md-sys-color-surface-container-low));--md-comp-list-item-label-text-color: var(--md-comp-menu-standard-menu-item-label-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-leading-icon-color: var(--md-comp-menu-standard-menu-item-leading-icon-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-supporting-text-color: var(--md-comp-menu-standard-menu-item-supporting-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-trailing-icon-color: var(--md-comp-menu-standard-menu-item-trailing-icon-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-disabled-label-text-color: var(--md-comp-menu-standard-menu-item-disabled-label-text-color, var(--md-sys-color-on-surface));--md-comp-list-item-disabled-label-text-opacity: var(--md-comp-menu-standard-menu-item-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-disabled-leading-icon-color: var(--md-comp-menu-standard-menu-item-disabled-leading-icon-color, var(--md-sys-color-on-surface));--md-comp-list-item-disabled-leading-icon-opacity: var(--md-comp-menu-standard-menu-item-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-disabled-supporting-text-color: var(--md-comp-menu-standard-menu-item-disabled-supporting-text-color, var(--md-sys-color-on-surface));--md-comp-list-item-disabled-supporting-text-opacity: var(--md-comp-menu-standard-menu-item-disabled-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-disabled-trailing-icon-color: var(--md-comp-menu-standard-menu-item-disabled-trailing-icon-color, var(--md-sys-color-on-surface));--md-comp-list-item-disabled-trailing-icon-opacity: var(--md-comp-menu-standard-menu-item-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-disabled-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-disabled-trailing-supporting-text-color, var(--md-sys-color-on-surface));--md-comp-list-item-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-standard-menu-item-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-focus-label-text-color: var(--md-comp-menu-standard-menu-item-focused-label-text-color, var(--md-sys-color-on-surface));--md-comp-list-item-focus-leading-icon-color: var(--md-comp-menu-standard-menu-item-focused-leading-icon-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-focus-state-layer-color: var(--md-comp-menu-standard-menu-item-focused-state-layer-color, var(--md-sys-color-on-surface));--md-comp-list-item-focus-state-layer-opacity: var(--md-comp-menu-standard-menu-item-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));--md-comp-list-item-focus-supporting-text-color: var(--md-comp-menu-standard-menu-item-focused-supporting-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-focus-trailing-icon-color: var(--md-comp-menu-standard-menu-item-focused-trailing-icon-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-focus-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-focused-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-hover-label-text-color: var(--md-comp-menu-standard-menu-item-hovered-label-text-color, var(--md-sys-color-on-surface));--md-comp-list-item-hover-leading-icon-color: var(--md-comp-menu-standard-menu-item-hovered-leading-icon-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-hover-state-layer-color: var(--md-comp-menu-standard-menu-item-hovered-state-layer-color, var(--md-sys-color-on-surface));--md-comp-list-item-hover-state-layer-opacity: var(--md-comp-menu-standard-menu-item-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));--md-comp-list-item-hover-supporting-text-color: var(--md-comp-menu-standard-menu-item-hovered-supporting-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-hover-trailing-icon-color: var(--md-comp-menu-standard-menu-item-hovered-trailing-icon-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-hover-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-hovered-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-pressed-label-text-color: var(--md-comp-menu-standard-menu-item-pressed-label-text-color, var(--md-sys-color-on-surface));--md-comp-list-item-pressed-leading-icon-color: var(--md-comp-menu-standard-menu-item-pressed-leading-icon-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-pressed-state-layer-color: var(--md-comp-menu-standard-menu-item-pressed-state-layer-color, var(--md-sys-color-on-surface));--md-comp-list-item-pressed-state-layer-opacity: var(--md-comp-menu-standard-menu-item-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));--md-comp-list-item-pressed-supporting-text-color: var(--md-comp-menu-standard-menu-item-pressed-supporting-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-pressed-trailing-icon-color: var(--md-comp-menu-standard-menu-item-pressed-trailing-icon-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-pressed-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-pressed-trailing-supporting-text-color, var(--md-sys-color-on-surface-variant));--md-comp-list-item-selected-container-color: var(--md-comp-menu-standard-menu-item-selected-container-color, var(--md-sys-color-tertiary-container));--md-comp-list-item-selected-label-text-color: var(--md-comp-menu-standard-menu-item-selected-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-leading-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-trailing-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-disabled-container-color: var(--md-comp-menu-standard-menu-item-selected-disabled-container-color, var(--md-sys-color-tertiary-container));--md-comp-list-item-selected-disabled-container-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-disabled-label-text-color: var(--md-comp-menu-standard-menu-item-selected-disabled-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-disabled-label-text-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-disabled-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-disabled-leading-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-disabled-leading-icon-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-disabled-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-disabled-trailing-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-disabled-trailing-icon-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-disabled-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-disabled-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-focus-label-text-color: var(--md-comp-menu-standard-menu-item-selected-focused-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-focus-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-focused-leading-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-focus-state-layer-color: var(--md-comp-menu-standard-menu-item-selected-focused-state-layer-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-focus-state-layer-opacity: var(--md-comp-menu-standard-menu-item-selected-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));--md-comp-list-item-selected-focus-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-focused-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-focus-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-focused-trailing-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-focus-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-focused-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-hover-label-text-color: var(--md-comp-menu-standard-menu-item-selected-hovered-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-hover-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-hovered-leading-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-hover-state-layer-color: var(--md-comp-menu-standard-menu-item-selected-hovered-state-layer-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-hover-state-layer-opacity: var(--md-comp-menu-standard-menu-item-selected-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));--md-comp-list-item-selected-hover-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-hovered-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-hover-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-hovered-trailing-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-hover-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-hovered-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-pressed-label-text-color: var(--md-comp-menu-standard-menu-item-selected-pressed-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-pressed-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-pressed-leading-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-pressed-state-layer-color: var(--md-comp-menu-standard-menu-item-selected-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-pressed-state-layer-opacity: var(--md-comp-menu-standard-menu-item-selected-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));--md-comp-list-item-selected-pressed-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-pressed-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-pressed-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-pressed-trailing-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-pressed-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-pressed-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container))}.micl-menu[popover] .micl-menu__section,select .micl-menu__section{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking);padding-block:var(--md-comp-menu-section-label-top-space, 8px) var(--md-comp-menu-section-label-bottom-space, 8px);padding-inline:var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);color:var(--md-comp-menu-standard-section-label-text-color, var(--md-sys-color-on-surface-variant))}.micl-menu[popover].micl-menu--vibrant .micl-menu__section,select.micl-menu--vibrant .micl-menu__section{color:var(--md-comp-menu-vibrant-section-label-text-color, var(--md-sys-color-on-tertiary-container))}.micl-menu[popover] .micl-list-item__text,select .micl-list-item__text{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.micl-menu[popover] .micl-list-item__text .micl-list-item__supporting-text,select .micl-list-item__text .micl-list-item__supporting-text{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.micl-menu[popover] .micl-list-item__trailing-text,select .micl-list-item__trailing-text{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.micl-menu[popover]{display:flex;flex-direction:column;position:absolute;inset:unset;inset-block-start:anchor(end);inset-inline-start:anchor(start);position-try-order:most-block-size;position-try-fallbacks:flip-block,flip-inline;min-inline-size:var(--md-comp-menu-width-min, 112px);max-inline-size:var(--md-comp-menu-width-max, 320px);gap:var(--md-comp-menu-gap, 2px);padding:0;border:none;outline:none;background-color:rgba(0,0,0,0);opacity:0;overflow:visible;transform:scaleY(0);transform-origin:center top;transition:opacity var(--md-comp-menu-motion-spatial-duration-reverse) linear,transform var(--md-comp-menu-motion-spatial-duration-reverse) var(--md-comp-menu-motion-spatial),overlay var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete,display var(--md-comp-menu-motion-spatial-duration-reverse) linear allow-discrete}.micl-menu[popover]:popover-open{opacity:1;transform:scaleY(1);transition:opacity var(--md-comp-menu-motion-spatial-duration) cubic-bezier(0.05, 0.7, 0.1, 1),transform var(--md-comp-menu-motion-spatial-duration) var(--md-comp-menu-motion-spatial),overlay var(--md-comp-menu-motion-spatial-duration) linear allow-discrete,display var(--md-comp-menu-motion-spatial-duration) linear allow-discrete}@starting-style{.micl-menu[popover]:popover-open{opacity:0;transform:scaleY(0)}}.micl-menu[popover]:popover-open::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{.micl-menu[popover]:popover-open::backdrop{background-color:rgba(0,0,0,0)}}.micl-menu[popover]::backdrop{background-color:rgba(0,0,0,0);transition:background-color var(--md-comp-menu-motion-effects-duration) linear,overlay var(--md-comp-menu-motion-effects-duration) linear allow-discrete,display var(--md-comp-menu-motion-effects-duration) linear allow-discrete}.micl-menu[popover] .micl-list{padding:var(--md-comp-menu-group-padding, 4px) 4px;row-gap:2px;background-color:var(--md-comp-menu-standard-container-color, var(--md-sys-color-surface-container-low));box-shadow:var(--md-comp-menu-container-elevation, var(--md-sys-elevation-level2));transition:border-radius var(--md-comp-menu-motion-effects-duration-reverse) linear}.micl-menu[popover] .micl-list+.micl-list{border-start-start-radius:var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));border-start-end-radius:var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px))}.micl-menu[popover] .micl-list:has(+.micl-list){border-end-start-radius:var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));border-end-end-radius:var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px))}.micl-menu[popover] .micl-list :is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>.micl-menu[popover]{transform:scaleX(0)}.micl-menu[popover] .micl-list :is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>.micl-menu[popover]:popover-open{transform:scaleX(1)}@starting-style{.micl-menu[popover] .micl-list :is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>.micl-menu[popover]:popover-open{transform:scaleX(0)}}.micl-menu[popover] .micl-list :is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>.micl-menu[popover]:popover-open::backdrop{background-color:rgba(0,0,0,0)}.micl-menu[popover]:has(.micl-menu:popover-open)>.micl-list{--md-comp-list-container-shape: var(--md-comp-menu-inactive-container-shape, var(--md-sys-shape-corner-small, 8px))}.micl-menu[popover].micl-menu--vibrant>.micl-list{--md-comp-list-item-container-color: var(--md-comp-menu-vibrant-menu-item-container-color, var(--md-sys-color-tertiary-container));--md-comp-list-item-label-text-color: var(--md-comp-menu-vibrant-menu-item-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-leading-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-trailing-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-disabled-label-text-color: var(--md-comp-menu-vibrant-menu-item-disabled-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-disabled-label-text-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-disabled-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-disabled-leading-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-disabled-leading-icon-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-disabled-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-disabled-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-disabled-supporting-text-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-disabled-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-disabled-trailing-icon-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-disabled-trailing-icon-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-disabled-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-disabled-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-focus-label-text-color: var(--md-comp-menu-vibrant-menu-item-focused-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-focus-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-focused-leading-icon-color, var(--md-sys-color-tertiary));--md-comp-list-item-focus-state-layer-color: var(--md-comp-menu-vibrant-menu-item-focused-state-layer-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-focus-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));--md-comp-list-item-focus-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-focused-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-focus-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-focused-trailing-icon-color, var(--md-sys-color-tertiary));--md-comp-list-item-focus-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-focused-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-hover-label-text-color: var(--md-comp-menu-vibrant-menu-item-hovered-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-hover-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-hovered-leading-icon-color, var(--md-sys-color-tertiary));--md-comp-list-item-hover-state-layer-color: var(--md-comp-menu-vibrant-menu-item-hovered-state-layer-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-hover-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));--md-comp-list-item-hover-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-hovered-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-hover-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-hovered-trailing-icon-color, var(--md-sys-color-tertiary));--md-comp-list-item-hover-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-hovered-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-pressed-label-text-color: var(--md-comp-menu-vibrant-menu-item-pressed-label-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-pressed-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-pressed-leading-icon-color, var(--md-sys-color-tertiary));--md-comp-list-item-pressed-state-layer-color: var(--md-comp-menu-vibrant-menu-item-pressed-state-layer-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-pressed-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));--md-comp-list-item-pressed-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-pressed-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-pressed-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-pressed-trailing-icon-color, var(--md-sys-color-tertiary));--md-comp-list-item-pressed-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-pressed-trailing-supporting-text-color, var(--md-sys-color-on-tertiary-container));--md-comp-list-item-selected-container-color: var(--md-comp-menu-vibrant-menu-item-selected-container-color, var(--md-sys-color-tertiary));--md-comp-list-item-selected-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-label-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-leading-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-supporting-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-trailing-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-trailing-supporting-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-disabled-container-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-container-color, var(--md-sys-color-tertiary));--md-comp-list-item-selected-disabled-container-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-container-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-disabled-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-label-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-disabled-label-text-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-label-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-disabled-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-leading-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-disabled-leading-icon-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-leading-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-disabled-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-trailing-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-disabled-trailing-icon-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-trailing-icon-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-disabled-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-trailing-supporting-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-trailing-supporting-text-opacity, var(--md-sys-state-disabled-state-layer-opacity, 38%));--md-comp-list-item-selected-focus-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-label-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-focus-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-leading-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-focus-state-layer-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-state-layer-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-focus-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-selected-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));--md-comp-list-item-selected-focus-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-supporting-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-focus-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-trailing-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-focus-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-trailing-supporting-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-hover-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-label-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-hover-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-leading-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-hover-state-layer-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-state-layer-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-hover-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-selected-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));--md-comp-list-item-selected-hover-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-supporting-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-hover-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-trailing-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-hover-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-trailing-supporting-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-pressed-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-label-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-pressed-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-leading-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-pressed-state-layer-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-state-layer-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-pressed-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-selected-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));--md-comp-list-item-selected-pressed-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-supporting-text-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-pressed-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-trailing-icon-color, var(--md-sys-color-on-tertiary));--md-comp-list-item-selected-pressed-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-trailing-supporting-text-color, var(--md-sys-color-on-tertiary));background-color:var(--md-comp-menu-vibrant-container-color, var(--md-sys-color-tertiary-container))}[dir=rtl] .micl-menu[popover]>.micl-list button[popovertarget] .micl-list-item__icon{transform:rotate(180deg)}
|
|
1
|
+
:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-inner-offset: -3px}:root{--md-sys-state-backdrop-opacity: 32%}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:root{--md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-small-size: 0.6875rem;--md-sys-typescale-label-small-line-height: 1rem;--md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-small-tracking: 0.03125rem}:root{--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem}.micl-menu[popover],select{--md-comp-menu-motion-effects: cubic-bezier(0.31, 0.94, 0.34, 1);--md-comp-menu-motion-effects-duration: 200ms;--md-comp-menu-motion-effects-duration-reverse: 200ms;--md-comp-menu-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-menu-motion-spatial-duration: 500ms;--md-comp-menu-motion-spatial-duration-reverse: 350ms;--md-comp-list-container-shape: var(--md-comp-menu-active-container-shape, var(--md-comp-menu-container-shape, var(--md-sys-shape-corner-large, 16px)));--md-comp-list-item-container-expressive-shape: var(--md-comp-menu-item-shape, var(--md-sys-shape-corner-small, 8px));--md-comp-list-item-container-selected-expressive-shape: var(--md-comp-menu-item-selected-shape, var(--md-sys-shape-corner-large, 16px));--md-comp-list-item-between-space: 12px;--md-comp-list-item-leading-space: calc(var(--md-comp-menu-item-leading-space, 16px) - 4px);--md-comp-list-item-leading-icon-expressive-size: var(--md-comp-menu-item-leading-icon-size, 20px);--md-comp-list-item-trailing-icon-expressive-size: var(--md-comp-menu-item-trailing-icon-size, 20px);--md-comp-list-item-trailing-space: calc(var(--md-comp-menu-item-trailing-space, 16px) - 4px);--md-comp-list-item-top-space: var(--md-comp-menu-item-top-space, 8px);--md-comp-list-item-bottom-space: var(--md-comp-menu-item-bottom-space, 8px);--md-comp-list-item-one-line-container-height: var(--md-comp-menu-item-height, 44px);--md-comp-list-item-two-line-container-height: var(--md-comp-menu-item-height, 44px);--md-comp-list-item-three-line-container-height: var(--md-comp-menu-item-height, 44px);--md-comp-list-item-focus-indicator-color: var(--md-comp-menu-item-focus-indicator-color, var(--md-sys-color-secondary));--md-comp-list-item-focus-indicator-offset: var(--md-comp-menu-item-focus-indicator-offset, var(--md-sys-state-focus-indicator-inner-offset, -3px));--md-comp-list-item-focus-indicator-thickness: var(--md-comp-menu-item-focus-indicator-thickness, var(--md-sys-state-focus-indicator-thickness, 3px));--_menu-item-bg: var(--md-sys-color-surface-container-low);--_menu-on: var(--md-sys-color-on-surface-variant);--_menu-on-strong: var(--md-sys-color-on-surface);--_menu-icon-active: var(--md-sys-color-on-surface-variant);--_menu-selected-bg: var(--md-sys-color-tertiary-container);--_menu-on-selected: var(--md-sys-color-on-tertiary-container);--_menu-do: var(--md-sys-state-disabled-state-layer-opacity, 38%);--md-comp-list-item-container-color: var(--md-comp-menu-standard-menu-item-container-color, var(--_menu-item-bg));--md-comp-list-item-label-text-color: var(--md-comp-menu-standard-menu-item-label-text-color, var(--_menu-on));--md-comp-list-item-leading-icon-color: var(--md-comp-menu-standard-menu-item-leading-icon-color, var(--_menu-on));--md-comp-list-item-supporting-text-color: var(--md-comp-menu-standard-menu-item-supporting-text-color, var(--_menu-on));--md-comp-list-item-trailing-icon-color: var(--md-comp-menu-standard-menu-item-trailing-icon-color, var(--_menu-on));--md-comp-list-item-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-trailing-supporting-text-color, var(--_menu-on));--md-comp-list-item-disabled-label-text-color: var(--md-comp-menu-standard-menu-item-disabled-label-text-color, var(--_menu-on-strong));--md-comp-list-item-disabled-label-text-opacity: var(--md-comp-menu-standard-menu-item-disabled-label-text-opacity, var(--_menu-do));--md-comp-list-item-disabled-leading-icon-color: var(--md-comp-menu-standard-menu-item-disabled-leading-icon-color, var(--_menu-on-strong));--md-comp-list-item-disabled-leading-icon-opacity: var(--md-comp-menu-standard-menu-item-disabled-leading-icon-opacity, var(--_menu-do));--md-comp-list-item-disabled-supporting-text-color: var(--md-comp-menu-standard-menu-item-disabled-supporting-text-color, var(--_menu-on-strong));--md-comp-list-item-disabled-supporting-text-opacity: var(--md-comp-menu-standard-menu-item-disabled-supporting-text-opacity, var(--_menu-do));--md-comp-list-item-disabled-trailing-icon-color: var(--md-comp-menu-standard-menu-item-disabled-trailing-icon-color, var(--_menu-on-strong));--md-comp-list-item-disabled-trailing-icon-opacity: var(--md-comp-menu-standard-menu-item-disabled-trailing-icon-opacity, var(--_menu-do));--md-comp-list-item-disabled-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-disabled-trailing-supporting-text-color, var(--_menu-on-strong));--md-comp-list-item-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-standard-menu-item-disabled-trailing-supporting-text-opacity, var(--_menu-do));--md-comp-list-item-focus-label-text-color: var(--md-comp-menu-standard-menu-item-focused-label-text-color, var(--_menu-on-strong));--md-comp-list-item-focus-leading-icon-color: var(--md-comp-menu-standard-menu-item-focused-leading-icon-color, var(--_menu-icon-active));--md-comp-list-item-focus-state-layer-color: var(--md-comp-menu-standard-menu-item-focused-state-layer-color, var(--_menu-on-strong));--md-comp-list-item-focus-state-layer-opacity: var(--md-comp-menu-standard-menu-item-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));--md-comp-list-item-focus-supporting-text-color: var(--md-comp-menu-standard-menu-item-focused-supporting-text-color, var(--_menu-on));--md-comp-list-item-focus-trailing-icon-color: var(--md-comp-menu-standard-menu-item-focused-trailing-icon-color, var(--_menu-icon-active));--md-comp-list-item-focus-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-focused-trailing-supporting-text-color, var(--_menu-on));--md-comp-list-item-hover-label-text-color: var(--md-comp-menu-standard-menu-item-hovered-label-text-color, var(--_menu-on-strong));--md-comp-list-item-hover-leading-icon-color: var(--md-comp-menu-standard-menu-item-hovered-leading-icon-color, var(--_menu-icon-active));--md-comp-list-item-hover-state-layer-color: var(--md-comp-menu-standard-menu-item-hovered-state-layer-color, var(--_menu-on-strong));--md-comp-list-item-hover-state-layer-opacity: var(--md-comp-menu-standard-menu-item-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));--md-comp-list-item-hover-supporting-text-color: var(--md-comp-menu-standard-menu-item-hovered-supporting-text-color, var(--_menu-on));--md-comp-list-item-hover-trailing-icon-color: var(--md-comp-menu-standard-menu-item-hovered-trailing-icon-color, var(--_menu-icon-active));--md-comp-list-item-hover-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-hovered-trailing-supporting-text-color, var(--_menu-on));--md-comp-list-item-pressed-label-text-color: var(--md-comp-menu-standard-menu-item-pressed-label-text-color, var(--_menu-on-strong));--md-comp-list-item-pressed-leading-icon-color: var(--md-comp-menu-standard-menu-item-pressed-leading-icon-color, var(--_menu-icon-active));--md-comp-list-item-pressed-state-layer-color: var(--md-comp-menu-standard-menu-item-pressed-state-layer-color, var(--_menu-on-strong));--md-comp-list-item-pressed-state-layer-opacity: var(--md-comp-menu-standard-menu-item-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));--md-comp-list-item-pressed-supporting-text-color: var(--md-comp-menu-standard-menu-item-pressed-supporting-text-color, var(--_menu-on));--md-comp-list-item-pressed-trailing-icon-color: var(--md-comp-menu-standard-menu-item-pressed-trailing-icon-color, var(--_menu-icon-active));--md-comp-list-item-pressed-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-pressed-trailing-supporting-text-color, var(--_menu-on));--md-comp-list-item-selected-container-color: var(--md-comp-menu-standard-menu-item-selected-container-color, var(--_menu-selected-bg));--md-comp-list-item-selected-label-text-color: var(--md-comp-menu-standard-menu-item-selected-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-trailing-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-container-color: var(--md-comp-menu-standard-menu-item-selected-disabled-container-color, var(--_menu-selected-bg));--md-comp-list-item-selected-disabled-container-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-container-opacity, var(--_menu-do));--md-comp-list-item-selected-disabled-label-text-color: var(--md-comp-menu-standard-menu-item-selected-disabled-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-label-text-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-label-text-opacity, var(--_menu-do));--md-comp-list-item-selected-disabled-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-disabled-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-leading-icon-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-leading-icon-opacity, var(--_menu-do));--md-comp-list-item-selected-disabled-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-disabled-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-trailing-icon-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-trailing-icon-opacity, var(--_menu-do));--md-comp-list-item-selected-disabled-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-disabled-trailing-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-standard-menu-item-selected-disabled-trailing-supporting-text-opacity, var(--_menu-do));--md-comp-list-item-selected-focus-label-text-color: var(--md-comp-menu-standard-menu-item-selected-focused-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-focused-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-state-layer-color: var(--md-comp-menu-standard-menu-item-selected-focused-state-layer-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-state-layer-opacity: var(--md-comp-menu-standard-menu-item-selected-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));--md-comp-list-item-selected-focus-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-focused-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-focused-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-focused-trailing-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-label-text-color: var(--md-comp-menu-standard-menu-item-selected-hovered-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-hovered-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-state-layer-color: var(--md-comp-menu-standard-menu-item-selected-hovered-state-layer-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-state-layer-opacity: var(--md-comp-menu-standard-menu-item-selected-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));--md-comp-list-item-selected-hover-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-hovered-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-hovered-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-hovered-trailing-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-label-text-color: var(--md-comp-menu-standard-menu-item-selected-pressed-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-leading-icon-color: var(--md-comp-menu-standard-menu-item-selected-pressed-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-state-layer-color: var(--md-comp-menu-standard-menu-item-selected-pressed-state-layer-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-state-layer-opacity: var(--md-comp-menu-standard-menu-item-selected-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));--md-comp-list-item-selected-pressed-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-pressed-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-trailing-icon-color: var(--md-comp-menu-standard-menu-item-selected-pressed-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-trailing-supporting-text-color: var(--md-comp-menu-standard-menu-item-selected-pressed-trailing-supporting-text-color, var(--_menu-on-selected))}.micl-menu[popover] .micl-menu__section,select .micl-menu__section{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking);padding-block:var(--md-comp-menu-section-label-top-space, 8px) var(--md-comp-menu-section-label-bottom-space, 8px);padding-inline:var(--md-comp-list-item-leading-space, 16px) var(--md-comp-list-item-trailing-space, 16px);color:var(--md-comp-menu-standard-section-label-text-color, var(--md-sys-color-on-surface-variant))}.micl-menu[popover].micl-menu--vibrant .micl-menu__section,select.micl-menu--vibrant .micl-menu__section{color:var(--md-comp-menu-vibrant-section-label-text-color, var(--md-sys-color-on-tertiary-container))}.micl-menu[popover] .micl-list-item__text,select .micl-list-item__text{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.micl-menu[popover] .micl-list-item__text .micl-list-item__supporting-text,select .micl-list-item__text .micl-list-item__supporting-text{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.micl-menu[popover] .micl-list-item__trailing-text,select .micl-list-item__trailing-text{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.micl-menu[popover]{flex-direction:column;position:absolute;inset:unset;inset-block-start:anchor(end);inset-inline-start:anchor(start);position-try-order:most-block-size;position-try-fallbacks:flip-block,flip-inline;min-inline-size:var(--md-comp-menu-width-min, 112px);max-inline-size:var(--md-comp-menu-width-max, 320px);gap:var(--md-comp-menu-gap, 2px);padding:0;border:none;outline:none;background-color:rgba(0,0,0,0);--micl-duration: var(--md-comp-menu-motion-spatial-duration-reverse);--micl-easing: linear;--_group-shape: var(--md-comp-menu-group-shape, var(--md-sys-shape-corner-small, 8px));opacity:0;overflow:visible;transform:scaleY(0);transform-origin:center top;transition:opacity var(--micl-duration) var(--micl-easing),transform var(--micl-duration) var(--md-comp-menu-motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}.micl-menu[popover]:popover-open{--micl-duration: var(--md-comp-menu-motion-spatial-duration);--micl-easing: cubic-bezier(0.05, 0.7, 0.1, 1);display:flex;opacity:1;transform:scaleY(1)}@starting-style{.micl-menu[popover]:popover-open{opacity:0;transform:scaleY(0)}}.micl-menu[popover]:popover-open::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{.micl-menu[popover]:popover-open::backdrop{background-color:rgba(0,0,0,0)}}.micl-menu[popover]::backdrop{background-color:rgba(0,0,0,0);transition:background-color var(--md-comp-menu-motion-effects-duration) linear,overlay var(--md-comp-menu-motion-effects-duration) linear allow-discrete,display var(--md-comp-menu-motion-effects-duration) linear allow-discrete}.micl-menu[popover] .micl-list{padding:var(--md-comp-menu-group-padding, 4px) 4px;row-gap:2px;background-color:var(--md-comp-menu-standard-container-color, var(--md-sys-color-surface-container-low));box-shadow:var(--md-comp-menu-container-elevation, var(--md-sys-elevation-level2));transition:border-radius var(--md-comp-menu-motion-effects-duration-reverse) linear}.micl-menu[popover] .micl-list+.micl-list{border-start-start-radius:var(--_group-shape);border-start-end-radius:var(--_group-shape)}.micl-menu[popover] .micl-list:has(+.micl-list){border-end-start-radius:var(--_group-shape);border-end-end-radius:var(--_group-shape)}.micl-menu[popover] .micl-list :is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>.micl-menu[popover]{transform:scaleX(0)}.micl-menu[popover] .micl-list :is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>.micl-menu[popover]:popover-open{transform:scaleX(1)}@starting-style{.micl-menu[popover] .micl-list :is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>.micl-menu[popover]:popover-open{transform:scaleX(0)}}.micl-menu[popover] .micl-list :is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three)>.micl-menu[popover]:popover-open::backdrop{background-color:rgba(0,0,0,0)}.micl-menu[popover]:has(.micl-menu:popover-open)>.micl-list{--md-comp-list-container-shape: var(--md-comp-menu-inactive-container-shape, var(--md-sys-shape-corner-small, 8px))}.micl-menu[popover].micl-menu--vibrant>.micl-list{--_menu-item-bg: var(--md-sys-color-tertiary-container);--_menu-on: var(--md-sys-color-on-tertiary-container);--_menu-on-strong: var(--md-sys-color-on-tertiary-container);--_menu-icon-active: var(--md-sys-color-tertiary);--_menu-selected-bg: var(--md-sys-color-tertiary);--_menu-on-selected: var(--md-sys-color-on-tertiary);--md-comp-list-item-container-color: var(--md-comp-menu-vibrant-menu-item-container-color, var(--_menu-item-bg));--md-comp-list-item-label-text-color: var(--md-comp-menu-vibrant-menu-item-label-text-color, var(--_menu-on));--md-comp-list-item-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-leading-icon-color, var(--_menu-on));--md-comp-list-item-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-supporting-text-color, var(--_menu-on));--md-comp-list-item-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-trailing-icon-color, var(--_menu-on));--md-comp-list-item-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-trailing-supporting-text-color, var(--_menu-on));--md-comp-list-item-disabled-label-text-color: var(--md-comp-menu-vibrant-menu-item-disabled-label-text-color, var(--_menu-on-strong));--md-comp-list-item-disabled-label-text-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-label-text-opacity, var(--_menu-do));--md-comp-list-item-disabled-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-disabled-leading-icon-color, var(--_menu-on-strong));--md-comp-list-item-disabled-leading-icon-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-leading-icon-opacity, var(--_menu-do));--md-comp-list-item-disabled-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-disabled-supporting-text-color, var(--_menu-on-strong));--md-comp-list-item-disabled-supporting-text-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-supporting-text-opacity, var(--_menu-do));--md-comp-list-item-disabled-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-disabled-trailing-icon-color, var(--_menu-on-strong));--md-comp-list-item-disabled-trailing-icon-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-trailing-icon-opacity, var(--_menu-do));--md-comp-list-item-disabled-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-disabled-trailing-supporting-text-color, var(--_menu-on-strong));--md-comp-list-item-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-vibrant-menu-item-disabled-trailing-supporting-text-opacity, var(--_menu-do));--md-comp-list-item-focus-label-text-color: var(--md-comp-menu-vibrant-menu-item-focused-label-text-color, var(--_menu-on-strong));--md-comp-list-item-focus-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-focused-leading-icon-color, var(--_menu-icon-active));--md-comp-list-item-focus-state-layer-color: var(--md-comp-menu-vibrant-menu-item-focused-state-layer-color, var(--_menu-on-strong));--md-comp-list-item-focus-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));--md-comp-list-item-focus-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-focused-supporting-text-color, var(--_menu-on));--md-comp-list-item-focus-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-focused-trailing-icon-color, var(--_menu-icon-active));--md-comp-list-item-focus-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-focused-trailing-supporting-text-color, var(--_menu-on));--md-comp-list-item-hover-label-text-color: var(--md-comp-menu-vibrant-menu-item-hovered-label-text-color, var(--_menu-on-strong));--md-comp-list-item-hover-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-hovered-leading-icon-color, var(--_menu-icon-active));--md-comp-list-item-hover-state-layer-color: var(--md-comp-menu-vibrant-menu-item-hovered-state-layer-color, var(--_menu-on-strong));--md-comp-list-item-hover-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));--md-comp-list-item-hover-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-hovered-supporting-text-color, var(--_menu-on));--md-comp-list-item-hover-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-hovered-trailing-icon-color, var(--_menu-icon-active));--md-comp-list-item-hover-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-hovered-trailing-supporting-text-color, var(--_menu-on));--md-comp-list-item-pressed-label-text-color: var(--md-comp-menu-vibrant-menu-item-pressed-label-text-color, var(--_menu-on-strong));--md-comp-list-item-pressed-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-pressed-leading-icon-color, var(--_menu-icon-active));--md-comp-list-item-pressed-state-layer-color: var(--md-comp-menu-vibrant-menu-item-pressed-state-layer-color, var(--_menu-on-strong));--md-comp-list-item-pressed-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));--md-comp-list-item-pressed-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-pressed-supporting-text-color, var(--_menu-on));--md-comp-list-item-pressed-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-pressed-trailing-icon-color, var(--_menu-icon-active));--md-comp-list-item-pressed-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-pressed-trailing-supporting-text-color, var(--_menu-on));--md-comp-list-item-selected-container-color: var(--md-comp-menu-vibrant-menu-item-selected-container-color, var(--_menu-selected-bg));--md-comp-list-item-selected-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-trailing-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-container-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-container-color, var(--_menu-selected-bg));--md-comp-list-item-selected-disabled-container-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-container-opacity, var(--_menu-do));--md-comp-list-item-selected-disabled-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-label-text-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-label-text-opacity, var(--_menu-do));--md-comp-list-item-selected-disabled-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-leading-icon-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-leading-icon-opacity, var(--_menu-do));--md-comp-list-item-selected-disabled-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-trailing-icon-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-trailing-icon-opacity, var(--_menu-do));--md-comp-list-item-selected-disabled-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-disabled-trailing-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-disabled-trailing-supporting-text-opacity: var(--md-comp-menu-vibrant-menu-item-selected-disabled-trailing-supporting-text-opacity, var(--_menu-do));--md-comp-list-item-selected-focus-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-state-layer-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-state-layer-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-selected-focused-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity, 10%));--md-comp-list-item-selected-focus-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-focus-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-focused-trailing-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-state-layer-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-state-layer-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-selected-hovered-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity, 8%));--md-comp-list-item-selected-hover-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-hover-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-hovered-trailing-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-label-text-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-label-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-leading-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-leading-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-state-layer-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-state-layer-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-state-layer-opacity: var(--md-comp-menu-vibrant-menu-item-selected-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity, 10%));--md-comp-list-item-selected-pressed-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-supporting-text-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-trailing-icon-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-trailing-icon-color, var(--_menu-on-selected));--md-comp-list-item-selected-pressed-trailing-supporting-text-color: var(--md-comp-menu-vibrant-menu-item-selected-pressed-trailing-supporting-text-color, var(--_menu-on-selected));background-color:var(--md-comp-menu-vibrant-container-color, var(--md-sys-color-tertiary-container))}.micl-menu[popover]>.micl-list button[popovertarget] .micl-list-item__icon:dir(rtl){transform:rotate(180deg)}
|
package/dist/menu.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={56(e,t,n){const o=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},r=()=>Object.keys(o.map).join(","),i=e=>Object.entries(o.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],l=e=>{const t=i(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},c=e=>{const t=i(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},s=e=>{const t=r();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const o=i(n),l=e.type;o&&"function"==typeof o.component[l]&&o.component[l]?.(e)},a=()=>{o.activated||(o.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=r();t&&e.matches(t)&&l(e),t&&e.querySelectorAll(t).forEach(l)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=r();t&&e.matches(t)&&c(e),(e=>{const t=r();t&&e.querySelectorAll(t).forEach(c)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=r();t&&e.querySelectorAll(t).forEach(l),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{o.rippled.has(e)||"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&(e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();const n=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-n.left)/n.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-n.top)/n.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const o=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",o))};e.addEventListener("animationend",o)}),o.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())})(document),document.addEventListener("change",s),document.addEventListener("input",s),document.addEventListener("keydown",s))},m=()=>{document.removeEventListener("DOMContentLoaded",m),a()};"loading"!==document.readyState?a():document.addEventListener("DOMContentLoaded",m),n.d(t,["register",0,(e,t,n)=>(o.map[e]={component:t,type:n},o.activated&&document.querySelectorAll(e).forEach(l),t)])}};const t={};function n(o){const r=t[o];if(void 0!==r)return r.exports;const i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var o=0;o<t.length;){var r=t[o++],i=t[o++];n.o(e,r)?0===i&&o++:0===i?Object.defineProperty(e,r,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,r,{enumerable:!0,get:i})}else for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let o={};n.r(o);var r=n(56);const i=".micl-menu[popover]",l=e=>Array.from(e.children).filter(e=>e instanceof HTMLLIElement&&"separator"!==e.getAttribute("role")&&!e.classList.contains("micl-list-item--disabled")&&e.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")),c=(0,r.register)(i,{initialize:e=>{if(!e.matches(".micl-menu[popover]")||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=document.querySelector(`[popovertarget="${e.id}"]`);t&&e.addEventListener("beforetoggle",n=>{if("open"===n.newState){if(!e.style.transformOrigin){const n=t.getBoundingClientRect();e.style.transformOrigin=(n.x+n.width/2>window.innerWidth/2?"right ":"left ")+(n.y+n.height/2>window.innerHeight/2?"bottom":"top")}}else e.style.transformOrigin=((e,t)=>{const n=e.getBoundingClientRect(),o=t.getBoundingClientRect();return(n.x+n.width/2>o.x+o.width/2?"right ":"left ")+(n.y+n.height/2>o.y+o.height/2?"bottom":"top")})(t,e)}),e.addEventListener("keydown",t=>{if("ArrowDown"!==t.key&&"ArrowUp"!==t.key)return;const n=t.target;if(!(n instanceof HTMLElement&&n.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const o=n.parentElement;if(!o?.matches("ul.micl-list"))return;if(o.parentElement!==e)return;const r=Array.from(e.querySelectorAll(":scope > ul.micl-list"));if(r.length<2)return;const i=r.indexOf(o),c=l(o),s=c.indexOf(n);if(-1===s)return;let a;if("ArrowDown"===t.key&&s===c.length-1){const e=(i+1)%r.length;a=l(r[e])[0]}else if("ArrowUp"===t.key&&0===s){const e=(i-1+r.length)%r.length,t=l(r[e]);a=t[t.length-1]}a&&(t.preventDefault(),t.stopPropagation(),n.setAttribute("tabindex","-1"),a.setAttribute("tabindex","0"),a.focus())},!0),e.querySelectorAll(":scope > ul.micl-list > li > button[popovertarget]").forEach(e=>{if(e.popoverTargetElement?.matches(".micl-menu[popover]")){const t=e.popoverTargetElement,n=`--${t.id}`;let o;e.style.setProperty("anchor-name",n),t.style.insetBlockStart=`anchor(${n} start)`,t.style.insetInlineStart=`anchor(${n} end)`;const r=()=>{clearTimeout(o),o=setTimeout(()=>{e.matches(":hover")||t.matches(":hover")||t.hidePopover()},300)};e.addEventListener("mouseenter",()=>{clearTimeout(o),t.showPopover()}),e.addEventListener("mouseleave",r),t.addEventListener("mouseenter",()=>{clearTimeout(o)}),t.addEventListener("mouseleave",r)}})}},HTMLElement);return n.d(o,["default",0,c,"menuSelector",0,i]),o})());
|