beercss 4.0.0 → 4.0.2

package/README.md

@@ -2,12 +2,12 @@
     <a href="https://www.beercss.com" target="_blank" rel="noopener noreferrer"><img src="https://www.beercss.com/logo.png" alt="Beer CSS logo"></a>
 </p>
 <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@4.0.0" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@4.0.0" 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>
+    <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.4kb-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>
 </p>
 
 # Beer CSS
@@ -30,6 +30,7 @@ Beer CSS is an MIT-licensed open source project with its ongoing development mad
 
 <p align="center">
   <a href="https://github.com/sponsors/beercss">Github Sponsors</a><br /><br />
+  <img src="https://images.weserv.nl/?url=/avatars.githubusercontent.com/u/96993393?s=56&v=4&mask=circle&maxage=7d" alt="Sponsors">
   <img src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/15235526?s=56&v=4&mask=circle&maxage=7d" alt="Sponsors">
   <img src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/12303444?s=56&v=4&mask=circle&maxage=7d" alt="Sponsors">
   <img src="https://images.weserv.nl/?url=avatars.githubusercontent.com/u/40445940?s=56&v=4&mask=circle&maxage=7d" alt="Sponsors">
@@ -50,8 +51,8 @@ Beer CSS is an MIT-licensed open source project with its ongoing development mad
 - 🎯 Highly focused on DX.
 - 🚫 No build steps, configurations or dependencies.
 - ✨ Build modern interfaces without any custom CSS.
-- ✅ [HTML compliance](https://validator.w3.org/nu/?doc=https://www.beercss.com)
-- 💯 Google Lighthouse friendly
+- ✅ Compliance with web standards.
+- 💯 Google Lighthouse friendly.
 
 # A lightweight beer
 
@@ -83,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.0/dist/cdn/beer.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.2/dist/cdn/beer.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.2/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>
 ```
 
@@ -102,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.0/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@4.0.2/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.2/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>
 ```
 
@@ -121,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.0/dist/cdn/beer.custom-element.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.2/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>
 ```
 
@@ -137,7 +138,7 @@ import "material-dynamic-colors";
 
 ### LOCAL CDN VERSION
 
-Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.0/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.2/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" />
@@ -150,22 +151,23 @@ Download all files from CDN https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/
 You can use this html to setup your project. See on [Codepen](https://codepen.io/leo-bnu/pen/yLKLPxj). More about in [Main layout](docs/MAIN_LAYOUT.md).
 
 ```html
-<html>
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <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.0/dist/cdn/beer.min.css" rel="stylesheet">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.0/dist/cdn/beer.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/beercss@4.0.2/dist/cdn/beer.min.css" rel="stylesheet">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@4.0.2/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">
     <nav class="left max l">
       <header>
         <nav>
-          <img src="https://www.beercss.com/favicon.png" class="circle extra">
+          <img alt="logo" src="https://www.beercss.com/favicon.png" class="circle extra">
           <h6>Cheers</h6>
         </nav>
       </header>
@@ -202,7 +204,7 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
 
     <nav class="left m">
       <header>
-        <img src="https://www.beercss.com/favicon.png" class="circle extra">
+        <img alt="logo" src="https://www.beercss.com/favicon.png" class="circle extra">
       </header>
       <a>
         <i>home</i>
@@ -238,15 +240,15 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
     </nav>
 
     <main class="responsive">
-      <img src="https://www.beercss.com/beer-and-woman.svg" class="responsive round medium-height">
+      <img alt="beer and woman" src="https://www.beercss.com/beer-and-woman.svg" class="responsive round medium-height">
       <h3>Welcome</h3>
-      <h5>The beer is ready!</h5>
+      <h4>The beer is ready!</h4>
     </main>
   </body>
 </html>
 ```
 
-**We recommend using the material-dynamic-colors only when your app needs to change theme at runtime.**
+**The `beer.min.js` and `material-dynamic-colors.min.js` are optional, but could be required for some use cases.**
 
 ### ✅ DO:
 

package/dist/cdn/arch.svg

@@ -1,3 +1 @@
-<svg width="304" height="304" viewBox="0 0 304 304" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M304 253.72C304 259.83 304 262.89 303.69 265.46C301.31 285.51 285.51 301.31 265.46 303.69C262.89 304 259.83 304 253.72 304H50.281C44.169 304 41.113 304 38.544 303.69C18.495 301.31 2.68799 285.51 0.304993 265.46C-7.33137e-06 262.89 0 259.83 0 253.72V152C0 68.05 68.053 0 152 0C235.95 0 304 68.05 304 152V253.72Z" fill="#D0BCFF"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="304" height="304" fill="none" viewBox="0 0 304 304"><path fill="#d0bcff" d="M304 253.72c0 6.11 0 9.17-.31 11.74-2.38 20.05-18.18 35.85-38.23 38.23-2.57.31-5.63.31-11.74.31H50.281c-6.112 0-9.168 0-11.737-.31-20.049-2.38-35.856-18.18-38.239-38.23C0 262.89 0 259.83 0 253.72V152C0 68.05 68.053 0 152 0c83.95 0 152 68.05 152 152z"/></svg>

package/dist/cdn/arrow.svg

@@ -1,3 +1 @@
-<svg width="316" height="278" viewBox="0 0 316 278" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M271.57 122.2C257.552 100.62 243.535 79.01 229.517 57.43C220.423 43.42 211.167 29.2202 198.872 18.0902C186.576 6.94018 170.648 -0.939823 154.316 0.0901773C139.976 1.01018 126.684 8.72013 116.191 18.7901C105.698 28.8601 97.546 41.2601 89.528 53.5401C67.842 86.7201 46.13 119.9 24.444 153.1C14.139 168.86 3.56499 185.31 0.712987 204.09C-2.73101 226.78 6.55198 249.89 23.018 264.98C40.237 280.76 68.138 279.48 89.098 275.16C112.075 270.41 134.541 261.48 157.975 261.51C178.047 261.51 197.446 268.11 216.979 272.91C236.485 277.68 257.445 280.62 276.279 273.52C299.659 264.73 316.448 239.73 315.991 214.07C315.56 190.66 302.457 169.75 289.839 150.27C283.758 140.92 277.678 131.55 271.597 122.2H271.57Z" fill="#D0BCFF"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="316" height="278" fill="none" viewBox="0 0 316 278"><path fill="#d0bcff" d="M271.57 122.2c-14.018-21.58-28.035-43.19-42.053-64.77-9.094-14.01-18.35-28.21-30.645-39.34-12.296-11.15-28.224-19.03-44.556-18-14.34.92-27.632 8.63-38.125 18.7S97.546 41.26 89.528 53.54C67.842 86.72 46.13 119.9 24.444 153.1 14.139 168.86 3.565 185.31.713 204.09c-3.444 22.69 5.839 45.8 22.305 60.89 17.219 15.78 45.12 14.5 66.08 10.18 22.977-4.75 45.443-13.68 68.877-13.65 20.072 0 39.471 6.6 59.004 11.4 19.506 4.77 40.466 7.71 59.3.61 23.38-8.79 40.169-33.79 39.712-59.45-.431-23.41-13.534-44.32-26.152-63.8-6.081-9.35-12.161-18.72-18.242-28.07z"/></svg>

package/dist/cdn/beer.css

@@ -140,7 +140,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.0/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.2/dist/cdn/material-symbols-outlined.woff2) format("woff2");
 }
 
 /* rounded icons */
@@ -150,7 +150,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.0/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.2/dist/cdn/material-symbols-rounded.woff2) format("woff2");
 }
 
 /* sharp icons */
@@ -160,7 +160,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.0/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.2/dist/cdn/material-symbols-sharp.woff2) format("woff2");
 }
 
 /* subset of only required icons */
@@ -170,7 +170,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.0/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.2/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }
 
 /* begin scoped */
@@ -1541,10 +1541,6 @@ div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .toolt
   border-color: transparent !important;
 }
 
-.border:not(.extend, .circle, .square, .badge) {
-  box-sizing: content-box;
-}
-
 .margin,
 [class*=-margin]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
   margin: var(--_margin) !important;
@@ -3131,10 +3127,16 @@ input[type=number] {
   padding: 0.25rem 1.5rem;
 }
 
-.field.invalid > output:not(.invalid) {
+.field.invalid > output:not(.invalid),
+.field:not(.invalid) > output.invalid {
   display: none;
 }
 
+.field.invalid > output.invalid ~ menu,
+.field:not(.invalid) > output:not(.invalid) ~ menu {
+  inset: auto auto 1.75rem 0;
+}
+
 table td > .field {
   margin: 0;
 }

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.0/dist/cdn/beer.min.js");
+    return await import("https://cdn.jsdelivr.net/npm/beercss@4.0.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@4.0.0/dist/cdn/beer.scoped.min.css");
+    element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@4.0.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@4.0.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@4.0.0/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.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@4.0.2/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;