@cirthcss/cirth 0.9.0 → 0.11.0

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%;
@@ -729,14 +730,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);
@@ -967,14 +960,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 +973,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 +996,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 +1049,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);
@@ -1398,17 +1362,58 @@ button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][ari
   pointer-events: none;
 }
 
-:root, :host {
-  --cirth-scrollbar-width: 0px;
+meter {
+  appearance: none;
+  width: 100%;
+  height: var(--cirth-size-2);
+  margin-bottom: calc(var(--cirth-spacing) * .5);
+  border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
+  border-radius: var(--cirth-border-radius);
+  background: var(--cirth-meter-background-color);
+  display: inline-block;
+  overflow: hidden;
+}
+
+meter::-webkit-meter-bar {
+  background: none;
+}
+
+meter::-webkit-meter-inner-element {
+  display: flex;
+}
+
+meter::-webkit-meter-optimum-value {
+  background: var(--cirth-meter-optimum-color);
+}
+
+meter::-webkit-meter-suboptimum-value {
+  background: var(--cirth-meter-suboptimum-color);
+}
+
+meter::-webkit-meter-even-less-good-value {
+  background: var(--cirth-meter-even-less-good-color);
+}
+
+meter::-moz-meter-bar {
+  background: var(--cirth-meter-optimum-color);
+}
+
+meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: var(--cirth-meter-suboptimum-color);
+}
+
+meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: var(--cirth-meter-even-less-good-color);
 }
 
 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);
@@ -1421,7 +1426,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);
@@ -1429,13 +1452,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;
   }
@@ -1493,6 +1516,10 @@ dialog:not([open]), dialog[open="false"] {
   float: left;
 }
 
+html:has(dialog[open]) {
+  overflow: hidden;
+}
+
 :where(nav li):before {
   float: left;
   content: "​";
@@ -1600,6 +1627,33 @@ 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;
+}
+
+@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;
@@ -1609,7 +1663,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;
 }
@@ -1657,160 +1710,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;
 }
@@ -1937,7 +1836,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);
@@ -1965,20 +1863,27 @@ progress::-moz-progress-bar {
     var(--cirth-primary-focus);
   --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
     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 {
@@ -2107,7 +2012,7 @@ details summary[role="button"]:after {
   filter: brightness(0) invert();
 }
 
-[data-theme="light"], :root:not([data-theme="dark"]), :host(:not([data-theme="dark"])) {
+:where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
   --lightningcss-light: initial;
   --lightningcss-dark: ;
   color-scheme: light;
@@ -2202,21 +2107,22 @@ details summary[role="button"]:after {
   --cirth-card-sectioning-background-color: oklch(99% 0 336);
   --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
   --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
+  --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
+  --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
+  --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
   --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");
 }
 
-[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+: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"]) {
   --cirth-form-element-focus-color: var(--cirth-primary-focus);
 }
 
 @media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]), :host(:not([data-theme])) {
+  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
@@ -2311,21 +2217,22 @@ details summary[role="button"]:after {
     --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
     --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
     --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
+    --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
+    --cirth-meter-suboptimum-color: oklch(70% .124 78);
+    --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
     --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:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+  :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"]) {
     --cirth-form-element-focus-color: var(--cirth-primary-focus);
   }
 }
 
-[data-theme="dark"] {
+:where([data-theme="dark"]) {
   --lightningcss-light: ;
   --lightningcss-dark: initial;
   color-scheme: dark;
@@ -2420,19 +2327,253 @@ details summary[role="button"]:after {
   --cirth-card-sectioning-background-color: oklch(23.4% .00725 264);
   --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
   --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
+  --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
+  --cirth-meter-suboptimum-color: oklch(70% .124 78);
+  --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
   --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");
 }
 
-[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+:where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
   --cirth-form-element-focus-color: var(--cirth-primary-focus);
 }
 
 progress, [type="checkbox"], [type="radio"], [type="range"] {
   accent-color: var(--cirth-primary);
 }
+
+@media (prefers-contrast: more) {
+  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
+    --cirth-color: oklch(22.3% .006 264);
+    --cirth-h1-color: var(--cirth-color);
+    --cirth-h2-color: var(--cirth-color);
+    --cirth-h3-color: var(--cirth-color);
+    --cirth-h4-color: var(--cirth-color);
+    --cirth-h5-color: var(--cirth-color);
+    --cirth-h6-color: var(--cirth-color);
+    --cirth-muted-color: oklch(39.7% .025 264);
+    --cirth-secondary: oklch(39.7% .025 264);
+    --cirth-code-color: oklch(35.3% .021 264);
+    --cirth-link-visited-color: oklch(35.3% .021 264);
+    --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-form-element-border-color: oklch(39.7% .025 264);
+    --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
+    --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
+    --cirth-primary: oklch(39.7% .073 69.35);
+    --cirth-primary-hover: oklch(31% .057 69.35);
+    --cirth-primary-underline: var(--cirth-primary);
+    --cirth-secondary-underline: var(--cirth-secondary);
+    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-primary-focus: oklch(48.3% .089 69.35);
+    --cirth-secondary-focus: oklch(48.3% .03 264);
+    --cirth-contrast-focus: oklch(48.3% .03 264);
+    --cirth-switch-background-color: oklch(48.3% .03 264);
+    --cirth-progress-border-color: oklch(48.3% .03 264);
+    --cirth-meter-optimum-color: oklch(44% .084 160.59);
+    --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
+    --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
+  }
+}
+
+@media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
+  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
+    --cirth-color: oklch(96% 0 264);
+    --cirth-h1-color: var(--cirth-color);
+    --cirth-h2-color: var(--cirth-color);
+    --cirth-h3-color: var(--cirth-color);
+    --cirth-h4-color: var(--cirth-color);
+    --cirth-h5-color: var(--cirth-color);
+    --cirth-h6-color: var(--cirth-color);
+    --cirth-muted-color: oklch(78.7% .021 264);
+    --cirth-secondary: oklch(78.7% .021 264);
+    --cirth-code-color: oklch(83% .016 264);
+    --cirth-link-visited-color: oklch(78.7% .021 264);
+    --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-card-border-color: var(--cirth-muted-border-color);
+    --cirth-form-element-border-color: oklch(70% .028 264);
+    --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
+    --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
+    --cirth-primary: oklch(78.7% .146 69.35);
+    --cirth-primary-hover: oklch(87.3% .082 69.35);
+    --cirth-primary-underline: var(--cirth-primary);
+    --cirth-secondary-underline: var(--cirth-secondary);
+    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-primary-focus: oklch(70% .129 69.35);
+    --cirth-secondary-focus: oklch(70% .028 264);
+    --cirth-contrast-focus: oklch(87.3% .011 264);
+    --cirth-switch-background-color: oklch(65.7% .03 264);
+    --cirth-progress-border-color: oklch(70% .028 264);
+    --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
+    --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
+    --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
+  }
+}
+
+@media (prefers-contrast: more) {
+  :where([data-theme="dark"]) {
+    --cirth-color: oklch(96% 0 264);
+    --cirth-h1-color: var(--cirth-color);
+    --cirth-h2-color: var(--cirth-color);
+    --cirth-h3-color: var(--cirth-color);
+    --cirth-h4-color: var(--cirth-color);
+    --cirth-h5-color: var(--cirth-color);
+    --cirth-h6-color: var(--cirth-color);
+    --cirth-muted-color: oklch(78.7% .021 264);
+    --cirth-secondary: oklch(78.7% .021 264);
+    --cirth-code-color: oklch(83% .016 264);
+    --cirth-link-visited-color: oklch(78.7% .021 264);
+    --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-card-border-color: var(--cirth-muted-border-color);
+    --cirth-form-element-border-color: oklch(70% .028 264);
+    --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
+    --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
+    --cirth-primary: oklch(78.7% .146 69.35);
+    --cirth-primary-hover: oklch(87.3% .082 69.35);
+    --cirth-primary-underline: var(--cirth-primary);
+    --cirth-secondary-underline: var(--cirth-secondary);
+    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-primary-focus: oklch(70% .129 69.35);
+    --cirth-secondary-focus: oklch(70% .028 264);
+    --cirth-contrast-focus: oklch(87.3% .011 264);
+    --cirth-switch-background-color: oklch(65.7% .03 264);
+    --cirth-progress-border-color: oklch(70% .028 264);
+    --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
+    --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
+    --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
+  }
+}
+
+@media print {
+  :root, :host {
+    --cirth-print-color: oklch(0% 0 0);
+    --cirth-print-muted-color: oklch(48.3% .03 264);
+    --cirth-print-border-color: oklch(61.3% .032 264);
+  }
+
+  html {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    background: none;
+  }
+
+  body {
+    color: var(--cirth-print-color);
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    --cirth-color: var(--cirth-print-color);
+    --cirth-h1-color: var(--cirth-print-color);
+    --cirth-h2-color: var(--cirth-print-color);
+    --cirth-h3-color: var(--cirth-print-color);
+    --cirth-h4-color: var(--cirth-print-color);
+    --cirth-h5-color: var(--cirth-print-color);
+    --cirth-h6-color: var(--cirth-print-color);
+    --cirth-code-color: var(--cirth-print-color);
+    --cirth-code-kbd-color: var(--cirth-print-color);
+    --cirth-form-element-color: var(--cirth-print-color);
+    --cirth-muted-color: var(--cirth-print-muted-color);
+    --cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
+    --cirth-primary: var(--cirth-print-color);
+    --cirth-primary-hover: var(--cirth-print-color);
+    --cirth-primary-underline: var(--cirth-print-color);
+    --cirth-secondary: var(--cirth-print-color);
+    --cirth-secondary-underline: var(--cirth-print-color);
+    --cirth-contrast: var(--cirth-print-color);
+    --cirth-contrast-underline: var(--cirth-print-color);
+    --cirth-link-visited-color: var(--cirth-print-color);
+    --cirth-muted-border-color: var(--cirth-print-border-color);
+    --cirth-form-element-border-color: var(--cirth-print-border-color);
+    --cirth-box-shadow: none;
+    --cirth-card-box-shadow: none;
+    --cirth-card-background-color: transparent;
+    --cirth-card-sectioning-background-color: transparent;
+    --cirth-code-background-color: transparent;
+    --cirth-code-kbd-background-color: transparent;
+    --cirth-form-element-background-color: transparent;
+    --cirth-form-element-active-background-color: transparent;
+    --cirth-table-row-stripped-background-color: transparent;
+    --cirth-modal-overlay-background-color: transparent;
+    --cirth-ins-color: oklch(35.3% .067 160.59);
+    --cirth-del-color: oklch(35.3% .122 29.73);
+    --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
+    --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
+    --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
+    background: none;
+  }
+
+  kbd {
+    border: var(--cirth-border-width) solid var(--cirth-print-border-color);
+  }
+
+  :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+    border-color: var(--cirth-print-border-color);
+    box-shadow: none;
+    color: var(--cirth-print-color);
+    background: none;
+  }
+
+  [type="file"]::file-selector-button {
+    border-color: var(--cirth-print-border-color);
+    box-shadow: none;
+    color: var(--cirth-print-color);
+    background: none;
+  }
+
+  :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  a[href^="http"]:not([role="button"], nav a):after {
+    content: " (" attr(href) ")";
+    color: var(--cirth-print-muted-color);
+    font-size: var(--cirth-font-size-sm);
+    word-break: break-all;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tfoot {
+    display: table-footer-group;
+  }
+
+  tr {
+    break-inside: avoid;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    overflow: visible;
+  }
+
+  dialog {
+    backdrop-filter: none;
+    min-width: 0;
+    min-height: 0;
+    position: static;
+  }
+
+  dialog > article {
+    max-height: none;
+    overflow: visible;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    break-after: avoid;
+  }
+
+  :is(figure, img) {
+    break-inside: avoid;
+  }
+
+  :is(blockquote, li, p) {
+    orphans: 3;
+    widows: 3;
+  }
+}