@heymantle/litho 0.0.14 → 0.0.16

package/dist/esm/stories/Image.stories.js

@@ -189,7 +189,7 @@ export var BorderRadius = {
             children: [
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             width: "150px",
@@ -213,7 +213,7 @@ export var BorderRadius = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             width: "150px",
@@ -237,7 +237,7 @@ export var BorderRadius = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             width: "150px",
@@ -261,7 +261,7 @@ export var BorderRadius = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             width: "150px",
@@ -285,7 +285,7 @@ export var BorderRadius = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             width: "150px",
@@ -309,7 +309,7 @@ export var BorderRadius = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             width: "150px",
@@ -349,7 +349,7 @@ export var RoundedProp = {
             children: [
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             width: "150px",
@@ -372,7 +372,7 @@ export var RoundedProp = {
                 }),
                 /*#__PURE__*/ _jsxs(Stack, {
                     gap: "sm",
-                    inlineAlign: "center",
+                    align: "center",
                     children: [
                         /*#__PURE__*/ _jsx(Box, {
                             width: "150px",
@@ -609,8 +609,7 @@ export var ProfileCards = {
                 gap: "6",
                 children: team.map(function(member, index) {
                     return /*#__PURE__*/ _jsxs(Stack, {
-                        gap: "4",
-                        inlineAlign: "center",
+                        align: "center",
                         as: Box,
                         padding: "6",
                         borderWidth: "1",
@@ -633,7 +632,7 @@ export var ProfileCards = {
                             }),
                             /*#__PURE__*/ _jsxs(Stack, {
                                 gap: "xs",
-                                inlineAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Text, {
                                         variant: "headingSm",
@@ -680,8 +679,7 @@ export var ImageGallery = {
                 gap: "lg",
                 children: [
                     selectedImage && /*#__PURE__*/ _jsxs(Stack, {
-                        gap: "4",
-                        inlineAlign: "center",
+                        align: "center",
                         as: Box,
                         padding: "8",
                         background: "surface-neutral-subdued",
@@ -710,7 +708,6 @@ export var ImageGallery = {
                     /*#__PURE__*/ _jsx(Grid, {
                         columns: "auto-fit",
                         minItemWidth: "150px",
-                        gap: "4",
                         children: images.map(function(src, index) {
                             return /*#__PURE__*/ _jsx(Box, {
                                 height: "120px",
@@ -779,7 +776,7 @@ export var BannerImages = {
                                 },
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     gap: "sm",
-                                    inlineAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Text, {
                                             variant: "headingLg",

package/dist/esm/stories/InlineError.stories.js

@@ -517,7 +517,6 @@ export var DifferentContexts = {
                             }),
                             /*#__PURE__*/ _jsxs(Grid, {
                                 columns: 2,
-                                gap: "4",
                                 children: [
                                     /*#__PURE__*/ _jsxs("div", {
                                         children: [

package/dist/esm/stories/Layout.stories.js

@@ -8,6 +8,7 @@ import Button from "../components/Button.js";
 import TextField from "../components/TextField.js";
 import Checkbox from "../components/Checkbox.js";
 import Box from "../components/Box.js";
+import Page from "../components/Page.js";
 import Grid from "../components/Grid.js";
 export default {
     title: 'Litho/Layout',
@@ -30,6 +31,10 @@ export default {
         children: {
             control: false,
             description: 'Content to render inside the layout'
+        },
+        scrollSectionsIndependently: {
+            control: 'boolean',
+            description: 'Whether sections scroll independently within a viewport-height container'
         }
     }
 };
@@ -527,7 +532,6 @@ export var ProductManagement = {
                                     sm: 2,
                                     lg: 4
                                 },
-                                gap: "4",
                                 children: [
                                     /*#__PURE__*/ _jsx(TextField, {
                                         label: "Price",
@@ -562,7 +566,6 @@ export var ProductManagement = {
                                             sm: 2,
                                             lg: 4
                                         },
-                                        gap: "4",
                                         children: [
                                             /*#__PURE__*/ _jsx(TextField, {
                                                 label: "Weight",
@@ -633,3 +636,91 @@ export var ProductManagement = {
         }
     }
 };
+export var ScrollSectionsIndependently = {
+    render: function() {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "@container/main",
+            children: /*#__PURE__*/ _jsx(Page, {
+                title: "Independent Scrolling Demo",
+                children: /*#__PURE__*/ _jsxs(Layout, {
+                    scrollSectionsIndependently: true,
+                    children: [
+                        /*#__PURE__*/ _jsx(Layout.Section, {
+                            children: /*#__PURE__*/ _jsx(Card, {
+                                title: "Main Content",
+                                padded: true,
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            variant: "headingLg",
+                                            children: "Long Article"
+                                        }),
+                                        Array.from({
+                                            length: 25
+                                        }, function(_, i) {
+                                            return /*#__PURE__*/ _jsxs("div", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Box, {
+                                                        paddingBlockEnd: "2",
+                                                        children: /*#__PURE__*/ _jsxs(Text, {
+                                                            variant: "headingSm",
+                                                            children: [
+                                                                "Section ",
+                                                                i + 1
+                                                            ]
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Text, {
+                                                        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                                                    })
+                                                ]
+                                            }, i);
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Layout.Section, {
+                            sidebar: true,
+                            children: /*#__PURE__*/ _jsx(Card, {
+                                title: "Sidebar Navigation",
+                                padded: true,
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            variant: "headingSm",
+                                            children: "Navigation"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Stack, {
+                                            gap: "sm",
+                                            children: Array.from({
+                                                length: 30
+                                            }, function(_, i) {
+                                                return /*#__PURE__*/ _jsxs(Button, {
+                                                    size: "slim",
+                                                    plain: true,
+                                                    textAlign: "left",
+                                                    children: [
+                                                        "Menu Item ",
+                                                        i + 1
+                                                    ]
+                                                }, i);
+                                            })
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Layout with scrollSectionsIndependently. At the @lg breakpoint, the layout caps its height to the viewport and each section scrolls its own content independently. On mobile (stacked), sections flow normally.'
+            }
+        }
+    }
+};

package/dist/esm/stories/LayoutSection.stories.js

@@ -277,7 +277,6 @@ export var SlimSidebar = {
                                                 xs: 1,
                                                 md: 3
                                             },
-                                            gap: "4",
                                             children: [
                                                 /*#__PURE__*/ _jsx(Box, {
                                                     padding: "4",
@@ -568,7 +567,6 @@ export var SettingsLayout = {
                                         children: [
                                             /*#__PURE__*/ _jsxs(Grid, {
                                                 columns: 2,
-                                                gap: "4",
                                                 children: [
                                                     /*#__PURE__*/ _jsxs(Stack, {
                                                         gap: "sm",
@@ -658,7 +656,6 @@ export var SettingsLayout = {
                                             }),
                                             /*#__PURE__*/ _jsxs(Grid, {
                                                 columns: 2,
-                                                gap: "4",
                                                 children: [
                                                     /*#__PURE__*/ _jsxs(Stack, {
                                                         gap: "sm",
@@ -775,7 +772,7 @@ export var SettingsLayout = {
                                         children: [
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
-                                                align: "space-between",
+                                                justify: "between",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
                                                         variant: "bodySm",
@@ -789,7 +786,7 @@ export var SettingsLayout = {
                                             }),
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
-                                                align: "space-between",
+                                                justify: "between",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
                                                         variant: "bodySm",
@@ -806,7 +803,7 @@ export var SettingsLayout = {
                                             }),
                                             /*#__PURE__*/ _jsxs(Stack, {
                                                 horizontal: true,
-                                                align: "space-between",
+                                                justify: "between",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
                                                         variant: "bodySm",
@@ -851,13 +848,12 @@ export var DashboardLayout = {
                                         xs: 1,
                                         md: 3
                                     },
-                                    gap: "4",
                                     children: [
                                         /*#__PURE__*/ _jsx(Card, {
                                             padded: true,
                                             children: /*#__PURE__*/ _jsxs(Stack, {
                                                 gap: "xs",
-                                                inlineAlign: "center",
+                                                align: "center",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
                                                         variant: "headingLg",
@@ -875,7 +871,7 @@ export var DashboardLayout = {
                                             padded: true,
                                             children: /*#__PURE__*/ _jsxs(Stack, {
                                                 gap: "xs",
-                                                inlineAlign: "center",
+                                                align: "center",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
                                                         variant: "headingLg",
@@ -893,7 +889,7 @@ export var DashboardLayout = {
                                             padded: true,
                                             children: /*#__PURE__*/ _jsxs(Stack, {
                                                 gap: "xs",
-                                                inlineAlign: "center",
+                                                align: "center",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Text, {
                                                         variant: "headingLg",
@@ -913,8 +909,8 @@ export var DashboardLayout = {
                                     title: "Performance Over Time",
                                     padded: true,
                                     children: /*#__PURE__*/ _jsx(Stack, {
-                                        blockAlign: "center",
-                                        inlineAlign: "center",
+                                        justify: "center",
+                                        align: "center",
                                         as: Box,
                                         padding: "12",
                                         height: "300px",
@@ -941,7 +937,7 @@ export var DashboardLayout = {
                                                 borderRadius: "1",
                                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                                     horizontal: true,
-                                                    align: "space-between",
+                                                    justify: "between",
                                                     children: [
                                                         /*#__PURE__*/ _jsxs(Text, {
                                                             children: [
@@ -1009,7 +1005,7 @@ export var DashboardLayout = {
                                                     /*#__PURE__*/ _jsxs(Stack, {
                                                         horizontal: true,
                                                         gap: "sm",
-                                                        blockAlign: "center",
+                                                        align: "center",
                                                         children: [
                                                             /*#__PURE__*/ _jsx("input", {
                                                                 type: "checkbox",
@@ -1024,7 +1020,7 @@ export var DashboardLayout = {
                                                     /*#__PURE__*/ _jsxs(Stack, {
                                                         horizontal: true,
                                                         gap: "sm",
-                                                        blockAlign: "center",
+                                                        align: "center",
                                                         children: [
                                                             /*#__PURE__*/ _jsx("input", {
                                                                 type: "checkbox",
@@ -1039,7 +1035,7 @@ export var DashboardLayout = {
                                                     /*#__PURE__*/ _jsxs(Stack, {
                                                         horizontal: true,
                                                         gap: "sm",
-                                                        blockAlign: "center",
+                                                        align: "center",
                                                         children: [
                                                             /*#__PURE__*/ _jsx("input", {
                                                                 type: "checkbox"
@@ -1118,7 +1114,6 @@ export var ResponsiveBehavior = {
                                                 md: 3,
                                                 lg: 6
                                             },
-                                            gap: "4",
                                             children: Array.from({
                                                 length: 6
                                             }, function(_, i) {
@@ -1127,7 +1122,7 @@ export var ResponsiveBehavior = {
                                                     background: "bg-surface-info-subdued",
                                                     borderRadius: "1",
                                                     children: /*#__PURE__*/ _jsx(Stack, {
-                                                        inlineAlign: "center",
+                                                        align: "center",
                                                         children: /*#__PURE__*/ _jsxs(Text, {
                                                             children: [
                                                                 "Item ",

package/dist/esm/stories/List.stories.js

@@ -334,7 +334,7 @@ export var WithIcons = {
                     children: /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
                         gap: "sm",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Icon, {
                                 source: MobileAcceptMajor,
@@ -351,7 +351,7 @@ export var WithIcons = {
                     children: /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
                         gap: "sm",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Icon, {
                                 source: AlertMinor,
@@ -368,7 +368,7 @@ export var WithIcons = {
                     children: /*#__PURE__*/ _jsxs(Stack, {
                         horizontal: true,
                         gap: "sm",
-                        blockAlign: "center",
+                        align: "center",
                         children: [
                             /*#__PURE__*/ _jsx(Icon, {
                                 source: InfoMinor,
@@ -523,15 +523,15 @@ export var ChecklistExample = {
                             children: /*#__PURE__*/ _jsxs(Stack, {
                                 horizontal: true,
                                 gap: "sm",
-                                blockAlign: "center",
+                                align: "center",
                                 children: [
                                     /*#__PURE__*/ _jsx(Box, {
                                         minInlineSize: "20px",
                                         minBlockSize: "20px",
                                         borderRadius: "full",
                                         background: item.completed ? "success" : "neutral",
-                                        inlineAlign: "center",
-                                        blockAlign: "center",
+                                        align: "center",
+                                        justify: "center",
                                         style: {
                                             display: "flex"
                                         },
@@ -595,8 +595,8 @@ export var NavigationMenu = {
                     /*#__PURE__*/ _jsx(List.Item, {
                         children: /*#__PURE__*/ _jsxs(Stack, {
                             horizontal: true,
-                            align: "space-between",
-                            blockAlign: "center",
+                            justify: "between",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     children: "Dashboard"
@@ -612,8 +612,8 @@ export var NavigationMenu = {
                     /*#__PURE__*/ _jsx(List.Item, {
                         children: /*#__PURE__*/ _jsxs(Stack, {
                             horizontal: true,
-                            align: "space-between",
-                            blockAlign: "center",
+                            justify: "between",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     children: "Projects"
@@ -629,8 +629,8 @@ export var NavigationMenu = {
                     /*#__PURE__*/ _jsx(List.Item, {
                         children: /*#__PURE__*/ _jsxs(Stack, {
                             horizontal: true,
-                            align: "space-between",
-                            blockAlign: "center",
+                            justify: "between",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     children: "Team Members"
@@ -646,8 +646,8 @@ export var NavigationMenu = {
                     /*#__PURE__*/ _jsx(List.Item, {
                         children: /*#__PURE__*/ _jsxs(Stack, {
                             horizontal: true,
-                            align: "space-between",
-                            blockAlign: "center",
+                            justify: "between",
+                            align: "center",
                             children: [
                                 /*#__PURE__*/ _jsx(Text, {
                                     children: "Settings"
@@ -784,7 +784,7 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Icon, {
                                             source: MobileAcceptMajor,
@@ -801,7 +801,7 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Icon, {
                                             source: MobileAcceptMajor,
@@ -818,7 +818,7 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Icon, {
                                             source: MobileAcceptMajor,
@@ -835,13 +835,11 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Box, {
                                             minInlineSize: "16px",
                                             minBlockSize: "16px",
-                                            inlineAlign: "center",
-                                            blockAlign: "center",
                                             style: {
                                                 display: "flex",
                                                 color: "#999",
@@ -860,13 +858,11 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Box, {
                                             minInlineSize: "16px",
                                             minBlockSize: "16px",
-                                            inlineAlign: "center",
-                                            blockAlign: "center",
                                             style: {
                                                 display: "flex",
                                                 color: "#999",
@@ -895,7 +891,7 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Icon, {
                                             source: MobileAcceptMajor,
@@ -912,7 +908,7 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Icon, {
                                             source: MobileAcceptMajor,
@@ -929,7 +925,7 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Icon, {
                                             source: MobileAcceptMajor,
@@ -946,7 +942,7 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Icon, {
                                             source: MobileAcceptMajor,
@@ -963,7 +959,7 @@ export var ComparisonList = {
                                 children: /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,
                                     gap: "sm",
-                                    blockAlign: "center",
+                                    align: "center",
                                     children: [
                                         /*#__PURE__*/ _jsx(Icon, {
                                             source: MobileAcceptMajor,

package/dist/esm/stories/Listbox.stories.js

@@ -534,8 +534,8 @@ export var FilterOptions = {
                                     borderRadius: "base",
                                     children: /*#__PURE__*/ _jsxs(Stack, {
                                         horizontal: true,
-                                        blockAlign: "center",
-                                        inlineAlign: "space-between",
+                                        align: "center",
+                                        justify: "between",
                                         children: [
                                             /*#__PURE__*/ _jsx(Text, {
                                                 children: item.name