feat(input): Improve display of resize handle for type textarea (#10866)

**Related Issue:** #10864 

## Summary
Removes the custom grab handle icon for Input in type textarea. This
defers to the browser and matches the design of the Text Area component,
which is the recommended migration from this "deprecated" textarea type
of Input (related: #9974)

<img width="837" alt="Screenshot 2024-11-25 at 10 37 27 AM"
src="https://github.com/user-attachments/assets/0f43d187-480a-4cab-b871-af1557c1d8bc">

Author: macandcheese

packages/calcite-components/src/components/input/input.scss

@@ -233,8 +233,7 @@ input:focus {
     block;
 }
 
-.icon,
-.resize-icon-wrapper {
+.icon {
   @apply z-default; // needed for firefox to display the icon properly
 }
 
@@ -501,42 +500,6 @@ input[type="date"]::-webkit-input-placeholder {
   visibility: hidden !important;
 }
 
-// textarea resize icon
-textarea::-webkit-resizer {
-  @apply absolute
-    bottom-0
-    box-border
-    py-0
-    px-1;
-  inset-inline-end: 0;
-}
-
-.resize-icon-wrapper {
-  inset-block-end: 2px;
-  inset-inline-end: 2px;
-
-  @apply bg-foreground-1
-    text-color-3
-    pointer-events-none
-    absolute
-    h-3
-    w-3;
-
-  & calcite-icon {
-    inset-block-end: theme("spacing.1");
-    inset-inline-end: theme("spacing.1");
-    transform: rotate(-45deg);
-  }
-}
-
-.calcite--rtl {
-  .resize-icon-wrapper {
-    & calcite-icon {
-      transform: rotate(45deg);
-    }
-  }
-}
-
 :host([type="color"]) input {
   @apply p-1;
 }

packages/calcite-components/src/components/input/input.tsx

@@ -1094,55 +1094,46 @@ export class Input
         : (literal`textarea` as unknown as "textarea");
 
     const childEl =
-      this.type !== "number"
-        ? [
-            <DynamicHtmlTag
-              accept={this.accept}
-              aria-errormessage={IDS.validationMessage}
-              ariaInvalid={this.status === "invalid"}
-              ariaLabel={getLabelText(this)}
-              autocomplete={this.autocomplete as LuminaJsx.HTMLElementTags["input"]["autocomplete"]}
-              autofocus={autofocus}
-              class={{
-                [CSS.editingEnabled]: this.editingEnabled,
-                [CSS.inlineChild]: !!this.inlineEditableEl,
-              }}
-              defaultValue={this.defaultValue}
-              disabled={this.disabled ? true : null}
-              enterKeyHint={enterKeyHint as LuminaJsx.HTMLElementTags["input"]["enterKeyHint"]}
-              inputMode={inputMode as LuminaJsx.HTMLElementTags["input"]["inputMode"]}
-              max={this.maxString}
-              maxLength={this.maxLength}
-              min={this.minString}
-              minLength={this.minLength}
-              multiple={this.multiple}
-              name={this.name}
-              onBlur={this.inputBlurHandler}
-              onChange={this.inputChangeHandler}
-              onFocus={this.inputFocusHandler}
-              onInput={this.inputInputHandler}
-              onKeyDown={this.inputKeyDownHandler}
-              onKeyUp={this.inputKeyUpHandler}
-              pattern={this.pattern}
-              placeholder={this.placeholder || ""}
-              readOnly={this.readOnly}
-              ref={this.setChildElRef}
-              required={this.required ? true : null}
-              spellcheck={this.el.spellcheck}
-              step={this.step}
-              tabIndex={
-                this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null
-              }
-              type={this.type}
-              value={this.value}
-            />,
-            this.isTextarea ? (
-              <div class={CSS.resizeIconWrapper}>
-                <calcite-icon icon="chevron-down" scale={getIconScale(this.scale)} />
-              </div>
-            ) : null,
-          ]
-        : null;
+      this.type !== "number" ? (
+        <DynamicHtmlTag
+          accept={this.accept}
+          aria-errormessage={IDS.validationMessage}
+          ariaInvalid={this.status === "invalid"}
+          ariaLabel={getLabelText(this)}
+          autocomplete={this.autocomplete as LuminaJsx.HTMLElementTags["input"]["autocomplete"]}
+          autofocus={autofocus}
+          class={{
+            [CSS.editingEnabled]: this.editingEnabled,
+            [CSS.inlineChild]: !!this.inlineEditableEl,
+          }}
+          defaultValue={this.defaultValue}
+          disabled={this.disabled ? true : null}
+          enterKeyHint={enterKeyHint as LuminaJsx.HTMLElementTags["input"]["enterKeyHint"]}
+          inputMode={inputMode as LuminaJsx.HTMLElementTags["input"]["inputMode"]}
+          max={this.maxString}
+          maxLength={this.maxLength}
+          min={this.minString}
+          minLength={this.minLength}
+          multiple={this.multiple}
+          name={this.name}
+          onBlur={this.inputBlurHandler}
+          onChange={this.inputChangeHandler}
+          onFocus={this.inputFocusHandler}
+          onInput={this.inputInputHandler}
+          onKeyDown={this.inputKeyDownHandler}
+          onKeyUp={this.inputKeyUpHandler}
+          pattern={this.pattern}
+          placeholder={this.placeholder || ""}
+          readOnly={this.readOnly}
+          ref={this.setChildElRef}
+          required={this.required ? true : null}
+          spellcheck={this.el.spellcheck}
+          step={this.step}
+          tabIndex={this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null}
+          type={this.type}
+          value={this.value}
+        />
+      ) : null;
 
     return (
       <InteractiveContainer disabled={this.disabled}>

packages/calcite-components/src/components/input/resources.ts

@@ -11,7 +11,6 @@ export const CSS = {
   wrapper: "element-wrapper",
   inputWrapper: "wrapper",
   actionWrapper: "action-wrapper",
-  resizeIconWrapper: "resize-icon-wrapper",
   numberButtonItem: "number-button-item",
 };