@ktortu/aaa 0.1.0-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 ktortu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the software, and to permit persons to whom the software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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.

package/README.md

@@ -0,0 +1,151 @@
+# @ktortu/aaa
+
+Bibliothèque de composants Angular **headless + thémés par tokens CSS** (`--kt-*`).
+Les composants sont des directives/composants accessibles (appui sur `@angular/aria` / CDK) ;
+leur apparence vit dans des feuilles CSS globales que vous importez à part.
+
+## Convention de nommage
+
+- **Selectors** (templates) : préfixe `kt` — `[ktButton]`, `<kt-text-field>`, `[ktDialogTitle]`…
+- **Symboles TypeScript** : préfixe `Kt` — classes/directives/pipes `KtX` (`KtButton`,
+  `KtSelect`…), tokens `KT_X` (`KT_BUTTON_CONFIG`, `KT_BREAKPOINTS`…). Ce préfixe évite les
+  collisions d'imports chez les consommateurs.
+- **Exception assumée** : le namespace natif `Temporal` et ses alias de types
+  (`Timestamp`, `CalendarDate`, `WallTime`, `LocalDateTime`, `ZonedTimestamp`) ne sont pas
+  préfixés, pour rester ergonomiques côté dates.
+
+## Utilisation (TypeScript)
+
+Chaque famille est importable depuis son point d'entrée `@ktortu/aaa/<feature>` ; les utilitaires
+transverses (breakpoints, viewport, sheet-drag) depuis la racine `@ktortu/aaa`.
+
+```ts
+import { Component } from '@angular/core';
+import { KtButton } from '@ktortu/aaa/button';
+import { KtTextField } from '@ktortu/aaa/forms';
+
+@Component({
+  selector: 'app-exemple',
+  imports: [KtButton, KtTextField],
+  template: `
+    <kt-text-field label="E-mail" type="email" [(value)]="email" />
+    <button ktButton mode="filled" color="primary">Enregistrer</button>
+  `,
+})
+export class Exemple {
+  email = '';
+}
+```
+
+Points d'entrée : `@ktortu/aaa/button`, `/card`, `/dialog`, `/menu`, `/tabs`, `/tooltip`,
+`/forms`, `/themes`, et la racine `@ktortu/aaa` (breakpoints, viewport, sheet-drag).
+Familles agrégées prêtes pour `imports:` : `KT_CARD`, `KT_MENU` (ex. `imports: [...KT_CARD]`).
+Le chrome de champ générique (`KtField` + `KtFieldControl`) enveloppe un contrôle natif :
+`<kt-field label="…"><input ktFieldControl [(ngModel)]="…" /></kt-field>`.
+
+### Configuration
+
+Les valeurs par défaut sont surchargeables par token d'injection (`KT_*_CONFIG`,
+type `Partial<…>`) ou via les helpers `provideKt*` :
+
+```ts
+import { KT_BUTTON_CONFIG } from '@ktortu/aaa/button';
+import { provideKtBreakpoints } from '@ktortu/aaa';
+import { provideKtDialogDefaults } from '@ktortu/aaa/dialog';
+
+providers: [
+  { provide: KT_BUTTON_CONFIG, useValue: { size: 'lg' } },
+  provideKtBreakpoints({ tablet: 768, desktop: 1200 }),
+  provideKtDialogDefaults({ maxWidth: '40rem' }),
+];
+```
+
+## Styles (CSS)
+
+L'apparence vit dans des **feuilles CSS globales** thémées par des tokens `--kt-*` : importez le
+CSS de la lib en plus des composants.
+
+### Mise en place minimale
+
+Importez la feuille **agrégée** (socle + styles de base de tous les composants, ordre de cascade
+garanti) :
+
+```css
+/* dans votre styles.css global */
+@import '@ktortu/aaa/styles.css';
+```
+
+…ou via `angular.json` :
+
+```jsonc
+"styles": [
+  "node_modules/@ktortu/aaa/styles.css",
+  "src/styles.css"
+]
+```
+
+> Le **Dialog** s'appuie sur l'overlay du CDK : ajoutez aussi
+> `@import '@angular/cdk/overlay-prebuilt.css';`.
+
+### Thèmes (optionnels, à la carte)
+
+Les thèmes ne sont **pas** inclus dans `styles.css`. Importez ceux que vous voulez, **après** :
+
+```css
+@import '@ktortu/aaa/styles.css';
+@import '@ktortu/aaa/themes/theme-material.css';
+```
+
+Thèmes disponibles (`@ktortu/aaa/themes/theme-<id>.css`) :
+`material`, `material-you`, `primer`, `carbon`, `fluent`, `ant`, `bootstrap`,
+`catppuccin`, `architecte`, `vegetal`, `cyberpunk`, `aurora`.
+
+Un thème = des redéclarations de tokens `--kt-*`. Surcharger un seul `--kt-*` (ex. `--kt-primary`)
+rebrande toute la lib.
+
+### Import à la carte (socle + composants choisis)
+
+Pour n'embarquer que ce qui vous intéresse, importez le **socle** (requis) puis **un fichier par
+composant**. Chaque bundle inclut déjà ses propres tokens — pas besoin d'importer les `*-tokens`
+séparément.
+
+```css
+@import '@ktortu/aaa/foundation.css'; /* REQUIS — socle de tokens --kt-*, à mettre en premier */
+@import '@ktortu/aaa/menu.css'; /* puis uniquement les composants utilisés */
+@import '@ktortu/aaa/button.css';
+```
+
+Bundles disponibles :
+
+| Import                       | Contenu                                                      |
+| ---------------------------- | ------------------------------------------------------------ |
+| `@ktortu/aaa/foundation.css` | **socle de tokens `--kt-*`** (requis, à importer en premier) |
+| `@ktortu/aaa/button.css`     | bouton (`ktButton`)                                          |
+| `@ktortu/aaa/card.css`       | carte (`ktCard` + marqueurs)                                 |
+| `@ktortu/aaa/menu.css`       | menu (`ktMenu`, `ktMenuItem`, …)                             |
+| `@ktortu/aaa/tooltip.css`    | tooltip (`ktTooltip`)                                        |
+| `@ktortu/aaa/dialog.css`     | dialog (requiert aussi l'overlay CDK)                        |
+| `@ktortu/aaa/forms.css`      | base des formulaires (champs, chips, switch)                 |
+| `@ktortu/aaa/tabs.css`       | onglets                                                      |
+
+> `foundation.css` doit **toujours** être importé en premier (les bundles composant en dérivent).
+> Si vous utilisez plusieurs composants, l'agrégat `@ktortu/aaa/styles.css` fait tout cela dans le
+> bon ordre.
+>
+> Les formulaires « riches » (Select, MultiSelect, Field, Chips) embarquent leur CSS via les
+> composants eux-mêmes (`styleUrl`) : rien à importer en plus pour ceux-ci.
+
+## Développement
+
+```bash
+ng build @ktortu/aaa     # build de la lib -> dist/ktortu/aaa
+ng test                  # tests unitaires (Vitest)
+ng serve demo            # app de démo / documentation vivante (port 4210)
+```
+
+### Publication
+
+```bash
+cd dist/ktortu/aaa
+npm publish
+```

package/button/button-tokens.css

@@ -0,0 +1,152 @@
+/* Design tokens du bouton (directive ktButton) — contrat public de theming.
+
+   PRINCIPE : ne saisir que les 3 fills de base (--btn-primary / --btn-neutral / --btn-danger).
+   Tout le reste — containers tonals, fg outlined/text, états — en DÉRIVE automatiquement
+   via color-mix(). Chaque valeur dérivée reste surchargeable : il suffit de REDÉCLARER son
+   token (sur :root plus bas, ou sur un conteneur de spécificité ≥). C'est la cascade qui
+   tranche, pas un fallback var() — donc pas de token « -override » à part.
+
+   3 paliers :
+     1. Bases saisies (4 tokens).
+     2. Rôles : labels statiques (garantie AA, voir plus bas) + container/fg dérivés.
+     3. Réglages globaux : leviers de dérivation, state-layer, focus, géométrie.
+
+   NB : ne PAS enregistrer ces tokens en @property avec initial-value (ça neutraliserait la
+   surcharge par redéclaration). */
+@layer kt-aaa.tokens {
+  :root {
+    /* ============ PALIER 1 — BASES (dérivées du socle --kt-*) ============ */
+    /* Saisir les couleurs au niveau du socle (src/app/styles/foundation.css) rebrande
+     champs ET boutons d'un coup ; surcharger ici reste possible pour le bouton seul. */
+    --btn-primary: var(--kt-primary);
+    --btn-neutral: var(--kt-neutral);
+    --btn-danger: var(--kt-danger);
+
+    /* Surface de référence : base des fills tonals + désaturation disabled.
+     Re-pointer --kt-surface suffit pour un futur dark mode. */
+    --btn-surface: var(--kt-surface, #ffffff);
+
+    /* ============ PALIER 2 — RÔLES ============ */
+
+    /* Labels = STATIQUES et vérifiés AA : c'est la garantie axe, appliquée dans TOUS les
+     navigateurs. (contrast-color() est proposé en bonus opt-in tout en bas — il ne garantit
+     pas le 4.5:1 sur les tons moyens.) Pour une marque custom, redéclarer ces on-* aussi. */
+    --btn-on-primary: #ffffff; /* sur fill rempli (~6.4:1) */
+    --btn-on-neutral: #ffffff; /* ~13:1 */
+    --btn-on-danger: #ffffff; /* ~6.5:1 */
+    --btn-on-primary-container: #0842a0; /* sur fill tonal (~7:1) */
+    --btn-on-neutral-container: #1b1c1d; /* ~15:1 */
+    --btn-on-danger-container: #8c1d18; /* ~7:1 (le "piège" tonal+danger) */
+
+    /* Fills tonals = DÉRIVÉS : base mélangée vers la surface (auto-désature → reste pâle,
+     pas de clipping de gamut). Poids réglable via --btn-tonal-weight. */
+    --btn-primary-container: color-mix(in oklab, var(--btn-primary) var(--btn-tonal-weight, 16%), var(--btn-surface));
+    --btn-neutral-container: color-mix(in oklab, var(--btn-neutral) var(--btn-tonal-weight, 16%), var(--btn-surface));
+    --btn-danger-container: color-mix(in oklab, var(--btn-danger) var(--btn-tonal-weight, 16%), var(--btn-surface));
+
+    /* fg outlined/text = DÉRIVÉ : base légèrement assombrie (garde la teinte de marque, gagne
+     de la marge de contraste sur la page). Poids réglable via --btn-fg-weight. */
+    --btn-primary-fg: color-mix(in oklab, var(--btn-primary) var(--btn-fg-weight, 90%), black);
+    --btn-neutral-fg: color-mix(in oklab, var(--btn-neutral) var(--btn-fg-weight, 90%), black);
+    --btn-danger-fg: color-mix(in oklab, var(--btn-danger) var(--btn-fg-weight, 90%), black);
+
+    /* ============ PALIER 3 — RÉGLAGES GLOBAUX ============ */
+
+    /* Leviers de dérivation */
+    --btn-tonal-weight: 16%; /* poids de la base dans le fill tonal (plus haut = plus saturé) */
+    --btn-fg-weight: 90%; /* poids de la base dans le fg (plus bas = plus sombre) */
+
+    /* Icône : padding RÉDUIT côté icône (asymétrie leading/trailing, règle M3 « −8dp côté icône »)
+     et taille d'icône absolue par taille. */
+    --btn-icon-pad-x-sm: 6px;
+    --btn-icon-pad-x-md: 10px;
+    --btn-icon-pad-x-lg: 12px;
+    --btn-icon-size-sm: 18px;
+    --btn-icon-size-md: 20px;
+    --btn-icon-size-lg: 22px;
+
+    /* Forme : token de BASCULE --btn-radius (NON déclaré ici exprès).
+     Non défini => chaque taille garde son radius (--btn-radius-sm/md/lg).
+     Défini (ex. `--btn-radius: 999px` sur :root ou un conteneur) => pilule sur tous les boutons
+     ET cercle sur les icon-only (carrés). Les champs (--field-radius) ne sont pas affectés. */
+
+    /* Ombres par état : tokens de BASCULE (NON déclarés ici exprès, même principe que --btn-radius).
+     Non définis => box-shadow: none. Un thème déclare --btn-shadow (repos), --btn-shadow-hover,
+     --btn-shadow-focus pour un glow/elevation (hover/focus retombent sur --btn-shadow si absents) ;
+     disabled force toujours `none`. Pour référencer --btn-fill/--btn-fg (couleur du mode résolu),
+     les déclarer sur un sélecteur d'ÉLÉMENT bouton, jamais sur :root (substitution var() au
+     point de déclaration). */
+
+    /* Bordure : --btn-border-width et --btn-border-style, tokens de BASCULE (NON déclarés)
+     => 1px solid. La bordure étant réservée sur tous les modes, l'épaissir ne provoque aucun
+     reflow entre modes. Longhands côté consommation : width/style acceptent 1 à 4 valeurs
+     (par côté, ex. `solid dashed` = haut/bas pleins + côtés tirets) ; --btn-border (couleur)
+     doit rester UNE couleur (elle passe dans un color-mix au disabled). */
+
+    /* Mouvement : tokens de BASCULE (NON déclarés ici exprès) => bouton inerte par défaut.
+     --btn-transition (ex. `transform 160ms ease`), --btn-transform (repos),
+     --btn-transform-hover / --btn-transform-active (retombent sur --btn-transform si absents) ;
+     disabled force `transform: none`. Ne PAS mettre box-shadow dans --btn-transition si un thème
+     anime déjà l'ombre en continu (la transition lutterait contre l'animation). */
+
+    /* Autres BASCULES non déclarées (défauts entre parenthèses) :
+     - Fill en image : --btn-fill-image (none) — dégradé/motif empilé SOUS le voile d'état ;
+       disabled force background-image: none. Pour dériver du mode résolu (var(--btn-fill)),
+       le poser sur un sélecteur d'ÉLÉMENT (substitution au point de déclaration).
+     - Focus ring : --btn-focus-ring-style (solid).
+     - Typo d'emphase : --btn-text-transform (none), --btn-letter-spacing (normal),
+       --btn-font-weight (inherit). */
+
+    /* State layer (voile d'état, opacités Material 3) */
+    --btn-state-hover-opacity: 0.08;
+    --btn-state-focus-opacity: 0.12;
+    --btn-state-pressed-opacity: 0.16;
+
+    /* Anneau de focus (opaque, distinct du voile) — couleur/épaisseur depuis le socle ;
+     offset propre au bouton (2px) vs field (1px). */
+    --btn-focus-ring-width: var(--kt-focus-ring-width);
+    --btn-focus-ring-offset: 2px;
+    --btn-focus-ring-color: var(
+      --kt-focus-ring-color
+    ); /* opaque + offset => contraste calculable, indépendant du mode */
+
+    /* Géométrie (par taille). md dérive du socle (= field) ; sm/lg propres au bouton. */
+    --btn-radius-sm: 6px;
+    --btn-radius-md: var(--kt-control-radius);
+    --btn-radius-lg: 10px;
+
+    --btn-height-sm: 32px; /* >= 24px (cible AA) via padding ; voir min-width sm */
+    --btn-height-md: var(--kt-control-height); /* taille confort (touch / AAA), alignée field */
+    --btn-height-lg: 52px;
+
+    --btn-pad-x-sm: 0.625rem;
+    --btn-pad-x-md: 1rem;
+    --btn-pad-x-lg: 1.25rem;
+
+    --btn-font-sm: 0.875rem;
+    --btn-font-md: var(--kt-control-font);
+    --btn-font-lg: 1.0625rem;
+
+    --btn-gap: 0.5rem;
+    --btn-corner-shape: round;
+  }
+
+  /* ============ BONUS (opt-in) — labels auto-contrastés pour palette 100% custom ============
+   Décommentez pour laisser le navigateur choisir noir/blanc sur les on-* quand vous changez
+   les bases sans redéfinir les labels. ATTENTION : contrast-color() ne garantit PAS le 4.5:1
+   sur les tons moyens — revalidez axe. Désactivé par défaut car il remplacerait les labels de
+   marque (ex. #0842a0) par du noir pur. Sans support navigateur (~26%), le @supports ne
+   s'active pas et les on-* statiques ci-dessus restent appliqués (aucune régression). */
+  /*
+@supports (color: contrast-color(red)) {
+  :root {
+    --btn-on-primary: contrast-color(var(--btn-primary));
+    --btn-on-neutral: contrast-color(var(--btn-neutral));
+    --btn-on-danger: contrast-color(var(--btn-danger));
+    --btn-on-primary-container: contrast-color(var(--btn-primary-container));
+    --btn-on-neutral-container: contrast-color(var(--btn-neutral-container));
+    --btn-on-danger-container: contrast-color(var(--btn-danger-container));
+  }
+}
+*/
+}

package/button/button.css

@@ -0,0 +1,319 @@
+@layer kt-aaa.components {
+  /* Styles de la directive Button (button[ktButton], a[ktButton]).
+   Global : enregistré dans angular.json > styles, applicable partout où la directive est posée.
+   Tokens (--btn-*) définis dans button-tokens.css (chargé avant ce fichier).
+
+   Deux axes orthogonaux :
+   - mode  (apparence)  : data-mode = filled | tonal | outlined | text
+   - color (intention)  : data-color = primary | neutral | danger
+   La règle de base ne consomme que 4 variables résolues (--btn-fill / --btn-fg /
+   --btn-border / --btn-state-layer) ; chaque bloc [data-mode][data-color] les pose. */
+
+  [ktButton] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--btn-gap, 0.5rem);
+    box-sizing: border-box;
+
+    min-height: var(--btn-height-md, 44px);
+    padding-block: 0;
+    /* Variables résolues par taille (padding label / padding côté icône / taille d'icône). */
+    --btn-pad-x: var(--btn-pad-x-md, 1rem);
+    --btn-icon-pad-x: var(--btn-icon-pad-x-md, 10px);
+    --btn-icon-size: var(--btn-icon-size-md, 20px);
+    padding-inline: var(--btn-pad-x);
+    font-size: var(--btn-font-md, 1rem);
+
+    /* Bordure réservée (outlined ne reflow pas) ; largeur surchargeable par token (uniforme sur
+     tous les modes => pas de reflow entre modes non plus). Longhands : width et style acceptent
+     1 à 4 valeurs (par côté) ; --btn-border reste UNE couleur (color-mix au disabled). */
+    border-width: var(--btn-border-width, 1px);
+    border-style: var(--btn-border-style, solid);
+    border-color: var(--btn-border, transparent);
+    /* --btn-radius non défini => radius par taille ; le définir (ex. 999px) => pilule / cercle. */
+    border-radius: var(--btn-radius, var(--btn-radius-md, 8px));
+    corner-shape: var(--btn-corner-shape, round);
+    text-decoration: none; /* reset du lien quand la directive est sur un <a> */
+    cursor: pointer;
+
+    /* Défauts résolus = filled + primary. Surchargés par les blocs [data-mode][data-color]. */
+    --btn-fill: var(--btn-primary);
+    --btn-fg: var(--btn-on-primary);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-on-primary);
+
+    /* State layer SANS pseudo-élément : un aplat (--btn-overlay) empilé par-dessus le fill.
+     ::before (icône) et ::after (spinner) sont déjà pris ; on passe donc par background-image.
+     --btn-fill-image (bascule, défaut none) : fill en dégradé/motif, empilé SOUS le voile
+     d'état pour que hover/focus/pressed restent visibles par-dessus. */
+    background-color: var(--btn-fill);
+    background-image:
+      linear-gradient(var(--btn-overlay, transparent), var(--btn-overlay, transparent)), var(--btn-fill-image, none);
+    color: var(--btn-fg);
+
+    /* Typo d'emphase : bascules => neutres par défaut (boutons UPPERCASE façon Material 2,
+     tracking éditorial…). */
+    text-transform: var(--btn-text-transform, none);
+    letter-spacing: var(--btn-letter-spacing, normal);
+    font-weight: var(--btn-font-weight, inherit);
+
+    /* Ombres par état : tokens de bascule NON déclarés à :root (cf. button-tokens.css)
+     => `none` par défaut. Un thème peut les poser sur l'élément pour référencer --btn-fill/--btn-fg
+     (substitution var() au point de déclaration : impossible depuis :root). */
+    box-shadow: var(--btn-shadow, none);
+
+    /* Translucidité (verre) : bascule => aucun effet par défaut (invisible derrière un fill
+     opaque ; agit avec un fill semi-transparent, cf. theme-liquid-glass). */
+    backdrop-filter: var(--btn-backdrop-filter, none);
+
+    /* Mouvement : mêmes tokens de bascule (cf. button-tokens.css) => inertes par défaut. */
+    transition: var(--btn-transition, none);
+    transform: var(--btn-transform, none);
+  }
+
+  /* ============ TAILLES ============ */
+  [ktButton][data-size='sm'] {
+    position: relative; /* requis pour le positionnement de ::after */
+    min-height: var(--btn-height-sm, 32px);
+    min-width: var(--btn-height-sm, 32px); /* garde une cible >= 24px même pour un label court */
+    --btn-pad-x: var(--btn-pad-x-sm, 0.625rem);
+    --btn-icon-pad-x: var(--btn-icon-pad-x-sm, 6px);
+    --btn-icon-size: var(--btn-icon-size-sm, 18px);
+    font-size: var(--btn-font-sm, 0.875rem);
+    border-radius: var(--btn-radius, var(--btn-radius-sm, 6px));
+  }
+
+  [ktButton][data-size='lg'] {
+    min-height: var(--btn-height-lg, 52px);
+    --btn-pad-x: var(--btn-pad-x-lg, 1.25rem);
+    --btn-icon-pad-x: var(--btn-icon-pad-x-lg, 12px);
+    --btn-icon-size: var(--btn-icon-size-lg, 22px);
+    font-size: var(--btn-font-lg, 1.0625rem);
+    border-radius: var(--btn-radius, var(--btn-radius-lg, 10px));
+  }
+
+  /* ============ PLEINE LARGEUR ============ */
+  [ktButton][data-full-width] {
+    width: 100%;
+  }
+
+  /* ============ RÉSOLUTION mode × couleur (4 × 3) ============ */
+
+  /* --- FILLED : fill plein, label on-color --- */
+  [ktButton][data-mode='filled'][data-color='primary'] {
+    --btn-fill: var(--btn-primary);
+    --btn-fg: var(--btn-on-primary);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-on-primary);
+  }
+  [ktButton][data-mode='filled'][data-color='neutral'] {
+    --btn-fill: var(--btn-neutral);
+    --btn-fg: var(--btn-on-neutral);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-on-neutral);
+  }
+  [ktButton][data-mode='filled'][data-color='danger'] {
+    --btn-fill: var(--btn-danger);
+    --btn-fg: var(--btn-on-danger);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-on-danger);
+  }
+
+  /* --- TONAL : fill container (faible chroma), label on-container --- */
+  [ktButton][data-mode='tonal'][data-color='primary'] {
+    --btn-fill: var(--btn-primary-container);
+    --btn-fg: var(--btn-on-primary-container);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-on-primary-container);
+  }
+  [ktButton][data-mode='tonal'][data-color='neutral'] {
+    --btn-fill: var(--btn-neutral-container);
+    --btn-fg: var(--btn-on-neutral-container);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-on-neutral-container);
+  }
+  [ktButton][data-mode='tonal'][data-color='danger'] {
+    --btn-fill: var(--btn-danger-container);
+    --btn-fg: var(--btn-on-danger-container);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-on-danger-container);
+  }
+
+  /* --- OUTLINED : fill transparent, label + bordure colorés (fg) --- */
+  [ktButton][data-mode='outlined'][data-color='primary'] {
+    --btn-fill: transparent;
+    --btn-fg: var(--btn-primary-fg);
+    --btn-border: var(--btn-primary-fg);
+    --btn-state-layer: var(--btn-primary-fg);
+  }
+  [ktButton][data-mode='outlined'][data-color='neutral'] {
+    --btn-fill: transparent;
+    --btn-fg: var(--btn-neutral-fg);
+    --btn-border: var(--btn-neutral-fg);
+    --btn-state-layer: var(--btn-neutral-fg);
+  }
+  [ktButton][data-mode='outlined'][data-color='danger'] {
+    --btn-fill: transparent;
+    --btn-fg: var(--btn-danger-fg);
+    --btn-border: var(--btn-danger-fg);
+    --btn-state-layer: var(--btn-danger-fg);
+  }
+
+  /* --- TEXT : fill + bordure transparents, label coloré (fg) --- */
+  [ktButton][data-mode='text'][data-color='primary'] {
+    --btn-fill: transparent;
+    --btn-fg: var(--btn-primary-fg);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-primary-fg);
+  }
+  [ktButton][data-mode='text'][data-color='neutral'] {
+    --btn-fill: transparent;
+    --btn-fg: var(--btn-neutral-fg);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-neutral-fg);
+  }
+  [ktButton][data-mode='text'][data-color='danger'] {
+    --btn-fill: transparent;
+    --btn-fg: var(--btn-danger-fg);
+    --btn-border: transparent;
+    --btn-state-layer: var(--btn-danger-fg);
+  }
+
+  /* ============ ICÔNE (pur CSS via une ligature de police d'icône) ============ */
+  /* Police configurable : --btn-icon-font (par bouton) > --kt-icon-font (global) > Material Symbols.
+   Permet d'utiliser une AUTRE police d'icônes à ligatures sans changer l'API `icon`. Pour un set
+   NON-ligature (ex. Font Awesome), projeter le markup de l'icône dans le bouton. */
+  [ktButton][data-icon]::before {
+    content: attr(data-icon);
+    font-family: var(--btn-icon-font, var(--kt-icon-font, 'Material Symbols Outlined'));
+    font-weight: var(--btn-icon-font-weight, var(--kt-icon-font-weight, normal));
+    font-style: normal;
+    font-size: var(--btn-icon-size, 20px); /* px par taille */
+    line-height: 1;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Icône à droite : le pseudo ::before est un flex item, on le déplace via order */
+  [ktButton][data-icon-position='end']::before {
+    order: 1;
+  }
+
+  /* Asymétrie : on resserre le padding DU CÔTÉ de l'icône (silhouette recentrée optiquement).
+   Le longhand bat le shorthand padding-inline ; var(--btn-icon-pad-x) s'adapte à la taille.
+   :not([data-icon-only]) protège le mode icône seule (padding symétrique). */
+  [ktButton][data-icon][data-icon-position='start']:not([data-icon-only]) {
+    padding-inline-start: var(--btn-icon-pad-x);
+  }
+  [ktButton][data-icon][data-icon-position='end']:not([data-icon-only]) {
+    padding-inline-end: var(--btn-icon-pad-x);
+  }
+
+  /* ============ ICON-ONLY (carré = hauteur, icône centrée ; forme suit --btn-radius) ============ */
+  [ktButton][data-icon-only] {
+    --btn-pad-x: 0;
+    gap: 0;
+    inline-size: var(--btn-height-md, 44px);
+    min-inline-size: var(--btn-height-md, 44px);
+    position: relative;
+  }
+  [ktButton][data-size='sm'][data-icon-only] {
+    inline-size: var(--btn-height-sm, 32px);
+    min-inline-size: var(--btn-height-sm, 32px);
+  }
+  [ktButton][data-size='lg'][data-icon-only] {
+    inline-size: var(--btn-height-lg, 52px);
+    min-inline-size: var(--btn-height-lg, 52px);
+  }
+
+  /* sm boutons : zone de clic étendue à au moins 44x44px (AAA 2.5.5) via ::after transparent.
+   Hors loading uniquement : le spinner occupe déjà ::after (états mutuellement exclusifs). */
+  [ktButton][data-size='sm']:not(.loading)::after {
+    content: '';
+    position: absolute;
+    inset: -6px;
+  }
+
+  /* ============ ÉTATS (voile teinté avec la couleur de contenu --btn-state-layer) ============ */
+  [ktButton]:hover:not(:disabled):not([aria-disabled='true']) {
+    --btn-overlay: color-mix(
+      in srgb,
+      var(--btn-state-layer) calc(var(--btn-state-hover-opacity, 0.08) * 100%),
+      transparent
+    );
+    box-shadow: var(--btn-shadow-hover, var(--btn-shadow, none));
+    transform: var(--btn-transform-hover, var(--btn-transform, none));
+  }
+
+  [ktButton]:focus-visible:not(:disabled):not([aria-disabled='true']) {
+    --btn-overlay: color-mix(
+      in srgb,
+      var(--btn-state-layer) calc(var(--btn-state-focus-opacity, 0.12) * 100%),
+      transparent
+    );
+    box-shadow: var(--btn-shadow-focus, var(--btn-shadow, none));
+  }
+
+  /* pressed après hover/focus dans la cascade => l'emporte au clic maintenu */
+  [ktButton]:active:not(:disabled):not([aria-disabled='true']) {
+    --btn-overlay: color-mix(
+      in srgb,
+      var(--btn-state-layer) calc(var(--btn-state-pressed-opacity, 0.16) * 100%),
+      transparent
+    );
+    transform: var(--btn-transform-active, var(--btn-transform, none));
+  }
+
+  /* Anneau de focus : outline séparé du voile, posé sur le fond de page via l'offset.
+   Reste visible aussi sur un <a>/bouton en aria-disabled (toujours focusable). */
+  [ktButton]:focus-visible {
+    outline: var(--btn-focus-ring-width, 2px) var(--btn-focus-ring-style, solid) var(--btn-focus-ring-color, #0b57d0);
+    outline-offset: var(--btn-focus-ring-offset, 2px);
+  }
+
+  /* ============ ÉTAT INERTE (disabled natif ou aria-disabled) ============ */
+  /* Après les états => l'emporte sur hover/active. */
+  [ktButton]:disabled,
+  [ktButton][aria-disabled='true'] {
+    --btn-overlay: transparent;
+    cursor: not-allowed;
+    color: color-mix(in srgb, var(--btn-fg) 40%, transparent);
+    background-color: color-mix(in srgb, var(--btn-fill) 40%, var(--btn-surface, #ffffff));
+    border-color: color-mix(in srgb, var(--btn-border) 40%, transparent);
+    box-shadow: none; /* un bouton inerte ne « rayonne » pas, quel que soit le thème */
+    transform: none; /* ni ne bouge */
+    background-image: none; /* ni ne garde son dégradé (--btn-fill-image) */
+  }
+
+  /* ============ LOADING ============ */
+  [ktButton].loading {
+    position: relative;
+    color: transparent !important;
+
+    &::before {
+      opacity: 0;
+    }
+
+    /* Spinner centré en currentColor (suit le label, inversé en dark mode) */
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 1em;
+      height: 1em;
+      translate: -50% -50%;
+      border: 2px solid var(--btn-fg);
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: button-spinner 0.6s linear infinite;
+    }
+  }
+
+  @keyframes button-spinner {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}