@cirthcss/cirth 0.8.3 → 0.8.5

package/dist/cirth.css

@@ -726,52 +726,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 +806,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 +822,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 +978,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;
@@ -1028,9 +1029,9 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 }
 
 @supports not selector(::-webkit-calendar-picker-indicator) {
-  [type="date"], [type="datetime-local"], [type="month"], [type="time"], [type="week"] {
-    background-image: none;
-    padding-inline-end: var(--cirth-form-element-spacing-horizontal);
+  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is([type="date"], [type="datetime-local"]) {
+    color: #0000;
+    -webkit-text-fill-color: var(--cirth-form-element-color);
   }
 }
 
@@ -1358,7 +1359,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 +1495,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 +1525,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 +1607,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);
 }