@api-client/ui 0.2.13 → 0.3.1

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;
+    }
+  }
+`

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);
+  }
+`