@jsenv/navi 0.9.1 → 0.9.3

package/dist/jsenv_navi.js

@@ -22296,6 +22296,7 @@ const FormBasic = forwardRef((props, ref) => {
   const {
     readOnly,
     loading,
+    style,
     children,
     ...rest
   } = props;
@@ -22312,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
@@ -22662,7 +22668,6 @@ const SelectControlled = forwardRef((props, ref) => {
   const selectElement = jsx("select", {
     className: "navi_select",
     ref: innerRef,
-    "data-field": "",
     "data-readonly": readOnly && !disabled ? "" : undefined,
     onKeyDown: e => {
       if (readOnly) {
@@ -24289,49 +24294,124 @@ const createSelectionKeyboardShortcuts = (selectionController, {
   }];
 };
 
+installImportMetaCss(import.meta);import.meta.css = /* css */`
+  :root {
+    --navi-icon-align-y: center;
+  }
+
+  .navi_text {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.1em;
+  }
+
+  .navi_icon {
+    --align-y: var(--navi-icon-align-y, center);
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    align-self: var(--align-y);
+    line-height: 1em;
+  }
+`;
+const useTypographyStyle = props => {
+  const color = props.color;
+  const bold = props.bold;
+  const italic = props.italic;
+  const underline = props.underline;
+  const size = props.size;
+  delete props.color;
+  delete props.bold;
+  delete props.italic;
+  delete props.underline;
+  delete props.size;
+  return {
+    color,
+    fontWeight: bold ? "bold" : bold === undefined ? undefined : "normal",
+    fontStyle: italic ? "italic" : italic === undefined ? undefined : "normal",
+    fontSize: size,
+    textDecoration: underline ? "underline" : underline === undefined ? undefined : "none"
+  };
+};
+const Text = ({
+  style,
+  children,
+  ...rest
+}) => {
+  const {
+    all
+  } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle({
+    ...all,
+    ...useTypographyStyle(rest)
+  }, style);
+  return jsx("span", {
+    ...rest,
+    className: "navi_text",
+    style: innerStyle,
+    children: children
+  });
+};
+const Icon = ({
+  style,
+  children,
+  ...rest
+}) => {
+  const {
+    all
+  } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle({
+    ...all,
+    ...useTypographyStyle(rest)
+  }, style);
+  return jsx("span", {
+    ...rest,
+    className: "navi_icon",
+    style: innerStyle,
+    children: children
+  });
+};
+
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .navi_link {
     border-radius: 2px;
   }
-
+  /* Focus */
   .navi_link:focus {
     position: relative;
     z-index: 1; /* Ensure focus outline is above other elements */
   }
-
-  .navi_link[data-readonly] > *,
-  .navi_link[inert] > * {
-    opacity: 0.5;
-  }
-
-  .navi_link[inert] {
-    pointer-events: none;
+  /* Visited */
+  .navi_link[data-visited] {
+    color: light-dark(#6a1b9a, #ab47bc);
   }
-
+  /* Selected */
   .navi_link[aria-selected] {
     position: relative;
   }
-
+  .navi_link[aria-selected="true"] {
+    background-color: light-dark(#bbdefb, #2563eb);
+  }
   .navi_link[aria-selected] input[type="checkbox"] {
     position: absolute;
     opacity: 0;
   }
-
-  /* Visual feedback for selected state */
-  .navi_link[aria-selected="true"] {
-    background-color: light-dark(#bbdefb, #2563eb);
-  }
-
+  /* Active */
   .navi_link[data-active] {
     font-weight: bold;
   }
-
-  .navi_link[data-visited] {
-    color: light-dark(#6a1b9a, #ab47bc);
+  /* Readonly */
+  .navi_link[data-readonly] > * {
+    opacity: 0.5;
   }
-
-  .navi_link[data-no-text-decoration] {
-    text-decoration: none;
+  /* Disabled */
+  .navi_link[inert] {
+    pointer-events: none;
+  }
+  .navi_link[inert] > * {
+    opacity: 0.5;
   }
 `;
 const Link = forwardRef((props, ref) => {
@@ -24383,7 +24463,10 @@ const LinkPlain = forwardRef((props, ref) => {
   const {
     all
   } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(all, style);
+  const innerStyle = withPropsStyle({
+    ...all,
+    ...useTypographyStyle(rest)
+  }, style);
   return jsx(LoadableInlineElement, {
     loading: loading,
     color: "light-dark(#355fcc, #3b82f6)",
@@ -24395,7 +24478,7 @@ const LinkPlain = forwardRef((props, ref) => {
       style: innerStyle,
       "aria-busy": loading,
       inert: disabled,
-      "data-field": "",
+      "data-disabled": disabled ? "" : undefined,
       "data-readonly": readOnly ? "" : undefined,
       "data-active": active ? "" : undefined,
       "data-visited": visited || isVisited ? "" : undefined,
@@ -28207,79 +28290,6 @@ const Overflow = ({
   });
 };
 
-installImportMetaCss(import.meta);import.meta.css = /* css */`
-  :root {
-    --navi-icon-align-y: center;
-  }
-
-  .navi_text {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.1em;
-  }
-
-  .navi_icon {
-    --align-y: var(--navi-icon-align-y, center);
-
-    display: inline-flex;
-    width: 1em;
-    height: 1em;
-    flex-shrink: 0;
-    align-self: var(--align-y);
-    line-height: 1em;
-  }
-`;
-const Text = ({
-  children,
-  color,
-  bold,
-  italic,
-  underline,
-  style,
-  ...rest
-}) => {
-  const {
-    all
-  } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle({
-    ...all,
-    color,
-    fontWeight: bold ? "bold" : undefined,
-    fontStyle: italic ? "italic" : undefined,
-    textDecoration: underline ? "underline" : undefined
-  }, style);
-  return jsx("span", {
-    ...rest,
-    className: "navi_text",
-    style: innerStyle,
-    children: children
-  });
-};
-const alignYMapping = {
-  start: "flex-start",
-  center: "center",
-  end: "flex-end"
-};
-const Icon = ({
-  alignY,
-  style,
-  children,
-  ...rest
-}) => {
-  const innerStyle = {
-    ...style
-  };
-  if (alignY !== "center") {
-    innerStyle["--align-y"] = alignYMapping[alignY];
-  }
-  return jsx("span", {
-    ...rest,
-    className: "navi_icon",
-    style: innerStyle,
-    children: children
-  });
-};
-
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   .text_and_count {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "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/field/select.jsx

@@ -37,7 +37,6 @@ const SelectControlled = forwardRef((props, ref) => {
     <select
       className="navi_select"
       ref={innerRef}
-      data-field=""
       data-readonly={readOnly && !disabled ? "" : undefined}
       onKeyDown={(e) => {
         if (readOnly) {

package/src/components/link/link.jsx

@@ -20,6 +20,7 @@ import {
   SelectionContext,
   useSelectableElement,
 } from "../selection/selection.jsx";
+import { useTypographyStyle } from "../text/text.jsx";
 import { useAutoFocus } from "../use_auto_focus.js";
 
 /*
@@ -35,45 +36,40 @@ import.meta.css = /* css */ `
   .navi_link {
     border-radius: 2px;
   }
-
+  /* Focus */
   .navi_link:focus {
     position: relative;
     z-index: 1; /* Ensure focus outline is above other elements */
   }
-
-  .navi_link[data-readonly] > *,
-  .navi_link[inert] > * {
-    opacity: 0.5;
-  }
-
-  .navi_link[inert] {
-    pointer-events: none;
+  /* Visited */
+  .navi_link[data-visited] {
+    color: light-dark(#6a1b9a, #ab47bc);
   }
-
+  /* Selected */
   .navi_link[aria-selected] {
     position: relative;
   }
-
+  .navi_link[aria-selected="true"] {
+    background-color: light-dark(#bbdefb, #2563eb);
+  }
   .navi_link[aria-selected] input[type="checkbox"] {
     position: absolute;
     opacity: 0;
   }
-
-  /* Visual feedback for selected state */
-  .navi_link[aria-selected="true"] {
-    background-color: light-dark(#bbdefb, #2563eb);
-  }
-
+  /* Active */
   .navi_link[data-active] {
     font-weight: bold;
   }
-
-  .navi_link[data-visited] {
-    color: light-dark(#6a1b9a, #ab47bc);
+  /* Readonly */
+  .navi_link[data-readonly] > * {
+    opacity: 0.5;
   }
-
-  .navi_link[data-no-text-decoration] {
-    text-decoration: none;
+  /* Disabled */
+  .navi_link[inert] {
+    pointer-events: none;
+  }
+  .navi_link[inert] > * {
+    opacity: 0.5;
   }
 `;
 
@@ -122,7 +118,13 @@ const LinkPlain = forwardRef((props, ref) => {
 
   const innerClassName = withPropsClassName("navi_link", className);
   const { all } = useLayoutStyle(rest);
-  const innerStyle = withPropsStyle(all, style);
+  const innerStyle = withPropsStyle(
+    {
+      ...all,
+      ...useTypographyStyle(rest),
+    },
+    style,
+  );
 
   return (
     <LoadableInlineElement
@@ -137,7 +139,7 @@ const LinkPlain = forwardRef((props, ref) => {
         style={innerStyle}
         aria-busy={loading}
         inert={disabled}
-        data-field=""
+        data-disabled={disabled ? "" : undefined}
         data-readonly={readOnly ? "" : undefined}
         data-active={active ? "" : undefined}
         data-visited={visited || isVisited ? "" : undefined}

package/src/components/text/text.jsx

@@ -24,23 +24,36 @@ import.meta.css = /* css */ `
   }
 `;
 
-export const Text = ({
-  children,
-  color,
-  bold,
-  italic,
-  underline,
-  style,
-  ...rest
-}) => {
+export const useTypographyStyle = (props) => {
+  const color = props.color;
+  const bold = props.bold;
+  const italic = props.italic;
+  const underline = props.underline;
+  const size = props.size;
+  delete props.color;
+  delete props.bold;
+  delete props.italic;
+  delete props.underline;
+  delete props.size;
+  return {
+    color,
+    fontWeight: bold ? "bold" : bold === undefined ? undefined : "normal",
+    fontStyle: italic ? "italic" : italic === undefined ? undefined : "normal",
+    fontSize: size,
+    textDecoration: underline
+      ? "underline"
+      : underline === undefined
+        ? undefined
+        : "none",
+  };
+};
+
+export const Text = ({ style, children, ...rest }) => {
   const { all } = useLayoutStyle(rest);
   const innerStyle = withPropsStyle(
     {
       ...all,
-      color,
-      fontWeight: bold ? "bold" : undefined,
-      fontStyle: italic ? "italic" : undefined,
-      textDecoration: underline ? "underline" : undefined,
+      ...useTypographyStyle(rest),
     },
     style,
   );
@@ -52,16 +65,15 @@ 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 = ({ style, children, ...rest }) => {
+  const { all } = useLayoutStyle(rest);
+  const innerStyle = withPropsStyle(
+    {
+      ...all,
+      ...useTypographyStyle(rest),
+    },
+    style,
+  );
 
   return (
     <span {...rest} className="navi_icon" style={innerStyle}>