sp-menu

NPM 1.3.0

View Storybook

Try it on webcomponents.dev
Overview API Changelog

Overview

An <sp-menu> is used for creating a menu list. The various elements inside a menu are given as <sp-menu-group>, <sp-menu-item>, or <sp-menu-divider>. Often a <sp-menu> element will appear in a <sp-popover> element so that it displays as a toggling menu.

Usage

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/menu

Import the side effectful registration of <sp-menu>, <sp-menu-group>, <sp-menu-item>, or <sp-menu-divider> individually as follows:

import '@spectrum-web-components/menu/sp-menu.js';
import '@spectrum-web-components/menu/sp-menu-group.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
import '@spectrum-web-components/menu/sp-menu-divider.js';

When looking to leverage the Menu, MenuGroup, MenuItem, or MenuDivider base classes as a type and/or for extension purposes, do so via:

import {
    Menu,
    MenuGroup,
    MenuItem,
    MenuDivider
} from '@spectrum-web-components/menu';

Anatomy

<sp-menu label="Selection type">
    <sp-menu-item>
        Deselect
    </sp-menu-item>
    <sp-menu-item>
        Select inverse
    </sp-menu-item>
    <sp-menu-item>
        Feather...
    </sp-menu-item>
    <sp-menu-item>
        Select and mask...
    </sp-menu-item>
    <sp-menu-item>
        Save selection
    </sp-menu-item>
    <sp-menu-item disabled>
        Make work path
    </sp-menu-item>
</sp-menu>

Popover menus

Often an <sp-menu> element will be delivered inside of an <sp-popover> element when displaying it above other content.

<sp-popover open style="position: relative" label="Selection type">
    <sp-menu>
        <sp-menu-item value="item-1">Deselect</sp-menu-item>
        <sp-menu-item value="item-2">Select inverse</sp-menu-item>
        <sp-menu-item value="item-3">Feather...</sp-menu-item>
        <sp-menu-item value="item-4">Select and mask...</sp-menu-item>
        <sp-menu-item value="item-5">Save selection</sp-menu-item>
        <sp-menu-item value="item-6" disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>

Labels

To render accessibly, an <sp-menu> element or its parent <sp-popover> must have a label. For an accessible label that is visibly hidden, but can still be read by assistive technology, use the label attribute.

Menu with label 
<sp-menu id="menu-label-attribute" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
 Popover with label 
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="popover-label-attribute">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>

Options

Sizes

Small 
<sp-menu id="menu-s" size="s" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="menu-s-popover" size="s">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>
 Medium 
<sp-menu id="menu-m" size="m" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="menu-m-popover" size="m">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>
 Large 
<sp-menu id="menu-l" size="l" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="menu-l-popover" size="l">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>
 Extra Large 
<sp-menu id="menu-xl" size="xl" label="Selection type">
    <sp-menu-item>Deselect</sp-menu-item>
    <sp-menu-item>Select inverse</sp-menu-item>
    <sp-menu-item>Feather...</sp-menu-item>
    <sp-menu-item>Select and mask...</sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>Save selection</sp-menu-item>
    <sp-menu-item disabled>Make work path</sp-menu-item>
</sp-menu>
<sp-popover open style="position: relative" label="Selection type:">
    <sp-menu id="menu-xl-popover" size="xl">
        <sp-menu-item>Deselect</sp-menu-item>
        <sp-menu-item>Select inverse</sp-menu-item>
        <sp-menu-item>Feather...</sp-menu-item>
        <sp-menu-item>Select and mask...</sp-menu-item>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-item>Save selection</sp-menu-item>
        <sp-menu-item disabled>Make work path</sp-menu-item>
    </sp-menu>
</sp-popover>

Selection

The <sp-menu> element can be instructed to maintain a selection via the selects attribute. Depending on the chosen algorithm, the <sp-menu> element will hold a value property and manage the selected state of its <sp-menu-item> descendants.

  • When selects="single", the <sp-menu> element will maintain one selected item after an initial selection is made.
  • When selects is set to multiple, the <sp-menu> element will maintain zero or more selected items.
  • When selects is set to inherit, the <sp-menu> element will allow its <sp-menu-item> children to participate in the selection of its nearest <sp-menu> ancestor.
Single 
<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="single-value"></span>
</p>
<sp-menu
    label="Choose a shape"
    selects="single"
    onchange="this.previousElementSibling.querySelector('#single-value').textContent=this.value"
>
    <sp-menu-item value="item-1">Square</sp-menu-item>
    <sp-menu-item value="item-2" selected>Triangle</sp-menu-item>
    <sp-menu-item value="item-3">Parallelogram</sp-menu-item>
    <sp-menu-item value="item-4">Star</sp-menu-item>
    <sp-menu-item value="item-5">Hexagon</sp-menu-item>
    <sp-menu-item value="item-6" disabled>Circle</sp-menu-item>
</sp-menu>
 Multiple 
<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="multiple-value">item-3,item-4</span>
</p>
<sp-menu
    label="Choose some fruit"
    selects="multiple"
    onchange="this.previousElementSibling.querySelector('#multiple-value').textContent=this.value"
>
    <sp-menu-item value="item-1">Apple</sp-menu-item>
    <sp-menu-item value="item-2">Banana</sp-menu-item>
    <sp-menu-item value="item-3" selected>Goji berry</sp-menu-item>
    <sp-menu-item value="item-4" selected>Grapes</sp-menu-item>
    <sp-menu-item value="item-5" disabled>Kumquat</sp-menu-item>
    <sp-menu-item value="item-6">Orange</sp-menu-item>
</sp-menu>
 Inherit 
<p>
    The value of the `&lt;sp-menu&gt;` element is:
    <span id="inherit-value">item-3 || item-4 || item-8 || item-11</span>
</p>
<sp-menu
    label="Choose some groceries"
    selects="multiple"
    value-separator=" || "
    onchange="this.previousElementSibling.querySelector('#inherit-value').textContent=this.value"
>
    <sp-menu label="Fruit" selects="inherit">
        <sp-menu-item value="item-1">Apple</sp-menu-item>
        <sp-menu-item value="item-2">Banana</sp-menu-item>
        <sp-menu-item value="item-3" selected>Goji berry</sp-menu-item>
        <sp-menu-item value="item-4" selected>Grapes</sp-menu-item>
        <sp-menu-item value="item-5" disabled>Kumquat</sp-menu-item>
        <sp-menu-item value="item-6">Orange</sp-menu-item>
    </sp-menu>
    <sp-menu label="Vegetables" selects="inherit">
        <sp-menu-item value="item-7">Carrot</sp-menu-item>
        <sp-menu-item value="item-8" selected>Garlic</sp-menu-item>
        <sp-menu-item value="item-9" disabled>Lettuce</sp-menu-item>
        <sp-menu-item value="item-10">Onion</sp-menu-item>
        <sp-menu-item value="item-11" selected>Potato</sp-menu-item>
        <sp-menu-item value="item-12">Tomato</sp-menu-item>
    </sp-menu>
</sp-menu>

Behaviors

"change" event

Regardless of whether or not <sp-menu> carries a selection, when one of the <sp-menu-item> children that it manages is activated, the <sp-menu> element will dispatch a change event. At dispatch time, even when a selection is not held due to the absence of the selects attribute, the value of the <sp-menu> will correspond to the <sp-menu-item> that was activated. When the selects attribute is present, this value will persist beyond the lifecycle of the change event. When selects="multiple", the values of multiple items will be comma separated, unless otherwise set via the value-separator attribute.

Note: The change event is only dispatched on a left mouse click or Enter/Space keypress. Right/Middle mouse clicks will not dispatch the change event.

Accessibility

Review the accessibility guidelines for the menu-item and menu-group descendants.

Include a label

A menu is required to have an accessible label.

Attributes and Properties

Property Attribute Type Default Description ignore ignore boolean false whether menu should be ignored by roving tabindex controller label label string '' label of the menu selects selects undefined | 'inherit' | 'single' | 'multiple' how the menu allows selection of its items: - `undefined` (default): no selection is allowed - `"inherit"`: the selection behavior is managed from an ancestor - `"single"`: only one item can be selected at a time - `"multiple"`: multiple items can be selected value value string '' value of the selected item(s) valueSeparator value-separator string ','

Slots

Name Description default slot menu items to be listed in the menu

Events

Name Type Description change Event Announces that the `value` of the element has changed close Event

Minor Changes

  • #5031 ea38ef0 Thanks @nikkimk! - Used WAI ARIA Authoring Practices Guide (APG) to make accessibility improvements for <sp-action-menu>, <sp-menu>, and <sp-picker>, including:

    • Numpad keys now work with <sp-picker> and <sp-action-menu> -<sp-action-menu>'s <sp-menu-item> elements can now be read by a screen reader (#4556)
    • <sp-menu-item> href can now be clicked by a screen reader (#4997)
    • Opening a <sp-action-menu>, <sp-menu>, and <sp-picker> with a keyboard now sets focus on an item within the menu. (#4557)

    See the following APG examples for more information:

    • Navigation Menu Example
    • Editor Menubar Example

Patch Changes

  • #5176 468314f Thanks @TarunAdobe! - 1. chore(checkbox): updated to latest css v10.1.1 for s2 fast follow

    1. chore(dialog): The error property was not properly deprecated with a full migration plan in place. This has caused confusion and false sense of urgency for consumers to migrate. We are removing it to eliminate those pain points for consumers while we take a deep look at our dialogs and patterns.
    2. chore(menu): updated to latest css v9.1.1 for s2 fast follow
    3. fix(overlay): sp-overlay with type="manual" should close on pressing ESC key. When the last item is on overlay stack we are triggering the close method on esc key event.

  • Updated dependencies [ea38ef0, 468314f]:

    • @spectrum-web-components/reactive-controllers@1.3.0
    • @spectrum-web-components/overlay@1.3.0
    • @spectrum-web-components/popover@1.3.0
    • @spectrum-web-components/action-button@1.3.0
    • @spectrum-web-components/divider@1.3.0
    • @spectrum-web-components/icon@1.3.0
    • @spectrum-web-components/icons-ui@1.3.0
    • @spectrum-web-components/base@1.3.0
    • @spectrum-web-components/shared@1.3.0

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

1.2.0 (2025-02-27)

Bug Fixes

  • action menu: keyboard accessibility omnibus (#5031) (ea38ef0), closes #4623
  • menu: make submenu scrollable (#5082) (a13dac2)
  • picker: update picker when menu item icons change (#5088) (63ef1ad)

1.1.2 (2025-02-12)

Note: Version bump only for package @spectrum-web-components/menu

1.1.1 (2025-01-29)

Note: Version bump only for package @spectrum-web-components/menu

1.1.0 (2025-01-29)

Bug Fixes

  • lock prerelease versions for Spectrum CSS (#5014) (8aa7734)

Features

  • add an optional chromatic vrt action (7d2f840)

1.0.3 (2024-12-09)

Note: Version bump only for package @spectrum-web-components/menu

1.0.1 (2024-11-11)

Bug Fixes

  • menu: prevent sp-menu-item text-align cascading (#4868) (6663820)

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/menu

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/menu

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/menu

0.48.0 (2024-09-17)

Bug Fixes

  • menu: allow menu-item to support arbitrary element as the submenu root (#4720) (4c6a0dc)

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/menu

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/menu

0.47.0 (2024-08-20)

Features

  • breadcrumbs: add Breadcrumbs component (#4578) (acd4b5e)

0.46.0 (2024-08-08)

Bug Fixes

  • menu: should not make a selection on right click (#4642) (d269629)

Features

  • upgrade menu and dialog grid css (#4638) (ab9d468)

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/menu

0.44.0 (2024-07-15)

Features

  • action-bar: support for action-menus (#3780) (4aff599)

0.43.0 (2024-06-11)

Bug Fixes

  • menu: enable numpad arrow and Enter keys (#4492) (012c411)

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/menu

0.42.4 (2024-05-14)

Bug Fixes

  • action-menu: allow menu groups to handle their own selections (#4397) (5a19051)

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/menu

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/menu

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/menu

0.42.0 (2024-03-19)

Bug Fixes

  • menu: release synthetic "click" promise to unblock keyboard interactions (f8aecf3)

Features

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Bug Fixes

  • menu: fix css for disabled "value" slots in menu items (#4113) (3c5855d)

0.41.1 (2024-02-22)

Bug Fixes

  • menu: correct disabled menu item's chevron to appropriate colour (#4052) (30f5bb5)

0.41.0 (2024-02-13)

Bug Fixes

  • support generating random IDs outside of secure contexts (485a67c)

0.40.5 (2024-02-05)

Bug Fixes

  • menu: process ":active" styles (7917583)

0.40.4 (2024-01-29)

Bug Fixes

  • picker,action-menu,split-button: update interaction model (#3935) (bae7d52)

0.40.3 (2024-01-11)

Bug Fixes

  • overlay: move closed overlays to "display: none" (fc0278b)

0.40.2 (2023-12-18)

Bug Fixes

  • menu: support navigating to and selecting Menu Items in Menu Groups (8469ab2)

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/menu

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/menu

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/menu

0.39.3 (2023-10-18)

Bug Fixes

  • update deps graph, fix imports (f633005)

0.39.2 (2023-10-13)

Bug Fixes

  • menu: conditionally access slots for their assigned content (#3717) (c045822)

0.39.1 (2023-10-06)

Bug Fixes

  • menu: allow change events to be direct (#3689) (b2cd3da)

0.39.0 (2023-09-25)

Bug Fixes

  • menu: allow Menu elements to be controlled (74ed7fb)
  • menu: manage deeply slotted menu items and initial focus (7f9ad69)

0.38.0 (2023-09-05)

Bug Fixes

  • menu: added support for menu item description (#3559) (ce99528)
  • menu: correct types import for .d.ts file creation (a11d264)

0.37.0 (2023-08-18)

Bug Fixes

  • ensure submenus stay open when root it clicked again (83ced1c)

Features

  • menu: prepare for Overlay v2 and less connnected/disconnected responsibilities (5dfb71e)

Performance Improvements

  • make lots of things lazy (b8fa3ad)
  • make submenus lazier (a2d661c)
  • make submenus lazy (93531b9)

0.36.0 (2023-08-18)

Features

  • menu: convert to core tokens (#3254) (da43540)

0.35.0 (2023-07-31)

Bug Fixes

  • menu item missing aria labels (#3417) (0d04869)

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/menu

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/menu

0.33.1 (2023-06-14)

Bug Fixes

  • menu: #3164 plug memory leak with gobal events (ff589d4)

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/menu

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/menu

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/menu

0.30.0 (2023-05-03)

Bug Fixes

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)
  • add "value" slot to sp-menu-item (e1bd264)
  • add icon present and icon-only support to Picker (f6887a3)
  • add value/selection checks to the tests and fix up the value logic (933106f)
  • address a11y issues raised by updating our dependencies (4f06477)
  • correct @element jsDoc listing across library (c97a632)
  • correctly delivery visuals and mouse interactions for litAnchor and extensions (0ae889a)
  • dropdown: improve accessibility (389d9d9)
  • ensure Action Menu Item with [href] close the menu (6b3d87f)
  • ensure browser understandable extensions (f4e59f7)
  • ensure that an overlay can be released even if it does not complete its fade in animation (4cbb36f)
  • ensure that entering an ancestor Menu Item without a submen closes related submenus (efe5fa1)
  • include "type" in package.json, generate custom-elements.json (1a8d716)
  • include default export in the "exports" fields (f32407d)
  • include the "types" entry in package.json files (b432f59)
  • match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)
  • menu: add support for submenu interactions (68399af)
  • menu: allow for settign "selected" async from above (9d7f622)
  • menu: cache item parent element to correct disconnecting event dispatch (f375510)
  • menu: clarify menu internal focus management via preventScroll option (9ae092c)
  • menu: disabled menu-item should not open submenu (33848bc)
  • menu: ensure active descendant is in view when activated (6edc351)
  • menu: ensure that Groups in Action Menus are rendered with the correct width (a996a10)
  • menu: include all direct dependencies (aa7327f)
  • menu: manage tabindex and focus entry correctly (3b1a250)
  • menu: only scrollIntoView when keyboard navigating (f4e9278)
  • menu: pass current focus visibility to menu items (2d3bf80)
  • menu: patch undefined lastFocusedItem (772a7ea)
  • menu: prevent infinite loop when focus() (e4e98a3)
  • menu: support menu item list change in deep decendents (b2b47f3)
  • normalize "event" and "error" argument names (8d382cd)
  • picker: allow menu items to be added, updated, and removed (73511ba)
  • prepare for querying child items while disconnected (f4152a5)
  • prevent infinite loops when all children are [disabled] (2deac3d)
  • prevent leaving multiple submenus open at a time (d2bfbb2)
  • remove usage where deprecated (387db3b)
  • simplify focus application in Menu (6140169)
  • split-button: hide "selected" item from menu (322a966)
  • stop merging selectors in a way that alters the cascade (369388f)
  • style clean up (49e1537)
  • update consumption of Spectrum CSS for latest version (ed2305b)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update Picker label via MutationObserver instead of "slotchange" (196998e)
  • update role application logic to not overwrite menu* roles (94b6aec)
  • update side effect listings (8160d3a)
  • update to latest spectrum-css packages (a5ca19f)
  • use icons without "size" values (3fc7c91)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • action-button: add action button pattern (03ac00a)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • add screenshot regression testing to CI (8205dfe)
  • add selects attribute to menu (bdf2578)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • allow dir management by sp-theme elements (2d10158)
  • conditionally load focus-visible polyfill (6b5e5cf)
  • delivery dev mode messages in various packages (62370a1)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • include all Dev Mode files in side effects (f70817c)
  • leverage "exports" field in package.json (321abd7)
  • menu: update spectrum css input (8c7e18a)
  • overlay: manage focus throwing and tab trapping (27a0b53)
  • picker: process field-label content for more accurate a11y tree (dc9df54)
  • picker: support responsive delivery of menu (20031d1)
  • reparentChildren - refactored arguments - breaking change (dea2bc5)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • split-button: add split-button pattern (4833a59)
  • update lit-* dependencies, wip (377f3c8)
  • update Menu Divider for new Spectrum CSS output (aca7e2d)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • use :focus-visable (via polyfill) instead of :focus (11c6fc7)
  • use @adobe/spectrum-css@2.15.1 (3918888)
  • use latest exports specification (a7ecf4b)

Performance Improvements

  • reorganize inheritance and composition in Menu Items (d96ccb6)
  • use "sideEffects" listing in package.json (7271614)
  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

Reverts

  • Revert "chore: release new versions" (a6d655d)

0.16.17 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/menu

0.16.16 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/menu

0.16.15 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/menu

0.16.14 (2023-03-08)

Note: Version bump only for package @spectrum-web-components/menu

0.16.13 (2023-02-13)

Note: Version bump only for package @spectrum-web-components/menu

0.16.12 (2023-02-08)

Bug Fixes

  • menu: patch undefined lastFocusedItem (772a7ea)
  • prepare for querying child items while disconnected (f4152a5)

0.16.11 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/menu

0.16.10 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/menu

0.16.9 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/menu

0.16.8 (2022-11-21)

Bug Fixes

  • ensure that an overlay can be released even if it does not complete its fade in animation (4cbb36f)

0.16.7 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/menu

0.16.6 (2022-10-28)

Bug Fixes

  • ensure Action Menu Item with [href] close the menu (6b3d87f)

0.16.5 (2022-10-17)

Bug Fixes

  • menu: ensure that Groups in Action Menus are rendered with the correct width (a996a10)

0.16.4 (2022-10-10)

Bug Fixes

  • match "pointerup" listeners with "pointercancel" for full coverage (7f2ce92)

0.16.3 (2022-09-15)

Note: Version bump only for package @spectrum-web-components/menu

0.16.2 (2022-09-14)

Note: Version bump only for package @spectrum-web-components/menu

0.16.1 (2022-08-24)

Note: Version bump only for package @spectrum-web-components/menu

0.16.0 (2022-08-09)

Features

  • include all Dev Mode files in side effects (f70817c)

0.15.0 (2022-08-04)

Features

  • delivery dev mode messages in various packages (62370a1)

0.14.4 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/menu

0.14.3 (2022-06-29)

Bug Fixes

  • ensure that entering an ancestor Menu Item without a submen closes related submenus (efe5fa1)
  • update Picker label via MutationObserver instead of "slotchange" (196998e)

0.14.2 (2022-06-07)

Bug Fixes

  • prevent leaving multiple submenus open at a time (d2bfbb2)
  • menu: disabled menu-item should not open submenu (33848bc)

0.14.1 (2022-05-27)

Bug Fixes

  • update consumption of Spectrum CSS for latest version (ed2305b)

0.14.0 (2022-05-12)

Features

  • update Menu Divider for new Spectrum CSS output (aca7e2d)

0.13.0 (2022-04-21)

Features

  • conditionally load focus-visible polyfill (6b5e5cf)
  • reparentChildren - refactored arguments - breaking change (dea2bc5)

0.12.5 (2022-03-30)

Note: Version bump only for package @spectrum-web-components/menu

0.12.4 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/menu

0.12.3 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/menu

0.12.2 (2022-03-04)

Bug Fixes

  • menu: add support for submenu interactions (68399af)

0.12.1 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/menu

0.12.0 (2022-02-02)

Features

  • picker: support responsive delivery of menu (20031d1)

0.11.3 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/menu

0.11.2 (2022-01-07)

Note: Version bump only for package @spectrum-web-components/menu

0.11.1 (2021-12-13)

Bug Fixes

  • picker: allow menu items to be added, updated, and removed (73511ba)

0.11.0 (2021-11-08)

Features

  • update lit-* dependencies, wip (377f3c8)

0.10.1 (2021-11-08)

Bug Fixes

  • abstract "hasVisibleFocusInTree" functionality and return trigger focus after close (4f39f2c)

0.10.0 (2021-11-02)

Features

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.9.6 (2021-10-12)

Note: Version bump only for package @spectrum-web-components/menu

0.9.5 (2021-10-05)

Bug Fixes

  • menu: cache item parent element to correct disconnecting event dispatch (f375510)

0.9.4 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/menu

0.9.3 (2021-09-13)

Bug Fixes

  • simplify focus application in Menu (6140169)

0.9.2 (2021-08-24)

Bug Fixes

  • correct @element jsDoc listing across library (c97a632)

0.9.1 (2021-08-17)

Performance Improvements

  • reorganize inheritance and composition in Menu Items (d96ccb6)

0.9.0 (2021-08-03)

Bug Fixes

  • add value/selection checks to the tests and fix up the value logic (933106f)
  • split-button: hide "selected" item from menu (322a966)

Features

  • add selects attribute to menu (bdf2578)

0.8.10 (2021-07-22)

Bug Fixes

  • style clean up (49e1537)

0.8.9 (2021-07-01)

Bug Fixes

  • add "value" slot to sp-menu-item (e1bd264)
  • add icon present and icon-only support to Picker (f6887a3)

0.8.8 (2021-06-16)

Bug Fixes

  • update role application logic to not overwrite menu* roles (94b6aec)

0.8.7 (2021-06-07)

Bug Fixes

  • menu: clarify menu internal focus management via preventScroll option (9ae092c)

0.8.6 (2021-05-24)

Note: Version bump only for package @spectrum-web-components/menu

0.8.5 (2021-05-12)

Bug Fixes

  • menu: pass current focus visibility to menu items (2d3bf80)

0.8.4 (2021-04-15)

Bug Fixes

  • menu: manage tabindex and focus entry correctly (3b1a250)
  • menu: only scrollIntoView when keyboard navigating (f4e9278)

0.8.3 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/menu

0.8.2 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/menu

0.8.1 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/menu

0.8.0 (2021-03-22)

Bug Fixes

  • correctly delivery visuals and mouse interactions for litAnchor and extensions (0ae889a)
  • remove usage where deprecated (387db3b)

Features

  • picker: process field-label content for more accurate a11y tree (dc9df54)

0.7.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/menu

0.7.0 (2021-03-04)

Bug Fixes

  • menu: ensure active descendant is in view when activated (6edc351)

Features

  • use latest exports specification (a7ecf4b)

0.6.3 (2021-02-11)

Bug Fixes

  • update to latest spectrum-css packages (a5ca19f)

0.6.2 (2021-02-02)

Note: Version bump only for package @spectrum-web-components/menu

0.6.1 (2021-01-28)

Note: Version bump only for package @spectrum-web-components/menu

0.6.0 (2021-01-21)

Bug Fixes

  • address a11y issues raised by updating our dependencies (4f06477)
  • include the "types" entry in package.json files (b432f59)
  • prevent infinite loops when all children are [disabled] (2deac3d)
  • stop merging selectors in a way that alters the cascade (369388f)
  • use icons without "size" values (3fc7c91)
  • menu: prevent infinite loop when focus() (e4e98a3)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • action-button: add action button pattern (03ac00a)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • menu: update spectrum css input (8c7e18a)

0.5.0 (2021-01-13)

Bug Fixes

  • include the "types" entry in package.json files (b432f59)
  • prevent infinite loops when all children are disabled
  • stop merging selectors in a way that alters the cascade (369388f)
  • use icons without "size" values (3fc7c91)
  • menu: prevent infinite loop when focus() (e4e98a3)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • use latest @spectrum-css/* versions (c35eb86)

Features

  • action-button: add action button pattern (03ac00a)
  • action-group: manage "one" and "multiple" selections (6fad59e)
  • icons-workflow: vend fully registered icon components (941f3a4)
  • menu: update spectrum css input (8c7e18a)

0.4.4 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/menu

0.4.3 (2020-10-12)

Bug Fixes

  • include default export in the "exports" fields (f32407d)
  • dropdown: improve accessibility (389d9d9)

0.4.2 (2020-09-25)

Bug Fixes

  • update side effect listings (8160d3a)

0.4.1 (2020-09-14)

Note: Version bump only for package @spectrum-web-components/menu

0.4.0 (2020-08-31)

Features

  • allow dir management by sp-theme elements (2d10158)
  • update to Spectrum CSS v3.0.0 (e8b3d8f)
  • split-button: add split-button pattern (4833a59)

0.3.2 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/menu

0.3.1 (2020-08-13)

Bug Fixes

  • menu: include all direct dependencies (aa7327f)
  • ensure browser understandable extensions (f4e59f7)

0.3.0 (2020-07-17)

Features

  • overlay: manage focus throwing and tab trapping (27a0b53)
  • leverage "exports" field in package.json (321abd7)

0.2.7 (2020-06-08)

Bug Fixes

  • menu: support menu item list change in deep decendents (b2b47f3)

0.2.6 (2020-04-16)

Performance Improvements

  • use "sideEffects" listing in package.json (7271614)

0.2.5 (2020-04-07)

Note: Version bump only for package @spectrum-web-components/menu

0.2.4 (2020-03-11)

Note: Version bump only for package @spectrum-web-components/menu

0.2.3 (2020-01-06)

Note: Version bump only for package @spectrum-web-components/menu

0.2.2 (2019-12-02)

Bug Fixes

  • normalize "event" and "error" argument names (8d382cd)

0.2.1 (2019-11-27)

Bug Fixes

  • include "type" in package.json, generate custom-elements.json (1a8d716)

0.2.0 (2019-11-19)

Bug Fixes

  • menu: allow for settign "selected" async from above (9d7f622)

Features

  • add screenshot regression testing to CI (8205dfe)
  • use :focus-visable (via polyfill) instead of :focus (11c6fc7)
  • use @adobe/spectrum-css@2.15.1 (3918888)

0.1.4 (2019-10-14)

Performance Improvements

  • use imported TypeScript helpers instead of inlining them (cc2bd0a)

0.1.3 (2019-10-03)

Note: Version bump only for package @spectrum-web-components/menu