beercss 4.0.15 → 4.0.17

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>
@@ -84,8 +84,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
 ### DEFAULT VERSION
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
 ```
 
@@ -103,8 +103,8 @@ import "material-dynamic-colors";
 Applied on child elements of `<* class="beer">...</*>`.
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
 ```
 
@@ -122,7 +122,7 @@ import "material-dynamic-colors";
 Applied on child elements of `<beer-css>...</beer-css>`.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.custom-element.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.custom-element.min.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
 ```
 
@@ -138,7 +138,7 @@ import "material-dynamic-colors";
 
 ### LOCAL CDN VERSION
 
-Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/. Now put the files inside a new folder in your project (like `/beercss` for example):
+Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/. Now put the files inside a new folder in your project (like `/beercss` for example):
 
 ```html
 <link href="/beercss/beer.min.css" rel="stylesheet" />
@@ -159,8 +159,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="google" content="notranslate">
     <title>Hello world</title>
-    <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.min.css" rel="stylesheet">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.css" rel="stylesheet">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.4/dist/cdn/material-dynamic-colors.min.js"></script>
   </head>
   <body class="dark">

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.15/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.17/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.15/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.17/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.15/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.17/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.15/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.17/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;
@@ -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;
@@ -2604,6 +2668,26 @@ menu {
   gap: 0.125rem;
 }
 
+menu.no-space {
+  gap: 0;
+}
+
+menu.small-space {
+  gap: 0.25rem;
+}
+
+menu.medium-space {
+  gap: 0.375rem;
+}
+
+menu.large-space {
+  gap: 0.5rem;
+}
+
+menu.extra-space {
+  gap: 0.625rem;
+}
+
 [dir=rtl] menu {
   inset: auto 0 0 auto;
 }
@@ -2776,20 +2860,8 @@ menu > li > menu.top.left {
   inset: calc(3rem * (var(--_child, 0) - var(--_type, 0))) 100% auto auto;
 }
 
-menu.no-space > li {
-  min-block-size: 2.5rem;
-}
-
-menu.medium-space > li {
-  min-block-size: 3.5rem;
-}
-
-menu.large-space > li {
-  min-block-size: 4rem;
-}
-
 menu.group {
-  padding: 0;
+  padding: 0.5rem 0;
   inline-size: 100%;
   min-inline-size: auto;
   max-block-size: none;
@@ -2801,6 +2873,7 @@ menu.group {
 menu.group > li {
   box-shadow: none;
   padding: 0;
+  min-block-size: auto;
 }
 
 menu.group > li:hover {
@@ -2817,6 +2890,8 @@ menu.group > li > menu:hover {
   transform: none;
   transition: none;
   border-radius: 1rem 1rem 0.5rem 0.5rem;
+  z-index: auto;
+  flex: 1;
 }
 
 menu.group > li:last-child > menu {
@@ -3389,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;
 }
 
@@ -3410,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;
@@ -3441,10 +3502,6 @@ progress {
   appearance: none;
 }
 
-.dark progress {
-  background: var(--_dark);
-}
-
 progress.small {
   --_size: 0.25rem;
 }
@@ -3459,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 {
@@ -3470,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 {
@@ -3496,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);
@@ -3593,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;
@@ -3711,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 {
@@ -3882,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,
@@ -4164,6 +4170,7 @@ progress.max + * {
   flex: none;
   direction: ltr;
   margin: 0 1.25rem;
+  color: var(--primary);
 }
 
 [dir=rtl] .slider {
@@ -4211,6 +4218,7 @@ progress.max + * {
   padding: 0;
   margin: 0;
   transform: rotate(0deg);
+  touch-action: none;
 }
 
 .slider > input:only-of-type {
@@ -4230,7 +4238,7 @@ progress.max + * {
   block-size: var(--_thumb);
   inline-size: 0.25rem;
   border-radius: 0.25rem;
-  background: var(--primary);
+  background: currentColor;
   cursor: grab;
   margin: 0;
   z-index: 1;
@@ -4289,14 +4297,15 @@ progress.max + * {
   position: absolute;
   block-size: var(--_track);
   border-radius: 1rem 0 0 1rem;
-  background: var(--primary);
-  color: var(--on-primary);
+  background: currentColor;
+  color: currentColor;
   z-index: 0;
-  inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto calc(var(--_start) + 0.5rem);
+  inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto var(--_start);
 }
 
 .slider > input[type=range] + input[type=range] ~ span:not([class]) {
   border-radius: 0;
+  inset: calc(50% - (var(--_track, 0) / 2)) calc(var(--_end) + 0.5rem) auto calc(var(--_start) + 0.5rem);
 }
 
 .field > .slider {
@@ -4309,12 +4318,12 @@ progress.max + * {
   inline-size: 100%;
   block-size: var(--_track);
   border-radius: 1rem;
-  background: var(--secondary-container);
+  background: var(--active);
   clip-path: polygon(calc(var(--_start, 0) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start, 0) - 0.5rem) 100%, calc(var(--_start, 0) - 0.5rem) 0, calc(100% - var(--_end, 0) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end, 0) + 0.5rem) 100%, calc(100% - var(--_end, 0) + 0.5rem) 0);
 }
 
 .slider:has(> [disabled])::before {
-  background: var(--outline-variant);
+  background: var(--active);
 }
 
 .slider:has([disabled]) {
@@ -4325,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.custom-element.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.15/dist/cdn/beer.min.js");
+    return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.16/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.15/dist/cdn/beer.scoped.min.css");
+    element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css");
     element.setAttribute("rel", "stylesheet");
     head.appendChild(element);
   }

package/dist/cdn/beer.custom-element.min.js

@@ -1 +1 @@
-class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.min.js");}async addCss() {if (BeerCssCustomElement.isCssLoaded) return;BeerCssCustomElement.isCssLoaded = true;const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue("--scoped");if (isScoped) return;const head = document.querySelector("head");const element = document.createElement("link");element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.15/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;
+class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.min.js");}async addCss() {if (BeerCssCustomElement.isCssLoaded) return;BeerCssCustomElement.isCssLoaded = true;const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue("--scoped");if (isScoped) return;const head = document.querySelector("head");const element = document.createElement("link");element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.16/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;