make parts consistent; fixes #1646

packages/webawesome/docs/assets/styles/code-highlighter.css

@@ -2,25 +2,22 @@
 pre[id*='code-block-'] {
   color-scheme: dark;
   color: white;
-  background-color: var(--code-background, var(--wa-color-neutral-20));
+  background-color: var(--wa-color-neutral-20);
 
   /* Ensures a discernible background color in dark mode
    * Useful for themes that use gray-20 as --wa-color-surface-default  */
   .wa-dark & {
-    background-color: var(--code-background-dark, var(--wa-color-surface-lowered));
+    background-color: var(--wa-color-surface-lowered);
   }
 }
 
 .code-comment,
 .code-prolog,
 .code-doctype,
-.code-cdata {
-  color: var(--code-comment, var(--wa-color-gray-70));
-}
-
+.code-cdata,
 .code-operator,
 .code-punctuation {
-  color: var(--code-operator, var(--wa-color-gray-70));
+  color: var(--wa-color-gray-70);
 }
 
 .code-namespace {
@@ -31,27 +28,24 @@ pre[id*='code-block-'] {
 .code-keyword,
 .code-tag,
 .code-url {
-  color: var(--code-keyword, var(--wa-color-indigo-70));
+  color: var(--wa-color-indigo-70);
 }
 
 .code-symbol,
 .code-deleted,
 .code-important {
-  color: var(--code-error, var(--wa-color-red-70));
-}
-
-.code-string,
-.code-char,
-.code-constant {
-  color: var(--code-string, var(--wa-color-green-70));
+  color: var(--wa-color-red-70);
 }
 
 .code-boolean,
+.code-constant,
 .code-selector,
 .code-attr-name,
+.code-string,
+.code-char,
 .code-builtin,
 .code-inserted {
-  color: var(--code-literal, var(--wa-color-green-70));
+  color: var(--wa-color-green-70);
 }
 
 .code-atrule,
@@ -61,7 +55,7 @@ pre[id*='code-block-'] {
 .code-function,
 .code-class-name,
 .code-regex {
-  color: var(--code-value, var(--wa-color-blue-70));
+  color: var(--wa-color-blue-70);
 }
 
 .code-important,

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

@@ -21,11 +21,10 @@ 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]
-- Added focus delegation to `<wa-button>` to ensure tabbing works properly when using `tabindex` [issue:1622]
-- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
 - Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
 - Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
 - Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
@@ -39,8 +38,9 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
 - Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that caused the component to prematurely hide when certain child elements are used [pr:1636]
 - Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
-- Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
 - Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
+- Improved [text utilities](/docs/utilities/text/) so that each size modifier always exactly matches the applied font size [pr:1602]
+- Added [text utilities](/docs/utilities/text/) for longform text, form control text, font sizes, font weights, text color, and truncation [pr:1602]
 - Upgraded `<wa-page>` from _experimental_ to _stable_
 
 ## 3.0.0-beta.6

packages/webawesome/src/components/button/button.ts

@@ -41,7 +41,6 @@ import styles from './button.css';
  */
 @customElement('wa-button')
 export default class WaButton extends WebAwesomeFormAssociatedElement {
-  static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };
   static css = [styles, variantStyles, sizeStyles];
 
   static get validators() {

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)