@lundal/zed-solid 0.0.16 → 0.0.18

package/dist/Header.d.ts

@@ -4,6 +4,7 @@ export type HeaderProps = {
     style?: JSX.CSSProperties;
     appIcon: JSX.Element;
     appName: string;
+    buttons?: JSX.Element;
     children?: JSX.Element;
 };
 export declare function Header(props: HeaderProps): JSX.Element;

package/dist/{NavHeader.d.ts → NavHeading.d.ts}

@@ -1,7 +1,7 @@
 import { JSX } from 'solid-js';
-export type NavHeaderProps = {
+export type NavHeadingProps = {
     class?: string;
     style?: JSX.CSSProperties;
     children: JSX.Element;
 };
-export declare function NavHeader(props: NavHeaderProps): JSX.Element;
+export declare function NavHeading(props: NavHeadingProps): JSX.Element;

package/dist/index.css

@@ -349,7 +349,7 @@ dialog:focus-visible {
   font-weight: 500;
 }
 
-.z-nav--header {
+.z-nav--heading {
   padding: 24px 24px 12px 24px;
 }
 

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export * from './IconButton.tsx';
 export * from './Link.tsx';
 export * from './Message.tsx';
 export * from './Nav.tsx';
-export * from './NavHeader.tsx';
+export * from './NavHeading.tsx';
 export * from './NavLink.tsx';
 export * from './Page.tsx';
 export * from './RadioButtons.tsx';

package/dist/index.js

@@ -1,8 +1,9 @@
 import './index.css';
 import "@fontsource/inter/400.css";
 import "@fontsource/inter/500.css";
-import { sharedConfig, createRenderEffect, untrack, createComponent, For, createMemo, createSignal, onMount, onCleanup } from "solid-js";
+import { sharedConfig, createMemo, untrack, createRenderEffect, createComponent, For, createSignal, onMount, onCleanup } from "solid-js";
 import { A } from "@solidjs/router";
+const memo = (fn) => createMemo(() => fn());
 function reconcileArrays(parentNode, a, b) {
   let bLength = b.length, aEnd = a.length, bEnd = bLength, aStart = 0, bStart = 0, after = a[aEnd - 1].nextSibling, map = null;
   while (aStart < aEnd || bStart < bEnd) {
@@ -52,12 +53,12 @@ function reconcileArrays(parentNode, a, b) {
   }
 }
 const $$EVENTS = "_$DX_DELEGATE";
-function template(html, isImportNode, isSVG) {
+function template(html, isImportNode, isSVG, isMathML) {
   let node;
   const create = () => {
-    const t = document.createElement("template");
+    const t = isMathML ? document.createElementNS("http://www.w3.org/1998/Math/MathML", "template") : document.createElement("template");
     t.innerHTML = html;
-    return isSVG ? t.content.firstChild.firstChild : t.content.firstChild;
+    return isSVG ? t.content.firstChild.firstChild : isMathML ? t.firstChild : t.content.firstChild;
   };
   const fn = isImportNode ? () => untrack(() => document.importNode(node || (node = create()), true)) : () => (node || (node = create())).cloneNode(true);
   fn.cloneNode = fn;
@@ -260,11 +261,7 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
     } else if (t === "function") {
       if (unwrap) {
         while (typeof item === "function") item = item();
-        dynamic = normalizeIncomingArray(
-          normalized,
-          Array.isArray(item) ? item : [item],
-          Array.isArray(prev) ? prev : [prev]
-        ) || dynamic;
+        dynamic = normalizeIncomingArray(normalized, Array.isArray(item) ? item : [item], Array.isArray(prev) ? prev : [prev]) || dynamic;
       } else {
         normalized.push(item);
         dynamic = true;
@@ -289,8 +286,7 @@ function cleanChildren(parent, current, marker, replacement) {
       const el = current[i];
       if (node !== el) {
         const isParent = el.parentNode === parent;
-        if (!inserted && !i)
-          isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
+        if (!inserted && !i) isParent ? parent.replaceChild(node, el) : parent.insertBefore(node, marker);
         else isParent && el.remove();
       } else inserted = true;
     }
@@ -401,7 +397,7 @@ function CheckBoxes(props) {
       })()
     }), null);
     insert(_el$, (() => {
-      var _c$ = createMemo(() => !!props.error);
+      var _c$ = memo(() => !!props.error);
       return () => _c$() && (() => {
         var _el$6 = _tmpl$3$3();
         insert(_el$6, () => props.error);
@@ -410,7 +406,7 @@ function CheckBoxes(props) {
       })();
     })(), null);
     insert(_el$, (() => {
-      var _c$2 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      var _c$2 = memo(() => !!(!props.error && props.errorPlaceholder !== false));
       return () => _c$2() && _tmpl$4$2();
     })(), null);
     createRenderEffect((_p$) => {
@@ -451,13 +447,13 @@ function Dialog(props) {
   }
   let dialog;
   onMount(() => {
-    dialog == null ? void 0 : dialog.showModal();
-    dialog == null ? void 0 : dialog.classList.add("z-dialog--open");
+    dialog?.showModal();
+    dialog?.classList.add("z-dialog--open");
   });
   function close() {
-    dialog == null ? void 0 : dialog.classList.remove("z-dialog--open");
+    dialog?.classList.remove("z-dialog--open");
     setTimeout(() => {
-      dialog == null ? void 0 : dialog.close();
+      dialog?.close();
       props.onClose();
     }, 100);
   }
@@ -497,7 +493,7 @@ function Field(props) {
   return (() => {
     var _el$ = _tmpl$$f();
     insert(_el$, (() => {
-      var _c$ = createMemo(() => !!props.label);
+      var _c$ = memo(() => !!props.label);
       return () => _c$() && (() => {
         var _el$2 = _tmpl$2$4();
         insert(_el$2, () => props.label);
@@ -511,7 +507,7 @@ function Field(props) {
       errorId: props.error ? `${props.id}-error` : void 0
     })), null);
     insert(_el$, (() => {
-      var _c$2 = createMemo(() => !!props.error);
+      var _c$2 = memo(() => !!props.error);
       return () => _c$2() && (() => {
         var _el$3 = _tmpl$3$2();
         insert(_el$3, () => props.error);
@@ -520,7 +516,7 @@ function Field(props) {
       })();
     })(), null);
     insert(_el$, (() => {
-      var _c$3 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      var _c$3 = memo(() => !!(!props.error && props.errorPlaceholder !== false));
       return () => _c$3() && _tmpl$4$1();
     })(), null);
     createRenderEffect((_p$) => {
@@ -556,13 +552,14 @@ function Form(props) {
     return _el$;
   })();
 }
-var _tmpl$$d = /* @__PURE__ */ template(`<header><a class=z-header--app href=/><span></span></a><div class=z-header--buttons>`);
+var _tmpl$$d = /* @__PURE__ */ template(`<header><a class=z-header--app href=/><span></span></a><div class=z-header--children></div><div class=z-header--buttons>`);
 function Header(props) {
   return (() => {
-    var _el$ = _tmpl$$d(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    var _el$ = _tmpl$$d(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling, _el$5 = _el$4.nextSibling;
     insert(_el$2, () => props.appIcon, _el$3);
     insert(_el$3, () => props.appName);
     insert(_el$4, () => props.children);
+    insert(_el$5, () => props.buttons);
     createRenderEffect((_p$) => {
       var _v$ = mergeClasses("z-header", props.class), _v$2 = props.style;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
@@ -624,7 +621,7 @@ function H3(props) {
     return _el$3;
   })();
 }
-var _tmpl$$b = /* @__PURE__ */ template(`<svg>`), _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill=currentColor></svg>`, false, true);
+var _tmpl$$b = /* @__PURE__ */ template(`<svg>`), _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill=currentColor></svg>`, false, true, false);
 function Icon(props) {
   const data = createMemo(() => {
     const [width, height, , , paths] = props.definition.icon;
@@ -707,29 +704,29 @@ function Link(props) {
   });
 }
 /*!
- * Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- * Copyright 2024 Fonticons, Inc.
+ * Copyright 2025 Fonticons, Inc.
  */
-const faCircleCheck = {
+var faCircleXmark = {
   prefix: "fas",
-  iconName: "circle-check",
-  icon: [512, 512, [61533, "check-circle"], "f058", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"]
+  iconName: "circle-xmark",
+  icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM167 167c9.4-9.4 24.6-9.4 33.9 0l55 55 55-55c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-55 55 55 55c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-55-55-55 55c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l55-55-55-55c-9.4-9.4-9.4-24.6 0-33.9z"]
 };
-const faCircleInfo = {
+var faCircleCheck = {
   prefix: "fas",
-  iconName: "circle-info",
-  icon: [512, 512, ["info-circle"], "f05a", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"]
+  iconName: "circle-check",
+  icon: [512, 512, [61533, "check-circle"], "f058", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zM374 145.7c-10.7-7.8-25.7-5.4-33.5 5.3L221.1 315.2 169 263.1c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l72 72c5 5 11.8 7.5 18.8 7s13.4-4.1 17.5-9.8L379.3 179.2c7.8-10.7 5.4-25.7-5.3-33.5z"]
 };
-const faTriangleExclamation = {
+var faTriangleExclamation = {
   prefix: "fas",
   iconName: "triangle-exclamation",
-  icon: [512, 512, [9888, "exclamation-triangle", "warning"], "f071", "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"]
+  icon: [512, 512, [9888, "exclamation-triangle", "warning"], "f071", "M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
 };
-const faCircleXmark = {
+var faCircleInfo = {
   prefix: "fas",
-  iconName: "circle-xmark",
-  icon: [512, 512, [61532, "times-circle", "xmark-circle"], "f057", "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z"]
+  iconName: "circle-info",
+  icon: [512, 512, ["info-circle"], "f05a", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]
 };
 var _tmpl$$9 = /* @__PURE__ */ template(`<div><div class=z-message--icon></div><div class=z-message--text>`);
 function Message(props) {
@@ -787,12 +784,12 @@ function Nav(props) {
   })();
 }
 var _tmpl$$7 = /* @__PURE__ */ template(`<div>`);
-function NavHeader(props) {
+function NavHeading(props) {
   return (() => {
     var _el$ = _tmpl$$7();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      var _v$ = mergeClasses("z-nav--header", props.class), _v$2 = props.style;
+      var _v$ = mergeClasses("z-nav--heading", props.class), _v$2 = props.style;
       _v$ !== _p$.e && className(_el$, _p$.e = _v$);
       _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
@@ -819,7 +816,7 @@ function NavLink(props) {
     },
     end: true,
     get children() {
-      return [createMemo(() => props.icon), (() => {
+      return [memo(() => props.icon), (() => {
         var _el$ = _tmpl$$6();
         insert(_el$, () => props.text);
         return _el$;
@@ -877,7 +874,7 @@ function RadioButtons(props) {
       })()
     }), null);
     insert(_el$, (() => {
-      var _c$ = createMemo(() => !!props.error);
+      var _c$ = memo(() => !!props.error);
       return () => _c$() && (() => {
         var _el$6 = _tmpl$3();
         insert(_el$6, () => props.error);
@@ -886,7 +883,7 @@ function RadioButtons(props) {
       })();
     })(), null);
     insert(_el$, (() => {
-      var _c$2 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      var _c$2 = memo(() => !!(!props.error && props.errorPlaceholder !== false));
       return () => _c$2() && _tmpl$4();
     })(), null);
     createRenderEffect((_p$) => {
@@ -1031,13 +1028,11 @@ function createForm(options) {
       }
       setState({ type: "Submitting" });
       options.submitter(fields()).then((value) => {
-        var _a;
         setState({ type: "Success", value });
-        (_a = options.onSuccess) == null ? void 0 : _a.call(options, value);
+        options.onSuccess?.(value);
       }).catch((error) => {
-        var _a;
         setState({ type: "Failure", error });
-        (_a = options.onFailure) == null ? void 0 : _a.call(options, error);
+        options.onFailure?.(error);
       });
     }
   };
@@ -1072,7 +1067,7 @@ function createSize(element) {
     observer.observe(_element);
   });
   onCleanup(() => {
-    observer == null ? void 0 : observer.disconnect();
+    observer?.disconnect();
     observer = void 0;
   });
   return size;
@@ -1095,7 +1090,7 @@ export {
   Link,
   Message,
   Nav,
-  NavHeader,
+  NavHeading,
   NavLink,
   Page,
   RadioButtons,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lundal/zed-solid",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "license": "LGPL-3.0-or-later",
   "type": "module",
   "module": "dist/index.js",
@@ -15,26 +15,22 @@
     "format": "prettier --write src"
   },
   "devDependencies": {
-    "@fortawesome/free-regular-svg-icons": "6",
-    "@fortawesome/free-solid-svg-icons": "6",
+    "@fontsource/inter": "5.2.8",
+    "@fortawesome/free-regular-svg-icons": "7.1.0",
+    "@fortawesome/free-solid-svg-icons": "7.1.0",
     "@lundal/zed-css": "file:../css",
-    "@solidjs/router": "0.15",
-    "solid-js": "1",
-    "prettier": "3",
-    "typescript": "5",
-    "vite": "6",
-    "vite-plugin-dts": "4",
-    "vite-plugin-libcss": "1",
-    "vite-plugin-solid": "2"
+    "@solidjs/router": "0.15.3",
+    "solid-js": "1.9.9",
+    "prettier": "3.6.2",
+    "typescript": "5.9.3",
+    "vite": "7.1.10",
+    "vite-plugin-dts": "4.5.4",
+    "vite-plugin-libcss": "1.1.2",
+    "vite-plugin-solid": "2.11.9"
   },
   "peerDependencies": {
+    "@fontsource/inter": "*",
     "@solidjs/router": "*",
     "solid-js": "*"
-  },
-  "optionalDependencies": {
-    "@fortawesome/free-solid-svg-icons": "6"
-  },
-  "dependencies": {
-    "@fontsource/inter": "5"
   }
 }