material-inspired-component-library 7.0.0 → 7.0.2

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 (41) hide show
  1. package/components/accordion/README.md +4 -6
  2. package/components/appbar/index.scss +1 -1
  3. package/components/card/README.md +2 -0
  4. package/components/card/index.scss +10 -1
  5. package/components/checkbox/index.scss +4 -0
  6. package/components/dialog/README.md +7 -7
  7. package/components/radio/index.scss +4 -0
  8. package/components/select/index.scss +14 -14
  9. package/components/stepper/index.ts +1 -1
  10. package/components/textfield/index.scss +6 -0
  11. package/components/timepicker/index.ts +2 -2
  12. package/dist/alert.css +1 -1
  13. package/dist/appbar.css +1 -1
  14. package/dist/badge.css +1 -1
  15. package/dist/button.css +1 -1
  16. package/dist/card.css +1 -1
  17. package/dist/checkbox.css +1 -1
  18. package/dist/datepicker.css +1 -1
  19. package/dist/dialog.css +1 -1
  20. package/dist/list.css +1 -1
  21. package/dist/micl.css +1 -1
  22. package/dist/micl.js +1 -1
  23. package/dist/navigationrail.css +1 -1
  24. package/dist/radio.css +1 -1
  25. package/dist/select.css +1 -1
  26. package/dist/sidesheet.css +1 -1
  27. package/dist/slider.css +1 -1
  28. package/dist/snackbar.css +1 -1
  29. package/dist/switch.css +1 -1
  30. package/dist/textfield.css +1 -1
  31. package/dist/timepicker.css +1 -1
  32. package/docs/accordion.html +10 -10
  33. package/docs/dialog.html +17 -19
  34. package/docs/index.html +1 -1
  35. package/docs/micl.css +1 -1
  36. package/docs/micl.js +1 -1
  37. package/micl.ts +48 -35
  38. package/package.json +4 -4
  39. package/styles/README.md +10 -0
  40. package/styles/typography.scss +38 -2
  41. package/tsconfig.json +4 -4
package/dist/timepicker.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)}:root{--md-sys-timepicker-input-height: 72px;--md-sys-timepicker-input-width: 96px;--md-sys-timepicker-input-width-24h: 114px;--md-sys-timepicker-separator-width: 24px;--md-sys-timepicker-period-height: 72px;--md-sys-timepicker-period-width: 52px;--md-sys-timepicker-dial-size: 256px;--md-sys-timepicker-dial-center-size: 8px;--md-sys-timepicker-dial-track-width: 2px}dialog.micl-dialog.micl-timepicker{--md-sys-timepicker-motion-duration: 350ms}dialog.micl-dialog.micl-timepicker .micl-dialog__headline{padding-block-end:20px}dialog.micl-dialog.micl-timepicker .micl-dialog__headline h2{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);color:var(--md-sys-color-on-surface-variant)}dialog.micl-dialog.micl-timepicker .micl-dialog__content{display:grid;padding-block-start:1px;grid-template-areas:"timepicker-hour timepicker-separator timepicker-minute timepicker-period" "timepicker-hour-supporting timepicker-hour-supporting timepicker-minute-supporting timepicker-minute-supporting" "timepicker-dial timepicker-dial timepicker-dial timepicker-dial";grid-template-columns:auto var(--md-sys-timepicker-separator-width) var(--md-sys-timepicker-input-width) auto}dialog.micl-dialog.micl-timepicker .micl-dialog__actions:has(.micl-timepicker__inputmode){justify-content:space-between}dialog.micl-dialog.micl-timepicker .micl-dialog__actions .micl-timepicker__inputmode{margin-inline-start:-8px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)){--md-sys-timepicker-input-height: 80px;--md-sys-timepicker-period-height: 80px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal{--md-sys-timepicker-period-height: 38px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__headline{padding-block-end:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content{grid-template-areas:"timepicker-dummy timepicker-dummy timepicker-dummy timepicker-dial" "timepicker-hour timepicker-separator timepicker-minute timepicker-dial" "timepicker-period timepicker-period timepicker-period timepicker-dial";grid-template-rows:72px var(--md-sys-timepicker-input-height) auto}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period{--md-sys-timepicker-ampm-height: var(--md-sys-timepicker-period-height);--md-sys-timepicker-period-width: calc(2 * var(--md-sys-timepicker-input-width) + var(--md-sys-timepicker-separator-width));display:flex;align-self:flex-start;margin-inline:0;margin-block:16px 0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period .micl-timepicker__am{border-start-end-radius:0;border-end-start-radius:var(--md-sys-shape-corner-small)}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period .micl-timepicker__pm{border-block-start-width:1px;border-inline-start-width:0px;border-start-end-radius:var(--md-sys-shape-corner-small);border-end-start-radius:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__dial{margin-block:0;margin-inline:40px 0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) .micl-timepicker__supporting-text-hour,dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) .micl-timepicker__supporting-text-minute{display:none}.micl-timepicker input[name=hour],.micl-timepicker input[name=minute]{--statelayer-color: var(--md-sys-color-on-surface);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);box-sizing:border-box;inline-size:var(--md-sys-timepicker-input-width);block-size:var(--md-sys-timepicker-input-height);margin:0;padding:0;border:none;outline:none;border-radius:var(--md-sys-shape-corner-small);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;background-size:100%;color:var(--md-sys-color-on-surface);text-align:center;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-appearance:textfield;transition:--statelayer-opacity var(--md-sys-timepicker-motion-duration) linear}.micl-timepicker input[name=hour]::-webkit-inner-spin-button,.micl-timepicker input[name=hour]::-webkit-outer-spin-button,.micl-timepicker input[name=minute]::-webkit-inner-spin-button,.micl-timepicker input[name=minute]::-webkit-outer-spin-button{-webkit-appearance:none}.micl-timepicker input[name=hour]::selection,.micl-timepicker input[name=minute]::selection{background-color:rgba(0,0,0,0)}.micl-timepicker input[name=hour].micl-timepicker--selected,.micl-timepicker input[name=minute].micl-timepicker--selected{--statelayer-color: var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border:2px solid var(--md-sys-color-primary)}.micl-timepicker input[name=hour]:hover,.micl-timepicker input[name=minute]:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-timepicker input[name=hour]:focus-visible,.micl-timepicker input[name=minute]:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}.micl-timepicker input[name=hour]:active,.micl-timepicker input[name=minute]:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-timepicker input[name=hour]{grid-area:timepicker-hour;justify-self:flex-end}.micl-timepicker input[name=minute]{grid-area:timepicker-minute}.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) input[name=hour],.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) input[name=minute]{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);border:none;cursor:pointer}.micl-timepicker:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-hidden))){--md-sys-timepicker-input-width: var(--md-sys-timepicker-input-width-24h)}.micl-timepicker__separator{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);grid-area:timepicker-separator;block-size:var(--md-sys-timepicker-input-height);line-height:var(--md-sys-timepicker-input-height);inline-size:var(--md-sys-timepicker-separator-width);text-align:center;color:var(--md-sys-color-on-surface)}.micl-timepicker__period{--md-sys-timepicker-ampm-height: calc(var(--md-sys-timepicker-period-height) / 2);grid-area:timepicker-period;block-size:var(--md-sys-timepicker-period-height);inline-size:0}.micl-timepicker__period:has(.micl-timepicker__am){inline-size:var(--md-sys-timepicker-period-width);margin-inline:12px 0}.micl-timepicker__period .micl-timepicker__am,.micl-timepicker__period .micl-timepicker__pm{--statelayer-color: var(--md-sys-color-on-surface-variant);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);appearance:none;box-sizing:border-box;position:relative;display:flex;align-items:center;inline-size:var(--md-sys-timepicker-period-width);block-size:var(--md-sys-timepicker-ampm-height);min-block-size:var(--md-sys-timepicker-ampm-height);margin:0;border:1px solid var(--md-sys-color-outline);outline:none;color:var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:--statelayer-opacity var(--md-sys-timepicker-motion-duration) linear}.micl-timepicker__period .micl-timepicker__am::before,.micl-timepicker__period .micl-timepicker__pm::before{content:"AM";position:absolute;inline-size:100%;text-align:center}.micl-timepicker__period .micl-timepicker__am:checked,.micl-timepicker__period .micl-timepicker__pm:checked{color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container)}.micl-timepicker__period .micl-timepicker__am:hover:checked,.micl-timepicker__period .micl-timepicker__am:focus-visible:checked,.micl-timepicker__period .micl-timepicker__am:active:checked,.micl-timepicker__period .micl-timepicker__pm:hover:checked,.micl-timepicker__period .micl-timepicker__pm:focus-visible:checked,.micl-timepicker__period .micl-timepicker__pm:active:checked{--statelayer-color: var(--md-sys-color-on-tertiary-container)}.micl-timepicker__period .micl-timepicker__am:hover::after,.micl-timepicker__period .micl-timepicker__am:focus-visible::after,.micl-timepicker__period .micl-timepicker__am:active::after,.micl-timepicker__period .micl-timepicker__pm:hover::after,.micl-timepicker__period .micl-timepicker__pm:focus-visible::after,.micl-timepicker__period .micl-timepicker__pm:active::after{border-color:var(--md-sys-color-on-surface)}.micl-timepicker__period .micl-timepicker__am:hover:checked::after,.micl-timepicker__period .micl-timepicker__am:focus-visible:checked::after,.micl-timepicker__period .micl-timepicker__am:active:checked::after,.micl-timepicker__period .micl-timepicker__pm:hover:checked::after,.micl-timepicker__period .micl-timepicker__pm:focus-visible:checked::after,.micl-timepicker__period .micl-timepicker__pm:active:checked::after{border-color:var(--md-sys-color-primary)}.micl-timepicker__period .micl-timepicker__am:hover,.micl-timepicker__period .micl-timepicker__pm:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-timepicker__period .micl-timepicker__am:focus-visible,.micl-timepicker__period .micl-timepicker__pm:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:-2px}.micl-timepicker__period .micl-timepicker__am:active,.micl-timepicker__period .micl-timepicker__pm:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-timepicker__period .micl-timepicker__am{border-start-start-radius:var(--md-sys-shape-corner-small);border-start-end-radius:var(--md-sys-shape-corner-small)}.micl-timepicker__period .micl-timepicker__pm{border-block-start-width:0px;border-end-start-radius:var(--md-sys-shape-corner-small);border-end-end-radius:var(--md-sys-shape-corner-small)}.micl-timepicker__period .micl-timepicker__pm::before{content:"PM"}.micl-timepicker__supporting-text-hour,.micl-timepicker__supporting-text-minute{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:timepicker-hour-supporting;padding-block:4px 0;color:var(--md-sys-color-on-surface-variant)}.micl-timepicker__supporting-text-minute{grid-area:timepicker-minute-supporting}.micl-timepicker .micl-timepicker__dial{--micl-dial-radius: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);--micl-hour-radius: var(--micl-dial-radius);--micl-angle: 0deg;position:relative;grid-area:timepicker-dial;justify-self:center;block-size:var(--md-sys-timepicker-dial-size, 256px);inline-size:var(--md-sys-timepicker-dial-size, 256px);margin-block:36px 0;margin-inline:0;outline:none;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-surface-container-highest);list-style-type:none;touch-action:none}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__dial-inner{--micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size, 48px) + 12px);z-index:2}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__dial-inner::before{z-index:2}.micl-timepicker .micl-timepicker__dial data{--micl-a: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * cos(var(--micl-angle))));--micl-b: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * sin(var(--micl-angle))));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);position:absolute;display:grid;place-content:center;block-size:var(--md-sys-target-size, 48px);inline-size:var(--md-sys-target-size, 48px);inset-inline-start:var(--micl-a);inset-block-start:var(--micl-b);outline:none;border-radius:var(--md-sys-shape-corner-full);color:var(--md-sys-color-on-surface);cursor:pointer;z-index:1;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__time--selected{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}.micl-timepicker .micl-timepicker__dial data::before{content:"";position:absolute;block-size:var(--md-sys-target-size, 48px);inline-size:calc(2*var(--md-sys-target-size, 48px));inset-inline-start:0;inset-block-end:0;transform:rotate(var(--micl-angle)) translate(calc(-1 * var(--md-sys-target-size, 48px)));transform-origin:calc(var(--md-sys-target-size, 48px)/2) center;z-index:1}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track{--micl-track-length: 92px;position:relative;display:block;inline-size:var(--md-sys-timepicker-dial-track-width, 2px);block-size:var(--micl-track-length);inset-inline-start:calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-timepicker-dial-track-width, 2px))/2);inset-block-start:calc(var(--md-sys-timepicker-dial-size, 256px)/2 - var(--micl-track-length));border-radius:calc(var(--md-sys-timepicker-dial-track-width, 2px)*2);background-color:var(--md-sys-color-primary);transform:rotate(calc(90deg + var(--micl-angle)));transform-origin:bottom}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track::before{content:"";position:absolute;display:block;block-size:var(--md-sys-timepicker-dial-center-size, 8px);inline-size:var(--md-sys-timepicker-dial-center-size, 8px);inset-block-end:-3px;inset-inline-start:-3px;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-primary)}
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-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700;--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-smallmedium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-smallmedium-size: 0.8125rem;--md-sys-typescale-body-smallmedium-line-height: 1.125rem;--md-sys-typescale-body-smallmedium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-smallmedium-tracking: 0.025rem;--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}@supports(letter-spacing: if(style(--md-ref-typeface-plain-narrow: 1): 0; else: 0)){:root{--md-sys-typescale-title-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.009375rem; else: 0px);--md-sys-typescale-title-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.00625rem; else: 0px);--md-sys-typescale-body-large-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);--md-sys-typescale-body-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.015625rem; else: 0px);--md-sys-typescale-body-smallmedium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.025rem; else: 0px);--md-sys-typescale-body-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.025rem; else: 0px);--md-sys-typescale-label-large-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.00625rem; else: 0px);--md-sys-typescale-label-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);--md-sys-typescale-label-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);--md-sys-typescale-emphasized-title-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.009375rem; else: 0px);--md-sys-typescale-emphasized-title-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.00625rem; else: 0px);--md-sys-typescale-emphasized-body-large-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);--md-sys-typescale-emphasized-body-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.015625rem; else: 0px);--md-sys-typescale-emphasized-body-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.025rem; else: 0px);--md-sys-typescale-emphasized-label-large-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.00625rem; else: 0px);--md-sys-typescale-emphasized-label-medium-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px);--md-sys-typescale-emphasized-label-small-tracking: if(style(--md-ref-typeface-plain-narrow: 1): 0.03125rem; else: 0px)}}.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)}:root{--md-sys-timepicker-input-height: 72px;--md-sys-timepicker-input-width: 96px;--md-sys-timepicker-input-width-24h: 114px;--md-sys-timepicker-separator-width: 24px;--md-sys-timepicker-period-height: 72px;--md-sys-timepicker-period-width: 52px;--md-sys-timepicker-dial-size: 256px;--md-sys-timepicker-dial-center-size: 8px;--md-sys-timepicker-dial-track-width: 2px}dialog.micl-dialog.micl-timepicker{--md-sys-timepicker-motion-duration: 350ms}dialog.micl-dialog.micl-timepicker .micl-dialog__headline{padding-block-end:20px}dialog.micl-dialog.micl-timepicker .micl-dialog__headline h2{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);color:var(--md-sys-color-on-surface-variant)}dialog.micl-dialog.micl-timepicker .micl-dialog__content{display:grid;padding-block-start:1px;grid-template-areas:"timepicker-hour timepicker-separator timepicker-minute timepicker-period" "timepicker-hour-supporting timepicker-hour-supporting timepicker-minute-supporting timepicker-minute-supporting" "timepicker-dial timepicker-dial timepicker-dial timepicker-dial";grid-template-columns:auto var(--md-sys-timepicker-separator-width) var(--md-sys-timepicker-input-width) auto}dialog.micl-dialog.micl-timepicker .micl-dialog__actions:has(.micl-timepicker__inputmode){justify-content:space-between}dialog.micl-dialog.micl-timepicker .micl-dialog__actions .micl-timepicker__inputmode{margin-inline-start:-8px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)){--md-sys-timepicker-input-height: 80px;--md-sys-timepicker-period-height: 80px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal{--md-sys-timepicker-period-height: 38px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__headline{padding-block-end:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content{grid-template-areas:"timepicker-dummy timepicker-dummy timepicker-dummy timepicker-dial" "timepicker-hour timepicker-separator timepicker-minute timepicker-dial" "timepicker-period timepicker-period timepicker-period timepicker-dial";grid-template-rows:72px var(--md-sys-timepicker-input-height) auto}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period{--md-sys-timepicker-ampm-height: var(--md-sys-timepicker-period-height);--md-sys-timepicker-period-width: calc(2 * var(--md-sys-timepicker-input-width) + var(--md-sys-timepicker-separator-width));display:flex;align-self:flex-start;margin-inline:0;margin-block:16px 0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period .micl-timepicker__am{border-start-end-radius:0;border-end-start-radius:var(--md-sys-shape-corner-small)}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period .micl-timepicker__pm{border-block-start-width:1px;border-inline-start-width:0px;border-start-end-radius:var(--md-sys-shape-corner-small);border-end-start-radius:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__dial{margin-block:0;margin-inline:40px 0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) .micl-timepicker__supporting-text-hour,dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) .micl-timepicker__supporting-text-minute{display:none}.micl-timepicker input[name=hour],.micl-timepicker input[name=minute]{--statelayer-color: var(--md-sys-color-on-surface);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);box-sizing:border-box;inline-size:var(--md-sys-timepicker-input-width);block-size:var(--md-sys-timepicker-input-height);margin:0;padding:0;border:none;outline:none;border-radius:var(--md-sys-shape-corner-small);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;background-size:100%;color:var(--md-sys-color-on-surface);text-align:center;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-appearance:textfield;transition:--statelayer-opacity var(--md-sys-timepicker-motion-duration) linear}.micl-timepicker input[name=hour]::-webkit-inner-spin-button,.micl-timepicker input[name=hour]::-webkit-outer-spin-button,.micl-timepicker input[name=minute]::-webkit-inner-spin-button,.micl-timepicker input[name=minute]::-webkit-outer-spin-button{-webkit-appearance:none}.micl-timepicker input[name=hour]::selection,.micl-timepicker input[name=minute]::selection{background-color:rgba(0,0,0,0)}.micl-timepicker input[name=hour].micl-timepicker--selected,.micl-timepicker input[name=minute].micl-timepicker--selected{--statelayer-color: var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border:2px solid var(--md-sys-color-primary)}.micl-timepicker input[name=hour]:hover,.micl-timepicker input[name=minute]:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-timepicker input[name=hour]:focus-visible,.micl-timepicker input[name=minute]:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}.micl-timepicker input[name=hour]:active,.micl-timepicker input[name=minute]:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-timepicker input[name=hour]{grid-area:timepicker-hour;justify-self:flex-end}.micl-timepicker input[name=minute]{grid-area:timepicker-minute}.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) input[name=hour],.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) input[name=minute]{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);border:none;cursor:pointer}.micl-timepicker:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-hidden))){--md-sys-timepicker-input-width: var(--md-sys-timepicker-input-width-24h)}.micl-timepicker__separator{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);grid-area:timepicker-separator;block-size:var(--md-sys-timepicker-input-height);line-height:var(--md-sys-timepicker-input-height);inline-size:var(--md-sys-timepicker-separator-width);text-align:center;color:var(--md-sys-color-on-surface)}.micl-timepicker__period{--md-sys-timepicker-ampm-height: calc(var(--md-sys-timepicker-period-height) / 2);grid-area:timepicker-period;block-size:var(--md-sys-timepicker-period-height);inline-size:0}.micl-timepicker__period:has(.micl-timepicker__am){inline-size:var(--md-sys-timepicker-period-width);margin-inline:12px 0}.micl-timepicker__period .micl-timepicker__am,.micl-timepicker__period .micl-timepicker__pm{--statelayer-color: var(--md-sys-color-on-surface-variant);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);appearance:none;box-sizing:border-box;position:relative;display:flex;align-items:center;inline-size:var(--md-sys-timepicker-period-width);block-size:var(--md-sys-timepicker-ampm-height);min-block-size:var(--md-sys-timepicker-ampm-height);margin:0;border:1px solid var(--md-sys-color-outline);outline:none;color:var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:--statelayer-opacity var(--md-sys-timepicker-motion-duration) linear}.micl-timepicker__period .micl-timepicker__am::before,.micl-timepicker__period .micl-timepicker__pm::before{content:"AM";position:absolute;inline-size:100%;text-align:center}.micl-timepicker__period .micl-timepicker__am:checked,.micl-timepicker__period .micl-timepicker__pm:checked{color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container)}.micl-timepicker__period .micl-timepicker__am:hover:checked,.micl-timepicker__period .micl-timepicker__am:focus-visible:checked,.micl-timepicker__period .micl-timepicker__am:active:checked,.micl-timepicker__period .micl-timepicker__pm:hover:checked,.micl-timepicker__period .micl-timepicker__pm:focus-visible:checked,.micl-timepicker__period .micl-timepicker__pm:active:checked{--statelayer-color: var(--md-sys-color-on-tertiary-container)}.micl-timepicker__period .micl-timepicker__am:hover::after,.micl-timepicker__period .micl-timepicker__am:focus-visible::after,.micl-timepicker__period .micl-timepicker__am:active::after,.micl-timepicker__period .micl-timepicker__pm:hover::after,.micl-timepicker__period .micl-timepicker__pm:focus-visible::after,.micl-timepicker__period .micl-timepicker__pm:active::after{border-color:var(--md-sys-color-on-surface)}.micl-timepicker__period .micl-timepicker__am:hover:checked::after,.micl-timepicker__period .micl-timepicker__am:focus-visible:checked::after,.micl-timepicker__period .micl-timepicker__am:active:checked::after,.micl-timepicker__period .micl-timepicker__pm:hover:checked::after,.micl-timepicker__period .micl-timepicker__pm:focus-visible:checked::after,.micl-timepicker__period .micl-timepicker__pm:active:checked::after{border-color:var(--md-sys-color-primary)}.micl-timepicker__period .micl-timepicker__am:hover,.micl-timepicker__period .micl-timepicker__pm:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-timepicker__period .micl-timepicker__am:focus-visible,.micl-timepicker__period .micl-timepicker__pm:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:-2px}.micl-timepicker__period .micl-timepicker__am:active,.micl-timepicker__period .micl-timepicker__pm:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-timepicker__period .micl-timepicker__am{border-start-start-radius:var(--md-sys-shape-corner-small);border-start-end-radius:var(--md-sys-shape-corner-small)}.micl-timepicker__period .micl-timepicker__pm{border-block-start-width:0px;border-end-start-radius:var(--md-sys-shape-corner-small);border-end-end-radius:var(--md-sys-shape-corner-small)}.micl-timepicker__period .micl-timepicker__pm::before{content:"PM"}.micl-timepicker__supporting-text-hour,.micl-timepicker__supporting-text-minute{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:timepicker-hour-supporting;padding-block:4px 0;color:var(--md-sys-color-on-surface-variant)}.micl-timepicker__supporting-text-minute{grid-area:timepicker-minute-supporting}.micl-timepicker .micl-timepicker__dial{--micl-dial-radius: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);--micl-hour-radius: var(--micl-dial-radius);--micl-angle: 0deg;position:relative;grid-area:timepicker-dial;justify-self:center;block-size:var(--md-sys-timepicker-dial-size, 256px);inline-size:var(--md-sys-timepicker-dial-size, 256px);margin-block:36px 0;margin-inline:0;outline:none;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-surface-container-highest);list-style-type:none;touch-action:none}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__dial-inner{--micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size, 48px) + 12px);z-index:2}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__dial-inner::before{z-index:2}.micl-timepicker .micl-timepicker__dial data{--micl-a: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * cos(var(--micl-angle))));--micl-b: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * sin(var(--micl-angle))));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);position:absolute;display:grid;place-content:center;block-size:var(--md-sys-target-size, 48px);inline-size:var(--md-sys-target-size, 48px);inset-inline-start:var(--micl-a);inset-block-start:var(--micl-b);outline:none;border-radius:var(--md-sys-shape-corner-full);color:var(--md-sys-color-on-surface);cursor:pointer;z-index:1;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__time--selected{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}.micl-timepicker .micl-timepicker__dial data::before{content:"";position:absolute;block-size:var(--md-sys-target-size, 48px);inline-size:calc(2*var(--md-sys-target-size, 48px));inset-inline-start:0;inset-block-end:0;transform:rotate(var(--micl-angle)) translate(calc(-1 * var(--md-sys-target-size, 48px)));transform-origin:calc(var(--md-sys-target-size, 48px)/2) center;z-index:1}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track{--micl-track-length: 92px;position:relative;display:block;inline-size:var(--md-sys-timepicker-dial-track-width, 2px);block-size:var(--micl-track-length);inset-inline-start:calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-timepicker-dial-track-width, 2px))/2);inset-block-start:calc(var(--md-sys-timepicker-dial-size, 256px)/2 - var(--micl-track-length));border-radius:calc(var(--md-sys-timepicker-dial-track-width, 2px)*2);background-color:var(--md-sys-color-primary);transform:rotate(calc(90deg + var(--micl-angle)));transform-origin:bottom}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track::before{content:"";position:absolute;display:block;block-size:var(--md-sys-timepicker-dial-center-size, 8px);inline-size:var(--md-sys-timepicker-dial-center-size, 8px);inset-block-end:-3px;inset-inline-start:-3px;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-primary)}
package/docs/accordion.html CHANGED
@@ -31,7 +31,7 @@
31
31
  <div class="micl-pane__column">
32
32
  <div class="micl-card-elevated">
33
33
  <div class="micl-card__content">
34
- <div class="micl-list" role="listbox">
34
+ <div class="micl-list">
35
35
  <details name="accordion1">
36
36
  <summary class="micl-list-item-one">
37
37
  <span class="micl-list-item__text">
@@ -55,7 +55,7 @@
55
55
  </div>
56
56
  </details>
57
57
  </div>
58
- <div class="micl-list" role="listbox">
58
+ <div class="micl-list">
59
59
  <details name="accordion2">
60
60
  <summary class="micl-list-item-two">
61
61
  <span class="micl-list-item__text">
@@ -87,7 +87,7 @@
87
87
  </div>
88
88
  </details>
89
89
  </div>
90
- <div class="micl-list" role="listbox">
90
+ <div class="micl-list">
91
91
  <details name="accordion3">
92
92
  <summary class="micl-list-item-three">
93
93
  <span class="micl-list-item__text">
@@ -119,7 +119,7 @@
119
119
  <div class="micl-pane__column">
120
120
  <div class="micl-card-filled">
121
121
  <div class="micl-card__content" style="--md-sys-accordion-item-space:4px">
122
- <div class="micl-list" role="listbox">
122
+ <div class="micl-list">
123
123
  <details name="accordion4">
124
124
  <summary class="micl-list-item-one">
125
125
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">search</span>
@@ -151,7 +151,7 @@
151
151
  </div>
152
152
  </details>
153
153
  </div>
154
- <div class="micl-list" role="listbox">
154
+ <div class="micl-list">
155
155
  <details name="accordion5">
156
156
  <summary class="micl-list-item-two">
157
157
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
@@ -179,7 +179,7 @@
179
179
  </div>
180
180
  </details>
181
181
  </div>
182
- <div class="micl-list" role="listbox">
182
+ <div class="micl-list">
183
183
  <details name="accordion6">
184
184
  <summary class="micl-list-item-three">
185
185
  <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">settings</span>
@@ -213,7 +213,7 @@
213
213
  <div class="micl-pane__column">
214
214
  <div class="micl-card-outlined">
215
215
  <div class="micl-card__content">
216
- <div class="micl-list" role="listbox">
216
+ <div class="micl-list">
217
217
  <details name="accordion7">
218
218
  <summary class="micl-list-item-one">
219
219
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/Large_cloud_over_Mexican_landscape.jpg/330px-Large_cloud_over_Mexican_landscape.jpg)"></span>
@@ -239,7 +239,7 @@
239
239
  </div>
240
240
  </details>
241
241
  </div>
242
- <div class="micl-list" role="listbox">
242
+ <div class="micl-list">
243
243
  <details name="accordion8">
244
244
  <summary class="micl-list-item-two">
245
245
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/24/San_Juan_River_at_Pagosa_Springs_with_balloons.jpg/330px-San_Juan_River_at_Pagosa_Springs_with_balloons.jpg)"></span>
@@ -267,7 +267,7 @@
267
267
  </div>
268
268
  </details>
269
269
  </div>
270
- <div class="micl-list" role="listbox">
270
+ <div class="micl-list">
271
271
  <details name="accordion9">
272
272
  <summary class="micl-list-item-three">
273
273
  <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg/330px-N1015X_Air_Tahiti_Nui_Boeing_787-9_Dreamliner_26.jpg)"></span>
@@ -306,7 +306,7 @@
306
306
  <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
307
307
  </div>
308
308
  <div class="micl-card__content docs-code">
309
- <pre tabindex="-1"><code>&lt;div class="micl-list" role="listbox"&gt;
309
+ <pre tabindex="-1"><code>&lt;div class="micl-list"&gt;
310
310
  &lt;details name="accordion"&gt;
311
311
  &lt;summary class="micl-list-item-two"&gt;
312
312
  &lt;span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true"&gt;settings&lt;/span&gt;
package/docs/dialog.html CHANGED
@@ -40,23 +40,22 @@
40
40
  </div>
41
41
  <p class="micl-card__supporting-text">Click a button to open one of the MICL dialogs.</p>
42
42
  <div class="micl-card__content docs-buttons">
43
- <dialog id="mydialog1" class="micl-dialog" style="width:300px" popover closedby="any" role="alertdialog" aria-labelledby="mytitle1">
43
+ <dialog id="mydialog1" class="micl-dialog" style="width:300px" popover closedby="any" aria-labelledby="mytitle1">
44
44
  <div class="micl-dialog__headline">
45
45
  <h2 id="mytitle1">Basic dialog</h2>
46
46
  <span class="micl-dialog__supporting-text">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</span>
47
47
  </div>
48
48
  <div class="micl-dialog__actions">
49
- <button type="button" class="micl-button-text-s" popovertarget="mydialog1">Cancel</button>
50
- <button type="button" class="micl-button-text-s">Action</button>
49
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog1" autofocus>OK</button>
51
50
  </div>
52
51
  </dialog>
53
52
  <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog1">Open Basic Dialog</button>
54
53
 
55
- <dialog id="mydialog2" class="micl-dialog" style="width:400px" popover closedby="any" role="alertdialog" aria-labelledby="mytitle2">
54
+ <dialog id="mydialog2" class="micl-dialog" style="width:400px" popover closedby="any" aria-labelledby="mytitle2" aria-describedby="mydesc2">
56
55
  <div class="micl-dialog__headline">
57
56
  <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">restart_alt</span>
58
57
  <h2 id="mytitle2">Reset settings?</h2>
59
- <span class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
58
+ <span id="mydesc2" class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
60
59
  </div>
61
60
  <div class="micl-dialog__content">
62
61
  <hr class="micl-divider">
@@ -83,39 +82,39 @@
83
82
  <hr class="micl-divider">
84
83
  </div>
85
84
  <div class="micl-dialog__actions">
86
- <button type="button" class="micl-button-text-s" popovertarget="mydialog2">Cancel</button>
85
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog2" autofocus>Cancel</button>
87
86
  <button type="button" class="micl-button-text-s">Accept</button>
88
87
  </div>
89
88
  </dialog>
90
89
  <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog2">Open Dialog</button>
91
90
 
92
- <dialog id="mydialog3" class="micl-dialog" style="width:350px" role="alertdialog" closedby="closerequest" aria-labelledby="mytitle3">
91
+ <dialog id="mydialog3" class="micl-dialog" style="width:350px" closedby="none" role="alertdialog" aria-labelledby="mytitle3" aria-describedby="mydesc3">
93
92
  <div class="micl-dialog__headline">
94
93
  <h2 id="mytitle3">Delete selected images?</h2>
95
- <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
94
+ <span id="mydesc3" class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
96
95
  </div>
97
96
  <form method="dialog" class="micl-dialog__actions">
98
- <button class="micl-button-text-s" value="donotdelete">Cancel</button>
97
+ <button class="micl-button-text-s" autofocus>Cancel</button>
99
98
  <button class="micl-button-text-s" value="dodelete">Delete</button>
100
99
  </form>
101
100
  </dialog>
102
101
  <button type="button" class="micl-button-outlined-m micl-button--square" commandfor="mydialog3" command="show-modal">Open Modal Dialog</button>
103
102
 
104
- <dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" popover role="alertdialog" closedby="closerequest" aria-labelledby="mytitle4">
103
+ <dialog id="mydialog4" class="micl-dialog micl-dialog--docked" style="position-anchor: --myanchor;width:350px" popover closedby="closerequest" aria-labelledby="mytitle4">
105
104
  <div class="micl-dialog__headline">
106
105
  <h2 id="mytitle4">Delete selected images?</h2>
107
106
  <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
108
107
  </div>
109
108
  <div class="micl-dialog__actions">
110
- <button class="micl-button-text-s" value="donotdelete" popovertarget="mydialog4">Cancel</button>
111
- <button class="micl-button-text-s" value="dodelete">Delete</button>
109
+ <button class="micl-button-text-s" popovertarget="mydialog4" autofocus>Cancel</button>
110
+ <button class="micl-button-text-s">Delete</button>
112
111
  </div>
113
112
  </dialog>
114
113
  <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog4" style="anchor-name:--myanchor">Open Anchored Dialog</button>
115
114
 
116
- <dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen" popover closedby="none" aria-labelledby="mytitle5">
115
+ <dialog id="mydialog5" class="micl-dialog micl-dialog--fullscreen" closedby="none" aria-labelledby="mytitle5">
117
116
  <form method="dialog" class="micl-dialog__headline">
118
- <button type="button" class="micl-dialog__fullscreen micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mydialog5" aria-label="Close">close</button>
117
+ <button class="micl-dialog__fullscreen micl-iconbutton-standard-s material-symbols-outlined" aria-label="Close">close</button>
119
118
  <span class="micl-dialog__icon material-symbols-outlined" aria-hidden="true">person</span>
120
119
  <h2 id="mytitle5">Personal info</h2>
121
120
  <button class="micl-dialog__fullscreen micl-button-text-s" value="dosave">Save</button>
@@ -159,11 +158,11 @@
159
158
  </div>
160
159
  </div>
161
160
  <form method="dialog" class="micl-dialog__actions">
162
- <button type="button" class="micl-button-text-s" popovertarget="mydialog5">Cancel</button>
161
+ <button class="micl-button-text-s">Cancel</button>
163
162
  <button class="micl-button-text-s" value="dosave">Save</button>
164
163
  </form>
165
164
  </dialog>
166
- <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mydialog5">Open Full-Screen Dialog</button>
165
+ <button type="button" class="micl-button-outlined-m micl-button--square" command="show-modal" commandfor="mydialog5">Open Full-Screen Dialog</button>
167
166
  </div>
168
167
  </div>
169
168
  </div>
@@ -174,14 +173,13 @@
174
173
  <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
175
174
  </div>
176
175
  <div class="micl-card__content docs-code">
177
- <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog" style="width:300px" role="alertdialog" closedby="any" popover&gt;
176
+ <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-dialog" style="width:300px" closedby="any" popover&gt;
178
177
  &lt;div class="micl-dialog__headline"&gt;
179
178
  &lt;h2&gt;Basic dialog&lt;/h2&gt;
180
179
  &lt;span class="micl-dialog__supporting-text"&gt;A dialog is a type of modal window.&lt;/span&gt;
181
180
  &lt;/div&gt;
182
181
  &lt;div class="micl-dialog__actions"&gt;
183
- &lt;button type="button" class="micl-button-text-s" popovertarget="id0"&gt;Cancel&lt;/button&gt;
184
- &lt;button type="button" class="micl-button-text-s"&gt;Action&lt;/button&gt;
182
+ &lt;button type="button" class="micl-button-text-s" popovertarget="id0"&gt;OK&lt;/button&gt;
185
183
  &lt;/div&gt;
186
184
  &lt;/dialog&gt;</code></pre>
187
185
  </div>
package/docs/index.html CHANGED
@@ -160,7 +160,7 @@
160
160
  </a>
161
161
  </li>
162
162
  <li class="micl-list-item-one" tabindex="0">
163
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Atmosphere_-_2.jpg/256px-Atmosphere_-_2.jpg?20200310200715)"></span>
163
+ <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Top_of_Atmosphere.jpg/330px-Top_of_Atmosphere.jpg)"></span>
164
164
  <span class="micl-list-item__text">
165
165
  <span class="micl-list-item__headline">Item with an image</span>
166
166
  </span>