make parts consistent; fixes #1646 (#1650)

packages/webawesome/docs/docs/resources/changelog.md

@@ -21,6 +21,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
   - `<wa-select>`
   - `<wa-tag>`
   - `<wa-textarea>`
+- 🚨 BREAKING: Fixed a bug where `base` and `input` parts were swapped in `<wa-input>` [issue:1646]
 - Added the Kazakh translation [pr:1496]
 - Added docs for code completion for VS Code and JetBrains [pr:1550]
 - Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]

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

@@ -40,8 +40,8 @@ import styles from './input.css';
  *
  * @csspart label - The label
  * @csspart hint - The hint's wrapper.
- * @csspart input - The wrapper being rendered as an input
- * @csspart base - The internal `<input>` control.
+ * @csspart base - The wrapper being rendered as an input
+ * @csspart input - The internal `<input>` control.
  * @csspart start - The container that wraps the `start` slot.
  * @csspart clear-button - The clear button.
  * @csspart password-toggle-button - The password toggle button.
@@ -353,11 +353,11 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
         <slot name="label">${this.label}</slot>
       </label>
 
-      <div part="input" class="text-field">
+      <div part="base" class="text-field">
         <slot name="start" part="start" class="start"></slot>
 
         <input
-          part="base"
+          part="input"
           id="input"
           class="control"
           type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}

packages/webawesome/src/styles/themes/awesome.css

@@ -460,7 +460,7 @@
         wa-textarea
       ):not(:focus):not([appearance='filled']) {
       &:where(:not(wa-input):not(wa-select):not(wa-textarea)),
-      &:where(wa-input)::part(input),
+      &:where(wa-input)::part(base),
       &:where(wa-select)::part(combobox),
       &:where(wa-textarea)::part(base) {
         box-shadow: inset var(--wa-shadow-offset-x-s)