diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss
index e513847..d28cee2 100644
--- a/packages/core/src/components/badge/badge.scss
+++ b/packages/core/src/components/badge/badge.scss
@@ -106,8 +106,8 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
-    $text: use_color("#{$color}.content");
+    $base: theme.use_color("#{$color}.base");
+    $text: theme.use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
diff --git a/packages/core/src/components/checkbox/checkbox.scss b/packages/core/src/components/checkbox/checkbox.scss
index b8112a7..9953f90 100644
--- a/packages/core/src/components/checkbox/checkbox.scss
+++ b/packages/core/src/components/checkbox/checkbox.scss
@@ -129,9 +129,9 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
-    $border: use_color("#{$color}.base", 0.2);
-    $text: use_color("#{$color}.content");
+    $base: theme.use_color("#{$color}.base");
+    $border: theme.use_color("#{$color}.base", 0.2);
+    $text: theme.use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --background: #{$base};
@@ -181,7 +181,7 @@
       var(--background) 57%
     );
   background-repeat: no-repeat;
-  background-color: var(--background, use_color("base.content"));
+  background-color: var(--background, #{theme.use_color("base.content")});
   animation: checkmark var(--animation-duration, 0.2s) ease-out;
 }
 
diff --git a/packages/core/src/components/divider/divider.scss b/packages/core/src/components/divider/divider.scss
index f9ac0f4..0152352 100644
--- a/packages/core/src/components/divider/divider.scss
+++ b/packages/core/src/components/divider/divider.scss
@@ -95,7 +95,7 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
+    $base: theme.use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --background: #{$base};
diff --git a/packages/core/src/components/dropdown/dropdown.scss b/packages/core/src/components/dropdown/dropdown.scss
index fb06307..0985b9f 100644
--- a/packages/core/src/components/dropdown/dropdown.scss
+++ b/packages/core/src/components/dropdown/dropdown.scss
@@ -53,7 +53,7 @@
     &-backdrop {
       position: fixed;
       inset: 0;
-      background: use_color("neutral.base", 0.2);
+      background: theme.use_color("neutral.base", 0.2);
     }
   }
 }
diff --git a/packages/core/src/components/input-file/input-file.scss b/packages/core/src/components/input-file/input-file.scss
index 98bbdac..ab2774a 100644
--- a/packages/core/src/components/input-file/input-file.scss
+++ b/packages/core/src/components/input-file/input-file.scss
@@ -150,8 +150,8 @@ $minWidth: 12rem;
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
-    $text: use_color("#{$color}.content");
+    $base: theme.use_color("#{$color}.base");
+    $text: theme.use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --button-background: #{$base};
@@ -167,7 +167,7 @@ $minWidth: 12rem;
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color], [disabled])) {
-  $color: use_color("neutral.base");
+  $color: theme.use_color("neutral.base");
 
   > input:hover {
     --button-background: color-mix(in oklab, #{$color} 90%, black);
@@ -189,9 +189,9 @@ $minWidth: 12rem;
 // ----------------------------------------------------------------
 
 :host([disabled]) {
-  $background: use_color("base.200");
-  $color: use_color("base.content", 0.2);
-  $btn-background: use_color("neutral.base", 0.2);
+  $background: theme.use_color("base.200");
+  $color: theme.use_color("base.content", 0.2);
+  $btn-background: theme.use_color("neutral.base", 0.2);
 
   --background: #{$background};
   --border-color: #{$background};
diff --git a/packages/core/src/components/input/input.scss b/packages/core/src/components/input/input.scss
index 9e57faf..78f20e8 100644
--- a/packages/core/src/components/input/input.scss
+++ b/packages/core/src/components/input/input.scss
@@ -24,7 +24,7 @@ $minWidth: 12rem;
   --border-radius: #{theme.use_radius(md)};
   --border-color: transparent;
   --outline-color: #{theme.use_color("base.content", 0.2)};
-  --background: #{theme.use_color("base.100")};
+  --background: #{theme.use_color("base.100", var(--opacity, 1))};
   --color: #{theme.use_color("base.content")};
 
   @include input.label;
@@ -69,6 +69,8 @@ $minWidth: 12rem;
 
       font-family: theme.use_font();
       white-space: pre-wrap;
+      text-overflow: ellipsis;
+      text-wrap: auto;
 
       cursor: inherit;
 
@@ -130,7 +132,7 @@ $minWidth: 12rem;
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
+    $base: theme.use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -142,19 +144,18 @@ $minWidth: 12rem;
 
 :host([color="ghost"]) {
   --opacity: 0.05;
-
-  > .input-wrapper:has(input:focus) {
-    --opacity: 1;
-  }
+}
+:host([color="ghost"]:focus) {
+  --opacity: 1;
 }
 
 // Input State
 // ----------------------------------------------------------------
 
 :host([readonly]) {
-  $base: use_color("base.200");
-  $neutral: use_color("neutral.base");
-  $text: use_color("base.content", 0.8);
+  $base: theme.use_color("base.200");
+  $neutral: theme.use_color("neutral.base");
+  $text: theme.use_color("base.content", 0.8);
 
   --background: #{$base};
   --border-color: #{$neutral};
@@ -168,8 +169,8 @@ $minWidth: 12rem;
 }
 
 :host([disabled]) {
-  $base: use_color("base.200");
-  $text: use_color("base.content");
+  $base: theme.use_color("base.200");
+  $text: theme.use_color("base.content");
 
   --background: #{$base};
   --border-color: #{$base};
diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
index 2de74a8..5dba0cd 100644
--- a/packages/core/src/components/input/input.tsx
+++ b/packages/core/src/components/input/input.tsx
@@ -33,7 +33,9 @@ let inputIds = 0;
 @Component({
   tag: 'pop-input',
   styleUrl: 'input.scss',
-  shadow: true,
+  shadow: {
+    delegatesFocus: true,
+  },
   formAssociated: true,
 })
 export class Input implements ComponentInterface {
diff --git a/packages/core/src/components/input/tests/basic/index.html b/packages/core/src/components/input/tests/basic/index.html
new file mode 100644
index 0000000..0419878
--- /dev/null
+++ b/packages/core/src/components/input/tests/basic/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Input Basic | Poppy-ui</title>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
+    <style>
+        main {
+            width: 100vw;
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1rem;
+
+            background-color: var(--base-300);
+        }
+        section {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: .35rem;
+        }
+        div {
+            display: flex;
+            flex-wrap: wrap;
+            gap: .5rem;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <section>
+            <h2>Input - basic</h2>
+            <div>
+                <pop-input>no color</pop-input>
+                <pop-input color="primary">primary</pop-input>
+                <pop-input color="secondary">secondary</pop-input>
+                <pop-input color="accent">accent</pop-input>
+                <pop-input color="info">info</pop-input>
+                <pop-input color="success">success</pop-input>
+                <pop-input color="warning">warning</pop-input>
+                <pop-input color="error" error-text="test">error</pop-input>
+                <pop-input color="ghost">ghost</pop-input>
+            </div>
+        </section>
+        <section>
+            <h2>Input - outlined</h2>
+            <div>
+                <pop-input outlined>no color</pop-input>
+                <pop-input outlined color="primary">primary</pop-input>
+                <pop-input outlined color="secondary">secondary</pop-input>
+                <pop-input outlined color="accent">accent</pop-input>
+                <pop-input outlined color="info">info</pop-input>
+                <pop-input outlined color="success">success</pop-input>
+                <pop-input outlined color="warning">warning</pop-input>
+                <pop-input outlined color="error">error</pop-input>
+            </div>
+        </section>
+        <section>
+            <h2>Button - disabled (basic)</h2>
+            <div>
+                <pop-input disabled>no color</pop-input>
+                <pop-input disabled color="primary">primary</pop-input>
+                <pop-input disabled color="secondary">secondary</pop-input>
+                <pop-input disabled color="accent">accent</pop-input>
+                <pop-input disabled color="info">info</pop-input>
+                <pop-input disabled color="success">success</pop-input>
+                <pop-input disabled color="warning">warning</pop-input>
+                <pop-input disabled color="error">error</pop-input>
+                <pop-input disabled color="ghost">ghost</pop-input>
+            </div>
+        </section>
+        <section>
+            <h2>Button - outlined disabled</h2>
+            <div>
+                <pop-input outlined disabled>no color</pop-input>
+                <pop-input outlined disabled color="primary">primary</pop-input>
+                <pop-input outlined disabled color="secondary">secondary</pop-input>
+                <pop-input outlined disabled color="accent">accent</pop-input>
+                <pop-input outlined disabled color="info">info</pop-input>
+                <pop-input outlined disabled color="success">success</pop-input>
+                <pop-input outlined disabled color="warning">warning</pop-input>
+                <pop-input outlined disabled color="error">error</pop-input>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/packages/core/src/components/input/tests/text/index.html b/packages/core/src/components/input/tests/text/index.html
new file mode 100644
index 0000000..1f7a5b0
--- /dev/null
+++ b/packages/core/src/components/input/tests/text/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Input Basic | Poppy-ui</title>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
+    <style>
+        main {
+            width: 100vw;
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1rem;
+
+            background-color: var(--base-300);
+        }
+        section {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: .35rem;
+        }
+        div {
+            display: flex;
+            flex-wrap: wrap;
+            gap: .5rem;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <section>
+            <h2>Input - basic</h2>
+            <div>
+                <pop-input color="primary" helper-text="helper">helper</pop-input>
+                <pop-input color="primary" error-text="error">error</pop-input>
+                <pop-input color="primary" helper-text="helper" error-text="error">helper + error</pop-input>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/packages/core/src/components/item/item.scss b/packages/core/src/components/item/item.scss
index a7786b9..4a4454f 100644
--- a/packages/core/src/components/item/item.scss
+++ b/packages/core/src/components/item/item.scss
@@ -40,14 +40,14 @@
 :host(:not(.has-list)) > {
   .item-inner:is(:hover, :focus),
   .item-inner:has(:focus) {
-    background-color: use_color("base.content", 0.1);
+    background-color: theme.use_color("base.content", 0.1);
     color: inherit;
   }
 }
 
 :host > .item-inner:active {
-  background-color: use_color("neutral.base");
-  color: use_color("neutral.content");
+  background-color: theme.use_color("neutral.base");
+  color: theme.use_color("neutral.content");
 }
 
 // Item context
@@ -59,7 +59,8 @@
 :host(.in-list-md) > .item-inner {
   height: 36px;
   padding: 0.5rem 1rem;
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
+  border-radius: theme.use_radius(md);
 
   font-size: 0.875rem;
   line-height: 1.25rem;
@@ -67,7 +68,7 @@
 :host(.in-list-xs) > .item-inner {
   height: 24px;
   padding: 0.25rem 0.5rem;
-  border-radius: use_radius(sm);
+  border-radius: theme.use_radius(sm);
 
   font-size: 0.75rem;
   line-height: 1rem;
@@ -75,14 +76,14 @@
 :host(.in-list-sm) > .item-inner {
   height: 28px;
   padding: 0.25rem 0.75rem;
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
 
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 :host(.in-list-lg) > .item-inner {
   height: 52px;
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
 
   font-size: 1.125rem;
   line-height: 1.75rem;
diff --git a/packages/core/src/components/list/list.scss b/packages/core/src/components/list/list.scss
index df16e84..19965f9 100644
--- a/packages/core/src/components/list/list.scss
+++ b/packages/core/src/components/list/list.scss
@@ -27,23 +27,23 @@ pop-list[orientation="horizontal"] {
 // ----------------------------------------------------------------
 
 pop-list[size="xs"] {
-  border-radius: use_radius(sm);
+  border-radius: theme.use_radius(sm);
   font-size: 0.75rem;
   line-height: 1rem;
 }
 pop-list[size="sm"] {
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 pop-list[size="md"],
 pop-list:not([size]) {
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 pop-list[size="lg"] {
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
@@ -52,12 +52,12 @@ pop-list[size="lg"] {
 // ----------------------------------------------------------------
 
 pop-list[size="xs"] > :is(pop-list-title, pop-item) {
-  border-radius: use_radius(sm);
+  border-radius: theme.use_radius(sm);
   font-size: 0.75rem;
   line-height: 1rem;
 }
 pop-list[size="sm"] > :is(pop-list-title, pop-item) {
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
@@ -65,14 +65,14 @@ pop-list {
   &[size="md"],
   &:not([size]) {
     > :is(pop-list-title, pop-item) {
-      border-radius: use_radius(md);
+      border-radius: theme.use_radius(md);
       font-size: 0.875rem;
       line-height: 1.25rem;
     }
   }
 }
 pop-list[size="lg"] > :is(pop-list-title, pop-item) {
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
   font-size: 1.125rem;
   line-height: 1.75rem;
 }
@@ -97,7 +97,7 @@ pop-list.in-item {
     content: "";
 
     --tw-bg-opacity: 1;
-    background-color: use_color("base.content");
+    background-color: theme.use_color("base.content");
     opacity: 0.1;
   }
 }
diff --git a/packages/core/src/components/progress/progress.scss b/packages/core/src/components/progress/progress.scss
index b8bb05e..7c55f0b 100644
--- a/packages/core/src/components/progress/progress.scss
+++ b/packages/core/src/components/progress/progress.scss
@@ -71,7 +71,7 @@
 // Color
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
+    $base: theme.use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --background-active: #{$base};
diff --git a/packages/core/src/components/radio/radio.scss b/packages/core/src/components/radio/radio.scss
index 7995f1f..1df0999 100644
--- a/packages/core/src/components/radio/radio.scss
+++ b/packages/core/src/components/radio/radio.scss
@@ -15,7 +15,7 @@
 // Radio
 // ----------------------------------------------------------------
 
-$base: use_color("base.100");
+$base: get-color("base.100");
 
 :host {
   --border-radius: #{theme.use_radius(full)};
@@ -121,8 +121,8 @@ $base: use_color("base.100");
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $border: use_color("#{$color}.base", var(--border-opacity, 1));
-    $background: use_color("#{$color}.base", var(--opacity, 1));
+    $border: theme.use_color("#{$color}.base", var(--border-opacity, 1));
+    $background: theme.use_color("#{$color}.base", var(--opacity, 1));
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -133,8 +133,8 @@ $base: use_color("base.100");
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color])) {
-  $border: use_color("base.content", var(--border-opacity, 1));
-  $background: use_color("base.content", var(--opacity, 1));
+  $border: theme.use_color("base.content", var(--border-opacity, 1));
+  $background: theme.use_color("base.content", var(--opacity, 1));
 
   --border-color: #{$border};
   --background: #{$background};
diff --git a/packages/core/src/components/range/range.scss b/packages/core/src/components/range/range.scss
index 6234378..ea9e967 100644
--- a/packages/core/src/components/range/range.scss
+++ b/packages/core/src/components/range/range.scss
@@ -118,7 +118,7 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base", var(--active-track-opacity, 1));
+    $base: theme.use_color("#{$color}.base", var(--active-track-opacity, 1));
 
     :host([color="#{$color}"]) {
       --active-track-color: #{$base};
@@ -128,8 +128,8 @@
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color])) {
-  $color: use_color("base.content", var(--track-opacity, 0.2));
-  $active: use_color("base.content", var(--active-track-opacity, 1));
+  $color: theme.use_color("base.content", var(--track-opacity, 0.2));
+  $active: theme.use_color("base.content", var(--active-track-opacity, 1));
 
   --track-color: #{$color};
   --active-track-color: #{$active};
@@ -139,7 +139,7 @@
 // ----------------------------------------------------------------
 
 :host([disabled]) > input {
-  $active: use_color("base.content", var(--active-track-opacity, 1));
+  $active: theme.use_color("base.content", var(--active-track-opacity, 1));
 
   --active-track-color: #{$active};
   cursor: not-allowed;
diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss
index e2eeb52..8b5c54a 100644
--- a/packages/core/src/components/select/select.scss
+++ b/packages/core/src/components/select/select.scss
@@ -99,7 +99,7 @@ $minWidth: 12rem;
 // Color
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
+    $base: theme.use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -156,8 +156,8 @@ $minWidth: 12rem;
 }
 
 :host([disabled]) button {
-  $base: use_color("base.200");
-  $text: use_color("base.content", 0.2);
+  $base: theme.use_color("base.200");
+  $text: theme.use_color("base.content", 0.2);
 
   --background: #{$base};
   --border-color: #{$base};
diff --git a/packages/core/src/components/textarea/textarea.scss b/packages/core/src/components/textarea/textarea.scss
index b6c7e42..76d8628 100644
--- a/packages/core/src/components/textarea/textarea.scss
+++ b/packages/core/src/components/textarea/textarea.scss
@@ -99,7 +99,7 @@ $minWidth: 12rem;
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
+    $base: theme.use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
diff --git a/packages/core/src/components/tooltip/tooltip.scss b/packages/core/src/components/tooltip/tooltip.scss
index 0d4aef8..e5c8ce0 100644
--- a/packages/core/src/components/tooltip/tooltip.scss
+++ b/packages/core/src/components/tooltip/tooltip.scss
@@ -39,7 +39,7 @@ pop-tooltip {
     width: max-content;
     max-width: 20rem;
     padding: 0.5rem 0.25rem;
-    border-radius: use_radius(sm);
+    border-radius: theme.use_radius(sm);
     background-color: var(--background);
 
     content: attr(data-tip);
@@ -146,8 +146,8 @@ pop-tooltip[position="right"] {
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base", var(--background-opacity, 1));
-    $text: use_color("#{$color}.content", var(--text-opacity, 1));
+    $base: theme.use_color("#{$color}.base", var(--background-opacity, 1));
+    $text: theme.use_color("#{$color}.content", var(--text-opacity, 1));
 
     pop-tooltip[color="#{$color}"] {
       --background: #{$base};
diff --git a/packages/core/src/themes/functions/poppy.shadows.scss b/packages/core/src/themes/functions/poppy.shadows.scss
index ce2f7f5..d912d22 100644
--- a/packages/core/src/themes/functions/poppy.shadows.scss
+++ b/packages/core/src/themes/functions/poppy.shadows.scss
@@ -2,7 +2,7 @@
 
 @function use_shadow($size: md) {
   $value: map-get(
-    $map: $shadows,
+    $map: theme.$shadows,
     $key: $size,
   );
 
diff --git a/packages/core/src/themes/utils/_input.scss b/packages/core/src/themes/utils/_input.scss
index 68b7b4d..93fd0a6 100644
--- a/packages/core/src/themes/utils/_input.scss
+++ b/packages/core/src/themes/utils/_input.scss
@@ -19,10 +19,10 @@
     display: inline-flex;
     flex-wrap: wrap;
     align-items: center;
-    padding: 0.5rem 0.25rem;
+    padding: 0.25rem 0.25rem 0.5rem;
     gap: 4px;
 
-    font-size: 0.75rem;
+    font-size: 0.8rem;
     line-height: 1rem;
 
     &:empty {
@@ -30,10 +30,7 @@
     }
   }
 
-  > #{$selector}:not(:user-invalid) + .text-wrapper > .error-text {
-    display: none;
-  }
-  > #{$selector}:user-invalid + .text-wrapper > .helper-text {
+  > #{$selector} + .text-wrapper:has(.error-text) > .helper-text {
     display: none;
   }