beercss 4.0.2 → 4.0.3

package/src/cdn/elements/menus.css

@@ -17,11 +17,14 @@ menu {
   color: var(--on-surface);
   line-height: normal;
   text-align: start;
-  border-radius: 0.25rem;
+  border-radius: 1rem;
   transform: scale(0.8) translateY(120%);
-  transition: all var(--speed2), 0s background-color;
+  transition: all var(--speed2) var(--speed2), background-color 0s;
   justify-content: flex-start;
-  padding: 0.5rem 0;
+  padding: 0.125rem 0.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
 }
 
 [dir=rtl] menu {
@@ -34,21 +37,27 @@ menu.no-wrap {
 }
 
 menu.active,
-:not(menu, [data-ui]):focus-within > menu,
+:not([data-ui]):focus-within > menu,
 menu > li:hover > menu,
 menu > li > menu:hover {
   opacity: 1;
   visibility: visible;
   transform: scale(1) translateY(100%);
+  transition: all var(--speed2), background-color 0s;
 }
 
-menu.active.top,
-:not(menu, [data-ui]):focus-within > menu.top,
+menu.top.active,
+:not([data-ui]):focus-within > menu.top,
 menu > li:hover > menu.top,
 menu > li > menu.top:hover {
   transform: scale(1) translateY(-100%);
 }
 
+menu:is(.min, .max).active,
+:not([data-ui]):focus-within > menu:is(.min, .max) {
+  transform: scale(1);
+}
+
 menu * {
   white-space: inherit !important;
 }
@@ -66,14 +75,40 @@ menu > li > a:only-child {
   white-space: nowrap;
   gap: 1rem;
   padding: 0.5rem 1rem;
-  min-block-size: 3rem;
+  min-block-size: 2.75rem;
   flex: 1;
   margin: 0 !important;
   cursor: pointer;
+  border-radius: 0.25rem;
+  transition: border-radius var(--speed2);
+}
+
+menu > li:first-child {
+  border-top-left-radius: inherit; 
+  border-top-right-radius: inherit;
+}
+
+menu > li:last-child {
+  border-bottom-left-radius: inherit; 
+  border-bottom-right-radius: inherit;
+}
+
+menu > li:not(.none):hover {
+  background-color: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+menu > li.active {
+  background-color: var(--tertiary-container);
+  color: var(--on-tertiary-container);
+}
+
+menu > li:is(.active, :active) {
+  border-radius: inherit;
 }
 
-menu > li:is(:hover, :focus, .active) {
-  background-color: var(--active);
+menu > li.none {
+  background: none;
+  border-radius: 0;
 }
 
 menu > li > :is(.max, .field),
@@ -86,10 +121,7 @@ menu > li:has(.field, a:only-child) {
 
 menu.min {
   inset: 0 0 auto 0;
-  transform: none !important;
-  background-color: var(--surface-variant) !important;
-  color: var(--on-surface-variant) !important;
-  padding: 0;
+  transform: scale(0.8);
 }
 
 [dir=rtl] menu.min.right,
@@ -112,12 +144,14 @@ menu.max {
   max-block-size: none;
   min-block-size: auto;
   z-index: 100;
-  transform: none !important;
-  background-color: var(--surface-variant) !important;
-  color: var(--on-surface-variant) !important;
+  transform: scale(0.8);
   border-radius: 0;
 }
 
+menu.max > :is(li, li.none) {
+  flex: none;
+}
+
 menu.no-wrap:is(.min, .max) {
   min-inline-size: 16rem;
 }
@@ -182,15 +216,6 @@ menu.large-space > li {
   min-block-size: 4rem;
 }
 
-menu.border > li:not(:last-child)::before {
-  content: '';
-  position: absolute;
-  background-color: var(--outline-variant);
-  inset: auto 0 0 0;
-  block-size: 0.0625rem;
-  inline-size: auto;
-}
-
 menu.transparent {
   margin: 0 -1rem !important;
   padding: 0.5rem;
@@ -292,4 +317,4 @@ menu > li:nth-last-of-type(11) {
   :not(menu, [data-ui]):hover > menu.top {
     transform: scale(1) translateY(-100%);
   }
-}
+}

package/src/cdn/elements/navigations.css

@@ -131,6 +131,11 @@ nav:is(.top, .bottom) > header {
 
 nav > header > * {
   margin: 0;
+  transition: none;
+}
+
+nav.max > header > * {
+  transition: all var(--speed1);
 }
 
 nav > header > .extend:hover {
@@ -206,7 +211,6 @@ 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 {
   padding: 0.25rem 1rem;
   border-radius: 2rem;
-  transition: padding var(--speed1) linear;
   margin: 0 auto;
 }
 
@@ -221,6 +225,11 @@ nav.max:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a:not(.button, .ch
   font-size: inherit;
 }
 
+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) {
+  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) {
   gap: 0.25rem;
@@ -236,6 +245,10 @@ nav:is(.left, .right, .top, .bottom):not(.max) > :is(ol, ul) > li > a.active:not
   color: var(--on-secondary-container);
 }
 
+nav.vertical > :is(ol, ul) {
+  align-items: normal;
+}
+
 :is(nav, .row):is(.left-align, .top-align, .vertical) {
   justify-content: flex-start;
 }
@@ -411,48 +424,6 @@ nav.split > :is(.button, button):not(.chip, .fill, .border) {
   color: var(--on-primary);
 }
 
-nav.group.primary-container > button,
-nav:is(.max, .toolbar, .tabbed, .group).primary > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).primary > a.active:not(.button, .chip) > i {
-  background-color: var(--primary-container) !important;
-  color: var(--on-primary-container) !important;
-}
-
-nav.group.primary > button,
-nav:is(.max, .toolbar, .tabbed, .group).primary-container > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).primary-container > a.active:not(.button, .chip) > i {
-  background-color: var(--primary) !important;
-  color: var(--on-primary) !important;
-}
-
-nav.group.secondary-container > button,
-nav:is(.max, .toolbar, .tabbed, .group).secondary > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).secondary > a.active:not(.button, .chip) > i {
-  background-color: var(--secondary-container) !important;
-  color: var(--on-secondary-container) !important;
-}
-
-nav.group.secondary > button,
-nav:is(.max, .toolbar, .tabbed, .group).secondary-container > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).secondary-container > a.active:not(.button, .chip) > i {
-  background-color: var(--secondary) !important;
-  color: var(--on-secondary) !important;
-}
-
-nav.group.tertiary-container > button,
-nav:is(.max, .toolbar, .tabbed, .group).tertiary > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).tertiary > a.active:not(.button, .chip) > i {
-  background-color: var(--tertiary-container) !important;
-  color: var(--on-tertiary-container) !important;
-}
-
-nav.group.tertiary > button,
-nav:is(.max, .toolbar, .tabbed, .group).tertiary-container > :is(button, a).active,
-nav:not(.max, .toolbar, .tabbed, .group).tertiary-container > a.active:not(.button, .chip) > i {
-  background-color: var(--tertiary) !important;
-  color: var(--on-tertiary) !important;
-}
-
 @media only screen and (max-width: 600px) {
   nav.top,
   nav.bottom {

package/src/cdn/settings/fonts.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.2/dist/cdn/material-symbols-outlined.woff2) format("woff2");
+  src: url(../fonts/material-symbols-outlined.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.3/dist/cdn/material-symbols-outlined.woff2) format("woff2");
 }
 
 /* rounded icons */
@@ -13,7 +13,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.2/dist/cdn/material-symbols-rounded.woff2) format("woff2");
+  src: url(../fonts/material-symbols-rounded.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.3/dist/cdn/material-symbols-rounded.woff2) format("woff2");
 }
 
 /* sharp icons */
@@ -22,7 +22,7 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.2/dist/cdn/material-symbols-sharp.woff2) format("woff2");
+  src: url(../fonts/material-symbols-sharp.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.3/dist/cdn/material-symbols-sharp.woff2) format("woff2");
 }
 
 /* subset of only required icons */
@@ -31,5 +31,5 @@
   font-style: normal;
   font-weight: 400;
   font-display: swap;
-  src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.2/dist/cdn/material-symbols-subset.woff2) format("woff2");
+  src: url(../fonts/material-symbols-subset.woff2) format("woff2"), url(https://cdn.jsdelivr.net/npm/beercss@4.0.3/dist/cdn/material-symbols-subset.woff2) format("woff2");
 }

package/src/cdn/settings/theme.css

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