antagonist controls

packages/website/src/components/TextField/index.module.css

@@ -29,6 +29,24 @@
     }
   }
 
+  &[data-size="minor"] {
+    gap: var(--space-1);
+    font-size: var(--font-size-minor);
+
+    &[data-variant="bubble"] input {
+      padding: var(--space-2) var(--space-3);
+    }
+
+    &[data-variant="form"] input {
+      padding: var(--space-1);
+    }
+
+    /* the icon's gap already separates it from the input */
+    &[data-has-icon="true"] input {
+      padding-left: 0;
+    }
+  }
+
   &[data-has-icon="true"] {
     padding-left: var(--space-3);
 
@@ -37,6 +55,10 @@
     }
   }
 
+  &[data-has-suffix="true"] {
+    padding-right: var(--space-3);
+  }
+
   &:focus-within {
     outline: var(--outline-focus);
     box-shadow: var(--shadow-focus);
@@ -60,6 +82,7 @@
 
   input {
     min-width: 0;
+    width: auto;
     flex: 1;
 
     background: none;
@@ -84,5 +107,9 @@
     &[data-align="right"] {
       text-align: right;
     }
+
+    &[data-auto-width="true"] {
+      field-sizing: content;
+    }
   }
 }