beercss 3.10.4 → 3.10.6

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.10.4" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.10.4" alt="minzipped size"></a>
+    <a href="https://bundlephobia.com/package/beercss@3.10.6" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.10.6" 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>
@@ -127,62 +127,56 @@ This project was guided by the **"Germany Beer Purity Law"** or **"Reinheitsgebo
 
 # Get started
 
-### CDN
-
-**Default version**
+### DEFAULT VERSION
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/beer.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@3.10.6/dist/cdn/beer.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.10.6/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>
 ```
 
-**Scoped version** applied on child elements of `<* class="beer">...</*>`.
+```js
+npm i beercss
+npm i material-dynamic-colors
+```
 
-```html
-<link href="https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.10.4/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>
+```js
+import "beercss";
+import "material-dynamic-colors";
 ```
 
-**Custom element version** applied on child elements of `<beer-css>...</beer-css>`.
+### SCOPED VERSION
+Applied on child elements of `<* class="beer">...</*>`.
 
 ```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/beer.custom-element.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@3.10.6/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.10.6/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>
 ```
 
-
-### NPM
-
-**Install**
-
 ```js
 npm i beercss
 npm i material-dynamic-colors
 ```
 
-**Default version**
-
 ```js
-import "beercss";
+import "beercss/scoped";
 import "material-dynamic-colors";
 ```
 
-```js
-import beercss from "beercss";
-import materialDynamicColors from "material-dynamic-colors";
-```
+### CUSTOM ELEMENT VERSION
+Applied on child elements of `<beer-css>...</beer-css>`.
 
-**Scoped version** applied on child elements of `<* class="beer">...</*>`.
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.10.6/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>
+```
 
 ```js
-import "beercss/scoped";
-import "material-dynamic-colors";
+npm i beercss
+npm i material-dynamic-colors
 ```
 
-**Custom element version** applied on child elements of `<beer-css>...</beer-css>`.
-
 ```js
 import "beercss/custom-element";
 import "material-dynamic-colors";
@@ -200,8 +194,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.10.4/dist/cdn/beer.min.css" rel="stylesheet">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/beer.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/beercss@3.10.6/dist/cdn/beer.min.css" rel="stylesheet">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.10.6/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

@@ -101,7 +101,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-outlined.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.6/dist/cdn/material-symbols-outlined.woff2") format("woff2");
 }
 /* rounded icons */
 @font-face {
@@ -111,7 +111,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-rounded.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.6/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 }
 /* sharp icons */
 @font-face {
@@ -121,7 +121,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.6/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }
 /* subset of only required icons */
 @font-face {
@@ -131,7 +131,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-subset.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.4/dist/cdn/material-symbols-subset.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.6/dist/cdn/material-symbols-subset.woff2") format("woff2");
 }
 * {
   -webkit-tap-highlight-color: transparent;
@@ -1627,150 +1627,6 @@ pre:has(> code){
 .top-shadow {
   background-image: linear-gradient(to bottom, black, transparent) !important;
 }
-main {
-  flex: 1;
-  padding: 0.5rem;
-  overflow-x: hidden;
-}
-:is(main, header, footer, section).responsive {
-  max-inline-size: 75rem;
-  margin: 0 auto;
-}
-:is(main, header, footer, section).responsive.max {
-  max-inline-size: 100%;
-}
-:has(> main) {
-  --_top: 0rem;
-  --_bottom: 0rem;
-  --_left: 0rem;
-  --_right: 0rem;
-  display: flex;
-  flex-direction: column;
-  min-block-size: calc(100vh - var(--top) - var(--_top) - var(--bottom) - var(--_bottom));
-  box-sizing: border-box;
-  background-color: var(--surface);
-  margin-block: calc(var(--top) + var(--_top)) calc(var(--bottom) + var(--_bottom));
-  margin-inline: calc(var(--left) + var(--_left)) calc(var(--right) + var(--_right));
-}
-:has(> main) > :is(header, footer).fixed {
-  z-index: 12;
-  transform: none;
-  box-sizing: content-box;
-  inset: 0;
-}
-:has(> main) > header.fixed {
-  padding-block-start: calc(var(--top) + var(--_top));
-  margin-block-start: calc(-1 * var(--top) - var(--_top));
-}
-:has(> main) > footer.fixed {
-  padding-block-end: calc(var(--bottom) + var(--_bottom));
-  margin-block-end: calc(-1 * var(--bottom) - var(--_bottom));
-}
-:has(> nav.top:not(.s, .n, .l)) {
-  --_top: 5rem;
-}
-:has(> nav.bottom:not(.s, .n, .l)) {
-  --_bottom: 5rem;
-}
-:has(> nav.left:not(.s, .n, .l)) {
-  --_left: 5rem;
-}
-:has(> nav.right:not(.s, .n, .l)) {
-  --_right: 5rem;
-}
-:has(> nav.drawer.left:not(.s, .n, .l)) {
-  --_left: 20rem;
-}
-:has(> nav.drawer.right:not(.s, .n, .l)) {
-  --_right: 20rem;
-}
-:not(main):has(> aside) {
-  overflow: auto;
-}
-aside {
-  z-index: 1;
-}
-aside:not(.fixed, .absolute).right {
-  float: right;
-}
-aside:not(.fixed, .absolute).left {
-  float: left;
-}
-@media only screen and (max-width: 600px) {
-  :has(> nav.bottom.s) {
-    --_bottom: 5rem;
-  }
-
-  :has(> nav.top.s) {
-    --_top: 5rem;
-  }
-
-  :has(> nav.left.s) {
-    --_left: 5rem;
-  }
-
-  :has(> nav.right.s) {
-    --_right: 5rem;
-  }
-
-  :has(> nav.drawer.left.s) {
-    --_left: 20rem;
-  }
-
-  :has(> nav.drawer.right.s) {
-    --_right: 20rem;
-  }
-}
-@media only screen and (min-width: 601px) and (max-width: 992px) {
-  :has(> nav.bottom.m) {
-    --_bottom: 5rem;
-  }
-
-  :has(> nav.top.m) {
-    --_top: 5rem;
-  }
-
-  :has(> nav.left.m) {
-    --_left: 5rem;
-  }
-
-  :has(> nav.right.m) {
-    --_right: 5rem;
-  }
-
-  :has(> nav.drawer.left.m) {
-    --_left: 20rem;
-  }
-
-  :has(> nav.drawer.right.m) {
-    --_right: 20rem;
-  }
-}
-@media only screen and (min-width: 993px) {
-  :has(> nav.bottom.l) {
-    --_bottom: 5rem;
-  }
-
-  :has(> nav.top.l) {
-    --_top: 5rem;
-  }
-
-  :has(> nav.left.l) {
-    --_left: 5rem;
-  }
-
-  :has(> nav.right.l) {
-    --_right: 5rem;
-  }
-
-  :has(> nav.drawer.left.l) {
-    --_left: 20rem;
-  }
-
-  :has(> nav.drawer.right.l) {
-    --_right: 20rem;
-  }
-}
 .badge {
   --_x: 0;
   --_y: -100%;
@@ -1838,6 +1694,87 @@ nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {
 :is(button, .button, .chip) > .badge.none {
   margin: 0 -0.5rem;
 }
+header,
+footer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  background-color: var(--surface-container);
+  border-radius: 0;
+  padding: 0 1rem;
+}
+:is(nav.drawer, dialog, article) > :is(header, footer) {
+  padding-inline: 0;
+  inset: 0;
+}
+header {
+  min-block-size: 4rem;
+}
+footer {
+  min-block-size: 5rem;
+}
+:is(header, footer, menu > *).fixed {
+  position: sticky;
+  inset: 0;
+  z-index: 11;
+  background-color: inherit;
+}
+header.fixed {
+  inset: calc(-1 * var(--_padding)) 0 0 0;
+  margin-block-start: calc(-1 * var(--_padding));
+}
+footer.fixed {
+  inset: 0 0 calc(-1 * var(--_padding)) 0;
+  margin-block-end: calc(-1 * var(--_padding));
+}
+dialog > :is(header, footer) {
+  background: none;
+}
+dialog > header.fixed {
+  background-color: inherit;
+  padding: var(--top) 0 0 0;
+  margin: calc(-1 * var(--top)) 0 0 0;
+  transform: translateY(calc(-1 * (var(--top) + var(--_padding))));
+}
+dialog > footer.fixed {
+  background-color: inherit;
+  padding: 0 0 var(--bottom) 0;
+  margin: 0 0 calc(-1 * var(--bottom)) 0;
+  transform: translateY(calc(var(--bottom) + var(--_padding)));
+}
+:is(main, header, footer, section).responsive {
+  max-inline-size: 75rem;
+  margin: 0 auto;
+}
+:is(main, header, footer, section).responsive.max {
+  max-inline-size: 100%;
+}
+:has(> main) > :is(header, footer).fixed {
+  z-index: 100;
+  transform: none;
+  box-sizing: content-box;
+  inset: 0;
+}
+:has(> main) > header.fixed {
+  padding-block-start: calc(var(--top) + var(--_top));
+  margin-block-start: calc(-1 * var(--top) - var(--_top));
+}
+:has(> main) > footer.fixed {
+  padding-block-end: calc(var(--bottom) + var(--_bottom));
+  margin-block-end: calc(-1 * var(--bottom) - var(--_bottom));
+}
+:is(nav, .row) > header {
+  background-color: inherit;
+}
+nav:is(.left, .right) > header {
+  transform: translateY(-0.5rem);
+}
+nav.drawer:is(.left, .right) > header + * {
+  margin-block-start: 0.5rem;
+}
+dialog > nav.drawer > header + * {
+  margin-block-start: 1rem;
+}
 .button,
 button {
   --_size: 2.5rem;
@@ -2097,21 +2034,6 @@ dialog.medium:is(.top, .bottom) {
 dialog.large:is(.top, .bottom) {
   block-size: 32rem;
 }
-dialog > :is(header, footer) {
-  background: none;
-}
-dialog > header.fixed {
-  background-color: inherit;
-  padding: var(--top) 0 0 0;
-  margin: calc(-1 * var(--top)) 0 0 0;
-  transform: translateY(calc(-1 * (var(--top) + var(--_padding))));
-}
-dialog > footer.fixed {
-  background-color: inherit;
-  padding: 0 0 var(--bottom) 0;
-  margin: 0 0 calc(-1 * var(--bottom)) 0;
-  transform: translateY(calc(var(--bottom) + var(--_padding)));
-}
 hr,
 [class*=divider] {
   all: unset;
@@ -2766,38 +2688,6 @@ i[class*=fa-] {
 :is(.absolute, .fixed).top.bottom.large {
   inline-size: 44rem;
 }
-header,
-footer {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  background-color: var(--surface-container);
-  border-radius: 0;
-  padding: 0 1rem;
-}
-:is(nav.drawer, dialog, article) > :is(header, footer) {
-  padding-inline: 0;
-}
-header {
-  min-block-size: 4rem;
-}
-footer {
-  min-block-size: 5rem;
-}
-:is(header, footer, menu > *).fixed {
-  position: sticky;
-  inset: 0;
-  z-index: 11;
-  background-color: inherit;
-}
-header.fixed {
-  inset: calc(-1 * var(--_padding)) 0 0 0;
-  margin-block-start: calc(-1 * var(--_padding));
-}
-footer.fixed {
-  inset: 0 0 calc(-1 * var(--_padding)) 0;
-  margin-block-end: calc(-1 * var(--_padding));
-}
 .list {
   display: flex;
   flex-direction: column;
@@ -2860,6 +2750,129 @@ footer.fixed {
 .list.large-space > li > details > summary {
   min-block-size: 5.5rem;
 }
+main {
+  flex: 1;
+  padding: 0.5rem;
+  overflow-x: hidden;
+}
+:has(> main) {
+  --_top: 0rem;
+  --_bottom: 0rem;
+  --_left: 0rem;
+  --_right: 0rem;
+  display: flex;
+  flex-direction: column;
+  min-block-size: calc(100vh - var(--top) - var(--_top) - var(--bottom) - var(--_bottom));
+  box-sizing: border-box;
+  background-color: var(--surface);
+  margin-block: calc(var(--top) + var(--_top)) calc(var(--bottom) + var(--_bottom));
+  margin-inline: calc(var(--left) + var(--_left)) calc(var(--right) + var(--_right));
+}
+:has(> nav.top:not(.s, .n, .l)) {
+  --_top: 5rem;
+}
+:has(> nav.bottom:not(.s, .n, .l)) {
+  --_bottom: 5rem;
+}
+:has(> nav.left:not(.s, .n, .l)) {
+  --_left: 5rem;
+}
+:has(> nav.right:not(.s, .n, .l)) {
+  --_right: 5rem;
+}
+:has(> nav.drawer.left:not(.s, .n, .l)) {
+  --_left: 20rem;
+}
+:has(> nav.drawer.right:not(.s, .n, .l)) {
+  --_right: 20rem;
+}
+:not(main):has(> aside) {
+  overflow: auto;
+}
+aside {
+  z-index: 1;
+}
+aside:not(.fixed, .absolute).right {
+  float: right;
+}
+aside:not(.fixed, .absolute).left {
+  float: left;
+}
+@media only screen and (max-width: 600px) {
+  :has(> nav.bottom.s) {
+    --_bottom: 5rem;
+  }
+
+  :has(> nav.top.s) {
+    --_top: 5rem;
+  }
+
+  :has(> nav.left.s) {
+    --_left: 5rem;
+  }
+
+  :has(> nav.right.s) {
+    --_right: 5rem;
+  }
+
+  :has(> nav.drawer.left.s) {
+    --_left: 20rem;
+  }
+
+  :has(> nav.drawer.right.s) {
+    --_right: 20rem;
+  }
+}
+@media only screen and (min-width: 601px) and (max-width: 992px) {
+  :has(> nav.bottom.m) {
+    --_bottom: 5rem;
+  }
+
+  :has(> nav.top.m) {
+    --_top: 5rem;
+  }
+
+  :has(> nav.left.m) {
+    --_left: 5rem;
+  }
+
+  :has(> nav.right.m) {
+    --_right: 5rem;
+  }
+
+  :has(> nav.drawer.left.m) {
+    --_left: 20rem;
+  }
+
+  :has(> nav.drawer.right.m) {
+    --_right: 20rem;
+  }
+}
+@media only screen and (min-width: 993px) {
+  :has(> nav.bottom.l) {
+    --_bottom: 5rem;
+  }
+
+  :has(> nav.top.l) {
+    --_top: 5rem;
+  }
+
+  :has(> nav.left.l) {
+    --_left: 5rem;
+  }
+
+  :has(> nav.right.l) {
+    --_right: 5rem;
+  }
+
+  :has(> nav.drawer.left.l) {
+    --_left: 20rem;
+  }
+
+  :has(> nav.drawer.right.l) {
+    --_right: 20rem;
+  }
+}
 svg {
   fill: currentcolor;
 }
@@ -3306,23 +3319,16 @@ nav.drawer,
 nav.drawer:not(.left, .right, .top, .bottom) {
   padding: 0.5rem 1rem;
 }
+dialog > nav.drawer:not(.left, .right, .top, .bottom) {
+  padding: 0 1rem;
+  background-color: inherit;
+}
 nav.drawer:is(.min, .max) {
   inline-size: auto;
 }
 nav.drawer.max {
   inline-size: 100%;
 }
-:is(nav, .row) > header {
-  background-color: inherit;
-}
-nav:is(.left, .right) > header {
-  transform: translateY(-0.5rem);
-}
-nav.drawer > header {
-  transform: translateY(-0.75rem);
-  min-block-size: 4.5rem;
-  align-self: stretch;
-}
 nav.drawer > :is(a, label),
 nav.drawer > :is(ol, ul) > li > :is(a, label),
 :is(a.row, nav.row):is(.wave, .slow-ripple, .ripple, .fast-ripple) {

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