@api-client/ui 0.2.9 → 0.2.11

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')
     }
   }

package/src/md/icon-button/internals/IconButton.ts

@@ -1,38 +1,19 @@
 /* eslint-disable max-len */
 import { html, PropertyValues, TemplateResult } from 'lit'
-import { property, queryAsync, state } from 'lit/decorators.js'
+import { property, query } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
-import { when } from 'lit/directives/when.js'
 import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
-import UiRipple from '../../ripple/internals/ripple.js'
-import { ripple } from '../../effects/rippleDirective.js'
 import { UiElement } from '../../UiElement.js'
 import { isDisabled, setDisabled } from '../../../lib/disabled.js'
+import UiRipple from '../../ripple/internals/ripple.js'
 
 import '../../ripple/ui-ripple.js'
-
-/**
- * The type of the icon button rendered.
- */
-export enum IconButtonType {
-  'filled' = 'filled',
-  'tonal' = 'tonal',
-  'outlined' = 'outlined',
-  'standard' = 'standard',
-}
+import '@material/web/focus/md-focus-ring.js'
 
 /**
  * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
  */
-export default class UiIconButton extends UiElement {
-  /**
-   * The type of the rendered button according to Material 3 spec.
-   *
-   * @default {ButtonType.filled}
-   * @attribute
-   */
-  @property({ type: String, reflect: true }) accessor type: IconButtonType
-
+export default class IconButton extends UiElement {
   /**
    * Whether the button can be toggled.
    * A toggle button behaves different as it gets the `aria-pressed` attribute
@@ -53,10 +34,6 @@ export default class UiIconButton extends UiElement {
    */
   @property({ type: Boolean, reflect: true }) accessor active: boolean | undefined
 
-  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>
-
-  @state() protected accessor showRipple = false
-
   get disabled(): boolean {
     return isDisabled(this)
   }
@@ -72,15 +49,11 @@ export default class UiIconButton extends UiElement {
     this.requestUpdate('disabled', old)
   }
 
-  protected readonly getRipple = (): Promise<UiRipple | null> => {
-    this.showRipple = true
-    return this.ripple
-  }
+  @query('ui-ripple') protected accessor ripple!: UiRipple | null
 
   constructor() {
     super()
 
-    this.type = IconButtonType.standard
     this.actionController.cancelKeyboardEvents = true
     this.addEventListener('keydown', this.handleKeyDown.bind(this))
     this.addEventListener('keyup', this.handleKeyUp.bind(this))
@@ -89,6 +62,7 @@ export default class UiIconButton extends UiElement {
     this.addEventListener('pointerup', this.handlePointerUp.bind(this))
     this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))
     this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))
+    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
     this.addEventListener('contextmenu', this.handleContextMenu.bind(this))
   }
 
@@ -109,21 +83,20 @@ export default class UiIconButton extends UiElement {
     super.update(changedProperties)
   }
 
-  protected async pressRipple(): Promise<void> {
-    const element = await this.getRipple()
+  protected pressRipple(options: BeginPressConfig): void {
+    const element = this.ripple
     if (element && !element.isPressed) {
-      element.beginPress()
+      element.beginPress(options.positionEvent as PointerEvent)
     }
   }
 
-  protected async endRipple(): Promise<void> {
-    const element = await this.getRipple()
-    element?.endPress()
+  protected endRipple(): void {
+    this.ripple?.endPress()
   }
 
   override beginPress(options: BeginPressConfig): void {
     super.beginPress(options)
-    this.pressRipple()
+    this.pressRipple(options)
   }
 
   override endPress(config: EndPressConfig): void {
@@ -147,6 +120,20 @@ export default class UiIconButton extends UiElement {
     }
   }
 
+  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()
+    }
+  }
+
   protected override render(): TemplateResult {
     const { pressed = false } = this
     const containerClasses = classMap({
@@ -154,19 +141,15 @@ export default class UiIconButton extends UiElement {
       pressed,
     })
     return html`
-      <div class="${containerClasses}" ${ripple(this.getRipple)}>
+      <md-focus-ring part="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>
+      <ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>
+      <div class="${containerClasses}">
         <div class="container"></div>
         <div class="state"></div>
-        ${when(this.showRipple, this.renderRipple)}
         <div class="content">
           <slot></slot>
         </div>
       </div>
     `
   }
-
-  protected renderRipple = (): TemplateResult => {
-    const { disabled } = this
-    return html`<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`
-  }
 }

package/src/md/icon-button/internals/base.styles.ts

@@ -0,0 +1,93 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: inline-flex;
+    vertical-align: middle;
+    box-sizing: content-box;
+    writing-mode: horizontal-tb !important;
+    text-rendering: auto;
+    cursor: default;
+    user-select: none;
+    height: 40px;
+    width: 40px;
+    border-radius: var(--md-sys-shape-corner-full);
+    --md-ripple-state-layer-shape: var(--md-sys-shape-corner-full);
+    align-items: center;
+    justify-content: center;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    position: relative;
+    outline: none;
+
+    --_content-color: inherit;
+    --_content-opacity: 1;
+    --_container-background-color: initial;
+    --_container-opacity: 1;
+    --_container-border: none;
+    --_state-opacity: 0;
+    --_state-background-color: initial;
+  }
+
+  .content ::slotted(*) {
+    width: 24px !important;
+    height: 24px !important;
+
+    color: var(--_content-color);
+    fill: var(--_content-color);
+    opacity: var(--_content-opacity);
+  }
+
+  .surface {
+    height: inherit;
+    width: inherit;
+    position: relative;
+    border-radius: var(--md-sys-shape-corner-full);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .container,
+  .state {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--md-sys-shape-corner-full);
+  }
+
+  .container {
+    z-index: 1;
+    pointer-events: none;
+    background-color: var(--_container-background-color);
+    opacity: var(--_container-opacity);
+    border: var(--_container-border);
+  }
+
+  .state {
+    z-index: 2;
+    pointer-events: none;
+    opacity: var(--_state-opacity);
+    background-color: var(--_state-background-color);
+  }
+
+  .content {
+    z-index: 3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--_content-color);
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .ripple {
+    border-radius: inherit;
+    z-index: 3;
+  }
+`

package/src/md/icon-button/internals/filled-tonal.styles.ts

@@ -0,0 +1,30 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-secondary-container);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-secondary-container);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-secondary-container);
+
+    --_container-background-color: var(--md-sys-color-secondary-container);
+    --_surface-color: var(--md-sys-color-on-secondary-container);
+    --_content-color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host([disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-opacity: 0.12;
+    --_content-color: var(--md-sys-color-on-surface);
+    --_content-opacity: 0.38;
+  }
+
+  :host([toggle]) {
+    --_container-background-color: var(--md-sys-color-surface-variant);
+    --_content-color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([toggle][active]) {
+    --_container-background-color: var(--md-sys-color-secondary-container);
+    --_content-color: var(--md-sys-color-on-secondary-container);
+  }
+`

package/src/md/icon-button/internals/filled.styles.ts

@@ -0,0 +1,36 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-primary);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-primary);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-primary);
+
+    --_container-background-color: var(--md-sys-color-primary);
+    --_surface-color: var(--md-sys-color-on-primary);
+    --_content-color: var(--md-sys-color-on-primary);
+  }
+
+  :host([disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-opacity: 0.12;
+    --_content-color: var(--md-sys-color-on-surface);
+    --_content-opacity: 0.38;
+  }
+
+  :host([toggle]) {
+    --_content-color: var(--md-sys-color-primary);
+    --_container-background-color: var(--md-sys-color-surface-variant);
+  }
+
+  :host([toggle][active]) {
+    --_container-background-color: var(--md-sys-color-primary);
+    --_content-color: var(--md-sys-color-on-primary);
+  }
+
+  :host([toggle]:not([active])) {
+    --_state-background-color: var(--md-sys-color-primary);
+    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
+    --_content-color: var(--md-sys-color-primary);
+  }
+`

package/src/md/icon-button/internals/outlined.styles.ts

@@ -0,0 +1,31 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    --_container-border: 1px var(--md-sys-color-outline) solid;
+
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface-variant);
+
+    --_container-background-color: transparent;
+    --_surface-color: var(--md-sys-color-on-surface-variant);
+    --_content-color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-opacity: 0.12;
+    --_content-color: var(--md-sys-color-on-surface);
+    --_content-opacity: 0.38;
+  }
+
+  :host([toggle][active]) {
+    --_container-background-color: var(--md-sys-color-inverse-surface);
+    --_content-color: var(--md-sys-color-inverse-on-surface);
+
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-inverse-on-surface);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-inverse-on-surface);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-inverse-on-surface);
+  }
+`

package/src/md/icon-button/internals/standard.styles.ts

@@ -0,0 +1,18 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface-variant);
+    --_container-background-color: transparent;
+    --_content-color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([toggle][active]) {
+    --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-primary);
+    --_content-color: var(--md-sys-color-primary);
+  }
+`

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

@@ -0,0 +1,16 @@
+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/filled.styles.js'
+
+@customElement('ui-filled-icon-button')
+export class UiFilledIconButtonElement extends Element {
+  static override styles: CSSResultOrNative[] = [base, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-filled-icon-button': UiFilledIconButtonElement
+  }
+}

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

@@ -0,0 +1,16 @@
+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/filled-tonal.styles.js'
+
+@customElement('ui-filled-tonal-icon-button')
+export class UiFilledTonalIconButtonElement extends Element {
+  static override styles: CSSResultOrNative[] = [base, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-filled-tonal-icon-button': UiFilledTonalIconButtonElement
+  }
+}

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

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

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

@@ -0,0 +1,16 @@
+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/outlined.styles.js'
+
+@customElement('ui-outlined-icon-button')
+export class UiOutlinedIconButtonElement extends Element {
+  static override styles: CSSResultOrNative[] = [base, styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-outlined-icon-button': UiOutlinedIconButtonElement
+  }
+}

package/src/md/icons/internals/Icon.styles.ts

@@ -3,8 +3,37 @@ import { css } from 'lit'
 export default css`
   :host {
     display: inline-block;
-    width: 24px;
-    height: 24px;
+    font-size: var(--md-icon-size, 24px);
+    width: var(--md-icon-size, 24px);
+    height: var(--md-icon-size, 24px);
+    color: inherit;
     fill: currentColor;
+    font-variation-settings: inherit;
+    font-weight: 400;
+    font-family: var(--md-icon-font, Material Symbols Outlined);
+    display: inline-flex;
+    font-style: normal;
+    place-items: center;
+    place-content: center;
+    line-height: 1;
+    overflow: hidden;
+    letter-spacing: normal;
+    text-transform: none;
+    user-select: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    flex-shrink: 0;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  ::slotted(svg) {
+    fill: currentColor;
+  }
+
+  ::slotted(*) {
+    height: 100%;
+    width: 100%;
   }
 `

package/src/md/icons/internals/Icon.ts

@@ -26,6 +26,20 @@ export default class UiIcon extends LitElement {
     return this.hasIconInternal
   }
 
+  override connectedCallback() {
+    super.connectedCallback()
+    const ariaHidden = this.getAttribute('aria-hidden')
+    if (ariaHidden === 'false') {
+      // Allow the user to set `aria-hidden="false"` to create an icon that is
+      // announced by screen readers.
+      this.removeAttribute('aria-hidden')
+      return
+    }
+    // Needed for VoiceOver, which will create a "group" if the element is a
+    // sibling to other content.
+    this.setAttribute('aria-hidden', 'true')
+  }
+
   protected override willUpdate(cp: PropertyValues<this>): void {
     if (cp.has('icon')) {
       this.updateIcon(this.icon)

package/src/md/list/internals/ListItem.styles.ts

@@ -6,6 +6,12 @@ export default css`
     height: 56px;
     outline: none;
     cursor: default;
+    position: relative;
+
+    --md-focus-ring-shape-end-end: 0px;
+    --md-focus-ring-shape-end-start: 0px;
+    --md-focus-ring-shape-start-end: 0px;
+    --md-focus-ring-shape-start-start: 0px;
   }
 
   :host([disabled]) {
@@ -43,8 +49,6 @@ export default css`
     position: absolute;
     inset: 0;
     z-index: 1;
-
-    /* background-color: var(--md-sys-color-surface); */
   }
 
   .content {