material-inspired-component-library 1.0.2 → 1.1.0

package/docs/micl.js

@@ -0,0 +1 @@
+(()=>{"use strict";(()=>{const e="dialog.micl-bottomsheet",t=(()=>{var e=0;const t=t=>{let n=parseInt(window.getComputedStyle(t).getPropertyValue("max-height")),i=(t.dataset.snapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>0&&e<=n);return e||(e=t.getBoundingClientRect().height),[...new Set(i.concat([e,n]).sort())]},n=(e,n)=>{let i=e.getBoundingClientRect().height,o=t(e);return o.filter(e=>e>i+4)[0]||o[n?o.length-1:0]},i=(e,t)=>{e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:e=>{if(!e.matches("dialog.micl-bottomsheet")||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const o=e.querySelector(".micl-bottomsheet__headline");if(!o)return;const l=o.querySelector(".micl-bottomsheet__draghandle");l?.addEventListener("click",()=>{const t=n(e,!1);t>4&&i(e,t)});let r,a,c=!1,s=!1;function m(t){const n=t.clientY;c&&Math.abs(r-n)>4&&(c=!1,s=!0,e.classList.add("micl-bottomsheet--resizing")),s&&i(e,a+r-n)}function d(o){c=!1,e.classList.remove("micl-bottomsheet--resizing"),s&&(s=!1,o.clientY<r?i(e,n(e,!0)):e.getBoundingClientRect().height<48?(e.popover&&e.hidePopover(),i(e,a)):i(e,(e=>{let n=e.getBoundingClientRect().height,i=t(e),o=i.filter(e=>e<n-4);return o[o.length-1]||i[0]})(e)),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",d))}o.addEventListener("mousedown",t=>{t.eventPhase===Event.AT_TARGET&&(c=!0,t.preventDefault(),r=t.clientY,a=e.getBoundingClientRect().height,document.addEventListener("mousemove",m),document.addEventListener("mouseup",d))})},cleanup:e=>{e.matches("dialog.micl-bottomsheet")&&delete e.dataset.miclinitialized}}})(),n="button[popovertarget],button.micl-button--toggle",i=(()=>{const e=e=>{e.target&&e.target instanceof HTMLButtonElement&&(e.target.popoverTargetElement instanceof HTMLDialogElement&&(e.target.popoverTargetElement.open?e.target.popoverTargetElement.close():e.target.popoverTargetElement.showModal()),e.target.classList.contains("micl-button--toggle")&&e.target.classList.toggle("micl-button--selected"))};return{initialize:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&!t.dataset.miclinitialized&&(t.dataset.miclinitialized="1",(t.popoverTargetElement instanceof HTMLDialogElement&&!t.popoverTargetElement.hasAttribute("popover")||t.classList.contains("micl-button--toggle"))&&t.addEventListener("click",e))},cleanup:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&(document.removeEventListener("click",e),delete t.dataset.miclinitialized)}}})(),o=".micl-checkbox",l={keydown:e=>{if(e.target.matches(o)&&e instanceof KeyboardEvent&&e.target instanceof HTMLInputElement&&!e.target.disabled)switch(e.key){case"Enter":case" ":e.target.checked=!e.target.checked,e.preventDefault()}}},r=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",a=(()=>{const e=e=>!!e&&e.classList.contains("micl-list-item--disabled"),t=e=>!!e&&e.matches(":has(input[type=checkbox]:checked)");return{keydown:n=>{if(!(n instanceof KeyboardEvent&&n.target instanceof Element&&n.target.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const i=n.target.parentElement;if(!i)return;let o=[];if(i instanceof HTMLDetailsElement?o=Array.from(i.parentElement?.children||[]).map(t=>{let n=t.querySelector(":scope > summary");return e(n)?null:n}).filter(e=>!!e):i instanceof HTMLUListElement&&(o=Array.from(i.children).map(t=>t instanceof HTMLLIElement&&!e(t)?t:null).filter(e=>!!e)),0===o.length)return;let l=o.findIndex(e=>t(e));-1===l&&(l=o.findIndex(e=>0===e.tabIndex)),-1===l&&(l=0);let r=l;switch(n.key){case"ArrowDown":r=(l+1)%o.length,n.preventDefault();break;case"ArrowUp":r=(l-1+o.length)%o.length,n.preventDefault();break;case"Tab":let e=o.findIndex(e=>t(e));-1===e?0!==l&&(o[l].tabIndex=-1,o[0].tabIndex=0):e!==l&&(o[l].tabIndex=-1,o[e].tabIndex=0);break;case"Enter":case" ":const i=n.target.querySelector("input[type=checkbox].micl-checkbox");i instanceof HTMLInputElement&&(i.checked=!i.checked)}r!==l&&(o[l].tabIndex=-1,o[r].tabIndex=0,o[r].focus())}}})(),c=".micl-menu[popover]",s=(()=>{const e=(e,t)=>{const n=e.getBoundingClientRect().y,i=t.getBoundingClientRect().y,o=window.getComputedStyle(t).getPropertyValue("transform-origin");return(n>i?"bottom ":"top ")+(parseInt(o)>0?"right":"left")};return{initialize:t=>{if(!t.matches(".micl-menu[popover]")||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1";const n=document.querySelector(`[popovertarget="${t.id}"]`);n&&t.addEventListener("beforetoggle",i=>{"open"===i.oldState&&(t.style.transformOrigin=e(n,t))}),n&&t.addEventListener("toggle",i=>{"closed"===i.oldState&&(t.style.transformOrigin=e(n,t))})}}})(),m="input[type=range].micl-slider-xs,input[type=range].micl-slider-s,input[type=range].micl-slider-m,input[type=range].micl-slider-l,input[type=range].micl-slider-xl",d=(()=>{const e=String.fromCharCode(8226),t=String.fromCharCode(8201);return{initialize:n=>{n.style.setProperty("--md-sys-slider-max",n.max||"100"),n.style.setProperty("--md-sys-slider-min",n.min||"0"),n.style.setProperty("--md-sys-slider-value",n.value),n.style.setProperty("--md-sys-slider-tip",JSON.stringify(n.value+""));const i=n.getBoundingClientRect(),o=document.elementFromPoint(Math.max(i.x-1,0),Math.max(i.y-1,0));o&&(n.style.color=window.getComputedStyle(o).getPropertyValue("background-color"));const l=parseFloat(n.max),r=parseFloat(n.min),a=(e=>{const t=[],n=parseFloat(e.max),i=parseFloat(e.min);return e.list&&!isNaN(n)&&!isNaN(i)&&n>i&&e.list.querySelectorAll("option[value]").forEach(e=>{let o=parseFloat(e.value);!isNaN(o)&&o>=i&&o<=n&&t.push(o)}),t})(n).sort((e,t)=>e-t).map(e=>Math.round(100*(e-r)/(l-r)));if(a.length>0){const o=document.createElement("canvas"),l=o.getContext("2d");if(l){l.font=window.getComputedStyle(n).getPropertyValue("font");let o=l.measureText(t).width,r=l.measureText(e).width,c=i.width-10,s=0,m="";a.forEach(n=>{let i=c*n/100,l=Math.round((i-s)/o)-1;for(let e=0;e<l;e++)m+=t,s+=o;m+=e,s+=r}),n.dataset.miclsliderticks=m}o.remove()}else n.dataset.miclsliderticks=e},input:e=>{e.target.matches(".micl-slider-xs,.micl-slider-s,.micl-slider-m,.micl-slider-l,.micl-slider-xl")&&e.target instanceof HTMLInputElement&&!e.target.disabled&&(e.target.style.setProperty("--md-sys-slider-value",e.target.value),e.target.style.setProperty("--md-sys-slider-tip",JSON.stringify(e.target.value+"")))}}})(),u=".micl-textfield-outlined > input,.micl-textfield-filled > input",p=".micl-textfield-outlined > select,.micl-textfield-filled > select",g=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",f=(()=>{const e=".micl-textfield__character-counter";return{initialize:t=>{if(t.dataset.miclinitialized)return;if(t.dataset.miclinitialized="1",t.value&&(t.dataset.miclvalue="1"),t instanceof HTMLSelectElement||!t.maxLength)return;const n=t.parentElement?.querySelector(e);n&&(n.textContent=`${t.value.length}/${t.maxLength}`)},input:t=>{if(!t.target.matches(`${u},${p},${g}`)||!(t.target instanceof HTMLInputElement||t.target instanceof HTMLSelectElement||t.target instanceof HTMLTextAreaElement)||!t.target.dataset.miclinitialized||t.target.disabled)return;if(t.target.value?t.target.dataset.miclvalue="1":delete t.target.dataset.miclvalue,t.target instanceof HTMLSelectElement||!t.target.maxLength)return;const n=t.target.parentElement?.querySelector(e);n&&(n.textContent=`${t.target.value.length}/${t.target.maxLength}`)}}})();(()=>{const h={[e]:{component:t,type:HTMLDialogElement},[n]:{component:i,type:HTMLButtonElement},[o]:{component:l,type:HTMLInputElement},[r]:{component:a,type:HTMLElement},[c]:{component:s,type:HTMLElement},[p]:{component:f,type:HTMLSelectElement},[m]:{component:d,type:HTMLInputElement},[g]:{component:f,type:HTMLTextAreaElement},[u]:{component:f,type:HTMLInputElement}},y=Object.keys(h).join(","),v=e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.matches(t)&&e instanceof i&&"function"==typeof n.initialize)return void n.initialize(e)},E=e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.matches(t)&&e instanceof i&&"function"==typeof n.cleanup)return void n.cleanup(e)};new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(y)&&v(e),e.querySelectorAll(y).forEach(v))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(y)&&E(e),e.querySelectorAll(y).forEach(E))}))})}).observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll(y).forEach(v),document.querySelectorAll('[class*="micl-"]').forEach(e=>{window.getComputedStyle(e).getPropertyValue("--miclripple")&&e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;const n=t.clientX,i=t.clientY,o=e.getBoundingClientRect(),l=2*Math.sqrt(Math.pow(o.width,2)+Math.pow(o.height,2));e.style.cssText="--s:0;--o:1;",e.offsetTop,e.style.cssText=`--t:1;--o:0;--d:${l};--x:${n-o.left};--y:${i-o.top}`})}),document.addEventListener("input",e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.target.matches(t)&&e.target instanceof i&&"function"==typeof n.input)return void n.input(e)}),document.addEventListener("keydown",e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.target.matches(t)&&e.target instanceof i&&"function"==typeof n.keydown)return void n.keydown(e)})})()})()})();

package/docs/radio.html

@@ -5,8 +5,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MICL Radio Buttons</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
-    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         label {
@@ -95,7 +95,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/select.html

@@ -6,8 +6,8 @@
     <title>MICL Selects</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,confirmation_number,dark_mode,group,home,newspaper,person,settings&display=block">
-    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content > .micl-textfield-outlined, .micl-card__content > .micl-textfield-filled {
@@ -199,7 +199,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/sidesheet.html

@@ -6,8 +6,8 @@
     <title>MICL Side Sheets</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
-    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content {
@@ -109,7 +109,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/slider.html

@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,volume_up&display=block">
-    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card-elevated, .micl-card-filled, .micl-card-outlined {
@@ -18,6 +18,7 @@
         }
         .range {
             margin: 64px 8px;
+            background-color: inherit;
         }
         .micl-card-elevated input[type=range] {
             width: 100%;
@@ -66,7 +67,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/switch.html

@@ -6,8 +6,8 @@
     <title>MICL Switches</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode&display=block">
-    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         label {
@@ -145,7 +145,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/textfield.html

@@ -6,8 +6,8 @@
     <title>MICL Text Fields</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=cancel,credit_card,dark_mode,error,search&display=block">
-    <link rel="stylesheet" href="../themes/citrine/theme.css" id="theme-link">
-    <link rel="stylesheet" href="../dist/micl.css">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-textfield-outlined, .micl-textfield-filled {
@@ -45,15 +45,19 @@
                     <input type="text" id="mytextfield4" disabled value="Paris">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                 </div>
+                <div class="micl-textfield-outlined">
+                    <label for="mytextfield5">Multiline text field</label>
+                    <textarea id="mytextfield5"></textarea>
+                </div>
                 <div class="micl-textfield-outlined micl-textfield--error">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <label for="mytextfield5">Label text</label>
-                    <input type="text" id="mytextfield5">
+                    <label for="mytextfield6">Label text</label>
+                    <input type="text" id="mytextfield6">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                 </div>
                 <div class="micl-textfield-outlined micl-textfield--error">
-                    <label for="mytextfield6">Password</label>
-                    <input type="password" id="mytextfield6" value="foobar">
+                    <label for="mytextfield7">Password</label>
+                    <input type="password" id="mytextfield7" value="foobar">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
                     <span class="micl-textfield__supporting-text">Include an uppercase letter, a lowercase letter, and a numeric character</span>
                 </div>
@@ -71,7 +75,7 @@
                     <span class="micl-textfield__supporting-text">Supporting text</span>
                 </div>
                 <div class="micl-textfield-outlined">
-                    <span class="micl-textfield__prefix">€</span>
+                    <span class="micl-textfield__prefix" aria-label="Euro">€</span>
                     <label for="mytextfield13">Amount</label>
                     <input type="text" id="mytextfield13" value="299.89">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">credit_card</span>
@@ -83,16 +87,20 @@
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                     <span class="micl-textfield__supporting-text">This input field is disabled</span>
                 </div>
+                <div class="micl-textfield-outlined">
+                    <label for="mytextfield15">Text area</label>
+                    <textarea id="mytextfield15" rows="3">Text areas are taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. </textarea>
+                </div>
                 <div class="micl-textfield-outlined micl-textfield--error">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <label for="mytextfield15">Label text</label>
-                    <input type="text" id="mytextfield15">
+                    <label for="mytextfield16">Label text</label>
+                    <input type="text" id="mytextfield16">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                 </div>
                 <div class="micl-textfield-outlined micl-textfield--error">
-                    <label for="mytextfield16">Weight</label>
-                    <input type="number" id="mytextfield16" value="17800">
-                    <span class="micl-textfield__suffix">kg</span>
+                    <label for="mytextfield17">Weight</label>
+                    <input type="number" id="mytextfield17" value="17800">
+                    <span class="micl-textfield__suffix" aria-label="Kilograms">kg</span>
                     <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
                     <span class="micl-textfield__supporting-text">Too heavy</span>
                 </div>
@@ -106,15 +114,15 @@
                 </div>
                 <div class="micl-textfield-filled" style="--md-sys-textfield-prefix-space:2.5em">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <span class="micl-textfield__prefix">NOK</span>
+                    <span class="micl-textfield__prefix" aria-label="Norwegian kroner">NOK</span>
                     <label for="mytextfield22">Amount*</label>
                     <input type="text" id="mytextfield22" required value="">
                     <span class="micl-textfield__supporting-text">In Norwegian kroner</span>
                 </div>
                 <div class="micl-textfield-filled">
                     <span class="micl-textfield__character-counter"></span>
-                    <span class="micl-textfield__supporting-text">Enter at least twelve characters</span>
-                    <span class="micl-textfield__prefix">€</span>
+                    <span class="micl-textfield__supporting-text micl-textfield__supporting-text--focus">Enter at least twelve characters</span>
+                    <span class="micl-textfield__prefix" aria-label="Euro">€</span>
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                     <input type="text" id="mytextfield23" maxlength="24">
                     <label for="mytextfield23">Label text</label>
@@ -127,16 +135,21 @@
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                     <span class="micl-textfield__supporting-text">This input field is disabled</span>
                 </div>
+                <div class="micl-textfield-filled">
+                    <label for="mytextfield25">Multiline text field</label>
+                    <textarea id="mytextfield25" maxlength="100">Lorem ipsum dolor sit amet consectetur adipiscing elit</textarea>
+                    <span class="micl-textfield__character-counter"></span>
+                </div>
                 <div class="micl-textfield-filled micl-textfield--error">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <label for="mytextfield25">Label text</label>
-                    <input type="text" id="mytextfield25">
+                    <label for="mytextfield26">Label text</label>
+                    <input type="text" id="mytextfield26">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
                 </div>
                 <div class="micl-textfield-filled micl-textfield--error">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <label for="mytextfield26">City</label>
-                    <input type="text" id="mytextfield26" maxlength="20" value="Amsterdaaam">
+                    <label for="mytextfield27">City</label>
+                    <input type="text" id="mytextfield27" maxlength="20" value="Amsterdaaam">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
                     <span class="micl-textfield__supporting-text">Incorrect spelling</span>
                     <span class="micl-textfield__character-counter"></span>
@@ -145,7 +158,7 @@
         </div>
     </div>
 
-    <script src="../dist/micl.js"></script>
+    <script src="micl.js"></script>
     <script src="docs.js"></script>
 </body>
 </html>

package/docs/themes/airblue/dark-hc.css

@@ -0,0 +1,51 @@
+.dark-high-contrast {
+  --md-sys-color-primary: rgb(226 242 255);
+  --md-sys-color-surface-tint: rgb(145 206 245);
+  --md-sys-color-on-primary: rgb(0 0 0);
+  --md-sys-color-primary-container: rgb(141 202 241);
+  --md-sys-color-on-primary-container: rgb(0 13 22);
+  --md-sys-color-secondary: rgb(226 242 255);
+  --md-sys-color-on-secondary: rgb(0 0 0);
+  --md-sys-color-secondary-container: rgb(178 197 212);
+  --md-sys-color-on-secondary-container: rgb(0 13 22);
+  --md-sys-color-tertiary: rgb(244 237 255);
+  --md-sys-color-on-tertiary: rgb(0 0 0);
+  --md-sys-color-tertiary-container: rgb(200 189 229);
+  --md-sys-color-on-tertiary-container: rgb(13 6 36);
+  --md-sys-color-error: rgb(255 236 233);
+  --md-sys-color-on-error: rgb(0 0 0);
+  --md-sys-color-error-container: rgb(255 174 164);
+  --md-sys-color-on-error-container: rgb(34 0 1);
+  --md-sys-color-background: rgb(15 20 23);
+  --md-sys-color-on-background: rgb(223 227 231);
+  --md-sys-color-surface: rgb(15 20 23);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(65 72 77);
+  --md-sys-color-on-surface-variant: rgb(255 255 255);
+  --md-sys-color-outline: rgb(234 241 247);
+  --md-sys-color-outline-variant: rgb(189 195 202);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(223 227 231);
+  --md-sys-color-inverse-on-surface: rgb(0 0 0);
+  --md-sys-color-inverse-primary: rgb(0 77 108);
+  --md-sys-color-primary-fixed: rgb(198 231 255);
+  --md-sys-color-on-primary-fixed: rgb(0 0 0);
+  --md-sys-color-primary-fixed-dim: rgb(145 206 245);
+  --md-sys-color-on-primary-fixed-variant: rgb(0 19 30);
+  --md-sys-color-secondary-fixed: rgb(210 229 244);
+  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
+  --md-sys-color-secondary-fixed-dim: rgb(182 201 216);
+  --md-sys-color-on-secondary-fixed-variant: rgb(1 19 30);
+  --md-sys-color-tertiary-fixed: rgb(231 222 255);
+  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
+  --md-sys-color-tertiary-fixed-dim: rgb(204 193 233);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(19 12 42);
+  --md-sys-color-surface-dim: rgb(15 20 23);
+  --md-sys-color-surface-bright: rgb(76 81 84);
+  --md-sys-color-surface-container-lowest: rgb(0 0 0);
+  --md-sys-color-surface-container-low: rgb(28 32 36);
+  --md-sys-color-surface-container: rgb(44 49 52);
+  --md-sys-color-surface-container-high: rgb(55 60 64);
+  --md-sys-color-surface-container-highest: rgb(67 71 75);
+}

package/docs/themes/airblue/dark-mc.css

@@ -0,0 +1,51 @@
+.dark-medium-contrast {
+  --md-sys-color-primary: rgb(184 226 255);
+  --md-sys-color-surface-tint: rgb(145 206 245);
+  --md-sys-color-on-primary: rgb(0 41 59);
+  --md-sys-color-primary-container: rgb(90 152 188);
+  --md-sys-color-on-primary-container: rgb(0 0 0);
+  --md-sys-color-secondary: rgb(204 223 238);
+  --md-sys-color-on-secondary: rgb(21 40 51);
+  --md-sys-color-secondary-container: rgb(128 147 161);
+  --md-sys-color-on-secondary-container: rgb(0 0 0);
+  --md-sys-color-tertiary: rgb(226 215 255);
+  --md-sys-color-on-tertiary: rgb(40 33 64);
+  --md-sys-color-tertiary-container: rgb(149 139 177);
+  --md-sys-color-on-tertiary-container: rgb(0 0 0);
+  --md-sys-color-error: rgb(255 210 204);
+  --md-sys-color-on-error: rgb(84 0 3);
+  --md-sys-color-error-container: rgb(255 84 73);
+  --md-sys-color-on-error-container: rgb(0 0 0);
+  --md-sys-color-background: rgb(15 20 23);
+  --md-sys-color-on-background: rgb(223 227 231);
+  --md-sys-color-surface: rgb(15 20 23);
+  --md-sys-color-on-surface: rgb(255 255 255);
+  --md-sys-color-surface-variant: rgb(65 72 77);
+  --md-sys-color-on-surface-variant: rgb(215 221 228);
+  --md-sys-color-outline: rgb(172 179 185);
+  --md-sys-color-outline-variant: rgb(138 145 151);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(223 227 231);
+  --md-sys-color-inverse-on-surface: rgb(38 43 46);
+  --md-sys-color-inverse-primary: rgb(0 77 108);
+  --md-sys-color-primary-fixed: rgb(198 231 255);
+  --md-sys-color-on-primary-fixed: rgb(0 19 30);
+  --md-sys-color-primary-fixed-dim: rgb(145 206 245);
+  --md-sys-color-on-primary-fixed-variant: rgb(0 58 83);
+  --md-sys-color-secondary-fixed: rgb(210 229 244);
+  --md-sys-color-on-secondary-fixed: rgb(1 19 30);
+  --md-sys-color-secondary-fixed-dim: rgb(182 201 216);
+  --md-sys-color-on-secondary-fixed-variant: rgb(38 56 68);
+  --md-sys-color-tertiary-fixed: rgb(231 222 255);
+  --md-sys-color-on-tertiary-fixed: rgb(19 12 42);
+  --md-sys-color-tertiary-fixed-dim: rgb(204 193 233);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(57 49 82);
+  --md-sys-color-surface-dim: rgb(15 20 23);
+  --md-sys-color-surface-bright: rgb(65 69 73);
+  --md-sys-color-surface-container-lowest: rgb(4 8 11);
+  --md-sys-color-surface-container-low: rgb(26 30 33);
+  --md-sys-color-surface-container: rgb(36 40 44);
+  --md-sys-color-surface-container-high: rgb(47 51 55);
+  --md-sys-color-surface-container-highest: rgb(58 62 66);
+}

package/docs/themes/airblue/dark.css

@@ -0,0 +1,51 @@
+.dark {
+  --md-sys-color-primary: rgb(145 206 245);
+  --md-sys-color-surface-tint: rgb(145 206 245);
+  --md-sys-color-on-primary: rgb(0 52 75);
+  --md-sys-color-primary-container: rgb(0 76 107);
+  --md-sys-color-on-primary-container: rgb(198 231 255);
+  --md-sys-color-secondary: rgb(182 201 216);
+  --md-sys-color-on-secondary: rgb(32 51 62);
+  --md-sys-color-secondary-container: rgb(55 73 85);
+  --md-sys-color-on-secondary-container: rgb(210 229 244);
+  --md-sys-color-tertiary: rgb(204 193 233);
+  --md-sys-color-on-tertiary: rgb(51 44 76);
+  --md-sys-color-tertiary-container: rgb(74 66 99);
+  --md-sys-color-on-tertiary-container: rgb(231 222 255);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(15 20 23);
+  --md-sys-color-on-background: rgb(223 227 231);
+  --md-sys-color-surface: rgb(15 20 23);
+  --md-sys-color-on-surface: rgb(223 227 231);
+  --md-sys-color-surface-variant: rgb(65 72 77);
+  --md-sys-color-on-surface-variant: rgb(193 199 206);
+  --md-sys-color-outline: rgb(139 146 152);
+  --md-sys-color-outline-variant: rgb(65 72 77);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(223 227 231);
+  --md-sys-color-inverse-on-surface: rgb(44 49 52);
+  --md-sys-color-inverse-primary: rgb(32 100 135);
+  --md-sys-color-primary-fixed: rgb(198 231 255);
+  --md-sys-color-on-primary-fixed: rgb(0 30 45);
+  --md-sys-color-primary-fixed-dim: rgb(145 206 245);
+  --md-sys-color-on-primary-fixed-variant: rgb(0 76 107);
+  --md-sys-color-secondary-fixed: rgb(210 229 244);
+  --md-sys-color-on-secondary-fixed: rgb(10 30 40);
+  --md-sys-color-secondary-fixed-dim: rgb(182 201 216);
+  --md-sys-color-on-secondary-fixed-variant: rgb(55 73 85);
+  --md-sys-color-tertiary-fixed: rgb(231 222 255);
+  --md-sys-color-on-tertiary-fixed: rgb(30 23 53);
+  --md-sys-color-tertiary-fixed-dim: rgb(204 193 233);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(74 66 99);
+  --md-sys-color-surface-dim: rgb(15 20 23);
+  --md-sys-color-surface-bright: rgb(53 58 61);
+  --md-sys-color-surface-container-lowest: rgb(10 15 18);
+  --md-sys-color-surface-container-low: rgb(24 28 31);
+  --md-sys-color-surface-container: rgb(28 32 36);
+  --md-sys-color-surface-container-high: rgb(38 43 46);
+  --md-sys-color-surface-container-highest: rgb(49 53 57);
+}

package/docs/themes/airblue/light-hc.css

@@ -0,0 +1,51 @@
+.light-high-contrast {
+  --md-sys-color-primary: rgb(0 48 69);
+  --md-sys-color-surface-tint: rgb(32 100 135);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(0 79 110);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(28 46 58);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(57 75 88);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(47 39 71);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(76 68 102);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(96 0 4);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(152 0 10);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(246 250 254);
+  --md-sys-color-on-background: rgb(24 28 31);
+  --md-sys-color-surface: rgb(246 250 254);
+  --md-sys-color-on-surface: rgb(0 0 0);
+  --md-sys-color-surface-variant: rgb(221 227 234);
+  --md-sys-color-on-surface-variant: rgb(0 0 0);
+  --md-sys-color-outline: rgb(38 45 50);
+  --md-sys-color-outline-variant: rgb(67 74 79);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(44 49 52);
+  --md-sys-color-inverse-on-surface: rgb(255 255 255);
+  --md-sys-color-inverse-primary: rgb(145 206 245);
+  --md-sys-color-primary-fixed: rgb(0 79 110);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(0 55 78);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(57 75 88);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(35 53 64);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(76 68 102);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(53 46 78);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(181 185 189);
+  --md-sys-color-surface-bright: rgb(246 250 254);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(238 241 246);
+  --md-sys-color-surface-container: rgb(223 227 231);
+  --md-sys-color-surface-container-high: rgb(209 213 217);
+  --md-sys-color-surface-container-highest: rgb(195 199 203);
+}

package/docs/themes/airblue/light-mc.css

@@ -0,0 +1,51 @@
+.light-medium-contrast {
+  --md-sys-color-primary: rgb(0 58 83);
+  --md-sys-color-surface-tint: rgb(32 100 135);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(51 115 150);
+  --md-sys-color-on-primary-container: rgb(255 255 255);
+  --md-sys-color-secondary: rgb(38 56 68);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(93 111 124);
+  --md-sys-color-on-secondary-container: rgb(255 255 255);
+  --md-sys-color-tertiary: rgb(57 49 82);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(113 104 140);
+  --md-sys-color-on-tertiary-container: rgb(255 255 255);
+  --md-sys-color-error: rgb(116 0 6);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(207 44 39);
+  --md-sys-color-on-error-container: rgb(255 255 255);
+  --md-sys-color-background: rgb(246 250 254);
+  --md-sys-color-on-background: rgb(24 28 31);
+  --md-sys-color-surface: rgb(246 250 254);
+  --md-sys-color-on-surface: rgb(13 18 21);
+  --md-sys-color-surface-variant: rgb(221 227 234);
+  --md-sys-color-on-surface-variant: rgb(48 55 60);
+  --md-sys-color-outline: rgb(76 83 89);
+  --md-sys-color-outline-variant: rgb(103 110 116);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(44 49 52);
+  --md-sys-color-inverse-on-surface: rgb(238 241 246);
+  --md-sys-color-inverse-primary: rgb(145 206 245);
+  --md-sys-color-primary-fixed: rgb(51 115 150);
+  --md-sys-color-on-primary-fixed: rgb(255 255 255);
+  --md-sys-color-primary-fixed-dim: rgb(15 91 125);
+  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-secondary-fixed: rgb(93 111 124);
+  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
+  --md-sys-color-secondary-fixed-dim: rgb(69 87 100);
+  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed: rgb(113 104 140);
+  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
+  --md-sys-color-tertiary-fixed-dim: rgb(88 80 114);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
+  --md-sys-color-surface-dim: rgb(195 199 203);
+  --md-sys-color-surface-bright: rgb(246 250 254);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(240 244 248);
+  --md-sys-color-surface-container: rgb(229 232 237);
+  --md-sys-color-surface-container-high: rgb(217 221 226);
+  --md-sys-color-surface-container-highest: rgb(206 210 214);
+}

package/docs/themes/airblue/light.css

@@ -0,0 +1,51 @@
+.light {
+  --md-sys-color-primary: rgb(32 100 135);
+  --md-sys-color-surface-tint: rgb(32 100 135);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(198 231 255);
+  --md-sys-color-on-primary-container: rgb(0 76 107);
+  --md-sys-color-secondary: rgb(79 97 109);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(210 229 244);
+  --md-sys-color-on-secondary-container: rgb(55 73 85);
+  --md-sys-color-tertiary: rgb(98 89 124);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(231 222 255);
+  --md-sys-color-on-tertiary-container: rgb(74 66 99);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(147 0 10);
+  --md-sys-color-background: rgb(246 250 254);
+  --md-sys-color-on-background: rgb(24 28 31);
+  --md-sys-color-surface: rgb(246 250 254);
+  --md-sys-color-on-surface: rgb(24 28 31);
+  --md-sys-color-surface-variant: rgb(221 227 234);
+  --md-sys-color-on-surface-variant: rgb(65 72 77);
+  --md-sys-color-outline: rgb(113 120 126);
+  --md-sys-color-outline-variant: rgb(193 199 206);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(44 49 52);
+  --md-sys-color-inverse-on-surface: rgb(238 241 246);
+  --md-sys-color-inverse-primary: rgb(145 206 245);
+  --md-sys-color-primary-fixed: rgb(198 231 255);
+  --md-sys-color-on-primary-fixed: rgb(0 30 45);
+  --md-sys-color-primary-fixed-dim: rgb(145 206 245);
+  --md-sys-color-on-primary-fixed-variant: rgb(0 76 107);
+  --md-sys-color-secondary-fixed: rgb(210 229 244);
+  --md-sys-color-on-secondary-fixed: rgb(10 30 40);
+  --md-sys-color-secondary-fixed-dim: rgb(182 201 216);
+  --md-sys-color-on-secondary-fixed-variant: rgb(55 73 85);
+  --md-sys-color-tertiary-fixed: rgb(231 222 255);
+  --md-sys-color-on-tertiary-fixed: rgb(30 23 53);
+  --md-sys-color-tertiary-fixed-dim: rgb(204 193 233);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(74 66 99);
+  --md-sys-color-surface-dim: rgb(215 218 223);
+  --md-sys-color-surface-bright: rgb(246 250 254);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(240 244 248);
+  --md-sys-color-surface-container: rgb(235 238 243);
+  --md-sys-color-surface-container-high: rgb(229 232 237);
+  --md-sys-color-surface-container-highest: rgb(223 227 231);
+}