beercss 3.8.0 → 3.9.0

package/src/cdn/elements/menus.css

@@ -1,7 +1,3 @@
-menu > li {
-  all: unset;
-}
-
 menu {
   opacity: 0;
   visibility: hidden;
@@ -38,8 +34,8 @@ menu.no-wrap {
 menu.active,
 menu:not([data-ui]):active,
 :not(menu, [data-ui]):focus-within > menu,
-menu > :is(a, li, nav):hover + menu,
-menu > menu:hover {
+menu > li:hover > menu,
+menu > li > menu:hover {
   opacity: 1;
   visibility: visible;
   transform: scale(1) translateY(100%);
@@ -49,27 +45,43 @@ menu * {
   white-space: inherit !important;
 }
 
-menu > :is(a, nav, li > a, li > nav) {
-  padding: 0.5rem 1rem;
+menu > li,
+menu > li > a:only-child {
+  all: unset;
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  align-self: normal;
+  text-align: start;
+  justify-content: flex-start;
+  white-space: nowrap;
+  gap: 1rem;
+  padding: 0 1rem;
   min-block-size: 3rem;
   flex: 1;
   margin: 0 !important;
+  cursor: pointer;
 }
 
-menu > :is(a, li > a):not(.row) {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
+menu > li:is(:hover, :focus, .active) {
+  background-color: var(--active);
 }
 
-menu > :is(a, nav, li > a, li > nav):is(:hover, :focus, .active) {
-  background-color: var(--active);
+menu > li > :is(.max, a:only-child, .field:only-child),
+menu > li > a:only-child > .max,
+menu > li:has(.field) {
+  flex: 1;
+  padding: 0;
+  margin: 0;
 }
 
 menu.min {
   inset: 0 0 auto 0;
   transform: none !important;
   border-radius: inherit;
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
 }
 
 [dir=rtl] menu.min.right,
@@ -90,6 +102,8 @@ menu.max {
   min-block-size: auto;
   z-index: 100;
   transform: none !important;
+  background-color: var(--surface-variant) !important;
+  color: var(--on-surface-variant) !important;
 }
 
 menu.no-wrap:is(.min, .max) {
@@ -106,8 +120,7 @@ menu.right {
   inset: auto auto 0 0;
 }
 
-menu:has(> menu),
-menu > menu {
+menu:has(menu) {
   ---child: 1;
   ---type: 0;
 
@@ -118,94 +131,92 @@ menu > menu {
   max-block-size: none;
 }
 
-menu > menu,
-menu > menu.right,
-[dir=rtl] menu > menu.left {
+menu > li > :is(menu, menu.right),
+[dir=rtl] menu > li > menu.left {
   inset: auto auto calc(3rem * (var(---child) - var(---type))) 100%;
 }
 
-[dir=rtl] menu > menu,
-[dir=rtl] menu > menu.right,
-menu > menu.left {
+[dir=rtl] menu > li > :is(menu, menu.right),
+menu > li > menu.left {
   inset: auto 100% calc(3rem * (var(---child) - var(---type))) auto;
 }
 
-menu > :nth-last-child(2) {
+menu > li:nth-last-child(2) {
   ---child: 2;
 }
 
-menu > :nth-last-child(3) {
+menu > li:nth-last-child(3) {
   ---child: 3;
 }
 
-menu > :nth-last-child(4) {
+menu > li:nth-last-child(4) {
   ---child: 4;
 }
 
-menu > :nth-last-child(5) {
+menu > li:nth-last-child(5) {
   ---child: 5;
 }
 
-menu > :nth-last-child(6) {
+menu > li:nth-last-child(6) {
   ---child: 6;
 }
 
-menu > :nth-last-child(7) {
+menu > li:nth-last-child(7) {
   ---child: 7;
 }
 
-menu > :nth-last-child(8) {
+menu > li:nth-last-child(8) {
   ---child: 8;
 }
 
-menu > :nth-last-child(9) {
+menu > li:nth-last-child(9) {
   ---child: 9;
 }
 
-menu > :nth-last-child(10) {
+menu > li:nth-last-child(10) {
   ---child: 10;
 }
 
-menu > :nth-last-child(11) {
+menu > li:nth-last-child(11) {
   ---child: 11;
 }
 
-menu > :nth-last-of-type(2) {
+menu > li:nth-last-of-type(2) {
   ---type: 1;
 }
 
-menu > :nth-last-of-type(3) {
+menu > li:nth-last-of-type(3) {
   ---type: 2;
 }
 
-menu > :nth-last-of-type(4) {
+menu > li:nth-last-of-type(4) {
   ---type: 3;
 }
 
-menu > :nth-last-of-type(5) {
+menu > li:nth-last-of-type(5) {
   ---type: 4;
 }
 
-menu > :nth-last-of-type(6) {
+menu > li:nth-last-of-type(6) {
   ---type: 5;
 }
 
-menu > :nth-last-of-type(7) {
+menu > li:nth-last-of-type(7) {
   ---type: 6;
 }
 
-menu > :nth-last-of-type(8) {
+menu > li:nth-last-of-type(8) {
   ---type: 7;
 }
 
-menu > :nth-last-of-type(9) {
+menu > li:nth-last-of-type(9) {
   ---type: 8;
 }
 
-menu > :nth-last-of-type(10) {
+menu > li:nth-last-of-type(10) {
   ---type: 9;
 }
 
-menu > :nth-last-of-type(11) {
+menu > li:nth-last-of-type(11) {
   ---type: 10;
 }

package/src/cdn/elements/navigations.css

@@ -28,7 +28,7 @@ nav > :is(ol, ul) > li > :only-child {
   margin: 0;
 }
 
-:is(nav, .row) > * {
+:is(nav, .row) > :not(ul, ol) {
   margin: 0;
   white-space: normal;
   flex: none;

package/src/cdn/elements/overlays.css

@@ -1,4 +1,6 @@
-.overlay {
+.overlay,
+dialog::backdrop {
+  display: block !important;
   opacity: 0;
   visibility: hidden;
   position: fixed;
@@ -9,7 +11,17 @@
   transition: all var(--speed3), 0s background-color;
 }
 
-.overlay.active {
+.overlay.active,
+dialog:popover-open::backdrop {
   opacity: 1;
   visibility: visible;
 }
+
+.overlay + dialog::backdrop,
+.snackbar::backdrop {
+  display: none;
+}
+
+[popover] {
+  border: 0;
+}

package/src/cdn/elements/selections.css

@@ -10,11 +10,24 @@
   cursor: pointer;
   display: inline-flex;
   align-items: center;
+  ---size: 1.5rem;
+}
+
+:is(.checkbox, .radio, .switch).small {
+  ---size: 1rem;
+}
+
+:is(.checkbox, .radio, .switch).large {
+  ---size: 2rem;
+}
+
+:is(.checkbox, .radio, .switch).extra {
+  ---size: 2.5rem;
 }
 
 :is(.checkbox, .radio) > input {
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
+  inline-size: var(---size);
+  block-size: var(---size);
   opacity: 0;
 }
 
@@ -36,17 +49,18 @@
 }
 
 :is(.checkbox, .radio, .switch) > span::before,
-.icon > span > i,
+:is(.checkbox, .radio, .switch) > span > i,
 :is(.checkbox, .radio) > span::after {
+  ---size: inherit;
   content: '';
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
+  inline-size: var(---size);
+  block-size: var(---size);
   box-sizing: border-box;
   margin: 0 auto;
   outline: none;
   color: var(--primary);
   position: absolute;
-  inset: auto auto auto -1.5rem;
+  inset: auto auto auto calc(var(---size) * -1);
   border-radius: 50%;
   user-select: none;
   z-index: 1;
@@ -61,9 +75,10 @@
   justify-content: center;
   border-radius: 50%;
   transition: all var(--speed2);
-  font-size: 1rem;
+  font-size: calc(var(---size) - 0.5rem);
   user-select: none;
-  min-inline-size: auto;
+  min-inline-size: var(---size);
+  min-block-size: var(---size);
   content: "";
   color: var(--surface-variant);
   background-color: var(--outline);
@@ -147,11 +162,17 @@
   content: "check";
   color: var(--primary);
   background-color: var(--on-primary);
+  transform: translate(-1.75rem, -50%) scale(1);
 }
 
-.switch > input:checked + span::before,
-.switch.icon > input:checked + span > i {
-  transform: translate(-1.75rem, -50%) scale(1);
+.switch > input:active:not(:disabled) + span::before,
+.switch.icon > input:active:not(:disabled) + span > i {
+  transform: translate(-3rem, -50%) scale(1.2);
+}
+
+.switch > input:active:checked:not(:disabled) + span::before,
+.switch.icon > input:active:checked:not(:disabled) + span > i {
+  transform: translate(-1.75rem, -50%) scale(1.2);
 }
 
 :is(.checkbox, .radio, .switch) > input:disabled + span {
@@ -169,9 +190,6 @@
   inline-size: 3.25rem;
   block-size: 2rem;
   border-radius: 2rem;
-}
-
-.switch > span::after {
   transform: translate(-3.25rem, -50%);
 }
 

package/src/cdn/elements/sliders.ts

@@ -36,6 +36,13 @@ function updateAllRanges() {
   for(let i=0; i<ranges.length; i++) updateRange(ranges[i]);
 }
 
+function rootSizeInPixels(): number {
+  const size = getComputedStyle(document.documentElement).getPropertyValue("--size") || "16px";
+  if (size.indexOf("%") != -1) return (parseInt(size) * 16) / 100;
+  if (size.indexOf("em") != -1) return parseInt(size) * 16;
+  return parseInt(size);
+} 
+
 function updateRange(input: HTMLInputElement) {
   on(input, "focus", onFocusRange);
   on(input, "blur", onBlurRange);
@@ -45,7 +52,7 @@ function updateRange(input: HTMLInputElement) {
   const inputs = queryAll("input", label) as NodeListOf<HTMLInputElement>;
   if (!inputs.length || !bar) return;
 
-  const rootSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--size")) || 16;
+  const rootSize = rootSizeInPixels();
   const thumb = hasClass(label, "max") ? 0 : 0.25 * rootSize * 100 / inputs[0].offsetWidth;
   const percents: Array<number> = [];
   const values: Array<number> = [];

package/src/cdn/elements/snackbars.css

@@ -10,7 +10,6 @@
   color: var(--inverse-on-surface);
   background-color: var(--inverse-surface);
   padding: 1rem;
-  opacity: 1;
   cursor: pointer;
   text-align: start;
   align-items: center;
@@ -25,7 +24,7 @@
   inset: 6rem auto auto 50%;
 }
 
-.snackbar.active {
+.snackbar:is(.active, :popover-open) {
   visibility: visible;
   transform: translate(-50%, 0);
   opacity: 1;

package/src/cdn/helpers/forms.css

@@ -93,7 +93,7 @@
   border-radius: 1rem !important;
 }
 
-.border:not(table, .field) {
+.border:not(table, .field, .list) {
   box-sizing: border-box;
   border: 0.0625rem solid var(--outline);
   background-color: transparent;

package/src/cdn/helpers/spaces.css

@@ -1,15 +1,15 @@
-.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.tiny-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 0.5rem;
 }
 
-:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip) {
+:is(.space, .small-space):not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 1rem;
 }
 
-.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.medium-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   block-size: 2rem;
 }
 
-.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip) {
+.large-space:not(nav, ol, ul, .row, .grid, table, .tooltip, .list) {
   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.8.0/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.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.8.0/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-rounded.woff2") format("woff2");
 }
 
 /* sharp icons */
@@ -28,5 +28,5 @@
   font-display: block;
   src:
     url("../material-symbols-sharp.woff2") format("woff2"),
-    url("https://cdn.jsdelivr.net/npm/beercss@3.8.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.9.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }

package/src/cdn/settings/globals.css

@@ -1,5 +1,5 @@
 :root {
-  --size: 16px;
+  --size: 1rem;
   --font: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Noto Sans, Arial, sans-serif;
   --font-icon: "Material Symbols Outlined";
   --speed1: 0.1s;