beercss 3.6.13 → 3.7.0

package/src/cdn/elements/fields.ts

@@ -0,0 +1,142 @@
+import { query, hasClass, on, next, prev, hasType, parent, queryAll, run } from "../utils";
+
+function onClickLabel(e: Event) {
+  const label = e.currentTarget as HTMLLabelElement;
+  const field = parent(label);
+  const input = query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea", field) as HTMLElement;
+  if (input) input.focus();
+}
+
+function onFocusInput(e: Event) {
+  const input = e.currentTarget as HTMLInputElement;
+  updateInput(input);
+}
+
+function onBlurInput(e: Event) {
+  const input = e.currentTarget as HTMLInputElement;
+  updateInput(input);
+}
+
+function onChangeFile(e: Event) {
+  const input = e.currentTarget as HTMLInputElement;
+  updateFile(input);
+}
+
+function onChangeColor(e: Event) {
+  const input = e.currentTarget as HTMLInputElement;
+  updateColor(input);
+}
+
+function onKeydownFile(e: KeyboardEvent) {
+  const input = e.currentTarget as HTMLInputElement;
+  updateFile(input, e);
+}
+
+function onKeydownColor(e: KeyboardEvent) {
+  const input = e.currentTarget as HTMLInputElement;
+  updateColor(input, e);
+}
+
+function onInputTextarea(e: Event) {
+  const textarea = e.currentTarget as HTMLTextAreaElement;
+  updateTextarea(textarea);
+}
+
+function updateAllLabels() {
+  const labels = queryAll(".field > label");
+  for (let i=0; i<labels.length; i++) on(labels[i], "click", onClickLabel);
+}
+
+function updateAllInputs() {
+  const inputs = queryAll(".field > input:not([type=file], [type=color], [type=range])") as NodeListOf<HTMLInputElement>;
+  for (let i=0; i<inputs.length; i++) {
+    on(inputs[i], "focus", onFocusInput);
+    on(inputs[i], "blur", onBlurInput);
+    updateInput(inputs[i]);
+  }
+}
+
+function updateAllSelects() {
+  const selects = queryAll(".field > select") as NodeListOf<HTMLSelectElement>;
+  for (let i=0; i<selects.length; i++) {
+    on(selects[i], "focus", onFocusInput);
+    on(selects[i], "blur", onBlurInput);
+  }
+}
+
+function updateAllFiles() {
+  const files = queryAll(".field > input[type=file]") as NodeListOf<HTMLInputElement>;
+  for (let i=0; i<files.length; i++) {
+    on(files[i], "change", onChangeFile);
+    updateFile(files[i]);
+  }
+}
+
+function updateAllColors() {
+  const colors = queryAll(".field > input[type=color]") as NodeListOf<HTMLInputElement>;
+  for (let i=0; i<colors.length; i++) {
+    on(colors[i], "change", onChangeColor);
+    updateColor(colors[i]);
+  }
+}
+
+function updateAllTextareas() {
+  const textareas = queryAll(".field.textarea > textarea") as NodeListOf<HTMLTextAreaElement>;
+  for (let i=0; i<textareas.length; i++) {
+    on(textareas[i], "focus", onFocusInput);
+    on(textareas[i], "blur", onBlurInput);
+    on(textareas[i], "input", onInputTextarea);
+    updateTextarea(textareas[i]);
+  }
+}
+
+function updateInput(input: HTMLInputElement) {
+  if (hasType(input, "number") && !input.value) input.value = "";
+  if (!input.placeholder) input.placeholder = " ";
+  if (input.getAttribute("data-ui")) run(input, null);
+}
+
+function updateFile(input: HTMLInputElement, e?: KeyboardEvent) {
+  if (e?.key === "Enter") {
+    const previousInput = prev(input) as HTMLInputElement;
+    if (!hasType(previousInput, "file")) return;
+    previousInput.click(); return;
+  }
+
+  const nextInput = next(input) as HTMLInputElement;
+  if (!hasType(nextInput, "text")) return;
+  nextInput.value = input.files ? Array.from(input.files).map((x) => x.name).join(", ") : "";
+  nextInput.readOnly = true;
+  on(nextInput, "keydown", onKeydownFile, false);
+  updateInput(nextInput);
+}
+
+function updateColor(input: HTMLInputElement, e?: KeyboardEvent) {
+  if (e?.key === "Enter") {
+    const previousInput = prev(input) as HTMLInputElement;
+    if (!hasType(previousInput, "color")) return;
+    previousInput.click(); return;
+  }
+
+  const nextInput = next(input) as HTMLInputElement;
+  if (!hasType(nextInput, "text")) return;
+  nextInput.readOnly = true;
+  nextInput.value = input.value;
+  on(nextInput, "keydown", onKeydownColor, false);
+  updateInput(nextInput);
+}
+
+function updateTextarea(textarea: HTMLTextAreaElement) {
+  const field = parent(textarea) as HTMLElement;
+  field.removeAttribute("style");
+  if (hasClass(field, "min")) field.style.setProperty("---size", `${Math.max(textarea.scrollHeight, field.offsetHeight)}px`);
+}
+
+export function updateAllFields() {
+  updateAllLabels();
+  updateAllInputs();
+  updateAllSelects();
+  updateAllFiles();
+  updateAllColors();
+  updateAllTextareas();
+}

package/src/cdn/elements/icons.css

@@ -1,4 +1,6 @@
-i {
+i,
+:is(.checkbox, .radio, .switch) > span::before,
+.icon > span > i {
   ---size: 1.5rem;
 
   font-family: var(--font-icon);

package/src/cdn/elements/menus.css

@@ -37,7 +37,7 @@ menu.no-wrap {
 
 menu.active,
 menu:not([data-ui]):active,
-:not([data-ui]):focus-within > menu,
+:not(menu, [data-ui]):focus-within > menu,
 menu > :is(a, li):hover + menu,
 menu > menu:hover {
   opacity: 1;

package/src/cdn/elements/menus.ts

@@ -0,0 +1,40 @@
+import { query, queryAll, addClass, on, off, hasTag, hasClass, removeClass, blurActiveElement } from "../utils";
+
+let _timeoutMenu: ReturnType<typeof setTimeout>;
+
+function onClickDocument(e: Event) {
+  off(document.body, "click", onClickDocument);
+  const body = e.target as Element;
+  const menus = queryAll("menu.active") as NodeListOf<HTMLMenuElement>;
+  for (let i=0; i<menus.length; i++) updateMenu(body, menus[i], e);
+}
+
+function focusOnMenuOrInput(menu: HTMLMenuElement) {
+  setTimeout(() => {
+    const input = query(".field > input", menu) as HTMLInputElement;
+    if (input) input.focus();
+    else menu.focus();
+  }, 90);
+}
+
+export function updateMenu(from: Element, menu: HTMLMenuElement, e?: Event) {
+  if (_timeoutMenu) clearTimeout(_timeoutMenu);
+
+  _timeoutMenu = setTimeout(() => {
+    on(document.body, "click", onClickDocument);
+    if (!hasTag(document.activeElement, "input")) blurActiveElement();
+
+    const isActive = hasClass(menu, "active");
+    const isEvent = !!(e?.target === from);
+    const isChild = !!from.closest("menu");
+
+    if ((!isActive && isChild) || (isActive && isEvent)) {
+      removeClass(menu, "active");
+      return;
+    }
+
+    removeClass(queryAll("menu.active"), "active");
+    addClass(menu, "active");
+    focusOnMenuOrInput(menu);
+  }, 90);
+}

package/src/cdn/elements/navigations.css

@@ -179,6 +179,8 @@ nav:is(.left, .right, .top, .bottom):not(.drawer) > :is(ol, ul) > li > a:not(.bu
   align-self: center;
   display: flex;
   flex-direction: column;
+  gap: 0.25rem;
+  line-height: normal;
 }
 
 nav:is(.top, .bottom):not(.drawer) > a:not(.button, .chip),

package/src/cdn/elements/pages.ts

@@ -0,0 +1,7 @@
+import { addClass, parent, removeClass, queryAll } from "../utils";
+
+export function updatePage(page: Element) {
+  const container = parent(page);
+  if (container) removeClass(queryAll(".page", container), "active");
+  addClass(page, "active");
+}

package/src/cdn/elements/selections.css

@@ -36,23 +36,9 @@
 }
 
 :is(.checkbox, .radio, .switch) > span::before,
-.icon > span > i {
-  font-family: var(--font-icon);
-  font-weight: normal;
-  font-style: normal;
-  font-size: 1.5rem;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-  vertical-align: middle;
-  text-align: center;
-  overflow: hidden;
+.icon > span > i,
+:is(.checkbox, .radio) > span::after {
+  content: '';
   inline-size: 1.5rem;
   block-size: 1.5rem;
   box-sizing: border-box;
@@ -61,12 +47,9 @@
   color: var(--primary);
   position: absolute;
   inset: auto auto auto -1.5rem;
-  background-color: transparent;
   border-radius: 50%;
   user-select: none;
   z-index: 1;
-  box-shadow: 0 0 0 0 var(--active);
-  transition: all var(--speed1);
 }
 
 .switch > span::before,
@@ -121,9 +104,17 @@
   font-variation-settings: unset !important;
 }
 
-:is(.checkbox, .radio) > input:not(:disabled):is(:focus, :hover) + span::before {
-  background-color: var(--active);
-  box-shadow: 0 0 0 0.5rem var(--active);
+:is(.checkbox, .radio) > span::after {
+  transition: all var(--speed1);
+  background-color: currentColor;
+  box-shadow: 0 0 0 0 currentColor;
+  opacity: 0;
+}
+
+:is(.checkbox, .radio):is(:hover) > input:not(:disabled) + span::after,
+:is(.checkbox, .radio) > input:not(:disabled):is(:focus) + span::after {
+  box-shadow: 0 0 0 0.5rem currentColor;
+  opacity: 0.1;
 }
 
 .switch > input:not(:disabled):is(:focus, :hover) + span::before,

package/src/cdn/elements/sliders.css

@@ -49,6 +49,7 @@
   z-index: 1;
   padding: 0;
   margin: 0;
+  transform: rotate(0deg);
 }
 
 .slider > input:only-of-type {
@@ -252,7 +253,7 @@
   inset: var(---end) 0 var(---start) 0;
 }
 
-@media (hover: none){
+@media (pointer: coarse) {
   .slider > :hover ~ .tooltip {
     inset-block-start: -1rem !important;
     opacity: 1 !important;

package/src/cdn/elements/sliders.ts

@@ -0,0 +1,86 @@
+import { query, queryAll, hasClass, on, off, parent, hasTag, isTouchable } from "../utils";
+
+function onInputDocument(e: Event) {
+  const input = e.target as HTMLInputElement;
+  if (!hasTag(input, "input") && !hasTag(input, "select")) return;
+
+  if (input.type === "range") {
+    input.focus();
+    updateRange(input);
+  } else {
+    updateAllRanges();
+  }
+}
+
+function onFocusRange(e: Event) {
+  if (!isTouchable()) return;
+
+  const input = e.target as HTMLInputElement;
+  const label = parent(input) as HTMLLabelElement;
+  if (hasClass(label, "vertical")) document.body.classList.add("no-scroll");
+}
+
+function onBlurRange(e: Event) {
+  if (!isTouchable()) return;
+
+  const input = e.target as HTMLInputElement;
+  const label = parent(input) as HTMLLabelElement;
+  if (hasClass(label, "vertical")) document.body.classList.remove("no-scroll");
+}
+
+function updateAllRanges() {
+  const body = document.body;
+  const ranges = queryAll(".slider > input[type=range]") as NodeListOf<HTMLInputElement>;
+  if (!ranges.length) off(body, "input", onInputDocument, false);
+  else on(body, "input", onInputDocument, false);
+  for(let i=0; i<ranges.length; i++) updateRange(ranges[i]);
+}
+
+function updateRange(input: HTMLInputElement) {
+  on(input, "focus", onFocusRange);
+  on(input, "blur", onBlurRange);
+
+  const label = parent(input) as HTMLElement;
+  const bar = query("span", label) as HTMLElement;
+  const inputs = queryAll("input", label) as NodeListOf<HTMLInputElement>;
+  if (!inputs.length || !bar) return;
+
+  const rootSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--size")) || 16;
+  const thumb = hasClass(label, "max") ? 0 : 0.25 * rootSize * 100 / inputs[0].offsetWidth;
+  const percents: Array<number> = [];
+  const values: Array<number> = [];
+  for (let i = 0, n = inputs.length; i < n; i++) {
+    const min = parseFloat(inputs[i].min) || 0;
+    const max = parseFloat(inputs[i].max) || 100;
+    const value = parseFloat(inputs[i].value) || 0;
+    const percent = (value - min) * 100 / (max - min);
+    const fix = thumb / 2 - thumb * percent / 100;
+    percents.push(percent + fix);
+    values.push(value);
+  }
+
+  let percent = percents[0];
+  let start = 0;
+  let end = 100 - start - percent;
+  let value1 = values[0];
+  let value2 = values[1] || 0;
+  if (inputs.length > 1) {
+    percent = Math.abs(percents[1] - percents[0]);
+    start = percents[1] > percents[0] ? percents[0] : percents[1];
+    end = 100 - start - percent;
+
+    if (value2 > value1) {
+      value1 = values[1] || 0;
+      value2 = values[0];
+    }
+  }
+
+  label.style.setProperty("---start", `${start}%`);
+  label.style.setProperty("---end", `${end}%`);
+  label.style.setProperty("---value1", `'${value1}'`);
+  label.style.setProperty("---value2", `'${value2}'`);
+}
+
+export function updateAllSliders() {
+  updateAllRanges();
+}

package/src/cdn/elements/snackbars.ts

@@ -0,0 +1,27 @@
+import { queryAll, addClass, on, removeClass, blurActiveElement } from "../utils";
+
+let _timeoutSnackbar: ReturnType<typeof setTimeout>;
+
+function onClickSnackbar(e: Event) {
+  const snackbar = e.currentTarget as Element;
+  removeClass(snackbar, "active");
+
+  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
+}
+
+export function updateSnackbar(snackbar: Element, milliseconds?: number) {
+  blurActiveElement();
+
+  const activeSnackbars = queryAll(".snackbar.active");
+  for(let i=0; i<activeSnackbars.length; i++) removeClass(activeSnackbars[i], "active");
+  addClass(snackbar, "active");
+  on(snackbar, "click", onClickSnackbar);
+
+  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
+
+  if (milliseconds === -1) return;
+
+  _timeoutSnackbar = setTimeout(() => {
+    removeClass(snackbar, "active");
+  }, milliseconds ?? 6000);
+}

package/src/cdn/helpers/theme.ts

@@ -0,0 +1,84 @@
+import { type IBeerCssTheme } from "../interfaces";
+import { isDark } from "../utils";
+
+const _lastTheme: IBeerCssTheme = {
+  light: "",
+  dark: "",
+};
+
+function getMode() {
+  return document?.body?.classList.contains("dark") ? "dark" : "light";
+}
+
+function lastTheme(): IBeerCssTheme {
+  if (_lastTheme.light && _lastTheme.dark) return _lastTheme;
+  const body = document.body;
+
+  const light = document.createElement("body");
+  light.className = "light";
+  body.appendChild(light);
+
+  const dark = document.createElement("body");
+  dark.className = "dark";
+  body.appendChild(dark);
+
+  const fromLight = getComputedStyle(light);
+  const fromDark = getComputedStyle(dark);
+  const variables = ["--primary", "--on-primary", "--primary-container", "--on-primary-container", "--secondary", "--on-secondary", "--secondary-container", "--on-secondary-container", "--tertiary", "--on-tertiary", "--tertiary-container", "--on-tertiary-container", "--error", "--on-error", "--error-container", "--on-error-container", "--background", "--on-background", "--surface", "--on-surface", "--surface-variant", "--on-surface-variant", "--outline", "--outline-variant", "--shadow", "--scrim", "--inverse-surface", "--inverse-on-surface", "--inverse-primary", "--surface-dim", "--surface-bright", "--surface-container-lowest", "--surface-container-low", "--surface-container", "--surface-container-high", "--surface-container-highest"];
+  for (let i = 0, n = variables.length; i < n; i++) {
+    _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
+    _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
+  }
+
+  body.removeChild(light);
+  body.removeChild(dark);
+  return _lastTheme;
+}
+
+export function updateTheme(source?: IBeerCssTheme | any): IBeerCssTheme | Promise<IBeerCssTheme> {
+  const context = globalThis as any;
+  const body = document.body;
+  if (!source || !context.materialDynamicColors) return lastTheme();
+
+  const mode = getMode();
+  if (source.light && source.dark) {
+    _lastTheme.light = source.light;
+    _lastTheme.dark = source.dark;
+    body.setAttribute("style", source[mode]);
+    return source;
+  }
+
+  return context.materialDynamicColors(source).then((theme: IBeerCssTheme) => {
+    const toCss = (data: any) => {
+      let style = "";
+      for (let i = 0, keys = Object.keys(data), n = keys.length; i < n; i++) {
+        const key = keys[i];
+        const value = data[key] as string;
+        const kebabCase = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+        style += "--" + kebabCase + ":" + value + ";";
+      }
+      return style;
+    };
+
+    _lastTheme.light = toCss(theme.light);
+    _lastTheme.dark = toCss(theme.dark);
+    body.setAttribute("style", _lastTheme[mode]);
+    return _lastTheme;
+  });
+}
+
+export function updateMode(value: string): string {
+  const context = (globalThis as any);
+  const body = document.body;
+
+  if (!body) return value;
+  if (!value) return getMode();
+  if (value === "auto") value = isDark() ? "dark" : "light";
+  
+  body.classList.remove("light", "dark");
+  body.classList.add(value);
+  
+  const lastThemeStyle = value === "light" ? _lastTheme.light : _lastTheme.dark;
+  if (context.materialDynamicColors) body.setAttribute("style", lastThemeStyle);
+  return getMode();
+}

package/src/cdn/helpers/waves.css

@@ -10,14 +10,14 @@
   inline-size: 100%;
   block-size: 100%;
   background-position: center;
-  background-image: radial-gradient(circle, var(--active) 1%, transparent 1%);
+  background-image: radial-gradient(circle, currentColor 1%, transparent 1%);
   opacity: 0;
   transition: none;
 }
 
 :is(.wave, .chip, .button, button, nav.tabbed > a, .tabs > a):is(:focus-visible, :hover)::after {
   background-size: 15000%;
-  opacity: 1;
+  opacity: 0.1;
   transition: background-size var(--speed2) linear;
 }
 

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.6.13/dist/cdn/material-symbols-outlined.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.7.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.6.13/dist/cdn/material-symbols-rounded.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.7.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.6.13/dist/cdn/material-symbols-sharp.woff2") format("woff2");
+    url("https://cdn.jsdelivr.net/npm/beercss@3.7.0/dist/cdn/material-symbols-sharp.woff2") format("woff2");
 }