src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Collapse/BitCollapse.razor (2)

10-13: Enhance accessibility attributes for the collapsible region.

The role="region" is good, but additional ARIA attributes would improve accessibility:

 <div role="region"
+     aria-expanded="@Expanded"
      style="@Styles?.Content"
      class="bit-col-con @(Expanded ? "bit-col-cex" : "bit-col-cco") @Classes?.Content"
      tabindex="@(IsEnabled ? 0 : -1)">

---

4-9: Consider adding keyboard interaction support.

The root element should handle keyboard events (Enter/Space) to toggle the collapse state when focused.

 <div @ref="RootElement" @attributes="HtmlAttributes"
      id="@_Id"
      style="@StyleBuilder.Value"
      class="@ClassBuilder.Value"
      dir="@Dir?.ToString().ToLower()"
-     aria-label="@AriaLabel">
+     aria-label="@AriaLabel"
+     @onkeydown="@OnKeyDown"
+     role="button">

src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Collapse/BitCollapseClassStyles.cs (1)

3-19: Consider adding validation and helper methods.

The class could benefit from:

1. Method to validate CSS class names
2. Helper method to combine multiple classes
3. Constructor with default values

 public class BitCollapseClassStyles
 {
+    public BitCollapseClassStyles()
+    {
+        Root = string.Empty;
+        Expanded = string.Empty;
+        Content = string.Empty;
+    }
+
+    private static string ValidateCssClass(string? value)
+    {
+        if (string.IsNullOrWhiteSpace(value)) return string.Empty;
+        // Add CSS class validation logic if needed
+        return value;
+    }
+
     /// <summary>
     /// Custom CSS classes/styles for the root element of the BitCollapse.
     /// </summary>
-    public string? Root { get; set; }
+    public string? Root 
+    { 
+        get => _root;
+        set => _root = ValidateCssClass(value);
+    }
+    private string? _root;

src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Collapse/BitCollapse.razor.cs (1)

21-22: Add event callback for state changes.

Consider adding an event callback to notify parent components of state changes.

 [Parameter, ResetClassBuilder, ResetStyleBuilder]
 public bool Expanded { get; set; }
+
+[Parameter]
+public EventCallback<bool> ExpandedChanged { get; set; }

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Collapse/BitCollapseDemo.razor.cs (2)

77-80: Add state change error handling.

Consider demonstrating error handling for state changes in the demo.

 private void OnExpandCollapseClick()
 {
-    expanded = !expanded;
+    try
+    {
+        expanded = !expanded;
+        StateHasChanged();
+    }
+    catch (Exception ex)
+    {
+        // Demo error handling
+        Console.WriteLine($"Error toggling state: {ex.Message}");
+    }
 }

---

5-39: Add performance optimization examples.

Consider adding examples demonstrating performance optimization techniques:

1. Lazy loading of content
2. Virtualization for large content
3. Debounced collapse/expand

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Collapse/BitCollapseDemo.razor.samples.cs (1)

17-32: Consider using CSS variables for better maintainability.

While the example effectively demonstrates both inline styles and CSS classes, consider:

1. Using CSS variables instead of hardcoded colors (e.g., var(--bit-primary-color) instead of #0054C6)
2. Preferring CSS classes over inline styles for better maintainability

-    background-color: #333;
+    background-color: var(--bit-background-color);
-    border: 1px solid #ff0000;
+    border: 1px solid var(--bit-error-color);

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Collapse/BitCollapseDemo.razor (1)

22-49: Consider extracting repeated Lorem ipsum text to a constant.

The examples contain duplicate Lorem ipsum text. Consider extracting it to a constant in the code-behind file to improve maintainability.

+private const string LoremIpsumText = "Lorem ipsum dolor sit amet...";
-Lorem ipsum dolor sit amet, consectetur adipiscing elit...
+@LoremIpsumText

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Collapse/BitCollapseDemo.razor.scss (1)

4-8: Use theme variables for consistent styling.

Replace hardcoded color values with theme variables to maintain consistency with the design system.

 .custom-expanded {
     padding: 10px;
-    background-color: #808080;
-    border: 1px solid #0054C6;
+    background-color: $clr-bg-sec;
+    border: 1px solid $clr-pri;
 }

src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Collapse/BitCollapse.scss (1)

22-22: Consider making transition duration configurable.

The transition duration is hardcoded to 300ms. Consider making it configurable through a CSS variable to allow customization.

-    transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition: all var(--bit-collapse-transition-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1) 0ms;

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro