material-inspired-component-library 9.0.1 → 9.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 (32) hide show
  1. package/components/dialog/index.scss +1 -1
  2. package/components/list/index.scss +4 -4
  3. package/components/menu/index.scss +2 -3
  4. package/components/select/README.md +26 -0
  5. package/components/select/index.scss +53 -0
  6. package/components/shapes/_paths.generated.scss +38 -52
  7. package/components/textfield/index.scss +1 -1
  8. package/dist/alert.css +1 -1
  9. package/dist/appbar.css +1 -1
  10. package/dist/badge.css +1 -1
  11. package/dist/button.css +1 -1
  12. package/dist/card.css +1 -1
  13. package/dist/chip.css +1 -1
  14. package/dist/datepicker.css +1 -1
  15. package/dist/dialog.css +1 -1
  16. package/dist/list.css +1 -1
  17. package/dist/menu.css +1 -1
  18. package/dist/menu.js +1 -1
  19. package/dist/micl.css +1 -1
  20. package/dist/micl.js +1 -1
  21. package/dist/navigationbar.css +1 -1
  22. package/dist/navigationrail.css +1 -1
  23. package/dist/select.css +1 -1
  24. package/dist/shapes.css +1 -1
  25. package/dist/sidesheet.css +1 -1
  26. package/dist/slider.css +1 -1
  27. package/dist/snackbar.css +1 -1
  28. package/dist/textfield.css +1 -1
  29. package/dist/textfield.js +1 -1
  30. package/dist/timepicker.css +1 -1
  31. package/package.json +2 -2
  32. package/styles/typography.scss +41 -278
package/dist/snackbar.css CHANGED
@@ -1 +1 @@
1
- :root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level3: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 4px 8px 3px}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.0125rem}.micl-snackbar{--md-comp-snackbar-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-snackbar-motion-duration: 500ms;--md-comp-snackbar-motion-duration-reverse: 350ms;--micl-duration: var(--md-comp-snackbar-motion-duration-reverse);--statelayer-color: var(--md-sys-color-inverse-primary);--statelayer-opacity: 0%;box-sizing:border-box;position:fixed;display:flex;align-items:center;justify-content:space-between;column-gap:4px;block-size:0;inline-size:max-content;max-inline-size:min(1199px,100vw - 2*var(--md-sys-layout-window-margin));min-inline-size:300px;inset:auto;inset-block-end:calc(var(--md-comp-snackbar-margin, 24px) + env(safe-area-inset-bottom));inset-inline:0;margin-block:0;margin-inline:auto;padding-block:0;padding-inline:var(--md-comp-snackbar-padding, 16px);border:none;outline:none;border-radius:var(--md-comp-snackbar-container-shape, var(--md-sys-shape-corner-extra-small));box-shadow:var(--md-comp-snackbar-container-elevation, var(--md-sys-elevation-level3));background-color:var(--md-comp-snackbar-container-color, var(--md-sys-color-inverse-surface));background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;opacity:0;overflow-y:hidden;transition:block-size var(--micl-duration) var(--md-comp-snackbar-motion-spatial),opacity var(--md-comp-snackbar-motion-duration-reverse) linear,display var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,overlay var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,--statelayer-opacity var(--md-comp-snackbar-motion-duration) linear}.micl-snackbar:hover{--statelayer-color: var(--md-comp-snackbar-action-hover-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity))}.micl-snackbar:focus-visible{--statelayer-color: var(--md-comp-snackbar-action-focus-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity))}.micl-snackbar:active{--statelayer-color: var(--md-comp-snackbar-action-pressed-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity))}.micl-snackbar:popover-open{--micl-duration: var(--md-comp-snackbar-motion-duration);block-size:var(--md-comp-snackbar-with-single-line-container-height, 48px);opacity:1}@starting-style{.micl-snackbar:popover-open{block-size:0;opacity:0}}.micl-snackbar.micl-snackbar--two:popover-open{block-size:var(--md-comp-snackbar-with-two-lines-container-height, 68px)}.micl-snackbar .micl-snackbar__supporting-text{font-family:var(--md-sys-typescale-body-medium-font);font-size:var(--md-sys-typescale-body-medium-size);line-height:var(--md-sys-typescale-body-medium-line-height);font-weight:var(--md-sys-typescale-body-medium-weight);letter-spacing:var(--md-sys-typescale-body-medium-tracking);display:flex;flex-direction:column;color:var(--md-comp-snackbar-supporting-text-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar:has(button){padding-inline-end:4px}.micl-snackbar button{--statelayer-color: var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary));color:var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:hover{color:var(--md-comp-snackbar-action-hover-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:focus-visible{color:var(--md-comp-snackbar-action-focus-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:active{color:var(--md-comp-snackbar-action-pressed-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button[class*=micl-iconbutton]{--statelayer-color: var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));color:var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));font-size:var(--md-comp-snackbar-icon-size, var(--md-sys-icon-size, 24px))}.micl-snackbar button[class*=micl-iconbutton]:hover{color:var(--md-comp-snackbar-icon-hover-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar button[class*=micl-iconbutton]:focus-visible{color:var(--md-comp-snackbar-icon-focus-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar button[class*=micl-iconbutton]:active{color:var(--md-comp-snackbar-icon-pressed-icon-color, var(--md-sys-color-inverse-on-surface))}@media(max-width: 599px){.micl-snackbar{inline-size:calc(100vw - 2*var(--md-sys-layout-window-margin));min-inline-size:auto}}
1
+ :root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level3: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 4px 8px 3px}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.0125rem}.micl-snackbar{--md-comp-snackbar-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-snackbar-motion-duration: 500ms;--md-comp-snackbar-motion-duration-reverse: 350ms;--micl-duration: var(--md-comp-snackbar-motion-duration-reverse);--statelayer-color: var(--md-sys-color-inverse-primary);--statelayer-opacity: 0%;box-sizing:border-box;position:fixed;display:flex;align-items:center;justify-content:space-between;column-gap:4px;block-size:0;inline-size:max-content;max-inline-size:min(1199px,100vw - 2*var(--md-sys-layout-window-margin));min-inline-size:300px;inset:auto;inset-block-end:calc(var(--md-comp-snackbar-margin, 24px) + env(safe-area-inset-bottom));inset-inline:0;margin-block:0;margin-inline:auto;padding-block:0;padding-inline:var(--md-comp-snackbar-padding, 16px);border:none;outline:none;border-radius:var(--md-comp-snackbar-container-shape, var(--md-sys-shape-corner-extra-small));box-shadow:var(--md-comp-snackbar-container-elevation, var(--md-sys-elevation-level3));background-color:var(--md-comp-snackbar-container-color, var(--md-sys-color-inverse-surface));background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;opacity:0;overflow-y:hidden;transition:block-size var(--micl-duration) var(--md-comp-snackbar-motion-spatial),opacity var(--md-comp-snackbar-motion-duration-reverse) linear,display var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,overlay var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,--statelayer-opacity var(--md-comp-snackbar-motion-duration) linear}.micl-snackbar:hover{--statelayer-color: var(--md-comp-snackbar-action-hover-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity))}.micl-snackbar:focus-visible{--statelayer-color: var(--md-comp-snackbar-action-focus-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity))}.micl-snackbar:active{--statelayer-color: var(--md-comp-snackbar-action-pressed-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity))}.micl-snackbar:popover-open{--micl-duration: var(--md-comp-snackbar-motion-duration);block-size:var(--md-comp-snackbar-with-single-line-container-height, 48px);opacity:1}@starting-style{.micl-snackbar:popover-open{block-size:0;opacity:0}}.micl-snackbar.micl-snackbar--two:popover-open{block-size:var(--md-comp-snackbar-with-two-lines-container-height, 68px)}.micl-snackbar .micl-snackbar__supporting-text{font:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);letter-spacing:var(--md-sys-typescale-body-medium-tracking);display:flex;flex-direction:column;color:var(--md-comp-snackbar-supporting-text-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar:has(button){padding-inline-end:4px}.micl-snackbar button{--statelayer-color: var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary));color:var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:hover{color:var(--md-comp-snackbar-action-hover-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:focus-visible{color:var(--md-comp-snackbar-action-focus-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:active{color:var(--md-comp-snackbar-action-pressed-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button[class*=micl-iconbutton]{--statelayer-color: var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));color:var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));font-size:var(--md-comp-snackbar-icon-size, var(--md-sys-icon-size, 24px))}.micl-snackbar button[class*=micl-iconbutton]:hover{color:var(--md-comp-snackbar-icon-hover-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar button[class*=micl-iconbutton]:focus-visible{color:var(--md-comp-snackbar-icon-focus-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar button[class*=micl-iconbutton]:active{color:var(--md-comp-snackbar-icon-pressed-icon-color, var(--md-sys-color-inverse-on-surface))}@media(max-width: 599px){.micl-snackbar{inline-size:calc(100vw - 2*var(--md-sys-layout-window-margin));min-inline-size:auto}}
package/dist/textfield.css CHANGED
@@ -1 +1 @@
1
- :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem}:root{--md-sys-typescale-body-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}:is(.micl-textfield-filled,.micl-textfield-outlined){--_height: var(--md-comp-text-field-container-height, 56px);--_shape: var(--md-sys-shape-corner-extra-small);--_icon-size: var(--md-comp-text-field-icon-size, 24px);--_icon-space: var(--md-comp-text-field-icon-space, 12px);--_input-space: var(--md-comp-text-field-input-space, 16px);--_icon-leading: 0px;--_icon-trailing: 0px;--_prefix: 0px;--_suffix: 0px;--_outline-width: 1px;--_label-color: var(--md-comp-text-field-label-color, var(--md-sys-color-on-surface-variant));--_effects: var(--md-comp-text-field-motion-effects, cubic-bezier(0.34, 0.88, 0.34, 1));--_duration: var(--md-comp-text-field-motion-duration, 300ms);--_duration-reverse: var(--md-comp-text-field-motion-duration-reverse, 200ms);display:grid;grid-template-areas:"textfield" "supporting";align-items:center}:is(.micl-textfield-filled,.micl-textfield-outlined)>label{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:content-box;grid-area:textfield;align-self:flex-start;width:fit-content;padding-inline:4px;margin-block-start:calc((var(--_height) - var(--md-sys-typescale-body-large-line-height))/2);color:var(--_label-color);z-index:1;transition:margin var(--_duration) var(--_effects),font-size var(--_duration) linear,letter-spacing var(--_duration) linear}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea){font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;grid-area:textfield;inline-size:auto;margin:0;padding-inline:calc(var(--_input-space) - var(--_border, 0px) + var(--_icon-leading) + var(--_prefix)) calc(var(--_input-space) - var(--_border, 0px) + var(--_icon-trailing) + var(--_suffix));border:none;border-radius:var(--_shape);outline:none;color:var(--md-comp-text-field-input-color, var(--md-sys-color-on-surface));background-color:rgba(0,0,0,0);text-overflow:ellipsis;caret-color:var(--_caret-color, var(--md-comp-text-field-caret-color, var(--md-sys-color-primary)))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea):disabled{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea):disabled::placeholder{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::placeholder{color:var(--md-comp-text-field-input-placeholder-color, var(--md-sys-color-on-surface-variant))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::-webkit-inner-spin-button,:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)[type=number]{-moz-appearance:textfield}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select){height:var(--_height);padding-block:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea{min-height:var(--_height);padding-block:calc((var(--_height) - var(--md-sys-typescale-body-large-line-height))/2);resize:none}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea[rows]{padding-block-start:0;border-block-start:8px solid rgba(0,0,0,0);overflow:hidden}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea:not([rows]){field-sizing:content}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__prefix,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__suffix{font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);grid-area:textfield;align-content:center;height:var(--_height);color:var(--md-sys-color-on-surface-variant);opacity:0;z-index:1;transition:opacity var(--_duration-reverse) linear}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__prefix{width:var(--md-comp-text-field-prefix-space, 1em);padding-inline-start:calc(var(--_input-space) + var(--_icon-leading))}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__suffix{width:var(--md-comp-text-field-suffix-space, 1em);padding-inline-end:calc(var(--_input-space) + var(--_icon-trailing));margin-inline:auto 0}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-leading,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-trailing{grid-area:textfield;width:1em;margin-inline:var(--_icon-space) auto;font-size:var(--_icon-size);color:var(--md-comp-text-field-icon-color, var(--md-sys-color-on-surface-variant));z-index:1}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-trailing{margin-inline:auto var(--_icon-space)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__prefix){--_prefix: var(--md-comp-text-field-prefix-space, 1em)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__suffix){--_suffix: var(--md-comp-text-field-suffix-space, 1em)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__icon-leading){--_icon-leading: calc(var(--_icon-size) + var(--_icon-space))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__icon-trailing){--_icon-trailing: calc(var(--_icon-size) + var(--_icon-space))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>label):not(:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])))>select{color:rgba(0,0,0,0)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>label):not(:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])))>:is(input,select,textarea)::placeholder{color:rgba(0,0,0,0)}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__supporting-text,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__character-counter{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);grid-area:supporting;padding-block:4px 0;padding-inline:16px;color:var(--md-comp-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant))}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__supporting-text--focus{visibility:hidden}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__character-counter{justify-self:flex-end}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:is(input,textarea):not([maxlength]),>select)>.micl-textfield__character-counter{display:none}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:is(input,textarea)[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text{padding-inline-end:64px}.micl-textfield-filled{--_outline-color: var(--md-comp-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant));--_focus-outline-color: var(--md-comp-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary))}.micl-textfield-filled>label{margin-inline:12px 4px}.micl-textfield-filled:hover>:is(input,select,textarea):not(:disabled){--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-textfield-filled>:is(input,select,textarea){--statelayer-color: var(--md-sys-color-on-surface);padding-block-start:18px;padding-block-end:calc(3px - var(--_outline-width));border-block-end:var(--_outline-width) solid var(--_outline-color);border-end-start-radius:0;border-end-end-radius:0;background-color:var(--md-comp-filled-text-field-container-color, var(--md-sys-color-surface-container-highest));background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;transition:--statelayer-opacity var(--_duration) linear}.micl-textfield-filled>:is(input,select,textarea):disabled{background-color:rgb(from var(--md-sys-color-on-surface) r g b/4%)}.micl-textfield-filled>textarea{padding-block-start:24px}.micl-textfield-filled:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading))}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{margin-block-start:8px;margin-inline-start:12px}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])):has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading) - 4px)}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__prefix,.micl-textfield-filled:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__suffix{height:40px;margin-block-start:16px}.micl-textfield-outlined{--_outline-color: var(--md-comp-outlined-text-field-outline-color, var(--md-sys-color-outline));--_focus-outline-color: var(--md-comp-outlined-text-field-focus-outline-color, var(--md-sys-color-primary));--_disabled-outline-opacity: 12%;--_border: var(--_outline-width);--_outline-extra: calc(var(--_outline-width) - 1px);grid-template:"textfield textfield textfield" "supporting supporting supporting"/12px fit-content(calc(100% - 24px)) 1fr;margin-block-start:calc(2px + var(--md-sys-typescale-body-small-line-height)/2)}.micl-textfield-outlined::before,.micl-textfield-outlined::after{content:"";grid-area:textfield;align-self:start;height:var(--_shape);border-block-start:var(--_outline-width) solid var(--_outline-color)}.micl-textfield-outlined::before{grid-column:1/3;border-start-start-radius:var(--_shape)}.micl-textfield-outlined::after{grid-column:3;border-start-end-radius:var(--_shape)}.micl-textfield-outlined:hover{--_label-color: var(--md-sys-color-on-surface)}.micl-textfield-outlined>label{grid-column:2}.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading) - 12px)}.micl-textfield-outlined>:is(input,select,textarea){border-block-end:var(--_border) solid var(--_outline-color);border-inline:var(--_border) solid var(--_outline-color)}.micl-textfield-outlined>input{padding-block-start:calc(var(--_border) - 1px)}.micl-textfield-outlined>textarea{--_border: 1px;box-shadow:inset var(--_outline-extra) 0 var(--_outline-color),inset calc(0px - var(--_outline-extra)) 0 var(--_outline-color),inset 0 calc(0px - var(--_outline-extra)) var(--_outline-color)}.micl-textfield-outlined:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))::before{grid-column:1}.micl-textfield-outlined:has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{margin-block-start:calc(-2px - var(--md-sys-typescale-body-small-line-height)/2);margin-inline-start:0}:is(.micl-textfield-filled,.micl-textfield-outlined):hover{--_outline-color: var(--md-sys-color-on-surface)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus){--_outline-width: 3px;--_outline-color: var(--_focus-outline-color);--_label-color: var(--md-comp-text-field-focus-label-color, var(--md-sys-color-primary))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus)>.micl-textfield__supporting-text--focus{visibility:visible}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__prefix,:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__suffix{opacity:1}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled){--_outline-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--_disabled-outline-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled)>:is(label,[class*=micl-textfield__]:not(.micl-textfield__character-counter)){color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled)>.micl-textfield__character-counter{display:none}.micl-textfield--error:not(:has(>:disabled)){--_outline-color: var(--md-sys-color-error);--_caret-color: var(--md-sys-color-error);--_label-color: var(--md-sys-color-error)}.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__icon-trailing,.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__supporting-text,.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__character-counter{color:var(--md-sys-color-error)}.micl-textfield--error:not(:has(>:disabled)):hover:not(:has(>:focus)){--_outline-color: var(--md-sys-color-on-error-container);--_label-color: var(--md-sys-color-on-error-container)}.micl-textfield--error:not(:has(>:disabled)):hover:not(:has(>:focus))>.micl-textfield__icon-trailing{color:var(--md-sys-color-on-error-container)}:is(.micl-textfield-filled,.micl-textfield-outlined):dir(rtl)>.micl-textfield__icon-leading{margin-inline:auto var(--_icon-space)}:is(.micl-textfield-filled,.micl-textfield-outlined):dir(rtl)>.micl-textfield__icon-trailing{margin-inline:var(--_icon-space) auto}
1
+ :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-disabled-state-layer-opacity: 38%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem}:root{--md-sys-typescale-body-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}:is(.micl-textfield-filled,.micl-textfield-outlined){--_height: var(--md-comp-text-field-container-height, 56px);--_shape: var(--md-sys-shape-corner-extra-small);--_icon-size: var(--md-comp-text-field-icon-size, 24px);--_icon-space: var(--md-comp-text-field-icon-space, 12px);--_input-space: var(--md-comp-text-field-input-space, 16px);--_icon-leading: 0px;--_icon-trailing: 0px;--_prefix: 0px;--_suffix: 0px;--_outline-width: 1px;--_label-color: var(--md-comp-text-field-label-color, var(--md-sys-color-on-surface-variant));--_effects: var(--md-comp-text-field-motion-effects, cubic-bezier(0.34, 0.88, 0.34, 1));--_duration: var(--md-comp-text-field-motion-duration, 300ms);--_duration-reverse: var(--md-comp-text-field-motion-duration-reverse, 200ms);display:grid;grid-template-areas:"textfield" "supporting";align-items:center}:is(.micl-textfield-filled,.micl-textfield-outlined)>label{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:content-box;grid-area:textfield;align-self:flex-start;width:fit-content;padding-inline:4px;margin-block-start:calc((var(--_height) - var(--md-sys-typescale-body-large-line-height))/2);color:var(--_label-color);z-index:1;transition:margin var(--_duration) var(--_effects),font-size var(--_duration) linear,letter-spacing var(--_duration) linear}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea){font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);box-sizing:border-box;grid-area:textfield;inline-size:auto;margin:0;padding-inline:calc(var(--_input-space) - var(--_border, 0px) + var(--_icon-leading) + var(--_prefix)) calc(var(--_input-space) - var(--_border, 0px) + var(--_icon-trailing) + var(--_suffix));border:none;border-radius:var(--_shape);outline:none;color:var(--md-comp-text-field-input-color, var(--md-sys-color-on-surface));background-color:rgba(0,0,0,0);text-overflow:ellipsis;caret-color:var(--_caret-color, var(--md-comp-text-field-caret-color, var(--md-sys-color-primary)))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea):disabled{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea):disabled::placeholder{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::placeholder{color:var(--md-comp-text-field-input-placeholder-color, var(--md-sys-color-on-surface-variant))}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::-webkit-inner-spin-button,:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select,textarea)[type=number]{-moz-appearance:textfield}:is(.micl-textfield-filled,.micl-textfield-outlined)>:is(input,select){height:var(--_height);padding-block:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea{min-height:var(--_height);padding-block:calc((var(--_height) - var(--md-sys-typescale-body-large-line-height))/2);resize:none}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea[rows]{padding-block-start:0;border-block-start:8px solid rgba(0,0,0,0);overflow:hidden}:is(.micl-textfield-filled,.micl-textfield-outlined)>textarea:not([rows]){field-sizing:content}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__prefix,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__suffix{font:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);grid-area:textfield;align-content:center;height:var(--_height);color:var(--md-sys-color-on-surface-variant);opacity:0;z-index:1;transition:opacity var(--_duration-reverse) linear}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__prefix{width:var(--md-comp-text-field-prefix-space, 1em);padding-inline-start:calc(var(--_input-space) + var(--_icon-leading))}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__suffix{width:var(--md-comp-text-field-suffix-space, 1em);padding-inline-end:calc(var(--_input-space) + var(--_icon-trailing));margin-inline:auto 0}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-leading,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-trailing{grid-area:textfield;width:1em;margin-inline:var(--_icon-space) auto;font-size:var(--_icon-size);color:var(--md-comp-text-field-icon-color, var(--md-sys-color-on-surface-variant));z-index:1}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__icon-trailing{margin-inline:auto var(--_icon-space)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__prefix){--_prefix: var(--md-comp-text-field-prefix-space, 1em)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__suffix){--_suffix: var(--md-comp-text-field-suffix-space, 1em)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__icon-leading){--_icon-leading: calc(var(--_icon-size) + var(--_icon-space))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>.micl-textfield__icon-trailing){--_icon-trailing: calc(var(--_icon-size) + var(--_icon-space))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>label):not(:has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])))>select{color:rgba(0,0,0,0)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>label):not(:has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])))>:is(input,select,textarea)::placeholder{color:rgba(0,0,0,0)}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__supporting-text,:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__character-counter{font:var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font);letter-spacing:var(--md-sys-typescale-body-small-tracking);grid-area:supporting;padding-block:4px 0;padding-inline:16px;color:var(--md-comp-text-field-supporting-text-color, var(--md-sys-color-on-surface-variant))}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__supporting-text--focus{visibility:hidden}:is(.micl-textfield-filled,.micl-textfield-outlined)>.micl-textfield__character-counter{justify-self:flex-end}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:is(input,textarea):not([maxlength]),>select)>.micl-textfield__character-counter{display:none}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:is(input,textarea)[maxlength]:not(:disabled)):has(>.micl-textfield__character-counter)>.micl-textfield__supporting-text{padding-inline-end:64px}.micl-textfield-filled{--_outline-color: var(--md-comp-filled-text-field-active-indicator-color, var(--md-sys-color-on-surface-variant));--_focus-outline-color: var(--md-comp-filled-text-field-focus-active-indicator-color, var(--md-sys-color-primary))}.micl-textfield-filled>label{margin-inline:12px 4px}.micl-textfield-filled:hover>:is(input,select,textarea):not(:disabled){--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-textfield-filled>:is(input,select,textarea){--statelayer-color: var(--md-sys-color-on-surface);padding-block-start:18px;padding-block-end:calc(3px - var(--_outline-width));border-block-end:var(--_outline-width) solid var(--_outline-color);border-end-start-radius:0;border-end-end-radius:0;background-color:var(--md-comp-filled-text-field-container-color, var(--md-sys-color-surface-container-highest));background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;transition:--statelayer-opacity var(--_duration) linear}.micl-textfield-filled>:is(input,select,textarea):disabled{background-color:rgb(from var(--md-sys-color-on-surface) r g b/4%)}.micl-textfield-filled>textarea{padding-block-start:24px}.micl-textfield-filled:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading))}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{margin-block-start:8px;margin-inline-start:12px}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized])):has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading) - 4px)}.micl-textfield-filled:has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__prefix,.micl-textfield-filled:has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__suffix{height:40px;margin-block-start:16px}.micl-textfield-outlined{--_outline-color: var(--md-comp-outlined-text-field-outline-color, var(--md-sys-color-outline));--_focus-outline-color: var(--md-comp-outlined-text-field-focus-outline-color, var(--md-sys-color-primary));--_disabled-outline-opacity: 12%;--_border: var(--_outline-width);--_outline-extra: calc(var(--_outline-width) - 1px);grid-template:"textfield textfield textfield" "supporting supporting supporting"/12px fit-content(calc(100% - 24px)) 1fr;margin-block-start:calc(2px + var(--md-sys-typescale-body-small-line-height)/2)}.micl-textfield-outlined::before,.micl-textfield-outlined::after{content:"";grid-area:textfield;align-self:start;height:var(--_shape);border-block-start:var(--_outline-width) solid var(--_outline-color)}.micl-textfield-outlined::before{grid-column:1/3;border-start-start-radius:var(--_shape)}.micl-textfield-outlined::after{grid-column:3;border-start-end-radius:var(--_shape)}.micl-textfield-outlined:hover{--_label-color: var(--md-sys-color-on-surface)}.micl-textfield-outlined>label{grid-column:2}.micl-textfield-outlined:has(>.micl-textfield__icon-leading)>label{margin-inline-start:calc(var(--_input-space) + var(--_icon-leading) - 12px)}.micl-textfield-outlined>:is(input,select,textarea){border-block-end:var(--_border) solid var(--_outline-color);border-inline:var(--_border) solid var(--_outline-color)}.micl-textfield-outlined>input{padding-block-start:calc(var(--_border) - 1px)}.micl-textfield-outlined>textarea{--_border: 1px;box-shadow:inset var(--_outline-extra) 0 var(--_outline-color),inset calc(0px - var(--_outline-extra)) 0 var(--_outline-color),inset 0 calc(0px - var(--_outline-extra)) var(--_outline-color)}.micl-textfield-outlined:has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))::before{grid-column:1}.micl-textfield-outlined:has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{margin-block-start:calc(-2px - var(--md-sys-typescale-body-small-line-height)/2);margin-inline-start:0}:is(.micl-textfield-filled,.micl-textfield-outlined):hover{--_outline-color: var(--md-sys-color-on-surface)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus){--_outline-width: 3px;--_outline-color: var(--_focus-outline-color);--_label-color: var(--md-comp-text-field-focus-label-color, var(--md-sys-color-primary))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus)>.micl-textfield__supporting-text--focus{visibility:visible}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>label{font:var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font);letter-spacing:var(--md-sys-typescale-body-small-tracking)}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__prefix,:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:focus,>[data-miclvalue],>select[multiple],>:is([type=date],[type=datetime-local],[type=month],[type=time],[type=week]),>input[value]:not([value=""],[data-miclinitialized]),>select:not([data-miclinitialized]) option:checked:not([value=""]),>textarea:not(:empty,[data-miclinitialized]))>.micl-textfield__suffix{opacity:1}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled){--_outline-color: rgb(from var(--md-sys-color-on-surface) r g b / var(--_disabled-outline-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled)>:is(label,[class*=micl-textfield__]:not(.micl-textfield__character-counter)){color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined):has(>:disabled)>.micl-textfield__character-counter{display:none}.micl-textfield--error:not(:has(>:disabled)){--_outline-color: var(--md-sys-color-error);--_caret-color: var(--md-sys-color-error);--_label-color: var(--md-sys-color-error)}.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__icon-trailing,.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__supporting-text,.micl-textfield--error:not(:has(>:disabled))>.micl-textfield__character-counter{color:var(--md-sys-color-error)}.micl-textfield--error:not(:has(>:disabled)):hover:not(:has(>:focus)){--_outline-color: var(--md-sys-color-on-error-container);--_label-color: var(--md-sys-color-on-error-container)}.micl-textfield--error:not(:has(>:disabled)):hover:not(:has(>:focus))>.micl-textfield__icon-trailing{color:var(--md-sys-color-on-error-container)}:is(.micl-textfield-filled,.micl-textfield-outlined):dir(rtl)>.micl-textfield__icon-leading{margin-inline:auto var(--_icon-space)}:is(.micl-textfield-filled,.micl-textfield-outlined):dir(rtl)>.micl-textfield__icon-trailing{margin-inline:var(--_icon-space) auto}
package/dist/textfield.js CHANGED
@@ -1 +1 @@
1
- !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={56(e,t,n){const o=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(o.map).join(","),a=e=>Object.entries(o.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],r=e=>{const t=a(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},l=e=>{const t=a(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},c=e=>{const t=i();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const o=a(n),r=e.type;o&&"function"==typeof o.component[r]&&o.component[r]?.(e)},s=()=>{o.activated||(o.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&r(e),t&&e.querySelectorAll(t).forEach(r)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&l(e),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(l)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(r),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{o.rippled.has(e)||"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&(e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();const n=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-n.left)/n.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-n.top)/n.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const o=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",o))};e.addEventListener("animationend",o)}),o.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())})(document),document.addEventListener("change",c),document.addEventListener("input",c),document.addEventListener("keydown",c))},d=()=>{document.removeEventListener("DOMContentLoaded",d),s()};"loading"!==document.readyState?s():document.addEventListener("DOMContentLoaded",d),n.d(t,["register",0,(e,t,n)=>(o.map[e]={component:t,type:n},o.activated&&document.querySelectorAll(e).forEach(r),t)])}};const t={};function n(o){const i=t[o];if(void 0!==i)return i.exports;const a=t[o]={exports:{}};return e[o](a,a.exports,n),a.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var o=0;o<t.length;){var i=t[o++],a=t[o++];n.o(e,i)?0===a&&o++:0===a?Object.defineProperty(e,i,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,i,{enumerable:!0,get:a})}else for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let o={};n.r(o);var i=n(56);const a=".micl-textfield-outlined > input,.micl-textfield-filled > input",r=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",l=".micl-textfield-filled > select,.micl-textfield-outlined > select",c=`${a},${l},${r}`,s=e=>{if(!e.parentElement||e instanceof HTMLSelectElement||!e.maxLength)return;const t=e.parentElement.querySelector(".micl-textfield__character-counter");t&&(t.textContent=`${e.value.length}/${e.maxLength}`)},d=e=>{e.target.matches(c)&&e.target.dataset.miclinitialized&&!e.target.disabled&&(e.target instanceof HTMLInputElement&&e.target.dataset.micldateformat&&((e,t)=>{const n=(e.dataset.micldateformat||"").match(/([DMY]{2,4})([^DMY])?([DMY]{2,4})([^DMY])?([DMY]{2,4})/);if(!n)return;const o=[{type:n[1],length:n[1].length,separator:n[2]||""},{type:n[3],length:n[3].length,separator:n[4]||""},{type:n[5],length:n[5].length,separator:""}];e.maxLength=o.reduce((e,t)=>e+t.length+(t.separator?1:0),0);let i=e.value.replace(/\D/g,""),a="",r=0,l=e.selectionStart||0;for(let e=0;e<o.length;e++){const t=o[e];if(i.length<r)break;const n=i.substring(r,r+t.length);a+=n,r+=n.length,n.length===t.length&&t.separator&&(a+=t.separator)}const c=e.value.length;e.value=a.substring(0,e.maxLength);const s=e.value.length;t?.startsWith("deleteContent")?l>0&&e.setSelectionRange(l,l):s>c&&s>l?e.setSelectionRange(s,s):e.setSelectionRange(l,l)})(e.target,e.inputType),e.target.value?e.target.dataset.miclvalue="1":delete e.target.dataset.miclvalue,s(e.target))},m={initialize:e=>{if(!e.dataset.miclinitialized){if(e.dataset.miclinitialized="1",e.value&&(e.dataset.miclvalue="1"),e instanceof HTMLSelectElement){const t=()=>{const t=e.getBoundingClientRect(),n=t.top,o=window.innerHeight-t.bottom;!e.matches(":open")&&e.style.setProperty("--micl-select-picker-origin",n>o?"bottom":"top")};e.addEventListener("mousedown",t),e.addEventListener("keydown",t)}if(e.matches("input[type=time][data-timepicker],input[type=date][data-datepicker]")){const t=document.getElementById(e.dataset.timepicker||e.dataset.datepicker||"");if(t instanceof HTMLDialogElement){const n=e=>{e.preventDefault(),t.showModal()};e.addEventListener("click",n),e.addEventListener("keydown",e=>{const t=e.key;"Enter"!==t&&" "!==t||n(e)})}}s(e)}},change:d,input:d};(0,i.register)(a,m,HTMLInputElement),(0,i.register)(r,m,HTMLTextAreaElement),(0,i.register)(l,m,HTMLSelectElement);const p=m;return n.d(o,["default",0,p,"selectSelector",0,l,"textareaSelector",0,r,"textfieldSelector",0,a]),o})());
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={56(e,t,n){const o=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(o.map).join(","),l=e=>Object.entries(o.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],a=e=>{const t=l(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},r=e=>{const t=l(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},c=e=>{const t=i();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const o=l(n),a=e.type;o&&"function"==typeof o.component[a]&&o.component[a]?.(e)},s=()=>{o.activated||(o.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&a(e),t&&e.querySelectorAll(t).forEach(a)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&r(e),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(r)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(a),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{o.rippled.has(e)||"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&(e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();const n=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-n.left)/n.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-n.top)/n.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const o=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",o))};e.addEventListener("animationend",o)}),o.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())})(document),document.addEventListener("change",c),document.addEventListener("input",c),document.addEventListener("keydown",c))},d=()=>{document.removeEventListener("DOMContentLoaded",d),s()};"loading"!==document.readyState?s():document.addEventListener("DOMContentLoaded",d),n.d(t,["register",0,(e,t,n)=>(o.map[e]={component:t,type:n},o.activated&&document.querySelectorAll(e).forEach(a),t)])}};const t={};function n(o){const i=t[o];if(void 0!==i)return i.exports;const l=t[o]={exports:{}};return e[o](l,l.exports,n),l.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var o=0;o<t.length;){var i=t[o++],l=t[o++];n.o(e,i)?0===l&&o++:0===l?Object.defineProperty(e,i,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,i,{enumerable:!0,get:l})}else for(var i in t)n.o(t,i)&&!n.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let o={};n.r(o);var i=n(56);const l=".micl-textfield-outlined > input,.micl-textfield-filled > input",a=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",r=".micl-textfield-filled > select,.micl-textfield-outlined > select",c=`${l},${r},${a}`,s=e=>{if(!e.parentElement||e instanceof HTMLSelectElement||!e.maxLength)return;const t=e.parentElement.querySelector(".micl-textfield__character-counter");t&&(t.textContent=`${e.value.length}/${e.maxLength}`)},d=e=>{e.target.matches(c)&&e.target.dataset.miclinitialized&&!e.target.disabled&&(e.target instanceof HTMLInputElement&&e.target.dataset.micldateformat&&((e,t)=>{const n=(e.dataset.micldateformat||"").match(/([DMY]{2,4})([^DMY])?([DMY]{2,4})([^DMY])?([DMY]{2,4})/);if(!n)return;const o=[{type:n[1],length:n[1].length,separator:n[2]||""},{type:n[3],length:n[3].length,separator:n[4]||""},{type:n[5],length:n[5].length,separator:""}];e.maxLength=o.reduce((e,t)=>e+t.length+(t.separator?1:0),0);let i=e.value.replace(/\D/g,""),l="",a=0,r=e.selectionStart||0;for(let e=0;e<o.length;e++){const t=o[e];if(i.length<a)break;const n=i.substring(a,a+t.length);l+=n,a+=n.length,n.length===t.length&&t.separator&&(l+=t.separator)}const c=e.value.length;e.value=l.substring(0,e.maxLength);const s=e.value.length;t?.startsWith("deleteContent")?r>0&&e.setSelectionRange(r,r):s>c&&s>r?e.setSelectionRange(s,s):e.setSelectionRange(r,r)})(e.target,e.inputType),e.target.value?e.target.dataset.miclvalue="1":delete e.target.dataset.miclvalue,s(e.target))},m={initialize:e=>{if(!e.dataset.miclinitialized){if(e.dataset.miclinitialized="1",e.value&&(e.dataset.miclvalue="1"),e instanceof HTMLSelectElement&&e.multiple&&!CSS.supports("appearance","base-select")&&e.addEventListener("mousedown",t=>{const n=t.target instanceof Element&&t.target.closest("option");if(n&&!n.disabled&&!t.shiftKey){t.preventDefault();const o=e.scrollTop;n.selected=!n.selected,e.focus(),e.scrollTop=o,e.dispatchEvent(new Event("change",{bubbles:!0}))}}),e instanceof HTMLSelectElement&&!e.multiple){const t=()=>{const t=e.getBoundingClientRect(),n=t.top,o=window.innerHeight-t.bottom;!e.matches(":open")&&e.style.setProperty("--micl-select-picker-origin",n>o?"bottom":"top")};e.addEventListener("mousedown",t),e.addEventListener("keydown",t)}if(e.matches("input[type=time][data-timepicker],input[type=date][data-datepicker]")){const t=document.getElementById(e.dataset.timepicker||e.dataset.datepicker||"");if(t instanceof HTMLDialogElement){const n=e=>{e.preventDefault(),t.showModal()};e.addEventListener("click",n),e.addEventListener("keydown",e=>{const t=e.key;"Enter"!==t&&" "!==t||n(e)})}}s(e)}},change:d,input:d};(0,i.register)(l,m,HTMLInputElement),(0,i.register)(a,m,HTMLTextAreaElement),(0,i.register)(r,m,HTMLSelectElement);const p=m;return n.d(o,["default",0,p,"selectSelector",0,r,"textareaSelector",0,a,"textfieldSelector",0,l]),o})());
package/dist/timepicker.css CHANGED
@@ -1 +1 @@
1
- :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-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-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.0125rem}:root{--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}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:root{--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem}:root{--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem}:root{--md-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}.micl-timepicker__period .micl-timepicker__am,.micl-timepicker__period .micl-timepicker__pm,.micl-timepicker input[name=hour],.micl-timepicker input[name=minute]{--statelayer-color: currentColor;background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:--statelayer-opacity var(--md-comp-time-picker-motion-duration) linear}.micl-timepicker__period .micl-timepicker__am:hover,.micl-timepicker__period .micl-timepicker__pm:hover,.micl-timepicker input[name=hour]:hover,.micl-timepicker input[name=minute]:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity)}.micl-timepicker__period .micl-timepicker__am:focus-visible,.micl-timepicker__period .micl-timepicker__pm:focus-visible,.micl-timepicker input[name=hour]:focus-visible,.micl-timepicker input[name=minute]:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity)}.micl-timepicker__period .micl-timepicker__am:active,.micl-timepicker__period .micl-timepicker__pm:active,.micl-timepicker input[name=hour]:active,.micl-timepicker input[name=minute]:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity)}dialog.micl-dialog.micl-timepicker{--md-comp-time-picker-motion-duration: 350ms;--_input-height: var(--md-comp-time-picker-time-selector-container-height, 72px);--_input-width: var(--md-comp-time-picker-time-selector-container-width, 96px);--_separator-width: var(--md-comp-time-picker-separator-width, 24px);--_period-height: var(--md-comp-time-picker-period-selector-container-height, 72px);--_period-width: var(--md-comp-time-picker-period-selector-container-width, 52px);--_dial-size: var(--md-comp-time-picker-clock-dial-container-size, 256px);--_center-size: var(--md-comp-time-picker-clock-dial-selector-center-container-size, 8px);--_track-width: var(--md-comp-time-picker-clock-dial-selector-track-container-width, 2px);--_target: var(--md-sys-target-size, 48px)}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-comp-time-picker-headline-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:"hr sep min per" "hsup hsup msup msup" "dial dial dial dial";grid-template-columns:auto var(--_separator-width) var(--_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-timepicker__dial--hidden)){--_input-height: var(--md-comp-time-picker-time-selector-container-height, 80px);--_period-height: var(--md-comp-time-picker-period-selector-container-height, 80px)}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)).micl-timepicker--horizontal{--_period-height: var(--md-comp-time-picker-period-selector-container-height, 38px)}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)).micl-timepicker--horizontal .micl-dialog__headline{padding-block-end:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)).micl-timepicker--horizontal .micl-dialog__content{grid-template-areas:"x x x dial" "hr sep min dial" "per per per dial";grid-template-rows:72px var(--_input-height) auto}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period{--_ampm-height: var(--_period-height);--_period-width: calc(2 * var(--_input-width) + var(--_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-timepicker__dial--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-timepicker__dial--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-timepicker__dial--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-timepicker__dial--hidden)) .micl-timepicker__supporting-text-hour,dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) .micl-timepicker__supporting-text-minute{display:none}.micl-timepicker input[name=hour],.micl-timepicker input[name=minute]{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(--_input-width);block-size:var(--_input-height);margin:0;padding:0;border:none;outline:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-comp-time-picker-time-selector-unselected-container-color, var(--md-sys-color-surface-container-highest));color:var(--md-comp-time-picker-time-selector-unselected-label-text-color, var(--md-sys-color-on-surface));text-align:center;user-select:none;-moz-appearance:textfield}.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{background-color:var(--md-comp-time-picker-time-selector-selected-container-color, var(--md-sys-color-primary-container));color:var(--md-comp-time-picker-time-selector-selected-label-text-color, var(--md-sys-color-on-primary-container));border:2px solid var(--md-comp-time-input-focus-outline-color, var(--md-sys-color-primary))}.micl-timepicker input[name=hour]{grid-area:hr;justify-self:flex-end}.micl-timepicker input[name=minute]{grid-area:min}.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) input[name=hour],.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--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-timepicker__dial--hidden))){--_input-width: var(--md-comp-time-picker-time-selector-24h-container-width, 114px)}.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:sep;block-size:var(--_input-height);line-height:var(--_input-height);inline-size:var(--_separator-width);text-align:center;color:var(--md-comp-time-picker-separator-color, var(--md-sys-color-on-surface))}.micl-timepicker__period{--_ampm-height: calc(var(--_period-height) / 2);grid-area:per;block-size:var(--_period-height);inline-size:0}.micl-timepicker__period:has(.micl-timepicker__am){inline-size:var(--_period-width);margin-inline:12px 0}.micl-timepicker__period .micl-timepicker__am,.micl-timepicker__period .micl-timepicker__pm{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(--_period-width);block-size:var(--_ampm-height);min-block-size:var(--_ampm-height);margin:0;border:1px solid var(--md-comp-time-picker-period-selector-outline-color, var(--md-sys-color-outline));outline:none;color:var(--md-comp-time-picker-period-selector-unselected-label-text-color, var(--md-sys-color-on-surface-variant));background-color:rgba(0,0,0,0);cursor:pointer}.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-comp-time-picker-period-selector-selected-label-text-color, var(--md-sys-color-on-tertiary-container));background-color:var(--md-comp-time-picker-period-selector-selected-container-color, var(--md-sys-color-tertiary-container))}.micl-timepicker__period .micl-timepicker__am:focus-visible,.micl-timepicker__period .micl-timepicker__pm:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:-2px}.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:hsup;padding-block:4px 0;color:var(--md-comp-time-picker-supporting-text-color, var(--md-sys-color-on-surface-variant))}.micl-timepicker__supporting-text-minute{grid-area:msup}.micl-timepicker .micl-timepicker__dial{--micl-dial-radius: calc((var(--_dial-size) - var(--_target)) / 2);--micl-hour-radius: var(--micl-dial-radius);--micl-angle: 0deg;position:relative;grid-area:dial;justify-self:center;block-size:var(--_dial-size);inline-size:var(--_dial-size);margin-block:36px 0;margin-inline:0;outline:none;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-comp-time-picker-clock-dial-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(--_target) + 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(--_target);inline-size:var(--_target);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-comp-time-picker-clock-dial-unselected-label-text-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-comp-time-picker-clock-dial-selected-label-text-color, var(--md-sys-color-on-primary));background-color:var(--md-comp-time-picker-clock-dial-selector-handle-container-color, var(--md-sys-color-primary))}.micl-timepicker .micl-timepicker__dial data::before{content:"";position:absolute;block-size:var(--_target);inline-size:calc(2*var(--_target));inset-inline-start:0;inset-block-end:0;transform:rotate(var(--micl-angle)) translate(calc(-1 * var(--_target)));transform-origin:calc(var(--_target)/2) center;z-index:1}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track{--micl-track-length: 92px;position:relative;display:block;inline-size:var(--_track-width);block-size:var(--micl-track-length);inset-inline-start:calc((var(--_dial-size) - var(--_track-width))/2);inset-block-start:calc(var(--_dial-size)/2 - var(--micl-track-length));border-radius:calc(var(--_track-width)*2);background-color:var(--md-comp-time-picker-clock-dial-selector-track-container-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(--_center-size);inline-size:var(--_center-size);inset-block-end:-3px;inset-inline-start:-3px;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-comp-time-picker-clock-dial-selector-center-container-color, var(--md-sys-color-primary))}.micl-timepicker__dial--hidden{display:none !important}
1
+ :root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}:root{--md-sys-state-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-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.0125rem}:root{--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}:root{--md-sys-typescale-title-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-title-medium-size: 1rem;--md-sys-typescale-title-medium-line-height: 1.5rem;--md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-title-medium-tracking: 0.0125rem}:root{--md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-large-size: 1rem;--md-sys-typescale-body-large-line-height: 1.5rem;--md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-large-tracking: 0.03125rem}:root{--md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-small-size: 0.75rem;--md-sys-typescale-body-small-line-height: 1rem;--md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-small-tracking: 0.025rem}:root{--md-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}.micl-timepicker__period .micl-timepicker__am,.micl-timepicker__period .micl-timepicker__pm,.micl-timepicker input[name=hour],.micl-timepicker input[name=minute]{--statelayer-color: currentColor;background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:--statelayer-opacity var(--md-comp-time-picker-motion-duration) linear}.micl-timepicker__period .micl-timepicker__am:hover,.micl-timepicker__period .micl-timepicker__pm:hover,.micl-timepicker input[name=hour]:hover,.micl-timepicker input[name=minute]:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity)}.micl-timepicker__period .micl-timepicker__am:focus-visible,.micl-timepicker__period .micl-timepicker__pm:focus-visible,.micl-timepicker input[name=hour]:focus-visible,.micl-timepicker input[name=minute]:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity)}.micl-timepicker__period .micl-timepicker__am:active,.micl-timepicker__period .micl-timepicker__pm:active,.micl-timepicker input[name=hour]:active,.micl-timepicker input[name=minute]:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity)}dialog.micl-dialog.micl-timepicker{--md-comp-time-picker-motion-duration: 350ms;--_input-height: var(--md-comp-time-picker-time-selector-container-height, 72px);--_input-width: var(--md-comp-time-picker-time-selector-container-width, 96px);--_separator-width: var(--md-comp-time-picker-separator-width, 24px);--_period-height: var(--md-comp-time-picker-period-selector-container-height, 72px);--_period-width: var(--md-comp-time-picker-period-selector-container-width, 52px);--_dial-size: var(--md-comp-time-picker-clock-dial-container-size, 256px);--_center-size: var(--md-comp-time-picker-clock-dial-selector-center-container-size, 8px);--_track-width: var(--md-comp-time-picker-clock-dial-selector-track-container-width, 2px);--_target: var(--md-sys-target-size, 48px)}dialog.micl-dialog.micl-timepicker .micl-dialog__headline{padding-block-end:20px}dialog.micl-dialog.micl-timepicker .micl-dialog__headline h2{font:var(--md-sys-typescale-label-medium-weight) var(--md-sys-typescale-label-medium-size)/var(--md-sys-typescale-label-medium-line-height) var(--md-sys-typescale-label-medium-font);letter-spacing:var(--md-sys-typescale-label-medium-tracking);color:var(--md-comp-time-picker-headline-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:"hr sep min per" "hsup hsup msup msup" "dial dial dial dial";grid-template-columns:auto var(--_separator-width) var(--_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-timepicker__dial--hidden)){--_input-height: var(--md-comp-time-picker-time-selector-container-height, 80px);--_period-height: var(--md-comp-time-picker-period-selector-container-height, 80px)}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)).micl-timepicker--horizontal{--_period-height: var(--md-comp-time-picker-period-selector-container-height, 38px)}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)).micl-timepicker--horizontal .micl-dialog__headline{padding-block-end:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)).micl-timepicker--horizontal .micl-dialog__content{grid-template-areas:"x x x dial" "hr sep min dial" "per per per dial";grid-template-rows:72px var(--_input-height) auto}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period{--_ampm-height: var(--_period-height);--_period-width: calc(2 * var(--_input-width) + var(--_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-timepicker__dial--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-timepicker__dial--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-timepicker__dial--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-timepicker__dial--hidden)) .micl-timepicker__supporting-text-hour,dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) .micl-timepicker__supporting-text-minute{display:none}.micl-timepicker input[name=hour],.micl-timepicker input[name=minute]{font:var(--md-sys-typescale-display-medium-weight) var(--md-sys-typescale-display-medium-size)/var(--md-sys-typescale-display-medium-line-height) var(--md-sys-typescale-display-medium-font);letter-spacing:var(--md-sys-typescale-display-medium-tracking);box-sizing:border-box;inline-size:var(--_input-width);block-size:var(--_input-height);margin:0;padding:0;border:none;outline:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-comp-time-picker-time-selector-unselected-container-color, var(--md-sys-color-surface-container-highest));color:var(--md-comp-time-picker-time-selector-unselected-label-text-color, var(--md-sys-color-on-surface));text-align:center;user-select:none;-moz-appearance:textfield}.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{background-color:var(--md-comp-time-picker-time-selector-selected-container-color, var(--md-sys-color-primary-container));color:var(--md-comp-time-picker-time-selector-selected-label-text-color, var(--md-sys-color-on-primary-container));border:2px solid var(--md-comp-time-input-focus-outline-color, var(--md-sys-color-primary))}.micl-timepicker input[name=hour]{grid-area:hr;justify-self:flex-end}.micl-timepicker input[name=minute]{grid-area:min}.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) input[name=hour],.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) input[name=minute]{font:var(--md-sys-typescale-display-large-weight) var(--md-sys-typescale-display-large-size)/var(--md-sys-typescale-display-large-line-height) var(--md-sys-typescale-display-large-font);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-timepicker__dial--hidden))){--_input-width: var(--md-comp-time-picker-time-selector-24h-container-width, 114px)}.micl-timepicker__separator{font:var(--md-sys-typescale-display-large-weight) var(--md-sys-typescale-display-large-size)/var(--md-sys-typescale-display-large-line-height) var(--md-sys-typescale-display-large-font);letter-spacing:var(--md-sys-typescale-display-large-tracking);grid-area:sep;block-size:var(--_input-height);line-height:var(--_input-height);inline-size:var(--_separator-width);text-align:center;color:var(--md-comp-time-picker-separator-color, var(--md-sys-color-on-surface))}.micl-timepicker__period{--_ampm-height: calc(var(--_period-height) / 2);grid-area:per;block-size:var(--_period-height);inline-size:0}.micl-timepicker__period:has(.micl-timepicker__am){inline-size:var(--_period-width);margin-inline:12px 0}.micl-timepicker__period .micl-timepicker__am,.micl-timepicker__period .micl-timepicker__pm{font:var(--md-sys-typescale-title-medium-weight) var(--md-sys-typescale-title-medium-size)/var(--md-sys-typescale-title-medium-line-height) var(--md-sys-typescale-title-medium-font);letter-spacing:var(--md-sys-typescale-title-medium-tracking);appearance:none;box-sizing:border-box;position:relative;display:flex;align-items:center;inline-size:var(--_period-width);block-size:var(--_ampm-height);min-block-size:var(--_ampm-height);margin:0;border:1px solid var(--md-comp-time-picker-period-selector-outline-color, var(--md-sys-color-outline));outline:none;color:var(--md-comp-time-picker-period-selector-unselected-label-text-color, var(--md-sys-color-on-surface-variant));background-color:rgba(0,0,0,0);cursor:pointer}.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-comp-time-picker-period-selector-selected-label-text-color, var(--md-sys-color-on-tertiary-container));background-color:var(--md-comp-time-picker-period-selector-selected-container-color, var(--md-sys-color-tertiary-container))}.micl-timepicker__period .micl-timepicker__am:focus-visible,.micl-timepicker__period .micl-timepicker__pm:focus-visible{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary);outline-offset:-2px}.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:var(--md-sys-typescale-body-small-weight) var(--md-sys-typescale-body-small-size)/var(--md-sys-typescale-body-small-line-height) var(--md-sys-typescale-body-small-font);letter-spacing:var(--md-sys-typescale-body-small-tracking);grid-area:hsup;padding-block:4px 0;color:var(--md-comp-time-picker-supporting-text-color, var(--md-sys-color-on-surface-variant))}.micl-timepicker__supporting-text-minute{grid-area:msup}.micl-timepicker .micl-timepicker__dial{--micl-dial-radius: calc((var(--_dial-size) - var(--_target)) / 2);--micl-hour-radius: var(--micl-dial-radius);--micl-angle: 0deg;position:relative;grid-area:dial;justify-self:center;block-size:var(--_dial-size);inline-size:var(--_dial-size);margin-block:36px 0;margin-inline:0;outline:none;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-comp-time-picker-clock-dial-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(--_target) + 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:var(--md-sys-typescale-body-large-weight) var(--md-sys-typescale-body-large-size)/var(--md-sys-typescale-body-large-line-height) var(--md-sys-typescale-body-large-font);letter-spacing:var(--md-sys-typescale-body-large-tracking);position:absolute;display:grid;place-content:center;block-size:var(--_target);inline-size:var(--_target);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-comp-time-picker-clock-dial-unselected-label-text-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-comp-time-picker-clock-dial-selected-label-text-color, var(--md-sys-color-on-primary));background-color:var(--md-comp-time-picker-clock-dial-selector-handle-container-color, var(--md-sys-color-primary))}.micl-timepicker .micl-timepicker__dial data::before{content:"";position:absolute;block-size:var(--_target);inline-size:calc(2*var(--_target));inset-inline-start:0;inset-block-end:0;transform:rotate(var(--micl-angle)) translate(calc(-1 * var(--_target)));transform-origin:calc(var(--_target)/2) center;z-index:1}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track{--micl-track-length: 92px;position:relative;display:block;inline-size:var(--_track-width);block-size:var(--micl-track-length);inset-inline-start:calc((var(--_dial-size) - var(--_track-width))/2);inset-block-start:calc(var(--_dial-size)/2 - var(--micl-track-length));border-radius:calc(var(--_track-width)*2);background-color:var(--md-comp-time-picker-clock-dial-selector-track-container-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(--_center-size);inline-size:var(--_center-size);inset-block-end:-3px;inset-inline-start:-3px;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-comp-time-picker-clock-dial-selector-center-container-color, var(--md-sys-color-primary))}.micl-timepicker__dial--hidden{display:none !important}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "material-inspired-component-library",
3
- "version": "9.0.1",
3
+ "version": "9.0.2",
4
4
  "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
5
5
  "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
6
6
  "license": "MIT",
@@ -83,6 +83,6 @@
83
83
  "webpack-cli": "^7.2"
84
84
  },
85
85
  "allowScripts": {
86
- "@parcel/watcher@2.5.6": true
86
+ "@parcel/watcher@2.6.0": true
87
87
  }
88
88
  }
package/styles/typography.scss CHANGED
@@ -118,284 +118,47 @@ $_narrow-tracking: (
118
118
  }
119
119
  }
120
120
 
121
- @mixin display-large {
122
- font-family: var(--md-sys-typescale-display-large-font);
123
- font-size: var(--md-sys-typescale-display-large-size);
124
- line-height: var(--md-sys-typescale-display-large-line-height);
125
- font-weight: var(--md-sys-typescale-display-large-weight);
126
- letter-spacing: var(--md-sys-typescale-display-large-tracking);
127
- }
128
-
129
- @mixin display-medium {
130
- font-family: var(--md-sys-typescale-display-medium-font);
131
- font-size: var(--md-sys-typescale-display-medium-size);
132
- line-height: var(--md-sys-typescale-display-medium-line-height);
133
- font-weight: var(--md-sys-typescale-display-medium-weight);
134
- letter-spacing: var(--md-sys-typescale-display-medium-tracking);
135
- }
136
-
137
- @mixin display-small {
138
- font-family: var(--md-sys-typescale-display-small-font);
139
- font-size: var(--md-sys-typescale-display-small-size);
140
- line-height: var(--md-sys-typescale-display-small-line-height);
141
- font-weight: var(--md-sys-typescale-display-small-weight);
142
- letter-spacing: var(--md-sys-typescale-display-small-tracking);
143
- }
144
-
145
- @mixin headline-large {
146
- font-family: var(--md-sys-typescale-headline-large-font);
147
- font-size: var(--md-sys-typescale-headline-large-size);
148
- line-height: var(--md-sys-typescale-headline-large-line-height);
149
- font-weight: var(--md-sys-typescale-headline-large-weight);
150
- letter-spacing: var(--md-sys-typescale-headline-large-tracking);
151
- }
152
-
153
- @mixin headline-medium {
154
- font-family: var(--md-sys-typescale-headline-medium-font);
155
- font-size: var(--md-sys-typescale-headline-medium-size);
156
- line-height: var(--md-sys-typescale-headline-medium-line-height);
157
- font-weight: var(--md-sys-typescale-headline-medium-weight);
158
- letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
159
- }
160
-
161
- @mixin headline-small {
162
- font-family: var(--md-sys-typescale-headline-small-font);
163
- font-size: var(--md-sys-typescale-headline-small-size);
164
- line-height: var(--md-sys-typescale-headline-small-line-height);
165
- font-weight: var(--md-sys-typescale-headline-small-weight);
166
- letter-spacing: var(--md-sys-typescale-headline-small-tracking);
167
- }
168
-
169
- @mixin title-large {
170
- font-family: var(--md-sys-typescale-title-large-font);
171
- font-size: var(--md-sys-typescale-title-large-size);
172
- line-height: var(--md-sys-typescale-title-large-line-height);
173
- font-weight: var(--md-sys-typescale-title-large-weight);
174
- letter-spacing: var(--md-sys-typescale-title-large-tracking);
175
- }
176
-
177
- @mixin title-medium {
178
- font-family: var(--md-sys-typescale-title-medium-font);
179
- font-size: var(--md-sys-typescale-title-medium-size);
180
- line-height: var(--md-sys-typescale-title-medium-line-height);
181
- font-weight: var(--md-sys-typescale-title-medium-weight);
182
- letter-spacing: var(--md-sys-typescale-title-medium-tracking);
183
- }
184
-
185
- @mixin title-small {
186
- font-family: var(--md-sys-typescale-title-small-font);
187
- font-size: var(--md-sys-typescale-title-small-size);
188
- line-height: var(--md-sys-typescale-title-small-line-height);
189
- font-weight: var(--md-sys-typescale-title-small-weight);
190
- letter-spacing: var(--md-sys-typescale-title-small-tracking);
191
- }
192
-
193
- @mixin body-large {
194
- font-family: var(--md-sys-typescale-body-large-font);
195
- font-size: var(--md-sys-typescale-body-large-size);
196
- line-height: var(--md-sys-typescale-body-large-line-height);
197
- font-weight: var(--md-sys-typescale-body-large-weight);
198
- letter-spacing: var(--md-sys-typescale-body-large-tracking);
199
- }
200
-
201
- @mixin body-medium {
202
- font-family: var(--md-sys-typescale-body-medium-font);
203
- font-size: var(--md-sys-typescale-body-medium-size);
204
- line-height: var(--md-sys-typescale-body-medium-line-height);
205
- font-weight: var(--md-sys-typescale-body-medium-weight);
206
- letter-spacing: var(--md-sys-typescale-body-medium-tracking);
207
- }
208
-
209
- @mixin body-smallmedium {
210
- font-family: var(--md-sys-typescale-body-smallmedium-font);
211
- font-size: var(--md-sys-typescale-body-smallmedium-size);
212
- line-height: var(--md-sys-typescale-body-smallmedium-line-height);
213
- font-weight: var(--md-sys-typescale-body-smallmedium-weight);
214
- letter-spacing: var(--md-sys-typescale-body-smallmedium-tracking);
215
- }
216
-
217
- @mixin body-small {
218
- font-family: var(--md-sys-typescale-body-small-font);
219
- font-size: var(--md-sys-typescale-body-small-size);
220
- line-height: var(--md-sys-typescale-body-small-line-height);
221
- font-weight: var(--md-sys-typescale-body-small-weight);
222
- letter-spacing: var(--md-sys-typescale-body-small-tracking);
223
- }
224
-
225
- @mixin label-large {
226
- font-family: var(--md-sys-typescale-label-large-font);
227
- font-size: var(--md-sys-typescale-label-large-size);
228
- line-height: var(--md-sys-typescale-label-large-line-height);
229
- font-weight: var(--md-sys-typescale-label-large-weight);
230
- letter-spacing: var(--md-sys-typescale-label-large-tracking);
231
- }
232
-
233
- @mixin label-medium {
234
- font-family: var(--md-sys-typescale-label-medium-font);
235
- font-size: var(--md-sys-typescale-label-medium-size);
236
- line-height: var(--md-sys-typescale-label-medium-line-height);
237
- font-weight: var(--md-sys-typescale-label-medium-weight);
238
- letter-spacing: var(--md-sys-typescale-label-medium-tracking);
239
- }
240
-
241
- @mixin label-small {
242
- font-family: var(--md-sys-typescale-label-small-font);
243
- font-size: var(--md-sys-typescale-label-small-size);
244
- line-height: var(--md-sys-typescale-label-small-line-height);
245
- font-weight: var(--md-sys-typescale-label-small-weight);
246
- letter-spacing: var(--md-sys-typescale-label-small-tracking);
247
- }
248
-
249
- @mixin emphasized-display-large {
250
- font-family: var(--md-sys-typescale-emphasized-display-large-font);
251
- font-size: var(--md-sys-typescale-emphasized-display-large-size);
252
- line-height: var(--md-sys-typescale-emphasized-display-large-line-height);
253
- font-weight: var(--md-sys-typescale-emphasized-display-large-weight);
254
- letter-spacing: var(--md-sys-typescale-emphasized-display-large-tracking);
255
- }
256
-
257
- @mixin emphasized-display-medium {
258
- font-family: var(--md-sys-typescale-emphasized-display-medium-font);
259
- font-size: var(--md-sys-typescale-emphasized-display-medium-size);
260
- line-height: var(--md-sys-typescale-emphasized-display-medium-line-height);
261
- font-weight: var(--md-sys-typescale-emphasized-display-medium-weight);
262
- letter-spacing: var(--md-sys-typescale-emphasized-display-medium-tracking);
263
- }
264
-
265
- @mixin emphasized-display-small {
266
- font-family: var(--md-sys-typescale-emphasized-display-small-font);
267
- font-size: var(--md-sys-typescale-emphasized-display-small-size);
268
- line-height: var(--md-sys-typescale-emphasized-display-small-line-height);
269
- font-weight: var(--md-sys-typescale-emphasized-display-small-weight);
270
- letter-spacing: var(--md-sys-typescale-emphasized-display-small-tracking);
271
- }
272
-
273
- @mixin emphasized-headline-large {
274
- font-family: var(--md-sys-typescale-emphasized-headline-large-font);
275
- font-size: var(--md-sys-typescale-emphasized-headline-large-size);
276
- line-height: var(--md-sys-typescale-emphasized-headline-large-line-height);
277
- font-weight: var(--md-sys-typescale-emphasized-headline-large-weight);
278
- letter-spacing: var(--md-sys-typescale-emphasized-headline-large-tracking);
279
- }
280
-
281
- @mixin emphasized-headline-medium {
282
- font-family: var(--md-sys-typescale-emphasized-headline-medium-font);
283
- font-size: var(--md-sys-typescale-emphasized-headline-medium-size);
284
- line-height: var(--md-sys-typescale-emphasized-headline-medium-line-height);
285
- font-weight: var(--md-sys-typescale-emphasized-headline-medium-weight);
286
- letter-spacing: var(--md-sys-typescale-emphasized-headline-medium-tracking);
287
- }
288
-
289
- @mixin emphasized-headline-small {
290
- font-family: var(--md-sys-typescale-emphasized-headline-small-font);
291
- font-size: var(--md-sys-typescale-emphasized-headline-small-size);
292
- line-height: var(--md-sys-typescale-emphasized-headline-small-line-height);
293
- font-weight: var(--md-sys-typescale-emphasized-headline-small-weight);
294
- letter-spacing: var(--md-sys-typescale-emphasized-headline-small-tracking);
295
- }
296
-
297
- @mixin emphasized-title-large {
298
- font-family: var(--md-sys-typescale-emphasized-title-large-font);
299
- font-size: var(--md-sys-typescale-emphasized-title-large-size);
300
- line-height: var(--md-sys-typescale-emphasized-title-large-line-height);
301
- font-weight: var(--md-sys-typescale-emphasized-title-large-weight);
302
- letter-spacing: var(--md-sys-typescale-emphasized-title-large-tracking);
303
- }
304
-
305
- @mixin emphasized-title-medium {
306
- font-family: var(--md-sys-typescale-emphasized-title-medium-font);
307
- font-size: var(--md-sys-typescale-emphasized-title-medium-size);
308
- line-height: var(--md-sys-typescale-emphasized-title-medium-line-height);
309
- font-weight: var(--md-sys-typescale-emphasized-title-medium-weight);
310
- letter-spacing: var(--md-sys-typescale-emphasized-title-medium-tracking);
311
- }
312
-
313
- @mixin emphasized-title-small {
314
- font-family: var(--md-sys-typescale-emphasized-title-small-font);
315
- font-size: var(--md-sys-typescale-emphasized-title-small-size);
316
- line-height: var(--md-sys-typescale-emphasized-title-small-line-height);
317
- font-weight: var(--md-sys-typescale-emphasized-title-small-weight);
318
- letter-spacing: var(--md-sys-typescale-emphasized-title-small-tracking);
319
- }
320
-
321
- @mixin emphasized-body-large {
322
- font-family: var(--md-sys-typescale-emphasized-body-large-font);
323
- font-size: var(--md-sys-typescale-emphasized-body-large-size);
324
- line-height: var(--md-sys-typescale-emphasized-body-large-line-height);
325
- font-weight: var(--md-sys-typescale-emphasized-body-large-weight);
326
- letter-spacing: var(--md-sys-typescale-emphasized-body-large-tracking);
327
- }
328
-
329
- @mixin emphasized-body-medium {
330
- font-family: var(--md-sys-typescale-emphasized-body-medium-font);
331
- font-size: var(--md-sys-typescale-emphasized-body-medium-size);
332
- line-height: var(--md-sys-typescale-emphasized-body-medium-line-height);
333
- font-weight: var(--md-sys-typescale-emphasized-body-medium-weight);
334
- letter-spacing: var(--md-sys-typescale-emphasized-body-medium-tracking);
335
- }
336
-
337
- @mixin emphasized-body-small {
338
- font-family: var(--md-sys-typescale-emphasized-body-small-font);
339
- font-size: var(--md-sys-typescale-emphasized-body-small-size);
340
- line-height: var(--md-sys-typescale-emphasized-body-small-line-height);
341
- font-weight: var(--md-sys-typescale-emphasized-body-small-weight);
342
- letter-spacing: var(--md-sys-typescale-emphasized-body-small-tracking);
343
- }
344
-
345
- @mixin emphasized-label-large {
346
- font-family: var(--md-sys-typescale-emphasized-label-large-font);
347
- font-size: var(--md-sys-typescale-emphasized-label-large-size);
348
- line-height: var(--md-sys-typescale-emphasized-label-large-line-height);
349
- font-weight: var(--md-sys-typescale-emphasized-label-large-weight);
350
- letter-spacing: var(--md-sys-typescale-emphasized-label-large-tracking);
351
- }
352
-
353
- @mixin emphasized-label-medium {
354
- font-family: var(--md-sys-typescale-emphasized-label-medium-font);
355
- font-size: var(--md-sys-typescale-emphasized-label-medium-size);
356
- line-height: var(--md-sys-typescale-emphasized-label-medium-line-height);
357
- font-weight: var(--md-sys-typescale-emphasized-label-medium-weight);
358
- letter-spacing: var(--md-sys-typescale-emphasized-label-medium-tracking);
359
- }
360
-
361
- @mixin emphasized-label-small {
362
- font-family: var(--md-sys-typescale-emphasized-label-small-font);
363
- font-size: var(--md-sys-typescale-emphasized-label-small-size);
364
- line-height: var(--md-sys-typescale-emphasized-label-small-line-height);
365
- font-weight: var(--md-sys-typescale-emphasized-label-small-weight);
366
- letter-spacing: var(--md-sys-typescale-emphasized-label-small-tracking);
367
- }
121
+ @mixin _apply($name) {
122
+ font: var(--md-sys-typescale-#{$name}-weight) var(--md-sys-typescale-#{$name}-size)/var(--md-sys-typescale-#{$name}-line-height) var(--md-sys-typescale-#{$name}-font);
123
+ letter-spacing: var(--md-sys-typescale-#{$name}-tracking);
124
+ }
125
+
126
+ @mixin display-large { @include _apply(display-large); }
127
+ @mixin display-medium { @include _apply(display-medium); }
128
+ @mixin display-small { @include _apply(display-small); }
129
+ @mixin headline-large { @include _apply(headline-large); }
130
+ @mixin headline-medium { @include _apply(headline-medium); }
131
+ @mixin headline-small { @include _apply(headline-small); }
132
+ @mixin title-large { @include _apply(title-large); }
133
+ @mixin title-medium { @include _apply(title-medium); }
134
+ @mixin title-small { @include _apply(title-small); }
135
+ @mixin body-large { @include _apply(body-large); }
136
+ @mixin body-medium { @include _apply(body-medium); }
137
+ @mixin body-smallmedium { @include _apply(body-smallmedium); }
138
+ @mixin body-small { @include _apply(body-small); }
139
+ @mixin label-large { @include _apply(label-large); }
140
+ @mixin label-medium { @include _apply(label-medium); }
141
+ @mixin label-small { @include _apply(label-small); }
142
+ @mixin emphasized-display-large { @include _apply(emphasized-display-large); }
143
+ @mixin emphasized-display-medium { @include _apply(emphasized-display-medium); }
144
+ @mixin emphasized-display-small { @include _apply(emphasized-display-small); }
145
+ @mixin emphasized-headline-large { @include _apply(emphasized-headline-large); }
146
+ @mixin emphasized-headline-medium { @include _apply(emphasized-headline-medium); }
147
+ @mixin emphasized-headline-small { @include _apply(emphasized-headline-small); }
148
+ @mixin emphasized-title-large { @include _apply(emphasized-title-large); }
149
+ @mixin emphasized-title-medium { @include _apply(emphasized-title-medium); }
150
+ @mixin emphasized-title-small { @include _apply(emphasized-title-small); }
151
+ @mixin emphasized-body-large { @include _apply(emphasized-body-large); }
152
+ @mixin emphasized-body-medium { @include _apply(emphasized-body-medium); }
153
+ @mixin emphasized-body-small { @include _apply(emphasized-body-small); }
154
+ @mixin emphasized-label-large { @include _apply(emphasized-label-large); }
155
+ @mixin emphasized-label-medium { @include _apply(emphasized-label-medium); }
156
+ @mixin emphasized-label-small { @include _apply(emphasized-label-small); }
368
157
 
369
158
  @if $master {
370
- .md-sys-typescale-display-large { @include display-large; }
371
- .md-sys-typescale-display-medium { @include display-medium; }
372
- .md-sys-typescale-display-small { @include display-small; }
373
- .md-sys-typescale-headline-large { @include headline-large; }
374
- .md-sys-typescale-headline-medium { @include headline-medium; }
375
- .md-sys-typescale-headline-small { @include headline-small; }
376
- .md-sys-typescale-title-large { @include title-large; }
377
- .md-sys-typescale-title-medium { @include title-medium; }
378
- .md-sys-typescale-title-small { @include title-small; }
379
- .md-sys-typescale-body-large { @include body-large; }
380
- .md-sys-typescale-body-medium { @include body-medium; }
381
- .md-sys-typescale-body-smallmedium { @include body-smallmedium; }
382
- .md-sys-typescale-body-small { @include body-small; }
383
- .md-sys-typescale-label-large { @include label-large; }
384
- .md-sys-typescale-label-medium { @include label-medium; }
385
- .md-sys-typescale-label-small { @include label-small; }
386
- .md-sys-typescale-emphasized-display-large { @include emphasized-display-large; }
387
- .md-sys-typescale-emphasized-display-medium { @include emphasized-display-medium; }
388
- .md-sys-typescale-emphasized-display-small { @include emphasized-display-small; }
389
- .md-sys-typescale-emphasized-headline-large { @include emphasized-headline-large; }
390
- .md-sys-typescale-emphasized-headline-medium { @include emphasized-headline-medium; }
391
- .md-sys-typescale-emphasized-headline-small { @include emphasized-headline-small; }
392
- .md-sys-typescale-emphasized-title-large { @include emphasized-title-large; }
393
- .md-sys-typescale-emphasized-title-medium { @include emphasized-title-medium; }
394
- .md-sys-typescale-emphasized-title-small { @include emphasized-title-small; }
395
- .md-sys-typescale-emphasized-body-large { @include emphasized-body-large; }
396
- .md-sys-typescale-emphasized-body-medium { @include emphasized-body-medium; }
397
- .md-sys-typescale-emphasized-body-small { @include emphasized-body-small; }
398
- .md-sys-typescale-emphasized-label-large { @include emphasized-label-large; }
399
- .md-sys-typescale-emphasized-label-medium { @include emphasized-label-medium; }
400
- .md-sys-typescale-emphasized-label-small { @include emphasized-label-small; }
159
+ @each $name, $_ in $_scales {
160
+ .md-sys-typescale-#{$name} {
161
+ @include _apply($name);
162
+ }
163
+ }
401
164
  }