beercss 3.9.7 → 3.10.0

package/src/cdn/helpers/margins.css

@@ -1,47 +1,47 @@
 [class*=margin]:not(.left-margin, .right-margin, .top-margin, .bottom-margin, .horizontal-margin, .vertical-margin) {
-  margin: var(---margin) !important;
+  margin: var(--_margin) !important;
 }
 
 [class*=margin] {
-  ---margin: 1rem;
+  --_margin: 1rem;
 }
 
 .no-margin {
-  ---margin: 0;
+  --_margin: 0;
 }
 
 .auto-margin {
-  ---margin: auto;
+  --_margin: auto;
 }
 
 .tiny-margin {
-  ---margin: 0.25rem;
+  --_margin: 0.25rem;
 }
 
 .small-margin {
-  ---margin: 0.5rem;
+  --_margin: 0.5rem;
 }
 
 .large-margin {
-  ---margin: 1.5rem;
+  --_margin: 1.5rem;
 }
 
 .left-margin,
 .horizontal-margin {
-  margin-inline-start: var(---margin) !important;
+  margin-inline-start: var(--_margin) !important;
 }
 
 .right-margin,
 .horizontal-margin {
-  margin-inline-end: var(---margin) !important;
+  margin-inline-end: var(--_margin) !important;
 }
 
 .top-margin,
 .vertical-margin {
-  margin-block-start: var(---margin) !important;
+  margin-block-start: var(--_margin) !important;
 }
 
 .bottom-margin,
 .vertical-margin {
-  margin-block-end: var(---margin) !important;
+  margin-block-end: var(--_margin) !important;
 }

package/src/cdn/helpers/paddings.css

@@ -1,43 +1,43 @@
 [class*=padding]:not(.left-padding, .right-padding, .top-padding, .bottom-padding, .horizontal-padding, .vertical-padding) {
-  padding: var(---padding) !important;
+  padding: var(--_padding) !important;
 }
 
 [class*=padding] {
-  ---padding: 1rem;
+  --_padding: 1rem;
 }
 
 .no-padding {
-  ---padding: 0;
+  --_padding: 0 !important;
 }
 
 .tiny-padding {
-  ---padding: 0.25rem;
+  --_padding: 0.25rem !important;
 }
 
 .small-padding {
-  ---padding: 0.5rem;
+  --_padding: 0.5rem !important;
 }
 
 .large-padding {
-  ---padding: 1.5rem;
+  --_padding: 1.5rem !important;
 }
 
 .left-padding,
 .horizontal-padding {
-  padding-inline-start: var(---padding) !important;
+  padding-inline-start: var(--_padding) !important;
 }
 
 .right-padding,
 .horizontal-padding {
-  padding-inline-end: var(---padding) !important;
+  padding-inline-end: var(--_padding) !important;
 }
 
 .top-padding,
 .vertical-padding {
-  padding-block-start: var(---padding) !important;
+  padding-block-start: var(--_padding) !important;
 }
 
 .bottom-padding,
 .vertical-padding {
-  padding-block-end: var(---padding) !important;
+  padding-block-end: var(--_padding) !important;
 }

package/src/cdn/helpers/ripples.css

@@ -1,13 +1,13 @@
 .ripple {
-  ---duration: 600ms;
+  --_duration: 600ms;
 }
 
 .fast-ripple {
-  ---duration: 200ms;
+  --_duration: 200ms;
 }
 
 .slow-ripple {
-  ---duration: 1800ms;
+  --_duration: 1800ms;
 }
 
 .ripple-js {
@@ -23,7 +23,7 @@
   background: currentColor;
   opacity: 0.3;
   transform: scale(0);
-  animation: to-ripple var(---duration) linear;
+  animation: to-ripple var(--_duration) linear;
 }
 
 @keyframes to-ripple {

package/src/cdn/helpers/shadows.css

@@ -7,17 +7,17 @@
 }
 
 .left-shadow {
-  background-image: linear-gradient(to right, black, transparent);
+  background-image: linear-gradient(to right, black, transparent) !important;
 }
 
 .right-shadow {
-  background-image: linear-gradient(to left, black, transparent);
+  background-image: linear-gradient(to left, black, transparent) !important;
 }
 
 .bottom-shadow {
-  background-image: linear-gradient(to top, black, transparent);
+  background-image: linear-gradient(to top, black, transparent) !important;
 }
 
 .top-shadow {
-  background-image: linear-gradient(to bottom, black, transparent);
+  background-image: linear-gradient(to bottom, black, transparent) !important;
 }

package/src/cdn/helpers/spaces.css

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

package/src/cdn/settings/fonts.css

@@ -6,7 +6,7 @@
   font-display: block;
   src:
     url("../material-symbols-outlined.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.0/dist/cdn/material-symbols-outlined.woff2") format("woff2");
 }
 
 /* rounded icons */
@@ -17,7 +17,7 @@
   font-display: block;
   src:
     url("../material-symbols-rounded.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.0/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 }
 
 /* sharp icons */
@@ -28,7 +28,7 @@
   font-display: block;
   src:
     url("../material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }
 
 /* subset of only required icons */
@@ -39,5 +39,5 @@
   font-display: block;
   src:
     url("../material-symbols-subset.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.9.7/dist/cdn/material-symbols-subset.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.10.0/dist/cdn/material-symbols-subset.woff2") format("woff2");
 }

package/src/cdn/utils.ts

@@ -1,11 +1,11 @@
 const _emptyNodeList = [] as unknown as NodeListOf<Element>;
 
 export function isTouchable(): boolean {
-  return window.matchMedia("(pointer: coarse)").matches;
+  return window?.matchMedia("(pointer: coarse)").matches;
 }
 
 export function isDark(): boolean {
-  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return window?.matchMedia("(prefers-color-scheme: dark)").matches;
 }
 
 export async function wait(milliseconds: number) {

package/src/cdn/elements/containers.css

@@ -1,176 +0,0 @@
-main.responsive {
-  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.responsive) {
-  display: flex;
-  flex-direction: column;
-  min-block-size: 100vh;
-}
-
-*:has(> nav.bottom:not(.s, .m, .l)) {
-  padding-block-end: calc(var(--bottom) + 5rem);
-}
-
-*:has(> nav.top:not(.s, .m, .l)) {
-  padding-block-start: calc(var(--top) + 5rem);
-}
-
-*:has(> nav.left:not(.s, .m, .l)) {
-  padding-inline-start: calc(var(--left) + 5rem);
-}
-
-*:has(> nav.right:not(.s, .m, .l)) {
-  padding-inline-end: calc(var(--right) + 5rem);
-}
-
-*:has(> nav.drawer.left:not(.s, .m, .l)) {
-  padding-inline-start: calc(var(--left) + 20rem);
-}
-
-*:has(> nav.drawer.right:not(.s, .m, .l)) {
-  padding-inline-end: calc(var(--right) + 20rem);
-}
-
-nav.top:not(.s, .m, .l) ~ header.fixed {
-  inset-block-start: 5rem;
-}
-
-nav.bottom:not(.s, .m, .l) ~ footer.fixed {
-  inset-block-end: 5rem;
-}
-
-: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.s.bottom) {
-    padding-block-end: calc(var(--bottom) + 5rem);
-  }
-
-  *:has(> nav.s.top) {
-    padding-block-start: calc(var(--top) + 5rem);
-  }
-
-  *:has(> nav.s.left) {
-    padding-inline-start: calc(var(--left) + 5rem);
-  }
-
-  *:has(> nav.s.right) {
-    padding-inline-end: calc(var(--right) + 5rem);
-  }
-
-  *:has(> nav.s.drawer.left) {
-    padding-inline-start: calc(var(--left) + 20rem);
-  }
-
-  *:has(> nav.s.drawer.right) {
-    padding-inline-end: calc(var(--right) + 20rem);
-  }
-
-  nav.s.top ~ header.fixed {
-    inset-block-start: 5rem;
-  }
-
-  nav.s.bottom ~ footer.fixed {
-    inset-block-end: 5rem;
-  }
-}
-
-@media only screen and (min-width: 601px) and (max-width: 992px) {
-  *:has(> nav.m.bottom) {
-    padding-block-end: calc(var(--bottom) + 5rem);
-  }
-
-  *:has(> nav.m.top) {
-    padding-block-start: calc(var(--top) + 5rem);
-  }
-
-  *:has(> nav.m.left) {
-    padding-inline-start: calc(var(--left) + 5rem);
-  }
-
-  *:has(> nav.m.right) {
-    padding-inline-end: calc(var(--right) + 5rem);
-  }
-
-  *:has(> nav.m.drawer.left) {
-    padding-inline-start: calc(var(--left) + 20rem);
-  }
-
-  *:has(> nav.m.drawer.right) {
-    padding-inline-end: calc(var(--right) + 20rem);
-  }
-
-  nav.m.top ~ header.fixed {
-    inset-block-start: 5rem;
-  }
-
-  nav.m.bottom ~ footer.fixed {
-    inset-block-end: 5rem;
-  }
-}
-
-@media only screen and (min-width: 993px) {
-  *:has(> nav.l.bottom) {
-    padding-block-end: calc(var(--bottom) + 5rem);
-  }
-
-  *:has(> nav.l.top) {
-    padding-block-start: calc(var(--top) + 5rem);
-  }
-
-  *:has(> nav.l.left) {
-    padding-inline-start: calc(var(--left) + 5rem);
-  }
-
-  *:has(> nav.l.right) {
-    padding-inline-end: calc(var(--right) + 5rem);
-  }
-
-  *:has(> nav.l.drawer.left) {
-    padding-inline-start: calc(var(--left) + 20rem);
-  }
-
-  *:has(> nav.l.drawer.right) {
-    padding-inline-end: calc(var(--right) + 20rem);
-  }
-
-  nav.l.top ~ header.fixed {
-    inset-block-start: 5rem;
-  }
-
-  nav.l.bottom ~ footer.fixed {
-    inset-block-end: 5rem;
-  }
-}
-
-@media only screen and (max-width: 600px) {
-  main.responsive {
-    padding-inline: calc(var(--left) + 0.5rem) calc(var(--right) + 0.5rem);
-  }
-}