@cirthcss/cirth 0.10.0 → 0.11.0

package/dist/cirth.classless.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%;
@@ -726,14 +727,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);
@@ -964,14 +957,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);
@@ -985,19 +970,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;
@@ -1021,10 +993,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);
@@ -1078,10 +1046,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);
@@ -1439,17 +1403,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);
@@ -1462,7 +1423,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);
@@ -1470,13 +1449,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;
   }
@@ -1641,6 +1620,33 @@
   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;
+}
+
+@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;
@@ -1650,7 +1656,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;
 }
@@ -1698,160 +1703,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;
 }
@@ -1978,7 +1829,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);
@@ -2008,20 +1858,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 {
@@ -2251,10 +2106,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"]) {
@@ -2363,10 +2216,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"]) {
@@ -2475,10 +2326,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"]) {
@@ -2689,7 +2538,6 @@
   }
 
   .cirth dialog {
-    -webkit-backdrop-filter: none;
     backdrop-filter: none;
     min-width: 0;
     min-height: 0;