feat(docs): update data entry and dropdown topics

.claude/skills/igniteui-doc-topics/SKILL.md

@@ -104,6 +104,17 @@ cheat-sheet's "two classic confusions" section explains the reasoning.
 6. **Self-check against the rubric** before presenting — especially mode-bleed (C-checks) and
    metadata (D-checks). Fix, then deliver the `.mdx`.
 
+### Category/index topics are a separate blueprint
+
+Do not apply the component-topic blueprint to a category or index page. A category page is a
+reference/navigation map, not a composite component page. Its opening should be a short title and
+definition, followed directly by **Types** or **Members**. Do **not** add the component-only
+`Overview`, `### When to Use`, `### When Not to Use`, `Live Demo`, `Getting Started`, `Usage`,
+`Best Practices`, `Properties`, `Accessibility`, or `Troubleshooting` sections to the category
+introduction. Put selection guidance in the one-line definition or in the relevant type/member
+entry, and put a verified sample inside that entry when one exists. Finish with `Next Steps`,
+`API References`, and `Additional Resources` as applicable.
+
 ## Audit workflow
 
 1. **Classify** the topic and identify its doc set (Angular vs xplat) and type.

.claude/skills/igniteui-doc-topics/references/audit-rubric.md

@@ -12,6 +12,14 @@ concrete rule below (structure, naming, Diátaxis mode, or metadata) and to a fi
 
 ## Checks
 
+### Category/index exception
+Classify the topic before applying the checks below. A category/index page is evaluated against the
+category blueprint in `house-style.md`, not the component-topic checklist. Do not report missing
+component sections such as `Overview`, `Live Demo`, `Getting Started`, `Usage`, or `Accessibility`
+when the page is correctly structured as `Types/Members` → optional `Key Features` → `Next Steps` /
+`API References` / `Additional Resources`. Report a component section appearing in the category
+introduction as information-architecture drift instead.
+
 ### A. Structure & order
 - A1 (Error) A required section is missing (Overview, Live Demo, Getting Started, Usage,
   Best Practices, Properties, Accessibility, API References, Additional Resources on a component

.claude/skills/igniteui-doc-topics/references/house-style.md

@@ -225,8 +225,15 @@ Title + intro → **What You'll Learn** (roadmap) → Concept sections → *Key
 *When to Use / When Not to Use* (cond.) → **Next Steps** → **API References / Additional Resources**.
 
 **5b. Category / index overview** (Diátaxis: *reference/navigation* — a map) — e.g. "Charts overview":
-Title + intro → **Types / Members** (identical micro-structure per entry: one-line def + link + small
-`<Sample>`) → *Key Features* (cond.) → **Next Steps / API References / Additional Resources**.
+Title + one-line definition → **Types / Members** (identical micro-structure per entry: one-line
+definition + link + small verified `<Sample>` when available) → *Key Features* (cond.) →
+**Next Steps / API References / Additional Resources**.
+
+Category pages do **not** use the component-topic sections `Overview`, `When to Use`, `When Not to
+Use`, `Live Demo`, `Getting Started`, `Usage`, `Best Practices`, `Properties`, `Accessibility`, or
+`Troubleshooting` as an introductory sequence. Those sections describe one component and create the
+wrong information architecture for a category map. Selection guidance belongs in the category
+definition or in the relevant type/member entry; a demo belongs inside the entry it demonstrates.
 
 Guardrails: cap each section at ~3 short paragraphs (else add sub-sections); isolate marketing copy in
 a single "Why {ProductName}" section — never thread it through instructional content.

docs/angular/src/content/en/components/autocomplete.mdx

@@ -11,24 +11,43 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
-# Angular Autocomplete Directive Overview
+# Autocomplete Directive
 
 Angular Autocomplete is a search box directive that enables users to easily find, filter and select an item from a list of suggestions while they type. Feature-rich, it supports seamless data binding, filtering, grouping, UI customization options, and other built-in functionalities so developers can create intuitive autocomplete search experience.
 
-<div class="highlight">
+## Overview
 
 The <ApiLink type="AutocompleteDirective" label="igxAutocomplete" /> directive provides a way to enhance a text input by showing an <ApiLink type="DropDown" label="igxDropDown" /> with suggested options, provided by the developer. The suggestions will show once you start typing in the text input or use the `Arrow Up`/`Arrow Down` keys.
-</div>
 
-## Angular Autocomplete Example
+### When to Use
+
+Use the autocomplete directive when a text input should suggest matching options as the user types — searching a long list of towns, users, or products.
+
+### When Not to Use
+
+When users must pick from a small, fixed list without typing, use the <ApiLink type="DropDown" label="Drop Down" /> directly instead of layering autocomplete on an input.
+
+## Live Demo
 
 The Angular Autocomplete example below generates a dropdown suggestion list as users start typing the name of a town in the input textbox.
 
 <Sample src="/data-entries/autocomplete" height={400} alt="Angular Autocomplete Example" />
 
-<hr/>
+## Anatomy
+
+{/* TODO: add an annotated screenshot of the input, suggestion list, list items, and active item. */}
 
-## Getting Started with Ignite UI for Angular Autocomplete
+The autocomplete combines an input enhanced with `igxAutocomplete` and an `igxDropDown` that provides the suggestions.
+
+```text
+Input element
+└── igxAutocomplete directive
+    └── igxDropDown
+        ├── igxDropDownItemGroup (optional)
+        └── igxDropDownItem
+```
+
+## Getting Started
 
 To get started with the Ignite UI for Angular for [Angular Components](https://www.infragistics.com/products/ignite-ui-angular) and Autocomplete directive in particular, first you need to install Ignite UI for Angular. In an existing Angular application, type the following command:
 
@@ -94,7 +113,7 @@ export class HomeComponent {}
 
 Now that you have the Ignite UI for Angular Action Strip module or directive imported, you can start with a basic configuration of the `igxAutocomplete` component.
 
-## Using the Angular Autocomplete
+## Usage
 
 In order to apply the autocomplete functionality to an input, add the `igxAutocomplete` directive, referencing the dropdown:
 
@@ -225,9 +244,26 @@ If everything went right, you should see this in your browser:
 
 <hr/>
 
-## Keyboard Navigation
+## Best Practices
 
-<hr/>
+- Keep the suggestion list short enough to scan quickly and provide filtering for long lists.
+- Use clear labels and preserve the input value when the user selects a suggestion.
+- Do not use autocomplete when the available choices are few and fixed; use a dropdown instead.
+
+## Properties
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| <ApiLink type="AutocompleteDirective" member="disabled" label="disabled" /> | See API reference | See API reference | Disables autocomplete interaction when set. |
+| <ApiLink type="AutocompleteDirective" member="autocompleteSettings" label="autocompleteSettings" /> | See API reference | See API reference | Configures dropdown positioning, scrolling, and outlet behavior. |
+
+## Styling
+
+Every component has its own theme. To get the `igxAutocomplete` styled, style its containing components — the <ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" /> and the <ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" />. See the [`igxInputGroup`](/input-group#styling) and [`igxDropdown`](/drop-down#styling) styling sections.
+
+## Accessibility
+
+### Keyboard Interaction
 
 - <kbd>⬆</kbd> / <kbd>⬇</kbd> or typing in the input will open the dropdown, if it's closed.
 - <kbd>⬇</kbd> - will move to the next dropdown item.
@@ -239,51 +275,42 @@ If everything went right, you should see this in your browser:
 When the Angular autocomplete opens, then the first item on the list is automatically selected. The same is valid when the list is filtered.
 </DocsAside>
 
-You can also see how our [WYSIWYG App Builder™](https://www.infragistics.com/products/appbuilder) streamlines the entire design-to-code story by 80% using real Angular components.
-
-## Compatibility support
+### Screen Readers / ARIA
 
 Applying the `igxAutocomplete` directive will decorate the element with the following ARIA attributes:
 
-- role="combobox" - role of the element, where the directive is applied.
-- aria-autocomplete="list" - indicates that input completion suggestions are provided in the form of list
-- aria-haspopup="listbox" attribute to indicate that `igxAutocomplete` can pop-up a container to suggest values.
-- aria-expanded="true"/"false" - value depending on the collapsed state of the dropdown.
-- aria-owns="dropDownID" - id of the dropdown used for displaying suggestions.
-- aria-activedescendant="listItemId" - value is set to the id of the current active list element.
+- role="combobox"
+- aria-autocomplete="list"
+- aria-haspopup="listbox"
+- aria-expanded="true"/"false"
+- aria-owns="dropDownID"
+- aria-activedescendant="listItemId"
 
-The `drop-down` component, used as provider for suggestions, will expose the following ARIA attributes:
+The `drop-down` component exposes `listbox`, `group`, and `option` roles for its suggestion containers and items.
 
-- role="listbox" - applied on the `igx-drop-down` component container
-- role="group" - applied on the `igx-drop-down-item-group` component container
-- role="option" - applied on the `igx-drop-down-item` component container
-- aria-disabled="true"/"false" applied on `igx-drop-down-item`, `igx-drop-down-item-group` component containers when they are disabled.
+## Troubleshooting
 
-## Styling
-
-Every component has its own theme.
+### Why does the suggestion list not open?
 
-To get the `igxAutocomplete` styled, you have to style its containing components. In our case, these are the <ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" /> and the <ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" />.
+Make sure the input references an `igxDropDown` through the `igxAutocomplete` directive and that the dropdown contains items to display.
 
-Take a look at the [`igxInputGroup`](/input-group#styling) and the [`igxDropdown`](/drop-down#styling) styling sections to get a better understanding of how to style those two components.
+### Why are suggestions not filtered?
 
-## API Reference
+The directive displays the provided items but does not define the filtering rule. Filter the collection before rendering the dropdown items.
 
-<hr/>
+## API References
 
 - <ApiLink type="AutocompleteDirective" />
 - <ApiLink type="DropDown" />
 - <ApiLink type="InputGroup" />
 
-## Theming Dependencies
+## Dependencies
 
 - <ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="IgxDropDown Theme" />
 - <ApiLink kind="sass" module="themes" type="function-input-group-theme" label="IgxInputGroup Theme" />
 
 ## Additional Resources
 
-<hr/>
-
 - [IgxDropDown](/drop-down)
 - [IgxInputGroup](/input-group)
 - [Template Driven Forms Integration](/input-group)