@jsenv/navi 0.9.0 → 0.9.2

package/dist/jsenv_navi.js

@@ -18611,7 +18611,8 @@ const FlexDirectionContext = createContext();
  * @param {string|number} [props.paddingBottom] - Bottom padding
  * @param {"start"|"center"|"end"|"stretch"} [props.alignX] - Horizontal alignment
  * @param {"start"|"center"|"end"|"stretch"} [props.alignY] - Vertical alignment
- * @param {boolean} [props.expand] - Whether element should expand to fill available space
+ * @param {boolean} [props.expandX] - Whether element should expand horizontally to fill available space
+ * @param {boolean} [props.expandY] - Whether element should expand vertically to fill available space
  * @returns {Object} Object with categorized styles: { margin, padding, alignment, expansion, all }
  */
 const useLayoutStyle = (props) => {
@@ -18776,13 +18777,32 @@ const useLayoutStyle = (props) => {
   {
     const expand = props.expand;
     delete props.expand;
-    if (expand) {
-      if (flexDirection === "row") {
-        expansionStyle.flexGrow = 1;
-      } else if (flexDirection === "column") {
-        expansionStyle.flexGrow = 1;
-      } else {
-        expansionStyle.width = "100%";
+
+    {
+      const expandX = props.expandX || expand;
+      delete props.expandX;
+      if (expandX) {
+        if (flexDirection === "row") {
+          expansionStyle.flexGrow = 1; // Grow horizontally in row
+        } else if (flexDirection === "column") {
+          expansionStyle.width = "100%"; // Take full width in column
+        } else {
+          expansionStyle.width = "100%"; // Take full width outside flex
+        }
+      }
+    }
+
+    {
+      const expandY = props.expandY || expand;
+      delete props.expandY;
+      if (expandY) {
+        if (flexDirection === "row") {
+          expansionStyle.height = "100%"; // Take full height in row
+        } else if (flexDirection === "column") {
+          expansionStyle.flexGrow = 1; // Grow vertically in column
+        } else {
+          expansionStyle.height = "100%"; // Take full height outside flex
+        }
       }
     }
   }
@@ -22276,6 +22296,7 @@ const FormBasic = forwardRef((props, ref) => {
   const {
     readOnly,
     loading,
+    style,
     children,
     ...rest
   } = props;
@@ -22292,9 +22313,14 @@ const FormBasic = forwardRef((props, ref) => {
       loading
     };
   }, [loading]);
+  const {
+    all
+  } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(all, style);
   return jsx("form", {
     ...rest,
     ref: innerRef,
+    style: innerStyle,
     onReset: e => {
       // browser would empty all fields to their default values (likely empty/unchecked)
       // we want to reset to the last known external state instead
@@ -28210,12 +28236,13 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   }
 `;
 const Text = ({
-  children,
   color,
   bold,
   italic,
   underline,
+  size,
   style,
+  children,
   ...rest
 }) => {
   const {
@@ -28226,6 +28253,7 @@ const Text = ({
     color,
     fontWeight: bold ? "bold" : undefined,
     fontStyle: italic ? "italic" : undefined,
+    fontSize: size,
     textDecoration: underline ? "underline" : undefined
   }, style);
   return jsx("span", {
@@ -28235,23 +28263,21 @@ const Text = ({
     children: children
   });
 };
-const alignYMapping = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end"
-};
 const Icon = ({
-  alignY,
+  color,
+  size,
   style,
   children,
   ...rest
 }) => {
-  const innerStyle = {
-    ...style
-  };
-  if (alignY !== "center") {
-    innerStyle["--align-y"] = alignYMapping[alignY];
-  }
+  const {
+    all
+  } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle({
+    ...all,
+    color,
+    fontSize: size
+  }, style);
   return jsx("span", {
     ...rest,
     className: "navi_icon",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {
     "type": "git",

package/src/components/field/form.jsx

@@ -25,6 +25,8 @@ import {
 import { renderActionableComponent } from "../action_execution/render_actionable_component.jsx";
 import { useActionBoundToOneParam } from "../action_execution/use_action.js";
 import { useExecuteAction } from "../action_execution/use_execute_action.js";
+import { useLayoutStyle } from "../layout/use_layout_style.js";
+import { withPropsStyle } from "../props_composition/with_props_style.js";
 import { collectFormElementValues } from "./collect_form_element_values.js";
 import {
   useActionEvents,
@@ -75,7 +77,7 @@ export const Form = forwardRef((props, ref) => {
 
 const FormBasic = forwardRef((props, ref) => {
   const uiStateController = useContext(UIStateControllerContext);
-  const { readOnly, loading, children, ...rest } = props;
+  const { readOnly, loading, style, children, ...rest } = props;
   const innerRef = useRef();
   useImperativeHandle(ref, () => innerRef.current);
 
@@ -90,10 +92,14 @@ const FormBasic = forwardRef((props, ref) => {
     return { loading };
   }, [loading]);
 
+  const { all } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(all, style);
+
   return (
     <form
       {...rest}
       ref={innerRef}
+      style={innerStyle}
       onReset={(e) => {
         // browser would empty all fields to their default values (likely empty/unchecked)
         // we want to reset to the last known external state instead

package/src/components/layout/demos/{demo_use_layout_style_buttons.html → demo_layout_style_buttons.html}

@@ -64,33 +64,118 @@
             </p>
 
             <div className="demo-container">
-              <h3>1. Button with Expand in FlexRow</h3>
+              <h3>1. Button ExpandX - Horizontal Expansion Only</h3>
               <div className="visual-container">
+                <h4>In FlexRow (grows horizontally)</h4>
                 <FlexRow gap="10px">
                   <Button>Fixed</Button>
-                  <Button expand>Expanding Button</Button>
+                  <Button expandX>ExpandX Button</Button>
                   <Button>Fixed</Button>
                 </FlexRow>
+
+                <h4>In FlexColumn (takes full width)</h4>
+                <FlexColumn gap="10px" style={{ height: "150px" }}>
+                  <Button>Normal Width</Button>
+                  <Button expandX>Full Width Button</Button>
+                  <Button>Normal Width</Button>
+                </FlexColumn>
               </div>
             </div>
 
             <div className="demo-container">
-              <h3>2. Button with Expand in FlexColumn</h3>
+              <h3>2. Button ExpandY - Vertical Expansion Only</h3>
               <div className="visual-container">
+                <h4>In FlexRow (takes full height)</h4>
+                <FlexRow gap="10px" style={{ height: "100px" }}>
+                  <Button>Normal Height</Button>
+                  <Button expandY>Full Height Button</Button>
+                  <Button>Normal Height</Button>
+                </FlexRow>
+
+                <h4>In FlexColumn (grows vertically)</h4>
                 <FlexColumn gap="10px" style={{ height: "200px" }}>
-                  <Button>Fixed Button</Button>
-                  <Button expand>Expanding Button (height)</Button>
-                  <Button>Fixed Button</Button>
+                  <Button>Fixed</Button>
+                  <Button expandY>ExpandY Button</Button>
+                  <Button>Fixed</Button>
+                </FlexColumn>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>3. Button ExpandX + ExpandY - Both Axes</h3>
+              <div className="visual-container">
+                <h4>In FlexRow (grows horizontally, full height)</h4>
+                <FlexRow gap="10px" style={{ height: "80px" }}>
+                  <Button>Fixed</Button>
+                  <Button expandX expandY>
+                    Both Axes
+                  </Button>
+                  <Button>Fixed</Button>
+                </FlexRow>
+
+                <h4>In FlexColumn (full width, grows vertically)</h4>
+                <FlexColumn gap="10px" style={{ height: "150px" }}>
+                  <Button>Fixed</Button>
+                  <Button expandX expandY>
+                    Both Axes
+                  </Button>
+                  <Button>Fixed</Button>
+                </FlexColumn>
+              </div>
+            </div>
+
+            <div className="demo-container">
+              <h3>4. Precise Control Comparison</h3>
+              <div className="visual-container">
+                <FlexColumn gap="15px">
+                  <div>
+                    <h4>FlexRow with different expansions</h4>
+                    <FlexRow
+                      gap="10px"
+                      style={{
+                        height: "60px",
+                        background: "#f8f9fa",
+                        padding: "10px",
+                      }}
+                    >
+                      <Button>No Expand</Button>
+                      <Button expandX>ExpandX Only</Button>
+                      <Button expandY>ExpandY Only</Button>
+                      <Button expandX expandY>
+                        Both
+                      </Button>
+                    </FlexRow>
+                  </div>
+
+                  <div>
+                    <h4>FlexColumn with different expansions</h4>
+                    <FlexColumn
+                      gap="10px"
+                      style={{
+                        height: "200px",
+                        background: "#f8f9fa",
+                        padding: "10px",
+                      }}
+                    >
+                      <Button>No Expand</Button>
+                      <Button expandX>ExpandX Only</Button>
+                      <Button expandY>ExpandY Only</Button>
+                      <Button expandX expandY>
+                        Both
+                      </Button>
+                    </FlexColumn>
+                  </div>
                 </FlexColumn>
               </div>
             </div>
 
             <div className="demo-container">
-              <h3>3. Button with Expand outside Flex context</h3>
+              <h3>5. Outside Flex Context</h3>
               <div className="visual-container">
                 <div
                   style={{
                     width: "300px",
+                    height: "150px",
                     border: "1px solid #ccc",
                     padding: "10px",
                   }}
@@ -98,26 +183,32 @@
                   <Button>Normal Button</Button>
                   <br />
                   <br />
-                  <Button expand>
-                    Expanding Button (should take full width)
+                  <Button expandX>ExpandX (full width)</Button>
+                  <br />
+                  <br />
+                  <Button expandY>ExpandY (full height)</Button>
+                  <br />
+                  <br />
+                  <Button expandX expandY>
+                    Both (full width & height)
                   </Button>
                 </div>
               </div>
             </div>
 
             <div className="demo-container">
-              <h3>4. Multiple Expand Buttons</h3>
+              <h3>6. Multiple Expand Buttons</h3>
               <div className="visual-container">
                 <FlexRow gap="10px">
-                  <Button expand>Expand 1</Button>
-                  <Button expand>Expand 2</Button>
-                  <Button expand>Expand 3</Button>
+                  <Button expandX>ExpandX 1</Button>
+                  <Button expandX>ExpandX 2</Button>
+                  <Button expandX>ExpandX 3</Button>
                 </FlexRow>
               </div>
             </div>
 
             <div className="demo-container">
-              <h3>5. Button Spacing - Margins</h3>
+              <h3>7. Button Spacing - Margins</h3>
               <div className="visual-container">
                 <FlexColumn gap="5px">
                   <Button margin="10px">Margin All Sides</Button>
@@ -143,7 +234,7 @@
             </div>
 
             <div className="demo-container">
-              <h3>7. Button AlignX Test: FlexRow + alignX="end"</h3>
+              <h3>8. Button AlignX Test: FlexRow + alignX="end"</h3>
               <div className="visual-container">
                 <div className="bounded">
                   <FlexRow gap="10px" style={{ height: "100%" }}>
@@ -155,12 +246,12 @@
             </div>
 
             <div className="demo-container">
-              <h3>8. Combined Spacing and Expand</h3>
+              <h3>9. Combined Spacing and ExpandX</h3>
               <div className="visual-container">
                 <FlexRow gap="10px">
                   <Button>Label</Button>
-                  <Button expand marginY="5px" paddingX="20px">
-                    Margin + Padding + Expand
+                  <Button expandX marginY="5px" paddingX="20px">
+                    Margin + Padding + ExpandX
                   </Button>
                   <Button>End</Button>
                 </FlexRow>
@@ -168,20 +259,20 @@
             </div>
 
             <div className="demo-container">
-              <h3>9. Button Toolbar Layout</h3>
+              <h3>10. Button Toolbar Layout</h3>
               <div className="visual-container">
                 <FlexRow gap="10px">
                   <Button>New</Button>
                   <Button>Open</Button>
                   <Button>Save</Button>
-                  <Button expand>Status Message Area</Button>
+                  <Button expandX>Status Message Area</Button>
                   <Button alignX="end">Settings</Button>
                 </FlexRow>
               </div>
             </div>
 
             <div className="demo-container">
-              <h3>10. Button Group with Various Alignments</h3>
+              <h3>11. Button Group with Various Alignments</h3>
               <div className="visual-container">
                 <FlexColumn gap="10px">
                   <FlexRow gap="10px">
@@ -191,7 +282,7 @@
                   </FlexRow>
 
                   <FlexRow gap="10px">
-                    <Button expand>Primary Action</Button>
+                    <Button expandX>Primary Action</Button>
                     <Button>Cancel</Button>
                   </FlexRow>
 
@@ -204,7 +295,7 @@
             </div>
 
             <div className="demo-container">
-              <h3>11. Card Layout with Button Actions</h3>
+              <h3>12. Card Layout with Button Actions</h3>
               <div className="visual-container">
                 <div
                   style={{
@@ -220,7 +311,7 @@
                   </p>
 
                   <FlexRow gap="10px">
-                    <Button expand>Primary Action</Button>
+                    <Button expandX>Primary Action</Button>
                     <Button alignX="end">More</Button>
                   </FlexRow>
                 </div>
@@ -228,12 +319,12 @@
             </div>
 
             <div className="demo-container">
-              <h3>12. Navigation Button Layout</h3>
+              <h3>13. Navigation Button Layout</h3>
               <div className="visual-container">
                 <FlexColumn gap="15px">
                   <FlexRow gap="10px">
                     <Button>Home</Button>
-                    <Button expand>Current Page Title</Button>
+                    <Button expandX>Current Page Title</Button>
                     <Button alignX="end">Profile</Button>
                   </FlexRow>
 

package/src/components/layout/demos/{demo_use_layout_style.html → demo_layout_style_input.html}

@@ -68,7 +68,7 @@
               <div className="visual-container">
                 <FlexRow gap="10px">
                   <Button>Start</Button>
-                  <Input placeholder="Expanding input" expand />
+                  <Input placeholder="Expanding input" expandX />
                   <Button>End</Button>
                 </FlexRow>
               </div>
@@ -79,7 +79,7 @@
               <div className="visual-container">
                 <FlexColumn gap="10px" style={{ height: "200px" }}>
                   <Input placeholder="Fixed input" />
-                  <Input placeholder="Expanding input (height)" expand />
+                  <Input placeholder="Expanding input (height)" expandY />
                   <Input placeholder="Fixed input" />
                 </FlexColumn>
               </div>

package/src/components/layout/use_layout_style.js

@@ -35,7 +35,8 @@ import { FlexDirectionContext } from "./layout_context.jsx";
  * @param {string|number} [props.paddingBottom] - Bottom padding
  * @param {"start"|"center"|"end"|"stretch"} [props.alignX] - Horizontal alignment
  * @param {"start"|"center"|"end"|"stretch"} [props.alignY] - Vertical alignment
- * @param {boolean} [props.expand] - Whether element should expand to fill available space
+ * @param {boolean} [props.expandX] - Whether element should expand horizontally to fill available space
+ * @param {boolean} [props.expandY] - Whether element should expand vertically to fill available space
  * @returns {Object} Object with categorized styles: { margin, padding, alignment, expansion, all }
  */
 export const useLayoutStyle = (props) => {
@@ -200,13 +201,32 @@ export const useLayoutStyle = (props) => {
   expand: {
     const expand = props.expand;
     delete props.expand;
-    if (expand) {
-      if (flexDirection === "row") {
-        expansionStyle.flexGrow = 1;
-      } else if (flexDirection === "column") {
-        expansionStyle.flexGrow = 1;
-      } else {
-        expansionStyle.width = "100%";
+
+    expandX: {
+      const expandX = props.expandX || expand;
+      delete props.expandX;
+      if (expandX) {
+        if (flexDirection === "row") {
+          expansionStyle.flexGrow = 1; // Grow horizontally in row
+        } else if (flexDirection === "column") {
+          expansionStyle.width = "100%"; // Take full width in column
+        } else {
+          expansionStyle.width = "100%"; // Take full width outside flex
+        }
+      }
+    }
+
+    expandY: {
+      const expandY = props.expandY || expand;
+      delete props.expandY;
+      if (expandY) {
+        if (flexDirection === "row") {
+          expansionStyle.height = "100%"; // Take full height in row
+        } else if (flexDirection === "column") {
+          expansionStyle.flexGrow = 1; // Grow vertically in column
+        } else {
+          expansionStyle.height = "100%"; // Take full height outside flex
+        }
       }
     }
   }

package/src/components/text/text.jsx

@@ -25,12 +25,13 @@ import.meta.css = /* css */ `
 `;
 
 export const Text = ({
-  children,
   color,
   bold,
   italic,
   underline,
+  size,
   style,
+  children,
   ...rest
 }) => {
   const { all } = useLayoutStyle(rest);
@@ -40,6 +41,7 @@ export const Text = ({
       color,
       fontWeight: bold ? "bold" : undefined,
       fontStyle: italic ? "italic" : undefined,
+      fontSize: size,
       textDecoration: underline ? "underline" : undefined,
     },
     style,
@@ -52,16 +54,16 @@ export const Text = ({
   );
 };
 
-const alignYMapping = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end",
-};
-export const Icon = ({ alignY, style, children, ...rest }) => {
-  const innerStyle = { ...style };
-  if (alignY !== "center") {
-    innerStyle["--align-y"] = alignYMapping[alignY];
-  }
+export const Icon = ({ color, size, style, children, ...rest }) => {
+  const { all } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(
+    {
+      ...all,
+      color,
+      fontSize: size,
+    },
+    style,
+  );
 
   return (
     <span {...rest} className="navi_icon" style={innerStyle}>