beercss 3.12.13 → 3.13.0

package/src/cdn/elements/dialogs.ts

@@ -1,4 +1,4 @@
-import { addClass, next, prev, hasTag, insertBefore, wait, create,  hasClass, removeClass, on, off, queryAllDataUi, blurActiveElement, query } from "../utils";
+import { addClass, next, prev, hasTag, insertBefore, wait, create,  hasClass, removeClass, on, off, queryAllDataUi, blurActiveElement, query, onWeak } from "../utils";
 
 const _dialogs: Array<HTMLDialogElement> = [];
 
@@ -62,7 +62,7 @@ export async function updateDialog(from: Element, dialog: HTMLDialogElement): Pr
     await wait(90);
   }
 
-  if (!isModal) on(overlay, "click", onClickOverlay, false);
+  if (!isModal) onWeak(overlay, "click", onClickOverlay, false);
 
   if (isActive) closeDialog(dialog, overlay);
   else void openDialog(dialog, overlay, isModal, from);

package/src/cdn/elements/fields.css

@@ -1,44 +1,36 @@
 .field {
-  --_size: 3rem;
+  --_input: 3rem;
   --_start: 1.2rem;
-  block-size: var(--_size);
-  margin-block-end: 2rem;
+  --_middle: calc(var(--_input) / 2);
   border-radius: 0.25rem 0.25rem 0 0;
-  max-block-size: 12rem;
-}
-
-.grid > * > .field {
-  margin-block-end: 1rem;
-}
-
-.grid > * > .field + .field {
-  margin-block-start: 2rem;
-}
-
-.grid.no-space > * > .field + .field {
-  margin-block-start: 1rem;
+  min-block-size: var(--_input);
+  display: flex;
+  flex-direction: column;
 }
 
-.grid.medium-space > * > .field + .field {
-  margin-block-start: 2.5rem;
+.field.fill {
+  --_background: var(--surface-variant);
+  background-color: unset !important;
+  color: unset !important;
 }
 
-.grid.large-space > * > .field + .field {
-  margin-block-start: 3rem;
+.field.fill > :is(input, select, textarea) {
+  background-color: var(--_background);
+  z-index: 0;
 }
 
 .field.small {
-  --_size: 2.5rem;
+  --_input: 2.5rem;
   --_start: 1rem;
 }
 
 .field.large {
-  --_size: 3.5rem;
+  --_input: 3.5rem;
   --_start: 1.4rem;
 }
 
 .field.extra {
-  --_size: 4rem;
+  --_input: 4rem;
   --_start: 1.6rem;
 }
 
@@ -63,42 +55,42 @@
 }
 
 /* icon */
-.field > :is(i, img, svg, progress, a:not(.helper, .error)) {
+.field > :is(i, img, svg, progress.circle, a) {
   position: absolute;
-  inset: 50% auto auto auto;
-  transform: translateY(-50%);
+  inset: calc((var(--_input) / 2) - 0.75rem) auto auto auto;
   cursor: pointer;
-  z-index: 0;
+  z-index: 10;
   inline-size: 1.5rem;
   block-size: 1.5rem;
+  margin: auto 0;
+  pointer-events: none;
 }
 
-.field > :is(i, img, svg, progress, a:not(.helper, .error)),
-[dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child {
-  inset: 50% 1rem auto auto;
+.field > :is(a, .front) {
+  pointer-events: all !important;
 }
 
-.field > :is(i, img, svg, progress, a:not(.helper, .error)):first-child,
-[dir=rtl] .field > :is(i, img, svg, progress, a:not(.helper, .error)) {
-  inset: 50% auto auto 1rem;
+.field > a > :is(i, img, svg, progress.circle, a) {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
 }
 
-.field.invalid > i {
-  color: var(--error);
+.field > :is(i, img, svg, progress.circle, a),
+[dir=rtl] .field > :is(i, img, svg, progress.circle, a):first-child {
+  inset: calc(var(--_middle) - 0.75rem) 1rem auto auto;
 }
 
-.field > progress.circle {
-  inset-block-start: calc(50% - 0.75rem) !important;
-  border-width: 0.1875rem;
+.field > :is(i, img, svg, progress.circle, a):first-child,
+[dir=rtl] .field > :is(i, img, svg, progress.circle, a) {
+  inset: calc(var(--_middle) - 0.75rem) auto auto 1rem;
 }
 
-.field > a:not(.helper, .error) {
-  z-index: 10;
+.field.invalid > i {
+  color: var(--error);
 }
 
-.field > a > :is(i, img, svg, progress, a:not(.helper, .error)) {
-  inline-size: 1.5rem;
-  block-size: 1.5rem;
+.field > progress.circle {
+  border-width: 0.1875rem;
 }
 
 /* input, textarea and select */
@@ -114,7 +106,7 @@
   font-family: inherit;
   font-size: 1rem;
   inline-size: 100%;
-  block-size: 100%;
+  min-block-size: var(--_input);
   outline: none;
   z-index: 1;
   background: none;
@@ -137,10 +129,9 @@ input::-webkit-date-and-time-value {
   padding: 0 0.875rem;
 }
 
-.field.min > textarea {
-  overflow: hidden auto;
-  position: absolute;
-  inset: 0;
+.field > textarea:not([rows]) {
+  field-sizing: content;
+  max-block-size: 12rem;
 }
 
 input[type=file],
@@ -249,22 +240,6 @@ input[type=number] {
   cursor: not-allowed;
 }
 
-.field.textarea.small:not(.min) {
-  --_size: 5rem;
-}
-
-.field.textarea:not(.min) {
-  --_size: 5.5rem;
-}
-
-.field.textarea.large:not(.min) {
-  --_size: 6rem;
-}
-
-.field.textarea.extra:not(.min) {
-  --_size: 6.5rem;
-}
-
 .field > select {
   user-select: none;
 }
@@ -287,32 +262,31 @@ input[type=number] {
   background-color: var(--surface);
 }
 
-.field.label > :is(input, select) {
+.field > :is(input, select) {
   padding-block-start: 1rem;
 }
 
-.field.label.border:not(.fill) > :is(input, select) {
+.field:not(.label) > :is(input, select),
+.field.border:not(.fill) > :is(input, select) {
   padding-block-start: 0;
 }
 
 .field > textarea {
-  padding-block-start: var(--_start);
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
+  padding-block-start: calc(var(--_start)) !important;
 }
 
 .field > textarea:focus {
-  padding-block-start: calc(var(--_start) - 0.06rem);
+  padding-block-start: calc(var(--_start) - 0.01rem) !important;
 }
 
 .field:not(.label) > textarea,
-.field.border.label:not(.fill) > textarea {
-  padding-block-start: calc(var(--_start) - 0.5rem);
+.field.border:not(.fill) > textarea {
+  padding-block-start: calc(var(--_start) - 0.5rem) !important;
 }
 
 .field:not(.label) > textarea:focus,
-.field.border.label:not(.fill) > textarea:focus {
-  padding-block-start: calc(var(--_start) - 0.56rem);
+.field.border:not(.fill) > textarea:focus {
+  padding-block-start: calc(var(--_start) - 0.51rem) !important;
 }
 
 /* label */
@@ -321,21 +295,25 @@ input[type=number] {
   position: absolute;
   inset: -0.5rem 1rem 0 var(--_start);
   display: flex;
-  block-size: calc(var(--_size) + 1rem);
-  line-height: calc(var(--_size) + 1rem);
+  block-size: calc(var(--_input) + 1rem);
+  line-height: calc(var(--_input) + 1rem);
   font-size: 1rem;
   transition: all 0.2s;
   gap: 0.25rem;
   white-space: nowrap;
+  pointer-events: none;
+}
+
+[dir=rtl] .field.label > label {
+  inset: -0.5rem var(--_start) 0 1rem;
 }
 
 .field.label.round > label {
   inset: -0.5rem 1.75rem 0 var(--_start);
 }
 
-.field.label.textarea:not(.min) > label {
-  block-size: calc(var(--_size) - 1.5rem);
-  line-height: calc(var(--_size) - 1.5rem);
+[dir=rtl] .field.label.round > label {
+  inset: -0.5rem 1.75rem 0 var(--_start);
 }
 
 .field.label.border.prefix:not(.fill) > :is(label.active, :focus + label, [placeholder]:not(:placeholder-shown) + label, select + label) {
@@ -420,32 +398,24 @@ input[type=number] {
 }
 
 /* helper */
-.field > :is(.helper, .error) {
-  position: absolute;
-  inset: auto auto 0 1rem;
-  transform: translateY(100%);
+.field > output {
+  display: inline-block;
   font-size: 0.75rem;
   background: none !important;
-  padding-block-start: 0.125rem;
-}
-
-[dir=rtl] .field > :is(.helper, .error) {
-  inset: auto 1rem 0 auto;
-}
-
-a.helper {
-  color: var(--primary);
+  padding: 0.25rem 1rem;
+  line-height: 1.25rem;
+  align-self: start;
 }
 
-.field > .error {
+.field > output.invalid {
   color: var(--error) !important;
 }
 
-.field.round > :is(.helper, .error) {
-  inset-inline-start: 1.5rem;
+.field.round > output {
+  padding: 0.25rem 1.5rem;
 }
 
-.field.invalid > .helper {
+.field.invalid > output:not(.invalid) {
   display: none;
 }
 

package/src/cdn/elements/fields.ts

@@ -1,4 +1,4 @@
-import { query, hasClass, on, next, prev, hasType, parent, queryAll } from "../utils";
+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 = " ";
@@ -41,27 +41,29 @@ function onKeydownColor(e: KeyboardEvent) {
   updateColor(input, e);
 }
 
-function onInputTextarea(e: Event) {
-  const textarea = e.currentTarget as HTMLTextAreaElement;
-  updateTextarea(textarea);
-}
-
 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++) on(labels[i], "click", onClickLabel);
+  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++) {
-    on(inputs[i], "focus", onFocusInput);
-    on(inputs[i], "blur", onBlurInput);
+    onWeak(inputs[i], "focus", onFocusInput);
+    onWeak(inputs[i], "blur", onBlurInput);
     updateInput(inputs[i]);
   }
 }
@@ -69,15 +71,15 @@ function updateAllInputs() {
 function updateAllSelects() {
   const selects = queryAll(".field > select") as NodeListOf<HTMLSelectElement>;
   for (let i=0; i<selects.length; i++) {
-    on(selects[i], "focus", onFocusInput);
-    on(selects[i], "blur", onBlurInput);
+    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++) {
-    on(files[i], "change", onChangeFile);
+    onWeak(files[i], "change", onChangeFile);
     updateFile(files[i]);
   }
 }
@@ -85,24 +87,26 @@ function updateAllFiles() {
 function updateAllColors() {
   const colors = queryAll(".field > input[type=color]") as NodeListOf<HTMLInputElement>;
   for (let i=0; i<colors.length; i++) {
-    on(colors[i], "change", onChangeColor);
+    onWeak(colors[i], "change", onChangeColor);
     updateColor(colors[i]);
   }
 }
 
 function updateAllTextareas() {
-  const textareas = queryAll(".field.textarea > textarea") as NodeListOf<HTMLTextAreaElement>;
+  if (isChrome && !isMac && !isIOS) return;
+
+  const textareas = queryAll(".field > textarea") as NodeListOf<HTMLTextAreaElement>;
   for (let i=0; i<textareas.length; i++) {
-    on(textareas[i], "focus", onFocusInput);
-    on(textareas[i], "blur", onBlurInput);
-    on(textareas[i], "input", onInputTextarea);
+    onWeak(textareas[i], "focus", onFocusInput);
+    onWeak(textareas[i], "blur", onBlurInput);
+    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++) on(icons[i], "click", onPasswordIconClick);
+  for (let i=0; i<icons.length; i++) onWeak(icons[i], "click", onPasswordIconClick);
 }
 
 function updateInput(input: HTMLInputElement) {
@@ -121,7 +125,7 @@ function updateFile(input: HTMLInputElement, e?: KeyboardEvent) {
   if (!hasType(nextInput, "text")) return;
   nextInput.value = input.files ? Array.from(input.files).map((x) => x.name).join(", ") : "";
   nextInput.readOnly = true;
-  on(nextInput, "keydown", onKeydownFile, false);
+  onWeak(nextInput, "keydown", onKeydownFile, false);
   updateInput(nextInput);
 }
 
@@ -136,15 +140,18 @@ function updateColor(input: HTMLInputElement, e?: KeyboardEvent) {
   if (!hasType(nextInput, "text")) return;
   nextInput.readOnly = true;
   nextInput.value = input.value;
-  on(nextInput, "keydown", onKeydownColor, false);
+  onWeak(nextInput, "keydown", onKeydownColor, false);
   updateInput(nextInput);
 }
 
 function updateTextarea(textarea: HTMLTextAreaElement) {
   updatePlaceholder(textarea);
-  const field = parent(textarea) as HTMLElement;
-  field.removeAttribute("style");
-  if (hasClass(field, "min")) field.style.setProperty("--_size", `${Math.max(textarea.scrollHeight, field.offsetHeight)}px`);
+
+  if (textarea.hasAttribute("rows")) return;
+
+  const rootSize = rootSizeInPixels();
+  textarea.style.blockSize = "auto";
+  textarea.style.blockSize = `${textarea.scrollHeight - rootSize}px`;
 }
 
 export function updateAllFields() {

package/src/cdn/elements/progress.css

@@ -14,6 +14,7 @@ progress {
   writing-mode: horizontal-tb;
   direction: ltr;
   -webkit-appearance: none;
+  appearance: none;
 }
 
 .dark progress {
@@ -93,32 +94,42 @@ progress.wavy::-moz-progress-bar {
 }
 
 progress.circle {
-  display: inline-block;
+  --_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%;
-  border-width: 0.3rem;
-  border-style: solid;
-  border-color: currentcolor;
-  animation: 1.6s to-circular linear infinite;
+  mask-image: radial-gradient(circle at center, transparent 57%, currentColor 60%);
+}
+
+progress.circle::-webkit-progress-value {
   background: none;
-  flex: 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;
-  border-width: 0.2rem;
 }
 
 progress.circle.large {
   inline-size: 3.5rem;
   block-size: 3.5rem;
-  border-width: 0.4rem;
+}
+
+progress.circle:not([value]) {
+  animation: to-rotate 1s infinite linear;
 }
 
 :is(nav, .row, .field) > progress:not(.circle, .small, .medium, .large) {
@@ -143,19 +154,6 @@ progress.max[class*='-text'] {
   opacity: 1;
 }
 
-progress:is(.horizontal, .vertical, .max) {
-  display: unset;
-  inline-size: 100% !important;
-}
-
-progress.vertical {
-  writing-mode: vertical-lr;
-}
-
-progress.max.vertical {
-  transform: rotate(-180deg);
-}
-
 progress.max + * {
   margin-block-start: 0;
 }
@@ -164,12 +162,6 @@ progress.max + * {
   color: inherit;
 }
 
-@supports (-moz-appearance:none) {
-  progress.max.vertical {
-    transform: none;
-  }
-}
-
 @keyframes to-linear {
   0% {
     margin-inline-start: -100%;
@@ -184,46 +176,14 @@ progress.max + * {
   }
 }
 
-@keyframes to-circular {
-  0% {
+@keyframes to-rotate {
+  from {
+    --_value: 50;
     transform: rotate(0deg);
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
   }
 
-  20% {
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
-  }
-
-  30% {
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%);
-  }
-
-  40% {
-    clip-path: polygon(50% 50%, 0% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%);
-  }
-
-  50% {
-    clip-path: polygon(50% 50%, 50% 0%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%);
-  }
-
-  60% {
-    clip-path: polygon(50% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 100%);
-  }
-
-  70% {
-    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%, 0% 50%);
-  }
-
-  80% {
-    clip-path: polygon(50% 50%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 50%);
-  }
-
-  90% {
+  to {
+    --_value: 50;
     transform: rotate(360deg);
-    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
   }
-
-  100% {
-    clip-path: polygon(50% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%, 0% 50%);
-  }
-}
+}

package/src/cdn/elements/progress.ts

@@ -0,0 +1,26 @@
+import { queryAll, hasTag, off, on, isMac, isIOS, isChrome } from "../utils";
+
+
+function onInputDocument(e: Event) {
+  const progress = e.target as HTMLProgressElement;
+  
+  if (hasTag(progress, "progress")) {
+    updateProgress(progress);
+  } else {
+    updateAllProgress();
+  }
+}
+
+function updateProgress(progress: HTMLProgressElement) {
+  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]);
+}

package/src/cdn/elements/selections.css

@@ -3,7 +3,6 @@
 .radio,
 .switch {
   --_size: 1.5rem;
-  direction: ltr;
   inline-size: auto;
   block-size: auto;
   line-height: normal;
@@ -13,6 +12,10 @@
   align-items: center;
 }
 
+.switch {
+  direction: ltr;
+}
+
 :is(.checkbox, .radio, .switch).small {
   --_size: 1rem;
 }
@@ -66,6 +69,13 @@
   z-index: 1;
 }
 
+[dir=rtl] :is(.checkbox, .radio) > span::before,
+[dir=rtl] :is(.checkbox, .radio) > span > i,
+[dir=rtl] :is(.checkbox, .radio) > span::after {
+  --_size: inherit;
+  inset: auto calc(var(--_size) * -1) auto auto;
+}
+
 .switch > span::before,
 .switch.icon > span > i {
   position: absolute;
@@ -165,16 +175,31 @@
   transform: translate(-1.75rem, -50%) scale(1);
 }
 
+[dir=rtl] .switch > input:checked + span::before,
+[dir=rtl] .switch.icon > input:checked + span > i {
+  transform: translate(-1.75rem, -50%) scale(-1);
+}
+
 .switch > input:active:not(:disabled) + span::before,
 .switch.icon > input:active:not(:disabled) + span > i {
   transform: translate(-3rem, -50%) scale(1.2);
 }
 
+[dir=rtl] .switch > input:active:not(:disabled) + span::before,
+[dir=rtl] .switch.icon > input:active:not(:disabled) + span > i {
+  transform: translate(-3rem, -50%) scale(-1.2);
+}
+
 .switch > input:active:checked:not(:disabled) + span::before,
 .switch.icon > input:active:checked:not(:disabled) + span > i {
   transform: translate(-1.75rem, -50%) scale(1.2);
 }
 
+[dir=rtl] .switch > input:active:checked:not(:disabled) + span::before,
+[dir=rtl] .switch.icon > input:active:checked:not(:disabled) + span > i {
+  transform: translate(-1.75rem, -50%) scale(-1.2);
+}
+
 :is(.checkbox, .radio, .switch) > input:disabled + span {
   opacity: 0.5;
   cursor: not-allowed;

package/src/cdn/elements/sliders.css

@@ -351,4 +351,8 @@
   .slider > :hover ~ .tooltip.bottom {
     inset-block: auto -1rem !important;
   }
+  
+  body:has(input[type=range]:focus) {
+    overflow: hidden;
+  }
 }