@guardian/stand 0.0.14 → 0.0.16

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/TopBarToolName.d.ts

@@ -0,0 +1,2 @@
+import type { TopBarToolNameProps } from './types';
+export declare const TopBarToolName: ({ name, favicon, subsection, subsectionIcon, theme, cssOverrides, }: TopBarToolNameProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare const componentName = "TopBarToolName";
+export declare const componentTsx = "import { TopBarToolName } from '@guardian/stand/TopBar';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<TopBarToolName\n\t\t\t\tname=\"Songwriter\"\n\t\t\t\tfavicon={{ type: 'letter', letter: 'S' }}\n\t\t\t\tsubsection=\"Article\"\n\t\t\t\tsubsectionIcon=\"menu\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
+export declare const componentCss = "@import \"@guardian/stand/component/TopBar.css\";\n\t/* import the favicon styles */\n\t@import '@guardian/stand/component/favicon.css';\n\n    /* example setup of tool name */\n    .stand-topbar-toolname {\n\t\tdisplay: var(--component-top-bar-tool-name-display);\n\t\talign-items: var(--component-top-bar-tool-name-align-items);\n\t\tgap: var(--component-top-bar-tool-name-gap);\n\t\tfont: var(--component-top-bar-tool-name-typography-font);\n\t\tletter-spacing: var(--component-top-bar-tool-name-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-typography-font-width);\n    }\n\n\t.stand-topbar-toolname-divider {\n\t\tborder-right: var(--component-top-bar-tool-name-divider-border);\n\t\theight: var(--component-top-bar-tool-name-divider-height);\n\t}\n\n\t.stand-topbar-toolname-subsection {\n\t\tdisplay: var(--component-top-bar-tool-name-display);\n\t\talign-items: var(--component-top-bar-tool-name-align-items);\n\t\tgap: var(--component-top-bar-tool-name-subsection-gap);\n\t\tfont: var(--component-top-bar-tool-name-subsection-typography-font);\n\t\tletter-spacing: var(--component-top-bar-tool-name-subsection-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-top-bar-tool-name-subsection-typography-font-width)\n\t}\n\n\t.stand-favicon {\n\t\tbackground-color: var(--component-favicon-color-background);\n\t\tdisplay: var(--component-favicon-display);\n\t\talign-items: var(--component-favicon-align-items);\n\t\tjustify-content: var(--component-favicon-justify-content);\n\t\twidth: var(--component-favicon-size);\n\t\theight: var(--component-favicon-size);\n\t\tuser-select: var(--component-favicon-user-select);\n\t\tcolor: var(--component-favicon-color-text);\n\t\tfont: var(--component-favicon-typography-font);\n\t\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n\t}\n\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-topbar-toolname\">\n\t\t<div class=\"stand-favicon\">S</div>\n\t\t<div>Songwriter</div>\n\t\t<div class=\"stand-topbar-toolname-divider\">&nbsp;</div>\n\t\t <div class=\"stand-topbar-toolname-subsection\">\n\t\t\t <div><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"></path></svg></div>\n\t\t\t <div>Article</div>\n\t\t</div>\n\t</div>\n</div>";
+export declare const componentJs = "\n\t// for ts/js\n\timport { componentFavicon, componentTopBar, baseColors } from '@guardian/stand';\n\n\tconst style = `\n\t\tdisplay: ${componentTopBar.ToolName.display};\n\t\talign-items: ${componentTopBar.ToolName[\"align-items\"]};\n\t\tgap: ${componentTopBar.ToolName.gap};\n\t\tfont: ${componentTopBar.ToolName.typography.font};\n\t\tletter-spacing: ${componentTopBar.ToolName.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.typography.fontWidth};\n\t`;\n\n\tconst dividerStyle = `\n\t\tborder-right: ${componentTopBar.ToolName.divider.border};\n\t\theight:  ${componentTopBar.ToolName.divider.height};\n\t`;\n\n\tconst subsectionStyle = `\n\t\tdisplay: ${componentTopBar.ToolName.display};\n\t\talign-items: ${componentTopBar.ToolName[\"align-items\"]};\n\t\tgap: ${componentTopBar.ToolName.subsection.gap};\n\t\tfont: ${componentTopBar.ToolName.subsection.typography.font};\n\t\tletter-spacing: ${componentTopBar.ToolName.subsection.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentTopBar.ToolName.subsection.typography.fontWidth};\n\t`;\n\n\tconst faviconStyle = `\n\t\tbackground-color: ${componentFavicon.color.background};\n\t\tdisplay: ${componentFavicon.display};\n\t\talign-items: ${componentFavicon[\"align-items\"]};\n\t\tjustify-content: ${componentFavicon[\"justify-content\"]};\n\t\twidth: ${componentFavicon.size};\n\t\theight: ${componentFavicon.size};\n\t\tuser-select: ${componentFavicon[\"user-select\"]};\n\t\tcolor: ${componentFavicon.color.text};\n\t\tfont: ${componentFavicon.typography.font};\n\t\tletter-spacing: ${componentFavicon.typography.letterSpacing};\n\t\tfont-variation-settings: \"wdth\" ${componentFavicon.typography.fontWidth};\n\t`;\n\n\t// e.g. adding to DOM using vanilla JS styles\n\tdocument.getElementById(\"app\").innerHTML = `\n\n\t<div class=\"container\">\n\t\t<div style=\"${style}\">\n\t\t\t<div style=\"${faviconStyle}>S</div>\n\t\t\t<div>Songwriter</div>\n\t\t\t<div style=\"${dividerStyle}\">&nbsp;</div>\n\t\t\t<div style=\"${subsectionStyle}\">\n\t\t\t\t<div><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\"></path></svg></div>\n\t\t\t\t<div>Article</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n`;\n";

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

@@ -0,0 +1,11 @@
+import type { SerializedStyles } from '@emotion/react';
+import { type ComponentTopBar } from '../../..//styleD/build/typescript/component/TopBar';
+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;
+export declare const dividerStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
+export declare const subsectionStyles: (theme: TopBarToolNameTheme) => SerializedStyles;
+export declare const subsectionTypography: (theme: TopBarToolNameTheme) => SerializedStyles;

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

@@ -0,0 +1,22 @@
+import type { DefaultProps } from '../../../util/types';
+import type { FaviconProps } from '../../favicon/types';
+import type { IconProps } from '../../icon/types';
+import type { TopBarToolNameTheme } from './styles';
+export interface TopBarToolNameProps extends DefaultProps<TopBarToolNameTheme> {
+    /**
+     * Name of the tool to display
+     */
+    name: string;
+    /**
+     * Icon to display
+     */
+    favicon: FaviconProps;
+    /**
+     * The subsection or type of content that is represented on the page (optional)
+     * */
+    subsection?: string;
+    /**
+     * Icon that represents the content type (optional)
+     * */
+    subsectionIcon?: IconProps['symbol'] | Exclude<IconProps['children'], string>;
+}

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Typography";
+export declare const componentTsx = "import { Typography } from '@guardian/stand/typography';\n\nexport const Component = () => (\n\t<>\n\t\t{/* Paragraph element with default body-md preset and text children */}\n\t\t<Typography element=\"h2\" variant=\"heading-compact-xl\">Wow! A heading!</Typography>\n\n\t\t{/* Paragraph element with default body-md preset and text children */}\n\t\t<Typography>Body text here</Typography>\n\n\t\t{/* Div with an italic text wrapped inside */}\n\t\t<Typography element=\"div\" variant=\"body-md\">Some text, with <Typography element=\"i\" variant=\"body-italic-md\">even more text</Typography></Typography>\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/typography.css';\n\t@import '@guardian/stand/semantic/typography.css';\n\n    /* shared typography styles for all variants */\n    .stand-typography {\n    \tcolor: var(--component-typography-color);\n    }\n\n    /* example setup of heading-compact-xl */\n    .stand-typography-heading-compact-xl {\n\t\tfont: var(--semantic-typography-heading-compact-xl-font);\n\t\tletter-spacing: var(--semantic-typography-heading-compact-xl-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-heading-compact-xl-font-width);\n\t}\n\n    /* example setup of standard body text */\n    .stand-typography-body-md {\n\t\tfont: var(--semantic-typography-body-md-font);\n\t\tletter-spacing: var(--semantic-typography-body-md-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-md-font-width);\n\t}\n\n\t/* example setup of italic body text */\n\t.stand-typography-body-italic-md {\n\t\tfont: var(--semantic-typography-body-italic-md-font);\n\t\tletter-spacing: var(--semantic-typography-body-italic-md-letter-spacing);\n\t\tfont-variation-settings: \"wdth\" var(--semantic-typography-body-italic-md-font-width);\n\t}\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n    <h2 class=\"stand-typography stand-typography-heading-compact-xl\">Wow! A heading!</h2>\n\n\t<p class=\"stand-typography stand-typography-body-md\">Body text here</p>\n\n\t<div class=\"stand-typography stand-typography-body-md\">Some text, with <i class=\"stand-typography stand-typography-body-italic-md\">even more text</i></div>\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentTypography, semanticTypography } from \"@guardian/stand\";\n\n    \t// example of creating a stylesheet in js\n    \tconst sheet = new CSSStyleSheet();\n\n    \t// apply the rules to the sheet\n    \tsheet.replaceSync(`\n\t\t\t.js-stand-typography {\n\t\t\t\tcolor: ${componentTypography.color};\n\t\t\t}\n\t\t\t.js-stand-typography-heading-compact-xl {\n\t\t\t\tfont: ${semanticTypography['heading-compact-xl'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['heading-compact-xl'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['heading-compact-xl'].fontWidth};\n\t\t\t}\n\t\t\t.js-stand-typography-body-md {\n\t\t\t\tfont: ${semanticTypography['body-md'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['body-md'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-md'].fontWidth};\n\t\t\t}\n\t\t\t.js-stand-typography-body-italic-md {\n\t\t\t\tfont: ${semanticTypography['body-italic-md'].font};\n\t\t\t\tletter-spacing: ${semanticTypography['body-italic-md'].letterSpacing};\n\t\t\t\tfont-variation-settings: \"wdth\" ${semanticTypography['body-italic-md'].fontWidth};\n\t\t\t}\n    \t`);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the typography components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n\t\t<h2 class=\"js-stand-typography js-stand-typography-heading-compact-xl\">Wow! A heading!</h2>\n\t\t<p class=\"js-stand-typography js-stand-typography-body-md\">Body text here</p>\n\t\t<div class=\"js-stand-typography js-stand-typography-body-md\">Some text, with <i class=\"js-stand-typography js-stand-typography-body-italic-md\">even more text</i></div>\n    </div>`;\n\n";

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,10 @@ 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';
 /**
  * style dictionary exports - base
  */
@@ -48,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/TopBar.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+export declare const componentTopBar: {
+    ToolName: {
+        display: string;
+        'align-items': string;
+        gap: string;
+        typography: {
+            font: string;
+            letterSpacing: string;
+            fontWidth: number;
+        };
+        divider: {
+            border: string;
+            height: string;
+        };
+        subsection: {
+            gap: string;
+            typography: {
+                font: string;
+                letterSpacing: string;
+                fontWidth: number;
+            };
+        };
+    };
+};
+export type ComponentTopBar = typeof componentTopBar;

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/dist/types/util/storybook/sandbox/Sandbox.d.ts

@@ -0,0 +1,14 @@
+export declare const SandboxReact: ({ componentTsx, componentName, flowColumn, }: {
+    componentTsx: string;
+    componentName: string;
+    flowColumn?: boolean | undefined;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SandboxCss: ({ componentCss, componentHtml, componentName, }: {
+    componentCss: string;
+    componentHtml: string;
+    componentName: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SandboxJs: ({ componentJs, componentName, }: {
+    componentJs: string;
+    componentName: string;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.14",
+  "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,16 @@
       "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",
+      "require": "./dist/TopBar.cjs"
+    },
     "./byline": {
       "types": "./dist/types/byline.d.ts",
       "import": "./dist/byline.js",
@@ -82,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",
@@ -90,7 +101,9 @@
     "./component/button.css": "./dist/styleD/build/css/component/button.css",
     "./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/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.",
   "typesVersions": {
@@ -119,6 +132,9 @@
       "favicon": [
         "./dist/types/favicon.d.ts"
       ],
+      "TopBar": [
+        "./dist/types/TopBar.d.ts"
+      ],
       "byline": [
         "./dist/types/byline.d.ts"
       ],
@@ -130,6 +146,9 @@
       ],
       "utils": [
         "./dist/types/utils.d.ts"
+      ],
+      "menu": [
+        "./dist/types/menu.d.ts"
       ]
     }
   },
@@ -145,20 +164,22 @@
   "sideEffects": false,
   "devDependencies": {
     "@changesets/cli": "^2.29.8",
+    "@codesandbox/sandpack-react": "^2.20.0",
     "@emotion/react": "11.11.4",
     "@figma/rest-api-spec": "^0.36.0",
-    "@guardian/eslint-config": "13.0.6",
+    "@guardian/eslint-config": "14.0.0",
     "@guardian/prettier": "10.0.0",
     "@guardian/prosemirror-invisibles": "3.1.1",
     "@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",
-    "@storybook/addon-docs": "^10.2.11",
-    "@storybook/addon-themes": "^10.2.11",
-    "@storybook/react-vite": "^10.2.11",
+    "@storybook/addon-docs": "^10.2.14",
+    "@storybook/addon-themes": "^10.2.14",
+    "@storybook/react-vite": "^10.2.14",
     "@terrazzo/cli": "^0.10.5",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest": "30.0.0",
@@ -167,7 +188,7 @@
     "@types/react-dom": "17.0.25",
     "change-case": "^5.4.4",
     "eslint": "9.39.3",
-    "eslint-plugin-storybook": "^10.2.11",
+    "eslint-plugin-storybook": "^10.2.14",
     "husky": "^9.1.7",
     "jest": "30.2.0",
     "jest-environment-jsdom": "^30.1.2",
@@ -188,7 +209,7 @@
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-import-css": "^4.2.0",
     "rollup-plugin-node-externals": "8.1.2",
-    "storybook": "^10.2.11",
+    "storybook": "^10.2.14",
     "style-dictionary": "^5.3.2",
     "ts-jest": "29.4.6",
     "tslib": "2.8.1",
@@ -199,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",
@@ -206,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"
   },
@@ -217,6 +239,9 @@
     "@guardian/prosemirror-invisibles": {
       "optional": true
     },
+    "@react-aria/focus": {
+      "optional": true
+    },
     "prosemirror-dropcursor": {
       "optional": true
     },