@api-client/ui 0.4.5 → 0.5.1

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

@@ -104,10 +104,12 @@ let Menu = (() => {
             this.open = !this.open;
             this.ariaExpanded = String(this.open);
             this.tabIndex = this.open ? 0 : -1;
+            const result = super.togglePopover(force);
             if (this.open) {
+                this.positionMenu();
                 this.focus();
             }
-            return super.togglePopover(force);
+            return result;
         }
         /**
          * Shows the menu
@@ -117,6 +119,7 @@ let Menu = (() => {
             this.ariaExpanded = 'true';
             this.showPopover();
             this.open = true;
+            this.positionMenu();
             this.focus();
             this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }));
         }
@@ -131,6 +134,43 @@ let Menu = (() => {
             this.closeSubMenu();
             this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }));
         }
+        positionMenu() {
+            // when there's more space above the anchor, position the menu above it
+            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`;
+            }
+            else {
+                this.style.setProperty('position-area', 'bottom span-right');
+                this.style.maxHeight = `${spaceBelow}px`;
+            }
+        }
         /**
          * Handles beforetoggle event from popover
          */

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 */\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    if (this.open) {\n      this.focus()\n    }\n    return super.togglePopover(force)\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.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  /**\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    this.hide()\n    return super.notifySelect(item, index)\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 */\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    this.hide()\n    return super.notifySelect(item, index)\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,wBAsLC"}
+{"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":";AAEA,wBA0LC"}

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

@@ -8,6 +8,10 @@ export default css `
     margin: 0;
     padding: 0;
     border: none;
+    overflow: hidden;
+    /* in most cases the max-height won't matter as this assumes the whole screen to be available, which is rarely the truth. */
+    max-height: 90vh;
+    overflow: auto;
   }
 
   :host(:popover-open) {

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsLjB,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  }\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"]}

package/demo/md/dialog/dialog.ts

@@ -18,6 +18,8 @@ class ComponentDemoPage extends DemoPage {
 
   @reactive() accessor overflowOpened = false
 
+  @reactive() accessor formOpened = false
+
   protected openSimple(): void {
     this.simpleOpened = true
   }
@@ -45,6 +47,15 @@ class ComponentDemoPage extends DemoPage {
     this.reportClosingReason(e.detail)
   }
 
+  protected openForm(): void {
+    this.formOpened = true
+  }
+
+  protected formClosed(e: CustomEvent<UiDialogClosingReason>): void {
+    this.formOpened = false
+    this.reportClosingReason(e.detail)
+  }
+
   imperativeDialog: UiDialog | null = null
 
   protected openImperative(): void {
@@ -81,7 +92,8 @@ class ComponentDemoPage extends DemoPage {
   contentTemplate(): TemplateResult {
     return html`
       <a href="../">Back</a>
-      ${this.simpleDialog()} ${this.fullDialog()} ${this.overflowDialog()} ${this.renderImperativeDialog()}
+      ${this.simpleDialog()} ${this.fullDialog()} ${this.overflowDialog()} ${this.formDialog()}
+      ${this.renderImperativeDialog()}
     `
   }
 
@@ -244,6 +256,128 @@ class ComponentDemoPage extends DemoPage {
     `
   }
 
+  formDialog(): TemplateResult {
+    return html`
+      <section class="demo-section">
+        <h2 class="title-large">Form dialog</h2>
+        <p>This dialog contains a form with validation and submit handling.</p>
+        <ui-button color="filled" @click="${this.openForm}">Open Form Dialog</ui-button>
+        <form @submit="${this.handleFormSubmit}" style="display: contents;">
+          <ui-dialog
+            ?open="${this.formOpened}"
+            @close="${this.formClosed}"
+            modal
+            style="--ui-dialog-max-width: 500px;"
+            submitClose
+          >
+            <ui-icon slot="icon" icon="info"></ui-icon>
+            <span slot="title">User Registration</span>
+
+            <div style="display: flex; flex-direction: column; gap: 16px;">
+              <label style="display: flex; flex-direction: column; gap: 4px;">
+                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Full Name *</span>
+                <input
+                  type="text"
+                  name="fullName"
+                  required
+                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
+                  placeholder="Enter your full name"
+                />
+              </label>
+
+              <label style="display: flex; flex-direction: column; gap: 4px;">
+                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Email *</span>
+                <input
+                  type="email"
+                  name="email"
+                  required
+                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
+                  placeholder="Enter your email address"
+                />
+              </label>
+
+              <label style="display: flex; flex-direction: column; gap: 4px;">
+                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Phone Number</span>
+                <input
+                  type="tel"
+                  name="phone"
+                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px;"
+                  placeholder="Enter your phone number (optional)"
+                />
+              </label>
+
+              <label style="display: flex; flex-direction: column; gap: 4px;">
+                <span style="font-weight: 500; color: var(--md-sys-color-on-surface);">Department</span>
+                <select
+                  name="department"
+                  style="padding: 12px; border: 1px solid var(--md-sys-color-outline); border-radius: 4px; font-size: 14px; background: white;"
+                >
+                  <option value="">Select a department</option>
+                  <option value="engineering">Engineering</option>
+                  <option value="design">Design</option>
+                  <option value="marketing">Marketing</option>
+                  <option value="sales">Sales</option>
+                  <option value="support">Support</option>
+                </select>
+              </label>
+
+              <label style="display: flex; align-items: center; gap: 8px; margin-top: 8px;">
+                <input type="checkbox" name="newsletter" style="margin: 0;" />
+                <span style="font-size: 14px; color: var(--md-sys-color-on-surface);">
+                  Subscribe to our newsletter
+                </span>
+              </label>
+
+              <label style="display: flex; align-items: center; gap: 8px;">
+                <input type="checkbox" name="terms" required style="margin: 0;" />
+                <span style="font-size: 14px; color: var(--md-sys-color-on-surface);">
+                  I agree to the <a href="#" style="color: var(--md-sys-color-primary);">Terms and Conditions</a> *
+                </span>
+              </label>
+            </div>
+
+            <ui-button color="text" slot="button" value="dismiss">Cancel</ui-button>
+            <ui-button color="filled" slot="button" value="confirm" type="submit">Register</ui-button>
+          </ui-dialog>
+        </form>
+      </section>
+    `
+  }
+
+  protected handleFormSubmit(e: CustomEvent): void {
+    e.preventDefault()
+
+    // Get form data from the event
+    const form = e.target as HTMLFormElement
+    const formData = new FormData(form)
+
+    // Convert to regular object for easier handling
+    const data: Record<string, string | boolean> = {}
+    for (const [key, value] of formData.entries()) {
+      if (key === 'newsletter' || key === 'terms') {
+        data[key] = value === 'on'
+      } else {
+        data[key] = value as string
+      }
+    }
+
+    console.log('Form submitted with data:', data)
+
+    // Simulate form validation
+    if (!data.fullName || !data.email) {
+      console.error('Required fields are missing')
+      return
+    }
+
+    if (!data.terms) {
+      console.error('Terms and conditions must be accepted')
+      return
+    }
+
+    // If validation passes, the dialog will close automatically
+    console.log('Registration successful!', data)
+  }
+
   renderImperativeDialog(): TemplateResult {
     return html`
       <section class="demo-section">

package/demo/md/menu/index.ts

@@ -15,6 +15,8 @@ class ComponentDemoPage extends DemoPage {
   @reactive() accessor basicCount = 0
   @reactive() accessor nestedMenuOutput = ''
   @reactive() accessor nestedCount = 0
+  @reactive() accessor overflowMenuOutput = ''
+  @reactive() accessor overflowCount = 0
 
   handleBasicMenuSelect(e: CustomEvent): void {
     const item = e.detail.item as HTMLElement
@@ -30,8 +32,15 @@ class ComponentDemoPage extends DemoPage {
     this.nestedCount++
   }
 
+  handleOverflowMenuSelect(e: CustomEvent): void {
+    const item = e.detail.item as HTMLElement
+    const index = e.detail.index
+    this.overflowMenuOutput = `Selected item: ${item.textContent}, Index: ${index}`
+    this.overflowCount++
+  }
+
   contentTemplate(): TemplateResult {
-    const { basicMenuOutput, nestedMenuOutput, nestedCount, basicCount } = this
+    const { basicMenuOutput, nestedMenuOutput, nestedCount, basicCount, overflowMenuOutput, overflowCount } = this
     return html`
       <a href="../">Back</a>
 
@@ -68,6 +77,212 @@ class ComponentDemoPage extends DemoPage {
           : ''}
       </section>
 
+      <section class="demo-section">
+        <h2 class="title-large">Overflow Menu</h2>
+        <p>A menu with many items that will overflow and require scrolling:</p>
+        <ui-button id="overflow-menu-trigger" color="filled" popovertarget="overflow-menu"
+          >Open Overflow Menu</ui-button
+        >
+        <ui-menu id="overflow-menu" popover="auto" @select="${this.handleOverflowMenuSelect}">
+          <ui-menu-item>
+            <span slot="start"><ui-icon>home</ui-icon></span>
+            <span>Home</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>account_circle</ui-icon></span>
+            <span>Profile</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>settings</ui-icon></span>
+            <span>Settings</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>notifications</ui-icon></span>
+            <span>Notifications</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>mail</ui-icon></span>
+            <span>Messages</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>favorite</ui-icon></span>
+            <span>Favorites</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>bookmark</ui-icon></span>
+            <span>Bookmarks</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>history</ui-icon></span>
+            <span>History</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>download</ui-icon></span>
+            <span>Downloads</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>cloud</ui-icon></span>
+            <span>Cloud Storage</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>share</ui-icon></span>
+            <span>Share</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>security</ui-icon></span>
+            <span>Security</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>backup</ui-icon></span>
+            <span>Backup</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>sync</ui-icon></span>
+            <span>Sync</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>account_box</ui-icon></span>
+            <span>Account Management</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>payment</ui-icon></span>
+            <span>Payment Methods</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>credit_card</ui-icon></span>
+            <span>Billing</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>receipt</ui-icon></span>
+            <span>Receipts</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>analytics</ui-icon></span>
+            <span>Analytics</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>insights</ui-icon></span>
+            <span>Insights</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>trending_up</ui-icon></span>
+            <span>Trends</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>dashboard</ui-icon></span>
+            <span>Dashboard</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>widgets</ui-icon></span>
+            <span>Widgets</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>extension</ui-icon></span>
+            <span>Extensions</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>apps</ui-icon></span>
+            <span>Applications</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>devices</ui-icon></span>
+            <span>Devices</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>network_check</ui-icon></span>
+            <span>Network Status</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>wifi</ui-icon></span>
+            <span>Wi-Fi Settings</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>bluetooth</ui-icon></span>
+            <span>Bluetooth</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>location_on</ui-icon></span>
+            <span>Location Services</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>language</ui-icon></span>
+            <span>Language</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>accessibility</ui-icon></span>
+            <span>Accessibility</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>brightness_6</ui-icon></span>
+            <span>Display</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>volume_up</ui-icon></span>
+            <span>Sound</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>battery_std</ui-icon></span>
+            <span>Battery</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>storage</ui-icon></span>
+            <span>Storage</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>memory</ui-icon></span>
+            <span>Memory</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>update</ui-icon></span>
+            <span>Software Update</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>info</ui-icon></span>
+            <span>About</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>help</ui-icon></span>
+            <span>Help & Support</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>feedback</ui-icon></span>
+            <span>Send Feedback</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>bug_report</ui-icon></span>
+            <span>Report Bug</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>contact_support</ui-icon></span>
+            <span>Contact Support</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>forum</ui-icon></span>
+            <span>Community Forum</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>school</ui-icon></span>
+            <span>Learning Center</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>library_books</ui-icon></span>
+            <span>Documentation</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>video_library</ui-icon></span>
+            <span>Video Tutorials</span>
+          </ui-menu-item>
+          <ui-menu-item>
+            <span slot="start"><ui-icon>logout</ui-icon></span>
+            <span>Sign Out</span>
+          </ui-menu-item>
+        </ui-menu>
+        ${overflowMenuOutput
+          ? html`<p>${overflowMenuOutput}</p>
+              <p>Count: ${overflowCount}</p>`
+          : ''}
+      </section>
+
       <section class="demo-section">
         <h2 class="title-large">Submenus</h2>
         <p>A menu with submenus:</p>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",
@@ -182,7 +182,7 @@
     "dompurify": "^3.2.5",
     "idb-keyval": "^6.1.0",
     "lit": "^3.2.1",
-    "marked": "^15.0.7",
+    "marked": "^16.0.0",
     "monaco-editor": "^0.52.2",
     "nanoid": "^5.1.5",
     "prismjs": "^1.28.0",

package/src/elements/highlight/MarkedHighlight.ts

@@ -247,7 +247,8 @@ export default class MarkedHighlight extends LitElement {
       pedantic: this.pedantic,
       gfm: true,
     }
-    let out = marked(data, opts) as string
+    // eslint-disable-next-line no-misleading-character-class
+    let out = marked(data.replace(/^[\u200B\u200C\u200D\u200E\u200F\uFEFF]/, ''), opts) as string
     if (this.sanitize) {
       if (this.sanitizer) {
         out = this.sanitizer(out)

package/src/md/button/internals/base.ts

@@ -240,7 +240,7 @@ export default class BaseButton extends UiElement {
   }
 
   override handleClick(e: MouseEvent): void {
-    super.handleClick(e)
+    // Do not call super.handleClick() here, as it would call `endPress` again.
     if (this.disabled) {
       e.preventDefault()
       e.stopPropagation()