From 734f7ba7b5c7da8ce0ed24c1fa1077165242ae93 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 19 Sep 2023 15:10:05 +0200
Subject: [PATCH 1/2] small bugfix for auto width not rendering

---
 packages/uui-input/lib/uui-input.element.ts | 2 +-
 packages/uui-input/lib/uui-input.story.ts   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
index a5e3502fc..67f2587cb 100644
--- a/packages/uui-input/lib/uui-input.element.ts
+++ b/packages/uui-input/lib/uui-input.element.ts
@@ -407,7 +407,7 @@ export class UUIInputElement extends FormControlMixin(
   }
 
   private renderInputWithAutoWidth() {
-    html`<div id="control">
+    return html`<div id="control">
       ${this.renderInput()}${this.renderAutoWidthBackground()}
     </div>`;
   }
diff --git a/packages/uui-input/lib/uui-input.story.ts b/packages/uui-input/lib/uui-input.story.ts
index 1b5806f27..a40daac10 100644
--- a/packages/uui-input/lib/uui-input.story.ts
+++ b/packages/uui-input/lib/uui-input.story.ts
@@ -314,7 +314,7 @@ export const AutoWidth: Story = {
         .name=${props.name}
         .placeholder=${props.placeholder}
         .value=${props.value}
-        .autoWidth=${props.autoWidth}>
+        ?auto-width=${props.autoWidth}>
       </uui-input>
       <br /><br />
       <uui-input
@@ -329,11 +329,11 @@ export const AutoWidth: Story = {
         .name=${props.name}
         .placeholder=${props.placeholder}
         .value=${props.value}
-        .autoWidth=${props.autoWidth}>
+        ?auto-width=${props.autoWidth}>
         <uui-input
           slot="prepend"
           placeholder="Prepend auto-width"
-          .autoWidth=${props.autoWidth}></uui-input>
+          ?auto-width=${props.autoWidth}></uui-input>
         <uui-input
           slot="append"
           placeholder="Append auto-width false"></uui-input>

From 553bd0e6a1ffcc6e97beb53f4042fa10fa0c1dd6 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 22 Sep 2023 10:53:20 +0200
Subject: [PATCH 2/2] Additional margin option, useful when type=number

---
 packages/uui-input/lib/uui-input.element.ts |  4 ++++
 packages/uui-input/lib/uui-input.story.ts   | 18 +++++++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
index 67f2587cb..ce9323260 100644
--- a/packages/uui-input/lib/uui-input.element.ts
+++ b/packages/uui-input/lib/uui-input.element.ts
@@ -58,6 +58,8 @@ export class UUIInputElement extends FormControlMixin(
           var(--uui-input-border-color, var(--uui-color-border));
 
         --uui-button-height: 100%;
+        --auto-width-text-margin-right: 0;
+        --auto-width-text-margin-left: 0;
       }
 
       #control {
@@ -75,6 +77,8 @@ export class UUIInputElement extends FormControlMixin(
         z-index: -1;
         height: 0px;
         padding: 0 var(--uui-size-space-3);
+        margin: 0 var(--auto-width-text-margin-right) 0
+          var(--auto-width-text-margin-left);
       }
 
       :host([auto-width]) #input {
diff --git a/packages/uui-input/lib/uui-input.story.ts b/packages/uui-input/lib/uui-input.story.ts
index a40daac10..149febbfe 100644
--- a/packages/uui-input/lib/uui-input.story.ts
+++ b/packages/uui-input/lib/uui-input.story.ts
@@ -337,7 +337,23 @@ export const AutoWidth: Story = {
         <uui-input
           slot="append"
           placeholder="Append auto-width false"></uui-input>
-      </uui-input>`,
+      </uui-input>
+
+      <br /><br />
+      <uui-input
+        .min=${props.min}
+        .max=${props.max}
+        .step=${props.step}
+        .disabled=${props.disabled}
+        .readonly=${props.readonly}
+        .error=${props.error}
+        .label=${props.label}
+        .type=${props.type}
+        .name=${props.name}
+        style="--auto-width-text-margin-right: 50px"
+        placeholder="--auto-width-text-margin-right: 50px"
+        .value=${props.value}
+        ?auto-width=${props.autoWidth}></uui-input>`,
   args: {
     autoWidth: true,
     placeholder: 'Start typing...',