@api-client/ui 0.2.13 → 0.3.1

package/src/md/icon-button/ui-icon-button.ts

@@ -1,12 +1,11 @@
 import type { CSSResultOrNative } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import Element from './internals/IconButton.js'
-import base from './internals/base.styles.js'
-import styles from './internals/standard.styles.js'
+import styles from './internals/IconButton.styles.js'
 
 @customElement('ui-icon-button')
 export class UiIconButtonElement extends Element {
-  static override styles: CSSResultOrNative[] = [base, styles]
+  static override styles: CSSResultOrNative[] = [styles]
 }
 
 declare global {

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/ripple/internals/ripple.styles.ts

@@ -22,8 +22,7 @@ export default css`
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
-  .surface::before,
-  .surface::after {
+  .surface::before {
     position: absolute;
     opacity: 0;
     pointer-events: none;
@@ -38,19 +37,10 @@ export default css`
     inset: 0;
   }
 
-  .surface::after {
-    transition: opacity 375ms linear;
-    transform-origin: center center;
-  }
-
   .focused::before {
     transition-duration: 75ms;
   }
 
-  .pressed::after {
-    transition-duration: 105ms;
-  }
-
   .surface {
     border-radius: var(--md-ripple-state-layer-shape, 0);
   }
@@ -59,14 +49,6 @@ export default css`
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
   }
 
-  .surface::after {
-    background: radial-gradient(
-      closest-side,
-      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
-      transparent 100%
-    );
-  }
-
   .surface.hovered::before {
     opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
@@ -77,8 +59,14 @@ export default css`
     background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));
   }
 
-  .surface.pressed::after {
+  .surface.pressed::before {
     opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
+    /* background-color: var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)); */
+    background: radial-gradient(
+      closest-side,
+      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
+      transparent 100%
+    );
   }
 
   .surface.unbounded {

package/src/md/ripple/internals/ripple.ts

@@ -74,6 +74,13 @@ export default class UiRipple extends LitElement {
     }
   }
 
+  protected override willUpdate(changed: PropertyValues): void {
+    super.willUpdate(changed)
+    if (changed.has('hovered') || changed.has('focused') || changed.has('pressed')) {
+      this.manageActivated()
+    }
+  }
+
   protected override update(changedProps: PropertyValues<this>): void {
     if (changedProps.has('disabled') && this.disabled) {
       this.endHover()
@@ -156,8 +163,6 @@ export default class UiRipple extends LitElement {
     const translateStart = `${startPoint.x}px, ${startPoint.y}px`
     const translateEnd = `${endPoint.x}px, ${endPoint.y}px`
 
-    // const signal = this.pressAnimationSignal.start()
-
     const growAnimation = mdRoot.animate(
       {
         top: [0, 0],
@@ -174,22 +179,11 @@ export default class UiRipple extends LitElement {
       }
     )
 
-    // growAnimation.addEventListener('finish', () => {
-    //   this.pressAnimationSignal.finish()
-    //   this.growAnimation = null
-    // })
-
-    // signal.addEventListener('abort', () => {
-    //   growAnimation.cancel()
-    //   this.growAnimation = null
-    // })
-
     this.growAnimation = growAnimation
   }
 
   private async endPressAnimation() {
     this.rippleStartEvent = undefined
-    // this.state = State.INACTIVE
     const animation = this.growAnimation
     let pressAnimationPlayState = Infinity
     if (typeof animation?.currentTime === 'number') {
@@ -219,19 +213,23 @@ export default class UiRipple extends LitElement {
   beginHover(hoverEvent?: Event): void {
     if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {
       this.hovered = true
+      this.manageActivated()
     }
   }
 
   endHover(): void {
     this.hovered = false
+    this.manageActivated()
   }
 
   beginFocus(): void {
     this.focused = true
+    this.manageActivated()
   }
 
   endFocus(): void {
     this.focused = false
+    this.manageActivated()
   }
 
   beginPress(positionEvent?: Event | null): void {
@@ -242,6 +240,7 @@ export default class UiRipple extends LitElement {
       this.delayedEndPressHandle = null
     }
     this.startPressAnimation(positionEvent)
+    this.manageActivated()
   }
 
   endPress(): void {
@@ -255,5 +254,14 @@ export default class UiRipple extends LitElement {
       }, MINIMUM_PRESS_MS - pressAnimationPlayState) as unknown as number
     }
     this.endPressAnimation()
+    this.manageActivated()
+  }
+
+  protected manageActivated(): void {
+    if (this.pressed || this.hovered || this.focused) {
+      this.classList.add('activated')
+    } else {
+      this.classList.remove('activated')
+    }
   }
 }

package/src/md/snackbar/internals/Snackbar.ts

@@ -2,7 +2,7 @@ import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
 import { cancelEvent } from '@api-client/core/lib/events/Utils.js'
 import { property } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
-import '../../button/ui-text-button.js'
+import '../../button/ui-button.js'
 import '../../icon-button/ui-icon-button.js'
 import '../../icons/ui-icon.js'
 
@@ -206,7 +206,9 @@ export class Snackbar extends LitElement {
       return nothing
     }
     return html`
-      <ui-text-button class="action" @click="${this.actionHandler}" @action="${cancelEvent}">${action}</ui-text-button>
+      <ui-button color="text" class="action" @click="${this.actionHandler}" @action="${cancelEvent}"
+        >${action}</ui-button
+      >
     `
   }
 

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

@@ -6,13 +6,16 @@ export default css`
     --_active-indicator-height: 1px;
     --_focus-active-indicator-color: var(--md-sys-color-primary, #6750a4);
     --_focus-active-indicator-height: 2px;
+    border-radius: var(--md-sys-shape-corner-extra-small-top);
   }
 
   .surface {
     height: 56px;
+    border-radius: inherit;
   }
 
   .container {
+    border-radius: inherit;
     background-color: var(--md-sys-color-surface-variant);
   }
 
@@ -84,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 {

package/src/styles/m3/dialog.module.ts

@@ -11,8 +11,8 @@ import { css } from 'lit'
  *    <h3>Title</h3> <!-- h1, h2, or h3 -->
  *    <!-- Any content -->
  *    <div class="dialog-buttons">
- *      <ui-text-button value="cancel" submit>Cancel</ui-text-button>
- *      <ui-text-button value="submit" submit>Create</ui-text-button>
+ *      <ui-button color="text" value="cancel" submit>Cancel</ui-button>
+ *      <ui-button color="text" value="submit" submit>Create</ui-button>
  *    </div>
  *  </form>
  * </dialog>

package/src/styles/m3/native.css

@@ -0,0 +1,270 @@
+/* Styling for the native UI controls to look like MD elements */
+
+/* 
+Material Select 
+
+Behaves mostly like an outlined input with a label.
+*/
+
+@keyframes focus-outline-inward {
+  0% {
+    outline-width: 0;
+    outline-offset: 0;
+  }
+  50% {
+    outline-width: var(--md-focus-ring-active-width, 8px);
+    outline-offset: calc(-1 * var(--md-focus-ring-active-width, 8px));
+  }
+  100% {
+    outline-width: var(--md-focus-ring-width, 3px);
+    outline-offset: calc(-1 * var(--md-focus-ring-width, 3px));
+  }
+}
+
+.md-select {
+  display: inline-block;
+  vertical-align: top;
+
+  --_outline-color: var(--md-focus-ring-color, var(--md-sys-color-secondary));
+
+  select,
+  ::picker(select) {
+    appearance: base-select;
+  }
+
+  select {
+    height: 56px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: start;
+    box-sizing: border-box;
+    gap: 0;
+    padding: 0 16px 0 16px;
+
+    .prefix, .suffix {
+      min-width: 16px;
+    }
+
+    .prefix {
+      margin-left: 12px;
+      margin-right: 16px;
+    }
+
+    .suffix {
+      margin-left: 12px;
+      margin-right: 12px;
+    }
+
+    .prefix, selectedcontent, .suffix {
+      display: flex;
+      align-items: center;
+      justify-content: start;
+    }
+
+    selectedcontent {
+      padding-right: 16px;
+    }
+  }
+
+  select:has(.suffix) selectedcontent {
+    padding-right: 0;
+  }
+
+  select:has(.prefix) {
+    padding-left: 0;
+  }
+
+  option {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    padding: 8px 16px;
+    box-sizing: border-box;
+    height: 56px;
+    cursor: default;
+    position: relative;
+
+    outline: 0 solid var(--_outline-color);
+    outline-offset: -3px;
+  }
+
+  option:hover {
+    background-color: transparent;
+    &::before {
+      opacity: var(--md-sys-state-hover-state-layer-opacity);
+      background-color: var(--md-sys-color-primary);
+      content: '';
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  option:focus-visible {
+    background-color: transparent;
+    animation: focus-outline-inward var(--md-focus-ring-duration, 600ms) cubic-bezier(0.2, 0, 0, 1) forwards;
+  }
+
+  @media(prefers-reduced-motion) {
+    option:focus-visible {
+      animation: none;
+      outline-width: var(--md-focus-ring-width, 3px);
+      outline-offset: calc(-1 * var(--md-focus-ring-width, 3px));
+    }
+  }
+
+  ::picker(select) {
+    border: none;
+    padding: 10px 0;
+    background-color: var(--md-sys-color-surface);
+    transform: scaleY(0);
+    transition: all 250ms cubic-bezier(0.2, 0, 0, 1) 0s allow-discrete;
+    transform-origin: top center;
+    width: fit-content;
+    box-shadow: var(--md-sys-elevation-1);
+    border-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  ::picker(select):popover-open {
+    transform: scaleY(1);
+  }
+
+  @starting-style {
+    ::picker(select):popover-open {
+      transform: scaleY(0);
+    }
+  }
+
+  label {
+    font-family: var(--md-sys-typescale-label-medium-font);
+    font-size: var(--md-sys-typescale-label-medium-size);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+    line-height: var(--md-sys-typescale-label-medium-height);
+    font-weight: var(--md-ref-typeface-weight-regular);
+    position: absolute;
+  }
+
+  label:has( + select:focus-within ) {
+    color: var(--md-sys-color-primary);
+  }
+
+  select::picker-icon {
+    font-family: var(--md-icon-font, Material Symbols Outlined);
+    font-weight: 400;
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 700,
+      'GRAD' 200,
+      'opsz' 24;
+    content: "\e5c5";
+    letter-spacing: 0;
+    color: currentColor;
+  }
+
+  option::checkmark {
+    font-family: var(--md-icon-font, Material Symbols Outlined);
+    font-weight: 400;
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 700,
+      'GRAD' 200,
+      'opsz' 24;
+    content: "\e5ca";
+    letter-spacing: 0;
+    color: var(--md-sys-color-primary);
+  }
+
+  &.outlined {
+    position: relative;
+
+    select {
+      border: 1px var(--md-sys-color-outline) solid;
+      outline: 0 solid var(--md-sys-color-primary);
+      outline-offset: 0;
+      transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard-accelerate);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      background-color: transparent;
+
+      &:hover:not(:focus-visible) {
+        border-color: var(--md-sys-color-on-surface);
+      }
+
+      &:focus-within {
+        outline-width: var(--md-focus-ring-width, 3px);
+        outline-offset: calc(-1 * var(--md-focus-ring-width, 3px));
+      }
+
+      &:focus-visible {
+        animation: focus-outline-inward var(--md-focus-ring-duration, 600ms) cubic-bezier(0.2, 0, 0, 1) forwards;
+      }
+    }
+
+    @media(prefers-reduced-motion) {
+      select:focus-visible {
+        animation: none;
+        outline-width: var(--md-focus-ring-width, 3px);
+        outline-offset: calc(-1 * var(--md-focus-ring-width, 3px));
+      }
+    }
+
+    label {
+      background-color: var(--md-sys-color-surface);
+      padding: 0 4px;
+      color: var(--md-sys-color-on-surface-variant);
+      left: 12px;
+      top: -7px;
+    }
+  }
+
+  &.filled {
+    position: relative;
+
+    select {
+      background-color: var(--md-sys-color-surface-variant);
+      border: none;
+      /* border-bottom: 1px solid var(--md-sys-color-on-surface-variant); */
+      border-radius: var(--md-sys-shape-corner-extra-small-top);
+      outline: none;
+
+      selectedcontent {
+        padding-top: 1em;
+      }
+    }
+
+    select::before {
+      content: '';
+      border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+      inset: auto 0 0;
+      position: absolute;
+    }
+
+    select::after {
+      content: '';
+      border-bottom-color: var(--md-sys-color-primary);
+      border-bottom-width: 2px;
+      border-bottom-style: solid;
+      opacity: 0;
+      transform: scaleX(0);
+      transform-origin: center center;
+
+      transition:
+        opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,
+        transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;
+
+      position: absolute;
+      inset: auto 0 0;
+    }
+
+    select:focus-within::after {
+      opacity: 1;
+      transform: scaleX(1);
+
+    }
+
+    label {
+      color: var(--md-sys-color-on-surface-variant);
+      transform: translateY(-1.35rem);
+      top: 50%;
+      left: 16px;
+    }
+  }
+}