silex_ui 0.2.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8c471e84ca4f41561bb7daa42d18669287be88e7d278d82ea79566f0baeaf46
-  data.tar.gz: 6af9d732ec1b5188374e38ff7d06d771540886e7ea64f826dea89b0a876bd248
+  metadata.gz: 17dc9638b6a4ef5db846b596b181cf7a4517e38b13cb990fd2b2fcc2bb042297
+  data.tar.gz: d36863c0f23bc76ae13ef5d2130634681677e068d9c41000508cd4099888d0c1
 SHA512:
-  metadata.gz: 1ef386b477752142f8e2d2ec94a89e5256c03aab117693f3e945e6b3cfc223d1402ba29defb027ae5b3a4fa05ba17336c00006a159994f8a29e48327a134d2e7
-  data.tar.gz: 4a4fef0ccf67d57b6f4efbddd7338ad9655a0c1ded3a1e2649820b5f640a926b4c5c892f336e72fb00fe70a55af5f149d1352a8d6f7312aa8a4ea649e49de1be
+  metadata.gz: a21e4670e28539f69a9b05461c3c82045168fec106360f7b39385a66f7670b5956db27c714329bdc67cdd53c08a9147e1c288b8d2704594d1ddf1376a6fb2a03
+  data.tar.gz: 9437eec4ce261ff973d1995b14bc5dac2e8aba59764f0a53d02df41978d8720ed9d64f358dbe0d6334882310e50b0ff8a5348f3c84db72b6a5f32189122ab584

data/CHANGELOG.md

@@ -6,6 +6,190 @@ Toutes les évolutions notables de silex_ui. Le format suit
 
 ## [Non publié]
 
+## [0.8.0] — 2026-09-10
+
+De quoi corriger sans quitter la liste.
+
+### Ajouté
+
+- `SilexUi::RemoteModalComponent` — le `Modal::RemoteComponent` du Silex, porté
+  sur `<dialog>` : une coquille posée une fois, dont le corps est un Turbo Frame
+  vide. `RemoteModalComponent.trigger(modal:, frame:)` rend les attributs du
+  déclencheur — les écrire à la main sur chaque lien, c'est se tromper une fois
+  sur trois d'identifiant de frame. Rouvrir le même lien recharge le frame,
+  sinon un formulaire rouvert garderait la saisie abandonnée du tour d'avant.
+- `SilexUi::InlineEditComponent` — l'`inline_edit` du Silex : la valeur cède la
+  place au champ au clic, Échap annule, Entrée envoie, et quitter le champ
+  envoie aussi. Un champ ouvert qu'on abandonne est un champ qu'on croit avoir
+  enregistré.
+- `SilexUi::FilterBarComponent` et `SilexUi::FilterFieldComponent` — le
+  `floating-filter` : le libellé vit dans le champ et remonte en violet dès
+  qu'une valeur est choisie. Tout se joue en CSS (`:has(option:checked)`,
+  `:placeholder-shown`), donc aucun contrôleur n'a à savoir si un filtre est
+  rempli. Deux densités, `:md` et `:sm`.
+- Contrôleurs `silex-ui--remote-modal`, `silex-ui--inline-edit` et
+  `silex-ui--tooltip`.
+
+### Modifié
+
+- `TableComponent` accepte `framed:` — un tableau posé dans un panneau qui a
+  déjà bordure et rayon laisse tomber les siens, plutôt que de dessiner un
+  second cadre. Ses colonnes acceptent `icon:`, et ses lignes respirent.
+- Les modales plafonnent à `85vh` et font défiler leur corps : un formulaire
+  long ne doit pas sortir de l'écran par le bas.
+- `PageHeaderComponent` rend les segments du fil d'Ariane et pose lui-même les
+  points de séparation.
+
+## [0.7.0] — 2026-09-10
+
+Le rail, repris ligne à ligne sur le CSS du Silex plutôt qu'à l'œil.
+
+### Modifié
+
+- **Le rail suit `.admin-nav-icon`, pas `.campaign-icon-wrapper`.** Le Silex a
+  deux styles de vignette : celui de ses campagnes — 52 px, bordure de 2 px,
+  anneau — et celui de sa navigation, bien plus léger : 42 px, un fond violet
+  dilué, aucune bordure, l'icône en 16 px. C'est le second qu'il fallait.
+- **Les icônes du rail sont indigo, jamais grises.** Une seule règle du Silex
+  (`.admin-nav-icon i { color: #667eea }`) expliquait l'essentiel de l'écart :
+  c'est elle qui donne au rail sa couleur avant même qu'on lise une forme.
+- **La section courante ne prend ni bordure ni anneau** — sa barre contre le
+  bord suffit, et une ombre portée la décolle. Le fond violet plein est commenté
+  dans le CSS du Silex ; le reprendre alourdissait tout le rail.
+- La barre de la section courante reprend ses proportions (3 × 24 px), et les
+  entrées leur respiration (`py-2.5`).
+- Le survol suit le Silex : la pastille s'éclaircit et grandit d'un cheveu.
+- **Le hamburger mobile a ses trois barres**, qui se croisent en X à
+  l'ouverture. Une icône de grille ne dit pas « menu ».
+
+### Corrigé
+
+- **Sur mobile, le libellé du rail est dans le lien.** Il était posé à côté :
+  seul le carré de 42 px conduisait quelque part, appuyer sur le texte ne
+  faisait rien. Il n'apparaît plus qu'une fois dans le DOM.
+- La largeur du rail et la hauteur de la barre mobile passent par leurs jetons
+  (`w-rail`, `pl-rail`, `h-15`) au lieu d'être réécrites à trois endroits.
+
+### Ajouté
+
+- Le sélecteur de thème à **trois positions** — clair, automatique, sombre —
+  dans sa pilule. « Automatique » n'est plus un défaut caché mais un choix qu'on
+  peut reprendre, et il suit le système en cours de route : un thème qui ne
+  bascule qu'au rechargement n'est pas automatique.
+- **Une infobulle qui ne se fait pas rogner.** Celle du rail vivait dans son
+  lien, donc dans une boîte qui défile : elle était coupée et ne s'est jamais
+  affichée — ce qu'on voyait était l'infobulle native du navigateur. Le
+  contrôleur `silex-ui--tooltip` la pose désormais sur `<body>`, en position
+  fixe. Il lit le `title`, le retire, et le remet en partant : sans JavaScript
+  le navigateur fait le travail, avec lui l'infobulle est stylée. Jamais les
+  deux.
+- `BreakdownComponent` accepte `limit:` et `more_href:` — au-delà de la limite
+  il annonce le reste (« + 34 autres ») au lieu de l'étaler. Une répartition qui
+  déroule quarante lignes n'est plus une répartition.
+- `ShellComponent` gagne un slot `utilities` : ce qui se pose au-dessus du menu
+  utilisateur, sous un filet — cloche de notifications, sélecteur de thème.
+
+## [0.6.0] — 2026-09-10
+
+### Modifié
+
+- **Les icônes sont celles du Silex.** Le jeu passe de Heroicons à Font Awesome,
+  avec le vocabulaire exact de l'app (68 icônes) : mêmes formes pleines, mêmes
+  noms. Les noms logiques du gem ne changent pas — `icon: "globe"` continue de
+  marcher.
+
+### Ajouté
+
+- `config.icon_renderer` — `:svg` (défaut) embarque le tracé dans le gem,
+  `:font` rend `<i class="fa-solid fa-globe">` et laisse l'application fournir
+  la police.
+
+  Ce second mode existe pour Font Awesome **Pro** : ses icônes ne sont pas
+  redistribuables, un gem public ne peut donc pas les transporter. Une
+  application sous licence Pro charge son kit et bascule le rendu ; le gem se
+  contente alors de nommer l'icône.
+
+## [0.5.0] — 2026-09-10
+
+Ce qui manquait pour que les pages ressemblent vraiment au Silex : ses deux
+en-têtes, et la surface blanche dans laquelle tout son contenu vit.
+
+### Ajouté
+
+- `SilexUi::PanelComponent` — la `.content-section` du Silex : surface blanche
+  arrondie, en-tête à pastille dégradée, titre franc et lien vers le détail.
+  C'est lui qui structure les pages ; un bloc de contenu ne vit pas à même le
+  fond.
+- `SilexUi::ProgressComponent` — objectif, part réalisée, et les deux bornes
+  lisibles de part et d'autre.
+- `SilexUi::ActionListComponent` — la liste « Actions requises » : une pastille
+  colorée, ce qu'il faut faire, pourquoi, et un chevron qui n'apparaît que si la
+  ligne mène quelque part.
+
+### Modifié
+
+- `PageHeaderComponent` prend une `variant:`. `:hero` — la bande pâle pleine
+  largeur des pages de liste, avec ses halos et son fil d'Ariane ; `:banner` —
+  la carte à dégradé violet plein des tableaux de bord, avec sa plaque
+  translucide à droite. Le Silex a les deux ; n'en porter qu'une revenait à ne
+  ressembler qu'à la moitié de l'app.
+- Les compteurs respirent : chiffre en 3xl extra-gras, carte plus généreuse.
+- `TableComponent` n'affiche plus de bande d'en-tête quand aucune colonne n'est
+  nommée — elle se lisait comme une ligne vide.
+
+## [0.4.0] — 2026-09-10
+
+L'ossature du Silex : son rail d'icônes, son menu utilisateur, ses avatars.
+
+### Ajouté
+
+- `SilexUi::ShellComponent` — le cadre de l'application : rail fixe de 80px à
+  gauche, page à droite. Chaque icône porte son libellé, qui apparaît au survol
+  sur desktop et se pose à côté d'elle sur mobile : un rail d'icônes sans texte
+  se devine au lieu de se lire. La section courante prend l'anneau violet et la
+  barre d'accent contre le bord. Sous 768px, le rail cède à une barre supérieure
+  et un panneau qui coulisse derrière un fond sombre.
+- `SilexUi::AvatarComponent` — une image quand il y en a une, les initiales sur
+  le dégradé de marque sinon. Deux lettres, jamais une : un avatar à une lettre
+  se confond trop vite.
+- `SilexUi::DropdownComponent` — le menu utilisateur du Silex, qui se ferme au
+  clic dehors, à Échap et à la navigation. Les entrées à `method:` passent par
+  un formulaire, donc par le jeton CSRF.
+- Contrôleurs `silex-ui--sidebar` et `silex-ui--dropdown`.
+- Jetons d'espacement `rail`, `15` et `70` pour le rail et son panneau mobile.
+
+## [0.3.0] — 2026-09-10
+
+Le design system parle désormais le dialecte du Silex. Les composants gardent
+leur API : c'est leur habillage qui change, et les applications qui passent par
+eux suivent sans rien modifier.
+
+### Modifié
+
+- **Palette entièrement remplacée.** Le sable et l'encre légère cèdent la place
+  à l'ardoise froide et à l'indigo du Silex. `sand-*` devient `surface-*`,
+  `ink-*` change de valeurs et gagne les nuances 500 et 700.
+- **Formes du Silex** : cartes arrondies et surélevées, barre d'accent qui
+  s'épaissit au survol, icône dans un carré arrondi, pastilles pleines,
+  en-tête de page en dégradé pastel avec deux halos, tableaux à en-tête
+  collant et lignes qui réagissent au survol.
+- **Atkinson Hyperlegible** remplace la pile système, comme au Silex.
+- `silex_ui:sync` recopie aussi `app/views`.
+
+### Ajouté
+
+- `SilexUi::IconComponent` — 44 icônes Heroicons 2.2 (MIT) en SVG inline, sans
+  dépendance réseau. Les composants acceptent tous un `icon:`.
+- **Thème sombre** : toute l'échelle est redéfinie, pas seulement les surfaces.
+  Un pastel posé sur du sombre reste un pastel — les fonds d'état deviennent
+  des teintes sourdes et c'est le texte qui s'éclaircit.
+- `SilexUi::ThemeToggleComponent` et le contrôleur `silex-ui--theme`, qui
+  retient le choix d'une visite à l'autre et suit le système par défaut.
+- `SilexUi::Tones` — une seule table de correspondance ton → classes, pour
+  qu'une pastille verte et un compteur vert tirent du même vert.
+- Quatre tons de catégorisation en plus des cinq états : `purple`, `pink`,
+  `teal`, `cyan`.
+
 ## [0.2.0] — 2026-09-10
 
 ### Ajouté

data/LICENSE.txt

@@ -19,3 +19,9 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+Les tracés d'icônes embarqués dans app/components/silex_ui/icon_component.rb
+proviennent de Font Awesome Free 6.7 (https://fontawesome.com), publiés sous
+licence CC BY 4.0 — https://fontawesome.com/license/free

data/README.md

@@ -89,22 +89,82 @@ end
 
 | Famille | Rôle | Nuances |
 |---|---|---|
-| `sand` | le sol : fond de page, bordures | 50 · 100 · 200 · 300 |
-| `ink` | le texte, du plus discret au plus plein | 300 · 400 · 600 · 900 |
-| `alert` | ce qui a lapsé, ce qui est cassé | 50 · 100 · 300 · 700 |
-| `warn` | ce qui est sur le point de basculer | 50 · 100 · 300 · 700 |
-| `ok` | ce qui est en règle | 50 · 100 · 300 · 700 |
-| `info` | neutre, factuel, sans urgence | 50 · 100 · 300 · 700 |
+| `surface` | les fonds, de la carte à la bordure | 0 · 50 · 100 · 200 · 300 |
+| `ink` | le texte, du plus plein au plus discret | 900 · 700 · 500 · 400 · 300 |
+| `brand` | l'accent — l'indigo du Silex et son violet | 50 · 100 · 300 · 500 · 600 · 700 |
+| `ok` `warn` `alert` `info` | les quatre états | 50 · 100 · 300 · 500 · 700 |
+| `purple` `pink` `teal` `cyan` | les familles, quand il ne s'agit plus d'un état | 50 · 300 · 500 · 700 |
+
+Rayons : `rounded-badge` (8px), `rounded-surface` (12px), `rounded-card` (14px).
+Ombres : `shadow-card` et `shadow-card-hover`.
 
 Les tons sont **sémantiques** : on écrit `tone: :alert`, jamais `tone: :red`.
 Le jour où l'alerte devient violette, une seule ligne bouge.
 
+## Thème sombre
+
+Le thème se pose sur `<html data-theme="dark">`, comme le fait le Silex sur son
+`<body>`. Toute l'échelle est redéfinie, pas seulement les surfaces : un pastel
+posé sur du sombre reste un pastel, donc les fonds d'état deviennent des teintes
+sourdes et c'est le texte qui s'éclaircit.
+
+`SilexUi::ThemeToggleComponent` fournit l'interrupteur ; le contrôleur retient le
+choix et suit le système par défaut. Pour éviter que la page clignote en blanc au
+chargement, posez le thème avant le premier rendu, dans le `<head>` :
+
+```erb
+<%= javascript_tag nonce: true do %>
+  (function () {
+    var stored = localStorage.getItem("silex-ui-theme")
+    var dark = stored ? stored === "dark" : window.matchMedia("(prefers-color-scheme: dark)").matches
+    document.documentElement.dataset.theme = dark ? "dark" : "light"
+  })()
+<% end %>
+```
+
+## Icônes
+
+68 icônes **Font Awesome** — le vocabulaire exact du Silex, mêmes formes pleines,
+mêmes noms.
+
+```erb
+<%= render SilexUi::IconComponent.new(name: :globe, size: :lg) %>
+```
+
+Tous les composants qui peuvent en porter une acceptent `icon:` — bouton,
+pastille, compteur, en-tête, panneau, section, carte, bandeau, état vide, rail.
+`SilexUi::IconComponent::NAMES` donne la liste ; le catalogue les affiche toutes.
+
+Deux rendus, selon ce dont dispose l'application :
+
+| `config.icon_renderer` | Rendu | Pour qui |
+|---|---|---|
+| `:svg` (défaut) | tracé embarqué dans le gem | toute application, sans rien installer |
+| `:font` | `<i class="fa-solid fa-globe">` | une application qui charge son propre kit |
+
+```ruby
+# config/initializers/silex_ui.rb — application sous licence Font Awesome Pro
+SilexUi.configure do |config|
+  config.icon_renderer = :font
+  config.icon_font_style = "fa-solid"   # ou "fa-regular", "fa-light"…
+end
+```
+
+Le mode `:font` existe pour **Font Awesome Pro** : ses icônes ne sont pas
+redistribuables, un gem public ne peut donc pas les embarquer. L'application
+charge son kit sous sa licence, le gem se contente de nommer l'icône — et les
+tracés Pro ne quittent jamais l'app.
+
+Les tracés embarqués viennent de Font Awesome **Free** 6.7
+([CC BY 4.0](https://fontawesome.com/license/free)), seule édition qu'un gem
+public a le droit de redistribuer.
+
 ## Composants
 
 | Composant | Ce qu'il fait |
 |---|---|
 | `NavComponent` | barre de navigation : marque, sections, zone utilisateur |
-| `PageHeaderComponent` | titre de page, sous-titre, actions — alimente aussi `content_for :title` |
+| `PageHeaderComponent` | en-tête de page, en bande pâle (`:hero`) ou en carte violette (`:banner`) |
 | `SectionComponent` | bloc précédé d'un titre en petites capitales |
 | `CardComponent` | surface surélevée, avec en-tête et pied optionnels |
 | `StatGridComponent` / `StatCardComponent` | rangée de compteurs, avec lien, ton, évolution |
@@ -119,10 +179,40 @@ Le jour où l'alerte devient violette, une seule ligne bouge.
 | `ButtonComponent` | bouton ou lien, quatre variantes |
 | `CopyButtonComponent` | copie dans le presse-papiers, avec confirmation |
 | `ModalComponent` | fenêtre modale sur `<dialog>` |
+| `ShellComponent` | l'ossature : rail d'icônes à gauche, page à droite |
+| `PanelComponent` | la surface blanche dans laquelle vit tout contenu |
+| `ProgressComponent` | un objectif et ce qui en est fait |
+| `ActionListComponent` | lignes à pastille, titre, sous-titre et chevron |
+| `AvatarComponent` | image ou initiales sur le dégradé de marque |
+| `DropdownComponent` | menu qui se ferme dès qu'on regarde ailleurs |
+| `RemoteModalComponent` | modale dont le contenu arrive du serveur à l'ouverture |
+| `InlineEditComponent` | une valeur qu'on corrige sur place |
+| `FilterBarComponent` / `FilterFieldComponent` | barre de filtres à libellé flottant |
+| `IconComponent` | une icône en SVG inline |
+| `ThemeToggleComponent` | l'interrupteur clair / sombre |
 
 Tous acceptent `class:` : les classes de l'appelant sont ajoutées après celles
 du composant, donc elles gagnent à spécificité égale.
 
+## L'ossature
+
+Le rail du Silex, monté dans le layout — et seulement une fois la session
+ouverte : les pages de connexion n'ont rien à quoi naviguer.
+
+```erb
+<%= render SilexUi::ShellComponent.new do |shell| %>
+  <% shell.with_brand do %><%= link_to "N", root_path %><% end %>
+  <% shell.with_item icon: "home", href: root_path, label: "Tableau de bord", active: current_page?(root_path) %>
+  <% shell.with_item icon: "globe", href: websites_path, label: "Sites" %>
+  <% shell.with_footer do %><%= render SilexUi::AvatarComponent.new(name: current_user.display_name) %><% end %>
+  <% shell.with_page do %><%= yield %><% end %>
+<% end %>
+```
+
+L'en-tête de page (`PageHeaderComponent`) est prévu pour occuper toute la largeur
+du contenu : posez-le hors de la gouttière, et le reste de la page dans un
+conteneur.
+
 ## Exemples
 
 ```erb

data/app/assets/javascripts/silex_ui/controllers/clipboard_controller.js

@@ -3,9 +3,10 @@ import { Controller } from "@hotwired/stimulus"
 // Copie une valeur dans le presse-papiers et le dit — un bouton qui ne confirme
 // rien laisse l'utilisateur cliquer trois fois.
 export default class extends Controller {
+  static targets = ["label"]
   static values = {
     value: String,
-    label: { type: String, default: "Copier" },
+    label: String,
     copiedLabel: { type: String, default: "Copié" },
     resetAfter: { type: Number, default: 1500 }
   }
@@ -15,24 +16,23 @@ export default class extends Controller {
 
     try {
       await navigator.clipboard.writeText(this.valueValue)
-      this.#confirm()
+      this.#say(this.copiedLabelValue)
     } catch {
       // Presse-papiers refusé (contexte non sécurisé, permission) : on laisse la
       // valeur sélectionnable plutôt que de mentir sur le succès.
-      this.element.textContent = "Échec"
-      this.#restoreLater()
+      this.#say("Échec")
     }
   }
 
-  #confirm() {
-    this.element.textContent = this.copiedLabelValue
-    this.#restoreLater()
-  }
+  // Seul le libellé change ; l'icône du bouton n'est pas à réécrire.
+  #say(text) {
+    if (this.hasLabelTarget) this.labelTarget.textContent = text
+    this.element.classList.add("silex-ui-copied")
 
-  #restoreLater() {
     clearTimeout(this.timeout)
     this.timeout = setTimeout(() => {
-      this.element.textContent = this.labelValue
+      if (this.hasLabelTarget) this.labelTarget.textContent = this.labelValue
+      this.element.classList.remove("silex-ui-copied")
     }, this.resetAfterValue)
   }
 

data/app/assets/javascripts/silex_ui/controllers/dropdown_controller.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Un menu qui s'ouvre au clic et se ferme dès qu'on regarde ailleurs : clic
+// dehors, touche Échap, ou navigation Turbo.
+export default class extends Controller {
+  static targets = ["menu"]
+
+  toggle(event) {
+    event.preventDefault()
+    this.menuTarget.classList.toggle("hidden")
+  }
+
+  close() {
+    this.menuTarget.classList.add("hidden")
+  }
+
+  closeOnOutsideClick(event) {
+    if (!this.element.contains(event.target)) this.close()
+  }
+
+  disconnect() {
+    this.close()
+  }
+}

data/app/assets/javascripts/silex_ui/controllers/inline_edit_controller.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Bascule affichage ↔ formulaire pour l'édition en place.
+//
+// Le champ garde le focus et le curseur en fin de valeur : on vient pour
+// corriger, pas pour tout retaper. Échap annule, Entrée envoie, et perdre le
+// focus envoie aussi — un champ ouvert qu'on quitte est un champ qu'on croit
+// avoir enregistré.
+export default class extends Controller {
+  static targets = ["display", "form", "field"]
+  static values = { submitOnBlur: { type: Boolean, default: true } }
+
+  edit(event) {
+    event?.preventDefault()
+    this.displayTarget.hidden = true
+    this.formTarget.hidden = false
+
+    const field = this.hasFieldTarget ? this.fieldTarget : this.formTarget.querySelector("select, input, textarea")
+    if (!field) return
+
+    field.focus()
+    if (field.setSelectionRange && field.type === "text") field.setSelectionRange(field.value.length, field.value.length)
+  }
+
+  submit() {
+    const form = this.formTarget.querySelector("form") ?? this.formTarget
+    form.requestSubmit?.()
+  }
+
+  submitOnBlur() {
+    if (this.submitOnBlurValue) this.submit()
+  }
+
+  cancel(event) {
+    event?.preventDefault()
+    this.formTarget.hidden = true
+    this.displayTarget.hidden = false
+  }
+}

data/app/assets/javascripts/silex_ui/controllers/remote_modal_controller.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Ouvre une modale dont le contenu est chargé à la demande.
+//
+// Se pose sur le déclencheur — un lien vers la page à charger. Le Turbo Frame
+// de la modale prend l'href du lien, la modale s'ouvre, le serveur fournit le
+// reste. Rouvrir le même lien recharge le frame : sans ça, un formulaire
+// rouvert garderait la saisie abandonnée du tour précédent.
+export default class extends Controller {
+  static values = { modal: String, frame: String }
+
+  open(event) {
+    event.preventDefault()
+
+    const frame = document.getElementById(this.frameValue)
+    if (frame) {
+      frame.getAttribute("src") === this.element.href ? frame.reload() : (frame.src = this.element.href)
+    }
+
+    document.getElementById(this.modalValue)?.showModal()
+  }
+}

data/app/assets/javascripts/silex_ui/controllers/sidebar_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Le rail, sur mobile : un panneau qui coulisse et un fond qui le protège.
+// Sur desktop le rail est toujours là — ce contrôleur ne fait rien.
+export default class extends Controller {
+  static targets = ["panel", "overlay", "burger"]
+
+  toggle() {
+    this.#open ? this.close() : this.open()
+  }
+
+  open() {
+    this.panelTarget.dataset.open = ""
+    if (this.hasBurgerTarget) this.burgerTarget.dataset.open = ""
+    this.overlayTarget.hidden = false
+    document.body.style.overflow = "hidden"
+  }
+
+  close() {
+    delete this.panelTarget.dataset.open
+    if (this.hasBurgerTarget) delete this.burgerTarget.dataset.open
+    this.overlayTarget.hidden = true
+    document.body.style.overflow = ""
+  }
+
+  // Une page qui change sous un panneau ouvert laisserait le fond bloqué.
+  disconnect() {
+    document.body.style.overflow = ""
+  }
+
+  get #open() {
+    return this.panelTarget.dataset.open !== undefined
+  }
+}

data/app/assets/javascripts/silex_ui/controllers/theme_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Clair, automatique ou sombre — et on s'en souvient. Le thème est posé sur
+// <html> par un attribut : le CSS n'a qu'une variable à relire, pas une feuille
+// entière à recharger.
+//
+// « Automatique » suit le système, y compris quand il change en cours de route :
+// un thème qui ne bascule qu'au rechargement n'est pas automatique.
+export default class extends Controller {
+  static targets = ["option"]
+  static values = { storageKey: { type: String, default: "silex-ui-theme" } }
+
+  connect() {
+    this.media = window.matchMedia("(prefers-color-scheme: dark)")
+    this.follow = () => { if (this.#mode === "auto") this.#apply("auto") }
+    this.media.addEventListener("change", this.follow)
+
+    this.#apply(this.#mode)
+  }
+
+  disconnect() {
+    this.media?.removeEventListener("change", this.follow)
+  }
+
+  select(event) {
+    const mode = event.currentTarget.dataset.mode
+    localStorage.setItem(this.storageKeyValue, mode)
+    this.#apply(mode)
+  }
+
+  #apply(mode) {
+    const dark = mode === "dark" || (mode === "auto" && this.media.matches)
+    document.documentElement.dataset.theme = dark ? "dark" : "light"
+
+    this.optionTargets.forEach((option) => {
+      option.dataset.mode === mode ? option.setAttribute("data-active", "") : option.removeAttribute("data-active")
+    })
+  }
+
+  get #mode() {
+    return localStorage.getItem(this.storageKeyValue) ?? "auto"
+  }
+}

data/app/assets/javascripts/silex_ui/controllers/tooltip_controller.js

@@ -0,0 +1,65 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Une infobulle qui ne se fait pas rogner.
+//
+// Elle ne peut pas vivre dans son élément : le rail défile, et tout ce qui
+// dépasse de sa boîte est coupé. Elle est donc posée sur <body>, en position
+// fixe, et suivie à la main.
+//
+// Le libellé vient de l'attribut `title`, que le contrôleur retire en
+// s'installant : sans JavaScript, le navigateur affiche sa propre infobulle ;
+// avec, la nôtre la remplace. Jamais les deux.
+export default class extends Controller {
+  static values = { placement: { type: String, default: "right" }, offset: { type: Number, default: 12 } }
+
+  connect() {
+    this.label = this.element.getAttribute("title")
+    if (!this.label) return
+
+    this.element.removeAttribute("title")
+    this.show = this.show.bind(this)
+    this.hide = this.hide.bind(this)
+
+    this.element.addEventListener("mouseenter", this.show)
+    this.element.addEventListener("focus", this.show)
+    this.element.addEventListener("mouseleave", this.hide)
+    this.element.addEventListener("blur", this.hide)
+  }
+
+  disconnect() {
+    this.element.removeEventListener("mouseenter", this.show)
+    this.element.removeEventListener("focus", this.show)
+    this.element.removeEventListener("mouseleave", this.hide)
+    this.element.removeEventListener("blur", this.hide)
+    this.hide()
+
+    if (this.label) this.element.setAttribute("title", this.label)
+  }
+
+  show() {
+    this.bubble ??= this.#build()
+    document.body.appendChild(this.bubble)
+
+    const anchor = this.element.getBoundingClientRect()
+    const bubble = this.bubble.getBoundingClientRect()
+
+    this.bubble.style.top = `${anchor.top + anchor.height / 2 - bubble.height / 2}px`
+    this.bubble.style.left = this.placementValue === "left"
+      ? `${anchor.left - bubble.width - this.offsetValue}px`
+      : `${anchor.right + this.offsetValue}px`
+
+    this.bubble.dataset.visible = ""
+  }
+
+  hide() {
+    this.bubble?.remove()
+  }
+
+  #build() {
+    const bubble = document.createElement("div")
+    bubble.className = "silex-ui-tooltip"
+    bubble.setAttribute("role", "tooltip")
+    bubble.textContent = this.label
+    return bubble
+  }
+}

data/app/assets/javascripts/silex_ui/index.js

@@ -1,11 +1,32 @@
 import ClipboardController from "silex_ui/controllers/clipboard_controller"
+import DropdownController from "silex_ui/controllers/dropdown_controller"
+import InlineEditController from "silex_ui/controllers/inline_edit_controller"
 import ModalController from "silex_ui/controllers/modal_controller"
+import RemoteModalController from "silex_ui/controllers/remote_modal_controller"
+import SidebarController from "silex_ui/controllers/sidebar_controller"
+import ThemeController from "silex_ui/controllers/theme_controller"
+import TooltipController from "silex_ui/controllers/tooltip_controller"
 
 // Enregistre les contrôleurs du design system sous le préfixe `silex-ui--`,
 // pour qu'ils ne puissent jamais entrer en collision avec ceux de l'application.
 export function registerSilexUiControllers(application) {
   application.register("silex-ui--clipboard", ClipboardController)
+  application.register("silex-ui--dropdown", DropdownController)
+  application.register("silex-ui--inline-edit", InlineEditController)
   application.register("silex-ui--modal", ModalController)
+  application.register("silex-ui--remote-modal", RemoteModalController)
+  application.register("silex-ui--sidebar", SidebarController)
+  application.register("silex-ui--theme", ThemeController)
+  application.register("silex-ui--tooltip", TooltipController)
 }
 
-export { ClipboardController, ModalController }
+export {
+  ClipboardController,
+  DropdownController,
+  InlineEditController,
+  ModalController,
+  RemoteModalController,
+  SidebarController,
+  ThemeController,
+  TooltipController
+}