@api-client/ui 0.5.21 → 0.5.23

package/demo/md/menu/index.ts

@@ -1,6 +1,7 @@
 import { html, TemplateResult } from 'lit'
 import { DemoPage } from '../../../src/demo/DemoPage.js'
 import reactive from '../../../src/decorators/reactive.js'
+import type { UiMenuItemElement } from '../../../src/md/menu/ui-menu-item.js'
 
 import '../../../src/md/menu/ui-menu.js'
 import '../../../src/md/menu/ui-sub-menu.js'
@@ -17,6 +18,11 @@ class ComponentDemoPage extends DemoPage {
   @reactive() accessor nestedCount = 0
   @reactive() accessor overflowMenuOutput = ''
   @reactive() accessor overflowCount = 0
+  @reactive() accessor selectedOption = ''
+  @reactive() accessor iconMenuSelectOutput = ''
+  @reactive() accessor iconMenuSelectedOption = 'Premium'
+  @reactive() accessor autoCheckMenuOutput = ''
+  @reactive() accessor autoCheckSelectedOption = 'High'
 
   handleBasicMenuSelect(e: CustomEvent): void {
     const item = e.detail.item as HTMLElement
@@ -39,8 +45,37 @@ class ComponentDemoPage extends DemoPage {
     this.overflowCount++
   }
 
+  handleSelectionMenuSelect(e: CustomEvent): void {
+    const item = e.detail.item as HTMLElement
+    this.selectedOption = item.textContent?.trim() || ''
+  }
+
+  handleIconSelectMenuSelect(e: CustomEvent): void {
+    const item = e.detail.item as UiMenuItemElement
+    this.iconMenuSelectedOption = item.value || ''
+    this.iconMenuSelectOutput = `Selected: ${this.iconMenuSelectedOption}`
+  }
+
+  handleAutoCheckMenuSelect(e: CustomEvent): void {
+    const item = e.detail.item as HTMLElement
+    this.autoCheckSelectedOption = item.textContent?.trim() || ''
+    this.autoCheckMenuOutput = `Selected: ${this.autoCheckSelectedOption}`
+  }
+
   contentTemplate(): TemplateResult {
-    const { basicMenuOutput, nestedMenuOutput, nestedCount, basicCount, overflowMenuOutput, overflowCount } = this
+    const {
+      basicMenuOutput,
+      nestedMenuOutput,
+      nestedCount,
+      basicCount,
+      overflowMenuOutput,
+      overflowCount,
+      selectedOption,
+      iconMenuSelectOutput,
+      iconMenuSelectedOption,
+      autoCheckMenuOutput,
+      autoCheckSelectedOption,
+    } = this
     return html`
       <a href="../">Back</a>
 
@@ -361,6 +396,116 @@ class ComponentDemoPage extends DemoPage {
               <p>Count: ${nestedCount}</p>`
           : ''}
       </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Selection Menu</h2>
+        <p>A menu that allows selection of options:</p>
+        <ui-button id="selection-menu-trigger" color="filled" popovertarget="selection-menu"
+          >Open Selection Menu</ui-button
+        >
+        <ui-menu id="selection-menu" popover="auto" @select="${this.handleSelectionMenuSelect}">
+          <ui-menu-item data-value="option1" ?selected="${selectedOption === 'Option 1'}">
+            ${selectedOption === 'Option 1' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
+            <span>Option 1</span>
+          </ui-menu-item>
+          <ui-menu-item data-value="option2" ?selected="${selectedOption === 'Option 2'}">
+            ${selectedOption === 'Option 2' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
+            <span>Option 2</span>
+          </ui-menu-item>
+          <ui-menu-item data-value="option3" ?selected="${selectedOption === 'Option 3'}">
+            ${selectedOption === 'Option 3' ? html`<span slot="start"><ui-icon>check</ui-icon></span>` : ''}
+            <span>Option 3</span>
+          </ui-menu-item>
+        </ui-menu>
+        ${selectedOption ? html`<p>Selected: ${selectedOption}</p>` : ''}
+      </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Menu with Selection and icons</h2>
+        <p>
+          A menu that maintains selection state. Select an option and reopen the menu to see the selection preserved:
+        </p>
+        <ui-button id="single-select-menu-trigger" color="filled" popovertarget="single-select-menu">
+          Select Option: ${iconMenuSelectedOption || 'None'}
+        </ui-button>
+        <ui-menu id="single-select-menu" popover="auto" @select="${this.handleIconSelectMenuSelect}">
+          <ui-menu-item value="premium" showSelectionIcon ?selected="${iconMenuSelectedOption === 'premium'}">
+            <span slot="start"><ui-icon>star</ui-icon></span>
+            <span>Premium</span>
+          </ui-menu-item>
+          <ui-menu-item value="standard" showSelectionIcon ?selected="${iconMenuSelectedOption === 'standard'}">
+            <span slot="start"><ui-icon>account_circle</ui-icon></span>
+            <span>Standard</span>
+          </ui-menu-item>
+          <ui-menu-item value="basic" showSelectionIcon ?selected="${iconMenuSelectedOption === 'basic'}">
+            <span slot="start"><ui-icon>public</ui-icon></span>
+            <span>Basic</span>
+          </ui-menu-item>
+        </ui-menu>
+        ${iconMenuSelectOutput ? html`<p>${iconMenuSelectOutput}</p>` : ''}
+      </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Menu with Auto-Check Icons</h2>
+        <p>
+          A menu that automatically shows check icons for selected items when the
+          <code>show-selection-icon</code> attribute is used:
+        </p>
+        <ui-button id="auto-check-menu-trigger" color="filled" popovertarget="auto-check-menu">
+          Priority: ${autoCheckSelectedOption || 'None'}
+        </ui-button>
+        <ui-menu id="auto-check-menu" popover="auto" @select="${this.handleAutoCheckMenuSelect}">
+          <ui-menu-item showSelectionIcon>
+            <span>Low</span>
+          </ui-menu-item>
+          <ui-menu-item showSelectionIcon selected>
+            <span>High</span>
+          </ui-menu-item>
+          <ui-menu-item showSelectionIcon>
+            <span>Critical</span>
+          </ui-menu-item>
+        </ui-menu>
+        ${autoCheckMenuOutput ? html`<p>${autoCheckMenuOutput}</p>` : ''}
+      </section>
+
+      <section class="demo-section">
+        <h2 class="title-large">Edge Positioning Test</h2>
+        <p>Test menu positioning at screen edges:</p>
+        <div style="display: flex; justify-content: space-between; margin: 20px 0;">
+          <ui-button id="left-edge-menu-trigger" color="filled" popovertarget="left-edge-menu">Left Edge</ui-button>
+          <ui-button id="right-edge-menu-trigger" color="filled" popovertarget="right-edge-menu">Right Edge</ui-button>
+        </div>
+
+        <ui-menu id="left-edge-menu" popover="auto" @select="${this.handleBasicMenuSelect}">
+          <ui-menu-item>
+            <span slot="start"><ui-icon>check</ui-icon></span>
+            <span>Left Edge Menu Item 1</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>check</ui-icon></span>
+            <span>Left Edge Menu Item 2</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>check</ui-icon></span>
+            <span>Left Edge Menu Item 3</span>
+          </ui-menu-item>
+        </ui-menu>
+
+        <ui-menu id="right-edge-menu" popover="auto" @select="${this.handleBasicMenuSelect}">
+          <ui-menu-item>
+            <span slot="start"><ui-icon>check</ui-icon></span>
+            <span>Right Edge Menu Item 1</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>check</ui-icon></span>
+            <span>Right Edge Menu Item 2</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>check</ui-icon></span>
+            <span>Right Edge Menu Item 3</span>
+          </ui-menu-item>
+        </ui-menu>
+      </section>
     `
   }
 }

package/package.json

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

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

@@ -13,3 +13,5 @@ declare global {
     'ui-button-group': UiButtonGroupElement
   }
 }
+
+export type { MdGroupType } from './internals/group.js'

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

@@ -16,3 +16,6 @@ declare global {
     'ui-button': UiButtonElement
   }
 }
+
+export type { MdButtonColor } from './internals/button.js'
+export type { ButtonType, MdButtonShape, MdButtonSize } from './internals/base.js'

package/src/md/chip/ui-chip.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-chip': UiChipElement
   }
 }
+
+export { ChipType } from './internals/Chip.js'

package/src/md/dialog/internals/Dialog.ts

@@ -27,8 +27,6 @@ interface DialogEventMap {
   close: CustomEvent<UiDialogClosingReason>
 }
 
-export type RenderFunction = () => TemplateResult
-
 /**
  * Styled dialog using a native `<dialog>` element under the hood.
  * Note, since native dialog renders in the top layer it is not necessary

package/src/md/dialog/ui-dialog.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-dialog': UiDialogElement
   }
 }
+
+export type { UiDialogClosingReason } from './internals/Dialog.js'

package/src/md/divider/ui-divider.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-divider': UiDividerElement
   }
 }
+
+export { DividerType } from './internals/Divider.element.js'

package/src/md/dropdown-list/ui-dropdown-list.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-dropdown-list': Element
   }
 }
+
+export type { UiDropdownListSelection } from './internals/UiDropdownList.js'

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

@@ -13,3 +13,6 @@ declare global {
     'ui-icon-button': UiIconButtonElement
   }
 }
+
+export type { MdIconButtonColor, MdIconButtonWidth } from './internals/IconButton.js'
+export type { ButtonType, MdButtonShape, MdButtonSize } from '../button/internals/base.js'

package/src/md/list/internals/ListItem.styles.ts

@@ -123,6 +123,13 @@ export default css`
     line-height: var(--md-sys-typescale-body-small-height);
   }
 
+  .start {
+    align-self: stretch;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
   :host slot[name='end']::slotted(*) {
     color: var(--md-sys-color-on-surface-variant);
     fill: var(--md-sys-color-on-surface-variant);

package/src/md/list/ui-list-item.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-list-item': UiListItemElement
   }
 }
+
+export { ListItemImage, ListItemLines } from './internals/ListItem.js'

package/src/md/list/ui-list.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-list': Element
   }
 }
+
+export type { UiListItemsChange, UiListSelection } from './internals/List.js'

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

@@ -4,7 +4,7 @@ export default css`
   :host {
     display: none;
     position-area: bottom span-right;
-    position-try: normal flip-block;
+    position-try: --menu-fallback-bottom-left, --menu-fallback-top-right, --menu-fallback-top-left, flip-block;
     position: absolute;
     margin: 0;
     padding: 0;
@@ -15,9 +15,21 @@ export default css`
     overflow: auto;
   }
 
+  @position-try --menu-fallback-bottom-left {
+    position-area: bottom span-left;
+  }
+
+  @position-try --menu-fallback-top-right {
+    position-area: top span-right;
+  }
+
+  @position-try --menu-fallback-top-left {
+    position-area: top span-left;
+  }
+
   :host(:popover-open) {
     display: block;
-    background-color: var(--md-sys-color-surface);
+    background-color: var(--md-sys-color-surface-container-low);
     border-radius: var(--md-sys-shape-corner-extra-small);
     box-shadow: var(--md-sys-elevation-3);
   }

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

@@ -15,6 +15,7 @@ import { bound } from '../../../decorators/bound.js'
  *
  * @fires select - Dispatched when a menu item is selected
  * @fires close - Dispatched when the menu is closed
+ * @fires open - Dispatched when the menu is opened
  */
 export default class Menu extends UiList {
   /**
@@ -104,41 +105,29 @@ export default class Menu extends UiList {
   }
 
   positionMenu(): void {
-    // when there's more space above the anchor, position the menu above it
+    // Let CSS anchor positioning handle the positioning automatically
+    // Only intervene if we need to set max-height for overflow cases
     const box = this.getBoundingClientRect()
-    // Now, we determine, whether to position the menu above or below the anchor
-    // in a way, that if we have enough space below the anchor, we position it below,
-    // otherwise we position it above the anchor.
-
-    // our starting point is the anchor being positioned below the anchor
     const menuBottom = box.top + box.height
-    if (menuBottom <= innerHeight) {
-      // if the menu fits below the anchor, we leave it as is.
-      return
+    const menuRight = box.left + box.width
+
+    // Reset any previous manual positioning to let CSS anchor positioning work
+    this.style.removeProperty('position-area')
+    this.style.removeProperty('max-height')
+
+    // Only set max-height if the menu would overflow
+    if (menuBottom > innerHeight) {
+      const availableHeight = innerHeight - box.top
+      this.style.maxHeight = `${Math.max(200, availableHeight - 20)}px`
     }
-    // we do not make association from the menu to the anchor, so we make an assumption
-    // that the anchor is 40px high, which is the default height of a button.
-    // it can be different, but this is a good starting point.
-    const anchorHeight = 40
-    const anchorBottom = box.top
-    const anchorTop = anchorBottom - anchorHeight
-    const menuHeight = box.height
-
-    const spaceBelow = innerHeight - anchorBottom
-    const spaceAbove = anchorTop
-
-    const diffBelow = spaceBelow - menuHeight
-    const diffAbove = spaceAbove - menuHeight
-    // The initial check ensures the menu does not fit below. Now, check if it fits above.
-    if (diffAbove >= 0) {
-      this.style.setProperty('position-area', 'top span-right')
-    } else if (diffAbove > diffBelow) {
-      // It doesn't fit in either direction. Choose the one with less overflow (larger, i.e., less negative, diff).
-      this.style.setProperty('position-area', 'top span-right')
-      this.style.maxHeight = `${spaceAbove}px`
-    } else {
-      this.style.setProperty('position-area', 'bottom span-right')
-      this.style.maxHeight = `${spaceBelow}px`
+
+    if (menuRight > innerWidth) {
+      const availableWidth = innerWidth - box.left
+      // Let CSS anchor positioning handle horizontal flipping
+      // We could set max-width if needed
+      if (availableWidth < 200) {
+        this.style.maxWidth = `${Math.max(180, availableWidth - 20)}px`
+      }
     }
   }
 
@@ -213,10 +202,42 @@ export default class Menu extends UiList {
   }
 
   override notifySelect(item: UiListItem, index?: number): boolean {
+    // Handle single selection
+    if (item instanceof UiMenuItem) {
+      this.clearSelection()
+      item.selected = true
+    }
+
     this.hide()
     return super.notifySelect(item, index)
   }
 
+  /**
+   * Clears selection from all menu items
+   */
+  protected clearSelection(): void {
+    this.assignedMenuItems.forEach((menuItem) => {
+      menuItem.selected = false
+    })
+  }
+
+  /**
+   * Gets the currently selected menu item
+   */
+  get selectedItem(): UiMenuItem | null {
+    return this.assignedMenuItems.find((item) => item.selected) || null
+  }
+
+  /**
+   * Sets the selected menu item
+   */
+  setSelectedItem(item: UiMenuItem | null): void {
+    this.clearSelection()
+    if (item) {
+      item.selected = true
+    }
+  }
+
   /**
    * Handles sub-menu opening
    */

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

@@ -54,6 +54,7 @@ export default css`
   md-focus-ring {
     --md-focus-ring-color: var(--md-sys-color-primary);
     --md-focus-ring-width: 2px;
+    z-index: 2;
   }
 
   /* Ripple Effect */
@@ -61,4 +62,26 @@ export default css`
     --md-ripple-color: var(--md-sys-color-primary);
     --md-ripple-opacity: 0.12;
   }
+
+  /* Selected state */
+  :host(.select) .menu-item,
+  :host([selected]) .menu-item {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  :host(.select) .menu-item:hover,
+  :host([selected]) .menu-item:hover {
+    background-color: var(--md-sys-color-secondary-container);
+    opacity: 0.92;
+  }
+
+  /* Selection check icon */
+  .selection-check {
+    color: var(--md-sys-color-on-surface-variant);
+    fill: var(--md-sys-color-on-surface-variant);
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+  }
 `

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

@@ -8,6 +8,7 @@ import { nanoid } from 'nanoid'
 
 import '@material/web/focus/md-focus-ring.js'
 import '../../ripple/ui-ripple.js'
+import '../../icons/ui-icon.js'
 
 /**
  * Material Design 3 Menu Item component.
@@ -23,6 +24,25 @@ export default class UiMenuItem extends UiListItem {
    */
   @property({ type: String }) accessor submenu: string | undefined
 
+  /**
+   * Whether this menu item is selected
+   * @attribute
+   */
+  @property({ type: Boolean, reflect: true }) accessor selected = false
+
+  /**
+   * The value associated with this menu item. Use it to identify value associated with the menu item,
+   * when selected.
+   * @attribute
+   */
+  @property({ type: String, reflect: true }) accessor value: string | undefined
+
+  /**
+   * Whether to automatically show a check icon when selected
+   * @attribute
+   */
+  @property({ type: Boolean }) accessor showSelectionIcon = false
+
   /**
    * Whether the menu item has a sub-menu
    */
@@ -58,6 +78,9 @@ export default class UiMenuItem extends UiListItem {
     if (!this.id) {
       this.id = nanoid(6)
     }
+
+    // Initialize selection state
+    this.updateSelectionState()
   }
 
   protected override updated(changedProperties: PropertyValues<this>): void {
@@ -67,6 +90,10 @@ export default class UiMenuItem extends UiListItem {
       this.updateAccessibility()
       this.setupSubmenuConnection()
     }
+
+    if (changedProperties.has('selected')) {
+      this.updateSelectionState()
+    }
   }
 
   /**
@@ -97,6 +124,19 @@ export default class UiMenuItem extends UiListItem {
     }
   }
 
+  /**
+   * Updates the selection state styling
+   */
+  protected updateSelectionState(): void {
+    if (this.selected) {
+      this.classList.add('select')
+      this.setAttribute('aria-selected', 'true')
+    } else {
+      this.classList.remove('select')
+      this.setAttribute('aria-selected', 'false')
+    }
+  }
+
   /**
    * Handles mouse enter events
    */
@@ -214,4 +254,13 @@ export default class UiMenuItem extends UiListItem {
       ${this.hasSubMenu ? html`<ui-icon class="menu-item-arrow">arrow_right</ui-icon>` : ''}
     </div>`
   }
+
+  protected override renderStart(): TemplateResult {
+    const showCheckIcon = this.showSelectionIcon && this.selected
+
+    return html`<div class="start">
+      ${showCheckIcon ? html`<ui-icon class="selection-check">check</ui-icon>` : ''}
+      <slot name="start" @slotchange=${this.handleSlotChange}></slot>
+    </div>`
+  }
 }

package/src/md/menu/ui-menu-item.ts

@@ -8,10 +8,6 @@ import listStyles from '../list/internals/ListItem.styles.js'
  * Material Design 3 Menu Item component.
  *
  * @element ui-menu-item
- * @attribute {Object} data - The menu item data object
- * @attribute {boolean} disabled - Whether the menu item is disabled
- * @fires select - Dispatched when the menu item is selected
- * @fires submenu-open - Dispatched when a sub-menu is opened
  */
 @customElement('ui-menu-item')
 export class UiMenuItemElement extends Element {
@@ -23,3 +19,5 @@ declare global {
     'ui-menu-item': UiMenuItemElement
   }
 }
+
+export { ListItemImage, ListItemLines } from '../list/internals/ListItem.js'

package/src/md/menu/ui-menu.ts

@@ -24,3 +24,5 @@ declare global {
     'ui-menu': UiMenuElement
   }
 }
+
+export type { UiListItemsChange, UiListSelection } from '../list/internals/List.js'

package/src/md/tabs/ui-tabs.ts

@@ -13,3 +13,5 @@ declare global {
     'ui-tabs': UiTabsElement
   }
 }
+
+export { TabsPriority, type TabSelectionDetail } from './internals/Tabs.js'