@api-client/ui 0.2.12 → 0.3.0

package/src/elements/project/ProjectRunReport.ts

@@ -13,7 +13,7 @@ import type { IResponse } from '@api-client/core/models/Response.js'
 import '@github/relative-time-element'
 import '../../define/http/http-request-log.js'
 import '../../md/icons/ui-icon.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
 import '../../md/list/ui-list.js'
 import '../../md/list/ui-list-item.js'
@@ -228,10 +228,10 @@ export default class ProjectRunReport extends LitElement {
         closeOnOutsideClick
         @select="${this.handleIterationSelection}"
       >
-        <ui-filled-tonal-button>
+        <ui-button color="tonal">
           <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
           Iteration #${index}
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu" aria-label="Iterations list">
           ${iterations.map((current) => this.renderIterationOption(current.index))}
         </ui-list>
@@ -269,10 +269,10 @@ export default class ProjectRunReport extends LitElement {
         closeOnOutsideClick
         @select="${this.handleRequestSelection}"
       >
-        <ui-filled-tonal-button title="${title}">
+        <ui-button color="tonal" title="${title}">
           <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
           <span class="request-title-dropdown">${title}</span>
-        </ui-filled-tonal-button>
+        </ui-button>
         <ui-list slot="dropdown" role="menu" aria-label="History list"> ${options} </ui-list>
       </ui-dropdown-list>
     `
@@ -280,10 +280,10 @@ export default class ProjectRunReport extends LitElement {
 
   protected renderEmptyRequestsList(): TemplateResult {
     return html`
-      <ui-filled-tonal-button disabled>
+      <ui-button color="tonal" disabled>
         <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
         No requests
-      </ui-filled-tonal-button>
+      </ui-button>
     `
   }
 

package/src/elements/project/ProjectRunner.ts

@@ -17,8 +17,7 @@ import '@github/relative-time-element'
 import '../../define/http-project/project-run-report.js'
 import '../../md/checkbox/ui-checkbox.js'
 import '../../md/text-field/ui-filled-text-field.js'
-import '../../md/button/ui-filled-button.js'
-import '../../md/button/ui-filled-tonal-button.js'
+import '../../md/button/ui-button.js'
 import '../../md/progress/ui-progress.js'
 import '../../md/icons/ui-icon.js'
 import '../../md/dropdown-list/ui-dropdown-list.js'
@@ -447,7 +446,7 @@ export default class ProjectRunner extends ApiElement {
   protected renderSubmit(): TemplateResult {
     return html`
       <div class="submit-row">
-        <ui-filled-button @click="${this.handleRun}" ?disabled="${this.running}">Run</ui-filled-button>
+        <ui-button color="filled" @click="${this.handleRun}" ?disabled="${this.running}">Run</ui-button>
       </div>
     `
   }
@@ -493,12 +492,12 @@ export default class ProjectRunner extends ApiElement {
           closeOnOutsideClick
           @select="${this.handleHistorySelection}"
         >
-          <ui-filled-tonal-button ?disabled="${disabled}">
+          <ui-button color="tonal" ?disabled="${disabled}">
             <ui-icon slot="icon" icon="arrowDropDown"></ui-icon>
             ${selected
               ? html`<relative-time datetime="${new Date(selected.ended).toISOString()}"></relative-time>`
               : 'History'}
-          </ui-filled-tonal-button>
+          </ui-button>
           <ui-list slot="dropdown" role="menu" aria-label="History list">
             ${history.map((current) => this.renderHistoryOption(current))}
           </ui-list>

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

@@ -0,0 +1,299 @@
+import { html, nothing, type PropertyValues, type TemplateResult } from 'lit'
+import { property, query } from 'lit/decorators.js'
+import { UiElement } from '../../UiElement.js'
+import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
+import { isDisabled, setDisabled } from '../../../lib/disabled.js'
+import type UiRipple from '../../ripple/internals/ripple.js'
+
+import '../../ripple/ui-ripple.js'
+import '@material/web/focus/md-focus-ring.js'
+
+export type ButtonType = 'submit' | 'reset' | 'button'
+export type MdButtonShape = 'round' | 'square'
+export type MdButtonSize = 'xs' | 's' | 'm' | 'l' | 'xl'
+
+/**
+ * A material design button with M3 Expressive features - CSS-native implementation.
+ *
+ * @slot icon - A slot for the icon element
+ * @slot - The default slot for the label
+ * @attribute {string} form - The form associated with this element when the element is outside the form.
+ * @fires {ToggleEvent} toggle - Fired when the `toggle` property is true and the button is clicked,
+ *                               changing its selection state.
+ *                               The event's `newState` and `oldState` properties (string values: 'selected' or
+ *                               'unselected') detail this selection change.
+ */
+export default class BaseButton extends UiElement {
+  static readonly formAssociated = true
+
+  #internals = this.attachInternals()
+
+  /**
+   * The form associated with this element
+   * @attribute
+   */
+  get form(): HTMLFormElement | null | string {
+    return this.#internals.form
+  }
+
+  get validity() {
+    return this.#internals.validity
+  }
+
+  get validationMessage() {
+    return this.#internals.validationMessage
+  }
+
+  get willValidate() {
+    return this.#internals.willValidate
+  }
+
+  /**
+   * The name of the button, submitted as a pair with the button's value as part of the form data.
+   * @attribute
+   */
+  @property({ type: String }) accessor name: string | undefined
+
+  #value?: string
+
+  get value(): string | undefined {
+    return this.#value
+  }
+
+  /**
+   * Defines the value associated with the button's name when it's submitted with the form data.
+   * @attribute
+   */
+  @property({ type: String })
+  set value(value: string | undefined) {
+    if (this.#value === value) {
+      return
+    }
+    this.#value = value
+    this.#internals?.setFormValue(value || null)
+  }
+
+  /**
+   * Whether to render the icon at the inline end of the label rather than the inline start.
+   * @attribute
+   */
+  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false
+
+  /**
+   * The default behavior of the button.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor type: ButtonType = 'button'
+
+  /**
+   * When set, the button is a toggle button.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor toggle = false
+
+  /**
+   * Indicates that the button is currently selected.
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor selected = false
+
+  /**
+   * The shape of the button.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor shape: MdButtonShape = 'round'
+
+  /**
+   * The size of the button.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'
+
+  get disabled(): boolean {
+    return isDisabled(this)
+  }
+
+  /**
+   * When set, the button is in a disabled state.
+   * @attribute
+   */
+  @property({ reflect: true, type: Boolean })
+  set disabled(value: boolean) {
+    const old = isDisabled(this)
+    setDisabled(this, value)
+    this.requestUpdate('disabled', old)
+  }
+
+  @query('ui-ripple') protected accessor ripple!: UiRipple | null
+
+  constructor() {
+    super()
+    this.actionController.cancelKeyboardEvents = true
+    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))
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'button')
+    }
+    if (!this.hasAttribute('tabindex') && !this.disabled) {
+      this.setAttribute('tabindex', '0')
+    }
+  }
+
+  protected override updated(cp: PropertyValues<this>): void {
+    super.updated(cp)
+
+    // If the button is disabled, remove the tabindex attribute
+    if (cp.has('disabled')) {
+      if (this.disabled) {
+        this.removeAttribute('tabindex')
+      } else if (!this.hasAttribute('tabindex')) {
+        this.setAttribute('tabindex', '0')
+      }
+    }
+
+    if (cp.has('toggle') || cp.has('selected')) {
+      this.updatePressedState()
+    }
+  }
+
+  protected updatePressedState(): void {
+    if (this.toggle) {
+      this.ariaPressed = String(this.selected)
+    } else {
+      this.selected = false
+      this.removeAttribute('aria-pressed')
+    }
+  }
+
+  checkValidity() {
+    return this.#internals.checkValidity()
+  }
+
+  reportValidity() {
+    return this.#internals.reportValidity()
+  }
+
+  protected override firstUpdated(): void {
+    this.#internals?.setFormValue(this.value || null)
+  }
+
+  override beginPress(options: BeginPressConfig): void {
+    super.beginPress(options)
+    this.classList.add('pressed')
+    this.ripple?.beginFocus()
+  }
+
+  override endPress(config: EndPressConfig): void {
+    super.endPress(config)
+    this.classList.remove('pressed')
+    this.ripple?.endFocus()
+    const { cancelled, reason } = config
+    if (cancelled) {
+      return
+    }
+    const allowedReasons = reason === 'enter' || reason === 'space'
+    if (this.type === 'submit' && (!reason || allowedReasons)) {
+      this.handleSubmit()
+    } else if (allowedReasons) {
+      this.click()
+    }
+  }
+
+  override handleClick(e: MouseEvent): void {
+    super.handleClick(e)
+    if (this.disabled) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+
+    if (this.toggle) {
+      this.selected = !this.selected
+      const e = new ToggleEvent('toggle', {
+        bubbles: true,
+        composed: true,
+        newState: this.selected ? 'selected' : 'unselected',
+        oldState: this.selected ? 'unselected' : 'selected',
+      })
+      this.dispatchEvent(e)
+    }
+    this.endPress({ cancelled: false, actionData: { event: e } })
+  }
+
+  protected handleSubmit(): void {
+    const { name, value, type, disabled, form } = this
+    if (!form || !type || disabled) {
+      return
+    }
+    const typedForm = form as HTMLFormElement
+    let button: HTMLButtonElement | undefined
+    if (name || value) {
+      button = document.createElement('button')
+      if (name) {
+        button.name = name
+      }
+      if (value) {
+        button.value = value
+      }
+      button.type = type
+      button.hidden = true
+      typedForm.append(button)
+    }
+    try {
+      typedForm.requestSubmit(button)
+    } catch {
+      // Ignore errors
+    }
+    if (button) {
+      typedForm.removeChild(button)
+    }
+  }
+
+  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()
+    }
+  }
+
+  protected override render(): TemplateResult {
+    const { trailingIcon = false } = this
+    const icon = this.renderIcon()
+
+    return html`
+      ${this.renderFocusRing()} ${this.renderRipple()} ${trailingIcon ? nothing : icon}
+      <slot></slot>
+      ${trailingIcon ? icon : nothing}
+    `
+  }
+
+  protected renderIcon(): TemplateResult {
+    return html`<slot name="icon"></slot>`
+  }
+
+  protected renderFocusRing(): TemplateResult {
+    return html`<md-focus-ring part="focus-ring" class="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>`
+  }
+
+  protected renderRipple(): TemplateResult {
+    return html`<ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>`
+  }
+}

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

@@ -0,0 +1,319 @@
+import { css } from 'lit'
+
+/* Material Design 3 Expressive Button - CSS-Native Implementation */
+export default css`
+  :host {
+    all: unset;
+
+    /* Layout and positioning */
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    /* Default sizing */
+    min-height: 40px;
+    min-width: 64px;
+    padding-inline: 16px;
+    gap: 8px;
+
+    /* Typography from Material 3 tokens */
+    font-family: var(--md-sys-typescale-label-large-font, var(--md-ref-typeface-plain, system-ui));
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-label-large-weight, 500);
+    line-height: var(--md-sys-typescale-label-large-height, 1.25);
+    letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.01em);
+
+    --md-ripple-hover-state-layer-color: currentColor;
+    --md-ripple-focus-state-layer-color: currentColor;
+    --md-ripple-pressed-state-layer-color: currentColor;
+
+    /* CSS custom property for pill radius - half of the button height */
+    --_pill-radius: 20px;
+    /* Default icon size */
+    --_icon-size: var(--md-button-icon-size, 20px);
+    --_background-color: transparent;
+    --_color: inherit;
+    --_shadow: var(--md-sys-elevation-0);
+
+    border-end-end-radius: var(--ui-button-shape-end-end, var(--_pill-radius));
+    border-end-start-radius: var(--ui-button-shape-end-start, var(--_pill-radius));
+    border-start-end-radius: var(--ui-button-shape-start-end, var(--_pill-radius));
+    border-start-start-radius: var(--ui-button-shape-start-start, var(--_pill-radius));
+    background-color: var(--_background-color);
+    color: var(--_color);
+    box-shadow: var(--_shadow);
+
+    /* Interaction styles */
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+
+    transition:
+      background-color var(--md-sys-motion-duration-short2, 200ms)
+        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      color var(--md-sys-motion-duration-short2, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      box-shadow var(--md-sys-motion-duration-short2, 200ms)
+        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      border-color var(--md-sys-motion-duration-short2, 200ms)
+        var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  /* Icon styling */
+  ::slotted([slot='icon']) {
+    flex-shrink: 0;
+    width: var(--_icon-size);
+    height: var(--_icon-size);
+    font-size: inherit;
+  }
+
+  /* Modern CSS: Container queries for responsive sizing */
+  @container (min-width: 320px) {
+    :host {
+      min-width: 80px;
+    }
+  }
+
+  .ripple {
+    border-radius: inherit;
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  .focus-ring {
+    --md-focus-ring-shape-end-end: var(--ui-button-shape-end-end, var(--_pill-radius));
+    --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_pill-radius));
+    --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_pill-radius));
+    --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_pill-radius));
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  .ripple.activated {
+    z-index: 1;
+  }
+
+  /* Disabled state */
+  :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);
+    box-shadow: none;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Size Variations */
+  :host([size='xs']) {
+    min-height: 32px;
+    padding-inline: 12px;
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    gap: 6px;
+    --_icon-size: 20px;
+  }
+
+  :host([size='s']) {
+    min-height: 40px;
+    padding-inline: 16px;
+    --_icon-size: 20px;
+  }
+
+  :host([size='m']) {
+    min-height: 56px;
+    padding-inline: 24px;
+    font-size: var(--md-sys-typescale-label-large-size, 1rem);
+    gap: 10px;
+    --_icon-size: 24px;
+  }
+
+  :host([size='l']) {
+    min-height: 96px;
+    padding-inline: 48px;
+    font-size: var(--md-sys-typescale-title-medium-size, 1.125rem);
+    gap: 12px;
+    --_icon-size: 32px;
+  }
+
+  :host([size='xl']) {
+    min-height: 136px;
+    padding-inline: 64px;
+    font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
+    gap: 16px;
+    --_icon-size: 40px;
+  }
+
+  /* Pressed state is the same to all combinations of shape and size */
+  :host([size='xs'].pressed),
+  :host([size='s'].pressed) {
+    --_pill-radius: 8px !important;
+  }
+  :host([size='m'].pressed) {
+    --_pill-radius: 12px !important;
+  }
+  :host([size='xl'].pressed),
+  :host([size='l'].pressed) {
+    --_pill-radius: 16px !important;
+  }
+
+  /* Shape setup */
+  /* For the round shape, we can't use the "--md-sys-shape-corner-full" value as it has a value of 999px and it would make animations impossible so see. */
+  :host([toggle][selected][shape='square'][size='xs']),
+  :host([shape='round'][size='xs']) {
+    --_pill-radius: 16px; /* Half of 32px height */
+  }
+  :host([toggle][selected][shape='square'][size='s']),
+  :host([shape='round'][size='s']) {
+    --_pill-radius: 20px; /* Half of 40px height */
+  }
+  :host([toggle][selected][shape='square'][size='m']),
+  :host([shape='round'][size='m']) {
+    --_pill-radius: 28px; /* Half of 56px height */
+  }
+  :host([toggle][selected][shape='square'][size='l']),
+  :host([shape='round'][size='l']) {
+    --_pill-radius: 48px; /* Half of 96px height */
+  }
+  :host([toggle][selected][shape='square'][size='xl']),
+  :host([shape='round'][size='xl']) {
+    --_pill-radius: 68px; /* Half of 136px height */
+  }
+
+  :host([shape='square'][size='xs']),
+  :host([shape='square'][size='s']) {
+    --_pill-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  :host([shape='square'][size='m']) {
+    --_pill-radius: var(--md-sys-shape-corner-large);
+  }
+
+  :host([shape='square'][size='l']),
+  :host([shape='square'][size='xl']) {
+    --_pill-radius: var(--md-sys-shape-corner-extra-large);
+  }
+
+  /* Button Color Variants - Material 3 Expressive */
+
+  /* Elevated Button */
+  :host([color='elevated']) {
+    --_background-color: var(--md-sys-color-surface-container-low);
+    --_color: var(--md-sys-color-primary);
+    --_shadow: var(--md-sys-elevation-1);
+  }
+
+  :host([color='elevated'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-primary);
+    --_color: var(--md-sys-color-on-primary);
+  }
+
+  :host([color='elevated']:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-2);
+  }
+
+  :host([color='elevated'][disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+    --_shadow: var(--md-sys-elevation-0);
+  }
+
+  /* Filled Button */
+  :host([color='filled']) {
+    --_background-color: var(--md-sys-color-primary);
+    --_color: var(--md-sys-color-on-primary);
+  }
+
+  :host([color='filled'][toggle]) {
+    --_background-color: var(--md-sys-color-surface-container);
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([color='filled'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-primary);
+    --_color: var(--md-sys-color-on-primary);
+  }
+
+  :host([color='filled']:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-1);
+  }
+
+  :host([color='filled'][disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Filled Tonal Button */
+  :host([color='tonal']) {
+    --_background-color: var(--md-sys-color-secondary-container);
+    --_color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host([color='tonal'][toggle]) {
+    --_background-color: var(--md-sys-color-secondary-container);
+    --_color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host([color='tonal'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-secondary);
+    --_color: var(--md-sys-color-on-secondary);
+  }
+
+  :host([color='tonal']:hover:not([disabled])) {
+    --_shadow: var(--md-sys-elevation-1);
+  }
+
+  :host([color='tonal'][disabled]) {
+    --_background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Outlined Button */
+  :host([color='outlined']) {
+    border: 1px var(--md-sys-color-outline-variant) solid;
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([color='outlined'][toggle][selected]) {
+    --_background-color: var(--md-sys-color-inverse-surface);
+    --_color: var(--md-sys-color-inverse-on-surface);
+  }
+
+  :host([color='outlined'][disabled]) {
+    border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
+    --_color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Text Button */
+  :host([color='text']) {
+    --_color: var(--md-sys-color-primary);
+  }
+
+  :host([color='text'][disabled]) {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  :host([toggle][selected][shape='round']) {
+    --_pill-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  /* Preference-based animations */
+  @media (prefers-reduced-motion: reduce) {
+    :host {
+      transition-duration: 0.01ms;
+      animation-duration: 0.01ms;
+    }
+  }
+
+  /* High contrast mode support */
+  @media (prefers-contrast: high) {
+    :host {
+      border-width: 2px;
+    }
+
+    :host([color='text']),
+    :host([color='outlined']) {
+      border-width: 2px;
+      border-style: solid;
+    }
+  }
+`