beercss 3.12.13 → 3.13.1

package/src/cdn/elements/sliders.css

@@ -351,4 +351,8 @@
   .slider > :hover ~ .tooltip.bottom {
     inset-block: auto -1rem !important;
   }
+  
+  body:has(input[type=range]:focus) {
+    overflow: hidden;
+  }
 }

package/src/cdn/elements/sliders.ts

@@ -1,4 +1,4 @@
-import { query, queryAll, hasClass, on, off, parent, hasTag, isTouchable } from "../utils";
+import { query, queryAll, hasClass, on, off, parent, hasTag, onWeak, rootSizeInPixels } from "../utils";
 
 function onInputDocument(e: Event) {
   const input = e.target as HTMLInputElement;
@@ -12,20 +12,9 @@ function onInputDocument(e: Event) {
   }
 }
 
-function onFocusRange(e: Event) {
-  if (!isTouchable()) return;
-
+function onChangeInput(e: Event) {
   const input = e.target as HTMLInputElement;
-  const label = parent(input) as HTMLLabelElement;
-  if (hasClass(label, "vertical")) document.body.classList.add("no-scroll");
-}
-
-function onBlurRange(e: Event) {
-  if (!isTouchable()) return;
-
-  const input = e.target as HTMLInputElement;
-  const label = parent(input) as HTMLLabelElement;
-  if (hasClass(label, "vertical")) document.body.classList.remove("no-scroll");
+  requestAnimationFrame(() => input.blur());
 }
 
 function updateAllRanges() {
@@ -33,19 +22,11 @@ function updateAllRanges() {
   const ranges = queryAll(".slider > input[type=range]") as NodeListOf<HTMLInputElement>;
   if (!ranges.length) off(body, "input", onInputDocument, false);
   else on(body, "input", onInputDocument, false);
-  for(let i=0; i<ranges.length; i++) updateRange(ranges[i]);
+  for (let i = 0; i < ranges.length; i++) updateRange(ranges[i]);
 }
 
-function rootSizeInPixels(): number {
-  const size = getComputedStyle(document.documentElement).getPropertyValue("--size") || "16px";
-  if (size.includes("%")) return (parseInt(size) * 16) / 100;
-  if (size.includes("em")) return parseInt(size) * 16;
-  return parseInt(size);
-} 
-
 function updateRange(input: HTMLInputElement) {
-  on(input, "focus", onFocusRange);
-  on(input, "blur", onBlurRange);
+  onWeak(input, "change", onChangeInput);
 
   const label = parent(input) as HTMLElement;
   const bar = query("span", label) as HTMLElement;
@@ -53,15 +34,15 @@ function updateRange(input: HTMLInputElement) {
   if (!inputs.length || !bar) return;
 
   const rootSize = rootSizeInPixels();
-  const thumb = hasClass(label, "max") ? 0 : 0.25 * rootSize * 100 / inputs[0].offsetWidth;
+  const thumb = hasClass(label, "max") ? 0 : (0.25 * rootSize * 100) / inputs[0].offsetWidth;
   const percents: Array<number> = [];
   const values: Array<number> = [];
   for (let i = 0, n = inputs.length; i < n; i++) {
     const min = parseFloat(inputs[i].min) || 0;
     const max = parseFloat(inputs[i].max) || 100;
     const value = parseFloat(inputs[i].value) || 0;
-    const percent = (value - min) * 100 / (max - min);
-    const fix = thumb / 2 - thumb * percent / 100;
+    const percent = ((value - min) * 100) / (max - min);
+    const fix = thumb / 2 - (thumb * percent) / 100;
     percents.push(percent + fix);
     values.push(value);
   }
@@ -90,4 +71,4 @@ function updateRange(input: HTMLInputElement) {
 
 export function updateAllSliders() {
   updateAllRanges();
-}
+}

package/src/cdn/elements/snackbars.ts

@@ -1,4 +1,4 @@
-import { queryAll, addClass, on, removeClass, blurActiveElement } from "../utils";
+import { queryAll, addClass, removeClass, blurActiveElement, onWeak } from "../utils";
 
 let _timeoutSnackbar: ReturnType<typeof setTimeout>;
 
@@ -15,7 +15,7 @@ export function updateSnackbar(snackbar: Element, milliseconds?: number) {
   const activeSnackbars = queryAll(".snackbar.active");
   for(let i=0; i<activeSnackbars.length; i++) removeClass(activeSnackbars[i], "active");
   addClass(snackbar, "active");
-  on(snackbar, "click", onClickSnackbar);
+  onWeak(snackbar, "click", onClickSnackbar);
 
   if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
 

package/src/cdn/helpers/ripples.ts

@@ -1,4 +1,4 @@
-import { queryAll, on } from "../utils";
+import { queryAll, onWeak } from "../utils";
 
 function onPointerDownRipple(e: PointerEvent) {
   updateRipple(e);
@@ -27,5 +27,5 @@ function updateRipple(e: PointerEvent) {
 
 export function updateAllRipples() {
   const ripples = queryAll(".slow-ripple, .ripple, .fast-ripple");
-  for(let i=0; i<ripples.length; i++) on(ripples[i], "pointerdown", onPointerDownRipple);
+  for(let i=0; i<ripples.length; i++) onWeak(ripples[i], "pointerdown", onPointerDownRipple);
 }

package/src/cdn/settings/fonts.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.13/dist/cdn/material-symbols-outlined.woff2) format("woff2");
+  src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.1/dist/cdn/material-symbols-outlined.woff2) format("woff2");
 }
 
 /* rounded icons */
@@ -13,7 +13,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.13/dist/cdn/material-symbols-rounded.woff2) format("woff2");
+  src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.1/dist/cdn/material-symbols-rounded.woff2) format("woff2");
 }
 
 /* sharp icons */
@@ -22,7 +22,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.13/dist/cdn/material-symbols-sharp.woff2) format("woff2");
+  src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.1/dist/cdn/material-symbols-sharp.woff2) format("woff2");
 }
 
 /* subset of only required icons */
@@ -31,5 +31,5 @@
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.13/dist/cdn/material-symbols-subset.woff2) format("woff2");
+  src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.1/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }

package/src/cdn/shapes/wavy-circle.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="480" height="480" fill="none">
+  <path fill="#D0BCFF" d="M295.84 18.168c4.163 3.594 7.898 7.636 11.723 11.582 8.982 9.199 15.965 13.623 29.054 14.21 3.442.04 6.879.016 10.32-.023 24.023-.106 46.223 8.762 63.445 25.426 15.466 15.648 25.276 37.002 25.662 59.176-.023 3.55-.086 7.096-.171 10.645-.133 10.66 1.763 19.84 9.074 27.985 2.227 2.22 4.504 4.374 6.803 6.518 7.48 7.24 13.335 14.117 18.25 23.313l1.723 3.156c9.935 19.724 11.982 44.682 5.664 65.89-5.617 16.737-14.542 29.311-27.137 41.517-8.844 8.627-13.592 15.6-14.21 28.21-.044 3.536-.014 7.067.022 10.602.1 24.28-8.555 46.572-25.425 64.007-15.648 15.466-37.002 25.276-59.176 25.662-3.55-.023-7.096-.086-10.645-.171-10.66-.133-19.84 1.763-27.985 9.074-2.22 2.227-4.374 4.504-6.519 6.803-7.238 7.48-14.116 13.335-23.312 18.25l-3.156 1.723c-19.724 9.935-44.682 11.982-65.89 5.664-16.738-5.617-29.31-14.543-41.517-27.137-8.982-9.199-15.965-13.623-29.054-14.21-3.442-.04-6.879-.016-10.32.022-24.023.107-46.223-8.761-63.445-25.425-15.466-15.648-25.276-37.002-25.662-59.176.023-3.55.086-7.096.171-10.645.133-10.66-1.763-19.84-9.074-27.985-2.227-2.22-4.504-4.374-6.803-6.519C20.77 299.075 14.915 292.197 10 283l-1.723-3.156c-9.935-19.724-11.982-44.682-5.664-65.89 5.617-16.737 14.542-29.311 27.137-41.517 8.844-8.627 13.592-15.6 14.21-28.21.044-3.536.014-7.067-.023-10.602-.098-24.28 8.556-46.572 25.426-64.007 15.648-15.466 37.002-25.276 59.176-25.662 3.55.023 7.096.086 10.645.171 10.66.133 19.84-1.763 27.985-9.074 2.22-2.227 4.374-4.504 6.518-6.803C180.928 20.77 187.804 14.915 197 10l3.156-1.723c30.418-15.321 69.005-11.063 95.684 9.891ZM196 50a153.61 153.61 0 0 0-2.875 3.5c-9.82 11.895-25.259 19.027-40.367 20.902-5.61.465-11.153.617-16.782.508-16.253-.278-30.131 4.27-42.66 14.828-10.325 10.081-17.964 24.122-18.388 38.735-.002 2.78.027 5.56.072 8.34.309 19.165-3.59 37.379-17.352 51.62a812.786 812.786 0 0 1-5.515 5.294c-11.667 11.161-20.677 23.997-21.371 40.68-.409 18.723 3.98 33.495 17.015 47.402a70.934 70.934 0 0 0 5.723 5.066c11.895 9.82 19.027 25.259 20.902 40.367.465 5.61.617 11.153.508 16.782-.278 16.253 4.27 30.131 14.828 42.66 10.081 10.325 24.122 17.964 38.735 18.388 2.78.002 5.56-.027 8.34-.072 19.165-.309 37.379 3.59 51.62 17.352 1.774 1.83 3.538 3.669 5.294 5.515 11.161 11.667 23.997 20.677 40.68 21.371 18.723.409 33.495-3.98 47.402-17.015a70.934 70.934 0 0 0 5.066-5.723c9.82-11.895 25.259-19.027 40.367-20.902 5.61-.465 11.153-.617 16.782-.508 16.253.278 30.131-4.27 42.66-14.828 10.325-10.081 17.964-24.122 18.388-38.735a487.11 487.11 0 0 0-.072-8.34c-.309-19.165 3.59-37.379 17.352-51.62 1.83-1.774 3.669-3.538 5.515-5.294 11.667-11.161 20.677-23.997 21.371-40.68.409-18.723-3.98-33.495-17.015-47.402a70.934 70.934 0 0 0-5.723-5.066c-11.895-9.82-19.027-25.259-20.902-40.367a163.923 163.923 0 0 1-.508-16.782c.278-16.253-4.27-30.131-14.828-42.66-10.081-10.325-24.122-17.964-38.735-18.388a487.11 487.11 0 0 0-8.34.072c-19.165.309-37.379-3.59-51.62-17.352a812.786 812.786 0 0 1-5.294-5.515c-11.161-11.667-23.997-20.677-40.68-21.371C225.65 30.327 210.23 35.567 196 50Z"/>
+  <animateTransform attributeName="transform" calcMode="linear" dur="8s" from="360" repeatCount="indefinite" to="0" type="rotate"/>
+</svg>

package/src/cdn/shapes/wavy.svg

@@ -1,23 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="610 1101 1220 75">
-<path fill="#D0BCFF" d="M1870.425,1173.746c-29.448,0-58.665-7.477-84.493-21.622c-0.03-0.016-0.061-0.032-0.09-0.049
-c-43.555-23.82-95.546-23.809-139.091,0.039c-0.037,0.021-0.075,0.042-0.113,0.062c-25.803,14.109-54.984,21.567-84.394,21.568
-c-29.449,0-58.667-7.478-84.495-21.623c-43.554-23.852-95.539-23.865-139.089-0.052c-0.03,0.018-0.062,0.034-0.092,0.051
-c-25.83,14.146-55.048,21.623-84.497,21.623c-29.423,0-58.613-7.463-84.425-21.584c-0.025-0.014-0.052-0.028-0.077-0.042
-c-43.572-23.863-95.596-23.862-139.164-0.001c-0.028,0.016-0.057,0.031-0.085,0.046c-25.809,14.117-55.001,21.581-84.418,21.581
-c-0.002,0,0,0-0.001,0c-29.45-0.001-58.669-7.479-84.498-21.625c-43.534-23.845-95.513-23.863-139.063-0.058
-c-0.036,0.021-0.072,0.04-0.108,0.06c-25.829,14.146-55.047,21.623-84.496,21.623c-29.398,0-58.566-7.451-84.362-21.551
-c-0.048-0.024-0.095-0.05-0.142-0.075c-43.568-23.863-95.593-23.863-139.163,0c-0.027,0.015-0.054,0.028-0.081,0.043
-c-25.811,14.12-55.001,21.583-84.421,21.583c-29.45,0-58.668-7.478-84.497-21.624c-7.521-4.118-10.278-13.554-6.159-21.074
-s13.554-10.277,21.074-6.158c43.57,23.862,95.593,23.864,139.163,0c0.033-0.018,0.065-0.035,0.098-0.053
-c25.807-14.114,54.991-21.573,84.406-21.573c29.398,0,58.567,7.451,84.364,21.55c0.047,0.025,0.093,0.051,0.14,0.076
-c43.534,23.843,95.508,23.864,139.056,0.059c0.038-0.021,0.075-0.042,0.113-0.063c25.828-14.145,55.049-21.622,84.496-21.622
-c0.002,0,0,0,0.002,0c29.449,0,58.668,7.478,84.497,21.625c43.57,23.863,95.595,23.862,139.165,0.001
-c0.021-0.013,0.043-0.024,0.065-0.036c25.813-14.124,55.011-21.591,84.438-21.591c29.42,0,58.61,7.463,84.421,21.582
-c0.027,0.015,0.055,0.03,0.082,0.045c43.539,23.847,95.521,23.862,139.074,0.049c0.032-0.018,0.064-0.035,0.096-0.053
-c25.829-14.146,55.047-21.623,84.496-21.623s58.667,7.477,84.496,21.623c43.58,23.867,95.604,23.866,139.172,0.005
-c0.039-0.021,0.079-0.043,0.118-0.064c25.803-14.108,54.98-21.564,84.389-21.564c29.448-0.001,58.666,7.476,84.494,21.62
-c0.038,0.021,0.076,0.042,0.114,0.063c43.549,23.807,95.528,23.791,139.063-0.051c7.52-4.121,16.955-1.361,21.073,6.159
-c4.119,7.521,1.361,16.955-6.159,21.073C1929.089,1166.27,1899.872,1173.746,1870.425,1173.746z">
-<animateTransform attributeName="transform" type="translate" from="0 0" to="312.5 0" dur="1s" calcMode="linear" repeatCount="indefinite" />
-</path>
-</svg>
+  <path fill="#D0BCFF" d="M1870.425 1173.746c-29.448 0-58.665-7.477-84.493-21.622-.03-.016-.061-.032-.09-.049-43.555-23.82-95.546-23.809-139.091.039a4.079 4.079 0 0 1-.113.062c-25.803 14.109-54.984 21.567-84.394 21.568-29.449 0-58.667-7.478-84.495-21.623-43.554-23.852-95.539-23.865-139.089-.052-.03.018-.062.034-.092.051-25.83 14.146-55.048 21.623-84.497 21.623-29.423 0-58.613-7.463-84.425-21.584l-.077-.042c-43.572-23.863-95.596-23.862-139.164-.001l-.085.046c-25.809 14.117-55.001 21.581-84.418 21.581h-.001c-29.45-.001-58.669-7.479-84.498-21.625-43.534-23.845-95.513-23.863-139.063-.058l-.108.06c-25.829 14.146-55.047 21.623-84.496 21.623-29.398 0-58.566-7.451-84.362-21.551-.048-.024-.095-.05-.142-.075-43.568-23.863-95.593-23.863-139.163 0l-.081.043c-25.811 14.12-55.001 21.583-84.421 21.583-29.45 0-58.668-7.478-84.497-21.624-7.521-4.118-10.278-13.554-6.159-21.074s13.554-10.277 21.074-6.158c43.57 23.862 95.593 23.864 139.163 0l.098-.053c25.807-14.114 54.991-21.573 84.406-21.573 29.398 0 58.567 7.451 84.364 21.55l.14.076c43.534 23.843 95.508 23.864 139.056.059l.113-.063c25.828-14.145 55.049-21.622 84.496-21.622h.002c29.449 0 58.668 7.478 84.497 21.625 43.57 23.863 95.595 23.862 139.165.001.021-.013.043-.024.065-.036 25.813-14.124 55.011-21.591 84.438-21.591 29.42 0 58.61 7.463 84.421 21.582l.082.045c43.539 23.847 95.521 23.862 139.074.049l.096-.053c25.829-14.146 55.047-21.623 84.496-21.623s58.667 7.477 84.496 21.623c43.58 23.867 95.604 23.866 139.172.005l.118-.064c25.803-14.108 54.98-21.564 84.389-21.564 29.448-.001 58.666 7.476 84.494 21.62l.114.063c43.549 23.807 95.528 23.791 139.063-.051 7.52-4.121 16.955-1.361 21.073 6.159 4.119 7.521 1.361 16.955-6.159 21.073-25.828 14.146-55.045 21.622-84.492 21.622z">
+    <animateTransform attributeName="transform" calcMode="linear" dur="1s" from="0 0" repeatCount="indefinite" to="312.5 0" type="translate"/>
+  </path>
+</svg>

package/src/cdn/utils.ts

@@ -1,4 +1,21 @@
 const _emptyNodeList = [] as unknown as NodeListOf<Element>;
+const _weakElements = new WeakSet<HTMLElement>();
+
+export const isChrome = navigator.userAgent.includes("Chrome");
+
+export const isFirefox = navigator.userAgent.includes("Firefox") && !isChrome;
+
+export const isSafari = navigator.userAgent.includes("Safari") && !isChrome;
+
+export const isWindows = navigator.userAgent.includes("Windows");
+
+export const isMac = navigator.userAgent.includes("Macintosh");
+
+export const isLinux = navigator.userAgent.includes("Linux");
+
+export const isAndroid = navigator.userAgent.includes("Android");
+
+export const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
 
 export function isTouchable(): boolean {
   return window?.matchMedia("(pointer: coarse)").matches;
@@ -66,6 +83,11 @@ export function on(element: Element | null, name: string, callback: any, useCapt
   if (element?.addEventListener) element.addEventListener(name, callback, useCapture);
 }
 
+export function onWeak(element: Element | null, name: string, callback: any, useCapture: boolean = true) {
+  addWeakElement(element as HTMLElement);
+  on(element, name, callback, useCapture);
+}
+
 export function off(element: Element | null, name: string, callback: any, useCapture: boolean = true) {
   if (element?.removeEventListener) element.removeEventListener(name, callback, useCapture);
 }
@@ -119,3 +141,14 @@ export function updateAllClickable(element: Element) {
   if (!hasTag(element, "button") && !hasClass(element, "button") && !hasClass(element, "chip")) addClass(element, "active");
 }
 
+export function addWeakElement(element: HTMLElement) {
+  if (_weakElements.has(element)) return;
+  _weakElements.add(element);
+}
+
+export function rootSizeInPixels(): number {
+  const size = getComputedStyle(document.documentElement).getPropertyValue("--size") || "16px";
+  if (size.includes("%")) return (parseInt(size) * 16) / 100;
+  if (size.includes("em")) return parseInt(size) * 16;
+  return parseInt(size);
+}