@guardian/stand 0.0.20 → 0.0.22

package/dist/components/menu/Menu.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
-var focus = require('@react-aria/focus');
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../util/mergeDeep.cjs');
@@ -83,15 +82,10 @@ function MenuItem({
 }) {
   const mergedTheme = mergeDeep.mergeDeep(styles.defaultMenuItemTheme, theme);
   const textValue = props.textValue ?? (typeof label === "string" ? label : void 0);
-  const { isFocusVisible, focusProps } = focus.useFocusRing();
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactAriaComponents.MenuItem,
     {
-      ...focusProps,
-      css: [
-        styles.menuItemStyles(mergedTheme, { description }, isFocusVisible),
-        cssOverrides
-      ],
+      css: [styles.menuItemStyles(mergedTheme, { description }), cssOverrides],
       ...props,
       textValue,
       children: ({ isSelected, selectionMode }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [

package/dist/components/menu/Menu.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
-import { useFocusRing } from '@react-aria/focus';
 import React from 'react';
 import { MenuTrigger, Menu as Menu$1, MenuItem as MenuItem$1, MenuSection as MenuSection$1, Header, Separator, Popover as Popover$1 } from 'react-aria-components';
 import { mergeDeep } from '../../util/mergeDeep.js';
@@ -36,14 +35,7 @@ function MenuSection({ name, size = "md", theme = {}, cssOverrides, children, ..
 function MenuItem({ label, description, aside, icon, size = "md", theme = {}, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultMenuItemTheme, theme);
   const textValue = props.textValue ?? (typeof label === "string" ? label : void 0);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  return jsx(
-    MenuItem$1,
-    { ...focusProps, css: [
-      menuItemStyles(mergedTheme, { description }, isFocusVisible),
-      cssOverrides
-    ], ...props, textValue, children: ({ isSelected, selectionMode }) => jsxs(Fragment, { children: [icon && selectionMode === "none" ? jsx(Icon, { size, cssOverrides: menuItemIconStyles(mergedTheme, { size }), children: icon }) : null, isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box_outline_blank", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_checked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_unchecked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, jsx("div", { css: menuItemLabelStyles(mergedTheme), children: label }), description && jsx("div", { css: menuItemDescriptionStyles(mergedTheme), children: description }), aside && jsx("div", { css: menuItemAsideStyles(mergedTheme), children: aside })] }) }
-  );
+  return jsx(MenuItem$1, { css: [menuItemStyles(mergedTheme, { description }), cssOverrides], ...props, textValue, children: ({ isSelected, selectionMode }) => jsxs(Fragment, { children: [icon && selectionMode === "none" ? jsx(Icon, { size, cssOverrides: menuItemIconStyles(mergedTheme, { size }), children: icon }) : null, isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "multiple" ? jsx(Icon, { size, symbol: "check_box_outline_blank", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_checked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, !isSelected && selectionMode === "single" ? jsx(Icon, { size, symbol: "radio_button_unchecked", cssOverrides: menuItemIconStyles(mergedTheme, { size }) }) : null, jsx("div", { css: menuItemLabelStyles(mergedTheme), children: label }), description && jsx("div", { css: menuItemDescriptionStyles(mergedTheme), children: description }), aside && jsx("div", { css: menuItemAsideStyles(mergedTheme), children: aside })] }) });
 }
 function Menu({ theme = {}, size = "md", popoverProps, menuTriggerProps, children, cssOverrides, ...props }) {
   const mergedTheme = mergeDeep(defaultMenuTheme, theme);

package/dist/components/menu/styles.cjs

@@ -24,7 +24,7 @@ const menuSectionHeaderStyles = (theme, { size }) => react.css`
 	${typography.convertTypographyToEmotionStringStyle(theme.header[size].typography)}
 `;
 const defaultMenuItemTheme = menu.componentMenu.menuItem;
-const menuItemStyles = (theme, { description }, isFocusVisible = false) => react.css`
+const menuItemStyles = (theme, { description }) => react.css`
 	display: ${theme.shared.display};
 	grid-template-columns: ${theme.shared["grid-template-columns"]};
 	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
@@ -37,17 +37,31 @@ const menuItemStyles = (theme, { description }, isFocusVisible = false) => react
 	&:last-child {
 		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
 	}
-	&[data-hovered],
-	&:hover {
-		background: ${theme.shared[":hover"]["background-color"]};
+
+	/* Hovering adds data-focused and the item stays focused after hovering away */
+	&[data-focused] {
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+	&[data-hovered] {
+		outline: ${theme.shared[":hover"].outline};
+	}
+
+	/* Override default browser focus behaviour */
+	:focus-visible {
+		outline: none;
+	}
+
+	/* focus visible used for keyboard focus */
+	&[data-focus-visible] {
+		outline: ${theme.shared[":focus-visible"]["outline"]};
+		outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+
+	/* Must be last to take precedence */
+	&[data-pressed] {
+		background-color: ${theme.shared[":pressed"]["background-color"]};
 	}
-	${isFocusVisible ? react.css`
-				outline: ${theme.shared[":focus-visible"]["outline"]};
-				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
-				background: ${theme.shared[":hover"]["background-color"]};
-			` : react.css`
-				outline: none;
-			`}
 `;
 const menuItemIconStyles = (theme, { size }) => react.css`
 	grid-area: ${theme.shared.icon["grid-area"]};

package/dist/components/menu/styles.js

@@ -22,7 +22,7 @@ const menuSectionHeaderStyles = (theme, { size }) => css`
 	${convertTypographyToEmotionStringStyle(theme.header[size].typography)}
 `;
 const defaultMenuItemTheme = componentMenu.menuItem;
-const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
+const menuItemStyles = (theme, { description }) => css`
 	display: ${theme.shared.display};
 	grid-template-columns: ${theme.shared["grid-template-columns"]};
 	grid-template-areas: ${description ? theme.shared["grid-template-areas-with-description"] : theme.shared["grid-template-areas"]};
@@ -35,17 +35,31 @@ const menuItemStyles = (theme, { description }, isFocusVisible = false) => css`
 	&:last-child {
 		border-bottom: ${theme.shared[":last-child"]["border-bottom"]};
 	}
-	&[data-hovered],
-	&:hover {
-		background: ${theme.shared[":hover"]["background-color"]};
+
+	/* Hovering adds data-focused and the item stays focused after hovering away */
+	&[data-focused] {
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+	&[data-hovered] {
+		outline: ${theme.shared[":hover"].outline};
+	}
+
+	/* Override default browser focus behaviour */
+	:focus-visible {
+		outline: none;
+	}
+
+	/* focus visible used for keyboard focus */
+	&[data-focus-visible] {
+		outline: ${theme.shared[":focus-visible"]["outline"]};
+		outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
+		background-color: ${theme.shared[":hover"]["background-color"]};
+	}
+
+	/* Must be last to take precedence */
+	&[data-pressed] {
+		background-color: ${theme.shared[":pressed"]["background-color"]};
 	}
-	${isFocusVisible ? css`
-				outline: ${theme.shared[":focus-visible"]["outline"]};
-				outline-offset: ${theme.shared[":focus-visible"]["outline-offset"]};
-				background: ${theme.shared[":hover"]["background-color"]};
-			` : css`
-				outline: none;
-			`}
 `;
 const menuItemIconStyles = (theme, { size }) => css`
 	grid-area: ${theme.shared.icon["grid-area"]};

package/dist/components/text-input/TextInput.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
+var mergeDeep = require('../../util/mergeDeep.cjs');
+var Form = require('../form/Form.cjs');
+var styles = require('./styles.cjs');
+
+function TextInput({
+  size = "md",
+  isInvalid = false,
+  theme = {},
+  ...props
+}) {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultTextInputTheme, theme);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Form.FormInputContainer,
+    {
+      as: reactAriaComponents.TextField,
+      size,
+      isInvalid,
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Input, { css: styles.textInputStyles(mergedTheme, { size, isInvalid }) })
+    }
+  );
+}
+
+exports.TextInput = TextInput;

package/dist/components/text-input/TextInput.js

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react/jsx-runtime';
+import { TextField, Input } from 'react-aria-components';
+import { mergeDeep } from '../../util/mergeDeep.js';
+import { FormInputContainer } from '../form/Form.js';
+import { textInputStyles, defaultTextInputTheme } from './styles.js';
+
+function TextInput({ size = "md", isInvalid = false, theme = {}, ...props }) {
+  const mergedTheme = mergeDeep(defaultTextInputTheme, theme);
+  return jsx(FormInputContainer, { as: TextField, size, isInvalid, ...props, children: jsx(Input, { css: textInputStyles(mergedTheme, { size, isInvalid }) }) });
+}
+
+export { TextInput };

package/dist/components/text-input/styles.cjs

@@ -0,0 +1,35 @@
+'use strict';
+
+var react = require('@emotion/react');
+var textInput = require('../../styleD/build/typescript/component/textInput.cjs');
+var typography = require('../../styleD/utils/semantic/typography.cjs');
+
+const defaultTextInputTheme = textInput.componentTextInput;
+const textInputStyles = (theme, { size, isInvalid }) => {
+  return react.css`
+		${typography.convertTypographyToEmotionStringStyle(theme[size].typography)}
+		background-color: ${theme.shared["background-color"]};
+		border-radius: ${theme.shared["border-radius"]};
+		border: ${theme.shared.border};
+		color: ${theme.shared.color};
+		cursor: ${theme.shared.cursor};
+		height: ${theme[size].height};
+		margin-top: ${theme.shared["margin-top"]};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		&[data-disabled] {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+		}
+
+		${isInvalid && react.css`
+			border: ${theme.shared.error.border};
+		`}
+	`;
+};
+
+exports.defaultTextInputTheme = defaultTextInputTheme;
+exports.textInputStyles = textInputStyles;

package/dist/components/text-input/styles.js

@@ -0,0 +1,32 @@
+import { css } from '@emotion/react';
+import { componentTextInput } from '../../styleD/build/typescript/component/textInput.js';
+import { convertTypographyToEmotionStringStyle } from '../../styleD/utils/semantic/typography.js';
+
+const defaultTextInputTheme = componentTextInput;
+const textInputStyles = (theme, { size, isInvalid }) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme[size].typography)}
+		background-color: ${theme.shared["background-color"]};
+		border-radius: ${theme.shared["border-radius"]};
+		border: ${theme.shared.border};
+		color: ${theme.shared.color};
+		cursor: ${theme.shared.cursor};
+		height: ${theme[size].height};
+		margin-top: ${theme.shared["margin-top"]};
+		padding: ${theme.shared.padding.top} ${theme.shared.padding.right}
+			${theme.shared.padding.bottom} ${theme.shared.padding.left};
+
+		&[data-disabled] {
+			background-color: ${theme.shared.disabled.backgroundColor};
+			border: ${theme.shared.disabled.border};
+			color: ${theme.shared.disabled.color};
+			cursor: ${theme.shared.disabled.cursor};
+		}
+
+		${isInvalid && css`
+			border: ${theme.shared.error.border};
+		`}
+	`;
+};
+
+export { defaultTextInputTheme, textInputStyles };

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

@@ -1,20 +1,21 @@
 'use strict';
 
 var jsxRuntime = require('@emotion/react/jsx-runtime');
+var reactAriaComponents = require('react-aria-components');
 var mergeDeep = require('../../../util/mergeDeep.cjs');
 var Favicon = require('../../favicon/Favicon.cjs');
 var Icon = require('../../icon/Icon.cjs');
 var TopBarItem = require('../topBarItem/TopBarItem.cjs');
 var styles = require('./styles.cjs');
 
-const TopBarToolName = ({
+function ToolName({
   name,
   favicon,
   subsection,
   subsectionIcon,
   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 }),
@@ -27,6 +28,24 @@ const TopBarToolName = ({
       ] })
     ] })
   ] }) });
+}
+const TopBarToolName = (props) => {
+  const mergedTheme = mergeDeep.mergeDeep(styles.defaultToolNameTheme, props.theme ?? {});
+  if (("href" in props || "onPress" in props) && "hoverText" in props) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      reactAriaComponents.Link,
+      {
+        css: styles.toolNameLinkStyles(mergedTheme),
+        href: props.href,
+        onPress: props.onPress,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { css: [styles.toolNameHoverLinkStyles(mergedTheme)], children: props.hoverText }),
+          /* @__PURE__ */ jsxRuntime.jsx(ToolName, { ...props })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ToolName, { ...props });
 };
 
 exports.TopBarToolName = TopBarToolName;

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

@@ -1,13 +1,21 @@
-import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+import { Link } from 'react-aria-components';
 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 { toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles, defaultToolNameTheme } from './styles.js';
+import { defaultToolNameTheme, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameTypography, dividerStyles, subsectionTypography, subsectionStyles, toolNameStyles } from './styles.js';
 
-const TopBarToolName = ({ name, favicon, subsection, subsectionIcon, theme = {}, cssOverrides }) => {
+function ToolName({ name, favicon, subsection, subsectionIcon, 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 })] })] })] }) });
+}
+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 })] });
+  }
+  return jsx(ToolName, { ...props });
 };
 
 export { TopBarToolName };

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

@@ -5,6 +5,43 @@ var TopBar = require('../../../styleD/build/typescript/component/TopBar.cjs');
 var typography = require('../../../styleD/utils/semantic/typography.cjs');
 
 const defaultToolNameTheme = TopBar.componentTopBar.ToolName;
+const toolNameHoverLinkStyles = (theme) => {
+  return react.css`
+		${typography.convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
+		background-color: ${theme.hoverLink.backgroundColor};
+		color: ${theme.hoverLink.color};
+		align-items: ${theme["align-items"]};
+		padding-left: ${theme.hoverLink.paddingLeft};
+		padding-right: ${theme.hoverLink.paddingRight};
+		display: ${theme.display};
+		opacity: ${theme.hoverLink.opacity};
+
+		position: ${theme.hoverLink.position};
+		width: ${theme.hoverLink.width};
+		height: ${theme.hoverLink.height};
+	`;
+};
+const toolNameLinkStyles = (theme) => {
+  return react.css`
+		text-decoration: ${theme.link.textDecoration};
+		color: ${theme.link.color};
+		position: ${theme.link.position};
+
+		/* Show the first element - the hover text */
+		&[data-hovered] :first-of-type {
+			opacity: ${theme.hoverLink.hover.opacity};
+		}
+
+		&[data-pressed] :first-of-type {
+			background-color: ${theme.hoverLink.pressed.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.hoverLink.focused.outline};
+			outline-offset: ${theme.hoverLink.focused["outline-offset"]};
+		}
+	`;
+};
 const toolNameStyles = (theme) => {
   return react.css`
 		display: ${theme.display};
@@ -40,5 +77,7 @@ exports.defaultToolNameTheme = defaultToolNameTheme;
 exports.dividerStyles = dividerStyles;
 exports.subsectionStyles = subsectionStyles;
 exports.subsectionTypography = subsectionTypography;
+exports.toolNameHoverLinkStyles = toolNameHoverLinkStyles;
+exports.toolNameLinkStyles = toolNameLinkStyles;
 exports.toolNameStyles = toolNameStyles;
 exports.toolNameTypography = toolNameTypography;

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

@@ -3,6 +3,43 @@ import { componentTopBar } from '../../../styleD/build/typescript/component/TopB
 import { convertTypographyToEmotionStringStyle } from '../../../styleD/utils/semantic/typography.js';
 
 const defaultToolNameTheme = componentTopBar.ToolName;
+const toolNameHoverLinkStyles = (theme) => {
+  return css`
+		${convertTypographyToEmotionStringStyle(theme.hoverLink.typography)}
+		background-color: ${theme.hoverLink.backgroundColor};
+		color: ${theme.hoverLink.color};
+		align-items: ${theme["align-items"]};
+		padding-left: ${theme.hoverLink.paddingLeft};
+		padding-right: ${theme.hoverLink.paddingRight};
+		display: ${theme.display};
+		opacity: ${theme.hoverLink.opacity};
+
+		position: ${theme.hoverLink.position};
+		width: ${theme.hoverLink.width};
+		height: ${theme.hoverLink.height};
+	`;
+};
+const toolNameLinkStyles = (theme) => {
+  return css`
+		text-decoration: ${theme.link.textDecoration};
+		color: ${theme.link.color};
+		position: ${theme.link.position};
+
+		/* Show the first element - the hover text */
+		&[data-hovered] :first-of-type {
+			opacity: ${theme.hoverLink.hover.opacity};
+		}
+
+		&[data-pressed] :first-of-type {
+			background-color: ${theme.hoverLink.pressed.backgroundColor};
+		}
+
+		&[data-focus-visible] {
+			outline: ${theme.hoverLink.focused.outline};
+			outline-offset: ${theme.hoverLink.focused["outline-offset"]};
+		}
+	`;
+};
 const toolNameStyles = (theme) => {
   return css`
 		display: ${theme.display};
@@ -34,4 +71,4 @@ const subsectionTypography = (theme) => {
 	`;
 };
 
-export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameStyles, toolNameTypography };
+export { defaultToolNameTheme, dividerStyles, subsectionStyles, subsectionTypography, toolNameHoverLinkStyles, toolNameLinkStyles, toolNameStyles, toolNameTypography };

package/dist/index.cjs

@@ -9,6 +9,7 @@ var button = require('./styleD/build/typescript/component/button.cjs');
 var typography$1 = require('./styleD/build/typescript/component/typography.cjs');
 var icon = require('./styleD/build/typescript/component/icon.cjs');
 var favicon = require('./styleD/build/typescript/component/favicon.cjs');
+var textInput = require('./styleD/build/typescript/component/textInput.cjs');
 var inlineMessage = require('./styleD/build/typescript/component/inlineMessage.cjs');
 var select = require('./styleD/build/typescript/component/select.cjs');
 var menu = require('./styleD/build/typescript/component/menu.cjs');
@@ -35,6 +36,7 @@ exports.componentButton = button.componentButton;
 exports.componentTypography = typography$1.componentTypography;
 exports.componentIcon = icon.componentIcon;
 exports.componentFavicon = favicon.componentFavicon;
+exports.componentTextInput = textInput.componentTextInput;
 exports.componentInlineMessage = inlineMessage.componentInlineMessage;
 exports.componentSelect = select.componentSelect;
 exports.componentMenu = menu.componentMenu;

package/dist/index.js

@@ -7,6 +7,7 @@ export { componentButton } from './styleD/build/typescript/component/button.js';
 export { componentTypography } from './styleD/build/typescript/component/typography.js';
 export { componentIcon } from './styleD/build/typescript/component/icon.js';
 export { componentFavicon } from './styleD/build/typescript/component/favicon.js';
+export { componentTextInput } from './styleD/build/typescript/component/textInput.js';
 export { componentInlineMessage } from './styleD/build/typescript/component/inlineMessage.js';
 export { componentSelect } from './styleD/build/typescript/component/select.js';
 export { componentMenu } from './styleD/build/typescript/component/menu.js';

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

@@ -71,4 +71,26 @@
 		'Open Sans';
 	--component-top-bar-tool-name-subsection-typography-letter-spacing: -0.0125rem;
 	--component-top-bar-tool-name-subsection-typography-font-width: 88;
+	--component-top-bar-tool-name-link-text-decoration: none;
+	--component-top-bar-tool-name-link-color: unset;
+	--component-top-bar-tool-name-link-position: relative;
+	--component-top-bar-tool-name-link-width: 100%;
+	--component-top-bar-tool-name-link-height: 100%;
+	--component-top-bar-tool-name-hover-link-color: #ffffff;
+	--component-top-bar-tool-name-hover-link-padding-left: 1.25rem;
+	--component-top-bar-tool-name-hover-link-padding-right: 1.25rem;
+	--component-top-bar-tool-name-hover-link-background-color: #092f62;
+	--component-top-bar-tool-name-hover-link-opacity: 0;
+	--component-top-bar-tool-name-hover-link-typography-font: normal 700
+		0.875rem/1.3 'Open Sans';
+	--component-top-bar-tool-name-hover-link-typography-letter-spacing: 0;
+	--component-top-bar-tool-name-hover-link-typography-font-width: 95;
+	--component-top-bar-tool-name-hover-link-position: absolute;
+	--component-top-bar-tool-name-hover-link-width: 100%;
+	--component-top-bar-tool-name-hover-link-height: 100%;
+	--component-top-bar-tool-name-hover-link-hover-opacity: 1;
+	--component-top-bar-tool-name-hover-link-pressed-background-color: #061d3c;
+	--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;
 }

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

@@ -63,9 +63,11 @@
 	--component-menu-menu-item-shared-aside-typography-font-width: 95;
 	--component-menu-menu-item-shared-last-child-border-bottom: none;
 	--component-menu-menu-item-shared-hover-background-color: #f6f6f6;
+	--component-menu-menu-item-shared-hover-outline: none; /** Override outline focus styles on hover */
 	--component-menu-menu-item-shared-focus-visible-outline: 0.125rem solid
 		#0072a9;
 	--component-menu-menu-item-shared-focus-visible-outline-offset: -0.125rem;
+	--component-menu-menu-item-shared-pressed-background-color: #ededed;
 	--component-menu-menu-item-sm-icon-size: 1.125rem;
 	--component-menu-menu-item-sm-icon-line-height: 1.3;
 	--component-menu-menu-item-md-icon-size: 1.25rem;

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

@@ -0,0 +1,29 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--component-text-input-shared-color: #000000;
+	--component-text-input-shared-cursor: text;
+	--component-text-input-shared-padding-top: 0;
+	--component-text-input-shared-padding-right: 0.75rem;
+	--component-text-input-shared-padding-bottom: 0;
+	--component-text-input-shared-padding-left: 0.75rem;
+	--component-text-input-shared-margin-top: 0.5rem; /** spacing between the input itself and the previous element (label or description) minus the flex gap (default 4px), e.g. if the spacing between label and input should be 12px, then margin-top should be 8px */
+	--component-text-input-shared-border-radius: 0.25rem;
+	--component-text-input-shared-border: 0.0625rem solid #545454;
+	--component-text-input-shared-background-color: #ffffff;
+	--component-text-input-shared-disabled-background-color: #ffffff;
+	--component-text-input-shared-disabled-cursor: not-allowed;
+	--component-text-input-shared-disabled-color: #999999;
+	--component-text-input-shared-disabled-border: 0.0625rem solid #dcdcdc;
+	--component-text-input-shared-error-border: 0.0625rem solid #b42a19;
+	--component-text-input-sm-height: 2rem;
+	--component-text-input-sm-typography-font: normal 460 0.875rem/1.3 'Open Sans';
+	--component-text-input-sm-typography-letter-spacing: 0;
+	--component-text-input-sm-typography-font-width: 95;
+	--component-text-input-md-height: 2.5rem;
+	--component-text-input-md-typography-font: normal 460 1rem/1.3 'Open Sans';
+	--component-text-input-md-typography-letter-spacing: 0;
+	--component-text-input-md-typography-font-width: 95;
+}