beercss 3.13.3 → 4.0.0

package/src/cdn/elements/buttons.css

@@ -12,7 +12,6 @@ button {
   color: var(--on-primary);
   padding: 0 var(--_padding);
   background-color: var(--primary);
-  margin: 0 0.5rem;
   border-radius: var(--_size);
   transition: transform var(--speed3), border-radius var(--speed2), padding var(--speed3);
   user-select: none;
@@ -45,7 +44,7 @@ button {
   color: var(--primary);
 }
 
-.extend > span {
+.extend > span:not([class]) {
   display: none;
 }
 
@@ -62,7 +61,7 @@ button {
 
 .extend:is(:hover, .active) > :is(img, svg) + span {
   display: inherit;
-  margin-inline-start: calc(1rem + var(--_padding));
+  margin-inline-start: calc(1rem + var(--_padding, 0));
 }
 
 :is(.button, button)[disabled] {

package/src/cdn/elements/chips.css

@@ -13,7 +13,6 @@
   border: 0.0625rem solid var(--outline-variant);
   color: var(--on-surface-variant);
   padding: 0 var(--_padding);
-  margin: 0 0.5rem;
   text-transform: none;
   border-radius: 0.5rem;
   transition: transform var(--speed3), border-radius var(--speed3), padding var(--speed3);

package/src/cdn/elements/dialogs.css

@@ -1,7 +1,7 @@
 dialog {
   --_padding: 1.5rem;
-  --_top: calc(var(--_padding) + var(--top));
-  --_bottom: calc(var(--_padding) + var(--bottom));
+  --_top: calc(var(--_padding, 0) + var(--top, 0));
+  --_bottom: calc(var(--_padding, 0) + var(--bottom, 0));
   display: block;
   visibility: hidden;
   border: none;
@@ -143,10 +143,4 @@ dialog.medium:is(.top, .bottom) {
 
 dialog.large:is(.top, .bottom) {
   block-size: 32rem;
-}
-
-@media (pointer: coarse) {
-  body:has(dialog[open], dialog.active) {
-    overflow: hidden;
-  }
 }

package/src/cdn/elements/expansions.css

@@ -1,10 +1,17 @@
-summary,
-summary:focus {
+summary {
   list-style-type: none;
   cursor: pointer;
-  outline: none;
 }
 
 summary::-webkit-details-marker {
   display: none;
 }
+
+summary > * {
+  pointer-events: none;
+  margin: 0;
+}
+
+li > details > summary + .list {
+  margin: 0 !important;
+}

package/src/cdn/elements/fields.css

@@ -1,7 +1,7 @@
 .field {
   --_input: 3rem;
   --_start: 1.2rem;
-  --_middle: calc(var(--_input) / 2);
+  --_middle: calc(var(--_input, 0) / 2);
   border-radius: 0.25rem 0.25rem 0 0;
   min-block-size: var(--_input);
   display: flex;
@@ -57,7 +57,7 @@
 /* icon */
 .field > :is(i, img, svg, progress.circle, a) {
   position: absolute;
-  inset: calc((var(--_input) / 2) - 0.75rem) auto auto auto;
+  inset: calc((var(--_input, 0) / 2) - 0.75rem) auto auto auto;
   cursor: pointer;
   z-index: 10;
   inline-size: 1.5rem;
@@ -77,12 +77,12 @@
 
 .field > :is(i, img, svg, progress.circle, a),
 [dir=rtl] .field > :is(i, img, svg, progress.circle, a):first-child {
-  inset: calc(var(--_middle) - 0.75rem) 1rem auto auto;
+  inset: calc(var(--_middle, 0) - 0.75rem) 1rem auto auto;
 }
 
 .field > :is(i, img, svg, progress.circle, a):first-child,
 [dir=rtl] .field > :is(i, img, svg, progress.circle, a) {
-  inset: calc(var(--_middle) - 0.75rem) auto auto 1rem;
+  inset: calc(var(--_middle, 0) - 0.75rem) auto auto 1rem;
 }
 
 .field.invalid > i {
@@ -105,7 +105,6 @@
   padding: 0 0.9375rem;
   font-family: inherit;
   font-size: 1rem;
-  inline-size: 100%;
   min-block-size: var(--_input);
   outline: none;
   z-index: 1;
@@ -126,7 +125,7 @@ input::-webkit-date-and-time-value {
 
 .field > :is(input, textarea, select):focus {
   border: 0.125rem solid transparent;
-  padding: 0 0.875rem;
+  padding-inline: 0.875rem;
 }
 
 .field > textarea:not([rows]) {
@@ -272,21 +271,21 @@ input[type=number] {
 }
 
 .field > textarea {
-  padding-block-start: calc(var(--_start)) !important;
+  padding-block-start: var(--_start) !important;
 }
 
 .field > textarea:focus {
-  padding-block-start: calc(var(--_start) - 0.01rem) !important;
+  padding-block-start: calc(var(--_start, 0) - 0.01rem) !important;
 }
 
 .field:not(.label) > textarea,
 .field.border:not(.fill) > textarea {
-  padding-block-start: calc(var(--_start) - 0.5rem) !important;
+  padding-block-start: calc(var(--_start, 0) - 0.5rem) !important;
 }
 
 .field:not(.label) > textarea:focus,
 .field.border:not(.fill) > textarea:focus {
-  padding-block-start: calc(var(--_start) - 0.51rem) !important;
+  padding-block-start: calc(var(--_start, 0) - 0.51rem) !important;
 }
 
 /* label */
@@ -295,8 +294,8 @@ input[type=number] {
   position: absolute;
   inset: -0.5rem 1rem 0 var(--_start);
   display: flex;
-  block-size: calc(var(--_input) + 1rem);
-  line-height: calc(var(--_input) + 1rem);
+  block-size: calc(var(--_input, 0) + 1rem);
+  line-height: calc(var(--_input, 0) + 1rem);
   font-size: 1rem;
   transition: all 0.2s;
   gap: 0.25rem;

package/src/cdn/elements/icons.css

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

package/src/cdn/elements/lists.css

@@ -34,8 +34,7 @@
 }
 
 .list > li > *,
-.list > li > a:only-child > *,
-.list > li > details > summary > *  {
+.list > li > a:only-child > * {
   margin: 0;
 }
 
@@ -69,3 +68,8 @@
 .list.large-space > li > details > summary {
   min-block-size: 5.5rem;
 }
+
+:is(li, li > a:only-child):focus-visible {
+  outline: 0.125rem solid var(--primary);
+  outline-offset: -0.25rem;
+}

package/src/cdn/elements/mainLayouts.css

@@ -1,7 +1,7 @@
 :has(> main) {
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto auto 1fr auto auto;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
   grid-template-areas: 
     "left top right"
     "left header right"

package/src/cdn/elements/media.css

@@ -83,11 +83,11 @@ svg {
 }
 
 :is(button, .button, .chip):not(.extend) > .responsive:first-child {
-  margin-inline-start: calc(-1 * var(--_padding));
+  margin-inline-start: calc(-1 * var(--_padding, 0));
 }
 
 :is(button, .button, .chip):not(.extend) > .responsive:not(:first-child) {
-  margin-inline-end: calc(-1 * var(--_padding));
+  margin-inline-end: calc(-1 * var(--_padding, 0));
 }
 
 :is(button, .button, .chip, .circle, .square, .extend) > .responsive {

package/src/cdn/elements/menus.css

@@ -152,22 +152,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, 0) - var(--_type, 0))) 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, 0) - var(--_type, 0))) 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, 0) - var(--_type, 0))) 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, 0) - var(--_type, 0))) 100% auto auto;
 }
 
 menu.no-space > li {

package/src/cdn/elements/navigations.css

@@ -14,7 +14,6 @@ a.row {
   white-space: nowrap;
   gap: 1rem;
   border-radius: 0;
-  min-inline-size: 0;
 }
 
 a.row,
@@ -72,8 +71,8 @@ nav > :is(ol, ul) > li > span > * {
 
 nav:is(.left, .right, .top, .bottom) {
   --_padding: 0.5rem;
-  --_top: calc(var(--_padding) + var(--top));
-  --_bottom: calc(var(--_padding) + var(--bottom));
+  --_top: calc(var(--_padding, 0) + var(--top, 0));
+  --_bottom: calc(var(--_padding, 0) + var(--bottom, 0));
   position: sticky;
   inset: 0;
   border: 0;
@@ -106,12 +105,12 @@ nav:is(.top, .bottom) {
 }
 
 nav.top {
-  block-size: calc(var(--top) + 4.5rem);
+  block-size: calc(var(--top, 0) + 4.5rem);
   padding-block-start: var(--_top);
 }
 
 nav.bottom {
-  block-size: calc(var(--bottom) + 4.5rem);
+  block-size: calc(var(--bottom, 0) + 4.5rem);
   padding-block-end: var(--_bottom);
 }
 
@@ -139,7 +138,7 @@ nav > header > .extend:hover {
   inline-size: var(--_size);
 }
 
-nav > header > .extend:hover > span {
+nav > header > .extend:hover > span:not([class]) {
   display: none;
 }
 
@@ -177,13 +176,13 @@ nav.max > header > .extend {
   padding: 0 var(--_padding);
 }
 
-nav.max > header > .extend > span {
+nav.max > header > .extend > span:not([class]) {
   display: block;
   margin-inline-start: var(--_padding);
 }
 
 nav.max > header > .extend > :is(img, svg) + span {
-  margin-inline-start: calc(1rem + var(--_padding));
+  margin-inline-start: calc(1rem + var(--_padding, 0));
 }
 
 nav.max:is(.top, .bottom) {

package/src/cdn/elements/progress.css

@@ -70,12 +70,12 @@ progress::-moz-progress-bar {
 }
 
 progress.wavy {
-  block-size: calc(var(--_size) * 2);
+  block-size: calc(var(--_size, 0) * 2);
   background: none;
   background-image: var(--_light);
   background-repeat: repeat-x;
   background-position: 0 50%;
-  background-size: auto calc(var(--_size) / 2);
+  background-size: auto calc(var(--_size, 0) / 2);
 }
 
 .dark progress.wavy {
@@ -102,7 +102,7 @@ progress.circle {
   --_value: attr(value type(<number>), 50);
   inline-size: 2.5rem;
   block-size: 2.5rem;
-  background: conic-gradient(currentColor calc(var(--_value) * 1%), var(--active) 0%);
+  background: conic-gradient(currentColor calc(var(--_value, 0) * 1%), var(--active) 0%);
   border-radius: 50%;
   mask-image: radial-gradient(circle at center, transparent 57%, currentColor 60%);
 }
@@ -116,7 +116,7 @@ progress.circle::-moz-progress-bar {
 }
 
 progress.circle.wavy {
-  background: conic-gradient(currentColor calc(var(--_value) * 1%), var(--active) 0);
+  background: conic-gradient(currentColor calc(var(--_value, 0) * 1%), var(--active) 0);
   mask-repeat: no-repeat;
   mask-position: center;
   mask-size: contain;

package/src/cdn/elements/progress.ts

@@ -12,15 +12,17 @@ function onInputDocument(e: Event) {
 }
 
 function updateProgress(progress: HTMLProgressElement) {
-  if (!progress.hasAttribute("value") && !progress.hasAttribute("max")) {
-    const value = hasClass(progress, "circle") ? "50" : "100";
-    progress.style.setProperty("--_value", value);
-    progress.setAttribute("value", value);
-    progress.setAttribute("max", "100");
-    progress.classList.add("indeterminate");
-  } else {
-    progress.style.setProperty("--_value", String(progress.value));
-  }
+  requestAnimationFrame(() => {
+    if (!progress.hasAttribute("value") && !progress.hasAttribute("max")) {
+      const value = hasClass(progress, "circle") ? "50" : "100";
+      progress.style.setProperty("--_value", value);
+      progress.setAttribute("value", value);
+      progress.setAttribute("max", "100");
+      progress.classList.add("indeterminate");
+    } else {
+      progress.style.setProperty("--_value", String(progress.value));
+    }
+  });
 }
 
 export function updateAllProgress() {

package/src/cdn/elements/selections.css

@@ -63,7 +63,7 @@
   outline: none;
   color: var(--primary);
   position: absolute;
-  inset: auto auto auto calc(var(--_size) * -1);
+  inset: auto auto auto calc(var(--_size, 0) * -1);
   border-radius: 50%;
   user-select: none;
   z-index: 1;
@@ -73,7 +73,7 @@
 [dir=rtl] :is(.checkbox, .radio) > span > i,
 [dir=rtl] :is(.checkbox, .radio) > span::after {
   --_size: inherit;
-  inset: auto calc(var(--_size) * -1) auto auto;
+  inset: auto calc(var(--_size, 0) * -1) auto auto;
 }
 
 .switch > span::before,
@@ -85,7 +85,7 @@
   justify-content: center;
   border-radius: 50%;
   transition: all var(--speed2);
-  font-size: calc(var(--_size) - 0.5rem);
+  font-size: calc(var(--_size, 0) - 0.5rem);
   user-select: none;
   min-inline-size: var(--_size);
   min-block-size: var(--_size);

package/src/cdn/elements/sliders.css

@@ -4,7 +4,7 @@
   --_value1: "";
   --_value2: "";
   --_track: 1rem;
-  --_thumb: max(2.5rem, calc(var(--_track) + 0.5rem));
+  --_thumb: max(2.5rem, calc(var(--_track, 0) + 0.5rem));
   display: flex;
   align-items: center !important;
   inline-size: auto;
@@ -65,7 +65,7 @@
   pointer-events: all;
 }
 
-.slider > input + input {
+.slider > input ~ input {
   position: absolute;
 }
 
@@ -129,22 +129,22 @@
   cursor: not-allowed;
 }
 
-.slider > input:disabled ~ span {
+.slider > input:disabled ~ span:not([class]) {
   background: var(--outline);
 }
 
-.slider > span {
+.slider > span:not([class]) {
   position: absolute;
   block-size: var(--_track);
   border-radius: 1rem 0 0 1rem;
   background: var(--primary);
   color: var(--on-primary);
   z-index: 0;
-  inset: calc(50% - (var(--_track) / 2)) var(--_end) auto var(--_start);
+  inset: calc(50% - (var(--_track, 0) / 2)) var(--_end) auto var(--_start);
   clip-path: polygon(0 0, calc(100% - 0.5rem) 0, calc(100% - 0.5rem) 100%, 0 100%);
 }
 
-.slider > input[type=range] + input[type=range] ~ span {
+.slider > input[type=range] + input[type=range] ~ span:not([class]) {
   border-radius: 0;
   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%);
 }
@@ -160,7 +160,7 @@
   block-size: var(--_track);
   border-radius: 1rem;
   background: var(--secondary-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) - 0.5rem) 0, 0 0, 0 100%, calc(var(--_start, 0) - 0.5rem) 100%, calc(var(--_start, 0) - 0.5rem) 0, calc(100% - var(--_end, 0) + 0.5rem) 0, 100% 0, 100% 100%, calc(100% - var(--_end, 0) + 0.5rem) 100%, calc(100% - var(--_end, 0) + 0.5rem) 0);
 }
 
 .slider:has(> [disabled])::before {
@@ -190,7 +190,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, 0));
   border-radius: 2rem;
   transition: top var(--speed2) ease, opacity var(--speed2) ease;
   transform: translate(-50%, -25%) !important;
@@ -198,7 +198,7 @@
 }
 
 .slider > .tooltip.bottom {
-  inset: auto auto 0 calc(100% - var(--_end));
+  inset: auto auto 0 calc(100% - var(--_end, 0));
   transition: bottom var(--speed2) ease, opacity var(--speed2) ease;
   transform: translate(-50%, 25%) !important;
 }
@@ -212,12 +212,12 @@
 }
 
 .slider > .tooltip + .tooltip {
-  inset: 0.25rem calc(100% - var(--_start)) auto auto;
+  inset: 0.25rem calc(100% - var(--_start, 0)) auto auto;
   transform: translate(50%, -25%) !important;
 }
 
 .slider > .tooltip + .tooltip.bottom {
-  inset: auto calc(100% - var(--_start)) -0.25rem auto;
+  inset: auto calc(100% - var(--_start, 0)) -0.25rem auto;
   transform: translate(50%, 25%) !important;
 }
 
@@ -251,13 +251,13 @@
   inset-block: auto;
   block-size: 2.5rem;
   inline-size: 2.5rem;
-  margin-block: calc(-1 * var(--_thumb)) 0 !important;
+  margin-block: calc(-1 * var(--_thumb, 0)) 0 !important;
   transform: rotate(90deg) translate(-75%, 50%) !important;
 }
 
 .slider.vertical > .tooltip.bottom {
   inset-block: auto;
-  margin-block: 0 calc(-1 * var(--_thumb)) !important;
+  margin-block: 0 calc(-1 * var(--_thumb, 0)) !important;
   transform: rotate(90deg) translate(75%, 50%) !important;
 }
 
@@ -313,7 +313,7 @@
   transform: none !important;
 }
 
-.slider.max > span {
+.slider.max > span:not([class]) {
   block-size: auto !important;
   inset: 0 var(--_end) 0 var(--_start);
   clip-path: none;
@@ -322,7 +322,7 @@
   border-radius: 0;
 }
 
-.slider.max.vertical > span {
+.slider.max.vertical > span:not([class]) {
   inset: var(--_end) 0 var(--_start) 0;
 }
 
@@ -351,8 +351,4 @@
   .slider > :hover ~ .tooltip.bottom {
     inset-block: auto -1rem !important;
   }
-  
-  body:has(input[type=range]:focus) {
-    overflow: hidden;
-  }
 }

package/src/cdn/elements/sliders.ts

@@ -13,8 +13,11 @@ function onInputDocument(e: Event) {
 }
 
 function onChangeInput(e: Event) {
+  const isCoarse = window.matchMedia('(pointer: coarse)').matches;
+  if (!isCoarse) return;
+
   const input = e.target as HTMLInputElement;
-  requestAnimationFrame(() => input.blur());
+  input.blur();
 }
 
 function updateAllRanges() {
@@ -63,10 +66,7 @@ function updateRange(input: HTMLInputElement) {
     }
   }
 
-  label.style.setProperty("--_start", `${start}%`);
-  label.style.setProperty("--_end", `${end}%`);
-  label.style.setProperty("--_value1", `'${value1}'`);
-  label.style.setProperty("--_value2", `'${value2}'`);
+  requestAnimationFrame(() => label.style.cssText = `--_start: ${start}%; --_end: ${end}%; --_value1: '${value1}'; --_value2: '${value2}';`);
 }
 
 export function updateAllSliders() {

package/src/cdn/helpers/forms.css

@@ -51,7 +51,7 @@
   inline-size: var(--_size);
 }
 
-:is(.circle, .square) > span {
+:is(.circle, .square) > span:not([class]) {
   display: none;
 }
 

package/src/cdn/helpers/ripples.ts

@@ -19,7 +19,7 @@ function updateRipple(e: PointerEvent) {
   ripple.style.inlineSize = ripple.style.blockSize = `${diameter}px`;
   ripple.style.left = `${x}px`;
   ripple.style.top = `${y}px`;
-  ripple.addEventListener("animationend", () => { rippleContainer.remove(); });
+  onWeak(ripple, "animationend", () => { rippleContainer.remove(); });
 
   rippleContainer.appendChild(ripple);
   element.appendChild(rippleContainer);

package/src/cdn/helpers/scrolls.css

@@ -1,6 +1,5 @@
 .scroll {
   overflow: auto;
-  min-inline-size: 0;
 }
 
 .no-scroll {