diff --git a/packages/uui-input/lib/uui-input.element.ts b/packages/uui-input/lib/uui-input.element.ts
index a5e3502fc..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 {
@@ -407,7 +411,7 @@ export class UUIInputElement extends FormControlMixin(
}
private renderInputWithAutoWidth() {
- html`
+ return html`
${this.renderInput()}${this.renderAutoWidthBackground()}
`;
}
diff --git a/packages/uui-input/lib/uui-input.story.ts b/packages/uui-input/lib/uui-input.story.ts
index 1b5806f27..149febbfe 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}>
+ ?auto-width=${props.autoWidth}>
+ ?auto-width=${props.autoWidth}>
- `,
+
+
+
+
`,
args: {
autoWidth: true,
placeholder: 'Start typing...',
diff --git a/packages/uui-tabs/lib/uui-tab.element.ts b/packages/uui-tabs/lib/uui-tab.element.ts
index 4f8ff187d..f8eedf616 100644
--- a/packages/uui-tabs/lib/uui-tab.element.ts
+++ b/packages/uui-tabs/lib/uui-tab.element.ts
@@ -40,7 +40,7 @@ export class UUITabElement extends ActiveMixin(LabelMixin('', LitElement)) {
min-height: var(--uui-size-12);
min-width: 70px;
padding: var(--uui-size-2)
- var(--uui-tab-padding-horizontal, var(--uui-size-4));
+ var(--uui-tab-padding-horizontal, var(--uui-size-5));
border: none;
font-size: inherit;
background: none;