@api-client/ui 0.3.1 → 0.3.3

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/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>`
   }
 }

package/src/md/tabs/internals/Tabs.styles.ts

@@ -3,30 +3,31 @@ import { css } from 'lit'
 export default css`
   :host {
     display: block;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    position: relative;
   }
 
-  .content {
+  .tabs {
     display: flex;
     align-items: center;
-    overflow: hidden;
+    overflow: auto;
+    scroll-behavior: smooth;
+    scrollbar-width: none;
     flex: 1 1 0%;
+    align-self: stretch;
   }
 
-  .content ::slotted(*) {
+  .tabs ::slotted(*) {
     flex: 1;
     white-space: nowrap;
   }
 
-  .surface {
-    position: relative;
-    display: flex;
-    align-items: center;
-    /* background-color: var(--md-sys-color-surface); */
-  }
-
   .indicator {
     position: absolute;
-    bottom: 0px;
+    bottom: 1px;
     left: 0px;
     right: 0px;
     overflow: hidden;
@@ -59,12 +60,7 @@ export default css`
   }
 
   .divider {
-    position: absolute;
-    bottom: 0px;
-    left: 0px;
-    right: 0px;
+    align-self: stretch;
     margin: 0;
-    height: 1px;
-    background-color: var(--md-sys-color-surface-variant);
   }
 `