docs: review components and js part

Co-authored-by: Daniele T. <[email protected]>

_data/nav.yml

@@ -8,7 +8,7 @@
     - title: Modificare Componenti
     - title: Migrazione dalla versione 1
 
-- title: Breaking feature
+- title: Breaking change
 
 - title: Organizzare gli spazi
   pages:

_includes/callout-breaking.html

@@ -7,7 +7,7 @@
     <h4 class="accordion-header" id="#bsbrh{{id_collapse}}">
       <button class="accordion-button text-black collapsed" type="button" style="border-top: none;" data-bs-toggle="collapse" data-bs-target="#bsbrc{{id_collapse}}"
       aria-controls="#bsbrc{{id_collapse}}">
-      Breaking feature dalla versione&nbsp;<b>{{include.version}}</b>
+      Breaking change dalla versione&nbsp;<b>{{include.version}}</b>
       </button>
     </h4>
     <div id="bsbrc{{id_collapse}}" class="accordion-collapse collapse" role="region" aria-labelledby="bsbrh{{id_collapse}}">

_includes/callout-bundle-methods.md

@@ -1,7 +1,11 @@
+{%- assign toggle-specific = include.toggle | default: "`data-bs-toggle` specifico" -%}
 {% capture callout %}
-Nel caso in cui si desidera che i componenti siano inizializzati in maniera automatica (salvo casi particolari) utilizzare l'attributo `data-bs-target` specifico per l'inizializzazione automatica del componente.
+Nel caso in cui si desidera che il componente sia inizializzato in maniera automatica 
+utilizzare l'attributo {{toggle-specific}} per la sua inizializzazione.
 
-Nel caso in cui si desidera importare e inizializzare autonomamente i singoli componenti, l'attributo `data-bs-target` *non* deve essere incluso, per evitare inizializzazioni automatiche che possono portare a comportamenti inaspettati.
+Nel caso in cui si desidera importare e inizializzare autonomamente il componente
+l'attributo {{toggle-specific}} *non* deve essere incluso così da evitare 
+inizializzazioni automatiche che possono portare a comportamenti inaspettati.
 
-Per maggiori informazioni consulta la [sezione JavaScript di Bootstrap Italia]({{ site.baseurl }}/docs/come-iniziare/introduzione/#javascript) e gli [strumenti di compilazione]({{ site.baseurl }}/docs/come-iniziare/strumenti-di-compilazione/#ottimizzare-i-file-javascript-da-importare).
+Per maggiori informazioni consulta la [sezione JavaScript di Bootstrap Italia]({{ site.baseurl }}/docs/come-iniziare/introduzione/#javascript).
 {% endcapture %}{% include callout.html content=callout type="warning" %}

docs/breaking-change.md

@@ -0,0 +1,11 @@
+---
+layout: docs
+group: breking-feature
+toc: true
+title: Breaking change
+redirect_from: '/breaking-change/'
+---
+
+Di seguito saranno mostrate le principali breaking change di ogni versione.
+
+{% include breaking-features-list.md %}

docs/come-iniziare/introduzione.md

@@ -12,6 +12,14 @@ description: Come usare Bootstrap Italia nel tuo progetto.
 
 ## Installazione
 
+### Con NPM
+
+```sh
+npm i bootstrap-italia@latest --save
+```
+
+### Manuale
+
 Per utilizzare il codice compilato di Bootstrap Italia nel proprio progetto, è sufficiente scaricare ed includere nella pagina HTML alcuni file, tra cui: 
 
 - il foglio di stile contenuto nel file CSS
@@ -32,62 +40,55 @@ il tutto scaricabile qui:
 La versione più recente è consultabile tra le [release di progetto](https://github.com/italia/bootstrap-italia/releases) e contiene anche tutti i miglioramenti e le correzioni disponibili fino ad oggi.
 {% endcapture %}{% include callout.html content=callout type="warning" %}
 
-Se si preferisce usare i file sorgente di Bootstrap Italia nel proprio progetto attraverso il package manager **npm**, si può fare riferimento alle [indicazioni di come utilizzare la libreria come dipendenza]({{ site.baseurl }}/docs/come-iniziare/introduzione#utilizzo-come-dipendenza).
-
 Le librerie Javascript e CSS di Bootstrap Italia personalizzano e comprendono anche il codice originale di **Bootstrap {{ site.bootstrap_version }}**, ereditandone quindi tutte i selettori, le funzionalità, ecc., che sono consultabili al sito di Bootstrap stesso.
 
 La libreria è accessibile anche via CDN su [jsDelivr](https://www.jsdelivr.com/package/npm/bootstrap-italia) o [unpkg](https://unpkg.com/bootstrap-italia/), di cui però è sconsigliato l'utilizzo in ambienti di produzione.
 
-### Utilizzo come dipendenza
+## Fogli di stile
 
-Alternativamente, specialmente se si utilizza [Webpack](https://webpack.github.io/), [Rollup.js](https://rollupjs.org/) o altri module bundler per l'inclusione di librerie esterne attraverso `npm`, è possibile aggiungere Bootstrap Italia come dipendenza con il seguente comando:
+### Con SASS
 
-```sh
-npm i bootstrap-italia --save
-```
+Utilizzando SASS nella propria pipeline, si può ottimizzare Bootstrap Italia (e di conseguenza il bundle finale) importando solo i componenti di cui si ha bisogno. Le ottimizzazioni maggiori proverranno probabilmente dalla sezione Layout e dai componenti del file principale `bootstrap-italia.scss`, ad esempio
+
+```scss
+// funzioni e variabili colore
+@import 'bootstrap-italia/src/scss/functions';
+@import 'bootstrap-italia/src/scss/utilities/colors_vars';
+
+//variables
+@import 'bootstrap-italia/src/scss/variables';
 
-Di seguito le informazioni per l'utilizzo dei singoli file.
+//classi colore
+@import 'bootstrap-italia/src/scss/utilities/colors';
 
-### CSS
+// ...
+```
 
-Una volta scaricato e decompresso il file, all'interno della cartella `css` sarà presente un file CSS minificato (`bootstrap-italia.min.css`) con la sua [sourcemap](https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/) (opzionale).
+### Con il bundle CSS
 
 Per includere questo file all'interno del proprio progetto sarà sufficiente aggiungere il tag `<link>` di seguito riportato all'interno del tag `<head>` della pagina, prima di ogni altro CSS già presente, eventualmente correggendo il riferimento al percorso del file:
 
 ```html
 <link rel="stylesheet" href="<path-a-bootstrap-italia>/dist/css/bootstrap-italia.min.css" />
 ```
 
-### JavaScript
+## JavaScript
 
-All'interno della cartella `js` saranno invece presenti il file di bundle, il file non bundle e i componenti suddivisi in moduli.
+I vari componenti sono inizializzati (salvo casi particolari specificati nella documentazione del singolo componente) grazie all'utilizzo dell'attributo `data-bs-toggle` o in generale di uno specifico attributo `data`. Questi attributi devono essere utilizzati esclusivamente nel caso in cui si desidera che i componenti siano inizializzati in maniera automatica, in caso contrario questo attributo deve essere omesso.
 
-I vari componenti sono inizializzati (salvo casi particolari specificati nella documentazione del singolo componente) grazie all'utilizzo dell'attributo `data-bs-target` specifico per ogni componente. Questo attributo deve essere utilizzato esclusivamente nel caso in cui si desidera che i componenti siano inizializzati in maniera automatica, in caso contrario questo attributo deve essere omesso.
+### Moduli
 
-#### Versione bundle
+Si può ottimizzare l'inclusione del JavaScript utilizzando un bundler (come ad esempio Vite, Webpack o Rollup), che permettono di importare solo i moduli JavaScript che si vogliono utilizzare. 
 
-In questo caso, dopo aver copiato i file all'interno del progetto, sarà sufficiente inserire una versione dei tag `<script>` di seguito riportati alla fine della pagina HTML, giusto prima della chiusura del tag `</body>`. Si potrà quindi includere la libreria in questo modo:
+Ad esempio per includere soltanto il componente `Carousel`:
 
-```html
-<script src="<path-a-bootstrap-italia>/dist/js/bootstrap-italia.bundle.min.js"></script>
-```
-
-#### Versione non bundle
-
-Per la versione non bundle, dopo aver copiato i file all'interno del progetto, sarà sufficiente inserire una versione dei tag `<script>` di seguito riportati alla fine della pagina HTML, giusto prima della chiusura del tag `</body>`. Si potrà quindi includere la libreria in questo modo, inserendo solo le dipendenze che servono al nostro progetto (qui nell'esempio sono inserite solo alcune per riferimento):
+```js
+import { Carousel } from 'bootstrap-italia'
 
-```html
-<!--- Dipendenze da inserire solo se usate -->
-<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
-<!--- Versione non bundle di Bootstrap Italia -->
-<script src="<path-a-bootstrap-italia>/dist/js/bootstrap-italia.min.js"></script>
+const carousel = new Carousel(document.getElementById('myCarousel'))
 ```
 
-#### Moduli
-
-In alternativa se si vogliono utilizzare i moduli, è possibile importare e utilizzare singolarmente i vari componenti. Di seguito un esempio (potete trovare [qui](https://github.com/astagi/demo-communitylabs-bsi) un esempio completo con l'utilzzo di Rollup).
+È disponibile [un esempio completo utilizzando Rollup](https://github.com/astagi/demo-communitylabs-bsi) ([video del Community Lab](https://designers.italia.it/community/media/20241217-community-lab/)) e, di seguito, un esempio con alcuni componenti importati.
 
 ```js
 import { Carousel, Alert, Notification, Tooltip, Sticky, loadFonts } from 'bootstrap-italia'
@@ -123,11 +124,32 @@ loadFonts()
 
 {% include callout-danger-async-methods.md %}
 
-### Fonts
+### Versione bundle
+
+Per un uso bundle, dopo aver copiato i file all'interno del progetto, sarà sufficiente inserire una versione dei tag `<script>` di seguito riportati alla fine della pagina HTML, giusto prima della chiusura del tag `</body>`. Si potrà quindi includere la libreria in questo modo:
+
+```html
+<script src="<path-a-bootstrap-italia>/dist/js/bootstrap-italia.bundle.min.js"></script>
+```
+
+### Versione non bundle
+
+Per la versione non bundle, dopo aver copiato i file all'interno del progetto, sarà sufficiente inserire una versione dei tag `<script>` di seguito riportati alla fine della pagina HTML, giusto prima della chiusura del tag `</body>`. Si potrà quindi includere la libreria in questo modo, inserendo solo le dipendenze che servono al nostro progetto (qui nell'esempio sono inserite solo alcune per riferimento):
+
+```html
+<!--- Dipendenze da inserire solo se usate -->
+<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
+<!--- Versione non bundle di Bootstrap Italia -->
+<script src="<path-a-bootstrap-italia>/dist/js/bootstrap-italia.min.js"></script>
+```
+
+## Fonts
 
 È necessario anche includere i file relativi ai font referenziati nel CSS, mantenendo i path dei singoli font utilizzato nei [file sorgente della libreria](https://github.com/italia/bootstrap-italia/releases/tag/v{{ site.current_version }}). L'inclusione dei font può avvenire utilizzando CSS o JavaScript.
 
-#### Via CSS
+### Via CSS
 
 Per caricare i font necessari via CSS è necessario inserire nei propri fogli di stile il seguente codice. Per semplicità abbiamo utilizzato la sintassi SCSS in modo da utilizzare una variabile per specificare la path di base dove prendere i font.
 
@@ -380,38 +402,30 @@ $font-path: "/fonts";
 }
 ```
 
-#### Via JavaScript
-
-```html
-<script>
-  bootstrap.loadFonts('/bootstrap-italia/dist/fonts');
-</script>
-```
-
-o importandolo
+### Via JavaScript
 
 ```js
 import { loadFonts } from 'bootstrap-italia'
 
 loadFonts('/bootstrap-italia/dist/fonts');
 ```
 
+Oppure
+
+```html
+<script>
+  bootstrap.loadFonts('/bootstrap-italia/dist/fonts');
+</script>
+```
+
 Di default se non viene specificato alcun path, i font saranno cercati all'interno di una cartella `/node_modules/bootstrap-italia/dist/fonts` oppure, se valorizzata, utilizzando il contenuto della variabile globale `__PUBLIC_PATH__`.
 
-### Icone
+## Icone
 
 Le icone a disposizione sono un componente assolutamente opzionale e sono pubblicate nella libreria sotto forma di sprite SVG `/bootstrap-italia/dist/svg/`, le cui singole SVG sorgenti sono presenti nel repository.
 
 Per informazioni, si può fare riferimento alla [documentazione sull'utilizzo delle icone]({{ site.baseurl }}/docs/utilities/icone/).
 
-### Altri esempi
-
-Assieme a questa documentazione, si possono consultare una vasta quantità di esempi, consultabili sia alla sezione [esempi]({{ site.baseurl }}/docs/esempi/) e [progetti]({{ site.baseurl }}/docs/progetti/) di questo sito, che [sul sito di Bootstrap](https://getbootstrap.com/docs/{{ site.bootstrap_minor }}/examples/), con i quali è possibile iniziare a personalizzare la tua pagina semplicemente copiando il loro codice sorgente.
-
-Il codice sorgente di tali esempi si può trovare anche nel repository di Bootstrap Italia, nella [cartella `docs/esempi/`](https://github.com/italia/bootstrap-italia/tree/master/docs/esempi).
-
-Tra i [progetti]({{ site.baseurl }}/docs/progetti/) si possono trovare molti riferimenti a progetti terzi che fanno uso di Bootstrap Italia, come i temi per alcuni CMS, generatori di siti statici e framework per il web.
-
 ## Impostazioni globali
 
 Il framework Bootstrap, e di conseguenza il tema Bootstrap Italia, utilizza e richiede alcune impostazioni globali di cui è bene essere al corrente durante lo sviluppo, che tendono _normalizzare_ gli stili tra i vari browser. Di seguito alcune di esse.
@@ -455,6 +469,14 @@ Infine, per _normalizzare_ alcuni comportamenti cross-browser, Bootstrap Italia
 
 ---
 
+## Altri esempi
+
+Assieme a questa documentazione, si possono consultare una vasta quantità di esempi, consultabili sia alla sezione [esempi]({{ site.baseurl }}/docs/esempi/) e [progetti]({{ site.baseurl }}/docs/progetti/) di questo sito, che [sul sito di Bootstrap](https://getbootstrap.com/docs/{{ site.bootstrap_minor }}/examples/), ai quali è possibile ispirarsi per iniziare a personalizzare le tue pagine. 
+
+Il codice sorgente di tali esempi si può trovare anche nel repository di Bootstrap Italia, nella [cartella `docs/esempi/`](https://github.com/italia/bootstrap-italia/tree/master/docs/esempi).
+
+Tra i [progetti]({{ site.baseurl }}/docs/progetti/) si possono trovare molti riferimenti a progetti terzi che fanno uso di Bootstrap Italia, come i temi per alcuni CMS, generatori di siti statici e framework per il web.
+
 ###### Continua la lettura >
 
 Se ti interessa contribuire alla libreria e sapere come funziona il processo di compilazione dei file e la creazione della documentazione di Bootstrap Italia,

docs/come-iniziare/strumenti-di-compilazione.md

@@ -64,38 +64,6 @@ Per iniziare a modificare la libreria, la cartella d'interesse è `/src`, che co
 - `/src/js/bootstrap-italia.entry.js` (che genera il bundle)
 - `/src/js/bootstrap-italia.js` (che include i moduli)
 
-## Ottimizzare la libreria
-
-È possibile ottimizzare le dimensioni della libreria compilata rimuovendo i moduli JavaScript e/o i file scss che non sono di interesse.
-
-### Ottimizzare i file Sass da importare
-
-Quando si utilizza Sass nella propria pipeline, si può ottimizzare Bootstrap Italia importando solo i componenti di cui si ha bisogno. Le ottimizzazioni maggiori proverranno probabilmente dalla sezione Layout e dai componenti del file principale `bootstrap-italia.scss`, ad esempio
-
-```scss
-// funzioni e variabili colore
-@import 'bootstrap-italia/src/scss/functions';
-@import 'bootstrap-italia/src/scss/utilities/colors_vars';
-
-//variables
-@import 'bootstrap-italia/src/scss/variables';
-
-//classi colore
-@import 'bootstrap-italia/src/scss/utilities/colors';
-
-// ...
-```
-
-### Ottimizzare i file JavaScript da importare
-
-Si può ottimizzare l'inclusione del JavaScript utilizzando bundler come Webpack o Rollup, che permettono di importare solo i moduli JavaScript che si vogliono utilizzare. Nell'esempio seguente, mostriamo come includere solo il componente Carousel:
-
-```js
-import { Carousel } from 'bootstrap-italia'
-
-const carousel = new Carousel(document.getElementById('myCarousel'))
-```
-
 ## Compilare la documentazione
 
 La documentazione di Bootstrap Italia è gestita con [**GitHub Pages**](https://pages.github.com/) attraverso [Jekyll][jekyll]: per questo è composta di file statici che risiedono sul branch `gh-pages`. I file presenti a questo branch corrispondono esattamente ai file generati con il comando `jekyll build` nella cartella locale `_site`. Se si utilizza [Docker](https://www.docker.com/get-started) ignorare la sezione successiva `Processo manuale` che spiega come installare le dipendenze manualmente nel sistema.
@@ -143,7 +111,9 @@ Il flusso di sviluppo da seguire per contribuire alla libreria è semplificato r
 
 Il rilascio di una nuova versione della libreria avverrà unicamente alla creazione di un tag e alla conseguente creazione di una release su GitHub, come vedremo nella sezione seguente.
 
-## Creare una nuova release
+## Per i maintainer
+
+### Creare una nuova release
 
 Per aggiornare il numero di versione e creare una nuova release, è necessario effettuare i due seguenti step manuali:
 

docs/componenti/accordion.md

@@ -367,6 +367,8 @@ Aggiungendo la classe `.accordion-left-icon` ad `.accordion` si ottiene una vari
 
 ## Attivazione tramite codice
 
+{% include callout-bundle-methods.md %}
+
 Il componente Accordion si basa sul componente [Collapse]({{ site.baseurl }}/docs/componenti/dropdown/#attivazione-tramite-codice).
 
 ```js
@@ -381,14 +383,16 @@ Bootstrap Italia migliora l'accessibilità dell'Accordion implementando la navig
 
 #### Metodi
 
-<table class="table table-bordered table-striped">
-  <thead>
-    <tr>
-      <th style="width: 150px;">Metodo</th>
-      <th>Descrizione</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% include standard-methods.html class="Accordion" %}
-  </tbody>
-</table>
+<div class="table-responsive">
+  <table class="table table-bordered table-striped">
+    <thead>
+      <tr>
+        <th style="width: 150px;">Metodo</th>
+        <th>Descrizione</th>
+      </tr>
+    </thead>
+    <tbody>
+      {% include standard-methods.html class="Accordion" %}
+    </tbody>
+  </table>
+</div>