material-inspired-component-library 8.1.1 → 9.0.0

package/dist/timepicker.css

@@ -1 +1 @@
-:root{--md-sys-icon-size: 24px;--md-sys-padding-xxs: 4px;--md-sys-padding-xs: 8px;--md-sys-padding-s: 12px;--md-sys-padding-m: 16px;--md-sys-padding-l: 20px;--md-sys-padding-xl: 24px;--md-sys-padding-xxl: 28px}.micl-hidden{display:none !important}.micl-no-transition{transition:none !important}.micl-flex--vcenter{display:flex;flex-direction:row;align-items:center}.micl-grid-field,.micl-grid-iconfield{box-sizing:border-box;display:grid;row-gap:var(--md-sys-padding-xl, 24px)}.micl-grid-iconfield{grid-template-columns:48px 1fr}.micl-grid-iconfield__icon{grid-column:1;margin-block-start:.6rem}.micl-grid-iconfield__field{grid-column:2}.micl-link{display:flex;align-items:center;justify-content:center;text-decoration:none}@property --micl-ripple{syntax:"<integer>";inherits:false;initial-value:0}@property --micl-x{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-y{syntax:"<length>";inherits:false;initial-value:-100000px}@property --micl-width{syntax:"<length>";inherits:true;initial-value:0px}@property --micl-height{syntax:"<length>";inherits:true;initial-value:0px}:root{--md-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}:root{--md-sys-timepicker-input-height: 72px;--md-sys-timepicker-input-width: 96px;--md-sys-timepicker-input-width-24h: 114px;--md-sys-timepicker-separator-width: 24px;--md-sys-timepicker-period-height: 72px;--md-sys-timepicker-period-width: 52px;--md-sys-timepicker-dial-size: 256px;--md-sys-timepicker-dial-center-size: 8px;--md-sys-timepicker-dial-track-width: 2px}dialog.micl-dialog.micl-timepicker{--md-sys-timepicker-motion-duration: 350ms}dialog.micl-dialog.micl-timepicker .micl-dialog__headline{padding-block-end:20px}dialog.micl-dialog.micl-timepicker .micl-dialog__headline h2{font-family:var(--md-sys-typescale-label-medium-font);font-size:var(--md-sys-typescale-label-medium-size);line-height:var(--md-sys-typescale-label-medium-line-height);font-weight:var(--md-sys-typescale-label-medium-weight);letter-spacing:var(--md-sys-typescale-label-medium-tracking);color:var(--md-sys-color-on-surface-variant)}dialog.micl-dialog.micl-timepicker .micl-dialog__content{display:grid;padding-block-start:1px;grid-template-areas:"timepicker-hour timepicker-separator timepicker-minute timepicker-period" "timepicker-hour-supporting timepicker-hour-supporting timepicker-minute-supporting timepicker-minute-supporting" "timepicker-dial timepicker-dial timepicker-dial timepicker-dial";grid-template-columns:auto var(--md-sys-timepicker-separator-width) var(--md-sys-timepicker-input-width) auto}dialog.micl-dialog.micl-timepicker .micl-dialog__actions:has(.micl-timepicker__inputmode){justify-content:space-between}dialog.micl-dialog.micl-timepicker .micl-dialog__actions .micl-timepicker__inputmode{margin-inline-start:-8px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)){--md-sys-timepicker-input-height: 80px;--md-sys-timepicker-period-height: 80px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal{--md-sys-timepicker-period-height: 38px}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__headline{padding-block-end:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content{grid-template-areas:"timepicker-dummy timepicker-dummy timepicker-dummy timepicker-dial" "timepicker-hour timepicker-separator timepicker-minute timepicker-dial" "timepicker-period timepicker-period timepicker-period timepicker-dial";grid-template-rows:72px var(--md-sys-timepicker-input-height) auto}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period{--md-sys-timepicker-ampm-height: var(--md-sys-timepicker-period-height);--md-sys-timepicker-period-width: calc(2 * var(--md-sys-timepicker-input-width) + var(--md-sys-timepicker-separator-width));display:flex;align-self:flex-start;margin-inline:0;margin-block:16px 0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period .micl-timepicker__am{border-start-end-radius:0;border-end-start-radius:var(--md-sys-shape-corner-small)}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__period .micl-timepicker__pm{border-block-start-width:1px;border-inline-start-width:0px;border-start-end-radius:var(--md-sys-shape-corner-small);border-end-start-radius:0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)).micl-timepicker--horizontal .micl-dialog__content .micl-timepicker__dial{margin-block:0;margin-inline:40px 0}dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) .micl-timepicker__supporting-text-hour,dialog.micl-dialog.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) .micl-timepicker__supporting-text-minute{display:none}.micl-timepicker input[name=hour],.micl-timepicker input[name=minute]{--statelayer-color: var(--md-sys-color-on-surface);font-family:var(--md-sys-typescale-display-medium-font);font-size:var(--md-sys-typescale-display-medium-size);line-height:var(--md-sys-typescale-display-medium-line-height);font-weight:var(--md-sys-typescale-display-medium-weight);letter-spacing:var(--md-sys-typescale-display-medium-tracking);box-sizing:border-box;inline-size:var(--md-sys-timepicker-input-width);block-size:var(--md-sys-timepicker-input-height);margin:0;padding:0;border:none;outline:none;border-radius:var(--md-sys-shape-corner-small);background-color:var(--md-sys-color-surface-container-highest);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;color:var(--md-sys-color-on-surface);text-align:center;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-moz-appearance:textfield;transition:--statelayer-opacity var(--md-sys-timepicker-motion-duration) linear}.micl-timepicker input[name=hour]::-webkit-inner-spin-button,.micl-timepicker input[name=hour]::-webkit-outer-spin-button,.micl-timepicker input[name=minute]::-webkit-inner-spin-button,.micl-timepicker input[name=minute]::-webkit-outer-spin-button{-webkit-appearance:none}.micl-timepicker input[name=hour]::selection,.micl-timepicker input[name=minute]::selection{background-color:rgba(0,0,0,0)}.micl-timepicker input[name=hour].micl-timepicker--selected,.micl-timepicker input[name=minute].micl-timepicker--selected{--statelayer-color: var(--md-sys-color-on-primary-container);background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border:2px solid var(--md-sys-color-primary)}.micl-timepicker input[name=hour]:hover,.micl-timepicker input[name=minute]:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-timepicker input[name=hour]:focus-visible,.micl-timepicker input[name=minute]:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}.micl-timepicker input[name=hour]:active,.micl-timepicker input[name=minute]:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-timepicker input[name=hour]{grid-area:timepicker-hour;justify-self:flex-end}.micl-timepicker input[name=minute]{grid-area:timepicker-minute}.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) input[name=hour],.micl-timepicker:has(.micl-timepicker__dial:not(.micl-hidden)) input[name=minute]{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking);border:none;cursor:pointer}.micl-timepicker:not(:has(.micl-timepicker__am)):not(:has(.micl-timepicker__dial:not(.micl-hidden))){--md-sys-timepicker-input-width: var(--md-sys-timepicker-input-width-24h)}.micl-timepicker__separator{font-family:var(--md-sys-typescale-display-large-font);font-size:var(--md-sys-typescale-display-large-size);line-height:var(--md-sys-typescale-display-large-line-height);font-weight:var(--md-sys-typescale-display-large-weight);letter-spacing:var(--md-sys-typescale-display-large-tracking);grid-area:timepicker-separator;block-size:var(--md-sys-timepicker-input-height);line-height:var(--md-sys-timepicker-input-height);inline-size:var(--md-sys-timepicker-separator-width);text-align:center;color:var(--md-sys-color-on-surface)}.micl-timepicker__period{--md-sys-timepicker-ampm-height: calc(var(--md-sys-timepicker-period-height) / 2);grid-area:timepicker-period;block-size:var(--md-sys-timepicker-period-height);inline-size:0}.micl-timepicker__period:has(.micl-timepicker__am){inline-size:var(--md-sys-timepicker-period-width);margin-inline:12px 0}.micl-timepicker__period .micl-timepicker__am,.micl-timepicker__period .micl-timepicker__pm{--statelayer-color: var(--md-sys-color-on-surface-variant);font-family:var(--md-sys-typescale-title-medium-font);font-size:var(--md-sys-typescale-title-medium-size);line-height:var(--md-sys-typescale-title-medium-line-height);font-weight:var(--md-sys-typescale-title-medium-weight);letter-spacing:var(--md-sys-typescale-title-medium-tracking);appearance:none;box-sizing:border-box;position:relative;display:flex;align-items:center;inline-size:var(--md-sys-timepicker-period-width);block-size:var(--md-sys-timepicker-ampm-height);min-block-size:var(--md-sys-timepicker-ampm-height);margin:0;border:1px solid var(--md-sys-color-outline);outline:none;color:var(--md-sys-color-on-surface-variant);background-color:rgba(0,0,0,0);background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:--statelayer-opacity var(--md-sys-timepicker-motion-duration) linear}.micl-timepicker__period .micl-timepicker__am::before,.micl-timepicker__period .micl-timepicker__pm::before{content:"AM";position:absolute;inline-size:100%;text-align:center}.micl-timepicker__period .micl-timepicker__am:checked,.micl-timepicker__period .micl-timepicker__pm:checked{color:var(--md-sys-color-on-tertiary-container);background-color:var(--md-sys-color-tertiary-container)}.micl-timepicker__period .micl-timepicker__am:hover:checked,.micl-timepicker__period .micl-timepicker__am:focus-visible:checked,.micl-timepicker__period .micl-timepicker__am:active:checked,.micl-timepicker__period .micl-timepicker__pm:hover:checked,.micl-timepicker__period .micl-timepicker__pm:focus-visible:checked,.micl-timepicker__period .micl-timepicker__pm:active:checked{--statelayer-color: var(--md-sys-color-on-tertiary-container)}.micl-timepicker__period .micl-timepicker__am:hover::after,.micl-timepicker__period .micl-timepicker__am:focus-visible::after,.micl-timepicker__period .micl-timepicker__am:active::after,.micl-timepicker__period .micl-timepicker__pm:hover::after,.micl-timepicker__period .micl-timepicker__pm:focus-visible::after,.micl-timepicker__period .micl-timepicker__pm:active::after{border-color:var(--md-sys-color-on-surface)}.micl-timepicker__period .micl-timepicker__am:hover:checked::after,.micl-timepicker__period .micl-timepicker__am:focus-visible:checked::after,.micl-timepicker__period .micl-timepicker__am:active:checked::after,.micl-timepicker__period .micl-timepicker__pm:hover:checked::after,.micl-timepicker__period .micl-timepicker__pm:focus-visible:checked::after,.micl-timepicker__period .micl-timepicker__pm:active:checked::after{border-color:var(--md-sys-color-primary)}.micl-timepicker__period .micl-timepicker__am:hover,.micl-timepicker__period .micl-timepicker__pm:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-timepicker__period .micl-timepicker__am:focus-visible,.micl-timepicker__period .micl-timepicker__pm:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary);outline-offset:-2px}.micl-timepicker__period .micl-timepicker__am:active,.micl-timepicker__period .micl-timepicker__pm:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-timepicker__period .micl-timepicker__am{border-start-start-radius:var(--md-sys-shape-corner-small);border-start-end-radius:var(--md-sys-shape-corner-small)}.micl-timepicker__period .micl-timepicker__pm{border-block-start-width:0px;border-end-start-radius:var(--md-sys-shape-corner-small);border-end-end-radius:var(--md-sys-shape-corner-small)}.micl-timepicker__period .micl-timepicker__pm::before{content:"PM"}.micl-timepicker__supporting-text-hour,.micl-timepicker__supporting-text-minute{font-family:var(--md-sys-typescale-body-small-font);font-size:var(--md-sys-typescale-body-small-size);line-height:var(--md-sys-typescale-body-small-line-height);font-weight:var(--md-sys-typescale-body-small-weight);letter-spacing:var(--md-sys-typescale-body-small-tracking);grid-area:timepicker-hour-supporting;padding-block:4px 0;color:var(--md-sys-color-on-surface-variant)}.micl-timepicker__supporting-text-minute{grid-area:timepicker-minute-supporting}.micl-timepicker .micl-timepicker__dial{--micl-dial-radius: calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-target-size, 48px)) / 2);--micl-hour-radius: var(--micl-dial-radius);--micl-angle: 0deg;position:relative;grid-area:timepicker-dial;justify-self:center;block-size:var(--md-sys-timepicker-dial-size, 256px);inline-size:var(--md-sys-timepicker-dial-size, 256px);margin-block:36px 0;margin-inline:0;outline:none;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-surface-container-highest);list-style-type:none;touch-action:none}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__dial-inner{--micl-hour-radius: calc(var(--micl-dial-radius) - var(--md-sys-target-size, 48px) + 12px);z-index:2}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__dial-inner::before{z-index:2}.micl-timepicker .micl-timepicker__dial data{--micl-a: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * cos(var(--micl-angle))));--micl-b: calc(var(--micl-dial-radius) + (var(--micl-hour-radius) * sin(var(--micl-angle))));font-family:var(--md-sys-typescale-body-large-font);font-size:var(--md-sys-typescale-body-large-size);line-height:var(--md-sys-typescale-body-large-line-height);font-weight:var(--md-sys-typescale-body-large-weight);letter-spacing:var(--md-sys-typescale-body-large-tracking);position:absolute;display:grid;place-content:center;block-size:var(--md-sys-target-size, 48px);inline-size:var(--md-sys-target-size, 48px);inset-inline-start:var(--micl-a);inset-block-start:var(--micl-b);outline:none;border-radius:var(--md-sys-shape-corner-full);color:var(--md-sys-color-on-surface);cursor:pointer;z-index:1;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.micl-timepicker .micl-timepicker__dial data.micl-timepicker__time--selected{color:var(--md-sys-color-on-primary);background-color:var(--md-sys-color-primary)}.micl-timepicker .micl-timepicker__dial data::before{content:"";position:absolute;block-size:var(--md-sys-target-size, 48px);inline-size:calc(2*var(--md-sys-target-size, 48px));inset-inline-start:0;inset-block-end:0;transform:rotate(var(--micl-angle)) translate(calc(-1 * var(--md-sys-target-size, 48px)));transform-origin:calc(var(--md-sys-target-size, 48px)/2) center;z-index:1}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track{--micl-track-length: 92px;position:relative;display:block;inline-size:var(--md-sys-timepicker-dial-track-width, 2px);block-size:var(--micl-track-length);inset-inline-start:calc((var(--md-sys-timepicker-dial-size, 256px) - var(--md-sys-timepicker-dial-track-width, 2px))/2);inset-block-start:calc(var(--md-sys-timepicker-dial-size, 256px)/2 - var(--micl-track-length));border-radius:calc(var(--md-sys-timepicker-dial-track-width, 2px)*2);background-color:var(--md-sys-color-primary);transform:rotate(calc(90deg + var(--micl-angle)));transform-origin:bottom}.micl-timepicker .micl-timepicker__dial .micl-timepicker__track::before{content:"";position:absolute;display:block;block-size:var(--md-sys-timepicker-dial-center-size, 8px);inline-size:var(--md-sys-timepicker-dial-center-size, 8px);inset-block-end:-3px;inset-inline-start:-3px;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-primary)}
+: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}

package/dist/timepicker.js

@@ -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={d:(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};return(()=>{e.r(t),e.d(t,{default:()=>n,timepickerSelector:()=>i});const i="dialog.micl-dialog.micl-timepicker",n=(()=>{const e=(()=>{try{const e=new Intl.DateTimeFormat(void 0,{hour:"numeric"}).resolvedOptions().hourCycle;return"h11"===e||"h12"===e}catch(e){return!1}})(),t=(e,t)=>e.querySelector(t),i=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,n=e=>!!e&&!e.classList.contains("micl-hidden"),r=(e,t)=>{e.classList.toggle("micl-timepicker--selected",t)},a=t=>"hour"===t?{min:e?1:0,max:e?12:23}:{min:0,max:59},o=(e,t,i)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove("micl-timepicker__time--selected"));const n=e.querySelector(`data[data-${t}][value="${i}"]`);let r="";n?(r=window.getComputedStyle(n).getPropertyValue("--micl-angle"),n.classList.add("micl-timepicker__time--selected")):"minute"===t&&(r=`${Math.round(360*parseInt(i,10)/60-90)}deg`),r&&e.style.setProperty("--micl-angle",r)},l=(i,n,r,a,l=!0)=>{let c=parseInt(r||"0",10);if(isNaN(c))return;const d=t(i,`input[name=${n}]`);if(d){if("hour"===n&&a&&e){const e=i.querySelector(".micl-timepicker__am"),t=i.querySelector(".micl-timepicker__pm");c>12?(t&&(t.checked=!0),c-=12):e&&(e.checked=!0)}if(d.value=`${c}`.padStart(2,"0"),l){const e=t(i,".micl-timepicker__dial");if(!e)return;o(e,n,d.value)}}},c=(t,i,n)=>{if("ArrowDown"!==n.key&&"ArrowUp"!==n.key)return;n.preventDefault();const{max:r,min:o}=a(i.name);let c=parseInt(i.value,10)||0;if(c+="ArrowUp"===n.key?1:-1,(c<o||c>r)&&(c=c<o?r:o,"hour"===i.name&&e)){const e=t.querySelector("input[name=period]:not(:checked)");e?.click()}l(t,i.name,`${c}`)};return{initialize:d=>{if(d.dataset.miclinitialized)return;const m=t(d,"form"),s=t(d,".micl-timepicker__inputmode"),u=t(d,".micl-timepicker__dial"),p=[t(d,"input[name=hour]"),t(d,"input[name=minute]")].filter(e=>null!==e);if(!m||p.length<2)return;d.dataset.miclinitialized="1",p.forEach((t,i)=>{(t=>{const{min:i,max:n}=a(t.name);let r;r="hour"===t.name?e?"(0[1-9]|1[0-2])":"(0[0-9]|1[0-9]|2[0-3])":"(0[0-9]|[1-5][0-9])";const o={maxlength:"2",pattern:r,inputmode:"numeric",autocomplete:"off",role:"spinbutton",min:String(i),max:String(n)};for(const e in o)t.setAttribute(e,o[e])})(t),u&&t.toggleAttribute("readonly",n(u)),t.addEventListener("keydown",c.bind(null,d,t)),t.addEventListener("focus",()=>{r(p[0===i?1:0],!1),r(t,!0),u&&(((e,t)=>{e.querySelectorAll("data").forEach(e=>{e.dataset[t]&&(e.textContent=e.dataset[t],e.value=e.dataset[t].padStart(2,"0")),e.classList.contains("micl-timepicker__dial-inner")&&e.classList["hour"===t?"remove":"add"]("micl-hidden")})})(u,t.name),o(u,t.name,t.value))}),t.addEventListener("blur",()=>{n(u)||((e=>{const{max:t,min:i}=a(e.name);let n=parseInt(e.value,10);isNaN(n)&&(n=i),n>t&&(n=t),n<0&&(n=i),e.value=String(n).padStart(2,"0")})(t),r(t,!1))})});const f=d.querySelector(".micl-timepicker__period");if(f&&e&&(["am","pm"].forEach(e=>{let t=document.createElement("input");t.type="radio",t.name="period",t.classList.add(`micl-timepicker__${e}`),t.value=e,t.ariaLabel=e.toUpperCase(),f.appendChild(t)}),f.classList.toggle("micl-hidden",!e)),s?.addEventListener("click",()=>{u?.classList.toggle("micl-hidden"),p.forEach(e=>{e.toggleAttribute("readonly",n(u))}),n(u)&&p[0].focus()}),u){(t=>{let i=e?300:270;for(let n=e?1:0;n<=(e?12:23);n++){const r=document.createElement("data");r.value=`${n}`.padStart(2,"0"),r.textContent=`${n}`,r.dataset.hour=`${n}`,r.style.setProperty("--micl-angle",`${i}deg`),!e&&n>=12?r.classList.add("micl-timepicker__dial-inner"):r.dataset.minute=""+5*n%60,t.appendChild(r),i=(i+30)%360}const n=document.createElement("span");n.classList.add("micl-timepicker__track"),t.appendChild(n)})(u);const t=(e,t)=>{const i=document.elementFromPoint(e,t);i&&"DATA"===i.tagName&&l(d,d.querySelector("input[name=hour].micl-timepicker--selected")?"hour":"minute",i.value)};u.addEventListener("pointerdown",e=>{u.classList.add("micl-timepicker__dial--dragging"),t(e.clientX,e.clientY),u.setPointerCapture(e.pointerId)}),u.addEventListener("pointermove",e=>{u.classList.contains("micl-timepicker__dial--dragging")&&t(e.clientX,e.clientY)});const i=e=>{u.classList.remove("micl-timepicker__dial--dragging"),u.releasePointerCapture(e.pointerId)};u.addEventListener("pointerup",i),u.addEventListener("pointercancel",i)}d.addEventListener("beforetoggle",e=>{if("open"===e.oldState)return;let t=document.activeElement;if(i(t)&&(t.dataset.timepicker||t.popoverTargetElement||t.commandForElement)||(t=document.querySelector(`[data-timepicker="${d.id}"],[popovertarget="${d.id}"],[commandfor="${d.id}"]`)),!i(t))return;d._miclInvoker=t;const n=(t.value||t.textContent).split(":");2===n.length&&(l(d,"hour",n[0],!0),l(d,"minute",n[1],!1,!1))}),d.addEventListener("close",()=>{if(!d.returnValue)return;let t=d._miclInvoker;if(t||(t=document.querySelector(`[data-timepicker="${d.id}"],[popovertarget="${d.id}"],[commandfor="${d.id}"]`)),!i(t))return;const n=m.elements;let r=parseInt(n.namedItem("hour")?.value||"0",10);if(isNaN(r))return;e&&"pm"===n.namedItem("period")?.value&&(r+=12);const a=parseInt(n.namedItem("minute")?.value||"0",10);if(isNaN(a))return;const o=`${r}`.padStart(2,"0")+":"+`${a}`.padStart(2,"0");t.value=o,t instanceof HTMLInputElement?(t.dispatchEvent(new Event("change",{bubbles:!0})),t.dispatchEvent(new Event("input",{bubbles:!0}))):t.textContent=o})}}})()})(),t})());
+!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},r=()=>Object.keys(o.map).join(","),i=e=>Object.entries(o.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],a=e=>{const t=i(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},l=e=>{const t=i(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},c=e=>{const t=r();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const o=i(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=r();t&&e.matches(t)&&a(e),t&&e.querySelectorAll(t).forEach(a)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=r();t&&e.matches(t)&&l(e),(e=>{const t=r();t&&e.querySelectorAll(t).forEach(l)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=r();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 r=t[o];if(void 0!==r)return r.exports;const i=t[o]={exports:{}};return e[o](i,i.exports,n),i.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var o=0;o<t.length;){var r=t[o++],i=t[o++];n.o(e,r)?0===i&&o++:0===i?Object.defineProperty(e,r,{enumerable:!0,value:t[o++]}):Object.defineProperty(e,r,{enumerable:!0,get:i})}else for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},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 r=n(56);const i="dialog.micl-dialog.micl-timepicker",a="micl-timepicker__",l="micl-timepicker__dial--hidden",c="micl-timepicker--selected",s=(()=>{try{const e=new Intl.DateTimeFormat(void 0,{hour:"numeric"}).resolvedOptions().hourCycle;return"h11"===e||"h12"===e}catch(e){return!1}})(),d=(e,t)=>e.querySelector(t),m=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,u=e=>!!e&&!e.classList.contains(l),p=(e,t)=>{e.classList.toggle(c,t)},f=e=>document.querySelector(`[data-timepicker="${e.id}"],[popovertarget="${e.id}"],[commandfor="${e.id}"]`),y=e=>"hour"===e?{min:s?1:0,max:s?12:23}:{min:0,max:59},v=(e,t,n)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove(`${a}time--selected`));const o=e.querySelector(`data[data-${t}][value="${n}"]`);let r="";o?(r=window.getComputedStyle(o).getPropertyValue("--micl-angle"),o.classList.add(`${a}time--selected`)):"minute"===t&&(r=`${Math.round(360*parseInt(n,10)/60-90)}deg`),r&&e.style.setProperty("--micl-angle",r)},g=(e,t,n,o,r=!0)=>{let i=parseInt(n||"0",10);if(isNaN(i))return;const l=d(e,`input[name=${t}]`);if(l){if("hour"===t&&o&&s){const t=e.querySelector(`.${a}am`),n=e.querySelector(`.${a}pm`);i>=12?(n&&(n.checked=!0),i>12&&(i-=12)):(t&&(t.checked=!0),0===i&&(i=12))}if(l.value=`${i}`.padStart(2,"0"),r){const n=d(e,`.${a}dial`);if(!n)return;v(n,t,l.value)}}},h=(e,t,n)=>{if("ArrowDown"!==n.key&&"ArrowUp"!==n.key)return;n.preventDefault();const{max:o,min:r}=y(t.name);let i=parseInt(t.value,10)||0;if(i+="ArrowUp"===n.key?1:-1,(i<r||i>o)&&(i=i<r?o:r,"hour"===t.name&&s)){const t=e.querySelector("input[name=period]:not(:checked)");t?.click()}g(e,t.name,`${i}`)},E=(0,r.register)(i,{initialize:e=>{if(e.dataset.miclinitialized)return;const t=d(e,"form"),n=d(e,`.${a}inputmode`),o=d(e,`.${a}dial`),r=[d(e,"input[name=hour]"),d(e,"input[name=minute]")].filter(e=>null!==e);if(!t||r.length<2)return;e.dataset.miclinitialized="1",r.forEach((t,n)=>{(e=>{const{min:t,max:n}=y(e.name);let o;o="hour"===e.name?s?"(0[1-9]|1[0-2])":"(0[0-9]|1[0-9]|2[0-3])":"(0[0-9]|[1-5][0-9])";const r={maxlength:"2",pattern:o,inputmode:"numeric",autocomplete:"off",role:"spinbutton",min:String(t),max:String(n)};for(const t in r)e.setAttribute(t,r[t])})(t),o&&t.toggleAttribute("readonly",u(o)),t.addEventListener("keydown",h.bind(null,e,t)),t.addEventListener("focus",()=>{p(r[0===n?1:0],!1),p(t,!0),o&&(((e,t)=>{e.querySelectorAll("data").forEach(e=>{e.dataset[t]&&(e.textContent=e.dataset[t],e.value=e.dataset[t].padStart(2,"0")),e.classList.contains(`${a}dial-inner`)&&e.classList["hour"===t?"remove":"add"](l)})})(o,t.name),v(o,t.name,t.value))}),t.addEventListener("blur",()=>{u(o)||((e=>{const{max:t,min:n}=y(e.name);let o=parseInt(e.value,10);isNaN(o)&&(o=n),o>t&&(o=t),o<0&&(o=n),e.value=String(o).padStart(2,"0")})(t),p(t,!1))})});const i=e.querySelector(`.${a}period`);if(i&&s&&(["am","pm"].forEach(e=>{let t=document.createElement("input");t.type="radio",t.name="period",t.className=`${a}${e}`,t.value=e,t.ariaLabel=e.toUpperCase(),i.appendChild(t)}),i.classList.toggle(l,!s)),n?.addEventListener("click",()=>{o?.classList.toggle(l),r.forEach(e=>{e.toggleAttribute("readonly",u(o))}),u(o)&&r[0].focus()}),o){(e=>{let t=s?300:270;for(let n=s?1:0;n<=(s?12:23);n++){const o=document.createElement("data");o.value=`${n}`.padStart(2,"0"),o.textContent=`${n}`,o.dataset.hour=`${n}`,o.style.setProperty("--micl-angle",`${t}deg`),!s&&n>=12?o.classList.add(`${a}dial-inner`):o.dataset.minute=""+5*n%60,e.appendChild(o),t=(t+30)%360}const n=document.createElement("span");n.className=`${a}track`,e.appendChild(n)})(o);const t=(t,n)=>{const o=document.elementFromPoint(t,n);o&&"DATA"===o.tagName&&g(e,e.querySelector(`input[name=hour].${c}`)?"hour":"minute",o.value)};o.addEventListener("pointerdown",e=>{o.classList.add(`${a}dial--dragging`),t(e.clientX,e.clientY),o.setPointerCapture(e.pointerId)}),o.addEventListener("pointermove",e=>{o.classList.contains(`${a}dial--dragging`)&&t(e.clientX,e.clientY)});const n=e=>{o.classList.remove(`${a}dial--dragging`),o.releasePointerCapture(e.pointerId)};o.addEventListener("pointerup",n),o.addEventListener("pointercancel",n)}e.addEventListener("beforetoggle",t=>{if("open"===t.oldState)return;let n=document.activeElement;if((!m(n)||n.dataset.timepicker!==e.id&&n.popoverTargetElement!==e&&n.commandForElement!==e)&&(n=f(e)),!m(n))return;e._miclInvoker=n;const o=(n.value||n.textContent).split(":");2===o.length&&(g(e,"hour",o[0],!0),g(e,"minute",o[1],!1,!1))}),e.addEventListener("close",()=>{if(!e.returnValue)return;let n=e._miclInvoker;if(n||(n=f(e)),!m(n))return;const o=t.elements;let r=parseInt(o.namedItem("hour")?.value||"0",10);if(isNaN(r))return;s&&(r%=12,"pm"===o.namedItem("period")?.value&&(r+=12));const i=parseInt(o.namedItem("minute")?.value||"0",10);if(isNaN(i))return;const a=`${r}`.padStart(2,"0")+":"+`${i}`.padStart(2,"0");n.value=a,n instanceof HTMLInputElement?(n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new Event("input",{bubbles:!0}))):n.textContent=a})}},HTMLDialogElement);return n.d(o,["default",0,E,"timepickerSelector",0,i]),o})());

package/foundations/_index.scss

@@ -0,0 +1,35 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// Pure declarations only — @use of this module must never emit CSS.
+// The emitted foundation styles (:root tokens, @property registrations,
+// utility classes) live in foundations/base, which is compiled once into
+// micl.css and standalone as dist/base.css.
+
+$md-sys-icon-size: 24px;
+
+$md-sys-padding-xxs: 4px;
+$md-sys-padding-xs: 8px;
+$md-sys-padding-s: 12px;
+$md-sys-padding-m: 16px;
+$md-sys-padding-l: 20px;
+$md-sys-padding-xl: 24px;
+$md-sys-padding-xxl: 28px;

package/foundations/{index.scss → base/index.scss}

@@ -19,62 +19,23 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-$md-sys-icon-size: 24px;
+// Shared foundation styles, emitted exactly once: the :root design tokens,
+// the @property registrations the ripple effect depends on, and the generic
+// utility classes. Included in micl.css; consumers loading per-component CSS
+// files must load dist/base.css first (once).
 
-$md-sys-padding-xxs: 4px;
-$md-sys-padding-xs: 8px;
-$md-sys-padding-s: 12px;
-$md-sys-padding-m: 16px;
-$md-sys-padding-l: 20px;
-$md-sys-padding-xl: 24px;
-$md-sys-padding-xxl: 28px;
+@use '../index' as foundations;
 
 :root {
-    --md-sys-icon-size: #{$md-sys-icon-size};
+    --md-sys-icon-size: #{foundations.$md-sys-icon-size};
 
-    --md-sys-padding-xxs: #{$md-sys-padding-xxs};
-    --md-sys-padding-xs: #{$md-sys-padding-xs};
-    --md-sys-padding-s: #{$md-sys-padding-s};
-    --md-sys-padding-m: #{$md-sys-padding-m};
-    --md-sys-padding-l: #{$md-sys-padding-l};
-    --md-sys-padding-xl: #{$md-sys-padding-xl};
-    --md-sys-padding-xxl: #{$md-sys-padding-xxl};
-}
-
-.micl-hidden {
-    display: none !important;
-}
-.micl-no-transition {
-    transition: none !important;
-}
-.micl-flex--vcenter {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.micl-grid-field,
-.micl-grid-iconfield {
-    box-sizing: border-box;
-    display: grid;
-    row-gap: var(--md-sys-padding-xl, 24px);
-}
-.micl-grid-iconfield {
-    grid-template-columns: 48px 1fr;
-}
-.micl-grid-iconfield__icon {
-    grid-column: 1;
-    margin-block-start: 0.6rem;
-}
-.micl-grid-iconfield__field {
-    grid-column: 2;
-}
-
-.micl-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
+    --md-sys-padding-xxs: #{foundations.$md-sys-padding-xxs};
+    --md-sys-padding-xs: #{foundations.$md-sys-padding-xs};
+    --md-sys-padding-s: #{foundations.$md-sys-padding-s};
+    --md-sys-padding-m: #{foundations.$md-sys-padding-m};
+    --md-sys-padding-l: #{foundations.$md-sys-padding-l};
+    --md-sys-padding-xl: #{foundations.$md-sys-padding-xl};
+    --md-sys-padding-xxl: #{foundations.$md-sys-padding-xxl};
 }
 
 @property --micl-ripple {
@@ -82,15 +43,19 @@ $md-sys-padding-xxl: 28px;
     inherits: false;
     initial-value: 0;
 }
+// The ripple coordinates are percentages: the runtime sets the touch point as a percentage of the
+// element, which pins the gradient box (background-position) and the circle within it (circle at)
+// to the same element point at every background-size.
+// The 50% initial value doubles as a centered fallback.
 @property --micl-x {
-    syntax: '<length>';
+    syntax: '<length-percentage>';
     inherits: false;
-    initial-value: -100000px;
+    initial-value: 50%;
 }
 @property --micl-y {
-    syntax: '<length>';
+    syntax: '<length-percentage>';
     inherits: false;
-    initial-value: -100000px;
+    initial-value: 50%;
 }
 @property --micl-width {
     syntax: '<length>';

package/foundations/field/index.scss

@@ -0,0 +1,37 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+.micl-grid-field,
+.micl-grid-iconfield {
+    box-sizing: border-box;
+    display: grid;
+    row-gap: var(--md-sys-padding-xl, 24px);
+}
+.micl-grid-iconfield {
+    grid-template-columns: 48px 1fr;
+}
+.micl-grid-iconfield__icon {
+    grid-column: 1;
+    margin-block-start: 0.6rem;
+}
+.micl-grid-iconfield__field {
+    grid-column: 2;
+}

package/foundations/layout/index.scss

@@ -23,59 +23,60 @@
 
 @include shape.corner('medium');
 
-$md-sys-window-compact-max: 599px;
-$md-sys-window-medium-min: 600px;
-$md-sys-window-medium-max: 839px;
-$md-sys-window-expanded-min: 840px;
-$md-sys-window-expanded-max: 1199px;
-$md-sys-window-large-min: 1200px;
-$md-sys-window-large-max: 1599px;
-$md-sys-window-extralarge-min: 1600px;
+$md-sys-breakpoint-compact-max: 599px;
+$md-sys-breakpoint-medium-min: 600px;
+$md-sys-breakpoint-medium-max: 839px;
+$md-sys-breakpoint-expanded-min: 840px;
+$md-sys-breakpoint-expanded-max: 1199px;
+$md-sys-breakpoint-large-min: 1200px;
+$md-sys-breakpoint-large-max: 1599px;
+$md-sys-breakpoint-extralarge-min: 1600px;
 
 $md-sys-window-margin-compact: 16px;
-$md-sys-window-margin-medium: 24px;
-$md-sys-window-margin-expanded: 24px;
-$md-sys-window-margin-large: 24px;
-$md-sys-window-margin-extralarge: 24px;
+$md-sys-window-margin: 24px; // medium and larger breakpoints
 
 $md-sys-pane-spacer: 24px;
 
+$md-sys-pane-fixed-width-expanded: 360px;
+$md-sys-pane-fixed-width-large: 412px;
+
 :root {
     --md-sys-layout-pane-spacer: #{$md-sys-pane-spacer};
+    --md-sys-layout-window-margin: #{$md-sys-window-margin};
 
-    @media (max-width: $md-sys-window-compact-max) {
+    @media (max-width: $md-sys-breakpoint-compact-max) {
         --md-sys-layout-window-margin: #{$md-sys-window-margin-compact};
     }
-    @media (min-width: $md-sys-window-medium-min) and (max-width: $md-sys-window-medium-max) {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-medium};
-    }
-    @media (min-width: $md-sys-window-expanded-min) and (max-width: $md-sys-window-expanded-max) {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-expanded};
+    @media (min-width: $md-sys-breakpoint-expanded-min) and (max-width: $md-sys-breakpoint-expanded-max) {
+        --md-sys-layout-pane-fixed-width: #{$md-sys-pane-fixed-width-expanded};
     }
-    @media (min-width: $md-sys-window-large-min) and (max-width: $md-sys-window-large-max) {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-large};
-    }
-    @media (min-width: $md-sys-window-extralarge-min) {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-extralarge};
+    @media (min-width: $md-sys-breakpoint-large-min) {
+        --md-sys-layout-pane-fixed-width: #{$md-sys-pane-fixed-width-large};
     }
 }
 
 .micl-window {
-    padding: 0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);
+    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-body .micl-appbar {
+    .micl-panes .micl-appbar {
         margin-inline: calc(-1 * var(--md-sys-layout-window-margin));
     }
-    &:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-body .micl-appbar {
+    &:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar {
         margin-inline-start: 0;
     }
     &.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));
+        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-navigationrail {
@@ -87,7 +88,7 @@ $md-sys-pane-spacer: 24px;
             padding-block-end: var(--md-sys-navigationrail-top-space, 0px);
             border-radius: var(--md-sys-layout-spatial-radius);
         }
-        .micl-body {
+        .micl-panes {
             background: transparent;
         }
         .micl-pane {
@@ -97,19 +98,25 @@ $md-sys-pane-spacer: 24px;
         }
     }
 }
-.micl-body {
+.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-body--split:has(> .micl-pane:nth-child(2)) {
-        .micl-pane {
-            flex-basis: 50%;
+    &.micl-panes--split > .micl-pane + .micl-pane {
+        // The physical safety inset on the trailing pane's side of the screen.
+        --_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));
+
+        &:dir(rtl) {
+            --_layout-safe-inline-end: env(safe-area-inset-left, 0px);
         }
     }
-    &.micl-body--evenly .micl-pane {
+    &.micl-panes--evenly .micl-pane {
         flex: 1 1 0;
     }
 }
@@ -122,6 +129,8 @@ $md-sys-pane-spacer: 24px;
 
     &.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));
     }
     &:has(> .micl-card-elevated, > .micl-card-filled, > .micl-card-outlined),
     &> *:has(> .micl-card-elevated, > .micl-card-filled, > .micl-card-outlined) {
@@ -153,59 +162,49 @@ $md-sys-pane-spacer: 24px;
     }
 }
 
-@media (max-width: $md-sys-window-compact-max) {
-    .micl-body.micl-body--stacked-to-medium,
-    .micl-body.micl-body--stacked-to-expanded,
-    .micl-body.micl-body--stacked-to-large,
-    .micl-body.micl-body--stacked-to-extralarge {
+@media (max-width: $md-sys-breakpoint-compact-max) {
+    .micl-panes.micl-panes--stacked-to-medium {
+        --_layout-stacked-pane-size: auto;
+
         flex-direction: column;
     }
-    .micl-pane.micl-pane--hidden-to-medium,
-    .micl-pane.micl-pane--hidden-to-expanded,
-    .micl-pane.micl-pane--hidden-to-large,
-    .micl-pane.micl-pane--hidden-to-extralarge {
+    .micl-pane.micl-pane--hidden-to-medium {
         display: none;
     }
-    .micl-pane__columns.micl-pane__columns--stacked-to-medium,
-    .micl-pane__columns.micl-pane__columns--stacked-to-expanded,
-    .micl-pane__columns.micl-pane__columns--stacked-to-large,
-    .micl-pane__columns.micl-pane__columns--stacked-to-extralarge {
+    .micl-pane__columns.micl-pane__columns--stacked-to-medium {
         flex-direction: column;
     }
 }
-@media (min-width: $md-sys-window-medium-min) and (max-width: $md-sys-window-medium-max) {
-    .micl-body.micl-body--stacked-to-expanded,
-    .micl-body.micl-body--stacked-to-large,
-    .micl-body.micl-body--stacked-to-extralarge {
+@media (max-width: $md-sys-breakpoint-medium-max) {
+    .micl-panes.micl-panes--stacked-to-expanded {
+        --_layout-stacked-pane-size: auto;
+
         flex-direction: column;
     }
-    .micl-pane.micl-pane--hidden-to-expanded,
-    .micl-pane.micl-pane--hidden-to-large,
-    .micl-pane.micl-pane--hidden-to-extralarge {
+    .micl-pane.micl-pane--hidden-to-expanded {
         display: none;
     }
-    .micl-pane__columns.micl-pane__columns--stacked-to-expanded,
-    .micl-pane__columns.micl-pane__columns--stacked-to-large,
-    .micl-pane__columns.micl-pane__columns--stacked-to-extralarge {
+    .micl-pane__columns.micl-pane__columns--stacked-to-expanded {
         flex-direction: column;
     }
 }
-@media (min-width: $md-sys-window-expanded-min) and (max-width: $md-sys-window-expanded-max) {
-    .micl-body.micl-body--stacked-to-large,
-    .micl-body.micl-body--stacked-to-extralarge {
+@media (max-width: $md-sys-breakpoint-expanded-max) {
+    .micl-panes.micl-panes--stacked-to-large {
+        --_layout-stacked-pane-size: auto;
+
         flex-direction: column;
     }
-    .micl-pane.micl-pane--hidden-to-large,
-    .micl-pane.micl-pane--hidden-to-extralarge {
+    .micl-pane.micl-pane--hidden-to-large {
         display: none;
     }
-    .micl-pane__columns.micl-pane__columns--stacked-to-large,
-    .micl-pane__columns.micl-pane__columns--stacked-to-extralarge {
+    .micl-pane__columns.micl-pane__columns--stacked-to-large {
         flex-direction: column;
     }
 }
-@media (min-width: $md-sys-window-large-min) and (max-width: $md-sys-window-large-max) {
-    .micl-body.micl-body--stacked-to-extralarge {
+@media (max-width: $md-sys-breakpoint-large-max) {
+    .micl-panes.micl-panes--stacked-to-extralarge {
+        --_layout-stacked-pane-size: auto;
+
         flex-direction: column;
     }
     .micl-pane.micl-pane--hidden-to-extralarge {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "8.1.1",
+  "version": "9.0.0",
   "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.",
   "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
   "license": "MIT",
@@ -21,14 +21,19 @@
     "button",
     "card",
     "checkbox",
+    "chip",
     "date picker",
+    "date range picker",
     "dialog",
     "divider",
+    "field",
     "iconbutton",
     "layout",
     "list",
     "menu",
+    "navigation bar",
     "navigation rail",
+    "progress indicator",
     "radio button",
     "select",
     "shapes",
@@ -50,25 +55,34 @@
   },
   "main": "dist/micl.js",
   "types": "dist/micl.d.ts",
+  "files": [
+    "dist",
+    "styles.scss",
+    "styles/**/*.scss",
+    "foundations/**/*.scss",
+    "components/**/*.scss",
+    "components/**/README.md",
+    "themes"
+  ],
   "scripts": {
     "build": "webpack",
     "gen:shapes": "node tools/shapes/generate.mjs",
     "check:shapes": "node tools/shapes/check.mjs"
   },
-  "sideEffects": false,
   "devDependencies": {
     "autoprefixer": "^10.5",
     "css-loader": "^7.1",
-    "extract-loader": "^5.1",
-    "file-loader": "^6.2",
     "glob": "^13.0",
     "mini-css-extract-plugin": "^2.10",
     "postcss-loader": "^8.2",
-    "sass": "^1.99",
-    "sass-loader": "^16.0",
-    "ts-loader": "^9.5",
+    "sass": "^1.101",
+    "sass-loader": "^17.0",
+    "ts-loader": "^9.6",
     "typescript": "^6.0",
-    "webpack": "^5.106",
-    "webpack-cli": "^7.0"
+    "webpack": "^5.108",
+    "webpack-cli": "^7.2"
+  },
+  "allowScripts": {
+    "@parcel/watcher@2.5.6": true
   }
 }