@jsenv/navi 0.14.33 → 0.15.2

package/dist/jsenv_navi.js

@@ -4887,6 +4887,7 @@ const POSITION_PROPS = {
   bottom: PASS_THROUGH,
   right: PASS_THROUGH,
 
+  transform: PASS_THROUGH,
   translateX: (value) => {
     return { transform: `translateX(${value})` };
   },
@@ -4973,6 +4974,7 @@ const VISUAL_PROPS = {
   overflow: PASS_THROUGH,
   overflowX: PASS_THROUGH,
   overflowY: PASS_THROUGH,
+  accentColor: PASS_THROUGH,
 };
 const CONTENT_PROPS = {
   align: applyOnTwoProps("alignX", "alignY"),
@@ -5067,6 +5069,7 @@ const getVisualChildStylePropStrategy = (name) => {
 };
 
 const isStyleProp = (name) => STYLE_PROP_NAME_SET.has(name);
+const isCSSVar = (name) => name.startsWith("--");
 
 const getStylePropGroup = (name) => {
   if (FLOW_PROP_NAME_SET.has(name)) {
@@ -5322,11 +5325,52 @@ const PSEUDO_CLASSES = {
   ":hover": {
     attribute: "data-hover",
     setup: (el, callback) => {
-      el.addEventListener("mouseenter", callback);
-      el.addEventListener("mouseleave", callback);
+      let onmouseenter = () => {
+        callback();
+      };
+      let onmouseleave = () => {
+        callback();
+      };
+
+      if (el.tagName === "LABEL") {
+        // input.matches(":hover") is true when hovering the label
+        // so when label is hovered/not hovered we need to recheck the input too
+        const recheckInput = () => {
+          if (el.htmlFor) {
+            const input = document.getElementById(el.htmlFor);
+            if (!input) {
+              // cannot find the input for this label in the DOM
+              return;
+            }
+            input.dispatchEvent(
+              new CustomEvent(NAVI_CHECK_PSEUDO_STATE_CUSTOM_EVENT),
+            );
+            return;
+          }
+          const input = el.querySelector("input, textarea, select");
+          if (!input) {
+            // label does not contain an input
+            return;
+          }
+          input.dispatchEvent(
+            new CustomEvent(NAVI_CHECK_PSEUDO_STATE_CUSTOM_EVENT),
+          );
+        };
+        onmouseenter = () => {
+          callback();
+          recheckInput();
+        };
+        onmouseleave = () => {
+          callback();
+          recheckInput();
+        };
+      }
+
+      el.addEventListener("mouseenter", onmouseenter);
+      el.addEventListener("mouseleave", onmouseleave);
       return () => {
-        el.removeEventListener("mouseenter", callback);
-        el.removeEventListener("mouseleave", callback);
+        el.removeEventListener("mouseenter", onmouseenter);
+        el.removeEventListener("mouseleave", onmouseleave);
       };
     },
     test: (el) => el.matches(":hover"),
@@ -5528,6 +5572,7 @@ const PSEUDO_CLASSES = {
 };
 
 const NAVI_PSEUDO_STATE_CUSTOM_EVENT = "navi_pseudo_state";
+const NAVI_CHECK_PSEUDO_STATE_CUSTOM_EVENT = "navi_check_pseudo_state";
 const dispatchNaviPseudoStateEvent = (element, value, oldValue) => {
   if (!element) {
     return;
@@ -5632,6 +5677,9 @@ const initPseudoStyles = (
     state = event.detail.pseudoState;
     onStateChange(state, oldState);
   });
+  element.addEventListener(NAVI_CHECK_PSEUDO_STATE_CUSTOM_EVENT, () => {
+    checkPseudoClasses();
+  });
 
   for (const pseudoClass of pseudoClasses) {
     const pseudoClassDefinition = PSEUDO_CLASSES[pseudoClass];
@@ -5651,7 +5699,7 @@ const initPseudoStyles = (
   // just in case + catch use forcing them in chrome devtools
   const interval = setInterval(() => {
     checkPseudoClasses();
-  }, 300);
+  }, 1_000);
   addTeardown(() => {
     clearInterval(interval);
   });
@@ -5825,7 +5873,6 @@ const Box = props => {
     // for demo purposes it's possible to control pseudo state from props
     pseudoClasses = PSEUDO_CLASSES_DEFAULT,
     pseudoElements = PSEUDO_ELEMENTS_DEFAULT,
-    pseudoStyle,
     // visualSelector convey the following:
     // The box itself is visually "invisible", one of its descendant is responsible for visual representation
     // - Some styles will be used on the box itself (for instance margins)
@@ -5946,7 +5993,7 @@ const Box = props => {
     let boxPseudoNamedStyles = PSEUDO_NAMED_STYLES_DEFAULT;
     const shouldForwardAllToChild = visualSelector && pseudoStateSelector;
     const addStyle = (value, name, styleContext, stylesTarget, context) => {
-      styleDeps.push(value); // impact box style -> add to deps
+      styleDeps.push(name, value); // impact box style -> add to deps
       const cssVar = styleContext.styleCSSVars[name];
       const mergedValue = prepareStyleValue(stylesTarget[name], value, name, styleContext, context);
       if (cssVar) {
@@ -5973,37 +6020,79 @@ const Box = props => {
       }
       return true;
     };
+
+    // By default ":hover", ":active" are not tracked.
+    // But if code explicitely do something like:
+    // style={{ ":hover": { backgroundColor: "red" } }}
+    // then we'll track ":hover" state changes even for basic elements like <div>
+    const pseudoClassesFromStyleSet = new Set();
+    boxPseudoNamedStyles = {};
     const assignStyle = (value, name, styleContext, boxStylesTarget, styleOrigin) => {
+      const isPseudoElement = name.startsWith("::");
+      const isPseudoClass = name.startsWith(":");
+      if (isPseudoElement || isPseudoClass) {
+        styleDeps.push(name);
+        pseudoClassesFromStyleSet.add(name);
+        const pseudoStyleContext = {
+          ...styleContext,
+          styleCSSVars: {
+            ...styleCSSVars,
+            ...styleCSSVars[name]
+          },
+          pseudoName: name
+        };
+        const pseudoStyleKeys = Object.keys(value);
+        if (isPseudoElement) {
+          const pseudoElementStyles = {};
+          for (const key of pseudoStyleKeys) {
+            assignStyle(value[key], key, pseudoStyleContext, pseudoElementStyles, "pseudo_style");
+          }
+          boxPseudoNamedStyles[name] = pseudoElementStyles;
+          return;
+        }
+        const pseudoClassStyles = {};
+        for (const key of pseudoStyleKeys) {
+          assignStyle(value[key], key, pseudoStyleContext, pseudoClassStyles, "pseudo_style");
+          boxPseudoNamedStyles[name] = pseudoClassStyles;
+        }
+        return;
+      }
       const context = styleOrigin === "base_style" ? "js" : "css";
       const isCss = styleOrigin === "base_style" || styleOrigin === "style";
       if (isCss) {
         addStyle(value, name, styleContext, boxStylesTarget, context);
         return;
       }
+      if (isCSSVar(name)) {
+        addStyle(value, name, styleContext, boxStylesTarget, context);
+        return;
+      }
       const isPseudoStyle = styleOrigin === "pseudo_style";
-      const mightStyle = isStyleProp(name);
-      if (!mightStyle) {
-        // not a style prop what do we do with it?
-        if (shouldForwardAllToChild) {
-          if (isPseudoStyle) ; else {
-            childForwardedProps[name] = value;
-          }
-        } else {
-          if (isPseudoStyle) {
-            console.warn(`unsupported pseudo style key "${name}"`);
+      if (isStyleProp(name)) {
+        // it's a style prop, we need first to check if we have css var to handle them
+        // otherwise we decide to put it either on self or child
+        const visualChildPropStrategy = visualSelector && getVisualChildStylePropStrategy(name);
+        const getStyle = getHowToHandleStyleProp(name);
+        if (
+        // prop name === css style name
+        !getStyle) {
+          const needForwarding = addStyleMaybeForwarding(value, name, styleContext, boxStylesTarget, context, visualChildPropStrategy);
+          if (needForwarding) {
+            if (isPseudoStyle) ; else {
+              childForwardedProps[name] = value;
+            }
           }
-          selfForwardedProps[name] = value;
+          return;
+        }
+        const cssValues = getStyle(value, styleContext);
+        if (!cssValues) {
+          return;
+        }
+        let needForwarding = false;
+        for (const styleName of Object.keys(cssValues)) {
+          const cssValue = cssValues[styleName];
+          needForwarding = addStyleMaybeForwarding(cssValue, styleName, styleContext, boxStylesTarget, context, visualChildPropStrategy);
         }
-        return;
-      }
-      // it's a style prop, we need first to check if we have css var to handle them
-      // otherwise we decide to put it either on self or child
-      const visualChildPropStrategy = visualSelector && getVisualChildStylePropStrategy(name);
-      const getStyle = getHowToHandleStyleProp(name);
-      if (
-      // prop name === css style name
-      !getStyle) {
-        const needForwarding = addStyleMaybeForwarding(value, name, styleContext, boxStylesTarget, context, visualChildPropStrategy);
         if (needForwarding) {
           if (isPseudoStyle) ; else {
             childForwardedProps[name] = value;
@@ -6011,20 +6100,18 @@ const Box = props => {
         }
         return;
       }
-      const cssValues = getStyle(value, styleContext);
-      if (!cssValues) {
-        return;
-      }
-      let needForwarding = false;
-      for (const styleName of Object.keys(cssValues)) {
-        const cssValue = cssValues[styleName];
-        needForwarding = addStyleMaybeForwarding(cssValue, styleName, styleContext, boxStylesTarget, context, visualChildPropStrategy);
-      }
-      if (needForwarding) {
+      // not a style prop what do we do with it?
+      if (shouldForwardAllToChild) {
         if (isPseudoStyle) ; else {
           childForwardedProps[name] = value;
         }
+      } else {
+        if (isPseudoStyle) {
+          console.warn(`unsupported pseudo style key "${name}"`);
+        }
+        selfForwardedProps[name] = value;
       }
+      return;
     };
     if (baseStyle) {
       for (const key of baseStyle) {
@@ -6042,52 +6129,6 @@ const Box = props => {
       const propValue = rest[propName];
       assignStyle(propValue, propName, styleContext, boxStyles, "prop");
     }
-    if (pseudoStyle) {
-      const assignPseudoStyle = (propValue, propName, pseudoStyleContext, pseudoStylesTarget) => {
-        assignStyle(propValue, propName, pseudoStyleContext, pseudoStylesTarget, "pseudo_style");
-      };
-      const pseudoStyleKeys = Object.keys(pseudoStyle);
-      if (pseudoStyleKeys.length) {
-        boxPseudoNamedStyles = {};
-        for (const key of pseudoStyleKeys) {
-          const pseudoStyleContext = {
-            ...styleContext,
-            styleCSSVars: {
-              ...styleCSSVars,
-              ...styleCSSVars[key]
-            },
-            pseudoName: key
-          };
-
-          // pseudo class
-          if (key.startsWith(":")) {
-            styleDeps.push(key);
-            const pseudoClassStyles = {};
-            const pseudoClassStyle = pseudoStyle[key];
-            for (const pseudoClassStyleKey of Object.keys(pseudoClassStyle)) {
-              const pseudoClassStyleValue = pseudoClassStyle[pseudoClassStyleKey];
-              assignPseudoStyle(pseudoClassStyleValue, pseudoClassStyleKey, pseudoStyleContext, pseudoClassStyles);
-            }
-            boxPseudoNamedStyles[key] = pseudoClassStyles;
-            continue;
-          }
-          // pseudo element
-          if (key.startsWith("::")) {
-            styleDeps.push(key);
-            const pseudoElementStyles = {};
-            const pseudoElementStyle = pseudoStyle[key];
-            for (const pseudoElementStyleKey of Object.keys(pseudoElementStyle)) {
-              const pseudoElementStyleValue = pseudoElementStyle[pseudoElementStyleKey];
-              assignPseudoStyle(pseudoElementStyleValue, pseudoElementStyleKey, pseudoStyleContext, pseudoElementStyles);
-            }
-            boxPseudoNamedStyles[key] = pseudoElementStyles;
-            continue;
-          }
-          console.warn(`unsupported pseudo style key "${key}"`);
-        }
-      }
-      childForwardedProps.pseudoStyle = pseudoStyle;
-    }
     if (typeof style === "string") {
       const styleObject = normalizeStyles(style, "css");
       for (const styleName of Object.keys(styleObject)) {
@@ -6105,21 +6146,15 @@ const Box = props => {
       applyStyle(boxEl, boxStyles, state, boxPseudoNamedStyles, preventInitialTransition);
     }, styleDeps);
     const finalStyleDeps = [pseudoStateSelector, innerPseudoState, updateStyle];
-    // By default ":hover", ":active" are not tracked.
-    // But is code explicitely do something like:
-    // pseudoStyle={{ ":hover": { backgroundColor: "red" } }}
-    // then we'll track ":hover" state changes even for basic elements like <div>
     let innerPseudoClasses;
-    if (pseudoStyle) {
+    if (pseudoClassesFromStyleSet.size) {
       innerPseudoClasses = [...pseudoClasses];
       if (pseudoClasses !== PSEUDO_CLASSES_DEFAULT) {
         finalStyleDeps.push(...pseudoClasses);
       }
-      for (const key of Object.keys(pseudoStyle)) {
-        if (key.startsWith(":") && !innerPseudoClasses.includes(key)) {
-          innerPseudoClasses.push(key);
-          finalStyleDeps.push(key);
-        }
+      for (const key of pseudoClassesFromStyleSet) {
+        innerPseudoClasses.push(key);
+        finalStyleDeps.push(key);
       }
     } else {
       innerPseudoClasses = pseudoClasses;
@@ -15737,8 +15772,9 @@ const useUIStateController = (
       if (hasStateProp) {
         uiStateController.hasStateProp = true;
         const currentState = uiStateController.state;
-        if (state !== currentState) {
-          uiStateController.state = state;
+        const stateFromProp = getStateFromProp(state);
+        if (stateFromProp !== currentState) {
+          uiStateController.state = stateFromProp;
           uiStateController.setUIState(
             uiStateController.getPropFromState(state),
             new CustomEvent("state_prop"),
@@ -16063,6 +16099,8 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --button-outline-width: 1px;
       --button-border-width: 1px;
       --button-border-radius: 2px;
+      --button-padding-x: 6px;
+      --button-padding-y: 1px;
       /* default */
       --button-outline-color: var(--navi-focus-outline-color);
       --button-loader-color: var(--navi-loader-color);
@@ -16117,10 +16155,11 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     --x-button-border-radius: var(--button-border-radius);
     --x-button-border-width: var(--button-border-width);
     --x-button-outer-width: calc(
-      var(--button-x-border-width) + var(--x-button-outline-width)
+      var(--x-button-border-width) + var(--x-button-outline-width)
     );
     --x-button-outline-color: var(--button-outline-color);
     --x-button-border-color: var(--button-border-color);
+    --x-button-background: var(--button-background);
     --x-button-background-color: var(--button-background-color);
     --x-button-color: var(--button-color);
     --x-button-cursor: var(--button-cursor);
@@ -16149,24 +16188,29 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       height: 100%;
       padding-top: var(
         --button-padding-top,
-        var(--button-padding-y, var(--button-padding, 1px))
+        var(--button-padding-y, var(--button-padding))
       );
       padding-right: var(
         --button-padding-right,
-        var(--button-padding-x, var(--button-padding, 6px))
+        var(--button-padding-x, var(--button-padding))
       );
       padding-bottom: var(
         --button-padding-bottom,
-        var(--button-padding-y, var(--button-padding, 1px))
+        var(--button-padding-y, var(--button-padding))
       );
       padding-left: var(
         --button-padding-left,
-        var(--button-padding-x, var(--button-padding, 6px))
+        var(--button-padding-x, var(--button-padding))
       );
       align-items: inherit;
       justify-content: inherit;
       color: var(--x-button-color);
-      background-color: var(--x-button-background-color);
+      background: var(--x-button-background);
+      background-color: var(
+        --x-button-background-color,
+        var(--x-button-background)
+      );
+
       border-width: var(--x-button-outer-width);
       border-style: solid;
       border-color: transparent;
@@ -16290,12 +16334,17 @@ const ButtonStyleCSSVars = {
   "outlineWidth": "--button-outline-width",
   "borderWidth": "--button-border-width",
   "borderRadius": "--button-border-radius",
+  "border": "--button-border",
+  "padding": "--button-padding",
+  "paddingX": "--button-padding-x",
+  "paddingY": "--button-padding-y",
   "paddingTop": "--button-padding-top",
   "paddingRight": "--button-padding-right",
   "paddingBottom": "--button-padding-bottom",
   "paddingLeft": "--button-padding-left",
-  "backgroundColor": "--button-background-color",
   "borderColor": "--button-border-color",
+  "background": "--button-background",
+  "backgroundColor": "--button-background-color",
   "color": "--button-color",
   ":hover": {
     backgroundColor: "--button-background-color-hover",
@@ -16631,7 +16680,7 @@ const MessageBox = ({
           border: "none",
           alignX: "center",
           alignY: "center",
-          pseudoStyle: {
+          style: {
             ":hover": {
               backgroundColor: "rgba(0, 0, 0, 0.1)"
             }
@@ -16810,6 +16859,10 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       &[data-focus-visible] {
         opacity: 1;
       }
+
+      .navi_icon {
+        vertical-align: top;
+      }
     }
   }
 
@@ -17660,22 +17713,25 @@ const Label = props => {
 installImportMetaCss(import.meta);import.meta.css = /* css */`
   @layer navi {
     .navi_checkbox {
+      --margin: 3px 3px 3px 4px;
       --outline-offset: 1px;
       --outline-width: 2px;
       --border-width: 1px;
       --border-radius: 2px;
-      --width: 13px;
-      --height: 13px;
+      --width: 0.815em;
+      --height: 0.815em;
 
       --outline-color: var(--navi-focus-outline-color);
       --loader-color: var(--navi-loader-color);
       --border-color: light-dark(#767676, #8e8e93);
       --background-color: white;
-      --background-color-checked: var(--color, light-dark(#4476ff, #3b82f6));
-      --border-color-checked: var(--color, light-dark(#4476ff, #3b82f6));
+      --accent-color: light-dark(#4476ff, #3b82f6);
+      --background-color-checked: var(--accent-color);
+      --border-color-checked: var(--accent-color);
       --checkmark-color-light: white;
       --checkmark-color-dark: rgb(55, 55, 55);
       --checkmark-color: var(--checkmark-color-light);
+      --cursor: pointer;
 
       --color-mix-light: black;
       --color-mix-dark: white;
@@ -17710,30 +17766,83 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       --border-color-disabled-checked: #d3d3d3;
       --background-color-disabled-checked: #d3d3d3;
 
+      /* Toggle specific */
+      --toggle-margin: 2px;
+      --toggle-width: 2.5em;
+      --toggle-thumb-size: 1.2em;
+      /* Padding uses px and not em otherwise it can be resolved to a float which does not play well */
+      /* With the translation calc in some configurations. In the end 2px is nice in all sizes and can still be configured for exceptions */
+      --toggle-padding: 2px;
+      --toggle-border-radius: calc(
+        var(--toggle-thumb-size) / 2 + calc(var(--toggle-padding) * 2)
+      );
+      --toggle-thumb-border-radius: 50%;
+      --toggle-background-color: light-dark(#767676, #8e8e93);
+      --toggle-background-color-checked: var(--accent-color);
+      --toggle-background-color-hover: color-mix(
+        in srgb,
+        var(--toggle-background-color) 60%,
+        white
+      );
+      --toggle-background-color-readonly: color-mix(
+        in srgb,
+        var(--toggle-background-color) 40%,
+        transparent
+      );
+      --toggle-background-color-disabled: color-mix(
+        in srgb,
+        var(--toggle-background-color) 15%,
+        #d3d3d3
+      );
+      --toggle-background-color-hover-checked: color-mix(
+        in srgb,
+        var(--toggle-background-color-checked) 90%,
+        black
+      );
+      --toggle-background-color-readonly-checked: color-mix(
+        in srgb,
+        var(--toggle-background-color-checked) 40%,
+        transparent
+      );
+      --toggle-background-color-disabled-checked: color-mix(
+        in srgb,
+        var(--toggle-background-color-checked) 15%,
+        #d3d3d3
+      );
+      --toggle-thumb-color: white;
+
+      /* Button specific */
+      --button-border-color: light-dark(#767676, #8e8e93);
+      --button-background-color: light-dark(#f3f4f6, #2d3748);
+      --button-border-color-hover: color-mix(
+        in srgb,
+        var(--button-border-color) 70%,
+        black
+      );
+      --button-background-color-hover: color-mix(
+        in srgb,
+        var(--button-background-color) 95%,
+        black
+      );
+
       &[data-dark] {
         --color-mix: var(--color-mix-dark);
-        --checkmark-color: var(--navi-checkmark-color-dark);
+        --checkmark-color: var(--checkmark-color-dark);
       }
     }
   }
 
   .navi_checkbox {
-    --x-border-radius: var(--border-radius);
-    --x-outline-offset: var(--outline-offset);
-    --x-outline-width: var(--outline-width);
-    --x-border-width: var(--border-width);
-    --x-width: var(--width);
-    --x-height: var(--height);
-    --x-outline-color: var(--outline-color);
     --x-background-color: var(--background-color);
     --x-border-color: var(--border-color);
     --x-color: var(--color);
     --x-checkmark-color: var(--checkmark-color);
+    --x-cursor: var(--cursor);
 
     position: relative;
     display: inline-flex;
     box-sizing: content-box;
-    margin: 3px 3px 3px 4px;
+    margin: var(--margin);
 
     .navi_native_field {
       position: absolute;
@@ -17741,37 +17850,32 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       margin: 0;
       padding: 0;
       border: none;
+      border-radius: inherit;
       opacity: 0;
-      cursor: inherit;
+      appearance: none; /* This allows border-radius to have an effect */
+      cursor: var(--x-cursor);
     }
 
     .navi_checkbox_field {
       display: inline-flex;
       box-sizing: border-box;
-      width: var(--x-width);
-      height: var(--x-height);
+      width: var(--width);
+      height: var(--height);
       background-color: var(--x-background-color);
-      border-width: var(--x-border-width);
+      border-width: var(--border-width);
       border-style: solid;
       border-color: var(--x-border-color);
-      border-radius: var(--x-border-radius);
-      outline-width: var(--x-outline-width);
+      border-radius: var(--border-radius);
+      outline-width: var(--outline-width);
       outline-style: none;
-      outline-color: var(--x-outline-color);
-      outline-offset: var(--x-outline-offset);
+      outline-color: var(--outline-color);
+      outline-offset: var(--outline-offset);
       pointer-events: none;
-
-      .navi_checkbox_marker {
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-        stroke: var(--x-checkmark-color);
-        transform: scale(0.5);
-      }
     }
 
     /* Focus */
     &[data-focus-visible] {
+      z-index: 1;
       .navi_checkbox_field {
         outline-style: solid;
       }
@@ -17790,20 +17894,13 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     &[data-checked] {
       --x-background-color: var(--background-color-checked);
       --x-border-color: var(--border-color-checked);
-
-      .navi_checkbox_marker {
-        opacity: 1;
-        transform: scale(1);
-        transition-property: opacity, transform;
-        transition-duration: 0.15s;
-        transition-timing-function: ease;
-      }
     }
     /* Readonly */
     &[data-readonly],
     &[data-readonly][data-hover] {
       --x-border-color: var(--border-color-readonly);
       --x-background-color: var(--background-color-readonly);
+      --x-cursor: default;
 
       &[data-checked] {
         --x-border-color: var(--border-color-readonly-checked);
@@ -17811,11 +17908,11 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         --x-checkmark-color: var(--checkmark-color-readonly);
       }
     }
-
     /* Disabled */
     &[data-disabled] {
       --x-border-color: var(--border-color-disabled);
       --x-background-color: var(--background-color-disabled);
+      --x-cursor: default;
 
       &[data-checked] {
         --x-border-color: var(--border-color-disabled-checked);
@@ -17824,52 +17921,34 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       }
     }
 
-    /* Toggle appearance */
-    &[data-toggle] {
-      --toggle-width: 2.5em;
-      --toggle-thumb-size: 1.2em;
-      /* Padding uses px and not em otherwise it can be resolved to a float which does not play well */
-      /* With the translation calc in some configurations. In the end 2px is nice in all sizes and can still be configured for exceptions */
-      --toggle-padding: 2px;
-      --toggle-thumb-border-radius: 50%;
-      --toggle-background-color: light-dark(#767676, #8e8e93);
-      --toggle-background-color-checked: var(
-        --color,
-        light-dark(#4476ff, #3b82f6)
-      );
-      --toggle-background-color-hover: color-mix(
-        in srgb,
-        var(--toggle-background-color) 60%,
-        white
-      );
-      --toggle-background-color-readonly: color-mix(
-        in srgb,
-        var(--toggle-background-color) 40%,
-        transparent
-      );
-      --toggle-background-color-disabled: color-mix(
-        in srgb,
-        var(--toggle-background-color) 15%,
-        #d3d3d3
-      );
-      --toggle-background-color-hover-checked: color-mix(
-        in srgb,
-        var(--toggle-background-color-checked) 90%,
-        black
-      );
-      --toggle-background-color-readonly-checked: color-mix(
-        in srgb,
-        var(--toggle-background-color-checked) 40%,
-        transparent
-      );
-      --toggle-background-color-disabled-checked: color-mix(
-        in srgb,
-        var(--toggle-background-color-checked) 15%,
-        #d3d3d3
-      );
+    /* Checkbox appearance */
+    &[data-appearance="checkbox"] {
+      .navi_checkbox_marker {
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        stroke: var(--x-checkmark-color);
+        transform: scale(0.5);
+      }
 
-      --toggle-thumb-color: white;
+      &[data-checked] {
+        .navi_checkbox_marker {
+          opacity: 1;
+          transform: scale(1);
+          transition-property: opacity, transform;
+          transition-duration: 0.15s;
+          transition-timing-function: ease;
+        }
+      }
+    }
 
+    /* Toggle appearance */
+    &[data-appearance="toggle"] {
+      --margin: var(--toggle-margin);
+      --padding: var(--toggle-padding);
+      --width: var(--toggle-width);
+      --height: unset;
+      --border-radius: var(--toggle-border-radius);
       --background-color: var(--toggle-background-color);
       --background-color-hover: var(--toggle-background-color-hover);
       --background-color-readonly: var(--toggle-background-color-readonly);
@@ -17885,34 +17964,21 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         --toggle-background-color-disabled-checked
       );
 
-      margin: 2px;
-      border-radius: calc(
-        var(--toggle-thumb-size) / 2 + calc(var(--toggle-padding) * 2)
-      );
-
-      .navi_native_field {
-        border-radius: inherit;
-        appearance: none; /* This allows border-radius to have an effect */
-      }
-
       .navi_checkbox_field {
         position: relative;
         box-sizing: border-box;
-        width: var(--toggle-width);
-        height: auto;
-        padding: var(--toggle-padding);
+        width: var(--width);
+        height: var(--height);
+        padding: var(--padding);
         background-color: var(--x-background-color);
         border-color: transparent;
-        border-radius: inherit;
         user-select: none;
 
-        .navi_checkbox_marker {
-          /* position: absolute; */
+        .navi_checkbox_toggle {
           width: var(--toggle-thumb-size);
           height: var(--toggle-thumb-size);
           border-radius: var(--toggle-thumb-border-radius);
-          /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); */
-          opacity: 1;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
           fill: var(--toggle-thumb-color);
           transform: translateX(0);
           transition: transform 0.2s ease;
@@ -17920,7 +17986,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
       }
 
       &[data-checked] {
-        .navi_checkbox_marker {
+        .navi_checkbox_toggle {
           /* We remove padding 3 times */
           /* - twice to get real width (box-sizing: border-box) */
           /* - one more to apply right padding to the translation */
@@ -17935,6 +18001,41 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         }
       }
     }
+
+    &[data-appearance="icon"] {
+      --margin: 0;
+      --outline-offset: 0px;
+      --width: auto;
+      --height: auto;
+
+      .navi_checkbox_field {
+        background: none;
+        border: none;
+      }
+    }
+
+    &[data-appearance="button"] {
+      --margin: 0;
+      --outline-offset: 0px;
+      --width: auto;
+      --height: auto;
+      --padding: 4px;
+      --border-color: var(--button-border-color);
+      --border-color-hover: var(--button-border-color-hover);
+      --background-color: var(--button-background-color);
+      --background-color-hover: var(--button-background-color-hover);
+      --background-color-readonly: var(--button-background-color-readonly);
+      --background-color-disabled: var(--button-background-color-disabled);
+      --border-color-checked: var(--button-border-color);
+      --background-color-checked: var(--button-background-color);
+
+      .navi_checkbox_field {
+        padding-top: var(--padding-top, var(--padding-y, var(--padding)));
+        padding-right: var(--padding-right, var(--padding-x, var(--padding)));
+        padding-bottom: var(--padding-bottom, var(--padding-y, var(--padding)));
+        padding-left: var(--padding-left, var(--padding-x, var(--padding)));
+      }
+    }
   }
 `;
 const InputCheckbox = props => {
@@ -17962,14 +18063,13 @@ const InputCheckbox = props => {
   });
 };
 const CheckboxStyleCSSVars = {
-  "width": "--toggle-width",
-  "height": "--toggle-height",
+  "width": "--width",
+  "height": "--height",
   "outlineWidth": "--outline-width",
   "borderWidth": "--border-width",
-  "borderRadius": "--border-radius",
   "backgroundColor": "--background-color",
   "borderColor": "--border-color",
-  "color": "--color",
+  "accentColor": "--accent-color",
   ":hover": {
     backgroundColor: "--background-color-hover",
     borderColor: "--border-color-hover",
@@ -17989,6 +18089,22 @@ const CheckboxStyleCSSVars = {
     color: "--color-disabled"
   }
 };
+const CheckboxToggleStyleCSSVars = {
+  ...CheckboxStyleCSSVars,
+  width: "--toggle-width",
+  height: "--toggle-height",
+  borderRadius: "--border-radius"
+};
+const CheckboxButtonStyleCSSVars = {
+  ...CheckboxStyleCSSVars,
+  paddingTop: "--padding-top",
+  paddingRight: "--padding-right",
+  paddingBottom: "--padding-bottom",
+  paddingLeft: "--padding-left",
+  paddingX: "--padding-x",
+  paddingY: "--padding-y",
+  padding: "--padding"
+};
 const CheckboxPseudoClasses = [":hover", ":active", ":focus", ":focus-visible", ":read-only", ":disabled", ":checked", ":-navi-loading"];
 const CheckboxPseudoElements = ["::-navi-loader", "::-navi-checkmark"];
 const InputCheckboxBasic = props => {
@@ -18017,8 +18133,10 @@ const InputCheckboxBasic = props => {
     autoFocus,
     onClick,
     onInput,
-    color,
-    toggle,
+    accentColor,
+    icon,
+    appearance = icon ? "icon" : "checkbox",
+    // "checkbox", "toggle", "icon", "button"
     ...rest
   } = props;
   const defaultRef = useRef();
@@ -18066,25 +18184,26 @@ const InputCheckboxBasic = props => {
     }
   });
   const renderCheckboxMemoized = useCallback(renderCheckbox, [id, innerName, checked, innerRequired]);
+  const boxRef = useRef();
   useLayoutEffect(() => {
-    const naviCheckbox = ref.current;
+    const naviCheckbox = boxRef.current;
     const lightColor = "var(--checkmark-color-light)";
     const darkColor = "var(--checkmark-color-dark)";
-    const colorPicked = pickLightOrDark("var(--color)", lightColor, darkColor, naviCheckbox);
+    const colorPicked = pickLightOrDark("var(--accent-color)", lightColor, darkColor, naviCheckbox);
     if (colorPicked === lightColor) {
       naviCheckbox.removeAttribute("data-dark");
     } else {
       naviCheckbox.setAttribute("data-dark", "");
     }
-  }, [color]);
+  }, [accentColor]);
   return jsxs(Box, {
     as: "span",
     ...remainingProps,
-    ref: undefined,
-    "data-toggle": toggle ? "" : undefined,
+    ref: boxRef,
+    "data-appearance": appearance,
     baseClassName: "navi_checkbox",
     pseudoStateSelector: ".navi_native_field",
-    styleCSSVars: CheckboxStyleCSSVars,
+    styleCSSVars: appearance === "toggle" ? CheckboxToggleStyleCSSVars : appearance === "button" ? CheckboxButtonStyleCSSVars : CheckboxStyleCSSVars,
     pseudoClasses: CheckboxPseudoClasses,
     pseudoElements: CheckboxPseudoElements,
     basePseudoState: {
@@ -18092,7 +18211,7 @@ const InputCheckboxBasic = props => {
       ":disabled": innerDisabled,
       ":-navi-loading": innerLoading
     },
-    color: color,
+    accentColor: accentColor,
     hasChildFunction: true,
     preventInitialTransition: true,
     children: [jsx(LoaderBackground, {
@@ -18102,11 +18221,15 @@ const InputCheckboxBasic = props => {
       targetSelector: ".navi_checkbox_field"
     }), renderCheckboxMemoized, jsx("div", {
       className: "navi_checkbox_field",
-      children: toggle ? jsx(Box, {
+      children: icon ? jsx("div", {
+        className: "navi_checkbox_icon",
+        "aria-hidden": "true",
+        children: Array.isArray(icon) ? icon[checked ? 1 : 0] : icon
+      }) : appearance === "toggle" ? jsx(Box, {
+        className: "navi_checkbox_toggle",
         as: "svg",
         viewBox: "0 0 12 12",
         "aria-hidden": "true",
-        className: "navi_checkbox_marker",
         preventInitialTransition: true,
         children: jsx("circle", {
           cx: "6",
@@ -18114,10 +18237,10 @@ const InputCheckboxBasic = props => {
           r: "5"
         })
       }) : jsx(Box, {
+        className: "navi_checkbox_marker",
         as: "svg",
         viewBox: "0 0 12 12",
         "aria-hidden": "true",
-        className: "navi_checkbox_marker",
         preventInitialTransition: true,
         children: jsx("path", {
           d: "M10.5 2L4.5 9L1.5 5.5",
@@ -18146,9 +18269,10 @@ const InputCheckboxWithAction = props => {
   const defaultRef = useRef();
   const ref = props.ref || defaultRef;
   const [actionBoundToUIState] = useActionBoundToOneParam(action, uiState);
+  const actionStatus = useActionStatus(actionBoundToUIState);
   const {
     loading: actionLoading
-  } = useActionStatus(actionBoundToUIState);
+  } = actionStatus;
   const executeAction = useExecuteAction(ref, {
     errorEffect: actionErrorEffect
   });
@@ -18738,17 +18862,17 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
 
       --outline-color: var(--navi-focus-outline-color);
       --loader-color: var(--navi-loader-color);
-      --color: rgb(24, 117, 255);
+      --accent-color: rgb(24, 117, 255);
 
-      --border-color: rgba(150, 150, 150);
+      --border-color: rgb(150, 150, 150);
       --track-border-color: color-mix(
         in srgb,
         var(--border-color) 35%,
         transparent
       );
       --background-color: #efefef;
-      --fill-color: var(--color);
-      --thumb-color: var(--fill-color);
+      --fill-color: var(--accent-color);
+      --thumb-color: var(--accent-color);
       /* Hover */
       --border-color-hover: color-mix(in srgb, var(--border-color) 75%, black);
       --track-border-color-hover: color-mix(
@@ -18757,7 +18881,6 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         black
       );
       --track-color-hover: color-mix(in srgb, var(--fill-color) 95%, black);
-      --color-hover: color-mix(in srgb, var(--rail-color) 95%, black);
       --fill-color-hover: color-mix(in srgb, var(--fill-color) 80%, black);
       --thumb-color-hover: color-mix(in srgb, var(--thumb-color) 80%, black);
       /* Active */
@@ -18780,6 +18903,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
         var(--border-color) 30%,
         white
       );
+      --track-border-color-readonly: var(--border-color);
       --background-color-readonly: var(--background-color);
       --fill-color-readonly: color-mix(in srgb, var(--fill-color) 30%, grey);
       --thumb-color-readonly: var(--fill-color-readonly);
@@ -18886,14 +19010,14 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     }
 
     /* Hover */
-    &:hover {
+    &[data-hover] {
       --x-border-color: var(--border-color-hover);
       --x-track-border-color: var(--track-border-color-hover);
       --x-fill-color: var(--fill-color-hover);
       --x-thumb-color: var(--thumb-color-hover);
     }
     /* Active */
-    &:active {
+    &[data-active] {
       --x-border-color: var(--border-color-active);
       --x-track-border-color: var(--track-border-color-active);
       --x-background-color: var(--background-color-active);
@@ -18907,6 +19031,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
     /* Readonly */
     &[data-readonly] {
       --x-background-color: var(--background-color-readonly);
+      --x-track-border-color: var(--track-border-color-readonly);
       --x-border-color: var(--border-color-readonly);
       --x-fill-color: var(--fill-color-readonly);
       --x-thumb-color: var(--thumb-color-readonly);
@@ -18926,7 +19051,7 @@ installImportMetaCss(import.meta);import.meta.css = /* css */`
   /* Disabled */
   .navi_input_range[data-disabled] {
     --x-background-color: var(--background-color-disabled);
-    --x-color: var(--color-disabled);
+    --x-accent-color: var(--accent-color-disabled);
   }
   /* Callout (info, warning, error) */
   .navi_input_range[data-callout] {
@@ -18953,7 +19078,7 @@ const InputStyleCSSVars$1 = {
   "borderRadius": "--border-radius",
   "borderColor": "--border-color",
   "backgroundColor": "--background-color",
-  "color": "--color",
+  "accentColor": "--accent-color",
   ":hover": {
     borderColor: "--border-color-hover",
     backgroundColor: "--background-color-hover",