ngx-strata 0.2.1 → 0.2.3

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "ngx-strata",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A simple UI framework for quickly prototyping angular applications with a bit of flair.",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/common": "^21.2.0",
-    "@angular/core": "^21.2.0",
+    "@angular/common": ">=22.0.0",
+    "@angular/core": ">=22.0.0",
     "@floating-ui/dom": "^1.1.0"
   },
   "dependencies": {
@@ -31,5 +31,6 @@
     }
   },
   "module": "fesm2022/ngx-strata.mjs",
-  "typings": "types/ngx-strata.d.ts"
+  "typings": "types/ngx-strata.d.ts",
+  "type": "module"
 }

package/skills/ngx-strata/SKILL.md

@@ -5,31 +5,29 @@ description: "Instructions for using the ngx-strata UI component library"
 
 # ngx-strata Component Manual (Index)
 
-You are working in a project that uses **ngx-strata**, a modern Angular UI component library. Use this index to locate the specific component documentation you need.
+You are working in a project that uses **ngx-strata**, a modern Angular UI
+component library. Use this index to locate the specific component documentation
+you need.
 
 ## Global Setup
 
 ### 1. Style Setup
-Ensure the core Strata CSS is included in your global styles (e.g., \`styles.scss\` or \`angular.json\`):
-\`\`\`scss
-@import 'ngx-strata/strata.css';
-\`\`\`
+
+Ensure the core Strata CSS is included in your global styles (e.g.,
+\`styles.scss\` or \`angular.json\`): \`\`\`scss @import
+'ngx-strata/strata.css'; \`\`\`
 
 ### 2. Provider Setup
-The application should be configured with Strata. Use the global provider in \`app.config.ts\`:
-
-\`\`\`typescript
-import { provideStrata } from 'ngx-strata';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideStrata({
-      includeBaseIcons: true,
-      tooltipDelayMs: 500
-    })
-  ]
-};
-```
+
+The application should be configured with Strata. Use the global provider in
+\`app.config.ts\`:
+
+\`\`\`typescript import { provideStrata } from 'ngx-strata';
+
+export const appConfig: ApplicationConfig = { providers: [ provideStrata({
+includeBaseIcons: true, tooltipDelayMs: 500 }) ] };
+
+````
 Custom icons should be registered using the `provideIcons()` provider during bootstrap.
 
 ### 3. Application Shell
@@ -37,70 +35,88 @@ Wrap your root application component (usually `app.component.html`) in the Strat
 
 ```html
 <st-shell>
-  <!-- Optional Sidebar -->
-  <st-sidemenu slot="sidebar">...</st-sidemenu>
-  
   <!-- Main Content -->
-  <div slot="content">
-    <router-outlet></router-outlet>
-  </div>
+  <router-outlet></router-outlet>
 </st-shell>
-```
+````
 
 ---
 
 ## Theming & Variables
 
-Do not hardcode colors or spacing values. Always use the built-in Strata CSS variables to ensure the app matches the active theme (light/dark mode).
+Do not hardcode colors or spacing values. Always use the built-in Strata CSS
+variables to ensure the app matches the active theme (light/dark mode).
 
 **Key Color Variables:**
+
 - `--st-color-bg-default`: Standard background.
 - `--st-color-bg-raised`: Slightly elevated background (cards, modals).
 - `--st-color-text-primary`: Standard text.
 - `--st-color-text-secondary`: Muted/secondary text.
 - `--st-color-text-tertiary`: Disabled/faded text.
-- `--st-brand`: Primary brand accent color.
+- `--st-color-accent-default`: Primary brand accent color.
 
 **Key Spacing Variables:**
+
 - `--st-space-1` (4px) to `--st-space-10` (40px)
 
 ---
 
 ## Component Index
 
-To save tokens and context window space, the detailed API and usage instructions for each component are stored in separate files.
+To save tokens and context window space, the detailed API and usage instructions
+for each component are stored in separate files.
 
 **Before using a component, read its dedicated file:**
 
-- **Accordion** (`st-accordion-group`): Read [`components/accordion.md`](components/accordion.md)
-- **Action-menu** (`st-action-menu`): Read [`components/action-menu.md`](components/action-menu.md)
+- **Accordion** (`st-accordion-group`): Read
+  [`components/accordion.md`](components/accordion.md)
+- **Action-menu** (`st-action-menu`): Read
+  [`components/action-menu.md`](components/action-menu.md)
 - **Alert** (`st-alert`): Read [`components/alert.md`](components/alert.md)
 - **Avatar** (`st-avatar`): Read [`components/avatar.md`](components/avatar.md)
-- **Breadcrumb** (`st-breadcrumb`): Read [`components/breadcrumb.md`](components/breadcrumb.md)
+- **Breadcrumb** (`st-breadcrumb`): Read
+  [`components/breadcrumb.md`](components/breadcrumb.md)
 - **Button** (`[stButton]`): Read [`components/button.md`](components/button.md)
 - **Card** (`st-card`): Read [`components/card.md`](components/card.md)
-- **Checkbox** (`st-checkbox`): Read [`components/checkbox.md`](components/checkbox.md)
-- **Divider** (`st-divider`): Read [`components/divider.md`](components/divider.md)
+- **Checkbox** (`st-checkbox`): Read
+  [`components/checkbox.md`](components/checkbox.md)
+- **Divider** (`st-divider`): Read
+  [`components/divider.md`](components/divider.md)
 - **Icon** (`st-icon`): Read [`components/icon.md`](components/icon.md)
-- **Input-field** (`[stAutoResize]`): Read [`components/input-field.md`](components/input-field.md)
+- **Input-field** (`[stAutoResize]`): Read
+  [`components/input-field.md`](components/input-field.md)
 - **Item** (`st-item`): Read [`components/item.md`](components/item.md)
 - **Kbd** (`st-kbd`): Read [`components/kbd.md`](components/kbd.md)
-- **Message-state** (`st-message-state`): Read [`components/message-state.md`](components/message-state.md)
-- **Modal** (`st-alert-content`): Read [`components/modal.md`](components/modal.md)
-- **Notification** (`st-notification`): Read [`components/notification.md`](components/notification.md)
-- **Number-display** (`st-number-display`): Read [`components/number-display.md`](components/number-display.md)
-- **Overlay** (`[stOverlay]`): Read [`components/overlay.md`](components/overlay.md)
-- **Pagination** (`st-pagination`): Read [`components/pagination.md`](components/pagination.md)
-- **Progress** (`st-progress-linear`): Read [`components/progress.md`](components/progress.md)
+- **Message-state** (`st-message-state`): Read
+  [`components/message-state.md`](components/message-state.md)
+- **Modal** (`st-alert-content`): Read
+  [`components/modal.md`](components/modal.md)
+- **Notification** (`st-notification`): Read
+  [`components/notification.md`](components/notification.md)
+- **Number-display** (`st-number-display`): Read
+  [`components/number-display.md`](components/number-display.md)
+- **Overlay** (`[stOverlay]`): Read
+  [`components/overlay.md`](components/overlay.md)
+- **Pagination** (`st-pagination`): Read
+  [`components/pagination.md`](components/pagination.md)
+- **Progress** (`st-progress-linear`): Read
+  [`components/progress.md`](components/progress.md)
 - **Radio** (`st-radio`): Read [`components/radio.md`](components/radio.md)
-- **Segmented-control** (`st-segmented-control`): Read [`components/segmented-control.md`](components/segmented-control.md)
+- **Segmented-control** (`st-segmented-control`): Read
+  [`components/segmented-control.md`](components/segmented-control.md)
 - **Shell** (`st-shell`): Read [`components/shell.md`](components/shell.md)
-- **Sidemenu** (`[stSidemenuItem]`): Read [`components/sidemenu.md`](components/sidemenu.md)
-- **Single-select** (`[stSelectTrigger]`): Read [`components/single-select.md`](components/single-select.md)
+- **Sidemenu** (`[stSidemenuItem]`): Read
+  [`components/sidemenu.md`](components/sidemenu.md)
+- **Single-select** (`[stSelectTrigger]`): Read
+  [`components/single-select.md`](components/single-select.md)
 - **Slider** (`st-slider`): Read [`components/slider.md`](components/slider.md)
-- **Spinner** (`st-spinner`): Read [`components/spinner.md`](components/spinner.md)
+- **Spinner** (`st-spinner`): Read
+  [`components/spinner.md`](components/spinner.md)
 - **Tabs** (`st-tab-item`): Read [`components/tabs.md`](components/tabs.md)
 - **Tag** (`st-tag`): Read [`components/tag.md`](components/tag.md)
-- **Text-stack** (`st-text-stack`): Read [`components/text-stack.md`](components/text-stack.md)
-- **Theming** (`[stTheme]`): Read [`components/theming.md`](components/theming.md)
+- **Text-stack** (`st-text-stack`): Read
+  [`components/text-stack.md`](components/text-stack.md)
+- **Theming** (`[stTheme]`): Read
+  [`components/theming.md`](components/theming.md)
 - **Toggle** (`st-toggle`): Read [`components/toggle.md`](components/toggle.md)

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

@@ -35,4 +35,4 @@ This file contains the AI documentation for the `accordion` feature and its rela
 </st-accordion-group>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/action-menu.md

@@ -33,4 +33,4 @@ This file contains the AI documentation for the `action-menu` feature and its re
 </st-action-menu>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/alert.md

@@ -25,4 +25,4 @@ This file contains the AI documentation for the `alert` feature and its related
 </st-alert>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/avatar.md

@@ -30,4 +30,4 @@ This file contains the AI documentation for the `avatar` feature and its related
 </st-avatar-stack>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/breadcrumb.md

@@ -29,4 +29,4 @@ This file contains the AI documentation for the `breadcrumb` feature and its rel
 </st-breadcrumb>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/button.md

@@ -31,4 +31,4 @@ This file contains the AI documentation for the `button` feature and its related
 </st-button-group>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/card.md

@@ -11,7 +11,14 @@ This file contains the AI documentation for the `card` feature and its related c
   - `[padding] (boolean)`
   - `[variant] (CardVariant)`
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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.
+
+## CSS Custom Properties
+Every component exposes internal CSS custom properties for visual styling overrides:
+- `--st-card-shadow`: Box-shadow of the elevated card (defaults to `var(--st-shadow-1)`).
+- `--st-card-padding`: Inner padding of the card (defaults to `var(--st-size-xs)`).
+- `--st-card-background-color`: Background color of the card (defaults to `var(--st-color-bg-subtle)`).
+
 ## Usage Example
 
 ```html
@@ -21,4 +28,3 @@ This file contains the AI documentation for the `card` feature and its related c
 </st-card>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.

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

@@ -19,4 +19,4 @@ This file contains the AI documentation for the `checkbox` feature and its relat
 </st-checkbox>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/divider.md

@@ -16,4 +16,4 @@ This file contains the AI documentation for the `divider` feature and its relate
 <st-divider label="OR" [margin]="true" [vertical]="false"></st-divider>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/icon.md

@@ -18,4 +18,4 @@ This file contains the AI documentation for the `icon` feature and its related c
 > **CRITICAL RULE FOR AI AGENTS regarding Icons:**
 > NEVER guess an icon name. Before using an \`<st-icon>\`, you MUST verify that the icon is registered in the host application (usually located in \`src/app/shared/icon.config.ts\`). Alternatively, you may use one of the **ngx-strata Base Icons**: <!-- BASE_ICONS_START -->`question`, `arrow-right`, `arrow-left`, `arrow-up`, `arrow-down`, `close`, `expand-up-down`, `clipboard`, or `more`<!-- BASE_ICONS_END -->. If the icon you want to use is NOT registered, you must STOP and ask the user to add it.
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/input-field.md

@@ -17,7 +17,7 @@ This file contains the AI documentation for the `input-field` feature and its re
 - **Selector**: `st-input-field`
 - **Imports**: `StrataInputFieldComponent`
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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
@@ -26,4 +26,4 @@ This file contains the AI documentation for the `input-field` feature and its re
 </st-input-field>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/item.md

@@ -14,7 +14,7 @@ This file contains the AI documentation for the `item` feature and its related c
   - `[dividers] (boolean)`
   - `[template] (TemplateRef<T)`
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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
@@ -28,4 +28,4 @@ This file contains the AI documentation for the `item` feature and its related c
 </st-item>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/kbd.md

@@ -15,4 +15,4 @@ This file contains the AI documentation for the `kbd` feature and its related co
 <st-kbd keys="enter"></st-kbd>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/message-state.md

@@ -29,4 +29,4 @@ This file contains the AI documentation for the `message-state` feature and its
 </st-message-state>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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/modal.md

@@ -45,18 +45,19 @@ export class MyComponent {
   private modalService = inject(ModalService);
 
   openSettings() {
-    this.modalService.open(MyModalContentComponent, {
+    this.modalService.showModal({
+      component: MyModalContentComponent,
       title: 'User Settings',
       size: 'lg'
     });
   }
 }
-\`\`\`
+```
 
 ### 2. The Modal Content Component
-Inside your modal content component, inject \`StrataModalRef\` to close it. The modal's header and close button are automatically handled by the wrapper based on the configuration passed to \`open()\`.
+Inside your modal content component, inject `StrataModalRef` to close it. The modal's header and close button are automatically handled by the wrapper based on the configuration passed to `showModal()`.
 
-\`\`\`typescript
+```typescript
 import { Component, inject } from '@angular/core';
 import { StrataModalRef } from 'ngx-strata';
 
@@ -81,6 +82,15 @@ export class MyModalContentComponent {
     this.modalRef.close(true); // Can pass data back
   }
 }
-\`\`\`
+```
+
+## CSS Custom Properties
+The modal component exposes internal CSS custom properties for styling and layout overrides:
+- `--st-modal-bg-color`: Background color of the modal (defaults to `var(--st-color-bg-raised)`).
+- `--st-modal-border-radius`: Border radius of the modal (defaults to `var(--st-border-radius-sm)`).
+- `--st-modal-padding`: Inner padding of the modal (defaults to `var(--st-size-md)`).
+- `--st-modal-covered-modal-filter`: CSS filter applied to covered modals (defaults to `brightness(70%)`).
+- `--st-modal-viewport-margin`: Viewport safety margin when calculating max-height (defaults to `var(--st-size-md)`).
+
+> **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.
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.

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

@@ -43,4 +43,4 @@ export class MyComponent {
 }
 \`\`\`
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -23,4 +23,4 @@ This file contains the AI documentation for the `number-display` feature and its
 </st-number-display>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -17,4 +17,4 @@ This file contains the AI documentation for the `overlay` feature and its relate
 <st-overlay></st-overlay>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -20,4 +20,4 @@ This file contains the AI documentation for the `pagination` feature and its rel
 </st-pagination>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -25,7 +25,7 @@ This file contains the AI documentation for the `progress` feature and its relat
   - `[size] (any)`
   - `[strokeWidth] (any)`
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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
@@ -43,4 +43,4 @@ This file contains the AI documentation for the `progress` feature and its relat
 </st-progress-radial>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -26,4 +26,4 @@ This file contains the AI documentation for the `radio` feature and its related
 </st-radio-group>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -35,4 +35,4 @@ This file contains the AI documentation for the `segmented-control` feature and
 </st-segmented-control>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -10,9 +10,9 @@ This file contains the AI documentation for the `shell` feature and its related
 
 ```html
 <st-shell>
-  <st-sidemenu slot="sidebar">...</st-sidemenu>
-  <div slot="content">Main App Content</div>
+  <!-- Main App Content -->
+  <router-outlet></router-outlet>
 </st-shell>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -24,7 +24,7 @@ This file contains the AI documentation for the `sidemenu` feature and its relat
 - **Inputs**:
   - `[label] (string)`
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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
@@ -38,4 +38,4 @@ This file contains the AI documentation for the `sidemenu` feature and its relat
 </st-sidemenu>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -42,4 +42,4 @@ This file contains the AI documentation for the `single-select` feature and its
 </st-single-select>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -21,4 +21,4 @@ This file contains the AI documentation for the `slider` feature and its related
 </st-slider>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -14,4 +14,4 @@ This file contains the AI documentation for the `spinner` feature and its relate
 <st-spinner size="md"></st-spinner>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -24,4 +24,4 @@ This file contains the AI documentation for the `tabs` feature and its related c
 </st-tabs>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -14,4 +14,4 @@ This file contains the AI documentation for the `tag` feature and its related co
 <st-tag size="md">New Feature</st-tag>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -8,7 +8,7 @@ This file contains the AI documentation for the `text-stack` feature and its rel
 - **Inputs**:
   - `[overflow] (TextStackOverflow)`
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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
@@ -18,4 +18,4 @@ This file contains the AI documentation for the `text-stack` feature and its rel
 </st-text-stack>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -8,7 +8,7 @@ This file contains the AI documentation for the `theming` feature and its relate
 - **Inputs**:
   - `[stTheme] (Theme)`
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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
@@ -16,4 +16,4 @@ This file contains the AI documentation for the `theming` feature and its relate
 <div class="st-bg-raised st-text-primary">Content</div>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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

@@ -19,4 +19,4 @@ This file contains the AI documentation for the `toggle` feature and its related
 </st-toggle>
 ```
 
-> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Ensure data binding uses modern Angular Signals if the host project allows it.
+> **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.