beercss 3.13.1 → 3.13.2

package/src/cdn/elements/overlays.css

@@ -1,32 +1,32 @@
-.overlay,
-dialog::backdrop {
-  display: block !important;
-  opacity: 0;
-  visibility: hidden;
-  position: fixed;
-  inset: 0;
-  color: var(--on-surface);
-  background-color: var(--overlay);
-  z-index: 100;
-  transition: all var(--speed3), 0s background-color;
-  border-radius: 0;
-}
-
-.overlay.active {
-  opacity: 1;
-  visibility: visible;
-}
-
-dialog:popover-open::backdrop {
-  opacity: 1;
-  visibility: visible;
-}
-
-.overlay + dialog::backdrop,
-.snackbar::backdrop {
-  display: none;
-}
-
-[popover] {
-  border: 0;
+.overlay,
+dialog::backdrop {
+  display: block !important;
+  opacity: 0;
+  visibility: hidden;
+  position: fixed;
+  inset: 0;
+  color: var(--on-surface);
+  background-color: var(--overlay);
+  z-index: 100;
+  transition: all var(--speed3), 0s background-color;
+  border-radius: 0;
+}
+
+.overlay.active {
+  opacity: 1;
+  visibility: visible;
+}
+
+dialog:popover-open::backdrop {
+  opacity: 1;
+  visibility: visible;
+}
+
+.overlay + dialog::backdrop,
+.snackbar::backdrop {
+  display: none;
+}
+
+[popover] {
+  border: 0;
 }

package/src/cdn/elements/pages.css

@@ -1,41 +1,41 @@
-.page {
-  --_transform: translate(0, 0);
-  opacity: 0;
-  position: absolute;
-  display: none;
-}
-
-.page.active {
-  opacity: 1;
-  position: inherit;
-  display: inherit;
-  animation: var(--speed4) to-page ease;
-}
-
-.page.active.top {
-  --_transform: translate(0, -4rem);
-}
-
-.page.active.bottom {
-  --_transform: translate(0, 4rem);
-}
-
-.page.active.left {
-  --_transform: translate(-4rem, 0);
-}
-
-.page.active.right {
-  --_transform: translate(4rem, 0);
-}
-
-@keyframes to-page {
-  from {
-    opacity: 0;
-    transform: var(--_transform);
-  }
-
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
-}
+.page {
+  --_transform: translate(0, 0);
+  opacity: 0;
+  position: absolute;
+  display: none;
+}
+
+.page.active {
+  opacity: 1;
+  position: inherit;
+  display: inherit;
+  animation: var(--speed4) to-page ease;
+}
+
+.page.active.top {
+  --_transform: translate(0, -4rem);
+}
+
+.page.active.bottom {
+  --_transform: translate(0, 4rem);
+}
+
+.page.active.left {
+  --_transform: translate(-4rem, 0);
+}
+
+.page.active.right {
+  --_transform: translate(4rem, 0);
+}
+
+@keyframes to-page {
+  from {
+    opacity: 0;
+    transform: var(--_transform);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+}

package/src/cdn/elements/pages.ts

@@ -1,7 +1,7 @@
-import { addClass, parent, removeClass, queryAll } from "../utils";
-
-export function updatePage(page: Element) {
-  const container = parent(page);
-  if (container) removeClass(queryAll(":scope > .page", container), "active");
-  addClass(page, "active");
+import { addClass, parent, removeClass, queryAll } from "../utils";
+
+export function updatePage(page: Element) {
+  const container = parent(page);
+  if (container) removeClass(queryAll(":scope > .page", container), "active");
+  addClass(page, "active");
 }

package/src/cdn/elements/progress.css

@@ -1,208 +1,208 @@
-progress {
-  --_light: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==);
-  --_dark: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==);
-  --_size: 0.25rem;
-  position: relative;
-  inline-size: 100%;
-  block-size: var(--_size);
-  color: var(--primary);
-  background: var(--_light);
-  border-radius: 1rem;
-  flex: none;
-  border: none;
-  overflow: hidden;
-  writing-mode: horizontal-tb;
-  direction: ltr;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.dark progress {
-  background: var(--_dark);
-}
-
-progress.small {
-  --_size: 0.25rem;
-}
-
-progress.medium {
-  --_size: 0.35rem;
-}
-
-progress.large {
-  --_size: 0.45rem;
-}
-
-progress.indeterminate {
-  --_value: 100;
-  animation: 3.2s to-indeterminate ease infinite;
-}
-
-progress:not(.circle, [value])::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  clip-path: none;
-  background: currentcolor;
-  animation: 3.2s to-linear ease infinite;
-}
-
-progress:not(.circle, [value])::-moz-progress-bar {
-  animation: 3.2s to-linear ease infinite;
-}
-
-progress:not(.circle, [value])::-webkit-progress-value {
-  animation: 3.2s to-linear ease infinite;
-}
-
-progress::-webkit-progress-bar {
-  background: none;
-}
-
-progress::-webkit-progress-value {
-  background: currentColor;
-}
-
-progress::-moz-progress-bar {
-  background: currentColor;
-}
-
-progress.wavy {
-  block-size: calc(var(--_size) * 2);
-  background: none;
-  background-image: var(--_light);
-  background-repeat: repeat-x;
-  background-position: 0 50%;
-  background-size: auto calc(var(--_size) / 2);
-}
-
-.dark progress.wavy {
-  background-image: var(--_dark);
-}
-
-progress.wavy::-webkit-progress-value,
-progress.wavy:not(.circle, [value])::after {
-  mask-image: url(../shapes/wavy.svg);
-  mask-position: 0 50%;
-  mask-repeat: repeat-x;
-  mask-size: auto 100%;
-
-}
-
-progress.wavy::-moz-progress-bar {
-  mask-image: url(../shapes/wavy.svg);
-  mask-position: 0 50%;
-  mask-repeat: repeat-x;
-  mask-size: auto 100%;
-}
-
-progress.circle {
-  --_value: attr(value type(<number>), 50);
-  inline-size: 2.5rem;
-  block-size: 2.5rem;
-  background: conic-gradient(currentColor calc(var(--_value) * 1%), var(--active) 0%);
-  border-radius: 50%;
-  mask-image: radial-gradient(circle at center, transparent 57%, currentColor 60%);
-}
-
-progress.circle::-webkit-progress-value {
-  background: none;
-}
-
-progress.circle::-moz-progress-bar {
-  background: none;
-}
-
-progress.circle.wavy {
-  background: conic-gradient(currentColor calc(var(--_value) * 1%), var(--active) 0);
-  mask-repeat: no-repeat;
-  mask-position: center;
-  mask-size: contain;
-  mask-image: url(../shapes/wavy-circle.svg);
-}
-
-progress.circle.small {
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
-}
-
-progress.circle.large {
-  inline-size: 3.5rem;
-  block-size: 3.5rem;
-}
-
-progress.circle:not([value]),
-progress.circle.indeterminate {
-  --_value: 50;
-  animation: to-rotate 1s infinite linear;
-}
-
-:is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
-  flex: auto;
-}
-
-progress.max {
-  display: unset;
-  position: absolute;
-  inline-size: 100% !important;
-  block-size: 100% !important;
-  color: currentColor;
-  background: none;
-  inset: 0;
-  border-radius: inherit;
-  animation: none;
-  writing-mode: horizontal-tb;
-  opacity: 0.33;
-}
-
-progress.max[class*='-text'] {
-  opacity: 1;
-}
-
-progress.max + * {
-  margin-block-start: 0;
-}
-
-:is(.button, button, .chip) > progress.circle {
-  color: inherit;
-}
-
-@keyframes to-linear {
-  0% {
-    margin: 0 0 0 -100%;
-  }
-
-  50% {
-    margin: 0 0 0 0;
-  }
-
-  100% {
-    margin: 0 0 0 100%;
-  }
-}
-
-@keyframes to-indeterminate {
-  0% {
-    padding: 0 100% 0 0;
-  }
-
-  50% {
-    padding: 0 0 0 0;
-  }
-
-  100% {
-    padding: 0 0 0 100%;
-  }
-}
-
-@keyframes to-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
+progress {
+  --_light: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWJiYGAQBgAAAP//ZyYa+wAAAAZJREFUAwAAIgAWeX9MsQAAAABJRU5ErkJggg==);
+  --_dark: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4AWL6//+/FAAAAP//qSv5QwAAAAZJREFUAwAJIAMaJWjIvQAAAABJRU5ErkJggg==);
+  --_size: 0.25rem;
+  position: relative;
+  inline-size: 100%;
+  block-size: var(--_size);
+  color: var(--primary);
+  background: var(--_light);
+  border-radius: 1rem;
+  flex: none;
+  border: none;
+  overflow: hidden;
+  writing-mode: horizontal-tb;
+  direction: ltr;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.dark progress {
+  background: var(--_dark);
+}
+
+progress.small {
+  --_size: 0.25rem;
+}
+
+progress.medium {
+  --_size: 0.35rem;
+}
+
+progress.large {
+  --_size: 0.45rem;
+}
+
+progress.indeterminate {
+  --_value: 100;
+  animation: 3.2s to-indeterminate ease infinite;
+}
+
+progress:not(.circle, [value])::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  clip-path: none;
+  background: currentcolor;
+  animation: 3.2s to-linear ease infinite;
+}
+
+progress:not(.circle, [value])::-moz-progress-bar {
+  animation: 3.2s to-linear ease infinite;
+}
+
+progress:not(.circle, [value])::-webkit-progress-value {
+  animation: 3.2s to-linear ease infinite;
+}
+
+progress::-webkit-progress-bar {
+  background: none;
+}
+
+progress::-webkit-progress-value {
+  background: currentColor;
+}
+
+progress::-moz-progress-bar {
+  background: currentColor;
+}
+
+progress.wavy {
+  block-size: calc(var(--_size) * 2);
+  background: none;
+  background-image: var(--_light);
+  background-repeat: repeat-x;
+  background-position: 0 50%;
+  background-size: auto calc(var(--_size) / 2);
+}
+
+.dark progress.wavy {
+  background-image: var(--_dark);
+}
+
+progress.wavy::-webkit-progress-value,
+progress.wavy:not(.circle, [value])::after {
+  mask-image: url(../shapes/wavy.svg);
+  mask-position: 0 50%;
+  mask-repeat: repeat-x;
+  mask-size: auto 100%;
+
+}
+
+progress.wavy::-moz-progress-bar {
+  mask-image: url(../shapes/wavy.svg);
+  mask-position: 0 50%;
+  mask-repeat: repeat-x;
+  mask-size: auto 100%;
+}
+
+progress.circle {
+  --_value: attr(value type(<number>), 50);
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  background: conic-gradient(currentColor calc(var(--_value) * 1%), var(--active) 0%);
+  border-radius: 50%;
+  mask-image: radial-gradient(circle at center, transparent 57%, currentColor 60%);
+}
+
+progress.circle::-webkit-progress-value {
+  background: none;
+}
+
+progress.circle::-moz-progress-bar {
+  background: none;
+}
+
+progress.circle.wavy {
+  background: conic-gradient(currentColor calc(var(--_value) * 1%), var(--active) 0);
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+  mask-image: url(../shapes/wavy-circle.svg);
+}
+
+progress.circle.small {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+}
+
+progress.circle.large {
+  inline-size: 3.5rem;
+  block-size: 3.5rem;
+}
+
+progress.circle:not([value]),
+progress.circle.indeterminate {
+  --_value: 50;
+  animation: to-rotate 1s infinite linear;
+}
+
+:is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
+  flex: auto;
+}
+
+progress.max {
+  display: unset;
+  position: absolute;
+  inline-size: 100% !important;
+  block-size: 100% !important;
+  color: currentColor;
+  background: none;
+  inset: 0;
+  border-radius: inherit;
+  animation: none;
+  writing-mode: horizontal-tb;
+  opacity: 0.33;
+}
+
+progress.max[class*='-text'] {
+  opacity: 1;
+}
+
+progress.max + * {
+  margin-block-start: 0;
+}
+
+:is(.button, button, .chip) > progress.circle {
+  color: inherit;
+}
+
+@keyframes to-linear {
+  0% {
+    margin: 0 0 0 -100%;
+  }
+
+  50% {
+    margin: 0 0 0 0;
+  }
+
+  100% {
+    margin: 0 0 0 100%;
+  }
+}
+
+@keyframes to-indeterminate {
+  0% {
+    padding: 0 100% 0 0;
+  }
+
+  50% {
+    padding: 0 0 0 0;
+  }
+
+  100% {
+    padding: 0 0 0 100%;
+  }
+}
+
+@keyframes to-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
 }

package/src/cdn/elements/progress.ts

@@ -1,34 +1,34 @@
-import { queryAll, hasTag, off, on, isMac, isIOS, isChrome, hasClass } from "../utils";
-
-
-function onInputDocument(e: Event) {
-  const progress = e.target as HTMLProgressElement;
-  
-  if (hasTag(progress, "progress")) {
-    updateProgress(progress);
-  } else {
-    updateAllProgress();
-  }
-}
-
-function updateProgress(progress: HTMLProgressElement) {
-  if (!progress.hasAttribute("value") && !progress.hasAttribute("max")) {
-    const value = hasClass(progress, "circle") ? "50" : "100";
-    progress.style.setProperty("--_value", value);
-    progress.setAttribute("value", value);
-    progress.setAttribute("max", "100");
-    progress.classList.add("indeterminate");
-  } else {
-    progress.style.setProperty("--_value", String(progress.value));
-  }
-}
-
-export function updateAllProgress() {
-  if (isChrome && !isMac && !isIOS) return;
-
-  const body = document.body;
-  const progresses = queryAll("progress") as NodeListOf<HTMLProgressElement>;
-  if (!progresses.length) off(body, "input", onInputDocument, false);
-  else on(body, "input", onInputDocument, false);
-  for (let i = 0; i < progresses.length; i++) updateProgress(progresses[i]);
-}
+import { queryAll, hasTag, off, on, isMac, isIOS, isChrome, hasClass } from "../utils";
+
+
+function onInputDocument(e: Event) {
+  const progress = e.target as HTMLProgressElement;
+  
+  if (hasTag(progress, "progress")) {
+    updateProgress(progress);
+  } else {
+    updateAllProgress();
+  }
+}
+
+function updateProgress(progress: HTMLProgressElement) {
+  if (!progress.hasAttribute("value") && !progress.hasAttribute("max")) {
+    const value = hasClass(progress, "circle") ? "50" : "100";
+    progress.style.setProperty("--_value", value);
+    progress.setAttribute("value", value);
+    progress.setAttribute("max", "100");
+    progress.classList.add("indeterminate");
+  } else {
+    progress.style.setProperty("--_value", String(progress.value));
+  }
+}
+
+export function updateAllProgress() {
+  if (isChrome && !isMac && !isIOS) return;
+
+  const body = document.body;
+  const progresses = queryAll("progress") as NodeListOf<HTMLProgressElement>;
+  if (!progresses.length) off(body, "input", onInputDocument, false);
+  else on(body, "input", onInputDocument, false);
+  for (let i = 0; i < progresses.length; i++) updateProgress(progresses[i]);
+}