@ktortu/aaa 0.1.0-beta.0

package/forms/radio/radio-group.css

@@ -0,0 +1,55 @@
+@layer kt-aaa.components {
+  :host {
+    display: block;
+  }
+
+  .kt-radio-group-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, 0.375rem);
+  }
+
+  /* Légende du groupe (référencée par aria-labelledby — PAS un <label for>, c'est un groupe). */
+  .kt-radio-group__legend {
+    font-size: var(--field-label-font-size, 0.875rem);
+    font-weight: var(--field-label-weight, 500);
+    color: var(--field-label-color, inherit);
+  }
+
+  .kt-radio-group__required {
+    margin-inline-start: 0.125rem;
+    color: var(--field-required-color, var(--kt-danger, #8c1d18));
+  }
+
+  /* Disposition des options : pilotable par token (colonne par défaut, ligne possible). */
+  .kt-radio-group__options {
+    display: flex;
+    flex-direction: var(--radio-group-direction, column);
+    flex-wrap: wrap;
+    gap: var(--radio-group-gap, 0.25rem);
+  }
+
+  .kt-radio-group__hint {
+    margin: 0;
+    font-size: var(--field-hint-font-size, 0.8125rem);
+    color: var(--field-hint-color, #474747);
+  }
+
+  .kt-radio-group__error {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--field-hint-font-size, 0.8125rem);
+    color: var(--field-error-color, #8c1d18);
+  }
+
+  .kt-radio-group__error-message {
+    animation: var(--field-error-animation, none);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kt-radio-group__error-message {
+      animation: none;
+    }
+  }
+}

package/forms/radio/radio.css

@@ -0,0 +1,165 @@
+@layer kt-aaa.components {
+  :host {
+    display: block;
+  }
+
+  /* Surface cliquable : remplit tout le host (toute la « carte » est cliquable) avec une cible
+   tactile confortable (AAA 2.5.5). Le rembourrage est piloté par token (`--radio-padding`) pour
+   qu'un consommateur bâtisse une carte sélectionnable sans franchir l'encapsulation ; le rayon
+   est hérité du host pour que survol/sélection épousent les coins arrondis du consommateur. */
+  .kt-radio {
+    display: flex;
+    align-items: center;
+    gap: var(--field-control-gap, 0.5rem);
+    inline-size: 100%;
+    box-sizing: border-box;
+    min-block-size: var(--radio-target-size, 44px);
+    padding: var(--radio-padding, 0);
+    border-radius: inherit;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* Le bouton radio : input natif redessiné, taille pilotée par UN token via `font-size`. */
+  .kt-radio__input {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    flex: none;
+    box-sizing: border-box;
+    display: grid;
+    place-content: center;
+    font-size: var(--radio-size, 1.25rem);
+    inline-size: 1em;
+    block-size: 1em;
+    border: var(--radio-border-width, 2px) solid
+      var(--radio-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));
+    border-radius: 50%;
+    background-color: var(--radio-bg, var(--field-bg, var(--kt-surface, #ffffff)));
+    cursor: pointer;
+    /* Élévation/glow de repos : retombe sur le token de thème des champs (--field-shadow). */
+    box-shadow: var(--radio-shadow, var(--field-shadow, none));
+    transition: var(
+      --radio-transition,
+      background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+      border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.2s ease
+    );
+  }
+
+  /* Le point central : pseudo-élément mis à l'échelle 0 → 1. */
+  .kt-radio__input::before {
+    content: '';
+    inline-size: 0.5em;
+    block-size: 0.5em;
+    border-radius: 50%;
+    transform: scale(0);
+    transform-origin: center;
+    box-shadow: inset 1em 1em var(--radio-dot-color, #ffffff);
+    /* Désélection : repli doux vers scale(0). */
+    transition: var(--radio-dot-transition, transform 0.12s ease-in);
+  }
+
+  /* Sélection : « pop » avec rebond via @keyframes — fiable car déclenché à l'ENTRÉE dans l'état
+   `:checked` (cf. checkbox : une transition ne démarrait pas dans le flux Angular). */
+  .kt-radio__input:checked::before {
+    transform: scale(1);
+    animation: var(--radio-dot-animation, kt-radio-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1));
+  }
+
+  @keyframes kt-radio-pop {
+    from {
+      transform: scale(0);
+    }
+  }
+
+  /* Sélectionné : remplissage plein + HALO coloré dérivé du primaire du thème (glow visible,
+   en fondu via la transition). Surchargeable/désactivable par --radio-shadow-checked. */
+  .kt-radio__input:checked {
+    background-color: var(--radio-bg-checked, var(--kt-primary, #0842a0));
+    border-color: var(--radio-border-color-checked, var(--radio-bg-checked, var(--kt-primary, #0842a0)));
+    box-shadow: var(
+      --radio-shadow-checked,
+      0 0 8px color-mix(in srgb, var(--radio-bg-checked, var(--kt-primary, #0842a0)) 50%, transparent)
+    );
+  }
+
+  /* HOVER : bordure + glow de survol du thème (--field-shadow-hover). */
+  .kt-radio__input:hover:not(:disabled) {
+    border-color: var(--radio-border-color-hover, var(--field-border-color-hover, var(--kt-outline-strong, #5f6368)));
+    box-shadow: var(--radio-shadow-hover, var(--field-shadow-hover, var(--radio-shadow, var(--field-shadow, none))));
+  }
+
+  .kt-radio__input:checked:hover:not(:disabled) {
+    background-color: var(--radio-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black));
+    border-color: var(--radio-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black));
+  }
+
+  /* FOCUS : anneau via `outline` (comme les champs → pas de conflit avec le glow box-shadow), +
+   glow de focus du thème (--field-shadow-focus). L'outline reste visible quel que soit le survol. */
+  .kt-radio__input:focus-visible {
+    outline: var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0842a0);
+    outline-offset: var(--radio-focus-ring-offset, 2px);
+    box-shadow: var(--radio-shadow-focus, var(--field-shadow-focus, var(--field-shadow, none)));
+  }
+
+  /* DÉSACTIVÉ */
+  .kt-radio__input:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .kt-radio:has(.kt-radio__input:disabled) {
+    cursor: not-allowed;
+  }
+
+  /* Libellé */
+  .kt-radio__label {
+    font-size: var(--field-label-font-size, 0.875rem);
+    font-weight: var(--field-label-weight, 500);
+    color: var(--field-label-color, inherit);
+  }
+
+  .kt-radio:has(.kt-radio__input:disabled) .kt-radio__label {
+    color: var(--field-hint-color, #5f6368);
+    opacity: 0.6;
+  }
+
+  /* Hint par option */
+  .kt-radio__hint {
+    margin: 0;
+    margin-inline-start: calc(var(--radio-size, 1.25rem) + var(--field-control-gap, 0.5rem));
+    font-size: var(--field-hint-font-size, 0.8125rem);
+    color: var(--field-hint-color, #474747);
+  }
+
+  /* Mode contraste élevé : restaure le rendu système après `appearance:none`. */
+  @media (forced-colors: active) {
+    .kt-radio__input {
+      border-color: CanvasText;
+      background-color: Canvas;
+    }
+    .kt-radio__input:checked {
+      border-color: Highlight;
+      background-color: Canvas;
+    }
+    .kt-radio__input::before {
+      box-shadow: inset 1em 1em Highlight;
+    }
+    .kt-radio__input:disabled {
+      border-color: GrayText;
+    }
+    .kt-radio__input:focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kt-radio__input,
+    .kt-radio__input::before {
+      transition: none;
+      animation: none;
+    }
+  }
+}

package/forms/styles/field-box.css

@@ -0,0 +1,171 @@
+@layer kt-aaa.components {
+  /* Boîte de contrôle partagée par les champs simples (TextField, NumberField).
+   Globale + classes namespacées : partagée entre plusieurs composants, donc non scopable. */
+  kt-text-field,
+  kt-number-field {
+    display: block;
+  }
+
+  .kt-field-box {
+    display: flex;
+    align-items: center;
+    gap: var(--field-control-gap, 0.5rem);
+    /* border-box : min-height inclut padding + bordure → 44px réels, alignés sur le bouton
+     (qui est déjà en border-box). Sans ça, content-box ajoute padding+bordure → ~62px. */
+    box-sizing: border-box;
+    min-height: var(--field-min-height, 44px); /* hauteur unifiée avec le bouton md */
+    padding: var(--field-padding-y, 0.5rem) var(--field-padding-x, 0.75rem);
+    background: var(--field-bg, #fff);
+    /* Longhands (PAS le shorthand) : width et style acceptent 1 à 4 valeurs (haut droite bas
+     gauche) => bordures par côté (ex. underline `0 0 2px 0`) et styles mixtes (`solid dashed`).
+     --field-border-color reste UNE seule couleur (réutilisée ailleurs, ex. poignée de sheet). */
+    border-width: var(--field-border-width, 1px);
+    border-style: var(--field-border-style, solid);
+    border-color: var(--field-border-color, #c4c7c5);
+    border-radius: var(--field-radius, 8px);
+    color: var(--field-color, inherit);
+    /* Ombres par état : tokens de bascule NON déclarés à :root (cf. tokens.css) => `none` par
+     défaut. hover/focus retombent en cascade sur l'ombre de repos si non définis. */
+    box-shadow: var(--field-shadow, none);
+    /* Translucidité (verre) : bascule => aucun effet par défaut. Un thème pose un --field-bg
+     semi-transparent + blur/saturate ici (cf. theme-liquid-glass). À neutraliser sous
+     prefers-reduced-transparency côté thème. */
+    backdrop-filter: var(--field-backdrop-filter, none);
+    /* Mouvement : bascule => inerte par défaut. Pas de token transform sur la boîte : le trigger
+     du select sert d'ancre (anchor positioning), un transform fausserait le rattachement. */
+    transition: var(--field-transition, none);
+  }
+
+  .kt-field-box:hover {
+    border-color: var(--field-border-color-hover, #5f6368);
+    box-shadow: var(--field-shadow-hover, var(--field-shadow, none));
+  }
+
+  /* Focus visible au niveau de la boîte (l'input lui-même n'a pas de bordure). */
+  .kt-field-box:focus-within {
+    border-color: var(--field-border-color-focus, #0b57d0);
+    outline: var(--field-focus-ring-width, 2px) var(--field-focus-ring-style, solid)
+      var(--field-focus-ring, color-mix(in srgb, var(--field-border-color-focus, #0b57d0) 35%, transparent));
+    outline-offset: var(--field-focus-ring-offset, 1px);
+    box-shadow: var(--field-shadow-focus, var(--field-shadow, none));
+  }
+
+  .kt-field-box[data-invalid] {
+    border-color: var(--field-error-color, #b3261e);
+  }
+
+  .kt-field-box[data-invalid]:focus-within {
+    outline-color: color-mix(in srgb, var(--field-error-color, #b3261e) 35%, transparent);
+  }
+
+  .kt-field-box[data-disabled] {
+    background: var(--field-disabled-bg, #f1f3f4);
+    cursor: not-allowed;
+    box-shadow: none; /* un champ inerte ne « rayonne » pas, quel que soit le thème */
+  }
+
+  .kt-field-box__input {
+    flex: 1;
+    min-width: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    caret-color: var(--field-caret-color, auto); /* bascule (thème terminal, etc.) */
+    padding-inline-end: 0.5rem;
+  }
+
+  .kt-field-box__input:disabled {
+    cursor: not-allowed;
+    color: color-mix(in srgb, currentColor 50%, transparent);
+  }
+
+  /* Datalist : masque la flèche déroulante native (Chromium) sur les champs texte/number. Le
+   pseudo-élément étant partagé avec l'icône de picker des champs date/heure (qui peuvent eux
+   aussi porter un `list`), on restreint aux types concernés pour ne pas masquer leur picker. */
+  .kt-field-box__input[list]:is(
+      [type='text'],
+      [type='email'],
+      [type='password'],
+      [type='search'],
+      [type='tel'],
+      [type='url'],
+      [type='number']
+    )::-webkit-calendar-picker-indicator {
+    display: none !important;
+  }
+
+  .kt-field-box__affix {
+    flex: none;
+    color: var(--field-hint-color, #5f6368);
+  }
+
+  /* Icône via ligature de police d'icône (même mécanisme que Button). Police configurable :
+   --field-icon-font (par champ) > --kt-icon-font (global) > Material Symbols. Pour un set
+   NON-ligature (ex. Font Awesome), passer par `prefix`/`suffix` (TemplateRef). */
+  .kt-field-box__icon {
+    flex: none;
+    font-family: var(--field-icon-font, var(--kt-icon-font, 'Material Symbols Outlined'));
+    font-weight: var(--field-icon-font-weight, var(--kt-icon-font-weight, normal));
+    font-style: normal;
+    font-size: 1.25em;
+    line-height: 1;
+    font-feature-settings: 'liga';
+    color: var(--field-icon-color, #5f6368);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Le bouton « effacer » est une icône INTERNE de la lib : toujours Material Symbols,
+   indépendante de --kt-icon-font (sinon un override consommateur casserait la croix). */
+  .kt-field-box__clear .kt-field-box__icon {
+    font-family: 'Material Symbols Outlined';
+    font-weight: normal;
+  }
+
+  .kt-field-box__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--field-icon-color, #5f6368);
+    cursor: pointer;
+    position: relative; /* requis pour le positionnement de ::after */
+  }
+
+  /* Cible tactile AAA 44x44px étendue via un pseudo-élément transparent */
+  .kt-field-box__clear::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 44px;
+    height: 44px;
+  }
+
+  .kt-field-box__clear:hover {
+    color: var(--field-color, inherit);
+  }
+
+  .kt-field-box__clear:focus-visible {
+    outline: 2px solid var(--field-border-color-focus, #0b57d0);
+    outline-offset: 1px;
+  }
+
+  /* Multi-ligne (textarea) : affixes et clear s'alignent en haut, pas au centre. */
+  .kt-field-box[data-multiline] {
+    align-items: flex-start;
+  }
+
+  textarea.kt-field-box__input {
+    /* Autosize natif (navigateurs récents) ; `rows` = hauteur initiale ;
+     repli sur navigateurs sans field-sizing : redimensionnement manuel vertical. */
+    field-sizing: content;
+    resize: vertical;
+  }
+}