@cirthcss/cirth 0.9.0 → 0.10.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.9.0/dist/cirth.min.css"
-  integrity="sha384-GcsDrZOEcXva08eOmuqAN405xtTxYjeaLGAJWQwIDzwHLPGiAngOnCO0PK8xs/MR"
+  href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.10.0/dist/cirth.min.css"
+  integrity="sha384-eryxoPjA1vogVlspjzxHv7EDws0Ns2llZpU+nFSO6MKh58+TqPrpTxm/nBZcjAuE"
   crossorigin="anonymous">
 ```
 
@@ -247,13 +247,16 @@ npm run docs:dev
   [Dropdown](docs/src/pages/components/dropdown.md) ·
   [Group](docs/src/pages/components/group.md) ·
   [Loading](docs/src/pages/components/loading.md) ·
+  [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)
 - **Utilities** —
   [Accessibility](docs/src/pages/utilities/accessibility.md) ·
-  [Reduce motion](docs/src/pages/utilities/reduce-motion.md)
+  [High contrast](docs/src/pages/utilities/high-contrast.md) ·
+  [Reduce motion](docs/src/pages/utilities/reduce-motion.md) ·
+  [Print](docs/src/pages/utilities/print.md)
 - **Project** —
   [Examples](docs/src/pages/examples.md) ·
   [Contributions](docs/src/pages/contributions.md) ·

package/dist/cirth.classless.css

@@ -1398,6 +1398,50 @@ button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][ari
   pointer-events: none;
 }
 
+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);
+}
+
 :root, :host {
   --cirth-scrollbar-width: 0px;
 }
@@ -1965,6 +2009,8 @@ 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-modal-overlay-backdrop-filter: blur(.375rem);
   --cirth-nav-element-spacing-vertical: var(--cirth-space-4);
   --cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
@@ -2107,7 +2153,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,6 +2248,9 @@ 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);
@@ -2211,12 +2260,12 @@ details summary[role="button"]:after {
   --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");
 }
 
-[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,6 +2360,9 @@ 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);
@@ -2320,12 +2372,12 @@ details summary[role="button"]:after {
     --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");
   }
 
-  :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,6 +2472,9 @@ 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);
@@ -2429,10 +2484,244 @@ details summary[role="button"]:after {
   --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");
 }
 
-[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 {
+    -webkit-backdrop-filter: none;
+    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;
+  }
+}