@cirthcss/cirth 0.8.3 → 0.8.5

package/dist/cirth.scoped.css

@@ -723,52 +723,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);
 }
 
@@ -803,7 +803,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);
@@ -819,11 +819,11 @@
   display: block;
 }
 
-.cirth :where(input, select, textarea, fieldset, .row):is([aria-invalid="false"], :user-valid:not([aria-invalid])) + small {
+.cirth :where(input, select, textarea, fieldset, .row)[aria-invalid="false"] + small {
   color: var(--cirth-ins-color);
 }
 
-.cirth :where(input, select, textarea, fieldset, .row):is([aria-invalid="true"], :user-invalid:not([aria-invalid])) + small {
+.cirth :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);
 }
 
@@ -975,6 +975,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;
@@ -1025,9 +1026,9 @@
 }
 
 @supports not selector(::-webkit-calendar-picker-indicator) {
-  .cirth [type="date"], .cirth [type="datetime-local"], .cirth [type="month"], .cirth [type="time"], .cirth [type="week"] {
-    background-image: none;
-    padding-inline-end: var(--cirth-form-element-spacing-horizontal);
+  .cirth 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);
   }
 }
 
@@ -1355,7 +1356,7 @@
 
 .cirth nav details.dropdown {
   margin: calc(var(--cirth-nav-element-spacing-vertical) * -1) 0;
-  display: inline;
+  display: inline-block;
 }
 
 .cirth nav details.dropdown > summary:after {
@@ -1491,28 +1492,28 @@
   margin-bottom: 0;
 }
 
-.cirth [role="search"] > *, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]), .cirth [role="search"] select, .cirth .group > *, .cirth .group input:not([type="checkbox"], [type="radio"]), .cirth .group 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 .group > :not([hidden], input[type="hidden"]), .cirth .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]), .cirth .group 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 .group > :is(input, select, textarea), .cirth .group input:not([type="checkbox"], [type="radio"]):is(input, select, textarea), .cirth .group 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 .group > :not([hidden], input[type="hidden"]):is(input, select, textarea), .cirth .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):is(input, select, textarea), .cirth .group 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 .group > :not(:first-child), .cirth .group input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth .group 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 .group > :not([hidden], input[type="hidden"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth .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;
 }
 
-.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 .group > :not(:last-child), .cirth .group input:not([type="checkbox"], [type="radio"]):not(:last-child), .cirth .group 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 .group > :not([hidden], input[type="hidden"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .cirth .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):not(:nth-last-child(1 of :not([hidden], input[type="hidden"]))), .cirth .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;
 }
 
-.cirth [role="search"] > :focus, .cirth [role="search"] input:not([type="checkbox"], [type="radio"]):focus, .cirth [role="search"] select:focus, .cirth .group > :focus, .cirth .group input:not([type="checkbox"], [type="radio"]):focus, .cirth .group 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 .group > :not([hidden], input[type="hidden"]):focus, .cirth .group input:not([hidden], [type="checkbox"], [type="hidden"], [type="radio"]):focus, .cirth .group select:not([hidden]):focus {
   z-index: 2;
 }
 
@@ -1521,7 +1522,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 .group button:not(:first-child), .cirth .group [type="submit"]:not(:first-child), .cirth .group [type="reset"]:not(:first-child), .cirth .group [type="button"]:not(:first-child), .cirth .group [role="button"]:not(:first-child), .cirth .group input:not([type="checkbox"], [type="radio"]):not(:first-child), .cirth .group 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 .group button:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth .group [type="submit"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth .group [type="reset"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth .group [type="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth .group [role="button"]:not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth .group input:not([type="checkbox"], [type="radio"]):not(:nth-child(1 of :not([hidden], input[type="hidden"]))), .cirth .group select:not(:nth-child(1 of :not([hidden], input[type="hidden"]))) {
   margin-inline-start: calc(var(--cirth-border-width) * -1);
 }
 
@@ -1603,12 +1604,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);
 }