@cirthcss/cirth 0.8.4 → 0.9.0

package/dist/cirth.classless.scoped.css

@@ -136,7 +136,7 @@
   margin-bottom: calc(var(--cirth-typography-spacing-vertical) * .25);
 }
 
-.cirth :where(dl, ol, ul) :where(dl, ol, ul) {
+.cirth :is(dl, ol, ul) :is(dl, ol, ul) {
   margin: 0;
   margin-top: calc(var(--cirth-typography-spacing-vertical) * .25);
 }
@@ -209,6 +209,10 @@
   outline: var(--cirth-outline-width) solid transparent;
 }
 
+.cirth :where(a:not([role="button"])):visited:not([aria-current]:not([aria-current="false"]), :hover, :active, :focus, nav a) {
+  color: var(--cirth-link-visited-color);
+}
+
 .cirth a[role="button"] {
   display: inline-block;
 }
@@ -228,6 +232,7 @@
   --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);
@@ -251,6 +256,7 @@
   --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);
@@ -596,52 +602,52 @@
   opacity: 1;
 }
 
-.cirth :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])) {
+.cirth :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;
 }
 
-.cirth :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) {
+.cirth :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);
 }
 
-.cirth :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) {
+.cirth :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);
 }
 
-.cirth :where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])) {
+.cirth :where(input, select, textarea)[aria-invalid="false"] {
   --cirth-border-color: var(--cirth-form-element-valid-border-color);
 }
 
-.cirth :where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])):is(:active, :focus) {
+.cirth :where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) {
   --cirth-border-color: var(--cirth-form-element-valid-active-border-color);
 }
 
-.cirth :where(input, select, textarea):is([aria-invalid="false"], :user-valid:not([aria-invalid])):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+.cirth :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);
 }
 
-.cirth :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) {
+.cirth :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);
 }
 
-.cirth :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):is(:active, :focus) {
+.cirth :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);
 }
 
-.cirth :where(input, select, textarea):is([aria-invalid="true"], :user-invalid:not([aria-invalid])):is(:active, :focus):not([type="checkbox"], [type="radio"]) {
+.cirth :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"] .cirth :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+[dir="rtl"] .cirth :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"] .cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+[dir="rtl"] .cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) {
   background-position: top left var(--cirth-space-3);
 }
 
@@ -676,7 +682,7 @@
   display: block;
 }
 
-.cirth textarea:is([aria-invalid], :user-invalid:not([aria-invalid]), :user-valid:not([aria-invalid])) {
+.cirth 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);
@@ -692,11 +698,11 @@
   display: block;
 }
 
-.cirth :where(input, select, textarea, fieldset):is([aria-invalid="false"], :user-valid:not([aria-invalid])) + small {
+.cirth :where(input, select, textarea, fieldset)[aria-invalid="false"] + small {
   color: var(--cirth-ins-color);
 }
 
-.cirth :where(input, select, textarea, fieldset):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) + small {
+.cirth :where(input, select, textarea, fieldset):is([aria-invalid="true"], :user-invalid:not([aria-invalid], [type="range"]):not(select:focus)) + small {
   color: var(--cirth-del-color);
 }
 
@@ -848,6 +854,7 @@
 .cirth 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;
@@ -1183,28 +1190,28 @@
   margin-bottom: 0;
 }
 
-.cirth [role="search"] > *, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]), .cirth [role="search"] select, .cirth [role="group"]:not(fieldset) > *, .cirth [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]), .cirth [role="group"]:not(fieldset) select {
+.cirth [role="search"] > :not([hidden], input[type="hidden"]), .cirth [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]), .cirth [role="search"] select:not([hidden]), .cirth [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]), .cirth [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]), .cirth [role="group"]:not(fieldset) select:not([hidden]) {
   flex: auto;
   margin-bottom: 0;
   position: relative;
 }
 
-.cirth [role="search"] > :is(input, select, textarea), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), .cirth [role="search"] select:is(input, select, textarea), .cirth [role="group"]:not(fieldset) > :is(input, select, textarea), .cirth [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), .cirth [role="group"]:not(fieldset) select:is(input, select, textarea) {
+.cirth [role="search"] > :not([hidden], input[type="hidden"]):is(input, select, textarea), .cirth [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea), .cirth [role="search"] select:not([hidden]):is(input, select, textarea), .cirth [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]):is(input, select, textarea), .cirth [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea), .cirth [role="group"]:not(fieldset) select:not([hidden]):is(input, select, textarea) {
   flex: 99;
 }
 
-.cirth [role="search"] > :not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"]:not(fieldset) > :not(:first-child), .cirth [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="group"]:not(fieldset) select:not(:first-child) {
+.cirth [role="search"] > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] select:not([hidden]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) 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;
 }
 
-.cirth [role="search"] > :not(:last-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="search"] select:not(:last-child), .cirth [role="group"]:not(fieldset) > :not(:last-child), .cirth [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth [role="group"]:not(fieldset) select:not(:last-child) {
+.cirth [role="search"] > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] select:not([hidden]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) select:not([hidden]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
 
-.cirth [role="search"] > :focus, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="search"] select:focus, .cirth [role="group"]:not(fieldset) > :focus, .cirth [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="group"]:not(fieldset) select:focus {
+.cirth [role="search"] > :not([hidden], input[type="hidden"]):focus, .cirth [role="search"] input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus, .cirth [role="search"] select:not([hidden]):focus, .cirth [role="group"]:not(fieldset) > :not([hidden], input[type="hidden"]):focus, .cirth [role="group"]:not(fieldset) input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus, .cirth [role="group"]:not(fieldset) select:not([hidden]):focus {
   z-index: 2;
 }
 
@@ -1218,7 +1225,7 @@
   border-end-end-radius: var(--cirth-border-radius);
 }
 
-.cirth [role="search"] button:not(:first-child), .cirth [role="search"] [type="submit"]:not(:first-child), .cirth [role="search"] [type="reset"]:not(:first-child), .cirth [role="search"] [type="button"]:not(:first-child), .cirth [role="search"] [role="button"]:not(:first-child), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="search"] select:not(:first-child), .cirth [role="group"]:not(fieldset) button:not(:first-child), .cirth [role="group"]:not(fieldset) [type="submit"]:not(:first-child), .cirth [role="group"]:not(fieldset) [type="reset"]:not(:first-child), .cirth [role="group"]:not(fieldset) [type="button"]:not(:first-child), .cirth [role="group"]:not(fieldset) [role="button"]:not(:first-child), .cirth [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth [role="group"]:not(fieldset) select:not(:first-child) {
+.cirth [role="search"] button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="search"] select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth [role="group"]:not(fieldset) select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))) {
   margin-inline-start: calc(var(--cirth-border-width) * -1);
 }
 
@@ -1320,12 +1327,12 @@
   }
 }
 
-.cirth [role="search"] > :first-child {
+.cirth [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);
 }
 
-.cirth [role="search"] > :last-child {
+.cirth [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);
 }
@@ -1368,6 +1375,10 @@
   text-align: center;
 }
 
+.cirth :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"])[aria-busy="true"] {
+  white-space: normal;
+}
+
 .cirth 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);
@@ -2055,6 +2066,10 @@
   --cirth-border-radius: var(--cirth-radius-pill);
 }
 
+.cirth [role="group"]:not(fieldset) [type="search"] {
+  --cirth-border-radius: inherit;
+}
+
 .cirth button, .cirth [type="submit"], .cirth [type="reset"], .cirth [type="button"], .cirth [role="button"] {
   --cirth-font-weight: var(--cirth-font-weight-semibold);
   --cirth-line-height: var(--cirth-line-height-relaxed);
@@ -2093,7 +2108,7 @@
   --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);
@@ -2128,13 +2143,14 @@
   --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);
@@ -2236,6 +2252,7 @@
     --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);
@@ -2344,6 +2361,7 @@
   --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);