@api-client/ui 0.2.10 → 0.2.12

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 {

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

@@ -6,6 +6,8 @@ import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionCon
 import UiRipple from '../../ripple/internals/ripple.js'
 import { setDisabled } from '../../../lib/disabled.js'
 import { ripple } from '../../effects/rippleDirective.js'
+
+import '@material/web/focus/md-focus-ring.js'
 import '../../ripple/ui-ripple.js'
 
 export enum ListItemLines {
@@ -60,6 +62,8 @@ export default class UiListItem extends UiElement {
    */
   @property({ type: Boolean, reflect: true }) accessor static = false
 
+  @property({ type: Number, reflect: true }) override accessor tabIndex = -1
+
   constructor() {
     super()
 
@@ -71,11 +75,17 @@ export default class UiListItem 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))
     this.addEventListener('keydown', this.handleKeyDown.bind(this))
     this.addEventListener('keyup', this.handleKeyUp.bind(this))
-    this.addEventListener('focus', this.handleFocus.bind(this))
-    this.addEventListener('blur', this.handleBlur.bind(this))
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>): void {
+    super.updated(changedProperties)
+    if (changedProperties.has('tabIndex') && (this.tabIndex === -1 || this.tabIndex === null)) {
+      this.ripple?.endPress()
+    }
   }
 
   override connectedCallback(): void {
@@ -98,8 +108,7 @@ export default class UiListItem extends UiElement {
       return
     }
     if (e.key !== ' ' && e.key !== 'Enter') return
-
-    e.preventDefault()
+    // do not prevent default, so that parent elements can handle the key event
     this.beginPress({ positionEvent: e })
   }
 
@@ -111,7 +120,7 @@ export default class UiListItem extends UiElement {
     }
     if (e.key !== ' ' && e.key !== 'Enter') return
 
-    e.preventDefault()
+    // do not prevent default, so that parent elements can handle the key event
     this.endPress({ cancelled: false, actionData: { item: this } })
   }
 
@@ -131,7 +140,7 @@ export default class UiListItem extends UiElement {
     this.ripple.endPress()
   }
 
-  protected handlePointerEnter(e: PointerEvent): void {
+  override handlePointerEnter(e: PointerEvent): void {
     if (this.disabled || this.static) {
       e.stopPropagation()
       e.preventDefault()
@@ -151,20 +160,6 @@ export default class UiListItem extends UiElement {
     this.ripple.endHover()
   }
 
-  protected handleFocus(): void {
-    if (this.disabled || this.static) {
-      return
-    }
-    this.ripple.beginFocus()
-  }
-
-  protected handleBlur(): void {
-    if (this.disabled || this.static) {
-      return
-    }
-    this.ripple.endFocus()
-  }
-
   /**
    * Focuses list item and makes list item focusable via keyboard.
    */
@@ -174,7 +169,6 @@ export default class UiListItem extends UiElement {
     }
     this.setAttribute('tabindex', '0')
     this.focus()
-    this.ripple.beginFocus()
   }
 
   /**
@@ -209,6 +203,7 @@ export default class UiListItem extends UiElement {
     })
 
     return html`
+      <md-focus-ring part="focus-ring" .control="${this as HTMLElement}" inward></md-focus-ring>
       <div class="${surfaceClasses}" ${ripple(() => this.ripple)}>
         <div class="container"></div>
         <div class="state"></div>