@massimo-cassandro/minimo 1.17.1 → 1.18.1

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

@@ -5,7 +5,7 @@
 // Re-generate with: node build-tokens.mjs --config <path/to/config>
 // -----------------------------------------------------------------------
 {
-  "up": {
+  "uspg": {
     "bg": {
       "color": {
         "$type": "color",
@@ -59,7 +59,7 @@
     "h1": {
       "color": {
         "$type": "color",
-        "$value": "{up.text.color}"
+        "$value": "{uspg.text.color}"
       },
       "font": {
         "size": {
@@ -84,7 +84,7 @@
       "box": {
         "bg": {
           "$type": "color",
-          "$value": "{up.link.color}"
+          "$value": "{uspg.link.color}"
         }
       },
       "fill": {

package/dev-tools/starter-kit/templates/__project__.code-workspace

@@ -7,8 +7,8 @@
   "settings": {
 
     "cssvar.files": [
-      "frontend/css/custom-properties-list.css", // project props
-      
+      "frontend/css/custom-properties.css", // project props
+
       // OPEN PROPS
       // "./node_modules/open-props/open-props.min.css", // all open-props
 

package/dev-tools/starter-kit/webpack-modules/css-rules.mjs

@@ -31,6 +31,7 @@ export function cssRules({
     // CSS modules
     {
       test: /\.module\.(sass|scss|css)$/i,
+      sideEffects: true,
       oneOf: [
 
         // inserimento critical css con tag style al momento della build

package/dev-tools/starter-kit/webpack-modules/postcss.config.mjs

@@ -4,6 +4,7 @@ import { fileURLToPath } from 'url';
 import globalData from '@csstools/postcss-global-data';
 import customMedia from 'postcss-custom-media';
 import autoprefixer from 'autoprefixer';
+// import jitProps from 'postcss-jit-props';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -32,6 +33,12 @@ export default (loaderContext) => {
       ]
     }),
 
+    // jitProps({
+    //   files: [
+    //     path.resolve(__dirname, '../src/css/custom-properties.css'),
+    //   ]
+    // }),
+
     // per IOS < 17 (test)
     // https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting
     // https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-light-dark-function#readme

package/dev-tools/starter-kit/webpack-modules/purgecss-setup.mjs

@@ -0,0 +1,95 @@
+// webpack-modules/purgecss-setup.mjs
+import { PurgeCSSPlugin } from 'purgecss-webpack-plugin';
+import { globSync } from 'glob';
+import { purgecssVariablesSafelist } from './purgecss-variables-safelist.mjs';
+
+/*
+  Istanzia i plugin PurgeCSS del progetto: un passaggio stretto sui css
+  `.critical` (inlinati nei template, devono restare autosufficienti) e un
+  passaggio generale su tutti gli altri asset (il purge è idempotente: il
+  secondo passaggio sui critical non rimuove altro).
+
+  NB: il plugin elabora ogni asset css SINGOLARMENTE, quindi con `variables: true`
+  una custom property viene mantenuta solo se definita e usata nello stesso asset.
+  Per questo, lato progetto:
+  - ogni entry css importa direttamente custom-properties.css (che sostituisce
+    jit-props: le props non usate vengono rimosse qui)
+  - il chunk `shared` deve contenere solo js (il css estratto resta nel chunk
+    dell'entry che lo importa)
+  - le props dichiarate in un asset ma consumate altrove (override di tema,
+    shadow DOM dei web components) vanno indicate tramite `variablesSafelist`
+    (vedi purgecss-variables-safelist.mjs)
+*/
+
+/**
+ * @param {object} params
+ * @param {string[]} params.contentGlobs file da scansionare per le classi/id usati
+ *   (twig, php, js...); i file di stile vengono comunque scartati dal plugin
+ * @param {object} params.safelist { standard, deep, greedy } — selettori sempre
+ *   mantenuti, indipendentemente dal contenuto scansionato
+ * @param {object} params.variablesSafelist opzioni per purgecssVariablesSafelist
+ *   ({ declarationGlobs, shadowGlobs, seeds })
+ * @param {boolean} [params.variables=true] rimuove le custom properties non usate
+ * @param {boolean} [params.keyframes=true] rimuove i @keyframes non referenziati
+ * @param {boolean} [params.debug=false] logga i selettori rimossi a fine build
+ * @returns {object[]} plugin webpack da inserire in `plugins`
+ *   (critical + generale, più il logger di debug se `debug: true`)
+ */
+export function createPurgeCSSPlugins({
+  contentGlobs,
+  safelist,
+  variablesSafelist,
+  variables = true,
+  keyframes = true,
+  debug = false
+}) {
+  const commonOptions = {
+    paths: () => globSync(contentGlobs, { nodir: true }),
+
+    // extractor di default (/[A-Za-z0-9_-]+/g): adeguato alle classi/tag/id del progetto,
+    // non servono extractors custom
+
+    variables,
+    keyframes,
+    // fontFace resta false (default): i font sono referenziati solo tramite
+    // var(--font-family) e purgecss non risolve le custom properties nei valori
+
+    rejected: debug // popola purgedStats per il log di debug
+  };
+
+  const pluginCritical = new PurgeCSSPlugin({
+    ...commonOptions,
+    only: ['.critical'],
+    safelist
+  });
+
+  const pluginMain = new PurgeCSSPlugin({
+    ...commonOptions,
+    safelist: {
+      ...safelist,
+      // elenco generato: usi di var() nei blocchi `purgecss ignore` e nei css
+      // shadow-DOM/`?raw`, override cross-asset (seeds), con chiusura transitiva
+      // delle dipendenze (vedi purgecss-variables-safelist.mjs)
+      variables: purgecssVariablesSafelist(variablesSafelist)
+    }
+  });
+
+  return [
+    pluginCritical,
+    pluginMain,
+
+    // log dei selettori rimossi (richiede `debug: true`, che imposta anche `rejected: true`)
+    ...(debug ? [{
+      apply: (compiler) => {
+        compiler.hooks.afterEmit.tap('PurgeCSSLog', () => {
+          /* eslint-disable no-console */
+          console.log('\n--- [PurgeCSS] Selettori rimossi (critical) ---');
+          console.dir(pluginCritical.purgedStats, { depth: null, maxArrayLength: null });
+          console.log('\n--- [PurgeCSS] Selettori rimossi ---');
+          console.dir(pluginMain.purgedStats, { depth: null, maxArrayLength: null });
+          /* eslint-enable no-console */
+        });
+      }
+    }] : [])
+  ];
+}

package/dev-tools/starter-kit/webpack.config.mjs

@@ -18,11 +18,8 @@ import RemoveEmptyScriptsPlugin from 'webpack-remove-empty-scripts';
 // import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
 // import HtmlWebpackInjectAttributesPlugin from 'html-webpack-inject-attributes-plugin';
 
-import { PurgeCSSPlugin } from 'purgecss-webpack-plugin';
-import { globSync } from 'glob';
-
 import { cssRules } from './webpack-modules/css-rules.mjs';
-import { purgecssVariablesSafelist } from './webpack-modules/purgecss-variables-safelist.mjs';
+import { createPurgeCSSPlugins } from './webpack-modules/purgecss-setup.mjs';
 import { getJsConfigAliases } from './webpack-modules/get-jsConfig-aliases.mjs';
 import { svgRules } from './webpack-modules/svg-rules.mjs';
 
@@ -41,21 +38,42 @@ const isDevelopment = process.env.NODE_ENV === 'development'
   ,favicons_path = 'frontend/favicons/output'
   ,favicons_path_regexp = new RegExp(favicons_path) // source pattern per le favicons (regexp o null)
   ,jsConfigAliases = getJsConfigAliases(path.resolve(__dirname, './jsconfig.json'))
-  ,packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, './package.json'), 'utf-8'))
-  ,purgeCSSDebug = false // true per loggare i selettori rimossi da PurgeCSS a fine build
+  ,packageJson = JSON.parse(fs.readFileSync(path.resolve(__dirname, './package.json'), 'utf-8')),usePurgeCss = true // false per disattivare PurgeCSS (debug rapido di problemi legati al purge)
+  ,usePurgeCss = true // false per disattivare PurgeCSS (debug rapido di problemi legati al purge)
+  ,purgeCSSOptions = {
+    variables: false, // rimuove le custom properties non usate (sostituisce jit-props)
+    keyframes: true, // rimuove i @keyframes non referenziati
+    debug: false // true per loggare i selettori rimossi da PurgeCSS a fine build
+  }
   // ,manifest_shared_seed = {}
 ;
 
-// path delle directory da utilizzare nel chunk `shared`
-const sep = '[\\\\/]'; // stringa che produce [\\/] nel pattern
-const shared_chunk_paths =
-  new RegExp([
+// test del cacheGroup `shared` (splitChunks): con PurgeCSS attivo i css restano
+// FUORI dal chunk condiviso e nel chunk della entry che li importa, così ogni
+// asset css resta autosufficiente (`variables: true` funziona per singolo asset,
+// e i critical css inlinati nei template devono restare autosufficienti). Con
+// PurgeCSS disattivo questo vincolo non serve più: i css seguono lo stesso path
+// matching dei moduli js
+//
+// TODO: se in futuro la duplicazione di css tra le pagine dovesse crescere
+// (componenti importati dal js di più entry), valutare un cacheGroup `styles`
+// dedicato ai css condivisi: andranno escluse le entry `.critical` (devono
+// restare autosufficienti) e gestite in safelist.variables le custom properties
+// definite/consumate tra asset diversi (vedi purgecss-variables-safelist.mjs)
+const shared_chunk_paths = (module) => {
+  if (usePurgeCss && module.type === 'css/mini-extract') return false;
+
+  // path delle directory da utilizzare nel chunk `shared`
+  const sep = '[\\\\/]'; // stringa che produce [\\/] nel pattern
+  const pathsRegexp = new RegExp([
     'node_modules',
     'frontend/src/js',
     'frontend/src/web-components',
     'frontend/src/components',
-  ].map(p => `${sep}${p.replace(/\//g, sep)}${sep}`).join('|')
-  );
+  ].map(p => `${sep}${p.replace(/\//g, sep)}${sep}`).join('|'));
+
+  return pathsRegexp.test(module.nameForCondition?.() ?? '');
+};
 
 
 // hash: https://medium.com/@web_developer/hash-vs-chunkhash-vs-contenthash-e94d38a32208
@@ -262,6 +280,11 @@ const config = {
   // =>> optimization
   optimization: {
     minimize: !isDevelopment,
+    // di default true solo se minimize:true (quindi false in dev): esplicito qui perché
+    // PurgeCSSPlugin modifica gli asset css dopo il calcolo dell'hash "veloce" — senza
+    // questo, in dev il contenthash non riflette le modifiche di PurgeCSS e il browser
+    // può servire dalla cache una versione stale pur avendo rigenerato la build
+    // realContentHash: true,
     minimizer: [
       new CssMinimizerPlugin(),
       new TerserPlugin({
@@ -292,38 +315,9 @@ const config = {
         },
 
         shared: {
-          // solo moduli js (module.type !== 'css/mini-extract'): il css estratto
-          // resta nel chunk della entry che lo importa, così ogni asset css è
-          // autosufficiente. Necessario per PurgeCSS (`variables: true` funziona
-          // per singolo asset) e per i critical css inlinati nei template
-          //
-          // TODO: se in futuro la duplicazione di css tra le pagine dovesse crescere
-          // (componenti importati dal js di più entry), valutare un cacheGroup `styles`
-          // dedicato ai css condivisi: andranno escluse le entry `.critical` (devono
-          // restare autosufficienti) e gestite in safelist.variables le custom properties
-          // definite/consumate tra asset diversi (vedi purgecss-variables-safelist.mjs)
-          test: (module) => module.type !== 'css/mini-extract'
-            && shared_chunk_paths.test(module.nameForCondition?.() ?? ''),
-          // test: /[\\/]node_modules[\\/]/,
-
-          // alternativa: non include nel chunk shared i path che contengono la stringa `blurhash`
-          // test: /[\\/]node_modules[\\/](?!.*blurhash)/i,
-
-          // alternativa: verifica se l'import ha una query specifica (?exclude-shared-chunk)
-          // test(module) {
-          //   const resource = module.nameForCondition && module.nameForCondition();
-          //   if (!resource) return false;
-
-          //   // Verifica se è in node_modules
-          //   const isNodeModule = /[\\/]node_modules[\\/]/.test(resource);
-
-          //   // module.resource è il percorso completo + query string
-          //   const hasExcludeQuery = module.resource && module.resource.includes('exclude-shared-chunk');
-
-          //   // Include nel chunk shared solo se è un node_module E NON ha la query
-          //   return isNodeModule && !hasExcludeQuery;
-          // },
-          // test: /[\\/]node_modules[\\/](?!.*blurhash)(?!.*@massimo-cassandro\/unsplash-page)/i,
+          // vedi shared_chunk_paths sopra per la logica completa del test
+          // (path match + esclusione css quando PurgeCSS è attivo)
+          test: shared_chunk_paths,
           name: 'shared',
           chunks: 'all'
         }
@@ -481,39 +475,73 @@ const config = {
       exclude: /\.critical/ // chunk name
     }),
 
-    // =>> plugins: PurgeCSSPlugin (per ultimo, attivo in dev e prod: i problemi
-    // di purge devono emergere subito durante lo sviluppo, non solo in build)
+    // =>> plugins: PurgeCSSPlugin (per ultimo, attivo anche in dev)
     // https://github.com/FullHuman/purgecss/tree/main/packages/purgecss-webpack-plugin
     // https://purgecss.com/configuration.html
-    //
-    // NB: il plugin elabora ogni asset css SINGOLARMENTE, quindi con `variables: true`
-    // una custom property viene mantenuta solo se definita e usata nello stesso asset.
-    // Per questo:
-    // - ogni entry css importa direttamente custom-properties.css (che sostituisce
-    //   postcss-jit-props: le props non usate vengono rimosse qui)
-    // - il chunk `shared` contiene solo js (vedi optimization.splitChunks)
-    // - le props dichiarate in un asset ma consumate altrove (override di tema,
-    //   shadow DOM dei web components) sono gestite dalla safelist generata
-    //   (vedi purgecss-variables-safelist.mjs)
-    purgeCSSPluginCritical,
-    purgeCSSPlugin,
-
-    // log dei selettori rimossi (richiede `rejected: true` nei plugin, vedi purgeCSSDebug).
-    // NB: legge `purgedStats` dalle ISTANZE del plugin, non da compilation.purgedStats
-    // (proprietà inesistente: il vecchio log basato su di essa era codice morto)
-    ...(purgeCSSDebug ? [{
-      apply: (compiler) => {
-        compiler.hooks.afterEmit.tap('PurgeCSSLog', () => {
-          /* eslint-disable no-console */
-          console.log('\n--- [PurgeCSS] Selettori rimossi (critical) ---');
-          console.dir(purgeCSSPluginCritical.purgedStats, { depth: null, maxArrayLength: null });
-          console.log('\n--- [PurgeCSS] Selettori rimossi ---');
-          console.dir(purgeCSSPlugin.purgedStats, { depth: null, maxArrayLength: null });
-          /* eslint-enable no-console */
-        });
-      }
-    }] : [])
+    // istanze e opzioni in webpack-modules/purgecss-setup.mjs (qui solo flag/dati progetto)
+    // `usePurgeCss: false` disattiva il purge per intero (utile per isolare rapidamente
+    // eventuali problemi legati ad esso); `purgeCSSOptions` (variables/keyframes/debug,
+    // vedi sopra) si applica solo quando è attivo
+    // NB: il purge è attivo anche in dev, per far emergere subito eventuali
+    // rimozioni errate. In watch mode i template twig NON sono osservati da
+    // webpack: dopo aver aggiunto una classe solo in un twig occorre rilanciare
+    // la build (o toccare un file js/css) per aggiornare il purge
+    ...(usePurgeCss
+      ? createPurgeCSSPlugins({
+
+        // SOLO file che generano markup o classi (twig, php, js);
+        // i file di stile vengono comunque scartati dal plugin
+        contentGlobs: [
+          path.resolve(__dirname, '../templates/**/*.twig'),
+          path.resolve(__dirname, '../src/**/*.php'),
+          path.resolve(__dirname, './src/**/*.{js,mjs,jsx}'),
+          path.resolve(__dirname, './error-pages/**/*.js'),
+          // il js di minimo genera markup con classi proprie (snackbar, unsplash-page, ecc.)
+          path.resolve(__dirname, '../node_modules/@massimo-cassandro/minimo/src/**/*.{js,mjs}'),
+        ],
 
+        safelist: {
+          standard: [
+            // flash messages: class="alert alert-{{ label }}" (templates/incl/flash-messages.html.twig)
+            /^alert-(success|notice|error|warning)$/
+          ],
+          deep: [
+            // css modules: prefisso `m_` della build di produzione (vedi css-rules.mjs),
+            // le classi hashate non possono comparire nei file scansionati
+            /^m_/
+          ],
+          greedy: [
+            // purgecss non riconosce il nesting selector nativo: senza questo pattern
+            // i selettori annidati composti solo da `&` + pseudo classi (&:hover,
+            // &:focus-visible, `&` semplice, ecc.) verrebbero SEMPRE rimossi
+            /^&$/
+          ]
+        },
+
+        // elenco generato: usi di var() nei blocchi `purgecss ignore` e nei css
+        // shadow-DOM/`?raw`, override cross-asset (seeds), con chiusura transitiva
+        // delle dipendenze (vedi webpack-modules/purgecss-variables-safelist.mjs)
+        variablesSafelist: {
+          declarationGlobs: [
+            path.resolve(__dirname, './src/**/*.css'),
+            path.resolve(__dirname, './error-pages/**/*.css'),
+            path.resolve(__dirname, '../node_modules/@massimo-cassandro/minimo/src/**/*.css'),
+          ],
+          shadowGlobs: [
+            path.resolve(__dirname, './src/web-components/**/*.css'),
+            path.resolve(__dirname, '../node_modules/@massimo-cassandro/minimo/src/web-components/**/*.css'),
+          ],
+          seeds: [
+            // override di .login-group (login.css) consumati dai buttons minimo (css globale)
+            /^--btn-secondary-/
+          ]
+        },
+
+        // fontFace resta false (default): i font sono referenziati solo tramite
+        // var(--font-family) e purgecss non risolve le custom properties nei valori
+        ...purgeCSSOptions
+      })
+      : [])
   ], // end plugins
 
   module: {

package/index.js

@@ -1,4 +1,3 @@
-
 // utilities
 export { betterText } from './src/utilities/better-text.js';
 export { buildPictureTag } from './src/utilities/build-picture-tag.js';
@@ -30,4 +29,4 @@ export { overlay, removeOverlay } from './src/components/overlay/overlay.js';
 export { sf_macro } from './src/components/sf-macro/sf-macro.js';
 export { slideToggle, slideUp, slideDown } from './src/components/slide-up-down-toggle/slide-up-down-toggle.js';
 export { snackbar } from './src/components/snackbar/snackbar.js';
-export { unsplashPageJS } from './src/components/unsplash-page/unsplash-page.js';
+export { unsplashPage } from './src/components/unsplash-page/unsplash-page.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@massimo-cassandro/minimo",
-  "version": "1.17.1",
+  "version": "1.18.1",
   "description": "Light css framework & utilities",
   "type": "module",
   "main": "./index.js",
@@ -39,6 +39,7 @@
     "build-margin-padding-css": "node ./scripts/build-margin-padding-css.mjs",
     "check unresolved props": "node ./design-tokens/utilities/check-unresolved-custom-props.mjs --config ./design-tokens/tokens-config.mjs",
     "test": "node --test \"test/**/*.test.mjs\"",
+    "test sideEffects tree-shaking": "node ./test/sideEffects-tree-shaking/run-test.mjs",
     "checkJS": "npx tsc --noEmit -p jsconfig.json",
     "checkJS ./src": "npx tsc --noEmit --allowJs --checkJs --target ES2023 --module ESNext --allowSyntheticDefaultImports --moduleResolution bundler declarations.d.ts src/**/*.js"
   },
@@ -61,10 +62,17 @@
     "dev-tools/**/*",
     "snippets/**/*"
   ],
+  "peerDependencies": {
+    "@svgdotjs/svg.js": "^3.2.7",
+    "blurhash": "^2.0.5"
+  },
   "peerDependenciesMeta": {
     "@svgdotjs/svg.js": {
       "optional": true
     },
+    "blurhash": {
+      "optional": true
+    },
     "style-dictionary": {
       "optional": true
     }

package/snippets/error-pages/bundles/TwigBundle/Exception/error.html.twig

@@ -1,7 +1,7 @@
 {#-
 https://symfony.com/doc/current/controller/error_pages.html#testing-error-pages-during-development
 
-test errori: https://governance.local:8890/_error/<error code>
+test errori: https://project.local:8890/_error/<error code>
 -#}
 <!DOCTYPE html>
 <html lang="it" data-err-code="{{ status_code }}" data-err-text="{{ status_text}}">
@@ -12,22 +12,22 @@ test errori: https://governance.local:8890/_error/<error code>
   <title>Errore {{ status_code }}</title>
   <meta name="robots" content="noindex, nofollow, noarchive">
   {%- include 'incl/favicons.incl.html.twig'-%}
-  <link rel="preload" href="{{ asset('governance.css') }}" as="style">
-  <link rel="stylesheet" href="{{ asset('governance.css') }}" media="all">
+  <link rel="preload" href="{{ asset('project.css') }}" as="style">
+  <link rel="stylesheet" href="{{ asset('project.css') }}" media="all">
   <link rel="preload" href="{{ asset('error-pages.css') }}" as="style">
   <link rel="stylesheet" href="{{ asset('error-pages.css') }}" media="all">
   <link rel="preload" href="{{ asset('error-pages.js') }}" as="script">
 
   <link rel="preload" href="{{ asset('vendors.js') }}" as="script">
   <link rel="preload" href="{{ asset('runtime.js') }}" as="script">
-  <link rel="preload" href="{{ asset('vendors.css') }}" as="style">
-  <link rel="stylesheet" href="{{ asset('vendors.css') }}" type="text/css" media="all">
+  <link rel="preload" href="{{ asset('shared.css') }}" as="style">
+  <link rel="stylesheet" href="{{ asset('shared.css') }}" type="text/css" media="all">
 </head>
 <body>
   <div id="root"></div>
 
   <script src="{{ asset('runtime.js') }}"></script>
-  <script src="{{ asset('vendors.js') }}"></script>
+  <script src="{{ asset('shared.js') }}"></script>
   <script src="{{ asset('error-pages.js') }}"></script>
 </body>
 </html>

package/snippets/error-pages/error-pages.js

@@ -1,6 +1,6 @@
 
 
-import { unsplashPageJS } from '@massimo-cassandro/minimo/index.js';
+import { unsplashPage } from '@massimo-cassandro/minimo/index.js';
 
 const errCode = document.documentElement.dataset.errCode || '500',
   errText = document.documentElement.dataset.errText,
@@ -23,7 +23,7 @@ const errCode = document.documentElement.dataset.errCode || '500',
 
 document.title = `Errore ${errCode}`;
 
-unsplashPageJS({
+unsplashPage({
   targetElement    : document.getElementById('root'),
   className        : 'error-page',
   unsplashDataUrl  : url,

package/src/components/dismiss-alerts.js

@@ -1,3 +1,4 @@
+/*! minimo - Dismiss Alerts */
 /**
  * Adds click listeners to all `[data-dismiss]` elements to remove their closest ancestor
  * that matches the class specified in the `data-dismiss` attribute.

package/src/components/form-reset-submit.js

@@ -1,3 +1,4 @@
+/*! minimo - Form Reset Submit */
 // import './form.css'; // included in the main CSS entry point
 import { enableSubmitBtns } from '../utilities/enable-submit-btns.js';
 

package/src/components/inner-nav/inner-nav.css

@@ -1,3 +1,5 @@
+/*! minimo - Inner Nav */
+
 .inner-nav-main, .inner-nav {
   display: flex;
   gap: var(--inner-nav-gap);

package/src/components/inner-nav/inner-nav.js

@@ -1,3 +1,4 @@
+/*! minimo - Inner Nav */
 // tab / list navigation — copies the primary nav markup into all `.inner-nav` containers
 /*
 <p class="inner-nav-main">...</p>

package/src/components/modal-alert/modal-alert.js

@@ -1,3 +1,4 @@
+/*! minimo - Modal Alert */
 import * as styles from './modal-alert.module.css';
 import { domBuilder } from '../../utilities/dom-builder/dom-builder.js';
 import { classnames } from '../../utilities/classnames.js';
@@ -53,7 +54,7 @@ const defaults = {
     type: 'success',
     title: 'Operazione completata',
     okBtnText: 'OK',
-    okBtnClass: 'btn',
+    okBtnClass: 'btn btn-success',
     timer: 4000, // ms
     icon: successIcon
   },
@@ -61,14 +62,14 @@ const defaults = {
     type: 'error',
     title: 'Si è verificato un errore',
     okBtnText: 'OK',
-    okBtnClass: 'btn',
+    okBtnClass: 'btn btn-danger',
     icon: errorIcon
   },
   warning: {
     type: 'warning',
     title: 'Attenzione!',
     okBtnText: 'OK',
-    okBtnClass: 'btn',
+    okBtnClass: 'btn btn-warning',
     icon: warningIcon,
     altIcon: dangerIcon,
     useAltIcon: false // when true, uses altIcon (danger) instead of the default warning icon
@@ -77,7 +78,7 @@ const defaults = {
     type: 'info',
     title: null,
     okBtnText: 'OK',
-    okBtnClass: 'btn',
+    okBtnClass: 'btn btn-info',
     icon: infoIcon
   },
   confirm: {
@@ -86,8 +87,8 @@ const defaults = {
     okBtnText: 'OK',
     cancelBtnText: 'Annulla',
     cancelBtnFocus: true, // false to give focus to the ok button
-    okBtnClass: 'btn btn-outline',
-    cancelBtnClass: 'btn',
+    okBtnClass: 'btn btn-primary',
+    cancelBtnClass: 'btn btn-primary btn-hollow',
     icon: confirmIcon,
     altIcon: warningIcon,
     useAltIcon: false // when true, uses altIcon (warning) instead of the default confirm icon
@@ -189,6 +190,8 @@ export function modalAlert(params = {}) {
           ? 'cancel'
           : 'ok';
 
+      console.log(params);
+
       const dialog = /** @type {HTMLDialogElement} */ (domBuilder([
         {
           tag: 'dialog',
@@ -227,7 +230,8 @@ export function modalAlert(params = {}) {
                       children: [
                         {
                           tag: 'button',
-                          className: params.okBtnClass? params.okBtnClass : 'btn btn-secondary',
+                          className: params.okBtnClass? params.okBtnClass : 'btn btn-primary',
+                          content: params.okBtnText,
                           attrs: {
                             type: 'button',
                             autofocus: focusTarget === 'ok'
@@ -238,6 +242,7 @@ export function modalAlert(params = {}) {
                           condition: params.type === 'confirm',
                           tag: 'button',
                           className: params.cancelBtnClass? params.cancelBtnClass : 'btn btn-secondary btn-hollow',
+                          content: params.cancelBtnText,
                           attrs: {
                             type: 'button',
                             autofocus: focusTarget === 'cancel'