@ivds/core 0.1.1 → 1.1.0

package/lib/components/text-input/_text-input-mixin.scss

@@ -0,0 +1,233 @@
+// Text input component mixins and private styles
+/* stylelint-disable no-descending-specificity */
+
+@use '../../base/focus' as *;
+
+@mixin text-input-base {
+  // Per-component CSS variable API
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-strong, #a1adba);
+  --border-width: 2px;
+  --border-radius: var(--ivds-radius-s, 0.125rem);
+  --color: var(--ivds-text-primary, #121a24);
+  --placeholder-color: var(--ivds-text-muted, #4d5968);
+  --focus-border-color: var(--color-brand-accent-600, #1058b8);
+  --hover-border-color: var(--color-semantic-neutral-600, #4d5968);
+  --disabled-background-color: var(--ivds-surface-muted, #f1f3f5);
+  --disabled-border-color: var(--ivds-border-subtle, #e2e7ec);
+  --disabled-color: var(--ivds-text-muted, #4d5968);
+  --error-border-color: var(--color-semantic-error-500, #d73a50);
+  --success-border-color: var(--color-semantic-success-500, #19895d);
+
+  display: block;
+  width: 100%;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-base, 1rem);
+  line-height: var(--lineHeight-normal, 1.5);
+  transition:
+    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),
+    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
+
+  &::placeholder {
+    color: var(--placeholder-color);
+  }
+
+  &:hover:not(:disabled, :focus) {
+    border-color: var(--hover-border-color);
+  }
+
+  &:focus {
+    outline: none;
+    border-color: var(--focus-border-color);
+  }
+
+  @include focus-ring;
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--disabled-color);
+    border-color: var(--disabled-border-color);
+    background-color: var(--disabled-background-color);
+  }
+}
+
+@mixin text-input-size($padding-y, $padding-x, $font-size, $min-height: null) {
+  padding: $padding-y $padding-x;
+  font-size: $font-size;
+
+  @if $min-height {
+    min-height: $min-height;
+  }
+}
+
+@mixin text-input-wrapper {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2, 0.5rem);
+}
+
+@mixin text-input-label {
+  display: block;
+  margin-bottom: var(--spacing-1, 0.25rem);
+  color: var(--ivds-text-primary, #121a24);
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-semibold, 600);
+}
+
+@mixin text-input-helper {
+  margin-top: var(--spacing-1, 0.25rem);
+  color: var(--ivds-text-muted, #4d5968);
+  font-size: var(--fontSize-xs, 0.75rem);
+}
+
+@mixin text-input-error-msg {
+  margin-top: var(--spacing-1, 0.25rem);
+  color: var(--color-semantic-error-600, #b72a41);
+  font-size: var(--fontSize-xs, 0.75rem);
+  font-weight: var(--fontWeight-medium, 500);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1, 0.25rem);
+}
+
+@mixin text-input-error {
+  @include text-input-error-msg;
+}
+
+@mixin text-input-required {
+  &::after {
+    content: ' *';
+    color: var(--color-semantic-error-500, #d73a50);
+  }
+}
+
+@mixin text-input-with-icon($position: 'left', $icon-size: 1.125rem) {
+  position: relative;
+
+  .ivds-text-input__icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: $icon-size;
+    height: $icon-size;
+    color: var(--ivds-text-muted, #4d5968);
+    pointer-events: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    @if $position == 'left' {
+      left: var(--spacing-3, 0.75rem);
+    } @else {
+      right: var(--spacing-3, 0.75rem);
+    }
+  }
+
+  .ivds-text-input {
+    @if $position == 'left' {
+      padding-left: calc(#{$icon-size} + var(--spacing-6, 1.5rem));
+    } @else {
+      padding-right: calc(#{$icon-size} + var(--spacing-6, 1.5rem));
+    }
+  }
+}
+
+@mixin text-input-with-icon-left($icon-size: 1.125rem) {
+  @include text-input-with-icon('left', $icon-size);
+}
+
+@mixin text-input-with-icon-right($icon-size: 1.125rem) {
+  @include text-input-with-icon('right', $icon-size);
+}
+
+@mixin text-input-group {
+  display: flex;
+  align-items: stretch;
+
+  .ivds-text-input {
+    flex: 1;
+    border-radius: 0;
+
+    &:first-child {
+      border-top-left-radius: var(--ivds-radius-s, 0.125rem);
+      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--ivds-radius-s, 0.125rem);
+      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);
+    }
+
+    &:not(:first-child) {
+      border-left-width: 0;
+    }
+  }
+
+  .ivds-text-input__addon {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--spacing-3, 0.75rem);
+    background-color: var(--ivds-surface-muted, #f1f3f5);
+    border: 2px solid var(--ivds-border-strong, #a1adba);
+    color: var(--ivds-text-secondary, #36414f);
+    font-size: var(--fontSize-sm, 0.875rem);
+    white-space: nowrap;
+
+    &:first-child {
+      border-right-width: 0;
+      border-top-left-radius: var(--ivds-radius-s, 0.125rem);
+      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);
+    }
+
+    &:last-child {
+      border-left-width: 0;
+      border-top-right-radius: var(--ivds-radius-s, 0.125rem);
+      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);
+    }
+  }
+}
+
+@mixin text-input-state-error {
+  .ivds-text-input {
+    border-color: var(--color-semantic-error-500, #d73a50);
+
+    &:focus-visible {
+      outline-color: var(--color-semantic-error-500, #d73a50);
+    }
+  }
+
+  .ivds-text-input__label {
+    color: var(--color-semantic-error-700, #922036);
+  }
+}
+
+@mixin text-input-state($border-color, $focus-border-color: null, $focus-outline-color: null) {
+  border-color: $border-color;
+
+  @if $focus-border-color {
+    &:focus {
+      border-color: $focus-border-color;
+    }
+  }
+
+  @if $focus-outline-color {
+    &:focus-visible {
+      outline-color: $focus-outline-color;
+    }
+  }
+}
+
+@mixin text-input-state-success {
+  .ivds-text-input {
+    border-color: var(--color-semantic-success-500, #19895d);
+
+    &:focus-visible {
+      outline-color: var(--color-semantic-success-500, #19895d);
+    }
+  }
+}

package/lib/components/text-input/text-input.css

@@ -1,76 +1,93 @@
-@charset "UTF-8";
-/* Text input component styles*/
-/* Provides styling for the IVDS text input component with all variants, sizes, and states*/
-/* Text Input Wrapper*/
+/* stylelint-disable no-descending-specificity */
 .ivds-text-input-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-2, 0.5rem);
 }
-/* Text Input Base*/
 .ivds-text-input {
+  --background-color: var(--ivds-surface-base, #fff);
+  --border-color: var(--ivds-border-strong, #a1adba);
+  --border-width: 2px;
+  --border-radius: var(--ivds-radius-s, 0.125rem);
+  --color: var(--ivds-text-primary, #121a24);
+  --placeholder-color: var(--ivds-text-muted, #4d5968);
+  --focus-border-color: var(--color-brand-accent-600, #1058b8);
+  --hover-border-color: var(--color-semantic-neutral-600, #4d5968);
+  --disabled-background-color: var(--ivds-surface-muted, #f1f3f5);
+  --disabled-border-color: var(--ivds-border-subtle, #e2e7ec);
+  --disabled-color: var(--ivds-text-muted, #4d5968);
+  --error-border-color: var(--color-semantic-error-500, #d73a50);
+  --success-border-color: var(--color-semantic-success-500, #19895d);
   display: block;
   width: 100%;
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  border-radius: var(--borderRadius-md, 0.375rem);
-  font-family: var(--fontFamily-sans, system-ui, -apple-system, sans-serif);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  color: var(--color);
+  font-family: var(--fontFamily-primary, system-ui, sans-serif);
+  font-size: var(--fontSize-base, 1rem);
   line-height: var(--lineHeight-normal, 1.5);
-  color: var(--color-semantic-neutral-900, #0f172a);
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
-  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  transition: border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease), background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);
 }
 .ivds-text-input::-moz-placeholder {
-  color: var(--color-semantic-neutral-500, #64748b);
+  color: var(--placeholder-color);
 }
 .ivds-text-input::placeholder {
-  color: var(--color-semantic-neutral-500, #64748b);
+  color: var(--placeholder-color);
+}
+.ivds-text-input:hover:not(:disabled, :focus) {
+  border-color: var(--hover-border-color);
 }
 .ivds-text-input:focus {
   outline: none;
-  border-color: var(--color-brand-primary-500, #f97316);
-  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
+  border-color: var(--focus-border-color);
+}
+.ivds-text-input:focus-visible {
+  outline: var(--ivds-focus-ring-width, 3px) solid var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8));
+  outline-offset: var(--ivds-focus-ring-offset, 2px);
+  box-shadow: none;
+}
+.ivds-text-input:focus:not(:focus-visible) {
+  outline: none;
+  box-shadow: none;
 }
 .ivds-text-input:disabled {
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  color: var(--color-semantic-neutral-500, #64748b);
   cursor: not-allowed;
-  opacity: 0.6;
+  color: var(--disabled-color);
+  border-color: var(--disabled-border-color);
+  background-color: var(--disabled-background-color);
 }
 .ivds-text-input {
   padding: var(--spacing-3, 0.75rem) var(--spacing-3, 0.75rem);
   font-size: var(--fontSize-base, 1rem);
-  min-height: 44px;
+  min-height: 48px;
 }
-/* Text Input Label*/
 .ivds-text-input__label {
   display: block;
-  font-size: var(--fontSize-sm, 0.875rem);
-  font-weight: var(--fontWeight-medium, 500);
-  color: var(--color-semantic-neutral-700, #374151);
   margin-bottom: var(--spacing-1, 0.25rem);
+  color: var(--ivds-text-primary, #121a24);
+  font-size: var(--fontSize-sm, 0.875rem);
+  font-weight: var(--fontWeight-semibold, 600);
 }
 .ivds-text-input__label--required::after {
   content: " *";
-  color: var(--color-semantic-error-500, #ef4444);
+  color: var(--color-semantic-error-500, #d73a50);
 }
-/* Text Input Helper Text*/
 .ivds-text-input__helper {
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-neutral-600, #4b5563);
   margin-top: var(--spacing-1, 0.25rem);
+  color: var(--ivds-text-muted, #4d5968);
+  font-size: var(--fontSize-xs, 0.75rem);
 }
-/* Text Input Error Text*/
 .ivds-text-input__error {
-  font-size: var(--fontSize-sm, 0.875rem);
-  color: var(--color-semantic-error-600, #dc2626);
   margin-top: var(--spacing-1, 0.25rem);
+  color: var(--color-semantic-error-600, #b72a41);
+  font-size: var(--fontSize-xs, 0.75rem);
+  font-weight: var(--fontWeight-medium, 500);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1, 0.25rem);
 }
-.ivds-text-input__error::before {
-  content: "⚠ ";
-  margin-right: var(--spacing-1, 0.25rem);
-}
-/* Text Input Sizes*/
 .ivds-text-input--small {
   padding: var(--spacing-2, 0.5rem) var(--spacing-3, 0.75rem);
   font-size: var(--fontSize-sm, 0.875rem);
@@ -81,70 +98,70 @@
   font-size: var(--fontSize-lg, 1.125rem);
   min-height: 56px;
 }
-/* Text Input States*/
 .ivds-text-input--error {
-  border-color: var(--color-semantic-error-500, #ef4444);
+  border-color: var(--color-semantic-error-500, #d73a50);
 }
 .ivds-text-input--error:focus {
-  border-color: var(--color-semantic-error-500, #ef4444);
-  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
+  border-color: var(--color-semantic-error-500, #d73a50);
+}
+.ivds-text-input--error:focus-visible {
+  outline-color: var(--color-semantic-error-500, #d73a50);
 }
 .ivds-text-input--success {
-  border-color: var(--color-semantic-success-500, #10b981);
+  border-color: var(--color-semantic-success-500, #19895d);
 }
 .ivds-text-input--success:focus {
-  border-color: var(--color-semantic-success-500, #10b981);
-  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
+  border-color: var(--color-semantic-success-500, #19895d);
+}
+.ivds-text-input--success:focus-visible {
+  outline-color: var(--color-semantic-success-500, #19895d);
 }
 .ivds-text-input--warning {
-  border-color: var(--color-semantic-warning-500, #f59e0b);
+  border-color: var(--color-semantic-warning-500, #ce790b);
 }
 .ivds-text-input--warning:focus {
-  border-color: var(--color-semantic-warning-500, #f59e0b);
-  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+  border-color: var(--color-semantic-warning-500, #ce790b);
+}
+.ivds-text-input--warning:focus-visible {
+  outline-color: var(--color-semantic-warning-500, #ce790b);
 }
-/* Text Input with Icons*/
 .ivds-text-input-wrapper--icon-left {
   position: relative;
 }
-.ivds-text-input-wrapper--icon-left .ivds-text-input {
-  padding-left: 2.5rem;
-}
 .ivds-text-input-wrapper--icon-left .ivds-text-input__icon {
   position: absolute;
   top: 50%;
-  left: var(--spacing-3, 0.75rem);
   transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  color: var(--color-semantic-neutral-500, #64748b);
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--ivds-text-muted, #4d5968);
   pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  left: var(--spacing-3, 0.75rem);
 }
-.ivds-text-input-wrapper--icon-left .ivds-text-input__icon svg {
-  width: 100%;
-  height: 100%;
-  fill: currentcolor;
+.ivds-text-input-wrapper--icon-left .ivds-text-input {
+  padding-left: calc(1.125rem + var(--spacing-6, 1.5rem));
 }
 .ivds-text-input-wrapper--icon-right {
   position: relative;
 }
-.ivds-text-input-wrapper--icon-right .ivds-text-input {
-  padding-right: 2.5rem;
-}
 .ivds-text-input-wrapper--icon-right .ivds-text-input__icon {
   position: absolute;
   top: 50%;
-  right: var(--spacing-3, 0.75rem);
   transform: translateY(-50%);
-  width: 20px;
-  height: 20px;
-  color: var(--color-semantic-neutral-500, #64748b);
+  width: 1.125rem;
+  height: 1.125rem;
+  color: var(--ivds-text-muted, #4d5968);
   pointer-events: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  right: var(--spacing-3, 0.75rem);
 }
-.ivds-text-input-wrapper--icon-right .ivds-text-input__icon svg {
-  width: 100%;
-  height: 100%;
-  fill: currentcolor;
+.ivds-text-input-wrapper--icon-right .ivds-text-input {
+  padding-right: calc(1.125rem + var(--spacing-6, 1.5rem));
 }
 .ivds-text-input__icon {
   display: flex;
@@ -156,7 +173,6 @@
   height: 100%;
   fill: currentcolor;
 }
-/* Text Input Group (with addons)*/
 .ivds-text-input-group {
   display: flex;
   align-items: stretch;
@@ -166,57 +182,55 @@
   border-radius: 0;
 }
 .ivds-text-input-group .ivds-text-input:first-child {
-  border-top-left-radius: var(--borderRadius-md, 0.375rem);
-  border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
+  border-top-left-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);
 }
 .ivds-text-input-group .ivds-text-input:last-child {
-  border-top-right-radius: var(--borderRadius-md, 0.375rem);
-  border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
+  border-top-right-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);
 }
 .ivds-text-input-group .ivds-text-input:not(:first-child) {
-  border-left: 0;
+  border-left-width: 0;
 }
 .ivds-text-input-group .ivds-text-input__addon {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   padding: var(--spacing-3, 0.75rem);
-  background-color: var(--color-semantic-neutral-100, #f1f5f9);
-  border: var(--borderWidth-1, 1px) solid var(--color-semantic-neutral-300, #cbd5e1);
-  color: var(--color-semantic-neutral-600, #4b5563);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
+  border: 2px solid var(--ivds-border-strong, #a1adba);
+  color: var(--ivds-text-secondary, #36414f);
   font-size: var(--fontSize-sm, 0.875rem);
   white-space: nowrap;
 }
 .ivds-text-input-group .ivds-text-input__addon:first-child {
-  border-top-left-radius: var(--borderRadius-md, 0.375rem);
-  border-bottom-left-radius: var(--borderRadius-md, 0.375rem);
-  border-right: 0;
+  border-right-width: 0;
+  border-top-left-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);
 }
 .ivds-text-input-group .ivds-text-input__addon:last-child {
-  border-top-right-radius: var(--borderRadius-md, 0.375rem);
-  border-bottom-right-radius: var(--borderRadius-md, 0.375rem);
-  border-left: 0;
+  border-left-width: 0;
+  border-top-right-radius: var(--ivds-radius-s, 0.125rem);
+  border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);
 }
-/* Text Input Variants*/
 .ivds-text-input--filled {
-  background-color: var(--color-semantic-neutral-100, #f5f5f5);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
   border-color: transparent;
 }
 .ivds-text-input--filled:focus {
-  background-color: var(--color-semantic-neutral-50, #fafafa);
-  border-color: var(--color-brand-primary-500, #f97316);
+  background-color: var(--ivds-surface-base, #fff);
+  border-color: var(--color-brand-accent-600, #1058b8);
 }
 .ivds-text-input--filled:disabled {
-  background-color: var(--color-semantic-neutral-200, #e5e5e5);
+  background-color: var(--color-semantic-neutral-200, #e2e7ec);
 }
 .ivds-text-input--borderless {
   border-color: transparent;
   background-color: transparent;
 }
 .ivds-text-input--borderless:focus {
-  border-color: var(--color-brand-primary-500, #f97316);
-  background-color: var(--color-semantic-neutral-50, #fafafa);
+  border-color: var(--color-brand-accent-600, #1058b8);
+  background-color: var(--ivds-surface-base, #fff);
 }
-/* Textarea specific styles*/
 .ivds-text-input--textarea {
   min-height: 120px;
   resize: vertical;
@@ -228,16 +242,16 @@
   resize: none;
   overflow: hidden;
 }
-/* Full width modifier*/
 .ivds-text-input--full-width {
   width: 100%;
 }
-/* Readonly state*/
 .ivds-text-input[readonly] {
-  background-color: var(--color-semantic-neutral-50, #f8fafc);
+  background-color: var(--ivds-surface-muted, #f1f3f5);
   cursor: default;
 }
 .ivds-text-input[readonly]:focus {
-  box-shadow: none;
-  border-color: var(--color-semantic-neutral-300, #d4d4d4);
+  border-color: var(--ivds-border-strong, #a1adba);
+}
+.ivds-text-input[readonly]:focus-visible {
+  outline: none;
 }

package/lib/components/text-input/text-input.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/text-input/_text-input-mixin.scss","../../../src/components/text-input/text-input.scss%23sass","../../../src/components/text-input/text-input.scss","../../../src/base/_focus.scss"],"names":[],"mappings":"AACA,gDAAA;ACKA;ED6DE,kBAAA;EEhEF,aAAA;EFkEE,sBAAA;EEhEF,6BFiEE;AEhEF;ADKA;EDJE,kDAAA;EEGF,kDFFE;EEGF,mBAAA;EFDE,+CAAA;EACA,0CAAA;EEGF,oDAAA;EFDE,4DAAA;EEGF,gEFFE;EEGF,+DAAA;EFDE,2DAAA;EACA,iDAAA;EACA,8DAAA;EACA,kEAAA;EAEA,cAAA;EEEF,WAAA;EFAE,qDAAA;EEEF,mCFDE;EEEF,yCAAA;EFAE,mBAAA;EEEF,6DAAA;EFAE,qCAAA;EEEF,0CFDE;EEEF,oKAAA;AACA;AFEE;EACE,+BAAA;AEAJ;AFDE;EACE,+BAAA;AEAJ;AFGE;EACE,uCAAA;AEDJ;AFIE;EEFF,aAAA;EFII,uCAAA;AEFJ;ACrCE;EDuCF,qHCtCI;EDuCJ,kDAAA;ECrCI,gBAAA;ADuCJ;ACpCE;EACE,aAAA;EACA,gBAAA;ADsCJ;AFFE;EEIF,mBAAA;EFFI,4BAAA;EACA,0CAAA;EACA,kDAAA;AEIJ;AD9CA;ECgDA,4DAAA;EFAE,qCC9CqF;ECgDvF,gBAAA;AACA;AD7CA;EDyDE,cAAA;EACA,wCAAA;EERF,wCAAA;EFUE,uCAAA;EERF,4CFSE;AERF;AFgCE;EE9BF,aAAA;EFgCI,+CAAA;AE9BJ;ADhDA;EDwDE,qCAAA;EEJF,sCAAA;EFME,sCAAA;AEJF;ADjDA;EDyDE,qCAAA;EACA,+CAAA;EACA,sCAAA;EACA,0CAAA;EACA,oBAAA;EEJF,mBAAA;EFME,8BAAA;AEJF;ADtDA;ECyDA,2DAAA;EFlCE,uCCtBoF;EC0DtF,gBAAA;AACA;ADxDA;EDkBE,sDAAA;EACA,uCAAA;EAGE,gBAAA;AEwCJ;ADzDA;EDoKE,sDAAA;AEvGF;AF0GI;EExGJ,sDAAA;AACA;AF6GI;EACE,uDC1KF;AC+DJ;AD3DA;ED4JE,wDC1JE;AC6DJ;AFgGI;EE9FJ,wDAAA;AACA;AFmGI;EEjGJ,yDAAA;AACA;AD7DA;EDoJE,wDAAA;AEnFF;AFsFI;EACE,wDCrJF;ACiEJ;AFyFI;EACE,yDC1JF;ACmEJ;AD9DA;ECiEA,kBAAA;AACA;AFzBE;EE2BF,kBAAA;EFzBI,QAAA;EE2BJ,2BF1BI;EE2BJ,eAAA;EFzBI,gBAAA;EACA,sCAAA;EACA,oBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EAGE,+BAAA;AEyBN;AFnBE;EAEI,uDAAA;AEoBN;AD9EA;EDmCE,kBAAA;AE+CF;AF7CE;EACE,kBAAA;EACA,QAAA;EACA,2BAAA;EACA,eA4B0C;EA3B1C,gBA2B0C;EA1B1C,sCAAA;EACA,oBAAA;EACA,oBAAA;EACA,mBAAA;EACA,uBAAA;EAKE,gCAAA;AE2CN;AFvCE;EAII,wDAAA;AEsCN;AD9FA;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;ACiGF;AD/FE;EACE,WAAA;EACA,YAAA;EACA,kBAAA;ACiGJ;AD5FA;EDyDE,aAAA;EACA,oBAAA;AEuCF;AFrCE;EACE,OAAA;EACA,gBAAA;AEuCJ;AFrCI;EACE,sDAAA;EACA,yDAAA;AEuCN;AFpCI;EACE,uDAAA;EACA,0DAAA;AEsCN;AFnCI;EACE,oBAAA;AEqCN;AFjCE;EACE,oBAAA;EACA,mBAAA;EACA,kCAAA;EACA,oDAAA;EACA,oDAAA;EACA,0CAAA;EACA,uCAAA;EACA,mBAAA;AEmCJ;AFjCI;EACE,qBAAA;EACA,sDAAA;EACA,yDAAA;AEmCN;AFhCI;EACE,oBAAA;EACA,uDAAA;EACA,0DAAA;AEkCN;AD/HA;EACE,oDAAA;EACA,yBAAA;ACkIF;ADhIE;EACE,gDAAA;EACA,oDAAA;ACkIJ;AD/HE;EACE,4DAAA;ACiIJ;AD7HA;EACE,yBAAA;EACA,6BAAA;ACgIF;AD9HE;EACE,oDAAA;EACA,gDAAA;ACgIJ;AD3HA;EACE,iBAAA;EACA,gBAAA;AC8HF;AD5HE;EACE,YAAA;AC8HJ;AD3HE;EACE,YAAA;EACA,gBAAA;AC6HJ;ADxHA;EACE,WAAA;AC2HF;ADvHA;EACE,oDAAA;EACA,eAAA;AC0HF;ADxHE;EACE,gDAAA;AC0HJ;ADvHE;EACE,aAAA;ACyHJ","file":"text-input.css","sourcesContent":["// Text input component mixins and private styles\n/* stylelint-disable no-descending-specificity */\n\n@use '../../base/focus' as *;\n\n@mixin text-input-base {\n  // Per-component CSS variable API\n  --background-color: var(--ivds-surface-base, #fff);\n  --border-color: var(--ivds-border-strong, #a1adba);\n  --border-width: 2px;\n  --border-radius: var(--ivds-radius-s, 0.125rem);\n  --color: var(--ivds-text-primary, #121a24);\n  --placeholder-color: var(--ivds-text-muted, #4d5968);\n  --focus-border-color: var(--color-brand-accent-600, #1058b8);\n  --hover-border-color: var(--color-semantic-neutral-600, #4d5968);\n  --disabled-background-color: var(--ivds-surface-muted, #f1f3f5);\n  --disabled-border-color: var(--ivds-border-subtle, #e2e7ec);\n  --disabled-color: var(--ivds-text-muted, #4d5968);\n  --error-border-color: var(--color-semantic-error-500, #d73a50);\n  --success-border-color: var(--color-semantic-success-500, #19895d);\n\n  display: block;\n  width: 100%;\n  border: var(--border-width) solid var(--border-color);\n  border-radius: var(--border-radius);\n  background-color: var(--background-color);\n  color: var(--color);\n  font-family: var(--fontFamily-primary, system-ui, sans-serif);\n  font-size: var(--fontSize-base, 1rem);\n  line-height: var(--lineHeight-normal, 1.5);\n  transition:\n    border-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease),\n    background-color var(--ivds-motion-fast, 150ms) var(--ivds-motion-ease, ease);\n\n  &::placeholder {\n    color: var(--placeholder-color);\n  }\n\n  &:hover:not(:disabled, :focus) {\n    border-color: var(--hover-border-color);\n  }\n\n  &:focus {\n    outline: none;\n    border-color: var(--focus-border-color);\n  }\n\n  @include focus-ring;\n\n  &:disabled {\n    cursor: not-allowed;\n    color: var(--disabled-color);\n    border-color: var(--disabled-border-color);\n    background-color: var(--disabled-background-color);\n  }\n}\n\n@mixin text-input-size($padding-y, $padding-x, $font-size, $min-height: null) {\n  padding: $padding-y $padding-x;\n  font-size: $font-size;\n\n  @if $min-height {\n    min-height: $min-height;\n  }\n}\n\n@mixin text-input-wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-2, 0.5rem);\n}\n\n@mixin text-input-label {\n  display: block;\n  margin-bottom: var(--spacing-1, 0.25rem);\n  color: var(--ivds-text-primary, #121a24);\n  font-size: var(--fontSize-sm, 0.875rem);\n  font-weight: var(--fontWeight-semibold, 600);\n}\n\n@mixin text-input-helper {\n  margin-top: var(--spacing-1, 0.25rem);\n  color: var(--ivds-text-muted, #4d5968);\n  font-size: var(--fontSize-xs, 0.75rem);\n}\n\n@mixin text-input-error-msg {\n  margin-top: var(--spacing-1, 0.25rem);\n  color: var(--color-semantic-error-600, #b72a41);\n  font-size: var(--fontSize-xs, 0.75rem);\n  font-weight: var(--fontWeight-medium, 500);\n  display: inline-flex;\n  align-items: center;\n  gap: var(--spacing-1, 0.25rem);\n}\n\n@mixin text-input-error {\n  @include text-input-error-msg;\n}\n\n@mixin text-input-required {\n  &::after {\n    content: ' *';\n    color: var(--color-semantic-error-500, #d73a50);\n  }\n}\n\n@mixin text-input-with-icon($position: 'left', $icon-size: 1.125rem) {\n  position: relative;\n\n  .ivds-text-input__icon {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    width: $icon-size;\n    height: $icon-size;\n    color: var(--ivds-text-muted, #4d5968);\n    pointer-events: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    @if $position == 'left' {\n      left: var(--spacing-3, 0.75rem);\n    } @else {\n      right: var(--spacing-3, 0.75rem);\n    }\n  }\n\n  .ivds-text-input {\n    @if $position == 'left' {\n      padding-left: calc(#{$icon-size} + var(--spacing-6, 1.5rem));\n    } @else {\n      padding-right: calc(#{$icon-size} + var(--spacing-6, 1.5rem));\n    }\n  }\n}\n\n@mixin text-input-with-icon-left($icon-size: 1.125rem) {\n  @include text-input-with-icon('left', $icon-size);\n}\n\n@mixin text-input-with-icon-right($icon-size: 1.125rem) {\n  @include text-input-with-icon('right', $icon-size);\n}\n\n@mixin text-input-group {\n  display: flex;\n  align-items: stretch;\n\n  .ivds-text-input {\n    flex: 1;\n    border-radius: 0;\n\n    &:first-child {\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:not(:first-child) {\n      border-left-width: 0;\n    }\n  }\n\n  .ivds-text-input__addon {\n    display: inline-flex;\n    align-items: center;\n    padding: var(--spacing-3, 0.75rem);\n    background-color: var(--ivds-surface-muted, #f1f3f5);\n    border: 2px solid var(--ivds-border-strong, #a1adba);\n    color: var(--ivds-text-secondary, #36414f);\n    font-size: var(--fontSize-sm, 0.875rem);\n    white-space: nowrap;\n\n    &:first-child {\n      border-right-width: 0;\n      border-top-left-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-left-radius: var(--ivds-radius-s, 0.125rem);\n    }\n\n    &:last-child {\n      border-left-width: 0;\n      border-top-right-radius: var(--ivds-radius-s, 0.125rem);\n      border-bottom-right-radius: var(--ivds-radius-s, 0.125rem);\n    }\n  }\n}\n\n@mixin text-input-state-error {\n  .ivds-text-input {\n    border-color: var(--color-semantic-error-500, #d73a50);\n\n    &:focus-visible {\n      outline-color: var(--color-semantic-error-500, #d73a50);\n    }\n  }\n\n  .ivds-text-input__label {\n    color: var(--color-semantic-error-700, #922036);\n  }\n}\n\n@mixin text-input-state($border-color, $focus-border-color: null, $focus-outline-color: null) {\n  border-color: $border-color;\n\n  @if $focus-border-color {\n    &:focus {\n      border-color: $focus-border-color;\n    }\n  }\n\n  @if $focus-outline-color {\n    &:focus-visible {\n      outline-color: $focus-outline-color;\n    }\n  }\n}\n\n@mixin text-input-state-success {\n  .ivds-text-input {\n    border-color: var(--color-semantic-success-500, #19895d);\n\n    &:focus-visible {\n      outline-color: var(--color-semantic-success-500, #19895d);\n    }\n  }\n}\n","// Text input component styles\r\n// Provides styling for the IVDS text input component with all variants, sizes, and states\r\n\r\n@use '_text-input-mixin' as input;\r\n\r\n// Text Input Wrapper\r\n.ivds-text-input-wrapper {\r\n  @include input.text-input-wrapper;\r\n}\r\n\r\n// Text Input Base\r\n.ivds-text-input {\r\n  @include input.text-input-base;\r\n  @include input.text-input-size(var(--spacing-3, 0.75rem), var(--spacing-3, 0.75rem), var(--fontSize-base, 1rem), 48px);\r\n}\r\n\r\n// Text Input Label\r\n.ivds-text-input__label {\r\n  @include input.text-input-label;\r\n  \r\n  &--required {\r\n    @include input.text-input-required;\r\n  }\r\n}\r\n\r\n// Text Input Helper Text\r\n.ivds-text-input__helper {\r\n  @include input.text-input-helper;\r\n}\r\n\r\n// Text Input Error Text\r\n.ivds-text-input__error {\r\n  @include input.text-input-error;\r\n}\r\n\r\n// Text Input Sizes\r\n.ivds-text-input--small {\r\n  @include input.text-input-size(var(--spacing-2, 0.5rem), var(--spacing-3, 0.75rem), var(--fontSize-sm, 0.875rem), 32px);\r\n}\r\n\r\n.ivds-text-input--large {\r\n  @include input.text-input-size(var(--spacing-4, 1rem), var(--spacing-4, 1rem), var(--fontSize-lg, 1.125rem), 56px);\r\n}\r\n\r\n// Text Input States\r\n.ivds-text-input--error {\r\n  @include input.text-input-state(\r\n    var(--color-semantic-error-500, #d73a50),\r\n    var(--color-semantic-error-500, #d73a50),\r\n    var(--color-semantic-error-500, #d73a50)\r\n  );\r\n}\r\n\r\n.ivds-text-input--success {\r\n  @include input.text-input-state(\r\n    var(--color-semantic-success-500, #19895d),\r\n    var(--color-semantic-success-500, #19895d),\r\n    var(--color-semantic-success-500, #19895d)\r\n  );\r\n}\r\n\r\n.ivds-text-input--warning {\r\n  @include input.text-input-state(\r\n    var(--color-semantic-warning-500, #ce790b),\r\n    var(--color-semantic-warning-500, #ce790b),\r\n    var(--color-semantic-warning-500, #ce790b)\r\n  );\r\n}\r\n\r\n// Text Input with Icons\r\n.ivds-text-input-wrapper--icon-left {\r\n  @include input.text-input-with-icon-left;\r\n}\r\n\r\n.ivds-text-input-wrapper--icon-right {\r\n  @include input.text-input-with-icon-right;\r\n}\r\n\r\n.ivds-text-input__icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  \r\n  svg {\r\n    width: 100%;\r\n    height: 100%;\r\n    fill: currentcolor;\r\n  }\r\n}\r\n\r\n// Text Input Group (with addons)\r\n.ivds-text-input-group {\r\n  @include input.text-input-group;\r\n}\r\n\r\n// Text Input Variants\r\n.ivds-text-input--filled {\r\n  background-color: var(--ivds-surface-muted, #f1f3f5);\r\n  border-color: transparent;\r\n  \r\n  &:focus {\r\n    background-color: var(--ivds-surface-base, #fff);\r\n    border-color: var(--color-brand-accent-600, #1058b8);\r\n  }\r\n  \r\n  &:disabled {\r\n    background-color: var(--color-semantic-neutral-200, #e2e7ec);\r\n  }\r\n}\r\n\r\n.ivds-text-input--borderless {\r\n  border-color: transparent;\r\n  background-color: transparent;\r\n  \r\n  &:focus {\r\n    border-color: var(--color-brand-accent-600, #1058b8);\r\n    background-color: var(--ivds-surface-base, #fff);\r\n  }\r\n}\r\n\r\n// Textarea specific styles\r\n.ivds-text-input--textarea {\r\n  min-height: 120px;\r\n  resize: vertical;\r\n  \r\n  &--no-resize {\r\n    resize: none;\r\n  }\r\n  \r\n  &--auto-resize {\r\n    resize: none;\r\n    overflow: hidden;\r\n  }\r\n}\r\n\r\n// Full width modifier\r\n.ivds-text-input--full-width {\r\n  width: 100%;\r\n}\r\n\r\n// Readonly state\r\n.ivds-text-input[readonly] {\r\n  background-color: var(--ivds-surface-muted, #f1f3f5);\r\n  cursor: default;\r\n  \r\n  &:focus {\r\n    border-color: var(--ivds-border-strong, #a1adba);\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: none;\r\n  }\r\n}\r\n","// Text input component styles\r\n// Provides styling for the IVDS text input component with all variants, sizes, and states\r\n\r\n@use '_text-input-mixin' as input;\r\n\r\n// Text Input Wrapper\r\n.ivds-text-input-wrapper {\r\n  @include input.text-input-wrapper;\r\n}\r\n\r\n// Text Input Base\r\n.ivds-text-input {\r\n  @include input.text-input-base;\r\n  @include input.text-input-size(var(--spacing-3, 0.75rem), var(--spacing-3, 0.75rem), var(--fontSize-base, 1rem), 48px);\r\n}\r\n\r\n// Text Input Label\r\n.ivds-text-input__label {\r\n  @include input.text-input-label;\r\n  \r\n  &--required {\r\n    @include input.text-input-required;\r\n  }\r\n}\r\n\r\n// Text Input Helper Text\r\n.ivds-text-input__helper {\r\n  @include input.text-input-helper;\r\n}\r\n\r\n// Text Input Error Text\r\n.ivds-text-input__error {\r\n  @include input.text-input-error;\r\n}\r\n\r\n// Text Input Sizes\r\n.ivds-text-input--small {\r\n  @include input.text-input-size(var(--spacing-2, 0.5rem), var(--spacing-3, 0.75rem), var(--fontSize-sm, 0.875rem), 32px);\r\n}\r\n\r\n.ivds-text-input--large {\r\n  @include input.text-input-size(var(--spacing-4, 1rem), var(--spacing-4, 1rem), var(--fontSize-lg, 1.125rem), 56px);\r\n}\r\n\r\n// Text Input States\r\n.ivds-text-input--error {\r\n  @include input.text-input-state(\r\n    var(--color-semantic-error-500, #d73a50),\r\n    var(--color-semantic-error-500, #d73a50),\r\n    var(--color-semantic-error-500, #d73a50)\r\n  );\r\n}\r\n\r\n.ivds-text-input--success {\r\n  @include input.text-input-state(\r\n    var(--color-semantic-success-500, #19895d),\r\n    var(--color-semantic-success-500, #19895d),\r\n    var(--color-semantic-success-500, #19895d)\r\n  );\r\n}\r\n\r\n.ivds-text-input--warning {\r\n  @include input.text-input-state(\r\n    var(--color-semantic-warning-500, #ce790b),\r\n    var(--color-semantic-warning-500, #ce790b),\r\n    var(--color-semantic-warning-500, #ce790b)\r\n  );\r\n}\r\n\r\n// Text Input with Icons\r\n.ivds-text-input-wrapper--icon-left {\r\n  @include input.text-input-with-icon-left;\r\n}\r\n\r\n.ivds-text-input-wrapper--icon-right {\r\n  @include input.text-input-with-icon-right;\r\n}\r\n\r\n.ivds-text-input__icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  \r\n  svg {\r\n    width: 100%;\r\n    height: 100%;\r\n    fill: currentcolor;\r\n  }\r\n}\r\n\r\n// Text Input Group (with addons)\r\n.ivds-text-input-group {\r\n  @include input.text-input-group;\r\n}\r\n\r\n// Text Input Variants\r\n.ivds-text-input--filled {\r\n  background-color: var(--ivds-surface-muted, #f1f3f5);\r\n  border-color: transparent;\r\n  \r\n  &:focus {\r\n    background-color: var(--ivds-surface-base, #fff);\r\n    border-color: var(--color-brand-accent-600, #1058b8);\r\n  }\r\n  \r\n  &:disabled {\r\n    background-color: var(--color-semantic-neutral-200, #e2e7ec);\r\n  }\r\n}\r\n\r\n.ivds-text-input--borderless {\r\n  border-color: transparent;\r\n  background-color: transparent;\r\n  \r\n  &:focus {\r\n    border-color: var(--color-brand-accent-600, #1058b8);\r\n    background-color: var(--ivds-surface-base, #fff);\r\n  }\r\n}\r\n\r\n// Textarea specific styles\r\n.ivds-text-input--textarea {\r\n  min-height: 120px;\r\n  resize: vertical;\r\n  \r\n  &--no-resize {\r\n    resize: none;\r\n  }\r\n  \r\n  &--auto-resize {\r\n    resize: none;\r\n    overflow: hidden;\r\n  }\r\n}\r\n\r\n// Full width modifier\r\n.ivds-text-input--full-width {\r\n  width: 100%;\r\n}\r\n\r\n// Readonly state\r\n.ivds-text-input[readonly] {\r\n  background-color: var(--ivds-surface-muted, #f1f3f5);\r\n  cursor: default;\r\n  \r\n  &:focus {\r\n    border-color: var(--ivds-border-strong, #a1adba);\r\n  }\r\n\r\n  &:focus-visible {\r\n    outline: none;\r\n  }\r\n}\r\n","// Unified focus ring mixin\n// Uses outline instead of box-shadow to avoid conflicts with elevated components (Card, Modal).\n// Inspired by Helsinki Design System: 3px solid outline with 2px offset.\n\n@mixin focus-ring($offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) {\n    outline: none;\n    box-shadow: none;\n  }\n}\n\n// Variant for components where the focus indicator is on a sibling element\n// (e.g., checkbox input:focus-visible + .checkbox__box)\n@mixin focus-ring-on-sibling($selector, $offset: var(--ivds-focus-ring-offset, 2px), $width: var(--ivds-focus-ring-width, 3px), $color: var(--ivds-focus-ring-color, var(--color-brand-accent-600, #1058b8))) {\n  &:focus-visible + #{$selector} {\n    outline: #{$width} solid #{$color};\n    outline-offset: #{$offset};\n    box-shadow: none;\n  }\n\n  &:focus:not(:focus-visible) + #{$selector} {\n    outline: none;\n    box-shadow: none;\n  }\n}\n"]}

package/lib/components/text-input/text-input.min.css

@@ -1 +1 @@
-@charset "UTF-8";.ivds-text-input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-2,.5rem);position:relative}.ivds-text-input{background-color:var(--color-semantic-neutral-50,#f8fafc);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);border-radius:var(--borderRadius-md,.375rem);color:var(--color-semantic-neutral-900,#0f172a);display:block;font-family:var(--fontFamily-sans,system-ui,-apple-system,sans-serif);line-height:var(--lineHeight-normal,1.5);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;width:100%}.ivds-text-input::-moz-placeholder{color:var(--color-semantic-neutral-500,#64748b)}.ivds-text-input::placeholder{color:var(--color-semantic-neutral-500,#64748b)}.ivds-text-input:focus{border-color:var(--color-brand-primary-500,#f97316);box-shadow:0 0 0 3px rgba(249,115,22,.1);outline:none}.ivds-text-input:disabled{background-color:var(--color-semantic-neutral-100,#f1f5f9);color:var(--color-semantic-neutral-500,#64748b);cursor:not-allowed;opacity:.6}.ivds-text-input{font-size:var(--fontSize-base,1rem);min-height:44px;padding:var(--spacing-3,.75rem) var(--spacing-3,.75rem)}.ivds-text-input__label{color:var(--color-semantic-neutral-700,#374151);display:block;font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-medium,500);margin-bottom:var(--spacing-1,.25rem)}.ivds-text-input__label--required:after{color:var(--color-semantic-error-500,#ef4444);content:" *"}.ivds-text-input__helper{color:var(--color-semantic-neutral-600,#4b5563)}.ivds-text-input__error,.ivds-text-input__helper{font-size:var(--fontSize-sm,.875rem);margin-top:var(--spacing-1,.25rem)}.ivds-text-input__error{color:var(--color-semantic-error-600,#dc2626)}.ivds-text-input__error:before{content:"⚠ ";margin-right:var(--spacing-1,.25rem)}.ivds-text-input--small{font-size:var(--fontSize-sm,.875rem);min-height:32px;padding:var(--spacing-2,.5rem) var(--spacing-3,.75rem)}.ivds-text-input--large{font-size:var(--fontSize-lg,1.125rem);min-height:56px;padding:var(--spacing-4,1rem) var(--spacing-4,1rem)}.ivds-text-input--error,.ivds-text-input--error:focus{border-color:var(--color-semantic-error-500,#ef4444)}.ivds-text-input--error:focus{box-shadow:0 0 0 3px rgba(239,68,68,.1)}.ivds-text-input--success,.ivds-text-input--success:focus{border-color:var(--color-semantic-success-500,#10b981)}.ivds-text-input--success:focus{box-shadow:0 0 0 3px rgba(16,185,129,.1)}.ivds-text-input--warning,.ivds-text-input--warning:focus{border-color:var(--color-semantic-warning-500,#f59e0b)}.ivds-text-input--warning:focus{box-shadow:0 0 0 3px rgba(245,158,11,.1)}.ivds-text-input-wrapper--icon-left{position:relative}.ivds-text-input-wrapper--icon-left .ivds-text-input{padding-left:2.5rem}.ivds-text-input-wrapper--icon-left .ivds-text-input__icon{color:var(--color-semantic-neutral-500,#64748b);height:20px;left:var(--spacing-3,.75rem);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:20px}.ivds-text-input-wrapper--icon-left .ivds-text-input__icon svg{fill:currentcolor;height:100%;width:100%}.ivds-text-input-wrapper--icon-right{position:relative}.ivds-text-input-wrapper--icon-right .ivds-text-input{padding-right:2.5rem}.ivds-text-input-wrapper--icon-right .ivds-text-input__icon{color:var(--color-semantic-neutral-500,#64748b);height:20px;pointer-events:none;position:absolute;right:var(--spacing-3,.75rem);top:50%;transform:translateY(-50%);width:20px}.ivds-text-input-wrapper--icon-right .ivds-text-input__icon svg{fill:currentcolor;height:100%;width:100%}.ivds-text-input__icon{align-items:center;display:flex;justify-content:center}.ivds-text-input__icon svg{fill:currentcolor;height:100%;width:100%}.ivds-text-input-group{align-items:stretch;display:flex}.ivds-text-input-group .ivds-text-input{border-radius:0;flex:1}.ivds-text-input-group .ivds-text-input:first-child{border-bottom-left-radius:var(--borderRadius-md,.375rem);border-top-left-radius:var(--borderRadius-md,.375rem)}.ivds-text-input-group .ivds-text-input:last-child{border-bottom-right-radius:var(--borderRadius-md,.375rem);border-top-right-radius:var(--borderRadius-md,.375rem)}.ivds-text-input-group .ivds-text-input:not(:first-child){border-left:0}.ivds-text-input-group .ivds-text-input__addon{align-items:center;background-color:var(--color-semantic-neutral-100,#f1f5f9);border:var(--borderWidth-1,1px) solid var(--color-semantic-neutral-300,#cbd5e1);color:var(--color-semantic-neutral-600,#4b5563);display:flex;font-size:var(--fontSize-sm,.875rem);padding:var(--spacing-3,.75rem);white-space:nowrap}.ivds-text-input-group .ivds-text-input__addon:first-child{border-bottom-left-radius:var(--borderRadius-md,.375rem);border-right:0;border-top-left-radius:var(--borderRadius-md,.375rem)}.ivds-text-input-group .ivds-text-input__addon:last-child{border-bottom-right-radius:var(--borderRadius-md,.375rem);border-left:0;border-top-right-radius:var(--borderRadius-md,.375rem)}.ivds-text-input--filled{background-color:var(--color-semantic-neutral-100,#f5f5f5);border-color:transparent}.ivds-text-input--filled:focus{background-color:var(--color-semantic-neutral-50,#fafafa);border-color:var(--color-brand-primary-500,#f97316)}.ivds-text-input--filled:disabled{background-color:var(--color-semantic-neutral-200,#e5e5e5)}.ivds-text-input--borderless{background-color:transparent;border-color:transparent}.ivds-text-input--borderless:focus{background-color:var(--color-semantic-neutral-50,#fafafa);border-color:var(--color-brand-primary-500,#f97316)}.ivds-text-input--textarea{min-height:120px;resize:vertical}.ivds-text-input--textarea--no-resize{resize:none}.ivds-text-input--textarea--auto-resize{overflow:hidden;resize:none}.ivds-text-input--full-width{width:100%}.ivds-text-input[readonly]{background-color:var(--color-semantic-neutral-50,#f8fafc);cursor:default}.ivds-text-input[readonly]:focus{border-color:var(--color-semantic-neutral-300,#d4d4d4);box-shadow:none}
+.ivds-text-input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-2,.5rem);position:relative}.ivds-text-input{--background-color:var(--ivds-surface-base,#fff);--border-color:var(--ivds-border-strong,#a1adba);--border-width:2px;--border-radius:var(--ivds-radius-s,0.125rem);--color:var(--ivds-text-primary,#121a24);--placeholder-color:var(--ivds-text-muted,#4d5968);--focus-border-color:var(--color-brand-accent-600,#1058b8);--hover-border-color:var(--color-semantic-neutral-600,#4d5968);--disabled-background-color:var(--ivds-surface-muted,#f1f3f5);--disabled-border-color:var(--ivds-border-subtle,#e2e7ec);--disabled-color:var(--ivds-text-muted,#4d5968);--error-border-color:var(--color-semantic-error-500,#d73a50);--success-border-color:var(--color-semantic-success-500,#19895d);background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);color:var(--color);display:block;font-family:var(--fontFamily-primary,system-ui,sans-serif);line-height:var(--lineHeight-normal,1.5);transition:border-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease),background-color var(--ivds-motion-fast,.15s) var(--ivds-motion-ease,ease);width:100%}.ivds-text-input::-moz-placeholder{color:var(--placeholder-color)}.ivds-text-input::placeholder{color:var(--placeholder-color)}.ivds-text-input:hover:not(:disabled,:focus){border-color:var(--hover-border-color)}.ivds-text-input:focus{border-color:var(--focus-border-color);outline:none}.ivds-text-input:focus-visible{box-shadow:none;outline:var(--ivds-focus-ring-width,3px) solid var(--ivds-focus-ring-color,var(--color-brand-accent-600,#1058b8));outline-offset:var(--ivds-focus-ring-offset,2px)}.ivds-text-input:focus:not(:focus-visible){box-shadow:none;outline:none}.ivds-text-input:disabled{background-color:var(--disabled-background-color);border-color:var(--disabled-border-color);color:var(--disabled-color);cursor:not-allowed}.ivds-text-input{font-size:var(--fontSize-base,1rem);min-height:48px;padding:var(--spacing-3,.75rem) var(--spacing-3,.75rem)}.ivds-text-input__label{color:var(--ivds-text-primary,#121a24);display:block;font-size:var(--fontSize-sm,.875rem);font-weight:var(--fontWeight-semibold,600);margin-bottom:var(--spacing-1,.25rem)}.ivds-text-input__label--required:after{color:var(--color-semantic-error-500,#d73a50);content:" *"}.ivds-text-input__helper{color:var(--ivds-text-muted,#4d5968)}.ivds-text-input__error,.ivds-text-input__helper{font-size:var(--fontSize-xs,.75rem);margin-top:var(--spacing-1,.25rem)}.ivds-text-input__error{align-items:center;color:var(--color-semantic-error-600,#b72a41);display:inline-flex;font-weight:var(--fontWeight-medium,500);gap:var(--spacing-1,.25rem)}.ivds-text-input--small{font-size:var(--fontSize-sm,.875rem);min-height:32px;padding:var(--spacing-2,.5rem) var(--spacing-3,.75rem)}.ivds-text-input--large{font-size:var(--fontSize-lg,1.125rem);min-height:56px;padding:var(--spacing-4,1rem) var(--spacing-4,1rem)}.ivds-text-input--error,.ivds-text-input--error:focus{border-color:var(--color-semantic-error-500,#d73a50)}.ivds-text-input--error:focus-visible{outline-color:var(--color-semantic-error-500,#d73a50)}.ivds-text-input--success,.ivds-text-input--success:focus{border-color:var(--color-semantic-success-500,#19895d)}.ivds-text-input--success:focus-visible{outline-color:var(--color-semantic-success-500,#19895d)}.ivds-text-input--warning,.ivds-text-input--warning:focus{border-color:var(--color-semantic-warning-500,#ce790b)}.ivds-text-input--warning:focus-visible{outline-color:var(--color-semantic-warning-500,#ce790b)}.ivds-text-input-wrapper--icon-left{position:relative}.ivds-text-input-wrapper--icon-left .ivds-text-input__icon{align-items:center;color:var(--ivds-text-muted,#4d5968);display:inline-flex;height:1.125rem;justify-content:center;left:var(--spacing-3,.75rem);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%);width:1.125rem}.ivds-text-input-wrapper--icon-left .ivds-text-input{padding-left:calc(1.125rem + var(--spacing-6, 1.5rem))}.ivds-text-input-wrapper--icon-right{position:relative}.ivds-text-input-wrapper--icon-right .ivds-text-input__icon{align-items:center;color:var(--ivds-text-muted,#4d5968);display:inline-flex;height:1.125rem;justify-content:center;pointer-events:none;position:absolute;right:var(--spacing-3,.75rem);top:50%;transform:translateY(-50%);width:1.125rem}.ivds-text-input-wrapper--icon-right .ivds-text-input{padding-right:calc(1.125rem + var(--spacing-6, 1.5rem))}.ivds-text-input__icon{align-items:center;display:flex;justify-content:center}.ivds-text-input__icon svg{fill:currentcolor;height:100%;width:100%}.ivds-text-input-group{align-items:stretch;display:flex}.ivds-text-input-group .ivds-text-input{border-radius:0;flex:1}.ivds-text-input-group .ivds-text-input:first-child{border-bottom-left-radius:var(--ivds-radius-s,.125rem);border-top-left-radius:var(--ivds-radius-s,.125rem)}.ivds-text-input-group .ivds-text-input:last-child{border-bottom-right-radius:var(--ivds-radius-s,.125rem);border-top-right-radius:var(--ivds-radius-s,.125rem)}.ivds-text-input-group .ivds-text-input:not(:first-child){border-left-width:0}.ivds-text-input-group .ivds-text-input__addon{align-items:center;background-color:var(--ivds-surface-muted,#f1f3f5);border:2px solid var(--ivds-border-strong,#a1adba);color:var(--ivds-text-secondary,#36414f);display:inline-flex;font-size:var(--fontSize-sm,.875rem);padding:var(--spacing-3,.75rem);white-space:nowrap}.ivds-text-input-group .ivds-text-input__addon:first-child{border-bottom-left-radius:var(--ivds-radius-s,.125rem);border-right-width:0;border-top-left-radius:var(--ivds-radius-s,.125rem)}.ivds-text-input-group .ivds-text-input__addon:last-child{border-bottom-right-radius:var(--ivds-radius-s,.125rem);border-left-width:0;border-top-right-radius:var(--ivds-radius-s,.125rem)}.ivds-text-input--filled{background-color:var(--ivds-surface-muted,#f1f3f5);border-color:transparent}.ivds-text-input--filled:focus{background-color:var(--ivds-surface-base,#fff);border-color:var(--color-brand-accent-600,#1058b8)}.ivds-text-input--filled:disabled{background-color:var(--color-semantic-neutral-200,#e2e7ec)}.ivds-text-input--borderless{background-color:transparent;border-color:transparent}.ivds-text-input--borderless:focus{background-color:var(--ivds-surface-base,#fff);border-color:var(--color-brand-accent-600,#1058b8)}.ivds-text-input--textarea{min-height:120px;resize:vertical}.ivds-text-input--textarea--no-resize{resize:none}.ivds-text-input--textarea--auto-resize{overflow:hidden;resize:none}.ivds-text-input--full-width{width:100%}.ivds-text-input[readonly]{background-color:var(--ivds-surface-muted,#f1f3f5);cursor:default}.ivds-text-input[readonly]:focus{border-color:var(--ivds-border-strong,#a1adba)}.ivds-text-input[readonly]:focus-visible{outline:none}