beercss 3.3.5 → 3.4.1

package/src/cdn/helpers/directions.css

@@ -2,13 +2,13 @@
   display: inline-flex;
   flex-direction: row !important;
   gap: 1rem;
-  width: auto !important;
-  max-width: none !important;
+  inline-size: auto !important;
+  max-inline-size: none !important;
 }
 
 .horizontal > * {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
+  margin-block-start: 0 !important;
+  margin-block-end: 0 !important;
 }
 
 .vertical,
@@ -16,13 +16,13 @@
   display: inline-flex;
   flex-direction: column !important;
   gap: 0.25rem;
-  height: auto !important;
-  max-height: none !important;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  block-size: auto !important;
+  max-block-size: none !important;
+  padding-block-start: 0.5rem;
+  padding-block-end: 0.5rem;
 }
 
 .vertical > * {
-  margin-left: 0 !important;
-  margin-right: 0 !important;
+  margin-inline-start: 0 !important;
+  margin-inline-end: 0 !important;
 }

package/src/cdn/helpers/dividers.css

@@ -2,8 +2,8 @@
 .small-divider,
 .medium-divider,
 .large-divider {
-  height: 0.0625rem;
-  background-color: var(--outline);
+  block-size: 0.0625rem;
+  background-color: var(--outline-variant);
   display: block;
   margin: 0 !important;
 }
@@ -19,3 +19,12 @@
 .small-divider {
   margin: 0.5rem 0 !important;
 }
+
+.divider.vertical {
+  inline-size: 0.0625rem;
+}
+
+.divider.vertical.max {
+  align-self: stretch;
+  flex: none;
+}

package/src/cdn/helpers/forms.css

@@ -26,40 +26,32 @@
 }
 
 .no-round,
-.square {
+.square,
+.top-round,
+.bottom-round,
+.left-round,
+.right-round {
   border-radius: 0 !important;
 }
 
 .top-round {
-  border-radius: var(---round) var(---round) 0 0 !important;
+  border-start-start-radius: var(---round) !important;
+  border-start-end-radius: var(---round) !important;
 }
 
 .bottom-round {
-  border-radius: 0 0 var(---round) var(---round) !important;
+  border-end-end-radius: var(---round) !important;
+  border-end-start-radius: var(---round) !important;
 }
 
 .left-round {
-  border-radius: var(---round) 0 0 var(---round) !important;
+  border-start-start-radius: var(---round) !important;
+  border-end-start-radius: var(---round) !important;
 }
 
 .right-round {
-  border-radius: 0 var(---round) var(---round) 0 !important;
-}
-
-.top-round.left-round {
-  border-radius: var(---round) var(---round) 0 !important;
-}
-
-.top-round.right-round {
-  border-radius: var(---round) var(---round) var(---round) 0 !important;
-}
-
-.bottom-round.left-round {
-  border-radius: var(---round) 0 var(---round) var(---round) !important;
-}
-
-.bottom-round.right-round {
-  border-radius: 0 var(---round) var(---round) !important;
+  border-start-end-radius: var(---round) !important;
+  border-end-end-radius: var(---round) !important;
 }
 
 .circle {
@@ -72,8 +64,8 @@
 
 :is(.circle, .square):not(i, img, video, svg),
 :is(.circle, .square).chip.medium {
-  height: 2.5rem;
-  width: 2.5rem;
+  block-size: 2.5rem;
+  inline-size: 2.5rem;
   padding: 0;
 }
 
@@ -83,18 +75,18 @@
 
 :is(.circle, .square).small:not(i, img, video, svg),
 :is(.circle, .square).chip {
-  height: 2rem;
-  width: 2rem;
+  block-size: 2rem;
+  inline-size: 2rem;
 }
 
 :is(.circle, .square).large:not(i, img, video, svg) {
-  height: 3rem;
-  width: 3rem;
+  block-size: 3rem;
+  inline-size: 3rem;
 }
 
 :is(.circle, .square).extra:not(i, img, video, svg) {
-  height: 3.5rem;
-  width: 3.5rem;
+  block-size: 3.5rem;
+  inline-size: 3.5rem;
 }
 
 :is(.circle, .square).round {

package/src/cdn/helpers/margins.css

@@ -40,20 +40,20 @@
 
 .left-margin,
 .horizontal-margin {
-  margin-left: var(---margin) !important;
+  margin-inline-start: var(---margin) !important;
 }
 
 .right-margin,
 .horizontal-margin {
-  margin-right: var(---margin) !important;
+  margin-inline-end: var(---margin) !important;
 }
 
 .top-margin,
 .vertical-margin {
-  margin-top: var(---margin) !important;
+  margin-block-start: var(---margin) !important;
 }
 
 .bottom-margin,
 .vertical-margin {
-  margin-bottom: var(---margin) !important;
+  margin-block-end: var(---margin) !important;
 }

package/src/cdn/helpers/paddings.css

@@ -40,20 +40,20 @@
 
 .left-padding,
 .horizontal-padding {
-  padding-left: var(---padding) !important;
+  padding-inline-start: var(---padding) !important;
 }
 
 .right-padding,
 .horizontal-padding {
-  padding-right: var(---padding) !important;
+  padding-inline-end: var(---padding) !important;
 }
 
 .top-padding,
 .vertical-padding {
-  padding-top: var(---padding) !important;
+  padding-block-start: var(---padding) !important;
 }
 
 .bottom-padding,
 .vertical-padding {
-  padding-bottom: var(---padding) !important;
+  padding-block-end: var(---padding) !important;
 }

package/src/cdn/helpers/positions.css

@@ -7,31 +7,39 @@
 }
 
 .left {
-  left: 0;
+  inset-inline-start: 0;
 }
 
 .right {
-  right: 0;
+  inset-inline-end: 0;
 }
 
 .top {
-  top: 0;
+  inset-block-start: 0;
 }
 
 .bottom {
-  bottom: 0;
+  inset-block-end: 0;
 }
 
 .center {
-  left: 50%;
+  inset-inline-start: 50%;
   transform: translateX(-50%);
 }
 
+[dir=rtl] .center {
+  transform: translateX(50%);
+}
+
 .middle {
-  top: 50%;
+  inset-block-start: 50%;
   transform: translateY(-50%);
 }
 
 .middle.center {
   transform: translate(-50%, -50%);
 }
+
+[dir=rtl] .middle.center {
+  transform: translate(50%, -50%);
+}

package/src/cdn/helpers/reset.css

@@ -10,8 +10,8 @@
 }
 
 body {
-  color: var(--on-background);
-  background-color: var(--body);
+  color: var(--on-surface);
+  background-color: var(--surface);
   overflow-x: hidden;
 }
 
@@ -52,11 +52,16 @@ body *::-webkit-scrollbar,
 body *::-webkit-scrollbar-thumb,
 body *::-webkit-scrollbar-button {
   background: none;
-  width: 0.4rem;
-  height: 0.4rem;
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
 }
 
 body *:is(:hover,:focus)::-webkit-scrollbar-thumb {
   background: var(--outline);
   border-radius: 1rem;
 }
+
+pre,
+code {
+  direction: ltr;
+}

package/src/cdn/helpers/responsive.css

@@ -1,6 +1,6 @@
 .responsive {
-  width: -webkit-fill-available;
-  width: -moz-available;
+  inline-size: -webkit-fill-available;
+  inline-size: -moz-available;
 }
 
 @media only screen and (max-width: 600px) {

package/src/cdn/helpers/sizes.css

@@ -1,28 +1,28 @@
 .small-width {
-  width: 12rem !important;
-  max-width: 100%;
+  inline-size: 12rem !important;
+  max-inline-size: 100%;
 }
 
 .medium-width {
-  width: 24rem !important;
-  max-width: 100%;
+  inline-size: 24rem !important;
+  max-inline-size: 100%;
 }
 
 .large-width {
-  width: 36rem !important;
-  max-width: 100%;
+  inline-size: 36rem !important;
+  max-inline-size: 100%;
 }
 
 .small-height {
-  height: 12rem !important;
+  block-size: 12rem !important;
 }
 
 .medium-height {
-  height: 24rem !important;
+  block-size: 24rem !important;
 }
 
 .large-height {
-  height: 36rem !important;
+  block-size: 36rem !important;
 }
 
 .wrap {

package/src/cdn/helpers/spaces.css

@@ -1,15 +1,15 @@
 .tiny-space:not(nav, .row, .grid, table, .tooltip) {
-  height: 0.5rem;
+  block-size: 0.5rem;
 }
 
 :is(.space, .small-space):not(nav, .row, .grid, table, .tooltip) {
-  height: 1rem;
+  block-size: 1rem;
 }
 
 .medium-space:not(nav, .row, .grid, table, .tooltip) {
-  height: 2rem;
+  block-size: 2rem;
 }
 
 .large-space:not(nav, .row, .grid, table, .tooltip) {
-  height: 3rem;
+  block-size: 3rem;
 }

package/src/cdn/helpers/theme.css

@@ -75,7 +75,14 @@
   color: var(--on-background) !important;
 }
 
-.surface {
+.surface,
+.surface-dim,
+.surface-bright,
+.surface-container-lowest,
+.surface-container-low,
+.surface-container,
+.surface-container-high,
+.surface-container-highest {
   background-color: var(--surface) !important;
   color: var(--on-surface) !important;
 }
@@ -103,6 +110,38 @@
   border-color: var(--inverse-primary) !important;
 }
 
+.surface-dim {
+  background-color: var(--surface-dim) !important;
+}
+
+.surface-bright {
+  background-color: var(--surface-bright) !important;
+}
+
+.surface-container-lowest {
+  background-color: var(--surface-container-lowest) !important;
+}
+
+.surface-container-low {
+  background-color: var(--surface-container-low) !important;
+}
+
+.surface-container {
+  background-color: var(--surface-container) !important;
+}
+
+.surface-container-high {
+  background-color: var(--surface-container-high) !important;
+}
+
+.surface-container-highest {
+  background-color: var(--surface-container-highest) !important;
+}
+
+.surface-container-low {
+  background-color: var(--surface-container-low) !important;
+}
+
 .black {
   background-color: #000 !important;
 }

package/src/cdn/helpers/typography.css

@@ -17,7 +17,7 @@ h6 {
   font-weight: 400;
   display: flex;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin-block-end: 0.5rem;
   line-height: normal;
 }
 
@@ -27,7 +27,7 @@ h6 {
 * + h4,
 * + h5,
 * + h6 {
-  margin-top: 1rem;
+  margin-block-start: 1rem;
 }
 
 h1 {

package/src/cdn/helpers/waves.css

@@ -4,12 +4,12 @@
 :is(.button, button)::after {
   content: "";
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: 1;
   border-radius: inherit;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   background-position: center;
   background-image: radial-gradient(circle, rgb(255 255 255 / 0.4) 1%, transparent 1%);
   opacity: 0;
@@ -27,15 +27,15 @@
 
 .wave.none::after,
 :is(.button, button).none::after {
-  top: 0;
-  left: -0.25rem;
+  inset-block-start: 0;
+  inset-inline-start: -0.25rem;
   padding: 0 0.25rem;
 }
 
 .wave.none:not(.small, .medium, .large, .extra)::after,
 :is(.button, button).none:not(.small, .medium, .large, .extra)::after {
-  top: -0.25rem;
-  left: -0.25rem;
+  inset-block-start: -0.25rem;
+  inset-inline-start: -0.25rem;
   padding: 0.25rem;
 }
 

package/src/cdn/settings/dark.css

@@ -17,7 +17,7 @@ body.dark {
   --on-error-container: #ffb4ab;
   --background: #1c1b1e;
   --on-background: #e6e1e6;
-  --surface: #1c1b1e;
+  --surface: #141316;
   --on-surface: #e6e1e6;
   --surface-variant: #49454e;
   --on-surface-variant: #cac4cf;
@@ -28,7 +28,13 @@ body.dark {
   --inverse-surface: #e6e1e6;
   --inverse-on-surface: #313033;
   --inverse-primary: #6750a4;
-  --body: #000;
+  --surface-dim: #141316;
+  --surface-bright: #3a383c;
+  --surface-container-lowest: #0f0e11;
+  --surface-container-low: #1c1b1e;
+  --surface-container: #201f22;
+  --surface-container-high: #2b292d;
+  --surface-container-highest: #363438;
   --overlay: rgb(0 0 0 / 0.5);
   --active: rgb(255 255 255 / 0.2);
   --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);

package/src/cdn/settings/light.css

@@ -18,7 +18,7 @@ body.light {
   --on-error-container: #410002;
   --background: #fffbff;
   --on-background: #1c1b1e;
-  --surface: #fffbff;
+  --surface: #fdf8fd;
   --on-surface: #1c1b1e;
   --surface-variant: #e7e0eb;
   --on-surface-variant: #49454e;
@@ -29,7 +29,13 @@ body.light {
   --inverse-surface: #313033;
   --inverse-on-surface: #f4eff4;
   --inverse-primary: #cfbcff;
-  --body: #FFF;
+  --surface-dim: #ddd8dd;
+  --surface-bright: #fdf8fd;
+  --surface-container-lowest: #ffffff;
+  --surface-container-low: #f7f2f7;
+  --surface-container: #f2ecf1;
+  --surface-container-high: #ece7eb;
+  --surface-container-highest: #e6e1e6;
   --overlay: rgb(0 0 0 / 0.5);
   --active: rgb(0 0 0 / 0.1);
   --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);