beercss 3.4.11 → 3.4.13

package/src/cdn/elements/dialogs.css

@@ -20,10 +20,6 @@ dialog {
   transform: translate(-50%, -4rem);
 }
 
-[dir=rtl] dialog {
-  transform: translate(50%, -4rem);
-}
-
 dialog::backdrop {
   display: none;
 }
@@ -49,12 +45,7 @@ dialog:is(.active, [open]) {
   transform: translate(-50%, 0);
 }
 
-[dir=rtl] dialog:is(.active, [open]) {
-  transform: translate(50%, 0);
-}
-
-dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max),
-[dir=rtl] dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
+dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
   transform: translate(0, 0);
 }
 
@@ -82,10 +73,6 @@ dialog.left {
   transform: translateX(-100%);
 }
 
-[dir=rtl] dialog.left {
-  transform: translateX(100%);
-}
-
 dialog.right {
   opacity: 1;
   padding: 1rem;
@@ -98,10 +85,6 @@ dialog.right {
   transform: translateX(100%);
 }
 
-[dir=rtl] dialog.right {
-  transform: translateX(-100%);
-}
-
 dialog.bottom {
   opacity: 1;
   padding: 1rem;

package/src/cdn/elements/fields.css

@@ -88,12 +88,12 @@
 }
 
 .field > :is(i, img, svg, progress, a:not(.helper, .error)),
-[dir=rtl] .field > :is(i, a:not(.helper, .error)):first-child {
+[dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child {
   inset: 50% 1rem auto auto;
 }
 
 .field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child,
-[dir=rtl] .field > :is(i, a:not(.helper, .error)) {
+[dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)) {
   inset: 50% auto auto 1rem;
 }
 
@@ -336,6 +336,10 @@ input::-webkit-search-results-decoration {
   white-space: nowrap;
 }
 
+[dir=rtl] .field.label > label {
+  inset: -0.5rem 1rem auto auto;
+}
+
 .field.label.small > label {
   block-size: 3.5rem;
   line-height: 3.5rem;

package/src/cdn/elements/layouts.css

@@ -36,52 +36,52 @@
 
 header,
 footer {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  min-block-size: 4rem;
   padding: 0 1rem;
   background-color: var(--surface-container);
 }
 
+main ~ footer {
+  min-block-size: 5rem;
+}
+
+:is(header, footer).fixed.responsive {
+  z-index: 12;
+}
+
 :is(header, footer, menu > *).fixed {
   position: sticky;
   inset: 0;
-  z-index: 12;
+  z-index: 11;
   background-color: inherit;
 }
 
-:is(dialog, menu) > :is(header, footer) {
-  padding: 0;
+:is(dialog, menu, nav, article) > :is(header, footer) {
   background-color: inherit;
+  padding: 0;
 }
 
-article > :is(header, footer) {
-  padding: inherit;
-  padding-inline: 0;
-  z-index: 11 !important;
-}
+:is(dialog, article, [class*=padding]) > :is(header, footer).fixed {
+  ---translateY: 1rem;
 
-:is(dialog, article, .padding, .medium-padding) > header.fixed {
-  transform: translateY(-1rem);
+  transform: translateY(var(---translateY));
 }
 
-:is(dialog, article, .padding, .medium-padding) > footer.fixed {
-  transform: translateY(1rem);
+:is(dialog, article, [class*=padding]) > header.fixed {
+  transform: translateY(calc(-1 * var(---translateY)));
 }
 
 .no-padding > :is(header, footer).fixed {
   transform: none;
 }
 
-.small-padding > header.fixed {
-  transform: translateY(-0.5rem);
-}
-
-.small-padding > footer.fixed {
-  transform: translateY(0.5rem);
-}
-
-.large-padding > header.fixed {
-  transform: translateY(-1.5rem);
+.small-padding > :is(header, footer).fixed {
+  ---translateY: 0.5rem;
 }
 
-.large-padding > footer.fixed {
-  transform: translateY(1.5rem);
+:is(.large-padding, dialog:not(.left, .right, .top, .bottom)) > :is(header, footer).fixed {
+  ---translateY: 1.5rem;
 }

package/src/cdn/elements/menus.css

@@ -43,15 +43,22 @@ menu * {
   white-space: inherit !important;
 }
 
-menu > a {
-  padding: 0.75rem 1rem;
+menu > a,
+menu > li > a {
+  padding: 0.5rem 1rem;
+  min-block-size: 3rem;
+  flex: 1;
 }
 
-menu > a:not(.row) {
-  display: block;
+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 > a:is(:hover, :focus, .active),
+menu > li > a:is(:hover, :focus, .active) {
   background-color: var(--active);
 }
 

package/src/cdn/elements/navigations.css

@@ -1,7 +1,17 @@
+ol,
+ul,
+li {
+  all: unset;
+  position: relative;
+}
+
 nav,
+ol,
+ul,
 .row,
+a.row,
 nav.drawer > :is(a, label),
-nav.drawer :is(summary, details) > :is(a, label) {
+nav.drawer > :is(ol, ul) > li > :is(a, label) {
   display: flex;
   align-items: center;
   align-self: normal;
@@ -9,67 +19,55 @@ nav.drawer :is(summary, details) > :is(a, label) {
   justify-content: flex-start;
   white-space: nowrap;
   gap: 1rem;
+  margin: 0;
 }
 
-:not(.divider, .small-divider, .medium-divider, .large-divider) + nav:not(.left, .right, .top, .bottom),
-:not(.divider, .small-divider, .medium-divider, .large-divider) + .row:not(a) {
-  margin-block-start: 1rem;
+:is(nav, .row, .max) > :only-child {
+  margin: 0;
 }
 
-:is(nav, .row) > *,
-:is(nav, .row) > :not(.tooltip, menu) > * {
-  margin-block: 0;
+* + :is(nav, ul, ol, .row) {
+  margin-block-start: 1rem;
 }
 
-nav > *,
-.row > * {
-  margin: 0 !important;
+:is(nav, ol, ul, li, .row) > * {
+  margin: 0;
   white-space: normal;
   flex: none;
 }
 
-:is(nav, .row).no-space {
+:is(nav, ol, ul, .row).no-space {
   gap: 0;
 }
 
-:is(nav, .row).no-space > .border + .border {
+:is(nav, ol, ul, li, .row).no-space > .border + .border {
   border-inline-start: 0;
 }
 
-:is(nav, .row).medium-space {
+:is(nav, ol, ul, .row).medium-space {
   gap: 1.5rem;
 }
 
-:is(nav, .row).large-space {
+:is(nav, ol, ul, .row).large-space {
   gap: 2rem;
 }
 
-nav > .max,
-.row > .max,
+:is(nav, ol, ul, li, .row) > .max,
 nav.drawer > :is(a, label) > .max,
-nav.drawer :is(summary, details) > :is(a, label) > .max {
-  flex: auto;
+nav.drawer > :is(ol, ul) > li > :is(a, label) > .max {
+  flex: 1;
 }
 
-nav.wrap,
-.row.wrap {
+:is(nav, ol, ul, .row).wrap {
   display: flex;
   flex-wrap: wrap;
 }
 
-header > :is(nav, .row) {
-  min-block-size: 4rem;
-}
-
-footer > :is(nav, .row) {
-  min-block-size: 5rem;
-}
-
-nav > header > :is(nav, .row) {
-  margin-block-start: -0.5rem !important;
+:is(header, footer) > :is(nav, ol, ul, .row) {
+  min-block-size: inherit;
 }
 
-:is(nav, .row) > .border.no-margin + .border.no-margin {
+:is(nav, li, .row) > .border.no-margin + .border.no-margin {
   border-inline-start: 0;
 }
 
@@ -83,6 +81,7 @@ nav:is(.left, .right, .top, .bottom) {
   inline-size: auto;
   text-align: center;
   padding: 0.5rem;
+  margin: 0;
 }
 
 nav:is(.left, .right) {
@@ -131,82 +130,118 @@ nav.drawer.max {
   inline-size: 100%;
 }
 
-nav > header {
-  padding: 0;
+:is(nav, .row) > header {
   background-color: inherit;
-  block-size: 4rem;
 }
 
-nav.drawer > header {
-  block-size: 4.5rem;
-  align-self: start;
+nav:is(.left, .right) > header {
+  transform: translateY(-0.5rem);
 }
 
-nav.drawer:not(.left, .right) > header {
-  align-self: stretch;
+nav.drawer > header {
+  transform: translateY(-0.75rem);
+  min-block-size: 4.5rem;
+  align-self: start;
 }
 
 nav.drawer > :is(a, label),
-nav.drawer :is(summary, details) > a,
+nav.drawer > :is(ol, ul) > li > :is(a, label),
 a.row.wave {
   padding: 0.75rem;
   font-size: inherit;
 }
 
 nav.drawer > a,
-nav.drawer :is(summary, details) > a {
+nav.drawer > :is(ol, ul) > li > a {
   border-radius: 2rem;
 }
 
 nav.drawer > a:is(:hover, .active),
-nav.drawer :is(summary, details) > a:is(:hover, .active) {
+nav.drawer > :is(ol, ul) > li > a:is(:hover, .active) {
   background-color: var(--secondary-container);
 }
 
 nav.drawer > a:is(:hover, :focus, .active) > i,
-nav.drawer :is(summary, details) > a:is(:hover, :focus, .active) > i {
+nav.drawer > :is(ol, ul) > li > a:is(:hover, :focus, .active) > i {
   font-variation-settings: "FILL" 1;
 }
 
-nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(button, .button, .chip, img, video, svg) {
+nav > :is(ol, ul) {
+  all: inherit;
+  flex: auto;
+}
+
+nav:not(.left, .right, .bottom, .top) > :is(ol, ul) {
+  padding: 0;
+}
+
+nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip),
+nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
   text-align: center;
   display: flex;
   flex-direction: column;
 }
 
-nav:is(.top, .bottom):not(.drawer) > a:not(button, .button, .chip, img, video, svg) {
+nav:is(.top, .bottom):not(.drawer) > a:not(.button, .chip),
+nav:is(.top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) {
   inline-size: 3.5rem;
 }
 
-nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(button, .button, .chip) > i {
+nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip) > i,
+nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip) > i {
   padding: 0.25rem;
   border-radius: 2rem;
   transition: var(--speed1) padding linear;
   margin: 0 auto;
 }
 
-nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(button, .button, .chip):is(:hover, :focus, .active) > i {
+nav:is(.left, .right, .top, .bottom):not(.drawer) > a:not(.button, .chip):is(:hover, :focus, .active) > i,
+nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.button, .chip):is(:hover, :focus, .active) > i {
   background-color: var(--secondary-container);
   color: var(--on-secondary-container);
   padding: 0.25rem 1rem;
   font-variation-settings: "FILL" 1;
 }
 
-nav.left-align,
-nav.top-align {
+:is(nav, ol, ul, .row):is(.left-align, .top-align, .vertical) {
   justify-content: flex-start;
 }
 
-nav.right-align,
-nav.bottom-align {
+:is(nav, ol, ul, .row):is(.right-align, .bottom-align) {
   justify-content: flex-end;
 }
 
-nav.center-align,
-nav.middle-align {
+:is(nav, ol, ul, .row):is(.center-align, .middle-align) {
   justify-content: center;
 }
 
+:is(nav, ol, ul, .row):is(.left-align, .top-align, .vertical).vertical {
+  align-items: flex-start;
+}
+
+:is(nav, ol, ul, .row):is(.right-align, .bottom-align).vertical {
+  align-items: flex-end;
+}
+
+:is(nav, ol, ul, .row):is(.center-align, .middle-align).vertical {
+  align-items: center;
+}
+
+:is(ol, ul) > li {
+  align-items: inherit;
+  justify-content: inherit;
+}
+
+nav:is(.left, .right):not(.drawer) > *,
+nav:is(.left, .right):not(.drawer) > :is(ol, ul) > li {
+  align-self: center;
+}
+
+:is(.drawer, .vertical) > :is(li, [class*=divider]),
+:is(.drawer, .vertical) > :is(ol, ul) > li {
+  align-self: stretch;
+}
+
 nav:not(.left, .right) > .space {
   inline-size: 0.5rem;
 }

package/src/cdn/elements/pages.css

@@ -26,18 +26,10 @@
   ---transform: translate(-4rem, 0);
 }
 
-[dir=rtl] .page.active.left {
-  ---transform: translate(4rem, 0);
-}
-
 .page.active.right {
   ---transform: translate(4rem, 0);
 }
 
-[dir=rtl] .page.active.right {
-  ---transform: translate(-4rem, 0);
-}
-
 @keyframes to-page {
   from {
     opacity: 0;

package/src/cdn/elements/selections.css

@@ -164,12 +164,6 @@
   cursor: not-allowed;
 }
 
-.checkbox + .checkbox,
-.radio + .radio,
-.switch + .switch {
-  margin-inline-start: 0.5rem;
-}
-
 .switch > span::after {
   content: "";
   position: absolute;

package/src/cdn/elements/sliders.css

@@ -123,6 +123,10 @@
   inset: calc(50% - 0.1875rem) var(---end) auto var(---start);
 }
 
+[dir=rtl] .slider > span {
+  inset: calc(50% - 0.1875rem) var(---start) auto var(---end);
+}
+
 .field > .slider {
   inline-size: 100%;
 }
@@ -148,7 +152,7 @@
 }
 
 [dir=rtl] .slider > .tooltip {
-  transform: translate(50%, -50%) rotate(45deg) !important;
+  inset: 0.25rem auto auto var(---end);
 }
 
 .slider > .tooltip + .tooltip {
@@ -157,7 +161,7 @@
 }
 
 [dir=rtl] .slider > .tooltip + .tooltip {
-  transform: translate(-50%, -50%) rotate(45deg) !important;
+  inset: 0.25rem var(---start) auto auto;
 }
 
 .slider > .tooltip::before {
@@ -170,7 +174,7 @@
 }
 
 .slider:hover > .tooltip {
-  inset-block-start: -0.25rem;
+  inset-block-start: -0.25rem !important;
   opacity: 1;
 }
 

package/src/cdn/elements/snackbars.css

@@ -22,11 +22,6 @@
   transform: var(---transform-end);
 }
 
-[dir=rtl] .snackbar {
-  ---transform-start: translate(50%, 1rem);
-  ---transform-end: translate(50%, 0);
-}
-
 .snackbar.top {
   inset: 6rem auto auto 50%;
 }
@@ -40,10 +35,6 @@
   ---transform-end: translate(-50%, -1rem);
 }
 
-[dir=rtl] .snackbar.active.top {
-  ---transform-end: translate(50%, -1rem);
-}
-
 .snackbar > .max {
   flex: auto;
 }

package/src/cdn/elements/tooltips.css

@@ -24,37 +24,21 @@
   transform: translate(-50%, -100%) scale(0.9);
 }
 
-[dir=rtl] .tooltip {
-  transform: translate(50%, -100%) scale(0.9);
-}
-
 .tooltip.left {
   inset: 50% auto auto 0;
   transform: translate(-100%, -50%) scale(0.9);
 }
 
-[dir=rtl] .tooltip.left {
-  transform: translate(100%, -50%) scale(0.9);
-}
-
 .tooltip.right {
   inset: 50% 0 auto auto;
   transform: translate(100%, -50%) scale(0.9);
 }
 
-[dir=rtl] .tooltip.right {
-  transform: translate(-100%, -50%) scale(0.9);
-}
-
 .tooltip.bottom {
   inset: auto auto 0 50%;
   transform: translate(-50%, 100%) scale(0.9);
 }
 
-[dir=rtl] .tooltip.bottom {
-  transform: translate(50%, 100%) scale(0.9);
-}
-
 .tooltip.small {
   inline-size: 8rem;
   white-space: normal;
@@ -76,34 +60,18 @@
   transform: translate(-50%, -100%) scale(1);
 }
 
-[dir=rtl] :hover > .tooltip {
-  transform: translate(50%, -100%) scale(1);
-}
-
 :hover > .tooltip.left {
   transform: translate(-100%, -50%) scale(1);
 }
 
-[dir=rtl] :hover > .tooltip.left {
-  transform: translate(100%, -50%) scale(1);
-}
-
 :hover > .tooltip.right {
   transform: translate(100%, -50%) scale(1);
 }
 
-[dir=rtl] :hover > .tooltip.right {
-  transform: translate(-100%, -50%) scale(1);
-}
-
 :hover > .tooltip.bottom {
   transform: translate(-50%, 100%) scale(1);
 }
 
-[dir=rtl] :hover > .tooltip.bottom {
-  transform: translate(50%, 100%) scale(1);
-}
-
 .tooltip.no-space {
   ---space: 0;
 }
@@ -120,12 +88,9 @@
   margin-block-start: var(---space) !important;
 }
 
-.tooltip.left {
-  margin-inline-start: var(---space) !important;
-}
-
+.tooltip.left,
 .tooltip.right {
-  margin-inline-end: var(---space) !important;
+  margin-inline: var(---space) !important;
 }
 
 .tooltip.bottom {

package/src/cdn/helpers/blurs.css

@@ -1,5 +1,5 @@
-:is(.blur, .small-blur, .medium-blur, .large-blur),
-:is(.blur, .small-blur, .medium-blur, .large-blur).light {
+[class*=blur],
+[class*=blur].light {
   ---blur: 1rem;
   -webkit-backdrop-filter: blur(var(---blur));
   backdrop-filter: blur(var(---blur));
@@ -7,8 +7,8 @@
   background-color: rgb(255 255 255 / 0.5);
 }
 
-.dark :is(.blur, .small-blur, .medium-blur, .large-blur),
-:is(.blur, .small-blur, .medium-blur, .large-blur).dark {
+.dark [class*=blur],
+[class*=blur].dark {
   background-color: rgb(0 0 0 / 0.5);
 }
 

package/src/cdn/helpers/dividers.css

@@ -1,12 +1,12 @@
-.divider,
-.small-divider,
-.medium-divider,
-.large-divider {
+[class*=divider] {
   min-inline-size: 1.5rem;
   min-block-size: auto;
   block-size: 0.0625rem;
   background-color: var(--outline-variant);
   display: block;
+}
+
+[class*=divider] + * {
   margin: 0 !important;
 }
 

package/src/cdn/helpers/margins.css

@@ -1,20 +1,8 @@
-:is(.no-margin, .auto-margin, .tiny-margin, .small-margin, .medium-margin, .margin, .large-margin):not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
+[class*=margin]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
   margin: var(---margin) !important;
 }
 
-.no-margin,
-.auto-margin,
-.tiny-margin,
-.small-margin,
-.medium-margin,
-.margin,
-.large-margin,
-.left-margin,
-.right-margin,
-.top-margin,
-.bottom-margin,
-.horizontal-margin,
-.vertical-margin {
+[class*=margin] {
   ---margin: 1rem;
 }
 

package/src/cdn/helpers/paddings.css

@@ -1,20 +1,8 @@
-:is(.no-padding, .auto-padding, .tiny-padding, .small-padding, .medium-padding, .padding, .large-padding):not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
+[class*=padding]:not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
   padding: var(---padding) !important;
 }
 
-.no-padding,
-.auto-padding,
-.tiny-padding,
-.small-padding,
-.medium-padding,
-.padding,
-.large-padding,
-.left-padding,
-.right-padding,
-.top-padding,
-.bottom-padding,
-.horizontal-padding,
-.vertical-padding {
+[class*=padding] {
   ---padding: 1rem;
 }