@massimo-cassandro/minimo 0.16.1 → 1.0.0

package/design-tokens/components/snackbar.minimo.tokens.jsonc

@@ -71,6 +71,18 @@
           "$value": "{snackbar.text.color}"
         }
       },
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "transparent"
+        }
+      },
+      "border": {
+        "color": {
+          "$type": "color",
+          "$value": "transparent"
+        }
+      },
       "hover": {
         "background": {
           "color": {

package/design-tokens/components/unsplash-page.minimo.tokens.jsonc

@@ -0,0 +1,132 @@
+// -----------------------------------------------------------------------
+// Generated file — do not edit manually.
+// This file is produced by the design-token build pipeline.
+// Source of truth: the token files in the project source directory.
+// Re-generate with: node build-tokens.mjs --config <path/to/config>
+// -----------------------------------------------------------------------
+{
+  "up": {
+    "bg": {
+      "color": {
+        "$type": "color",
+        "$value": "hsl(0deg 0% 0% / .7)"
+      }
+    },
+    "text": {
+      "color": {
+        "$type": "color",
+        "$value": "#fff"
+      }
+    },
+    "line-height": {
+      "$type": "number",
+      "$value": "{line-height.sm}"
+    },
+    "font": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "{font.family}"
+      },
+      "size": {
+        "$type": "dimension",
+        "$value": "{font.size.base}"
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.regular}"
+      },
+      "variation-settings": {
+        "$type": "string",
+        "$value": "unset"
+      }
+    },
+    "credits": {
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.xs}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.regular}"
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{line-height.xs}"
+      }
+    },
+    "h1": {
+      "color": {
+        "$type": "color",
+        "$value": "{up.text.color}"
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.xl}"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.bold}"
+        },
+        "variation-settings": {
+          "$type": "string",
+          "$value": "unset"
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{line-height.xs}"
+      }
+    },
+    "icon": {
+      "box": {
+        "bg": {
+          "$type": "color",
+          "$value": "{up.link.color}"
+        }
+      },
+      "fill": {
+        "color": {
+          "$type": "color",
+          "$value": "#333"
+        }
+      },
+      "hover": {
+        "box": {
+          "bg": {
+            "$type": "color",
+            "$value": "#fff"
+          }
+        }
+      }
+    },
+    "link": {
+      "color": {
+        "$type": "color",
+        "$value": "#fc0"
+      },
+      "decoration": {
+        "$type": "string",
+        "$value": "none"
+      },
+      "hover": {
+        "color": {
+          "$type": "color",
+          "$value": "#fc0"
+        },
+        "decoration": {
+          "$type": "string",
+          "$value": "underline"
+        }
+      }
+    },
+    "loader": {
+      "color": {
+        "$type": "color",
+        "$value": "hsl(0deg 0% 100% / .6)"
+      }
+    }
+  }
+}

package/design-tokens/table.minimo.tokens.jsonc

@@ -20,6 +20,26 @@
         }
       }
     },
+    "tfoot": {
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "{table.thead.background.color}"
+        }
+      },
+      "border": {
+        "width": {
+          "$type": "dimension",
+          "$value": "{table.thead.border.width}"
+        }
+      },
+      "font": {
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.weight.semibold}"
+        }
+      }
+    },
     "body": {
       "border": {
         "width": {

package/design-tokens/typography.minimo.tokens.jsonc

@@ -52,12 +52,6 @@
         "$value": "clamp(2.2rem, .2308rem + 3.0769vw, 3rem)"
       }
     },
-    "line-height": {
-      "base": {
-        "$type": "number",
-        "$value": "1.5"
-      }
-    },
     "style": {
       "base": {
         "$type": "string",
@@ -98,5 +92,19 @@
         "$value": "900"
       }
     }
+  },
+  "line-height": {
+    "base": {
+      "$type": "number",
+      "$value": 1.5
+    },
+    "sm": {
+      "$type": "number",
+      "$value": 1.4
+    },
+    "xs": {
+      "$type": "number",
+      "$value": 1.25
+    }
   }
 }

package/design-tokens-src/_readme.md

@@ -1,5 +1,5 @@
 
-## SD Types
+# SD Types
 
 * **Color** (`$type` value: `color`)
   * Colors in Hex, RGB, HSL, or standard names.  ("#00ff00" or "rgba(0,0,0,0.5)" )
@@ -15,6 +15,9 @@
   * Name of the font family or list (array).  ("Inter", ["Helvetica", "Arial"] )
 * **Font Weight** (`fontWeight`)
   * Font weight (number or text alias).  (700, "bold", "light" )
+
+## compounds: 
+
 * **border** (`border`)
   * Compound: requires color, width, style.  ({"color": "#000", "width": "1px", "style": "solid"} )
 * **Shadow** (`shadow`)

package/design-tokens-src/components/snackbar.minimo.tokens.mjs

@@ -69,6 +69,18 @@ export default{
           $type: 'color'
         }
       },
+      background: {
+        color: {
+          $value: 'transparent',
+          $type: 'color'
+        }
+      },
+      border: {
+        color: {
+          $value: 'transparent',
+          $type: 'color'
+        }
+      },
 
       hover: {
         background: {

package/design-tokens-src/components/unsplash-page.minimo.tokens.mjs

@@ -0,0 +1,141 @@
+export default {
+  up: {
+    bg: {
+      color: {
+        $type: 'color',
+        $value: 'hsl(0deg 0% 0% / .7)'
+      }
+    },
+    text: {
+      color: {
+        $type: 'color',
+        $value: '#fff'
+
+      }
+    },
+    'line-height': {
+      $type: 'number',
+      $value: '{line-height.sm}'
+    },
+    font: {
+      family: {
+        $type: 'fontFamily',
+        $value: '{font.family}'
+      },
+      size: {
+        $type: 'dimension',
+        $value: '{font.size.base}'
+
+      },
+      weight: {
+        $type: 'fontWeight',
+        $value: '{font.weight.regular}'
+      },
+      'variation-settings': {
+        $type: 'string',
+        $value: 'unset'
+      }
+    }, // end base setup
+
+    // credit box
+    credits: {
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.xs}'
+        },
+        weight: {
+          $type: 'fontWeight',
+          $value: '{font.weight.regular}'
+        },
+      },
+      'line-height': {
+        $type: 'number',
+        $value: '{line-height.xs}'
+      },
+    }, // end credits
+
+    // title
+    h1: {
+      color: {
+        $type: 'color',
+        $value: '{up.text.color}'
+      },
+      font: {
+        size: {
+          $type: 'dimension',
+          $value: '{font.size.xl}'
+        },
+        weight: {
+          $type: 'fontWeight',
+          $value: '{font.weight.bold}'
+        },
+        'variation-settings': {
+          $type: 'string',
+          $value: 'unset'
+        }
+      },
+      'line-height': {
+        $type: 'number',
+        $value: '{line-height.xs}'
+      },
+    }, // end h1
+
+    // icons
+    icon: {
+      box: {
+        bg: {
+          $type: 'color',
+          $value: '{up.link.color}'
+        }
+      },
+      fill: {
+        color: {
+          $type: 'color',
+          $value: '#333'
+        }
+      },
+      hover: {
+        box: {
+          bg: {
+            $type: 'color',
+            $value: '#fff'
+          }
+        },
+      }
+    }, // end icons
+
+    // links
+    link: {
+      color: {
+        $type: 'color',
+        $value: '#fc0'
+      },
+      decoration: {
+        $type: 'string',
+        $value: 'none'
+      },
+      hover: {
+        color: {
+          $type: 'color',
+          $value: '#fc0'
+        },
+        decoration: {
+          $type: 'string',
+          $value: 'underline'
+        },
+
+      }
+
+    }, // end link
+
+    // loader
+    loader: {
+      color: {
+        $type: 'color',
+        $value: 'hsl(0deg 0% 100% / .6)'
+      }
+    } // end loader
+
+  } // end up
+};

package/design-tokens-src/table.minimo.tokens.mjs

@@ -0,0 +1,86 @@
+export default {
+  table: {
+    thead: {
+      background: {
+        color: {
+          $type: 'color',
+          $value: '#ddd'
+        }
+      },
+      border: {
+        width : {
+          $type: 'dimension',
+          $value: '3px'
+        }
+      }
+    },
+    tfoot: {
+      background: {
+        color: {
+          $type: 'color',
+          $value: '{table.thead.background.color}'
+        }
+      },
+      border: {
+        width : {
+          $type: 'dimension',
+          $value: '{table.thead.border.width}'
+        }
+      },
+      font: {
+        weight: {
+          $type: 'fontWeight',
+          $value: '{font.weight.semibold}',
+        }
+      }
+    },
+
+    body: {
+      background: {
+        color: null
+      },
+      border: {
+        'width' : {
+          $type: 'dimension',
+          $value: '1px'
+        }
+      },
+      tr: {
+        'alt-bg-color': {
+          $type: 'color',
+          $value: '#efefef'
+        },
+        'hover-bg-color': {
+          $type: 'color',
+          $value: '#cbcbcb'
+        }
+      }
+    },
+
+    border: {
+      'color' : {
+        $type: 'color',
+        $value: '#333'
+      }
+    },
+
+    cell: {
+      'padding' : {
+        block: {
+          $type: 'dimension',
+          $value: '.3rem'
+        },
+        inline: {
+          $type: 'dimension',
+          $value: '.6rem'
+        }
+      },
+      'line-height': {
+        $type: 'number',
+        $value: '1.3'
+      }
+    }
+
+
+  }
+};

package/design-tokens-src/typography.minimo.tokens.jsonc

@@ -55,16 +55,6 @@
     },
 
 
-    // Rhythm in Web Typography | Better Web Type <https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/>
-    // The good line-height <https://www.thegoodlineheight.com/>
-
-    "line-height": {
-      "base": {
-        "$value": "1.5",
-        "$type": "number"
-      }
-    },
-
     "style": {
       "base": {
         "$value": "normal",
@@ -116,5 +106,24 @@
         "$description": ""
       }
     }
-  }
+  }, // end font
+
+  // Rhythm in Web Typography | Better Web Type <https://betterwebtype.com/articles/2018/10/15/rhythm-in-web-typography/>
+  // The good line-height <https://www.thegoodlineheight.com/>
+
+  "line-height": {
+    "base": {
+      "$value": 1.5,
+      "$type": "number"
+    },
+    "sm": {
+      "$value": 1.4,
+      "$type": "number"
+    },
+    "xs": {
+      "$value": 1.25,
+      "$type": "number"
+    }
+
+  },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "0.16.1",
+  "version": "1.0.0",
   "description": "Light css framework & utilities",
   "type": "module",
   "homepage": "https://github.com/massimo-cassandro/minimo#readme",

package/src/components/modal-alert/TODO.md

@@ -1,2 +1,3 @@
 da rivedere
 spostare custom props nel dictionary
+eliminare customization-templates, gestire tutto da tokens

package/src/components/unsplash-page/TODO.md

@@ -1,2 +1,3 @@
 riscrivere css con sizes
 rivedere js
+importare css direttamente nel js

package/src/components/unsplash-page/unsplash-page.module.css

@@ -1,6 +1,6 @@
 /*
   PERSONALIZZAZIONE
-  custom properties (valori di default):
+  custom properties (valori di default, vedi /design-tokens-src/components/unsplash-page.minimo.tokens.mjs):
 
   Basic props:
   --up-bg-color: hsl(0deg 0% 0% / .7);
@@ -157,14 +157,14 @@
   }
 
   .upArrowWrapper {
-    --arrow-size: 2rem;
-    --arrow-position: calc(var(--arrow-size) * .25 * -1);
+    --_arrow-size: 2rem;
+    --_arrow-position: calc(var(--_arrow-size) * .25 * -1);
 
     position: absolute;
-    bottom: var(--arrow-position);
-    left: var(--arrow-position);
-    width: var(--arrow-size);
-    height: var(--arrow-size);
+    bottom: var(--_arrow-position);
+    left: var(--_arrow-position);
+    width: var(--_arrow-size);
+    height: var(--_arrow-size);
     color: var(--up-icon-fill-color, #333);
     cursor: w-resize;
     background-color: var(--up-icon-box-bg, var(--up-link-color, #fc0));
@@ -189,7 +189,7 @@
   &.hidden {
     translate: calc(-1 * (50dvw + 50% - 2rem));
     .upArrowWrapper {
-      right: var(--arrow-position);
+      right: var(--_arrow-position);
       left: auto;
       cursor: e-resize;
       rotate: .5turn;

package/src/css/layout-base.css

@@ -6,7 +6,7 @@ html, body {
   font-family: var(--font-family);
   font-size: var(--font-size-base);
   font-style: var(--font-style-base);
-  line-height: var(--font-line-height-base);
+  line-height: var(--line-height-base);
   color: var(--text-color);
   accent-color: var(--accent-color);
   background-color: var(--body-background-color);

package/src/css/table.css

@@ -22,6 +22,7 @@
   tr {
     border-bottom: var(--_border);
   }
+
   thead {
     background-color: var(--table-thead-background-color);
     tr:last-child {
@@ -29,6 +30,16 @@
     }
   }
 
+  tfoot {
+    background-color: var(--table-tfoot-background-color);
+    tr:first-child {
+      border-block-start: var(--table-tfoot-border-width) solid var(--_border-color);
+    }
+    th, td {
+      font-weight: var(--table-tfoot-font-weight);
+    }
+  }
+
   tbody {
     tr:nth-child(even) {
       background-color: var(--_alternate-row-bg);

package/src/custom-properties.css

@@ -92,7 +92,6 @@
   --flex-grid-gap: 1.5rem;
   --font-family: sans-serif;
   --font-family-mono: 'Monaspace Neon Var', 'Monaspace Neon', 'Aptos Mono', 'Roboto Mono', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Andale Mono', 'Courier New', monospace;
-  --font-line-height-base: 1.5;
   --font-size-2xl: clamp(2rem, .7692rem + 1.9231vw, 2.5rem);
   --font-size-3xl: clamp(2.2rem, .2308rem + 3.0769vw, 3rem);
   --font-size-base: clamp(.9rem, .6538rem + .3846vw, 1rem);
@@ -182,6 +181,9 @@
   --headings-h4-font-size: var(--font-size-md);
   --headings-text-align: inherit;
   --layout-container-max-width: 80rem;
+  --line-height-base: 1.5;
+  --line-height-sm: 1.4;
+  --line-height-xs: 1.25;
   --link-active-background-color: transparent;
   --link-active-color: #51054c;
   --link-color: #0d12ae;
@@ -234,6 +236,8 @@
   --snackbar-border-radius: var(--radius-xs);
   --snackbar-btn-close-active-background-color: transparent;
   --snackbar-btn-close-active-icon-color: var(--snackbar-text-color);
+  --snackbar-btn-close-background-color: transparent;
+  --snackbar-btn-close-border-color: transparent;
   --snackbar-btn-close-focus-outline-color: color-mix(in srgb, var(--snackbar-text-color) 50%, transparent);
   --snackbar-btn-close-focus-outline-offset: .125rem;
   --snackbar-btn-close-focus-outline-width: .125rem;
@@ -276,6 +280,9 @@
   --table-cell-line-height: 1.3;
   --table-cell-padding-block: .3rem;
   --table-cell-padding-inline: .6rem;
+  --table-tfoot-background-color: var(--table-thead-background-color);
+  --table-tfoot-border-width: var(--table-thead-border-width);
+  --table-tfoot-font-weight: var(--font-weight-semibold);
   --table-thead-background-color: #ddd;
   --table-thead-border-width: .1875rem;
   --text-color: #000;
@@ -284,6 +291,29 @@
   --text-negative: #fff;
   --text-selected-background-color: #ddd;
   --text-selected-color: var(--body-text);
+  --up-bg-color: hsl(0deg 0% 0% / .7);
+  --up-credits-font-size: var(--font-size-xs);
+  --up-credits-font-weight: var(--font-weight-regular);
+  --up-credits-line-height: var(--line-height-xs);
+  --up-font-family: var(--font-family);
+  --up-font-size: var(--font-size-base);
+  --up-font-variation-settings: unset;
+  --up-font-weight: var(--font-weight-regular);
+  --up-h1-color: var(--up-text-color);
+  --up-h1-font-size: var(--font-size-xl);
+  --up-h1-font-variation-settings: unset;
+  --up-h1-font-weight: var(--font-weight-bold);
+  --up-h1-line-height: var(--line-height-xs);
+  --up-icon-box-bg: var(--up-link-color);
+  --up-icon-fill-color: #333;
+  --up-icon-hover-box-bg: #fff;
+  --up-line-height: var(--line-height-sm);
+  --up-link-color: #fc0;
+  --up-link-decoration: none;
+  --up-link-hover-color: #fc0;
+  --up-link-hover-decoration: underline;
+  --up-loader-color: hsl(0deg 0% 100% / .6);
+  --up-text-color: #fff;
   --z-index-overlay: 99;
   --z-index-snackbar: 100;
 }

package/src/web-components/s-datatable-component/docs.md

@@ -358,7 +358,7 @@ Il testo si aggiorna automaticamente ad ogni cambio pagina, ricerca e multisearc
 
 Entrambi occupano l'area in alto a sinistra del datatable — lo spazio normalmente
 riservato al selettore "righe per pagina" (qui disabilitato). I due parametri si
-escludono: se `showInfoAtTop` è `true`, `topSlot` viene ignorato.
+escludono: se `showInfoAtTop` è `true` (default), `topSlot` viene ignorato.
 
 ### `showInfoAtTop`
 

package/src/web-components/s-datatable-component/s-datatable-component.js

@@ -106,25 +106,6 @@ import caretRightIcon from '../../icons/caret-right.svg?inline';
  *                                           Quando è false il footer si aggiorna solo al cambio di
  *                                           filtro, non al cambio pagina.
  *
- * @param {Element|string} topSlot          Elemento DOM o stringa HTML da inserire nell'area in alto
- *                                           a sinistra del datatable (lo spazio del selettore righe/pagina,
- *                                           qui disabilitato). Utile per pulsanti contestuali, filtri
- *                                           aggiuntivi o qualsiasi controllo da affiancare alla search box.
- *                                           Viene avvolto in un `<div class="datatable-top-slot">`.
- *                                           Accetta:
- *                                           - `Element`: un nodo DOM già costruito
- *                                           - stringa HTML: parsata via innerHTML
- *                                           Ignorato se `showInfoAtTop` è true.
- *                                           Non è leggibile da attributo HTML (solo via script).
- *
- * @param {boolean}        showInfoAtTop    Se true, mostra nell'area superiore (spazio top-sinistra)
- *                                           lo stesso testo dell'area `.info` in basso, mantenuto in
- *                                           sync ad ogni cambio pagina/filtro. Il nodo viene nascosto
- *                                           automaticamente quando non ci sono record o la ricerca
- *                                           non produce risultati. Ha precedenza su `topSlot`:
- *                                           se entrambi sono definiti, `topSlot` viene ignorato.
- *                                           Default: false.
- *
  * @param {string[]}      refs  Elenco di percorsi URL da cui, se si proviene,
  *                                           la pagina corrente viene ripristinata dal cookie
  *                                           di sessione `sd-pag`. Se il referrer non è tra
@@ -233,6 +214,22 @@ class SimpleDatatableAdapter extends HTMLElement {
     this._pendingSearch = null;
     this._loadGeneration = 0;
 
+    /**
+     * Conteggio centralizzato delle righe attualmente visibili (post-filtro).
+     * Viene inizializzato al totale in datatable.init e aggiornato dall'evento
+     * datatable.search tramite dt.data?.data.length.
+     * È l'unica fonte di verità per _renderTfoot().
+     */
+    this._filteredCount = 0;
+
+    /**
+     * Array di record raw attualmente visibili (post-filtro, pre-paginazione).
+     * Popolato da onFilter al momento dell'evento datatable.search/multisearch,
+     * quando dt.searchData è garantito aggiornato.
+     * null = nessun filtro attivo → _renderTfoot usa rawData direttamente.
+     */
+    this._filteredData = null;
+
     // Handler bound per poterli rimuovere in disconnectedCallback
     this._onSearch      = this._handleSearch.bind(this);
     this._onMultiSearch = this._handleMultiSearch.bind(this);
@@ -413,8 +410,21 @@ class SimpleDatatableAdapter extends HTMLElement {
     // 2. Attributo HTML
     const attr = this.getAttribute(name);
     if (attr !== null) {
-      // Auto-parse JSON per array e oggetti (es. cols='[…]')
+      // Auto-parse booleani solo quando il parametro è dichiaratamente booleano
+      // (defaultValue === true | false). Copre tutti i formati HTML idiomatici:
+      //   updateFooterOnPageChange            (attributo senza valore → '')  → true
+      //   updateFooterOnPageChange="true"  /  updateFooterOnPageChange="1"   → true
+      //   updateFooterOnPageChange="false" /  updateFooterOnPageChange="0"   → false
+      // I valori "1" e "0" NON vengono intercettati qui se defaultValue non è
+      // boolean, per non interferire con parametri numerici (es. perPage="1").
       const trimmed = attr.trim();
+      if (typeof defaultValue === 'boolean') {
+        const lower = trimmed.toLowerCase();
+        // Stringa vuota '' = attributo presente senza valore → true (standard HTML)
+        return lower !== 'false' && lower !== '0';
+      }
+
+      // Auto-parse JSON per array e oggetti (es. cols='[…]')
       if (trimmed.startsWith('[') || trimmed.startsWith('{')) {
         try { return JSON.parse(trimmed); } catch { /* restituisce la stringa grezza */ }
       }
@@ -718,6 +728,34 @@ class SimpleDatatableAdapter extends HTMLElement {
         noResults: 'Nessun risultato per la ricerca',
       },
 
+      template: (options, dom) => `<div class='${options.classes.top}'>
+    ${
+    options.paging && options.perPageSelect ?
+        `<div class='${options.classes.dropdown}'>
+            <label>
+                <select class='${options.classes.selector}'></select> ${options.labels.perPage}
+            </label>
+        </div>` :
+        ""
+}
+          ${
+          options.searchable ?
+              `<div class='${options.classes.search}'>
+                  <input class='${options.classes.input}' placeholder='${options.labels.placeholder}' type='search' title='${options.labels.searchTitle}'${dom.id ? ` aria-controls="${dom.id}"` : ""}>
+              </div>` :
+              ""
+      }
+      </div>
+      <div class='${options.classes.container}'${options.scrollY.length ? ` style='height: ${options.scrollY}; overflow-Y: auto;'` : ""}></div>
+      <div class='${options.classes.bottom}'>
+          ${
+          options.paging ?
+              `<div class='${options.classes.info}'></div>` :
+              ""
+      }
+          <nav class='${options.classes.pagination}'></nav>
+      </div>`,
+
       classes: {
         wrapper                 : styles.datatableWrapper,
         container               : 'table-responsive',
@@ -769,6 +807,9 @@ class SimpleDatatableAdapter extends HTMLElement {
     });
 
     this._dt.on('datatable.init', () => {
+      // Inizializza il conteggio filtrato al totale: al primo render non c'è
+      // ricerca attiva, quindi tutti i record sono visibili.
+      this._filteredCount = this._rawData?.length ?? 0;
       // ── Icone paginazione ─────────────────────────────────────────────────
       const pagination = this.querySelector(`.${styles.paginationList}`);
       if (pagination) {
@@ -818,11 +859,9 @@ class SimpleDatatableAdapter extends HTMLElement {
         }
       }
 
-      // ── Tfoot, info, top slot ─────────────────────────────────────────────
-      // Eseguiti sempre, indipendentemente dalla presenza della paginazione.
+      // ── Tfoot ─────────────────────────────────────────────────────────────
+      // Eseguito sempre, indipendentemente dalla presenza della paginazione.
       this._renderTfoot();
-      this._injectTopSlot();   // va prima di _updateInfo per creare il nodo top-info
-      this._updateInfo();
     });
 
     // Salva la pagina corrente nel cookie ad ogni cambio di pagina;
@@ -830,13 +869,43 @@ class SimpleDatatableAdapter extends HTMLElement {
     this._dt.on('datatable.page', page => {
       this._savePageCookie(page);
       if (this._getParam('updateFooterOnPageChange', false)) this._renderTfoot();
-      this._updateInfo();
     });
 
     // Aggiorna il tfoot ad ogni cambio di filtro (ricerca / multisearch).
+    // L'evento datatable.search è la fonte di verità centralizzata per il conteggio
+    // delle righe filtrate: _filteredCount viene aggiornato qui e poi consumato da
+    // _renderTfoot(), eliminando letture inconsistenti di dt.data?.data.
     // Il sort non altera il set filtrato: il footer non deve cambiare.
-    this._dt.on('datatable.search',      () => { this._renderTfoot(); this._updateInfo(); });
-    this._dt.on('datatable.multisearch', () => { this._renderTfoot(); this._updateInfo(); });
+    // datatable.search  emette (term, searchData)
+    // datatable.multisearch emette (queries, searchData)
+    // searchData è l'array degli indici in dt.data.data (post-sort), NON in rawData.
+    // Per risalire ai record raw si usa l'attributo 'data-jidx' scritto su ogni riga
+    // in fase di caricamento (_load), che preserva la corrispondenza con rawData
+    // anche dopo che simple-datatables ha riordinato dt.data.data internamente.
+    // Quando term === '' (reset), searchData è [] ma va usato rawData completo.
+    const onFilter = (termOrQueries, searchData) => {
+      const rawData = this._rawData ?? [];
+      const dt      = this._dt;
+      const isReset = termOrQueries === '' ||
+        (Array.isArray(termOrQueries) && termOrQueries.length === 0);
+
+      if (isReset) {
+        this._filteredData = null;        // null → _renderTfoot usa rawData
+      } else {
+        // Mappa l'indice dt.data.data → indice rawData tramite data-jidx
+        this._filteredData = searchData
+          .map(dtIdx => {
+            const jidx = dt.data?.data[dtIdx]?.attributes?.['data-jidx'];
+            return jidx != null ? rawData[jidx] : undefined;
+          })
+          .filter(Boolean);
+      }
+
+      this._filteredCount = this._filteredData?.length ?? rawData.length;
+      this._renderTfoot();
+    };
+    this._dt.on('datatable.search',      onFilter);
+    this._dt.on('datatable.multisearch', onFilter);
 
   } // end _render
 
@@ -849,20 +918,27 @@ class SimpleDatatableAdapter extends HTMLElement {
    * Chiamato dopo il render iniziale, ad ogni cambio di filtro (ricerca /
    * multisearch) e — se `updateFooterOnPageChange` è true — anche ad ogni cambio pagina.
    *
+   * Il conteggio delle righe filtrate viene letto da `this._filteredCount`,
+   * aggiornato centralmente dall'handler di `datatable.search` / `datatable.multisearch`.
+   * Il tfoot viene rimosso quando non ci sono righe filtrate.
+   *
    * Dataset passato alla callback `_footerRender(data)`:
    *
    *   updateFooterOnPageChange: false (default)
    *     → l'intero set filtrato, indipendente dalla pagina corrente.
    *       I totali non cambiano navigando tra le pagine.
    *       Se non c'è ricerca attiva, viene passato il dataset completo.
+   *       I record filtrati vengono letti da `this._filteredData`, popolato
+   *       in onFilter dagli argomenti dell'evento datatable.search/multisearch,
+   *       che passano `searchData` (array di indici) direttamente senza dover
+   *       leggere lo stato interno di simple-datatables.
+   *       null = reset o nessun filtro → rawData completo.
    *
    *   updateFooterOnPageChange: true
    *     → solo i record della pagina corrente.
    *       Utile per subtotali di pagina.
    *
-   * `searchData` di simple-datatables è un array di indici nel dataset
-   * originale, disponibile (e non vuoto) solo quando `dt.searching === true`.
-   * Quando la ricerca è attiva ma non trova nulla, `searchData` è `[]`:
+   * Quando la ricerca non trova nulla, `_filteredData` è `[]`:
    * in quel caso la callback riceve un array vuoto, non il dataset completo.
    */
   _renderTfoot() {
@@ -877,26 +953,29 @@ class SimpleDatatableAdapter extends HTMLElement {
     const table = this.querySelector('table');
     if (!table) return;
 
-    const dt           = this._dt;
+    const dt = this._dt;
+    const filteredCount = this._filteredCount;
+
+    // Rimuove il tfoot quando non ci sono righe filtrate
+    if (filteredCount === 0) {
+      table.querySelector('tfoot')?.remove();
+      return;
+    }
+
     const updateFooterOnPageChange = this._getParam('updateFooterOnPageChange', false);
 
     let visibleData;
 
     if (updateFooterOnPageChange) {
-      // Dati della pagina corrente: ogni "pagina" in dt.pages è un array
-      // di oggetti riga; ciascuno ha una proprietà data-index che punta
-      // all'indice nel dataset originale.
       const pageRows = dt.pages?.[dt.currentPage - 1] ?? [];
       visibleData = pageRows
         .map(row => rawData[row['data-index']])
         .filter(Boolean);
     } else {
-      // Dataset filtrato completo (ignorando la paginazione).
-      // dt.searching è true solo quando c'è una ricerca attiva;
-      // in quel caso searchData contiene gli indici dei match (può essere []).
-      visibleData = dt.searching
-        ? dt.searchData.map(idx => rawData[idx]).filter(Boolean)
-        : rawData;
+      // this._filteredData è popolato in onFilter dagli argomenti dell'evento
+      // datatable.search / datatable.multisearch (che passano searchData direttamente).
+      // null = nessun filtro attivo (o reset) → usiamo rawData completo.
+      visibleData = this._filteredData ?? rawData;
     }
 
     // Riutilizza tfoot esistente o ne crea uno nuovo
@@ -930,140 +1009,6 @@ class SimpleDatatableAdapter extends HTMLElement {
     tfoot.replaceChildren(tr);
   }
 
-  // ─── Info label ──────────────────────────────────────────────────────────────
-
-  /**
-   * Sovrascrive il testo dell'area `.info` generato da simple-datatables per
-   * includere sempre il totale assoluto dei record (indipendente dal filtro).
-   * Se `showInfoAtTop` è attivo, aggiorna in sincronia anche il nodo `.info`
-   * nell'area superiore (creato da `_injectTopSlot`).
-   *
-   * Calcolo di start/end: si conta il numero di righe renderizzate nel tbody
-   * (`dt.pages[currentPage - 1]`) invece di fare aritmetica su perPage,
-   * perché `dt.currentPage` può essere undefined al primo render.
-   *
-   * Comportamento:
-   *   - Senza ricerca attiva:
-   *       "Stai visualizzando le righe da {start} a {end}, su un totale di {total}."
-   *   - Con ricerca attiva (risultati > 0):
-   *       "Stai visualizzando le righe da {start} a {end} dei {filtered} record
-   *        filtrati, su un totale di {total}."
-   *   - Nessun risultato (ricerca attiva, 0 match):
-   *       "Nessun risultato per la ricerca corrente (totale record: {total})."
-   *
-   * Il nodo top-info viene nascosto quando filtered = 0 o total = 0.
-   */
-  _updateInfo() {
-    const infoEl    = this.querySelector(`.${styles.info}`);
-    const topInfoEl = this.querySelector('.datatable-top-info');
-
-    if (!infoEl && !topInfoEl) return;
-
-    const dt       = this._dt;
-    const total    = this._rawData?.length ?? 0;
-    const filtered = dt.searching ? dt.searchData.length : total;
-
-    let text;
-
-    if (total === 0 || (filtered === 0 && dt.searching)) {
-      // Nessun risultato — nasconde il nodo top-info se presente
-      if (topInfoEl) topInfoEl.hidden = true;
-
-      text = filtered === 0 && dt.searching
-        ? `Nessun risultato per la ricerca corrente (totale record: ${total}).`
-        : `Nessun record trovato.`;
-
-      if (infoEl) infoEl.textContent = text;
-      return;
-    }
-
-    // Calcola start/end dalla pagina corrente in dt.pages (più affidabile di
-    // currentPage * perPage, che può dare NaN se currentPage è undefined
-    // al primo render oppure quando non c'è paginazione).
-    const currentPage  = dt.currentPage ?? 1;
-    const pageRows     = dt.pages?.[currentPage - 1] ?? [];
-    const perPage      = dt.options?.perPage ?? filtered;
-    const start        = pageRows.length > 0
-      ? (currentPage - 1) * perPage + 1
-      : 1;
-    const end          = pageRows.length > 0
-      ? start + pageRows.length - 1
-      : filtered;
-
-    if (dt.searching) {
-      text =
-        `Stai visualizzando le righe da ${start} a ${end} ` +
-        `dei ${filtered} record filtrati, su un totale di ${total}.`;
-    } else {
-      text =
-        `Stai visualizzando le righe da ${start} a ${end}, ` +
-        `su un totale di ${total}.`;
-    }
-
-    if (infoEl)    infoEl.textContent    = text;
-    if (topInfoEl) { topInfoEl.textContent = text; topInfoEl.hidden = false; }
-  }
-
-
-  // ─── Top slot ────────────────────────────────────────────────────────────────
-
-  /**
-   * Inietta nell'area in alto a sinistra del datatable il contenuto configurato.
-   *
-   * Modalità:
-   *
-   *   showInfoAtTop: true  (ha precedenza su topSlot)
-   *     Inserisce un nodo `.datatable-top-info` con la stessa stringa dell'area
-   *     `.info` in basso, mantenuta in sync da `_updateInfo`. Viene nascosto
-   *     automaticamente quando filtered = 0 o total = 0.
-   *     Il parametro `topSlot`, se presente, viene ignorato.
-   *
-   *   topSlot: Element | string  (usato solo se showInfoAtTop è false/assente)
-   *     Inserisce un elemento DOM o markup HTML arbitrario, avvolto in un
-   *     `<div class="datatable-top-slot">`.
-   *
-   * In entrambi i casi l'elemento viene inserito come primo figlio di `.topArea`,
-   * prima della search box.
-   *
-   * Esempi:
-   *   el.init({ showInfoAtTop: true });
-   *
-   *   el.init({ topSlot: '<button class="btn btn-sm btn-primary">Esporta</button>' });
-   *
-   *   const btn = document.createElement('button');
-   *   btn.textContent = 'Nuovo';
-   *   el.init({ topSlot: btn });
-   */
-  _injectTopSlot() {
-    const topArea = this.querySelector(`.${styles.topArea}`);
-    if (!topArea) return;
-
-    const showInfoAtTop = this._getParam('showInfoAtTop', false);
-
-    if (showInfoAtTop) {
-      // Crea il nodo info top (il testo verrà scritto da _updateInfo)
-      const infoTop = document.createElement('div');
-      infoTop.className = `datatable-top-info ${styles.info}`;
-      infoTop.hidden = true;   // nascosto finché _updateInfo non lo popola
-      topArea.insertBefore(infoTop, topArea.firstChild);
-      return;
-    }
-
-    const topSlot = this._getParam('topSlot', null);
-    if (topSlot == null) return;
-
-    const wrapper = document.createElement('div');
-    wrapper.className = 'datatable-top-slot';
-
-    if (topSlot instanceof Element) {
-      wrapper.appendChild(topSlot);
-    } else {
-      wrapper.innerHTML = topSlot;
-    }
-
-    topArea.insertBefore(wrapper, topArea.firstChild);
-  }
-
 
 } // end component
 

package/src/web-components/s-datatable-component/s-datatable-component.module.css

@@ -19,6 +19,10 @@
   align-items: center;
   justify-content: flex-end;
   padding-block-end: var(--size-xs);
+
+  &:has(.info), &:has(:global(.datatable-top-slot)) {
+    justify-content: space-between;
+  }
 }
 
 .searchWrapper {

package/design-tokens-src/table.minimo.tokens.jsonc

@@ -1,66 +0,0 @@
-{
-  "table": {
-    "thead": {
-      "background": {
-        "color": {
-          "$type": "color",
-          "$value": "#ddd"
-        }
-      },
-      "border": {
-        "width" : {
-          "$type": "dimension",
-          "$value": "3px"
-        }
-      }
-    },
-
-    "body": {
-      "background": {
-        "color": null
-      },
-      "border": {
-        "width" : {
-          "$type": "dimension",
-          "$value": "1px"
-        }
-      },
-      "tr": {
-        "alt-bg-color": {
-          "$type": "color",
-          "$value": "#efefef"
-        },
-        "hover-bg-color": {
-          "$type": "color",
-          "$value": "#cbcbcb"
-        }
-      }
-    },
-
-    "border": {
-      "color" : {
-        "$type": "color",
-        "$value": "#333"
-      }
-    },
-
-    "cell": {
-      "padding" : {
-        "block": {
-          "$type": "dimension",
-          "$value": ".3rem"
-        },
-        "inline": {
-          "$type": "dimension",
-          "$value": ".6rem"
-        }
-      },
-      "line-height": {
-        "$type": "number",
-        "$value": "1.3"
-      }
-    }
-
-
-  }
-}