material-inspired-component-library 8.1.0 → 9.0.0

package/dist/timepicker.js

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

package/foundations/_index.scss

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

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

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

package/foundations/field/index.scss

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

package/foundations/layout/index.scss

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

package/package.json

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

package/styles/statelayer.scss

@@ -20,6 +20,7 @@
 // SOFTWARE.
 
 @use 'sass:map';
+@use 'motion';
 
 //
 // Set $master: true (via @use 'styles/statelayer' with ($master: true)) to install every
@@ -43,7 +44,7 @@ $_tokens: (
     focus-indicator-thickness:     3px,
     backdrop-opacity:              32%,
     ripple-opacity-factor:         0.6,
-    ripple-duration:               5000ms,
+    ripple-duration:               750ms,
 );
 
 @if $master {
@@ -65,8 +66,15 @@ $_tokens: (
     }
 
     @keyframes micl-ripple {
-        from { background-size: 0%, 100%; }
-        to   { background-size: 10000%, 100%; }
+        from {
+            background-size: 0% 0%, 100%;
+            animation-timing-function: motion.$md-sys-motion-easing-standard;
+        }
+        60% {
+            background-size: 1000% 1000%, 100%;
+            animation-timing-function: motion.$md-sys-motion-easing-standard-accelerate;
+        }
+        to   { background-size: 10000% 10000%, 100%; }
     }
 }
 
@@ -99,8 +107,15 @@ $_tokens: (
 @mixin keyframes {
     @if not $master {
         @keyframes micl-ripple {
-            from { background-size: 0%, 100%; }
-            to   { background-size: 10000%, 100%; }
+            from {
+                background-size: 0% 0%, 100%;
+                animation-timing-function: motion.$md-sys-motion-easing-standard;
+            }
+            60% {
+                background-size: 1000% 1000%, 100%;
+                animation-timing-function: motion.$md-sys-motion-easing-standard-accelerate;
+            }
+            to   { background-size: 10000% 10000%, 100%; }
         }
     }
 }

package/styles.scss

@@ -21,11 +21,12 @@
 
 @use 'styles/shape' with ($master: true);
 @use 'styles/elevation' with ($master: true);
+@use 'styles/motion' with ($master: true);
 @use 'styles/statelayer' with ($master: true);
 @use 'styles/typography' with ($master: true);
-@use 'styles/motion' with ($master: true);
 
-@use 'foundations';
+@use 'foundations/base';
+@use 'foundations/field';
 @use 'foundations/layout';
 @use 'foundations/scrollbar';
 
@@ -38,6 +39,7 @@
 @use 'components/slider';
 @use 'components/button';
 @use 'components/iconbutton';
+@use 'components/chip';
 @use 'components/list';
 @use 'components/menu';
 @use 'components/select';
@@ -48,6 +50,7 @@
 @use 'components/appbar';
 @use 'components/sidesheet';
 @use 'components/bottomsheet';
+@use 'components/navigationbar';
 @use 'components/navigationrail';
 @use 'components/progressindicator';
 @use 'components/stepper';

package/.claude/settings.local.json

@@ -1,14 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(node *)",
-      "WebSearch",
-      "Bash(npm run *)",
-      "WebFetch(domain:raw.githubusercontent.com)",
-      "WebFetch(domain:android.googlesource.com)",
-      "WebFetch(domain:m3.material.io)",
-      "WebFetch(domain:github.com)",
-      "Bash(xargs grep -l \"body\\\\|html\")"
-    ]
-  }
-}

package/.editorconfig

@@ -1,12 +0,0 @@
-# For GitHub
-
-root = true
-
-[*.{sass,css,ts,js}]
-charset = utf-8
-indent_style = space
-indent_size = 4
-tab_width = 4
-end_of_line = lf
-trim_trailing_whitespace = true
-insert_final_newline = true

package/.gitattributes

@@ -1,9 +0,0 @@
-* text=auto
-
-*.html text eol=lf
-*.scss text eol=lf
-*.css text eol=lf
-*.ts text eol=lf
-*.js text eol=lf
-*.md text eol=lf
-*.json text eol=lf

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,35 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.