@heymantle/litho 0.0.14 → 0.0.16

package/dist/esm/components/ToastNotification.js

@@ -7,6 +7,19 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return 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_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -34,6 +47,45 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure 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();
 }
@@ -51,7 +103,47 @@ import { tv } from "tailwind-variants";
 import Text from "./Text.js";
 import Icon from "./Icon.js";
 import { CancelMinor } from "@shopify/polaris-icons";
-var styles = tv({
+/**
+ * @component ToastNotification
+ *
+ * @description A brief, auto-dismissing notification that appears at the bottom of the screen to confirm an action or report an event.
+ *
+ * @usage
+ * - DO: Display brief, auto-dismissing success or info notifications after user actions.
+ * - DON'T: Use for persistent messages or errors (use Banner).
+ *
+ * @accessibility
+ * - Toast should be announced to screen readers via `role="alert"` or live region. Keep messages brief.
+ *
+ * @alternative
+ * - If you need a persistent message, use `Banner`.
+ * - If you need a modal confirmation, use `Modal`.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.prefix] - Optional prefix content (image, icon, or component) to display before the title.
+ * @param {Object|Function} [props.icon] - Optional icon source (from @shopify/polaris-icons) to display as prefix. Used as fallback if prefix is not provided.
+ * @param {string} props.title - The main title text of the toast.
+ * @param {string} [props.subtitle] - Optional subtitle text displayed below the title.
+ * @param {number} [props.duration=3000] - Duration in milliseconds before the toast auto-dismisses. Defaults to 2000ms (2 seconds).
+ * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.position='topRight'] - Position of the toast on the screen.
+ * @param {Function} [props.onDismiss] - Callback function called when the toast is dismissed (either automatically or manually).
+ * @param {Function} [props.onClick] - Callback function called when the toast is clicked. Makes the entire toast clickable with cursor-pointer.
+ * @param {boolean} [props.dismissible=true] - Whether the toast can be manually dismissed via the close button.
+ * @param {boolean} [props.fixed=true] - Whether to use fixed positioning. Set to false when used within ToastProvider.
+ * @param {boolean} [props.isDismissing=false] - Whether the toast is in a dismissing state. Starts the exit animation immediately.
+ * @param {string} [props.className] - Additional CSS classes to apply to the toast container.
+ * @returns {JSX.Element|null} The rendered toast notification or null if dismissed.
+ *
+ * @example
+ * <ToastNotification
+ *   prefix={<Icon source={TickMinor} color="success" />}
+ *   title="Support ticket updated"
+ *   subtitle="Your ticket has been resolved"
+ *   duration={3000}
+ *   position="topRight"
+ *   onDismiss={() => console.log('Toast dismissed')}
+ * />
+ */ var styles = tv({
     base: "Litho-ToastNotification group/toast pointer-events-auto min-w-60 max-w-85 bg-surface-highest/95 hover:bg-surface-highest rounded-md shadow-card border border-tint-2 p-2 flex items-start gap-2 transition-all duration-300 ease-in-out",
     variants: {
         position: {
@@ -147,36 +239,7 @@ var styles = tv({
 var closeButtonStyles = tv({
     base: "Litho-ToastNotification__Close flex-none p-0.5 rounded-md cursor-pointer hover:bg-tint-2 active:bg-tint-3 transition-colors opacity-0 group-hover/toast:opacity-100"
 });
-/**
- * ToastNotification component for displaying temporary notifications to users.
- * Automatically dismisses after the specified duration.
- *
- * @component
- * @param {Object} props - The component props.
- * @param {React.ReactNode} [props.prefix] - Optional prefix content (image, icon, or component) to display before the title.
- * @param {Object|Function} [props.icon] - Optional icon source (from @shopify/polaris-icons) to display as prefix. Used as fallback if prefix is not provided.
- * @param {string} props.title - The main title text of the toast.
- * @param {string} [props.subtitle] - Optional subtitle text displayed below the title.
- * @param {number} [props.duration=3000] - Duration in milliseconds before the toast auto-dismisses. Defaults to 2000ms (2 seconds).
- * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.position='topRight'] - Position of the toast on the screen.
- * @param {Function} [props.onDismiss] - Callback function called when the toast is dismissed (either automatically or manually).
- * @param {Function} [props.onClick] - Callback function called when the toast is clicked. Makes the entire toast clickable with cursor-pointer.
- * @param {boolean} [props.dismissible=true] - Whether the toast can be manually dismissed via the close button.
- * @param {boolean} [props.fixed=true] - Whether to use fixed positioning. Set to false when used within ToastProvider.
- * @param {boolean} [props.isDismissing=false] - Whether the toast is in a dismissing state. Starts the exit animation immediately.
- * @param {string} [props.className] - Additional CSS classes to apply to the toast container.
- * @returns {JSX.Element|null} The rendered toast notification or null if dismissed.
- *
- * @example
- * <ToastNotification
- *   prefix={<Icon source={TickMinor} color="success" />}
- *   title="Support ticket updated"
- *   subtitle="Your ticket has been resolved"
- *   duration={3000}
- *   position="topRight"
- *   onDismiss={() => console.log('Toast dismissed')}
- * />
- */ function ToastNotification() {
+function ToastNotification() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var prefix = props.prefix, icon = props.icon, title = props.title, subtitle = props.subtitle, _props_duration = props.duration, duration = _props_duration === void 0 ? 3000 : _props_duration, _props_position = props.position, position = _props_position === void 0 ? "topRight" : _props_position, onDismiss = props.onDismiss, onClick = props.onClick, _props_dismissible = props.dismissible, dismissible = _props_dismissible === void 0 ? true : _props_dismissible, _props_fixed = props.fixed, fixed = _props_fixed === void 0 ? true : _props_fixed, _props_isDismissing = props.isDismissing, isDismissing = _props_isDismissing === void 0 ? false : _props_isDismissing, className = props.className;
     var _useState = _sliced_to_array(useState(!isDismissing), 2), visible = _useState[0], setVisible = _useState[1];
@@ -309,11 +372,21 @@ var closeButtonStyles = tv({
         source: icon,
         color: "subdued"
     }) : null);
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         onClick: handleToastClick,
         onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: handleMouseLeave
+    }, onClick ? {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick(e);
+            }
+        }
+    } : {}), {
         children: [
             prefixContent && /*#__PURE__*/ _jsx("div", {
                 className: "Litho-ToastNotification__Prefix flex-none",
@@ -348,6 +421,6 @@ var closeButtonStyles = tv({
                 })
             })
         ]
-    });
+    }));
 }
 export default ToastNotification;

package/dist/esm/components/ToastProvider.js

@@ -96,10 +96,20 @@ var ToastContext = /*#__PURE__*/ createContext(null);
     return context;
 };
 /**
- * ToastProvider component that manages multiple toast notifications.
- * Handles stacking and positioning of multiple toasts.
+ * @component ToastProvider
+ *
+ * @description A context provider that manages the toast notification queue and renders the ARIA live region for screen reader announcements.
+ *
+ * @usage
+ * - DO: Wrap your app or page to enable toast notifications via the `useToast` hook.
+ * - DON'T: Use multiple ToastProviders in the same component tree.
+ *
+ * @accessibility
+ * - ToastProvider manages the toast container's ARIA live region for screen reader announcements.
+ *
+ * @alternative
+ * - If you need persistent in-page messages, use `Banner` instead of the toast system.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {React.ReactNode} props.children - Child components that can use the toast system.
  * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.defaultPosition='topRight'] - Default position for toasts.

package/dist/esm/components/Tooltip.js

@@ -86,7 +86,56 @@ import Stack from "./Stack.js";
 import List from "./List.js";
 import Icon from "./Icon.js";
 import { CircleInformationMajor } from "@shopify/polaris-icons";
-var styles = tv({
+/**
+ * @component Tooltip
+ *
+ * @description A floating text label that appears on hover or focus to provide brief supplementary information about an element.
+ *
+ * @usage
+ * - DO: Provide brief, non-essential supplementary info on hover or focus.
+ * - DON'T: Put essential or interactive content in tooltips (use Popover).
+ *
+ * @accessibility
+ * - Tooltip content is announced on focus; ensure trigger element is focusable.
+ * - Do not rely on hover-only access.
+ *
+ * @alternative
+ * - If you need interactive content in a floating panel, use `Popover`.
+ * - If you need persistent help text, use `Tip`.
+ *
+ * @param {Object} props - The props for the Tooltip component.
+ * @param {React.ReactNode} props.children - The content that triggers the tooltip on hover.
+ * @param {React.ReactNode | TooltipContentObject} props.content - The content displayed inside the tooltip. Can be either a React node or a structured content object.
+ * @param {boolean} [props.dismissOnMouseOut=true] - Whether the tooltip should be dismissed when the mouse leaves the activator.
+ * @param {boolean} [props.dismissOnActivatorClick=true] - Whether the tooltip should be dismissed when clicking the activator.
+ * @param {"above" | "below"} [props.preferredPosition="below"] - The preferred position of the tooltip relative to the activator.
+ * @param {"center" | "left" | "right"} [props.alignment="center"] - The alignment of the tooltip content.
+ * @param {number} [props.hoverDelay=0] - The delay (in milliseconds) before showing the tooltip on hover.
+ * @param {boolean} [props.hasUnderline=false] - Whether the activator should have an underline.
+ * @param {number | boolean} [props.zIndexOverride] - Override for the z-index of the tooltip.
+ * @param {"inline" | "inline-block" | "block"} [props.display="inline-block"] - The display property of the tooltip container.
+ * @param {string} [props.className] - Additional class name for the tooltip container.
+ *
+ * @returns {React.ReactElement} The rendered Tooltip component.
+ *
+ * @example
+ * // Basic usage with string content
+ * <Tooltip content="This is a tooltip">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Using structured content object
+ * <Tooltip content={{
+ *   heading: "Important Information",
+ *   content: [
+ *     { type: "paragraph", content: "This is a paragraph." },
+ *     { type: "list", content: ["Item 1", "Item 2", "Item 3"] }
+ *   ]
+ * }}>
+ *   <span>Hover for structured content</span>
+ * </Tooltip>
+ */ var styles = tv({
     base: "Litho-TooltipContainer relative w-auto h-auto",
     variants: {
         display: {
@@ -158,45 +207,6 @@ var arrowStyles = tv({
  * @typedef {Object} TooltipContentObject
  * @property {string} [heading] - Optional heading text for the tooltip
  * @property {TooltipContentItem[]} content - Array of content items to display in the tooltip
- */ /**
- * Tooltip component for displaying contextual information when hovering over an element.
- * The tooltip can be positioned above or below the activator with customizable alignment.
- * It includes optional underline styling and supports dynamic z-index overrides.
- *
- * @component
- *
- * @param {Object} props - The props for the Tooltip component.
- * @param {React.ReactNode} props.children - The content that triggers the tooltip on hover.
- * @param {React.ReactNode | TooltipContentObject} props.content - The content displayed inside the tooltip. Can be either a React node or a structured content object.
- * @param {boolean} [props.dismissOnMouseOut=true] - Whether the tooltip should be dismissed when the mouse leaves the activator.
- * @param {boolean} [props.dismissOnActivatorClick=true] - Whether the tooltip should be dismissed when clicking the activator.
- * @param {"above" | "below"} [props.preferredPosition="below"] - The preferred position of the tooltip relative to the activator.
- * @param {"center" | "left" | "right"} [props.alignment="center"] - The alignment of the tooltip content.
- * @param {number} [props.hoverDelay=0] - The delay (in milliseconds) before showing the tooltip on hover.
- * @param {boolean} [props.hasUnderline=false] - Whether the activator should have an underline.
- * @param {number | boolean} [props.zIndexOverride] - Override for the z-index of the tooltip.
- * @param {"inline" | "inline-block" | "block"} [props.display="inline-block"] - The display property of the tooltip container.
- * @param {string} [props.className] - Additional class name for the tooltip container.
- *
- * @returns {React.ReactElement} The rendered Tooltip component.
- *
- * @example
- * // Basic usage with string content
- * <Tooltip content="This is a tooltip">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * @example
- * // Using structured content object
- * <Tooltip content={{
- *   heading: "Important Information",
- *   content: [
- *     { type: "paragraph", content: "This is a paragraph." },
- *     { type: "list", content: ["Item 1", "Item 2", "Item 3"] }
- *   ]
- * }}>
- *   <span>Hover for structured content</span>
- * </Tooltip>
  */ function Tooltip() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_display = props.display, display = _props_display === void 0 ? "inline-block" : _props_display, children = props.children, content = props.content, _props_dismissOnMouseOut = props.dismissOnMouseOut, dismissOnMouseOut = _props_dismissOnMouseOut === void 0 ? true : _props_dismissOnMouseOut, _props_dismissOnActivatorClick = props.dismissOnActivatorClick, dismissOnActivatorClick = _props_dismissOnActivatorClick === void 0 ? true : _props_dismissOnActivatorClick, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_alignment = props.alignment, alignment = _props_alignment === void 0 ? "center" : _props_alignment, _props_hoverDelay = props.hoverDelay, hoverDelay = _props_hoverDelay === void 0 ? 0 : _props_hoverDelay, _props_hasUnderline = props.hasUnderline, hasUnderline = _props_hasUnderline === void 0 ? false : _props_hasUnderline, zIndexOverride = props.zIndexOverride, className = props.className;
@@ -303,7 +313,6 @@ var arrowStyles = tv({
             }, key);
         } else if (item.type == "list") {
             return /*#__PURE__*/ _jsx(Stack, {
-                inlineAlign: "start",
                 align: "start",
                 gap: "0",
                 children: /*#__PURE__*/ _jsx(List, {

package/dist/esm/components/TopBar.js

@@ -7,6 +7,19 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return 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_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -34,6 +47,45 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure 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();
 }
@@ -54,13 +106,21 @@ import Button from "./Button.js";
 import Popover from "./Popover.js";
 import Text from "./Text.js";
 import { useFrame } from "./Frame.js";
-var styles = tv({
-    base: "Litho-TopBar flex items-center h-[var(--litho-header-height)] border-b border-edge-subdued dark:border-edge-alt-subdued"
-});
 /**
- * TopBar component that displays a top navigation bar with a search trigger and a user menu.
+ * @component TopBar
+ *
+ * @description An application header bar that displays branding, navigation controls, and user actions at the top of the Frame.
+ *
+ * @usage
+ * - DO: Use as the application header with logo, search, and user actions.
+ * - DON'T: Use for page-level titles (use Page).
+ *
+ * @accessibility
+ * - Renders as a `<header>` landmark; ensure the logo link has an accessible label.
+ *
+ * @alternative
+ * - If you need a page title with actions, use `Page`. If you need a side navigation, use `Navigation`.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {React.ReactNode} [props.userMenu] - The user menu element.
  * @param {React.ReactNode} [props.searchTrigger] - The search trigger element.
@@ -68,7 +128,10 @@ var styles = tv({
  * @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 {JSX.Element} The rendered TopBar component.
- */ function TopBar() {
+ */ var styles = tv({
+    base: "Litho-TopBar flex items-center h-[var(--litho-header-height)] border-b border-edge-subdued dark:border-edge-alt-subdued"
+});
+function TopBar() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var hasNavigation = props.hasNavigation, userMenu = props.userMenu, searchTrigger = props.searchTrigger, alwaysShowUserMenuInTopBar = props.alwaysShowUserMenuInTopBar, headerAccessory = props.headerAccessory;
     var setShowMobileNavigation = useFrame().setShowMobileNavigation;
@@ -146,11 +209,22 @@ var activatorStyles = tv({
         if (!hasPopover) return;
         setShowPopover(!showPopover);
     };
-    var activator = /*#__PURE__*/ _jsxs("div", {
+    var activator = /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
         className: activatorStyles({
             interactive: hasPopover
         }),
-        onClick: handleActivatorClick,
+        onClick: handleActivatorClick
+    }, hasPopover ? {
+        role: "button",
+        tabIndex: 0,
+        "aria-expanded": showPopover,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleActivatorClick();
+            }
+        }
+    } : {}), {
         children: [
             image && /*#__PURE__*/ _jsx("div", {
                 className: "flex items-center justify-center shrink-0 w-8 h-8 rounded-md font-semibold text-xs",
@@ -174,7 +248,7 @@ var activatorStyles = tv({
                 ]
             })
         ]
-    });
+    }));
     if (!hasPopover) {
         return activator;
     }

package/dist/esm/components/VerticalStack.js

@@ -79,7 +79,36 @@ function _object_without_properties_loose(source, excluded) {
 }
 import { jsx as _jsx } from "react/jsx-runtime";
 import { tv } from "tailwind-variants";
-var styles = tv({
+/**
+ * @component VerticalStack
+ *
+ * @description A vertical flex layout component for stacking children in a column with consistent spacing and alignment.
+ *
+* @deprecated Use `Stack` instead. This component will be removed in a future release.
+ *
+ * @usage
+ * - DO: Stack elements vertically with consistent spacing.
+ * - DON'T: Use for horizontal layouts (use `HorizontalStack` instead).
+ *
+ * @accessibility
+ * - Maintains natural document flow; screen readers read content in DOM order.
+ *
+ * @alternative
+ * - If you need horizontal layout, use `HorizontalStack`.
+ * - If you need flexible direction, use `Stack`.
+ *
+ * @param {object} props - The properties for the VerticalStack component.
+ * @param {string} [props.as="div"] - The HTML tag or component to render as the root element.
+ * @param {React.ReactNode} [props.children] - The child elements to render within the stack.
+ * @param {string} [props.align] - Vertical alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
+ * @param {string} [props.inlineAlign] - Horizontal alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
+ * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap="none"] - Spacing between child elements. Semantic options: "none", "xs" (1), "sm" (2), "md" (4), "lg" (8). Numeric options: "0", "px", "0.5", "1", "2", "3", "4", "5", "6", "8", "10".
+ * @param {string} [props.id] - The id for the root element of the stack.
+ * @param {string} [props.className] - Additional CSS classes to append to the generated styles.
+ * @param {object} [props.restProps] - Any additional properties to spread onto the root element.
+ *
+ * @returns {JSX.Element} The rendered `VerticalStack` component.
+ */ var styles = tv({
     base: "Litho-VerticalStack flex flex-col",
     variants: {
         gap: {
@@ -116,21 +145,7 @@ var styles = tv({
         }
     }
 });
-/**
- * A flexible vertical stack component for consistent layout styling.
- *
- * @param {object} props - The properties for the VerticalStack component.
- * @param {string} [props.as="div"] - The HTML tag or component to render as the root element.
- * @param {React.ReactNode} [props.children] - The child elements to render within the stack.
- * @param {string} [props.align] - Vertical alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
- * @param {string} [props.inlineAlign] - Horizontal alignment of the stack content. Options: "start", "end", "center", "spaceBetween".
- * @param {('none'|'xs'|'sm'|'md'|'lg'|'0'|'px'|'0.5'|'1'|'2'|'3'|'4'|'5'|'6'|'8'|'10')} [props.gap="none"] - Spacing between child elements. Semantic options: "none", "xs" (1), "sm" (2), "md" (4), "lg" (8). Numeric options: "0", "px", "0.5", "1", "2", "3", "4", "5", "6", "8", "10".
- * @param {string} [props.id] - The id for the root element of the stack.
- * @param {string} [props.className] - Additional CSS classes to append to the generated styles.
- * @param {object} [props.restProps] - Any additional properties to spread onto the root element.
- *
- * @returns {JSX.Element} The rendered `VerticalStack` component.
- */ function VerticalStack() {
+function VerticalStack() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_as = props.as, as = _props_as === void 0 ? 'div' : _props_as, children = props.children, align = props.align, inlineAlign = props.inlineAlign, gap = props.gap, id = props.id, className = props.className, restProps = _object_without_properties(props, [
         "as",

package/dist/esm/index.js

@@ -1,5 +1,6 @@
 export { default as ActionList } from "./components/ActionList.js";
 export { default as AnnouncementBar } from "./components/AnnouncementBar.js";
+export { default as AnnouncementCard } from "./components/AnnouncementCard.js";
 export { default as AppProvider, useDarkMode } from "./components/AppProvider.js";
 export { default as Autocomplete } from "./components/Autocomplete.js";
 export { default as Badge } from "./components/Badge.js";
@@ -9,6 +10,8 @@ export { default as Button } from "./components/Button.js";
 export { default as ButtonGroup } from "./components/ButtonGroup.js";
 export { default as Card } from "./components/Card.js";
 export { default as Checkbox } from "./components/Checkbox.js";
+export { default as CheckboxCard } from "./components/CheckboxCard.js";
+export { default as CheckboxCardGroup } from "./components/CheckboxCardGroup.js";
 export { default as ChoiceList } from "./components/ChoiceList.js";
 export { default as Code } from "./components/Code.js";
 export { default as Collapsible } from "./components/Collapsible.js";
@@ -44,6 +47,8 @@ export { default as Pane } from "./components/Pane.js";
 export { default as Popover } from "./components/Popover.js";
 export { default as ProgressBar } from "./components/ProgressBar.js";
 export { default as RadioButton } from "./components/RadioButton.js";
+export { default as RadioButtonCard } from "./components/RadioButtonCard.js";
+export { default as RadioButtonCardGroup } from "./components/RadioButtonCardGroup.js";
 export { default as RangeSlider } from "./components/RangeSlider.js";
 export { default as ResourceList } from "./components/ResourceList.js";
 export { default as Select } from "./components/Select.js";
@@ -51,6 +56,7 @@ export { default as SkeletonText } from "./components/SkeletonText.js";
 export { default as Spinner } from "./components/Spinner.js";
 export { default as Stack } from "./components/Stack.js";
 export { default as Table } from "./components/Table.js";
+export { default as TabNavigation } from "./components/TabNavigation.js";
 export { default as Tabs } from "./components/Tabs.js";
 export { default as Tag } from "./components/Tag.js";
 export { default as Text } from "./components/Text.js";

package/dist/esm/playwright.config.js

@@ -0,0 +1,104 @@
+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 _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;
+}
+import { defineConfig, devices } from "@playwright/test";
+export default defineConfig({
+    testDir: './tests/visual',
+    // Run tests in parallel
+    fullyParallel: true,
+    // Fail the build on CI if you accidentally left test.only in the source code
+    forbidOnly: !!process.env.CI,
+    // Retry failed tests on CI
+    retries: process.env.CI ? 2 : 0,
+    // Limit parallel workers on CI
+    workers: process.env.CI ? 1 : undefined,
+    // Reporter configuration
+    reporter: process.env.CI ? 'github' : 'list',
+    // Shared settings for all projects
+    use: {
+        // Base URL for Storybook
+        baseURL: 'http://127.0.0.1:6006',
+        // Capture trace on failure
+        trace: 'on-first-retry'
+    },
+    // Snapshot naming - remove platform suffix for cross-platform baselines
+    snapshotPathTemplate: '{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
+    // Visual comparison settings
+    expect: {
+        toHaveScreenshot: {
+            // Allow differences for anti-aliasing and sub-pixel text positioning
+            maxDiffPixelRatio: 0.04,
+            // Animation settings
+            animations: 'disabled'
+        }
+    },
+    // Configure projects for major browsers
+    projects: [
+        {
+            name: 'chromium',
+            use: _object_spread_props(_object_spread({}, devices['Desktop Chrome']), {
+                // Consistent viewport
+                viewport: {
+                    width: 1280,
+                    height: 720
+                }
+            })
+        }
+    ],
+    // Web server configuration - start Storybook before running tests
+    webServer: {
+        command: 'npm run storybook -- --ci --quiet',
+        url: 'http://127.0.0.1:6006',
+        reuseExistingServer: !process.env.CI,
+        timeout: 120000
+    }
+});