npm - @api-client/ui - Versions diffs - 0.2.10 → 0.2.11 - Mend

@api-client/ui 0.2.10 → 0.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/demo/md/listbox/listbox.html ADDED Viewed

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en-GB">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+  <title>UI listbox</title>
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
+  <link href="../../../src/styles/m3/tokens.css" rel="stylesheet" type="text/css" />
+  <link href="../../../src/styles/m3/theme.css" rel="stylesheet" type="text/css" />
+  <style>
+    .demo-row {
+      margin: 20px 0;
+    }
+    .button-in-lists {
+      display: inline-block;
+      vertical-align: top;
+      width: 48px;
+      height: 48px;
+      overflow: hidden;
+      margin-right: 40px;;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/.tmp/demo/md/listbox/listbox.js"></script>
+</body>
+</html>

package/demo/md/listbox/listbox.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import { html, TemplateResult } from 'lit'
+import { DemoPage } from '../../../src/demo/DemoPage.js'
+import '../../../src/md/listbox/ui-listbox.js'
+import '../../../src/md/list/ui-list-item.js'
+class ComponentDemoPage extends DemoPage {
+  override accessor componentName = 'UI listbox'
+  contentTemplate(): TemplateResult {
+    return html`
+      <a href="../">Back</a>
+      <section class="demo-section">
+        <h2 class="title-large">Listbox</h2>
+        <ui-listbox>
+          <ui-list-item role="menuitem" data-item="item 1">Item 1</ui-list-item>
+          <ui-list-item role="menuitem" data-item="item 2">Item 2</ui-list-item>
+          <ui-list-item role="menuitem" data-item="item 3">Item 3</ui-list-item>
+          <ui-list-item role="menuitem" data-item="item 4">Item 4</ui-list-item>
+        </ui-listbox>
+      </section>
+    `
+  }
+}
+const instance = new ComponentDemoPage()
+instance.render()

package/demo/md/{buttons/segmented-buttons.html → segmented-button/index.html} RENAMED Viewed

@@ -16,6 +16,6 @@
 <body>
   <div id="app"></div>
-  <script type="module" src="/.tmp/demo/md/buttons/segmented-buttons.js"></script>
+  <script type="module" src="/.tmp/demo/md/segmented-button/index.js"></script>
 </body>
 </html>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

package/src/md/UiElement.ts CHANGED Viewed

@@ -104,6 +104,14 @@ export abstract class UiElement extends LitElement implements ActionControllerHo
     this.actionController.pointerLeave(e)
   }
+  /**
+   * Subclasses should add this method as an event handler on the interactive
+   * template element with `@pointerenter="${this.handlePointerEnter}"`
+   */
+  handlePointerEnter(e: PointerEvent): void {
+    // this.actionController.pointerEnter(e)
+  }
   /**
    * Hook method for the ActionController.
    * Subclasses should add this method as an event handler on the interactive

package/src/md/button/ui-elevated-button.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import base from './internals/button-styles.js'
 import styles from './internals/elevated-button.styles.js'
 /**
- * @attrbite {string} form
+ * @attribute form
  */
 @customElement('ui-elevated-button')
 export class UiElevatedButtonElement extends Element {

package/src/md/button/ui-filled-button.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import base from './internals/button-styles.js'
 import styles from './internals/filled-button.styles.js'
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 @customElement('ui-filled-button')
 export class UiFilledButtonElement extends Element {

package/src/md/button/ui-filled-tonal-button.ts CHANGED Viewed

@@ -5,15 +5,15 @@ import base from './internals/button-styles.js'
 import styles from './internals/filled-tonal-button.styles.js'
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 @customElement('ui-filled-tonal-button')
-export class UiFilltedButtonElement extends Element {
+export class UiFilledButtonElement extends Element {
   static override styles: CSSResultOrNative[] = [base, styles]
 }
 declare global {
   interface HTMLElementTagNameMap {
-    'ui-filled-tonal-button': UiFilltedButtonElement
+    'ui-filled-tonal-button': UiFilledButtonElement
   }
 }

package/src/md/button/ui-outlined-button.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import base from './internals/button-styles.js'
 import styles from './internals/outlined-button.styles.js'
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 @customElement('ui-outlined-button')
 export class UiOutlinedButtonElement extends Element {

package/src/md/button/ui-text-button.ts CHANGED Viewed

@@ -5,7 +5,7 @@ import base from './internals/button-styles.js'
 import styles from './internals/text-button.styles.js'
 /**
- * @attrbite {string} form
+ * @attribute {string} form
  */
 @customElement('ui-text-button')
 export class UiTextButtonElement extends Element {

package/src/md/checkbox/internals/Checkbox.styles.ts CHANGED Viewed

@@ -7,29 +7,44 @@ export default css`
     outline: none;
     -webkit-tap-highlight-color: transparent;
+    position: relative;
     --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
+    --_container-border-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 2px;
+    --_container-background-color: transparent;
+    --_container-opacity: 1;
+    --_check-mark-color: currentColor;
+    --_checkbox-width: 18px;
+    --_checkbox-height: 18px;
+    --_state-width: 40px;
+    --_state-height: 40px;
   }
   .surface {
     position: relative;
-    min-width: 40px;
-    height: 40px;
+    min-width: var(--_state-width);
+    height: var(--_state-height);
     display: flex;
     align-items: center;
   }
   .container {
     border-radius: 2px;
-    border: 2px var(--md-sys-color-on-surface) solid;
-    background-color: transparent;
+    border: var(--_container-border-width) var(--_container-border-color) solid;
+    background-color: var(--_container-background-color);
+    opacity: var(--_container-opacity);
     position: absolute;
     inset: 11px 0px 0px 11px;
-    width: 18px;
-    height: 18px;
+    width: var(--_checkbox-width);
+    height: var(--_checkbox-height);
     box-sizing: border-box;
@@ -40,22 +55,23 @@ export default css`
   }
   .icon {
-    width: 18px;
-    height: 18px;
+    width: var(--_checkbox-width);
+    height: var(--_checkbox-height);
     position: absolute;
     inset: 11px 0 0 11px;
   }
   .icon > svg {
-    width: 18px !important;
-    height: 18px !important;
+    width: var(--_checkbox-width) !important;
+    height: var(--_checkbox-height) !important;
+    fill: var(--_check-mark-color);
   }
   .state {
     position: absolute;
     inset: 0;
-    width: 40px;
-    height: 40px;
+    width: var(--_state-width);
+    height: var(--_state-height);
     border-radius: var(--md-sys-shape-corner-full);
   }
@@ -64,222 +80,45 @@ export default css`
     z-index: 3;
   }
-  :host([checked]) .container,
-  :host([indeterminate]) .container {
-    border-width: 0px;
-    background-color: var(--md-sys-color-primary);
-  }
-  :host([checked]) .icon > svg,
-  :host([indeterminate]) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-  /* Invalid state */
-  :host([invalid]) .container {
-    border-color: var(--md-sys-color-error);
-  }
-  :host([checked][invalid]) .container,
-  :host([indeterminate][invalid]) .container {
-    border-color: transparent;
-    background-color: var(--md-sys-color-error);
-  }
-  :host([checked][invalid]) .icon > svg,
-  :host([indeterminate][invalid]) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-  /* Disabled state */
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  :host([disabled]) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-    opacity: 38%;
+  :host([checked]) {
+    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
+    --md-ripple-pressed-state-layer-color: var(--md-sys-color-on-surface);
   }
-  :host([checked][disabled]) .container,
-  :host([indeterminate][disabled]) .container {
-    background-color: var(--md-sys-color-on-surface);
-    border-width: 0;
-    opacity: 38%;
+  :host([checked]),
+  :host([indeterminate]) {
+    --_container-border-width: 0px;
+    --_container-background-color: var(--md-sys-color-primary);
+    --_check-mark-color: var(--md-sys-color-on-primary);
   }
-  :host([checked][disabled]) .icon > svg,
-  :host([indeterminate][disabled]) .icon > svg {
-    fill: var(--md-sys-color-surface);
-  }
-  /* Hover state */
-  /* :host(:hover) .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-  /* :host([checked]:hover) .state,
-:host([indeterminate]:hover) .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-  :host(:hover) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-  :host([checked]:hover) .container,
-  :host([indeterminate]:hover) .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-  :host(:hover) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-  :host([invalid]:hover) {
+  :host([invalid]) {
     --md-ripple-hover-state-layer-color: var(--md-sys-color-error);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-error);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-error);
+    --_container-border-color: var(--md-sys-color-error);
   }
-  /* :host([invalid]:hover) .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-hover-state-layer-opacity);
-} */
-  :host([invalid]:hover) .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
+  :host([checked][invalid]),
+  :host([indeterminate][invalid]) {
+    --_check-mark-color: var(--md-sys-color-on-error);
+    --_container-border-color: transparent;
+    --_container-background-color: var(--md-sys-color-error);
   }
-  :host([checked][invalid]:hover) .container,
-  :host([indeterminate][invalid]:hover) .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
-  }
-  :host([checked][invalid]:hover) .icon > svg,
-  :host([indeterminate][invalid]:hover) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-  /* Focus state */
-  /* :host(:focus) .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-}
-:host([checked]:focus) .state,
-:host([indeterminate]:focus) .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-} */
-  :host(:focus) .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-  :host([checked]:focus) .container,
-  :host([indeterminate]:focus) .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-  :host(:focus) .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-  /* :host([invalid]:focus) .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-focus-state-layer-opacity);
-} */
-  :host([invalid]:focus) .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
-  }
-  :host([checked][invalid]:focus) .container,
-  :host([indeterminate][invalid]:focus) .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
-  }
-  :host([checked][invalid]:focus) .icon > svg,
-  :host([indeterminate][invalid]:focus) .icon > svg {
-    fill: var(--md-sys-color-on-error);
-  }
-  /* Pressed state */
-  /* :host(:active) .state,
-:host .pressed .state {
-  background-color: var(--md-sys-color-primary);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-}
-:host([checked]:active) .state,
-:host([checked]) .pressed .state,
-:host([indeterminate]:active) .state,
-:host([indeterminate]) .pressed .state {
-  background-color: var(--md-sys-color-on-surface);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-} */
-  :host(:active) .container,
-  :host .pressed .container {
-    border-color: var(--md-sys-color-on-surface);
-    border-width: 2px;
-  }
-  :host([checked]:active) .container,
-  :host([checked]) .pressed .container,
-  :host([indeterminate]:active) .container,
-  :host([indeterminate]) .pressed .container {
-    background-color: var(--md-sys-color-primary);
-    border-width: 0px;
-  }
-  :host([checked]:active) .icon > svg,
-  :host([checked]) .pressed .icon > svg,
-  :host([indeterminate]:active) .icon > svg,
-  :host([indeterminate]) .pressed .icon > svg {
-    fill: var(--md-sys-color-on-primary);
-  }
-  /* :host([invalid]:active) .state,
-:host([invalid]) .pressed .state {
-  background-color: var(--md-sys-color-error);
-  opacity: var(--md-sys-state-pressed-state-layer-opacity);
-} */
-  :host([invalid]:active) .container,
-  :host([invalid]) .pressed .container {
-    border-color: var(--md-sys-color-error);
-    border-width: 2px;
-  }
-  :host([checked][invalid]:active) .container,
-  :host([checked][invalid]) .pressed .container,
-  :host([indeterminate][invalid]:active) .container :host([indeterminate][invalid]) .pressed .container {
-    background-color: var(--md-sys-color-error);
-    border-width: 0px;
+  :host([disabled]) {
+    pointer-events: none;
+    --_check-mark-color: var(--md-sys-color-surface);
+    --_container-border-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 2px;
+    --_container-opacity: 38%;
   }
-  :host([checked][invalid]:active) .icon > svg,
-  :host([checked][invalid]) .pressed .icon > svg,
-  :host([indeterminate][invalid]:active) .icon > svg,
-  :host([indeterminate][invalid]) .pressed .icon > svg {
-    fill: var(--md-sys-color-on-error);
+  :host([checked][disabled]),
+  :host([indeterminate][disabled]) {
+    --_container-background-color: var(--md-sys-color-on-surface);
+    --_container-border-width: 0;
+    --_container-opacity: 38%;
   }
 `

package/src/md/checkbox/internals/CheckboxElement.ts CHANGED Viewed

@@ -1,12 +1,13 @@
 import { html, SVGTemplateResult, TemplateResult, nothing } from 'lit'
-import { queryAsync, state } from 'lit/decorators.js'
+import { query } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
-import { when } from 'lit/directives/when.js'
 import CheckedElement from './CheckedElement.js'
 import { check, checkIndeterminate } from '../../icons/Icons.js'
-import { ripple } from '../../effects/rippleDirective.js'
-import UiRipple from '../../ripple/internals/ripple.js'
+import type UiRipple from '../../ripple/internals/ripple.js'
+import type { BeginPressConfig, EndPressConfig } from '../../../controllers/ActionController.js'
 import '../../ripple/ui-ripple.js'
+import '@material/web/focus/md-focus-ring.js'
 export default class CheckboxElement extends CheckedElement {
   protected get _icon(): SVGTemplateResult | typeof nothing {
@@ -20,38 +21,54 @@ export default class CheckboxElement extends CheckedElement {
     return nothing
   }
-  @queryAsync('ui-ripple') protected accessor ripple!: Promise<UiRipple | null>
+  @query('ui-ripple') protected accessor ripple!: UiRipple | null
-  @state() protected accessor showRipple = false
+  protected pressRipple(options: BeginPressConfig): void {
+    const element = this.ripple
+    if (element && !element.isPressed) {
+      element.beginPress(options.positionEvent as PointerEvent)
+    }
+  }
-  protected readonly getRipple = (): Promise<UiRipple | null> => {
-    this.showRipple = true
-    return this.ripple
+  protected endRipple(): void {
+    this.ripple?.endPress()
   }
-  protected override async handleFocus(): Promise<void> {
-    const _ripple = await this.getRipple()
-    _ripple?.beginFocus()
+  override beginPress(options: BeginPressConfig): void {
+    super.beginPress(options)
+    this.pressRipple(options)
   }
-  protected override async handleBlur(): Promise<void> {
-    const _ripple = await this.getRipple()
-    _ripple?.endFocus()
+  override endPress(config: EndPressConfig): void {
+    super.endPress(config)
+    this.endRipple()
   }
   override async handleKeyDown(e: KeyboardEvent): Promise<void> {
     super.handleKeyDown(e)
     if (['Space'].includes(e.code)) {
-      const _ripple = await this.getRipple()
-      _ripple?.beginPress()
+      this.ripple?.beginPress()
     }
   }
   override async handleKeyUp(e: KeyboardEvent): Promise<void> {
     super.handleKeyUp(e)
     if (['Space'].includes(e.code)) {
-      const _ripple = await this.getRipple()
-      _ripple?.endPress()
+      this.ripple?.endPress()
+    }
+  }
+  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()
     }
   }
@@ -62,17 +79,13 @@ export default class CheckboxElement extends CheckedElement {
       pressed,
     })
     return html`
-      <div class="${containerClasses}" ${ripple(this.getRipple)}>
+      <md-focus-ring part="focus-ring" .control="${this as HTMLElement}"></md-focus-ring>
+      <div class="${containerClasses}">
         <div class="container"></div>
         <div class="state"></div>
-        ${when(this.showRipple, this.renderRipple)}
+        <ui-ripple class="ripple" unbounded ?disabled="${this.disabled}"></ui-ripple>
         <div class="icon">${this._icon}</div>
       </div>
     `
   }
-  protected renderRipple = (): TemplateResult => {
-    const { disabled } = this
-    return html`<ui-ripple class="ripple" unbounded ?disabled="${disabled}"></ui-ripple>`
-  }
 }

package/src/md/checkbox/internals/CheckedElement.ts CHANGED Viewed

@@ -104,6 +104,7 @@ export default class CheckedElement extends UiElement {
     this.addEventListener('pointerdown', this.handlePointerDown.bind(this))
     this.addEventListener('pointerup', this.handlePointerUp.bind(this))
     this.addEventListener('pointercancel', this.handlePointerCancel.bind(this))
+    this.addEventListener('pointerenter', this.handlePointerEnter.bind(this))
     this.addEventListener('pointerleave', this.handlePointerLeave.bind(this))
     this.addEventListener('contextmenu', this.handleContextMenu.bind(this))
     this.addEventListener('keydown', this.handleKeyDown.bind(this))