@api-client/ui 0.3.2 → 0.3.4

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/motion/animation.ts

@@ -9,9 +9,11 @@
  */
 export enum Easing {
   STANDARD = 'cubic-bezier(0.2, 0, 0, 1)',
-  ACCELERATION = 'cubic-bezier(0.4, 0, 1, 1)',
-  DECELERATION = 'cubic-bezier(0, 0, 0.2, 1)',
+  ACCELERATION = 'cubic-bezier(0.3, 0, 1, 1)',
+  DECELERATION = 'cubic-bezier(0, 0, 0, 1)',
   SHARP = 'cubic-bezier(0.4, 0, 0.6, 1)',
+  EMPHASIZED_ACCELERATE = 'cubic-bezier(0.3, 0, 0.8, 0.15)',
+  EMPHASIZED_DECELERATE = 'cubic-bezier(0.05, 0.7, 0.1, 1)',
 }
 
 /**

package/src/md/ripple/internals/ripple.styles.ts

@@ -22,7 +22,8 @@ export default css`
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
-  .surface::before {
+  .surface::before,
+  .surface::after {
     position: absolute;
     opacity: 0;
     pointer-events: none;
@@ -37,10 +38,19 @@ export default css`
     inset: 0;
   }
 
+  .surface::after {
+    transition: opacity 375ms linear;
+    transform-origin: center center;
+  }
+
   .focused::before {
     transition-duration: 75ms;
   }
 
+  .pressed::after {
+    transition-duration: 105ms;
+  }
+
   .surface {
     border-radius: var(--md-ripple-state-layer-shape, 0);
   }
@@ -49,6 +59,14 @@ export default css`
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
   }
 
+  .surface::after {
+    background: radial-gradient(
+      closest-side,
+      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
+      transparent 100%
+    );
+  }
+
   .surface.hovered::before {
     opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
@@ -59,14 +77,8 @@ export default css`
     background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));
   }
 
-  .surface.pressed::before {
+  .surface.pressed::after {
     opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
-    /* background-color: var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)); */
-    background: radial-gradient(
-      closest-side,
-      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
-      transparent 100%
-    );
   }
 
   .surface.unbounded {

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/src/md/tabs/internals/Tab.styles.ts

@@ -2,9 +2,15 @@ import { css } from 'lit'
 
 export default css`
   :host {
-    display: inline-block;
-    vertical-align: top;
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: center;
+
+    position: relative;
     box-sizing: content-box;
+    padding: 0 16px;
+
     outline: none;
     text-rendering: auto;
     cursor: default;
@@ -18,55 +24,48 @@ export default css`
     letter-spacing: var(--md-sys-typescale-title-small-tracking);
     line-height: var(--md-sys-typescale-title-small-height);
 
-    --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);
-    /* background-color: var(--md-sys-color-surface); */
-    color: var(--md-sys-color-on-surface);
+    --md-ripple-hover-state-layer-color: currentColor;
+    --md-ripple-focus-state-layer-color: currentColor;
+    --md-ripple-pressed-state-layer-color: currentColor;
+
+    --_background-color: var(--md-sys-color-surface);
+    --_color: var(--md-sys-color-on-surface-variant);
+    --_container-height: 48px;
+    --_active-indicator-color: var(--md-sys-color-primary);
+    --_active-indicator-shape: var(--md-primary-tab-active-indicator-shape, 3px 3px 0px 0px);
+    --_active-indicator-height: 2px;
+    --_active-indicator-opacity: 0;
+    --_with-icon-and-label-text-container-height: var(--md-primary-tab-with-icon-and-label-text-container-height, 64px);
+    --_icon-size: var(--md-secondary-tab-icon-size, 24px);
+
+    background-color: var(--_background-color);
+    color: var(--_color);
   }
 
   :host([hidden]) {
     display: none;
   }
 
-  .surface {
-    width: inherit;
-    height: inherit;
-    position: relative;
-    border-radius: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 48px;
+  .ripple.activated {
+    z-index: 1;
   }
 
-  .surface.withIcon {
-    height: 64px;
+  .focus-ring {
+    border-radius: var(--md-sys-shape-corner-small);
+    transition: margin-bottom var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
   }
 
-  .container {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-  }
-
-  .content {
-    z-index: 2;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 0px 20px;
+  :host([selected]) .focus-ring {
+    margin-bottom: calc(var(--_active-indicator-height) + 1px);
   }
 
   .tab-content {
     display: flex;
     align-items: center;
-  }
-
-  .ripple {
-    border-radius: inherit;
-    z-index: 3;
+    justify-content: center;
+    flex-direction: row;
+    gap: 8px;
+    height: var(--_container-height);
   }
 
   .icon ::slotted(*) {
@@ -82,54 +81,60 @@ export default css`
   }
 
   :host([selected]) {
-    color: var(--md-sys-color-primary);
+    --_active-indicator-opacity: 1;
   }
 
-  .indicator {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
-    height: 2px;
-    display: flex;
-    justify-content: center;
+  :host([priority='primary']) {
+    --_color: var(--md-primary-tab-label-text-color, var(--md-sys-color-on-surface-variant));
   }
 
-  .indicator.primary {
-    height: 3px;
+  :host([priority='secondary']) {
+    --_color: var(--md-secondary-tab-label-text-color, var(--md-sys-color-on-surface-variant));
   }
 
-  .pointer {
-    height: inherit;
-    display: block;
-    background-color: var(--md-sys-color-primary);
+  :host([selected][priority='primary']) {
+    --_color: var(--md-primary-tab-active-label-text-color, var(--md-sys-color-primary));
   }
 
-  .indicator.primary .pointer {
-    border-radius: 3px 3px 0px 0px;
-    width: 40px;
+  :host([selected][priority='secondary']) {
+    --_color: var(--md-secondary-tab-active-label-text-color, var(--md-sys-color-on-surface));
   }
 
-  .indicator:not(.primary) .pointer {
-    flex: 1;
+  .surface {
+    position: relative;
+  }
+
+  .indicator {
+    position: absolute;
+    box-sizing: border-box;
+    transform-origin: bottom left;
+    background: var(--_active-indicator-color);
+    border-radius: var(--_active-indicator-shape);
+    height: var(--_active-indicator-height);
+    inset: auto 0 0 0;
+    opacity: var(--_active-indicator-opacity);
+  }
+
+  :host([priority='primary']) {
+    --_active-indicator-height: 3px;
+    --_active-indicator-shape: 3px 3px 0px 0px;
   }
 
   :host([disabled]) {
     pointer-events: none;
   }
 
-  :host([disabled]) .content {
-    color: var(--md-sys-color-on-surface);
+  :host([disabled]) {
+    --_color: var(--md-sys-color-on-surface);
     opacity: 0.38;
   }
 
-  :host(:hover) .container {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
+  .stacked .tab-content {
+    flex-direction: column;
+    gap: 2px;
   }
 
-  :host(:focus) .container {
-    background-color: var(--md-sys-color-primary);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
+  .stacked.has-icon.has-label .tab-content {
+    height: var(--_with-icon-and-label-text-container-height);
   }
 `

package/src/md/tabs/internals/Tab.ts

@@ -1,13 +1,11 @@
-import { html, nothing, TemplateResult } from 'lit'
-import { property, queryAsync, state } from 'lit/decorators.js'
+import { html, nothing, PropertyValues, TemplateResult } from 'lit'
+import { property, query, state } from 'lit/decorators.js'
 import { ClassInfo, classMap } from 'lit/directives/class-map.js'
-import { when } from 'lit/directives/when.js'
-import { EndPressConfig } from '../../../controllers/ActionController.js'
-import UiRipple from '../../ripple/internals/ripple.js'
-import { ripple } from '../../effects/rippleDirective.js'
+import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
+import type UiRipple from '../../ripple/internals/ripple.js'
 import { isDisabled, setDisabled } from '../../../lib/disabled.js'
 import { UiElement } from '../../UiElement.js'
-import type { TabsPriority } from './Tabs.js'
+import type { SizingInfo, TabsPriority } from './Tabs.js'
 import { Easing } from '../../motion/animation.js'
 import '../../ripple/ui-ripple.js'
 
@@ -32,31 +30,38 @@ export default class UiTab extends UiElement {
    * in the `ui-tabs`. This is only to render the tab in the selected state.
    * @attribute
    */
-  @property({ reflect: true, type: Boolean }) accessor selected = false
+  @property({ reflect: true, type: Boolean }) accessor selected
 
   /**
    * @attribute
    */
-  @property({ reflect: true, type: Boolean }) accessor priority: TabsPriority = 'primary'
+  @property({ reflect: true, type: String }) accessor priority: TabsPriority
 
   /**
    * @attribute
    */
-  @property({ reflect: true, type: Boolean }) accessor indicated = false
+  @property({ reflect: true, type: Boolean }) accessor indicated
 
-  @state() protected accessor hasIcon = false
-
-  @state() protected accessor showRipple = false
+  /**
+   * Indicates whether the tab has an icon.
+   * This is set automatically when the "icon" slot is populated.
+   */
+  @state() protected accessor hasIcon
+  /**
+   * Indicates whether the tab only has an icon and no text.
+   * This is set automatically when the default slot is populated with only an icon.
+   */
+  @state() protected accessor iconOnly
 
-  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>
-
-  protected readonly getRipple = (): Promise<UiRipple | null> => {
-    this.showRipple = true
-    return this.ripple
-  }
+  @query('ui-ripple') protected accessor ripple!: UiRipple | null
 
   constructor() {
     super()
+    this.priority = 'primary'
+    this.selected = false
+    this.indicated = false
+    this.hasIcon = false
+    this.iconOnly = true
     this.actionController.cancelKeyboardEvents = true
     this.addEventListener('keydown', this.handleKeyDown.bind(this))
     this.addEventListener('keyup', this.handleKeyUp.bind(this))
@@ -65,6 +70,7 @@ export default class UiTab 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))
   }
 
@@ -78,8 +84,23 @@ export default class UiTab extends UiElement {
     }
   }
 
+  protected override willUpdate(cp: PropertyValues<this>): void {
+    super.willUpdate(cp)
+    if (cp.has('selected')) {
+      this.setAttribute('aria-selected', String(this.selected))
+    }
+  }
+
+  override beginPress(options: BeginPressConfig): void {
+    super.beginPress(options)
+    this.classList.add('pressed')
+    this.ripple?.beginPress(options.positionEvent)
+  }
+
   override endPress(config: EndPressConfig): void {
     super.endPress(config)
+    this.classList.remove('pressed')
+    this.ripple?.endPress()
     const { cancelled, reason } = config
     if (cancelled) {
       return
@@ -89,18 +110,77 @@ export default class UiTab extends UiElement {
     }
   }
 
+  override handleClick(e: MouseEvent): void {
+    super.handleClick(e)
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+    this.endPress({ cancelled: false, actionData: { event: e } })
+  }
+
+  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()
+    }
+  }
+
+  override handleKeyUp(e: KeyboardEvent): void {
+    super.handleKeyUp(e)
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+  }
+
   /**
    * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
    */
-  protected handleIconChange(e: Event): void {
+  protected handleIconSlotChange(e: Event): void {
     const slot = e.target as HTMLSlotElement
     this.hasIcon = !!slot.assignedNodes().length
   }
 
+  protected handleSlotChange(e: Event): void {
+    const slot = e.target as HTMLSlotElement
+    // Check if there's any label text or elements. If not, then there is only
+    // an icon.
+    for (const node of slot.assignedNodes()) {
+      const hasTextContent = node.nodeType === Node.TEXT_NODE && !!(node as Text).wholeText.match(/\S/)
+      if (node.nodeType === Node.ELEMENT_NODE || hasTextContent) {
+        this.iconOnly = false
+        return
+      }
+    }
+    this.iconOnly = true
+  }
+
+  public getIndicatorSizing(): SizingInfo {
+    const element = this.priority === 'primary' ? this.shadowRoot?.querySelector('.tab-content') : this
+    if (!element) {
+      return { width: 0, left: 0 }
+    }
+    const rect = element.getBoundingClientRect()
+    return {
+      width: rect.width,
+      left: rect.left,
+    }
+  }
+
   /**
    * When `indicated` is `true` it animates the indicator to highlight the position of the tab.
    */
-  highlight(): void {
+  public highlight(): void {
     if (!this.indicated) {
       return
     }
@@ -128,36 +208,41 @@ export default class UiTab extends UiElement {
   }
 
   protected override render(): TemplateResult {
-    const { pressed = false } = this
+    const isPrimary = this.priority === 'primary'
     const containerClasses = classMap({
-      surface: true,
-      withIcon: this.hasIcon,
-      pressed,
+      'surface': true,
+      'has-icon': this.hasIcon,
+      'has-label': !this.iconOnly,
+      'stacked': isPrimary,
     })
     return html`
-      <div class="${containerClasses}" ${ripple(this.getRipple)}>
-        <div class="container"></div>
-        ${when(this.showRipple, this.renderRipple)}
-        <div class="content">
+      ${this.renderFocusRing()} ${this.renderRipple()}
+      <div class="${containerClasses}">
+        <div class="tab-content">
           ${this.renderIcon()}
-          <div class="tab-content"><slot></slot></div>
+          <slot @slotchange="${this.handleSlotChange}"></slot>
         </div>
-        ${this.renderIndicator()}
+        ${isPrimary ? this.renderIndicator() : nothing}
       </div>
+      ${!isPrimary ? this.renderIndicator() : nothing}
     `
   }
 
-  protected renderIcon(): TemplateResult {
-    return html`
-      <div class="icon">
-        <slot name="icon" @slotchange="${this.handleIconChange}"></slot>
-      </div>
-    `
+  protected renderFocusRing(): TemplateResult {
+    return html`<md-focus-ring
+      part="focus-ring"
+      class="focus-ring"
+      inward
+      .control="${this as HTMLElement}"
+    ></md-focus-ring>`
   }
 
-  protected renderRipple = (): TemplateResult => {
-    const { disabled } = this
-    return html`<ui-ripple class="ripple" ?disabled="${disabled}"></ui-ripple>`
+  protected renderRipple(): TemplateResult {
+    return html`<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`
+  }
+
+  protected renderIcon(): TemplateResult {
+    return html` <slot name="icon" @slotchange="${this.handleIconSlotChange}"></slot> `
   }
 
   protected renderIndicator(): TemplateResult | typeof nothing {
@@ -169,8 +254,6 @@ export default class UiTab extends UiElement {
       indicator: true,
       primary: priority === 'primary',
     }
-    return html`<div class="${classMap(classes)}">
-      <span role="presentation" class="pointer"></span>
-    </div>`
+    return html`<div class="${classMap(classes)}"></div>`
   }
 }