@appius-fr/apx 2.6.1 → 2.7.0

package/modules/tools/form-packer/packToJson.mjs

@@ -1,15 +1,19 @@
 /**
  * Convertit un formulaire HTML en objet JSON
  * @param {HTMLFormElement} form - Le formulaire à convertir
+ * @param {Object} [options] - Options de conversion
+ * @param {boolean} [options.numericKeysAlwaysArray=false] - Si true, toute clé numérique est traitée comme index de tableau (comportement d'avant 2.6.2). Sinon, heuristique : tableau seulement si indices denses 0,1,2,…,n.
  * @returns {Object} L'objet JSON résultant
  * @throws {TypeError} Si form n'est pas un HTMLFormElement
  */
-export const packFormToJSON = (form) => {
+export const packFormToJSON = (form, options = {}) => {
     // Validation de l'entrée
     if (!form || !(form instanceof HTMLFormElement)) {
         throw new TypeError('packFormToJSON expects an HTMLFormElement');
     }
 
+    const numericKeysAlwaysArray = options.numericKeysAlwaysArray === true;
+
     const formData = new FormData(form);
     const jsonData = {};
     
@@ -48,6 +52,7 @@ export const packFormToJSON = (form) => {
     
     const pathUsage = new Map(); // Map<pathString, PathUsage>
     const keyAnalysis = new Map(); // Map<basePath, {hasNumeric: boolean, hasString: boolean}>
+    const numericIndicesByPath = new Map(); // Map<pathString, Set<number>> — indices under each parent path
     const allEntries = [];
     
     /**
@@ -100,6 +105,13 @@ export const packFormToJSON = (form) => {
             if (part.type === 'key') {
                 currentPath = currentPath ? `${currentPath}[${part.name}]` : part.name;
             } else if (part.type === 'numeric') {
+                const parentPath = currentPath;
+                let set = numericIndicesByPath.get(parentPath);
+                if (!set) {
+                    set = new Set();
+                    numericIndicesByPath.set(parentPath, set);
+                }
+                set.add(part.index);
                 currentPath = `${currentPath}[${part.index}]`;
             } else if (part.type === 'array') {
                 currentPath = `${currentPath}[]`;
@@ -190,6 +202,34 @@ export const packFormToJSON = (form) => {
         return analysis?.hasNumeric && analysis?.hasString;
     };
 
+    /**
+     * True if indices are exactly 0, 1, 2, ..., n (dense, sequential from 0).
+     * @param {number[]} indices - Sorted array of indices
+     * @returns {boolean}
+     */
+    const isDenseSequential = (indices) => {
+        if (indices.length === 0) return false;
+        const sorted = [...indices].sort((a, b) => a - b);
+        for (let j = 0; j < sorted.length; j++) {
+            if (sorted[j] !== j) return false;
+        }
+        return true;
+    };
+
+    /**
+     * True if numeric keys under this path should be treated as array indices.
+     * With numericKeysAlwaysArray: always true when path has numeric children.
+     * Otherwise: true only when indices are dense 0..n.
+     * @param {string} parentPath - Path to the container that has numeric children
+     * @returns {boolean}
+     */
+    const useArrayForNumericPath = (parentPath) => {
+        const set = numericIndicesByPath.get(parentPath);
+        if (!set || set.size === 0) return true;
+        if (numericKeysAlwaysArray) return true;
+        return isDenseSequential([...set]);
+    };
+
     /**
      * Convertit un tableau en objet en préservant les indices numériques comme propriétés
      * @param {Array} arr - Le tableau à convertir
@@ -285,8 +325,9 @@ export const packFormToJSON = (form) => {
      * @param {*} value - La valeur à assigner
      * @param {Object} parent - Le conteneur parent
      * @param {string} basePath - Le chemin de base pour la détection de conflit
+     * @param {string} parentPath - Chemin du conteneur actuel (pour heuristique numeric)
      */
-    const processFinalValue = (container, part, value, parent, basePath) => {
+    const processFinalValue = (container, part, value, parent, basePath, parentPath) => {
         if (part.type === 'array') {
             // Tableau explicite avec []
             container[part.name] ??= [];
@@ -296,13 +337,18 @@ export const packFormToJSON = (form) => {
                 container[part.name] = [container[part.name], value];
             }
         } else if (part.type === 'numeric') {
-            // Indice numérique final
             const { index } = part;
-            container = ensureArray(container, parent.key, parent.container);
-            while (container.length <= index) {
-                container.push(undefined);
+            const useArray = useArrayForNumericPath(parentPath);
+            if (useArray) {
+                container = ensureArray(container, parent.key, parent.container);
+                while (container.length <= index) {
+                    container.push(undefined);
+                }
+                container[index] = value;
+            } else {
+                container = ensureObject(container, parent.key, parent.container, true);
+                container[index] = value;
             }
-            container[index] = value;
         } else {
             // Clé simple finale
             const conflict = hasConflict(basePath);
@@ -348,16 +394,14 @@ export const packFormToJSON = (form) => {
      */
     const processIntermediatePart = (container, part, nextPart, parent, basePath, parts, i, key) => {
         if (part.type === 'numeric') {
-            // Indice numérique : le container doit être un tableau ou un objet (selon conflit)
             const { index } = part;
-            const conflict = hasConflict(basePath);
+            const parentPath = buildPathString(parts.slice(0, i));
+            const useArray = useArrayForNumericPath(parentPath) && !hasConflict(basePath);
             
-            if (conflict) {
-                // Conflit : utiliser un objet (les indices seront des propriétés)
+            if (!useArray) {
                 container = ensureObject(container, parent.key, parent.container, true);
                 container[index] ??= {};
                 if (typeof container[index] !== 'object' || container[index] === null) {
-                    // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
                     const pathParts = parts.slice(0, i + 1);
                     const currentPath = buildPathString(pathParts);
                     throw new Error(
@@ -367,14 +411,12 @@ export const packFormToJSON = (form) => {
                     );
                 }
             } else {
-                // Pas de conflit : utiliser un tableau
                 container = ensureArray(container, parent.key, parent.container);
                 while (container.length <= index) {
                     container.push(undefined);
                 }
                 container[index] ??= {};
                 if (typeof container[index] !== 'object' || container[index] === null) {
-                    // Cette erreur ne devrait jamais se produire si la détection fonctionne correctement
                     const pathParts = parts.slice(0, i + 1);
                     const currentPath = buildPathString(pathParts);
                     throw new Error(
@@ -459,8 +501,8 @@ export const packFormToJSON = (form) => {
             const parent = path[path.length - 1];
 
             if (isLast) {
-                // Dernière partie : assigner la valeur
-                processFinalValue(container, part, value, parent, basePath);
+                const parentPath = buildPathString(parts.slice(0, i));
+                processFinalValue(container, part, value, parent, basePath, parentPath);
             } else {
                 // Partie intermédiaire : créer la structure
                 const newContainer = processIntermediatePart(container, part, nextPart, parent, basePath, parts, i, key);

package/modules/tristate/CHANGELOG.md

@@ -0,0 +1,34 @@
+# Tristate Module Changelog
+
+This changelog tracks updates for `modules/tristate` between APX releases.
+
+## TBA (next release)
+
+### Added
+- **Chainable API**: `tristate(options)` now returns an object with `setChildren(childrenApx)`. Use it to link a parent tristate to its child checkboxes.
+- **Parent + sub-checkboxes**: `setChildren(childrenApx)` wires one parent (first in the selection) to all child checkboxes. Parent reflects children (all checked → parent checked, all crossed → parent crossed, all unchecked → parent empty, **mixed → parent shows indeterminate dash**). Clicking the parent applies its new state to all children. Children are initialized as tristates with the same options as the parent.
+- **Automatic indeterminate (dash)**: When `setChildren()` is used, the parent automatically gets the indeterminate (dash) appearance **only when children are mixed**. When all children are unchecked the parent shows an empty frame. Indeterminate is no longer a manual option; it is derived from child states.
+- New `colors` option: an object grouping color targets.
+  - `colors.tick`: checked/crossed symbol color (default: `transparent`).
+  - `colors.checked`: checked state background (default: `#0654ba`).
+  - `colors.crossed`: crossed state background (default: `#f00`).
+  - Flat options `tickColor`, `checkedColor`, `crossedColor` remain supported for backward compatibility; `colors` takes precedence when both are set.
+- CSS class `apx-tristate--mixed`: when the parent has indeterminate-dash and `--mixed`, the dash is shown; when not `--mixed` (e.g. all children unchecked), the parent shows an empty unchecked frame. Used internally by `setChildren()`.
+
+### Changed
+- `size.width` and `size.height` accept numbers (treated as pixels) or strings (used as CSS length, e.g. `'1.25rem'`, `'20px'`). Invalid types throw `TypeError`.
+- Tristate symbols (check and cross) are rendered with `mask-image` and data URIs over themeable backgrounds. Unchecked and indeterminate-dash assets are inlined as data URIs in CSS so the demo works from `file://` without CORS.
+- Unchecked icon uses a rounded inset (`4px`). Indeterminate (dash) uses checked background + tick-colored dash; indeterminate (filled check) uses checked background only with `border-radius: inherit`.
+- **State classes**: Only one of `unchecked` / `checked` / `crossed` is ever set on the tristate DOM (fixes parent with `setChildren` incorrectly showing indeterminate when state was `crossed`). `setDefaultState` and `toggleTriStateCheckboxState` now clear all three before adding the active one.
+- Asset `tristate-indeterminate.svg` renamed to `tristate-indeterminate-dash.svg`.
+
+### Removed
+- **Breaking**: Options `uncheckedAppearance` and `indeterminateDisplay` have been removed. Indeterminate (dash) is no longer configurable manually; it is applied automatically on parents that use `setChildren()` when their children are in a mixed state.
+
+### Docs & Demo
+- Demo `demo/modules/tristate/index.html`: Parameters (size + colors), Live preview, States preview, Interactive cycle, **Parent + sub-checkboxes** real-world section using `APX('#policyParent').tristate(opts).setChildren(APX('#policyEmail, #policySms, #policyPush'))`. Removed manual uncheckedAppearance/indeterminateDisplay controls and the separate “Unchecked appearance” preview section.
+- README: documented `setChildren(childrenApx)`, automatic indeterminate when mixed, and removed `uncheckedAppearance` / `indeterminateDisplay` from the options list.
+
+## 2.6.2 (current)
+
+Baseline for this changelog. Tristate visuals and options prior to the theming improvements above.

package/modules/tristate/README.md

@@ -1,95 +1,158 @@
-# APX Tri-State Checkbox Module
-
-The APX Tri-State Checkbox module provides an augmentation to the `APX` object. This functionality allows you to easily transform standard checkboxes within an `APX` object into tri-state checkboxes.
-
-## Installation
-
-Ensure you have the core `APX` object integrated into your project.
-
-Next, to use this augmentation, make sure you've imported and added the `tristate` module to your project:
-
-```javascript
-import APX from 'path-to-APX';
-// Assuming tristate is part of APX's module structure
-```
-
-Also, link the required CSS:
-
-```html
-<link rel="stylesheet" href="path-to-css/tristate.css">
-```
-
-## Usage
-
-To transform a group of checkboxes into tri-state checkboxes using the `APX` object, first create an `APX` object containing the checkboxes you wish to transform, then simply call the `tristate` method:
-
-```javascript
-const myApxCheckboxes = APX('.my-checkbox-class');
-myApxCheckboxes.tristate();
-```
-
-### Parameters
-
-The `tristate` method accepts an `options` parameter which can have the following properties:
-
-- `size`: An object that defines the `width` and `height` of the tri-state checkbox.
-  - `width`: Width of the checkbox in pixels (e.g., `50` for 50px width).
-  - `height`: Height of the checkbox in pixels.
-  
-- `classes`: A string or an array of strings representing classes to be added to the custom checkbox. The string can contain class names separated by spaces or commas.
-
-- `defaultState`: A string that defines the default state of the tri-state checkbox. Possible values are 'checked', 'unchecked', and 'crossed'.
-
-- `callbacks`: An object that contains callback functions.
-  - `after`: A function that is called after the tri-state checkbox is created.
-  - `change`: A function that is called when the tri-state checkbox state changes.
-
-- `bubbleEvents`: A boolean that determines whether events (`click`, `keyup`, `change`) on the custom checkbox should bubble up to the original checkbox.
-
-Example:
-
-```javascript
-const options = {
-    size: {
-        width: 50,
-        height: 30
-    },
-    classes: 'myClass1 myClass2',
-    defaultState: 'checked',
-    callbacks: {
-        after: function(originalCheckbox, tristateDom, hiddenInput) {
-            console.log("Checkbox created!");
-        },
-        change: function(originalCheckbox, tristateDom, hiddenInput) {
-            console.log("Checkbox state changed!");
-        }
-    },
-    bubbleEvents: true
-};
-
-const myApxCheckboxes = APX('.my-checkbox-class');
-myApxCheckboxes.tristate(options);
-```
-
-## Features
-
-### Tri-State Logic
-
-The checkbox will cycle through three states:
-
-1. Checked (represented by a tick)
-2. Crossed (represented by a cross)
-3. Unchecked (default checkbox state)
-
-### Accessibility
-
-The tri-state checkbox retains the `tabIndex` property of the original checkbox, ensuring the accessibility of the control.
-
-### Event Bubbling
-
-Any `click`, `keyup`, or `change` events attached to the original checkbox will be bubbled up from the custom checkbox if the `bubbleEvents` option is set to true. This ensures that your existing event listeners will still work as expected and that custom callbacks can also be executed.
-
-
-## License
-
+# APX Tri-State Checkbox Module
+
+The APX Tri-State Checkbox module provides an augmentation to the `APX` object. This functionality allows you to easily transform standard checkboxes within an `APX` object into tri-state checkboxes.
+
+### When to use this module
+
+This module is designed for **whitelist/blacklist** and **inheritance-based policy** UIs: permissions, feature flags, or rule matrices where each row can be explicitly allowed, explicitly denied, or left unspecified (inherit/default). Three distinct states avoid forcing a binary choice and keep policy intent clear both in the UI and when submitting to the backend.
+
+## Installation
+
+Ensure you have the core `APX` object integrated into your project.
+
+Next, to use this augmentation, make sure you've imported and added the `tristate` module to your project:
+
+```javascript
+import APX from 'path-to-APX';
+// Assuming tristate is part of APX's module structure
+```
+
+Also, link the required CSS:
+
+```html
+<link rel="stylesheet" href="path-to-css/tristate.css">
+```
+
+## Usage
+
+To transform a group of checkboxes into tri-state checkboxes using the `APX` object, first create an `APX` object containing the checkboxes you wish to transform, then simply call the `tristate` method:
+
+```javascript
+const myApxCheckboxes = APX('.my-checkbox-class');
+myApxCheckboxes.tristate();
+```
+
+**Example: policy row (whitelist/blacklist)** — one checkbox per permission, submitted as allow/deny/inherit:
+
+```html
+<form>
+  <label>Can edit <input type="checkbox" name="perm_edit" class="policy-cb"></label>
+  <label>Can delete <input type="checkbox" name="perm_delete" class="policy-cb"></label>
+</form>
+<script>
+  APX('.policy-cb').tristate({
+    defaultState: 'unchecked',
+    colors: { tick: '#fff' },
+    callbacks: { change: (_, el, hidden) => console.log(hidden.name, hidden.value || 'inherit'); }
+  });
+</script>
+```
+
+### Parameters
+
+The `tristate` method accepts an `options` parameter which can have the following properties:
+
+- `size`: An object that defines the `width` and `height` of the tri-state checkbox.
+  - `width`: Numeric value is treated as pixels (e.g. `50` → `50px`); string values are used as-is (e.g. `'1.25rem'`, `'20px'`).
+  - `height`: Same as `width` (number = px, string = any CSS length).
+  
+- `classes`: A string or an array of strings representing classes to be added to the custom checkbox. The string can contain class names separated by spaces or commas.
+
+- `defaultState`: A string that defines the default state of the tri-state checkbox. Possible values are 'checked', 'unchecked', and 'crossed'.
+
+- `colors`: An object grouping color targets (recommended). Omitted keys keep CSS defaults.
+  - `tick`: CSS color for the check/cross symbol. Default is `transparent`.
+  - `checked`: CSS color for the checked state background. Default is `#0654ba`.
+  - `crossed`: CSS color for the crossed state background. Default is `#f00`.
+  - For backward compatibility, the flat options `tickColor`, `checkedColor`, and `crossedColor` are still supported; they are overridden by `colors` when both are present.
+
+- `callbacks`: An object that contains callback functions.
+  - `after`: A function that is called after the tri-state checkbox is created.
+  - `change`: A function that is called when the tri-state checkbox state changes.
+
+- `bubbleEvents`: A boolean that determines whether events (`click`, `keyup`, `change`) on the custom checkbox should bubble up to the original checkbox.
+
+### Parent + sub-checkboxes: `setChildren(childrenApx)`
+
+`tristate()` returns a chainable object with a `setChildren` method. Use it to link one parent tristate to its child checkboxes. The parent then reflects the children (all checked → parent checked, all crossed → parent crossed, all unchecked → parent empty, **mixed children → parent shows indeterminate dash**). Clicking the parent applies its new state to all children.
+
+The indeterminate (dash) appearance is **automatically** applied to the parent when `setChildren` is used: the dash is shown only when the children are in a mixed state; when all are unchecked the parent shows an empty frame.
+
+```javascript
+APX('#policyParent').tristate({ size: { width: 28, height: 28 }, colors: { tick: '#fff' }, defaultState: 'unchecked' })
+  .setChildren(APX('#policyEmail, #policySms, #policyPush'));
+```
+
+- Only the **first** parent in the APX selection is linked to **all** children in the given APX. For multiple parent/child groups, call `tristate().setChildren()` per parent.
+- Children are initialized as tristates with the same options as the parent (plus internal change callbacks). If they are already tristates, they are just linked.
+
+Example:
+
+```javascript
+const options = {
+    size: {
+        width: 50,
+        height: 30
+    },
+    classes: 'myClass1 myClass2',
+    defaultState: 'checked',
+    callbacks: {
+        after: function(originalCheckbox, tristateDom, hiddenInput) {
+            console.log("Checkbox created!");
+        },
+        change: function(originalCheckbox, tristateDom, hiddenInput) {
+            console.log("Checkbox state changed!");
+        }
+    },
+    colors: {
+        tick: '#ffffff',
+        checked: '#0654ba',
+        crossed: '#ff0000'
+    },
+    bubbleEvents: true
+};
+
+const myApxCheckboxes = APX('.my-checkbox-class');
+myApxCheckboxes.tristate(options);
+```
+
+## Features
+
+### Tri-State Logic
+
+The checkbox will cycle through three states:
+
+1. Checked (represented by a tick)
+2. Crossed (represented by a cross)
+3. Unchecked (default checkbox state)
+
+### Whitelist/Blacklist semantics
+
+For policy UIs, map the three states as follows:
+
+| State     | Visual | Typical meaning        | Backend value (via hidden input) |
+|-----------|--------|-------------------------|----------------------------------|
+| Checked   | Tick   | Allow / whitelist       | `true` (or your chosen value)   |
+| Crossed   | Cross  | Deny / blacklist        | `false` (or your chosen value)  |
+| Unchecked | Empty  | Inherit / default / N/A | Not submitted (no value)        |
+
+This gives you an explicit **deny vs not-set** distinction: users can leave a row unspecified instead of being forced to choose allow or deny.
+
+### Benefits
+
+- **Explicit allow/deny vs inherit** — Unchecked means “no override”; checked and crossed mean explicit policy decisions.
+- **Cleaner inheritance** — Hierarchical rules (e.g. org → team → user) can override only where needed; other levels inherit.
+- **Auditability** — It is clear in the UI and in submitted data whether a rule was explicitly denied or simply not set.
+
+### Accessibility
+
+The tri-state checkbox retains the `tabIndex` property of the original checkbox, ensuring the accessibility of the control.
+
+### Event Bubbling
+
+Any `click`, `keyup`, or `change` events attached to the original checkbox will be bubbled up from the custom checkbox if the `bubbleEvents` option is set to true. This ensures that your existing event listeners will still work as expected and that custom callbacks can also be executed.
+
+
+## License
+
 Copyright Appius SARL

package/modules/tristate/assets/tristate-checked.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#0654ba" />
+</svg>

package/modules/tristate/assets/tristate-cross.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <path
+    d="M8 8L24 24M24 8L8 24"
+    fill="none"
+    stroke="#fff"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/modules/tristate/assets/tristate-crossed.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <rect width="32" height="32" fill="#f00" />
+</svg>

package/modules/tristate/assets/tristate-indeterminate-dash.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <path
+    d="M8 16h16"
+    fill="none"
+    stroke="#fff"
+    stroke-width="3"
+    stroke-linecap="round"
+  />
+</svg>

package/modules/tristate/assets/tristate-tick.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <path
+    d="M6 17L12 23L26 9"
+    fill="none"
+    stroke="#fff"
+    stroke-width="3"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

package/modules/tristate/assets/tristate-unchecked.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+  <mask id="frame-cutout">
+    <rect width="32" height="32" fill="#fff" />
+    <rect x="3" y="3" width="26" height="26" rx="4" ry="4" fill="#000" />
+  </mask>
+  <rect width="32" height="32" fill="#cccccc" mask="url(#frame-cutout)" />
+</svg>

package/modules/tristate/css/tristate.css

@@ -1,25 +1,92 @@
-.apx-tristate {
-    display: inline-block;
-    vertical-align: middle;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    min-width:13px;
-    min-height:13px;
-    background-size: contain;
-    background-color: white;
-    border-radius:3px;
-}
-.apx-tristate.unchecked {
-    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E');
-}
-.apx-tristate.checked {
-    background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E');
-    background-repeat: no-repeat;
-    background-position: center;
-}
-.apx-tristate.crossed {
-    background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705z%22%20fill%3D%22%23f00%22%2F%3E%3Cpath%20d%3D%22m8%208%2016%2016%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%208L8%2024%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E');
-    background-repeat: no-repeat;
-    background-position: center;
+.apx-tristate {
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    position: relative;
+    min-width:13px;
+    min-height:13px;
+    background-size: contain;
+    background-color: transparent;
+    border-radius:3px;
+    --apx-tristate-tick-color: transparent;
+    --apx-tristate-checked-color: #0654ba;
+    --apx-tristate-crossed-color: #f00;
+}
+.apx-tristate.unchecked {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cmask id='frame-cutout'%3E%3Crect width='32' height='32' fill='%23fff'/%3E%3Crect x='3' y='3' width='26' height='26' rx='4' ry='4' fill='%23000'/%3E%3C/mask%3E%3Crect width='32' height='32' fill='%23cccccc' mask='url(%23frame-cutout)'/%3E%3C/svg%3E");
+}
+.apx-tristate.unchecked.apx-tristate--unchecked-indeterminate::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    pointer-events: none;
+}
+/* When --mixed is used (e.g. parent + sub-checkboxes), dash shows only when children are mixed */
+.apx-tristate.unchecked.apx-tristate--indeterminate-dash:not(.apx-tristate--mixed)::before,
+.apx-tristate.unchecked.apx-tristate--indeterminate-dash:not(.apx-tristate--mixed)::after {
+    display: none;
+}
+.apx-tristate.unchecked.apx-tristate--indeterminate-dash::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    pointer-events: none;
+    background-color: var(--apx-tristate-checked-color);
+    border-radius: inherit;
+}
+.apx-tristate.unchecked.apx-tristate--indeterminate-dash::after {
+    background-color: var(--apx-tristate-tick-color);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-mode: alpha;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 100% 100%;
+    mask-mode: alpha;
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 16h16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 16h16' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
+}
+.apx-tristate.unchecked.apx-tristate--indeterminate-filled-check::after {
+    background-color: var(--apx-tristate-checked-color);
+    border-radius: inherit;
+}
+.apx-tristate.checked {
+    background-image: none;
+    background-color: var(--apx-tristate-checked-color);
+}
+.apx-tristate.crossed {
+    background-image: none;
+    background-color: var(--apx-tristate-crossed-color);
+}
+
+.apx-tristate.checked::after,
+.apx-tristate.crossed::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    background-color: var(--apx-tristate-tick-color);
+    -webkit-mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    -webkit-mask-size: 100% 100%;
+    -webkit-mask-mode: alpha;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 100% 100%;
+    mask-mode: alpha;
+    pointer-events: none;
+}
+
+.apx-tristate.checked::after {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 17L12 23L26 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 17L12 23L26 9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.apx-tristate.crossed::after {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 8L24 24M24 8L8 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 8L24 24M24 8L8 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 }