ngx-strata 0.5.1 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-strata",
-  "version": "0.5.1",
+  "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,7 +113,7 @@ 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)

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

@@ -29,7 +29,7 @@ Notifications are managed programmatically via `NotificationService`.
 - `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`)

package/types/ngx-strata.d.ts

@@ -743,6 +743,11 @@ declare class StrataAlertContentComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataAlertContentComponent, "st-alert-content", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "affirmativeButton": { "alias": "affirmativeButton"; "required": true; "isSignal": true; }; "cancelButton": { "alias": "cancelButton"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+declare class StrataModalBodyComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataModalBodyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataModalBodyComponent, "st-modal-body", never, {}, {}, never, ["*"], true, never>;
+}
+
 interface ModalConfiguration {
     title?: string;
     component: Type<unknown>;
@@ -751,6 +756,7 @@ interface ModalConfiguration {
     disableBackdropClosure?: boolean;
     size?: ModalSize;
     variant?: ModalVariant;
+    placement?: ModalPlacement;
     inputs?: Record<string, unknown>;
 }
 interface AlertConfiguration {
@@ -763,6 +769,7 @@ interface AlertConfiguration {
 }
 type ModalSize = 'xs' | 'sm' | 'md' | 'lg';
 type ModalVariant = 'default' | 'raised';
+type ModalPlacement = 'center' | 'right' | 'left' | 'bottom';
 declare abstract class StrataModalRef {
     abstract close(value?: unknown): void;
 }
@@ -814,8 +821,10 @@ declare class StrataModalComponent implements OnInit, AfterViewInit, OnDestroy {
     configuration: _angular_core.InputSignal<ModalConfiguration>;
     size: _angular_core.ModelSignal<ModalSize | undefined>;
     variant: _angular_core.InputSignal<ModalVariant | undefined>;
+    placement: _angular_core.ModelSignal<ModalPlacement | undefined>;
     readonly currentSize: _angular_core.Signal<ModalSize>;
     readonly currentVariant: _angular_core.Signal<ModalVariant>;
+    readonly currentPlacement: _angular_core.Signal<ModalPlacement>;
     readonly role = "dialog";
     readonly ariaModal = "true";
     readonly tabIndex = -1;
@@ -829,7 +838,7 @@ declare class StrataModalComponent implements OnInit, AfterViewInit, OnDestroy {
     onKeydown(event: KeyboardEvent): void;
     private getFocusableElements;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrataModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataModalComponent, "st-modal", never, { "configuration": { "alias": "configuration"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataModalComponent, "st-modal", never, { "configuration": { "alias": "configuration"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; }, { "size": "sizeChange"; "placement": "placementChange"; }, never, never, true, never>;
 }
 
 interface StrataNotificationRef {
@@ -1539,5 +1548,5 @@ declare class StrataToggleComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrataToggleComponent, "st-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "colorMessage": { "alias": "colorMessage"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; }, never, ["*"], true, [{ directive: typeof StrataActivatableDirective; inputs: { "disabled": "disabled"; }; outputs: { "activated": "activated"; }; }]>;
 }
 
-export { BreakpointService, CapitalizePipe, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCardComponent, StrataCheckboxComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataToggleComponent, StrataTooltipDirective, getDefaultShortcutLabels, isApplePlatform, provideBaseIcons, provideIcons, provideStrata, resolveIsApple };
-export type { AccordionVariant, AlertConfiguration, AvatarSize, AvatarStackSpacing, AvatarVariant, BadgePlacement, BadgeSize, BadgeVariant, ButtonGroupJustification, ButtonSize, ButtonVariant, CardVariant, CropPosition, CropResult, CropShape, CurrentDarkmode, DarkmodeSetting, HotkeyOptions, IconConfig, IconSize, InputControlState, InputFieldSize, ModalConfiguration, ModalFooterJustification, ModalSize, ModalVariant, NotificationAction, NotificationConfiguration, NotificationsWithIds, NumberStepperLayout, NumberStepperSize, OtpSize, OtpState, OtpType, PaginationItem, ProgressLinearGrowDirection, ProgressLinearLabelFormat, ProgressRadialLabelFormat, SegmentedControlSize, SingleSelectSize, SkeletonAnimation, SkeletonSize, SkeletonVariant, SpinnerSize, StepState, StepperOrientation, StepperSize, StepperTheme, StrataBreakpoint, StrataConfig, StrataNotificationRef, StrataOS, StrataPlatform, TagSize, TextStackOverflow, Theme, TooltipPlacement };
+export { BreakpointService, CapitalizePipe, DEFAULT_DURATION, DEFAULT_THEME, DarkmodeService, DeviceService, HotkeyService, HttpIconLoader, IconLoader, IconRegistry, IconRegistryService, ModalService, NotificationService, STRATA_CONFIG, StrataAccordionGroupComponent, StrataAccordionItemComponent, StrataActionMenuComponent, StrataActionMenuItemComponent, StrataActivatableDirective, StrataAlertComponent, StrataAlertContentComponent, StrataAutoResizeDirective, StrataAvatarComponent, StrataAvatarStackComponent, StrataBadgeComponent, StrataBreadcrumbComponent, StrataBreadcrumbItemComponent, StrataButtonDirective, StrataButtonGroupComponent, StrataCardComponent, StrataCheckboxComponent, StrataDividerComponent, StrataFileUploadComponent, StrataIconComponent, StrataImageCropperComponent, StrataInputFieldComponent, StrataItemComponent, StrataItemListComponent, StrataKbdComponent, StrataMessageStateComponent, StrataModalBodyComponent, StrataModalComponent, StrataModalContainerComponent, StrataModalFooterComponent, StrataModalHeaderComponent, StrataModalRef, StrataNativeInputRefDirective, StrataNotificationComponent, StrataNotificationContainerComponent, StrataNumberDisplayComponent, StrataNumberStepperComponent, StrataOtpComponent, StrataOverlayDirective, StrataPaginationComponent, StrataProgressLinearComponent, StrataProgressRadialComponent, StrataRadioComponent, StrataRadioGroupComponent, StrataSegmentedControlComponent, StrataSegmentedControlItemComponent, StrataSelectItemComponent, StrataSelectTriggerDirective, StrataShellComponent, StrataSidemenuComponent, StrataSidemenuItemDirective, StrataSidemenuItemGroupComponent, StrataSidemenuSectionComponent, StrataSingleSelectComponent, StrataSkeletonComponent, StrataSliderComponent, StrataSpinnerComponent, StrataStepComponent, StrataStepperComponent, StrataTabItemComponent, StrataTabsComponent, StrataTagComponent, StrataTextStackComponent, StrataThemeDirective, StrataToggleComponent, StrataTooltipDirective, getDefaultShortcutLabels, isApplePlatform, provideBaseIcons, provideIcons, provideStrata, resolveIsApple };
+export type { AccordionVariant, AlertConfiguration, AvatarSize, AvatarStackSpacing, AvatarVariant, BadgePlacement, BadgeSize, BadgeVariant, ButtonGroupJustification, ButtonSize, ButtonVariant, CardVariant, CropPosition, CropResult, CropShape, CurrentDarkmode, DarkmodeSetting, HotkeyOptions, IconConfig, IconSize, InputControlState, InputFieldSize, ModalConfiguration, ModalFooterJustification, ModalPlacement, ModalSize, ModalVariant, NotificationAction, NotificationConfiguration, NotificationsWithIds, NumberStepperLayout, NumberStepperSize, OtpSize, OtpState, OtpType, PaginationItem, ProgressLinearGrowDirection, ProgressLinearLabelFormat, ProgressRadialLabelFormat, SegmentedControlSize, SingleSelectSize, SkeletonAnimation, SkeletonSize, SkeletonVariant, SpinnerSize, StepState, StepperOrientation, StepperSize, StepperTheme, StrataBreakpoint, StrataConfig, StrataNotificationRef, StrataOS, StrataPlatform, TagSize, TextStackOverflow, Theme, TooltipPlacement };