beercss 3.9.6 → 3.10.0

package/src/cdn/elements/fields.css

@@ -1,8 +1,7 @@
 .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;
 }
@@ -28,18 +27,18 @@
 }
 
 .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 {
@@ -127,7 +126,7 @@ 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);
 }
@@ -251,19 +250,19 @@ input[type=number] {
 }
 
 .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 {
@@ -284,22 +283,22 @@ input[type=number] {
 }
 
 .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 */
@@ -308,31 +307,21 @@ 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;
 }
 
-[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.textarea:not(.min) > label {
+  block-size: calc(var(--_size) - 1.5rem);
+  line-height: calc(var(--_size) - 1.5rem);
 }
 
-.field.label.large > label {
-  block-size: 4.5rem;
-  line-height: 4.5rem;
-}
-
-.field.label.extra > label {
-  block-size: 5rem;
-  line-height: 5rem;
+[dir=rtl] .field.label > label {
+  inset: -0.5rem 1rem auto auto;
 }
 
 .field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {

package/src/cdn/elements/fields.ts

@@ -144,7 +144,7 @@ function updateTextarea(textarea: HTMLTextAreaElement) {
   updatePlaceholder(textarea);
   const field = parent(textarea) as HTMLElement;
   field.removeAttribute("style");
-  if (hasClass(field, "min")) field.style.setProperty("---size", `${Math.min(192, Math.max(textarea.scrollHeight, field.offsetHeight))}px`);
+  if (hasClass(field, "min")) field.style.setProperty("--_size", `${Math.min(192, Math.max(textarea.scrollHeight, field.offsetHeight))}px`);
 }
 
 export function updateAllFields() {

package/src/cdn/elements/grids.css

@@ -1,21 +1,21 @@
 .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 > * {

package/src/cdn/elements/icons.css

@@ -1,12 +1,11 @@
 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;
@@ -20,33 +19,34 @@ 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,
@@ -66,7 +66,7 @@ i > :is(img, svg) {
 }
 
 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;

package/src/cdn/elements/layouts.css

@@ -39,17 +39,21 @@ 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;
+}
+
+header {
+  min-block-size: 4rem;
 }
 
-:is(header, footer).fixed.responsive {
-  z-index: 12;
+footer {
+  min-block-size: 5rem;
 }
 
 :is(header, footer, menu > *).fixed {
@@ -59,29 +63,12 @@ main ~ footer {
   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));
-}
-
-:is(dialog, article, [class*=padding]) > header.fixed {
-  transform: translateY(calc(-1 * var(---translateY)));
+header.fixed {
+  inset: calc(-1 * var(--_padding)) 0 0 0;
+  margin-block-start: calc(-1 * var(--_padding));
 }
 
-.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));
+}

package/src/cdn/elements/mainLayouts.css

@@ -0,0 +1,163 @@
+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;
+  }
+}

package/src/cdn/elements/media.css

@@ -3,63 +3,39 @@ svg {
 }
 
 :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;
@@ -86,7 +62,7 @@ svg {
 }
 
 :is(img, svg, video).responsive.round {
-  border-radius: 2rem;
+  --_round: 2rem;
 }
 
 :is(img, svg, video).empty-state {
@@ -94,39 +70,41 @@ svg {
   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) {