@lundal/zed-solid 0.0.6 → 0.0.8

package/dist/Button.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type ButtonProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Card.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type CardProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/CheckBox.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type CheckBoxProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/CheckBoxes.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 type Option = {
     label: string;
     value: boolean;

package/dist/Column.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type ColumnProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Dialog.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type DialogProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Field.d.ts

@@ -1,4 +1,5 @@
-import { Accessor, JSX } from "solid-js";
+import { Accessor, JSX } from 'solid-js';
+
 type ExtraProps = {
     id: string;
     invalid: boolean;

package/dist/Form.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type FormProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Header.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type HeaderProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Headings.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type HeadingProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Icon.d.ts

@@ -1,5 +1,6 @@
-import { JSX } from "solid-js";
-import { IconDefinition } from "@fortawesome/fontawesome-common-types";
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import { JSX } from 'solid-js';
+
 export type IconProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/IconButton.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type IconButtonProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Link.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type LinkProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Nav.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type NavProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/NavHeader.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type NavHeaderProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/NavLink.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type NavLinkProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Page.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type PageProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/RadioButtons.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 type Option<T> = {
     label: string;
     value: T;

package/dist/Row.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type RowProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/Select.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 type Option<T> = {
     label: string;
     value: T;

package/dist/Spinner.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type SpinnerProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/TextBox.d.ts

@@ -1,4 +1,5 @@
-import { JSX } from "solid-js";
+import { JSX } from 'solid-js';
+
 export type TextBoxProps = {
     class?: string;
     style?: JSX.CSSProperties;

package/dist/example.d.ts

@@ -0,0 +1 @@
+

package/dist/index.d.ts

@@ -1,22 +1,23 @@
-export * from "./Button.tsx";
-export * from "./Card.tsx";
-export * from "./CheckBox.tsx";
-export * from "./CheckBoxes.tsx";
-export * from "./Column.tsx";
-export * from "./Dialog.tsx";
-export * from "./Field.tsx";
-export * from "./Form.tsx";
-export * from "./Header.tsx";
-export * from "./Headings.tsx";
-export * from "./Icon.tsx";
-export * from "./IconButton.tsx";
-export * from "./Link.tsx";
-export * from "./Nav.tsx";
-export * from "./NavHeader.tsx";
-export * from "./NavLink.tsx";
-export * from "./Page.tsx";
-export * from "./RadioButtons.tsx";
-export * from "./Row.tsx";
-export * from "./Select.tsx";
-export * from "./Spinner.tsx";
-export * from "./TextBox.tsx";
+
+export * from './Button.tsx';
+export * from './Card.tsx';
+export * from './CheckBox.tsx';
+export * from './CheckBoxes.tsx';
+export * from './Column.tsx';
+export * from './Dialog.tsx';
+export * from './Field.tsx';
+export * from './Form.tsx';
+export * from './Header.tsx';
+export * from './Headings.tsx';
+export * from './Icon.tsx';
+export * from './IconButton.tsx';
+export * from './Link.tsx';
+export * from './Nav.tsx';
+export * from './NavHeader.tsx';
+export * from './NavLink.tsx';
+export * from './Page.tsx';
+export * from './RadioButtons.tsx';
+export * from './Row.tsx';
+export * from './Select.tsx';
+export * from './Spinner.tsx';
+export * from './TextBox.tsx';

package/dist/index.js

@@ -3,7 +3,6 @@ import "@fontsource/inter/400.css";
 import "@fontsource/inter/500.css";
 import { sharedConfig, createRenderEffect, untrack, createComponent, For, createMemo, createSignal, onMount } from "solid-js";
 import { A } from "@solidjs/router";
-const style$1 = "";
 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) {
@@ -83,12 +82,16 @@ function delegateEvents(eventNames, document2 = window.document) {
   }
 }
 function setAttribute(node, name, value) {
+  if (!!sharedConfig.context && node.isConnected)
+    return;
   if (value == null)
     node.removeAttribute(name);
   else
     node.setAttribute(name, value);
 }
 function className(node, value) {
+  if (!!sharedConfig.context && node.isConnected)
+    return;
   if (value == null)
     node.removeAttribute("class");
   else
@@ -156,7 +159,8 @@ function eventHandler(e) {
   }
 }
 function insertExpression(parent, value, current, marker, unwrapArray) {
-  if (sharedConfig.context) {
+  const hydrating = !!sharedConfig.context && parent.isConnected;
+  if (hydrating) {
     !current && (current = [...parent.childNodes]);
     let cleaned = [];
     for (let i = 0; i < current.length; i++) {
@@ -175,14 +179,14 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
   const t = typeof value, multi = marker !== void 0;
   parent = multi && current[0] && current[0].parentNode || parent;
   if (t === "string" || t === "number") {
-    if (sharedConfig.context)
+    if (hydrating)
       return current;
     if (t === "number")
       value = value.toString();
     if (multi) {
       let node = current[0];
       if (node && node.nodeType === 3) {
-        node.data = value;
+        node.data !== value && (node.data = value);
       } else
         node = document.createTextNode(value);
       current = cleanChildren(parent, current, marker, node);
@@ -193,7 +197,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
         current = parent.textContent = value;
     }
   } else if (value == null || t === "boolean") {
-    if (sharedConfig.context)
+    if (hydrating)
       return current;
     current = cleanChildren(parent, current, marker);
   } else if (t === "function") {
@@ -211,13 +215,16 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       createRenderEffect(() => current = insertExpression(parent, array, current, marker, true));
       return () => current;
     }
-    if (sharedConfig.context) {
+    if (hydrating) {
       if (!array.length)
         return current;
-      for (let i = 0; i < array.length; i++) {
-        if (array[i].parentNode)
-          return current = array;
-      }
+      if (marker === void 0)
+        return [...parent.childNodes];
+      let node = array[0];
+      let nodes = [node];
+      while ((node = node.nextSibling) !== marker)
+        nodes.push(node);
+      return current = nodes;
     }
     if (array.length === 0) {
       current = cleanChildren(parent, current, marker);
@@ -234,7 +241,7 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
     }
     current = array;
   } else if (value.nodeType) {
-    if (sharedConfig.context && value.parentNode)
+    if (hydrating && value.parentNode)
       return current = multi ? [value] : value;
     if (Array.isArray(current)) {
       if (multi)
@@ -246,13 +253,13 @@ function insertExpression(parent, value, current, marker, unwrapArray) {
       parent.replaceChild(value, parent.firstChild);
     current = value;
   } else
-    console.warn(`Unrecognized value. Skipped inserting`, value);
+    ;
   return current;
 }
 function normalizeIncomingArray(normalized, array, current, unwrap) {
   let dynamic = false;
   for (let i = 0, len = array.length; i < len; i++) {
-    let item = array[i], prev = current && current[i], t;
+    let item = array[i], prev = current && current[normalized.length], t;
     if (item == null || item === true || item === false)
       ;
     else if ((t = typeof item) === "object" && item.nodeType) {
@@ -263,7 +270,11 @@ function normalizeIncomingArray(normalized, array, current, unwrap) {
       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;
@@ -312,146 +323,146 @@ function mergeClasses(a, b) {
     return b;
   return void 0;
 }
-const _tmpl$$k = /* @__PURE__ */ template(`<button>`);
+var _tmpl$$k = /* @__PURE__ */ template(`<button>`);
 function Button(props) {
   return (() => {
-    const _el$ = _tmpl$$k();
+    var _el$ = _tmpl$$k();
     _el$.$$click = () => props.onClick !== "submit" && !props.busy && props.onClick();
     insert(_el$, () => props.label);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses(`z-button z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy, _v$4 = props.onClick === "submit" ? "submit" : "button";
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      _v$3 !== _p$._v$3 && setAttribute(_el$, "aria-busy", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && setAttribute(_el$, "type", _p$._v$4 = _v$4);
+      var _v$ = mergeClasses(`z-button z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy, _v$4 = props.onClick === "submit" ? "submit" : "button";
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$, "aria-busy", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$, "type", _p$.o = _v$4);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0,
-      _v$4: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
     });
     return _el$;
   })();
 }
 delegateEvents(["click"]);
-const _tmpl$$j = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$j = /* @__PURE__ */ template(`<div>`);
 function Card(props) {
   return (() => {
-    const _el$ = _tmpl$$j();
+    var _el$ = _tmpl$$j();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-card", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-card", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$i = /* @__PURE__ */ template(`<div><input type="checkbox"><label>`);
+var _tmpl$$i = /* @__PURE__ */ template(`<div><input type=checkbox><label>`);
 function CheckBox(props) {
   return (() => {
-    const _el$ = _tmpl$$i(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
+    var _el$ = _tmpl$$i(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
     _el$2.addEventListener("change", () => props.onChange(!props.value));
     insert(_el$3, () => props.label);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-checkbox", props.class), _v$2 = props.style, _v$3 = props.id, _v$4 = props.invalid, _v$5 = props.errormessage, _v$6 = props.id;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      _v$3 !== _p$._v$3 && setAttribute(_el$2, "id", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && setAttribute(_el$2, "aria-invalid", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && setAttribute(_el$2, "aria-errormessage", _p$._v$5 = _v$5);
-      _v$6 !== _p$._v$6 && setAttribute(_el$3, "for", _p$._v$6 = _v$6);
+      var _v$ = mergeClasses("z-checkbox", props.class), _v$2 = props.style, _v$3 = props.id, _v$4 = props.invalid, _v$5 = props.errormessage, _v$6 = props.id;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$2, "id", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$2, "aria-invalid", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$2, "aria-errormessage", _p$.i = _v$5);
+      _v$6 !== _p$.n && setAttribute(_el$3, "for", _p$.n = _v$6);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0,
-      _v$4: void 0,
-      _v$5: void 0,
-      _v$6: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0
     });
     createRenderEffect(() => _el$2.checked = props.value);
     return _el$;
   })();
 }
-const _tmpl$$h = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$5 = /* @__PURE__ */ template(`<div class="z-checkbox"><input type="checkbox"><label>`), _tmpl$3$3 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4$2 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
+var _tmpl$$h = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$5 = /* @__PURE__ */ template(`<div class=z-checkbox><input type=checkbox><label>`), _tmpl$3$3 = /* @__PURE__ */ template(`<div class=z-error>`), _tmpl$4$2 = /* @__PURE__ */ template(`<div class=z-error-placeholder>`);
 function CheckBoxes(props) {
   return (() => {
-    const _el$ = _tmpl$$h(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$$h(), _el$2 = _el$.firstChild;
     insert(_el$2, () => props.label);
     insert(_el$, createComponent(For, {
       get each() {
         return props.options;
       },
       children: (option, index) => (() => {
-        const _el$3 = _tmpl$2$5(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        var _el$3 = _tmpl$2$5(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
         _el$4.addEventListener("change", () => option.onChange(!option.value));
         insert(_el$5, () => option.label);
         createRenderEffect((_p$) => {
-          const _v$3 = `${props.id}-${index()}`, _v$4 = !!props.error, _v$5 = props.error ? `${props.id}-error` : void 0, _v$6 = `${props.id}-${index()}`;
-          _v$3 !== _p$._v$3 && setAttribute(_el$4, "id", _p$._v$3 = _v$3);
-          _v$4 !== _p$._v$4 && setAttribute(_el$4, "aria-invalid", _p$._v$4 = _v$4);
-          _v$5 !== _p$._v$5 && setAttribute(_el$4, "aria-errormessage", _p$._v$5 = _v$5);
-          _v$6 !== _p$._v$6 && setAttribute(_el$5, "for", _p$._v$6 = _v$6);
+          var _v$3 = `${props.id}-${index()}`, _v$4 = !!props.error, _v$5 = props.error ? `${props.id}-error` : void 0, _v$6 = `${props.id}-${index()}`;
+          _v$3 !== _p$.e && setAttribute(_el$4, "id", _p$.e = _v$3);
+          _v$4 !== _p$.t && setAttribute(_el$4, "aria-invalid", _p$.t = _v$4);
+          _v$5 !== _p$.a && setAttribute(_el$4, "aria-errormessage", _p$.a = _v$5);
+          _v$6 !== _p$.o && setAttribute(_el$5, "for", _p$.o = _v$6);
           return _p$;
         }, {
-          _v$3: void 0,
-          _v$4: void 0,
-          _v$5: void 0,
-          _v$6: void 0
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0
         });
         createRenderEffect(() => _el$4.checked = option.value);
         return _el$3;
       })()
     }), null);
     insert(_el$, (() => {
-      const _c$ = createMemo(() => !!props.error);
+      var _c$ = createMemo(() => !!props.error);
       return () => _c$() && (() => {
-        const _el$6 = _tmpl$3$3();
+        var _el$6 = _tmpl$3$3();
         insert(_el$6, () => props.error);
         createRenderEffect(() => setAttribute(_el$6, "id", `${props.id}-error`));
         return _el$6;
       })();
     })(), null);
     insert(_el$, (() => {
-      const _c$2 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      var _c$2 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
       return () => _c$2() && _tmpl$4$2();
     })(), null);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-fieldset", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-fieldset", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$g = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$g = /* @__PURE__ */ template(`<div>`);
 function Column(props) {
   return (() => {
-    const _el$ = _tmpl$$g();
+    var _el$ = _tmpl$$g();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-column", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-column", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$f = /* @__PURE__ */ template(`<dialog>`);
+var _tmpl$$f = /* @__PURE__ */ template(`<dialog>`);
 function Dialog(props) {
   const [wasOutside, setWasOutside] = createSignal(false);
   function isOutside(e) {
@@ -471,7 +482,7 @@ function Dialog(props) {
     }, 100);
   }
   return (() => {
-    const _el$ = _tmpl$$f();
+    var _el$ = _tmpl$$f();
     _el$.$$click = (e) => {
       if (wasOutside() && isOutside(e)) {
         e.preventDefault();
@@ -485,30 +496,30 @@ function Dialog(props) {
       e.preventDefault();
       close();
     });
-    const _ref$ = dialog;
+    var _ref$ = dialog;
     typeof _ref$ === "function" ? use(_ref$, _el$) : dialog = _el$;
     insert(_el$, () => props.children(close));
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-dialog", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-dialog", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
 delegateEvents(["mousedown", "click"]);
-const _tmpl$$e = /* @__PURE__ */ template(`<div>`), _tmpl$2$4 = /* @__PURE__ */ template(`<label>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
+var _tmpl$$e = /* @__PURE__ */ template(`<div>`), _tmpl$2$4 = /* @__PURE__ */ template(`<label>`), _tmpl$3$2 = /* @__PURE__ */ template(`<div class=z-error>`), _tmpl$4$1 = /* @__PURE__ */ template(`<div class=z-error-placeholder>`);
 function Field(props) {
   return (() => {
-    const _el$ = _tmpl$$e();
+    var _el$ = _tmpl$$e();
     insert(_el$, (() => {
-      const _c$ = createMemo(() => !!props.label);
+      var _c$ = createMemo(() => !!props.label);
       return () => _c$() && (() => {
-        const _el$2 = _tmpl$2$4();
+        var _el$2 = _tmpl$2$4();
         insert(_el$2, () => props.label);
         createRenderEffect(() => setAttribute(_el$2, "for", props.id));
         return _el$2;
@@ -520,120 +531,120 @@ function Field(props) {
       errorId: props.error ? `${props.id}-error` : void 0
     })), null);
     insert(_el$, (() => {
-      const _c$2 = createMemo(() => !!props.error);
+      var _c$2 = createMemo(() => !!props.error);
       return () => _c$2() && (() => {
-        const _el$3 = _tmpl$3$2();
+        var _el$3 = _tmpl$3$2();
         insert(_el$3, () => props.error);
         createRenderEffect(() => setAttribute(_el$3, "id", `${props.id}-error`));
         return _el$3;
       })();
     })(), null);
     insert(_el$, (() => {
-      const _c$3 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      var _c$3 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
       return () => _c$3() && _tmpl$4$1();
     })(), null);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-field", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-field", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$d = /* @__PURE__ */ template(`<form>`);
+var _tmpl$$d = /* @__PURE__ */ template(`<form>`);
 function Form(props) {
   return (() => {
-    const _el$ = _tmpl$$d();
+    var _el$ = _tmpl$$d();
     _el$.addEventListener("submit", (event) => {
       event.preventDefault();
       props.onSubmit();
     });
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = props.class, _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = props.class, _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$c = /* @__PURE__ */ template(`<header><a class="z-header--app" href="/"><span></span></a><div class="z-header--buttons">`);
+var _tmpl$$c = /* @__PURE__ */ template(`<header><a class=z-header--app href=/><span></span></a><div class=z-header--buttons>`);
 function Header(props) {
   return (() => {
-    const _el$ = _tmpl$$c(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
+    var _el$ = _tmpl$$c(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$2.nextSibling;
     insert(_el$2, () => props.appIcon, _el$3);
     insert(_el$3, () => props.appName);
     insert(_el$4, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-header", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-header", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$b = /* @__PURE__ */ template(`<h1>`), _tmpl$2$3 = /* @__PURE__ */ template(`<h2>`), _tmpl$3$1 = /* @__PURE__ */ template(`<h3>`);
+var _tmpl$$b = /* @__PURE__ */ template(`<h1>`), _tmpl$2$3 = /* @__PURE__ */ template(`<h2>`), _tmpl$3$1 = /* @__PURE__ */ template(`<h3>`);
 function H1(props) {
   return (() => {
-    const _el$ = _tmpl$$b();
+    var _el$ = _tmpl$$b();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-" + (props.lookLike ?? "h1"), props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-" + (props.lookLike ?? "h1"), props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
 function H2(props) {
   return (() => {
-    const _el$2 = _tmpl$2$3();
+    var _el$2 = _tmpl$2$3();
     insert(_el$2, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$3 = mergeClasses("z-" + (props.lookLike ?? "h2"), props.class), _v$4 = props.style;
-      _v$3 !== _p$._v$3 && className(_el$2, _p$._v$3 = _v$3);
-      _p$._v$4 = style(_el$2, _v$4, _p$._v$4);
+      var _v$3 = mergeClasses("z-" + (props.lookLike ?? "h2"), props.class), _v$4 = props.style;
+      _v$3 !== _p$.e && className(_el$2, _p$.e = _v$3);
+      _p$.t = style(_el$2, _v$4, _p$.t);
       return _p$;
     }, {
-      _v$3: void 0,
-      _v$4: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$2;
   })();
 }
 function H3(props) {
   return (() => {
-    const _el$3 = _tmpl$3$1();
+    var _el$3 = _tmpl$3$1();
     insert(_el$3, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$5 = mergeClasses("z-" + (props.lookLike ?? "h3"), props.class), _v$6 = props.style;
-      _v$5 !== _p$._v$5 && className(_el$3, _p$._v$5 = _v$5);
-      _p$._v$6 = style(_el$3, _v$6, _p$._v$6);
+      var _v$5 = mergeClasses("z-" + (props.lookLike ?? "h3"), props.class), _v$6 = props.style;
+      _v$5 !== _p$.e && className(_el$3, _p$.e = _v$5);
+      _p$.t = style(_el$3, _v$6, _p$.t);
       return _p$;
     }, {
-      _v$5: void 0,
-      _v$6: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$3;
   })();
 }
-const _tmpl$$a = /* @__PURE__ */ template(`<svg>`), _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill="currentColor"></svg>`, false, true);
+var _tmpl$$a = /* @__PURE__ */ template(`<svg>`), _tmpl$2$2 = /* @__PURE__ */ template(`<svg><path fill=currentColor></svg>`, false, true);
 function Icon(props) {
   const data = createMemo(() => {
     const [width, height, , , paths] = props.definition.icon;
@@ -644,51 +655,51 @@ function Icon(props) {
     };
   });
   return (() => {
-    const _el$ = _tmpl$$a();
+    var _el$ = _tmpl$$a();
     insert(_el$, createComponent(For, {
       get each() {
         return data().paths;
       },
       children: (path) => (() => {
-        const _el$2 = _tmpl$2$2();
+        var _el$2 = _tmpl$2$2();
         setAttribute(_el$2, "d", path);
         return _el$2;
       })()
     }));
     createRenderEffect((_p$) => {
-      const _v$ = props.class, _v$2 = props.style, _v$3 = `0 0 ${data().width} ${data().height}`;
-      _v$ !== _p$._v$ && setAttribute(_el$, "class", _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      _v$3 !== _p$._v$3 && setAttribute(_el$, "viewBox", _p$._v$3 = _v$3);
+      var _v$ = props.class, _v$2 = props.style, _v$3 = `0 0 ${data().width} ${data().height}`;
+      _v$ !== _p$.e && setAttribute(_el$, "class", _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$, "viewBox", _p$.a = _v$3);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$9 = /* @__PURE__ */ template(`<button>`);
+var _tmpl$$9 = /* @__PURE__ */ template(`<button>`);
 function IconButton(props) {
   return (() => {
-    const _el$ = _tmpl$$9();
+    var _el$ = _tmpl$$9();
     _el$.$$click = () => !props.busy && props.onClick();
     insert(_el$, () => props.icon);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses(`z-button z-button--icon z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy, _v$4 = props.label, _v$5 = props.label;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      _v$3 !== _p$._v$3 && setAttribute(_el$, "aria-busy", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && setAttribute(_el$, "aria-label", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && setAttribute(_el$, "title", _p$._v$5 = _v$5);
+      var _v$ = mergeClasses(`z-button z-button--icon z-button--${props.type}`, props.class), _v$2 = props.style, _v$3 = props.busy, _v$4 = props.label, _v$5 = props.label;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$, "aria-busy", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$, "aria-label", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$, "title", _p$.i = _v$5);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0,
-      _v$4: void 0,
-      _v$5: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
     });
     return _el$;
   })();
@@ -713,41 +724,41 @@ function Link(props) {
     }
   });
 }
-const _tmpl$$8 = /* @__PURE__ */ template(`<nav>`);
+var _tmpl$$8 = /* @__PURE__ */ template(`<nav>`);
 function Nav(props) {
   return (() => {
-    const _el$ = _tmpl$$8();
+    var _el$ = _tmpl$$8();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-nav", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-nav", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$7 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$7 = /* @__PURE__ */ template(`<div>`);
 function NavHeader(props) {
   return (() => {
-    const _el$ = _tmpl$$7();
+    var _el$ = _tmpl$$7();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-nav--header", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-nav--header", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$6 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$$6 = /* @__PURE__ */ template(`<span>`);
 function NavLink(props) {
   return createComponent(A, {
     get ["class"]() {
@@ -764,108 +775,108 @@ function NavLink(props) {
     end: true,
     get children() {
       return [createMemo(() => props.icon), (() => {
-        const _el$ = _tmpl$$6();
+        var _el$ = _tmpl$$6();
         insert(_el$, () => props.text);
         return _el$;
       })()];
     }
   });
 }
-const _tmpl$$5 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$5 = /* @__PURE__ */ template(`<div>`);
 function Page(props) {
   return (() => {
-    const _el$ = _tmpl$$5();
+    var _el$ = _tmpl$$5();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses(`z-page z-page--layout-${props.layout} z-theme--${props.theme}`, props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses(`z-page z-page--layout-${props.layout} z-theme--${props.theme}`, props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$4 = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class="z-radiobutton"><input type="radio"><label>`), _tmpl$3 = /* @__PURE__ */ template(`<div class="z-error">`), _tmpl$4 = /* @__PURE__ */ template(`<div class="z-error-placeholder">`);
+var _tmpl$$4 = /* @__PURE__ */ template(`<fieldset><legend>`), _tmpl$2$1 = /* @__PURE__ */ template(`<div class=z-radiobutton><input type=radio><label>`), _tmpl$3 = /* @__PURE__ */ template(`<div class=z-error>`), _tmpl$4 = /* @__PURE__ */ template(`<div class=z-error-placeholder>`);
 function RadioButtons(props) {
   return (() => {
-    const _el$ = _tmpl$$4(), _el$2 = _el$.firstChild;
+    var _el$ = _tmpl$$4(), _el$2 = _el$.firstChild;
     insert(_el$2, () => props.label);
     insert(_el$, createComponent(For, {
       get each() {
         return props.options;
       },
       children: (option, index) => (() => {
-        const _el$3 = _tmpl$2$1(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
+        var _el$3 = _tmpl$2$1(), _el$4 = _el$3.firstChild, _el$5 = _el$4.nextSibling;
         _el$4.addEventListener("change", () => props.onChange(option.value));
         insert(_el$5, () => option.label);
         createRenderEffect((_p$) => {
-          const _v$3 = props.id, _v$4 = `${props.id}-${index()}`, _v$5 = !!props.error, _v$6 = props.error ? `${props.id}-error` : void 0, _v$7 = `${props.id}-${index()}`;
-          _v$3 !== _p$._v$3 && setAttribute(_el$4, "name", _p$._v$3 = _v$3);
-          _v$4 !== _p$._v$4 && setAttribute(_el$4, "id", _p$._v$4 = _v$4);
-          _v$5 !== _p$._v$5 && setAttribute(_el$4, "aria-invalid", _p$._v$5 = _v$5);
-          _v$6 !== _p$._v$6 && setAttribute(_el$4, "aria-errormessage", _p$._v$6 = _v$6);
-          _v$7 !== _p$._v$7 && setAttribute(_el$5, "for", _p$._v$7 = _v$7);
+          var _v$3 = props.id, _v$4 = `${props.id}-${index()}`, _v$5 = !!props.error, _v$6 = props.error ? `${props.id}-error` : void 0, _v$7 = `${props.id}-${index()}`;
+          _v$3 !== _p$.e && setAttribute(_el$4, "name", _p$.e = _v$3);
+          _v$4 !== _p$.t && setAttribute(_el$4, "id", _p$.t = _v$4);
+          _v$5 !== _p$.a && setAttribute(_el$4, "aria-invalid", _p$.a = _v$5);
+          _v$6 !== _p$.o && setAttribute(_el$4, "aria-errormessage", _p$.o = _v$6);
+          _v$7 !== _p$.i && setAttribute(_el$5, "for", _p$.i = _v$7);
           return _p$;
         }, {
-          _v$3: void 0,
-          _v$4: void 0,
-          _v$5: void 0,
-          _v$6: void 0,
-          _v$7: void 0
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0
         });
         createRenderEffect(() => _el$4.checked = option.value === props.value);
         return _el$3;
       })()
     }), null);
     insert(_el$, (() => {
-      const _c$ = createMemo(() => !!props.error);
+      var _c$ = createMemo(() => !!props.error);
       return () => _c$() && (() => {
-        const _el$6 = _tmpl$3();
+        var _el$6 = _tmpl$3();
         insert(_el$6, () => props.error);
         createRenderEffect(() => setAttribute(_el$6, "id", `${props.id}-error`));
         return _el$6;
       })();
     })(), null);
     insert(_el$, (() => {
-      const _c$2 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
+      var _c$2 = createMemo(() => !!(!props.error && props.errorPlaceholder !== false));
       return () => _c$2() && _tmpl$4();
     })(), null);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-fieldset", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-fieldset", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$3 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$3 = /* @__PURE__ */ template(`<div>`);
 function Row(props) {
   return (() => {
-    const _el$ = _tmpl$$3();
+    var _el$ = _tmpl$$3();
     insert(_el$, () => props.children);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-row", props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses("z-row", props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$$2 = /* @__PURE__ */ template(`<select>`), _tmpl$2 = /* @__PURE__ */ template(`<option>`);
+var _tmpl$$2 = /* @__PURE__ */ template(`<select>`), _tmpl$2 = /* @__PURE__ */ template(`<option>`);
 function Select(props) {
   return (() => {
-    const _el$ = _tmpl$$2();
+    var _el$ = _tmpl$$2();
     _el$.addEventListener("change", (e) => {
       const option = props.options[Number(e.target.value)];
       props.onChange(option.value);
@@ -875,70 +886,70 @@ function Select(props) {
         return props.options;
       },
       children: (option, index) => (() => {
-        const _el$2 = _tmpl$2();
+        var _el$2 = _tmpl$2();
         insert(_el$2, () => option.label);
         createRenderEffect(() => _el$2.value = index());
         return _el$2;
       })()
     }));
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-select", props.class), _v$2 = props.style, _v$3 = props.id, _v$4 = props.invalid, _v$5 = props.errorId;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      _v$3 !== _p$._v$3 && setAttribute(_el$, "id", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && setAttribute(_el$, "aria-invalid", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && setAttribute(_el$, "aria-errormessage", _p$._v$5 = _v$5);
+      var _v$ = mergeClasses("z-select", props.class), _v$2 = props.style, _v$3 = props.id, _v$4 = props.invalid, _v$5 = props.errorId;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$, "id", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$, "aria-invalid", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$, "aria-errormessage", _p$.i = _v$5);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0,
-      _v$4: void 0,
-      _v$5: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0
     });
     createRenderEffect(() => _el$.value = props.options.findIndex((it) => it.value === props.value));
     return _el$;
   })();
 }
-const _tmpl$$1 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$$1 = /* @__PURE__ */ template(`<div>`);
 function Spinner(props) {
   return (() => {
-    const _el$ = _tmpl$$1();
+    var _el$ = _tmpl$$1();
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses(`z-spinner z-spinner--${props.size ?? "normal"}`, props.class), _v$2 = props.style;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
+      var _v$ = mergeClasses(`z-spinner z-spinner--${props.size ?? "normal"}`, props.class), _v$2 = props.style;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0
+      e: void 0,
+      t: void 0
     });
     return _el$;
   })();
 }
-const _tmpl$ = /* @__PURE__ */ template(`<input>`);
+var _tmpl$ = /* @__PURE__ */ template(`<input>`);
 function TextBox(props) {
   return (() => {
-    const _el$ = _tmpl$();
+    var _el$ = _tmpl$();
     _el$.$$input = (e) => props.onChange(e.target.value);
     createRenderEffect((_p$) => {
-      const _v$ = mergeClasses("z-textbox", props.class), _v$2 = props.style, _v$3 = props.autocomplete ?? "off", _v$4 = props.hidden ? "password" : "text", _v$5 = props.id, _v$6 = props.invalid, _v$7 = props.errorId;
-      _v$ !== _p$._v$ && className(_el$, _p$._v$ = _v$);
-      _p$._v$2 = style(_el$, _v$2, _p$._v$2);
-      _v$3 !== _p$._v$3 && setAttribute(_el$, "autocomplete", _p$._v$3 = _v$3);
-      _v$4 !== _p$._v$4 && setAttribute(_el$, "type", _p$._v$4 = _v$4);
-      _v$5 !== _p$._v$5 && setAttribute(_el$, "id", _p$._v$5 = _v$5);
-      _v$6 !== _p$._v$6 && setAttribute(_el$, "aria-invalid", _p$._v$6 = _v$6);
-      _v$7 !== _p$._v$7 && setAttribute(_el$, "aria-errormessage", _p$._v$7 = _v$7);
+      var _v$ = mergeClasses("z-textbox", props.class), _v$2 = props.style, _v$3 = props.autocomplete ?? "off", _v$4 = props.hidden ? "password" : "text", _v$5 = props.id, _v$6 = props.invalid, _v$7 = props.errorId;
+      _v$ !== _p$.e && className(_el$, _p$.e = _v$);
+      _p$.t = style(_el$, _v$2, _p$.t);
+      _v$3 !== _p$.a && setAttribute(_el$, "autocomplete", _p$.a = _v$3);
+      _v$4 !== _p$.o && setAttribute(_el$, "type", _p$.o = _v$4);
+      _v$5 !== _p$.i && setAttribute(_el$, "id", _p$.i = _v$5);
+      _v$6 !== _p$.n && setAttribute(_el$, "aria-invalid", _p$.n = _v$6);
+      _v$7 !== _p$.s && setAttribute(_el$, "aria-errormessage", _p$.s = _v$7);
       return _p$;
     }, {
-      _v$: void 0,
-      _v$2: void 0,
-      _v$3: void 0,
-      _v$4: void 0,
-      _v$5: void 0,
-      _v$6: void 0,
-      _v$7: void 0
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0
     });
     createRenderEffect(() => _el$.value = props.value);
     return _el$;

package/dist/style.css

@@ -80,7 +80,7 @@
   border-radius: 12px;
   padding: 24px;
   background: var(--z-foreground);
-  /*border: 1px solid var(--z-border);*/
+  border: 1px solid var(--z-border);
 }
 .z-checkbox {
   display: flex;
@@ -164,6 +164,8 @@
 .z-dialog::backdrop {
   transition: opacity 0.1s;
   opacity: 0;
+  background: none;
+  backdrop-filter: blur(2px);
 }
 
 .z-dialog--open {
@@ -593,8 +595,7 @@ dialog:focus-visible {
   --z-button-tertiary-fill: transparent;
   --z-button-tertiary-text: #e6e6e6;
   --z-button-icon-fill: #2c2c35;
-  /* generic colors: blue, green, red, gray */
-  --z-input-border: #8f8f8f; /* Lc 40 */
+  --z-input-border: #79798a; /* Lc 30 */
   --z-input-active-border: #6068ff; /* Lc 30 */
   --z-input-active-fill: #7882ff; /* Lc 40 */
   --z-input-error-border: #db3a32; /* Lc 30 */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lundal/zed-solid",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "license": "LGPL-3.0-or-later",
   "type": "module",
   "module": "dist/index.js",
@@ -18,17 +18,17 @@
     "@fortawesome/free-regular-svg-icons": "6",
     "@fortawesome/free-solid-svg-icons": "6",
     "@lundal/zed-css": "file:../css",
-    "@solidjs/router": "0.8",
+    "@solidjs/router": "0.13",
     "solid-js": "1",
     "prettier": "3",
     "typescript": "5",
-    "vite": "4",
-    "vite-plugin-dts": "2",
+    "vite": "5",
+    "vite-plugin-dts": "3",
     "vite-plugin-libcss": "1",
     "vite-plugin-solid": "2"
   },
   "peerDependencies": {
-    "@solidjs/router": "0.8",
+    "@solidjs/router": "0.13",
     "solid-js": "1"
   },
   "dependencies": {