beercss 3.10.8 → 3.11.1

package/src/cdn/elements/menus.css

@@ -20,6 +20,7 @@ menu {
   border-radius: 0.25rem;
   transform: scale(0.8) translateY(120%);
   transition: all var(--speed2), 0s background-color;
+  justify-content: flex-start;
 }
 
 [dir=rtl] menu {
@@ -32,7 +33,6 @@ menu.no-wrap {
 }
 
 menu.active,
-menu:not([data-ui]):active,
 :not(menu, [data-ui]):focus-within > menu,
 menu > li:hover > menu,
 menu > li > menu:hover {
@@ -61,7 +61,7 @@ menu > li > a:only-child {
   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;
@@ -98,7 +98,8 @@ menu.top.left {
 
 [dir=rtl] menu.min.left,
 menu.min.right,
-menu.top {
+menu.top,
+menu.top.right {
   inset: 0 auto auto 0;
 }
 
@@ -188,6 +189,17 @@ menu.border > li:not(:last-child)::before {
   inline-size: auto;
 }
 
+menu.transparent {
+  margin: 0 -1rem !important;
+  padding: 0.5rem;
+}
+
+menu.transparent > li {
+  background-color: inherit;
+  box-shadow: none;
+  padding: 0;
+}
+
 menu > li:nth-last-child(2) {
   --_child: 2;
 }

package/src/cdn/elements/navigations.css

@@ -35,23 +35,23 @@ nav > :is(ol, ul) > li > :only-child {
   flex: none;
 }
 
-:is(nav, .row).no-space {
-  gap: 0;
+:is(nav, .row).min {
+  display: inline-flex;
 }
 
-:is(nav, .row).no-space:not(.vertical) > .border + .border {
-  border-inline-start: 0;
+:is(nav, .row, li).no-space {
+  gap: 0;
 }
 
-:is(nav, .row).no-space.vertical > .border + .border {
-  border-top: 0;
+:is(nav, .row, li).tiny-space {
+  gap: 0.5rem;
 }
 
-:is(nav, .row).medium-space {
+:is(nav, .row, li).medium-space {
   gap: 1.5rem;
 }
 
-:is(nav, .row).large-space {
+:is(nav, .row, li).large-space {
   gap: 2rem;
 }
 
@@ -71,10 +71,6 @@ nav.drawer > :is(ol, ul) > li > :is(a, label) > .max {
   min-block-size: inherit;
 }
 
-:is(nav, .row) > .border.no-margin + .border.no-margin {
-  border-inline-start: 0;
-}
-
 nav:is(.left, .right, .top, .bottom) {
   border: 0;
   position: fixed;
@@ -129,7 +125,7 @@ nav.right,
 }
 
 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;
 }
@@ -291,6 +287,85 @@ nav.tabbed > a.active {
   background-color: var(--primary-container);
 }
 
+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;
+}
+
+nav.toolbar > a {
+  display: inline-flex;
+  gap: 0.5rem;
+  min-inline-size: 2.5rem;
+  min-block-size: 2.5rem;
+  border-radius: 1.75rem;
+}
+
+nav.toolbar > a:has(> :not(i)) {
+  padding: 0 1rem;
+}
+
+nav.toolbar > a.active {
+  background-color: var(--secondary-container);
+  color: var(--on-secondary-container);
+}
+
+nav.toolbar.fill {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+
+nav.toolbar.fill > a.active {
+  background-color: var(--surface-container) !important;
+  color: var(--on-surface) !important;
+}
+
+nav.toolbar.vertical {
+  flex-direction: column !important;
+  min-inline-size: 4rem;
+  padding: 1rem 0;
+  align-self: center;
+  align-items: center !important;
+}
+
+nav.toolbar.vertical > a {
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+}
+
+nav.toolbar.vertical > a > :is(div, span):not(.badge, .tooltip) {
+  display: none;
+}
+
+nav.toolbar.max {
+  border-radius: 0;
+  display: flex;
+}
+
+nav.group {
+  gap: 0.125rem;
+}
+
+nav.group > :is(.button, button):not(.chip, .fill, .border).active {
+  background-color: var(--primary);
+  color: var(--on-primary);
+}
+
+nav.group > :is(.button, button):not(.chip, .fill, .border) {
+  background-color: var(--surface-container);
+  color: var(--on-surface-container);
+}
+
+nav.group > :is(.button, button):not(.chip).active {
+  border-radius: 2rem !important;
+}
+
 :not(nav) > :is(ul, ol) {
   all: revert;
 }

package/src/cdn/helpers/forms.css

@@ -17,7 +17,7 @@
 .bottom-round,
 .left-round,
 .right-round {
-  border-radius: 0 !important;
+  border-radius: 0.5rem !important;
 }
 
 .top-round {
@@ -68,3 +68,7 @@
 .no-border {
   border-color: transparent !important;
 }
+
+.border:not(.extend, .circle, .square, .badge) {
+  box-sizing: content-box;
+}

package/src/cdn/helpers/reset.css

@@ -71,4 +71,8 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 :is(a, button, .button, .chip):focus-visible {
   outline: 0.125rem solid var(--primary);
   outline-offset: 0.25rem;
+}
+
+:is(nav, .row, li).group > :focus-visible {
+  outline-offset: 0;
 }

package/src/cdn/helpers/theme.css

@@ -184,3 +184,39 @@
   background-color: var(--surface-variant) !important;
   color: var(--on-surface-variant) !important;
 }
+
+.primary-container > .active,
+.primary-container.active {
+  background-color: var(--primary) !important;
+  color: var(--on-primary) !important;
+}
+
+.secondary-container > .active,
+.secondary-container.active {
+  background-color: var(--secondary) !important;
+  color: var(--on-secondary) !important;
+}
+
+.tertiary-container > .active,
+.tertiary-container.active {
+  background-color: var(--tertiary) !important;
+  color: var(--on-tertiary) !important;
+}
+
+.primary > .active,
+.primary.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+
+.secondary > .active,
+.secondary.active {
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
+}
+
+.tertiary > .active,
+.tertiary.active {
+  background-color: var(--tertiary-container) !important;
+  color: var(--on-tertiary-container) !important;
+}

package/src/cdn/helpers/waves.css

@@ -1,4 +1,4 @@
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a, .toolbar > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -12,13 +12,13 @@
   transition: none;
 }
 
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):is(:focus-visible, :hover)::after {
+: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;
 }
 
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {
+: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;

package/src/cdn/settings/fonts.css

@@ -6,7 +6,7 @@
   font-display: block;
   src:
     url("../material-symbols-outlined.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.8/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 */
@@ -17,7 +17,7 @@
   font-display: block;
   src:
     url("../material-symbols-rounded.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.8/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 */
@@ -28,7 +28,7 @@
   font-display: block;
   src:
     url("../material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.8/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 */
@@ -39,5 +39,5 @@
   font-display: block;
   src:
     url("../material-symbols-subset.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.10.8/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");
 }

package/src/cdn/utils.ts

@@ -116,6 +116,6 @@ export function updateAllClickable(element: Element) {
 
   const as = queryAll("a", container);
   for(let i=0; i<as.length; i++) removeClass(as[i], "active");
-  addClass(element, "active");
+  if (!hasTag(element, "button") && !hasClass(element, "button") && !hasClass(element, "chip")) addClass(element, "active");
 }