material-inspired-component-library 9.1.0 → 9.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -1
- package/components/appbar/index.scss +1 -1
- package/components/badge/README.md +43 -12
- package/components/badge/index.scss +15 -21
- package/components/bottomsheet/README.md +53 -22
- package/components/bottomsheet/index.scss +62 -45
- package/components/button/_shared.scss +9 -9
- package/components/card/README.md +55 -25
- package/components/card/index.scss +57 -38
- package/components/checkbox/README.md +97 -28
- package/components/checkbox/index.scss +39 -29
- package/components/chip/index.scss +6 -6
- package/components/datepicker/README.md +184 -59
- package/components/datepicker/index.scss +85 -21
- package/components/dialog/README.md +151 -56
- package/components/dialog/index.scss +50 -62
- package/components/iconbutton/index.scss +8 -8
- package/components/list/index.scss +15 -11
- package/components/menu/index.scss +13 -13
- package/components/navigationbar/index.scss +7 -1
- package/components/navigationrail/index.scss +27 -22
- package/components/radio/README.md +52 -12
- package/components/radio/index.scss +59 -41
- package/components/select/index.scss +3 -3
- package/components/sidesheet/README.md +90 -37
- package/components/sidesheet/index.scss +51 -41
- package/components/slider/README.md +35 -9
- package/components/slider/index.scss +182 -153
- package/components/snackbar/README.md +43 -25
- package/components/snackbar/index.scss +22 -27
- package/components/stepper/index.scss +5 -5
- package/components/switch/README.md +32 -4
- package/components/switch/index.scss +57 -52
- package/components/timepicker/README.md +131 -55
- package/components/timepicker/index.scss +47 -26
- package/dist/appbar.css +1 -1
- package/dist/badge.css +1 -1
- package/dist/bottomsheet.css +1 -1
- package/dist/bottomsheet.js +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/checkbox.js +1 -1
- package/dist/chip.css +1 -1
- package/dist/components/checkbox/index.d.ts +1 -0
- package/dist/datepicker.css +1 -1
- package/dist/datepicker.js +1 -1
- package/dist/dialog.css +1 -1
- package/dist/foundations/form/index.js +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/layout.css +1 -1
- package/dist/list.css +1 -1
- package/dist/menu.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/navigationbar.css +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/radio.css +1 -1
- package/dist/select.css +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/slider.css +1 -1
- package/dist/slider.js +1 -1
- package/dist/snackbar.css +1 -1
- package/dist/snackbar.js +1 -1
- package/dist/stepper.css +1 -1
- package/dist/stepper.js +1 -1
- package/dist/switch.css +1 -1
- package/dist/timepicker.css +1 -1
- package/dist/timepicker.js +1 -1
- package/foundations/layout/_tokens.scss +55 -0
- package/foundations/layout/index.scss +5 -35
- package/package.json +2 -2
- package/{components/checkbox/_label.scss → styles/togglelabel.scss} +11 -3
package/dist/micl.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";const e={d:(t,n)=>{if(Array.isArray(n))for(var a=0;a<n.length;){var i=n[a++],r=n[a++];e.o(t,i)?0===r&&a++:0===r?Object.defineProperty(t,i,{enumerable:!0,value:n[a++]}):Object.defineProperty(t,i,{enumerable:!0,get:r})}else for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}};let t={};e.r(t),e.d(t,{default:()=>Ne});const n=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},a=()=>Object.keys(n.map).join(","),i=e=>Object.entries(n.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],r=e=>{const t=i(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},l=e=>{const t=a();t&&e.querySelectorAll(t).forEach(r),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 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 a=t=>{"micl-ripple"===t.animationName&&(e.classList.remove("micl-rippling"),e.style.removeProperty("--micl-x"),e.style.removeProperty("--micl-y"),e.removeEventListener("animationend",a))};e.addEventListener("animationend",a)}),n.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())},o=e=>{const t=i(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},s=e=>{const t=a();t&&e.querySelectorAll(t).forEach(o)},c=e=>{const t=a();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const r=i(n),l=e.type;r&&"function"==typeof r.component[l]&&r.component[l]?.(e)},d=()=>{n.activated||(n.activated=!0,new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=a();t&&e.matches(t)&&r(e),t&&e.querySelectorAll(t).forEach(r)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=a();t&&e.matches(t)&&o(e),s(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),l(document),document.addEventListener("change",c),document.addEventListener("input",c),document.addEventListener("keydown",c))},m=(e,t,a)=>(n.map[e]={component:t,type:a},n.activated&&document.querySelectorAll(e).forEach(r),t),u=()=>{document.removeEventListener("DOMContentLoaded",u),d()};"loading"!==document.readyState?d():document.addEventListener("DOMContentLoaded",u);const p={initialize:()=>l(document),cleanup:()=>s(document)},h="dialog.micl-bottomsheet",g=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10);t<1&&(t=e.getBoundingClientRect().height,e.dataset.miclfitheight=`${t}`);let n=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10),a=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=n);return[...new Set(a.concat([Math.min(t,n)]).sort((e,t)=>e-t))]},f=(e,t)=>{let n=e.getBoundingClientRect().height,a=g(e);return a.filter(e=>e>n+4)[0]||a[t?a.length-1:0]},y=(e,t)=>{t<1?(delete e.dataset.miclfitheight,e.style.removeProperty("--md-comp-bottomsheet-height"),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-comp-bottomsheet-height",`${t}px`)},v=(m(h,{initialize:e=>{if(!e.matches(h)||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=e.querySelector(".micl-bottomsheet__headline");if(!t)return;const n=t.querySelector(".micl-bottomsheet__draghandle");let a,i,r=!1,l=!1,o=!1;function s(t){const n=t.clientY;if(r&&Math.abs(a-n)>4&&(r=!1,l=!0,e.classList.add("micl-bottomsheet--resizing")),l){const t=Math.max(1,i+a-n),r=g(e).find(e=>e>0&&Math.abs(e-t)<=12);y(e,r||t)}}function c(t){r=!1,e.classList.remove("micl-bottomsheet--resizing"),document.removeEventListener("pointermove",s),document.removeEventListener("pointerup",c),l&&(l=!1,o=!0,t.clientY<a?y(e,f(e,!0)):e.getBoundingClientRect().height<48?y(e,0):y(e,(e=>{let t=e.getBoundingClientRect().height,n=g(e).filter(e=>e>0),a=n.filter(e=>e<t-4);return a[a.length-1]||n[0]})(e)))}n?.addEventListener("click",()=>{o||y(e,f(e,!1))}),t.addEventListener("pointerdown",l=>{l.target!==t&&l.target!==n||(r=!0,o=!1,l.preventDefault(),a=l.clientY,i=e.getBoundingClientRect().height,document.addEventListener("pointermove",s),document.addEventListener("pointerup",c))})},cleanup:e=>{e.matches(h)&&(e.classList.remove("micl-bottomsheet--resizing"),delete e.dataset.miclinitialized,delete e.dataset.miclfitheight)}},HTMLDialogElement),".micl-button--toggle"),E=e=>{const t=e.querySelector(".micl-button__icon")??e,n="true"===e.getAttribute("aria-pressed");t.dataset.micliconselected&&t.classList.toggle(t.dataset.micliconselected,n),t.dataset.miclicon&&t.classList.toggle(t.dataset.miclicon,!n)},L=(m(v,{command:e=>{const t=e.target;t.matches(v)&&!t.disabled&&"--micl-toggle"===e.command&&(t.classList.add("micl-button--toggled"),t.setAttribute("aria-pressed",String("true"!==t.getAttribute("aria-pressed"))),E(t))},initialize:function(e){e.matches(v)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",E(e),e.addEventListener("command",this.command))},cleanup:function(e){e.matches(v)&&(e.removeEventListener("command",this.command),delete e.dataset.miclinitialized)}},HTMLButtonElement),".micl-checkbox-group"),b=e=>{const t=e.querySelector(".micl-checkbox__parent");return t?.closest(L)===e?t:null},w=e=>{const t=b(e);if(!t)return!1;let n=0,a=0;return e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(i=>{if(i!==t){const t=i.closest(L);t===e?(n++,i.checked&&!i.indeterminate&&a++):i.classList.contains("micl-checkbox__parent")&&t?.parentElement?.closest(L)===e&&(n++,w(t)&&a++)}}),0===a?(t.checked=!1,t.indeterminate=!1):a===n?(t.checked=!0,t.indeterminate=!1):(t.checked=!0,t.indeterminate=!0),a===n},S=(e,t)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(n=>{const a=n.closest(L);a===e?n.checked=t:n.classList.contains("micl-checkbox__parent")&&a?.parentElement?.closest(L)===e&&(n.checked=t,S(a,t))})},k=(e,t)=>{const n=b(e);if(!n)return;t===n&&S(e,t.checked);let a,i=e;do{a=i,i=i.parentElement?.closest(L)}while(i);w(a)},x=(m(L,{initialize:e=>{e.matches(L)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",e.addEventListener("change",t=>{const n=t.target;n.classList.contains("micl-checkbox")&&(t.stopPropagation(),k(e,n))}),k(e,null))}},HTMLElement),"dialog.micl-dialog.micl-datepicker"),$="micl-datepicker__",D="micl-no-transition",T=new WeakMap,M=(new Intl.DateTimeFormat).resolvedOptions().locale,A={input:new Intl.DateTimeFormat(M,{year:"numeric",month:"2-digit",day:"2-digit"}),header:new Intl.DateTimeFormat(M,{weekday:"short",day:"numeric",month:"short"}),monthLong:new Intl.DateTimeFormat(void 0,{month:"long"}),monthShort:new Intl.DateTimeFormat(M,{month:"short"}),weekdayNarrow:new Intl.DateTimeFormat(M,{weekday:"narrow"}),weekdayLong:new Intl.DateTimeFormat(M,{weekday:"long"})},q=e=>{const t=new Date(e);return t.setHours(0,0,0,0),t},C=e=>{const t=(e.getMonth()+1).toString().padStart(2,"0"),n=e.getDate().toString().padStart(2,"0");return`${e.getFullYear()}-${t}-${n}`},_=()=>A.input.formatToParts(new Date(2025,0,15)).map(e=>{switch(e.type){case"day":return"DD";case"month":return"MM";case"year":return"YYYY";case"literal":return e.value;default:return""}}).join("").trim(),I=(()=>{try{const e=new Intl.Locale(M).getWeekInfo?.();if(e)return 7===e.firstDay?0:e.firstDay}catch{}return/US|CA|MX/i.test(M)?0:1})(),H=e=>!isNaN(e.getTime()),P=e=>"date"===e.type&&e.valueAsDate?e.valueAsDate:e.value?new Date(e.value):null,N=(e,t,n)=>{e.value=t,e instanceof HTMLInputElement?(e.dispatchEvent(new Event("change",{bubbles:!0})),e.dispatchEvent(new Event("input",{bubbles:!0}))):e.textContent=n},z=(e,t)=>{if(e)if(e.firstElementChild){let n=e.firstChild;for(;n;){if(n.nodeType===Node.TEXT_NODE)return void(n.nodeValue=t);n=n.nextSibling}e.appendChild(document.createTextNode(t))}else e.textContent=t},F=(e,t)=>{const n=new Date(e,t,1).getDay(),a=new Date(e,t,1-(n-I+7)%7);return Array.from({length:42},(e,n)=>{const i=new Date(a);return i.setDate(a.getDate()+n),{date:i,val:C(i),isCurrentMonth:i.getMonth()===t}})},Y=(e,t,n,a=!1)=>{if(a){const n=(()=>{const e=new Date,t=e.getDay()-I;e.setDate(e.getDate()-t);const n=document.createDocumentFragment();for(let t=0;t<7;t++){const a=document.createElement("span");a.style.gridArea=`1 / ${t+1}`,a.textContent=A.weekdayNarrow.format(e),a.title=A.weekdayLong.format(e),n.appendChild(a),e.setDate(e.getDate()+1)}return n})();t.forEach((e,t)=>{const a=document.createElement("time"),i=Math.floor(t/7)+2,r=t%7+1;a.style.gridArea=`${i} / ${r}`,n.appendChild(a)}),e.appendChild(n)}const i=q(new Date),r=n.selected.getTime(),l=n.selectedEnd?.getTime();e.querySelectorAll("time").forEach((e,n)=>{const a=t[n];e.dateTime=a.val,e.textContent=a.date.getDate().toString();const o=a.date.getTime(),s=o===r||o===l,c=o===i.getTime();e.className="",a.isCurrentMonth||e.classList.add(`${$}outside`),s&&e.classList.add(`${$}selected`),c&&e.classList.add(`${$}today`),void 0!==l&&l!==r&&(o===r?e.classList.add(`${$}range-start`):o===l?e.classList.add(`${$}range-end`):o>r&&o<l&&e.classList.add(`${$}inrange`))})},O=(e,t,n=0)=>{const a=e.querySelector(".micl-dialog__content"),i=a?.querySelector(`.${$}calendars`);if(!i)return;const r="micl-startleft",l="micl-startright",o="micl-moveleft",s="micl-moveright";if(i.classList.remove(o,s,r,l),i.offsetWidth,0!==n){const e=i.querySelector(`.${$}calendar`);if(!e)return;const a=document.createElement("div"),c=document.createElement("div");a.className=`${$}calendar`,c.className=`${$}calendar-inner`;const d=F(t.viewDate.getFullYear(),t.viewDate.getMonth());Y(c,d,t,!0);const m=n>0,u=m?r:l,p=m?o:s;a.appendChild(c),m?i.appendChild(a):i.prepend(a),i.classList.add(D,u),i.offsetWidth,requestAnimationFrame(()=>{i.classList.remove(D,u),i.classList.add(p)});const h=()=>{i.removeEventListener("transitionend",h),setTimeout(()=>{i.classList.remove(p),e.parentElement===i&&e.remove(),i.classList.add(D,r),i.offsetWidth,i.classList.remove(D,r)},0)};i.addEventListener("transitionend",h)}else{let e=i.querySelector(`.${$}calendar`);e||(e=document.createElement("div"),e.className=`${$}calendar`,e=i.appendChild(e));let n=e.querySelector(`.${$}calendar-inner`);n||(n=document.createElement("div"),n.className=`${$}calendar-inner`,e.appendChild(n));const a=F(t.viewDate.getFullYear(),t.viewDate.getMonth());Y(n,a,t,0===n.querySelectorAll("time").length)}a?.querySelectorAll(`.${$}input input`).forEach((e,n)=>{const a=0===n?t.selected:t.selectedEnd;e.value=a?A.input.format(a):"",e.value?e.dataset.miclvalue="1":delete e.dataset.miclvalue,e.dataset.micldateformat||(e.dataset.micldateformat=_())}),z(e.querySelector("h1, h2, h3, h4, h5, h6, .micl-heading"),t.range?`${A.header.format(t.selected)} – ${t.selectedEnd?A.header.format(t.selectedEnd):""}`:A.header.format(t.selected)),z(e.querySelector(`.${$}month`),A.monthShort.format(t.viewDate)),z(e.querySelector(`.${$}year`),t.viewDate.toLocaleDateString(M,e.classList.contains("micl-dialog--docked")?{year:"numeric"}:{month:"long",year:"numeric"}));const c=e.querySelector(`.${$}months input[value="${t.viewDate.getMonth()}"]`);c&&(c.checked=!0);const d=e.querySelector(`.${$}years input[value="${t.viewDate.getFullYear()}"]`);d&&(d.checked=!0)},B=(e,t)=>{"months"!==t&&"years"!==t||e.querySelector(`.${$}${t}.${$}view-hidden`)||(t="calendars"),["calendars","input","month-selector","year-selector"].forEach(n=>{let a="input"===t;"calendars"!==n&&"input"!==n||(a=t!==n),e.querySelector(`.${$}${n}`)?.classList.toggle(`${$}view-hidden`,a)});const n=e.querySelector(".micl-dialog__content");if(!n)return;const a=parseInt(window.getComputedStyle(n).getPropertyValue("max-block-size"),10);["months","years"].forEach(e=>{const i=n.querySelector(`.${$}${e}`);if(!i)return;const r=i.querySelector("input:checked");let l=!1;if(r&&e===t){const e=window.getComputedStyle(i).getPropertyValue("transition-duration"),t=parseFloat(e)*(e.includes("ms")?1:1e3),o=i.scrollHeight-a,s=(a-48)/2;if(r.offsetTop>s){let e=r.offsetTop-s-24;e>o&&(e=o);const a=performance.now(),c=i=>{const r=Math.min((i-a)/t,1);n.scrollTop=e*r,r<1&&requestAnimationFrame(c)};i.classList.remove(`${$}view-hidden`),requestAnimationFrame(c),l=null,i.addEventListener("transitionend",function t(a){"height"!==a.propertyName&&"block-size"!==a.propertyName||(n.scrollTop=e,i.removeEventListener("transitionend",t))})}}else l=!0;null!==l&&i.classList.toggle(`${$}view-hidden`,l)})},V=(e,t,n)=>{const a=T.get(e);if(!a)return;const i=new Date(a.viewDate);"month"===n?i.setMonth(i.getMonth()+t):i.setFullYear(i.getFullYear()+t);const r=a.min&&i<a.min,l=a.max&&i>a.max;r||l?e.querySelector(`.${$}calendars`)?.animate([{transform:"translateX(0)"},{transform:`translateX(${r?8:-8}px)`},{transform:"translateX(0)"}],{duration:500,easing:"ease-in-out"}):(a.viewDate=i,O(e,a,"month"===n?t:0))},R=(m(x,{keydown:e=>{if(!(e instanceof KeyboardEvent&&e.target instanceof Element))return;const t=e.target.closest(x);if(t)switch(e.key){case"Enter":case" ":e.target instanceof HTMLInputElement&&"date"===e.target.type&&e.preventDefault();break;case"M":B(t,"months");break;case"Y":B(t,"years");break;case"PageUp":case"PageDown":V(t,"PageUp"===e.key?1:-1,e.shiftKey?"year":"month")}},initialize:e=>{if(e.dataset.miclinitialized)return;const t=e.querySelector("form"),n=e.querySelector(".micl-dialog__content");t&&n&&(e.dataset.miclinitialized="1",e.addEventListener("click",t=>{const n=t.target,a=n.closest("button");if(a){const t=a.parentElement?.classList.contains(`${$}month-selector`),n=a.classList.contains(`${$}next`),i=a.classList.contains(`${$}previous`);if(n||i)return void V(e,n?1:-1,t?"month":"year")}n.closest(`.${$}month`)&&B(e,"months"),n.closest(`.${$}year`)&&B(e,"years"),n.closest(`.${$}inputmode`)&&B(e,e.querySelector(`.${$}input.${$}view-hidden`)?"input":"calendars");const i=n.closest("time");if(i&&i.dateTime&&((e,t)=>{const n=T.get(e);if(!n)return;const a=t.split("-").map(Number);if(3===a.length){const t=new Date(a[0],a[1]-1,a[2]);n.range?n.selectedEnd||t<n.selected?(n.selected=t,n.selectedEnd=null):n.selectedEnd=t:n.selected=t,n.viewDate=new Date(t),O(e,n)}})(e,i.dateTime),n instanceof HTMLInputElement&&("miclmonth"===n.name||"miclyear"===n.name)){const t=T.get(e);if(t){const a=parseInt(n.value,10);"miclmonth"===n.name?t.viewDate.setMonth(a):t.viewDate.setFullYear(a),t.viewDate<t.min?t.viewDate=t.min:t.viewDate>t.max&&(t.viewDate=t.max),O(e,t),B(e,"calendars")}}}),e.addEventListener("focusout",t=>{const n=t.target;if(!(n instanceof HTMLInputElement&&n.closest(`.${$}input`)))return;const a=e.querySelectorAll(`.${$}input input`);((e,t,n)=>{const a=T.get(e);if(!a)return;const i=(e=>{const t=_();if(e.length!==t.length)return null;let n="",a="",i="";for(let r=0;r<t.length;r++)switch(t[r]){case"D":n+=e[r];break;case"M":a+=e[r];break;case"Y":i+=e[r]}const r=new Date(parseInt(i,10),parseInt(a,10)-1,parseInt(n,10));return H(r)?r:null})(n);i&&(a.range&&t>0?a.selectedEnd=i:a.selected=i,a.selectedEnd&&a.selectedEnd<a.selected&&([a.selected,a.selectedEnd]=[a.selectedEnd,a.selected]),a.viewDate=new Date(a.selected)),O(e,a)})(e,Array.prototype.indexOf.call(a,n),n.value)}),e.addEventListener("beforetoggle",t=>{if("open"!==t.newState)return;const n=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement;let a=document.activeElement;if((!n(a)||a.dataset.datepicker!==e.id&&a.popoverTargetElement!==e&&a.commandForElement!==e)&&(a=document.querySelector(`[data-datepicker="${e.id}"],[popovertarget="${e.id}"],[commandfor="${e.id}"]`)),!n(a))return;const i=e.classList.contains("micl-datepicker--range");let r=a,l=null;if(i&&a instanceof HTMLInputElement)if(a.dataset.miclrangeto){const e=document.getElementById(a.dataset.miclrangeto);l=e instanceof HTMLInputElement?e:null}else if(a.id){const e=document.querySelector(`input[data-miclrangeto="${a.id}"]`);e&&(l=a,r=e)}let o=new Date,s=null,c=new Date(1900,0,1),d=new Date(2099,11,31);if(r instanceof HTMLInputElement)o=P(r)||o,r.min&&(c=new Date(r.min)),r.max&&(d=new Date(r.max));else{const[e,t]=(r.value||r.textContent||"").split("/"),n=new Date(e);H(n)&&(o=n),i&&t&&(s=new Date(t))}l&&(s=P(l),l.max&&(d=new Date(l.max))),H(o)||(o=new Date),o=q(o),s&&H(s)?(s=q(s),s<o&&([o,s]=[s,o])):s=null;const m={invoker:r,invokerEnd:l,selected:o,selectedEnd:i?s:null,range:i,viewDate:new Date(o),min:c,max:d};T.set(e,m),((e,t,n)=>{const a=t.getFullYear(),i=n.getFullYear();["months","years"].forEach(r=>{const l=e.querySelector(`.${$}${r}`);if(!l)return;l.innerHTML="";const o=document.createDocumentFragment(),s=n.getMonth();if("months"===r){const e=[];let a=new Date(t.getFullYear(),t.getMonth(),1);for(;a<=n||a.getMonth()===s&&a.getFullYear()===i;)e.push(a.getMonth()),a.setMonth(a.getMonth()+1);[...new Set(e.sort((e,t)=>e-t))].forEach(e=>{const t=document.createElement("label");t.innerHTML=`<span class="material-symbols-outlined">check</span><input type="radio" name="miclmonth" value="${e}"> ${A.monthLong.format(new Date(2e3,e,1))}`,o.appendChild(t)})}else for(let e=a;e<=i;e++){const t=document.createElement("label");t.innerHTML=`<input type="radio" name="miclyear" value="${e}"> ${e}`,o.appendChild(t)}const c=document.createElement("div");c.className=`${$}${r}-inner`,l.appendChild(c).appendChild(o)})})(e,c,d),B(e,"calendars"),O(e,m)}),e.addEventListener("close",()=>{const t=T.get(e);if(!t?.invoker||""===e.returnValue)return;const n=t.selectedEnd||t.selected;t.range&&!t.invokerEnd?N(t.invoker,`${C(t.selected)}/${C(n)}`,`${t.selected.toLocaleDateString()} – ${n.toLocaleDateString()}`):(N(t.invoker,C(t.selected),t.selected.toLocaleDateString()),t.invokerEnd&&N(t.invokerEnd,C(n),n.toLocaleDateString()))}))}},HTMLDialogElement),e=>e?.matches(":has(input[type=checkbox]:checked)")),j=(m(".micl-list",{keydown(e){const t=e.target;if(!(e instanceof KeyboardEvent&&t?.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const n=t.parentElement;if(!n)return;const a=n instanceof HTMLDetailsElement;let i=[];if(a?i=Array.from(n.parentElement?.children||[]).map(e=>e.querySelector(":scope > summary")).filter(Boolean):["UL","OL"].includes(n.tagName)&&(i=Array.from(n.children).filter(e=>e instanceof HTMLLIElement&&"separator"!==e.getAttribute("role"))),i=i.filter(e=>!(e=>e?.classList.contains("micl-list-item--disabled"))(e)),!i.length)return;const r=i.indexOf(t);if(-1===r)return;let l=r;switch(e.key){case"ArrowDown":e.preventDefault(),l=(r+1)%i.length;break;case"ArrowUp":e.preventDefault(),l=(r-1+i.length)%i.length;break;case"Tab":if(!a){const e=i.findIndex(R);l=-1===e?0:e}break;case" ":case"Enter":if(a)break;" "===e.key&&e.preventDefault();const n=t.querySelector("input[type=checkbox], a[href], button");n instanceof HTMLInputElement?(n.checked=!n.checked,n.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))):n?.click()}l!==r&&(a||(t.setAttribute("tabindex","-1"),i[l].setAttribute("tabindex","0")),i[l].focus())},initialize(e){e.dataset.miclinitialized||(e.dataset.miclinitialized="1",e.querySelectorAll(":scope > details > summary.micl-list-item--disabled").forEach(e=>e.setAttribute("tabindex","-1")),e.querySelector('li[tabindex="0"]')&&e.querySelectorAll('li:not([role="separator"])').forEach(e=>{"0"!==e.getAttribute("tabindex")&&e.setAttribute("tabindex","-1"),e.querySelectorAll("a, button, input").forEach(e=>e.setAttribute("tabindex","-1")),(e=>e?.matches(":has(input[type=checkbox])"))(e)&&(e.setAttribute("role","option"),e.parentElement?.setAttribute("role","listbox"))}))}},HTMLElement),e=>Array.from(e.children).filter(e=>e instanceof HTMLLIElement&&"separator"!==e.getAttribute("role")&&!e.classList.contains("micl-list-item--disabled")&&e.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three"))),U=(m(".micl-menu[popover]",{initialize:e=>{if(!e.matches(".micl-menu[popover]")||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=document.querySelector(`[popovertarget="${e.id}"]`);t&&e.addEventListener("beforetoggle",n=>{if("open"!==n.newState)return;const a=n.source||t;requestAnimationFrame(()=>{e.matches(":popover-open")&&(e.style.transformOrigin=((e,t)=>{const n=e.getBoundingClientRect(),a=t.getBoundingClientRect();return(n.x+n.width/2>a.x+a.width/2?"right ":"left ")+(n.y+n.height/2>a.y+a.height/2?"bottom":"top")})(a,e))})}),e.addEventListener("keydown",t=>{if("ArrowDown"!==t.key&&"ArrowUp"!==t.key)return;const n=t.target;if(!(n instanceof HTMLElement&&n.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const a=n.parentElement;if(!a?.matches("ul.micl-list"))return;if(a.parentElement!==e)return;const i=Array.from(e.querySelectorAll(":scope > ul.micl-list"));if(i.length<2)return;const r=i.indexOf(a),l=j(a),o=l.indexOf(n);if(-1===o)return;let s;if("ArrowDown"===t.key&&o===l.length-1){const e=(r+1)%i.length;s=j(i[e])[0]}else if("ArrowUp"===t.key&&0===o){const e=(r-1+i.length)%i.length,t=j(i[e]);s=t[t.length-1]}s&&(t.preventDefault(),t.stopPropagation(),n.setAttribute("tabindex","-1"),s.setAttribute("tabindex","0"),s.focus())},!0),e.querySelectorAll(":scope > ul.micl-list > li > button[popovertarget]").forEach(e=>{if(e.popoverTargetElement?.matches(".micl-menu[popover]")){const t=e.popoverTargetElement,n=`--${t.id}`;let a;e.style.setProperty("anchor-name",n),t.style.insetBlockStart=`anchor(${n} start)`,t.style.insetInlineStart=`anchor(${n} end)`;const i=()=>{clearTimeout(a),a=setTimeout(()=>{e.matches(":hover")||t.matches(":hover")||t.hidePopover()},300)};e.addEventListener("mouseenter",()=>{clearTimeout(a),t.showPopover()}),e.addEventListener("mouseleave",i),t.addEventListener("mouseenter",()=>{clearTimeout(a)}),t.addEventListener("mouseleave",i)}})}},HTMLElement),"input[type=range][class*=micl-slider-]"),W=String.fromCharCode(8226),X=String.fromCharCode(8201),K=e=>e.parentElement?.classList.contains("micl-slider__container")?e.parentElement:null,J=(e,t)=>{e.dataset.miclsliderticks=t},G=e=>{let t=JSON.stringify(e.value+""),n=K(e);n&&(n.style.setProperty("--micl-slider-value",e.value),n.style.setProperty("--micl-slider-tip",t)),e.style.setProperty("--micl-slider-value",e.value),e.style.setProperty("--micl-slider-tip",t)},Q=(m(U,{initialize:e=>{if(!e.matches(U))return;(e=>{let t=e.max||"100";K(e)?.style.setProperty("--micl-slider-max",t),e.style.setProperty("--micl-slider-max",t)})(e),(e=>{let t=e.min||"0";K(e)?.style.setProperty("--micl-slider-min",t),e.style.setProperty("--micl-slider-min",t)})(e),G(e),(e=>{let t=K(e);if(t){const n=window.getComputedStyle(e);["--_handle-height","--_track-height"].forEach(e=>{t.style.setProperty(e,n.getPropertyValue(e))})}})(e);const t=parseFloat(e.max),n=parseFloat(e.min),a=e.getBoundingClientRect(),i=((e,t,n)=>{const a=[];return e.list&&t>n&&e.list.querySelectorAll("option[value]").forEach(e=>{let i=parseFloat(e.value);!isNaN(i)&&i>=n&&i<=t&&a.push(i)}),a})(e,t,n).sort((e,t)=>e-t).map(e=>Math.round(100*(e-n)/(t-n)));if(i.length>0){const t=document.createElement("canvas"),n=t.getContext("2d");if(n){n.font=window.getComputedStyle(e).getPropertyValue("font");let t=n.measureText(X).width,r=n.measureText(W).width,l=a.width-10,o=0,s="";i.forEach(e=>{let n=l*e/100,a=Math.round((n-o)/t)-1;for(let e=0;e<a;e++)s+=X,o+=t;s+=W,o+=r}),J(e,s)}t.remove()}else J(e,W)},input:e=>{e.target.matches(U)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&G(e.target)}},HTMLInputElement),".micl-snackbar"),Z=new WeakMap,ee=e=>{const t=Z.get(e);t&&t.timeoutid&&(clearTimeout(t.timeoutid),t.timeoutid=void 0)},te=e=>{ee(e);const t=Z.get(e);t&&(t.timeoutid=window.setTimeout(()=>{e.isConnected&&e.matches(":popover-open")&&e.hidePopover()},t.delay))},ne=(m(Q,{initialize:e=>{if(!e.matches(Q)||e.dataset.miclinitialized)return;const t=e.dataset.micldelay,n=t?parseInt(t,10):0;if(isNaN(n)||n<=0)return;e.dataset.miclinitialized="1";const a=()=>ee(e),i=t=>{"open"===t.newState?te(e):ee(e)},r=()=>{e.matches(":popover-open")&&te(e)};Z.set(e,{delay:n,boundHandleToggle:i,boundClearTimer:a,boundHandleMouseLeave:r}),e.addEventListener("toggle",i),e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",r)},cleanup:e=>{const t=Z.get(e);t&&(ee(e),e.removeEventListener("toggle",t.boundHandleToggle),e.removeEventListener("mouseenter",t.boundClearTimer),e.removeEventListener("mouseleave",t.boundHandleMouseLeave),Z.delete(e)),delete e.dataset.miclinitialized}},HTMLElement),e=>"willValidate"in e),ae=e=>{const t=e.target;ne(t)&&t.setCustomValidity("")},ie=e=>{const t=e.dataset.miclvalidateMessage||"";if(t&&e.matches("[data-miclvalidate-checkboxes-name]")){const n=e.dataset.miclvalidateCheckboxesName||"",a=e.dataset.miclvalidateCheckboxesCountEqual||"",i=e.dataset.miclvalidateCheckboxesCountMax||"",r=e.dataset.miclvalidateCheckboxesCountMin||"";if(n&&(a||i||r)){const l=e.querySelectorAll(`input[type="checkbox"][name="${n}"]:checked`).length,o=parseInt(a,10),s=parseInt(i,10),c=parseInt(r,10);let d=!isNaN(o)&&l!=o||!isNaN(s)&&l>s||!isNaN(c)&&l<c;e.setCustomValidity(d?t:"");const m=e.querySelector(`input[type="checkbox"][name="${n}"]`);m&&(m.setCustomValidity(d?t:""),d?m.addEventListener("change",ae):m.removeEventListener("change",ae))}}},re=(e,t)=>{let n=!1;return e.querySelectorAll("fieldset").forEach(ie),Array.from(e.elements).forEach(e=>{if(ne(e)&&e.willValidate){e.checkValidity()||(n=!0);let a=(e=>{if(!e.parentElement||!ne(e))return!1;let t=!1;return e instanceof HTMLInputElement&&"checkbox"===e.type&&e.classList.contains("micl-checkbox")?t=(e=>(e.classList.toggle("micl-checkbox--error",!!e.validationMessage),!1))(e):(e.parentElement.classList.contains("micl-textfield-outlined")||e.parentElement.classList.contains("micl-textfield-filled"))&&(t=((e,t)=>{e.classList.toggle("micl-textfield--error",!!t);const n=e.querySelector(".micl-textfield__supporting-text");return n&&(t?(n.dataset.micltext||(n.dataset.micltext=n.textContent),n.textContent=t):"micltext"in n.dataset&&(n.textContent=n.dataset.micltext||"")),!!t&&!!n})(e.parentElement,e.validationMessage)),t})(e);!a&&t&&e.reportValidity()}}),!n},le=".micl-stepper",oe=".micl-stepper__action-back,.micl-stepper__action-next",se=".micl-stepper__header button[role=tab][aria-controls]",ce="micl-stepper__step",de="."+ce,me=e=>e.querySelector(`${de}[aria-current=step]`)||pe(e,e.querySelector(de)),ue=(e,t)=>Array.from(e.querySelectorAll(de)).indexOf(t)+1,pe=(e,t)=>{if(!t)return null;let n=0;e.querySelectorAll(de).forEach((e,a)=>{e.setAttribute("aria-current",e===t?"step":"false"),e===t&&(n=a)});const a=e.querySelectorAll(se).item(n);return e.querySelectorAll(se).forEach(e=>{e.setAttribute("aria-selected",e===a?"true":"false")}),fe(e,t),t},he=e=>{const t=e.currentTarget;"transform"===e.propertyName&&t&&(t.classList.remove("micl-stepper__step--fromselected","micl-stepper__step--toselected"),t.removeEventListener("transitionend",he))},ge=e=>e.classList.contains("micl-stepper__action-back"),fe=(e,t)=>{((e,t)=>{Array.from(e.querySelectorAll(oe)).forEach(e=>{const n=ge(e)?"previousElementSibling":"nextElementSibling",a=t[n]?.classList.contains(ce);e.classList.toggle("micl-stepper__action--hidden",!a)})})(e,t),((e,t)=>{const n=e.querySelectorAll(de).length,a=ue(e,t);e.querySelectorAll("[data-step]").forEach(e=>{const t=parseInt(e.dataset.step||"0",10);e.classList.toggle("micl-stepper__step--hidden",t>0?t!=a:n+t+1!=a)})})(e,t),((e,t)=>{const n=ue(e,t),a=e.querySelectorAll(de).length,i=!e.classList.contains("micl-stepper--nonlinear"),r=(t,n)=>{e.querySelectorAll(t).forEach(e=>{e.textContent=n})};r(".micl-stepper__progress-current",`${n}`),r(".micl-stepper__progress-total",`${a}`),e.querySelectorAll(".micl-stepper__progress-dots").forEach(e=>{const t=document.createDocumentFragment();e.innerHTML="";for(let e=1;e<=a;e++){let a=document.createElement("span");a.classList.add("micl-stepper__progress-dot"),(i&&e<=n||!i&&e===n)&&a.classList.add("micl-stepper__progress--done"),t.appendChild(a)}e.appendChild(t)}),e.querySelectorAll(se).forEach((e,t)=>{e.classList.toggle("micl-stepper__progress--done",i?t+1<=n:t+1===n)})})(e,t)},ye=(m(le,{initialize:e=>{if(!e.matches(le)||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=me(e),n=e.querySelector(".micl-stepper__header");t&&(fe(e,t),n?.querySelectorAll("button[role=tab][aria-controls]").forEach((t,n)=>{t.style.setProperty("--micl-stepper-anchor",`--micl-step-${n}`),n>0&&t.style.setProperty("--micl-stepper-prev","--micl-step-"+(n-1)),t.addEventListener("click",()=>{if("ariaControlsElements"in Element.prototype&&t.ariaControlsElements)pe(e,t.ariaControlsElements[0]);else{const n=t.getAttribute("aria-controls");n&&pe(e,document.getElementById(n))}})})),Array.from(e.querySelectorAll(oe)).forEach(t=>{t.addEventListener("click",function(t){const n=ge(this),a=me(e);if(!a||!n&&a instanceof HTMLFieldSetElement&&(r=!0,ie(i=a),!re(i,r)))return void(n||t.stopImmediatePropagation());var i,r;const l=a[n?"previousElementSibling":"nextElementSibling"];l?.classList.contains(ce)&&((e,t,n)=>{t.addEventListener("transitionend",he),t.classList.add("micl-stepper__step--fromselected"),t.offsetHeight,n.addEventListener("transitionend",he),n.classList.add("micl-stepper__step--toselected"),n.offsetHeight,pe(e,n)})(e,a,l)},!0)}),e instanceof HTMLFormElement&&e.addEventListener("submit",t=>{t.submitter?.classList.contains("micl-form--dosubmit")||t.preventDefault(),re(e,!0)||t.stopImmediatePropagation()},!0)}},HTMLElement),".micl-textfield-outlined > input,.micl-textfield-filled > input"),ve=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",Ee=".micl-textfield-filled > select,.micl-textfield-outlined > select",Le=`${ye},${Ee},${ve}`,be=e=>{if(!e.parentElement||e instanceof HTMLSelectElement||!e.maxLength)return;const t=e.parentElement.querySelector(".micl-textfield__character-counter");t&&(t.textContent=`${e.value.length}/${e.maxLength}`)},we=e=>{e.target.matches(Le)&&e.target.dataset.miclinitialized&&!e.target.disabled&&(e.target instanceof HTMLInputElement&&e.target.dataset.micldateformat&&((e,t)=>{const n=(e.dataset.micldateformat||"").match(/([DMY]{2,4})([^DMY])?([DMY]{2,4})([^DMY])?([DMY]{2,4})/);if(!n)return;const a=[{type:n[1],length:n[1].length,separator:n[2]||""},{type:n[3],length:n[3].length,separator:n[4]||""},{type:n[5],length:n[5].length,separator:""}];e.maxLength=a.reduce((e,t)=>e+t.length+(t.separator?1:0),0);let i=e.value.replace(/\D/g,""),r="",l=0,o=e.selectionStart||0;for(let e=0;e<a.length;e++){const t=a[e];if(i.length<l)break;const n=i.substring(l,l+t.length);r+=n,l+=n.length,n.length===t.length&&t.separator&&(r+=t.separator)}const s=e.value.length;e.value=r.substring(0,e.maxLength);const c=e.value.length;t?.startsWith("deleteContent")?o>0&&e.setSelectionRange(o,o):c>s&&c>o?e.setSelectionRange(c,c):e.setSelectionRange(o,o)})(e.target,e.inputType),e.target.value?e.target.dataset.miclvalue="1":delete e.target.dataset.miclvalue,be(e.target))},Se={initialize:e=>{if(!e.dataset.miclinitialized){if(e.dataset.miclinitialized="1",e.value&&(e.dataset.miclvalue="1"),e instanceof HTMLSelectElement&&e.multiple&&!CSS.supports("appearance","base-select")&&e.addEventListener("mousedown",t=>{const n=t.target instanceof Element&&t.target.closest("option");if(n&&!n.disabled&&!t.shiftKey){t.preventDefault();const a=e.scrollTop;n.selected=!n.selected,e.focus(),e.scrollTop=a,e.dispatchEvent(new Event("change",{bubbles:!0}))}}),e instanceof HTMLSelectElement&&!e.multiple){const t=()=>{const t=e.getBoundingClientRect(),n=t.top,a=window.innerHeight-t.bottom;!e.matches(":open")&&e.style.setProperty("--micl-select-picker-origin",n>a?"bottom":"top")};e.addEventListener("mousedown",t),e.addEventListener("keydown",t)}if(e.matches("input[type=time][data-timepicker],input[type=date][data-datepicker]")){const t=document.getElementById(e.dataset.timepicker||e.dataset.datepicker||"");if(t instanceof HTMLDialogElement){const n=e=>{e.preventDefault(),t.showModal()};e.addEventListener("click",n),e.addEventListener("keydown",e=>{const t=e.key;"Enter"!==t&&" "!==t||n(e)})}}be(e)}},change:we,input:we};m(ye,Se,HTMLInputElement),m(ve,Se,HTMLTextAreaElement),m(Ee,Se,HTMLSelectElement);const ke="micl-timepicker__",xe="micl-timepicker__dial--hidden",$e="micl-timepicker--selected",De=(()=>{try{const e=new Intl.DateTimeFormat(void 0,{hour:"numeric"}).resolvedOptions().hourCycle;return"h11"===e||"h12"===e}catch(e){return!1}})(),Te=(e,t)=>e.querySelector(t),Me=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,Ae=e=>!!e&&!e.classList.contains(xe),qe=(e,t)=>{e.classList.toggle($e,t)},Ce=e=>document.querySelector(`[data-timepicker="${e.id}"],[popovertarget="${e.id}"],[commandfor="${e.id}"]`),_e=e=>"hour"===e?{min:De?1:0,max:De?12:23}:{min:0,max:59},Ie=(e,t,n)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove(`${ke}time--selected`));const a=e.querySelector(`data[data-${t}][value="${n}"]`);let i="";a?(i=window.getComputedStyle(a).getPropertyValue("--micl-angle"),a.classList.add(`${ke}time--selected`)):"minute"===t&&(i=`${Math.round(360*parseInt(n,10)/60-90)}deg`),i&&e.style.setProperty("--micl-angle",i)},He=(e,t,n,a,i=!0)=>{let r=parseInt(n||"0",10);if(isNaN(r))return;const l=Te(e,`input[name=${t}]`);if(l){if("hour"===t&&a&&De){const t=e.querySelector(`.${ke}am`),n=e.querySelector(`.${ke}pm`);r>=12?(n&&(n.checked=!0),r>12&&(r-=12)):(t&&(t.checked=!0),0===r&&(r=12))}if(l.value=`${r}`.padStart(2,"0"),i){const n=Te(e,`.${ke}dial`);if(!n)return;Ie(n,t,l.value)}}},Pe=(e,t,n)=>{if("ArrowDown"!==n.key&&"ArrowUp"!==n.key)return;n.preventDefault();const{max:a,min:i}=_e(t.name);let r=parseInt(t.value,10)||0;if(r+="ArrowUp"===n.key?1:-1,(r<i||r>a)&&(r=r<i?a:i,"hour"===t.name&&De)){const t=e.querySelector("input[name=period]:not(:checked)");t?.click()}He(e,t.name,`${r}`)},Ne=(m("dialog.micl-dialog.micl-timepicker",{initialize:e=>{if(e.dataset.miclinitialized)return;const t=Te(e,"form"),n=Te(e,`.${ke}inputmode`),a=Te(e,`.${ke}dial`),i=[Te(e,"input[name=hour]"),Te(e,"input[name=minute]")].filter(e=>null!==e);if(!t||i.length<2)return;e.dataset.miclinitialized="1",i.forEach((t,n)=>{(e=>{const{min:t,max:n}=_e(e.name);let a;a="hour"===e.name?De?"(0[1-9]|1[0-2])":"(0[0-9]|1[0-9]|2[0-3])":"(0[0-9]|[1-5][0-9])";const i={maxlength:"2",pattern:a,inputmode:"numeric",autocomplete:"off",role:"spinbutton",min:String(t),max:String(n)};for(const t in i)e.setAttribute(t,i[t])})(t),a&&t.toggleAttribute("readonly",Ae(a)),t.addEventListener("keydown",Pe.bind(null,e,t)),t.addEventListener("focus",()=>{qe(i[0===n?1:0],!1),qe(t,!0),a&&(((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(`${ke}dial-inner`)&&e.classList["hour"===t?"remove":"add"](xe)})})(a,t.name),Ie(a,t.name,t.value))}),t.addEventListener("blur",()=>{Ae(a)||((e=>{const{max:t,min:n}=_e(e.name);let a=parseInt(e.value,10);isNaN(a)&&(a=n),a>t&&(a=t),a<0&&(a=n),e.value=String(a).padStart(2,"0")})(t),qe(t,!1))})});const r=e.querySelector(`.${ke}period`);if(r&&De&&(["am","pm"].forEach(e=>{let t=document.createElement("input");t.type="radio",t.name="period",t.className=`${ke}${e}`,t.value=e,t.ariaLabel=e.toUpperCase(),r.appendChild(t)}),r.classList.toggle(xe,!De)),n?.addEventListener("click",()=>{a?.classList.toggle(xe),i.forEach(e=>{e.toggleAttribute("readonly",Ae(a))}),Ae(a)&&i[0].focus()}),a){(e=>{let t=De?300:270;for(let n=De?1:0;n<=(De?12:23);n++){const a=document.createElement("data");a.value=`${n}`.padStart(2,"0"),a.textContent=`${n}`,a.dataset.hour=`${n}`,a.style.setProperty("--micl-angle",`${t}deg`),!De&&n>=12?a.classList.add(`${ke}dial-inner`):a.dataset.minute=""+5*n%60,e.appendChild(a),t=(t+30)%360}const n=document.createElement("span");n.className=`${ke}track`,e.appendChild(n)})(a);const t=(t,n)=>{const a=document.elementFromPoint(t,n);a&&"DATA"===a.tagName&&He(e,e.querySelector(`input[name=hour].${$e}`)?"hour":"minute",a.value)};a.addEventListener("pointerdown",e=>{a.classList.add(`${ke}dial--dragging`),t(e.clientX,e.clientY),a.setPointerCapture(e.pointerId)}),a.addEventListener("pointermove",e=>{a.classList.contains(`${ke}dial--dragging`)&&t(e.clientX,e.clientY)});const n=e=>{a.classList.remove(`${ke}dial--dragging`),a.releasePointerCapture(e.pointerId)};a.addEventListener("pointerup",n),a.addEventListener("pointercancel",n)}e.addEventListener("beforetoggle",t=>{if("open"===t.oldState)return;let n=document.activeElement;if((!Me(n)||n.dataset.timepicker!==e.id&&n.popoverTargetElement!==e&&n.commandForElement!==e)&&(n=Ce(e)),!Me(n))return;e._miclInvoker=n;const a=(n.value||n.textContent).split(":");2===a.length&&(He(e,"hour",a[0],!0),He(e,"minute",a[1],!1,!1))}),e.addEventListener("close",()=>{if(!e.returnValue)return;let n=e._miclInvoker;if(n||(n=Ce(e)),!Me(n))return;const a=t.elements;let i=parseInt(a.namedItem("hour")?.value||"0",10);if(isNaN(i))return;De&&(i%=12,"pm"===a.namedItem("period")?.value&&(i+=12));const r=parseInt(a.namedItem("minute")?.value||"0",10);if(isNaN(r))return;const l=`${i}`.padStart(2,"0")+":"+`${r}`.padStart(2,"0");n.value=l,n instanceof HTMLInputElement?(n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new Event("input",{bubbles:!0}))):n.textContent=l})}},HTMLDialogElement),p);return t})());
|
|
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";const e={d:(t,n)=>{if(Array.isArray(n))for(var i=0;i<n.length;){var a=n[i++],r=n[i++];e.o(t,a)?0===r&&i++:0===r?Object.defineProperty(t,a,{enumerable:!0,value:n[i++]}):Object.defineProperty(t,a,{enumerable:!0,get:r})}else for(var a in n)e.o(n,a)&&!e.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:n[a]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}};let t={};e.r(t),e.d(t,{default:()=>ct});const n=globalThis.__miclRegistry??={map:{},rippled:new WeakSet,activated:!1},i=()=>Object.keys(n.map).join(","),a=e=>Object.entries(n.map).find(([t,{type:n}])=>e.matches(t)&&e instanceof n)?.[1],r=e=>{const t=a(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},l=e=>{const t=i();t&&e.querySelectorAll(t).forEach(r),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 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)}),n.rippled.add(e))}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())},o=e=>{const t=a(e);t&&"function"==typeof t.component.cleanup&&t.component.cleanup(e)},s=e=>{const t=i();t&&e.querySelectorAll(t).forEach(o)},c=e=>{const t=i();if(!t)return;const n=e.target.closest(t);if(!(n instanceof HTMLElement))return;const r=a(n),l=e.type;r&&"function"==typeof r.component[l]&&r.component[l]?.(e)},d=()=>{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)&&r(e),t&&e.querySelectorAll(t).forEach(r)}}),e.removedNodes.forEach(e=>{if(e instanceof HTMLElement){const t=i();t&&e.matches(t)&&o(e),s(e)}}))})}).observe(document.body,{childList:!0,subtree:!0}),l(document),document.addEventListener("change",c),document.addEventListener("input",c),document.addEventListener("keydown",c))},m=(e,t,i)=>(n.map[e]={component:t,type:i},n.activated&&document.querySelectorAll(e).forEach(r),t),u=()=>{document.removeEventListener("DOMContentLoaded",u),d()};"loading"!==document.readyState?d():document.addEventListener("DOMContentLoaded",u);const p={initialize:()=>l(document),cleanup:()=>s(document)},h="dialog.micl-bottomsheet",g=new WeakMap,f=e=>{delete e.dataset.miclfitheight,e.style.removeProperty("--md-comp-bottomsheet-height")},v=e=>(e.getAnimations().forEach(e=>e.finish()),e.getBoundingClientRect().height),y=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10);t<1&&(t=v(e),e.dataset.miclfitheight=`${t}`);let n=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10)||1/0,i=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=n);return[...new Set(i.concat([Math.min(t,n)]).sort((e,t)=>e-t))]},E=(e,t)=>{t<1?(f(e),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-comp-bottomsheet-height",`${t}px`)},b=(m(h,{initialize:e=>{if(!e.matches(h)||e.dataset.miclinitialized)return;const t=e.querySelector(".micl-bottomsheet__headline");if(!t)return;e.dataset.miclinitialized="1";const n=t.querySelector(".micl-bottomsheet__draghandle"),i=new AbortController,a={signal:i.signal};g.set(e,i);let r,l,o=!1,s=!1,c=!1;function d(t){const n=t.clientY;if(o&&Math.abs(r-n)>4&&(o=!1,s=!0,e.classList.add("micl-bottomsheet--resizing")),s){const t=Math.max(1,l+r-n),i=y(e).find(e=>e>0&&Math.abs(e-t)<=12);E(e,i||t)}}function m(t){const n=s;if(o=!1,s=!1,e.classList.remove("micl-bottomsheet--resizing"),document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",m),document.removeEventListener("pointercancel",m),n){c=!0;const n=e.getBoundingClientRect().height,i=n<48&&"pointerup"===t.type;E(e,i?0:((e,t)=>{const n=y(e).filter(e=>e>0);return n.reduce((e,n)=>Math.abs(n-t)<Math.abs(e-t)?n:e,n[0]??t)})(e,n))}}e.addEventListener("beforetoggle",t=>{"open"===t.newState&&f(e)},a),n?.addEventListener("click",t=>{c&&t.detail||E(e,(e=>{let t=v(e),n=y(e);return n.filter(e=>e>t+4)[0]||n[0]})(e))},a),t.addEventListener("pointerdown",i=>{i.target!==t&&i.target!==n||(o=!0,c=!1,i.preventDefault(),r=i.clientY,l=v(e),document.addEventListener("pointermove",d,a),document.addEventListener("pointerup",m,a),document.addEventListener("pointercancel",m,a))},a)},cleanup:e=>{const t=g.get(e);t&&(t.abort(),g.delete(e)),e.classList.remove("micl-bottomsheet--resizing"),f(e),delete e.dataset.miclinitialized}},HTMLDialogElement),".micl-button--toggle"),L=e=>{const t=e.querySelector(".micl-button__icon")??e,n="true"===e.getAttribute("aria-pressed");t.dataset.micliconselected&&t.classList.toggle(t.dataset.micliconselected,n),t.dataset.miclicon&&t.classList.toggle(t.dataset.miclicon,!n)},w=(m(b,{command:e=>{const t=e.target;t.matches(b)&&!t.disabled&&"--micl-toggle"===e.command&&(t.classList.add("micl-button--toggled"),t.setAttribute("aria-pressed",String("true"!==t.getAttribute("aria-pressed"))),L(t))},initialize:function(e){e.matches(b)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",L(e),e.addEventListener("command",this.command))},cleanup:function(e){e.matches(b)&&(e.removeEventListener("command",this.command),delete e.dataset.miclinitialized)}},HTMLButtonElement),".micl-checkbox-group");let S=!1;const k=e=>{for(const t of e.querySelectorAll(".micl-checkbox__parent"))if(t.closest(w)===e)return t;return null},x=(e,t,n,i)=>{e.checked===t&&e.indeterminate===n||(e.checked=t,e.indeterminate=n,i.push(e))},$=(e,t)=>{const n=k(e);if(!n)return"empty";let i=0,a=0,r=0;e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(l=>{if(l!==n){const n=l.closest(w);if(n===e)l.disabled||(i++,l.indeterminate?r++:l.checked&&a++);else if(l.classList.contains("micl-checkbox__parent")&&n?.parentElement?.closest(w)===e){const e=$(n,t);"empty"!==e&&(i++,"all"===e?a++:"some"===e&&r++)}}});let l=i>0?"none":"empty";return r>0||a>0&&a<i?l="some":i>0&&a===i&&(l="all"),x(n,"all"===l,"some"===l,t),l},D=(e,t,n)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(i=>{const a=i.closest(w);a===e?i.disabled||x(i,t,!1,n):i.classList.contains("micl-checkbox__parent")&&a?.parentElement?.closest(w)===e&&D(a,t,n)})},A=(e,t)=>{const n=k(e);if(!n)return;const i=[];t===n&&D(e,t.checked,i);let a,r=e;do{a=r,r=r.parentElement?.closest(w)}while(r);if($(a,i),t&&i.length){S=!0;try{i.forEach(e=>e.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})))}finally{S=!1}}},M=e=>{const t=e.currentTarget,n=e.target;!S&&n.classList.contains("micl-checkbox")&&n.closest(w)===t&&A(t,n)},T=(m(w,{initialize:e=>{e.matches(w)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",e.addEventListener("change",M),A(e,null))},cleanup:e=>{e.matches(w)&&(e.removeEventListener("change",M),delete e.dataset.miclinitialized)}},HTMLElement),"dialog.micl-dialog.micl-datepicker"),_="micl-datepicker__",q="micl-datepicker__no-transition",C=new WeakMap,I=new WeakMap,P=(new Intl.DateTimeFormat).resolvedOptions().locale,H={input:new Intl.DateTimeFormat(P,{year:"numeric",month:"2-digit",day:"2-digit"}),header:new Intl.DateTimeFormat(P,{weekday:"short",day:"numeric",month:"short"}),cell:new Intl.DateTimeFormat(P,{weekday:"long",year:"numeric",month:"long",day:"numeric"}),monthLong:new Intl.DateTimeFormat(P,{month:"long"}),monthShort:new Intl.DateTimeFormat(P,{month:"short"}),weekdayNarrow:new Intl.DateTimeFormat(P,{weekday:"narrow"}),weekdayLong:new Intl.DateTimeFormat(P,{weekday:"long"})},N=(e,t,n)=>{const i=new Date(e,t,n);return i.setFullYear(e,t,n),i},z=e=>N(e.getFullYear(),e.getMonth(),e.getDate()),F=(e,t)=>new Date(e,t+1,0).getDate(),Y=e=>12*e.getFullYear()+e.getMonth(),O=(e,t)=>{const n=N(e.getFullYear(),e.getMonth()+t,1),i=n.getFullYear(),a=n.getMonth();return N(i,a,Math.min(e.getDate(),F(i,a)))},V=(e,t,n)=>N(t,n,Math.min(e.getDate(),F(t,n))),j=(e,t,n)=>e<t?new Date(t):e>n?new Date(n):new Date(e),B=(e,t,n)=>Y(e)<Y(t)?V(e,t.getFullYear(),t.getMonth()):Y(e)>Y(n)?V(e,n.getFullYear(),n.getMonth()):new Date(e),W=e=>{const t=/^(\d{4,6})-(\d{2})-(\d{2})/.exec(e.trim());if(!t)return null;const n=parseInt(t[2],10)-1,i=parseInt(t[3],10),a=N(parseInt(t[1],10),n,i);return a.getMonth()===n&&a.getDate()===i?a:null},R=e=>{const t=(e.getMonth()+1).toString().padStart(2,"0"),n=e.getDate().toString().padStart(2,"0");return`${e.getFullYear()}-${t}-${n}`},U=(()=>{try{const e=new Intl.Locale(P).getWeekInfo?.();if(e)return 7===e.firstDay?0:e.firstDay}catch{}return/US|CA|MX/i.test(P)?0:1})(),K=H.input.formatToParts(new Date(2025,0,15)).map(e=>{switch(e.type){case"day":return"DD";case"month":return"MM";case"year":return"YYYY";case"literal":return e.value;default:return""}}).join("").trim(),X=e=>{const t=W(e.value);if(t)return t;if(!e.value)return null;const n=new Date(e.value);return isNaN(n.getTime())?null:z(n)},J=(e,t)=>{if(e)if(e.firstElementChild){let n=e.firstChild;for(;n;){if(n.nodeType===Node.TEXT_NODE)return void(n.nodeValue=t);n=n.nextSibling}e.appendChild(document.createTextNode(t))}else e.textContent=t},G=(e,t,n)=>{e.value=t,e instanceof HTMLInputElement?(e.dispatchEvent(new Event("input",{bubbles:!0})),e.dispatchEvent(new Event("change",{bubbles:!0}))):J(e,n)},Q=(e,t)=>{const n=(N(e,t,1).getDay()-U+7)%7,i=N(e,t,1-n);return Array.from({length:42},(e,n)=>{const a=N(i.getFullYear(),i.getMonth(),i.getDate()+n);return{date:a,val:R(a),isCurrentMonth:a.getMonth()===t}})},Z=(e,t,n,i=!1)=>{if(i){e.setAttribute("role","grid"),e.appendChild((()=>{const e=new Date;e.setDate(e.getDate()-(e.getDay()-U+7)%7);const t=document.createElement("div");t.setAttribute("role","row");for(let n=0;n<7;n++){const n=document.createElement("span"),i=H.weekdayLong.format(e);n.setAttribute("role","columnheader"),n.setAttribute("aria-label",i),n.textContent=H.weekdayNarrow.format(e),n.title=i,t.appendChild(n),e.setDate(e.getDate()+1)}return t})());for(let t=0;t<6;t++){const t=document.createElement("div");t.setAttribute("role","row");for(let e=0;e<7;e++){const e=document.createElement("time");e.setAttribute("role","gridcell"),t.appendChild(e)}e.appendChild(t)}}const a=z(new Date).getTime(),r=n.selected.getTime(),l=n.selectedEnd?.getTime(),o=n.focusDate.getTime(),s=n.min.getTime(),c=n.max.getTime();let d=!1;if(e.querySelectorAll("time").forEach((e,n)=>{const i=t[n],m=i.date.getTime();e.dateTime=i.val,e.textContent=i.date.getDate().toString(),e.setAttribute("aria-label",H.cell.format(i.date));const u=m===r||m===l,p=!i.isCurrentMonth||m<s||m>c;e.className="",i.isCurrentMonth||e.classList.add(`${_}outside`),u&&e.classList.add(`${_}selected`),m===a&&e.classList.add(`${_}today`),p&&e.classList.add(`${_}disabled`),p?(e.setAttribute("aria-disabled","true"),e.removeAttribute("aria-selected")):(e.removeAttribute("aria-disabled"),e.setAttribute("aria-selected",String(u))),m===a?e.setAttribute("aria-current","date"):e.removeAttribute("aria-current");const h=!p&&!d&&m===o;e.tabIndex=h?0:-1,d=d||h,void 0!==l&&l!==r&&(m===r?e.classList.add(`${_}range-start`):m===l?e.classList.add(`${_}range-end`):m>r&&m<l&&e.classList.add(`${_}inrange`))}),!d){const t=e.querySelector(`time:not(.${_}disabled)`);t&&(t.tabIndex=0)}},ee=e=>{const t=document.createElement("div"),n=document.createElement("div");return t.className=`${_}calendar`,n.className=`${_}calendar-inner`,Z(n,Q(e.viewDate.getFullYear(),e.viewDate.getMonth()),e,!0),t.appendChild(n),t},te=e=>{const t=I.get(e);t&&(I.delete(e),t())},ne=e=>{e.querySelector(`.${_}calendar time[tabindex="0"]`)?.focus({preventScroll:!0})},ie=e=>{const t=e.closest('[class*="micl-textfield"]')?.querySelector(".micl-textfield__supporting-text");!t||!t.dataset.miclhint&&t.textContent?.trim()||(t.dataset.miclhint="1",t.textContent=K)},ae=(e,t)=>{e.closest('[class*="micl-textfield"]')?.classList.toggle("micl-textfield--error",t),t?(e.setAttribute("aria-invalid","true"),e.dataset.miclinvalid="1"):(e.removeAttribute("aria-invalid"),delete e.dataset.miclinvalid)},re=(e,t,n=0)=>{const i=e.querySelector(".micl-dialog__content"),a=i?.querySelector(`.${_}calendars`);if(!a)return;const r="micl-startleft",l="micl-startright",o="micl-moveleft",s="micl-moveright";te(a),a.classList.remove(o,s,r,l);const c=Array.from(a.querySelectorAll(`.${_}calendar`));if(c.slice(1).forEach(e=>e.remove()),0!==n&&c.length){const e=c[0],i=ee(t),d=n>0;e.querySelectorAll("time").forEach(e=>{e.tabIndex=-1}),d?a.appendChild(i):a.prepend(i);const m=d?r:l,u=d?o:s,p=(e=>{const t=window.getComputedStyle(e).transitionDuration.split(",")[0].trim(),n=parseFloat(t)*(t.endsWith("ms")?1:1e3);return isNaN(n)?500:n})(a);a.classList.add(q,m),a.offsetWidth;let h=!1,g=0;const f=e=>{"transform"===e.propertyName&&te(a)};I.set(a,()=>{h=!0,window.clearTimeout(g),a.removeEventListener("transitionend",f),a.removeEventListener("transitioncancel",f),a.classList.add(q),a.classList.remove(o,s,r,l),e.remove(),a.offsetWidth,a.classList.remove(q)}),requestAnimationFrame(()=>{h||(a.classList.remove(q,m),a.classList.add(u))}),a.addEventListener("transitionend",f),a.addEventListener("transitioncancel",f),g=window.setTimeout(()=>te(a),p+100)}else{let e=c[0];if(e){const n=e.querySelector(`.${_}calendar-inner`);n&&Z(n,Q(t.viewDate.getFullYear(),t.viewDate.getMonth()),t,0===n.querySelectorAll("time").length)}else e=a.appendChild(ee(t))}i?.querySelectorAll(`.${_}input input`).forEach((e,n)=>{if(e.dataset.micldateformat||(e.dataset.micldateformat=K),ie(e),e.dataset.miclinvalid)return;const i=0===n?t.selected:t.selectedEnd;e.value=i?H.input.format(i):"",e.value?e.dataset.miclvalue="1":delete e.dataset.miclvalue}),J(e.querySelector("h1, h2, h3, h4, h5, h6, .micl-heading"),t.range?`${H.header.format(t.selected)} – ${t.selectedEnd?H.header.format(t.selectedEnd):""}`:H.header.format(t.selected)),J(e.querySelector(`.${_}month`),H.monthShort.format(t.viewDate)),J(e.querySelector(`.${_}year`),t.viewDate.toLocaleDateString(P,e.classList.contains("micl-dialog--docked")?{year:"numeric"}:{month:"long",year:"numeric"}));const d=t.viewDate.getFullYear();e.querySelectorAll(`.${_}months input`).forEach(e=>{const n=12*d+parseInt(e.value,10);e.disabled=n<Y(t.min)||n>Y(t.max),e.checked=parseInt(e.value,10)===t.viewDate.getMonth()});const m=e.querySelector(`.${_}years input[value="${d}"]`);m&&(m.checked=!0)},le=(e,t)=>{"months"!==t&&"years"!==t||e.querySelector(`.${_}${t}.${_}view-hidden`)||(t="calendars"),["calendars","input","month-selector","year-selector"].forEach(n=>{let i="input"===t;"calendars"!==n&&"input"!==n||(i=t!==n),e.querySelector(`.${_}${n}`)?.classList.toggle(`${_}view-hidden`,i)});const n=e.querySelector(".micl-dialog__content");if(!n)return;const i=parseInt(window.getComputedStyle(n).getPropertyValue("max-block-size"),10);["months","years"].forEach(e=>{const a=n.querySelector(`.${_}${e}`);if(!a)return;const r=a.querySelector("input:checked");let l=!1;if(r&&e===t){const e=window.getComputedStyle(a).getPropertyValue("transition-duration"),t=parseFloat(e)*(e.includes("ms")?1:1e3),o=a.scrollHeight-i,s=(i-48)/2;if(r.offsetTop>s){let e=r.offsetTop-s-24;e>o&&(e=o);const i=performance.now(),c=a=>{const r=t>0?Math.min((a-i)/t,1):1;n.scrollTop=e*r,r<1&&requestAnimationFrame(c)};a.classList.remove(`${_}view-hidden`),requestAnimationFrame(c),l=null,a.addEventListener("transitionend",function t(i){"height"!==i.propertyName&&"block-size"!==i.propertyName||(n.scrollTop=e,a.removeEventListener("transitionend",t))})}}else l=!0;null!==l&&a.classList.toggle(`${_}view-hidden`,l)})},oe=(e,t,n)=>{const i=C.get(e);if(!i)return;const a="month"===n?t:12*t,r=O(i.viewDate,a),l=Y(r),o=l<Y(i.min),s=l>Y(i.max);o||s?((e,t)=>{const n=e.querySelector(`.${_}calendars`);if(!n)return;const i=`${_}nudge-${t?"min":"max"}`;n.classList.remove(`${_}nudge-min`,`${_}nudge-max`),n.offsetWidth,n.classList.add(i),n.addEventListener("animationend",()=>n.classList.remove(i),{once:!0})})(e,o):(i.viewDate=r,i.focusDate=j(O(i.focusDate,a),i.min,i.max),re(e,i,"month"===n?t:0))},se=(e,t)=>{const n=C.get(e),i=W(t);!n||!i||i<n.min||i>n.max||(n.range?n.selectedEnd||i<n.selected?(n.selected=i,n.selectedEnd=null):n.selectedEnd=i:n.selected=i,n.viewDate=new Date(i),n.focusDate=new Date(i),re(e,n))},ce=(m(T,{keydown:e=>{if(!(e instanceof KeyboardEvent&&e.target instanceof Element))return;const t=e.target.closest(T);if(!t)return;const n=e.target.closest("time");if(n){const i="rtl"===window.getComputedStyle(t).direction,a=n=>{e.preventDefault(),((e,t)=>{const n=C.get(e);if(!n)return;const i=N(n.focusDate.getFullYear(),n.focusDate.getMonth(),n.focusDate.getDate()+t);if(i<n.min||i>n.max)return;const a=Y(i)-Y(n.viewDate);n.focusDate=i,0!==a?(n.viewDate=V(n.viewDate,i.getFullYear(),i.getMonth()),re(e,n,a>0?1:-1)):re(e,n),ne(e)})(t,n)},r=((W(n.dateTime)?.getDay()??U)-U+7)%7;switch(e.key){case"ArrowLeft":return a(i?1:-1);case"ArrowRight":return a(i?-1:1);case"ArrowUp":return a(-7);case"ArrowDown":return a(7);case"Home":return a(-r);case"End":return a(6-r);case"Enter":case" ":return e.preventDefault(),se(t,n.dateTime),void ne(t)}}if(!e.target.closest(`.${_}input`))switch(e.key){case"Enter":case" ":e.target instanceof HTMLInputElement&&"date"===e.target.type&&e.preventDefault();break;case"M":le(t,"months");break;case"Y":le(t,"years");break;case"PageUp":case"PageDown":oe(t,"PageUp"===e.key?1:-1,e.shiftKey?"year":"month")}},initialize:e=>{if(e.dataset.miclinitialized)return;const t=e.querySelector("form"),n=e.querySelector(".micl-dialog__content");if(!t||!n)return;e.dataset.miclinitialized="1";const i=e.querySelector("h1, h2, h3, h4, h5, h6, .micl-heading");i&&(i.setAttribute("aria-live","polite"),i.setAttribute("aria-atomic","true")),e.id&&document.querySelectorAll(`[data-datepicker="${e.id}"]`).forEach(ie),e.addEventListener("click",t=>{const n=t.target,i=n.closest("button");if(i){const t=i.parentElement?.classList.contains(`${_}month-selector`),n=i.classList.contains(`${_}next`),a=i.classList.contains(`${_}previous`);if(n||a)return void oe(e,n?1:-1,t?"month":"year")}n.closest(`.${_}month`)&&le(e,"months"),n.closest(`.${_}year`)&&le(e,"years"),n.closest(`.${_}inputmode`)&&le(e,e.querySelector(`.${_}input.${_}view-hidden`)?"input":"calendars");const a=n.closest("time");if(a&&a.dateTime&&se(e,a.dateTime),n instanceof HTMLInputElement&&("miclmonth"===n.name||"miclyear"===n.name)){const t=C.get(e);if(t){const i=parseInt(n.value,10);((e,t,n)=>{const i=C.get(e);i&&(i.viewDate=B(V(i.viewDate,t,n),i.min,i.max),i.focusDate=j(V(i.focusDate,i.viewDate.getFullYear(),i.viewDate.getMonth()),i.min,i.max),re(e,i))})(e,"miclyear"===n.name?i:t.viewDate.getFullYear(),"miclmonth"===n.name?i:t.viewDate.getMonth()),le(e,"calendars")}}}),e.addEventListener("focusout",t=>{const n=t.target;if(!(n instanceof HTMLInputElement&&n.closest(`.${_}input`)))return;const i=e.querySelectorAll(`.${_}input input`);((e,t,n)=>{const i=C.get(e);if(!i)return;const a=(e=>{if(e.length!==K.length)return null;let t="",n="",i="";for(let a=0;a<K.length;a++)switch(K[a]){case"D":t+=e[a];break;case"M":n+=e[a];break;case"Y":i+=e[a]}if(!/^\d+$/.test(t+n+i))return null;const a=parseInt(n,10)-1,r=parseInt(t,10),l=N(parseInt(i,10),a,r);return l.getMonth()===a&&l.getDate()===r?l:null})(t.value);t.value.trim()&&(!a||a<i.min||a>i.max)?ae(t,!0):(ae(t,!1),a&&(i.range&&n>0?i.selectedEnd=a:i.selected=a,i.selectedEnd&&i.selectedEnd<i.selected&&([i.selected,i.selectedEnd]=[i.selectedEnd,i.selected]),i.viewDate=new Date(i.selected),i.focusDate=new Date(i.selected)),re(e,i))})(e,n,Array.prototype.indexOf.call(i,n))}),e.addEventListener("beforetoggle",t=>{if("open"!==t.newState)return;const n=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement;let i=document.activeElement;if((!n(i)||i.dataset.datepicker!==e.id&&i.popoverTargetElement!==e&&i.commandForElement!==e)&&(i=document.querySelector(`[data-datepicker="${e.id}"],[popovertarget="${e.id}"],[commandfor="${e.id}"]`)),!n(i))return;const a=e.classList.contains("micl-datepicker--range");let r=i,l=null;if(a&&i instanceof HTMLInputElement)if(i.dataset.miclrangeto){const e=document.getElementById(i.dataset.miclrangeto);l=e instanceof HTMLInputElement?e:null}else if(i.id){const e=document.querySelector(`input[data-miclrangeto="${i.id}"]`);e&&(l=i,r=e)}let o=z(new Date),s=null,c=N(1900,0,1),d=N(2099,11,31);if(r instanceof HTMLInputElement)o=X(r)||o,c=W(r.min)||c,d=W(r.max)||d;else{const[e,t]=(r.value||r.textContent||"").split("/");o=W(e)||o,a&&t&&(s=W(t))}l&&(s=X(l),d=W(l.max)||d),d<c&&(d=new Date(c)),s?s<o&&([o,s]=[s,o]):s=null;const m={invoker:r,invokerEnd:l,selected:o,selectedEnd:a?s:null,range:a,viewDate:B(o,c,d),focusDate:j(o,c,d),min:c,max:d};C.set(e,m),ie(r),l&&ie(l);const u=e.querySelector(`.${_}calendars`);u&&(te(u),u.replaceChildren()),e.querySelectorAll(`.${_}input input`).forEach(e=>ae(e,!1)),((e,t,n)=>{const i=`${R(t)}/${R(n)}`;e.dataset.miclperiods!==i&&(e.dataset.miclperiods=i,["months","years"].forEach(i=>{const a=e.querySelector(`.${_}${i}`);if(!a)return;a.innerHTML="";const r=document.createDocumentFragment();if("months"===i)for(let e=0;e<12;e++){const t=document.createElement("label");t.innerHTML=`<span class="material-symbols-outlined">check</span><input type="radio" name="miclmonth" value="${e}"> ${H.monthLong.format(new Date(2e3,e,1))}`,r.appendChild(t)}else for(let e=t.getFullYear();e<=n.getFullYear();e++){const t=document.createElement("label");t.innerHTML=`<input type="radio" name="miclyear" value="${e}"> ${e}`,r.appendChild(t)}const l=document.createElement("div");l.className=`${_}${i}-inner`,a.appendChild(l).appendChild(r)}))})(e,c,d),le(e,"calendars"),re(e,m)}),e.addEventListener("close",()=>{const t=e.querySelector(`.${_}calendars`);t&&te(t),""!==e.returnValue&&(e=>{const t=C.get(e);if(!t?.invoker)return;const n=t.selectedEnd||t.selected;t.range&&!t.invokerEnd?G(t.invoker,`${R(t.selected)}/${R(n)}`,`${t.selected.toLocaleDateString(P)} – ${n.toLocaleDateString(P)}`):(G(t.invoker,R(t.selected),t.selected.toLocaleDateString(P)),t.invokerEnd&&G(t.invokerEnd,R(n),n.toLocaleDateString(P)))})(e)})}},HTMLDialogElement),e=>e?.matches(":has(input[type=checkbox]:checked)")),de=(m(".micl-list",{keydown(e){const t=e.target;if(!(e instanceof KeyboardEvent&&t?.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const n=t.parentElement;if(!n)return;const i=n instanceof HTMLDetailsElement;let a=[];if(i?a=Array.from(n.parentElement?.children||[]).map(e=>e.querySelector(":scope > summary")).filter(Boolean):["UL","OL"].includes(n.tagName)&&(a=Array.from(n.children).filter(e=>e instanceof HTMLLIElement&&"separator"!==e.getAttribute("role"))),a=a.filter(e=>!(e=>e?.classList.contains("micl-list-item--disabled"))(e)),!a.length)return;const r=a.indexOf(t);if(-1===r)return;let l=r;switch(e.key){case"ArrowDown":e.preventDefault(),l=(r+1)%a.length;break;case"ArrowUp":e.preventDefault(),l=(r-1+a.length)%a.length;break;case"Tab":if(!i){const e=a.findIndex(ce);l=-1===e?0:e}break;case" ":case"Enter":if(i)break;" "===e.key&&e.preventDefault();const n=t.querySelector("input[type=checkbox], a[href], button");n instanceof HTMLInputElement?(n.checked=!n.checked,n.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))):n?.click()}l!==r&&(i||(t.setAttribute("tabindex","-1"),a[l].setAttribute("tabindex","0")),a[l].focus())},initialize(e){e.dataset.miclinitialized||(e.dataset.miclinitialized="1",e.querySelectorAll(":scope > details > summary.micl-list-item--disabled").forEach(e=>e.setAttribute("tabindex","-1")),e.querySelector('li[tabindex="0"]')&&e.querySelectorAll('li:not([role="separator"])').forEach(e=>{"0"!==e.getAttribute("tabindex")&&e.setAttribute("tabindex","-1"),e.querySelectorAll("a, button, input").forEach(e=>e.setAttribute("tabindex","-1")),(e=>e?.matches(":has(input[type=checkbox])"))(e)&&(e.setAttribute("role","option"),e.parentElement?.setAttribute("role","listbox"))}))}},HTMLElement),e=>Array.from(e.children).filter(e=>e instanceof HTMLLIElement&&"separator"!==e.getAttribute("role")&&!e.classList.contains("micl-list-item--disabled")&&e.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three"))),me=(m(".micl-menu[popover]",{initialize:e=>{if(!e.matches(".micl-menu[popover]")||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=document.querySelector(`[popovertarget="${e.id}"]`);t&&e.addEventListener("beforetoggle",n=>{if("open"!==n.newState)return;const i=n.source||t;requestAnimationFrame(()=>{e.matches(":popover-open")&&(e.style.transformOrigin=((e,t)=>{const n=e.getBoundingClientRect(),i=t.getBoundingClientRect();return(n.x+n.width/2>i.x+i.width/2?"right ":"left ")+(n.y+n.height/2>i.y+i.height/2?"bottom":"top")})(i,e))})}),e.addEventListener("keydown",t=>{if("ArrowDown"!==t.key&&"ArrowUp"!==t.key)return;const n=t.target;if(!(n instanceof HTMLElement&&n.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const i=n.parentElement;if(!i?.matches("ul.micl-list"))return;if(i.parentElement!==e)return;const a=Array.from(e.querySelectorAll(":scope > ul.micl-list"));if(a.length<2)return;const r=a.indexOf(i),l=de(i),o=l.indexOf(n);if(-1===o)return;let s;if("ArrowDown"===t.key&&o===l.length-1){const e=(r+1)%a.length;s=de(a[e])[0]}else if("ArrowUp"===t.key&&0===o){const e=(r-1+a.length)%a.length,t=de(a[e]);s=t[t.length-1]}s&&(t.preventDefault(),t.stopPropagation(),n.setAttribute("tabindex","-1"),s.setAttribute("tabindex","0"),s.focus())},!0),e.querySelectorAll(":scope > ul.micl-list > li > button[popovertarget]").forEach(e=>{if(e.popoverTargetElement?.matches(".micl-menu[popover]")){const t=e.popoverTargetElement,n=`--${t.id}`;let i;e.style.setProperty("anchor-name",n),t.style.insetBlockStart=`anchor(${n} start)`,t.style.insetInlineStart=`anchor(${n} end)`;const a=()=>{clearTimeout(i),i=setTimeout(()=>{e.matches(":hover")||t.matches(":hover")||t.hidePopover()},300)};e.addEventListener("mouseenter",()=>{clearTimeout(i),t.showPopover()}),e.addEventListener("mouseleave",a),t.addEventListener("mouseenter",()=>{clearTimeout(i)}),t.addEventListener("mouseleave",a)}})}},HTMLElement),"input[type=range][class*=micl-slider-]"),ue=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))},pe=(e,t)=>e.map(e=>{const n=`(8px + ${e} * ${t})`;return`radial-gradient(circle 2px at calc(var(--_kx) * ${n} + var(--_cx)) calc(var(--_ky) * ${n} + var(--_cy)),currentColor 100%,transparent 0)`}).join(","),he=(m(me,{initialize:e=>{e.matches(me)&&(ue(e),(e=>{const t=parseFloat(e.min||"0"),n=parseFloat(e.max||"100"),i=new Set;if(n>t&&e.list?.querySelectorAll("option[value]").forEach(e=>{const a=parseFloat(e.value);!isNaN(a)&&a>=t&&a<=n&&i.add((a-t)/(n-t))}),i.size>0){const t=[...i].sort((e,t)=>e-t);e.style.setProperty("--micl-slider-stops",pe(t,"(100% - 16px)")),e.style.setProperty("--micl-slider-stops-progress",pe(t,"(100% / max(var(--_fraction), 0.0001))"))}})(e))},input:e=>{e.target instanceof HTMLInputElement&&e.target.matches(me)&&ue(e.target)}},HTMLInputElement),".micl-snackbar"),ge=new WeakMap,fe=e=>{clearTimeout(e.timeoutid),e.timeoutid=void 0},ve=(m(he,{initialize:e=>{if(!e.matches(he)||e.dataset.miclinitialized)return;const t=parseInt(e.dataset.micldelay??"",10);if(!(t>0))return;e.dataset.miclinitialized="1";const n={delay:t,hovering:!1,controller:new AbortController};ge.set(e,n);const i=()=>((e,t)=>{fe(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,n),a=e=>{"touch"!==e.pointerType&&(n.hovering="pointerenter"===e.type,i())},r={signal:n.controller.signal};e.addEventListener("toggle",()=>{n.hovering=!1,i()},r),e.addEventListener("pointerenter",a,r),e.addEventListener("pointerleave",a,r),e.addEventListener("focusin",i,r),e.addEventListener("focusout",i,r),i()},cleanup:e=>{const t=ge.get(e);t&&(t.controller.abort(),fe(t),ge.delete(e)),delete e.dataset.miclinitialized}},HTMLElement),e=>"willValidate"in e),ye=e=>{const t=e.target;ve(t)&&t.setCustomValidity("")},Ee=e=>{const t=e.dataset.miclvalidateMessage||"";if(t&&e.matches("[data-miclvalidate-checkboxes-name]")){const n=e.dataset.miclvalidateCheckboxesName||"",i=e.dataset.miclvalidateCheckboxesCountEqual||"",a=e.dataset.miclvalidateCheckboxesCountMax||"",r=e.dataset.miclvalidateCheckboxesCountMin||"";if(n&&(i||a||r)){const l=e.querySelectorAll(`input[type="checkbox"][name="${n}"]:checked`).length,o=parseInt(i,10),s=parseInt(a,10),c=parseInt(r,10);let d=!isNaN(o)&&l!=o||!isNaN(s)&&l>s||!isNaN(c)&&l<c;e.setCustomValidity(d?t:"");const m=e.querySelector(`input[type="checkbox"][name="${n}"]`);m&&(m.setCustomValidity(d?t:""),d?m.addEventListener("change",ye):m.removeEventListener("change",ye))}}},be=(e,t)=>{let n=!1;return e.querySelectorAll("fieldset").forEach(Ee),Array.from(e.elements).forEach(e=>{if(ve(e)&&e.willValidate){e.checkValidity()||(n=!0);let i=(e=>{if(!e.parentElement||!ve(e))return!1;let t=!1;return e instanceof HTMLInputElement&&"checkbox"===e.type&&e.classList.contains("micl-checkbox")?t=(e=>(e.classList.toggle("micl-checkbox--error",!!e.validationMessage),!1))(e):(e.parentElement.classList.contains("micl-textfield-outlined")||e.parentElement.classList.contains("micl-textfield-filled"))&&(t=((e,t)=>{e.classList.toggle("micl-textfield--error",!!t);const n=e.querySelector(".micl-textfield__supporting-text");return n&&(t?("micltext"in n.dataset||(n.dataset.micltext=n.textContent),n.textContent=t):"micltext"in n.dataset&&(n.textContent=n.dataset.micltext||"")),!!t&&!!n})(e.parentElement,e.validationMessage)),t})(e);!i&&t&&e.reportValidity()}}),!n},Le=".micl-stepper",we=".micl-stepper__action-back,.micl-stepper__action-next",Se=".micl-stepper__header button[role=tab][aria-controls]",ke="micl-stepper__step",xe="."+ke,$e=e=>e.querySelector(`${xe}[aria-current=step]`)||Ae(e,e.querySelector(xe)),De=(e,t)=>Array.from(e.querySelectorAll(xe)).indexOf(t)+1,Ae=(e,t)=>{if(!t)return null;let n=0;e.querySelectorAll(xe).forEach((e,i)=>{e.setAttribute("aria-current",e===t?"step":"false"),e===t&&(n=i)});const i=e.querySelectorAll(Se).item(n);return e.querySelectorAll(Se).forEach(e=>{e.setAttribute("aria-selected",e===i?"true":"false")}),_e(e,t),t},Me=e=>{const t=e.currentTarget;"transform"===e.propertyName&&t&&(t.classList.remove("micl-stepper__step--fromselected","micl-stepper__step--toselected"),t.removeEventListener("transitionend",Me))},Te=e=>e.classList.contains("micl-stepper__action-back"),_e=(e,t)=>{((e,t)=>{Array.from(e.querySelectorAll(we)).forEach(e=>{const n=Te(e)?"previousElementSibling":"nextElementSibling",i=t[n]?.classList.contains(ke);e.classList.toggle("micl-stepper__action--hidden",!i)})})(e,t),((e,t)=>{const n=e.querySelectorAll(xe).length,i=De(e,t);e.querySelectorAll("[data-step]").forEach(e=>{const t=parseInt(e.dataset.step||"0",10);e.classList.toggle("micl-stepper__step--hidden",t>0?t!=i:n+t+1!=i)})})(e,t),((e,t)=>{const n=De(e,t),i=e.querySelectorAll(xe).length,a=!e.classList.contains("micl-stepper--nonlinear"),r=(t,n)=>{e.querySelectorAll(t).forEach(e=>{e.textContent=n})};r(".micl-stepper__progress-current",`${n}`),r(".micl-stepper__progress-total",`${i}`),e.querySelectorAll(".micl-stepper__progress-dots").forEach(e=>{const t=document.createDocumentFragment();e.innerHTML="";for(let e=1;e<=i;e++){let i=document.createElement("span");i.classList.add("micl-stepper__progress-dot"),(a&&e<=n||!a&&e===n)&&i.classList.add("micl-stepper__progress--done"),t.appendChild(i)}e.appendChild(t)}),e.querySelectorAll(Se).forEach((e,t)=>{e.classList.toggle("micl-stepper__progress--done",a?t+1<=n:t+1===n)})})(e,t)},qe=(m(Le,{initialize:e=>{if(!e.matches(Le)||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=$e(e),n=e.querySelector(".micl-stepper__header");t&&(_e(e,t),n?.querySelectorAll("button[role=tab][aria-controls]").forEach((t,n)=>{t.style.setProperty("--micl-stepper-anchor",`--micl-step-${n}`),n>0&&t.style.setProperty("--micl-stepper-prev","--micl-step-"+(n-1)),t.addEventListener("click",()=>{if("ariaControlsElements"in Element.prototype&&t.ariaControlsElements)Ae(e,t.ariaControlsElements[0]);else{const n=t.getAttribute("aria-controls");n&&Ae(e,document.getElementById(n))}})})),Array.from(e.querySelectorAll(we)).forEach(t=>{t.addEventListener("click",function(t){const n=Te(this),i=$e(e);if(!i||!n&&i instanceof HTMLFieldSetElement&&(r=!0,Ee(a=i),!be(a,r)))return void(n||t.stopImmediatePropagation());var a,r;const l=i[n?"previousElementSibling":"nextElementSibling"];l?.classList.contains(ke)&&((e,t,n)=>{t.addEventListener("transitionend",Me),t.classList.add("micl-stepper__step--fromselected"),t.offsetHeight,n.addEventListener("transitionend",Me),n.classList.add("micl-stepper__step--toselected"),n.offsetHeight,Ae(e,n)})(e,i,l)},!0)}),e instanceof HTMLFormElement&&e.addEventListener("submit",t=>{t.submitter?.classList.contains("micl-form--dosubmit")||t.preventDefault(),be(e,!0)||t.stopImmediatePropagation()},!0)}},HTMLElement),".micl-textfield-outlined > input,.micl-textfield-filled > input"),Ce=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",Ie=".micl-textfield-filled > select,.micl-textfield-outlined > select",Pe=`${qe},${Ie},${Ce}`,He=e=>{if(!e.parentElement||e instanceof HTMLSelectElement||!e.maxLength)return;const t=e.parentElement.querySelector(".micl-textfield__character-counter");t&&(t.textContent=`${e.value.length}/${e.maxLength}`)},Ne=e=>{e.target.matches(Pe)&&e.target.dataset.miclinitialized&&!e.target.disabled&&(e.target instanceof HTMLInputElement&&e.target.dataset.micldateformat&&((e,t)=>{const n=(e.dataset.micldateformat||"").match(/([DMY]{2,4})([^DMY])?([DMY]{2,4})([^DMY])?([DMY]{2,4})/);if(!n)return;const i=[{type:n[1],length:n[1].length,separator:n[2]||""},{type:n[3],length:n[3].length,separator:n[4]||""},{type:n[5],length:n[5].length,separator:""}];e.maxLength=i.reduce((e,t)=>e+t.length+(t.separator?1:0),0);let a=e.value.replace(/\D/g,""),r="",l=0,o=e.selectionStart||0;for(let e=0;e<i.length;e++){const t=i[e];if(a.length<l)break;const n=a.substring(l,l+t.length);r+=n,l+=n.length,n.length===t.length&&t.separator&&(r+=t.separator)}const s=e.value.length;e.value=r.substring(0,e.maxLength);const c=e.value.length;t?.startsWith("deleteContent")?o>0&&e.setSelectionRange(o,o):c>s&&c>o?e.setSelectionRange(c,c):e.setSelectionRange(o,o)})(e.target,e.inputType),e.target.value?e.target.dataset.miclvalue="1":delete e.target.dataset.miclvalue,He(e.target))},ze={initialize:e=>{if(!e.dataset.miclinitialized){if(e.dataset.miclinitialized="1",e.value&&(e.dataset.miclvalue="1"),e instanceof HTMLSelectElement&&e.multiple&&!CSS.supports("appearance","base-select")&&e.addEventListener("mousedown",t=>{const n=t.target instanceof Element&&t.target.closest("option");if(n&&!n.disabled&&!t.shiftKey){t.preventDefault();const i=e.scrollTop;n.selected=!n.selected,e.focus(),e.scrollTop=i,e.dispatchEvent(new Event("change",{bubbles:!0}))}}),e instanceof HTMLSelectElement&&!e.multiple){const t=()=>{const t=e.getBoundingClientRect(),n=t.top,i=window.innerHeight-t.bottom;!e.matches(":open")&&e.style.setProperty("--micl-select-picker-origin",n>i?"bottom":"top")};e.addEventListener("mousedown",t),e.addEventListener("keydown",t)}if(e.matches("input[type=time][data-timepicker],input[type=date][data-datepicker]")){const t=document.getElementById(e.dataset.timepicker||e.dataset.datepicker||"");if(t instanceof HTMLDialogElement){const n=e=>{e.preventDefault(),t.showModal()};e.addEventListener("click",n),e.addEventListener("keydown",e=>{const t=e.key;"Enter"!==t&&" "!==t||n(e)})}}He(e)}},change:Ne,input:Ne};m(qe,ze,HTMLInputElement),m(Ce,ze,HTMLTextAreaElement),m(Ie,ze,HTMLSelectElement);const Fe="micl-timepicker__",Ye="micl-timepicker__dial--hidden",Oe="micl-timepicker__dial--dragging",Ve="micl-timepicker__dial-inner",je="micl-timepicker__time--selected",Be="micl-timepicker--selected",We="--micl-angle",Re="--micl-track-radius",Ue=(()=>{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"]}}})(),Ke=e=>`${e}`.padStart(2,"0"),Xe=e=>parseInt(e,10),Je=(e,t)=>e.querySelector(t),Ge=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,Qe=e=>!!e&&!e.classList.contains(Ye),Ze=(e,t)=>{e.classList.toggle(Be,t)},et=e=>document.querySelector(`[data-timepicker="${e.id}"],[popovertarget="${e.id}"],[commandfor="${e.id}"]`),tt=e=>{const t=e.dataset.miclhourcycle||Ue.cycle;return"h11"===t||"h12"===t},nt=(e,t)=>"hour"===e?t?[1,12]:[0,23]:[0,59],it=(e,t)=>{e.value=Ke(t),e.setAttribute("aria-valuenow",`${t}`),e.setAttribute("aria-valuetext",e.value)},at=(e,t)=>{const[n,i]=nt(e.name,t);let a=Xe(e.value);(isNaN(a)||a<n)&&(a=n),a>i&&(a=i),it(e,a)},rt=(e,t,n)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove(je));const i=e.querySelector(`data[data-${t}][value="${n}"]`);let a=NaN;if(e.style.removeProperty(Re),i){const t=window.getComputedStyle(i);a=parseFloat(t.getPropertyValue(We)),e.style.setProperty(Re,t.getPropertyValue("--micl-hour-radius")),i.classList.add(je)}else"minute"===t&&(a=360*Xe(n)/60-90);if(isNaN(a))return;const r=parseFloat(e.style.getPropertyValue(We))||0;e.style.setProperty(We,`${r+(((a-r)%360+540)%360-180)}deg`)},lt=(e,t,n,i,a=!0)=>{let r=Xe(n||"0");if(isNaN(r))return;if("hour"===t.name&&i&&tt(e)){const t=Je(e,`.${Fe}am`),n=Je(e,`.${Fe}pm`);r>=12?(n&&(n.checked=!0),r>12&&(r-=12)):(t&&(t.checked=!0),0===r&&(r=12))}it(t,r);const l=a&&Je(e,`.${Fe}dial`);l&&rt(l,t.name,t.value)},ot=(e,t)=>{e.querySelectorAll("data").forEach(e=>{const n=e.dataset[t];n&&(e.textContent=n,e.value=Ke(n)),e.classList.contains(Ve)&&e.classList.toggle(Ye,"hour"!==t)})},st=(e,t,n)=>{if("ArrowDown"!==n.key&&"ArrowUp"!==n.key)return;n.preventDefault();const i=tt(e),[a,r]=nt(t.name,i);let l=Xe(t.value)||0;l+="ArrowUp"===n.key?1:-1,(l<a||l>r)&&(l=l<a?r:a,"hour"===t.name&&i&&Je(e,"input[name=period]:not(:checked)")?.click()),lt(e,t,`${l}`)},ct=(m("dialog.micl-dialog.micl-timepicker",{initialize:e=>{if(e.dataset.miclinitialized)return;const t=Je(e,"form"),n=Je(e,`.${Fe}inputmode`),i=Je(e,`.${Fe}dial`),a=Je(e,".micl-dialog__headline h2"),r=[Je(e,"input[name=hour]"),Je(e,"input[name=minute]")].filter(e=>!!e);if(!t||r.length<2)return;e.dataset.miclinitialized="1";const l=tt(e),o=t=>{const n=Qe(i),l=e.dataset[n?"micldialheadline":"miclinputheadline"];r.forEach(e=>e.toggleAttribute("readonly",n)),a&&l&&(a.textContent=l),t&&(r[0].focus(),n||r[0].select())};r.forEach((t,n)=>{((e,t)=>{const[n,i]=nt(e.name,t),a={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 a)e.setAttribute(t,a[t])})(t,l),at(t,l),t.addEventListener("keydown",st.bind(null,e,t)),t.addEventListener("focus",()=>{Ze(r[1-n],!1),Ze(t,!0),Qe(i)||t.select(),i&&(ot(i,t.name),rt(i,t.name,t.value))}),t.addEventListener("blur",()=>{Qe(i)||(at(t,l),Ze(t,!1))})}),o();const s=Je(e,`.${Fe}period`);if(s&&l&&(s.innerHTML=["am","pm"].map((e,t)=>`<input type="radio" name="period" class="${Fe}${e}" value="${e}" aria-label="${Ue.periods[t]}"${t?"":" checked"}>`).join("")),n?.addEventListener("click",()=>{i?.classList.toggle(Ye),o(!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 a=!t&&e>=12?` class="${Ve}"`:` data-minute="${5*e%60}"`;i+=`<data value="${Ke(e)}" data-hour="${e}"${a} style="${We}:${n}deg">${e}</data>`,n=(n+30)%360}e.innerHTML=`${i}<span class="${Fe}track"></span>`})(i,l);const t=t=>{const n=document.elementFromPoint(t.clientX,t.clientY);n&&"DATA"===n.tagName&<(e,r[r[1].classList.contains(Be)?1:0],n.value)};i.addEventListener("pointerdown",e=>{i.classList.add(Oe),t(e),i.setPointerCapture(e.pointerId)}),i.addEventListener("pointermove",e=>{i.classList.contains(Oe)&&t(e)});const n=(e,t)=>{const n=i.classList.contains(Oe);i.classList.remove(Oe),i.hasPointerCapture(e.pointerId)&&i.releasePointerCapture(e.pointerId),t&&n&&r[0].classList.contains(Be)&&r[1].focus()};i.addEventListener("pointerup",e=>n(e,!0)),i.addEventListener("pointercancel",n)}e.addEventListener("beforetoggle",t=>{if("open"!==t.newState)return;i&&ot(i,"hour"),Ze(r[1],!1),Ze(r[0],!0);let n=document.activeElement;if((!Ge(n)||n.dataset.timepicker!==e.id&&n.popoverTargetElement!==e&&n.commandForElement!==e)&&(n=et(e)),!Ge(n))return;e._miclInvoker=n;const a=(n.value||n.textContent).split(":");2===a.length&&(lt(e,r[0],a[0],!0),lt(e,r[1],a[1],!1,!1))}),e.addEventListener("close",()=>{if(!e.returnValue)return;let n=e._miclInvoker;if(n||(n=et(e)),!Ge(n))return;let i=Xe(r[0].value);const a=Xe(r[1].value);if(isNaN(i)||isNaN(a))return;l&&(i%=12,"pm"===t.elements.namedItem("period")?.value&&(i+=12));const o=`${Ke(i)}:${Ke(a)}`;n.value=o,n instanceof HTMLInputElement?(n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new Event("input",{bubbles:!0}))):n.textContent=Ue.time?Ue.time.format(new Date(2024,0,1,i,a)):o})}},HTMLDialogElement),p);return t})());
|
package/dist/navigationbar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}: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}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item{--micl-ripple: 1;--statelayer-color: var(--md-sys-color-on-secondary-container);box-sizing:border-box;display:flex;position:relative;align-items:center;outline:none;text-decoration:none;cursor:pointer;overflow:visible;background-color:rgba(0,0,0,0);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-rippling.micl-navigationbar__item{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__icon{margin:0;padding-block:4px;color:var(--md-sys-color-on-surface-variant);font-variation-settings:"FILL" 0}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__text{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);min-block-size:var(--md-sys-typescale-label-medium-line-height);margin:4px 0px 0px 0px;color:var(--md-sys-color-on-surface-variant);overflow:hidden}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item[aria-current=page]{background-color:var(--md-sys-color-secondary-container)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item[aria-current=page] .micl-navigationbar__icon{color:var(--md-sys-color-on-secondary-container);font-variation-settings:"FILL" 1}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item[aria-current=page] .micl-navigationbar__text{color:var(--md-sys-color-secondary)}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}: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-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}nav.micl-navigationbar{box-sizing:border-box;position:fixed;inset-block:auto 0;inset-inline:0;padding-block-end:env(safe-area-inset-bottom);background-color:var(--md-comp-nav-bar-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-comp-nav-bar-container-elevation, var(--md-sys-elevation-level2));border-radius:var(--md-comp-nav-bar-container-shape, 0px);z-index:9}nav.micl-navigationbar>.micl-navigationbar__content{box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-evenly;block-size:var(--md-comp-nav-bar-container-height, 64px);padding-block-start:6px}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item{flex-direction:column;inline-size:var(--md-comp-nav-bar-item-vertical-active-indicator-width, 56px);block-size:var(--md-comp-nav-bar-item-vertical-active-indicator-height, 32px);border-radius:var(--md-comp-nav-bar-item-active-indicator-shape, calc(var(--md-comp-nav-bar-item-vertical-active-indicator-height, 32px) / 2))}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__icon{font-size:var(--md-comp-nav-bar-item-icon-size, var(--md-sys-icon-size));inline-size:var(--md-comp-nav-bar-item-icon-size, var(--md-sys-icon-size));padding-inline:16px}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__text{margin-block-start:var(--md-comp-nav-bar-item-active-indicator-icon-label-space, 4px);white-space:nowrap;text-overflow:ellipsis}nav.micl-navigationbar.micl-navigationbar--tall>.micl-navigationbar__content{block-size:var(--md-comp-nav-bar-tall-container-height, 80px);padding-block-start:14px}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content{align-items:center;padding-block-start:0}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content>a.micl-navigationbar__item{flex-direction:row;inline-size:fit-content;max-inline-size:100%;block-size:var(--md-comp-nav-bar-item-horizontal-active-indicator-height, 40px);border-radius:var(--md-comp-nav-bar-item-active-indicator-shape, calc(var(--md-comp-nav-bar-item-horizontal-active-indicator-height, 40px) / 2))}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__icon{padding-inline:var(--md-comp-nav-bar-item-horizontal-active-indicator-leading-space, 16px) var(--md-comp-nav-bar-item-active-indicator-icon-label-space, 4px)}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__text{margin-block-start:0;padding-inline-end:var(--md-comp-nav-bar-item-horizontal-active-indicator-trailing-space, 16px)}body:has(nav.micl-navigationbar){padding-block-end:calc(var(--md-comp-nav-bar-container-height, 64px) + env(safe-area-inset-bottom))}body:has(nav.micl-navigationbar--tall){padding-block-end:calc(var(--md-comp-nav-bar-tall-container-height, 80px) + env(safe-area-inset-bottom))}@media(min-width: 600px){nav.micl-navigationbar--bar-to-medium{display:flex;flex-direction:column;position:sticky;float:inline-start;inset:unset;inset-block-start:0;inline-size:var(--md-comp-nav-rail-collapsed-container-width, 96px);block-size:100vh;min-block-size:100%;margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-block:var(--md-comp-nav-rail-collapsed-top-space, 44px) 0;background-color:var(--md-comp-nav-rail-collapsed-container-color, var(--md-sys-color-surface));box-shadow:var(--md-comp-nav-rail-collapsed-container-elevation, var(--md-sys-elevation-level0));border-radius:var(--md-comp-nav-rail-collapsed-container-shape, 0px);border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color));overflow:hidden}nav.micl-navigationbar--bar-to-medium>.micl-navigationbar__content{flex:1 1 auto;flex-direction:column;justify-content:flex-start;inline-size:100%;block-size:auto;row-gap:var(--md-comp-nav-rail-item-container-vertical-space, 6px);padding-block:var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;padding-inline:20px;overflow:hidden auto}nav.micl-navigationbar--bar-to-medium>.micl-navigationbar__content>a.micl-navigationbar__item{margin-block-end:40px;row-gap:var(--md-comp-nav-rail-collapsed-item-vertical-space, 4px)}body.micl-window:has(nav.micl-navigationbar--bar-to-medium){padding-block-end:var(--md-sys-layout-window-margin, 0px)}body:not(.micl-window):has(nav.micl-navigationbar--bar-to-medium){padding-block-end:0}}@media(min-width: 840px){nav.micl-navigationbar--bar-to-expanded{display:flex;flex-direction:column;position:sticky;float:inline-start;inset:unset;inset-block-start:0;inline-size:var(--md-comp-nav-rail-collapsed-container-width, 96px);block-size:100vh;min-block-size:100%;margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-block:var(--md-comp-nav-rail-collapsed-top-space, 44px) 0;background-color:var(--md-comp-nav-rail-collapsed-container-color, var(--md-sys-color-surface));box-shadow:var(--md-comp-nav-rail-collapsed-container-elevation, var(--md-sys-elevation-level0));border-radius:var(--md-comp-nav-rail-collapsed-container-shape, 0px);border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color));overflow:hidden}nav.micl-navigationbar--bar-to-expanded>.micl-navigationbar__content{flex:1 1 auto;flex-direction:column;justify-content:flex-start;inline-size:100%;block-size:auto;row-gap:var(--md-comp-nav-rail-item-container-vertical-space, 6px);padding-block:var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;padding-inline:20px;overflow:hidden auto}nav.micl-navigationbar--bar-to-expanded>.micl-navigationbar__content>a.micl-navigationbar__item{margin-block-end:40px;row-gap:var(--md-comp-nav-rail-collapsed-item-vertical-space, 4px)}body.micl-window:has(nav.micl-navigationbar--bar-to-expanded){padding-block-end:var(--md-sys-layout-window-margin, 0px)}body:not(.micl-window):has(nav.micl-navigationbar--bar-to-expanded){padding-block-end:0}}
|
|
1
|
+
: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}: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}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item{--micl-ripple: 1;--statelayer-color: var(--md-sys-color-on-secondary-container);box-sizing:border-box;display:flex;position:relative;align-items:center;outline:none;text-decoration:none;cursor:pointer;overflow:visible;background-color:rgba(0,0,0,0);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-rippling.micl-navigationbar__item{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__icon{margin:0;padding-block:4px;color:var(--md-sys-color-on-surface-variant);font-variation-settings:"FILL" 0}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__text{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);min-block-size:var(--md-sys-typescale-label-medium-line-height);margin:4px 0px 0px 0px;color:var(--md-sys-color-on-surface-variant);overflow:hidden}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item[aria-current=page]{background-color:var(--md-sys-color-secondary-container)}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item[aria-current=page] .micl-navigationbar__icon{color:var(--md-sys-color-on-secondary-container);font-variation-settings:"FILL" 1}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item[aria-current=page] .micl-navigationbar__text{color:var(--md-sys-color-secondary)}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}: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-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}nav.micl-navigationbar{box-sizing:border-box;position:fixed;inset-block:auto 0;inset-inline:0;padding-block-end:env(safe-area-inset-bottom);background-color:var(--md-comp-nav-bar-container-color, var(--md-sys-color-surface-container));box-shadow:var(--md-comp-nav-bar-container-elevation, var(--md-sys-elevation-level2));border-radius:var(--md-comp-nav-bar-container-shape, 0px);z-index:9}nav.micl-navigationbar>.micl-navigationbar__content{box-sizing:border-box;display:flex;align-items:flex-start;justify-content:space-evenly;block-size:var(--md-comp-nav-bar-container-height, 64px);padding-block-start:6px}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item{flex-direction:column;inline-size:var(--md-comp-nav-bar-item-vertical-active-indicator-width, 56px);block-size:var(--md-comp-nav-bar-item-vertical-active-indicator-height, 32px);border-radius:var(--md-comp-nav-bar-item-active-indicator-shape, calc(var(--md-comp-nav-bar-item-vertical-active-indicator-height, 32px) / 2))}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__icon{font-size:var(--md-comp-nav-bar-item-icon-size, var(--md-sys-icon-size));inline-size:var(--md-comp-nav-bar-item-icon-size, var(--md-sys-icon-size));padding-inline:16px}nav.micl-navigationbar>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__text{margin-block-start:var(--md-comp-nav-bar-item-active-indicator-icon-label-space, 4px);white-space:nowrap;text-overflow:ellipsis}nav.micl-navigationbar.micl-navigationbar--tall>.micl-navigationbar__content{block-size:var(--md-comp-nav-bar-tall-container-height, 80px);padding-block-start:14px}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content{align-items:center;padding-block-start:0}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content>a.micl-navigationbar__item{flex-direction:row;inline-size:fit-content;max-inline-size:100%;block-size:var(--md-comp-nav-bar-item-horizontal-active-indicator-height, 40px);border-radius:var(--md-comp-nav-bar-item-active-indicator-shape, calc(var(--md-comp-nav-bar-item-horizontal-active-indicator-height, 40px) / 2))}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__icon{padding-inline:var(--md-comp-nav-bar-item-horizontal-active-indicator-leading-space, 16px) var(--md-comp-nav-bar-item-active-indicator-icon-label-space, 4px)}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__text{margin-block-start:0;padding-inline-end:var(--md-comp-nav-bar-item-horizontal-active-indicator-trailing-space, 16px)}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content>a.micl-navigationbar__item .micl-navigationbar__text:has(+.micl-badge--trailing){padding-inline-end:0}nav.micl-navigationbar.micl-navigationbar--horizontal>.micl-navigationbar__content>a.micl-navigationbar__item .micl-badge--trailing{margin-inline-end:var(--md-comp-nav-bar-item-horizontal-active-indicator-trailing-space, 16px)}body:has(nav.micl-navigationbar){padding-block-end:calc(var(--md-comp-nav-bar-container-height, 64px) + env(safe-area-inset-bottom))}body:has(nav.micl-navigationbar--tall){padding-block-end:calc(var(--md-comp-nav-bar-tall-container-height, 80px) + env(safe-area-inset-bottom))}@media(min-width: 600px){nav.micl-navigationbar--bar-to-medium{display:flex;flex-direction:column;position:sticky;float:inline-start;inset:unset;inset-block-start:0;inline-size:var(--md-comp-nav-rail-collapsed-container-width, 96px);block-size:100vh;min-block-size:100%;margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-block:var(--md-comp-nav-rail-collapsed-top-space, 44px) 0;background-color:var(--md-comp-nav-rail-collapsed-container-color, var(--md-sys-color-surface));box-shadow:var(--md-comp-nav-rail-collapsed-container-elevation, var(--md-sys-elevation-level0));border-radius:var(--md-comp-nav-rail-collapsed-container-shape, 0px);border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color));overflow:hidden}nav.micl-navigationbar--bar-to-medium>.micl-navigationbar__content{flex:1 1 auto;flex-direction:column;justify-content:flex-start;inline-size:100%;block-size:auto;row-gap:var(--md-comp-nav-rail-item-container-vertical-space, 6px);padding-block:var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;padding-inline:20px;overflow:hidden auto}nav.micl-navigationbar--bar-to-medium>.micl-navigationbar__content>a.micl-navigationbar__item{margin-block-end:40px;row-gap:var(--md-comp-nav-rail-collapsed-item-vertical-space, 4px)}body.micl-window:has(nav.micl-navigationbar--bar-to-medium){padding-block-end:var(--md-sys-layout-window-margin, 0px)}body:not(.micl-window):has(nav.micl-navigationbar--bar-to-medium){padding-block-end:0}}@media(min-width: 840px){nav.micl-navigationbar--bar-to-expanded{display:flex;flex-direction:column;position:sticky;float:inline-start;inset:unset;inset-block-start:0;inline-size:var(--md-comp-nav-rail-collapsed-container-width, 96px);block-size:100vh;min-block-size:100%;margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-block:var(--md-comp-nav-rail-collapsed-top-space, 44px) 0;background-color:var(--md-comp-nav-rail-collapsed-container-color, var(--md-sys-color-surface));box-shadow:var(--md-comp-nav-rail-collapsed-container-elevation, var(--md-sys-elevation-level0));border-radius:var(--md-comp-nav-rail-collapsed-container-shape, 0px);border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color));overflow:hidden}nav.micl-navigationbar--bar-to-expanded>.micl-navigationbar__content{flex:1 1 auto;flex-direction:column;justify-content:flex-start;inline-size:100%;block-size:auto;row-gap:var(--md-comp-nav-rail-item-container-vertical-space, 6px);padding-block:var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;padding-inline:20px;overflow:hidden auto}nav.micl-navigationbar--bar-to-expanded>.micl-navigationbar__content>a.micl-navigationbar__item{margin-block-end:40px;row-gap:var(--md-comp-nav-rail-collapsed-item-vertical-space, 4px)}body.micl-window:has(nav.micl-navigationbar--bar-to-expanded){padding-block-end:var(--md-sys-layout-window-margin, 0px)}body:not(.micl-window):has(nav.micl-navigationbar--bar-to-expanded){padding-block-end:0}}
|
package/dist/navigationrail.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}: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-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item{--micl-ripple: 1;--statelayer-color: var(--md-sys-color-on-secondary-container);box-sizing:border-box;display:flex;position:relative;align-items:center;outline:none;text-decoration:none;cursor:pointer;overflow:visible;background-color:rgba(0,0,0,0);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-navigationrail>.micl-navigationrail__content>a.micl-rippling.micl-navigationrail__item{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__icon{margin:0;padding-block:4px;color:var(--md-sys-color-on-surface-variant);font-variation-settings:"FILL" 0}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text{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);min-block-size:var(--md-sys-typescale-label-medium-line-height);margin:4px 0px 0px 0px;color:var(--md-sys-color-on-surface-variant);overflow:hidden}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item[aria-current=page]{background-color:var(--md-sys-color-secondary-container)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item[aria-current=page] .micl-navigationrail__icon{color:var(--md-sys-color-on-secondary-container);font-variation-settings:"FILL" 1}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item[aria-current=page] .micl-navigationrail__text{color:var(--md-sys-color-secondary)}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-large: 16px}: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-backdrop-opacity: 32%}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}.micl-navigationrail{--md-comp-nav-rail-spring-buffer: 100px;--md-comp-nav-rail-divider-thickness: 0px;--md-comp-nav-rail-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-comp-nav-rail-motion-duration: 650ms;--md-comp-nav-rail-motion-duration-reverse: 500ms;--md-comp-nav-rail-morph-duration: 350ms;--md-comp-nav-rail-morph-duration-reverse: 350ms;--_navigationrail-current-max-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);--_navigationrail-current-min-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);--_navigationrail-item-direction: column;--_navigationrail-item-width: var(--md-comp-nav-rail-item-vertical-active-indicator-width, 56px);--_navigationrail-item-target-height: var(--_navigationrail-item-base-height);--micl-duration: var(--md-comp-nav-rail-motion-duration-reverse);--_navigationrail-content-gap: var(--md-comp-nav-rail-item-container-vertical-space, 6px);--_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);--_navigationrail-container-delay: calc(var(--_navigationrail-morph-speed) / 2);--_navigationrail-item-delay: 0ms;--_navigationrail-text-animation: none;--_navigationrail-expanded-text-margin: calc(var(--md-comp-nav-rail-item-active-indicator-icon-label-space, 8px) - 16px);box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;block-size:calc(100vh - env(safe-area-inset-top, 0px));min-block-size:100%;margin-block:0;margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-block:var(--md-comp-nav-rail-collapsed-top-space, 44px) 0;padding-inline:0;background-color:var(--md-comp-nav-rail-collapsed-container-color, var(--md-sys-color-surface));border:none;border-radius:var(--md-comp-nav-rail-collapsed-container-shape, 0px);box-shadow:var(--md-comp-nav-rail-collapsed-container-elevation, var(--md-sys-elevation-level0));overflow:hidden;z-index:9;interpolate-size:allow-keywords;transition:min-inline-size var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear,max-inline-size var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear,padding-block-start var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width)}.micl-navigationrail>.micl-navigationrail__headline{padding-inline-start:28px}.micl-navigationrail>.micl-navigationrail__content{box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;align-items:flex-start;inline-size:100%;row-gap:var(--_navigationrail-content-gap);padding-block:var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;padding-inline:20px;overflow:hidden auto;transition:row-gap var(--_navigationrail-morph-speed) linear}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item{--_navigationrail-item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);--_navigationrail-item-margin-bottom: 0px;--_navigationrail-item-padding-block: 12px;row-gap:var(--md-comp-nav-rail-collapsed-item-vertical-space, 4px)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:has(.micl-navigationrail__text){--_navigationrail-item-base-height: var(--md-comp-nav-rail-item-vertical-active-indicator-height, 32px);--_navigationrail-item-margin-bottom: 40px;--_navigationrail-item-padding-block: 0px}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:not(:has(.micl-navigationrail__icon)){--_navigationrail-item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);--_navigationrail-item-margin-bottom: 0px;--_navigationrail-item-padding-block: 0px;justify-content:center}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:not(:has(.micl-navigationrail__icon)) .micl-navigationrail__text{inline-size:fit-content;max-inline-size:100%;margin:0;padding-inline:8px;text-align:start;white-space:nowrap;text-overflow:ellipsis;animation:none !important;transition:padding-inline calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,margin-inline calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item{inline-size:var(--_navigationrail-item-width);block-size:var(--_navigationrail-item-target-height, var(--_navigationrail-item-base-height));margin-block-end:var(--_navigationrail-item-target-margin, var(--_navigationrail-item-margin-bottom));padding-block:var(--_navigationrail-item-target-padding, var(--_navigationrail-item-padding-block));flex-direction:var(--_navigationrail-item-direction);border-radius:var(--md-comp-nav-rail-item-container-shape, calc(var(--_navigationrail-item-target-height, var(--_navigationrail-item-base-height)) / 2));transition:inline-size calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,block-size calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,margin-block-end calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,padding-block calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,border-radius calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,flex-direction 0s calc(var(--_navigationrail-morph-speed)/2) linear allow-discrete,background-color calc(var(--_navigationrail-morph-speed)/2) linear,background-size 0ms,--statelayer-opacity var(--md-comp-nav-rail-motion-duration) linear}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__icon{font-size:var(--md-comp-nav-rail-item-icon-size, var(--md-sys-icon-size));inline-size:var(--md-comp-nav-rail-item-icon-size, var(--md-sys-icon-size));padding-inline:var(--md-comp-nav-rail-item-active-indicator-leading-space, 16px) var(--md-comp-nav-rail-item-active-indicator-trailing-space, 16px)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text{animation:var(--_navigationrail-text-animation);transition:font 0s calc(var(--_navigationrail-morph-speed)/2),letter-spacing 0s calc(var(--_navigationrail-morph-speed)/2),margin 0s calc(var(--_navigationrail-morph-speed)/2),padding 0s calc(var(--_navigationrail-morph-speed)/2)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:active{transition-duration:0ms,0ms,0ms,calc(var(--_navigationrail-morph-speed)/2),0ms,var(--md-comp-nav-rail-motion-duration)}.micl-navigationrail[open]{--micl-duration: var(--md-comp-nav-rail-motion-duration);border-start-end-radius:var(--md-comp-nav-rail-expanded-modal-container-shape, var(--md-sys-shape-corner-large));border-end-end-radius:var(--md-comp-nav-rail-expanded-modal-container-shape, var(--md-sys-shape-corner-large));box-shadow:var(--md-comp-nav-rail-expanded-modal-container-elevation, var(--md-sys-elevation-level2));background-color:var(--md-comp-nav-rail-expanded-modal-container-color, var(--md-sys-color-surface-container))}.micl-navigationrail[open]::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{.micl-navigationrail[open]::backdrop{background-color:rgba(0,0,0,0)}}.micl-navigationrail::backdrop{background-color:rgba(0,0,0,0);transition:background-color var(--micl-duration) linear,overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}dialog.micl-navigationrail,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true]){--_navigationrail-current-max-width: var(--md-comp-nav-rail-expanded-container-width-maximum, 360px);--_navigationrail-current-min-width: var(--md-comp-nav-rail-expanded-container-width-minimum, 220px);--_navigationrail-item-direction: row;--_navigationrail-item-width: fit-content;--_navigationrail-item-target-height: var(--md-comp-nav-rail-item-short-container-height, 56px);--_navigationrail-item-target-margin: 0px;--_navigationrail-item-target-padding: 16px;--_navigationrail-content-gap: 0px;--_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration);--_navigationrail-container-delay: 0ms;--_navigationrail-item-delay: calc(var(--_navigationrail-morph-speed) / 2);--_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-expanded;padding-block:var(--md-comp-nav-rail-expanded-top-space, 44px) 0;border-radius:var(--md-comp-nav-rail-expanded-container-shape, 0px);box-shadow:var(--md-comp-nav-rail-expanded-container-elevation, var(--md-sys-elevation-level0));background-color:var(--md-comp-nav-rail-expanded-container-color, var(--md-sys-color-surface))}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item{max-inline-size:100%}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item::before,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item::before{content:"";position:absolute;inset:0px;inset-inline-end:calc(-1*(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) - var(--md-comp-nav-rail-item-horizontal-full-width-trailing-space, 16px) - 100%));background-color:rgba(0,0,0,0)}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);margin-block-start:0;margin-inline-start:var(--_navigationrail-expanded-text-margin);padding-inline-end:16px}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:not(:has(.micl-navigationrail__icon)) .micl-navigationrail__text,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item:not(:has(.micl-navigationrail__icon)) .micl-navigationrail__text{margin-inline-start:0px;padding-inline-start:16px}nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not([aria-pressed=true])){--_navigationrail-morph-speed: var(--md-comp-nav-rail-morph-duration-reverse);--_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-collapsed}nav.micl-navigationrail{position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}dialog.micl-navigationrail{display:none;min-inline-size:calc(var(--md-comp-nav-rail-expanded-container-width-minimum, 220px) + var(--md-comp-nav-rail-spring-buffer));max-inline-size:calc(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--md-comp-nav-rail-spring-buffer));margin-inline-start:calc(-1*(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--md-comp-nav-rail-spring-buffer)));padding-inline:var(--md-comp-nav-rail-spring-buffer) 0;opacity:0%;transition:opacity var(--micl-duration) linear,margin-inline-start var(--micl-duration) var(--md-comp-nav-rail-motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}dialog.micl-navigationrail[open]{display:flex;margin-inline-start:calc(-1*var(--md-comp-nav-rail-spring-buffer));opacity:100%}@starting-style{dialog.micl-navigationrail[open]{margin-inline-start:calc(-1*(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--md-comp-nav-rail-spring-buffer)));opacity:0%}}@media(min-width: 600px){dialog.micl-navigationrail--modal-to-medium:not([open]){display:flex;position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width);margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-inline:0;opacity:100%;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}}@media(min-width: 840px){dialog.micl-navigationrail--modal-to-expanded:not([open]){display:flex;position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width);margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-inline:0;opacity:100%;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}}@media(min-width: 1200px){dialog.micl-navigationrail--modal-to-large:not([open]){display:flex;position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width);margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-inline:0;opacity:100%;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}}@media(min-width: 1600px){dialog.micl-navigationrail--modal-to-extralarge:not([open]){display:flex;position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width);margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-inline:0;opacity:100%;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}}@keyframes navigationrail-text-to-collapsed{0%{margin-block-start:0;opacity:100%}45%{margin-block-start:0;opacity:0%}55%{margin-block-start:-16px;opacity:0%}100%{margin-block-start:4px;opacity:100%}}@keyframes navigationrail-text-to-expanded{0%{margin-block-start:4px;opacity:100%}45%{margin-block-start:-16px;opacity:0%}55%{margin-block-start:0;opacity:0%}100%{margin-block-start:0;opacity:100%}}
|
|
1
|
+
: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}: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-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item{--micl-ripple: 1;--statelayer-color: var(--md-sys-color-on-secondary-container);box-sizing:border-box;display:flex;position:relative;align-items:center;outline:none;text-decoration:none;cursor:pointer;overflow:visible;background-color:rgba(0,0,0,0);background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}.micl-navigationrail>.micl-navigationrail__content>a.micl-rippling.micl-navigationrail__item{animation:micl-ripple calc(var(--md-sys-state-ripple-duration)*1.333)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__icon{margin:0;padding-block:4px;color:var(--md-sys-color-on-surface-variant);font-variation-settings:"FILL" 0}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text{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);min-block-size:var(--md-sys-typescale-label-medium-line-height);margin:4px 0px 0px 0px;color:var(--md-sys-color-on-surface-variant);overflow:hidden}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item[aria-current=page]{background-color:var(--md-sys-color-secondary-container)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item[aria-current=page] .micl-navigationrail__icon{color:var(--md-sys-color-on-secondary-container);font-variation-settings:"FILL" 1}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item[aria-current=page] .micl-navigationrail__text{color:var(--md-sys-color-secondary)}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-large: 16px}: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-backdrop-opacity: 32%}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}.micl-navigationrail{--_navigationrail-spring-buffer: var(--md-comp-nav-rail-spring-buffer, 100px);--_navigationrail-motion-spatial: var(--md-comp-nav-rail-motion-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));--_navigationrail-motion-duration: var(--md-comp-nav-rail-motion-duration, 650ms);--_navigationrail-motion-duration-reverse: var(--md-comp-nav-rail-motion-duration-reverse, 500ms);--_navigationrail-morph-duration: var(--md-comp-nav-rail-morph-duration, 350ms);--_navigationrail-morph-duration-reverse: var(--md-comp-nav-rail-morph-duration-reverse, 350ms);--_navigationrail-current-max-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);--_navigationrail-current-min-width: var(--md-comp-nav-rail-collapsed-container-width, 96px);--_navigationrail-item-direction: column;--_navigationrail-item-width: var(--md-comp-nav-rail-item-vertical-active-indicator-width, 56px);--_navigationrail-item-target-height: var(--_navigationrail-item-base-height);--micl-duration: var(--_navigationrail-motion-duration-reverse);--_navigationrail-content-gap: var(--md-comp-nav-rail-item-container-vertical-space, 6px);--_navigationrail-morph-speed: var(--_navigationrail-morph-duration-reverse);--_navigationrail-container-delay: calc(var(--_navigationrail-morph-speed) / 2);--_navigationrail-item-delay: 0ms;--_navigationrail-text-animation: none;--_navigationrail-expanded-text-margin: calc(var(--md-comp-nav-rail-item-active-indicator-icon-label-space, 8px) - 16px);box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;block-size:calc(100vh - env(safe-area-inset-top, 0px));min-block-size:100%;margin-block:0;margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-block:var(--md-comp-nav-rail-collapsed-top-space, 44px) 0;padding-inline:0;background-color:var(--md-comp-nav-rail-collapsed-container-color, var(--md-sys-color-surface));border:none;border-radius:var(--md-comp-nav-rail-collapsed-container-shape, 0px);box-shadow:var(--md-comp-nav-rail-collapsed-container-elevation, var(--md-sys-elevation-level0));overflow:hidden;z-index:9;interpolate-size:allow-keywords;transition:min-inline-size var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear,max-inline-size var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear,padding-block-start var(--_navigationrail-morph-speed) var(--_navigationrail-container-delay) linear;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width)}.micl-navigationrail>.micl-navigationrail__headline{padding-inline-start:28px}.micl-navigationrail>.micl-navigationrail__content{box-sizing:border-box;display:flex;flex-direction:column;flex:1 1 auto;align-items:flex-start;inline-size:100%;row-gap:var(--_navigationrail-content-gap);padding-block:var(--md-comp-nav-rail-item-header-space-minimum, 40px) 16px;padding-inline:20px;overflow:hidden auto;transition:row-gap var(--_navigationrail-morph-speed) linear}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item{--_navigationrail-item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);--_navigationrail-item-margin-bottom: 0px;--_navigationrail-item-padding-block: 12px;row-gap:var(--md-comp-nav-rail-collapsed-item-vertical-space, 4px)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:has(.micl-navigationrail__text){--_navigationrail-item-base-height: var(--md-comp-nav-rail-item-vertical-active-indicator-height, 32px);--_navigationrail-item-margin-bottom: 40px;--_navigationrail-item-padding-block: 0px}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:not(:has(.micl-navigationrail__icon)){--_navigationrail-item-base-height: var(--md-comp-nav-rail-item-short-container-height, 56px);--_navigationrail-item-margin-bottom: 0px;--_navigationrail-item-padding-block: 0px;justify-content:center}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:not(:has(.micl-navigationrail__icon)) .micl-navigationrail__text{inline-size:fit-content;max-inline-size:100%;margin:0;padding-inline:8px;text-align:start;white-space:nowrap;text-overflow:ellipsis;animation:none !important;transition:padding-inline calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,margin-inline calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item{inline-size:var(--_navigationrail-item-width);block-size:var(--_navigationrail-item-target-height, var(--_navigationrail-item-base-height));margin-block-end:var(--_navigationrail-item-target-margin, var(--_navigationrail-item-margin-bottom));padding-block:var(--_navigationrail-item-target-padding, var(--_navigationrail-item-padding-block));flex-direction:var(--_navigationrail-item-direction);border-radius:var(--md-comp-nav-rail-item-container-shape, calc(var(--_navigationrail-item-target-height, var(--_navigationrail-item-base-height)) / 2));transition:inline-size calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,block-size calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,margin-block-end calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,padding-block calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,border-radius calc(var(--_navigationrail-morph-speed)/2) var(--_navigationrail-item-delay) linear,flex-direction 0s calc(var(--_navigationrail-morph-speed)/2) linear allow-discrete,background-color calc(var(--_navigationrail-morph-speed)/2) linear,background-size 0ms,--statelayer-opacity var(--_navigationrail-motion-duration) linear}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__icon{font-size:var(--md-comp-nav-rail-item-icon-size, var(--md-sys-icon-size));inline-size:var(--md-comp-nav-rail-item-icon-size, var(--md-sys-icon-size));padding-inline:var(--md-comp-nav-rail-item-active-indicator-leading-space, 16px) var(--md-comp-nav-rail-item-active-indicator-trailing-space, 16px)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text{animation:var(--_navigationrail-text-animation);transition:font 0s calc(var(--_navigationrail-morph-speed)/2),letter-spacing 0s calc(var(--_navigationrail-morph-speed)/2),margin 0s calc(var(--_navigationrail-morph-speed)/2),padding 0s calc(var(--_navigationrail-morph-speed)/2)}.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:active{transition-duration:0ms,0ms,0ms,calc(var(--_navigationrail-morph-speed)/2),0ms,var(--_navigationrail-motion-duration)}.micl-navigationrail[open]{--micl-duration: var(--_navigationrail-motion-duration);border-start-end-radius:var(--md-comp-nav-rail-expanded-modal-container-shape, var(--md-sys-shape-corner-large));border-end-end-radius:var(--md-comp-nav-rail-expanded-modal-container-shape, var(--md-sys-shape-corner-large));box-shadow:var(--md-comp-nav-rail-expanded-modal-container-elevation, var(--md-sys-elevation-level2));background-color:var(--md-comp-nav-rail-expanded-modal-container-color, var(--md-sys-color-surface-container))}.micl-navigationrail[open]::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{.micl-navigationrail[open]::backdrop{background-color:rgba(0,0,0,0)}}.micl-navigationrail::backdrop{background-color:rgba(0,0,0,0);transition:background-color var(--micl-duration) linear,overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}dialog.micl-navigationrail,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true]){--_navigationrail-current-max-width: var(--md-comp-nav-rail-expanded-container-width-maximum, 360px);--_navigationrail-current-min-width: var(--md-comp-nav-rail-expanded-container-width-minimum, 220px);--_navigationrail-item-direction: row;--_navigationrail-item-width: fit-content;--_navigationrail-item-target-height: var(--md-comp-nav-rail-item-short-container-height, 56px);--_navigationrail-item-target-margin: 0px;--_navigationrail-item-target-padding: 16px;--_navigationrail-content-gap: 0px;--_navigationrail-morph-speed: var(--_navigationrail-morph-duration);--_navigationrail-container-delay: 0ms;--_navigationrail-item-delay: calc(var(--_navigationrail-morph-speed) / 2);--_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-expanded;padding-block:var(--md-comp-nav-rail-expanded-top-space, 44px) 0;border-radius:var(--md-comp-nav-rail-expanded-container-shape, 0px);box-shadow:var(--md-comp-nav-rail-expanded-container-elevation, var(--md-sys-elevation-level0));background-color:var(--md-comp-nav-rail-expanded-container-color, var(--md-sys-color-surface))}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item{max-inline-size:100%}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item::before,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item::before{content:"";position:absolute;inset:0px;inset-inline-end:calc(-1*(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) - var(--md-comp-nav-rail-item-horizontal-full-width-trailing-space, 16px) - 100%));background-color:rgba(0,0,0,0)}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);margin-block-start:0;margin-inline-start:var(--_navigationrail-expanded-text-margin);padding-inline-end:16px}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text:has(+.micl-badge--trailing),nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item .micl-navigationrail__text:has(+.micl-badge--trailing){padding-inline-end:0}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item .micl-badge--trailing,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item .micl-badge--trailing{margin-inline-end:16px}dialog.micl-navigationrail>.micl-navigationrail__content>a.micl-navigationrail__item:not(:has(.micl-navigationrail__icon)) .micl-navigationrail__text,nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle[aria-pressed=true])>.micl-navigationrail__content>a.micl-navigationrail__item:not(:has(.micl-navigationrail__icon)) .micl-navigationrail__text{margin-inline-start:0px;padding-inline-start:16px}nav.micl-navigationrail:has(>.micl-navigationrail__headline .micl-button--toggle.micl-button--toggled:not([aria-pressed=true])){--_navigationrail-morph-speed: var(--_navigationrail-morph-duration-reverse);--_navigationrail-text-animation: var(--_navigationrail-morph-speed) linear forwards navigationrail-text-to-collapsed}nav.micl-navigationrail{position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}dialog.micl-navigationrail{display:none;min-inline-size:calc(var(--md-comp-nav-rail-expanded-container-width-minimum, 220px) + var(--_navigationrail-spring-buffer));max-inline-size:calc(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--_navigationrail-spring-buffer));margin-inline-start:calc(-1*(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--_navigationrail-spring-buffer)));padding-inline:var(--_navigationrail-spring-buffer) 0;opacity:0%;transition:opacity var(--micl-duration) linear,margin-inline-start var(--micl-duration) var(--_navigationrail-motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}dialog.micl-navigationrail[open]{display:flex;margin-inline-start:calc(-1*var(--_navigationrail-spring-buffer));opacity:100%}@starting-style{dialog.micl-navigationrail[open]{margin-inline-start:calc(-1*(var(--md-comp-nav-rail-expanded-container-width-maximum, 360px) + var(--_navigationrail-spring-buffer)));opacity:0%}}@media(min-width: 600px){dialog.micl-navigationrail--modal-to-medium:not([open]){display:flex;position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width);margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-inline:0;opacity:100%;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}}@media(min-width: 840px){dialog.micl-navigationrail--modal-to-expanded:not([open]){display:flex;position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width);margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-inline:0;opacity:100%;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}}@media(min-width: 1200px){dialog.micl-navigationrail--modal-to-large:not([open]){display:flex;position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width);margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-inline:0;opacity:100%;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}}@media(min-width: 1600px){dialog.micl-navigationrail--modal-to-extralarge:not([open]){display:flex;position:sticky;float:inline-start;inset:unset;inset-block-start:env(safe-area-inset-top, 0px);inset-inline-start:0;min-inline-size:var(--_navigationrail-current-min-width);max-inline-size:var(--_navigationrail-current-max-width);margin-inline:calc(-1*var(--md-sys-layout-window-margin, 0px)) auto;padding-inline:0;opacity:100%;border-inline-end:var(--md-comp-nav-rail-divider-thickness, 0px) solid var(--md-comp-nav-rail-divider-color, var(--md-comp-divider-color))}}@keyframes navigationrail-text-to-collapsed{0%{margin-block-start:0;opacity:100%}45%{margin-block-start:0;opacity:0%}55%{margin-block-start:-16px;opacity:0%}100%{margin-block-start:4px;opacity:100%}}@keyframes navigationrail-text-to-expanded{0%{margin-block-start:4px;opacity:100%}45%{margin-block-start:-16px;opacity:0%}55%{margin-block-start:0;opacity:0%}100%{margin-block-start:0;opacity:100%}}
|
package/dist/radio.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
input[type=radio].micl-radio:not(:disabled)+label,label:has(+input[type=radio].micl-radio:not(:disabled))
|
|
1
|
+
input[type=radio].micl-radio:not(:disabled)+label,label:has(+input[type=radio].micl-radio:not(:disabled)),label:has(input[type=radio].micl-radio:not(:disabled)){cursor:pointer}input[type=radio].micl-radio+label,label:has(+input[type=radio].micl-radio),label:has(input[type=radio].micl-radio){color:var(--md-sys-color-on-surface);-webkit-tap-highlight-color:rgba(0,0,0,0)}input[type=radio].micl-radio:disabled+label,label:has(+input[type=radio].micl-radio:disabled){opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}label:has(input[type=radio].micl-radio: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}:root{--md-sys-state-ripple-opacity-factor: 0.6}:root{--md-sys-state-ripple-duration: 750ms}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}@keyframes micl-ripple{from{background-size:0% 0%,100%;animation-timing-function:cubic-bezier(0.2, 0, 0, 1)}60%{background-size:1000% 1000%,100%;animation-timing-function:cubic-bezier(0.3, 0, 1, 1)}to{background-size:10000% 10000%,100%}}input[type=radio].micl-radio{--_motion-effects: var(--md-comp-radio-button-motion-effects, cubic-bezier(0.34, 0.88, 0.34, 1));--_motion-duration: var(--md-comp-radio-button-motion-duration, 300ms);--_motion-duration-reverse: var(--md-comp-radio-button-motion-duration-reverse, 200ms);--_size: var(--md-comp-radio-button-icon-size, 20px);--_outline-width: var(--md-comp-radio-button-outline-width, 2px);--_layer: max(var(--md-sys-state-layer-size, 40px), calc(var(--_size) + 20px));--_target: max(var(--md-sys-state-target-size, 48px), calc(var(--_layer) + 8px));--statelayer-color: var(--md-sys-color-on-surface);appearance:none;box-sizing:border-box;position:relative;inline-size:var(--_target);min-inline-size:var(--_target);block-size:var(--_target);min-block-size:var(--_target);margin:0;border:calc((var(--_target) - var(--_layer))/2) solid rgba(0,0,0,0);background-clip:content-box;background-color:rgba(0,0,0,0);-webkit-tap-highlight-color:rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);outline-offset:calc(var(--md-sys-state-focus-indicator-outer-offset, 2px) - (var(--_target) - var(--_layer))/2)}input[type=radio].micl-radio::after{--_outline-color: var(--md-comp-radio-button-unselected-icon-color, var(--md-sys-color-on-surface-variant));content:"";box-sizing:border-box;position:absolute;inline-size:var(--_size);block-size:var(--_size);inset:0;margin:auto;padding:calc(var(--_size)/2 - var(--_outline-width));border:var(--_outline-width) solid var(--_outline-color);background-color:var(--md-comp-radio-button-selected-icon-color, var(--md-sys-color-primary));background-clip:content-box;border-radius:var(--md-sys-shape-corner-full);transition:padding var(--_motion-duration-reverse) var(--_motion-effects),border-color var(--_motion-duration-reverse) cubic-bezier(0.2, 0, 0, 1)}input[type=radio].micl-radio:checked{--statelayer-color: var(--md-sys-color-primary)}input[type=radio].micl-radio:checked::after{--_outline-color: var(--md-comp-radio-button-selected-icon-color, var(--md-sys-color-primary));padding:calc(var(--_size)/4 - var(--_outline-width));transition:padding var(--_motion-duration) var(--_motion-effects),border-color var(--_motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=radio].micl-radio:not(:disabled){--micl-ripple: 1;background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-position:var(--micl-x, center) var(--micl-y, center),0 0;background-size:0%,100%;cursor:pointer;transition:background-size 0ms,--statelayer-opacity var(--_motion-duration) linear}input[type=radio].micl-radio:not(:disabled):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity, 8%)}input[type=radio].micl-radio:not(:disabled):hover:not(:checked)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity, 10%);outline:var(--md-sys-state-focus-indicator-thickness, 3px) solid var(--md-sys-color-secondary)}input[type=radio].micl-radio:not(:disabled):focus-visible:not(:checked)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):active{--statelayer-color: var(--md-sys-color-on-surface);--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity, 10%)}input[type=radio].micl-radio:not(:disabled):active:not(:checked){--statelayer-color: var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):active:not(:checked)::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled).micl-rippling{animation:micl-ripple var(--md-sys-state-ripple-duration)}input[type=radio].micl-radio:disabled{opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%)}input[type=radio].micl-radio:disabled::after{--_outline-color: var(--md-sys-color-on-surface)}input[type=radio].micl-radio:disabled:checked::after{background-color:var(--md-sys-color-on-surface)}
|
package/dist/select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-state-disabled-state-layer-opacity: 38%}.micl-textfield-filled>select{--_line-height: calc(var(--md-comp-text-field-container-height, 56px) - 18px - 3px)}.micl-textfield-outlined>select{--_line-height: var(--md-comp-text-field-container-height, 56px)}:is(.micl-textfield-filled,.micl-textfield-outlined)>select{--md-comp-list-motion-effects
|
|
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}body{--md-sys-elevation-level2: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 2px 6px 2px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-state-disabled-state-layer-opacity: 38%}.micl-textfield-filled>select{--_line-height: calc(var(--md-comp-text-field-container-height, 56px) - 18px - 3px)}.micl-textfield-outlined>select{--_line-height: var(--md-comp-text-field-container-height, 56px)}:is(.micl-textfield-filled,.micl-textfield-outlined)>select{--_list-motion-effects: var(--md-comp-list-motion-effects, cubic-bezier(0.42, 1.67, 0.21, 0.9));--_list-motion-duration: var(--md-comp-list-motion-duration, 200ms);appearance:base-select;line-height:var(--_line-height)}:is(.micl-textfield-filled,.micl-textfield-outlined)>select::picker-icon{color:var(--md-comp-text-field-icon-color, var(--md-sys-color-on-surface-variant));transition:400ms rotate;transform-origin:50% calc(var(--_line-height)/2 - 1px)}:is(.micl-textfield-filled,.micl-textfield-outlined)>select:disabled::picker-icon{color:rgb(from var(--md-sys-color-on-surface) r g b/var(--md-sys-state-disabled-state-layer-opacity, 38%))}:is(.micl-textfield-filled,.micl-textfield-outlined)>select:open::picker-icon{rotate:180deg}:is(.micl-textfield-filled,.micl-textfield-outlined)>select::picker(select){--md-comp-divider-space: 0.5px;--_list-shape: var(--md-comp-list-container-shape, var(--md-sys-shape-corner-large, 16px));--_list-item-background-color: var(--md-comp-list-item-container-color, transparent);--_list-item-background-opacity: 0%;--micl-duration: var(--md-comp-menu-motion-spatial-duration-reverse);--micl-easing: linear;appearance:base-select;display:flex;flex-direction:column;position-try-order:most-block-size;position-try-fallbacks:flip-block,flip-inline;min-inline-size:max(anchor-size(self-inline),var(--md-comp-menu-width-min, 112px));max-inline-size:var(--md-comp-menu-width-max, 320px);gap:var(--md-comp-menu-gap, 2px);padding:4px;border-radius:var(--_list-shape);border:none;outline:none;background-color:var(--md-comp-menu-standard-container-color, var(--md-sys-color-surface-container-low));box-shadow:var(--md-comp-menu-container-elevation, var(--md-sys-elevation-level2));opacity:0;overflow-x:hidden;overflow-y:auto;transform:scaleY(0);transform-origin:var(--micl-select-picker-origin, top);transition:opacity var(--micl-duration) var(--micl-easing),transform var(--micl-duration) var(--md-comp-menu-motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}:is(.micl-textfield-filled,.micl-textfield-outlined)>select::picker(select):popover-open{--micl-duration: var(--md-comp-menu-motion-spatial-duration);--micl-easing: cubic-bezier(0.05, 0.7, 0.1, 1);opacity:1;transform:scaleY(1)}@starting-style{:is(.micl-textfield-filled,.micl-textfield-outlined)>select::picker(select):popover-open{opacity:0;transform:scaleY(0)}}:is(.micl-textfield-filled,.micl-textfield-outlined)>select[multiple]{--md-comp-divider-space: 0.5px;--_list-item-background-color: var(--md-comp-list-item-container-color, transparent);--_list-item-background-opacity: 0%;display:flex;flex-direction:column;gap:var(--md-comp-menu-gap, 2px);block-size:var(--md-comp-text-field-container-height, auto);min-block-size:var(--_height);padding-block:6px calc(4px - var(--_outline-extra, 0px));padding-inline:calc(4px - var(--_outline-extra, 0px));overflow-y:auto}:is(.micl-textfield-filled,.micl-textfield-outlined)>select[multiple]::picker-icon{display:none}:is(.micl-textfield-filled,.micl-textfield-outlined)>select option{line-height:normal}:is(.micl-textfield-filled,.micl-textfield-outlined)>select option .micl-list-item__text::after{content:attr(aria-description);overflow:hidden;text-overflow:ellipsis}:is(.micl-textfield-filled,.micl-textfield-outlined)>select option::checkmark{color:var(--_trailing-icon-color)}.micl-textfield-filled>select[multiple]{padding-block:24px calc(5px - var(--_outline-width, 1px))}@supports not (appearance: base-select){:is(.micl-textfield-filled,.micl-textfield-outlined)>select[multiple]{border-radius:0}:is(.micl-textfield-filled,.micl-textfield-outlined)>select[multiple] option{--micl-ripple: 0;appearance:none;background-position:var(--micl-x, center) var(--micl-y, center),0 0,0 0;background-size:0%,100%,100%;background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/calc(var(--statelayer-opacity) * var(--md-sys-state-ripple-opacity-factor))) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity))),linear-gradient(rgb(from var(--_list-item-background-color) r g b/var(--_list-item-background-opacity)));-webkit-text-fill-color:var(--_headline-color);transition:background-size 0ms,--statelayer-opacity var(--_list-motion-duration) linear}}[inert] :is(.micl-textfield-filled,.micl-textfield-outlined)>select::picker-icon{display:none}:is(.micl-textfield-filled,.micl-textfield-outlined)>select:dir(rtl):open::picker-icon{rotate:-180deg}
|
package/dist/sidesheet.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level0: none}body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}:root{--md-sys-shape-corner-none: 0px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-state-backdrop-opacity: 32%}:root{--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0}:root{--md-comp-sidesheet-container-width: 256px;--md-comp-sidesheet-container-max-width: 400px;--md-comp-sidesheet-padding: var(--md-sys-layout-window-margin, 24px)}body{--md-comp-sidesheet-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-comp-sidesheet-motion-duration: 650ms;--md-comp-sidesheet-motion-duration-reverse: 500ms}dialog.micl-sidesheet{--micl-spring-buffer: 40px;--micl-duration: var(--md-comp-sidesheet-motion-duration-reverse);box-sizing:border-box;display:none;flex-direction:column;min-inline-size:calc(var(--md-comp-sidesheet-container-width) + var(--micl-spring-buffer));max-inline-size:calc(var(--md-comp-sidesheet-container-max-width) + var(--micl-spring-buffer));block-size:100%;min-block-size:100%;margin-block:0;margin-inline-start:auto;margin-inline-end:calc(-1*(var(--md-comp-sidesheet-container-max-width) + var(--micl-spring-buffer)));padding-block:var(--md-comp-sidesheet-padding) 0;padding-inline:0 var(--micl-spring-buffer);background-color:var(--md-comp-sidesheet-standard-container-color, var(--md-sys-color-surface));border:none;border-radius:var(--md-comp-sidesheet-container-shape, var(--md-sys-shape-corner-none));box-shadow:var(--md-comp-sidesheet-standard-container-elevation, var(--md-sys-elevation-level0));opacity:0;overflow:hidden;transition:opacity var(--micl-duration) linear,margin-inline-end var(--micl-duration) var(--md-comp-sidesheet-motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}dialog.micl-sidesheet .micl-sidesheet__headline{display:flex;align-items:center;block-size:var(--md-sys-typescale-title-large-line-height);padding-inline:var(--md-comp-sidesheet-padding);margin-block-end:16px;column-gap:12px;color:var(--md-sys-color-on-surface-variant)}dialog.micl-sidesheet .micl-sidesheet__headline h1,dialog.micl-sidesheet .micl-sidesheet__headline h2,dialog.micl-sidesheet .micl-sidesheet__headline h3,dialog.micl-sidesheet .micl-sidesheet__headline h4,dialog.micl-sidesheet .micl-sidesheet__headline h5,dialog.micl-sidesheet .micl-sidesheet__headline h6,dialog.micl-sidesheet .micl-sidesheet__headline .micl-heading{font:var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);letter-spacing:var(--md-sys-typescale-title-large-tracking);flex:1 2 fit-content;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none}dialog.micl-sidesheet .micl-sidesheet__headline button{margin-inline:-12px}dialog.micl-sidesheet .micl-sidesheet__headline button:first-child{margin-inline-start:-16px}dialog.micl-sidesheet .micl-sidesheet__content{box-sizing:border-box;flex:1 1 auto;padding-inline:var(--md-comp-sidesheet-padding);overflow:hidden auto}dialog.micl-sidesheet .micl-sidesheet__actions{box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:start;padding-block:16px var(--md-comp-sidesheet-padding);padding-inline:var(--md-comp-sidesheet-padding);column-gap:8px;overflow:hidden}dialog.micl-sidesheet[open]{background-color:var(--md-comp-sidesheet-modal-container-color, var(--md-sys-color-surface-container-low));border-start-start-radius:var(--md-comp-sidesheet-modal-container-shape, var(--md-sys-shape-corner-large));border-end-start-radius:var(--md-comp-sidesheet-modal-container-shape, var(--md-sys-shape-corner-large));box-shadow:var(--md-comp-sidesheet-modal-container-elevation, var(--md-sys-elevation-level1))}dialog.micl-sidesheet:popover-open{border-inline-start:var(--md-comp-sidesheet-divider-thickness, 1px) solid var(--md-comp-sidesheet-divider-color, var(--md-sys-color-outline, gray))}dialog.micl-sidesheet:popover-open,dialog.micl-sidesheet[open]{--micl-duration: var(--md-comp-sidesheet-motion-duration);display:flex;margin-inline-end:calc(-1*var(--micl-spring-buffer));opacity:100%}@starting-style{dialog.micl-sidesheet:popover-open,dialog.micl-sidesheet[open]{margin-inline-end:calc(-1*(var(--md-comp-sidesheet-container-max-width) + var(--micl-spring-buffer)));opacity:0}}dialog.micl-sidesheet::backdrop{background-color:rgba(0,0,0,0);transition:background-color var(--micl-duration) linear}dialog.micl-sidesheet[open]::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{dialog.micl-sidesheet[open]::backdrop{background-color:rgba(0,0,0,0)}}body:has(dialog.micl-sidesheet[popover]){box-sizing:border-box;max-inline-size:100%;margin:0;transition:max-inline-size var(--md-comp-sidesheet-motion-duration-reverse)}body:has(dialog.micl-sidesheet:popover-open){max-inline-size:calc(100vw - var(--md-comp-sidesheet-container-max-width));transition:max-inline-size var(--md-comp-sidesheet-motion-duration) var(--md-comp-sidesheet-motion-spatial)}
|
|
1
|
+
: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-level0: none}body{--md-sys-elevation-level1: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 2px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 1px 3px 1px}:root{--md-sys-shape-corner-none: 0px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-state-backdrop-opacity: 32%}:root{--md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);--md-sys-typescale-title-large-size: 1.375rem;--md-sys-typescale-title-large-line-height: 1.75rem;--md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-title-large-tracking: 0}dialog.micl-sidesheet{--_width: min(var(--md-comp-sidesheet-container-width, 256px), var(--md-comp-sidesheet-container-max-width, 400px));--_padding: var(--md-comp-sidesheet-padding, var(--md-sys-layout-window-margin, 24px));--_motion-spatial: var(--md-comp-sidesheet-motion-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));--_motion-duration: var(--md-comp-sidesheet-motion-duration, 650ms);--_motion-duration-reverse: var(--md-comp-sidesheet-motion-duration-reverse, 500ms);--micl-spring-buffer: 40px;--micl-duration: var(--_motion-duration-reverse);box-sizing:border-box;display:none;flex-direction:column;inline-size:calc(var(--_width) + var(--micl-spring-buffer));max-inline-size:none;block-size:100dvb;max-block-size:none;margin-block:0;margin-inline-start:auto;margin-inline-end:calc(-1*(var(--_width) + var(--micl-spring-buffer)));padding-block:var(--_padding) 0;padding-inline:0 var(--micl-spring-buffer);color:var(--md-comp-sidesheet-content-color, var(--md-sys-color-on-surface));background-color:var(--md-comp-sidesheet-standard-container-color, var(--md-sys-color-surface));border:none;border-radius:var(--md-comp-sidesheet-container-shape, var(--md-sys-shape-corner-none));box-shadow:var(--md-comp-sidesheet-standard-container-elevation, var(--md-sys-elevation-level0));opacity:0;overflow:hidden;transition:opacity var(--micl-duration) linear,margin-inline-end var(--micl-duration) var(--_motion-spatial),overlay var(--micl-duration) linear allow-discrete,display var(--micl-duration) linear allow-discrete}dialog.micl-sidesheet .micl-sidesheet__headline{display:flex;align-items:center;min-block-size:var(--md-comp-sidesheet-headline-height, 40px);padding-inline:var(--_padding);margin-block-end:16px;column-gap:12px;color:var(--md-sys-color-on-surface-variant)}dialog.micl-sidesheet .micl-sidesheet__headline h1,dialog.micl-sidesheet .micl-sidesheet__headline h2,dialog.micl-sidesheet .micl-sidesheet__headline h3,dialog.micl-sidesheet .micl-sidesheet__headline h4,dialog.micl-sidesheet .micl-sidesheet__headline h5,dialog.micl-sidesheet .micl-sidesheet__headline h6,dialog.micl-sidesheet .micl-sidesheet__headline .micl-heading{font:var(--md-sys-typescale-title-large-weight) var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);letter-spacing:var(--md-sys-typescale-title-large-tracking);flex:1 2 fit-content;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}dialog.micl-sidesheet .micl-sidesheet__headline button{margin-inline:-8px}dialog.micl-sidesheet .micl-sidesheet__content{box-sizing:border-box;flex:1 1 auto;padding-block-end:var(--_padding);padding-inline:var(--_padding);overflow:hidden auto}dialog.micl-sidesheet .micl-sidesheet__actions{box-sizing:border-box;display:flex;flex-shrink:0;align-items:center;justify-content:start;padding-block:16px var(--_padding);padding-inline:var(--_padding);column-gap:8px;overflow:hidden}dialog.micl-sidesheet[open]{background-color:var(--md-comp-sidesheet-modal-container-color, var(--md-sys-color-surface-container-low));border-start-start-radius:var(--md-comp-sidesheet-modal-container-shape, var(--md-sys-shape-corner-large));border-end-start-radius:var(--md-comp-sidesheet-modal-container-shape, var(--md-sys-shape-corner-large));box-shadow:var(--md-comp-sidesheet-modal-container-elevation, var(--md-sys-elevation-level1))}dialog.micl-sidesheet:popover-open{border-inline-start:var(--md-comp-sidesheet-divider-thickness, 1px) solid var(--md-comp-sidesheet-divider-color, var(--md-sys-color-outline-variant, gray))}dialog.micl-sidesheet:popover-open,dialog.micl-sidesheet[open]{--micl-duration: var(--_motion-duration);display:flex;margin-inline-end:calc(-1*var(--micl-spring-buffer));opacity:100%}@starting-style{dialog.micl-sidesheet:popover-open,dialog.micl-sidesheet[open]{margin-inline-end:calc(-1*(var(--_width) + var(--micl-spring-buffer)));opacity:0}}dialog.micl-sidesheet::backdrop{background-color:rgba(0,0,0,0);transition:background-color var(--micl-duration) linear}dialog.micl-sidesheet[open]::backdrop{background-color:rgba(0, 0, 0, var(--md-sys-state-backdrop-opacity, 32%))}@starting-style{dialog.micl-sidesheet[open]::backdrop{background-color:rgba(0,0,0,0)}}@media(prefers-reduced-motion: reduce){dialog.micl-sidesheet{--_motion-duration: 0ms;--_motion-duration-reverse: 0ms}}@media(min-width: 600px){body:has(dialog.micl-sidesheet[popover]){box-sizing:border-box;max-inline-size:100%;margin:0;transition:max-inline-size var(--md-comp-sidesheet-motion-duration-reverse, 500ms)}body:has(dialog.micl-sidesheet:popover-open){max-inline-size:calc(100% - min(var(--md-comp-sidesheet-container-width, 256px),var(--md-comp-sidesheet-container-max-width, 400px)));transition:max-inline-size var(--md-comp-sidesheet-motion-duration, 650ms) var(--md-comp-sidesheet-motion-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98))}}@media(min-width: 600px)and (prefers-reduced-motion: reduce){body:has(dialog.micl-sidesheet[popover]),body:has(dialog.micl-sidesheet:popover-open){transition-duration:0s}}
|
package/dist/slider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}:root{--md-sys-shape-corner-small: 8px}:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-shape-corner-extra-large: 28px}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:root{--md-sys-motion-duration-medium2: 300ms}:root{--md-sys-motion-duration-long2: 500ms}input[type=range].micl-slider-xs{--_handle-height: var(--md-comp-slider-handle-height, 44px);--_track-height: var(--md-comp-slider-track-height, 16px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small))}input[type=range].micl-slider-s{--_handle-height: var(--md-comp-slider-handle-height, 44px);--_track-height: var(--md-comp-slider-track-height, 24px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small))}input[type=range].micl-slider-m{--_handle-height: var(--md-comp-slider-handle-height, 52px);--_track-height: var(--md-comp-slider-track-height, 40px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-medium))}input[type=range].micl-slider-l{--_handle-height: var(--md-comp-slider-handle-height, 68px);--_track-height: var(--md-comp-slider-track-height, 56px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-large))}input[type=range].micl-slider-xl{--_handle-height: var(--md-comp-slider-handle-height, 108px);--_track-height: var(--md-comp-slider-track-height, 96px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-extra-large))}input[type=range][class*=micl-slider-]{--_thumb-space: 6px;--_direction: to right;--_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));--_thumb-position: calc(var(--_fraction) * (100% - 16px));--_active-track-color: var(--md-comp-slider-active-track-color, var(--md-sys-color-primary));--_inactive-track-color: var(--md-comp-slider-inactive-track-color, var(--md-sys-color-secondary-container));--_handle-color: var(--md-comp-slider-handle-color, var(--md-sys-color-primary));appearance:none;position:relative;block-size:var(--_track-height);margin:0;outline:none;color:var(--md-sys-color-surface-container-low);background-color:inherit;accent-color:var(--md-sys-color-primary)}input[type=range][class*=micl-slider-]::before{content:attr(data-miclsliderticks);box-sizing:border-box;position:absolute;inline-size:100%;max-inline-size:100%;block-size:var(--_track-height);line-height:var(--_track-height);padding:0 4px;inset:0;color:var(--md-comp-slider-stop-indicator-color, var(--md-sys-color-on-primary));mix-blend-mode:difference;text-align:end;text-wrap-mode:nowrap}input[type=range][class*=micl-slider-]::after{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--_tip-space: 4px;content:var(--micl-slider-tip);box-sizing:border-box;position:absolute;inline-size:fit-content;min-inline-size:48px;block-size:40px;inset:0;inset-block-start:calc(-1*(var(--_handle-height) - var(--_track-height))/2 - 40px - var(--_tip-space));inset-inline-start:calc(-16px + (100% - 16px)*var(--_fraction));padding-block:12px;padding-inline:16px;border-radius:20px;background-color:var(--md-comp-slider-value-indicator-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-slider-value-indicator-label-text-color, var(--md-sys-color-inverse-on-surface));text-align:center;opacity:0;z-index:3;transition:opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1)}input[type=range][class*=micl-slider-]::-webkit-slider-container{background-color:inherit}input[type=range][class*=micl-slider-]::-webkit-slider-runnable-track{block-size:var(--_track-height);border-radius:var(--_track-shape);background-color:inherit;background-image:linear-gradient(var(--_direction), var(--_active-track-color) var(--_thumb-position), transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px), var(--_inactive-track-color) calc(var(--_thumb-position) + 16px))}input[type=range][class*=micl-slider-]::-moz-range-track{block-size:var(--_track-height);border-radius:var(--_track-shape);background-color:inherit;background-image:linear-gradient(var(--_direction), var(--_active-track-color) var(--_thumb-position), transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px), var(--_inactive-track-color) calc(var(--_thumb-position) + 16px))}input[type=range][class*=micl-slider-]::-webkit-slider-thumb{appearance:none;box-sizing:content-box;position:relative;inline-size:16px;block-size:var(--_handle-height);inset:0;inset-block-start:calc(-1*(var(--_handle-height) - var(--_track-height) + 8px)/2);padding-block:4px;border:none;border-radius:8px;background-image:linear-gradient(var(--_direction), transparent 0px, transparent var(--_thumb-space), var(--_handle-color) var(--_thumb-space), var(--_handle-color) 10px, transparent 10px, transparent 16px);background-clip:content-box;cursor:pointer;z-index:2}input[type=range][class*=micl-slider-]::-moz-range-thumb{appearance:none;box-sizing:content-box;position:relative;inline-size:16px;block-size:var(--_handle-height);inset:0;inset-block-start:calc(-1*(var(--_handle-height) - var(--_track-height) + 8px)/2);padding-block:4px;border:none;border-radius:8px;background-image:linear-gradient(var(--_direction), transparent 0px, transparent var(--_thumb-space), var(--_handle-color) var(--_thumb-space), var(--_handle-color) 10px, transparent 10px, transparent 16px);background-clip:content-box;cursor:pointer;z-index:2}input[type=range][class*=micl-slider-]::-moz-range-progress{block-size:var(--_track-height)}input[type=range][class*=micl-slider-]:disabled::-webkit-slider-runnable-track{background-image:linear-gradient(var(--_direction), color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), transparent) var(--_thumb-position), transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px), color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) calc(var(--_thumb-position) + 16px))}input[type=range][class*=micl-slider-]:disabled::-moz-range-track{background-image:linear-gradient(var(--_direction), color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), transparent) var(--_thumb-position), transparent var(--_thumb-position) calc(var(--_thumb-position) + 16px), color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) calc(var(--_thumb-position) + 16px))}input[type=range][class*=micl-slider-]:disabled::-webkit-slider-thumb{background-image:linear-gradient(var(--_direction), transparent 0px, transparent var(--_thumb-space), color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) var(--_thumb-space), color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) 10px, transparent 10px, transparent 16px);cursor:default}input[type=range][class*=micl-slider-]:disabled::-moz-range-thumb{background-image:linear-gradient(var(--_direction), transparent 0px, transparent var(--_thumb-space), color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) var(--_thumb-space), color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface)) 10px, transparent 10px, transparent 16px);cursor:default}input[type=range][class*=micl-slider-].micl-slider--vertical{--_direction: to top;writing-mode:sideways-lr}input[type=range][class*=micl-slider-].micl-slider--vertical::after{--_tip-space: 8px;transform:rotate(90deg)}input[type=range][class*=micl-slider-]:not(:disabled):active::after,input[type=range][class*=micl-slider-]:not(:disabled):focus::after,input[type=range][class*=micl-slider-]:not(:disabled):focus-visible::after{opacity:1;transition:opacity var(--md-sys-motion-duration-medium2) cubic-bezier(0.3, 0, 0.8, 0.15)}input[type=range][class*=micl-slider-]:not(:disabled):focus-visible::-webkit-slider-thumb{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary)}input[type=range][class*=micl-slider-]:not(:disabled):focus-visible::-moz-range-thumb{outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary)}input[type=range][class*=micl-slider-]:not(:disabled):active::-webkit-slider-thumb{background-image:linear-gradient(var(--_direction), transparent 0px, transparent calc(var(--_thumb-space) + 1px), var(--_handle-color) calc(var(--_thumb-space) + 1px), var(--_handle-color) calc(var(--_thumb-space) + 3px), transparent calc(var(--_thumb-space) + 3px), transparent calc(2 * var(--_thumb-space) + 4px));outline:none;cursor:grabbing}input[type=range][class*=micl-slider-]:not(:disabled):active::-moz-range-thumb{background-image:linear-gradient(var(--_direction), transparent 0px, transparent calc(var(--_thumb-space) + 1px), var(--_handle-color) calc(var(--_thumb-space) + 1px), var(--_handle-color) calc(var(--_thumb-space) + 3px), transparent calc(var(--_thumb-space) + 3px), transparent calc(2 * var(--_thumb-space) + 4px));outline:none;cursor:grabbing}.micl-slider__container{display:grid;grid-template-areas:"slider-icon";flex-shrink:0;align-items:center;justify-items:flex-start;background-color:inherit}.micl-slider__container:has(>.micl-slider-m,>.micl-slider-l,>.micl-slider-xl) .micl-slider__icon{grid-area:slider-icon;inset:0;margin:6px;font-size:var(--md-sys-icon-size, 24px);color:var(--md-sys-color-on-primary);z-index:1}.micl-slider__container>input[type=range]{grid-area:slider-icon}.micl-slider__container .micl-slider__icon:has(+input[type=range].micl-slider-xl),.micl-slider__container input[type=range].micl-slider-xl+.micl-slider__icon{margin:8px;font-size:32px}@supports(-moz-appearance: none){.micl-slider__container:has(>input[type=range]){--_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));position:relative}.micl-slider__container:has(>input[type=range])::after{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--_tip-space: 4px;content:var(--micl-slider-tip);box-sizing:border-box;position:absolute;inline-size:fit-content;min-inline-size:48px;block-size:40px;inset:0;inset-block-start:calc(-1*(var(--_handle-height) - var(--_track-height))/2 - 40px - var(--_tip-space));inset-inline-start:calc(-16px + (100% - 16px)*var(--_fraction));padding-block:12px;padding-inline:16px;border-radius:20px;background-color:var(--md-comp-slider-value-indicator-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-slider-value-indicator-label-text-color, var(--md-sys-color-inverse-on-surface));text-align:center;opacity:0;z-index:3;transition:opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1)}.micl-slider__container:has(>input[type=range]:not(:disabled):active)::after,.micl-slider__container:has(>input[type=range]:not(:disabled):focus)::after,.micl-slider__container:has(>input[type=range]:not(:disabled):focus-visible)::after{opacity:1}.micl-slider__container:has(>input[type=range].micl-slider--vertical){--_direction: to top;writing-mode:sideways-lr}.micl-slider__container:has(>input[type=range].micl-slider--vertical)::after{--_tip-space: 8px;transform:rotate(90deg)}}input[type=range].micl-slider--vertical:dir(rtl),.micl-slider__container:dir(rtl):has(>input[type=range].micl-slider--vertical){writing-mode:sideways-rl}input[type=range].micl-slider--vertical:dir(rtl)::after,.micl-slider__container:dir(rtl):has(>input[type=range].micl-slider--vertical)::after{transform:rotate(-90deg)}input[type=range][class*=micl-slider-]:dir(rtl):not(.micl-slider--vertical){--_direction: to left}
|
|
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-medium: 12px}:root{--md-sys-shape-corner-large: 16px}:root{--md-sys-shape-corner-extra-large: 28px}:root{--md-sys-state-disabled-state-layer-opacity: 38%}:root{--md-sys-state-focus-indicator-thickness: 3px}:root{--md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);--md-sys-typescale-label-large-size: 0.875rem;--md-sys-typescale-label-large-line-height: 1.25rem;--md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-medium);--md-sys-typescale-label-large-tracking: 0.00625rem}:root{--md-sys-motion-duration-medium2: 300ms}:root{--md-sys-motion-duration-long2: 500ms}input[type=range].micl-slider-xs,.micl-slider__container:has(>.micl-slider-xs){--_handle-height: var(--md-comp-slider-handle-height, 44px);--_track-height: var(--md-comp-slider-track-height, 16px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small))}input[type=range].micl-slider-s,.micl-slider__container:has(>.micl-slider-s){--_handle-height: var(--md-comp-slider-handle-height, 44px);--_track-height: var(--md-comp-slider-track-height, 24px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-small))}input[type=range].micl-slider-m,.micl-slider__container:has(>.micl-slider-m){--_handle-height: var(--md-comp-slider-handle-height, 52px);--_track-height: var(--md-comp-slider-track-height, 40px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-medium))}input[type=range].micl-slider-l,.micl-slider__container:has(>.micl-slider-l){--_handle-height: var(--md-comp-slider-handle-height, 68px);--_track-height: var(--md-comp-slider-track-height, 56px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-large))}input[type=range].micl-slider-xl,.micl-slider__container:has(>.micl-slider-xl){--_handle-height: var(--md-comp-slider-handle-height, 108px);--_track-height: var(--md-comp-slider-track-height, 96px);--_track-shape: var(--md-comp-slider-track-shape, var(--md-sys-shape-corner-extra-large))}input[type=range][class*=micl-slider-]{--_min: var(--micl-slider-min, attr(min type(<number>), 0));--_max: var(--micl-slider-max, attr(max type(<number>), 100));--_value: var(--micl-slider-value, attr(value type(<number>), calc((var(--_min) + var(--_max)) / 2)));--_fraction: calc((var(--_value) - var(--_min)) / (var(--_max) - var(--_min)));--_thumb-position: calc(var(--_fraction) * (100% - 16px));--_handle-inset: 0px;--_handle-outline: none;--_cursor: pointer;--_active-track-color: var(--md-comp-slider-active-track-color, var(--md-sys-color-primary));--_inactive-track-color: var(--md-comp-slider-inactive-track-color, var(--md-sys-color-secondary-container));--_handle-color: var(--md-comp-slider-handle-color, var(--md-sys-color-primary));--_active-stop-color: var(--md-comp-slider-active-stop-indicator-container-color, var(--md-sys-color-on-primary));--_inactive-stop-color: var(--md-comp-slider-inactive-stop-indicator-container-color, var(--md-sys-color-on-secondary-container));--_direction: to right;--_handle-radius: 8px / calc(6px - var(--_handle-inset));--_kx: 1;--_cx: 0px;--_ky: 0;--_cy: 50%;--_stops: var(--micl-slider-stops, none);--_stops-progress: var(--micl-slider-stops-progress, none);--_end-stop: radial-gradient( circle 2px at calc(var(--_kx) * (100% - 8px) + var(--_cx)) calc(var(--_ky) * (100% - 8px) + var(--_cy)), currentColor 100%, transparent 0 );--_active-fill: linear-gradient(var(--_direction), var(--_active-track-color) calc(var(--_thumb-position) - 2px), transparent 0);--_corner-offset: calc(var(--_fraction) * (100% - 12px) - 4px);--_corner-direction: to bottom;--_corner-start: 2px 100%;--_corner-end: 2px 0;--_corner-image: linear-gradient(var(--_corner-direction), transparent 2px, var(--_active-track-color) 0 calc(100% - 2px), transparent 0), radial-gradient(circle 2px at var(--_corner-start), var(--_active-track-color) 100%, transparent 0), radial-gradient(circle 2px at var(--_corner-end), var(--_active-track-color) 100%, transparent 0);--_corner-size: 4px 100%, 4px 2px, 4px 2px;--_corner-position: left var(--_corner-offset) center, left var(--_corner-offset) top 0, left var(--_corner-offset) bottom 0;--_inactive-clip: inset(0 0 0 calc(var(--_thumb-position) + 16px) round 2px var(--_track-shape) var(--_track-shape) 2px);--_active-clip: inset(0 calc(100% - var(--_thumb-position)) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape));--_progress-inset: calc(16px * var(--_fraction));--_progress-radius: calc(2px + 16px * var(--_fraction)) 2px;appearance:none;position:relative;block-size:var(--_track-height);margin:0;outline:none;border-radius:var(--_track-shape);background-color:rgba(0,0,0,0);background-image:var(--_corner-image),var(--_active-fill);background-size:var(--_corner-size),auto;background-position:var(--_corner-position),0 0;background-repeat:no-repeat;accent-color:var(--md-sys-color-primary)}input[type=range][class*=micl-slider-]::before{block-size:var(--_track-height);clip-path:var(--_inactive-clip);color:var(--_inactive-stop-color);background-color:var(--_inactive-track-color);background-image:var(--_end-stop),var(--_stops);content:"";position:absolute;inset:0}input[type=range][class*=micl-slider-]:not(:disabled)::after{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--_tip-space: 4px;content:var(--micl-slider-tip);box-sizing:border-box;position:absolute;inline-size:fit-content;min-inline-size:48px;block-size:40px;inset:auto;padding-block:12px;padding-inline:16px;border-radius:20px;background-color:var(--md-comp-slider-value-indicator-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-slider-value-indicator-label-text-color, var(--md-sys-color-inverse-on-surface));text-align:center;opacity:0;z-index:3;transition:opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1);inset-block-start:calc(-1*(var(--_handle-height) - var(--_track-height))/2 - 40px - var(--_tip-space));inset-inline-start:calc(-16px + (100% - 16px)*var(--_fraction))}input[type=range][class*=micl-slider-]:disabled::after{block-size:var(--_track-height);clip-path:var(--_active-clip);color:var(--_active-stop-color);background-color:var(--_active-track-color);background-image:var(--_stops);content:"";position:absolute;inset:0}input[type=range][class*=micl-slider-]::-webkit-slider-runnable-track{block-size:var(--_track-height);color:var(--_active-stop-color);background-color:rgba(0,0,0,0);background-image:var(--_stops)}input[type=range][class*=micl-slider-]::-moz-range-track{block-size:var(--_track-height);clip-path:var(--_inactive-clip);color:var(--_inactive-stop-color);background-color:var(--_inactive-track-color);background-image:var(--_end-stop),var(--_stops)}input[type=range][class*=micl-slider-]::-moz-range-progress{box-sizing:border-box;block-size:var(--_track-height);border-inline-end:var(--_progress-inset) solid rgba(0,0,0,0);color:var(--_active-stop-color);background-clip:padding-box;background-color:rgba(0,0,0,0);background-image:var(--_stops-progress)}input[type=range][class*=micl-slider-]::-webkit-slider-thumb{appearance:none;box-sizing:content-box;position:relative;inline-size:calc(4px - 2*var(--_handle-inset));block-size:var(--_handle-height);inset:0;inset-block-start:calc(-1*(var(--_handle-height) - var(--_track-height) + 8px)/2);padding-block:4px;padding-inline:calc(6px + var(--_handle-inset));border:none;border-radius:var(--_handle-radius);outline:var(--_handle-outline);background-color:var(--_handle-color);background-clip:content-box;cursor:var(--_cursor);z-index:2}input[type=range][class*=micl-slider-]::-moz-range-thumb{appearance:none;box-sizing:content-box;position:relative;inline-size:calc(4px - 2*var(--_handle-inset));block-size:var(--_handle-height);inset:0;inset-block-start:calc(-1*(var(--_handle-height) - var(--_track-height) + 8px)/2);padding-block:4px;padding-inline:calc(6px + var(--_handle-inset));border:none;border-radius:var(--_handle-radius);outline:var(--_handle-outline);background-color:var(--_handle-color);background-clip:content-box;cursor:var(--_cursor);z-index:2}input[type=range][class*=micl-slider-]:disabled{--_active-track-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), transparent);--_inactive-track-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);--_handle-color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-state-layer-opacity), var(--md-sys-color-surface));--_active-stop-color: var(--md-sys-color-inverse-on-surface);--_inactive-stop-color: var(--md-sys-color-on-surface);--_cursor: default;background-image:none}input[type=range][class*=micl-slider-]:disabled::-webkit-slider-runnable-track{background-image:none}input[type=range][class*=micl-slider-]:disabled::-moz-range-progress{border-start-start-radius:var(--_track-shape);border-end-start-radius:var(--_track-shape);border-start-end-radius:var(--_progress-radius);border-end-end-radius:var(--_progress-radius);background-color:var(--_active-track-color)}input[type=range][class*=micl-slider-]:not(:disabled):is(:active,:focus)::after{opacity:1;transition:opacity var(--md-sys-motion-duration-medium2) cubic-bezier(0.3, 0, 0.8, 0.15)}input[type=range][class*=micl-slider-]:not(:disabled):focus-visible{--_handle-inset: 1px;--_handle-outline: var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary)}input[type=range][class*=micl-slider-]:not(:disabled):active{--_handle-inset: 1px;--_handle-outline: none;--_cursor: grabbing}input[type=range][class*=micl-slider-].micl-slider--vertical{--_direction: to top;--_kx: 0;--_cx: 50%;--_ky: -1;--_cy: 100%;--_handle-radius: calc(6px - var(--_handle-inset)) / 8px;--_corner-direction: to right;--_corner-start: 100% 2px;--_corner-end: 0 2px;--_corner-size: 100% 4px, 2px 4px, 2px 4px;--_corner-position: center bottom var(--_corner-offset), left 0 bottom var(--_corner-offset), right 0 bottom var(--_corner-offset);--_inactive-clip: inset(0 0 calc(var(--_thumb-position) + 16px) 0 round var(--_track-shape) var(--_track-shape) 2px 2px);--_active-clip: inset(calc(100% - var(--_thumb-position)) 0 0 0 round 2px 2px var(--_track-shape) var(--_track-shape));--_progress-radius: 2px calc(2px + 16px * var(--_fraction));writing-mode:sideways-lr}input[type=range][class*=micl-slider-].micl-slider--vertical:not(:disabled)::after{--_tip-space: 8px;transform:rotate(90deg)}input[type=range][class*=micl-slider-]:dir(rtl):not(.micl-slider--vertical){--_direction: to left;--_kx: -1;--_cx: 100%;--_corner-start: calc(100% - 2px) 100%;--_corner-end: calc(100% - 2px) 0;--_corner-position: right var(--_corner-offset) center, right var(--_corner-offset) top 0, right var(--_corner-offset) bottom 0;--_inactive-clip: inset(0 calc(var(--_thumb-position) + 16px) 0 0 round var(--_track-shape) 2px 2px var(--_track-shape));--_active-clip: inset(0 0 0 calc(100% - var(--_thumb-position)) round 2px var(--_track-shape) var(--_track-shape) 2px)}.micl-slider__container{--_fraction: calc((var(--micl-slider-value) - var(--micl-slider-min)) / (var(--micl-slider-max) - var(--micl-slider-min)));display:grid;grid-template-areas:"slider-icon";position:relative;flex-shrink:0;align-items:center;justify-items:flex-start;anchor-scope:--micl-slider}.micl-slider__container:has(>.micl-slider-m,>.micl-slider-l,>.micl-slider-xl) .micl-slider__icon{grid-area:slider-icon;margin:6px;font-size:var(--md-sys-icon-size, 24px);color:var(--md-sys-color-on-primary);z-index:1}.micl-slider__container>input[type=range]{grid-area:slider-icon;anchor-name:--micl-slider}.micl-slider__container>input[type=range]:not(:disabled)::after{content:none}.micl-slider__container .micl-slider__icon:has(+input[type=range].micl-slider-xl),.micl-slider__container input[type=range].micl-slider-xl+.micl-slider__icon{margin:8px;font-size:32px}.micl-slider__container::after{font:var(--md-sys-typescale-label-large-weight) var(--md-sys-typescale-label-large-size)/var(--md-sys-typescale-label-large-line-height) var(--md-sys-typescale-label-large-font);letter-spacing:var(--md-sys-typescale-label-large-tracking);--_tip-space: 4px;content:var(--micl-slider-tip);box-sizing:border-box;position:absolute;inline-size:fit-content;min-inline-size:48px;block-size:40px;inset:auto;padding-block:12px;padding-inline:16px;border-radius:20px;background-color:var(--md-comp-slider-value-indicator-container-color, var(--md-sys-color-inverse-surface));color:var(--md-comp-slider-value-indicator-label-text-color, var(--md-sys-color-inverse-on-surface));text-align:center;opacity:0;z-index:3;transition:opacity var(--md-sys-motion-duration-long2) cubic-bezier(0.05, 0.7, 0.1, 1);position-anchor:--micl-slider;inset-block-start:calc(anchor(start) - (var(--_handle-height) - var(--_track-height))/2 - 40px - var(--_tip-space));inset-inline-start:calc(anchor(start) - 16px + (anchor-size(inline) - 16px)*var(--_fraction))}.micl-slider__container:has(>input[type=range]:not(:disabled):is(:active,:focus))::after{opacity:1;transition:opacity var(--md-sys-motion-duration-medium2) cubic-bezier(0.3, 0, 0.8, 0.15)}.micl-slider__container:has(>.micl-slider--vertical){writing-mode:sideways-lr}.micl-slider__container:has(>.micl-slider--vertical)::after{--_tip-space: 8px;transform:rotate(90deg)}input[type=range].micl-slider--vertical:dir(rtl),.micl-slider__container:dir(rtl):has(>.micl-slider--vertical){writing-mode:sideways-rl}input[type=range].micl-slider--vertical:dir(rtl):not(:disabled)::after,.micl-slider__container:dir(rtl):has(>.micl-slider--vertical)::after{transform:rotate(-90deg)}
|