@guardian/stand 0.0.27 → 0.0.28

package/dist/components/topbar/topBarNavigation/TopBarNavigation.cjs

@@ -21,50 +21,66 @@ function TopBarNavigation({
   theme = {},
   cssOverrides,
   className,
+  _menuOpen,
   ...props
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultTopBarNavigationTheme, theme);
   const iconSize = size === "md" ? "lg" : "sm";
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarNavigationDividerStyles(mergedTheme, { alignment }), children: menuChildren ? /* @__PURE__ */ jsxRuntime.jsxs(Menu.Menu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Menu.MenuToggle, { children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Pressable, { isDisabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
-      {
-        role: "button",
-        "data-disabled": isDisabled ? true : void 0,
-        css: [
-          styles.topBarNavigationStyles(mergedTheme, isSelected),
-          styles.topBarNavigationTypographyStyles(mergedTheme, size),
-          cssOverrides
-        ],
-        className,
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.topBarNavigationTextStyles(mergedTheme), children: text }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarMenuIndicatorStyles(mergedTheme), children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: menuIndicator }) })
-        ]
-      }
-    ) }) }),
-    menuChildren
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
-    reactAriaComponents.Link,
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
     {
-      css: [
-        styles.topBarNavigationStyles(mergedTheme, isSelected),
-        styles.topBarNavigationTypographyStyles(mergedTheme, size),
-        cssOverrides
-      ],
-      href,
-      onPress,
-      className,
-      isDisabled,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.topBarNavigationTextStyles(mergedTheme), children: text })
-      ]
+      css: styles.topBarNavigationDividerStyles(mergedTheme, { alignment }, _menuOpen),
+      children: menuChildren ? /* @__PURE__ */ jsxRuntime.jsxs(
+        Menu.Menu,
+        {
+          popoverProps: {
+            placement: _menuOpen ? "end" : void 0
+          },
+          size: _menuOpen ? "sm" : void 0,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Menu.MenuToggle, { children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Pressable, { isDisabled, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                role: "button",
+                "data-disabled": isDisabled ? true : void 0,
+                css: [
+                  styles.topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
+                  styles.topBarNavigationTypographyStyles(mergedTheme, size),
+                  cssOverrides
+                ],
+                className,
+                ...props,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.topBarNavigationTextStyles(mergedTheme), children: text }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.topBarMenuIndicatorStyles(mergedTheme), children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: menuIndicator }) })
+                ]
+              }
+            ) }) }),
+            menuChildren
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsxs(
+        reactAriaComponents.Link,
+        {
+          css: [
+            styles.topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
+            styles.topBarNavigationTypographyStyles(mergedTheme, size),
+            cssOverrides
+          ],
+          href,
+          onPress,
+          className,
+          isDisabled,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: iconSize, children: icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { css: styles.topBarNavigationTextStyles(mergedTheme), children: text })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 
 exports.TopBarNavigation = TopBarNavigation;

package/dist/components/topbar/topBarNavigation/TopBarNavigation.js

@@ -6,15 +6,17 @@ import { Menu, MenuToggle } from '../../menu/Menu.js';
 import { topBarNavigationTextStyles, topBarMenuIndicatorStyles, topBarNavigationStyles, topBarNavigationTypographyStyles, topBarNavigationDividerStyles, defaultTopBarNavigationTheme } from './styles.js';
 
 const menuIndicator = "keyboard_arrow_down";
-function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChildren, href, onPress, isDisabled, alignment = "left", theme = {}, cssOverrides, className, ...props }) {
+function TopBarNavigation({ text, size = "md", isSelected = false, icon, menuChildren, href, onPress, isDisabled, alignment = "left", theme = {}, cssOverrides, className, _menuOpen, ...props }) {
   const mergedTheme = mergeDeep(defaultTopBarNavigationTheme, theme);
   const iconSize = size === "md" ? "lg" : "sm";
-  return jsx("div", { css: topBarNavigationDividerStyles(mergedTheme, { alignment }), children: menuChildren ? jsxs(Menu, { children: [jsx(MenuToggle, { children: jsx(Pressable, { isDisabled, children: jsxs("span", { role: "button", "data-disabled": isDisabled ? true : void 0, css: [
-    topBarNavigationStyles(mergedTheme, isSelected),
+  return jsx("div", { css: topBarNavigationDividerStyles(mergedTheme, { alignment }, _menuOpen), children: menuChildren ? jsxs(Menu, { popoverProps: {
+    placement: _menuOpen ? "end" : void 0
+  }, size: _menuOpen ? "sm" : void 0, children: [jsx(MenuToggle, { children: jsx(Pressable, { isDisabled, children: jsxs("span", { role: "button", "data-disabled": isDisabled ? true : void 0, css: [
+    topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
     topBarNavigationTypographyStyles(mergedTheme, size),
     cssOverrides
   ], className, ...props, children: [jsx(Icon, { size: iconSize, children: icon }), jsx("span", { css: topBarNavigationTextStyles(mergedTheme), children: text }), jsx("div", { css: topBarMenuIndicatorStyles(mergedTheme), children: jsx(Icon, { size: iconSize, children: menuIndicator }) })] }) }) }), menuChildren] }) : jsxs(Link, { css: [
-    topBarNavigationStyles(mergedTheme, isSelected),
+    topBarNavigationStyles(mergedTheme, isSelected, _menuOpen),
     topBarNavigationTypographyStyles(mergedTheme, size),
     cssOverrides
   ], href, onPress, className, isDisabled, ...props, children: [jsx(Icon, { size: iconSize, children: icon }), jsx("span", { css: topBarNavigationTextStyles(mergedTheme), children: text })] }) });

package/dist/components/topbar/topBarNavigation/styles.cjs

@@ -5,7 +5,7 @@ var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
 var typography = require('../../../styleD/utils/semantic/typography.cjs');
 
 const defaultTopBarNavigationTheme = TopBar.componentTopBar.Navigation;
-const topBarNavigationStyles = (theme, selected) => {
+const topBarNavigationStyles = (theme, selected, _menuOpen) => {
   return react.css`
 		display: ${theme.shared.display};
 		position: ${theme.shared.position};
@@ -14,19 +14,15 @@ const topBarNavigationStyles = (theme, selected) => {
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
 		color: ${selected ? `${theme.selected.color}` : `${theme.unselected.color}`};
-		border-top: ${theme.shared["border-top"]};
-		border-bottom: ${theme.unselected["border-bottom"]};
 
 		&[data-hovered],
 		&:hover {
-			border-bottom: ${theme.selected["border-bottom"]};
 			cursor: ${theme.shared.cursor};
 		}
 
 		&[data-focus-visible],
 		&:focus-visible {
 			outline: ${theme.shared[":focus-visible"].outline};
-			border-bottom: ${theme.selected["border-bottom"]};
 			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
 		}
 
@@ -35,13 +31,54 @@ const topBarNavigationStyles = (theme, selected) => {
 			color: ${theme.shared[":disabled"].color};
 		}
 
-		${selected && `border-bottom: ${theme.selected["border-bottom"]};`}
+		${_menuOpen ? react.css`
+					border-right: ${theme.shared["border-top"]};
+					border-left: ${theme.unselected["border-bottom"]};
+					width: 100%;
+
+					&[data-hovered],
+					&:hover {
+						border-left: ${theme.selected["border-bottom"]};
+					}
+
+					&[data-focus-visible],
+					&:focus-visible {
+						border-left: ${theme.selected["border-bottom"]};
+					}
+
+					${selected && `
+						border-left: ${theme.selected["border-bottom"]};
+						background-color: ${theme.shared._menuOpen.selected["background-color"]};
+					`}
+				` : react.css`
+					border-top: ${theme.shared["border-top"]};
+					border-bottom: ${theme.unselected["border-bottom"]};
+
+					&[data-hovered],
+					&:hover {
+						border-bottom: ${theme.selected["border-bottom"]};
+					}
+
+					&[data-focus-visible],
+					&:focus-visible {
+						border-bottom: ${theme.selected["border-bottom"]};
+					}
+
+					${selected && `
+						border-bottom: ${theme.selected["border-bottom"]};
+					`}
+				`}
 
 		text-decoration: ${theme.shared["text-decoration"]};
 	`;
 };
-const topBarNavigationDividerStyles = (theme, { alignment }) => react.css`
-	${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => react.css`
+	${_menuOpen ? react.css`
+				height: ${theme.shared._menuOpen.height};
+				border-bottom: ${theme.shared.divider};
+			` : react.css`
+				${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+			`}
 `;
 const topBarNavigationTextStyles = (theme) => react.css`
 	margin-left: ${theme.text.margin.left};

package/dist/components/topbar/topBarNavigation/styles.js

@@ -3,7 +3,7 @@ import { componentTopBar } from '../../../styleD/build/typescript/component/TopB
 import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
 
 const defaultTopBarNavigationTheme = componentTopBar.Navigation;
-const topBarNavigationStyles = (theme, selected) => {
+const topBarNavigationStyles = (theme, selected, _menuOpen) => {
   return css`
 		display: ${theme.shared.display};
 		position: ${theme.shared.position};
@@ -12,19 +12,15 @@ const topBarNavigationStyles = (theme, selected) => {
 		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
 			${theme.shared.padding.bottom} ${theme.shared.padding.left};
 		color: ${selected ? `${theme.selected.color}` : `${theme.unselected.color}`};
-		border-top: ${theme.shared["border-top"]};
-		border-bottom: ${theme.unselected["border-bottom"]};
 
 		&[data-hovered],
 		&:hover {
-			border-bottom: ${theme.selected["border-bottom"]};
 			cursor: ${theme.shared.cursor};
 		}
 
 		&[data-focus-visible],
 		&:focus-visible {
 			outline: ${theme.shared[":focus-visible"].outline};
-			border-bottom: ${theme.selected["border-bottom"]};
 			outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
 		}
 
@@ -33,13 +29,54 @@ const topBarNavigationStyles = (theme, selected) => {
 			color: ${theme.shared[":disabled"].color};
 		}
 
-		${selected && `border-bottom: ${theme.selected["border-bottom"]};`}
+		${_menuOpen ? css`
+					border-right: ${theme.shared["border-top"]};
+					border-left: ${theme.unselected["border-bottom"]};
+					width: 100%;
+
+					&[data-hovered],
+					&:hover {
+						border-left: ${theme.selected["border-bottom"]};
+					}
+
+					&[data-focus-visible],
+					&:focus-visible {
+						border-left: ${theme.selected["border-bottom"]};
+					}
+
+					${selected && `
+						border-left: ${theme.selected["border-bottom"]};
+						background-color: ${theme.shared._menuOpen.selected["background-color"]};
+					`}
+				` : css`
+					border-top: ${theme.shared["border-top"]};
+					border-bottom: ${theme.unselected["border-bottom"]};
+
+					&[data-hovered],
+					&:hover {
+						border-bottom: ${theme.selected["border-bottom"]};
+					}
+
+					&[data-focus-visible],
+					&:focus-visible {
+						border-bottom: ${theme.selected["border-bottom"]};
+					}
+
+					${selected && `
+						border-bottom: ${theme.selected["border-bottom"]};
+					`}
+				`}
 
 		text-decoration: ${theme.shared["text-decoration"]};
 	`;
 };
-const topBarNavigationDividerStyles = (theme, { alignment }) => css`
-	${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+const topBarNavigationDividerStyles = (theme, { alignment }, _menuOpen) => css`
+	${_menuOpen ? css`
+				height: ${theme.shared._menuOpen.height};
+				border-bottom: ${theme.shared.divider};
+			` : css`
+				${alignment === "left" ? "border-right" : "border-left"}: ${theme.shared.divider};
+			`}
 `;
 const topBarNavigationTextStyles = (theme) => css`
 	margin-left: ${theme.text.margin.left};

package/dist/components/topbar/topBarToolName/TopBarToolName.cjs

@@ -13,25 +13,30 @@ function ToolName({
   favicon,
   subsection,
   subsectionIcon,
+  collapseBelow = "lg",
   theme = {},
   cssOverrides
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
   return /* @__PURE__ */ jsxRuntime.jsx(TopBarItem.TopBarItem, { alignment: "left", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { css: [styles.toolNameStyles(mergedTheme), cssOverrides], children: [
     /* @__PURE__ */ jsxRuntime.jsx(Favicon.Favicon, { ...favicon }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameTypography(mergedTheme)], children: name }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameTypography(mergedTheme, { collapseBelow })], children: name }),
     subsection && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.dividerStyles(mergedTheme), children: "\xA0" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.subsectionStyles(mergedTheme), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.dividerStyles(mergedTheme, { collapseBelow }), children: "\xA0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { css: styles.subsectionStyles(mergedTheme, { collapseBelow }), children: [
         subsectionIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { size: "sm", children: subsectionIcon }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { css: styles.subsectionTypography(mergedTheme), children: subsection })
       ] })
     ] })
   ] }) });
 }
-const TopBarToolName = (props) => {
-  const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, props.theme ?? {});
-  if (("href" in props || "onPress" in props) && "hoverText" in props) {
+const TopBarToolName = ({
+  collapseBelow = "lg",
+  theme = {},
+  ...props
+}) => {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, theme);
+  if (("href" in props || "onPress" in props) && ("hoverText" in props || "collapsedHoverText" in props)) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       reactAriaComponents.Link,
       {
@@ -39,13 +44,49 @@ const TopBarToolName = (props) => {
         href: props.href,
         onPress: props.onPress,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameHoverLinkStyles(mergedTheme)], children: props.hoverText }),
-          /* @__PURE__ */ jsxRuntime.jsx(ToolName, { ...props })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              css: [
+                styles.toolNameHoverLinkStyles(mergedTheme, {
+                  collapseBelow
+                })
+              ],
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    css: styles.toolNameHoverLinkTextExpandedStyles({
+                      collapseBelow
+                    }),
+                    children: props.hoverText ?? props.collapsedHoverText
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    css: styles.toolNameHoverLinkTextCollapsedStyles({
+                      collapseBelow
+                    }),
+                    children: props.collapsedHoverText ?? props.hoverText
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ToolName,
+            {
+              theme: mergedTheme,
+              collapseBelow,
+              ...props
+            }
+          )
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(ToolName, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(ToolName, { theme: mergedTheme, collapseBelow, ...props });
 };
 
 exports.TopBarToolName = TopBarToolName;

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

@@ -4,18 +4,26 @@ import { mergeDeep } from '../../../util/mergeDeep.js';
 import { Favicon } from '../../favicon/Favicon.js';
 import { Icon } from '../../icon/Icon.js';
 import { TopBarItem } from '../topBarItem/TopBarItem.js';
-import { defaultToolNameTheme, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
+import { toolNameHoverLinkTextExpandedStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkStyles, toolNameLinkStyles, defaultToolNameTheme, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
 
-function ToolName({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) {
+function ToolName({ name, favicon, subsection, subsectionIcon, collapseBelow = "lg", theme = {}, cssOverrides }) {
   const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
-  return jsx(TopBarItem, { alignment: "left", size: "sm", children: jsxs("div", { css: [toolNameStyles(mergedTheme), cssOverrides], children: [jsx(Favicon, { ...favicon }), jsx("div", { css: [toolNameTypography(mergedTheme)], children: name }), subsection && jsxs(Fragment, { children: [jsx("div", { css: dividerStyles(mergedTheme), children: "\xA0" }), jsxs("div", { css: subsectionStyles(mergedTheme), children: [subsectionIcon && jsx(Icon, { size: "sm", children: subsectionIcon }), jsx("div", { css: subsectionTypography(mergedTheme), children: subsection })] })] })] }) });
+  return jsx(TopBarItem, { alignment: "left", size: "sm", children: jsxs("div", { css: [toolNameStyles(mergedTheme), cssOverrides], children: [jsx(Favicon, { ...favicon }), jsx("div", { css: [toolNameTypography(mergedTheme, { collapseBelow })], children: name }), subsection && jsxs(Fragment, { children: [jsx("div", { css: dividerStyles(mergedTheme, { collapseBelow }), children: "\xA0" }), jsxs("div", { css: subsectionStyles(mergedTheme, { collapseBelow }), children: [subsectionIcon && jsx(Icon, { size: "sm", children: subsectionIcon }), jsx("div", { css: subsectionTypography(mergedTheme), children: subsection })] })] })] }) });
 }
-const TopBarToolName = (props) => {
-  const mergedTheme = mergeDeep(defaultToolNameTheme, props.theme ?? {});
-  if (("href" in props || "onPress" in props) && "hoverText" in props) {
-    return jsxs(Link, { css: toolNameLinkStyles(mergedTheme), href: props.href, onPress: props.onPress, children: [jsx("div", { css: [toolNameHoverLinkStyles(mergedTheme)], children: props.hoverText }), jsx(ToolName, { ...props })] });
+const TopBarToolName = ({ collapseBelow = "lg", theme = {}, ...props }) => {
+  const mergedTheme = mergeDeep(defaultToolNameTheme, theme);
+  if (("href" in props || "onPress" in props) && ("hoverText" in props || "collapsedHoverText" in props)) {
+    return jsxs(Link, { css: toolNameLinkStyles(mergedTheme), href: props.href, onPress: props.onPress, children: [jsxs("div", { css: [
+      toolNameHoverLinkStyles(mergedTheme, {
+        collapseBelow
+      })
+    ], children: [jsx("span", { css: toolNameHoverLinkTextExpandedStyles({
+      collapseBelow
+    }), children: props.hoverText ?? props.collapsedHoverText }), jsx("span", { css: toolNameHoverLinkTextCollapsedStyles({
+      collapseBelow
+    }), children: props.collapsedHoverText ?? props.hoverText })] }), jsx(ToolName, { theme: mergedTheme, collapseBelow, ...props })] });
   }
-  return jsx(ToolName, { ...props });
+  return jsx(ToolName, { theme: mergedTheme, collapseBelow, ...props });
 };
 
 export { TopBarToolName };

package/dist/components/topbar/topBarToolName/styles.cjs

@@ -2,10 +2,11 @@
 
 var react = require('@emotion/react');
 var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
+var mq = require('../../../styleD/utils/semantic/mq.cjs');
 var typography = require('../../../styleD/utils/semantic/typography.cjs');
 
 const defaultToolNameTheme = TopBar.componentTopBar.ToolName;
-const toolNameHoverLinkStyles = (theme) => {
+const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
   return react.css`
 		${typography.convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
 		background-color: ${theme.hoverLink.backgroundColor};
@@ -19,6 +20,32 @@ const toolNameHoverLinkStyles = (theme) => {
 		position: ${theme.hoverLink.position};
 		width: ${theme.hoverLink.width};
 		height: ${theme.hoverLink.height};
+
+		${mq.until[collapseBelow]} {
+			padding-left: ${theme.hoverLink.collapsed.paddingLeft};
+			padding-right: ${theme.hoverLink.collapsed.paddingRight};
+			justify-content: ${theme.hoverLink.collapsed["justify-content"]};
+		}
+	`;
+};
+const toolNameHoverLinkTextExpandedStyles = ({
+  collapseBelow
+}) => {
+  return react.css`
+		${mq.until[collapseBelow]} {
+			display: none;
+		}
+	`;
+};
+const toolNameHoverLinkTextCollapsedStyles = ({
+  collapseBelow
+}) => {
+  return react.css`
+		display: none;
+
+		${mq.until[collapseBelow]} {
+			display: block;
+		}
 	`;
 };
 const toolNameLinkStyles = (theme) => {
@@ -50,22 +77,31 @@ const toolNameStyles = (theme) => {
 		color: ${theme.color};
 	`;
 };
-const toolNameTypography = (theme) => {
+const toolNameTypography = (theme, { collapseBelow }) => {
   return react.css`
 		${typography.convertTypographyToEmotionStringStyle(theme.typography)}
+		${mq.until[collapseBelow]} {
+			display: none;
+		}
 	`;
 };
-const dividerStyles = (theme) => {
+const dividerStyles = (theme, { collapseBelow }) => {
   return react.css`
 		border-right: ${theme.divider.border};
 		height: ${theme.divider.height};
+		${mq.until[collapseBelow]} {
+			display: none;
+		}
 	`;
 };
-const subsectionStyles = (theme) => {
+const subsectionStyles = (theme, { collapseBelow }) => {
   return react.css`
 		display: ${theme.display};
 		align-items: ${theme["align-items"]};
 		gap: ${theme.subsection.gap};
+		${mq.until[collapseBelow]} {
+			display: none;
+		}
 	`;
 };
 const subsectionTypography = (theme) => {
@@ -79,6 +115,8 @@ exports.dividerStyles = dividerStyles;
 exports.subsectionStyles = subsectionStyles;
 exports.subsectionTypography = subsectionTypography;
 exports.toolNameHoverLinkStyles = toolNameHoverLinkStyles;
+exports.toolNameHoverLinkTextCollapsedStyles = toolNameHoverLinkTextCollapsedStyles;
+exports.toolNameHoverLinkTextExpandedStyles = toolNameHoverLinkTextExpandedStyles;
 exports.toolNameLinkStyles = toolNameLinkStyles;
 exports.toolNameStyles = toolNameStyles;
 exports.toolNameTypography = toolNameTypography;

package/dist/components/topbar/topBarToolName/styles.js

@@ -1,9 +1,10 @@
 import { css } from '@emotion/react';
 import { componentTopBar } from '../../../styleD/build/typescript/component/TopBar.js';
+import { until } from '../../../styleD/utils/semantic/mq.js';
 import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
 
 const defaultToolNameTheme = componentTopBar.ToolName;
-const toolNameHoverLinkStyles = (theme) => {
+const toolNameHoverLinkStyles = (theme, { collapseBelow }) => {
   return css`
 		${convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
 		background-color: ${theme.hoverLink.backgroundColor};
@@ -17,6 +18,28 @@ const toolNameHoverLinkStyles = (theme) => {
 		position: ${theme.hoverLink.position};
 		width: ${theme.hoverLink.width};
 		height: ${theme.hoverLink.height};
+
+		${until[collapseBelow]} {
+			padding-left: ${theme.hoverLink.collapsed.paddingLeft};
+			padding-right: ${theme.hoverLink.collapsed.paddingRight};
+			justify-content: ${theme.hoverLink.collapsed["justify-content"]};
+		}
+	`;
+};
+const toolNameHoverLinkTextExpandedStyles = ({ collapseBelow }) => {
+  return css`
+		${until[collapseBelow]} {
+			display: none;
+		}
+	`;
+};
+const toolNameHoverLinkTextCollapsedStyles = ({ collapseBelow }) => {
+  return css`
+		display: none;
+
+		${until[collapseBelow]} {
+			display: block;
+		}
 	`;
 };
 const toolNameLinkStyles = (theme) => {
@@ -48,22 +71,31 @@ const toolNameStyles = (theme) => {
 		color: ${theme.color};
 	`;
 };
-const toolNameTypography = (theme) => {
+const toolNameTypography = (theme, { collapseBelow }) => {
   return css`
 		${convertTypographyToEmotionStringStyle(theme.typography)}
+		${until[collapseBelow]} {
+			display: none;
+		}
 	`;
 };
-const dividerStyles = (theme) => {
+const dividerStyles = (theme, { collapseBelow }) => {
   return css`
 		border-right: ${theme.divider.border};
 		height: ${theme.divider.height};
+		${until[collapseBelow]} {
+			display: none;
+		}
 	`;
 };
-const subsectionStyles = (theme) => {
+const subsectionStyles = (theme, { collapseBelow }) => {
   return css`
 		display: ${theme.display};
 		align-items: ${theme["align-items"]};
 		gap: ${theme.subsection.gap};
+		${until[collapseBelow]} {
+			display: none;
+		}
 	`;
 };
 const subsectionTypography = (theme) => {
@@ -72,4 +104,4 @@ const subsectionTypography = (theme) => {
 	`;
 };
 
-export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameStyles, toolNameTypography };
+export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameHoverLinkStyles, toolNameHoverLinkTextCollapsedStyles, toolNameHoverLinkTextExpandedStyles, toolNameLinkStyles, toolNameStyles, toolNameTypography };

package/dist/index.cjs

@@ -28,6 +28,7 @@ var colors$1 = require('./styleD/build/typescript/semantic/colors.cjs');
 var typography$2 = require('./styleD/build/typescript/semantic/typography.cjs');
 var sizing$1 = require('./styleD/build/typescript/semantic/sizing.cjs');
 var shadow = require('./styleD/build/typescript/semantic/shadow.cjs');
+var breakpoints = require('./styleD/build/typescript/semantic/breakpoints.cjs');
 
 
 
@@ -59,3 +60,4 @@ exports.semanticColors = colors$1.semanticColors;
 exports.semanticTypography = typography$2.semanticTypography;
 exports.semanticSizing = sizing$1.semanticSizing;
 exports.semanticShadow = shadow.semanticShadow;
+exports.semanticBreakpoints = breakpoints.semanticBreakpoints;

package/dist/index.js

@@ -26,3 +26,4 @@ export { semanticColors } from './styleD/build/typescript/semantic/colors.js';
 export { semanticTypography } from './styleD/build/typescript/semantic/typography.js';
 export { semanticSizing } from './styleD/build/typescript/semantic/sizing.js';
 export { semanticShadow } from './styleD/build/typescript/semantic/shadow.js';
+export { semanticBreakpoints } from './styleD/build/typescript/semantic/breakpoints.js';

package/dist/styleD/build/css/component/TopBar.css

@@ -6,8 +6,20 @@
 	--component-top-bar-background-color: #f6f6f6;
 	--component-top-bar-display: flex;
 	--component-top-bar-height: 4rem;
-	--component-top-bar-justify-content: space-between;
+	--component-top-bar-justify-content: flex-start;
 	--component-top-bar-border: 0.0625rem solid #cccccc;
+	--component-top-bar-spacer-margin-left: auto;
+	--component-top-bar-collapsed-nav-menu-button-margin: 0;
+	--component-top-bar-collapsed-nav-menu-button-padding: 0;
+	--component-top-bar-collapsed-nav-menu-button-background: none;
+	--component-top-bar-collapsed-nav-menu-button-border: none;
+	--component-top-bar-collapsed-nav-menu-button-cursor: pointer;
+	--component-top-bar-collapsed-nav-menu-button-hovered-background-color: #ededed;
+	--component-top-bar-collapsed-nav-menu-button-active-background-color: #ededed;
+	--component-top-bar-collapsed-nav-menu-popover-left: auto !important;
+	--component-top-bar-collapsed-nav-menu-popover-top: auto !important;
+	--component-top-bar-collapsed-nav-menu-popover-background-color: #f6f6f6;
+	--component-top-bar-collapsed-nav-menu-popover-border: 0.0625rem solid #cccccc;
 	--component-top-bar-item-display: flex;
 	--component-top-bar-item-align-items: center;
 	--component-top-bar-item-height: 100%;
@@ -41,6 +53,9 @@
 	--component-top-bar-navigation-shared-focus-visible-outline-offset: -0.0625rem;
 	--component-top-bar-navigation-shared-border-top: 0.5rem solid transparent;
 	--component-top-bar-navigation-shared-divider: 0.0625rem solid #cccccc;
+	--component-top-bar-navigation-shared-menu-open-width: 100%;
+	--component-top-bar-navigation-shared-menu-open-height: 64px;
+	--component-top-bar-navigation-shared-menu-open-selected-background-color: #ededed;
 	--component-top-bar-navigation-text-margin-left: 0.375rem;
 	--component-top-bar-navigation-menu-indicator-margin-top: 0.375rem;
 	--component-top-bar-navigation-menu-indicator-margin-left: 0.125rem;
@@ -94,4 +109,7 @@
 	--component-top-bar-tool-name-hover-link-focused-outline: 0.125rem solid
 		#0072a9;
 	--component-top-bar-tool-name-hover-link-focused-outline-offset: -0.125rem;
+	--component-top-bar-tool-name-hover-link-collapsed-padding-left: 0.25rem;
+	--component-top-bar-tool-name-hover-link-collapsed-padding-right: 0.25rem;
+	--component-top-bar-tool-name-hover-link-collapsed-justify-content: center;
 }