@jobber/components 7.10.0 → 7.10.1-TAYLORmen-7785412.2

package/dist/Card/index.cjs

@@ -21,10 +21,12 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 
 

package/dist/Card/index.mjs

@@ -19,8 +19,10 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';

package/dist/DataDump/index.cjs

@@ -22,10 +22,12 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 require('../Content-cjs.js');
 require('../Emphasis-cjs.js');

package/dist/DataDump/index.mjs

@@ -20,10 +20,12 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';
 import '../Content-es.js';
 import '../Emphasis-es.js';

package/dist/Menu/index.cjs

@@ -19,10 +19,12 @@ require('../Typography-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
+require('../Text-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 
 

package/dist/Menu/index.mjs

@@ -17,8 +17,10 @@ import '../Typography-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
+import '../Text-es.js';
 import '../MenuSubmenuTrigger-es.js';

package/dist/Menu-cjs.js

@@ -13,8 +13,9 @@ var maxHeight = require('./maxHeight-cjs.js');
 var floatingUi_reactDom = require('./floating-ui.react-dom-cjs.js');
 var tslib_es6 = require('./tslib.es6-cjs.js');
 var useRenderElement = require('./useRenderElement-cjs.js');
-var BottomSheet = require('./BottomSheet-cjs.js');
 var OverlaySeparator = require('./OverlaySeparator-cjs.js');
+var BottomSheet = require('./BottomSheet-cjs.js');
+require('./HelperText-cjs.js');
 var MenuSubmenuTrigger$1 = require('./MenuSubmenuTrigger-cjs.js');
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
@@ -367,6 +368,17 @@ function getTextContent(node) {
     }
     return getTextContent(node.props.children);
 }
+function getBottomSheetContentStyle(style) {
+    if (!style) {
+        return undefined;
+    }
+    const safeStyle = Object.assign({}, style);
+    delete safeStyle.height;
+    delete safeStyle.maxHeight;
+    delete safeStyle.minHeight;
+    delete safeStyle.width;
+    return safeStyle;
+}
 // Bottom sheet menu interaction helpers. These adapt Drawer semantics into the
 // menu-style keyboard and focus behavior we want for the mobile shell.
 function getNavigableMenuItems(target) {
@@ -514,11 +526,12 @@ function BottomSheetContent({ children, style, className, UNSAFE_style, UNSAFE_c
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames({
             [styles.menuHidden]: submenuOpen,
         }) },
         React.createElement(BottomSheet.BottomSheet.Content, null,
-            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: bottomSheetStyle }, children))));
 }
 function BottomSheetSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -666,8 +679,9 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React.createElement(BottomSheet.BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames(styles.menu, styles.bottomSheetSubmenuPopup) },
-        React.createElement(BottomSheet.BottomSheet.Content, { style: resolvedBaseProps.style },
+        React.createElement(BottomSheet.BottomSheet.Content, { style: bottomSheetStyle },
             title ? (React.createElement(MenuSubmenuTrigger$1.DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React.createElement("div", { className: styles$1.submenuHeader },
                 React.createElement(MenuSubmenuTrigger$1.DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React.createElement(Button.Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
@@ -721,6 +735,9 @@ function getFloatingLayerStyle(style) {
         return undefined;
     return { zIndex: style.zIndex };
 }
+function getMenuPopupStyle(style) {
+    return Object.assign({ maxHeight: `min(${MENU_MAX_HEIGHT_PERCENTAGE}vh, max(0px, calc(var(--available-height) - var(--space-base))))` }, style);
+}
 function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
     const actionsRef = React.useRef(null);
     return (React.createElement(MenuDropdownContext.Provider, { value: {
@@ -754,9 +771,10 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     });
     const [side = "bottom", align = "start"] = (_a = preferredPlacement === null || preferredPlacement === void 0 ? void 0 : preferredPlacement.split(" ")) !== null && _a !== void 0 ? _a : [];
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
-            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -847,9 +865,10 @@ function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style,
         UNSAFE_style,
     });
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React.createElement(MenuSubmenuTrigger$1.MenuPortal, null,
         React.createElement(MenuSubmenuTrigger$1.MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: "start", side: "right", sideOffset: MENU_OFFSET },
-            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React.createElement(MenuSubmenuTrigger$1.MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);

package/dist/Menu-es.js

@@ -11,8 +11,9 @@ import { c as calculateMaxHeight } from './maxHeight-es.js';
 import { o as offset, f as flip, d as size, b as autoUpdate } from './floating-ui.react-dom-es.js';
 import { _ as __rest } from './tslib.es6-es.js';
 import { m as mergeProps } from './useRenderElement-es.js';
-import { B as BottomSheet } from './BottomSheet-es.js';
 import { O as OverlaySeparator } from './OverlaySeparator-es.js';
+import { B as BottomSheet } from './BottomSheet-es.js';
+import './HelperText-es.js';
 import { D as DrawerTrigger, a as DrawerTitle, b as DrawerClose, M as MenuTrigger$1, c as MenuLinkItem, d as MenuItem$1, e as MenuRadioItem$1, f as MenuRadioItemIndicator, g as MenuSubmenuTrigger$1, h as MenuRoot$1, i as MenuPortal$1, j as MenuPositioner, k as MenuPopup, l as MenuRadioGroup$1, m as MenuGroup$1, n as MenuSubmenuRoot, o as MenuGroupLabel$1 } from './MenuSubmenuTrigger-es.js';
 
 var styles$2 = {"wrapper":"h-nk89U2n6Q-","floatingContainer":"krpkWzoaVcc-","menu":"_7sU7mp1w0jM-","legacySection":"_4x-vvEmn4gM-","separator":"i0QNcs4S-wk-","triggerWrapper":"_7CsejipGrzM-","ariaMenu":"bO7lGVQC42c-","ariaItem":"u6fDgbWmPck-","ariaSection":"-TSNrZBKZJI-","ariaSectionHeader":"zs7dS2pKjEw-","sectionHeader":"MZJgunQcmdQ-","legacyAction":"_-1GOlrzd098-","action":"NYXV5w4pd0c-","destructive":"baYK2zQ6-GA-","overlay":"A7T14ALVEKg-","fullWidth":"Lgbn9IRPI5Y-","screenReaderOnly":"o-ps580KdWI-","spinning":"f1oTdSTeUOM-"};
@@ -365,6 +366,17 @@ function getTextContent(node) {
     }
     return getTextContent(node.props.children);
 }
+function getBottomSheetContentStyle(style) {
+    if (!style) {
+        return undefined;
+    }
+    const safeStyle = Object.assign({}, style);
+    delete safeStyle.height;
+    delete safeStyle.maxHeight;
+    delete safeStyle.minHeight;
+    delete safeStyle.width;
+    return safeStyle;
+}
 // Bottom sheet menu interaction helpers. These adapt Drawer semantics into the
 // menu-style keyboard and focus behavior we want for the mobile shell.
 function getNavigableMenuItems(target) {
@@ -512,11 +524,12 @@ function BottomSheetContent({ children, style, className, UNSAFE_style, UNSAFE_c
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React__default.createElement(BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames({
             [styles.menuHidden]: submenuOpen,
         }) },
         React__default.createElement(BottomSheet.Content, null,
-            React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(BottomSheetMenuSurface, { menuRef: menuRef, className: classnames(styles.bottomSheetMenuContent, resolvedBaseProps.className), style: bottomSheetStyle }, children))));
 }
 function BottomSheetSeparator({ style, className, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -664,8 +677,9 @@ function BottomSheetSubmenuContent({ children, className, style, UNSAFE_style, U
         UNSAFE_className,
         UNSAFE_style,
     });
+    const bottomSheetStyle = getBottomSheetContentStyle(resolvedBaseProps.style);
     return (React__default.createElement(BottomSheet.Popup, { initialFocus: getInitialBottomSheetFocus(menuRef, focusModalityRef), className: classnames(styles.menu, styles.bottomSheetSubmenuPopup) },
-        React__default.createElement(BottomSheet.Content, { style: resolvedBaseProps.style },
+        React__default.createElement(BottomSheet.Content, { style: bottomSheetStyle },
             title ? (React__default.createElement(DrawerTitle, { className: styles.screenReaderOnly }, title)) : null,
             React__default.createElement("div", { className: styles$1.submenuHeader },
                 React__default.createElement(DrawerClose, { "aria-label": title ? `Back to ${title}` : "Back", render: React__default.createElement(Button, { ariaLabel: title ? `Back to ${title}` : "Back", icon: "arrowLeft", type: "tertiary", variation: "subtle" }) }),
@@ -719,6 +733,9 @@ function getFloatingLayerStyle(style) {
         return undefined;
     return { zIndex: style.zIndex };
 }
+function getMenuPopupStyle(style) {
+    return Object.assign({ maxHeight: `min(${MENU_MAX_HEIGHT_PERCENTAGE}vh, max(0px, calc(var(--available-height) - var(--space-base))))` }, style);
+}
 function MenuDropdownRoot({ children, onOpenChange, open, defaultOpen, }) {
     const actionsRef = React__default.useRef(null);
     return (React__default.createElement(MenuDropdownContext.Provider, { value: {
@@ -752,9 +769,10 @@ function MenuDropdownContent({ children, style, className, preferredPlacement, U
     });
     const [side = "bottom", align = "start"] = (_a = preferredPlacement === null || preferredPlacement === void 0 ? void 0 : preferredPlacement.split(" ")) !== null && _a !== void 0 ? _a : [];
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: align, side: side, sideOffset: MENU_OFFSET },
-            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownRadioGroup({ children, value, defaultValue, onValueChange, className, style, UNSAFE_style, UNSAFE_className, }) {
     const resolvedBaseProps = resolveComposableBaseProps({
@@ -845,9 +863,10 @@ function MenuDropdownSubmenuContent({ children, className, style, UNSAFE_style,
         UNSAFE_style,
     });
     const floatingLayerStyle = getFloatingLayerStyle(resolvedBaseProps.style);
+    const popupStyle = getMenuPopupStyle(resolvedBaseProps.style);
     return (React__default.createElement(MenuPortal$1, null,
         React__default.createElement(MenuPositioner, { className: styles.floatingContainer, style: floatingLayerStyle, align: "start", side: "right", sideOffset: MENU_OFFSET },
-            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: resolvedBaseProps.style }, children))));
+            React__default.createElement(MenuPopup, { className: classnames(styles.menu, styles.ariaMenu, resolvedBaseProps.className), style: popupStyle }, children))));
 }
 function MenuDropdownGroupLabel(props) {
     const { className, style } = resolveComposableBaseProps(props);

package/dist/Page/index.cjs

@@ -26,10 +26,11 @@ require('../floating-ui.react-dom-cjs.js');
 require('../useFormFieldFocus-cjs.js');
 require('../maxHeight-cjs.js');
 require('../useRenderElement-cjs.js');
-require('../BottomSheet-cjs.js');
-require('../DrawerRoot-cjs.js');
 require('../OverlaySeparator-cjs.js');
 require('../Separator-cjs.js');
+require('../BottomSheet-cjs.js');
+require('../DrawerRoot-cjs.js');
+require('../HelperText-cjs.js');
 require('../MenuSubmenuTrigger-cjs.js');
 require('../filterDataAttributes-cjs.js');
 

package/dist/Page/index.mjs

@@ -24,9 +24,10 @@ import '../floating-ui.react-dom-es.js';
 import '../useFormFieldFocus-es.js';
 import '../maxHeight-es.js';
 import '../useRenderElement-es.js';
-import '../BottomSheet-es.js';
-import '../DrawerRoot-es.js';
 import '../OverlaySeparator-es.js';
 import '../Separator-es.js';
+import '../BottomSheet-es.js';
+import '../DrawerRoot-es.js';
+import '../HelperText-es.js';
 import '../MenuSubmenuTrigger-es.js';
 import '../filterDataAttributes-es.js';

package/dist/docs/Menu/Menu.md

@@ -1,55 +1,215 @@
 # Menu
 
-A Menu is made up of 2 primary parts: the trigger, typically a Button, and the
-Menu container.
+## Summary
 
-The Menu container is not visible by default, interacting with the trigger will
-open the Menu.
+The menu displays a list of options for a user to choose from. It is activated
+by an interactive element such as a button or icon button.
 
-The Menu is meant to offer a list of actions for a user to choose from, though
-only one may be used at a time. The Menu will close after an action is invoked,
-the ESC key is pressed, or a click outside the Menu is registered.
+## Anatomy
 
-Menu does not have a selected state. The actions are ephemeral with no state
-persisting between opens making them well suited for actions such as navigating
-to a new page, or launching a Modal.
+| Part       | Description                                                 |
+| ---------- | ----------------------------------------------------------- |
+| Trigger    | An interactive element that opens the menu                  |
+| Container  | The floating panel or sheet that contains the list of items |
+| Label      | Primary text of an item                                     |
+| Prefix     | Optional leading slot                                       |
+| Suffix     | Optional trailing slot                                      |
+| GroupLabel | Optional subdued heading used to group related items        |
+| Separator  | Optional horizontal divider used to separate group of items |
 
-Menu is navigable by keyboard with arrow keys. Because of this only one action
-may occur per row. Nesting additional interactive elements within a single Menu
-action prevents keyboard access. When the Trigger is activated by keyboard, we
-move focus to the first item in the Menu upon opening.
+## Behavior
 
-The other elements of a Menu are optional Sections, Separators and Headers.
-These elements are non interactive, nor focusable.
+#### Opening and closing the menu
 
-> Keep Menu item content simple. Aim for at most three columns per row: a
-> leading icon, a label, and one simple trailing element (e.g., a
-> `StatusIndicator`). More complex layouts increase cognitive load and can
-> introduce complexity with the Menu's built in alignment features.
+The menu opens when:
 
-### Small screens
+* The trigger is clicked or tapped
+* The trigger is triggered by keyboard E.g. Via Enter or Space keys
 
-When a user is on a small screen device (less than \~500px), the Menu when opened
-will display as a tray or bottom-sheet like interface, opening upward from the
-bottom of the screen.
+The menu closes when:
 
-It will have all the same elements as the standard version, and an additional
-Overlay covering the non-Menu area.
+* A action menu item is selected
+* A click or tap occurs outside the menu
+* The ESC key is pressed
 
-## Content guidelines
+Radio menu items remain open by default, but can be configured to close on
+selection.
 
-Menu action labels should be sentence-cased. This means in general, capitalize
-only the first letter of the label unless there is a proper noun (such as a
-person's name) in the label.
+#### Width
 
-Jobber features, such as jobs, quotes, and invoices, are not proper nouns and
-[should not be capitalized.](/content/product-vocabulary)
+Menu width should by default match the trigger's width **or** hug the width of
+the menu items so that the label doesn't wrap. The menu's width can by adjusted
+manually however.
 
-| ✅ Do                             | ❌ Don't                          |
-| -------------------------------- | -------------------------------- |
-| Send as text message             | Send As Text Message             |
-| Collect signature                | COLLECT SIGNATURE                |
-| Assign Jasmine Williams to visit | Assign jasmine williams to visit |
+#### Positioning
+
+Menu is positioned below the element that triggered it by default. It should
+automatically reposition to appear on the left, right, above, or bottom of the
+element that triggers it if the menu is cut off.
+
+#### Submenus
+
+Submenu opens next to the main menu item. On small screens, tapping a submenu
+opens up a second sheet that displays the nested menu items.
+
+#### Small screens
+
+When a user is on a small screen such as a mobile device, the menu opens up as a
+sheet anchored to the bottom of the screen.
+
+## Variants
+
+#### Menu Items
+
+**1. Action:** Standard one-time actions such as navigating or triggering a
+modal
+
+**2. Radio:** Persistent choices like a filter of a view preference. Use when
+choice persists and the user needs to see which option is active.
+
+**3. Submenu:** Opens a nested menu of options on click and on hover. Use when
+related actions are better surfaced one level deeper.
+
+#### Menu Items: States
+
+* Default
+* Highlighted
+* Selected (radio items only)
+
+#### Group Label and Separator
+
+Group labels and separators can be used to separate and group menu items into
+scannable sections.
+
+#### Custom Content
+
+* Menus have custom slots that support more flexible item layouts
+* Custom menu items can appear anywhere in a menu
+* The padding of the menu container should not be altered
+* Menu items must represent a single action. Avoid nesting interactive elements
+  inside a menu item
+
+## Content Guidelines
+
+#### Sentence case
+
+Menu action labels should be sentence-cased. Capitalize only the first letter of
+the label unless there is a proper noun (such as a person's name). Jobber
+features like jobs, quotes, and invoices are not proper nouns and should not be
+capitalized.
+
+| ✅ Do                    | ❌ Don't                 |
+| ----------------------- | ----------------------- |
+| Send text message       | Send Text Message       |
+| Collect signature       | COLLECT SIGNATURE       |
+| Assign Jasmine Williams | Assign jasmine williams |
+
+#### Verb-first labels
+
+Menu items represent actions. Lead with the verb so the SP can scan quickly.
+
+| ✅ Do                 | ❌ Don't              |
+| -------------------- | -------------------- |
+| Edit client          | Client editing       |
+| Send as text message | Text message options |
+| Archive quote        | Quote archiving      |
+
+#### Keep labels concise
+
+Aim for 2-4 words. Menu items are scanned, not read carefully.
+
+| ✅ Do              | ❌ Don't                             |
+| ----------------- | ----------------------------------- |
+| Delete job        | Delete this job permanently         |
+| Collect signature | Collect a signature from the client |
+| Mark as complete  | Mark this visit as complete         |
+
+#### Don't repeat the trigger context
+
+If the menu is triggered from a button on a job card, the items don't need to
+say "job" in every label.
+
+| ✅ Do    | ❌ Don't     |
+| ------- | ----------- |
+| Edit    | Edit job    |
+| Archive | Archive job |
+| Delete  | Delete job  |
+
+#### Use consistent verb tense
+
+All items in a single menu should use the same grammatical form.
+
+| ✅ Do                                    | ❌ Don't                                  |
+| --------------------------------------- | ---------------------------------------- |
+| Edit client / Send invoice / Delete job | Edit client / Sending invoice / Archived |
+| Mark as complete / Assign to team       | Completed / Assign to team               |
+
+#### Group labels should describe, not instruct
+
+Keep group labels to 1-2 words that name the category.
+
+| ✅ Do          | ❌ Don't                         |
+| ------------- | ------------------------------- |
+| Communication | Choose how to communicate       |
+| Actions       | Things you can do               |
+| Scheduling    | Schedule options for this visit |
+
+#### Destructive items should be explicit
+
+Name what's being removed so the SP isn't guessing, especially when the menu
+acts on multiple object types.
+
+| ✅ Do             | ❌ Don't |
+| ---------------- | ------- |
+| Delete job       | Delete  |
+| Remove line item | Remove  |
+| Cancel visit     | Cancel  |
+
+## Do's and Don'ts
+
+#### Do
+
+* ✅ Sentence case for menu item labels and group labels
+* ✅ Labels should be short and action oriented
+* ✅ Keep menu items simple
+* ✅ Use icons only when they add clarity
+* ✅ Cluster similar menu items together
+
+#### Don't
+
+* ❌ Avoid adding too many items in a menu
+* ❌ Don't mix unrelated actions in the same menu, or use grouping when needed
+
+## Accessibility
+
+Users need to be able to navigate to, open, select menu items, and close a menu
+with assistive technology.
+
+#### Keyboard navigation
+
+| Key                   | Behavior                                                           |
+| --------------------- | ------------------------------------------------------------------ |
+| Tab                   | Moves focus to the trigger                                         |
+| Up and Down arrows    | Closed menus: Opens menu. Opened menus: Moves up and down the list |
+| Left and Right arrows | Opens and closes a submenu                                         |
+| Enter or Space        | Closed menus: Opens menu. Opened menus: Selects menu item          |
+| Esc                   | Closes the menu                                                    |
+
+#### Touch target
+
+Minimum menu item height:
+
+* **Large screens:** 40px
+* **Small screens:** 48px
+
+## Related components
+
+* To trigger a single action rather than presenting a list of options, use a
+  [Button](../Button/Button.md) or [IconButton](/components/IconButton)
+* To allow the user to choose a value from a predefined list within a form, use
+  a [Select](../Select/Select.md)
+* To allow the user to search and filter through a list of options, use a
+  [Combobox](../Combobox/Combobox.md)
 
 
 ## Composable Version (Web Only)

package/dist/index.cjs

@@ -183,10 +183,11 @@ require('filesize');
 require('./GridCell-cjs.js');
 require('axios');
 require('./useRenderElement-cjs.js');
-require('./BottomSheet-cjs.js');
-require('./DrawerRoot-cjs.js');
 require('./OverlaySeparator-cjs.js');
 require('./Separator-cjs.js');
+require('./BottomSheet-cjs.js');
+require('./DrawerRoot-cjs.js');
+require('./HelperText-cjs.js');
 require('./MenuSubmenuTrigger-cjs.js');
 require('./AtlantisPortalContent-cjs.js');
 require('@jobber/formatters');

package/dist/index.mjs

@@ -181,10 +181,11 @@ import 'filesize';
 import './GridCell-es.js';
 import 'axios';
 import './useRenderElement-es.js';
-import './BottomSheet-es.js';
-import './DrawerRoot-es.js';
 import './OverlaySeparator-es.js';
 import './Separator-es.js';
+import './BottomSheet-es.js';
+import './DrawerRoot-es.js';
+import './HelperText-es.js';
 import './MenuSubmenuTrigger-es.js';
 import './AtlantisPortalContent-es.js';
 import '@jobber/formatters';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "7.10.0",
+  "version": "7.10.1-TAYLORmen-7785412.2+778541237",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -583,5 +583,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "348d1293520051687a9b2d178cf4c5757136e9bf"
+  "gitHead": "778541237e17e103a98fb5141ddba23602a143b6"
 }