@api-client/ui 0.3.3 → 0.3.4

package/src/md/chip/internals/Chip.ts

@@ -1,11 +1,9 @@
 import { cancelEvent } from '@api-client/core/lib/events/Utils.js'
 import { html, nothing, PropertyValues, TemplateResult } from 'lit'
-import { property, queryAsync, state } from 'lit/decorators.js'
+import { property, query, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
-import { when } from 'lit/directives/when.js'
 import { UiElement } from '../../UiElement.js'
 import UiRipple from '../../ripple/internals/ripple.js'
-import { ripple } from '../../effects/rippleDirective.js'
 import { close, arrowDropDown, check } from '../../icons/Icons.js'
 import { setDisabled } from '../../../lib/disabled.js'
 import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
@@ -22,9 +20,9 @@ export enum ChipType {
  * @slot The content of the chip.
  * @slot icon - The leading icon, sized 18x18 px
  * @slot avatar - The leading image, sized 24x24 px
- * @fires list - When the user requested to activate the list associated with the element.
  * @fires select - When the checked state changed through a user interaction. This only related to
  *                 `filter` chips. Note, `select` is dispatched just before the `click` event.
+ * @fires remove - When the user clicks the "remove" icon on the chip.
  */
 export default class UiChip extends UiElement {
   /**
@@ -51,7 +49,7 @@ export default class UiChip extends UiElement {
    * Whether the chip renders the "close" icon at the end.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) accessor closable: boolean | undefined
+  @property({ type: Boolean, reflect: true }) accessor removable: boolean | undefined
 
   /**
    * Whether the chip is currently checked.
@@ -61,17 +59,14 @@ export default class UiChip extends UiElement {
   @property({ type: Boolean, reflect: true }) accessor checked: boolean | undefined
 
   /**
-   * The ID attribute of the list element that is rendered after activating the chip.
-   * When this is set the chip renders the dropdown icon at the end and sets `aria-*`
-   * attributes informing the assistive technology that this chip controls a list.
+   * When set, the chip will render a trailing icon that indicates that the chip is associated
+   * with a list. It does not do anything.
    *
    * @attribute
    */
-  @property({ type: String, reflect: true }) accessor list: string | undefined
+  @property({ type: Boolean, reflect: true }) accessor list: boolean | undefined
 
-  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>
-
-  @state() protected accessor showRipple = false
+  @query('ui-ripple') protected accessor ripple!: UiRipple | null
 
   /**
    * Determines when the element has an icon in the "icon" slot.
@@ -93,13 +88,14 @@ export default class UiChip extends UiElement {
 
     this.actionController.cancelKeyboardEvents = true
 
-    this.addEventListener('click', this.handleClick.bind(this))
     this.addEventListener('keydown', this.handleKeyDown.bind(this))
     this.addEventListener('keyup', this.handleKeyUp.bind(this))
+    this.addEventListener('click', this.handleClick.bind(this))
     this.addEventListener('pointerdown', this.handlePointerDown.bind(this))
     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('focus', this.handleFocus.bind(this))
     this.addEventListener('blur', this.handleBlur.bind(this))
@@ -121,52 +117,32 @@ export default class UiChip extends UiElement {
     }
   }
 
-  protected async pressRipple(): Promise<void> {
-    const element = await this.getRipple()
-    if (element && !element.isPressed) {
-      element.beginPress()
-    }
-  }
-
-  protected async endRipple(): Promise<void> {
-    const element = await this.getRipple()
-    element?.endPress()
-  }
-
   override beginPress(options: BeginPressConfig): void {
     super.beginPress(options)
-    this.pressRipple()
+    this.classList.add('pressed')
+    this.ripple?.beginPress(options.positionEvent)
   }
 
   override async handleKeyDown(e: KeyboardEvent): Promise<void> {
     super.handleKeyDown(e)
-    if (this.type === ChipType.filter && e.code === 'ArrowDown') {
+    if (this.removable && e.code === 'Backspace') {
       e.preventDefault()
-      this.listAction()
-    } else if (this.closable && e.code === 'Backspace') {
-      e.preventDefault()
-      this.closeAction()
+      this.removeAction()
     }
   }
 
   protected async handleFocus(): Promise<void> {
-    const element = await this.getRipple()
-    element?.beginFocus()
+    this.ripple?.beginFocus()
   }
 
   protected async handleBlur(): Promise<void> {
-    const element = await this.getRipple()
-    element?.endFocus()
-  }
-
-  protected readonly getRipple = (): Promise<UiRipple | null> => {
-    this.showRipple = true
-    return this.ripple
+    this.ripple?.endFocus()
   }
 
   override endPress(info: EndPressConfig): void {
     super.endPress(info)
-    this.endRipple()
+    this.classList.remove('pressed')
+    this.ripple?.endPress()
     const { cancelled, reason } = info
     if (cancelled) {
       return
@@ -183,6 +159,16 @@ export default class UiChip extends UiElement {
     }
   }
 
+  override handlePointerEnter(e: PointerEvent): void {
+    super.handlePointerEnter(e)
+    this.ripple?.beginHover(e)
+  }
+
+  override handlePointerLeave(e: PointerEvent): void {
+    super.handlePointerLeave(e)
+    this.ripple?.endHover()
+  }
+
   /**
    * Toggles the "filter" type of the chip.
    */
@@ -207,47 +193,37 @@ export default class UiChip extends UiElement {
     this.hasAvatar = !!slot.assignedNodes().length
   }
 
-  protected handleListClick(e: Event): void {
-    e.preventDefault()
-    e.stopPropagation()
-    this.listAction()
-  }
-
   protected handleClose(e: Event): void {
     e.preventDefault()
     e.stopPropagation()
-    this.closeAction()
+    this.removeAction()
   }
 
-  protected async closeAction(): Promise<void> {
-    this.dispatchEvent(new Event('close'))
-  }
-
-  protected async listAction(): Promise<void> {
-    this.dispatchEvent(new Event('list'))
+  protected async removeAction(): Promise<void> {
+    this.dispatchEvent(new Event('remove'))
   }
 
   protected override render(): TemplateResult {
-    const { pressed = false } = this
     const containerClasses = classMap({
-      surface: true,
-      withIcon: this.hasIcon,
-      withAvatar: this.hasAvatar,
-      pressed,
+      'surface': true,
+      'has-icon': this.hasIcon,
+      'has-avatar': this.hasAvatar,
+      'has-trailing-icon': this.hasTrailingIcon,
     })
     return html`
-      <div class="${containerClasses}" ${ripple(this.getRipple)}>
-        <div class="container"></div>
-        ${when(this.showRipple, this.renderRipple)}
-        <div class="content">
-          ${this.renderLeadingIcon()} ${this.renderAvatar()}
-          <slot></slot>
-          ${this.renderTrailingIcon()}
-        </div>
+      ${this.renderRipple()}
+      <div class="${containerClasses}">
+        ${this.renderLeadingIcon()} ${this.renderAvatar()}
+        <slot></slot>
+        ${this.renderTrailingIcon()}
       </div>
     `
   }
 
+  protected renderRipple(): TemplateResult {
+    return html`<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`
+  }
+
   protected renderLeadingIcon(): TemplateResult | typeof nothing {
     const { type } = this
     if (type === ChipType.suggestion) {
@@ -261,31 +237,19 @@ export default class UiChip extends UiElement {
       })
       return html`<span class="${iconClasses}" role="presentation">${check}</span>`
     }
-    return html`<slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot>`
+    return html`<slot class="leading-icon" name="icon" @slotchange="${this.handleIconSlotChange}"></slot>`
   }
 
   protected renderAvatar(): TemplateResult | typeof nothing {
-    const { type } = this
-    if (type === ChipType.input) {
-      return html`<slot name="avatar" @slotchange="${this.handleAvatarSlotChange}"></slot>`
-    }
-    return nothing
+    return html`<slot name="avatar" @slotchange="${this.handleAvatarSlotChange}"></slot>`
   }
 
   protected renderTrailingIcon(): TemplateResult | typeof nothing {
-    const { closable = false, list, type } = this
-    if (type === ChipType.filter) {
-      if (list) {
-        return html`<span
-          class="trailing-icon"
-          role="presentation"
-          @click="${this.handleListClick}"
-          @keypress="${cancelEvent}"
-          >${arrowDropDown}</span
-        >`
-      }
+    const { removable = false, list, type } = this
+    if (type === ChipType.filter && list) {
+      return html`<span class="trailing-icon" role="presentation">${arrowDropDown}</span>`
     }
-    if (type === ChipType.input && closable) {
+    if (type === ChipType.input && removable) {
       return html`<span
         class="trailing-icon"
         @click="${this.handleClose}"
@@ -298,8 +262,14 @@ export default class UiChip extends UiElement {
     return nothing
   }
 
-  protected renderRipple = (): TemplateResult => {
-    const { disabled } = this
-    return html`<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`
+  get hasTrailingIcon(): boolean {
+    const { removable = false, list, type } = this
+    if (type === ChipType.filter && list) {
+      return true
+    }
+    if (type === ChipType.input && removable) {
+      return true
+    }
+    return false
   }
 }

package/src/md/chip/internals/ChipSet.styles.ts

@@ -0,0 +1,9 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+`

package/src/md/chip/internals/ChipSet.ts

@@ -0,0 +1,142 @@
+import { html, LitElement } from 'lit'
+import { queryAssignedElements } from 'lit/decorators.js'
+
+import Chip from './Chip.js'
+
+/**
+ * A chip set component.
+ */
+export default class ChipSet extends LitElement {
+  get chips() {
+    return this.childElements.filter((child): child is Chip => child instanceof Chip)
+  }
+
+  @queryAssignedElements() private accessor childElements!: HTMLElement[]
+  private readonly internals = this.attachInternals()
+
+  constructor() {
+    super()
+    this.addEventListener('focusin', this.updateTabIndices.bind(this))
+    this.addEventListener('update-focus', this.updateTabIndices.bind(this))
+    this.addEventListener('keydown', this.handleKeyDown.bind(this))
+    this.internals.role = 'toolbar'
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'toolbar')
+    }
+  }
+
+  protected override render() {
+    return html`<slot @slotchange=${this.updateTabIndices}></slot>`
+  }
+
+  private handleKeyDown(event: KeyboardEvent) {
+    const isLeft = event.key === 'ArrowLeft'
+    const isRight = event.key === 'ArrowRight'
+    const isHome = event.key === 'Home'
+    const isEnd = event.key === 'End'
+    // Ignore non-navigation keys
+    if (!isLeft && !isRight && !isHome && !isEnd) {
+      return
+    }
+
+    const { chips } = this as { chips: MaybeMultiActionChip[] }
+    // Don't try to select another chip if there aren't any.
+    if (chips.length < 2) {
+      return
+    }
+
+    // Prevent default interactions, such as scrolling.
+    event.preventDefault()
+
+    if (isHome || isEnd) {
+      const index = isHome ? 0 : chips.length - 1
+      chips[index].focus({ trailing: isEnd })
+      this.updateTabIndices()
+      return
+    }
+
+    // Check if moving forwards or backwards
+    const isRtl = getComputedStyle(this).direction === 'rtl'
+    const forwards = isRtl ? isLeft : isRight
+    const focusedChip = chips.find((chip) => chip.matches(':focus-within'))
+    if (!focusedChip) {
+      // If there is not already a chip focused, select the first or last chip
+      // based on the direction we're traveling.
+      const nextChip = forwards ? chips[0] : chips[chips.length - 1]
+      nextChip.focus({ trailing: !forwards })
+      this.updateTabIndices()
+      return
+    }
+
+    const currentIndex = chips.indexOf(focusedChip)
+    let nextIndex = forwards ? currentIndex + 1 : currentIndex - 1
+    // Search for the next sibling that is not disabled to select.
+    // If we return to the host index, there is nothing to select.
+    while (nextIndex !== currentIndex) {
+      if (nextIndex >= chips.length) {
+        // Return to start if moving past the last item.
+        nextIndex = 0
+      } else if (nextIndex < 0) {
+        // Go to end if moving before the first item.
+        nextIndex = chips.length - 1
+      }
+
+      // Check if the next sibling is disabled. If so,
+      // move the index and continue searching.
+      //
+      // Some toolbar items may be focusable when disabled for increased
+      // visibility.
+      const nextChip = chips[nextIndex]
+      if (nextChip.disabled) {
+        if (forwards) {
+          nextIndex++
+        } else {
+          nextIndex--
+        }
+
+        continue
+      }
+
+      nextChip.focus({ trailing: !forwards })
+      this.updateTabIndices()
+      break
+    }
+  }
+
+  private updateTabIndices() {
+    // The chip that should be focusable is either the chip that currently has
+    // focus or the first chip that can be focused.
+    const { chips } = this
+    let chipToFocus: Chip | undefined
+    for (const chip of chips) {
+      const isChipFocusable = !chip.disabled
+      const chipIsFocused = chip.matches(':focus-within')
+      if (chipIsFocused && isChipFocusable) {
+        // Found the first chip that is actively focused. This overrides the
+        // first focusable chip found.
+        chipToFocus = chip
+        continue
+      }
+
+      if (isChipFocusable && !chipToFocus) {
+        chipToFocus = chip
+      }
+
+      // Disable non-focused chips. If we disable all of them, we'll grant focus
+      // to the first focusable child that was found.
+      chip.tabIndex = -1
+    }
+
+    if (chipToFocus) {
+      chipToFocus.tabIndex = 0
+    }
+  }
+}
+
+interface MaybeMultiActionChip extends Chip {
+  focus(options?: FocusOptions & { trailing?: boolean }): void
+}

package/src/md/chip/ui-chip-set.ts

@@ -0,0 +1,15 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/ChipSet.js'
+import styles from './internals/ChipSet.styles.js'
+
+@customElement('ui-chip-set')
+export class UiChipSetElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-chip-set': UiChipSetElement
+  }
+}

package/src/md/switch/internals/Switch.styles.ts

@@ -35,7 +35,7 @@ export default css`
 
     border: 2px var(--md-sys-color-outline) solid;
     border-radius: var(--md-sys-shape-corner-extra-large);
-    background-color: var(--md-sys-color-surface-variant);
+    background-color: var(--md-sys-color-surface-container-highest);
 
     transition:
       opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),

package/test/ui/chip/UiChip.test.ts

@@ -26,15 +26,6 @@ describe('md', () => {
         )
       }
 
-      async function disableIconFixture(): Promise<UiChip> {
-        return fixture(
-          html`<ui-chip type="assist" disabled>
-            <ui-icon slot="icon" icon="add"></ui-icon>
-            Disabled with icon
-          </ui-chip>`
-        )
-      }
-
       async function elevatedFixture(): Promise<UiChip> {
         return fixture(html`<ui-chip type="assist" elevated>Elevated</ui-chip>`)
       }
@@ -45,9 +36,8 @@ describe('md', () => {
 
       it('renders border around a regular assist chip', async () => {
         const element = await basicFixture()
-        const container = element.shadowRoot?.querySelector('.container') as HTMLDivElement
-        const styles = getComputedStyle(container)
-        const m3Color = styles.getPropertyValue('--md-sys-color-outline')
+        const styles = getComputedStyle(element)
+        const m3Color = styles.getPropertyValue('--md-sys-color-outline-variant')
         const borderColor = ColorConverter.normalizeColor(styles.borderColor)
         const compareColor = ColorConverter.normalizeColor(m3Color)
         assert.equal(borderColor, compareColor, 'has the m3 color')
@@ -89,43 +79,28 @@ describe('md', () => {
 
       it('renders suffix icon', async () => {
         const element = await iconFixture()
-        const surface = element.shadowRoot!.querySelector('.surface') as HTMLDivElement
-        assert.isTrue(surface.classList.contains('withIcon'), 'the surface has the withIcon class')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
+        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
+        assert.isTrue(surface.classList.contains('has-icon'), 'the surface has the has-icon class')
+        const contentStyles = getComputedStyle(surface)
         assert.equal(contentStyles.paddingLeft.trim(), '8px', 'the container has the padding')
         const icon = element.querySelector('ui-icon')!
         const iconStyles = getComputedStyle(icon)
         assert.equal(iconStyles.marginRight.trim(), '8px', 'the icon has the margin')
       })
 
-      it('has disabled styles when disabled', async () => {
-        const element = await disableIconFixture()
-        const container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
-        assert.equal(containerStyles.opacity, '0.12', 'container has the opacity')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
-        assert.equal(contentStyles.opacity, '0.68', 'content has the opacity')
-      })
-
       it('has elevated styles', async () => {
         const element = await elevatedFixture()
-        const container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
+        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
+        const containerStyles = getComputedStyle(surface)
         assert.equal(containerStyles.borderWidth, '0px', 'has no border')
         assert.isNotEmpty(containerStyles.boxShadow, 'has a box shadow')
       })
 
       it('has no elevated styles when disabled', async () => {
         const element = await disabledElevatedFixture()
-        const container = element.shadowRoot!.querySelector('.container') as HTMLDivElement
-        const containerStyles = getComputedStyle(container)
+        const surface = element.shadowRoot!.querySelector<HTMLDivElement>('.surface')!
+        const containerStyles = getComputedStyle(surface)
         assert.equal(containerStyles.boxShadow, 'none', 'has no box shadow')
-        assert.equal(containerStyles.opacity, '0.12', 'container has the opacity')
-        const content = element.shadowRoot!.querySelector('.content') as HTMLDivElement
-        const contentStyles = getComputedStyle(content)
-        assert.equal(contentStyles.opacity, '0.68', 'content has the opacity')
       })
     })
 
@@ -138,19 +113,18 @@ describe('md', () => {
         return fixture(html`<ui-chip type="filter" disabled>Disabled</ui-chip>`)
       }
 
-      async function closableFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter" closable>Closable</ui-chip>`)
+      async function removableFixture(): Promise<UiChip> {
+        return fixture(html`<ui-chip type="filter" removable>removable</ui-chip>`)
       }
 
       async function listFixture(): Promise<UiChip> {
-        return fixture(html`<ui-chip type="filter" list="abc">List</ui-chip>`)
+        return fixture(html`<ui-chip type="filter" list>List</ui-chip>`)
       }
 
-      it('renders a border around the chip', async () => {
+      it('renders border around the chip', async () => {
         const element = await basicFixture()
-        const container = element.shadowRoot?.querySelector('.container') as HTMLDivElement
-        const styles = getComputedStyle(container)
-        const m3Color = styles.getPropertyValue('--md-sys-color-outline')
+        const styles = getComputedStyle(element)
+        const m3Color = styles.getPropertyValue('--md-sys-color-outline-variant')
         const borderColor = ColorConverter.normalizeColor(styles.borderColor)
         const compareColor = ColorConverter.normalizeColor(m3Color)
         assert.equal(borderColor, compareColor, 'has the m3 color')
@@ -208,7 +182,7 @@ describe('md', () => {
       })
 
       it('does not render the close icon', async () => {
-        const element = await closableFixture()
+        const element = await removableFixture()
         const node = element.shadowRoot!.querySelector('.trailing-icon')
         assert.notOk(node)
       })
@@ -219,36 +193,13 @@ describe('md', () => {
         assert.ok(node, 'has the icon')
       })
 
-      it('dispatches the list event', async () => {
-        const element = await listFixture()
-        const spy = sinon.spy()
-        element.addEventListener('list', spy)
-        const node = element.shadowRoot!.querySelector('.trailing-icon') as HTMLElement
-        node.click()
-        assert.isTrue(spy.calledOnce)
-      })
-
-      it('prevents the "click" event when dispatching the "list" event', async () => {
-        const element = await listFixture()
-        const spy = sinon.spy()
-        element.addEventListener('click', spy)
-        const node = element.shadowRoot!.querySelector('.trailing-icon') as HTMLElement
-        node.click()
-        assert.isFalse(spy.called)
-      })
-
       it('is accessible in a regular state', async () => {
         const element = await basicFixture()
         await assert.isAccessible(element)
       })
 
-      it('is accessible in a disabled state', async () => {
-        const element = await disabledFixture()
-        await assert.isAccessible(element)
-      })
-
-      it('is accessible when closable', async () => {
-        const element = await closableFixture()
+      it('is accessible when removable', async () => {
+        const element = await removableFixture()
         await assert.isAccessible(element)
       })