feat(breadcrumbs): add docs

docs/angular/src/content/en/components/toc.json

@@ -2234,6 +2234,11 @@
     "name": "Avatar",
     "href": "layouts/avatar.mdx"
   },
+  {
+    "name": "Breadcrumbs",
+    "href": "layouts/breadcrumbs.mdx",
+    "new": true
+  },
   {
     "name": "Expansion Panel",
     "href": "expansion-panel.mdx",

docs/xplat/src/content/en/components/inputs/color-picker.mdx

@@ -25,7 +25,7 @@ import colorPickerDoNot from '@xplat-images/color-picker/color-picker-do-not.png
 import colorPickerDoNot2x from '@xplat-images/color-picker/color-picker-do-not@2x.png';
 
 {/*
-React and Blazor are excluded in toc.json until a released igniteui-react / IgniteUI.Blazor version wraps the component; their blocks below are staged and must be verified against the released wrapper APIs before removing the exclusion.
+Blazor is excluded in toc.json until a released IgniteUI.Blazor version wraps the component; its blocks below are staged and must be verified against the released wrapper API before removing the exclusion.
 */}
 
 # Color Picker Component <Badge variant="new" />
@@ -38,13 +38,13 @@ The {Platform} Color Picker demo shows the anchor in `input` mode that previews
 
 <PlatformBlock for="Angular">
 
-<Sample src="/data-entries/color-picker-overview" height={740} position="center" noBackground={false} showThemePicker={true} alt="{Platform} Color Picker example" />
+<Sample src="/data-entries/color-picker-overview" height={790} position="center" noBackground={false} showThemePicker={true} alt="{Platform} Color Picker example" />
 
 </PlatformBlock>
 
 <PlatformBlock for="React,WebComponents,Blazor">
 
-<Sample src="/inputs/color-picker/overview" height={740} position="center" noBackground={false} showThemePicker={true} alt="{Platform} Color Picker example" />
+<Sample src="/inputs/color-picker/overview" height={790} position="center" noBackground={false} showThemePicker={true} alt="{Platform} Color Picker example" />
 
 </PlatformBlock>
 
@@ -151,9 +151,7 @@ The {Platform} Color Picker is composed of an anchor that opens a popover dropdo
 
 ## Getting Started
 
-To use the {Platform} Color Picker, complete the <PlatformBlock for="Angular">[{ProductName} Getting Started]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/general/getting-started)</PlatformBlock><PlatformBlock for="WebComponents, React, Blazor">[{ProductName} Getting Started](../general-getting-started.mdx)</PlatformBlock> topic for the basic project setup, then register the component.
-
-### Prerequisites and Version Compatibility
+To use the {Platform} Color Picker, complete the <PlatformBlock for="Angular">[{ProductName} Getting Started](../general/getting-started.mdx)</PlatformBlock><PlatformBlock for="WebComponents, React, Blazor">[{ProductName} Getting Started](../general-getting-started.mdx)</PlatformBlock> topic for the basic project setup, then register the component.
 
 <PlatformBlock for="WebComponents, Angular">
 
@@ -171,6 +169,12 @@ npm install igniteui-webcomponents
 
 </PlatformBlock>
 
+<PlatformBlock for="React">
+
+The Color Picker requires `igniteui-react` 19.9.0 or later.
+
+</PlatformBlock>
+
 <PlatformBlock for="WebComponents, Angular">
 
 Import [`IgcColorPickerComponent`]({environment:infragisticsBaseUrl}/api/webcomponents/igniteui-webcomponents/latest/classes/IgcColorPickerComponent) and a theme, then register the component:
@@ -596,7 +600,7 @@ Control the Color Picker size by setting the `--ig-size` variable to one of thre
 
 **When not to use:** When users only choose from a small fixed set of colors, render that set as regular buttons or a select instead. For a lighter-weight color editor, consider the [Color Editor](./color-editor.mdx).
 
-<table class="table" style="width: 100%; max-width: 1100px; margin: 0 auto 26px;">
+<table class="table" style="width: 100%; margin: 0 auto 26px;">
   <tbody>
     <tr>
       <td style="width: 50%; border: none; padding: 0 13px 13px 0;"><Image src={colorPickerDo} srcset={`${colorPickerDo.src} 1x, ${colorPickerDo2x.src} 2x`} alt="Color Picker used to choose a drawing brush color" style="border: 1px solid #D2DBE8; margin: unset;"/>
@@ -812,6 +816,10 @@ igc-color-picker {
   --ig-color-picker-picker-border-radius: 1rem;
   --ig-color-picker-picker-elevation: none;
 }
+
+igc-color-picker::part(picker-canvas) {
+  border-radius: 1rem;
+}
 ```
 
 ### Styling with Tailwind

docs/xplat/src/content/en/components/inputs/qr-code.mdx

@@ -27,7 +27,7 @@ import qrCodeDoNot2 from '@xplat-images/qr-code/qr-code-do-not2.png';
 import qrCodeDoNot2_2x from '@xplat-images/qr-code/qr-code-do-not2@2x.png';
 
 {/*
-React and Blazor are excluded in toc.json until their QR Code wrappers ship. Their blocks below are staged; verify them against the released wrapper APIs before removing the exclusion.
+Blazor is excluded in toc.json until its QR Code wrappers ship. Its blocks below are staged and must be verified against the released wrapper APIs before removing the exclusion.
 */}
 
 # QR Code Component <Badge variant="new" />
@@ -46,7 +46,7 @@ The {Platform} QR Code demo renders a code from a URL string and lets you switch
 
 <PlatformBlock for="React,WebComponents,Blazor">
 
-<Sample src="/inputs/qr-code/overview" height={595} position="center" noBackground={false} noBorder={false} showThemePicker={true} alt="{Platform} QR Code example" />
+<Sample src="/inputs/qr-code/overview" height={620} position="center" noBackground={false} noBorder={false} showThemePicker={true} alt="{Platform} QR Code example" />
 
 </PlatformBlock>
 
@@ -72,7 +72,6 @@ The {Platform} QR Code is a square SVG graphic made of three finder-pattern corn
   }
 `}</style>
 
-
 <span class="ig-typography__body-2" style="display: block; margin-bottom: 24px;"><strong>1. QR Code container:</strong> the host element that renders the SVG.<br />
 <strong>2. QR Matrix:</strong> the encoded matrix that stores the destination or data payload.<br />
 <strong>3. Quiet Zone:</strong> the empty space around the code that ensures scanners can read it reliably.<br />
@@ -94,9 +93,7 @@ The {Platform} QR Code is a square SVG graphic made of three finder-pattern corn
 
 ## Getting Started
 
-To use the {Platform} QR Code, complete the <PlatformBlock for="Angular">[{ProductName} Getting Started]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/general/getting-started)</PlatformBlock><PlatformBlock for="WebComponents, React, Blazor">[{ProductName} Getting Started](../general-getting-started.mdx)</PlatformBlock> topic for the basic project setup, then register the component.
-
-### Prerequisites and Version Compatibility
+To use the {Platform} QR Code, complete the <PlatformBlock for="Angular">[{ProductName} Getting Started](../general/getting-started.mdx)</PlatformBlock><PlatformBlock for="WebComponents, React, Blazor">[{ProductName} Getting Started](../general-getting-started.mdx)</PlatformBlock> topic for the basic project setup, then register the component.
 
 <PlatformBlock for="WebComponents, Angular">
 
@@ -114,9 +111,11 @@ npm install igniteui-webcomponents
 
 </PlatformBlock>
 
-{/*
-TODO: add the React and Blazor wrapper versions when they are released.
-*/}
+<PlatformBlock for="React">
+
+The QR Code requires `igniteui-react` 19.9.0 or later.
+
+</PlatformBlock>
 
 <PlatformBlock for="WebComponents, Angular">
 
@@ -447,7 +446,7 @@ await qrCode.toImage({ format: 'png', scale: 2, fileName: 'my-qr-code', download
 
 **When not to use:** Avoid QR codes for information that must be readable without a scanner, or when a direct button, link, or short URL serves the destination better.
 
-<table class="table" style="width: 100%; max-width: 1100px; margin: 0 auto 26px;">
+<table class="table" style="width: 100%; margin: 0 auto 26px;">
   <tbody>
     <tr>
       <td style="width: 50%; border: none; padding: 0 13px 13px 0;"><Image src={qrCodeDo1} srcset={`${qrCodeDo1.src} 1x, ${qrCodeDo1_2x.src} 2x`} alt="QR Code with a heading, a call to action, and a fallback short URL" style="border: 1px solid #D2DBE8; margin: unset;"/>
@@ -587,6 +586,10 @@ igc-qr-code {
   --ig-qr-code-dark-color: var(--ig-primary-800);
   --ig-qr-code-corner-square-color: var(--ig-secondary-800);
 }
+
+igc-qr-code::part(corner-dot) {
+  fill: var(--ig-success-500);
+}
 ```
 
 ### Styling with Tailwind