ngx-strata 0.3.0 → 0.4.1

package/skills/ngx-strata/components/single-select.md

@@ -10,36 +10,68 @@ This file contains the AI documentation for the `single-select` feature and its
 - **Selector**: `st-select-item`
 - **Imports**: `StrataSelectItemComponent`
 - **Inputs**:
-  - `[value] (unknown)`
-  - `[text] (string)`
+  - `[value] (unknown)`: Value represented by the item.
+  - `[text] (string)`: Display text for trigger display and search filtering.
 - **Outputs**:
-  - `(itemClicked)`
+  - `(itemClicked)`: Emitted when the item is clicked.
 
 ## SingleSelect (`<st-single-select>`)
 - **Selector**: `st-single-select`
 - **Imports**: `StrataSingleSelectComponent`
-- **Inputs**:
-  - `[placeholder] (string)`
-  - `[placement] (Placement)`
-  - `[fullWidth] (boolean)`
-  - `[label] (string)`
-  - `[name] (string)`
-  - `[searchable] (any)`
-  - `[searchPlaceholder] (any)`
+- **Inputs & Models**:
+  - `[(selected)] (model<any>)`: Selected item value.
+  - `[placeholder] (string)`: Placeholder text when unselected (default `'Select'`).
+  - `[placement] (Placement)`: Popover placement (default `'bottom-start'`).
+  - `[fullWidth] (boolean)`: Expands dropdown to 100% width.
+  - `[label] (string | undefined)`: Accessible label displayed above select.
+  - `[name] (string | undefined)`: Field name.
+  - `[disabled] (boolean)`: Disables interaction and dropdown opening.
+  - `[searchable] (boolean)`: Enables search filter input inside menu.
+  - `[searchPlaceholder] (string)`: Placeholder for search filter input.
 - **Outputs**:
-  - `(itemSelected)`
+  - `(itemSelected)`: Emitted with item value on selection.
+
+## Form Integration
+Implements `ControlValueAccessor` (CVA). Compatible with Reactive Forms (`formControlName`, `[formControl]`) and template-driven forms (`[(ngModel)]`).
 
-## Usage Example
+## Usage Examples
 
+### 1. Basic Two-Way Binding
 ```html
 <st-single-select 
   label="Country" 
   placeholder="Select a country" 
-  [searchable]="true"
-  (itemSelected)="setCountry($event)">
+  [(selected)]="selectedCountry">
   <st-select-item value="us" text="United States"></st-select-item>
   <st-select-item value="ca" text="Canada"></st-select-item>
+  <st-select-item value="mx" text="Mexico"></st-select-item>
+</st-single-select>
+```
+
+### 2. Reactive Forms Integration
+```html
+<st-single-select 
+  label="Role" 
+  placeholder="Select user role" 
+  [formControl]="roleControl">
+  <st-select-item value="admin" text="Administrator"></st-select-item>
+  <st-select-item value="editor" text="Editor"></st-select-item>
+  <st-select-item value="viewer" text="Viewer"></st-select-item>
+</st-single-select>
+```
+
+### 3. Searchable Dropdown
+```html
+<st-single-select 
+  label="Timezone" 
+  [searchable]="true"
+  searchPlaceholder="Filter timezones..."
+  [(selected)]="selectedTimezone">
+  @for (tz of timezones(); track tz.id) {
+    <st-select-item [value]="tz.id" [text]="tz.name">{{ tz.name }}</st-select-item>
+  }
 </st-single-select>
 ```
 
 > **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.
+

package/skills/ngx-strata/components/slider.md

@@ -5,20 +5,49 @@ This file contains the AI documentation for the `slider` feature and its related
 ## Slider (`<st-slider>`)
 - **Selector**: `st-slider`
 - **Imports**: `StrataSliderComponent`
-- **Inputs**:
-  - `[minimum] (number)`
-  - `[maximum] (number)`
-  - `[step] (number | 'none' | undefined)`
+- **Inputs & Models**:
+  - `[(value)] (model<number>)`: Current numeric value (default `0`).
+  - `[minimum] (number)`: Minimum slider range bound (default `0`).
+  - `[maximum] (number)`: Maximum slider range bound (default `100`).
+  - `[step] (number | 'none')`: Step increment, or `'none'` for continuous input (default `1`).
+  - `[disabled] (boolean)`: Disables interaction and range sliding.
+- **Outputs**:
+  - `(valueChange)`: Emitted whenever the slider position changes.
 
-## Usage Example
+## Form Integration
+Implements `ControlValueAccessor` (CVA). Compatible with Reactive Forms (`formControlName`, `[formControl]`) and template-driven forms (`[(ngModel)]`).
 
+## Usage Examples
+
+### 1. Two-Way Model Binding
 ```html
 <st-slider 
   [minimum]="0" 
   [maximum]="100" 
   [step]="5" 
-  [(ngModel)]="volume">
+  [(value)]="volume">
+</st-slider>
+```
+
+### 2. Reactive Forms Integration
+```html
+<st-slider 
+  [minimum]="1" 
+  [maximum]="10" 
+  [step]="1" 
+  [formControl]="ratingControl">
+</st-slider>
+```
+
+### 3. Continuous / Fine-Grained
+```html
+<st-slider 
+  [minimum]="0" 
+  [maximum]="1" 
+  step="none" 
+  [(value)]="opacity">
 </st-slider>
 ```
 
 > **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.
+

package/skills/ngx-strata/components/stepper.md

@@ -0,0 +1,64 @@
+# ngx-strata: stepper Feature
+
+This file contains the AI documentation for the `stepper` feature and its related components.
+
+## Stepper (`<st-stepper>`)
+- **Selector**: `st-stepper`
+- **Imports**: `StrataStepperComponent`
+- **Inputs & Models**:
+  - `[(currentStep)] (model<number>)`: Current active step index (0-indexed).
+  - `[orientation] (StepperOrientation)`: `'horizontal' | 'vertical'`. Default `'horizontal'`.
+  - `[size] (StepperSize)`: `'sm' | 'md'`. Default `'md'`.
+  - `[theme] (Theme)`: `'default' | 'brand' | 'success' | 'warning' | 'danger' | 'info'`. Default `'default'` (neutral). Supports `[stTheme]` directive as well.
+  - `[showCheckmarkOnCompleted] (boolean)`: Display checkmark icon on completed steps. Default `true`.
+- **Methods**:
+  - `next()`: Advance to next step.
+  - `previous()`: Step back.
+  - `reset()`: Reset to first step (0).
+  - `goTo(index: number)`: Jump to specific step.
+
+## Step (`<st-step>`)
+- **Selector**: `st-step`
+- **Imports**: `StrataStepComponent`
+- **Inputs**:
+  - `[label] (string, required)`: Primary step title text.
+  - `[description] (string | undefined)`: Optional subtitle / secondary text.
+  - `[icon] (string | undefined)`: Optional icon name from registered icons. When omitted, steps are numbered 1, 2, 3...
+  - `[state] (StepState | undefined)`: Manual override for step state (`'completed' | 'current' | 'future' | 'error'`). By default derived from `currentStep`.
+  - `[keepIconOnCompleted] (boolean)`: When true, retains `icon` on completion instead of replacing with checkmark.
+
+## Usage Examples
+
+### 1. Horizontal Numbered Stepper
+```html
+<st-stepper [(currentStep)]="activeStep">
+  <st-step label="Account" description="Enter email & password"></st-step>
+  <st-step label="Profile" description="Add personal info"></st-step>
+  <st-step label="Review" description="Confirm details"></st-step>
+</st-stepper>
+```
+
+### 2. Horizontal Icon Stepper
+```html
+<st-stepper [(currentStep)]="activeStep">
+  <st-step label="Security" icon="lock"></st-step>
+  <st-step label="Details" icon="search"></st-step>
+  <st-step label="Finish" icon="star"></st-step>
+</st-stepper>
+```
+
+### 3. Vertical Timeline Stepper with Step Body Content
+```html
+<st-stepper orientation="vertical" [(currentStep)]="activeStep">
+  <st-step label="Order Placed" description="Sep 6, 2026, 10:30 AM">
+    <p>Your order has been placed and received by the warehouse.</p>
+  </st-step>
+  <st-step label="Processing" description="Packing items">
+    <p>We are packaging your order.</p>
+  </st-step>
+  <st-step label="Shipped" description="Out for delivery"></st-step>
+  <st-step label="Delivered" description="Delivered to your address"></st-step>
+</st-stepper>
+```
+
+> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.

package/skills/ngx-strata/components/toggle.md

@@ -5,14 +5,20 @@ This file contains the AI documentation for the `toggle` feature and its related
 ## Toggle (`<st-toggle>`)
 - **Selector**: `st-toggle`
 - **Imports**: `StrataToggleComponent`
-- **Inputs**:
-  - `[(checked)] (boolean)`
-  - `[label] (string | undefined)`
-  - `[labelPosition] ('before' | 'after')`
-  - `[disabled] (boolean)`
+- **Inputs & Models**:
+  - `[(checked)] (model<boolean>)`: Whether the switch is active (default `false`).
+  - `[label] (string | undefined)`: Optional label text.
+  - `[labelPosition] ('before' | 'after')`: Label placement relative to the switch (default `'after'`).
+  - `[disabled] (boolean)`: Disables user interaction.
+- **Outputs**:
+  - `(checkedChange)`: Emitted whenever the toggle state changes.
 
-## Usage Example
+## Form Integration
+Implements `ControlValueAccessor` (CVA). Compatible with Reactive Forms (`formControlName`, `[formControl]`) and template-driven forms (`[(ngModel)]`).
 
+## Usage Examples
+
+### 1. Two-Way State Binding
 ```html
 <st-toggle 
   label="Enable Notifications" 
@@ -21,5 +27,20 @@ This file contains the AI documentation for the `toggle` feature and its related
 </st-toggle>
 ```
 
+### 2. Reactive Forms Integration
+```html
+<st-toggle 
+  label="Dark Mode" 
+  [formControl]="darkModeControl">
+</st-toggle>
+```
+
+### 3. Projected Label Content
+```html
+<st-toggle [checked]="syncEnabled">
+  <span>Auto-Sync <strong>Cloud Data</strong></span>
+</st-toggle>
+```
 
 > **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.
+