@api-client/ui 0.5.24 → 0.5.26

package/src/elements/navigation/internals/NavigationItem.styles.ts

@@ -28,6 +28,12 @@ export default css`
     --_state-layer-padding-end: 24px;
   }
 
+  :host([iconOnly]) {
+    width: 40px;
+    --_state-layer-padding-start: 8px;
+    --_state-layer-padding-end: 8px;
+  }
+
   :host([selected]) {
     --_state-layer-color: var(--md-sys-color-secondary-container);
     --_icon-color: var(--md-sys-color-on-secondary-container);
@@ -61,10 +67,15 @@ export default css`
     --md-ripple-pressed-opacity: var(--_pressed-state-layer-opacity);
   }
 
-  .button.icon {
+  .button.icon:not(.button.icon) {
     --_state-layer-padding-start: 16px;
   }
 
+  .button.icon-only {
+    gap: 0;
+    justify-content: center;
+  }
+
   .button:hover {
     color: var(--_hover-icon-color);
   }
@@ -77,6 +88,12 @@ export default css`
     color: var(--_pressed-icon-color);
   }
 
+  .icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   md-focus-ring {
     --md-focus-ring-shape-start-start: var(--_state-layer-shape);
     --md-focus-ring-shape-start-end: var(--_state-layer-shape);

package/src/elements/navigation/internals/NavigationItem.ts

@@ -20,6 +20,12 @@ export default class NavigationItem extends UiElement {
    * @attribute
    */
   @property({ reflect: true, type: Boolean }) accessor selected = false
+  /**
+   * When set, the navigation item is rendered as an icon-only button.
+   * The width of the button is set to 40px.
+   * @attribute
+   */
+  @property({ reflect: true, type: Boolean }) accessor iconOnly = false
 
   /**
    * Determines when the element has an icon in the "icon" slot.
@@ -37,16 +43,16 @@ export default class NavigationItem extends UiElement {
   protected override render(): TemplateResult {
     const { pressed = false } = this
     const containerClasses = classMap({
-      button: true,
-      icon: this.hasIcon,
-      pressed,
+      'button': true,
+      'icon': this.hasIcon,
+      'pressed': pressed,
+      'icon-only': this.iconOnly,
     })
     return html`
       <button class="${containerClasses}" id="button">
         <md-focus-ring part="focus-ring" for="button"></md-focus-ring>
         <md-ripple></md-ripple>
-        ${this.renderIcon()}
-        <slot></slot>
+        ${this.renderIcon()}${this.iconOnly ? '' : html`<slot></slot>`}
       </button>
     `
   }

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

@@ -368,9 +368,10 @@ export default class UiDropdownList extends LitElement {
   }
 
   protected activate(e: Event): void {
-    if (e.defaultPrevented) {
-      return
-    }
+    // if (e.defaultPrevented) {
+    //   We now cancel the event in the menu list
+    //   return
+    // }
     const path = e.composedPath()
     let item: HTMLElement | undefined
     while (!item) {

package/src/md/input/Input.ts

@@ -1,11 +1,11 @@
-import { html, nothing, PropertyValues, TemplateResult } from 'lit'
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from 'lit'
 import { property, queryAssignedElements, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { SupportedAutocapitalize, SupportedAutocomplete, SupportedInputTypes } from '../../types/input.js'
 import { ARIAAutoComplete, ARIAExpanded, ARIARole } from '../../types/role.js'
-import { isDisabled, setDisabled } from '../../lib/disabled.js'
 import { UiElement } from '../UiElement.js'
+import { isDisabled, setDisabled } from '../../lib/disabled.js'
 import '../icon-button/ui-icon-button.js'
 import '../icons/ui-icon.js'
 
@@ -16,6 +16,7 @@ const floatTypes = ['date', 'color', 'datetime-local', 'file', 'month', 'time',
  * @slot suffix - A slot in which to render suffixes of the input
  */
 export default abstract class Input extends UiElement {
+  static override shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
   #_userInteracted: boolean
 
   // static override shadowRootOptions: ShadowRootInit = {mode: 'open', delegatesFocus: true};
@@ -33,28 +34,20 @@ export default abstract class Input extends UiElement {
    */
   @property({ type: String, reflect: true }) accessor type: SupportedInputTypes
 
-  /**
-   * Disables the input.
-   * @attribute
-   */
   get disabled(): boolean {
     return isDisabled(this)
   }
 
+  /**
+   * When set, the input 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)
     this._updateFormValue()
-    if (value) {
-      this.dataset.tabindex = this.getAttribute('tabindex') || '0'
-      this.removeAttribute('tabindex')
-    } else {
-      const index = this.dataset.tabindex || '0'
-      this.setAttribute('tabindex', index)
-      this.blur()
-    }
   }
 
   /**
@@ -433,8 +426,6 @@ export default abstract class Input extends UiElement {
    */
   #showPassword = false
 
-  protected removingTabindex = false
-
   get files(): FileList | null {
     return this.getNativeValue('files') as FileList | null
   }
@@ -750,34 +741,14 @@ export default abstract class Input extends UiElement {
       return
     }
     this.focused = true
-    this.removingTabindex = true
-    // Note, the input is automatically focused when form is being submitted and
-    // it won't pass validation. In this case the form will throw an error
-    // as the input is not focusable. In overall, this still works with forms and validation.
-    if (this.checkNativeValidity()) {
-      this.dataset.tabindex = this.getAttribute('tabindex') || '0'
-      this.removeAttribute('tabindex')
-    }
-    input.focus()
-    this.#_userInteracted = true
-    setTimeout(() => {
-      this.removingTabindex = false
-    }, 1)
   }
 
   protected handleBlur(): void {
-    if (this.matches(':focus-within') || this.removingTabindex) {
+    if (this.matches(':focus-within')) {
       // Changing focus to another child within the text field, like a button
       return
     }
     this.focused = false
-    const index = this.dataset.tabindex || '0'
-    delete this.dataset.tabindex
-    this.setAttribute('tabindex', index)
-  }
-
-  private checkNativeValidity(): boolean {
-    return this.input?.validity.valid ?? true
   }
 
   private checkValidityAndDispatch(): { valid: boolean; canceled: boolean } {

package/src/md/list/internals/List.ts

@@ -28,6 +28,8 @@ export interface UiListItemsChange {
  *                 The `event.detail` object contains the `item` and `index` properties.
  * @fires itemschange - Dispatched when the list items change, e.g. when the slot changes.
  *                The `event.detail` object contains the `items` property with the list of items.
+ * @fires highlightchange - Dispatched when the highlighted item changes.
+ *                The `event.detail` object contains the `items` property with the list of items.
  */
 export default class UiList extends LitElement {
   /**
@@ -311,15 +313,21 @@ export default class UiList extends LitElement {
     this.activateFromEvent(event)
   }
 
-  protected highlightItem(item?: UiListItem | null): void {
+  highlightItem(item?: UiListItem | null): void {
+    if (this.highlightListItem === item) {
+      return
+    }
     if (this.highlightListItem) {
       this.highlightListItem.classList.remove('highlight')
     }
     this.highlightListItem = item || null
     if (this.highlightListItem) {
       this.highlightListItem.classList.add('highlight')
-      this.highlightListItem.scrollIntoView({ block: 'end', inline: 'nearest' })
+      this.highlightListItem.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })
     }
+    this.dispatchEvent(
+      new CustomEvent('highlightchange', { bubbles: false, composed: false, detail: { item: this.highlightListItem } })
+    )
   }
 
   /**
@@ -345,9 +353,8 @@ export default class UiList extends LitElement {
     this.manageSelection(item)
     item.activate()
     this.activeListItem = item
-    if (this.notifySelect(item)) {
-      e.preventDefault()
-    }
+    e.preventDefault()
+    this.notifySelect(item)
   }
 
   /**

package/src/md/menu/internal/Menu.ts

@@ -1,5 +1,5 @@
 import { html, PropertyValues, TemplateResult } from 'lit'
-import { property, state, queryAssignedElements } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { nanoid } from 'nanoid'
 import UiList from '../../list/internals/List.js'
@@ -35,11 +35,6 @@ export default class Menu extends UiList {
    */
   @state() accessor activeSubMenu: UiSubMenu | null = null
 
-  /**
-   * Assigned menu items from light DOM
-   */
-  @queryAssignedElements({ selector: 'ui-menu-item' }) protected accessor assignedMenuItems!: UiMenuItem[]
-
   constructor() {
     super()
     this.selector = 'ui-menu-item'
@@ -79,13 +74,28 @@ export default class Menu extends UiList {
     return result
   }
 
+  protected queryMenuItems(): UiMenuItem[] {
+    const slot = this.shadowRoot?.querySelector('slot')
+    if (!slot) return []
+    const { selector } = this
+    return Array.from(slot.assignedElements({ flatten: true })).filter((el) => el.matches(selector)) as UiMenuItem[]
+  }
+
+  show(): void {
+    this.showPopover()
+  }
+
+  hide(): void {
+    this.hidePopover()
+  }
+
   /**
    * Shows the menu
    */
-  show(): void {
+  override showPopover(): void {
     this.tabIndex = 0 // Make menu focusable
     this.ariaExpanded = 'true'
-    this.showPopover()
+    super.showPopover()
     this.open = true
     this.positionMenu()
     this.focus()
@@ -95,10 +105,10 @@ export default class Menu extends UiList {
   /**
    * Hides the menu
    */
-  hide(): void {
+  override hidePopover(): void {
     this.tabIndex = -1
     this.ariaExpanded = 'false'
-    this.hidePopover()
+    super.hidePopover()
     this.open = false
     this.closeSubMenu()
     this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))
@@ -215,13 +225,10 @@ export default class Menu extends UiList {
     subMenu?.addEventListener('select', this.handleSubMenuSelect as EventListener)
   }
 
-  override notifySelect(item: UiListItem, index?: number): boolean {
+  override notifySelect(item: UiListItem & { selected?: boolean }, index?: number): boolean {
     // Handle single selection
-    if (item instanceof UiMenuItem) {
-      this.clearSelection()
-      item.selected = true
-    }
-
+    this.clearSelection()
+    item.selected = true
     this.hide()
     return super.notifySelect(item, index)
   }
@@ -230,7 +237,8 @@ export default class Menu extends UiList {
    * Clears selection from all menu items
    */
   protected clearSelection(): void {
-    this.assignedMenuItems.forEach((menuItem) => {
+    const items = this.queryMenuItems()
+    items.forEach((menuItem) => {
       menuItem.selected = false
     })
   }
@@ -239,7 +247,8 @@ export default class Menu extends UiList {
    * Gets the currently selected menu item
    */
   get selectedItem(): UiMenuItem | null {
-    return this.assignedMenuItems.find((item) => item.selected) || null
+    const items = this.queryMenuItems()
+    return items.find((item) => item.selected) || null
   }
 
   /**

package/src/md/select/index.ts

@@ -0,0 +1,3 @@
+export { UiSelectElement } from './ui-select.js'
+export { UiOptionElement } from './ui-option.js'
+export type { UiListItemsChange, UiListSelection } from '../list/internals/List.js'

package/src/md/select/internals/Option.styles.ts

@@ -0,0 +1,139 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: block;
+    height: 56px;
+    outline: none;
+    cursor: default;
+    position: relative;
+
+    --md-focus-ring-shape-end-end: 0px;
+    --md-focus-ring-shape-end-start: 0px;
+    --md-focus-ring-shape-start-end: 0px;
+    --md-focus-ring-shape-start-start: 0px;
+
+    color: var(--md-sys-color-on-surface);
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .surface {
+    height: inherit;
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    padding: 8px 16px 8px 16px;
+    gap: 12px;
+  }
+
+  .surface.selected {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  .ripple {
+    z-index: 3;
+  }
+
+  .headline {
+    font-family: var(--md-sys-typescale-body-large-font);
+    font-weight: var(--md-sys-typescale-body-large-weight);
+    font-size: var(--md-sys-typescale-body-large-size);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    line-height: var(--md-sys-typescale-body-large-height);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    display: flex;
+    align-items: center;
+  }
+
+  .supporting-text {
+    color: var(--md-sys-color-on-surface-variant);
+
+    font-family: var(--md-sys-typescale-body-medium-font);
+    font-weight: var(--md-sys-typescale-body-medium-weight);
+    font-size: var(--md-sys-typescale-body-medium-size);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    line-height: var(--md-sys-typescale-body-medium-height);
+
+    overflow: hidden;
+  }
+
+  .supporting-text ::slotted(*),
+  slot[name='end-text']::slotted(*) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  slot[name='end-text']::slotted(*) {
+    margin-right: 8px;
+    margin-left: 16px;
+  }
+
+  :host slot[name='end']::slotted(*) {
+    color: var(--md-sys-color-on-surface-variant);
+    fill: var(--md-sys-color-on-surface-variant);
+    margin-left: 16px;
+  }
+
+  :host slot[name='start']::slotted(*) {
+    display: block;
+    margin-right: 16px;
+  }
+
+  :host([image='icon']) slot[name='start']::slotted(*) {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([image='avatar']) slot[name='start']::slotted(*) {
+    width: 40px;
+    height: 40px;
+  }
+
+  :host([image='image']) slot[name='start']::slotted(*) {
+    width: 56px;
+    height: 56px;
+  }
+
+  :host([image='video']) slot[name='start']::slotted(*) {
+    width: 114px;
+    height: 64px;
+  }
+
+  .body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .end {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .selection-icon {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  :host(.highlight) .surface {
+    background-color: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+  }
+`

package/src/md/select/internals/Option.ts

@@ -0,0 +1,210 @@
+import { html, PropertyValues, TemplateResult } from 'lit'
+import { property } from 'lit/decorators.js'
+import { classMap } from 'lit/directives/class-map.js'
+import UiListItem from '../../list/internals/ListItem.js'
+import { nanoid } from 'nanoid'
+
+/**
+ * Material Design 3 Select Option component.
+ *
+ * The `ui-option` component represents a selectable item within a `ui-select` dropdown.
+ * It extends `UiListItem` to provide consistent styling and behavior with other list components.
+ *
+ * @slot - The option content (label, icon, etc.)
+ * @slot start - Content to display at the start of the option (icon, avatar, etc.)
+ * @slot end - Content to display at the end of the option
+ * @slot supporting-text - Supporting text below the main content
+ * @fires select - Dispatched when the option is selected. Contains `{ item: UiOption, value: string }` in detail
+ *
+ * @example
+ * Basic option
+ * ```html
+ * <ui-option value="apple">Apple</ui-option>
+ * ```
+ *
+ * @example
+ * Option with supporting text
+ * ```html
+ * <ui-option value="john" lines="two">
+ *   John Doe
+ *   <span slot="supporting-text">john@example.com</span>
+ * </ui-option>
+ * ```
+ */
+export default class UiOption extends UiListItem {
+  /**
+   * The value associated with this option. Used to identify the option when selected.
+   * This value is what gets set on the parent select element when this option is chosen.
+   *
+   * @example
+   * ```html
+   * <ui-option value="apple">Apple</ui-option>
+   * <ui-option value="banana">Banana</ui-option>
+   * ```
+   */
+  @property({ type: String, reflect: true }) accessor value: string | undefined
+
+  /**
+   * Whether this option is currently selected. This is typically managed automatically
+   * by the parent select component, but can be set manually for styling purposes.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <ui-option value="apple" selected>Apple</ui-option>
+   * ```
+   */
+  @property({ type: Boolean, reflect: true }) accessor selected = false
+
+  /**
+   * Returns the text representation of this option for display purposes.
+   * This method extracts and combines text content from all child nodes,
+   * including special handling for ui-icon elements.
+   *
+   * @readonly
+   * @returns {string} The rendered text value of the option
+   * @example
+   * ```javascript
+   * const option = document.querySelector('ui-option');
+   * console.log('Option text:', option.renderValue);
+   * ```
+   */
+  get renderValue(): string {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')
+    if (!slot) return this.value || ''
+    const nodes = slot.assignedNodes({ flatten: true })
+    const content: string[] = []
+    for (const node of nodes) {
+      if (node.nodeType === Node.TEXT_NODE) {
+        content.push(node.textContent || '')
+      } else if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as HTMLElement
+        if (element.tagName.toLowerCase() === 'ui-icon') {
+          content.push(element.getAttribute('icon') || '')
+        } else {
+          content.push(element.textContent || '')
+        }
+      }
+    }
+    return content.join(' ').trim() || this.value || ''
+  }
+
+  /**
+   * Initializes the option when it's connected to the DOM. Sets up ARIA attributes
+   * and generates a unique ID if one isn't provided.
+   *
+   * @protected
+   */
+  override connectedCallback(): void {
+    super.connectedCallback()
+    this.setAttribute('role', 'option')
+    if (!this.id) {
+      this.id = `option-${nanoid(6)}`
+    }
+  }
+
+  /**
+   * Handles property updates and triggers appropriate side effects.
+   * Currently monitors the `selected` property to update selection state.
+   *
+   * @param {PropertyValues<this>} changedProperties - Map of changed properties
+   * @protected
+   */
+  protected override updated(changedProperties: PropertyValues<this>): void {
+    super.updated(changedProperties)
+
+    if (changedProperties.has('selected')) {
+      this.updateSelectionState()
+    }
+  }
+
+  /**
+   * Updates the visual and accessibility state when selection changes.
+   * Adds/removes CSS classes and ARIA attributes based on selection state.
+   *
+   * @protected
+   * @example
+   * ```javascript
+   * // This is called automatically when the selected property changes
+   * option.selected = true; // Will trigger updateSelectionState()
+   * ```
+   */
+  protected updateSelectionState(): void {
+    if (this.selected) {
+      this.classList.add('selected')
+      this.setAttribute('aria-selected', 'true')
+    } else {
+      this.classList.remove('selected')
+      this.setAttribute('aria-selected', 'false')
+    }
+  }
+
+  /**
+   * Handles click events on the option. Prevents default behavior and dispatches
+   * a custom 'select' event that the parent select component can listen to.
+   *
+   * @param {MouseEvent} e - The click event
+   * @protected
+   * @fires select - Custom event with option details in event.detail
+   * @example
+   * ```javascript
+   * // Listen for option selection
+   * option.addEventListener('select', (e) => {
+   *   console.log('Selected option:', e.detail.item);
+   *   console.log('Selected value:', e.detail.value);
+   * });
+   * ```
+   */
+  override handleClick(e: MouseEvent): void {
+    e.preventDefault()
+    if (this.disabled) {
+      e.stopPropagation()
+      return
+    }
+
+    // Let the parent handle the selection
+    this.dispatchEvent(
+      new CustomEvent('select', {
+        detail: {
+          item: this,
+          value: this.value,
+        },
+        bubbles: true,
+        composed: true,
+      })
+    )
+  }
+
+  /**
+   * Renders the option's template. Creates the main structure with focus ring,
+   * ripple effect, and content areas.
+   *
+   * @returns {TemplateResult} The rendered template
+   * @protected
+   */
+  protected override render(): TemplateResult {
+    const surfaceClasses = classMap({
+      surface: true,
+      selected: this.selected,
+    })
+
+    return html`
+      ${this.renderFocusRing()} ${this.renderRipple()}
+      <div class="${surfaceClasses}">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
+    `
+  }
+
+  /**
+   * Renders the end section of the option, including the selection check icon
+   * when the option is selected.
+   */
+  protected override renderEnd(): TemplateResult {
+    return html`
+      <div class="end">
+        ${this.selected ? html`<ui-icon icon="check" class="selection-icon"></ui-icon>` : ''}
+        <slot name="end" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="end-text" class="trailing-supporting-text"></slot>
+      </div>
+    `
+  }
+}