@cirthcss/cirth 0.10.0 → 0.12.0

package/dist/cirth.scoped.css

@@ -10,6 +10,7 @@
 }
 
 .cirth {
+  scrollbar-gutter: stable;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
@@ -63,7 +64,7 @@
   display: grid;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .cirth .row {
     grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
   }
@@ -302,6 +303,7 @@
   --cirth-color: var(--cirth-primary-inverse);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
   max-width: 100%;
+  min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
   padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
   border: var(--cirth-border-width) solid var(--cirth-border-color);
   border-radius: var(--cirth-border-radius);
@@ -326,6 +328,7 @@
   --cirth-color: var(--cirth-primary-inverse);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
   max-width: 100%;
+  min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
   padding: var(--cirth-form-element-spacing-vertical) var(--cirth-form-element-spacing-horizontal);
   border: var(--cirth-border-width) solid var(--cirth-border-color);
   border-radius: var(--cirth-border-radius);
@@ -663,6 +666,10 @@
   height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
 }
 
+.cirth select, .cirth textarea {
+  min-block-size: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+}
+
 .cirth fieldset {
   width: 100%;
   margin: 0;
@@ -809,6 +816,10 @@
   display: block;
 }
 
+.cirth textarea:not([rows]) {
+  min-block-size: calc(4lh + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+}
+
 .cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   --cirth-icon-height: calc(var(--cirth-size-4) * var(--cirth-line-height) +
       var(--cirth-form-element-spacing-vertical) * 2 +
@@ -853,14 +864,6 @@
   margin-inline-end: .5em;
 }
 
-.cirth [type="checkbox"]::-ms-check {
-  display: none;
-}
-
-.cirth [type="radio"]::-ms-check {
-  display: none;
-}
-
 .cirth [type="checkbox"]:checked, .cirth [type="checkbox"]:checked:active, .cirth [type="checkbox"]:checked:focus, .cirth [type="radio"]:checked, .cirth [type="radio"]:checked:active, .cirth [type="radio"]:checked:focus {
   --cirth-background-color: var(--cirth-primary-background);
   --cirth-border-color: var(--cirth-primary-border);
@@ -1054,6 +1057,7 @@
 }
 
 .cirth [type="file"]::file-selector-button {
+  min-block-size: 0;
   padding: calc(var(--cirth-form-element-spacing-vertical) * .5) var(--cirth-form-element-spacing-horizontal);
   margin-inline-end: calc(var(--cirth-spacing) / 2);
 }
@@ -1091,14 +1095,6 @@
   transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
 }
 
-.cirth [type="range"]::-ms-track {
-  border-radius: var(--cirth-border-radius);
-  background-color: var(--cirth-range-border-color);
-  width: 100%;
-  height: .375rem;
-  transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
-}
-
 .cirth [type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
@@ -1112,19 +1108,6 @@
 }
 
 .cirth [type="range"]::-moz-range-thumb {
-  -webkit-appearance: none;
-  border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
-  background-color: var(--cirth-range-thumb-color);
-  cursor: pointer;
-  width: 1.25rem;
-  height: 1.25rem;
-  transition: background-color var(--cirth-transition), transform var(--cirth-transition);
-  border-radius: 50%;
-  margin-top: -.4375rem;
-}
-
-.cirth [type="range"]::-ms-thumb {
-  -webkit-appearance: none;
   border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
   background-color: var(--cirth-range-thumb-color);
   cursor: pointer;
@@ -1148,10 +1131,6 @@
   transform: scale(1.25);
 }
 
-.cirth [type="range"]:active::-ms-thumb {
-  transform: scale(1.25);
-}
-
 .cirth input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
   background-image: var(--cirth-icon-search);
   background-position: center left var(--cirth-form-element-spacing-horizontal);
@@ -1205,10 +1184,6 @@
   display: none;
 }
 
-.cirth details summary::-moz-list-bullet {
-  list-style-type: none;
-}
-
 .cirth details summary:after {
   width: var(--cirth-size-4);
   height: var(--cirth-size-4);
@@ -1722,17 +1697,14 @@
   background: var(--cirth-meter-even-less-good-color);
 }
 
-.cirth {
-  --cirth-scrollbar-width: 0px;
-}
-
 .cirth dialog {
+  opacity: 0;
+  transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
   z-index: var(--cirth-z-index-modal);
   width: inherit;
   min-width: 100%;
   height: inherit;
   min-height: 100%;
-  -webkit-backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
   backdrop-filter: var(--cirth-modal-overlay-backdrop-filter);
   background-color: var(--cirth-modal-overlay-background-color);
   color: var(--cirth-color);
@@ -1745,7 +1717,25 @@
   inset: 0;
 }
 
+.cirth dialog[open] {
+  opacity: 1;
+}
+
+@starting-style {
+  .cirth dialog[open] {
+    opacity: 0;
+  }
+}
+
+@starting-style {
+  .cirth dialog[open] > article {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
 .cirth dialog > article {
+  transition: opacity var(--cirth-transition), transform var(--cirth-transition);
   width: 100%;
   max-height: calc(100vh - var(--cirth-spacing) * 2);
   max-height: calc(100dvh - var(--cirth-spacing) * 2);
@@ -1753,13 +1743,13 @@
   overflow: auto;
 }
 
-@media (min-width: 576px) {
+@media (width >= 576px) {
   .cirth dialog > article {
     max-width: 510px;
   }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .cirth dialog > article {
     max-width: 700px;
   }
@@ -1770,7 +1760,7 @@
 }
 
 .cirth dialog > article > header .close, .cirth dialog > article > header :is(a, button)[rel="prev"] {
-  margin: 0;
+  margin: calc(calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * -1);
   float: right;
   margin-inline-start: var(--cirth-spacing);
   padding: 0;
@@ -1789,10 +1779,11 @@
 }
 
 .cirth dialog > article .close, .cirth dialog > article :is(a, button)[rel="prev"] {
-  width: var(--cirth-size-4);
-  height: var(--cirth-size-4);
-  margin-top: calc(var(--cirth-spacing) * -1);
-  margin-bottom: var(--cirth-spacing);
+  width: calc(var(--cirth-size-4) + calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * 2);
+  height: calc(var(--cirth-size-4) + calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * 2);
+  margin-top: calc(var(--cirth-spacing) * -1 - calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2));
+  margin-right: calc(calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2) * -1);
+  margin-bottom: calc(var(--cirth-spacing) - calc((var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2 - var(--cirth-size-4)) / 2));
   background-image: var(--cirth-icon-close);
   background-position: center;
   background-size: auto var(--cirth-size-4);
@@ -1817,54 +1808,6 @@
   float: left;
 }
 
-.cirth.modal-is-open, .cirth .modal-is-open {
-  pointer-events: none;
-  touch-action: none;
-  padding-inline-end: var(--cirth-scrollbar-width, 0);
-  overflow: hidden;
-}
-
-.cirth.modal-is-open dialog, .cirth .modal-is-open dialog {
-  pointer-events: auto;
-  touch-action: auto;
-}
-
-.cirth:where(.modal-is-opening, .modal-is-closing) dialog, .cirth:where(.modal-is-opening, .modal-is-closing) dialog > article, .cirth :where(.modal-is-opening, .modal-is-closing) dialog, .cirth :where(.modal-is-opening, .modal-is-closing) dialog > article {
-  animation-duration: var(--cirth-duration-normal);
-  animation-timing-function: var(--cirth-ease-in-out);
-  animation-fill-mode: both;
-}
-
-.cirth:where(.modal-is-opening, .modal-is-closing) dialog, .cirth :where(.modal-is-opening, .modal-is-closing) dialog {
-  animation-duration: calc(var(--cirth-duration-normal) * 4);
-  animation-name: modal-overlay;
-}
-
-.cirth:where(.modal-is-opening, .modal-is-closing) dialog > article, .cirth :where(.modal-is-opening, .modal-is-closing) dialog > article {
-  animation-delay: var(--cirth-duration-normal);
-  animation-name: modal;
-}
-
-.cirth.modal-is-closing dialog, .cirth.modal-is-closing dialog > article, .cirth .modal-is-closing dialog, .cirth .modal-is-closing dialog > article {
-  animation-delay: var(--cirth-duration-instant);
-  animation-direction: reverse;
-}
-
-@keyframes modal-overlay {
-  from {
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-    background-color: #0000;
-  }
-}
-
-@keyframes modal {
-  from {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-}
-
 .cirth :where(nav li):before {
   float: left;
   content: "​";
@@ -1918,6 +1861,7 @@
 
 .cirth nav li button, .cirth nav li [role="button"], .cirth nav li [type="button"], .cirth nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), .cirth nav li select {
   height: auto;
+  min-block-size: var(--cirth-size-6);
   margin-inline: inherit;
   padding: calc(var(--cirth-nav-link-spacing-vertical) - var(--cirth-border-width) * 2) var(--cirth-nav-link-spacing-horizontal);
   margin-bottom: 0;
@@ -1972,6 +1916,35 @@
   margin: inherit;
 }
 
+.cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog) {
+  --cirth-popover-display: block;
+  display: none;
+}
+
+.cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
+  display: var(--cirth-popover-display);
+  max-width: var(--cirth-popover-max-width);
+  padding: var(--cirth-space-2) var(--cirth-space-3);
+  border: var(--cirth-border-width) solid var(--cirth-popover-border-color);
+  border-radius: var(--cirth-border-radius);
+  background-color: var(--cirth-popover-background-color);
+  box-shadow: var(--cirth-popover-box-shadow);
+  color: var(--cirth-popover-color);
+  transition: opacity var(--cirth-transition), display var(--cirth-transition) allow-discrete, overlay var(--cirth-transition) allow-discrete;
+  margin: auto;
+  inset: 0;
+}
+
+@starting-style {
+  .cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
+    opacity: 0;
+  }
+}
+
+.cirth :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):not(:popover-open) {
+  opacity: 0;
+}
+
 .cirth progress {
   vertical-align: baseline;
   appearance: none;
@@ -1981,7 +1954,6 @@
   border: var(--cirth-border-width-1) solid var(--cirth-progress-border-color);
   border-radius: var(--cirth-border-radius);
   background-color: var(--cirth-progress-background-color);
-  color: var(--cirth-progress-color);
   display: inline-block;
   overflow: hidden;
 }
@@ -2029,160 +2001,6 @@
   }
 }
 
-.cirth [data-tooltip] {
-  position: relative;
-}
-
-.cirth [data-tooltip]:not(a, button, input, [role="button"]) {
-  border-bottom: var(--cirth-border-width-1) dotted;
-  cursor: help;
-  text-decoration: none;
-}
-
-.cirth [data-tooltip][data-placement="top"]:before, .cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:before, .cirth [data-tooltip]:after {
-  z-index: var(--cirth-z-index-tooltip);
-  padding: var(--cirth-space-1) var(--cirth-space-2);
-  border-radius: var(--cirth-border-radius);
-  background: var(--cirth-tooltip-background-color);
-  content: attr(data-tooltip);
-  color: var(--cirth-tooltip-color);
-  font-style: normal;
-  font-weight: var(--cirth-font-weight);
-  font-size: var(--cirth-font-size-sm);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  opacity: 0;
-  pointer-events: none;
-  text-decoration: none;
-  display: block;
-  position: absolute;
-  bottom: 100%;
-  left: 50%;
-  overflow: hidden;
-  transform: translate(-50%, -.25rem);
-}
-
-.cirth [data-tooltip][data-placement="top"]:after, .cirth [data-tooltip]:after {
-  content: "";
-  color: var(--cirth-tooltip-background-color);
-  background-color: #0000;
-  border-top: .3rem solid;
-  border-left: .3rem solid #0000;
-  border-right: .3rem solid #0000;
-  border-radius: 0;
-  padding: 0;
-  transform: translate(-50%);
-}
-
-.cirth [data-tooltip][data-placement="bottom"]:before, .cirth [data-tooltip][data-placement="bottom"]:after {
-  top: 100%;
-  bottom: auto;
-  transform: translate(-50%, .25rem);
-}
-
-.cirth [data-tooltip][data-placement="bottom"]:after {
-  border: .3rem solid #0000;
-  border-bottom-color: currentColor;
-  transform: translate(-50%, -.3rem);
-}
-
-.cirth [data-tooltip][data-placement="left"]:before, .cirth [data-tooltip][data-placement="left"]:after {
-  inset: 50% 100% auto auto;
-  transform: translate(-.25rem, -50%);
-}
-
-.cirth [data-tooltip][data-placement="left"]:after {
-  border: .3rem solid #0000;
-  border-left-color: currentColor;
-  transform: translate(.3rem, -50%);
-}
-
-.cirth [data-tooltip][data-placement="right"]:before, .cirth [data-tooltip][data-placement="right"]:after {
-  inset: 50% auto auto 100%;
-  transform: translate(.25rem, -50%);
-}
-
-.cirth [data-tooltip][data-placement="right"]:after {
-  border: .3rem solid #0000;
-  border-right-color: currentColor;
-  transform: translate(-.3rem, -50%);
-}
-
-.cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
-  opacity: 1;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .cirth [data-tooltip]:focus:before, .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:before, .cirth [data-tooltip]:hover:after {
-    --cirth-tooltip-slide-to: translate(-50%, -.25rem);
-    animation-duration: var(--cirth-duration-normal);
-    opacity: 0;
-    animation-name: tooltip-slide;
-    animation-fill-mode: forwards;
-    transform: translate(-50%, .75rem);
-  }
-
-  .cirth [data-tooltip]:focus:after, .cirth [data-tooltip]:hover:after {
-    --cirth-tooltip-caret-slide-to: translate(-50%, 0rem);
-    animation-name: tooltip-caret-slide;
-    transform: translate(-50%, -.25rem);
-  }
-
-  .cirth [data-tooltip][data-placement="bottom"]:focus:before, .cirth [data-tooltip][data-placement="bottom"]:focus:after, .cirth [data-tooltip][data-placement="bottom"]:hover:before, .cirth [data-tooltip][data-placement="bottom"]:hover:after {
-    --cirth-tooltip-slide-to: translate(-50%, .25rem);
-    animation-name: tooltip-slide;
-    transform: translate(-50%, -.75rem);
-  }
-
-  .cirth [data-tooltip][data-placement="bottom"]:focus:after, .cirth [data-tooltip][data-placement="bottom"]:hover:after {
-    --cirth-tooltip-caret-slide-to: translate(-50%, -.3rem);
-    animation-name: tooltip-caret-slide;
-    transform: translate(-50%, -.5rem);
-  }
-
-  .cirth [data-tooltip][data-placement="left"]:focus:before, .cirth [data-tooltip][data-placement="left"]:focus:after, .cirth [data-tooltip][data-placement="left"]:hover:before, .cirth [data-tooltip][data-placement="left"]:hover:after {
-    --cirth-tooltip-slide-to: translate(-.25rem, -50%);
-    animation-name: tooltip-slide;
-    transform: translate(.75rem, -50%);
-  }
-
-  .cirth [data-tooltip][data-placement="left"]:focus:after, .cirth [data-tooltip][data-placement="left"]:hover:after {
-    --cirth-tooltip-caret-slide-to: translate(.3rem, -50%);
-    animation-name: tooltip-caret-slide;
-    transform: translate(.05rem, -50%);
-  }
-
-  .cirth [data-tooltip][data-placement="right"]:focus:before, .cirth [data-tooltip][data-placement="right"]:focus:after, .cirth [data-tooltip][data-placement="right"]:hover:before, .cirth [data-tooltip][data-placement="right"]:hover:after {
-    --cirth-tooltip-slide-to: translate(.25rem, -50%);
-    animation-name: tooltip-slide;
-    transform: translate(-.75rem, -50%);
-  }
-
-  .cirth [data-tooltip][data-placement="right"]:focus:after, .cirth [data-tooltip][data-placement="right"]:hover:after {
-    --cirth-tooltip-caret-slide-to: translate(-.3rem, -50%);
-    animation-name: tooltip-caret-slide;
-    transform: translate(-.05rem, -50%);
-  }
-}
-
-@keyframes tooltip-slide {
-  to {
-    transform: var(--cirth-tooltip-slide-to);
-    opacity: 1;
-  }
-}
-
-@keyframes tooltip-caret-slide {
-  50% {
-    opacity: 0;
-  }
-
-  100% {
-    transform: var(--cirth-tooltip-caret-slide-to);
-    opacity: 1;
-  }
-}
-
 .cirth [aria-controls] {
   cursor: pointer;
 }
@@ -2337,7 +2155,6 @@
   --cirth-z-index-fixed: 1030;
   --cirth-z-index-modal-backdrop: 1040;
   --cirth-z-index-modal: 1050;
-  --cirth-z-index-tooltip: 1070;
   --cirth-font-family: var(--cirth-font-family-sans);
   --cirth-line-height: var(--cirth-line-height-normal);
   --cirth-font-weight: var(--cirth-font-weight-regular);
@@ -2370,20 +2187,25 @@
     var(--cirth-form-element-border-color);
   --cirth-meter-background-color: var(--cirth-progress-background-color);
   --cirth-meter-border-color: var(--cirth-progress-border-color);
+  --cirth-popover-background-color: var(--cirth-card-background-color);
+  --cirth-popover-border-color: var(--cirth-muted-border-color);
+  --cirth-popover-color: var(--cirth-color);
+  --cirth-popover-box-shadow: var(--cirth-box-shadow);
+  --cirth-popover-max-width: min(30rem, 100% - var(--cirth-spacing) * 2);
   --cirth-modal-overlay-backdrop-filter: blur(.375rem);
   --cirth-nav-element-spacing-vertical: var(--cirth-space-4);
   --cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
   --cirth-nav-link-spacing-vertical: var(--cirth-space-2);
   --cirth-nav-link-spacing-horizontal: var(--cirth-space-2);
   --cirth-nav-breadcrumb-divider: ">";
-  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
-  --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
-  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
-  --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
-  --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
-  --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+  --cirth-icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 146, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-loading: url("data:image/svg+xml,%3Csvg fill='none' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 146, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
 }
 
 .cirth a, .cirth a.secondary, .cirth a.contrast {
@@ -2642,10 +2464,8 @@
   --cirth-progress-background-color: oklch(91.7% .006 264);
   --cirth-progress-border-color: oklch(61.3% .032 264);
   --cirth-progress-color: var(--cirth-primary-background);
-  --cirth-tooltip-background-color: var(--cirth-contrast-background);
-  --cirth-tooltip-color: var(--cirth-contrast-inverse);
-  --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(40, 124, 87)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
 
 .cirth:where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth:where(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
@@ -2759,10 +2579,8 @@
     --cirth-progress-background-color: oklch(26.7% .011 264);
     --cirth-progress-border-color: oklch(52.7% .032 264);
     --cirth-progress-color: oklch(61.3% .113 69.35);
-    --cirth-tooltip-background-color: var(--cirth-contrast-background);
-    --cirth-tooltip-color: var(--cirth-contrast-inverse);
-    --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-    --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+    --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+    --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   }
 
   .cirth:where(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
@@ -2880,10 +2698,8 @@
   --cirth-progress-background-color: oklch(26.7% .011 264);
   --cirth-progress-border-color: oklch(52.7% .032 264);
   --cirth-progress-color: oklch(61.3% .113 69.35);
-  --cirth-tooltip-background-color: var(--cirth-contrast-background);
-  --cirth-tooltip-color: var(--cirth-contrast-inverse);
-  --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+  --cirth-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(75, 215, 153)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
 
 .cirth:where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), .cirth :where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
@@ -3107,7 +2923,6 @@
   }
 
   .cirth dialog {
-    -webkit-backdrop-filter: none;
     backdrop-filter: none;
     min-width: 0;
     min-height: 0;