material-inspired-component-library 9.0.2 → 9.1.1
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 +5 -1
- package/components/bottomsheet/index.scss +2 -2
- package/components/button/_shared.scss +3 -3
- 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 +29 -19
- package/components/chip/index.scss +6 -6
- package/components/datepicker/index.scss +1 -1
- package/components/iconbutton/index.scss +3 -3
- package/components/list/index.scss +9 -5
- package/components/navigationrail/README.md +10 -9
- package/components/radio/README.md +52 -12
- package/components/radio/index.scss +53 -35
- package/components/stepper/index.scss +1 -1
- package/components/switch/README.md +32 -4
- package/components/switch/index.scss +45 -40
- package/components/timepicker/index.scss +1 -1
- package/dist/appbar.css +1 -1
- package/dist/bottomsheet.css +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/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/micl.css +1 -1
- package/dist/micl.d.ts +0 -1
- package/dist/micl.js +1 -1
- package/dist/navigationbar.css +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/navigationrail.js +1 -1
- package/dist/radio.css +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/snackbar.css +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/foundations/layout/index.scss +6 -3
- package/package.json +3 -3
- package/{components/checkbox/_label.scss → styles/togglelabel.scss} +11 -3
- package/dist/components/navigationrail/index.d.ts +0 -7
package/dist/micl.d.ts
CHANGED
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:()=>Fe});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"})},C=e=>{const t=new Date(e);return t.setHours(0,0,0,0),t},q=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,z=(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},N=(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:q(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=C(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=_())}),N(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)),N(e.querySelector(`.${$}month`),A.monthShort.format(t.viewDate)),N(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=C(o),s&&H(s)?(s=C(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?z(t.invoker,`${q(t.selected)}/${q(n)}`,`${t.selected.toLocaleDateString()} – ${n.toLocaleDateString()}`):(z(t.invoker,q(t.selected),t.selected.toLocaleDateString()),t.invokerEnd&&z(t.invokerEnd,q(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),".micl-navigationrail"),W=new WeakMap,X=(m(U,{initialize:e=>{if(!e.matches(U)||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=t=>{const n=t.target.closest("a.micl-navigationrail__item");n&&(e.querySelectorAll("a.micl-navigationrail__item").forEach(e=>e.removeAttribute("aria-current")),n.setAttribute("aria-current","page"))};W.set(e,{boundHandleClick:t}),e.addEventListener("click",t)},keydown:e=>{e instanceof KeyboardEvent&&e.target instanceof HTMLElement&&e.target.matches(".micl-navigationrail__item")&&(32!==e.keyCode&&" "!==e.key||(e.preventDefault(),e.target.click()))},cleanup:e=>{const t=W.get(e);t&&e.removeEventListener("click",t.boundHandleClick),delete e.dataset.miclinitialized}},HTMLElement),"input[type=range][class*=micl-slider-]"),K=String.fromCharCode(8226),J=String.fromCharCode(8201),G=e=>e.parentElement?.classList.contains("micl-slider__container")?e.parentElement:null,Q=(e,t)=>{e.dataset.miclsliderticks=t},Z=e=>{let t=JSON.stringify(e.value+""),n=G(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)},ee=(m(X,{initialize:e=>{if(!e.matches(X))return;(e=>{let t=e.max||"100";G(e)?.style.setProperty("--micl-slider-max",t),e.style.setProperty("--micl-slider-max",t)})(e),(e=>{let t=e.min||"0";G(e)?.style.setProperty("--micl-slider-min",t),e.style.setProperty("--micl-slider-min",t)})(e),Z(e),(e=>{let t=G(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(J).width,r=n.measureText(K).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+=J,o+=t;s+=K,o+=r}),Q(e,s)}t.remove()}else Q(e,K)},input:e=>{e.target.matches(X)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&Z(e.target)}},HTMLInputElement),".micl-snackbar"),te=new WeakMap,ne=e=>{const t=te.get(e);t&&t.timeoutid&&(clearTimeout(t.timeoutid),t.timeoutid=void 0)},ae=e=>{ne(e);const t=te.get(e);t&&(t.timeoutid=window.setTimeout(()=>{e.isConnected&&e.matches(":popover-open")&&e.hidePopover()},t.delay))},ie=(m(ee,{initialize:e=>{if(!e.matches(ee)||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=()=>ne(e),i=t=>{"open"===t.newState?ae(e):ne(e)},r=()=>{e.matches(":popover-open")&&ae(e)};te.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=te.get(e);t&&(ne(e),e.removeEventListener("toggle",t.boundHandleToggle),e.removeEventListener("mouseenter",t.boundClearTimer),e.removeEventListener("mouseleave",t.boundHandleMouseLeave),te.delete(e)),delete e.dataset.miclinitialized}},HTMLElement),e=>"willValidate"in e),re=e=>{const t=e.target;ie(t)&&t.setCustomValidity("")},le=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",re):m.removeEventListener("change",re))}}},oe=(e,t)=>{let n=!1;return e.querySelectorAll("fieldset").forEach(le),Array.from(e.elements).forEach(e=>{if(ie(e)&&e.willValidate){e.checkValidity()||(n=!0);let a=(e=>{if(!e.parentElement||!ie(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},se=".micl-stepper",ce=".micl-stepper__action-back,.micl-stepper__action-next",de=".micl-stepper__header button[role=tab][aria-controls]",me="micl-stepper__step",ue="."+me,pe=e=>e.querySelector(`${ue}[aria-current=step]`)||ge(e,e.querySelector(ue)),he=(e,t)=>Array.from(e.querySelectorAll(ue)).indexOf(t)+1,ge=(e,t)=>{if(!t)return null;let n=0;e.querySelectorAll(ue).forEach((e,a)=>{e.setAttribute("aria-current",e===t?"step":"false"),e===t&&(n=a)});const a=e.querySelectorAll(de).item(n);return e.querySelectorAll(de).forEach(e=>{e.setAttribute("aria-selected",e===a?"true":"false")}),ve(e,t),t},fe=e=>{const t=e.currentTarget;"transform"===e.propertyName&&t&&(t.classList.remove("micl-stepper__step--fromselected","micl-stepper__step--toselected"),t.removeEventListener("transitionend",fe))},ye=e=>e.classList.contains("micl-stepper__action-back"),ve=(e,t)=>{((e,t)=>{Array.from(e.querySelectorAll(ce)).forEach(e=>{const n=ye(e)?"previousElementSibling":"nextElementSibling",a=t[n]?.classList.contains(me);e.classList.toggle("micl-stepper__action--hidden",!a)})})(e,t),((e,t)=>{const n=e.querySelectorAll(ue).length,a=he(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=he(e,t),a=e.querySelectorAll(ue).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(de).forEach((e,t)=>{e.classList.toggle("micl-stepper__progress--done",i?t+1<=n:t+1===n)})})(e,t)},Ee=(m(se,{initialize:e=>{if(!e.matches(se)||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=pe(e),n=e.querySelector(".micl-stepper__header");t&&(ve(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)ge(e,t.ariaControlsElements[0]);else{const n=t.getAttribute("aria-controls");n&&ge(e,document.getElementById(n))}})})),Array.from(e.querySelectorAll(ce)).forEach(t=>{t.addEventListener("click",function(t){const n=ye(this),a=pe(e);if(!a||!n&&a instanceof HTMLFieldSetElement&&(r=!0,le(i=a),!oe(i,r)))return void(n||t.stopImmediatePropagation());var i,r;const l=a[n?"previousElementSibling":"nextElementSibling"];l?.classList.contains(me)&&((e,t,n)=>{t.addEventListener("transitionend",fe),t.classList.add("micl-stepper__step--fromselected"),t.offsetHeight,n.addEventListener("transitionend",fe),n.classList.add("micl-stepper__step--toselected"),n.offsetHeight,ge(e,n)})(e,a,l)},!0)}),e instanceof HTMLFormElement&&e.addEventListener("submit",t=>{t.submitter?.classList.contains("micl-form--dosubmit")||t.preventDefault(),oe(e,!0)||t.stopImmediatePropagation()},!0)}},HTMLElement),".micl-textfield-outlined > input,.micl-textfield-filled > input"),Le=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",be=".micl-textfield-filled > select,.micl-textfield-outlined > select",we=`${Ee},${be},${Le}`,Se=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}`)},ke=e=>{e.target.matches(we)&&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,Se(e.target))},xe={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)})}}Se(e)}},change:ke,input:ke};m(Ee,xe,HTMLInputElement),m(Le,xe,HTMLTextAreaElement),m(be,xe,HTMLSelectElement);const $e="micl-timepicker__",De="micl-timepicker__dial--hidden",Te="micl-timepicker--selected",Me=(()=>{try{const e=new Intl.DateTimeFormat(void 0,{hour:"numeric"}).resolvedOptions().hourCycle;return"h11"===e||"h12"===e}catch(e){return!1}})(),Ae=(e,t)=>e.querySelector(t),Ce=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,qe=e=>!!e&&!e.classList.contains(De),_e=(e,t)=>{e.classList.toggle(Te,t)},Ie=e=>document.querySelector(`[data-timepicker="${e.id}"],[popovertarget="${e.id}"],[commandfor="${e.id}"]`),He=e=>"hour"===e?{min:Me?1:0,max:Me?12:23}:{min:0,max:59},Pe=(e,t,n)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove(`${$e}time--selected`));const a=e.querySelector(`data[data-${t}][value="${n}"]`);let i="";a?(i=window.getComputedStyle(a).getPropertyValue("--micl-angle"),a.classList.add(`${$e}time--selected`)):"minute"===t&&(i=`${Math.round(360*parseInt(n,10)/60-90)}deg`),i&&e.style.setProperty("--micl-angle",i)},ze=(e,t,n,a,i=!0)=>{let r=parseInt(n||"0",10);if(isNaN(r))return;const l=Ae(e,`input[name=${t}]`);if(l){if("hour"===t&&a&&Me){const t=e.querySelector(`.${$e}am`),n=e.querySelector(`.${$e}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=Ae(e,`.${$e}dial`);if(!n)return;Pe(n,t,l.value)}}},Ne=(e,t,n)=>{if("ArrowDown"!==n.key&&"ArrowUp"!==n.key)return;n.preventDefault();const{max:a,min:i}=He(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&&Me)){const t=e.querySelector("input[name=period]:not(:checked)");t?.click()}ze(e,t.name,`${r}`)},Fe=(m("dialog.micl-dialog.micl-timepicker",{initialize:e=>{if(e.dataset.miclinitialized)return;const t=Ae(e,"form"),n=Ae(e,`.${$e}inputmode`),a=Ae(e,`.${$e}dial`),i=[Ae(e,"input[name=hour]"),Ae(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}=He(e.name);let a;a="hour"===e.name?Me?"(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",qe(a)),t.addEventListener("keydown",Ne.bind(null,e,t)),t.addEventListener("focus",()=>{_e(i[0===n?1:0],!1),_e(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(`${$e}dial-inner`)&&e.classList["hour"===t?"remove":"add"](De)})})(a,t.name),Pe(a,t.name,t.value))}),t.addEventListener("blur",()=>{qe(a)||((e=>{const{max:t,min:n}=He(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),_e(t,!1))})});const r=e.querySelector(`.${$e}period`);if(r&&Me&&(["am","pm"].forEach(e=>{let t=document.createElement("input");t.type="radio",t.name="period",t.className=`${$e}${e}`,t.value=e,t.ariaLabel=e.toUpperCase(),r.appendChild(t)}),r.classList.toggle(De,!Me)),n?.addEventListener("click",()=>{a?.classList.toggle(De),i.forEach(e=>{e.toggleAttribute("readonly",qe(a))}),qe(a)&&i[0].focus()}),a){(e=>{let t=Me?300:270;for(let n=Me?1:0;n<=(Me?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`),!Me&&n>=12?a.classList.add(`${$e}dial-inner`):a.dataset.minute=""+5*n%60,e.appendChild(a),t=(t+30)%360}const n=document.createElement("span");n.className=`${$e}track`,e.appendChild(n)})(a);const t=(t,n)=>{const a=document.elementFromPoint(t,n);a&&"DATA"===a.tagName&&ze(e,e.querySelector(`input[name=hour].${Te}`)?"hour":"minute",a.value)};a.addEventListener("pointerdown",e=>{a.classList.add(`${$e}dial--dragging`),t(e.clientX,e.clientY),a.setPointerCapture(e.pointerId)}),a.addEventListener("pointermove",e=>{a.classList.contains(`${$e}dial--dragging`)&&t(e.clientX,e.clientY)});const n=e=>{a.classList.remove(`${$e}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((!Ce(n)||n.dataset.timepicker!==e.id&&n.popoverTargetElement!==e&&n.commandForElement!==e)&&(n=Ie(e)),!Ce(n))return;e._miclInvoker=n;const a=(n.value||n.textContent).split(":");2===a.length&&(ze(e,"hour",a[0],!0),ze(e,"minute",a[1],!1,!1))}),e.addEventListener("close",()=>{if(!e.returnValue)return;let n=e._miclInvoker;if(n||(n=Ie(e)),!Ce(n))return;const a=t.elements;let i=parseInt(a.namedItem("hour")?.value||"0",10);if(isNaN(i))return;Me&&(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 a=0;a<n.length;){var i=n[a++],l=n[a++];e.o(t,i)?0===l&&a++:0===l?Object.defineProperty(t,i,{enumerable:!0,value:n[a++]}):Object.defineProperty(t,i,{enumerable:!0,get:l})}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:()=>Ye});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],l=e=>{const t=i(e);t&&"function"==typeof t.component.initialize&&t.component.initialize(e)},r=e=>{const t=a();t&&e.querySelectorAll(t).forEach(l),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 l=i(n),r=e.type;l&&"function"==typeof l.component[r]&&l.component[r]?.(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)&&l(e),t&&e.querySelectorAll(t).forEach(l)}}),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}),r(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(l),t),u=()=>{document.removeEventListener("DOMContentLoaded",u),d()};"loading"!==document.readyState?d():document.addEventListener("DOMContentLoaded",u);const p={initialize:()=>r(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,l=!1,r=!1,o=!1;function s(t){const n=t.clientY;if(l&&Math.abs(a-n)>4&&(l=!1,r=!0,e.classList.add("micl-bottomsheet--resizing")),r){const t=Math.max(1,i+a-n),l=g(e).find(e=>e>0&&Math.abs(e-t)<=12);y(e,l||t)}}function c(t){l=!1,e.classList.remove("micl-bottomsheet--resizing"),document.removeEventListener("pointermove",s),document.removeEventListener("pointerup",c),r&&(r=!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",r=>{r.target!==t&&r.target!==n||(l=!0,o=!1,r.preventDefault(),a=r.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");let b=!1;const w=e=>{for(const t of e.querySelectorAll(".micl-checkbox__parent"))if(t.closest(L)===e)return t;return null},S=(e,t,n,a)=>{e.checked===t&&e.indeterminate===n||(e.checked=t,e.indeterminate=n,a.push(e))},k=(e,t)=>{const n=w(e);if(!n)return"empty";let a=0,i=0,l=0;e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(r=>{if(r!==n){const n=r.closest(L);if(n===e)r.disabled||(a++,r.indeterminate?l++:r.checked&&i++);else if(r.classList.contains("micl-checkbox__parent")&&n?.parentElement?.closest(L)===e){const e=k(n,t);"empty"!==e&&(a++,"all"===e?i++:"some"===e&&l++)}}});let r=a>0?"none":"empty";return l>0||i>0&&i<a?r="some":a>0&&i===a&&(r="all"),S(n,"all"===r,"some"===r,t),r},x=(e,t,n)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(a=>{const i=a.closest(L);i===e?a.disabled||S(a,t,!1,n):a.classList.contains("micl-checkbox__parent")&&i?.parentElement?.closest(L)===e&&x(i,t,n)})},$=(e,t)=>{const n=w(e);if(!n)return;const a=[];t===n&&x(e,t.checked,a);let i,l=e;do{i=l,l=l.parentElement?.closest(L)}while(l);if(k(i,a),t&&a.length){b=!0;try{a.forEach(e=>e.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0})))}finally{b=!1}}},D=e=>{const t=e.currentTarget,n=e.target;!b&&n.classList.contains("micl-checkbox")&&n.closest(L)===t&&$(t,n)},T=(m(L,{initialize:e=>{e.matches(L)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",e.addEventListener("change",D),$(e,null))},cleanup:e=>{e.matches(L)&&(e.removeEventListener("change",D),delete e.dataset.miclinitialized)}},HTMLElement),"dialog.micl-dialog.micl-datepicker"),M="micl-datepicker__",A="micl-no-transition",q=new WeakMap,C=(new Intl.DateTimeFormat).resolvedOptions().locale,_={input:new Intl.DateTimeFormat(C,{year:"numeric",month:"2-digit",day:"2-digit"}),header:new Intl.DateTimeFormat(C,{weekday:"short",day:"numeric",month:"short"}),monthLong:new Intl.DateTimeFormat(void 0,{month:"long"}),monthShort:new Intl.DateTimeFormat(C,{month:"short"}),weekdayNarrow:new Intl.DateTimeFormat(C,{weekday:"narrow"}),weekdayLong:new Intl.DateTimeFormat(C,{weekday:"long"})},I=e=>{const t=new Date(e);return t.setHours(0,0,0,0),t},H=e=>{const t=(e.getMonth()+1).toString().padStart(2,"0"),n=e.getDate().toString().padStart(2,"0");return`${e.getFullYear()}-${t}-${n}`},P=()=>_.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(),N=(()=>{try{const e=new Intl.Locale(C).getWeekInfo?.();if(e)return 7===e.firstDay?0:e.firstDay}catch{}return/US|CA|MX/i.test(C)?0:1})(),z=e=>!isNaN(e.getTime()),F=e=>"date"===e.type&&e.valueAsDate?e.valueAsDate:e.value?new Date(e.value):null,Y=(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},O=(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},B=(e,t)=>{const n=new Date(e,t,1).getDay(),a=new Date(e,t,1-(n-N+7)%7);return Array.from({length:42},(e,n)=>{const i=new Date(a);return i.setDate(a.getDate()+n),{date:i,val:H(i),isCurrentMonth:i.getMonth()===t}})},V=(e,t,n,a=!1)=>{if(a){const n=(()=>{const e=new Date,t=e.getDay()-N;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=_.weekdayNarrow.format(e),a.title=_.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,l=t%7+1;a.style.gridArea=`${i} / ${l}`,n.appendChild(a)}),e.appendChild(n)}const i=I(new Date),l=n.selected.getTime(),r=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===l||o===r,c=o===i.getTime();e.className="",a.isCurrentMonth||e.classList.add(`${M}outside`),s&&e.classList.add(`${M}selected`),c&&e.classList.add(`${M}today`),void 0!==r&&r!==l&&(o===l?e.classList.add(`${M}range-start`):o===r?e.classList.add(`${M}range-end`):o>l&&o<r&&e.classList.add(`${M}inrange`))})},R=(e,t,n=0)=>{const a=e.querySelector(".micl-dialog__content"),i=a?.querySelector(`.${M}calendars`);if(!i)return;const l="micl-startleft",r="micl-startright",o="micl-moveleft",s="micl-moveright";if(i.classList.remove(o,s,l,r),i.offsetWidth,0!==n){const e=i.querySelector(`.${M}calendar`);if(!e)return;const a=document.createElement("div"),c=document.createElement("div");a.className=`${M}calendar`,c.className=`${M}calendar-inner`;const d=B(t.viewDate.getFullYear(),t.viewDate.getMonth());V(c,d,t,!0);const m=n>0,u=m?l:r,p=m?o:s;a.appendChild(c),m?i.appendChild(a):i.prepend(a),i.classList.add(A,u),i.offsetWidth,requestAnimationFrame(()=>{i.classList.remove(A,u),i.classList.add(p)});const h=()=>{i.removeEventListener("transitionend",h),setTimeout(()=>{i.classList.remove(p),e.parentElement===i&&e.remove(),i.classList.add(A,l),i.offsetWidth,i.classList.remove(A,l)},0)};i.addEventListener("transitionend",h)}else{let e=i.querySelector(`.${M}calendar`);e||(e=document.createElement("div"),e.className=`${M}calendar`,e=i.appendChild(e));let n=e.querySelector(`.${M}calendar-inner`);n||(n=document.createElement("div"),n.className=`${M}calendar-inner`,e.appendChild(n));const a=B(t.viewDate.getFullYear(),t.viewDate.getMonth());V(n,a,t,0===n.querySelectorAll("time").length)}a?.querySelectorAll(`.${M}input input`).forEach((e,n)=>{const a=0===n?t.selected:t.selectedEnd;e.value=a?_.input.format(a):"",e.value?e.dataset.miclvalue="1":delete e.dataset.miclvalue,e.dataset.micldateformat||(e.dataset.micldateformat=P())}),O(e.querySelector("h1, h2, h3, h4, h5, h6, .micl-heading"),t.range?`${_.header.format(t.selected)} – ${t.selectedEnd?_.header.format(t.selectedEnd):""}`:_.header.format(t.selected)),O(e.querySelector(`.${M}month`),_.monthShort.format(t.viewDate)),O(e.querySelector(`.${M}year`),t.viewDate.toLocaleDateString(C,e.classList.contains("micl-dialog--docked")?{year:"numeric"}:{month:"long",year:"numeric"}));const c=e.querySelector(`.${M}months input[value="${t.viewDate.getMonth()}"]`);c&&(c.checked=!0);const d=e.querySelector(`.${M}years input[value="${t.viewDate.getFullYear()}"]`);d&&(d.checked=!0)},j=(e,t)=>{"months"!==t&&"years"!==t||e.querySelector(`.${M}${t}.${M}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(`.${M}${n}`)?.classList.toggle(`${M}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(`.${M}${e}`);if(!i)return;const l=i.querySelector("input:checked");let r=!1;if(l&&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(l.offsetTop>s){let e=l.offsetTop-s-24;e>o&&(e=o);const a=performance.now(),c=i=>{const l=Math.min((i-a)/t,1);n.scrollTop=e*l,l<1&&requestAnimationFrame(c)};i.classList.remove(`${M}view-hidden`),requestAnimationFrame(c),r=null,i.addEventListener("transitionend",function t(a){"height"!==a.propertyName&&"block-size"!==a.propertyName||(n.scrollTop=e,i.removeEventListener("transitionend",t))})}}else r=!0;null!==r&&i.classList.toggle(`${M}view-hidden`,r)})},U=(e,t,n)=>{const a=q.get(e);if(!a)return;const i=new Date(a.viewDate);"month"===n?i.setMonth(i.getMonth()+t):i.setFullYear(i.getFullYear()+t);const l=a.min&&i<a.min,r=a.max&&i>a.max;l||r?e.querySelector(`.${M}calendars`)?.animate([{transform:"translateX(0)"},{transform:`translateX(${l?8:-8}px)`},{transform:"translateX(0)"}],{duration:500,easing:"ease-in-out"}):(a.viewDate=i,R(e,a,"month"===n?t:0))},W=(m(T,{keydown:e=>{if(!(e instanceof KeyboardEvent&&e.target instanceof Element))return;const t=e.target.closest(T);if(t)switch(e.key){case"Enter":case" ":e.target instanceof HTMLInputElement&&"date"===e.target.type&&e.preventDefault();break;case"M":j(t,"months");break;case"Y":j(t,"years");break;case"PageUp":case"PageDown":U(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(`${M}month-selector`),n=a.classList.contains(`${M}next`),i=a.classList.contains(`${M}previous`);if(n||i)return void U(e,n?1:-1,t?"month":"year")}n.closest(`.${M}month`)&&j(e,"months"),n.closest(`.${M}year`)&&j(e,"years"),n.closest(`.${M}inputmode`)&&j(e,e.querySelector(`.${M}input.${M}view-hidden`)?"input":"calendars");const i=n.closest("time");if(i&&i.dateTime&&((e,t)=>{const n=q.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),R(e,n)}})(e,i.dateTime),n instanceof HTMLInputElement&&("miclmonth"===n.name||"miclyear"===n.name)){const t=q.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),R(e,t),j(e,"calendars")}}}),e.addEventListener("focusout",t=>{const n=t.target;if(!(n instanceof HTMLInputElement&&n.closest(`.${M}input`)))return;const a=e.querySelectorAll(`.${M}input input`);((e,t,n)=>{const a=q.get(e);if(!a)return;const i=(e=>{const t=P();if(e.length!==t.length)return null;let n="",a="",i="";for(let l=0;l<t.length;l++)switch(t[l]){case"D":n+=e[l];break;case"M":a+=e[l];break;case"Y":i+=e[l]}const l=new Date(parseInt(i,10),parseInt(a,10)-1,parseInt(n,10));return z(l)?l: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)),R(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 l=a,r=null;if(i&&a instanceof HTMLInputElement)if(a.dataset.miclrangeto){const e=document.getElementById(a.dataset.miclrangeto);r=e instanceof HTMLInputElement?e:null}else if(a.id){const e=document.querySelector(`input[data-miclrangeto="${a.id}"]`);e&&(r=a,l=e)}let o=new Date,s=null,c=new Date(1900,0,1),d=new Date(2099,11,31);if(l instanceof HTMLInputElement)o=F(l)||o,l.min&&(c=new Date(l.min)),l.max&&(d=new Date(l.max));else{const[e,t]=(l.value||l.textContent||"").split("/"),n=new Date(e);z(n)&&(o=n),i&&t&&(s=new Date(t))}r&&(s=F(r),r.max&&(d=new Date(r.max))),z(o)||(o=new Date),o=I(o),s&&z(s)?(s=I(s),s<o&&([o,s]=[s,o])):s=null;const m={invoker:l,invokerEnd:r,selected:o,selectedEnd:i?s:null,range:i,viewDate:new Date(o),min:c,max:d};q.set(e,m),((e,t,n)=>{const a=t.getFullYear(),i=n.getFullYear();["months","years"].forEach(l=>{const r=e.querySelector(`.${M}${l}`);if(!r)return;r.innerHTML="";const o=document.createDocumentFragment(),s=n.getMonth();if("months"===l){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}"> ${_.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=`${M}${l}-inner`,r.appendChild(c).appendChild(o)})})(e,c,d),j(e,"calendars"),R(e,m)}),e.addEventListener("close",()=>{const t=q.get(e);if(!t?.invoker||""===e.returnValue)return;const n=t.selectedEnd||t.selected;t.range&&!t.invokerEnd?Y(t.invoker,`${H(t.selected)}/${H(n)}`,`${t.selected.toLocaleDateString()} – ${n.toLocaleDateString()}`):(Y(t.invoker,H(t.selected),t.selected.toLocaleDateString()),t.invokerEnd&&Y(t.invokerEnd,H(n),n.toLocaleDateString()))}))}},HTMLDialogElement),e=>e?.matches(":has(input[type=checkbox]:checked)")),X=(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 l=i.indexOf(t);if(-1===l)return;let r=l;switch(e.key){case"ArrowDown":e.preventDefault(),r=(l+1)%i.length;break;case"ArrowUp":e.preventDefault(),r=(l-1+i.length)%i.length;break;case"Tab":if(!a){const e=i.findIndex(W);r=-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()}r!==l&&(a||(t.setAttribute("tabindex","-1"),i[r].setAttribute("tabindex","0")),i[r].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"))),K=(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 l=i.indexOf(a),r=X(a),o=r.indexOf(n);if(-1===o)return;let s;if("ArrowDown"===t.key&&o===r.length-1){const e=(l+1)%i.length;s=X(i[e])[0]}else if("ArrowUp"===t.key&&0===o){const e=(l-1+i.length)%i.length,t=X(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-]"),J=String.fromCharCode(8226),G=String.fromCharCode(8201),Q=e=>e.parentElement?.classList.contains("micl-slider__container")?e.parentElement:null,Z=(e,t)=>{e.dataset.miclsliderticks=t},ee=e=>{let t=JSON.stringify(e.value+""),n=Q(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)},te=(m(K,{initialize:e=>{if(!e.matches(K))return;(e=>{let t=e.max||"100";Q(e)?.style.setProperty("--micl-slider-max",t),e.style.setProperty("--micl-slider-max",t)})(e),(e=>{let t=e.min||"0";Q(e)?.style.setProperty("--micl-slider-min",t),e.style.setProperty("--micl-slider-min",t)})(e),ee(e),(e=>{let t=Q(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(G).width,l=n.measureText(J).width,r=a.width-10,o=0,s="";i.forEach(e=>{let n=r*e/100,a=Math.round((n-o)/t)-1;for(let e=0;e<a;e++)s+=G,o+=t;s+=J,o+=l}),Z(e,s)}t.remove()}else Z(e,J)},input:e=>{e.target.matches(K)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&ee(e.target)}},HTMLInputElement),".micl-snackbar"),ne=new WeakMap,ae=e=>{const t=ne.get(e);t&&t.timeoutid&&(clearTimeout(t.timeoutid),t.timeoutid=void 0)},ie=e=>{ae(e);const t=ne.get(e);t&&(t.timeoutid=window.setTimeout(()=>{e.isConnected&&e.matches(":popover-open")&&e.hidePopover()},t.delay))},le=(m(te,{initialize:e=>{if(!e.matches(te)||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=()=>ae(e),i=t=>{"open"===t.newState?ie(e):ae(e)},l=()=>{e.matches(":popover-open")&&ie(e)};ne.set(e,{delay:n,boundHandleToggle:i,boundClearTimer:a,boundHandleMouseLeave:l}),e.addEventListener("toggle",i),e.addEventListener("mouseenter",a),e.addEventListener("mouseleave",l)},cleanup:e=>{const t=ne.get(e);t&&(ae(e),e.removeEventListener("toggle",t.boundHandleToggle),e.removeEventListener("mouseenter",t.boundClearTimer),e.removeEventListener("mouseleave",t.boundHandleMouseLeave),ne.delete(e)),delete e.dataset.miclinitialized}},HTMLElement),e=>"willValidate"in e),re=e=>{const t=e.target;le(t)&&t.setCustomValidity("")},oe=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||"",l=e.dataset.miclvalidateCheckboxesCountMin||"";if(n&&(a||i||l)){const r=e.querySelectorAll(`input[type="checkbox"][name="${n}"]:checked`).length,o=parseInt(a,10),s=parseInt(i,10),c=parseInt(l,10);let d=!isNaN(o)&&r!=o||!isNaN(s)&&r>s||!isNaN(c)&&r<c;e.setCustomValidity(d?t:"");const m=e.querySelector(`input[type="checkbox"][name="${n}"]`);m&&(m.setCustomValidity(d?t:""),d?m.addEventListener("change",re):m.removeEventListener("change",re))}}},se=(e,t)=>{let n=!1;return e.querySelectorAll("fieldset").forEach(oe),Array.from(e.elements).forEach(e=>{if(le(e)&&e.willValidate){e.checkValidity()||(n=!0);let a=(e=>{if(!e.parentElement||!le(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);!a&&t&&e.reportValidity()}}),!n},ce=".micl-stepper",de=".micl-stepper__action-back,.micl-stepper__action-next",me=".micl-stepper__header button[role=tab][aria-controls]",ue="micl-stepper__step",pe="."+ue,he=e=>e.querySelector(`${pe}[aria-current=step]`)||fe(e,e.querySelector(pe)),ge=(e,t)=>Array.from(e.querySelectorAll(pe)).indexOf(t)+1,fe=(e,t)=>{if(!t)return null;let n=0;e.querySelectorAll(pe).forEach((e,a)=>{e.setAttribute("aria-current",e===t?"step":"false"),e===t&&(n=a)});const a=e.querySelectorAll(me).item(n);return e.querySelectorAll(me).forEach(e=>{e.setAttribute("aria-selected",e===a?"true":"false")}),Ee(e,t),t},ye=e=>{const t=e.currentTarget;"transform"===e.propertyName&&t&&(t.classList.remove("micl-stepper__step--fromselected","micl-stepper__step--toselected"),t.removeEventListener("transitionend",ye))},ve=e=>e.classList.contains("micl-stepper__action-back"),Ee=(e,t)=>{((e,t)=>{Array.from(e.querySelectorAll(de)).forEach(e=>{const n=ve(e)?"previousElementSibling":"nextElementSibling",a=t[n]?.classList.contains(ue);e.classList.toggle("micl-stepper__action--hidden",!a)})})(e,t),((e,t)=>{const n=e.querySelectorAll(pe).length,a=ge(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=ge(e,t),a=e.querySelectorAll(pe).length,i=!e.classList.contains("micl-stepper--nonlinear"),l=(t,n)=>{e.querySelectorAll(t).forEach(e=>{e.textContent=n})};l(".micl-stepper__progress-current",`${n}`),l(".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(me).forEach((e,t)=>{e.classList.toggle("micl-stepper__progress--done",i?t+1<=n:t+1===n)})})(e,t)},Le=(m(ce,{initialize:e=>{if(!e.matches(ce)||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const t=he(e),n=e.querySelector(".micl-stepper__header");t&&(Ee(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)fe(e,t.ariaControlsElements[0]);else{const n=t.getAttribute("aria-controls");n&&fe(e,document.getElementById(n))}})})),Array.from(e.querySelectorAll(de)).forEach(t=>{t.addEventListener("click",function(t){const n=ve(this),a=he(e);if(!a||!n&&a instanceof HTMLFieldSetElement&&(l=!0,oe(i=a),!se(i,l)))return void(n||t.stopImmediatePropagation());var i,l;const r=a[n?"previousElementSibling":"nextElementSibling"];r?.classList.contains(ue)&&((e,t,n)=>{t.addEventListener("transitionend",ye),t.classList.add("micl-stepper__step--fromselected"),t.offsetHeight,n.addEventListener("transitionend",ye),n.classList.add("micl-stepper__step--toselected"),n.offsetHeight,fe(e,n)})(e,a,r)},!0)}),e instanceof HTMLFormElement&&e.addEventListener("submit",t=>{t.submitter?.classList.contains("micl-form--dosubmit")||t.preventDefault(),se(e,!0)||t.stopImmediatePropagation()},!0)}},HTMLElement),".micl-textfield-outlined > input,.micl-textfield-filled > input"),be=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",we=".micl-textfield-filled > select,.micl-textfield-outlined > select",Se=`${Le},${we},${be}`,ke=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}`)},xe=e=>{e.target.matches(Se)&&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,""),l="",r=0,o=e.selectionStart||0;for(let e=0;e<a.length;e++){const t=a[e];if(i.length<r)break;const n=i.substring(r,r+t.length);l+=n,r+=n.length,n.length===t.length&&t.separator&&(l+=t.separator)}const s=e.value.length;e.value=l.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,ke(e.target))},$e={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)})}}ke(e)}},change:xe,input:xe};m(Le,$e,HTMLInputElement),m(be,$e,HTMLTextAreaElement),m(we,$e,HTMLSelectElement);const De="micl-timepicker__",Te="micl-timepicker__dial--hidden",Me="micl-timepicker--selected",Ae=(()=>{try{const e=new Intl.DateTimeFormat(void 0,{hour:"numeric"}).resolvedOptions().hourCycle;return"h11"===e||"h12"===e}catch(e){return!1}})(),qe=(e,t)=>e.querySelector(t),Ce=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,_e=e=>!!e&&!e.classList.contains(Te),Ie=(e,t)=>{e.classList.toggle(Me,t)},He=e=>document.querySelector(`[data-timepicker="${e.id}"],[popovertarget="${e.id}"],[commandfor="${e.id}"]`),Pe=e=>"hour"===e?{min:Ae?1:0,max:Ae?12:23}:{min:0,max:59},Ne=(e,t,n)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove(`${De}time--selected`));const a=e.querySelector(`data[data-${t}][value="${n}"]`);let i="";a?(i=window.getComputedStyle(a).getPropertyValue("--micl-angle"),a.classList.add(`${De}time--selected`)):"minute"===t&&(i=`${Math.round(360*parseInt(n,10)/60-90)}deg`),i&&e.style.setProperty("--micl-angle",i)},ze=(e,t,n,a,i=!0)=>{let l=parseInt(n||"0",10);if(isNaN(l))return;const r=qe(e,`input[name=${t}]`);if(r){if("hour"===t&&a&&Ae){const t=e.querySelector(`.${De}am`),n=e.querySelector(`.${De}pm`);l>=12?(n&&(n.checked=!0),l>12&&(l-=12)):(t&&(t.checked=!0),0===l&&(l=12))}if(r.value=`${l}`.padStart(2,"0"),i){const n=qe(e,`.${De}dial`);if(!n)return;Ne(n,t,r.value)}}},Fe=(e,t,n)=>{if("ArrowDown"!==n.key&&"ArrowUp"!==n.key)return;n.preventDefault();const{max:a,min:i}=Pe(t.name);let l=parseInt(t.value,10)||0;if(l+="ArrowUp"===n.key?1:-1,(l<i||l>a)&&(l=l<i?a:i,"hour"===t.name&&Ae)){const t=e.querySelector("input[name=period]:not(:checked)");t?.click()}ze(e,t.name,`${l}`)},Ye=(m("dialog.micl-dialog.micl-timepicker",{initialize:e=>{if(e.dataset.miclinitialized)return;const t=qe(e,"form"),n=qe(e,`.${De}inputmode`),a=qe(e,`.${De}dial`),i=[qe(e,"input[name=hour]"),qe(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}=Pe(e.name);let a;a="hour"===e.name?Ae?"(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",_e(a)),t.addEventListener("keydown",Fe.bind(null,e,t)),t.addEventListener("focus",()=>{Ie(i[0===n?1:0],!1),Ie(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(`${De}dial-inner`)&&e.classList["hour"===t?"remove":"add"](Te)})})(a,t.name),Ne(a,t.name,t.value))}),t.addEventListener("blur",()=>{_e(a)||((e=>{const{max:t,min:n}=Pe(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),Ie(t,!1))})});const l=e.querySelector(`.${De}period`);if(l&&Ae&&(["am","pm"].forEach(e=>{let t=document.createElement("input");t.type="radio",t.name="period",t.className=`${De}${e}`,t.value=e,t.ariaLabel=e.toUpperCase(),l.appendChild(t)}),l.classList.toggle(Te,!Ae)),n?.addEventListener("click",()=>{a?.classList.toggle(Te),i.forEach(e=>{e.toggleAttribute("readonly",_e(a))}),_e(a)&&i[0].focus()}),a){(e=>{let t=Ae?300:270;for(let n=Ae?1:0;n<=(Ae?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`),!Ae&&n>=12?a.classList.add(`${De}dial-inner`):a.dataset.minute=""+5*n%60,e.appendChild(a),t=(t+30)%360}const n=document.createElement("span");n.className=`${De}track`,e.appendChild(n)})(a);const t=(t,n)=>{const a=document.elementFromPoint(t,n);a&&"DATA"===a.tagName&&ze(e,e.querySelector(`input[name=hour].${Me}`)?"hour":"minute",a.value)};a.addEventListener("pointerdown",e=>{a.classList.add(`${De}dial--dragging`),t(e.clientX,e.clientY),a.setPointerCapture(e.pointerId)}),a.addEventListener("pointermove",e=>{a.classList.contains(`${De}dial--dragging`)&&t(e.clientX,e.clientY)});const n=e=>{a.classList.remove(`${De}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((!Ce(n)||n.dataset.timepicker!==e.id&&n.popoverTargetElement!==e&&n.commandForElement!==e)&&(n=He(e)),!Ce(n))return;e._miclInvoker=n;const a=(n.value||n.textContent).split(":");2===a.length&&(ze(e,"hour",a[0],!0),ze(e,"minute",a[1],!1,!1))}),e.addEventListener("close",()=>{if(!e.returnValue)return;let n=e._miclInvoker;if(n||(n=He(e)),!Ce(n))return;const a=t.elements;let i=parseInt(a.namedItem("hour")?.value||"0",10);if(isNaN(i))return;Ae&&(i%=12,"pm"===a.namedItem("period")?.value&&(i+=12));const l=parseInt(a.namedItem("minute")?.value||"0",10);if(isNaN(l))return;const r=`${i}`.padStart(2,"0")+":"+`${l}`.padStart(2,"0");n.value=r,n instanceof HTMLInputElement?(n.dispatchEvent(new Event("change",{bubbles:!0})),n.dispatchEvent(new Event("input",{bubbles:!0}))):n.textContent=r})}},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-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}: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}}
|
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-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}: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%}}
|
package/dist/navigationrail.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";
|
|
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";let e={};return(e=>{Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})})(e),e})());
|
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{--md-comp-radio-button-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-comp-radio-button-motion-duration: 300ms;--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(--md-comp-radio-button-motion-duration-reverse) var(--md-comp-radio-button-motion-effects),border-color var(--md-comp-radio-button-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(--md-comp-radio-button-motion-duration) var(--md-comp-radio-button-motion-effects),border-color var(--md-comp-radio-button-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(--md-comp-radio-button-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/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-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-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)}
|
package/dist/snackbar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-comp-card-margin, 8px)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level3: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 4px 8px 3px}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.0125rem}.micl-snackbar{--md-comp-snackbar-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-snackbar-motion-duration: 500ms;--md-comp-snackbar-motion-duration-reverse: 350ms;--micl-duration: var(--md-comp-snackbar-motion-duration-reverse);--statelayer-color: var(--md-sys-color-inverse-primary);--statelayer-opacity: 0%;box-sizing:border-box;position:fixed;display:flex;align-items:center;justify-content:space-between;column-gap:4px;block-size:0;inline-size:max-content;max-inline-size:min(1199px,100vw - 2*var(--md-sys-layout-window-margin));min-inline-size:300px;inset:auto;inset-block-end:calc(var(--md-comp-snackbar-margin, 24px) + env(safe-area-inset-bottom));inset-inline:0;margin-block:0;margin-inline:auto;padding-block:0;padding-inline:var(--md-comp-snackbar-padding, 16px);border:none;outline:none;border-radius:var(--md-comp-snackbar-container-shape, var(--md-sys-shape-corner-extra-small));box-shadow:var(--md-comp-snackbar-container-elevation, var(--md-sys-elevation-level3));background-color:var(--md-comp-snackbar-container-color, var(--md-sys-color-inverse-surface));background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;opacity:0;overflow-y:hidden;transition:block-size var(--micl-duration) var(--md-comp-snackbar-motion-spatial),opacity var(--md-comp-snackbar-motion-duration-reverse) linear,display var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,overlay var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,--statelayer-opacity var(--md-comp-snackbar-motion-duration) linear}.micl-snackbar:hover{--statelayer-color: var(--md-comp-snackbar-action-hover-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity))}.micl-snackbar:focus-visible{--statelayer-color: var(--md-comp-snackbar-action-focus-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity))}.micl-snackbar:active{--statelayer-color: var(--md-comp-snackbar-action-pressed-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity))}.micl-snackbar:popover-open{--micl-duration: var(--md-comp-snackbar-motion-duration);block-size:var(--md-comp-snackbar-with-single-line-container-height, 48px);opacity:1}@starting-style{.micl-snackbar:popover-open{block-size:0;opacity:0}}.micl-snackbar.micl-snackbar--two:popover-open{block-size:var(--md-comp-snackbar-with-two-lines-container-height, 68px)}.micl-snackbar .micl-snackbar__supporting-text{font:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);letter-spacing:var(--md-sys-typescale-body-medium-tracking);display:flex;flex-direction:column;color:var(--md-comp-snackbar-supporting-text-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar:has(button){padding-inline-end:4px}.micl-snackbar button{--statelayer-color: var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary));color:var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:hover{color:var(--md-comp-snackbar-action-hover-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:focus-visible{color:var(--md-comp-snackbar-action-focus-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:active{color:var(--md-comp-snackbar-action-pressed-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button[class*=micl-iconbutton]{--statelayer-color: var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));color:var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));font-size:var(--md-comp-snackbar-icon-size, var(--md-sys-icon-size, 24px))}.micl-snackbar button[class*=micl-iconbutton]:hover{color:var(--md-comp-snackbar-icon-hover-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar button[class*=micl-iconbutton]:focus-visible{color:var(--md-comp-snackbar-icon-focus-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar button[class*=micl-iconbutton]:active{color:var(--md-comp-snackbar-icon-pressed-icon-color, var(--md-sys-color-inverse-on-surface))}@media(max-width: 599px){.micl-snackbar{inline-size:calc(100vw - 2*var(--md-sys-layout-window-margin));min-inline-size:auto}}
|
|
1
|
+
:root{--md-sys-shape-corner-medium: 12px}:root{--md-sys-layout-pane-spacer: 24px;--md-sys-layout-window-margin: 24px;--md-sys-card-margin: 8px}@media(max-width: 599px){:root{--md-sys-layout-window-margin: 16px}}@media(min-width: 840px)and (max-width: 1199px){:root{--md-sys-layout-pane-fixed-width: 360px}}@media(min-width: 1200px){:root{--md-sys-layout-pane-fixed-width: 412px}}.micl-window{padding:env(safe-area-inset-top, 0px) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-right, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px)) calc(var(--md-sys-layout-window-margin) + env(safe-area-inset-left, 0px));margin:0;background-color:var(--md-sys-color-surface)}.micl-window .micl-panes .micl-appbar{margin-inline:calc(-1*var(--md-sys-layout-window-margin))}.micl-window:not(.micl-window--spatial):has(nav.micl-navigationrail) .micl-panes .micl-appbar{margin-inline-start:0}.micl-window.micl-window--spatial{--md-sys-layout-spatial-radius: calc(var(--md-sys-shape-corner-medium) + var(--md-sys-layout-window-margin));display:flex;padding-block:calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-top, 0px)) calc(2*var(--md-sys-layout-window-margin) + env(safe-area-inset-bottom, 0px));gap:var(--md-sys-layout-window-margin)}.micl-window.micl-window--spatial .micl-navigationrail{display:flex;align-self:flex-start;block-size:inherit;min-block-size:inherit;margin:0;padding-block-end:var(--md-sys-navigationrail-top-space, 0px);border-radius:var(--md-sys-layout-spatial-radius)}.micl-window.micl-window--spatial .micl-panes{background:rgba(0,0,0,0)}.micl-window.micl-window--spatial .micl-pane{padding:0 var(--md-sys-layout-window-margin) var(--md-sys-layout-window-margin);border-radius:var(--md-sys-layout-spatial-radius);background-color:var(--md-sys-color-surface)}.micl-panes{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--md-sys-comp-margin, 8px) var(--md-sys-layout-pane-spacer);background-color:inherit}.micl-panes.micl-panes--split>.micl-pane+.micl-pane{--_layout-safe-inline-end: env(safe-area-inset-right, 0px);box-sizing:border-box;flex:0 1 var(--_layout-stacked-pane-size, calc(50vw - var(--md-sys-layout-window-margin, 0px) - var(--_layout-safe-inline-end) - var(--md-sys-layout-pane-spacer) / 2))}.micl-panes.micl-panes--split>.micl-pane+.micl-pane:dir(rtl){--_layout-safe-inline-end: env(safe-area-inset-left, 0px)}.micl-panes.micl-panes--evenly .micl-pane{flex:1 1 0}.micl-pane{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane.micl-pane--fixed{flex:0 0 auto;box-sizing:border-box;inline-size:var(--_layout-stacked-pane-size, var(--md-sys-layout-pane-fixed-width, auto))}.micl-pane:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined),.micl-pane>*:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns{display:flex}.micl-pane>.micl-pane__columns:has(>.micl-pane__column>.micl-card-elevated,>.micl-pane__column>.micl-card-filled,>.micl-pane__column>.micl-card-outlined){gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column{display:flex;flex-direction:column;flex:1 1 auto;min-inline-size:0;background-color:inherit}.micl-pane>.micl-pane__columns>.micl-pane__column:has(>.micl-card-elevated,>.micl-card-filled,>.micl-card-outlined){row-gap:var(--md-sys-card-margin)}.micl-pane>.micl-pane__columns>.micl-pane__column.micl-pane__column--fixed{flex:0 0 auto}.micl-pane>.micl-pane__columns.micl-pane__columns--evenly>.micl-pane__column{flex:1 1 0}@media(max-width: 599px){.micl-panes.micl-panes--stacked-to-medium{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-medium{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-medium{flex-direction:column}}@media(max-width: 839px){.micl-panes.micl-panes--stacked-to-expanded{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-expanded{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-expanded{flex-direction:column}}@media(max-width: 1199px){.micl-panes.micl-panes--stacked-to-large{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-large{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-large{flex-direction:column}}@media(max-width: 1599px){.micl-panes.micl-panes--stacked-to-extralarge{--_layout-stacked-pane-size: auto;flex-direction:column}.micl-pane.micl-pane--hidden-to-extralarge{display:none}.micl-pane__columns.micl-pane__columns--stacked-to-extralarge{flex-direction:column}}:root{--md-ref-typeface-plain: Google Sans, system-ui, sans-serif;--md-ref-typeface-plain-narrow: 0;--md-ref-typeface-brand: Google Sans, system-ui, sans-serif;--md-ref-typeface-weight-regular: 400;--md-ref-typeface-weight-medium: 500;--md-ref-typeface-weight-bold: 700}body{--md-sys-elevation-level3: rgb(from var(--md-sys-color-shadow) r g b/0.3) 0 1px 3px 0, rgb(from var(--md-sys-color-shadow) r g b/0.15) 0 4px 8px 3px}:root{--md-sys-shape-corner-extra-small: 4px}:root{--md-sys-state-hover-state-layer-opacity: 8%}:root{--md-sys-state-focus-state-layer-opacity: 10%}:root{--md-sys-state-pressed-state-layer-opacity: 10%}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);--md-sys-typescale-body-medium-size: 0.875rem;--md-sys-typescale-body-medium-line-height: 1.25rem;--md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);--md-sys-typescale-body-medium-tracking: 0.0125rem}.micl-snackbar{--md-comp-snackbar-motion-spatial: cubic-bezier(0.38, 1.21, 0.22, 1);--md-comp-snackbar-motion-duration: 500ms;--md-comp-snackbar-motion-duration-reverse: 350ms;--micl-duration: var(--md-comp-snackbar-motion-duration-reverse);--statelayer-color: var(--md-sys-color-inverse-primary);--statelayer-opacity: 0%;box-sizing:border-box;position:fixed;display:flex;align-items:center;justify-content:space-between;column-gap:4px;block-size:0;inline-size:max-content;max-inline-size:min(1199px,100vw - 2*var(--md-sys-layout-window-margin));min-inline-size:300px;inset:auto;inset-block-end:calc(var(--md-comp-snackbar-margin, 24px) + env(safe-area-inset-bottom));inset-inline:0;margin-block:0;margin-inline:auto;padding-block:0;padding-inline:var(--md-comp-snackbar-padding, 16px);border:none;outline:none;border-radius:var(--md-comp-snackbar-container-shape, var(--md-sys-shape-corner-extra-small));box-shadow:var(--md-comp-snackbar-container-elevation, var(--md-sys-elevation-level3));background-color:var(--md-comp-snackbar-container-color, var(--md-sys-color-inverse-surface));background-image:linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:100%;opacity:0;overflow-y:hidden;transition:block-size var(--micl-duration) var(--md-comp-snackbar-motion-spatial),opacity var(--md-comp-snackbar-motion-duration-reverse) linear,display var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,overlay var(--md-comp-snackbar-motion-duration-reverse) linear allow-discrete,--statelayer-opacity var(--md-comp-snackbar-motion-duration) linear}.micl-snackbar:hover{--statelayer-color: var(--md-comp-snackbar-action-hover-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity))}.micl-snackbar:focus-visible{--statelayer-color: var(--md-comp-snackbar-action-focus-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-focus-state-layer-opacity, var(--md-sys-state-focus-state-layer-opacity))}.micl-snackbar:active{--statelayer-color: var(--md-comp-snackbar-action-pressed-state-layer-color, var(--md-sys-color-inverse-primary));--statelayer-opacity: var(--md-comp-snackbar-action-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity))}.micl-snackbar:popover-open{--micl-duration: var(--md-comp-snackbar-motion-duration);block-size:var(--md-comp-snackbar-with-single-line-container-height, 48px);opacity:1}@starting-style{.micl-snackbar:popover-open{block-size:0;opacity:0}}.micl-snackbar.micl-snackbar--two:popover-open{block-size:var(--md-comp-snackbar-with-two-lines-container-height, 68px)}.micl-snackbar .micl-snackbar__supporting-text{font:var(--md-sys-typescale-body-medium-weight) var(--md-sys-typescale-body-medium-size)/var(--md-sys-typescale-body-medium-line-height) var(--md-sys-typescale-body-medium-font);letter-spacing:var(--md-sys-typescale-body-medium-tracking);display:flex;flex-direction:column;color:var(--md-comp-snackbar-supporting-text-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar:has(button){padding-inline-end:4px}.micl-snackbar button{--statelayer-color: var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary));color:var(--md-comp-snackbar-action-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:hover{color:var(--md-comp-snackbar-action-hover-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:focus-visible{color:var(--md-comp-snackbar-action-focus-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button:active{color:var(--md-comp-snackbar-action-pressed-label-text-color, var(--md-sys-color-inverse-primary))}.micl-snackbar button[class*=micl-iconbutton]{--statelayer-color: var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));color:var(--md-comp-snackbar-icon-color, var(--md-sys-color-inverse-on-surface));font-size:var(--md-comp-snackbar-icon-size, var(--md-sys-icon-size, 24px))}.micl-snackbar button[class*=micl-iconbutton]:hover{color:var(--md-comp-snackbar-icon-hover-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar button[class*=micl-iconbutton]:focus-visible{color:var(--md-comp-snackbar-icon-focus-icon-color, var(--md-sys-color-inverse-on-surface))}.micl-snackbar button[class*=micl-iconbutton]:active{color:var(--md-comp-snackbar-icon-pressed-icon-color, var(--md-sys-color-inverse-on-surface))}@media(max-width: 599px){.micl-snackbar{inline-size:calc(100vw - 2*var(--md-sys-layout-window-margin));min-inline-size:auto}}
|
package/dist/stepper.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--md-sys-state-disabled-state-layer-opacity: 38%}.micl-stepper{--md-comp-stepper-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-comp-stepper-motion-duration: 650ms;--_dot-size: var(--md-comp-stepper-dot-size, 12px);box-sizing:border-box;display:flex;flex-direction:column;row-gap:var(--md-sys-padding-xl, 24px);margin:0}.micl-stepper .micl-stepper__header{--_dot-size: var(--md-comp-stepper-header-dot-size, 24px);position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin-inline:-10px;counter-reset:dotnumber;anchor-scope:all}.micl-stepper .micl-stepper__header button{position:static;anchor-name:var(--micl-stepper-anchor);pointer-events:none}.micl-stepper .micl-stepper__header button::before{inset:auto;inset-block-start:calc(anchor(var(--micl-stepper-anchor) center) - var(--md-sys-target-size, 48px)/2);inset-inline-start:anchor(var(--micl-stepper-anchor) start);inset-inline-end:anchor(var(--micl-stepper-anchor) end);inline-size:auto}.micl-stepper .micl-stepper__header button:not(:first-child)::after{content:"";position:absolute;inset-block-start:calc(anchor(var(--micl-stepper-anchor) center) - .5px);inset-inline-start:anchor(var(--micl-stepper-prev) end);inset-inline-end:anchor(var(--micl-stepper-anchor) start);block-size:1px;background-color:var(--md-comp-divider-color, var(--md-sys-color-outline-variant));pointer-events:none}.micl-stepper .micl-stepper__header button.micl-stepper__progress--done{pointer-events:inherit}.micl-stepper .micl-stepper__header .micl-stepper__progress-dot::before{content:counter(dotnumber, var(--md-comp-stepper-counter-style, decimal))}.micl-stepper.micl-stepper--nonlinear .micl-stepper__header button{pointer-events:inherit}.micl-stepper .micl-stepper__steps{display:grid;grid-template-areas:"stepper-steps";overflow-x:hidden}.micl-stepper .micl-stepper__steps .micl-stepper__step{grid-area:stepper-steps;display:flex;visibility:hidden;flex-direction:column;margin:0;padding:0;border:none;opacity:0%;transform:translateX(100%);transition:opacity var(--md-comp-stepper-motion-duration) linear,transform var(--md-comp-stepper-motion-duration) var(--md-comp-stepper-motion-spatial)}.micl-stepper .micl-stepper__steps .micl-stepper__step:has(~.micl-stepper__step[aria-current=step]){transform:translateX(-100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step.micl-stepper__step--toselected{visibility:visible}.micl-stepper .micl-stepper__steps .micl-stepper__step[aria-current=step]{visibility:visible;opacity:100%;transform:translateX(0%)}.micl-stepper .micl-stepper__steps .micl-stepper__step.micl-stepper__step--fromselected{visibility:visible}.micl-stepper .micl-stepper__actions{display:flex;flex-direction:row;justify-content:center;inline-size:100%;align-items:center}.micl-stepper .micl-stepper__actions>:first-child,.micl-stepper .micl-stepper__actions>:last-child{display:flex;flex:1 1 0;column-gap:var(--md-sys-padding-xs, 8px)}.micl-stepper .micl-stepper__actions>:last-child{justify-content:flex-end}.micl-stepper .micl-stepper__progress-dots{display:flex;align-items:center;column-gap:4px}.micl-stepper .micl-stepper__progress-dot{block-size:var(--_dot-size);inline-size:var(--_dot-size);min-inline-size:var(--_dot-size);line-height:var(--_dot-size);border-radius:calc(var(--_dot-size)/2);text-align:center;background-color:var(--md-comp-stepper-dot-color, var(--md-sys-color-on-surface));color:var(--md-comp-stepper-dot-label-color, var(--md-sys-color-surface));opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%);counter-increment:dotnumber 1}.micl-stepper .micl-stepper__progress--done.micl-stepper__progress-dot,.micl-stepper .micl-stepper__progress--done .micl-stepper__progress-dot{background-color:var(--md-comp-stepper-dot-done-color, var(--md-sys-color-tertiary-container));color:var(--md-comp-stepper-dot-done-label-color, var(--md-sys-color-on-tertiary-container));opacity:100%}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl){transform:translateX(-100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl):has(~.micl-stepper__step[aria-current=step]){transform:translateX(100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl)[aria-current=step]{transform:translateX(0%)}.micl-stepper__action--hidden,.micl-stepper__step--hidden{display:none !important}
|
|
1
|
+
:root{--md-sys-state-disabled-state-layer-opacity: 38%}.micl-stepper{--md-comp-stepper-motion-spatial: cubic-bezier(0.39, 1.29, 0.35, 0.98);--md-comp-stepper-motion-duration: 650ms;--_dot-size: var(--md-comp-stepper-dot-size, 12px);box-sizing:border-box;display:flex;flex-direction:column;row-gap:var(--md-sys-padding-xl, 24px);margin:0}.micl-stepper .micl-stepper__header{--_dot-size: var(--md-comp-stepper-header-dot-size, 24px);position:relative;display:flex;justify-content:space-between;align-items:flex-start;margin-inline:-10px;counter-reset:dotnumber;anchor-scope:all}.micl-stepper .micl-stepper__header button{position:static;anchor-name:var(--micl-stepper-anchor);pointer-events:none}.micl-stepper .micl-stepper__header button::before{inset:auto;inset-block-start:calc(anchor(var(--micl-stepper-anchor) center) - var(--md-sys-state-target-size, 48px)/2);inset-inline-start:anchor(var(--micl-stepper-anchor) start);inset-inline-end:anchor(var(--micl-stepper-anchor) end);inline-size:auto}.micl-stepper .micl-stepper__header button:not(:first-child)::after{content:"";position:absolute;inset-block-start:calc(anchor(var(--micl-stepper-anchor) center) - .5px);inset-inline-start:anchor(var(--micl-stepper-prev) end);inset-inline-end:anchor(var(--micl-stepper-anchor) start);block-size:1px;background-color:var(--md-comp-divider-color, var(--md-sys-color-outline-variant));pointer-events:none}.micl-stepper .micl-stepper__header button.micl-stepper__progress--done{pointer-events:inherit}.micl-stepper .micl-stepper__header .micl-stepper__progress-dot::before{content:counter(dotnumber, var(--md-comp-stepper-counter-style, decimal))}.micl-stepper.micl-stepper--nonlinear .micl-stepper__header button{pointer-events:inherit}.micl-stepper .micl-stepper__steps{display:grid;grid-template-areas:"stepper-steps";overflow-x:hidden}.micl-stepper .micl-stepper__steps .micl-stepper__step{grid-area:stepper-steps;display:flex;visibility:hidden;flex-direction:column;margin:0;padding:0;border:none;opacity:0%;transform:translateX(100%);transition:opacity var(--md-comp-stepper-motion-duration) linear,transform var(--md-comp-stepper-motion-duration) var(--md-comp-stepper-motion-spatial)}.micl-stepper .micl-stepper__steps .micl-stepper__step:has(~.micl-stepper__step[aria-current=step]){transform:translateX(-100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step.micl-stepper__step--toselected{visibility:visible}.micl-stepper .micl-stepper__steps .micl-stepper__step[aria-current=step]{visibility:visible;opacity:100%;transform:translateX(0%)}.micl-stepper .micl-stepper__steps .micl-stepper__step.micl-stepper__step--fromselected{visibility:visible}.micl-stepper .micl-stepper__actions{display:flex;flex-direction:row;justify-content:center;inline-size:100%;align-items:center}.micl-stepper .micl-stepper__actions>:first-child,.micl-stepper .micl-stepper__actions>:last-child{display:flex;flex:1 1 0;column-gap:var(--md-sys-padding-xs, 8px)}.micl-stepper .micl-stepper__actions>:last-child{justify-content:flex-end}.micl-stepper .micl-stepper__progress-dots{display:flex;align-items:center;column-gap:4px}.micl-stepper .micl-stepper__progress-dot{block-size:var(--_dot-size);inline-size:var(--_dot-size);min-inline-size:var(--_dot-size);line-height:var(--_dot-size);border-radius:calc(var(--_dot-size)/2);text-align:center;background-color:var(--md-comp-stepper-dot-color, var(--md-sys-color-on-surface));color:var(--md-comp-stepper-dot-label-color, var(--md-sys-color-surface));opacity:var(--md-sys-state-disabled-state-layer-opacity, 38%);counter-increment:dotnumber 1}.micl-stepper .micl-stepper__progress--done.micl-stepper__progress-dot,.micl-stepper .micl-stepper__progress--done .micl-stepper__progress-dot{background-color:var(--md-comp-stepper-dot-done-color, var(--md-sys-color-tertiary-container));color:var(--md-comp-stepper-dot-done-label-color, var(--md-sys-color-on-tertiary-container));opacity:100%}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl){transform:translateX(-100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl):has(~.micl-stepper__step[aria-current=step]){transform:translateX(100%)}.micl-stepper .micl-stepper__steps .micl-stepper__step:dir(rtl)[aria-current=step]{transform:translateX(0%)}.micl-stepper__action--hidden,.micl-stepper__step--hidden{display:none !important}
|