beercss 3.13.1 → 3.13.2

package/src/cdn/elements/dialogs.css

@@ -1,152 +1,152 @@
-dialog {
-  --_padding: 1.5rem;
-  --_top: calc(var(--_padding) + var(--top));
-  --_bottom: calc(var(--_padding) + var(--bottom));
-  display: block;
-  visibility: hidden;
-  border: none;
-  opacity: 0;
-  position: fixed;
-  box-shadow: var(--elevate2);
-  color: var(--on-surface);
-  background-color: var(--surface-container-high);
-  padding: var(--_padding);
-  z-index: 100;
-  inset: 10% auto auto 50%;
-  min-inline-size: 20rem;
-  max-inline-size: 100%;
-  max-block-size: 80%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  transition: all var(--speed3), 0s background-color;
-  border-radius: 1.75rem;
-  transform: translate(-50%, -4rem);
-  outline: none;
-}
-
-dialog.small {
-  inline-size: 25%;
-  block-size: 25%;
-}
-
-dialog.medium {
-  inline-size: 50%;
-  block-size: 50%;
-}
-
-dialog.large {
-  inline-size: 75%;
-  block-size: 75%;
-}
-
-dialog:is(.active, [open]) {
-  visibility: visible;
-  opacity: 1;
-  transform: translate(-50%, 0);
-}
-
-dialog:popover-open {
-  visibility: visible;
-  opacity: 1;
-  transform: translate(-50%, 0);
-}
-
-dialog:is(.top, .right, .bottom, .left, .max) {
-  --_padding: 1rem;
-}
-
-dialog:is(.top, .bottom) {
-  opacity: 1;
-  block-size: auto;
-  inline-size: 100%;
-  min-inline-size: auto;
-  max-block-size: 100%;
-}
-
-dialog.top {
-  inset: 0 auto auto 0;
-  transform: translateY(-100%);
-  border-radius: 0 0 1rem 1rem;
-  padding-block-start: var(--_top);
-}
-
-dialog.bottom {
-  inset: auto auto 0 0;
-  transform: translateY(100%);
-  border-radius: 1rem 1rem 0 0;
-  padding-block-end: var(--_bottom);
-}
-
-dialog:is(.left, .right) {
-  opacity: 1;
-  inset: 0 auto auto 0;
-  inline-size: auto;
-  block-size: 100%;
-  max-block-size: 100%;
-  background-color: var(--surface);
-  padding-block: var(--_top) var(--_bottom);
-}
-
-[dir=rtl] dialog.right,
-dialog.left {
-  inset: 0 auto auto 0;
-  border-radius: 0 1rem 1rem 0;
-  transform: translateX(-100%);
-}
-
-[dir=rtl] dialog.left,
-dialog.right {
-  inset: 0 0 auto auto;
-  border-radius: 1rem 0 0 1rem;
-  transform: translateX(100%);
-}
-
-dialog.max {
-  inset: 0 auto auto 0;
-  inline-size: 100%;
-  block-size: 100%;
-  max-inline-size: 100%;
-  max-block-size: 100%;
-  transform: translateY(4rem);
-  background-color: var(--surface);
-  border-radius: 0;
-  padding-block: var(--_top) var(--_bottom);
-}
-
-dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
-  transform: translate(0, 0);
-}
-
-dialog:popover-open:is(.left, .right, .top, .bottom, .max) {
-  transform: translate(0, 0);
-}
-
-dialog.small:is(.left, .right) {
-  inline-size: 20rem;
-}
-
-dialog.medium:is(.left, .right) {
-  inline-size: 32rem;
-}
-
-dialog.large:is(.left, .right) {
-  inline-size: 44rem;
-}
-
-dialog.small:is(.top, .bottom) {
-  block-size: 16rem;
-}
-
-dialog.medium:is(.top, .bottom) {
-  block-size: 24rem;
-}
-
-dialog.large:is(.top, .bottom) {
-  block-size: 32rem;
-}
-
-@media (pointer: coarse) {
-  body:has(dialog[open], dialog.active) {
-    overflow: hidden;
-  }
+dialog {
+  --_padding: 1.5rem;
+  --_top: calc(var(--_padding) + var(--top));
+  --_bottom: calc(var(--_padding) + var(--bottom));
+  display: block;
+  visibility: hidden;
+  border: none;
+  opacity: 0;
+  position: fixed;
+  box-shadow: var(--elevate2);
+  color: var(--on-surface);
+  background-color: var(--surface-container-high);
+  padding: var(--_padding);
+  z-index: 100;
+  inset: 10% auto auto 50%;
+  min-inline-size: 20rem;
+  max-inline-size: 100%;
+  max-block-size: 80%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  transition: all var(--speed3), 0s background-color;
+  border-radius: 1.75rem;
+  transform: translate(-50%, -4rem);
+  outline: none;
+}
+
+dialog.small {
+  inline-size: 25%;
+  block-size: 25%;
+}
+
+dialog.medium {
+  inline-size: 50%;
+  block-size: 50%;
+}
+
+dialog.large {
+  inline-size: 75%;
+  block-size: 75%;
+}
+
+dialog:is(.active, [open]) {
+  visibility: visible;
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+dialog:popover-open {
+  visibility: visible;
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+dialog:is(.top, .right, .bottom, .left, .max) {
+  --_padding: 1rem;
+}
+
+dialog:is(.top, .bottom) {
+  opacity: 1;
+  block-size: auto;
+  inline-size: 100%;
+  min-inline-size: auto;
+  max-block-size: 100%;
+}
+
+dialog.top {
+  inset: 0 auto auto 0;
+  transform: translateY(-100%);
+  border-radius: 0 0 1rem 1rem;
+  padding-block-start: var(--_top);
+}
+
+dialog.bottom {
+  inset: auto auto 0 0;
+  transform: translateY(100%);
+  border-radius: 1rem 1rem 0 0;
+  padding-block-end: var(--_bottom);
+}
+
+dialog:is(.left, .right) {
+  opacity: 1;
+  inset: 0 auto auto 0;
+  inline-size: auto;
+  block-size: 100%;
+  max-block-size: 100%;
+  background-color: var(--surface);
+  padding-block: var(--_top) var(--_bottom);
+}
+
+[dir=rtl] dialog.right,
+dialog.left {
+  inset: 0 auto auto 0;
+  border-radius: 0 1rem 1rem 0;
+  transform: translateX(-100%);
+}
+
+[dir=rtl] dialog.left,
+dialog.right {
+  inset: 0 0 auto auto;
+  border-radius: 1rem 0 0 1rem;
+  transform: translateX(100%);
+}
+
+dialog.max {
+  inset: 0 auto auto 0;
+  inline-size: 100%;
+  block-size: 100%;
+  max-inline-size: 100%;
+  max-block-size: 100%;
+  transform: translateY(4rem);
+  background-color: var(--surface);
+  border-radius: 0;
+  padding-block: var(--_top) var(--_bottom);
+}
+
+dialog:is(.active, [open]):is(.left, .right, .top, .bottom, .max) {
+  transform: translate(0, 0);
+}
+
+dialog:popover-open:is(.left, .right, .top, .bottom, .max) {
+  transform: translate(0, 0);
+}
+
+dialog.small:is(.left, .right) {
+  inline-size: 20rem;
+}
+
+dialog.medium:is(.left, .right) {
+  inline-size: 32rem;
+}
+
+dialog.large:is(.left, .right) {
+  inline-size: 44rem;
+}
+
+dialog.small:is(.top, .bottom) {
+  block-size: 16rem;
+}
+
+dialog.medium:is(.top, .bottom) {
+  block-size: 24rem;
+}
+
+dialog.large:is(.top, .bottom) {
+  block-size: 32rem;
+}
+
+@media (pointer: coarse) {
+  body:has(dialog[open], dialog.active) {
+    overflow: hidden;
+  }
 }

package/src/cdn/elements/dialogs.ts

@@ -1,69 +1,69 @@
-import { addClass, next, prev, hasTag, insertBefore, wait, create,  hasClass, removeClass, on, off, queryAllDataUi, blurActiveElement, query, onWeak } from "../utils";
-
-const _dialogs: Array<HTMLDialogElement> = [];
-
-function onKeydownDialog(e: KeyboardEvent) {
-  if (e.key === "Escape") {
-    const dialog = e.currentTarget as HTMLDialogElement;
-    void updateDialog(dialog, dialog);
-  }
-}
-
-function focusOnDialogOrElement(dialog: HTMLDialogElement) {
-  const element = (query("[autofocus]", dialog) ?? dialog) as HTMLElement;
-  element.focus();
-}
-
-function closeDialog(dialog: HTMLDialogElement, overlay: Element) {
-  removeClass(queryAllDataUi(dialog.id), "active");
-  removeClass(dialog, "active");
-  removeClass(overlay, "active");
-
-  dialog.close();
-  _dialogs.pop();
-
-  const previousDialog = _dialogs[_dialogs.length - 1];
-  if (previousDialog) previousDialog.focus();
-}
-
-async function openDialog(dialog: HTMLDialogElement, overlay: Element, isModal: boolean, from: Element) {
-  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();
-
-  await wait(90);
-
-  if (!isModal) on(dialog, "keydown", onKeydownDialog, false);
-  _dialogs.push(dialog);
-  focusOnDialogOrElement(dialog);
-}
-
-function onClickOverlay(e: Event) {
-  const overlay = e.currentTarget as Element;
-  const dialog = next(overlay) as HTMLDialogElement;
-  if (hasTag(dialog, "dialog")) closeDialog(dialog, overlay);
-}
-
-export async function updateDialog(from: Element, dialog: HTMLDialogElement): Promise<void> {
-  blurActiveElement();
-
-  let overlay = prev(dialog) as HTMLElement;
-  const isActive = hasClass(dialog, "active") || dialog.open;
-  const isModal = hasClass(dialog, "modal");
-
-  if (!isModal) off(dialog, "keydown", onKeydownDialog, false);
-
-  if (!hasClass(overlay, "overlay")) {
-    overlay = create({ class: "overlay" });
-    insertBefore(overlay, dialog);
-    await wait(90);
-  }
-
-  if (!isModal) onWeak(overlay, "click", onClickOverlay, false);
-
-  if (isActive) closeDialog(dialog, overlay);
-  else void openDialog(dialog, overlay, isModal, from);
-}
+import { addClass, next, prev, hasTag, insertBefore, wait, create,  hasClass, removeClass, on, off, queryAllDataUi, blurActiveElement, query, onWeak } from "../utils";
+
+const _dialogs: Array<HTMLDialogElement> = [];
+
+function onKeydownDialog(e: KeyboardEvent) {
+  if (e.key === "Escape") {
+    const dialog = e.currentTarget as HTMLDialogElement;
+    void updateDialog(dialog, dialog);
+  }
+}
+
+function focusOnDialogOrElement(dialog: HTMLDialogElement) {
+  const element = (query("[autofocus]", dialog) ?? dialog) as HTMLElement;
+  element.focus();
+}
+
+function closeDialog(dialog: HTMLDialogElement, overlay: Element) {
+  removeClass(queryAllDataUi(dialog.id), "active");
+  removeClass(dialog, "active");
+  removeClass(overlay, "active");
+
+  dialog.close();
+  _dialogs.pop();
+
+  const previousDialog = _dialogs[_dialogs.length - 1];
+  if (previousDialog) previousDialog.focus();
+}
+
+async function openDialog(dialog: HTMLDialogElement, overlay: Element, isModal: boolean, from: Element) {
+  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();
+
+  await wait(90);
+
+  if (!isModal) on(dialog, "keydown", onKeydownDialog, false);
+  _dialogs.push(dialog);
+  focusOnDialogOrElement(dialog);
+}
+
+function onClickOverlay(e: Event) {
+  const overlay = e.currentTarget as Element;
+  const dialog = next(overlay) as HTMLDialogElement;
+  if (hasTag(dialog, "dialog")) closeDialog(dialog, overlay);
+}
+
+export async function updateDialog(from: Element, dialog: HTMLDialogElement): Promise<void> {
+  blurActiveElement();
+
+  let overlay = prev(dialog) as HTMLElement;
+  const isActive = hasClass(dialog, "active") || dialog.open;
+  const isModal = hasClass(dialog, "modal");
+
+  if (!isModal) off(dialog, "keydown", onKeydownDialog, false);
+
+  if (!hasClass(overlay, "overlay")) {
+    overlay = create({ class: "overlay" });
+    insertBefore(overlay, dialog);
+    await wait(90);
+  }
+
+  if (!isModal) onWeak(overlay, "click", onClickOverlay, false);
+
+  if (isActive) closeDialog(dialog, overlay);
+  else void openDialog(dialog, overlay, isModal, from);
+}

package/src/cdn/elements/dividers.css

@@ -1,49 +1,49 @@
-hr,
-[class*=divider] {
-  all: unset;
-  inline-size: -webkit-fill-available;
-  min-block-size: auto;
-  block-size: 0.0625rem;
-  background-color: var(--outline-variant);
-  display: block;
-}
-
-hr + *,
-[class*=divider] + * {
-  margin: 0 !important;
-}
-
-hr.medium,
-.medium-divider {
-  margin: 1rem 0 !important;
-}
-
-hr.large,
-.large-divider {
-  margin: 1.5rem 0 !important;
-}
-
-hr.small,
-.small-divider {
-  margin: 0.5rem 0 !important;
-}
-
-li:has(> hr),
-li:has(> .divider) {
-  padding: 0 !important;
-  align-self: normal !important;
-  min-inline-size: auto !important;
-  min-block-size: auto !important;
-  inline-size: -webkit-fill-available;
-}
-
-hr.vertical,
-.divider.vertical,
-li:has(> hr.vertical),
-li:has(> .divider.vertical) {
-  padding: 0 !important;
-  align-self: center !important;
-  min-inline-size: auto;
-  min-block-size: 1.5rem;
-  inline-size: 0.0625rem;
+hr,
+[class*=divider] {
+  all: unset;
+  inline-size: -webkit-fill-available;
+  min-block-size: auto;
+  block-size: 0.0625rem;
+  background-color: var(--outline-variant);
+  display: block;
+}
+
+hr + *,
+[class*=divider] + * {
+  margin: 0 !important;
+}
+
+hr.medium,
+.medium-divider {
+  margin: 1rem 0 !important;
+}
+
+hr.large,
+.large-divider {
+  margin: 1.5rem 0 !important;
+}
+
+hr.small,
+.small-divider {
+  margin: 0.5rem 0 !important;
+}
+
+li:has(> hr),
+li:has(> .divider) {
+  padding: 0 !important;
+  align-self: normal !important;
+  min-inline-size: auto !important;
+  min-block-size: auto !important;
+  inline-size: -webkit-fill-available;
+}
+
+hr.vertical,
+.divider.vertical,
+li:has(> hr.vertical),
+li:has(> .divider.vertical) {
+  padding: 0 !important;
+  align-self: center !important;
+  min-inline-size: auto;
+  min-block-size: 1.5rem;
+  inline-size: 0.0625rem;
 }

package/src/cdn/elements/expansions.css

@@ -1,10 +1,10 @@
-summary,
-summary:focus {
-  list-style-type: none;
-  cursor: pointer;
-  outline: none;
-}
-
-summary::-webkit-details-marker {
-  display: none;
-}
+summary,
+summary:focus {
+  list-style-type: none;
+  cursor: pointer;
+  outline: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}