@cirthcss/cirth 0.8.4 → 0.9.0

package/dist/cirth.css

@@ -188,7 +188,7 @@ hgroup > :not(:first-child):last-child {
   margin-bottom: calc(var(--cirth-typography-spacing-vertical) * .25);
 }
 
-:where(dl, ol, ul) :where(dl, ol, ul) {
+:is(dl, ol, ul) :is(dl, ol, ul) {
   margin: 0;
   margin-top: calc(var(--cirth-typography-spacing-vertical) * .25);
 }
@@ -281,6 +281,10 @@ del {
   --cirth-underline: var(--cirth-contrast-hover-underline);
 }
 
+:where(a:not([role="button"])):visited:not(.secondary, .contrast, details.dropdown a, [aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a) {
+  color: var(--cirth-link-visited-color);
+}
+
 a[role="button"] {
   display: inline-block;
 }
@@ -300,6 +304,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --cirth-border-color: var(--cirth-primary-border);
   --cirth-color: var(--cirth-primary-inverse);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
+  max-width: 100%;
   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);
@@ -323,6 +328,7 @@ button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --cirth-border-color: var(--cirth-primary-border);
   --cirth-color: var(--cirth-primary-inverse);
   --cirth-box-shadow: var(--cirth-button-box-shadow, 0 0 0 #0000);
+  max-width: 100%;
   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);
@@ -726,52 +732,52 @@ label[aria-disabled="true"] input[disabled] {
   opacity: 1;
 }
 
-:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   padding-inline: var(--cirth-form-element-spacing-horizontal) calc(var(--cirth-form-element-spacing-horizontal) + var(--cirth-space-6));
   background-position: center right var(--cirth-space-3);
   background-size: var(--cirth-size-4) auto;
   background-repeat: no-repeat;
 }
 
-:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="false"], :user-valid:not([aria-invalid])):not(select) {
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"])[aria-invalid="false"]:not(select) {
   background-image: var(--cirth-icon-valid);
 }
 
-:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):not(select) {
+:where(input, select, textarea):not([type="checkbox"], [type="radio"], [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"], [type="range"]):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):not(select) {
   background-image: var(--cirth-icon-invalid);
 }
 
-:where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])) {
+:where(input, select, textarea)[aria-invalid="false"] {
   --cirth-border-color: var(--cirth-form-element-valid-border-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])):is(:active, :focus) {
+:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
   --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus):not([type="checkbox"], [type="radio"]) {
   --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
     var(--cirth-form-element-valid-focus-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) {
+:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   --cirth-border-color: var(--cirth-form-element-invalid-border-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):is(:active, :focus) {
+:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):is(:active, :focus) {
   --cirth-border-color: var(--cirth-form-element-invalid-active-border-color);
 }
 
-:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+:where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
   --cirth-box-shadow: 0 0 0 var(--cirth-outline-width)
     var(--cirth-form-element-invalid-focus-color);
 }
 
-[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+[dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   background-position: center left var(--cirth-space-3);
 }
 
-[dir="rtl"] textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+[dir="rtl"] textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   background-position: top left var(--cirth-space-3);
 }
 
@@ -806,7 +812,7 @@ textarea {
   display: block;
 }
 
-textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+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 +
       var(--cirth-border-width) * 2);
@@ -822,11 +828,11 @@ textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([
   display: block;
 }
 
-:where(input, select, textarea, fieldset, .row):is([aria-invalid="false"], :user-valid:not([aria-invalid])) + small {
+:where(input, select, textarea, fieldset, .row)[aria-invalid="false"] + small {
   color: var(--cirth-ins-color);
 }
 
-:where(input, select, textarea, fieldset, .row):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) + small {
+:where(input, select, textarea, fieldset, .row):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) + small {
   color: var(--cirth-del-color);
 }
 
@@ -978,6 +984,7 @@ label:has([type="checkbox"], [type="radio"]) {
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"]) {
   --cirth-icon-position: var(--cirth-space-3);
   --cirth-icon-width: var(--cirth-size-4);
+  min-width: 0;
   background-image: var(--cirth-icon-date);
   background-position: center right var(--cirth-icon-position);
   background-size: var(--cirth-icon-width) auto;
@@ -1358,7 +1365,7 @@ details.dropdown > summary:not([role])[aria-invalid="true"] {
 
 nav details.dropdown {
   margin: calc(var(--cirth-nav-element-spacing-vertical) * -1) 0;
-  display: inline;
+  display: inline-block;
 }
 
 nav details.dropdown > summary:after {
@@ -1494,28 +1501,28 @@ label > details.dropdown {
   margin-bottom: 0;
 }
 
-[role="search"] > *, [role="search"] input:not([type="checkbox"], [type="radio"]), [role="search"] select, .group > *, .group input:not([type="checkbox"], [type="radio"]), .group select {
+[role="search"] > :not([hidden], input[type="hidden"]), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]), [role="search"] select:not([hidden]), .group > :not([hidden], input[type="hidden"]), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]), .group select:not([hidden]) {
   flex: auto;
   margin-bottom: 0;
   position: relative;
 }
 
-[role="search"] > :is(input, select, textarea), [role="search"] input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), [role="search"] select:is(input, select, textarea), .group > :is(input, select, textarea), .group input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), .group select:is(input, select, textarea) {
+[role="search"] > :not([hidden], input[type="hidden"]):is(input, select, textarea), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea), [role="search"] select:not([hidden]):is(input, select, textarea), .group > :not([hidden], input[type="hidden"]):is(input, select, textarea), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea), .group select:not([hidden]):is(input, select, textarea) {
   flex: 99;
 }
 
-[role="search"] > :not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), .group > :not(:first-child), .group input:not([type="checkbox"], [type="radio"]):not(:first-child), .group select:not(:first-child) {
+[role="search"] > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] select:not([hidden]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group select:not([hidden]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))) {
   border-start-start-radius: 0;
   border-end-start-radius: 0;
   margin-inline-start: 0;
 }
 
-[role="search"] > :not(:last-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), [role="search"] select:not(:last-child), .group > :not(:last-child), .group input:not([type="checkbox"], [type="radio"]):not(:last-child), .group select:not(:last-child) {
+[role="search"] > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] select:not([hidden]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .group > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .group select:not([hidden]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 
-[role="search"] > :focus, [role="search"] input:not([type="checkbox"], [type="radio"]):focus, [role="search"] select:focus, .group > :focus, .group input:not([type="checkbox"], [type="radio"]):focus, .group select:focus {
+[role="search"] > :not([hidden], input[type="hidden"]):focus, [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus, [role="search"] select:not([hidden]):focus, .group > :not([hidden], input[type="hidden"]):focus, .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus, .group select:not([hidden]):focus {
   z-index: 2;
 }
 
@@ -1524,7 +1531,7 @@ label > details.dropdown {
   border-end-end-radius: var(--cirth-border-radius);
 }
 
-[role="search"] button:not(:first-child), [role="search"] [type="submit"]:not(:first-child), [role="search"] [type="reset"]:not(:first-child), [role="search"] [type="button"]:not(:first-child), [role="search"] [role="button"]:not(:first-child), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), [role="search"] select:not(:first-child), .group button:not(:first-child), .group [type="submit"]:not(:first-child), .group [type="reset"]:not(:first-child), .group [type="button"]:not(:first-child), .group [role="button"]:not(:first-child), .group input:not([type="checkbox"], [type="radio"]):not(:first-child), .group select:not(:first-child) {
+[role="search"] button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), [role="search"] select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .group select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))) {
   margin-inline-start: calc(var(--cirth-border-width) * -1);
 }
 
@@ -1606,12 +1613,12 @@ label > details.dropdown {
   }
 }
 
-[role="search"] > :first-child {
+[role="search"] > :not([hidden], input[type="hidden"]):nth-child(1 of :not([hidden], input[type="hidden"])) {
   border-start-start-radius: var(--cirth-radius-pill);
   border-end-start-radius: var(--cirth-radius-pill);
 }
 
-[role="search"] > :last-child {
+[role="search"] > :not([hidden], input[type="hidden"]):nth-last-child(1 of :not([hidden], input[type="hidden"])) {
   border-start-end-radius: var(--cirth-radius-pill);
   border-end-end-radius: var(--cirth-radius-pill);
 }
@@ -1654,6 +1661,10 @@ label > details.dropdown {
   text-align: center;
 }
 
+:is(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[aria-busy="true"] {
+  white-space: normal;
+}
+
 input:is([type="submit"], [type="button"], [type="reset"])[aria-busy="true"] {
   background-image: var(--cirth-icon-loading);
   background-position: center left var(--cirth-form-element-spacing-horizontal);
@@ -2420,6 +2431,10 @@ input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [
   --cirth-border-radius: var(--cirth-radius-pill);
 }
 
+.group [type="search"] {
+  --cirth-border-radius: inherit;
+}
+
 button, [type="submit"], [type="reset"], [type="button"], [role="button"] {
   --cirth-font-weight: var(--cirth-font-weight-semibold);
   --cirth-line-height: var(--cirth-line-height-relaxed);
@@ -2482,7 +2497,7 @@ details summary[role="button"]:not(.outline):after {
   --lightningcss-light: initial;
   --lightningcss-dark: ;
   color-scheme: light;
-  --cirth-background-color: oklch(97.4% .008 69.35);
+  --cirth-background-color: oklch(97.4% .004 69.35);
   --cirth-color: oklch(35.3% .021 264);
   --cirth-text-selection-color: oklch(65.7% .121 69.35 / .25);
   --cirth-muted-color: oklch(52.7% .032 264);
@@ -2517,13 +2532,14 @@ details summary[role="button"]:not(.outline):after {
   --cirth-contrast-hover-underline: var(--cirth-secondary-hover);
   --cirth-contrast-focus: oklch(48.3% .03 264 / .7);
   --cirth-contrast-inverse: oklch(100% 0 0);
+  --cirth-link-visited-color: oklch(48.3% .03 264);
   --cirth-box-shadow: .0145rem .029rem .174rem oklch(65.7% .03 264 / .01698), .0335rem .067rem .402rem oklch(65.7% .03 264 / .024), .0625rem .125rem .75rem oklch(65.7% .03 264 / .03), .1125rem .225rem 1.35rem oklch(65.7% .03 264 / .036), .2085rem .417rem 2.502rem oklch(65.7% .03 264 / .04302), .5rem 1rem 6rem oklch(65.7% .03 264 / .06), 0 0 0 .0625rem oklch(65.7% .03 264 / .015);
-  --cirth-h1-color: oklch(31% .016 264);
-  --cirth-h2-color: oklch(35.3% .021 264);
-  --cirth-h3-color: oklch(39.7% .025 264);
-  --cirth-h4-color: oklch(44% .028 264);
-  --cirth-h5-color: oklch(48.3% .03 264);
-  --cirth-h6-color: oklch(52.7% .032 264);
+  --cirth-h1-color: oklch(22.3% .006 264);
+  --cirth-h2-color: oklch(26.7% .011 264);
+  --cirth-h3-color: oklch(31% .016 264);
+  --cirth-h4-color: oklch(35.3% .021 264);
+  --cirth-h5-color: oklch(39.7% .025 264);
+  --cirth-h6-color: oklch(44% .028 264);
   --cirth-mark-background-color: oklch(93% .05 78);
   --cirth-mark-color: oklch(18% 0 264);
   --cirth-ins-color: oklch(35.3% .067 160.59);
@@ -2630,6 +2646,7 @@ details summary[role="button"]:not(.outline):after {
     --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
     --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
     --cirth-contrast-inverse: oklch(0% 0 0);
+    --cirth-link-visited-color: oklch(65.7% .03 264);
     --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
     --cirth-h1-color: oklch(96% 0 264);
     --cirth-h2-color: oklch(91.7% .006 264);
@@ -2747,6 +2764,7 @@ details summary[role="button"]:not(.outline):after {
   --cirth-contrast-hover-underline: var(--cirth-contrast-hover);
   --cirth-contrast-focus: oklch(87.3% .011 264 / .5);
   --cirth-contrast-inverse: oklch(0% 0 0);
+  --cirth-link-visited-color: oklch(65.7% .03 264);
   --cirth-box-shadow: .0145rem .029rem .174rem oklch(9% 0 312 / .01698), .0335rem .067rem .402rem oklch(9% 0 312 / .024), .0625rem .125rem .75rem oklch(9% 0 312 / .03), .1125rem .225rem 1.35rem oklch(9% 0 312 / .036), .2085rem .417rem 2.502rem oklch(9% 0 312 / .04302), .5rem 1rem 6rem oklch(9% 0 312 / .06), 0 0 0 .0625rem oklch(9% 0 312 / .015);
   --cirth-h1-color: oklch(96% 0 264);
   --cirth-h2-color: oklch(91.7% .006 264);