beercss 4.0.16 → 4.0.18

package/README.md

@@ -4,7 +4,7 @@
 <p align="center">
     <a href="https://github.com/beercss/beercss/blob/main/LICENSE"><img src="https://img.shields.io/github/license/beercss/beercss" alt="license"></a>
     <a href="https://github.com/beercss/beercss"><img src="https://img.shields.io/jsdelivr/npm/hy/beercss" alt="downloads"></a>
-    <a><img src="https://img.shields.io/badge/brotli_size-14.5kb-green" alt="brotli size"></a>
+    <a><img src="https://img.shields.io/badge/brotli_size-14.6kb-green" alt="brotli size"></a>
     <a href="https://www.npmjs.com/package/beercss"><img src="https://img.shields.io/npm/v/beercss" alt="version"></a>
     <a href="https://github.com/beercss/beercss/pulls"><img src="https://img.shields.io/github/issues-pr/beercss/beercss" alt="pull Request"></a>
     <a href="https://github.com/beercss/beercss/issues"><img src="https://img.shields.io/github/issues/beercss/beercss" alt="issues"></a>

package/dist/cdn/beer.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 {
@@ -54,6 +59,63 @@ body {
   }
 }
 
+@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;
+  }
+}
+
 :root,
 body.light {
   --primary: #6750a4;
@@ -140,7 +202,7 @@ body.dark {
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(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(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.18/dist/cdn/material-symbols-outlined.woff2) format("woff2");
 }
 
 /* rounded icons */
@@ -150,7 +212,7 @@ body.dark {
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(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(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.18/dist/cdn/material-symbols-rounded.woff2) format("woff2");
 }
 
 /* sharp icons */
@@ -160,7 +222,7 @@ body.dark {
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(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(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.18/dist/cdn/material-symbols-sharp.woff2) format("woff2");
 }
 
 /* subset of only required icons */
@@ -170,7 +232,7 @@ body.dark {
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(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(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.18/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }
 
 /* begin scoped */
@@ -474,15 +536,11 @@ div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .toolt
 }
 
 .no-opacity {
-  opacity: 1 !important;
-}
-
-.opacity {
   opacity: 0 !important;
 }
 
 .small-opacity {
-  opacity: 0.75 !important;
+  opacity: 0.25 !important;
 }
 
 .medium-opacity {
@@ -490,7 +548,11 @@ div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .toolt
 }
 
 .large-opacity {
-  opacity: 0.25 !important;
+  opacity: 0.75 !important;
+}
+
+.opacity {
+  opacity: 1 !important;
 }
 
 .padding,
@@ -585,6 +647,15 @@ div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .toolt
   transform: translate(50%, -50%);
 }
 
+[class*=ripple]:is(:hover, :focus-visible)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: currentColor;
+  opacity: 0.1;
+  border-radius: inherit;
+}
+
 .ripple {
   --_duration: 600ms;
 }
@@ -613,13 +684,6 @@ div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .toolt
   animation: to-ripple var(--_duration) linear;
 }
 
-@keyframes to-ripple {
-  to {
-    transform: scale(4);
-    opacity: 0;
-  }
-}
-
 .scroll {
   overflow: auto;
 }
@@ -969,7 +1033,7 @@ sup {
   vertical-align: super;
 }
 
-: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,
@@ -988,7 +1052,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,
@@ -998,7 +1062,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,
@@ -1042,7 +1106,6 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:active > i
   justify-content: center;
   position: absolute;
   font-size: 0.6875rem;
-  text-transform: none;
   z-index: 2;
   padding: 0 0.25rem;
   min-block-size: 1rem;
@@ -1206,6 +1269,7 @@ nav.bottom ~ footer.fixed {
 button {
   --_padding: 1rem;
   --_size: 2.5rem;
+  --_round: calc(var(--_size) / 2) !important;
   box-sizing: content-box;
   display: inline-flex;
   align-items: center;
@@ -1216,7 +1280,7 @@ button {
   color: var(--on-primary);
   padding: 0 var(--_padding);
   background-color: var(--primary);
-  border-radius: var(--_size);
+  border-radius: 1.25rem;
   transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
   user-select: none;
   gap: 0.5rem;
@@ -1339,6 +1403,7 @@ article.border {
 .chip {
   --_padding: 0.75rem;
   --_size: 2rem;
+  --_round: calc(var(--_size) / 2) !important;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
@@ -1351,7 +1416,6 @@ article.border {
   border: 0.0625rem solid var(--outline-variant);
   color: var(--on-surface-variant);
   padding: 0 var(--_padding);
-  text-transform: none;
   border-radius: 0.5rem;
   transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
   user-select: none;
@@ -1889,7 +1953,7 @@ input[type=number] {
 .field.label > label {
   --_start: 1rem;
   position: absolute;
-  inset: -0.5rem 1rem 0 var(--_start);
+  inset: -0.5rem 0.9375rem 0 var(--_start);
   display: flex;
   block-size: calc(var(--_input, 0) + 1rem);
   line-height: calc(var(--_input, 0) + 1rem);
@@ -1901,15 +1965,15 @@ input[type=number] {
 }
 
 [dir=rtl] .field.label > label {
-  inset: -0.5rem var(--_start) 0 1rem;
+  inset: -0.5rem calc(var(--_start) - 0.0625rem) 0 0.9375rem;
 }
 
 .field.label[class*=round] > label {
-  inset: -0.5rem 1.75rem 0 var(--_start);
+  inset: -0.5rem 1.9375rem 0 var(--_start);
 }
 
-[dir=rtl] .field.labell[class*=round] > label {
-  inset: -0.5rem 1.75rem 0 var(--_start);
+[dir=rtl] .field.label[class*=round] > label {
+  inset: -0.5rem var(--_start) 0 1.9375rem;
 }
 
 .field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
@@ -1962,12 +2026,12 @@ input[type=number] {
 
 .field.label.border[class*=round]:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
 .field.label.border[class*=round]:not(.fill) > select {
-  clip-path: polygon(-2% -2%, 1.25rem -2%, 1.25rem 0.5rem, calc(100% - 1.75rem) 0.5rem, calc(100% - 1.75rem) -2%, 102% -2%, 102% 102%, -2% 102%);
+  clip-path: polygon(-2% -2%, 1.25rem -2%, 1.25rem 0.5rem, calc(100% - 2rem) 0.5rem, calc(100% - 2rem) -2%, 102% -2%, 102% 102%, -2% 102%);
 }
 
 [dir=rtl] .field.label.border[class*=round]:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
 [dir=rtl] .field.label.border[class*=round]:not(.fill) > select {
-  clip-path: polygon(-2% -2%, 1.75rem -2%, 1.75rem 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 1.25rem) -2%, 102% -2%, 102% 102%, -2% 102%);
+  clip-path: polygon(-2% -2%, 2rem -2%, 2rem 0.5rem, calc(100% - 1.25rem) 0.5rem, calc(100% - 1.25rem) -2%, 102% -2%, 102% 102%, -2% 102%);
 }
 
 .field.label > :focus + label {
@@ -2447,7 +2511,7 @@ main {
   --_padding: 0.5rem;
   grid-area: main;
   padding: var(--_padding);
-  overflow: hidden;
+  overflow: clip;
 }
 
 aside {
@@ -2581,7 +2645,7 @@ menu {
   position: absolute;
   box-shadow: var(--elevate2);
   background-color: var(--surface-container);
-  z-index: 11;
+  z-index: 13;
   inset: auto auto 0 0;
   inline-size: 100%;
   max-block-size: 50vh;
@@ -3400,8 +3464,8 @@ dialog:popover-open::backdrop {
 
 .page.active {
   opacity: 1;
-  position: inherit;
-  display: inherit;
+  position: relative;
+  display: block;
   animation: var(--speed4) to-page ease;
 }
 
@@ -3421,27 +3485,13 @@ dialog:popover-open::backdrop {
   --_transform: translate(4rem, 0);
 }
 
-@keyframes to-page {
-  from {
-    opacity: 0;
-    transform: var(--_transform);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-}
-
 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;
@@ -3452,10 +3502,6 @@ progress {
   appearance: none;
 }
 
-.dark progress {
-  background: var(--_dark);
-}
-
 progress.small {
   --_size: 0.25rem;
 }
@@ -3470,7 +3516,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 {
@@ -3481,15 +3527,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 {
@@ -3507,16 +3553,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(wavy.svg);
@@ -3604,44 +3646,6 @@ progress.max + * {
   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);
-  }
-}
-
 .shape {
   display: flex;
   align-items: center;
@@ -3722,27 +3726,27 @@ progress.max + * {
 }
 
 .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 {
@@ -3893,15 +3897,6 @@ progress.max + * {
   mask-image: url(very-sunny.svg);
 }
 
-@keyframes to-shape-rotate {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 /* checkbox, radio, switch */
 
 .checkbox,
@@ -4223,6 +4218,7 @@ progress.max + * {
   padding: 0;
   margin: 0;
   transform: rotate(0deg);
+  touch-action: none;
 }
 
 .slider > input:only-of-type {
@@ -4338,7 +4334,7 @@ progress.max + * {
   position: absolute;
   block-size: auto;
   inset: 0 auto 0 0.5rem;
-  color: currentColor;
+  color: var(--inverse-primary);
   z-index: 1;
 }
 

package/dist/cdn/beer.js

@@ -205,6 +205,7 @@ function updateAllTextareas() {
   for (let i = 0; i < textareas.length; i++) {
     onWeak(textareas[i], "focus", onFocusInput);
     onWeak(textareas[i], "blur", onBlurInput);
+    updatePlaceholder(textareas[i]);
     if (isChrome && !isMac && !isIOS) continue;
     onWeak(textareas[i], "input", onInputTextarea);
     updateTextarea(textareas[i]);
@@ -355,11 +356,10 @@ async function updateTheme(source) {
   const context = globalThis;
   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;
   }
   return context.materialDynamicColors(source).then((theme) => {
@@ -375,7 +375,7 @@ async function updateTheme(source) {
     };
     _lastTheme.light = toCss(theme.light);
     _lastTheme.dark = toCss(theme.dark);
-    body.setAttribute("style", _lastTheme[mode]);
+    body.setAttribute("style", _lastTheme[getMode()]);
     return _lastTheme;
   });
 }
@@ -496,16 +496,20 @@ function updatePage(page) {
   if (container) removeClass(queryAll(":scope > .page", container), "active");
   addClass(page, "active");
 }
-function onPointerDownRipple(e) {
+function onMousedownRipple(e) {
   updateRipple(e);
 }
+function onKeydownRipple(e) {
+  if ((e == null ? void 0 : e.key) === " ") updateRipple(e);
+}
 function updateRipple(e) {
+  const isMouseEvent = e instanceof MouseEvent;
   const element = e.currentTarget;
   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";
   const ripple = document.createElement("div");
@@ -520,7 +524,10 @@ function updateRipple(e) {
 }
 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);
+  }
 }
 function onInputDocument(e) {
   const progress = e.target;
@@ -624,8 +631,8 @@ function _ui(selector, options) {
   }
   updateAllDataUis();
   updateAllFields();
-  updateAllSliders();
   updateAllRipples();
+  updateAllSliders();
   updateAllProgress();
 }
 function start() {