@besaitech/ng-design-system-mcp 0.0.11 → 0.0.13

package/data/docs.json

@@ -1,10 +1,10 @@
 {
   "schemaVersion": "1.0.0",
-  "libraryVersion": "0.0.41",
+  "libraryVersion": "0.0.44",
   "packageName": "@besaitech/ng-design-system",
   "devImport": "saitech-design-system",
-  "generatedAt": "2026-09-15T12:45:18.055Z",
-  "componentCount": 33,
+  "generatedAt": "2026-09-20T21:22:32.121Z",
+  "componentCount": 34,
   "components": [
     {
       "className": "SdsAccordion",
@@ -1576,6 +1576,405 @@
         }
       ]
     },
+    {
+      "className": "SdsInputNumber",
+      "selector": "sds-input-number",
+      "kind": "component",
+      "group": "form",
+      "importName": "SdsInputNumber",
+      "description": "Champ numérique avec formatage localisé, devise, préfixe/suffixe, bornes min/max/pas et boutons d'incrément. La valeur est un number | null via ControlValueAccessor. Le formatage est appliqué en direct pendant la saisie : symbole monétaire, séparateurs de milliers et affixes restent visibles, et le curseur est préservé.",
+      "overviewDescription": "Saisie numérique : devise, préfixe/suffixe, bornes et incrémenteur.",
+      "jsdoc": "Numeric input with locale-aware formatting, optional currency, prefix/suffix affixes, min/max/step\nboundaries and spinner buttons — the design-system counterpart of PrimeNG's `InputNumber`.\n\nThe value is a `number | null` bound through ControlValueAccessor, so it works with reactive forms\nor `[(ngModel)]`: `<sds-input-number [(ngModel)]=\"amount\" mode=\"currency\" currency=\"EUR\" />`.\n\nThe field formats **live as you type**: the currency symbol, grouping separators and prefix/suffix\nstay visible on every keystroke, and the caret is kept where it belongs. The value is clamped to\n{@link min}/{@link max} on blur and on every spinner step; ArrowUp / ArrowDown also step it.",
+      "example": null,
+      "cva": true,
+      "usesNgModel": true,
+      "inputs": [
+        {
+          "name": "label",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "Accessible name used when no visible [label] is provided."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "hint",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "error",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "size",
+          "type": "SdsInputNumberSize",
+          "default": "'md'",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "appearance",
+          "type": "SdsInputNumberAppearance",
+          "default": "'default'",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "`filled` is a borderless field on a muted ground; `default` is the bordered white field."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "required": false,
+          "transform": "booleanAttribute",
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "default": "false",
+          "required": false,
+          "transform": "booleanAttribute",
+          "alias": null,
+          "jsdoc": "Read-only: the value is shown and selectable but cannot be typed or stepped."
+        },
+        {
+          "name": "mode",
+          "type": "SdsInputNumberMode",
+          "default": "'decimal'",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "locale",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "BCP 47 locale for grouping/decimal symbols (e.g. `fr-FR`). Empty follows the runtime locale."
+        },
+        {
+          "name": "currency",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "ISO 4217 code, required when {@link mode} is `currency` (e.g. `EUR`, `USD`)."
+        },
+        {
+          "name": "currencyDisplay",
+          "type": "SdsInputNumberCurrencyDisplay",
+          "default": "'symbol'",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "useGrouping",
+          "type": "boolean",
+          "default": "true",
+          "required": false,
+          "transform": "booleanAttribute",
+          "alias": null,
+          "jsdoc": "Thousands/grouping separators."
+        },
+        {
+          "name": "minFractionDigits",
+          "type": "number | null",
+          "default": "null",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "maxFractionDigits",
+          "type": "number | null",
+          "default": "null",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "prefix",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "Text shown before the value (e.g. `↑ `)."
+        },
+        {
+          "name": "suffix",
+          "type": "string",
+          "default": "''",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "Text shown after the value (e.g. ` kg`, `%`)."
+        },
+        {
+          "name": "min",
+          "type": "number | null",
+          "default": "null",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "max",
+          "type": "number | null",
+          "default": "null",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "step",
+          "type": "number",
+          "default": "1",
+          "required": false,
+          "transform": "numberAttribute",
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "showButtons",
+          "type": "boolean",
+          "default": "false",
+          "required": false,
+          "transform": "booleanAttribute",
+          "alias": null,
+          "jsdoc": "Show the increment/decrement spinner buttons."
+        },
+        {
+          "name": "buttonLayout",
+          "type": "SdsInputNumberButtonLayout",
+          "default": "'stacked'",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "incrementIcon",
+          "type": "SdsIconName | null",
+          "default": "null",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "Override the increment button icon (defaults: chevron-up when stacked, plus otherwise)."
+        },
+        {
+          "name": "decrementIcon",
+          "type": "SdsIconName | null",
+          "default": "null",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "Override the decrement button icon (defaults: chevron-down when stacked, minus otherwise)."
+        },
+        {
+          "name": "allowEmpty",
+          "type": "boolean",
+          "default": "true",
+          "required": false,
+          "transform": "booleanAttribute",
+          "alias": null,
+          "jsdoc": "Allow an empty (null) value. When false, blurring an empty field falls back to {@link min} or 0."
+        },
+        {
+          "name": "clearable",
+          "type": "boolean",
+          "default": "false",
+          "required": false,
+          "transform": "booleanAttribute",
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "clearLabel",
+          "type": "string",
+          "default": "'Effacer'",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": "Accessible names for the icon-only controls. French defaults so existing consumers are unchanged;\ntranslate them in a multi-language app."
+        },
+        {
+          "name": "incrementLabel",
+          "type": "string",
+          "default": "'Augmenter'",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        },
+        {
+          "name": "decrementLabel",
+          "type": "string",
+          "default": "'Diminuer'",
+          "required": false,
+          "transform": null,
+          "alias": null,
+          "jsdoc": null
+        }
+      ],
+      "outputs": [],
+      "exportedTypes": [
+        {
+          "name": "SdsInputNumberSize",
+          "kind": "union",
+          "body": "'sm' | 'md' | 'lg'"
+        },
+        {
+          "name": "SdsInputNumberAppearance",
+          "kind": "union",
+          "body": "'default' | 'filled'"
+        },
+        {
+          "name": "SdsInputNumberMode",
+          "kind": "union",
+          "body": "'decimal' | 'currency'"
+        },
+        {
+          "name": "SdsInputNumberCurrencyDisplay",
+          "kind": "union",
+          "body": "'symbol' | 'code' | 'name'"
+        },
+        {
+          "name": "SdsInputNumberButtonLayout",
+          "kind": "union",
+          "body": "'stacked' | 'horizontal' | 'vertical'"
+        }
+      ],
+      "projectionSlots": [],
+      "hostBindings": {
+        "class": "block"
+      },
+      "examples": [
+        {
+          "sectionTitle": "Basique",
+          "sectionDescription": "Regroupement des milliers selon la locale ; la valeur émise reste un nombre simple.",
+          "code": "<sds-input-number label=\"Lits disponibles\" [(ngModel)]=\"beds\" />\n\n// beds = 42723;  →  affiché « 42 723 »",
+          "runnableExample": "<sds-input-number label=\"Lits disponibles\" [(ngModel)]=\"beds\" />",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Devise",
+          "sectionDescription": "mode='currency' avec un code ISO 4217 ; currencyDisplay choisit le symbole, le code ou le nom.",
+          "code": "<sds-input-number\n  label=\"Budget mensuel\"\n  mode=\"currency\"\n  currency=\"EUR\"\n  locale=\"fr-FR\"\n  [(ngModel)]=\"budget\"\n/>\n<sds-input-number\n  label=\"Facturation (US)\"\n  mode=\"currency\"\n  currency=\"USD\"\n  currencyDisplay=\"code\"\n  locale=\"en-US\"\n  [(ngModel)]=\"invoice\"\n/>",
+          "runnableExample": "<sds-input-number\n            label=\"Budget mensuel\"\n            mode=\"currency\"\n            currency=\"EUR\"\n            locale=\"fr-FR\"\n            [(ngModel)]=\"budget\"\n          />\n          <sds-input-number\n            label=\"Facturation (US)\"\n            mode=\"currency\"\n            currency=\"USD\"\n            currencyDisplay=\"code\"\n            locale=\"en-US\"\n            [(ngModel)]=\"invoice\"\n          />",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Préfixe & suffixe",
+          "sectionDescription": "Des affixes texte pour les pourcentages, unités ou libellés — sur un nombre simple.",
+          "code": "<sds-input-number label=\"Taux d'occupation\" suffix=\" %\" [min]=\"0\" [max]=\"100\" [(ngModel)]=\"occupancy\" />\n<sds-input-number label=\"Poids du patient\" suffix=\" kg\" [minFractionDigits]=\"1\" [(ngModel)]=\"weight\" />\n<sds-input-number label=\"Température\" prefix=\"↑ \" suffix=\" ℃\" [(ngModel)]=\"temperature\" />",
+          "runnableExample": "<sds-input-number label=\"Taux d'occupation\" suffix=\" %\" [min]=\"0\" [max]=\"100\" [(ngModel)]=\"occupancy\" />\n          <sds-input-number label=\"Poids du patient\" suffix=\" kg\" [minFractionDigits]=\"1\" [(ngModel)]=\"weight\" />\n          <sds-input-number label=\"Température\" prefix=\"↑ \" suffix=\" ℃\" [(ngModel)]=\"temperature\" />",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Bornes & pas",
+          "sectionDescription": "min, max et step encadrent la valeur ; le dépassement est corrigé à la validation et à chaque incrément.",
+          "code": "<sds-input-number\n  label=\"Dose (0–10, pas 0,5)\"\n  [min]=\"0\"\n  [max]=\"10\"\n  [step]=\"0.5\"\n  showButtons\n  [(ngModel)]=\"dose\"\n/>",
+          "runnableExample": "<sds-input-number\n            label=\"Dose (0–10, pas 0,5)\"\n            [min]=\"0\"\n            [max]=\"10\"\n            [step]=\"0.5\"\n            showButtons\n            [(ngModel)]=\"dose\"\n          />",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Boutons",
+          "sectionDescription": "showButtons ajoute un incrémenteur ; buttonLayout le dispose en pile, à l'horizontale ou à la verticale.",
+          "code": "<sds-input-number label=\"Empilé\" showButtons [(ngModel)]=\"qty\" />\n<sds-input-number label=\"Horizontal\" showButtons buttonLayout=\"horizontal\" [(ngModel)]=\"qty\" />\n<sds-input-number label=\"Vertical\" showButtons buttonLayout=\"vertical\" [(ngModel)]=\"qty\" />",
+          "runnableExample": "<sds-input-number label=\"Empilé\" showButtons [(ngModel)]=\"qtyStacked\" />\n          <sds-input-number label=\"Horizontal\" showButtons buttonLayout=\"horizontal\" [(ngModel)]=\"qtyHorizontal\" />\n          <sds-input-number label=\"Vertical\" showButtons buttonLayout=\"vertical\" [(ngModel)]=\"qtyVertical\" />",
+          "stack": false,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Décimales & groupement",
+          "sectionDescription": "minFractionDigits / maxFractionDigits contrôlent la précision ; useGrouping='false' retire les séparateurs.",
+          "code": "<sds-input-number\n  label=\"Résultat de laboratoire\"\n  [minFractionDigits]=\"2\"\n  [maxFractionDigits]=\"4\"\n  [(ngModel)]=\"labResult\"\n/>\n<sds-input-number label=\"Référence dossier\" [useGrouping]=\"false\" [(ngModel)]=\"reference\" />",
+          "runnableExample": "<sds-input-number\n            label=\"Résultat de laboratoire\"\n            [minFractionDigits]=\"2\"\n            [maxFractionDigits]=\"4\"\n            [(ngModel)]=\"labResult\"\n          />\n          <sds-input-number label=\"Référence dossier\" [useGrouping]=\"false\" [(ngModel)]=\"reference\" />",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Effaçable",
+          "sectionDescription": "clearable affiche un bouton d'effacement quand une valeur est saisie.",
+          "code": "<sds-input-number\n  label=\"Plafond de dépense\"\n  mode=\"currency\"\n  currency=\"EUR\"\n  locale=\"fr-FR\"\n  clearable\n  [(ngModel)]=\"cap\"\n/>",
+          "runnableExample": "<sds-input-number label=\"Plafond de dépense\" mode=\"currency\" currency=\"EUR\" locale=\"fr-FR\" clearable [(ngModel)]=\"cap\" />",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Tailles",
+          "sectionDescription": null,
+          "code": "<sds-input-number size=\"sm\" label=\"Petit (sm)\" [(ngModel)]=\"value\" />\n<sds-input-number size=\"md\" label=\"Moyen (md)\" [(ngModel)]=\"value\" />\n<sds-input-number size=\"lg\" label=\"Grand (lg)\" [(ngModel)]=\"value\" />",
+          "runnableExample": "<sds-input-number size=\"sm\" label=\"Petit (sm)\" [(ngModel)]=\"sizeSm\" />\n          <sds-input-number size=\"md\" label=\"Moyen (md)\" [(ngModel)]=\"sizeMd\" />\n          <sds-input-number size=\"lg\" label=\"Grand (lg)\" [(ngModel)]=\"sizeLg\" />",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Rempli & erreur",
+          "sectionDescription": null,
+          "code": "<sds-input-number appearance=\"filled\" label=\"Rempli\" [(ngModel)]=\"value\" />\n<sds-input-number label=\"Nombre requis\" [error]=\"'Veuillez saisir un nombre.'\" [(ngModel)]=\"value\" />",
+          "runnableExample": "<sds-input-number appearance=\"filled\" label=\"Rempli\" [(ngModel)]=\"filled\" />\n          <sds-input-number label=\"Nombre requis\" [error]=\"'Veuillez saisir un nombre.'\" [(ngModel)]=\"required\" />",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Désactivé",
+          "sectionDescription": null,
+          "code": "<sds-input-number label=\"Capacité verrouillée\" [ngModel]=\"120\" disabled />",
+          "runnableExample": "<sds-input-number label=\"Capacité verrouillée\" [ngModel]=\"120\" disabled />",
+          "stack": true,
+          "dark": false
+        }
+      ]
+    },
     {
       "className": "SdsLocalizedInput",
       "selector": "sds-localized-input",
@@ -1757,8 +2156,8 @@
       "importName": "SdsMultiSelect",
       "description": "Liste déroulante à sélection multiple (la valeur est un tableau). Cases à cocher par option, « Tout sélectionner », affichage en puces ou en texte, filtre, effacement et navigation clavier. Overlay attaché au <body>. Implémente ControlValueAccessor.",
       "overviewDescription": "Sélection multiple : puces, « tout sélectionner » et filtre.",
-      "jsdoc": "Multi-select dropdown (value is an array). Options may be primitives or\nobjects (configure via [optionLabel]/[optionValue]/[optionDisabled]). The\noverlay is appended to <body>. Supports a \"select all\" toggle, per-option\ncheckboxes, chip or comma display, filtering, clearing and keyboard nav.\nImplements ControlValueAccessor — use with reactive forms or [(ngModel)].\n\nFor object options, set [optionValue] or [dataKey] so written values match by\nkey; otherwise matching falls back to reference equality.",
-      "example": "<sds-multi-select [options]=\"services\" optionLabel=\"name\" optionValue=\"code\"\n                 display=\"chip\" filter [(ngModel)]=\"codes\" />",
+      "jsdoc": "Multi-select dropdown (value is an array). Options may be primitives or\nobjects (configure via [optionLabel]/[optionValue]/[optionDisabled]). The\noverlay is appended to <body>. Supports a \"select all\" toggle, per-option\ncheckboxes, chip or comma display, filtering, clearing and keyboard nav.\nImplements ControlValueAccessor — use with reactive forms or [(ngModel)].\n\nFor object options, set [optionValue] or [dataKey] so written values match by\nkey; otherwise matching falls back to reference equality.\n\nProject template directives to customise the panel:\n- `<ng-template sdsSelectOption let-option>` — the content of each option row, after its\n  checkbox (see {@link SdsSelectOption}); context: the raw `option` (implicit), plus `label`,\n  `value`, `selected`, `disabled`, `index`.\n- `<ng-template sdsSelectEmpty let-query>` — replaces the \"no results\" message (see {@link SdsSelectEmpty}).\n- `<ng-template sdsSelectFooter let-close=\"close\">` — a sticky footer action (see {@link SdsSelectFooter});\n  `close()` dismisses the panel.",
+      "example": "<sds-multi-select [options]=\"tags\" optionLabel=\"name\" optionValue=\"id\" [(ngModel)]=\"tagIds\">\n  <ng-template sdsSelectOption let-option>\n    <span class=\"dot\" [style.background]=\"option.color\"></span> {{ option.name }}\n  </ng-template>\n</sds-multi-select>",
       "cva": true,
       "usesNgModel": true,
       "inputs": [
@@ -1994,6 +2393,22 @@
           "stack": true,
           "dark": false
         },
+        {
+          "sectionTitle": "Gabarit d'option (sdsSelectOption)",
+          "sectionDescription": "Projetez un <ng-template sdsSelectOption> pour rendre chaque ligne d'option après sa case à cocher. Le contexte expose l'option brute (implicite), plus label, value, selected, disabled et index.",
+          "code": "<sds-multi-select\n  [options]=\"services\"\n  optionLabel=\"name\"\n  optionValue=\"code\"\n  display=\"chip\"\n  filter\n  [(ngModel)]=\"codes\"\n  placeholder=\"Choisir des services\"\n>\n  <!-- Rendered after each option's checkbox. let-option is the raw option. -->\n  <ng-template sdsSelectOption let-option>\n    <span class=\"h-2.5 w-2.5 shrink-0 rounded-full\" [style.background]=\"option.color\"></span>\n    <span class=\"truncate\">{{ option.name }}</span>\n  </ng-template>\n</sds-multi-select>\n\n// services = [{ name: 'Cardiologie', code: 'CARD', color: '#ef4444' }, …];",
+          "runnableExample": "<sds-multi-select\n            [options]=\"coloredServices\"\n            optionLabel=\"name\"\n            optionValue=\"code\"\n            display=\"chip\"\n            filter\n            [(ngModel)]=\"codes\"\n            placeholder=\"Choisir des services\"\n          >\n            <ng-template sdsSelectOption let-option>\n              <span class=\"h-2.5 w-2.5 shrink-0 rounded-full\" [style.background]=\"option.color\"></span>\n              <span class=\"truncate\">{{ option.name }}</span>\n            </ng-template>\n          </sds-multi-select>",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Gabarits vide et pied de liste (sdsSelectEmpty / sdsSelectFooter)",
+          "sectionDescription": "Personnalisez l'état « aucun résultat » et ajoutez une action collante ; le pied reçoit close() pour refermer le panneau.",
+          "code": "<sds-multi-select [options]=\"services\" optionLabel=\"name\" optionValue=\"code\" filter>\n  <ng-template sdsSelectEmpty let-query>\n    Aucun service pour « {{ query }} ».\n  </ng-template>\n  <ng-template sdsSelectFooter let-close=\"close\">\n    <button type=\"button\" class=\"w-full px-3 py-2 text-brand-700\" (click)=\"addService(); close()\">\n      + Nouveau service\n    </button>\n  </ng-template>\n</sds-multi-select>",
+          "runnableExample": "<sds-multi-select\n            [options]=\"services\"\n            optionLabel=\"name\"\n            optionValue=\"code\"\n            filter\n            placeholder=\"Choisir des services\"\n          >\n            <ng-template sdsSelectEmpty let-query>\n              <span class=\"text-ink-faint\">Aucun service pour « {{ query }} ».</span>\n            </ng-template>\n            <ng-template sdsSelectFooter let-close=\"close\">\n              <button\n                type=\"button\"\n                class=\"flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-brand-700 hover:bg-brand-50\"\n                (click)=\"close()\"\n              >\n                + Nouveau service\n              </button>\n            </ng-template>\n          </sds-multi-select>",
+          "stack": true,
+          "dark": false
+        },
         {
           "sectionTitle": "Étiquette de comptage",
           "sectionDescription": "Au-delà de [maxSelectedLabels], un libellé de comptage remplace la liste.",
@@ -2903,8 +3318,8 @@
       "importName": "SdsSelect",
       "description": "Liste déroulante à sélection unique. Options primitives ou objets (via optionLabel / optionValue / optionDisabled). Overlay attaché au <body>, filtre, effacement et navigation clavier complète. Implémente ControlValueAccessor.",
       "overviewDescription": "Liste déroulante avec filtre, effacement et navigation clavier.",
-      "jsdoc": "Single-select dropdown. Options may be primitives or objects (configure via\n[optionLabel]/[optionValue]/[optionDisabled]). The overlay is appended to\n<body>. Supports filtering, clearing, and full keyboard navigation.\nImplements ControlValueAccessor — use with reactive forms or [(ngModel)].\n\nFor object options, set [optionValue] or [dataKey] so written values match by\nkey; otherwise selection matching falls back to reference equality (a written\ncopy of an option will not match).",
-      "example": "<sds-select [options]=\"services\" optionLabel=\"name\" optionValue=\"id\"\n           placeholder=\"Choisir un service\" [(ngModel)]=\"serviceId\" filter clearable />",
+      "jsdoc": "Single-select dropdown. Options may be primitives or objects (configure via\n[optionLabel]/[optionValue]/[optionDisabled]). The overlay is appended to\n<body>. Supports filtering, clearing, and full keyboard navigation.\nImplements ControlValueAccessor — use with reactive forms or [(ngModel)].\n\nFor object options, set [optionValue] or [dataKey] so written values match by\nkey; otherwise selection matching falls back to reference equality (a written\ncopy of an option will not match).\n\nOptions render as plain text by default. To render richer options (an icon,\nan avatar, a two-line row…) project template directives — the same content\nalso renders in the trigger for the selected value:\n- `<ng-template sdsSelectOption let-option>` — one option row (see {@link SdsSelectOption});\n  context: the raw `option` (implicit), plus `label`, `value`, `selected`, `disabled`, `index`.\n- `<ng-template sdsSelectEmpty let-query>` — replaces the \"no results\" message (see {@link SdsSelectEmpty}).\n- `<ng-template sdsSelectFooter let-close=\"close\">` — a sticky footer action, e.g. \"＋ New…\"\n  (see {@link SdsSelectFooter}); `close()` dismisses the panel.",
+      "example": "<sds-select [options]=\"categories\" optionLabel=\"name\" optionValue=\"id\" [(ngModel)]=\"categoryId\">\n  <ng-template sdsSelectOption let-option>\n    <span class=\"dot\" [style.background]=\"option.color\"></span> {{ option.name }}\n  </ng-template>\n</sds-select>",
       "cva": true,
       "usesNgModel": true,
       "inputs": [
@@ -3105,6 +3520,30 @@
           "stack": true,
           "dark": false
         },
+        {
+          "sectionTitle": "Gabarit d'option (sdsSelectOption)",
+          "sectionDescription": "Projetez un <ng-template sdsSelectOption> pour rendre chaque option — et la valeur sélectionnée dans le champ — à votre guise. Le contexte expose l'option brute (implicite), plus label, value, selected, disabled et index.",
+          "code": "<sds-select\n  [options]=\"services\"\n  optionLabel=\"name\"\n  optionValue=\"code\"\n  filter\n  clearable\n  [(ngModel)]=\"serviceCode\"\n  placeholder=\"Choisir un service\"\n>\n  <!-- Rendered for each option AND for the selected value in the field.\n       let-option is the raw option; also: let-selected=\"selected\", let-label=\"label\", … -->\n  <ng-template sdsSelectOption let-option>\n    <span class=\"h-2.5 w-2.5 shrink-0 rounded-full\" [style.background]=\"option.color\"></span>\n    <span class=\"truncate\">{{ option.name }}</span>\n  </ng-template>\n</sds-select>\n\n// services = [{ name: 'Cardiologie', code: 'CARD', color: '#ef4444' }, …];",
+          "runnableExample": "<sds-select\n            [options]=\"coloredServices\"\n            optionLabel=\"name\"\n            optionValue=\"code\"\n            filter\n            clearable\n            [(ngModel)]=\"serviceCode\"\n            placeholder=\"Choisir un service\"\n          >\n            <ng-template sdsSelectOption let-option>\n              <span class=\"h-2.5 w-2.5 shrink-0 rounded-full\" [style.background]=\"option.color\"></span>\n              <span class=\"truncate\">{{ option.name }}</span>\n            </ng-template>\n          </sds-select>",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Gabarit vide (sdsSelectEmpty)",
+          "sectionDescription": "Remplace le message « aucun résultat » ; le contexte fournit la requête de filtre courante.",
+          "code": "<sds-select [options]=\"services\" optionLabel=\"name\" optionValue=\"code\" filter>\n  <ng-template sdsSelectEmpty let-query>\n    Aucun service pour « {{ query }} ».\n  </ng-template>\n</sds-select>",
+          "runnableExample": "<sds-select\n            [options]=\"services\"\n            optionLabel=\"name\"\n            optionValue=\"code\"\n            filter\n            placeholder=\"Choisir un service\"\n          >\n            <ng-template sdsSelectEmpty let-query>\n              <span class=\"text-ink-faint\">Aucun service pour « {{ query }} ».</span>\n            </ng-template>\n          </sds-select>",
+          "stack": true,
+          "dark": false
+        },
+        {
+          "sectionTitle": "Pied de liste (sdsSelectFooter)",
+          "sectionDescription": "Ajoute une action collante sous la liste (ex. « Nouveau… ») ; le contexte fournit close() pour refermer le panneau.",
+          "code": "<sds-select [options]=\"services\" optionLabel=\"name\" optionValue=\"code\" filter>\n  <!-- close() dismisses the panel after the action. -->\n  <ng-template sdsSelectFooter let-close=\"close\">\n    <button type=\"button\" class=\"w-full px-3 py-2 text-brand-700\" (click)=\"addService(); close()\">\n      + Nouveau service\n    </button>\n  </ng-template>\n</sds-select>",
+          "runnableExample": "<sds-select\n            [options]=\"services\"\n            optionLabel=\"name\"\n            optionValue=\"code\"\n            filter\n            placeholder=\"Choisir un service\"\n          >\n            <ng-template sdsSelectFooter let-close=\"close\">\n              <button\n                type=\"button\"\n                class=\"flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-brand-700 hover:bg-brand-50\"\n                (click)=\"close()\"\n              >\n                + Nouveau service\n              </button>\n            </ng-template>\n          </sds-select>",
+          "stack": true,
+          "dark": false
+        },
         {
           "sectionTitle": "Effaçable",
           "sectionDescription": "Affiche un bouton d'effacement quand une valeur est sélectionnée.",
@@ -4521,6 +4960,111 @@
     }
   ],
   "directives": [
+    {
+      "className": "SdsSelectEmpty",
+      "selector": "ng-template[sdsSelectEmpty]",
+      "kind": "directive",
+      "group": "form",
+      "importName": "SdsSelectEmpty",
+      "description": null,
+      "overviewDescription": null,
+      "jsdoc": "Supplies a custom template shown in place of the default \"no results\" message\nwhen a select has no (matching) options.",
+      "example": "<ng-template sdsSelectEmpty let-q>No category matches \"{{ q }}\".</ng-template>",
+      "cva": false,
+      "usesNgModel": false,
+      "inputs": [],
+      "outputs": [],
+      "exportedTypes": [
+        {
+          "name": "SdsSelectOptionContext",
+          "kind": "interface",
+          "body": "interface SdsSelectOptionContext { /** Same as {@link option} — enables the implicit `let-option` binding. Typed `any` so consumer templates * can read their own option fields (e.g. `option.color`) without casting. */ $implicit: any; /** The raw option object (or primitive) from the `options` array. */ option: any; /** The resolved display label (via optionLabel). */ label: string; /** The resolved option value (via optionValue). */ value: unknown; /** Whether this option is currently selected. */ selected: boolean; /** Whether this option is disabled. */ disabled: boolean; /** Zero-based inde"
+        },
+        {
+          "name": "SdsSelectEmptyContext",
+          "kind": "interface",
+          "body": "interface SdsSelectEmptyContext { /** Same as {@link filterText} — enables the implicit `let-filterText` binding. */ $implicit: string; /** The current filter query (empty when the field isn't filterable or is blank). */ filterText: string; }"
+        },
+        {
+          "name": "SdsSelectFooterContext",
+          "kind": "interface",
+          "body": "interface SdsSelectFooterContext { /** Same as {@link filterText} — enables the implicit `let-filterText` binding. */ $implicit: string; /** The current filter query. */ filterText: string; /** Closes the open panel — handy for a footer action (e.g. \"＋ New…\"). */ close: () => void; }"
+        }
+      ],
+      "projectionSlots": [],
+      "hostBindings": {},
+      "examples": []
+    },
+    {
+      "className": "SdsSelectFooter",
+      "selector": "ng-template[sdsSelectFooter]",
+      "kind": "directive",
+      "group": "form",
+      "importName": "SdsSelectFooter",
+      "description": null,
+      "overviewDescription": null,
+      "jsdoc": "Supplies a custom sticky footer rendered below the option list — e.g. a\n\"＋ Create new\" action. The `close` context callback dismisses the panel.",
+      "example": "<ng-template sdsSelectFooter let-close=\"close\">\n  <button (click)=\"createCategory(); close()\">＋ New category</button>\n</ng-template>",
+      "cva": false,
+      "usesNgModel": false,
+      "inputs": [],
+      "outputs": [],
+      "exportedTypes": [
+        {
+          "name": "SdsSelectOptionContext",
+          "kind": "interface",
+          "body": "interface SdsSelectOptionContext { /** Same as {@link option} — enables the implicit `let-option` binding. Typed `any` so consumer templates * can read their own option fields (e.g. `option.color`) without casting. */ $implicit: any; /** The raw option object (or primitive) from the `options` array. */ option: any; /** The resolved display label (via optionLabel). */ label: string; /** The resolved option value (via optionValue). */ value: unknown; /** Whether this option is currently selected. */ selected: boolean; /** Whether this option is disabled. */ disabled: boolean; /** Zero-based inde"
+        },
+        {
+          "name": "SdsSelectEmptyContext",
+          "kind": "interface",
+          "body": "interface SdsSelectEmptyContext { /** Same as {@link filterText} — enables the implicit `let-filterText` binding. */ $implicit: string; /** The current filter query (empty when the field isn't filterable or is blank). */ filterText: string; }"
+        },
+        {
+          "name": "SdsSelectFooterContext",
+          "kind": "interface",
+          "body": "interface SdsSelectFooterContext { /** Same as {@link filterText} — enables the implicit `let-filterText` binding. */ $implicit: string; /** The current filter query. */ filterText: string; /** Closes the open panel — handy for a footer action (e.g. \"＋ New…\"). */ close: () => void; }"
+        }
+      ],
+      "projectionSlots": [],
+      "hostBindings": {},
+      "examples": []
+    },
+    {
+      "className": "SdsSelectOption",
+      "selector": "ng-template[sdsSelectOption]",
+      "kind": "directive",
+      "group": "form",
+      "importName": "SdsSelectOption",
+      "description": null,
+      "overviewDescription": null,
+      "jsdoc": "Supplies a custom template for each option row (and the selected value shown\nin the trigger) of an `<sds-select>` / `<sds-multi-select>`. Use as a\nstructural template projected into the select:",
+      "example": "<sds-select [options]=\"categories\" optionLabel=\"name\" optionValue=\"id\" [(ngModel)]=\"catId\">\n  <ng-template sdsSelectOption let-option let-selected=\"selected\">\n    <span class=\"dot\" [style.background]=\"option.color\"></span>\n    <span class=\"truncate\">{{ option.name }}</span>\n  </ng-template>\n</sds-select>",
+      "cva": false,
+      "usesNgModel": false,
+      "inputs": [],
+      "outputs": [],
+      "exportedTypes": [
+        {
+          "name": "SdsSelectOptionContext",
+          "kind": "interface",
+          "body": "interface SdsSelectOptionContext { /** Same as {@link option} — enables the implicit `let-option` binding. Typed `any` so consumer templates * can read their own option fields (e.g. `option.color`) without casting. */ $implicit: any; /** The raw option object (or primitive) from the `options` array. */ option: any; /** The resolved display label (via optionLabel). */ label: string; /** The resolved option value (via optionValue). */ value: unknown; /** Whether this option is currently selected. */ selected: boolean; /** Whether this option is disabled. */ disabled: boolean; /** Zero-based inde"
+        },
+        {
+          "name": "SdsSelectEmptyContext",
+          "kind": "interface",
+          "body": "interface SdsSelectEmptyContext { /** Same as {@link filterText} — enables the implicit `let-filterText` binding. */ $implicit: string; /** The current filter query (empty when the field isn't filterable or is blank). */ filterText: string; }"
+        },
+        {
+          "name": "SdsSelectFooterContext",
+          "kind": "interface",
+          "body": "interface SdsSelectFooterContext { /** Same as {@link filterText} — enables the implicit `let-filterText` binding. */ $implicit: string; /** The current filter query. */ filterText: string; /** Closes the open panel — handy for a footer action (e.g. \"＋ New…\"). */ close: () => void; }"
+        }
+      ],
+      "projectionSlots": [],
+      "hostBindings": {},
+      "examples": []
+    },
     {
       "className": "SdsTableCell",
       "selector": "ng-template[sdsCell]",
@@ -4662,6 +5206,7 @@
       "chevron-down",
       "chevron-left",
       "chevron-right",
+      "chevron-up",
       "chevrons-left",
       "chevrons-right",
       "chevrons-up-down",
@@ -4686,6 +5231,7 @@
       "map-pin",
       "megaphone",
       "menu",
+      "minus",
       "monitor",
       "package",
       "package-open",
@@ -4697,6 +5243,7 @@
       "panel-top",
       "panels-top-left",
       "phone",
+      "plus",
       "refresh-cw",
       "rotate-ccw",
       "rows-3",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@besaitech/ng-design-system-mcp",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "description": "MCP server that exposes the @besaitech/ng-design-system Angular component library documentation (API, examples, tokens, icons, setup) to AI coding tools.",
   "type": "module",
   "bin": {