beercss 3.10.7 → 3.11.1

package/dist/cdn/beer.scoped.css

@@ -102,7 +102,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-outlined.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.7/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/material-symbols-outlined.woff2") format("woff2");
 }
 /* rounded icons */
 @font-face {
@@ -112,7 +112,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-rounded.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.7/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 }
 /* sharp icons */
 @font-face {
@@ -122,7 +122,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.7/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }
 /* subset of only required icons */
 @font-face {
@@ -132,7 +132,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-subset.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.7/dist/cdn/material-symbols-subset.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.11.1/dist/cdn/material-symbols-subset.woff2") format("woff2");
 }
 .beer * {
   -webkit-tap-highlight-color: transparent;
@@ -199,6 +199,9 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   outline: 0.125rem solid var(--primary);
   outline-offset: 0.25rem;
 }
+.beer :is(nav, .row, li).group > :focus-visible {
+  outline-offset: 0;
+}
 .beer .transparent {
   background-color: transparent !important;
   box-shadow: none !important;
@@ -345,6 +348,36 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   background-color: var(--surface-variant) !important;
   color: var(--on-surface-variant) !important;
 }
+.beer .primary-container > .active,
+.beer .primary-container.active {
+  background-color: var(--primary) !important;
+  color: var(--on-primary) !important;
+}
+.beer .secondary-container > .active,
+.beer .secondary-container.active {
+  background-color: var(--secondary) !important;
+  color: var(--on-secondary) !important;
+}
+.beer .tertiary-container > .active,
+.beer .tertiary-container.active {
+  background-color: var(--tertiary) !important;
+  color: var(--on-tertiary) !important;
+}
+.beer .primary > .active,
+.beer .primary.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.beer .secondary > .active,
+.beer .secondary.active {
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
+}
+.beer .tertiary > .active,
+.beer .tertiary.active {
+  background-color: var(--tertiary-container) !important;
+  color: var(--on-tertiary-container) !important;
+}
 .beer .middle-align {
   display: flex;
   align-items: center !important;
@@ -369,6 +402,24 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   text-align: center;
   justify-content: center !important;
 }
+.beer [class*=blur],
+.beer [class*=blur].light {
+  --_blur: 1rem;
+  -webkit-backdrop-filter: blur(var(--_blur));
+  backdrop-filter: blur(var(--_blur));
+  color: var(--on-surface);
+  background-color: rgb(255 255 255 / 0.5) !important;
+}
+.beer .dark [class*=blur],
+.beer [class*=blur].dark {
+  background-color: rgb(0 0 0 / 0.5) !important;
+}
+.beer .small-blur {
+  --_blur: 0.5rem;
+}
+.beer .large-blur {
+  --_blur: 1.5rem;
+}
 .beer .red,
 .beer .red6 {
   background-color: #F44336 !important;
@@ -1125,7 +1176,7 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 .beer .bottom-round,
 .beer .left-round,
 .beer .right-round {
-  border-radius: 0 !important;
+  border-radius: 0.5rem !important;
 }
 .beer .top-round {
   border-start-start-radius: var(--_round) !important;
@@ -1166,6 +1217,9 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 .beer .no-border {
   border-color: transparent !important;
 }
+.beer .border:not(.extend, .circle, .square, .badge) {
+  box-sizing: content-box;
+}
 .beer [class*=margin]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
   margin: var(--_margin) !important;
 }
@@ -1322,6 +1376,24 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 .beer .no-scroll {
   overflow: hidden;
 }
+.beer .shadow {
+  background-color: #00000050;
+}
+.beer :is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
+  background-color: transparent !important;
+}
+.beer .left-shadow {
+  background-image: linear-gradient(to right, black, transparent) !important;
+}
+.beer .right-shadow {
+  background-image: linear-gradient(to left, black, transparent) !important;
+}
+.beer .bottom-shadow {
+  background-image: linear-gradient(to top, black, transparent) !important;
+}
+.beer .top-shadow {
+  background-image: linear-gradient(to bottom, black, transparent) !important;
+}
 .beer [class*=width] {
   max-inline-size: 100%;
 }
@@ -1565,7 +1637,7 @@ body {
   direction: ltr;
   text-align: start;
 }
-.beer :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
+.beer :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, .toolbar > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -1578,12 +1650,12 @@ body {
   opacity: 0;
   transition: none;
 }
-.beer :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after {
+.beer :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, .toolbar > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after {
   background-size: 15000%;
   opacity: 0.1;
   transition: background-size var(--speed2) linear;
 }
-.beer :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {
+.beer :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, .toolbar > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {
   background-size: 5000%;
   opacity: 0;
   transition: none;
@@ -1592,42 +1664,6 @@ body {
 .beer .no-wave:is(:hover, :active)::after {
   display: none;
 }
-.beer [class*=blur],
-.beer [class*=blur].light {
-  --_blur: 1rem;
-  -webkit-backdrop-filter: blur(var(--_blur));
-  backdrop-filter: blur(var(--_blur));
-  color: var(--on-surface);
-  background-color: rgb(255 255 255 / 0.5) !important;
-}
-.beer .dark [class*=blur],
-.beer [class*=blur].dark {
-  background-color: rgb(0 0 0 / 0.5) !important;
-}
-.beer .small-blur {
-  --_blur: 0.5rem;
-}
-.beer .large-blur {
-  --_blur: 1.5rem;
-}
-.beer .shadow {
-  background-color: #00000050;
-}
-.beer :is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
-  background-color: transparent !important;
-}
-.beer .left-shadow {
-  background-image: linear-gradient(to right, black, transparent) !important;
-}
-.beer .right-shadow {
-  background-image: linear-gradient(to left, black, transparent) !important;
-}
-.beer .bottom-shadow {
-  background-image: linear-gradient(to top, black, transparent) !important;
-}
-.beer .top-shadow {
-  background-image: linear-gradient(to bottom, black, transparent) !important;
-}
 .beer .badge {
   --_x: 0;
   --_y: -100%;
@@ -1788,11 +1824,11 @@ body {
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--on-primary);
-  padding: 0 1.5rem;
+  padding: 0 1rem;
   background-color: var(--primary);
   margin: 0 0.5rem;
   border-radius: var(--_size);
-  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
+  transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
   user-select: none;
   gap: 1rem;
   line-height: normal;
@@ -1840,10 +1876,27 @@ body {
 .beer :is(.button, button)[disabled]::after {
   display: none;
 }
-.beer :is(.button, button).fill {
+.beer :is(.button, button):not(.chip).fill {
   background-color: var(--secondary-container) !important;
   color: var(--on-secondary-container) !important;
 }
+.beer :is(.button, button):not(.chip).active {
+  background-color: var(--primary-container);
+  color: var(--on-primary-container);
+}
+.beer :is(.button, button):not(.chip).fill.active {
+  background-color: var(--secondary) !important;
+  color: var(--on-secondary) !important;
+}
+.beer :is(.button, button):not(.chip).border.active {
+  background-color: var(--inverse-surface) !important;
+  color: var(--inverse-on-surface) !important;
+  border-color: var(--inverse-surface) !important;
+}
+.beer :is(.button, button):not(.chip):active,
+.beer :is(.button, button):not(.chip).active {
+  border-radius: 0.5rem !important;
+}
 .beer article {
   --_padding: 1rem;
   box-shadow: var(--elevate1);
@@ -1886,9 +1939,6 @@ body {
   line-height: normal;
   letter-spacing: normal;
 }
-.beer .chip.fill:hover {
-  box-shadow: var(--elevate1);
-}
 .beer .chip.medium {
   --_size: 2.5rem;
 }
@@ -1896,7 +1946,6 @@ body {
   --_size: 3rem;
 }
 .beer .chip.fill {
-  background-color: var(--secondary-container) !important;
   border: none;
 }
 .beer .chip.round.small {
@@ -2769,22 +2818,22 @@ body {
   margin-block: calc(var(--top) + var(--_top)) calc(var(--bottom) + var(--_bottom));
   margin-inline: calc(var(--left) + var(--_left)) calc(var(--right) + var(--_right));
 }
-.beer:has(> nav.top:not(.s, .n, .l)) {
+.beer:has(> nav.top:not(.s, .m, .l)) {
   --_top: 5rem;
 }
-.beer:has(> nav.bottom:not(.s, .n, .l)) {
+.beer:has(> nav.bottom:not(.s, .m, .l)) {
   --_bottom: 5rem;
 }
-.beer:has(> nav.left:not(.s, .n, .l)) {
+.beer:has(> nav.left:not(.s, .m, .l)) {
   --_left: 5rem;
 }
-.beer:has(> nav.right:not(.s, .n, .l)) {
+.beer:has(> nav.right:not(.s, .m, .l)) {
   --_right: 5rem;
 }
-.beer:has(> nav.drawer.left:not(.s, .n, .l)) {
+.beer:has(> nav.drawer.left:not(.s, .m, .l)) {
   --_left: 20rem;
 }
-.beer:has(> nav.drawer.right:not(.s, .n, .l)) {
+.beer:has(> nav.drawer.right:not(.s, .m, .l)) {
   --_right: 20rem;
 }
 .beer :not(main):has(> aside) {
@@ -2944,17 +2993,11 @@ body {
 .beer :is(button, .button, .chip) > :is(i, img, svg) {
   margin: 0 -0.5rem;
 }
-.beer :is(button, .button) > .responsive:first-child {
-  margin-inline-start: -1.5rem;
-}
-.beer :is(button, .button) > .responsive:not(:first-child) {
-  margin-inline-end: -1.5rem;
-}
-.beer .chip > .responsive:first-child {
+.beer :is(button, .button, .chip) > .responsive:first-child {
   margin-inline-start: -1rem;
 }
-.beer .chip > .responsive:not(:first-child) {
-  margin-inline-end: -1rem;
+.beer :is(button, .button, .chip) > .responsive:not(:first-child) {
+  margin-inline-end: -1em;
 }
 .beer :is(.circle, .square, .extend) > .responsive {
   --_size: inherit;
@@ -2995,6 +3038,7 @@ body {
   border-radius: 0.25rem;
   transform: scale(0.8) translateY(120%);
   transition: all var(--speed2), 0s background-color;
+  justify-content: flex-start;
 }
 .beer [dir=rtl] menu {
   inset: auto 0 0 auto;
@@ -3004,7 +3048,6 @@ body {
   white-space: nowrap !important;
 }
 .beer menu.active,
-.beer menu:not([data-ui]):active,
 .beer :not(menu, [data-ui]):focus-within > menu,
 .beer menu > li:hover > menu,
 .beer menu > li > menu:hover {
@@ -3030,7 +3073,7 @@ body {
   align-items: center;
   align-self: normal;
   text-align: start;
-  justify-content: flex-start;
+  justify-content: inherit;
   white-space: nowrap;
   gap: 1rem;
   padding: 0.5rem 1rem;
@@ -3062,7 +3105,8 @@ body {
 }
 .beer [dir=rtl] menu.min.left,
 .beer menu.min.right,
-.beer menu.top {
+.beer menu.top,
+.beer menu.top.right {
   inset: 0 auto auto 0;
 }
 .beer menu.max {
@@ -3137,6 +3181,15 @@ body {
   block-size: 0.0625rem;
   inline-size: auto;
 }
+.beer menu.transparent {
+  margin: 0 -1rem !important;
+  padding: 0.5rem;
+}
+.beer menu.transparent > li {
+  background-color: inherit;
+  box-shadow: none;
+  padding: 0;
+}
 .beer menu > li:nth-last-child(2) {
   --_child: 2;
 }
@@ -3229,19 +3282,19 @@ body {
   white-space: normal;
   flex: none;
 }
-.beer :is(nav, .row).no-space {
-  gap: 0;
+.beer :is(nav, .row).min {
+  display: inline-flex;
 }
-.beer :is(nav, .row).no-space:not(.vertical) > .border + .border {
-  border-inline-start: 0;
+.beer :is(nav, .row, li).no-space {
+  gap: 0;
 }
-.beer :is(nav, .row).no-space.vertical > .border + .border {
-  border-top: 0;
+.beer :is(nav, .row, li).tiny-space {
+  gap: 0.5rem;
 }
-.beer :is(nav, .row).medium-space {
+.beer :is(nav, .row, li).medium-space {
   gap: 1.5rem;
 }
-.beer :is(nav, .row).large-space {
+.beer :is(nav, .row, li).large-space {
   gap: 2rem;
 }
 .beer :is(nav, .row) > .max,
@@ -3257,9 +3310,6 @@ body {
 .beer :is(header, footer) > :is(nav, .row) {
   min-block-size: inherit;
 }
-.beer :is(nav, .row) > .border.no-margin + .border.no-margin {
-  border-inline-start: 0;
-}
 .beer nav:is(.left, .right, .top, .bottom) {
   border: 0;
   position: fixed;
@@ -3306,7 +3356,7 @@ body {
   padding-inline-start: calc(var(--right) + 1rem);
 }
 .beer nav.bottom {
-  block-size: calc(var(--bottom) + 5rem);
+  min-block-size: calc(var(--bottom) + 5rem);
   inset: auto 0 0 0;
   padding-block-start: 0.5rem;
 }
@@ -3437,6 +3487,71 @@ body {
 .beer nav.tabbed > a.active {
   background-color: var(--primary-container);
 }
+.beer nav.toolbar {
+  display: inline-flex;
+  justify-content: space-around;
+  border-radius: 2rem;
+  background-color: var(--surface-container);
+  color: var(--on-surface);
+  padding: 0 1rem;
+  gap: 0.5rem;
+  min-block-size: 4rem;
+  min-inline-size: 4rem;
+}
+.beer nav.toolbar > a {
+  display: inline-flex;
+  gap: 0.5rem;
+  min-inline-size: 2.5rem;
+  min-block-size: 2.5rem;
+  border-radius: 1.75rem;
+}
+.beer nav.toolbar > a:has(> :not(i)) {
+  padding: 0 1rem;
+}
+.beer nav.toolbar > a.active {
+  background-color: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+.beer nav.toolbar.fill {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.beer nav.toolbar.fill > a.active {
+  background-color: var(--surface-container) !important;
+  color: var(--on-surface) !important;
+}
+.beer nav.toolbar.vertical {
+  flex-direction: column !important;
+  min-inline-size: 4rem;
+  padding: 1rem 0;
+  align-self: center;
+  align-items: center !important;
+}
+.beer nav.toolbar.vertical > a {
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+}
+.beer nav.toolbar.vertical > a > :is(div, span):not(.badge, .tooltip) {
+  display: none;
+}
+.beer nav.toolbar.max {
+  border-radius: 0;
+  display: flex;
+}
+.beer nav.group {
+  gap: 0.125rem;
+}
+.beer nav.group > :is(.button, button):not(.chip, .fill, .border).active {
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+.beer nav.group > :is(.button, button):not(.chip, .fill, .border) {
+  background-color: var(--surface-container);
+  color: var(--on-surface-container);
+}
+.beer nav.group > :is(.button, button):not(.chip).active {
+  border-radius: 2rem !important;
+}
 .beer :not(nav) > :is(ul, ol) {
   all: revert;
 }