ngx-strata 0.2.0 → 0.2.2

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

@@ -0,0 +1,46 @@
+# ngx-strata: notification Feature
+
+This file contains the AI documentation for the `notification` feature and its related components.
+
+## Notification (`<st-notification>`)
+- **Selector**: `st-notification`
+- **Imports**: `StrataNotificationComponent`
+
+## NotificationContainer (`<st-notification-container>`)
+- **Selector**: `st-notification-container`
+- **Imports**: `StrataNotificationContainerComponent`
+
+## Usage Example
+
+Notifications are opened programmatically using the \`NotificationService\`. Do **NOT** use \`<st-notification>\` declaratively in your templates.
+
+### Triggering a Notification (TypeScript)
+\`\`\`typescript
+import { Component, inject } from '@angular/core';
+import { NotificationService } from 'ngx-strata';
+
+@Component({...})
+export class MyComponent {
+  private notificationService = inject(NotificationService);
+
+  showSuccess() {
+    this.notificationService.open({
+      title: 'Upload Complete',
+      message: 'Your file has been successfully uploaded.',
+      theme: 'success',
+      icon: 'check_circle'
+    });
+  }
+
+  showError() {
+    this.notificationService.open({
+      title: 'Upload Failed',
+      message: 'There was a network error during upload.',
+      theme: 'danger',
+      icon: 'error'
+    });
+  }
+}
+\`\`\`
+
+> **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/number-display.md

@@ -0,0 +1,26 @@
+# ngx-strata: number-display Feature
+
+This file contains the AI documentation for the `number-display` feature and its related components.
+
+## NumberDisplay (`<st-number-display>`)
+- **Selector**: `st-number-display`
+- **Imports**: `StrataNumberDisplayComponent`
+- **Inputs**:
+  - `[value] (number)`
+  - `[decimals] (number)`
+  - `[changedValue] (boolean)`
+  - `[showPlus] (boolean)`
+  - `[deemphasizeDecimals] (boolean)`
+
+## Usage Example
+
+```html
+<st-number-display 
+  [value]="1234.56" 
+  [decimals]="2" 
+  [showPlus]="true" 
+  [deemphasizeDecimals]="true">
+</st-number-display>
+```
+
+> **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/overlay.md

@@ -0,0 +1,20 @@
+# ngx-strata: overlay Feature
+
+This file contains the AI documentation for the `overlay` feature and its related components.
+
+## Overlay (`[stOverlay]`)
+- **Selector**: `[stOverlay]`
+- **Imports**: `StrataOverlayDirective`
+- **Inputs**:
+  - `[stOverlay] (TemplateRef<unknown)`
+  - `[overlayPlacement] (Placement)`
+  - `[overlayOffset] (any)`
+
+## Usage Example
+
+```html
+<!-- Core overlay primitive used internally by tooltips/action menus -->
+<st-overlay></st-overlay>
+```
+
+> **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/pagination.md

@@ -0,0 +1,23 @@
+# ngx-strata: pagination Feature
+
+This file contains the AI documentation for the `pagination` feature and its related components.
+
+## Pagination (`<st-pagination>`)
+- **Selector**: `st-pagination`
+- **Imports**: `StrataPaginationComponent`
+- **Inputs**:
+  - `[totalPages] (number)`
+  - `[hideNextPreviousAtStartEnd] (any)`
+- **Outputs**:
+  - `(pageSelected)`
+
+## Usage Example
+
+```html
+<st-pagination 
+  [totalPages]="10" 
+  (pageSelected)="loadPage($event)">
+</st-pagination>
+```
+
+> **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/progress.md

@@ -0,0 +1,46 @@
+# ngx-strata: progress Feature
+
+This file contains the AI documentation for the `progress` feature and its related components.
+
+## ProgressLinear (`<st-progress-linear>`)
+- **Selector**: `st-progress-linear`
+- **Imports**: `StrataProgressLinearComponent`
+- **Inputs**:
+  - `[min] (any)`
+  - `[max] (any)`
+  - `[value] (number)`
+  - `[showLabel] (any)`
+  - `[labelFormat] (ProgressLinearLabelFormat)`
+  - `[growDirection] (ProgressLinearGrowDirection)`
+
+## ProgressRadial (`<st-progress-radial>`)
+- **Selector**: `st-progress-radial`
+- **Imports**: `StrataProgressRadialComponent`
+- **Inputs**:
+  - `[min] (any)`
+  - `[max] (any)`
+  - `[value] (number)`
+  - `[showLabel] (any)`
+  - `[labelFormat] (ProgressRadialLabelFormat)`
+  - `[size] (any)`
+  - `[strokeWidth] (any)`
+
+> **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.
+## Usage Example
+
+```html
+<st-progress-linear 
+  [value]="45" 
+  [min]="0" 
+  [max]="100" 
+  [showLabel]="true">
+</st-progress-linear>
+
+<st-progress-radial 
+  [value]="75" 
+  [size]="'md'" 
+  [strokeWidth]="4">
+</st-progress-radial>
+```
+
+> **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/radio.md

@@ -0,0 +1,29 @@
+# ngx-strata: radio Feature
+
+This file contains the AI documentation for the `radio` feature and its related components.
+
+## Radio (`<st-radio>`)
+- **Selector**: `st-radio`
+- **Imports**: `StrataRadioComponent`
+- **Inputs**:
+  - `[value] (string)`
+  - `[label] (string | undefined)`
+  - `[disabled] (any)`
+- **Outputs**:
+  - `(select)`
+
+## RadioGroup (`<st-radio-group>`)
+- **Selector**: `st-radio-group`
+- **Imports**: `StrataRadioGroupComponent`
+
+## Usage Example
+
+```html
+<st-radio-group [(ngModel)]="selectedColor">
+  <st-radio value="red" label="Red"></st-radio>
+  <st-radio value="green" label="Green"></st-radio>
+  <st-radio value="blue" label="Blue" [disabled]="true"></st-radio>
+</st-radio-group>
+```
+
+> **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/segmented-control.md

@@ -0,0 +1,38 @@
+# ngx-strata: segmented-control Feature
+
+This file contains the AI documentation for the `segmented-control` feature and its related components.
+
+## SegmentedControl (`<st-segmented-control>`)
+- **Selector**: `st-segmented-control`
+- **Imports**: `StrataSegmentedControlComponent`
+- **Inputs**:
+  - `[fullWidth] (any)`
+
+## SegmentedControlItem (`<st-segmented-control-item>`)
+- **Selector**: `st-segmented-control-item`
+- **Imports**: `StrataSegmentedControlItemComponent`
+- **Inputs**:
+  - `[text] (string)`
+  - `[disabled] (any)`
+- **Outputs**:
+  - `(selectionChanged)`
+
+## Usage Example
+
+```html
+<st-segmented-control [fullWidth]="false">
+  <st-segmented-control-item 
+    text="List View" 
+    [selected]="view === 'list'" 
+    (selectionChanged)="view = 'list'">
+  </st-segmented-control-item>
+  
+  <st-segmented-control-item 
+    text="Grid View" 
+    [selected]="view === 'grid'" 
+    (selectionChanged)="view = 'grid'">
+  </st-segmented-control-item>
+</st-segmented-control>
+```
+
+> **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/shell.md

@@ -0,0 +1,18 @@
+# ngx-strata: shell Feature
+
+This file contains the AI documentation for the `shell` feature and its related components.
+
+## Shell (`<st-shell>`)
+- **Selector**: `st-shell`
+- **Imports**: `StrataShellComponent`
+
+## Usage Example
+
+```html
+<st-shell>
+  <st-sidemenu slot="sidebar">...</st-sidemenu>
+  <div slot="content">Main App Content</div>
+</st-shell>
+```
+
+> **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/sidemenu.md

@@ -0,0 +1,41 @@
+# ngx-strata: sidemenu Feature
+
+This file contains the AI documentation for the `sidemenu` feature and its related components.
+
+## SidemenuItem (`[stSidemenuItem]`)
+- **Selector**: `[stSidemenuItem]`
+- **Imports**: `StrataSidemenuItemDirective`
+- **Inputs**:
+  - `[active] (boolean)`
+
+## Sidemenu (`<st-sidemenu>`)
+- **Selector**: `st-sidemenu`
+- **Imports**: `StrataSidemenuComponent`
+
+## SidemenuItemGroup (`<st-sidemenu-item-group>`)
+- **Selector**: `st-sidemenu-item-group`
+- **Imports**: `StrataSidemenuItemGroupComponent`
+- **Inputs**:
+  - `[label] (string)`
+
+## SidemenuSection (`<st-sidemenu-section>`)
+- **Selector**: `st-sidemenu-section`
+- **Imports**: `StrataSidemenuSectionComponent`
+- **Inputs**:
+  - `[label] (string)`
+
+> **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.
+## Usage Example
+
+```html
+<st-sidemenu>
+  <st-sidemenu-section label="Main Menu">
+    <st-sidemenu-item-group label="Dashboard">
+      <st-item>Overview</st-item>
+      <st-item>Analytics</st-item>
+    </st-sidemenu-item-group>
+  </st-sidemenu-section>
+</st-sidemenu>
+```
+
+> **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/single-select.md

@@ -0,0 +1,45 @@
+# ngx-strata: single-select Feature
+
+This file contains the AI documentation for the `single-select` feature and its related components.
+
+## SelectTrigger (`[stSelectTrigger]`)
+- **Selector**: `[stSelectTrigger]`
+- **Imports**: `StrataSelectTriggerDirective`
+
+## SelectItem (`<st-select-item>`)
+- **Selector**: `st-select-item`
+- **Imports**: `StrataSelectItemComponent`
+- **Inputs**:
+  - `[value] (unknown)`
+  - `[text] (string)`
+- **Outputs**:
+  - `(itemClicked)`
+
+## 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)`
+- **Outputs**:
+  - `(itemSelected)`
+
+## Usage Example
+
+```html
+<st-single-select 
+  label="Country" 
+  placeholder="Select a country" 
+  [searchable]="true"
+  (itemSelected)="setCountry($event)">
+  <st-select-item value="us" text="United States"></st-select-item>
+  <st-select-item value="ca" text="Canada"></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

@@ -0,0 +1,24 @@
+# ngx-strata: slider Feature
+
+This file contains the AI documentation for the `slider` feature and its related components.
+
+## Slider (`<st-slider>`)
+- **Selector**: `st-slider`
+- **Imports**: `StrataSliderComponent`
+- **Inputs**:
+  - `[minimum] (number)`
+  - `[maximum] (number)`
+  - `[step] (number | 'none' | undefined)`
+
+## Usage Example
+
+```html
+<st-slider 
+  [minimum]="0" 
+  [maximum]="100" 
+  [step]="5" 
+  [(ngModel)]="volume">
+</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/spinner.md

@@ -0,0 +1,17 @@
+# ngx-strata: spinner Feature
+
+This file contains the AI documentation for the `spinner` feature and its related components.
+
+## Spinner (`<st-spinner>`)
+- **Selector**: `st-spinner`
+- **Imports**: `StrataSpinnerComponent`
+- **Inputs**:
+  - `[size] (SpinnerSize)`
+
+## Usage Example
+
+```html
+<st-spinner size="md"></st-spinner>
+```
+
+> **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/tabs.md

@@ -0,0 +1,27 @@
+# ngx-strata: tabs Feature
+
+This file contains the AI documentation for the `tabs` feature and its related components.
+
+## TabItem (`<st-tab-item>`)
+- **Selector**: `st-tab-item`
+- **Imports**: `StrataTabItemComponent`
+- **Inputs**:
+  - `[text] (string)`
+  - `[disabled] (any)`
+- **Outputs**:
+  - `(selectionChanged)`
+
+## Tabs (`<st-tabs>`)
+- **Selector**: `st-tabs`
+- **Imports**: `StrataTabsComponent`
+
+## Usage Example
+
+```html
+<st-tabs>
+  <st-tab-item text="General" [selected]="tab === 'general'" (selectionChanged)="tab = 'general'"></st-tab-item>
+  <st-tab-item text="Security" [selected]="tab === 'security'" (selectionChanged)="tab = 'security'"></st-tab-item>
+</st-tabs>
+```
+
+> **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/tag.md

@@ -0,0 +1,17 @@
+# ngx-strata: tag Feature
+
+This file contains the AI documentation for the `tag` feature and its related components.
+
+## Tag (`<st-tag>`)
+- **Selector**: `st-tag`
+- **Imports**: `StrataTagComponent`
+- **Inputs**:
+  - `[size] (TagSize)`
+
+## Usage Example
+
+```html
+<st-tag size="md">New Feature</st-tag>
+```
+
+> **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/text-stack.md

@@ -0,0 +1,21 @@
+# ngx-strata: text-stack Feature
+
+This file contains the AI documentation for the `text-stack` feature and its related components.
+
+## TextStack (`<st-text-stack>`)
+- **Selector**: `st-text-stack`
+- **Imports**: `StrataTextStackComponent`
+- **Inputs**:
+  - `[overflow] (TextStackOverflow)`
+
+> **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.
+## Usage Example
+
+```html
+<st-text-stack overflow="truncate">
+  <span class="st-body-m st-bold">Primary Text</span>
+  <span class="st-body-s">Secondary subtitle</span>
+</st-text-stack>
+```
+
+> **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/theming.md

@@ -0,0 +1,19 @@
+# ngx-strata: theming Feature
+
+This file contains the AI documentation for the `theming` feature and its related components.
+
+## Theme (`[stTheme]`)
+- **Selector**: `[stTheme]`
+- **Imports**: `StrataThemeDirective`
+- **Inputs**:
+  - `[stTheme] (Theme)`
+
+> **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.
+## Usage Example
+
+```html
+<!-- Theming is typically applied via CSS variables, not declarative components -->
+<div class="st-bg-raised st-text-primary">Content</div>
+```
+
+> **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

@@ -0,0 +1,22 @@
+# ngx-strata: toggle Feature
+
+This file contains the AI documentation for the `toggle` feature and its related components.
+
+## Toggle (`<st-toggle>`)
+- **Selector**: `st-toggle`
+- **Imports**: `StrataToggleComponent`
+- **Inputs**:
+  - `[label] (string | undefined)`
+  - `[labelPosition] ('before' | 'after')`
+
+## Usage Example
+
+```html
+<st-toggle 
+  label="Enable Notifications" 
+  labelPosition="after" 
+  [(ngModel)]="notificationsEnabled">
+</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.