@api-client/ui 0.2.13 → 0.3.1

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

@@ -0,0 +1,121 @@
+import { LitElement, type PropertyValues, html } from 'lit'
+import { property, queryAssignedElements } from 'lit/decorators.js'
+import UiButtonElement from './button.js'
+import type { MdButtonSize } from './button.js'
+
+export type MdGroupType = 'standard' | 'connected'
+
+/**
+ * A group of buttons that can be selected.
+ *
+ * When a group of buttons is added to the group element, the group element
+ * becomes the manager of the buttons type, size, and selection state.
+ *
+ * All buttons added to the group will inherit the size from the group, but also the `shape` is set
+ * based on the group type.
+ *
+ * Buttons don't need to be have the `toggle` attribute set. In such case, the button
+ * will not participate in the selection state management.
+ */
+export default class ButtonGroup extends LitElement {
+  /**
+   * If true, multiple buttons can be selected.
+   * When set to false, the group deselects all other buttons when one is selected.
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor multiple = false
+
+  /**
+   * The type of button group.
+   * - 'standard': Standard button group.
+   * - 'connected': Connected button group (buttons are visually connected).
+   * @attribute
+   */
+  @property({ type: String }) accessor type: MdGroupType = 'standard'
+
+  /**
+   * The size of the buttons used with this group.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor size: MdButtonSize = 's'
+
+  @queryAssignedElements({ flatten: true, selector: 'ui-button' }) private accessor buttons!: UiButtonElement[]
+
+  /**
+   * The MutationObserver instance used to watch for changes in slotted children.
+   */
+  protected observer?: MutationObserver
+
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.observer = new MutationObserver(this.handleMutations.bind(this))
+    this.observer.observe(this, { childList: true, subtree: true, attributes: true, attributeFilter: ['selected'] })
+    this.updateChildren()
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback()
+    this.observer?.disconnect()
+    this.observer = undefined
+  }
+
+  protected override firstUpdated(changed: PropertyValues): void {
+    this.updateChildren()
+    super.firstUpdated(changed)
+  }
+
+  protected override willUpdate(changed: PropertyValues<this>): void {
+    if (changed.has('size')) {
+      this.updateChildren()
+    }
+  }
+
+  protected handleMutations(mutations: MutationRecord[]): void {
+    for (const mutation of mutations) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'selected') {
+        const target = mutation.target as UiButtonElement
+        if (target instanceof UiButtonElement && target.toggle && target.selected) {
+          this.activate(target)
+        }
+      } else if (mutation.type === 'childList') {
+        this.updateChildren()
+      }
+    }
+  }
+
+  protected updateChildren(): void {
+    const isConnected = this.type === 'connected'
+    this.buttons.forEach((button) => {
+      button.size = this.size
+      if (isConnected) {
+        button.shape = 'square'
+      } else {
+        button.shape = 'round'
+      }
+    })
+  }
+
+  /**
+   * In multi selection mode, this method does nothing.
+   * In single selection mode, it activates the clicked button and deactivates all others.
+   */
+  activate(button: UiButtonElement) {
+    if (this.multiple) {
+      // In multiselection, we don't need to do anything here
+      return
+    }
+    this.buttons.forEach((btn) => {
+      if (!btn.toggle || btn === button || !btn.selected) {
+        return
+      }
+      btn.selected = false
+    })
+    if (button.toggle && !button.selected) {
+      button.selected = true
+    }
+  }
+
+  override render() {
+    return html`<slot></slot>`
+  }
+}

package/src/md/button/ui-button-group.ts

@@ -0,0 +1,15 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/group.js'
+import styles from './internals/group.styles.js'
+
+@customElement('ui-button-group')
+export class UiButtonGroupElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-button-group': UiButtonGroupElement
+  }
+}

package/src/md/button/ui-button.ts

@@ -0,0 +1,18 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/button.js'
+import styles from './internals/button.styles.js'
+
+/**
+ * @attribute {string} form
+ */
+@customElement('ui-button')
+export class UiButtonElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ui-button': UiButtonElement
+  }
+}

package/src/md/dialog/internals/Dialog.ts

@@ -7,7 +7,7 @@ import type UiButton from '../../button/internals/button.js'
 import type { TypedEvents } from '../../../core/types.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { SyntheticSubmitEvent } from '../../../events/SyntheticSubmitEvent.js'
-import '../../button/ui-text-button.js'
+import '../../button/ui-button.js'
 
 export interface UiDialogClosingReason {
   /**
@@ -40,8 +40,8 @@ export type RenderFunction = () => TemplateResult
  * closing reason detail.
  *
  * ```javascript
- * <ui-text-button value="dismiss">Cancel</ui-text-button>
- * <ui-text-button value="confirm">Take action</ui-text-button>
+ * <ui-button color="text" value="dismiss">Cancel</ui-button>
+ * <ui-button color="text" value="confirm">Take action</ui-button>
  * ```
  *
  * ```javascript
@@ -64,8 +64,8 @@ export type RenderFunction = () => TemplateResult
  *  <span slot="title">Delete photos?</span>
  *  <p>This action will permanently remove the selected pictures from your account.</p>
  *
- *  <ui-text-button slot="button" value="dismiss" type="text">Cancel</ui-text-button>
- *  <ui-text-button slot="button" value="confirm" type="text">Confirm</ui-text-button>
+ *  <ui-button color="text" slot="button" value="dismiss" type="text">Cancel</ui-button>
+ *  <ui-button color="text" slot="button" value="confirm" type="text">Confirm</ui-button>
  * </ui-dialog>
  * ```
  *
@@ -408,8 +408,8 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
       return nothing
     }
     return html`
-      <ui-text-button value="dismiss" class="internal-button" @click="${this.handleDismiss}"
-        >${dismissLabel}</ui-text-button
+      <ui-button color="text" value="dismiss" class="internal-button" @click="${this.handleDismiss}"
+        >${dismissLabel}</ui-button
       >
     `
   }
@@ -421,8 +421,13 @@ export default class UiDialog extends UiElement implements TypedEvents<DialogEve
     }
     const type = useForm ? 'submit' : 'button'
     return html`
-      <ui-text-button type="${type}" value="${confirmValue}" class="internal-button" @click="${this.handleConfirm}"
-        >${confirmLabel}</ui-text-button
+      <ui-button
+        color="text"
+        type="${type}"
+        value="${confirmValue}"
+        class="internal-button"
+        @click="${this.handleConfirm}"
+        >${confirmLabel}</ui-button
       >
     `
   }

package/src/md/dropdown-list/internals/UiDropdownList.ts

@@ -18,7 +18,7 @@ export interface UiDropdownListSelection {
  * Examples:
  *
  * <ui-dropdown-list>
- *  <ui-filled-button>Click me</ui-filled-button>
+ *  <ui-button color="filled">Click me</ui-button>
  *  <ui-list slot="dropdown" role="menu">
  *    <ui-list-item role="menuitem">Item 1</ui-list-item>
  *    <ui-list-item role="menuitem">Item 2</ui-list-item>

package/src/md/icon-button/internals/IconButton.styles.ts

@@ -0,0 +1,286 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    all: unset;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    white-space: nowrap;
+
+    --md-ripple-hover-state-layer-color: currentColor;
+    --md-ripple-focus-state-layer-color: currentColor;
+    --md-ripple-pressed-state-layer-color: currentColor;
+
+    --_color: inherit;
+    --_background-color: transparent;
+    --_icon-size: var(--md-button-icon-size, 20px);
+    --_container-height: inherit;
+    --_leading-space: 0;
+    --_trailing-space: 0;
+    --_radius: 0;
+    --_outline-width: 0;
+
+    --_xs-radius: 16px;
+    --_s-radius: 20px;
+    --_m-radius: 28px;
+    --_l-radius: 48px;
+    --_xl-radius: 68px;
+
+    background-color: var(--_background-color);
+    color: var(--_color);
+    fill: var(--_color);
+    height: var(--_container-height);
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
+    border: var(--_outline-width) var(--md-sys-color-outline-variant) solid;
+    border-end-end-radius: var(--ui-button-shape-end-end, var(--_radius));
+    border-end-start-radius: var(--ui-button-shape-end-start, var(--_radius));
+    border-start-end-radius: var(--ui-button-shape-start-end, var(--_radius));
+    border-start-start-radius: var(--ui-button-shape-start-start, var(--_radius));
+
+    /* 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)),
+      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);
+  }
+
+  ::slotted(*) {
+    width: var(--_icon-size) !important;
+    height: var(--_icon-size) !important;
+    color: var(--_color);
+    fill: var(--_color);
+  }
+
+  .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(--_radius));
+    --md-focus-ring-shape-end-start: var(--ui-button-shape-end-start, var(--_radius));
+    --md-focus-ring-shape-start-end: var(--ui-button-shape-start-end, var(--_radius));
+    --md-focus-ring-shape-start-start: var(--ui-button-shape-start-start, var(--_radius));
+    transition: border-radius var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-standard);
+  }
+
+  .ripple.activated {
+    z-index: 1;
+  }
+
+  /* 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'][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']) {
+    --_outline-width: 1px;
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+  :host([color='outlined'][size='l']),
+  :host([color='outlined'][size='xl']) {
+    --_outline-width: 3px;
+  }
+
+  :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);
+  }
+
+  /* Standard Button */
+  :host([color='standard']) {
+    --_color: var(--md-sys-color-on-surface-variant);
+  }
+
+  :host([color='standard'][toggle][selected]) {
+    --_color: var(--md-sys-color-primary);
+  }
+
+  :host([color='standard'][disabled]) {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  /* Sizes */
+  :host([size='xs']) {
+    --_container-height: 32px;
+    --_icon-size: 20px;
+  }
+  :host([size='s']) {
+    --_container-height: 40px;
+    --_icon-size: 24px;
+  }
+  :host([size='m']) {
+    --_container-height: 56px;
+    --_icon-size: 24px;
+  }
+  :host([size='l']) {
+    --_container-height: 96px;
+    --_icon-size: 32px;
+  }
+  :host([size='xl']) {
+    --_container-height: 136px;
+    --_icon-size: 40px;
+  }
+  :host([size='xs'][width='narrow']) {
+    --_leading-space: 4px;
+    --_trailing-space: 4px;
+  }
+  :host([size='xs'][width='default']) {
+    --_leading-space: 6px;
+    --_trailing-space: 6px;
+  }
+  :host([size='xs'][width='wide']) {
+    --_leading-space: 10px;
+    --_trailing-space: 10px;
+  }
+  :host([size='s'][width='narrow']) {
+    --_leading-space: 4px;
+    --_trailing-space: 4px;
+  }
+  :host([size='s'][width='default']) {
+    --_leading-space: 8px;
+    --_trailing-space: 8px;
+  }
+  :host([size='s'][width='wide']) {
+    --_leading-space: 14px;
+    --_trailing-space: 14px;
+  }
+  :host([size='m'][width='narrow']) {
+    --_leading-space: 12px;
+    --_trailing-space: 12px;
+  }
+  :host([size='m'][width='default']) {
+    --_leading-space: 16px;
+    --_trailing-space: 16px;
+  }
+  :host([size='m'][width='wide']) {
+    --_leading-space: 24px;
+    --_trailing-space: 24px;
+  }
+  :host([size='l'][width='narrow']) {
+    --_leading-space: 16px;
+    --_trailing-space: 16px;
+  }
+  :host([size='l'][width='default']) {
+    --_leading-space: 32px;
+    --_trailing-space: 32px;
+  }
+  :host([size='l'][width='wide']) {
+    --_leading-space: 48px;
+    --_trailing-space: 48px;
+  }
+  :host([size='xl'][width='narrow']) {
+    --_leading-space: 32px;
+    --_trailing-space: 32px;
+  }
+  :host([size='xl'][width='default']) {
+    --_leading-space: 48px;
+    --_trailing-space: 48px;
+  }
+  :host([size='xl'][width='wide']) {
+    --_leading-space: 72px;
+    --_trailing-space: 72px;
+  }
+
+  /* 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([shape='round'][size='xs']) {
+    --_radius: var(--_xs-radius);
+  }
+  :host([shape='round'][size='s']) {
+    --_radius: var(--_s-radius);
+  }
+  :host([shape='square'][size='xs']),
+  :host([shape='square'][size='s']) {
+    --_radius: var(--md-sys-shape-corner-medium);
+  }
+  :host([shape='round'][size='m']) {
+    --_radius: var(--_m-radius);
+  }
+  :host([shape='square'][size='m']) {
+    --_radius: var(--md-sys-shape-corner-large);
+  }
+  :host([shape='round'][size='l']) {
+    --_radius: var(--_l-radius);
+  }
+  :host([shape='round'][size='xl']) {
+    --_radius: var(--_xl-radius);
+  }
+  :host([shape='square'][size='l']),
+  :host([shape='square'][size='xl']) {
+    --_radius: var(--md-sys-shape-corner-extra-large);
+  }
+
+  /* Pressed shapes */
+  :host([size='xs'].pressed),
+  :host([size='s'].pressed) {
+    --_radius: var(--md-sys-shape-corner-small);
+  }
+  :host([size='m'].pressed) {
+    --_radius: var(--md-sys-shape-corner-medium);
+  }
+  :host([size='l'].pressed),
+  :host([size='xl'].pressed) {
+    --_radius: var(--md-sys-shape-corner-large);
+  }
+`

package/src/md/icon-button/internals/IconButton.ts

@@ -1,155 +1,31 @@
-/* eslint-disable max-len */
-import { html, PropertyValues, TemplateResult } from 'lit'
-import { property, query } from 'lit/decorators.js'
-import { classMap } from 'lit/directives/class-map.js'
-import { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
-import { UiElement } from '../../UiElement.js'
-import { isDisabled, setDisabled } from '../../../lib/disabled.js'
-import UiRipple from '../../ripple/internals/ripple.js'
+import { html, type TemplateResult } from 'lit'
+import BaseButton from '../../button/internals/base.js'
+import { property } from 'lit/decorators.js'
 
-import '../../ripple/ui-ripple.js'
-import '@material/web/focus/md-focus-ring.js'
+export type MdIconButtonColor = 'filled' | 'outlined' | 'standard' | 'tonal'
+export type MdIconButtonWidth = 'default' | 'narrow' | 'wide'
 
 /**
- * @fires active - An event dispatched when the `active` state  has changed. This only happens when the button is `toggle`.
+ * An icon button component that extends the functionality of a standard button,
+ * but is specifically designed to hold an icon.
+ * @slot - The default slot for the icon.
  */
-export default class IconButton extends UiElement {
+export default class IconButton extends BaseButton {
   /**
-   * Whether the button can be toggled.
-   * A toggle button behaves different as it gets the `aria-pressed` attribute
-   * which changes depending on the pressed state.
-   * A toggle button is activated until it is clicked/pressed again.
-   * A toggle button dispatched `active` event when the press state change.
-   * The host can check the `active` property to know the state.
-   *
+   * The color of the button.
    * @attribute
    */
-  @property({ type: Boolean, reflect: true }) accessor toggle: boolean | undefined
-
-  /**
-   * A flag that determines whether the button is activated (pressed when `toggle` is set).
-   * It is `undefined` and makes no effect when `toggle` is not set.
-   *
-   * @attribute
-   */
-  @property({ type: Boolean, reflect: true }) accessor active: boolean | undefined
-
-  get disabled(): boolean {
-    return isDisabled(this)
-  }
-
+  @property({ type: String, reflect: true }) accessor color: MdIconButtonColor = 'standard'
   /**
-   * When set, the button is a disabled state.
+   * The width of the button.
    * @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 update(changedProperties: PropertyValues<this>): void {
-    if (changedProperties.has('active')) {
-      this.setAttribute('aria-pressed', String(this.active))
-    }
-    super.update(changedProperties)
-  }
-
-  protected pressRipple(options: BeginPressConfig): void {
-    const element = this.ripple
-    if (element && !element.isPressed) {
-      element.beginPress(options.positionEvent as PointerEvent)
-    }
-  }
-
-  protected endRipple(): void {
-    this.ripple?.endPress()
-  }
-
-  override beginPress(options: BeginPressConfig): void {
-    super.beginPress(options)
-    this.pressRipple(options)
-  }
-
-  override endPress(config: EndPressConfig): void {
-    super.endPress(config)
-    this.endRipple()
-    const { cancelled, reason } = config
-    if (cancelled) {
-      return
-    }
-    if (!reason || reason === 'enter' || reason === 'space') {
-      if (this.toggle) {
-        this.active = !this.active
-        // note, only dispatch events when user interacting with the UI.
-        this.dispatchEvent(new Event('active'))
-      }
-    }
-    if (reason === 'enter' || reason === 'space') {
-      if (!this.toggle) {
-        this.click()
-      }
-    }
-  }
-
-  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()
-    }
-  }
+  @property({ type: String, reflect: true }) accessor width: MdIconButtonWidth = 'default'
 
   protected override render(): TemplateResult {
-    const { pressed = false } = this
-    const containerClasses = classMap({
-      surface: true,
-      pressed,
-    })
     return html`
-      <md-focus-ring part="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>
-      <ui-ripple class="ripple" ?disabled="${this.disabled}"></ui-ripple>
-      <div class="${containerClasses}">
-        <div class="container"></div>
-        <div class="state"></div>
-        <div class="content">
-          <slot></slot>
-        </div>
-      </div>
+      ${this.renderFocusRing()} ${this.renderRipple()}
+      <slot></slot>
     `
   }
 }