Merge branch 'master' into sivanova/disabled-date-picker

Author: simeonoff

src/components/combo/themes/combo.base.scss

@@ -2,6 +2,8 @@
 @use 'styles/utilities' as *;
 
 :host {
+    --item-count: 6;
+
     display: block;
     font-family: var(--ig-font-family);
 
@@ -73,7 +75,7 @@
 }
 
 [part='list'] {
-    min-height: rem(200px) !important;
+    min-height: calc(var(--size) * var(--item-count)) !important;
     outline-style: none;
 }
 

src/components/combo/themes/shared/combo.indigo.scss

@@ -9,6 +9,7 @@ $dropdown-theme: dropdown-theme.$indigo;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+    --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))};
     --combo-size: var(--component-size);
 
     igc-input::part(container) {
@@ -21,6 +22,11 @@ $dropdown-theme: dropdown-theme.$indigo;
         margin-block-start: rem(4px);
         grid-auto-rows: minmax(rem(15px), auto);
     }
+
+    igc-icon,
+    ::slotted(igc-icon) {
+        --size: var(--input-icon) !important;
+    }
 }
 
 [part='case-icon'] {
@@ -61,6 +67,10 @@ $dropdown-theme: dropdown-theme.$indigo;
     }
 }
 
+[part='list'] {
+    min-height: calc(var(--size) * var(--item-count) + rem(16px)) !important;
+}
+
 [part='filter-input'] {
     padding: pad-inline(rem(12px));
 }

src/components/common/util.ts

@@ -1,4 +1,4 @@
-import { isServer } from 'lit';
+import { isServer, nothing } from 'lit';
 
 export const asPercent = (part: number, whole: number) => (part / whole) * 100;
 
@@ -581,3 +581,13 @@ export function toMerged<
 >(target: T, source: S): T & S {
   return merge(structuredClone(target), source);
 }
+
+/**
+ * Similar to Lit's `ifDefined` directive except one can check `assertion`
+ * and bind a different `value` through this wrapper.
+ */
+export function bindIf<T>(assertion: unknown, value: T): NonNullable<T> {
+  return assertion
+    ? (value ?? (nothing as NonNullable<T>))
+    : (nothing as NonNullable<T>);
+}

src/components/file-input/file-input.ts

@@ -1,6 +1,5 @@
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
@@ -10,7 +9,7 @@ import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormValueFileListTransformers } from '../common/mixins/forms/form-transformers.js';
 import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import { isEmpty } from '../common/util.js';
+import { bindIf, isEmpty } from '../common/util.js';
 import {
   IgcInputBaseComponent,
   type IgcInputComponentEventMap,
@@ -126,12 +125,6 @@ export default class IgcFileInputComponent extends EventEmitterMixin<
   @property({ type: Boolean })
   public override autofocus!: boolean;
 
-  /**
-   * @internal
-   */
-  @property({ type: Number })
-  public override tabIndex = 0;
-
   /** @hidden */
   @property({ type: Boolean, attribute: false, noAccessor: true })
   public override readonly readOnly = false;
@@ -208,6 +201,9 @@ export default class IgcFileInputComponent extends EventEmitterMixin<
   }
 
   protected renderInput() {
+    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
+    const hasHelperText = !isEmpty(this._helperText);
+
     return html`
       <input
         id=${this.inputId}
@@ -217,11 +213,9 @@ export default class IgcFileInputComponent extends EventEmitterMixin<
         ?required=${this.required}
         ?autofocus=${this.autofocus}
         ?multiple=${this.multiple}
-        tabindex=${this.tabIndex}
-        accept=${ifDefined(this.accept === '' ? undefined : this.accept)}
-        aria-describedby=${ifDefined(
-          isEmpty(this._helperText) ? nothing : 'helper-text'
-        )}
+        tabindex=${bindIf(hasNegativeTabIndex, -1)}
+        accept=${bindIf(this.accept, this.accept)}
+        aria-describedby=${bindIf(hasHelperText, 'helper-text')}
         @click=${this._handleClick}
         @change=${this._handleChange}
         @cancel=${this._handleCancel}

src/components/input/input.ts

@@ -1,12 +1,12 @@
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 
 import { registerComponent } from '../common/definitions/register.js';
 import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import { isEmpty } from '../common/util.js';
+import { bindIf, isEmpty } from '../common/util.js';
 import type { InputType, RangeTextSelectMode } from '../types.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { IgcInputBaseComponent } from './input-base.js';
@@ -199,12 +199,6 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
   @property({ type: Boolean, reflect: true, attribute: 'validate-only' })
   public validateOnly = false;
 
-  /**
-   * @internal
-   */
-  @property({ type: Number })
-  public override tabIndex = 0;
-
   /* blazorSuppress */
   /** Replaces the selected text in the input. */
   public override setRangeText(
@@ -247,6 +241,9 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
   }
 
   protected renderInput() {
+    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
+    const hasHelperText = !isEmpty(this._helperText);
+
     return html`
       <input
         id=${this.inputId}
@@ -260,17 +257,15 @@ export default class IgcInputComponent extends IgcInputBaseComponent {
         ?disabled=${this.disabled}
         ?required=${this.required}
         ?autofocus=${this.autofocus}
-        tabindex=${this.tabIndex}
+        tabindex=${bindIf(hasNegativeTabIndex, -1)}
         autocomplete=${ifDefined(this.autocomplete as any)}
         inputmode=${ifDefined(this.inputMode)}
-        min=${ifDefined(this.validateOnly ? undefined : this.min)}
-        max=${ifDefined(this.validateOnly ? undefined : this.max)}
+        min=${bindIf(!this.validateOnly, this.min)}
+        max=${bindIf(!this.validateOnly, this.max)}
         minlength=${ifDefined(this.minLength)}
-        maxlength=${ifDefined(this.validateOnly ? undefined : this.maxLength)}
+        maxlength=${bindIf(!this.validateOnly, this.maxLength)}
         step=${ifDefined(this.step)}
-        aria-describedby=${ifDefined(
-          isEmpty(this._helperText) ? nothing : 'helper-text'
-        )}
+        aria-describedby=${bindIf(hasHelperText, 'helper-text')}
         @change=${this.handleChange}
         @input=${this.handleInput}
         @blur=${this._handleBlur}

src/components/select/select.ts

@@ -663,7 +663,6 @@ export default class IgcSelectComponent extends FormAssociatedRequiredMixin(
         aria-describedby="select-helper-text"
         aria-expanded=${this.open}
         exportparts="container: input, input: native-input, label, prefix, suffix"
-        tabIndex=${this.disabled ? -1 : 0}
         value=${ifDefined(value)}
         placeholder=${ifDefined(this.placeholder)}
         label=${ifDefined(this.label)}

src/components/select/themes/shared/select.indigo.scss

@@ -11,6 +11,7 @@ $input-theme: input-theme.$indigo;
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
     --select-size: var(--component-size);
     --dropdown-size: var(--component-size);
+    --input-icon: #{sizable(rem(14px), rem(16px), rem(18px))};
 
     ::part(helper-text) {
         @include type-style('caption');
@@ -26,6 +27,11 @@ $input-theme: input-theme.$indigo;
     igc-input::part(container) {
         padding-inline: 0;
     }
+
+    igc-icon,
+    ::slotted(igc-icon) {
+        --size: var(--input-icon) !important;
+    }
 }
 
 [part='base'] {