@api-client/ui 0.3.2 → 0.3.4

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

@@ -6,166 +6,179 @@ export default css`
     vertical-align: middle;
     outline: none;
     -webkit-tap-highlight-color: transparent;
-    height: 32px;
+    position: relative;
+    user-select: none;
 
     font-family: var(--md-sys-typescale-label-large-font);
     font-size: var(--md-sys-typescale-label-large-size);
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     line-height: var(--md-sys-typescale-label-large-height);
 
-    border-radius: var(--md-sys-shape-corner-small);
-    color: var(--md-sys-color-on-surface);
-    fill: var(--md-sys-color-primary);
-
-    user-select: none;
-
     --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);
-  }
 
-  :host([disabled]) {
-    pointer-events: none;
-  }
-
-  :host([disabled]) .container {
-    border-color: var(--md-sys-color-on-surface);
-    opacity: 0.12;
-  }
+    --_leading-icon-color: currentColor;
+    --_trailing-icon-color: currentColor;
+    --_background-color: transparent;
+    --_color: inherit;
+    --_shadow: var(--md-sys-elevation-0);
+    --_outline-color: transparent;
+    --_outline-size: 0;
+    --_inline-padding-start: 16px;
+    --_inline-padding-end: 16px;
+    --_avatar-size: 24px;
+    --_avatar-shape: 24px;
+    --_icon-size: 18px;
 
-  :host([disabled][elevated]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: 0.12;
-    box-shadow: none;
-  }
-
-  :host([disabled]) .content {
-    color: var(--md-sys-color-on-surface);
-    opacity: 0.68;
-  }
-
-  .surface {
-    position: relative;
-    height: inherit;
-    border-radius: inherit;
+    height: 32px;
+    border-radius: var(--md-sys-shape-corner-small);
+    box-shadow: var(--_shadow);
+    border: var(--_outline-size) solid var(--_outline-color);
   }
 
   .ripple {
-    z-index: 0;
     border-radius: inherit;
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
   }
 
-  .container {
-    position: absolute;
-    inset: 0;
+  .ripple.activated {
+    z-index: 1;
+  }
 
-    box-sizing: border-box;
-    border-radius: inherit;
-    border: 1px var(--md-sys-color-outline) solid;
-    z-index: 0;
+  :host([disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    --_leading-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    --_trailing-icon-color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    --_outline-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
+    box-shadow: none;
+    cursor: not-allowed;
+    pointer-events: none;
   }
 
-  .content {
+  .surface {
     height: inherit;
     display: flex;
     align-items: center;
     justify-content: start;
     box-sizing: border-box;
-    padding: 0 16px;
+    padding: 0 var(--_inline-padding-end) 0 var(--_inline-padding-start);
     border-radius: inherit;
-    border: 1px transparent solid;
-    position: relative;
-    z-index: 1;
+    background-color: var(--_background-color);
+    color: var(--_color);
+    gap: 0;
   }
 
-  :host([elevated]) .container {
-    background-color: var(--md-sys-color-surface);
-    box-shadow: var(--md-sys-elevation-1);
-    border-width: 0;
+  .leading-icon {
+    height: var(--_icon-size);
+    width: 0px;
+    overflow: hidden;
+    transition: width 230ms var(--md-sys-animation-easing-standard);
+    color: var(--_leading-icon-color);
+    fill: currentColor;
   }
 
-  .withIcon .content,
-  :host([type='filter'][checked]) .content {
-    padding-left: 8px;
+  .leading-icon::slotted(*) {
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+    margin-right: 8px;
   }
 
-  .withAvatar .content {
-    padding-left: 4px;
+  slot[name='avatar']::slotted(*) {
+    width: var(--_avatar-size);
+    height: var(--_avatar-size);
+    border-radius: var(--_avatar-shape);
+    flex-shrink: 0;
+    flex-grow: 0;
+    margin-right: 8px;
   }
 
-  :host([closable]) .content,
-  :host([type='filter'][list]) .content {
-    padding-right: 8px;
+  .check-mark.checked {
+    width: 18px;
+    margin-right: 8px;
   }
 
-  .withIcon slot[name='icon']::slotted(*),
-  .withAvatar slot[name='avatar']::slotted(*) {
-    margin-right: 8px;
+  .trailing-icon {
+    margin-left: 8px;
+    width: 18px;
+    height: 18px;
+    color: var(--_trailing-icon-color);
+    fill: currentColor;
   }
 
-  slot[name='icon']::slotted(*) {
-    width: 16px;
-    height: 16px;
+  :host([elevated]) {
+    --_shadow: var(--md-sys-elevation-1);
+    border: none;
+    --_background-color: var(--md-sys-color-surface-container-low);
   }
 
-  slot[name='avatar']::slotted(*) {
-    width: 24px;
-    height: 24px;
-    border-radius: var(--md-sys-shape-corner-medium);
+  :host([elevated]:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-2);
   }
 
-  .leading-icon {
-    height: 18px;
-    width: 0px;
-    overflow: hidden;
-    transition: width 230ms var(--md-sys-animation-easing-standard);
+  .surface.has-trailing-icon {
+    --_inline-padding-end: 8px;
   }
 
-  .check-mark.checked {
-    width: 18px;
-    margin-right: 8px;
+  :host([type='assist']:not([disabled])) {
+    --_outline-color: var(--md-sys-color-outline-variant);
+    --_outline-size: 1px;
+    --_color: var(--md-sys-color-on-surface);
+    --_leading-icon-color: var(--md-sys-color-primary);
   }
 
-  .trailing-icon {
-    margin-left: 8px;
-    width: 18px;
-    height: 18px;
-    fill: var(--md-sys-color-on-surface-variant);
+  :host .has-icon {
+    --_inline-padding-start: 8px;
+  }
+
+  :host .has-avatar {
+    --_inline-padding-start: 4px;
+  }
+
+  :host([checked]) {
+    --_inline-padding-start: 8px;
+    --_background-color: var(--md-sys-color-secondary-container);
   }
 
-  :host([elevated]:hover) .container,
-  :host([elevated]:focus) .container {
-    box-shadow: var(--md-sys-elevation-2);
+  :host([type='filter']:not([disabled])) {
+    --_leading-icon-color: var(--md-sys-color-primary);
+    --_trailing-icon-color: var(--md-sys-on-surface-variant);
+    --_outline-color: var(--md-sys-color-outline-variant);
+    --_outline-size: 1px;
+    --_color: var(--md-sys-color-on-surface-variant);
   }
 
-  :host([elevated][dragged]) .container {
-    box-shadow: var(--md-sys-elevation-4);
+  :host([type='filter'][checked]) {
+    --_outline-size: 1px;
   }
 
-  :host([checked]) .container {
-    background-color: var(--md-sys-color-secondary-container);
-    border-width: 0;
+  :host([type='filter'][checked]:not([disabled])) {
+    --_leading-icon-color: var(--md-sys-color-on-secondary-container);
+    --_trailing-icon-color: var(--md-sys-on-secondary-container);
+    --_outline-color: var(--md-sys-color-secondary-container);
+    --_color: var(--md-sys-color-on-secondary-container);
   }
 
-  :host([type='filter']),
-  :host([type='filter']) .leading-icon {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
+  :host([type='input']:not([disabled])) {
+    --_outline-color: var(--md-sys-color-outline-variant);
+    --_outline-size: 1px;
+    --_leading-icon-color: var(--md-sys-color-primary);
+    --_trailing-icon-color: var(--md-sys-color-on-surface-variant);
+    --_color: var(--md-sys-color-on-surface-variant);
   }
 
-  :host([type='filter'][checked]),
-  :host([type='filter'][checked]) .leading-icon {
-    color: var(--md-sys-color-on-secondary-container);
+  :host([type='input'][checked]) {
+    --_outline-size: 0px;
   }
 
-  :host([type='input']) .container {
-    background-color: var(--md-sys-color-surface);
-    color: var(--md-sys-color-on-surface-variant);
+  :host([type='suggestion']) {
+    --_outline-size: 1px;
+    --_outline-color: var(--md-sys-color-outline-variant);
+    --_color: var(--md-sys-color-on-surface-variant);
   }
 
-  :host([type='input']) .leading-icon,
-  :host([type='input']) .trailing-icon {
-    color: var(--md-sys-color-on-surface-variant);
-    fill: var(--md-sys-color-on-surface-variant);
+  :host([type='suggestion']:not([disabled])) {
+    --_leading-icon-color: var(--md-sys-color-primary);
   }
 `

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;
+  }
+`