@api-client/ui 0.2.12 → 0.3.0

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

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

@@ -1,12 +1,11 @@
 import type { CSSResultOrNative } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import Element from './internals/IconButton.js'
-import base from './internals/base.styles.js'
-import styles from './internals/standard.styles.js'
+import styles from './internals/IconButton.styles.js'
 
 @customElement('ui-icon-button')
 export class UiIconButtonElement extends Element {
-  static override styles: CSSResultOrNative[] = [base, styles]
+  static override styles: CSSResultOrNative[] = [styles]
 }
 
 declare global {

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

@@ -22,8 +22,7 @@ export default css`
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 
-  .surface::before,
-  .surface::after {
+  .surface::before {
     position: absolute;
     opacity: 0;
     pointer-events: none;
@@ -38,19 +37,10 @@ export default css`
     inset: 0;
   }
 
-  .surface::after {
-    transition: opacity 375ms linear;
-    transform-origin: center center;
-  }
-
   .focused::before {
     transition-duration: 75ms;
   }
 
-  .pressed::after {
-    transition-duration: 105ms;
-  }
-
   .surface {
     border-radius: var(--md-ripple-state-layer-shape, 0);
   }
@@ -59,14 +49,6 @@ export default css`
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
   }
 
-  .surface::after {
-    background: radial-gradient(
-      closest-side,
-      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
-      transparent 100%
-    );
-  }
-
   .surface.hovered::before {
     opacity: var(--md-ripple-hover-state-layer-opacity, var(--md-sys-state-hover-state-layer-opacity));
     background-color: var(--md-ripple-hover-state-layer-color, var(--md-sys-color-primary));
@@ -77,8 +59,14 @@ export default css`
     background-color: var(--md-ripple-focus-state-layer-color, var(--md-sys-color-primary));
   }
 
-  .surface.pressed::after {
+  .surface.pressed::before {
     opacity: var(--md-ripple-pressed-state-layer-opacity, var(--md-sys-state-pressed-state-layer-opacity));
+    /* background-color: var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)); */
+    background: radial-gradient(
+      closest-side,
+      var(--md-ripple-pressed-state-layer-color, var(--md-sys-color-primary)) max(100% - 70px, 65%),
+      transparent 100%
+    );
   }
 
   .surface.unbounded {

package/src/md/ripple/internals/ripple.ts

@@ -74,6 +74,13 @@ export default class UiRipple extends LitElement {
     }
   }
 
+  protected override willUpdate(changed: PropertyValues): void {
+    super.willUpdate(changed)
+    if (changed.has('hovered') || changed.has('focused') || changed.has('pressed')) {
+      this.manageActivated()
+    }
+  }
+
   protected override update(changedProps: PropertyValues<this>): void {
     if (changedProps.has('disabled') && this.disabled) {
       this.endHover()
@@ -156,8 +163,6 @@ export default class UiRipple extends LitElement {
     const translateStart = `${startPoint.x}px, ${startPoint.y}px`
     const translateEnd = `${endPoint.x}px, ${endPoint.y}px`
 
-    // const signal = this.pressAnimationSignal.start()
-
     const growAnimation = mdRoot.animate(
       {
         top: [0, 0],
@@ -174,22 +179,11 @@ export default class UiRipple extends LitElement {
       }
     )
 
-    // growAnimation.addEventListener('finish', () => {
-    //   this.pressAnimationSignal.finish()
-    //   this.growAnimation = null
-    // })
-
-    // signal.addEventListener('abort', () => {
-    //   growAnimation.cancel()
-    //   this.growAnimation = null
-    // })
-
     this.growAnimation = growAnimation
   }
 
   private async endPressAnimation() {
     this.rippleStartEvent = undefined
-    // this.state = State.INACTIVE
     const animation = this.growAnimation
     let pressAnimationPlayState = Infinity
     if (typeof animation?.currentTime === 'number') {
@@ -219,19 +213,23 @@ export default class UiRipple extends LitElement {
   beginHover(hoverEvent?: Event): void {
     if ((hoverEvent as PointerEvent)?.pointerType !== 'touch') {
       this.hovered = true
+      this.manageActivated()
     }
   }
 
   endHover(): void {
     this.hovered = false
+    this.manageActivated()
   }
 
   beginFocus(): void {
     this.focused = true
+    this.manageActivated()
   }
 
   endFocus(): void {
     this.focused = false
+    this.manageActivated()
   }
 
   beginPress(positionEvent?: Event | null): void {
@@ -242,6 +240,7 @@ export default class UiRipple extends LitElement {
       this.delayedEndPressHandle = null
     }
     this.startPressAnimation(positionEvent)
+    this.manageActivated()
   }
 
   endPress(): void {
@@ -255,5 +254,14 @@ export default class UiRipple extends LitElement {
       }, MINIMUM_PRESS_MS - pressAnimationPlayState) as unknown as number
     }
     this.endPressAnimation()
+    this.manageActivated()
+  }
+
+  protected manageActivated(): void {
+    if (this.pressed || this.hovered || this.focused) {
+      this.classList.add('activated')
+    } else {
+      this.classList.remove('activated')
+    }
   }
 }

package/src/md/snackbar/internals/Snackbar.ts

@@ -2,7 +2,7 @@ import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
 import { cancelEvent } from '@api-client/core/lib/events/Utils.js'
 import { property } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
-import '../../button/ui-text-button.js'
+import '../../button/ui-button.js'
 import '../../icon-button/ui-icon-button.js'
 import '../../icons/ui-icon.js'
 
@@ -206,7 +206,9 @@ export class Snackbar extends LitElement {
       return nothing
     }
     return html`
-      <ui-text-button class="action" @click="${this.actionHandler}" @action="${cancelEvent}">${action}</ui-text-button>
+      <ui-button color="text" class="action" @click="${this.actionHandler}" @action="${cancelEvent}"
+        >${action}</ui-button
+      >
     `
   }
 

package/src/md/text-field/internals/filled.styles.ts

@@ -6,13 +6,16 @@ export default css`
     --_active-indicator-height: 1px;
     --_focus-active-indicator-color: var(--md-sys-color-primary, #6750a4);
     --_focus-active-indicator-height: 2px;
+    border-radius: var(--md-sys-shape-corner-extra-small-top);
   }
 
   .surface {
     height: 56px;
+    border-radius: inherit;
   }
 
   .container {
+    border-radius: inherit;
     background-color: var(--md-sys-color-surface-variant);
   }
 

package/src/styles/m3/dialog.module.ts

@@ -11,8 +11,8 @@ import { css } from 'lit'
  *    <h3>Title</h3> <!-- h1, h2, or h3 -->
  *    <!-- Any content -->
  *    <div class="dialog-buttons">
- *      <ui-text-button value="cancel" submit>Cancel</ui-text-button>
- *      <ui-text-button value="submit" submit>Create</ui-text-button>
+ *      <ui-button color="text" value="cancel" submit>Cancel</ui-button>
+ *      <ui-button color="text" value="submit" submit>Create</ui-button>
  *    </div>
  *  </form>
  * </dialog>