chore: release (next)

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to spectrum-two, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

spectrum-two is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on spectrum-two.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

@spectrum-css/[email protected]

Major Changes

📝 #4085 082862e Thanks @castastrophe!

Action menu component (now with custom styles!)

Introduces @spectrum-css/actionmenu, a composition of ActionButton, Popover, and Menu to present action lists from a trigger. Now with custom styles!

• Adds wrapper classes: spectrum-ActionMenu, spectrum-ActionMenu-trigger, spectrum-ActionMenu-popover, and spectrum-ActionMenu-menu.
• Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
• Design reference: Figma S2 token specs.

Migration notes

• If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has aria-haspopup="menu" and manages aria-expanded according to your application logic.
• For spacing customizations previously done with ad‑hoc margins, switch to the new --spectrum-actionmenu-button-to-menu-gap custom property.

Example markup:

<div class="spectrum-ActionMenu">
	<button
		class="spectrum-ActionMenu-trigger spectrum-ActionButton"
		aria-haspopup="menu"
		aria-expanded="false"
	>
		<!-- icon/label -->
	</button>
	<div class="spectrum-ActionMenu-popover spectrum-Popover">
		<ul class="spectrum-ActionMenu-menu spectrum-Menu">
			<!-- menu items -->
		</ul>
	</div>
	<!-- popover positioning/visibility is owned by your implementation -->
	<!-- use long-press behavior when appropriate to your UX -->
	<!-- use Popover placement options: bottom-start, bottom-end, start-top, end-top -->
</div>

Menu refinements

Updates @spectrum-css/menu styles to align with latest Spectrum 2 design specifications and improve accessibility.

• Updated .is-selectableMultiple .spectrum-Menu-itemCheckbox to .is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox to prevent clash with the .is-selectable placement.
• Non-breaking; no class or DOM changes required.

Action button refinements

• Selection styling now applies when components use ARIA pressed/expanded semantics, not just .is-selected.
• Implemented with :where() to keep selector specificity low and prevent downstream specificity battles.
• Non-breaking; no class changes required.

Action group refinements

Aligns selection behavior of grouped items with action button updates.

• Adds :where([aria-pressed="true"], [aria-expanded="true"]) alongside .is-selected on items to cover more accessibility use-cases while keeping specificity low.
• Non-breaking; no class changes required.

@spectrum-css/[email protected]

Minor Changes

📝 #4085 082862e Thanks @castastrophe!

Action menu component (now with custom styles!)

Introduces @spectrum-css/actionmenu, a composition of ActionButton, Popover, and Menu to present action lists from a trigger. Now with custom styles!

• Adds wrapper classes: spectrum-ActionMenu, spectrum-ActionMenu-trigger, spectrum-ActionMenu-popover, and spectrum-ActionMenu-menu.
• Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
• Design reference: Figma S2 token specs.

Migration notes

• If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has aria-haspopup="menu" and manages aria-expanded according to your application logic.
• For spacing customizations previously done with ad‑hoc margins, switch to the new --spectrum-actionmenu-button-to-menu-gap custom property.

Example markup:

<div class="spectrum-ActionMenu">
	<button
		class="spectrum-ActionMenu-trigger spectrum-ActionButton"
		aria-haspopup="menu"
		aria-expanded="false"
	>
		<!-- icon/label -->
	</button>
	<div class="spectrum-ActionMenu-popover spectrum-Popover">
		<ul class="spectrum-ActionMenu-menu spectrum-Menu">
			<!-- menu items -->
		</ul>
	</div>
	<!-- popover positioning/visibility is owned by your implementation -->
	<!-- use long-press behavior when appropriate to your UX -->
	<!-- use Popover placement options: bottom-start, bottom-end, start-top, end-top -->
</div>

Menu refinements

Updates @spectrum-css/menu styles to align with latest Spectrum 2 design specifications and improve accessibility.

• Updated .is-selectableMultiple .spectrum-Menu-itemCheckbox to .is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox to prevent clash with the .is-selectable placement.
• Non-breaking; no class or DOM changes required.

Action button refinements

• Selection styling now applies when components use ARIA pressed/expanded semantics, not just .is-selected.
• Implemented with :where() to keep selector specificity low and prevent downstream specificity battles.
• Non-breaking; no class changes required.

Action group refinements

Aligns selection behavior of grouped items with action button updates.

• Adds :where([aria-pressed="true"], [aria-expanded="true"]) alongside .is-selected on items to cover more accessibility use-cases while keeping specificity low.
• Non-breaking; no class changes required.

@spectrum-css/[email protected]

Patch Changes

Updated dependencies []:

• @spectrum-css/[email protected]

@spectrum-css/[email protected]

Patch Changes

📝 #4085 082862e Thanks @castastrophe!

Action menu component (now with custom styles!)

Introduces @spectrum-css/actionmenu, a composition of ActionButton, Popover, and Menu to present action lists from a trigger. Now with custom styles!

• Adds wrapper classes: spectrum-ActionMenu, spectrum-ActionMenu-trigger, spectrum-ActionMenu-popover, and spectrum-ActionMenu-menu.
• Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
• Design reference: Figma S2 token specs.

Migration notes

• If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has aria-haspopup="menu" and manages aria-expanded according to your application logic.
• For spacing customizations previously done with ad‑hoc margins, switch to the new --spectrum-actionmenu-button-to-menu-gap custom property.

Example markup:

<div class="spectrum-ActionMenu">
	<button
		class="spectrum-ActionMenu-trigger spectrum-ActionButton"
		aria-haspopup="menu"
		aria-expanded="false"
	>
		<!-- icon/label -->
	</button>
	<div class="spectrum-ActionMenu-popover spectrum-Popover">
		<ul class="spectrum-ActionMenu-menu spectrum-Menu">
			<!-- menu items -->
		</ul>
	</div>
	<!-- popover positioning/visibility is owned by your implementation -->
	<!-- use long-press behavior when appropriate to your UX -->
	<!-- use Popover placement options: bottom-start, bottom-end, start-top, end-top -->
</div>

Menu refinements

Updates @spectrum-css/menu styles to align with latest Spectrum 2 design specifications and improve accessibility.

• Updated .is-selectableMultiple .spectrum-Menu-itemCheckbox to .is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox to prevent clash with the .is-selectable placement.
• Non-breaking; no class or DOM changes required.

Action button refinements

• Selection styling now applies when components use ARIA pressed/expanded semantics, not just .is-selected.
• Implemented with :where() to keep selector specificity low and prevent downstream specificity battles.
• Non-breaking; no class changes required.

Action group refinements

Aligns selection behavior of grouped items with action button updates.

• Adds :where([aria-pressed="true"], [aria-expanded="true"]) alongside .is-selected on items to cover more accessibility use-cases while keeping specificity low.
• Non-breaking; no class changes required.

@spectrum-css/[email protected]

Patch Changes

📝 #4085 082862e Thanks @castastrophe!

Action menu component (now with custom styles!)

Introduces @spectrum-css/actionmenu, a composition of ActionButton, Popover, and Menu to present action lists from a trigger. Now with custom styles!

• Adds wrapper classes: spectrum-ActionMenu, spectrum-ActionMenu-trigger, spectrum-ActionMenu-popover, and spectrum-ActionMenu-menu.
• Supports long press triggers and four placements (start/end, top/bottom) via the underlying popover API.
• Design reference: Figma S2 token specs.

Migration notes

• If you previously composed an action menu manually (action button + popover + menu), you can adopt the new wrapper classes without changing the underlying markup semantics. Ensure the trigger has aria-haspopup="menu" and manages aria-expanded according to your application logic.
• For spacing customizations previously done with ad‑hoc margins, switch to the new --spectrum-actionmenu-button-to-menu-gap custom property.

Example markup:

<div class="spectrum-ActionMenu">
	<button
		class="spectrum-ActionMenu-trigger spectrum-ActionButton"
		aria-haspopup="menu"
		aria-expanded="false"
	>
		<!-- icon/label -->
	</button>
	<div class="spectrum-ActionMenu-popover spectrum-Popover">
		<ul class="spectrum-ActionMenu-menu spectrum-Menu">
			<!-- menu items -->
		</ul>
	</div>
	<!-- popover positioning/visibility is owned by your implementation -->
	<!-- use long-press behavior when appropriate to your UX -->
	<!-- use Popover placement options: bottom-start, bottom-end, start-top, end-top -->
</div>

Menu refinements

Updates @spectrum-css/menu styles to align with latest Spectrum 2 design specifications and improve accessibility.

• Updated .is-selectableMultiple .spectrum-Menu-itemCheckbox to .is-selectableMultiple:not(:has(.is-selectable)) .spectrum-Menu-itemCheckbox to prevent clash with the .is-selectable placement.
• Non-breaking; no class or DOM changes required.

Action button refinements

• Selection styling now applies when components use ARIA pressed/expanded semantics, not just .is-selected.
• Implemented with :where() to keep selector specificity low and prevent downstream specificity battles.
• Non-breaking; no class changes required.

Action group refinements

Aligns selection behavior of grouped items with action button updates.

• Adds :where([aria-pressed="true"], [aria-expanded="true"]) alongside .is-selected on items to cover more accessibility use-cases while keeping specificity low.
• Non-breaking; no class changes required.

@spectrum-css/[email protected]

Patch Changes

Updated dependencies [082862e]:

• @spectrum-css/[email protected]
• @spectrum-css/[email protected]
• @spectrum-css/[email protected]
• @spectrum-css/[email protected]

[github-actions]

📚 Branch preview

PR #4254 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4254/index.html.

[github-actions]

File metrics

Summary

Total size: 1.43 MB^*

🎉 No changes detected in any packages

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.