origam 2.32.1 → 2.32.2

package/CHANGELOG.md

@@ -18,6 +18,16 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.32.2] - 2026-10-17
+
+### Fixed — `OrigamBtn` : libellé collé en haut au lieu d'être centré (#1168)
+
+Régression publiée de 2.29.1 à 2.32.1, introduite par #1094. La hauteur du bouton est devenue `height: auto` + `min-height`, et le `height: 100%` de la grille interne `.origam-btn__loader` ne se résolvait plus contre une hauteur automatique. La racine était `inline-block`, donc son `align-items: center` restait sans effet. Résultat : un bouton rendu en `<a>` (`href` / `to`) affichait son contenu d'une ligne collé en haut de la boîte. Mesuré en Chromium : écart de 4 à 21 px entre le centre du contenu et le centre du bouton, 35 boutons `<a>` d'une ligne décentrés sur les 40 de la matrice. Les 5 autres avaient une hauteur fixe (`icon`, prop `height`), étaient en `block` (déjà en flex), ou avaient un contenu aussi haut que le minimum (x-small compact). Un `<button>` natif masquait le défaut, puisque le navigateur centre lui-même son contenu.
+
+- La racine passe de `inline-block` à `inline-flex`, et son `align-items: center` prend enfin effet. Elle reste de niveau inline (#933). Dans un parent flex ou grid, elle est blockifiée en `flex` au lieu de `block`. `block` (`display: flex`, #1095) et `wrap` (le bouton grandit avec son contenu, #1094) sont inchangés.
+- `inline-flex` plutôt que `inline-grid`, d'après la mesure : la directive ripple ajoute un `origam-ripple__container` dans le flux pendant l'appui. Avec une racine en grille, ce conteneur prend une rangée implicite et le libellé saute de 4 px à chaque clic.
+- Effet de bord mesuré : les boutons perdent environ 1 px de largeur (0,9 à 1,6 px). Ce pixel venait du `letter-spacing` ajouté après la grille interne quand elle était posée dans une ligne inline. Le libellé est maintenant à égale distance des deux bords (12 px / 12 px au lieu de 13,1 px / 12 px). Aucune hauteur ne change.
+
 ## [2.32.1] - 2026-10-16
 
 ### Fixed — trois avertissements console en dev (#1152)

package/dist/src/components/Btn/OrigamBtn.vue

@@ -455,15 +455,25 @@ defineExpose({
 		// Btn roots computed `display: block` with a `display: flex` parent,
 		// and the single Btn inside a `<p>` computed `inline` at 984px wide.
 		//
-		// `inline-block` is the value the rest of this rule already assumed —
-		// `vertical-align: middle` right below only has meaning on an
-		// inline-level box. It is also the safest: inside a flex/grid parent it
-		// blockifies to `block`, i.e. byte-for-byte today's computed value, so
-		// no existing layout moves. `&--block` still overrides it with `flex`.
-		display: inline-block;
-		// #1094 — inoperant tant que la racine est `inline-block` ; prend effet
-		// sur `&--block` (`display: flex`), ou `height: auto` + `min-height`
-		// laisseraient sinon le contenu colle en haut.
+		// The root must stay INLINE-LEVEL (#933) — `vertical-align: middle` right
+		// below only has meaning on an inline-level box, and a Btn in a `<p>`
+		// must shrink to its content. Inside a flex/grid parent it blockifies to
+		// `flex`; `&--block` declares `flex` explicitly.
+		//
+		// ⛔ #1168 — it is `inline-flex`, not `inline-block`. Since #1094 the
+		// height is `auto` + `min-height`, and `__loader`'s `height: 100%` no
+		// longer resolves against an auto height: on an `<a>` (`href` / `to`) the
+		// label sat at the TOP of the box — 12 px of content glued under the top
+		// edge of a 28 px button (published 2.29.1 → 2.32.1). A `<button>` hid
+		// it, because the UA centres a button's content on its own. A flex root
+		// centres `__loader` with `align-items: center` below, on every tag.
+		//
+		// `inline-flex` rather than `inline-grid`, measured: the ripple directive
+		// appends an in-flow `origam-ripple__container` to this root while the
+		// pointer is down. A grid root gives it an implicit row that takes half
+		// the free height, and the label jumps 4 px on every press; a flex row
+		// leaves the label where it is.
+		display: inline-flex;
 		align-items: center;
 
 		position: var(--origam-btn---position, relative);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "origam",
-  "version": "2.32.1",
+  "version": "2.32.2",
   "type": "module",
   "description": "origam — a Vue 3 design system with multi-theme design tokens, CSS-first components and TypeScript types.",
   "keywords": [