npm - beercss - Versions diffs - 3.7.14 → 3.9.0 - Mend

beercss 3.7.14 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/README.md +15 -7
package/dist/cdn/beer.css +212 -97
package/dist/cdn/beer.js +56 -3
package/dist/cdn/beer.min.css +1 -1
package/dist/cdn/beer.min.js +1 -1
package/package.json +1 -1
package/src/cdn/beer.css +2 -0
package/src/cdn/beer.ts +2 -0
package/src/cdn/elements/dialogs.css +4 -8
package/src/cdn/elements/dialogs.ts +7 -4
package/src/cdn/elements/expansions.css +5 -10
package/src/cdn/elements/fields.ts +13 -1
package/src/cdn/elements/icons.css +1 -1
package/src/cdn/elements/lists.css +71 -0
package/src/cdn/elements/media.css +1 -1
package/src/cdn/elements/menus.css +54 -45
package/src/cdn/elements/navigations.css +2 -3
package/src/cdn/elements/overlays.css +14 -2
package/src/cdn/elements/selections.css +32 -14
package/src/cdn/elements/sliders.css +1 -1
package/src/cdn/elements/sliders.ts +8 -1
package/src/cdn/elements/snackbars.css +1 -2
package/src/cdn/helpers/forms.css +1 -1
package/src/cdn/helpers/ripples.css +34 -0
package/src/cdn/helpers/ripples.ts +31 -0
package/src/cdn/helpers/spaces.css +4 -4
package/src/cdn/helpers/waves.css +3 -6
package/src/cdn/settings/fonts.css +3 -3
package/src/cdn/settings/globals.css +1 -1

package/README.md CHANGED Viewed

@@ -27,7 +27,15 @@ Beer CSS is an MIT-licensed open source project with its ongoing development mad
 <p><a href="https://opencollective.com/beercss#support"><img src="https://opencollective.com/beercss/backers.svg?avatarHeight=40&button=false" alt="Backers"></a></p>
 ### Github sponsors
-<p><a href="https://github.com/sponsors/beercss"><img src="https://avatars.githubusercontent.com/u/74856856?s=40&v=4" alt="Sponsors"></a></p>
+<p>
+  <a href="https://github.com/sponsors/beercss">
+    <img src="https://avatars.githubusercontent.com/u/74856856?s=40&v=4" alt="Sponsors">
+    <img src="https://avatars.githubusercontent.com/u/419690?s=40&v=4" alt="Sponsors">
+    <img src="https://avatars.githubusercontent.com/u/181576?s=40&v=4 alt="Sponsors">
+    <img src="https://avatars.githubusercontent.com/u/797439?s=40&v=4 alt="Sponsors">
+    <img src="https://avatars.githubusercontent.com/u/3647943?s=40&v=4 alt="Sponsors">
+  </a>
+</p>
 # Why?
@@ -123,19 +131,19 @@ From jsdelivr.net.
 ```html
 // with html
-<link href="https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/beer.min.css" rel="stylesheet" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/beer.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.css" rel="stylesheet" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.js"></script>
 <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
 ```
 ```css
 // with css
-@import "https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/beer.min.css";
+@import "https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.css";
 ```
 ```js
 // with javascript
-import "https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/beer.min.js";
+import "https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.js";
 import "https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js";
 ```
@@ -187,8 +195,8 @@ You can use this html to setup your project. See on [Codepen](https://codepen.io
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <meta name="google" content="notranslate">
     <title>Hello world</title>
-    <link href="https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/beer.min.css" rel="stylesheet">
-    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/beer.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.css" rel="stylesheet">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/beer.min.js"></script>
     <script type="module" src="https://cdn.jsdelivr.net/npm/material-dynamic-colors@1.1.2/dist/cdn/material-dynamic-colors.min.js"></script>
   </head>
   <body class="dark">

package/dist/cdn/beer.css CHANGED Viewed

@@ -1,5 +1,5 @@
 :root {
-  --size: 16px;
+  --size: 1rem;
   --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Noto Sans, Arial, sans-serif;
   --font-icon: "Material Symbols Outlined";
   --speed1: 0.1s;
@@ -101,7 +101,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-outlined.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-outlined.woff2") format("woff2");
 }
 /* rounded icons */
 @font-face {
@@ -111,7 +111,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-rounded.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 }
 /* sharp icons */
 @font-face {
@@ -121,7 +121,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.7.14/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }
 * {
   -webkit-tap-highlight-color: transparent;
@@ -1175,7 +1175,7 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 :is(.circle, .square).round {
   border-radius: 1rem !important;
 }
-.border:not(table, .field) {
+.border:not(table, .field, .list) {
   box-sizing: border-box;
   border: 0.0625rem solid var(--outline);
   background-color: transparent;
@@ -1308,6 +1308,35 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 [dir=rtl] .middle.center {
   transform: translate(50%, -50%);
 }
+.ripple {
+  ---duration: 600ms;
+}
+.fast-ripple {
+  ---duration: 200ms;
+}
+.slow-ripple {
+  ---duration: 1800ms;
+}
+.ripple-js {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+.ripple-js > div {
+  position: absolute;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+  transform: scale(0);
+  animation: to-ripple var(---duration) linear;
+}
+@keyframes to-ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
 .scroll {
   overflow: auto;
 }
@@ -1349,16 +1378,16 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   display: flex;
   white-space: nowrap;
 }
-.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 0.5rem;
 }
-:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip) {
+:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 1rem;
 }
-.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 2rem;
 }
-.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 3rem;
 }
 .responsive {
@@ -1557,10 +1586,7 @@ pre:has(> code){
   direction: ltr;
   text-align: start;
 }
-.wave::after,
-.chip::after,
-:is(.button, button)::after,
-:is(nav.tabbed, .tabs) > a::after {
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -1573,12 +1599,12 @@ pre:has(> code){
   opacity: 0;
   transition: none;
 }
-:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):is(:focus-visible, :hover)::after {
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > 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):active::after {
+:is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):not(.slow-ripple, .ripple, .fast-ripple):active::after {
   background-size: 5000%;
   opacity: 0;
   transition: none;
@@ -1965,9 +1991,9 @@ aside:not(.fixed, .absolute).left {
 }
 dialog {
   display: block;
+  visibility: hidden;
   border: none;
   opacity: 0;
-  visibility: hidden;
   position: fixed;
   box-shadow: var(--elevate2);
   color: var(--on-surface);
@@ -1985,9 +2011,6 @@ dialog {
   transform: translate(-50%, -4rem);
   outline: none;
 }
-dialog::backdrop {
-  display: none;
-}
 dialog.small {
   inline-size: 25%;
   block-size: 25%;
@@ -2000,9 +2023,9 @@ dialog.large {
   inline-size: 75%;
   block-size: 75%;
 }
-dialog:is(.active, [open]) {
-  opacity: 1;
+dialog:is(.active, [open], :popover-open) {
   visibility: visible;
+  opacity: 1;
   transform: translate(-50%, 0);
 }
 dialog.top {
@@ -2060,7 +2083,7 @@ dialog.max {
   transform: translateY(4rem);
   background-color: var(--surface);
 }
-dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
+dialog:is(.active, [open], :popover-open):is(.left, .right, .top, .bottom, .max) {
   transform: translate(0, 0);
 }
 dialog.small:is(.left, .right) {
@@ -2112,18 +2135,15 @@ hr.vertical,
   min-block-size: 1.5rem;
   inline-size: 0.0625rem;
 }
-summary.none {
+summary,
+summary:focus {
   list-style-type: none;
-}
-summary.none::-webkit-details-marker {
-  display: none;
-}
-summary {
   cursor: pointer;
-}
-summary:focus {
   outline: none;
 }
+summary::-webkit-details-marker {
+  display: none;
+}
 .field {
   ---size: 3rem;
   ---start: 1.2rem;
@@ -2657,7 +2677,7 @@ fieldset > legend + * {
 }
 i,
 :is(.checkbox, .radio, .switch) > span::before,
-.icon > span > i {
+:is(.checkbox, .radio, .switch) > span > i {
   ---size: 1.5rem;
   font-family: var(--font-icon);
@@ -2789,10 +2809,72 @@ main ~ footer {
 :is(.large-padding, dialog:not(.left, .right, .top, .bottom)) > :is(header, footer).fixed {
   ---translateY: 1.5rem;
 }
+.list {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  flex: 1;
+}
+.list > li,
+.list > li > details > summary,
+.list > li > a:only-child {
+  all: unset;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-self: normal;
+  text-align: start;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+  min-block-size: 3.5rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  flex: 1;
+}
+.list > li:has(ul, ol, details[open], a:only-child) {
+  padding: 0;
+}
+.list > li > .list {
+  padding: 0 0 0 1rem;
+}
+.list > li > *,
+.list > li > a:only-child > *,
+.list > li > details > summary > *  {
+  margin: 0;
+}
+.list > li > :is(details, .max),
+.list > li > a:only-child > .max,
+.list > li > details > summary > .max {
+  flex: 1;
+}
+.list.border > li:not(:last-child)::before,
+.list.border > li > details[open] > summary::before {
+  content: '';
+  position: absolute;
+  background-color: var(--outline-variant);
+  inset: auto 0 0 0;
+  block-size: 0.0625rem;
+  inline-size: auto;
+}
+.list.no-space > li,
+.list.no-space > li > details > summary {
+  min-block-size: 2.5rem;
+}
+.list.medium-space > li,
+.list.medium-space > li > details > summary {
+  min-block-size: 4.5rem;
+}
+.list.large-space > li,
+.list.large-space > li > details > summary {
+  min-block-size: 5.5rem;
+}
 svg {
   fill: currentcolor;
 }
-:is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .responsive) {
+:is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .square, .responsive) {
   object-fit: cover;
   object-position: center;
   transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
@@ -2906,9 +2988,6 @@ svg {
 .extend.border > .responsive {
   inline-size: 3.375rem;
 }
-menu > li {
-  all: unset;
-}
 menu {
   opacity: 0;
   visibility: hidden;
@@ -2942,8 +3021,8 @@ menu.no-wrap {
 menu.active,
 menu:not([data-ui]):active,
 :not(menu, [data-ui]):focus-within > menu,
-menu > :is(a, li):hover + menu,
-menu > menu:hover {
+menu > li:hover > menu,
+menu > li > menu:hover {
   opacity: 1;
   visibility: visible;
   transform: scale(1) translateY(100%);
@@ -2951,26 +3030,40 @@ menu > menu:hover {
 menu * {
   white-space: inherit !important;
 }
-menu > a,
-menu > li > a {
-  padding: 0.5rem 1rem;
+menu > li,
+menu > li > a:only-child {
+  all: unset;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-self: normal;
+  text-align: start;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+  padding: 0 1rem;
   min-block-size: 3rem;
   flex: 1;
+  margin: 0 !important;
+  cursor: pointer;
 }
-menu > a:not(.row),
-menu > li > a:not(.row) {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-}
-menu > a:is(:hover, :focus, .active),
-menu > li > a:is(:hover, :focus, .active) {
+menu > li:is(:hover, :focus, .active) {
   background-color: var(--active);
 }
+menu > li > :is(.max, a:only-child, .field:only-child),
+menu > li > a:only-child > .max,
+menu > li:has(.field) {
+  flex: 1;
+  padding: 0;
+  margin: 0;
+}
 menu.min {
   inset: 0 0 auto 0;
   transform: none !important;
   border-radius: inherit;
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
 }
 [dir=rtl] menu.min.right,
 menu.min.left {
@@ -2988,6 +3081,8 @@ menu.max {
   min-block-size: auto;
   z-index: 100;
   transform: none !important;
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
 }
 menu.no-wrap:is(.min, .max) {
   min-inline-size: 16rem;
@@ -3000,8 +3095,7 @@ menu.left {
 menu.right {
   inset: auto auto 0 0;
 }
-menu:has(> menu),
-menu > menu {
+menu:has(menu) {
   ---child: 1;
   ---type: 0;
@@ -3011,74 +3105,72 @@ menu > menu {
   min-inline-size: 12rem;
   max-block-size: none;
 }
-menu > menu,
-menu > menu.right,
-[dir=rtl] menu > menu.left {
+menu > li > :is(menu, menu.right),
+[dir=rtl] menu > li > menu.left {
   inset: auto auto calc(3rem * (var(---child) - var(---type))) 100%;
 }
-[dir=rtl] menu > menu,
-[dir=rtl] menu > menu.right,
-menu > menu.left {
+[dir=rtl] menu > li > :is(menu, menu.right),
+menu > li > menu.left {
   inset: auto 100% calc(3rem * (var(---child) - var(---type))) auto;
 }
-menu > :nth-last-child(2) {
+menu > li:nth-last-child(2) {
   ---child: 2;
 }
-menu > :nth-last-child(3) {
+menu > li:nth-last-child(3) {
   ---child: 3;
 }
-menu > :nth-last-child(4) {
+menu > li:nth-last-child(4) {
   ---child: 4;
 }
-menu > :nth-last-child(5) {
+menu > li:nth-last-child(5) {
   ---child: 5;
 }
-menu > :nth-last-child(6) {
+menu > li:nth-last-child(6) {
   ---child: 6;
 }
-menu > :nth-last-child(7) {
+menu > li:nth-last-child(7) {
   ---child: 7;
 }
-menu > :nth-last-child(8) {
+menu > li:nth-last-child(8) {
   ---child: 8;
 }
-menu > :nth-last-child(9) {
+menu > li:nth-last-child(9) {
   ---child: 9;
 }
-menu > :nth-last-child(10) {
+menu > li:nth-last-child(10) {
   ---child: 10;
 }
-menu > :nth-last-child(11) {
+menu > li:nth-last-child(11) {
   ---child: 11;
 }
-menu > :nth-last-of-type(2) {
+menu > li:nth-last-of-type(2) {
   ---type: 1;
 }
-menu > :nth-last-of-type(3) {
+menu > li:nth-last-of-type(3) {
   ---type: 2;
 }
-menu > :nth-last-of-type(4) {
+menu > li:nth-last-of-type(4) {
   ---type: 3;
 }
-menu > :nth-last-of-type(5) {
+menu > li:nth-last-of-type(5) {
   ---type: 4;
 }
-menu > :nth-last-of-type(6) {
+menu > li:nth-last-of-type(6) {
   ---type: 5;
 }
-menu > :nth-last-of-type(7) {
+menu > li:nth-last-of-type(7) {
   ---type: 6;
 }
-menu > :nth-last-of-type(8) {
+menu > li:nth-last-of-type(8) {
   ---type: 7;
 }
-menu > :nth-last-of-type(9) {
+menu > li:nth-last-of-type(9) {
   ---type: 8;
 }
-menu > :nth-last-of-type(10) {
+menu > li:nth-last-of-type(10) {
   ---type: 9;
 }
-menu > :nth-last-of-type(11) {
+menu > li:nth-last-of-type(11) {
   ---type: 10;
 }
 nav > :is(ol, ul),
@@ -3107,7 +3199,7 @@ nav.row {
 nav > :is(ol, ul) > li > :only-child {
   margin: 0;
 }
-:is(nav, .row) > * {
+:is(nav, .row) > :not(ul, ol) {
   margin: 0;
   white-space: normal;
   flex: none;
@@ -3206,8 +3298,7 @@ nav.drawer > header {
 }
 nav.drawer > :is(a, label),
 nav.drawer > :is(ol, ul) > li > :is(a, label),
-a.row.wave,
-nav.row.wave {
+:is(a.row, nav.row):is(.wave, .slow-ripple, .ripple, .fast-ripple) {
   padding: 0.75rem;
   font-size: inherit;
 }
@@ -3325,7 +3416,9 @@ nav.tabbed > a.active {
     justify-content: space-around;
   }
 }
-.overlay {
+.overlay,
+dialog::backdrop {
+  display: block !important;
   opacity: 0;
   visibility: hidden;
   position: fixed;
@@ -3335,10 +3428,18 @@ nav.tabbed > a.active {
   z-index: 100;
   transition: all var(--speed3), 0s background-color;
 }
-.overlay.active {
+.overlay.active,
+dialog:popover-open::backdrop {
   opacity: 1;
   visibility: visible;
 }
+.overlay + dialog::backdrop,
+.snackbar::backdrop {
+  display: none;
+}
+[popover] {
+  border: 0;
+}
 .page {
   ---transform: translate(0, 0);
@@ -3555,10 +3656,20 @@ progress.max + * {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
+  ---size: 1.5rem;
+}
+:is(.checkbox, .radio, .switch).small {
+  ---size: 1rem;
+}
+:is(.checkbox, .radio, .switch).large {
+  ---size: 2rem;
+}
+:is(.checkbox, .radio, .switch).extra {
+  ---size: 2.5rem;
 }
 :is(.checkbox, .radio) > input {
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
+  inline-size: var(---size);
+  block-size: var(---size);
   opacity: 0;
 }
 .switch > input {
@@ -3576,17 +3687,18 @@ progress.max + * {
   padding-inline-start: 0.25rem;
 }
 :is(.checkbox, .radio, .switch) > span::before,
-.icon > span > i,
+:is(.checkbox, .radio, .switch) > span > i,
 :is(.checkbox, .radio) > span::after {
+  ---size: inherit;
   content: '';
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
+  inline-size: var(---size);
+  block-size: var(---size);
   box-sizing: border-box;
   margin: 0 auto;
   outline: none;
   color: var(--primary);
   position: absolute;
-  inset: auto auto auto -1.5rem;
+  inset: auto auto auto calc(var(---size) * -1);
   border-radius: 50%;
   user-select: none;
   z-index: 1;
@@ -3600,9 +3712,10 @@ progress.max + * {
   justify-content: center;
   border-radius: 50%;
   transition: all var(--speed2);
-  font-size: 1rem;
+  font-size: calc(var(---size) - 0.5rem);
   user-select: none;
-  min-inline-size: auto;
+  min-inline-size: var(---size);
+  min-block-size: var(---size);
   content: "";
   color: var(--surface-variant);
   background-color: var(--outline);
@@ -3670,11 +3783,16 @@ progress.max + * {
   content: "check";
   color: var(--primary);
   background-color: var(--on-primary);
-}
-.switch > input:checked + span::before,
-.switch.icon > input:checked + span > i {
   transform: translate(-1.75rem, -50%) scale(1);
 }
+.switch > input:active:not(:disabled) + span::before,
+.switch.icon > input:active:not(:disabled) + span > i {
+  transform: translate(-3rem, -50%) scale(1.2);
+}
+.switch > input:active:checked:not(:disabled) + span::before,
+.switch.icon > input:active:checked:not(:disabled) + span > i {
+  transform: translate(-1.75rem, -50%) scale(1.2);
+}
 :is(.checkbox, .radio, .switch) > input:disabled + span {
   opacity: 0.5;
   cursor: not-allowed;
@@ -3689,8 +3807,6 @@ progress.max + * {
   inline-size: 3.25rem;
   block-size: 2rem;
   border-radius: 2rem;
-}
-.switch > span::after {
   transform: translate(-3.25rem, -50%);
 }
 .field > :is(nav, .row) {
@@ -3838,7 +3954,7 @@ progress.max + * {
   inset: calc(50% - 0.5rem) var(---end) auto var(---start);
   clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
 }
-.slider > input + input ~ span {
+.slider > input[type=range] + input[type=range] ~ span {
   border-radius: 0;
   clip-path: polygon(0.5rem 0, max(0.5rem, calc(100% - 0.5rem)) 0, max(0.5rem, calc(100% - 0.5rem)) 100%, 0.5rem 100%);
 }
@@ -3969,7 +4085,6 @@ progress.max + * {
   color: var(--inverse-on-surface);
   background-color: var(--inverse-surface);
   padding: 1rem;
-  opacity: 1;
   cursor: pointer;
   text-align: start;
   align-items: center;
@@ -3982,7 +4097,7 @@ progress.max + * {
 .snackbar.top {
   inset: 6rem auto auto 50%;
 }
-.snackbar.active {
+.snackbar:is(.active, :popover-open) {
   visibility: visible;
   transform: translate(-50%, 0);
   opacity: 1;