@ktortu/aaa 0.1.0-beta.0

package/dialog/dialog.css

@@ -0,0 +1,350 @@
+@layer kt-aaa.components {
+  /* Styles du Dialog (moteur @angular/cdk/dialog + directives kt).
+   Même architecture que le reste de la lib : tokens --dialog-* dérivés du socle --kt-* ET
+   des tokens « feuille/popup » du select que les thèmes définissent DÉJÀ (le dialog partage
+   l'identité visuelle de ces surfaces flottantes). Bascules non déclarées pour les effets.
+   Global obligatoire : le dialog est rendu dans l'overlay CDK, hors de toute vue de composant. */
+
+  :root {
+    /* ============ Surface ============ */
+    --dialog-bg: var(--kt-surface, #ffffff);
+    --dialog-fg: var(--kt-on-surface, #1f1f1f);
+    --dialog-muted: var(--kt-muted, #474747);
+    --dialog-border-color: var(--kt-outline, #c4c7c5);
+    --dialog-border-width: 1px;
+
+    /* Forme : suit le radius de la feuille du select (déjà thémé), sinon le radius de contrôle. */
+    --dialog-radius: var(--kt-sheet-radius, var(--kt-control-radius, 8px));
+
+    --dialog-pad: 1.5rem;
+    --dialog-gap: 1rem;
+    --dialog-max-width: 32rem;
+
+    /* Ombre : réutilise l'ombre de popup du select si le thème l'a posée. */
+    --dialog-shadow: var(--select-popup-shadow, 0 10px 25px rgb(0 0 0 / 20%));
+
+    /* Scrim du backdrop : réutilise le voile de feuille du select. */
+    --dialog-scrim: var(--kt-sheet-scrim, rgb(0 0 0 / 40%));
+
+    /* ============ Anneau de focus (sur les éléments internes) ============ */
+    --dialog-focus-ring-color: var(--kt-focus-ring-color, #0842a0);
+    --dialog-focus-ring-width: var(--kt-focus-ring-width, 2px);
+
+    /* ============ Gouttière du conteneur scrollable ============ */
+    /* Le dialog a des coins arrondis + une barre d'actions sticky : la gouttière à TRACK PLEIN
+     héritée de la page y dessine un bandeau vertical disgracieux le long de l'arrondi. On force
+     ici une gouttière FINE à track TRANSPARENT (thumb seul, en overlay), dérivée de la surface
+     du dialog — neutralise au passage les gouttières chunky de certains thèmes (Win98, Cartoon)
+     dans ce contexte restreint. Bascule --dialog-scrollbar-color pour un thème qui voudrait la sienne. */
+    --dialog-scrollbar-thumb: color-mix(in srgb, var(--dialog-fg) 26%, var(--dialog-bg));
+
+    /* Bascules NON déclarées exprès (défauts entre parenthèses) :
+     --dialog-backdrop-filter (none)        : flou de la surface (thèmes verre).
+     --dialog-scrim-backdrop-filter (none)  : flou du backdrop.
+     --dialog-anim-duration (160ms)         : durée de l'animation d'entrée.
+     --dialog-anim-easing (ease)            : courbe de l'animation d'entrée.
+     --dialog-anim-from-transform (translateY(8px) scale(.97)) : état initial de l'entrée.
+     --dialog-title-font / --dialog-title-size / --dialog-title-weight : typo du titre.
+     --dialog-scroll-shadow / --dialog-scroll-shadow-bottom (ombres radiales douces) : voile de
+       défilement sous le header / au-dessus des actions, visible seulement quand le contenu déborde. */
+  }
+
+  /* ============ Dimensionnement du pane overlay (panelClass: kt-dialog) ============ */
+  .cdk-overlay-pane.kt-dialog {
+    inline-size: min(var(--dialog-max-width), 100vw - 2rem);
+  }
+
+  /* ============ Surface = conteneur CDK (porte role="dialog") ============ */
+  .kt-dialog .cdk-dialog-container {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    /* Reflow AAA (1.4.10) : conteneur plafonné en hauteur ; le contenu long ([ktDialogContent])
+     scrolle verticalement (jamais en 2D), titre et actions restant visibles. */
+    max-block-size: calc(100dvh - 2rem);
+    /* overflow hidden = clippe header / contenu / actions au rayon. Le scroll vit dans
+     [ktDialogContent] : une bande CENTRALE entre le header et les actions FIXES — sa gouttière
+     longe donc le bord droit rectiligne, jamais un coin arrondi.
+     Pas de padding ici : chaque région (titre / description / contenu / actions) porte le sien
+     (cf. plus bas). Source de padding par région => fonds de header/actions pleine largeur SANS
+     marge négative, et aucun couplage padding-conteneur ↔ marges des régions. */
+    overflow: hidden;
+    color: var(--dialog-fg);
+    background: var(--dialog-bg);
+    border: var(--dialog-border-width) solid var(--dialog-border-color);
+    border-radius: var(--dialog-radius);
+    box-shadow: var(--dialog-shadow);
+    backdrop-filter: var(--dialog-backdrop-filter, none);
+    outline: none; /* le focus visible est porté par les éléments internes, pas le conteneur */
+  }
+
+  /* Le contenu projeté est encapsulé dans l'hôte du composant dialog (<kt-*-dialog>), SEUL enfant
+   direct du conteneur CDK. On le relaie en colonne flex pour que titre / contenu / actions en
+   deviennent les vrais items — sans quoi [ktDialogContent] ne pourrait pas scroller (l'hôte,
+   item unique, prendrait toute la hauteur du contenu). */
+  .kt-dialog .cdk-dialog-container > * {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
+
+  /* ============ Titre ([ktDialogTitle], idéalement un <h2>) ============ */
+  [ktDialogTitle] {
+    /* Région FIXE en tête : porte le padding haut + latéral du dialog. */
+    padding: var(--dialog-pad) var(--dialog-pad) 0;
+    margin: 0 0 0.25rem;
+    font-family: var(--dialog-title-font, inherit);
+    font-size: var(--dialog-title-size, 1.25rem);
+    font-weight: var(--dialog-title-weight, 600);
+    line-height: 1.3;
+    color: var(--dialog-fg);
+  }
+
+  /* ============ En-tête riche ([ktDialogHeader], OPTIONNEL) ============
+   Rangée flex pour composer titre + icône + bouton close. C'est LUI qui porte le padding de
+   région (à la place du titre, réinitialisé ci-dessous) : un close ancré en haut à droite tient
+   sans position absolue ni marge négative. Région FIXE (enfant direct de la colonne, comme un
+   titre nu) — il ne scrolle pas avec le contenu. */
+  [ktDialogHeader] {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: var(--dialog-pad) var(--dialog-pad) 0;
+    margin-block-end: 0.25rem;
+  }
+
+  /* Dans un header, le titre n'est plus que l'étiquette (a11y + typo) : il lâche son padding/marge
+   de région et prend l'espace libre, ce qui repousse un éventuel bouton close à droite. */
+  [ktDialogHeader] [ktDialogTitle] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* ============ Description courte ([ktDialogDescription]) ============ */
+  [ktDialogDescription] {
+    padding-inline: var(--dialog-pad);
+    margin: 0 0 var(--dialog-gap);
+    color: var(--dialog-muted);
+    line-height: 1.5;
+  }
+
+  /* ============ Zone de contenu ([ktDialogContent]) ============
+   SEULE région scrollable du dialog : flex: 1 dans la colonne, min-block-size: 0 pour
+   autoriser le rétrécissement (sinon le contenu déborderait au lieu de scroller). */
+  [ktDialogContent] {
+    display: block;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    padding-inline: var(--dialog-pad);
+    overflow-y: auto;
+    /* Gouttière fine en overlay (track transparent), dérivée de la surface du dialog. Le scroll
+     vivant ICI — à l'intérieur du padding du conteneur — la barre est en retrait du coin arrondi. */
+    scrollbar-width: thin;
+    scrollbar-color: var(--dialog-scrollbar-color, var(--dialog-scrollbar-thumb) transparent);
+
+    /* Ombres de défilement — affordance des bandeaux FIXES (header en haut, actions en bas) :
+     une ombre douce sous le header (resp. au-dessus des actions) qui n'apparaît QUE quand le
+     contenu déborde de ce côté. Technique CSS pure (Lea Verou) : 4 couches de background —
+     deux « caches » couleur-surface en `local` (ils défilent AVEC le contenu et révèlent
+     l'ombre une fois poussés hors-champ) au-dessus de deux ombres en `scroll` (fixées au
+     cadre). Pas de JS, pas d'élément wrapper (le titre est projeté directement).
+     Bascules --dialog-scroll-shadow / --dialog-scroll-shadow-bottom pour ajuster ou neutraliser
+     (ex. filet net sans flou en Win98). */
+    background:
+      linear-gradient(var(--dialog-bg), transparent) center top / 100% 1.25rem no-repeat local,
+      linear-gradient(transparent, var(--dialog-bg)) center bottom / 100% 1.25rem no-repeat local,
+      var(--dialog-scroll-shadow, radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / 16%), transparent)) center top /
+        100% 0.6rem no-repeat scroll,
+      var(--dialog-scroll-shadow-bottom, radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / 16%), transparent))
+        center bottom / 100% 0.6rem no-repeat scroll;
+  }
+
+  /* ============ Barre d'actions ([ktDialogActions]) ============
+   USAGE RECOMMANDÉ : FRÈRE de [ktDialogContent] (cf. les trois dialogs de démo) — item flex non
+   rétractable, épinglé en pied de colonne, le contenu scrollant au-dessus. Si un bouton doit
+   soumettre un <form> porté par le contenu, on le relie via l'attribut natif `form="id"` plutôt
+   que d'imbriquer les actions DANS le form (sinon le padding latéral du contenu s'ajouterait à
+   celui des actions). `position: sticky` reste un garde-fou si la barre est malgré tout imbriquée
+   dans une zone scrollable. Fond opaque (--dialog-bg) pour masquer le contenu qui glisse dessous. */
+  [ktDialogActions] {
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    justify-content: flex-end;
+    align-items: center;
+    position: sticky;
+    inset-block-end: 0;
+    margin-block-start: var(--dialog-gap);
+    /* Région FIXE en pied : porte le padding latéral + bas du dialog (+ un peu de haut pour que le
+     contenu ne colle pas aux boutons quand il glisse dessous dans le cas imbriqué). */
+    padding: 0.75rem var(--dialog-pad) var(--dialog-pad);
+    background: var(--dialog-bg);
+  }
+
+  /* ============ Backdrop (backdropClass: kt-dialog__backdrop) ============ */
+  .kt-dialog__backdrop {
+    background: var(--dialog-scrim);
+    backdrop-filter: var(--dialog-scrim-backdrop-filter, none);
+  }
+
+  /* ============ Animation d'entrée (@starting-style — le conteneur est ajouté au DOM) ============ */
+  .kt-dialog .cdk-dialog-container {
+    opacity: 1;
+    transform: none;
+    transition:
+      opacity var(--dialog-anim-duration, 160ms) var(--dialog-anim-easing, ease),
+      transform var(--dialog-anim-duration, 160ms) var(--dialog-anim-easing, ease);
+  }
+  @starting-style {
+    .kt-dialog .cdk-dialog-container {
+      opacity: 0;
+      transform: var(--dialog-anim-from-transform, translateY(8px) scale(0.97));
+    }
+  }
+
+  /* ============ Mouvement réduit (WCAG 2.3.3 / éco-conception) ============ */
+  @media (prefers-reduced-motion: reduce) {
+    .kt-dialog .cdk-dialog-container {
+      transition: none;
+    }
+    @starting-style {
+      .kt-dialog .cdk-dialog-container {
+        opacity: 1;
+        transform: none;
+      }
+    }
+  }
+
+  /* ============ Contraste élevé Windows / forced-colors ============ */
+  @media (forced-colors: active) {
+    .kt-dialog .cdk-dialog-container {
+      border: 1px solid CanvasText;
+    }
+    .kt-dialog__backdrop {
+      /* Le scrim translucide disparaît en forced-colors : on garde une séparation visible. */
+      background: rgb(0 0 0 / 50%);
+    }
+  }
+
+  /* ====================================================================================
+   PRÉSENTATIONS PLEIN ÉCRAN / BOTTOM-SHEET — pilotées par CLASSE, SANS media query.
+   La présentation est CHOISIE par le dev à l'ouverture (option `presentation` de l'ouvreur).
+   Les variantes responsive (`centered-*`) sont résolues EN JS (matchMedia) au moment de
+   l'ouverture, qui pose alors la classe concrète : le CSS ne fait AUCUNE bascule automatique.
+   `--fullscreen` / `--sheet` s'appliquent donc à TOUTE taille dès que la classe est présente.
+   Préfixe `.cdk-overlay-pane` (0,3,0) pour battre le centré de base (0,2,0).
+
+   Entrées : keyframes — fiable, contrairement à @starting-style + `translate`. Le glissement de la
+   sheet réutilise la keyframe PARTAGÉE `kt-sheet-in` (foundation.css), commune au popup compact du
+   Select : une keyframe est globale et joue aussi bien sur un conteneur CDK que sur un Popover.
+   ==================================================================================== */
+  @keyframes kt-dialog-fullscreen-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  /* ===================== PLEIN ÉCRAN (kt-dialog--fullscreen) =====================
+   Surface bord-à-bord ; [ktDialogHeader] devient la top app bar. */
+  .cdk-overlay-pane.kt-dialog--fullscreen {
+    inline-size: 100vw;
+    max-inline-size: 100vw;
+  }
+  .cdk-overlay-pane.kt-dialog--fullscreen .cdk-dialog-container {
+    inline-size: 100vw;
+    max-inline-size: 100vw;
+    block-size: 100dvh;
+    max-block-size: 100dvh;
+    border: 0;
+    border-radius: 0;
+    /* fondu simple : on neutralise la transition centrée et on joue la keyframe d'opacité. */
+    transform: none;
+    transition: none;
+    animation: kt-dialog-fullscreen-in var(--dialog-anim-duration, 160ms) var(--dialog-anim-easing, ease);
+  }
+  @starting-style {
+    .cdk-overlay-pane.kt-dialog--fullscreen .cdk-dialog-container {
+      transform: none;
+    }
+  }
+  /* [ktDialogHeader] = top app bar collée en haut (✕ + action), safe-area pour les encoches. */
+  .cdk-overlay-pane.kt-dialog--fullscreen [ktDialogHeader] {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+    background: var(--dialog-bg);
+    border-block-end: var(--dialog-border-width) solid var(--dialog-border-color);
+    padding-block-start: max(var(--dialog-pad), env(safe-area-inset-top, 0px));
+  }
+  .cdk-overlay-pane.kt-dialog--fullscreen [ktDialogActions] {
+    padding-block-end: max(var(--dialog-pad), env(safe-area-inset-bottom, 0px));
+  }
+
+  /* ===================== BOTTOM-SHEET (kt-dialog--sheet) =====================
+   Feuille glissant du bas, tokens --kt-sheet-* (partagés avec le Select). On positionne+translate
+   le CONTENEUR ; la directive [ktDialogSheetHandle] le drag via .cdk-dialog-container. */
+  .cdk-overlay-pane.kt-dialog--sheet .cdk-dialog-container {
+    position: fixed;
+    inset: auto 0 0 0;
+    inline-size: 100%;
+    max-inline-size: 100%;
+    max-block-size: var(--kt-sheet-max-block-size, 85svh);
+    border-block-end: 0;
+    border-start-start-radius: var(--kt-sheet-radius, 16px);
+    border-start-end-radius: var(--kt-sheet-radius, 16px);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    box-shadow: var(--kt-sheet-shadow, 0 -4px 16px rgb(0 0 0 / 12%));
+    transform: none;
+    translate: 0 0;
+    /* Entrée : glissement du bas (keyframe PARTAGÉE kt-sheet-in, cf. foundation.css). */
+    animation: kt-sheet-in var(--kt-sheet-anim-duration, 120ms) ease;
+    transition: translate var(--kt-sheet-anim-duration, 120ms) ease;
+  }
+  .cdk-overlay-pane.kt-dialog--sheet .cdk-dialog-container.kt-dialog-sheet--dragging,
+  .cdk-overlay-pane.kt-dialog--sheet .cdk-dialog-container.kt-dialog-container--dragging {
+    transition: none;
+  }
+  .cdk-overlay-pane.kt-dialog--sheet .cdk-dialog-container.kt-dialog-container--closing {
+    translate: 0 100%;
+    transition: translate var(--kt-sheet-exit-duration, 90ms) cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  /* Poignée de préhension ([ktDialogSheetHandle] ou .kt-dialog-container__sheet-handle) — visible dès que le dialog est en mode sheet.
+   Hors mode sheet, l'élément reste un div vide de hauteur nulle (aucune règle ne s'applique). */
+  .cdk-overlay-pane.kt-dialog--sheet [ktDialogSheetHandle],
+  .cdk-overlay-pane.kt-dialog--sheet .kt-dialog-container__sheet-handle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    block-size: 44px; /* Cible tactile minimale WCAG 2.5.5 AAA (44px) */
+    cursor: grab;
+    touch-action: none; /* le geste ne déclenche pas le scroll de la page */
+  }
+  .cdk-overlay-pane.kt-dialog--sheet [ktDialogSheetHandle]:active,
+  .cdk-overlay-pane.kt-dialog--sheet .kt-dialog-container__sheet-handle:active {
+    cursor: grabbing;
+  }
+  .cdk-overlay-pane.kt-dialog--sheet [ktDialogSheetHandle]::before,
+  .cdk-overlay-pane.kt-dialog--sheet .kt-dialog-container__sheet-handle::before {
+    content: '';
+    inline-size: 2.25rem;
+    block-size: 0.25rem;
+    border-radius: 999px;
+    background: var(--kt-sheet-grab-color, var(--kt-outline, #c4c7c5));
+  }
+
+  /* Mouvement réduit : pas de glissement ni de fondu (WCAG 2.3.3). */
+  @media (prefers-reduced-motion: reduce) {
+    .cdk-overlay-pane.kt-dialog--sheet .cdk-dialog-container,
+    .cdk-overlay-pane.kt-dialog--fullscreen .cdk-dialog-container {
+      transition: none;
+      translate: 0 0;
+    }
+  }
+}

package/fesm2022/ktortu-aaa-button.mjs

@@ -0,0 +1,128 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, PLATFORM_ID, signal, input, booleanAttribute, computed, effect, isDevMode, Directive } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+const KT_BUTTON_CONFIG = new InjectionToken('KT_BUTTON_CONFIG');
+/**
+ * Bouton ou lien stylé par la directive `ktButton`. À poser sur un `<button>`
+ * (action) ou un `<a>` (navigation) — l'accessibilité s'adapte automatiquement
+ * (un `<a>` désactivé bascule sur `aria-disabled` plutôt que `disabled`).
+ *
+ * @example
+ * ```html
+ * <button ktButton mode="filled" color="primary">Enregistrer</button>
+ * <a ktButton mode="text" href="/aide">Aide</a>
+ * <button ktButton iconOnly icon="close" ariaLabel="Fermer"></button>
+ * ```
+ */
+class KtButton {
+    config = inject(KT_BUTTON_CONFIG, { optional: true });
+    host = inject(ElementRef).nativeElement;
+    platformId = inject(PLATFORM_ID);
+    viewInitialized = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "viewInitialized" }] : /* istanbul ignore next */ []));
+    // Un <a> reste toujours focusable : on bascule sur aria-disabled au lieu du disabled natif.
+    isLink = this.host.tagName === 'A';
+    // aria-label natif posé par le consommateur, capté à la construction (préservé si l'input n'est pas fourni).
+    nativeAriaLabel = this.host.getAttribute('aria-label');
+    /** Emphase visuelle du bouton (apparence, ≠ `type`). @default 'filled' (ou KT_BUTTON_CONFIG.mode) */
+    mode = input(this.config?.mode ?? 'filled', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Intention sémantique (couleur). @default 'primary' (ou KT_BUTTON_CONFIG.color) */
+    color = input(this.config?.color ?? 'primary', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Taille ; `md` vise une cible tactile ~44-48px. @default 'md' (ou KT_BUTTON_CONFIG.size) */
+    size = input(this.config?.size ?? 'md', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Étire le bouton sur toute la largeur disponible. @default false */
+    fullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** Bouton carré sans texte ; impose un nom accessible via `ariaLabel`. @default false */
+    iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Nom accessible. Obligatoire si `iconOnly` ; à défaut, l'`aria-label` natif est préservé. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Attribut HTML natif (comportement formulaire), distinct de `mode`. @default 'button' */
+    type = input('button', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Affiche l'état de chargement et rend le bouton inerte (`aria-busy`). @default false */
+    loading = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    /** Nom de l'icône (rendu via CSS `data-icon`). */
+    icon = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
+    /** Position de l'icône relative au texte. @default 'start' */
+    iconPosition = input('start', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconPosition" }] : /* istanbul ignore next */ []));
+    /** Désactive le bouton. @default false */
+    disabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Garde le bouton focusable même désactivé (via `aria-disabled`). @default false (ou KT_BUTTON_CONFIG.disabledInteractive) */
+    disabledInteractive = input(this.config?.disabledInteractive ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "disabledInteractive" }] : /* istanbul ignore next */ []));
+    // loading implique un bouton inerte
+    isDisabled = computed(() => this.disabled() || this.loading(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    // input prioritaire, sinon aria-label natif préservé (non destructif), sinon rien.
+    resolvedAriaLabel = computed(() => this.ariaLabel()?.trim() || this.nativeAriaLabel || null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!isPlatformBrowser(this.platformId))
+                return;
+            if (!this.viewInitialized())
+                return;
+            if (!isDevMode() || !this.iconOnly())
+                return;
+            if (!this.icon()) {
+                console.warn('[ktButton] iconOnly attend une icône via [icon].');
+            }
+            if (!this.resolvedAriaLabel() && !this.host.hasAttribute('aria-labelledby')) {
+                console.warn('[ktButton] iconOnly sans nom accessible : ajoutez [ariaLabel] (WCAG 4.1.2) — ' +
+                    'le bouton serait annoncé sans libellé.');
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.viewInitialized.set(true);
+    }
+    haltDisabledEvents(event) {
+        if (!this.isDisabled())
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtButton, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.1", type: KtButton, isStandalone: true, selector: "button[ktButton], a[ktButton]", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disabledInteractive: { classPropertyName: "disabledInteractive", publicName: "disabledInteractive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "haltDisabledEvents($event)" }, properties: { "attr.data-mode": "mode()", "attr.data-color": "color()", "attr.data-size": "size()", "attr.data-full-width": "fullWidth() ? \"\" : null", "attr.data-icon-only": "iconOnly() ? \"\" : null", "attr.type": "!isLink ? type() : null", "attr.aria-label": "resolvedAriaLabel()", "class.loading": "loading()", "class.disabled": "isDisabled()", "attr.data-icon": "icon()", "attr.data-icon-position": "iconPosition()", "attr.disabled": "isDisabled() && !disabledInteractive() && !isLink ? \"\" : null", "attr.aria-disabled": "isDisabled() && (disabledInteractive() || isLink) ? \"true\" : null", "attr.tabindex": "isDisabled() && !disabledInteractive() && isLink ? \"-1\" : null", "attr.aria-busy": "loading() ? \"true\" : null" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImport: i0, type: KtButton, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[ktButton], a[ktButton]',
+                    host: {
+                        '[attr.data-mode]': 'mode()',
+                        '[attr.data-color]': 'color()',
+                        '[attr.data-size]': 'size()',
+                        '[attr.data-full-width]': 'fullWidth() ? "" : null',
+                        '[attr.data-icon-only]': 'iconOnly() ? "" : null',
+                        '[attr.type]': '!isLink ? type() : null',
+                        '[attr.aria-label]': 'resolvedAriaLabel()',
+                        '[class.loading]': 'loading()',
+                        '[class.disabled]': 'isDisabled()',
+                        '[attr.data-icon]': 'icon()',
+                        '[attr.data-icon-position]': 'iconPosition()',
+                        '[attr.disabled]': 'isDisabled() && !disabledInteractive() && !isLink ? "" : null',
+                        '[attr.aria-disabled]': 'isDisabled() && (disabledInteractive() || isLink) ? "true" : null',
+                        '[attr.tabindex]': 'isDisabled() && !disabledInteractive() && isLink ? "-1" : null',
+                        '[attr.aria-busy]': 'loading() ? "true" : null',
+                        '(click)': 'haltDisabledEvents($event)',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledInteractive: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledInteractive", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KT_BUTTON_CONFIG, KtButton };
+//# sourceMappingURL=ktortu-aaa-button.mjs.map

package/fesm2022/ktortu-aaa-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ktortu-aaa-button.mjs","sources":["../../../../projects/ktortu/aaa/button/button.ts","../../../../projects/ktortu/aaa/button/ktortu-aaa-button.ts"],"sourcesContent":["import {\n  Directive,\n  ElementRef,\n  InjectionToken,\n  booleanAttribute,\n  computed,\n  inject,\n  input,\n  isDevMode,\n  AfterViewInit,\n  PLATFORM_ID,\n  effect,\n  signal,\n} from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\n\n/** Axe \"emphase\" (apparence). */\nexport type KtButtonMode = 'filled' | 'tonal' | 'outlined' | 'text';\n/** Axe \"intention\" (couleur sémantique). */\nexport type KtButtonColor = 'primary' | 'neutral' | 'danger';\n/** Taille (la cible md ~44-48px vise le confort tactile / AAA). */\nexport type KtButtonSize = 'sm' | 'md' | 'lg';\n\nexport interface KtButtonConfig {\n  disabledInteractive: boolean;\n  mode: KtButtonMode;\n  color: KtButtonColor;\n  size: KtButtonSize;\n}\n\nexport const KT_BUTTON_CONFIG = new InjectionToken<Partial<KtButtonConfig>>('KT_BUTTON_CONFIG');\n\n/**\n * Bouton ou lien stylé par la directive `ktButton`. À poser sur un `<button>`\n * (action) ou un `<a>` (navigation) — l'accessibilité s'adapte automatiquement\n * (un `<a>` désactivé bascule sur `aria-disabled` plutôt que `disabled`).\n *\n * @example\n * ```html\n * <button ktButton mode=\"filled\" color=\"primary\">Enregistrer</button>\n * <a ktButton mode=\"text\" href=\"/aide\">Aide</a>\n * <button ktButton iconOnly icon=\"close\" ariaLabel=\"Fermer\"></button>\n * ```\n */\n@Directive({\n  selector: 'button[ktButton], a[ktButton]',\n  host: {\n    '[attr.data-mode]': 'mode()',\n    '[attr.data-color]': 'color()',\n    '[attr.data-size]': 'size()',\n    '[attr.data-full-width]': 'fullWidth() ? \"\" : null',\n    '[attr.data-icon-only]': 'iconOnly() ? \"\" : null',\n    '[attr.type]': '!isLink ? type() : null',\n    '[attr.aria-label]': 'resolvedAriaLabel()',\n    '[class.loading]': 'loading()',\n    '[class.disabled]': 'isDisabled()',\n    '[attr.data-icon]': 'icon()',\n    '[attr.data-icon-position]': 'iconPosition()',\n    '[attr.disabled]': 'isDisabled() && !disabledInteractive() && !isLink ? \"\" : null',\n    '[attr.aria-disabled]': 'isDisabled() && (disabledInteractive() || isLink) ? \"true\" : null',\n    '[attr.tabindex]': 'isDisabled() && !disabledInteractive() && isLink ? \"-1\" : null',\n    '[attr.aria-busy]': 'loading() ? \"true\" : null',\n    '(click)': 'haltDisabledEvents($event)',\n  },\n})\nexport class KtButton implements AfterViewInit {\n  private readonly config = inject(KT_BUTTON_CONFIG, { optional: true });\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly platformId = inject(PLATFORM_ID);\n  private readonly viewInitialized = signal(false);\n\n  // Un <a> reste toujours focusable : on bascule sur aria-disabled au lieu du disabled natif.\n  protected readonly isLink = this.host.tagName === 'A';\n  // aria-label natif posé par le consommateur, capté à la construction (préservé si l'input n'est pas fourni).\n  private readonly nativeAriaLabel = this.host.getAttribute('aria-label');\n\n  /** Emphase visuelle du bouton (apparence, ≠ `type`). @default 'filled' (ou KT_BUTTON_CONFIG.mode) */\n  readonly mode = input<KtButtonMode>(this.config?.mode ?? 'filled');\n\n  /** Intention sémantique (couleur). @default 'primary' (ou KT_BUTTON_CONFIG.color) */\n  readonly color = input<KtButtonColor>(this.config?.color ?? 'primary');\n\n  /** Taille ; `md` vise une cible tactile ~44-48px. @default 'md' (ou KT_BUTTON_CONFIG.size) */\n  readonly size = input<KtButtonSize>(this.config?.size ?? 'md');\n\n  /** Étire le bouton sur toute la largeur disponible. @default false */\n  readonly fullWidth = input<boolean>(false);\n\n  /** Bouton carré sans texte ; impose un nom accessible via `ariaLabel`. @default false */\n  readonly iconOnly = input<boolean, unknown>(false, { transform: booleanAttribute });\n\n  /** Nom accessible. Obligatoire si `iconOnly` ; à défaut, l'`aria-label` natif est préservé. */\n  readonly ariaLabel = input<string>();\n\n  /** Attribut HTML natif (comportement formulaire), distinct de `mode`. @default 'button' */\n  readonly type = input<'button' | 'submit' | 'reset'>('button');\n\n  /** Affiche l'état de chargement et rend le bouton inerte (`aria-busy`). @default false */\n  readonly loading = input<boolean>(false);\n\n  /** Nom de l'icône (rendu via CSS `data-icon`). */\n  readonly icon = input<string>();\n\n  /** Position de l'icône relative au texte. @default 'start' */\n  readonly iconPosition = input<'start' | 'end'>('start');\n\n  /** Désactive le bouton. @default false */\n  readonly disabled = input<boolean>(false);\n\n  /** Garde le bouton focusable même désactivé (via `aria-disabled`). @default false (ou KT_BUTTON_CONFIG.disabledInteractive) */\n  readonly disabledInteractive = input<boolean>(this.config?.disabledInteractive ?? false);\n\n  // loading implique un bouton inerte\n  protected readonly isDisabled = computed(() => this.disabled() || this.loading());\n\n  // input prioritaire, sinon aria-label natif préservé (non destructif), sinon rien.\n  protected readonly resolvedAriaLabel = computed(() => this.ariaLabel()?.trim() || this.nativeAriaLabel || null);\n\n  constructor() {\n    effect(() => {\n      if (!isPlatformBrowser(this.platformId)) return;\n      if (!this.viewInitialized()) return;\n      if (!isDevMode() || !this.iconOnly()) return;\n\n      if (!this.icon()) {\n        console.warn('[ktButton] iconOnly attend une icône via [icon].');\n      }\n      if (!this.resolvedAriaLabel() && !this.host.hasAttribute('aria-labelledby')) {\n        console.warn(\n          '[ktButton] iconOnly sans nom accessible : ajoutez [ariaLabel] (WCAG 4.1.2) — ' +\n            'le bouton serait annoncé sans libellé.',\n        );\n      }\n    });\n  }\n\n  ngAfterViewInit(): void {\n    this.viewInitialized.set(true);\n  }\n\n  protected haltDisabledEvents(event: Event): void {\n    if (!this.isDisabled()) return;\n\n    event.preventDefault();\n    event.stopImmediatePropagation();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}