@api-client/ui 0.5.47 → 0.5.48

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.47",
+  "version": "0.5.48",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -188,7 +188,6 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.0",
     "@github/relative-time-element": "^4.4.6",
-    "@material/web": "^2.3.0",
     "@pawel-up/jexl": "^4.3.0",
     "@types/har-format": "^1.2.8",
     "dompurify": "^3.2.5",

package/src/elements/data-table/DataTable.ts

@@ -7,7 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { dataAttr } from '../../directives/data-attr.js'
 import { LiveData } from '../../reactive/LiveData.js'
 
-import '@material/web/focus/md-focus-ring.js'
+import '../../md/focus-ring/ui-focus-ring.js'
 import '../../md/icons/ui-icon.js'
 
 /**
@@ -929,7 +929,7 @@ export abstract class DataTable<T extends object> extends LitElement {
       index = isFocused ? 0 : -1
     }
     const ring = !delegateFocus
-      ? html`<md-focus-ring .inward="${this.overflow ? true : false}"></md-focus-ring>`
+      ? html`<ui-focus-ring .inward="${this.overflow ? true : false}"></ui-focus-ring>`
       : nothing
     if (isPrimary) {
       // Lit does not allow dynamic element names so I decided to make a copy.
@@ -1020,7 +1020,7 @@ export abstract class DataTable<T extends object> extends LitElement {
       aria-label="${ifDefined(ariaLabel)}"
       part="header-cell"
     >
-      <md-focus-ring .inward="${this.overflow ? true : false}"></md-focus-ring>
+      <ui-focus-ring .inward="${this.overflow ? true : false}"></ui-focus-ring>
       <div class="cell-content">
         ${content}
         ${isSortable && sortIcon ? html`<ui-icon class="sort-icon" role="presentation">${sortIcon}</ui-icon>` : nothing}

package/src/elements/file-system/internals/Breadcrumbs.ts

@@ -4,7 +4,7 @@ import { LiveData } from '../../../reactive/LiveData.js'
 import { type FileBreadcrumb } from '@api-client/core/models/store/File.js'
 import { FolderKind } from '@api-client/core/models/kinds.js'
 
-import '@material/web/focus/md-focus-ring.js'
+import '../../../md/focus-ring/ui-focus-ring.js'
 import '../../../md/icons/ui-icon.js'
 
 /**
@@ -123,7 +123,7 @@ export default class Breadcrumbs extends LitElement {
         class="link-button"
         @click="${this.handleLinkClick}"
       >
-        <md-focus-ring part="focus-ring"></md-focus-ring>
+        <ui-focus-ring part="focus-ring"></ui-focus-ring>
         ${name}
       </div>
     `
@@ -133,7 +133,7 @@ export default class Breadcrumbs extends LitElement {
     const { key, kind, name } = item
     return html`
       <div tabindex="0" role="button" data-key="${key}" data-kind="${kind}" class="action-button" aria-current="page">
-        <md-focus-ring part="focus-ring"></md-focus-ring>
+        <ui-focus-ring part="focus-ring"></ui-focus-ring>
         ${name}
       </div>
     `

package/src/elements/navigation/internals/NavigationItem.ts

@@ -4,6 +4,8 @@ import { classMap } from 'lit/directives/class-map.js'
 import { when } from 'lit/directives/when.js'
 import { UiElement } from '../../../md/UiElement.js'
 import { isDisabled, setDisabled } from '../../../lib/disabled.js'
+import '../../../md/focus-ring/ui-focus-ring.js'
+import '../../../md/ripple/ui-ripple.js'
 
 /**
  * NavigationItem
@@ -120,8 +122,8 @@ export default class NavigationItem extends UiElement {
     })
     return html`
       <button class="${containerClasses}" id="button" ?disabled="${this.disabled}" aria-disabled="${this.disabled}">
-        <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
-        <md-ripple></md-ripple>
+        <ui-focus-ring part="focus-ring" for="button"></ui-focus-ring>
+        <ui-ripple></ui-ripple>
         ${this.renderIcon()}${when(
           this.iconOnly,
           () => nothing,

package/src/elements/user/internals/UserAvatar.styles.ts

@@ -44,10 +44,10 @@ export default css`
     z-index: 0;
     flex: 1;
     border-radius: var(--_state-layer-shape);
-    --md-ripple-hover-color: var(--_hover-state-layer-color);
-    --md-ripple-hover-opacity: var(--_hover-state-layer-opacity);
-    --md-ripple-pressed-color: var(--_pressed-state-layer-color);
-    --md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);
+
+    --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-on-surface);
   }
 
   .icon-button:hover {
@@ -69,8 +69,9 @@ export default css`
     --md-focus-ring-shape-end-start: var(--_state-layer-shape);
   }
 
-  md-ripple {
+  .ripple {
     border-radius: var(--_state-layer-shape);
+    z-index: 1;
   }
 
   .icon {
@@ -79,12 +80,6 @@ export default css`
     overflow: hidden;
   }
 
-  .touch {
-    position: absolute;
-    height: max(48px, 100%);
-    width: max(48px, 100%);
-  }
-
   .user-icon,
   .avatar-initials {
     background-color: var(--md-sys-color-primary-container, #9eeffe);

package/src/elements/user/internals/UserAvatar.ts

@@ -1,19 +1,31 @@
-import { html, TemplateResult, LitElement, PropertyValues, SVGTemplateResult, svg } from 'lit'
-import { property, state } from 'lit/decorators.js'
+import { html, TemplateResult, PropertyValues, SVGTemplateResult, svg } from 'lit'
+import { property, query, state } from 'lit/decorators.js'
+import { UiElement } from '../../../md/UiElement.js'
+import { setDisabled } from '../../../lib/disabled.js'
 import type { IUser } from '@api-client/core/models/store/User.js'
-import '@material/web/focus/md-focus-ring.js'
-import '@material/web/ripple/ripple.js'
+import type UiRipple from '../../../md/ripple/internals/ripple.js'
+import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
+import '../../../md/focus-ring/ui-focus-ring.js'
+import '../../../md/ripple/ui-ripple.js'
 
 export type AvatarType = 'button' | 'icon'
 
-export default class UserAvatar extends LitElement {
+export default class UserAvatar extends UiElement {
+  @query('ui-ripple') accessor ripple: UiRipple | null = null
+  /**
+   * Whether the avatar is disabled.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor disabled = false
   /**
    * Set with the user. The computed user initials.
+   * @attribute
    */
   @state() protected accessor userInitials: string | undefined
 
   /**
    * The URL to the user picture.
+   * @attribute
    */
   @state() protected accessor userPicture: string | undefined
 
@@ -27,13 +39,102 @@ export default class UserAvatar extends LitElement {
    */
   @property({ type: String }) accessor type: AvatarType = 'button'
 
+  constructor() {
+    super()
+
+    this.addEventListener('keydown', this.handleKeyDown.bind(this))
+    this.addEventListener('keyup', this.handleKeyUp.bind(this))
+    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
+    this.addEventListener('pointerleave', this.handlePointerLeave.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('contextmenu', this.handleContextMenu.bind(this))
+  }
+
   protected override willUpdate(cp: PropertyValues<this>): void {
     if (cp.has('user')) {
       this.handleUserChange(this.user)
     }
+    if (cp.has('disabled')) {
+      setDisabled(this, cp.get('disabled'))
+    }
     super.willUpdate(cp)
   }
 
+  override beginPress(options: BeginPressConfig): void {
+    if (!this.shouldHandleInteraction()) {
+      return
+    }
+    super.beginPress(options)
+    this.ripple?.beginPress(options.positionEvent)
+  }
+
+  override endPress(options: EndPressConfig): void {
+    if (!this.shouldHandleInteraction()) {
+      return
+    }
+    super.endPress(options)
+    this.ripple?.endPress()
+  }
+
+  override handleKeyDown(e: KeyboardEvent): void {
+    if (!this.shouldHandleInteraction()) {
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
+    if (e.code === 'Tab' || e.shiftKey) return
+    // do not prevent default, so that parent elements can handle the key event
+    this.beginPress({ positionEvent: e })
+  }
+
+  override handleKeyUp(e: KeyboardEvent): void {
+    if (!this.shouldHandleInteraction()) {
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
+
+    // do not prevent default, so that parent elements can handle the key event
+    this.endPress({ cancelled: false, actionData: { item: this } })
+  }
+
+  override handlePointerEnter(e: PointerEvent): void {
+    if (!this.shouldHandleInteraction()) {
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
+    this.ripple?.beginHover(e)
+  }
+
+  override handlePointerLeave(e: PointerEvent): void {
+    if (!this.shouldHandleInteraction()) {
+      e.stopPropagation()
+      e.preventDefault()
+      return
+    }
+    super.handlePointerLeave(e)
+
+    this.ripple?.endHover()
+  }
+
+  override handleClick(e: MouseEvent): void {
+    super.handleClick(e)
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+    this.endPress({ cancelled: false, actionData: { event: e } })
+  }
+
+  protected shouldHandleInteraction(): boolean {
+    return !this.disabled && this.type === 'button'
+  }
+
   /**
    * Handles changes to the user property.
    * @param user The user object
@@ -88,10 +189,8 @@ export default class UserAvatar extends LitElement {
   protected renderButton(content: TemplateResult): TemplateResult {
     return html`
       <button id="button" class="icon-button">
-        <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
-        <md-ripple></md-ripple>
+        ${this.renderFocusRing()} ${this.renderRipple()}
         <span role="presentation" class="icon">${content}</span>
-        <span class="touch"></span>
       </button>
     `
   }
@@ -140,4 +239,12 @@ export default class UserAvatar extends LitElement {
     </svg>
     `
   }
+
+  protected renderRipple(): TemplateResult {
+    return html`<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`
+  }
+
+  protected renderFocusRing(): TemplateResult {
+    return html`<ui-focus-ring part="focus-ring" for="button"></ui-focus-ring>`
+  }
 }

package/src/md/button/internals/base.ts

@@ -8,7 +8,7 @@ import type UiRipple from '../../ripple/internals/ripple.js'
 import { findElementInShadowRoots } from '../../../lib/Dom.js'
 
 import '../../ripple/ui-ripple.js'
-import '@material/web/focus/md-focus-ring.js'
+import '../../focus-ring/ui-focus-ring.js'
 
 export type ButtonType = 'submit' | 'reset' | 'button'
 export type MdButtonShape = 'round' | 'square'
@@ -370,7 +370,7 @@ export default class BaseButton extends UiElement {
   }
 
   protected renderFocusRing(): TemplateResult {
-    return html`<md-focus-ring part="focus-ring" class="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>`
+    return html`<ui-focus-ring part="focus-ring" class="focus-ring" .control="${this as HTMLElement}"></ui-focus-ring>`
   }
 
   protected renderRipple(): TemplateResult {

package/src/md/checkbox/internals/CheckboxElement.ts

@@ -7,7 +7,7 @@ import type UiRipple from '../../ripple/internals/ripple.js'
 import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
 
 import '../../ripple/ui-ripple.js'
-import '@material/web/focus/md-focus-ring.js'
+import '../../focus-ring/ui-focus-ring.js'
 
 export default class CheckboxElement extends CheckedElement {
   protected get _icon(): SVGTemplateResult | typeof nothing {
@@ -79,7 +79,7 @@ export default class CheckboxElement extends CheckedElement {
       pressed,
     })
     return html`
-      <md-focus-ring part="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>
+      <ui-focus-ring part="focus-ring" .control="${this as HTMLElement}"></ui-focus-ring>
       <div class="${containerClasses}">
         <div class="container"></div>
         <div class="state"></div>

package/src/md/focus-ring/internals/focus-ring.styles.ts

@@ -0,0 +1,109 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    animation-delay: 0s, calc(var(--md-focus-ring-duration, 600ms) * 0.25);
+    animation-duration:
+      calc(var(--md-focus-ring-duration, 600ms) * 0.25), calc(var(--md-focus-ring-duration, 600ms) * 0.75);
+    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
+    box-sizing: border-box;
+    color: var(--md-focus-ring-color, var(--md-sys-color-secondary, #625b71));
+    display: none;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  :host([visible]) {
+    display: flex;
+  }
+
+  :host(:not([inward])) {
+    animation-name: outward-grow, outward-shrink;
+    border-end-end-radius: calc(
+      var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +
+        var(--md-focus-ring-outward-offset, 2px)
+    );
+    border-end-start-radius: calc(
+      var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +
+        var(--md-focus-ring-outward-offset, 2px)
+    );
+    border-start-end-radius: calc(
+      var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +
+        var(--md-focus-ring-outward-offset, 2px)
+    );
+    border-start-start-radius: calc(
+      var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) +
+        var(--md-focus-ring-outward-offset, 2px)
+    );
+    inset: calc(-1 * var(--md-focus-ring-outward-offset, 2px));
+    outline: var(--md-focus-ring-width, 3px) solid currentColor;
+  }
+
+  :host([inward]) {
+    animation-name: inward-grow, inward-shrink;
+    border-end-end-radius: calc(
+      var(--md-focus-ring-shape-end-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(
+          --md-focus-ring-inward-offset,
+          0px
+        )
+    );
+    border-end-start-radius: calc(
+      var(--md-focus-ring-shape-end-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(
+          --md-focus-ring-inward-offset,
+          0px
+        )
+    );
+    border-start-end-radius: calc(
+      var(--md-focus-ring-shape-start-end, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(
+          --md-focus-ring-inward-offset,
+          0px
+        )
+    );
+    border-start-start-radius: calc(
+      var(--md-focus-ring-shape-start-start, var(--md-focus-ring-shape, var(--md-sys-shape-corner-full, 9999px))) - var(
+          --md-focus-ring-inward-offset,
+          0px
+        )
+    );
+    border: var(--md-focus-ring-width, 3px) solid currentColor;
+    inset: var(--md-focus-ring-inward-offset, 0px);
+  }
+
+  @keyframes outward-grow {
+    from {
+      outline-width: 0;
+    }
+
+    to {
+      outline-width: var(--md-focus-ring-active-width, 8px);
+    }
+  }
+
+  @keyframes outward-shrink {
+    from {
+      outline-width: var(--md-focus-ring-active-width, 8px);
+    }
+  }
+
+  @keyframes inward-grow {
+    from {
+      border-width: 0;
+    }
+
+    to {
+      border-width: var(--md-focus-ring-active-width, 8px);
+    }
+  }
+
+  @keyframes inward-shrink {
+    from {
+      border-width: var(--md-focus-ring-active-width, 8px);
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    :host {
+      animation: none;
+    }
+  }
+`

package/src/md/focus-ring/internals/focus-ring.ts

@@ -0,0 +1,184 @@
+import { LitElement, type PropertyValues } from 'lit'
+import { property } from 'lit/decorators.js'
+
+/**
+ * A focus ring component that provides a visible focus indicator.
+ * This component automatically manages the visibility of the focus ring
+ * based on the focus state of its control element.
+ *
+ * @fires visibility-changed - Dispatched when the focus ring visibility changes.
+ *                           - `detail`: An object with a `visible` property (boolean).
+ */
+export default class UiFocusRing extends LitElement {
+  /**
+   * The control element that this focus ring is associated with.
+   * When the control gains or loses focus, the focus ring will show or hide.
+   */
+  @property({ type: Object }) accessor control: HTMLElement | undefined
+
+  /**
+   * An element to attach the focus ring to. Defaults to the parent element.
+   * This is typically used when the focus ring should be positioned relative
+   * to a different element than the control.
+   */
+  @property({ type: Object }) accessor attach: HTMLElement | undefined
+
+  /**
+   * An ID of an element that this focus ring is for.
+   * Alternative to setting the `control` property directly.
+   * @attribute
+   */
+  @property({ type: String }) accessor for: string | undefined
+
+  /**
+   * Whether the focus ring should render inward instead of outward.
+   * When true, the focus ring will be positioned inside the control bounds.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor inward = false
+
+  /**
+   * The internal visibility state of the focus ring.
+   */
+  @property({ type: Boolean, reflect: true }) accessor visible = false
+
+  private abortController?: AbortController
+
+  constructor() {
+    super()
+    this.addEventListener('visibility-changed', this.onVisibilityChanged as EventListener)
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.setupControl()
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.cleanupListeners()
+  }
+
+  protected override willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has('for') || changedProperties.has('control')) {
+      this.setupControl()
+    }
+  }
+
+  /**
+   * Sets up the control element and event listeners.
+   */
+  private setupControl(): void {
+    this.cleanupListeners()
+
+    const control = this.getControl()
+    if (!control) return
+
+    this.abortController = new AbortController()
+    const { signal } = this.abortController
+
+    // Listen for focus and blur events
+    control.addEventListener('focus', this.handleFocus, { signal })
+    control.addEventListener('blur', this.handleBlur, { signal })
+    control.addEventListener('pointerdown', this.handlePointerDown, { signal })
+
+    // Set initial state
+    this.visible = control.matches(':focus-visible')
+  }
+
+  /**
+   * Cleans up event listeners.
+   */
+  private cleanupListeners(): void {
+    this.abortController?.abort()
+    this.abortController = undefined
+  }
+
+  /**
+   * Gets the control element from either the `control` property,
+   * the `for` attribute, or defaults to the parent element.
+   */
+  private getControl(): HTMLElement | null {
+    if (this.control) {
+      return this.control
+    }
+
+    if (this.for) {
+      const root = this.getRootNode() as Document | ShadowRoot
+      return root.getElementById(this.for)
+    }
+
+    return this.parentElement
+  }
+
+  /**
+   * Handles focus events from the control element.
+   */
+  private handleFocus = (event: FocusEvent): void => {
+    // Only show focus ring for keyboard navigation
+    if (this.shouldShowFocusRing(event)) {
+      this.show()
+    }
+  }
+
+  /**
+   * Handles blur events from the control element.
+   */
+  private handleBlur = (): void => {
+    this.hide()
+  }
+
+  /**
+   * Handles pointer down events to hide focus ring during mouse interaction.
+   */
+  private handlePointerDown = (): void => {
+    this.hide()
+  }
+
+  /**
+   * Determines if the focus ring should be shown based on the focus event.
+   * The focus ring should only show for keyboard navigation, not mouse clicks.
+   */
+  private shouldShowFocusRing(event: FocusEvent): boolean {
+    const control = event.target as HTMLElement
+    return control?.matches(':focus-visible') ?? false
+  }
+
+  /**
+   * Shows the focus ring.
+   */
+  show(): void {
+    if (this.visible) return
+    this.visible = true
+  }
+
+  /**
+   * Hides the focus ring.
+   */
+  hide(): void {
+    if (!this.visible) return
+    this.visible = false
+  }
+
+  /**
+   * Handles the visibility changed event.
+   */
+  private onVisibilityChanged = (event: Event): void => {
+    // Stop propagation to prevent multiple focus rings from interfering
+    event.stopPropagation()
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>): void {
+    super.updated(changedProperties)
+
+    if (changedProperties.has('visible')) {
+      this.dispatchEvent(
+        new CustomEvent('visibility-changed', {
+          detail: { visible: this.visible },
+          bubbles: false,
+          composed: true,
+        })
+      )
+    }
+  }
+}

package/src/md/focus-ring/ui-focus-ring.ts

@@ -0,0 +1,46 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/focus-ring.js'
+import styles from './internals/focus-ring.styles.js'
+
+/**
+ * A focus ring component that provides a visible focus indicator.
+ *
+ * This component replaces the Material Design `md-focus-ring` component
+ * and provides the same functionality with customizable styling.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <ui-focus-ring></ui-focus-ring>
+ *
+ * <!-- With specific control -->
+ * <ui-focus-ring .control="${buttonElement}"></ui-focus-ring>
+ *
+ * <!-- Using for attribute -->
+ * <ui-focus-ring for="my-button"></ui-focus-ring>
+ *
+ * <!-- Inward focus ring -->
+ * <ui-focus-ring inward></ui-focus-ring>
+ * ```
+ *
+ * @cssprop --ui-focus-ring-color - The color of the focus ring border.
+ * @cssprop --ui-focus-ring-width - The width of the focus ring border.
+ * @cssprop --ui-focus-ring-style - The style of the focus ring border (solid, dashed, etc.).
+ * @cssprop --ui-focus-ring-shape-start-start - The start-start corner radius.
+ * @cssprop --ui-focus-ring-shape-start-end - The start-end corner radius.
+ * @cssprop --ui-focus-ring-shape-end-end - The end-end corner radius.
+ * @cssprop --ui-focus-ring-shape-end-start - The end-start corner radius.
+ *
+ * @csspart focus-ring - The focus ring element.
+ */
+@customElement('ui-focus-ring')
+export class UiFocusRingElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-focus-ring': Element
+  }
+}