@leftium/nimble.css 0.2.0 → 0.4.0

package/src/_forms.scss

@@ -41,7 +41,7 @@
 
   // When a validation message <small> immediately follows an input,
   // pull it up tight against the field and let it carry the spacing instead.
-  :where(input, select, textarea) + :where(small) {
+  :where(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) + :where(small) {
     display: block;
     margin-top: calc(var(#{$prefix}spacing) * -0.75); // pull up under the input
     margin-bottom: var(#{$prefix}spacing);
@@ -60,11 +60,11 @@
   }
 
   // Color validation messages to match the field state
-  :where(input, select, textarea)[aria-invalid="false"] + :where(small) {
+  :where(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea)[aria-invalid="false"] + :where(small) {
     color: var(#{$prefix}valid);
   }
 
-  :where(input, select, textarea)[aria-invalid="true"] + :where(small) {
+  :where(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea)[aria-invalid="true"] + :where(small) {
     color: var(#{$prefix}invalid);
   }
 
@@ -79,6 +79,12 @@
     font-weight: 600;
   }
 
+  // file and range are short/inline controls — increase the label gap to match
+  // the visual weight of the spacing above and beside them.
+  :where(label:has(+ [type="file"], + [type="range"])) {
+    margin-bottom: 0.5em;
+  }
+
   // ----- Fieldset -----
 
   :where(fieldset) {
@@ -108,13 +114,20 @@
     display: flex;
     align-items: center;
     gap: 0.35em;
-    margin-bottom: var(#{$prefix}spacing);
+    margin-bottom: 0.5em;
   }
 
-  // Radio options in a group sit close together; only the last one
-  // carries the full field-gap to the next element.
-  :where(label:has([type="radio"])) {
-    margin-bottom: 0.35em;
+  // Last checkbox/radio label in a group drops its bottom margin
+  // so the parent element controls spacing to the next sibling.
+  :where(label:has([type="checkbox"], [type="radio"]):last-child) {
+    margin-bottom: 0;
+  }
+
+  // ----- Search (pill shape) -----
+
+  :where([type="search"]) {
+    border-radius: 5rem;
+    padding-inline: 1.25em;
   }
 
   // ----- Range -----
@@ -122,6 +135,7 @@
   :where([type="range"]) {
     accent-color: var(#{$prefix}primary);
     width: 100%;
+    margin-bottom: var(#{$prefix}spacing);
   }
 
   // ----- Datalist-connected inputs -----
@@ -139,6 +153,7 @@
     font: inherit;
     cursor: pointer;
     max-width: 100%; // Prevent native file input from overflowing container (iOS Safari)
+    margin-bottom: var(#{$prefix}spacing);
   }
 
   :where([type="file"])::file-selector-button {
@@ -171,6 +186,7 @@
 
   :where([type="color"]) {
     --_color-size: calc(1em * 1.5 + 1em + 2px); // Match text input height
+    margin-bottom: var(#{$prefix}spacing);
 
     --_color-pad: 0.25em;
 
@@ -198,7 +214,7 @@
     // Minimal switch styling — relies on native checkbox with role="switch"
     // Browsers with :has() support get enhanced label alignment
     :where(label:has([type="checkbox"][role="switch"])) {
-      display: inline-flex;
+      display: flex;
       align-items: center;
       gap: 0.5em;
     }

package/src/_select.scss

@@ -26,6 +26,9 @@
 
     // Drop-down picker
     :where(select)::picker(select) {
+      position-area: block-end;
+      position-try-order: normal;
+      position-try-fallbacks: flip-block;
       border: 1px solid var(#{$prefix}border);
       border-radius: var(#{$prefix}radius);
       background-color: var(#{$prefix}surface-1);

package/src/nimble-core.scss

@@ -22,6 +22,7 @@
 @use 'tables';
 @use 'code';
 @use 'media';
+@use 'article';
 @use 'details';
 @use 'dialog';
 @use 'print';

package/src/nimble.scss

@@ -22,6 +22,7 @@
 @use 'tables';
 @use 'code';
 @use 'media';
+@use 'article';
 @use 'details';
 @use 'dialog';
 @use 'print';