@api-client/ui 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -57,7 +57,8 @@
     "./types/*": "./build/src/types/*"
   },
   "scripts": {
-    "build": "npm run tsc && npm run lint",
+    "build": "wireit",
+    "copy-assets": "wireit",
     "lint": "npm run lint:prettier && npm run lint:eslint",
     "lint:eslint": "wireit",
     "lint:prettier": "wireit",
@@ -73,6 +74,17 @@
     "tsc:all": "wireit"
   },
   "wireit": {
+    "build": {
+      "command": "npm run copy-assets",
+      "dependencies": [
+        "tsc",
+        "lint:prettier",
+        "lint:eslint"
+      ]
+    },
+    "copy-assets": {
+      "command": "node scripts/copy-assets.js"
+    },
     "lint:eslint": {
       "command": "eslint --color --cache --cache-location .eslintcache .",
       "files": [
@@ -97,11 +109,15 @@
     },
     "test": {
       "command": "wtr --playwright --browsers chromium",
-      "dependencies": ["tsc:all"]
+      "dependencies": [
+        "tsc:all"
+      ]
     },
     "test:coverage": {
       "command": "wtr --playwright --browsers chromium --coverage",
-      "dependencies": ["tsc:all"]
+      "dependencies": [
+        "tsc:all"
+      ]
     },
     "tsc:all": {
       "command": "tsc --project tsconfig.all.json",

package/scripts/copy-assets.js

@@ -0,0 +1,21 @@
+import { copyFile, mkdir } from 'node:fs/promises';
+import { join } from 'node:path';
+
+async function copyStyles() {
+  const src = join('src', 'styles', 'm3');
+  const dest = join('build', 'src', 'styles', 'm3');
+  const files = [
+    'native.css',
+    'theme.css',
+    'tokens.css',
+  ];
+  await mkdir(dest, { recursive: true });
+  await Promise.all(
+    files.map(async (name) => {
+      const destFile = join(dest, name);
+      await copyFile(join(src, name), destFile);
+    })
+  );
+}
+
+await copyStyles();

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,24 +135,26 @@ 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;
   }
 
   .supporting-text-start {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
     flex: 1;
     margin-right: 16px;
   }
 
+  .supporting-text-end {
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
   :host([disabled]) {
     pointer-events: none;
   }
@@ -171,6 +173,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 {