@ktortu/aaa 0.1.0-beta.0

package/forms/checkbox/checkbox.css

@@ -0,0 +1,216 @@
+@layer kt-aaa.components {
+  :host {
+    display: block;
+  }
+
+  .kt-checkbox-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, 0.375rem);
+  }
+
+  /* Surface cliquable (label) : remplit tout le host, cible tactile confortable (AAA 2.5.5) sur
+   toute la rangée. Rembourrage par token (`--checkbox-padding`) pour bâtir une carte/option
+   cliquable sans franchir l'encapsulation ; rayon hérité du host. */
+  .kt-checkbox {
+    display: flex;
+    align-items: center;
+    gap: var(--field-control-gap, 0.5rem);
+    inline-size: 100%;
+    box-sizing: border-box;
+    min-block-size: var(--checkbox-target-size, 44px);
+    padding: var(--checkbox-padding, 0);
+    border-radius: inherit;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /* La case elle-même : input natif redessiné. Taille pilotée par UN token via `font-size`
+   (la box et la coche s'expriment en `em`, donc tout suit `--checkbox-size`). */
+  .kt-checkbox__input {
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    flex: none;
+    box-sizing: border-box;
+    display: grid;
+    place-content: center;
+    font-size: var(--checkbox-size, 1.25rem);
+    inline-size: 1em;
+    block-size: 1em;
+    border: var(--checkbox-border-width, 2px) solid
+      var(--checkbox-border-color, var(--field-border-color, var(--kt-outline, #c4c7c5)));
+    border-radius: var(--checkbox-radius, 0.25rem);
+    background-color: var(--checkbox-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) pour que
+     la case « rayonne » comme les champs sous un thème (aurora, cyberpunk…). `none` par défaut. */
+    box-shadow: var(--checkbox-shadow, var(--field-shadow, none));
+    /* Token de BASCULE (cf. --switch-transition) : transitionne aussi box-shadow pour animer le glow. */
+    transition: var(
+      --checkbox-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
+    );
+  }
+
+  /* La coche : pseudo-élément masqué par clip-path, mis à l'échelle 0 → 1.
+   `box-shadow: inset` remplit la forme de la couleur de coche (technique cross-browser fiable). */
+  .kt-checkbox__input::before {
+    content: '';
+    inline-size: 0.65em;
+    block-size: 0.65em;
+    transform: scale(0);
+    transform-origin: center;
+    box-shadow: inset 1em 1em var(--checkbox-mark-color, #ffffff);
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+    /* Décochage : repli doux vers scale(0). */
+    transition: var(--checkbox-mark-transition, transform 0.12s ease-in);
+  }
+
+  /* Cochage : « pop » avec rebond via @keyframes — fiable car déclenché à l'ENTRÉE dans l'état
+   `:checked` (une transition, elle, exige un diff de valeur entre deux recalculs, que la
+   ré-écriture de `checked` par Angular écrase → elle ne démarrait pas). */
+  .kt-checkbox__input:checked::before,
+  .kt-checkbox__input:indeterminate::before {
+    transform: scale(1);
+    animation: var(--checkbox-mark-animation, kt-checkbox-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1));
+  }
+
+  /* État indéterminé : une barre horizontale au lieu de la coche. */
+  .kt-checkbox__input:indeterminate::before {
+    clip-path: inset(42% 12%);
+  }
+
+  @keyframes kt-checkbox-pop {
+    from {
+      transform: scale(0);
+    }
+  }
+
+  /* États COCHÉ / INDÉTERMINÉ : remplissage plein + HALO coloré dérivé du primaire du thème
+   (« glow » visible dans tous les thèmes ; apparaît en fondu via la transition box-shadow).
+   Surchargeable/désactivable par thème via --checkbox-shadow-checked. */
+  .kt-checkbox__input:checked,
+  .kt-checkbox__input:indeterminate {
+    background-color: var(--checkbox-bg-checked, var(--kt-primary, #0842a0));
+    border-color: var(--checkbox-border-color-checked, var(--checkbox-bg-checked, var(--kt-primary, #0842a0)));
+    box-shadow: var(
+      --checkbox-shadow-checked,
+      0 0 8px color-mix(in srgb, var(--checkbox-bg-checked, var(--kt-primary, #0842a0)) 50%, transparent)
+    );
+  }
+
+  /* HOVER : bordure + glow de survol du thème (--field-shadow-hover). */
+  .kt-checkbox__input:hover:not(:disabled) {
+    border-color: var(
+      --checkbox-border-color-hover,
+      var(--field-border-color-hover, var(--kt-outline-strong, #5f6368))
+    );
+    box-shadow: var(
+      --checkbox-shadow-hover,
+      var(--field-shadow-hover, var(--checkbox-shadow, var(--field-shadow, none)))
+    );
+  }
+
+  .kt-checkbox__input:checked:hover:not(:disabled),
+  .kt-checkbox__input:indeterminate:hover:not(:disabled) {
+    background-color: var(--checkbox-bg-checked-hover, color-mix(in srgb, var(--kt-primary, #0842a0) 90%, black));
+    border-color: var(--checkbox-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-checkbox__input:focus-visible {
+    outline: var(--kt-focus-ring-width, 2px) solid var(--kt-focus-ring-color, #0842a0);
+    outline-offset: var(--checkbox-focus-ring-offset, 2px);
+    box-shadow: var(--checkbox-shadow-focus, var(--field-shadow-focus, var(--field-shadow, none)));
+  }
+
+  /* DÉSACTIVÉ */
+  .kt-checkbox__input:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .kt-checkbox-field--disabled .kt-checkbox {
+    cursor: not-allowed;
+  }
+
+  /* INVALIDE */
+  .kt-checkbox-field--invalid .kt-checkbox__input:not(:checked):not(:indeterminate) {
+    border-color: var(--field-error-color, var(--kt-danger, #8c1d18));
+  }
+
+  /* Libellé */
+  .kt-checkbox__label {
+    font-size: var(--field-label-font-size, 0.875rem);
+    font-weight: var(--field-label-weight, 500);
+    color: var(--field-label-color, inherit);
+  }
+
+  .kt-checkbox-field--disabled .kt-checkbox__label {
+    color: var(--field-hint-color, #5f6368);
+    opacity: 0.6;
+  }
+
+  .kt-checkbox__required {
+    margin-inline-start: 0.125rem;
+    color: var(--field-required-color, var(--kt-danger, #8c1d18));
+  }
+
+  /* Hint & erreur */
+  .kt-checkbox-hint {
+    margin: 0;
+    font-size: var(--field-hint-font-size, 0.8125rem);
+    color: var(--field-hint-color, #474747);
+  }
+
+  .kt-checkbox-error {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--field-hint-font-size, 0.8125rem);
+    color: var(--field-error-color, #8c1d18);
+  }
+
+  .kt-checkbox-error-message {
+    animation: var(--field-error-animation, none);
+  }
+
+  /* Mode contraste élevé (Windows) : `appearance:none` casse le rendu système → on le restaure
+   avec les couleurs système (obligatoire RGAA dès qu'on redessine un contrôle natif). */
+  @media (forced-colors: active) {
+    .kt-checkbox__input {
+      border-color: CanvasText;
+      background-color: Canvas;
+    }
+    .kt-checkbox__input:checked,
+    .kt-checkbox__input:indeterminate {
+      background-color: Highlight;
+      border-color: Highlight;
+    }
+    .kt-checkbox__input::before {
+      box-shadow: inset 1em 1em HighlightText;
+    }
+    .kt-checkbox__input:disabled {
+      border-color: GrayText;
+    }
+    .kt-checkbox__input:focus-visible {
+      outline: 2px solid CanvasText;
+      outline-offset: 2px;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kt-checkbox__input,
+    .kt-checkbox__input::before {
+      transition: none;
+      animation: none;
+    }
+    .kt-checkbox-error-message {
+      animation: none;
+    }
+  }
+}

package/forms/chips/chip-list.css

@@ -0,0 +1,70 @@
+@layer kt-aaa.components {
+  :host {
+    display: block;
+  }
+
+  .kt-chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  /* Porte le role="list" sans créer de contexte de mise en page : chips et bouton « +N more »
+   restent dans la même rangée flex de .kt-chip-list. */
+  .kt-chip-list__items {
+    display: contents;
+  }
+
+  /* Wrapper transparent : le rôle listitem est porté ici, le rendu vient du template custom
+   ou du bouton « +N more ». */
+  .kt-chip-list__item {
+    display: contents;
+  }
+
+  /* Bouton de repli/dépli : même habillage pilule que kt-chip (dupliqué : c'est un bouton,
+   pas un chip — il ne partage pas l'hôte du composant Chip). */
+  .kt-chip-list__more {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--chip-gap);
+    padding: var(--chip-padding-y) var(--chip-padding-x);
+    border-radius: var(--chip-radius);
+    background: var(--chip-bg);
+    border: 1px solid var(--chip-border);
+    box-shadow: var(--chip-shadow, none);
+    font: inherit;
+    font-size: var(--chip-font-size);
+    color: var(--chip-color);
+    cursor: pointer;
+    min-block-size: 24px;
+  }
+
+  .kt-chip-list__more:hover {
+    background: var(--chip-bg-hover);
+    box-shadow: var(--chip-shadow-hover, var(--chip-shadow, none));
+  }
+
+  .kt-chip-list__more:focus-visible {
+    outline: 2px solid var(--chip-focus-ring);
+    outline-offset: 1px;
+  }
+
+  /* Texte réservé aux lecteurs d'écran (live region des retraits). */
+  .kt-chip-list__status {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (pointer: coarse) {
+    .kt-chip-list__more {
+      min-block-size: 32px;
+    }
+  }
+}

package/forms/chips/chip.css

@@ -0,0 +1,92 @@
+@layer kt-aaa.components {
+  /* Pilule. Tokens centralisés dans forms/chips/tokens.css */
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--chip-gap);
+    padding: var(--chip-padding-y) var(--chip-padding-x);
+    border-radius: var(--chip-radius);
+    background: var(--chip-bg);
+    border: 1px solid var(--chip-border);
+    box-shadow: var(--chip-shadow, none);
+    font-size: var(--chip-font-size);
+    color: var(--chip-color);
+  }
+
+  .kt-chip__label {
+    max-inline-size: 12rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* 24px visibles (WCAG 2.5.8 AA) ; cible réelle 44px via ::after transparent (AAA),
+   même technique que les boutons icon-only — le chip reste fin visuellement. */
+  .kt-chip__remove {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--chip-remove-color);
+    cursor: pointer;
+    font-size: 0.75rem;
+    /* Token de BASCULE (non déclaré => hover actuel). Contrat : forms/chips/tokens.css. */
+    transition: var(--chip-remove-transition, background-color 0.15s ease);
+  }
+
+  .kt-chip__remove::after {
+    content: '';
+    position: absolute;
+    inset: -10px;
+  }
+
+  .kt-chip__remove:hover {
+    background-color: var(--chip-remove-bg-hover);
+    color: var(--chip-remove-color-hover);
+  }
+
+  :host(:hover) {
+    box-shadow: var(--chip-shadow-hover, var(--chip-shadow, none));
+  }
+
+  .kt-chip__remove:focus-visible {
+    outline: 2px solid var(--chip-focus-ring);
+    outline-offset: 1px;
+  }
+
+  .kt-chip__remove:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .kt-chip__close-icon {
+    font-family: 'Material Symbols Outlined';
+    font-feature-settings: 'liga';
+    font-size: 1rem;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Tactile : à peine plus généreux (32px), la cible 44px vient du ::after invisible. */
+  @media (pointer: coarse) {
+    :host {
+      min-block-size: 32px;
+    }
+
+    .kt-chip__remove {
+      inline-size: 28px;
+      block-size: 28px;
+      font-size: 0.875rem;
+    }
+
+    .kt-chip__remove::after {
+      inset: -8px;
+    }
+  }
+}

package/forms/chips/tokens.css

@@ -0,0 +1,102 @@
+/* Design tokens du composant Chip — contrat public de theming.
+   Les couleurs et géométries dérivent du socle (--kt-*) et des champs (--field-*). */
+@layer kt-aaa.tokens {
+  :root {
+    /* Géométrie */
+    --chip-radius: 50px;
+    --chip-padding-y: 0.25rem;
+    --chip-padding-x: 0.625rem;
+    --chip-gap: 0.25rem;
+    --chip-font-size: 0.875rem;
+
+    /* Couleurs (dérivées de ds-primary) */
+    --chip-bg: color-mix(in srgb, var(--kt-primary) 10%, transparent);
+    --chip-bg-hover: color-mix(in srgb, var(--kt-primary) 18%, transparent);
+    --chip-border: color-mix(in srgb, var(--kt-primary) 20%, transparent);
+
+    /* Texte et icônes */
+    --chip-color: var(--field-color);
+    --chip-remove-color: var(--field-icon-color);
+    --chip-remove-color-hover: var(--kt-danger); /* rouge au survol du bouton × */
+    --chip-remove-bg-hover: color-mix(in srgb, currentColor 15%, transparent);
+
+    /* Animations d'entrée/sortie : keyframes jouées sur les PSEUDO-ÉLÉMENTS View Transition
+     (cf. règles ::view-transition-* plus bas), PAS sur les chips eux-mêmes — la suppression
+     DOM reste synchrone (indispensable : un retrait différé casse la capture de l'état
+     « après » et tue la transition en plein vol). Les keyframes d'un thème ne doivent animer
+     que transform / opacity / filter : la géométrie (largeur, position) est déjà morphée par
+     l'animation de groupe. Défaut : fondu équivalent à celui du navigateur. */
+    --chip-enter-animation: chip-vt-fade-in 0.25s ease both;
+    --chip-leave-animation: chip-vt-fade-out 0.25s ease both;
+
+    /* Focus */
+    --chip-focus-ring: var(--field-border-color-focus);
+
+    /* Token de BASCULE (NON déclaré exprès, cf. button-tokens.css) :
+     --chip-remove-transition — transition du bouton « retirer » au survol
+     (défaut : background-color 0.15s ease, posé dans chip.css). */
+  }
+
+  /* ============ Intégration View Transition (API document.startViewTransition) ============
+   Chaque chip porte un view-transition-name unique + la classe .chip-transition (cf. Chip).
+   Ces règles ciblent les pseudo-éléments de la transition, rattachés à la racine du document :
+   elles doivent vivre dans une feuille GLOBALE (les styles de composant scopés ne les
+   atteignent pas). Les tokens --chip-*-animation y sont résolus par héritage depuis <html>,
+   donc surchargeables par thème ([data-theme='…']). */
+
+  @keyframes chip-vt-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes chip-vt-fade-out {
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* Chips à template custom (ktChipItem / chipTemplate) : la lib ne rend pas kt-chip,
+   c'est l'élément RACINE du template consommateur qui reçoit un nom automatique → il
+   participe aux mêmes animations (entrée/sortie/morph) que les chips standards.
+   Scopé à [data-vt-active] (posé par ChipList UNIQUEMENT pendant SA transition) : un nom
+   permanent ferait participer tous les chips de la page à chaque View Transition —
+   glissement individuel au moindre reflow (même principe que le gating de kt-chip).
+   Surcharge consommateur : redéclarer view-transition-name sur son élément —
+   `none` = opt-out, un nom explicite = chorégraphie maison ; ou une autre
+   view-transition-class pour des keyframes dédiées. Le bouton « +N » (dans le même
+   wrapper) n'est pas concerné : son nom est posé en style inline (prioritaire).
+   Navigateurs sans `view-transition-name: auto` : dégradation = pas d'animation
+   par chip (comportement antérieur), le reste de la transition est inchangé. */
+  [data-vt-active] .kt-chip-list__item > * {
+    /* Double déclaration volontaire : `match-element` (Chrome 140+) prime quand il est
+     compris, sinon retombée sur `auto` (spec antérieure) ; aucun des deux compris =
+     déclaration ignorée (dégradation propre). */
+    view-transition-name: auto;
+    view-transition-name: match-element;
+    view-transition-class: chip-transition;
+  }
+
+  /* Chip qui APPARAÎT (présent uniquement dans l'état « après ») : animation d'entrée. */
+  ::view-transition-new(.chip-transition):only-child {
+    animation: var(--chip-enter-animation);
+  }
+
+  /* Chip qui DISPARAÎT (présent uniquement dans l'état « avant ») : animation de sortie. */
+  ::view-transition-old(.chip-transition):only-child {
+    animation: var(--chip-leave-animation);
+  }
+
+  /* Chip qui PERSISTE (déplacement) : pas de cross-fade — l'ancienne image est masquée, la
+   nouvelle (rendu live) suit le morph de géométrie du groupe. Évite le scintillement
+   plus-lighter quand le contenu is identique mais que les ombres du thème bougent. */
+  ::view-transition-old(.chip-transition):not(:only-child) {
+    animation: none;
+    opacity: 0;
+  }
+
+  ::view-transition-new(.chip-transition):not(:only-child) {
+    animation: none;
+    opacity: 1;
+  }
+}

package/forms/field/field.css

@@ -0,0 +1,87 @@
+@layer kt-aaa.components {
+  /* Field = chrome seul (empilement label / contrôle / hint / erreur).
+   Le visuel du contrôle (bordure, focus) appartient au composant de champ, pas ici. */
+  :host {
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap, 0.375rem);
+    font-size: var(--field-font-size, 1rem);
+    color: var(--field-color, inherit);
+  }
+
+  .kt-field__header {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .kt-field__label {
+    font-size: var(--field-label-font-size, 0.875rem);
+    font-weight: var(--field-label-weight, 500);
+    text-transform: var(--field-label-transform, none);
+    letter-spacing: var(--field-label-letter-spacing, normal);
+    color: var(--field-label-color, inherit);
+  }
+
+  .kt-field__help {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--field-icon-color, #474747);
+    cursor: pointer;
+    position: relative; /* requis pour le positionnement de ::after */
+  }
+
+  /* Zone de clic étendue à 44x44px (AAA 2.5.5) via un pseudo-élément transparent */
+  .kt-field__help::after {
+    content: '';
+    position: absolute;
+    inset: -12px;
+  }
+
+  .kt-field__help-icon {
+    font-family: 'Material Symbols Outlined';
+    font-size: 1.25rem;
+    line-height: 1;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .kt-field__required {
+    margin-inline-start: 0.125rem;
+    color: var(--field-required-color, #8c1d18);
+  }
+
+  .kt-field__hint {
+    margin: 0;
+    font-size: var(--field-hint-font-size, 0.8125rem);
+    color: var(--field-hint-color, #474747);
+  }
+
+  /* Pas de hauteur réservée quand vide (contre-pied du subscript fantôme de Material) ;
+   l'élément reste dans le DOM pour rester une région live. */
+  .kt-field__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 : token de BASCULE (non déclaré => aucune animation).
+   Sur le MESSAGE (inséré à l'invalidation) — PAS sur le conteneur, qui vit en permanence
+   (région live). Keyframes de thème : transform/opacity/filter seulement (les spans sont
+   des flex items, donc transformables). Même token consommé par kt-switch (switch.css). */
+  .kt-field__error-message {
+    animation: var(--field-error-animation, none);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .kt-field__error-message {
+      animation: none;
+    }
+  }
+}

package/forms/multi-select/multi-select.css

@@ -0,0 +1,136 @@
+@layer kt-aaa.components {
+  /* Styles SPÉCIFIQUES au multi-select. Tout le panneau commun (trigger, popup, listbox, options,
+   filtre, bottom-sheet mobile) vient de ../styles/select-panel.css, chargé en premier via
+   styleUrls — ici uniquement : croix « tout effacer », barre d'actions, compteur, checkboxes
+   d'option et chips révocables. */
+
+  /* Réserve la place de la croix (sibling absolu) : sur le TEXTE, pas sur le padding du
+   trigger — la flèche reste collée au bord, la croix se glisse entre texte et flèche. */
+  .kt-select__trigger--clearable .kt-select__value {
+    margin-inline-end: 2rem;
+  }
+
+  /* Tout effacer : entre le texte et la flèche, disposition standard « texte … ✕ ▾ ».
+   24px visibles ; cible étendue à 44px via ::after transparent (AAA). */
+  .kt-select__clear {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-end: 2.5rem;
+    translate: 0 -50%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 24px;
+    block-size: 24px;
+    padding: 0;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--field-icon-color, #5f6368);
+    cursor: pointer;
+  }
+
+  .kt-select__clear::after {
+    content: '';
+    position: absolute;
+    inset: -10px;
+  }
+
+  .kt-select__clear:hover {
+    background-color: color-mix(in srgb, currentColor 12%, transparent);
+    color: var(--field-color, inherit);
+  }
+
+  .kt-select__clear:focus-visible {
+    outline: 2px solid var(--field-border-color-focus, #0b57d0);
+    outline-offset: 1px;
+  }
+
+  .kt-select__clear-icon {
+    font-family: 'Material Symbols Outlined';
+    font-feature-settings: 'liga';
+    font-size: 1.25rem;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* Barre d'actions de masse (Tout sélectionner / Tout effacer) en tête de panneau. */
+  .kt-select__actions {
+    display: flex;
+    gap: 0.25rem;
+    flex: none;
+    padding: 0.25rem 0.5rem;
+    border-block-end: 1px solid var(--field-border-color, #c4c7c5);
+  }
+
+  .kt-select__action {
+    flex: 1;
+    min-block-size: 44px;
+    padding: 0.375rem 0.625rem;
+    border: 0;
+    border-radius: calc(var(--field-radius, 8px) * 0.75);
+    background: transparent;
+    color: var(--kt-primary, #0b57d0);
+    font: inherit;
+    font-weight: 500;
+    cursor: pointer;
+  }
+
+  .kt-select__action:hover {
+    background: var(--select-option-hover-bg, color-mix(in srgb, currentColor 8%, transparent));
+  }
+
+  .kt-select__action:focus-visible {
+    outline: 2px solid var(--field-border-color-focus, #0b57d0);
+    outline-offset: -2px;
+  }
+
+  /* Compteur de sélection visible (info SR portée par la live region → aria-hidden). */
+  .kt-select__count {
+    flex: none;
+    padding: 0.25rem 0.75rem;
+    font-size: 0.8125rem;
+    color: var(--field-hint-color, #5f6368);
+    border-block-end: 1px solid var(--field-border-color, #c4c7c5);
+  }
+
+  /* Checkbox visuelle dans la liste */
+  .kt-select__checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    margin-inline-end: 0.25rem;
+    user-select: none;
+  }
+
+  .kt-select__checkbox-icon {
+    font-family: 'Material Symbols Outlined';
+    font-feature-settings: 'liga';
+    font-size: 1.25rem;
+    line-height: 1;
+    color: var(--field-icon-color, #5f6368);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .kt-select__option[aria-selected='true'] .kt-select__checkbox-icon {
+    color: var(--kt-primary, #0b57d0);
+  }
+
+  .kt-select__option--multiple {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .kt-select__option-content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  /* Chips délégués au composant kt-chip-list (hôte toujours rendu : la marge ne
+   s'applique que lorsqu'il y a des chips, via l'attribut data-empty). */
+  kt-chip-list:not([data-empty]) {
+    margin-block-start: 0.5rem;
+  }
+}