material-inspired-component-library 6.0.2 → 6.0.3

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 (43) hide show
  1. package/components/select/index.scss +3 -0
  2. package/components/snackbar/index.scss +78 -0
  3. package/components/snackbar/index.ts +56 -0
  4. package/components/stepper/README.md +1 -1
  5. package/components/stepper/index.ts +6 -2
  6. package/components/textfield/index.scss +1 -1
  7. package/dist/components/snackbar/index.d.ts +5 -0
  8. package/dist/micl.css +1 -1
  9. package/dist/micl.js +1 -1
  10. package/dist/select.css +1 -1
  11. package/dist/snackbar.css +1 -0
  12. package/dist/snackbar.js +1 -0
  13. package/dist/textfield.css +1 -1
  14. package/docs/accordion.html +5 -6
  15. package/docs/alert.html +5 -6
  16. package/docs/bottomsheet.html +23 -24
  17. package/docs/button.html +7 -8
  18. package/docs/card.html +5 -6
  19. package/docs/checkbox.html +5 -6
  20. package/docs/datepicker.html +5 -6
  21. package/docs/dialog.html +4 -5
  22. package/docs/divider.html +4 -5
  23. package/docs/docs.css +1 -0
  24. package/docs/docs.js +4 -0
  25. package/docs/iconbutton.html +10 -11
  26. package/docs/list.html +5 -6
  27. package/docs/menu.html +21 -22
  28. package/docs/micl.css +1 -1
  29. package/docs/micl.js +1 -1
  30. package/docs/radio.html +5 -6
  31. package/docs/select.html +5 -6
  32. package/docs/sidesheet.html +11 -12
  33. package/docs/slider.html +5 -6
  34. package/docs/snackbar.html +76 -0
  35. package/docs/snackbar1.html +159 -0
  36. package/docs/snackbar2.html +159 -0
  37. package/docs/stepper.html +5 -6
  38. package/docs/switch.html +5 -6
  39. package/docs/textfield.html +5 -6
  40. package/docs/timepicker.html +5 -6
  41. package/micl.ts +2 -0
  42. package/package.json +1 -1
  43. package/styles.scss +1 -0
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-start:12px;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>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}
package/docs/accordion.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,home,keyboard_arrow_down,person,search,settings&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,content_copy,dark_mode,home,keyboard_arrow_down,person,search,settings&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -300,13 +300,13 @@
300
300
  </div>
301
301
  </section>
302
302
  <section class="micl-pane">
303
- <div class="micl-card-filled">
303
+ <div class="micl-card-filled" style="margin-top:8px">
304
304
  <div class="micl-card__headline-s">
305
305
  <h2>Code example</h2>
306
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
306
307
  </div>
307
308
  <div class="micl-card__content docs-code">
308
- <pre tabindex="-1"><code>
309
- &lt;div class="micl-list" role="listbox"&gt;
309
+ <pre tabindex="-1"><code>&lt;div class="micl-list" role="listbox"&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;
@@ -332,8 +332,7 @@
332
332
  &lt;p class="md-sys-typescale-body-medium"&gt;Lorem ipsum.&lt;/p&gt;
333
333
  &lt;/div&gt;
334
334
  &lt;/details&gt;
335
- &lt;/div&gt;
336
- </code></pre>
335
+ &lt;/div&gt;</code></pre>
337
336
  </div>
338
337
  </div>
339
338
  </section>
package/docs/alert.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,dark_mode,error,home,question_mark&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,content_copy,dark_mode,error,home,question_mark&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -153,20 +153,19 @@
153
153
  </div>
154
154
  </section>
155
155
  <section class="micl-pane">
156
- <div class="micl-card-filled">
156
+ <div class="micl-card-filled" style="margin-top:8px">
157
157
  <div class="micl-card__headline-s">
158
158
  <h2>Code example</h2>
159
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
159
160
  </div>
160
161
  <div class="micl-card__content docs-code">
161
- <pre tabindex="-1"><code>
162
- &lt;div class="micl-alert-tonal" role="alert"&gt;
162
+ <pre tabindex="-1"><code>&lt;div class="micl-alert-tonal" role="alert"&gt;
163
163
  &lt;span class="micl-alert__icon material-symbols-outlined" aria-hidden="true">error&lt;/span&gt;
164
164
  &lt;span class="micl-alert__text"&gt;
165
165
  &lt;h4&gt;An error has occurred&lt;/h4&gt;
166
166
  &lt;span class="micl-alert__supporting-text"&gt;Something unexplainable has happened.&lt;/span&gt;
167
167
  &lt;/span&gt;
168
- &lt;/div&gt;
169
- </code></pre>
168
+ &lt;/div&gt;</code></pre>
170
169
  </div>
171
170
  </div>
172
171
  </section>
package/docs/bottomsheet.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,edit,home,link,pause,share,skip_next&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,content_copy,dark_mode,edit,home,link,pause,share,skip_next&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -206,31 +206,30 @@
206
206
  <div class="micl-card-filled">
207
207
  <div class="micl-card__headline-s">
208
208
  <h2>Code example</h2>
209
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
209
210
  </div>
210
211
  <div class="micl-card__content docs-code">
211
- <pre tabindex="-1"><code>
212
- &lt;dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400"&gt;
213
- &lt;div class="micl-bottomsheet__headline"&gt;
214
- &lt;button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"&gt;&lt;/button&gt;
215
- &lt;/div&gt;
216
- &lt;div class="micl-bottomsheet__content"&gt;
217
- &lt;ul class="micl-list" role="listbox"&gt;
218
- &lt;li class="micl-list-item-one" tabindex="0"&gt;
219
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;share&lt;/span&gt;
220
- &lt;span class="micl-list-item__text"&gt;
221
- &lt;span class="micl-list-item__headline"&gt;Share&lt;/span&gt;
222
- &lt;/span&gt;
223
- &lt;/li&gt;
224
- &lt;li class="micl-list-item-one" tabindex="0"&gt;
225
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;edit&lt;/span&gt;
226
- &lt;span class="micl-list-item__text"&gt;
227
- &lt;span class="micl-list-item__headline"&gt;Edit name&lt;/span&gt;
228
- &lt;/span&gt;
229
- &lt;/li&gt;
230
- &lt;/ul&gt;
231
- &lt;/div&gt;
232
- &lt;/dialog&gt;
233
- </code></pre>
212
+ <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400"&gt;
213
+ &lt;div class="micl-bottomsheet__headline"&gt;
214
+ &lt;button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"&gt;&lt;/button&gt;
215
+ &lt;/div&gt;
216
+ &lt;div class="micl-bottomsheet__content"&gt;
217
+ &lt;ul class="micl-list" role="listbox"&gt;
218
+ &lt;li class="micl-list-item-one" tabindex="0"&gt;
219
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;share&lt;/span&gt;
220
+ &lt;span class="micl-list-item__text"&gt;
221
+ &lt;span class="micl-list-item__headline"&gt;Share&lt;/span&gt;
222
+ &lt;/span&gt;
223
+ &lt;/li&gt;
224
+ &lt;li class="micl-list-item-one" tabindex="0"&gt;
225
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;edit&lt;/span&gt;
226
+ &lt;span class="micl-list-item__text"&gt;
227
+ &lt;span class="micl-list-item__headline"&gt;Edit name&lt;/span&gt;
228
+ &lt;/span&gt;
229
+ &lt;/li&gt;
230
+ &lt;/ul&gt;
231
+ &lt;/div&gt;
232
+ &lt;/dialog&gt;</code></pre>
234
233
  </div>
235
234
  </div>
236
235
  </div>
package/docs/button.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,edit,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -237,21 +237,20 @@
237
237
  </div>
238
238
  </section>
239
239
  <section class="micl-pane">
240
- <div class="micl-card-filled">
240
+ <div class="micl-card-filled" style="margin-top:8px">
241
241
  <div class="micl-card__headline-s">
242
242
  <h2>Code example</h2>
243
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
243
244
  </div>
244
245
  <div class="micl-card__content docs-code">
245
- <pre tabindex="-1"><code>
246
- &lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
246
+ <pre tabindex="-1"><code>&lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
247
247
 
248
248
  &lt;button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected"&gt;Click&lt;/button&gt;
249
249
 
250
250
  &lt;button type="button" class="micl-button-outlined-xl micl-button--square"&gt;
251
- &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;edit&lt;/span&gt;
252
- Click
253
- &lt;/button&gt;
254
- </code></pre>
251
+ &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;edit&lt;/span&gt;
252
+ Click
253
+ &lt;/button&gt;</code></pre>
255
254
  </div>
256
255
  </div>
257
256
  </section>
package/docs/card.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -118,13 +118,13 @@
118
118
  </div>
119
119
  </section>
120
120
  <section class="micl-pane micl-pane--fixed" style="width:680px">
121
- <div class="micl-card-filled">
121
+ <div class="micl-card-filled" style="margin-top:8px">
122
122
  <div class="micl-card__headline-s">
123
123
  <h2>Code example</h2>
124
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
124
125
  </div>
125
126
  <div class="micl-card__content docs-code">
126
- <pre tabindex="-1"><code>
127
- &lt;div class="micl-card-elevated" tabindex="0"&gt;
127
+ <pre tabindex="-1"><code>&lt;div class="micl-card-elevated" tabindex="0"&gt;
128
128
  &lt;div class="micl-card__headline-s"&gt;
129
129
  &lt;h2&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/h2&gt;
130
130
  &lt;/div&gt;
@@ -133,8 +133,7 @@
133
133
  &lt;div class="micl-card__content"&gt;
134
134
  &lt;p class="md-sys-typescale-body-small"&gt;Lorem ipsum dolor sit amet consectetur adipiscing elit&lt;/p&gt;
135
135
  &lt;/div&gt;
136
- &lt;/div&gt;
137
- </code></pre>
136
+ &lt;/div&gt;</code></pre>
138
137
  </div>
139
138
  </div>
140
139
  </section>
package/docs/checkbox.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -126,17 +126,16 @@
126
126
  </div>
127
127
  </section>
128
128
  <section class="micl-pane">
129
- <div class="micl-card-filled">
129
+ <div class="micl-card-filled" style="margin-top:8px">
130
130
  <div class="micl-card__headline-s">
131
131
  <h2>Code example</h2>
132
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
132
133
  </div>
133
134
  <div class="micl-card__content docs-code">
134
- <pre tabindex="-1"><code>
135
- &lt;div class="micl-flex--vcenter"&gt;
135
+ <pre><code>&lt;div class="micl-flex--vcenter"&gt;
136
136
  &lt;input type="checkbox" id="id0" class="micl-checkbox" value="v0"&gt;
137
137
  &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;
138
- &lt;/div&gt;
139
- </code></pre>
138
+ &lt;/div&gt;</code></pre>
140
139
  </div>
141
140
  </div>
142
141
  </section>
package/docs/datepicker.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_drop_down,calendar_today,check,chevron_left,chevron_right,dark_mode,edit,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_drop_down,calendar_today,check,chevron_left,chevron_right,content_copy,dark_mode,edit,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -220,13 +220,13 @@
220
220
  </div>
221
221
  </section>
222
222
  <section class="micl-pane">
223
- <div class="micl-card-filled">
223
+ <div class="micl-card-filled" style="margin-top:8px">
224
224
  <div class="micl-card__headline-s">
225
225
  <h2>Code example</h2>
226
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
226
227
  </div>
227
228
  <div class="micl-card__content docs-code">
228
- <pre tabindex="-1"><code>
229
- &lt;dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1"&gt;
229
+ <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog micl-datepicker" closedby="closerequest" aria-labelledby="id1"&gt;
230
230
  &lt;form method="dialog"&gt;
231
231
  &lt;div class="micl-dialog__headline"&gt;
232
232
  &lt;h2 id="id1"&gt;Enter dates&lt;/h2&gt;
@@ -262,8 +262,7 @@
262
262
  &lt;button class="micl-button-text-s" value="OK"&gt;OK&lt;/button&gt;
263
263
  &lt;/div&gt;
264
264
  &lt;/form&gt;
265
- &lt;/dialog&gt;
266
- </code></pre>
265
+ &lt;/dialog&gt;</code></pre>
267
266
  </div>
268
267
  </div>
269
268
  </section>
package/docs/dialog.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,home,person,restart_alt&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,content_copy,dark_mode,home,person,restart_alt&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -171,10 +171,10 @@
171
171
  <div class="micl-card-filled">
172
172
  <div class="micl-card__headline-s">
173
173
  <h2>Code example</h2>
174
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
174
175
  </div>
175
176
  <div class="micl-card__content docs-code">
176
- <pre tabindex="-1"><code>
177
- &lt;dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover&gt;
177
+ <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover&gt;
178
178
  &lt;div class="micl-dialog__headline"&gt;
179
179
  &lt;h2&gt;Basic dialog&lt;/h2&gt;
180
180
  &lt;span class="micl-dialog__supporting-text"&gt;A dialog is a type of modal window.&lt;/span&gt;
@@ -183,8 +183,7 @@
183
183
  &lt;button type="button" class="micl-button-text-s" popovertarget="id0"&gt;Cancel&lt;/button&gt;
184
184
  &lt;button type="button" class="micl-button-text-s"&gt;Action&lt;/button&gt;
185
185
  &lt;/div&gt;
186
- &lt;/dialog&gt;
187
- </code></pre>
186
+ &lt;/dialog&gt;</code></pre>
188
187
  </div>
189
188
  </div>
190
189
  </div>
package/docs/divider.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
10
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -121,14 +121,13 @@
121
121
  </div>
122
122
  </section>
123
123
  <section class="micl-pane">
124
- <div class="micl-card-filled">
124
+ <div class="micl-card-filled" style="margin-top:8px">
125
125
  <div class="micl-card__headline-s">
126
126
  <h2>Code example</h2>
127
+ <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
127
128
  </div>
128
129
  <div class="micl-card__content docs-code">
129
- <pre tabindex="-1"><code>
130
- &lt;hr class="micl-divider"&gt;
131
- </code></pre>
130
+ <pre tabindex="-1"><code>&lt;hr class="micl-divider"&gt;</code></pre>
132
131
  </div>
133
132
  </div>
134
133
  </section>
package/docs/docs.css CHANGED
@@ -20,6 +20,7 @@ pre {
20
20
  row-gap: 16px;
21
21
  }
22
22
  .docs-code {
23
+ padding-block: var(--md-sys-card-content-padding-block);
23
24
  background-color: var(--md-sys-color-secondary);
24
25
  color: var(--md-sys-color-on-secondary);
25
26
  }