beercss 3.2.13 → 3.3.0

package/src/cdn/beer.ts

@@ -1,5 +1,6 @@
-let _timeoutToast: ReturnType<typeof setTimeout>;
+let _timeoutSnackbar: ReturnType<typeof setTimeout>;
 let _timeoutMutation: ReturnType<typeof setTimeout>;
+let _timeoutMenu: ReturnType<typeof setTimeout>;
 let _mutation: MutationObserver | null;
 const _lastTheme: IBeerCssTheme = {
   light: "",
@@ -39,10 +40,6 @@ function queryAll (selector: string | NodeListOf<Element> | null, element?: Elem
   }
 }
 
-function hasQuery (selector: string | Element | null, element?: Element | null): boolean {
-  return !!(query(selector, element));
-}
-
 function hasClass (element: Element | null, name: string): boolean {
   return element?.classList?.contains(name) ?? false;
 }
@@ -96,20 +93,7 @@ function create (htmlAttributesAsJson: any): HTMLElement {
 function updateInput (target: Element): void {
   const input = target as HTMLInputElement;
   if (hasType(input, "number") && !input.value) input.value = "";
-
-  const parentTarget = parent(target);
-  const label = query("label", parentTarget) as HTMLLabelElement;
-  const isBorder = hasClass(parentTarget, "border") && !hasClass(parentTarget, "fill");
-  const toActive = document.activeElement === target || input.value || hasQuery("[selected]", input) || hasType(input, "date") || hasType(input, "time") || hasType(input, "datetime-local");
-
-  if (toActive) {
-    if (isBorder) addClass(input, "active");
-    addClass(label, "active");
-  } else {
-    if (isBorder) removeClass(input, "active");
-    removeClass(label, "active");
-  }
-
+  if (!input.placeholder) input.placeholder = " ";
   if (target.getAttribute("data-ui")) void open(target, null);
 }
 
@@ -141,11 +125,11 @@ function onClickDocument (e: Event): void {
   menus.forEach((x: Element) => menu(target, x, e));
 }
 
-function onClickToast (e: Event): void {
+function onClickSnackbar (e: Event): void {
   const target = e.currentTarget as Element;
   removeClass(target, "active");
 
-  if (_timeoutToast) clearTimeout(_timeoutToast);
+  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
 }
 
 function onChangeFile (e: Event): void {
@@ -191,33 +175,49 @@ function updateRange (target: Element): void {
   const parentTarget = parent(target) as HTMLElement;
   const bar = query("span", parentTarget) as HTMLElement;
   const inputs = queryAll("input", parentTarget) as NodeListOf<HTMLInputElement>;
-  const tooltip = query(".tooltip", parentTarget) as HTMLElement;
   if (!inputs.length || !bar) return;
 
+  const rootSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--size")) || 16;
+  const thumb = 1.25 * rootSize * 100 / inputs[0].offsetWidth;
   const percents: Array<number> = [];
   const values: Array<number> = [];
   for (let i = 0; i < inputs.length; i++) {
-    const min = parseFloat(inputs[i].min || "0");
-    const max = parseFloat(inputs[i].max || "100");
-    const value = parseFloat(inputs[i].value || "0");
+    const oldMin = parseFloat(inputs[i].min);
+    const oldMax = parseFloat(inputs[i].max);
+    const oldValue = parseFloat(inputs[i].value);
+    const min = oldMin || 0;
+    const max = oldMax || 100;
+    const value = oldValue || 0;
     const percent = (value - min) * 100 / (max - min);
-    percents.push(percent);
+    const fix = thumb / 2 - thumb * percent / 100;
+    percents.push(percent + fix);
     values.push(value);
-  }
 
-  if (tooltip && tooltip.textContent !== values.join()) tooltip.innerHTML = values.join();
+    if (oldMin !== min) inputs[i].min = `${min}`;
+    if (oldMax !== max) inputs[i].max = `${max}`;
+    if (oldValue !== value) inputs[i].value = `${value}`;
+  }
 
   let percent = percents[0];
-  let left = 0;
-  let right = 100 - left - percent;
+  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]);
-    left = percents[1] > percents[0] ? percents[0] : percents[1];
-    right = 100 - left - percent;
+    start = percents[1] > percents[0] ? percents[0] : percents[1];
+    end = 100 - start - percent;
+
+    if (value2 > value1) {
+      value1 = values[1] || 0;
+      value2 = values[0];
+    }
   }
 
-  bar.style.left = `${left}%`;
-  bar.style.right = `${right}%`;
+  parentTarget.style.setProperty("---start", `${start}%`);
+  parentTarget.style.setProperty("---end", `${end}%`);
+  parentTarget.style.setProperty("---value1", `'${value1}'`);
+  parentTarget.style.setProperty("---value2", `'${value2}'`);
 }
 
 async function open (from: Element, to: Element | null, options?: any, e?: Event): Promise<void> {
@@ -228,9 +228,8 @@ async function open (from: Element, to: Element | null, options?: any, e?: Event
 
   if (hasTag(to, "dialog")) return await dialog(from, to);
   if (hasTag(to, "menu")) return menu(from, to, e);
-  if (hasClass(to, "toast")) return toast(from, to, options);
+  if (hasClass(to, "snackbar")) return snackbar(from, to, options);
   if (hasClass(to, "page")) return page(from, to);
-  if (hasClass(to, "progress")) return progress(to, options);
 
   tab(from);
 
@@ -255,26 +254,29 @@ function page (from: Element, to: Element): void {
 }
 
 function menu (from: Element, to: Element, e?: Event): any {
-  on(document.body, "click", onClickDocument);
-  e?.stopPropagation();
-  tab(from);
+  if (_timeoutMenu) clearTimeout(_timeoutMenu);
 
-  if (hasClass(to, "active")) {
-    if (!e) return removeClass(to, "active");
+  _timeoutMenu = setTimeout(() => {
+    on(document.body, "click", onClickDocument);
+    tab(from);
 
-    const trustedFrom = e.target as Element;
-    const trustedTo = query(trustedFrom.getAttribute("data-ui") ?? "");
-    const trustedMenu = trustedFrom.closest("menu");
-    const trustedActive = !query("menu", trustedFrom.closest("[data-ui]") ?? undefined);
+    if (hasClass(to, "active")) {
+      if (!e) return removeClass(to, "active");
 
-    if (trustedTo && trustedTo !== trustedMenu) return menu(trustedFrom, trustedTo);
-    if (!trustedTo && !trustedActive && trustedMenu) return false;
-    return removeClass(to, "active");
-  }
+      const trustedFrom = e.target as Element;
+      const trustedTo = query(trustedFrom.getAttribute("data-ui") ?? "");
+      const trustedMenu = trustedFrom.closest("menu");
+      const trustedActive = !query("menu", trustedFrom.closest("[data-ui]") ?? undefined);
 
-  const menus = queryAll("menu.active");
-  menus.forEach((x: Element) => removeClass(x, "active"));
-  addClass(to, "active");
+      if (trustedTo && trustedTo !== trustedMenu) return menu(trustedFrom, trustedTo);
+      if (!trustedTo && !trustedActive && trustedMenu) return false;
+      return removeClass(to, "active");
+    }
+
+    const menus = queryAll("menu.active");
+    menus.forEach((x: Element) => removeClass(x, "active"));
+    addClass(to, "active");
+  }, 90);
 }
 
 async function dialog (from: Element, to: Element): Promise<void> {
@@ -326,44 +328,24 @@ async function dialog (from: Element, to: Element): Promise<void> {
   }
 }
 
-function toast (from: Element, to: Element, milliseconds?: number): void {
+function snackbar (from: Element, to: Element, milliseconds?: number): void {
+  (document.activeElement as HTMLElement)?.blur();
   tab(from);
 
-  const elements = queryAll(".toast.active");
+  const elements = queryAll(".snackbar.active");
   elements.forEach((x: Element) => removeClass(x, "active"));
   addClass(to, "active");
-  on(to, "click", onClickToast);
+  on(to, "click", onClickSnackbar);
 
-  if (_timeoutToast) clearTimeout(_timeoutToast);
+  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
 
   if (milliseconds === -1) return;
 
-  _timeoutToast = setTimeout(() => {
+  _timeoutSnackbar = setTimeout(() => {
     removeClass(to, "active");
   }, milliseconds ?? 6000);
 }
 
-function progress (to: Element, percentage: number): void {
-  const element = to as HTMLElement;
-
-  if (hasClass(element, "left")) {
-    element.style.clipPath = `polygon(0% 0%, 0% 100%, ${percentage}% 100%, ${percentage}% 0%)`;
-    return;
-  }
-
-  if (hasClass(element, "top")) {
-    element.style.clipPath = `polygon(0% 0%, 100% 0%, 100% ${percentage}%, 0% ${percentage}%)`;
-    return;
-  }
-
-  if (hasClass(element, "right")) {
-    element.style.clipPath = `polygon(100% 0%, 100% 100%, ${100 - percentage}% 100%, ${100 - percentage}% 0%)`;
-    return;
-  }
-
-  if (hasClass(element, "bottom")) element.style.clipPath = `polygon(0% 100%, 100% 100%, 100% ${100 - percentage}%, 0% ${100 - percentage}%)`;
-}
-
 function lastTheme (): IBeerCssTheme {
   if (_lastTheme.light && _lastTheme.dark) return _lastTheme;
 
@@ -377,7 +359,7 @@ function lastTheme (): IBeerCssTheme {
 
   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", "--outline", "--surface-variant", "--on-surface-variant", "--inverse-surface", "--inverse-on-surface", "--inverse-primary", "--inverse-on-primary"];
+  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"];
   for (let i = 0; i < variables.length; i++) {
     _lastTheme.light += variables[i] + ":" + fromLight.getPropertyValue(variables[i]) + ";";
     _lastTheme.dark += variables[i] + ":" + fromDark.getPropertyValue(variables[i]) + ";";
@@ -429,7 +411,7 @@ function mode (value: string | any): string {
 function setup (): void {
   if (_mutation) return;
   _mutation = new MutationObserver(onMutation);
-  _mutation.observe(document.body, { childList: true, subtree: true });
+  _mutation.observe(document.body, { attributes: true, attributeFilter: ["value", "max", "min"], childList: true, subtree: true });
   onMutation();
 }
 
@@ -451,17 +433,19 @@ function ui (selector?: string | Element, options?: string | number | IBeerCssTh
   const labels = queryAll(".field > label");
   labels.forEach((x: Element) => on(x, "click", onClickLabel));
 
-  const inputs = queryAll(".field > input:not([type=file]), .field > select, .field > textarea");
+  const inputs = queryAll(".field > input:not([type=file]):not([type=range]), .field > select, .field > textarea");
   inputs.forEach((x: Element) => {
     on(x, "focus", onFocusInput);
     on(x, "blur", onBlurInput);
     updateInput(x);
   });
+
   const files = queryAll(".field > input[type=file]");
   files.forEach((x: Element) => {
     on(x, "change", onChangeFile);
     updateFile(x);
   });
+
   const ranges = queryAll(".slider > input[type=range]");
   ranges.forEach((x: Element) => {
     on(x, "input", onInputRange);
@@ -472,4 +456,4 @@ function ui (selector?: string | Element, options?: string | number | IBeerCssTh
 if ((globalThis as any).addEventListener) (globalThis as any).addEventListener("load", async () => await ui("setup"));
 (globalThis as any).beercss = ui;
 (globalThis as any).ui = ui;
-export default ui;
+export default ui;

package/src/cdn/elements/buttons.css

@@ -50,7 +50,7 @@ button {
 }
 
 :is(button, .button).border {
-  border-color: var(--primary);
+  border-color: var(--outline);
   color: var(--primary);
 }
 

package/src/cdn/elements/chips.css

@@ -3,13 +3,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 2.5rem;
-  min-width: 2.5rem;
+  height: 2rem;
+  min-width: 2rem;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--on-secondary);
+  background-color: transparent;
+  border: 0.0625rem solid var(--outline);
+  color: var(--on-surface-variant);
   padding: 0 1rem;
-  background-color: var(--secondary);
   margin: 0 0.5rem;
   text-transform: none;
   border-radius: 0.5rem;
@@ -19,9 +20,9 @@
   line-height: normal;
 }
 
-.chip.small {
-  height: 2rem;
-  min-width: 2rem;
+.chip.medium {
+  height: 2.5rem;
+  min-width: 2.5rem;
 }
 
 .chip.large {
@@ -29,15 +30,13 @@
   min-width: 3rem;
 }
 
-.chip.border {
-  border-color: var(--secondary);
-  color: var(--secondary);
-}
-
 .chip.fill {
   background-color: var(--secondary-container) !important;
-  color: var(--on-secondary-container) !important;
-  border: none;
+  border-color: transparent;
+}
+
+.chip.border {
+  border-color: var(--outline);
 }
 
 .chip.round.small {

package/src/cdn/elements/dialogs.css

@@ -18,16 +18,13 @@ dialog {
   overflow-y: auto;
   transition: var(--speed3) all, 0s background-color;
   transform: translate(-50%, -4rem);
+  border-radius: 1rem;
 }
 
 dialog::backdrop {
   display: none;
 }
 
-dialog:not(.left, .right, .top, .bottom) {
-  border-radius: 0.75rem;
-}
-
 dialog.small {
   width: 25%;
   height: 25%;
@@ -64,6 +61,7 @@ dialog.top {
   min-width: auto;
   max-height: 100%;
   transform: translateY(-100%);
+  border-radius: 0 0 1rem 1rem;
 }
 
 dialog.left {
@@ -76,6 +74,7 @@ dialog.left {
   height: 100%;
   max-height: 100%;
   transform: translateX(-100%);
+  border-radius: 0 1rem 1rem 0;
 }
 
 dialog.right {
@@ -88,6 +87,7 @@ dialog.right {
   height: 100%;
   max-height: 100%;
   transform: translateX(100%);
+  border-radius: 1rem 0 0 1rem;
 }
 
 dialog.bottom {
@@ -101,6 +101,7 @@ dialog.bottom {
   min-width: auto;
   max-height: 100%;
   transform: translateY(100%);
+  border-radius: 1rem 1rem 0 0;
 }
 
 dialog.max {

package/src/cdn/elements/fields.css

@@ -80,7 +80,7 @@
 }
 
 /* icon */
-.field > :is(i, img, svg, .loader) {
+.field > :is(i, img, svg, progress, a:not(.helper, .error)) {
   position: absolute;
   top: 50%;
   left: auto;
@@ -88,19 +88,11 @@
   transform: translateY(-50%);
   cursor: pointer;
   z-index: 0;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
-.field:is(.border, .fill, .round) > :is(i, img, svg, .loader) {
-  left: auto;
-  right: 1rem;
-}
-
-.field > :is(i, img, svg, .loader):first-child {
-  left: 1rem;
-  right: auto;
-}
-
-.field:is(.border, .fill, .round) > :is(i, img, svg, .loader):first-child {
+.field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child {
   left: 1rem;
   right: auto;
 }
@@ -109,8 +101,16 @@
   color: var(--error);
 }
 
-.field > .loader {
+.field > progress.circle {
+  top: calc(50% - 0.75rem);
   border-width: 0.1875rem;
+}
+
+.field > a:not(.helper, .error) {
+  z-index: 10;
+}
+
+.field > a > :is(i, img, svg, progress, a:not(.helper, .error)) {
   width: 1.5rem;
   height: 1.5rem;
 }
@@ -307,22 +307,25 @@ input[type=search]::-webkit-search-results-decoration {
 }
 
 .field.small > textarea,
+.field.small:not(.label) > textarea:focus,
 .field.small.border:not(.fill) > textarea {
   padding-top: 0.625rem;
 }
 
 .field > textarea,
-.field > textarea:focus,
+.field:not(.label) > textarea:focus,
 .field.border:not(.fill) > textarea {
   padding-top: 0.875rem;
 }
 
 .field.large > textarea,
+.field.large:not(.label) > textarea:focus,
 .field.large.border:not(.fill) > textarea {
   padding-top: 1.125rem;
 }
 
 .field.extra > textarea,
+.field.extra:not(.label) > textarea:focus,
 .field.extra.border:not(.fill) > textarea {
   padding-top: 1.375rem;
 }
@@ -352,12 +355,12 @@ input[type=search]::-webkit-search-results-decoration {
   line-height: 5rem;
 }
 
-.field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label) {
+.field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
   left: 1rem;
 }
 
 .field.label.round > label,
-.field.label.border.prefix.round:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label) {
+.field.label.border.prefix.round:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
   left: 1.5rem;
 }
 
@@ -365,12 +368,12 @@ input[type=search]::-webkit-search-results-decoration {
   left: 3rem;
 }
 
-.field.label > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label) {
+.field.label > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
   line-height: 2.5rem;
   font-size: 0.75rem;
 }
 
-.field.label.border:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label) {
+.field.label.border:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
   line-height: 1rem;
 }
 
@@ -379,7 +382,6 @@ input[type=search]::-webkit-search-results-decoration {
   display: block;
   margin-top: 0.5rem;
   border-top: 0.0625rem solid var(--outline);
-  min-width: 1rem;
   height: 1rem;
   transition: none;
   flex: auto;
@@ -390,11 +392,13 @@ input[type=search]::-webkit-search-results-decoration {
   border-top: 0.125rem solid var(--primary);
 }
 
-.field.label.border:not(.fill) > :is(input, select, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active) {
+.field.label.border:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+.field.label.border:not(.fill) > select {
   clip-path: polygon(-1% -1%, 0.75rem -1%, 0.75rem 0.5rem, calc(100% - 5rem) 0.5rem, calc(100% - 5rem) -1%, 101% -1%, 101% 101%, -1% 101%);
 }
 
-.field.label.border.round:not(.fill) > :is(input, select, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active) {
+.field.label.border.round:not(.fill) > :is(input, textarea):is(:focus, [placeholder]:not(:placeholder-shown), .active),
+.field.label.border.round:not(.fill) > select {
   clip-path: polygon(-1% -1%, 1.25rem -1%, 1.25rem 0.5rem, calc(100% - 5rem) 0.5rem, calc(100% - 5rem) -1%, 101% -1%, 101% 101%, -1% 101%);
 }
 

package/src/cdn/elements/icons.css

@@ -30,10 +30,15 @@ i.tiny {
   ---size: 1rem;
 }
 
+.chip > i,
 i.small {
   ---size: 1.25rem;
 }
 
+i.medium {
+  ---size: 1.5rem;
+}
+
 i.large {
   ---size: 1.75rem;
 }

package/src/cdn/elements/layouts.css

@@ -40,7 +40,7 @@ footer {
   background-color: var(--surface);
 }
 
-:is(header, footer).fixed {
+:is(header, footer, menu > *).fixed {
   position: sticky;
   top: 0;
   bottom: 0;

package/src/cdn/elements/media.css

@@ -40,18 +40,18 @@ svg {
   margin: 0 auto;
 }
 
-:is(button, .button, .chip) > .responsive {
-  width: 2.5rem;
-}
-
 :is(button, .button, .chip):not(.transparent) > .responsive {
   border: 0.25rem solid transparent;
 }
 
-:is(button, .button, .chip).small > .responsive {
+:is(button.small, .button.small, .chip) > .responsive {
   width: 2rem;
 }
 
+:is(button, .button, .chip.medium) > .responsive {
+  width: 2.5rem;
+}
+
 :is(button, .button, .chip).large > .responsive {
   width: 3rem;
 }