@ktortu/aaa 0.1.0-beta.0

package/forms/switch/switch.css

@@ -0,0 +1,188 @@
+@layer kt-aaa.components {
+  :host {
+    display: block;
+  }
+
+  .kt-switch-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, 0.375rem);
+  }
+
+  .kt-switch-row {
+    display: flex;
+    align-items: center;
+    gap: var(--field-control-gap, 0.5rem);
+  }
+
+  /* Le bouton switch (la glissière / track) */
+  .kt-switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    inline-size: var(--switch-width, 2.75rem);
+    block-size: var(--switch-height, 1.5rem);
+    padding: var(--switch-padding, 2px);
+    border-radius: var(--switch-radius, 999px);
+    border: var(--switch-border-width, 2px) solid
+      var(--switch-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));
+    background-color: var(--switch-bg, var(--field-bg, var(--kt-surface, #ffffff)));
+    cursor: pointer;
+    outline: none;
+    /* Élévation/glow de repos : retombe sur le token de thème des champs (--field-shadow). */
+    box-shadow: var(--switch-shadow, var(--field-shadow, none));
+    /* Token de BASCULE (non déclaré => valeur ci-dessous). Comme --btn-transition : ne pas y
+     mettre box-shadow si un thème anime déjà l'ombre en continu. */
+    transition: var(
+      --switch-transition,
+      background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.2s ease
+    );
+  }
+
+  /* Zone de clic étendue à 44px de haut (AAA 2.5.5) via un pseudo-élément transparent */
+  .kt-switch::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%;
+    height: 44px;
+  }
+
+  /* La pastille mobile (le curseur / thumb) */
+  .kt-switch__thumb {
+    display: block;
+    inline-size: var(--switch-thumb-size, 1rem);
+    block-size: var(--switch-thumb-size, 1rem);
+    border-radius: var(--switch-thumb-radius, 50%);
+    background-color: var(--switch-thumb-bg, var(--kt-outline-strong, #5f6368));
+    box-shadow: var(--switch-thumb-shadow, 0 1px 3px rgba(0, 0, 0, 0.2));
+    /* Token de BASCULE (non déclaré => glissement actuel, rebond léger). */
+    transition: var(
+      --switch-thumb-transition,
+      transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
+      background-color 0.2s ease
+    );
+    transform: translateX(0);
+  }
+
+  /* État ACTIVÉ (aria-checked="true") + HALO coloré dérivé du primaire du thème (glow visible,
+   en fondu via la transition). Surchargeable/désactivable par --switch-shadow-active. */
+  .kt-switch[aria-checked='true'] {
+    background-color: var(--switch-bg-active, var(--kt-primary, #0b57d0));
+    border-color: var(--switch-border-color-active, var(--kt-primary, #0b57d0));
+    box-shadow: var(
+      --switch-shadow-active,
+      0 0 8px color-mix(in srgb, var(--switch-bg-active, var(--kt-primary, #0b57d0)) 50%, transparent)
+    );
+  }
+
+  .kt-switch[aria-checked='true'] .kt-switch__thumb {
+    background-color: var(--switch-thumb-bg-active, #ffffff);
+    /* Décale le curseur vers la droite : width de la track - size du thumb - padding*2 - border*2 */
+    transform: translateX(
+      calc(
+        var(--switch-width, 2.75rem) - var(--switch-thumb-size, 1rem) - (var(--switch-padding, 2px) * 2) -
+          (var(--switch-border-width, 2px) * 2)
+      )
+    );
+  }
+
+  /* État HOVER */
+  .kt-switch:hover:not(:disabled) {
+    border-color: var(--switch-border-color-hover, var(--field-border-color-hover, var(--kt-outline-strong, #5f6368)));
+    box-shadow: var(--switch-shadow-hover, var(--field-shadow-hover, var(--switch-shadow, var(--field-shadow, none))));
+  }
+
+  .kt-switch[aria-checked='true']:hover:not(:disabled) {
+    background-color: var(--switch-bg-active-hover, color-mix(in srgb, var(--kt-primary, #0b57d0) 90%, black));
+    border-color: var(--switch-border-color-active-hover, color-mix(in srgb, var(--kt-primary, #0b57d0) 90%, black));
+  }
+
+  /* État FOCUS : anneau via `outline` (comme les champs/checkbox/radio → pas de conflit avec le
+   glow box-shadow du thème), + glow de focus du thème (--field-shadow-focus). */
+  .kt-switch:focus-visible {
+    outline: var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0b57d0);
+    outline-offset: var(--switch-focus-ring-offset, 2px);
+    box-shadow: var(--switch-shadow-focus, var(--field-shadow-focus, var(--switch-shadow, var(--field-shadow, none))));
+  }
+
+  /* État DÉSACTIVÉ (disabled) */
+  .kt-switch:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    background-color: var(--field-disabled-bg, #f1f3f4);
+    border-color: var(--field-border-color, #c4c7c5);
+  }
+
+  .kt-switch:disabled .kt-switch__thumb {
+    background-color: var(--kt-outline, #c4c7c5);
+    box-shadow: none;
+  }
+
+  /* État INVALID */
+  .kt-switch-field--invalid .kt-switch {
+    border-color: var(--field-error-color, var(--kt-danger, #b3261e));
+  }
+
+  .kt-switch-field--invalid .kt-switch[aria-checked='true'] {
+    background-color: var(--field-error-color, var(--kt-danger, #b3261e));
+    border-color: var(--field-error-color, var(--kt-danger, #b3261e));
+  }
+
+  /* Typo Label */
+  .kt-switch-label {
+    font-size: var(--field-label-font-size, 0.875rem);
+    font-weight: var(--field-label-weight, 500);
+    color: var(--field-label-color, inherit);
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .kt-switch-field--disabled .kt-switch-label {
+    cursor: not-allowed;
+    color: var(--field-hint-color, #5f6368);
+    opacity: 0.6;
+  }
+
+  .kt-switch-label__required {
+    margin-inline-start: 0.125rem;
+    color: var(--field-required-color, #8c1d18);
+  }
+
+  /* Hint & Error */
+  .kt-switch-hint {
+    margin: 0;
+    font-size: var(--field-hint-font-size, 0.8125rem);
+    color: var(--field-hint-color, #474747);
+  }
+
+  .kt-switch-error {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--field-hint-font-size, 0.8125rem);
+    color: var(--field-error-color, #8c1d18);
+  }
+
+  /* Apparition d'un message d'erreur : même token que les champs (cf. field.css).
+   Sur le MESSAGE (inséré à l'invalidation), pas sur le conteneur. */
+  .kt-switch-error-message {
+    animation: var(--field-error-animation, none);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kt-switch,
+    .kt-switch__thumb {
+      transition: none;
+    }
+
+    .kt-switch-error-message {
+      animation: none;
+    }
+  }
+}

package/menu/menu-tokens.css

@@ -0,0 +1,58 @@
+/* Design tokens du menu (directives ktMenu / ktMenuItem) — contrat public de theming.
+
+   Même architecture que --card-* / --field-* / --dialog-* : tout DÉRIVE du socle --kt-*.
+   Surcharger un --kt-* (ex. --kt-surface) rebrande le menu avec le reste de la lib ; surcharger
+   un --kt-menu-* (ici ou sur un conteneur de spécificité ≥) ne touche que le menu. Conséquence
+   recherchée : le menu est correct sur les 14 thèmes SANS une seule ligne dédiée par thème (comme
+   la scrollbar et la bottom-sheet), un thème ne pose un --kt-menu-* que pour une signature.
+
+   Chargé APRÈS foundation.css (qui pose les --kt-*). */
+@layer kt-aaa.tokens {
+  :root {
+    /* ============ Surface ============ */
+    --kt-menu-bg: var(--kt-surface, #ffffff);
+    --kt-menu-fg: var(--kt-on-surface, #1f1f1f);
+    --kt-menu-border-color: var(--kt-outline, #c4c7c5);
+    --kt-menu-border-width: 1px;
+    --kt-menu-radius: var(--kt-control-radius, 8px);
+    --kt-menu-shadow: 0 4px 12px rgb(0 0 0 / 12%);
+    --kt-menu-padding: 0.25rem;
+    --kt-menu-min-width: 12rem;
+
+    /* Décalage du dropdown sous le trigger. */
+    --kt-menu-offset: 0.25rem;
+    /* Écart visuel entre un menu et son sous-menu (comblé par un pont de survol invisible : le gap
+     reste élégant SANS fermer le sous-menu quand le pointeur le traverse en diagonale). */
+    --kt-menu-submenu-gap: 0.375rem;
+    /* Plan d'empilement : au-dessus du contenu de page (le menu est position:fixed, hors flux). */
+    --kt-menu-z: 1000;
+
+    /* ============ Items ============ */
+    --kt-menu-item-min-height: 44px; /* cible tactile AAA (WCAG 2.5.5), y compris desktop */
+    --kt-menu-item-padding: 0.5rem 0.75rem;
+    --kt-menu-item-gap: 0.625rem;
+    --kt-menu-item-radius: calc(var(--kt-menu-radius, 8px) - var(--kt-menu-padding, 0.25rem));
+
+    /* Survol / item actif (focus roving) : voile dérivé, suit chaque thème. */
+    --kt-menu-item-hover-bg: color-mix(in srgb, currentColor 8%, transparent);
+    /* Item coché (checkbox/radio) : teinte primaire discrète. */
+    --kt-menu-item-checked-color: var(--kt-primary, #0842a0);
+    /* Item destructeur (opt-in via [data-tone="danger"]). */
+    --kt-menu-item-danger-color: var(--kt-danger, #8c1d18);
+
+    /* ============ Anneau de focus ============ */
+    --kt-menu-focus-ring-color: var(--kt-focus-ring-color, #0842a0);
+    --kt-menu-focus-ring-width: var(--kt-focus-ring-width, 2px);
+
+    /* ============ Séparateur ============ */
+    --kt-menu-separator-color: var(--kt-outline, #c4c7c5);
+
+    /* ============ Bascules NON déclarées exprès (défauts entre parenthèses) ============
+     Même principe que --btn-* / --card-* : non définies => effet neutre ; un thème (ou un
+     conteneur) les pose pour activer l'effet, sans qu'aucun menu n'ait à les redéclarer.
+       --kt-menu-enter-animation (none)            : animation d'entrée du dropdown (transform/opacity
+                                                     uniquement — le menu est ancré, ne pas animer la position).
+       --kt-menu-backdrop-filter (none)            : flou de la surface (thèmes verre).
+       --kt-menu-item-transition (none)            : transition du voile de survol. */
+  }
+}

package/menu/menu.css

@@ -0,0 +1,224 @@
+@layer kt-aaa.components {
+  /* Styles des directives Menu ([ktMenu] / [ktMenuItem] / [ktMenuSeparator]).
+   Global : enregistré comme button.css / card.css / dialog.css (les directives se posent sur les
+   hôtes d'@angular/aria, hors de toute vue de composant). Tokens (--kt-menu-*) dans
+   menu-tokens.css (chargé avant).
+
+   Le COMPORTEMENT (ouverture, clavier, focus roving, retour focus, sous-menus, typeahead) vient
+   d'aria. Ce fichier ne fait que l'APPARENCE + le POSITIONNEMENT (CSS Anchor Positioning), piloté
+   par `data-visible` (posé par aria) et les anchor-name/position-anchor (posés par [ktMenuTrigger]
+   et [ktMenuItem]). Aucune dépendance à une police d'icônes : chevron et coche sont dessinés en CSS. */
+
+  /* ===== Surface du menu ===== */
+  [ktMenu] {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: var(--kt-menu-padding, 0.25rem);
+    min-inline-size: var(--kt-menu-min-width, 12rem);
+    max-inline-size: min(90vw, 22rem);
+    list-style: none;
+    background: var(--kt-menu-bg, #fff);
+    color: var(--kt-menu-fg, #1f1f1f);
+    border: var(--kt-menu-border-width, 1px) solid var(--kt-menu-border-color, #c4c7c5);
+    border-radius: var(--kt-menu-radius, 8px);
+    box-shadow: var(--kt-menu-shadow, 0 4px 12px rgb(0 0 0 / 12%));
+    /* Translucidité (verre) : bascule => aucun effet par défaut. */
+    backdrop-filter: var(--kt-menu-backdrop-filter, none);
+    z-index: var(--kt-menu-z, 1000);
+  }
+
+  /* Masqué tant que NON explicitement ouvert : aria pose data-visible="true" à l'ouverture, "false"
+   sinon. On masque sur `:not([data-visible='true'])` (et non sur ='false') pour rester caché AUSSI
+   avant l'initialisation d'aria (SSR / 1er paint, où l'attribut est encore absent) — pas de flash.
+   `display:none` retire l'élément du flux ET du parcours de tabulation (items non focusables). */
+  [ktMenu]:not([data-visible='true']) {
+    display: none;
+  }
+
+  /* ===== Positionnement : dropdown ancré (CSS Anchor Positioning), comme le popup du Select ===== */
+  @supports (anchor-name: --x) {
+    [ktMenu] {
+      position: fixed;
+      inset: auto;
+      inset-block-start: anchor(block-end);
+      inset-inline-start: anchor(inline-start);
+      margin-block-start: var(--kt-menu-offset, 0.25rem);
+      /* Bascule de côté / au-dessus si le bas/droite manque de place. */
+      position-try-fallbacks:
+        flip-block,
+        flip-inline,
+        flip-block flip-inline;
+    }
+
+    /* Sous-menu : s'ouvre en latéral (inline-end), ancré au bord droit de son item parent, avec un
+     petit espace visuel (--kt-menu-submenu-gap). */
+    [ktMenu][data-kt-submenu] {
+      /* Décalage TOTAL depuis le bord de l'item (= l'ancre) jusqu'au bord de la surface du sous-menu :
+       padding + bordure du menu PARENT (que l'item ne traverse pas) + l'espace visuel voulu. Ainsi
+       l'écart SURFACE-à-SURFACE vaut exactement --kt-menu-submenu-gap, quel que soit le thème. */
+      --_submenu-offset: calc(
+        var(--kt-menu-padding, 0.25rem) + var(--kt-menu-border-width, 1px) + var(--kt-menu-submenu-gap, 0.375rem)
+      );
+      inset-block-start: anchor(block-start);
+      inset-inline-start: anchor(inline-end);
+      margin-block-start: 0;
+      margin-inline-start: var(--_submenu-offset);
+      position-try-fallbacks:
+        flip-inline,
+        flip-block,
+        flip-block flip-inline;
+    }
+  }
+
+  /* Ponts de survol invisibles comblant l'espace menu↔sous-menu : le gap reste élégant, mais le
+   pointeur ne quitte jamais une zone survolable en le traversant (sinon aria annule l'ouverture
+   sur trajectoire diagonale). Chaque pont couvre TOUTE la distance bord-d'item → bord-de-sous-menu
+   (--_submenu-offset), sur toute la hauteur (inset-block:0). Hors de la boîte des items → aucun
+   clic bloqué. Deux côtés : ::before pour l'ouverture normale, ::after pour le cas rabattu (flip). */
+  [ktMenu][data-kt-submenu]::before,
+  [ktMenu][data-kt-submenu]::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inline-size: var(--_submenu-offset);
+  }
+
+  [ktMenu][data-kt-submenu]::before {
+    inset-inline-start: calc(-1 * var(--_submenu-offset));
+  }
+
+  [ktMenu][data-kt-submenu]::after {
+    inset-inline-end: calc(-1 * var(--_submenu-offset));
+  }
+
+  /* Repli sans anchor positioning (ex. iOS < 26) : le menu reste rendu près de son trigger dans le
+   flux (position statique). Moins joli mais sûr — jamais coincé en 0,0. */
+  @supports not (anchor-name: --x) {
+    [ktMenu] {
+      position: absolute;
+      margin-block-start: var(--kt-menu-offset, 0.25rem);
+    }
+  }
+
+  /* Déclencheur OUVERT = ancre du dropdown : s'il se transforme (animation de thème au hover/active
+   du bouton — cf. --btn-transform-hover/-active), il déplace le menu ancré. On fige donc sa
+   transformation TANT QUE le menu est ouvert (aria pose aria-expanded sur le trigger) ; l'animation
+   reste normale menu fermé. `!important` car les règles :hover/:active de ktButton sont plus
+   spécifiques. Le retour visuel de couleur/fond au survol n'est pas concerné (seul le déplacement
+   l'est) ; la transition est neutralisée pour éviter une ré-animation au moment du figeage. */
+  [ktMenuTrigger][aria-expanded='true'] {
+    transform: none !important;
+    translate: none !important;
+    scale: none !important;
+    /* On neutralise SEULEMENT les transitions de déplacement (pour éviter une ré-animation du
+     figeage) ; le fondu de couleur/fond/bord au survol du déclencheur reste préservé. */
+    transition-property: background-color, color, border-color, box-shadow, outline-color !important;
+  }
+
+  /* Entrée du dropdown : token de BASCULE (non déclaré => aucune animation). Joué uniquement à
+   l'ouverture réelle (data-visible="true"). */
+  [ktMenu][data-visible='true'] {
+    animation: var(--kt-menu-enter-animation, none);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [ktMenu] {
+      animation: none;
+    }
+  }
+
+  /* ===== Items ===== */
+  [ktMenuItem] {
+    display: flex;
+    align-items: center;
+    gap: var(--kt-menu-item-gap, 0.625rem);
+    box-sizing: border-box;
+    min-block-size: var(--kt-menu-item-min-height, 44px);
+    padding: var(--kt-menu-item-padding, 0.5rem 0.75rem);
+    border: 0;
+    border-radius: var(--kt-menu-item-radius, 6px);
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: start;
+    text-decoration: none;
+    inline-size: 100%;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--kt-menu-item-transition, none);
+  }
+
+  /* Item actif : aria utilise le focus roving (focus DOM réel) → on style `:focus-visible`. Le survol
+   souris partage le même voile. (`:focus` simple couvre aussi le focus programmatique d'aria.) */
+  [ktMenuItem]:focus:not([aria-disabled='true']),
+  [ktMenuItem]:hover:not([aria-disabled='true']) {
+    background: var(--kt-menu-item-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
+    outline: none;
+  }
+
+  [ktMenuItem]:focus-visible {
+    outline: var(--kt-menu-focus-ring-width, 2px) solid var(--kt-menu-focus-ring-color, #0842a0);
+    outline-offset: -2px;
+  }
+
+  [ktMenuItem][aria-disabled='true'] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  /* Tonalité destructrice (opt-in : [data-tone="danger"] posé par le consommateur). */
+  [ktMenuItem][data-tone='danger'] {
+    color: var(--kt-menu-item-danger-color, #8c1d18);
+  }
+
+  /* ===== Indicateur de sous-menu : chevron dessiné en CSS (aria pose aria-haspopup) ===== */
+  [ktMenuItem][aria-haspopup='true']::after {
+    content: '';
+    flex: none;
+    margin-inline-start: auto;
+    inline-size: 0.4em;
+    block-size: 0.4em;
+    border-top: 2px solid currentColor;
+    border-right: 2px solid currentColor;
+    transform: rotate(45deg); /* pointe vers l'inline-end (chevron ›) */
+    opacity: 0.7;
+  }
+
+  /* Support RTL pour le chevron du sous-menu (doit pointer vers la gauche) */
+  [dir='rtl'] [ktMenuItem][aria-haspopup='true']::after,
+  :host-context([dir='rtl']) [ktMenuItem][aria-haspopup='true']::after {
+    transform: rotate(-135deg); /* pointe vers l'inline-start (chevron ‹) */
+  }
+
+  /* ===== Indicateur coché : checkbox / radio (aria-checked, posé par [ktMenuItemCheckbox/Radio]) =====
+   La coche occupe un emplacement de tête réservé pour aligner les libellés ; dessinée via un mask
+   SVG (suit currentColor, pas de police d'icônes). */
+  [ktMenuItem][aria-checked]::before {
+    content: '';
+    flex: none;
+    inline-size: 1.15em;
+    block-size: 1.15em;
+    background-color: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E")
+      center / contain no-repeat;
+    visibility: hidden; /* réserve la place quand non coché → libellés alignés */
+  }
+
+  [ktMenuItem][aria-checked='true'] {
+    color: var(--kt-menu-item-checked-color, #0842a0);
+  }
+
+  [ktMenuItem][aria-checked='true']::before {
+    visibility: visible;
+  }
+
+  /* ===== Séparateur ===== */
+  [ktMenuSeparator] {
+    block-size: 0;
+    margin-block: var(--kt-menu-padding, 0.25rem);
+    border: 0;
+    border-block-start: 1px solid var(--kt-menu-separator-color, #c4c7c5);
+  }
+}

package/package.json

@@ -0,0 +1,96 @@
+{
+  "name": "@ktortu/aaa",
+  "version": "0.1.0-beta.0",
+  "description": "Bibliothèque de composants Angular headless + thémés par tokens CSS.",
+  "keywords": [
+    "angular",
+    "headless",
+    "components",
+    "css-tokens",
+    "design-system",
+    "accessibility"
+  ],
+  "author": "ktortu",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ktortu/aaa.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ktortu/aaa/issues"
+  },
+  "homepage": "https://github.com/ktortu/aaa#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/aria": "^22.0.0",
+    "@angular/cdk": "^22.0.0",
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
+    "temporal-polyfill": "^0.3.2"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    "./styles.css": {
+      "default": "./styles/styles.css"
+    },
+    "./themes/*.css": {
+      "default": "./themes/*.css"
+    },
+    "./cdk/styles/*.css": {
+      "default": "./cdk/styles/*.css"
+    },
+    "./*.css": {
+      "default": "./styles/*.css"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/ktortu-aaa.d.ts",
+      "default": "./fesm2022/ktortu-aaa.mjs"
+    },
+    "./button": {
+      "types": "./types/ktortu-aaa-button.d.ts",
+      "default": "./fesm2022/ktortu-aaa-button.mjs"
+    },
+    "./card": {
+      "types": "./types/ktortu-aaa-card.d.ts",
+      "default": "./fesm2022/ktortu-aaa-card.mjs"
+    },
+    "./cdk": {
+      "types": "./types/ktortu-aaa-cdk.d.ts",
+      "default": "./fesm2022/ktortu-aaa-cdk.mjs"
+    },
+    "./dialog": {
+      "types": "./types/ktortu-aaa-dialog.d.ts",
+      "default": "./fesm2022/ktortu-aaa-dialog.mjs"
+    },
+    "./forms": {
+      "types": "./types/ktortu-aaa-forms.d.ts",
+      "default": "./fesm2022/ktortu-aaa-forms.mjs"
+    },
+    "./menu": {
+      "types": "./types/ktortu-aaa-menu.d.ts",
+      "default": "./fesm2022/ktortu-aaa-menu.mjs"
+    },
+    "./tabs": {
+      "types": "./types/ktortu-aaa-tabs.d.ts",
+      "default": "./fesm2022/ktortu-aaa-tabs.mjs"
+    },
+    "./tooltip": {
+      "types": "./types/ktortu-aaa-tooltip.d.ts",
+      "default": "./fesm2022/ktortu-aaa-tooltip.mjs"
+    }
+  },
+  "module": "fesm2022/ktortu-aaa.mjs",
+  "typings": "types/ktortu-aaa.d.ts",
+  "type": "module"
+}

package/styles/button.css

@@ -0,0 +1,6 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Bouton (ktButton) : tokens + apparence. Nécessite le socle (@ktortu/aaa/foundation.css).
+     @import '@ktortu/aaa/button.css'; */
+@import '../button/button-tokens.css';
+@import '../button/button.css';

package/styles/card.css

@@ -0,0 +1,6 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Carte (ktCard + marqueurs structurels) : tokens + apparence. Nécessite le socle.
+     @import '@ktortu/aaa/card.css'; */
+@import '../card/card-tokens.css';
+@import '../card/card.css';

package/styles/dialog.css

@@ -0,0 +1,6 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Dialog (moteur @angular/cdk/dialog + directives kt). Nécessite le socle, ET l'overlay CDK :
+   pensez à importer aussi '@angular/cdk/overlay-prebuilt.css'.
+     @import '@ktortu/aaa/dialog.css'; */
+@import '../dialog/dialog.css';

package/styles/forms.css

@@ -0,0 +1,13 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Formulaires : styles de base partagés des champs, chips et switch (tokens + apparence).
+   Nécessite le socle (@ktortu/aaa/foundation.css).
+     @import '@ktortu/aaa/forms.css'; */
+@import '../forms/styles/tokens.css';
+@import '../forms/chips/tokens.css';
+@import '../forms/styles/field-box.css';
+@import '../forms/switch/switch.css';
+@import '../forms/checkbox/checkbox.css';
+@import '../forms/checkbox/checkbox-group.css';
+@import '../forms/radio/radio.css';
+@import '../forms/radio/radio-group.css';

package/styles/foundation.css

@@ -0,0 +1,7 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Socle de design @ktortu/aaa — tokens `--kt-*` dont DÉRIVENT tous les composants.
+   REQUIS, à importer EN PREMIER, avant tout CSS de composant :
+     @import '@ktortu/aaa/foundation.css';
+   Surcharger un seul `--kt-*` (ex. --kt-primary) rebrande toute la lib. */
+@import '../cdk/styles/foundation.css';

package/styles/menu.css

@@ -0,0 +1,6 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Menu (couche de thème kt sur @angular/aria/menu) : tokens + apparence. Nécessite le socle.
+     @import '@ktortu/aaa/menu.css'; */
+@import '../menu/menu-tokens.css';
+@import '../menu/menu.css';

package/styles/styles.css

@@ -0,0 +1,24 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Feuille de styles AGRÉGÉE de @ktortu/aaa — socle + styles de base de tous les composants.
+   Import unique pour le consommateur :  @import '@ktortu/aaa/styles.css';
+   (ou, côté Angular, ajout dans la section "styles" de angular.json).
+
+   Préférez cet import si vous utilisez plusieurs composants. Pour n'embarquer QUE certains
+   composants, importez plutôt le socle + les bundles voulus (cf. README) :
+     @import '@ktortu/aaa/foundation.css';   // requis
+     @import '@ktortu/aaa/menu.css';          // + uniquement ce qui vous intéresse
+
+   ORDRE DE CASCADE garanti ici : socle d'abord, puis chaque bundle composant (qui inclut ses
+   propres tokens). Les THÈMES (theme-*.css) ne sont PAS inclus : optionnels, à importer APRÈS
+   (ex. @import '@ktortu/aaa/themes/theme-material.css';). Le Dialog s'appuie sur l'overlay CDK :
+   importez aussi '@angular/cdk/overlay-prebuilt.css'. */
+
+@import './foundation.css';
+@import './tabs.css';
+@import './forms.css';
+@import './button.css';
+@import './card.css';
+@import './tooltip.css';
+@import './dialog.css';
+@import './menu.css';

package/styles/tabs.css

@@ -0,0 +1,5 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Styles des onglets. Nécessite le socle (@ktortu/aaa/foundation.css).
+     @import '@ktortu/aaa/tabs.css'; */
+@import '../cdk/styles/tabs.css';

package/styles/tooltip.css

@@ -0,0 +1,5 @@
+@layer kt-aaa.tokens, kt-aaa.base, kt-aaa.components;
+
+/* Tooltip (ktTooltip). Nécessite le socle (@ktortu/aaa/foundation.css).
+     @import '@ktortu/aaa/tooltip.css'; */
+@import '../tooltip/tooltip.css';