beercss 3.11.4 → 3.11.5

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.11.4/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.11.5/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.11.4/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.11.5/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.11.4/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.11.5/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.11.4/dist/cdn/material-symbols-subset.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.11.5/dist/cdn/material-symbols-subset.woff2") format("woff2");
 }
 .beer * {
   -webkit-tap-highlight-color: transparent;
@@ -348,36 +348,6 @@ 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;
@@ -3424,6 +3394,10 @@ body {
   padding: 0.25rem 1rem;
   font-variation-settings: "FILL" 1;
 }
+.beer nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip).active {
+  background: none !important;
+  color: currentColor !important;
+}
 .beer :is(nav, .row):is(.left-align, .top-align, .vertical) {
   justify-content: flex-start;
 }
@@ -3533,6 +3507,7 @@ body {
 }
 .beer nav.group {
   gap: 0.125rem;
+  background: none !important;
 }
 .beer nav.group > :is(.button, button):not(.chip, .fill, .border).active {
   background-color: var(--primary);
@@ -3552,6 +3527,48 @@ body {
   outline: 0.125rem solid var(--primary);
   outline-offset: -0.125rem;
 }
+.beer nav.primary > :is(a, button, .button),
+.beer nav.primary-container > a:is(:hover, :focus, .active) > i,
+.beer nav.primary-container > :is(a, button, .button).active,
+.beer :is(a, button, .button):not(.extend).primary-container.active {
+  background-color: var(--primary) !important;
+  color: var(--on-primary) !important;
+}
+.beer nav.primary-container > :is(a, button, .button),
+.beer nav.primary > a:is(:hover, :focus, .active) > i,
+.beer nav.primary > :is(a, button, .button).active,
+.beer :is(a, button, .button):not(.extend).primary.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.beer nav.secondary > :is(a, button, .button),
+.beer nav.secondary-container > a:is(:hover, :focus, .active) > i,
+.beer nav.secondary-container > :is(a, button, .button).active,
+.beer :is(a, button, .button):not(.extend).secondary-container.active {
+  background-color: var(--secondary) !important;
+  color: var(--on-secondary) !important;
+}
+.beer nav.secondary-container > :is(a, button, .button),
+.beer nav.secondary > a:is(:hover, :focus, .active) > i,
+.beer nav.secondary > :is(a, button, .button).active,
+.beer :is(a, button, .button):not(.extend).secondary.active {
+  background-color: var(--secondary-container) !important;
+  color: var(--on-secondary-container) !important;
+}
+.beer nav.tertiary > :is(a, button, .button),
+.beer nav.tertiary-container > a:is(:hover, :focus, .active) > i,
+.beer nav.tertiary-container > :is(a, button, .button).active,
+.beer :is(a, button, .button):not(.extend).tertiary-container.active {
+  background-color: var(--tertiary) !important;
+  color: var(--on-tertiary) !important;
+}
+.beer nav.tertiary-container > :is(a, button, .button),
+.beer nav.tertiary > a:is(:hover, :focus, .active) > i,
+.beer nav.tertiary > :is(a, button, .button).active,
+.beer :is(a, button, .button):not(.extend).tertiary.active {
+  background-color: var(--tertiary-container) !important;
+  color: var(--on-tertiary-container) !important;
+}
 @media only screen and (max-width: 600px) {
   .beer nav.top,
   .beer nav.bottom {
@@ -3988,13 +4005,15 @@ body {
   --_end: 0%;
   --_value1: "";
   --_value2: "";
+  --_track: 1rem;
+  --_thumb: max(2.5rem, calc(var(--_track) + 0.5rem));
   display: flex;
   align-items: center !important;
   inline-size: auto;
-  block-size: 1.25rem;
-  margin: 1.125rem;
+  block-size: var(--thumb);
   flex: none;
   direction: ltr;
+  margin: 0 1.25rem;
 }
 .beer [dir=rtl] .slider {
   transform: scaleX(-1);
@@ -4006,14 +4025,20 @@ body {
   transform: rotate(-90deg);
   inline-size: 100%;
 }
+.beer .slider.tiny {
+  --_track: 1rem;
+}
 .beer .slider.small {
-  inline-size: 4rem;
+  --_track: 1.5rem;
 }
 .beer .slider.medium {
-  inline-size: 8rem;
+  --_track: 2.5rem;
 }
 .beer .slider.large {
-  inline-size: 12rem;
+  --_track: 3.5rem;
+}
+.beer .slider.extra {
+  --_track: 6rem;
 }
 .beer .slider > input {
   appearance: none;
@@ -4022,7 +4047,7 @@ body {
   outline: none;
   pointer-events: none;
   inline-size: 100%;
-  block-size: 1rem;
+  block-size: var(--_track);
   background: none;
   z-index: 1;
   padding: 0;
@@ -4041,12 +4066,13 @@ body {
   border: none;
   outline: none;
   pointer-events: all;
-  block-size: 2.75rem;
+  block-size: var(--_thumb);
   inline-size: 0.25rem;
   border-radius: 0.25rem;
   background: var(--primary);
   cursor: grab;
   margin: 0;
+  z-index: 1;
 }
 .beer .slider > input::-webkit-slider-thumb:active {
   cursor: grabbing;
@@ -4078,23 +4104,24 @@ body {
   opacity: 1;
 }
 .beer .slider > input:disabled::-webkit-slider-thumb {
-  background: #9E9E9E;
+  background: var(--outline);
   cursor: not-allowed;
 }
 .beer .slider > input:disabled::-moz-range-thumb {
-  background: #9E9E9E;
+  background: var(--outline);
   cursor: not-allowed;
 }
 .beer .slider > input:disabled ~ span {
-  background: #9E9E9E;
+  background: var(--outline);
 }
 .beer .slider > span {
   position: absolute;
-  block-size: 1rem;
+  block-size: var(--_track);
   border-radius: 1rem 0 0 1rem;
   background: var(--primary);
+  color: var(--on-primary);
   z-index: 0;
-  inset: calc(50% - 0.5rem) var(--_end) auto var(--_start);
+  inset: calc(50% - (var(--_track) / 2)) var(--_end) auto var(--_start);
   clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
 }
 .beer .slider > input[type=range] + input[type=range] ~ span {
@@ -4108,13 +4135,29 @@ body {
   content: "";
   position: absolute;
   inline-size: 100%;
-  block-size: 1rem;
+  block-size: var(--_track);
   border-radius: 1rem;
-  background: var(--primary-container);
+  background: var(--secondary-container);
   clip-path: polygon(calc(var(--_start) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start) - 0.5rem) 100%, calc(var(--_start) - 0.5rem) 0, calc(100% - var(--_end) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end) + 0.5rem) 100%, calc(100% - var(--_end) + 0.5rem) 0);
 }
 .beer .slider:has(> [disabled])::before {
-  background: var(--active);
+  background: var(--outline-variant);
+}
+.beer .slider:has([disabled]) {
+  opacity: 0.62;
+}
+.beer .slider > span > i {
+  position: absolute;
+  block-size: auto;
+  inset: 0 auto 0 0.5rem;
+  color: currentColor;
+  z-index: 1;
+}
+.beer .slider:not(.medium, .large, .extra) > span > i {
+  display: none;
+}
+.beer .slider.vertical > i {
+  transform: rotate(90deg);
 }
 .beer .slider > .tooltip {
   visibility: hidden !important;
@@ -4147,7 +4190,14 @@ body {
   visibility: visible !important;
 }
 .beer .slider.vertical > .tooltip {
-  display: none;
+  inset-block-start: auto !important;
+  margin-block-start: calc(-1 * var(--_thumb)) !important;
+  block-size: 2.5rem;
+  inline-size: 2.5rem;
+  transform: rotate(90deg) translate(-75%, 50%) !important;
+}
+.beer .slider.vertical > .tooltip + .tooltip {
+  transform: rotate(90deg) translate(-75%, -50%) !important;
 }
 .beer :is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
   flex: auto;
@@ -4192,6 +4242,7 @@ body {
   inset: 0 var(--_end) 0 var(--_start);
   clip-path: none;
   background: currentcolor;
+  color: inherit;
   border-radius: 0;
 }
 .beer .slider.max.vertical > span {