@guardian/stand 0.0.15 → 0.0.16

package/dist/types/components/favicon/styles.d.ts

@@ -1,7 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentFavicon } from '../../styleD/build/typescript/component/favicon';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 export type FaviconTheme = Prettify<ComponentFavicon>;
+export type PartialFaviconTheme = DeepPartial<FaviconTheme>;
 export declare const defaultFaviconTheme: FaviconTheme;
 export declare const faviconStyles: (theme: FaviconTheme) => SerializedStyles;
 export declare const faviconTypographyStyles: (theme: FaviconTheme) => SerializedStyles;

package/dist/types/components/icon/styles.d.ts

@@ -1,7 +1,8 @@
 import type { ComponentIcon } from '../../styleD/build/typescript/component/icon';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { IconProps } from './types';
 export type IconTheme = Prettify<ComponentIcon>;
+export type PartialIconTheme = DeepPartial<IconTheme>;
 export declare const defaultIconTheme: IconTheme;
 export declare const iconStyles: (theme: IconTheme, { size, fill, mode, }: Required<Pick<IconProps, "size">> & Pick<IconProps, "fill"> & {
     mode: 'text' | 'svg';

package/dist/types/components/icon-button/styles.d.ts

@@ -1,5 +1,6 @@
-import type { ButtonTheme } from '../button/styles';
+import type { ButtonTheme, PartialButtonTheme } from '../button/styles';
 export type IconButtonTheme = ButtonTheme;
+export type PartialIconButtonTheme = PartialButtonTheme;
 export declare const defaultIconButtonTheme: ButtonTheme;
 export declare const iconButtonStyles: (theme: {
     shared: {

package/dist/types/components/icon-link-button/styles.d.ts

@@ -1,5 +1,6 @@
-import type { ButtonTheme } from '../button/styles';
+import type { ButtonTheme, PartialButtonTheme } from '../button/styles';
 export type IconLinkButtonTheme = ButtonTheme;
+export type PartialIconLinkButtonTheme = PartialButtonTheme;
 export declare const defaultIconLinkButtonTheme: ButtonTheme;
 export declare const iconLinkButtonStyles: (theme: {
     shared: {

package/dist/types/components/link-button/styles.d.ts

@@ -1,5 +1,6 @@
-import type { ButtonTheme } from '../button/styles';
+import type { ButtonTheme, PartialButtonTheme } from '../button/styles';
 export type LinkButtonTheme = ButtonTheme;
+export type PartialLinkButtonTheme = PartialButtonTheme;
 export declare const defaultLinkButtonTheme: ButtonTheme;
 export declare const linkButtonStyles: (theme: {
     shared: {

package/dist/types/components/menu/Menu.d.ts

@@ -0,0 +1,7 @@
+import type { DefaultPropsWithChildren } from '../../util/types';
+import type { MenuItemProps, MenuProps, MenuSectionProps, MenuSeparatorProps } from './types';
+export declare function MenuSeparator({ theme, cssOverrides, ...props }: MenuSeparatorProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuToggle({ children }: DefaultPropsWithChildren<unknown>): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuSection({ name, size, theme, cssOverrides, children, ...props }: MenuSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ label, description, aside, icon, size, theme, cssOverrides, ...props }: MenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Menu({ theme, size, popoverProps, menuTriggerProps, children, cssOverrides, ...props }: MenuProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/components/menu/sandbox.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName = "Menu";
+export declare const componentTsx = "import {\n\tMenu,\n\tMenuToggle,\n\tMenuSection,\n\tMenuItem,\n\tMenuSeparator,\n} from '@guardian/stand/menu';\nimport { IconButton } from '@guardian/stand/icon-button';\n\nexport const Component = () => (\n\t<Menu>\n\t\t<MenuToggle>\n\t\t\t<IconButton symbol=\"settings\" ariaLabel=\"Open menu\" />\n\t\t</MenuToggle>\n\n\t\t<MenuSection name=\"File actions\">\n\t\t\t<MenuItem\n\t\t\t\ticon=\"open_in_new\"\n\t\t\t\tlabel=\"Open\"\n\t\t\t\tdescription=\"Open in a new tab\"\n\t\t\t\tonAction={() => alert('open')}\n\t\t\t/>\n\t\t\t<MenuItem\n\t\t\t\ticon=\"edit\"\n\t\t\t\tlabel=\"Rename\"\n\t\t\t\tdescription=\"Rename the file\"\n\t\t\t\tonAction={() => alert('rename')}\n\t\t\t/>\n\t\t\t<MenuItem label=\"Delete\" onAction={() => alert('delete')} />\n\t\t</MenuSection>\n\n\t\t<MenuSeparator />\n\n\t\t<MenuSection>\n\t\t\t<MenuItem id=\"files\" label=\"Show files\" />\n\t\t\t<MenuItem id=\"folders\" label=\"Show folders\" />\n\t\t</MenuSection>\n\t</Menu>\n);\n";
+export declare const componentCss = "@import '@guardian/stand/component/menu.css';\n@import \"@guardian/stand/fonts/MaterialSymbolsOutlined.css\";\n\n/* Popover container */\n.stand-popover {\n\toverflow: var(--component-menu-popover-shared-overflow);\n\tmax-width: var(--component-menu-popover-md-max-width);\n\twidth: var(--component-menu-popover-md-width);\n\tbox-shadow: var(--component-menu-popover-shared-shadow);\n}\n\n/* Menu list */\n.stand-menu {\n\tdisplay: var(--component-menu-menu-shared-display);\n\tflex-direction: var(--component-menu-menu-shared-flex-direction);\n\tbackground: var(--component-menu-menu-shared-background-color);\n\tborder: var(--component-menu-menu-shared-border);\n}\n\n/* Menu section header */\n.stand-menu-section-header {\n\tdisplay: var(--component-menu-menu-section-header-shared-display);\n\talign-items: var(--component-menu-menu-section-header-shared-align-items);\n\tpadding: var(--component-menu-menu-section-header-shared-padding-top)\n\t\tvar(--component-menu-menu-section-header-shared-padding-right)\n\t\tvar(--component-menu-menu-section-header-shared-padding-bottom)\n\t\tvar(--component-menu-menu-section-header-shared-padding-left);\n\theight: var(--component-menu-menu-section-header-md-height);\n\tbackground: var(--component-menu-menu-section-header-shared-background-color);\n\tfont: var(--component-menu-menu-section-header-md-typography-font);\n\tletter-spacing: var(--component-menu-menu-section-header-md-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-section-header-md-typography-font-width);\n}\n\n/* Menu item */\n.stand-menu-item {\n\tdisplay: var(--component-menu-menu-item-shared-display);\n\tgrid-template-columns: var(--component-menu-menu-item-shared-grid-template-columns);\n\tgrid-template-areas: var(--component-menu-menu-item-shared-grid-template-areas);\n\tgap: var(--component-menu-menu-item-shared-gap);\n\talign-items: var(--component-menu-menu-item-shared-align-items);\n\tpadding: var(--component-menu-menu-item-shared-padding-top)\n\t\tvar(--component-menu-menu-item-shared-padding-right)\n\t\tvar(--component-menu-menu-item-shared-padding-bottom)\n\t\tvar(--component-menu-menu-item-shared-padding-left);\n\tborder-bottom: var(--component-menu-menu-item-shared-border-bottom);\n\tcursor: pointer;\n}\n.stand-menu-item-with-description {\n\tgrid-template-areas: var(--component-menu-menu-item-shared-grid-template-areas-with-description);\n}\n.stand-menu-item:last-child {\n\tborder-bottom: var(--component-menu-menu-item-shared-last-child-border-bottom);\n}\n.stand-menu-item:hover {\n\tbackground: var(--component-menu-menu-item-shared-hover-background-color);\n}\n.stand-menu-item:focus-visible {\n\toutline: var(--component-menu-menu-item-shared-focus-visible-outline);\n\toutline-offset: var(--component-menu-menu-item-shared-focus-visible-outline-offset);\n\tbackground: var(--component-menu-menu-item-shared-hover-background-color);\n}\n\n.stand-menu-item-icon {\n\tgrid-area: var(--component-menu-menu-item-shared-icon-grid-area);\n\talign-self: var(--component-menu-menu-item-shared-icon-align-self);\n\tcolor: var(--component-menu-menu-item-shared-icon-color);\n\tfont-size: var(--component-menu-menu-item-md-icon-size);\n\tline-height: var(--component-menu-menu-item-md-icon-line-height);\n}\n.stand-menu-item-label {\n\tgrid-area: var(--component-menu-menu-item-shared-label-grid-area);\n\tcolor: var(--component-menu-menu-item-shared-label-color);\n\tfont: var(--component-menu-menu-item-shared-label-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-label-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-label-typography-font-width);\n}\n.stand-menu-item-description {\n\tgrid-area: var(--component-menu-menu-item-shared-description-grid-area);\n\tcolor: var(--component-menu-menu-item-shared-description-color);\n\tfont: var(--component-menu-menu-item-shared-description-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-description-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-description-typography-font-width);\n}\n.stand-menu-item-aside {\n\tgrid-area: var(--component-menu-menu-item-shared-aside-grid-area);\n\tjustify-self: var(--component-menu-menu-item-shared-aside-justify-self);\n\tcolor: var(--component-menu-menu-item-shared-aside-color);\n\tfont: var(--component-menu-menu-item-shared-aside-typography-font);\n\tletter-spacing: var(--component-menu-menu-item-shared-aside-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-menu-menu-item-shared-aside-typography-font-width);\n}\n\n/* Separator */\n.stand-menu-separator {\n\tbackground-color: var(--component-menu-menu-separator-shared-background-color);\n\theight: var(--component-menu-menu-separator-shared-height);\n\twidth: var(--component-menu-menu-separator-shared-width);\n}\n";
+export declare const componentHtml = "<div class=\"stand-popover\">\n\t<div class=\"stand-menu\">\n\t\t<div>\n\t\t\t<div class=\"stand-menu-section-header\">File actions</div>\n\t\t\t<div class=\"stand-menu-item stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-icon material-symbols\">open_in_new</span>\n\t\t\t\t<span class=\"stand-menu-item-label\">Open</span>\n\t\t\t\t<span class=\"stand-menu-item-description\">Open in a new tab</span>\n\t\t\t\t<span class=\"stand-menu-item-aside\">\u2318O</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Rename</span>\n\t\t\t\t<span class=\"stand-menu-item-description\">Rename the file</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Delete</span>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"stand-menu-separator\"></div>\n\t\t<div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Show files</span>\n\t\t\t</div>\n\t\t\t<div class=\"stand-menu-item\" tabindex=\"0\">\n\t\t\t\t<span class=\"stand-menu-item-label\">Show folders</span>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</div>\n";
+export declare const componentJs = "import { componentMenu } from \"@guardian/stand\";\n\nconst { menu, menuItem, menuSection, menuSeparator, popover } = componentMenu;\n\n// example of creating a stylesheet in js\nconst sheet = new CSSStyleSheet();\n\n// apply the rules to the sheet\nsheet.replaceSync(`\n\t/* Popover container */\n\t.js-stand-popover {\n\t\toverflow: ${popover.shared.overflow};\n\t\tmax-width: ${popover.md['max-width']};\n\t\twidth: ${popover.md.width};\n\t\tbox-shadow: ${popover.shared.shadow};\n\t}\n\n\t/* Menu list */\n\t.js-stand-menu {\n\t\tdisplay: ${menu.shared.display};\n\t\tflex-direction: ${menu.shared['flex-direction']};\n\t\tbackground: ${menu.shared['background-color']};\n\t\tborder: ${menu.shared.border};\n\t}\n\n\t/* Menu section header */\n\t.js-stand-menu-section-header {\n\t\tdisplay: ${menuSection.header.shared.display};\n\t\talign-items: ${menuSection.header.shared['align-items']};\n\t\theight: ${menuSection.header.md.height};\n\t\tbackground: ${menuSection.header.shared['background-color']};\n\t\tpadding: ${menuSection.header.shared.padding.top} ${menuSection.header.shared.padding.right} ${menuSection.header.shared.padding.bottom} ${menuSection.header.shared.padding.left};\n\t\tfont: ${menuSection.header.md.typography.font};\n\t\tletter-spacing: ${menuSection.header.md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuSection.header.md.typography.fontWidth};\n\t}\n\n\t/* Menu item */\n\t.js-stand-menu-item {\n\t\tdisplay: ${menuItem.shared.display};\n\t\tgrid-template-columns: ${menuItem.shared['grid-template-columns']};\n\t\tgrid-template-areas: ${menuItem.shared['grid-template-areas']};\n\t\tgap: ${menuItem.shared.gap};\n\t\talign-items: ${menuItem.shared['align-items']};\n\t\tpadding: ${menuItem.shared.padding.top} ${menuItem.shared.padding.right} ${menuItem.shared.padding.bottom} ${menuItem.shared.padding.left};\n\t\tborder-bottom: ${menuItem.shared['border-bottom']};\n\t\tcursor: pointer;\n\t}\n\t.js-stand-menu-item-with-description {\n\t\tgrid-template-areas: ${menuItem.shared['grid-template-areas-with-description']};\n\t}\n\t.js-stand-menu-item:last-child {\n\t\tborder-bottom: ${menuItem.shared[':last-child']['border-bottom']};\n\t}\n\t.js-stand-menu-item:hover {\n\t\tbackground: ${menuItem.shared[':hover']['background-color']};\n\t}\n\t.js-stand-menu-item:focus-visible {\n\t\toutline: ${menuItem.shared[':focus-visible'].outline};\n\t\toutline-offset: ${menuItem.shared[':focus-visible']['outline-offset']};\n\t\tbackground: ${menuItem.shared[':hover']['background-color']};\n\t}\n\n\t.js-stand-menu-item-icon {\n\t\tgrid-area: ${menuItem.shared.icon['grid-area']};\n\t\talign-self: ${menuItem.shared.icon['align-self']};\n\t\tcolor: ${menuItem.shared.icon.color};\n\t\tfont-size: ${menuItem.md.icon.size};\n\t\tline-height: ${menuItem.md.icon['line-height']};\n\t}\n\t.js-stand-menu-item-label {\n\t\tgrid-area: ${menuItem.shared.label['grid-area']};\n\t\tcolor: ${menuItem.shared.label.color};\n\t\tfont: ${menuItem.shared.label.typography.font};\n\t\tletter-spacing: ${menuItem.shared.label.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.label.typography.fontWidth};\n\t}\n\t.js-stand-menu-item-description {\n\t\tgrid-area: ${menuItem.shared.description['grid-area']};\n\t\tcolor: ${menuItem.shared.description.color};\n\t\tfont: ${menuItem.shared.description.typography.font};\n\t\tletter-spacing: ${menuItem.shared.description.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.description.typography.fontWidth};\n\t}\n\t.js-stand-menu-item-aside {\n\t\tgrid-area: ${menuItem.shared.aside['grid-area']};\n\t\tjustify-self: ${menuItem.shared.aside['justify-self']};\n\t\tcolor: ${menuItem.shared.aside.color};\n\t\tfont: ${menuItem.shared.aside.typography.font};\n\t\tletter-spacing: ${menuItem.shared.aside.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth' ${menuItem.shared.aside.typography.fontWidth};\n\t}\n\n\t/* Separator */\n\t.js-stand-menu-separator {\n\t\tbackground-color: ${menuSeparator.shared['background-color']};\n\t\theight: ${menuSeparator.shared.height};\n\t\twidth: ${menuSeparator.shared.width};\n\t}\n`);\n\n// update the document with the sheet\ndocument.adoptedStyleSheets.push(sheet);\n\n// modify the dom with the menu components using the generated stylesheet\ndocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"js-stand-popover\">\n\t\t<div class=\"js-stand-menu\">\n\t\t\t<div>\n\t\t\t\t<div class=\"js-stand-menu-section-header\">File actions</div>\n\t\t\t\t<div class=\"js-stand-menu-item js-stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-icon material-symbols\">open_in_new</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Open</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-description\">Open in a new tab</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-aside\">\u2318O</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item js-stand-menu-item-with-description\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Rename</span>\n\t\t\t\t\t<span class=\"js-stand-menu-item-description\">Rename the file</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Delete</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"js-stand-menu-separator\"></div>\n\t\t\t<div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Show files</span>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"js-stand-menu-item\" tabindex=\"0\">\n\t\t\t\t\t<span class=\"js-stand-menu-item-label\">Show folders</span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n`;\n";

package/dist/types/components/menu/styles.d.ts

@@ -0,0 +1,28 @@
+import type { SerializedStyles } from '@emotion/react';
+import type { ComponentMenu } from '../../styleD/build/typescript/component/menu';
+import type { DeepPartial, Prettify } from '../../util/types';
+import type { MenuItemProps, MenuPopoverProps, MenuSectionProps } from './types';
+export type MenuTheme = Prettify<ComponentMenu['menu']>;
+export type PartialMenuTheme = DeepPartial<MenuTheme>;
+export declare const defaultMenuTheme: MenuTheme;
+export declare const menuStyles: (theme: MenuTheme) => SerializedStyles;
+export type MenuSectionTheme = Prettify<ComponentMenu['menuSection']>;
+export type PartialMenuSectionTheme = DeepPartial<MenuSectionTheme>;
+export declare const defaultMenuSectionTheme: MenuSectionTheme;
+export declare const menuSectionHeaderStyles: (theme: MenuSectionTheme, { size }: Required<Pick<MenuSectionProps, 'size'>>) => SerializedStyles;
+export type MenuItemTheme = Prettify<ComponentMenu['menuItem']>;
+export type PartialMenuItemTheme = DeepPartial<MenuItemTheme>;
+export declare const defaultMenuItemTheme: MenuItemTheme;
+export declare const menuItemStyles: (theme: MenuItemTheme, { description }: Pick<MenuItemProps, 'description'>, isFocusVisible?: boolean) => SerializedStyles;
+export declare const menuItemIconStyles: (theme: MenuItemTheme, { size }: Required<Pick<MenuItemProps, 'size'>>) => SerializedStyles;
+export declare const menuItemLabelStyles: (theme: MenuItemTheme) => SerializedStyles;
+export declare const menuItemDescriptionStyles: (theme: MenuItemTheme) => SerializedStyles;
+export declare const menuItemAsideStyles: (theme: MenuItemTheme) => SerializedStyles;
+export type MenuSeparatorTheme = Prettify<ComponentMenu['menuSeparator']>;
+export type PartialMenuSeparatorTheme = DeepPartial<MenuSeparatorTheme>;
+export declare const defaultMenuSeparatorTheme: MenuSeparatorTheme;
+export declare const menuSeparatorStyles: (theme: MenuSeparatorTheme) => SerializedStyles;
+export type MenuPopoverTheme = Prettify<ComponentMenu['menuPopover']>;
+export type PartialMenuPopoverTheme = DeepPartial<MenuPopoverTheme>;
+export declare const defaultMenuPopoverTheme: MenuPopoverTheme;
+export declare const menuPopoverStyles: (theme: MenuPopoverTheme, { size }: Required<Pick<MenuPopoverProps, 'size'>>) => SerializedStyles;

package/dist/types/components/menu/types.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import type { MenuItemProps as RACMenuItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, PopoverProps as RACPopoverProps, SeparatorProps as RACSeparatorProps } from 'react-aria-components';
+import type { DefaultProps, DefaultPropsWithChildren } from '../../util/types';
+import type { IconProps } from '../icon/types';
+import type { MenuItemTheme, MenuPopoverTheme, MenuSectionTheme, MenuSeparatorTheme, MenuTheme } from './styles';
+export interface MenuProps extends DefaultPropsWithChildren<MenuTheme, RACMenuProps<object>['className']>, Omit<RACMenuProps<object>, 'children'> {
+    /**
+     * Size variant of the Menu
+     */
+    size?: MenuPopoverProps['size'];
+    /**
+     * Props to pass to the underlying React Aria Popover component
+     */
+    popoverProps?: Omit<MenuPopoverProps, 'children' | 'size'>;
+    /**
+     * Props to pass to the underlying React Aria MenuTrigger component
+     */
+    menuTriggerProps?: Omit<MenuTriggerProps, 'children'>;
+}
+export interface MenuSectionProps extends DefaultPropsWithChildren<MenuSectionTheme, RACMenuSectionProps<object>['className']>, Omit<RACMenuSectionProps<object>, 'children'> {
+    /**
+     * The (optional) name of the section to be displayed in a header
+     */
+    name?: string;
+    /**
+     * Size variant of the MenuSection, this doesn't need to be passed if the MenuSection is a child of Menu, as it will inherit the size of the Menu.
+     */
+    size?: MenuPopoverProps['size'];
+    /**
+     * Disable the selectionMode option for the time being, as we currently don't have a checkbox or radio button component to use for the selectable menu items that this would require. This can be added in the future when we have these components available.
+     */
+    selectionMode?: 'none';
+}
+export interface MenuItemProps extends DefaultProps<MenuItemTheme, RACMenuItemProps['className']>, Omit<RACMenuItemProps, 'children'> {
+    /**
+     * The main label of the menu item, this can be a string or any React node if more complex layout is needed.
+     */
+    label: React.ReactNode;
+    /**
+     * Optional description text for the menu item, this can be a string or any React node if more complex layout is needed. The description will be rendered below the label in a smaller font size.
+     */
+    description?: React.ReactNode;
+    /**
+     * Optional content to be rendered on the right side of the menu item, this can be used for things like keyboard shortcuts or badges. This can be a string or any React node if more complex layout is needed.
+     */
+    aside?: React.ReactNode;
+    /**
+     * Icon to be rendered within the left side of the menu item. Passed to the Icon component, so can be either a string (for material symbols) or an SVG element.
+     */
+    icon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+    /**
+     * Size variant of the MenuItem, this doesn't need to be passed if the MenuItem is a child of Menu, as it will inherit the size of the Menu.
+     */
+    size?: MenuPopoverProps['size'];
+}
+export type MenuSeparatorProps = DefaultProps<MenuSeparatorTheme, RACSeparatorProps['className']>;
+export interface MenuPopoverProps extends DefaultProps<MenuPopoverTheme, RACPopoverProps['className']>, RACPopoverProps {
+    /**
+     * Size variant of the Popover, this doesn't need to be passed if the Popover is a child of Menu, as it will inherit the size of the Menu.
+     */
+    size?: keyof Omit<MenuPopoverTheme, 'shared'>;
+}
+export type MenuTriggerProps = RACMenuTriggerProps;

package/dist/types/components/topbar/toolName/styles.d.ts

@@ -1,7 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
-import type { Prettify } from '../../../util/types';
+import type { DeepPartial, Prettify } from '../../../util/types';
 export type TopBarToolNameTheme = Prettify<ComponentTopBar['ToolName']>;
+export type PartialTopBarToolNameTheme = DeepPartial<TopBarToolNameTheme>;
 export declare const defaultToolNameTheme: TopBarToolNameTheme;
 export declare const toolNameStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
 export declare const toolNameTypography: (theme: TopBarToolNameTheme) => SerializedStyles;

package/dist/types/components/typography/styles.d.ts

@@ -1,7 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
 import { type ComponentTypography } from '../../styleD/build/typescript/component/typography';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { TypographyProps } from './types';
 export type TypographyTheme = Prettify<ComponentTypography>;
+export type PartialTypographyTheme = DeepPartial<TypographyTheme>;
 export declare const defaultTypographyTheme: TypographyTheme;
 export declare const typographyStyles: (theme: TypographyTheme, { variant }: Required<Pick<TypographyProps, 'variant'>>) => SerializedStyles;

package/dist/types/favicon.d.ts

@@ -14,6 +14,6 @@
  */
 export { Favicon } from './components/favicon/Favicon';
 export type { FaviconProps } from './components/favicon/types';
-export type { FaviconTheme } from './components/favicon/styles';
+export type { PartialFaviconTheme as FaviconTheme } from './components/favicon/styles';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';

package/dist/types/icon-button.d.ts

@@ -17,4 +17,4 @@
  */
 export { IconButton } from './components/icon-button/IconButton';
 export type { IconButtonProps } from './components/icon-button/types';
-export type { IconButtonTheme } from './components/icon-button/styles';
+export type { PartialIconButtonTheme as IconButtonTheme } from './components/icon-button/styles';

package/dist/types/icon-link-button.d.ts

@@ -17,4 +17,4 @@
  */
 export { IconLinkButton } from './components/icon-link-button/IconLinkButton';
 export type { IconLinkButtonProps } from './components/icon-link-button/types';
-export type { IconLinkButtonTheme } from './components/icon-link-button/styles';
+export type { PartialIconLinkButtonTheme as IconLinkButtonTheme } from './components/icon-link-button/styles';

package/dist/types/icon.d.ts

@@ -22,6 +22,6 @@
  */
 export { Icon } from './components/icon/Icon';
 export type { IconProps } from './components/icon/types';
-export type { IconTheme } from './components/icon/styles';
+export type { PartialIconTheme as IconTheme } from './components/icon/styles';
 export { componentIcon } from './styleD/build/typescript/component/icon';
 export type { ComponentIcon } from './styleD/build/typescript/component/icon';

package/dist/types/index.d.ts

@@ -26,6 +26,8 @@ export { componentIcon } from './styleD/build/typescript/component/icon';
 export type { ComponentIcon } from './styleD/build/typescript/component/icon';
 export { componentFavicon } from './styleD/build/typescript/component/favicon';
 export type { ComponentFavicon } from './styleD/build/typescript/component/favicon';
+export { componentMenu } from './styleD/build/typescript/component/menu';
+export type { ComponentMenu } from './styleD/build/typescript/component/menu';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar';
 export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
 /**
@@ -50,3 +52,5 @@ export { semanticTypography } from './styleD/build/typescript/semantic/typograph
 export type { SemanticTypography } from './styleD/build/typescript/semantic/typography';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing';
 export type { SemanticSizing } from './styleD/build/typescript/semantic/sizing';
+export { semanticShadow } from './styleD/build/typescript/semantic/shadow';
+export type { SemanticShadow } from './styleD/build/typescript/semantic/shadow';

package/dist/types/link-button.d.ts

@@ -17,4 +17,4 @@
  */
 export { LinkButton } from './components/link-button/LinkButton';
 export type { LinkButtonProps } from './components/link-button/types';
-export type { LinkButtonTheme } from './components/link-button/styles';
+export type { PartialLinkButtonTheme as LinkButtonTheme } from './components/link-button/styles';

package/dist/types/menu.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Menu component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ * - `react-aria-components`
+ * - `@react-aria/focus`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/menu.css),
+ * you don't need to install these.
+ */
+export { Menu, MenuItem, MenuSection, MenuSeparator, MenuToggle, } from './components/menu/Menu';
+export type { MenuProps, MenuItemProps, MenuSectionProps, MenuSeparatorProps, MenuTriggerProps, MenuPopoverProps as PopoverProps, } from './components/menu/types';
+export type { PartialMenuTheme as MenuTheme, PartialMenuItemTheme as MenuItemTheme, PartialMenuSectionTheme as MenuSectionTheme, PartialMenuSeparatorTheme as MenuSeparatorTheme, PartialMenuPopoverTheme as MenuPopoverTheme, } from './components/menu/styles';
+export { componentMenu } from './styleD/build/typescript/component/menu';
+export type { ComponentMenu } from './styleD/build/typescript/component/menu';

package/dist/types/styleD/build/typescript/component/menu.d.ts

@@ -0,0 +1,140 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentMenu: {
+    menu: {
+        shared: {
+            display: string;
+            'flex-direction': string;
+            'background-color': string;
+            border: string;
+        };
+    };
+    menuSection: {
+        header: {
+            shared: {
+                display: string;
+                'align-items': string;
+                padding: {
+                    top: string;
+                    right: string;
+                    bottom: string;
+                    left: string;
+                };
+                'background-color': string;
+                color: string;
+            };
+            sm: {
+                height: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+            md: {
+                height: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+        };
+    };
+    menuItem: {
+        shared: {
+            display: string;
+            'grid-template-areas': string;
+            'grid-template-areas-with-description': string;
+            'grid-template-columns': string;
+            gap: string;
+            'align-items': string;
+            padding: {
+                top: string;
+                right: string;
+                bottom: string;
+                left: string;
+            };
+            'border-bottom': string;
+            icon: {
+                'grid-area': string;
+                'align-self': string;
+                color: string;
+            };
+            label: {
+                'grid-area': string;
+                color: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+            description: {
+                'grid-area': string;
+                color: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+            aside: {
+                'grid-area': string;
+                'justify-self': string;
+                'align-self': string;
+                color: string;
+                typography: {
+                    font: string;
+                    letterSpacing: string;
+                    fontWidth: number;
+                };
+            };
+            ':last-child': {
+                'border-bottom': string;
+            };
+            ':hover': {
+                'background-color': string;
+            };
+            ':focus-visible': {
+                outline: string;
+                'outline-offset': string;
+            };
+        };
+        sm: {
+            icon: {
+                size: string;
+                'line-height': number;
+            };
+        };
+        md: {
+            icon: {
+                size: string;
+                'line-height': number;
+            };
+        };
+    };
+    menuSeparator: {
+        shared: {
+            'background-color': string;
+            height: string;
+            width: string;
+        };
+    };
+    menuPopover: {
+        shared: {
+            overflow: string;
+            shadow: string;
+        };
+        sm: {
+            'max-width': string;
+            width: string;
+        };
+        md: {
+            'max-width': string;
+            width: string;
+        };
+    };
+};
+export type ComponentMenu = typeof componentMenu;

package/dist/types/styleD/build/typescript/semantic/shadow.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const semanticShadow: {
+    raised: string;
+};
+export type SemanticShadow = typeof semanticShadow;

package/dist/types/styleD/stories/semantic/Shadow.d.ts

@@ -0,0 +1 @@
+export declare const SemanticShadowTokens: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/types/typography.d.ts

@@ -14,6 +14,6 @@
  */
 export { Typography } from './components/typography/Typography';
 export type { TypographyProps } from './components/typography/types';
-export type { TypographyTheme } from './components/typography/styles';
+export type { PartialTypographyTheme as TypographyTheme } from './components/typography/styles';
 export { componentTypography } from './styleD/build/typescript/component/typography';
 export type { ComponentTypography } from './styleD/build/typescript/component/typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "type": "module",
   "//exports": "Each component has its own entry point for optimal tree-shaking. Main entry point only includes design tokens and utilities. New components/foundations should follow the same pattern.",
   "exports": {
@@ -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"
       ]
     }
   },
@@ -163,6 +173,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",
@@ -209,6 +220,7 @@
   "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",
@@ -216,7 +228,7 @@
     "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"
   },
@@ -227,6 +239,9 @@
     "@guardian/prosemirror-invisibles": {
       "optional": true
     },
+    "@react-aria/focus": {
+      "optional": true
+    },
     "prosemirror-dropcursor": {
       "optional": true
     },