first commit

docs/components/forms/SbSelectOption.md

@@ -0,0 +1,60 @@
+# SbSelectOption
+
+An option item for use within **SbSimpleSelect**. Must be used as a child of SbSimpleSelect; it registers itself and does not render visible markup on its own.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| Value | TValue? | null | The value of this option (must match SbSimpleSelect TValue) |
+| ChildContent | RenderFragment? | null | Display content for the option (text or markup) |
+| Disabled | bool | false | Whether this option is disabled and not selectable |
+
+## CSS Classes
+
+- `sb-select-option` - Base class
+- `sb-select-option--selected` - Selected state
+- `sb-select-option--disabled` - Disabled state
+
+## Accessibility
+
+- Uses `role="option"`
+- `aria-selected` indicates selection state
+
+## Examples
+
+### Basic Usage
+
+See [SbSimpleSelect](./SbSimpleSelect.md) for complete examples.
+
+```razor
+<SbSimpleSelect TValue="string" @bind-Value="color">
+    <SbSelectOption TValue="string" Value="red">Red</SbSelectOption>
+    <SbSelectOption TValue="string" Value="green">Green</SbSelectOption>
+    <SbSelectOption TValue="string" Value="blue">Blue</SbSelectOption>
+</SbSimpleSelect>
+```
+
+### With Rich Content (ChildContent)
+
+```razor
+<SbSimpleSelect TValue="string" @bind-Value="priority">
+    <SbSelectOption TValue="string" Value="low">
+        <span class="priority-dot low"></span> Low Priority
+    </SbSelectOption>
+    <SbSelectOption TValue="string" Value="medium">
+        <span class="priority-dot medium"></span> Medium Priority
+    </SbSelectOption>
+    <SbSelectOption TValue="string" Value="high">
+        <span class="priority-dot high"></span> High Priority
+    </SbSelectOption>
+</SbSimpleSelect>
+```
+
+### Disabled Option
+
+```razor
+<SbSelectOption TValue="string" Value="unavailable" Disabled="true">
+    Temporarily Unavailable
+</SbSelectOption>
+```