beercss 3.9.7 → 3.10.1

package/src/cdn/elements/menus.css

@@ -112,6 +112,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) {
@@ -137,9 +138,8 @@ menu.top {
 }
 
 menu:has(menu) {
-  ---child: 1;
-  ---type: 0;
-
+  --_child: 1;
+  --_type: 0;
   overflow: unset;
   white-space: nowrap;
   inline-size: auto;
@@ -149,22 +149,22 @@ 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 {
@@ -189,81 +189,81 @@ menu.border > li:not(:last-child)::before {
 }
 
 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;
 }

package/src/cdn/elements/navigations.css

@@ -15,6 +15,7 @@ nav.drawer > :is(ol, ul) > li > :is(a, label) {
   justify-content: flex-start;
   white-space: nowrap;
   gap: 1rem;
+  border-radius: 0;
 }
 
 a.row,
@@ -83,46 +84,65 @@ 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,
+[dir=rtl] nav.right {
+  inline-size: calc(var(--left) + 5rem);
+  inset: 0 auto 0 0;
+  padding-inline-end: 1rem;
 }
 
-nav.left {
-  inset-inline-end: auto;
+[dir=rtl] nav.right {
+  padding-inline-end: calc(var(--left) + 1rem);
 }
 
-nav.right {
-  inset-inline-start: auto;
+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;
 }
 

package/src/cdn/elements/pages.css

@@ -1,6 +1,5 @@
 .page {
-  ---transform: translate(0, 0);
-
+  --_transform: translate(0, 0);
   opacity: 0;
   position: absolute;
   display: none;
@@ -14,25 +13,25 @@
 }
 
 .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 {

package/src/cdn/elements/selections.css

@@ -2,6 +2,7 @@
 .checkbox,
 .radio,
 .switch {
+  --_size: 1.5rem;
   direction: ltr;
   inline-size: auto;
   block-size: auto;
@@ -10,24 +11,23 @@
   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;
 }
 
@@ -51,16 +51,16 @@
 :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;
@@ -75,10 +75,10 @@
   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);

package/src/cdn/elements/sliders.css

@@ -1,9 +1,8 @@
 .slider {
-  ---start: 0%;
-  ---end: 0%;
-  ---value1: "";
-  ---value2: "";
-
+  --_start: 0%;
+  --_end: 0%;
+  --_value1: "";
+  --_value2: "";
   display: flex;
   align-items: center !important;
   inline-size: auto;
@@ -129,7 +128,7 @@
   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%);
 }
 
@@ -149,7 +148,7 @@
   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 {
@@ -159,7 +158,7 @@
 .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;
@@ -171,7 +170,7 @@
 }
 
 .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;
 }
 
@@ -180,11 +179,11 @@
 }
 
 .slider > .tooltip::before {
-  content: var(---value1);
+  content: var(--_value1);
 }
 
 .slider > .tooltip + .tooltip::before {
-  content: var(---value2);
+  content: var(--_value2);
 }
 
 .slider > :focus ~ .tooltip {
@@ -243,14 +242,14 @@
 
 .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 {

package/src/cdn/elements/sliders.ts

@@ -82,10 +82,10 @@ function updateRange(input: HTMLInputElement) {
     }
   }
 
-  label.style.setProperty("---start", `${start}%`);
-  label.style.setProperty("---end", `${end}%`);
-  label.style.setProperty("---value1", `'${value1}'`);
-  label.style.setProperty("---value2", `'${value2}'`);
+  label.style.setProperty("--_start", `${start}%`);
+  label.style.setProperty("--_end", `${end}%`);
+  label.style.setProperty("--_value1", `'${value1}'`);
+  label.style.setProperty("--_value2", `'${value2}'`);
 }
 
 export function updateAllSliders() {

package/src/cdn/elements/tables.css

@@ -15,6 +15,7 @@ table :is(thead, tbody, tfoot, tr, th, td) {
   inline-size: auto;
   text-align: inherit;
   padding: 0.5rem;
+  border-radius: 0;
 }
 
 :is(th, td) > * {

package/src/cdn/elements/tabs.css

@@ -2,6 +2,7 @@
   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) {

package/src/cdn/elements/tooltips.css

@@ -1,6 +1,5 @@
 .tooltip {
-  ---space: -0.5rem;
-
+  --_space: -0.5rem;
   visibility: hidden;
   display: flex;
   align-items: center;
@@ -73,28 +72,28 @@
 }
 
 .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,
@@ -104,15 +103,15 @@ menu:active ~ .tooltip,
 }
 
 .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 {

package/src/cdn/helpers/blurs.css

@@ -1,21 +1,21 @@
 [class*=blur],
 [class*=blur].light {
-  ---blur: 1rem;
-  -webkit-backdrop-filter: blur(var(---blur));
-  backdrop-filter: blur(var(---blur));
+  --_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);
+  background-color: rgb(255 255 255 / 0.5) !important;
 }
 
 .dark [class*=blur],
 [class*=blur].dark {
-  background-color: rgb(0 0 0 / 0.5);
+  background-color: rgb(0 0 0 / 0.5) !important;
 }
 
 .small-blur {
-  ---blur: 0.5rem;
+  --_blur: 0.5rem;
 }
 
 .large-blur {
-  ---blur: 1.5rem;
+  --_blur: 1.5rem;
 }

package/src/cdn/helpers/forms.css

@@ -1,28 +1,14 @@
-.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,
@@ -35,60 +21,39 @@
 }
 
 .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;
 }
@@ -103,7 +68,3 @@
 .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;
-}