beercss 3.13.1 → 3.13.2

package/src/cdn/elements/sliders.ts

@@ -1,74 +1,74 @@
-import { query, queryAll, hasClass, on, off, parent, hasTag, onWeak, rootSizeInPixels } 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 onChangeInput(e: Event) {
-  const input = e.target as HTMLInputElement;
-  requestAnimationFrame(() => input.blur());
-}
-
-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) {
-  onWeak(input, "change", onChangeInput);
-
-  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 = rootSizeInPixels();
-  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();
-}
+import { query, queryAll, hasClass, on, off, parent, hasTag, onWeak, rootSizeInPixels } 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 onChangeInput(e: Event) {
+  const input = e.target as HTMLInputElement;
+  requestAnimationFrame(() => input.blur());
+}
+
+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) {
+  onWeak(input, "change", onChangeInput);
+
+  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 = rootSizeInPixels();
+  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.css

@@ -1,47 +1,47 @@
-.snackbar {
-  position: fixed;
-  inset: auto auto 6rem 50%;
-  inline-size: 80%;
-  block-size: auto;
-  z-index: 200;
-  visibility: hidden;
-  display: flex;
-  box-shadow: var(--elevate2);
-  color: var(--inverse-on-surface);
-  background-color: var(--inverse-surface);
-  padding: 1rem;
-  cursor: pointer;
-  text-align: start;
-  align-items: center;
-  border-radius: 0.25rem;
-  gap: 0.5rem;
-  transition: all var(--speed2);
-  transform: translate(-50%, 1rem);
-  opacity: 0;
-}
-
-.snackbar.top {
-  inset: 6rem auto auto 50%;
-}
-
-.snackbar:is(.active) {
-  visibility: visible;
-  transform: translate(-50%, 0);
-  opacity: 1;
-}
-
-.snackbar:popover-open {
-  visibility: visible;
-  transform: translate(-50%, 0);
-  opacity: 1;
-}
-
-.snackbar > .max {
-  flex: auto;
-}
-
-@media only screen and (min-width: 993px) {
-  .snackbar {
-    inline-size: 40%;
-  }
-}
+.snackbar {
+  position: fixed;
+  inset: auto auto 6rem 50%;
+  inline-size: 80%;
+  block-size: auto;
+  z-index: 200;
+  visibility: hidden;
+  display: flex;
+  box-shadow: var(--elevate2);
+  color: var(--inverse-on-surface);
+  background-color: var(--inverse-surface);
+  padding: 1rem;
+  cursor: pointer;
+  text-align: start;
+  align-items: center;
+  border-radius: 0.25rem;
+  gap: 0.5rem;
+  transition: all var(--speed2);
+  transform: translate(-50%, 1rem);
+  opacity: 0;
+}
+
+.snackbar.top {
+  inset: 6rem auto auto 50%;
+}
+
+.snackbar:is(.active) {
+  visibility: visible;
+  transform: translate(-50%, 0);
+  opacity: 1;
+}
+
+.snackbar:popover-open {
+  visibility: visible;
+  transform: translate(-50%, 0);
+  opacity: 1;
+}
+
+.snackbar > .max {
+  flex: auto;
+}
+
+@media only screen and (min-width: 993px) {
+  .snackbar {
+    inline-size: 40%;
+  }
+}

package/src/cdn/elements/snackbars.ts

@@ -1,27 +1,27 @@
-import { queryAll, addClass, removeClass, blurActiveElement, onWeak } 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");
-  onWeak(snackbar, "click", onClickSnackbar);
-
-  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
-
-  if (milliseconds === -1) return;
-
-  _timeoutSnackbar = setTimeout(() => {
-    removeClass(snackbar, "active");
-  }, milliseconds ?? 6000);
+import { queryAll, addClass, removeClass, blurActiveElement, onWeak } 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");
+  onWeak(snackbar, "click", onClickSnackbar);
+
+  if (_timeoutSnackbar) clearTimeout(_timeoutSnackbar);
+
+  if (milliseconds === -1) return;
+
+  _timeoutSnackbar = setTimeout(() => {
+    removeClass(snackbar, "active");
+  }, milliseconds ?? 6000);
 }

package/src/cdn/elements/tables.css

@@ -1,65 +1,65 @@
-table {
-  inline-size: 100%;
-  border-spacing: 0;
-  font-size: 0.875rem;
-  text-align: start;
-}
-
-.scroll > table,
-table :is(thead, tbody, tfoot, tr, th, td) {
-  background-color: inherit;
-  color: inherit;
-}
-
-:is(th, td) {
-  inline-size: auto;
-  text-align: inherit;
-  padding: 0.5rem;
-  border-radius: 0;
-}
-
-:is(th, td) > * {
-  vertical-align: middle;
-}
-
-table.border > tbody > tr:not(:last-child) > td,
-thead > tr > th {
-  border-block-end: 0.0625rem solid var(--outline);
-}
-
-tfoot > tr > th {
-  border-block-start: 0.0625rem solid var(--outline);
-}
-
-table.stripes > tbody > tr:nth-child(odd) {
-  background-color: var(--active);
-}
-
-table.no-space :is(th, td) {
-  padding: 0;
-}
-
-table.medium-space :is(th, td) {
-  padding: 0.75rem;
-}
-
-table.large-space :is(th, td) {
-  padding: 1rem;
-}
-
-table > .fixed,
-th.fixed {
-  position: sticky;
-  z-index: 1;
-  inset-block-start: 0;
-}
-
-tfoot.fixed,
-tfoot th.fixed {
-  inset-block-end: 0;
-}
-
-:is(td, th).min {
-  inline-size: 0.1%;
-  white-space: nowrap;
-}
+table {
+  inline-size: 100%;
+  border-spacing: 0;
+  font-size: 0.875rem;
+  text-align: start;
+}
+
+.scroll > table,
+table :is(thead, tbody, tfoot, tr, th, td) {
+  background-color: inherit;
+  color: inherit;
+}
+
+:is(th, td) {
+  inline-size: auto;
+  text-align: inherit;
+  padding: 0.5rem;
+  border-radius: 0;
+}
+
+:is(th, td) > * {
+  vertical-align: middle;
+}
+
+table.border > tbody > tr:not(:last-child) > td,
+thead > tr > th {
+  border-block-end: 0.0625rem solid var(--outline);
+}
+
+tfoot > tr > th {
+  border-block-start: 0.0625rem solid var(--outline);
+}
+
+table.stripes > tbody > tr:nth-child(odd) {
+  background-color: var(--active);
+}
+
+table.no-space :is(th, td) {
+  padding: 0;
+}
+
+table.medium-space :is(th, td) {
+  padding: 0.75rem;
+}
+
+table.large-space :is(th, td) {
+  padding: 1rem;
+}
+
+table > .fixed,
+th.fixed {
+  position: sticky;
+  z-index: 1;
+  inset-block-start: 0;
+}
+
+tfoot.fixed,
+tfoot th.fixed {
+  inset-block-end: 0;
+}
+
+:is(td, th).min {
+  inline-size: 0.1%;
+  white-space: nowrap;
+}

package/src/cdn/elements/tabs.css

@@ -1,52 +1,52 @@
-.tabs {
-  display: flex;
-  white-space: nowrap;
-  border-block-end: 0.0625rem solid var(--surface-variant);
-  border-radius: 0;
-}
-
-.tabs:not(.left-align, .right-align, .center-align) {
-  justify-content: space-around;
-}
-
-.tabs > a {
-  display: flex;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--on-surface-variant);
-  padding: 0.5rem 1rem;
-  text-align: center;
-  min-block-size: 3rem;
-  inline-size: 100%;
-  gap: 0.25rem;
-}
-
-.tabs.small > a {
-  min-block-size: 2rem;
-}
-
-.tabs.large > a {
-  min-block-size: 4rem;
-}
-
-.tabs > a.active,
-.tabs > a.active > i {
-  color: var(--primary);
-}
-
-.tabs > a.active::before {
-  content: '';
-  position: absolute;
-  inset: auto 0 0 0;
-  block-size: 0.125rem;
-  background-color: var(--primary);
-}
-
-.tabs.min > a.active::before {
-  margin: 0 auto;
-  max-inline-size: min(100%, 4rem);
-}
-
-.tabs:is(.left-align, .center-align, .right-align) > a {
-  inline-size: auto;
-}
+.tabs {
+  display: flex;
+  white-space: nowrap;
+  border-block-end: 0.0625rem solid var(--surface-variant);
+  border-radius: 0;
+}
+
+.tabs:not(.left-align, .right-align, .center-align) {
+  justify-content: space-around;
+}
+
+.tabs > a {
+  display: flex;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--on-surface-variant);
+  padding: 0.5rem 1rem;
+  text-align: center;
+  min-block-size: 3rem;
+  inline-size: 100%;
+  gap: 0.25rem;
+}
+
+.tabs.small > a {
+  min-block-size: 2rem;
+}
+
+.tabs.large > a {
+  min-block-size: 4rem;
+}
+
+.tabs > a.active,
+.tabs > a.active > i {
+  color: var(--primary);
+}
+
+.tabs > a.active::before {
+  content: '';
+  position: absolute;
+  inset: auto 0 0 0;
+  block-size: 0.125rem;
+  background-color: var(--primary);
+}
+
+.tabs.min > a.active::before {
+  margin: 0 auto;
+  max-inline-size: min(100%, 4rem);
+}
+
+.tabs:is(.left-align, .center-align, .right-align) > a {
+  inline-size: auto;
+}