@api-client/ui 0.2.10 → 0.2.12

package/src/md/UiElement.ts

@@ -104,6 +104,14 @@ export abstract class UiElement extends LitElement implements ActionControllerHo
     this.actionController.pointerLeave(e)
   }
 
+  /**
+   * Subclasses should add this method as an event handler on the interactive
+   * template element with `@pointerenter="${this.handlePointerEnter}"`
+   */
+  handlePointerEnter(e: PointerEvent): void {
+    // this.actionController.pointerEnter(e)
+  }
+
   /**
    * Hook method for the ActionController.
    * Subclasses should add this method as an event handler on the interactive

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

@@ -5,7 +5,7 @@ import base from './internals/button-styles.js'
 import styles from './internals/elevated-button.styles.js'
 
 /**
- * @attrbite {string} form
+ * @attribute form
  */
 @customElement('ui-elevated-button')
 export class UiElevatedButtonElement extends Element {

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

@@ -5,7 +5,7 @@ import base from './internals/button-styles.js'
 import styles from './internals/filled-button.styles.js'
 
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 @customElement('ui-filled-button')
 export class UiFilledButtonElement extends Element {

package/src/md/button/ui-filled-tonal-button.ts

@@ -5,15 +5,15 @@ import base from './internals/button-styles.js'
 import styles from './internals/filled-tonal-button.styles.js'
 
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 @customElement('ui-filled-tonal-button')
-export class UiFilltedButtonElement extends Element {
+export class UiFilledButtonElement extends Element {
   static override styles: CSSResultOrNative[] = [base, styles]
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'ui-filled-tonal-button': UiFilltedButtonElement
+    'ui-filled-tonal-button': UiFilledButtonElement
   }
 }

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

@@ -5,7 +5,7 @@ import base from './internals/button-styles.js'
 import styles from './internals/outlined-button.styles.js'
 
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 @customElement('ui-outlined-button')
 export class UiOutlinedButtonElement extends Element {

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

@@ -5,7 +5,7 @@ import base from './internals/button-styles.js'
 import styles from './internals/text-button.styles.js'
 
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 @customElement('ui-text-button')
 export class UiTextButtonElement extends Element {

package/src/md/checkbox/internals/Checkbox.styles.ts

@@ -7,29 +7,44 @@ export default css`
     outline: none;
     -webkit-tap-highlight-color: transparent;
 
+    position: relative;
+
     --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+
+    --_container-border-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 2px;
+    --_container-background-color: transparent;
+    --_container-opacity: 1;
+
+    --_check-mark-color: currentColor;
+
+    --_checkbox-width: 18px;
+    --_checkbox-height: 18px;
+    --_state-width: 40px;
+    --_state-height: 40px;
   }
 
   .surface {
     position: relative;
-    min-width: 40px;
-    height: 40px;
+    min-width: var(--_state-width);
+    height: var(--_state-height);
     display: flex;
     align-items: center;
   }
 
   .container {
     border-radius: 2px;
-    border: 2px var(--md-sys-color-on-surface) solid;
-    background-color: transparent;
+    border: var(--_container-border-width) var(--_container-border-color) solid;
+    background-color: var(--_container-background-color);
+    opacity: var(--_container-opacity);
 
     position: absolute;
     inset: 11px 0px 0px 11px;
 
-    width: 18px;
-    height: 18px;
+    width: var(--_checkbox-width);
+    height: var(--_checkbox-height);
 
     box-sizing: border-box;
 
@@ -40,22 +55,23 @@ export default css`
   }
 
   .icon {
-    width: 18px;
-    height: 18px;
+    width: var(--_checkbox-width);
+    height: var(--_checkbox-height);
     position: absolute;
     inset: 11px 0 0 11px;
   }
 
   .icon > svg {
-    width: 18px !important;
-    height: 18px !important;
+    width: var(--_checkbox-width) !important;
+    height: var(--_checkbox-height) !important;
+    fill: var(--_check-mark-color);
   }
 
   .state {
     position: absolute;
     inset: 0;
-    width: 40px;
-    height: 40px;
+    width: var(--_state-width);
+    height: var(--_state-height);
     border-radius: var(--md-sys-shape-corner-full);
   }
 
@@ -64,222 +80,45 @@ export default css`
     z-index: 3;
   }
 
-  :host([checked]) .container,
-  :host([indeterminate]) .container {
-    border-width: 0px;
-    background-color: var(--md-sys-color-primary);
-  }
-
-  :host([checked]) .icon > svg,
-  :host([indeterminate]) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* Invalid state */
-
-  :host([invalid]) .container {
-    border-color: var(--md-sys-color-error);
-  }
-
-  :host([checked][invalid]) .container,
-  :host([indeterminate][invalid]) .container {
-    border-color: transparent;
-    background-color: var(--md-sys-color-error);
-  }
-
-  :host([checked][invalid]) .icon > svg,
-  :host([indeterminate][invalid]) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Disabled state */
-
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  :host([disabled]) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-    opacity: 38%;
+  :host([checked]) {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface);
   }
 
-  :host([checked][disabled]) .container,
-  :host([indeterminate][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    border-width: 0;
-    opacity: 38%;
+  :host([checked]),
+  :host([indeterminate]) {
+    --_container-border-width: 0px;
+    --_container-background-color: var(--md-sys-color-primary);
+    --_check-mark-color: var(--md-sys-color-on-primary);
   }
 
-  :host([checked][disabled]) .icon > svg,
-  :host([indeterminate][disabled]) .icon > svg {
-    fill: var(--md-sys-color-surface);
-  }
-
-  /* Hover state */
-
-  /* :host(:hover) .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  /* :host([checked]:hover) .state,
-:host([indeterminate]:hover) .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  :host(:hover) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:hover) .container,
-  :host([indeterminate]:hover) .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host(:hover) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  :host([invalid]:hover) {
+  :host([invalid]) {
     --md-ripple-hover-state-layer-color: var(--md-sys-color-error);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-error);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-error);
+    --_container-border-color: var(--md-sys-color-error);
   }
 
-  /* :host([invalid]:hover) .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-
-  :host([invalid]:hover) .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
+  :host([checked][invalid]),
+  :host([indeterminate][invalid]) {
+    --_check-mark-color: var(--md-sys-color-on-error);
+    --_container-border-color: transparent;
+    --_container-background-color: var(--md-sys-color-error);
   }
 
-  :host([checked][invalid]:hover) .container,
-  :host([indeterminate][invalid]:hover) .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
-  }
-
-  :host([checked][invalid]:hover) .icon > svg,
-  :host([indeterminate][invalid]:hover) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Focus state */
-
-  /* :host(:focus) .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-}
-
-:host([checked]:focus) .state,
-:host([indeterminate]:focus) .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-} */
-
-  :host(:focus) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:focus) .container,
-  :host([indeterminate]:focus) .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host(:focus) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* :host([invalid]:focus) .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-} */
-
-  :host([invalid]:focus) .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
-  }
-
-  :host([checked][invalid]:focus) .container,
-  :host([indeterminate][invalid]:focus) .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
-  }
-
-  :host([checked][invalid]:focus) .icon > svg,
-  :host([indeterminate][invalid]:focus) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-
-  /* Pressed state */
-
-  /* :host(:active) .state,
-:host .pressed .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-}
-
-:host([checked]:active) .state,
-:host([checked]) .pressed .state,
-:host([indeterminate]:active) .state,
-:host([indeterminate]) .pressed .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-} */
-
-  :host(:active) .container,
-  :host .pressed .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-
-  :host([checked]:active) .container,
-  :host([checked]) .pressed .container,
-  :host([indeterminate]:active) .container,
-  :host([indeterminate]) .pressed .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-
-  :host([checked]:active) .icon > svg,
-  :host([checked]) .pressed .icon > svg,
-  :host([indeterminate]:active) .icon > svg,
-  :host([indeterminate]) .pressed .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-
-  /* :host([invalid]:active) .state,
-:host([invalid]) .pressed .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-} */
-
-  :host([invalid]:active) .container,
-  :host([invalid]) .pressed .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
-  }
-
-  :host([checked][invalid]:active) .container,
-  :host([checked][invalid]) .pressed .container,
-  :host([indeterminate][invalid]:active) .container :host([indeterminate][invalid]) .pressed .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
+  :host([disabled]) {
+    pointer-events: none;
+    --_check-mark-color: var(--md-sys-color-surface);
+    --_container-border-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 2px;
+    --_container-opacity: 38%;
   }
 
-  :host([checked][invalid]:active) .icon > svg,
-  :host([checked][invalid]) .pressed .icon > svg,
-  :host([indeterminate][invalid]:active) .icon > svg,
-  :host([indeterminate][invalid]) .pressed .icon > svg {
-    fill: var(--md-sys-color-on-error);
+  :host([checked][disabled]),
+  :host([indeterminate][disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 0;
+    --_container-opacity: 38%;
   }
 `

package/src/md/checkbox/internals/CheckboxElement.ts

@@ -1,12 +1,13 @@
 import { html, SVGTemplateResult, TemplateResult, nothing } from 'lit'
-import { queryAsync, state } from 'lit/decorators.js'
+import { query } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
-import { when } from 'lit/directives/when.js'
 import CheckedElement from './CheckedElement.js'
 import { check, checkIndeterminate } from '../../icons/Icons.js'
-import { ripple } from '../../effects/rippleDirective.js'
-import UiRipple from '../../ripple/internals/ripple.js'
+import type UiRipple from '../../ripple/internals/ripple.js'
+import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
+
 import '../../ripple/ui-ripple.js'
+import '@material/web/focus/md-focus-ring.js'
 
 export default class CheckboxElement extends CheckedElement {
   protected get _icon(): SVGTemplateResult | typeof nothing {
@@ -20,38 +21,54 @@ export default class CheckboxElement extends CheckedElement {
     return nothing
   }
 
-  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>
+  @query('ui-ripple') protected accessor ripple!: UiRipple | null
 
-  @state() protected accessor showRipple = false
+  protected pressRipple(options: BeginPressConfig): void {
+    const element = this.ripple
+    if (element && !element.isPressed) {
+      element.beginPress(options.positionEvent as PointerEvent)
+    }
+  }
 
-  protected readonly getRipple = (): Promise<UiRipple | null> => {
-    this.showRipple = true
-    return this.ripple
+  protected endRipple(): void {
+    this.ripple?.endPress()
   }
 
-  protected override async handleFocus(): Promise<void> {
-    const _ripple = await this.getRipple()
-    _ripple?.beginFocus()
+  override beginPress(options: BeginPressConfig): void {
+    super.beginPress(options)
+    this.pressRipple(options)
   }
 
-  protected override async handleBlur(): Promise<void> {
-    const _ripple = await this.getRipple()
-    _ripple?.endFocus()
+  override endPress(config: EndPressConfig): void {
+    super.endPress(config)
+    this.endRipple()
   }
 
   override async handleKeyDown(e: KeyboardEvent): Promise<void> {
     super.handleKeyDown(e)
     if (['Space'].includes(e.code)) {
-      const _ripple = await this.getRipple()
-      _ripple?.beginPress()
+      this.ripple?.beginPress()
     }
   }
 
   override async handleKeyUp(e: KeyboardEvent): Promise<void> {
     super.handleKeyUp(e)
     if (['Space'].includes(e.code)) {
-      const _ripple = await this.getRipple()
-      _ripple?.endPress()
+      this.ripple?.endPress()
+    }
+  }
+
+  override handlePointerEnter(e: PointerEvent): void {
+    super.handlePointerEnter(e)
+    if (this.ripple) {
+      this.ripple.beginHover(e)
+    }
+  }
+
+  override handlePointerLeave(e: PointerEvent): void {
+    super.handlePointerLeave(e)
+    if (this.ripple) {
+      this.ripple.endHover()
     }
   }
 
@@ -62,17 +79,13 @@ export default class CheckboxElement extends CheckedElement {
       pressed,
     })
     return html`
-      <div class="${containerClasses}" ${ripple(this.getRipple)}>
+      <md-focus-ring part="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>
+      <div class="${containerClasses}">
         <div class="container"></div>
         <div class="state"></div>
-        ${when(this.showRipple, this.renderRipple)}
+        <ui-ripple class="ripple" unbounded ?disabled="${this.disabled}"></ui-ripple>
         <div class="icon">${this._icon}</div>
       </div>
     `
   }
-
-  protected renderRipple = (): TemplateResult => {
-    const { disabled } = this
-    return html`<ui-ripple class="ripple" unbounded ?disabled="${disabled}"></ui-ripple>`
-  }
 }

package/src/md/checkbox/internals/CheckedElement.ts

@@ -104,6 +104,7 @@ export default class CheckedElement extends UiElement {
     this.addEventListener('pointerdown', this.handlePointerDown.bind(this))
     this.addEventListener('pointerup', this.handlePointerUp.bind(this))
     this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))
+    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
     this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))
     this.addEventListener('contextmenu', this.handleContextMenu.bind(this))
     this.addEventListener('keydown', this.handleKeyDown.bind(this))

package/src/md/dropdown-list/internals/UiDropdownList.ts

@@ -156,6 +156,22 @@ export default class UiDropdownList extends LitElement {
     this.close()
   }
 
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    super.willUpdate(cp)
+    if ((cp.has('noOverlap') || cp.has('verticalAlign') || cp.has('horizontalAlign') || cp.has('open')) && this.open) {
+      this.computePositioning()
+    }
+  }
+
+  protected override updated(cp: PropertyValues<this>): void {
+    super.updated(cp)
+    if (cp.has('open')) {
+      this.toggleOpened()
+      this.updateExpanded()
+      // this.manageTabindex()
+    }
+  }
+
   protected updateExpanded(): void {
     this.setAttribute('aria-expanded', String(this.open))
   }
@@ -202,7 +218,6 @@ export default class UiDropdownList extends LitElement {
 
   protected triggerClickHandler(): void {
     this.open = !this.open
-    this.updateExpanded()
     this.notifyOpen()
   }
 
@@ -210,7 +225,6 @@ export default class UiDropdownList extends LitElement {
     if (['Enter', 'Space', 'ArrowDown', 'ArrowUp'].includes(e.code)) {
       e.preventDefault()
       this.open = true
-      this.updateExpanded()
       this.notifyOpen()
     }
   }
@@ -236,7 +250,6 @@ export default class UiDropdownList extends LitElement {
 
   close(): void {
     this.open = false
-    this.updateExpanded()
     this.notifyOpen()
   }
 
@@ -245,20 +258,6 @@ export default class UiDropdownList extends LitElement {
     this.close()
   }
 
-  protected override willUpdate(cp: PropertyValues<this>): void {
-    super.willUpdate(cp)
-    if ((cp.has('noOverlap') || cp.has('verticalAlign') || cp.has('horizontalAlign') || cp.has('open')) && this.open) {
-      this.computePositioning()
-    }
-  }
-
-  protected override updated(cp: PropertyValues<this>): void {
-    super.updated(cp)
-    if (cp.has('open')) {
-      this.toggleOpened()
-    }
-  }
-
   /**
    * Since the container for the dropdown content is positioned as fixed
    * we need to position the dropdown according to the configured rules.
@@ -304,12 +303,49 @@ export default class UiDropdownList extends LitElement {
     }
   }
 
+  /**
+   * When set, it is the last active child of the dropdown
+   * before the tabindex was removed from it. It is used to restore focus
+   * when the dropdown is re-opened.
+   */
+  lastActiveChild?: HTMLElement
+
+  /**
+   * When the list is closed, the tabindex of the dropdown is removed to prevent
+   * it from being focused while invisible.
+   */
+  protected manageTabindex(): void {
+    const { dropdown } = this
+    if (!dropdown) {
+      return
+    }
+    if (this.open) {
+      if (this.lastActiveChild) {
+        this.lastActiveChild.setAttribute('tabindex', '0')
+        this.lastActiveChild.focus()
+        this.lastActiveChild = undefined
+      } else {
+        // If no last active child, focus the dropdown itself
+        dropdown.setAttribute('tabindex', '0')
+      }
+    } else {
+      // const activeChild = dropdown.querySelector(':focus') || dropdown
+      // this.lastActiveChild = activeChild as HTMLElement
+      // activeChild.removeAttribute('tabindex')
+      // this.trigger?.focus()
+    }
+  }
+
   protected handleOpened(): void {
     const { trigger, dropdown } = this
     if (trigger) {
       trigger.removeAttribute('tabindex')
     }
-    if (dropdown) {
+    if (this.lastActiveChild) {
+      this.lastActiveChild.setAttribute('tabindex', '0')
+      this.lastActiveChild.focus()
+      this.lastActiveChild = undefined
+    } else if (dropdown) {
       dropdown.setAttribute('tabindex', '0')
       dropdown.focus()
     }
@@ -319,11 +355,14 @@ export default class UiDropdownList extends LitElement {
     const { trigger, dropdown } = this
     if (trigger) {
       trigger.setAttribute('tabindex', '0')
-      if (this.matches(':focus-within')) {
-        trigger.focus()
-      }
+      trigger.focus()
     }
     if (dropdown) {
+      const activeChild = dropdown.querySelector('[tabindex="0"]')
+      if (activeChild) {
+        this.lastActiveChild = activeChild as HTMLElement
+        activeChild.removeAttribute('tabindex')
+      }
       dropdown.removeAttribute('tabindex')
     }
   }