Merge 40cb5e6 into ce88bc0

Author: coldlink

.changeset/add-menu-component.md

@@ -0,0 +1,5 @@
+---
+'@guardian/stand': patch
+---
+
+Add Menu component

.gitignore

@@ -9,8 +9,8 @@ storybook-static/
 
 # Stand Playwright
 
-*/test-results/
-*/playwright-report/
-*/blob-report/
-*/playwright/.cache/
-*/playwright/.auth/
+test-results/
+playwright-report/
+blob-report/
+playwright/.cache/
+playwright/.auth/

package.json

@@ -49,6 +49,11 @@
 			"import": "./dist/favicon.js",
 			"require": "./dist/favicon.cjs"
 		},
+		"./menu": {
+			"types": "./dist/types/menu.d.ts",
+			"import": "./dist/menu.js",
+			"require": "./dist/menu.cjs"
+		},
 		"./TopBar": {
 			"types": "./dist/types/TopBar.d.ts",
 			"import": "./dist/TopBar.js",
@@ -87,6 +92,7 @@
 		"./semantic/colors.css": "./dist/styleD/build/css/semantic/colors.css",
 		"./semantic/typography.css": "./dist/styleD/build/css/semantic/typography.css",
 		"./semantic/sizing.css": "./dist/styleD/build/css/semantic/sizing.css",
+		"./semantic/shadow.css": "./dist/styleD/build/css/semantic/shadow.css",
 		"./component/byline.css": "./dist/styleD/build/css/component/byline.css",
 		"./component/tagAutocomplete.css": "./dist/styleD/build/css/component/tagAutocomplete.css",
 		"./component/tagTable.css": "./dist/styleD/build/css/component/tagTable.css",
@@ -96,6 +102,7 @@
 		"./component/typography.css": "./dist/styleD/build/css/component/typography.css",
 		"./component/icon.css": "./dist/styleD/build/css/component/icon.css",
 		"./component/favicon.css": "./dist/styleD/build/css/component/favicon.css",
+		"./component/menu.css": "./dist/styleD/build/css/component/menu.css",
 		"./component/TopBar.css": "./dist/styleD/build/css/component/TopBar.css"
 	},
 	"//typesVersions": "Provides backward compatibility for TypeScript moduleResolution: node - maps subpath imports to correct type definition files. When adding new components with their own entry points, ensure to add them here.",
@@ -139,6 +146,9 @@
 			],
 			"utils": [
 				"./dist/types/utils.d.ts"
+			],
+			"menu": [
+				"./dist/types/menu.d.ts"
 			]
 		}
 	},
@@ -181,6 +191,7 @@
 		"@guardian/tsconfig": "1.0.1",
 		"@material-design-icons/svg": "^0.14.15",
 		"@playwright/experimental-ct-react17": "^1.58.2",
+		"@react-aria/focus": "3.21.5",
 		"@rollup/plugin-commonjs": "29.0.0",
 		"@rollup/plugin-node-resolve": "16.0.3",
 		"@rollup/plugin-typescript": "12.3.0",
@@ -227,14 +238,15 @@
 	"peerDependencies": {
 		"@emotion/react": ">=11.11.4 <=11.14.0",
 		"@guardian/prosemirror-invisibles": "3.1.1",
+		"@react-aria/focus": "^3.21.5",
 		"prosemirror-dropcursor": "1.8.2",
 		"prosemirror-history": "1.4.1",
 		"prosemirror-keymap": "1.2.2",
 		"prosemirror-model": "1.25.0",
 		"prosemirror-state": "1.4.3",
 		"prosemirror-view": "1.37.2",
 		"react": "^17.0.2 || ^18.0.0 || ^19.0.0",
-		"react-aria-components": ">= 1.13.0 <= 1.15.1",
+		"react-aria-components": ">= 1.13.0 <= 1.16.0",
 		"react-dom": "^17.0.2 || ^18.0.0 || ^19.0.0",
 		"typescript": ">=5.0.0 <=5.9.3"
 	},
@@ -245,6 +257,9 @@
 		"@guardian/prosemirror-invisibles": {
 			"optional": true
 		},
+		"@react-aria/focus": {
+			"optional": true
+		},
 		"prosemirror-dropcursor": {
 			"optional": true
 		},

pnpm-lock.yaml

@@ -37,6 +37,7 @@ const input = {
 	typography: 'src/typography.ts',
 	icon: 'src/icon.ts',
 	favicon: 'src/favicon.ts',
+	menu: 'src/menu.ts',
 	TopBar: 'src/TopBar.ts',
 	// editorial components
 	byline: 'src/byline.ts',

rollup.config.js

@@ -2,7 +2,7 @@
 	"react": ["17.0.2", "18.0.0", "19.0.0"],
 	"emotion": ["11.11.4", "11.14.0"],
 	"typescript": ["~5.0", "~5.1", "~5.9"],
-	"react-aria-components": ["1.13.0", "1.15.1"],
+	"react-aria-components": ["1.13.0", "1.16.0"],
 	"exclude": [
 		{
 			"react": "19.0.0",

scripts/deps-matrix-versions.json

@@ -50,22 +50,25 @@ export const buttonStyles = (
 			padding: 0;
 		`}
 
-		&[data-hovered] {
+		&[data-hovered], &:hover {
 			background: ${theme[variant].shared[':hover'].backgroundColor};
 			border: ${theme[variant].shared[':hover'].border};
 		}
 
-		&[data-pressed] {
+		&[data-pressed],
+		&:active {
 			background: ${theme[variant].shared[':active'].backgroundColor};
 			border: ${theme[variant].shared[':active'].border};
 		}
 
-		&[data-focus-visible] {
+		&[data-focus-visible],
+		&:focus-visible {
 			outline: ${theme.shared[':focus-visible'].outline};
 			outline-offset: ${theme.shared[':focus-visible']['outline-offset']};
 		}
 
-		&[data-disabled] {
+		&[data-disabled],
+		&:disabled {
 			cursor: ${theme.shared[':disabled'].cursor};
 			color: ${theme[variant].shared[':disabled'].color};
 			background: ${theme[variant].shared[':disabled'].backgroundColor};