@api-client/ui 0.5.26 → 0.5.28

package/src/md/list/internals/ListItem.styles.ts

@@ -8,10 +8,12 @@ export default css`
     cursor: default;
     position: relative;
 
-    --md-focus-ring-shape-end-end: 0px;
-    --md-focus-ring-shape-end-start: 0px;
-    --md-focus-ring-shape-start-end: 0px;
-    --md-focus-ring-shape-start-start: 0px;
+    color: var(--md-sys-color-on-surface);
+
+    --md-focus-ring-shape-end-end: 8px;
+    --md-focus-ring-shape-end-start: 8px;
+    --md-focus-ring-shape-start-end: 8px;
+    --md-focus-ring-shape-start-start: 8px;
   }
 
   :host([disabled]) {
@@ -40,6 +42,8 @@ export default css`
     align-items: center;
     overflow: hidden;
     padding: 8px 16px 8px 16px;
+
+    gap: 16px;
   }
 
   .ripple {
@@ -54,8 +58,6 @@ export default css`
   }
 
   .headline {
-    color: var(--md-sys-color-on-surface);
-
     font-family: var(--md-sys-typescale-body-large-font);
     font-weight: var(--md-sys-typescale-body-large-weight);
     font-size: var(--md-sys-typescale-body-large-size);
@@ -92,7 +94,6 @@ export default css`
   slot[name='end-text']::slotted(*) {
     /* this is to make up to the 24px right padding defined in the spec. */
     margin-right: 8px;
-    margin-left: 16px;
   }
 
   :host([lines='three']) .supporting-text {
@@ -124,21 +125,34 @@ export default css`
   }
 
   .start {
+    display: contents;
+  }
+
+  .start.has-start {
     align-self: stretch;
     display: flex;
     justify-content: center;
     align-items: center;
   }
 
+  .end {
+    display: contents;
+  }
+
+  .end.has-end,
+  .end.has-end-text {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
   :host slot[name='end']::slotted(*) {
     color: var(--md-sys-color-on-surface-variant);
     fill: var(--md-sys-color-on-surface-variant);
-    margin-left: 16px;
   }
 
   :host slot[name='start']::slotted(*) {
     display: block;
-    margin-right: 16px;
   }
 
   :host([image='icon']) slot[name='start']::slotted(*) {
@@ -168,28 +182,24 @@ export default css`
     flex-direction: column;
   }
 
-  :host(.highlight) .state {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-    position: absolute;
-    inset: 0;
-    z-index: 1;
+  :host(.highlight) .surface {
+    background-color: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
   }
 
-  :host(.select) .state {
+  :host(.select) .surface {
     background-color: var(--md-sys-color-secondary-container);
     color: var(--md-sys-color-on-secondary-container);
-    opacity: var(--md-sys-state-focus-state-layer-opacity);
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-  }
-
-  :host([static]:hover) .state {
-    background-color: var(--md-sys-color-on-surface);
-    opacity: var(--md-sys-state-hover-state-layer-opacity);
-    position: absolute;
-    inset: 0;
-    z-index: 1;
+  }
+
+  [name='overline'] {
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--md-sys-typescale-label-small-font, var(--md-ref-typeface-plain, Roboto));
+    font-size: var(--md-sys-typescale-label-small-size, 0.6875rem);
+    font-weight: var(
+      --md-sys-typescale-label-small-weight,
+      var(--md-ref-typeface-weight-medium, 500) --md-ref-typeface-weight-medium is not defined
+    );
+    line-height: var(--md-sys-typescale-label-small-line-height, 1rem);
   }
 `

package/src/md/list/internals/ListItem.ts

@@ -1,6 +1,6 @@
 import { html, PropertyValues, TemplateResult } from 'lit'
-import { property, query } from 'lit/decorators.js'
-import { classMap } from 'lit/directives/class-map.js'
+import { property, state, query } from 'lit/decorators.js'
+import { classMap, ClassInfo } from 'lit/directives/class-map.js'
 import { UiElement } from '../../UiElement.js'
 import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
 import UiRipple from '../../ripple/internals/ripple.js'
@@ -25,6 +25,7 @@ export enum ListItemImage {
 
 /**
  * @slot
+ * @slot overline
  * @slot start
  * @slot end
  * @slot end-text
@@ -63,6 +64,10 @@ export default class UiListItem extends UiElement {
 
   @property({ type: Number, reflect: true }) override accessor tabIndex = -1
 
+  @state() accessor hasStartItem = false
+  @state() accessor hasEndItem = false
+  @state() accessor hasEndTextItem = false
+
   constructor() {
     super()
 
@@ -190,7 +195,33 @@ export default class UiListItem extends UiElement {
     this.removeAttribute('tabindex')
   }
 
-  protected handleSlotChange(): void {
+  protected handleStartSlotChange(): void {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="start"]')
+    if (slot) {
+      this.hasStartItem = slot.assignedNodes({ flatten: true }).length > 0
+    } else {
+      this.hasStartItem = false
+    }
+    this.requestUpdate()
+  }
+
+  protected handleEndSlotChange(): void {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="end"]')
+    if (slot) {
+      this.hasEndItem = slot.assignedNodes({ flatten: true }).length > 0
+    } else {
+      this.hasEndItem = false
+    }
+    this.requestUpdate()
+  }
+
+  protected handleEndTextSlotChange(): void {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="end-text"]')
+    if (slot) {
+      this.hasEndTextItem = slot.assignedNodes({ flatten: true }).length > 0
+    } else {
+      this.hasEndTextItem = false
+    }
     this.requestUpdate()
   }
 
@@ -218,16 +249,31 @@ export default class UiListItem extends UiElement {
     ></md-focus-ring>`
   }
 
+  protected getStartClasses(): ClassInfo {
+    return {
+      'start': true,
+      'has-start': this.hasStartItem,
+    }
+  }
+
   protected renderStart(): TemplateResult {
-    return html`<div class="start">
-      <slot name="start" @slotchange=${this.handleSlotChange}></slot>
+    return html`<div class="${classMap(this.getStartClasses())}">
+      <slot name="start" @slotchange=${this.handleStartSlotChange}></slot>
     </div>`
   }
 
+  protected getEndClasses(): ClassInfo {
+    return {
+      'end': true,
+      'has-end': this.hasEndItem,
+      'has-end-text': this.hasEndTextItem,
+    }
+  }
+
   protected renderEnd(): TemplateResult {
-    return html`<div class="end">
-      <slot name="end" @slotchange=${this.handleSlotChange}></slot>
-      <span class="trailing-supporting-text"><slot name="end-text"></slot></span>
+    return html`<div class="${classMap(this.getEndClasses())}">
+      <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
+      <slot name="end-text" class="trailing-supporting-text" @slotchange=${this.handleEndTextSlotChange}></slot>
     </div>`
   }
 
@@ -236,6 +282,7 @@ export default class UiListItem extends UiElement {
     const hasSupportingText = lines !== ListItemLines.one
     return html`
       <div class="body">
+        <slot name="overline"></slot>
         <span class="headline"><slot></slot></span>
         ${hasSupportingText ? html`<span class="supporting-text"><slot name="supporting-text"></slot></span>` : ''}
       </div>

package/src/md/menu/internal/MenuItem.ts

@@ -191,7 +191,7 @@ export default class UiMenuItem extends UiListItem {
     this.dispatchEvent(
       new CustomEvent('submenu-open', {
         detail: { subMenu: this.subMenuElement },
-        bubbles: true,
+        bubbles: false,
         composed: true,
       })
     )
@@ -227,7 +227,7 @@ export default class UiMenuItem extends UiListItem {
     this.dispatchEvent(
       new CustomEvent('select', {
         detail: e.detail,
-        bubbles: true,
+        bubbles: false,
         composed: true,
       })
     )
@@ -249,7 +249,7 @@ export default class UiMenuItem extends UiListItem {
 
   protected override renderEnd(): TemplateResult {
     return html`<div class="end">
-      <slot name="end" @slotchange=${this.handleSlotChange}></slot>
+      <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
       <span class="trailing-supporting-text"><slot name="end-text"></slot></span>
       ${this.hasSubMenu ? html`<ui-icon class="menu-item-arrow">arrow_right</ui-icon>` : ''}
     </div>`
@@ -260,7 +260,7 @@ export default class UiMenuItem extends UiListItem {
 
     return html`<div class="start">
       ${showCheckIcon ? html`<ui-icon class="selection-check">check</ui-icon>` : ''}
-      <slot name="start" @slotchange=${this.handleSlotChange}></slot>
+      <slot name="start" @slotchange=${this.handleEndSlotChange}></slot>
     </div>`
   }
 }

package/src/md/progress/internals/CircularProgress.styles.ts

@@ -0,0 +1,220 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    --ui-circular-progress-arc-duration: 1333ms;
+    --ui-circular-progress-cycle-duration: calc(4 * var(--ui-circular-progress-arc-duration));
+    --ui-circular-progress-linear-rotate-duration: calc(var(--ui-circular-progress-arc-duration) * 360 / 306);
+    --ui-circular-progress-indeterminate-easing: cubic-bezier(0.4, 0, 0.2, 1);
+    --_container-padding: 4px;
+    --_size: var(--ui-circular-progress-size, 48px);
+
+    --_active-indicator-color: var(--ui-circular-progress-active-indicator-color, var(--md-sys-color-primary));
+    --_active-indicator-width: var(--ui-circular-progress-active-indicator-width, 10);
+    --_four-color-active-indicator-four-color: var(
+      --ui-circular-progress-four-color-active-indicator-four-color,
+      var(--md-sys-color-tertiary-container)
+    );
+    --_four-color-active-indicator-one-color: var(
+      --ui-circular-progress-four-color-active-indicator-one-color,
+      var(--md-sys-color-primary)
+    );
+    --_four-color-active-indicator-three-color: var(
+      --ui-circular-progress-four-color-active-indicator-three-color,
+      var(--md-sys-color-tertiary)
+    );
+    --_four-color-active-indicator-two-color: var(
+      --ui-circular-progress-four-color-active-indicator-two-color,
+      var(--md-sys-color-primary-container)
+    );
+
+    display: inline-flex;
+    vertical-align: middle;
+    width: var(--_size);
+    height: var(--_size);
+    position: relative;
+    align-items: center;
+    justify-content: center;
+
+    contain: strict;
+    content-visibility: auto;
+  }
+
+  .progress,
+  .spinner,
+  .left,
+  .right,
+  .circle,
+  svg,
+  .track,
+  .active-track {
+    position: absolute;
+    inset: 0;
+  }
+
+  svg {
+    transform: rotate(-90deg);
+  }
+
+  circle {
+    cx: 50%;
+    cy: 50%;
+    r: calc(50% * (1 - var(--_active-indicator-width) / 100));
+    stroke-width: calc(var(--_active-indicator-width) * 1%);
+    stroke-dasharray: 100;
+    fill: transparent;
+  }
+
+  .active-track {
+    transition: stroke-dashoffset 500ms cubic-bezier(0, 0, 0.2, 1);
+    stroke: var(--_active-indicator-color);
+  }
+
+  .track {
+    stroke: transparent;
+  }
+
+  :host([indeterminate]) {
+    animation: linear infinite linear-rotate;
+    animation-duration: var(--ui-circular-progress-linear-rotate-duration);
+  }
+
+  .spinner {
+    animation: infinite both rotate-arc;
+    animation-duration: var(--ui-circular-progress-cycle-duration);
+    animation-timing-function: var(--ui-circular-progress-indeterminate-easing);
+  }
+
+  .left {
+    overflow: hidden;
+    inset: 0 50% 0 0;
+  }
+
+  .right {
+    overflow: hidden;
+    inset: 0 0 0 50%;
+  }
+
+  .circle {
+    box-sizing: border-box;
+    border-radius: 50%;
+    --_padding-box-width: calc(var(--_size) - 2 * var(--_container-padding));
+    --_active-indicator-fraction: calc(var(--_active-indicator-width) / 100);
+    border: solid calc(var(--_active-indicator-fraction) * var(--_padding-box-width));
+    border-color: var(--_active-indicator-color) var(--_active-indicator-color) transparent transparent;
+    animation: expand-arc;
+    animation-iteration-count: infinite;
+    animation-fill-mode: both;
+    animation-duration: var(--ui-circular-progress-arc-duration), var(--ui-circular-progress-cycle-duration);
+    animation-timing-function: var(--ui-circular-progress-indeterminate-easing);
+  }
+
+  .left .circle {
+    rotate: 135deg;
+    inset: 0 -100% 0 0;
+  }
+
+  .right .circle {
+    rotate: 100deg;
+    inset: 0 0 0 -100%;
+    animation-delay: calc(-0.5 * var(--ui-circular-progress-arc-duration)), 0ms;
+  }
+
+  :host([fourcolor]) .circle {
+    animation-name: expand-arc, four-color;
+  }
+
+  @keyframes expand-arc {
+    0% {
+      transform: rotate(265deg);
+    }
+    50% {
+      transform: rotate(130deg);
+    }
+    100% {
+      transform: rotate(265deg);
+    }
+  }
+
+  @keyframes rotate-arc {
+    12.5% {
+      transform: rotate(135deg);
+    }
+    25% {
+      transform: rotate(270deg);
+    }
+    37.5% {
+      transform: rotate(405deg);
+    }
+    50% {
+      transform: rotate(540deg);
+    }
+    62.5% {
+      transform: rotate(675deg);
+    }
+    75% {
+      transform: rotate(810deg);
+    }
+    87.5% {
+      transform: rotate(945deg);
+    }
+    100% {
+      transform: rotate(1080deg);
+    }
+  }
+
+  @keyframes linear-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes four-color {
+    0% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+    15% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+    25% {
+      border-top-color: var(--_four-color-active-indicator-two-color);
+      border-right-color: var(--_four-color-active-indicator-two-color);
+    }
+    40% {
+      border-top-color: var(--_four-color-active-indicator-two-color);
+      border-right-color: var(--_four-color-active-indicator-two-color);
+    }
+    50% {
+      border-top-color: var(--_four-color-active-indicator-three-color);
+      border-right-color: var(--_four-color-active-indicator-three-color);
+    }
+    65% {
+      border-top-color: var(--_four-color-active-indicator-three-color);
+      border-right-color: var(--_four-color-active-indicator-three-color);
+    }
+    75% {
+      border-top-color: var(--_four-color-active-indicator-four-color);
+      border-right-color: var(--_four-color-active-indicator-four-color);
+    }
+    90% {
+      border-top-color: var(--_four-color-active-indicator-four-color);
+      border-right-color: var(--_four-color-active-indicator-four-color);
+    }
+    100% {
+      border-top-color: var(--_four-color-active-indicator-one-color);
+      border-right-color: var(--_four-color-active-indicator-one-color);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .active-track {
+      stroke: CanvasText;
+    }
+
+    .circle {
+      border-color: CanvasText CanvasText Canvas Canvas;
+    }
+  }
+`

package/src/md/progress/internals/CircularProgress.ts

@@ -0,0 +1,129 @@
+import { property } from 'lit/decorators.js'
+import { isDisabled, setDisabled } from '../../../lib/disabled.js'
+import { UiRange } from './Range.js'
+import { type TemplateResult, html } from 'lit'
+
+/**
+ * A circular progress indicator component that displays progress in a circular format.
+ *
+ * This component supports both determinate and indeterminate progress states:
+ * - **Determinate**: Shows a specific progress value with a filled arc
+ * - **Indeterminate**: Shows continuous animation without a specific value
+ *
+ * The component inherits from UiRange and provides additional features like:
+ * - Four-color animation for indeterminate state
+ * - Material Design 3 styling
+ * - Accessibility support with proper ARIA attributes
+ * - Customizable size and colors via CSS custom properties
+ *
+ * ## Accessibility
+ *
+ * For accessibility compliance, you must provide an accessible name for the progress indicator.
+ * Use the `aria-label` attribute to describe what the progress represents:
+ *
+ * @example
+ * ```html
+ * <!-- Basic determinate progress -->
+ * <ui-circular-progress value="50" max="100" aria-label="Upload progress"></ui-circular-progress>
+ *
+ * <!-- Indeterminate progress -->
+ * <ui-circular-progress indeterminate aria-label="Loading content"></ui-circular-progress>
+ *
+ * <!-- Four-color indeterminate progress -->
+ * <ui-circular-progress indeterminate fourcolor aria-label="Processing data"></ui-circular-progress>
+ * ```
+ *
+ * @fires ratiochange - Inherited from UiRange. Dispatched when the ratio computation changes.
+ */
+export default class CircularProgress extends UiRange {
+  /**
+   * Gets the disabled state of the progress indicator.
+   * @returns True if the component is disabled, false otherwise.
+   */
+  get disabled(): boolean {
+    return isDisabled(this)
+  }
+
+  /**
+   * Sets the disabled state of the progress indicator.
+   * When disabled, the component may have reduced visual emphasis
+   * and should not respond to user interactions.
+   * @attribute
+   */
+  @property({ reflect: true, type: Boolean })
+  set disabled(value: boolean) {
+    const old = isDisabled(this)
+    setDisabled(this, value)
+    this.requestUpdate('disabled', old)
+  }
+
+  /**
+   * Enables four-color animation for indeterminate progress indicators.
+   *
+   * When enabled, the indeterminate progress indicator cycles between four colors:
+   * - Primary color (--ui-circular-progress-four-color-active-indicator-one-color)
+   * - Primary container (--ui-circular-progress-four-color-active-indicator-two-color)
+   * - Tertiary color (--ui-circular-progress-four-color-active-indicator-three-color)
+   * - Tertiary container (--ui-circular-progress-four-color-active-indicator-four-color)
+   *
+   * This property only affects the appearance when `indeterminate` is true.
+   *
+   * @default false
+   * @attribute fourcolor
+   */
+  @property({ type: Boolean, reflect: true }) accessor fourColor = false
+
+  /**
+   * Renders the circular progress indicator.
+   *
+   * Chooses between determinate and indeterminate rendering based on the
+   * `indeterminate` property inherited from UiRange.
+   *
+   * @returns The template result for the progress indicator.
+   */
+  protected override render(): TemplateResult {
+    if (this.indeterminate) {
+      return this.renderIndeterminateContainer()
+    }
+    return this.renderDeterminateContainer()
+  }
+
+  /**
+   * Renders the determinate progress indicator using SVG.
+   *
+   * Creates a circular progress bar that shows a specific progress value
+   * using stroke-dashoffset to control the visible portion of the circle.
+   * The progress is calculated based on the current value, min, and max properties.
+   *
+   * @returns SVG template with track and active track circles.
+   */
+  private renderDeterminateContainer() {
+    const dashOffset = (1 - this.value / this.max) * 100
+    return html`
+      <svg viewBox="0 0 4800 4800">
+        <circle class="track" pathLength="100"></circle>
+        <circle class="active-track" pathLength="100" stroke-dashoffset=${dashOffset}></circle>
+      </svg>
+    `
+  }
+
+  /**
+   * Renders the indeterminate progress indicator using CSS animations.
+   *
+   * Creates a spinning animation with two half-circles that expand and contract
+   * to create a continuous loading animation. The animation can cycle through
+   * multiple colors when the `fourColor` property is enabled.
+   *
+   * @returns HTML template with animated spinner elements.
+   */
+  private renderIndeterminateContainer() {
+    return html` <div class="spinner">
+      <div class="left">
+        <div class="circle"></div>
+      </div>
+      <div class="right">
+        <div class="circle"></div>
+      </div>
+    </div>`
+  }
+}

package/src/md/progress/internals/Range.ts

@@ -44,10 +44,38 @@ export abstract class UiRange extends UiElement {
    */
   @property({ type: Number, converter: floatConverter }) accessor step = 1
 
+  /**
+   * Use an indeterminate progress indicator.
+   * @attribute
+   */
+  @property({ reflect: true, type: Boolean }) accessor indeterminate: boolean | undefined
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'progressbar')
+    }
+  }
+
   protected override willUpdate(cp: PropertyValues<this>): void {
-    if (cp.has('value') || cp.has('min') || cp.has('max') || cp.has('step')) {
+    if (cp.has('value') || cp.has('min') || cp.has('max') || cp.has('step') || cp.has('indeterminate')) {
       this.rangeChanged()
     }
+
+    if (cp.has('min')) {
+      this.setAttribute('aria-valuemin', String(this.min))
+    }
+    if (cp.has('max')) {
+      this.setAttribute('aria-valuemax', String(this.max))
+    }
+    if (cp.has('indeterminate') || cp.has('value')) {
+      if (this.indeterminate) {
+        this.removeAttribute('aria-valuenow')
+      } else {
+        this.setAttribute('aria-valuenow', String(this.value))
+      }
+    }
+    super.willUpdate(cp)
   }
 
   protected rangeChanged(): void {