@api-client/ui 0.5.22 → 0.5.24

package/build/src/md/list/internals/List.js

@@ -197,7 +197,7 @@ let UiList = (() => {
             }
             this.removeAttribute('tabindex');
             item.activate();
-            item.scrollIntoView({ block: 'end', inline: 'nearest' });
+            item.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
         }
         handleKeydown(event) {
             if (Object.values(ACTIVATION_KEYS).includes(event.key)) {

package/build/src/md/list/internals/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/List.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport UiListItem from './ListItem.js'\n\nconst NAVIGATION_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n}\n\nconst ACTIVATION_KEYS = {\n  Enter: 'Enter',\n  Space: ' ',\n}\n\nexport interface UiListSelection {\n  item: HTMLElement\n  index: number\n}\n\nexport interface UiListItemsChange {\n  items: UiListItem[]\n}\n\n/**\n * @fires select - Dispatched when the user click or press `Enter` or `Space` on any active list item.\n *                 The `event.detail` object contains the `item` and `index` properties.\n * @fires itemschange - Dispatched when the list items change, e.g. when the slot changes.\n *                The `event.detail` object contains the `items` property with the list of items.\n */\nexport default class UiList extends LitElement {\n  /**\n   * The computed list of list items to render.\n   */\n  accessor items: UiListItem[] = []\n\n  activeListItem: UiListItem | null = null\n\n  highlightListItem: UiListItem | null = null\n\n  /**\n   * The CSS selector that is used to recognize which items are\n   * active list items (can be selected, focused, etc.)\n   * @attribute\n   */\n  @property({ type: String }) accessor selector: string\n\n  /**\n   * When set it marks last activated list item as selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor selectActive: boolean | undefined\n\n  @queryAssignedElements({ flatten: true }) protected accessor assignedElements!: HTMLElement[]\n\n  constructor() {\n    super()\n    this.selector = 'ui-list-item'\n    this.addEventListener('keydown', this.handleKeydown.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  override focus(options?: FocusOptions): void {\n    const { activeListItem } = this\n    if (activeListItem) {\n      activeListItem.focus(options)\n      return\n    }\n    this.activateFirstItem()\n  }\n\n  override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties)\n\n    this.updateItems()\n  }\n\n  activateFirstItem(): void {\n    this.activeListItem = this.getFirstItem()\n    this.activeListItem?.activate()\n  }\n\n  activateLastItem(): void {\n    this.activeListItem = this.getLastItem()\n    this.activeListItem?.activate()\n  }\n\n  resetActiveListItem(): void {\n    this.activeListItem = null\n    this.setAttribute('tabindex', '0')\n  }\n\n  protected updateItems(): void {\n    const elements = this.assignedElements || []\n    const items = elements.filter(this.isListItem, this)\n    this.items = items\n    if (this.activeListItem && !items.includes(this.activeListItem)) {\n      this.activeListItem = null\n    }\n    if (this.highlightListItem && !items.includes(this.highlightListItem)) {\n      this.highlightListItem = null\n    }\n    this.dispatchEvent(\n      new CustomEvent<UiListItemsChange>('itemschange', { bubbles: false, composed: false, detail: { items } })\n    )\n  }\n\n  /**\n   * @return Whether the given element is a list item element.\n   */\n  protected isListItem(element: Element): element is UiListItem {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false\n    }\n    return element.matches(this.selector)\n  }\n\n  getFirstItem(): UiListItem {\n    return this.items[0]\n  }\n\n  getLastItem(): UiListItem {\n    return this.items[this.items.length - 1]\n  }\n\n  getPreviousItem(item: UiListItem): UiListItem {\n    const { items } = this\n    const curIndex = items.indexOf(item)\n    if (curIndex < 0) {\n      return item\n    }\n    let i = curIndex\n    let result: HTMLElement | undefined\n    do {\n      i--\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item\n      }\n      const tmp = items[i]\n      if (!tmp) {\n        i = items.length\n        continue\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp\n      }\n    } while (!result)\n    return (result as UiListItem) || item\n  }\n\n  getNextItem(item: UiListItem): UiListItem {\n    const { items } = this\n    const curIndex = items.indexOf(item)\n    if (curIndex < 0) {\n      return item\n    }\n    let i = curIndex\n    let next: HTMLElement | undefined\n    do {\n      i++\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item\n      }\n      const tmp = items[i]\n      if (!tmp) {\n        i = -1\n        continue\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp\n      }\n    } while (!next)\n    return (next as UiListItem) || item\n  }\n\n  protected isSelectable(element: HTMLElement): boolean {\n    if ((element as unknown as { disabled: boolean }).disabled) {\n      return false\n    }\n    if (element.hasAttribute('disabled')) {\n      return false\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false\n    }\n    return true\n  }\n\n  protected isListItemActive(item: UiListItem): boolean {\n    return item.isActive()\n  }\n\n  protected deactivateListItem(item: UiListItem): void {\n    item.deactivate()\n  }\n\n  protected activateListItem(item?: UiListItem | null): void {\n    if (!item) {\n      return\n    }\n    this.removeAttribute('tabindex')\n    item.activate()\n    item.scrollIntoView({ block: 'end', inline: 'nearest' })\n  }\n\n  handleKeydown(event: KeyboardEvent): void {\n    if (Object.values(ACTIVATION_KEYS).includes(event.key)) {\n      this.activateFromEvent(event)\n      return\n    }\n    if (Object.values(NAVIGATION_KEYS).indexOf(event.key) === -1) return\n\n    for (const item of this.items) {\n      if (this.isListItemActive(item)) {\n        this.activeListItem = item\n      }\n\n      this.deactivateListItem(item)\n    }\n\n    if (event.key === NAVIGATION_KEYS.ArrowDown) {\n      event.preventDefault()\n      this.activateNext()\n    }\n\n    if (event.key === NAVIGATION_KEYS.ArrowUp) {\n      event.preventDefault()\n      this.activatePrevious()\n    }\n\n    if (event.key === NAVIGATION_KEYS.Home) {\n      event.preventDefault()\n      this.activateFirst()\n    }\n\n    if (event.key === NAVIGATION_KEYS.End) {\n      event.preventDefault()\n      this.activateLast()\n    }\n  }\n\n  activateFirst(): void {\n    this.activeListItem = this.getFirstItem()\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem)\n    }\n  }\n\n  activateLast(): void {\n    this.activeListItem = this.getLastItem()\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem)\n    }\n  }\n\n  activateNext(item = this.activeListItem): void {\n    this.activeListItem = item ? this.getNextItem(item) : this.getFirstItem()\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem)\n    }\n  }\n\n  activatePrevious(item = this.activeListItem): void {\n    this.activeListItem = item ? this.getPreviousItem(item) : this.getLastItem()\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem)\n    }\n  }\n\n  /**\n   * Sets `highlight` class on the next item.\n   * @param item When not set it highlights the first item. Default to `this.highlightListItem`.\n   *             Pass `null` to select first item.\n   */\n  highlightNext(item = this.highlightListItem): void {\n    const next = item ? this.getNextItem(item) : this.getFirstItem()\n    this.highlightItem(next)\n  }\n\n  /**\n   * Sets `highlight` class on the previous item.\n   * @param item When not set it highlights the last item. Default to `this.highlightListItem`.\n   *             Pass `null` to select last item.\n   */\n  highlightPrevious(item = this.highlightListItem): void {\n    const previous = item ? this.getPreviousItem(item) : this.getLastItem()\n    this.highlightItem(previous)\n  }\n\n  highlightFirst(): void {\n    const item = this.getFirstItem()\n    this.highlightItem(item)\n  }\n\n  highlightLast(): void {\n    const item = this.getLastItem()\n    this.highlightItem(item)\n  }\n\n  handleClick(event: MouseEvent): void {\n    this.activateFromEvent(event)\n  }\n\n  protected highlightItem(item?: UiListItem | null): void {\n    if (this.highlightListItem) {\n      this.highlightListItem.classList.remove('highlight')\n    }\n    this.highlightListItem = item || null\n    if (this.highlightListItem) {\n      this.highlightListItem.classList.add('highlight')\n      this.highlightListItem.scrollIntoView({ block: 'end', inline: 'nearest' })\n    }\n  }\n\n  /**\n   * Activates a list item from an Event.\n   * Activate means dispatches a non-bubbling CustomEvent with the item in the detail.\n   */\n  protected activateFromEvent(e: Event): void {\n    const path = e.composedPath()\n    let item: UiListItem | undefined\n    while (!item) {\n      const next = path.shift() as Element\n      if (next === this) {\n        break\n      }\n      if (!this.isListItem(next) || !this.isSelectable(next)) {\n        continue\n      }\n      item = next as UiListItem\n    }\n    if (!item) {\n      return\n    }\n    this.manageSelection(item)\n    item.activate()\n    this.activeListItem = item\n    if (this.notifySelect(item)) {\n      e.preventDefault()\n    }\n  }\n\n  /**\n   * @param item The UiListItem that is selected.\n   * @returns True when the event was canceled.\n   */\n  notifySelect(item: UiListItem, index?: number): boolean {\n    const resolvedIndex = index ?? this.items.indexOf(item)\n    if (resolvedIndex === -1) {\n      return false\n    }\n    const event = new CustomEvent<UiListSelection>('select', {\n      cancelable: true,\n      detail: {\n        item,\n        index: resolvedIndex,\n      },\n    })\n    this.dispatchEvent(event)\n    return event.defaultPrevented\n  }\n\n  protected manageSelection(item: UiListItem): void {\n    if (!this.selectActive) {\n      return\n    }\n    const { items } = this\n    items.forEach((current) => current.classList.remove('select'))\n    item.classList.add('select')\n  }\n\n  override render(): TemplateResult {\n    return html`<slot @slotchange=\"${this.updateItems}\"></slot>`\n  }\n}\n"]}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../../src/md/list/internals/List.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, queryAssignedElements } from 'lit/decorators.js'\nimport UiListItem from './ListItem.js'\n\nconst NAVIGATION_KEYS = {\n  ArrowDown: 'ArrowDown',\n  ArrowUp: 'ArrowUp',\n  Home: 'Home',\n  End: 'End',\n}\n\nconst ACTIVATION_KEYS = {\n  Enter: 'Enter',\n  Space: ' ',\n}\n\nexport interface UiListSelection {\n  item: HTMLElement\n  index: number\n}\n\nexport interface UiListItemsChange {\n  items: UiListItem[]\n}\n\n/**\n * @fires select - Dispatched when the user click or press `Enter` or `Space` on any active list item.\n *                 The `event.detail` object contains the `item` and `index` properties.\n * @fires itemschange - Dispatched when the list items change, e.g. when the slot changes.\n *                The `event.detail` object contains the `items` property with the list of items.\n */\nexport default class UiList extends LitElement {\n  /**\n   * The computed list of list items to render.\n   */\n  accessor items: UiListItem[] = []\n\n  activeListItem: UiListItem | null = null\n\n  highlightListItem: UiListItem | null = null\n\n  /**\n   * The CSS selector that is used to recognize which items are\n   * active list items (can be selected, focused, etc.)\n   * @attribute\n   */\n  @property({ type: String }) accessor selector: string\n\n  /**\n   * When set it marks last activated list item as selected.\n   * @attribute\n   */\n  @property({ type: Boolean }) accessor selectActive: boolean | undefined\n\n  @queryAssignedElements({ flatten: true }) protected accessor assignedElements!: HTMLElement[]\n\n  constructor() {\n    super()\n    this.selector = 'ui-list-item'\n    this.addEventListener('keydown', this.handleKeydown.bind(this))\n    this.addEventListener('click', this.handleClick.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (!this.hasAttribute('tabindex')) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  override focus(options?: FocusOptions): void {\n    const { activeListItem } = this\n    if (activeListItem) {\n      activeListItem.focus(options)\n      return\n    }\n    this.activateFirstItem()\n  }\n\n  override firstUpdated(changedProperties: PropertyValues): void {\n    super.firstUpdated(changedProperties)\n\n    this.updateItems()\n  }\n\n  activateFirstItem(): void {\n    this.activeListItem = this.getFirstItem()\n    this.activeListItem?.activate()\n  }\n\n  activateLastItem(): void {\n    this.activeListItem = this.getLastItem()\n    this.activeListItem?.activate()\n  }\n\n  resetActiveListItem(): void {\n    this.activeListItem = null\n    this.setAttribute('tabindex', '0')\n  }\n\n  protected updateItems(): void {\n    const elements = this.assignedElements || []\n    const items = elements.filter(this.isListItem, this)\n    this.items = items\n    if (this.activeListItem && !items.includes(this.activeListItem)) {\n      this.activeListItem = null\n    }\n    if (this.highlightListItem && !items.includes(this.highlightListItem)) {\n      this.highlightListItem = null\n    }\n    this.dispatchEvent(\n      new CustomEvent<UiListItemsChange>('itemschange', { bubbles: false, composed: false, detail: { items } })\n    )\n  }\n\n  /**\n   * @return Whether the given element is a list item element.\n   */\n  protected isListItem(element: Element): element is UiListItem {\n    if (element.nodeType !== Node.ELEMENT_NODE) {\n      return false\n    }\n    return element.matches(this.selector)\n  }\n\n  getFirstItem(): UiListItem {\n    return this.items[0]\n  }\n\n  getLastItem(): UiListItem {\n    return this.items[this.items.length - 1]\n  }\n\n  getPreviousItem(item: UiListItem): UiListItem {\n    const { items } = this\n    const curIndex = items.indexOf(item)\n    if (curIndex < 0) {\n      return item\n    }\n    let i = curIndex\n    let result: HTMLElement | undefined\n    do {\n      i--\n      if (i === curIndex) {\n        // looped back from the end, no active element to find.\n        return item\n      }\n      const tmp = items[i]\n      if (!tmp) {\n        i = items.length\n        continue\n      }\n      if (this.isSelectable(tmp)) {\n        result = tmp\n      }\n    } while (!result)\n    return (result as UiListItem) || item\n  }\n\n  getNextItem(item: UiListItem): UiListItem {\n    const { items } = this\n    const curIndex = items.indexOf(item)\n    if (curIndex < 0) {\n      return item\n    }\n    let i = curIndex\n    let next: HTMLElement | undefined\n    do {\n      i++\n      if (i === curIndex) {\n        // looped back from the start, no active element to find.\n        return item\n      }\n      const tmp = items[i]\n      if (!tmp) {\n        i = -1\n        continue\n      }\n      if (this.isSelectable(tmp)) {\n        next = tmp\n      }\n    } while (!next)\n    return (next as UiListItem) || item\n  }\n\n  protected isSelectable(element: HTMLElement): boolean {\n    if ((element as unknown as { disabled: boolean }).disabled) {\n      return false\n    }\n    if (element.hasAttribute('disabled')) {\n      return false\n    }\n    if (element.hidden && element.hasAttribute('hidden')) {\n      return false\n    }\n    return true\n  }\n\n  protected isListItemActive(item: UiListItem): boolean {\n    return item.isActive()\n  }\n\n  protected deactivateListItem(item: UiListItem): void {\n    item.deactivate()\n  }\n\n  protected activateListItem(item?: UiListItem | null): void {\n    if (!item) {\n      return\n    }\n    this.removeAttribute('tabindex')\n    item.activate()\n    item.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })\n  }\n\n  handleKeydown(event: KeyboardEvent): void {\n    if (Object.values(ACTIVATION_KEYS).includes(event.key)) {\n      this.activateFromEvent(event)\n      return\n    }\n    if (Object.values(NAVIGATION_KEYS).indexOf(event.key) === -1) return\n\n    for (const item of this.items) {\n      if (this.isListItemActive(item)) {\n        this.activeListItem = item\n      }\n\n      this.deactivateListItem(item)\n    }\n\n    if (event.key === NAVIGATION_KEYS.ArrowDown) {\n      event.preventDefault()\n      this.activateNext()\n    }\n\n    if (event.key === NAVIGATION_KEYS.ArrowUp) {\n      event.preventDefault()\n      this.activatePrevious()\n    }\n\n    if (event.key === NAVIGATION_KEYS.Home) {\n      event.preventDefault()\n      this.activateFirst()\n    }\n\n    if (event.key === NAVIGATION_KEYS.End) {\n      event.preventDefault()\n      this.activateLast()\n    }\n  }\n\n  activateFirst(): void {\n    this.activeListItem = this.getFirstItem()\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem)\n    }\n  }\n\n  activateLast(): void {\n    this.activeListItem = this.getLastItem()\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem)\n    }\n  }\n\n  activateNext(item = this.activeListItem): void {\n    this.activeListItem = item ? this.getNextItem(item) : this.getFirstItem()\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem)\n    }\n  }\n\n  activatePrevious(item = this.activeListItem): void {\n    this.activeListItem = item ? this.getPreviousItem(item) : this.getLastItem()\n    if (this.activeListItem) {\n      this.activateListItem(this.activeListItem)\n    }\n  }\n\n  /**\n   * Sets `highlight` class on the next item.\n   * @param item When not set it highlights the first item. Default to `this.highlightListItem`.\n   *             Pass `null` to select first item.\n   */\n  highlightNext(item = this.highlightListItem): void {\n    const next = item ? this.getNextItem(item) : this.getFirstItem()\n    this.highlightItem(next)\n  }\n\n  /**\n   * Sets `highlight` class on the previous item.\n   * @param item When not set it highlights the last item. Default to `this.highlightListItem`.\n   *             Pass `null` to select last item.\n   */\n  highlightPrevious(item = this.highlightListItem): void {\n    const previous = item ? this.getPreviousItem(item) : this.getLastItem()\n    this.highlightItem(previous)\n  }\n\n  highlightFirst(): void {\n    const item = this.getFirstItem()\n    this.highlightItem(item)\n  }\n\n  highlightLast(): void {\n    const item = this.getLastItem()\n    this.highlightItem(item)\n  }\n\n  handleClick(event: MouseEvent): void {\n    this.activateFromEvent(event)\n  }\n\n  protected highlightItem(item?: UiListItem | null): void {\n    if (this.highlightListItem) {\n      this.highlightListItem.classList.remove('highlight')\n    }\n    this.highlightListItem = item || null\n    if (this.highlightListItem) {\n      this.highlightListItem.classList.add('highlight')\n      this.highlightListItem.scrollIntoView({ block: 'end', inline: 'nearest' })\n    }\n  }\n\n  /**\n   * Activates a list item from an Event.\n   * Activate means dispatches a non-bubbling CustomEvent with the item in the detail.\n   */\n  protected activateFromEvent(e: Event): void {\n    const path = e.composedPath()\n    let item: UiListItem | undefined\n    while (!item) {\n      const next = path.shift() as Element\n      if (next === this) {\n        break\n      }\n      if (!this.isListItem(next) || !this.isSelectable(next)) {\n        continue\n      }\n      item = next as UiListItem\n    }\n    if (!item) {\n      return\n    }\n    this.manageSelection(item)\n    item.activate()\n    this.activeListItem = item\n    if (this.notifySelect(item)) {\n      e.preventDefault()\n    }\n  }\n\n  /**\n   * @param item The UiListItem that is selected.\n   * @returns True when the event was canceled.\n   */\n  notifySelect(item: UiListItem, index?: number): boolean {\n    const resolvedIndex = index ?? this.items.indexOf(item)\n    if (resolvedIndex === -1) {\n      return false\n    }\n    const event = new CustomEvent<UiListSelection>('select', {\n      cancelable: true,\n      detail: {\n        item,\n        index: resolvedIndex,\n      },\n    })\n    this.dispatchEvent(event)\n    return event.defaultPrevented\n  }\n\n  protected manageSelection(item: UiListItem): void {\n    if (!this.selectActive) {\n      return\n    }\n    const { items } = this\n    items.forEach((current) => current.classList.remove('select'))\n    item.classList.add('select')\n  }\n\n  override render(): TemplateResult {\n    return html`<slot @slotchange=\"${this.updateItems}\"></slot>`\n  }\n}\n"]}

package/build/src/md/menu/internal/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1D,OAAO,MAAM,MAAM,8BAA8B,CAAA;AACjD,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,UAAU,MAAM,kCAAkC,CAAA;AAGzD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,MAAM;IACtC;;;OAGG;IACyC,QAAQ,CAAC,IAAI,UAAQ;IAEjE;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;OAEG;IACM,QAAQ,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAExD;;OAEG;IACkD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAG,UAAU,EAAE,CAAA;;IAS/F,iBAAiB,IAAI,IAAI;cAYf,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQhE,aAAa,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO;IAYhD;;OAEG;IACH,IAAI,IAAI,IAAI;IAUZ;;OAEG;IACH,IAAI,IAAI,IAAI;IASZ,YAAY,IAAI,IAAI;IAuCpB;;OAEG;IACH,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAQ5C;;OAEG;IACM,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAuB9C,mBAAmB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAIzC;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAO7B;;OAEG;IACH,YAAY,IAAI,IAAI;IAQpB;;OAEG;IACH,gBAAgB,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAKxC,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO;IAWhE;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAMhC;;OAEG;IACH,IAAI,YAAY,IAAI,UAAU,GAAG,IAAI,CAEpC;IAED;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI;IAO9C;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAKjD;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAKzB,MAAM,IAAI,cAAc;CAWlC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1D,OAAO,MAAM,MAAM,8BAA8B,CAAA;AACjD,OAAO,UAAU,MAAM,eAAe,CAAA;AACtC,OAAO,SAAS,MAAM,cAAc,CAAA;AAEpC,OAAO,UAAU,MAAM,kCAAkC,CAAA;AAGzD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,MAAM;IACtC;;;OAGG;IACyC,QAAQ,CAAC,IAAI,UAAQ;IAEjE;;;OAGG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;OAEG;IACM,QAAQ,CAAC,aAAa,EAAE,SAAS,GAAG,IAAI,CAAO;IAExD;;OAEG;IACkD,SAAS,CAAC,QAAQ,CAAC,iBAAiB,EAAG,UAAU,EAAE,CAAA;;IAS/F,iBAAiB,IAAI,IAAI;cAYf,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQhE,aAAa,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO;IAYhD;;OAEG;IACH,IAAI,IAAI,IAAI;IAUZ;;OAEG;IACH,IAAI,IAAI,IAAI;IASZ,YAAY,IAAI,IAAI;IAyCpB;;OAEG;IACH,SAAS,CAAC,kBAAkB,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAQ5C;;OAEG;IACM,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAuB9C,mBAAmB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAIzC;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAO7B;;OAEG;IACH,YAAY,IAAI,IAAI;IAQpB;;OAEG;IACH,gBAAgB,CAAC,OAAO,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI;IAKxC,YAAY,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO;IAWhE;;OAEG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAMhC;;OAEG;IACH,IAAI,YAAY,IAAI,UAAU,GAAG,IAAI,CAEpC;IAED;;OAEG;IACH,eAAe,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI,GAAG,IAAI;IAO9C;;OAEG;IACH,SAAS,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW,GAAG,IAAI;IAKjD;;OAEG;IACH,SAAS,CAAC,gBAAgB,IAAI,IAAI;IAKzB,MAAM,IAAI,cAAc;CAWlC"}

package/build/src/md/menu/internal/Menu.js

@@ -136,40 +136,39 @@ let Menu = (() => {
             this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }));
         }
         positionMenu() {
-            // 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');
+            // 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');
             }
-            // 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 {
+                this.classList.add('menu-positioned-below');
+                this.classList.remove('menu-positioned-above');
             }
-            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`;
+            // 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`;
             }
-            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`;
+                }
             }
         }
         /**

package/build/src/md/menu/internal/Menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state, queryAssignedElements } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { nanoid } from 'nanoid'\nimport UiList from '../../list/internals/List.js'\nimport UiMenuItem from './MenuItem.js'\nimport UiSubMenu from './SubMenu.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport { bound } from '../../../decorators/bound.js'\n\n/**\n * Material Design 3 Menu component with sub-menu support.\n * Uses Popover API and Anchor Positioning API for modern positioning.\n *\n * @fires select - Dispatched when a menu item is selected\n * @fires close - Dispatched when the menu is closed\n * @fires open - Dispatched when the menu is opened\n */\nexport default class Menu extends UiList {\n  /**\n   * Whether the menu is currently open\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  /**\n   * Whether the menu is disabled\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Currently active sub-menu\n   */\n  @state() accessor activeSubMenu: UiSubMenu | null = null\n\n  /**\n   * Assigned menu items from light DOM\n   */\n  @queryAssignedElements({ selector: 'ui-menu-item' }) protected accessor assignedMenuItems!: UiMenuItem[]\n\n  constructor() {\n    super()\n    this.selector = 'ui-menu-item'\n    this.ariaExpanded = 'false'\n    this.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'menu')\n    this.setAttribute('tabindex', '-1')\n    if (!this.hasAttribute('popover')) {\n      this.setAttribute('popover', 'auto')\n    }\n    if (!this.id) {\n      this.id = nanoid()\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n  }\n\n  override togglePopover(force?: boolean): boolean {\n    this.open = !this.open\n    this.ariaExpanded = String(this.open)\n    this.tabIndex = this.open ? 0 : -1\n    const result = super.togglePopover(force)\n    if (this.open) {\n      this.positionMenu()\n      this.focus()\n    }\n    return result\n  }\n\n  /**\n   * Shows the menu\n   */\n  show(): void {\n    this.tabIndex = 0 // Make menu focusable\n    this.ariaExpanded = 'true'\n    this.showPopover()\n    this.open = true\n    this.positionMenu()\n    this.focus()\n    this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n  }\n\n  /**\n   * Hides the menu\n   */\n  hide(): void {\n    this.tabIndex = -1\n    this.ariaExpanded = 'false'\n    this.hidePopover()\n    this.open = false\n    this.closeSubMenu()\n    this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n  }\n\n  positionMenu(): void {\n    // when there's more space above the anchor, position the menu above it\n    const box = this.getBoundingClientRect()\n    // Now, we determine, whether to position the menu above or below the anchor\n    // in a way, that if we have enough space below the anchor, we position it below,\n    // otherwise we position it above the anchor.\n\n    // our starting point is the anchor being positioned below the anchor\n    const menuBottom = box.top + box.height\n    if (menuBottom <= innerHeight) {\n      // if the menu fits below the anchor, we leave it as is.\n      return\n    }\n    // we do not make association from the menu to the anchor, so we make an assumption\n    // that the anchor is 40px high, which is the default height of a button.\n    // it can be different, but this is a good starting point.\n    const anchorHeight = 40\n    const anchorBottom = box.top\n    const anchorTop = anchorBottom - anchorHeight\n    const menuHeight = box.height\n\n    const spaceBelow = innerHeight - anchorBottom\n    const spaceAbove = anchorTop\n\n    const diffBelow = spaceBelow - menuHeight\n    const diffAbove = spaceAbove - menuHeight\n    // The initial check ensures the menu does not fit below. Now, check if it fits above.\n    if (diffAbove >= 0) {\n      this.style.setProperty('position-area', 'top span-right')\n    } else if (diffAbove > diffBelow) {\n      // It doesn't fit in either direction. Choose the one with less overflow (larger, i.e., less negative, diff).\n      this.style.setProperty('position-area', 'top span-right')\n      this.style.maxHeight = `${spaceAbove}px`\n    } else {\n      this.style.setProperty('position-area', 'bottom span-right')\n      this.style.maxHeight = `${spaceBelow}px`\n    }\n  }\n\n  /**\n   * Handles beforetoggle event from popover\n   */\n  protected handleBeforeToggle(e: Event): void {\n    const toggleEvent = e as ToggleEvent\n    if (toggleEvent.newState === 'closed') {\n      this.open = false\n      this.closeSubMenu()\n    }\n  }\n\n  /**\n   * Handles keyboard navigation for the menu\n   */\n  override handleKeydown(e: KeyboardEvent): void {\n    if (!this.open || e.defaultPrevented) return\n\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault()\n        this.hide()\n        break\n      case 'ArrowRight':\n        e.preventDefault()\n        this.openSubMenu()\n        break\n      case 'ArrowLeft':\n        e.preventDefault()\n        this.closeSubMenu()\n        break\n      default:\n        // Let the parent UiList handle other keys\n        super.handleKeydown(e)\n    }\n  }\n\n  @bound\n  handleSubMenuSelect(e: CustomEvent): void {\n    super.notifySelect(e.detail.item, e.detail.index)\n  }\n\n  /**\n   * Opens the sub-menu for the currently active item\n   */\n  protected openSubMenu(): void {\n    const activeItem = this.activeListItem as UiMenuItem\n    if (activeItem?.hasSubMenu) {\n      activeItem.openSubMenu()\n    }\n  }\n\n  /**\n   * Closes the currently open sub-menu\n   */\n  closeSubMenu(): void {\n    if (this.activeSubMenu) {\n      this.activeSubMenu.removeEventListener('select', this.handleSubMenuSelect as EventListener)\n      this.activeSubMenu.hide()\n      this.activeSubMenu = null\n    }\n  }\n\n  /**\n   * Sets the active sub-menu\n   */\n  setActiveSubMenu(subMenu: UiSubMenu | null): void {\n    this.activeSubMenu = subMenu\n    subMenu?.addEventListener('select', this.handleSubMenuSelect as EventListener)\n  }\n\n  override notifySelect(item: UiListItem, index?: number): boolean {\n    // Handle single selection\n    if (item instanceof UiMenuItem) {\n      this.clearSelection()\n      item.selected = true\n    }\n\n    this.hide()\n    return super.notifySelect(item, index)\n  }\n\n  /**\n   * Clears selection from all menu items\n   */\n  protected clearSelection(): void {\n    this.assignedMenuItems.forEach((menuItem) => {\n      menuItem.selected = false\n    })\n  }\n\n  /**\n   * Gets the currently selected menu item\n   */\n  get selectedItem(): UiMenuItem | null {\n    return this.assignedMenuItems.find((item) => item.selected) || null\n  }\n\n  /**\n   * Sets the selected menu item\n   */\n  setSelectedItem(item: UiMenuItem | null): void {\n    this.clearSelection()\n    if (item) {\n      item.selected = true\n    }\n  }\n\n  /**\n   * Handles sub-menu opening\n   */\n  protected handleSubMenuOpen(e: CustomEvent): void {\n    const subMenu = e.detail.subMenu\n    this.setActiveSubMenu(subMenu)\n  }\n\n  /**\n   * Handles slot changes to update menu items\n   */\n  protected handleSlotChange(): void {\n    // Update the items list when slot content changes\n    this.updateItems()\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'menu-container': true,\n    })\n\n    return html`\n      <div class=${classes}>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property, state, queryAssignedElements } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { nanoid } from 'nanoid'\nimport UiList from '../../list/internals/List.js'\nimport UiMenuItem from './MenuItem.js'\nimport UiSubMenu from './SubMenu.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport { bound } from '../../../decorators/bound.js'\n\n/**\n * Material Design 3 Menu component with sub-menu support.\n * Uses Popover API and Anchor Positioning API for modern positioning.\n *\n * @fires select - Dispatched when a menu item is selected\n * @fires close - Dispatched when the menu is closed\n * @fires open - Dispatched when the menu is opened\n */\nexport default class Menu extends UiList {\n  /**\n   * Whether the menu is currently open\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  /**\n   * Whether the menu is disabled\n   * @attribute\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Currently active sub-menu\n   */\n  @state() accessor activeSubMenu: UiSubMenu | null = null\n\n  /**\n   * Assigned menu items from light DOM\n   */\n  @queryAssignedElements({ selector: 'ui-menu-item' }) protected accessor assignedMenuItems!: UiMenuItem[]\n\n  constructor() {\n    super()\n    this.selector = 'ui-menu-item'\n    this.ariaExpanded = 'false'\n    this.addEventListener('beforetoggle', this.handleBeforeToggle.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'menu')\n    this.setAttribute('tabindex', '-1')\n    if (!this.hasAttribute('popover')) {\n      this.setAttribute('popover', 'auto')\n    }\n    if (!this.id) {\n      this.id = nanoid()\n    }\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n  }\n\n  override togglePopover(force?: boolean): boolean {\n    this.open = !this.open\n    this.ariaExpanded = String(this.open)\n    this.tabIndex = this.open ? 0 : -1\n    const result = super.togglePopover(force)\n    if (this.open) {\n      this.positionMenu()\n      this.focus()\n    }\n    return result\n  }\n\n  /**\n   * Shows the menu\n   */\n  show(): void {\n    this.tabIndex = 0 // Make menu focusable\n    this.ariaExpanded = 'true'\n    this.showPopover()\n    this.open = true\n    this.positionMenu()\n    this.focus()\n    this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n  }\n\n  /**\n   * Hides the menu\n   */\n  hide(): void {\n    this.tabIndex = -1\n    this.ariaExpanded = 'false'\n    this.hidePopover()\n    this.open = false\n    this.closeSubMenu()\n    this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n  }\n\n  positionMenu(): void {\n    // Let CSS anchor positioning handle the positioning automatically\n    // Only intervene if we need to set max-height for overflow cases\n    const box = this.getBoundingClientRect()\n    const menuBottom = box.top + box.height\n    const menuRight = box.left + box.width\n\n    // Reset any previous manual positioning to let CSS anchor positioning work\n    this.style.removeProperty('position-area')\n    this.style.removeProperty('max-height')\n\n    // Detect if menu is positioned above or below the anchor\n    // by checking if the menu is in the upper or lower half of the viewport\n    const viewportMiddle = innerHeight / 2\n    const isMenuInUpperHalf = box.top < viewportMiddle\n\n    // Add CSS class to control animation direction\n    if (isMenuInUpperHalf) {\n      this.classList.add('menu-positioned-above')\n      this.classList.remove('menu-positioned-below')\n    } else {\n      this.classList.add('menu-positioned-below')\n      this.classList.remove('menu-positioned-above')\n    }\n\n    // Only set max-height if the menu would overflow\n    if (menuBottom > innerHeight) {\n      const availableHeight = innerHeight - box.top\n      this.style.maxHeight = `${Math.max(200, availableHeight - 20)}px`\n    }\n\n    if (menuRight > innerWidth) {\n      const availableWidth = innerWidth - box.left\n      // Let CSS anchor positioning handle horizontal flipping\n      // We could set max-width if needed\n      if (availableWidth < 200) {\n        this.style.maxWidth = `${Math.max(180, availableWidth - 20)}px`\n      }\n    }\n  }\n\n  /**\n   * Handles beforetoggle event from popover\n   */\n  protected handleBeforeToggle(e: Event): void {\n    const toggleEvent = e as ToggleEvent\n    if (toggleEvent.newState === 'closed') {\n      this.open = false\n      this.closeSubMenu()\n    }\n  }\n\n  /**\n   * Handles keyboard navigation for the menu\n   */\n  override handleKeydown(e: KeyboardEvent): void {\n    if (!this.open || e.defaultPrevented) return\n\n    switch (e.key) {\n      case 'Escape':\n        e.preventDefault()\n        this.hide()\n        break\n      case 'ArrowRight':\n        e.preventDefault()\n        this.openSubMenu()\n        break\n      case 'ArrowLeft':\n        e.preventDefault()\n        this.closeSubMenu()\n        break\n      default:\n        // Let the parent UiList handle other keys\n        super.handleKeydown(e)\n    }\n  }\n\n  @bound\n  handleSubMenuSelect(e: CustomEvent): void {\n    super.notifySelect(e.detail.item, e.detail.index)\n  }\n\n  /**\n   * Opens the sub-menu for the currently active item\n   */\n  protected openSubMenu(): void {\n    const activeItem = this.activeListItem as UiMenuItem\n    if (activeItem?.hasSubMenu) {\n      activeItem.openSubMenu()\n    }\n  }\n\n  /**\n   * Closes the currently open sub-menu\n   */\n  closeSubMenu(): void {\n    if (this.activeSubMenu) {\n      this.activeSubMenu.removeEventListener('select', this.handleSubMenuSelect as EventListener)\n      this.activeSubMenu.hide()\n      this.activeSubMenu = null\n    }\n  }\n\n  /**\n   * Sets the active sub-menu\n   */\n  setActiveSubMenu(subMenu: UiSubMenu | null): void {\n    this.activeSubMenu = subMenu\n    subMenu?.addEventListener('select', this.handleSubMenuSelect as EventListener)\n  }\n\n  override notifySelect(item: UiListItem, index?: number): boolean {\n    // Handle single selection\n    if (item instanceof UiMenuItem) {\n      this.clearSelection()\n      item.selected = true\n    }\n\n    this.hide()\n    return super.notifySelect(item, index)\n  }\n\n  /**\n   * Clears selection from all menu items\n   */\n  protected clearSelection(): void {\n    this.assignedMenuItems.forEach((menuItem) => {\n      menuItem.selected = false\n    })\n  }\n\n  /**\n   * Gets the currently selected menu item\n   */\n  get selectedItem(): UiMenuItem | null {\n    return this.assignedMenuItems.find((item) => item.selected) || null\n  }\n\n  /**\n   * Sets the selected menu item\n   */\n  setSelectedItem(item: UiMenuItem | null): void {\n    this.clearSelection()\n    if (item) {\n      item.selected = true\n    }\n  }\n\n  /**\n   * Handles sub-menu opening\n   */\n  protected handleSubMenuOpen(e: CustomEvent): void {\n    const subMenu = e.detail.subMenu\n    this.setActiveSubMenu(subMenu)\n  }\n\n  /**\n   * Handles slot changes to update menu items\n   */\n  protected handleSlotChange(): void {\n    // Update the items list when slot content changes\n    this.updateItems()\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'menu-container': true,\n    })\n\n    return html`\n      <div class=${classes}>\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"]}

package/build/src/md/menu/internal/Menu.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":";AAEA,wBA0LC"}
+{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":";AAEA,wBAuQC"}

package/build/src/md/menu/internal/Menu.styles.js

@@ -3,7 +3,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;
@@ -14,11 +14,61 @@ 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);
     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 {
@@ -129,6 +179,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 */
@@ -184,6 +249,18 @@ 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;
+    }
   }
 `;
 //# sourceMappingURL=Menu.styles.js.map

package/build/src/md/menu/internal/Menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0LjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: none;\n    position-area: bottom span-right;\n    position-try: normal flip-block;\n    position: absolute;\n    margin: 0;\n    padding: 0;\n    border: none;\n    overflow: hidden;\n    /* in most cases the max-height won't matter as this assumes the whole screen to be available, which is rarely the truth. */\n    max-height: 90vh;\n    overflow: auto;\n  }\n\n  :host(:popover-open) {\n    display: block;\n    background-color: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-3);\n  }\n\n  .menu-container {\n    min-width: 200px;\n    padding: 8px 0;\n    outline: none;\n  }\n\n  .menu-divider {\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant);\n    margin: 8px 0;\n  }\n\n  /* Menu Item Styles */\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: 48px;\n    padding: 0 16px;\n    cursor: pointer;\n    outline: none;\n    transition: background-color 0.2s ease;\n  }\n\n  .menu-item:hover {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .menu-item:focus {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .menu-item[disabled] {\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .menu-item-content {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n  }\n\n  .menu-item-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--md-sys-color-on-surface);\n    font-size: 20px;\n  }\n\n  .menu-item-label {\n    flex: 1;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-label-large-font-family-name);\n    font-size: var(--md-sys-typescale-label-large-font-size);\n    font-weight: var(--md-sys-typescale-label-large-font-weight);\n    line-height: var(--md-sys-typescale-label-large-line-height);\n    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);\n  }\n\n  .menu-item-arrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--md-sys-color-on-surface);\n    font-size: 18px;\n    font-weight: 500;\n  }\n\n  .menu-item-with-submenu {\n    position: relative;\n  }\n\n  .menu-item-with-submenu:hover .menu-item-arrow {\n    color: var(--md-sys-color-primary);\n  }\n\n  /* Sub-menu Styles */\n  .submenu-container {\n    min-width: 200px;\n    max-width: 320px;\n    background-color: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-level3);\n    padding: 8px 0;\n  }\n\n  /* Submenu positioning with Anchor API */\n  ui-sub-menu {\n    display: none;\n  }\n\n  ui-sub-menu:popover-open {\n    display: block;\n    background-color: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-level3);\n    min-width: 200px;\n    max-width: 320px;\n    padding: 8px 0;\n    z-index: 1000;\n  }\n\n  /* Fallback positioning for browsers without anchor positioning */\n  @supports not (anchor-name: --test) {\n    ui-sub-menu:popover-open {\n      position: fixed;\n      transform: translateX(200px);\n    }\n  }\n\n  /* Focus Ring */\n  md-focus-ring {\n    --md-focus-ring-color: var(--md-sys-color-primary);\n    --md-focus-ring-width: 2px;\n  }\n\n  /* Ripple Effect */\n  ui-ripple {\n    --md-ripple-color: var(--md-sys-color-primary);\n    --md-ripple-opacity: 0.12;\n  }\n\n  /* Responsive Design */\n  @media (max-width: 600px) {\n    .menu-container {\n      min-width: 180px;\n      max-width: 280px;\n    }\n\n    .submenu-container {\n      min-width: 180px;\n      max-width: 280px;\n    }\n  }\n\n  /* High Contrast Mode */\n  @media (prefers-contrast: high) {\n    .menu-container {\n      border: 1px solid var(--md-sys-color-outline);\n    }\n\n    .submenu-container {\n      border: 1px solid var(--md-sys-color-outline);\n    }\n\n    .menu-divider {\n      background-color: var(--md-sys-color-outline);\n    }\n  }\n\n  /* Reduced Motion */\n  @media (prefers-reduced-motion: reduce) {\n    .menu-item {\n      transition: none;\n    }\n  }\n`\n"]}
+{"version":3,"file":"Menu.styles.js","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuQjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: none;\n    position-area: bottom span-right;\n    position-try: --menu-fallback-bottom-left, --menu-fallback-top-right, --menu-fallback-top-left, flip-block;\n    position: absolute;\n    margin: 0;\n    padding: 0;\n    border: none;\n    overflow: hidden;\n    /* in most cases the max-height won't matter as this assumes the whole screen to be available, which is rarely the truth. */\n    max-height: 90vh;\n    overflow: auto;\n  }\n\n  @position-try --menu-fallback-bottom-left {\n    position-area: bottom span-left;\n  }\n\n  @position-try --menu-fallback-top-right {\n    position-area: top span-right;\n  }\n\n  @position-try --menu-fallback-top-left {\n    position-area: top span-left;\n  }\n\n  :host(:popover-open) {\n    display: block;\n    background-color: var(--md-sys-color-surface-container);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-3);\n    animation: menu-scale-in 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  /* Scale animation for menus positioned below the anchor */\n  @keyframes menu-scale-in {\n    0% {\n      transform: scaleY(0);\n      transform-origin: top center;\n      opacity: 0;\n    }\n    100% {\n      transform: scaleY(1);\n      transform-origin: top center;\n      opacity: 1;\n    }\n  }\n\n  /* Scale animation for menus positioned above the anchor */\n  @keyframes menu-scale-in-up {\n    0% {\n      transform: scaleY(0);\n      transform-origin: bottom center;\n      opacity: 0;\n    }\n    100% {\n      transform: scaleY(1);\n      transform-origin: bottom center;\n      opacity: 1;\n    }\n  }\n\n  /* Position-specific animations using JavaScript-detected classes */\n  :host(.menu-positioned-above):popover-open {\n    animation: menu-scale-in-up 0.15s var(--md-sys-motion-easing-standard-accelerate) forwards;\n  }\n\n  :host(.menu-positioned-below):popover-open {\n    animation: menu-scale-in 0.15s var(--md-sys-motion-easing-standard-accelerate) forwards;\n  }\n\n  .menu-container {\n    min-width: 200px;\n    padding: 8px 0;\n    outline: none;\n  }\n\n  .menu-divider {\n    height: 1px;\n    background-color: var(--md-sys-color-outline-variant);\n    margin: 8px 0;\n  }\n\n  /* Menu Item Styles */\n  .menu-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    min-height: 48px;\n    padding: 0 16px;\n    cursor: pointer;\n    outline: none;\n    transition: background-color 0.2s ease;\n  }\n\n  .menu-item:hover {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .menu-item:focus {\n    background-color: var(--md-sys-color-surface-variant);\n  }\n\n  .menu-item[disabled] {\n    opacity: 0.38;\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .menu-item-content {\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n  }\n\n  .menu-item-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--md-sys-color-on-surface);\n    font-size: 20px;\n  }\n\n  .menu-item-label {\n    flex: 1;\n    color: var(--md-sys-color-on-surface);\n    font-family: var(--md-sys-typescale-label-large-font-family-name);\n    font-size: var(--md-sys-typescale-label-large-font-size);\n    font-weight: var(--md-sys-typescale-label-large-font-weight);\n    line-height: var(--md-sys-typescale-label-large-line-height);\n    letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);\n  }\n\n  .menu-item-arrow {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    color: var(--md-sys-color-on-surface);\n    font-size: 18px;\n    font-weight: 500;\n  }\n\n  .menu-item-with-submenu {\n    position: relative;\n  }\n\n  .menu-item-with-submenu:hover .menu-item-arrow {\n    color: var(--md-sys-color-primary);\n  }\n\n  /* Sub-menu Styles */\n  .submenu-container {\n    min-width: 200px;\n    max-width: 320px;\n    background-color: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-level3);\n    padding: 8px 0;\n  }\n\n  /* Submenu positioning with Anchor API */\n  ui-sub-menu {\n    display: none;\n  }\n\n  ui-sub-menu:popover-open {\n    display: block;\n    background-color: var(--md-sys-color-surface);\n    border-radius: var(--md-sys-shape-corner-extra-small);\n    box-shadow: var(--md-sys-elevation-level3);\n    min-width: 200px;\n    max-width: 320px;\n    padding: 8px 0;\n    z-index: 1000;\n    animation: submenu-scale-in 0.12s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n  }\n\n  /* Submenu scale animation */\n  @keyframes submenu-scale-in {\n    0% {\n      transform: scaleY(0) scaleX(0.8);\n      transform-origin: left top;\n      opacity: 0;\n    }\n    100% {\n      transform: scaleY(1) scaleX(1);\n      transform-origin: left top;\n      opacity: 1;\n    }\n  }\n\n  /* Fallback positioning for browsers without anchor positioning */\n  @supports not (anchor-name: --test) {\n    ui-sub-menu:popover-open {\n      position: fixed;\n      transform: translateX(200px);\n    }\n  }\n\n  /* Focus Ring */\n  md-focus-ring {\n    --md-focus-ring-color: var(--md-sys-color-primary);\n    --md-focus-ring-width: 2px;\n  }\n\n  /* Ripple Effect */\n  ui-ripple {\n    --md-ripple-color: var(--md-sys-color-primary);\n    --md-ripple-opacity: 0.12;\n  }\n\n  /* Responsive Design */\n  @media (max-width: 600px) {\n    .menu-container {\n      min-width: 180px;\n      max-width: 280px;\n    }\n\n    .submenu-container {\n      min-width: 180px;\n      max-width: 280px;\n    }\n  }\n\n  /* High Contrast Mode */\n  @media (prefers-contrast: high) {\n    .menu-container {\n      border: 1px solid var(--md-sys-color-outline);\n    }\n\n    .submenu-container {\n      border: 1px solid var(--md-sys-color-outline);\n    }\n\n    .menu-divider {\n      background-color: var(--md-sys-color-outline);\n    }\n  }\n\n  /* Reduced Motion */\n  @media (prefers-reduced-motion: reduce) {\n    .menu-item {\n      transition: none;\n    }\n\n    :host(:popover-open) {\n      animation: none;\n      opacity: 1;\n      transform: none;\n    }\n\n    ui-sub-menu:popover-open {\n      animation: none;\n      opacity: 1;\n      transform: none;\n    }\n  }\n`\n"]}

package/demo/md/menu/index.ts

@@ -467,6 +467,45 @@ class ComponentDemoPage extends DemoPage {
         </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.22",
+  "version": "0.5.24",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",

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

@@ -210,7 +210,7 @@ export default class UiList extends LitElement {
     }
     this.removeAttribute('tabindex')
     item.activate()
-    item.scrollIntoView({ block: 'end', inline: 'nearest' })
+    item.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' })
   }
 
   handleKeydown(event: KeyboardEvent): void {

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,11 +15,61 @@ 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);
     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 {
@@ -130,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 */
@@ -185,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

@@ -105,41 +105,43 @@ 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
-    }
-    // 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`
+    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')
+
+    // 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.style.setProperty('position-area', 'bottom span-right')
-      this.style.maxHeight = `${spaceBelow}px`
+      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
+      this.style.maxHeight = `${Math.max(200, availableHeight - 20)}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`
+      }
     }
   }