Repository: ionic-team/ionic-framework
File: core/src/components/select/select.tsx (TypeScript)

Code before:
    return (
      <Host
        onClick={this.onClick}
        class={createColorClasses(this.color, {
          [mode]: true,
          'in-item': inItem,
          'in-item-color': hostContext('ion-item.ion-color', el),
          'select-disabled': disabled,
          'select-expanded': isExpanded,
          'has-expanded-icon': expandedIcon !== undefined,
          'has-value': hasValue,
          'label-floating': labelShouldFloat,
          'has-placeholder': placeholder !== undefined,
          'has-focus': hasFocus,
          // TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
          'ion-focusable': true,
          [`select-${rtl}`]: true,
          [`select-fill-${fill}`]: fill !== undefined,
          [`select-justify-${justify}`]: justifyEnabled,
          [`select-shape-${shape}`]: shape !== undefined,
          [`select-label-placement-${labelPlacement}`]: true,
        })}
      >
        <label class="select-wrapper" id="select-label" onClick={this.onLabelClick} part="wrapper">
          {this.renderLabelContainer()}
          <div class="select-wrapper-inner" part="wrapper-inner">
            <slot name="start"></slot>
            <div class="native-wrapper" ref={(el) => (this.nativeWrapperEl = el)} part="container">
              {this.renderSelectText()}
              {this.renderListbox()}
            </div>
            <slot name="end"></slot>
            {!hasFloatingOrStackedLabel && this.renderSelectIcon()}
          </div>
          {/**
           * The icon in a floating/stacked select
           * must be centered with the entire select,
           * while the start/end slots and native control
           * are vertically offset in the default or
           * solid fills. As a result, we render the
           * icon outside the inner wrapper, which holds
           * those components.
           */}
          {hasFloatingOrStackedLabel && this.renderSelectIcon()}
          {shouldRenderHighlight && <div class="select-highlight"></div>}
        </label>
        {this.renderBottomContent()}
      </Host>
    );
  }
}

Review comment (suggestion):
This should be named `inner` to go with the way we are naming the inner wrappers in item components.

Code after:
    return (
      <Host
        onClick={this.onClick}
        class={createColorClasses(this.color, {
          [mode]: true,
          'in-item': inItem,
          'in-item-color': hostContext('ion-item.ion-color', el),
          'select-disabled': disabled,
          'select-expanded': isExpanded,
          'has-expanded-icon': expandedIcon !== undefined,
          'has-value': hasValue,
          'label-floating': labelShouldFloat,
          'has-placeholder': placeholder !== undefined,
          'has-focus': hasFocus,
          // TODO(FW-6451): Remove `ion-focusable` class in favor of `has-focus`.
          'ion-focusable': true,
          [`select-${rtl}`]: true,
          [`select-fill-${fill}`]: fill !== undefined,
          [`select-justify-${justify}`]: justifyEnabled,
          [`select-shape-${shape}`]: shape !== undefined,
          [`select-label-placement-${labelPlacement}`]: true,
        })}
      >
        <label class="select-wrapper" id="select-label" onClick={this.onLabelClick} part="wrapper">
          {this.renderLabelContainer()}
          <div class="select-wrapper-inner" part="inner">
            <slot name="start"></slot>
            <div class="native-wrapper" ref={(el) => (this.nativeWrapperEl = el)} part="container">
              {this.renderSelectText()}
              {this.renderListbox()}
            </div>
            <slot name="end"></slot>
            {!hasFloatingOrStackedLabel && this.renderSelectIcon()}
          </div>
          {/**
           * The icon in a floating/stacked select
           * must be centered with the entire select,
           * while the start/end slots and native control
           * are vertically offset in the default or
           * solid fills. As a result, we render the
           * icon outside the inner wrapper, which holds
           * those components.
           */}
          {hasFloatingOrStackedLabel && this.renderSelectIcon()}
          {shouldRenderHighlight && <div class="select-highlight"></div>}
        </label>
        {this.renderBottomContent()}
      </Host>
    );
  }
}