beercss 3.9.7 → 3.10.1

package/dist/cdn/beer.css

@@ -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.9.7/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.1/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.9.7/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.1/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.9.7/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.1/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }
 /* subset of only required icons */
 @font-face {
@@ -131,7 +131,7 @@ body.dark {
   font-display: block;
   src:
     url("material-symbols-subset.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-subset.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.1/dist/cdn/material-symbols-subset.woff2") format("woff2");
 }
 * {
   -webkit-tap-highlight-color: transparent;
@@ -1108,27 +1108,15 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 .large-elevate {
   box-shadow: var(--elevate3) !important;
 }
-.round {
-  border-radius: var(---round);
-}
-.small-round,
-.medium-round,
-.large-round {
-  border-radius: var(---round) !important;
-}
-.top-round,
-.bottom-round,
-.left-round,
-.right-round,
-.medium-round,
-.round {
-  ---round: 2rem;
+[class*=round] {
+  --_round: 2rem;
+  border-radius: var(--_round) !important;
 }
 .small-round {
-  ---round: 0.5rem;
+  --_round: 0.5rem;
 }
 .large-round {
-  ---round: 3.5rem;
+  --_round: 3.5rem;
 }
 .no-round,
 .square,
@@ -1139,49 +1127,32 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   border-radius: 0 !important;
 }
 .top-round {
-  border-start-start-radius: var(---round) !important;
-  border-start-end-radius: var(---round) !important;
+  border-start-start-radius: var(--_round) !important;
+  border-start-end-radius: var(--_round) !important;
 }
 .bottom-round {
-  border-end-end-radius: var(---round) !important;
-  border-end-start-radius: var(---round) !important;
+  border-end-end-radius: var(--_round) !important;
+  border-end-start-radius: var(--_round) !important;
 }
 .left-round {
-  border-start-start-radius: var(---round) !important;
-  border-end-start-radius: var(---round) !important;
+  border-start-start-radius: var(--_round) !important;
+  border-end-start-radius: var(--_round) !important;
 }
 .right-round {
-  border-start-end-radius: var(---round) !important;
-  border-end-end-radius: var(---round) !important;
+  border-start-end-radius: var(--_round) !important;
+  border-end-end-radius: var(--_round) !important;
 }
-.circle {
+.circle:not(.extend) {
   border-radius: 50%;
 }
-:is(button, .button, .chip).circle {
-  border-radius: 2.5rem;
-}
-:is(.circle, .square):not(i, img, video, svg),
-:is(.circle, .square).chip.medium {
-  block-size: 2.5rem;
-  inline-size: 2.5rem;
+:is(.circle, .square):is(button, .button, .chip) {
   padding: 0;
+  block-size: var(--_size);
+  inline-size: var(--_size);
 }
 :is(.circle, .square) > span {
   display: none;
 }
-:is(.circle, .square).small:not(i, img, video, svg),
-:is(.circle, .square).chip {
-  block-size: 2rem;
-  inline-size: 2rem;
-}
-:is(.circle, .square).large:not(i, img, video, svg) {
-  block-size: 3rem;
-  inline-size: 3rem;
-}
-:is(.circle, .square).extra:not(i, img, video, svg) {
-  block-size: 3.5rem;
-  inline-size: 3.5rem;
-}
 :is(.circle, .square).round {
   border-radius: 1rem !important;
 }
@@ -1194,45 +1165,42 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
 .no-border {
   border-color: transparent !important;
 }
-:is(nav, .row, dialog.max, header.fixed, footer.fixed, menu > a, menu.max, table, .tabs):not(.round) {
-  border-radius: 0;
-}
 [class*=margin]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
-  margin: var(---margin) !important;
+  margin: var(--_margin) !important;
 }
 [class*=margin] {
-  ---margin: 1rem;
+  --_margin: 1rem;
 }
 .no-margin {
-  ---margin: 0;
+  --_margin: 0;
 }
 .auto-margin {
-  ---margin: auto;
+  --_margin: auto;
 }
 .tiny-margin {
-  ---margin: 0.25rem;
+  --_margin: 0.25rem;
 }
 .small-margin {
-  ---margin: 0.5rem;
+  --_margin: 0.5rem;
 }
 .large-margin {
-  ---margin: 1.5rem;
+  --_margin: 1.5rem;
 }
 .left-margin,
 .horizontal-margin {
-  margin-inline-start: var(---margin) !important;
+  margin-inline-start: var(--_margin) !important;
 }
 .right-margin,
 .horizontal-margin {
-  margin-inline-end: var(---margin) !important;
+  margin-inline-end: var(--_margin) !important;
 }
 .top-margin,
 .vertical-margin {
-  margin-block-start: var(---margin) !important;
+  margin-block-start: var(--_margin) !important;
 }
 .bottom-margin,
 .vertical-margin {
-  margin-block-end: var(---margin) !important;
+  margin-block-end: var(--_margin) !important;
 }
 .no-opacity {
   opacity: 1 !important;
@@ -1250,38 +1218,38 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   opacity: 0.25 !important;
 }
 [class*=padding]:not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
-  padding: var(---padding) !important;
+  padding: var(--_padding) !important;
 }
 [class*=padding] {
-  ---padding: 1rem;
+  --_padding: 1rem;
 }
 .no-padding {
-  ---padding: 0;
+  --_padding: 0 !important;
 }
 .tiny-padding {
-  ---padding: 0.25rem;
+  --_padding: 0.25rem !important;
 }
 .small-padding {
-  ---padding: 0.5rem;
+  --_padding: 0.5rem !important;
 }
 .large-padding {
-  ---padding: 1.5rem;
+  --_padding: 1.5rem !important;
 }
 .left-padding,
 .horizontal-padding {
-  padding-inline-start: var(---padding) !important;
+  padding-inline-start: var(--_padding) !important;
 }
 .right-padding,
 .horizontal-padding {
-  padding-inline-end: var(---padding) !important;
+  padding-inline-end: var(--_padding) !important;
 }
 .top-padding,
 .vertical-padding {
-  padding-block-start: var(---padding) !important;
+  padding-block-start: var(--_padding) !important;
 }
 .bottom-padding,
 .vertical-padding {
-  padding-block-end: var(---padding) !important;
+  padding-block-end: var(--_padding) !important;
 }
 .front {
   z-index: 10 !important;
@@ -1319,13 +1287,13 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   transform: translate(50%, -50%);
 }
 .ripple {
-  ---duration: 600ms;
+  --_duration: 600ms;
 }
 .fast-ripple {
-  ---duration: 200ms;
+  --_duration: 200ms;
 }
 .slow-ripple {
-  ---duration: 1800ms;
+  --_duration: 1800ms;
 }
 .ripple-js {
   position: absolute;
@@ -1339,7 +1307,7 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   background: currentColor;
   opacity: 0.3;
   transform: scale(0);
-  animation: to-ripple var(---duration) linear;
+  animation: to-ripple var(--_duration) linear;
 }
 @keyframes to-ripple {
   to {
@@ -1388,16 +1356,16 @@ body :is(:hover,:focus)::-webkit-scrollbar-thumb {
   display: flex;
   white-space: nowrap;
 }
-.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list, menu) {
+.tiny-space:not(nav, .row, .grid, table, .tooltip, .list, menu) {
   block-size: 0.5rem;
 }
-:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip, .list, menu) {
+:is(.space, .small-space):not(nav, .row, .grid, table, .tooltip, .list, menu) {
   block-size: 1rem;
 }
-.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list, menu) {
+.medium-space:not(nav, .row, .grid, table, .tooltip, .list, menu) {
   block-size: 2rem;
 }
-.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list, menu) {
+.large-space:not(nav, .row, .grid, table, .tooltip, .list, menu) {
   block-size: 3rem;
 }
 .responsive {
@@ -1623,7 +1591,189 @@ pre:has(> code){
 .no-wave:is(:hover, :active)::after {
   display: none;
 }
+[class*=blur],
+[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;
+}
+.dark [class*=blur],
+[class*=blur].dark {
+  background-color: rgb(0 0 0 / 0.5) !important;
+}
+.small-blur {
+  --_blur: 0.5rem;
+}
+.large-blur {
+  --_blur: 1.5rem;
+}
+.shadow {
+  background-color: #00000050;
+}
+:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
+  background-color: transparent !important;
+}
+.left-shadow {
+  background-image: linear-gradient(to right, black, transparent) !important;
+}
+.right-shadow {
+  background-image: linear-gradient(to left, black, transparent) !important;
+}
+.bottom-shadow {
+  background-image: linear-gradient(to top, black, transparent) !important;
+}
+.top-shadow {
+  background-image: linear-gradient(to bottom, black, transparent) !important;
+}
+main {
+  flex: 1;
+  padding: 0.5rem;
+  overflow-x: hidden;
+}
+:is(main, header, footer, section).responsive {
+  max-inline-size: 75rem;
+  margin: 0 auto;
+}
+:is(main, header, footer, section).responsive.max {
+  max-inline-size: 100%;
+}
+:has(> main) {
+  --_top: 0rem;
+  --_bottom: 0rem;
+  --_left: 0rem;
+  --_right: 0rem;
+  display: flex;
+  flex-direction: column;
+  min-block-size: calc(100vh - var(--top) - var(--_top) - var(--bottom) - var(--_bottom));
+  box-sizing: border-box;
+  background-color: var(--surface);
+  margin-block: calc(var(--top) + var(--_top)) calc(var(--bottom) + var(--_bottom));
+  margin-inline: calc(var(--left) + var(--_left)) calc(var(--right) + var(--_right));
+}
+:has(> main) > :is(header, footer).fixed {
+  z-index: 12;
+  transform: none;
+  box-sizing: content-box;
+  inset: 0;
+}
+:has(> main) > header.fixed {
+  padding-block-start: calc(var(--top) + var(--_top));
+  margin-block-start: calc(-1 * var(--top) - var(--_top));
+}
+:has(> main) > footer.fixed {
+  padding-block-end: calc(var(--bottom) + var(--_bottom));
+  margin-block-end: calc(-1 * var(--bottom) - var(--_bottom));
+}
+:has(> nav.top:not(.s, .n, .l)) {
+  --_top: 5rem;
+}
+:has(> nav.bottom:not(.s, .n, .l)) {
+  --_bottom: 5rem;
+}
+:has(> nav.left:not(.s, .n, .l)) {
+  --_left: 5rem;
+}
+:has(> nav.right:not(.s, .n, .l)) {
+  --_right: 5rem;
+}
+:has(> nav.drawer.left:not(.s, .n, .l)) {
+  --_left: 20rem;
+}
+:has(> nav.drawer.right:not(.s, .n, .l)) {
+  --_right: 20rem;
+}
+:not(main):has(> aside) {
+  overflow: auto;
+}
+aside {
+  z-index: 1;
+}
+aside:not(.fixed, .absolute).right {
+  float: right;
+}
+aside:not(.fixed, .absolute).left {
+  float: left;
+}
+@media only screen and (max-width: 600px) {
+  :has(> nav.bottom.s) {
+    --_bottom: 5rem;
+  }
+
+  :has(> nav.top.s) {
+    --_top: 5rem;
+  }
+
+  :has(> nav.left.s) {
+    --_left: 5rem;
+  }
+
+  :has(> nav.right.s) {
+    --_right: 5rem;
+  }
+
+  :has(> nav.drawer.left.s) {
+    --_left: 20rem;
+  }
+
+  :has(> nav.drawer.right.s) {
+    --_right: 20rem;
+  }
+}
+@media only screen and (min-width: 601px) and (max-width: 992px) {
+  :has(> nav.bottom.m) {
+    --_bottom: 5rem;
+  }
+
+  :has(> nav.top.m) {
+    --_top: 5rem;
+  }
+
+  :has(> nav.left.m) {
+    --_left: 5rem;
+  }
+
+  :has(> nav.right.m) {
+    --_right: 5rem;
+  }
+
+  :has(> nav.drawer.left.m) {
+    --_left: 20rem;
+  }
+
+  :has(> nav.drawer.right.m) {
+    --_right: 20rem;
+  }
+}
+@media only screen and (min-width: 993px) {
+  :has(> nav.bottom.l) {
+    --_bottom: 5rem;
+  }
+
+  :has(> nav.top.l) {
+    --_top: 5rem;
+  }
+
+  :has(> nav.left.l) {
+    --_left: 5rem;
+  }
+
+  :has(> nav.right.l) {
+    --_right: 5rem;
+  }
+
+  :has(> nav.drawer.left.l) {
+    --_left: 20rem;
+  }
+
+  :has(> nav.drawer.right.l) {
+    --_right: 20rem;
+  }
+}
 .badge {
+  --_x: 0;
+  --_y: -100%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1639,32 +1789,20 @@ pre:has(> code){
   line-height: normal;
   border-radius: 1rem;
   inset: 50% auto auto 50%;
-  transform: translate(0, -100%);
+  transform: translate(var(--_x, 50%), var(--_y, -50%));
   font-family: var(--font);
 }
 .badge.top {
-  transform: translate(-50%, -100%);
+  --_y: -100%;
 }
 .badge.bottom {
-  transform: translate(-50%, 0);
+  --_y: 0;
 }
 .badge.left {
-  transform: translate(-100%, -50%);
+  --_x: -100%;
 }
 .badge.right {
-  transform: translate(0, -50%);
-}
-.badge.top.left {
-  transform: translate(-100%, -100%);
-}
-.badge.bottom.left {
-  transform: translate(-100%, 0);
-}
-.badge.top.right {
-  transform: translate(0, -100%);
-}
-.badge.bottom.right {
-  transform: translate(0, 0);
+  --_x: 0;
 }
 .badge.border {
   border-color: var(--error);
@@ -1702,39 +1840,34 @@ nav:is(.left, .right, .top, .bottom) > :is(ol, ul) > li > a > .badge {
 }
 .button,
 button {
+  --_size: 2.5rem;
   box-sizing: content-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  block-size: 2.5rem;
-  min-inline-size: 2.5rem;
+  block-size: var(--_size);
+  min-inline-size: var(--_size);
   font-size: 0.875rem;
   font-weight: 500;
   color: var(--on-primary);
   padding: 0 1.5rem;
   background-color: var(--primary);
   margin: 0 0.5rem;
-  border-radius: 1.25rem;
+  border-radius: var(--_size);
   transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
   user-select: none;
   gap: 1rem;
   line-height: normal;
 }
 :is(button, .button).small {
-  block-size: 2rem;
-  min-inline-size: 2rem;
-  border-radius: 1rem;
+  --_size: 2rem;
 }
 :is(button, .button).large {
-  block-size: 3rem;
-  min-inline-size: 3rem;
-  border-radius: 1.5rem;
+  --_size: 3rem;
 }
 :is(.button, button):is(.extra, .extend) {
-  block-size: 3.5rem;
-  min-inline-size: 3.5rem;
+  --_size: 3.5rem;
   font-size: 1rem;
-  border-radius: 1.75rem;
 }
 :is(button, .button).border {
   border-color: var(--outline);
@@ -1773,14 +1906,12 @@ button {
   background-color: var(--secondary-container) !important;
   color: var(--on-secondary-container) !important;
 }
-:is(.button, button).vertical {
-  border-radius: 2rem;
-}
 article {
+  --_padding: 1rem;
   box-shadow: var(--elevate1);
   background-color: var(--surface-container-low);
   color: var(--on-surface);
-  padding: 1rem;
+  padding: var(--_padding);
   border-radius: 0.75rem;
   display: block;
   transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
@@ -1795,12 +1926,13 @@ article.large {
   block-size: 32rem;
 }
 .chip {
+  --_size: 2rem;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  block-size: 2rem;
-  min-inline-size: 2rem;
+  block-size: var(--_size);
+  min-inline-size: var(--_size);
   font-size: 0.875rem;
   font-weight: 500;
   background-color: transparent;
@@ -1820,14 +1952,10 @@ article.large {
   box-shadow: var(--elevate1);
 }
 .chip.medium {
-  block-size: 2.5rem;
-  min-inline-size: 2.5rem;
-  border-radius: 0.5rem;
+  --_size: 2.5rem;
 }
 .chip.large {
-  block-size: 3rem;
-  min-inline-size: 3rem;
-  border-radius: 0.5rem;
+  --_size: 3rem;
 }
 .chip.fill {
   background-color: var(--secondary-container) !important;
@@ -1842,164 +1970,8 @@ article.large {
 .chip.round.large {
   border-radius: 1.5rem;
 }
-main.responsive {
-  flex: 1;
-  padding: 0.5rem;
-  overflow-x: hidden;
-}
-:is(main, header, footer, section).responsive {
-  max-inline-size: 75rem;
-  margin: 0 auto;
-}
-:is(main, header, footer, section).responsive.max {
-  max-inline-size: 100%;
-}
-*:has(> main.responsive) {
-  display: flex;
-  flex-direction: column;
-  min-block-size: 100vh;
-}
-*:has(> nav.bottom:not(.s, .m, .l)) {
-  padding-block-end: calc(var(--bottom) + 5rem);
-}
-*:has(> nav.top:not(.s, .m, .l)) {
-  padding-block-start: calc(var(--top) + 5rem);
-}
-*:has(> nav.left:not(.s, .m, .l)) {
-  padding-inline-start: calc(var(--left) + 5rem);
-}
-*:has(> nav.right:not(.s, .m, .l)) {
-  padding-inline-end: calc(var(--right) + 5rem);
-}
-*:has(> nav.drawer.left:not(.s, .m, .l)) {
-  padding-inline-start: calc(var(--left) + 20rem);
-}
-*:has(> nav.drawer.right:not(.s, .m, .l)) {
-  padding-inline-end: calc(var(--right) + 20rem);
-}
-nav.top:not(.s, .m, .l) ~ header.fixed {
-  inset-block-start: 5rem;
-}
-nav.bottom:not(.s, .m, .l) ~ footer.fixed {
-  inset-block-end: 5rem;
-}
-:not(main):has(> aside) {
-  overflow: auto;
-}
-aside {
-  z-index: 1;
-}
-aside:not(.fixed, .absolute).right {
-  float: right;
-}
-aside:not(.fixed, .absolute).left {
-  float: left;
-}
-@media only screen and (max-width: 600px) {
-  *:has(> nav.s.bottom) {
-    padding-block-end: calc(var(--bottom) + 5rem);
-  }
-
-  *:has(> nav.s.top) {
-    padding-block-start: calc(var(--top) + 5rem);
-  }
-
-  *:has(> nav.s.left) {
-    padding-inline-start: calc(var(--left) + 5rem);
-  }
-
-  *:has(> nav.s.right) {
-    padding-inline-end: calc(var(--right) + 5rem);
-  }
-
-  *:has(> nav.s.drawer.left) {
-    padding-inline-start: calc(var(--left) + 20rem);
-  }
-
-  *:has(> nav.s.drawer.right) {
-    padding-inline-end: calc(var(--right) + 20rem);
-  }
-
-  nav.s.top ~ header.fixed {
-    inset-block-start: 5rem;
-  }
-
-  nav.s.bottom ~ footer.fixed {
-    inset-block-end: 5rem;
-  }
-}
-@media only screen and (min-width: 601px) and (max-width: 992px) {
-  *:has(> nav.m.bottom) {
-    padding-block-end: calc(var(--bottom) + 5rem);
-  }
-
-  *:has(> nav.m.top) {
-    padding-block-start: calc(var(--top) + 5rem);
-  }
-
-  *:has(> nav.m.left) {
-    padding-inline-start: calc(var(--left) + 5rem);
-  }
-
-  *:has(> nav.m.right) {
-    padding-inline-end: calc(var(--right) + 5rem);
-  }
-
-  *:has(> nav.m.drawer.left) {
-    padding-inline-start: calc(var(--left) + 20rem);
-  }
-
-  *:has(> nav.m.drawer.right) {
-    padding-inline-end: calc(var(--right) + 20rem);
-  }
-
-  nav.m.top ~ header.fixed {
-    inset-block-start: 5rem;
-  }
-
-  nav.m.bottom ~ footer.fixed {
-    inset-block-end: 5rem;
-  }
-}
-@media only screen and (min-width: 993px) {
-  *:has(> nav.l.bottom) {
-    padding-block-end: calc(var(--bottom) + 5rem);
-  }
-
-  *:has(> nav.l.top) {
-    padding-block-start: calc(var(--top) + 5rem);
-  }
-
-  *:has(> nav.l.left) {
-    padding-inline-start: calc(var(--left) + 5rem);
-  }
-
-  *:has(> nav.l.right) {
-    padding-inline-end: calc(var(--right) + 5rem);
-  }
-
-  *:has(> nav.l.drawer.left) {
-    padding-inline-start: calc(var(--left) + 20rem);
-  }
-
-  *:has(> nav.l.drawer.right) {
-    padding-inline-end: calc(var(--right) + 20rem);
-  }
-
-  nav.l.top ~ header.fixed {
-    inset-block-start: 5rem;
-  }
-
-  nav.l.bottom ~ footer.fixed {
-    inset-block-end: 5rem;
-  }
-}
-@media only screen and (max-width: 600px) {
-  main.responsive {
-    padding-inline: calc(var(--left) + 0.5rem) calc(var(--right) + 0.5rem);
-  }
-}
 dialog {
+  --_padding: 1.5rem;
   display: block;
   visibility: hidden;
   border: none;
@@ -2008,7 +1980,7 @@ dialog {
   box-shadow: var(--elevate2);
   color: var(--on-surface);
   background-color: var(--surface-container-high);
-  padding: 1.5rem;
+  padding: var(--_padding);
   z-index: 100;
   inset: 10% auto auto 50%;
   min-inline-size: 20rem;
@@ -2043,52 +2015,48 @@ dialog:popover-open {
   opacity: 1;
   transform: translate(-50%, 0);
 }
-dialog.top {
+dialog:is(.top, .right, .bottom, .left, .max) {
+  --_padding: 1rem;
+  padding: calc(var(--top) + var(--_padding)) calc(var(--right) + var(--_padding)) calc(var(--bottom) + var(--_padding)) calc(var(--left) + var(--_padding));
+}
+dialog:is(.top, .bottom) {
   opacity: 1;
-  padding: 1rem;
-  inset: 0 auto auto 0;
   block-size: auto;
   inline-size: 100%;
   min-inline-size: auto;
   max-block-size: 100%;
+}
+dialog.top {
+  inset: 0 auto auto 0;
   transform: translateY(-100%);
   border-radius: 0 0 1rem 1rem;
+  padding-block-end: var(--_padding);
 }
-[dir=rtl] dialog.right,
-dialog.left {
+dialog.bottom {
+  inset: auto auto 0 0;
+  transform: translateY(100%);
+  border-radius: 1rem 1rem 0 0;
+}
+dialog:is(.left, .right) {
   opacity: 1;
-  padding: 1rem;
   inset: 0 auto auto 0;
   inline-size: auto;
   block-size: 100%;
   max-block-size: 100%;
-  border-radius: 0 1rem 1rem 0;
   background-color: var(--surface);
+}
+[dir=rtl] dialog.right,
+dialog.left {
+  inset: 0 auto auto 0;
+  border-radius: 0 1rem 1rem 0;
   transform: translateX(-100%);
 }
 [dir=rtl] dialog.left,
 dialog.right {
-  opacity: 1;
-  padding: 1rem;
   inset: 0 0 auto auto;
-  inline-size: auto;
-  block-size: 100%;
-  max-block-size: 100%;
   border-radius: 1rem 0 0 1rem;
-  background-color: var(--surface);
   transform: translateX(100%);
 }
-dialog.bottom {
-  opacity: 1;
-  padding: 1rem;
-  inset: auto auto 0 0;
-  block-size: auto;
-  inline-size: 100%;
-  min-inline-size: auto;
-  max-block-size: 100%;
-  transform: translateY(100%);
-  border-radius: 1rem 1rem 0 0;
-}
 dialog.max {
   inset: 0 auto auto 0;
   inline-size: 100%;
@@ -2097,6 +2065,13 @@ dialog.max {
   max-block-size: 100%;
   transform: translateY(4rem);
   background-color: var(--surface);
+  border-radius: 0;
+}
+dialog:not(.left, .right, .top, .bottom, .max) {
+  --top: 0rem;
+  --bottom: 0rem;
+  --left: 0rem;
+  --right: 0rem;
 }
 dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
   transform: translate(0, 0);
@@ -2122,6 +2097,21 @@ dialog.medium:is(.top, .bottom) {
 dialog.large:is(.top, .bottom) {
   block-size: 32rem;
 }
+dialog > :is(header, footer) {
+  background: none;
+}
+dialog > header.fixed {
+  background-color: inherit;
+  padding: var(--top) 0 0 0;
+  margin: calc(-1 * var(--top)) 0 0 0;
+  transform: translateY(calc(-1 * (var(--top) + var(--_padding))));
+}
+dialog > footer.fixed {
+  background-color: inherit;
+  padding: 0 0 var(--bottom) 0;
+  margin: 0 0 calc(-1 * var(--bottom)) 0;
+  transform: translateY(calc(var(--bottom) + var(--_padding)));
+}
 hr,
 [class*=divider] {
   all: unset;
@@ -2163,10 +2153,9 @@ summary::-webkit-details-marker {
   display: none;
 }
 .field {
-  ---size: 3rem;
-  ---start: 1.2rem;
-
-  block-size: var(---size);
+  --_size: 3rem;
+  --_start: 1.2rem;
+  block-size: var(--_size);
   margin-block-end: 2rem;
   border-radius: 0.25rem 0.25rem 0 0;
 }
@@ -2186,16 +2175,16 @@ summary::-webkit-details-marker {
   margin-block-start: 3rem;
 }
 .field.small {
-  ---size: 2.5rem;
-  ---start: 1rem;
+  --_size: 2.5rem;
+  --_start: 1rem;
 }
 .field.large {
-  ---size: 3.5rem;
-  ---start: 1.4rem;
+  --_size: 3.5rem;
+  --_start: 1.4rem;
 }
 .field.extra {
-  ---size: 4rem;
-  ---start: 1.6rem;
+  --_size: 4rem;
+  --_start: 1.6rem;
 }
 .field.border {
   border-radius: 0.25rem;
@@ -2268,7 +2257,7 @@ summary::-webkit-details-marker {
 input::-webkit-date-and-time-value {
   text-align: start;
 }
-:is(input, select, textarea):-webkit-autofill {
+:is(input, select, textarea):is(:-webkit-autofill, :autofill) {
   -webkit-background-clip: text;
   -webkit-text-fill-color: var(--on-surface);
 }
@@ -2368,16 +2357,16 @@ input[type=number] {
   cursor: not-allowed;
 }
 .field.textarea.small:not(.min) {
-  ---size: 4.5rem;
+  --_size: 5rem;
 }
 .field.textarea:not(.min) {
-  ---size: 5.5rem;
+  --_size: 5.5rem;
 }
 .field.textarea.large:not(.min) {
-  ---size: 6.5rem;
+  --_size: 6rem;
 }
 .field.textarea.extra:not(.min) {
-  ---size: 7.5rem;
+  --_size: 6.5rem;
 }
 .field > select {
   user-select: none;
@@ -2393,19 +2382,19 @@ input[type=number] {
   padding-block-start: 0;
 }
 .field > textarea {
-  padding-block-start: var(---start);
+  padding-block-start: var(--_start);
   white-space: pre-wrap;
 }
 .field > textarea:focus {
-  padding-block-start: calc(var(---start) - 0.06rem);
+  padding-block-start: calc(var(--_start) - 0.06rem);
 }
 .field:not(.label) > textarea,
 .field.border.label:not(.fill) > textarea {
-  padding-block-start: calc(var(---start) - 0.5rem);
+  padding-block-start: calc(var(--_start) - 0.5rem);
 }
 .field:not(.label) > textarea:focus,
 .field.border.label:not(.fill) > textarea:focus {
-  padding-block-start: calc(var(---start) - 0.56rem);
+  padding-block-start: calc(var(--_start) - 0.56rem);
 }
 /* label */
 .field.label > label {
@@ -2413,28 +2402,20 @@ input[type=number] {
   inset: -0.5rem auto auto 1rem;
   display: flex;
   inline-size: calc(100% - 5rem);
-  block-size: 4rem;
-  line-height: 4rem;
+  block-size: calc(var(--_size) + 1rem);
+  line-height: calc(var(--_size) + 1rem);
   font-size: 1rem;
   transition: all 0.2s;
   gap: 0.25rem;
   white-space: nowrap;
 }
+.field.label.textarea:not(.min) > label {
+  block-size: calc(var(--_size) - 1.5rem);
+  line-height: calc(var(--_size) - 1.5rem);
+}
 [dir=rtl] .field.label > label {
   inset: -0.5rem 1rem auto auto;
 }
-.field.label.small > label {
-  block-size: 3.5rem;
-  line-height: 3.5rem;
-}
-.field.label.large > label {
-  block-size: 4.5rem;
-  line-height: 4.5rem;
-}
-.field.label.extra > label {
-  block-size: 5rem;
-  line-height: 5rem;
-}
 .field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
   inset-inline-start: 1rem;
 }
@@ -2541,20 +2522,20 @@ fieldset > legend + * {
   margin-block-start: 0 !important;
 }
 .grid {
-  ---gap: 1rem;
-
+  --_gap: 1rem;
   display: grid;
-  grid-template-columns: repeat(12, calc(8.33% - var(---gap) + (var(---gap) / 12)));
-  gap: var(---gap);
+  grid-template-columns: repeat(12, calc(8.33% - var(--_gap) + (var(--_gap) / 12)));
+  gap: var(--_gap);
+  block-size: auto;
 }
 .grid.no-space {
-  ---gap: 0rem;
+  --_gap: 0rem;
 }
 .grid.medium-space {
-  ---gap: 1.5rem;
+  --_gap: 1.5rem;
 }
 .grid.large-space {
-  ---gap: 2rem;
+  --_gap: 2rem;
 }
 .grid > * {
   margin: 0;
@@ -2696,12 +2677,11 @@ fieldset > legend + * {
 i,
 :is(.checkbox, .radio, .switch) > span::before,
 :is(.checkbox, .radio, .switch) > span > i {
-  ---size: 1.5rem;
-
+  --_size: 1.5rem;
   font-family: var(--font-icon);
   font-weight: normal;
   font-style: normal;
-  font-size: var(---size);
+  font-size: var(--_size);
   letter-spacing: normal;
   text-transform: none;
   display: inline-flex;
@@ -2715,28 +2695,29 @@ i,
   vertical-align: middle;
   text-align: center;
   overflow: hidden;
-  inline-size: var(---size);
-  min-inline-size: var(---size);
-  block-size: var(---size);
-  min-block-size: var(---size);
+  inline-size: var(--_size);
+  min-inline-size: var(--_size);
+  block-size: var(--_size);
+  min-block-size: var(--_size);
   box-sizing: content-box;
   line-height: normal;
+  border-radius: 0;
 }
 i.tiny {
-  ---size: 1rem;
+  --_size: 1rem;
 }
 .chip > i,
 i.small {
-  ---size: 1.25rem;
+  --_size: 1.25rem;
 }
 i.medium {
-  ---size: 1.5rem;
+  --_size: 1.5rem;
 }
 i.large {
-  ---size: 1.75rem;
+  --_size: 1.75rem;
 }
 i.extra {
-  ---size: 2rem;
+  --_size: 2rem;
 }
 i.fill,
 a.row:is(:hover, :focus) > i,
@@ -2753,7 +2734,7 @@ i > :is(img, svg) {
   padding: inherit;
 }
 i[class*=fa-] {
-  font-size: calc(var(---size) * 0.85);
+  font-size: calc(var(--_size) * 0.85);
   line-height: normal;
   block-size: auto;
   min-block-size: auto;
@@ -2790,15 +2771,18 @@ footer {
   display: flex;
   justify-content: center;
   flex-direction: column;
-  min-block-size: 4rem;
-  padding: 0 1rem;
   background-color: var(--surface-container);
+  border-radius: 0;
+  padding: 0 1rem;
 }
-main ~ footer {
-  min-block-size: 5rem;
+:is(nav.drawer, dialog, article) > :is(header, footer) {
+  padding-inline: 0;
 }
-:is(header, footer).fixed.responsive {
-  z-index: 12;
+header {
+  min-block-size: 4rem;
+}
+footer {
+  min-block-size: 5rem;
 }
 :is(header, footer, menu > *).fixed {
   position: sticky;
@@ -2806,26 +2790,13 @@ main ~ footer {
   z-index: 11;
   background-color: inherit;
 }
-:is(dialog, menu, nav, article) > :is(header, footer) {
-  background-color: inherit;
-  padding: 0;
-}
-:is(dialog, article, [class*=padding]) > :is(header, footer).fixed {
-  ---translateY: 1rem;
-
-  transform: translateY(var(---translateY));
+header.fixed {
+  inset: calc(-1 * var(--_padding)) 0 0 0;
+  margin-block-start: calc(-1 * var(--_padding));
 }
-:is(dialog, article, [class*=padding]) > header.fixed {
-  transform: translateY(calc(-1 * var(---translateY)));
-}
-.no-padding > :is(header, footer).fixed {
-  transform: none;
-}
-.small-padding > :is(header, footer).fixed {
-  ---translateY: 0.5rem;
-}
-:is(.large-padding, dialog:not(.left, .right, .top, .bottom)) > :is(header, footer).fixed {
-  ---translateY: 1.5rem;
+footer.fixed {
+  inset: 0 0 calc(-1 * var(--_padding)) 0;
+  margin-block-end: calc(-1 * var(--_padding));
 }
 .list {
   display: flex;
@@ -2893,51 +2864,32 @@ svg {
   fill: currentcolor;
 }
 :is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .square, .responsive) {
+  --_size: 3rem;
   object-fit: cover;
   object-position: center;
   transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
-  block-size: 3rem;
-  inline-size: 3rem;
+  block-size: var(--_size);
+  inline-size: var(--_size);
 }
 :is(img, svg, video).round {
-  border-radius: 0.5rem;
+  --_round: 0.5rem;
 }
 :is(img, svg, video).tiny {
-  block-size: 2rem;
-  inline-size: 2rem;
+  --_size: 2rem;
 }
 :is(img, svg, video).small {
-  block-size: 2.5rem;
-  inline-size: 2.5rem;
+  --_size: 2.5rem;
 }
 :is(img, svg, video).large {
-  block-size: 3.5rem;
-  inline-size: 3.5rem;
+  --_size: 3.5rem;
 }
 :is(img, svg, video).extra {
-  block-size: 4rem;
-  inline-size: 4rem;
+  --_size: 4rem;
 }
 :is(img, svg, video).responsive {
-  inline-size: 100%;
-  block-size: 100%;
+  --_size: 100%;
   margin: 0 auto;
 }
-:is(button, .button, .chip):not(.transparent) > .responsive {
-  border: 0.25rem solid transparent;
-}
-:is(button, .button, .chip.medium) > .responsive {
-  inline-size: 2.5rem;
-}
-:is(button.small, .button.small, .chip:not(.medium)) > .responsive {
-  inline-size: 2rem;
-}
-:is(button, .button, .chip).large > .responsive {
-  inline-size: 3rem;
-}
-:is(button, .button, .chip).extra > .responsive {
-  inline-size: 3.5rem;
-}
 :is(img, svg, video).responsive.tiny {
   inline-size: 100%;
   block-size: 4rem;
@@ -2959,39 +2911,40 @@ svg {
   block-size: 20rem;
 }
 :is(img, svg, video).responsive.round {
-  border-radius: 2rem;
+  --_round: 2rem;
 }
 :is(img, svg, video).empty-state {
   max-inline-size: 100%;
   inline-size: 24rem;
 }
-:is(button, .button, .chip, .field) > :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra),
-.tabs :is(img, svg):not(.responsive, .tiny, .small, .medium, .large, .extra) {
+:is(button, .button, .chip):not(.transparent) > .responsive {
+  border: 0.25rem solid transparent;
+}
+:is(button, .button, .chip, .field) > :is(img, svg):not(.responsive),
+.tabs :is(img, svg):not(.responsive) {
   min-inline-size: 1.5rem;
   max-inline-size: 1.5rem;
   min-block-size: 1.5rem;
   max-block-size: 1.5rem;
 }
-:is(button, .button, .chip) > :is(i, img, svg),
-:is(button, .button, .chip) > .responsive {
+:is(button, .button, .chip) > :is(i, img, svg) {
   margin: 0 -0.5rem;
 }
-:is(button, .button) > .responsive {
+:is(button, .button) > .responsive:first-child {
   margin-inline-start: -1.5rem;
 }
-:is(button, .button) > span + .responsive {
-  margin-inline-start: -0.5rem;
+:is(button, .button) > .responsive:not(:first-child) {
   margin-inline-end: -1.5rem;
 }
-.chip > .responsive {
+.chip > .responsive:first-child {
   margin-inline-start: -1rem;
 }
-.chip > span + .responsive {
-  margin-inline-start: -0.5rem;
+.chip > .responsive:not(:first-child) {
   margin-inline-end: -1rem;
 }
-:is(.circle, .square) > .responsive {
-  margin: 0;
+:is(.circle, .square, .extend) > .responsive {
+  --_size: inherit;
+  margin: 0 !important;
 }
 .extend > :is(.responsive, i) {
   margin: 0;
@@ -3108,6 +3061,7 @@ menu.max {
   transform: none !important;
   background-color: var(--surface-variant) !important;
   color: var(--on-surface-variant) !important;
+  border-radius: 0;
 }
 menu.no-wrap:is(.min, .max) {
   min-inline-size: 16rem;
@@ -3128,9 +3082,8 @@ menu.top {
   transform: scale(0.8) translateY(-120%);
 }
 menu:has(menu) {
-  ---child: 1;
-  ---type: 0;
-
+  --_child: 1;
+  --_type: 0;
   overflow: unset;
   white-space: nowrap;
   inline-size: auto;
@@ -3139,19 +3092,19 @@ menu:has(menu) {
 }
 menu > li > :is(menu, menu.right),
 [dir=rtl] menu > li > menu.left {
-  inset: auto auto calc(3rem * (var(---child) - var(---type))) 100%;
+  inset: auto auto calc(3rem * (var(--_child) - var(--_type))) 100%;
 }
 [dir=rtl] menu > li > :is(menu, menu.right),
 menu > li > menu.left {
-  inset: auto 100% calc(3rem * (var(---child) - var(---type))) auto;
+  inset: auto 100% calc(3rem * (var(--_child) - var(--_type))) auto;
 }
 menu > li > :is(menu.top, menu.top.right),
 [dir=rtl] menu > li > menu.top.left {
-  inset: calc(3rem * (var(---child) - var(---type))) auto auto 100%;
+  inset: calc(3rem * (var(--_child) - var(--_type))) auto auto 100%;
 }
 [dir=rtl] menu > li > :is(menu.top, menu.top.right),
 menu > li > menu.top.left {
-  inset: calc(3rem * (var(---child) - var(---type))) 100% auto auto;
+  inset: calc(3rem * (var(--_child) - var(--_type))) 100% auto auto;
 }
 menu.no-space > li {
   min-block-size: 2.5rem;
@@ -3171,64 +3124,64 @@ menu.border > li:not(:last-child)::before {
   inline-size: auto;
 }
 menu > li:nth-last-child(2) {
-  ---child: 2;
+  --_child: 2;
 }
 menu > li:nth-last-child(3) {
-  ---child: 3;
+  --_child: 3;
 }
 menu > li:nth-last-child(4) {
-  ---child: 4;
+  --_child: 4;
 }
 menu > li:nth-last-child(5) {
-  ---child: 5;
+  --_child: 5;
 }
 menu > li:nth-last-child(6) {
-  ---child: 6;
+  --_child: 6;
 }
 menu > li:nth-last-child(7) {
-  ---child: 7;
+  --_child: 7;
 }
 menu > li:nth-last-child(8) {
-  ---child: 8;
+  --_child: 8;
 }
 menu > li:nth-last-child(9) {
-  ---child: 9;
+  --_child: 9;
 }
 menu > li:nth-last-child(10) {
-  ---child: 10;
+  --_child: 10;
 }
 menu > li:nth-last-child(11) {
-  ---child: 11;
+  --_child: 11;
 }
 menu > li:nth-last-of-type(2) {
-  ---type: 1;
+  --_type: 1;
 }
 menu > li:nth-last-of-type(3) {
-  ---type: 2;
+  --_type: 2;
 }
 menu > li:nth-last-of-type(4) {
-  ---type: 3;
+  --_type: 3;
 }
 menu > li:nth-last-of-type(5) {
-  ---type: 4;
+  --_type: 4;
 }
 menu > li:nth-last-of-type(6) {
-  ---type: 5;
+  --_type: 5;
 }
 menu > li:nth-last-of-type(7) {
-  ---type: 6;
+  --_type: 6;
 }
 menu > li:nth-last-of-type(8) {
-  ---type: 7;
+  --_type: 7;
 }
 menu > li:nth-last-of-type(9) {
-  ---type: 8;
+  --_type: 8;
 }
 menu > li:nth-last-of-type(10) {
-  ---type: 9;
+  --_type: 9;
 }
 menu > li:nth-last-of-type(11) {
-  ---type: 10;
+  --_type: 10;
 }
 nav > :is(ol, ul),
 nav > :is(ol, ul) > li {
@@ -3246,6 +3199,7 @@ nav.drawer > :is(ol, ul) > li > :is(a, label) {
   justify-content: flex-start;
   white-space: nowrap;
   gap: 1rem;
+  border-radius: 0;
 }
 a.row,
 nav.row {
@@ -3301,39 +3255,55 @@ nav:is(.left, .right, .top, .bottom) {
   block-size: auto;
   inline-size: auto;
   text-align: center;
-  padding: 0.5rem 1rem;
-  inset: var(--top) var(--right) var(--bottom) var(--left);
+  padding: calc(var(--top) + 0.5rem) calc(var(--right) + 1rem) calc(var(--bottom) + 0.5rem) calc(var(--left) + 1rem);
   margin: 0;
 }
 nav:is(.left, .right) {
-  inline-size: 5rem;
   justify-content: flex-start;
   flex-direction: column;
   background-color: var(--surface);
 }
 nav:is(.top, .bottom) {
-  block-size: 5rem;
   justify-content: center;
   flex-direction: row;
   background-color: var(--surface-container);
 }
 nav.top {
-  inset-block-end: auto;
+  block-size: calc(var(--top) + 5rem);
+  inset: 0 0 auto 0;
+  padding-block-end: 0.5rem;
 }
-nav.left {
-  inset-inline-end: auto;
+nav.left,
+[dir=rtl] nav.right {
+  inline-size: calc(var(--left) + 5rem);
+  inset: 0 auto 0 0;
+  padding-inline-end: 1rem;
 }
-nav.right {
-  inset-inline-start: auto;
+[dir=rtl] nav.right {
+  padding-inline-end: calc(var(--left) + 1rem);
+}
+nav.right,
+[dir=rtl] nav.left {
+  inline-size: calc(var(--right) + 5rem);
+  inset: 0 0 0 auto;
+  padding-inline-start: 1rem;
+}
+[dir=rtl] nav.left {
+  padding-inline-start: calc(var(--right) + 1rem);
 }
 nav.bottom {
-  inset-block-start: auto;
+  block-size: calc(var(--bottom) + 5rem);
+  inset: auto 0 0 0;
+  padding-block-start: 0.5rem;
 }
-nav.drawer {
+nav.drawer,
+[dir=rtl] nav.drawer {
   flex-direction: column;
   align-items: normal;
   inline-size: 20rem;
   gap: 0;
+}
+nav.drawer:not(.left, .right, .top, .bottom) {
   padding: 0.5rem 1rem;
 }
 nav.drawer:is(.min, .max) {
@@ -3501,8 +3471,7 @@ dialog:popover-open::backdrop {
   border: 0;
 }
 .page {
-  ---transform: translate(0, 0);
-
+  --_transform: translate(0, 0);
   opacity: 0;
   position: absolute;
   display: none;
@@ -3514,21 +3483,21 @@ dialog:popover-open::backdrop {
   animation: var(--speed4) to-page ease;
 }
 .page.active.top {
-  ---transform: translate(0, -4rem);
+  --_transform: translate(0, -4rem);
 }
 .page.active.bottom {
-  ---transform: translate(0, 4rem);
+  --_transform: translate(0, 4rem);
 }
 .page.active.left {
-  ---transform: translate(-4rem, 0);
+  --_transform: translate(-4rem, 0);
 }
 .page.active.right {
-  ---transform: translate(4rem, 0);
+  --_transform: translate(4rem, 0);
 }
 @keyframes to-page {
   from {
     opacity: 0;
-    transform: var(---transform);
+    transform: var(--_transform);
   }
 
   to {
@@ -3708,6 +3677,7 @@ progress.max + * {
 .checkbox,
 .radio,
 .switch {
+  --_size: 1.5rem;
   direction: ltr;
   inline-size: auto;
   block-size: auto;
@@ -3716,20 +3686,19 @@ progress.max + * {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
-  ---size: 1.5rem;
 }
 :is(.checkbox, .radio, .switch).small {
-  ---size: 1rem;
+  --_size: 1rem;
 }
 :is(.checkbox, .radio, .switch).large {
-  ---size: 2rem;
+  --_size: 2rem;
 }
 :is(.checkbox, .radio, .switch).extra {
-  ---size: 2.5rem;
+  --_size: 2.5rem;
 }
 :is(.checkbox, .radio) > input {
-  inline-size: var(---size);
-  block-size: var(---size);
+  inline-size: var(--_size);
+  block-size: var(--_size);
   opacity: 0;
 }
 .switch > input {
@@ -3749,16 +3718,16 @@ progress.max + * {
 :is(.checkbox, .radio, .switch) > span::before,
 :is(.checkbox, .radio, .switch) > span > i,
 :is(.checkbox, .radio) > span::after {
-  ---size: inherit;
+  --_size: inherit;
   content: '';
-  inline-size: var(---size);
-  block-size: var(---size);
+  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 calc(var(---size) * -1);
+  inset: auto auto auto calc(var(--_size) * -1);
   border-radius: 50%;
   user-select: none;
   z-index: 1;
@@ -3772,10 +3741,10 @@ progress.max + * {
   justify-content: center;
   border-radius: 50%;
   transition: all var(--speed2);
-  font-size: calc(var(---size) - 0.5rem);
+  font-size: calc(var(--_size) - 0.5rem);
   user-select: none;
-  min-inline-size: var(---size);
-  min-block-size: var(---size);
+  min-inline-size: var(--_size);
+  min-block-size: var(--_size);
   content: "";
   color: var(--surface-variant);
   background-color: var(--outline);
@@ -3900,11 +3869,10 @@ progress.max + * {
   outline-offset: 0.375rem;
 }
 .slider {
-  ---start: 0%;
-  ---end: 0%;
-  ---value1: "";
-  ---value2: "";
-
+  --_start: 0%;
+  --_end: 0%;
+  --_value1: "";
+  --_value2: "";
   display: flex;
   align-items: center !important;
   inline-size: auto;
@@ -4011,7 +3979,7 @@ progress.max + * {
   border-radius: 1rem 0 0 1rem;
   background: var(--primary);
   z-index: 0;
-  inset: calc(50% - 0.5rem) var(---end) auto var(---start);
+  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[type=range] + input[type=range] ~ span {
@@ -4028,7 +3996,7 @@ progress.max + * {
   block-size: 1rem;
   border-radius: 1rem;
   background: var(--primary-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);
+  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);
 }
 .slider:has(> [disabled])::before {
   background: var(--active);
@@ -4036,7 +4004,7 @@ progress.max + * {
 .slider > .tooltip {
   visibility: hidden !important;
   opacity: 0 !important;
-  inset: 0 auto auto calc(100% - var(---end));
+  inset: 0 auto auto calc(100% - var(--_end));
   border-radius: 2rem;
   transition: top var(--speed2) ease, opacity var(--speed2) ease;
   transform: translate(-50%, -50%) !important;
@@ -4046,17 +4014,17 @@ progress.max + * {
   transform: translate(-50%, -50%) scaleX(-1) !important;
 }
 .slider > .tooltip + .tooltip {
-  inset: 0.25rem calc(100% - var(---start)) auto auto;
+  inset: 0.25rem calc(100% - var(--_start)) auto auto;
   transform: translate(50%, -50%) !important;
 }
 [dir=rtl] .slider > .tooltip + .tooltip {
   transform: translate(50%, -50%) scaleX(-1) !important;
 }
 .slider > .tooltip::before {
-  content: var(---value1);
+  content: var(--_value1);
 }
 .slider > .tooltip + .tooltip::before {
-  content: var(---value2);
+  content: var(--_value2);
 }
 .slider > :focus ~ .tooltip {
   inset-block-start: -1rem !important;
@@ -4106,13 +4074,13 @@ progress.max + * {
 }
 .slider.max > span {
   block-size: auto !important;
-  inset: 0 var(---end) 0 var(---start);
+  inset: 0 var(--_end) 0 var(--_start);
   clip-path: none;
   background: currentcolor;
   border-radius: 0;
 }
 .slider.max.vertical > span {
-  inset: var(---end) 0 var(---start) 0;
+  inset: var(--_end) 0 var(--_start) 0;
 }
 .slider > input:focus-visible::-webkit-slider-thumb {
   outline: 0.1875rem solid var(--primary);
@@ -4190,6 +4158,7 @@ table :is(thead, tbody, tfoot, tr, th, td) {
   inline-size: auto;
   text-align: inherit;
   padding: 0.5rem;
+  border-radius: 0;
 }
 :is(th, td) > * {
   vertical-align: middle;
@@ -4231,6 +4200,7 @@ tfoot th.fixed {
   display: flex;
   white-space: nowrap;
   border-block-end: 0.0625rem solid var(--surface-variant);
+  border-radius: 0;
 }
 .tabs:not(.left-align, .right-align, .center-align) {
   justify-content: space-around;
@@ -4271,8 +4241,7 @@ tfoot th.fixed {
   inline-size: auto;
 }
 .tooltip {
-  ---space: -0.5rem;
-
+  --_space: -0.5rem;
   visibility: hidden;
   display: flex;
   align-items: center;
@@ -4334,23 +4303,23 @@ tfoot th.fixed {
   transform: translate(-50%, 100%) scale(1);
 }
 .tooltip.no-space {
-  ---space: 0;
+  --_space: 0;
 }
 .tooltip.medium-space {
-  ---space: -1rem;
+  --_space: -1rem;
 }
 .tooltip.large-space {
-  ---space: -1.5rem;
+  --_space: -1.5rem;
 }
 .tooltip:not(.left, .right, .bottom) {
-  margin-block-start: var(---space) !important;
+  margin-block-start: var(--_space) !important;
 }
 .tooltip.left,
 .tooltip.right {
-  margin-inline: var(---space) !important;
+  margin-inline: var(--_space) !important;
 }
 .tooltip.bottom {
-  margin-block-end: var(---space) !important;
+  margin-block-end: var(--_space) !important;
 }
 menu:active ~ .tooltip,
 :is(button, .button):focus > menu ~ .tooltip,
@@ -4358,13 +4327,13 @@ menu:active ~ .tooltip,
   visibility: hidden;
 }
 .slider > .tooltip {
-  ---space: -1.25rem;
+  --_space: -1.25rem;
 }
 .slider.vertical > .tooltip {
-  ---space: -0.75rem;
+  --_space: -0.75rem;
 }
 .slider.vertical > .tooltip:is(.left, .right) {
-  ---space: -0.5rem;
+  --_space: -0.5rem;
 }
 .tooltip.max {
   display: block;
@@ -4376,39 +4345,3 @@ menu:active ~ .tooltip,
   padding: 1rem;
   box-shadow: var(--elevate2);
 }
-[class*=blur],
-[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);
-}
-.dark [class*=blur],
-[class*=blur].dark {
-  background-color: rgb(0 0 0 / 0.5);
-}
-.small-blur {
-  ---blur: 0.5rem;
-}
-.large-blur {
-  ---blur: 1.5rem;
-}
-.shadow {
-  background-color: #00000050;
-}
-:is(.left-shadow, .right-shadow, .top-shadow, .bottom-shadow) {
-  background-color: transparent !important;
-}
-.left-shadow {
-  background-image: linear-gradient(to right, black, transparent);
-}
-.right-shadow {
-  background-image: linear-gradient(to left, black, transparent);
-}
-.bottom-shadow {
-  background-image: linear-gradient(to top, black, transparent);
-}
-.top-shadow {
-  background-image: linear-gradient(to bottom, black, transparent);
-}