beercss 3.12.0 → 3.12.2

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 href="https://bundlephobia.com/package/beercss@3.12.0" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.12.0" alt="minzipped size"></a>
+    <a href="https://bundlephobia.com/package/beercss@3.12.2" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.12.2" alt="minzipped 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>
@@ -132,8 +132,8 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
 ### DEFAULT VERSION
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/beer.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/beer.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/beer.min.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
 ```
 
@@ -151,8 +151,8 @@ import "material-dynamic-colors";
 Applied on child elements of `<* class="beer">...</*>`.
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/beer.min.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
 ```
 
@@ -170,7 +170,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@3.12.0/dist/cdn/beer.custom-element.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/beer.custom-element.min.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
 ```
 
@@ -186,7 +186,7 @@ import "material-dynamic-colors";
 
 ### LOCAL CDN VERSION
 
-Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/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@3.12.2/dist/cdn/ and https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/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" />
@@ -206,8 +206,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@3.12.0/dist/cdn/beer.min.css" rel="stylesheet">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/beer.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/beer.min.css" rel="stylesheet">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/beer.min.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
   </head>
   <body class="dark">

package/dist/cdn/beer.css

@@ -99,7 +99,7 @@ body.dark {
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/material-symbols-outlined.woff2) format("woff2");
+  src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/material-symbols-outlined.woff2) format("woff2");
 }
 /* rounded icons */
 @font-face {
@@ -107,7 +107,7 @@ body.dark {
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/material-symbols-rounded.woff2) format("woff2");
+  src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/material-symbols-rounded.woff2) format("woff2");
 }
 /* sharp icons */
 @font-face {
@@ -115,7 +115,7 @@ body.dark {
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/material-symbols-sharp.woff2) format("woff2");
+  src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/material-symbols-sharp.woff2) format("woff2");
 }
 /* subset of only required icons */
 @font-face {
@@ -123,7 +123,7 @@ body.dark {
   font-style: normal;
   font-weight: 400;
   font-display: block;
-  src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.0/dist/cdn/material-symbols-subset.woff2) format("woff2");
+  src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.12.2/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }
 * {
   -webkit-tap-highlight-color: transparent;
@@ -3653,11 +3653,14 @@ dialog:popover-open::backdrop {
   }
 }
 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: 0.5rem;
+  block-size: var(--_size);
   color: var(--primary);
-  background: var(--primary-container);
+  background: var(--_light);
   border-radius: 1rem;
   flex: none;
   border: none;
@@ -3666,14 +3669,17 @@ progress {
   direction: ltr;
   -webkit-appearance: none;
 }
+.dark progress {
+  background: var(--_dark);
+}
 progress.small {
-  inline-size: 4rem;
+  --_size: 0.25rem;
 }
 progress.medium {
-  inline-size: 8rem;
+  --_size: 0.35rem;
 }
 progress.large {
-  inline-size: 12rem;
+  --_size: 0.45rem;
 }
 progress:not(.circle, [value])::after {
   content: "";
@@ -3683,22 +3689,47 @@ progress:not(.circle, [value])::after {
   block-size: 100%;
   clip-path: none;
   background: currentcolor;
-  animation: 1.6s to-linear ease infinite;
+  animation: 3.2s to-linear ease infinite;
 }
 progress:not(.circle, [value])::-moz-progress-bar {
-  animation: 1.6s to-linear ease infinite;
+  animation: 3.2s to-linear ease infinite;
 }
 progress:not(.circle, [value])::-webkit-progress-value {
-  animation: 1.6s to-linear ease infinite;
+  animation: 3.2s to-linear ease infinite;
 }
 progress::-webkit-progress-bar {
   background: none;
 }
 progress::-webkit-progress-value {
-  background: currentcolor;
+  background: currentColor;
 }
 progress::-moz-progress-bar {
-  background: currentcolor;
+  background: currentColor;
+}
+progress.wavy {
+  block-size: calc(var(--_size) * 2);
+  background: none;
+  background-image: var(--_light);
+  background-repeat: repeat-x;
+  background-position: 0 50%;
+  background-size: auto calc(var(--_size) / 2);
+}
+.dark progress.wavy {
+  background-image: var(--_dark);
+}
+progress.wavy::-webkit-progress-value,
+progress.wavy:not(.circle, [value])::after {
+  mask-image: url(wavy.svg);
+  mask-position: 0 50%;
+  mask-repeat: repeat-x;
+  mask-size: auto 100%;
+
+}
+progress.wavy::-moz-progress-bar {
+  mask-image: url(wavy.svg);
+  mask-position: 0 50%;
+  mask-repeat: repeat-x;
+  mask-size: auto 100%;
 }
 progress.circle {
   display: inline-block;
@@ -3767,18 +3798,15 @@ progress.max + * {
 }
 @keyframes to-linear {
   0% {
-    margin-inline-start: 0%;
-    inline-size: 0%;
+    margin-inline-start: -100%;
   }
 
   50% {
     margin-inline-start: 0%;
-    inline-size: 100%;
   }
 
   100% {
     margin-inline-start: 100%;
-    inline-size: 0%;
   }
 }
 @keyframes to-circular {

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@3.12.0/dist/cdn/beer.min.js");
+    return await import("https://cdn.jsdelivr.net/npm/beercss@3.12.2/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@3.12.0/dist/cdn/beer.scoped.min.css");
+    element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.12.2/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@3.12.0/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@3.12.0/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {this.classList.add("beer");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@3.12.2/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@3.12.2/dist/cdn/beer.scoped.min.css");element.setAttribute("rel", "stylesheet");head.appendChild(element);}async run() {this.classList.add("beer");await Promise.all([this.addJs(), this.addCss()]);ui();}}customElements.define("beer-css", BeerCssCustomElement);export default BeerCssCustomElement;