beercss 3.9.7 → 3.10.1

package/dist/cdn/beer.custom-element.js

@@ -0,0 +1,38 @@
+class BeerCssCustomElement extends HTMLElement {
+  static isCssLoaded = false;
+  static isJsLoaded = false;
+  
+  constructor() {
+    super();
+    this.run();
+  }
+  
+  async addJs() {
+    if (BeerCssCustomElement.isJsLoaded) return;
+    BeerCssCustomElement.isJsLoaded = true;
+
+    if (window.ui) return;
+    return await import("https://cdn.jsdelivr.net/npm/beercss@3.10.1/dist/cdn/beer.min.js");
+  }
+  
+  async addCss() {
+    if (BeerCssCustomElement.isCssLoaded) return;
+    BeerCssCustomElement.isCssLoaded = true;
+    const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue('--scoped');
+    if (isScoped) return;
+
+    const head = document.querySelector("head");
+    const element = document.createElement("link");
+    element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.10.1/dist/cdn/beer.scoped.min.css");
+    head.appendChild(element);
+  }
+  
+  async run() {
+    this.classList.add("beer");
+    await Promise.all([this.addJs(), this.addCss(), this.addDynamicColor()]);
+    ui();
+  }
+}
+
+customElements.define('beer-css', BeerCssCustomElement);
+export default BeerCssCustomElement;

package/dist/cdn/beer.custom-element.min.js

@@ -0,0 +1 @@
+class BeerCssCustomElement extends HTMLElement {static isCssLoaded = false;static isJsLoaded = false;constructor() {super();this.run();}async addJs() {if (BeerCssCustomElement.isJsLoaded) return;BeerCssCustomElement.isJsLoaded = true;if (window.ui) return;return await import("https://cdn.jsdelivr.net/npm/beercss@3.10.1/dist/cdn/beer.min.js");}async addCss() {if (BeerCssCustomElement.isCssLoaded) return;BeerCssCustomElement.isCssLoaded = true;const isScoped = !!getComputedStyle(document.documentElement).getPropertyValue('--scoped');if (isScoped) return;const head = document.querySelector("head");const element = document.createElement("link");element.setAttribute("href", "https://cdn.jsdelivr.net/npm/beercss@3.10.1/dist/cdn/beer.scoped.min.css");head.appendChild(element);}async run() {this.classList.add("beer");await Promise.all([this.addJs(), this.addCss(), this.addDynamicColor()]);ui();}}customElements.define('beer-css', BeerCssCustomElement);export default BeerCssCustomElement;

package/dist/cdn/beer.js

@@ -1,9 +1,9 @@
 const _emptyNodeList = [];
 function isTouchable() {
-  return window.matchMedia("(pointer: coarse)").matches;
+  return window == null ? void 0 : window.matchMedia("(pointer: coarse)").matches;
 }
 function isDark() {
-  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return window == null ? void 0 : window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
 async function wait(milliseconds) {
   await new Promise((resolve) => setTimeout(resolve, milliseconds));
@@ -41,26 +41,18 @@ function hasType(element, name) {
   return ((_a = element == null ? void 0 : element.type) == null ? void 0 : _a.toLowerCase()) === name;
 }
 function addClass(element, name) {
-  if (element instanceof NodeList)
-    for (let i = 0; i < element.length; i++)
-      element[i].classList.add(name);
-  else
-    element == null ? void 0 : element.classList.add(name);
+  if (element instanceof NodeList) for (let i = 0; i < element.length; i++) element[i].classList.add(name);
+  else element == null ? void 0 : element.classList.add(name);
 }
 function removeClass(element, name) {
-  if (element instanceof NodeList)
-    for (let i = 0; i < element.length; i++)
-      element[i].classList.remove(name);
-  else
-    element == null ? void 0 : element.classList.remove(name);
+  if (element instanceof NodeList) for (let i = 0; i < element.length; i++) element[i].classList.remove(name);
+  else element == null ? void 0 : element.classList.remove(name);
 }
 function on(element, name, callback, useCapture = true) {
-  if (element == null ? void 0 : element.addEventListener)
-    element.addEventListener(name, callback, useCapture);
+  if (element == null ? void 0 : element.addEventListener) element.addEventListener(name, callback, useCapture);
 }
 function off(element, name, callback, useCapture = true) {
-  if (element == null ? void 0 : element.removeEventListener)
-    element.removeEventListener(name, callback, useCapture);
+  if (element == null ? void 0 : element.removeEventListener) element.removeEventListener(name, callback, useCapture);
 }
 function insertBefore(newElement, element) {
   var _a;
@@ -95,26 +87,21 @@ function queryDataUi(id) {
   return query('[data-ui="#' + id + '"]');
 }
 function updateAllClickable(element) {
-  if (element.id && hasClass(element, "page"))
-    element = queryDataUi(element.id) ?? element;
+  if (element.id && hasClass(element, "page")) element = queryDataUi(element.id) ?? element;
   const container = parent(element);
-  if (!hasClass(container, "tabs") && !hasClass(container, "tabbed") && !hasTag(container, "nav"))
-    return;
+  if (!hasClass(container, "tabs") && !hasClass(container, "tabbed") && !hasTag(container, "nav")) return;
   const as = queryAll("a", container);
-  for (let i = 0; i < as.length; i++)
-    removeClass(as[i], "active");
+  for (let i = 0; i < as.length; i++) removeClass(as[i], "active");
   addClass(element, "active");
 }
 function updatePlaceholder(element) {
-  if (!element.placeholder)
-    element.placeholder = " ";
+  if (!element.placeholder) element.placeholder = " ";
 }
 function onClickLabel(e) {
   const label = e.currentTarget;
   const field = parent(label);
   const input = query("input:not([type=file], [type=checkbox], [type=radio]), select, textarea", field);
-  if (input)
-    input.focus();
+  if (input) input.focus();
 }
 function onFocusInput(e) {
   const input = e.currentTarget;
@@ -148,13 +135,11 @@ function onPasswordIconClick(e) {
   var _a;
   const icon = e.currentTarget;
   const input = query("input", parent(icon));
-  if (input && ((_a = icon.textContent) == null ? void 0 : _a.includes("visibility")))
-    input.type = input.type === "password" ? "text" : "password";
+  if (input && ((_a = icon.textContent) == null ? void 0 : _a.includes("visibility"))) input.type = input.type === "password" ? "text" : "password";
 }
 function updateAllLabels() {
   const labels = queryAll(".field > label");
-  for (let i = 0; i < labels.length; i++)
-    on(labels[i], "click", onClickLabel);
+  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])");
@@ -196,25 +181,21 @@ function updateAllTextareas() {
 }
 function updateAllPasswordIcons() {
   const icons = queryAll("input[type=password] ~ :is(i, a)");
-  for (let i = 0; i < icons.length; i++)
-    on(icons[i], "click", onPasswordIconClick);
+  for (let i = 0; i < icons.length; i++) on(icons[i], "click", onPasswordIconClick);
 }
 function updateInput(input) {
-  if (hasType(input, "number") && !input.value)
-    input.value = "";
+  if (hasType(input, "number") && !input.value) input.value = "";
   updatePlaceholder(input);
 }
 function updateFile(input, e) {
   if ((e == null ? void 0 : e.key) === "Enter") {
     const previousInput = prev(input);
-    if (!hasType(previousInput, "file"))
-      return;
+    if (!hasType(previousInput, "file")) return;
     previousInput.click();
     return;
   }
   const nextInput = next(input);
-  if (!hasType(nextInput, "text"))
-    return;
+  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);
@@ -223,14 +204,12 @@ function updateFile(input, e) {
 function updateColor(input, e) {
   if ((e == null ? void 0 : e.key) === "Enter") {
     const previousInput = prev(input);
-    if (!hasType(previousInput, "color"))
-      return;
+    if (!hasType(previousInput, "color")) return;
     previousInput.click();
     return;
   }
   const nextInput = next(input);
-  if (!hasType(nextInput, "text"))
-    return;
+  if (!hasType(nextInput, "text")) return;
   nextInput.readOnly = true;
   nextInput.value = input.value;
   on(nextInput, "keydown", onKeydownColor, false);
@@ -240,8 +219,7 @@ function updateTextarea(textarea) {
   updatePlaceholder(textarea);
   const field = parent(textarea);
   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`);
 }
 function updateAllFields() {
   updateAllLabels();
@@ -254,8 +232,7 @@ function updateAllFields() {
 }
 function onInputDocument(e) {
   const input = e.target;
-  if (!hasTag(input, "input") && !hasTag(input, "select"))
-    return;
+  if (!hasTag(input, "input") && !hasTag(input, "select")) return;
   if (input.type === "range") {
     input.focus();
     updateRange(input);
@@ -264,37 +241,28 @@ function onInputDocument(e) {
   }
 }
 function onFocusRange(e) {
-  if (!isTouchable())
-    return;
+  if (!isTouchable()) return;
   const input = e.target;
   const label = parent(input);
-  if (hasClass(label, "vertical"))
-    document.body.classList.add("no-scroll");
+  if (hasClass(label, "vertical")) document.body.classList.add("no-scroll");
 }
 function onBlurRange(e) {
-  if (!isTouchable())
-    return;
+  if (!isTouchable()) return;
   const input = e.target;
   const label = parent(input);
-  if (hasClass(label, "vertical"))
-    document.body.classList.remove("no-scroll");
+  if (hasClass(label, "vertical")) document.body.classList.remove("no-scroll");
 }
 function updateAllRanges() {
   const body = document.body;
   const ranges = queryAll(".slider > input[type=range]");
-  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]);
+  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 rootSizeInPixels() {
   const size = getComputedStyle(document.documentElement).getPropertyValue("--size") || "16px";
-  if (size.includes("%"))
-    return parseInt(size) * 16 / 100;
-  if (size.includes("em"))
-    return parseInt(size) * 16;
+  if (size.includes("%")) return parseInt(size) * 16 / 100;
+  if (size.includes("em")) return parseInt(size) * 16;
   return parseInt(size);
 }
 function updateRange(input) {
@@ -303,8 +271,7 @@ function updateRange(input) {
   const label = parent(input);
   const bar = query("span", label);
   const inputs = queryAll("input", label);
-  if (!inputs.length || !bar)
-    return;
+  if (!inputs.length || !bar) return;
   const rootSize = rootSizeInPixels();
   const thumb = hasClass(label, "max") ? 0 : 0.25 * rootSize * 100 / inputs[0].offsetWidth;
   const percents = [];
@@ -332,10 +299,10 @@ function updateRange(input) {
       value2 = values[0];
     }
   }
-  label.style.setProperty("---start", `${start2}%`);
-  label.style.setProperty("---end", `${end}%`);
-  label.style.setProperty("---value1", `'${value1}'`);
-  label.style.setProperty("---value2", `'${value2}'`);
+  label.style.setProperty("--_start", `${start2}%`);
+  label.style.setProperty("--_end", `${end}%`);
+  label.style.setProperty("--_value1", `'${value1}'`);
+  label.style.setProperty("--_value2", `'${value2}'`);
 }
 function updateAllSliders() {
   updateAllRanges();
@@ -349,8 +316,7 @@ function getMode() {
   return ((_a = document == null ? void 0 : document.body) == null ? void 0 : _a.classList.contains("dark")) ? "dark" : "light";
 }
 function lastTheme() {
-  if (_lastTheme.light && _lastTheme.dark)
-    return _lastTheme;
+  if (_lastTheme.light && _lastTheme.dark) return _lastTheme;
   const body = document.body;
   const light = document.createElement("body");
   light.className = "light";
@@ -372,8 +338,7 @@ function lastTheme() {
 function updateTheme(source) {
   const context = globalThis;
   const body = document.body;
-  if (!source || !context.materialDynamicColors)
-    return lastTheme();
+  if (!source || !context.materialDynamicColors) return lastTheme();
   const mode = getMode();
   if (source.light && source.dark) {
     _lastTheme.light = source.light;
@@ -401,17 +366,13 @@ function updateTheme(source) {
 function updateMode(value) {
   const context = globalThis;
   const body = document.body;
-  if (!body)
-    return value;
-  if (!value)
-    return getMode();
-  if (value === "auto")
-    value = isDark() ? "dark" : "light";
+  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);
+  if (context.materialDynamicColors) body.setAttribute("style", lastThemeStyle);
   return getMode();
 }
 const _dialogs = [];
@@ -432,77 +393,60 @@ function closeDialog(dialog, overlay) {
   dialog.close();
   _dialogs.pop();
   const previousDialog = _dialogs[_dialogs.length - 1];
-  if (previousDialog)
-    previousDialog.focus();
-  else if (isTouchable())
-    document.body.classList.remove("no-scroll");
+  if (previousDialog) previousDialog.focus();
+  else if (isTouchable()) document.body.classList.remove("no-scroll");
 }
 async function openDialog(dialog, overlay, isModal, from) {
-  if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip"))
-    addClass(from, "active");
+  if (!hasTag(from, "button") && !hasClass(from, "button") && !hasClass(from, "chip")) addClass(from, "active");
   addClass(overlay, "active");
   addClass(dialog, "active");
-  if (isModal)
-    dialog.showModal();
-  else
-    dialog.show();
+  if (isModal) dialog.showModal();
+  else dialog.show();
   await wait(90);
-  if (!isModal)
-    on(dialog, "keydown", onKeydownDialog, false);
+  if (!isModal) on(dialog, "keydown", onKeydownDialog, false);
   _dialogs.push(dialog);
-  if (isTouchable())
-    document.body.classList.add("no-scroll");
+  if (isTouchable()) document.body.classList.add("no-scroll");
   focusOnDialogOrElement(dialog);
 }
 function onClickOverlay(e) {
   const overlay = e.currentTarget;
   const dialog = next(overlay);
-  if (hasTag(dialog, "dialog"))
-    closeDialog(dialog, overlay);
+  if (hasTag(dialog, "dialog")) closeDialog(dialog, overlay);
 }
 async function updateDialog(from, dialog) {
   blurActiveElement();
   let overlay = prev(dialog);
   const isActive = hasClass(dialog, "active") || dialog.open;
   const isModal = hasClass(dialog, "modal");
-  if (!isModal)
-    off(dialog, "keydown", onKeydownDialog, false);
+  if (!isModal) off(dialog, "keydown", onKeydownDialog, false);
   if (!hasClass(overlay, "overlay")) {
     overlay = create({ class: "overlay" });
     insertBefore(overlay, dialog);
     await wait(90);
   }
-  if (!isModal)
-    on(overlay, "click", onClickOverlay, false);
-  if (isActive)
-    closeDialog(dialog, overlay);
-  else
-    void openDialog(dialog, overlay, isModal, from);
+  if (!isModal) on(overlay, "click", onClickOverlay, false);
+  if (isActive) closeDialog(dialog, overlay);
+  else void openDialog(dialog, overlay, isModal, from);
 }
 let _timeoutMenu;
 function onClickDocument(e) {
   off(document.body, "click", onClickDocument);
   const body = e.target;
   const menus = queryAll("menu.active");
-  for (let i = 0; i < menus.length; i++)
-    updateMenu(body, menus[i], e);
+  for (let i = 0; i < menus.length; i++) updateMenu(body, menus[i], e);
 }
 function focusOnMenuOrInput(menu) {
   setTimeout(() => {
     const input = query(".field > input", menu);
-    if (input)
-      input.focus();
-    else
-      menu.focus();
+    if (input) input.focus();
+    else menu.focus();
   }, 90);
 }
 function updateMenu(from, menu, e) {
-  if (_timeoutMenu)
-    clearTimeout(_timeoutMenu);
+  if (_timeoutMenu) clearTimeout(_timeoutMenu);
   _timeoutMenu = setTimeout(() => {
     on(document.body, "click", onClickDocument);
-    if (!hasTag(document.activeElement, "input"))
-      blurActiveElement();
+    if (!hasTag(document.activeElement, "input")) blurActiveElement();
     const isActive = hasClass(menu, "active");
     const isEvent = (e == null ? void 0 : e.target) === from;
     const isChild = !!from.closest("menu");
@@ -519,28 +463,23 @@ let _timeoutSnackbar;
 function onClickSnackbar(e) {
   const snackbar = e.currentTarget;
   removeClass(snackbar, "active");
-  if (_timeoutSnackbar)
-    clearTimeout(_timeoutSnackbar);
+  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
 }
 function updateSnackbar(snackbar, milliseconds) {
   blurActiveElement();
   const activeSnackbars = queryAll(".snackbar.active");
-  for (let i = 0; i < activeSnackbars.length; i++)
-    removeClass(activeSnackbars[i], "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;
+  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
+  if (milliseconds === -1) return;
   _timeoutSnackbar = setTimeout(() => {
     removeClass(snackbar, "active");
   }, milliseconds ?? 6e3);
 }
 function updatePage(page) {
   const container = parent(page);
-  if (container)
-    removeClass(queryAll(":scope > .page", container), "active");
+  if (container) removeClass(queryAll(":scope > .page", container), "active");
   addClass(page, "active");
 }
 function onPointerDownRipple(e) {
@@ -567,22 +506,19 @@ function updateRipple(e) {
 }
 function updateAllRipples() {
   const ripples = queryAll(".slow-ripple, .ripple, .fast-ripple");
-  for (let i = 0; i < ripples.length; i++)
-    on(ripples[i], "pointerdown", onPointerDownRipple);
+  for (let i = 0; i < ripples.length; i++) on(ripples[i], "pointerdown", onPointerDownRipple);
 }
 const _context = globalThis;
 let _timeoutMutation;
 let _mutation;
 function onMutation() {
-  if (_timeoutMutation)
-    clearTimeout(_timeoutMutation);
+  if (_timeoutMutation) clearTimeout(_timeoutMutation);
   _timeoutMutation = setTimeout(async () => await _ui(), 180);
 }
 async function run(from, to, options, e) {
   if (!to) {
     to = query(from.getAttribute("data-ui"));
-    if (!to)
-      return;
+    if (!to) return;
   }
   updateAllClickable(from);
   if (hasTag(to, "dialog")) {
@@ -612,12 +548,10 @@ function onClickElement(e) {
   void run(e.currentTarget, null, null, e);
 }
 function onKeydownElement(e) {
-  if (e.key === "Enter")
-    void run(e.currentTarget, null, null, e);
+  if (e.key === "Enter") void run(e.currentTarget, null, null, e);
 }
 function setup() {
-  if (_context.ui || _mutation)
-    return;
+  if (_context.ui || _mutation || !_context.MutationObserver) return;
   _mutation = new MutationObserver(onMutation);
   _mutation.observe(document.body, { childList: true, subtree: true });
   onMutation();
@@ -626,8 +560,7 @@ function updateAllDataUis() {
   const elements = queryAll("[data-ui]");
   for (let i = 0, n = elements.length; i < n; i++) {
     on(elements[i], "click", onClickElement);
-    if (hasTag(elements[i], "a") && !elements[i].getAttribute("href"))
-      on(elements[i], "keydown", onKeydownElement);
+    if (hasTag(elements[i], "a") && !elements[i].getAttribute("href")) on(elements[i], "keydown", onKeydownElement);
   }
 }
 function _ui(selector, options) {
@@ -636,15 +569,11 @@ function _ui(selector, options) {
       setup();
       return;
     }
-    if (selector === "guid")
-      return guid();
-    if (selector === "mode")
-      return updateMode(options);
-    if (selector === "theme")
-      return updateTheme(options);
+    if (selector === "guid") return guid();
+    if (selector === "mode") return updateMode(options);
+    if (selector === "theme") return updateTheme(options);
     const to = query(selector);
-    if (!to)
-      return;
+    if (!to) return;
     void run(to, to, options);
   }
   updateAllDataUis();
@@ -654,11 +583,9 @@ function _ui(selector, options) {
 }
 function start() {
   var _a;
-  if (_context.ui)
-    return;
+  if (_context.ui) return;
   const body = (_a = _context.document) == null ? void 0 : _a.body;
-  if (body && !body.classList.contains("dark") && !body.classList.contains("light"))
-    updateMode("auto");
+  if (body && !body.classList.contains("dark") && !body.classList.contains("light")) updateMode("auto");
   setup();
   _context.ui = _ui;
 }