beercss 4.0.19 → 4.0.21

package/src/cdn/customElement.d.ts

@@ -0,0 +1,12 @@
+declare class BeerCssCustomElement extends HTMLElement {
+  static isCssLoaded: boolean;
+  static isJsLoaded: boolean;
+  
+  constructor();
+  
+  addJs(): Promise<void | any>;
+  addCss(): Promise<void>;
+  run(): Promise<void>;
+}
+
+export default BeerCssCustomElement;

package/src/cdn/customElement.js

@@ -12,7 +12,7 @@ class BeerCssCustomElement extends HTMLElement {
     BeerCssCustomElement.isJsLoaded = true;
 
     if (window.ui) return;
-    return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/beer.min.js");
+    return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.21/dist/cdn/beer.min.js");
   }
   
   async addCss() {
@@ -23,7 +23,7 @@ class BeerCssCustomElement extends HTMLElement {
 
     const head = document.querySelector("head");
     const element = document.createElement("link");
-    element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/beer.scoped.min.css");
+    element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.21/dist/cdn/beer.scoped.min.css");
     element.setAttribute("rel", "stylesheet");
     head.appendChild(element);
   }

package/src/cdn/elements/badges.css

@@ -62,7 +62,7 @@
 }
 
 nav:is(.left, .right, .top, .bottom) > a > .badge,
-nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {
+nav:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a > .badge {
   inset: 1rem auto auto 50%;
 }
 

package/src/cdn/elements/fields.ts

@@ -60,11 +60,19 @@ function onInputTextarea(e: Event) {
   updateTextarea(textarea);
 }
 
+function onClickLabelDelegation(e: Event) {
+  const from = (e.target as HTMLElement).closest(".field > label") as HTMLLabelElement;
+  if (!from) return;
+
+  Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
+  onClickLabel(e);
+}
+
 function updateAllLabels() {
-  const labels = queryAll(".field > label");
-  for (let i=0; i<labels.length; i++) {
-    onWeak(labels[i], "click", onClickLabel);
-  }
+  const body = document.body;
+  if (!body) return;
+
+  onWeak(body, "click", onClickLabelDelegation);
 }
 
 function updateAllInputs() {

package/src/cdn/elements/navigations.css

@@ -198,7 +198,7 @@ nav.max:is(.top, .bottom) {
 }
 
 nav:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
-nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+nav:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip) {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -208,14 +208,14 @@ nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip)
 }
 
 nav:not(.max):is(.left, .right, .top, .bottom) > a:not(.button, .chip) > i,
-nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) > i {
+nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip) > i {
   padding: 0.25rem 1rem;
   border-radius: 2rem;
   margin: 0 auto;
 }
 
 nav.max:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
-nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+nav.max:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip) {
   flex-direction: row;
   gap: 0.5rem;
   inline-size: auto;
@@ -226,21 +226,21 @@ nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .ch
 }
 
 nav:is(.left, .right, .top, .bottom) > a.active:not(.button, .chip),
-nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a.active:not(.button, .chip) {
+nav:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a.active:not(.button, .chip) {
   transition: padding var(--speed1) linear;
 }
 
 nav.max:is(.top, .bottom) > a:not(.button, .chip),
-nav.max:is(.top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+nav.max:is(.top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip) {
   gap: 0.25rem;
   block-size: 2.5rem;
   font-size: 0.8rem;
 }
 
 nav.max:is(.left, .right, .top, .bottom) > a.active:not(.button, .chip),
-nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a.active:not(.button, .chip),
+nav.max:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a.active:not(.button, .chip),
 nav:is(.left, .right, .top, .bottom):not(.max) > a.active:not(.button, .chip) > i,
-nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol, ul) > li > a.active:not(.button, .chip) > i {
+nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a.active:not(.button, .chip) > i {
   background-color: var(--secondary-container);
   color: var(--on-secondary-container);
 }

package/src/cdn/elements/pages.css

@@ -8,7 +8,7 @@
 .page.active {
   opacity: 1;
   position: relative;
-  display: block;
+  display: inherit;
   animation: var(--speed4) to-page ease;
 }
 

package/src/cdn/helpers/forms.css

@@ -41,10 +41,14 @@
   border-end-end-radius: var(--_round) !important;
 }
 
-.circle:not(.extend) {
+.circle {
   border-radius: 50%;
 }
 
+.circle:is(button, .button, .chip) {
+  border-radius: var(--_size);
+}
+
 :is(.circle, .square):is(button, .button, .chip) {
   padding: 0;
   block-size: var(--_size);

package/src/cdn/helpers/ripples.ts

@@ -1,12 +1,4 @@
-import { queryAll, onWeak } from "../utils";
-
-function onMousedownRipple(e: MouseEvent) {
-  updateRipple(e);
-}
-
-function onKeydownRipple(e: KeyboardEvent) {
-  if (e?.key === " ") updateRipple(e);
-}
+import { onWeak } from "../utils";
 
 function updateRipple(e: MouseEvent | KeyboardEvent) {
   const isMouseEvent = e instanceof MouseEvent;
@@ -29,10 +21,26 @@ function updateRipple(e: MouseEvent | KeyboardEvent) {
   element.appendChild(rippleContainer);
 }
 
+function onMousedownRippleDelegation(e: MouseEvent) {
+  const from = (e.target as HTMLElement).closest(".slow-ripple, .ripple, .fast-ripple") as HTMLElement;
+  if (!from) return;
+
+  Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
+  updateRipple(e);
+}
+
+function onKeydownRippleDelegation(e: KeyboardEvent) {
+  const from = (e.target as HTMLElement).closest(".slow-ripple, .ripple, .fast-ripple") as HTMLElement;
+  if (!from || e.key !== " ") return;
+
+  Object.defineProperty(e, "currentTarget", { value: from, configurable: true });
+  updateRipple(e);
+}
+
 export function updateAllRipples() {
-  const ripples = queryAll(".slow-ripple, .ripple, .fast-ripple");
-  for(let i=0; i<ripples.length; i++) {
-    onWeak(ripples[i], "mousedown", onMousedownRipple);
-    onWeak(ripples[i], "keydown", onKeydownRipple);
-  }
+  const body = document.body;
+  if (!body) return;
+
+  onWeak(body, "mousedown", onMousedownRippleDelegation);
+  onWeak(body, "keydown", onKeydownRippleDelegation);
 }

package/src/cdn/helpers/waves.css

@@ -1,8 +1,8 @@
 :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not([class*=ripple])::after,
 nav:is(.left, .right, .bottom, .top).max > a::after,
-nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a::after,
+nav:is(.left, .right, .bottom, .top).max > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a::after,
 nav:is(.left, .right, .bottom, .top):not(.max) > a > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a > i::after  {
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class=active]) a > i::after  {
   content: "";
   position: absolute;
   inset: 0;
@@ -19,9 +19,9 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a > i::after
 
 :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not([class*=ripple]):is(:focus-visible, :hover)::after,
 nav:is(.left, .right, .bottom, .top).max > a:not(.button, .chip):is(:focus-visible, :hover)::after,
-nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover)::after,
+nav:is(.left, .right, .bottom, .top).max > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip):is(:focus-visible, :hover)::after,
 nav:is(.left, .right, .bottom, .top):not(.max) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
   background-size: 22500%;
   opacity: 0.1;
   transition: background-size var(--speed2) linear;
@@ -29,9 +29,9 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:not(.butto
 
 :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a, nav.max > a):not([class*=ripple]):active::after,
 nav:is(.left, .right, .bottom, .top).max > a:active::after,
-nav:is(.left, .right, .bottom, .top).max > :is(ol, ul) > li > a:active::after,
+nav:is(.left, .right, .bottom, .top).max > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:active::after,
 nav:is(.left, .right, .bottom, .top):not(.max) > a:active > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:active > i::after {
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:active > i::after {
   background-size: 0%;
   opacity: 0;
   transition: none;

package/src/cdn/settings/fonts.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-outlined.woff2) format("woff2");
+  src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.21/dist/cdn/material-symbols-outlined.woff2) format("woff2");
 }
 
 /* rounded icons */
@@ -13,7 +13,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-rounded.woff2) format("woff2");
+  src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.21/dist/cdn/material-symbols-rounded.woff2) format("woff2");
 }
 
 /* sharp icons */
@@ -22,7 +22,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-sharp.woff2) format("woff2");
+  src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.21/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: swap;
-  src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.19/dist/cdn/material-symbols-subset.woff2) format("woff2");
+  src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.21/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }

package/src/cdn/settings/reset.css

@@ -72,6 +72,6 @@ label {
   pointer-events: none;
 }
 
-div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .tooltip, input)) {
+:is(div:not([class]), div[class=active]):has(> :not(.responsive) ~ :is(menu, .tooltip, input)) {
   display: inline-flex;
 }

package/src/cdn/settings/theme.ts

@@ -16,22 +16,26 @@ function lastTheme(): IBeerCssTheme {
 
   const light = document.createElement("body");
   light.className = "light";
+  light.style.display = "none";
   body.appendChild(light);
 
   const dark = document.createElement("body");
   dark.className = "dark";
+  dark.style.display = "none";
   body.appendChild(dark);
 
-  const fromLight = getComputedStyle(light);
-  const fromDark = getComputedStyle(dark);
-  const variables = ["--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"];
-  for (let i = 0, n = variables.length; i < n; i++) {
-    _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
-    _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
+  try {
+    const fromLight = getComputedStyle(light);
+    const fromDark = getComputedStyle(dark);
+    const variables = ["--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"];
+    for (let i = 0, n = variables.length; i < n; i++) {
+      _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
+      _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
+    }
+  } finally {
+    body.removeChild(light);
+    body.removeChild(dark);
   }
-
-  body.removeChild(light);
-  body.removeChild(dark);
   return _lastTheme;
 }
 

package/src/cdn/utils.ts

@@ -1,5 +1,5 @@
 const _emptyNodeList = [] as unknown as NodeListOf<Element>;
-const _weakElements = new WeakSet<HTMLElement>();
+const _weakMap = new WeakMap<Element, Map<string, Set<any>>>();
 
 export const isChrome = navigator.userAgent.includes("Chrome");
 
@@ -17,12 +17,15 @@ export const isAndroid = navigator.userAgent.includes("Android");
 
 export const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
 
+let _isTouchable: boolean;
 export function isTouchable(): boolean {
-  return window?.matchMedia("(pointer: coarse)").matches;
+  if (_isTouchable !== undefined) return _isTouchable;
+  _isTouchable = window?.matchMedia?.("(pointer: coarse)")?.matches ?? false;
+  return _isTouchable;
 }
 
 export function isDark(): boolean {
-  return window?.matchMedia("(prefers-color-scheme: dark)").matches;
+  return window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches ?? false;
 }
 
 export async function wait(milliseconds: number) {
@@ -84,7 +87,25 @@ export function on(element: Element | null, name: string, callback: any, useCapt
 }
 
 export function onWeak(element: Element | null, name: string, callback: any, useCapture: boolean = true) {
-  addWeakElement(element as HTMLElement);
+  if (!element) return;
+
+  const el = element as HTMLElement;
+  let events = _weakMap.get(el);
+  if (!events) {
+    events = new Map();
+    _weakMap.set(el, events);
+  }
+
+  const key = name + (useCapture ? "1" : "0");
+  let callbacks = events.get(key);
+  if (!callbacks) {
+    callbacks = new Set();
+    events.set(key, callbacks);
+  }
+
+  if (callbacks.has(callback)) return;
+
+  callbacks.add(callback);
   on(element, name, callback, useCapture);
 }
 
@@ -142,8 +163,8 @@ export function updateAllClickable(element: Element) {
 }
 
 export function addWeakElement(element: HTMLElement) {
-  if (_weakElements.has(element)) return;
-  _weakElements.add(element);
+  if (_weakMap.has(element)) return;
+  _weakMap.set(element, new Map());
 }
 
 export function rootSizeInPixels(): number {