@guardian/stand 0.0.14 → 0.0.16

package/dist/styleD/build/typescript/component/menu.js

@@ -0,0 +1,138 @@
+const componentMenu = {
+  menu: {
+    shared: {
+      display: "flex",
+      "flex-direction": "column",
+      "background-color": "#ffffff",
+      border: "0.0625rem solid #cccccc"
+    }
+  },
+  menuSection: {
+    header: {
+      shared: {
+        display: "flex",
+        "align-items": "center",
+        padding: {
+          top: "0",
+          right: "0.5rem",
+          bottom: "0",
+          left: "0.5rem"
+        },
+        "background-color": "#ededed",
+        color: "#000000"
+      },
+      sm: {
+        height: "1.5rem",
+        typography: {
+          font: "normal 700 0.875rem/1 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      },
+      md: {
+        height: "2rem",
+        typography: {
+          font: "normal 700 1rem/1 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      }
+    }
+  },
+  menuItem: {
+    shared: {
+      display: "grid",
+      "grid-template-areas": "'icon label aside'",
+      "grid-template-areas-with-description": "'icon label aside' '. description .'",
+      "grid-template-columns": "auto 6fr 1fr",
+      gap: "0.25rem",
+      "align-items": "center",
+      padding: {
+        top: "0.75rem",
+        right: "1rem",
+        bottom: "0.75rem",
+        left: "1rem"
+      },
+      "border-bottom": "0.0625rem solid #cccccc",
+      icon: {
+        "grid-area": "icon",
+        "align-self": "start",
+        color: "#545454"
+      },
+      label: {
+        "grid-area": "label",
+        color: "#000000",
+        typography: {
+          font: "normal 460 1rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      description: {
+        "grid-area": "description",
+        color: "#545454",
+        typography: {
+          font: "normal 460 0.875rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      aside: {
+        "grid-area": "aside",
+        "justify-self": "end",
+        "align-self": "start",
+        color: "#000000",
+        typography: {
+          font: "normal 460 1rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      ":last-child": {
+        "border-bottom": "none"
+      },
+      ":hover": {
+        "background-color": "#ededed"
+      },
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "-0.125rem"
+      }
+    },
+    sm: {
+      icon: {
+        size: "1.125rem",
+        "line-height": 1.3
+      }
+    },
+    md: {
+      icon: {
+        size: "1.25rem",
+        "line-height": 1.3
+      }
+    }
+  },
+  menuSeparator: {
+    shared: {
+      "background-color": "#ededed",
+      height: "0.5rem",
+      width: "100%"
+    }
+  },
+  menuPopover: {
+    shared: {
+      overflow: "auto",
+      shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    },
+    sm: {
+      "max-width": "200px",
+      width: "100%"
+    },
+    md: {
+      "max-width": "320px",
+      width: "100%"
+    }
+  }
+};
+
+export { componentMenu };

package/dist/styleD/build/typescript/semantic/shadow.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+const semanticShadow = {
+  raised: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+};
+
+exports.semanticShadow = semanticShadow;

package/dist/styleD/build/typescript/semantic/shadow.js

@@ -0,0 +1,5 @@
+const semanticShadow = {
+  raised: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+};
+
+export { semanticShadow };

package/dist/types/TopBar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Top Bar components entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/TopBar.css),
+ * you don't need to install these.
+ */
+export { TopBarToolName } from './components/topbar/toolName/TopBarToolName';
+export type { TopBarToolNameProps } from './components/topbar/toolName/types';
+export type { PartialTopBarToolNameTheme as TopBarToolNameTheme } from './components/topbar/toolName/styles';
+export { componentTopBar } from './styleD/build/typescript/component/TopBar';
+export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';

package/dist/types/avatar.d.ts

@@ -14,6 +14,6 @@
  */
 export { Avatar } from './components/avatar/Avatar';
 export type { AvatarProps } from './components/avatar/types';
-export type { AvatarTheme } from './components/avatar/styles';
+export type { PartialAvatarTheme as AvatarTheme } from './components/avatar/styles';
 export { componentAvatar } from './styleD/build/typescript/component/avatar';
 export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';

package/dist/types/button.d.ts

@@ -15,6 +15,6 @@
  */
 export { Button } from './components/button/Button';
 export type { ButtonProps } from './components/button/types';
-export type { ButtonTheme } from './components/button/styles';
+export type { PartialButtonTheme as ButtonTheme } from './components/button/styles';
 export { componentButton } from './styleD/build/typescript/component/button';
 export type { ComponentButton } from './styleD/build/typescript/component/button';

package/dist/types/byline.d.ts

@@ -20,6 +20,6 @@
  */
 export { Byline } from './components/byline/Byline';
 export type { BylineModel } from './components/byline/lib';
-export type { PartialBylineTheme } from './components/byline/theme';
+export type { PartialBylineTheme as BylineTheme } from './components/byline/theme';
 export { componentByline } from './styleD/build/typescript/component/byline';
 export type { ComponentByline } from './styleD/build/typescript/component/byline';

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Avatar";
+export declare const componentTsx = "import { Avatar } from '@guardian/stand/avatar';\n\nexport const Component = () => {\n\treturn (\n\t\t<>\n\t\t\t<Avatar initials=\"AB\" color=\"blue\" />\n\t\t\t<Avatar\n\t\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\t\talt=\"Mahesh Makani\"\n\t\t\t\tinitials=\"MM\"\n\t\t\t\tcolor=\"blue\"\n\t\t\t\tsize=\"md\"\n\t\t\t/>\n\t\t</>\n\t);\n};\n";
+export declare const componentCss = "@import \"@guardian/stand/component/avatar.css\";\n\n    /* example setup of avatar style using md size and blue color */\n    .stand-avatar {\n    \tdisplay: var(--component-avatar-shared-display);\n    \talign-items: var(--component-avatar-shared-align-items);\n    \tjustify-content: var(--component-avatar-shared-justify-content);\n    \toverflow: var(--component-avatar-shared-overflow);\n    \tflex-shrink: var(--component-avatar-shared-flex-shrink);\n    \tborder-radius: var(--component-avatar-shared-border-radius);\n    \tbackground-color: var(--component-avatar-shared-color-blue-background);\n    \twidth: var(--component-avatar-md-size);\n    \theight: var(--component-avatar-md-size);\n    \tborder: var(--component-avatar-shared-color-blue-border);\n    \tcolor: var(--component-avatar-shared-color-blue-text);\n    \tfont: var(--component-avatar-md-typography-font);\n    \tletter-spacing: var(--component-avatar-md-typography-letter-spacing);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-avatar-md-typography-font-width);\n    }\n\n    /* example setup for avatar image */\n    .stand-avatar > img {\n    \twidth: 100%;\n    \theight: 100%;\n    \tobject-fit: cover;\n    }";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-avatar\">AB</div>\n\t<div class=\"stand-avatar\">\n\t\t<img\n\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\talt=\"Mahesh Makani\"\n\t\t/>\n\t</div>\n</div>";
+export declare const componentJs = "\n\t// for ts/js\n\timport { componentAvatar } from \"@guardian/stand\";\n\n\tconst style = `\n\tdisplay: ${componentAvatar.shared.display};\n\talign-items: ${componentAvatar.shared[\"align-items\"]};\n\tjustify-content: ${componentAvatar.shared[\"justify-content\"]};\n\toverflow: ${componentAvatar.shared.overflow};\n\tflex-shrink: ${componentAvatar.shared[\"flex-shrink\"]};\n\tborder-radius: ${componentAvatar.shared[\"border-radius\"]};\n\tbackground-color: ${componentAvatar.shared.color.blue.background};\n\twidth: ${componentAvatar.md.size};\n\theight: ${componentAvatar.md.size};\n\tborder: ${componentAvatar.shared.color.blue.border};\n\tcolor: ${componentAvatar.shared.color.blue.text};\n\tfont: ${componentAvatar.md.typography.font};\n\tletter-spacing: ${componentAvatar.md.typography.letterSpacing};\n\tfont-variation-settings: 'wdth' ${componentAvatar.md.typography.fontWidth};\n\t`;\n\n\tconst imgStyle = `\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\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}\">AB</div>\n\t\t<div style=\"${style}\">\n\t\t<img\n\t\t\tstyle=\"${imgStyle}\"\n\t\t\tsrc=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n\t\t\talt=\"Mahesh Makani\"\n\t\t/>\n\t\t</div>\n\t</div>\n`;\n";

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

@@ -1,8 +1,9 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentAvatar } from '../../styleD/build/typescript/component/avatar';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { AvatarProps } from './types';
 export type AvatarTheme = Prettify<ComponentAvatar>;
+export type PartialAvatarTheme = DeepPartial<AvatarTheme>;
 export declare const defaultAvatarTheme: AvatarTheme;
 export declare const avatarImageStyles: SerializedStyles;
 export declare const avatarStyles: (theme: AvatarTheme, { size, color }: Required<Pick<AvatarProps, 'size' | 'color'>>) => SerializedStyles;

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Button";
+export declare const componentTsx = "import { Button } from '@guardian/stand/button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<Button onPress={() => alert('Button Clicked from React')}>Button</Button>\n\t\t\t<Button isDisabled onPress={() => alert('Button Clicked from React')}>\n\t\t\t\tDisabled Button\n\t\t\t</Button>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Button\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tButton with Icon\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tisDisabled\n\t\t\t\tonPress={() => alert('Button Clicked from React')}\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled Button with Icon\n\t\t\t</Button>\n\t\t</div>\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n    .stand-button {\n    \tdisplay: var(--component-button-shared-display);\n    \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n    \ttext-align: var(--component-button-shared-text-align);\n    \tbox-shadow: var(--component-button-shared-box-shadow);\n    \ttext-decoration: var(--component-button-shared-text-decoration);\n    \tcursor: var(--component-button-shared-cursor);\n    \tjustify-content: var(--component-button-shared-justify-content);\n    \talign-items: var(--component-button-shared-align-items);\n    }\n    .stand-button:focus-visible {\n    \toutline: var(--component-button-shared-focus-visible-outline);\n    \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n    }\n    .stand-button:disabled {\n    \tcursor: var(--component-button-shared-disabled-cursor);\n    }\n\n    /* example setup of button/link button style using md size and emphasised primary variant */\n    .stand-button-emphasised-primary {\n    \tcolor: var(--component-button-emphasised-primary-shared-color);\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-background-color\n    \t);\n    \theight: var(--component-button-emphasised-primary-md-height);\n    \tpadding: var(--component-button-emphasised-primary-md-padding-top)\n    \tvar(--component-button-emphasised-primary-md-padding-right)\n    \tvar(--component-button-emphasised-primary-md-padding-bottom)\n    \tvar(--component-button-emphasised-primary-md-padding-left);\n    \tfont: var(--component-button-emphasised-primary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-emphasised-primary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-emphasised-primary-md-typography-font-width);\n    \tborder: var(--component-button-emphasised-primary-shared-border);\n    \tborder-radius: var(\n    \t\t--component-button-emphasised-primary-shared-border-radius\n    \t);\n    }\n    .stand-button-emphasised-primary:hover {\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-hover-border);\n    }\n    .stand-button-emphasised-primary:active {\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-active-border);\n    }\n    .stand-button-emphasised-primary:disabled {\n    \tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n    \t}\n    \t.stand-button-emphasised-primary > .material-symbols {\n    \tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n    \t}\n    \t.stand-button-emphasised-primary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-emphasised-primary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-emphasised-primary-md-icon-gap);\n    }\n\n    /* example setup of button/link button style using md size and neutral secondary variant */\n    .stand-button-neutral-secondary {\n    \tcolor: var(--component-button-neutral-secondary-shared-color);\n    \tbackground: var(--component-button-neutral-secondary-shared-background-color);\n    \theight: var(--component-button-neutral-secondary-md-height);\n    \tpadding: var(--component-button-neutral-secondary-md-padding-top)\n    \tvar(--component-button-neutral-secondary-md-padding-right)\n    \tvar(--component-button-neutral-secondary-md-padding-bottom)\n    \tvar(--component-button-neutral-secondary-md-padding-left);\n    \tfont: var(--component-button-neutral-secondary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-neutral-secondary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-neutral-secondary-md-typography-font-width);\n    \tborder: var(--component-button-neutral-secondary-shared-border);\n    \tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n    }\n    .stand-button-neutral-secondary:hover {\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-hover-border);\n    }\n    .stand-button-neutral-secondary:active {\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-active-border);\n    }\n    .stand-button-neutral-secondary:disabled {\n    \tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n    }\n    .stand-button-neutral-secondary > .material-symbols {\n    \tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n    }\n    .stand-button-neutral-secondary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-neutral-secondary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-neutral-secondary-md-icon-gap);\n    }\n\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n    <div class=\"container\">\n    \t<button class=\"stand-button stand-button-emphasised-primary\">Button</button>\n    \t<button class=\"stand-button stand-button-emphasised-primary\" disabled>Disabled Button</button>\n    </div>\n\n    <div class=\"container\">\n    \t<button class=\"stand-button stand-button-neutral-secondary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n    \t<button class=\"stand-button stand-button-neutral-secondary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n    </div>\n\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } 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/* shared button styles for all variants */\n    \t.js-stand-button {\n    \t\tdisplay: ${componentButton.shared.display};\n    \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n    \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n    \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n    \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n    \t\tcursor: ${componentButton.shared.cursor};\n    \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n    \t\talign-items: ${componentButton.shared[\"align-items\"]};\n    \t}\n    \t.js-stand-button:focus-visible {\n    \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n    \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n    \t}\n    \t.js-stand-button:disabled {\n    \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n    \t}\n\n    \t/* example setup of button/link button style using md size and emphasised primary variant */\n    \t.js-stand-button-emphasised-primary {\n    \t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n    \t\tpadding: ${componentButton[\"emphasised-primary\"].md.padding.top}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.right}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.bottom}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-emphasised-primary:hover {\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n    \t}\n    \t.js-stand-button-emphasised-primary:active {\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-emphasised-primary:disabled {\n    \t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-emphasised-primary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-emphasised-primary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"emphasised-primary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"emphasised-primary\"].md.icon.gap};\n    \t}\n\n    \t/* example setup of button/link button style using md size and neutral secondary variant */\n    \t.js-stand-button-neutral-secondary {\n    \t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n    \t\tpadding: ${componentButton[\"neutral-secondary\"].md.padding.top}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.right}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.bottom}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-neutral-secondary:hover {\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary:active {\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary:disabled {\n    \t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-neutral-secondary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"neutral-secondary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"neutral-secondary\"].md.icon.gap};\n    \t}\n\n    `);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the button components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n    \t<div class=\"container\">\n    \t\t<button class=\"js-stand-button js-stand-button-emphasised-primary\">Button</button>\n    \t\t<button class=\"js-stand-button js-stand-button-emphasised-primary\" disabled>Disabled Button</button>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<button class=\"js-stand-button js-stand-button-neutral-secondary\"><span class=\"material-symbols\">raven</span>Button with Icon</button>\n    \t\t<button class=\"js-stand-button js-stand-button-neutral-secondary\" disabled><span class=\"material-symbols\">owl</span>Disabled Button with Icon</button>\n    \t</div>\n    </div>`;\n\n";

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

@@ -1,7 +1,8 @@
 import type { SerializedStyles } from '@emotion/react';
 import type { ComponentButton } from '../../styleD/build/typescript/component/button';
-import type { Prettify } from '../../util/types';
+import type { DeepPartial, Prettify } from '../../util/types';
 import type { ButtonProps } from './types';
 export type ButtonTheme = Prettify<ComponentButton>;
+export type PartialButtonTheme = DeepPartial<ButtonTheme>;
 export declare const defaultButtonTheme: ButtonTheme;
 export declare const buttonStyles: (theme: ButtonTheme, { size, variant }: Required<Pick<ButtonProps, 'size' | 'variant'>>, hasIcon?: boolean, isIconButton?: boolean) => SerializedStyles;

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Favicon";
+export declare const componentTsx = "import { Favicon } from '@guardian/stand/favicon';\n\nexport const Component = () => (\n\t<>\n\t\t{/* letter example */}\n\t\t<Favicon letter=\"C\" />\n\n\t\t{/* icon example */}\n\t\t<Favicon icon=\"raven\" />\n\n\t\t{/* svg icon example */}\n\t\t<Favicon\n          icon={\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              height=\"24px\"\n              viewBox=\"0 -960 960 960\"\n              width=\"24px\"\n              fill=\"#1f1f1f\"\n            >\n              <path d=\"M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Zm320-350Z\" />\n            </svg>\n          }\n        />\n\n\t\t{/* image example */}\n\t\t<Favicon\n          src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\"\n          alt=\"Mahesh Makani\"\n        />\n\t</>\n);\n\n";
+export declare const componentCss = "\n/* import the favicon styles */\n@import '@guardian/stand/component/favicon.css';\n/* import the icon styles if using the icon variant of the favicon component */\n@import \"@guardian/stand/component/icon.css\";\n\n/* example setup of favicon style */\n.stand-favicon {\n\tbackground-color: var(--component-favicon-color-background);\n\tdisplay: var(--component-favicon-display);\n\talign-items: var(--component-favicon-align-items);\n\tjustify-content: var(--component-favicon-justify-content);\n\twidth: var(--component-favicon-size);\n\theight: var(--component-favicon-size);\n\tuser-select: var(--component-favicon-user-select);\n\tcolor: var(--component-favicon-color-text);\n\tfont: var(--component-favicon-typography-font);\n\tletter-spacing: var(--component-favicon-typography-letter-spacing);\n\tfont-variation-settings: \"wdth\" var(--component-favicon-typography-font-width);\n}\n\n.stand-favicon-icon {\n\tdisplay: var(--component-icon-shared-display);\n\tuser-select: var(--component-icon-shared-user-select);\n\tfont-size: var(--component-icon-md-size);\n}\n\n.stand-favicon-icon-color-svg > svg {\n\twidth: var(--component-icon-md-size);\n\theight: var(--component-icon-md-size);\n\tfill: var(--component-favicon-color-text);\n}\n\n/* example setup for favicon image */\n.stand-favicon > img {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n}\n";
+export declare const componentHtml = "<div class=\"container\">\n\t<div class=\"stand-favicon\">C</div>\n    <div class=\"stand-favicon\">\n\t\t<span class=\"material-symbols stand-favicon-icon\">raven</span>\n    </div>\n    <div class=\"stand-favicon\">\n        <span class=\"stand-favicon-icon stand-favicon-icon-color-svg\"><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\"/></svg></span>\n    </div>\n    <div class=\"stand-favicon\">\n    \t<img src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n    </div>\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentFavicon, componentIcon } from \"@guardian/stand\";\n\nconst faviconStyles = `\n    background-color: ${componentFavicon.color.background};\n    display: ${componentFavicon.display};\n    align-items: ${componentFavicon[\"align-items\"]};\n    justify-content: ${componentFavicon[\"justify-content\"]};\n    width: ${componentFavicon.size};\n    height: ${componentFavicon.size};\n    user-select: ${componentFavicon[\"user-select\"]};\n`;\n\nconst typographyStyle = `\n    color: ${componentFavicon.color.text};\n    font: ${componentFavicon.typography.font};\n    letter-spacing: ${componentFavicon.typography.letterSpacing};\n    font-variation-settings: 'wdth' ${componentFavicon.typography.fontWidth};\n`;\n\nconst imgStyle = `\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n`;\n\nconst iconStyles = `\n  display: ${componentIcon.shared.display};\n  user-select: ${componentIcon.shared[\"user-select\"]};\n  font-size: ${componentIcon.md.size};\n  color: ${componentFavicon.color.text};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.md.size};\n  height: ${componentIcon.md.size};\n  fill:  ${componentFavicon.color.text};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n<div class=\"container\">\n  <div style=\"${faviconStyles}${typographyStyle}\">C</div>\n  <div style=\"${faviconStyles}\">\n\t<span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n  </div>\n  <div style=\"${faviconStyles}\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgStyles}\" 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\"/></svg></span>\n  </div>\n  <div style=\"${faviconStyles}\">\n    <img style=\"${imgStyle}\" src=\"https://uploads.guimcode.co.uk/2026/01/27/f85e2e477ce54f4c3b671faa5cd21673aa9f8072fddb5d70a73e6038dc812eec.jpg\" alt=\"Mahesh Makani\" />\n  </div>\n`;\n";

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

@@ -0,0 +1,5 @@
+export declare const componentName = "Icon";
+export declare const componentTsx = "import { Icon } from '@guardian/stand/icon';\nimport { baseColors } from '@guardian/stand';\n\nexport const Component = () => (\n\t<>\n\t\t<div\n\t\t\tclassName=\"container\"\n\t\t>\n\t\t\tMaterial Symbols\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Icon size=\"lg\" symbol=\"raven\" />\n\t\t\t<Icon size=\"lg\" symbol=\"owl\" fill={baseColors['warm-purple'][400]} />\n\t\t</div>\n\t\t<div\n\t\t\tclassName=\"container\"\n\t\t>\n\t\t\tSVGs\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<Icon size=\"lg\">\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg>\n\t\t\t</Icon>\n\t\t\t<Icon size=\"lg\" fill={baseColors['warm-purple'][400]}>\n\t\t\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg>\n\t\t\t</Icon>\n\t\t</div>\n\t</>\n);\n\n";
+export declare const componentCss = "\n/* import the icon styles */\n@import '@guardian/stand/component/icon.css';\n/* color styles for customisation */\n@import \"@guardian/stand/base/colors.css\";\n\n.container {\n  display: flex;\n  gap: var(--base-spacing-4-rem);\n  margin-top: var(--base-spacing-4-rem);\n}\n\n.stand-icon {\n  display: var(--component-icon-shared-display);\n  user-select: var(--component-icon-shared-user-select);\n  font-size: var(--component-icon-lg-size);\n}\n\n.stand-icon-font-color {\n  color: var(--base-colors-warm-purple-400);\n}\n\n.stand-icon-svg > svg {\n  width: var(--component-icon-lg-size);\n  height: var(--component-icon-lg-size);\n}\n\n.stand-icon-svg-color > svg {\n  fill: var(--base-colors-warm-purple-400);\n}\n\n";
+export declare const componentHtml = "<div class=\"container\">Material Symbols</div>\n    <div class=\"container\">\n      <span class=\"material-symbols stand-icon\">raven</span>\n      <span class=\"material-symbols stand-icon stand-icon-font-color\">owl</span>\n    </div>\n    <div class=\"container\">SVGs</div>\n    <div class=\"container\">\n      <span class=\"material-symbols stand-icon stand-icon-svg\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg></span>\n      <span class=\"material-symbols stand-icon stand-icon-svg stand-icon-svg-color\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg></span>\n    </div>";
+export declare const componentJs = "// for ts/js\nimport { componentIcon, baseColors } from \"@guardian/stand\";\n\nconst iconStyles = `\n  display: ${componentIcon.shared.display};\n  user-select: ${componentIcon.shared[\"user-select\"]};\n  font-size: ${componentIcon.lg.size};\n`;\n\nconst iconFontColorStyles = `\n  ${iconStyles}\n  color: ${baseColors['warm-purple'][400]};\n`;\n\nconst iconSvgStyles = `\n  width: ${componentIcon.lg.size};\n  height: ${componentIcon.lg.size};\n`;\n\nconst iconSvgColorStyles = `\n  ${iconSvgStyles}\n  fill: ${baseColors['warm-purple'][400]};\n`;\n\n// e.g. adding to DOM using vanilla JS styles\ndocument.getElementById(\"app\").innerHTML = `\n  <div style=\"margin-top: 4px;\">Material Symbols</div>\n  <div class=\"container\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\">raven</span>\n    <span class=\"material-symbols\" style=\"${iconFontColorStyles}\">owl</span>\n  </div>\n  <div style=\"margin-top: 4px;\">SVGs</div>\n  <div class=\"container\">\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"m334-80-74-30 58-141q-106-28-172-114T80-560v-160q0-66 47-113t113-47q22 0 42 7.5t40 15.5l238 97-160 60v60l440 280 40 200h-80l-40-80H560v160h-80v-160h-80L334-80Zm66-240h353l-63-40H400q-66 0-113-47t-47-113h80q0 33 23.5 56.5T400-440h165L320-596v-124q0-33-23.5-56.5T240-800q-33 0-56.5 23.5T160-720v160q0 100 70 170t170 70ZM211.5-691.5Q200-703 200-720t11.5-28.5Q223-760 240-760t28.5 11.5Q280-737 280-720t-11.5 28.5Q257-680 240-680t-28.5-11.5ZM400-360Z\"/></svg></span>\n    <span class=\"material-symbols\" style=\"${iconStyles}\"><svg style=\"${iconSvgColorStyles}\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#1f1f1f\"><path d=\"M480-80q-134 0-227-93t-93-227v-200q0-122 96-201t224-79q128 0 224 79t96 201v520H480Zm0-80h80q-19-25-29.5-55.5T520-280v-42q-10 1-20 1.5t-20 .5q-67 0-129.5-23.5T240-415v15q0 100 70 170t170 70Zm120-120q0 50 35 85t85 35v-255q-26 26-56 44.5T600-340v60ZM440-560q0-66-45-111t-109-48q-22 24-34 54t-12 65q0 89 72.5 144.5T480-400q95 0 167.5-55.5T720-600q0-35-12-65.5T674-720q-64 2-109 48t-45 112h-80Zm-128.5-11.5Q300-583 300-600t11.5-28.5Q323-640 340-640t28.5 11.5Q380-617 380-600t-11.5 28.5Q357-560 340-560t-28.5-11.5Zm280 0Q580-583 580-600t11.5-28.5Q603-640 620-640t28.5 11.5Q660-617 660-600t-11.5 28.5Q637-560 620-560t-28.5-11.5ZM370-778q34 14 62 37t48 52q20-29 47.5-52t61.5-37q-25-11-52.5-16.5T480-800q-29 0-56.5 5.5T370-778Zm430 618H520h280Zm-320 0q-100 0-170-70t-70-170q0 100 70 170t170 70h80-80Zm120-120q0 50 35 85t85 35q-50 0-85-35t-35-85ZM480-689Z\"/></svg></span>\n  </div>\n`;\n";

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

@@ -0,0 +1,5 @@
+export declare const componentName = "IconButton";
+export declare const componentTsx = "import { IconButton } from \"@guardian/stand/icon-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconButton\n          onPress={() => alert(\"You summoned a raven!\")}\n          symbol=\"raven\"\n          ariaLabel=\"Summon a raven\"\n        />\n        <IconButton\n          isDisabled\n          onPress={() => alert(\"You consulted with an owl!\")}\n          symbol=\"owl\"\n          ariaLabel=\"Consult with an owl\"\n\t\t  variant=\"neutral-secondary\"\n        />\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-emphasised-primary {\n\t\tcolor: var(--component-button-emphasised-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-emphasised-primary-md-icon-button-width);\n\t\theight: var(--component-button-emphasised-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-emphasised-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-emphasised-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-emphasised-primary-md-typography-font-width);\n\t\tborder: var(--component-button-emphasised-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-emphasised-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-emphasised-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-emphasised-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-active-border);\n\t}\n\t.stand-icon-button-emphasised-primary:disabled {\n\t\tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-neutral-secondary {\n\t\tcolor: var(--component-button-neutral-secondary-shared-color);\n\t\tbackground: var(--component-button-neutral-secondary-shared-background-color);\n\t\twidth: var(--component-button-neutral-secondary-md-icon-button-width);\n\t\theight: var(--component-button-neutral-secondary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-neutral-secondary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-neutral-secondary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-neutral-secondary-md-typography-font-width);\n\t\tborder: var(--component-button-neutral-secondary-shared-border);\n\t\tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n\t}\n\t.stand-icon-button-neutral-secondary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-hover-border);\n\t}\n\t.stand-icon-button-neutral-secondary:active {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-active-border);\n\t}\n\t.stand-icon-button-neutral-secondary:disabled, .stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n\t}\n\t.stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n\t}\n\n";
+export declare const componentHtml = "<div class=\"container\">\n    <button class=\"stand-icon-button stand-icon-button-emphasised-primary\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></button>\n    <button class=\"stand-icon-button stand-icon-button-neutral-secondary\" disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></button>\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\timport { componentButton } 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/* shared button styles for all variants */\n\t.js-stand-icon-button {\n\t\tdisplay: ${componentButton.shared.display};\n\t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n\t\ttext-align: ${componentButton.shared[\"text-align\"]};\n\t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n\t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n\t\tcursor: ${componentButton.shared.cursor};\n\t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n\t\talign-items: ${componentButton.shared[\"align-items\"]};\n\t}\n\t.js-stand-icon-button:focus-visible {\n\t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n\t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n\t}\n\t.js-stand-icon-button:disabled {\n\t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.js-stand-icon-button-emphasised-primary {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"emphasised-primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n\t\tpadding: 0;\n\t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n\t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth'\n\t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n\t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n\t}\n\t.js-stand-icon-button-emphasised-primary:hover {\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n\t}\n\t.js-stand-icon-button-emphasised-primary:active {\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n\t}\n\t.js-stand-icon-button-emphasised-primary:disabled {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n\t}\n\t.js-stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-neutral-secondary {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"neutral-secondary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n\t\tpadding: 0;\n\t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n\t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth'\n\t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n\t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n\t}\n\t.js-stand-icon-button-neutral-secondary:hover {\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary:active {\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary:disabled, .js-stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-emphasised-primary\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></button>\n\t\t<button class=\"js-stand-icon-button js-stand-icon-button-neutral-secondary\" disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></button>\n\t</div>\n\t`;\n\n";

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

@@ -0,0 +1,5 @@
+export declare const componentName = "IconLinkButton";
+export declare const componentTsx = "import { IconLinkButton } from \"@guardian/stand/icon-link-button\";\n\nexport const Component = () => (\n\t<>\n\t\t<IconLinkButton\n          href=\"#\"\n          symbol=\"raven\"\n          ariaLabel=\"Summon a raven\"\n        />\n        <IconLinkButton\n          href=\"#\"\n          isDisabled\n          variant=\"emphasised-secondary\"\n          symbol=\"owl\"\n          ariaLabel=\"Consult with an owl\"\n        />\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n\t.stand-icon-button {\n\t\tdisplay: var(--component-button-shared-display);\n\t\t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n\t\ttext-align: var(--component-button-shared-text-align);\n\t\tbox-shadow: var(--component-button-shared-box-shadow);\n\t\ttext-decoration: var(--component-button-shared-text-decoration);\n\t\tcursor: var(--component-button-shared-cursor);\n\t\tjustify-content: var(--component-button-shared-justify-content);\n\t\talign-items: var(--component-button-shared-align-items);\n\t}\n\t.stand-icon-button:focus-visible {\n\t\toutline: var(--component-button-shared-focus-visible-outline);\n\t\toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n\t}\n\t.stand-icon-button:disabled {\n\t\tcursor: var(--component-button-shared-disabled-cursor);\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.stand-icon-button-emphasised-primary {\n\t\tcolor: var(--component-button-emphasised-primary-shared-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-background-color\n\t\t);\n\t\twidth: var(--component-button-emphasised-primary-md-icon-button-width);\n\t\theight: var(--component-button-emphasised-primary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-emphasised-primary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-emphasised-primary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-emphasised-primary-md-typography-font-width);\n\t\tborder: var(--component-button-emphasised-primary-shared-border);\n\t\tborder-radius: var(\n\t\t\t--component-button-emphasised-primary-shared-border-radius\n\t\t);\n\t}\n\t.stand-icon-button-emphasised-primary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-hover-border);\n\t}\n\t.stand-icon-button-emphasised-primary:active {\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-active-border);\n\t}\n\t.stand-icon-button-emphasised-primary:disabled {\n\t\tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-emphasised-primary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n\t}\n\t.stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.stand-icon-button-neutral-secondary {\n\t\tcolor: var(--component-button-neutral-secondary-shared-color);\n\t\tbackground: var(--component-button-neutral-secondary-shared-background-color);\n\t\twidth: var(--component-button-neutral-secondary-md-icon-button-width);\n\t\theight: var(--component-button-neutral-secondary-md-height);\n\t\tpadding: 0;\n\t\tfont: var(--component-button-neutral-secondary-md-typography-font);\n\t\tletter-spacing: var(\n\t\t\t--component-button-neutral-secondary-md-typography-letter-spacing\n\t\t);\n\t\tfont-variation-settings: \"wdth\"\n\t\t\tvar(--component-button-neutral-secondary-md-typography-font-width);\n\t\tborder: var(--component-button-neutral-secondary-shared-border);\n\t\tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n\t}\n\t.stand-icon-button-neutral-secondary:hover {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-hover-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-hover-border);\n\t}\n\t.stand-icon-button-neutral-secondary:active {\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-active-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-active-border);\n\t}\n\t.stand-icon-button-neutral-secondary:disabled, .stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n\t\tbackground: var(\n\t\t\t--component-button-neutral-secondary-shared-disabled-background-color\n\t\t);\n\t\tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n\t}\n\t.stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n\t}\n\n";
+export declare const componentHtml = "<div class=\"container\">\n    <a class=\"stand-icon-button stand-icon-button-emphasised-primary\" href=\"#\" title=\"Summon a raven\" aria-label=\"Summon a raven\"><span class=\"material-symbols\" aria-hidden=\"true\">raven</span></a>\n    <a class=\"stand-icon-button stand-icon-button-neutral-secondary\" data-disabled title=\"Consult with an owl\" aria-label=\"Consult with an owl\"><span class=\"material-symbols\" aria-hidden=\"true\">owl</span></a>\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\timport { componentButton } 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/* shared button styles for all variants */\n\t.js-stand-icon-button {\n\t\tdisplay: ${componentButton.shared.display};\n\t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n\t\ttext-align: ${componentButton.shared[\"text-align\"]};\n\t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n\t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n\t\tcursor: ${componentButton.shared.cursor};\n\t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n\t\talign-items: ${componentButton.shared[\"align-items\"]};\n\t}\n\t.js-stand-icon-button:focus-visible {\n\t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n\t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n\t}\n\t.js-stand-icon-button:disabled {\n\t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n\t}\n\n\t/* example setup of button/link button style using md size and emphasised primary variant */\n\t.js-stand-icon-button-emphasised-primary {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"emphasised-primary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n\t\tpadding: 0;\n\t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n\t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth'\n\t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n\t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n\t}\n\t.js-stand-icon-button-emphasised-primary:hover {\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n\t}\n\t.js-stand-icon-button-emphasised-primary:active {\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n\t}\n\t.js-stand-icon-button-emphasised-primary:disabled, .js-stand-icon-button-emphasised-primary[data-disabled] {\n\t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n\t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n\t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n\t}\n\t.js-stand-icon-button-emphasised-primary > .material-symbols {\n\t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n\t}\n\n\t/* example setup of button/link button style using md size and neutral secondary variant */\n\t.js-stand-icon-button-neutral-secondary {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n\t\twidth: ${componentButton[\"neutral-secondary\"].md.iconButton.width};\n\t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n\t\tpadding: 0;\n\t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n\t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n\t\tfont-variation-settings: 'wdth'\n\t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n\t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n\t}\n\t.js-stand-icon-button-neutral-secondary:hover {\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary:active {\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary:disabled, .js-stand-icon-button-neutral-secondary[data-disabled] {\n\t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n\t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n\t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n\t}\n\t.js-stand-icon-button-neutral-secondary > .material-symbols {\n\t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n\t}\n\t`);\n\n\t// update the document with the sheet\n\tdocument.adoptedStyleSheets.push(sheet);\n\n\t// modify the dom with the button components using the generated stylesheet\n\tdocument.getElementById(\"app\").innerHTML = `\n\t<div class=\"container\">\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-emphasised-primary\" href=\"#\" title=\"Summon a raven\"><span class=\"material-symbols\">raven</span></a>\n\t\t<a class=\"js-stand-icon-button js-stand-icon-button-neutral-secondary\" data-disabled title=\"Consult with an owl\"><span class=\"material-symbols\">owl</span></a>\n\t</div>\n\t`;\n\n";

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

@@ -0,0 +1,5 @@
+export declare const componentName = "LinkButton";
+export declare const componentTsx = "import { LinkButton } from '@guardian/stand/link-button';\n\nexport const Component = () => (\n\t<>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton href=\"#\">\n          \t\tLinkButton\n\t\t\t</LinkButton>\n\t\t\t<LinkButton isDisabled variant=\"emphasised-secondary\">\n\t\t\t\tDisabled LinkButton\n\t\t\t</LinkButton>\n\t\t</div>\n\t\t<div className=\"container\">\n\t\t\t<LinkButton\n\t\t\t\thref=\"#\"\n\t\t\t\ticon=\"raven\"\n\t\t\t>\n\t\t\t\tLinkButton with Icon\n\t\t\t</LinkButton>\n\t\t\t<LinkButton\n\t\t\t\tisDisabled\n\t\t\t\thref=\"#\"\n\t\t\t\tvariant=\"neutral-secondary\"\n\t\t\t\ticon=\"owl\"\n\t\t\t>\n\t\t\t\tDisabled LinkButton with Icon\n\t\t\t</LinkButton>\n\t\t</div>\n\t</>\n);\n\n";
+export declare const componentCss = "@import '@guardian/stand/component/button.css';\n\n    /* shared button styles for all variants */\n    .stand-button {\n    \tdisplay: var(--component-button-shared-display);\n    \t-webkit-appearance: var(--component-button-shared-webkit-appearance);\n    \ttext-align: var(--component-button-shared-text-align);\n    \tbox-shadow: var(--component-button-shared-box-shadow);\n    \ttext-decoration: var(--component-button-shared-text-decoration);\n    \tcursor: var(--component-button-shared-cursor);\n    \tjustify-content: var(--component-button-shared-justify-content);\n    \talign-items: var(--component-button-shared-align-items);\n    }\n    .stand-button:focus-visible {\n    \toutline: var(--component-button-shared-focus-visible-outline);\n    \toutline-offset: var(--component-button-shared-focus-visible-outline-offset);\n    }\n    .stand-button:disabled {\n    \tcursor: var(--component-button-shared-disabled-cursor);\n    }\n\n    /* example setup of button/link button style using md size and emphasised primary variant */\n    .stand-button-emphasised-primary {\n    \tcolor: var(--component-button-emphasised-primary-shared-color);\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-background-color\n    \t);\n    \theight: var(--component-button-emphasised-primary-md-height);\n    \tpadding: var(--component-button-emphasised-primary-md-padding-top)\n    \tvar(--component-button-emphasised-primary-md-padding-right)\n    \tvar(--component-button-emphasised-primary-md-padding-bottom)\n    \tvar(--component-button-emphasised-primary-md-padding-left);\n    \tfont: var(--component-button-emphasised-primary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-emphasised-primary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-emphasised-primary-md-typography-font-width);\n    \tborder: var(--component-button-emphasised-primary-shared-border);\n    \tborder-radius: var(\n    \t\t--component-button-emphasised-primary-shared-border-radius\n    \t);\n    }\n    .stand-button-emphasised-primary:hover {\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-hover-border);\n    }\n    .stand-button-emphasised-primary:active {\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-active-border);\n    }\n    .stand-button-emphasised-primary:disabled, .stand-button-emphasised-primary[data-disabled] {\n    \tcolor: var(--component-button-emphasised-primary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-emphasised-primary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-emphasised-primary-shared-disabled-border);\n    \t}\n    \t.stand-button-emphasised-primary > .material-symbols {\n    \tfont-size: var(--component-button-emphasised-primary-md-icon-size);\n    \t}\n    \t.stand-button-emphasised-primary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-emphasised-primary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-emphasised-primary-md-icon-gap);\n    }\n\n    /* example setup of button/link button style using md size and neutral secondary variant */\n    .stand-button-neutral-secondary {\n    \tcolor: var(--component-button-neutral-secondary-shared-color);\n    \tbackground: var(--component-button-neutral-secondary-shared-background-color);\n    \theight: var(--component-button-neutral-secondary-md-height);\n    \tpadding: var(--component-button-neutral-secondary-md-padding-top)\n    \tvar(--component-button-neutral-secondary-md-padding-right)\n    \tvar(--component-button-neutral-secondary-md-padding-bottom)\n    \tvar(--component-button-neutral-secondary-md-padding-left);\n    \tfont: var(--component-button-neutral-secondary-md-typography-font);\n    \tletter-spacing: var(\n    \t\t--component-button-neutral-secondary-md-typography-letter-spacing\n    \t);\n    \tfont-variation-settings: \"wdth\"\n    \tvar(--component-button-neutral-secondary-md-typography-font-width);\n    \tborder: var(--component-button-neutral-secondary-shared-border);\n    \tborder-radius: var(--component-button-neutral-secondary-shared-border-radius);\n    }\n    .stand-button-neutral-secondary:hover {\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-hover-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-hover-border);\n    }\n    .stand-button-neutral-secondary:active {\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-active-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-active-border);\n    }\n    .stand-button-neutral-secondary:disabled, .stand-button-neutral-secondary[data-disabled] {\n    \tcolor: var(--component-button-neutral-secondary-shared-disabled-color);\n    \tbackground: var(\n    \t\t--component-button-neutral-secondary-shared-disabled-background-color\n    \t);\n    \tborder: var(--component-button-neutral-secondary-shared-disabled-border);\n    }\n    .stand-button-neutral-secondary > .material-symbols {\n    \tfont-size: var(--component-button-neutral-secondary-md-icon-size);\n    }\n    .stand-button-neutral-secondary:has(> .material-symbols) {\n    \tpadding-left: var(\n    \t\t--component-button-neutral-secondary-md-padding-with-icon-icon-left-left\n    \t);\n    \tgap: var(--component-button-neutral-secondary-md-icon-gap);\n    }\n\n";
+export declare const componentHtml = "<div class=\"container flow-column\">\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-emphasised-primary\">LinkButton</a>\n    \t<a class=\"stand-button stand-button-neutral-secondary\" data-disabled>Disabled LinkButton</a>\n    </div>\n\n    <div class=\"container\">\n    \t<a href=\"#\" class=\"stand-button stand-button-emphasised-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t<a class=\"stand-button stand-button-neutral-secondary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    </div>\n\n</div>\n";
+export declare const componentJs = "\t// for ts/js\n\t\timport { componentButton } 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/* shared button styles for all variants */\n    \t.js-stand-button {\n    \t\tdisplay: ${componentButton.shared.display};\n    \t\t-webkit-appearance: ${componentButton.shared[\"-webkit-appearance\"]};\n    \t\ttext-align: ${componentButton.shared[\"text-align\"]};\n    \t\tbox-shadow: ${componentButton.shared[\"box-shadow\"]};\n    \t\ttext-decoration: ${componentButton.shared[\"text-decoration\"]};\n    \t\tcursor: ${componentButton.shared.cursor};\n    \t\tjustify-content: ${componentButton.shared[\"justify-content\"]};\n    \t\talign-items: ${componentButton.shared[\"align-items\"]};\n    \t}\n    \t.js-stand-button:focus-visible {\n    \t\toutline: ${componentButton.shared[\":focus-visible\"].outline};\n    \t\toutline-offset: ${componentButton.shared[\":focus-visible\"][\"outline-offset\"]};\n    \t}\n    \t.js-stand-button:disabled {\n    \t\tcursor: ${componentButton.shared[\":disabled\"].cursor};\n    \t}\n\n    \t/* example setup of button/link button style using md size and emphasised primary variant */\n    \t.js-stand-button-emphasised-primary {\n    \t\tcolor: ${componentButton[\"emphasised-primary\"].shared.color};\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"emphasised-primary\"].md.height};\n    \t\tpadding: ${componentButton[\"emphasised-primary\"].md.padding.top}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.right}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.bottom}\n    \t\t${componentButton[\"emphasised-primary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"emphasised-primary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"emphasised-primary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"emphasised-primary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"emphasised-primary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-emphasised-primary:hover {\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":hover\"].border}\n    \t}\n    \t.js-stand-button-emphasised-primary:active {\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-emphasised-primary:disabled, .js-stand-button-emphasised-primary[data-disabled] {\n    \t\tcolor: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"emphasised-primary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-emphasised-primary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"emphasised-primary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-emphasised-primary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"emphasised-primary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"emphasised-primary\"].md.icon.gap};\n    \t}\n\n    \t/* example setup of button/link button style using md size and neutral secondary variant */\n    \t.js-stand-button-neutral-secondary {\n    \t\tcolor: ${componentButton[\"neutral-secondary\"].shared.color};\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared.backgroundColor};\n    \t\theight: ${componentButton[\"neutral-secondary\"].md.height};\n    \t\tpadding: ${componentButton[\"neutral-secondary\"].md.padding.top}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.right}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.bottom}\n    \t\t${componentButton[\"neutral-secondary\"].md.padding.left};\n    \t\tfont: ${componentButton[\"neutral-secondary\"].md.typography.font};\n    \t\tletter-spacing: ${componentButton[\"neutral-secondary\"].md.typography.letterSpacing};\n    \t\tfont-variation-settings: 'wdth'\n    \t\t${componentButton[\"neutral-secondary\"].md.typography.fontWidth};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared.border};\n    \t\tborder-radius: ${componentButton[\"neutral-secondary\"].shared.borderRadius};\n    \t}\n    \t.js-stand-button-neutral-secondary:hover {\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":hover\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary:active {\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":active\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":active\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary:disabled, .js-stand-button-neutral-secondary[data-disabled] {\n    \t\tcolor: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].color};\n    \t\tbackground: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].backgroundColor};\n    \t\tborder: ${componentButton[\"neutral-secondary\"].shared[\":disabled\"].border};\n    \t}\n    \t.js-stand-button-neutral-secondary > .material-symbols {\n    \t\tfont-size: ${componentButton[\"neutral-secondary\"].md.icon.size}\n    \t}\n    \t.js-stand-button-neutral-secondary:has(> .material-symbols) {\n    \t\tpadding-left: ${componentButton[\"neutral-secondary\"].md.padding.withIcon.iconLeft.left};\n    \t\tgap: ${componentButton[\"neutral-secondary\"].md.icon.gap};\n    \t}\n\n    `);\n\n    // update the document with the sheet\n    document.adoptedStyleSheets.push(sheet);\n\n    // modify the dom with the button components using the generated stylesheet\n    document.getElementById(\"app\").innerHTML = `<div class=\"container flow-column\">\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-emphasised-primary\">LinkButton</a>\n    \t\t<a class=\"js-stand-button js-stand-button-neutral-secondary\" data-disabled>Disabled LinkButton</a>\n    \t</div>\n    \t<div class=\"container\">\n    \t\t<a href=\"#\" class=\"js-stand-button js-stand-button-emphasised-primary\"><span class=\"material-symbols\">raven</span>LinkButton with Icon</a>\n    \t\t<a class=\"js-stand-button js-stand-button-neutral-secondary\" data-disabled><span class=\"material-symbols\">owl</span>Disabled LinkButton with Icon</a>\n    \t</div>\n    </div>`;\n\n";

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;