origam 2.32.1 → 2.33.0

package/CHANGELOG.md

@@ -18,6 +18,24 @@ This project follows [Semantic Versioning](https://semver.org).
 
 ## [Unreleased]
 
+## [2.33.0] - 2026-10-18
+
+### Added — `OrigamCommandPalette` : icônes de recherche et de chargement personnalisables (#1183)
+
+- Nouvelles props `searchIcon` et `loadingIcon`, typées `TIcon` (id mdi, chemin SVG ou composant). Défauts inchangés : `mdi:mdi-magnify` et `mdi:mdi-loading`.
+- Nouveaux slots `search-icon` et `loading`, prioritaires sur les props.
+- Une application qui fournit un SVG n'a plus besoin de la police `@mdi/font` pour ces deux glyphes : aucun élément `.mdi-magnify` / `.mdi-loading` n'est rendu (prouvé par `packages/tests/e2e/command-palette.spec.ts`).
+
+## [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/dist/src/components/CommandPalette/OrigamCommandPalette.vue

@@ -25,12 +25,14 @@
 						tabindex="-1"
 				>
 					<div class="origam-command-palette__search">
-						<origam-icon
-								:icon="MDI_ICONS.MAGNIFY"
-								:size="20"
-								aria-hidden="true"
-								class="origam-command-palette__search-icon"
-						/>
+						<slot name="search-icon">
+							<origam-icon
+									:icon="searchIcon"
+									:size="20"
+									aria-hidden="true"
+									class="origam-command-palette__search-icon"
+							/>
+						</slot>
 						<input
 								:id="inputId"
 								ref="inputRef"
@@ -65,11 +67,13 @@
 								v-if="loading"
 								class="origam-command-palette__loading"
 						>
-							<origam-icon
-									:icon="MDI_ICONS.LOADING"
-									:size="20"
-									class="origam-command-palette__loading-icon"
-							/>
+							<slot name="loading">
+								<origam-icon
+										:icon="loadingIcon"
+										:size="20"
+										class="origam-command-palette__loading-icon"
+								/>
+							</slot>
 						</div>
 
 						<template
@@ -180,7 +184,6 @@ import { useTypography } from "../../composables/Commons/typography.composable";
 import { useVModel } from "../../composables/Commons/vModel.composable";
 import { COMMAND_PALETTE_DEFAULT_HOTKEY, COMMAND_PALETTE_DEFAULT_MAX_HEIGHT, COMMAND_PALETTE_DEFAULT_WIDTH } from "../../consts/CommandPalette/command-palette.const";
 import { IN_BROWSER } from "../../consts/Commons/commons.const";
-import { MDI_ICONS } from "../../enums/Commons/mdi.enum";
 import { getUid } from "../../utils/Commons/getCurrentInstance.util";
 import { fuzzyMatch } from "../../utils/CommandPalette/fuzzy-match.util";
 defineOptions({ inheritAttrs: false });
@@ -193,6 +196,8 @@ const props = defineProps({
   maxHeight: { type: [Number, String], required: false, default: COMMAND_PALETTE_DEFAULT_MAX_HEIGHT },
   width: { type: [Number, String], required: false, default: COMMAND_PALETTE_DEFAULT_WIDTH },
   loading: { type: Boolean, required: false, default: false },
+  searchIcon: { type: null, required: false, default: "mdi:mdi-magnify" },
+  loadingIcon: { type: null, required: false, default: "mdi:mdi-loading" },
   closeOnSelect: { type: Boolean, required: false, default: true },
   closeOnEscape: { type: Boolean, required: false, default: true },
   closeOnBackdrop: { type: Boolean, required: false, default: true },

package/dist/src/interfaces/CommandPalette/command-palette.interface.d.ts

@@ -2,6 +2,7 @@ import type { ICommand } from './command.interface';
 import type { IAttachProps } from '../Commons/attach.interface';
 import type { ICommonsComponentProps } from '../Commons/commons.interface';
 import type { ITypographyProps } from '../Commons/typography.interface';
+import type { TIcon } from '../../types/Icon/icon.type';
 /**
  * A hotkey is either a single combination (`['meta', 'k']`) or an
  * array of alternatives — every entry being a list of normalised key
@@ -36,6 +37,8 @@ export interface ICommandPaletteProps extends ICommonsComponentProps, Pick<ITypo
     width?: number | string;
     /** Display a loader inside the result list (use during async fetches). */
     loading?: boolean;
+    searchIcon?: TIcon;
+    loadingIcon?: TIcon;
     /** Close the palette automatically when a command is selected. */
     closeOnSelect?: boolean;
     /** Close when the user presses Escape. */
@@ -55,5 +58,7 @@ export interface ICommandPaletteSlotProps {
 export interface ICommandPaletteSlots {
     item?: (props: ICommandPaletteSlotProps) => any;
     empty?: () => any;
+    'search-icon'?: () => any;
+    loading?: () => any;
     footer?: () => any;
 }

package/package.json

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