@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/components/DropZone.js

@@ -10,6 +10,19 @@ function _array_with_holes(arr) {
 function _array_without_holes(arr) {
     if (Array.isArray(arr)) return _array_like_to_array(arr);
 }
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterable_to_array(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
@@ -43,6 +56,45 @@ function _non_iterable_rest() {
 function _non_iterable_spread() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
@@ -69,7 +121,51 @@ import SkeletonText from "./SkeletonText.js";
 import Spinner from "./Spinner.js";
 import Text from "./Text.js";
 import { CancelMajor, CircleAlertMajor, FileMinor, ImageMajor, ImagesMajor, MagicMajor } from "@shopify/polaris-icons";
-var normalizeDropZoneAccept = function(accept) {
+/**
+ * @component DropZone
+ *
+ * @description A file upload area that accepts drag-and-drop or click-to-browse file selection with type and size validation.
+ *
+ * @usage
+ * - DO: Use for file upload areas that accept drag-and-drop or click-to-browse.
+ * - DON'T: Use for non-file inputs.
+ *
+ * @accessibility
+ * - Supports keyboard activation; ensure a descriptive label is provided for the upload area.
+ *
+ * @alternative
+ * - If you need a simple file input, use a native `<input type="file">` with TextField styling.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - The ID for the DropZone input.
+ * @param {string} [props.label] - Label for the DropZone.
+ * @param {boolean} [props.labelHidden] - Whether the label is hidden.
+ * @param {Object} [props.labelAction] - Action for the label, including `onAction` and `content`.
+ * @param {string} [props.tooltip] - Tooltip for the label.
+ * @param {string} [props.labelVariant] - Variant for the label styling.
+ * @param {string} [props.type="file"] - The type of files accepted (e.g., "file", "image").
+ * @param {string|string[]} [props.accept] - Accepted file types.
+ * @param {boolean} [props.allowMultiple=false] - Whether multiple files can be uploaded.
+ * @param {boolean} [props.showDropZoneWhenDisabled=true] - Whether the DropZone is shown when disabled.
+ * @param {boolean} [props.disabled] - Whether the DropZone is disabled.
+ * @param {Function} [props.onDrop] - Callback for when files are dropped.
+ * @param {Function} [props.onDropAccepted] - Callback for accepted files.
+ * @param {Function} [props.onDropRejected] - Callback for rejected files.
+ * @param {string} [props.helpText] - Help text displayed below the DropZone.
+ * @param {string} [props.error] - Error message to display.
+ * @param {boolean} [props.uploading=false] - Whether a file upload is in progress.
+ * @param {Array} [props.uploadedFiles=[]] - Array of uploaded files.
+ * @param {string} [props.uploadLabel="Drag and drop files or click to upload"] - Label for upload prompt.
+ * @param {string} [props.uploadingLabel="Uploading..."] - Label shown during file uploads.
+ * @param {string} [props.dragLabel="Release to upload"] - Label for the drag area.
+ * @param {boolean} [props.showFilePreview=true] - Whether file previews are displayed.
+ * @param {boolean} [props.previewLoading] - Whether file previews are loading.
+ * @param {number} [props.previewRows=2] - Number of preview rows to display.
+ * @param {Function} [props.onRemove] - Callback for removing a file.
+ * @param {Function} [props.onFilePreviewClick] - Callback for clicking a file preview.
+ * @param {string} [props.filename] - Name of the file being uploaded.
+ * @returns {JSX.Element} DropZone component.
+ */ var normalizeDropZoneAccept = function(accept) {
     if (!accept) return [];
     return typeof accept === "string" ? [
         accept
@@ -131,39 +227,7 @@ var dropZoneStyles = tv({
         dragOver: false
     }
 });
-/**
- * DropZone component for handling file uploads with previews.
- *
- * @param {Object} props - Component props.
- * @param {string} [props.id] - The ID for the DropZone input.
- * @param {string} [props.label] - Label for the DropZone.
- * @param {boolean} [props.labelHidden] - Whether the label is hidden.
- * @param {Object} [props.labelAction] - Action for the label, including `onAction` and `content`.
- * @param {string} [props.tooltip] - Tooltip for the label.
- * @param {string} [props.labelVariant] - Variant for the label styling.
- * @param {string} [props.type="file"] - The type of files accepted (e.g., "file", "image").
- * @param {string|string[]} [props.accept] - Accepted file types.
- * @param {boolean} [props.allowMultiple=false] - Whether multiple files can be uploaded.
- * @param {boolean} [props.showDropZoneWhenDisabled=true] - Whether the DropZone is shown when disabled.
- * @param {boolean} [props.disabled] - Whether the DropZone is disabled.
- * @param {Function} [props.onDrop] - Callback for when files are dropped.
- * @param {Function} [props.onDropAccepted] - Callback for accepted files.
- * @param {Function} [props.onDropRejected] - Callback for rejected files.
- * @param {string} [props.helpText] - Help text displayed below the DropZone.
- * @param {string} [props.error] - Error message to display.
- * @param {boolean} [props.uploading=false] - Whether a file upload is in progress.
- * @param {Array} [props.uploadedFiles=[]] - Array of uploaded files.
- * @param {string} [props.uploadLabel="Drag and drop files or click to upload"] - Label for upload prompt.
- * @param {string} [props.uploadingLabel="Uploading..."] - Label shown during file uploads.
- * @param {string} [props.dragLabel="Release to upload"] - Label for the drag area.
- * @param {boolean} [props.showFilePreview=true] - Whether file previews are displayed.
- * @param {boolean} [props.previewLoading] - Whether file previews are loading.
- * @param {number} [props.previewRows=2] - Number of preview rows to display.
- * @param {Function} [props.onRemove] - Callback for removing a file.
- * @param {Function} [props.onFilePreviewClick] - Callback for clicking a file preview.
- * @param {string} [props.filename] - Name of the file being uploaded.
- * @returns {JSX.Element} DropZone component.
- */ function DropZone() {
+function DropZone() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var id = props.id, label = props.label, labelHidden = props.labelHidden, labelAction = props.labelAction, tooltip = props.tooltip, labelVariant = props.labelVariant, _props_type = props.type, type = _props_type === void 0 ? "file" : _props_type, _accept = props.accept, _props_allowMultiple = props.allowMultiple, allowMultiple = _props_allowMultiple === void 0 ? false : _props_allowMultiple, _props_showDropZoneWhenDisabled = props.showDropZoneWhenDisabled, showDropZoneWhenDisabled = _props_showDropZoneWhenDisabled === void 0 ? true : _props_showDropZoneWhenDisabled, _disabled = props.disabled, onDrop = props.onDrop, onDropAccepted = props.onDropAccepted, onDropRejected = props.onDropRejected, helpText = props.helpText, error = props.error, _props_uploading = props.uploading, uploading = _props_uploading === void 0 ? false : _props_uploading, _props_uploadedFiles = props.uploadedFiles, uploadedFiles = _props_uploadedFiles === void 0 ? [] : _props_uploadedFiles, _props_uploadLabel = props.uploadLabel, uploadLabel = _props_uploadLabel === void 0 ? "Drag and drop files or click to upload" : _props_uploadLabel, _props_uploadingLabel = props.uploadingLabel, uploadingLabel = _props_uploadingLabel === void 0 ? "Uploading..." : _props_uploadingLabel, _props_dragLabel = props.dragLabel, dragLabel = _props_dragLabel === void 0 ? "Release to upload" : _props_dragLabel, tmp = props.showFilePreview, _showFilePreview = tmp === void 0 ? true : tmp, previewLoading = props.previewLoading, _props_previewRows = props.previewRows, previewRows = _props_previewRows === void 0 ? 2 : _props_previewRows, onRemove = props.onRemove, onFilePreviewClick = props.onFilePreviewClick, filename = props.filename;
     var accept = normalizeDropZoneAccept(_accept);
@@ -491,11 +555,21 @@ var previewStyles = tv({
             return /*#__PURE__*/ _jsxs("div", {
                 className: "flex justify-between items-center gap-2",
                 children: [
-                    /*#__PURE__*/ _jsxs("div", {
+                    /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
                         className: previewClasses,
                         onClick: onClick ? function() {
                             return onClick(file);
-                        } : undefined,
+                        } : undefined
+                    }, onClick ? {
+                        role: "button",
+                        tabIndex: 0,
+                        onKeyDown: function(e) {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                onClick(file);
+                            }
+                        }
+                    } : {}), {
                         children: [
                             /*#__PURE__*/ _jsx(FileThumbnail, {
                                 file: file
@@ -517,7 +591,7 @@ var previewStyles = tv({
                                 ]
                             })
                         ]
-                    }),
+                    })),
                     onRemove && /*#__PURE__*/ _jsx(Button, {
                         size: "small",
                         icon: CancelMajor,

package/dist/esm/components/EmptyState.js

@@ -4,12 +4,21 @@ import Image from "./Image.js";
 import Text from "./Text.js";
 import ProgressBar from "./ProgressBar.js";
 import { tv } from "tailwind-variants";
-var styles = tv({
-    base: "Litho-EmptyState py-16 px-4 flex flex-col items-center text-center gap-6"
-});
 /**
- * EmptyState component for displaying a structured layout with a title, description,
- * icon, and action buttons when no content is available.
+ * @component EmptyState
+ *
+ * @description A placeholder component displayed when a resource list, table, or page has no content, with a heading, description, and call-to-action.
+ *
+ * @usage
+ * - DO: Display when a resource list, table, or page has no data to show.
+ * - DON'T: Use for error states (use `Banner` instead).
+ *
+ * @accessibility
+ * - Ensure the heading and action buttons are descriptive; decorative images should have empty alt text.
+ *
+ * @alternative
+ * - If you need to show an error or warning message, use `Banner` instead.
+ * - If you need a loading state, use `SkeletonText`.
  *
  * @param {Object} props - The properties to customize the EmptyState component.
  * @param {string} [props.description] - Text description to display in the empty state.
@@ -33,7 +42,10 @@ var styles = tv({
  * @param {number} [props.progress] - Progress value to display in the empty state.
  *
  * @returns {JSX.Element} The rendered EmptyState component.
- */ function EmptyState() {
+ */ var styles = tv({
+    base: "Litho-EmptyState py-16 px-4 flex flex-col items-center text-center gap-6"
+});
+function EmptyState() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var description = props.description, icon = props.icon, iconSource = props.iconSource, primaryAction = props.primaryAction, secondaryAction = props.secondaryAction, title = props.title, _props_titleVariant = props.titleVariant, titleVariant = _props_titleVariant === void 0 ? "headingXl" : _props_titleVariant, _props_descriptionVariant = props.descriptionVariant, descriptionVariant = _props_descriptionVariant === void 0 ? "bodyLg" : _props_descriptionVariant, progress = props.progress, className = props.className;
     var classes = styles();

package/dist/esm/components/Filters.js

@@ -122,33 +122,21 @@ import TextField from "./TextField.js";
 import Tooltip from "./Tooltip.js";
 import { CancelSmallMinor, CaretDownMinor, DeleteMinor, HorizontalDotsMinor, PlusMinor, SearchMajor, ChevronLeftMinor, ChevronRightMinor } from "@shopify/polaris-icons";
 import { useDarkMode } from "./AppProvider.js";
-var styles = tv({
-    base: "Litho-Filters flex items-center overflow-x-auto",
-    variants: {
-        showTextField: {
-            true: "justify-between",
-            false: ""
-        }
-    }
-});
-var filterContainerStyles = tv({
-    base: "Litho-FiltersContainer flex flex-wrap gap-1.5 items-center",
-    variants: {
-        showTextField: {
-            true: "p-2",
-            false: ""
-        },
-        padded: {
-            true: "p-2",
-            false: ""
-        }
-    }
-});
 /**
- * Filters Component - A React component that manages filters for a given dataset.
- * Includes functionality for visible filters, more filters, and a query field.
+ * @component Filters
+ *
+ * @description A filter management component that renders active filter pills and controls for filtering table or resource list data.
+ *
+ * @usage
+ * - DO: Use for filtering content in tables or resource lists with removable filter pills.
+ * - DON'T: Use for general-purpose tabs (use Tabs).
+ *
+ * @accessibility
+ * - Filter pills are keyboard accessible with remove actions; ensure each filter has a descriptive label.
+ *
+ * @alternative
+ * - If you need general-purpose tabs, use `Tabs`. If you need a search input, use `TextField`.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {Array<{
  *   key: string,
@@ -177,7 +165,29 @@ var filterContainerStyles = tv({
  * @param {boolean} [props.disableQueryField=false] - Whether the query text field is disabled.
  * @param {string} [props.className] - Additional class names for the component.
  * @returns {JSX.Element|null} The Filters component or null if no filters are available.
- */ function Filters(props) {
+ */ var styles = tv({
+    base: "Litho-Filters flex items-center overflow-x-auto",
+    variants: {
+        showTextField: {
+            true: "justify-between",
+            false: ""
+        }
+    }
+});
+var filterContainerStyles = tv({
+    base: "Litho-FiltersContainer flex flex-wrap gap-1.5 items-center",
+    variants: {
+        showTextField: {
+            true: "p-2",
+            false: ""
+        },
+        padded: {
+            true: "p-2",
+            false: ""
+        }
+    }
+});
+function Filters(props) {
     var _filters_filter;
     var _props_filters = props.filters, filters = _props_filters === void 0 ? [] : _props_filters, _props_appliedFilters = props.appliedFilters, appliedFilters = _props_appliedFilters === void 0 ? [] : _props_appliedFilters, onClearAll = props.onClearAll, _props_showTextField = props.showTextField, showTextField = _props_showTextField === void 0 ? false : _props_showTextField, _props_textFieldSubdued = props.textFieldSubdued, textFieldSubdued = _props_textFieldSubdued === void 0 ? false : _props_textFieldSubdued, _props_padded = props.padded, padded = _props_padded === void 0 ? false : _props_padded, queryValue = props.queryValue, onQueryChange = props.onQueryChange, onQueryBlur = props.onQueryBlur, onQueryFocus = props.onQueryFocus, onQueryClear = props.onQueryClear, _props_queryPlaceholder = props.queryPlaceholder, queryPlaceholder = _props_queryPlaceholder === void 0 ? "Search" : _props_queryPlaceholder, _props_ignorePromotedFiltersWhenRemoving = props.ignorePromotedFiltersWhenRemoving, ignorePromotedFiltersWhenRemoving = _props_ignorePromotedFiltersWhenRemoving === void 0 ? true : _props_ignorePromotedFiltersWhenRemoving, disableQueryField = props.disableQueryField, className = props.className;
     var classes = styles({
@@ -442,9 +452,11 @@ var pillTextStyles = tv({
     }
 });
 /**
- * Filters.Pill - A subcomponent for rendering filter pills.
+ * @component Filters.Pill
+ *
+ * @usage
+ * - DO: Display active filter values as removable chips.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {string} props.label - The label of the filter pill.
  * @param {boolean} [props.applied=false] - Whether the pill represents an applied filter.
@@ -463,9 +475,19 @@ var pillTextStyles = tv({
     var textClasses = pillTextStyles({
         applied: applied
     });
-    var content = /*#__PURE__*/ _jsx("div", {
+    var content = /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
         className: classes,
-        onClick: onClick,
+        onClick: onClick
+    }, onClick && {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick();
+            }
+        }
+    }), {
         children: destructive ? /*#__PURE__*/ _jsx(Icon, {
             source: DeleteMinor,
             color: "subdued"
@@ -485,7 +507,7 @@ var pillTextStyles = tv({
                 })
             ]
         })
-    });
+    }));
     if (destructive) {
         return /*#__PURE__*/ _jsx(Tooltip, {
             content: "Remove filters",
@@ -518,9 +540,11 @@ var rightGradientStyles = tv({
     }
 });
 /**
- * Filters.Tabs - A subcomponent for managing tabs with scrollable functionality.
+ * @component Filters.Tabs
+ *
+ * @usage
+ * - DO: Group filter pills with tab-based categories.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {Array} props.tabs - The tabs to display.
  * @param {Object} [props.insertBeforeTabs] - Tab to insert before the main tabs.
@@ -719,9 +743,11 @@ var tabActionIconStyles = tv({
     base: "opacity-80"
 });
 /**
- * Filters.Tab - A subcomponent for rendering individual tabs within the Filters.Tabs component.
+ * @component Filters.Tab
+ *
+ * @usage
+ * - DO: Use as an individual tab within Filters.Tabs.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {React.ReactNode} [props.icon=HorizontalDotsMinor] - The icon displayed in the tab (default is a horizontal dots icon).
  * @param {boolean} [props.selected=false] - Whether the tab is currently selected.
@@ -749,6 +775,15 @@ var tabActionIconStyles = tv({
     return /*#__PURE__*/ _jsx("div", {
         className: classes,
         onClick: onClick,
+        role: "tab",
+        tabIndex: 0,
+        "aria-selected": selected,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+            }
+        },
         children: /*#__PURE__*/ _jsxs("div", {
             className: "flex flex-col items-start justify-start",
             children: [
@@ -763,7 +798,20 @@ var tabActionIconStyles = tv({
                         }),
                         onAction && /*#__PURE__*/ _jsxs("div", {
                             className: actionClasses,
-                            onClick: onAction,
+                            onClick: function(e) {
+                                e.stopPropagation();
+                                onAction(e);
+                            },
+                            role: "button",
+                            tabIndex: 0,
+                            "aria-label": tooltip,
+                            onKeyDown: function(e) {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    e.stopPropagation();
+                                    onAction(e);
+                                }
+                            },
                             children: [
                                 !interactive && /*#__PURE__*/ _jsx("div", {
                                     className: "min-h-full min-w-2 bg-linear-to-l from-surface-highest to-transparent"

package/dist/esm/components/FooterHelp.js

@@ -2,11 +2,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from "./Icon.js";
 import { CircleInformationMajor } from "@shopify/polaris-icons";
 /**
- * Renders a `FooterHelp` component, which provides additional information
- * or guidance to users, typically displayed at the bottom of a page. The component
- * centers its content within a rounded, styled box that includes an icon and customizable text.
+ * @component FooterHelp
+ *
+ * @description A bottom-of-page help component that displays a link to additional resources or documentation.
+ *
+ * @usage
+ * - DO: Place at the bottom of a page to provide contextual help links.
+ * - DON'T: Use in card footers or inline (use `Link` instead).
+ *
+ * @accessibility
+ * - Renders help text with a link; ensure the link text is descriptive for screen readers.
+ *
+ * @alternative
+ * - If you need an inline help link, use `Link` instead.
+ * - If you need contextual tips, use `Tip`.
  *
- * @component
  * @param {Object} [props] - The props for the FooterHelp component.
  * @param {React.ReactNode} [props.children] - The content to display next to the information icon.
  * This is typically a text string or any valid React node.

package/dist/esm/components/Form.js

@@ -1,7 +1,18 @@
 /**
- * A reusable Form component that provides a structured HTML form with customizable attributes and submission handling.
+ * @component Form
+ *
+ * @description A form wrapper that handles submit events and integrates with the contextual save bar for unsaved changes.
+ *
+ * @usage
+ * - DO: Wrap form fields to handle submission with Enter key and prevent default behavior.
+ * - DON'T: Use for non-form content.
+ *
+ * @accessibility
+ * - Renders a semantic `<form>` element; screen readers identify it as a form region.
+ *
+ * @alternative
+ * - If you need to manage form save state globally, use `ContextualSaveBar` alongside Form.
  *
- * @component
  * @param {Object} [props={}] - The properties passed to the component.
  * @param {string} [props.acceptCharset] - The character encoding that the form accepts.
  * @param {string} [props.action] - The URL where the form data should be submitted.

package/dist/esm/components/Frame.js

@@ -56,7 +56,39 @@ import FrameSaveBar from "./FrameSaveBar.js";
 import TopBar from "./TopBar.js";
 import Popover from "./Popover.js";
 import ActionList from "./ActionList.js";
-var frameStyles = tv({
+/**
+ * @component Frame
+ *
+ * @description The root application layout shell that provides navigation sidebar, top bar, mobile nav, and contextual save bar slots.
+ *
+ * @usage
+ * - DO: Use as the root layout wrapper providing navigation sidebar, top bar, and main content area.
+ * - DON'T: Nest Frame inside another Frame.
+ *
+ * @accessibility
+ * - Frame establishes landmark regions (nav, main, header) for screen reader navigation.
+ *
+ * @alternative
+ * - If you need a simple page container without app shell chrome, use `Page` or `Layout`.
+ *
+ * @param {Object} props - Props for the Frame component.
+ * @param {React.ReactNode} props.navigation - Component to render as the navigation menu.
+ * @param {React.ReactNode} props.announcement - Component to render an announcement bar.
+ * @param {Object} props.logo - Logo configuration.
+ * @param {string} props.logo.url - URL for the logo link.
+ * @param {string} props.logo.source - Source for the logo image.
+ * @param {string} props.logo.accessibilityLabel - Accessibility label for the logo image.
+ * @param {number} props.logo.width - Width of the logo image.
+ * @param {boolean} props.showSearchTrigger - Whether to show the search trigger.
+ * @param {React.ReactNode} props.searchModal - Modal to render as the search modal.
+ * @param {function} props.onToggleSearch - Function to toggle the search modal.
+ * @param {boolean} [props.enableSearchShortcut=true] - Whether to register the Cmd+K keyboard shortcut for search.
+ * @param {string} [props.className] - Additional CSS classes for the Frame.
+ * @param {React.ReactNode} props.children - Content to render within the Frame.
+ * @param {boolean} [props.alwaysShowUserMenuInTopBar] - Whether to always show the user menu in the top bar.
+ * @param {React.ReactNode} [props.headerAccessory] - Accessory to render in the header.
+ * @returns {React.ReactElement} The rendered Frame component.
+ */ var frameStyles = tv({
     base: "Litho-Frame bg-surface-normal",
     variants: {
         paneIsOpen: {
@@ -147,26 +179,7 @@ var logoStyles = tv({
         alwaysShowLogo: false
     }
 });
-/**
- * Frame component that provides a layout structure with top bar, navigation, logo, and content.
- * @param {Object} props - Props for the Frame component.
- * @param {React.ReactNode} props.navigation - Component to render as the navigation menu.
- * @param {React.ReactNode} props.announcement - Component to render an announcement bar.
- * @param {Object} props.logo - Logo configuration.
- * @param {string} props.logo.url - URL for the logo link.
- * @param {string} props.logo.source - Source for the logo image.
- * @param {string} props.logo.accessibilityLabel - Accessibility label for the logo image.
- * @param {number} props.logo.width - Width of the logo image.
- * @param {boolean} props.showSearchTrigger - Whether to show the search trigger.
- * @param {React.ReactNode} props.searchModal - Modal to render as the search modal.
- * @param {function} props.onToggleSearch - Function to toggle the search modal.
- * @param {boolean} [props.enableSearchShortcut=true] - Whether to register the Cmd+K keyboard shortcut for search.
- * @param {string} [props.className] - Additional CSS classes for the Frame.
- * @param {React.ReactNode} props.children - Content to render within the Frame.
- * @param {boolean} [props.alwaysShowUserMenuInTopBar] - Whether to always show the user menu in the top bar.
- * @param {React.ReactNode} [props.headerAccessory] - Accessory to render in the header.
- * @returns {React.ReactElement} The rendered Frame component.
- */ var Frame = function(param) {
+var Frame = function(param) {
     var navigation = param.navigation, announcement = param.announcement, logo = param.logo, children = param.children, className = param.className, userMenu = param.userMenu, moreActions = param.moreActions, _param_showSearchTrigger = param.showSearchTrigger, showSearchTrigger = _param_showSearchTrigger === void 0 ? true : _param_showSearchTrigger, _param_alwaysShowUserMenuInTopBar = param.alwaysShowUserMenuInTopBar, alwaysShowUserMenuInTopBar = _param_alwaysShowUserMenuInTopBar === void 0 ? false : _param_alwaysShowUserMenuInTopBar, _param_searchLabel = param.searchLabel, searchLabel = _param_searchLabel === void 0 ? "Search" : _param_searchLabel, _param_searchIcon = param.searchIcon, searchIcon = _param_searchIcon === void 0 ? /*#__PURE__*/ _jsx(Icon, {
         source: SearchMajor,
         color: "subdued"
@@ -200,6 +213,10 @@ var logoStyles = tv({
                 document.documentElement.style.setProperty("--litho-top-bar-height", "56px");
                 document.documentElement.style.setProperty("--litho-table-header-sticky-at", "56px");
             }
+        } else {
+            document.documentElement.style.setProperty("--litho-header-offset", "0px");
+            document.documentElement.style.setProperty("--litho-top-bar-height", "56px");
+            document.documentElement.style.setProperty("--litho-table-header-sticky-at", "56px");
         }
     }, [
         announcement
@@ -237,6 +254,15 @@ var logoStyles = tv({
         onClick: function() {
             return onToggleSearch();
         },
+        role: "button",
+        tabIndex: 0,
+        "aria-label": searchLabel,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onToggleSearch();
+            }
+        },
         children: [
             searchIcon,
             /*#__PURE__*/ _jsxs("div", {
@@ -259,7 +285,7 @@ var logoStyles = tv({
             paneIsOpen: paneIsOpen
         }), " ").concat(className),
         children: /*#__PURE__*/ _jsxs("div", {
-            className: embedded ? "" : "@container",
+            className: embedded ? "" : "@container/main",
             children: [
                 !contentIsFullPage && /*#__PURE__*/ _jsx("div", {
                     className: logoStyles({
@@ -370,6 +396,15 @@ var logoStyles = tv({
                             },
                             children: /*#__PURE__*/ _jsx("div", {
                                 className: "fixed cursor-pointer top-2.5 @md:hidden p-2 rounded-full bg-tint-10 hover:bg-tint-12 dark:bg-tint-alt-10 dark:hover:bg-tint-alt-12 left-56.5",
+                                role: "button",
+                                tabIndex: 0,
+                                "aria-label": "Close navigation",
+                                onKeyDown: function(e) {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                        e.preventDefault();
+                                        setShowMobileNavigation(false);
+                                    }
+                                },
                                 children: /*#__PURE__*/ _jsx(Icon, {
                                     source: CancelMajor,
                                     color: "alternate"

package/dist/esm/components/FrameSaveBar.js

@@ -55,7 +55,24 @@ import Icon from "./Icon.js";
 import Tooltip from "./Tooltip.js";
 import { ChevronUpMinor, ChevronDownMinor } from "@shopify/polaris-icons";
 import { useFrame } from "./Frame.js";
-var styles = tv({
+/**
+ * @component FrameSaveBar
+ *
+ * @description A save bar component embedded within the Frame layout that displays save and discard actions for unsaved form changes.
+ *
+ * @usage
+ * - DO: Use within a Frame layout to show a contextual save bar that integrates with the app shell.
+ * - DON'T: Use without a Frame parent.
+ *
+ * @accessibility
+ * - Keyboard accessible save and discard actions; message text describes the unsaved context.
+ *
+ * @alternative
+ * - If you need a standalone save bar outside Frame, use `ContextualSaveBar`.
+ *
+ * @param {Object} props.logo - Logo configuration.
+ * @returns {JSX.Element} The rendered FrameSaveBar component
+ */ var styles = tv({
     base: "Litho-FrameSaveBar fixed top-[var(--litho-header-offset)] right-0 left-0 h-[var(--litho-header-height)] px-4 @md:px-5 flex items-center gap-2 bg-surface-alternate dark:bg-brand transition-opacity transition-transform duration-300 transform",
     variants: {
         visible: {
@@ -94,11 +111,7 @@ var toggleStyles = tv({
         paneIsOpen: false
     }
 });
-/**
- * FrameSaveBar component sisplays a save bar at the top of the screen with contextual save and discard actions.
- * @param {Object} props.logo - Logo configuration.
- * @returns {JSX.Element} The rendered FrameSaveBar component
- */ function FrameSaveBar(param) {
+function FrameSaveBar(param) {
     var logo = param.logo;
     var darkMode = useDarkMode().darkMode;
     var paneIsOpen = useFrame().paneIsOpen;
@@ -145,6 +158,15 @@ var toggleStyles = tv({
                         onClick: function() {
                             return setTucked(false);
                         },
+                        role: "button",
+                        tabIndex: 0,
+                        "aria-label": "Show save bar",
+                        onKeyDown: function(e) {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                setTucked(false);
+                            }
+                        },
                         children: /*#__PURE__*/ _jsx(Icon, {
                             source: ChevronDownMinor,
                             color: "FrameSaveBar"
@@ -192,6 +214,15 @@ var toggleStyles = tv({
                                                 onClick: function() {
                                                     return setTucked(true);
                                                 },
+                                                role: "button",
+                                                tabIndex: 0,
+                                                "aria-label": "Hide save bar",
+                                                onKeyDown: function(e) {
+                                                    if (e.key === "Enter" || e.key === " ") {
+                                                        e.preventDefault();
+                                                        setTucked(true);
+                                                    }
+                                                },
                                                 children: /*#__PURE__*/ _jsx(Icon, {
                                                     source: ChevronUpMinor,
                                                     color: "FrameSaveBar"