@auronui/styles 1.0.16 → 1.0.17

package/components/input.css

@@ -1,5 +1,5 @@
 .input {
-  @apply flex items-center gap-2 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none sm:text-xs;
+  @apply flex items-center gap-2 rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none sm:text-xs;
 
   /* Default size - matches input--md (height equivalent to h-9) */
   height: 2.25rem;
@@ -175,19 +175,27 @@
 /* ─── Size modifiers ─────────────────────────────────────────────────────────── */
 
 .input--sm {
-  @apply text-xs px-2 py-1;
+  @apply text-xs;
   height: 1.75rem;
 }
 
+.input--sm .input__input {
+  padding: 0.25rem 0.5rem;
+}
+
 .input--md {
   /* No styles — md is the default size defined on .input base */
 }
 
 .input--lg {
-  @apply text-base px-4 py-2.5;
+  @apply text-base;
   height: 2.75rem;
 }
 
+.input--lg .input__input {
+  padding: 0.625rem 1rem;
+}
+
 /* ─── Color modifiers ────────────────────────────────────────────────────────── */
 
 .input--default {
@@ -297,32 +305,45 @@
 /* ─── Slots ──────────────────────────────────────────────────────────────────── */
 
 .input__input {
-  @apply flex-1 bg-transparent outline-none border-0 p-0 h-auto text-inherit;
+  @apply flex-1 bg-transparent outline-none border-0 text-inherit;
   @apply placeholder:text-field-placeholder;
+  align-self: stretch;
+  padding: 0.5rem 0.75rem;
+  border-radius: inherit;
 
   &:focus,
   &:focus-visible {
     outline: none;
     box-shadow: none;
   }
+}
 
-  /* Suppress browser autofill background — use inset shadow to paint over it */
-  &:-webkit-autofill,
-  &:-webkit-autofill:hover,
-  &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
-    box-shadow: 0 0 0px 1000px var(--color-field) inset;
-    -webkit-text-fill-color: var(--color-field-foreground);
-    caret-color: var(--color-field-foreground);
-  }
+/* Underlined: no horizontal padding on the input — underline spans edge-to-edge */
+.input--underlined .input__input {
+  padding-left: 0;
+  padding-right: 0;
 }
 
-.input__start-content,
+.input__start-content {
+  @apply inline-flex items-center justify-center shrink-0;
+  color: var(--color-field-placeholder);
+  padding-left: 0.75rem;
+}
+
+.input--sm .input__start-content { padding-left: 0.5rem; }
+.input--lg .input__start-content { padding-left: 1rem; }
+.input--underlined .input__start-content { padding-left: 0; }
+
 .input__end-content {
   @apply inline-flex items-center justify-center shrink-0;
   color: var(--color-field-placeholder);
+  padding-right: 0.75rem;
 }
 
+.input--sm .input__end-content { padding-right: 0.5rem; }
+.input--lg .input__end-content { padding-right: 1rem; }
+.input--underlined .input__end-content { padding-right: 0; }
+
 .input__start-content svg,
 .input__end-content svg {
   @apply size-4;
@@ -406,26 +427,27 @@
   transform: translateY(-110%) scale(0.85);
 }
 
-/* Start-content pushes the label's left anchor so it doesn't overlap the icon */
+/* Start-content pushes the label's left anchor so it doesn't overlap the icon.
+   Formula: start-content-pl + icon(1rem) + gap + input-pl */
 .input--label-inside:has(> .input__start-content) .input__label {
-  left: calc(0.75rem + 1rem + 0.5rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(0.75rem + 1rem + 0.5rem + 0.75rem); /* start-content-pl + size-4 + gap-2 + input-pl */
 }
 .input--label-inside.input--underlined:has(> .input__start-content) .input__label {
-  left: calc(1rem + 0.5rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(1rem + 0.5rem); /* icon + gap-2 (underlined has no pl on start-content or input) */
 }
 
 /* Size-aware offsets for the inside variant */
 .input--label-inside.input--sm .input__label {
   font-size: var(--text-xs, 0.75rem);
-  left: 0.5rem; /* matches .input--sm px-2 */
+  left: 0.5rem; /* matches input--sm input pl-2 */
 }
 
 .input--label-inside.input--sm:has(> .input__start-content) .input__label {
-  left: calc(0.5rem + 1rem + 0.4rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(0.5rem + 1rem + 0.4rem + 0.5rem); /* start-content-pl + size-4 + gap + input-pl */
 }
 
 .input--label-inside.input--underlined.input--sm:has(> .input__start-content) .input__label {
-  left: calc(1rem + 0.4rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(1rem + 0.4rem); /* icon + gap (underlined has no pl) */
 }
 
 .input--label-inside.input--sm .input__input {
@@ -439,14 +461,14 @@
 
 .input--label-inside.input--lg .input__label {
   font-size: var(--text-base, 1rem);
-  left: 1rem; /* matches .input--lg px-4 */
+  left: 1rem; /* matches input--lg input pl-4 */
 }
 .input--label-inside.input--lg:has(> .input__start-content) .input__label {
-  left: calc(1rem + 1rem + 1rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(1rem + 1rem + 1rem + 1rem); /* start-content-pl + size-4 + gap-4 + input-pl */
 }
 
 .input--label-inside.input--underlined.input--lg:has(> .input__start-content) .input__label {
-  left: calc(1rem + 1rem); /* px-3 + size-4 icon + gap-2 */
+  left: calc(1rem + 1rem); /* icon + gap-4 (underlined has no pl) */
 }
 
 .input--label-inside.input--lg .input__input {
@@ -539,7 +561,8 @@
 .input__clear-button,
 .input__password-toggle {
   @apply inline-flex items-center justify-center shrink-0;
-  @apply bg-transparent border-0 p-0 cursor-pointer outline-none;
+  @apply bg-transparent border-0 cursor-pointer outline-none;
+  padding: 0 0.75rem 0 0;
   color: var(--color-field-placeholder);
   transition:
     color 300ms var(--ease-smooth),
@@ -552,17 +575,32 @@
   @apply size-4;
 }
 
+.input--sm .input__clear-button,
+.input--sm .input__password-toggle {
+  padding-right: 0.5rem;
+}
+
 .input--sm .input__clear-button svg,
 .input--sm .input__password-toggle svg {
   width: 0.875rem;
   height: 0.875rem;
 }
 
+.input--lg .input__clear-button,
+.input--lg .input__password-toggle {
+  padding-right: 1rem;
+}
+
 .input--lg .input__clear-button svg,
 .input--lg .input__password-toggle svg {
   @apply size-5;
 }
 
+.input--underlined .input__clear-button,
+.input--underlined .input__password-toggle {
+  padding-right: 0;
+}
+
 @media (hover: hover) {
   .input__clear-button:hover,
   .input__password-toggle:hover,

package/components/textarea.css

@@ -1,6 +1,6 @@
 /* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */
 .textarea {
-  @apply flex items-start gap-2 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none sm:text-xs;
+  @apply flex items-start gap-2 rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none sm:text-xs;
 
   border-width: var(--border-width-field);
   border-color: var(--color-field-border);
@@ -124,7 +124,7 @@
 
 .textarea--underlined {
   /* Bottom border only — always-visible underline */
-  @apply rounded-none shadow-none bg-transparent !px-0;
+  @apply rounded-none shadow-none bg-transparent;
   border-top: none;
   border-left: none;
   border-right: none;
@@ -174,7 +174,11 @@
 /* ─── Size modifiers ─────────────────────────────────────────────────────────── */
 
 .textarea--sm {
-  @apply text-xs px-2 py-1;
+  @apply text-xs;
+}
+
+.textarea--sm .textarea__input {
+  padding: 0.25rem 0.5rem;
 }
 
 .textarea--md {
@@ -182,7 +186,11 @@
 }
 
 .textarea--lg {
-  @apply text-base px-4 py-2.5;
+  @apply text-base;
+}
+
+.textarea--lg .textarea__input {
+  padding: 0.625rem 1rem;
 }
 
 /* ─── Color modifiers ────────────────────────────────────────────────────────── */
@@ -284,9 +292,11 @@
 /* ─── Slots ──────────────────────────────────────────────────────────────────── */
 
 .textarea__input {
-  @apply flex-1 bg-transparent outline-none border-0 p-0 text-inherit resize-none;
+  @apply flex-1 bg-transparent outline-none border-0 text-inherit resize-none;
   @apply placeholder:text-field-placeholder;
   min-height: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: inherit;
 
   &:focus,
   &:focus-visible {
@@ -297,20 +307,41 @@
   &:-webkit-autofill,
   &:-webkit-autofill:hover,
   &:-webkit-autofill:focus {
-    -webkit-box-shadow: 0 0 0px 1000px var(--color-field) inset;
-    box-shadow: 0 0 0px 1000px var(--color-field) inset;
+    -webkit-box-shadow: 0 0 0px 1000px color-mix(in oklch, #006fee 8%, var(--color-field, white)) inset;
+    box-shadow: 0 0 0px 1000px color-mix(in oklch, #006fee 8%, var(--color-field, white)) inset;
     -webkit-text-fill-color: var(--color-field-foreground);
     caret-color: var(--color-field-foreground);
   }
 }
 
-.textarea__start-content,
+.textarea--underlined .textarea__input {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.textarea__start-content {
+  @apply inline-flex items-center justify-center shrink-0;
+  color: var(--color-field-placeholder);
+  padding-top: 0.125rem;
+  padding-left: 0.75rem;
+}
+
 .textarea__end-content {
   @apply inline-flex items-center justify-center shrink-0;
   color: var(--color-field-placeholder);
   padding-top: 0.125rem;
+  padding-right: 0.75rem;
 }
 
+.textarea--sm .textarea__start-content { padding-left: 0.5rem; }
+.textarea--lg .textarea__start-content { padding-left: 1rem; }
+
+.textarea--sm .textarea__end-content { padding-right: 0.5rem; }
+.textarea--lg .textarea__end-content { padding-right: 1rem; }
+
+.textarea--underlined .textarea__start-content { padding-left: 0; }
+.textarea--underlined .textarea__end-content { padding-right: 0; }
+
 .textarea__start-content svg,
 .textarea__end-content svg {
   @apply size-4;
@@ -333,6 +364,9 @@
 
 .textarea--label-inside {
   position: relative;
+}
+
+.textarea--label-inside .textarea__input {
   padding-top: 1.5rem;
 }
 
@@ -372,7 +406,7 @@
 }
 
 .textarea--label-inside:has(> .textarea__start-content) .textarea__label {
-  left: calc(0.75rem + 1rem + 0.5rem);
+  left: calc(0.75rem + 1rem + 0.5rem + 0.75rem);
 }
 .textarea--label-inside.textarea--underlined:has(> .textarea__start-content) .textarea__label {
   left: calc(1rem + 0.5rem);
@@ -384,7 +418,7 @@
 }
 
 .textarea--label-inside.textarea--sm:has(> .textarea__start-content) .textarea__label {
-  left: calc(0.5rem + 1rem + 0.4rem);
+  left: calc(0.5rem + 1rem + 0.4rem + 0.5rem);
 }
 
 .textarea--label-inside.textarea--underlined.textarea--sm:has(> .textarea__start-content) .textarea__label {
@@ -396,7 +430,7 @@
   left: 1rem;
 }
 .textarea--label-inside.textarea--lg:has(> .textarea__start-content) .textarea__label {
-  left: calc(1rem + 1rem + 1rem);
+  left: calc(1rem + 1rem + 1rem + 1rem);
 }
 
 .textarea--label-inside.textarea--underlined.textarea--lg:has(> .textarea__start-content) .textarea__label {
@@ -482,7 +516,8 @@
 
 .textarea__clear-button {
   @apply inline-flex items-center justify-center shrink-0;
-  @apply bg-transparent border-0 p-0 cursor-pointer outline-none;
+  @apply bg-transparent border-0 cursor-pointer outline-none;
+  padding: 0 0.75rem 0 0;
   color: var(--color-field-placeholder);
   transition:
     color 300ms var(--ease-smooth),
@@ -494,6 +529,18 @@
   @apply size-4;
 }
 
+.textarea--sm .textarea__clear-button {
+  padding-right: 0.5rem;
+}
+
+.textarea--lg .textarea__clear-button {
+  padding-right: 1rem;
+}
+
+.textarea--underlined .textarea__clear-button {
+  padding-right: 0;
+}
+
 .textarea--sm .textarea__clear-button svg {
   width: 0.875rem;
   height: 0.875rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auronui/styles",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "description": "Auron core styles — adapted for Reka UI",
   "type": "module",
   "license": "MIT",