material-inspired-component-library 9.1.1 → 9.1.2

package/dist/slider.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={56(e,t,o){const r=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},n=()=>Object.keys(r.map).join(","),i=e=>Object.entries(r.map).find(([t,{type:o}])=>e.matches(t)&&e instanceof o)?.[1],l=e=>{const t=i(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},s=e=>{const t=i(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},c=e=>{const t=n();if(!t)return;const o=e.target.closest(t);if(!(o instanceof HTMLElement))return;const r=i(o),l=e.type;r&&"function"==typeof r.component[l]&&r.component[l]?.(e)},a=()=>{r.activated||(r.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=n();t&&e.matches(t)&&l(e),t&&e.querySelectorAll(t).forEach(l)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=n();t&&e.matches(t)&&s(e),(e=>{const t=n();t&&e.querySelectorAll(t).forEach(s)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=n();t&&e.querySelectorAll(t).forEach(l),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{r.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 o=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-o.left)/o.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-o.top)/o.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const r=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",r))};e.addEventListener("animationend",r)}),r.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),a()};"loading"!==document.readyState?a():document.addEventListener("DOMContentLoaded",d),o.d(t,["register",0,(e,t,o)=>(r.map[e]={component:t,type:o},r.activated&&document.querySelectorAll(e).forEach(l),t)])}};const t={};function o(r){const n=t[r];if(void 0!==n)return n.exports;const i=t[r]={exports:{}};return e[r](i,i.exports,o),i.exports}o.d=(e,t)=>{if(Array.isArray(t))for(var r=0;r<t.length;){var n=t[r++],i=t[r++];o.o(e,n)?0===i&&r++:0===i?Object.defineProperty(e,n,{enumerable:!0,value:t[r++]}):Object.defineProperty(e,n,{enumerable:!0,get:i})}else for(var n in t)o.o(t,n)&&!o.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let r={};o.r(r);var n=o(56);const i="input[type=range][class*=micl-slider-]",l=String.fromCharCode(8226),s=String.fromCharCode(8201),c=e=>e.parentElement?.classList.contains("micl-slider__container")?e.parentElement:null,a=(e,t)=>{e.dataset.miclsliderticks=t},d=e=>{let t=JSON.stringify(e.value+""),o=c(e);o&&(o.style.setProperty("--micl-slider-value",e.value),o.style.setProperty("--micl-slider-tip",t)),e.style.setProperty("--micl-slider-value",e.value),e.style.setProperty("--micl-slider-tip",t)},m=(0,n.register)(i,{initialize:e=>{if(!e.matches(i))return;(e=>{let t=e.max||"100";c(e)?.style.setProperty("--micl-slider-max",t),e.style.setProperty("--micl-slider-max",t)})(e),(e=>{let t=e.min||"0";c(e)?.style.setProperty("--micl-slider-min",t),e.style.setProperty("--micl-slider-min",t)})(e),d(e),(e=>{let t=c(e);if(t){const o=window.getComputedStyle(e);["--_handle-height","--_track-height"].forEach(e=>{t.style.setProperty(e,o.getPropertyValue(e))})}})(e);const t=parseFloat(e.max),o=parseFloat(e.min),r=e.getBoundingClientRect(),n=((e,t,o)=>{const r=[];return e.list&&t>o&&e.list.querySelectorAll("option[value]").forEach(e=>{let n=parseFloat(e.value);!isNaN(n)&&n>=o&&n<=t&&r.push(n)}),r})(e,t,o).sort((e,t)=>e-t).map(e=>Math.round(100*(e-o)/(t-o)));if(n.length>0){const t=document.createElement("canvas"),o=t.getContext("2d");if(o){o.font=window.getComputedStyle(e).getPropertyValue("font");let t=o.measureText(s).width,i=o.measureText(l).width,c=r.width-10,d=0,m="";n.forEach(e=>{let o=c*e/100,r=Math.round((o-d)/t)-1;for(let e=0;e<r;e++)m+=s,d+=t;m+=l,d+=i}),a(e,m)}t.remove()}else a(e,l)},input:e=>{e.target.matches(i)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&d(e.target)}},HTMLInputElement);return o.d(r,["default",0,m,"sliderSelector",0,i]),r})());
+!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,o){const n=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},r=()=>Object.keys(n.map).join(","),i=e=>Object.entries(n.map).find(([t,{type:o}])=>e.matches(t)&&e instanceof o)?.[1],c=e=>{const t=i(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},s=e=>{const t=i(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},l=e=>{const t=r();if(!t)return;const o=e.target.closest(t);if(!(o instanceof HTMLElement))return;const n=i(o),c=e.type;n&&"function"==typeof n.component[c]&&n.component[c]?.(e)},a=()=>{n.activated||(n.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)&&c(e),t&&e.querySelectorAll(t).forEach(c)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=r();t&&e.matches(t)&&s(e),(e=>{const t=r();t&&e.querySelectorAll(t).forEach(s)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=r();t&&e.querySelectorAll(t).forEach(c),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{n.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 o=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-o.left)/o.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-o.top)/o.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const n=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",n))};e.addEventListener("animationend",n)}),n.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",l),document.addEventListener("input",l),document.addEventListener("keydown",l))},d=()=>{document.removeEventListener("DOMContentLoaded",d),a()};"loading"!==document.readyState?a():document.addEventListener("DOMContentLoaded",d),o.d(t,["register",0,(e,t,o)=>(n.map[e]={component:t,type:o},n.activated&&document.querySelectorAll(e).forEach(c),t)])}};const t={};function o(n){const r=t[n];if(void 0!==r)return r.exports;const i=t[n]={exports:{}};return e[n](i,i.exports,o),i.exports}o.d=(e,t)=>{if(Array.isArray(t))for(var n=0;n<t.length;){var r=t[n++],i=t[n++];o.o(e,r)?0===i&&n++:0===i?Object.defineProperty(e,r,{enumerable:!0,value:t[n++]}):Object.defineProperty(e,r,{enumerable:!0,get:i})}else for(var r in t)o.o(t,r)&&!o.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let n={};o.r(n);var r=o(56);const i="input[type=range][class*=micl-slider-]",c=e=>{const t=(e=>e.parentElement?.classList.contains("micl-slider__container")?e.parentElement:e)(e);t.style.setProperty("--micl-slider-min",e.min||"0"),t.style.setProperty("--micl-slider-max",e.max||"100"),t.style.setProperty("--micl-slider-value",e.value),t.style.setProperty("--micl-slider-tip",JSON.stringify(e.value))},s=(e,t)=>e.map(e=>{const o=`(8px + ${e} * ${t})`;return`radial-gradient(circle 2px at calc(var(--_kx) * ${o} + var(--_cx)) calc(var(--_ky) * ${o} + var(--_cy)),currentColor 100%,transparent 0)`}).join(","),l=(0,r.register)(i,{initialize:e=>{e.matches(i)&&(c(e),(e=>{const t=parseFloat(e.min||"0"),o=parseFloat(e.max||"100"),n=new Set;if(o>t&&e.list?.querySelectorAll("option[value]").forEach(e=>{const r=parseFloat(e.value);!isNaN(r)&&r>=t&&r<=o&&n.add((r-t)/(o-t))}),n.size>0){const t=[...n].sort((e,t)=>e-t);e.style.setProperty("--micl-slider-stops",s(t,"(100% - 16px)")),e.style.setProperty("--micl-slider-stops-progress",s(t,"(100% / max(var(--_fraction), 0.0001))"))}})(e))},input:e=>{e.target instanceof HTMLInputElement&&e.target.matches(i)&&c(e.target)}},HTMLInputElement);return o.d(n,["default",0,l,"sliderSelector",0,i]),n})());

package/dist/snackbar.css

@@ -1 +1 @@
-:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@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-sys-card-margin)}.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-sys-card-margin)}.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-sys-card-margin)}.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}}
+:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@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}}: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-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{--_motion-spatial: var(--md-comp-snackbar-motion-spatial, cubic-bezier(0.38, 1.21, 0.22, 1));--_motion-duration: var(--md-comp-snackbar-motion-duration, 500ms);--_motion-duration-reverse: var(--md-comp-snackbar-motion-duration-reverse, 350ms);--micl-duration: var(--_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:fit-content;max-inline-size:var(--md-comp-snackbar-container-max-width, 600px);min-inline-size:var(--md-comp-snackbar-container-min-width, 320px);inset:auto;inset-block-end:calc(var(--md-comp-snackbar-margin, 8px) + env(safe-area-inset-bottom, 0px));inset-inline:var(--md-sys-layout-window-margin);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:clip;transition:block-size var(--micl-duration) var(--_motion-spatial),opacity var(--_motion-duration-reverse) linear,display var(--_motion-duration-reverse) linear allow-discrete,overlay var(--_motion-duration-reverse) linear allow-discrete,--statelayer-opacity var(--_motion-duration) linear}.micl-snackbar:hover{--statelayer-color: var(--md-comp-snackbar-hover-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity))}.micl-snackbar:active{--statelayer-color: var(--md-comp-snackbar-pressed-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity))}.micl-snackbar:popover-open{--micl-duration: var(--_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:auto;min-inline-size:auto}}

package/dist/snackbar.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={56(e,t,o){const n=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(n.map).join(","),r=e=>Object.entries(n.map).find(([t,{type:o}])=>e.matches(t)&&e instanceof o)?.[1],a=e=>{const t=r(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},c=e=>{const t=r(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},l=e=>{const t=i();if(!t)return;const o=e.target.closest(t);if(!(o instanceof HTMLElement))return;const n=r(o),a=e.type;n&&"function"==typeof n.component[a]&&n.component[a]?.(e)},s=()=>{n.activated||(n.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)&&c(e),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(c)})(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=>{n.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 o=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-o.left)/o.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-o.top)/o.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const n=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",n))};e.addEventListener("animationend",n)}),n.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",l),document.addEventListener("input",l),document.addEventListener("keydown",l))},d=()=>{document.removeEventListener("DOMContentLoaded",d),s()};"loading"!==document.readyState?s():document.addEventListener("DOMContentLoaded",d),o.d(t,["register",0,(e,t,o)=>(n.map[e]={component:t,type:o},n.activated&&document.querySelectorAll(e).forEach(a),t)])}};const t={};function o(n){const i=t[n];if(void 0!==i)return i.exports;const r=t[n]={exports:{}};return e[n](r,r.exports,o),r.exports}o.d=(e,t)=>{if(Array.isArray(t))for(var n=0;n<t.length;){var i=t[n++],r=t[n++];o.o(e,i)?0===r&&n++:0===r?Object.defineProperty(e,i,{enumerable:!0,value:t[n++]}):Object.defineProperty(e,i,{enumerable:!0,get:r})}else for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let n={};o.r(n);var i=o(56);const r=".micl-snackbar",a=new WeakMap,c=e=>{const t=a.get(e);t&&t.timeoutid&&(clearTimeout(t.timeoutid),t.timeoutid=void 0)},l=e=>{c(e);const t=a.get(e);t&&(t.timeoutid=window.setTimeout(()=>{e.isConnected&&e.matches(":popover-open")&&e.hidePopover()},t.delay))},s=(0,i.register)(r,{initialize:e=>{if(!e.matches(r)||e.dataset.miclinitialized)return;const t=e.dataset.micldelay,o=t?parseInt(t,10):0;if(isNaN(o)||o<=0)return;e.dataset.miclinitialized="1";const n=()=>c(e),i=t=>{"open"===t.newState?l(e):c(e)},s=()=>{e.matches(":popover-open")&&l(e)};a.set(e,{delay:o,boundHandleToggle:i,boundClearTimer:n,boundHandleMouseLeave:s}),e.addEventListener("toggle",i),e.addEventListener("mouseenter",n),e.addEventListener("mouseleave",s)},cleanup:e=>{const t=a.get(e);t&&(c(e),e.removeEventListener("toggle",t.boundHandleToggle),e.removeEventListener("mouseenter",t.boundClearTimer),e.removeEventListener("mouseleave",t.boundHandleMouseLeave),a.delete(e)),delete e.dataset.miclinitialized}},HTMLElement);return o.d(n,["default",0,s,"snackbarSelector",0,r]),n})());
+!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,o){const n=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(n.map).join(","),r=e=>Object.entries(n.map).find(([t,{type:o}])=>e.matches(t)&&e instanceof o)?.[1],c=e=>{const t=r(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},a=e=>{const t=r(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},l=e=>{const t=i();if(!t)return;const o=e.target.closest(t);if(!(o instanceof HTMLElement))return;const n=r(o),c=e.type;n&&"function"==typeof n.component[c]&&n.component[c]?.(e)},s=()=>{n.activated||(n.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)&&c(e),t&&e.querySelectorAll(t).forEach(c)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&a(e),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(a)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=i();t&&e.querySelectorAll(t).forEach(c),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{n.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 o=e.getBoundingClientRect();e.style.setProperty("--micl-x",(t.clientX-o.left)/o.width*100+"%"),e.style.setProperty("--micl-y",(t.clientY-o.top)/o.height*100+"%"),e.classList.remove("micl-rippling"),e.offsetWidth,e.classList.add("micl-rippling");const n=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",n))};e.addEventListener("animationend",n)}),n.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",l),document.addEventListener("input",l),document.addEventListener("keydown",l))},d=()=>{document.removeEventListener("DOMContentLoaded",d),s()};"loading"!==document.readyState?s():document.addEventListener("DOMContentLoaded",d),o.d(t,["register",0,(e,t,o)=>(n.map[e]={component:t,type:o},n.activated&&document.querySelectorAll(e).forEach(c),t)])}};const t={};function o(n){const i=t[n];if(void 0!==i)return i.exports;const r=t[n]={exports:{}};return e[n](r,r.exports,o),r.exports}o.d=(e,t)=>{if(Array.isArray(t))for(var n=0;n<t.length;){var i=t[n++],r=t[n++];o.o(e,i)?0===r&&n++:0===r?Object.defineProperty(e,i,{enumerable:!0,value:t[n++]}):Object.defineProperty(e,i,{enumerable:!0,get:r})}else for(var i in t)o.o(t,i)&&!o.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:t[i]})},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),o.r=e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};let n={};o.r(n);var i=o(56);const r=".micl-snackbar",c=new WeakMap,a=e=>{clearTimeout(e.timeoutid),e.timeoutid=void 0},l=(0,i.register)(r,{initialize:e=>{if(!e.matches(r)||e.dataset.miclinitialized)return;const t=parseInt(e.dataset.micldelay??"",10);if(!(t>0))return;e.dataset.miclinitialized="1";const o={delay:t,hovering:!1,controller:new AbortController};c.set(e,o);const n=()=>((e,t)=>{a(t),!e.matches(":popover-open")||t.hovering||e.matches(":has(:focus-visible)")||(t.timeoutid=window.setTimeout(()=>{e.isConnected&&e.matches(":popover-open")&&e.hidePopover()},t.delay))})(e,o),i=e=>{"touch"!==e.pointerType&&(o.hovering="pointerenter"===e.type,n())},l={signal:o.controller.signal};e.addEventListener("toggle",()=>{o.hovering=!1,n()},l),e.addEventListener("pointerenter",i,l),e.addEventListener("pointerleave",i,l),e.addEventListener("focusin",n,l),e.addEventListener("focusout",n,l),n()},cleanup:e=>{const t=c.get(e);t&&(t.controller.abort(),a(t),c.delete(e)),delete e.dataset.miclinitialized}},HTMLElement);return o.d(n,["default",0,l,"snackbarSelector",0,r]),n})());

package/dist/stepper.css

@@ -1 +1 @@
-:root{--md-sys-state-disabled-state-layer-opacity: 38%}.micl-stepper{--md-comp-stepper-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-comp-stepper-motion-duration: 650ms;--_dot-size: var(--md-comp-stepper-dot-size, 12px);box-sizing:border-box;display:flex;flex-direction:column;row-gap:var(--md-sys-padding-xl, 24px);margin:0}.micl-stepper .micl-stepper__header{--_dot-size: var(--md-comp-stepper-header-dot-size, 24px);position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin-inline:-10px;counter-reset:dotnumber;anchor-scope:all}.micl-stepper .micl-stepper__header button{position:static;anchor-name:var(--micl-stepper-anchor);pointer-events:none}.micl-stepper .micl-stepper__header button::before{inset:auto;inset-block-start:calc(anchor(var(--micl-stepper-anchor) center) - var(--md-sys-state-target-size, 48px)/2);inset-inline-start:anchor(var(--micl-stepper-anchor) start);inset-inline-end:anchor(var(--micl-stepper-anchor) end);inline-size:auto}.micl-stepper .micl-stepper__header button:not(:first-child)::after{content:"";position:absolute;inset-block-start:calc(anchor(var(--micl-stepper-anchor) center) - .5px);inset-inline-start:anchor(var(--micl-stepper-prev) end);inset-inline-end:anchor(var(--micl-stepper-anchor) start);block-size:1px;background-color:var(--md-comp-divider-color, var(--md-sys-color-outline-variant));pointer-events:none}.micl-stepper .micl-stepper__header button.micl-stepper__progress--done{pointer-events:inherit}.micl-stepper .micl-stepper__header .micl-stepper__progress-dot::before{content:counter(dotnumber, var(--md-comp-stepper-counter-style, decimal))}.micl-stepper.micl-stepper--nonlinear .micl-stepper__header button{pointer-events:inherit}.micl-stepper .micl-stepper__steps{display:grid;grid-template-areas:"stepper-steps";overflow-x:hidden}.micl-stepper .micl-stepper__steps .micl-stepper__step{grid-area:stepper-steps;display:flex;visibility:hidden;flex-direction:column;margin:0;padding:0;border:none;opacity:0%;transform:translateX(100%);transition:opacity var(--md-comp-stepper-motion-duration) linear,transform var(--md-comp-stepper-motion-duration) var(--md-comp-stepper-motion-spatial)}.micl-stepper .micl-stepper__steps .micl-stepper__step:has(~.micl-stepper__step[aria-current=step]){transform:translateX(-100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step.micl-stepper__step--toselected{visibility:visible}.micl-stepper .micl-stepper__steps .micl-stepper__step[aria-current=step]{visibility:visible;opacity:100%;transform:translateX(0%)}.micl-stepper .micl-stepper__steps .micl-stepper__step.micl-stepper__step--fromselected{visibility:visible}.micl-stepper .micl-stepper__actions{display:flex;flex-direction:row;justify-content:center;inline-size:100%;align-items:center}.micl-stepper .micl-stepper__actions>:first-child,.micl-stepper .micl-stepper__actions>:last-child{display:flex;flex:1 1 0;column-gap:var(--md-sys-padding-xs, 8px)}.micl-stepper .micl-stepper__actions>:last-child{justify-content:flex-end}.micl-stepper .micl-stepper__progress-dots{display:flex;align-items:center;column-gap:4px}.micl-stepper .micl-stepper__progress-dot{block-size:var(--_dot-size);inline-size:var(--_dot-size);min-inline-size:var(--_dot-size);line-height:var(--_dot-size);border-radius:calc(var(--_dot-size)/2);text-align:center;background-color:var(--md-comp-stepper-dot-color, var(--md-sys-color-on-surface));color:var(--md-comp-stepper-dot-label-color, var(--md-sys-color-surface));opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%);counter-increment:dotnumber 1}.micl-stepper .micl-stepper__progress--done.micl-stepper__progress-dot,.micl-stepper .micl-stepper__progress--done .micl-stepper__progress-dot{background-color:var(--md-comp-stepper-dot-done-color, var(--md-sys-color-tertiary-container));color:var(--md-comp-stepper-dot-done-label-color, var(--md-sys-color-on-tertiary-container));opacity:100%}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl){transform:translateX(-100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl):has(~.micl-stepper__step[aria-current=step]){transform:translateX(100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl)[aria-current=step]{transform:translateX(0%)}.micl-stepper__action--hidden,.micl-stepper__step--hidden{display:none !important}
+:root{--md-sys-state-disabled-state-layer-opacity: 38%}.micl-stepper{--_motion-spatial: var(--md-comp-stepper-motion-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));--_motion-duration: var(--md-comp-stepper-motion-duration, 650ms);--_dot-size: var(--md-comp-stepper-dot-size, 12px);box-sizing:border-box;display:flex;flex-direction:column;row-gap:var(--md-sys-padding-xl, 24px);margin:0}.micl-stepper .micl-stepper__header{--_dot-size: var(--md-comp-stepper-header-dot-size, 24px);position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin-inline:-10px;counter-reset:dotnumber;anchor-scope:all}.micl-stepper .micl-stepper__header button{position:static;anchor-name:var(--micl-stepper-anchor);pointer-events:none}.micl-stepper .micl-stepper__header button::before{inset:auto;inset-block-start:calc(anchor(var(--micl-stepper-anchor) center) - var(--md-sys-state-target-size, 48px)/2);inset-inline-start:anchor(var(--micl-stepper-anchor) start);inset-inline-end:anchor(var(--micl-stepper-anchor) end);inline-size:auto}.micl-stepper .micl-stepper__header button:not(:first-child)::after{content:"";position:absolute;inset-block-start:calc(anchor(var(--micl-stepper-anchor) center) - .5px);inset-inline-start:anchor(var(--micl-stepper-prev) end);inset-inline-end:anchor(var(--micl-stepper-anchor) start);block-size:1px;background-color:var(--md-comp-divider-color, var(--md-sys-color-outline-variant));pointer-events:none}.micl-stepper .micl-stepper__header button.micl-stepper__progress--done{pointer-events:inherit}.micl-stepper .micl-stepper__header .micl-stepper__progress-dot::before{content:counter(dotnumber, var(--md-comp-stepper-counter-style, decimal))}.micl-stepper.micl-stepper--nonlinear .micl-stepper__header button{pointer-events:inherit}.micl-stepper .micl-stepper__steps{display:grid;grid-template-areas:"stepper-steps";overflow-x:hidden}.micl-stepper .micl-stepper__steps .micl-stepper__step{grid-area:stepper-steps;display:flex;visibility:hidden;flex-direction:column;margin:0;padding:0;border:none;opacity:0%;transform:translateX(100%);transition:opacity var(--_motion-duration) linear,transform var(--_motion-duration) var(--_motion-spatial)}.micl-stepper .micl-stepper__steps .micl-stepper__step:has(~.micl-stepper__step[aria-current=step]){transform:translateX(-100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step.micl-stepper__step--toselected{visibility:visible}.micl-stepper .micl-stepper__steps .micl-stepper__step[aria-current=step]{visibility:visible;opacity:100%;transform:translateX(0%)}.micl-stepper .micl-stepper__steps .micl-stepper__step.micl-stepper__step--fromselected{visibility:visible}.micl-stepper .micl-stepper__actions{display:flex;flex-direction:row;justify-content:center;inline-size:100%;align-items:center}.micl-stepper .micl-stepper__actions>:first-child,.micl-stepper .micl-stepper__actions>:last-child{display:flex;flex:1 1 0;column-gap:var(--md-sys-padding-xs, 8px)}.micl-stepper .micl-stepper__actions>:last-child{justify-content:flex-end}.micl-stepper .micl-stepper__progress-dots{display:flex;align-items:center;column-gap:4px}.micl-stepper .micl-stepper__progress-dot{block-size:var(--_dot-size);inline-size:var(--_dot-size);min-inline-size:var(--_dot-size);line-height:var(--_dot-size);border-radius:calc(var(--_dot-size)/2);text-align:center;background-color:var(--md-comp-stepper-dot-color, var(--md-sys-color-on-surface));color:var(--md-comp-stepper-dot-label-color, var(--md-sys-color-surface));opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%);counter-increment:dotnumber 1}.micl-stepper .micl-stepper__progress--done.micl-stepper__progress-dot,.micl-stepper .micl-stepper__progress--done .micl-stepper__progress-dot{background-color:var(--md-comp-stepper-dot-done-color, var(--md-sys-color-tertiary-container));color:var(--md-comp-stepper-dot-done-label-color, var(--md-sys-color-on-tertiary-container));opacity:100%}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl){transform:translateX(-100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl):has(~.micl-stepper__step[aria-current=step]){transform:translateX(100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl)[aria-current=step]{transform:translateX(0%)}.micl-stepper__action--hidden,.micl-stepper__step--hidden{display:none !important}

package/dist/switch.css

@@ -1 +1 @@
-input[type=checkbox].micl-switch:not(:disabled)+label,label:has(+input[type=checkbox].micl-switch:not(:disabled)),label:has(input[type=checkbox].micl-switch:not(:disabled)){cursor:pointer}input[type=checkbox].micl-switch+label,label:has(+input[type=checkbox].micl-switch),label:has(input[type=checkbox].micl-switch){color:var(--md-sys-color-on-surface);-webkit-tap-highlight-color:rgba(0,0,0,0)}input[type=checkbox].micl-switch:disabled+label,label:has(+input[type=checkbox].micl-switch:disabled){opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}label:has(input[type=checkbox].micl-switch:disabled){color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px}: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-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-outer-offset: 2px}input[type=checkbox].micl-switch{--md-comp-switch-unselected-icon: "+";--md-comp-switch-selected-icon: "\AC";--md-comp-switch-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-comp-switch-motion-duration: 300ms;--_track-width: var(--md-comp-switch-track-width, 52px);--_track-height: var(--md-comp-switch-track-height, 32px);--_track-outline-width: var(--md-comp-switch-track-outline-width, 2px);--_handle-size: var(--md-comp-switch-handle-size, 16px);--_handle-selected-size: var(--md-comp-switch-selected-handle-size, 24px);--_handle-pressed-size: var(--md-comp-switch-pressed-handle-size, 28px);--_layer: var(--md-sys-state-layer-size, 40px);--_target: var(--md-sys-state-target-size, 48px);--_unselected-layer-color: var(--md-comp-switch-unselected-state-layer-color, var(--md-sys-color-on-surface));--_selected-layer-color: var(--md-comp-switch-selected-state-layer-color, var(--md-sys-color-primary));appearance:none;position:relative;inline-size:var(--_track-width);block-size:var(--_target);margin:0;border-radius:calc(var(--_track-height)/2);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}input[type=checkbox].micl-switch::before{content:"";box-sizing:border-box;display:block;inline-size:var(--_track-width);block-size:var(--_track-height);margin-block:calc((var(--_target) - var(--_track-height))/2);border:var(--_track-outline-width) solid var(--md-comp-switch-unselected-track-outline-color, var(--md-sys-color-outline));border-radius:inherit;background-color:var(--md-comp-switch-unselected-track-color, var(--md-sys-color-surface-container-highest));transition:background-color var(--md-comp-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-switch::after{content:var(--md-comp-switch-unselected-icon);box-sizing:border-box;position:absolute;display:grid;grid-template-rows:auto 3px;place-items:center;inline-size:var(--_layer);block-size:var(--_layer);inset:0;inset-inline-start:calc((var(--_track-height) - var(--_layer))/2);margin:auto 0;font:300 18px/0 var(--md-ref-typeface-plain);color:var(--md-comp-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest));background-color:var(--md-comp-switch-unselected-handle-color, var(--md-sys-color-outline));background-clip:content-box;border:calc((var(--_layer) - var(--_handle-size))/2) solid rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);transform:rotate(135deg);transition:inset-inline-start var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),border-width var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),grid-template-rows var(--md-comp-switch-motion-duration) var(--md-comp-switch-motion-effects),color var(--md-comp-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1),border-color var(--md-comp-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1),background-color var(--md-comp-switch-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-switch:checked::before{border-color:var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary));background-color:var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary))}input[type=checkbox].micl-switch:checked::after{content:var(--md-comp-switch-selected-icon);grid-template-rows:auto 8px;inset-inline-start:calc(var(--_track-width) - (var(--_layer) + var(--_track-height))/2);font-size:32px;letter-spacing:1.6px;border:calc((var(--_layer) - var(--_handle-selected-size))/2) solid rgba(0,0,0,0);color:var(--md-comp-switch-selected-icon-color, var(--md-sys-color-on-primary-container));background-color:var(--md-comp-switch-selected-handle-color, var(--md-sys-color-on-primary))}input[type=checkbox].micl-switch:not(:disabled){cursor:pointer}input[type=checkbox].micl-switch:not(:disabled):hover::after{border-color:color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);background-color:var(--md-comp-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant))}input[type=checkbox].micl-switch:not(:disabled):hover:checked::after{border-color:color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);background-color:var(--md-comp-switch-selected-hover-handle-color, var(--md-sys-color-primary-container))}input[type=checkbox].micl-switch:not(:disabled):focus-visible::after{border-color:color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent)}input[type=checkbox].micl-switch:not(:disabled):focus-visible::before{outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-switch-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-sys-state-focus-indicator-outer-offset, 2px)}input[type=checkbox].micl-switch:not(:disabled):focus-visible:checked::after{border-color:color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);background-color:var(--md-comp-switch-selected-focus-handle-color, var(--md-sys-color-primary-container))}input[type=checkbox].micl-switch:not(:disabled):focus-visible:not(:checked)::after{background-color:var(--md-comp-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant))}input[type=checkbox].micl-switch:not(:disabled):active::after{border:calc((var(--_layer) - var(--_handle-pressed-size))/2) solid rgba(0,0,0,0);background-color:var(--md-comp-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant))}input[type=checkbox].micl-switch:not(:disabled):active:checked::after{border-width:calc((var(--_layer) - var(--_handle-pressed-size))/2);border-color:color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);background-color:var(--md-comp-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container))}input[type=checkbox].micl-switch:not(:disabled):active:not(:checked)::after{border-color:color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent)}input[type=checkbox].micl-switch:disabled::before{border-color:var(--md-comp-switch-disabled-unselected-track-outline-color, var(--md-sys-color-on-surface));background-color:var(--md-comp-switch-disabled-unselected-track-color, var(--md-sys-color-surface-container-highest));opacity:var(--md-comp-switch-disabled-track-opacity, 12%)}input[type=checkbox].micl-switch:disabled:checked::before{border-color:var(--md-comp-switch-disabled-selected-track-color, var(--md-sys-color-on-surface));background-color:var(--md-comp-switch-disabled-selected-track-color, var(--md-sys-color-on-surface))}input[type=checkbox].micl-switch:disabled::after{color:var(--md-comp-switch-disabled-unselected-icon-color, var(--md-sys-color-surface-container-highest));background-color:var(--md-comp-switch-disabled-unselected-handle-color, var(--md-sys-color-on-surface));opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}input[type=checkbox].micl-switch:disabled:checked::after{color:rgb(from var(--md-comp-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface)) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%));background-color:var(--md-comp-switch-disabled-selected-handle-color, var(--md-sys-color-surface));opacity:100%}input[type=checkbox].micl-switch:dir(rtl)::after{transform:rotate(45deg) scaleY(-1)}
+input[type=checkbox].micl-switch:not(:disabled)+label,label:has(+input[type=checkbox].micl-switch:not(:disabled)),label:has(input[type=checkbox].micl-switch:not(:disabled)){cursor:pointer}input[type=checkbox].micl-switch+label,label:has(+input[type=checkbox].micl-switch),label:has(input[type=checkbox].micl-switch){color:var(--md-sys-color-on-surface);-webkit-tap-highlight-color:rgba(0,0,0,0)}input[type=checkbox].micl-switch:disabled+label,label:has(+input[type=checkbox].micl-switch:disabled){opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}label:has(input[type=checkbox].micl-switch:disabled){color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:root{--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px}: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-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-state-focus-indicator-outer-offset: 2px}input[type=checkbox].micl-switch{--_unselected-icon: var(--md-comp-switch-unselected-icon, "+");--_selected-icon: var(--md-comp-switch-selected-icon, "\AC");--_motion-effects: var(--md-comp-switch-motion-effects, cubic-bezier(0.34, 0.88, 0.34, 1));--_motion-duration: var(--md-comp-switch-motion-duration, 300ms);--_track-width: var(--md-comp-switch-track-width, 52px);--_track-height: var(--md-comp-switch-track-height, 32px);--_track-outline-width: var(--md-comp-switch-track-outline-width, 2px);--_handle-size: var(--md-comp-switch-handle-size, 16px);--_handle-selected-size: var(--md-comp-switch-selected-handle-size, 24px);--_handle-pressed-size: var(--md-comp-switch-pressed-handle-size, 28px);--_layer: var(--md-sys-state-layer-size, 40px);--_target: var(--md-sys-state-target-size, 48px);--_unselected-layer-color: var(--md-comp-switch-unselected-state-layer-color, var(--md-sys-color-on-surface));--_selected-layer-color: var(--md-comp-switch-selected-state-layer-color, var(--md-sys-color-primary));appearance:none;position:relative;inline-size:var(--_track-width);block-size:var(--_target);margin:0;border-radius:calc(var(--_track-height)/2);outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}input[type=checkbox].micl-switch::before{content:"";box-sizing:border-box;display:block;inline-size:var(--_track-width);block-size:var(--_track-height);margin-block:calc((var(--_target) - var(--_track-height))/2);border:var(--_track-outline-width) solid var(--md-comp-switch-unselected-track-outline-color, var(--md-sys-color-outline));border-radius:inherit;background-color:var(--md-comp-switch-unselected-track-color, var(--md-sys-color-surface-container-highest));transition:background-color var(--_motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-switch::after{content:var(--_unselected-icon);box-sizing:border-box;position:absolute;display:grid;grid-template-rows:auto 3px;place-items:center;inline-size:var(--_layer);block-size:var(--_layer);inset:0;inset-inline-start:calc((var(--_track-height) - var(--_layer))/2);margin:auto 0;font:300 18px/0 var(--md-ref-typeface-plain);color:var(--md-comp-switch-unselected-icon-color, var(--md-sys-color-surface-container-highest));background-color:var(--md-comp-switch-unselected-handle-color, var(--md-sys-color-outline));background-clip:content-box;border:calc((var(--_layer) - var(--_handle-size))/2) solid rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);transform:rotate(135deg);transition:inset-inline-start var(--_motion-duration) var(--_motion-effects),border-width var(--_motion-duration) var(--_motion-effects),grid-template-rows var(--_motion-duration) var(--_motion-effects),color var(--_motion-duration) cubic-bezier(0.2, 0, 0, 1),border-color var(--_motion-duration) cubic-bezier(0.2, 0, 0, 1),background-color var(--_motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=checkbox].micl-switch:checked::before{border-color:var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary));background-color:var(--md-comp-switch-selected-track-color, var(--md-sys-color-primary))}input[type=checkbox].micl-switch:checked::after{content:var(--_selected-icon);grid-template-rows:auto 8px;inset-inline-start:calc(var(--_track-width) - (var(--_layer) + var(--_track-height))/2);font-size:32px;letter-spacing:1.6px;border:calc((var(--_layer) - var(--_handle-selected-size))/2) solid rgba(0,0,0,0);color:var(--md-comp-switch-selected-icon-color, var(--md-sys-color-on-primary-container));background-color:var(--md-comp-switch-selected-handle-color, var(--md-sys-color-on-primary))}input[type=checkbox].micl-switch:not(:disabled){cursor:pointer}input[type=checkbox].micl-switch:not(:disabled):hover::after{border-color:color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);background-color:var(--md-comp-switch-unselected-hover-handle-color, var(--md-sys-color-on-surface-variant))}input[type=checkbox].micl-switch:not(:disabled):hover:checked::after{border-color:color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-hover-state-layer-opacity, 8%), transparent);background-color:var(--md-comp-switch-selected-hover-handle-color, var(--md-sys-color-primary-container))}input[type=checkbox].micl-switch:not(:disabled):focus-visible::after{border-color:color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent)}input[type=checkbox].micl-switch:not(:disabled):focus-visible::before{outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-comp-switch-focus-indicator-color, var(--md-sys-color-secondary));outline-offset:var(--md-sys-state-focus-indicator-outer-offset, 2px)}input[type=checkbox].micl-switch:not(:disabled):focus-visible:checked::after{border-color:color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-focus-state-layer-opacity, 10%), transparent);background-color:var(--md-comp-switch-selected-focus-handle-color, var(--md-sys-color-primary-container))}input[type=checkbox].micl-switch:not(:disabled):focus-visible:not(:checked)::after{background-color:var(--md-comp-switch-unselected-focus-handle-color, var(--md-sys-color-on-surface-variant))}input[type=checkbox].micl-switch:not(:disabled):active::after{border:calc((var(--_layer) - var(--_handle-pressed-size))/2) solid rgba(0,0,0,0);background-color:var(--md-comp-switch-unselected-pressed-handle-color, var(--md-sys-color-on-surface-variant))}input[type=checkbox].micl-switch:not(:disabled):active:checked::after{border-width:calc((var(--_layer) - var(--_handle-pressed-size))/2);border-color:color-mix(in srgb, var(--_selected-layer-color) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent);background-color:var(--md-comp-switch-selected-pressed-handle-color, var(--md-sys-color-primary-container))}input[type=checkbox].micl-switch:not(:disabled):active:not(:checked)::after{border-color:color-mix(in srgb, var(--_unselected-layer-color) var(--md-sys-state-pressed-state-layer-opacity, 10%), transparent)}input[type=checkbox].micl-switch:disabled::before{border-color:var(--md-comp-switch-disabled-unselected-track-outline-color, var(--md-sys-color-on-surface));background-color:var(--md-comp-switch-disabled-unselected-track-color, var(--md-sys-color-surface-container-highest));opacity:var(--md-comp-switch-disabled-track-opacity, 12%)}input[type=checkbox].micl-switch:disabled:checked::before{border-color:var(--md-comp-switch-disabled-selected-track-color, var(--md-sys-color-on-surface));background-color:var(--md-comp-switch-disabled-selected-track-color, var(--md-sys-color-on-surface))}input[type=checkbox].micl-switch:disabled::after{color:var(--md-comp-switch-disabled-unselected-icon-color, var(--md-sys-color-surface-container-highest));background-color:var(--md-comp-switch-disabled-unselected-handle-color, var(--md-sys-color-on-surface));opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}input[type=checkbox].micl-switch:disabled:checked::after{color:rgb(from var(--md-comp-switch-disabled-selected-icon-color, var(--md-sys-color-on-surface)) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%));background-color:var(--md-comp-switch-disabled-selected-handle-color, var(--md-sys-color-surface));opacity:100%}input[type=checkbox].micl-switch:dir(rtl)::after{transform:rotate(45deg) scaleY(-1)}

package/dist/timepicker.css

@@ -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-state-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}
+: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}@property --micl-angle{syntax:"<angle>";inherits:true;initial-value:0deg}.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(--_timepicker-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{--_timepicker-motion-duration: var(--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-state-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:". . . 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}dialog.micl-dialog.micl-timepicker:dir(rtl) .micl-dialog__content{direction:ltr}dialog.micl-dialog.micl-timepicker:dir(rtl) .micl-dialog__content .micl-timepicker__supporting-text-hour,dialog.micl-dialog.micl-timepicker:dir(rtl) .micl-dialog__content .micl-timepicker__supporting-text-minute{direction:rtl}@media(prefers-reduced-motion: reduce){dialog.micl-dialog.micl-timepicker{--_timepicker-motion-duration: 0ms}}.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}.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: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;user-select:none}.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) input[name=hour]::selection,.micl-timepicker:has(.micl-timepicker__dial:not(.micl-timepicker__dial--hidden)) input[name=minute]::selection{background-color:rgba(0,0,0,0)}.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:attr(aria-label);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__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-track-radius: var(--micl-dial-radius);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;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));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);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: calc(var(--micl-track-radius) - 12px);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:calc((var(--_center-size) - var(--_track-width))/-2);inset-inline-start:calc((var(--_center-size) - var(--_track-width))/-2);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[open] .micl-timepicker__dial{transition:--micl-angle var(--_timepicker-motion-duration) cubic-bezier(0.2, 0, 0, 1)}.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={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})());
+!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 i=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},o=()=>Object.keys(i.map).join(","),r=e=>Object.entries(i.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],a=e=>{const t=r(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},c=e=>{const t=r(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},l=e=>{const t=o();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const i=r(n),a=e.type;i&&"function"==typeof i.component[a]&&i.component[a]?.(e)},s=()=>{i.activated||(i.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=o();t&&e.matches(t)&&a(e),t&&e.querySelectorAll(t).forEach(a)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=o();t&&e.matches(t)&&c(e),(e=>{const t=o();t&&e.querySelectorAll(t).forEach(c)})(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),(e=>{const t=o();t&&e.querySelectorAll(t).forEach(a),e.querySelectorAll('[class*="micl-"], [class*="micl-"] > summary').forEach(e=>{i.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 i=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",i))};e.addEventListener("animationend",i)}),i.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",l),document.addEventListener("input",l),document.addEventListener("keydown",l))},d=()=>{document.removeEventListener("DOMContentLoaded",d),s()};"loading"!==document.readyState?s():document.addEventListener("DOMContentLoaded",d),n.d(t,["register",0,(e,t,n)=>(i.map[e]={component:t,type:n},i.activated&&document.querySelectorAll(e).forEach(a),t)])}};const t={};function n(i){const o=t[i];if(void 0!==o)return o.exports;const r=t[i]={exports:{}};return e[i](r,r.exports,n),r.exports}n.d=(e,t)=>{if(Array.isArray(t))for(var i=0;i<t.length;){var o=t[i++],r=t[i++];n.o(e,o)?0===r&&i++:0===r?Object.defineProperty(e,o,{enumerable:!0,value:t[i++]}):Object.defineProperty(e,o,{enumerable:!0,get:r})}else for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},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 i={};n.r(i);var o=n(56);const r="dialog.micl-dialog.micl-timepicker",a="micl-timepicker__",c="micl-timepicker__dial--hidden",l="micl-timepicker__dial--dragging",s="micl-timepicker__dial-inner",d="micl-timepicker__time--selected",m="micl-timepicker--selected",u="--micl-angle",p="--micl-track-radius",y=(()=>{try{const e=Intl.DateTimeFormat;return{cycle:new e(void 0,{hour:"numeric"}).resolvedOptions().hourCycle||"h23",time:new e(void 0,{hour:"numeric",minute:"2-digit"}),periods:[9,21].map((t,n)=>new e(void 0,{hour:"numeric",hour12:!0}).formatToParts(new Date(2024,0,1,t)).find(e=>"dayPeriod"===e.type)?.value||(n?"PM":"AM"))}}catch{return{cycle:"h23",time:null,periods:["AM","PM"]}}})(),f=e=>`${e}`.padStart(2,"0"),v=e=>parseInt(e,10),h=(e,t)=>e.querySelector(t),g=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,L=e=>!!e&&!e.classList.contains(c),E=(e,t)=>{e.classList.toggle(m,t)},b=e=>document.querySelector(`[data-timepicker="${e.id}"],[popovertarget="${e.id}"],[commandfor="${e.id}"]`),$=e=>{const t=e.dataset.miclhourcycle||y.cycle;return"h11"===t||"h12"===t},P=(e,t)=>"hour"===e?t?[1,12]:[0,23]:[0,59],k=(e,t)=>{e.value=f(t),e.setAttribute("aria-valuenow",`${t}`),e.setAttribute("aria-valuetext",e.value)},w=(e,t)=>{const[n,i]=P(e.name,t);let o=v(e.value);(isNaN(o)||o<n)&&(o=n),o>i&&(o=i),k(e,o)},S=(e,t,n)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove(d));const i=e.querySelector(`data[data-${t}][value="${n}"]`);let o=NaN;if(e.style.removeProperty(p),i){const t=window.getComputedStyle(i);o=parseFloat(t.getPropertyValue(u)),e.style.setProperty(p,t.getPropertyValue("--micl-hour-radius")),i.classList.add(d)}else"minute"===t&&(o=360*v(n)/60-90);if(isNaN(o))return;const r=parseFloat(e.style.getPropertyValue(u))||0;e.style.setProperty(u,`${r+(((o-r)%360+540)%360-180)}deg`)},A=(e,t,n,i,o=!0)=>{let r=v(n||"0");if(isNaN(r))return;if("hour"===t.name&&i&&$(e)){const t=h(e,`.${a}am`),n=h(e,`.${a}pm`);r>=12?(n&&(n.checked=!0),r>12&&(r-=12)):(t&&(t.checked=!0),0===r&&(r=12))}k(t,r);const c=o&&h(e,`.${a}dial`);c&&S(c,t.name,t.value)},x=(e,t)=>{e.querySelectorAll("data").forEach(e=>{const n=e.dataset[t];n&&(e.textContent=n,e.value=f(n)),e.classList.contains(s)&&e.classList.toggle(c,"hour"!==t)})},M=(e,t,n)=>{if("ArrowDown"!==n.key&&"ArrowUp"!==n.key)return;n.preventDefault();const i=$(e),[o,r]=P(t.name,i);let a=v(t.value)||0;a+="ArrowUp"===n.key?1:-1,(a<o||a>r)&&(a=a<o?r:o,"hour"===t.name&&i&&h(e,"input[name=period]:not(:checked)")?.click()),A(e,t,`${a}`)},_=(0,o.register)(r,{initialize:e=>{if(e.dataset.miclinitialized)return;const t=h(e,"form"),n=h(e,`.${a}inputmode`),i=h(e,`.${a}dial`),o=h(e,".micl-dialog__headline h2"),r=[h(e,"input[name=hour]"),h(e,"input[name=minute]")].filter(e=>!!e);if(!t||r.length<2)return;e.dataset.miclinitialized="1";const d=$(e),p=t=>{const n=L(i),a=e.dataset[n?"micldialheadline":"miclinputheadline"];r.forEach(e=>e.toggleAttribute("readonly",n)),o&&a&&(o.textContent=a),t&&(r[0].focus(),n||r[0].select())};r.forEach((t,n)=>{((e,t)=>{const[n,i]=P(e.name,t),o={type:"text",maxlength:2,pattern:"hour"===e.name?t?"(0[1-9]|1[0-2])":"(0[0-9]|1[0-9]|2[0-3])":"(0[0-9]|[1-5][0-9])",inputmode:"numeric",autocomplete:"off",role:"spinbutton","aria-valuemin":n,"aria-valuemax":i};for(const t in o)e.setAttribute(t,o[t])})(t,d),w(t,d),t.addEventListener("keydown",M.bind(null,e,t)),t.addEventListener("focus",()=>{E(r[1-n],!1),E(t,!0),L(i)||t.select(),i&&(x(i,t.name),S(i,t.name,t.value))}),t.addEventListener("blur",()=>{L(i)||(w(t,d),E(t,!1))})}),p();const k=h(e,`.${a}period`);if(k&&d&&(k.innerHTML=["am","pm"].map((e,t)=>`<input type="radio" name="period" class="${a}${e}" value="${e}" aria-label="${y.periods[t]}"${t?"":" checked"}>`).join("")),n?.addEventListener("click",()=>{i?.classList.toggle(c),p(!0)}),i){i.setAttribute("aria-hidden","true"),((e,t)=>{let n=t?300:270,i="";for(let e=t?1:0;e<=(t?12:23);e++){const o=!t&&e>=12?` class="${s}"`:` data-minute="${5*e%60}"`;i+=`<data value="${f(e)}" data-hour="${e}"${o} style="${u}:${n}deg">${e}</data>`,n=(n+30)%360}e.innerHTML=`${i}<span class="${a}track"></span>`})(i,d);const t=t=>{const n=document.elementFromPoint(t.clientX,t.clientY);n&&"DATA"===n.tagName&&A(e,r[r[1].classList.contains(m)?1:0],n.value)};i.addEventListener("pointerdown",e=>{i.classList.add(l),t(e),i.setPointerCapture(e.pointerId)}),i.addEventListener("pointermove",e=>{i.classList.contains(l)&&t(e)});const n=(e,t)=>{const n=i.classList.contains(l);i.classList.remove(l),i.hasPointerCapture(e.pointerId)&&i.releasePointerCapture(e.pointerId),t&&n&&r[0].classList.contains(m)&&r[1].focus()};i.addEventListener("pointerup",e=>n(e,!0)),i.addEventListener("pointercancel",n)}e.addEventListener("beforetoggle",t=>{if("open"!==t.newState)return;i&&x(i,"hour"),E(r[1],!1),E(r[0],!0);let n=document.activeElement;if((!g(n)||n.dataset.timepicker!==e.id&&n.popoverTargetElement!==e&&n.commandForElement!==e)&&(n=b(e)),!g(n))return;e._miclInvoker=n;const o=(n.value||n.textContent).split(":");2===o.length&&(A(e,r[0],o[0],!0),A(e,r[1],o[1],!1,!1))}),e.addEventListener("close",()=>{if(!e.returnValue)return;let n=e._miclInvoker;if(n||(n=b(e)),!g(n))return;let i=v(r[0].value);const o=v(r[1].value);if(isNaN(i)||isNaN(o))return;d&&(i%=12,"pm"===t.elements.namedItem("period")?.value&&(i+=12));const a=`${f(i)}:${f(o)}`;n.value=a,n instanceof HTMLInputElement?(n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new Event("input",{bubbles:!0}))):n.textContent=y.time?y.time.format(new Date(2024,0,1,i,o)):a})}},HTMLDialogElement);return n.d(i,["default",0,_,"timepickerSelector",0,r]),i})());

package/foundations/layout/_tokens.scss

@@ -0,0 +1,55 @@
+//
+// 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.
+
+$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: 24px; // medium and larger breakpoints
+
+$md-sys-pane-spacer: 24px;
+
+$md-sys-pane-fixed-width-expanded: 360px;
+$md-sys-pane-fixed-width-large: 412px;
+
+$md-sys-card-margin: 8px;
+
+:root {
+    --md-sys-layout-pane-spacer: #{$md-sys-pane-spacer};
+    --md-sys-layout-window-margin: #{$md-sys-window-margin};
+    --md-sys-card-margin: #{$md-sys-card-margin};
+
+    @media (max-width: $md-sys-breakpoint-compact-max) {
+        --md-sys-layout-window-margin: #{$md-sys-window-margin-compact};
+    }
+    @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-breakpoint-large-min) {
+        --md-sys-layout-pane-fixed-width: #{$md-sys-pane-fixed-width-large};
+    }
+}

package/foundations/layout/index.scss

@@ -19,45 +19,12 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
+@forward 'tokens';
+@use 'tokens' as *;
 @use '../../styles/shape';
 
 @include shape.corner('medium');
 
-$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: 24px; // medium and larger breakpoints
-
-$md-sys-pane-spacer: 24px;
-
-$md-sys-pane-fixed-width-expanded: 360px;
-$md-sys-pane-fixed-width-large: 412px;
-
-$md-sys-card-margin: 8px;
-
-:root {
-    --md-sys-layout-pane-spacer: #{$md-sys-pane-spacer};
-    --md-sys-layout-window-margin: #{$md-sys-window-margin};
-    --md-sys-card-margin: #{$md-sys-card-margin};
-
-    @media (max-width: $md-sys-breakpoint-compact-max) {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-compact};
-    }
-    @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-breakpoint-large-min) {
-        --md-sys-layout-pane-fixed-width: #{$md-sys-pane-fixed-width-large};
-    }
-}
-
 .micl-window {
     padding:
         env(safe-area-inset-top, 0px)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "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",