@api-client/ui 0.3.0 → 0.3.1

package/src/md/input/Input.ts

@@ -213,7 +213,7 @@ export default abstract class Input extends UiElement {
    *
    * Possible values are:
    *
-   * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase)
+   * - `off` or `none`: No auto-capitalization is applied (all letters default to lowercase)
    * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter;
    *  all other letters default to lowercase
    * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
@@ -586,7 +586,7 @@ export default abstract class Input extends UiElement {
   }
 
   /**
-   * Unfocuses the text field.
+   * Un-focuses the text field.
    */
   override blur(): void {
     this.input?.blur()
@@ -638,7 +638,7 @@ export default abstract class Input extends UiElement {
   }
 
   protected getErrorText(): string {
-    return this.invalid ? this.invalidText : this.nativeErrorText
+    return this.invalidText || this.nativeErrorText
   }
 
   /**
@@ -750,14 +750,16 @@ export default abstract class Input extends UiElement {
       return
     }
     this.focused = true
-    this.#_userInteracted = true
     this.removingTabindex = true
     // Note, the input is automatically focused when form is being submitted and
     // it won't pass validation. In this case the form will throw an error
     // as the input is not focusable. In overall, this still works with forms and validation.
-    this.dataset.tabindex = this.getAttribute('tabindex') || '0'
-    this.removeAttribute('tabindex')
+    if (this.checkNativeValidity()) {
+      this.dataset.tabindex = this.getAttribute('tabindex') || '0'
+      this.removeAttribute('tabindex')
+    }
     input.focus()
+    this.#_userInteracted = true
     setTimeout(() => {
       this.removingTabindex = false
     }, 1)
@@ -774,9 +776,12 @@ export default abstract class Input extends UiElement {
     this.setAttribute('tabindex', index)
   }
 
+  private checkNativeValidity(): boolean {
+    return this.input?.validity.valid ?? true
+  }
+
   private checkValidityAndDispatch(): { valid: boolean; canceled: boolean } {
-    const { input } = this
-    const valid = input?.checkValidity() ?? true
+    const valid = this.input?.checkValidity() ?? true
     let canceled = false
     if (!valid) {
       canceled = !this.dispatchEvent(new Event('invalid', { cancelable: true }))
@@ -853,10 +858,10 @@ export default abstract class Input extends UiElement {
 
   protected getAriaDescribedBy(): string {
     const hasSupport = !!this.getSupportingText()
-    const hasCounter = this.hasCounter()
     if (hasSupport) {
       return this.supportingTextId
     }
+    const hasCounter = this.hasCounter()
     if (hasCounter) {
       return this.counterId
     }
@@ -941,10 +946,10 @@ export default abstract class Input extends UiElement {
     return html` <span class="supporting-text"> ${this.renderSupportingTextValue()} ${this.renderCounter()} </span> `
   }
 
-  protected renderSupportingTextValue(): TemplateResult {
+  protected renderSupportingTextValue(): TemplateResult | typeof nothing {
     const text = this.getSupportingText()
     if (!text) {
-      return html``
+      return nothing
     }
     const shouldAlert = this.shouldErrorAnnounce()
     return html`

package/src/md/text-field/internals/common.styles.ts

@@ -135,11 +135,11 @@ export default css`
   .supporting-text {
     padding-top: 4px;
     color: var(--md-sys-color-on-surface-variant);
-    font-family: var(--md-sys-typescale-body-medium-font);
-    font-weight: var(--md-sys-typescale-body-medium-weight);
-    font-size: var(--md-sys-typescale-body-medium-size);
-    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
-    line-height: var(--md-sys-typescale-body-medium-height);
+    font-family: var(--md-sys-typescale-body-small-font);
+    font-weight: var(--md-sys-typescale-body-small-weight);
+    font-size: var(--md-sys-typescale-body-small-size);
+    letter-spacing: var(--md-sys-typescale-body-small-tracking);
+    line-height: var(--md-sys-typescale-body-small-height);
     display: flex;
     justify-content: space-between;
     padding: 0 16px;
@@ -153,6 +153,11 @@ export default css`
     margin-right: 16px;
   }
 
+  .supporting-text-end {
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
   :host([disabled]) {
     pointer-events: none;
   }
@@ -171,6 +176,7 @@ export default css`
   }
 
   :host([invalid]) .label,
+  :host([invalid]:focus-within) .label,
   :host([invalid]) .supporting-text,
   :host([invalid]) .end ::slotted(*) {
     color: var(--md-sys-color-error);

package/src/md/text-field/internals/filled.styles.ts

@@ -87,6 +87,10 @@ export default css`
     border-bottom-color: var(--md-sys-color-on-error-container);
   }
 
+  :host([invalid]) .highlight::after {
+    border-bottom-color: var(--md-sys-color-error);
+  }
+
   .labelHidden .body {
     padding-top: 0;
   }

package/src/md/text-field/internals/outlined.styles.ts

@@ -1,6 +1,12 @@
 import { css } from 'lit'
 
 export default css`
+  :host {
+    --_border-color: var(--md-sys-color-outline);
+    --_outline-color: var(--md-sys-color-primary);
+    --_outline-width: 0px;
+  }
+
   .highlight {
     display: none;
   }
@@ -10,21 +16,35 @@ export default css`
   }
 
   .container {
-    border: 1px var(--md-sys-color-outline) solid;
-    outline: 0px solid var(--md-sys-color-primary);
-    outline-offset: -3px;
+    border: 1px var(--_border-color) solid;
+    outline: var(--_outline-width) solid var(--_outline-color);
+    outline-offset: calc(-1 * var(--_outline-width));
     transition:
       border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1);
+      outline-width 150ms cubic-bezier(0.4, 0, 0.2, 1),
+      outline-offset 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :host(:hover:not(:focus-within):not([invalid])) {
+    --_border-color: var(--md-sys-color-on-surface);
+  }
+
+  :host(:focus-within:not([invalid])) {
+    --_border-color: var(--md-sys-color-primary);
+  }
+
+  :host(:focus-within) {
+    --_outline-width: 3px;
   }
 
-  :host(:hover:not(:focus-within)) .container {
-    border-color: var(--md-sys-color-on-surface);
+  :host([invalid]) {
+    --_border-color: var(--md-sys-color-error);
+    --_outline-color: var(--md-sys-color-error);
   }
 
-  :host(:focus-within) .container {
-    border-color: var(--md-sys-color-primary);
-    outline-width: 3px;
+  :host([invalid]:hover) {
+    --_outline-color: var(--md-sys-color-on-error-container);
+    --_border-color: var(--md-sys-color-on-error-container);
   }
 
   .label {