@api-client/ui 0.2.12 → 0.3.0

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

@@ -1,242 +1,16 @@
-import { html, nothing, TemplateResult } from 'lit'
-import { property, queryAsync, state } from 'lit/decorators.js'
-import { classMap } 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'
-import { isDisabled, setDisabled } from '../../../lib/disabled.js'
+import { property } from 'lit/decorators.js'
+import BaseButton from './base.js'
+export type { ButtonType, MdButtonShape, MdButtonSize } from './base.js'
 
-import '../../ripple/ui-ripple.js'
-import '@material/web/focus/md-focus-ring.js'
+export type MdButtonColor = 'elevated' | 'filled' | 'outlined' | 'text' | 'tonal'
 
 /**
- * A material design button.
- *
- * Note, this control is form associated.
- *
- * @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.
- *                   It should be the id of the form element within the same document.
+ * A material design button with M3 Expressive features - CSS-native implementation.
  */
-export default class UiButton extends UiElement {
-  static readonly formAssociated = true
-
-  #internals = this.attachInternals()
-
-  /**
-   * The form associated with this element
-   * @attribute {string} form - The form associated with this element when the element is outside the form.
-   *                   It should be the id of the form element within the same document.
-   */
-  get form(): HTMLFormElement | null {
-    return this.#internals.form
-  }
-
-  get validity() {
-    return this.#internals.validity
-  }
-
-  get validationMessage() {
-    return this.#internals.validationMessage
-  }
-
-  get willValidate() {
-    return this.#internals.willValidate
-  }
-
-  /**
-   * Determines when the element has an icon in the "icon" slot.
-   */
-  @state() protected accessor hasIcon: boolean
-
-  /**
-   * The name of the button, submitted as a pair with the button's value as part of the form data,
-   * when that button is used to submit the form.
-   * @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.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#value}
-   * @attribute
-   */
-  @property({ type: String })
-  set value(value: string | undefined) {
-    if (this.#value === value) {
-      return
-    }
-    this.#value = value
-    this.#internals?.setFormValue(value || null)
-  }
-
+export default class Button extends BaseButton {
   /**
-   * Whether to render the icon at the inline end of the label rather than the
-   * inline start.
+   * The color of the button.
    * @attribute
    */
-  @property({ type: Boolean, attribute: 'trailingicon', reflect: true }) accessor trailingIcon = false
-
-  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>
-
-  /**
-   * The default behavior of the button.
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type}
-   * @attribute
-   */
-  @property({ type: String, reflect: true }) accessor type: 'submit' | 'reset' | 'button' = 'button'
-
-  get disabled(): boolean {
-    return isDisabled(this)
-  }
-
-  /**
-   * When set, the button is a disabled state.
-   * @attribute
-   */
-  @property({ reflect: true, type: Boolean })
-  set disabled(value: boolean) {
-    const old = isDisabled(this)
-    setDisabled(this, value)
-    this.requestUpdate('disabled', old)
-  }
-
-  constructor() {
-    super()
-
-    this.hasIcon = false
-    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('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')
-    }
-  }
-
-  checkValidity() {
-    return this.#internals.checkValidity()
-  }
-
-  reportValidity() {
-    return this.#internals.reportValidity()
-  }
-
-  protected override firstUpdated(): void {
-    this.#internals?.setFormValue(this.value || null)
-  }
-
-  protected async pressRipple(): Promise<void> {
-    const element = await this.ripple
-    if (element && !element.isPressed) {
-      element.beginPress()
-    }
-  }
-
-  protected async endRipple(): Promise<void> {
-    const element = await this.ripple
-    element?.endPress()
-  }
-
-  override beginPress(options: BeginPressConfig): void {
-    super.beginPress(options)
-    this.pressRipple()
-  }
-
-  override endPress(config: EndPressConfig): void {
-    super.endPress(config)
-    this.endRipple()
-    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()
-    }
-  }
-
-  protected handleSubmit(): void {
-    const { name, value, type, disabled, form } = this
-    if (!form || !type || disabled) {
-      return
-    }
-    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
-      form.append(button)
-    }
-    try {
-      form.requestSubmit(button)
-    } catch {
-      // ...
-    }
-    if (button) {
-      form.removeChild(button)
-    }
-  }
-
-  /**
-   * Sets the `_hasIcon` state property when the "icon" slot change event is dispatched.
-   */
-  protected handleSlotChange(e: Event): void {
-    const slot = e.target as HTMLSlotElement
-    this.hasIcon = !!slot.assignedNodes().length
-  }
-
-  protected override render(): TemplateResult {
-    const { pressed = false, trailingIcon = false } = this
-    const containerClasses = classMap({
-      surface: true,
-      withIcon: this.hasIcon,
-      pressed,
-    })
-    const icon = this.renderIcon()
-    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}" id="container">
-        <div class="container"></div>
-        <div class="state"></div>
-        <div class="content">
-          ${trailingIcon ? nothing : icon}
-          <slot></slot>
-          ${trailingIcon ? icon : nothing}
-        </div>
-      </div>
-    `
-  }
-
-  protected renderIcon(): TemplateResult {
-    return html`<slot name="icon" @slotchange="${this.handleSlotChange}"></slot>`
-  }
+  @property({ type: String, reflect: true }) accessor color: MdButtonColor = 'filled'
 }

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

@@ -0,0 +1,102 @@
+import { css } from 'lit'
+
+/* Material Design 3 Expressive Button - CSS-Native Implementation */
+export default css`
+  :host {
+    display: flex;
+
+    --_gap: 8px;
+    --_xs-radius: 16px;
+    --_s-radius: 20px;
+    --_m-radius: 28px;
+    --_l-radius: 48px;
+    --_xl-radius: 68px;
+
+    gap: var(--_gap);
+  }
+
+  :host([size='xs'][type='standard']) {
+    --_gap: 18px;
+  }
+  :host([size='xs'][type='connected']) {
+    --_gap: 2px;
+  }
+
+  :host([size='s'][type='standard']) {
+    --_gap: 12px;
+  }
+  :host([size='s'][type='connected']) {
+    --_gap: 2px;
+  }
+
+  :host([size='m'][type='standard']) {
+    --_gap: 8px;
+  }
+  :host([size='m'][type='connected']) {
+    --_gap: 2px;
+  }
+
+  :host([size='l'][type='standard']) {
+    --_gap: 8px;
+  }
+  :host([size='l'][type='connected']) {
+    --_gap: 2px;
+  }
+
+  :host([size='xl'][type='standard']) {
+    --_gap: 8px;
+  }
+  :host([size='xl'][type='connected']) {
+    --_gap: 2px;
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='xs']:first-child) {
+    --ui-button-shape-start-start: var(--_xs-radius);
+    --ui-button-shape-end-start: var(--_xs-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='s']:first-child) {
+    --ui-button-shape-start-start: var(--_s-radius);
+    --ui-button-shape-end-start: var(--_s-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='m']:first-child) {
+    --ui-button-shape-start-start: var(--_m-radius);
+    --ui-button-shape-end-start: var(--_m-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='l']:first-child) {
+    --ui-button-shape-start-start: var(--_l-radius);
+    --ui-button-shape-end-start: var(--_l-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='xl']:first-child) {
+    --ui-button-shape-start-start: var(--_xl-radius);
+    --ui-button-shape-end-start: var(--_xl-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='xs']:last-child) {
+    --ui-button-shape-start-end: var(--_xs-radius);
+    --ui-button-shape-end-end: var(--_xs-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='s']:last-child) {
+    --ui-button-shape-start-end: var(--_s-radius);
+    --ui-button-shape-end-end: var(--_s-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='m']:last-child) {
+    --ui-button-shape-start-end: var(--_m-radius);
+    --ui-button-shape-end-end: var(--_m-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='l']:last-child) {
+    --ui-button-shape-start-end: var(--_l-radius);
+    --ui-button-shape-end-end: var(--_l-radius);
+  }
+
+  :host([type='connected']) ::slotted(ui-button[size='xl']:last-child) {
+    --ui-button-shape-start-end: var(--_xl-radius);
+    --ui-button-shape-end-end: var(--_xl-radius);
+  }
+`

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>