material-inspired-component-library 9.0.2 → 9.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -1
- package/components/bottomsheet/index.scss +2 -2
- package/components/button/_shared.scss +3 -3
- package/components/card/README.md +55 -25
- package/components/card/index.scss +57 -38
- package/components/checkbox/README.md +97 -28
- package/components/checkbox/index.scss +29 -19
- package/components/chip/index.scss +6 -6
- package/components/datepicker/index.scss +1 -1
- package/components/iconbutton/index.scss +3 -3
- package/components/list/index.scss +9 -5
- package/components/navigationrail/README.md +10 -9
- package/components/radio/README.md +52 -12
- package/components/radio/index.scss +53 -35
- package/components/stepper/index.scss +1 -1
- package/components/switch/README.md +32 -4
- package/components/switch/index.scss +45 -40
- package/components/timepicker/index.scss +1 -1
- package/dist/appbar.css +1 -1
- package/dist/bottomsheet.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/chip.css +1 -1
- package/dist/components/checkbox/index.d.ts +1 -0
- package/dist/datepicker.css +1 -1
- package/dist/foundations/form/index.js +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/layout.css +1 -1
- package/dist/list.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.d.ts +0 -1
- package/dist/micl.js +1 -1
- package/dist/navigationbar.css +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/navigationrail.js +1 -1
- package/dist/radio.css +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/snackbar.css +1 -1
- package/dist/stepper.css +1 -1
- package/dist/stepper.js +1 -1
- package/dist/switch.css +1 -1
- package/dist/timepicker.css +1 -1
- package/foundations/layout/index.scss +6 -3
- package/package.json +3 -3
- package/{components/checkbox/_label.scss → styles/togglelabel.scss} +11 -3
- package/dist/components/navigationrail/index.d.ts +0 -7
package/dist/chip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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-level0: none}body{--md-sys-elevation-level1: 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 1px 3px 1px}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-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-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-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}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion,.micl-chips .micl-chip-input .micl-chip__primary,.micl-chips .micl-chip-input .micl-chip__remove{--md-comp-button-motion-effects: cubic-bezier(0.42, 1.67, 0.21, 0.9);--md-comp-button-motion-duration: 350ms;--micl-ripple: 1;box-sizing:border-box;position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:none;border-radius:calc(var(--micl-height)/2);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%;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;transition:border-radius var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),box-shadow var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),background-size 0ms,--statelayer-opacity var(--md-comp-button-motion-duration) linear}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input .micl-chip__primary:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input .micl-chip__remove:is(:disabled,:has(input:disabled,>button:disabled)){cursor:default}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon{font-variation-settings:"FILL" 1}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-variation-settings:"FILL" 0;transition:font-variation-settings var(--md-comp-button-motion-duration) linear}.micl-chips .micl-button--toggle.micl-chip-assist:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-filter:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-input:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-suggestion:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle.micl-chip__primary:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle.micl-chip__remove:not([aria-pressed=true]) .micl-button__icon::before{content:attr(data-miclicon)}.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-assist .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-filter .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-input .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-suggestion .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle[aria-pressed=true].micl-chip__primary .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle[aria-pressed=true].micl-chip__remove .micl-button__icon::before{content:attr(data-micliconselected)}.micl-chips .micl-chip-assist::before,.micl-chips .micl-chip-filter::before,.micl-chips .micl-chip-input::before,.micl-chips .micl-chip-suggestion::before{content:"";position:absolute;block-size:var(--md-sys-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px))/2);background-color:rgba(0,0,0,0)}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--micl-width: 32px;--micl-height: 32px;min-inline-size:var(--micl-width);block-size:var(--micl-height);min-block-size:var(--micl-height);column-gap:4px;padding-inline:12px}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-size:20px;inline-size:20px}.micl-chips .micl-chip--elevated{--statelayer-color: var(--md-sys-color-primary);background-color:var(--md-comp-elevated-button-container-color, var(--md-sys-color-surface-container-low));color:var(--md-comp-elevated-button-label-text-color, var(--md-sys-color-primary));box-shadow:var(--md-comp-elevated-button-container-elevation, var(--md-sys-elevation-level1))}.micl-chips .micl-chip--elevated:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-elevated-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-elevated-button-disabled-container-opacity, 10%)));color:var(--md-comp-elevated-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-elevated-button-disabled-label-text-opacity, 38%)));box-shadow:var(--md-sys-elevation-level0)}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level2)}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-elevated-button-selected-container-color, var(--md-sys-color-primary));color:var(--md-comp-elevated-button-selected-label-text-color, var(--md-sys-color-on-primary))}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}.micl-chips .micl-chip-assist:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated){--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-label-text-color, var(--md-sys-color-on-surface-variant));border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant))}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated){background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-outlined-button-disabled-label-text-opacity, 38%)))}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated){border:none;background-color:var(--md-comp-outlined-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-button-selected-disabled-container-opacity, 10%)))}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated){--statelayer-color: var(--md-sys-color-inverse-on-surface);border:none;background-color:var(--md-comp-outlined-button-selected-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-outlined-button-selected-label-text-color, var(--md-sys-color-inverse-on-surface))}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon{font-variation-settings:"FILL" 1}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-full: 50%}: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}.micl-chips{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:none}.micl-chips .micl-chips__headline{padding-block-end:4px;color:var(--md-sys-color-on-surface-variant)}.micl-chips .micl-chip-assist{--micl-chip-statelayer: var(--md-sys-color-on-surface);--micl-chip-label: var(--md-comp-assist-chip-label-text-color, var(--md-sys-color-on-surface));--micl-chip-icon: var(--md-comp-assist-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-assist-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-assist-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-assist-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-assist-chip-elevated-container-color)}.micl-chips .micl-chip-filter{--micl-chip-label: var(--md-comp-filter-chip-label-text-color);--micl-chip-icon: var(--md-comp-filter-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-filter-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-filter-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-filter-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-filter-chip-elevated-container-color)}.micl-chips .micl-chip-suggestion{--micl-chip-label: var(--md-comp-suggestion-chip-label-text-color);--micl-chip-icon: var(--md-comp-suggestion-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-suggestion-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-suggestion-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-suggestion-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-suggestion-chip-elevated-container-color)}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion{--md-comp-elevated-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));--md-comp-outlined-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));--md-comp-elevated-button-disabled-container-opacity: 12%;--md-comp-elevated-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));--md-comp-outlined-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));border-radius:var(--md-sys-shape-corner-small);padding-inline:16px;column-gap:8px}.micl-chips .micl-chip-assist:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-filter:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-input:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-suggestion:has(>.micl-button__icon:first-child){padding-inline-start:8px}.micl-chips .micl-chip-assist:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-filter:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-input:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-suggestion:has(>.micl-button__icon:last-child){padding-inline-end:8px}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-size:18px;inline-size:18px;overflow:hidden;transition:inline-size 150ms cubic-bezier(0.31, 0.94, 0.34, 1)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon{color:var(--micl-chip-icon, var(--md-sys-color-primary))}.micl-chips .micl-chip-assist:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated){--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));--md-comp-outlined-button-outline-color: var(--micl-chip-outline, var(--md-sys-color-outline-variant))}.micl-chips .micl-chip-assist:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-filter:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)){border-color:var(--micl-chip-disabled-outline, rgb(from var(--md-sys-color-on-surface) r g b/12%))}.micl-chips .micl-chip-input{--micl-chip-label: var(--md-comp-input-chip-label-text-color);--micl-chip-icon: var(--md-comp-input-chip-leading-icon-color, currentColor);--micl-chip-outline: var(--md-comp-input-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-input-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-input-chip-disabled-outline-color);padding-inline:0;column-gap:0;cursor:default}.micl-chips .micl-chip-input:has(>.micl-chip__primary:focus-visible){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):has(>.micl-chip__remove:is(:hover,:active)){--statelayer-opacity: 0%}.micl-chips .micl-chip-input:has(>:disabled) .micl-chip__avatar{opacity:var(--md-comp-input-chip-disabled-avatar-opacity, 38%)}.micl-chips .micl-chip-input:has(.micl-chip__avatar){border-radius:calc(var(--micl-height)/2)}.micl-chips .micl-chip-input:has(.micl-chip__avatar) .micl-chip__primary{border-start-start-radius:calc(var(--micl-height)/2 - 1px);border-end-start-radius:calc(var(--micl-height)/2 - 1px)}.micl-chips .micl-chip-input .micl-chip__primary,.micl-chips .micl-chip-input .micl-chip__remove{--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));color:inherit;background-color:rgba(0,0,0,0)}.micl-chips .micl-chip-input .micl-chip__primary{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%);block-size:100%;column-gap:8px;padding-inline:12px 5px;border-start-start-radius:calc(var(--md-sys-shape-corner-small) - 1px);border-end-start-radius:calc(var(--md-sys-shape-corner-small) - 1px);border-start-end-radius:0;border-end-end-radius:0;font:inherit}.micl-chips .micl-chip-input .micl-chip__primary:has(>.micl-button__icon:first-child){padding-inline-start:8px}.micl-chips .micl-chip-input .micl-chip__primary:has(>.micl-chip__avatar:first-child){padding-inline-start:4px}.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)){outline:none}.micl-chips .micl-chip-input .micl-chip__primary::before{content:"";position:absolute;inset-block-start:calc((100% - var(--md-sys-target-size, 48px))/2);inset-inline-start:0;block-size:var(--md-sys-target-size, 48px);inline-size:100%}.micl-chips .micl-chip-input .micl-chip__remove{inline-size:24px;block-size:24px;margin-inline:0 5px;border-radius:50%;font-size:18px}.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)){color:var(--md-comp-input-chip-trailing-icon-color, var(--md-comp-input-chip-leading-icon-color, currentColor))}.micl-chips .micl-chip-input .micl-chip__remove::before{content:"";position:absolute;inset-block-start:calc((100% - var(--md-sys-target-size, 48px))/2);inset-inline-start:calc((100% - var(--md-sys-target-size, 48px))/2);block-size:var(--md-sys-target-size, 48px);inline-size:var(--md-sys-target-size, 48px)}.micl-chips .micl-chip-input .micl-chip__avatar{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking);display:flex;align-items:center;justify-content:center;block-size:var(--md-comp-input-chip-avatar-size, 24px);inline-size:var(--md-comp-input-chip-avatar-size, 24px);border-radius:var(--md-comp-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 50%));color:var(--md-comp-input-chip-avatar-label-color, var(--md-sys-color-on-primary-container));background-color:var(--md-comp-input-chip-avatar-color, var(--md-sys-color-primary-container));object-fit:cover;object-position:center}.micl-chips .micl-chip-filter input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}.micl-chips .micl-chip-filter .micl-button__icon+.micl-button__icon{margin-inline-start:-8px}.micl-chips .micl-chip-filter .micl-button__icon+.micl-button__icon:dir(rtl){margin-inline:0 -8px}.micl-chips .micl-chip-filter:has(input:not(:checked)) .micl-button__icon:has(+input){inline-size:0px}.micl-chips .micl-chip-filter:has(input:checked) .micl-button__icon:not(:has(+input)){inline-size:0px}.micl-chips .micl-chip-filter:has(input:checked){--micl-chip-statelayer: var(--md-sys-color-on-secondary-container);--micl-chip-label: var(--md-comp-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container));--micl-chip-icon: var(--md-comp-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container));--micl-chip-outline: var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container));border-color:rgba(0,0,0,0);background-color:var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container))}.micl-chips .micl-chip-filter:has(input:checked):not(.micl-chip--elevated):not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level1)}.micl-chips .micl-chip-filter:not(.micl-chip--elevated):has(input:disabled:checked){background-color:var(--md-comp-filter-chip-disabled-selected-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filter-chip-disabled-selected-container-opacity, 12%)))}.micl-chips .micl-chip--elevated{--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));--md-comp-elevated-button-container-color: var(--micl-chip-elevated-container, var(--md-sys-color-surface-container-low))}.micl-chips--input{min-inline-size:0;flex-wrap:nowrap;min-inline-size:0;padding:10px 16px 13px;border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant));border-radius:var(--md-sys-shape-corner-small);overflow-x:auto;scrollbar-width:thin}.micl-chips .micl-chip__remove:dir(rtl){margin-inline:5px 0}
|
|
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-level0: none}body{--md-sys-elevation-level1: 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 1px 3px 1px}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-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-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-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}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion,.micl-chips .micl-chip-input .micl-chip__primary,.micl-chips .micl-chip-input .micl-chip__remove{--md-comp-button-motion-effects: cubic-bezier(0.42, 1.67, 0.21, 0.9);--md-comp-button-motion-duration: 350ms;--micl-ripple: 1;box-sizing:border-box;position:relative;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;border:none;border-radius:calc(var(--micl-height)/2);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%;-webkit-tap-highlight-color:rgba(0,0,0,0);cursor:pointer;transition:border-radius var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),box-shadow var(--md-comp-button-motion-duration) var(--md-comp-button-motion-effects),background-size 0ms,--statelayer-opacity var(--md-comp-button-motion-duration) linear}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input .micl-chip__primary:is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input .micl-chip__remove:is(:disabled,:has(input:disabled,>button:disabled)){cursor:default}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):hover,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):hover .micl-button__icon{font-variation-settings:"FILL" 1}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)),.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):active,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)):active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling,.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)).micl-rippling{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-variation-settings:"FILL" 0;transition:font-variation-settings var(--md-comp-button-motion-duration) linear}.micl-chips .micl-button--toggle.micl-chip-assist:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-filter:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-input:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-button--toggle.micl-chip-suggestion:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle.micl-chip__primary:not([aria-pressed=true]) .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle.micl-chip__remove:not([aria-pressed=true]) .micl-button__icon::before{content:attr(data-miclicon)}.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-assist .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-filter .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-input .micl-button__icon::before,.micl-chips .micl-button--toggle[aria-pressed=true].micl-chip-suggestion .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle[aria-pressed=true].micl-chip__primary .micl-button__icon::before,.micl-chips .micl-chip-input .micl-button--toggle[aria-pressed=true].micl-chip__remove .micl-button__icon::before{content:attr(data-micliconselected)}.micl-chips .micl-chip-assist::before,.micl-chips .micl-chip-filter::before,.micl-chips .micl-chip-input::before,.micl-chips .micl-chip-suggestion::before{content:"";position:absolute;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-state-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-state-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-state-target-size, 48px)) - var(--md-sys-state-target-size, 48px))/2);background-color:rgba(0,0,0,0)}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--micl-width: 32px;--micl-height: 32px;min-inline-size:var(--micl-width);block-size:var(--micl-height);min-block-size:var(--micl-height);column-gap:4px;padding-inline:12px}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-size:20px;inline-size:20px}.micl-chips .micl-chip--elevated{--statelayer-color: var(--md-sys-color-primary);background-color:var(--md-comp-elevated-button-container-color, var(--md-sys-color-surface-container-low));color:var(--md-comp-elevated-button-label-text-color, var(--md-sys-color-primary));box-shadow:var(--md-comp-elevated-button-container-elevation, var(--md-sys-elevation-level1))}.micl-chips .micl-chip--elevated:is(:disabled,:has(input:disabled,>button:disabled)){background-color:var(--md-comp-elevated-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-elevated-button-disabled-container-opacity, 10%)));color:var(--md-comp-elevated-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-elevated-button-disabled-label-text-opacity, 38%)));box-shadow:var(--md-sys-elevation-level0)}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level2)}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-elevated-button-selected-container-color, var(--md-sys-color-primary));color:var(--md-comp-elevated-button-selected-label-text-color, var(--md-sys-color-on-primary))}.micl-chips .micl-chip--elevated:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true] .micl-button__icon{font-variation-settings:"FILL" 1}.micl-chips .micl-chip-assist:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated){--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-label-text-color, var(--md-sys-color-on-surface-variant));border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant))}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)):not(.micl-chip--elevated){background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-button-disabled-label-text-color, rgb(from var(--md-sys-color-on-surface-variant) r g b/var(--md-comp-outlined-button-disabled-label-text-opacity, 38%)))}.micl-chips .micl-chip-assist:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-input:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:is(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated){border:none;background-color:var(--md-comp-outlined-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-button-selected-disabled-container-opacity, 10%)))}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated){--statelayer-color: var(--md-sys-color-inverse-on-surface);border:none;background-color:var(--md-comp-outlined-button-selected-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-outlined-button-selected-label-text-color, var(--md-sys-color-inverse-on-surface))}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)).micl-button--toggle[aria-pressed=true]:not(.micl-chip--elevated) .micl-button__icon{font-variation-settings:"FILL" 1}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-full: 50%}: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}.micl-chips{display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;margin:0;padding:0;border:none}.micl-chips .micl-chips__headline{padding-block-end:4px;color:var(--md-sys-color-on-surface-variant)}.micl-chips .micl-chip-assist{--micl-chip-statelayer: var(--md-sys-color-on-surface);--micl-chip-label: var(--md-comp-assist-chip-label-text-color, var(--md-sys-color-on-surface));--micl-chip-icon: var(--md-comp-assist-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-assist-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-assist-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-assist-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-assist-chip-elevated-container-color)}.micl-chips .micl-chip-filter{--micl-chip-label: var(--md-comp-filter-chip-label-text-color);--micl-chip-icon: var(--md-comp-filter-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-filter-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-filter-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-filter-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-filter-chip-elevated-container-color)}.micl-chips .micl-chip-suggestion{--micl-chip-label: var(--md-comp-suggestion-chip-label-text-color);--micl-chip-icon: var(--md-comp-suggestion-chip-leading-icon-color);--micl-chip-outline: var(--md-comp-suggestion-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-suggestion-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-suggestion-chip-disabled-outline-color);--micl-chip-elevated-container: var(--md-comp-suggestion-chip-elevated-container-color)}.micl-chips .micl-chip-assist,.micl-chips .micl-chip-filter,.micl-chips .micl-chip-input,.micl-chips .micl-chip-suggestion{--md-comp-elevated-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));--md-comp-outlined-button-label-text-color: var(--micl-chip-label, var(--md-sys-color-on-surface-variant));--md-comp-elevated-button-disabled-container-opacity: 12%;--md-comp-elevated-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));--md-comp-outlined-button-disabled-label-text-color: var(--micl-chip-disabled-label, rgb(from var(--md-sys-color-on-surface) r g b / 38%));border-radius:var(--md-sys-shape-corner-small);padding-inline:16px;column-gap:8px}.micl-chips .micl-chip-assist:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-filter:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-input:has(>.micl-button__icon:first-child),.micl-chips .micl-chip-suggestion:has(>.micl-button__icon:first-child){padding-inline-start:8px}.micl-chips .micl-chip-assist:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-filter:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-input:has(>.micl-button__icon:last-child),.micl-chips .micl-chip-suggestion:has(>.micl-button__icon:last-child){padding-inline-end:8px}.micl-chips .micl-chip-assist .micl-button__icon,.micl-chips .micl-chip-filter .micl-button__icon,.micl-chips .micl-chip-input .micl-button__icon,.micl-chips .micl-chip-suggestion .micl-button__icon{font-size:18px;inline-size:18px;overflow:hidden;transition:inline-size 150ms cubic-bezier(0.31, 0.94, 0.34, 1)}.micl-chips .micl-chip-assist:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-filter:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon,.micl-chips .micl-chip-suggestion:not(:disabled,:has(input:disabled,>button:disabled)) .micl-button__icon{color:var(--micl-chip-icon, var(--md-sys-color-primary))}.micl-chips .micl-chip-assist:not(.micl-chip--elevated),.micl-chips .micl-chip-filter:not(.micl-chip--elevated),.micl-chips .micl-chip-input:not(.micl-chip--elevated),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated){--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));--md-comp-outlined-button-outline-color: var(--micl-chip-outline, var(--md-sys-color-outline-variant))}.micl-chips .micl-chip-assist:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-filter:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-input:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)),.micl-chips .micl-chip-suggestion:not(.micl-chip--elevated):is(:disabled,:has(input:disabled,>button:disabled)){border-color:var(--micl-chip-disabled-outline, rgb(from var(--md-sys-color-on-surface) r g b/12%))}.micl-chips .micl-chip-input{--micl-chip-label: var(--md-comp-input-chip-label-text-color);--micl-chip-icon: var(--md-comp-input-chip-leading-icon-color, currentColor);--micl-chip-outline: var(--md-comp-input-chip-outline-color);--micl-chip-disabled-label: var(--md-comp-input-chip-disabled-label-text-color);--micl-chip-disabled-outline: var(--md-comp-input-chip-disabled-outline-color);padding-inline:0;column-gap:0;cursor:default}.micl-chips .micl-chip-input:has(>.micl-chip__primary:focus-visible){--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}.micl-chips .micl-chip-input:not(:disabled,:has(input:disabled,>button:disabled)):has(>.micl-chip__remove:is(:hover,:active)){--statelayer-opacity: 0%}.micl-chips .micl-chip-input:has(>:disabled) .micl-chip__avatar{opacity:var(--md-comp-input-chip-disabled-avatar-opacity, 38%)}.micl-chips .micl-chip-input:has(.micl-chip__avatar){border-radius:calc(var(--micl-height)/2)}.micl-chips .micl-chip-input:has(.micl-chip__avatar) .micl-chip__primary{border-start-start-radius:calc(var(--micl-height)/2 - 1px);border-end-start-radius:calc(var(--micl-height)/2 - 1px)}.micl-chips .micl-chip-input .micl-chip__primary,.micl-chips .micl-chip-input .micl-chip__remove{--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));color:inherit;background-color:rgba(0,0,0,0)}.micl-chips .micl-chip-input .micl-chip__primary{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%);block-size:100%;column-gap:8px;padding-inline:12px 5px;border-start-start-radius:calc(var(--md-sys-shape-corner-small) - 1px);border-end-start-radius:calc(var(--md-sys-shape-corner-small) - 1px);border-start-end-radius:0;border-end-end-radius:0;font:inherit}.micl-chips .micl-chip-input .micl-chip__primary:has(>.micl-button__icon:first-child){padding-inline-start:8px}.micl-chips .micl-chip-input .micl-chip__primary:has(>.micl-chip__avatar:first-child){padding-inline-start:4px}.micl-chips .micl-chip-input .micl-chip__primary:not(:disabled,:has(input:disabled,>button:disabled)):is(:focus-visible,:has(input:focus-visible)){outline:none}.micl-chips .micl-chip-input .micl-chip__primary::before{content:"";position:absolute;inset-block-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);inset-inline-start:0;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%}.micl-chips .micl-chip-input .micl-chip__remove{inline-size:24px;block-size:24px;margin-inline:0 5px;border-radius:50%;font-size:18px}.micl-chips .micl-chip-input .micl-chip__remove:not(:disabled,:has(input:disabled,>button:disabled)){color:var(--md-comp-input-chip-trailing-icon-color, var(--md-comp-input-chip-leading-icon-color, currentColor))}.micl-chips .micl-chip-input .micl-chip__remove::before{content:"";position:absolute;inset-block-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);inset-inline-start:calc((100% - var(--md-sys-state-target-size, 48px))/2);block-size:var(--md-sys-state-target-size, 48px);inline-size:var(--md-sys-state-target-size, 48px)}.micl-chips .micl-chip-input .micl-chip__avatar{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking);display:flex;align-items:center;justify-content:center;block-size:var(--md-comp-input-chip-avatar-size, 24px);inline-size:var(--md-comp-input-chip-avatar-size, 24px);border-radius:var(--md-comp-input-chip-avatar-shape, var(--md-sys-shape-corner-full, 50%));color:var(--md-comp-input-chip-avatar-label-color, var(--md-sys-color-on-primary-container));background-color:var(--md-comp-input-chip-avatar-color, var(--md-sys-color-primary-container));object-fit:cover;object-position:center}.micl-chips .micl-chip-filter input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}.micl-chips .micl-chip-filter .micl-button__icon+.micl-button__icon{margin-inline-start:-8px}.micl-chips .micl-chip-filter .micl-button__icon+.micl-button__icon:dir(rtl){margin-inline:0 -8px}.micl-chips .micl-chip-filter:has(input:not(:checked)) .micl-button__icon:has(+input){inline-size:0px}.micl-chips .micl-chip-filter:has(input:checked) .micl-button__icon:not(:has(+input)){inline-size:0px}.micl-chips .micl-chip-filter:has(input:checked){--micl-chip-statelayer: var(--md-sys-color-on-secondary-container);--micl-chip-label: var(--md-comp-filter-chip-selected-label-text-color, var(--md-sys-color-on-secondary-container));--micl-chip-icon: var(--md-comp-filter-chip-selected-leading-icon-color, var(--md-sys-color-on-secondary-container));--micl-chip-outline: var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container));border-color:rgba(0,0,0,0);background-color:var(--md-comp-filter-chip-selected-container-color, var(--md-sys-color-secondary-container))}.micl-chips .micl-chip-filter:has(input:checked):not(.micl-chip--elevated):not(:disabled,:has(input:disabled,>button:disabled)):hover:not(:active){box-shadow:var(--md-sys-elevation-level1)}.micl-chips .micl-chip-filter:not(.micl-chip--elevated):has(input:disabled:checked){background-color:var(--md-comp-filter-chip-disabled-selected-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filter-chip-disabled-selected-container-opacity, 12%)))}.micl-chips .micl-chip--elevated{--statelayer-color: var(--micl-chip-statelayer, var(--md-sys-color-on-surface-variant));--md-comp-elevated-button-container-color: var(--micl-chip-elevated-container, var(--md-sys-color-surface-container-low))}.micl-chips--input{min-inline-size:0;flex-wrap:nowrap;min-inline-size:0;padding:10px 16px 13px;border:1px solid var(--md-comp-outlined-button-outline-color, var(--md-sys-color-outline-variant));border-radius:var(--md-sys-shape-corner-small);overflow-x:auto;scrollbar-width:thin}.micl-chips .micl-chip__remove:dir(rtl){margin-inline:5px 0}
|
package/dist/datepicker.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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}: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-disabled-state-layer-opacity: 38%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0}:root{--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0}: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-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}.micl-datepicker__months,.micl-datepicker__years,.micl-datepicker__input{block-size:fit-content;opacity:1;transition-duration:var(--md-comp-date-picker-motion-spatial-duration)}.micl-datepicker__view-hidden.micl-datepicker__months,.micl-datepicker__view-hidden.micl-datepicker__years,.micl-datepicker__view-hidden.micl-datepicker__input{block-size:0;opacity:0;transition-property:none}.micl-datepicker__months:not(.micl-datepicker__view-hidden),.micl-datepicker__years:not(.micl-datepicker__view-hidden),.micl-datepicker__input:not(.micl-datepicker__view-hidden){transition-behavior:allow-discrete;transition-property:opacity,display,block-size;transition-timing-function:linear}.micl-datepicker__years label,.micl-datepicker__calendar-inner time{--statelayer-color: var(--md-sys-color-on-surface-variant);--statelayer-opacity: 0%;background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;background-clip:content-box;transition:--statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear}.micl-datepicker__years label:hover,.micl-datepicker__calendar-inner time:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity)}.micl-datepicker__years label:focus-visible,.micl-datepicker__calendar-inner time:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity)}.micl-datepicker__years label:active,.micl-datepicker__calendar-inner time:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity)}dialog.micl-dialog.micl-datepicker{--md-comp-date-picker-motion-spatial: cubic-bezier(0.31, 0.94, 0.34, 1);--md-comp-date-picker-motion-spatial-duration: 500ms;--md-comp-date-picker-motion-duration: 200ms;--md-comp-date-picker-motion-duration-reverse: 150ms;--md-comp-date-picker-button-motion-duration: 350ms;--_target: var(--md-sys-target-size, 48px);inline-size:var(--md-comp-date-picker-modal-container-width, 360px)}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)){inline-size:var(--md-comp-date-input-modal-container-width, 328px)}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)) .micl-divider{margin-block:9.5px}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)) .micl-dialog__content{min-block-size:85px}dialog.micl-dialog.micl-datepicker form{background-color:inherit}dialog.micl-dialog.micl-datepicker .micl-dialog__headline{display:grid;gap:0;grid-template-columns:max-content 1fr var(--_target);grid-template-areas:"sup sup sup" "close act act" "close head mode" "div div div" "ysel ysel msel";padding-inline-end:12px;padding-block:16px 4px}dialog.micl-dialog.micl-datepicker .micl-dialog__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font);letter-spacing:var(--md-sys-typescale-headline-large-tracking);grid-area:head;margin-block-start:36px;color:var(--md-comp-date-picker-header-headline-color, var(--md-sys-color-on-surface-variant))}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-dialog__supporting-text{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);grid-area:sup}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-divider{grid-area:div;inline-size:calc(100% + 36px);margin-block-start:11.5px;margin-inline:-24px}dialog.micl-dialog.micl-datepicker.micl-datepicker--range .micl-dialog__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);letter-spacing:var(--md-sys-typescale-title-large-tracking);margin-block-start:48px}dialog.micl-dialog.micl-datepicker .micl-dialog__content{display:grid;grid-template-areas:"view";position:relative;inline-size:100%;max-block-size:336px;min-block-size:330px;padding-inline:0;overflow:hidden auto;transition:min-block-size var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial)}dialog.micl-dialog.micl-datepicker .micl-dialog__actions{padding:8px 12px 12px}dialog.micl-dialog.micl-datepicker.micl-dialog--docked{inline-size:var(--md-comp-date-picker-docked-container-width, 360px);border-radius:var(--md-sys-shape-corner-large)}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline{grid-template-areas:"msel ysel";grid-template-columns:1fr 1fr;padding:8px 12px 18px}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading),dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-dialog__supporting-text,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-datepicker__inputmode{display:none}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__actions>button{margin-block:-2px}.micl-datepicker__inputmode{grid-area:mode;align-self:flex-end;justify-self:center}.micl-datepicker__month-selector,.micl-datepicker__year-selector{display:grid;grid-template-rows:var(--_target);align-items:center}.micl-datepicker__month-selector.micl-datepicker__view-hidden,.micl-datepicker__year-selector.micl-datepicker__view-hidden{display:none}.micl-datepicker__month-selector{grid-area:msel;grid-template-areas:"mprev mnext";grid-template-columns:var(--_target) var(--_target);justify-items:flex-end;justify-content:flex-end}.micl-datepicker__month-selector .micl-datepicker__previous{grid-area:mprev}.micl-datepicker__month-selector .micl-datepicker__next{grid-area:mnext}.micl-datepicker__year-selector{grid-area:ysel;grid-template-areas:"yr";grid-template-columns:1fr;justify-items:flex-start;margin-inline-start:-8px}.micl-datepicker__year-selector .micl-datepicker__previous{display:none;grid-area:yprev}.micl-datepicker__year-selector .micl-datepicker__next{display:none;grid-area:ynext}.micl-datepicker__month{grid-area:mon;margin-inline:-12px auto}.micl-datepicker__month-selector .micl-datepicker__month{display:none}.micl-datepicker__year{grid-area:yr}.micl-datepicker__month:not(:disabled),.micl-datepicker__year:not(:disabled){color:var(--md-sys-color-on-surface-variant)}.micl-dialog--docked :is(.micl-datepicker__month-selector,.micl-datepicker__year-selector){grid-template-columns:var(--_target) 1fr var(--_target)}.micl-dialog--docked .micl-datepicker__month-selector{grid-template-areas:"mprev mon mnext"}.micl-dialog--docked .micl-datepicker__month-selector .micl-datepicker__month{display:inline-flex;margin-inline:0}.micl-dialog--docked .micl-datepicker__year-selector{grid-template-areas:"yprev yr ynext"}.micl-dialog--docked .micl-datepicker__year-selector :is(.micl-datepicker__previous,.micl-datepicker__next){display:block}.micl-datepicker__calendars{display:flex;grid-area:view;position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;inline-size:200%;opacity:1;overflow:hidden;transform:translateX(0);transition:transform var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial),opacity var(--md-comp-date-picker-motion-duration-reverse) linear,block-size var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete,display var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete}.micl-datepicker__calendars.micl-datepicker__view-hidden{block-size:0%;opacity:0;transition-property:none}.micl-datepicker__calendars.micl-startleft,.micl-datepicker__calendars.micl-moveright{transform:translateX(0%)}.micl-datepicker__calendars.micl-startright,.micl-datepicker__calendars.micl-moveleft{transform:translateX(-50%)}.micl-datepicker__calendar{flex-shrink:0;block-size:100%;inline-size:50%}.micl-datepicker__calendar-inner{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;display:grid;grid-template-columns:repeat(7, var(--_target));grid-template-rows:40px repeat(6, var(--_target));block-size:100%;inline-size:100%;padding-inline:12px}.micl-datepicker__calendar-inner span,.micl-datepicker__calendar-inner time{box-sizing:border-box;display:inline-flex;justify-content:center;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micl-datepicker__calendar-inner span{color:var(--md-comp-date-picker-weekdays-label-text-color, var(--md-sys-color-on-surface))}.micl-datepicker__calendar-inner time{align-items:center;border:4px solid rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);color:var(--md-comp-date-picker-date-unselected-label-text-color, var(--md-sys-color-on-surface))}.micl-datepicker__calendar-inner time.micl-datepicker__today{outline:1px solid var(--md-comp-date-picker-date-today-container-outline-color, var(--md-sys-color-primary));outline-offset:-5px;color:var(--md-comp-date-picker-date-today-label-text-color, var(--md-sys-color-primary))}.micl-datepicker__calendar-inner time.micl-datepicker__selected{background-color:var(--md-comp-date-picker-date-selected-container-color, var(--md-sys-color-primary));color:var(--md-comp-date-picker-date-selected-label-text-color, var(--md-sys-color-on-primary))}.micl-datepicker__calendar-inner time:is(.micl-datepicker__inrange,.micl-datepicker__range-start,.micl-datepicker__range-end){position:relative}.micl-datepicker__calendar-inner time:is(.micl-datepicker__inrange,.micl-datepicker__range-start,.micl-datepicker__range-end)::before{content:"";position:absolute;z-index:-1;inset-block:0;inset-inline:-4px;background-color:var(--md-comp-date-picker-range-selection-active-indicator-container-color, var(--md-sys-color-secondary-container))}.micl-datepicker__calendar-inner time.micl-datepicker__inrange{color:var(--md-comp-date-picker-selection-date-in-range-label-text-color, var(--md-sys-color-on-secondary-container))}.micl-datepicker__calendar-inner time.micl-datepicker__range-start::before{inset-inline:50% -4px}.micl-datepicker__calendar-inner time.micl-datepicker__range-end::before{inset-inline:-4px 50%}.micl-datepicker__calendar-inner time:is(.micl-datepicker__today,.micl-datepicker__selected):is(:hover,:focus-visible,:active){--statelayer-color: currentColor}.micl-datepicker__calendar-inner time.micl-datepicker__outside{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity))}.micl-datepicker__calendar-inner time:not(.micl-datepicker__outside){cursor:pointer}.micl-datepicker__months,.micl-datepicker__years,.micl-datepicker__input{grid-area:view}.micl-datepicker__months{overflow-y:hidden}.micl-datepicker__months .micl-datepicker__months-inner{block-size:auto;inline-size:100%}.micl-datepicker__months label{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);display:flex;align-items:center;block-size:var(--_target);gap:8px;padding-inline-start:16px;color:var(--md-sys-color-on-surface);cursor:pointer}.micl-datepicker__months label span{visibility:hidden;color:var(--md-sys-color-on-surface)}.micl-datepicker__months label:has(input:checked){background-color:var(--md-sys-color-surface-variant)}.micl-datepicker__months label:has(input:checked) span{visibility:visible}.micl-datepicker__years{overflow-y:hidden}.micl-datepicker__years .micl-datepicker__years-inner{display:flex;flex-wrap:wrap;justify-content:center;block-size:auto;inline-size:100%}.micl-datepicker__years label{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);display:inline-flex;align-items:center;justify-content:center;block-size:36px;inline-size:72px;margin:8px;border:calc((var(--_target) - 36px)/2) solid rgba(0,0,0,0);border-radius:calc(var(--_target)/2);color:var(--md-comp-date-picker-selection-year-unselected-label-text-color, var(--md-sys-color-on-surface-variant));cursor:pointer}.micl-datepicker__years label:has(input:checked){color:var(--md-comp-date-picker-selection-year-selected-label-text-color, var(--md-sys-color-on-primary));background-color:var(--md-comp-date-picker-selection-year-selected-container-color, var(--md-sys-color-primary))}.micl-datepicker__years label:has(input:checked):is(:hover,:focus-visible,:active){--statelayer-color: currentColor}:is(.micl-datepicker__months,.micl-datepicker__years) input[type=radio]{appearance:none;margin:0}.micl-datepicker .micl-datepicker__input{padding-inline:16px;margin-block-end:16px}.micl-datepicker .micl-datepicker__input.micl-datepicker__view-hidden,.micl-datepicker .micl-datepicker__input input[type=date]::-webkit-calendar-picker-indicator,.micl-datepicker .micl-datepicker__input input[type=date]::-webkit-inner-spin-button{display:none}.micl-datepicker--range .micl-datepicker__input{display:flex;column-gap:8px}.micl-datepicker--range .micl-datepicker__input>*{flex:1 1 0;min-inline-size:0}.micl-no-transition{transition:none !important}
|
|
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}: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-disabled-state-layer-opacity: 38%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-large-size: 2rem;--md-sys-typescale-headline-large-line-height: 2.5rem;--md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-large-tracking: 0}:root{--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0}: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-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}.micl-datepicker__months,.micl-datepicker__years,.micl-datepicker__input{block-size:fit-content;opacity:1;transition-duration:var(--md-comp-date-picker-motion-spatial-duration)}.micl-datepicker__view-hidden.micl-datepicker__months,.micl-datepicker__view-hidden.micl-datepicker__years,.micl-datepicker__view-hidden.micl-datepicker__input{block-size:0;opacity:0;transition-property:none}.micl-datepicker__months:not(.micl-datepicker__view-hidden),.micl-datepicker__years:not(.micl-datepicker__view-hidden),.micl-datepicker__input:not(.micl-datepicker__view-hidden){transition-behavior:allow-discrete;transition-property:opacity,display,block-size;transition-timing-function:linear}.micl-datepicker__years label,.micl-datepicker__calendar-inner time{--statelayer-color: var(--md-sys-color-on-surface-variant);--statelayer-opacity: 0%;background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;background-clip:content-box;transition:--statelayer-opacity var(--md-comp-date-picker-button-motion-duration) linear}.micl-datepicker__years label:hover,.micl-datepicker__calendar-inner time:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity)}.micl-datepicker__years label:focus-visible,.micl-datepicker__calendar-inner time:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity)}.micl-datepicker__years label:active,.micl-datepicker__calendar-inner time:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity)}dialog.micl-dialog.micl-datepicker{--md-comp-date-picker-motion-spatial: cubic-bezier(0.31, 0.94, 0.34, 1);--md-comp-date-picker-motion-spatial-duration: 500ms;--md-comp-date-picker-motion-duration: 200ms;--md-comp-date-picker-motion-duration-reverse: 150ms;--md-comp-date-picker-button-motion-duration: 350ms;--_target: var(--md-sys-state-target-size, 48px);inline-size:var(--md-comp-date-picker-modal-container-width, 360px)}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)){inline-size:var(--md-comp-date-input-modal-container-width, 328px)}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)) .micl-divider{margin-block:9.5px}dialog.micl-dialog.micl-datepicker:has(.micl-datepicker__input:not(.micl-datepicker__view-hidden)) .micl-dialog__content{min-block-size:85px}dialog.micl-dialog.micl-datepicker form{background-color:inherit}dialog.micl-dialog.micl-datepicker .micl-dialog__headline{display:grid;gap:0;grid-template-columns:max-content 1fr var(--_target);grid-template-areas:"sup sup sup" "close act act" "close head mode" "div div div" "ysel ysel msel";padding-inline-end:12px;padding-block:16px 4px}dialog.micl-dialog.micl-datepicker .micl-dialog__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-headline-large-weight) var(--md-sys-typescale-headline-large-size)/var(--md-sys-typescale-headline-large-line-height) var(--md-sys-typescale-headline-large-font);letter-spacing:var(--md-sys-typescale-headline-large-tracking);grid-area:head;margin-block-start:36px;color:var(--md-comp-date-picker-header-headline-color, var(--md-sys-color-on-surface-variant))}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-dialog__supporting-text{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);grid-area:sup}dialog.micl-dialog.micl-datepicker .micl-dialog__headline .micl-divider{grid-area:div;inline-size:calc(100% + 36px);margin-block-start:11.5px;margin-inline:-24px}dialog.micl-dialog.micl-datepicker.micl-datepicker--range .micl-dialog__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading){font:var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);letter-spacing:var(--md-sys-typescale-title-large-tracking);margin-block-start:48px}dialog.micl-dialog.micl-datepicker .micl-dialog__content{display:grid;grid-template-areas:"view";position:relative;inline-size:100%;max-block-size:336px;min-block-size:330px;padding-inline:0;overflow:hidden auto;transition:min-block-size var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial)}dialog.micl-dialog.micl-datepicker .micl-dialog__actions{padding:8px 12px 12px}dialog.micl-dialog.micl-datepicker.micl-dialog--docked{inline-size:var(--md-comp-date-picker-docked-container-width, 360px);border-radius:var(--md-sys-shape-corner-large)}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline{grid-template-areas:"msel ysel";grid-template-columns:1fr 1fr;padding:8px 12px 18px}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline :is(h1,h2,h3,h4,h5,h6,.micl-heading),dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-dialog__supporting-text,dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__headline .micl-datepicker__inputmode{display:none}dialog.micl-dialog.micl-datepicker.micl-dialog--docked .micl-dialog__actions>button{margin-block:-2px}.micl-datepicker__inputmode{grid-area:mode;align-self:flex-end;justify-self:center}.micl-datepicker__month-selector,.micl-datepicker__year-selector{display:grid;grid-template-rows:var(--_target);align-items:center}.micl-datepicker__month-selector.micl-datepicker__view-hidden,.micl-datepicker__year-selector.micl-datepicker__view-hidden{display:none}.micl-datepicker__month-selector{grid-area:msel;grid-template-areas:"mprev mnext";grid-template-columns:var(--_target) var(--_target);justify-items:flex-end;justify-content:flex-end}.micl-datepicker__month-selector .micl-datepicker__previous{grid-area:mprev}.micl-datepicker__month-selector .micl-datepicker__next{grid-area:mnext}.micl-datepicker__year-selector{grid-area:ysel;grid-template-areas:"yr";grid-template-columns:1fr;justify-items:flex-start;margin-inline-start:-8px}.micl-datepicker__year-selector .micl-datepicker__previous{display:none;grid-area:yprev}.micl-datepicker__year-selector .micl-datepicker__next{display:none;grid-area:ynext}.micl-datepicker__month{grid-area:mon;margin-inline:-12px auto}.micl-datepicker__month-selector .micl-datepicker__month{display:none}.micl-datepicker__year{grid-area:yr}.micl-datepicker__month:not(:disabled),.micl-datepicker__year:not(:disabled){color:var(--md-sys-color-on-surface-variant)}.micl-dialog--docked :is(.micl-datepicker__month-selector,.micl-datepicker__year-selector){grid-template-columns:var(--_target) 1fr var(--_target)}.micl-dialog--docked .micl-datepicker__month-selector{grid-template-areas:"mprev mon mnext"}.micl-dialog--docked .micl-datepicker__month-selector .micl-datepicker__month{display:inline-flex;margin-inline:0}.micl-dialog--docked .micl-datepicker__year-selector{grid-template-areas:"yprev yr ynext"}.micl-dialog--docked .micl-datepicker__year-selector :is(.micl-datepicker__previous,.micl-datepicker__next){display:block}.micl-datepicker__calendars{display:flex;grid-area:view;position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;inline-size:200%;opacity:1;overflow:hidden;transform:translateX(0);transition:transform var(--md-comp-date-picker-motion-spatial-duration) var(--md-comp-date-picker-motion-spatial),opacity var(--md-comp-date-picker-motion-duration-reverse) linear,block-size var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete,display var(--md-comp-date-picker-motion-duration-reverse) linear allow-discrete}.micl-datepicker__calendars.micl-datepicker__view-hidden{block-size:0%;opacity:0;transition-property:none}.micl-datepicker__calendars.micl-startleft,.micl-datepicker__calendars.micl-moveright{transform:translateX(0%)}.micl-datepicker__calendars.micl-startright,.micl-datepicker__calendars.micl-moveleft{transform:translateX(-50%)}.micl-datepicker__calendar{flex-shrink:0;block-size:100%;inline-size:50%}.micl-datepicker__calendar-inner{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;display:grid;grid-template-columns:repeat(7, var(--_target));grid-template-rows:40px repeat(6, var(--_target));block-size:100%;inline-size:100%;padding-inline:12px}.micl-datepicker__calendar-inner span,.micl-datepicker__calendar-inner time{box-sizing:border-box;display:inline-flex;justify-content:center;border:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micl-datepicker__calendar-inner span{color:var(--md-comp-date-picker-weekdays-label-text-color, var(--md-sys-color-on-surface))}.micl-datepicker__calendar-inner time{align-items:center;border:4px solid rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);color:var(--md-comp-date-picker-date-unselected-label-text-color, var(--md-sys-color-on-surface))}.micl-datepicker__calendar-inner time.micl-datepicker__today{outline:1px solid var(--md-comp-date-picker-date-today-container-outline-color, var(--md-sys-color-primary));outline-offset:-5px;color:var(--md-comp-date-picker-date-today-label-text-color, var(--md-sys-color-primary))}.micl-datepicker__calendar-inner time.micl-datepicker__selected{background-color:var(--md-comp-date-picker-date-selected-container-color, var(--md-sys-color-primary));color:var(--md-comp-date-picker-date-selected-label-text-color, var(--md-sys-color-on-primary))}.micl-datepicker__calendar-inner time:is(.micl-datepicker__inrange,.micl-datepicker__range-start,.micl-datepicker__range-end){position:relative}.micl-datepicker__calendar-inner time:is(.micl-datepicker__inrange,.micl-datepicker__range-start,.micl-datepicker__range-end)::before{content:"";position:absolute;z-index:-1;inset-block:0;inset-inline:-4px;background-color:var(--md-comp-date-picker-range-selection-active-indicator-container-color, var(--md-sys-color-secondary-container))}.micl-datepicker__calendar-inner time.micl-datepicker__inrange{color:var(--md-comp-date-picker-selection-date-in-range-label-text-color, var(--md-sys-color-on-secondary-container))}.micl-datepicker__calendar-inner time.micl-datepicker__range-start::before{inset-inline:50% -4px}.micl-datepicker__calendar-inner time.micl-datepicker__range-end::before{inset-inline:-4px 50%}.micl-datepicker__calendar-inner time:is(.micl-datepicker__today,.micl-datepicker__selected):is(:hover,:focus-visible,:active){--statelayer-color: currentColor}.micl-datepicker__calendar-inner time.micl-datepicker__outside{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity))}.micl-datepicker__calendar-inner time:not(.micl-datepicker__outside){cursor:pointer}.micl-datepicker__months,.micl-datepicker__years,.micl-datepicker__input{grid-area:view}.micl-datepicker__months{overflow-y:hidden}.micl-datepicker__months .micl-datepicker__months-inner{block-size:auto;inline-size:100%}.micl-datepicker__months label{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);display:flex;align-items:center;block-size:var(--_target);gap:8px;padding-inline-start:16px;color:var(--md-sys-color-on-surface);cursor:pointer}.micl-datepicker__months label span{visibility:hidden;color:var(--md-sys-color-on-surface)}.micl-datepicker__months label:has(input:checked){background-color:var(--md-sys-color-surface-variant)}.micl-datepicker__months label:has(input:checked) span{visibility:visible}.micl-datepicker__years{overflow-y:hidden}.micl-datepicker__years .micl-datepicker__years-inner{display:flex;flex-wrap:wrap;justify-content:center;block-size:auto;inline-size:100%}.micl-datepicker__years label{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);display:inline-flex;align-items:center;justify-content:center;block-size:36px;inline-size:72px;margin:8px;border:calc((var(--_target) - 36px)/2) solid rgba(0,0,0,0);border-radius:calc(var(--_target)/2);color:var(--md-comp-date-picker-selection-year-unselected-label-text-color, var(--md-sys-color-on-surface-variant));cursor:pointer}.micl-datepicker__years label:has(input:checked){color:var(--md-comp-date-picker-selection-year-selected-label-text-color, var(--md-sys-color-on-primary));background-color:var(--md-comp-date-picker-selection-year-selected-container-color, var(--md-sys-color-primary))}.micl-datepicker__years label:has(input:checked):is(:hover,:focus-visible,:active){--statelayer-color: currentColor}:is(.micl-datepicker__months,.micl-datepicker__years) input[type=radio]{appearance:none;margin:0}.micl-datepicker .micl-datepicker__input{padding-inline:16px;margin-block-end:16px}.micl-datepicker .micl-datepicker__input.micl-datepicker__view-hidden,.micl-datepicker .micl-datepicker__input input[type=date]::-webkit-calendar-picker-indicator,.micl-datepicker .micl-datepicker__input input[type=date]::-webkit-inner-spin-button{display:none}.micl-datepicker--range .micl-datepicker__input{display:flex;column-gap:8px}.micl-datepicker--range .micl-datepicker__input>*{flex:1 1 0;min-inline-size:0}.micl-no-transition{transition:none !important}
|
|
@@ -1 +1 @@
|
|
|
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";const e={d:(t,a)=>{if(Array.isArray(a))for(var
|
|
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";const e={d:(t,a)=>{if(Array.isArray(a))for(var i=0;i<a.length;){var l=a[i++],n=a[i++];e.o(t,l)?0===n&&i++:0===n?Object.defineProperty(t,l,{enumerable:!0,value:a[i++]}):Object.defineProperty(t,l,{enumerable:!0,get:n})}else for(var l in a)e.o(a,l)&&!e.o(t,l)&&Object.defineProperty(t,l,{enumerable:!0,get:a[l]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)};let t={};const a=e=>"willValidate"in e,i=e=>{const t=e.target;a(t)&&t.setCustomValidity("")},l=e=>{const t=e.dataset.miclvalidateMessage||"";if(t&&e.matches("[data-miclvalidate-checkboxes-name]")){const a=e.dataset.miclvalidateCheckboxesName||"",l=e.dataset.miclvalidateCheckboxesCountEqual||"",n=e.dataset.miclvalidateCheckboxesCountMax||"",o=e.dataset.miclvalidateCheckboxesCountMin||"";if(a&&(l||n||o)){const c=e.querySelectorAll(`input[type="checkbox"][name="${a}"]:checked`).length,s=parseInt(l,10),r=parseInt(n,10),d=parseInt(o,10);let m=!isNaN(s)&&c!=s||!isNaN(r)&&c>r||!isNaN(d)&&c<d;e.setCustomValidity(m?t:"");const f=e.querySelector(`input[type="checkbox"][name="${a}"]`);f&&(f.setCustomValidity(m?t:""),m?f.addEventListener("change",i):f.removeEventListener("change",i))}}},n=(e,t)=>{let i=!1;return e.querySelectorAll("fieldset").forEach(l),Array.from(e.elements).forEach(e=>{if(a(e)&&e.willValidate){e.checkValidity()||(i=!0);let l=(e=>{if(!e.parentElement||!a(e))return!1;let t=!1;return e instanceof HTMLInputElement&&"checkbox"===e.type&&e.classList.contains("micl-checkbox")?t=(e=>(e.classList.toggle("micl-checkbox--error",!!e.validationMessage),!1))(e):(e.parentElement.classList.contains("micl-textfield-outlined")||e.parentElement.classList.contains("micl-textfield-filled"))&&(t=((e,t)=>{e.classList.toggle("micl-textfield--error",!!t);const a=e.querySelector(".micl-textfield__supporting-text");return a&&(t?("micltext"in a.dataset||(a.dataset.micltext=a.textContent),a.textContent=t):"micltext"in a.dataset&&(a.textContent=a.dataset.micltext||"")),!!t&&!!a})(e.parentElement,e.validationMessage)),t})(e);!l&&t&&e.reportValidity()}}),!i},o={validateFieldSet:(e,t)=>(l(e),n(e,t)),validateForm:(e,t)=>n(e,t)};return e.d(t,["default",0,o]),t=t.default,t})());
|
package/dist/iconbutton.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
body{--md-sys-elevation-level0: none}: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-extra-large: 28px}: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-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 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%}}:is(.micl-iconbutton-standard-s,.micl-iconbutton-filled-s,.micl-iconbutton-tonal-s,.micl-iconbutton-outlined-s),:is(.micl-iconbutton-standard-xs,.micl-iconbutton-filled-xs,.micl-iconbutton-tonal-xs,.micl-iconbutton-outlined-xs){position:relative}:is(.micl-iconbutton-standard-s,.micl-iconbutton-filled-s,.micl-iconbutton-tonal-s,.micl-iconbutton-outlined-s)::before,:is(.micl-iconbutton-standard-xs,.micl-iconbutton-filled-xs,.micl-iconbutton-tonal-xs,.micl-iconbutton-outlined-xs)::before{content:"";position:absolute;display:flex;align-items:center;justify-content:center;block-size:var(--md-sys-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-target-size, 48px)) - var(--md-sys-target-size, 48px))/2);background-color:rgba(0,0,0,0)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]){--md-comp-icon-button-motion-effects: cubic-bezier(0.42, 1.67, 0.21, 0.9);--md-comp-icon-button-motion-duration: 350ms;--micl-ripple: 1;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--micl-width);min-inline-size:var(--micl-width);block-size:var(--micl-height);padding:0;border:none;border-radius:var(--md-sys-shape-corner-full);background-color:rgba(0,0,0,0);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%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--md-comp-icon-button-icon-color, var(--md-sys-color-on-surface-variant));font-variation-settings:"FILL" 0;cursor:pointer;transition:border-radius var(--md-comp-icon-button-motion-duration) var(--md-comp-icon-button-motion-effects),font-variation-settings var(--md-comp-icon-button-motion-duration) linear,background-size 0ms,--statelayer-opacity var(--md-comp-icon-button-motion-duration) linear}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):disabled{box-shadow:var(--md-sys-elevation-level0);cursor:default}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled).micl-rippling{animation:micl-ripple var(--md-sys-state-ripple-duration)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):hover:not(:disabled),:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--toggle[aria-pressed=true]{font-variation-settings:"FILL" 1}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--toggle:not([aria-pressed=true])::before{content:attr(data-miclicon)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--toggle[aria-pressed=true]::before{content:attr(data-micliconselected)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--toggle[aria-pressed=true]{border-radius:var(--_shape-toggle)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-iconbutton--narrow{--micl-width: var(--_width-narrow);border-radius:calc(var(--micl-width)/2)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-iconbutton--wide{--micl-width: var(--_width-wide);border-radius:calc(var(--micl-height)/2)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--square{border-radius:var(--_shape-toggle)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--square.micl-button--toggle[aria-pressed=true]{border-radius:var(--md-sys-shape-corner-full)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):active,:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):active.micl-button--square{border-radius:var(--_shape-pressed)}:is(.micl-iconbutton-standard-xs,.micl-iconbutton-filled-xs,.micl-iconbutton-tonal-xs,.micl-iconbutton-outlined-xs){--micl-width: 32px;--micl-height: 32px;--_width-narrow: 28px;--_width-wide: 40px;--_shape-toggle: var(--md-sys-shape-corner-medium);--_shape-pressed: var(--md-sys-shape-corner-small);font-size:20px}:is(.micl-iconbutton-standard-s,.micl-iconbutton-filled-s,.micl-iconbutton-tonal-s,.micl-iconbutton-outlined-s){--micl-width: 40px;--micl-height: 40px;--_width-narrow: 32px;--_width-wide: 52px;--_shape-toggle: var(--md-sys-shape-corner-medium);--_shape-pressed: var(--md-sys-shape-corner-small);font-size:var(--md-sys-icon-size, 24px)}:is(.micl-iconbutton-standard-m,.micl-iconbutton-filled-m,.micl-iconbutton-tonal-m,.micl-iconbutton-outlined-m){--micl-width: 56px;--micl-height: 56px;--_width-narrow: 48px;--_width-wide: 72px;--_shape-toggle: var(--md-sys-shape-corner-large);--_shape-pressed: var(--md-sys-shape-corner-medium);font-size:var(--md-sys-icon-size, 24px)}:is(.micl-iconbutton-standard-l,.micl-iconbutton-filled-l,.micl-iconbutton-tonal-l,.micl-iconbutton-outlined-l){--micl-width: 96px;--micl-height: 96px;--_width-narrow: 64px;--_width-wide: 128px;--_shape-toggle: var(--md-sys-shape-corner-extra-large);--_shape-pressed: var(--md-sys-shape-corner-large);font-size:32px}:is(.micl-iconbutton-standard-xl,.micl-iconbutton-filled-xl,.micl-iconbutton-tonal-xl,.micl-iconbutton-outlined-xl){--micl-width: 136px;--micl-height: 136px;--_width-narrow: 104px;--_width-wide: 184px;--_shape-toggle: var(--md-sys-shape-corner-extra-large);--_shape-pressed: var(--md-sys-shape-corner-large);font-size:40px}[class*=micl-iconbutton-standard-]{--statelayer-color: var(--md-sys-color-on-surface-variant);text-decoration:none}[class*=micl-iconbutton-standard-]:disabled{background-color:rgba(0,0,0,0);color:var(--md-comp-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-icon-button-disabled-icon-opacity, 38%)))}[class*=micl-iconbutton-standard-]:not(:disabled).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-primary);color:var(--md-comp-icon-button-selected-icon-color, var(--md-sys-color-primary))}[class*=micl-iconbutton-filled-]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-filled-icon-button-container-color, var(--md-sys-color-primary));color:var(--md-comp-filled-icon-button-icon-color, var(--md-sys-color-on-primary))}[class*=micl-iconbutton-filled-]:disabled{background-color:var(--md-comp-filled-icon-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-icon-button-disabled-container-opacity, 10%)));color:var(--md-comp-filled-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-icon-button-disabled-icon-opacity, 38%)))}[class*=micl-iconbutton-filled-]:not(:disabled).micl-button--toggle:not([aria-pressed=true]){--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:var(--md-comp-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container));color:var(--md-comp-filled-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant))}[class*=micl-iconbutton-tonal-]{--statelayer-color: var(--md-sys-color-on-secondary-container);background-color:var(--md-comp-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container));color:var(--md-comp-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container))}[class*=micl-iconbutton-tonal-]:disabled{background-color:var(--md-comp-filled-tonal-icon-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-tonal-icon-button-disabled-container-opacity, 10%)));color:var(--md-comp-filled-tonal-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-tonal-icon-button-disabled-icon-opacity, 38%)))}[class*=micl-iconbutton-tonal-]:not(:disabled).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-secondary);background-color:var(--md-comp-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary));color:var(--md-comp-filled-tonal-icon-button-selected-icon-color, var(--md-sys-color-on-secondary))}[class*=micl-iconbutton-outlined-]{--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant))}[class*=micl-iconbutton-outlined-]:disabled{background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-icon-button-disabled-icon-opacity, 38%)))}[class*=micl-iconbutton-outlined-]:disabled.micl-button--toggle[aria-pressed=true]{border:none;background-color:var(--md-comp-outlined-icon-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-icon-button-selected-disabled-container-opacity, 10%)))}[class*=micl-iconbutton-outlined-]:not(:disabled).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-inverse-on-surface);border:none;background-color:var(--md-comp-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-iconbutton-outlined-xs,.micl-iconbutton-outlined-s,.micl-iconbutton-outlined-m{border:1px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant))}.micl-iconbutton-outlined-l{border:2px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant))}.micl-iconbutton-outlined-xl{border:3px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant))}
|
|
1
|
+
body{--md-sys-elevation-level0: none}: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-extra-large: 28px}: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-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 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%}}:is(.micl-iconbutton-standard-s,.micl-iconbutton-filled-s,.micl-iconbutton-tonal-s,.micl-iconbutton-outlined-s),:is(.micl-iconbutton-standard-xs,.micl-iconbutton-filled-xs,.micl-iconbutton-tonal-xs,.micl-iconbutton-outlined-xs){position:relative}:is(.micl-iconbutton-standard-s,.micl-iconbutton-filled-s,.micl-iconbutton-tonal-s,.micl-iconbutton-outlined-s)::before,:is(.micl-iconbutton-standard-xs,.micl-iconbutton-filled-xs,.micl-iconbutton-tonal-xs,.micl-iconbutton-outlined-xs)::before{content:"";position:absolute;display:flex;align-items:center;justify-content:center;block-size:var(--md-sys-state-target-size, 48px);inline-size:100%;min-inline-size:var(--md-sys-state-target-size, 48px);inset:calc((var(--micl-height) - var(--md-sys-state-target-size, 48px))/2) 0 0 calc((min(100%,var(--md-sys-state-target-size, 48px)) - var(--md-sys-state-target-size, 48px))/2);background-color:rgba(0,0,0,0)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]){--md-comp-icon-button-motion-effects: cubic-bezier(0.42, 1.67, 0.21, 0.9);--md-comp-icon-button-motion-duration: 350ms;--micl-ripple: 1;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--micl-width);min-inline-size:var(--micl-width);block-size:var(--micl-height);padding:0;border:none;border-radius:var(--md-sys-shape-corner-full);background-color:rgba(0,0,0,0);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%;-webkit-tap-highlight-color:rgba(0,0,0,0);color:var(--md-comp-icon-button-icon-color, var(--md-sys-color-on-surface-variant));font-variation-settings:"FILL" 0;cursor:pointer;transition:border-radius var(--md-comp-icon-button-motion-duration) var(--md-comp-icon-button-motion-effects),font-variation-settings var(--md-comp-icon-button-motion-duration) linear,background-size 0ms,--statelayer-opacity var(--md-comp-icon-button-motion-duration) linear}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):disabled{box-shadow:var(--md-sys-elevation-level0);cursor:default}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:2px}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled).micl-rippling{animation:micl-ripple var(--md-sys-state-ripple-duration)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):hover:not(:disabled),:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--toggle[aria-pressed=true]{font-variation-settings:"FILL" 1}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--toggle:not([aria-pressed=true])::before{content:attr(data-miclicon)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--toggle[aria-pressed=true]::before{content:attr(data-micliconselected)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--toggle[aria-pressed=true]{border-radius:var(--_shape-toggle)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-iconbutton--narrow{--micl-width: var(--_width-narrow);border-radius:calc(var(--micl-width)/2)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-iconbutton--wide{--micl-width: var(--_width-wide);border-radius:calc(var(--micl-height)/2)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--square{border-radius:var(--_shape-toggle)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]).micl-button--square.micl-button--toggle[aria-pressed=true]{border-radius:var(--md-sys-shape-corner-full)}:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):active,:is([class*=micl-iconbutton-standard-],[class*=micl-iconbutton-filled-],[class*=micl-iconbutton-tonal-],[class*=micl-iconbutton-outlined-]):not(:disabled):active.micl-button--square{border-radius:var(--_shape-pressed)}:is(.micl-iconbutton-standard-xs,.micl-iconbutton-filled-xs,.micl-iconbutton-tonal-xs,.micl-iconbutton-outlined-xs){--micl-width: 32px;--micl-height: 32px;--_width-narrow: 28px;--_width-wide: 40px;--_shape-toggle: var(--md-sys-shape-corner-medium);--_shape-pressed: var(--md-sys-shape-corner-small);font-size:20px}:is(.micl-iconbutton-standard-s,.micl-iconbutton-filled-s,.micl-iconbutton-tonal-s,.micl-iconbutton-outlined-s){--micl-width: 40px;--micl-height: 40px;--_width-narrow: 32px;--_width-wide: 52px;--_shape-toggle: var(--md-sys-shape-corner-medium);--_shape-pressed: var(--md-sys-shape-corner-small);font-size:var(--md-sys-icon-size, 24px)}:is(.micl-iconbutton-standard-m,.micl-iconbutton-filled-m,.micl-iconbutton-tonal-m,.micl-iconbutton-outlined-m){--micl-width: 56px;--micl-height: 56px;--_width-narrow: 48px;--_width-wide: 72px;--_shape-toggle: var(--md-sys-shape-corner-large);--_shape-pressed: var(--md-sys-shape-corner-medium);font-size:var(--md-sys-icon-size, 24px)}:is(.micl-iconbutton-standard-l,.micl-iconbutton-filled-l,.micl-iconbutton-tonal-l,.micl-iconbutton-outlined-l){--micl-width: 96px;--micl-height: 96px;--_width-narrow: 64px;--_width-wide: 128px;--_shape-toggle: var(--md-sys-shape-corner-extra-large);--_shape-pressed: var(--md-sys-shape-corner-large);font-size:32px}:is(.micl-iconbutton-standard-xl,.micl-iconbutton-filled-xl,.micl-iconbutton-tonal-xl,.micl-iconbutton-outlined-xl){--micl-width: 136px;--micl-height: 136px;--_width-narrow: 104px;--_width-wide: 184px;--_shape-toggle: var(--md-sys-shape-corner-extra-large);--_shape-pressed: var(--md-sys-shape-corner-large);font-size:40px}[class*=micl-iconbutton-standard-]{--statelayer-color: var(--md-sys-color-on-surface-variant);text-decoration:none}[class*=micl-iconbutton-standard-]:disabled{background-color:rgba(0,0,0,0);color:var(--md-comp-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-icon-button-disabled-icon-opacity, 38%)))}[class*=micl-iconbutton-standard-]:not(:disabled).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-primary);color:var(--md-comp-icon-button-selected-icon-color, var(--md-sys-color-primary))}[class*=micl-iconbutton-filled-]{--statelayer-color: var(--md-sys-color-on-primary);background-color:var(--md-comp-filled-icon-button-container-color, var(--md-sys-color-primary));color:var(--md-comp-filled-icon-button-icon-color, var(--md-sys-color-on-primary))}[class*=micl-iconbutton-filled-]:disabled{background-color:var(--md-comp-filled-icon-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-icon-button-disabled-container-opacity, 10%)));color:var(--md-comp-filled-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-icon-button-disabled-icon-opacity, 38%)))}[class*=micl-iconbutton-filled-]:not(:disabled).micl-button--toggle:not([aria-pressed=true]){--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:var(--md-comp-filled-icon-button-unselected-container-color, var(--md-sys-color-surface-container));color:var(--md-comp-filled-icon-button-unselected-icon-color, var(--md-sys-color-on-surface-variant))}[class*=micl-iconbutton-tonal-]{--statelayer-color: var(--md-sys-color-on-secondary-container);background-color:var(--md-comp-filled-tonal-icon-button-container-color, var(--md-sys-color-secondary-container));color:var(--md-comp-filled-tonal-icon-button-icon-color, var(--md-sys-color-on-secondary-container))}[class*=micl-iconbutton-tonal-]:disabled{background-color:var(--md-comp-filled-tonal-icon-button-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-tonal-icon-button-disabled-container-opacity, 10%)));color:var(--md-comp-filled-tonal-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-filled-tonal-icon-button-disabled-icon-opacity, 38%)))}[class*=micl-iconbutton-tonal-]:not(:disabled).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-on-secondary);background-color:var(--md-comp-filled-tonal-icon-button-selected-container-color, var(--md-sys-color-secondary));color:var(--md-comp-filled-tonal-icon-button-selected-icon-color, var(--md-sys-color-on-secondary))}[class*=micl-iconbutton-outlined-]{--statelayer-color: var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-icon-button-icon-color, var(--md-sys-color-on-surface-variant))}[class*=micl-iconbutton-outlined-]:disabled{background-color:rgba(0,0,0,0);color:var(--md-comp-outlined-icon-button-disabled-icon-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-icon-button-disabled-icon-opacity, 38%)))}[class*=micl-iconbutton-outlined-]:disabled.micl-button--toggle[aria-pressed=true]{border:none;background-color:var(--md-comp-outlined-icon-button-selected-disabled-container-color, rgb(from var(--md-sys-color-on-surface) r g b/var(--md-comp-outlined-icon-button-selected-disabled-container-opacity, 10%)))}[class*=micl-iconbutton-outlined-]:not(:disabled).micl-button--toggle[aria-pressed=true]{--statelayer-color: var(--md-sys-color-inverse-on-surface);border:none;background-color:var(--md-comp-outlined-icon-button-selected-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-outlined-icon-button-selected-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-iconbutton-outlined-xs,.micl-iconbutton-outlined-s,.micl-iconbutton-outlined-m{border:1px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant))}.micl-iconbutton-outlined-l{border:2px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant))}.micl-iconbutton-outlined-xl{border:3px solid var(--md-comp-outlined-icon-button-outline-color, var(--md-sys-color-outline-variant))}
|
package/dist/layout.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-
|
|
1
|
+
:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}
|
package/dist/list.css
CHANGED
|
@@ -1 +1 @@
|
|
|
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, 0px));border-start-end-radius:max(var(--_list-item-shape),var(--_list-shape, 0px))}: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, 0px));border-end-end-radius:max(var(--_list-item-shape),var(--_list-shape, 0px))}: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:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);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:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);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:var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);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:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);letter-spacing:var(--md-sys-typescale-body-medium-tracking);color:var(--_supporting-text-color)}.micl-list-item__trailing-text{font:var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);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)}
|
|
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, 0px));border-start-end-radius:max(var(--_list-item-shape),var(--_list-shape, 0px))}: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, 0px));border-end-end-radius:max(var(--_list-item-shape),var(--_list-shape, 0px))}: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,:is(.micl-list-item-one,.micl-list-item-two,.micl-list-item-three) input[type=radio].micl-radio{--_layer: max(24px, var(--_size));--_target: var(--_layer)}.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:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);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:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);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:var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);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:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);letter-spacing:var(--md-sys-typescale-body-medium-tracking);color:var(--_supporting-text-color)}.micl-list-item__trailing-text{font:var(--md-sys-typescale-label-small-weight) var(--md-sys-typescale-label-small-size)/var(--md-sys-typescale-label-small-line-height) var(--md-sys-typescale-label-small-font);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)}
|