ngx-strata 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-strata",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "A simple UI framework for quickly prototyping angular applications with a bit of flair.",
   "license": "MIT",
   "peerDependencies": {

package/skills/ngx-strata/SKILL.md

@@ -113,12 +113,14 @@ for each component are stored in separate files.
 - **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** (`ModalService`, `st-modal-footer`): Read
+- **Modal** (`ModalService`, `st-modal-body`, `st-modal-footer`): 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)
+- **Number-stepper** (`st-number-stepper`): Read
+  [`components/number-stepper.md`](components/number-stepper.md)
 - **Overlay** (`[stOverlay]`): Read
   [`components/overlay.md`](components/overlay.md)
 - **Otp** (`st-otp`): Read [`components/otp.md`](components/otp.md)
@@ -134,6 +136,8 @@ for each component are stored in separate files.
   [`components/sidemenu.md`](components/sidemenu.md)
 - **Single-select** (`[stSelectTrigger]`): Read
   [`components/single-select.md`](components/single-select.md)
+- **Skeleton** (`st-skeleton`): Read
+  [`components/skeleton.md`](components/skeleton.md)
 - **Slider** (`st-slider`): Read [`components/slider.md`](components/slider.md)
 - **Spinner** (`st-spinner`): Read
   [`components/spinner.md`](components/spinner.md)

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

@@ -51,4 +51,28 @@ This file contains the AI documentation for the `badge` feature and its related
 </st-avatar>
 ```
 
+### In Segmented Controls
+```html
+<st-segmented-control>
+  <st-segmented-control-item text="All" [badge]="48" badgeVariant="neutral"></st-segmented-control-item>
+  <st-segmented-control-item text="Unread" [badge]="5" badgeVariant="accent"></st-segmented-control-item>
+</st-segmented-control>
+```
+
+### In Tabs
+```html
+<st-tabs>
+  <st-tab-item text="Inbox" [badge]="12" badgeVariant="accent"></st-tab-item>
+  <st-tab-item text="Alerts" [badge]="3" badgeVariant="error"></st-tab-item>
+</st-tabs>
+```
+
+### In Sidemenu Items
+```html
+<a stSidemenuItem href="/inbox">
+  <st-icon name="email"></st-icon> Inbox
+  <st-badge [value]="5" variant="accent" size="sm"></st-badge>
+</a>
+```
+
 > **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

@@ -14,6 +14,9 @@ This file contains the AI documentation for the `breadcrumb` feature and its rel
 - **Inputs**:
   - `[text] (string)`
   - `[icon] (string)`
+  - `[badge] (string | number | undefined)`: Optional badge count or label.
+  - `[badgeVariant] (BadgeVariant)`: Badge visual variant (`'accent' | 'neutral' | 'success' | 'warning' | 'error' | 'info'`, default `'neutral'`).
+  - `[badgeSize] (BadgeSize)`: Badge size (`'xs' | 'sm' | 'md'`, default `'sm'`).
   - `[interactable] (boolean)`
   - `[disabled] (boolean)`
 - **Outputs**:
@@ -24,7 +27,7 @@ This file contains the AI documentation for the `breadcrumb` feature and its rel
 ```html
 <st-breadcrumb separatorIcon="chevron_right">
   <st-breadcrumb-item text="Home" icon="home" (activated)="goHome()"></st-breadcrumb-item>
-  <st-breadcrumb-item text="Settings" (activated)="goSettings()"></st-breadcrumb-item>
+  <st-breadcrumb-item text="Projects" [badge]="14" (activated)="goSettings()"></st-breadcrumb-item>
   <st-breadcrumb-item text="Profile" [disabled]="true"></st-breadcrumb-item>
 </st-breadcrumb>
 ```

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

@@ -5,28 +5,40 @@ This file contains the AI documentation for the `item` feature and its related c
 ## Item (`<st-item>`)
 - **Selector**: `st-item`
 - **Imports**: `StrataItemComponent`
+- **Inputs**:
+  - `[interactable] (boolean)`: Whether the item should respond to hover, focus, and click events (default: `false`).
+  - `[disabled] (boolean)`: Whether the item is disabled (default: `false`).
+- **Outputs**:
+  - `(activated)`: Emitted when the item is activated via keyboard (Enter/Space) or click.
+- **CSS Variables**:
+  - `--st-item-bg`: Background color of the item (default: `transparent`).
+  - `--st-item-hover-bg`: Background color when hovered/focused (default: `var(--st-color-control-bg-hover)`).
+  - `--st-item-hover-label-color`: Text color for `.st-label` within the item when hovered/focused (default: `var(--st-color-text-secondary)`).
+  - `--st-item-border-radius`: Border radius (default: `var(--st-border-radius-md)`).
+  - `--st-item-gap`: Spacing between slotted start/end areas (default: `var(--st-size-xs)`).
 
 ## ItemList (`<st-item-list>`)
 - **Selector**: `st-item-list`
 - **Imports**: `StrataItemListComponent`
 - **Inputs**:
-  - `[items] (T[])`
-  - `[dividers] (boolean)`
-  - `[template] (TemplateRef<T)`
+  - `[items] (T[])`: Array of items to render.
+  - `[dividers] (boolean)`: Whether to display dividers between items.
+  - `[template] (TemplateRef<T>)`: Template to render each item.
+- **CSS Variables**:
+  - `--st-item-list-divider-color`: Divider border color (default: `var(--st-border)`).
 
 > **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-item>
+<st-item [interactable]="true">
   <st-icon name="user" area="start"></st-icon>
-  <div>
+  <st-text-stack>
     <h4>User Profile</h4>
-    <p>Manage your account settings</p>
-  </div>
+    <span class="st-label">Account</span>
+  </st-text-stack>
   <st-icon name="chevron_right" area="end"></st-icon>
 </st-item>
 ```
 
-
-> **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

@@ -10,15 +10,23 @@ Modals in `ngx-strata` are opened **programmatically** using the `ModalService`.
 
 ## Components & Directives
 
+### ModalBody (`<st-modal-body>`)
+- **Selector**: `st-modal-body`
+- **Imports**: `StrataModalBodyComponent`
+- **Usage**:
+  - Wrap your scrollable modal content inside `<st-modal-body>`.
+  - Automatically flexes to fill available vertical space (`flex: 1; min-height: 0;`) and scrolls independently (`overflow-y: auto;`).
+  - Standard padding applied via `--st-modal-body-padding` (defaults to `var(--st-size-sm)`).
+
 ### ModalFooter (`<st-modal-footer>`)
 - **Selector**: `st-modal-footer`
 - **Imports**: `StrataModalFooterComponent`
 - **Inputs**:
   - `[justification] ('start' | 'center' | 'end' | 'space-between')` (defaults to `'end'`)
 - **Usage**:
-  - Place `<st-modal-footer>` at the bottom of your injected modal content template.
+  - Place `<st-modal-footer>` at the bottom of your injected modal content template (after `<st-modal-body>`).
+  - Stays pinned at the bottom of the modal outside the scrolling area (`flex-shrink: 0;`), separated by a top border.
   - Automatically stretches edge-to-edge against the modal borders.
-  - Pinned with `position: sticky; bottom: 0;` so it remains visible when modal content scrolls.
   - **Always pair with `<st-button-group>`** to format buttons with built-in spacing and alignment. Avoid using raw `<div>` tags or manual margins.
 
 ### AlertContent (`<st-alert-content>`)
@@ -39,6 +47,7 @@ Modals in `ngx-strata` are opened **programmatically** using the `ModalService`.
   - `[configuration] (ModalConfiguration)`
   - `[size] (ModalSize)`
   - `[variant] (ModalVariant)`
+  - `[placement] (ModalPlacement)`
 
 ### ModalContainer (`<st-modal-container>`)
 - **Selector**: `st-modal-container`
@@ -63,6 +72,7 @@ export interface ModalConfiguration {
   title?: string;
   size?: ModalSize;                 // 'xs' | 'sm' | 'md' | 'lg' (default: 'md')
   variant?: ModalVariant;           // 'default' | 'raised' (default: 'default')
+  placement?: ModalPlacement;       // 'center' | 'right' | 'left' | 'bottom' (default: 'center')
   hideCloseButton?: boolean;       // default: false
   disableBackdropClosure?: boolean; // default: false
   inputs?: Record<string, unknown>; // Inputs forwarded to injected component
@@ -71,8 +81,15 @@ export interface ModalConfiguration {
 
 export type ModalSize = 'xs' | 'sm' | 'md' | 'lg';
 export type ModalVariant = 'default' | 'raised';
+export type ModalPlacement = 'center' | 'right' | 'left' | 'bottom';
 ```
 
+### Choosing `placement`:
+- `'center'` (default): Standard centered modal dialog on desktop; adapts to full-screen on mobile for `md`/`lg`.
+- `'right'`: Slide-over drawer panel pinned to the right edge with full height on desktop (`min-width: 768px`), automatically adapting to full-width slide-in on mobile (`< 768px`).
+- `'left'`: Slide-over drawer panel pinned to the left edge on desktop (`min-width: 768px`), automatically adapting to full-width slide-in on mobile (`< 768px`).
+- `'bottom'`: Bottom sheet presentation on mobile (`< 768px`) with rounded top corners; automatically auto-centers as a modal dialog card on desktop (`≥ 768px`).
+
 ### Choosing `variant`:
 - `'default'`: Uses `--st-color-bg-default` (the standard page background). This is the default for all modals. It allows nested components like `st-card` to sit on top with clean visual elevation and contrast.
 - `'raised'`: Uses `--st-color-bg-raised` (the elevated surface background). Used automatically by `showAlert()` and recommended when the modal is a simple dialog or confirmation prompt without nested cards.
@@ -80,6 +97,8 @@ export type ModalVariant = 'default' | 'raised';
 ### Responsive Behavior & Mobile Sizing:
 - **`xs` (Alerts) and `sm` modals**: Remain centered dialog boxes on all screen sizes, preserving their standard viewport margins, borders, and rounded corners.
 - **`md` (default) and `lg` modals**: Automatically adapt to **full-screen mode** (`100vw` by `100dvh`) on screens under `768px` (`< 768px`), with `border-radius: 0` and `border: none`. The content area flexes to fill available vertical space, and `<st-modal-footer>` stays pinned to the bottom of the screen.
+- **Side drawers (`placement: 'right' | 'left'`)**: Span full viewport height (`100vh`/`100dvh`) with configurable widths on desktop, and expand to full width on mobile.
+- **Bottom sheets (`placement: 'bottom'`)**: Pinned to the bottom on mobile (`max-height: calc(100dvh - var(--st-size-xl))`), and auto-centered on desktop.
 
 ---
 
@@ -127,14 +146,15 @@ export class MyComponent {
 }
 ```
 
-### 2. The Modal Content Component (with `<st-modal-footer>`)
+### 2. The Modal Content Component (with `<st-modal-body>` and `<st-modal-footer>`)
 
-Inside the injected component, inject `StrataModalRef` to trigger closing. Combine `<st-modal-footer>` with `<st-button-group>` for actions:
+Inside the injected component, inject `StrataModalRef` to trigger closing. Combine `<st-modal-body>`, `<st-modal-footer>`, and `<st-button-group>` for actions:
 
 ```typescript
 import { Component, inject } from '@angular/core';
 import {
   StrataModalRef,
+  StrataModalBodyComponent,
   StrataModalFooterComponent,
   StrataButtonGroupComponent,
   StrataButtonDirective
@@ -142,12 +162,15 @@ import {
 
 @Component({
   imports: [
+    StrataModalBodyComponent,
     StrataModalFooterComponent,
     StrataButtonGroupComponent,
     StrataButtonDirective
   ],
   template: `
-    <p class="st-body-m">Configure your project settings here.</p>
+    <st-modal-body>
+      <p class="st-body-m">Configure your project settings here.</p>
+    </st-modal-body>
 
     <!-- Standard End-Aligned Actions -->
     <st-modal-footer>
@@ -176,6 +199,10 @@ export class MySettingsModalComponent {
 When a secondary action (like "Delete" or "Reset") should appear on the left while primary actions sit on the right:
 
 ```html
+<st-modal-body>
+  <p class="st-body-m">Body content that scrolls when long...</p>
+</st-modal-body>
+
 <st-modal-footer>
   <button stButton variant="ghost" (click)="reset()">Reset Defaults</button>
   <st-button-group justification="end">
@@ -225,6 +252,9 @@ The modal and modal footer expose internal CSS custom properties mapped to desig
 - `--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)`).
 
+### Modal Body (`st-modal-body`)
+- `--st-modal-body-padding`: Inner padding of the body content (defaults to `var(--st-size-sm)`).
+
 ### Modal Footer (`st-modal-footer`)
 - `--st-modal-footer-bg`: Background color of the footer (defaults to `var(--st-modal-bg-color)`).
 - `--st-modal-footer-border-color`: Border divider color (defaults to `var(--st-border)`).
@@ -243,4 +273,5 @@ The modal and modal footer expose internal CSS custom properties mapped to desig
 > **Note to AI Agents**:
 > - Always use modern Angular Signals (`input()`, `output()`) for data/event bindings.
 > - Do NOT use raw HTML `<button>`, `<input>`, or `<select>` when `ngx-strata` equivalents exist.
+> - Always wrap modal content in `<st-modal-body>` and place `<st-modal-footer>` at the bottom of the injected component.
 > - Always use `<st-button-group>` to arrange action buttons within `<st-modal-footer>`.

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

@@ -6,11 +6,17 @@ This file contains the AI documentation for the `notification` feature and its r
 - **Selector**: `st-notification`
 - **Imports**: `StrataNotificationComponent`
 - **Inputs**:
+  - `[title] (string | undefined)`: Optional prominent title.
   - `[message] (string, required)`: The notification message.
   - `[icon] (string | undefined)`: Optional icon name to display.
+  - `[duration] (number)`: Display duration in ms. Defaults to `3000`.
   - `[dismissible] (boolean)`: Whether to display a close button. Defaults to `false`.
+  - `[showProgress] (boolean)`: Whether to show a countdown progress bar along the bottom. Defaults to `false`.
+  - `[pauseOnHover] (boolean)`: Whether hovering pauses the auto-dismiss timer. Defaults to `true`.
+  - `[actions] (NotificationAction[])`: Optional list of action buttons.
 - **Outputs**:
-  - `(dismiss) (void)`: Emitted when the close button is clicked.
+  - `(dismiss) (void)`: Emitted when dismissed or when timer completes.
+  - `(actionClick) ({ action: NotificationAction, ref: StrataNotificationRef })`: Emitted when an action button is clicked.
 
 ## NotificationContainer (`<st-notification-container>`)
 - **Selector**: `st-notification-container`
@@ -20,11 +26,20 @@ This file contains the AI documentation for the `notification` feature and its r
 Notifications are managed programmatically via `NotificationService`.
 
 ### NotificationConfiguration
+- `title?: string`
 - `message: string`
 - `icon?: string`
-- `theme?: 'info' | 'success' | 'warning' | 'danger' | 'brand'` (defaults to `'info'`)
+- `theme?: 'default' | 'info' | 'success' | 'warning' | 'danger' | 'brand'` (defaults to `'default'`)
 - `duration?: number` (defaults to `3000`ms. Set to `0` for persistent notifications)
 - `dismissible?: boolean` (defaults to `false` when duration > 0, and defaults to `true` when `duration === 0`)
+- `showProgress?: boolean` (defaults to `false`)
+- `pauseOnHover?: boolean` (defaults to `true`)
+- `actions?: NotificationAction[]`
+
+### NotificationAction
+- `label: string`
+- `onClick?: (ref: StrataNotificationRef) => void`
+- `variant?: 'primary' | 'secondary' | 'outline' | 'ghost'`
 
 ### Return Handle (`StrataNotificationRef`)
 Calling `showNotification(config)` returns a `StrataNotificationRef`:
@@ -33,7 +48,7 @@ Calling `showNotification(config)` returns a `StrataNotificationRef`:
 
 ## Usage Examples
 
-### 1. Standard Auto-dismissing Notification
+### 1. Standard Notification with Title and Progress Bar
 ```typescript
 import { Component, inject } from '@angular/core';
 import { NotificationService } from 'ngx-strata';
@@ -44,9 +59,40 @@ export class MyComponent {
 
   showSuccess() {
     this.notificationService.showNotification({
-      message: 'Your file has been successfully uploaded.',
+      title: 'Upload Successful',
+      message: 'Your file has been saved to the workspace.',
       theme: 'success',
-      icon: 'check'
+      icon: 'check',
+      showProgress: true,
+      pauseOnHover: true
+    });
+  }
+}
+```
+
+### 2. Action Notification (e.g. Undo)
+```typescript
+@Component({...})
+export class DeleteComponent {
+  private notificationService = inject(NotificationService);
+
+  deleteItem() {
+    this.notificationService.showNotification({
+      title: 'Item Deleted',
+      message: 'The file has been moved to trash.',
+      theme: 'warning',
+      icon: 'warning',
+      showProgress: true,
+      actions: [
+        {
+          label: 'Undo',
+          variant: 'primary',
+          onClick: (ref) => {
+            // Restore item
+            ref.dismiss();
+          }
+        }
+      ]
     });
   }
 }

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

@@ -0,0 +1,84 @@
+# ngx-strata: number-stepper Feature
+
+This file contains the AI documentation for the `number-stepper` feature and its related components.
+
+## Number Stepper (`<st-number-stepper>`)
+- **Selector**: `st-number-stepper`
+- **Imports**: `StrataNumberStepperComponent`
+- **Inputs & Models**:
+  - `[(value)] (number | null | undefined)`: Two-way Signal model binding for the current value.
+  - `[min] (number | undefined)`: Minimum boundary threshold. Disables the decrement button at or below this value.
+  - `[max] (number | undefined)`: Maximum boundary threshold. Disables the increment button at or above this value.
+  - `[step] (number)`: Step increment/decrement amount. Defaults to `1`.
+  - `[precision] (number | undefined)`: Number of decimal places for rounding calculations to prevent IEEE-754 floating-point drift.
+  - `[stepperLayout] ('split' | 'stacked')`: Layout arrangement of the stepper buttons. Defaults to `'split'` (decrement on left, increment on right, optimized for mobile/touch targets). `'stacked'` renders compact vertical chevrons on the right.
+  - `[size] ('sm' | 'md' | 'lg')`: Sizing scale (28px, 34px, 40px). Defaults to `'md'`.
+  - `[label] (string | undefined)`: Optional text label placed above the stepper.
+  - `[placeholder] (string | undefined)`: Placeholder text for the input element.
+  - `[id] (string | undefined)`: Explicit HTML id.
+  - `[name] (string | undefined)`: Form field name.
+  - `[disabled] (boolean)`: Disables the component and stepper buttons.
+  - `[readonly] (boolean)`: Makes the input read-only while keeping it focusable.
+  - `[state] ('default' | 'error' | 'success' | 'warning')`: Visual state indicator for validation borders and rings.
+  - `[error] (boolean)`: Explicit shortcut to set `state="error"`.
+  - `[message] (string | undefined)`: Status or helper message rendered beneath the stepper.
+  - `[colorMessage] (boolean)`: Whether the helper message follows the contextual state color. Defaults to `true`.
+
+## Forms Integration
+`StrataNumberStepperComponent` implements `ControlValueAccessor` and seamlessly supports both `[(ngModel)]` and Reactive Forms (`formControlName` / `[formControl]`).
+
+## Usage Examples
+
+### 1. Basic Split Stepper (Default)
+```html
+<st-number-stepper
+  label="Quantity"
+  [(value)]="itemCount"
+  [min]="1"
+  [max]="20"
+/>
+```
+
+### 2. Stacked Desktop Chevrons
+```html
+<st-number-stepper
+  label="Items per page"
+  [(value)]="pageSize"
+  [min]="5"
+  [max]="100"
+  [step]="5"
+  stepperLayout="stacked"
+/>
+```
+
+### 3. Floating Point / Decimal Stepper
+```html
+<st-number-stepper
+  label="Opacity"
+  [(value)]="opacity"
+  [min]="0"
+  [max]="1"
+  [step]="0.05"
+  [precision]="2"
+/>
+```
+
+### 4. Sizes
+```html
+<st-number-stepper size="sm" [(value)]="smVal" />
+<st-number-stepper size="md" [(value)]="mdVal" />
+<st-number-stepper size="lg" [(value)]="lgVal" />
+```
+
+### 5. Reactive Forms with Validation
+```html
+<st-number-stepper
+  label="Stock Alert"
+  formControlName="stock"
+  [min]="0"
+  state="error"
+  message="Stock cannot be negative."
+/>
+```
+
+> **Note to AI Agents**: Prioritize using these components over raw HTML equivalents. Use modern Angular Signals (input(), input.required(), model(), and output()) for all data/event bindings. Do not use legacy @Input() or @Output() decorators.

package/skills/ngx-strata/components/segmented-control.md

@@ -23,6 +23,9 @@ This file contains the AI documentation for the `segmented-control` feature and
 - **Inputs & Models**:
   - `[text] (string)`: Display label text. Required.
   - `[value] (string | undefined)`: Form value associated with item (defaults to `text` if omitted).
+  - `[badge] (string | number | undefined)`: Optional badge count or label displayed next to text.
+  - `[badgeVariant] (BadgeVariant)`: Badge visual variant (`'accent' | 'neutral' | 'success' | 'warning' | 'error' | 'info'`, default `'neutral'`).
+  - `[badgeSize] (BadgeSize)`: Badge size (`'xs' | 'sm' | 'md'`, default `'sm'`).
   - `[(selected)] (model<boolean>)`: Whether item is selected.
   - `[disabled] (boolean)`: Disables this individual item.
 - **Outputs**:

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

@@ -0,0 +1,59 @@
+# ngx-strata: skeleton Feature
+
+This file contains the AI documentation for the `skeleton` feature and its related components.
+
+## Skeleton (`<st-skeleton>`)
+- **Selector**: `st-skeleton`
+- **Imports**: `StrataSkeletonComponent`
+- **Inputs**:
+  - `[variant] ('text' | 'circular' | 'circle' | 'rectangular' | 'rect' | 'rounded' | 'pill')`: Visual shape of the placeholder. Defaults to `'text'`.
+  - `[size] ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | undefined)`: Standardized size token (e.g. matching avatar sizes).
+  - `[animation] ('shimmer' | 'pulse' | 'none')`: Animation style. Defaults to `'shimmer'`.
+  - `[width] (string | number | undefined)`: Custom width (e.g. `'100%'`, `'200px'`, or number in px).
+  - `[height] (string | number | undefined)`: Custom height (e.g. `'32px'`, `'150px'`, or number in px).
+  - `[radius] (string | number | undefined)`: Custom border-radius override.
+  - `[count] (number)`: Number of placeholder lines to render when `variant="text"`. Defaults to `1`.
+  - `[lastLineWidth] (string | number)`: Width of the trailing line for multi-line text blocks. Defaults to `'70%'`.
+  - `[gap] (string | number | undefined)`: Gap between multi-line text bars.
+  - `[loading] (boolean)`: Toggle placeholder visibility vs loaded state. Defaults to `true`.
+  - `[ariaLabel] (string)`: Accessible label for assistive technology. Defaults to `'Loading...'`.
+
+## Usage Examples
+
+### 1. Basic Text Line
+```html
+<st-skeleton width="240px"></st-skeleton>
+```
+
+### 2. Multi-Line Paragraph
+```html
+<st-skeleton variant="text" [count]="4" lastLineWidth="50%"></st-skeleton>
+```
+
+### 3. Circular Avatar Placeholder
+```html
+<st-skeleton variant="circular" size="lg"></st-skeleton>
+```
+
+### 4. Rectangular Card / Image Placeholder
+```html
+<st-skeleton variant="rectangular" width="100%" height="180px"></st-skeleton>
+```
+
+### 5. Composite Profile Card Skeleton Screen
+```html
+<st-card>
+  <div style="display: flex; gap: var(--st-space-4); align-items: center;">
+    <st-skeleton variant="circular" size="xl"></st-skeleton>
+    <div style="flex: 1; display: flex; flex-direction: column; gap: var(--st-space-2);">
+      <st-skeleton variant="text" width="60%" height="20px"></st-skeleton>
+      <st-skeleton variant="text" width="40%" height="14px"></st-skeleton>
+    </div>
+  </div>
+  <div style="margin-top: var(--st-space-4);">
+    <st-skeleton variant="text" [count]="3"></st-skeleton>
+  </div>
+</st-card>
+```
+
+> **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

@@ -7,7 +7,11 @@ This file contains the AI documentation for the `tabs` feature and its related c
 - **Imports**: `StrataTabItemComponent`
 - **Inputs**:
   - `[text] (string)`
-  - `[disabled] (any)`
+  - `[badge] (string | number | undefined)`: Optional badge count or label.
+  - `[badgeVariant] (BadgeVariant)`: Badge visual variant (`'accent' | 'neutral' | 'success' | 'warning' | 'error' | 'info'`, default `'neutral'`).
+  - `[badgeSize] (BadgeSize)`: Badge size (`'xs' | 'sm' | 'md'`, default `'sm'`).
+  - `[(selected)] (model<boolean>)`: Whether the tab is active.
+  - `[disabled] (boolean)`
 - **Outputs**:
   - `(selectionChanged)`
 
@@ -20,6 +24,7 @@ This file contains the AI documentation for the `tabs` feature and its related c
 ```html
 <st-tabs>
   <st-tab-item text="General" [selected]="tab === 'general'" (selectionChanged)="tab = 'general'"></st-tab-item>
+  <st-tab-item text="Messages" [badge]="5" badgeVariant="accent"></st-tab-item>
   <st-tab-item text="Security" [selected]="tab === 'security'" (selectionChanged)="tab = 'security'"></st-tab-item>
 </st-tabs>
 ```