fix: sd-combobox mobile visual issues

.changeset/silent-views-roll.md

@@ -0,0 +1,8 @@
+---
+'@solid-design-system/components': patch
+'@solid-design-system/docs': patch
+---
+
+- Fixed the mobile view responsiveness of `sd-combobox` when using multiple tags.
+- Fixed the mobile clipping for the `sd-combobox` stories in the Documentation.
+- Fixed the mobile background when focused for the components `sd-combobox`, `sd-input`, `sd-select`, `sd-datepicker` and `sd-textarea`.

packages/components/src/components/combobox/combobox.ts

@@ -267,6 +267,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
   @property() getTag: (option: SdOption, index: number) => TemplateResult | string | HTMLElement = option => {
     return html`
       <sd-tag
+        class="min-w-0 max-w-full"
         ?disabled=${this.disabled}
         part="tag"
         exportparts="
@@ -349,6 +350,7 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
       return [
         html`
           <sd-tag
+            class="min-w-0 max-w-full"
             ?disabled=${this.disabled}
             part="tag"
             exportparts="
@@ -1319,7 +1321,9 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
               part="combobox"
               class=${cx(
                 'relative w-full px-4 flex flex-row items-center rounded-default transition-colors hover:duration-fast ease-in-out',
-                this.visuallyDisabled || this.disabled ? 'hover:bg-transparent' : 'hover:bg-neutral-200',
+                this.visuallyDisabled || this.disabled
+                  ? 'hover:bg-transparent'
+                  : 'hover:[@media(hover:hover)]:bg-neutral-200',
                 this.open && 'shadow transition-shadow duration-medium ease-in-out',
                 ['invalid', 'activeInvalid'].includes(selectState) && 'form-control--invalid-color-background',
                 {
@@ -1340,55 +1344,67 @@ export default class SdCombobox extends SolidElement implements SolidFormControl
                     class="${cx('inline-flex', iconMarginRight, iconColor, iconSize)}"
                   ></slot>`
                 : ''}
-              ${this.multiple && this.useTags && this.tags.length > 0
-                ? html`<div
-                    part="tags"
-                    class="${cx('flex items-center gap-1', iconMarginRight, this.floatingLabel && 'mt-4')}"
-                  >
-                    ${this.tags}
-                  </div>`
-                : null}
-              <input
-                id="display-input"
-                name=${this.name}
-                form=${this.form}
-                part="display-input"
-                class=${cx(
-                  'appearance-none outline-none bg-transparent flex-auto min-w-0',
-                  cursorStyles,
-                  this.selectedTextLabel && !this.multiple
-                    ? 'placeholder:form-control-color-text'
-                    : 'placeholder:text-neutral-700',
-                  this.size === 'sm' ? (isFloatingLabelActive ? 'h-4' : 'h-6') : isFloatingLabelActive ? 'h-6' : 'h-8',
-                  isFloatingLabelActive && 'leading-none mt-4'
-                )}
-                type="text"
-                placeholder=${!this.floatingLabel || isFloatingLabelActive
-                  ? this.selectedTextLabel && !this.multiple
-                    ? this.selectedTextLabel
-                    : this.placeholder || this.localize.term('comboboxDefaultPlaceholder')
-                  : ''}
-                .disabled=${this.disabled}
-                .value=${this.displayInputValue}
-                autocomplete="off"
-                spellcheck="false"
-                autocapitalize="off"
-                aria-controls="listbox"
-                aria-expanded=${this.open}
-                aria-haspopup="listbox"
-                aria-labelledby="label"
-                aria-disabled=${this.disabled || this.visuallyDisabled}
-                aria-describedby="help-text invalid-message"
-                aria-invalid="${this.showInvalidStyle}"
-                role="combobox"
-                tabindex="0"
-                @focus=${this.handleFocus}
-                @blur=${this.handleBlur}
-                aria-autocomplete="list"
-                aria-owns="listbox"
-                @input=${this.handleInput}
-                @change=${this.handleChange}
-              />
+              <div class="flex flex-wrap items-center gap-1 w-full min-w-0 relative">
+                ${this.multiple && this.useTags && this.tags && this.tags.length > 0
+                  ? html`<div
+                      part="tags"
+                      class="${cx(
+                        'flex flex-wrap items-center gap-1 min-w-0',
+                        iconMarginRight,
+                        this.floatingLabel && 'mt-4'
+                      )}"
+                    >
+                      ${this.tags}
+                    </div>`
+                  : null}
+                <input
+                  id="display-input"
+                  name=${this.name}
+                  form=${this.form}
+                  part="display-input"
+                  class=${cx(
+                    'appearance-none outline-none bg-transparent flex-auto min-w-0',
+                    cursorStyles,
+                    this.selectedTextLabel && !this.multiple
+                      ? 'placeholder:form-control-color-text'
+                      : 'placeholder:text-neutral-700',
+                    this.size === 'sm'
+                      ? isFloatingLabelActive
+                        ? 'h-4'
+                        : 'h-6'
+                      : isFloatingLabelActive
+                        ? 'h-6'
+                        : 'h-8',
+                    isFloatingLabelActive && 'leading-none mt-4'
+                  )}
+                  type="text"
+                  placeholder=${!this.floatingLabel || isFloatingLabelActive
+                    ? this.selectedTextLabel && !this.multiple
+                      ? this.selectedTextLabel
+                      : this.placeholder || this.localize.term('comboboxDefaultPlaceholder')
+                    : ''}
+                  .disabled=${this.disabled}
+                  .value=${this.displayInputValue}
+                  autocomplete="off"
+                  spellcheck="false"
+                  autocapitalize="off"
+                  aria-controls="listbox"
+                  aria-expanded=${this.open}
+                  aria-haspopup="listbox"
+                  aria-labelledby="label"
+                  aria-disabled=${this.disabled || this.visuallyDisabled}
+                  aria-describedby="help-text invalid-message"
+                  aria-invalid="${this.showInvalidStyle}"
+                  role="combobox"
+                  tabindex="0"
+                  @focus=${this.handleFocus}
+                  @blur=${this.handleBlur}
+                  aria-autocomplete="list"
+                  aria-owns="listbox"
+                  @input=${this.handleInput}
+                  @change=${this.handleChange}
+                />
+              </div>
               <div aria-live="polite" id="control-value" class="absolute top-0 left-0 opacity-0 -z-10">
                 ${this.selectedOptions.map(option => option?.getTextLabel()).join(', ')}
               </div>

packages/components/src/components/datepicker/datepicker.ts

@@ -2106,7 +2106,9 @@ export default class SdDatepicker extends SolidElement implements SolidFormContr
               part="base"
               class=${cx(
                 'px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast w-full',
-                !this.disabled && !this.readonly && !this.visuallyDisabled ? 'hover:bg-neutral-200' : '',
+                !this.disabled && !this.readonly && !this.visuallyDisabled
+                  ? 'hover:[@media(hover:hover)]:bg-neutral-200'
+                  : '',
                 this.readonly ? 'bg-neutral-100' : 'bg-white',
                 inputState === 'disabled' || inputState === 'visuallyDisabled' ? 'text-neutral-500' : 'text-black'
               )}

packages/components/src/components/input/input.ts

@@ -635,7 +635,9 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               'px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast',
               this.floatingLabel && 'has-floating-label',
               // States
-              !this.disabled && !this.readonly && !this.visuallyDisabled ? 'hover:bg-neutral-200' : '',
+              !this.disabled && !this.readonly && !this.visuallyDisabled
+                ? 'hover:[@media(hover:hover)]:bg-neutral-200'
+                : '',
               this.readonly ? 'bg-neutral-100' : 'bg-white',
               ['disabled', 'visuallyDisabled'].includes(inputState) ? 'text-neutral-500' : 'form-control-color-text',
               ['invalid', 'activeInvalid'].includes(inputState) && 'form-control--invalid-color-background',

packages/components/src/components/select/select.ts

@@ -1050,7 +1050,9 @@ export default class SdSelect extends SolidElement implements SolidFormControl {
             <div
               class=${cx(
                 'relative w-full h-full grid rounded-default transition-colors hover:duration-fast ease-in-out',
-                this.visuallyDisabled || this.disabled ? 'hover:bg-transparent' : 'hover:bg-neutral-200',
+                this.visuallyDisabled || this.disabled
+                  ? 'hover:bg-transparent'
+                  : 'hover:[@media(hover:hover)]:bg-neutral-200',
                 ['invalid', 'activeInvalid'].includes(selectState) && 'form-control--invalid-color-background'
               )}
               slot="anchor"

packages/components/src/components/textarea/textarea.ts

@@ -447,7 +447,9 @@ export default class SdTextarea extends SolidElement implements SolidFormControl
                 md: 'textarea-md',
                 lg: 'textarea-lg'
               }[this.size],
-              !this.disabled && !this.readonly && !this.visuallyDisabled ? 'hover:bg-neutral-200' : '',
+              !this.disabled && !this.readonly && !this.visuallyDisabled
+                ? 'hover:[@media(hover:hover)]:bg-neutral-200'
+                : '',
               this.readonly ? 'bg-neutral-100' : 'bg-white',
               textareaState === 'disabled' || textareaState === 'visuallyDisabled'
                 ? 'text-neutral-500'