beercss 3.13.2 → 4.0.0

package/src/cdn/elements/fields.ts

@@ -1,166 +1,166 @@
-import { query, next, prev, hasType, parent, queryAll, onWeak, isChrome, isMac, isIOS, on, hasClass, rootSizeInPixels } from "../utils";
-
-function updatePlaceholder(element: HTMLInputElement | HTMLTextAreaElement) {
-  if (!element.placeholder) element.placeholder = " ";
-}
-
-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 onPasswordIconClick(e: Event) {
-  const icon = e.currentTarget as HTMLElement;
-  const input = query("input", parent(icon)) as HTMLInputElement;
-  if (input && icon.textContent?.includes("visibility")) input.type = input.type === "password" ? "text" : "password";
-}
-
-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++) {
-    onWeak(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++) {
-    onWeak(inputs[i], "focus", onFocusInput);
-    onWeak(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++) {
-    onWeak(selects[i], "focus", onFocusInput);
-    onWeak(selects[i], "blur", onBlurInput);
-  }
-}
-
-function updateAllFiles() {
-  const files = queryAll(".field > input[type=file]") as NodeListOf<HTMLInputElement>;
-  for (let i=0; i<files.length; i++) {
-    onWeak(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++) {
-    onWeak(colors[i], "change", onChangeColor);
-    updateColor(colors[i]);
-  }
-}
-
-function updateAllTextareas() {
-  const textareas = queryAll(".field > textarea") as NodeListOf<HTMLTextAreaElement>;
-  for (let i=0; i<textareas.length; i++) {
-    onWeak(textareas[i], "focus", onFocusInput);
-    onWeak(textareas[i], "blur", onBlurInput);
-
-    if (isChrome && !isMac && !isIOS) continue;
-
-    onWeak(textareas[i], "input", onInputTextarea);
-    updateTextarea(textareas[i]);
-  }
-}
-
-function updateAllPasswordIcons() {
-  const icons = queryAll("input[type=password] ~ :is(i, a)");
-  for (let i=0; i<icons.length; i++) onWeak(icons[i], "click", onPasswordIconClick);
-}
-
-function updateInput(input: HTMLInputElement) {
-  if (hasType(input, "number") && !input.value) input.value = "";
-  updatePlaceholder(input);
-}
-
-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;
-  onWeak(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;
-  onWeak(nextInput, "keydown", onKeydownColor, false);
-  updateInput(nextInput);
-}
-
-function updateTextarea(textarea: HTMLTextAreaElement) {
-  updatePlaceholder(textarea);
-
-  if (textarea.hasAttribute("rows")) return;
-
-  const rootSize = rootSizeInPixels();
-  textarea.style.blockSize = "auto";
-  textarea.style.blockSize = `${textarea.scrollHeight - rootSize}px`;
-}
-
-export function updateAllFields() {
-  updateAllLabels();
-  updateAllInputs();
-  updateAllSelects();
-  updateAllFiles();
-  updateAllColors();
-  updateAllTextareas();
-  updateAllPasswordIcons();
+import { query, next, prev, hasType, parent, queryAll, onWeak, isChrome, isMac, isIOS, on, hasClass, rootSizeInPixels } from "../utils";
+
+function updatePlaceholder(element: HTMLInputElement | HTMLTextAreaElement) {
+  if (!element.placeholder) element.placeholder = " ";
+}
+
+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 onPasswordIconClick(e: Event) {
+  const icon = e.currentTarget as HTMLElement;
+  const input = query("input", parent(icon)) as HTMLInputElement;
+  if (input && icon.textContent?.includes("visibility")) input.type = input.type === "password" ? "text" : "password";
+}
+
+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++) {
+    onWeak(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++) {
+    onWeak(inputs[i], "focus", onFocusInput);
+    onWeak(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++) {
+    onWeak(selects[i], "focus", onFocusInput);
+    onWeak(selects[i], "blur", onBlurInput);
+  }
+}
+
+function updateAllFiles() {
+  const files = queryAll(".field > input[type=file]") as NodeListOf<HTMLInputElement>;
+  for (let i=0; i<files.length; i++) {
+    onWeak(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++) {
+    onWeak(colors[i], "change", onChangeColor);
+    updateColor(colors[i]);
+  }
+}
+
+function updateAllTextareas() {
+  const textareas = queryAll(".field > textarea") as NodeListOf<HTMLTextAreaElement>;
+  for (let i=0; i<textareas.length; i++) {
+    onWeak(textareas[i], "focus", onFocusInput);
+    onWeak(textareas[i], "blur", onBlurInput);
+
+    if (isChrome && !isMac && !isIOS) continue;
+
+    onWeak(textareas[i], "input", onInputTextarea);
+    updateTextarea(textareas[i]);
+  }
+}
+
+function updateAllPasswordIcons() {
+  const icons = queryAll("input[type=password] ~ :is(i, a)");
+  for (let i=0; i<icons.length; i++) onWeak(icons[i], "click", onPasswordIconClick);
+}
+
+function updateInput(input: HTMLInputElement) {
+  if (hasType(input, "number") && !input.value) input.value = "";
+  updatePlaceholder(input);
+}
+
+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;
+  onWeak(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;
+  onWeak(nextInput, "keydown", onKeydownColor, false);
+  updateInput(nextInput);
+}
+
+function updateTextarea(textarea: HTMLTextAreaElement) {
+  updatePlaceholder(textarea);
+
+  if (textarea.hasAttribute("rows")) return;
+
+  const rootSize = rootSizeInPixels();
+  textarea.style.blockSize = "auto";
+  textarea.style.blockSize = `${textarea.scrollHeight - rootSize}px`;
+}
+
+export function updateAllFields() {
+  updateAllLabels();
+  updateAllInputs();
+  updateAllSelects();
+  updateAllFiles();
+  updateAllColors();
+  updateAllTextareas();
+  updateAllPasswordIcons();
 }

package/src/cdn/elements/grids.css

@@ -1,171 +1,171 @@
-.grid {
-  --_gap: 1rem;
-  display: grid;
-  grid-template-columns: repeat(12, 1fr);
-  gap: var(--_gap);
-  block-size: auto;
-}
-
-.grid.no-space {
-  --_gap: 0rem;
-}
-
-.grid.medium-space {
-  --_gap: 1.5rem;
-}
-
-.grid.large-space {
-  --_gap: 2rem;
-}
-
-.grid > * {
-  margin: 0;
-}
-
-.s1 {
-  grid-area: auto/span 1;
-}
-
-.s2 {
-  grid-area: auto/span 2;
-}
-
-.s3 {
-  grid-area: auto/span 3;
-}
-
-.s4 {
-  grid-area: auto/span 4;
-}
-
-.s5 {
-  grid-area: auto/span 5;
-}
-
-.s6 {
-  grid-area: auto/span 6;
-}
-
-.s7 {
-  grid-area: auto/span 7;
-}
-
-.s8 {
-  grid-area: auto/span 8;
-}
-
-.s9 {
-  grid-area: auto/span 9;
-}
-
-.s10 {
-  grid-area: auto/span 10;
-}
-
-.s11 {
-  grid-area: auto/span 11;
-}
-
-.s12 {
-  grid-area: auto/span 12;
-}
-
-@media only screen and (min-width: 601px) {
-  .m1 {
-    grid-area: auto/span 1;
-  }
-
-  .m2 {
-    grid-area: auto/span 2;
-  }
-
-  .m3 {
-    grid-area: auto/span 3;
-  }
-
-  .m4 {
-    grid-area: auto/span 4;
-  }
-
-  .m5 {
-    grid-area: auto/span 5;
-  }
-
-  .m6 {
-    grid-area: auto/span 6;
-  }
-
-  .m7 {
-    grid-area: auto/span 7;
-  }
-
-  .m8 {
-    grid-area: auto/span 8;
-  }
-
-  .m9 {
-    grid-area: auto/span 9;
-  }
-
-  .m10 {
-    grid-area: auto/span 10;
-  }
-
-  .m11 {
-    grid-area: auto/span 11;
-  }
-
-  .m12 {
-    grid-area: auto/span 12;
-  }
-}
-
-@media only screen and (min-width: 993px) {
-  .l1 {
-    grid-area: auto/span 1;
-  }
-
-  .l2 {
-    grid-area: auto/span 2;
-  }
-
-  .l3 {
-    grid-area: auto/span 3;
-  }
-
-  .l4 {
-    grid-area: auto/span 4;
-  }
-
-  .l5 {
-    grid-area: auto/span 5;
-  }
-
-  .l6 {
-    grid-area: auto/span 6;
-  }
-
-  .l7 {
-    grid-area: auto/span 7;
-  }
-
-  .l8 {
-    grid-area: auto/span 8;
-  }
-
-  .l9 {
-    grid-area: auto/span 9;
-  }
-
-  .l10 {
-    grid-area: auto/span 10;
-  }
-
-  .l11 {
-    grid-area: auto/span 11;
-  }
-
-  .l12 {
-    grid-area: auto/span 12;
-  }
-}
+.grid {
+  --_gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: var(--_gap);
+  block-size: auto;
+}
+
+.grid.no-space {
+  --_gap: 0rem;
+}
+
+.grid.medium-space {
+  --_gap: 1.5rem;
+}
+
+.grid.large-space {
+  --_gap: 2rem;
+}
+
+.grid > * {
+  margin: 0;
+}
+
+.s1 {
+  grid-area: auto/span 1;
+}
+
+.s2 {
+  grid-area: auto/span 2;
+}
+
+.s3 {
+  grid-area: auto/span 3;
+}
+
+.s4 {
+  grid-area: auto/span 4;
+}
+
+.s5 {
+  grid-area: auto/span 5;
+}
+
+.s6 {
+  grid-area: auto/span 6;
+}
+
+.s7 {
+  grid-area: auto/span 7;
+}
+
+.s8 {
+  grid-area: auto/span 8;
+}
+
+.s9 {
+  grid-area: auto/span 9;
+}
+
+.s10 {
+  grid-area: auto/span 10;
+}
+
+.s11 {
+  grid-area: auto/span 11;
+}
+
+.s12 {
+  grid-area: auto/span 12;
+}
+
+@media only screen and (min-width: 601px) {
+  .m1 {
+    grid-area: auto/span 1;
+  }
+
+  .m2 {
+    grid-area: auto/span 2;
+  }
+
+  .m3 {
+    grid-area: auto/span 3;
+  }
+
+  .m4 {
+    grid-area: auto/span 4;
+  }
+
+  .m5 {
+    grid-area: auto/span 5;
+  }
+
+  .m6 {
+    grid-area: auto/span 6;
+  }
+
+  .m7 {
+    grid-area: auto/span 7;
+  }
+
+  .m8 {
+    grid-area: auto/span 8;
+  }
+
+  .m9 {
+    grid-area: auto/span 9;
+  }
+
+  .m10 {
+    grid-area: auto/span 10;
+  }
+
+  .m11 {
+    grid-area: auto/span 11;
+  }
+
+  .m12 {
+    grid-area: auto/span 12;
+  }
+}
+
+@media only screen and (min-width: 993px) {
+  .l1 {
+    grid-area: auto/span 1;
+  }
+
+  .l2 {
+    grid-area: auto/span 2;
+  }
+
+  .l3 {
+    grid-area: auto/span 3;
+  }
+
+  .l4 {
+    grid-area: auto/span 4;
+  }
+
+  .l5 {
+    grid-area: auto/span 5;
+  }
+
+  .l6 {
+    grid-area: auto/span 6;
+  }
+
+  .l7 {
+    grid-area: auto/span 7;
+  }
+
+  .l8 {
+    grid-area: auto/span 8;
+  }
+
+  .l9 {
+    grid-area: auto/span 9;
+  }
+
+  .l10 {
+    grid-area: auto/span 10;
+  }
+
+  .l11 {
+    grid-area: auto/span 11;
+  }
+
+  .l12 {
+    grid-area: auto/span 12;
+  }
+}