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;