[dev-v5][Overflow] refactor to wrap web component

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowHorizontalExample.razor → examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowCustomExample.razor

@@ -1,20 +1,22 @@
-<div style="background-color: var(--neutral-layer-4); overflow: auto; resize: horizontal; padding: 10px;">
-    <FluentOverflow OnOverflowRaised="OverflowHandler" Style="width: 100%; border: 1px solid darkgray; padding: 2px; margin-bottom: 4px;">
+<div style="background-color: var(--colorNeutralBackground4); overflow: auto; resize: horizontal; border: 1px solid darkgray; margin-bottom: 10px;">
+    <FluentOverflow OnOverflowRaised="OverflowHandler" Style="display: flex; align-items: center; width: 100%;  padding: 2px; margin-bottom: 4px;">
         <ChildContent>
             @foreach (var item in Items)
             {
-                <FluentOverflowItem><FluentBadge Content="@item"></FluentBadge></FluentOverflowItem>
+                <FluentLabel Style="border:dashed 1px red; padding: 2px;">@item</FluentLabel>
             }
         </ChildContent>
-        <MoreButtonTemplate>
-            <FluentBadge Style="min-width: 32px; max-width:32px;" Content="@($"+{context.ItemsOverflow.Count()}")" />
-        </MoreButtonTemplate>
+        <MoreTemplate>
+            <FluentButton Appearance="ButtonAppearance.Subtle" Style="height: 20px; min-width: 32px; max-width:32px;">@($"+{context.ItemsOverflow.Count()}")</FluentButton>
+        </MoreTemplate>
         <OverflowTemplate>
             <FluentTooltip Anchor="@context.IdMoreButton" UseTooltipService="false">
-                @foreach (var item in context.ItemsOverflow)
-                {
-                    <div style="margin: 5px;">@item.Text</div>
-                }
+                <div style="display: flex; flex-direction: column; align-items: flex-start; width: max-content;">
+                    @foreach (var item in context.ItemsOverflow)
+                    {
+                        <FluentLabel Style="border:dashed 1px red; padding: 2px; margin: 3px;">@item.Text</FluentLabel>
+                    }
+                </div>
             </FluentTooltip>
         </OverflowTemplate>
     </FluentOverflow>
@@ -31,7 +33,7 @@
 
     List<string> Items = new List<string>() { Catalog[0], Catalog[1] };
 
-    void OverflowHandler(IEnumerable<FluentOverflowItem> items)
+    void OverflowHandler(IEnumerable<OverflowItem> items)
     {
         var text = String.Join("; ", items.Select(i => i.Text));
 

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowDefault.razor

@@ -1,18 +1,18 @@
 <div id="example1" style="background-color: var(--colorNeutralBackground4); overflow: auto; resize: horizontal; padding: 10px; min-width: 55px;">
     <FluentOverflow>
-        <FluentOverflowItem><FluentBadge Content="Blazor"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Microsoft"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Azure"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="DevOps"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Framework"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Office"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Installation"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Blazor"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Microsoft"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Azure"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="DevOps"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Framework"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Office"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Installation"></FluentBadge></FluentOverflowItem>
+        <FluentBadge Content="Blazor"></FluentBadge>
+        <FluentBadge Content="Microsoft"></FluentBadge>
+        <FluentBadge Content="Azure"></FluentBadge>
+        <FluentBadge Content="DevOps"></FluentBadge>
+        <FluentBadge Content="Framework"></FluentBadge>
+        <FluentBadge Content="Office"></FluentBadge>
+        <FluentBadge Content="Installation"></FluentBadge>
+        <FluentBadge Content="Blazor"></FluentBadge>
+        <FluentBadge Content="Microsoft"></FluentBadge>
+        <FluentBadge Content="Azure"></FluentBadge>
+        <FluentBadge Content="DevOps"></FluentBadge>
+        <FluentBadge Content="Framework"></FluentBadge>
+        <FluentBadge Content="Office"></FluentBadge>
+        <FluentBadge Content="Installation"></FluentBadge>
     </FluentOverflow>
 </div>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowEllipsis.razor

@@ -1,9 +1,9 @@
 <div id="example2" style="background-color: var(--colorNeutralBackground4); overflow: auto; resize: horizontal; padding: 10px; min-width: 94px;">
     <FluentOverflow>
-        <FluentOverflowItem Fixed="OverflowItemFixed.Ellipsis">Aspire;</FluentOverflowItem>
-        <FluentOverflowItem>Blazor;</FluentOverflowItem>
-        <FluentOverflowItem>Microsoft;</FluentOverflowItem>
-        <FluentOverflowItem>Azure;</FluentOverflowItem>
-        <FluentOverflowItem>DevOps</FluentOverflowItem>
+        <div fixed="ellipsis">Aspire;</div>
+        <div fixed="ellipsis">Blazor;</div>
+        <div>Microsoft;</div>
+        <div>Azure;</div>
+        <div>DevOps</div>
     </FluentOverflow>
 </div>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowMaxRenderedItemsExample.razor

@@ -0,0 +1,41 @@
+<div style="background-color: var(--colorNeutralBackground4); overflow: auto; resize: horizontal; padding: 10px; min-width: 160px;">
+    <FluentOverflow @ref="_overflow"
+                    MaxRenderedItems="2"
+                    OnOverflowRaised="OnOverflowRaised">
+        <ChildContent>
+            <FluentBadge Content="Blazor" />
+            <FluentBadge Content="Microsoft" />
+            <FluentBadge Content="Azure" />
+            <FluentBadge Content="DevOps" />
+            <FluentBadge Content="Framework" />
+            <FluentBadge Content="Office" />
+        </ChildContent>
+        <OverflowTemplate>
+            <FluentTooltip Anchor="@context.IdMoreButton" UseTooltipService="false">
+                <div style="display: flex; flex-direction: column; gap: 6px; margin: 8px;">
+                    @foreach (var item in context.ItemsOverflow)
+                    {
+                        <FluentBadge Content="@item.Text" />
+                    }
+                </div>
+            </FluentTooltip>
+        </OverflowTemplate>
+    </FluentOverflow>
+</div>
+<div style="margin-top: 8px;">
+    <div>Total overflow count: @_overflowCount</div>
+    <div>Rendered in payload (MaxRenderedItems=2): @_renderedInPayloadCount</div>
+</div>
+
+@code
+{
+    private FluentOverflow? _overflow;
+    private int _overflowCount;
+    private int _renderedInPayloadCount;
+
+    private void OnOverflowRaised(IEnumerable<OverflowItem> items)
+    {
+        _renderedInPayloadCount = items.Count();
+        _overflowCount = _overflow?.OverflowCount ?? 0;
+    }
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowMultipleFixedItemsExample.razor

@@ -0,0 +1,9 @@
+<div style="background-color: var(--colorNeutralBackground4); overflow: auto; resize: horizontal; padding: 10px; min-width: 120px;">
+    <FluentOverflow>
+        <div fixed="ellipsis">Aspire;</div>
+        <div fixed="ellipsis">Blazor;</div>
+        <FluentBadge>Microsoft</FluentBadge>
+        <FluentBadge>Azure</FluentBadge>
+        <FluentBadge>DevOps</FluentBadge>
+    </FluentOverflow>
+</div>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowSelectorExample.razor

@@ -0,0 +1,11 @@
+<div style="background-color: var(--colorNeutralBackground4); overflow: auto; resize: horizontal; padding: 10px; min-width: 230px;">
+    <FluentOverflow Selector=".overflow-item">
+        <div fixed="fixed" style="background: var(--fill-color); border: dashed 1px green; padding: 2px 8px;">Pinned</div>
+        <div class="overflow-item" style="background: var(--colorNeutralBackground2); border: dashed 1px blue; padding: 2px 8px;">Blazor</div>
+        <div class="overflow-item" style="background: var(--colorNeutralBackground2); border: dashed 1px blue; padding: 2px 8px;">Microsoft</div>
+        <div class="overflow-item" style="background: var(--colorNeutralBackground2); border: dashed 1px blue; padding: 2px 8px;">Azure</div>
+        <div fixed="fixed" style="background: var(--colorPaletteGreenBackground2); border: dashed 1px green; padding: 2px 8px;">Always visible</div>
+        <div class="overflow-item" style="background: var(--colorNeutralBackground2); border: dashed 1px blue; padding: 2px 8px;">DevOps</div>
+        <div class="overflow-item" style="background: var(--colorNeutralBackground2); border: dashed 1px blue; padding: 2px 8px;">Framework</div>
+    </FluentOverflow>
+</div>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/Examples/OverflowVisibleOnLoad.razor

@@ -1,18 +1,18 @@
 <div id="example3" style="background-color: var(--colorNeutralBackground4); overflow: auto; resize: horizontal; padding: 10px; min-width: 55px;">
     <FluentOverflow VisibleOnLoad="false">
-        <FluentOverflowItem><FluentBadge Content="Blazor"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Microsoft"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Azure"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="DevOps"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Framework"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Office"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Installation"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Blazor"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Microsoft"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Azure"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="DevOps"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Framework"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Office"></FluentBadge></FluentOverflowItem>
-        <FluentOverflowItem><FluentBadge Content="Installation"></FluentBadge></FluentOverflowItem>
+        <FluentBadge Content="Blazor"></FluentBadge>
+        <FluentBadge Content="Microsoft"></FluentBadge>
+        <FluentBadge Content="Azure"></FluentBadge>
+        <FluentBadge Content="DevOps"></FluentBadge>
+        <FluentBadge Content="Framework"></FluentBadge>
+        <FluentBadge Content="Office"></FluentBadge>
+        <FluentBadge Content="Installation"></FluentBadge>
+        <FluentBadge Content="Blazor"></FluentBadge>
+        <FluentBadge Content="Microsoft"></FluentBadge>
+        <FluentBadge Content="Azure"></FluentBadge>
+        <FluentBadge Content="DevOps"></FluentBadge>
+        <FluentBadge Content="Framework"></FluentBadge>
+        <FluentBadge Content="Office"></FluentBadge>
+        <FluentBadge Content="Installation"></FluentBadge>
     </FluentOverflow>
 </div>

examples/Demo/FluentUI.Demo.Client/Documentation/Components/Overflow/FluentOverflow.md

@@ -12,27 +12,51 @@ The `FluentOverflow` component is used to manage and display a collection of ite
 
 {{ OverflowDefault }}
 
-## Overflow with ellipsis
-In the following example, the first element will always be displayed (fixed), but an ellipse (...)
-will be added when the container size is too small.
-
-> [!Note] the element must be able to display this ellipse, which is the case for text (like below) but not for the FluentBadge.
-
-{{ OverflowEllipsis }}
-
 ## Overflow not visible on load
+
 With below example the `VisibleOnLoad` parameter is set to false.Make sure the screen dimension is small enough to show an overflow badge with count.
 Then refresh the page to see the difference between this example and the one above
 
 {{ OverflowVisibleOnLoad }}
 
-## Horizontal Overflow example
+## Custom templates and dynamic items
+
+This example shows a fully customized More button and tooltip content, and includes add/remove actions to demonstrate dynamic overflow recalculation.
+{{ OverflowCustomExample }}
+
+## Selector-based overflow
+
+This example uses `Selector=".overflow-item"` so only matching children are overflow-managed; the non-matching `behavior="fixed"` badges stay visible.
+{{ OverflowSelectorExample }}
+
+## MaxRenderedItems payload cap
+
+This example sets `MaxRenderedItems="2"` and shows the difference between `OverflowCount` (total) and `ItemsOverflow` (rendered subset).
+{{ OverflowMaxRenderedItemsExample }}
+
+## Item overflow behavior modes
+
+The `behavior` attribute on direct children supports these modes:
+
+| Value | Behavior |
+| --- | --- |
+| `behavior="fixed"` | Item always remains visible at full size and does not move to overflow. |
+| `behavior="ellipsis"` | Item always remains visible but can shrink with text ellipsis when space is limited. |
+
+Notes:
+
+- `behavior` is an HTML attribute on child elements (not a `FluentOverflow` parameter).
+- Use `Selector` to control which children are overflow-managed; non-selected children can still be marked with `behavior`.
+
+## Multiple items with ellipsis behavior
 
-{{ OverflowHorizontalExample }}
+This example demonstrates multiple items with ellipsis behavior (`behavior="ellipsis"`) combined with normal overflowed items.
+{{ OverflowMultipleFixedItemsExample }}
 
-## API FluentOverflow   
+## API FluentOverflow
 
 {{ API Type=FluentOverflow }}
 
-{{ API Type=FluentOverflowItem }}
+## Migrating to v5
 
+{{ INCLUDE File=MigrationFluentOverflow }}

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentOverflow.md

@@ -0,0 +1,45 @@
+---
+title: Migration FluentOverflow
+route: /Migration/Overflow
+hidden: true
+---
+
+## Web component migration
+
+`FluentOverflow` now wraps a `<fluent-overflow>` web component. Overflow calculation
+and resize are handled there, with Blazor receiving overflow state updates.
+
+## Content model changes
+
+- The old dedicated overflow item component is removed.
+- Overflow now works with direct children of `FluentOverflow`.
+- Per-item behavior is expressed with HTML attributes on the child element (for example `fixed="fixed"` or `fixed="ellipsis"`).
+
+## New/updated parameters
+
+- `Selector` — CSS selector for direct children to include in overflow handling.
+- `MaxRenderedItems` (`int`, default `25`) — limits the number of overflow items returned in the payload (`<= 0` means unlimited).
+- `StoreOverflowInMemory` (`bool`) — keeps overflow payload items in JavaScript memory.
+
+## Removed APIs
+
+- `FluentOverflowItem` component — removed; use direct child content instead.
+- `OverflowItemFixed` enum — removed; use the child `fixed` attribute values instead.
+
+## Migration example
+
+```xml
+<!-- V4 -->
+<FluentOverflow>
+    <FluentOverflowItem Text="Pinned" Fixed="OverflowItemFixed.Fixed" />
+    <FluentOverflowItem Text="Blazor" />
+    <FluentOverflowItem Text="Microsoft" />
+</FluentOverflow>
+
+<!-- V5 -->
+<FluentOverflow>
+    <div fixed="fixed">Pinned</div>
+    <div>Blazor</div>
+    <div>Microsoft</div>
+</FluentOverflow>
+```

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationIndex.md

@@ -48,6 +48,7 @@ Each page below covers specific component changes, removed components, and new a
   | FluentMenuButton | High | [Migration](/Migration/MenuButton) |
   | FluentMessageBar | Medium | [Migration](/Migration/MessageBar) |
   | FluentOverlay | High | [Migration](/Migration/Overlay) |
+  | FluentOverflow | High | [Migration](/Migration/Overflow) |
   | FluentPopover | High | [Migration](/Migration/Popover) |
   | FluentPresenceBadge | Medium | [Migration](/Migration/PresenceBadge) |
   | FluentProgressBar (was FluentProgress) | Medium | [Migration](/Migration/ProgressBar) |