@cirthcss/cirth 0.10.0 → 0.12.0

package/dist/cirth.css

@@ -10,6 +10,7 @@
 }
 
 :where(:root), :where(:host) {
+  scrollbar-gutter: stable;
   -webkit-tap-highlight-color: transparent;
   -webkit-text-size-adjust: 100%;
   -moz-text-size-adjust: 100%;
@@ -66,7 +67,7 @@ section {
   display: grid;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .row {
     grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
   }
@@ -305,6 +306,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --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);
@@ -329,6 +331,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --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);
@@ -666,6 +669,10 @@ input:not([type="checkbox"], [type="radio"], [type="range"]) {
   height: calc(var(--cirth-size-4) * var(--cirth-line-height) + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
 }
 
+select, 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);
+}
+
 fieldset {
   width: 100%;
   margin: 0;
@@ -812,6 +819,10 @@ textarea {
   display: block;
 }
 
+textarea:not([rows]) {
+  min-block-size: calc(4lh + var(--cirth-form-element-spacing-vertical) * 2 + var(--cirth-border-width) * 2);
+}
+
 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 +
@@ -856,14 +867,6 @@ label:has([type="checkbox"], [type="radio"]) {
   margin-inline-end: .5em;
 }
 
-[type="checkbox"]::-ms-check {
-  display: none;
-}
-
-[type="radio"]::-ms-check {
-  display: none;
-}
-
 [type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
   --cirth-background-color: var(--cirth-primary-background);
   --cirth-border-color: var(--cirth-primary-border);
@@ -1057,6 +1060,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 }
 
 [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);
 }
@@ -1094,14 +1098,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   transition: background-color var(--cirth-transition), box-shadow var(--cirth-transition);
 }
 
-[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);
-}
-
 [type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   border: var(--cirth-border-width-2) solid var(--cirth-range-thumb-border-color);
@@ -1115,19 +1111,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 }
 
 [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;
-}
-
-[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;
@@ -1151,10 +1134,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   transform: scale(1.25);
 }
 
-[type="range"]:active::-ms-thumb {
-  transform: scale(1.25);
-}
-
 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);
@@ -1208,10 +1187,6 @@ details summary::marker {
   display: none;
 }
 
-details summary::-moz-list-bullet {
-  list-style-type: none;
-}
-
 details summary:after {
   width: var(--cirth-size-4);
   height: var(--cirth-size-4);
@@ -1725,17 +1700,14 @@ meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
   background: var(--cirth-meter-even-less-good-color);
 }
 
-:root, :host {
-  --cirth-scrollbar-width: 0px;
-}
-
 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);
@@ -1748,7 +1720,25 @@ dialog {
   inset: 0;
 }
 
+dialog[open] {
+  opacity: 1;
+}
+
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+  }
+}
+
+@starting-style {
+  dialog[open] > article {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
 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);
@@ -1756,13 +1746,13 @@ dialog > article {
   overflow: auto;
 }
 
-@media (min-width: 576px) {
+@media (width >= 576px) {
   dialog > article {
     max-width: 510px;
   }
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   dialog > article {
     max-width: 700px;
   }
@@ -1773,7 +1763,7 @@ dialog > article > header > * {
 }
 
 dialog > article > header .close, 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;
@@ -1792,10 +1782,11 @@ dialog > article > footer button:not(:first-of-type), dialog > article > footer
 }
 
 dialog > article .close, 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);
@@ -1820,54 +1811,10 @@ dialog:not([open]), dialog[open="false"] {
   float: left;
 }
 
-.modal-is-open {
-  pointer-events: none;
-  touch-action: none;
-  padding-inline-end: var(--cirth-scrollbar-width, 0);
+html:has(dialog:modal) {
   overflow: hidden;
 }
 
-.modal-is-open dialog {
-  pointer-events: auto;
-  touch-action: auto;
-}
-
-:where(.modal-is-opening, .modal-is-closing) dialog, :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;
-}
-
-:where(.modal-is-opening, .modal-is-closing) dialog {
-  animation-duration: calc(var(--cirth-duration-normal) * 4);
-  animation-name: modal-overlay;
-}
-
-:where(.modal-is-opening, .modal-is-closing) dialog > article {
-  animation-delay: var(--cirth-duration-normal);
-  animation-name: modal;
-}
-
-.modal-is-closing dialog, .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%);
-  }
-}
-
 :where(nav li):before {
   float: left;
   content: "​";
@@ -1921,6 +1868,7 @@ nav li .group, nav li [role="search"] {
 
 nav li button, nav li [role="button"], nav li [type="button"], nav li input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), 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;
@@ -1975,6 +1923,35 @@ aside li [role="button"] {
   margin: inherit;
 }
 
+:is([popover=""], [popover="auto"], [popover="hint"]):not(dialog) {
+  --cirth-popover-display: block;
+  display: none;
+}
+
+: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 {
+  :is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):popover-open {
+    opacity: 0;
+  }
+}
+
+:is([popover=""], [popover="auto"], [popover="hint"]):not(dialog):not(:popover-open) {
+  opacity: 0;
+}
+
 progress {
   vertical-align: baseline;
   appearance: none;
@@ -1984,7 +1961,6 @@ progress {
   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;
 }
@@ -2032,160 +2008,6 @@ progress::-moz-progress-bar {
   }
 }
 
-[data-tooltip] {
-  position: relative;
-}
-
-[data-tooltip]:not(a, button, input, [role="button"]) {
-  border-bottom: var(--cirth-border-width-1) dotted;
-  cursor: help;
-  text-decoration: none;
-}
-
-[data-tooltip][data-placement="top"]:before, [data-tooltip][data-placement="top"]:after, [data-tooltip]:before, [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);
-}
-
-[data-tooltip][data-placement="top"]:after, [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%);
-}
-
-[data-tooltip][data-placement="bottom"]:before, [data-tooltip][data-placement="bottom"]:after {
-  top: 100%;
-  bottom: auto;
-  transform: translate(-50%, .25rem);
-}
-
-[data-tooltip][data-placement="bottom"]:after {
-  border: .3rem solid #0000;
-  border-bottom-color: currentColor;
-  transform: translate(-50%, -.3rem);
-}
-
-[data-tooltip][data-placement="left"]:before, [data-tooltip][data-placement="left"]:after {
-  inset: 50% 100% auto auto;
-  transform: translate(-.25rem, -50%);
-}
-
-[data-tooltip][data-placement="left"]:after {
-  border: .3rem solid #0000;
-  border-left-color: currentColor;
-  transform: translate(.3rem, -50%);
-}
-
-[data-tooltip][data-placement="right"]:before, [data-tooltip][data-placement="right"]:after {
-  inset: 50% auto auto 100%;
-  transform: translate(.25rem, -50%);
-}
-
-[data-tooltip][data-placement="right"]:after {
-  border: .3rem solid #0000;
-  border-right-color: currentColor;
-  transform: translate(-.3rem, -50%);
-}
-
-[data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [data-tooltip]:hover:after {
-  opacity: 1;
-}
-
-@media (hover: hover) and (pointer: fine) {
-  [data-tooltip]:focus:before, [data-tooltip]:focus:after, [data-tooltip]:hover:before, [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);
-  }
-
-  [data-tooltip]:focus:after, [data-tooltip]:hover:after {
-    --cirth-tooltip-caret-slide-to: translate(-50%, 0rem);
-    animation-name: tooltip-caret-slide;
-    transform: translate(-50%, -.25rem);
-  }
-
-  [data-tooltip][data-placement="bottom"]:focus:before, [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:before, [data-tooltip][data-placement="bottom"]:hover:after {
-    --cirth-tooltip-slide-to: translate(-50%, .25rem);
-    animation-name: tooltip-slide;
-    transform: translate(-50%, -.75rem);
-  }
-
-  [data-tooltip][data-placement="bottom"]:focus:after, [data-tooltip][data-placement="bottom"]:hover:after {
-    --cirth-tooltip-caret-slide-to: translate(-50%, -.3rem);
-    animation-name: tooltip-caret-slide;
-    transform: translate(-50%, -.5rem);
-  }
-
-  [data-tooltip][data-placement="left"]:focus:before, [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:before, [data-tooltip][data-placement="left"]:hover:after {
-    --cirth-tooltip-slide-to: translate(-.25rem, -50%);
-    animation-name: tooltip-slide;
-    transform: translate(.75rem, -50%);
-  }
-
-  [data-tooltip][data-placement="left"]:focus:after, [data-tooltip][data-placement="left"]:hover:after {
-    --cirth-tooltip-caret-slide-to: translate(.3rem, -50%);
-    animation-name: tooltip-caret-slide;
-    transform: translate(.05rem, -50%);
-  }
-
-  [data-tooltip][data-placement="right"]:focus:before, [data-tooltip][data-placement="right"]:focus:after, [data-tooltip][data-placement="right"]:hover:before, [data-tooltip][data-placement="right"]:hover:after {
-    --cirth-tooltip-slide-to: translate(.25rem, -50%);
-    animation-name: tooltip-slide;
-    transform: translate(-.75rem, -50%);
-  }
-
-  [data-tooltip][data-placement="right"]:focus:after, [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;
-  }
-}
-
 [aria-controls] {
   cursor: pointer;
 }
@@ -2340,7 +2162,6 @@ progress::-moz-progress-bar {
   --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);
@@ -2373,20 +2194,25 @@ progress::-moz-progress-bar {
     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");
 }
 
 a, a.secondary, a.contrast {
@@ -2645,10 +2471,8 @@ details summary[role="button"]:not(.outline):after {
   --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");
 }
 
 :where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :root:where(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:where(:not([data-theme="dark"]))) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
@@ -2762,10 +2586,8 @@ details summary[role="button"]:not(.outline):after {
     --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");
   }
 
   :root:where(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:where(:not([data-theme]))) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
@@ -2883,10 +2705,8 @@ details summary[role="button"]:not(.outline):after {
   --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");
 }
 
 :where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
@@ -3118,7 +2938,6 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
   }
 
   dialog {
-    -webkit-backdrop-filter: none;
     backdrop-filter: none;
     min-width: 0;
     min-height: 0;