beercss 4.0.19 → 4.0.21

package/dist/cdn/beer.scoped.css

@@ -202,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.19/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.21/dist/cdn/material-symbols-outlined.woff2) format("woff2");
 }
 
 /* rounded icons */
@@ -212,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.19/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.21/dist/cdn/material-symbols-rounded.woff2) format("woff2");
 }
 
 /* sharp icons */
@@ -222,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.19/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.21/dist/cdn/material-symbols-sharp.woff2) format("woff2");
 }
 
 /* subset of only required icons */
@@ -232,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.19/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.21/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }
 
 /* begin scoped */
@@ -314,7 +314,7 @@ label {
   pointer-events: none;
 }
 
-div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .tooltip, input)) {
+:is(div:not([class]), div[class=active]):has(> :not(.responsive) ~ :is(menu, .tooltip, input)) {
   display: inline-flex;
 }
 
@@ -459,10 +459,14 @@ div:is(:not([class]), [class=active]):has(> :not(.responsive) ~ :is(menu, .toolt
   border-end-end-radius: var(--_round) !important;
 }
 
-.circle:not(.extend) {
+.circle {
   border-radius: 50%;
 }
 
+.circle:is(button, .button, .chip) {
+  border-radius: var(--_size);
+}
+
 :is(.circle, .square):is(button, .button, .chip) {
   padding: 0;
   block-size: var(--_size);
@@ -1038,9 +1042,9 @@ sup {
 
 :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).max > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a::after,
 nav:is(.left, .right, .bottom, .top):not(.max) > a > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a > i::after  {
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class=active]) a > i::after  {
   content: "";
   position: absolute;
   inset: 0;
@@ -1057,9 +1061,9 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a > i::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).max > :is(ol > li, ul > li, div:not([class]), div[class=active]) > 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,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip):is(:focus-visible, :hover) > i::after {
   background-size: 22500%;
   opacity: 0.1;
   transition: background-size var(--speed2) linear;
@@ -1067,9 +1071,9 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:not(.butto
 
 :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).max > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:active::after,
 nav:is(.left, .right, .bottom, .top):not(.max) > a:active > i::after,
-nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:active > i::after {
+nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:active > i::after {
   background-size: 0%;
   opacity: 0;
   transition: none;
@@ -1165,7 +1169,7 @@ nav:is(.left, .right, .bottom, .top):not(.max) > :is(ol, ul) > li > a:active > i
 }
 
 nav:is(.left, .right, .top, .bottom) > a > .badge,
-nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {
+nav:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a > .badge {
   inset: 1rem auto auto 50%;
 }
 
@@ -3193,7 +3197,7 @@ nav.max:is(.top, .bottom) {
 }
 
 nav:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
-nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+nav:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip) {
   display: flex;
   flex-direction: column;
   gap: 0.25rem;
@@ -3203,14 +3207,14 @@ nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip)
 }
 
 nav:not(.max):is(.left, .right, .top, .bottom) > a:not(.button, .chip) > i,
-nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) > i {
+nav:not(.max):is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip) > i {
   padding: 0.25rem 1rem;
   border-radius: 2rem;
   margin: 0 auto;
 }
 
 nav.max:is(.left, .right, .top, .bottom) > a:not(.button, .chip),
-nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+nav.max:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip) {
   flex-direction: row;
   gap: 0.5rem;
   inline-size: auto;
@@ -3221,21 +3225,21 @@ nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .ch
 }
 
 nav:is(.left, .right, .top, .bottom) > a.active:not(.button, .chip),
-nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a.active:not(.button, .chip) {
+nav:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a.active:not(.button, .chip) {
   transition: padding var(--speed1) linear;
 }
 
 nav.max:is(.top, .bottom) > a:not(.button, .chip),
-nav.max:is(.top, .bottom) > :is(ol, ul) > li > a:not(.button, .chip) {
+nav.max:is(.top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a:not(.button, .chip) {
   gap: 0.25rem;
   block-size: 2.5rem;
   font-size: 0.8rem;
 }
 
 nav.max:is(.left, .right, .top, .bottom) > a.active:not(.button, .chip),
-nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a.active:not(.button, .chip),
+nav.max:is(.left, .right, .top, .bottom) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a.active:not(.button, .chip),
 nav:is(.left, .right, .top, .bottom):not(.max) > a.active:not(.button, .chip) > i,
-nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol, ul) > li > a.active:not(.button, .chip) > i {
+nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol > li, ul > li, div:not([class]), div[class=active]) > a.active:not(.button, .chip) > i {
   background-color: var(--secondary-container);
   color: var(--on-secondary-container);
 }
@@ -3468,7 +3472,7 @@ dialog:popover-open::backdrop {
 .page.active {
   opacity: 1;
   position: relative;
-  display: block;
+  display: inherit;
   animation: var(--speed4) to-page ease;
 }