beercss 4.0.16 → 4.0.17

package/src/cdn/elements/progress.css

@@ -1,12 +1,10 @@
 progress {
-  --_light: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==);
-  --_dark: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==);
   --_size: 0.25rem;
   position: relative;
   inline-size: 100%;
   block-size: var(--_size);
   color: var(--primary);
-  background: var(--_light);
+  background: var(--image);
   border-radius: 1rem;
   flex: none;
   border: none;
@@ -17,10 +15,6 @@ progress {
   appearance: none;
 }
 
-.dark progress {
-  background: var(--_dark);
-}
-
 progress.small {
   --_size: 0.25rem;
 }
@@ -35,7 +29,7 @@ progress.large {
 
 progress.indeterminate {
   --_value: 100;
-  animation: 3.2s to-indeterminate ease infinite;
+  animation: 3.2s to-indeterminate-progress ease infinite;
 }
 
 progress:not(.circle, [value])::after {
@@ -46,15 +40,15 @@ progress:not(.circle, [value])::after {
   block-size: 100%;
   clip-path: none;
   background: currentcolor;
-  animation: 3.2s to-linear ease infinite;
+  animation: 3.2s to-linear-progress ease infinite;
 }
 
 progress:not(.circle, [value])::-moz-progress-bar {
-  animation: 3.2s to-linear ease infinite;
+  animation: 3.2s to-linear-progress ease infinite;
 }
 
 progress:not(.circle, [value])::-webkit-progress-value {
-  animation: 3.2s to-linear ease infinite;
+  animation: 3.2s to-linear-progress ease infinite;
 }
 
 progress::-webkit-progress-bar {
@@ -72,16 +66,12 @@ progress::-moz-progress-bar {
 progress.wavy {
   block-size: calc(var(--_size, 0) * 2);
   background: none;
-  background-image: var(--_light);
+  background-image: var(--image);
   background-repeat: repeat-x;
   background-position: 0 50%;
   background-size: auto calc(var(--_size, 0) / 2);
 }
 
-.dark progress.wavy {
-  background-image: var(--_dark);
-}
-
 progress.wavy::-webkit-progress-value,
 progress.wavy:not(.circle, [value])::after {
   mask-image: url(../shapes/wavy.svg);
@@ -168,41 +158,3 @@ progress.max + * {
 :is(.button, button, .chip) > progress.circle {
   color: inherit;
 }
-
-@keyframes to-linear {
-  0% {
-    margin: 0 0 0 -100%;
-  }
-
-  50% {
-    margin: 0 0 0 0;
-  }
-
-  100% {
-    margin: 0 0 0 100%;
-  }
-}
-
-@keyframes to-indeterminate {
-  0% {
-    padding: 0 100% 0 0;
-  }
-
-  50% {
-    padding: 0 0 0 0;
-  }
-
-  100% {
-    padding: 0 0 0 100%;
-  }
-}
-
-@keyframes to-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/cdn/elements/shapes.css

@@ -78,27 +78,27 @@
 }
 
 .shape.rotate {
-  animation: linear to-shape-rotate infinite 12s;
+  animation: linear to-rotate infinite 12s;
 }
 
 .shape.rotate > * {
-  animation: linear to-shape-rotate infinite 12s reverse;
+  animation: linear to-rotate infinite 12s reverse;
 }
 
 .shape.fast-rotate {
-  animation: linear to-shape-rotate infinite 6s;
+  animation: linear to-rotate infinite 6s;
 }
 
 .shape.fast-rotate > * {
-  animation: linear to-shape-rotate infinite 6s reverse;
+  animation: linear to-rotate infinite 6s reverse;
 }
 
 .shape.slow-rotate {
-  animation: linear to-shape-rotate infinite 24s;
+  animation: linear to-rotate infinite 24s;
 }
 
 .shape.slow-rotate > * {
-  animation: linear to-shape-rotate infinite 24s reverse;
+  animation: linear to-rotate infinite 24s reverse;
 }
 
 :is(button, .button, .chip):has(> .shape) > .responsive {
@@ -247,13 +247,4 @@
 
 .shape.very-sunny {
   mask-image: url(../shapes/very-sunny.svg);
-}
-
-@keyframes to-shape-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
 }

package/src/cdn/elements/sliders.css

@@ -60,6 +60,7 @@
   padding: 0;
   margin: 0;
   transform: rotate(0deg);
+  touch-action: none;
 }
 
 .slider > input:only-of-type {
@@ -175,7 +176,7 @@
   position: absolute;
   block-size: auto;
   inset: 0 auto 0 0.5rem;
-  color: currentColor;
+  color: var(--inverse-primary);
   z-index: 1;
 }
 

package/src/cdn/helpers/opacities.css

@@ -1,13 +1,9 @@
 .no-opacity {
-  opacity: 1 !important;
-}
-
-.opacity {
   opacity: 0 !important;
 }
 
 .small-opacity {
-  opacity: 0.75 !important;
+  opacity: 0.25 !important;
 }
 
 .medium-opacity {
@@ -15,5 +11,9 @@
 }
 
 .large-opacity {
-  opacity: 0.25 !important;
+  opacity: 0.75 !important;
+}
+
+.opacity {
+  opacity: 1 !important;
 }

package/src/cdn/helpers/ripples.css

@@ -1,3 +1,12 @@
+[class*=ripple]:is(:hover, :focus-visible)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  opacity: 0.1;
+  border-radius: inherit;
+}
+
 .ripple {
   --_duration: 600ms;
 }
@@ -24,11 +33,4 @@
   opacity: 0.3;
   transform: scale(0);
   animation: to-ripple var(--_duration) linear;
-}
-
-@keyframes to-ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
 }

package/src/cdn/helpers/ripples.ts

@@ -1,17 +1,21 @@
 import { queryAll, onWeak } from "../utils";
 
-function onPointerDownRipple(e: PointerEvent) {
+function onMousedownRipple(e: MouseEvent) {
   updateRipple(e);
 }
 
-function updateRipple(e: PointerEvent) {
+function onKeydownRipple(e: KeyboardEvent) {
+  if (e?.key === " ") updateRipple(e);
+}
+
+function updateRipple(e: MouseEvent | KeyboardEvent) {
+  const isMouseEvent = e instanceof MouseEvent;
   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 x = isMouseEvent ? e.clientX - rect.left - radius : (rect.width / 2) - radius;
+  const y = isMouseEvent ? e.clientY - rect.top - radius : (rect.height / 2) - radius;
   const rippleContainer = document.createElement("div");
   rippleContainer.className = "ripple-js";
 
@@ -27,5 +31,8 @@ function updateRipple(e: PointerEvent) {
 
 export function updateAllRipples() {
   const ripples = queryAll(".slow-ripple, .ripple, .fast-ripple");
-  for(let i=0; i<ripples.length; i++) onWeak(ripples[i], "pointerdown", onPointerDownRipple);
-}
+  for(let i=0; i<ripples.length; i++) {
+    onWeak(ripples[i], "mousedown", onMousedownRipple);
+    onWeak(ripples[i], "keydown", onKeydownRipple);
+  }
+}

package/src/cdn/helpers/waves.css

@@ -1,4 +1,4 @@
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not(.slow-ripple, .ripple, .fast-ripple)::after,
+: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):not(.max) > a > i::after,
@@ -17,7 +17,7 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a > i::after
   pointer-events: none;
 }
 
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::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):not(.max) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after,
@@ -27,7 +27,7 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:not(.butto
   transition: background-size var(--speed2) linear;
 }
 
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, nav.toolbar > a, nav.max > a):not(.slow-ripple, .ripple, .fast-ripple):active::after,
+: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):not(.max) > a:active > i::after,

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.16/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.17/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.16/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.17/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.16/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.17/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.16/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.17/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }

package/src/cdn/settings/globals.css

@@ -15,6 +15,11 @@
   --bottom: env(safe-area-inset-bottom);
   --left: env(safe-area-inset-left);
   --right: env(safe-area-inset-right);
+  --image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==);
+}
+
+body.dark {
+  --image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==);
 }
 
 html {
@@ -52,4 +57,61 @@ body {
   body:has(input[type=range]:focus) {
     overflow: hidden;
   }
+}
+
+@keyframes to-page {
+  from {
+    opacity: 0;
+    transform: var(--_transform);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes to-linear-progress {
+  0% {
+    margin: 0 0 0 -100%;
+  }
+
+  50% {
+    margin: 0 0 0 0;
+  }
+
+  100% {
+    margin: 0 0 0 100%;
+  }
+}
+
+@keyframes to-indeterminate-progress {
+  0% {
+    padding: 0 100% 0 0;
+  }
+
+  50% {
+    padding: 0 0 0 0;
+  }
+
+  100% {
+    padding: 0 0 0 100%;
+  }
+}
+
+@keyframes to-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes to-ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
 }

package/src/cdn/settings/theme.ts

@@ -40,11 +40,10 @@ export async function updateTheme(source?: IBeerCssTheme | any): Promise<IBeerCs
   const body = document.body;
   if (!source || !context.materialDynamicColors) return lastTheme();
 
-  const mode = getMode();
   if (source.light && source.dark) {
     _lastTheme.light = source.light;
     _lastTheme.dark = source.dark;
-    body.setAttribute("style", source[mode]);
+    body.setAttribute("style", source[getMode()]);
     return source;
   }
 
@@ -62,7 +61,7 @@ export async function updateTheme(source?: IBeerCssTheme | any): Promise<IBeerCs
 
     _lastTheme.light = toCss(theme.light);
     _lastTheme.dark = toCss(theme.dark);
-    body.setAttribute("style", _lastTheme[mode]);
+    body.setAttribute("style", _lastTheme[getMode()]);
     return _lastTheme;
   });
 }