From 23f09b728590369abd40f2440be1c7edf00ec8fd Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 21 Sep 2026 12:26:35 +0330
Subject: [PATCH 1/8] improve theme infra of BitFileInput #13322

---
 .../Inputs/FileInput/BitFileInput.razor       |  65 ++-
 .../Inputs/FileInput/BitFileInput.razor.cs    | 201 ++++++-
 .../Inputs/FileInput/BitFileInput.scss        | 331 ++++++++---
 .../Inputs/FileInput/BitFileInput.ts          |  33 +-
 .../FileInput/BitFileInputClassStyles.cs      |  11 +
 .../Inputs/FileInput/BitFileInputInfo.cs      |   7 +
 .../BitFileInputJsRuntimeExtensions.cs        |   9 +
 .../Inputs/FileInput/BitFileInputParams.cs    | 450 +++++++++++++++
 .../Inputs/FileInput/BitFileInputDemo.razor   | 546 ++++++++++--------
 .../FileInput/BitFileInputDemo.razor.cs       | 332 ++++++++++-
 .../BitFileInputDemo.razor.samples.cs         | 453 ++++++---------
 .../Inputs/FileInput/BitFileInputTests.cs     | 375 +++++++++++-
 12 files changed, 2192 insertions(+), 621 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
index c303c838653..af9dbc63a66 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
@@ -13,9 +13,13 @@
     }
     else if (HideLabel is false)
     {
-        <button @onclick="Browse"
+        <button @ref="_labelRef"
+                @onclick="Browse"
                 type="button"
                 id="@_buttonId"
+                title="@Title"
+                tabindex="@TabIndex"
+                disabled="@(IsEnabled is false)"
                 aria-label="@AriaLabel"
                 aria-describedby="@(_HasDescription ? _descriptionId : null)"
                 style="@Styles?.Label"
@@ -68,30 +72,57 @@
                 }
                 else
                 {
+                    var folder = GetFolder(file);
+
                     <div @key="file.FileId"
                          role="listitem" style="@Styles?.FileItem" class="bit-fin-itm @GetFileElClass(file.IsValid) @Classes?.FileItem">
-                        @if (ShowPreview && file.PreviewUrl is not null)
+                        @if (ShowPreview)
                         {
-                            @* draggable is off so that dragging a thumbnail does not start a drag over the drop zone itself.
-                               the alt is empty on purpose: the thumbnail is decorative and its name is already
-                               right next to it, so announcing it again would just repeat the same text. *@
-                            <img src="@file.PreviewUrl"
-                                 alt=""
-                                 draggable="false"
-                                 decoding="async"
-                                 style="@Styles?.Preview"
-                                 class="bit-fin-prv @Classes?.Preview" />
+                            if (file.PreviewUrl is not null)
+                            {
+                                @* draggable is off so that dragging a thumbnail does not start a drag over the drop zone itself.
+                                   the alt is empty on purpose: the thumbnail is decorative and its name is already
+                                   right next to it, so announcing it again would just repeat the same text. *@
+                                <img src="@file.PreviewUrl"
+                                     alt=""
+                                     draggable="false"
+                                     decoding="async"
+                                     style="@Styles?.Preview"
+                                     class="bit-fin-prv @Classes?.Preview" />
+                            }
+                            else
+                            {
+                                var fileIcon = GetFileIcon(file);
+
+                                @* the glyph stands in the thumbnail's slot for everything that has no preview, so the
+                                   names of a mixed list stay in one column instead of stepping in and out. *@
+                                if (fileIcon is not null)
+                                {
+                                    <div style="@Styles?.FileIcon" class="bit-fin-fio @Classes?.FileIcon">
+                                        <i class="@fileIcon.GetCssClasses()" aria-hidden="true" />
+                                    </div>
+                                }
+                            }
                         }
                         <div class="bit-fin-fic">
-                            <div title="@file.Name" class="bit-fin-fnc">
+                            <div title="@(folder.HasValue() ? file.RelativePath : file.Name)" class="bit-fin-fnc">
+                                @* the extension is split off so that it survives the ellipsis: a long name
+                                   truncated as one string ends in "..." and stops saying what kind of file it is,
+                                   which is the one thing a glance at a file list is for. *@
                                 <div style="@Styles?.FileName" class="bit-fin-fn @Classes?.FileName">
-                                    @file.Name
+                                    <span class="bit-fin-fnm">@GetFileStem(file.Name)</span><span class="bit-fin-fnx">@Path.GetExtension(file.Name)</span>
                                 </div>
                             </div>
                             <div class="bit-fin-fsc">
                                 <span style="@Styles?.FileSize" class="bit-fin-fs @Classes?.FileSize">
                                     @(FileSizeFormatter is null ? FileSizeHumanizer.Humanize(file.Size) : FileSizeFormatter(file.Size))
                                 </span>
+                                @if (folder.HasValue())
+                                {
+                                    @* a folder selection flattens into one list, where two files can only be told
+                                       apart by where they came from, so the folder is printed beside the size. *@
+                                    <span style="@Styles?.FilePath" class="bit-fin-fp @Classes?.FilePath">@folder</span>
+                                }
                             </div>
                             @if (file.IsValid is false)
                             {
@@ -102,11 +133,15 @@
                         </div>
                         @if (ShowRemoveButton)
                         {
-                            <button @onclick="() => RemoveFile(file)"
+                            <button @ref="_removeRefs[file.FileId]"
+                                    @onclick="() => HandleRemoveClick(file)"
                                     type="button"
                                     title="@removeTitle"
+                                    tabindex="@TabIndex"
                                     disabled="@(IsEnabled is false)"
-                                    aria-label="@($"{removeTitle} {file.Name}")"
+                                    @* the whole path when there is one, since a flattened folder can hold the
+                                       same name more than once and "Remove readme.md" would name none of them. *@
+                                    aria-label="@($"{removeTitle} {(folder.HasValue() ? file.RelativePath : file.Name)}")"
                                     style="@Styles?.RemoveButton"
                                     class="bit-fin-rbt @Classes?.RemoveButton">
                                 <i style="@Styles?.RemoveIcon" class="@removeIcon?.GetCssClasses() @Classes?.RemoveIcon" aria-hidden="true" />
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
index 926295bbd75..4104c09d503 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
@@ -1,9 +1,13 @@
-namespace Bit.BlazorUI;
+using System.Diagnostics.CodeAnalysis;
+
+namespace Bit.BlazorUI;
 
 /// <summary>
 /// BitFileInput is a file input component that wraps the HTML file input element and enables file selection
-/// with support for validation, drag-and-drop, paste, image previews, and customization.
-/// The selected files' metadata and content can be accessed and processed from C# code.
+/// with support for validation, drag-and-drop, paste, image previews, file type glyphs, folder selection,
+/// and customization.
+/// The selected files' metadata is accessible from C# code, and their content can be pulled on demand either
+/// as a byte array (<see cref="ReadContentAsync"/>) or as a chunked stream (<see cref="OpenReadStreamAsync"/>).
 /// </summary>
 public partial class BitFileInput : BitComponentBase
 {
@@ -15,10 +19,13 @@ public partial class BitFileInput : BitComponentBase
     private string? _announcement;
     private bool _announcementMarker;
     private ElementReference _inputRef;
+    private ElementReference _labelRef;
     private string _buttonId = default!;
     private string _descriptionId = default!;
+    private int? _focusAfterRemoveIndex;
     private List<BitFileInputInfo> _files = [];
     private IJSObjectReference _dropZoneRef = default!;
+    private readonly Dictionary<string, ElementReference> _removeRefs = [];
 
 
 
@@ -26,6 +33,17 @@ public partial class BitFileInput : BitComponentBase
 
 
 
+    /// <summary>
+    /// The cascading parameters of the BitFileInput, provided by a <see cref="BitParams"/> ancestor.
+    /// </summary>
+    /// <remarks>
+    /// The intended use is to allow shared configuration or settings to be applied to multiple file input components through the <see cref="BitParams"/> component.
+    /// </remarks>
+    [CascadingParameter(Name = BitFileInputParams.ParamName)]
+    public BitFileInputParams? CascadingParameters { get; set; }
+
+
+
     /// <summary>
     /// Accepted file types for the file browser using MIME types or file extensions (e.g., "image/*", ".pdf,.doc").
     /// Applied to the underlying HTML input element's accept attribute.
@@ -41,7 +59,7 @@ public partial class BitFileInput : BitComponentBase
 
     /// <summary>
     /// Whether a file that is already in the file list can be selected again.
-    /// When disabled, a newly selected file matching an existing one by name, size and last modified time
+    /// When disabled, a newly selected file matching an existing one by folder, name, size and last modified time
     /// is marked as invalid with the <see cref="DuplicateErrorMessage"/> instead of being added as a second entry,
     /// becoming valid again once the file it duplicates is removed.
     /// The default value is true.
@@ -124,6 +142,14 @@ public partial class BitFileInput : BitComponentBase
     /// </summary>
     [Parameter] public string? DuplicateErrorMessage { get; set; }
 
+    /// <summary>
+    /// Custom provider of the glyph shown in the thumbnail's place for a file that has no image preview,
+    /// which is rendered while <see cref="ShowPreview"/> is enabled. Receives the file and returns the icon
+    /// to draw, or null to leave that file without one. When not set, the icon is picked from the file's
+    /// MIME type and extension.
+    /// </summary>
+    [Parameter] public Func<BitFileInputInfo, BitIconInfo?>? FileIconSelector { get; set; }
+
     /// <summary>
     /// Custom validation function called for each newly selected file after the built-in validations pass.
     /// Return an error message to mark the file as invalid, or null to accept it.
@@ -151,8 +177,11 @@ public partial class BitFileInput : BitComponentBase
 
     /// <summary>
     /// Whether to hide the default browse button label from the UI.
+    /// Since the browse button is also what turns into the drag-and-drop indicator, hiding it moves that
+    /// indicator onto the component itself so that dropping files still shows that it is allowed.
     /// </summary>
-    [Parameter] public bool HideLabel { get; set; }
+    [Parameter, ResetClassBuilder]
+    public bool HideLabel { get; set; }
 
     /// <summary>
     /// The text displayed on the browse button. Defaults to "Browse".
@@ -289,6 +318,11 @@ public partial class BitFileInput : BitComponentBase
     /// </summary>
     [Parameter] public BitFileInputClassStyles? Styles { get; set; }
 
+    /// <summary>
+    /// The tooltip of the browse button, rendered as its title attribute.
+    /// </summary>
+    [Parameter] public string? Title { get; set; }
+
     /// <summary>
     /// The visual variant of the browse button, which decides how much of the <see cref="Color"/> it carries:
     /// a full fill, only an outline, or neither.
@@ -334,6 +368,7 @@ public async Task Reset()
         if (IsDisposed) return;
 
         _files.Clear();
+        _removeRefs.Clear();
 
         await _js.BitFileInputReset(UniqueId, _inputRef);
 
@@ -368,6 +403,33 @@ public async Task ReadContentAsync(BitFileInputInfo? fileInfo = null)
         fileInfo.Content = await _js.BitFileInputReadContent(UniqueId, fileInfo.FileId);
     }
 
+    /// <summary>
+    /// Opens a stream over the content of the specified file, which the runtime reads from the browser in chunks
+    /// instead of materializing the whole file in memory the way <see cref="ReadContentAsync"/> does.
+    /// This is what makes a file too large to hold as a byte array - a video, an archive, a database dump -
+    /// copyable to disk, hashable or forwardable to a server.
+    /// The stream is forward only and must be disposed by the caller.
+    /// Unlike <see cref="ReadContentAsync"/> it also reads a file the validations rejected, since a file too
+    /// large to hold in memory is exactly the one a stream is wanted for.
+    /// </summary>
+    /// <param name="fileInfo">The file to read, which must still be in the current selection.</param>
+    /// <param name="maxAllowedSize">
+    /// The largest number of bytes the stream is allowed to yield, which guards against a file swapped
+    /// underneath the page after it was picked. It defaults to the size the browser reported for the file.
+    /// </param>
+    /// <param name="cancellationToken">A token that cancels the read.</param>
+    public async Task<Stream> OpenReadStreamAsync(BitFileInputInfo fileInfo,
+                                                  long? maxAllowedSize = null,
+                                                  CancellationToken cancellationToken = default)
+    {
+        ArgumentNullException.ThrowIfNull(fileInfo);
+        ObjectDisposedException.ThrowIf(IsDisposed, this);
+
+        var streamRef = await _js.BitFileInputOpenReadStream(UniqueId, fileInfo.FileId);
+
+        return await streamRef.OpenReadStreamAsync(maxAllowedSize ?? fileInfo.Size, cancellationToken);
+    }
+
     /// <summary>
     /// Removes a specific file from the selected files list, or clears all files when no file is specified,
     /// invoking the <see cref="OnRemove"/> callback for each removed file and the <see cref="OnChange"/> callback afterwards.
@@ -384,6 +446,7 @@ public async Task RemoveFile(BitFileInputInfo? fileInfo = null)
             var removedFiles = _files.ToArray();
 
             _files.Clear();
+            _removeRefs.Clear();
 
             await _js.BitFileInputReset(UniqueId, _inputRef);
 
@@ -400,6 +463,8 @@ public async Task RemoveFile(BitFileInputInfo? fileInfo = null)
         {
             if (_files.Remove(fileInfo) is false) return;
 
+            _removeRefs.Remove(fileInfo.FileId);
+
             await _js.BitFileInputRemoveFile(UniqueId, fileInfo.FileId);
 
             if (IsDisposed) return;
@@ -467,6 +532,10 @@ protected override void RegisterCssClasses()
             BitSize.Large => "bit-fin-lg",
             _ => "bit-fin-md"
         });
+
+        // the browse button is what carries the drop indicator, so a component rendered without one needs
+        // the indicator drawn around itself instead of silently accepting drops with nothing to show for it.
+        ClassBuilder.Register(() => HideLabel ? "bit-fin-nlb" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
@@ -483,8 +552,11 @@ protected override Task OnInitializedAsync()
         return base.OnInitializedAsync();
     }
 
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitFileInputParams))]
     protected override async Task OnParametersSetAsync()
     {
+        CascadingParameters?.UpdateParameters(this);
+
         await base.OnParametersSetAsync();
 
         if (_dropZoneRef is null) return;
@@ -494,7 +566,12 @@ protected override async Task OnParametersSetAsync()
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender is false) return;
+        if (firstRender is false)
+        {
+            await FocusAfterRemove();
+
+            return;
+        }
 
         _allowDrop = AllowDrop;
         _allowPaste = AllowPaste;
@@ -517,6 +594,64 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
     private string GetDragClass() => $"bit-fin-drg {Classes?.Dragging}".Trim();
 
+    // the remove button the user pressed leaves the DOM along with its file, and the focus with it - a keyboard
+    // user would be dropped back onto the document and have to tab through the page again to get back here.
+    // So the removal remembers where it happened and the next render hands the focus to the button that took
+    // that place, to the last one when the list got shorter, or back to the browse button when nothing is left.
+    private async Task HandleRemoveClick(BitFileInputInfo file)
+    {
+        var index = _files.IndexOf(file);
+
+        await RemoveFile(file);
+
+        if (IsDisposed) return;
+        if (index < 0) return;
+
+        _focusAfterRemoveIndex = index;
+
+        StateHasChanged();
+    }
+
+    private async Task FocusAfterRemove()
+    {
+        if (_focusAfterRemoveIndex is null) return;
+
+        var index = _focusAfterRemoveIndex.Value;
+
+        _focusAfterRemoveIndex = null;
+
+        try
+        {
+            if (ShowRemoveButton && IsEnabled && HideFileList is false &&
+                FileViewTemplate is null && _files.Count > 0)
+            {
+                var target = _files[Math.Min(index, _files.Count - 1)];
+
+                if (_removeRefs.TryGetValue(target.FileId, out var removeRef))
+                {
+                    await removeRef.FocusAsync();
+
+                    return;
+                }
+            }
+
+            if (LabelTemplate is null && HideLabel is false && IsEnabled)
+            {
+                await _labelRef.FocusAsync();
+            }
+        }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
+        catch (JSException) { } // the element may already be gone, which is not worth failing a render over
+    }
+
+    // the name without its extension, which is the part the file list is allowed to ellipsize.
+    private static string GetFileStem(string name)
+    {
+        var extension = Path.GetExtension(name);
+
+        return extension.HasNoValue() ? name : name[..^extension.Length];
+    }
+
     private async Task UpdateDropZone()
     {
         var dragClass = GetDragClass();
@@ -600,10 +735,59 @@ private static bool IsFileTypeNotAllowed(BitFileInputInfo file, string[]? allowe
     }
 
     // two selections of the same file are indistinguishable by their name, size and last modified time,
-    // which is as close to an identity as the browser exposes for a picked file.
+    // which is as close to an identity as the browser exposes for a picked file. The folder a file came
+    // from joins them, since a folder selection routinely holds the same name twice and two such files
+    // are not the same file.
     private static string GetFileIdentity(BitFileInputInfo file)
     {
-        return $"{file.Name}|{file.Size}|{file.LastModified}";
+        return $"{file.RelativePath}|{file.Name}|{file.Size}|{file.LastModified}";
+    }
+
+    // the directory part of the relative path a folder selection reports, which is what the file item
+    // prints beside the size; an ordinary selection reports no path at all and prints nothing.
+    private static string GetFolder(BitFileInputInfo file)
+    {
+        if (file.RelativePath.HasNoValue()) return string.Empty;
+
+        var index = file.RelativePath.LastIndexOf('/');
+
+        return index <= 0 ? string.Empty : file.RelativePath[..index];
+    }
+
+    private BitIconInfo? GetFileIcon(BitFileInputInfo file)
+    {
+        if (FileIconSelector is not null) return FileIconSelector(file);
+
+        return BitIconInfo.Bit(GetDefaultFileIconName(file));
+    }
+
+    // the MIME type the browser reports is the better signal and is checked first; the extension only has
+    // the last word for the families that share a type (an Office document is a zip to the browser) or for
+    // the files a browser hands over with no type at all.
+    private static string GetDefaultFileIconName(BitFileInputInfo file)
+    {
+        var extension = Path.GetExtension(file.Name).ToLowerInvariant();
+
+        switch (extension)
+        {
+            case ".doc" or ".docx" or ".odt" or ".rtf": return "WordDocument";
+            case ".xls" or ".xlsx" or ".ods" or ".csv": return "ExcelDocument";
+            case ".ppt" or ".pptx" or ".odp": return "PowerPointDocument";
+            case ".zip" or ".rar" or ".7z" or ".tar" or ".gz": return "ZipFolder";
+            case ".pdf": return "PDF";
+        }
+
+        var contentType = file.ContentType;
+
+        if (contentType.HasValue())
+        {
+            if (contentType.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) return "FileImage";
+            if (contentType.StartsWith("video/", StringComparison.OrdinalIgnoreCase)) return "Video";
+            if (contentType.StartsWith("audio/", StringComparison.OrdinalIgnoreCase)) return "MusicInCollection";
+            if (contentType.StartsWith("text/", StringComparison.OrdinalIgnoreCase)) return "TextDocument";
+        }
+
+        return "Page";
     }
 
     private void ValidateFile(BitFileInputInfo file, string[]? allowedTypes)
@@ -652,6 +836,7 @@ private async Task HandleOnChange()
         if (Append is false)
         {
             _files.Clear();
+            _removeRefs.Clear();
         }
 
         var newFiles = await _js.BitFileInputSetup(UniqueId, _inputRef, Append, ShowPreview, ReadImageDimensions);
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
index 3f5ecc1ab3c..e3c3b0eff7d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
@@ -1,15 +1,63 @@
 @import "../../../Styles/functions.scss";
 
+// Public CSS variables, read off the root and never declared here, so a value set on :root re-skins every
+// file input and one set on the Style of an instance re-skins that one alone:
+//   --bit-FileInput-max-width                 widest the whole component gets                  (default: spacing(43.75))
+//   --bit-FileInput-color                     the role color: the fill of a Fill browse
+//                                             button, the rule and the text of the other two   (default: the role's main color)
+//   --bit-FileInput-text-color                text drawn on top of the role color              (default: the role's on-color)
+//   --bit-FileInput-hover-color               role color while hovered                         (default: the role's hover color)
+//   --bit-FileInput-active-color              role color while pressed                         (default: the role's active color)
+//   --bit-FileInput-focus-color               focus ring color of the browse and remove buttons (default: the role's focus color)
+//   --bit-FileInput-disabled-color            foreground when IsEnabled is false               (default: $clr-fg-dis)
+//   --bit-FileInput-disabled-background       background when IsEnabled is false               (default: $clr-bg-dis)
+//   --bit-FileInput-disabled-border-color     border color when IsEnabled is false             (default: $clr-brd-dis)
+//   --bit-FileInput-label-height              smallest height of the browse button             (default: per size, $siz-ctrl-*)
+//   --bit-FileInput-label-padding             padding of the browse button                     (default: per size, $siz-ctrl-pad-*)
+//   --bit-FileInput-label-font-size           text size of the browse button                   (default: per size, from the type ramp)
+//   --bit-FileInput-label-radius              corner radius of the browse button and its ring  (default: $shp-radius-button)
+//   --bit-FileInput-description-color         color of the hint under the browse button        (default: $clr-fg-sec)
+//   --bit-FileInput-description-font-size     text size of that hint, of the file size and
+//                                             of the folder beside it                          (default: per size, from the type ramp)
+//   --bit-FileInput-drop-color                rule and text of the drop indicator              (default: the text color)
+//   --bit-FileInput-drop-background           fill of the drop indicator                       (default: the hover color)
+//   --bit-FileInput-drop-border-style         border style of the drop indicator               (default: dashed)
+//   --bit-FileInput-item-background           background of a file item, valid or not          (default: $clr-bg-sec)
+//   --bit-FileInput-item-border-color         border of a file item                            (default: $clr-brd-pri)
+//   --bit-FileInput-item-hover-border-color   border of a hovered file item                    (default: the resting border color)
+//   --bit-FileInput-item-radius               corner radius of a file item                     (default: $shp-radius-surface)
+//   --bit-FileInput-item-padding              padding around the name and the size of an item  (default: spacing(1))
+//   --bit-FileInput-item-gap                  room between two file items                      (default: spacing(0.375))
+//   --bit-FileInput-item-font-size            text size of the file name                       (default: per size, from the type ramp)
+//   --bit-FileInput-file-name-color           color of the file name                           (default: $clr-fg-pri)
+//   --bit-FileInput-file-size-color           color of the file size and of the folder         (default: $clr-fg-sec)
+//   --bit-FileInput-error-color               message and border of an invalid file item       (default: $clr-err)
+//   --bit-FileInput-invalid-background        background of an invalid file item               (default: the item background)
+//   --bit-FileInput-preview-size              side of the thumbnail and of the type glyph      (default: per size)
+//   --bit-FileInput-preview-radius            corner radius of the thumbnail                   (default: $shp-radius-sm)
+//   --bit-FileInput-file-icon-color           color of the file type glyph                     (default: $clr-fg-sec)
+//   --bit-FileInput-remove-button-size        side of the remove button                        (default: per size, $siz-ctrl-*)
+//   --bit-FileInput-remove-button-color       glyph color of the remove button                 (default: $clr-fg-pri)
+//   --bit-FileInput-remove-button-background  background of the remove button                  (default: $clr-bg-sec)
+//   --bit-FileInput-remove-button-hover-background  background of a hovered remove button      (default: $clr-bg-sec-hover)
+//   --bit-FileInput-remove-icon-size          glyph size of the remove button                  (default: per size, $siz-icon-*)
+
 .bit-fin {
     display: flex;
     flex-flow: column nowrap;
-    max-width: spacing(43.75);
     font-family: $tg-font-family;
+    max-width: var(--bit-FileInput-max-width, #{spacing(43.75)});
+    // The four role slots resolved once, each already letting a public variable take over, so every
+    // state below reads a single name instead of repeating the whole fallback chain.
+    --bit-fin-c: var(--bit-FileInput-color, var(--bit-fin-clr));
+    --bit-fin-c-txt: var(--bit-FileInput-text-color, var(--bit-fin-clr-txt));
+    --bit-fin-c-hover: var(--bit-FileInput-hover-color, var(--bit-fin-clr-hover));
+    --bit-fin-c-active: var(--bit-FileInput-active-color, var(--bit-fin-clr-active));
 
     &.bit-dis {
-        color: $clr-fg-dis;
-        border-color: $clr-brd-dis;
-        background-color: $clr-bg-dis;
+        color: var(--bit-FileInput-disabled-color, #{$clr-fg-dis});
+        border-color: var(--bit-FileInput-disabled-border-color, #{$clr-brd-dis});
+        background-color: var(--bit-FileInput-disabled-background, #{$clr-bg-dis});
 
         //the browse button carries the role color while enabled, but a disabled file input reads as a
         //neutral form field whatever its role and variant (see the disabled conventions in
@@ -18,8 +66,8 @@
         //since which of the two is painted at all is exactly what the variants disagree on.
         .bit-fin-lbl {
             cursor: default;
-            color: $clr-fg-dis;
             pointer-events: none;
+            color: var(--bit-FileInput-disabled-color, #{$clr-fg-dis});
         }
     }
 }
@@ -31,48 +79,62 @@
 //everything the three variants share; the colors themselves live in the variant blocks right below,
 //which is also why the border is declared without its color here.
 .bit-fin-lbl {
-    outline: 0;
     display: flex;
     cursor: pointer;
-    font-weight: $tg-fw-light;
     user-select: none;
     align-items: center;
+    box-sizing: border-box;
     justify-content: center;
-    border-radius: $shp-radius-control;
+    // a button does not inherit the page font on its own, so the family has to be handed down from the
+    // root explicitly - without this the browse button alone reads in the browser's default UI font.
+    font-family: inherit;
+    // the family's own control weight, so the browse button reads as the same kind of thing as the buttons
+    // it sits next to rather than as a lighter one of its own.
+    font-weight: $tg-font-weight;
+    letter-spacing: $tg-ctrl-letter-spacing;
+    text-transform: $tg-ctrl-text-transform;
+    -webkit-tap-highlight-color: transparent;
     border-width: $shp-border-width;
     border-style: $shp-border-style;
-    min-height: var(--bit-fin-lbl-height);
-    font-size: var(--bit-fin-lbl-fontsize);
-    padding: var(--bit-fin-lbl-padding);
-
-    i {
-        margin-inline-end: spacing(0.625);
+    border-radius: var(--bit-FileInput-label-radius, #{$shp-radius-button});
+    min-height: var(--bit-FileInput-label-height, var(--bit-fin-lbl-height));
+    font-size: var(--bit-FileInput-label-font-size, var(--bit-fin-lbl-fontsize));
+    padding: var(--bit-FileInput-label-padding, var(--bit-fin-lbl-padding));
+    // the variants repaint all three on hover and press, so they animate together from here.
+    transition: color $mot-duration-short $mot-easing,
+                border-color $mot-duration-short $mot-easing,
+                background-color $mot-duration-short $mot-easing;
+
+    // buttons are stripped of their outline library-wide (see general.scss), so the keyboard indicator
+    // has to be drawn back on - it is the only thing telling a Tab user where the focus has landed.
+    &:focus-visible {
+        @include focus-ring(var(--bit-FileInput-focus-color, var(--bit-fin-clr-focus)));
     }
 }
 
 //Fill - the default: a solid block of the role color labelled in the role's on-color.
 .bit-fin-fil {
     .bit-fin-lbl {
-        color: var(--bit-fin-clr-txt);
-        border-color: var(--bit-fin-clr);
-        background-color: var(--bit-fin-clr);
+        color: var(--bit-fin-c-txt);
+        border-color: var(--bit-fin-c);
+        background-color: var(--bit-fin-c);
 
         @media (hover: hover) {
             &:hover {
-                border-color: var(--bit-fin-clr-hover);
-                background-color: var(--bit-fin-clr-hover);
+                border-color: var(--bit-fin-c-hover);
+                background-color: var(--bit-fin-c-hover);
             }
         }
 
         &:active {
-            border-color: var(--bit-fin-clr-active);
-            background-color: var(--bit-fin-clr-active);
+            border-color: var(--bit-fin-c-active);
+            background-color: var(--bit-fin-c-active);
         }
     }
 
     &.bit-dis .bit-fin-lbl {
-        border-color: $clr-brd-dis;
-        background-color: $clr-bg-dis;
+        border-color: var(--bit-FileInput-disabled-border-color, #{$clr-brd-dis});
+        background-color: var(--bit-FileInput-disabled-background, #{$clr-bg-dis});
     }
 }
 
@@ -80,25 +142,25 @@
 //variant once a pointer lands on it.
 .bit-fin-otl {
     .bit-fin-lbl {
-        color: var(--bit-fin-clr);
-        border-color: var(--bit-fin-clr);
+        color: var(--bit-fin-c);
+        border-color: var(--bit-fin-c);
         background-color: transparent;
 
         @media (hover: hover) {
             &:hover {
-                color: var(--bit-fin-clr-txt);
-                background-color: var(--bit-fin-clr-hover);
+                color: var(--bit-fin-c-txt);
+                background-color: var(--bit-fin-c-hover);
             }
         }
 
         &:active {
-            color: var(--bit-fin-clr-txt);
-            background-color: var(--bit-fin-clr-active);
+            color: var(--bit-fin-c-txt);
+            background-color: var(--bit-fin-c-active);
         }
     }
 
     &.bit-dis .bit-fin-lbl {
-        border-color: $clr-brd-dis;
+        border-color: var(--bit-FileInput-disabled-border-color, #{$clr-brd-dis});
         background-color: transparent;
     }
 }
@@ -106,20 +168,20 @@
 //Text: neither rule nor fill at rest, for a file input that should not outweigh the fields around it.
 .bit-fin-txt {
     .bit-fin-lbl {
-        color: var(--bit-fin-clr);
+        color: var(--bit-fin-c);
         border-color: transparent;
         background-color: transparent;
 
         @media (hover: hover) {
             &:hover {
-                color: var(--bit-fin-clr-txt);
-                background-color: var(--bit-fin-clr-hover);
+                color: var(--bit-fin-c-txt);
+                background-color: var(--bit-fin-c-hover);
             }
         }
 
         &:active {
-            color: var(--bit-fin-clr-txt);
-            background-color: var(--bit-fin-clr-active);
+            color: var(--bit-fin-c-txt);
+            background-color: var(--bit-fin-c-active);
         }
     }
 
@@ -135,17 +197,26 @@
 //that the drop state outranks the per-variant :hover rules above, which are otherwise as specific.
 .bit-fin.bit-fin-drg {
     .bit-fin-lbl {
-        border-style: dashed;
-        color: var(--bit-fin-clr-txt);
-        border-color: var(--bit-fin-clr-txt);
-        background-color: var(--bit-fin-clr-hover);
+        border-style: var(--bit-FileInput-drop-border-style, dashed);
+        color: var(--bit-FileInput-drop-color, var(--bit-fin-c-txt));
+        border-color: var(--bit-FileInput-drop-color, var(--bit-fin-c-txt));
+        background-color: var(--bit-FileInput-drop-background, var(--bit-fin-c-hover));
     }
 }
 
+// HideLabel leaves no browse button to turn into the drop indicator, so the component draws one around
+// itself - a drop zone that accepts files while showing nothing is a drop zone nobody discovers.
+.bit-fin.bit-fin-nlb.bit-fin-drg {
+    outline-style: var(--bit-FileInput-drop-border-style, dashed);
+    outline-width: $shp-border-width-thick;
+    outline-offset: spacing(0.25);
+    outline-color: var(--bit-FileInput-drop-color, var(--bit-fin-c));
+}
+
 .bit-fin-dsc {
-    color: $clr-fg-sec;
     margin-top: spacing(0.5);
-    font-size: var(--bit-fin-fs-fontsize);
+    color: var(--bit-FileInput-description-color, #{$clr-fg-sec});
+    font-size: var(--bit-FileInput-description-font-size, var(--bit-fin-fs-fontsize));
 }
 
 .bit-fin-fl {
@@ -156,19 +227,23 @@
 .bit-fin-itm {
     display: flex;
     overflow: hidden;
-    font-weight: $tg-fw-light;
-    color: $clr-fg-pri;
     align-items: center;
     flex-flow: row nowrap;
-    margin-top: spacing(0.375);
-    border-radius: $shp-radius-surface;
+    font-weight: $tg-fw-light;
     justify-content: space-between;
-    font-size: var(--bit-fin-itm-fontsize);
-    border: $shp-border-width $shp-border-style $clr-brd-pri;
+    color: var(--bit-FileInput-file-name-color, #{$clr-fg-pri});
+    margin-top: var(--bit-FileInput-item-gap, #{spacing(0.375)});
+    border-radius: var(--bit-FileInput-item-radius, #{$shp-radius-surface});
+    font-size: var(--bit-FileInput-item-font-size, var(--bit-fin-itm-fontsize));
+    border: $shp-border-width $shp-border-style var(--bit-FileInput-item-border-color, #{$clr-brd-pri});
+    transition: border-color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
-            border-color: $clr-brd-pri-hover;
+            // an author who repaints the rule of an item usually means the hover too, so the dedicated
+            // variable falls back to the resting one before it falls back to the theme's hover border.
+            border-color: var(--bit-FileInput-item-hover-border-color,
+                              var(--bit-FileInput-item-border-color, #{$clr-brd-pri-hover}));
         }
     }
 
@@ -181,30 +256,68 @@
 }
 
 .bit-fin-vld {
-    background-color: $clr-bg-sec;
+    background-color: var(--bit-FileInput-item-background, #{$clr-bg-sec});
 }
 
-.bit-fin-inv {
+// an invalid item carries its reason in words, but a list of a dozen files is scanned before it is read,
+// so the rule around it turns to the error color too - and stays that color under the pointer, which the
+// hover rule above would otherwise paint back over.
+.bit-fin-itm.bit-fin-inv {
+    border-color: var(--bit-FileInput-error-color, #{$clr-err});
+    // the same fill as a valid item, so a rejected file still reads as a row of the list rather than as a
+    // hollow gap in it. A tint of the error color set here is the other reasonable choice, which is why it
+    // has a variable of its own instead of being welded to the valid one.
+    background-color: var(--bit-FileInput-invalid-background,
+                          var(--bit-FileInput-item-background, #{$clr-bg-sec}));
+
+    @media (hover: hover) {
+        &:hover {
+            border-color: var(--bit-FileInput-error-color, #{$clr-err});
+        }
+    }
+
     .bit-fin-msg {
-        color: $clr-err;
+        color: var(--bit-FileInput-error-color, #{$clr-err});
     }
 }
 
 .bit-fin-prv {
     flex-shrink: 0;
     object-fit: cover;
-    border-radius: $shp-radius-control;
-    width: var(--bit-fin-prv-size);
-    height: var(--bit-fin-prv-size);
     margin-inline-start: spacing(0.5);
+    width: var(--bit-FileInput-preview-size, var(--bit-fin-prv-size));
+    height: var(--bit-FileInput-preview-size, var(--bit-fin-prv-size));
+    border-radius: var(--bit-FileInput-preview-radius, #{$shp-radius-sm});
+}
+
+// the glyph stands in the thumbnail's slot for everything that is not a previewable image, so a mixed
+// list keeps one column of names instead of indenting only the rows that happen to be pictures.
+.bit-fin-fio {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    margin-inline-start: spacing(0.5);
+    width: var(--bit-FileInput-preview-size, var(--bit-fin-prv-size));
+    height: var(--bit-FileInput-preview-size, var(--bit-fin-prv-size));
+    color: var(--bit-FileInput-file-icon-color, #{$clr-fg-sec});
+    font-size: var(--bit-FileInput-preview-size, var(--bit-fin-prv-size));
+
+    i {
+        line-height: 1;
+        // an em of the box's own side, so the glyph scales with the thumbnail it stands in for
+        // while still leaving a margin around itself.
+        font-size: 0.65em;
+    }
 }
 
 .bit-fin-fic {
+    min-width: 0;
     flex-grow: 1;
     display: flex;
     overflow: hidden;
-    padding: spacing(1);
     flex-flow: column nowrap;
+    padding: var(--bit-FileInput-item-padding, #{spacing(1)});
 }
 
 .bit-fin-fnc {
@@ -214,42 +327,71 @@
     flex-flow: row nowrap;
 }
 
+// the name is two boxes so that only the stem is ever clipped: the extension keeps its own width and stays
+// readable at the end of the row, which is what a truncated "quarterly-report-final-v...." loses.
 .bit-fin-fn {
+    display: flex;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.bit-fin-fnm {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
+.bit-fin-fnx {
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+
 .bit-fin-fsc {
     display: flex;
     overflow: hidden;
-    color: $clr-fg-sec;
     align-items: center;
     flex-flow: row nowrap;
     margin-top: spacing(0.25);
-    font-size: var(--bit-fin-fs-fontsize);
+    color: var(--bit-FileInput-file-size-color, #{$clr-fg-sec});
+    font-size: var(--bit-FileInput-description-font-size, var(--bit-fin-fs-fontsize));
 }
 
 .bit-fin-fs {
+    flex-shrink: 0;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
+// the folder shares the row with the size and gives way first: the size is a handful of characters and
+// the path can be arbitrarily long, so it is the one that gets ellipsized.
+.bit-fin-fp {
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-inline-start: spacing(0.5);
+    padding-inline-start: spacing(0.5);
+    border-inline-start: $shp-border-width $shp-border-style currentcolor;
+}
+
 .bit-fin-rbt {
     display: flex;
     flex-shrink: 0;
     cursor: pointer;
-    color: $clr-fg-pri;
     align-items: center;
+    font-family: inherit;
     justify-content: center;
-    background-color: $clr-bg-sec;
-    width: var(--bit-fin-rbt-size);
-    height: var(--bit-fin-rbt-size);
+    -webkit-tap-highlight-color: transparent;
+    color: var(--bit-FileInput-remove-button-color, #{$clr-fg-pri});
+    background-color: var(--bit-FileInput-remove-button-background, #{$clr-bg-sec});
+    width: var(--bit-FileInput-remove-button-size, var(--bit-fin-rbt-size));
+    height: var(--bit-FileInput-remove-button-size, var(--bit-fin-rbt-size));
+    transition: color $mot-duration-short $mot-easing, background-color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
-            background-color: $clr-bg-sec-hover;
+            background-color: var(--bit-FileInput-remove-button-hover-background, #{$clr-bg-sec-hover});
         }
     }
 
@@ -257,20 +399,34 @@
         background-color: $clr-bg-sec-active;
     }
 
+    // the ring is drawn inside the button rather than around it: the file item clips its own overflow to
+    // stay rounded, and the remove button sits flush against that edge, so an outset ring would be cut off
+    // on the very side the button touches. The forced-colors branch mirrors focus-ring's, since a
+    // box-shadow is dropped entirely in that mode.
+    &:focus-visible {
+        outline: none;
+        box-shadow: inset 0 0 0 $shp-focus-ring-width var(--bit-FileInput-focus-color, var(--bit-fin-clr-focus));
+
+        @media (forced-colors: active) {
+            outline: #{$shp-focus-ring-width} solid Highlight;
+            outline-offset: calc(-1 * #{$shp-focus-ring-width});
+        }
+    }
+
     &:disabled {
         cursor: default;
-        color: $clr-fg-dis;
-        background-color: $clr-bg-dis;
+        color: var(--bit-FileInput-disabled-color, #{$clr-fg-dis});
+        background-color: var(--bit-FileInput-disabled-background, #{$clr-bg-dis});
 
         @media (hover: hover) {
             &:hover {
-                background-color: $clr-bg-dis;
+                background-color: var(--bit-FileInput-disabled-background, #{$clr-bg-dis});
             }
         }
     }
 
     i {
-        font-size: var(--bit-fin-ico-fontsize);
+        font-size: var(--bit-FileInput-remove-icon-size, var(--bit-fin-ico-fontsize));
     }
 }
 
@@ -292,38 +448,63 @@
         --bit-fin-clr-txt: #{role($tokens, on)};
         --bit-fin-clr-hover: #{role($tokens, hover)};
         --bit-fin-clr-active: #{role($tokens, active)};
+        --bit-fin-clr-focus: #{role($tokens, focus)};
     }
 }
 
 .bit-fin-sm {
-    --bit-fin-lbl-height: #{spacing(3.5)};
+    --bit-fin-lbl-height: #{$siz-ctrl-sm};
     --bit-fin-lbl-fontsize: #{$tg-fs-xs};
-    --bit-fin-lbl-padding: #{spacing(0.25)} #{spacing(1.5)};
+    --bit-fin-lbl-padding: #{$siz-ctrl-pad-y-sm} #{$siz-ctrl-pad-x-sm};
     --bit-fin-itm-fontsize: #{$tg-fs-xs};
     --bit-fin-fs-fontsize: #{$tg-fs-xs};
     --bit-fin-prv-size: #{spacing(4)};
-    --bit-fin-rbt-size: #{spacing(3.5)};
+    --bit-fin-rbt-size: #{$siz-ctrl-sm};
     --bit-fin-ico-fontsize: #{$siz-icon-sm};
 }
 
 .bit-fin-md {
-    --bit-fin-lbl-height: #{spacing(4.5)};
+    --bit-fin-lbl-height: #{$siz-ctrl-md};
     --bit-fin-lbl-fontsize: #{$tg-fs-sm};
-    --bit-fin-lbl-padding: #{spacing(0.5)} #{spacing(2)};
+    --bit-fin-lbl-padding: #{$siz-ctrl-pad-y-md} #{$siz-ctrl-pad-x-md};
     --bit-fin-itm-fontsize: #{$tg-fs-sm};
     --bit-fin-fs-fontsize: #{$tg-fs-xs};
     --bit-fin-prv-size: #{spacing(5)};
-    --bit-fin-rbt-size: #{spacing(4.5)};
+    --bit-fin-rbt-size: #{$siz-ctrl-md};
     --bit-fin-ico-fontsize: #{$siz-icon-md};
 }
 
 .bit-fin-lg {
-    --bit-fin-lbl-height: #{spacing(5.5)};
+    --bit-fin-lbl-height: #{$siz-ctrl-lg};
     --bit-fin-lbl-fontsize: #{$tg-fs-md};
-    --bit-fin-lbl-padding: #{spacing(0.75)} #{spacing(2.5)};
+    --bit-fin-lbl-padding: #{$siz-ctrl-pad-y-lg} #{$siz-ctrl-pad-x-lg};
     --bit-fin-itm-fontsize: #{$tg-fs-md};
     --bit-fin-fs-fontsize: #{$tg-fs-sm};
     --bit-fin-prv-size: #{spacing(6.5)};
-    --bit-fin-rbt-size: #{spacing(5.5)};
+    --bit-fin-rbt-size: #{$siz-ctrl-lg};
     --bit-fin-ico-fontsize: #{$siz-icon-lg};
 }
+
+// Windows High Contrast / forced-colors: every background an author paints is replaced by the system
+// pair, so the three variants collapse into one look and the error color that marks an invalid item is
+// gone. The states that carry meaning are re-established without relying on color: the drop indicator
+// keeps its dashed rule, an invalid item is told apart by a dashed rule of its own, and a disabled
+// input takes the system's own inert color.
+@media (forced-colors: active) {
+    .bit-fin.bit-dis .bit-fin-lbl {
+        color: GrayText;
+        border-color: GrayText;
+    }
+
+    .bit-fin-rbt:disabled {
+        color: GrayText;
+    }
+
+    .bit-fin-itm.bit-fin-inv {
+        border-style: dashed;
+    }
+
+    .bit-fin.bit-fin-drg .bit-fin-lbl {
+        border-style: dashed;
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
index 961d2d2d090..1c9bb263e68 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
@@ -1,9 +1,19 @@
+// the Blazor runtime's own global, which is what turns a File into something .NET can read as a stream
+// instead of as one byte array held whole in memory on both sides.
+declare const DotNet: { createJSStreamReference(value: Blob | ArrayBuffer): any };
+
 namespace BitBlazorUI {
     export class FileInput {
         private static readonly IMAGE_SIZE_CONCURRENCY = 8;
 
         private static _fileInputs: BitFileInputItem[] = [];
 
+        // a File handed over by the file dialog carries its path inside the picked folder in
+        // webkitRelativePath, but one read out of a dropped directory entry does not - the path is only
+        // known while walking the entries. It is remembered here against the File itself, so the walk can
+        // hand it to the selection that the synthesized change event delivers a moment later.
+        private static _relativePaths = new WeakMap<File, string>();
+
         public static async setup(
             id: string,
             inputElement: HTMLInputElement,
@@ -24,6 +34,7 @@ namespace BitBlazorUI {
                 size: file.size,
                 type: file.type,
                 lastModified: file.lastModified,
+                relativePath: file.webkitRelativePath || FileInput._relativePaths.get(file) || '',
                 previewUrl: (showPreview && file.type.startsWith('image/')) ? URL.createObjectURL(file) : null,
                 fileId: Utils.uuidv4(),
                 file: file,
@@ -279,6 +290,17 @@ namespace BitBlazorUI {
             return new Uint8Array(buffer);
         }
 
+        public static openReadStream(id: string, fileId: string) {
+            const item = FileInput._fileInputs.find(f => f.id === id && f.fileId === fileId);
+            if (!item) {
+                throw new Error(`File not found: ${fileId}`);
+            }
+
+            // the File is a Blob, so the runtime reads it in chunks straight off the disk - nothing of it is
+            // ever held in the page, which is what makes a file larger than the tab's memory readable at all.
+            return DotNet.createJSStreamReference(item.file);
+        }
+
         public static reset(id: string, inputElement: HTMLInputElement) {
             FileInput.clear(id);
             inputElement.value = '';
@@ -360,7 +382,16 @@ namespace BitBlazorUI {
 
             if (entry.isFile) {
                 return new Promise<void>(resolve => entry.file(
-                    (file: File) => { files.push(file); resolve(); },
+                    (file: File) => {
+                        // fullPath is rooted at the drop ("/folder/sub/a.txt"); the leading slash is dropped
+                        // so it reads the same as the webkitRelativePath of a folder picked through the dialog.
+                        const path: string = entry.fullPath || '';
+                        if (path) {
+                            FileInput._relativePaths.set(file, path.replace(/^\//, ''));
+                        }
+                        files.push(file);
+                        resolve();
+                    },
                     () => resolve()));
             }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputClassStyles.cs
index cc6f613e09f..43631ca96f6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputClassStyles.cs
@@ -37,11 +37,22 @@ public class BitFileInputClassStyles
     /// </summary>
     public string? Preview { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the file type glyph shown in the thumbnail's place of each file item
+    /// that has no image preview.
+    /// </summary>
+    public string? FileIcon { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the file name of each file item of the BitFileInput.
     /// </summary>
     public string? FileName { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the folder of each file item that came from a folder selection.
+    /// </summary>
+    public string? FilePath { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the file size of each file item of the BitFileInput.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
index 251ce8dd98c..90109ba4388 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
@@ -18,6 +18,13 @@ public class BitFileInputInfo
     /// </summary>
     [JsonPropertyName("name")] public string Name { get; set; } = string.Empty;
 
+    /// <summary>
+    /// The path of the file relative to the selected folder, including the folder's own name
+    /// (e.g., "photos/2024/summer.jpg"). It is only reported by the browser for a folder selection or a
+    /// dropped folder, and is an empty string for a file picked or dropped on its own.
+    /// </summary>
+    [JsonPropertyName("relativePath")] public string RelativePath { get; set; } = string.Empty;
+
     /// <summary>
     /// The size of the file in bytes.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs
index 3559cdd551d..649997610f1 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs
@@ -72,6 +72,15 @@ internal static ValueTask BitFileInputReset(this IJSRuntime jsRuntime, string id
         return jsRuntime.InvokeVoid("BitBlazorUI.FileInput.reset", id, inputFileElement);
     }
 
+    /// <summary>
+    /// Hands back a stream reference over a specific file of the JavaScript file store, which the runtime reads
+    /// in chunks straight off the disk instead of materializing the whole file on either side.
+    /// </summary>
+    internal static ValueTask<IJSStreamReference> BitFileInputOpenReadStream(this IJSRuntime jsRuntime, string id, string fileId)
+    {
+        return jsRuntime.Invoke<IJSStreamReference>("BitBlazorUI.FileInput.openReadStream", id, fileId);
+    }
+
     /// <summary>
     /// Reads the content of a specific file from the JavaScript file store and returns it as a byte array.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
new file mode 100644
index 00000000000..6c99f35e1f5
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
@@ -0,0 +1,450 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The parameters for <see cref="BitFileInput"/> component.
+/// </summary>
+public class BitFileInputParams : BitComponentBaseParams, IBitComponentParams
+{
+    /// <summary>
+    /// Represents the parameter name used to identify the <see cref="BitFileInput"/> cascading parameters within <see cref="BitParams"/>.
+    /// </summary>
+    /// <remarks>
+    /// This constant is typically used when referencing or accessing the BitFileInput value in
+    /// parameterized APIs or configuration settings. Using this constant helps ensure consistency and reduces the risk
+    /// of typographical errors.
+    /// </remarks>
+    public const string ParamName = $"{nameof(BitParams)}.{nameof(BitFileInput)}";
+
+
+
+    public string Name => ParamName;
+
+
+
+    /// <summary>
+    /// Accepted file types for the file browser using MIME types or file extensions (e.g., "image/*", ".pdf,.doc").
+    /// </summary>
+    public string? Accept { get; set; }
+
+    /// <summary>
+    /// Whether files can be selected by dragging them from the operating system and dropping them on the component.
+    /// </summary>
+    public bool? AllowDrop { get; set; }
+
+    /// <summary>
+    /// Whether a file that is already in the file list can be selected again.
+    /// </summary>
+    public bool? AllowDuplicates { get; set; }
+
+    /// <summary>
+    /// Allowed file types for validation purposes, accepting both file extensions and MIME types with an optional wildcard.
+    /// </summary>
+    public IReadOnlyCollection<string>? AllowedExtensions { get; set; }
+
+    /// <summary>
+    /// Whether files can be selected by pasting them from the clipboard onto the component.
+    /// </summary>
+    public bool? AllowPaste { get; set; }
+
+    /// <summary>
+    /// Custom provider of the text announced by the screen reader whenever the file list changes.
+    /// </summary>
+    public Func<IReadOnlyList<BitFileInputInfo>, string?>? AnnouncementProvider { get; set; }
+
+    /// <summary>
+    /// Whether to append newly selected files to the existing file list instead of replacing it.
+    /// </summary>
+    public bool? Append { get; set; }
+
+    /// <summary>
+    /// Whether the file input is automatically reset (cleared) before opening the file browser dialog.
+    /// </summary>
+    public bool? AutoReset { get; set; }
+
+    /// <summary>
+    /// The capture behavior of the file input on devices with a camera or microphone (e.g., "user", "environment").
+    /// </summary>
+    public string? Capture { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the file input.
+    /// </summary>
+    public BitFileInputClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// The general color of the file input, applied to the browse button and the drag-and-drop indicator.
+    /// </summary>
+    public BitColor? Color { get; set; }
+
+    /// <summary>
+    /// A short hint rendered under the browse button and wired to it through <c>aria-describedby</c>.
+    /// </summary>
+    public string? Description { get; set; }
+
+    /// <summary>
+    /// Whether to select folders (directories) instead of files, rendered as the <c>webkitdirectory</c> attribute.
+    /// </summary>
+    public bool? Directory { get; set; }
+
+    /// <summary>
+    /// Custom error message displayed when a file is selected again while <see cref="AllowDuplicates"/> is disabled.
+    /// </summary>
+    public string? DuplicateErrorMessage { get; set; }
+
+    /// <summary>
+    /// Custom provider of the glyph shown in the thumbnail's place for a file that has no image preview.
+    /// </summary>
+    public Func<BitFileInputInfo, BitIconInfo?>? FileIconSelector { get; set; }
+
+    /// <summary>
+    /// Custom formatter of the file size shown under the name of each file item, which is where a localized
+    /// unit name belongs - the kind of decision a whole app makes once rather than per file input.
+    /// </summary>
+    public Func<long, string>? FileSizeFormatter { get; set; }
+
+    /// <summary>
+    /// Custom validation function called for each newly selected file after the built-in validations pass.
+    /// </summary>
+    public Func<BitFileInputInfo, string?>? FileValidator { get; set; }
+
+    /// <summary>
+    /// Whether to hide the file list that displays the selected files in the UI.
+    /// </summary>
+    public bool? HideFileList { get; set; }
+
+    /// <summary>
+    /// Whether to hide the default browse button label from the UI.
+    /// </summary>
+    public bool? HideLabel { get; set; }
+
+    /// <summary>
+    /// The text displayed on the browse button.
+    /// </summary>
+    public string? Label { get; set; }
+
+    /// <summary>
+    /// Maximum allowed number of files in the file list. Set to 0 for no count limit.
+    /// </summary>
+    public int? MaxCount { get; set; }
+
+    /// <summary>
+    /// Custom error message displayed when the number of files exceeds the maximum count limit.
+    /// </summary>
+    public string? MaxCountErrorMessage { get; set; }
+
+    /// <summary>
+    /// Maximum allowed file size in bytes for validation. Set to 0 for no size limit.
+    /// </summary>
+    public long? MaxSize { get; set; }
+
+    /// <summary>
+    /// Custom error message displayed when a file exceeds the maximum size limit.
+    /// </summary>
+    public string? MaxSizeErrorMessage { get; set; }
+
+    /// <summary>
+    /// Maximum allowed total size in bytes of all the files in the file list. Set to 0 for no total size limit.
+    /// </summary>
+    public long? MaxTotalSize { get; set; }
+
+    /// <summary>
+    /// Custom error message displayed when a file makes the total size of the file list exceed the maximum total size.
+    /// </summary>
+    public string? MaxTotalSizeErrorMessage { get; set; }
+
+    /// <summary>
+    /// Minimum allowed file size in bytes for validation. Set to 0 for no size limit.
+    /// </summary>
+    public long? MinSize { get; set; }
+
+    /// <summary>
+    /// Custom error message displayed when a file is smaller than the minimum size limit.
+    /// </summary>
+    public string? MinSizeErrorMessage { get; set; }
+
+    /// <summary>
+    /// Whether to allow selecting multiple files simultaneously through the file browser dialog.
+    /// </summary>
+    public bool? Multiple { get; set; }
+
+    /// <summary>
+    /// Custom error message displayed when a file's extension is not in the allowed extensions list.
+    /// </summary>
+    public string? NotAllowedExtensionErrorMessage { get; set; }
+
+    /// <summary>
+    /// Whether to decode every selected image file to fill its pixel dimensions before validation runs.
+    /// </summary>
+    public bool? ReadImageDimensions { get; set; }
+
+    /// <summary>
+    /// The remove button icon, using custom CSS classes for external icon libraries.
+    /// </summary>
+    public BitIconInfo? RemoveButtonIcon { get; set; }
+
+    /// <summary>
+    /// The name of the remove button icon from the built-in Fluent UI icons.
+    /// </summary>
+    public string? RemoveButtonIconName { get; set; }
+
+    /// <summary>
+    /// The tooltip of the remove button, which is also used as the prefix of its accessible label.
+    /// </summary>
+    public string? RemoveButtonTitle { get; set; }
+
+    /// <summary>
+    /// Whether to display a preview thumbnail for image files, and a file type glyph for everything else.
+    /// </summary>
+    public bool? ShowPreview { get; set; }
+
+    /// <summary>
+    /// Whether to display a remove button next to each file in the file list.
+    /// </summary>
+    public bool? ShowRemoveButton { get; set; }
+
+    /// <summary>
+    /// The size of the file input, applied to the browse button and the file list items.
+    /// </summary>
+    public BitSize? Size { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the file input.
+    /// </summary>
+    public BitFileInputClassStyles? Styles { get; set; }
+
+    /// <summary>
+    /// The tooltip of the browse button, rendered as its title attribute.
+    /// </summary>
+    public string? Title { get; set; }
+
+    /// <summary>
+    /// The visual variant of the browse button: a full fill, only an outline, or neither.
+    /// </summary>
+    public BitVariant? Variant { get; set; }
+
+
+
+    /// <summary>
+    /// Updates the properties of the specified <see cref="BitFileInput"/> instance with any values that have been set on
+    /// this object, if those properties have not already been set on the <see cref="BitFileInput"/> itself.
+    /// </summary>
+    /// <param name="bitFileInput">
+    /// The <see cref="BitFileInput"/> instance whose properties will be updated. Cannot be null.
+    /// </param>
+    public void UpdateParameters(BitFileInput bitFileInput)
+    {
+        if (bitFileInput is null) return;
+
+        UpdateBaseParameters(bitFileInput);
+
+        if (Accept.HasValue() && bitFileInput.HasNotBeenSet(nameof(Accept)))
+        {
+            bitFileInput.Accept = Accept;
+        }
+
+        if (AllowDrop.HasValue && bitFileInput.HasNotBeenSet(nameof(AllowDrop)))
+        {
+            bitFileInput.AllowDrop = AllowDrop.Value;
+        }
+
+        if (AllowDuplicates.HasValue && bitFileInput.HasNotBeenSet(nameof(AllowDuplicates)))
+        {
+            bitFileInput.AllowDuplicates = AllowDuplicates.Value;
+        }
+
+        if (AllowedExtensions is not null && bitFileInput.HasNotBeenSet(nameof(AllowedExtensions)))
+        {
+            bitFileInput.AllowedExtensions = AllowedExtensions;
+        }
+
+        if (AllowPaste.HasValue && bitFileInput.HasNotBeenSet(nameof(AllowPaste)))
+        {
+            bitFileInput.AllowPaste = AllowPaste.Value;
+        }
+
+        if (AnnouncementProvider is not null && bitFileInput.HasNotBeenSet(nameof(AnnouncementProvider)))
+        {
+            bitFileInput.AnnouncementProvider = AnnouncementProvider;
+        }
+
+        if (Append.HasValue && bitFileInput.HasNotBeenSet(nameof(Append)))
+        {
+            bitFileInput.Append = Append.Value;
+        }
+
+        if (AutoReset.HasValue && bitFileInput.HasNotBeenSet(nameof(AutoReset)))
+        {
+            bitFileInput.AutoReset = AutoReset.Value;
+        }
+
+        if (Capture.HasValue() && bitFileInput.HasNotBeenSet(nameof(Capture)))
+        {
+            bitFileInput.Capture = Capture;
+        }
+
+        if (Classes is not null && bitFileInput.HasNotBeenSet(nameof(Classes)))
+        {
+            bitFileInput.Classes = Classes;
+
+            bitFileInput.ClassBuilder.Reset();
+        }
+
+        if (Color.HasValue && bitFileInput.HasNotBeenSet(nameof(Color)))
+        {
+            bitFileInput.Color = Color.Value;
+
+            bitFileInput.ClassBuilder.Reset();
+        }
+
+        if (Description.HasValue() && bitFileInput.HasNotBeenSet(nameof(Description)))
+        {
+            bitFileInput.Description = Description;
+        }
+
+        if (Directory.HasValue && bitFileInput.HasNotBeenSet(nameof(Directory)))
+        {
+            bitFileInput.Directory = Directory.Value;
+        }
+
+        if (DuplicateErrorMessage.HasValue() && bitFileInput.HasNotBeenSet(nameof(DuplicateErrorMessage)))
+        {
+            bitFileInput.DuplicateErrorMessage = DuplicateErrorMessage;
+        }
+
+        if (FileIconSelector is not null && bitFileInput.HasNotBeenSet(nameof(FileIconSelector)))
+        {
+            bitFileInput.FileIconSelector = FileIconSelector;
+        }
+
+        if (FileSizeFormatter is not null && bitFileInput.HasNotBeenSet(nameof(FileSizeFormatter)))
+        {
+            bitFileInput.FileSizeFormatter = FileSizeFormatter;
+        }
+
+        if (FileValidator is not null && bitFileInput.HasNotBeenSet(nameof(FileValidator)))
+        {
+            bitFileInput.FileValidator = FileValidator;
+        }
+
+        if (HideFileList.HasValue && bitFileInput.HasNotBeenSet(nameof(HideFileList)))
+        {
+            bitFileInput.HideFileList = HideFileList.Value;
+        }
+
+        if (HideLabel.HasValue && bitFileInput.HasNotBeenSet(nameof(HideLabel)))
+        {
+            bitFileInput.HideLabel = HideLabel.Value;
+        }
+
+        if (Label.HasValue() && bitFileInput.HasNotBeenSet(nameof(Label)))
+        {
+            bitFileInput.Label = Label;
+        }
+
+        if (MaxCount.HasValue && bitFileInput.HasNotBeenSet(nameof(MaxCount)))
+        {
+            bitFileInput.MaxCount = MaxCount.Value;
+        }
+
+        if (MaxCountErrorMessage.HasValue() && bitFileInput.HasNotBeenSet(nameof(MaxCountErrorMessage)))
+        {
+            bitFileInput.MaxCountErrorMessage = MaxCountErrorMessage;
+        }
+
+        if (MaxSize.HasValue && bitFileInput.HasNotBeenSet(nameof(MaxSize)))
+        {
+            bitFileInput.MaxSize = MaxSize.Value;
+        }
+
+        if (MaxSizeErrorMessage.HasValue() && bitFileInput.HasNotBeenSet(nameof(MaxSizeErrorMessage)))
+        {
+            bitFileInput.MaxSizeErrorMessage = MaxSizeErrorMessage;
+        }
+
+        if (MaxTotalSize.HasValue && bitFileInput.HasNotBeenSet(nameof(MaxTotalSize)))
+        {
+            bitFileInput.MaxTotalSize = MaxTotalSize.Value;
+        }
+
+        if (MaxTotalSizeErrorMessage.HasValue() && bitFileInput.HasNotBeenSet(nameof(MaxTotalSizeErrorMessage)))
+        {
+            bitFileInput.MaxTotalSizeErrorMessage = MaxTotalSizeErrorMessage;
+        }
+
+        if (MinSize.HasValue && bitFileInput.HasNotBeenSet(nameof(MinSize)))
+        {
+            bitFileInput.MinSize = MinSize.Value;
+        }
+
+        if (MinSizeErrorMessage.HasValue() && bitFileInput.HasNotBeenSet(nameof(MinSizeErrorMessage)))
+        {
+            bitFileInput.MinSizeErrorMessage = MinSizeErrorMessage;
+        }
+
+        if (Multiple.HasValue && bitFileInput.HasNotBeenSet(nameof(Multiple)))
+        {
+            bitFileInput.Multiple = Multiple.Value;
+        }
+
+        if (NotAllowedExtensionErrorMessage.HasValue() && bitFileInput.HasNotBeenSet(nameof(NotAllowedExtensionErrorMessage)))
+        {
+            bitFileInput.NotAllowedExtensionErrorMessage = NotAllowedExtensionErrorMessage;
+        }
+
+        if (ReadImageDimensions.HasValue && bitFileInput.HasNotBeenSet(nameof(ReadImageDimensions)))
+        {
+            bitFileInput.ReadImageDimensions = ReadImageDimensions.Value;
+        }
+
+        if (RemoveButtonIcon is not null && bitFileInput.HasNotBeenSet(nameof(RemoveButtonIcon)))
+        {
+            bitFileInput.RemoveButtonIcon = RemoveButtonIcon;
+        }
+
+        if (RemoveButtonIconName.HasValue() && bitFileInput.HasNotBeenSet(nameof(RemoveButtonIconName)))
+        {
+            bitFileInput.RemoveButtonIconName = RemoveButtonIconName;
+        }
+
+        if (RemoveButtonTitle.HasValue() && bitFileInput.HasNotBeenSet(nameof(RemoveButtonTitle)))
+        {
+            bitFileInput.RemoveButtonTitle = RemoveButtonTitle;
+        }
+
+        if (ShowPreview.HasValue && bitFileInput.HasNotBeenSet(nameof(ShowPreview)))
+        {
+            bitFileInput.ShowPreview = ShowPreview.Value;
+        }
+
+        if (ShowRemoveButton.HasValue && bitFileInput.HasNotBeenSet(nameof(ShowRemoveButton)))
+        {
+            bitFileInput.ShowRemoveButton = ShowRemoveButton.Value;
+        }
+
+        if (Size.HasValue && bitFileInput.HasNotBeenSet(nameof(Size)))
+        {
+            bitFileInput.Size = Size.Value;
+
+            bitFileInput.ClassBuilder.Reset();
+        }
+
+        if (Styles is not null && bitFileInput.HasNotBeenSet(nameof(Styles)))
+        {
+            bitFileInput.Styles = Styles;
+
+            bitFileInput.StyleBuilder.Reset();
+        }
+
+        if (Title.HasValue() && bitFileInput.HasNotBeenSet(nameof(Title)))
+        {
+            bitFileInput.Title = Title;
+        }
+
+        if (Variant.HasValue && bitFileInput.HasNotBeenSet(nameof(Variant)))
+        {
+            bitFileInput.Variant = Variant.Value;
+
+            bitFileInput.ClassBuilder.Reset();
+        }
+    }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
index ccd44832135..04f92cca576 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
@@ -2,26 +2,27 @@
 @page "/components/file-input"
 
 <PageOutlet Url="components/fileinput" Title="FileInput"
-            Description="A file selection component with browse, drag-and-drop and clipboard paste support, built-in size, total size, extension, MIME type, count, duplicate, image resolution and custom validation, image preview thumbnails, folder and camera capture modes, described constraints and screen reader announcements, and a fully templatable file list - selection only, no uploading involved." />
+            Description="A file selection component with browse, drag-and-drop and clipboard paste support, built-in size, total size, extension, MIME type, count, duplicate, image resolution and custom validation, image preview thumbnails and file type glyphs, folder and camera capture modes, described constraints and screen reader announcements, and a fully templatable file list - selection only, no uploading involved." />
 
 <DemoPage Name="FileInput"
-          Description="BitFileInput is the selection half of working with files: it lets the user hand files to the app - through the file dialog, by dragging them out of the OS onto the component, or by pasting them from the clipboard - without uploading anything anywhere. Each selected file surfaces in C# as a BitFileInputInfo carrying its name, size, MIME type, last-modified time and, on request, the pixel dimensions of an image, and its content can be pulled on demand as a byte array. Selections are validated on arrival against per-file size bounds, a total size budget, allowed extensions or MIME types, a maximum file count, a no-duplicates rule and any custom rule; files that fail stay in the list, marked invalid with a customizable message, so the user can see exactly what went wrong, and the list level limits release their files again as soon as removals free up room. The built-in file list shows names, human-readable sizes, optional image thumbnails and per-file remove buttons, and both the browse area and the list items can be replaced wholesale with templates. Accessibility is wired in rather than bolted on: the constraints can be spelled out in a description tied to the browse button through aria-describedby, and every change of the list is announced through an ARIA live region. When it is time to actually send files to a server, reach for the BitFileUpload component instead."
+          Description="BitFileInput is the selection half of working with files: it lets the user hand files to the app - through the file dialog, by dragging them out of the OS onto the component, or by pasting them from the clipboard - without uploading anything anywhere. Each selected file surfaces in C# as a BitFileInputInfo carrying its name, size, MIME type, last-modified time, the folder it came from and, on request, the pixel dimensions of an image, and its content can be pulled on demand as a byte array. Selections are validated on arrival against per-file size bounds, a total size budget, allowed extensions or MIME types, a maximum file count, a no-duplicates rule and any custom rule; files that fail stay in the list, marked invalid with a customizable message, so the user can see exactly what went wrong, and the list level limits release their files again as soon as removals free up room. The built-in file list shows names, human-readable sizes, image thumbnails or file type glyphs and per-file remove buttons, and both the browse area and the list items can be replaced wholesale with templates. Accessibility is wired in rather than bolted on: the constraints can be spelled out in a description tied to the browse button through aria-describedby, and every change of the list is announced through an ARIA live region. When it is time to actually send files to a server, reach for the BitFileUpload component instead."
           Parameters="componentParameters" SubEnums="componentSubEnums" SubClasses="componentSubClasses"
-          PublicMembers="componentPublicMembers" GitHubUrl="Inputs/FileInput/BitFileInput.razor"
+          PublicMembers="componentPublicMembers" CssVariables="componentCssVariables"
+          GitHubUrl="Inputs/FileInput/BitFileInput.razor"
           GitHubDemoUrl="Inputs/FileInput/BitFileInputDemo.razor">
     <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <div>
-            Out of the box the BitFileInput offers three ways in: click the browse button to open the file dialog,
-            drag a file out of the OS and drop it anywhere on the component, or focus the component and paste a file
-            from the clipboard. Whatever the route, the selection appears in the built-in file list with its name and a
-            human-readable size, and while files hover over the component the browse button turns into a dashed
-            drop indicator. <b>Label</b> sets the browse button text, which defaults to "Browse". Disabling the
-            BitFileInput greys it out and blocks all three routes the dialog, drops and pastes alike.
+            Three ways in, all on by default: click the browse button to open the file dialog, drag a file out of
+            the OS and drop it anywhere on the component, or focus it and paste a file from the clipboard. The
+            selection lands in the built-in file list with its name and a human-readable size, and the browse button
+            turns into a dashed drop indicator while files hover over the component. <b>Label</b> sets the button
+            text (default "Browse") and <b>Title</b> its tooltip. Disabling the component blocks all three routes
+            and takes the button out of the tab order.
         </div>
 
         <br />
 
-        <BitFileInput Label="Browse or drop a file" />
+        <BitFileInput Label="Browse or drop a file" Title="Pick one file from your device" />
 
         <br />
 
@@ -31,13 +32,11 @@
     <DemoExample Title="AllowDrop & AllowPaste" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode"
                  Id="example2">
         <div>
-            The two alternative routes can be switched off independently. <b>AllowDrop</b> controls dragging files out
-            of the OS onto the component: turning it off keeps the drop from being handled and shows a "no drop"
-            cursor, while still swallowing the event so the browser does not navigate away to the dropped file and
-            lose the page state. <b>AllowPaste</b> controls pasting files from the clipboard; note that a paste is
-            only delivered to the component while the focus is inside it, so the browse button has to be focused
-            first that is why pasting is best treated as a power-user shortcut rather than the primary route. Both
-            take effect immediately when toggled at runtime, as the checkboxes below demonstrate.
+            The two alternative routes switch off independently and take effect immediately.
+            <b>AllowDrop</b> off still swallows the drop event, so the browser does not navigate away to the file
+            and lose the page state, but shows a "no drop" cursor instead of handling it. <b>AllowPaste</b> off
+            ignores pasted files; note that a paste only reaches the component while the focus is inside it, so it
+            is a power-user shortcut rather than the primary route.
         </div>
 
         <br />
@@ -53,13 +52,12 @@
 
     <DemoExample Title="Description" RazorCode="@example3RazorCode" Id="example3">
         <div>
-            Telling the user the rules before they run into them is the single biggest usability win a file input can
-            offer. <b>Description</b> renders a short hint under the browse button and the part that is easy to
-            forget wires it to that button through aria-describedby, so a screen reader reads the constraints out
-            together with the button instead of leaving them to be discovered by trial and error. Spell out the
-            accepted types and the size ceiling there, matching whatever <b>Accept</b>, <b>AllowedExtensions</b> and
-            <b>MaxSize</b> actually enforce. <b>DescriptionTemplate</b> takes over when the hint needs markup of its
-            own, such as the icon below, and <b>Classes.Description</b> / <b>Styles.Description</b> restyle it.
+            Telling the user the rules before they run into them is the biggest usability win a file input offers.
+            <b>Description</b> renders a hint under the browse button <i>and</i> wires it to that button through
+            aria-describedby, so a screen reader reads the constraints together with the button instead of leaving
+            them to be discovered by trial and error. Spell out there whatever <b>Accept</b>,
+            <b>AllowedExtensions</b> and <b>MaxSize</b> actually enforce. <b>DescriptionTemplate</b> takes over when
+            the hint needs markup of its own.
         </div>
 
         <br />
@@ -77,111 +75,120 @@
         </BitFileInput>
     </DemoExample>
 
-    <DemoExample Title="Multiple" RazorCode="@example4RazorCode" Id="example4">
+    <DemoExample Title="Multiple & Directory" RazorCode="@example4RazorCode" Id="example4">
         <div>
-            <b>Multiple</b> lets the file dialog hand over several files at once and lets a single drop or paste
-            carry several files. Without it the dialog is limited to one file, and only the first file of a
-            multi-file drop is taken the rest are ignored rather than flooding the list.
+            <b>Multiple</b> lets the dialog hand over several files at once and lets a single drop or paste carry
+            several. Without it the dialog is limited to one file and only the first file of a multi-file drop is
+            taken, rather than the rest flooding the list.
+            <br /><br />
+            <b>Directory</b> goes further and switches the dialog to folder selection: every file inside the picked
+            folder, subfolders included, lands in the list. It also teaches the drop zone to walk a dropped folder
+            recursively, which a plain file drop cannot do since the browser hands over no files at all for a
+            directory. Each file then carries its <b>RelativePath</b> inside that folder, and the list prints the
+            folder next to the size - without it a flattened folder is a wall of names with no way to tell two
+            <code>readme.md</code> files apart. All the validations still apply to each file individually.
         </div>
 
         <br />
 
         <BitFileInput Label="Browse or drop files" Multiple />
-    </DemoExample>
-
-    <DemoExample Title="AutoReset" RazorCode="@example5RazorCode" Id="example5">
-        <div>
-            <b>AutoReset</b> clears the current selection just before the file dialog opens, so every browse starts
-            from a clean slate the list empties even if the dialog is then cancelled. Handy when a stale
-            selection lingering behind the dialog would be misleading.
-        </div>
 
         <br />
 
-        <BitFileInput Label="Browse or drop a file" AutoReset />
+        <BitFileInput Label="Browse or drop a folder" Directory />
     </DemoExample>
 
-    <DemoExample Title="Append" RazorCode="@example6RazorCode" Id="example6">
+    <DemoExample Title="Removable" RazorCode="@example5RazorCode" Id="example5">
         <div>
-            A new selection normally replaces whatever is in the list. <b>Append</b> keeps the existing files and
-            adds the new selection to the end instead, letting the user build the list up over several rounds of
-            browsing, dropping or pasting.
+            <b>ShowRemoveButton</b> puts a remove button on each file item. Removing a file updates the list,
+            raises <b>OnRemove</b> and <b>OnChange</b>, re-runs the list level limits and releases the file's
+            reference on the JavaScript side so the browser can free the memory. Because the pressed button leaves
+            the DOM with its file, the focus is handed on to the button that takes its place - to the last one when
+            the list got shorter, and back to the browse button when nothing is left - so removing several files in
+            a row from the keyboard never drops the focus back to the top of the page.
+            <b>RemoveButtonIconName</b> swaps the default Delete icon for any other built-in icon.
         </div>
 
         <br />
 
-        <BitFileInput Label="Browse or drop a file" Append />
-    </DemoExample>
-
-    <DemoExample Title="AllowDuplicates" RazorCode="@example7RazorCode" Id="example7">
-        <div>
-            Building a list up with <b>Append</b> makes it easy to pick the same file twice by accident. Setting
-            <b>AllowDuplicates</b> to false catches that: a newly selected file that matches one already in the list
-            by name, size and last-modified time is marked invalid with the <b>DuplicateErrorMessage</b> instead of
-            being added as a second working entry. The duplicate stays visible so the user understands why nothing
-            new appeared. Like the other list level rules, it is re-evaluated after every removal: dismissing the
-            duplicate clears it, and so does removing the file it duplicates, which leaves the surviving copy valid
-            instead of stranding it with an error about a file that is no longer there. Select the same file twice
-            below to see it.
-        </div>
+        <BitFileInput Label="Browse or drop a file" ShowRemoveButton />
 
         <br />
 
-        <BitFileInput Label="Browse or drop files" Multiple Append ShowRemoveButton AllowDuplicates="false"
-                      DuplicateErrorMessage="This file has already been picked." />
+        <BitFileInput Label="Browse or drop a file" ShowRemoveButton RemoveButtonIconName="Cancel" />
     </DemoExample>
 
-    <DemoExample Title="Size limits" RazorCode="@example8RazorCode" Id="example8">
+    <DemoExample Title="Append, AutoReset & duplicates" RazorCode="@example6RazorCode" Id="example6">
         <div>
-            Three parameters bound how much data the selection may carry, all in bytes. <b>MaxSize</b> and
-            <b>MinSize</b> bound each file individually, while <b>MaxTotalSize</b> bounds the accumulated size of the
-            whole list the files are counted in selection order and the first one that would push the running total
-            past the budget is rejected, along with every later one that still does not fit. A file outside the
-            allowed range is not thrown away: it stays in the list marked invalid with an error message explaining
-            why, so the user can see what went wrong and remove it. <b>MaxSizeErrorMessage</b>,
-            <b>MinSizeErrorMessage</b> and <b>MaxTotalSizeErrorMessage</b> customize those messages, like the last
-            example does. Because the total is a list level limit, removing a file re-runs it and any file that now
-            fits inside the budget becomes valid again on the spot.
+            Three parameters decide how a new selection meets the one already in the list. By default it replaces
+            it. <b>Append</b> keeps the existing files and adds the new ones to the end, letting the user build the
+            list up over several rounds of browsing, dropping or pasting. <b>AutoReset</b> is the opposite
+            extreme: it empties the list just before the dialog opens, so every browse starts clean even if the
+            dialog is then cancelled.
+            <br /><br />
+            Building a list up makes it easy to pick the same file twice. <b>AllowDuplicates</b> set to false
+            catches that: a file matching one already in the list by folder, name, size and last-modified time is
+            marked invalid with the <b>DuplicateErrorMessage</b> rather than added as a second working entry. The
+            duplicate stays visible so the user understands why nothing new appeared, and like every list level
+            rule it is re-evaluated after each removal - dismissing either copy leaves the survivor valid. Select
+            the same file twice below to see it.
         </div>
 
         <br />
 
-        <div>Max 1 MB per file:</div>
+        <div>Append with no duplicates:</div>
         <br />
-        <BitFileInput Label="Browse or drop a file" MaxSize="1024 * 1024 * 1" />
+        <BitFileInput Label="Browse or drop files" Multiple Append ShowRemoveButton AllowDuplicates="false"
+                      DuplicateErrorMessage="This file has already been picked." />
 
         <br /><br />
 
-        <div>Min 1 KB per file:</div>
+        <div>AutoReset:</div>
         <br />
-        <BitFileInput Label="Browse or drop a file" MinSize="1024" />
+        <BitFileInput Label="Browse or drop a file" AutoReset />
+    </DemoExample>
 
-        <br /><br />
+    <DemoExample Title="Size & count limits" RazorCode="@example7RazorCode" Id="example7">
+        <div>
+            Four parameters bound what the selection may carry. <b>MaxSize</b> and <b>MinSize</b> bound each file
+            individually, <b>MaxTotalSize</b> bounds the accumulated size of the whole list, and <b>MaxCount</b>
+            caps how many files it holds. A file outside the bounds is not thrown away: it stays in the list marked
+            invalid, with an error message of its own and a red rule around it, so the user sees exactly which file
+            did not make it. Each message is customizable through the matching
+            <b>...ErrorMessage</b> parameter.
+            <br /><br />
+            The two list level limits are re-run after every change, so a file rejected for the budget or the cap
+            becomes valid again as soon as removals free up room, and only files that are otherwise valid consume a
+            slot or a byte of the budget - a file rejected for its size never pushes a good file over the cap.
+        </div>
 
-        <div>Max 2 MB in total:</div>
         <br />
-        <BitFileInput Label="Browse or drop files" Multiple Append ShowRemoveButton MaxTotalSize="1024 * 1024 * 2" />
+
+        <div>Per file, 1 MB max and 1 KB min, with a custom message:</div>
+        <br />
+        <BitFileInput Label="Browse or drop a file" MaxSize="1024 * 1024 * 1" MinSize="1024"
+                      MaxSizeErrorMessage="The file is too big! Please select a file smaller than 1 MB." />
 
         <br /><br />
 
-        <div>Custom error message:</div>
+        <div>Up to 3 files and 2 MB in total:</div>
         <br />
-        <BitFileInput Label="Browse or drop a file" MaxSize="1024 * 1024 * 1"
-                      MaxSizeErrorMessage="The file is too big! Please select a file smaller than 1 MB." />
+        <BitFileInput Label="Browse or drop files" Multiple Append ShowRemoveButton
+                      MaxCount="3" MaxTotalSize="1024 * 1024 * 2" />
     </DemoExample>
 
-    <DemoExample Title="Accept & AllowedExtensions" RazorCode="@example9RazorCode" Id="example9">
+    <DemoExample Title="Accept & AllowedExtensions" RazorCode="@example8RazorCode" Id="example8">
         <div>
-            Two parameters restrict file types at different points. <b>Accept</b> feeds the native accept attribute
-            with MIME types or extensions, so the file dialog only offers matching files but a drop or paste
-            never goes through the dialog, so it is no more than a convenience filter. <b>AllowedExtensions</b> is
-            the actual guard: it checks every file however it arrived, marking mismatches invalid with the
-            <b>NotAllowedExtensionErrorMessage</b>, and when <b>Accept</b> is not set it also generates the accept
-            attribute from the same list. Its entries are matched leniently an extension may be written with or
-            without its leading dot and in any casing and an entry containing a slash is treated as a MIME type
-            instead, matched against the type the browser reports for the file, with a trailing wildcard like
-            <b>image/*</b> covering a whole group. That makes it possible to accept every image regardless of its
-            extension, which a plain extension list cannot express.
+            Two parameters restrict file types at different points. <b>Accept</b> feeds the native accept
+            attribute, so the file dialog only offers matching files - but a drop or a paste never goes through the
+            dialog, which makes it no more than a convenience filter. <b>AllowedExtensions</b> is the actual guard:
+            it checks every file however it arrived, marking mismatches invalid with the
+            <b>NotAllowedExtensionErrorMessage</b>, and when <b>Accept</b> is not set it generates the accept
+            attribute from the same list. Its entries are matched leniently - an extension with or without its
+            leading dot, in any casing - and an entry containing a slash is treated as a MIME type instead, matched
+            against the type the browser reports, with a trailing wildcard like <b>image/*</b> covering a whole
+            group. That accepts every image regardless of its extension, which a plain extension list cannot
+            express.
         </div>
 
         <br />
@@ -203,73 +210,41 @@
         <BitFileInput Label="Browse or drop a file" AllowedExtensions="@(["image/*", "application/pdf"])" />
     </DemoExample>
 
-    <DemoExample Title="MaxCount" RazorCode="@example10RazorCode" Id="example10">
+    <DemoExample Title="Custom validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>
-            <b>MaxCount</b> caps how many files the list can hold 3 in this example. Files arriving beyond the
-            cap stay visible but are marked invalid with the <b>MaxCountErrorMessage</b>, so the user sees exactly
-            which files did not make it instead of them disappearing silently; removing files frees up room and
-            the over-cap files become valid again. Only files that are otherwise valid consume a slot, so a file
-            rejected for its size or type never pushes a good file over the cap. Combined with <b>Append</b> the
-            cap applies to the whole accumulated list, not just a single selection.
+            <b>FileValidator</b> runs a function of your own for each newly selected file once the built-in checks
+            pass. Returning a message marks the file invalid and shows it under the name; returning null accepts
+            the file. Any rule expressible over the file's metadata works, and a validator that throws only
+            invalidates its own file - using the exception message as the error text - rather than aborting the
+            whole selection.
+            <br /><br />
+            Pixel dimensions are the one property of an image that neither its name nor its metadata reveals, yet
+            avatars, banners and thumbnails are exactly what needs a resolution rule. <b>ReadImageDimensions</b>
+            makes the component decode every selected image and fill <b>Width</b> and <b>Height</b> before
+            validation runs, so the validator can reject on resolution and name the offending size. Decoding costs
+            time and memory in proportion to the images, which is why it is opt-in; anything that is not a
+            decodable image comes back with both properties null.
         </div>
 
         <br />
 
-        <BitFileInput Label="Browse or drop files" Multiple Append MaxCount="3" ShowRemoveButton />
-    </DemoExample>
-
-    <DemoExample Title="FileValidator" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-        <div>
-            When the built-in checks are not enough, <b>FileValidator</b> runs a custom function for each newly
-            selected file after those checks pass. Returning an error message marks the file invalid and shows the
-            message under it; returning null accepts the file. Any rule expressible over the file's metadata works
-            this example rejects empty (zero-byte) files. A validator that throws only invalidates its own file,
-            using the exception message as the error text, rather than aborting the whole selection.
-        </div>
-
+        <div>Rejecting empty files:</div>
         <br />
-
         <BitFileInput Label="Browse or drop files" Multiple FileValidator="@ValidateEmptyFile" />
-    </DemoExample>
 
-    <DemoExample Title="ReadImageDimensions" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode"
-                 Id="example12">
-        <div>
-            Pixel dimensions are the one property of an image that neither the file name nor the metadata reveals,
-            yet avatars, banners and thumbnails are usually the very things that need a resolution rule. Turning
-            <b>ReadImageDimensions</b> on makes the component decode every selected image and fill <b>Width</b> and
-            <b>Height</b> on its file info before validation runs, so a plain <b>FileValidator</b> can accept or
-            reject on resolution and even name the offending size in its message. Decoding costs time and memory in
-            proportion to the images, which is why it is opt-in; non-image files and images the browser cannot
-            decode simply come back with both properties null. The example below asks for at least 300×300.
-        </div>
+        <br /><br />
 
+        <div>Rejecting images below 300&times;300:</div>
         <br />
-
-        <BitFileInput Label="Browse or drop images" Multiple ShowPreview Accept="image/*" ReadImageDimensions
+        <BitFileInput Label="Browse or drop images" Multiple Accept="image/*" ReadImageDimensions
                       FileValidator="@ValidateImageDimensions" />
     </DemoExample>
 
-    <DemoExample Title="Directory" RazorCode="@example13RazorCode" Id="example13">
+    <DemoExample Title="Capture" RazorCode="@example10RazorCode" Id="example10">
         <div>
-            <b>Directory</b> switches the browser dialog to folder selection: the user picks a folder, and every
-            file inside it subfolders included lands in the file list. It also teaches the drop zone to expand a
-            dropped folder by walking its entries recursively, which a plain file drop cannot do since the browser
-            hands over no files at all for a directory. All the validations still apply to each file individually,
-            so size limits and extension rules keep working on folder contents.
-        </div>
-
-        <br />
-
-        <BitFileInput Label="Browse or drop a folder" Directory />
-    </DemoExample>
-
-    <DemoExample Title="Capture" RazorCode="@example14RazorCode" Id="example14">
-        <div>
-            <b>Capture</b> renders the native capture attribute, which asks mobile devices to open a camera or
-            microphone instead of the file browser "user" requests the front camera, "environment" the rear one.
-            Desktop browsers ignore the attribute and show the regular file dialog, so the example below behaves
-            normally on a PC but jumps straight to the camera on a phone.
+            <b>Capture</b> renders the native capture attribute, which asks a mobile device to open a camera or a
+            microphone instead of the file browser - "user" for the front camera, "environment" for the rear one.
+            Desktop browsers ignore it and show the regular dialog.
         </div>
 
         <br />
@@ -277,67 +252,63 @@
         <BitFileInput Label="Take a photo" Accept="image/*" Capture="environment" />
     </DemoExample>
 
-    <DemoExample Title="Preview" RazorCode="@example15RazorCode" Id="example15">
-        <div>
-            <b>ShowPreview</b> renders a thumbnail next to each image file in the list, backed by an object URL the
-            component creates on selection and revokes when the file is removed or the component is disposed no
-            manual cleanup needed. The URL is also exposed as <b>PreviewUrl</b> on the file info, ready to be used
-            in a custom <b>FileViewTemplate</b>; non-image files simply render without a thumbnail.
-        </div>
-
-        <br />
-
-        <BitFileInput Label="Browse or drop images" Multiple ShowPreview Accept="image/*" />
-    </DemoExample>
-
-    <DemoExample Title="Removable" RazorCode="@example16RazorCode" Id="example16">
+    <DemoExample Title="Preview & file icons" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode"
+                 Id="example11">
         <div>
-            <b>ShowRemoveButton</b> puts a remove button on each file item. Removing a file updates the list,
-            raises <b>OnRemove</b> and <b>OnChange</b>, re-runs the list level limits and releases the file's
-            reference on the JavaScript side so the browser can free the memory. <b>RemoveButtonIconName</b> swaps
-            the default Delete icon for any other built-in icon, like the Cancel cross below, and
-            <b>RemoveButtonTitle</b> replaces the English "Remove" used as the button tooltip and as the prefix of
-            its accessible label the piece that needs translating in a localized app.
+            <b>ShowPreview</b> puts a thumbnail next to each image, backed by an object URL the component creates
+            on selection and revokes when the file is removed or the component is disposed - no manual cleanup, and
+            the URL is also exposed as <b>PreviewUrl</b> for a custom <b>FileViewTemplate</b>. Everything that has
+            no thumbnail gets a glyph for its type in the same slot, picked from the MIME type and the extension,
+            so the names of a mixed list stay in one column. <b>FileIconSelector</b> replaces that choice with one
+            of your own, and returning null from it leaves a file with no glyph at all.
         </div>
 
         <br />
 
-        <BitFileInput Label="Browse or drop a file" ShowRemoveButton />
-
+        <div>Images and documents together:</div>
         <br />
+        <BitFileInput Label="Browse or drop files" Multiple ShowPreview />
 
-        <BitFileInput Label="Browse or drop a file" ShowRemoveButton RemoveButtonIconName="Cancel" />
+        <br /><br />
 
+        <div>A selector of your own:</div>
         <br />
-
-        <BitFileInput Label="انتخاب یا رها کردن فایل" ShowRemoveButton RemoveButtonTitle="حذف" />
+        <BitFileInput Label="Browse or drop files" Multiple ShowPreview FileIconSelector="@SelectFileIcon" />
     </DemoExample>
 
-    <DemoExample Title="FileSizeFormatter" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode"
-                 Id="example17">
+    <DemoExample Title="Localization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
         <div>
-            Each file item shows its size through a built-in humanizer that speaks English and counts in binary
-            units. <b>FileSizeFormatter</b> takes that decision over: it receives the size in bytes and returns
-            whatever text should appear, which is where a localized unit name, a different rounding, or the decimal
-            base some platforms prefer belongs. The first example below spells the units out in Farsi, the second
-            drops down to raw byte counts with thousands separators.
+            Every piece of English the component can say has a parameter that replaces it, and they are the whole
+            list: <b>Label</b> and <b>Description</b> for the browse area, <b>RemoveButtonTitle</b> for the remove
+            button's tooltip and the prefix of its accessible label ("Remove report.pdf"), the six
+            <b>...ErrorMessage</b> parameters for the validation messages, <b>FileSizeFormatter</b> for the file
+            size - which is also where a different rounding or the decimal base some platforms prefer belongs - and
+            <b>AnnouncementProvider</b> for the sentence the screen reader hears on every change of the list.
+            Setting them once for a whole app is what the <BitLink Href="#example19">cascading parameters</BitLink>
+            are for.
         </div>
 
         <br />
 
-        <BitFileInput Label="Browse or drop files" Multiple FileSizeFormatter="@FormatFileSizeInFarsi" />
+        <BitFileInput Label="انتخاب یا رها کردن فایل" Multiple ShowRemoveButton
+                      MaxSize="1024 * 1024 * 1" RemoveButtonTitle="حذف"
+                      MaxSizeErrorMessage="حجم فایل از حد مجاز بیشتر است."
+                      FileSizeFormatter="@FormatFileSizeInFarsi"
+                      AnnouncementProvider="@AnnounceInFarsi" />
 
         <br />
 
+        <div>Raw byte counts instead of the built-in humanizer:</div>
+        <br />
         <BitFileInput Label="Browse or drop files" Multiple FileSizeFormatter="@(size => $"{size:N0} bytes")" />
     </DemoExample>
 
-    <DemoExample Title="HideFileList" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+    <DemoExample Title="HideFileList" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
         <div>
-            <b>HideFileList</b> suppresses the built-in file list entirely while the selection keeps working
-            useful when the app renders its own view of the files elsewhere. The example captures the selection
-            through <b>OnChange</b> and renders a plain list of its own below the component. Its sibling
-            <b>HideLabel</b> does the same for the browse button, as shown in the Public API section.
+            <b>HideFileList</b> suppresses the built-in file list while the selection keeps working - for an app
+            that renders its own view of the files elsewhere. The example captures the selection through
+            <b>OnChange</b> and renders a plain list of its own below. Its sibling <b>HideLabel</b> does the same
+            for the browse button, as the Public API section shows.
         </div>
 
         <br />
@@ -358,16 +329,15 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Events" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
+    <DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
         <div>
-            <b>OnChange</b> fires with the current array of files whenever the selection changes after browsing,
+            <b>OnChange</b> fires with the current array of files whenever the selection changes - after browsing,
             dropping, pasting and removing alike. <b>OnInvalid</b> follows it whenever the list holds at least one
             invalid file, carrying only those files with their messages, which saves filtering the list by hand to
-            drive a summary or block a submit button. <b>OnRemove</b> fires once for each removed file. Since file
-            content is never loaded eagerly, <b>ReadContentAsync</b> fetches bytes on demand pass a file to read
-            just that one, or call it with no argument to read every valid file in the list, which is what the
-            example does before showing the loaded byte count next to each file, along with the file's
-            <b>LastModifiedDate</b> reported by the browser.
+            drive a summary or block a submit button. <b>OnRemove</b> fires once per removed file. Since content is
+            never loaded eagerly, <b>ReadContentAsync</b> fetches bytes on demand - pass a file to read just that
+            one, or call it with no argument to read every valid file, which is what the example does before
+            showing the loaded byte count next to each file along with its <b>LastModifiedDate</b>.
         </div>
 
         <br />
@@ -404,14 +374,14 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Templates" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
+    <DemoExample Title="Templates" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
         <div>
-            The default UI can be swapped out entirely: <b>LabelTemplate</b> replaces the browse button here with
-            a full drop-zone panel that hides itself once files are selected and <b>FileViewTemplate</b> replaces
+            The default UI can be swapped out entirely: <b>LabelTemplate</b> replaces the browse button - here with
+            a full drop-zone panel that hides itself once files are selected - and <b>FileViewTemplate</b> replaces
             each item of the file list, receiving the file info as its context, validation state and error message
-            included. Replacing the browse button also replaces the built-in dashed drop indicator that lives on it,
-            so a custom label should bring its own drag feedback: <b>Classes.Dragging</b> puts a class on the root
-            element for as long as files hover over the component, which is what turns the panel below blue on drag.
+            included. Replacing the browse button also replaces the built-in dashed drop indicator that lives on
+            it, so a custom label should bring its own drag feedback: <b>Classes.Dragging</b> puts a class on the
+            root element for as long as files hover over the component, which is what turns the panel below blue.
         </div>
 
         <br />
@@ -484,14 +454,22 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Public API" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
+    <DemoExample Title="Public API" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
         <div>
             The component can be driven entirely from code: <b>Browse</b> opens the file dialog, <b>Reset</b>
             silently clears the selection without raising any callback, and <b>RemoveFile</b> removes a specific
-            file or every file when called without an argument raising <b>OnRemove</b> and <b>OnChange</b> just
+            file - or every file when called without an argument - raising <b>OnRemove</b> and <b>OnChange</b> just
             like the remove button does. <b>Files</b> exposes the current selection as a read-only list, each entry
             carrying its position in <b>Index</b>, and <b>InputId</b> gives the id of the underlying HTML input.
-            Here the default browse button is hidden via <b>HideLabel</b> and replaced with external BitButtons.
+            Here the browse button is hidden via <b>HideLabel</b> and replaced with external BitButtons - and
+            since that button is also what the drop indicator lives on, hiding it moves the indicator onto the
+            component itself, so dropping files onto the list still shows that it is allowed.
+            <br /><br />
+            <b>OpenReadStreamAsync</b> is the other way to get at a file's bytes: the runtime reads it from the
+            browser in chunks instead of materializing it whole the way <b>ReadContentAsync</b> does, which is
+            what makes a file too large to hold as a byte array - a video, an archive, a database dump - copyable
+            to disk, hashable or forwardable to a server. It reads at most as many bytes as the browser reported
+            for the file unless a different ceiling is passed, and the stream is the caller's to dispose.
         </div>
 
         <br />
@@ -504,47 +482,50 @@
             <BitButton OnClick="() => publicApiFileInput.Browse()">Browse files</BitButton>
             <BitButton OnClick="() => publicApiFileInput.Reset()">Reset</BitButton>
             <BitButton OnClick="() => publicApiFileInput.RemoveFile()">Remove all</BitButton>
+            <BitButton OnClick="@HashTheFirstFile">Hash the first file</BitButton>
         </div>
 
         <br />
 
         <div>@(publicApiFileInput?.Files.Count ?? 0) file(s) in the list.</div>
+
+        @if (streamHash.HasValue())
+        {
+            <br />
+            <div>SHA-256: <code>@streamHash</code></div>
+        }
     </DemoExample>
 
-    <DemoExample Title="Accessibility" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
+    <DemoExample Title="Accessibility" RazorCode="@example17RazorCode" Id="example17">
         <div>
-            The BitFileInput is accessible out of the box: the browse button is a real button focusable with Tab
-            and activated with Enter or Space and the hidden native input points to it via aria-labelledby, so
-            screen readers announce the visible label. The file list carries list and listitem roles, and every
-            remove button gets an aria-label naming the file it removes. A visually hidden live region with
-            role="status" sits at the end of the component and announces every change of the list, so a screen
-            reader user hears how many files were taken and how many of them failed validation without having to go
-            looking and because a live region is skipped when its text repeats verbatim, the component varies each
-            update with an invisible marker so two identical selections in a row are still both announced.
-            <b>AnnouncementProvider</b> replaces that built-in English sentence with text of your own the natural
-            place to translate it or to word it around your domain, as the second example does. <b>AriaLabel</b>
-            labels the browse button, overriding its visible text for assistive technologies when a short label like
-            "Browse" does not say enough on its own.
+            The browse button is a real button - reached with Tab, activated with Enter or Space, drawing the
+            theme's focus ring, and removed from the tab order while the component is disabled - and the hidden
+            native input points at it through aria-labelledby, so screen readers announce the visible label. The
+            file list carries list and listitem roles, each remove button an aria-label naming the file it removes
+            and the focus after that file is gone, and an invalid file is marked by a message, a red rule and,
+            where the palette is stripped away in Windows High Contrast, a dashed rule. A file name is truncated
+            without losing its extension. A visually hidden live region announces every change of the list,
+            so a screen reader user hears how many files were taken and how many failed validation without going
+            looking - and because a live region is skipped when its text repeats verbatim, each update carries an
+            invisible marker so two identical selections in a row are both announced.
+            <b>AnnouncementProvider</b> replaces that sentence (see <BitLink Href="#example12">Localization</BitLink>),
+            and <b>AriaLabel</b> labels the browse button where a short visible label like "Browse" does not say
+            enough on its own.
         </div>
 
         <br />
 
-        <BitFileInput Label="Browse or drop a file" AriaLabel="Select a document to attach" />
-
-        <br />
-
-        <BitFileInput Label="Browse or drop files" Multiple MaxSize="1024 * 1024 * 1"
-                      AnnouncementProvider="@AnnounceAttachments" />
+        <BitFileInput Label="Browse or drop a file" AriaLabel="Select a document to attach"
+                      Description="Tab to the button, then press Enter or Space." />
     </DemoExample>
 
-    <DemoExample Title="Variant" RazorCode="@example23RazorCode" Id="example23">
+    <DemoExample Title="Variant" RazorCode="@example18RazorCode" Id="example18">
         <div>
             <b>Variant</b> decides how much of the <b>Color</b> the browse button carries: <b>Fill</b>, the default,
             paints the whole button, <b>Outline</b> keeps only the rule around it, and <b>Text</b> drops both so the
             button weighs no more than the text it holds - which is what you want when the file input sits among
             other form fields and should not read as the primary action of the page. All three fill in on hover and
-            turn into the same dashed drop zone while a file is dragged over them, so the variant changes the resting
-            look and nothing else.
+            turn into the same dashed drop zone while a file is dragged over them.
         </div>
 
         <br />
@@ -578,12 +559,43 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example24RazorCode" Id="example24">
+    <DemoExample Title="Cascading parameters" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode"
+                 Id="example19">
         <div>
-            <b>Color</b> picks the theme color of the browse button and the drag-and-drop indicator, with
-            <b>Primary</b> as the default. The semantic colors <b>Success</b>, <b>Warning</b>, <b>Error</b> and
-            friends tie the input to what the selection means, while the <b>Background</b>, <b>Foreground</b>
-            and <b>Border</b> families keep it legible on non-default surfaces like the inverted panel below.
+            <b>BitParams</b> carries a <b>BitFileInputParams</b> down to every file input under it, so a form, a
+            wizard step or a whole app settles the shared rules once instead of repeating them on every input -
+            which is what the size limits, the localized messages and the size formatter of a real app actually
+            are. What it carries is a default and not an override: an input that writes a parameter for itself
+            keeps its own value and only takes from the cascade what it left unset, so one input steps out of the
+            group without the group having to know. Every parameter is filled in on its own, which is why the
+            second input below takes the limits and the formatter from the cascade while overriding the label.
+        </div>
+
+        <br />
+
+        <div class="example-box">
+            <BitParams Parameters="@fileInputParams">
+                <BitFileInput />
+
+                <BitFileInput Label="Its own label, the cascaded rest" MaxSize="1024 * 1024 * 10"
+                              MaxSizeErrorMessage="This one alone accepts up to 10 MB." />
+            </BitParams>
+        </div>
+
+        <br />
+
+        <div class="example-box">
+            <BitFileInput Label="Outside the cascade, and back to the defaults" />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Color" RazorCode="@example20RazorCode" Id="example20">
+        <div>
+            <b>Color</b> picks the theme color of the browse button, its focus ring and the drag-and-drop
+            indicator, with <b>Primary</b> as the default. The semantic colors <b>Success</b>, <b>Warning</b>,
+            <b>Error</b> and friends tie the input to what the selection means, while the <b>Background</b>,
+            <b>Foreground</b> and <b>Border</b> families keep it legible on non-default surfaces like the inverted
+            panel below.
         </div>
         <br />
         <div>
@@ -620,13 +632,13 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example25RazorCode" Id="example25">
+    <DemoExample Title="External Icons" RazorCode="@example21RazorCode" Id="example21">
         <div>
-            The remove button icon is not limited to the built-in icon font: <b>RemoveButtonIcon</b> takes a
-            <b>BitIconInfo</b> or a raw CSS class string that can point at any icon library whose stylesheet is
-            loaded, like FontAwesome or Bootstrap Icons below. Use <b>BitIconInfo.Fa()</b>, <b>BitIconInfo.Bi()</b>
-            or <b>BitIconInfo.Css()</b> to build one, or stick with the built-in font and just pick a different
-            icon via <b>RemoveButtonIconName</b>.
+            Neither glyph is limited to the built-in icon font: <b>RemoveButtonIcon</b> takes a <b>BitIconInfo</b>
+            or a raw CSS class string that can point at any icon library whose stylesheet is loaded, and so does
+            whatever a <b>FileIconSelector</b> returns for the file type glyph. Use <b>BitIconInfo.Fa()</b>,
+            <b>BitIconInfo.Bi()</b> or <b>BitIconInfo.Css()</b> to build one, or stick with the built-in font and
+            just pick a different icon via <b>RemoveButtonIconName</b>.
         </div>
 
         <br />
@@ -641,8 +653,9 @@
         <BitFileInput Label="Browse or drop a file" ShowRemoveButton
                       RemoveButtonIcon="@BitIconInfo.Css("fa-solid fa-xmark")" />
         <br />
-        <BitFileInput Label="Browse or drop a file" ShowRemoveButton
-                      RemoveButtonIcon="@BitIconInfo.Fa("solid trash")" />
+        <BitFileInput Label="Browse or drop files" Multiple ShowPreview ShowRemoveButton
+                      RemoveButtonIcon="@BitIconInfo.Fa("solid trash")"
+                      FileIconSelector="@(_ => BitIconInfo.Fa("solid file-lines"))" />
 
         <br /><br /><br /><br />
 
@@ -656,37 +669,39 @@
         <BitFileInput Label="Browse or drop a file" ShowRemoveButton
                       RemoveButtonIcon="@BitIconInfo.Css("bi bi-x-circle-fill")" />
         <br />
-        <BitFileInput Label="Browse or drop a file" ShowRemoveButton
-                      RemoveButtonIcon="@BitIconInfo.Bi("trash3-fill")" />
+        <BitFileInput Label="Browse or drop files" Multiple ShowPreview ShowRemoveButton
+                      RemoveButtonIcon="@BitIconInfo.Bi("trash3-fill")"
+                      FileIconSelector="@(_ => BitIconInfo.Bi("file-earmark"))" />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example26RazorCode" Id="example26">
+    <DemoExample Title="Size" RazorCode="@example22RazorCode" Id="example22">
         <div>
-            <b>Size</b> scales the browse button, the file list items and their preview thumbnails together:
-            <b>Small</b> for dense layouts, <b>Medium</b> (the default) for regular forms, and <b>Large</b> where
-            the input is a primary control or aimed at touch.
+            <b>Size</b> scales the browse button, the file list items, their thumbnails and their remove buttons
+            together: <b>Small</b> for dense layouts, <b>Medium</b> (the default) for regular forms, and
+            <b>Large</b> where the input is a primary control or aimed at touch.
         </div>
         <br />
         <div><b>Small</b>:</div>
         <br />
-        <BitFileInput Size="BitSize.Small" Label="Browse or drop a file" ShowRemoveButton />
+        <BitFileInput Size="BitSize.Small" Label="Browse or drop a file" ShowPreview ShowRemoveButton />
         <br /><br />
         <div><b>Medium</b>:</div>
         <br />
-        <BitFileInput Size="BitSize.Medium" Label="Browse or drop a file" ShowRemoveButton />
+        <BitFileInput Size="BitSize.Medium" Label="Browse or drop a file" ShowPreview ShowRemoveButton />
         <br /><br />
         <div><b>Large</b>:</div>
         <br />
-        <BitFileInput Size="BitSize.Large" Label="Browse or drop a file" ShowRemoveButton />
+        <BitFileInput Size="BitSize.Large" Label="Browse or drop a file" ShowPreview ShowRemoveButton />
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example27RazorCode" Id="example27">
+    <DemoExample Title="Style & Class" RazorCode="@example23RazorCode" Id="example23">
         <div>
-            <b>Style</b> and <b>Class</b> land on the root element, which inline styles and a single class cover
-            well. For anything deeper, <b>Styles</b> and <b>Classes</b> reach the individual parts the browse
-            button, the file list, each file item, its name, size, error message and remove button and their
-            <b>Dragging</b> entry applies to the root element only while files are being dragged over the
-            component, which is how the examples below restyle the drop state without touching the idle look.
+            <b>Style</b> and <b>Class</b> land on the root element. For anything deeper, <b>Styles</b> and
+            <b>Classes</b> reach the individual parts - the browse button, the file list, each file item, its
+            thumbnail, type glyph, name, folder, size, error message and remove button - and their <b>Dragging</b>
+            entry applies to the root only while files are being dragged over the component, which is how the
+            examples below restyle the drop state without touching the idle look. Prefer <b>Classes</b> when your
+            CSS should own states such as hover and focus, which inline styles cannot express.
         </div>
 
         <br /><br />
@@ -721,19 +736,50 @@
                               RemoveButton = "custom-remove"
                           })" />
         </div>
+
+        <br /><br /><br />
+
+        <div>
+            The component also reads a set of <BitLink Href="#css-variables-section">CSS variables</BitLink> off its
+            root for what no parameter covers. They inherit, so a value on <code>:root</code> or any ancestor
+            re-skins every file input below it, and one on the <b>Style</b> of an instance re-skins that one alone.
+        </div>
+        <br />
+        <div>CSS variables:</div>
+        <br />
+        <div class="example-box">
+            <BitFileInput Label="Pill button, wide component" ShowPreview ShowRemoveButton
+                          Style="--bit-FileInput-label-radius: 999px; --bit-FileInput-max-width: 100%;" />
+
+            <BitFileInput Label="Solid drop indicator in the role color" ShowRemoveButton
+                          Style="--bit-FileInput-drop-border-style: solid; --bit-FileInput-drop-background: var(--bit-clr-suc);" />
+
+            <BitFileInput Label="Rounder, roomier items" ShowPreview ShowRemoveButton
+                          Style="--bit-FileInput-item-radius: 1rem; --bit-FileInput-item-padding: 1rem; --bit-FileInput-item-gap: 0.75rem; --bit-FileInput-preview-size: 3.5rem;" />
+        </div>
+
+        <br />
+
+        <div>Set once on an ancestor, inherited by every file input inside it:</div>
+        <br />
+        <div class="example-box" style="--bit-FileInput-color: rebeccapurple; --bit-FileInput-hover-color: #5b2d8e; --bit-FileInput-item-border-color: rebeccapurple; --bit-FileInput-file-size-color: rebeccapurple;">
+            <BitFileInput Label="Attach a résumé" ShowRemoveButton />
+            <BitFileInput Label="Attach a cover letter" ShowRemoveButton />
+        </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example28RazorCode" Id="example28">
+    <DemoExample Title="RTL" RazorCode="@example24RazorCode" Id="example24">
         <div>
-            Setting <b>Dir</b> to <b>BitDir.Rtl</b> mirrors the whole layout for right-to-left languages the
-            browse button, the file names, sizes and remove buttons all follow so the BitFileInput reads
-            naturally inside an RTL page like the Farsi example below.
+            Setting <b>Dir</b> to <b>BitDir.Rtl</b> mirrors the whole layout for right-to-left languages - the
+            browse button, the thumbnails, the file names, sizes and remove buttons all follow - so the
+            BitFileInput reads naturally inside an RTL page like the Farsi example below.
         </div>
 
         <br />
 
         <div dir="rtl">
-            <BitFileInput Dir="BitDir.Rtl" Label="انتخاب یا رها کردن فایل" ShowRemoveButton RemoveButtonTitle="حذف" />
+            <BitFileInput Dir="BitDir.Rtl" Label="انتخاب یا رها کردن فایل" Multiple ShowPreview ShowRemoveButton
+                          RemoveButtonTitle="حذف" />
         </div>
     </DemoExample>
 </DemoPage>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
index 4515b3155f0..895714a493e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
@@ -23,7 +23,7 @@ public partial class BitFileInputDemo
             Name = "AllowDuplicates",
             Type = "bool",
             DefaultValue = "true",
-            Description = "Whether a file that is already in the file list can be selected again. When disabled, a newly selected file matching an existing one by name, size and last modified time is marked as invalid with the DuplicateErrorMessage instead of being added as a second entry, becoming valid again once the file it duplicates is removed.",
+            Description = "Whether a file that is already in the file list can be selected again. When disabled, a newly selected file matching an existing one by folder, name, size and last modified time is marked as invalid with the DuplicateErrorMessage instead of being added as a second entry, becoming valid again once the file it duplicates is removed.",
         },
         new()
         {
@@ -116,6 +116,15 @@ public partial class BitFileInputDemo
             Description = "Custom error message displayed when a file is selected again while AllowDuplicates is disabled. Defaults to \"The file is already selected\"."
         },
         new()
+        {
+            Name = "FileIconSelector",
+            Type = "Func<BitFileInputInfo, BitIconInfo?>?",
+            DefaultValue = "null",
+            Description = "Custom provider of the glyph shown in the thumbnail's place for a file that has no image preview, which is rendered while ShowPreview is enabled. Receives the file and returns the icon to draw, or null to leave that file without one. When not set, the icon is picked from the file's MIME type and extension.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info"
+        },
+        new()
         {
             Name = "FileValidator",
             Type = "Func<BitFileInputInfo, string?>?",
@@ -301,7 +310,7 @@ public partial class BitFileInputDemo
             Name = "ShowPreview",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Whether to display a preview thumbnail for image files in the file list."
+            Description = "Whether to display a preview thumbnail for image files in the file list, and a file type glyph in the same place for every file that has no preview."
         },
         new()
         {
@@ -329,6 +338,13 @@ public partial class BitFileInputDemo
             Href = "#class-styles"
         },
         new()
+        {
+            Name = "Title",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The tooltip of the browse button, rendered as its title attribute."
+        },
+        new()
         {
             Name = "Variant",
             Type = "BitVariant?",
@@ -374,6 +390,15 @@ public partial class BitFileInputDemo
             Href = "#file-input-info"
         },
         new()
+        {
+            Name = "OpenReadStreamAsync",
+            Type = "(BitFileInputInfo fileInfo, long? maxAllowedSize = null, CancellationToken cancellationToken = default) => Task<Stream>",
+            DefaultValue = "",
+            Description = "Opens a forward-only stream over the content of the specified file, which the runtime reads from the browser in chunks instead of materializing the whole file in memory the way ReadContentAsync does. Unlike ReadContentAsync it also reads a file the validations rejected. maxAllowedSize defaults to the size the browser reported for the file, and the stream must be disposed by the caller.",
+            LinkType = LinkType.Link,
+            Href = "#file-input-info"
+        },
+        new()
         {
             Name = "RemoveFile",
             Type = "(BitFileInputInfo? fileInfo = null) => Task",
@@ -415,6 +440,13 @@ public partial class BitFileInputDemo
                    Description = "The name of the file including its extension (e.g., \"document.pdf\")."
                },
                new()
+               {
+                   Name = "RelativePath",
+                   Type = "string",
+                   DefaultValue = "string.Empty",
+                   Description = "The path of the file relative to the selected folder, including the folder's own name (e.g., \"photos/2024/summer.jpg\"). It is only reported by the browser for a folder selection or a dropped folder, and is an empty string for a file picked or dropped on its own."
+               },
+               new()
                {
                    Name = "Size",
                    Type = "long",
@@ -545,6 +577,13 @@ public partial class BitFileInputDemo
                    Description = "Custom CSS classes/styles for the image preview thumbnail of each file item of the BitFileInput."
                },
                new()
+               {
+                   Name = "FileIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the file type glyph shown in the thumbnail's place of each file item that has no image preview."
+               },
+               new()
                {
                    Name = "FileName",
                    Type = "string?",
@@ -552,6 +591,13 @@ public partial class BitFileInputDemo
                    Description = "Custom CSS classes/styles for the file name of each file item of the BitFileInput."
                },
                new()
+               {
+                   Name = "FilePath",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the folder of each file item that came from a folder selection."
+               },
+               new()
                {
                    Name = "FileSize",
                    Type = "string?",
@@ -668,6 +714,234 @@ public partial class BitFileInputDemo
 
 
 
+    private readonly List<ComponentCssVariable> componentCssVariables =
+    [
+        new()
+        {
+            Name = "--bit-FileInput-max-width",
+            DefaultValue = "21.875rem",
+            Description = "The widest the whole component gets. Set it to 100% for a file input that fills its column.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-color",
+            DefaultValue = "The Color role's main color",
+            Description = "The role color: the fill of a Fill browse button, the rule and the text of an Outline or Text one.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-text-color",
+            DefaultValue = "The Color role's on-color",
+            Description = "Text drawn on top of the role color.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-hover-color",
+            DefaultValue = "The Color role's hover color",
+            Description = "Role color while the browse button is hovered (pointer devices only).",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-active-color",
+            DefaultValue = "The Color role's active color",
+            Description = "Role color while the browse button is pressed.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-focus-color",
+            DefaultValue = "The Color role's focus color",
+            Description = "Color of the keyboard focus ring of the browse button and of each remove button.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-disabled-color",
+            DefaultValue = "--bit-clr-fg-dis",
+            Description = "Foreground when IsEnabled is false.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-disabled-background",
+            DefaultValue = "--bit-clr-bg-dis",
+            Description = "Background when IsEnabled is false.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-disabled-border-color",
+            DefaultValue = "--bit-clr-brd-dis",
+            Description = "Border color when IsEnabled is false.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-label-height",
+            DefaultValue = "--bit-siz-ctrl-sm / -md / -lg per Size",
+            Description = "Smallest height of the browse button, which is what lines it up with the other controls of its size.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-label-padding",
+            DefaultValue = "--bit-siz-ctrl-pad-y-* --bit-siz-ctrl-pad-x-* per Size",
+            Description = "Padding of the browse button.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-label-font-size",
+            DefaultValue = "Per Size, from the type ramp",
+            Description = "Text size of the browse button.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-label-radius",
+            DefaultValue = "--bit-shp-radius-button",
+            Description = "Corner radius of the browse button, which its focus ring follows.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-description-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "Color of the hint under the browse button.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-description-font-size",
+            DefaultValue = "Per Size, from the type ramp",
+            Description = "Text size of that hint, of the file size and of the folder.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-drop-color",
+            DefaultValue = "--bit-FileInput-text-color",
+            Description = "Rule and text of the browse button while files are dragged over the component.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-drop-background",
+            DefaultValue = "--bit-FileInput-hover-color",
+            Description = "Fill of the browse button while files are dragged over the component.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-drop-border-style",
+            DefaultValue = "dashed",
+            Description = "Border style of the drop indicator. Set it to solid for a drop state that does not change the shape of the button.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-item-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Background of a file item, valid or not.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-item-border-color",
+            DefaultValue = "--bit-clr-brd-pri",
+            Description = "Border of a file item at rest.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-item-hover-border-color",
+            DefaultValue = "--bit-FileInput-item-border-color, then --bit-clr-brd-pri-hover",
+            Description = "Border of a hovered file item (pointer devices only). It falls back to the resting border color first, so repainting an item's rule covers its hover without a second variable.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-item-radius",
+            DefaultValue = "--bit-shp-radius-surface",
+            Description = "Corner radius of a file item.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-item-padding",
+            DefaultValue = "0.5rem",
+            Description = "Padding around the name, the size and the error message of a file item.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-item-gap",
+            DefaultValue = "0.1875rem",
+            Description = "Room between two file items, and above the first one.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-item-font-size",
+            DefaultValue = "Per Size, from the type ramp",
+            Description = "Text size of the file name.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-file-name-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Color of the file name.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-file-size-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "Color of the file size and of the folder beside it.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-error-color",
+            DefaultValue = "--bit-clr-err",
+            Description = "Message and border of an invalid file item.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-invalid-background",
+            DefaultValue = "--bit-FileInput-item-background",
+            Description = "Background of an invalid file item. It matches a valid one by default so a rejected file still reads as a row of the list; a tint of the error color is the other reasonable choice.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-preview-size",
+            DefaultValue = "2rem / 2.5rem / 3.25rem per Size",
+            Description = "Side of the image thumbnail and of the file type glyph standing in for it.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-preview-radius",
+            DefaultValue = "--bit-shp-radius-sm",
+            Description = "Corner radius of the image thumbnail.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-file-icon-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "Color of the file type glyph.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-remove-button-size",
+            DefaultValue = "--bit-siz-ctrl-sm / -md / -lg per Size",
+            Description = "Side of the square remove button.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-remove-button-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Glyph color of the remove button.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-remove-button-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Background of the remove button at rest.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-remove-button-hover-background",
+            DefaultValue = "--bit-clr-bg-sec-hover",
+            Description = "Background of a hovered remove button (pointer devices only).",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-remove-icon-size",
+            DefaultValue = "--bit-siz-icon-sm / -md / -lg per Size",
+            Description = "Glyph size of the remove button.",
+        },
+    ];
+
+
+
     private BitFileInput bitFileInput = default!;
 
 
@@ -694,6 +968,21 @@ public partial class BitFileInputDemo
     }
 
 
+    private BitIconInfo? SelectFileIcon(BitFileInputInfo file)
+    {
+        // anything the app knows nothing about is left without a glyph rather than given a generic one.
+        if (file.ContentType.StartsWith("video/", StringComparison.OrdinalIgnoreCase)) return BitIconInfo.Bit("MyMoviesTV");
+        if (file.ContentType.StartsWith("audio/", StringComparison.OrdinalIgnoreCase)) return BitIconInfo.Bit("Volume3");
+
+        return Path.GetExtension(file.Name).ToLowerInvariant() switch
+        {
+            ".pdf" => BitIconInfo.Bit("PDF"),
+            ".zip" or ".rar" or ".7z" => BitIconInfo.Bit("ZipFolder"),
+            _ => null
+        };
+    }
+
+
     private static readonly string[] farsiUnits = ["بایت", "کیلوبایت", "مگابایت", "گیگابایت"];
 
     private string FormatFileSizeInFarsi(long size)
@@ -755,16 +1044,47 @@ private void AddEventLog(string log)
 
 
     private BitFileInput publicApiFileInput = default!;
+    private string? streamHash;
+
+    private async Task HashTheFirstFile()
+    {
+        streamHash = null;
+
+        var file = publicApiFileInput.Files.FirstOrDefault(f => f.IsValid);
+
+        if (file is null) return;
 
+        // nothing of the file is ever held whole: the stream is read in chunks and folded into the hash.
+        await using var stream = await publicApiFileInput.OpenReadStreamAsync(file);
 
-    private string? AnnounceAttachments(IReadOnlyList<BitFileInputInfo> files)
+        streamHash = Convert.ToHexString(await System.Security.Cryptography.SHA256.HashDataAsync(stream));
+    }
+
+
+    private string? AnnounceInFarsi(IReadOnlyList<BitFileInputInfo> files)
     {
-        if (files.Count == 0) return "No attachment yet.";
+        if (files.Count == 0) return "فایلی انتخاب نشده است.";
 
         var rejected = files.Count(f => f.IsValid is false);
 
         return rejected == 0
-            ? $"{files.Count} attachment(s) ready to send."
-            : $"{files.Count - rejected} attachment(s) ready to send, {rejected} rejected as too large.";
+            ? $"{files.Count} فایل انتخاب شد."
+            : $"{files.Count} فایل انتخاب شد، {rejected} مورد نامعتبر است.";
     }
+
+
+    private readonly BitFileInputParams[] fileInputParams =
+    [
+        new()
+        {
+            Multiple = true,
+            ShowPreview = true,
+            ShowRemoveButton = true,
+            Label = "Attach a file",
+            MaxSize = 1024 * 1024 * 1,
+            MaxSizeErrorMessage = "Attachments are limited to 1 MB.",
+            Description = "Anything up to 1 MB. Drop it here or browse.",
+            FileSizeFormatter = size => $"{size:N0} bytes"
+        }
+    ];
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
index 8a8501a147b..861fe27c05e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
@@ -3,7 +3,7 @@
 public partial class BitFileInputDemo
 {
     private readonly string example1RazorCode = @"
-<BitFileInput Label=""Browse or drop a file"" />
+<BitFileInput Label=""Browse or drop a file"" Title=""Pick one file from your device"" />
 
 <BitFileInput Label=""Disabled file input"" IsEnabled=""false"" />";
 
@@ -30,59 +30,59 @@ public partial class BitFileInputDemo
 </BitFileInput>";
 
     private readonly string example4RazorCode = @"
-<BitFileInput Label=""Browse or drop files"" Multiple />";
+<BitFileInput Label=""Browse or drop files"" Multiple />
+
+<BitFileInput Label=""Browse or drop a folder"" Directory />";
 
     private readonly string example5RazorCode = @"
-<BitFileInput Label=""Browse or drop a file"" AutoReset />";
+<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton />
 
-    private readonly string example6RazorCode = @"
-<BitFileInput Label=""Browse or drop a file"" Append />";
+<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton RemoveButtonIconName=""Cancel"" />";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example6RazorCode = @"
 <BitFileInput Label=""Browse or drop files""
               Multiple
               Append
               ShowRemoveButton
               AllowDuplicates=""false""
-              DuplicateErrorMessage=""This file has already been picked."" />";
-
-    private readonly string example8RazorCode = @"
-<BitFileInput Label=""Browse or drop a file"" MaxSize=""1024 * 1024 * 1"" />
+              DuplicateErrorMessage=""This file has already been picked."" />
 
-<BitFileInput Label=""Browse or drop a file"" MinSize=""1024"" />
-
-<BitFileInput Label=""Browse or drop files"" Multiple Append ShowRemoveButton MaxTotalSize=""1024 * 1024 * 2"" />
+<BitFileInput Label=""Browse or drop a file"" AutoReset />";
 
+    private readonly string example7RazorCode = @"
 <BitFileInput Label=""Browse or drop a file""
               MaxSize=""1024 * 1024 * 1""
-              MaxSizeErrorMessage=""The file is too big! Please select a file smaller than 1 MB."" />";
+              MinSize=""1024""
+              MaxSizeErrorMessage=""The file is too big! Please select a file smaller than 1 MB."" />
 
-    private readonly string example9RazorCode = @"
+<BitFileInput Label=""Browse or drop files""
+              Multiple
+              Append
+              ShowRemoveButton
+              MaxCount=""3""
+              MaxTotalSize=""1024 * 1024 * 2"" />";
+
+    private readonly string example8RazorCode = @"
 <BitFileInput Label=""Browse images"" Accept=""image/*"" />
 
-<BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@(["".gif"","".jpg"","".png"","".bmp""])"" />
+<BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@(["".gif"", "".jpg"", "".png"", "".bmp""])"" />
 
 <BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@([""image/*"", ""application/pdf""])"" />";
 
-    private readonly string example10RazorCode = @"
-<BitFileInput Label=""Browse or drop files"" Multiple Append MaxCount=""3"" ShowRemoveButton />";
-
-    private readonly string example11RazorCode = @"
-<BitFileInput Label=""Browse or drop files"" Multiple FileValidator=""@ValidateEmptyFile"" />";
-    private readonly string example11CsharpCode = @"
-private string? ValidateEmptyFile(BitFileInputInfo file)
-{
-    return file.Size == 0 ? ""Empty files are not allowed"" : null;
-}";
+    private readonly string example9RazorCode = @"
+<BitFileInput Label=""Browse or drop files"" Multiple FileValidator=""@ValidateEmptyFile"" />
 
-    private readonly string example12RazorCode = @"
 <BitFileInput Label=""Browse or drop images""
               Multiple
-              ShowPreview
               Accept=""image/*""
               ReadImageDimensions
               FileValidator=""@ValidateImageDimensions"" />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example9CsharpCode = @"
+private string? ValidateEmptyFile(BitFileInputInfo file)
+{
+    return file.Size == 0 ? ""Empty files are not allowed"" : null;
+}
+
 private string? ValidateImageDimensions(BitFileInputInfo file)
 {
     // dropped and pasted files bypass the accept filter, so non-image files reach the validator as well.
@@ -95,27 +95,40 @@ public partial class BitFileInputDemo
         : null;
 }";
 
-    private readonly string example13RazorCode = @"
-<BitFileInput Label=""Browse or drop a folder"" Directory />";
-
-    private readonly string example14RazorCode = @"
+    private readonly string example10RazorCode = @"
 <BitFileInput Label=""Take a photo"" Accept=""image/*"" Capture=""environment"" />";
 
-    private readonly string example15RazorCode = @"
-<BitFileInput Label=""Browse or drop images"" Multiple ShowPreview Accept=""image/*"" />";
-
-    private readonly string example16RazorCode = @"
-<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton />
+    private readonly string example11RazorCode = @"
+<BitFileInput Label=""Browse or drop files"" Multiple ShowPreview />
 
-<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton RemoveButtonIconName=""Cancel"" />
+<BitFileInput Label=""Browse or drop files"" Multiple ShowPreview FileIconSelector=""@SelectFileIcon"" />";
+    private readonly string example11CsharpCode = @"
+private BitIconInfo? SelectFileIcon(BitFileInputInfo file)
+{
+    // anything the app knows nothing about is left without a glyph rather than given a generic one.
+    if (file.ContentType.StartsWith(""video/"", StringComparison.OrdinalIgnoreCase)) return BitIconInfo.Bit(""MyMoviesTV"");
+    if (file.ContentType.StartsWith(""audio/"", StringComparison.OrdinalIgnoreCase)) return BitIconInfo.Bit(""Volume3"");
 
-<BitFileInput Label=""انتخاب یا رها کردن فایل"" ShowRemoveButton RemoveButtonTitle=""حذف"" />";
+    return Path.GetExtension(file.Name).ToLowerInvariant() switch
+    {
+        "".pdf"" => BitIconInfo.Bit(""PDF""),
+        "".zip"" or "".rar"" or "".7z"" => BitIconInfo.Bit(""ZipFolder""),
+        _ => null
+    };
+}";
 
-    private readonly string example17RazorCode = @"
-<BitFileInput Label=""Browse or drop files"" Multiple FileSizeFormatter=""@FormatFileSizeInFarsi"" />
+    private readonly string example12RazorCode = @"
+<BitFileInput Label=""انتخاب یا رها کردن فایل""
+              Multiple
+              ShowRemoveButton
+              MaxSize=""1024 * 1024 * 1""
+              RemoveButtonTitle=""حذف""
+              MaxSizeErrorMessage=""حجم فایل از حد مجاز بیشتر است.""
+              FileSizeFormatter=""@FormatFileSizeInFarsi""
+              AnnouncementProvider=""@AnnounceInFarsi"" />
 
 <BitFileInput Label=""Browse or drop files"" Multiple FileSizeFormatter=""@(size => $""{size:N0} bytes"")"" />";
-    private readonly string example17CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private static readonly string[] farsiUnits = [""بایت"", ""کیلوبایت"", ""مگابایت"", ""گیگابایت""];
 
 private string FormatFileSizeInFarsi(long size)
@@ -130,9 +143,20 @@ private string FormatFileSizeInFarsi(long size)
     }
 
     return $""{Math.Round(value, 1)} {farsiUnits[unit]}"";
+}
+
+private string? AnnounceInFarsi(IReadOnlyList<BitFileInputInfo> files)
+{
+    if (files.Count == 0) return ""فایلی انتخاب نشده است."";
+
+    var rejected = files.Count(f => f.IsValid is false);
+
+    return rejected == 0
+        ? $""{files.Count} فایل انتخاب شد.""
+        : $""{files.Count} فایل انتخاب شد، {rejected} مورد نامعتبر است."";
 }";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitFileInput Label=""Browse or drop files"" Multiple HideFileList OnChange=""@HandleOnHiddenListChange"" />
 
 <div>Custom file list:</div>
@@ -144,7 +168,7 @@ private string FormatFileSizeInFarsi(long size)
 {
     <div>@file.Name - @FileSizeHumanizer.Humanize(file.Size)</div>
 }";
-    private readonly string example18CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private BitFileInputInfo[] hiddenListFiles = [];
 
 private void HandleOnHiddenListChange(BitFileInputInfo[] files)
@@ -152,8 +176,9 @@ private void HandleOnHiddenListChange(BitFileInputInfo[] files)
     hiddenListFiles = files;
 }";
 
-    private readonly string example19RazorCode = @"
-<BitFileInput @ref=""eventsFileInput"" Label=""Select or drag and drop files""
+    private readonly string example14RazorCode = @"
+<BitFileInput @ref=""eventsFileInput""
+              Label=""Select or drag and drop files""
               Multiple
               ShowRemoveButton
               MaxSize=""1024 * 1024 * 1""
@@ -181,7 +206,7 @@ private void HandleOnHiddenListChange(BitFileInputInfo[] files)
         <div class=""event-log"">@log</div>
     }
 }";
-    private readonly string example19CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private BitFileInput eventsFileInput = default!;
 private BitFileInputInfo[] eventsFiles = [];
 private readonly List<string> eventsLog = [];
@@ -216,134 +241,9 @@ private void AddEventLog(string log)
     }
 }";
 
-    private readonly string example20RazorCode = @"
-<style>
-    .browse-file {
-        border: 1px solid #D2D2D7;
-        border-radius: 2px;
-        padding: 24px;
-        width: 420px;
-        height: 200px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: 50px;
-        cursor: pointer;
-    }
-
-    .browse-file:hover {
-        border-color: #0072CE;
-        background-color: #f8f9fa;
-    }
-
-    .browse-file-header {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        font-size: 16px;
-    }
-
-    .browse-file-header i {
-        font-size: 24px;
-        font-weight: 700;
-        color: #0072CE;
-    }
-
-    .browse-file-header strong {
-        color: #0072CE;
-    }
-
-    .browse-file-footer {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        font-size: 12px;
-        color: #78787D;
-    }
-
-    .file-list {
-        border: 1px solid #D2D2D7;
-        border-radius: 2px;
-        padding: 24px;
-        width: 420px;
-        height: 200px;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-    }
-
-    .file-list-header {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .file-info {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-    .file-info-main {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        gap: 12px;
-    }
-
-    .file-info-main i {
-        font-size: 24px;
-    }
-
-    .file-info-name {
-        font-weight: 600;
-        margin-bottom: 4px;
-    }
-
-    .file-info-data {
-        width: 275px;
-    }
-
-    .file-info-btns {
-        display: flex;
-        justify-content: space-between;
-        gap: 8px;
-    }
-
-    .file-info-btns i {
-        display: block;
-        cursor: pointer;
-    }
-
-    .file-info-btns .remove-ico {
-        color: #F9423A;
-    }
-
-    .file-info-btns .remove-ico:hover {
-        color: #d32f2f;
-    }
-
-    .file-info-e-msg {
-        margin-top: 12px;
-        color: #F9423A;
-    }
-
-    .file-list-footer {
-        font-size: 12px;
-        color: #78787D;
-    }
-
-    .custom-drop-zone .browse-file {
-        border-style: dashed;
-        border-color: #0072CE;
-        background-color: #eaf4fd;
-    }
-</style>
-
-<BitFileInput @ref=""bitFileInput"" Multiple
+    private readonly string example15RazorCode = @"
+<BitFileInput @ref=""bitFileInput""
+              Multiple
               MaxSize=""1024 * 1024 * 2""
               AllowedExtensions=""@(["".jpg"", "".jpeg"", "".png"", "".bmp""])""
               Classes=""@(new() { Dragging = ""custom-drop-zone"" })"">
@@ -390,7 +290,7 @@ Browse files
 
                         <div class=""file-info-btns"">
                             <i class=""bit-icon bit-icon--Cancel remove-ico""
-                                @onclick=""() => bitFileInput.RemoveFile(file)"" />
+                               @onclick=""() => bitFileInput.RemoveFile(file)"" />
                         </div>
                     </div>
 
@@ -408,40 +308,49 @@ Browse files
         }
     </FileViewTemplate>
 </BitFileInput>";
-    private readonly string example20CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private BitFileInput bitFileInput = default!;";
 
-    private readonly string example21RazorCode = @"
+    private readonly string example16RazorCode = @"
 <BitFileInput @ref=""publicApiFileInput"" HideLabel Multiple OnChange=""@(_ => StateHasChanged())"" />
 
-<BitButton OnClick=""() => publicApiFileInput.Browse()"">Browse files</BitButton>
-<BitButton OnClick=""() => publicApiFileInput.Reset()"">Reset</BitButton>
-<BitButton OnClick=""() => publicApiFileInput.RemoveFile()"">Remove all</BitButton>
+<div class=""api-buttons"">
+    <BitButton OnClick=""() => publicApiFileInput.Browse()"">Browse files</BitButton>
+    <BitButton OnClick=""() => publicApiFileInput.Reset()"">Reset</BitButton>
+    <BitButton OnClick=""() => publicApiFileInput.RemoveFile()"">Remove all</BitButton>
+    <BitButton OnClick=""@HashTheFirstFile"">Hash the first file</BitButton>
+</div>
 
-<div>@(publicApiFileInput?.Files.Count ?? 0) file(s) in the list.</div>";
-    private readonly string example21CsharpCode = @"
-private BitFileInput publicApiFileInput = default!;";
+<div>@(publicApiFileInput?.Files.Count ?? 0) file(s) in the list.</div>
 
-    private readonly string example22RazorCode = @"
-<BitFileInput Label=""Browse or drop a file"" AriaLabel=""Select a document to attach"" />
+@if (streamHash.HasValue())
+{
+    <div>SHA-256: <code>@streamHash</code></div>
+}";
+    private readonly string example16CsharpCode = @"
+private BitFileInput publicApiFileInput = default!;
+private string? streamHash;
 
-<BitFileInput Label=""Browse or drop files""
-              Multiple
-              MaxSize=""1024 * 1024 * 1""
-              AnnouncementProvider=""@AnnounceAttachments"" />";
-    private readonly string example22CsharpCode = @"
-private string? AnnounceAttachments(IReadOnlyList<BitFileInputInfo> files)
+private async Task HashTheFirstFile()
 {
-    if (files.Count == 0) return ""No attachment yet."";
+    streamHash = null;
 
-    var rejected = files.Count(f => f.IsValid is false);
+    var file = publicApiFileInput.Files.FirstOrDefault(f => f.IsValid);
 
-    return rejected == 0
-        ? $""{files.Count} attachment(s) ready to send.""
-        : $""{files.Count - rejected} attachment(s) ready to send, {rejected} rejected as too large."";
+    if (file is null) return;
+
+    // nothing of the file is ever held whole: the stream is read in chunks and folded into the hash.
+    await using var stream = await publicApiFileInput.OpenReadStreamAsync(file);
+
+    streamHash = Convert.ToHexString(await SHA256.HashDataAsync(stream));
 }";
 
-    private readonly string example23RazorCode = @"
+    private readonly string example17RazorCode = @"
+<BitFileInput Label=""Browse or drop a file""
+              AriaLabel=""Select a document to attach""
+              Description=""Tab to the button, then press Enter or Space."" />";
+
+    private readonly string example18RazorCode = @"
 <BitFileInput Variant=""BitVariant.Fill"" Label=""Fill"" />
 <BitFileInput Variant=""BitVariant.Outline"" Label=""Outline"" />
 <BitFileInput Variant=""BitVariant.Text"" Label=""Text"" />
@@ -454,7 +363,33 @@ Browse files
 <BitFileInput Variant=""BitVariant.Outline"" Color=""BitColor.Success"" Label=""Outline"" />
 <BitFileInput Variant=""BitVariant.Text"" Color=""BitColor.Success"" Label=""Text"" />";
 
-    private readonly string example24RazorCode = @"
+    private readonly string example19RazorCode = @"
+<BitParams Parameters=""@fileInputParams"">
+    <BitFileInput />
+
+    <BitFileInput Label=""Its own label, the cascaded rest""
+                  MaxSize=""1024 * 1024 * 10""
+                  MaxSizeErrorMessage=""This one alone accepts up to 10 MB."" />
+</BitParams>
+
+<BitFileInput Label=""Outside the cascade, and back to the defaults"" />";
+    private readonly string example19CsharpCode = @"
+private readonly BitFileInputParams[] fileInputParams =
+[
+    new()
+    {
+        Multiple = true,
+        ShowPreview = true,
+        ShowRemoveButton = true,
+        Label = ""Attach a file"",
+        MaxSize = 1024 * 1024 * 1,
+        MaxSizeErrorMessage = ""Attachments are limited to 1 MB."",
+        Description = ""Anything up to 1 MB. Drop it here or browse."",
+        FileSizeFormatter = size => $""{size:N0} bytes""
+    }
+];";
+
+    private readonly string example20RazorCode = @"
 <BitFileInput Color=""BitColor.Primary"" Label=""Primary"" />
 <BitFileInput Color=""BitColor.Secondary"" Label=""Secondary"" />
 <BitFileInput Color=""BitColor.Tertiary"" Label=""Tertiary"" />
@@ -464,11 +399,9 @@ Browse files
 <BitFileInput Color=""BitColor.SevereWarning"" Label=""SevereWarning"" />
 <BitFileInput Color=""BitColor.Error"" Label=""Error"" />
 
-<div style=""background:var(--bit-clr-fg-sec);padding:1rem"">
-    <BitFileInput Color=""BitColor.PrimaryBackground"" Label=""PrimaryBackground"" />
-    <BitFileInput Color=""BitColor.SecondaryBackground"" Label=""SecondaryBackground"" />
-    <BitFileInput Color=""BitColor.TertiaryBackground"" Label=""TertiaryBackground"" />
-</div>
+<BitFileInput Color=""BitColor.PrimaryBackground"" Label=""PrimaryBackground"" />
+<BitFileInput Color=""BitColor.SecondaryBackground"" Label=""SecondaryBackground"" />
+<BitFileInput Color=""BitColor.TertiaryBackground"" Label=""TertiaryBackground"" />
 
 <BitFileInput Color=""BitColor.PrimaryForeground"" Label=""PrimaryForeground"" />
 <BitFileInput Color=""BitColor.SecondaryForeground"" Label=""SecondaryForeground"" />
@@ -478,92 +411,82 @@ Browse files
 <BitFileInput Color=""BitColor.SecondaryBorder"" Label=""SecondaryBorder"" />
 <BitFileInput Color=""BitColor.TertiaryBorder"" Label=""TertiaryBorder"" />";
 
-    private readonly string example25RazorCode = @"
+    private readonly string example21RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
-<BitFileInput Label=""Browse or drop a file""
-              ShowRemoveButton
-              RemoveButtonIcon=""@(""fa-solid fa-trash-can"")"" />
+<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton RemoveButtonIcon=""@(""fa-solid fa-trash-can"")"" />
 
-<BitFileInput Label=""Browse or drop a file""
-              ShowRemoveButton
+<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton
               RemoveButtonIcon=""@BitIconInfo.Css(""fa-solid fa-xmark"")"" />
 
-<BitFileInput Label=""Browse or drop a file""
-              ShowRemoveButton
-              RemoveButtonIcon=""@BitIconInfo.Fa(""solid trash"")"" />
+<BitFileInput Label=""Browse or drop files"" Multiple ShowPreview ShowRemoveButton
+              RemoveButtonIcon=""@BitIconInfo.Fa(""solid trash"")""
+              FileIconSelector=""@(_ => BitIconInfo.Fa(""solid file-lines""))"" />
 
 
 <link rel=""stylesheet"" href=""https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"" />
 
-<BitFileInput Label=""Browse or drop a file""
-              ShowRemoveButton
-              RemoveButtonIcon=""@(""bi bi-trash"")"" />
+<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton RemoveButtonIcon=""@(""bi bi-trash"")"" />
 
-<BitFileInput Label=""Browse or drop a file""
-              ShowRemoveButton
+<BitFileInput Label=""Browse or drop a file"" ShowRemoveButton
               RemoveButtonIcon=""@BitIconInfo.Css(""bi bi-x-circle-fill"")"" />
 
-<BitFileInput Label=""Browse or drop a file""
-              ShowRemoveButton
-              RemoveButtonIcon=""@BitIconInfo.Bi(""trash3-fill"")"" />";
+<BitFileInput Label=""Browse or drop files"" Multiple ShowPreview ShowRemoveButton
+              RemoveButtonIcon=""@BitIconInfo.Bi(""trash3-fill"")""
+              FileIconSelector=""@(_ => BitIconInfo.Bi(""file-earmark""))"" />";
 
-    private readonly string example26RazorCode = @"
-<BitFileInput Size=""BitSize.Small"" Label=""Browse or drop a file"" ShowRemoveButton />
+    private readonly string example22RazorCode = @"
+<BitFileInput Size=""BitSize.Small"" Label=""Browse or drop a file"" ShowPreview ShowRemoveButton />
 
-<BitFileInput Size=""BitSize.Medium"" Label=""Browse or drop a file"" ShowRemoveButton />
+<BitFileInput Size=""BitSize.Medium"" Label=""Browse or drop a file"" ShowPreview ShowRemoveButton />
 
-<BitFileInput Size=""BitSize.Large"" Label=""Browse or drop a file"" ShowRemoveButton />";
+<BitFileInput Size=""BitSize.Large"" Label=""Browse or drop a file"" ShowPreview ShowRemoveButton />";
 
-    private readonly string example27RazorCode = @"
-<style>
-    .custom-class {
-        padding: 0.5rem;
-        border-radius: 0.25rem;
-        border: 2px dashed mediumseagreen;
-    }
+    private readonly string example23RazorCode = @"
+<BitFileInput Label=""Styled file input""
+              Style=""box-shadow: dodgerblue 0 0 1rem; border-radius: 1rem; padding: 0.5rem;"" />
 
-    .custom-label {
-        color: white;
-        border-color: mediumseagreen;
-        background-color: mediumseagreen;
-    }
+<BitFileInput Label=""Classed file input"" Class=""custom-class"" />
 
-    .custom-dragging {
-        background-color: honeydew;
-    }
+<BitFileInput Label=""Styles"" ShowRemoveButton Styles=""@(new()
+              {
+                  Label = ""border-color: deeppink; background-color: deeppink; color: white;"",
+                  Dragging = ""background-color: lavenderblush;"",
+                  FileName = ""color: deeppink;"",
+                  RemoveButton = ""background-color: deeppink; color: white;""
+              })"" />
 
-    .custom-item {
-        border-color: mediumseagreen;
-    }
+<BitFileInput Label=""Classes"" ShowRemoveButton Classes=""@(new()
+              {
+                  Label = ""custom-label"",
+                  Dragging = ""custom-dragging"",
+                  FileItem = ""custom-item"",
+                  RemoveButton = ""custom-remove""
+              })"" />
 
-    .custom-remove {
-        color: white;
-        background-color: mediumseagreen;
-    }
-</style>
 
-<BitFileInput Label=""Styled file input"" Style=""box-shadow: dodgerblue 0 0 1rem; border-radius: 1rem; padding: 0.5rem;"" />
+<BitFileInput Label=""Pill button, wide component"" ShowPreview ShowRemoveButton
+              Style=""--bit-FileInput-label-radius: 999px; --bit-FileInput-max-width: 100%;"" />
 
-<BitFileInput Label=""Classed file input"" Class=""custom-class"" />
+<BitFileInput Label=""Solid drop indicator in the role color"" ShowRemoveButton
+              Style=""--bit-FileInput-drop-border-style: solid; --bit-FileInput-drop-background: var(--bit-clr-suc);"" />
 
+<BitFileInput Label=""Rounder, roomier items"" ShowPreview ShowRemoveButton
+              Style=""--bit-FileInput-item-radius: 1rem; --bit-FileInput-item-padding: 1rem; --bit-FileInput-item-gap: 0.75rem; --bit-FileInput-preview-size: 3.5rem;"" />
 
-<BitFileInput Label=""Styles""
-              ShowRemoveButton
-              Styles=""@(new() { Label = ""border-color: deeppink; background-color: deeppink; color: white;"",
-                                Dragging = ""background-color: lavenderblush;"",
-                                FileName = ""color: deeppink;"",
-                                RemoveButton = ""background-color: deeppink; color: white;"" })"" />
 
-<BitFileInput Label=""Classes""
-              ShowRemoveButton
-              Classes=""@(new() { Label = ""custom-label"",
-                                 Dragging = ""custom-dragging"",
-                                 FileItem = ""custom-item"",
-                                 RemoveButton = ""custom-remove"" })"" />";
+<div style=""--bit-FileInput-color: rebeccapurple; --bit-FileInput-hover-color: #5b2d8e; --bit-FileInput-item-border-color: rebeccapurple; --bit-FileInput-file-size-color: rebeccapurple;"">
+    <BitFileInput Label=""Attach a résumé"" ShowRemoveButton />
+    <BitFileInput Label=""Attach a cover letter"" ShowRemoveButton />
+</div>";
 
-    private readonly string example28RazorCode = @"
+    private readonly string example24RazorCode = @"
 <div dir=""rtl"">
-    <BitFileInput Dir=""BitDir.Rtl"" Label=""انتخاب یا رها کردن فایل"" ShowRemoveButton RemoveButtonTitle=""حذف"" />
+    <BitFileInput Dir=""BitDir.Rtl""
+                  Label=""انتخاب یا رها کردن فایل""
+                  Multiple
+                  ShowPreview
+                  ShowRemoveButton
+                  RemoveButtonTitle=""حذف"" />
 </div>";
 }
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
index 923e1a2a0c3..b87d28b1c3b 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
 
@@ -1140,6 +1141,378 @@ public void BitFileInputShouldApplyVisibilityStyle(BitVisibility visibility, str
         }
     }
 
+    [TestMethod,
+       DataRow(true),
+       DataRow(false)
+    ]
+    public void BitFileInputShouldDisableTheBrowseButtonAlongWithTheInput(bool isEnabled)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.IsEnabled, isEnabled);
+        });
+
+        var button = component.Find(".bit-fin-lbl");
+
+        // the browse button is what the keyboard reaches, so the disabled state has to sit on it too and not
+        // only on the hidden input behind it.
+        Assert.AreEqual(!isEnabled, button.HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldSetTitleOnTheBrowseButton()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Title, "Pick a file");
+        });
+
+        Assert.AreEqual("Pick a file", component.Find(".bit-fin-lbl").GetAttribute("title"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldSetTabIndexOnTheBrowseButton()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.TabIndex, "3");
+        });
+
+        Assert.AreEqual("3", component.Find(".bit-fin-lbl").GetAttribute("tabindex"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldDisableTheRemoveButtonWhenDisabled()
+    {
+        SetupFiles([new() { Name = "file.txt", Size = 10, FileId = "1" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.ShowRemoveButton, true);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        Assert.IsFalse(component.Find(".bit-fin-rbt").HasAttribute("disabled"));
+
+        component.Render(parameters => parameters.Add(p => p.IsEnabled, false));
+
+        Assert.IsTrue(component.Find(".bit-fin-rbt").HasAttribute("disabled"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldMarkAnInvalidFileItem()
+    {
+        SetupFiles([new() { Name = "small.txt", Size = 5, FileId = "1" },
+                    new() { Name = "big.txt", Size = 50, FileId = "2" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, true);
+            parameters.Add(p => p.MaxSize, 10);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        var items = component.FindAll(".bit-fin-itm");
+
+        Assert.IsTrue(items[0].ClassList.Contains("bit-fin-vld"));
+        Assert.IsTrue(items[1].ClassList.Contains("bit-fin-inv"));
+        Assert.IsNotNull(component.Find(".bit-fin-inv .bit-fin-msg"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRenderTheFolderOfAFileOfAFolderSelection()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 10, FileId = "1", RelativePath = "docs/notes/a.txt" },
+                    new() { Name = "b.txt", Size = 10, FileId = "2" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Directory, true);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        var folders = component.FindAll(".bit-fin-fp");
+
+        // only the file that reported a path gets one, so an ordinary selection keeps the row it always had.
+        Assert.HasCount(1, folders);
+        Assert.AreEqual("docs/notes", folders[0].TextContent);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldTellApartSameNamedFilesOfDifferentFolders()
+    {
+        SetupFiles([new() { Name = "readme.md", Size = 10, LastModified = 1, FileId = "1", RelativePath = "pkg/one/readme.md" },
+                    new() { Name = "readme.md", Size = 10, LastModified = 1, FileId = "2", RelativePath = "pkg/two/readme.md" },
+                    new() { Name = "readme.md", Size = 10, LastModified = 1, FileId = "3", RelativePath = "pkg/two/readme.md" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Directory, true);
+            parameters.Add(p => p.AllowDuplicates, false);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        var files = component.Instance.Files;
+
+        Assert.IsTrue(files[0].IsValid);
+        Assert.IsTrue(files[1].IsValid);
+        Assert.IsFalse(files[2].IsValid);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRenderAFileTypeIconWhereThereIsNoPreview()
+    {
+        SetupFiles([new() { Name = "report.docx", Size = 10, FileId = "1" },
+                    new() { Name = "archive.zip", Size = 10, FileId = "2" },
+                    new() { Name = "clip.mp4", Size = 10, FileId = "3", ContentType = "video/mp4" },
+                    new() { Name = "mystery", Size = 10, FileId = "4" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, true);
+            parameters.Add(p => p.ShowPreview, true);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        var icons = component.FindAll(".bit-fin-fio i");
+
+        Assert.HasCount(4, icons);
+        Assert.IsTrue(icons[0].ClassList.Contains("bit-icon--WordDocument"));
+        Assert.IsTrue(icons[1].ClassList.Contains("bit-icon--ZipFolder"));
+        Assert.IsTrue(icons[2].ClassList.Contains("bit-icon--Video"));
+        Assert.IsTrue(icons[3].ClassList.Contains("bit-icon--Page"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldNotRenderFileTypeIconsWithoutShowPreview()
+    {
+        SetupFiles([new() { Name = "report.docx", Size = 10, FileId = "1" }]);
+
+        var component = RenderComponent<BitFileInput>();
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        Assert.IsEmpty(component.FindAll(".bit-fin-fio"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRespectFileIconSelector()
+    {
+        SetupFiles([new() { Name = "report.docx", Size = 10, FileId = "1" },
+                    new() { Name = "archive.zip", Size = 10, FileId = "2" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, true);
+            parameters.Add(p => p.ShowPreview, true);
+            parameters.Add(p => p.FileIconSelector,
+                           file => file.Name.EndsWith(".zip") ? null : BitIconInfo.Bit("Attach"));
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        var icons = component.FindAll(".bit-fin-fio i");
+
+        // a null from the selector leaves that file without a glyph at all.
+        Assert.HasCount(1, icons);
+        Assert.IsTrue(icons[0].ClassList.Contains("bit-icon--Attach"));
+    }
+
+    [TestMethod,
+       DataRow(true),
+       DataRow(false)
+    ]
+    public void BitFileInputShouldMoveTheDropIndicatorToTheRootWhenTheLabelIsHidden(bool hideLabel)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.HideLabel, hideLabel);
+        });
+
+        Assert.AreEqual(hideLabel, component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+
+        // the class builder caches, so the toggle has to survive a re-render with the other value too.
+        component.Render(parameters => parameters.Add(p => p.HideLabel, !hideLabel));
+
+        Assert.AreEqual(!hideLabel, component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldNameTheWholePathInTheRemoveButtonLabelOfAFolderSelection()
+    {
+        SetupFiles([new() { Name = "readme.md", Size = 10, FileId = "1", RelativePath = "pkg/one/readme.md" },
+                    new() { Name = "plain.md", Size = 10, FileId = "2" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Directory, true);
+            parameters.Add(p => p.ShowRemoveButton, true);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        var buttons = component.FindAll(".bit-fin-rbt");
+
+        Assert.AreEqual("Remove pkg/one/readme.md", buttons[0].GetAttribute("aria-label"));
+        Assert.AreEqual("Remove plain.md", buttons[1].GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRenderTheFileNameWithoutItsExtensionApart()
+    {
+        SetupFiles([new() { Name = "a-very-long-quarterly-report-final.pdf", Size = 10, FileId = "1" },
+                    new() { Name = "no-extension", Size = 10, FileId = "2" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, true);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        var names = component.FindAll(".bit-fin-fn");
+        var stems = component.FindAll(".bit-fin-fnm");
+        var extensions = component.FindAll(".bit-fin-fnx");
+
+        // the two boxes still read as the whole name, which is what the ellipsis is allowed to eat into.
+        Assert.AreEqual("a-very-long-quarterly-report-final.pdf", names[0].TextContent);
+        Assert.AreEqual("a-very-long-quarterly-report-final", stems[0].TextContent);
+        Assert.AreEqual(".pdf", extensions[0].TextContent);
+
+        Assert.AreEqual("no-extension", stems[1].TextContent);
+        Assert.AreEqual(string.Empty, extensions[1].TextContent);
+    }
+
+    [TestMethod]
+    public async Task BitFileInputShouldMoveTheFocusAfterRemovingAFile()
+    {
+        SetupFiles([new() { Name = "file1.txt", Size = 10, FileId = "1" },
+                    new() { Name = "file2.txt", Size = 20, FileId = "2" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, true);
+            parameters.Add(p => p.ShowRemoveButton, true);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        Assert.HasCount(2, component.FindAll(".bit-fin-rbt"));
+
+        await component.Find(".bit-fin-rbt").ClickAsync(new());
+
+        // the pressed button is gone with its file, so the focus has to be handed on rather than dropped.
+        Context.JSInterop.VerifyFocusAsyncInvoke();
+
+        Assert.HasCount(1, component.FindAll(".bit-fin-rbt"));
+        Assert.HasCount(1, component.Instance.Files);
+        Assert.AreEqual("file2.txt", component.Instance.Files[0].Name);
+    }
+
+    [TestMethod]
+    public async Task BitFileInputOpenReadStreamShouldRejectANullFile()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        await Assert.ThrowsExactlyAsync<ArgumentNullException>(() => component.Instance.OpenReadStreamAsync(null!));
+    }
+
+    [TestMethod]
+    public void BitFileInputParamsShouldHaveCorrectParamName()
+    {
+        var paramName = BitFileInputParams.ParamName;
+        var expectedName = $"{nameof(BitParams)}.{nameof(BitFileInput)}";
+
+        Assert.AreEqual(expectedName, paramName);
+    }
+
+    [TestMethod]
+    public void BitFileInputParamsShouldImplementIBitComponentParams()
+    {
+        var @params = new BitFileInputParams();
+
+        Assert.IsInstanceOfType<IBitComponentParams>(@params);
+        Assert.AreEqual(BitFileInputParams.ParamName, @params.Name);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldApplyCascadingParametersFromBitParams()
+    {
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitFileInputParams
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large,
+                Variant = BitVariant.Outline,
+                Label = "Cascaded Label",
+                Title = "Cascaded Title",
+                Multiple = true,
+                Description = "Cascaded Description"
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileInput>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var root = component.Find(".bit-fin");
+        var button = component.Find(".bit-fin-lbl");
+
+        Assert.IsTrue(root.ClassList.Contains("bit-fin-suc"));
+        Assert.IsTrue(root.ClassList.Contains("bit-fin-lg"));
+        Assert.IsTrue(root.ClassList.Contains("bit-fin-otl"));
+        Assert.AreEqual("Cascaded Label", button.TextContent.Trim());
+        Assert.AreEqual("Cascaded Title", button.GetAttribute("title"));
+        Assert.IsTrue(component.Find(".bit-fin-fi").HasAttribute("multiple"));
+        Assert.AreEqual("Cascaded Description", component.Find(".bit-fin-dsc").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public void BitFileInputDirectParametersShouldOverrideCascadingParameters()
+    {
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitFileInputParams
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large,
+                Label = "Cascaded Label",
+                MaxSize = 100
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileInput>(0);
+                builder.AddAttribute(1, nameof(BitFileInput.Color), BitColor.Error);
+                builder.AddAttribute(2, nameof(BitFileInput.Label), "Own Label");
+                builder.CloseComponent();
+            });
+        });
+
+        var root = component.Find(".bit-fin");
+
+        Assert.IsTrue(root.ClassList.Contains("bit-fin-err"));
+        // what the component left unset still comes from the cascade.
+        Assert.IsTrue(root.ClassList.Contains("bit-fin-lg"));
+        Assert.AreEqual("Own Label", component.Find(".bit-fin-lbl").TextContent.Trim());
+    }
+
     private void SetupFiles(BitFileInputInfo[] files)
     {
         Context.JSInterop.Setup<BitFileInputInfo[]>("BitBlazorUI.FileInput.setup", _ => true).SetResult(files);

From b5da30332e3e64361e178370b9b4f2ad4ab3a422 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 21 Sep 2026 13:25:02 +0330
Subject: [PATCH 2/8] further improvements

---
 .../Inputs/FileInput/BitFileInput.razor       |  23 ++-
 .../Inputs/FileInput/BitFileInput.razor.cs    |  51 ++++-
 .../Inputs/FileInput/BitFileInput.scss        |  60 +++++-
 .../FileInput/BitFileInputClassStyles.cs      |   6 +
 .../Inputs/FileInput/BitFileInputInfo.cs      |   6 +
 .../Inputs/FileInput/BitFileInputParams.cs    |  42 +++-
 .../Inputs/FileInput/BitFileInputDemo.razor   |  91 ++++++---
 .../FileInput/BitFileInputDemo.razor.cs       |  97 ++++++++++
 .../BitFileInputDemo.razor.samples.cs         |  46 +++--
 .../Inputs/FileInput/BitFileInputTests.cs     | 183 +++++++++++++++++-
 10 files changed, 548 insertions(+), 57 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
index af9dbc63a66..915d17ba419 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
@@ -24,7 +24,19 @@
                 aria-describedby="@(_HasDescription ? _descriptionId : null)"
                 style="@Styles?.Label"
                 class="bit-fin-lbl @Classes?.Label">
-            @(Label ?? "Browse")
+            @if (ShowDropZone)
+            {
+                @* the glyph is what turns the panel into something recognizable at a glance as a place to
+                   drop files; it is decorative, since the button already says the same thing in words. *@
+                var dropZoneIcon = BitIconInfo.From(DropZoneIcon, DropZoneIconName ?? "CloudUpload");
+
+                if (dropZoneIcon is not null)
+                {
+                    <i style="@Styles?.DropZoneIcon"
+                       class="bit-fin-dzi @dropZoneIcon.GetCssClasses() @Classes?.DropZoneIcon" aria-hidden="true" />
+                }
+            }
+            <span class="bit-fin-lbt">@(Label ?? "Browse")</span>
         </button>
     }
 
@@ -60,7 +72,11 @@
         var removeTitle = RemoveButtonTitle ?? "Remove";
         var removeIcon = ShowRemoveButton ? BitIconInfo.From(RemoveButtonIcon, RemoveButtonIconName ?? "Delete") : null;
 
-        <div role="list" style="@Styles?.FileList" class="bit-fin-fl @Classes?.FileList">
+        @* the list is named so that it is announced as the selected files rather than as one more
+           unlabelled list of the page when a screen reader user walks the landmarks and the lists. *@
+        <div role="list"
+             aria-label="@(FileListAriaLabel ?? "Selected files")"
+             style="@Styles?.FileList" class="bit-fin-fl @Classes?.FileList">
             @foreach (var file in Files)
             {
                 if (FileViewTemplate is not null)
@@ -83,10 +99,13 @@
                                 @* draggable is off so that dragging a thumbnail does not start a drag over the drop zone itself.
                                    the alt is empty on purpose: the thumbnail is decorative and its name is already
                                    right next to it, so announcing it again would just repeat the same text. *@
+                                @* lazily, since a folder selection can hold thousands of images and only
+                                   the handful in view is worth decoding. *@
                                 <img src="@file.PreviewUrl"
                                      alt=""
                                      draggable="false"
                                      decoding="async"
+                                     loading="lazy"
                                      style="@Styles?.Preview"
                                      class="bit-fin-prv @Classes?.Preview" />
                             }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
index 4104c09d503..e1813b2ec00 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
@@ -1,11 +1,11 @@
-using System.Diagnostics.CodeAnalysis;
+using System.Diagnostics.CodeAnalysis;
 
 namespace Bit.BlazorUI;
 
 /// <summary>
 /// BitFileInput is a file input component that wraps the HTML file input element and enables file selection
-/// with support for validation, drag-and-drop, paste, image previews, file type glyphs, folder selection,
-/// and customization.
+/// with support for validation, drag-and-drop onto a button or a drop zone panel, paste, image previews,
+/// file type glyphs, folder selection, and customization.
 /// The selected files' metadata is accessible from C# code, and their content can be pulled on demand either
 /// as a byte array (<see cref="ReadContentAsync"/>) or as a chunked stream (<see cref="OpenReadStreamAsync"/>).
 /// </summary>
@@ -136,6 +136,19 @@ public partial class BitFileInput : BitComponentBase
     /// </summary>
     [Parameter] public bool Directory { get; set; }
 
+    /// <summary>
+    /// Gets or sets the glyph of the drop zone panel using custom CSS classes for external icon libraries,
+    /// which is only rendered while <see cref="ShowDropZone"/> is enabled.
+    /// Takes precedence over <see cref="DropZoneIconName"/> when both are set.
+    /// </summary>
+    [Parameter] public BitIconInfo? DropZoneIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the drop zone panel's glyph from the built-in Fluent UI icons.
+    /// Defaults to "CloudUpload", and an empty string leaves the panel without a glyph at all.
+    /// </summary>
+    [Parameter] public string? DropZoneIconName { get; set; }
+
     /// <summary>
     /// Custom error message displayed when a file is selected again while <see cref="AllowDuplicates"/> is disabled.
     /// Defaults to "The file is already selected".
@@ -164,6 +177,12 @@ public partial class BitFileInput : BitComponentBase
     /// </summary>
     [Parameter] public Func<long, string>? FileSizeFormatter { get; set; }
 
+    /// <summary>
+    /// The accessible name of the file list, which tells a screen reader user walking the lists of the page
+    /// what this one holds. Defaults to "Selected files".
+    /// </summary>
+    [Parameter] public string? FileListAriaLabel { get; set; }
+
     /// <summary>
     /// Custom Razor template for rendering individual file items in the file list.
     /// Receives a <see cref="BitFileInputInfo"/> context for each file.
@@ -297,6 +316,17 @@ public partial class BitFileInput : BitComponentBase
     /// </summary>
     [Parameter] public string? RemoveButtonTitle { get; set; }
 
+    /// <summary>
+    /// Whether to render the browse area as a full width drop zone panel - a dashed rule around a glyph and
+    /// the label - instead of an ordinary button, which is what makes a drag-and-drop target look like one.
+    /// The panel is the same button underneath, so it is still reached with Tab and activated with Enter or Space,
+    /// and it carries the drag indicator exactly as the button does.
+    /// It also makes <see cref="BitVariant.Outline"/> the default variant, since a panel-sized block of the
+    /// role color is rarely what a drop zone wants; set <see cref="Variant"/> to take that back.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool ShowDropZone { get; set; }
+
     /// <summary>
     /// Whether to display a preview thumbnail for image files in the file list.
     /// </summary>
@@ -367,12 +397,19 @@ public async Task Reset()
     {
         if (IsDisposed) return;
 
+        // clearing what is already empty changes nothing, so it is not worth an announcement - otherwise
+        // every AutoReset browse would tell the screen reader that no file is selected before the dialog opens.
+        var hadFiles = _files.Count > 0;
+
         _files.Clear();
         _removeRefs.Clear();
 
         await _js.BitFileInputReset(UniqueId, _inputRef);
 
-        Announce();
+        if (hadFiles)
+        {
+            Announce();
+        }
 
         StateHasChanged();
     }
@@ -500,7 +537,9 @@ protected override void RegisterCssClasses()
             BitVariant.Fill => "bit-fin-fil",
             BitVariant.Outline => "bit-fin-otl",
             BitVariant.Text => "bit-fin-txt",
-            _ => "bit-fin-fil"
+            // a drop zone is a surface to drop onto rather than the primary action of the page, so it
+            // defaults to the outlined variant whose rule is what the dashed drop indicator is drawn on.
+            _ => ShowDropZone ? "bit-fin-otl" : "bit-fin-fil"
         });
 
         ClassBuilder.Register(() => Color switch
@@ -536,6 +575,8 @@ protected override void RegisterCssClasses()
         // the browse button is what carries the drop indicator, so a component rendered without one needs
         // the indicator drawn around itself instead of silently accepting drops with nothing to show for it.
         ClassBuilder.Register(() => HideLabel ? "bit-fin-nlb" : string.Empty);
+
+        ClassBuilder.Register(() => ShowDropZone ? "bit-fin-dzn" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
index e3c3b0eff7d..c440d93d524 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
@@ -16,13 +16,21 @@
 //   --bit-FileInput-label-padding             padding of the browse button                     (default: per size, $siz-ctrl-pad-*)
 //   --bit-FileInput-label-font-size           text size of the browse button                   (default: per size, from the type ramp)
 //   --bit-FileInput-label-radius              corner radius of the browse button and its ring  (default: $shp-radius-button)
+//   --bit-FileInput-drop-zone-height          smallest height of the drop zone panel           (default: per size)
+//   --bit-FileInput-drop-zone-padding         padding of the drop zone panel                   (default: per size)
+//   --bit-FileInput-drop-zone-radius          corner radius of the drop zone panel             (default: $shp-radius-surface)
+//   --bit-FileInput-drop-zone-border-width    rule thickness of the drop zone panel            (default: $shp-border-width-thick)
+//   --bit-FileInput-drop-zone-border-style    rule style of the drop zone panel                (default: dashed)
+//   --bit-FileInput-drop-zone-icon-size       glyph size inside the drop zone panel            (default: per size)
 //   --bit-FileInput-description-color         color of the hint under the browse button        (default: $clr-fg-sec)
 //   --bit-FileInput-description-font-size     text size of that hint, of the file size and
 //                                             of the folder beside it                          (default: per size, from the type ramp)
 //   --bit-FileInput-drop-color                rule and text of the drop indicator              (default: the text color)
 //   --bit-FileInput-drop-background           fill of the drop indicator                       (default: the hover color)
 //   --bit-FileInput-drop-border-style         border style of the drop indicator               (default: dashed)
+//   --bit-FileInput-file-list-max-height      tallest the file list gets before it scrolls     (default: none)
 //   --bit-FileInput-item-background           background of a file item, valid or not          (default: $clr-bg-sec)
+//   --bit-FileInput-item-hover-background     background of a hovered valid file item          (default: the resting background)
 //   --bit-FileInput-item-border-color         border of a file item                            (default: $clr-brd-pri)
 //   --bit-FileInput-item-hover-border-color   border of a hovered file item                    (default: the resting border color)
 //   --bit-FileInput-item-radius               corner radius of a file item                     (default: $shp-radius-surface)
@@ -40,6 +48,7 @@
 //   --bit-FileInput-remove-button-color       glyph color of the remove button                 (default: $clr-fg-pri)
 //   --bit-FileInput-remove-button-background  background of the remove button                  (default: $clr-bg-sec)
 //   --bit-FileInput-remove-button-hover-background  background of a hovered remove button      (default: $clr-bg-sec-hover)
+//   --bit-FileInput-remove-button-active-background background of a pressed remove button      (default: $clr-bg-sec-active)
 //   --bit-FileInput-remove-icon-size          glyph size of the remove button                  (default: per size, $siz-icon-*)
 
 .bit-fin {
@@ -112,6 +121,29 @@
     }
 }
 
+//ShowDropZone turns the same button into the panel a modern file input is expected to look like: a tall
+//full width surface with a dashed rule and a glyph above the label. Nothing but its shape changes - it is
+//still the button the keyboard reaches and the drag indicator is drawn on - so the variant blocks below and
+//the drag state keep applying to it untouched.
+.bit-fin-dzn {
+    .bit-fin-lbl {
+        width: 100%;
+        text-align: center;
+        gap: #{spacing(0.5)};
+        flex-flow: column nowrap;
+        border-style: var(--bit-FileInput-drop-zone-border-style, dashed);
+        border-width: var(--bit-FileInput-drop-zone-border-width, #{$shp-border-width-thick});
+        border-radius: var(--bit-FileInput-drop-zone-radius, #{$shp-radius-surface});
+        min-height: var(--bit-FileInput-drop-zone-height, var(--bit-fin-dzn-height));
+        padding: var(--bit-FileInput-drop-zone-padding, var(--bit-fin-dzn-padding));
+    }
+
+    .bit-fin-dzi {
+        line-height: 1;
+        font-size: var(--bit-FileInput-drop-zone-icon-size, var(--bit-fin-dzn-ico-size));
+    }
+}
+
 //Fill - the default: a solid block of the role color labelled in the role's on-color.
 .bit-fin-fil {
     .bit-fin-lbl {
@@ -219,9 +251,14 @@
     font-size: var(--bit-FileInput-description-font-size, var(--bit-fin-fs-fontsize));
 }
 
+// a folder selection can hand over thousands of files, and a list that long pushes everything after it off
+// the page, so it is given a ceiling to scroll under - unset by default, since a handful of files should not
+// be boxed in a scroller either.
 .bit-fin-fl {
     margin: 0;
     padding: 0;
+    overflow-y: auto;
+    max-height: var(--bit-FileInput-file-list-max-height, none);
 }
 
 .bit-fin-itm {
@@ -236,7 +273,8 @@
     border-radius: var(--bit-FileInput-item-radius, #{$shp-radius-surface});
     font-size: var(--bit-FileInput-item-font-size, var(--bit-fin-itm-fontsize));
     border: $shp-border-width $shp-border-style var(--bit-FileInput-item-border-color, #{$clr-brd-pri});
-    transition: border-color $mot-duration-short $mot-easing;
+    transition: border-color $mot-duration-short $mot-easing,
+                background-color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
@@ -257,6 +295,15 @@
 
 .bit-fin-vld {
     background-color: var(--bit-FileInput-item-background, #{$clr-bg-sec});
+
+    @media (hover: hover) {
+        &:hover {
+            // as with the rule, an author who repaints the fill of an item usually means the hover too,
+            // so the dedicated variable falls back to the resting one rather than to a theme color.
+            background-color: var(--bit-FileInput-item-hover-background,
+                                  var(--bit-FileInput-item-background, #{$clr-bg-sec}));
+        }
+    }
 }
 
 // an invalid item carries its reason in words, but a list of a dozen files is scanned before it is read,
@@ -396,7 +443,7 @@
     }
 
     &:active {
-        background-color: $clr-bg-sec-active;
+        background-color: var(--bit-FileInput-remove-button-active-background, #{$clr-bg-sec-active});
     }
 
     // the ring is drawn inside the button rather than around it: the file item clips its own overflow to
@@ -459,6 +506,9 @@
     --bit-fin-itm-fontsize: #{$tg-fs-xs};
     --bit-fin-fs-fontsize: #{$tg-fs-xs};
     --bit-fin-prv-size: #{spacing(4)};
+    --bit-fin-dzn-height: #{spacing(9)};
+    --bit-fin-dzn-padding: #{spacing(1.5)};
+    --bit-fin-dzn-ico-size: #{spacing(3)};
     --bit-fin-rbt-size: #{$siz-ctrl-sm};
     --bit-fin-ico-fontsize: #{$siz-icon-sm};
 }
@@ -470,6 +520,9 @@
     --bit-fin-itm-fontsize: #{$tg-fs-sm};
     --bit-fin-fs-fontsize: #{$tg-fs-xs};
     --bit-fin-prv-size: #{spacing(5)};
+    --bit-fin-dzn-height: #{spacing(11)};
+    --bit-fin-dzn-padding: #{spacing(2)};
+    --bit-fin-dzn-ico-size: #{spacing(4)};
     --bit-fin-rbt-size: #{$siz-ctrl-md};
     --bit-fin-ico-fontsize: #{$siz-icon-md};
 }
@@ -481,6 +534,9 @@
     --bit-fin-itm-fontsize: #{$tg-fs-md};
     --bit-fin-fs-fontsize: #{$tg-fs-sm};
     --bit-fin-prv-size: #{spacing(6.5)};
+    --bit-fin-dzn-height: #{spacing(13)};
+    --bit-fin-dzn-padding: #{spacing(2.5)};
+    --bit-fin-dzn-ico-size: #{spacing(5)};
     --bit-fin-rbt-size: #{$siz-ctrl-lg};
     --bit-fin-ico-fontsize: #{$siz-icon-lg};
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputClassStyles.cs
index 43631ca96f6..e0ccd52ec79 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputClassStyles.cs
@@ -17,6 +17,12 @@ public class BitFileInputClassStyles
     /// </summary>
     public string? Label { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the glyph of the drop zone panel of the BitFileInput,
+    /// which is only rendered while ShowDropZone is enabled.
+    /// </summary>
+    public string? DropZoneIcon { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the description (hint) of the BitFileInput.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
index 90109ba4388..4bda7bfc390 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
@@ -63,6 +63,12 @@ public class BitFileInputInfo
     /// </summary>
     [JsonPropertyName("height")] public int? Height { get; set; }
 
+    /// <summary>
+    /// The extension of the file including its leading dot, lowercased (e.g. ".pdf"),
+    /// or an empty string for a file whose name carries none.
+    /// </summary>
+    [JsonIgnore] public string Extension => Path.GetExtension(Name).ToLowerInvariant();
+
     /// <summary>
     /// The last modified time of the file reported by the browser, as a DateTimeOffset.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
index 6c99f35e1f5..d3c621e08c5 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
@@ -86,6 +86,16 @@ public class BitFileInputParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public bool? Directory { get; set; }
 
+    /// <summary>
+    /// Gets or sets the glyph of the drop zone panel using custom CSS classes for external icon libraries.
+    /// </summary>
+    public BitIconInfo? DropZoneIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the drop zone panel's glyph from the built-in Fluent UI icons.
+    /// </summary>
+    public string? DropZoneIconName { get; set; }
+
     /// <summary>
     /// Custom error message displayed when a file is selected again while <see cref="AllowDuplicates"/> is disabled.
     /// </summary>
@@ -107,6 +117,11 @@ public class BitFileInputParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public Func<BitFileInputInfo, string?>? FileValidator { get; set; }
 
+    /// <summary>
+    /// The accessible name of the file list, which is a piece of English a whole app localizes once.
+    /// </summary>
+    public string? FileListAriaLabel { get; set; }
+
     /// <summary>
     /// Whether to hide the file list that displays the selected files in the UI.
     /// </summary>
@@ -193,7 +208,12 @@ public class BitFileInputParams : BitComponentBaseParams, IBitComponentParams
     public string? RemoveButtonTitle { get; set; }
 
     /// <summary>
-    /// Whether to display a preview thumbnail for image files, and a file type glyph for everything else.
+    /// Whether to render the browse area as a full width drop zone panel instead of an ordinary button.
+    /// </summary>
+    public bool? ShowDropZone { get; set; }
+
+    /// <summary>
+    /// Whether to display a preview thumbnail for image files in the file list.
     /// </summary>
     public bool? ShowPreview { get; set; }
 
@@ -306,6 +326,16 @@ public void UpdateParameters(BitFileInput bitFileInput)
             bitFileInput.Directory = Directory.Value;
         }
 
+        if (DropZoneIcon is not null && bitFileInput.HasNotBeenSet(nameof(DropZoneIcon)))
+        {
+            bitFileInput.DropZoneIcon = DropZoneIcon;
+        }
+
+        if (DropZoneIconName.HasValue() && bitFileInput.HasNotBeenSet(nameof(DropZoneIconName)))
+        {
+            bitFileInput.DropZoneIconName = DropZoneIconName;
+        }
+
         if (DuplicateErrorMessage.HasValue() && bitFileInput.HasNotBeenSet(nameof(DuplicateErrorMessage)))
         {
             bitFileInput.DuplicateErrorMessage = DuplicateErrorMessage;
@@ -326,6 +356,11 @@ public void UpdateParameters(BitFileInput bitFileInput)
             bitFileInput.FileValidator = FileValidator;
         }
 
+        if (FileListAriaLabel.HasValue() && bitFileInput.HasNotBeenSet(nameof(FileListAriaLabel)))
+        {
+            bitFileInput.FileListAriaLabel = FileListAriaLabel;
+        }
+
         if (HideFileList.HasValue && bitFileInput.HasNotBeenSet(nameof(HideFileList)))
         {
             bitFileInput.HideFileList = HideFileList.Value;
@@ -411,6 +446,11 @@ public void UpdateParameters(BitFileInput bitFileInput)
             bitFileInput.RemoveButtonTitle = RemoveButtonTitle;
         }
 
+        if (ShowDropZone.HasValue && bitFileInput.HasNotBeenSet(nameof(ShowDropZone)))
+        {
+            bitFileInput.ShowDropZone = ShowDropZone.Value;
+        }
+
         if (ShowPreview.HasValue && bitFileInput.HasNotBeenSet(nameof(ShowPreview)))
         {
             bitFileInput.ShowPreview = ShowPreview.Value;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
index 04f92cca576..bb824d78162 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
@@ -1,8 +1,8 @@
-@page "/components/fileinput"
+@page "/components/fileinput"
 @page "/components/file-input"
 
 <PageOutlet Url="components/fileinput" Title="FileInput"
-            Description="A file selection component with browse, drag-and-drop and clipboard paste support, built-in size, total size, extension, MIME type, count, duplicate, image resolution and custom validation, image preview thumbnails and file type glyphs, folder and camera capture modes, described constraints and screen reader announcements, and a fully templatable file list - selection only, no uploading involved." />
+            Description="A file selection component with browse, drag-and-drop and clipboard paste support, built-in size, total size, extension, MIME type, count, duplicate, image resolution and custom validation, a built-in drop zone panel, image preview thumbnails and file type glyphs, folder and camera capture modes, described constraints and screen reader announcements, and a fully templatable file list - selection only, no uploading involved." />
 
 <DemoPage Name="FileInput"
           Description="BitFileInput is the selection half of working with files: it lets the user hand files to the app - through the file dialog, by dragging them out of the OS onto the component, or by pasting them from the clipboard - without uploading anything anywhere. Each selected file surfaces in C# as a BitFileInputInfo carrying its name, size, MIME type, last-modified time, the folder it came from and, on request, the pixel dimensions of an image, and its content can be pulled on demand as a byte array. Selections are validated on arrival against per-file size bounds, a total size budget, allowed extensions or MIME types, a maximum file count, a no-duplicates rule and any custom rule; files that fail stay in the list, marked invalid with a customizable message, so the user can see exactly what went wrong, and the list level limits release their files again as soon as removals free up room. The built-in file list shows names, human-readable sizes, image thumbnails or file type glyphs and per-file remove buttons, and both the browse area and the list items can be replaced wholesale with templates. Accessibility is wired in rather than bolted on: the constraints can be spelled out in a description tied to the browse button through aria-describedby, and every change of the list is announced through an ARIA live region. When it is time to actually send files to a server, reach for the BitFileUpload component instead."
@@ -177,7 +177,7 @@
                       MaxCount="3" MaxTotalSize="1024 * 1024 * 2" />
     </DemoExample>
 
-    <DemoExample Title="Accept & AllowedExtensions" RazorCode="@example8RazorCode" Id="example8">
+    <DemoExample Title="Accept, AllowedExtensions & Capture" RazorCode="@example8RazorCode" Id="example8">
         <div>
             Two parameters restrict file types at different points. <b>Accept</b> feeds the native accept
             attribute, so the file dialog only offers matching files - but a drop or a paste never goes through the
@@ -208,6 +208,19 @@
         <div>AllowedExtensions with MIME types (validated):</div>
         <br />
         <BitFileInput Label="Browse or drop a file" AllowedExtensions="@(["image/*", "application/pdf"])" />
+
+        <br /><br />
+
+        <div>
+            <b>Capture</b> is the third native attribute of the picker: it asks a mobile device to open a camera
+            or a microphone instead of the file browser - "user" for the front camera, "environment" for the rear
+            one - and needs an <b>Accept</b> of its own to say which of the two. Desktop browsers ignore it and
+            show the regular dialog.
+        </div>
+
+        <br />
+
+        <BitFileInput Label="Take a photo" Accept="image/*" Capture="environment" />
     </DemoExample>
 
     <DemoExample Title="Custom validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
@@ -240,20 +253,8 @@
                       FileValidator="@ValidateImageDimensions" />
     </DemoExample>
 
-    <DemoExample Title="Capture" RazorCode="@example10RazorCode" Id="example10">
-        <div>
-            <b>Capture</b> renders the native capture attribute, which asks a mobile device to open a camera or a
-            microphone instead of the file browser - "user" for the front camera, "environment" for the rear one.
-            Desktop browsers ignore it and show the regular dialog.
-        </div>
-
-        <br />
-
-        <BitFileInput Label="Take a photo" Accept="image/*" Capture="environment" />
-    </DemoExample>
-
-    <DemoExample Title="Preview & file icons" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode"
-                 Id="example11">
+    <DemoExample Title="Preview & file icons" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode"
+                 Id="example10">
         <div>
             <b>ShowPreview</b> puts a thumbnail next to each image, backed by an object URL the component creates
             on selection and revokes when the file is removed or the component is disposed - no manual cleanup, and
@@ -276,11 +277,12 @@
         <BitFileInput Label="Browse or drop files" Multiple ShowPreview FileIconSelector="@SelectFileIcon" />
     </DemoExample>
 
-    <DemoExample Title="Localization" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <DemoExample Title="Localization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
         <div>
             Every piece of English the component can say has a parameter that replaces it, and they are the whole
             list: <b>Label</b> and <b>Description</b> for the browse area, <b>RemoveButtonTitle</b> for the remove
-            button's tooltip and the prefix of its accessible label ("Remove report.pdf"), the six
+            button's tooltip and the prefix of its accessible label ("Remove report.pdf"),
+            <b>FileListAriaLabel</b> for the accessible name of the file list, the six
             <b>...ErrorMessage</b> parameters for the validation messages, <b>FileSizeFormatter</b> for the file
             size - which is also where a different rounding or the decimal base some platforms prefer belongs - and
             <b>AnnouncementProvider</b> for the sentence the screen reader hears on every change of the list.
@@ -303,7 +305,7 @@
         <BitFileInput Label="Browse or drop files" Multiple FileSizeFormatter="@(size => $"{size:N0} bytes")" />
     </DemoExample>
 
-    <DemoExample Title="HideFileList" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <DemoExample Title="HideFileList" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
         <div>
             <b>HideFileList</b> suppresses the built-in file list while the selection keeps working - for an app
             that renders its own view of the files elsewhere. The example captures the selection through
@@ -329,7 +331,7 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Events" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <DemoExample Title="Events" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
         <div>
             <b>OnChange</b> fires with the current array of files whenever the selection changes - after browsing,
             dropping, pasting and removing alike. <b>OnInvalid</b> follows it whenever the list holds at least one
@@ -374,7 +376,7 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Templates" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <DemoExample Title="Templates" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
         <div>
             The default UI can be swapped out entirely: <b>LabelTemplate</b> replaces the browse button - here with
             a full drop-zone panel that hides itself once files are selected - and <b>FileViewTemplate</b> replaces
@@ -382,6 +384,9 @@
             included. Replacing the browse button also replaces the built-in dashed drop indicator that lives on
             it, so a custom label should bring its own drag feedback: <b>Classes.Dragging</b> puts a class on the
             root element for as long as files hover over the component, which is what turns the panel below blue.
+            For a drop panel that is not this hand-built, reach for
+            <BitLink Href="#example18"><b>ShowDropZone</b></BitLink> instead - it brings the same shape with the
+            focus ring, the drag state and the theme already wired in.
         </div>
 
         <br />
@@ -454,7 +459,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Public API" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+    <DemoExample Title="Public API" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
         <div>
             The component can be driven entirely from code: <b>Browse</b> opens the file dialog, <b>Reset</b>
             silently clears the selection without raising any callback, and <b>RemoveFile</b> removes a specific
@@ -496,21 +501,24 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Accessibility" RazorCode="@example17RazorCode" Id="example17">
+    <DemoExample Title="Accessibility" RazorCode="@example16RazorCode" Id="example16">
         <div>
             The browse button is a real button - reached with Tab, activated with Enter or Space, drawing the
             theme's focus ring, and removed from the tab order while the component is disabled - and the hidden
             native input points at it through aria-labelledby, so screen readers announce the visible label. The
-            file list carries list and listitem roles, each remove button an aria-label naming the file it removes
+            file list carries list and listitem roles and an accessible name of its own - "Selected files" unless
+            <b>FileListAriaLabel</b> says otherwise - each remove button an aria-label naming the file it removes
             and the focus after that file is gone, and an invalid file is marked by a message, a red rule and,
             where the palette is stripped away in Windows High Contrast, a dashed rule. A file name is truncated
             without losing its extension. A visually hidden live region announces every change of the list,
             so a screen reader user hears how many files were taken and how many failed validation without going
             looking - and because a live region is skipped when its text repeats verbatim, each update carries an
             invisible marker so two identical selections in a row are both announced.
-            <b>AnnouncementProvider</b> replaces that sentence (see <BitLink Href="#example12">Localization</BitLink>),
+            <b>AnnouncementProvider</b> replaces that sentence (see <BitLink Href="#example11">Localization</BitLink>),
             and <b>AriaLabel</b> labels the browse button where a short visible label like "Browse" does not say
-            enough on its own.
+            enough on its own. Dragging is never the only way in either - everything a drop does, the browse
+            button does with a single tap - and both it and the remove buttons stay at or above the 24 CSS pixel
+            target size in every <b>Size</b>.
         </div>
 
         <br />
@@ -519,7 +527,7 @@
                       Description="Tab to the button, then press Enter or Space." />
     </DemoExample>
 
-    <DemoExample Title="Variant" RazorCode="@example18RazorCode" Id="example18">
+    <DemoExample Title="Variant" RazorCode="@example17RazorCode" Id="example17">
         <div>
             <b>Variant</b> decides how much of the <b>Color</b> the browse button carries: <b>Fill</b>, the default,
             paints the whole button, <b>Outline</b> keeps only the rule around it, and <b>Text</b> drops both so the
@@ -559,6 +567,30 @@
         </div>
     </DemoExample>
 
+    <DemoExample Title="Drop zone" RazorCode="@example18RazorCode" Id="example18">
+        <div>
+            <b>ShowDropZone</b> turns the browse area into the panel a drag-and-drop target is expected to look
+            like - a dashed rule around a glyph and the label - instead of a button that happens to accept drops.
+            It is the same button underneath, so Tab still reaches it and Enter or Space still opens the dialog,
+            and it fills with the theme color while files hover over it exactly as the button does. Because a
+            panel-sized block of the role color is rarely what a drop zone wants, it defaults to the
+            <b>Outline</b> variant; set <b>Variant</b> to take that back. <b>DropZoneIconName</b> swaps the
+            default CloudUpload glyph - or drops it entirely when set to an empty string - and
+            <b>DropZoneIcon</b> takes one from an external icon library.
+        </div>
+
+        <br />
+
+        <BitFileInput ShowDropZone Multiple ShowPreview ShowRemoveButton
+                      Label="Drag files here or click to browse"
+                      Description="Any file type, as many as you like." />
+
+        <br />
+
+        <BitFileInput ShowDropZone Directory DropZoneIconName="FabricFolder"
+                      Label="Drag a folder here or click to browse" />
+    </DemoExample>
+
     <DemoExample Title="Cascading parameters" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode"
                  Id="example19">
         <div>
@@ -756,6 +788,9 @@
 
             <BitFileInput Label="Rounder, roomier items" ShowPreview ShowRemoveButton
                           Style="--bit-FileInput-item-radius: 1rem; --bit-FileInput-item-padding: 1rem; --bit-FileInput-item-gap: 0.75rem; --bit-FileInput-preview-size: 3.5rem;" />
+
+            <BitFileInput Label="A list that scrolls instead of growing" Multiple Append ShowRemoveButton
+                          Style="--bit-FileInput-file-list-max-height: 10rem; --bit-FileInput-item-hover-background: var(--bit-clr-bg-sec-hover);" />
         </div>
 
         <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
index 895714a493e..602518210d9 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
@@ -109,6 +109,22 @@ public partial class BitFileInputDemo
             Description = "Whether to select folders (directories) instead of files, rendered as the webkitdirectory attribute. All files inside the selected folder and its subfolders will be added to the file list. It also makes a dropped folder expand into its contents instead of being ignored."
         },
         new()
+        {
+            Name = "DropZoneIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The glyph of the drop zone panel, using custom CSS classes for external icon libraries. Takes precedence over DropZoneIconName when both are set, and is only rendered while ShowDropZone is enabled.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info"
+        },
+        new()
+        {
+            Name = "DropZoneIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The name of the drop zone panel's glyph from the built-in Fluent UI icons. Defaults to \"CloudUpload\", and an empty string leaves the panel without a glyph at all."
+        },
+        new()
         {
             Name = "DuplicateErrorMessage",
             Type = "string?",
@@ -134,6 +150,13 @@ public partial class BitFileInputDemo
             Href = "#file-input-info"
         },
         new()
+        {
+            Name = "FileListAriaLabel",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The accessible name of the file list, which tells a screen reader user walking the lists of the page what this one holds. Defaults to \"Selected files\"."
+        },
+        new()
         {
             Name = "FileSizeFormatter",
             Type = "Func<long, string>?",
@@ -306,6 +329,13 @@ public partial class BitFileInputDemo
             Description = "The tooltip of the remove button, which is also used as the prefix of its accessible label (e.g., \"Remove report.pdf\"). Defaults to \"Remove\"."
         },
         new()
+        {
+            Name = "ShowDropZone",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether to render the browse area as a full width drop zone panel - a dashed rule around a glyph and the label - instead of an ordinary button. It is the same button underneath, so it is still reached with Tab and activated with Enter or Space, and it carries the drag indicator exactly as the button does. It also makes Outline the default variant; set Variant to take that back."
+        },
+        new()
         {
             Name = "ShowPreview",
             Type = "bool",
@@ -472,6 +502,12 @@ public partial class BitFileInputDemo
                    Description = "The last modified time of the file reported by the browser, in milliseconds since the Unix epoch."
                },
                new()
+               {
+                   Name = "Extension",
+                   Type = "string",
+                   Description = "The extension of the file including its leading dot, lowercased (e.g. \".pdf\"), or an empty string for a file whose name carries none."
+               },
+               new()
                {
                    Name = "LastModifiedDate",
                    Type = "DateTimeOffset",
@@ -549,6 +585,13 @@ public partial class BitFileInputDemo
                    Description = "Custom CSS classes/styles for the browse button (label) of the BitFileInput."
                },
                new()
+               {
+                   Name = "DropZoneIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the glyph of the drop zone panel, which is only rendered while ShowDropZone is enabled."
+               },
+               new()
                {
                    Name = "Description",
                    Type = "string?",
@@ -795,6 +838,42 @@ public partial class BitFileInputDemo
             Description = "Corner radius of the browse button, which its focus ring follows.",
         },
         new()
+        {
+            Name = "--bit-FileInput-drop-zone-height",
+            DefaultValue = "Per Size, 4.5rem / 5.5rem / 6.5rem",
+            Description = "The smallest height of the drop zone panel rendered by ShowDropZone.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-drop-zone-padding",
+            DefaultValue = "Per Size, from the spacing rhythm",
+            Description = "Padding of the drop zone panel.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-drop-zone-radius",
+            DefaultValue = "--bit-shp-radius-surface",
+            Description = "Corner radius of the drop zone panel, which its focus ring follows.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-drop-zone-border-width",
+            DefaultValue = "--bit-shp-brd-width-thick",
+            Description = "Rule thickness of the drop zone panel.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-drop-zone-border-style",
+            DefaultValue = "dashed",
+            Description = "Rule style of the drop zone panel at rest. Set it to solid for a panel that reads as a surface rather than as a target.",
+        },
+        new()
+        {
+            Name = "--bit-FileInput-drop-zone-icon-size",
+            DefaultValue = "Per Size, 1.5rem / 2rem / 2.5rem",
+            Description = "Glyph size inside the drop zone panel.",
+        },
+        new()
         {
             Name = "--bit-FileInput-description-color",
             DefaultValue = "--bit-clr-fg-sec",
@@ -825,12 +904,24 @@ public partial class BitFileInputDemo
             Description = "Border style of the drop indicator. Set it to solid for a drop state that does not change the shape of the button.",
         },
         new()
+        {
+            Name = "--bit-FileInput-file-list-max-height",
+            DefaultValue = "none",
+            Description = "The tallest the file list gets before it scrolls, which is what keeps a folder selection of thousands of files from pushing the rest of the page away.",
+        },
+        new()
         {
             Name = "--bit-FileInput-item-background",
             DefaultValue = "--bit-clr-bg-sec",
             Description = "Background of a file item, valid or not.",
         },
         new()
+        {
+            Name = "--bit-FileInput-item-hover-background",
+            DefaultValue = "--bit-FileInput-item-background",
+            Description = "Background of a hovered valid file item (pointer devices only).",
+        },
+        new()
         {
             Name = "--bit-FileInput-item-border-color",
             DefaultValue = "--bit-clr-brd-pri",
@@ -933,6 +1024,12 @@ public partial class BitFileInputDemo
             Description = "Background of a hovered remove button (pointer devices only).",
         },
         new()
+        {
+            Name = "--bit-FileInput-remove-button-active-background",
+            DefaultValue = "--bit-clr-bg-sec-active",
+            Description = "Background of a pressed remove button.",
+        },
+        new()
         {
             Name = "--bit-FileInput-remove-icon-size",
             DefaultValue = "--bit-siz-icon-sm / -md / -lg per Size",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
index 861fe27c05e..4da1e605504 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.FileInput;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.FileInput;
 
 public partial class BitFileInputDemo
 {
@@ -67,7 +67,9 @@ public partial class BitFileInputDemo
 
 <BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@(["".gif"", "".jpg"", "".png"", "".bmp""])"" />
 
-<BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@([""image/*"", ""application/pdf""])"" />";
+<BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@([""image/*"", ""application/pdf""])"" />
+
+<BitFileInput Label=""Take a photo"" Accept=""image/*"" Capture=""environment"" />";
 
     private readonly string example9RazorCode = @"
 <BitFileInput Label=""Browse or drop files"" Multiple FileValidator=""@ValidateEmptyFile"" />
@@ -96,13 +98,10 @@ public partial class BitFileInputDemo
 }";
 
     private readonly string example10RazorCode = @"
-<BitFileInput Label=""Take a photo"" Accept=""image/*"" Capture=""environment"" />";
-
-    private readonly string example11RazorCode = @"
 <BitFileInput Label=""Browse or drop files"" Multiple ShowPreview />
 
 <BitFileInput Label=""Browse or drop files"" Multiple ShowPreview FileIconSelector=""@SelectFileIcon"" />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private BitIconInfo? SelectFileIcon(BitFileInputInfo file)
 {
     // anything the app knows nothing about is left without a glyph rather than given a generic one.
@@ -117,7 +116,7 @@ public partial class BitFileInputDemo
     };
 }";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitFileInput Label=""انتخاب یا رها کردن فایل""
               Multiple
               ShowRemoveButton
@@ -128,7 +127,7 @@ public partial class BitFileInputDemo
               AnnouncementProvider=""@AnnounceInFarsi"" />
 
 <BitFileInput Label=""Browse or drop files"" Multiple FileSizeFormatter=""@(size => $""{size:N0} bytes"")"" />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 private static readonly string[] farsiUnits = [""بایت"", ""کیلوبایت"", ""مگابایت"", ""گیگابایت""];
 
 private string FormatFileSizeInFarsi(long size)
@@ -156,7 +155,7 @@ private string FormatFileSizeInFarsi(long size)
         : $""{files.Count} فایل انتخاب شد، {rejected} مورد نامعتبر است."";
 }";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitFileInput Label=""Browse or drop files"" Multiple HideFileList OnChange=""@HandleOnHiddenListChange"" />
 
 <div>Custom file list:</div>
@@ -168,7 +167,7 @@ private string FormatFileSizeInFarsi(long size)
 {
     <div>@file.Name - @FileSizeHumanizer.Humanize(file.Size)</div>
 }";
-    private readonly string example13CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private BitFileInputInfo[] hiddenListFiles = [];
 
 private void HandleOnHiddenListChange(BitFileInputInfo[] files)
@@ -176,7 +175,7 @@ private void HandleOnHiddenListChange(BitFileInputInfo[] files)
     hiddenListFiles = files;
 }";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitFileInput @ref=""eventsFileInput""
               Label=""Select or drag and drop files""
               Multiple
@@ -206,7 +205,7 @@ private void HandleOnHiddenListChange(BitFileInputInfo[] files)
         <div class=""event-log"">@log</div>
     }
 }";
-    private readonly string example14CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private BitFileInput eventsFileInput = default!;
 private BitFileInputInfo[] eventsFiles = [];
 private readonly List<string> eventsLog = [];
@@ -241,7 +240,7 @@ private void AddEventLog(string log)
     }
 }";
 
-    private readonly string example15RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitFileInput @ref=""bitFileInput""
               Multiple
               MaxSize=""1024 * 1024 * 2""
@@ -308,10 +307,10 @@ Browse files
         }
     </FileViewTemplate>
 </BitFileInput>";
-    private readonly string example15CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private BitFileInput bitFileInput = default!;";
 
-    private readonly string example16RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitFileInput @ref=""publicApiFileInput"" HideLabel Multiple OnChange=""@(_ => StateHasChanged())"" />
 
 <div class=""api-buttons"">
@@ -327,7 +326,7 @@ Browse files
 {
     <div>SHA-256: <code>@streamHash</code></div>
 }";
-    private readonly string example16CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private BitFileInput publicApiFileInput = default!;
 private string? streamHash;
 
@@ -345,12 +344,12 @@ private async Task HashTheFirstFile()
     streamHash = Convert.ToHexString(await SHA256.HashDataAsync(stream));
 }";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example16RazorCode = @"
 <BitFileInput Label=""Browse or drop a file""
               AriaLabel=""Select a document to attach""
               Description=""Tab to the button, then press Enter or Space."" />";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example17RazorCode = @"
 <BitFileInput Variant=""BitVariant.Fill"" Label=""Fill"" />
 <BitFileInput Variant=""BitVariant.Outline"" Label=""Outline"" />
 <BitFileInput Variant=""BitVariant.Text"" Label=""Text"" />
@@ -363,6 +362,14 @@ private async Task HashTheFirstFile()
 <BitFileInput Variant=""BitVariant.Outline"" Color=""BitColor.Success"" Label=""Outline"" />
 <BitFileInput Variant=""BitVariant.Text"" Color=""BitColor.Success"" Label=""Text"" />";
 
+    private readonly string example18RazorCode = @"
+<BitFileInput ShowDropZone Multiple ShowPreview ShowRemoveButton
+              Label=""Drag files here or click to browse""
+              Description=""Any file type, as many as you like."" />
+
+<BitFileInput ShowDropZone Directory DropZoneIconName=""FabricFolder""
+              Label=""Drag a folder here or click to browse"" />";
+
     private readonly string example19RazorCode = @"
 <BitParams Parameters=""@fileInputParams"">
     <BitFileInput />
@@ -474,6 +481,9 @@ private async Task HashTheFirstFile()
 <BitFileInput Label=""Rounder, roomier items"" ShowPreview ShowRemoveButton
               Style=""--bit-FileInput-item-radius: 1rem; --bit-FileInput-item-padding: 1rem; --bit-FileInput-item-gap: 0.75rem; --bit-FileInput-preview-size: 3.5rem;"" />
 
+<BitFileInput Label=""A list that scrolls instead of growing"" Multiple Append ShowRemoveButton
+              Style=""--bit-FileInput-file-list-max-height: 10rem; --bit-FileInput-item-hover-background: var(--bit-clr-bg-sec-hover);"" />
+
 
 <div style=""--bit-FileInput-color: rebeccapurple; --bit-FileInput-hover-color: #5b2d8e; --bit-FileInput-item-border-color: rebeccapurple; --bit-FileInput-file-size-color: rebeccapurple;"">
     <BitFileInput Label=""Attach a résumé"" ShowRemoveButton />
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
index b87d28b1c3b..634b5ef1936 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Threading.Tasks;
@@ -1513,6 +1513,187 @@ public void BitFileInputDirectParametersShouldOverrideCascadingParameters()
         Assert.AreEqual("Own Label", component.Find(".bit-fin-lbl").TextContent.Trim());
     }
 
+    [TestMethod,
+       DataRow(true),
+       DataRow(false)
+    ]
+    public void BitFileInputShouldRenderTheDropZonePanel(bool showDropZone)
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.ShowDropZone, showDropZone);
+        });
+
+        Assert.AreEqual(showDropZone, component.Find(".bit-fin").ClassList.Contains("bit-fin-dzn"));
+        Assert.AreEqual(showDropZone, component.FindAll(".bit-fin-dzi").Count == 1);
+
+        // the class builder caches, so the toggle has to survive a re-render with the other value too.
+        component.Render(parameters => parameters.Add(p => p.ShowDropZone, !showDropZone));
+
+        Assert.AreEqual(!showDropZone, component.Find(".bit-fin").ClassList.Contains("bit-fin-dzn"));
+    }
+
+    [TestMethod]
+    public void BitFileInputDropZoneShouldDefaultToTheOutlineVariant()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.ShowDropZone, true);
+        });
+
+        Assert.IsTrue(component.Find(".bit-fin").ClassList.Contains("bit-fin-otl"));
+
+        // an explicit variant still has the last word over that default.
+        component.Render(parameters => parameters.Add(p => p.Variant, BitVariant.Fill));
+
+        Assert.IsTrue(component.Find(".bit-fin").ClassList.Contains("bit-fin-fil"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRenderTheDefaultDropZoneIcon()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.ShowDropZone, true);
+        });
+
+        Assert.IsTrue(component.Find(".bit-fin-dzi").ClassList.Contains("bit-icon--CloudUpload"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRespectDropZoneIconName()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.ShowDropZone, true);
+            parameters.Add(p => p.DropZoneIconName, "FabricFolder");
+        });
+
+        Assert.IsTrue(component.Find(".bit-fin-dzi").ClassList.Contains("bit-icon--FabricFolder"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRespectDropZoneIcon()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.ShowDropZone, true);
+            parameters.Add(p => p.DropZoneIconName, "FabricFolder");
+            parameters.Add(p => p.DropZoneIcon, BitIconInfo.Fa("solid file-lines"));
+            parameters.Add(p => p.Classes, new BitFileInputClassStyles { DropZoneIcon = "custom-dzi" });
+            parameters.Add(p => p.Styles, new BitFileInputClassStyles { DropZoneIcon = "color: red;" });
+        });
+
+        var icon = component.Find(".bit-fin-dzi");
+
+        // the icon info takes precedence over the name of a built-in icon.
+        Assert.IsTrue(icon.ClassList.Contains("fa-file-lines"));
+        Assert.IsFalse(icon.ClassList.Contains("bit-icon--FabricFolder"));
+        Assert.IsTrue(icon.ClassList.Contains("custom-dzi"));
+        Assert.Contains("color: red", icon.GetAttribute("style") ?? string.Empty);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldRenderNoDropZoneGlyphForAnEmptyIconName()
+    {
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.ShowDropZone, true);
+            parameters.Add(p => p.DropZoneIconName, string.Empty);
+        });
+
+        Assert.AreEqual(0, component.FindAll(".bit-fin-dzi").Count);
+    }
+
+    [TestMethod]
+    public void BitFileInputFileListShouldHaveAnAccessibleName()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        Assert.AreEqual("Selected files", component.Find(".bit-fin-fl").GetAttribute("aria-label"));
+
+        component.Render(parameters => parameters.Add(p => p.FileListAriaLabel, "فایل‌های انتخاب شده"));
+
+        Assert.AreEqual("فایل‌های انتخاب شده", component.Find(".bit-fin-fl").GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldLazilyLoadThePreviewThumbnails()
+    {
+        SetupFiles([new() { Name = "a.png", Size = 10, FileId = "1", ContentType = "image/png", PreviewUrl = "blob:a" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.ShowPreview, true);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        Assert.AreEqual("lazy", component.Find(".bit-fin-prv").GetAttribute("loading"));
+    }
+
+    [TestMethod,
+       DataRow("report.PDF", ".pdf"),
+       DataRow("archive.tar.gz", ".gz"),
+       DataRow("LICENSE", "")
+    ]
+    public void BitFileInputInfoShouldReportTheExtension(string name, string expected)
+    {
+        Assert.AreEqual(expected, new BitFileInputInfo { Name = name }.Extension);
+    }
+
+    [TestMethod]
+    public async Task BitFileInputResetShouldNotAnnounceAnEmptySelection()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        var liveRegion = component.Find(".bit-fin-lvr");
+
+        Assert.AreEqual(string.Empty, liveRegion.TextContent);
+
+        await component.InvokeAsync(() => component.Instance.Reset());
+
+        // clearing what was already empty changes nothing, so there is nothing to announce.
+        Assert.AreEqual(string.Empty, component.Find(".bit-fin-lvr").TextContent);
+
+        SetupFiles([new() { Name = "a.txt", Size = 10, FileId = "1" }]);
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        Assert.Contains("1 file selected.", component.Find(".bit-fin-lvr").TextContent);
+
+        await component.InvokeAsync(() => component.Instance.Reset());
+
+        Assert.Contains("No file selected.", component.Find(".bit-fin-lvr").TextContent);
+    }
+
+    [TestMethod]
+    public void BitFileInputShouldApplyTheNewCascadingParameters()
+    {
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitFileInputParams
+            {
+                ShowDropZone = true,
+                DropZoneIconName = "FabricFolder",
+                FileListAriaLabel = "Cascaded list"
+            }
+        };
+
+        var component = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileInput>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        Assert.IsTrue(component.Find(".bit-fin").ClassList.Contains("bit-fin-dzn"));
+        Assert.IsTrue(component.Find(".bit-fin-dzi").ClassList.Contains("bit-icon--FabricFolder"));
+        Assert.AreEqual("Cascaded list", component.Find(".bit-fin-fl").GetAttribute("aria-label"));
+    }
+
     private void SetupFiles(BitFileInputInfo[] files)
     {
         Context.JSInterop.Setup<BitFileInputInfo[]>("BitBlazorUI.FileInput.setup", _ => true).SetResult(files);

From 5d8b35bf814507ad7a026fa7316aea507d3ca682 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 21 Sep 2026 13:28:21 +0330
Subject: [PATCH 3/8] resolve review comments

---
 .../Components/Inputs/FileInput/BitFileInputParams.cs       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
index d3c621e08c5..ae6b4e11d9e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI;
+namespace Bit.BlazorUI;
 
 /// <summary>
 /// The parameters for <see cref="BitFileInput"/> component.
@@ -369,6 +369,8 @@ public void UpdateParameters(BitFileInput bitFileInput)
         if (HideLabel.HasValue && bitFileInput.HasNotBeenSet(nameof(HideLabel)))
         {
             bitFileInput.HideLabel = HideLabel.Value;
+
+            bitFileInput.ClassBuilder.Reset();
         }
 
         if (Label.HasValue() && bitFileInput.HasNotBeenSet(nameof(Label)))
@@ -449,6 +451,8 @@ public void UpdateParameters(BitFileInput bitFileInput)
         if (ShowDropZone.HasValue && bitFileInput.HasNotBeenSet(nameof(ShowDropZone)))
         {
             bitFileInput.ShowDropZone = ShowDropZone.Value;
+
+            bitFileInput.ClassBuilder.Reset();
         }
 
         if (ShowPreview.HasValue && bitFileInput.HasNotBeenSet(nameof(ShowPreview)))

From fee2b4f15ba45ae74dac5831dda1ddeae75428cb Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 21 Sep 2026 13:58:58 +0330
Subject: [PATCH 4/8] code review

---
 .../Inputs/FileInput/BitFileInput.razor       |  2 +-
 .../Inputs/FileInput/BitFileInput.razor.cs    | 37 +++++++--
 .../Inputs/FileInput/BitFileInput.ts          |  8 +-
 .../FileInput/BitFileInputContentStream.cs    | 82 +++++++++++++++++++
 .../Inputs/FileInput/BitFileInputInfo.cs      | 14 +++-
 .../FileInput/BitFileInputDemo.razor.cs       |  2 +-
 .../Inputs/FileInput/BitFileInputTests.cs     | 29 ++++++-
 7 files changed, 157 insertions(+), 17 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputContentStream.cs

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
index 915d17ba419..c2c4d7fe3b4 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
@@ -129,7 +129,7 @@
                                    truncated as one string ends in "..." and stops saying what kind of file it is,
                                    which is the one thing a glance at a file list is for. *@
                                 <div style="@Styles?.FileName" class="bit-fin-fn @Classes?.FileName">
-                                    <span class="bit-fin-fnm">@GetFileStem(file.Name)</span><span class="bit-fin-fnx">@Path.GetExtension(file.Name)</span>
+                                    <span class="bit-fin-fnm">@GetFileStem(file.Name)</span><span class="bit-fin-fnx">@GetFileExtension(file.Name)</span>
                                 </div>
                             </div>
                             <div class="bit-fin-fsc">
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
index e1813b2ec00..bc063c95762 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
@@ -209,8 +209,11 @@ public partial class BitFileInput : BitComponentBase
 
     /// <summary>
     /// Custom Razor template for the browse button area, allowing full customization of the file selection trigger UI.
+    /// Since it replaces the browse button, which is also what turns into the drag-and-drop indicator, providing it
+    /// moves that indicator onto the component itself so that dropping files still shows that it is allowed.
     /// </summary>
-    [Parameter] public RenderFragment? LabelTemplate { get; set; }
+    [Parameter, ResetClassBuilder]
+    public RenderFragment? LabelTemplate { get; set; }
 
     /// <summary>
     /// Maximum allowed number of files in the file list.
@@ -445,7 +448,8 @@ public async Task ReadContentAsync(BitFileInputInfo? fileInfo = null)
     /// instead of materializing the whole file in memory the way <see cref="ReadContentAsync"/> does.
     /// This is what makes a file too large to hold as a byte array - a video, an archive, a database dump -
     /// copyable to disk, hashable or forwardable to a server.
-    /// The stream is forward only and must be disposed by the caller.
+    /// The stream is forward only and must be disposed by the caller, which is also what releases the
+    /// underlying JavaScript reference to the file.
     /// Unlike <see cref="ReadContentAsync"/> it also reads a file the validations rejected, since a file too
     /// large to hold in memory is exactly the one a stream is wanted for.
     /// </summary>
@@ -462,9 +466,22 @@ public async Task<Stream> OpenReadStreamAsync(BitFileInputInfo fileInfo,
         ArgumentNullException.ThrowIfNull(fileInfo);
         ObjectDisposedException.ThrowIf(IsDisposed, this);
 
-        var streamRef = await _js.BitFileInputOpenReadStream(UniqueId, fileInfo.FileId);
+        var streamRef = await _js.BitFileInputOpenReadStream(UniqueId, fileInfo.FileId)
+                        ?? throw new InvalidOperationException("The JavaScript runtime is no longer available, so the file cannot be read.");
 
-        return await streamRef.OpenReadStreamAsync(maxAllowedSize ?? fileInfo.Size, cancellationToken);
+        try
+        {
+            var stream = await streamRef.OpenReadStreamAsync(maxAllowedSize ?? fileInfo.Size, cancellationToken);
+
+            // the stream reads through the reference, so the reference is handed to the stream to be released with it.
+            return new BitFileInputContentStream(stream, streamRef);
+        }
+        catch
+        {
+            await streamRef.DisposeAsync();
+
+            throw;
+        }
     }
 
     /// <summary>
@@ -572,9 +589,10 @@ protected override void RegisterCssClasses()
             _ => "bit-fin-md"
         });
 
-        // the browse button is what carries the drop indicator, so a component rendered without one needs
-        // the indicator drawn around itself instead of silently accepting drops with nothing to show for it.
-        ClassBuilder.Register(() => HideLabel ? "bit-fin-nlb" : string.Empty);
+        // the browse button is what carries the drop indicator, so a component rendered without one - hidden
+        // or replaced by a LabelTemplate - needs the indicator drawn around itself instead of silently
+        // accepting drops with nothing to show for it.
+        ClassBuilder.Register(() => LabelTemplate is not null || HideLabel ? "bit-fin-nlb" : string.Empty);
 
         ClassBuilder.Register(() => ShowDropZone ? "bit-fin-dzn" : string.Empty);
     }
@@ -688,11 +706,14 @@ private async Task FocusAfterRemove()
     // the name without its extension, which is the part the file list is allowed to ellipsize.
     private static string GetFileStem(string name)
     {
-        var extension = Path.GetExtension(name);
+        var extension = BitFileInputInfo.GetExtension(name);
 
         return extension.HasNoValue() ? name : name[..^extension.Length];
     }
 
+    // the extension the file list renders unshrunk beside the stem, which together spell the name back out.
+    private static string GetFileExtension(string name) => BitFileInputInfo.GetExtension(name);
+
     private async Task UpdateDropZone()
     {
         var dragClass = GetDragClass();
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
index 1c9bb263e68..faaf14d92de 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
@@ -385,9 +385,11 @@ namespace BitBlazorUI {
                     (file: File) => {
                         // fullPath is rooted at the drop ("/folder/sub/a.txt"); the leading slash is dropped
                         // so it reads the same as the webkitRelativePath of a folder picked through the dialog.
-                        const path: string = entry.fullPath || '';
-                        if (path) {
-                            FileInput._relativePaths.set(file, path.replace(/^\//, ''));
+                        // A file dropped on its own is rooted at the drop too ("/a.txt"), which is just its name
+                        // and not a relative path, so it is left empty the way the dialog reports it.
+                        const path: string = (entry.fullPath || '').replace(/^\//, '');
+                        if (path.includes('/')) {
+                            FileInput._relativePaths.set(file, path);
                         }
                         files.push(file);
                         resolve();
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputContentStream.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputContentStream.cs
new file mode 100644
index 00000000000..be1b41c8201
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputContentStream.cs
@@ -0,0 +1,82 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// Wraps the stream handed out by <see cref="BitFileInput.OpenReadStreamAsync"/> so that the underlying
+/// JavaScript stream reference lives exactly as long as the stream that reads through it.
+/// Disposing the stream alone leaves the reference - and so the browser side File object it pins - alive
+/// for the lifetime of the circuit, which is why the reference is disposed here rather than by the caller.
+/// </summary>
+internal sealed class BitFileInputContentStream(Stream inner, IJSStreamReference streamReference) : Stream
+{
+    private bool _disposed;
+
+    public override bool CanRead => inner.CanRead;
+
+    public override bool CanSeek => inner.CanSeek;
+
+    public override bool CanWrite => false;
+
+    public override long Length => inner.Length;
+
+    public override long Position { get => inner.Position; set => inner.Position = value; }
+
+    public override void Flush() => inner.Flush();
+
+    public override Task FlushAsync(CancellationToken cancellationToken) => inner.FlushAsync(cancellationToken);
+
+    public override int Read(byte[] buffer, int offset, int count) => inner.Read(buffer, offset, count);
+
+    public override int Read(Span<byte> buffer) => inner.Read(buffer);
+
+    public override Task<int> ReadAsync(byte[] buffer, int offset, int count, CancellationToken cancellationToken)
+        => inner.ReadAsync(buffer, offset, count, cancellationToken);
+
+    public override ValueTask<int> ReadAsync(Memory<byte> buffer, CancellationToken cancellationToken = default)
+        => inner.ReadAsync(buffer, cancellationToken);
+
+    public override long Seek(long offset, SeekOrigin origin) => inner.Seek(offset, origin);
+
+    public override void SetLength(long value) => throw new NotSupportedException();
+
+    public override void Write(byte[] buffer, int offset, int count) => throw new NotSupportedException();
+
+    protected override void Dispose(bool disposing)
+    {
+        if (disposing && _disposed is false)
+        {
+            _disposed = true;
+
+            inner.Dispose();
+
+            // the reference is only disposable asynchronously, so a synchronous dispose can do no more than
+            // start the release and let it finish on its own.
+            _ = DisposeStreamReferenceAsync();
+        }
+
+        base.Dispose(disposing);
+    }
+
+    public override async ValueTask DisposeAsync()
+    {
+        if (_disposed is false)
+        {
+            _disposed = true;
+
+            await inner.DisposeAsync();
+
+            await DisposeStreamReferenceAsync();
+        }
+
+        await base.DisposeAsync();
+    }
+
+    private async ValueTask DisposeStreamReferenceAsync()
+    {
+        try
+        {
+            await streamReference.DisposeAsync();
+        }
+        catch (JSDisconnectedException) { } // the runtime is already gone, and the reference with it.
+        catch (JSException) { } // the reference may already be released, which is not worth failing a dispose over.
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
index 4bda7bfc390..434290ac4ee 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputInfo.cs
@@ -65,9 +65,9 @@ public class BitFileInputInfo
 
     /// <summary>
     /// The extension of the file including its leading dot, lowercased (e.g. ".pdf"),
-    /// or an empty string for a file whose name carries none.
+    /// or an empty string for a file whose name carries none, a dotfile (".gitignore") included.
     /// </summary>
-    [JsonIgnore] public string Extension => Path.GetExtension(Name).ToLowerInvariant();
+    [JsonIgnore] public string Extension => GetExtension(Name).ToLowerInvariant();
 
     /// <summary>
     /// The last modified time of the file reported by the browser, as a DateTimeOffset.
@@ -91,6 +91,16 @@ public class BitFileInputInfo
     /// </summary>
     [JsonIgnore] public byte[]? Content { get; internal set; }
 
+    // The extension of a file name including its leading dot, or an empty string when it carries none.
+    // Path.GetExtension hands back the whole name of a dotfile (".gitignore"), whose name is all stem and
+    // no extension, so the leading dot is not counted as one here.
+    internal static string GetExtension(string name)
+    {
+        var index = name.LastIndexOf('.');
+
+        return index <= 0 || index == name.Length - 1 ? string.Empty : name[index..];
+    }
+
     // Tracks whether the file was invalidated by a list level rule (a duplicate, MaxCount or MaxTotalSize),
     // so it can become valid again once removals free up room or drop the original of a duplicate.
     [JsonIgnore] internal bool ListValidationFailed { get; set; }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
index 602518210d9..388d9de9655 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
@@ -505,7 +505,7 @@ public partial class BitFileInputDemo
                {
                    Name = "Extension",
                    Type = "string",
-                   Description = "The extension of the file including its leading dot, lowercased (e.g. \".pdf\"), or an empty string for a file whose name carries none."
+                   Description = "The extension of the file including its leading dot, lowercased (e.g. \".pdf\"), or an empty string for a file whose name carries none, a dotfile (\".gitignore\") included."
                },
                new()
                {
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
index 634b5ef1936..1ef56b411e0 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
@@ -1342,6 +1342,23 @@ public void BitFileInputShouldMoveTheDropIndicatorToTheRootWhenTheLabelIsHidden(
         Assert.AreEqual(!hideLabel, component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
     }
 
+    [TestMethod]
+    public void BitFileInputShouldMoveTheDropIndicatorToTheRootWhenTheLabelIsTemplated()
+    {
+        var component = RenderComponent<BitFileInput>();
+
+        Assert.IsFalse(component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+
+        // a LabelTemplate replaces the browse button, which is what would have carried the indicator.
+        component.Render(parameters => parameters.Add(p => p.LabelTemplate, builder => builder.AddContent(0, "pick")));
+
+        Assert.IsTrue(component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+
+        component.Render(parameters => parameters.Add(p => p.LabelTemplate, (Microsoft.AspNetCore.Components.RenderFragment?)null));
+
+        Assert.IsFalse(component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+    }
+
     [TestMethod]
     public void BitFileInputShouldNameTheWholePathInTheRemoveButtonLabelOfAFolderSelection()
     {
@@ -1366,7 +1383,8 @@ public void BitFileInputShouldNameTheWholePathInTheRemoveButtonLabelOfAFolderSel
     public void BitFileInputShouldRenderTheFileNameWithoutItsExtensionApart()
     {
         SetupFiles([new() { Name = "a-very-long-quarterly-report-final.pdf", Size = 10, FileId = "1" },
-                    new() { Name = "no-extension", Size = 10, FileId = "2" }]);
+                    new() { Name = "no-extension", Size = 10, FileId = "2" },
+                    new() { Name = ".gitignore", Size = 10, FileId = "3" }]);
 
         var component = RenderComponent<BitFileInput>(parameters =>
         {
@@ -1386,6 +1404,10 @@ public void BitFileInputShouldRenderTheFileNameWithoutItsExtensionApart()
 
         Assert.AreEqual("no-extension", stems[1].TextContent);
         Assert.AreEqual(string.Empty, extensions[1].TextContent);
+
+        // a dotfile is all stem, so the whole name stays in the box the ellipsis is allowed to eat into.
+        Assert.AreEqual(".gitignore", stems[2].TextContent);
+        Assert.AreEqual(string.Empty, extensions[2].TextContent);
     }
 
     [TestMethod]
@@ -1635,7 +1657,10 @@ public void BitFileInputShouldLazilyLoadThePreviewThumbnails()
     [TestMethod,
        DataRow("report.PDF", ".pdf"),
        DataRow("archive.tar.gz", ".gz"),
-       DataRow("LICENSE", "")
+       DataRow("LICENSE", ""),
+       DataRow(".gitignore", ""),
+       DataRow(".env.local", ".local"),
+       DataRow("trailing.", "")
     ]
     public void BitFileInputInfoShouldReportTheExtension(string name, string expected)
     {

From 3754e4d99b8df2b2574a8366f3a48572ce532d06 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 22 Sep 2026 11:52:23 +0330
Subject: [PATCH 5/8] improve further

---
 .../Inputs/FileInput/BitFileInput.razor       |   5 +
 .../Inputs/FileInput/BitFileInput.razor.cs    |  27 ++-
 .../Inputs/FileInput/BitFileInput.scss        |  21 +-
 .../BitFileInputJsRuntimeExtensions.cs        |  11 +-
 .../Inputs/FileInput/BitFileInputParams.cs    |  20 +-
 .../Inputs/FileInput/BitFileInputDemo.razor   | 110 ++++------
 .../FileInput/BitFileInputDemo.razor.cs       |  34 +--
 .../BitFileInputDemo.razor.samples.cs         | 197 +++++++++++++-----
 .../FileInput/BitFileInputDemo.razor.scss     | 183 ++++++++--------
 .../Inputs/FileInput/BitFileInputTests.cs     |  37 ++++
 10 files changed, 385 insertions(+), 260 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
index c2c4d7fe3b4..00475c173e9 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
@@ -74,7 +74,12 @@
 
         @* the list is named so that it is announced as the selected files rather than as one more
            unlabelled list of the page when a screen reader user walks the landmarks and the lists. *@
+        @* a file list given a ceiling scrolls, and a scrollable box a keyboard has no way into is
+           unreachable for anyone who cannot use a pointer. The remove buttons are that way in whenever
+           they are rendered; without them - and without a template that brings its own - the list takes
+           the tab stop itself so the arrow keys can scroll it. *@
         <div role="list"
+             tabindex="@(Files.Count > 0 && ShowRemoveButton is false && FileViewTemplate is null ? "0" : null)"
              aria-label="@(FileListAriaLabel ?? "Selected files")"
              style="@Styles?.FileList" class="bit-fin-fl @Classes?.FileList">
             @foreach (var file in Files)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
index bc063c95762..a2acadb4572 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
@@ -164,10 +164,10 @@ public partial class BitFileInput : BitComponentBase
     [Parameter] public Func<BitFileInputInfo, BitIconInfo?>? FileIconSelector { get; set; }
 
     /// <summary>
-    /// Custom validation function called for each newly selected file after the built-in validations pass.
-    /// Return an error message to mark the file as invalid, or null to accept it.
+    /// The accessible name of the file list, which tells a screen reader user walking the lists of the page
+    /// what this one holds. Defaults to "Selected files".
     /// </summary>
-    [Parameter] public Func<BitFileInputInfo, string?>? FileValidator { get; set; }
+    [Parameter] public string? FileListAriaLabel { get; set; }
 
     /// <summary>
     /// Custom formatter of the file size shown under the name of each file item.
@@ -178,10 +178,10 @@ public partial class BitFileInput : BitComponentBase
     [Parameter] public Func<long, string>? FileSizeFormatter { get; set; }
 
     /// <summary>
-    /// The accessible name of the file list, which tells a screen reader user walking the lists of the page
-    /// what this one holds. Defaults to "Selected files".
+    /// Custom validation function called for each newly selected file after the built-in validations pass.
+    /// Return an error message to mark the file as invalid, or null to accept it.
     /// </summary>
-    [Parameter] public string? FileListAriaLabel { get; set; }
+    [Parameter] public Func<BitFileInputInfo, string?>? FileValidator { get; set; }
 
     /// <summary>
     /// Custom Razor template for rendering individual file items in the file list.
@@ -421,9 +421,13 @@ public async Task Reset()
     /// Reads the content of the specified file from the browser and populates its <see cref="BitFileInputInfo.Content"/> property
     /// with the byte array, or reads every valid file of the file list when no file is specified.
     /// Only reads valid files and only while the component is enabled.
+    /// The whole file crosses the interop boundary as one message, which on Blazor Server the circuit caps
+    /// (SignalR's MaximumReceiveMessageSize, 32 KB by default), so anything larger than a small file is read
+    /// with <see cref="OpenReadStreamAsync"/> instead.
     /// </summary>
     /// <param name="fileInfo">The file info whose content should be loaded, or null to load all the valid files.</param>
-    public async Task ReadContentAsync(BitFileInputInfo? fileInfo = null)
+    /// <param name="cancellationToken">A token that cancels the read.</param>
+    public async Task ReadContentAsync(BitFileInputInfo? fileInfo = null, CancellationToken cancellationToken = default)
     {
         if (IsDisposed) return;
         if (IsEnabled is false) return;
@@ -432,7 +436,9 @@ public async Task ReadContentAsync(BitFileInputInfo? fileInfo = null)
         {
             foreach (var file in _files.ToArray())
             {
-                await ReadContentAsync(file);
+                cancellationToken.ThrowIfCancellationRequested();
+
+                await ReadContentAsync(file, cancellationToken);
             }
 
             return;
@@ -440,14 +446,15 @@ public async Task ReadContentAsync(BitFileInputInfo? fileInfo = null)
 
         if (fileInfo.IsValid is false) return;
 
-        fileInfo.Content = await _js.BitFileInputReadContent(UniqueId, fileInfo.FileId);
+        fileInfo.Content = await _js.BitFileInputReadContent(UniqueId, fileInfo.FileId, cancellationToken);
     }
 
     /// <summary>
     /// Opens a stream over the content of the specified file, which the runtime reads from the browser in chunks
     /// instead of materializing the whole file in memory the way <see cref="ReadContentAsync"/> does.
     /// This is what makes a file too large to hold as a byte array - a video, an archive, a database dump -
-    /// copyable to disk, hashable or forwardable to a server.
+    /// copyable to disk, hashable or forwardable to a server, and on Blazor Server it is also what gets a file
+    /// past the circuit's message size cap, which one byte array in one interop message runs into almost at once.
     /// The stream is forward only and must be disposed by the caller, which is also what releases the
     /// underlying JavaScript reference to the file.
     /// Unlike <see cref="ReadContentAsync"/> it also reads a file the validations rejected, since a file too
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
index c440d93d524..ecc19358dc7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
@@ -10,11 +10,14 @@
 //   --bit-FileInput-active-color              role color while pressed                         (default: the role's active color)
 //   --bit-FileInput-focus-color               focus ring color of the browse and remove buttons (default: the role's focus color)
 //   --bit-FileInput-disabled-color            foreground when IsEnabled is false               (default: $clr-fg-dis)
-//   --bit-FileInput-disabled-background       background when IsEnabled is false               (default: $clr-bg-dis)
-//   --bit-FileInput-disabled-border-color     border color when IsEnabled is false             (default: $clr-brd-dis)
+//   --bit-FileInput-disabled-background       background of the browse and remove buttons
+//                                             when IsEnabled is false                          (default: $clr-bg-dis)
+//   --bit-FileInput-disabled-border-color     border color of the browse button
+//                                             when IsEnabled is false                          (default: $clr-brd-dis)
 //   --bit-FileInput-label-height              smallest height of the browse button             (default: per size, $siz-ctrl-*)
 //   --bit-FileInput-label-padding             padding of the browse button                     (default: per size, $siz-ctrl-pad-*)
 //   --bit-FileInput-label-font-size           text size of the browse button                   (default: per size, from the type ramp)
+//   --bit-FileInput-label-font-weight         text weight of the browse button                 (default: $tg-font-weight)
 //   --bit-FileInput-label-radius              corner radius of the browse button and its ring  (default: $shp-radius-button)
 //   --bit-FileInput-drop-zone-height          smallest height of the drop zone panel           (default: per size)
 //   --bit-FileInput-drop-zone-padding         padding of the drop zone panel                   (default: per size)
@@ -63,10 +66,12 @@
     --bit-fin-c-hover: var(--bit-FileInput-hover-color, var(--bit-fin-clr-hover));
     --bit-fin-c-active: var(--bit-FileInput-active-color, var(--bit-fin-clr-active));
 
+    // only the inherited text color is set here: the root is the column holding the button, the hint and
+    // the file list, not a control of its own, so painting a background or a border on it would put a
+    // disabled-colored block behind the hint and in the gaps between the file items - and show straight
+    // through the two variants whose button is transparent.
     &.bit-dis {
         color: var(--bit-FileInput-disabled-color, #{$clr-fg-dis});
-        border-color: var(--bit-FileInput-disabled-border-color, #{$clr-brd-dis});
-        background-color: var(--bit-FileInput-disabled-background, #{$clr-bg-dis});
 
         //the browse button carries the role color while enabled, but a disabled file input reads as a
         //neutral form field whatever its role and variant (see the disabled conventions in
@@ -99,7 +104,7 @@
     font-family: inherit;
     // the family's own control weight, so the browse button reads as the same kind of thing as the buttons
     // it sits next to rather than as a lighter one of its own.
-    font-weight: $tg-font-weight;
+    font-weight: var(--bit-FileInput-label-font-weight, #{$tg-font-weight});
     letter-spacing: $tg-ctrl-letter-spacing;
     text-transform: $tg-ctrl-text-transform;
     -webkit-tap-highlight-color: transparent;
@@ -259,6 +264,12 @@
     padding: 0;
     overflow-y: auto;
     max-height: var(--bit-FileInput-file-list-max-height, none);
+
+    // the list only takes a tab stop when nothing inside it can (see the markup), and a stop with no
+    // indicator is a stop nobody can follow, so the ring is drawn on it as it is on the buttons.
+    &:focus-visible {
+        @include focus-ring(var(--bit-FileInput-focus-color, var(--bit-fin-clr-focus)));
+    }
 }
 
 .bit-fin-itm {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs
index 649997610f1..932d434d436 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputJsRuntimeExtensions.cs
@@ -84,8 +84,15 @@ internal static ValueTask<IJSStreamReference> BitFileInputOpenReadStream(this IJ
     /// <summary>
     /// Reads the content of a specific file from the JavaScript file store and returns it as a byte array.
     /// </summary>
-    internal static ValueTask<byte[]> BitFileInputReadContent(this IJSRuntime jsRuntime, string id, string fileId)
+    internal static ValueTask<byte[]> BitFileInputReadContent(this IJSRuntime jsRuntime,
+                                                              string id,
+                                                              string fileId,
+                                                              CancellationToken cancellationToken)
     {
-        return jsRuntime.Invoke<byte[]>("BitBlazorUI.FileInput.readContent", id, fileId);
+        // the token overload replaces the runtime's default timeout with the token, so a call that was
+        // handed no token keeps the timeout it has always had.
+        return cancellationToken.CanBeCanceled
+                ? jsRuntime.Invoke<byte[]>("BitBlazorUI.FileInput.readContent", cancellationToken, id, fileId)
+                : jsRuntime.Invoke<byte[]>("BitBlazorUI.FileInput.readContent", id, fileId);
     }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
index ae6b4e11d9e..e2cc051efa6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInputParams.cs
@@ -106,6 +106,11 @@ public class BitFileInputParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public Func<BitFileInputInfo, BitIconInfo?>? FileIconSelector { get; set; }
 
+    /// <summary>
+    /// The accessible name of the file list, which is a piece of English a whole app localizes once.
+    /// </summary>
+    public string? FileListAriaLabel { get; set; }
+
     /// <summary>
     /// Custom formatter of the file size shown under the name of each file item, which is where a localized
     /// unit name belongs - the kind of decision a whole app makes once rather than per file input.
@@ -117,11 +122,6 @@ public class BitFileInputParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public Func<BitFileInputInfo, string?>? FileValidator { get; set; }
 
-    /// <summary>
-    /// The accessible name of the file list, which is a piece of English a whole app localizes once.
-    /// </summary>
-    public string? FileListAriaLabel { get; set; }
-
     /// <summary>
     /// Whether to hide the file list that displays the selected files in the UI.
     /// </summary>
@@ -346,6 +346,11 @@ public void UpdateParameters(BitFileInput bitFileInput)
             bitFileInput.FileIconSelector = FileIconSelector;
         }
 
+        if (FileListAriaLabel.HasValue() && bitFileInput.HasNotBeenSet(nameof(FileListAriaLabel)))
+        {
+            bitFileInput.FileListAriaLabel = FileListAriaLabel;
+        }
+
         if (FileSizeFormatter is not null && bitFileInput.HasNotBeenSet(nameof(FileSizeFormatter)))
         {
             bitFileInput.FileSizeFormatter = FileSizeFormatter;
@@ -356,11 +361,6 @@ public void UpdateParameters(BitFileInput bitFileInput)
             bitFileInput.FileValidator = FileValidator;
         }
 
-        if (FileListAriaLabel.HasValue() && bitFileInput.HasNotBeenSet(nameof(FileListAriaLabel)))
-        {
-            bitFileInput.FileListAriaLabel = FileListAriaLabel;
-        }
-
         if (HideFileList.HasValue && bitFileInput.HasNotBeenSet(nameof(HideFileList)))
         {
             bitFileInput.HideFileList = HideFileList.Value;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
index bb824d78162..714e7510de0 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
@@ -376,84 +376,50 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Templates" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <DemoExample Title="Templates" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode"
+                 CodeFiles="@example14CodeFiles" Id="example14">
         <div>
-            The default UI can be swapped out entirely: <b>LabelTemplate</b> replaces the browse button - here with
-            a full drop-zone panel that hides itself once files are selected - and <b>FileViewTemplate</b> replaces
-            each item of the file list, receiving the file info as its context, validation state and error message
-            included. Replacing the browse button also replaces the built-in dashed drop indicator that lives on
-            it, so a custom label should bring its own drag feedback: <b>Classes.Dragging</b> puts a class on the
-            root element for as long as files hover over the component, which is what turns the panel below blue.
-            For a drop panel that is not this hand-built, reach for
-            <BitLink Href="#example18"><b>ShowDropZone</b></BitLink> instead - it brings the same shape with the
-            focus ring, the drag state and the theme already wired in.
+            The default UI can be swapped out entirely: <b>LabelTemplate</b> replaces the browse button and
+            <b>FileViewTemplate</b> replaces each item of the file list, receiving the file info as its context,
+            validation state and error message included. Both replace real controls, so a template has to bring
+            back what it replaced: the panel below is a <code>&lt;button&gt;</code> and the remove control is one
+            too, which is what keeps Tab, Enter and Space working and gives each of them a focus ring. Replacing
+            the browse button also replaces the built-in dashed drop indicator that lived on it, so a custom label
+            needs its own drag feedback: <b>Classes.Dragging</b> puts a class on the root element for as long as
+            files hover over the component, which is what recolors the panel below. For a drop panel that is not
+            this hand-built, reach for <BitLink Href="#example18"><b>ShowDropZone</b></BitLink> instead - it brings
+            the same shape with the focus ring, the drag state and the theme already wired in.
         </div>
 
         <br />
 
         <div>
-            <BitFileInput @ref="bitFileInput" Multiple MaxSize="1024 * 1024 * 2"
+            <BitFileInput @ref="bitFileInput" Multiple Append MaxSize="1024 * 1024 * 2"
                           AllowedExtensions="@([".jpg", ".jpeg", ".png", ".bmp"])"
                           Classes="@(new() { Dragging = "custom-drop-zone" })">
                 <LabelTemplate>
-                    @if (bitFileInput.Files?.Any() is not true)
-                    {
-                        <div class="browse-file" @onclick="() => bitFileInput.Browse()">
-                            <div class="browse-file-header">
-                                <i class="bit-icon bit-icon--CloudUpload" />
-                                <div>
-                                    Drag and drop or
-                                </div>
-                                <div>
-                                    <strong>
-                                        Browse files
-                                    </strong>
-                                </div>
-                            </div>
-
-                            <div class="browse-file-footer">
-                                <div>Max file size: 2 MB</div>
-                                <div>Supported file types: jpg, jpeg, png, bmp</div>
-                            </div>
-                        </div>
-                    }
+                    <button type="button" class="browse-file" @onclick="() => bitFileInput.Browse()">
+                        <i class="bit-icon bit-icon--CloudUpload" aria-hidden="true" />
+                        <div class="browse-file-title">Drag and drop or <strong>browse files</strong></div>
+                        <div class="browse-file-hint">JPG, JPEG, PNG or BMP, up to 2 MB each</div>
+                    </button>
                 </LabelTemplate>
                 <FileViewTemplate Context="file">
-                    @if (!string.IsNullOrEmpty(file.Name))
-                    {
-                        <div class="file-list">
-                            <div class="file-list-header">
-                                <div class="file-info">
-                                    <div class="file-info-main">
-                                        <i class="bit-icon bit-icon--Page" />
-                                        <div class="file-info-data">
-                                            <div class="file-info-name">
-                                                @file.Name
-                                            </div>
-                                            <div>
-                                                @FileSizeHumanizer.Humanize(file.Size)
-                                            </div>
-                                        </div>
-                                    </div>
-
-                                    <div class="file-info-btns">
-                                        <i class="bit-icon bit-icon--Cancel remove-ico"
-                                           @onclick="() => bitFileInput.RemoveFile(file)" />
-                                    </div>
-                                </div>
-
-                                @if (!file.IsValid)
-                                {
-                                    <div class="file-info-e-msg">@file.Message</div>
-                                }
-                            </div>
-
-                            <div class="file-list-footer">
-                                <div>Max file size: 2 MB</div>
-                                <div>Supported file types: jpg, jpeg, png, bmp</div>
-                            </div>
+                    <div class="file-row @(file.IsValid ? null : "file-row-invalid")">
+                        <i class="bit-icon bit-icon--Page" aria-hidden="true" />
+                        <div class="file-row-data">
+                            <div class="file-row-name">@file.Name</div>
+                            <div class="file-row-meta">@FileSizeHumanizer.Humanize(file.Size)</div>
+                            @if (file.IsValid is false)
+                            {
+                                <div class="file-row-error">@file.Message</div>
+                            }
                         </div>
-                    }
+                        <button type="button" class="file-row-remove" aria-label="@($"Remove {file.Name}")"
+                                @onclick="() => bitFileInput.RemoveFile(file)">
+                            <i class="bit-icon bit-icon--Cancel" aria-hidden="true" />
+                        </button>
+                    </div>
                 </FileViewTemplate>
             </BitFileInput>
         </div>
@@ -474,7 +440,10 @@
             browser in chunks instead of materializing it whole the way <b>ReadContentAsync</b> does, which is
             what makes a file too large to hold as a byte array - a video, an archive, a database dump - copyable
             to disk, hashable or forwardable to a server. It reads at most as many bytes as the browser reported
-            for the file unless a different ceiling is passed, and the stream is the caller's to dispose.
+            for the file unless a different ceiling is passed, and the stream is the caller's to dispose. On
+            Blazor Server it is not only the faster route but the only one past a handful of kilobytes:
+            <b>ReadContentAsync</b> sends the whole array in one interop message, which the circuit caps at
+            SignalR's <code>MaximumReceiveMessageSize</code> - 32 KB out of the box.
         </div>
 
         <br />
@@ -518,7 +487,10 @@
             and <b>AriaLabel</b> labels the browse button where a short visible label like "Browse" does not say
             enough on its own. Dragging is never the only way in either - everything a drop does, the browse
             button does with a single tap - and both it and the remove buttons stay at or above the 24 CSS pixel
-            target size in every <b>Size</b>.
+            target size in every <b>Size</b>. A file list capped with
+            <code>--bit-FileInput-file-list-max-height</code> scrolls, and a box a keyboard cannot enter cannot be
+            scrolled: the remove buttons are that way in whenever they are shown, and without them the list takes
+            the tab stop itself.
         </div>
 
         <br />
@@ -781,7 +753,7 @@
         <br />
         <div class="example-box">
             <BitFileInput Label="Pill button, wide component" ShowPreview ShowRemoveButton
-                          Style="--bit-FileInput-label-radius: 999px; --bit-FileInput-max-width: 100%;" />
+                          Style="--bit-FileInput-label-radius: 999px; --bit-FileInput-max-width: 100%; --bit-FileInput-label-font-weight: 400;" />
 
             <BitFileInput Label="Solid drop indicator in the role color" ShowRemoveButton
                           Style="--bit-FileInput-drop-border-style: solid; --bit-FileInput-drop-background: var(--bit-clr-suc);" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
index 388d9de9655..7a6290368e5 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
@@ -141,15 +141,6 @@ public partial class BitFileInputDemo
             Href = "#bit-icon-info"
         },
         new()
-        {
-            Name = "FileValidator",
-            Type = "Func<BitFileInputInfo, string?>?",
-            DefaultValue = "null",
-            Description = "Custom validation function called for each newly selected file after the built-in validations pass. Return an error message to mark the file as invalid, or null to accept it.",
-            LinkType = LinkType.Link,
-            Href = "#file-input-info"
-        },
-        new()
         {
             Name = "FileListAriaLabel",
             Type = "string?",
@@ -164,6 +155,15 @@ public partial class BitFileInputDemo
             Description = "Custom formatter of the file size shown under the name of each file item. Receives the size of the file in bytes and returns the text to display, which is the place to localize the units or to switch between the binary and the decimal bases. When not set, a built-in humanizer is used.",
         },
         new()
+        {
+            Name = "FileValidator",
+            Type = "Func<BitFileInputInfo, string?>?",
+            DefaultValue = "null",
+            Description = "Custom validation function called for each newly selected file after the built-in validations pass. Return an error message to mark the file as invalid, or null to accept it.",
+            LinkType = LinkType.Link,
+            Href = "#file-input-info"
+        },
+        new()
         {
             Name = "FileViewTemplate",
             Type = "RenderFragment<BitFileInputInfo>?",
@@ -413,9 +413,9 @@ public partial class BitFileInputDemo
         new()
         {
             Name = "ReadContentAsync",
-            Type = "(BitFileInputInfo? fileInfo = null) => Task",
+            Type = "(BitFileInputInfo? fileInfo = null, CancellationToken cancellationToken = default) => Task",
             DefaultValue = "",
-            Description = "Reads the content of the specified file from the browser and populates its Content property with the byte array, or reads every valid file of the file list when no file is specified. Only reads valid files and only while the component is enabled.",
+            Description = "Reads the content of the specified file from the browser and populates its Content property with the byte array, or reads every valid file of the file list when no file is specified. Only reads valid files and only while the component is enabled. The whole file crosses the interop boundary as one message, which on Blazor Server the circuit caps (SignalR's MaximumReceiveMessageSize, 32 KB by default), so anything larger is read with OpenReadStreamAsync instead.",
             LinkType = LinkType.Link,
             Href = "#file-input-info"
         },
@@ -424,7 +424,7 @@ public partial class BitFileInputDemo
             Name = "OpenReadStreamAsync",
             Type = "(BitFileInputInfo fileInfo, long? maxAllowedSize = null, CancellationToken cancellationToken = default) => Task<Stream>",
             DefaultValue = "",
-            Description = "Opens a forward-only stream over the content of the specified file, which the runtime reads from the browser in chunks instead of materializing the whole file in memory the way ReadContentAsync does. Unlike ReadContentAsync it also reads a file the validations rejected. maxAllowedSize defaults to the size the browser reported for the file, and the stream must be disposed by the caller.",
+            Description = "Opens a forward-only stream over the content of the specified file, which the runtime reads from the browser in chunks instead of materializing the whole file in memory the way ReadContentAsync does - which is also what gets a file past a Blazor Server circuit's message size cap. Unlike ReadContentAsync it also reads a file the validations rejected. maxAllowedSize defaults to the size the browser reported for the file, and the stream must be disposed by the caller.",
             LinkType = LinkType.Link,
             Href = "#file-input-info"
         },
@@ -805,13 +805,13 @@ public partial class BitFileInputDemo
         {
             Name = "--bit-FileInput-disabled-background",
             DefaultValue = "--bit-clr-bg-dis",
-            Description = "Background when IsEnabled is false.",
+            Description = "Background of the browse button and of the remove buttons when IsEnabled is false.",
         },
         new()
         {
             Name = "--bit-FileInput-disabled-border-color",
             DefaultValue = "--bit-clr-brd-dis",
-            Description = "Border color when IsEnabled is false.",
+            Description = "Border color of the browse button when IsEnabled is false.",
         },
         new()
         {
@@ -832,6 +832,12 @@ public partial class BitFileInputDemo
             Description = "Text size of the browse button.",
         },
         new()
+        {
+            Name = "--bit-FileInput-label-font-weight",
+            DefaultValue = "--bit-tpg-font-weight",
+            Description = "Text weight of the browse button, which defaults to the weight the theme gives every control label.",
+        },
+        new()
         {
             Name = "--bit-FileInput-label-radius",
             DefaultValue = "--bit-shp-radius-button",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
index 4da1e605504..8b0df3a4a26 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
@@ -243,72 +243,157 @@ private void AddEventLog(string log)
     private readonly string example14RazorCode = @"
 <BitFileInput @ref=""bitFileInput""
               Multiple
+              Append
               MaxSize=""1024 * 1024 * 2""
               AllowedExtensions=""@(["".jpg"", "".jpeg"", "".png"", "".bmp""])""
               Classes=""@(new() { Dragging = ""custom-drop-zone"" })"">
     <LabelTemplate>
-        @if (bitFileInput.Files?.Any() is not true)
-        {
-            <div class=""browse-file"" @onclick=""() => bitFileInput.Browse()"">
-                <div class=""browse-file-header"">
-                    <i class=""bit-icon bit-icon--CloudUpload"" />
-                    <div>
-                        Drag and drop or
-                    </div>
-                    <div>
-                        <strong>
-                            Browse files
-                        </strong>
-                    </div>
-                </div>
-
-                <div class=""browse-file-footer"">
-                    <div>Max file size: 2 MB</div>
-                    <div>Supported file types: jpg, jpeg, png, bmp</div>
-                </div>
-            </div>
-        }
+        <button type=""button"" class=""browse-file"" @onclick=""() => bitFileInput.Browse()"">
+            <i class=""bit-icon bit-icon--CloudUpload"" aria-hidden=""true"" />
+            <div class=""browse-file-title"">Drag and drop or <strong>browse files</strong></div>
+            <div class=""browse-file-hint"">JPG, JPEG, PNG or BMP, up to 2 MB each</div>
+        </button>
     </LabelTemplate>
     <FileViewTemplate Context=""file"">
-        @if (!string.IsNullOrEmpty(file.Name))
-        {
-            <div class=""file-list"">
-                <div class=""file-list-header"">
-                    <div class=""file-info"">
-                        <div class=""file-info-main"">
-                            <i class=""bit-icon bit-icon--Page"" />
-                            <div class=""file-info-data"">
-                                <div class=""file-info-name"">
-                                    @file.Name
-                                </div>
-                                <div>
-                                    @FileSizeHumanizer.Humanize(file.Size)
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class=""file-info-btns"">
-                            <i class=""bit-icon bit-icon--Cancel remove-ico""
-                               @onclick=""() => bitFileInput.RemoveFile(file)"" />
-                        </div>
-                    </div>
-
-                    @if (!file.IsValid)
-                    {
-                        <div class=""file-info-e-msg"">@file.Message</div>
-                    }
-                </div>
-
-                <div class=""file-list-footer"">
-                    <div>Max file size: 2 MB</div>
-                    <div>Supported file types: jpg, jpeg, png, bmp</div>
-                </div>
+        <div class=""file-row @(file.IsValid ? null : ""file-row-invalid"")"">
+            <i class=""bit-icon bit-icon--Page"" aria-hidden=""true"" />
+            <div class=""file-row-data"">
+                <div class=""file-row-name"">@file.Name</div>
+                <div class=""file-row-meta"">@FileSizeHumanizer.Humanize(file.Size)</div>
+                @if (file.IsValid is false)
+                {
+                    <div class=""file-row-error"">@file.Message</div>
+                }
             </div>
-        }
+            <button type=""button"" class=""file-row-remove"" aria-label=""@($""Remove {file.Name}"")""
+                    @onclick=""() => bitFileInput.RemoveFile(file)"">
+                <i class=""bit-icon bit-icon--Cancel"" aria-hidden=""true"" />
+            </button>
+        </div>
     </FileViewTemplate>
 </BitFileInput>";
     private readonly string example14CsharpCode = @"
 private BitFileInput bitFileInput = default!;";
+    private const string example14ScssCode = @"
+/* Every color is a theme token, so the hand-built panel and rows follow the preset and the scheme. */
+.browse-file {
+    gap: 0.5rem;
+    width: 100%;
+    display: flex;
+    cursor: pointer;
+    padding: 1.5rem;
+    text-align: center;
+    align-items: center;
+    font-family: inherit;
+    justify-content: center;
+    flex-flow: column nowrap;
+    color: var(--bit-clr-fg-pri);
+    background-color: var(--bit-clr-bg-pri);
+    border-radius: var(--bit-shp-radius-surface);
+    border: 2px dashed var(--bit-clr-brd-pri);
+
+    &:hover {
+        border-color: var(--bit-clr-pri);
+        background-color: var(--bit-clr-bg-sec);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--bit-clr-pri-focus);
+        outline-offset: 2px;
+    }
+
+    i {
+        font-size: 1.5rem;
+        color: var(--bit-clr-pri);
+    }
+}
+
+.browse-file-title {
+    font-size: 1rem;
+}
+
+.browse-file-hint {
+    font-size: 0.75rem;
+    color: var(--bit-clr-fg-sec);
+}
+
+.file-row {
+    gap: 0.75rem;
+    display: flex;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
+    align-items: center;
+    color: var(--bit-clr-fg-pri);
+    background-color: var(--bit-clr-bg-sec);
+    border-radius: var(--bit-shp-radius-surface);
+    border: 1px solid var(--bit-clr-brd-pri);
+
+    > i {
+        font-size: 1.5rem;
+        color: var(--bit-clr-fg-sec);
+    }
+}
+
+.file-row-invalid {
+    border-color: var(--bit-clr-err);
+}
+
+.file-row-data {
+    flex-grow: 1;
+    min-width: 0;
+}
+
+.file-row-name {
+    overflow: hidden;
+    font-weight: 600;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.file-row-meta {
+    font-size: 0.75rem;
+    color: var(--bit-clr-fg-sec);
+}
+
+.file-row-error {
+    font-size: 0.75rem;
+    color: var(--bit-clr-err);
+}
+
+.file-row-remove {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    color: var(--bit-clr-err);
+    background-color: transparent;
+    border-radius: var(--bit-shp-radius-button);
+
+    &:hover {
+        background-color: var(--bit-clr-bg-ter);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--bit-clr-pri-focus);
+        outline-offset: -2px;
+    }
+}
+
+/* Classes.Dragging lands on the root while files hover over it, which is where the panel gets its
+   drag feedback from now that it no longer carries the component's own drop indicator. */
+::deep .custom-drop-zone .browse-file {
+    border-color: var(--bit-clr-pri);
+    background-color: var(--bit-clr-bg-sec-hover);
+}";
+
+    private readonly DemoCodeFile[] example14CodeFiles =
+    [
+        new("BitFileInputDemo.razor.scss", example14ScssCode),
+    ];
 
     private readonly string example15RazorCode = @"
 <BitFileInput @ref=""publicApiFileInput"" HideLabel Multiple OnChange=""@(_ => StateHasChanged())"" />
@@ -473,7 +558,7 @@ private async Task HashTheFirstFile()
 
 
 <BitFileInput Label=""Pill button, wide component"" ShowPreview ShowRemoveButton
-              Style=""--bit-FileInput-label-radius: 999px; --bit-FileInput-max-width: 100%;"" />
+              Style=""--bit-FileInput-label-radius: 999px; --bit-FileInput-max-width: 100%; --bit-FileInput-label-font-weight: 400;"" />
 
 <BitFileInput Label=""Solid drop indicator in the role color"" ShowRemoveButton
               Style=""--bit-FileInput-drop-border-style: solid; --bit-FileInput-drop-background: var(--bit-clr-suc);"" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss
index c35d7525731..60a453fa546 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss
@@ -30,142 +30,137 @@
         background-color: mediumseagreen;
     }
 
+    // Classes.Dragging lands on the root while files hover over it, so the hand-built panel inside
+    // gets its drag feedback from an ancestor rule rather than from the component's own drop indicator.
     .custom-drop-zone .browse-file {
-        border-style: dashed;
-        border-color: #0072CE;
-        background-color: #eaf4fd;
+        border-color: var(--bit-clr-pri);
+        background-color: var(--bit-clr-bg-sec-hover);
     }
 }
 
 .event-log {
-    margin-top: 8px;
-    padding: 8px;
-    background-color: #e8f5e9;
-    border-radius: 4px;
-    color: #2e7d32;
-    font-weight: 500;
+    margin-top: 0.5rem;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    color: var(--bit-clr-suc-text);
+    background-color: var(--bit-clr-suc);
 }
 
 .api-buttons {
+    gap: 0.75rem;
     display: flex;
-    gap: 12px;
-    margin-bottom: 16px;
+    flex-wrap: wrap;
+    margin-bottom: 1rem;
 }
 
+// A hand-built LabelTemplate: a real button, so Tab reaches it and Enter or Space opens the dialog
+// exactly as they do on the browse button it replaces. Every color is read off a theme token, so the
+// panel follows the four presets and both schemes instead of only looking right in the light one.
 .browse-file {
-    border: 1px solid #D2D2D7;
-    border-radius: 2px;
-    padding: 24px;
-    width: 420px;
-    height: 200px;
+    gap: 0.5rem;
+    width: 100%;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: 50px;
     cursor: pointer;
+    padding: 1.5rem;
+    text-align: center;
+    align-items: center;
+    font-family: inherit;
+    justify-content: center;
+    flex-flow: column nowrap;
+    color: var(--bit-clr-fg-pri);
+    background-color: var(--bit-clr-bg-pri);
+    border-radius: var(--bit-shp-radius-surface);
+    border: 2px dashed var(--bit-clr-brd-pri);
 
     &:hover {
-        border-color: #0072CE;
-        background-color: #f8f9fa;
+        border-color: var(--bit-clr-pri);
+        background-color: var(--bit-clr-bg-sec);
     }
-}
-
-.browse-file-header {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 16px;
 
-    i {
-        font-size: 24px;
-        font-weight: 700;
-        color: #0072CE;
+    &:focus-visible {
+        outline: 2px solid var(--bit-clr-pri-focus);
+        outline-offset: 2px;
     }
 
-    strong {
-        color: #0072CE;
+    i {
+        font-size: 1.5rem;
+        color: var(--bit-clr-pri);
     }
 }
 
-.browse-file-footer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    color: #78787D;
+.browse-file-title {
+    font-size: 1rem;
 }
 
-.file-list {
-    border: 1px solid #D2D2D7;
-    border-radius: 2px;
-    padding: 24px;
-    width: 420px;
-    height: 200px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
+.browse-file-hint {
+    font-size: 0.75rem;
+    color: var(--bit-clr-fg-sec);
 }
 
-.file-list-header {
+// A hand-built FileViewTemplate: one compact row per file, with the constraints stated once under the
+// panel instead of repeated on every row the way a per-file footer would.
+.file-row {
+    gap: 0.75rem;
     display: flex;
-    flex-direction: column;
-    gap: 8px;
-}
-
-.file-info {
-    display: flex;
-    justify-content: space-between;
+    padding: 0.5rem;
+    margin-top: 0.5rem;
     align-items: center;
+    color: var(--bit-clr-fg-pri);
+    background-color: var(--bit-clr-bg-sec);
+    border-radius: var(--bit-shp-radius-surface);
+    border: 1px solid var(--bit-clr-brd-pri);
+
+    > i {
+        font-size: 1.5rem;
+        color: var(--bit-clr-fg-sec);
+    }
 }
 
-.file-info-main {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 12px;
+.file-row-invalid {
+    border-color: var(--bit-clr-err);
+}
 
-    i {
-        font-size: 24px;
-    }
+.file-row-data {
+    flex-grow: 1;
+    min-width: 0;
 }
 
-.file-info-name {
+.file-row-name {
+    overflow: hidden;
     font-weight: 600;
-    margin-bottom: 4px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.file-row-meta {
+    font-size: 0.75rem;
+    color: var(--bit-clr-fg-sec);
 }
 
-.file-info-data {
-    width: 275px;
+.file-row-error {
+    font-size: 0.75rem;
+    color: var(--bit-clr-err);
 }
 
-.file-info-btns {
+.file-row-remove {
+    width: 2rem;
+    height: 2rem;
     display: flex;
-    justify-content: space-between;
-    gap: 8px;
+    flex-shrink: 0;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    color: var(--bit-clr-err);
+    background-color: transparent;
+    border-radius: var(--bit-shp-radius-button);
 
-    i {
-        display: block;
-        cursor: pointer;
+    &:hover {
+        background-color: var(--bit-clr-bg-ter);
     }
 
-    .remove-ico {
-        color: #F9423A;
-
-        &:hover {
-            color: #d32f2f;
-        }
+    &:focus-visible {
+        outline: 2px solid var(--bit-clr-pri-focus);
+        outline-offset: -2px;
     }
 }
-
-.file-info-e-msg {
-    margin-top: 12px;
-    color: #F9423A;
-}
-
-.file-list-footer {
-    font-size: 12px;
-    color: #78787D;
-}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
index 1ef56b411e0..20d79a543c0 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
@@ -1719,6 +1719,43 @@ public void BitFileInputShouldApplyTheNewCascadingParameters()
         Assert.AreEqual("Cascaded list", component.Find(".bit-fin-fl").GetAttribute("aria-label"));
     }
 
+    [TestMethod]
+    public void BitFileInputFileListShouldTakeATabStopOnlyWhenNothingInsideItCan()
+    {
+        // an empty list has nothing to scroll, so it stays out of the tab order.
+        var component = RenderComponent<BitFileInput>();
+
+        Assert.IsFalse(component.Find(".bit-fin-fl").HasAttribute("tabindex"));
+
+        // a list given a ceiling scrolls, and without the remove buttons there is nothing inside it
+        // a keyboard can reach, so the list itself has to be reachable to be scrollable.
+        SetupFiles([new() { Name = "a.txt", Size = 10, FileId = "1" }]);
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        Assert.AreEqual("0", component.Find(".bit-fin-fl").GetAttribute("tabindex"));
+
+        // the remove buttons are that way in, so the list does not take a stop of its own on top of them.
+        component.Render(parameters => parameters.Add(p => p.ShowRemoveButton, true));
+
+        Assert.IsFalse(component.Find(".bit-fin-fl").HasAttribute("tabindex"));
+    }
+
+    [TestMethod]
+    public void BitFileInputFileListShouldLeaveTheTabStopToACustomFileViewTemplate()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 10, FileId = "1" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.FileViewTemplate, file => builder => builder.AddContent(0, file.Name));
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        // the template owns what is inside the list, focusable or not, so the list does not compete with it.
+        Assert.IsFalse(component.Find(".bit-fin-fl").HasAttribute("tabindex"));
+    }
+
     private void SetupFiles(BitFileInputInfo[] files)
     {
         Context.JSInterop.Setup<BitFileInputInfo[]>("BitBlazorUI.FileInput.setup", _ => true).SetResult(files);

From d0eb562499f94487adf2291eb06d59fb433dda88 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Thu, 24 Sep 2026 20:21:51 +0330
Subject: [PATCH 6/8] code review

---
 .../Components/Inputs/FileInput/BitFileInput.razor  |  5 +++--
 .../Components/Inputs/FileInput/BitFileInput.ts     | 13 ++++++-------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
index 00475c173e9..72b49b53172 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
@@ -157,14 +157,15 @@
                         </div>
                         @if (ShowRemoveButton)
                         {
+                            @* the accessible name carries the whole path when there is one, since a flattened
+                               folder can hold the same name more than once and "Remove readme.md" would name
+                               none of them. *@
                             <button @ref="_removeRefs[file.FileId]"
                                     @onclick="() => HandleRemoveClick(file)"
                                     type="button"
                                     title="@removeTitle"
                                     tabindex="@TabIndex"
                                     disabled="@(IsEnabled is false)"
-                                    @* the whole path when there is one, since a flattened folder can hold the
-                                       same name more than once and "Remove readme.md" would name none of them. *@
                                     aria-label="@($"{removeTitle} {(folder.HasValue() ? file.RelativePath : file.Name)}")"
                                     style="@Styles?.RemoveButton"
                                     class="bit-fin-rbt @Classes?.RemoveButton">
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
index faaf14d92de..09396ec6370 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.ts
@@ -1,7 +1,3 @@
-// the Blazor runtime's own global, which is what turns a File into something .NET can read as a stream
-// instead of as one byte array held whole in memory on both sides.
-declare const DotNet: { createJSStreamReference(value: Blob | ArrayBuffer): any };
-
 namespace BitBlazorUI {
     export class FileInput {
         private static readonly IMAGE_SIZE_CONCURRENCY = 8;
@@ -296,9 +292,12 @@ namespace BitBlazorUI {
                 throw new Error(`File not found: ${fileId}`);
             }
 
-            // the File is a Blob, so the runtime reads it in chunks straight off the disk - nothing of it is
-            // ever held in the page, which is what makes a file larger than the tab's memory readable at all.
-            return DotNet.createJSStreamReference(item.file);
+            // the File is handed back as it is: the runtime wraps whatever a call typed as an
+            // IJSStreamReference returns, and wrapping it here as well would hand that wrapper - which is
+            // neither a blob nor a typed array - to the runtime's own wrapping and throw.
+            // As a Blob it is then read in chunks straight off the disk, nothing of it ever held in the
+            // page, which is what makes a file larger than the tab's memory readable at all.
+            return item.file;
         }
 
         public static reset(id: string, inputElement: HTMLInputElement) {

From 5ce040d374fa473d973e89e890d3ea737dc27966 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Thu, 24 Sep 2026 20:38:40 +0330
Subject: [PATCH 7/8] code review

---
 .../Components/Inputs/FileInput/BitFileInput.razor.cs       | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
index a2acadb4572..2249894212d 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
@@ -830,9 +830,9 @@ private static string GetFolder(BitFileInputInfo file)
         return BitIconInfo.Bit(GetDefaultFileIconName(file));
     }
 
-    // the MIME type the browser reports is the better signal and is checked first; the extension only has
-    // the last word for the families that share a type (an Office document is a zip to the browser) or for
-    // the files a browser hands over with no type at all.
+    // the extension is checked first, for the document families the MIME type cannot tell apart (an Office
+    // document is a zip to the browser); for everything else the MIME type the browser reports decides,
+    // falling back to a plain page when the browser hands a file over with no type at all.
     private static string GetDefaultFileIconName(BitFileInputInfo file)
     {
         var extension = Path.GetExtension(file.Name).ToLowerInvariant();

From 9b80629324ef8dc251a0a41412b1ab75230d9fd4 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Thu, 24 Sep 2026 21:00:29 +0330
Subject: [PATCH 8/8] improve further

---
 .../Inputs/FileInput/BitFileInput.razor       |   7 +-
 .../Inputs/FileInput/BitFileInput.razor.cs    |   3 +
 .../Inputs/FileInput/BitFileInput.scss        |  12 +-
 .../Inputs/FileInput/BitFileInputDemo.razor   | 300 +++++-------------
 .../BitFileInputDemo.razor.samples.cs         |  11 +-
 .../Inputs/FileInput/BitFileInputTests.cs     |  24 ++
 6 files changed, 130 insertions(+), 227 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
index 72b49b53172..42155a74e64 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor
@@ -150,7 +150,7 @@
                             </div>
                             @if (file.IsValid is false)
                             {
-                                <div style="@Styles?.ErrorMessage" class="bit-fin-msg @Classes?.ErrorMessage">
+                                <div id="@GetMessageId(file)" style="@Styles?.ErrorMessage" class="bit-fin-msg @Classes?.ErrorMessage">
                                     @file.Message
                                 </div>
                             }
@@ -159,7 +159,9 @@
                         {
                             @* the accessible name carries the whole path when there is one, since a flattened
                                folder can hold the same name more than once and "Remove readme.md" would name
-                               none of them. *@
+                               none of them. The error message of an invalid file describes the button, since a
+                               keyboard user tabbing from one remove button to the next would otherwise never
+                               hear why the file was rejected - which is exactly what decides whether to remove it. *@
                             <button @ref="_removeRefs[file.FileId]"
                                     @onclick="() => HandleRemoveClick(file)"
                                     type="button"
@@ -167,6 +169,7 @@
                                     tabindex="@TabIndex"
                                     disabled="@(IsEnabled is false)"
                                     aria-label="@($"{removeTitle} {(folder.HasValue() ? file.RelativePath : file.Name)}")"
+                                    aria-describedby="@(file.IsValid ? null : GetMessageId(file))"
                                     style="@Styles?.RemoveButton"
                                     class="bit-fin-rbt @Classes?.RemoveButton">
                                 <i style="@Styles?.RemoveIcon" class="@removeIcon?.GetCssClasses() @Classes?.RemoveIcon" aria-hidden="true" />
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
index 2249894212d..88c9d22ac23 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.razor.cs
@@ -721,6 +721,9 @@ private static string GetFileStem(string name)
     // the extension the file list renders unshrunk beside the stem, which together spell the name back out.
     private static string GetFileExtension(string name) => BitFileInputInfo.GetExtension(name);
 
+    // the id of an invalid file's error message, which its remove button is described by.
+    private string GetMessageId(BitFileInputInfo file) => $"FileInput-{UniqueId}-{file.FileId}-message";
+
     private async Task UpdateDropZone()
     {
         var dragClass = GetDragClass();
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
index ecc19358dc7..eb553d9bb1e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileInput/BitFileInput.scss
@@ -277,7 +277,9 @@
     overflow: hidden;
     align-items: center;
     flex-flow: row nowrap;
-    font-weight: $tg-fw-light;
+    // regular rather than light: a file name is small text that is read rather than glanced at, and a thin
+    // stroke at the xs and sm steps of the ramp loses legibility well before its color loses contrast.
+    font-weight: $tg-fw-regular;
     justify-content: space-between;
     color: var(--bit-FileInput-file-name-color, #{$clr-fg-pri});
     margin-top: var(--bit-FileInput-item-gap, #{spacing(0.375)});
@@ -296,11 +298,13 @@
         }
     }
 
+    // the message wraps instead of being ellipsized: unlike a file name, whose full text is one hover away,
+    // the reason a file was rejected has nowhere else to be read, and cutting it off mid-sentence would hide
+    // the one thing the user needs to fix the selection.
     .bit-fin-msg {
         width: 100%;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        margin-top: spacing(0.25);
+        overflow-wrap: anywhere;
     }
 }
 
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
index 714e7510de0..4d1521a789e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor
@@ -2,22 +2,19 @@
 @page "/components/file-input"
 
 <PageOutlet Url="components/fileinput" Title="FileInput"
-            Description="A file selection component with browse, drag-and-drop and clipboard paste support, built-in size, total size, extension, MIME type, count, duplicate, image resolution and custom validation, a built-in drop zone panel, image preview thumbnails and file type glyphs, folder and camera capture modes, described constraints and screen reader announcements, and a fully templatable file list - selection only, no uploading involved." />
+            Description="A file selection component with browse, drag-and-drop and paste, built-in validation, a drop zone panel, image previews, folder and camera capture, and screen reader announcements - selection only, no uploading." />
 
 <DemoPage Name="FileInput"
-          Description="BitFileInput is the selection half of working with files: it lets the user hand files to the app - through the file dialog, by dragging them out of the OS onto the component, or by pasting them from the clipboard - without uploading anything anywhere. Each selected file surfaces in C# as a BitFileInputInfo carrying its name, size, MIME type, last-modified time, the folder it came from and, on request, the pixel dimensions of an image, and its content can be pulled on demand as a byte array. Selections are validated on arrival against per-file size bounds, a total size budget, allowed extensions or MIME types, a maximum file count, a no-duplicates rule and any custom rule; files that fail stay in the list, marked invalid with a customizable message, so the user can see exactly what went wrong, and the list level limits release their files again as soon as removals free up room. The built-in file list shows names, human-readable sizes, image thumbnails or file type glyphs and per-file remove buttons, and both the browse area and the list items can be replaced wholesale with templates. Accessibility is wired in rather than bolted on: the constraints can be spelled out in a description tied to the browse button through aria-describedby, and every change of the list is announced through an ARIA live region. When it is time to actually send files to a server, reach for the BitFileUpload component instead."
+          Description="BitFileInput lets the user hand files to the app - through the file dialog, by dropping them onto it or by pasting them - without uploading anything. Each file surfaces in C# as a BitFileInputInfo (name, size, type, folder and, on request, image dimensions) and is validated on arrival against size, total size, type, count, duplicate and custom rules; a rejected file stays in the list with its reason. Content is read on demand, as a byte array or a stream. A drop zone panel, thumbnails, type glyphs, remove buttons, templates and screen reader announcements are built in. To send files to a server, use BitFileUpload."
           Parameters="componentParameters" SubEnums="componentSubEnums" SubClasses="componentSubClasses"
           PublicMembers="componentPublicMembers" CssVariables="componentCssVariables"
           GitHubUrl="Inputs/FileInput/BitFileInput.razor"
           GitHubDemoUrl="Inputs/FileInput/BitFileInputDemo.razor">
     <DemoExample Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <div>
-            Three ways in, all on by default: click the browse button to open the file dialog, drag a file out of
-            the OS and drop it anywhere on the component, or focus it and paste a file from the clipboard. The
-            selection lands in the built-in file list with its name and a human-readable size, and the browse button
-            turns into a dashed drop indicator while files hover over the component. <b>Label</b> sets the button
-            text (default "Browse") and <b>Title</b> its tooltip. Disabling the component blocks all three routes
-            and takes the button out of the tab order.
+            Browse with the button, drop files from the OS onto the component, or focus it and paste from the clipboard.
+            <b>Label</b> sets the button text (default "Browse") and <b>Title</b> its tooltip. Disabling it blocks all
+            three routes.
         </div>
 
         <br />
@@ -32,11 +29,9 @@
     <DemoExample Title="AllowDrop & AllowPaste" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode"
                  Id="example2">
         <div>
-            The two alternative routes switch off independently and take effect immediately.
-            <b>AllowDrop</b> off still swallows the drop event, so the browser does not navigate away to the file
-            and lose the page state, but shows a "no drop" cursor instead of handling it. <b>AllowPaste</b> off
-            ignores pasted files; note that a paste only reaches the component while the focus is inside it, so it
-            is a power-user shortcut rather than the primary route.
+            The drop and paste routes switch off independently. With <b>AllowDrop</b> off a drop is still swallowed, so
+            the browser never navigates away to the file. A paste only reaches the component while the focus is inside
+            it.
         </div>
 
         <br />
@@ -52,12 +47,9 @@
 
     <DemoExample Title="Description" RazorCode="@example3RazorCode" Id="example3">
         <div>
-            Telling the user the rules before they run into them is the biggest usability win a file input offers.
-            <b>Description</b> renders a hint under the browse button <i>and</i> wires it to that button through
-            aria-describedby, so a screen reader reads the constraints together with the button instead of leaving
-            them to be discovered by trial and error. Spell out there whatever <b>Accept</b>,
-            <b>AllowedExtensions</b> and <b>MaxSize</b> actually enforce. <b>DescriptionTemplate</b> takes over when
-            the hint needs markup of its own.
+            <b>Description</b> renders a hint under the browse button and ties it to the button through
+            aria-describedby, so screen readers read the constraints along with it. State there what <b>Accept</b>,
+            <b>AllowedExtensions</b> and <b>MaxSize</b> enforce; <b>DescriptionTemplate</b> takes markup.
         </div>
 
         <br />
@@ -77,16 +69,9 @@
 
     <DemoExample Title="Multiple & Directory" RazorCode="@example4RazorCode" Id="example4">
         <div>
-            <b>Multiple</b> lets the dialog hand over several files at once and lets a single drop or paste carry
-            several. Without it the dialog is limited to one file and only the first file of a multi-file drop is
-            taken, rather than the rest flooding the list.
-            <br /><br />
-            <b>Directory</b> goes further and switches the dialog to folder selection: every file inside the picked
-            folder, subfolders included, lands in the list. It also teaches the drop zone to walk a dropped folder
-            recursively, which a plain file drop cannot do since the browser hands over no files at all for a
-            directory. Each file then carries its <b>RelativePath</b> inside that folder, and the list prints the
-            folder next to the size - without it a flattened folder is a wall of names with no way to tell two
-            <code>readme.md</code> files apart. All the validations still apply to each file individually.
+            <b>Multiple</b> lets one dialog, drop or paste carry several files; without it only the first one is taken.
+            <b>Directory</b> picks a whole folder, subfolders included, and walks dropped folders too; each file then
+            carries its <b>RelativePath</b>, whose folder is printed beside its size.
         </div>
 
         <br />
@@ -100,13 +85,9 @@
 
     <DemoExample Title="Removable" RazorCode="@example5RazorCode" Id="example5">
         <div>
-            <b>ShowRemoveButton</b> puts a remove button on each file item. Removing a file updates the list,
-            raises <b>OnRemove</b> and <b>OnChange</b>, re-runs the list level limits and releases the file's
-            reference on the JavaScript side so the browser can free the memory. Because the pressed button leaves
-            the DOM with its file, the focus is handed on to the button that takes its place - to the last one when
-            the list got shorter, and back to the browse button when nothing is left - so removing several files in
-            a row from the keyboard never drops the focus back to the top of the page.
-            <b>RemoveButtonIconName</b> swaps the default Delete icon for any other built-in icon.
+            <b>ShowRemoveButton</b> adds a remove button to each file, raising <b>OnRemove</b> and <b>OnChange</b>. The
+            focus moves on to the next remove button, or back to the browse button, so files can be removed in a row
+            from the keyboard. <b>RemoveButtonIconName</b> swaps the icon.
         </div>
 
         <br />
@@ -120,18 +101,10 @@
 
     <DemoExample Title="Append, AutoReset & duplicates" RazorCode="@example6RazorCode" Id="example6">
         <div>
-            Three parameters decide how a new selection meets the one already in the list. By default it replaces
-            it. <b>Append</b> keeps the existing files and adds the new ones to the end, letting the user build the
-            list up over several rounds of browsing, dropping or pasting. <b>AutoReset</b> is the opposite
-            extreme: it empties the list just before the dialog opens, so every browse starts clean even if the
-            dialog is then cancelled.
-            <br /><br />
-            Building a list up makes it easy to pick the same file twice. <b>AllowDuplicates</b> set to false
-            catches that: a file matching one already in the list by folder, name, size and last-modified time is
-            marked invalid with the <b>DuplicateErrorMessage</b> rather than added as a second working entry. The
-            duplicate stays visible so the user understands why nothing new appeared, and like every list level
-            rule it is re-evaluated after each removal - dismissing either copy leaves the survivor valid. Select
-            the same file twice below to see it.
+            A new selection replaces the list by default. <b>Append</b> adds to it instead and <b>AutoReset</b> empties
+            it right before the dialog opens. With <b>AllowDuplicates</b> off, a file already in the list (same folder,
+            name, size and modified time) is marked invalid with the <b>DuplicateErrorMessage</b> - pick the same file
+            twice to see it.
         </div>
 
         <br />
@@ -150,16 +123,9 @@
 
     <DemoExample Title="Size & count limits" RazorCode="@example7RazorCode" Id="example7">
         <div>
-            Four parameters bound what the selection may carry. <b>MaxSize</b> and <b>MinSize</b> bound each file
-            individually, <b>MaxTotalSize</b> bounds the accumulated size of the whole list, and <b>MaxCount</b>
-            caps how many files it holds. A file outside the bounds is not thrown away: it stays in the list marked
-            invalid, with an error message of its own and a red rule around it, so the user sees exactly which file
-            did not make it. Each message is customizable through the matching
-            <b>...ErrorMessage</b> parameter.
-            <br /><br />
-            The two list level limits are re-run after every change, so a file rejected for the budget or the cap
-            becomes valid again as soon as removals free up room, and only files that are otherwise valid consume a
-            slot or a byte of the budget - a file rejected for its size never pushes a good file over the cap.
+            <b>MaxSize</b> and <b>MinSize</b> bound each file, <b>MaxTotalSize</b> the whole list and <b>MaxCount</b>
+            the number of files. A rejected file stays in the list, marked invalid with its <b>...ErrorMessage</b>. The
+            list-level limits are re-run on every change, so removing files frees their room again.
         </div>
 
         <br />
@@ -179,16 +145,10 @@
 
     <DemoExample Title="Accept, AllowedExtensions & Capture" RazorCode="@example8RazorCode" Id="example8">
         <div>
-            Two parameters restrict file types at different points. <b>Accept</b> feeds the native accept
-            attribute, so the file dialog only offers matching files - but a drop or a paste never goes through the
-            dialog, which makes it no more than a convenience filter. <b>AllowedExtensions</b> is the actual guard:
-            it checks every file however it arrived, marking mismatches invalid with the
-            <b>NotAllowedExtensionErrorMessage</b>, and when <b>Accept</b> is not set it generates the accept
-            attribute from the same list. Its entries are matched leniently - an extension with or without its
-            leading dot, in any casing - and an entry containing a slash is treated as a MIME type instead, matched
-            against the type the browser reports, with a trailing wildcard like <b>image/*</b> covering a whole
-            group. That accepts every image regardless of its extension, which a plain extension list cannot
-            express.
+            <b>Accept</b> only filters the file dialog - drops and pastes bypass it. <b>AllowedExtensions</b> validates
+            every file however it arrived and generates the accept attribute when <b>Accept</b> is not set. Its entries
+            ignore case and the leading dot, and an entry with a slash is a MIME type, wildcards like <b>image/*</b>
+            included.
         </div>
 
         <br />
@@ -199,23 +159,16 @@
 
         <br /><br />
 
-        <div>AllowedExtensions (validated):</div>
-        <br />
-        <BitFileInput Label="Browse or drop a file" AllowedExtensions="@([".gif", ".jpg", ".png", ".bmp"])" />
-
-        <br /><br />
-
-        <div>AllowedExtensions with MIME types (validated):</div>
+        <div>AllowedExtensions (validated) - extensions, with or without the dot, and a MIME type:</div>
         <br />
-        <BitFileInput Label="Browse or drop a file" AllowedExtensions="@(["image/*", "application/pdf"])" />
+        <BitFileInput Label="Browse or drop a file" AllowedExtensions="@([".pdf", "docx", "image/*"])" />
 
         <br /><br />
 
         <div>
-            <b>Capture</b> is the third native attribute of the picker: it asks a mobile device to open a camera
-            or a microphone instead of the file browser - "user" for the front camera, "environment" for the rear
-            one - and needs an <b>Accept</b> of its own to say which of the two. Desktop browsers ignore it and
-            show the regular dialog.
+            <b>Capture</b> asks a mobile device for a camera or a microphone instead of the file browser - "user" for
+            the front camera, "environment" for the rear one - with an <b>Accept</b> saying which. Desktop browsers
+            ignore it.
         </div>
 
         <br />
@@ -225,18 +178,9 @@
 
     <DemoExample Title="Custom validation" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>
-            <b>FileValidator</b> runs a function of your own for each newly selected file once the built-in checks
-            pass. Returning a message marks the file invalid and shows it under the name; returning null accepts
-            the file. Any rule expressible over the file's metadata works, and a validator that throws only
-            invalidates its own file - using the exception message as the error text - rather than aborting the
-            whole selection.
-            <br /><br />
-            Pixel dimensions are the one property of an image that neither its name nor its metadata reveals, yet
-            avatars, banners and thumbnails are exactly what needs a resolution rule. <b>ReadImageDimensions</b>
-            makes the component decode every selected image and fill <b>Width</b> and <b>Height</b> before
-            validation runs, so the validator can reject on resolution and name the offending size. Decoding costs
-            time and memory in proportion to the images, which is why it is opt-in; anything that is not a
-            decodable image comes back with both properties null.
+            <b>FileValidator</b> runs after the built-in checks: return a message to reject the file or null to accept
+            it; a validator that throws only rejects its own file. <b>ReadImageDimensions</b> decodes images first to
+            fill <b>Width</b> and <b>Height</b> for resolution rules - opt-in, since decoding costs time and memory.
         </div>
 
         <br />
@@ -256,12 +200,9 @@
     <DemoExample Title="Preview & file icons" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode"
                  Id="example10">
         <div>
-            <b>ShowPreview</b> puts a thumbnail next to each image, backed by an object URL the component creates
-            on selection and revokes when the file is removed or the component is disposed - no manual cleanup, and
-            the URL is also exposed as <b>PreviewUrl</b> for a custom <b>FileViewTemplate</b>. Everything that has
-            no thumbnail gets a glyph for its type in the same slot, picked from the MIME type and the extension,
-            so the names of a mixed list stay in one column. <b>FileIconSelector</b> replaces that choice with one
-            of your own, and returning null from it leaves a file with no glyph at all.
+            <b>ShowPreview</b> shows a thumbnail for each image and a type glyph for everything else. The thumbnail's
+            object URL is exposed as <b>PreviewUrl</b> and revoked for you. <b>FileIconSelector</b> picks the glyph
+            instead; returning null leaves none.
         </div>
 
         <br />
@@ -279,15 +220,10 @@
 
     <DemoExample Title="Localization" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
         <div>
-            Every piece of English the component can say has a parameter that replaces it, and they are the whole
-            list: <b>Label</b> and <b>Description</b> for the browse area, <b>RemoveButtonTitle</b> for the remove
-            button's tooltip and the prefix of its accessible label ("Remove report.pdf"),
-            <b>FileListAriaLabel</b> for the accessible name of the file list, the six
-            <b>...ErrorMessage</b> parameters for the validation messages, <b>FileSizeFormatter</b> for the file
-            size - which is also where a different rounding or the decimal base some platforms prefer belongs - and
-            <b>AnnouncementProvider</b> for the sentence the screen reader hears on every change of the list.
-            Setting them once for a whole app is what the <BitLink Href="#example19">cascading parameters</BitLink>
-            are for.
+            Every built-in string has a parameter: <b>Label</b>, <b>Description</b>, <b>RemoveButtonTitle</b>,
+            <b>FileListAriaLabel</b>, the six <b>...ErrorMessage</b>s, <b>FileSizeFormatter</b> and
+            <b>AnnouncementProvider</b> for the screen reader announcement. Set them app-wide with the <BitLink
+            Href="#example19">cascading parameters</BitLink>.
         </div>
 
         <br />
@@ -307,10 +243,8 @@
 
     <DemoExample Title="HideFileList" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
         <div>
-            <b>HideFileList</b> suppresses the built-in file list while the selection keeps working - for an app
-            that renders its own view of the files elsewhere. The example captures the selection through
-            <b>OnChange</b> and renders a plain list of its own below. Its sibling <b>HideLabel</b> does the same
-            for the browse button, as the Public API section shows.
+            <b>HideFileList</b> hides the built-in list while the selection keeps working, for an app that renders its
+            own view of the files from <b>OnChange</b>.
         </div>
 
         <br />
@@ -333,13 +267,9 @@
 
     <DemoExample Title="Events" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
         <div>
-            <b>OnChange</b> fires with the current array of files whenever the selection changes - after browsing,
-            dropping, pasting and removing alike. <b>OnInvalid</b> follows it whenever the list holds at least one
-            invalid file, carrying only those files with their messages, which saves filtering the list by hand to
-            drive a summary or block a submit button. <b>OnRemove</b> fires once per removed file. Since content is
-            never loaded eagerly, <b>ReadContentAsync</b> fetches bytes on demand - pass a file to read just that
-            one, or call it with no argument to read every valid file, which is what the example does before
-            showing the loaded byte count next to each file along with its <b>LastModifiedDate</b>.
+            <b>OnChange</b> fires with all the files after every change, <b>OnInvalid</b> right after it with only the
+            invalid ones, and <b>OnRemove</b> once per removed file. Content is never loaded eagerly:
+            <b>ReadContentAsync</b> reads one file, or every valid file when called without one.
         </div>
 
         <br />
@@ -379,16 +309,10 @@
     <DemoExample Title="Templates" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode"
                  CodeFiles="@example14CodeFiles" Id="example14">
         <div>
-            The default UI can be swapped out entirely: <b>LabelTemplate</b> replaces the browse button and
-            <b>FileViewTemplate</b> replaces each item of the file list, receiving the file info as its context,
-            validation state and error message included. Both replace real controls, so a template has to bring
-            back what it replaced: the panel below is a <code>&lt;button&gt;</code> and the remove control is one
-            too, which is what keeps Tab, Enter and Space working and gives each of them a focus ring. Replacing
-            the browse button also replaces the built-in dashed drop indicator that lived on it, so a custom label
-            needs its own drag feedback: <b>Classes.Dragging</b> puts a class on the root element for as long as
-            files hover over the component, which is what recolors the panel below. For a drop panel that is not
-            this hand-built, reach for <BitLink Href="#example18"><b>ShowDropZone</b></BitLink> instead - it brings
-            the same shape with the focus ring, the drag state and the theme already wired in.
+            <b>LabelTemplate</b> replaces the browse button and <b>FileViewTemplate</b> each file item. A template
+            replaces real controls, so use real buttons in it to keep the keyboard working, and <b>Classes.Dragging</b>
+            to give a custom label its drag feedback. For a ready-made drop panel, see <BitLink Href="#example18">Drop
+            zone</BitLink>.
         </div>
 
         <br />
@@ -427,23 +351,10 @@
 
     <DemoExample Title="Public API" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
         <div>
-            The component can be driven entirely from code: <b>Browse</b> opens the file dialog, <b>Reset</b>
-            silently clears the selection without raising any callback, and <b>RemoveFile</b> removes a specific
-            file - or every file when called without an argument - raising <b>OnRemove</b> and <b>OnChange</b> just
-            like the remove button does. <b>Files</b> exposes the current selection as a read-only list, each entry
-            carrying its position in <b>Index</b>, and <b>InputId</b> gives the id of the underlying HTML input.
-            Here the browse button is hidden via <b>HideLabel</b> and replaced with external BitButtons - and
-            since that button is also what the drop indicator lives on, hiding it moves the indicator onto the
-            component itself, so dropping files onto the list still shows that it is allowed.
-            <br /><br />
-            <b>OpenReadStreamAsync</b> is the other way to get at a file's bytes: the runtime reads it from the
-            browser in chunks instead of materializing it whole the way <b>ReadContentAsync</b> does, which is
-            what makes a file too large to hold as a byte array - a video, an archive, a database dump - copyable
-            to disk, hashable or forwardable to a server. It reads at most as many bytes as the browser reported
-            for the file unless a different ceiling is passed, and the stream is the caller's to dispose. On
-            Blazor Server it is not only the faster route but the only one past a handful of kilobytes:
-            <b>ReadContentAsync</b> sends the whole array in one interop message, which the circuit caps at
-            SignalR's <code>MaximumReceiveMessageSize</code> - 32 KB out of the box.
+            <b>Browse</b>, <b>Reset</b> (silent) and <b>RemoveFile</b> (one file or all, raising the events) drive the
+            component from code, and <b>Files</b> and <b>InputId</b> expose its state. <b>OpenReadStreamAsync</b> reads
+            a file in chunks: the way to handle large files, and on Blazor Server anything over SignalR's 32 KB message
+            limit. <b>HideLabel</b> hides the browse button here; the drop indicator moves onto the component.
         </div>
 
         <br />
@@ -472,40 +383,24 @@
 
     <DemoExample Title="Accessibility" RazorCode="@example16RazorCode" Id="example16">
         <div>
-            The browse button is a real button - reached with Tab, activated with Enter or Space, drawing the
-            theme's focus ring, and removed from the tab order while the component is disabled - and the hidden
-            native input points at it through aria-labelledby, so screen readers announce the visible label. The
-            file list carries list and listitem roles and an accessible name of its own - "Selected files" unless
-            <b>FileListAriaLabel</b> says otherwise - each remove button an aria-label naming the file it removes
-            and the focus after that file is gone, and an invalid file is marked by a message, a red rule and,
-            where the palette is stripped away in Windows High Contrast, a dashed rule. A file name is truncated
-            without losing its extension. A visually hidden live region announces every change of the list,
-            so a screen reader user hears how many files were taken and how many failed validation without going
-            looking - and because a live region is skipped when its text repeats verbatim, each update carries an
-            invisible marker so two identical selections in a row are both announced.
-            <b>AnnouncementProvider</b> replaces that sentence (see <BitLink Href="#example11">Localization</BitLink>),
-            and <b>AriaLabel</b> labels the browse button where a short visible label like "Browse" does not say
-            enough on its own. Dragging is never the only way in either - everything a drop does, the browse
-            button does with a single tap - and both it and the remove buttons stay at or above the 24 CSS pixel
-            target size in every <b>Size</b>. A file list capped with
-            <code>--bit-FileInput-file-list-max-height</code> scrolls, and a box a keyboard cannot enter cannot be
-            scrolled: the remove buttons are that way in whenever they are shown, and without them the list takes
-            the tab stop itself.
-        </div>
-
-        <br />
-
-        <BitFileInput Label="Browse or drop a file" AriaLabel="Select a document to attach"
-                      Description="Tab to the button, then press Enter or Space." />
+            The browse and remove buttons are real buttons with focus rings, and the focus survives a removal. The list
+            is named by <b>FileListAriaLabel</b>, each remove button names its file and is described by its error, and a
+            live region announces every change (<b>AnnouncementProvider</b>). <b>AriaLabel</b> names the browse button
+            when its text says too little.
+        </div>
+
+        <br />
+
+        <BitFileInput Label="Browse or drop files"
+                      AriaLabel="Select documents to attach"
+                      Multiple ShowRemoveButton MaxSize="1024 * 1024"
+                      Description="Up to 1 MB each. Tab to the button, then press Enter or Space." />
     </DemoExample>
 
     <DemoExample Title="Variant" RazorCode="@example17RazorCode" Id="example17">
         <div>
-            <b>Variant</b> decides how much of the <b>Color</b> the browse button carries: <b>Fill</b>, the default,
-            paints the whole button, <b>Outline</b> keeps only the rule around it, and <b>Text</b> drops both so the
-            button weighs no more than the text it holds - which is what you want when the file input sits among
-            other form fields and should not read as the primary action of the page. All three fill in on hover and
-            turn into the same dashed drop zone while a file is dragged over them.
+            <b>Variant</b> sets how much of the <b>Color</b> the browse button carries: <b>Fill</b> (the default),
+            <b>Outline</b> or <b>Text</b>. All three fill in on hover and turn into the same dashed drop indicator.
         </div>
 
         <br />
@@ -541,14 +436,9 @@
 
     <DemoExample Title="Drop zone" RazorCode="@example18RazorCode" Id="example18">
         <div>
-            <b>ShowDropZone</b> turns the browse area into the panel a drag-and-drop target is expected to look
-            like - a dashed rule around a glyph and the label - instead of a button that happens to accept drops.
-            It is the same button underneath, so Tab still reaches it and Enter or Space still opens the dialog,
-            and it fills with the theme color while files hover over it exactly as the button does. Because a
-            panel-sized block of the role color is rarely what a drop zone wants, it defaults to the
-            <b>Outline</b> variant; set <b>Variant</b> to take that back. <b>DropZoneIconName</b> swaps the
-            default CloudUpload glyph - or drops it entirely when set to an empty string - and
-            <b>DropZoneIcon</b> takes one from an external icon library.
+            <b>ShowDropZone</b> renders the browse button as a full-width dashed panel with a glyph, still reached with
+            Tab and opened with Enter or Space, and defaults it to <b>Outline</b>. <b>DropZoneIconName</b> swaps the
+            CloudUpload glyph (an empty string removes it); <b>DropZoneIcon</b> takes an external one.
         </div>
 
         <br />
@@ -566,13 +456,8 @@
     <DemoExample Title="Cascading parameters" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode"
                  Id="example19">
         <div>
-            <b>BitParams</b> carries a <b>BitFileInputParams</b> down to every file input under it, so a form, a
-            wizard step or a whole app settles the shared rules once instead of repeating them on every input -
-            which is what the size limits, the localized messages and the size formatter of a real app actually
-            are. What it carries is a default and not an override: an input that writes a parameter for itself
-            keeps its own value and only takes from the cascade what it left unset, so one input steps out of the
-            group without the group having to know. Every parameter is filled in on its own, which is why the
-            second input below takes the limits and the formatter from the cascade while overriding the label.
+            <b>BitParams</b> hands a <b>BitFileInputParams</b> to every file input under it. Its values are defaults,
+            not overrides: an input keeps each parameter it sets itself.
         </div>
 
         <br />
@@ -595,11 +480,8 @@
 
     <DemoExample Title="Color" RazorCode="@example20RazorCode" Id="example20">
         <div>
-            <b>Color</b> picks the theme color of the browse button, its focus ring and the drag-and-drop
-            indicator, with <b>Primary</b> as the default. The semantic colors <b>Success</b>, <b>Warning</b>,
-            <b>Error</b> and friends tie the input to what the selection means, while the <b>Background</b>,
-            <b>Foreground</b> and <b>Border</b> families keep it legible on non-default surfaces like the inverted
-            panel below.
+            <b>Color</b> sets the theme color of the browse button, its focus ring and the drop indicator
+            (<b>Primary</b> by default).
         </div>
         <br />
         <div>
@@ -638,11 +520,8 @@
 
     <DemoExample Title="External Icons" RazorCode="@example21RazorCode" Id="example21">
         <div>
-            Neither glyph is limited to the built-in icon font: <b>RemoveButtonIcon</b> takes a <b>BitIconInfo</b>
-            or a raw CSS class string that can point at any icon library whose stylesheet is loaded, and so does
-            whatever a <b>FileIconSelector</b> returns for the file type glyph. Use <b>BitIconInfo.Fa()</b>,
-            <b>BitIconInfo.Bi()</b> or <b>BitIconInfo.Css()</b> to build one, or stick with the built-in font and
-            just pick a different icon via <b>RemoveButtonIconName</b>.
+            <b>RemoveButtonIcon</b>, and whatever <b>FileIconSelector</b> returns, accept any icon library through
+            <b>BitIconInfo.Fa()</b>, <b>BitIconInfo.Bi()</b> or <b>BitIconInfo.Css()</b>.
         </div>
 
         <br />
@@ -680,9 +559,7 @@
 
     <DemoExample Title="Size" RazorCode="@example22RazorCode" Id="example22">
         <div>
-            <b>Size</b> scales the browse button, the file list items, their thumbnails and their remove buttons
-            together: <b>Small</b> for dense layouts, <b>Medium</b> (the default) for regular forms, and
-            <b>Large</b> where the input is a primary control or aimed at touch.
+            <b>Size</b> scales the browse button, the file items, their thumbnails and their remove buttons together.
         </div>
         <br />
         <div><b>Small</b>:</div>
@@ -700,12 +577,8 @@
 
     <DemoExample Title="Style & Class" RazorCode="@example23RazorCode" Id="example23">
         <div>
-            <b>Style</b> and <b>Class</b> land on the root element. For anything deeper, <b>Styles</b> and
-            <b>Classes</b> reach the individual parts - the browse button, the file list, each file item, its
-            thumbnail, type glyph, name, folder, size, error message and remove button - and their <b>Dragging</b>
-            entry applies to the root only while files are being dragged over the component, which is how the
-            examples below restyle the drop state without touching the idle look. Prefer <b>Classes</b> when your
-            CSS should own states such as hover and focus, which inline styles cannot express.
+            <b>Style</b> and <b>Class</b> target the root, <b>Styles</b> and <b>Classes</b> each part. Their
+            <b>Dragging</b> entry applies to the root only while files hover over it.
         </div>
 
         <br /><br />
@@ -744,9 +617,8 @@
         <br /><br /><br />
 
         <div>
-            The component also reads a set of <BitLink Href="#css-variables-section">CSS variables</BitLink> off its
-            root for what no parameter covers. They inherit, so a value on <code>:root</code> or any ancestor
-            re-skins every file input below it, and one on the <b>Style</b> of an instance re-skins that one alone.
+            The public <BitLink Href="#css-variables-section">CSS variables</BitLink> inherit, so they can be set on
+            <code>:root</code>, on an ancestor or on the <b>Style</b> of one instance.
         </div>
         <br />
         <div>CSS variables:</div>
@@ -777,9 +649,7 @@
 
     <DemoExample Title="RTL" RazorCode="@example24RazorCode" Id="example24">
         <div>
-            Setting <b>Dir</b> to <b>BitDir.Rtl</b> mirrors the whole layout for right-to-left languages - the
-            browse button, the thumbnails, the file names, sizes and remove buttons all follow - so the
-            BitFileInput reads naturally inside an RTL page like the Farsi example below.
+            Setting <b>Dir</b> to <b>BitDir.Rtl</b> mirrors the whole layout.
         </div>
 
         <br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
index 8b0df3a4a26..0c1ee88d890 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
@@ -65,9 +65,7 @@ public partial class BitFileInputDemo
     private readonly string example8RazorCode = @"
 <BitFileInput Label=""Browse images"" Accept=""image/*"" />
 
-<BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@(["".gif"", "".jpg"", "".png"", "".bmp""])"" />
-
-<BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@([""image/*"", ""application/pdf""])"" />
+<BitFileInput Label=""Browse or drop a file"" AllowedExtensions=""@(["".pdf"", ""docx"", ""image/*""])"" />
 
 <BitFileInput Label=""Take a photo"" Accept=""image/*"" Capture=""environment"" />";
 
@@ -430,9 +428,10 @@ private async Task HashTheFirstFile()
 }";
 
     private readonly string example16RazorCode = @"
-<BitFileInput Label=""Browse or drop a file""
-              AriaLabel=""Select a document to attach""
-              Description=""Tab to the button, then press Enter or Space."" />";
+<BitFileInput Label=""Browse or drop files""
+              AriaLabel=""Select documents to attach""
+              Multiple ShowRemoveButton MaxSize=""1024 * 1024""
+              Description=""Up to 1 MB each. Tab to the button, then press Enter or Space."" />";
 
     private readonly string example17RazorCode = @"
 <BitFileInput Variant=""BitVariant.Fill"" Label=""Fill"" />
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
index 20d79a543c0..05b5dcfee20 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
@@ -650,6 +650,30 @@ public void BitFileInputShouldRespectMinSize()
         Assert.IsTrue(files[1].IsValid);
     }
 
+    [TestMethod]
+    public void BitFileInputShouldDescribeTheRemoveButtonOfAnInvalidFileWithItsMessage()
+    {
+        SetupFiles([new() { Name = "small.txt", Size = 5, FileId = "1" },
+                    new() { Name = "big.txt", Size = 50, FileId = "2" }]);
+
+        var component = RenderComponent<BitFileInput>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, true);
+            parameters.Add(p => p.MinSize, 10);
+            parameters.Add(p => p.MinSizeErrorMessage, "too small");
+            parameters.Add(p => p.ShowRemoveButton, true);
+        });
+
+        component.Find(".bit-fin-fi").Change(string.Empty);
+
+        var removeButtons = component.FindAll(".bit-fin-rbt");
+        var describedBy = removeButtons[0].GetAttribute("aria-describedby");
+
+        Assert.IsFalse(string.IsNullOrEmpty(describedBy));
+        Assert.AreEqual("too small", component.Find($"[id='{describedBy}']").TextContent.Trim());
+        Assert.IsFalse(removeButtons[1].HasAttribute("aria-describedby"));
+    }
+
     [TestMethod]
     public void BitFileInputShouldRespectAllowDuplicatesWithDuplicateErrorMessage()
     {