beercss 3.7.14 → 3.9.0

package/src/cdn/helpers/ripples.ts

@@ -0,0 +1,31 @@
+import { queryAll, on } from "../utils";
+
+function onPointerDownRipple(e: PointerEvent) {
+  updateRipple(e);
+}
+
+function updateRipple(e: PointerEvent) {
+  const element = e.currentTarget as HTMLElement;
+  const rect = element.getBoundingClientRect();
+  const diameter = Math.max(rect.width, rect.height);
+  const radius = diameter / 2;
+  const x = e.clientX - rect.left - radius;
+  const y = e.clientY - rect.top - radius;
+
+  const rippleContainer = document.createElement("div");
+  rippleContainer.className = "ripple-js";
+
+  const ripple = document.createElement("div");
+  ripple.style.inlineSize = ripple.style.blockSize = `${diameter}px`;
+  ripple.style.left = `${x}px`;
+  ripple.style.top = `${y}px`;
+  ripple.addEventListener("animationend", () => { rippleContainer.remove(); });
+
+  rippleContainer.appendChild(ripple);
+  element.appendChild(rippleContainer);
+}
+
+export function updateAllRipples() {
+  const ripples = queryAll(".slow-ripple, .ripple, .fast-ripple");
+  for(let i=0; i<ripples.length; i++) on(ripples[i], "pointerdown", onPointerDownRipple);
+}

package/src/cdn/helpers/spaces.css

@@ -1,15 +1,15 @@
-.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 0.5rem;
 }
 
-:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip) {
+:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 1rem;
 }
 
-.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 2rem;
 }
 
-.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 3rem;
 }

package/src/cdn/helpers/waves.css

@@ -1,7 +1,4 @@
-.wave::after,
-.chip::after,
-:is(.button, button)::after,
-:is(nav.tabbed, .tabs) > a::after {
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -15,13 +12,13 @@
   transition: none;
 }
 
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):is(:focus-visible, :hover)::after {
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after {
   background-size: 15000%;
   opacity: 0.1;
   transition: background-size var(--speed2) linear;
 }
 
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):active::after {
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {
   background-size: 5000%;
   opacity: 0;
   transition: none;

package/src/cdn/settings/fonts.css

@@ -6,7 +6,7 @@
   font-display: block;
   src:
     url("../material-symbols-outlined.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-outlined.woff2") format("woff2");
 }
 
 /* rounded icons */
@@ -17,7 +17,7 @@
   font-display: block;
   src:
     url("../material-symbols-rounded.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 }
 
 /* sharp icons */
@@ -28,5 +28,5 @@
   font-display: block;
   src:
     url("../material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }

package/src/cdn/settings/globals.css

@@ -1,5 +1,5 @@
 :root {
-  --size: 16px;
+  --size: 1rem;
   --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Noto Sans, Arial, sans-serif;
   --font-icon: "Material Symbols Outlined";
   --speed1: 0.1s;