@api-client/ui 0.5.23 → 0.5.25

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

@@ -29,9 +29,47 @@ export default css`
 
   :host(:popover-open) {
     display: block;
-    background-color: var(--md-sys-color-surface-container-low);
+    background-color: var(--md-sys-color-surface-container);
     border-radius: var(--md-sys-shape-corner-extra-small);
     box-shadow: var(--md-sys-elevation-3);
+    animation: menu-scale-in 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  /* Scale animation for menus positioned below the anchor */
+  @keyframes menu-scale-in {
+    0% {
+      transform: scaleY(0);
+      transform-origin: top center;
+      opacity: 0;
+    }
+    100% {
+      transform: scaleY(1);
+      transform-origin: top center;
+      opacity: 1;
+    }
+  }
+
+  /* Scale animation for menus positioned above the anchor */
+  @keyframes menu-scale-in-up {
+    0% {
+      transform: scaleY(0);
+      transform-origin: bottom center;
+      opacity: 0;
+    }
+    100% {
+      transform: scaleY(1);
+      transform-origin: bottom center;
+      opacity: 1;
+    }
+  }
+
+  /* Position-specific animations using JavaScript-detected classes */
+  :host(.menu-positioned-above):popover-open {
+    animation: menu-scale-in-up 0.15s var(--md-sys-motion-easing-standard-accelerate) forwards;
+  }
+
+  :host(.menu-positioned-below):popover-open {
+    animation: menu-scale-in 0.15s var(--md-sys-motion-easing-standard-accelerate) forwards;
   }
 
   .menu-container {
@@ -142,6 +180,21 @@ export default css`
     max-width: 320px;
     padding: 8px 0;
     z-index: 1000;
+    animation: submenu-scale-in 0.12s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+
+  /* Submenu scale animation */
+  @keyframes submenu-scale-in {
+    0% {
+      transform: scaleY(0) scaleX(0.8);
+      transform-origin: left top;
+      opacity: 0;
+    }
+    100% {
+      transform: scaleY(1) scaleX(1);
+      transform-origin: left top;
+      opacity: 1;
+    }
   }
 
   /* Fallback positioning for browsers without anchor positioning */
@@ -197,5 +250,17 @@ export default css`
     .menu-item {
       transition: none;
     }
+
+    :host(:popover-open) {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
+
+    ui-sub-menu:popover-open {
+      animation: none;
+      opacity: 1;
+      transform: none;
+    }
   }
 `

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 }))
@@ -115,6 +125,20 @@ export default class Menu extends UiList {
     this.style.removeProperty('position-area')
     this.style.removeProperty('max-height')
 
+    // Detect if menu is positioned above or below the anchor
+    // by checking if the menu is in the upper or lower half of the viewport
+    const viewportMiddle = innerHeight / 2
+    const isMenuInUpperHalf = box.top < viewportMiddle
+
+    // Add CSS class to control animation direction
+    if (isMenuInUpperHalf) {
+      this.classList.add('menu-positioned-above')
+      this.classList.remove('menu-positioned-below')
+    } else {
+      this.classList.add('menu-positioned-below')
+      this.classList.remove('menu-positioned-above')
+    }
+
     // Only set max-height if the menu would overflow
     if (menuBottom > innerHeight) {
       const availableHeight = innerHeight - box.top
@@ -201,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)
   }
@@ -216,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
     })
   }
@@ -225,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>
+    `
+  }
+}

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

@@ -0,0 +1,22 @@
+import { css } from 'lit'
+
+export default css`
+  :host {
+    display: inline-block;
+    position: relative;
+    outline: none;
+    --md-focus-ring-shape-end-end: var(--md-sys-shape-corner-extra-small);
+    --md-focus-ring-shape-end-start: var(--md-sys-shape-corner-extra-small);
+    --md-focus-ring-shape-start-end: var(--md-sys-shape-corner-extra-small);
+    --md-focus-ring-shape-start-start: var(--md-sys-shape-corner-extra-small);
+  }
+
+  .input {
+    anchor-name: --input;
+    cursor: default;
+  }
+
+  .menu {
+    position-anchor: --input;
+  }
+`