npm - @api-client/ui - Versions diffs - 0.5.23 → 0.5.24 - Mend

@api-client/ui 0.5.23 → 0.5.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/build/src/md/list/internals/List.js +1 -1
package/build/src/md/list/internals/List.js.map +1 -1
package/build/src/md/menu/internal/Menu.d.ts.map +1 -1
package/build/src/md/menu/internal/Menu.js +13 -0
package/build/src/md/menu/internal/Menu.js.map +1 -1
package/build/src/md/menu/internal/Menu.styles.d.ts.map +1 -1
package/build/src/md/menu/internal/Menu.styles.js +66 -1
package/build/src/md/menu/internal/Menu.styles.js.map +1 -1
package/package.json +1 -1
package/src/md/list/internals/List.ts +1 -1
package/src/md/menu/internal/Menu.styles.ts +66 -1
package/src/md/menu/internal/Menu.ts +14 -0

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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: '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 CHANGED Viewed

	@@ -1 +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;~~IA2BpB~~;;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"}
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;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 CHANGED Viewed

@@ -144,6 +144,19 @@ let Menu = (() => {
             // 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.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;

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

	@@ -1 +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 // 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 // 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"]}
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 // 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/menu/internal/Menu.styles.ts"],"names":[],"mappings":";AAEA,~~wBAsMC~~"}
1	+ {"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 CHANGED Viewed

@@ -28,9 +28,47 @@ export default css `
   :host(:popover-open) {
     display: block;
-    background-color: var(--md-sys-color-surface-container-low);
+    background-color: var(--md-sys-color-surface-container);
     border-radius: var(--md-sys-shape-corner-extra-small);
     box-shadow: var(--md-sys-elevation-3);
+    animation: menu-scale-in 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  }
+  /* Scale animation for menus positioned below the anchor */
+  @keyframes menu-scale-in {
+    0% {
+      transform: scaleY(0);
+      transform-origin: top center;
+      opacity: 0;
+    }
+    100% {
+      transform: scaleY(1);
+      transform-origin: top center;
+      opacity: 1;
+    }
+  }
+  /* Scale animation for menus positioned above the anchor */
+  @keyframes menu-scale-in-up {
+    0% {
+      transform: scaleY(0);
+      transform-origin: bottom center;
+      opacity: 0;
+    }
+    100% {
+      transform: scaleY(1);
+      transform-origin: bottom center;
+      opacity: 1;
+    }
+  }
+  /* Position-specific animations using JavaScript-detected classes */
+  :host(.menu-positioned-above):popover-open {
+    animation: menu-scale-in-up 0.15s var(--md-sys-motion-easing-standard-accelerate) forwards;
+  }
+  :host(.menu-positioned-below):popover-open {
+    animation: menu-scale-in 0.15s var(--md-sys-motion-easing-standard-accelerate) forwards;
   }
   .menu-container {
@@ -141,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 */
@@ -196,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 CHANGED Viewed

	@@ -1 +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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsMjB,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~~-low~~);\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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.23",
+  "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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

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