beercss 3.12.12 → 3.13.0

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.12" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.12.12" alt="minzipped size"></a>
+    <a href="https://bundlephobia.com/package/beercss@3.13.0" target="_blank"><img src="https://img.shields.io/bundlephobia/minzip/beercss@3.13.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>
@@ -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.12/dist/cdn/beer.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.12/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@3.13.0/dist/cdn/beer.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.13.0/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.12/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.12/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@3.13.0/dist/cdn/beer.scoped.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.13.0/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.12/dist/cdn/beer.custom-element.min.js"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.13.0/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.12/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.13.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):
 
 ```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.12/dist/cdn/beer.min.css" rel="stylesheet">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.12.12/dist/cdn/beer.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/beercss@3.13.0/dist/cdn/beer.min.css" rel="stylesheet">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.13.0/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.12/dist/cdn/material-symbols-outlined.woff2) format("woff2");
+  src: url(material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.0/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.12/dist/cdn/material-symbols-rounded.woff2) format("woff2");
+  src: url(material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.0/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.12/dist/cdn/material-symbols-sharp.woff2) format("woff2");
+  src: url(material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.0/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.12/dist/cdn/material-symbols-subset.woff2) format("woff2");
+  src: url(material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@3.13.0/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }
 * {
   -webkit-tap-highlight-color: transparent;
@@ -176,16 +176,20 @@ i,
 label {
   user-select: none;
 }
-body ::-webkit-scrollbar,
-body ::-webkit-scrollbar-thumb,
-body ::-webkit-scrollbar-button {
-  background: none;
-  inline-size: 0.4rem;
-  block-size: 0.4rem;
-}
-body ::-webkit-scrollbar-thumb {
-  background: var(--outline);
-  border-radius: 1rem;
+@media (pointer: fine) {
+  body ::-webkit-scrollbar,
+  body ::-webkit-scrollbar-thumb,
+  body ::-webkit-scrollbar-button {
+    background: none;
+    inline-size: 0.4rem;
+    block-size: 0.4rem;
+  }
+
+  body :is(:focus, :hover)::-webkit-scrollbar-thumb,
+  body :has(:focus, :hover)::-webkit-scrollbar-thumb {
+    background: var(--outline);
+    border-radius: 1rem;
+  }
 }
 :not(.grid, nav, .row) > :not(progress.max) + :is(address, article, blockquote, code, .field, fieldset, form, .grid, h1, h2, h3, h4, h5, h6, nav, ol, p, pre, .row, section, aside, table, .tabs, ul):not([class*='margin'], .right, .left, .top, .bottom) {
   margin-block-start: 1rem;
@@ -2140,38 +2144,33 @@ summary::-webkit-details-marker {
   display: none;
 }
 .field {
-  --_size: 3rem;
+  --_input: 3rem;
   --_start: 1.2rem;
-  block-size: var(--_size);
-  margin-block-end: 2rem;
+  --_middle: calc(var(--_input) / 2);
   border-radius: 0.25rem 0.25rem 0 0;
-  max-block-size: 12rem;
-}
-.grid > * > .field {
-  margin-block-end: 1rem;
-}
-.grid > * > .field + .field {
-  margin-block-start: 2rem;
-}
-.grid.no-space > * > .field + .field {
-  margin-block-start: 1rem;
+  min-block-size: var(--_input);
+  display: flex;
+  flex-direction: column;
 }
-.grid.medium-space > * > .field + .field {
-  margin-block-start: 2.5rem;
+.field.fill {
+  --_background: var(--surface-variant);
+  background-color: unset !important;
+  color: unset !important;
 }
-.grid.large-space > * > .field + .field {
-  margin-block-start: 3rem;
+.field.fill > :is(input, select, textarea) {
+  background-color: var(--_background);
+  z-index: 0;
 }
 .field.small {
-  --_size: 2.5rem;
+  --_input: 2.5rem;
   --_start: 1rem;
 }
 .field.large {
-  --_size: 3.5rem;
+  --_input: 3.5rem;
   --_start: 1.4rem;
 }
 .field.extra {
-  --_size: 4rem;
+  --_input: 4rem;
   --_start: 1.6rem;
 }
 .field.border {
@@ -2190,37 +2189,37 @@ summary::-webkit-details-marker {
   border-radius: 2rem;
 }
 /* icon */
-.field > :is(i, img, svg, progress, a:not(.helper, .error)) {
+.field > :is(i, img, svg, progress.circle, a) {
   position: absolute;
-  inset: 50% auto auto auto;
-  transform: translateY(-50%);
+  inset: calc((var(--_input) / 2) - 0.75rem) auto auto auto;
   cursor: pointer;
-  z-index: 0;
+  z-index: 10;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  margin: auto 0;
+  pointer-events: none;
+}
+.field > :is(a, .front) {
+  pointer-events: all !important;
+}
+.field > a > :is(i, img, svg, progress.circle, a) {
   inline-size: 1.5rem;
   block-size: 1.5rem;
 }
-.field > :is(i, img, svg, progress, a:not(.helper, .error)),
-[dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child {
-  inset: 50% 1rem auto auto;
+.field > :is(i, img, svg, progress.circle, a),
+[dir=rtl] .field > :is(i, img, svg, progress.circle, a):first-child {
+  inset: calc(var(--_middle) - 0.75rem) 1rem auto auto;
 }
-.field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child,
-[dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)) {
-  inset: 50% auto auto 1rem;
+.field > :is(i, img, svg, progress.circle, a):first-child,
+[dir=rtl] .field > :is(i, img, svg, progress.circle, a) {
+  inset: calc(var(--_middle) - 0.75rem) auto auto 1rem;
 }
 .field.invalid > i {
   color: var(--error);
 }
 .field > progress.circle {
-  inset-block-start: calc(50% - 0.75rem) !important;
   border-width: 0.1875rem;
 }
-.field > a:not(.helper, .error) {
-  z-index: 10;
-}
-.field > a > :is(i, img, svg, progress, a:not(.helper, .error)) {
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
-}
 /* input, textarea and select */
 .field > :is(input, textarea, select) {
   all: unset;
@@ -2234,7 +2233,7 @@ summary::-webkit-details-marker {
   font-family: inherit;
   font-size: 1rem;
   inline-size: 100%;
-  block-size: 100%;
+  min-block-size: var(--_input);
   outline: none;
   z-index: 1;
   background: none;
@@ -2253,10 +2252,9 @@ input::-webkit-date-and-time-value {
   border: 0.125rem solid transparent;
   padding: 0 0.875rem;
 }
-.field.min > textarea {
-  overflow: hidden auto;
-  position: absolute;
-  inset: 0;
+.field > textarea:not([rows]) {
+  field-sizing: content;
+  max-block-size: 12rem;
 }
 input[type=file],
 input[type=color],
@@ -2343,18 +2341,6 @@ input[type=number] {
 .field > :disabled {
   cursor: not-allowed;
 }
-.field.textarea.small:not(.min) {
-  --_size: 5rem;
-}
-.field.textarea:not(.min) {
-  --_size: 5.5rem;
-}
-.field.textarea.large:not(.min) {
-  --_size: 6rem;
-}
-.field.textarea.extra:not(.min) {
-  --_size: 6.5rem;
-}
 .field > select {
   user-select: none;
 }
@@ -2374,27 +2360,26 @@ input[type=number] {
 .field > select > option {
   background-color: var(--surface);
 }
-.field.label > :is(input, select) {
+.field > :is(input, select) {
   padding-block-start: 1rem;
 }
-.field.label.border:not(.fill) > :is(input, select) {
+.field:not(.label) > :is(input, select),
+.field.border:not(.fill) > :is(input, select) {
   padding-block-start: 0;
 }
 .field > textarea {
-  padding-block-start: var(--_start);
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
+  padding-block-start: calc(var(--_start)) !important;
 }
 .field > textarea:focus {
-  padding-block-start: calc(var(--_start) - 0.06rem);
+  padding-block-start: calc(var(--_start) - 0.01rem) !important;
 }
 .field:not(.label) > textarea,
-.field.border.label:not(.fill) > textarea {
-  padding-block-start: calc(var(--_start) - 0.5rem);
+.field.border:not(.fill) > textarea {
+  padding-block-start: calc(var(--_start) - 0.5rem) !important;
 }
 .field:not(.label) > textarea:focus,
-.field.border.label:not(.fill) > textarea:focus {
-  padding-block-start: calc(var(--_start) - 0.56rem);
+.field.border:not(.fill) > textarea:focus {
+  padding-block-start: calc(var(--_start) - 0.51rem) !important;
 }
 /* label */
 .field.label > label {
@@ -2402,19 +2387,22 @@ input[type=number] {
   position: absolute;
   inset: -0.5rem 1rem 0 var(--_start);
   display: flex;
-  block-size: calc(var(--_size) + 1rem);
-  line-height: calc(var(--_size) + 1rem);
+  block-size: calc(var(--_input) + 1rem);
+  line-height: calc(var(--_input) + 1rem);
   font-size: 1rem;
   transition: all 0.2s;
   gap: 0.25rem;
   white-space: nowrap;
+  pointer-events: none;
+}
+[dir=rtl] .field.label > label {
+  inset: -0.5rem var(--_start) 0 1rem;
 }
 .field.label.round > label {
   inset: -0.5rem 1.75rem 0 var(--_start);
 }
-.field.label.textarea:not(.min) > label {
-  block-size: calc(var(--_size) - 1.5rem);
-  line-height: calc(var(--_size) - 1.5rem);
+[dir=rtl] .field.label.round > label {
+  inset: -0.5rem 1.75rem 0 var(--_start);
 }
 .field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
   --_start: 1rem;
@@ -2483,27 +2471,21 @@ input[type=number] {
   font-size: 1rem;
 }
 /* helper */
-.field > :is(.helper, .error) {
-  position: absolute;
-  inset: auto auto 0 1rem;
-  transform: translateY(100%);
+.field > output {
+  display: inline-block;
   font-size: 0.75rem;
   background: none !important;
-  padding-block-start: 0.125rem;
-}
-[dir=rtl] .field > :is(.helper, .error) {
-  inset: auto 1rem 0 auto;
-}
-a.helper {
-  color: var(--primary);
+  padding: 0.25rem 1rem;
+  line-height: 1.25rem;
+  align-self: start;
 }
-.field > .error {
+.field > output.invalid {
   color: var(--error) !important;
 }
-.field.round > :is(.helper, .error) {
-  inset-inline-start: 1.5rem;
+.field.round > output {
+  padding: 0.25rem 1.5rem;
 }
-.field.invalid > .helper {
+.field.invalid > output:not(.invalid) {
   display: none;
 }
 table td > .field {
@@ -3676,6 +3658,7 @@ progress {
   writing-mode: horizontal-tb;
   direction: ltr;
   -webkit-appearance: none;
+  appearance: none;
 }
 .dark progress {
   background: var(--_dark);
@@ -3740,29 +3723,36 @@ progress.wavy::-moz-progress-bar {
   mask-size: auto 100%;
 }
 progress.circle {
-  display: inline-block;
+  --_value: attr(value type(<number>), 50);
   inline-size: 2.5rem;
   block-size: 2.5rem;
+  background: conic-gradient(currentColor calc(var(--_value) * 1%), var(--active) 0%);
   border-radius: 50%;
-  border-width: 0.3rem;
-  border-style: solid;
-  border-color: currentcolor;
-  animation: 1.6s to-circular linear infinite;
+  mask-image: radial-gradient(circle at center, transparent 57%, currentColor 60%);
+}
+progress.circle::-webkit-progress-value {
   background: none;
-  flex: none;
 }
 progress.circle::-moz-progress-bar {
   background: none;
 }
+progress.circle.wavy {
+  background: conic-gradient(currentColor calc(var(--_value) * 1%), var(--active) 0);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  mask-image: url(wavy-circle.svg);
+}
 progress.circle.small {
   inline-size: 1.5rem;
   block-size: 1.5rem;
-  border-width: 0.2rem;
 }
 progress.circle.large {
   inline-size: 3.5rem;
   block-size: 3.5rem;
-  border-width: 0.4rem;
+}
+progress.circle:not([value]) {
+  animation: to-rotate 1s infinite linear;
 }
 :is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
   flex: auto;
@@ -3783,27 +3773,12 @@ progress.max {
 progress.max[class*='-text'] {
   opacity: 1;
 }
-progress:is(.horizontal, .vertical, .max) {
-  display: unset;
-  inline-size: 100% !important;
-}
-progress.vertical {
-  writing-mode: vertical-lr;
-}
-progress.max.vertical {
-  transform: rotate(-180deg);
-}
 progress.max + * {
   margin-block-start: 0;
 }
 :is(.button, button, .chip) > progress.circle {
   color: inherit;
 }
-@supports (-moz-appearance:none) {
-  progress.max.vertical {
-    transform: none;
-  }
-}
 @keyframes to-linear {
   0% {
     margin-inline-start: -100%;
@@ -3817,47 +3792,15 @@ progress.max + * {
     margin-inline-start: 100%;
   }
 }
-@keyframes to-circular {
-  0% {
+@keyframes to-rotate {
+  from {
+    --_value: 50;
     transform: rotate(0deg);
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
-  }
-
-  20% {
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
   }
 
-  30% {
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
-  }
-
-  40% {
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
-  }
-
-  50% {
-    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);
-  }
-
-  60% {
-    clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 100%);
-  }
-
-  70% {
-    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%, 0% 50%);
-  }
-
-  80% {
-    clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 50%);
-  }
-
-  90% {
+  to {
+    --_value: 50;
     transform: rotate(360deg);
-    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
-  }
-
-  100% {
-    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
   }
 }
 .shape {
@@ -4068,7 +4011,6 @@ progress.max + * {
 .radio,
 .switch {
   --_size: 1.5rem;
-  direction: ltr;
   inline-size: auto;
   block-size: auto;
   line-height: normal;
@@ -4077,6 +4019,9 @@ progress.max + * {
   display: inline-flex;
   align-items: center;
 }
+.switch {
+  direction: ltr;
+}
 :is(.checkbox, .radio, .switch).small {
   --_size: 1rem;
 }
@@ -4122,6 +4067,12 @@ progress.max + * {
   user-select: none;
   z-index: 1;
 }
+[dir=rtl] :is(.checkbox, .radio) > span::before,
+[dir=rtl] :is(.checkbox, .radio) > span > i,
+[dir=rtl] :is(.checkbox, .radio) > span::after {
+  --_size: inherit;
+  inset: auto calc(var(--_size) * -1) auto auto;
+}
 .switch > span::before,
 .switch.icon > span > i {
   position: absolute;
@@ -4204,14 +4155,26 @@ progress.max + * {
   background-color: var(--on-primary);
   transform: translate(-1.75rem, -50%) scale(1);
 }
+[dir=rtl] .switch > input:checked + span::before,
+[dir=rtl] .switch.icon > input:checked + span > i {
+  transform: translate(-1.75rem, -50%) scale(-1);
+}
 .switch > input:active:not(:disabled) + span::before,
 .switch.icon > input:active:not(:disabled) + span > i {
   transform: translate(-3rem, -50%) scale(1.2);
 }
+[dir=rtl] .switch > input:active:not(:disabled) + span::before,
+[dir=rtl] .switch.icon > input:active:not(:disabled) + span > i {
+  transform: translate(-3rem, -50%) scale(-1.2);
+}
 .switch > input:active:checked:not(:disabled) + span::before,
 .switch.icon > input:active:checked:not(:disabled) + span > i {
   transform: translate(-1.75rem, -50%) scale(1.2);
 }
+[dir=rtl] .switch > input:active:checked:not(:disabled) + span::before,
+[dir=rtl] .switch.icon > input:active:checked:not(:disabled) + span > i {
+  transform: translate(-1.75rem, -50%) scale(-1.2);
+}
 :is(.checkbox, .radio, .switch) > input:disabled + span {
   opacity: 0.5;
   cursor: not-allowed;
@@ -4554,6 +4517,10 @@ progress.max + * {
   .slider > :hover ~ .tooltip.bottom {
     inset-block: auto -1rem !important;
   }
+  
+  body:has(input[type=range]:focus) {
+    overflow: hidden;
+  }
 }
 .snackbar {
   position: fixed;

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