@cirthcss/cirth 0.10.0 → 0.12.0

package/README.md

@@ -55,8 +55,8 @@ Include one stylesheet and write ordinary semantic HTML.
 ```html
 <link
   rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.10.0/dist/cirth.min.css"
-  integrity="sha384-eryxoPjA1vogVlspjzxHv7EDws0Ns2llZpU+nFSO6MKh58+TqPrpTxm/nBZcjAuE"
+  href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.12.0/dist/cirth.min.css"
+  integrity="sha384-g4j2ojPkWM2tpFfoHS/bGPrb4gS2JFU8QOLuDOtXauCZQ9f7yPhXR0KYxcGK80jf"
   crossorigin="anonymous">
 ```
 
@@ -250,8 +250,8 @@ npm run docs:dev
   [Meter](docs/src/pages/components/meter.md) ·
   [Modal](docs/src/pages/components/modal.md) ·
   [Nav](docs/src/pages/components/nav.md) ·
-  [Progress](docs/src/pages/components/progress.md) ·
-  [Tooltip](docs/src/pages/components/tooltip.md)
+  [Popover](docs/src/pages/components/popover.md) ·
+  [Progress](docs/src/pages/components/progress.md)
 - **Utilities** —
   [Accessibility](docs/src/pages/utilities/accessibility.md) ·
   [High contrast](docs/src/pages/utilities/high-contrast.md) ·
@@ -286,20 +286,38 @@ npm pack --dry-run
 ## Browser Support
 
 Cirth is designed and tested for the latest stable Chrome, Edge, Firefox,
-and Safari releases. The compiled CSS is processed with Lightning CSS
-against this Browserslist target:
+and Safari releases, on desktop and mobile. The compiled CSS is processed
+with Lightning CSS against this Browserslist target:
 
 ```json
 [
-  "Chrome >= 111",
-  "Edge >= 111",
-  "Firefox >= 113",
-  "Safari >= 15.4",
-  "iOS >= 15.4"
+  "Chrome >= 123",
+  "ChromeAndroid >= 123",
+  "Edge >= 123",
+  "Firefox >= 130",
+  "FirefoxAndroid >= 130",
+  "iOS >= 18.2",
+  "Opera >= 109",
+  "OperaMobile >= 73",
+  "Safari >= 18.2",
+  "Samsung >= 27"
 ]
 ```
 
-No version of Internet Explorer is supported.
+Opera 109 and Samsung Internet 27 are the releases built on the same
+Chromium as Chrome 123, so every entry above describes one engine floor,
+not ten independent ones. Together they account for roughly 78% of global
+browser usage, and the number rises on its own as old versions retire.
+
+The floor is set by what the library needs, not by age: `popover`,
+`@starting-style`, `transition-behavior: allow-discrete` and
+`scrollbar-gutter` are what let components open, close and animate
+without JavaScript, and `:has()`, `color-mix()` and `light-dark()` are
+what let the theme express relationships instead of baking them.
+
+No version of Internet Explorer is supported, and neither is the legacy
+Android Browser — on any current Android device that name refers to
+Chrome, which `ChromeAndroid` already covers.
 
 ## Design principles
 

package/dist/cirth.classless.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%;
@@ -236,6 +237,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);
@@ -260,6 +262,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);
@@ -539,6 +542,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;
@@ -685,6 +692,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 +
@@ -729,14 +740,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);
@@ -930,6 +933,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);
 }
@@ -967,14 +971,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);
@@ -988,19 +984,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;
@@ -1024,10 +1007,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);
@@ -1081,10 +1060,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);
@@ -1442,17 +1417,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);
@@ -1465,7 +1437,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);
@@ -1473,13 +1463,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;
   }
@@ -1490,7 +1480,7 @@ dialog > article > header > * {
 }
 
 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;
@@ -1509,10 +1499,11 @@ dialog > article > footer button:not(:first-of-type), dialog > article > footer
 }
 
 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);
@@ -1537,6 +1528,10 @@ dialog:not([open]), dialog[open="false"] {
   float: left;
 }
 
+html:has(dialog:modal) {
+  overflow: hidden;
+}
+
 :where(nav li):before {
   float: left;
   content: "​";
@@ -1590,6 +1585,7 @@ nav li [role="group"]:not(fieldset), 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;
@@ -1644,6 +1640,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;
@@ -1653,7 +1678,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;
 }
@@ -1701,160 +1725,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;
 }
@@ -1981,7 +1851,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);
@@ -2011,20 +1880,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 {
@@ -2254,10 +2128,8 @@ details summary[role="button"]: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"]) {
@@ -2366,10 +2238,8 @@ details summary[role="button"]: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"]) {
@@ -2478,10 +2348,8 @@ details summary[role="button"]: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"]) {
@@ -2700,7 +2568,6 @@ progress, [type="checkbox"], [type="radio"], [type="range"] {
   }
 
   dialog {
-    -webkit-backdrop-filter: none;
     backdrop-filter: none;
     min-width: 0;
     min-height: 0;