@ng-primitives/mcp 0.125.0 → 0.127.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-primitives/mcp",
-  "version": "0.125.0",
+  "version": "0.127.0",
   "description": "MCP server for Angular Primitives - headless UI library",
   "type": "commonjs",
   "main": "./src/index.js",

package/src/generated/api-data.json

@@ -29,30 +29,6 @@
     "inputs": [],
     "outputs": []
   },
-  "NgpAccordionItem": {
-    "name": "NgpAccordionItem",
-    "description": "Apply the `ngpAccordionItem` directive to an element that represents an accordion item.",
-    "selector": "[ngpAccordionItem]",
-    "exportAs": [
-      "ngpAccordionItem"
-    ],
-    "inputs": [
-      {
-        "name": "ngpAccordionItemValue",
-        "type": "T",
-        "description": "The value of the accordion item.",
-        "isRequired": false
-      },
-      {
-        "name": "ngpAccordionItemDisabled",
-        "type": "boolean",
-        "description": "Whether the accordion item is disabled.",
-        "isRequired": false,
-        "defaultValue": "false"
-      }
-    ],
-    "outputs": []
-  },
   "NgpAccordion": {
     "name": "NgpAccordion",
     "description": "Apply the `ngpAccordion` directive to an element that represents the group of accordion items.",
@@ -105,6 +81,30 @@
       }
     ]
   },
+  "NgpAccordionItem": {
+    "name": "NgpAccordionItem",
+    "description": "Apply the `ngpAccordionItem` directive to an element that represents an accordion item.",
+    "selector": "[ngpAccordionItem]",
+    "exportAs": [
+      "ngpAccordionItem"
+    ],
+    "inputs": [
+      {
+        "name": "ngpAccordionItemValue",
+        "type": "T",
+        "description": "The value of the accordion item.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpAccordionItemDisabled",
+        "type": "boolean",
+        "description": "Whether the accordion item is disabled.",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": []
+  },
   "NgpThread": {
     "name": "NgpThread",
     "description": "",
@@ -430,6 +430,407 @@
       }
     ]
   },
+  "NgpCollapsibleTrigger": {
+    "name": "NgpCollapsibleTrigger",
+    "description": "Apply the `ngpCollapsibleTrigger` directive to an element - typically a\n`button` - that toggles the collapsible open and closed.",
+    "selector": "[ngpCollapsibleTrigger]",
+    "exportAs": [
+      "ngpCollapsibleTrigger"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
+  "NgpCollapsibleContent": {
+    "name": "NgpCollapsibleContent",
+    "description": "Apply the `ngpCollapsibleContent` directive to the element that contains the\ncollapsible content that is shown and hidden by the trigger.",
+    "selector": "[ngpCollapsibleContent]",
+    "exportAs": [
+      "ngpCollapsibleContent"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
+  "NgpCollapsible": {
+    "name": "NgpCollapsible",
+    "description": "Apply the `ngpCollapsible` directive to an element that contains a collapsible\ntrigger and content. It manages the open state of a single disclosure.",
+    "selector": "[ngpCollapsible]",
+    "exportAs": [
+      "ngpCollapsible"
+    ],
+    "inputs": [
+      {
+        "name": "ngpCollapsibleOpen",
+        "type": "boolean | undefined",
+        "description": "Whether the collapsible is open. Leave unset for uncontrolled usage.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpCollapsibleDefaultOpen",
+        "type": "boolean",
+        "description": "The default open state for uncontrolled usage.\n@default false",
+        "isRequired": false,
+        "defaultValue": "false"
+      },
+      {
+        "name": "ngpCollapsibleDisabled",
+        "type": "boolean",
+        "description": "Whether the collapsible is disabled.\n@default false",
+        "isRequired": false,
+        "defaultValue": "false"
+      },
+      {
+        "name": "ngpCollapsibleOrientation",
+        "type": "'horizontal' | 'vertical'",
+        "description": "The orientation of the collapsible.\n@default 'vertical'",
+        "isRequired": false,
+        "defaultValue": "'vertical'"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpCollapsibleOpenChange",
+        "type": "boolean",
+        "description": "Emits when the open state changes."
+      }
+    ]
+  },
+  "NgpColorAreaThumb": {
+    "name": "NgpColorAreaThumb",
+    "description": "Apply the `ngpColorAreaThumb` directive to the element that represents the color area thumb.",
+    "selector": "[ngpColorAreaThumb]",
+    "exportAs": [
+      "ngpColorAreaThumb"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
+  "NgpColorWheelThumb": {
+    "name": "NgpColorWheelThumb",
+    "description": "Apply the `ngpColorWheelThumb` directive to the element that represents the color wheel thumb.\nPosition it with the `--ngp-color-wheel-hue` custom property, e.g.\n`transform: translate(-50%, -50%) rotate(var(--ngp-color-wheel-hue)) translateY(calc(-1 * <radius>))`.",
+    "selector": "[ngpColorWheelThumb]",
+    "exportAs": [
+      "ngpColorWheelThumb"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
+  "NgpColorSwatch": {
+    "name": "NgpColorSwatch",
+    "description": "Apply the `ngpColorSwatch` directive to an element to display a color preview. Set its background to\n`var(--ngp-color-swatch-color)`. Inside a color picker it shows the picker's value by default.",
+    "selector": "[ngpColorSwatch]",
+    "exportAs": [
+      "ngpColorSwatch"
+    ],
+    "inputs": [
+      {
+        "name": "ngpColorSwatch",
+        "type": "Color | undefined",
+        "description": "The color to display. Falls back to the parent picker's value when omitted.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorSwatchLabel",
+        "type": "string | undefined",
+        "description": "An accessible label. Defaults to the color's hex string.",
+        "isRequired": false
+      }
+    ],
+    "outputs": []
+  },
+  "NgpColorSliderTrack": {
+    "name": "NgpColorSliderTrack",
+    "description": "Apply the `ngpColorSliderTrack` directive to the element that represents the color slider track.\nSet its background to `var(--ngp-color-slider-background)` to render the channel gradient.",
+    "selector": "[ngpColorSliderTrack]",
+    "exportAs": [
+      "ngpColorSliderTrack"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
+  "NgpColorSliderThumb": {
+    "name": "NgpColorSliderThumb",
+    "description": "Apply the `ngpColorSliderThumb` directive to the element that represents the color slider thumb.",
+    "selector": "[ngpColorSliderThumb]",
+    "exportAs": [
+      "ngpColorSliderThumb"
+    ],
+    "inputs": [],
+    "outputs": [
+      {
+        "name": "ngpColorSliderThumbDragStart",
+        "type": "void",
+        "description": "Emits when the thumb drag starts."
+      },
+      {
+        "name": "ngpColorSliderThumbDragEnd",
+        "type": "void",
+        "description": "Emits when the thumb drag ends."
+      }
+    ]
+  },
+  "NgpColorPicker": {
+    "name": "NgpColorPicker",
+    "description": "Apply the `ngpColorPicker` directive to a container that coordinates a single color value across\nchild color components. Child areas, sliders and fields bind to the picker's value automatically.",
+    "selector": "[ngpColorPicker]",
+    "exportAs": [
+      "ngpColorPicker"
+    ],
+    "inputs": [
+      {
+        "name": "ngpColorPickerValue",
+        "type": "Color",
+        "description": "The color value.",
+        "isRequired": false
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpColorPickerValueChange",
+        "type": "Color",
+        "description": "Emits when the value changes."
+      }
+    ]
+  },
+  "NgpColorSwatchPickerItem": {
+    "name": "NgpColorSwatchPickerItem",
+    "description": "Apply the `ngpColorSwatchPickerItem` directive to a selectable swatch within a swatch picker. Set its\nbackground to `var(--ngp-color-swatch-color)`. It composes a roving focus item.",
+    "selector": "[ngpColorSwatchPickerItem]",
+    "exportAs": [
+      "ngpColorSwatchPickerItem"
+    ],
+    "inputs": [
+      {
+        "name": "ngpColorSwatchPickerItem",
+        "type": "Color",
+        "description": "The color this swatch represents.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorSwatchPickerItemDisabled",
+        "type": "boolean",
+        "description": "Whether the swatch is disabled.",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": []
+  },
+  "NgpColorWheel": {
+    "name": "NgpColorWheel",
+    "description": "Apply the `ngpColorWheel` directive to a circular element that adjusts the hue channel of a color.\nSet its background to `var(--ngp-color-wheel-background)` and contain a thumb.",
+    "selector": "[ngpColorWheel]",
+    "exportAs": [
+      "ngpColorWheel"
+    ],
+    "inputs": [
+      {
+        "name": "ngpColorWheelValue",
+        "type": "Color",
+        "description": "The color value.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorWheelColorSpace",
+        "type": "'rgb' | 'hsl' | 'hsb'",
+        "description": "The color space to operate in.",
+        "isRequired": false,
+        "defaultValue": "'hsl'"
+      },
+      {
+        "name": "ngpColorWheelDisabled",
+        "type": "boolean",
+        "description": "The disabled state of the wheel.",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpColorWheelValueChange",
+        "type": "Color",
+        "description": "Emits when the value changes."
+      }
+    ]
+  },
+  "NgpColorArea": {
+    "name": "NgpColorArea",
+    "description": "Apply the `ngpColorArea` directive to a 2D surface that adjusts two channels of a color value.\nThe surface should set its background to `var(--ngp-color-area-background)` and contain a thumb.",
+    "selector": "[ngpColorArea]",
+    "exportAs": [
+      "ngpColorArea"
+    ],
+    "inputs": [
+      {
+        "name": "ngpColorAreaValue",
+        "type": "Color",
+        "description": "The color value.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorAreaXChannel",
+        "type": "'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'lightness' | 'brightness' | 'alpha'",
+        "description": "The channel mapped to the horizontal axis.",
+        "isRequired": false,
+        "defaultValue": "'saturation'"
+      },
+      {
+        "name": "ngpColorAreaYChannel",
+        "type": "'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'lightness' | 'brightness' | 'alpha'",
+        "description": "The channel mapped to the vertical axis.",
+        "isRequired": false,
+        "defaultValue": "'brightness'"
+      },
+      {
+        "name": "ngpColorAreaColorSpace",
+        "type": "ColorSpace | undefined",
+        "description": "The color space to operate in. Resolved from the channels/value when not set.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorAreaDisabled",
+        "type": "boolean",
+        "description": "The disabled state of the area.",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpColorAreaValueChange",
+        "type": "Color",
+        "description": "Emits when the value changes."
+      }
+    ]
+  },
+  "NgpColorField": {
+    "name": "NgpColorField",
+    "description": "Apply the `ngpColorField` directive to an `input` element to edit a color. Without a channel it\nedits the whole color as a hex string; with a channel it edits that single channel as a number.\nIt composes the input primitive, so it provides the input state.",
+    "selector": "input[ngpColorField]",
+    "exportAs": [
+      "ngpColorField"
+    ],
+    "inputs": [
+      {
+        "name": "ngpColorFieldValue",
+        "type": "Color",
+        "description": "The color value.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorFieldChannel",
+        "type": "ColorChannel | undefined",
+        "description": "The channel to edit. When omitted, the field edits the whole color as hex.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorFieldColorSpace",
+        "type": "ColorSpace | undefined",
+        "description": "The color space for channel mode. Resolved from the channel/value when not set.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorFieldDisabled",
+        "type": "boolean",
+        "description": "The disabled state of the field.",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpColorFieldValueChange",
+        "type": "Color",
+        "description": "Emits when the value changes."
+      }
+    ]
+  },
+  "NgpColorSlider": {
+    "name": "NgpColorSlider",
+    "description": "Apply the `ngpColorSlider` directive to an element that contains a color slider track and thumb.\nA color slider adjusts a single channel (e.g. hue, saturation, alpha) of a color value. It composes\nthe underlying slider primitive, so it provides the slider state its track and thumb parts read.",
+    "selector": "[ngpColorSlider]",
+    "exportAs": [
+      "ngpColorSlider"
+    ],
+    "inputs": [
+      {
+        "name": "ngpColorSliderValue",
+        "type": "Color",
+        "description": "The color value.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorSliderChannel",
+        "type": "'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'lightness' | 'brightness' | 'alpha'",
+        "description": "The channel this slider adjusts.",
+        "isRequired": false,
+        "defaultValue": "'hue'"
+      },
+      {
+        "name": "ngpColorSliderColorSpace",
+        "type": "ColorSpace | undefined",
+        "description": "The color space to operate in. Resolved from the channel/value when not set.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorSliderOrientation",
+        "type": "'horizontal' | 'vertical'",
+        "description": "The orientation of the slider.",
+        "isRequired": false,
+        "defaultValue": "'horizontal'"
+      },
+      {
+        "name": "ngpColorSliderDisabled",
+        "type": "boolean",
+        "description": "The disabled state of the slider.",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpColorSliderValueChange",
+        "type": "Color",
+        "description": "Emits when the value changes."
+      }
+    ]
+  },
+  "NgpColorSwatchPicker": {
+    "name": "NgpColorSwatchPicker",
+    "description": "Apply the `ngpColorSwatchPicker` directive to a container of selectable color swatches. It composes\nroving focus for keyboard navigation, so it provides the roving focus group state.",
+    "selector": "[ngpColorSwatchPicker]",
+    "exportAs": [
+      "ngpColorSwatchPicker"
+    ],
+    "inputs": [
+      {
+        "name": "ngpColorSwatchPickerValue",
+        "type": "Color | undefined",
+        "description": "The selected color.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpColorSwatchPickerOrientation",
+        "type": "'horizontal' | 'vertical'",
+        "description": "The orientation of the swatch list.",
+        "isRequired": false,
+        "defaultValue": "'horizontal'"
+      },
+      {
+        "name": "ngpColorSwatchPickerDisabled",
+        "type": "boolean",
+        "description": "The disabled state of the swatch picker.",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpColorSwatchPickerValueChange",
+        "type": "Color",
+        "description": "Emits when the selected color changes."
+      }
+    ]
+  },
   "NgpComboboxPortal": {
     "name": "NgpComboboxPortal",
     "description": "",
@@ -1081,22 +1482,22 @@
       }
     ]
   },
-  "NgpDialogDescription": {
-    "name": "NgpDialogDescription",
+  "NgpDialogTitle": {
+    "name": "NgpDialogTitle",
     "description": "",
-    "selector": "[ngpDialogDescription]",
+    "selector": "[ngpDialogTitle]",
     "exportAs": [
-      "ngpDialogDescription"
+      "ngpDialogTitle"
     ],
     "inputs": [],
     "outputs": []
   },
-  "NgpDialogTitle": {
-    "name": "NgpDialogTitle",
+  "NgpDialogDescription": {
+    "name": "NgpDialogDescription",
     "description": "",
-    "selector": "[ngpDialogTitle]",
+    "selector": "[ngpDialogDescription]",
     "exportAs": [
-      "ngpDialogTitle"
+      "ngpDialogDescription"
     ],
     "inputs": [],
     "outputs": []
@@ -2564,6 +2965,99 @@
       }
     ]
   },
+  "NgpPasswordToggle": {
+    "name": "NgpPasswordToggle",
+    "description": "Apply the `ngpPasswordToggle` directive to a `button` element to toggle the visibility of the\npassword within an `ngpPassword` container.",
+    "selector": "button[ngpPasswordToggle]",
+    "exportAs": [
+      "ngpPasswordToggle"
+    ],
+    "inputs": [
+      {
+        "name": "ngpPasswordToggleShowLabel",
+        "type": "string",
+        "description": "The accessible label shown when the password is hidden.",
+        "isRequired": false,
+        "defaultValue": "'Show password'"
+      },
+      {
+        "name": "ngpPasswordToggleHideLabel",
+        "type": "string",
+        "description": "The accessible label shown when the password is visible.",
+        "isRequired": false,
+        "defaultValue": "'Hide password'"
+      },
+      {
+        "name": "ngpPasswordToggleShownAnnouncement",
+        "type": "string",
+        "description": "The message announced when the password becomes visible.",
+        "isRequired": false,
+        "defaultValue": "'Your password is shown'"
+      },
+      {
+        "name": "ngpPasswordToggleHiddenAnnouncement",
+        "type": "string",
+        "description": "The message announced when the password becomes hidden.",
+        "isRequired": false,
+        "defaultValue": "'Your password is hidden'"
+      }
+    ],
+    "outputs": []
+  },
+  "NgpPassword": {
+    "name": "NgpPassword",
+    "description": "The `NgpPassword` directive is a container for a password field and its visibility toggle.",
+    "selector": "[ngpPassword]",
+    "exportAs": [
+      "ngpPassword"
+    ],
+    "inputs": [
+      {
+        "name": "ngpPasswordVisible",
+        "type": "boolean | undefined",
+        "description": "Whether the password is visible.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpPasswordDefaultVisible",
+        "type": "boolean",
+        "description": "The default visibility state for uncontrolled usage.\n@default false",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpPasswordVisibleChange",
+        "type": "boolean",
+        "description": "Emits when the visibility state changes."
+      }
+    ]
+  },
+  "NgpPasswordInput": {
+    "name": "NgpPasswordInput",
+    "description": "Apply the `ngpPasswordInput` directive to an `input` element within an `ngpPassword` container.\nIt is a complete input (form control, interactions, autofill) with password visibility toggling\nlayered on top, so it does not need to be combined with `ngpInput`.",
+    "selector": "input[ngpPasswordInput]",
+    "exportAs": [
+      "ngpPasswordInput"
+    ],
+    "inputs": [
+      {
+        "name": "disabled",
+        "type": "boolean",
+        "description": "Whether the input is disabled.",
+        "isRequired": false
+      },
+      {
+        "name": "ngpPasswordInputIgnorePasswordManagers",
+        "type": "boolean",
+        "description": "Whether to opt the input out of password manager injection\n(1Password, LastPass, Bitwarden, etc.).",
+        "isRequired": false,
+        "defaultValue": "false"
+      }
+    ],
+    "outputs": []
+  },
   "NgpPopoverArrow": {
     "name": "NgpPopoverArrow",
     "description": "",
@@ -2869,6 +3363,81 @@
       }
     ]
   },
+  "NgpRating": {
+    "name": "NgpRating",
+    "description": "Apply the `ngpRating` directive to an element that represents the rating. It\nexposes the slider role and owns the value, keyboard, and form integration.\nProject the star markup once via the `*ngpRatingItem` structural directive.",
+    "selector": "[ngpRating]",
+    "exportAs": [
+      "ngpRating"
+    ],
+    "inputs": [
+      {
+        "name": "ngpRatingValue",
+        "type": "number",
+        "description": "The value of the rating.",
+        "isRequired": false,
+        "defaultValue": "0"
+      },
+      {
+        "name": "ngpRatingCount",
+        "type": "number",
+        "description": "The number of items in the rating.",
+        "isRequired": false,
+        "defaultValue": "5"
+      },
+      {
+        "name": "ngpRatingAllowHalf",
+        "type": "boolean",
+        "description": "Whether half values are allowed.",
+        "isRequired": false,
+        "defaultValue": "false"
+      },
+      {
+        "name": "ngpRatingDisabled",
+        "type": "boolean",
+        "description": "Whether the rating is disabled.",
+        "isRequired": false,
+        "defaultValue": "false"
+      },
+      {
+        "name": "ngpRatingReadonly",
+        "type": "boolean",
+        "description": "Whether the rating is read-only.",
+        "isRequired": false,
+        "defaultValue": "false"
+      },
+      {
+        "name": "ngpRatingClearable",
+        "type": "boolean",
+        "description": "Whether re-selecting the current value clears the rating to 0 (deselection).",
+        "isRequired": false,
+        "defaultValue": "false"
+      },
+      {
+        "name": "ngpRatingValueText",
+        "type": "(value: number, count: number) => string",
+        "description": "Produce the `aria-valuetext` announced to assistive technology.",
+        "isRequired": false
+      }
+    ],
+    "outputs": [
+      {
+        "name": "ngpRatingValueChange",
+        "type": "number",
+        "description": "Emits when the value changes."
+      }
+    ]
+  },
+  "NgpRatingItem": {
+    "name": "NgpRatingItem",
+    "description": "A structural directive that renders one item (star) per `count`, driven by the\nparent `ngpRating`. Each generated element automatically receives the\n`data-checked`, `data-half` and `data-highlighted` attributes and has its\npointer interactions wired up via the `ngpRatingItem` state function.",
+    "selector": "[ngpRatingItem]",
+    "exportAs": [
+      "ngpRatingItem"
+    ],
+    "inputs": [],
+    "outputs": []
+  },
   "NgpResize": {
     "name": "NgpResize",
     "description": "Apply the `ngpResize` directive to an element to listen for resize events.",
@@ -4177,6 +4746,41 @@
       }
     ]
   },
+  "NgpPasswordConfig": {
+    "name": "NgpPasswordConfig",
+    "properties": [
+      {
+        "name": "showLabel",
+        "type": "string",
+        "description": "The accessible label for the toggle button when the password is hidden.",
+        "default": "'Show password'"
+      },
+      {
+        "name": "hideLabel",
+        "type": "string",
+        "description": "The accessible label for the toggle button when the password is visible.",
+        "default": "'Hide password'"
+      },
+      {
+        "name": "shownAnnouncement",
+        "type": "string",
+        "description": "The message announced to screen readers when the password becomes visible.",
+        "default": "'Your password is shown'"
+      },
+      {
+        "name": "hiddenAnnouncement",
+        "type": "string",
+        "description": "The message announced to screen readers when the password becomes hidden.",
+        "default": "'Your password is hidden'"
+      },
+      {
+        "name": "ignorePasswordManagers",
+        "type": "boolean",
+        "description": "Whether to opt the input out of password manager injection by default.",
+        "default": "false"
+      }
+    ]
+  },
   "NgpPopoverConfig": {
     "name": "NgpPopoverConfig",
     "properties": [
@@ -4390,6 +4994,28 @@
       }
     ]
   },
+  "NgpRatingConfig": {
+    "name": "NgpRatingConfig",
+    "properties": [
+      {
+        "name": "count",
+        "type": "number",
+        "description": "The default number of items in the rating.",
+        "default": "5"
+      },
+      {
+        "name": "clearable",
+        "type": "boolean",
+        "description": "Whether re-selecting the current value clears the rating to 0 (deselection).",
+        "default": "false"
+      },
+      {
+        "name": "valueText",
+        "type": "(value: number, count: number) => string",
+        "description": "Produce the `aria-valuetext` announced to assistive technology. Override for localisation."
+      }
+    ]
+  },
   "NgpSelectConfig": {
     "name": "NgpSelectConfig",
     "properties": [

package/src/generated/primitives-data.json

@@ -316,6 +316,151 @@
       "hasSizes": true
     }
   },
+  {
+    "name": "collapsible",
+    "entryPoint": "ng-primitives/collapsible",
+    "exports": [
+      "NgpCollapsible",
+      "NgpCollapsibleStateToken",
+      "ngpCollapsible",
+      "injectCollapsibleState",
+      "provideCollapsibleState",
+      "type NgpCollapsibleState",
+      "type NgpCollapsibleProps",
+      "NgpCollapsibleTrigger",
+      "NgpCollapsibleTriggerStateToken",
+      "ngpCollapsibleTrigger",
+      "injectCollapsibleTriggerState",
+      "provideCollapsibleTriggerState",
+      "type NgpCollapsibleTriggerState",
+      "type NgpCollapsibleTriggerProps",
+      "NgpCollapsibleContent",
+      "NgpCollapsibleContentStateToken",
+      "ngpCollapsibleContent",
+      "injectCollapsibleContentState",
+      "provideCollapsibleContentState",
+      "type NgpCollapsibleContentState",
+      "type NgpCollapsibleContentProps"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "A collapsible shows and hides an associated section of content, following the WAI-ARIA disclosure pattern.",
+    "accessibility": [
+      "ARIA disclosure",
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "import {\n  NgpCollapsible,\n  NgpCollapsibleTrigger,\n  NgpCollapsibleContent,\n} from 'ng-primitives/collapsible';",
+        "description": "Import"
+      },
+      {
+        "name": "example-1",
+        "code": "<div ngpCollapsible>\n  <button ngpCollapsibleTrigger>Show details</button>\n  <div ngpCollapsibleContent>The content that is shown and hidden.</div>\n</div>",
+        "description": "Usage"
+      }
+    ]
+  },
+  {
+    "name": "color",
+    "entryPoint": "ng-primitives/color",
+    "exports": [
+      "Color",
+      "ColorSpace",
+      "ColorChannel",
+      "ColorChannelRange",
+      "NgpColorSlider",
+      "NgpColorSliderStateToken",
+      "ngpColorSlider",
+      "injectColorSliderState",
+      "provideColorSliderState",
+      "type NgpColorSliderState",
+      "type NgpColorSliderProps",
+      "NgpColorSliderTrack",
+      "NgpColorSliderTrackStateToken",
+      "ngpColorSliderTrack",
+      "injectColorSliderTrackState",
+      "provideColorSliderTrackState",
+      "type NgpColorSliderTrackState",
+      "type NgpColorSliderTrackProps",
+      "NgpColorSliderThumb",
+      "NgpColorSliderThumbStateToken",
+      "ngpColorSliderThumb",
+      "injectColorSliderThumbState",
+      "provideColorSliderThumbState",
+      "type NgpColorSliderThumbState",
+      "type NgpColorSliderThumbProps",
+      "NgpColorArea",
+      "NgpColorAreaStateToken",
+      "ngpColorArea",
+      "injectColorAreaState",
+      "provideColorAreaState",
+      "type NgpColorAreaState",
+      "type NgpColorAreaProps",
+      "NgpColorAreaThumb",
+      "NgpColorAreaThumbStateToken",
+      "ngpColorAreaThumb",
+      "injectColorAreaThumbState",
+      "provideColorAreaThumbState",
+      "type NgpColorAreaThumbState",
+      "type NgpColorAreaThumbProps",
+      "NgpColorField",
+      "NgpColorFieldStateToken",
+      "ngpColorField",
+      "injectColorFieldState",
+      "provideColorFieldState",
+      "type NgpColorFieldState",
+      "type NgpColorFieldProps",
+      "NgpColorPicker",
+      "NgpColorPickerStateToken",
+      "ngpColorPicker",
+      "injectColorPickerState",
+      "provideColorPickerState",
+      "type NgpColorPickerState",
+      "type NgpColorPickerProps",
+      "NgpColorSwatch",
+      "NgpColorSwatchStateToken",
+      "ngpColorSwatch",
+      "injectColorSwatchState",
+      "provideColorSwatchState",
+      "type NgpColorSwatchState",
+      "type NgpColorSwatchProps",
+      "NgpColorWheel",
+      "NgpColorWheelStateToken",
+      "ngpColorWheel",
+      "injectColorWheelState",
+      "provideColorWheelState",
+      "type NgpColorWheelState",
+      "type NgpColorWheelProps",
+      "NgpColorWheelThumb",
+      "NgpColorWheelThumbStateToken",
+      "ngpColorWheelThumb",
+      "injectColorWheelThumbState",
+      "provideColorWheelThumbState",
+      "type NgpColorWheelThumbState",
+      "type NgpColorWheelThumbProps",
+      "NgpColorSwatchPicker",
+      "NgpColorSwatchPickerStateToken",
+      "ngpColorSwatchPicker",
+      "injectColorSwatchPickerState",
+      "provideColorSwatchPickerState",
+      "type NgpColorSwatchPickerState",
+      "type NgpColorSwatchPickerProps",
+      "NgpColorSwatchPickerItem",
+      "NgpColorSwatchPickerItemStateToken",
+      "ngpColorSwatchPickerItem",
+      "injectColorSwatchPickerItemState",
+      "provideColorSwatchPickerItemState",
+      "type NgpColorSwatchPickerItemState",
+      "type NgpColorSwatchPickerItemProps"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "color primitive component",
+    "accessibility": [],
+    "examples": []
+  },
   {
     "name": "combobox",
     "entryPoint": "ng-primitives/combobox",
@@ -541,10 +686,44 @@
       "NgpDialog",
       "injectDialogRef",
       "NgpDialogRef",
+      "NgpDialogContext",
+      "NgpDialogManager",
+      "NgpDialogDescriptionStateToken",
+      "ngpDialogDescription",
+      "injectDialogDescriptionState",
+      "provideDialogDescriptionState",
+      "type NgpDialogDescriptionState",
+      "type NgpDialogDescriptionProps",
+      "NgpDialogOverlayStateToken",
+      "ngpDialogOverlay",
+      "injectDialogOverlayState",
+      "provideDialogOverlayState",
+      "type NgpDialogOverlayState",
+      "type NgpDialogOverlayProps",
+      "NgpDialogPanelStateToken",
+      "ngpDialogPanel",
+      "injectDialogPanelState",
+      "provideDialogPanelState",
+      "type NgpDialogPanelState",
+      "type NgpDialogPanelProps",
+      "NgpDialogTitleStateToken",
+      "ngpDialogTitle",
+      "injectDialogTitleState",
+      "provideDialogTitleState",
+      "type NgpDialogTitleState",
+      "type NgpDialogTitleProps",
+      "NgpDialogTriggerStateToken",
+      "ngpDialogTrigger",
+      "injectDialogTriggerState",
+      "provideDialogTriggerState",
+      "type NgpDialogTriggerState",
+      "type NgpDialogTriggerProps",
+      "NgpDialogStateToken",
+      "ngpDialog",
       "injectDialogState",
       "provideDialogState",
-      "NgpDialogContext",
-      "NgpDialogManager"
+      "type NgpDialogState",
+      "type NgpDialogProps"
     ],
     "hasSecondaryEntryPoint": true,
     "category": "feedback",
@@ -1134,6 +1313,58 @@
       "hasSizes": true
     }
   },
+  {
+    "name": "password",
+    "entryPoint": "ng-primitives/password",
+    "exports": [
+      "defaultPasswordConfig",
+      "injectPasswordConfig",
+      "NgpPasswordConfig",
+      "NgpPasswordConfigToken",
+      "providePasswordConfig",
+      "NgpPasswordInput",
+      "injectPasswordInputState",
+      "ngpPasswordInput",
+      "NgpPasswordInputProps",
+      "NgpPasswordInputState",
+      "providePasswordInputState",
+      "NgpPasswordToggle",
+      "injectPasswordToggleState",
+      "ngpPasswordToggle",
+      "NgpPasswordToggleProps",
+      "NgpPasswordToggleState",
+      "providePasswordToggleState",
+      "NgpPassword",
+      "injectPasswordState",
+      "ngpPassword",
+      "NgpPasswordProps",
+      "NgpPasswordState",
+      "providePasswordState"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "The password primitive is a form control that lets users reveal and hide the contents of a password field with an accessible toggle button.",
+    "accessibility": [
+      "screen reader"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpFormField>\n  <label ngpLabel>Password</label>\n  <div ngpPassword #password=\"ngpPassword\">\n    <input ngpPasswordInput type=\"password\" autocomplete=\"current-password\" />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"password.isVisible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  </div>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { providePasswordConfig } from 'ng-primitives/password';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    providePasswordConfig({\n      showLabel: 'Show password',\n      hideLabel: 'Hide password',\n      shownAnnouncement: 'Your password is shown',\n      hiddenAnnouncement: 'Your password is hidden',\n      ignorePasswordManagers: false,\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component, input, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEye, lucideEyeOff } from '@ng-icons/lucide';\nimport { NgpButton } from 'ng-primitives/button';\nimport {\n  injectPasswordState,\n  NgpPassword,\n  NgpPasswordInput,\n  NgpPasswordToggle,\n} from 'ng-primitives/password';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-password',\n  hostDirectives: [NgpPassword],\n  imports: [NgIcon, NgpPasswordInput, NgpPasswordToggle, NgpButton],\n  providers: [provideValueAccessor(Password), provideIcons({ lucideEye, lucideEyeOff })],\n  template: `\n    <input\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      (input)=\"onValueChange($event)\"\n      ngpPasswordInput\n      type=\"password\"\n      autocomplete=\"current-password\"\n    />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"state().visible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  `,\n  styles: `\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    [ngpPasswordInput] {\n      height: 2.125rem;\n      width: 100%;\n      border-radius: 0.5rem;\n      padding: 0 40px 0 12px;\n      border: none;\n      background: var(--ngp-background);\n      color: var(--ngp-text-primary);\n      font-size: 0.875rem;\n      letter-spacing: -0.006em;\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n    }\n\n    [ngpPasswordInput][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpPasswordInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpPasswordToggle] {\n      position: absolute;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2.125rem;\n      width: 2.125rem;\n      border: none;\n      border-radius: 0.5rem;\n      background-color: transparent;\n      color: var(--ngp-text-tertiary);\n      font-size: 1.125rem;\n      cursor: pointer;\n      outline: none;\n      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpPasswordToggle][data-hover] {\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpPasswordToggle][data-visible] {\n      color: var(--ngp-primary);\n    }\n\n    [ngpPasswordToggle][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: -2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onFocusOut($event)',\n  },\n})\nexport class Password implements ControlValueAccessor {\n  /** Access the password state to read the visibility. */\n  protected readonly state = injectPasswordState();\n\n  /** The placeholder text */\n  readonly placeholder = input<string>('');\n\n  /** The current value */\n  protected value = signal<string>('');\n\n  /** The function to call when the value changes */\n  private onChange?: ChangeFn<string>;\n\n  /** The function to call when the control is touched */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  protected onValueChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.value.set(input.value);\n    this.onChange?.(input.value);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    // only mark as touched when focus leaves the component, not when moving\n    // between the input and the toggle button\n    const host = event.currentTarget as HTMLElement;\n    if (!host.contains(event.relatedTarget as Node | null)) {\n      this.onTouched?.();\n    }\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
   {
     "name": "popover",
     "entryPoint": "ng-primitives/popover",
@@ -1336,6 +1567,52 @@
       "hasSizes": false
     }
   },
+  {
+    "name": "rating",
+    "entryPoint": "ng-primitives/rating",
+    "exports": [
+      "NgpRating",
+      "NgpRatingStateToken",
+      "ngpRating",
+      "injectRatingState",
+      "provideRatingState",
+      "type NgpRatingState",
+      "type NgpRatingProps",
+      "type NgpRatingItemState",
+      "NgpRatingConfig",
+      "provideRatingConfig",
+      "NgpRatingItem",
+      "type NgpRatingItemContext",
+      "NgpRatingItemStateToken",
+      "ngpRatingItem",
+      "injectRatingItemState",
+      "provideRatingItemState",
+      "type NgpRatingItemProps"
+    ],
+    "hasSecondaryEntryPoint": true,
+    "category": "utility",
+    "description": "Capture a star rating within a range.",
+    "accessibility": [
+      "ARIA design"
+    ],
+    "examples": [
+      {
+        "name": "example-0",
+        "code": "<div ngpRating [(ngpRatingValue)]=\"value\" [ngpRatingCount]=\"5\">\n  <span *ngpRatingItem=\"let star\">{{ star.checked ? '★' : '☆' }}</span>\n</div>",
+        "description": "Usage"
+      },
+      {
+        "name": "example-1",
+        "code": "import { provideRatingConfig } from 'ng-primitives/rating';\n\nbootstrapApplication(AppComponent, {\n  providers: [\n    provideRatingConfig({\n      count: 5,\n      clearable: false,\n      valueText: (value, count) => `${value} out of ${count} stars`,\n    }),\n  ],\n});",
+        "description": "Global Configuration"
+      }
+    ],
+    "reusableComponent": {
+      "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroStarSolid } from '@ng-icons/heroicons/solid';\nimport { injectRatingState, NgpRating, NgpRatingItem } from 'ng-primitives/rating';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-rating',\n  hostDirectives: [\n    {\n      directive: NgpRating,\n      inputs: [\n        'ngpRatingValue:value',\n        'ngpRatingCount:count',\n        'ngpRatingAllowHalf:allowHalf',\n        'ngpRatingDisabled:disabled',\n        'ngpRatingReadonly:readonly',\n        'ngpRatingClearable:clearable',\n      ],\n      outputs: ['ngpRatingValueChange:valueChange'],\n    },\n  ],\n  imports: [NgIcon, NgpRatingItem],\n  providers: [provideIcons({ heroStarSolid }), provideValueAccessor(Rating)],\n  template: `\n    <span class=\"star\" *ngpRatingItem=\"let star\">\n      <ng-icon class=\"star-background\" name=\"heroStarSolid\" />\n      <span class=\"star-fill\" [style.width.%]=\"star.fraction * 100\">\n        <ng-icon name=\"heroStarSolid\" />\n      </span>\n    </span>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.25rem;\n      outline: none;\n      border-radius: 0.5rem;\n      cursor: pointer;\n    }\n\n    :host[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n\n    :host[data-readonly] {\n      cursor: default;\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .star {\n      position: relative;\n      display: inline-flex;\n      font-size: 1.5rem;\n      line-height: 1;\n      color: var(--ngp-background-secondary);\n      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .star-fill {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      display: inline-flex;\n      overflow: hidden;\n      color: var(--ngp-primary);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Rating implements ControlValueAccessor {\n  /** Access the rating state. */\n  private readonly state = injectRatingState();\n\n  /** The onChange callback function. */\n  private onChange?: ChangeFn<number>;\n\n  /** The onTouched callback function. */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the rating, call onChange with the new value.\n    this.state()\n      .valueChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  writeValue(value: number): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().setValue(value, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+      "hasVariants": false,
+      "hasSizes": true
+    }
+  },
   {
     "name": "resize",
     "entryPoint": "ng-primitives/resize",

package/src/generated/reusable-components.json

@@ -125,6 +125,13 @@
     "hasVariants": false,
     "hasSizes": true
   },
+  {
+    "name": "password",
+    "code": "import { Component, input, signal } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { lucideEye, lucideEyeOff } from '@ng-icons/lucide';\nimport { NgpButton } from 'ng-primitives/button';\nimport {\n  injectPasswordState,\n  NgpPassword,\n  NgpPasswordInput,\n  NgpPasswordToggle,\n} from 'ng-primitives/password';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-password',\n  hostDirectives: [NgpPassword],\n  imports: [NgIcon, NgpPasswordInput, NgpPasswordToggle, NgpButton],\n  providers: [provideValueAccessor(Password), provideIcons({ lucideEye, lucideEyeOff })],\n  template: `\n    <input\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      (input)=\"onValueChange($event)\"\n      ngpPasswordInput\n      type=\"password\"\n      autocomplete=\"current-password\"\n    />\n    <button ngpButton ngpPasswordToggle>\n      <ng-icon [name]=\"state().visible() ? 'lucideEyeOff' : 'lucideEye'\" />\n    </button>\n  `,\n  styles: `\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    [ngpPasswordInput] {\n      height: 2.125rem;\n      width: 100%;\n      border-radius: 0.5rem;\n      padding: 0 40px 0 12px;\n      border: none;\n      background: var(--ngp-background);\n      color: var(--ngp-text-primary);\n      font-size: 0.875rem;\n      letter-spacing: -0.006em;\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n    }\n\n    [ngpPasswordInput][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    [ngpPasswordInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpPasswordToggle] {\n      position: absolute;\n      top: 0;\n      right: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: 2.125rem;\n      width: 2.125rem;\n      border: none;\n      border-radius: 0.5rem;\n      background-color: transparent;\n      color: var(--ngp-text-tertiary);\n      font-size: 1.125rem;\n      cursor: pointer;\n      outline: none;\n      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    [ngpPasswordToggle][data-hover] {\n      color: var(--ngp-text-secondary);\n    }\n\n    [ngpPasswordToggle][data-visible] {\n      color: var(--ngp-primary);\n    }\n\n    [ngpPasswordToggle][data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: -2px;\n    }\n  `,\n  host: {\n    '(focusout)': 'onFocusOut($event)',\n  },\n})\nexport class Password implements ControlValueAccessor {\n  /** Access the password state to read the visibility. */\n  protected readonly state = injectPasswordState();\n\n  /** The placeholder text */\n  readonly placeholder = input<string>('');\n\n  /** The current value */\n  protected value = signal<string>('');\n\n  /** The function to call when the value changes */\n  private onChange?: ChangeFn<string>;\n\n  /** The function to call when the control is touched */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string): void {\n    this.value.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  protected onValueChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.value.set(input.value);\n    this.onChange?.(input.value);\n  }\n\n  protected onFocusOut(event: FocusEvent): void {\n    // only mark as touched when focus leaves the component, not when moving\n    // between the input and the toggle button\n    const host = event.currentTarget as HTMLElement;\n    if (!host.contains(event.relatedTarget as Node | null)) {\n      this.onTouched?.();\n    }\n  }\n}\n",
+    "primitive": "password",
+    "hasVariants": false,
+    "hasSizes": true
+  },
   {
     "name": "popover",
     "code": "import { Directive, input } from '@angular/core';\nimport { injectPopoverTriggerState } from 'ng-primitives/popover';\nimport { NgpPopoverTrigger } from 'ng-primitives/popover';\nimport { Popover } from './popover';\n\n@Directive({\n  selector: '[appPopoverTrigger]',\n  hostDirectives: [\n    {\n      directive: NgpPopoverTrigger,\n      inputs: [\n        'ngpPopoverTriggerDisabled:appPopoverTriggerDisabled',\n        'ngpPopoverTriggerPlacement:appPopoverTriggerPlacement',\n        'ngpPopoverTriggerOffset:appPopoverTriggerOffset',\n        'ngpPopoverTriggerShowDelay:appPopoverTriggerShowDelay',\n        'ngpPopoverTriggerHideDelay:appPopoverTriggerHideDelay',\n        'ngpPopoverTriggerFlip:appPopoverTriggerFlip',\n        'ngpPopoverTriggerContainer:appPopoverTriggerContainer',\n        'ngpPopoverTriggerCloseOnOutsideClick:appPopoverTriggerCloseOnOutsideClick',\n        'ngpPopoverTriggerCloseOnEscape:appPopoverTriggerCloseOnEscape',\n        'ngpPopoverTriggerScrollBehavior:appPopoverTriggerScrollBehavior',\n        'ngpPopoverTriggerContext:appPopoverTrigger',\n      ],\n    },\n  ],\n})\nexport class PopoverTrigger {\n  /** Access the popover trigger */\n  private readonly popoverTrigger = injectPopoverTriggerState();\n\n  /** Define the content of the popover */\n  readonly content = input.required<string>({\n    alias: 'appPopoverTrigger',\n  });\n\n  constructor() {\n    this.popoverTrigger().popover.set(Popover);\n  }\n}\n",
@@ -153,6 +160,13 @@
     "hasVariants": false,
     "hasSizes": false
   },
+  {
+    "name": "rating",
+    "code": "import { Component } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroStarSolid } from '@ng-icons/heroicons/solid';\nimport { injectRatingState, NgpRating, NgpRatingItem } from 'ng-primitives/rating';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-rating',\n  hostDirectives: [\n    {\n      directive: NgpRating,\n      inputs: [\n        'ngpRatingValue:value',\n        'ngpRatingCount:count',\n        'ngpRatingAllowHalf:allowHalf',\n        'ngpRatingDisabled:disabled',\n        'ngpRatingReadonly:readonly',\n        'ngpRatingClearable:clearable',\n      ],\n      outputs: ['ngpRatingValueChange:valueChange'],\n    },\n  ],\n  imports: [NgIcon, NgpRatingItem],\n  providers: [provideIcons({ heroStarSolid }), provideValueAccessor(Rating)],\n  template: `\n    <span class=\"star\" *ngpRatingItem=\"let star\">\n      <ng-icon class=\"star-background\" name=\"heroStarSolid\" />\n      <span class=\"star-fill\" [style.width.%]=\"star.fraction * 100\">\n        <ng-icon name=\"heroStarSolid\" />\n      </span>\n    </span>\n  `,\n  styles: `\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.25rem;\n      outline: none;\n      border-radius: 0.5rem;\n      cursor: pointer;\n    }\n\n    :host[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n\n    :host[data-readonly] {\n      cursor: default;\n    }\n\n    :host[data-focus-visible] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 2px;\n    }\n\n    .star {\n      position: relative;\n      display: inline-flex;\n      font-size: 1.5rem;\n      line-height: 1;\n      color: var(--ngp-background-secondary);\n      transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);\n    }\n\n    .star-fill {\n      position: absolute;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n      display: inline-flex;\n      overflow: hidden;\n      color: var(--ngp-primary);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Rating implements ControlValueAccessor {\n  /** Access the rating state. */\n  private readonly state = injectRatingState();\n\n  /** The onChange callback function. */\n  private onChange?: ChangeFn<number>;\n\n  /** The onTouched callback function. */\n  protected onTouched?: TouchedFn;\n\n  constructor() {\n    // Whenever the user interacts with the rating, call onChange with the new value.\n    this.state()\n      .valueChange.pipe(takeUntilDestroyed())\n      .subscribe(value => this.onChange?.(value));\n  }\n\n  writeValue(value: number): void {\n    // writing a value from the model must not re-emit through onChange\n    this.state().setValue(value, { emit: false });\n  }\n\n  registerOnChange(fn: ChangeFn<number>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.state().setDisabled(isDisabled);\n  }\n}\n",
+    "primitive": "rating",
+    "hasVariants": false,
+    "hasSizes": true
+  },
   {
     "name": "search",
     "code": "import { Component, input, model } from '@angular/core';\nimport { ControlValueAccessor } from '@angular/forms';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroMagnifyingGlass } from '@ng-icons/heroicons/outline';\nimport { NgpButton } from 'ng-primitives/button';\nimport { NgpInput } from 'ng-primitives/input';\nimport { NgpSearch, NgpSearchClear } from 'ng-primitives/search';\nimport { ChangeFn, provideValueAccessor, TouchedFn } from 'ng-primitives/utils';\n\n@Component({\n  selector: 'app-search',\n  hostDirectives: [NgpSearch],\n  imports: [NgIcon, NgpSearchClear, NgpInput, NgpButton],\n  providers: [provideValueAccessor(Search), provideIcons({ heroMagnifyingGlass })],\n  template: `\n    <ng-icon name=\"heroMagnifyingGlass\" />\n    <input\n      [value]=\"query()\"\n      [placeholder]=\"placeholder()\"\n      (input)=\"onQueryChange($event)\"\n      ngpInput\n      type=\"search\"\n    />\n    <button ngpSearchClear ngpButton aria-label=\"Clear search\">Clear</button>\n  `,\n  styles: `\n    :host {\n      display: block;\n      position: relative;\n    }\n\n    [ngpInput] {\n      height: 36px;\n      width: 100%;\n      border-radius: 8px;\n      padding: 0 16px 0 40px;\n      border: none;\n      background: var(--ngp-background);\n      box-shadow: var(--ngp-input-shadow);\n      outline: none;\n    }\n\n    /* clears the 'X' from Chrome */\n    [ngpInput]::-webkit-search-decoration,\n    [ngpInput]::-webkit-search-cancel-button,\n    [ngpInput]::-webkit-search-results-button,\n    [ngpInput]::-webkit-search-results-decoration {\n      display: none;\n    }\n\n    [ngpInput][data-focus] {\n      outline: 2px solid var(--ngp-focus-ring);\n      outline-offset: 0px;\n    }\n\n    [ngpInput]::placeholder {\n      color: var(--ngp-text-placeholder);\n    }\n\n    [ngpButton] {\n      position: absolute;\n      top: 0;\n      right: 0;\n      height: 36px;\n      padding: 0 16px;\n      border: none;\n      border-radius: 0 8px 8px 0;\n      background-color: transparent;\n      color: var(--ngp-text-blue);\n      font-size: 0.875rem;\n      line-height: 1.25rem;\n      cursor: pointer;\n      outline: none;\n      display: none;\n    }\n\n    [ngpButton]:not([data-empty]) {\n      display: block;\n    }\n\n    ng-icon {\n      position: absolute;\n      font-size: 1.25rem;\n      top: 18px;\n      left: 12px;\n      transform: translateY(-50%);\n      color: var(--ngp-text-tertiary);\n    }\n  `,\n  host: {\n    '(focusout)': 'onTouched?.()',\n  },\n})\nexport class Search implements ControlValueAccessor {\n  /** The search query */\n  readonly query = model<string>('');\n\n  /** The placeholder text */\n  readonly placeholder = input<string>('');\n\n  /** The function to call when the value changes */\n  private onChange?: ChangeFn<string>;\n\n  /** The function to call when the control is touched */\n  protected onTouched?: TouchedFn;\n\n  writeValue(value: string): void {\n    this.query.set(value);\n  }\n\n  registerOnChange(fn: ChangeFn<string>): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: TouchedFn): void {\n    this.onTouched = fn;\n  }\n\n  protected onQueryChange(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.query.set(input.value);\n    this.onChange?.(input.value);\n  }\n}\n",