beercss 3.5.0 → 3.5.2

package/src/cdn/elements/fields.css

@@ -1,5 +1,8 @@
 .field {
-  block-size: 3rem;
+  ---size: 3rem;
+  ---start: 1.2rem;
+
+  block-size: var(---size);
   margin-block-end: 2rem;
 }
 
@@ -28,15 +31,18 @@
 }
 
 .field.small {
-  block-size: 2.5rem;
+  ---size: 2.5rem;
+  ---start: 1rem;
 }
 
 .field.large {
-  block-size: 3.5rem;
+  ---size: 3.5rem;
+  ---start: 1.4rem;
 }
 
 .field.extra {
-  block-size: 4rem;
+  ---size: 4rem;
+  ---start: 1.6rem;
 }
 
 .field {
@@ -63,19 +69,6 @@
   border-radius: 2rem;
 }
 
-.field::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  background-color: inherit;
-}
-
-.field.fill::before {
-  background-color: var(--surface-container-highest);
-  color: var(--on-surface-variant);
-}
-
 /* icon */
 .field > :is(i, img, svg, progress, a:not(.helper, .error)) {
   position: absolute;
@@ -117,7 +110,12 @@
 
 /* input, textarea and select */
 .field > :is(input, textarea, select) {
-  appearance: none;
+  all: unset;
+  position: relative;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  border-radius: inherit;
   border: 0.0625rem solid transparent;
   padding: 0 0.9375rem;
   font-family: inherit;
@@ -135,6 +133,12 @@
   padding: 0 0.875rem;
 }
 
+.field.min > textarea {
+  overflow: hidden;
+  position: absolute;
+  inset: 0;
+}
+
 input[type=file],
 input[type=color],
 :not(.field) > input[type^=date],
@@ -237,20 +241,20 @@ input::-webkit-search-results-decoration {
   cursor: not-allowed;
 }
 
-.field.small.textarea {
-  block-size: 4.5rem;
+.field.textarea.small:not(.min) {
+  ---size: 4.5rem;
 }
 
-.field.textarea {
-  block-size: 5.5rem;
+.field.textarea:not(.min) {
+  ---size: 5.5rem;
 }
 
-.field.large.textarea {
-  block-size: 6.5rem;
+.field.textarea.large:not(.min) {
+  ---size: 6.5rem;
 }
 
-.field.extra.textarea {
-  block-size: 7.5rem;
+.field.textarea.extra:not(.min) {
+  ---size: 7.5rem;
 }
 
 .field > select > option {
@@ -266,60 +270,22 @@ input::-webkit-search-results-decoration {
   padding-block-start: 0;
 }
 
-.field.label.small > textarea {
-  padding-block-start: 1.125rem;
+.field > textarea {
+  padding-block-start: var(---start);
 }
 
-.field.label > textarea {
-  padding-block-start: 1.375rem;
+.field > textarea:focus {
+  padding-block-start: calc(var(---start) - 0.06rem);
 }
 
-.field.label.large > textarea {
-  padding-block-start: 1.625rem;
+.field:not(.label) > textarea,
+.field.border.label:not(.fill) > textarea {
+  padding-block-start: calc(var(---start) - 0.5rem);
 }
 
-.field.label.extra > textarea {
-  padding-block-start: 1.875rem;
-}
-
-.field.small > textarea,
-.field.small:not(.label) > textarea:focus,
-.field.small.border:not(.fill) > textarea {
-  padding-block-start: 0.625rem;
-}
-
-.field > textarea,
 .field:not(.label) > textarea:focus,
-.field.border:not(.fill) > textarea {
-  padding-block-start: 0.875rem;
-}
-
-.field.large > textarea,
-.field.large:not(.label) > textarea:focus,
-.field.large.border:not(.fill) > textarea {
-  padding-block-start: 1.125rem;
-}
-
-.field.extra > textarea,
-.field.extra:not(.label) > textarea:focus,
-.field.extra.border:not(.fill) > textarea {
-  padding-block-start: 1.375rem;
-}
-
-.field.small.border:not(.fill) > textarea:focus {
-  padding-block-start: 0.5625rem !important;
-}
-
-.field.border:not(.fill) > textarea:focus {
-  padding-block-start: 0.8125rem !important;
-}
-
-.field.large.border:not(.fill) > textarea:focus {
-  padding-block-start: 1.0625rem !important;
-}
-
-.field.extra.border:not(.fill) > textarea:focus {
-  padding-block-start: 1.3125rem !important;
+.field.border.label:not(.fill) > textarea:focus {
+  padding-block-start: calc(var(---start) - 0.56rem);
 }
 
 /* label */
@@ -446,6 +412,10 @@ input::-webkit-search-results-decoration {
   padding-block-start: 0.125rem;
 }
 
+[dir=rtl] .field > :is(.helper, .error) {
+  inset: auto 1rem 0 auto;
+}
+
 a.helper {
   color: var(--primary);
 }

package/src/cdn/elements/icons.css

@@ -63,7 +63,7 @@ i > :is(img, svg) {
   padding: inherit;
 }
 
-i[class*="fa-"] {
+i[class*=fa-] {
   font-size: calc(var(---size) * 0.85);
   line-height: normal;
   block-size: auto;

package/src/cdn/elements/media.css

@@ -1,11 +1,11 @@
 svg {
-  fill: currentColor;
+  fill: currentcolor;
 }
 
 :is(img, svg, video):is(.small, .medium, .large, .tiny, .extra, .round, .circle, .responsive) {
   object-fit: cover;
   object-position: center;
-  transition: var(--speed3) transform, var(--speed3) border-radius, var(--speed3) padding;
+  transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);
   block-size: 3rem;
   inline-size: 3rem;
 }

package/src/cdn/elements/menus.css

@@ -23,7 +23,11 @@ menu {
   text-align: start;
   border-radius: 0.25rem;
   transform: scale(0.8) translateY(120%);
-  transition: var(--speed2) all, 0s background-color;
+  transition: all var(--speed2), 0s background-color;
+}
+
+[dir=rtl] menu {
+  inset: auto 0 0 auto;
 }
 
 menu.no-wrap {
@@ -68,6 +72,16 @@ menu.min {
   border-radius: inherit;
 }
 
+[dir=rtl] menu.min.right,
+menu.min.left {
+  inset: 0 0 auto auto;
+}
+
+[dir=rtl] menu.min.left,
+menu.min.right {
+  inset: 0 auto auto 0;
+}
+
 menu.max {
   position: fixed;
   inset: 0;
@@ -82,10 +96,12 @@ menu.no-wrap:is(.min, .max) {
   min-inline-size: 16rem;
 }
 
+[dir=rtl] menu.right,
 menu.left {
   inset: auto 0 0 auto;
 }
 
+[dir=rtl] menu.left,
 menu.right {
   inset: auto auto 0 0;
 }

package/src/cdn/elements/navigations.css

@@ -80,6 +80,7 @@ nav:is(.left, .right, .top, .bottom) {
   text-align: center;
   padding: 0.5rem;
   margin: 0;
+  inset: 0;
 }
 
 nav:is(.left, .right) {
@@ -97,19 +98,19 @@ nav:is(.top, .bottom) {
 }
 
 nav.top {
-  inset: 0 0 auto 0;
+  inset-block-end: auto;
 }
 
 nav.left {
-  inset: 0 auto 0 0;
+  inset-inline-end: auto;
 }
 
 nav.right {
-  inset: 0 0 0 auto;
+  inset-inline-start: auto;
 }
 
 nav.bottom {
-  inset: auto 0 0 0;
+  inset-block-start: auto;
 }
 
 nav.drawer {
@@ -189,7 +190,7 @@ 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;
+  transition: padding var(--speed1) linear;
   margin: 0 auto;
 }
 
@@ -225,11 +226,6 @@ nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.bu
   align-items: center;
 }
 
-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]):not(.vertical),
 :is(.drawer, .vertical) > :is(ol, ul) > li:not(.vertical) {
   align-self: stretch;

package/src/cdn/elements/overlays.css

@@ -8,7 +8,7 @@
   color: var(--on-surface);
   background-color: var(--overlay);
   z-index: 100;
-  transition: var(--speed3) all, 0s background-color;
+  transition: all var(--speed3), 0s background-color;
 }
 
 nav > .overlay {

package/src/cdn/elements/progress.css

@@ -9,6 +9,7 @@ progress {
   border: none;
   overflow: hidden;
   writing-mode: horizontal-tb;
+  direction: ltr;
 }
 
 progress.small {
@@ -30,7 +31,7 @@ progress:not(.circle, [value])::after {
   inline-size: 100%;
   block-size: 100%;
   clip-path: none;
-  background: currentColor;
+  background: currentcolor;
   animation: 1.6s to-linear ease infinite;
 }
 
@@ -47,11 +48,11 @@ progress::-webkit-progress-bar {
 }
 
 progress::-webkit-progress-value {
-  background: currentColor;
+  background: currentcolor;
 }
 
 progress::-moz-progress-bar {
-  background: currentColor;
+  background: currentcolor;
 }
 
 progress.circle {
@@ -61,7 +62,7 @@ progress.circle {
   border-radius: 50%;
   border-width: 0.3rem;
   border-style: solid;
-  border-color: currentColor;
+  border-color: currentcolor;
   animation: 1.6s to-circular linear infinite;
   background: none;
   flex: none;
@@ -109,10 +110,20 @@ progress.vertical {
   writing-mode: vertical-lr;
 }
 
+progress.max.vertical {
+  transform: rotate(-180deg);
+}
+
 :has(> progress) > :not(progress) {
   z-index: 1;
 }
 
+@supports (-moz-appearance:none) {
+  progress.max.vertical {
+    transform: none;
+  }
+}
+
 @keyframes to-linear {
   0% {
     margin-inline-start: 0%;

package/src/cdn/elements/selections.css

@@ -66,7 +66,7 @@
   user-select: none;
   z-index: 1;
   box-shadow: 0 0 0 0 var(--active);
-  transition: var(--speed1) all;
+  transition: all var(--speed1);
 }
 
 .switch > span::before,
@@ -77,7 +77,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  transition: var(--speed2) all;
+  transition: all var(--speed2);
   font-size: 1rem;
   user-select: none;
   min-inline-size: auto;
@@ -189,3 +189,21 @@
   flex-grow: 1;
   padding: 0 1.5rem;
 }
+
+[dir=rtl] .switch {
+  transform: scale(-1);
+}
+
+[dir=rtl] .switch > span::before,
+[dir=rtl] .switch.icon > span > i {
+  transform: translate(-3rem, -50%) scale(-0.6);
+}
+
+[dir=rtl] .switch.icon > span > i {
+  transform: translate(-3rem, -50%) scale(-1);
+}
+
+[dir=rtl] .switch > input:checked + span::before,
+[dir=rtl] .switch.icon > input:checked + span > i {
+  transform: translate(-1.75rem, -50%) scale(-1);
+}

package/src/cdn/elements/sliders.css

@@ -10,6 +10,11 @@
   block-size: 1.25rem;
   margin: 1.125rem;
   flex: none;
+  direction: ltr;
+}
+
+[dir=rtl] .slider {
+  transform: scaleX(-1);
 }
 
 .slider.vertical {
@@ -51,7 +56,6 @@
 }
 
 .slider > input:only-of-type {
-  cursor: pointer;
   pointer-events: all;
 }
 
@@ -69,10 +73,14 @@
   inline-size: 0.25rem;
   border-radius: 0.25rem;
   background: var(--primary);
-  cursor: pointer;
+  cursor: grab;
   margin: 0;
 }
 
+.slider > input::-webkit-slider-thumb:active {
+  cursor: grabbing;
+}
+
 .slider > input::-moz-range-thumb {
   appearance: none;
   box-shadow: none;
@@ -83,10 +91,14 @@
   inline-size: 0.25rem;
   border-radius: 0.25rem;
   background: var(--primary);
-  cursor: pointer;
+  cursor: grab;
   margin: 0;
 }
 
+.slider > input::-moz-range-thumb:active {
+  cursor: grabbing;
+}
+
 .slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb {
   transform: scaleX(0.6);
 }
@@ -129,10 +141,6 @@
   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%);
 }
 
-[dir=rtl] .slider > span {
-  inset: calc(50% - 0.5rem) var(---start) auto var(---end);
-}
-
 .field > .slider {
   inline-size: 100%;
 }
@@ -151,19 +159,18 @@
   background: var(--active);
 }
 
-.slider > .tooltip,
-.slider:hover > .tooltip {
+.slider > .tooltip {
   opacity: 0;
   inset: 0 auto auto calc(100% - var(---end));
   border-radius: 2rem;
-  transition: var(--speed2) ease top, var(--speed2) ease opacity;
+  transition: top var(--speed2) ease, opacity var(--speed2) ease;
   transform: translate(-50%, -50%) !important;
   padding: 0.75rem 1rem;
   z-index: 0;
 }
 
 [dir=rtl] .slider > .tooltip {
-  inset: 0.25rem auto auto var(---end);
+  transform: translate(-50%, -50%) scaleX(-1) !important;
 }
 
 .slider > .tooltip + .tooltip {
@@ -172,7 +179,7 @@
 }
 
 [dir=rtl] .slider > .tooltip + .tooltip {
-  inset: 0.25rem var(---start) auto auto;
+  transform: translate(50%, -50%) scaleX(-1) !important;
 }
 
 .slider > .tooltip::before {
@@ -195,3 +202,55 @@
 :is(nav, .row, .field) > .slider:not(.circle, .small, .medium, .large) {
   flex: auto;
 }
+
+.slider.max,
+.slider.max.vertical,
+.slider.max > input,
+.slider.max.vertical > input {
+  all: unset;
+  margin: 0 !important;
+  position: absolute;
+  color: var(--primary);
+  inset: 0;
+  border-radius: inherit;
+  overflow: hidden;
+  z-index: 2;
+  cursor: grab;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.slider.max::before {
+  display: none;
+}
+
+.slider.max.vertical > input {
+  writing-mode: vertical-lr;
+  transform: rotate(-180deg);
+}
+
+.slider.max > input::-webkit-slider-thumb {
+  opacity: 0;
+  inline-size: 1rem;
+  block-size: 100vh;
+  transform: none !important;
+}
+
+.slider.max > input::-moz-range-thumb {
+  opacity: 0;
+  inline-size: 1rem;
+  block-size: 100vh;
+  transform: none !important;
+}
+
+.slider.max > span {
+  block-size: auto !important;
+  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;
+}

package/src/cdn/elements/tables.css

@@ -26,7 +26,6 @@ table :is(thead, tbody, tfoot, tr, th) {
 
 :is(th, td) > * {
   vertical-align: middle;
-  z-index: 0;
 }
 
 table.border > tbody > tr:not(:last-child) > td,

package/src/cdn/elements/tooltips.css

@@ -19,7 +19,7 @@
   white-space: nowrap;
   font-weight: 500;
   opacity: 0;
-  transition: var(--speed2) all;
+  transition: all var(--speed2);
   line-height: normal;
   transform: translate(-50%, -100%) scale(0.9);
 }

package/src/cdn/helpers/paddings.css

@@ -10,10 +10,6 @@
   ---padding: 0;
 }
 
-.auto-padding {
-  ---padding: auto;
-}
-
 .tiny-padding {
   ---padding: 0.25rem;
 }

package/src/cdn/helpers/typography.css

@@ -5,7 +5,8 @@ html {
 body {
   font-family: var(--font);
   font-size: 0.875rem;
-  line-height: 1.5;
+  line-height: 1.5rem;
+  letter-spacing: 0.0313rem;
 }
 
 h1,
@@ -164,21 +165,21 @@ p {
 }
 
 .tiny-line {
-  line-height: 1.25;
+  line-height: 1.25rem;
 }
 
 .small-line {
-  line-height: 1.5;
+  line-height: 1.5rem;
 }
 
 .medium-line {
-  line-height: 1.75;
+  line-height: 1.75rem;
 }
 
 .large-line {
-  line-height: 2;
+  line-height: 2rem;
 }
 
 .extra-line {
-  line-height: 2.25;
+  line-height: 2.25rem;
 }

package/src/cdn/helpers/waves.css

@@ -26,7 +26,7 @@
 :is(.wave, .chip, .button, button):is(:focus-visible, :hover)::after {
   background-size: 15000%;
   opacity: 1;
-  transition: var(--speed2) background-size linear;
+  transition: background-size var(--speed2) linear;
 }
 
 :is(.wave, .chip, .button, button):active::after {

package/src/cdn/settings/fonts.css

@@ -3,10 +3,10 @@
   font-family: "Material Symbols Outlined";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  font-display: block;
   src:
     url("../material-symbols-outlined.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.5.0/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.5.2/dist/cdn/material-symbols-outlined.woff2") format("woff2");
 }
 
 /* rounded icons */
@@ -14,10 +14,10 @@
   font-family: "Material Symbols Rounded";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  font-display: block;
   src:
     url("../material-symbols-rounded.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.5.0/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.5.2/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 }
 
 /* sharp icons */
@@ -25,8 +25,8 @@
   font-family: "Material Symbols Sharp";
   font-style: normal;
   font-weight: 400;
-  font-display: swap;
+  font-display: block;
   src:
     url("../material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.5.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.5.2/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }