feat(docs): update layout topics with new skill

docs/xplat/src/content/en/components/layouts/divider.mdx

@@ -1,54 +1,53 @@
 ---
-title: "{Platform} Divider | Layout Controls | Infragistics"
-description: Use Infragistics' {Platform} divider component to easily create a horizontal/vertical rule as a break between content to better organize information on a page.
-keywords: "{ProductName}, UI controls, {Platform} widgets, Web widgets, UI widgets, {Platform}, Native {Platform} Components Suite, Native {Platform} Controls, Native {Platform} Components Library, {Platform} DIvider components, {Platform} Divider controls"
+title: "{Platform} Divider Component | Layouts | Infragistics"
+description: "{Platform} Divider is a layout component for separating related content with a horizontal or vertical rule."
+keywords: "{Platform} Divider, divider component, layout separator, {ProductName}, Infragistics"
 license: MIT
 mentionedTypes: ["Divider"]
 llms:
-  description: "The {ProductName} Divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page."
+  description: "The {ProductName} Divider is a layout component for separating related content with a horizontal or vertical rule."
 ---
 import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
+# Divider Component
 
-# {Platform} Divider
+The {ProductName} Divider is a layout component for separating related content with a horizontal or vertical rule.
 
-The {ProductName} Divider allows the content author to easily create a horizontal/vertical rule as a break between content to better organize information on a page.
+## Overview
 
-## {Platform} Divider Example
+The divider creates a lightweight visual boundary between adjacent pieces of content without introducing a new container or interaction model.
 
-<Sample src="/layouts/divider/overview" height={220} alt="{Platform} Divider Example" />
+### When to Use
 
+Use the divider when you need a subtle visual separator between sections, list groups, form areas, or menu items.
 
+### When Not to Use
 
-## Dependencies
+Do not use the divider when spacing, headings, or card boundaries already communicate the separation clearly without an extra rule.
 
+<Sample src="/layouts/divider/overview" height={220} alt="{Platform} Divider overview example" />
+
+## Getting Started
+
+Before you add the divider, complete the shared {ProductName} setup in the [Getting Started](../general-getting-started.md) topic.
 
 <PlatformBlock for="WebComponents">
 
+Register the divider component before you use it.
 
-First, you need to install the {ProductName} npm package by running the following command:
+```ts
+import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
 
-```cmd
-npm install {PackageWebComponents}
+defineComponents(IgcDividerComponent);
 ```
 
 </PlatformBlock>
 
-
-
 <PlatformBlock for="React">
 
-
-
-First, you need to the install the corresponding {ProductName} npm package by running the following command:
-
-```cmd
-npm install igniteui-react
-```
-
-You will then need to import the <ApiLink pkg="core" type="Divider" />, its necessary CSS, and register its module, like so:
+Import the divider wrapper, its module registration, and the theme stylesheet before you render the component.
 
 ```tsx
 import { IgrDividerModule, IgrDivider } from 'igniteui-react';
@@ -57,50 +56,31 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 IgrDividerModule.register();
 ```
 
-
 </PlatformBlock>
 
-
-Before using the <ApiLink pkg="core" type="Divider" />, you need to register it as follows:
-
-
 <PlatformBlock for="Blazor">
 
-```csharp
-// in Program.cs file
+Register the divider module in `Program.cs`.
 
+```csharp
 builder.Services.AddIgniteUIBlazor(typeof(IgbDividerModule));
 ```
 
-</PlatformBlock>
-
-<PlatformBlock for="Blazor">
-
-
-
-You will also need to link an additional CSS file to apply the styling to the <ApiLink pkg="core" type="Divider" /> component. The following needs to be placed in the **wwwroot/index.html** file in a **Blazor Web Assembly** project or the **Pages/_Host.cshtml** file in a **Blazor Server** project:
+Add the theme stylesheet to your host page.
 
 ```razor
 <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
 ```
 
-
 </PlatformBlock>
 
+## Usage
 
-<PlatformBlock for="WebComponents">
-
-```ts
-import { defineComponents, IgcDividerComponent } from 'igniteui-webcomponents';
-
-defineComponents(IgcDividerComponent);
-```
-
-</PlatformBlock>
+Render the divider wherever you need a visual break between related pieces of content.
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+### Declare a Divider
 
-The <ApiLink pkg="core" type="Divider" /> is capable of displaying images, initials, or any other content, including icons. Declaring an <ApiLink pkg="core" type="Divider" /> is as simple as:
+Start with the default horizontal divider when you need a basic separator line.
 
 <PlatformBlock for="WebComponents">
 
@@ -126,10 +106,9 @@ The <ApiLink pkg="core" type="Divider" /> is capable of displaying images, initi
 
 </PlatformBlock>
 
-## Usage
-### Vertical Divider
+### Make the Divider Vertical
 
-If the <ApiLink pkg="core" type="Divider" member="vertical" label="Vertical" /> attribute is set the direction of the divider would be changed from horizontal to vertical.
+Set <ApiLink pkg="core" type="Divider" member="vertical" label="Vertical" /> when the separator should run top-to-bottom instead of left-to-right.
 
 <PlatformBlock for="WebComponents">
 
@@ -155,12 +134,11 @@ If the <ApiLink pkg="core" type="Divider" member="vertical" label="Vertical" />
 
 </PlatformBlock>
 
-<Sample src="/layouts/divider/vertical" height={330} alt="{Platform} Divider Vertical Example" />
-
+<Sample src="/layouts/divider/vertical" height={330} alt="{Platform} Vertical divider example" />
 
-### Type
+### Change the Line Style
 
-The <ApiLink pkg="core" type="Divider" member="type" label="Type" /> attribute determines whether to render a `solid` or a `dashed` divider line. The default value is `solid`.
+Set the <ApiLink pkg="core" type="Divider" member="type" label="Type" /> attribute to switch between `solid` and `dashed` rendering.
 
 <PlatformBlock for="WebComponents">
 
@@ -186,62 +164,51 @@ The <ApiLink pkg="core" type="Divider" member="type" label="Type" /> attribute d
 
 </PlatformBlock>
 
-<Sample src="/layouts/divider/dashed" height={220} alt="{Platform} Divider Dashed Example" />
+<Sample src="/layouts/divider/dashed" height={220} alt="{Platform} Dashed divider example" />
 
+### Add Inset Spacing
 
-### Inset Divider
-
-The <ApiLink pkg="core" type="Divider" /> can be set in on both sides. To `inset` the divider, set the <ApiLink pkg="core" type="Divider" member="middle" label="Middle" /> attribute to true in combination with the `--inset` css variable. This will shrink the divider line from both sides. The default value of the <ApiLink pkg="core" type="Divider" member="middle" label="Middle" /> attribute is false.
+Set <ApiLink pkg="core" type="Divider" member="middle" label="Middle" /> together with the `--inset` CSS variable when you want the divider to shrink from both sides.
 
 ```css
-/* DividerStyles.css */
-.withInset{
-    --inset: 100px;
-    --color:red;
+.withInset {
+  --inset: 100px;
+  --color: red;
 }
 ```
 
 <PlatformBlock for="WebComponents">
 
 ```html
-// Both side
 <igc-divider middle="true" class="withInset"></igc-divider>
-// Left side only
-<igc-divider></igc-divider>
+<igc-divider class="withInset"></igc-divider>
 ```
 
 </PlatformBlock>
 
-
 <PlatformBlock for="React">
 
 ```tsx
-// Both side
 <IgrDivider middle="true" className="withInset"></IgrDivider>
-// Left side only
-<IgrDivider  className="withInset"></IgrDivider>
+<IgrDivider className="withInset"></IgrDivider>
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
 ```razor
-// Both side
 <IgbDivider Middle="True" class="withInset"></IgbDivider>
-// Left side only
 <IgbDivider class="withInset"></IgbDivider>
 ```
 
 </PlatformBlock>
 
+<Sample src="/layouts/divider/middle" height={220} alt="{Platform} Inset divider example" />
 
-<Sample src="/layouts/divider/middle" height={220} alt="{Platform} Divider Middle Inset Example" />
-
+### Separate Select Items
 
-### Using Divider Inside Select Component
-
-The following sample illustrates how the <ApiLink pkg="core" type="Divider" /> can be integrated within the <ApiLink pkg="core" type="Select" /> in order to distinguish two groups of items.
+Place a divider inside <ApiLink pkg="core" type="Select" /> to split option groups visually.
 
 <PlatformBlock for="WebComponents">
 
@@ -265,7 +232,6 @@ The following sample illustrates how the <ApiLink pkg="core" type="Divider" /> c
   <IgrDivider></IgrDivider>
   <IgrSelectItem><span>Item 2</span></IgrSelectItem>
 </IgrSelect>
-
 ```
 
 </PlatformBlock>
@@ -274,29 +240,82 @@ The following sample illustrates how the <ApiLink pkg="core" type="Divider" /> c
 
 ```razor
 <IgbSelect>
- <IgbSelectItem>Item 1</IgbSelectItem>
- <IgbSelectItem>Item 2</IgbSelectItem>
- <IgbDivider></IgbDivider>
- <IgbSelectItem>Item 2</IgbSelectItem>
+  <IgbSelectItem>Item 1</IgbSelectItem>
+  <IgbSelectItem>Item 2</IgbSelectItem>
+  <IgbDivider></IgbDivider>
+  <IgbSelectItem>Item 2</IgbSelectItem>
 </IgbSelect>
 ```
 
 </PlatformBlock>
 
-<Sample src="/layouts/divider/select" height={330} alt="{Platform} Divider Select Example" />
+<Sample src="/layouts/divider/select" height={330} alt="{Platform} Divider inside select example" />
+
+## Best Practices
+
+Use the divider to clarify grouping, not as a default decoration between every element.
+
+- Add a divider only when two adjacent content groups need an explicit visual boundary.
+- Prefer horizontal dividers for stacked content and vertical dividers for side-by-side layouts.
+- Keep inset and color customizations consistent with the surrounding layout system.
+- Avoid overusing dashed or colored dividers when plain spacing already communicates structure.
+
+## Properties
 
+Use the generated API reference for the full surface; the rows below mark the core options covered on this page.
 
-## CSS Variables
-### Inset
-The `--inset` css variable shrinks the divider by the given amount from the start. If middle is set it will shrink from both sides.
+| Name | Type | Default | Description |
+| -- | -- | -- | -- |
+| `middle` | build-generated | build-generated | Build injects verified core divider properties here from the typed API source. |
+| `type` | build-generated | build-generated | Build injects verified core divider properties here from the typed API source. |
+| `vertical` | build-generated | build-generated | Build injects verified core divider properties here from the typed API source. |
 
-### Color
-The `--color` css variable sets the color of the divider.
+## Styling
 
+Use CSS variables to control divider inset and color without changing the markup structure.
 
+| Variable | What it changes |
+| -- | -- |
+| `--inset` | Shrinks the divider from the start edge, or from both sides when `middle` is enabled. |
+| `--color` | Sets the divider line color. |
+
+## Accessibility
+
+The divider is a visual separator and does not introduce keyboard interaction of its own.
+
+### Keyboard Interaction
+
+The divider does not define component-specific keyboard shortcuts.
+
+| Key | Action |
+| -- | -- |
+| n/a | The divider is not an interactive control. |
+
+### Screen Readers / ARIA
+
+The divider is intended as a structural visual aid rather than an interactive widget.
+
+- Keep the divider in a layout context where the surrounding headings, labels, or grouping already communicate the content structure.
+- Do not rely on the divider alone to explain meaning that must also be available to assistive technologies.
+
+### Accessibility Compliance
+
+[VERIFY: official accessibility conformance target for the divider component]
+
+| Criterion | How the component complies |
+| -- | -- |
+| [1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships) | The divider can reinforce visual grouping when it is paired with an accessible surrounding structure. |
+
+Your responsibilities:
+
+- Provide headings, labels, or other semantic grouping around the divider where structure matters.
+- Avoid using color or line style alone to communicate meaning.
+- Validate custom divider colors against your application's contrast requirements when they convey state or emphasis.
 
 ## API References
+
 <ApiLink pkg="core" type="Divider" />
+
 ## Additional Resources
 
 - [{ProductName} **Forums**]({ForumsLink})