@guardian/stand 0.0.15 → 0.0.17

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

@@ -3,11 +3,11 @@
  */
 export declare const semanticColors: {
     text: {
-        default: string;
-        subdued: string;
-        'inverse-default': string;
-        'inverse-subdued': string;
-        'inverse-strong': string;
+        strong: string;
+        weak: string;
+        'strong-inverse': string;
+        'weak-inverse': string;
+        'stronger-inverse': string;
         error: string;
         warning: string;
         success: string;
@@ -23,59 +23,54 @@ export declare const semanticColors: {
         magenta: string;
         orange: string;
         yellow: string;
-        'interactive-disabled': string;
     };
     bg: {
         base: string;
-        'raised-1': string;
-        'raised-2': string;
-    };
-    surface: {
-        'light-1': string;
-        'light-2': string;
-        'dark-1': string;
+        'raised-level-1': string;
+        'raised-level-2': string;
     };
     border: {
-        default: string;
-        secondary: string;
-        tertiary: string;
+        stronger: string;
         strong: string;
-        'inverse-strong': string;
-        'interactive-emphasised': string;
-        'interactive-neutral': string;
-        'interactive-disabled': string;
-        'interactive-focused': string;
-        'interactive-selected': string;
-    };
-    status: {
-        'status-draft': string;
-        'status-live': string;
-        'status-selected': string;
-        'status-focused': string;
+        weak: string;
+        weaker: string;
+        'strong-inverse': string;
+        disabled: string;
+        accent: string;
+        error: string;
+        focused: string;
+        selected: string;
+        'selected-inverse': string;
     };
     fill: {
-        'interactive-primary-emphasised': string;
-        'interactive-primary-emphasised-hover': string;
-        'interactive-primary-emphasised-pressed': string;
-        'interactive-secondary-emphasised-hover': string;
-        'interactive-secondary-emphasised-pressed': string;
-        'interactive-primary-neutral': string;
-        'interactive-primary-neutral-hover': string;
-        'interactive-primary-neutral-pressed': string;
-        'interactive-secondary-neutral-hover': string;
-        'interactive-secondary-neutral-pressed': string;
-        'interactive-disabled': string;
-        'green-subtle': string;
-        'blue-subtle': string;
-        'red-subtle': string;
-        'cyan-subtle': string;
-        'teal-subtle': string;
-        'cool-purple-subtle': string;
-        'warm-purple-subtle': string;
-        'magenta-subtle': string;
-        'orange-subtle': string;
-        'yellow-subtle': string;
+        'accent-strong': string;
+        'accent-strong-hover': string;
+        'accent-strong-pressed': string;
+        strong: string;
+        'strong-hover': string;
+        'strong-pressed': string;
+        weak: string;
+        'weak-hover': string;
+        'weak-pressed': string;
+        disabled: string;
+        'green-weak': string;
+        'blue-weak': string;
+        'red-weak': string;
+        'cyan-weak': string;
+        'teal-weak': string;
+        'cool-purple-weak': string;
+        'warm-purple-weak': string;
+        'magenta-weak': string;
+        'orange-weak': string;
+        'yellow-weak': string;
         selected: string;
+        'draft-strong': string;
+        'live-weak': string;
+        'warning-weak': string;
+        'information-weak': string;
+        'error-weak': string;
+        'error-strong': string;
+        'success-weak': string;
     };
 };
 export type SemanticColors = typeof semanticColors;

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/build/typescript/semantic/sizing.d.ts

@@ -3,6 +3,7 @@
  */
 export declare const semanticSizing: {
     height: {
+        xxs: string;
         xs: string;
         sm: string;
         md: string;

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/util/css/reset.css

@@ -122,3 +122,13 @@ video {
 body {
 	min-height: 100svh;
 }
+
+.focus-ring {
+	outline: 0.125rem solid blue;
+	outline-offset: -1px;
+}
+
+.focus-focus {
+	outline: 0.125rem solid red;
+	outline-offset: -1px;
+}

package/dist/util/reset.css.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-var reset = "/*\nSelect CSS resets for use with the stand design system.\nModified from https://github.com/guardian/csnx/blob/0f68024f6f3bee003b5f95e66d29fb74987a8dec/libs/%40guardian/source/src/foundations/utils/resets.ts\n*/\n*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\ttext-size-adjust: none;\n\t-webkit-text-size-adjust: none;\n\t-webkit-tap-highlight-color: transparent;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nhtml,\nbody {\n\ttext-rendering: optimizeLegibility;\n\tfont-feature-settings: 'kern';\n\tfont-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21 */\n\tfont-variant-ligatures: common-ligatures;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nmenu,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\n*[hidden] {\n\tdisplay: none;\n}\n\nbody {\n\tmin-height: 100svh;\n}\n";
+var reset = "/*\nSelect CSS resets for use with the stand design system.\nModified from https://github.com/guardian/csnx/blob/0f68024f6f3bee003b5f95e66d29fb74987a8dec/libs/%40guardian/source/src/foundations/utils/resets.ts\n*/\n*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\ttext-size-adjust: none;\n\t-webkit-text-size-adjust: none;\n\t-webkit-tap-highlight-color: transparent;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nhtml,\nbody {\n\ttext-rendering: optimizeLegibility;\n\tfont-feature-settings: 'kern';\n\tfont-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21 */\n\tfont-variant-ligatures: common-ligatures;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nmenu,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\n*[hidden] {\n\tdisplay: none;\n}\n\nbody {\n\tmin-height: 100svh;\n}\n\n.focus-ring {\n\toutline: 0.125rem solid blue;\n\toutline-offset: -1px;\n}\n\n.focus-focus {\n\toutline: 0.125rem solid red;\n\toutline-offset: -1px;\n}\n";
 
 module.exports = reset;

package/dist/util/reset.css.js

@@ -1,3 +1,3 @@
-var reset = "/*\nSelect CSS resets for use with the stand design system.\nModified from https://github.com/guardian/csnx/blob/0f68024f6f3bee003b5f95e66d29fb74987a8dec/libs/%40guardian/source/src/foundations/utils/resets.ts\n*/\n*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\ttext-size-adjust: none;\n\t-webkit-text-size-adjust: none;\n\t-webkit-tap-highlight-color: transparent;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nhtml,\nbody {\n\ttext-rendering: optimizeLegibility;\n\tfont-feature-settings: 'kern';\n\tfont-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21 */\n\tfont-variant-ligatures: common-ligatures;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nmenu,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\n*[hidden] {\n\tdisplay: none;\n}\n\nbody {\n\tmin-height: 100svh;\n}\n";
+var reset = "/*\nSelect CSS resets for use with the stand design system.\nModified from https://github.com/guardian/csnx/blob/0f68024f6f3bee003b5f95e66d29fb74987a8dec/libs/%40guardian/source/src/foundations/utils/resets.ts\n*/\n*,\n*::after,\n*::before {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\ttext-size-adjust: none;\n\t-webkit-text-size-adjust: none;\n\t-webkit-tap-highlight-color: transparent;\n\t-webkit-font-smoothing: antialiased;\n\t-moz-osx-font-smoothing: grayscale;\n}\n\nhtml,\nbody {\n\ttext-rendering: optimizeLegibility;\n\tfont-feature-settings: 'kern';\n\tfont-kerning: normal; /* Safari 7+, Firefox 24+, Chrome 33(?)+, Opera 21 */\n\tfont-variant-ligatures: common-ligatures;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nmenu,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n\n*[hidden] {\n\tdisplay: none;\n}\n\nbody {\n\tmin-height: 100svh;\n}\n\n.focus-ring {\n\toutline: 0.125rem solid blue;\n\toutline-offset: -1px;\n}\n\n.focus-focus {\n\toutline: 0.125rem solid red;\n\toutline-offset: -1px;\n}\n";
 
 export { reset as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@guardian/stand",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "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"
       ]
     }
   },
@@ -153,23 +163,23 @@
   "types": "./dist/types/index.d.ts",
   "sideEffects": false,
   "devDependencies": {
-    "@changesets/cli": "^2.29.8",
+    "@changesets/cli": "^2.30.0",
     "@codesandbox/sandpack-react": "^2.20.0",
     "@emotion/react": "11.11.4",
     "@figma/rest-api-spec": "^0.36.0",
-    "@guardian/eslint-config": "14.0.0",
+    "@guardian/eslint-config": "14.0.1",
     "@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",
-    "@rollup/plugin-commonjs": "29.0.0",
+    "@react-aria/focus": "3.21.5",
+    "@rollup/plugin-commonjs": "29.0.2",
     "@rollup/plugin-node-resolve": "16.0.3",
     "@rollup/plugin-typescript": "12.3.0",
-    "@storybook/addon-docs": "^10.2.14",
-    "@storybook/addon-themes": "^10.2.14",
-    "@storybook/react-vite": "^10.2.14",
-    "@terrazzo/cli": "^0.10.5",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/addon-themes": "^10.3.3",
+    "@storybook/react-vite": "^10.3.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/jest": "30.0.0",
     "@types/node": "^24.10.1",
@@ -177,10 +187,10 @@
     "@types/react-dom": "17.0.25",
     "change-case": "^5.4.4",
     "eslint": "9.39.3",
-    "eslint-plugin-storybook": "^10.2.14",
+    "eslint-plugin-storybook": "^10.3.3",
     "husky": "^9.1.7",
-    "jest": "30.2.0",
-    "jest-environment-jsdom": "^30.1.2",
+    "jest": "30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
     "prettier": "3.8.1",
     "prosemirror-dropcursor": "1.8.2",
     "prosemirror-history": "1.4.1",
@@ -193,22 +203,23 @@
     "react-dom": "17.0.2",
     "remark-gfm": "^4.0.1",
     "rimraf": "6.1.3",
-    "rollup": "4.59.0",
+    "rollup": "4.60.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-esbuild": "6.2.1",
     "rollup-plugin-import-css": "^4.2.0",
     "rollup-plugin-node-externals": "8.1.2",
-    "storybook": "^10.2.14",
-    "style-dictionary": "^5.3.2",
+    "storybook": "^10.3.3",
+    "style-dictionary": "^5.4.0",
     "ts-jest": "29.4.6",
     "tslib": "2.8.1",
     "typescript": "5.1.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.2",
     "vite-plugin-svgr": "^4.5.0"
   },
   "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 +227,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 +238,9 @@
     "@guardian/prosemirror-invisibles": {
       "optional": true
     },
+    "@react-aria/focus": {
+      "optional": true
+    },
     "prosemirror-dropcursor": {
       "optional": true
     },
@@ -265,7 +279,6 @@
     "build-storybook": "storybook build",
     "lint": "eslint . --ext .ts,.tsx",
     "lint:fix": "eslint --fix . --ext .ts,.tsx",
-    "lint:tokens": "tz check",
     "format:check": "prettier --check .",
     "format:fix": "prettier --write .",
     "tsc": "tsc",

package/dist/components/topbar/toolName/TopBarToolName.js

@@ -1,12 +0,0 @@
-import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { mergeDeep } from '../../../util/mergeDeep.js';
-import { Favicon } from '../../favicon/Favicon.js';
-import { Icon } from '../../icon/Icon.js';
-import { toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles, defaultToolNameTheme } from './styles.js';
-
-const TopBarToolName = ({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) => {
-  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
-  return jsxs("div", { css: [toolNameStyles(mergedTheme), cssOverrides], children: [jsx(Favicon, { ...favicon }), jsx("div", { css: [toolNameTypography(mergedTheme)], children: name }), subsection && jsxs(Fragment, { children: [jsx("div", { css: dividerStyles(mergedTheme), children: "\xA0" }), jsxs("div", { css: subsectionStyles(mergedTheme), children: [subsectionIcon && jsx(Icon, { size: "sm", children: subsectionIcon }), jsx("div", { css: subsectionTypography(mergedTheme), children: subsection })] })] })] });
-};
-
-export { TopBarToolName };