material-inspired-component-library 7.0.0 → 7.0.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.
Files changed (19) hide show
  1. package/components/accordion/README.md +4 -6
  2. package/components/card/README.md +2 -0
  3. package/components/card/index.scss +9 -0
  4. package/components/checkbox/index.scss +4 -0
  5. package/components/dialog/README.md +7 -7
  6. package/components/radio/index.scss +4 -0
  7. package/components/select/index.scss +14 -14
  8. package/components/textfield/index.scss +6 -0
  9. package/dist/card.css +1 -1
  10. package/dist/checkbox.css +1 -1
  11. package/dist/micl.css +1 -1
  12. package/dist/navigationrail.css +1 -1
  13. package/dist/radio.css +1 -1
  14. package/dist/select.css +1 -1
  15. package/dist/textfield.css +1 -1
  16. package/docs/accordion.html +10 -10
  17. package/docs/dialog.html +17 -19
  18. package/docs/micl.css +1 -1
  19. package/package.json +4 -4
package/dist/textfield.css CHANGED
@@ -1 +1 @@
1
- :root{--md-sys-icon-size: 24px;--md-sys-padding-xxs: 4px;--md-sys-padding-xs: 8px;--md-sys-padding-s: 12px;--md-sys-padding-m: 16px;--md-sys-padding-l: 20px;--md-sys-padding-xl: 24px;--md-sys-padding-xxl: 28px}.micl-hidden{display:none !important}.micl-no-transition{transition:none !important}.micl-flex--vcenter{display:flex;flex-direction:row;align-items:center}.micl-grid-field,.micl-grid-iconfield{box-sizing:border-box;display:grid;row-gap:var(--md-sys-padding-xl, 24px);background-color:inherit}.micl-grid-iconfield{grid-template-columns:48px 1fr}.micl-grid-iconfield__icon{grid-column:1;margin-block-start:.6rem}.micl-grid-iconfield__field{grid-column:2}.micl-link{display:flex;align-items:center;justify-content:center;text-decoration:none}@property --micl-ripple{syntax:"<integer>";inherits:false;initial-value:0}@property --micl-x{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-y{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-width{syntax:"<length>";inherits:true;initial-value:0px}@property --micl-height{syntax:"<length>";inherits:true;initial-value:0px}:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms;--md-sys-motion-path: linear}:root{--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-extra-small-top: 4px 4px 0 0;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-end: 0 16px 16px 0;--md-sys-shape-corner-large-start: 16px 0 0 16px;--md-sys-shape-corner-large-top: 16px 16px 0 0;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-top: 28px 28px 0 0;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-target-size: 48px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-disabled-state-layer-opacity: 38%;--md-sys-state-backdrop-opacity: 32%;--md-sys-state-focus-indicator-inner-offset: -3px;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}@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-ref-typeface-plain: Google Sans, system-ui, sans-serif;--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;--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-large-size: 3.5625rem;--md-sys-typescale-display-large-line-height: 4rem;--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-large-tracking: -0.015625rem;--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-medium-size: 2.8125rem;--md-sys-typescale-display-medium-line-height: 3.25rem;--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-medium-tracking: 0;--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0;--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;--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0;--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0;--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;--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,009375rem;--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-line-height: 1.25rem;--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-small-tracking: 0.00625rem;--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;--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.015625rem;--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem;--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;--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem;--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;--md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-large-size: 3.5625rem;--md-sys-typescale-emphasized-display-large-line-height: 4rem;--md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-large-tracking: -0.015625rem;--md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-medium-size: 2.8125rem;--md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;--md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-medium-tracking: 0;--md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-small-size: 2.25rem;--md-sys-typescale-emphasized-display-small-line-height: 2.75rem;--md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-small-tracking: 0;--md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-large-size: 2rem;--md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;--md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-large-tracking: 0;--md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-medium-size: 1.75rem;--md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;--md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-medium-tracking: 0;--md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-small-size: 1.5rem;--md-sys-typescale-emphasized-headline-small-line-height: 2rem;--md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-small-tracking: 0;--md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-large-size: 1.375rem;--md-sys-typescale-emphasized-title-large-line-height: 1.75rem;--md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-title-large-tracking: 0;--md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-medium-size: 1rem;--md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;--md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem;--md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-small-size: 0.875rem;--md-sys-typescale-emphasized-title-small-line-height: 1.25rem;--md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;--md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-large-size: 1rem;--md-sys-typescale-emphasized-body-large-line-height: 1.5rem;--md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-large-tracking: 0.03125rem;--md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-medium-size: 0.875rem;--md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;--md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;--md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-small-size: 0.75rem;--md-sys-typescale-emphasized-body-small-line-height: 1rem;--md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-small-tracking: 0.025rem;--md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-large-size: 0.875rem;--md-sys-typescale-emphasized-label-large-line-height: 1.25rem;--md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;--md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-medium-size: 0.75rem;--md-sys-typescale-emphasized-label-medium-line-height: 1rem;--md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;--md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-small-size: 0.6875rem;--md-sys-typescale-emphasized-label-small-line-height: 1rem;--md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-small-tracking: 0.03125rem}.md-sys-typescale-display-large{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}.md-sys-typescale-display-medium{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}.md-sys-typescale-display-small{font-family:var(--md-sys-typescale-display-small-font);font-size:var(--md-sys-typescale-display-small-size);line-height:var(--md-sys-typescale-display-small-line-height);font-weight:var(--md-sys-typescale-display-small-weight);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.md-sys-typescale-headline-large{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}.md-sys-typescale-headline-medium{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.md-sys-typescale-headline-small{font-family:var(--md-sys-typescale-headline-small-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}.md-sys-typescale-title-large{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}.md-sys-typescale-title-medium{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.md-sys-typescale-title-small{font-family:var(--md-sys-typescale-title-small-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}.md-sys-typescale-body-large{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking)}.md-sys-typescale-body-medium{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}.md-sys-typescale-body-small{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.md-sys-typescale-label-large{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.md-sys-typescale-label-medium{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}.md-sys-typescale-label-small{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}.md-sys-typescale-emphasized-display-large{font-family:var(--md-sys-typescale-emphasized-display-large-font);font-size:var(--md-sys-typescale-emphasized-display-large-size);line-height:var(--md-sys-typescale-emphasized-display-large-line-height);font-weight:var(--md-sys-typescale-emphasized-display-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-large-tracking)}.md-sys-typescale-emphasized-display-medium{font-family:var(--md-sys-typescale-emphasized-display-medium-font);font-size:var(--md-sys-typescale-emphasized-display-medium-size);line-height:var(--md-sys-typescale-emphasized-display-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-display-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-medium-tracking)}.md-sys-typescale-emphasized-display-small{font-family:var(--md-sys-typescale-emphasized-display-small-font);font-size:var(--md-sys-typescale-emphasized-display-small-size);line-height:var(--md-sys-typescale-emphasized-display-small-line-height);font-weight:var(--md-sys-typescale-emphasized-display-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-small-tracking)}.md-sys-typescale-emphasized-headline-large{font-family:var(--md-sys-typescale-emphasized-headline-large-font);font-size:var(--md-sys-typescale-emphasized-headline-large-size);line-height:var(--md-sys-typescale-emphasized-headline-large-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-large-tracking)}.md-sys-typescale-emphasized-headline-medium{font-family:var(--md-sys-typescale-emphasized-headline-medium-font);font-size:var(--md-sys-typescale-emphasized-headline-medium-size);line-height:var(--md-sys-typescale-emphasized-headline-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-medium-tracking)}.md-sys-typescale-emphasized-headline-small{font-family:var(--md-sys-typescale-emphasized-headline-small-font);font-size:var(--md-sys-typescale-emphasized-headline-small-size);line-height:var(--md-sys-typescale-emphasized-headline-small-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-small-tracking)}.md-sys-typescale-emphasized-title-large{font-family:var(--md-sys-typescale-emphasized-title-large-font);font-size:var(--md-sys-typescale-emphasized-title-large-size);line-height:var(--md-sys-typescale-emphasized-title-large-line-height);font-weight:var(--md-sys-typescale-emphasized-title-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-large-tracking)}.md-sys-typescale-emphasized-title-medium{font-family:var(--md-sys-typescale-emphasized-title-medium-font);font-size:var(--md-sys-typescale-emphasized-title-medium-size);line-height:var(--md-sys-typescale-emphasized-title-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-title-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-medium-tracking)}.md-sys-typescale-emphasized-title-small{font-family:var(--md-sys-typescale-emphasized-title-small-font);font-size:var(--md-sys-typescale-emphasized-title-small-size);line-height:var(--md-sys-typescale-emphasized-title-small-line-height);font-weight:var(--md-sys-typescale-emphasized-title-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-small-tracking)}.md-sys-typescale-emphasized-body-large{font-family:var(--md-sys-typescale-emphasized-body-large-font);font-size:var(--md-sys-typescale-emphasized-body-large-size);line-height:var(--md-sys-typescale-emphasized-body-large-line-height);font-weight:var(--md-sys-typescale-emphasized-body-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-large-tracking)}.md-sys-typescale-emphasized-body-medium{font-family:var(--md-sys-typescale-emphasized-body-medium-font);font-size:var(--md-sys-typescale-emphasized-body-medium-size);line-height:var(--md-sys-typescale-emphasized-body-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-body-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-medium-tracking)}.md-sys-typescale-emphasized-body-small{font-family:var(--md-sys-typescale-emphasized-body-small-font);font-size:var(--md-sys-typescale-emphasized-body-small-size);line-height:var(--md-sys-typescale-emphasized-body-small-line-height);font-weight:var(--md-sys-typescale-emphasized-body-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-small-tracking)}.md-sys-typescale-emphasized-label-large{font-family:var(--md-sys-typescale-emphasized-label-large-font);font-size:var(--md-sys-typescale-emphasized-label-large-size);line-height:var(--md-sys-typescale-emphasized-label-large-line-height);font-weight:var(--md-sys-typescale-emphasized-label-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-large-tracking)}.md-sys-typescale-emphasized-label-medium{font-family:var(--md-sys-typescale-emphasized-label-medium-font);font-size:var(--md-sys-typescale-emphasized-label-medium-size);line-height:var(--md-sys-typescale-emphasized-label-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-label-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-medium-tracking)}.md-sys-typescale-emphasized-label-small{font-family:var(--md-sys-typescale-emphasized-label-small-font);font-size:var(--md-sys-typescale-emphasized-label-small-size);line-height:var(--md-sys-typescale-emphasized-label-small-line-height);font-weight:var(--md-sys-typescale-emphasized-label-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-small-tracking)}.micl-textfield-filled,.micl-textfield-outlined{--md-sys-textfield-height: 56px;--md-sys-textfield-icon-size: 24px;--md-sys-textfield-icon-space: 12px;--md-sys-textfield-input-space: 16px;--md-sys-textfield-prefix-space: 1em;--md-sys-textfield-suffix-space: 1em;--md-sys-textfield-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-sys-textfield-motion-duration: 300ms;--md-sys-textfield-motion-duration-reverse: 200ms;display:grid;grid-template-areas:"textfield" "supporting";align-items:center;background-color:inherit}.micl-textfield-filled>label,.micl-textfield-outlined>label{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:content-box;grid-area:textfield;align-self:flex-start;width:fit-content;padding-inline:4px;margin-block-start:calc((var(--md-sys-textfield-height) - var(--md-sys-typescale-body-large-line-height))/2);margin-inline:12px 4px;border-radius:4px;background-color:inherit;color:var(--md-sys-color-on-surface-variant);z-index:1;transition:margin-block-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),margin-inline-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),font-size var(--md-sys-textfield-motion-duration) linear,letter-spacing var(--md-sys-textfield-motion-duration) linear}.micl-textfield-filled>input,.micl-textfield-filled>select,.micl-textfield-filled>textarea,.micl-textfield-outlined>input,.micl-textfield-outlined>select,.micl-textfield-outlined>textarea{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;grid-area:textfield;margin:0;padding-inline:var(--md-sys-textfield-input-space);border:none;border-block-end:1px solid var(--md-sys-color-on-surface-variant);border-radius:var(--md-sys-shape-corner-extra-small);outline:none;color:var(--md-sys-color-on-surface);background-color:rgba(0,0,0,0);text-overflow:ellipsis;caret-color:var(--md-sys-color-primary)}.micl-textfield-filled>input:disabled,.micl-textfield-filled>select:disabled,.micl-textfield-filled>textarea:disabled,.micl-textfield-outlined>input:disabled,.micl-textfield-outlined>select:disabled,.micl-textfield-outlined>textarea:disabled{border-block-end-color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%));color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}.micl-textfield-filled>input::placeholder,.micl-textfield-filled>select::placeholder,.micl-textfield-filled>textarea::placeholder,.micl-textfield-outlined>input::placeholder,.micl-textfield-outlined>select::placeholder,.micl-textfield-outlined>textarea::placeholder{color:var(--md-sys-color-on-surface-variant)}.micl-textfield-filled>input::-webkit-inner-spin-button,.micl-textfield-filled>input::-webkit-outer-spin-button,.micl-textfield-filled>select::-webkit-inner-spin-button,.micl-textfield-filled>select::-webkit-outer-spin-button,.micl-textfield-filled>textarea::-webkit-inner-spin-button,.micl-textfield-filled>textarea::-webkit-outer-spin-button,.micl-textfield-outlined>input::-webkit-inner-spin-button,.micl-textfield-outlined>input::-webkit-outer-spin-button,.micl-textfield-outlined>select::-webkit-inner-spin-button,.micl-textfield-outlined>select::-webkit-outer-spin-button,.micl-textfield-outlined>textarea::-webkit-inner-spin-button,.micl-textfield-outlined>textarea::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.micl-textfield-filled>input[type=number],.micl-textfield-filled>select[type=number],.micl-textfield-filled>textarea[type=number],.micl-textfield-outlined>input[type=number],.micl-textfield-outlined>select[type=number],.micl-textfield-outlined>textarea[type=number]{-moz-appearance:textfield}.micl-textfield-filled>input,.micl-textfield-filled>select,.micl-textfield-outlined>input,.micl-textfield-outlined>select{height:var(--md-sys-textfield-height);padding-block:0}.micl-textfield-filled>textarea,.micl-textfield-outlined>textarea{min-height:var(--md-sys-textfield-height);padding-block:calc((var(--md-sys-textfield-height) - var(--md-sys-typescale-body-large-line-height))/2);resize:none}.micl-textfield-filled>textarea[rows],.micl-textfield-outlined>textarea[rows]{padding-block-start:0;border-block-start:8px solid rgba(0,0,0,0);overflow:hidden}.micl-textfield-filled>textarea:not([rows]),.micl-textfield-outlined>textarea:not([rows]){field-sizing:content}.micl-textfield-filled>.micl-textfield__prefix,.micl-textfield-filled>.micl-textfield__suffix,.micl-textfield-outlined>.micl-textfield__prefix,.micl-textfield-outlined>.micl-textfield__suffix{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);grid-area:textfield;align-content:center;height:var(--md-sys-textfield-height);color:var(--md-sys-color-on-surface-variant);opacity:0;z-index:1;transition:opacity var(--md-sys-textfield-motion-duration-reverse) linear}.micl-textfield-filled>.micl-textfield__prefix,.micl-textfield-outlined>.micl-textfield__prefix{width:var(--md-sys-textfield-prefix-space);padding-inline-start:var(--md-sys-textfield-input-space)}.micl-textfield-filled>.micl-textfield__suffix,.micl-textfield-outlined>.micl-textfield__suffix{width:var(--md-sys-textfield-suffix-space);padding-inline-end:var(--md-sys-textfield-input-space);margin-inline:auto 0}.micl-textfield-filled>.micl-textfield__icon-leading,.micl-textfield-filled>.micl-textfield__icon-trailing,.micl-textfield-outlined>.micl-textfield__icon-leading,.micl-textfield-outlined>.micl-textfield__icon-trailing{grid-area:textfield;width:1em;margin-inline:var(--md-sys-textfield-icon-space) auto;font-size:var(--md-sys-textfield-icon-size);color:var(--md-sys-color-on-surface-variant);z-index:1}.micl-textfield-filled>.micl-textfield__icon-trailing,.micl-textfield-outlined>.micl-textfield__icon-trailing{margin-inline:auto var(--md-sys-textfield-icon-space)}.micl-textfield-filled:has(>.micl-textfield__prefix)>input,.micl-textfield-filled:has(>.micl-textfield__prefix)>textarea,.micl-textfield-outlined:has(>.micl-textfield__prefix)>input,.micl-textfield-outlined:has(>.micl-textfield__prefix)>textarea{padding-inline-start:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-prefix-space))}.micl-textfield-filled:has(>.micl-textfield__suffix)>input,.micl-textfield-filled:has(>.micl-textfield__suffix)>textarea,.micl-textfield-outlined:has(>.micl-textfield__suffix)>input,.micl-textfield-outlined:has(>.micl-textfield__suffix)>textarea{padding-inline-end:calc(var(--md-sys-textfield-suffix-space) + var(--md-sys-textfield-input-space))}.micl-textfield-filled:has(>.micl-textfield__icon-leading)>label,.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-input-space))}.micl-textfield-filled:has(>.micl-textfield__icon-leading)>.micl-textfield__prefix,.micl-textfield-filled:has(>.micl-textfield__icon-leading)>input,.micl-textfield-filled:has(>.micl-textfield__icon-leading)>textarea,.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>.micl-textfield__prefix,.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>input,.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>textarea{padding-inline-start:calc(var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-input-space))}.micl-textfield-filled:has(>.micl-textfield__icon-leading):has(>.micl-textfield__prefix)>input,.micl-textfield-filled:has(>.micl-textfield__icon-leading):has(>.micl-textfield__prefix)>textarea,.micl-textfield-outlined:has(>.micl-textfield__icon-leading):has(>.micl-textfield__prefix)>input,.micl-textfield-outlined:has(>.micl-textfield__icon-leading):has(>.micl-textfield__prefix)>textarea{padding-inline-start:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-prefix-space))}.micl-textfield-filled:has(>.micl-textfield__icon-trailing)>.micl-textfield__suffix,.micl-textfield-filled:has(>.micl-textfield__icon-trailing)>input,.micl-textfield-filled:has(>.micl-textfield__icon-trailing)>textarea,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing)>.micl-textfield__suffix,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing)>input,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing)>textarea{padding-inline-end:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-icon-space))}.micl-textfield-filled:has(>.micl-textfield__icon-trailing):has(>.micl-textfield__suffix)>input,.micl-textfield-filled:has(>.micl-textfield__icon-trailing):has(>.micl-textfield__suffix)>textarea,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing):has(>.micl-textfield__suffix)>input,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing):has(>.micl-textfield__suffix)>textarea{padding-inline-end:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-prefix-space) + var(--md-sys-textfield-icon-space))}.micl-textfield-filled>.micl-textfield__supporting-text,.micl-textfield-filled>.micl-textfield__character-counter,.micl-textfield-outlined>.micl-textfield__supporting-text,.micl-textfield-outlined>.micl-textfield__character-counter{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);grid-area:supporting;padding-block:4px 0;padding-inline:16px;color:var(--md-sys-color-on-surface-variant)}.micl-textfield-filled>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled>.micl-textfield__character-counter.micl-textfield__supporting-text--focus,.micl-textfield-outlined>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined>.micl-textfield__character-counter.micl-textfield__supporting-text--focus{visibility:hidden}.micl-textfield-filled>.micl-textfield__character-counter,.micl-textfield-outlined>.micl-textfield__character-counter{justify-self:flex-end}.micl-textfield-filled:has(>input:active)>label,.micl-textfield-filled:has(>select:active)>label,.micl-textfield-filled:has(>textarea:active)>label,.micl-textfield-filled:has(>input:focus)>label,.micl-textfield-filled:has(>select:focus)>label,.micl-textfield-filled:has(>textarea:focus)>label,.micl-textfield-filled:has(>input:focus-visible)>label,.micl-textfield-filled:has(>select:focus-visible)>label,.micl-textfield-filled:has(>textarea:focus-visible)>label,.micl-textfield-outlined:has(>input:active)>label,.micl-textfield-outlined:has(>select:active)>label,.micl-textfield-outlined:has(>textarea:active)>label,.micl-textfield-outlined:has(>input:focus)>label,.micl-textfield-outlined:has(>select:focus)>label,.micl-textfield-outlined:has(>textarea:focus)>label,.micl-textfield-outlined:has(>input:focus-visible)>label,.micl-textfield-outlined:has(>select:focus-visible)>label,.micl-textfield-outlined:has(>textarea:focus-visible)>label{color:var(--md-sys-color-primary)}.micl-textfield-filled:has(>input:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>select:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>textarea:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>input:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>select:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>textarea:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>input:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>select:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>textarea:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>input:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>select:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>textarea:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>input:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>select:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>textarea:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>input:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>select:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>textarea:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus{visibility:visible}.micl-textfield-filled:has(>input:disabled)>label,.micl-textfield-filled:has(>select:disabled)>label,.micl-textfield-filled:has(>textarea:disabled)>label,.micl-textfield-outlined:has(>input:disabled)>label,.micl-textfield-outlined:has(>select:disabled)>label,.micl-textfield-outlined:has(>textarea:disabled)>label{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}.micl-textfield-filled:has(>input:disabled)>.micl-textfield__icon-leading,.micl-textfield-filled:has(>input:disabled)>.micl-textfield__icon-trailing,.micl-textfield-filled:has(>input:disabled)>.micl-textfield__supporting-text,.micl-textfield-filled:has(>select:disabled)>.micl-textfield__icon-leading,.micl-textfield-filled:has(>select:disabled)>.micl-textfield__icon-trailing,.micl-textfield-filled:has(>select:disabled)>.micl-textfield__supporting-text,.micl-textfield-filled:has(>textarea:disabled)>.micl-textfield__icon-leading,.micl-textfield-filled:has(>textarea:disabled)>.micl-textfield__icon-trailing,.micl-textfield-filled:has(>textarea:disabled)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>input:disabled)>.micl-textfield__icon-leading,.micl-textfield-outlined:has(>input:disabled)>.micl-textfield__icon-trailing,.micl-textfield-outlined:has(>input:disabled)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>select:disabled)>.micl-textfield__icon-leading,.micl-textfield-outlined:has(>select:disabled)>.micl-textfield__icon-trailing,.micl-textfield-outlined:has(>select:disabled)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>textarea:disabled)>.micl-textfield__icon-leading,.micl-textfield-outlined:has(>textarea:disabled)>.micl-textfield__icon-trailing,.micl-textfield-outlined:has(>textarea:disabled)>.micl-textfield__supporting-text{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}.micl-textfield-filled:has(>input:disabled)>.micl-textfield__character-counter,.micl-textfield-filled:has(>select:disabled)>.micl-textfield__character-counter,.micl-textfield-filled:has(>textarea:disabled)>.micl-textfield__character-counter,.micl-textfield-outlined:has(>input:disabled)>.micl-textfield__character-counter,.micl-textfield-outlined:has(>select:disabled)>.micl-textfield__character-counter,.micl-textfield-outlined:has(>textarea:disabled)>.micl-textfield__character-counter{display:none}.micl-textfield-filled:has(>input:not([maxlength]))>.micl-textfield__character-counter,.micl-textfield-filled:has(>textarea:not([maxlength]))>.micl-textfield__character-counter,.micl-textfield-outlined:has(>input:not([maxlength]))>.micl-textfield__character-counter,.micl-textfield-outlined:has(>textarea:not([maxlength]))>.micl-textfield__character-counter{display:none}.micl-textfield-filled:has(>input[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text,.micl-textfield-filled:has(>textarea[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>input[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>textarea[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text{padding-inline-end:64px}.micl-textfield-filled>label{background-color:rgba(0,0,0,0)}.micl-textfield-filled:hover>input:not(:disabled),.micl-textfield-filled:hover>select:not(:disabled),.micl-textfield-filled:hover>textarea:not(:disabled){--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);border-block-end-color:var(--md-sys-color-on-surface)}.micl-textfield-filled>input,.micl-textfield-filled>select,.micl-textfield-filled>textarea{--statelayer-color: var(--md-sys-color-on-surface);padding-block-start:18px;padding-block-end:2px;border-end-start-radius:0;border-end-end-radius:0;outline:none;background-color:var(--md-sys-color-surface-container-highest);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;transition:--statelayer-opacity var(--md-sys-textfield-motion-duration) linear}.micl-textfield-filled>input:disabled,.micl-textfield-filled>select:disabled,.micl-textfield-filled>textarea:disabled{background-color:rgb(from var(--md-sys-color-on-surface) r g b/4%)}.micl-textfield-filled>input:not(:disabled):focus,.micl-textfield-filled>input:not(:disabled):focus-visible,.micl-textfield-filled>input:not(:disabled):active,.micl-textfield-filled>select:not(:disabled):focus,.micl-textfield-filled>select:not(:disabled):focus-visible,.micl-textfield-filled>select:not(:disabled):active,.micl-textfield-filled>textarea:not(:disabled):focus,.micl-textfield-filled>textarea:not(:disabled):focus-visible,.micl-textfield-filled>textarea:not(:disabled):active{padding-block-end:0px;border-block-end-width:3px;border-block-end-color:var(--md-sys-color-primary)}.micl-textfield-filled>textarea{padding-block-start:24px}.micl-textfield-filled:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>label{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);margin-block-start:8px;margin-inline-start:12px}.micl-textfield-filled:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue]):has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-icon-space) - 4px)}.micl-textfield-filled:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>.micl-textfield__prefix,.micl-textfield-filled:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>.micl-textfield__suffix{height:40px;margin-block-start:16px;opacity:1}.micl-textfield-outlined{margin-block-start:calc(2px + var(--md-sys-typescale-body-small-line-height)/2)}.micl-textfield-outlined:hover>label{color:var(--md-sys-color-on-surface)}.micl-textfield-outlined:hover>input:not(:disabled),.micl-textfield-outlined:hover>select:not(:disabled),.micl-textfield-outlined:hover>textarea:not(:disabled){outline-color:var(--md-sys-color-on-surface);color:var(--md-sys-color-on-surface)}.micl-textfield-outlined>input,.micl-textfield-outlined>select,.micl-textfield-outlined>textarea{margin:0px 3px 3px 3px;border:none;outline:1px solid var(--md-sys-color-outline)}.micl-textfield-outlined>input:disabled,.micl-textfield-outlined>select:disabled,.micl-textfield-outlined>textarea:disabled{outline-color:rgb(from var(--md-sys-color-on-surface) r g b/12%)}.micl-textfield-outlined>input:not(:disabled):focus,.micl-textfield-outlined>input:not(:disabled):focus-visible,.micl-textfield-outlined>input:not(:disabled):active,.micl-textfield-outlined>select:not(:disabled):focus,.micl-textfield-outlined>select:not(:disabled):focus-visible,.micl-textfield-outlined>select:not(:disabled):active,.micl-textfield-outlined>textarea:not(:disabled):focus,.micl-textfield-outlined>textarea:not(:disabled):focus-visible,.micl-textfield-outlined>textarea:not(:disabled):active{outline-width:3px;outline-color:var(--md-sys-color-primary)}.micl-textfield-outlined:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>label{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);margin-block-start:calc(-2px - var(--md-sys-typescale-body-small-line-height)/2);margin-inline-start:12px}.micl-textfield-outlined:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>.micl-textfield__prefix,.micl-textfield-outlined:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>.micl-textfield__suffix{opacity:1}.micl-textfield-filled.micl-textfield--error>label,.micl-textfield-filled.micl-textfield--error>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error>.micl-textfield__supporting-text,.micl-textfield-filled.micl-textfield--error>.micl-textfield__character-counter,.micl-textfield-outlined.micl-textfield--error>label,.micl-textfield-outlined.micl-textfield--error>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error>.micl-textfield__supporting-text,.micl-textfield-outlined.micl-textfield--error>.micl-textfield__character-counter{color:var(--md-sys-color-error)}.micl-textfield-filled.micl-textfield--error>input,.micl-textfield-filled.micl-textfield--error>textarea,.micl-textfield-outlined.micl-textfield--error>input,.micl-textfield-outlined.micl-textfield--error>textarea{border-block-end-color:var(--md-sys-color-error);outline-color:var(--md-sys-color-error);caret-color:var(--md-sys-color-error)}.micl-textfield-filled.micl-textfield--error>input:active,.micl-textfield-filled.micl-textfield--error>input:focus,.micl-textfield-filled.micl-textfield--error>input:focus-visible,.micl-textfield-filled.micl-textfield--error>textarea:active,.micl-textfield-filled.micl-textfield--error>textarea:focus,.micl-textfield-filled.micl-textfield--error>textarea:focus-visible,.micl-textfield-outlined.micl-textfield--error>input:active,.micl-textfield-outlined.micl-textfield--error>input:focus,.micl-textfield-outlined.micl-textfield--error>input:focus-visible,.micl-textfield-outlined.micl-textfield--error>textarea:active,.micl-textfield-outlined.micl-textfield--error>textarea:focus,.micl-textfield-outlined.micl-textfield--error>textarea:focus-visible{border-block-end-color:var(--md-sys-color-error);outline-color:var(--md-sys-color-error)}.micl-textfield-filled.micl-textfield--error:hover>label,.micl-textfield-filled.micl-textfield--error:hover>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:hover>label,.micl-textfield-outlined.micl-textfield--error:hover>.micl-textfield__icon-trailing{color:var(--md-sys-color-on-error-container)}.micl-textfield-filled.micl-textfield--error:hover>input,.micl-textfield-filled.micl-textfield--error:hover>textarea,.micl-textfield-outlined.micl-textfield--error:hover>input,.micl-textfield-outlined.micl-textfield--error:hover>textarea{border-block-end-color:var(--md-sys-color-on-error-container);outline-color:var(--md-sys-color-on-error-container)}.micl-textfield-filled.micl-textfield--error:has(>input:active)>label,.micl-textfield-filled.micl-textfield--error:has(>input:active)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>input:focus)>label,.micl-textfield-filled.micl-textfield--error:has(>input:focus)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>input:focus-visible)>label,.micl-textfield-filled.micl-textfield--error:has(>input:focus-visible)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>textarea:active)>label,.micl-textfield-filled.micl-textfield--error:has(>textarea:active)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>textarea:focus)>label,.micl-textfield-filled.micl-textfield--error:has(>textarea:focus)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>textarea:focus-visible)>label,.micl-textfield-filled.micl-textfield--error:has(>textarea:focus-visible)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>input:active)>label,.micl-textfield-outlined.micl-textfield--error:has(>input:active)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>input:focus)>label,.micl-textfield-outlined.micl-textfield--error:has(>input:focus)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>input:focus-visible)>label,.micl-textfield-outlined.micl-textfield--error:has(>input:focus-visible)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>textarea:active)>label,.micl-textfield-outlined.micl-textfield--error:has(>textarea:active)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>textarea:focus)>label,.micl-textfield-outlined.micl-textfield--error:has(>textarea:focus)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>textarea:focus-visible)>label,.micl-textfield-outlined.micl-textfield--error:has(>textarea:focus-visible)>.micl-textfield__icon-trailing{color:var(--md-sys-color-error)}[dir=rtl] .micl-textfield-filled>.micl-textfield__icon-leading,[dir=rtl] .micl-textfield-outlined>.micl-textfield__icon-leading{margin-inline:auto var(--md-sys-textfield-icon-space)}[dir=rtl] .micl-textfield-filled>.micl-textfield__icon-trailing,[dir=rtl] .micl-textfield-outlined>.micl-textfield__icon-trailing{margin-inline:var(--md-sys-textfield-icon-space) auto}
1
+ :root{--md-sys-icon-size: 24px;--md-sys-padding-xxs: 4px;--md-sys-padding-xs: 8px;--md-sys-padding-s: 12px;--md-sys-padding-m: 16px;--md-sys-padding-l: 20px;--md-sys-padding-xl: 24px;--md-sys-padding-xxl: 28px}.micl-hidden{display:none !important}.micl-no-transition{transition:none !important}.micl-flex--vcenter{display:flex;flex-direction:row;align-items:center}.micl-grid-field,.micl-grid-iconfield{box-sizing:border-box;display:grid;row-gap:var(--md-sys-padding-xl, 24px);background-color:inherit}.micl-grid-iconfield{grid-template-columns:48px 1fr}.micl-grid-iconfield__icon{grid-column:1;margin-block-start:.6rem}.micl-grid-iconfield__field{grid-column:2}.micl-link{display:flex;align-items:center;justify-content:center;text-decoration:none}@property --micl-ripple{syntax:"<integer>";inherits:false;initial-value:0}@property --micl-x{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-y{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-width{syntax:"<length>";inherits:true;initial-value:0px}@property --micl-height{syntax:"<length>";inherits:true;initial-value:0px}:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms;--md-sys-motion-path: linear}:root{--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-extra-small-top: 4px 4px 0 0;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-end: 0 16px 16px 0;--md-sys-shape-corner-large-start: 16px 0 0 16px;--md-sys-shape-corner-large-top: 16px 16px 0 0;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-top: 28px 28px 0 0;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-target-size: 48px;--md-sys-state-hover-state-layer-opacity: 8%;--md-sys-state-focus-state-layer-opacity: 10%;--md-sys-state-pressed-state-layer-opacity: 10%;--md-sys-state-dragged-state-layer-opacity: 16%;--md-sys-state-disabled-state-layer-opacity: 38%;--md-sys-state-backdrop-opacity: 32%;--md-sys-state-focus-indicator-inner-offset: -3px;--md-sys-state-focus-indicator-outer-offset: 2px;--md-sys-state-focus-indicator-thickness: 3px}@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-ref-typeface-plain: Google Sans, system-ui, sans-serif;--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;--md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-large-size: 3.5625rem;--md-sys-typescale-display-large-line-height: 4rem;--md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-large-tracking: -0.015625rem;--md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-medium-size: 2.8125rem;--md-sys-typescale-display-medium-line-height: 3.25rem;--md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-medium-tracking: 0;--md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-display-small-size: 2.25rem;--md-sys-typescale-display-small-line-height: 2.75rem;--md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-display-small-tracking: 0;--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;--md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-medium-size: 1.75rem;--md-sys-typescale-headline-medium-line-height: 2.25rem;--md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-medium-tracking: 0;--md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-headline-small-size: 1.5rem;--md-sys-typescale-headline-small-line-height: 2rem;--md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-headline-small-tracking: 0;--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;--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,009375rem;--md-sys-typescale-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-small-size: 0.875rem;--md-sys-typescale-title-small-line-height: 1.25rem;--md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-small-tracking: 0.00625rem;--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;--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.015625rem;--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem;--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;--md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-medium-size: 0.75rem;--md-sys-typescale-label-medium-line-height: 1rem;--md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-medium-tracking: 0.03125rem;--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;--md-sys-typescale-emphasized-display-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-large-size: 3.5625rem;--md-sys-typescale-emphasized-display-large-line-height: 4rem;--md-sys-typescale-emphasized-display-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-large-tracking: -0.015625rem;--md-sys-typescale-emphasized-display-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-medium-size: 2.8125rem;--md-sys-typescale-emphasized-display-medium-line-height: 3.25rem;--md-sys-typescale-emphasized-display-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-medium-tracking: 0;--md-sys-typescale-emphasized-display-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-display-small-size: 2.25rem;--md-sys-typescale-emphasized-display-small-line-height: 2.75rem;--md-sys-typescale-emphasized-display-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-display-small-tracking: 0;--md-sys-typescale-emphasized-headline-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-large-size: 2rem;--md-sys-typescale-emphasized-headline-large-line-height: 2.5rem;--md-sys-typescale-emphasized-headline-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-large-tracking: 0;--md-sys-typescale-emphasized-headline-medium-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-medium-size: 1.75rem;--md-sys-typescale-emphasized-headline-medium-line-height: 2.25rem;--md-sys-typescale-emphasized-headline-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-medium-tracking: 0;--md-sys-typescale-emphasized-headline-small-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-headline-small-size: 1.5rem;--md-sys-typescale-emphasized-headline-small-line-height: 2rem;--md-sys-typescale-emphasized-headline-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-headline-small-tracking: 0;--md-sys-typescale-emphasized-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-emphasized-title-large-size: 1.375rem;--md-sys-typescale-emphasized-title-large-line-height: 1.75rem;--md-sys-typescale-emphasized-title-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-title-large-tracking: 0;--md-sys-typescale-emphasized-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-medium-size: 1rem;--md-sys-typescale-emphasized-title-medium-line-height: 1.5rem;--md-sys-typescale-emphasized-title-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-medium-tracking: 0,009375rem;--md-sys-typescale-emphasized-title-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-title-small-size: 0.875rem;--md-sys-typescale-emphasized-title-small-line-height: 1.25rem;--md-sys-typescale-emphasized-title-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-title-small-tracking: 0.00625rem;--md-sys-typescale-emphasized-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-large-size: 1rem;--md-sys-typescale-emphasized-body-large-line-height: 1.5rem;--md-sys-typescale-emphasized-body-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-large-tracking: 0.03125rem;--md-sys-typescale-emphasized-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-medium-size: 0.875rem;--md-sys-typescale-emphasized-body-medium-line-height: 1.25rem;--md-sys-typescale-emphasized-body-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-medium-tracking: 0.015625rem;--md-sys-typescale-emphasized-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-body-small-size: 0.75rem;--md-sys-typescale-emphasized-body-small-line-height: 1rem;--md-sys-typescale-emphasized-body-small-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-emphasized-body-small-tracking: 0.025rem;--md-sys-typescale-emphasized-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-large-size: 0.875rem;--md-sys-typescale-emphasized-label-large-line-height: 1.25rem;--md-sys-typescale-emphasized-label-large-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-large-tracking: 0.00625rem;--md-sys-typescale-emphasized-label-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-medium-size: 0.75rem;--md-sys-typescale-emphasized-label-medium-line-height: 1rem;--md-sys-typescale-emphasized-label-medium-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-medium-tracking: 0.03125rem;--md-sys-typescale-emphasized-label-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-emphasized-label-small-size: 0.6875rem;--md-sys-typescale-emphasized-label-small-line-height: 1rem;--md-sys-typescale-emphasized-label-small-weight: var(--md-ref-typeface-weight-bold);--md-sys-typescale-emphasized-label-small-tracking: 0.03125rem}.md-sys-typescale-display-large{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking)}.md-sys-typescale-display-medium{font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking)}.md-sys-typescale-display-small{font-family:var(--md-sys-typescale-display-small-font);font-size:var(--md-sys-typescale-display-small-size);line-height:var(--md-sys-typescale-display-small-line-height);font-weight:var(--md-sys-typescale-display-small-weight);letter-spacing:var(--md-sys-typescale-display-small-tracking)}.md-sys-typescale-headline-large{font-family:var(--md-sys-typescale-headline-large-font);font-size:var(--md-sys-typescale-headline-large-size);line-height:var(--md-sys-typescale-headline-large-line-height);font-weight:var(--md-sys-typescale-headline-large-weight);letter-spacing:var(--md-sys-typescale-headline-large-tracking)}.md-sys-typescale-headline-medium{font-family:var(--md-sys-typescale-headline-medium-font);font-size:var(--md-sys-typescale-headline-medium-size);line-height:var(--md-sys-typescale-headline-medium-line-height);font-weight:var(--md-sys-typescale-headline-medium-weight);letter-spacing:var(--md-sys-typescale-headline-medium-tracking)}.md-sys-typescale-headline-small{font-family:var(--md-sys-typescale-headline-small-font);font-size:var(--md-sys-typescale-headline-small-size);line-height:var(--md-sys-typescale-headline-small-line-height);font-weight:var(--md-sys-typescale-headline-small-weight);letter-spacing:var(--md-sys-typescale-headline-small-tracking)}.md-sys-typescale-title-large{font-family:var(--md-sys-typescale-title-large-font);font-size:var(--md-sys-typescale-title-large-size);line-height:var(--md-sys-typescale-title-large-line-height);font-weight:var(--md-sys-typescale-title-large-weight);letter-spacing:var(--md-sys-typescale-title-large-tracking)}.md-sys-typescale-title-medium{font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking)}.md-sys-typescale-title-small{font-family:var(--md-sys-typescale-title-small-font);font-size:var(--md-sys-typescale-title-small-size);line-height:var(--md-sys-typescale-title-small-line-height);font-weight:var(--md-sys-typescale-title-small-weight);letter-spacing:var(--md-sys-typescale-title-small-tracking)}.md-sys-typescale-body-large{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking)}.md-sys-typescale-body-medium{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking)}.md-sys-typescale-body-small{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}.md-sys-typescale-label-large{font-family:var(--md-sys-typescale-label-large-font);font-size:var(--md-sys-typescale-label-large-size);line-height:var(--md-sys-typescale-label-large-line-height);font-weight:var(--md-sys-typescale-label-large-weight);letter-spacing:var(--md-sys-typescale-label-large-tracking)}.md-sys-typescale-label-medium{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking)}.md-sys-typescale-label-small{font-family:var(--md-sys-typescale-label-small-font);font-size:var(--md-sys-typescale-label-small-size);line-height:var(--md-sys-typescale-label-small-line-height);font-weight:var(--md-sys-typescale-label-small-weight);letter-spacing:var(--md-sys-typescale-label-small-tracking)}.md-sys-typescale-emphasized-display-large{font-family:var(--md-sys-typescale-emphasized-display-large-font);font-size:var(--md-sys-typescale-emphasized-display-large-size);line-height:var(--md-sys-typescale-emphasized-display-large-line-height);font-weight:var(--md-sys-typescale-emphasized-display-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-large-tracking)}.md-sys-typescale-emphasized-display-medium{font-family:var(--md-sys-typescale-emphasized-display-medium-font);font-size:var(--md-sys-typescale-emphasized-display-medium-size);line-height:var(--md-sys-typescale-emphasized-display-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-display-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-medium-tracking)}.md-sys-typescale-emphasized-display-small{font-family:var(--md-sys-typescale-emphasized-display-small-font);font-size:var(--md-sys-typescale-emphasized-display-small-size);line-height:var(--md-sys-typescale-emphasized-display-small-line-height);font-weight:var(--md-sys-typescale-emphasized-display-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-display-small-tracking)}.md-sys-typescale-emphasized-headline-large{font-family:var(--md-sys-typescale-emphasized-headline-large-font);font-size:var(--md-sys-typescale-emphasized-headline-large-size);line-height:var(--md-sys-typescale-emphasized-headline-large-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-large-tracking)}.md-sys-typescale-emphasized-headline-medium{font-family:var(--md-sys-typescale-emphasized-headline-medium-font);font-size:var(--md-sys-typescale-emphasized-headline-medium-size);line-height:var(--md-sys-typescale-emphasized-headline-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-medium-tracking)}.md-sys-typescale-emphasized-headline-small{font-family:var(--md-sys-typescale-emphasized-headline-small-font);font-size:var(--md-sys-typescale-emphasized-headline-small-size);line-height:var(--md-sys-typescale-emphasized-headline-small-line-height);font-weight:var(--md-sys-typescale-emphasized-headline-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-headline-small-tracking)}.md-sys-typescale-emphasized-title-large{font-family:var(--md-sys-typescale-emphasized-title-large-font);font-size:var(--md-sys-typescale-emphasized-title-large-size);line-height:var(--md-sys-typescale-emphasized-title-large-line-height);font-weight:var(--md-sys-typescale-emphasized-title-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-large-tracking)}.md-sys-typescale-emphasized-title-medium{font-family:var(--md-sys-typescale-emphasized-title-medium-font);font-size:var(--md-sys-typescale-emphasized-title-medium-size);line-height:var(--md-sys-typescale-emphasized-title-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-title-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-medium-tracking)}.md-sys-typescale-emphasized-title-small{font-family:var(--md-sys-typescale-emphasized-title-small-font);font-size:var(--md-sys-typescale-emphasized-title-small-size);line-height:var(--md-sys-typescale-emphasized-title-small-line-height);font-weight:var(--md-sys-typescale-emphasized-title-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-title-small-tracking)}.md-sys-typescale-emphasized-body-large{font-family:var(--md-sys-typescale-emphasized-body-large-font);font-size:var(--md-sys-typescale-emphasized-body-large-size);line-height:var(--md-sys-typescale-emphasized-body-large-line-height);font-weight:var(--md-sys-typescale-emphasized-body-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-large-tracking)}.md-sys-typescale-emphasized-body-medium{font-family:var(--md-sys-typescale-emphasized-body-medium-font);font-size:var(--md-sys-typescale-emphasized-body-medium-size);line-height:var(--md-sys-typescale-emphasized-body-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-body-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-medium-tracking)}.md-sys-typescale-emphasized-body-small{font-family:var(--md-sys-typescale-emphasized-body-small-font);font-size:var(--md-sys-typescale-emphasized-body-small-size);line-height:var(--md-sys-typescale-emphasized-body-small-line-height);font-weight:var(--md-sys-typescale-emphasized-body-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-body-small-tracking)}.md-sys-typescale-emphasized-label-large{font-family:var(--md-sys-typescale-emphasized-label-large-font);font-size:var(--md-sys-typescale-emphasized-label-large-size);line-height:var(--md-sys-typescale-emphasized-label-large-line-height);font-weight:var(--md-sys-typescale-emphasized-label-large-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-large-tracking)}.md-sys-typescale-emphasized-label-medium{font-family:var(--md-sys-typescale-emphasized-label-medium-font);font-size:var(--md-sys-typescale-emphasized-label-medium-size);line-height:var(--md-sys-typescale-emphasized-label-medium-line-height);font-weight:var(--md-sys-typescale-emphasized-label-medium-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-medium-tracking)}.md-sys-typescale-emphasized-label-small{font-family:var(--md-sys-typescale-emphasized-label-small-font);font-size:var(--md-sys-typescale-emphasized-label-small-size);line-height:var(--md-sys-typescale-emphasized-label-small-line-height);font-weight:var(--md-sys-typescale-emphasized-label-small-weight);letter-spacing:var(--md-sys-typescale-emphasized-label-small-tracking)}.micl-textfield-filled,.micl-textfield-outlined{--md-sys-textfield-height: 56px;--md-sys-textfield-icon-size: 24px;--md-sys-textfield-icon-space: 12px;--md-sys-textfield-input-space: 16px;--md-sys-textfield-prefix-space: 1em;--md-sys-textfield-suffix-space: 1em;--md-sys-textfield-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-sys-textfield-motion-duration: 300ms;--md-sys-textfield-motion-duration-reverse: 200ms;display:grid;grid-template-areas:"textfield" "supporting";align-items:center;background-color:inherit}.micl-textfield-filled>label,.micl-textfield-outlined>label{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:content-box;grid-area:textfield;align-self:flex-start;width:fit-content;padding-inline:4px;margin-block-start:calc((var(--md-sys-textfield-height) - var(--md-sys-typescale-body-large-line-height))/2);margin-inline:12px 4px;border-radius:4px;background-color:inherit;color:var(--md-sys-color-on-surface-variant);z-index:1;transition:margin-block-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),margin-inline-start var(--md-sys-textfield-motion-duration) var(--md-sys-textfield-motion-effects),font-size var(--md-sys-textfield-motion-duration) linear,letter-spacing var(--md-sys-textfield-motion-duration) linear}.micl-textfield-filled>input,.micl-textfield-filled>select,.micl-textfield-filled>textarea,.micl-textfield-outlined>input,.micl-textfield-outlined>select,.micl-textfield-outlined>textarea{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;grid-area:textfield;margin:0;padding-inline:var(--md-sys-textfield-input-space);border:none;border-block-end:1px solid var(--md-sys-color-on-surface-variant);border-radius:var(--md-sys-shape-corner-extra-small);outline:none;color:var(--md-sys-color-on-surface);background-color:rgba(0,0,0,0);text-overflow:ellipsis;caret-color:var(--md-sys-color-primary)}.micl-textfield-filled>input:disabled,.micl-textfield-filled>select:disabled,.micl-textfield-filled>textarea:disabled,.micl-textfield-outlined>input:disabled,.micl-textfield-outlined>select:disabled,.micl-textfield-outlined>textarea:disabled{border-block-end-color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%));color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}.micl-textfield-filled>input::placeholder,.micl-textfield-filled>select::placeholder,.micl-textfield-filled>textarea::placeholder,.micl-textfield-outlined>input::placeholder,.micl-textfield-outlined>select::placeholder,.micl-textfield-outlined>textarea::placeholder{color:var(--md-sys-color-on-surface-variant)}.micl-textfield-filled>input::-webkit-inner-spin-button,.micl-textfield-filled>input::-webkit-outer-spin-button,.micl-textfield-filled>select::-webkit-inner-spin-button,.micl-textfield-filled>select::-webkit-outer-spin-button,.micl-textfield-filled>textarea::-webkit-inner-spin-button,.micl-textfield-filled>textarea::-webkit-outer-spin-button,.micl-textfield-outlined>input::-webkit-inner-spin-button,.micl-textfield-outlined>input::-webkit-outer-spin-button,.micl-textfield-outlined>select::-webkit-inner-spin-button,.micl-textfield-outlined>select::-webkit-outer-spin-button,.micl-textfield-outlined>textarea::-webkit-inner-spin-button,.micl-textfield-outlined>textarea::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.micl-textfield-filled>input[type=number],.micl-textfield-filled>select[type=number],.micl-textfield-filled>textarea[type=number],.micl-textfield-outlined>input[type=number],.micl-textfield-outlined>select[type=number],.micl-textfield-outlined>textarea[type=number]{-moz-appearance:textfield}.micl-textfield-filled>input,.micl-textfield-filled>select,.micl-textfield-outlined>input,.micl-textfield-outlined>select{height:var(--md-sys-textfield-height);padding-block:0}.micl-textfield-filled>textarea,.micl-textfield-outlined>textarea{min-height:var(--md-sys-textfield-height);padding-block:calc((var(--md-sys-textfield-height) - var(--md-sys-typescale-body-large-line-height))/2);resize:none}.micl-textfield-filled>textarea[rows],.micl-textfield-outlined>textarea[rows]{padding-block-start:0;border-block-start:8px solid rgba(0,0,0,0);overflow:hidden}.micl-textfield-filled>textarea:not([rows]),.micl-textfield-outlined>textarea:not([rows]){field-sizing:content}.micl-textfield-filled>.micl-textfield__prefix,.micl-textfield-filled>.micl-textfield__suffix,.micl-textfield-outlined>.micl-textfield__prefix,.micl-textfield-outlined>.micl-textfield__suffix{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);grid-area:textfield;align-content:center;height:var(--md-sys-textfield-height);color:var(--md-sys-color-on-surface-variant);opacity:0;z-index:1;transition:opacity var(--md-sys-textfield-motion-duration-reverse) linear}.micl-textfield-filled>.micl-textfield__prefix,.micl-textfield-outlined>.micl-textfield__prefix{width:var(--md-sys-textfield-prefix-space);padding-inline-start:var(--md-sys-textfield-input-space)}.micl-textfield-filled>.micl-textfield__suffix,.micl-textfield-outlined>.micl-textfield__suffix{width:var(--md-sys-textfield-suffix-space);padding-inline-end:var(--md-sys-textfield-input-space);margin-inline:auto 0}.micl-textfield-filled>.micl-textfield__icon-leading,.micl-textfield-filled>.micl-textfield__icon-trailing,.micl-textfield-outlined>.micl-textfield__icon-leading,.micl-textfield-outlined>.micl-textfield__icon-trailing{grid-area:textfield;width:1em;margin-inline:var(--md-sys-textfield-icon-space) auto;font-size:var(--md-sys-textfield-icon-size);color:var(--md-sys-color-on-surface-variant);z-index:1}.micl-textfield-filled>.micl-textfield__icon-trailing,.micl-textfield-outlined>.micl-textfield__icon-trailing{margin-inline:auto var(--md-sys-textfield-icon-space)}.micl-textfield-filled:has(>.micl-textfield__prefix)>input,.micl-textfield-filled:has(>.micl-textfield__prefix)>textarea,.micl-textfield-outlined:has(>.micl-textfield__prefix)>input,.micl-textfield-outlined:has(>.micl-textfield__prefix)>textarea{padding-inline-start:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-prefix-space))}.micl-textfield-filled:has(>.micl-textfield__suffix)>input,.micl-textfield-filled:has(>.micl-textfield__suffix)>textarea,.micl-textfield-outlined:has(>.micl-textfield__suffix)>input,.micl-textfield-outlined:has(>.micl-textfield__suffix)>textarea{padding-inline-end:calc(var(--md-sys-textfield-suffix-space) + var(--md-sys-textfield-input-space))}.micl-textfield-filled:has(>.micl-textfield__icon-leading)>label,.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-input-space))}.micl-textfield-filled:has(>.micl-textfield__icon-leading)>.micl-textfield__prefix,.micl-textfield-filled:has(>.micl-textfield__icon-leading)>input,.micl-textfield-filled:has(>.micl-textfield__icon-leading)>textarea,.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>.micl-textfield__prefix,.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>input,.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>textarea{padding-inline-start:calc(var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-input-space))}.micl-textfield-filled:has(>.micl-textfield__icon-leading):has(>.micl-textfield__prefix)>input,.micl-textfield-filled:has(>.micl-textfield__icon-leading):has(>.micl-textfield__prefix)>textarea,.micl-textfield-outlined:has(>.micl-textfield__icon-leading):has(>.micl-textfield__prefix)>input,.micl-textfield-outlined:has(>.micl-textfield__icon-leading):has(>.micl-textfield__prefix)>textarea{padding-inline-start:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-icon-space) + var(--md-sys-textfield-prefix-space))}.micl-textfield-filled:has(>.micl-textfield__icon-trailing)>.micl-textfield__suffix,.micl-textfield-filled:has(>.micl-textfield__icon-trailing)>input,.micl-textfield-filled:has(>.micl-textfield__icon-trailing)>textarea,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing)>.micl-textfield__suffix,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing)>input,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing)>textarea{padding-inline-end:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-icon-space))}.micl-textfield-filled:has(>.micl-textfield__icon-trailing):has(>.micl-textfield__suffix)>input,.micl-textfield-filled:has(>.micl-textfield__icon-trailing):has(>.micl-textfield__suffix)>textarea,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing):has(>.micl-textfield__suffix)>input,.micl-textfield-outlined:has(>.micl-textfield__icon-trailing):has(>.micl-textfield__suffix)>textarea{padding-inline-end:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-prefix-space) + var(--md-sys-textfield-icon-space))}.micl-textfield-filled>.micl-textfield__supporting-text,.micl-textfield-filled>.micl-textfield__character-counter,.micl-textfield-outlined>.micl-textfield__supporting-text,.micl-textfield-outlined>.micl-textfield__character-counter{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);grid-area:supporting;padding-block:4px 0;padding-inline:16px;color:var(--md-sys-color-on-surface-variant)}.micl-textfield-filled>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled>.micl-textfield__character-counter.micl-textfield__supporting-text--focus,.micl-textfield-outlined>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined>.micl-textfield__character-counter.micl-textfield__supporting-text--focus{visibility:hidden}.micl-textfield-filled>.micl-textfield__character-counter,.micl-textfield-outlined>.micl-textfield__character-counter{justify-self:flex-end}.micl-textfield-filled:has(>input:active)>label,.micl-textfield-filled:has(>select:active)>label,.micl-textfield-filled:has(>textarea:active)>label,.micl-textfield-filled:has(>input:focus)>label,.micl-textfield-filled:has(>select:focus)>label,.micl-textfield-filled:has(>textarea:focus)>label,.micl-textfield-filled:has(>input:focus-visible)>label,.micl-textfield-filled:has(>select:focus-visible)>label,.micl-textfield-filled:has(>textarea:focus-visible)>label,.micl-textfield-outlined:has(>input:active)>label,.micl-textfield-outlined:has(>select:active)>label,.micl-textfield-outlined:has(>textarea:active)>label,.micl-textfield-outlined:has(>input:focus)>label,.micl-textfield-outlined:has(>select:focus)>label,.micl-textfield-outlined:has(>textarea:focus)>label,.micl-textfield-outlined:has(>input:focus-visible)>label,.micl-textfield-outlined:has(>select:focus-visible)>label,.micl-textfield-outlined:has(>textarea:focus-visible)>label{color:var(--md-sys-color-primary)}.micl-textfield-filled:has(>input:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>select:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>textarea:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>input:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>select:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>textarea:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>input:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>select:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-filled:has(>textarea:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>input:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>select:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>textarea:active)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>input:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>select:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>textarea:focus)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>input:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>select:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus,.micl-textfield-outlined:has(>textarea:focus-visible)>.micl-textfield__supporting-text.micl-textfield__supporting-text--focus{visibility:visible}.micl-textfield-filled:has(>input:disabled)>label,.micl-textfield-filled:has(>select:disabled)>label,.micl-textfield-filled:has(>textarea:disabled)>label,.micl-textfield-outlined:has(>input:disabled)>label,.micl-textfield-outlined:has(>select:disabled)>label,.micl-textfield-outlined:has(>textarea:disabled)>label{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}.micl-textfield-filled:has(>input:disabled)>.micl-textfield__icon-leading,.micl-textfield-filled:has(>input:disabled)>.micl-textfield__icon-trailing,.micl-textfield-filled:has(>input:disabled)>.micl-textfield__supporting-text,.micl-textfield-filled:has(>select:disabled)>.micl-textfield__icon-leading,.micl-textfield-filled:has(>select:disabled)>.micl-textfield__icon-trailing,.micl-textfield-filled:has(>select:disabled)>.micl-textfield__supporting-text,.micl-textfield-filled:has(>textarea:disabled)>.micl-textfield__icon-leading,.micl-textfield-filled:has(>textarea:disabled)>.micl-textfield__icon-trailing,.micl-textfield-filled:has(>textarea:disabled)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>input:disabled)>.micl-textfield__icon-leading,.micl-textfield-outlined:has(>input:disabled)>.micl-textfield__icon-trailing,.micl-textfield-outlined:has(>input:disabled)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>select:disabled)>.micl-textfield__icon-leading,.micl-textfield-outlined:has(>select:disabled)>.micl-textfield__icon-trailing,.micl-textfield-outlined:has(>select:disabled)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>textarea:disabled)>.micl-textfield__icon-leading,.micl-textfield-outlined:has(>textarea:disabled)>.micl-textfield__icon-trailing,.micl-textfield-outlined:has(>textarea:disabled)>.micl-textfield__supporting-text{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}.micl-textfield-filled:has(>input:disabled)>.micl-textfield__character-counter,.micl-textfield-filled:has(>select:disabled)>.micl-textfield__character-counter,.micl-textfield-filled:has(>textarea:disabled)>.micl-textfield__character-counter,.micl-textfield-outlined:has(>input:disabled)>.micl-textfield__character-counter,.micl-textfield-outlined:has(>select:disabled)>.micl-textfield__character-counter,.micl-textfield-outlined:has(>textarea:disabled)>.micl-textfield__character-counter{display:none}.micl-textfield-filled:has(>input:not([maxlength]))>.micl-textfield__character-counter,.micl-textfield-filled:has(>textarea:not([maxlength]))>.micl-textfield__character-counter,.micl-textfield-outlined:has(>input:not([maxlength]))>.micl-textfield__character-counter,.micl-textfield-outlined:has(>textarea:not([maxlength]))>.micl-textfield__character-counter{display:none}.micl-textfield-filled:has(>input[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text,.micl-textfield-filled:has(>textarea[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>input[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text,.micl-textfield-outlined:has(>textarea[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text{padding-inline-end:64px}.micl-textfield-filled>label{background-color:rgba(0,0,0,0)}.micl-textfield-filled:hover>input:not(:disabled),.micl-textfield-filled:hover>select:not(:disabled),.micl-textfield-filled:hover>textarea:not(:disabled){--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%);border-block-end-color:var(--md-sys-color-on-surface)}.micl-textfield-filled>input,.micl-textfield-filled>select,.micl-textfield-filled>textarea{--statelayer-color: var(--md-sys-color-on-surface);padding-block-start:18px;padding-block-end:2px;border-end-start-radius:0;border-end-end-radius:0;outline:none;background-color:var(--md-sys-color-surface-container-highest);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;transition:--statelayer-opacity var(--md-sys-textfield-motion-duration) linear}.micl-textfield-filled>input:disabled,.micl-textfield-filled>select:disabled,.micl-textfield-filled>textarea:disabled{background-color:rgb(from var(--md-sys-color-on-surface) r g b/4%)}.micl-textfield-filled>input:not(:disabled):focus,.micl-textfield-filled>input:not(:disabled):focus-visible,.micl-textfield-filled>input:not(:disabled):active,.micl-textfield-filled>select:not(:disabled):focus,.micl-textfield-filled>select:not(:disabled):focus-visible,.micl-textfield-filled>select:not(:disabled):active,.micl-textfield-filled>textarea:not(:disabled):focus,.micl-textfield-filled>textarea:not(:disabled):focus-visible,.micl-textfield-filled>textarea:not(:disabled):active{padding-block-end:0px;border-block-end-width:3px;border-block-end-color:var(--md-sys-color-primary)}.micl-textfield-filled>input{width:100%}.micl-textfield-filled>textarea{padding-block-start:24px}.micl-textfield-filled:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>label{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);margin-block-start:8px;margin-inline-start:12px}.micl-textfield-filled:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue]):has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--md-sys-textfield-input-space) + var(--md-sys-textfield-icon-size) + var(--md-sys-textfield-icon-space) - 4px)}.micl-textfield-filled:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>.micl-textfield__prefix,.micl-textfield-filled:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>.micl-textfield__suffix{height:40px;margin-block-start:16px;opacity:1}.micl-textfield-outlined{margin-block-start:calc(2px + var(--md-sys-typescale-body-small-line-height)/2)}.micl-textfield-outlined:hover>label{color:var(--md-sys-color-on-surface)}.micl-textfield-outlined:hover>input:not(:disabled),.micl-textfield-outlined:hover>select:not(:disabled),.micl-textfield-outlined:hover>textarea:not(:disabled){outline-color:var(--md-sys-color-on-surface);color:var(--md-sys-color-on-surface)}.micl-textfield-outlined>input,.micl-textfield-outlined>select,.micl-textfield-outlined>textarea{margin:0px 3px 3px 3px;border:none;outline:1px solid var(--md-sys-color-outline)}.micl-textfield-outlined>input:disabled,.micl-textfield-outlined>select:disabled,.micl-textfield-outlined>textarea:disabled{outline-color:rgb(from var(--md-sys-color-on-surface) r g b/12%)}.micl-textfield-outlined>input:not(:disabled):focus,.micl-textfield-outlined>input:not(:disabled):focus-visible,.micl-textfield-outlined>input:not(:disabled):active,.micl-textfield-outlined>select:not(:disabled):focus,.micl-textfield-outlined>select:not(:disabled):focus-visible,.micl-textfield-outlined>select:not(:disabled):active,.micl-textfield-outlined>textarea:not(:disabled):focus,.micl-textfield-outlined>textarea:not(:disabled):focus-visible,.micl-textfield-outlined>textarea:not(:disabled):active{outline-width:3px;outline-color:var(--md-sys-color-primary)}.micl-textfield-outlined>input{width:calc(100% - 3px - 3px)}.micl-textfield-outlined:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>label{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);margin-block-start:calc(-2px - var(--md-sys-typescale-body-small-line-height)/2);margin-inline-start:12px}.micl-textfield-outlined:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>.micl-textfield__prefix,.micl-textfield-outlined:has(>input:focus,>input[value]:not([value=""]):not([data-miclinitialized]),>input[data-miclvalue],>input[type=date],>input[type=datetime-local],>input[type=month],>input[type=time],>input[type=week],>select:focus,>select:not([data-miclinitialized]) option:checked:not([value=""]),>select[data-miclvalue],>textarea:focus,>textarea:not(:empty):not([data-miclinitialized]),>textarea[data-miclvalue])>.micl-textfield__suffix{opacity:1}.micl-textfield-filled.micl-textfield--error>label,.micl-textfield-filled.micl-textfield--error>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error>.micl-textfield__supporting-text,.micl-textfield-filled.micl-textfield--error>.micl-textfield__character-counter,.micl-textfield-outlined.micl-textfield--error>label,.micl-textfield-outlined.micl-textfield--error>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error>.micl-textfield__supporting-text,.micl-textfield-outlined.micl-textfield--error>.micl-textfield__character-counter{color:var(--md-sys-color-error)}.micl-textfield-filled.micl-textfield--error>input,.micl-textfield-filled.micl-textfield--error>textarea,.micl-textfield-outlined.micl-textfield--error>input,.micl-textfield-outlined.micl-textfield--error>textarea{border-block-end-color:var(--md-sys-color-error);outline-color:var(--md-sys-color-error);caret-color:var(--md-sys-color-error)}.micl-textfield-filled.micl-textfield--error>input:active,.micl-textfield-filled.micl-textfield--error>input:focus,.micl-textfield-filled.micl-textfield--error>input:focus-visible,.micl-textfield-filled.micl-textfield--error>textarea:active,.micl-textfield-filled.micl-textfield--error>textarea:focus,.micl-textfield-filled.micl-textfield--error>textarea:focus-visible,.micl-textfield-outlined.micl-textfield--error>input:active,.micl-textfield-outlined.micl-textfield--error>input:focus,.micl-textfield-outlined.micl-textfield--error>input:focus-visible,.micl-textfield-outlined.micl-textfield--error>textarea:active,.micl-textfield-outlined.micl-textfield--error>textarea:focus,.micl-textfield-outlined.micl-textfield--error>textarea:focus-visible{border-block-end-color:var(--md-sys-color-error);outline-color:var(--md-sys-color-error)}.micl-textfield-filled.micl-textfield--error:hover>label,.micl-textfield-filled.micl-textfield--error:hover>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:hover>label,.micl-textfield-outlined.micl-textfield--error:hover>.micl-textfield__icon-trailing{color:var(--md-sys-color-on-error-container)}.micl-textfield-filled.micl-textfield--error:hover>input,.micl-textfield-filled.micl-textfield--error:hover>textarea,.micl-textfield-outlined.micl-textfield--error:hover>input,.micl-textfield-outlined.micl-textfield--error:hover>textarea{border-block-end-color:var(--md-sys-color-on-error-container);outline-color:var(--md-sys-color-on-error-container)}.micl-textfield-filled.micl-textfield--error:has(>input:active)>label,.micl-textfield-filled.micl-textfield--error:has(>input:active)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>input:focus)>label,.micl-textfield-filled.micl-textfield--error:has(>input:focus)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>input:focus-visible)>label,.micl-textfield-filled.micl-textfield--error:has(>input:focus-visible)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>textarea:active)>label,.micl-textfield-filled.micl-textfield--error:has(>textarea:active)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>textarea:focus)>label,.micl-textfield-filled.micl-textfield--error:has(>textarea:focus)>.micl-textfield__icon-trailing,.micl-textfield-filled.micl-textfield--error:has(>textarea:focus-visible)>label,.micl-textfield-filled.micl-textfield--error:has(>textarea:focus-visible)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>input:active)>label,.micl-textfield-outlined.micl-textfield--error:has(>input:active)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>input:focus)>label,.micl-textfield-outlined.micl-textfield--error:has(>input:focus)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>input:focus-visible)>label,.micl-textfield-outlined.micl-textfield--error:has(>input:focus-visible)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>textarea:active)>label,.micl-textfield-outlined.micl-textfield--error:has(>textarea:active)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>textarea:focus)>label,.micl-textfield-outlined.micl-textfield--error:has(>textarea:focus)>.micl-textfield__icon-trailing,.micl-textfield-outlined.micl-textfield--error:has(>textarea:focus-visible)>label,.micl-textfield-outlined.micl-textfield--error:has(>textarea:focus-visible)>.micl-textfield__icon-trailing{color:var(--md-sys-color-error)}[dir=rtl] .micl-textfield-filled>.micl-textfield__icon-leading,[dir=rtl] .micl-textfield-outlined>.micl-textfield__icon-leading{margin-inline:auto var(--md-sys-textfield-icon-space)}[dir=rtl] .micl-textfield-filled>.micl-textfield__icon-trailing,[dir=rtl] .micl-textfield-outlined>.micl-textfield__icon-trailing{margin-inline:var(--md-sys-textfield-icon-space) auto}
package/docs/accordion.html CHANGED
@@ -31,7 +31,7 @@
31
31
  <div class="micl-pane__column">
32
32
  <div class="micl-card-elevated">
33
33
  <div class="micl-card__content">
34
- <div class="micl-list" role="listbox">
34
+ <div class="micl-list">
35
35
  <details name="accordion1">
36
36
  <summary class="micl-list-item-one">
37
37
  <span class="micl-list-item__text">
@@ -55,7 +55,7 @@
55
55
  </div>
56
56
  </details>
57
57
  </div>
58
- <div class="micl-list" role="listbox">
58
+ <div class="micl-list">
59
59
  <details name="accordion2">
60
60
  <summary class="micl-list-item-two">
61
61
  <span class="micl-list-item__text">
@@ -87,7 +87,7 @@
87
87
  </div>
88
88
  </details>
89
89
  </div>
90
- <div class="micl-list" role="listbox">
90
+ <div class="micl-list">
91
91
  <details name="accordion3">
92
92
  <summary class="micl-list-item-three">
93
93
  <span class="micl-list-item__text">
@@ -119,7 +119,7 @@
119
119
  <div class="micl-pane__column">
120
120
  <div class="micl-card-filled">
121
121
  <div class="micl-card__content" style="--md-sys-accordion-item-space:4px">
122
- <div class="micl-list" role="listbox">
122
+ <div class="micl-list">
123
123
  <details name="accordion4">
124
124
  <summary class="micl-list-item-one">
125
125
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
@@ -151,7 +151,7 @@
151
151
  </div>
152
152
  </details>
153
153
  </div>
154
- <div class="micl-list" role="listbox">
154
+ <div class="micl-list">
155
155
  <details name="accordion5">
156
156
  <summary class="micl-list-item-two">
157
157
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
@@ -179,7 +179,7 @@
179
179
  </div>
180
180
  </details>
181
181
  </div>
182
- <div class="micl-list" role="listbox">
182
+ <div class="micl-list">
183
183
  <details name="accordion6">
184
184
  <summary class="micl-list-item-three">
185
185
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
@@ -213,7 +213,7 @@
213
213
  <div class="micl-pane__column">
214
214
  <div class="micl-card-outlined">
215
215
  <div class="micl-card__content">
216
- <div class="micl-list" role="listbox">
216
+ <div class="micl-list">
217
217
  <details name="accordion7">
218
218
  <summary class="micl-list-item-one">
219
219
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Large_cloud_over_Mexican_landscape.jpg/330px-Large_cloud_over_Mexican_landscape.jpg)"></span>
@@ -239,7 +239,7 @@
239
239
  </div>
240
240
  </details>
241
241
  </div>
242
- <div class="micl-list" role="listbox">
242
+ <div class="micl-list">
243
243
  <details name="accordion8">
244
244
  <summary class="micl-list-item-two">
245
245
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/San_Juan_River_at_Pagosa_Springs_with_balloons.jpg/330px-San_Juan_River_at_Pagosa_Springs_with_balloons.jpg)"></span>
@@ -267,7 +267,7 @@
267
267
  </div>
268
268
  </details>
269
269
  </div>
270
- <div class="micl-list" role="listbox">
270
+ <div class="micl-list">
271
271
  <details name="accordion9">
272
272
  <summary class="micl-list-item-three">
273
273
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg/330px-N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg)"></span>
@@ -306,7 +306,7 @@
306
306
  <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
307
307
  </div>
308
308
  <div class="micl-card__content docs-code">
309
- <pre tabindex="-1"><code>&lt;div class="micl-list" role="listbox"&gt;
309
+ <pre tabindex="-1"><code>&lt;div class="micl-list"&gt;
310
310
  &lt;details name="accordion"&gt;
311
311
  &lt;summary class="micl-list-item-two"&gt;
312
312
  &lt;span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true"&gt;settings&lt;/span&gt;
package/docs/dialog.html CHANGED
@@ -40,23 +40,22 @@
40
40
  </div>
41
41
  <p class="micl-card__supporting-text">Click a button to open one of the MICL dialogs.</p>
42
42
  <div class="micl-card__content docs-buttons">
43
- <dialog id="mydialog1" class="micl-dialog" style="width:300px" popover closedby="any" role="alertdialog" aria-labelledby="mytitle1">
43
+ <dialog id="mydialog1" class="micl-dialog" style="width:300px" popover closedby="any" aria-labelledby="mytitle1">
44
44
  <div class="micl-dialog__headline">
45
45
  <h2 id="mytitle1">Basic dialog</h2>
46
46
  <span class="micl-dialog__supporting-text">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</span>
47
47
  </div>
48
48
  <div class="micl-dialog__actions">
49
- <button type="button" class="micl-button-text-s" popovertarget="mydialog1">Cancel</button>
50
- <button type="button" class="micl-button-text-s">Action</button>
49
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog1" autofocus>OK</button>
51
50
  </div>
52
51
  </dialog>
53
52
  <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog1">Open Basic Dialog</button>
54
53
 
55
- <dialog id="mydialog2" class="micl-dialog" style="width:400px" popover closedby="any" role="alertdialog" aria-labelledby="mytitle2">
54
+ <dialog id="mydialog2" class="micl-dialog" style="width:400px" popover closedby="any" aria-labelledby="mytitle2" aria-describedby="mydesc2">
56
55
  <div class="micl-dialog__headline">
57
56
  <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">restart_alt</span>
58
57
  <h2 id="mytitle2">Reset settings?</h2>
59
- <span class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
58
+ <span id="mydesc2" class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
60
59
  </div>
61
60
  <div class="micl-dialog__content">
62
61
  <hr class="micl-divider">
@@ -83,39 +82,39 @@
83
82
  <hr class="micl-divider">
84
83
  </div>
85
84
  <div class="micl-dialog__actions">
86
- <button type="button" class="micl-button-text-s" popovertarget="mydialog2">Cancel</button>
85
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog2" autofocus>Cancel</button>
87
86
  <button type="button" class="micl-button-text-s">Accept</button>
88
87
  </div>
89
88
  </dialog>
90
89
  <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog2">Open Dialog</button>
91
90
 
92
- <dialog id="mydialog3" class="micl-dialog" style="width:350px" role="alertdialog" closedby="closerequest" aria-labelledby="mytitle3">
91
+ <dialog id="mydialog3" class="micl-dialog" style="width:350px" closedby="none" role="alertdialog" aria-labelledby="mytitle3" aria-describedby="mydesc3">
93
92
  <div class="micl-dialog__headline">
94
93
  <h2 id="mytitle3">Delete selected images?</h2>
95
- <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
94
+ <span id="mydesc3" class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
96
95
  </div>
97
96
  <form method="dialog" class="micl-dialog__actions">
98
- <button class="micl-button-text-s" value="donotdelete">Cancel</button>
97
+ <button class="micl-button-text-s" autofocus>Cancel</button>
99
98
  <button class="micl-button-text-s" value="dodelete">Delete</button>
100
99
  </form>
101
100
  </dialog>
102
101
  <button type="button" class="micl-button-outlined-m micl-button--square" commandfor="mydialog3" command="show-modal">Open Modal Dialog</button>
103
102
 
104
- <dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" popover role="alertdialog" closedby="closerequest" aria-labelledby="mytitle4">
103
+ <dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" popover closedby="closerequest" aria-labelledby="mytitle4">
105
104
  <div class="micl-dialog__headline">
106
105
  <h2 id="mytitle4">Delete selected images?</h2>
107
106
  <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
108
107
  </div>
109
108
  <div class="micl-dialog__actions">
110
- <button class="micl-button-text-s" value="donotdelete" popovertarget="mydialog4">Cancel</button>
111
- <button class="micl-button-text-s" value="dodelete">Delete</button>
109
+ <button class="micl-button-text-s" popovertarget="mydialog4" autofocus>Cancel</button>
110
+ <button class="micl-button-text-s">Delete</button>
112
111
  </div>
113
112
  </dialog>
114
113
  <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog4" style="anchor-name:--myanchor">Open Anchored Dialog</button>
115
114
 
116
- <dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen" popover closedby="none" aria-labelledby="mytitle5">
115
+ <dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen" closedby="none" aria-labelledby="mytitle5">
117
116
  <form method="dialog" class="micl-dialog__headline">
118
- <button type="button" class="micl-dialog__fullscreen micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mydialog5" aria-label="Close">close</button>
117
+ <button class="micl-dialog__fullscreen micl-iconbutton-standard-s material-symbols-outlined" aria-label="Close">close</button>
119
118
  <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
120
119
  <h2 id="mytitle5">Personal info</h2>
121
120
  <button class="micl-dialog__fullscreen micl-button-text-s" value="dosave">Save</button>
@@ -159,11 +158,11 @@
159
158
  </div>
160
159
  </div>
161
160
  <form method="dialog" class="micl-dialog__actions">
162
- <button type="button" class="micl-button-text-s" popovertarget="mydialog5">Cancel</button>
161
+ <button class="micl-button-text-s">Cancel</button>
163
162
  <button class="micl-button-text-s" value="dosave">Save</button>
164
163
  </form>
165
164
  </dialog>
166
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog5">Open Full-Screen Dialog</button>
165
+ <button type="button" class="micl-button-outlined-m micl-button--square" command="show-modal" commandfor="mydialog5">Open Full-Screen Dialog</button>
167
166
  </div>
168
167
  </div>
169
168
  </div>
@@ -174,14 +173,13 @@
174
173
  <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
175
174
  </div>
176
175
  <div class="micl-card__content docs-code">
177
- <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover&gt;
176
+ <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog" style="width:300px" closedby="any" popover&gt;
178
177
  &lt;div class="micl-dialog__headline"&gt;
179
178
  &lt;h2&gt;Basic dialog&lt;/h2&gt;
180
179
  &lt;span class="micl-dialog__supporting-text"&gt;A dialog is a type of modal window.&lt;/span&gt;
181
180
  &lt;/div&gt;
182
181
  &lt;div class="micl-dialog__actions"&gt;
183
- &lt;button type="button" class="micl-button-text-s" popovertarget="id0"&gt;Cancel&lt;/button&gt;
184
- &lt;button type="button" class="micl-button-text-s"&gt;Action&lt;/button&gt;
182
+ &lt;button type="button" class="micl-button-text-s" popovertarget="id0"&gt;OK&lt;/button&gt;
185
183
  &lt;/div&gt;
186
184
  &lt;/dialog&gt;</code></pre>
187
185
  </div>