@stackific/md3 0.1.1 → 0.1.3

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.
Files changed (114) hide show
  1. package/README.md +2486 -191
  2. package/dist/internal.md +274 -0
  3. package/dist/md3.css +1 -1
  4. package/dist/md3.js +1 -1
  5. package/package.json +1 -3
  6. package/src/main.js +0 -5
  7. package/src/runtime/elements/dialogs.js +0 -72
  8. package/src/runtime/elements/fields.js +0 -181
  9. package/src/runtime/elements/menus.js +0 -42
  10. package/src/runtime/elements/pages.js +0 -7
  11. package/src/runtime/elements/progress.js +0 -35
  12. package/src/runtime/elements/sliders.js +0 -78
  13. package/src/runtime/elements/snackbars.js +0 -27
  14. package/src/runtime/helpers/ripples.js +0 -46
  15. package/src/runtime/md3.js +0 -141
  16. package/src/runtime/palette.js +0 -64
  17. package/src/runtime/settings/theme.js +0 -194
  18. package/src/runtime/utils.js +0 -165
  19. package/src/styles/_config.scss +0 -142
  20. package/src/styles/_mixins.scss +0 -80
  21. package/src/styles/elements/_badges.scss +0 -65
  22. package/src/styles/elements/_bars.scss +0 -83
  23. package/src/styles/elements/_buttons.scss +0 -119
  24. package/src/styles/elements/_cards.scss +0 -32
  25. package/src/styles/elements/_chips.scss +0 -46
  26. package/src/styles/elements/_dialogs.scss +0 -143
  27. package/src/styles/elements/_dividers.scss +0 -46
  28. package/src/styles/elements/_expansions.scss +0 -19
  29. package/src/styles/elements/_fields.scss +0 -458
  30. package/src/styles/elements/_grids.scss +0 -35
  31. package/src/styles/elements/_icons.scss +0 -70
  32. package/src/styles/elements/_layouts.scss +0 -24
  33. package/src/styles/elements/_lists.scss +0 -76
  34. package/src/styles/elements/_main-layouts.scss +0 -45
  35. package/src/styles/elements/_media.scss +0 -104
  36. package/src/styles/elements/_menus.scss +0 -289
  37. package/src/styles/elements/_navigations.scss +0 -450
  38. package/src/styles/elements/_overlays.scss +0 -34
  39. package/src/styles/elements/_pages.scss +0 -28
  40. package/src/styles/elements/_progress.scss +0 -141
  41. package/src/styles/elements/_selections.scss +0 -248
  42. package/src/styles/elements/_shapes.scss +0 -153
  43. package/src/styles/elements/_sliders.scss +0 -336
  44. package/src/styles/elements/_snackbars.scss +0 -44
  45. package/src/styles/elements/_tables.scss +0 -67
  46. package/src/styles/elements/_tabs.scss +0 -49
  47. package/src/styles/elements/_tooltips.scss +0 -125
  48. package/src/styles/fonts/material-symbols-outlined.woff2 +0 -0
  49. package/src/styles/fonts/material-symbols-rounded.woff2 +0 -0
  50. package/src/styles/fonts/material-symbols-sharp.woff2 +0 -0
  51. package/src/styles/fonts/material-symbols-subset.woff2 +0 -0
  52. package/src/styles/helpers/_alignments.scss +0 -29
  53. package/src/styles/helpers/_blurs.scss +0 -26
  54. package/src/styles/helpers/_colors.scss +0 -39
  55. package/src/styles/helpers/_directions.scss +0 -30
  56. package/src/styles/helpers/_elevates.scss +0 -20
  57. package/src/styles/helpers/_forms.scss +0 -76
  58. package/src/styles/helpers/_margins.scss +0 -39
  59. package/src/styles/helpers/_opacities.scss +0 -18
  60. package/src/styles/helpers/_paddings.scss +0 -35
  61. package/src/styles/helpers/_positions.scss +0 -44
  62. package/src/styles/helpers/_responsive.scss +0 -24
  63. package/src/styles/helpers/_ripples.scss +0 -40
  64. package/src/styles/helpers/_scrolls.scss +0 -7
  65. package/src/styles/helpers/_shadows.scss +0 -22
  66. package/src/styles/helpers/_sizes.scss +0 -34
  67. package/src/styles/helpers/_spaces.scss +0 -22
  68. package/src/styles/helpers/_typography.scss +0 -132
  69. package/src/styles/helpers/_waves.scss +0 -52
  70. package/src/styles/helpers/_zoom.scss +0 -18
  71. package/src/styles/md3.scss +0 -61
  72. package/src/styles/settings/_fonts.scss +0 -41
  73. package/src/styles/settings/_globals.scss +0 -104
  74. package/src/styles/settings/_reset.scss +0 -82
  75. package/src/styles/settings/_theme.scss +0 -126
  76. package/src/styles/settings/_themes.scss +0 -1525
  77. package/src/styles/shapes/arch.svg +0 -1
  78. package/src/styles/shapes/arrow.svg +0 -1
  79. package/src/styles/shapes/boom.svg +0 -1
  80. package/src/styles/shapes/bun.svg +0 -1
  81. package/src/styles/shapes/burst.svg +0 -1
  82. package/src/styles/shapes/circle.svg +0 -1
  83. package/src/styles/shapes/clamshell.svg +0 -1
  84. package/src/styles/shapes/diamond.svg +0 -1
  85. package/src/styles/shapes/fan.svg +0 -1
  86. package/src/styles/shapes/flower.svg +0 -1
  87. package/src/styles/shapes/gem.svg +0 -1
  88. package/src/styles/shapes/ghost-ish.svg +0 -1
  89. package/src/styles/shapes/heart.svg +0 -1
  90. package/src/styles/shapes/leaf-clover4.svg +0 -1
  91. package/src/styles/shapes/leaf-clover8.svg +0 -1
  92. package/src/styles/shapes/loading-indicator.svg +0 -1
  93. package/src/styles/shapes/oval.svg +0 -1
  94. package/src/styles/shapes/pentagon.svg +0 -1
  95. package/src/styles/shapes/pill.svg +0 -1
  96. package/src/styles/shapes/pixel-circle.svg +0 -1
  97. package/src/styles/shapes/pixel-triangle.svg +0 -1
  98. package/src/styles/shapes/puffy-diamond.svg +0 -1
  99. package/src/styles/shapes/puffy.svg +0 -1
  100. package/src/styles/shapes/semicircle.svg +0 -1
  101. package/src/styles/shapes/sided-cookie12.svg +0 -1
  102. package/src/styles/shapes/sided-cookie4.svg +0 -1
  103. package/src/styles/shapes/sided-cookie6.svg +0 -1
  104. package/src/styles/shapes/sided-cookie7.svg +0 -1
  105. package/src/styles/shapes/sided-cookie9.svg +0 -1
  106. package/src/styles/shapes/slanted.svg +0 -1
  107. package/src/styles/shapes/soft-boom.svg +0 -1
  108. package/src/styles/shapes/soft-burst.svg +0 -1
  109. package/src/styles/shapes/square.svg +0 -1
  110. package/src/styles/shapes/sunny.svg +0 -1
  111. package/src/styles/shapes/triangle.svg +0 -1
  112. package/src/styles/shapes/very-sunny.svg +0 -1
  113. package/src/styles/shapes/wavy-circle.svg +0 -1
  114. package/src/styles/shapes/wavy.svg +0 -1
package/dist/md3.js CHANGED
@@ -1 +1 @@
1
- const G=[],H=new WeakMap,E=navigator.userAgent.includes("Chrome");navigator.userAgent.includes("Firefox");navigator.userAgent.includes("Safari");navigator.userAgent.includes("Windows");const et=navigator.userAgent.includes("Macintosh");navigator.userAgent.includes("Linux");navigator.userAgent.includes("Android");const nt=/iPad|iPhone|iPod/.test(navigator.userAgent);function Ft(){var t,e;return((e=(t=window==null?void 0:window.matchMedia)==null?void 0:t.call(window,"(prefers-color-scheme: dark)"))==null?void 0:e.matches)??!1}async function it(t){await new Promise(e=>setTimeout(e,t))}function St(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)})}function v(t,e){try{return typeof t=="string"?(e??document).querySelector(t):t}catch{return null}}function f(t,e){try{return typeof t=="string"?(e??document).querySelectorAll(t):t??G}catch{return G}}function s(t,e){return(t==null?void 0:t.classList.contains(e))??!1}function h(t,e){var n;return((n=t==null?void 0:t.tagName)==null?void 0:n.toLowerCase())===e}function A(t,e){var n;return((n=t==null?void 0:t.type)==null?void 0:n.toLowerCase())===e}function y(t,e){if(t instanceof NodeList)for(let n=0;n<t.length;n++)t[n].classList.add(e);else t==null||t.classList.add(e)}function g(t,e){if(t instanceof NodeList)for(let n=0;n<t.length;n++)t[n].classList.remove(e);else t==null||t.classList.remove(e)}function x(t,e,n,i=!0){t!=null&&t.addEventListener&&t.addEventListener(e,n,i)}function c(t,e,n,i=!0){if(!t)return;let o=H.get(t);o||(o=new Map,H.set(t,o));const u=e+(i?"1":"0");let r=o.get(u);r||(r=new Set,o.set(u,r)),!r.has(n)&&(r.add(n),x(t,e,n,i))}function F(t,e,n,i=!0){t!=null&&t.removeEventListener&&t.removeEventListener(e,n,i)}function Mt(t,e){var n;(n=e==null?void 0:e.parentNode)==null||n.insertBefore(t,e)}function B(t){return t==null?void 0:t.previousElementSibling}function O(t){return t==null?void 0:t.nextElementSibling}function w(t){return t==null?void 0:t.parentElement}function Dt(t){const e=document.createElement("div");for(const n of Object.keys(t))e.setAttribute(n,t[n]);return e}function P(){var t,e;(e=(t=document.activeElement)==null?void 0:t.blur)==null||e.call(t)}function Lt(t){return f(`[data-ui="#${t}"]`)}function It(t){return v(`[data-ui="#${t}"]`)}function _t(t){t.id&&s(t,"page")&&(t=It(t.id)??t);const e=w(t);if(!s(e,"tabs")&&!s(e,"tabbed")&&!h(e,"nav"))return;const n=f("a",e);for(let i=0;i<n.length;i++)g(n[i],"active");!h(t,"button")&&!s(t,"button")&&!s(t,"chip")&&y(t,"active")}function rt(){const t=getComputedStyle(document.documentElement).getPropertyValue("--size")||"16px";return t.includes("%")?parseInt(t)*16/100:t.includes("em")?parseInt(t)*16:parseInt(t)}function q(t){t.placeholder||(t.placeholder=" ")}function Bt(t){const e=t.currentTarget,n=w(e),i=v("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",n);i&&i.focus()}function $(t){T(t.currentTarget)}function R(t){T(t.currentTarget)}function Ot(t){z(t.currentTarget)}function Pt(t){j(t.currentTarget)}function qt(t){z(t.currentTarget,t)}function $t(t){j(t.currentTarget,t)}function Rt(t){var i;const e=t.currentTarget,n=v("input",w(e));n&&((i=e.textContent)!=null&&i.includes("visibility"))&&(n.type==="password"?(n.type="text",e.textContent="visibility_off"):(n.type="password",e.textContent="visibility"))}function zt(t){ot(t.currentTarget)}function jt(t){const e=t.target.closest(".field > label");e&&(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),Bt(t))}function Kt(){const t=document.body;t&&c(t,"click",jt)}function Nt(){const t=f(".field > input:not([type=file], [type=color], [type=range])");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R),T(t[e])}function Ut(){const t=f(".field > select");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R)}function Wt(){const t=f(".field > input[type=file]");for(let e=0;e<t.length;e++)c(t[e],"change",Ot),z(t[e])}function Yt(){const t=f(".field > input[type=color]");for(let e=0;e<t.length;e++)c(t[e],"change",Pt),j(t[e])}function Gt(){const t=f(".field > textarea");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R),q(t[e]),!(E&&!et&&!nt)&&(c(t[e],"input",zt),ot(t[e]))}function Ht(){const t=f(".field:has(> input[type=password]) > i, a");for(let e=0;e<t.length;e++)c(t[e],"click",Rt)}function T(t){A(t,"number")&&!t.value&&(t.value=""),q(t)}function z(t,e){if((e==null?void 0:e.key)==="Enter"){const i=B(t);if(!A(i,"file"))return;i.click();return}const n=O(t);A(n,"text")&&(n.value=t.files?Array.from(t.files).map(i=>i.name).join(", "):"",n.readOnly=!0,c(n,"keydown",qt,!1),T(n))}function j(t,e){if((e==null?void 0:e.key)==="Enter"){const i=B(t);if(!A(i,"color"))return;i.click();return}const n=O(t);A(n,"text")&&(n.readOnly=!0,n.value=t.value,c(n,"keydown",$t,!1),T(n))}function ot(t){if(q(t),t.hasAttribute("rows"))return;const e=rt();t.style.blockSize="auto",t.style.blockSize=`${t.scrollHeight-e}px`}function Vt(){Kt(),Nt(),Ut(),Wt(),Yt(),Gt(),Ht()}function V(t){const e=t.target;!h(e,"input")&&!h(e,"select")||(e.type==="range"?(e.focus(),ct(e)):at())}function Zt(t){if(!window.matchMedia("(pointer: coarse)").matches)return;t.target.blur()}function at(){const t=document.body,e=f(".slider > input[type=range]");e.length?x(t,"input",V,!1):F(t,"input",V,!1);for(let n=0;n<e.length;n++)ct(e[n])}function ct(t){c(t,"change",Zt);const e=w(t),n=v("span",e),i=f("input",e);if(!i.length||!n)return;const o=rt(),u=s(e,"max")?0:.25*o*100/i[0].offsetWidth,r=[],l=[];for(let m=0,Tt=i.length;m<Tt;m++){const U=parseFloat(i[m].min)||0,Ct=parseFloat(i[m].max)||100,W=parseFloat(i[m].value)||0,Y=(W-U)*100/(Ct-U),Et=u/2-u*Y/100;r.push(Y+Et),l.push(W)}let p=r[0],d=0,N=100-d-p,S=l[0],M=l[1]||0;i.length>1&&(p=Math.abs(r[1]-r[0]),d=r[1]>r[0]?r[0]:r[1],N=100-d-p,M>S&&(S=l[1]||0,M=l[0])),requestAnimationFrame(()=>{e.style.cssText=`--_start: ${d}%; --_end: ${N}%; --_value1: '${S}'; --_value2: '${M}';`})}function Xt(){at()}const Z={red:"#F44336",pink:"#E91E63",purple:"#9C27B0","deep-purple":"#673AB7",blue:"#2196F3","light-blue":"#03A9F4",cyan:"#00BCD4",green:"#4CAF50","light-green":"#8BC34A",lime:"#CDDC39",yellow:"#FFEB3B",amber:"#FFC107",orange:"#FF9800","deep-orange":"#FF5722",brown:"#795548","blue-grey":"#607D8B",stackific:"#1447E6","hello-pumpkin":"#FF8F00","sea-lettuce":"#63A002",olive:"#7C7C67",nord:"#5E81AC","vega-violet":"#AD46FF","wild-strawberry":"#F6339A","heliotrope-magenta":"#E12AFB","voodoo-violet":"#804792","red-orchid":"#C0001C","green-brown":"#6E5D00",shakshuka:"#AB350F","purple-honeycreeper":"#8E51FF",maldives:"#00B8DB",verditer:"#00BBA7",fennel:"#00BC7D",gold:"#EFB100","vitamin-c":"#FD9A00",burtuqali:"#FF6900"},ut=["stackific","hello-pumpkin","sea-lettuce","olive","nord","vega-violet","wild-strawberry","heliotrope-magenta","voodoo-violet","red-orchid","green-brown","shakshuka","purple-honeycreeper","maldives","verditer","fennel","gold","vitamin-c","burtuqali"],a={light:"",dark:""},st="md3:mode",lt="md3:theme";function Qt(){return ut.slice()}function Jt(){var t;try{return((t=globalThis.localStorage)==null?void 0:t.getItem(lt))||null}catch{return null}}function te(t){var e;try{(e=globalThis.localStorage)==null||e.setItem(lt,t)}catch{}}function b(){return document==null?void 0:document.documentElement}function ft(){var t;try{return((t=globalThis.localStorage)==null?void 0:t.getItem(st))||null}catch{return null}}function ee(t){var e;try{(e=globalThis.localStorage)==null||e.setItem(st,t)}catch{}}function X(){var e,n;const t=(n=(e=b())==null?void 0:e.dataset)==null?void 0:n.mode;return t==="auto"||t==="light"||t==="dark"?t:ft()||"auto"}function _(){var e,n;const t=(n=(e=b())==null?void 0:e.dataset)==null?void 0:n.mode;return t==="light"||t==="dark"?t:Ft()?"dark":"light"}function ne(){if(a.light&&a.dark)return a;const t=b();if(!t)return a;const e=t.dataset.mode,n=i=>{t.dataset.mode=i;const o=getComputedStyle(t),u=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--surface-variant","--on-surface-variant","--outline","--outline-variant","--shadow","--scrim","--inverse-surface","--inverse-on-surface","--inverse-primary","--surface-dim","--surface-bright","--surface-container-lowest","--surface-container-low","--surface-container","--surface-container-high","--surface-container-highest"];let r="";for(let l=0,p=u.length;l<p;l++)r+=u[l]+":"+o.getPropertyValue(u[l])+";";return r};try{a.light=n("light"),a.dark=n("dark")}finally{e===void 0?delete t.dataset.mode:t.dataset.mode=e}return a}async function dt(t){const e=b();if(!t)return ne();if(t.light&&t.dark)return a.light=t.light,a.dark=t.dark,e.setAttribute("style",t[_()]),t;if(typeof t=="string"&&ut.includes(t))return te(t),e.dataset.theme=t,e.removeAttribute("style"),a.light="",a.dark="",{light:"",dark:""};typeof t=="string"&&Z[t]&&(t=Z[t]);const n=globalThis.materialDynamicColors;if(typeof n!="function")throw new Error('ui("theme", source) requires material-dynamic-colors. Install it and `import "material-dynamic-colors"` once at app entry, or include the CDN script.');return n(t).then(i=>{const o=u=>{let r="";for(const l of Object.keys(u)){const p=u[l],d=l.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase();r+="--"+d+":"+p+";"}return r};return a.light=o(i.light),a.dark=o(i.dark),e.setAttribute("style",a[_()]),a})}function pt(t){const e=b();return e?(t&&(t!=="auto"&&t!=="light"&&t!=="dark"&&(t="auto"),ee(t),e.dataset.mode=t,a.light&&a.dark&&e.setAttribute("style",a[_()])),X()):t}let Q=!1;function ie(){if(Q||typeof globalThis.matchMedia!="function")return;const t=globalThis.matchMedia("(prefers-color-scheme: dark)"),e=()=>{const n=b();!n||n.dataset.mode!=="auto"||!a.light||!a.dark||n.setAttribute("style",a[t.matches?"dark":"light"])};t.addEventListener?t.addEventListener("change",e):t.addListener&&t.addListener(e),Q=!0}const C=[];function gt(t){if(t.key==="Escape"){const e=t.currentTarget;yt(e,e)}}function re(t){(v("[autofocus]",t)??t).focus()}function ht(t,e){g(Lt(t.id),"active"),g(t,"active"),g(e,"active"),t.close(),C.pop();const n=C[C.length-1];n&&n.focus()}async function oe(t,e,n,i){!h(i,"button")&&!s(i,"button")&&!s(i,"chip")&&y(i,"active"),y(e,"active"),y(t,"active"),n?t.showModal():t.show(),await it(90),n||x(t,"keydown",gt,!1),C.push(t),re(t)}function ae(t){const e=t.currentTarget,n=O(e);h(n,"dialog")&&ht(n,e)}async function yt(t,e){P();let n=B(e);const i=s(e,"active")||e.open,o=s(e,"modal");o||F(e,"keydown",gt,!1),s(n,"overlay")||(n=Dt({class:"overlay"}),Mt(n,e),await it(90)),o||c(n,"click",ae,!1),i?ht(e,n):oe(e,n,o,t)}let D;function vt(t){F(document.body,"click",vt);const e=t.target,n=f("menu.active");for(let i=0;i<n.length;i++)bt(e,n[i],t)}function ce(t){setTimeout(()=>{const e=v(".field > input",t);e?e.focus():t.focus()},90)}function bt(t,e,n){D&&clearTimeout(D),D=setTimeout(()=>{x(document.body,"click",vt),h(document.activeElement,"input")||P();const i=s(e,"active"),o=(n==null?void 0:n.target)===t,u=!!t.closest("menu");if(!i&&u||i&&o){g(e,"active");return}g(f("menu.active"),"active"),y(e,"active"),ce(e)},90)}let k;function ue(t){const e=t.currentTarget;g(e,"active"),k&&clearTimeout(k)}function se(t,e){P();const n=f(".snackbar.active");for(let i=0;i<n.length;i++)g(n[i],"active");y(t,"active"),c(t,"click",ue),k&&clearTimeout(k),e!==-1&&(k=setTimeout(()=>{g(t,"active")},e??6e3))}function le(t){const e=w(t);e&&g(f(":scope > .page",e),"active"),y(t,"active")}function mt(t){const e=t instanceof MouseEvent,n=t.currentTarget,i=n.getBoundingClientRect(),o=Math.max(i.width,i.height),u=o/2,r=e?t.clientX-i.left-u:i.width/2-u,l=e?t.clientY-i.top-u:i.height/2-u,p=document.createElement("div");p.className="ripple-js";const d=document.createElement("div");d.style.inlineSize=d.style.blockSize=`${o}px`,d.style.left=`${r}px`,d.style.top=`${l}px`,c(d,"animationend",()=>{p.remove()}),p.appendChild(d),n.appendChild(p)}function fe(t){const e=t.target.closest(".slow-ripple, .ripple, .fast-ripple");e&&(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),mt(t))}function de(t){const e=t.target.closest(".slow-ripple, .ripple, .fast-ripple");!e||t.key!==" "||(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),mt(t))}function pe(){const t=document.body;t&&(c(t,"mousedown",fe),c(t,"keydown",de))}function J(t){const e=t.target;h(e,"progress")?kt(e):At()}function kt(t){requestAnimationFrame(()=>{if(!t.hasAttribute("value")&&!t.hasAttribute("max")){const e=s(t,"circle")?"50":"100";t.style.setProperty("--_value",e),t.setAttribute("value",e),t.setAttribute("max","100"),t.classList.add("indeterminate")}else t.style.setProperty("--_value",String(t.value))})}function At(){if(E&&!et&&!nt)return;const t=document.body,e=f("progress");e.length?x(t,"input",J,!1):F(t,"input",J,!1);for(let n=0;n<e.length;n++)kt(e[n])}let L,I=null;function tt(){L&&clearTimeout(L),L=setTimeout(()=>wt(),180)}async function K(t,e,n,i){if(!e&&(e=v(t.getAttribute("data-ui")),!e)){t.classList.toggle("active");return}if(_t(t),h(e,"dialog")){requestAnimationFrame(()=>yt(t,e));return}if(h(e,"menu")){requestAnimationFrame(()=>bt(t,e,i));return}if(s(e,"snackbar")){requestAnimationFrame(()=>se(e,n));return}if(s(e,"page")){requestAnimationFrame(()=>le(e));return}if(s(e,"active")){g(t,"active"),g(e,"active");return}y(e,"active")}function xt(){globalThis.ui||I||!globalThis.MutationObserver||(I=new MutationObserver(tt),I.observe(document.body,{childList:!0,subtree:!0}),tt())}function ge(t){const e=t.target.closest("[data-ui]");e&&K(e,null,null,t)}function he(t){const e=t.target.closest("[data-ui]");e&&h(e,"a")&&!e.getAttribute("href")&&t.key==="Enter"&&K(e,null,null,t)}function ye(){const t=document.body;t&&(c(t,"click",ge),c(t,"keydown",he))}function wt(t,e){if(t){if(t==="setup"){xt();return}if(t==="guid")return St();if(t==="mode")return pt(e);if(t==="theme")return dt(e);if(t==="themes")return Qt();const n=v(t);if(!n)return;K(n,n,e)}ye(),Vt(),pe(),Xt(),At()}function ve(){var e;if(globalThis.ui)return;const t=(e=globalThis.document)==null?void 0:e.documentElement;if(t){pt(ft()||t.dataset.mode||"auto");const n=Jt();n&&dt(n)}ie(),xt(),globalThis.ui=wt}ve();
1
+ const G=[],H=new WeakMap,E=navigator.userAgent.includes("Chrome");navigator.userAgent.includes("Firefox");navigator.userAgent.includes("Safari");navigator.userAgent.includes("Windows");const et=navigator.userAgent.includes("Macintosh");navigator.userAgent.includes("Linux");navigator.userAgent.includes("Android");const nt=/iPad|iPhone|iPod/.test(navigator.userAgent);function Ft(){var t,e;return((e=(t=window==null?void 0:window.matchMedia)==null?void 0:t.call(window,"(prefers-color-scheme: dark)"))==null?void 0:e.matches)??!1}async function it(t){await new Promise(e=>setTimeout(e,t))}function St(){return"fxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,t=>{const e=Math.random()*16|0;return(t==="x"?e:e&3|8).toString(16)})}function v(t,e){try{return typeof t=="string"?(e??document).querySelector(t):t}catch{return null}}function f(t,e){try{return typeof t=="string"?(e??document).querySelectorAll(t):t??G}catch{return G}}function s(t,e){return(t==null?void 0:t.classList.contains(e))??!1}function h(t,e){var n;return((n=t==null?void 0:t.tagName)==null?void 0:n.toLowerCase())===e}function A(t,e){var n;return((n=t==null?void 0:t.type)==null?void 0:n.toLowerCase())===e}function y(t,e){if(t instanceof NodeList)for(let n=0;n<t.length;n++)t[n].classList.add(e);else t==null||t.classList.add(e)}function g(t,e){if(t instanceof NodeList)for(let n=0;n<t.length;n++)t[n].classList.remove(e);else t==null||t.classList.remove(e)}function x(t,e,n,i=!0){t!=null&&t.addEventListener&&t.addEventListener(e,n,i)}function c(t,e,n,i=!0){if(!t)return;let o=H.get(t);o||(o=new Map,H.set(t,o));const u=e+(i?"1":"0");let r=o.get(u);r||(r=new Set,o.set(u,r)),!r.has(n)&&(r.add(n),x(t,e,n,i))}function F(t,e,n,i=!0){t!=null&&t.removeEventListener&&t.removeEventListener(e,n,i)}function Mt(t,e){var n;(n=e==null?void 0:e.parentNode)==null||n.insertBefore(t,e)}function B(t){return t==null?void 0:t.previousElementSibling}function O(t){return t==null?void 0:t.nextElementSibling}function w(t){return t==null?void 0:t.parentElement}function Dt(t){const e=document.createElement("div");for(const n of Object.keys(t))e.setAttribute(n,t[n]);return e}function P(){var t,e;(e=(t=document.activeElement)==null?void 0:t.blur)==null||e.call(t)}function Lt(t){return f(`[data-ui="#${t}"]`)}function It(t){return v(`[data-ui="#${t}"]`)}function _t(t){t.id&&s(t,"page")&&(t=It(t.id)??t);const e=w(t);if(!s(e,"tabs")&&!s(e,"tabbed")&&!h(e,"nav"))return;const n=f("a",e);for(let i=0;i<n.length;i++)g(n[i],"active");!h(t,"button")&&!s(t,"button")&&!s(t,"chip")&&y(t,"active")}function rt(){const t=getComputedStyle(document.documentElement).getPropertyValue("--size")||"16px";return t.includes("%")?parseInt(t)*16/100:t.includes("em")?parseInt(t)*16:parseInt(t)}function q(t){t.placeholder||(t.placeholder=" ")}function Bt(t){const e=t.currentTarget,n=w(e),i=v("input:not([type=file], [type=checkbox], [type=radio]), select, textarea",n);i&&i.focus()}function $(t){T(t.currentTarget)}function R(t){T(t.currentTarget)}function Ot(t){z(t.currentTarget)}function Pt(t){j(t.currentTarget)}function qt(t){z(t.currentTarget,t)}function $t(t){j(t.currentTarget,t)}function Rt(t){var i;const e=t.currentTarget,n=v("input",w(e));n&&((i=e.textContent)!=null&&i.includes("visibility"))&&(n.type==="password"?(n.type="text",e.textContent="visibility_off"):(n.type="password",e.textContent="visibility"))}function zt(t){ot(t.currentTarget)}function jt(t){const e=t.target.closest(".field > label");e&&(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),Bt(t))}function Kt(){const t=document.body;t&&c(t,"click",jt)}function Nt(){const t=f(".field > input:not([type=file], [type=color], [type=range])");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R),T(t[e])}function Ut(){const t=f(".field > select");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R)}function Wt(){const t=f(".field > input[type=file]");for(let e=0;e<t.length;e++)c(t[e],"change",Ot),z(t[e])}function Yt(){const t=f(".field > input[type=color]");for(let e=0;e<t.length;e++)c(t[e],"change",Pt),j(t[e])}function Gt(){const t=f(".field > textarea");for(let e=0;e<t.length;e++)c(t[e],"focus",$),c(t[e],"blur",R),q(t[e]),!(E&&!et&&!nt)&&(c(t[e],"input",zt),ot(t[e]))}function Ht(){const t=f(".field:has(> input[type=password]) > i, a");for(let e=0;e<t.length;e++)c(t[e],"click",Rt)}function T(t){A(t,"number")&&!t.value&&(t.value=""),q(t)}function z(t,e){if((e==null?void 0:e.key)==="Enter"){const i=B(t);if(!A(i,"file"))return;i.click();return}const n=O(t);A(n,"text")&&(n.value=t.files?Array.from(t.files).map(i=>i.name).join(", "):"",n.readOnly=!0,c(n,"keydown",qt,!1),T(n))}function j(t,e){if((e==null?void 0:e.key)==="Enter"){const i=B(t);if(!A(i,"color"))return;i.click();return}const n=O(t);A(n,"text")&&(n.readOnly=!0,n.value=t.value,c(n,"keydown",$t,!1),T(n))}function ot(t){if(q(t),t.hasAttribute("rows"))return;const e=rt();t.style.blockSize="auto",t.style.blockSize=`${t.scrollHeight-e}px`}function Vt(){Kt(),Nt(),Ut(),Wt(),Yt(),Gt(),Ht()}function V(t){const e=t.target;!h(e,"input")&&!h(e,"select")||(e.type==="range"?(e.focus(),ct(e)):at())}function Zt(t){if(!window.matchMedia("(pointer: coarse)").matches)return;t.target.blur()}function at(){const t=document.body,e=f(".slider > input[type=range]");e.length?x(t,"input",V,!1):F(t,"input",V,!1);for(let n=0;n<e.length;n++)ct(e[n])}function ct(t){c(t,"change",Zt);const e=w(t),n=v("span",e),i=f("input",e);if(!i.length||!n)return;const o=rt(),u=s(e,"max")?0:.25*o*100/i[0].offsetWidth,r=[],l=[];for(let m=0,Tt=i.length;m<Tt;m++){const U=parseFloat(i[m].min)||0,Ct=parseFloat(i[m].max)||100,W=parseFloat(i[m].value)||0,Y=(W-U)*100/(Ct-U),Et=u/2-u*Y/100;r.push(Y+Et),l.push(W)}let p=r[0],d=0,N=100-d-p,S=l[0],M=l[1]||0;i.length>1&&(p=Math.abs(r[1]-r[0]),d=r[1]>r[0]?r[0]:r[1],N=100-d-p,M>S&&(S=l[1]||0,M=l[0])),requestAnimationFrame(()=>{e.style.cssText=`--_start: ${d}%; --_end: ${N}%; --_value1: '${S}'; --_value2: '${M}';`})}function Xt(){at()}const Z={red:"#F44336",pink:"#E91E63",purple:"#9C27B0","deep-purple":"#673AB7",blue:"#2196F3","light-blue":"#03A9F4",cyan:"#00BCD4",green:"#4CAF50","light-green":"#8BC34A",lime:"#CDDC39",yellow:"#FFEB3B",amber:"#FFC107",orange:"#FF9800","deep-orange":"#FF5722",brown:"#795548","blue-grey":"#607D8B",stackific:"#1447E6","hello-pumpkin":"#FF8F00","sea-lettuce":"#63A002",olive:"#7C7C67",nord:"#5E81AC","vega-violet":"#AD46FF","wild-strawberry":"#F6339A","heliotrope-magenta":"#E12AFB","voodoo-violet":"#804792","red-orchid":"#C0001C","green-brown":"#6E5D00",shakshuka:"#AB350F","purple-honeycreeper":"#8E51FF",maldives:"#00B8DB",verditer:"#00BBA7",fennel:"#00BC7D",gold:"#EFB100",burtuqali:"#FF6900"},ut=["stackific","hello-pumpkin","sea-lettuce","olive","nord","vega-violet","wild-strawberry","heliotrope-magenta","voodoo-violet","red-orchid","green-brown","shakshuka","purple-honeycreeper","maldives","verditer","fennel","gold","burtuqali"],a={light:"",dark:""},st="md3:mode",lt="md3:theme";function Qt(){return ut.slice()}function Jt(){var t;try{return((t=globalThis.localStorage)==null?void 0:t.getItem(lt))||null}catch{return null}}function te(t){var e;try{(e=globalThis.localStorage)==null||e.setItem(lt,t)}catch{}}function b(){return document==null?void 0:document.documentElement}function ft(){var t;try{return((t=globalThis.localStorage)==null?void 0:t.getItem(st))||null}catch{return null}}function ee(t){var e;try{(e=globalThis.localStorage)==null||e.setItem(st,t)}catch{}}function X(){var e,n;const t=(n=(e=b())==null?void 0:e.dataset)==null?void 0:n.mode;return t==="auto"||t==="light"||t==="dark"?t:ft()||"auto"}function _(){var e,n;const t=(n=(e=b())==null?void 0:e.dataset)==null?void 0:n.mode;return t==="light"||t==="dark"?t:Ft()?"dark":"light"}function ne(){if(a.light&&a.dark)return a;const t=b();if(!t)return a;const e=t.dataset.mode,n=i=>{t.dataset.mode=i;const o=getComputedStyle(t),u=["--primary","--on-primary","--primary-container","--on-primary-container","--secondary","--on-secondary","--secondary-container","--on-secondary-container","--tertiary","--on-tertiary","--tertiary-container","--on-tertiary-container","--error","--on-error","--error-container","--on-error-container","--background","--on-background","--surface","--on-surface","--surface-variant","--on-surface-variant","--outline","--outline-variant","--shadow","--scrim","--inverse-surface","--inverse-on-surface","--inverse-primary","--surface-dim","--surface-bright","--surface-container-lowest","--surface-container-low","--surface-container","--surface-container-high","--surface-container-highest"];let r="";for(let l=0,p=u.length;l<p;l++)r+=u[l]+":"+o.getPropertyValue(u[l])+";";return r};try{a.light=n("light"),a.dark=n("dark")}finally{e===void 0?delete t.dataset.mode:t.dataset.mode=e}return a}async function dt(t){const e=b();if(!t)return ne();if(t.light&&t.dark)return a.light=t.light,a.dark=t.dark,e.setAttribute("style",t[_()]),t;if(typeof t=="string"&&ut.includes(t))return te(t),e.dataset.theme=t,e.removeAttribute("style"),a.light="",a.dark="",{light:"",dark:""};typeof t=="string"&&Z[t]&&(t=Z[t]);const n=globalThis.materialDynamicColors;if(typeof n!="function")throw new Error('ui("theme", source) requires material-dynamic-colors. Install it and `import "material-dynamic-colors"` once at app entry, or include the CDN script.');return n(t).then(i=>{const o=u=>{let r="";for(const l of Object.keys(u)){const p=u[l],d=l.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g,"$1-$2").toLowerCase();r+="--"+d+":"+p+";"}return r};return a.light=o(i.light),a.dark=o(i.dark),e.setAttribute("style",a[_()]),a})}function pt(t){const e=b();return e?(t&&(t!=="auto"&&t!=="light"&&t!=="dark"&&(t="auto"),ee(t),e.dataset.mode=t,a.light&&a.dark&&e.setAttribute("style",a[_()])),X()):t}let Q=!1;function ie(){if(Q||typeof globalThis.matchMedia!="function")return;const t=globalThis.matchMedia("(prefers-color-scheme: dark)"),e=()=>{const n=b();!n||n.dataset.mode!=="auto"||!a.light||!a.dark||n.setAttribute("style",a[t.matches?"dark":"light"])};t.addEventListener?t.addEventListener("change",e):t.addListener&&t.addListener(e),Q=!0}const C=[];function gt(t){if(t.key==="Escape"){const e=t.currentTarget;yt(e,e)}}function re(t){(v("[autofocus]",t)??t).focus()}function ht(t,e){g(Lt(t.id),"active"),g(t,"active"),g(e,"active"),t.close(),C.pop();const n=C[C.length-1];n&&n.focus()}async function oe(t,e,n,i){!h(i,"button")&&!s(i,"button")&&!s(i,"chip")&&y(i,"active"),y(e,"active"),y(t,"active"),n?t.showModal():t.show(),await it(90),n||x(t,"keydown",gt,!1),C.push(t),re(t)}function ae(t){const e=t.currentTarget,n=O(e);h(n,"dialog")&&ht(n,e)}async function yt(t,e){P();let n=B(e);const i=s(e,"active")||e.open,o=s(e,"modal");o||F(e,"keydown",gt,!1),s(n,"overlay")||(n=Dt({class:"overlay"}),Mt(n,e),await it(90)),o||c(n,"click",ae,!1),i?ht(e,n):oe(e,n,o,t)}let D;function vt(t){F(document.body,"click",vt);const e=t.target,n=f("menu.active");for(let i=0;i<n.length;i++)bt(e,n[i],t)}function ce(t){setTimeout(()=>{const e=v(".field > input",t);e?e.focus():t.focus()},90)}function bt(t,e,n){D&&clearTimeout(D),D=setTimeout(()=>{x(document.body,"click",vt),h(document.activeElement,"input")||P();const i=s(e,"active"),o=(n==null?void 0:n.target)===t,u=!!t.closest("menu");if(!i&&u||i&&o){g(e,"active");return}g(f("menu.active"),"active"),y(e,"active"),ce(e)},90)}let k;function ue(t){const e=t.currentTarget;g(e,"active"),k&&clearTimeout(k)}function se(t,e){P();const n=f(".snackbar.active");for(let i=0;i<n.length;i++)g(n[i],"active");y(t,"active"),c(t,"click",ue),k&&clearTimeout(k),e!==-1&&(k=setTimeout(()=>{g(t,"active")},e??6e3))}function le(t){const e=w(t);e&&g(f(":scope > .page",e),"active"),y(t,"active")}function mt(t){const e=t instanceof MouseEvent,n=t.currentTarget,i=n.getBoundingClientRect(),o=Math.max(i.width,i.height),u=o/2,r=e?t.clientX-i.left-u:i.width/2-u,l=e?t.clientY-i.top-u:i.height/2-u,p=document.createElement("div");p.className="ripple-js";const d=document.createElement("div");d.style.inlineSize=d.style.blockSize=`${o}px`,d.style.left=`${r}px`,d.style.top=`${l}px`,c(d,"animationend",()=>{p.remove()}),p.appendChild(d),n.appendChild(p)}function fe(t){const e=t.target.closest(".slow-ripple, .ripple, .fast-ripple");e&&(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),mt(t))}function de(t){const e=t.target.closest(".slow-ripple, .ripple, .fast-ripple");!e||t.key!==" "||(Object.defineProperty(t,"currentTarget",{value:e,configurable:!0}),mt(t))}function pe(){const t=document.body;t&&(c(t,"mousedown",fe),c(t,"keydown",de))}function J(t){const e=t.target;h(e,"progress")?kt(e):At()}function kt(t){requestAnimationFrame(()=>{if(!t.hasAttribute("value")&&!t.hasAttribute("max")){const e=s(t,"circle")?"50":"100";t.style.setProperty("--_value",e),t.setAttribute("value",e),t.setAttribute("max","100"),t.classList.add("indeterminate")}else t.style.setProperty("--_value",String(t.value))})}function At(){if(E&&!et&&!nt)return;const t=document.body,e=f("progress");e.length?x(t,"input",J,!1):F(t,"input",J,!1);for(let n=0;n<e.length;n++)kt(e[n])}let L,I=null;function tt(){L&&clearTimeout(L),L=setTimeout(()=>wt(),180)}async function K(t,e,n,i){if(!e&&(e=v(t.getAttribute("data-ui")),!e)){t.classList.toggle("active");return}if(_t(t),h(e,"dialog")){requestAnimationFrame(()=>yt(t,e));return}if(h(e,"menu")){requestAnimationFrame(()=>bt(t,e,i));return}if(s(e,"snackbar")){requestAnimationFrame(()=>se(e,n));return}if(s(e,"page")){requestAnimationFrame(()=>le(e));return}if(s(e,"active")){g(t,"active"),g(e,"active");return}y(e,"active")}function xt(){globalThis.ui||I||!globalThis.MutationObserver||(I=new MutationObserver(tt),I.observe(document.body,{childList:!0,subtree:!0}),tt())}function ge(t){const e=t.target.closest("[data-ui]");e&&K(e,null,null,t)}function he(t){const e=t.target.closest("[data-ui]");e&&h(e,"a")&&!e.getAttribute("href")&&t.key==="Enter"&&K(e,null,null,t)}function ye(){const t=document.body;t&&(c(t,"click",ge),c(t,"keydown",he))}function wt(t,e){if(t){if(t==="setup"){xt();return}if(t==="guid")return St();if(t==="mode")return pt(e);if(t==="theme")return dt(e);if(t==="themes")return Qt();const n=v(t);if(!n)return;K(n,n,e)}ye(),Vt(),pe(),Xt(),At()}function ve(){var e;if(globalThis.ui)return;const t=(e=globalThis.document)==null?void 0:e.documentElement;if(t){pt(ft()||t.dataset.mode||"auto");const n=Jt();n&&dt(n)}ie(),xt(),globalThis.ui=wt}ve();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stackific/md3",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "Material Design 3 framework — SCSS + plain-JS. M3 tokens, palette utilities, dialogs, menus, sliders, snackbars; optional runtime theme generation when the consumer brings material-dynamic-colors.",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
@@ -29,12 +29,10 @@
29
29
  ".": "./dist/md3.js",
30
30
  "./style": "./dist/md3.css",
31
31
  "./assets/*": "./dist/assets/*",
32
- "./src/*": "./src/*",
33
32
  "./package.json": "./package.json"
34
33
  },
35
34
  "files": [
36
35
  "dist",
37
- "src",
38
36
  "NOTICE",
39
37
  "THIRD-PARTY-NOTICES"
40
38
  ],
package/src/main.js DELETED
@@ -1,5 +0,0 @@
1
- // Library entry. Pulls the SCSS bundle (Vite emits md3.css) and boots the
2
- // vanilla-JS runtime, exposing window.ui for inline data-ui handlers.
3
-
4
- import "./styles/md3.scss";
5
- import "./runtime/md3.js";
@@ -1,72 +0,0 @@
1
- import {
2
- addClass, next, prev, hasTag, insertBefore, wait, create,
3
- hasClass, removeClass, on, off, queryAllDataUi, blurActiveElement, query, onWeak,
4
- } from "../utils.js";
5
-
6
- const _dialogs = [];
7
-
8
- function onKeydownDialog(e) {
9
- if (e.key === "Escape") {
10
- const dialog = e.currentTarget;
11
- void updateDialog(dialog, dialog);
12
- }
13
- }
14
-
15
- function focusOnDialogOrElement(dialog) {
16
- const element = query("[autofocus]", dialog) ?? dialog;
17
- element.focus();
18
- }
19
-
20
- function closeDialog(dialog, overlay) {
21
- removeClass(queryAllDataUi(dialog.id), "active");
22
- removeClass(dialog, "active");
23
- removeClass(overlay, "active");
24
-
25
- dialog.close();
26
- _dialogs.pop();
27
-
28
- const previousDialog = _dialogs[_dialogs.length - 1];
29
- if (previousDialog) previousDialog.focus();
30
- }
31
-
32
- async function openDialog(dialog, overlay, isModal, from) {
33
- if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip")) addClass(from, "active");
34
- addClass(overlay, "active");
35
- addClass(dialog, "active");
36
-
37
- if (isModal) dialog.showModal();
38
- else dialog.show();
39
-
40
- await wait(90);
41
-
42
- if (!isModal) on(dialog, "keydown", onKeydownDialog, false);
43
- _dialogs.push(dialog);
44
- focusOnDialogOrElement(dialog);
45
- }
46
-
47
- function onClickOverlay(e) {
48
- const overlay = e.currentTarget;
49
- const dialog = next(overlay);
50
- if (hasTag(dialog, "dialog")) closeDialog(dialog, overlay);
51
- }
52
-
53
- export async function updateDialog(from, dialog) {
54
- blurActiveElement();
55
-
56
- let overlay = prev(dialog);
57
- const isActive = hasClass(dialog, "active") || dialog.open;
58
- const isModal = hasClass(dialog, "modal");
59
-
60
- if (!isModal) off(dialog, "keydown", onKeydownDialog, false);
61
-
62
- if (!hasClass(overlay, "overlay")) {
63
- overlay = create({ class: "overlay" });
64
- insertBefore(overlay, dialog);
65
- await wait(90);
66
- }
67
-
68
- if (!isModal) onWeak(overlay, "click", onClickOverlay, false);
69
-
70
- if (isActive) closeDialog(dialog, overlay);
71
- else void openDialog(dialog, overlay, isModal, from);
72
- }
@@ -1,181 +0,0 @@
1
- import {
2
- query, next, prev, hasType, parent, queryAll, onWeak,
3
- isChrome, isMac, isIOS, rootSizeInPixels,
4
- } from "../utils.js";
5
-
6
- function updatePlaceholder(element) {
7
- if (!element.placeholder) element.placeholder = " ";
8
- }
9
-
10
- function onClickLabel(e) {
11
- const label = e.currentTarget;
12
- const field = parent(label);
13
- const input = query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea", field);
14
- if (input) input.focus();
15
- }
16
-
17
- function onFocusInput(e) {
18
- updateInput(e.currentTarget);
19
- }
20
-
21
- function onBlurInput(e) {
22
- updateInput(e.currentTarget);
23
- }
24
-
25
- function onChangeFile(e) {
26
- updateFile(e.currentTarget);
27
- }
28
-
29
- function onChangeColor(e) {
30
- updateColor(e.currentTarget);
31
- }
32
-
33
- function onKeydownFile(e) {
34
- updateFile(e.currentTarget, e);
35
- }
36
-
37
- function onKeydownColor(e) {
38
- updateColor(e.currentTarget, e);
39
- }
40
-
41
- function onPasswordIconClick(e) {
42
- const icon = e.currentTarget;
43
- const input = query("input", parent(icon));
44
- if (input && icon.textContent?.includes("visibility")) {
45
- if (input.type === "password") {
46
- input.type = "text";
47
- icon.textContent = "visibility_off";
48
- } else {
49
- input.type = "password";
50
- icon.textContent = "visibility";
51
- }
52
- }
53
- }
54
-
55
- function onInputTextarea(e) {
56
- updateTextarea(e.currentTarget);
57
- }
58
-
59
- function onClickLabelDelegation(e) {
60
- const from = e.target.closest(".field > label");
61
- if (!from) return;
62
-
63
- Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
64
- onClickLabel(e);
65
- }
66
-
67
- function updateAllLabels() {
68
- const body = document.body;
69
- if (!body) return;
70
-
71
- onWeak(body, "click", onClickLabelDelegation);
72
- }
73
-
74
- function updateAllInputs() {
75
- const inputs = queryAll(".field > input:not([type=file], [type=color], [type=range])");
76
- for (let i = 0; i < inputs.length; i++) {
77
- onWeak(inputs[i], "focus", onFocusInput);
78
- onWeak(inputs[i], "blur", onBlurInput);
79
- updateInput(inputs[i]);
80
- }
81
- }
82
-
83
- function updateAllSelects() {
84
- const selects = queryAll(".field > select");
85
- for (let i = 0; i < selects.length; i++) {
86
- onWeak(selects[i], "focus", onFocusInput);
87
- onWeak(selects[i], "blur", onBlurInput);
88
- }
89
- }
90
-
91
- function updateAllFiles() {
92
- const files = queryAll(".field > input[type=file]");
93
- for (let i = 0; i < files.length; i++) {
94
- onWeak(files[i], "change", onChangeFile);
95
- updateFile(files[i]);
96
- }
97
- }
98
-
99
- function updateAllColors() {
100
- const colors = queryAll(".field > input[type=color]");
101
- for (let i = 0; i < colors.length; i++) {
102
- onWeak(colors[i], "change", onChangeColor);
103
- updateColor(colors[i]);
104
- }
105
- }
106
-
107
- function updateAllTextareas() {
108
- const textareas = queryAll(".field > textarea");
109
- for (let i = 0; i < textareas.length; i++) {
110
- onWeak(textareas[i], "focus", onFocusInput);
111
- onWeak(textareas[i], "blur", onBlurInput);
112
- updatePlaceholder(textareas[i]);
113
-
114
- if (isChrome && !isMac && !isIOS) continue;
115
-
116
- onWeak(textareas[i], "input", onInputTextarea);
117
- updateTextarea(textareas[i]);
118
- }
119
- }
120
-
121
- function updateAllPasswordIcons() {
122
- const icons = queryAll(".field:has(> input[type=password]) > i, a");
123
- for (let i = 0; i < icons.length; i++) onWeak(icons[i], "click", onPasswordIconClick);
124
- }
125
-
126
- function updateInput(input) {
127
- if (hasType(input, "number") && !input.value) input.value = "";
128
- updatePlaceholder(input);
129
- }
130
-
131
- function updateFile(input, e) {
132
- if (e?.key === "Enter") {
133
- const previousInput = prev(input);
134
- if (!hasType(previousInput, "file")) return;
135
- previousInput.click();
136
- return;
137
- }
138
-
139
- const nextInput = next(input);
140
- if (!hasType(nextInput, "text")) return;
141
- nextInput.value = input.files ? Array.from(input.files).map((x) => x.name).join(", ") : "";
142
- nextInput.readOnly = true;
143
- onWeak(nextInput, "keydown", onKeydownFile, false);
144
- updateInput(nextInput);
145
- }
146
-
147
- function updateColor(input, e) {
148
- if (e?.key === "Enter") {
149
- const previousInput = prev(input);
150
- if (!hasType(previousInput, "color")) return;
151
- previousInput.click();
152
- return;
153
- }
154
-
155
- const nextInput = next(input);
156
- if (!hasType(nextInput, "text")) return;
157
- nextInput.readOnly = true;
158
- nextInput.value = input.value;
159
- onWeak(nextInput, "keydown", onKeydownColor, false);
160
- updateInput(nextInput);
161
- }
162
-
163
- function updateTextarea(textarea) {
164
- updatePlaceholder(textarea);
165
-
166
- if (textarea.hasAttribute("rows")) return;
167
-
168
- const rootSize = rootSizeInPixels();
169
- textarea.style.blockSize = "auto";
170
- textarea.style.blockSize = `${textarea.scrollHeight - rootSize}px`;
171
- }
172
-
173
- export function updateAllFields() {
174
- updateAllLabels();
175
- updateAllInputs();
176
- updateAllSelects();
177
- updateAllFiles();
178
- updateAllColors();
179
- updateAllTextareas();
180
- updateAllPasswordIcons();
181
- }
@@ -1,42 +0,0 @@
1
- import {
2
- query, queryAll, addClass, on, off, hasTag, hasClass, removeClass, blurActiveElement,
3
- } from "../utils.js";
4
-
5
- let _timeoutMenu;
6
-
7
- function onClickDocument(e) {
8
- off(document.body, "click", onClickDocument);
9
- const body = e.target;
10
- const menus = queryAll("menu.active");
11
- for (let i = 0; i < menus.length; i++) updateMenu(body, menus[i], e);
12
- }
13
-
14
- function focusOnMenuOrInput(menu) {
15
- setTimeout(() => {
16
- const input = query(".field > input", menu);
17
- if (input) input.focus();
18
- else menu.focus();
19
- }, 90);
20
- }
21
-
22
- export function updateMenu(from, menu, e) {
23
- if (_timeoutMenu) clearTimeout(_timeoutMenu);
24
-
25
- _timeoutMenu = setTimeout(() => {
26
- on(document.body, "click", onClickDocument);
27
- if (!hasTag(document.activeElement, "input")) blurActiveElement();
28
-
29
- const isActive = hasClass(menu, "active");
30
- const isEvent = e?.target === from;
31
- const isChild = !!from.closest("menu");
32
-
33
- if ((!isActive && isChild) || (isActive && isEvent)) {
34
- removeClass(menu, "active");
35
- return;
36
- }
37
-
38
- removeClass(queryAll("menu.active"), "active");
39
- addClass(menu, "active");
40
- focusOnMenuOrInput(menu);
41
- }, 90);
42
- }
@@ -1,7 +0,0 @@
1
- import { addClass, parent, removeClass, queryAll } from "../utils.js";
2
-
3
- export function updatePage(page) {
4
- const container = parent(page);
5
- if (container) removeClass(queryAll(":scope > .page", container), "active");
6
- addClass(page, "active");
7
- }
@@ -1,35 +0,0 @@
1
- import { queryAll, hasTag, off, on, isMac, isIOS, isChrome, hasClass } from "../utils.js";
2
-
3
- function onInputDocument(e) {
4
- const progress = e.target;
5
-
6
- if (hasTag(progress, "progress")) {
7
- updateProgress(progress);
8
- } else {
9
- updateAllProgress();
10
- }
11
- }
12
-
13
- function updateProgress(progress) {
14
- requestAnimationFrame(() => {
15
- if (!progress.hasAttribute("value") && !progress.hasAttribute("max")) {
16
- const value = hasClass(progress, "circle") ? "50" : "100";
17
- progress.style.setProperty("--_value", value);
18
- progress.setAttribute("value", value);
19
- progress.setAttribute("max", "100");
20
- progress.classList.add("indeterminate");
21
- } else {
22
- progress.style.setProperty("--_value", String(progress.value));
23
- }
24
- });
25
- }
26
-
27
- export function updateAllProgress() {
28
- if (isChrome && !isMac && !isIOS) return;
29
-
30
- const body = document.body;
31
- const progresses = queryAll("progress");
32
- if (!progresses.length) off(body, "input", onInputDocument, false);
33
- else on(body, "input", onInputDocument, false);
34
- for (let i = 0; i < progresses.length; i++) updateProgress(progresses[i]);
35
- }
@@ -1,78 +0,0 @@
1
- import {
2
- query, queryAll, hasClass, on, off, parent, hasTag, onWeak, rootSizeInPixels,
3
- } from "../utils.js";
4
-
5
- function onInputDocument(e) {
6
- const input = e.target;
7
- if (!hasTag(input, "input") && !hasTag(input, "select")) return;
8
-
9
- if (input.type === "range") {
10
- input.focus();
11
- updateRange(input);
12
- } else {
13
- updateAllRanges();
14
- }
15
- }
16
-
17
- function onChangeInput(e) {
18
- const isCoarse = window.matchMedia("(pointer: coarse)").matches;
19
- if (!isCoarse) return;
20
-
21
- const input = e.target;
22
- input.blur();
23
- }
24
-
25
- function updateAllRanges() {
26
- const body = document.body;
27
- const ranges = queryAll(".slider > input[type=range]");
28
- if (!ranges.length) off(body, "input", onInputDocument, false);
29
- else on(body, "input", onInputDocument, false);
30
- for (let i = 0; i < ranges.length; i++) updateRange(ranges[i]);
31
- }
32
-
33
- function updateRange(input) {
34
- onWeak(input, "change", onChangeInput);
35
-
36
- const label = parent(input);
37
- const bar = query("span", label);
38
- const inputs = queryAll("input", label);
39
- if (!inputs.length || !bar) return;
40
-
41
- const rootSize = rootSizeInPixels();
42
- const thumb = hasClass(label, "max") ? 0 : (0.25 * rootSize * 100) / inputs[0].offsetWidth;
43
- const percents = [];
44
- const values = [];
45
- for (let i = 0, n = inputs.length; i < n; i++) {
46
- const min = parseFloat(inputs[i].min) || 0;
47
- const max = parseFloat(inputs[i].max) || 100;
48
- const value = parseFloat(inputs[i].value) || 0;
49
- const percent = ((value - min) * 100) / (max - min);
50
- const fix = thumb / 2 - (thumb * percent) / 100;
51
- percents.push(percent + fix);
52
- values.push(value);
53
- }
54
-
55
- let percent = percents[0];
56
- let start = 0;
57
- let end = 100 - start - percent;
58
- let value1 = values[0];
59
- let value2 = values[1] || 0;
60
- if (inputs.length > 1) {
61
- percent = Math.abs(percents[1] - percents[0]);
62
- start = percents[1] > percents[0] ? percents[0] : percents[1];
63
- end = 100 - start - percent;
64
-
65
- if (value2 > value1) {
66
- value1 = values[1] || 0;
67
- value2 = values[0];
68
- }
69
- }
70
-
71
- requestAnimationFrame(() => {
72
- label.style.cssText = `--_start: ${start}%; --_end: ${end}%; --_value1: '${value1}'; --_value2: '${value2}';`;
73
- });
74
- }
75
-
76
- export function updateAllSliders() {
77
- updateAllRanges();
78
- }
@@ -1,27 +0,0 @@
1
- import { queryAll, addClass, removeClass, blurActiveElement, onWeak } from "../utils.js";
2
-
3
- let _timeoutSnackbar;
4
-
5
- function onClickSnackbar(e) {
6
- const snackbar = e.currentTarget;
7
- removeClass(snackbar, "active");
8
-
9
- if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
10
- }
11
-
12
- export function updateSnackbar(snackbar, milliseconds) {
13
- blurActiveElement();
14
-
15
- const activeSnackbars = queryAll(".snackbar.active");
16
- for (let i = 0; i < activeSnackbars.length; i++) removeClass(activeSnackbars[i], "active");
17
- addClass(snackbar, "active");
18
- onWeak(snackbar, "click", onClickSnackbar);
19
-
20
- if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
21
-
22
- if (milliseconds === -1) return;
23
-
24
- _timeoutSnackbar = setTimeout(() => {
25
- removeClass(snackbar, "active");
26
- }, milliseconds ?? 6000);
27
- }
@@ -1,46 +0,0 @@
1
- import { onWeak } from "../utils.js";
2
-
3
- function updateRipple(e) {
4
- const isMouseEvent = e instanceof MouseEvent;
5
- const element = e.currentTarget;
6
- const rect = element.getBoundingClientRect();
7
- const diameter = Math.max(rect.width, rect.height);
8
- const radius = diameter / 2;
9
- const x = isMouseEvent ? e.clientX - rect.left - radius : (rect.width / 2) - radius;
10
- const y = isMouseEvent ? e.clientY - rect.top - radius : (rect.height / 2) - radius;
11
- const rippleContainer = document.createElement("div");
12
- rippleContainer.className = "ripple-js";
13
-
14
- const ripple = document.createElement("div");
15
- ripple.style.inlineSize = ripple.style.blockSize = `${diameter}px`;
16
- ripple.style.left = `${x}px`;
17
- ripple.style.top = `${y}px`;
18
- onWeak(ripple, "animationend", () => { rippleContainer.remove(); });
19
-
20
- rippleContainer.appendChild(ripple);
21
- element.appendChild(rippleContainer);
22
- }
23
-
24
- function onMousedownRippleDelegation(e) {
25
- const from = e.target.closest(".slow-ripple, .ripple, .fast-ripple");
26
- if (!from) return;
27
-
28
- Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
29
- updateRipple(e);
30
- }
31
-
32
- function onKeydownRippleDelegation(e) {
33
- const from = e.target.closest(".slow-ripple, .ripple, .fast-ripple");
34
- if (!from || e.key !== " ") return;
35
-
36
- Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
37
- updateRipple(e);
38
- }
39
-
40
- export function updateAllRipples() {
41
- const body = document.body;
42
- if (!body) return;
43
-
44
- onWeak(body, "mousedown", onMousedownRippleDelegation);
45
- onWeak(body, "keydown", onKeydownRippleDelegation);
46
- }