@ngstarter-ui/components 1.0.34 → 1.0.36

package/ai/component-registry.json

@@ -13,11 +13,12 @@
   "recipes": [
     {
       "name": "admin-dashboard",
-      "description": "Build admin dashboards from NgStarter UI primitives instead of hand-rolled shell, cards, forms, tables, and pagination.",
+      "description": "Build admin dashboards from NgStarter UI primitives instead of hand-rolled shell, cards, forms, datatables, static tables, and pagination.",
       "mustUse": [
         "@ngstarter-ui/components/sidenav",
         "@ngstarter-ui/components/navigation",
         "@ngstarter-ui/components/card",
+        "@ngstarter-ui/components/data-view",
         "@ngstarter-ui/components/table",
         "@ngstarter-ui/components/form-field",
         "@ngstarter-ui/components/input",
@@ -43,7 +44,13 @@
           "CardContent",
           "CardFooter"
         ],
-        "table": [
+        "datatables": [
+          "DataView"
+        ],
+        "operationalDatasets": [
+          "DataView"
+        ],
+        "staticTables": [
           "Table",
           "ColumnDef",
           "HeaderCell",
@@ -76,7 +83,9 @@
         ]
       },
       "mustNot": [
-        "Do not build admin tables with role=\"table\" div grids when ngs-table fits.",
+        "Do not build datatables or operational admin datasets with role=\"table\", plain table markup, or div grids when DataView fits.",
+        "Do not use DataView for purely static/read-only tabular content when ngs-table fits.",
+        "Do not build static/read-only tables with role=\"table\" div grids when ngs-table fits.",
         "Do not build search fields with plain input when ngs-form-field and ngsInput fit.",
         "Do not build navigation menus with plain button lists when ngs-navigation fits.",
         "Do not build KPI cards with plain article/div cards when ngs-card fits.",
@@ -2556,8 +2565,8 @@
       "sourceRoot": "projects/components/core/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Provide shared primitives, utilities, pipes, directives, theming services, and low-level behavior used by NgStarter components.",
-      "useWhen": "Import from core for theme setup, shared directives, utility pipes, ripple, focus helpers, and library infrastructure.",
+      "purpose": "Provide infrastructure primitives, theme setup, services, directives, pipes, tokens, and low-level utilities.",
+      "useWhen": "Use @ngstarter-ui/components/core for infrastructure, not for building screens directly. Use provideNgsTheme in app config to set theme, colorScheme, density, radius, primaryColor, persistence, and storageKey. Inject ThemeManagerService for runtime theme, color scheme, density, radius, and primary color changes. Use utility directives such as ngsRipple, ngsAutoFocus, ngsFocusElement, ngsTextareaAutoSize, and ngsDebounceTime when a specific low-level behavior is needed. Use pipes such as InitialsPipe, FormatFileSizePipe, SafeHtmlPipe, SafeResourceUrlPipe, OrderByPipe, FilterByPropertyPipe, and SearchByPropertyPipe when they fit. Use ErrorStateMatcher or ShowOnDirtyErrorStateMatcher for form error behavior, and observer/services/utils only for low-level infrastructure. Do not use core as a replacement for real UI components. Do not build admin screens from core primitives; choose concrete components such as Button, Card, DataView, Table, FormField, Dialog, Navigation, Layout, or other component entry points. Do not import Option from core directly for ordinary option lists when Select, Autocomplete, or another component owns the option pattern.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -2854,7 +2863,7 @@
       "docsPath": "/libraries/data-view",
       "docsOverviewSource": "projects/docs/src/app/libraries/data-view/overview/overview.html",
       "purpose": "Build operational data grids for records that users need to inspect, organize, select, and act on.",
-      "useWhen": "Use for admin screens, CRM and ERP records, users, orders, invoices, logs, tasks, assets, and any dataset where the table is the main work surface. DataView is configured with columnDefs plus local data or a server-side datasource, and supports sorting, search/filter state, pagination, row selection, loading states, empty states, column resizing, column visibility and order, pinned or sticky columns, custom cell renderers, refresh, snapshots, and ngsDataViewActionBar. Do not use for small static tables or simple read-only tabular content; use Table. Do not use as a card list, layout grid, chart widget, report summary, or form editor.",
+      "useWhen": "Use for datatables and working data surfaces in admin screens, CRM and ERP records, users, orders, invoices, logs, tasks, assets, and any dataset where the table is the main interactive work surface. Choose DataView when users need row actions, selection, sorting, search/filter state, pagination, loading or empty states, column resizing, column visibility/order, pinned or sticky columns, custom cell renderers, refresh, snapshots, server-side data, or ngsDataViewActionBar. DataView is configured with columnDefs plus local data or a server-side datasource. Do not use for small static tables or simple read-only tabular content; use Table. Do not use as a card list, layout grid, chart widget, report summary, or form editor.",
       "exampleTopics": [
         "Data View",
         "Basic data view",
@@ -4123,8 +4132,8 @@
       "sourceRoot": "projects/components/grid/src",
       "docsPath": "/components/grid",
       "docsOverviewSource": "projects/docs/src/app/components/grid/overview/overview.html",
-      "purpose": "Render configuration-driven dashboard widgets in a 12-column grid.",
-      "useWhen": "Use for admin dashboards, configurable widget layouts, analytics home screens, portal start pages, and nested dashboard sections where widget components are selected from configuration or data. Provide configs that map item types to lazy-loaded components and optional skeletons, and items with id, type, columns, height, content, skeletonHeight, and children. Widgets can inject GRID and call markItemAsLoaded(id), especially with waitWhenAllItemsLoaded. Do not use Grid as a normal CSS layout helper for forms, pages, cards, or repeated elements; use TailwindCSS grid/flex classes. Do not use for tables or datasets; use Table or DataView. Do not use for file/media grids; use upload/media components. Do not use as a drag-and-drop dashboard builder when interactive rearranging/resizing is required.",
+      "purpose": "Render static dashboard widgets in a predefined 12-column layout.",
+      "useWhen": "Use ngs-grid when the application defines a static dashboard or widget layout and users do not need to rearrange, customize, or save the dashboard order. Provide configs that map item types to components and items with id, type, columns, height, content, skeletonHeight, and children. Widgets can inject GRID and call markItemAsLoaded(id), especially with waitWhenAllItemsLoaded. Use Grid for fixed analytics sections, portal start pages, and nested dashboard sections where the structure is known. Do not use Grid as a normal CSS layout helper for forms, pages, cards, or repeated elements; use TailwindCSS grid/flex classes. Do not use Grid for dashboards users can rearrange or change; use Tiles. Do not use for tables or datasets; use Table or DataView. Do not use for file/media grids; use upload/media components.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -4905,8 +4914,8 @@
       "sourceRoot": "projects/components/input-mask/src",
       "docsPath": "/forms/input-mask",
       "docsOverviewSource": "projects/docs/src/app/forms/input-mask/overview/overview.html",
-      "purpose": "Constrain text entry to a specific pattern.",
-      "useWhen": "Use for phone numbers, IDs, codes, formatted numbers, and structured text.",
+      "purpose": "Format credit card input fields while the user types with ready-made mask directives.",
+      "useWhen": "Use on native inputs, usually with ngsInput inside ngs-form-field, for payment or billing fields that need credit card formatting. Available directives are ngsCreditCardNumberMask for grouped card numbers, ngsCreditCardExpiryDateMask for MM/YY expiry, and ngsCreditCardCvvMask for CVV/CVC. The directives format the visible input, set useful mobile keyboard and autocomplete attributes where applicable, and keep the Angular form value cleaned for card number and expiry. Do not use as a universal mask engine, validator, payment security layer, or compliance solution. Do not use for phone numbers; use PhoneInput. Do not use for custom IDs, tax numbers, IBAN, postal codes, arbitrary structured text, date pickers, selects, currency fields, country fields, or formatting saved display values; use dedicated components, validators, backend checks, or a custom mask directive.",
       "exampleTopics": [
         "Credit card number input mask",
         "Credit card expiry date input mask",
@@ -4964,16 +4973,19 @@
       "sourceRoot": "projects/components/input-validator/src",
       "docsPath": "/forms/input-validator",
       "docsOverviewSource": "projects/docs/src/app/forms/input-validator/overview/overview.html",
-      "purpose": "Validate user input and show validation feedback.",
-      "useWhen": "Use for forms that need reusable client-side validation behavior.",
+      "purpose": "Provide ready-made Angular ValidatorFn helpers for common reusable form validation rules.",
+      "useWhen": "Use in reactive forms with ngs-form-field, ngsInput, Angular Validators, and ngs-error when a preset client-side validator fits. Current payment presets include creditCardNumberValidator() for cleaned card number length and Luhn checksum, expiryDateValidator() for MMYY expiry format, valid month, and not-in-past checks, and creditCardCvvValidator() for numeric CVV/CVC length with optional minLength and maxLength. Pair these validators with InputMask directives when the user also needs formatted payment input. Do not use InputValidator as a UI component, input formatter, input mask, replacement for Angular built-in validators, backend validation, payment processor validation, or security/compliance layer. Do not use for arbitrary custom business rules unless a dedicated preset exists; write a project validator.",
       "exampleTopics": [
-        "Credit card input validator"
+        "Credit card input validators"
       ],
       "minimalExample": null,
       "exampleFiles": [],
       "previewAsset": "projects/components/input-validator/preview.svg",
       "selectors": [],
       "exportedSymbols": [
+        "creditCardCvvValidator",
+        "CreditCardCvvValidatorOptions",
+        "creditCardNumberValidator",
         "expiryDateValidator"
       ],
       "inputs": [],
@@ -4992,9 +5004,11 @@
       "sourceRoot": "projects/components/kanban-board/src",
       "docsPath": "/libraries/kanban-board",
       "docsOverviewSource": "projects/docs/src/app/libraries/kanban-board/overview/overview.html",
-      "purpose": "Organize items into draggable workflow columns.",
-      "useWhen": "Use for tasks, deals, issues, content pipelines, and status-based workflows.",
-      "exampleTopics": [],
+      "purpose": "Render a horizontal workflow board with status columns and draggable cards.",
+      "useWhen": "Use ngs-kanban-board for tasks, issues, CRM deals, hiring pipelines, content workflows, support tickets, and other status-based boards where users drag items within a column or between columns. Provide columns with id, name, color, and items; each item should include at least name and position. Render cards through a custom ngsKanbanItemDef template and compose card content with NgStarter components such as Avatar, Badge, Icon, Button, and text. The board mutates local arrays with CDK moveItemInArray and transferArrayItem and emits itemSorted, itemTransferred, itemDropped, itemClick, itemAdd, columnEdit, and columnDelete; the app must persist the new order, status, and business data to the backend. Do not use for simple record tables; use Table or DataView. Do not use for static lists; use List. Do not use for dashboard widget layouts; use Grid. Do not use for calendars, timelines, arbitrary drag-and-drop builders, or screens without real workflow/status columns.",
+      "exampleTopics": [
+        "Kanban Board"
+      ],
       "minimalExample": null,
       "exampleFiles": [],
       "previewAsset": "projects/components/kanban-board/preview.svg",
@@ -5042,8 +5056,8 @@
       "sourceRoot": "projects/components/kbd/src",
       "docsPath": "/components/kbd",
       "docsOverviewSource": "projects/docs/src/app/components/kdb/overview/overview.html",
-      "purpose": "Render keyboard keys or shortcuts.",
-      "useWhen": "Use in help text, command menus, docs, and power-user workflows.",
+      "purpose": "Display visual keyboard keys and shortcut hints.",
+      "useWhen": "Use ngs-kbd for a single key such as Cmd, Shift, K, Esc, or an arrow key, and ngs-kbd-group for key combinations with plus signs between keys. Use in menus, command palettes, toolbars, help text, onboarding, documentation, and shortcut hints next to commands. Kbd is visual only: it does not register shortcuts, handle keyboard events, trigger actions, or provide command logic. Do not use as a clickable button; use Button or IconButton. Do not use for statuses or counts; use Badge. Do not use for tags or categories; use Chips. Do not use as normal body text or for actions that do not have a real shortcut handled elsewhere.",
       "exampleTopics": [
         "Basic Keyboard",
         "Keyboard group",
@@ -5102,8 +5116,8 @@
       "sourceRoot": "projects/components/layout/src",
       "docsPath": "/components/layout",
       "docsOverviewSource": "projects/docs/src/app/components/layout/overview/overview.html",
-      "purpose": "Compose common app layout regions for admin and dashboard screens.",
-      "useWhen": "Use for shells, page scaffolding, content/sidebar layouts, and structural UI.",
+      "purpose": "Provide the base top-level shell for an application, admin area, dashboard, or large workspace page.",
+      "useWhen": "Use ngs-layout as the outer structural frame when the whole screen needs topbar, header, sidebar, scrollable content, aside, or footer regions. Use root for a full viewport application shell. Use ngs-layout-content for the main scroll container, and LayoutApiService with layoutId when the sidebar must be shown, hidden, or toggled. Nested layouts are appropriate when a large app shell contains another structured workspace with its own header/content/footer. Do not use Layout as a small wrapper, card, spacing helper, form grouping tool, or generic grid system. Use TailwindCSS grid, flex, and spacing classes inside layout regions. Use Grid for static dashboard widgets, Tiles for dashboards users can rearrange or customize, DataView or Table for datasets, Drawer for overlay side panels, and Navigation, Sidebar, or Sidenav components inside sidebars.",
       "exampleTopics": [
         "Layout header",
         "Layout sidebar",
@@ -5183,8 +5197,8 @@
       "sourceRoot": "projects/components/list/src",
       "docsPath": "/components/list",
       "docsOverviewSource": "projects/docs/src/app/components/list/overview/overview.html",
-      "purpose": "Display repeated rows of related content or actions.",
-      "useWhen": "Use for navigation-adjacent lists, settings rows, activity feeds, and item collections.",
+      "purpose": "Display a vertical group of related rows with consistent icon, avatar, title, line, meta, action, and selection structure.",
+      "useWhen": "Use ngs-list with ngs-list-item for settings rows, files, messages, activity feed items, compact collections, simple action rows, and small repeated row groups. Use ngs-selection-list with ngs-list-option when users choose one or more rows. Use ngs-nav-list for simple navigation rows in sidebars or compact navigation areas. Use ngs-action-list for vertical action groups that are not dropdown menus. Compose each row with ngsListItemIcon or ngsListItemAvatar, ngsListItemTitle, ngsListItemLine, and ngsListItemMeta. Do not use List for large tabular datasets, columns, sorting, pagination, or bulk operations; use Table or DataView. Do not use for trigger-based dropdown or context actions; use Menu. Do not use as a full app navigation system when Navigation fits better. Do not use as a generic layout container.",
       "exampleTopics": [
         "Basic List",
         "List With Sections",
@@ -5299,8 +5313,8 @@
       "sourceRoot": "projects/components/logo/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Render NgStarter or product logo variants.",
-      "useWhen": "Use in app shells, headers, auth pages, and branding areas.",
+      "purpose": "Render a product or brand logo as a composed mark, name, and optional description.",
+      "useWhen": "Use ngs-logo or a[ngs-logo] in app shells, headers, sidebars, auth screens, splash screens, and branding areas. Compose it with ngs-logo-shape for the brand mark or image, ngs-logo-text for the product name with size small, default, or large, and ngs-logo-description for a short subtitle, version, or status. Use a[ngs-logo] when the logo navigates to the home page. Do not use Logo for user or team identity; use Avatar. Do not use for standalone action icons; use Icon inside Button or IconButton. Do not use for product thumbnails, decorative images, empty states, arbitrary SVG illustrations, or general image display.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -5347,8 +5361,8 @@
       "sourceRoot": "projects/components/marquee/src",
       "docsPath": "/components/marquee",
       "docsOverviewSource": "projects/docs/src/app/components/marquee/overview/overview.html",
-      "purpose": "Animate a horizontal stream of repeated content.",
-      "useWhen": "Use for compact announcements, logos, highlights, and non-critical decorative motion.",
+      "purpose": "Display an infinite horizontal stream of repeated non-critical content.",
+      "useWhen": "Use ngs-marquee for motion content that can move and repeat without losing meaning: promo text, short highlights, logos, badges, partner names, compact news, and decorative content showcases. Use reverse to change direction. Use pauseOnHover when users may need more time to read or interact with the moving content. Do not use Marquee for important system notices, errors, warnings, required actions, or content the user must read; use Announcement, Alert, ActionRequired, or Incidents. Do not use for navigation, tables, task lists, precise ticker data, forms, or interactive work surfaces.",
       "exampleTopics": [
         "Basic marquee",
         "Marquee reverse",
@@ -5409,8 +5423,8 @@
       "sourceRoot": "projects/components/menu/src",
       "docsPath": "/components/menu",
       "docsOverviewSource": "projects/docs/src/app/components/menu/overview/overview.html",
-      "purpose": "Show contextual action lists anchored to a trigger.",
-      "useWhen": "Use for row actions, overflow menus, user menus, context menus, and toolbars.",
+      "purpose": "Show a short contextual set of commands in an overlay opened from a trigger or right-click area.",
+      "useWhen": "Use ngs-menu for row actions, overflow more actions, user menus, context menus, toolbar actions, and nested command groups. Put ngsMenuTriggerFor on a button ngsButton, button ngsIconButton, row action, or toolbar control. Use ngsContextMenuTriggerFor for right-click menus. Use button ngs-menu-item for commands, and ngs-menu-divider, ngs-menu-heading, ngs-menu-header, and ngs-menu-footer for structure. Use nested menus when a command opens a secondary command group. Use ngsMenuContent with ngsMenuTriggerData when the same menu template must render lazily for a specific row, user, or item. Do not use Menu for selecting form values; use Select, Autocomplete, ColorSwitcher, Datepicker, or another dedicated form control. Do not use for persistent navigation; use Navigation, Sidebar, Sidenav, or NavList. Do not use for long lists, tables, filters, forms, modal workflows, command palettes, or bulk action bars; use List, Table/DataView, Dialog, CommandBar, or Overlay/Popover as appropriate.",
       "exampleTopics": [
         "Basic Menu",
         "Menu With Icons",
@@ -5555,8 +5569,8 @@
       "sourceRoot": "projects/components/micro-chart/src",
       "docsPath": "/micro-charts",
       "docsOverviewSource": null,
-      "purpose": "Render compact inline charts for small dashboard metrics.",
-      "useWhen": "Use in KPI cards, table cells, summaries, and dense analytics panels.",
+      "purpose": "Render compact line, bar, and pie charts for small trends, comparisons, and proportional breakdowns.",
+      "useWhen": "Use ngs-mchart-line for a small trend over time or ordered values, ngs-mchart-bar for a compact comparison of several numeric values, and ngs-mchart-pie for a small proportional breakdown. Use MicroChart inside KPI cards, dashboard summaries, table cells, list rows, reports, and dense admin panels. It can also be used as a simple standalone dashboard chart when the chart type and level of detail match what MicroChart can display. Provide fixed dimensions with TailwindCSS classes such as w-*, h-*, or size-* because the chart renders inside its container. Use ngs-mchart-tooltip, ngs-mchart-tooltip-title, and ngs-mchart-tooltip-body when hover context is needed. Do not use MicroChart for complex analytics, detailed axes, advanced legends, drilldown, zooming, financial charting, or advanced interactions; use ECharts for complex charts. Do not use instead of ProgressBar or Gauge for a single progress percentage, Badge for status, or DataView/Table for tabular data.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -5655,8 +5669,8 @@
       "sourceRoot": "projects/components/navigation/src",
       "docsPath": "/navigation/navigation",
       "docsOverviewSource": "projects/docs/src/app/navigation/nav/overview/overview.html",
-      "purpose": "Render primary or secondary navigation structures.",
-      "useWhen": "Use in app shells, sidebars, product sections, and nested admin navigation.",
+      "purpose": "Render a persistent product navigation structure when ngs-sidebar is not used.",
+      "useWhen": "Use ngs-navigation for custom navigation areas, section navigation, settings navigation, admin navigation, and nested navigation groups when the screen needs product links but does not use ngs-sidebar. ngs-sidebar has its own navigation model, so do not duplicate ngs-navigation inside ngs-sidebar. Use ngs-navigation-item or [ngs-navigation-item] for destinations, key with activeKey for active state, activateByRoute for URL-based activation, autoScrollToActiveItem for long navigation, ngs-navigation-heading for sections, ngs-navigation-divider for group separation, and ngs-navigation-group with ngs-navigation-group-toggle and ngs-navigation-group-menu for expandable nested destinations. Use ngsNavigationItemIcon, ngsNavigationGroupToggleIcon, and ngsNavigationItemBadge for icons, toggles, and badges. Use dataSource with ngsNavigationItemDef when navigation comes from config or backend data. Do not use Navigation for trigger-based action menus; use Menu. Do not use for ordinary row lists; use List or NavList. Do not use for breadcrumbs, tabs, wizard steps, command palettes, form selection, table row actions, or bulk actions.",
       "exampleTopics": [
         "Basic Navigation",
         "Navigation with heading",
@@ -5858,8 +5872,8 @@
       "sourceRoot": "projects/components/notifications/src",
       "docsPath": "/components/notifications",
       "docsOverviewSource": "projects/docs/src/app/components/notifications/overview/overview.html",
-      "purpose": "Display notification lists, notification items, or notification surfaces.",
-      "useWhen": "Use for user alerts, activity updates, inbox-style feeds, and app header popovers.",
+      "purpose": "Display user-facing notification events in a structured feed or inbox.",
+      "useWhen": "Use Notifications for events addressed to the current user: comments, mentions, invitations, assignments, access requests, status changes, completed processes, and user-specific updates. Use ngs-notification for one event, ngsNotificationAvatar for the source avatar or icon, ngs-notification-message for the main sentence, ngs-notification-actor for the actor, ngs-notification-content for nested context such as a comment, file, quote, card, or preview, and ngs-notification-time for time. Use isUnread for unread state. Use ngs-notification-list with ngsNotificationDef when notifications come from an array and each type needs its own template. Use ngsNotificationControlsDef for per-notification controls such as mute, delete, or mark as read, often with Menu. Do not use Notifications for page-level system messages; use Alert or Announcement. Do not use for critical required actions; use ActionRequired. Do not use for service health; use Incidents. Do not use for generic activity feeds that are not user notifications; use List. Do not use for transient toast/snackbar messages.",
       "exampleTopics": [
         "Basic notifications",
         "Notification list"
@@ -5951,8 +5965,8 @@
       "sourceRoot": "projects/components/number-input/src",
       "docsPath": "/forms/number-input",
       "docsOverviewSource": "projects/docs/src/app/forms/number-input/overview/overview.html",
-      "purpose": "Capture numeric values with appropriate controls and formatting.",
-      "useWhen": "Use for quantities, limits, pricing, thresholds, and numeric settings.",
+      "purpose": "Capture a numeric form value with typing, stepper controls, min/max limits, and Angular forms integration.",
+      "useWhen": "Use ngs-number-input inside one ngs-form-field when users need to type a number or adjust it with increase/decrease controls. Good for quantities, limits, thresholds, durations, percentages, ratings, numeric settings, seat counts, day counts, and budget-like numeric values. Use ngModel or formControlName, min and max for allowed bounds, step for increment/decrement size, readonly/disabled/required as normal form states, and ngsDecreaseControl or ngsIncreaseControl only when custom control icons are needed. Use TailwindCSS classes on ngs-form-field or surrounding layout for width and grouping. Do not use for normal text; use ngsInput. Do not use for phone numbers; use PhoneInput. Do not use for OTP, MFA, passcodes, or invite codes; use PinInput. Do not use for selecting currency; use CurrencySelect plus a numeric amount field when needed. Do not use for sliders/ranges, display-only KPI values, progress, or charts; use the dedicated component such as Gauge, ProgressBar, MicroChart, or a text/KPI layout.",
       "exampleTopics": [
         "Basic Number Input",
         "Custom Controls",
@@ -6043,8 +6057,8 @@
       "sourceRoot": "projects/components/option/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Provide reusable option primitives for select-like controls.",
-      "useWhen": "Use internally or alongside option-based components such as select and autocomplete.",
+      "purpose": "Provide a low-level selectable option primitive for Select, Autocomplete, and other option-parent controls.",
+      "useWhen": "Use ngs-option inside ngs-select, ngs-autocomplete, and other NgStarter dropdown/listbox controls that explicitly expect options, such as CountrySelect, CurrencySelect, DateFormatSelect, Timepicker, FilterBuilder, and similar controls. Use [value] for the form value and disabled when the option cannot be selected. Use ngs-optgroup to group related options under a label. Keep option text short and readable because the viewValue is derived from the rendered text. Do not use ngs-option as a generic list row, button, menu item, navigation item, table row, card, or custom layout block. Use MenuItem or Button for actions, Navigation/List/NavList for navigation and lists, RadioCard for rich card selection, and ColorSwitcher for fixed color choices. Agents usually should not import Option separately unless they are composing Select, Autocomplete, or another option-based component.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -6118,8 +6132,8 @@
       "sourceRoot": "projects/components/overlay/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Position floating UI relative to an anchor.",
-      "useWhen": "Use for custom popovers, dropdowns, panels, menus, and floating surfaces.",
+      "purpose": "Provide low-level shared positioning utilities for components that create Angular CDK floating overlays.",
+      "useWhen": "Use Overlay only when implementing a new NgStarter component or custom directive that directly manages Angular CDK Overlay, portal rendering, backdrop or outside-click behavior, close behavior, keyboard/focus handling, and anchored positioning. Use OverlayPosition values such as below-start, below-center, below-end, above-*, before-*, and after-*. Use new PositionManager().build(position) to create fallback ConnectedPosition[] pairs. Do not use Overlay directly when building a normal admin page or feature screen. Prefer higher-level components: Menu for action dropdowns and context menus, Popover for lightweight anchored content, Dialog for modal workflows, Drawer for side overlays, Select/Autocomplete/Datepicker/ColorPicker for form dropdowns, and Tooltip for simple hints.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -6145,8 +6159,8 @@
       "sourceRoot": "projects/components/page-loading-bar/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Show route or page-level loading progress.",
-      "useWhen": "Use during navigation, large async page transitions, or app-wide loading states.",
+      "purpose": "Show a global thin loading bar during Angular Router navigation.",
+      "useWhen": "Use ngs-page-loading-bar once in the top-level app shell or root layout, usually near the root layout or router outlet, to provide navigation feedback. It listens to Angular Router events automatically: NavigationStart shows the bar, and NavigationEnd, NavigationCancel, or NavigationError finish it. Use fixed when the bar should stay attached to the viewport. Do not use PageLoadingBar for loading a specific block, table, card, form, submit/save/upload operation, or async work inside a page. Use ProgressBar, ProgressSpinner, BlockLoader, Skeleton, ScreenLoader, or the component-specific loading state for local loading. Do not use it as a real task completion percentage; it is route navigation feedback only.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -6178,8 +6192,8 @@
       "sourceRoot": "projects/components/paginator/src",
       "docsPath": "/components/paginator",
       "docsOverviewSource": "projects/docs/src/app/components/paginator/overview/overview.html",
-      "purpose": "Navigate paged datasets.",
-      "useWhen": "Use with tables, data views, lists, and server-side record browsing.",
+      "purpose": "Control pages of a dataset with range label, previous/next navigation, optional first/last buttons, and page size selection.",
+      "useWhen": "Use ngs-paginator next to paged tables, DataView screens, search results, record lists, and server-side browsing. Provide length for total records, pageSize for records per page, zero-based pageIndex for the current page, and pageSizeOptions for allowed page sizes. Handle the page event to update local data or request the next page from an API; PageEvent includes previousPageIndex, pageIndex, pageSize, and length. Use hidePageSize when the page size is fixed. Use showFirstLastButtons when users need quick first/last navigation. Use PaginatorIntl to localize labels and range text. Do not use Paginator for app route navigation; use Navigation, Tabs, or Breadcrumbs. Do not use for wizard or onboarding steps; use Stepper or HeadlessStepper. Do not use for carousel slides, media browsing, or standalone UI without a paged dataset. If DataView already owns pagination, use its pagination model instead of adding a separate paginator.",
       "exampleTopics": [
         "Basic Paginator",
         "Configurable Paginator"
@@ -6256,8 +6270,8 @@
       "sourceRoot": "projects/components/panel/src",
       "docsPath": "/components/panel",
       "docsOverviewSource": "projects/docs/src/app/components/panel/overview/overview.html",
-      "purpose": "Group content inside a structured panel surface.",
-      "useWhen": "Use for dashboard sections, settings panels, details, and repeated admin modules.",
+      "purpose": "Create a local structured work area with header, subheader, sidebar, scrollable content, aside, and footer regions.",
+      "useWhen": "Use ngs-panel inside a page or workspace for admin modules, settings areas, editors, detail panes, inspectors, dashboard sections, and local surfaces that need their own header, footer, side columns, and scrollable body. Use ngs-panel-header for local title, toolbar, or actions; ngs-panel-subheader for filters or secondary status; ngs-panel-sidebar for a local left column; ngs-panel-content for the main scrollable area; ngs-panel-aside for a local right column; and ngs-panel-footer for local footer actions or status. Use absolute when the panel should fill the parent bounds. Use TailwindCSS classes for sizing, borders, spacing, and inner layout. Do not use Panel as the top-level application shell; use Layout. Do not use for small content blocks; use Card. Do not use for overlay side panels; use Drawer. Do not use as a generic spacing wrapper or form grid; use TailwindCSS grid/flex and FormField.",
       "exampleTopics": [
         "Basic panel",
         "Basic with extra columns (sidebar and aside)",
@@ -6322,8 +6336,8 @@
       "sourceRoot": "projects/components/password-strength/src",
       "docsPath": "/forms/password-strength",
       "docsOverviewSource": "projects/docs/src/app/forms/password-strength/overview/overview.html",
-      "purpose": "Show password quality feedback while users type.",
-      "useWhen": "Use in signup, reset password, account security, and credential forms.",
+      "purpose": "Show real-time password strength feedback and requirement status while users create or change a password.",
+      "useWhen": "Use PasswordStrength in signup, reset password, change password, account security, and credential setup forms. Use input type=\"password\" ngsInput inside one ngs-form-field for the actual password field, then place ngs-password-strength [password]=\"password.value\" below it for the strength bar. Use ngs-password-strength-info with a template reference to the strength component when users need to see requirement status for lowercase, uppercase, digit, special character, min length, or custom rules. Use ngs-pass-toggle-visibility as a suffix control inside the password form field when users need show/hide password behavior. Configure min, max, enableLengthRule, enableDigitRule, enableSpecialCharRule, and customValidator as needed, and listen to strengthChanged when the screen needs the score. Do not use PasswordStrength for OTP, MFA, invite codes, or passcodes; use PinInput. Do not use for generic text validation. Do not use for a login password field unless the user is creating or changing a password and strength feedback is useful. Do not rely on it as the only password security policy; backend validation is still required.",
       "exampleTopics": [
         "Basic password strength",
         "Password strength info",
@@ -6415,8 +6429,8 @@
       "sourceRoot": "projects/components/phone-input/src",
       "docsPath": "/forms/phone-input",
       "docsOverviewSource": "projects/docs/src/app/forms/phone-input/overview/overview.html",
-      "purpose": "Capture phone numbers with country-aware formatting and validation.",
-      "useWhen": "Use in profiles, billing, contact forms, onboarding, and support workflows.",
+      "purpose": "Capture real phone numbers with country selection, flag, dial code, formatting, and libphonenumber-js validation.",
+      "useWhen": "Use ngs-phone-input inside one ngs-form-field for profile, contact, billing, onboarding, checkout, support, invite, and contact forms when the value must be a real phone number. Use formControlName or ngModel, show invalidPhone with ngs-error, set defaultSelectedCountryCode when the initial country should not be us, use onlyCountries to restrict available countries, preferredCountries to pin common countries to the top, format=\"default | national | international\" for display formatting, and countryChanged when the screen needs to react to country changes. Do not use plain ngsInput, NumberInput, or InputMask for country-aware phone numbers. Do not use CountrySelect instead of PhoneInput; CountrySelect chooses a country but does not capture a phone number. Do not use for OTP, MFA, passcodes, or invite codes; use PinInput.",
       "exampleTopics": [
         "Basic phone input",
         "Phone input with custom country list",
@@ -6491,8 +6505,8 @@
       "sourceRoot": "projects/components/pin-input/src",
       "docsPath": "/forms/pin-input",
       "docsOverviewSource": "projects/docs/src/app/forms/pin-input/overview/overview.html",
-      "purpose": "Capture short multi-digit verification or security codes.",
-      "useWhen": "Use for OTP, MFA, invite codes, passcodes, and verification flows.",
+      "purpose": "Capture short one-character-per-cell codes for verification and secure access flows.",
+      "useWhen": "Use ngs-pin-input as a standalone form control for OTP, MFA, SMS or email verification codes, invite codes, passcodes, payment verification, and secure access codes. Use ngModel or formControlName, length for the number of cells, placeholder for the empty-cell hint, acceptOnly for allowed symbols with digits as the default, and disabled for disabled state. The component manages one-character cells and focus movement between them. Do not use PinInput for phone numbers; use PhoneInput. Do not use for creating or changing passwords; use ngsInput with PasswordStrength. Do not use for numeric settings or quantities; use NumberInput. Do not use for long codes, serial numbers, coupons, or arbitrary text; use a normal ngsInput. Do not wrap it in ngs-form-field as if it were a single text input; the component renders its own internal form fields.",
       "exampleTopics": [
         "Basic Pin Input",
         "Placeholder",
@@ -6561,8 +6575,8 @@
       "sourceRoot": "projects/components/popover/src",
       "docsPath": "/components/popover",
       "docsOverviewSource": "projects/docs/src/app/components/popover/overview/overview.html",
-      "purpose": "Show lightweight contextual content anchored to another element.",
-      "useWhen": "Use for quick details, simple forms, explanations, and non-modal contextual UI.",
+      "purpose": "Show lightweight contextual content in an overlay anchored to a trigger element.",
+      "useWhen": "Use Popover for short details, previews, small interactive content, compact forms, and richer explanations that need more than a plain tooltip but do not require a modal workflow. Put ngsPopoverTriggerFor on the trigger element and point it to ngs-popover or a TemplateRef. Use trigger=\"click\" for explicit opening and trigger=\"hover\" only for preview-style content that can disappear safely. Use position for below/above/before/after placement. Use ngsPopoverContext with ngsPopoverContent for lazy content that needs trigger data. Use a raw TemplateRef only when the standard ngs-popover-panel wrapper should be replaced. Use hasBackdrop, closeOnOriginClick, closeOnOriginMouseLeave, and origin only when custom close or anchoring behavior is needed. Do not use Popover for command lists; use Menu. Do not use for short plain hints; use Tooltip. Do not use for modal workflows, confirmations, or complex forms; use Dialog or Confirm. Do not use for side panels; use Drawer. Do not use for form dropdowns; use Select, Autocomplete, Datepicker, or ColorPicker. Do not use low-level Overlay directly when Popover fits.",
       "exampleTopics": [
         "Basic Popover",
         "Show popover by hover",
@@ -6649,8 +6663,8 @@
       "sourceRoot": "projects/components/progress-bar/src",
       "docsPath": "/components/progress-bar",
       "docsOverviewSource": "projects/docs/src/app/components/progress-bar/overview/overview.html",
-      "purpose": "Show linear progress or completion state.",
-      "useWhen": "Use for uploads, long-running tasks, setup completion, and bounded progress.",
+      "purpose": "Show linear progress for an operation or process.",
+      "useWhen": "Use ngs-progress-bar for uploads, downloads, imports, setup completion, sync, processing, form completion, buffering, and other horizontal progress states. Use mode=\"determinate\" with value from 0 to 100 when the percentage is known. Use mode=\"indeterminate\" when work is happening but the percentage is unknown. Use mode=\"buffer\" with value and bufferValue when both primary and buffered progress should be visible. Use mode=\"query\" while waiting before known progress starts. Use animationEnd only when the screen must react after the transition finishes. Do not use ProgressBar for Angular Router navigation; use PageLoadingBar. Do not use to block a whole area; use BlockLoader. Do not use for skeleton content loading; use Skeleton. Do not use for circular KPI or percent metrics; use Gauge. Do not use for mini trends or charts; use MicroChart. Do not use as a status label; use Badge or text.",
       "exampleTopics": [
         "Basic Progress Bar",
         "Intermediate Progress Bar",
@@ -6716,8 +6730,8 @@
       "sourceRoot": "projects/components/radio/src",
       "docsPath": "/forms/radio",
       "docsOverviewSource": "projects/docs/src/app/forms/radio/overview/overview.html",
-      "purpose": "Let users choose exactly one option from a visible set.",
-      "useWhen": "Use for short mutually exclusive choices in forms and settings.",
+      "purpose": "Let users choose exactly one option from a small visible set of mutually exclusive choices.",
+      "useWhen": "Use ngs-radio-group with ngs-radio-button for simple text options in forms, settings, filters, and preference screens where all options should be visible and the user can choose only one. Put value on each radio button and bind the group value with value, ngModel, or formControlName. Use name when native form grouping matters, disabled on the group or individual radio button when needed, and change when the screen must react to selection changes. Do not use Radio for multiple selection; use Checkbox. Do not use for long option lists; use Select or Autocomplete. Do not use for rich options with descriptions, icons, or large clickable blocks; use RadioCard. Do not use as a segmented view switcher; use Segmented or ButtonToggle. Do not use for yes/no boolean settings when SlideToggle or Checkbox better matches the meaning.",
       "exampleTopics": [
         "Basic Radios",
         "Radio Card",
@@ -6785,8 +6799,8 @@
       "sourceRoot": "projects/components/radio-card/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Let users choose one option from richer card-like choices.",
-      "useWhen": "Use for plans, templates, payment methods, layouts, or options needing descriptions.",
+      "purpose": "Let users choose exactly one option from a small set of rich card-like choices.",
+      "useWhen": "Use ngs-radio-card-group as a form control group and ngs-radio-card for each option when every option needs a large clickable card with title, icon, description, or supporting content. Use ngs-radio-card-title for the option name and optional icon, ngs-radio-card-content for details, value on each card, and formControlName or ngModel on the group. Use TailwindCSS grid or flex around the group to lay cards out in columns or rows. Good for plan selection, privacy modes, template choices, payment methods, layout options, delivery methods, onboarding choices, and settings choices with explanation. Do not use for simple short text options; use Radio. Do not use for multiple selection; use Checkbox or a dedicated checkbox-card pattern when available. Do not use for long lists; use Select or Autocomplete. Do not use as a normal content card without selection; use Card. Do not use as a segmented mode switch; use Segmented or ButtonToggle.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -6839,8 +6853,8 @@
       "sourceRoot": "projects/components/rail-nav/src",
       "docsPath": "/navigation/rail-nav",
       "docsOverviewSource": "projects/docs/src/app/navigation/rail-nav/overview/overview.html",
-      "purpose": "Provide compact vertical navigation with icons and labels.",
-      "useWhen": "Use in dense app shells where sidebar space is constrained.",
+      "purpose": "Provide a compact vertical navigation rail with icons and short labels.",
+      "useWhen": "Use ngs-rail-nav when an app or workspace shell needs compact vertical navigation but there is not enough space for a full sidebar. Use ngs-rail-nav-item or [ngs-rail-nav-item] for destinations, ngsRailNavItemIcon for icons, key on each item, activeKey on the rail, and railNav.api.isActive(key) when the active item should change icon or styling. Good for narrow editor or workspace navigation, secondary product navigation, compact admin shells, and switching between primary sections. Do not use when you need a full sidebar with groups, nested navigation, or supporting content; use Sidebar or Sidenav. Do not use inside ngs-sidebar because Sidebar has its own navigation. Do not use for normal section navigation in content; use Navigation. Do not use for tabs, breadcrumbs, menu actions, segmented controls, or one-off icon buttons.",
       "exampleTopics": [
         "Basic rail navigation",
         "Rail navigation customization",
@@ -6923,8 +6937,8 @@
       "sourceRoot": "projects/components/resizable-container/src",
       "docsPath": "/components/resizable-container",
       "docsOverviewSource": "projects/docs/src/app/components/resizable-container/overview/overview.html",
-      "purpose": "Let users resize a container or panel.",
-      "useWhen": "Use for editors, inspectors, side panels, split workspaces, and dashboards.",
+      "purpose": "Let users manually resize the width of one container with a vertical drag handle.",
+      "useWhen": "Use ngs-resizable-container around content when the user should manually adjust the width of a single block. Good for resizable preview panes, editor canvas or containers, inspector or detail panels, side content areas, responsive demo areas, chart previews, and docs playgrounds. Use minWidth for the minimum allowed width, resized to persist or synchronize the new width, and TailwindCSS classes for border, height, initial width, layout, and inner content. Do not use as a full split layout between two panels; use Split or a dedicated splitter when available. Do not use for image resizing; use ImageResizer. Do not use for table or DataView column resizing; use the table/DataView resizing feature. Do not use as a normal responsive container when users should not manually resize it; use TailwindCSS responsive utilities or container queries. Do not use for Drawer or Sidebar resizing when those components own their sizing model.",
       "exampleTopics": [
         "Basic Resizable Container"
       ],
@@ -6967,8 +6981,8 @@
       "sourceRoot": "projects/components/screen-loader/src",
       "docsPath": "/components/screen-loader",
       "docsOverviewSource": "projects/docs/src/app/components/screen-loader/overview/overview.html",
-      "purpose": "Show a full-screen or page-level loading state.",
-      "useWhen": "Use while initial app, route, or major page data is loading.",
+      "purpose": "Show a full-screen blocking loading state for large global operations.",
+      "useWhen": "Use ScreenLoader when the user must wait and should not interact with the app: initial app load, major route or page data loading, account switching, tenant switching, auth or session restore, heavy backend tasks, and large global operations. Prefer ScreenLoaderService.open(messageOrTemplate) for programmatic full-screen overlays, keep the returned ScreenLoaderRef, and always call ref.close() when the operation finishes. Use afterOpened() and afterClosed() only for side effects. Use ngs-screen-loader with opened and message only when the open state is controlled directly in a template. message can be a short string or TemplateRef. Do not use ScreenLoader for local block, card, table, or form loading; use BlockLoader, Skeleton, ProgressSpinner, ProgressBar, or component-specific loading states. Do not use for route navigation progress; use PageLoadingBar. Do not use for known percentage progress; use ProgressBar. Do not leave a service-opened loader without closing its ref.",
       "exampleTopics": [
         "Basic screen loader"
       ],
@@ -7011,8 +7025,8 @@
       "sourceRoot": "projects/components/scroll-spy/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Track page sections and provide in-page navigation.",
-      "useWhen": "Use in long docs pages, settings pages, and detail screens with many sections.",
+      "purpose": "Provide in-page navigation for sections inside a long scrollable page or local scroll container.",
+      "useWhen": "Use ScrollSpy when a long page or panel has stable section ids and needs a table-of-contents style navigation that highlights the active section while scrolling and smooth-scrolls to sections on click. Use ngs-scroll-spy-nav as the nav container, ngs-scroll-spy-on with targetId matching a section id, ngs-scroll-spy-title for the nav heading, and ngs-scroll-spy-back-to-top for a top shortcut. It uses ngs-layout-content or ngs-panel-content as the scroll container when present, otherwise document body. Good for docs pages, long settings pages, profile or detail pages with many sections, policy/help pages, long form review pages, and article-like admin pages. Do not use for primary product navigation; use Navigation, Sidebar, Sidenav, or RailNav. Do not use for tabs between views; use Tabs. Do not use for route breadcrumbs; use Breadcrumbs. Do not use for wizard steps; use Stepper or HeadlessStepper. Do not use on short pages without real scrolling or without stable section ids.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -7060,8 +7074,8 @@
       "sourceRoot": "projects/components/scrollbar-area/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Provide a styled scrollable region.",
-      "useWhen": "Use when a panel, menu, list, or surface needs controlled scrolling.",
+      "purpose": "Provide a styled scroll container for bounded UI regions.",
+      "useWhen": "Use ngs-scrollbar-area when a sized panel, grid body, editor sidebar, asset list, menu, or similar surface needs consistent NgStarter scrollbars instead of native browser scrollbars. It hides native scrollbars, renders vertical and horizontal thumbs, supports auto-hide, thumb dragging, resize and mutation tracking, scrollbarWidth, autoHide, absolute fill mode, and scrolled output. Use [absolute]=\"true\" when the scroll area should fill a positioned parent region such as ngs-panel-content or a DataView viewport; make sure the parent already has a stable height and width. Do not use as a generic layout wrapper, spacing helper, page-level replacement for normal browser scrolling, carousel or scroll-snap component, virtualization engine, or a workaround for missing parent sizing.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -7103,8 +7117,8 @@
       "sourceRoot": "projects/components/segmented/src",
       "docsPath": "/forms/segmented",
       "docsOverviewSource": "projects/docs/src/app/forms/segmented/overview/overview.html",
-      "purpose": "Switch between compact mutually exclusive modes or filters.",
-      "useWhen": "Use for view modes, time ranges, filter states, and short setting groups.",
+      "purpose": "Let users choose one value from a compact set of mutually exclusive modes or options.",
+      "useWhen": "Use ngs-segmented with ngs-segmented-button when a short set of options should stay visible and only one value can be selected. Good for view modes, time ranges, display density, selection mode, chart or table mode, compact filters, and short settings. It works as an Angular form control through value, valueChange, ngModel, or formControlName, supports disabled state, sizes, text buttons, icons with ngsSegmentedIcon, and iconOnly buttons. Do not use Segmented for route or page navigation; use Tabs, Navigation, Sidebar, Sidenav, or RailNav. Do not use for independent on/off toggles; use ButtonToggle or SlideToggle. Do not use for long lists, rich option cards, dropdown choices, or fixed color palettes; use Radio, RadioCard, Select, Autocomplete, or ColorSwitcher.",
       "exampleTopics": [
         "Basic segmented control",
         "Segmented control sizes",
@@ -7208,8 +7222,8 @@
       "sourceRoot": "projects/components/select/src",
       "docsPath": "/forms/select",
       "docsOverviewSource": "projects/docs/src/app/forms/select/overview/overview.html",
-      "purpose": "Let users choose one or more options from a dropdown list.",
-      "useWhen": "Use for forms and filters when options are known and fit in a menu.",
+      "purpose": "Let users choose one or multiple values from a known dropdown list.",
+      "useWhen": "Use ngs-select inside one ngs-form-field when a form, filter, setting, table filter, DataView filter, or admin configuration field should choose from predefined options. Use ngs-option for options, ngs-optgroup for visible grouping, multiple for array values, placeholder, required, disabled, Angular forms, value, and selectionChange for state. Use ngs-select-trigger to customize the closed label, and ngs-select-header, ngs-select-body, or ngs-select-footer when the dropdown panel needs search, custom scrolling, or supporting controls. Do not use Select as a command menu or action list; use Menu. Do not use for route or page navigation; use Navigation, Tabs, Sidebar, Sidenav, or RailNav. Do not use for compact visible mode switching; use Segmented. Do not use for simple visible choices or rich card choices; use Radio or RadioCard. Do not use for arbitrary free text or large remote search suggestion flows; use Autocomplete or a dedicated async picker. Do not use generic Select when a domain-specific control exists, such as CountrySelect, CurrencySelect, DateFormatSelect, or TimezoneSelect.",
       "exampleTopics": [
         "Basic Select",
         "Getting and setting the select value",
@@ -7318,8 +7332,8 @@
       "sourceRoot": "projects/components/side-panel/src",
       "docsPath": "/navigation/side-panel",
       "docsOverviewSource": "projects/docs/src/app/navigation/side-panel/overview/overview.html",
-      "purpose": "Show secondary detail or task content beside the main page.",
-      "useWhen": "Use for inspectors, edit panels, previews, and contextual details.",
+      "purpose": "Provide an embedded side utility panel with tabbed tools beside the main content.",
+      "useWhen": "Use ngs-side-panel inside an app or workspace layout when the page needs persistent secondary tools or inspectors next to the primary content. Add ngs-side-panel-tab for each tab with tabId, label, and an optional Iconify icon name or custom icon TemplateRef. Good for info, outline, layers, activity, comments, assets, properties, preview settings, contextual inspectors, and quick tools in editors or admin workspaces. It can be positioned left or right and emits opened and closed. Do not use SidePanel as a temporary overlay; use Drawer. Do not use for modal workflows or confirmations; use Dialog or Confirm. Do not use as a generic page section; use Panel or Card. Do not use for primary app navigation; use Sidebar, Sidenav, Navigation, or RailNav. Do not use for tabs inside normal content; use Tabs. Do not use for simple action lists; use Menu.",
       "exampleTopics": [
         "Basic side panel"
       ],
@@ -7376,25 +7390,25 @@
       "sourceRoot": "projects/components/sidebar/src",
       "docsPath": "/navigation/sidebar",
       "docsOverviewSource": "projects/docs/src/app/navigation/sidebar/overview/overview.html",
-      "purpose": "Provide vertical app navigation and supporting sidebar content.",
-      "useWhen": "Use for admin app shells, workspace navigation, and persistent sections.",
+      "purpose": "Provide a complete vertical app or workspace sidebar with its own navigation system.",
+      "useWhen": "Use ngs-sidebar as the content inside a shell sidebar region, usually inside Sidenav or LayoutSidebar, when an admin app or workspace needs persistent sidebar navigation and supporting sidebar content. Compose it with ngs-sidebar-header, ngs-sidebar-body, ngs-sidebar-footer, ngs-sidebar-nav, ngs-sidebar-nav-item, ngs-sidebar-nav-group, ngs-sidebar-nav-group-toggle, ngs-sidebar-nav-group-menu, ngs-sidebar-nav-heading, ngs-sidebar-divider, ngsSidebarNavItemIcon, ngsSidebarNavItemBadge, and ngsSidebarNavGroupToggleIcon. Good for brand or workspace header, main app navigation, grouped routes, badges, active item state through activeKey, autoScrollToActiveItem, and data-driven nav templates. Sidebar owns navigation; when ngs-sidebar is not used and persistent navigation is needed, use Navigation. Do not use Sidebar as a generic left column, card, drawer content, inspector, page section, tabs, menu, or compact icon rail. Use Sidenav for responsive open, collapse, or overlay shell behavior, RailNav for compact icon navigation, SidePanel for secondary tabbed tools, Drawer for temporary overlay side content, and Panel or Card for content grouping.",
       "exampleTopics": [
         "Basic sidebar",
         "Sidebar with custom icons"
       ],
-      "minimalExample": "<div class=\"h-[600px] w-[300px] relative\">\n  <ngs-sidebar class=\"border border-muted rounded-2xl\">\n    <ngs-sidebar-header class=\"flex h-14 items-center px-4 font-bold text-primary border-b border-b-muted\">\n      NGSTARTER\n    </ngs-sidebar-header>\n    <ngs-sidebar-body>\n      <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n        @for (navItem of navItems; track navItem) {\n          @switch (navItem.type) {\n            @case ('group') {\n              <ngs-sidebar-nav-group>\n                <ngs-sidebar-nav-group-toggle>\n                  <ng-container ngsSidebarNavItemIcon>\n                    @if (navItem.icon) {\n                      <ngs-icon name=\"fluent:{{ navItem.icon }}\"/>\n                    }\n                  </ng-container>\n                  {{ navItem.label }}\n                  <ngs-icon name=\"fluent:chevron-down-24-regular\" ngsSidebarNavGroupToggleIcon/>\n                </ngs-sidebar-nav-group-toggle>\n                <ngs-sidebar-nav-group-menu>\n                  @for (childNavItem of navItem.children; track childNavItem) {\n                    <ngs-sidebar-nav-item [key]=\"childNavItem.key\">\n                      <ng-container ngsSidebarNavItemIcon>\n                        @if (childNavItem.icon) {\n                          <ngs-icon name=\"fluent:{{ navItem.icon }}\"/>\n                        }\n                      </ng-container>\n                      {{ navItem.label }}\n                    </ngs-sidebar-nav-item>\n                  }\n                </ngs-sidebar-nav-group-menu>\n              </ngs-sidebar-nav-group>\n            }\n            @case ('heading')\n...",
+      "minimalExample": "<div class=\"h-[600px] w-[300px] relative\">\n  <ngs-sidebar class=\"border border-muted rounded-2xl\">\n    <ngs-sidebar-header class=\"flex h-14 items-center px-4 font-bold text-primary border-b border-b-muted\">\n      NGSTARTER\n    </ngs-sidebar-header>\n    <ngs-sidebar-body>\n      <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n        @for (navItem of navItems; track navItem) {\n          @switch (navItem.type) {\n            @case ('group') {\n              <ngs-sidebar-nav-group>\n                <ngs-sidebar-nav-group-toggle>\n                  <ng-container ngsSidebarNavItemIcon>\n                    @if (navItem.icon) {\n                      <ngs-icon name=\"fluent:{{ navItem.icon }}\"/>\n                    }\n                  </ng-container>\n                  {{ navItem.label }}\n                  <ngs-icon name=\"fluent:chevron-down-24-regular\" ngsSidebarNavGroupToggleIcon/>\n                </ngs-sidebar-nav-group-toggle>\n                <ngs-sidebar-nav-group-menu>\n                  @for (childNavItem of navItem.children; track childNavItem) {\n                    <ngs-sidebar-nav-item [key]=\"childNavItem.key\">\n                      <ng-container ngsSidebarNavItemIcon>\n                        @if (childNavItem.icon) {\n                          <ngs-icon name=\"fluent:{{ childNavItem.icon }}\"/>\n                        }\n                      </ng-container>\n                      {{ childNavItem.label }}\n                    </ngs-sidebar-nav-item>\n                  }\n                </ngs-sidebar-nav-group-menu>\n              </ngs-sidebar-nav-group>\n            }\n            @case (\n...",
       "exampleFiles": [
         {
           "name": "basic-sidebar-example",
           "title": "Basic sidebar",
           "file": "projects/docs/src/app/navigation/sidebar/_examples/basic-sidebar-example/basic-sidebar-example.html",
-          "source": "<div class=\"h-[600px] w-[300px] relative\">\n  <ngs-sidebar class=\"border border-muted rounded-2xl\">\n    <ngs-sidebar-header class=\"flex h-14 items-center px-4 font-bold text-primary border-b border-b-muted\">\n      NGSTARTER\n    </ngs-sidebar-header>\n    <ngs-sidebar-body>\n      <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n        @for (navItem of navItems; track navItem) {\n          @switch (navItem.type) {\n            @case ('group') {\n              <ngs-sidebar-nav-group>\n                <ngs-sidebar-nav-group-toggle>\n                  <ng-container ngsSidebarNavItemIcon>\n                    @if (navItem.icon) {\n                      <ngs-icon name=\"fluent:{{ navItem.icon }}\"/>\n                    }\n                  </ng-container>\n                  {{ navItem.label }}\n                  <ngs-icon name=\"fluent:chevron-down-24-regular\" ngsSidebarNavGroupToggleIcon/>\n                </ngs-sidebar-nav-group-toggle>\n                <ngs-sidebar-nav-group-menu>\n                  @for (childNavItem of navItem.children; track childNavItem) {\n                    <ngs-sidebar-nav-item [key]=\"childNavItem.key\">\n                      <ng-container ngsSidebarNavItemIcon>\n                        @if (childNavItem.icon) {\n                          <ngs-icon name=\"fluent:{{ navItem.icon }}\"/>\n                        }\n                      </ng-container>\n                      {{ navItem.label }}\n                    </ngs-sidebar-nav-item>\n                  }\n                </ngs-sidebar-nav-group-menu>\n              </ngs-sidebar-nav-group>\n            }\n            @case ('heading')\n..."
+          "source": "<div class=\"h-[600px] w-[300px] relative\">\n  <ngs-sidebar class=\"border border-muted rounded-2xl\">\n    <ngs-sidebar-header class=\"flex h-14 items-center px-4 font-bold text-primary border-b border-b-muted\">\n      NGSTARTER\n    </ngs-sidebar-header>\n    <ngs-sidebar-body>\n      <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n        @for (navItem of navItems; track navItem) {\n          @switch (navItem.type) {\n            @case ('group') {\n              <ngs-sidebar-nav-group>\n                <ngs-sidebar-nav-group-toggle>\n                  <ng-container ngsSidebarNavItemIcon>\n                    @if (navItem.icon) {\n                      <ngs-icon name=\"fluent:{{ navItem.icon }}\"/>\n                    }\n                  </ng-container>\n                  {{ navItem.label }}\n                  <ngs-icon name=\"fluent:chevron-down-24-regular\" ngsSidebarNavGroupToggleIcon/>\n                </ngs-sidebar-nav-group-toggle>\n                <ngs-sidebar-nav-group-menu>\n                  @for (childNavItem of navItem.children; track childNavItem) {\n                    <ngs-sidebar-nav-item [key]=\"childNavItem.key\">\n                      <ng-container ngsSidebarNavItemIcon>\n                        @if (childNavItem.icon) {\n                          <ngs-icon name=\"fluent:{{ childNavItem.icon }}\"/>\n                        }\n                      </ng-container>\n                      {{ childNavItem.label }}\n                    </ngs-sidebar-nav-item>\n                  }\n                </ngs-sidebar-nav-group-menu>\n              </ngs-sidebar-nav-group>\n            }\n            @case (\n..."
         },
         {
           "name": "sidebar-with-custom-icons-example",
           "title": "Sidebar with custom icons",
           "file": "projects/docs/src/app/navigation/sidebar/_examples/sidebar-with-custom-icons-example/sidebar-with-custom-icons-example.html",
-          "source": "<div class=\"h-[600px] w-[300px] relative\">\n  <ngs-sidebar class=\"border border-muted rounded-2xl\">\n    <ngs-sidebar-header class=\"flex h-14 items-center px-4 font-bold border-b border-b-muted text-primary\">\n      NgStarter\n    </ngs-sidebar-header>\n    <ngs-sidebar-body>\n      <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n        @for (navItem of navItems; track navItem) {\n          @switch (navItem.type) {\n            @case ('group') {\n              <ngs-sidebar-nav-group>\n                <ngs-sidebar-nav-group-toggle>\n                  <ng-container ngsSidebarNavItemIcon>\n                    @if (navItem.icon) {\n                      <ngs-icon [name]=\"navItem.icon\"/>\n                    }\n                  </ng-container>\n                  {{ navItem.label }}\n                  <ngs-icon ngsSidebarNavGroupToggleIcon name=\"fluent:add-24-regular\"/>\n                </ngs-sidebar-nav-group-toggle>\n                <ngs-sidebar-nav-group-menu>\n                  @for (childNavItem of navItem.children; track childNavItem) {\n                    <ngs-sidebar-nav-item [key]=\"childNavItem.key\">\n                      <ng-container ngsSidebarNavItemIcon>\n                        @if (childNavItem.icon) {\n                          <ngs-icon [name]=\"navItem.icon\"/>\n                        }\n                      </ng-container>\n                      {{ navItem.label }}\n                    </ngs-sidebar-nav-item>\n                  }\n                </ngs-sidebar-nav-group-menu>\n              </ngs-sidebar-nav-group>\n            }\n            @case ('heading') {\n              <ngs-sidebar-n\n..."
+          "source": "<div class=\"h-[600px] w-[300px] relative\">\n  <ngs-sidebar class=\"border border-muted rounded-2xl\">\n    <ngs-sidebar-header class=\"flex h-14 items-center px-4 font-bold border-b border-b-muted text-primary\">\n      NgStarter\n    </ngs-sidebar-header>\n    <ngs-sidebar-body>\n      <ngs-sidebar-nav activeKey=\"home\" class=\"p-4\">\n        @for (navItem of navItems; track navItem) {\n          @switch (navItem.type) {\n            @case ('group') {\n              <ngs-sidebar-nav-group>\n                <ngs-sidebar-nav-group-toggle>\n                  <ng-container ngsSidebarNavItemIcon>\n                    @if (navItem.icon) {\n                      <ngs-icon [name]=\"navItem.icon\"/>\n                    }\n                  </ng-container>\n                  {{ navItem.label }}\n                  <ngs-icon ngsSidebarNavGroupToggleIcon name=\"fluent:add-24-regular\"/>\n                </ngs-sidebar-nav-group-toggle>\n                <ngs-sidebar-nav-group-menu>\n                  @for (childNavItem of navItem.children; track childNavItem) {\n                    <ngs-sidebar-nav-item [key]=\"childNavItem.key\">\n                      <ng-container ngsSidebarNavItemIcon>\n                        @if (childNavItem.icon) {\n                          <ngs-icon [name]=\"childNavItem.icon\"/>\n                        }\n                      </ng-container>\n                      {{ childNavItem.label }}\n                    </ngs-sidebar-nav-item>\n                  }\n                </ngs-sidebar-nav-group-menu>\n              </ngs-sidebar-nav-group>\n            }\n            @case ('heading') {\n              <ngs\n..."
         }
       ],
       "previewAsset": "projects/components/sidebar/preview.svg",
@@ -7589,8 +7603,8 @@
       "sourceRoot": "projects/components/sidenav/src",
       "docsPath": "/components/sidenav",
       "docsOverviewSource": "projects/docs/src/app/components/sidenav/overview/overview.html",
-      "purpose": "Provide side navigation that can be persistent or toggleable.",
-      "useWhen": "Use for responsive layouts and app navigation shells.",
+      "purpose": "Provide a responsive shell container for side surfaces that can open, close, collapse, overlay, or push content.",
+      "useWhen": "Use ngs-sidenav-container with ngs-sidenav and ngs-sidenav-content when a page or app shell needs a side region with behavior: opened state, open/close/toggle methods, mode over/push/side, position start/end, collapsed icon-width state, disableClose, backdrop and backdropClick, adaptive mobile mode through adaptive and adaptiveBreakpoint, fixedWidth, autosize, and autoFocus. Use ngsSidenavCollapsed and ngsSidenavExpanded templates to render different content while collapsed or expanded. In admin shells, put ngs-sidebar inside ngs-sidenav when the side region is primary navigation; Sidebar owns the actual navigation items. Do not use Sidenav as the navigation structure itself; use Sidebar or Navigation inside it. Do not use for temporary task panels; use Drawer. Do not use for persistent tabbed utility tools; use SidePanel. Do not use for static local columns or content sections; use LayoutSidebar, Panel, or Tailwind layout. Do not use for modal workflows, confirmations, or action menus; use Dialog, Confirm, or Menu.",
       "exampleTopics": [
         "Basic sidenav"
       ],
@@ -7663,8 +7677,8 @@
       "sourceRoot": "projects/components/signature-pad/src",
       "docsPath": "/components/signature-pad",
       "docsOverviewSource": "projects/docs/src/app/components/signature-pad/overview/overview.html",
-      "purpose": "Capture a drawn signature.",
-      "useWhen": "Use for approvals, contracts, confirmations, forms, and consent flows.",
+      "purpose": "Capture a handwritten signature and emit it as a PNG data URL.",
+      "useWhen": "Use ngs-signature-pad in approval, contract, consent, delivery confirmation, onboarding, checkout, legal acknowledgement, or internal workflow forms where the user must draw a signature. It supports mouse, touch, or pen input, penColor, colors for the fixed allowed pen palette, lineWidth, backgroundColor, lazy brush smoothing through lazyRadius/lazyFriction/lazyEnabled, clear(), save(), signatureSaved with a base64 PNG data URL, and signatureCleared. Use the emitted PNG in app code to store or attach the signature to the workflow or document. Do not use SignaturePad as a general drawing canvas, image editor, annotation tool, sketch board, whiteboard, file upload, typed-name field, or legal validation system by itself. App code still needs to require the signature when needed, persist it, and enforce backend or legal rules.",
       "exampleTopics": [
         "Basic signature pad"
       ],
@@ -7721,8 +7735,8 @@
       "sourceRoot": "projects/components/skeleton/src",
       "docsPath": "/components/skeleton",
       "docsOverviewSource": "projects/docs/src/app/components/skeleton/overview/overview.html",
-      "purpose": "Show placeholder shapes while content is loading.",
-      "useWhen": "Use for cards, lists, tables, and pages where layout is known before data arrives.",
+      "purpose": "Show placeholder blocks for loading content when the final layout is already known.",
+      "useWhen": "Use ngs-skeleton to preserve layout while cards, lists, table rows, dashboard widgets, chart areas, avatars, text lines, or media blocks are loading. Shape and size each skeleton with TailwindCSS utilities such as h-*, w-*, size-*, flex, grid, gap, and wrapper layouts so it roughly matches the UI that will replace it. Use roundedFull for circular placeholders such as avatars or icon circles. Do not use Skeleton for unknown long operations where progress matters; use ProgressBar. Do not use for global route or app loading; use PageLoadingBar or ScreenLoader. Do not use for blocking a local section; use BlockLoader. Do not use for empty results; use EmptyState. Do not use for image fallback after load failure; use ImagePlaceholder. Do not use random grey blocks that do not resemble the final content.",
       "exampleTopics": [
         "Basic Skeleton"
       ],
@@ -7769,8 +7783,8 @@
       "sourceRoot": "projects/components/slide-toggle/src",
       "docsPath": "/forms/slide-toggle",
       "docsOverviewSource": "projects/docs/src/app/forms/slide-toggle/overview/overview.html",
-      "purpose": "Capture a binary on/off setting.",
-      "useWhen": "Use for preferences, feature toggles, visibility, and immediate boolean settings.",
+      "purpose": "Capture a boolean on/off setting where checked means enabled.",
+      "useWhen": "Use ngs-slide-toggle for settings and preferences where checked=true means the feature or state is enabled. Good for live updates, notifications, dark mode option, visibility, sidebar expanded or collapsed, animation on/off, table options, enable Wi-Fi, show archived, and allow comments. It is an Angular form control with checked, disabled, required, ngModel, formControlName, change, and toggleChange, and has its own label pattern, so do not wrap it in ngs-form-field. Do not use SlideToggle for choosing one value from many; use Radio, Segmented, or Select. Do not use for multiple independent selections in a list; use Checkbox. Do not use for button-like mode groups; use ButtonToggle. Do not use for actions, commands, navigation, or rich option cards; use Button, Navigation, or RadioCard. For “I agree” or “accept terms” confirmations, prefer Checkbox because the user is confirming, not enabling a setting.",
       "exampleTopics": [
         "Basic Slide Toggle",
         "Disabled Slide Toggle",
@@ -7852,8 +7866,8 @@
       "sourceRoot": "projects/components/slider/src",
       "docsPath": "/components/slider",
       "docsOverviewSource": "projects/docs/src/app/components/slider/overview/overview.html",
-      "purpose": "Let users choose a numeric value from a continuous or stepped range.",
-      "useWhen": "Use for volume, size, thresholds, opacity, ranges, and visual settings.",
+      "purpose": "Let users choose one numeric value or a start/end range by dragging thumb controls.",
+      "useWhen": "Use ngs-slider when approximate visual numeric adjustment is better than typing. Good for volume, opacity, zoom, size, threshold, percentage, rating or score, price range, numeric date or age range, chart settings, visual tuning, and filter ranges. Use input ngsSliderThumb for one value, or input ngsSliderStartThumb plus input ngsSliderEndThumb for a range. Configure min, max, step, disabled, discrete, showTickMarks, displayWith, Angular forms, and valueChange on thumbs. Do not use Slider to show progress or status; use ProgressBar or Gauge. Do not use when exact numeric entry is primary; use NumberInput or pair NumberInput with Slider. Do not use for named categories; use Select, Radio, or Segmented. Do not use for before/after image comparison; use ComparisonSlider. Do not use for pagination or table sorting/filter builder logic; use Paginator, Sort, or FilterBuilder.",
       "exampleTopics": [
         "Basic Slider",
         "Custom Thumb Label Formatting",
@@ -7939,8 +7953,8 @@
       "sourceRoot": "projects/components/snack-bar/src",
       "docsPath": "/components/snackbar",
       "docsOverviewSource": "projects/docs/src/app/components/snackbar/overview/overview.html",
-      "purpose": "Show short transient feedback after an action.",
-      "useWhen": "Use for save confirmations, undo prompts, background results, and non-blocking messages.",
+      "purpose": "Show short transient overlay feedback after an action or background result.",
+      "useWhen": "Use the SnackBar service for brief non-blocking messages such as Saved, Copied, Invite sent, Refresh complete, Export started, or Deleted, with an optional quick action such as Undo or View. Open with snackBar.open(message, action?, config?), openFromComponent, or openFromTemplate. Configure duration, horizontalPosition, verticalPosition, data, panelClass, custom component or template content, and use SnackBarRef.dismiss(), afterOpened(), and afterDismissed() for lifecycle handling. SnackBar should be short, temporary, and safe to miss. Do not use for field validation errors; use FormField errors. Do not use for persistent inline messages; use Alert. Do not use for global important header messages; use Announcement. Do not use for critical required actions; use ActionRequired. Do not use for confirmations before destructive actions; use Confirm. Do not use for modal workflows; use Dialog. Do not use for long-lived notification inboxes or event feeds; use Notifications. Do not use for incident/status banners or loading/progress states; use Incidents, ProgressBar, ScreenLoader, BlockLoader, or PageLoadingBar.",
       "exampleTopics": [
         "Basic Snackbar",
         "Snackbar With Custom Component",
@@ -8007,8 +8021,8 @@
       "sourceRoot": "projects/components/sort/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Provide sorting behavior for table-like data.",
-      "useWhen": "Use with tables, data views, and sortable column headers.",
+      "purpose": "Provide sortable header behavior and sort state for table-like data.",
+      "useWhen": "Use ngsSort on a sortable table/list/data container and ngs-sort-header=\"fieldName\" on header cells that should cycle through sort states. Sort tracks active column and direction (asc, desc, or cleared), supports ngsSortActive, ngsSortDirection, ngsSortStart, ngsSortDisableClear, ngsSortDisabled, per-header disabled state, sortActionDescription, and emits ngsSortChange with { active, direction }. Use it with Table sortable column headers, custom table-like data surfaces, and when wiring sort state into a local TableDataSource or server/API query. For DataView, usually prefer its built-in sortable column config and sortChange instead of manually adding ngs-sort-header. Do not use Sort as a visual sort icon only, filter builder, search, grouping, drag reorder, tab sorting, or generic “sort these cards” button. Sort only manages header state and emits the selected sort; the app/data source still applies local sorting or sends the sort state to the backend.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -8053,8 +8067,8 @@
       "sourceRoot": "projects/components/spinner/src",
       "docsPath": "/components/progress-spinner",
       "docsOverviewSource": "projects/docs/src/app/components/progress-spinner/overview/overview.html",
-      "purpose": "Use Spinner for basic progress spinner, configurable progress spinner, configurable spinner.",
-      "useWhen": "Choose Spinner when the workflow matches examples such as Basic Progress Spinner, Configurable Progress Spinner, Configurable spinner.",
+      "purpose": "Show a circular indicator for an ongoing operation.",
+      "useWhen": "Use ngs-progress-spinner when a compact circular loading indicator is needed inside a button, overlay, media viewer, widget, small page area, or next to an action. Use mode=\"indeterminate\" when the remaining time or amount of work is unknown. Use mode=\"determinate\" with value from 0 to 100 when progress is known. Configure diameter, strokeWidth, and color for the surface. Do not use ProgressSpinner for linear progress; use ProgressBar. Do not use it for known loading layouts; use Skeleton. Do not use it for router or page transition loading; use PageLoadingBar. Do not use it as a full-screen or blocking state by itself; use ScreenLoader or BlockLoader. Do not use it as a KPI or metric display; use Gauge or ProgressBar based on context.",
       "exampleTopics": [
         "Basic Progress Spinner",
         "Configurable Progress Spinner",
@@ -8113,8 +8127,8 @@
       "sourceRoot": "projects/components/splash-screen/src",
       "docsPath": null,
       "docsOverviewSource": null,
-      "purpose": "Show an initial branded loading screen.",
-      "useWhen": "Use while the application bootstraps or waits for essential startup data.",
+      "purpose": "Show one full-screen branded startup overlay during the initial app bootstrap moment.",
+      "useWhen": "Use ngs-splash-screen once near the root app template while Angular, routing, theme, auth/session, tenant, or essential startup data initializes. Project ngs-logo or custom branded content into it. It hides automatically after the first NavigationEnd with hideDelay, fades with animationDuration, and can be controlled through SplashScreenStore.show() and SplashScreenStore.hide(). Do not use SplashScreen for normal page loading after startup; use PageLoadingBar. Do not use for full-screen blocking operations after the app is running; use ScreenLoader. Do not use for local card, table, form, or widget loading; use BlockLoader, Skeleton, ProgressBar, or component-specific loading states. Do not use for empty states, route skeletons, modal workflows, or marketing hero screens. SplashScreen should be one per app and short-lived at the beginning, not shown for every action.",
       "exampleTopics": [],
       "minimalExample": null,
       "exampleFiles": [],
@@ -8150,8 +8164,8 @@
       "sourceRoot": "projects/components/split/src",
       "docsPath": "/components/split-pane",
       "docsOverviewSource": "projects/docs/src/app/components/split-pane/overview/overview.html",
-      "purpose": "Divide an interface into resizable panes.",
-      "useWhen": "Use for editors, master-detail screens, inspectors, and multi-pane workspaces.",
+      "purpose": "Create a resizable multi-pane layout with draggable gutters between panes.",
+      "useWhen": "Use ngs-split with multiple ngs-split-pane regions when a workspace needs two or more panes that users can manually resize. Good for editors, IDE-like screens, analytics workspaces, master-detail-detail layouts, source and preview views, inspector plus canvas plus logs, and dense multi-pane tools. Supports horizontal or vertical direction, nested splits, unit percent or pixel, size, minSize, maxSize, lockSize, visible, order, withHandle dotted gutter affordance, restrictMove, disabled, gutterSize, gutterStep, dragStart, dragEnd, gutterClick, gutterDblClick, transitionEnd, getVisibleAreaSizes(), and setVisibleAreaSizes() for persistence. Do not use Split for ordinary responsive layout or static two-column admin pages; use TailwindCSS grid or flex. Do not use for one manually resized box; use ResizableContainer. Do not use for side navigation shells; use Sidenav or Sidebar. Do not use for temporary side overlays; use Drawer. Do not use for local structured page sections; use Panel. Do not use for table column resizing or image resizing; use table features or ImageResizer. The parent must have a stable height and width.",
       "exampleTopics": [
         "Basic Split Pane",
         "Split Pane with Handle",
@@ -8265,8 +8279,8 @@
       "sourceRoot": "projects/components/stepper/src",
       "docsPath": "/components/stepper",
       "docsOverviewSource": "projects/docs/src/app/components/stepper/overview/overview.html",
-      "purpose": "Guide users through a multi-step process.",
-      "useWhen": "Use for onboarding, setup, checkout, configuration, and wizard-style forms.",
+      "purpose": "Render a ready-made visual wizard for several connected steps in one process.",
+      "useWhen": "Use ngs-stepper with ngs-step when users must move through related steps and see their current progress. Good for onboarding, checkout, setup, import/export flows, account or tenant creation, review flows, and multi-step forms. Use linear mode with stepControl when each step must be valid before the user continues. Use ngsStepperNext and ngsStepperPrevious on NgStarter buttons for standard wizard navigation, ngsStepLabel or label for step labels, optional/completed/error states for step status, and horizontal or vertical orientation for responsive layouts. Do not use Stepper when you only need step state and validation logic without the default visual UI; use HeadlessStepper. Do not use for independent page sections; use Tabs or ExpansionPanel. Do not use for app route navigation; use Navigation, Breadcrumbs, Sidebar, or routing. Do not use for showing only a percentage; use ProgressBar. Do not use for product tours over existing UI; use GuidedTour.",
       "exampleTopics": [
         "Basic Stepper",
         "Stepper Vertical",
@@ -8350,8 +8364,8 @@
       "sourceRoot": "projects/components/suggestions/src",
       "docsPath": "/components/suggestions",
       "docsOverviewSource": "projects/docs/src/app/components/suggestions/overview/overview.html",
-      "purpose": "Display suggested actions, values, or next steps.",
-      "useWhen": "Use for assistant-like recommendations, empty states, search, and productivity hints.",
+      "purpose": "Render a grouped visual list of contextual suggestions, search results, recent items, or shortcuts.",
+      "useWhen": "Use ngs-suggestions as the visual list inside search dropdowns, assistant inputs, command-like panels, or contextual suggestion popovers. Group related rows with ngs-suggestion-block, use ngs-suggestion for each clickable row, place icons with ngsSuggestionIcon, thumbnails or avatars with ngsSuggestionThumb, and use inline blocks for quick actions such as create buttons. Good for recently viewed items, users, files, pages, matching search results, and quick create shortcuts. Do not use Suggestions as a form value picker; use Autocomplete or Select. Do not use it for a short contextual command menu; use Menu. Do not use it for persistent app navigation; use Navigation, Sidebar, Sidenav, or RailNav. Do not use it as a complete command palette by itself; it can provide the grouped visual result list, but search state, keyboard handling, filtering, and command execution belong to the surrounding feature. Do not use it for page-level empty-state recommendations or assistant cards; compose those with EmptyState, Card, Alert, or the page layout.",
       "exampleTopics": [
         "Basic suggestions"
       ],
@@ -8418,8 +8432,8 @@
       "sourceRoot": "projects/components/tab-panel/src",
       "docsPath": "/navigation/tab-panel",
       "docsOverviewSource": "projects/docs/src/app/navigation/tab-panel/overview/overview.html",
-      "purpose": "Organize related content into tabbed panels.",
-      "useWhen": "Use for settings, details, and pages where sections share the same context.",
+      "purpose": "Create a compact vertical tool or navigation panel with a linked aside content area.",
+      "useWhen": "Use ngs-tab-panel when a workspace or editor needs a vertical set of icon/text items that controls adjacent aside content. Use ngs-tab-panel-content with ngs-tab-panel-nav and ngs-tab-panel-item for the rail, bind items to content with matching for values and ngsTabPanelAsideContent ids inside ngs-tab-panel-aside, and use activeItemId to choose the active item. Good for image editors, design tools, asset panels, layers, inspectors, workspace switchers, tool palettes, and settings/tools inside dense work surfaces. Use compact for icon-only rails with tooltips, header/content/footer regions to group items, and ngs-tab-panel-custom-item for custom items such as avatars, workspaces, or add actions. Do not use TabPanel for ordinary horizontal page tabs; use Tabs. Do not use it for primary app navigation; use Sidebar, Navigation, Sidenav, or RailNav. Do not use it for temporary overlay side content; use Drawer. Do not use it for a structured page section; use Panel. Do not use it for workflow steps; use Stepper. Do not use it for contextual command lists; use Menu.",
       "exampleTopics": [
         "Basic tab panel",
         "Tab panel with panel inside",
@@ -8529,8 +8543,8 @@
       "sourceRoot": "projects/components/table/src",
       "docsPath": "/components/table",
       "docsOverviewSource": "projects/docs/src/app/components/table/overview/overview.html",
-      "purpose": "Render structured tabular data with columns, rows, headers, sorting, selection, and sticky regions.",
-      "useWhen": "Use for predictable tabular layouts; use Data View when users need richer dataset operations.",
+      "purpose": "Render static or simple template-defined tabular data with known columns.",
+      "useWhen": "Use table[ngs-table] or ngs-table for static or simple tabular data where columns are known in Angular templates: read-only tables, documentation tables, settings summaries, static comparison rows, lightweight report tables, and small non-interactive admin tables. Define columns with ngsColumnDef, header/body/footer cells with ngsHeaderCellDef, ngsCellDef, and ngsFooterCellDef, and rows with ngsHeaderRowDef, ngsRowDef, and ngsFooterRowDef. Use TableDataSource only for lightweight local table behavior, not as a replacement for a real datatable. Use sticky/stickyEnd for fixed columns and sticky row defs for sticky header or footer. Use table[ngs-native-table] only for static HTML tables without a data source. Do not build tables with div role=\"table\" or custom grid markup when ngs-table fits. Use DataView instead when the UI is a datatable or working data surface with row actions, selection, sorting, search/filter state, pagination, column sizing/settings, saved views, server-driven data, or complex record management. Use List for simple vertical rows without real columns. Use Tree for hierarchical rows. Use Grid or Tiles for dashboard layouts. Use Sort only for sort state behavior; it does not replace Table.",
       "exampleTopics": [
         "Native Table",
         "Basic Table",
@@ -8665,8 +8679,8 @@
       "sourceRoot": "projects/components/tabs/src",
       "docsPath": "/components/tabs",
       "docsOverviewSource": "projects/docs/src/app/components/tabs/overview/overview.html",
-      "purpose": "Switch between related views within the same page context.",
-      "useWhen": "Use for compact section switching, detail page subsections, and alternate views.",
+      "purpose": "Switch between peer views inside one page or section context, with only one panel visible at a time.",
+      "useWhen": "Use ngs-tab-group with ngs-tab for local content tabs that do not require routing. Use ngs-tab-nav-bar with a[ngs-tab-link] and ngs-tab-nav-panel for route-linked tabs inside one section, such as documentation overview/API pages or detail subsections. Good for entity details, settings subsections, overview/activity/files/settings pages, alternate views of one object, or peer panels that share the same context. Supports selectedIndex, selectedIndexChange, selectedTabChange, disabled tabs, custom ngsTabLabel templates, explicit ngsTabContent templates, preserveContent, stretchTabs, alignTabs, headerPosition above/below, overflow pagination controls, and animationDuration/custom animations. Do not use Tabs for compact mode or value switches; use Segmented. Do not use for wizard or process steps; use Stepper. Do not use for vertical tool panels with linked aside content; use TabPanel. Do not use for primary app navigation; use Navigation, Sidebar, Sidenav, or RailNav. Do not use for collapsible sections; use ExpansionPanel. Do not use for route paths; use Breadcrumbs. Do not use for choosing a form value; use Select, Radio, RadioCard, Checkbox, or ButtonToggle depending on the interaction.",
       "exampleTopics": [
         "Basic Tabs",
         "Tabs with aligned labels",
@@ -8780,8 +8794,8 @@
       "sourceRoot": "projects/components/text-editor/src",
       "docsPath": "/components/text-editor",
       "docsOverviewSource": "projects/docs/src/app/components/text-editor/overview/overview.html",
-      "purpose": "Provide a rich text editing control.",
-      "useWhen": "Use for formatted descriptions, messages, notes, articles, and user-generated content.",
+      "purpose": "Provide a full Tiptap-based WYSIWYG rich text editor for formatted HTML content.",
+      "useWhen": "Use ngs-text-editor when users need to create or edit rich HTML content with headings, bold, italic, strike, lists, blockquotes, inline code, code blocks, horizontal rules, links, images, YouTube embeds, toolbar commands, bubble menus, or floating menus. Good for product descriptions, project/task descriptions, CMS-like fields, articles, notes, changelog entries, release notes, knowledge base content, help content, and rich admin content bodies. Provide initial HTML through content, listen to contentChange for updated HTML, add custom Tiptap extensions through extensions, and use imageUploadFn to upload images and resolve a URL. Compose controls with ngs-text-editor-toolbar, ngs-text-editor-bubble-menu, ngs-text-editor-floating-menu, ngs-text-editor-divider, and ngsTextEditorCommand* directives. Do not use TextEditor for short comments, threads, or quick replies; use CommentEditor. Do not use it for block-based CMS/page building; use ContentEditor. Do not use it for plain text fields; use ngsInput inside FormField. Do not use it for inline renaming; use InlineTextEdit. Do not use it for read-only code or snippets; use CodeHighlighter.",
       "exampleTopics": [
         "Basic Text Editor",
         "Text Editor with floating menu",
@@ -8920,8 +8934,8 @@
       "sourceRoot": "projects/components/thumbnail-maker/src",
       "docsPath": "/components/thumbnail-maker",
       "docsOverviewSource": "projects/docs/src/app/components/thumbnail-maker/overview/overview.html",
-      "purpose": "Create or adjust thumbnails from media.",
-      "useWhen": "Use for video/image previews, content management, and media publishing workflows.",
+      "purpose": "Create a square 300x300 thumbnail bitmap from an image with drag positioning and zoom controls.",
+      "useWhen": "Use ngs-thumbnail-maker when users need to position and zoom an image inside a fixed square frame, then save the finished thumbnail as a data URL, Blob, or canvas. Good for avatars, profile images, CMS thumbnails, media library previews, product/user/project card images, and simple square preview generation. Provide the image URL or data URL through src, add helperText when users need drag instructions, and call api.getDataUrl(), api.toBlob(callback), or api.getCanvas() when saving. Combine with Upload or ngsUploadTrigger when users must select a local image first. Do not use ThumbnailMaker when the app needs arbitrary crop shapes, crop rectangles, circles, or crop coordinates; use Crop. Do not use it only to change displayed image width; use ImageResizer. Do not use it to view images; use ImageViewer or ImageZoomViewer. Do not use it as an image placeholder; use ImagePlaceholder. Do not use it for full canvas editing, layers, text, effects, or templates; use ImageDesigner. Do not use it as a plain upload picker without editing; use Upload.",
       "exampleTopics": [
         "Basic thumbnail maker",
         "Thumbnail maker with helper text",
@@ -8985,8 +8999,8 @@
       "sourceRoot": "projects/components/tiles/src",
       "docsPath": "/components/tiles",
       "docsOverviewSource": "projects/docs/src/app/components/tiles/overview/overview.html",
-      "purpose": "Lay out resizable tile-based content.",
-      "useWhen": "Use for dashboards, visual builders, and configurable grid-like workspaces.",
+      "purpose": "Lay out responsive dashboard tiles and support user-driven tile reordering/customization.",
+      "useWhen": "Use ngs-tiles with ngs-tile when users can rearrange dashboard cards or widgets, customize a dashboard, or save a changed widget order. Good for editable dashboards, portal home pages, workspace widgets, configurable analytics cards, media/card boards, and dashboard builders. Tiles can be the layout host for config-driven dashboard renderers: the app can render lazy widget components inside each ngs-tile, show Skeleton while widgets load, and persist the final item order from orderChanged or layoutChanged. Use width, height, width.sm/md/lg/xl, and height.sm/md/lg/xl to define responsive tile spans, and ngsTileHandle for drag handles. Provide items so reorder events can map visual order back to app data. Use Grid only for static predefined dashboard/widget layouts that users do not rearrange. Do not use Tiles for ordinary static responsive page layout; use TailwindCSS grid/flex. Do not use for split panes with gutters; use Split. Do not use for one manually resized box; use ResizableContainer. Do not use for simple cards, lists, tables, or datasets without tile reordering; use Card, List, Table, or DataView. Do not use for status-column workflows; use KanbanBoard.",
       "exampleTopics": [
         "Basic tiles"
       ],
@@ -9065,8 +9079,8 @@
       "sourceRoot": "projects/components/timeline/src",
       "docsPath": "/components/timeline",
       "docsOverviewSource": "projects/docs/src/app/components/timeline/overview/overview.html",
-      "purpose": "Show events or activities in chronological order.",
-      "useWhen": "Use for audit logs, histories, workflows, tracking, and activity feeds.",
+      "purpose": "Show a vertical chronological history of events.",
+      "useWhen": "Use ngs-timeline when users need to understand a sequence of events over time: audit logs, activity history, entity change history, project milestones, order or shipment history, workflow history, tracking events, and user actions. Use ngs-timeline-header to group events by date, month, phase, or period. Use ngs-timeline-item with ngs-timeline-timestamp, ngs-timeline-title, ngs-timeline-subtitle, ngs-timeline-description, ngs-timeline-attributes, and ngs-timeline-content to structure each event. Use ngsTimelineItemIndicator when the marker should show an actor, icon, status, or event type. Do not use Timeline for a realtime notification inbox or actionable notification feed; use Notifications. Do not use for a simple vertical collection without time/order meaning; use List. Do not use for tabular audit logs that need sorting, filtering, or many columns; use Table or DataView. Do not use for workflow steps the user must complete; use Stepper. Do not use for status columns; use KanbanBoard. Do not use for calendar/scheduler views or for a single operation status; use ProgressBar, Badge, or Status as appropriate.",
       "exampleTopics": [
         "Basic Timeline",
         "Timeline With Timestamp",
@@ -9171,8 +9185,8 @@
       "sourceRoot": "projects/components/timepicker/src",
       "docsPath": "/components/timepicker",
       "docsOverviewSource": "projects/docs/src/app/components/timepicker/overview/overview.html",
-      "purpose": "Let users choose a time value.",
-      "useWhen": "Use for scheduling, reminders, availability, reports, and time-based filters.",
+      "purpose": "Let users choose or type a time of day in a form field.",
+      "useWhen": "Use input[ngsTimepicker] inside one ngs-form-field, connected to an ngs-timepicker instance, when a form needs a time of day: meeting time, event time, booking time, reminder time, deadline time, availability slot, report time filter, or schedule setting. Add ngs-timepicker-toggle as an icon suffix when users should open the dropdown explicitly. Use interval to control option steps such as 15, 30, or 60 minutes. Use min and max to limit selectable times. The input supports manual typing and localized display, while the model value can be a HH:mm-like string or a Date with the selected time merged into it. Combine Datepicker and Timepicker as separate controls when users need both date and time. Do not use Timepicker to choose a date; use Datepicker. Do not use it to choose a timezone; use TimezoneSelect. Do not use it for duration or numeric amounts of hours/minutes; use NumberInput or Slider. Do not use it for plain text without time validation; use ngsInput. Do not use it as a calendar, scheduler, or day-slot planner.",
       "exampleTopics": [
         "Basic time picker",
         "Integration with Datepicker",
@@ -9254,8 +9268,8 @@
       "sourceRoot": "projects/components/timezone-select/src",
       "docsPath": "/forms/timezone",
       "docsOverviewSource": "projects/docs/src/app/forms/timezone/overview/overview.html",
-      "purpose": "Let users choose a timezone.",
-      "useWhen": "Use in profile, scheduling, localization, and tenant settings.",
+      "purpose": "Let users choose an IANA time zone id in a form field.",
+      "useWhen": "Use ngs-timezone-select inside one ngs-form-field when a form must store a real time zone id such as Europe/Warsaw or America/New_York. Good for profile timezone, account preferences, organization or tenant default timezone, scheduling settings, calendar settings, report default timezone, localization preferences, and admin settings where backend data needs an IANA timezone string. The control is searchable, groups time zones by region, supports Angular forms, required, disabled, placeholder, locale-aware labels, opened, and closed. Do not use TimezoneSelect to choose a time of day; use Timepicker. Do not use it to choose a date; use Datepicker. Do not use it to choose a country or region; use CountrySelect. Do not use it for language or locale selection; use a dedicated locale/language control or Select. Do not use it for generic custom options; use Select. Do not use it for durations, numeric offsets, or timezone math; use NumberInput, Slider, or app logic. Do not use timezone as a date format setting; use DateFormatSelect for display formats.",
       "exampleTopics": [
         "Basic timezone select"
       ],
@@ -9306,8 +9320,8 @@
       "sourceRoot": "projects/components/toolbar/src",
       "docsPath": "/components/toolbar",
       "docsOverviewSource": "projects/docs/src/app/components/toolbar/overview/overview.html",
-      "purpose": "Group frequently used page, editor, or content actions.",
-      "useWhen": "Use above tables, editors, canvases, dashboards, and tool surfaces.",
+      "purpose": "Provide a persistent command area for a page, panel, table, editor, canvas, or workspace surface.",
+      "useWhen": "Use ngs-toolbar when a local surface needs a title, short local navigation, and frequently used actions in a stable horizontal or multi-row command area. Use ngs-toolbar-title for the local title, ngs-toolbar-spacer to separate groups, ngs-toolbar-row for multi-row command areas, ngs-toolbar-item for actions that should participate in responsive overflow, and ngs-toolbar-nav with ngs-toolbar-nav-link for short local links inside the toolbar. Good places include table headers, panel headers, admin page headers, editor surfaces, dashboards, canvas tools, and workspace tool surfaces. Do not use Toolbar as a generic flex layout for arbitrary content. Do not use it for floating contextual actions on selected rows or objects; use CommandBar. Do not use it for dropdown command lists; use Menu. Do not use it for primary application navigation; use Sidebar, Sidenav, or Navigation. Do not replace specialized TextEditor or CommentEditor toolbars with the generic Toolbar.",
       "exampleTopics": [
         "Basic Toolbar",
         "Multi-row Toolbar",
@@ -9394,8 +9408,8 @@
       "sourceRoot": "projects/components/tooltip/src",
       "docsPath": "/components/tooltip",
       "docsOverviewSource": "projects/docs/src/app/components/tooltip/overview/overview.html",
-      "purpose": "Show short contextual help on hover or focus.",
-      "useWhen": "Use for icon buttons, disabled explanations, abbreviations, and dense controls.",
+      "purpose": "Show a short helper message for one interface element on hover, focus, or touch.",
+      "useWhen": "Use ngsTooltip as a directive on a trigger element when a short non-interactive helper message should explain an icon button, abbreviation, disabled state, dense control, compact label, or unclear affordance. Configure ngsTooltipPosition, ngsTooltipShowDelay, ngsTooltipHideDelay, ngsTooltipOffset, ngsTooltipDisabled, ngsTooltipClass, or ngsTooltipPositionAtOrigin when placement and timing need tuning. Export the directive as ngsTooltip when app logic must call show(), hide(), or toggle(). Keep tooltip text short and plain. Do not use Tooltip for interactive content, forms, action lists, rich previews, or long explanations; use Popover. Do not use it for command menus; use Menu. Do not use it for visible page messages; use Alert, Announcement, ActionRequired, or Incidents based on scope. Do not use it for form helper or validation text; use FormField hint and error. Do not use it for onboarding flows; use GuidedTour.",
       "exampleTopics": [
         "Basic Tooltip",
         "Tooltip With a Custom Position",
@@ -9480,7 +9494,7 @@
       "docsPath": "/components/tree",
       "docsOverviewSource": "projects/docs/src/app/components/tree/overview/overview.html",
       "purpose": "Display hierarchical data with expandable parent and child nodes.",
-      "useWhen": "Use for folders, permissions, categories, org charts, and nested navigation.",
+      "useWhen": "Use ngs-tree when users need to inspect or navigate hierarchical data where parent and child levels matter: folders and files, categories, permissions, taxonomies, organization structures, nested settings, product/entity hierarchies, and other expandable trees. Use dataSource with childrenAccessor for nested/static data, or treeControl with a custom DataSource for flat trees and dynamic loading. Define node templates with *ngsTreeNodeDef and use when for different node types. Use ngsTreeNodePadding for indentation and ngsTreeNodeToggle for expand/collapse controls. Use ProgressBar or Skeleton inside node templates when children load on demand. Do not use Tree for a simple vertical collection; use List. Do not use it for primary application navigation; use Sidebar, Sidenav, Navigation, or RailNav. Do not use it for FAQ or settings sections; use ExpansionPanel. Do not use it for dense row data with columns, sorting, filters, or bulk actions; use Table or DataView. Do not use it for step-by-step workflows; use Stepper.",
       "exampleTopics": [
         "Basic tree",
         "Tree with dynamic data"
@@ -9556,8 +9570,8 @@
       "sourceRoot": "projects/components/upload/src",
       "docsPath": "/components/upload",
       "docsOverviewSource": "projects/docs/src/app/components/upload/overview/overview.html",
-      "purpose": "Let users select, preview, and upload files.",
-      "useWhen": "Use for attachments, documents, media, imports, and profile assets.",
+      "purpose": "Provide UI for selecting files, drag-and-drop upload areas, and file progress displays.",
+      "useWhen": "Use Upload components when users need to choose local files, drop files into an upload area, or see selected/uploading files with progress, errors, retry, remove, or cancel actions. Use ngsUploadTrigger on a button or clickable element to open the native file picker. Use ngs-upload-area for drag-and-drop with ngsUploadAreaMainState, ngsUploadAreaDropState, ngsUploadAreaInvalidState, and ngsUploadAreaIcon. Use accept and multiple to control allowed file types and multi-select. Use ngs-upload-container with ngs-upload-allowed-types and ngs-upload-max-file-size for upload hints. Use ngs-file-list with ngs-file for vertical file rows, or ngs-files-grid with ngs-grid-file for compact file cards. Use ngs-file-control and ngsGridFileControl for file-level actions. The component emits fileSelected with the selected File objects; the application must perform validation, backend upload, retry, deletion, persistence, and security checks. Do not treat Upload as a backend uploader, storage manager, or import wizard by itself. Do not use it for editing selected images; use Crop, ImageResizer, ThumbnailMaker, or ImageDesigner after selection. Do not use it for rich editor image upload flows; use the TextEditor or CommentEditor upload APIs. Do not use it to manage an existing document table with sorting and filtering; use Table or DataView.",
       "exampleTopics": [
         "Basic Upload",
         "Upload area",
@@ -9705,9 +9719,11 @@
       "sourceRoot": "projects/components/video-player/src",
       "docsPath": "/libraries/video-player",
       "docsOverviewSource": "projects/docs/src/app/libraries/video-player/overview/overview.html",
-      "purpose": "Play video content with application-level controls.",
-      "useWhen": "Use for media libraries, lessons, previews, and product content.",
-      "exampleTopics": [],
+      "purpose": "Play video inline inside the current page, card, carousel, media preview, lesson, or workspace layout.",
+      "useWhen": "Use ngs-video-player when video should stay embedded in the current layout with NgStarter-controlled playback UI. Pass src for the video source, optional thumbnailUrl for the poster preview, and orientation or payload.orientation for landscape, portrait, or square aspect ratio. Configure autoPlay, muted, disableClickToPlay, withCredentials, showPlayButton, showSpeaker, showFullscreen, and showDurationSlider to match the surface. Listen to play, pause, ended, loaded, and error for application state. Good for media previews, lessons, product videos, content previews, cards, carousel slides, and dashboard/workspace media blocks. The player wraps video.js and supports HLS m3u8 sources through video.js. Do not use VideoPlayer when the video should open as a focused overlay or lightbox; use VideoViewer. Do not use it as a gallery or list by itself; compose it with Carousel, Card, Grid, VideoViewer, or a layout component. Do not use it for YouTube, Vimeo, or other iframe-provider embeds when the provider player is required. Do not use it as a content editing API directly; use the ContentEditor video block for editable content.",
+      "exampleTopics": [
+        "Video Player"
+      ],
       "minimalExample": null,
       "exampleFiles": [],
       "previewAsset": "projects/components/video-player/preview.svg",
@@ -9755,8 +9771,8 @@
       "sourceRoot": "projects/components/video-viewer/src",
       "docsPath": "/components/video-viewer",
       "docsOverviewSource": "projects/docs/src/app/components/video-viewer/overview/overview.html",
-      "purpose": "Display videos in a focused viewer experience.",
-      "useWhen": "Use for video attachments, previews, galleries, and media detail pages.",
+      "purpose": "Open videos in a focused overlay or lightbox above the current page.",
+      "useWhen": "Use VideoViewer when a thumbnail, preview card, compact inline player, attachment, gallery item, or media library item should open a larger focused video viewing experience. Put ngsVideoViewer on the preview container and ngsVideoViewerVideo on each clickable preview item. Pass sourceUrl for the video source, plus optional title, caption, description, or template directives ngsVideoViewerVideoTitle, ngsVideoViewerVideoCaption, and ngsVideoViewerVideoDescription. Configure orientation, payload, autoPlay, muted, showPlayButton, showSpeaker, showFullscreen, and showDurationSlider to control the underlying VideoPlayer in the overlay. Good for video attachments, media previews, galleries, lessons, product videos, and media detail flows. Do not use VideoViewer when video should stay inline in the current layout; use VideoPlayer. Do not use it as a carousel, grid, or gallery layout by itself; compose previews with Card, Grid, Carousel, or another layout. Do not use it as a generic modal or form dialog; use Dialog or Drawer. Do not use it for YouTube, Vimeo, or iframe-provider embeds when the provider player is required.",
       "exampleTopics": [
         "Basic Video Viewer"
       ],
@@ -9834,9 +9850,11 @@
       "sourceRoot": "projects/components/visual-builder/src",
       "docsPath": "/libraries/visual-builder",
       "docsOverviewSource": "projects/docs/src/app/libraries/visual-builder/overview/overview.html",
-      "purpose": "Provide a visual composition or builder workspace.",
-      "useWhen": "Use for no-code/low-code editing, layouts, templates, and visual design workflows.",
-      "exampleTopics": [],
+      "purpose": "Experimental scaffold for a future no-code or low-code visual workspace.",
+      "useWhen": "Do not use ngs-visual-builder for production admin screens, dashboards, visual editors, page builders, or real no-code/low-code workflows yet. The current component is only a placeholder: it has no inputs, outputs, layout regions, canvas, drag and drop, inspector, persistence, or editable block model. Mention it only as an experimental scaffold for future visual builder work. Use ContentEditor for block-based CMS/page content, ImageDesigner for creative image composition, Tiles for editable dashboard widgets or config-driven dashboard renderers, Grid for static dashboard layouts, FormRenderer for backend-driven forms, KanbanBoard for workflow columns, and normal NgStarter layout/components for admin screens.",
+      "exampleTopics": [
+        "Visual Builder"
+      ],
       "minimalExample": null,
       "exampleFiles": [],
       "previewAsset": "projects/components/visual-builder/preview.svg",

package/fesm2022/ngstarter-ui-components-card.mjs

@@ -41,13 +41,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 
 class CardHeader {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CardHeader, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CardHeader, isStandalone: true, selector: "ngs-card-header", host: { classAttribute: "ngs-card-header" }, ngImport: i0, template: "<div class=\"flex items-center gap-3\">\n  <ng-content select=\"ngs-card-avatar, [ngs-card-avatar], [ngsCardAvatar]\"/>\n  <div class=\"ngs-card-header-text\">\n    <div>\n      <ng-content select=\"ngs-card-title, [ngs-card-title], [ngsCardTitle]\"/>\n      <ng-content select=\"ngs-card-subtitle, [ngs-card-subtitle], [ngsCardSubtitle]\"/>\n    </div>\n    <ng-content/>\n  </div>\n</div>\n<div class=\"aside\">\n  <ng-content select=\"ngs-card-aside, [ngs-card-aside], [ngsCardAside]\"/>\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ngs-card-padding, calc(var(--spacing, .25rem) * 3));gap:calc(var(--spacing, .25rem) * 3);flex:none}:host .aside:empty{display:none}:host .aside{flex:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.4", type: CardHeader, isStandalone: true, selector: "ngs-card-header", host: { classAttribute: "ngs-card-header" }, ngImport: i0, template: "<div class=\"flex h-full items-center gap-3\">\n  <ng-content select=\"ngs-card-avatar, [ngs-card-avatar], [ngsCardAvatar]\"/>\n  <div class=\"ngs-card-header-text\">\n    <div>\n      <ng-content select=\"ngs-card-title, [ngs-card-title], [ngsCardTitle]\"/>\n      <ng-content select=\"ngs-card-subtitle, [ngs-card-subtitle], [ngsCardSubtitle]\"/>\n    </div>\n    <ng-content/>\n  </div>\n</div>\n<div class=\"aside\">\n  <ng-content select=\"ngs-card-aside, [ngs-card-aside], [ngsCardAside]\"/>\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ngs-card-padding, calc(var(--spacing, .25rem) * 3));gap:calc(var(--spacing, .25rem) * 3);flex:none}:host .aside:empty{display:none}:host .aside{flex:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: CardHeader, decorators: [{
             type: Component,
             args: [{ selector: 'ngs-card-header', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         'class': 'ngs-card-header'
-                    }, template: "<div class=\"flex items-center gap-3\">\n  <ng-content select=\"ngs-card-avatar, [ngs-card-avatar], [ngsCardAvatar]\"/>\n  <div class=\"ngs-card-header-text\">\n    <div>\n      <ng-content select=\"ngs-card-title, [ngs-card-title], [ngsCardTitle]\"/>\n      <ng-content select=\"ngs-card-subtitle, [ngs-card-subtitle], [ngsCardSubtitle]\"/>\n    </div>\n    <ng-content/>\n  </div>\n</div>\n<div class=\"aside\">\n  <ng-content select=\"ngs-card-aside, [ngs-card-aside], [ngsCardAside]\"/>\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ngs-card-padding, calc(var(--spacing, .25rem) * 3));gap:calc(var(--spacing, .25rem) * 3);flex:none}:host .aside:empty{display:none}:host .aside{flex:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
+                    }, template: "<div class=\"flex h-full items-center gap-3\">\n  <ng-content select=\"ngs-card-avatar, [ngs-card-avatar], [ngsCardAvatar]\"/>\n  <div class=\"ngs-card-header-text\">\n    <div>\n      <ng-content select=\"ngs-card-title, [ngs-card-title], [ngsCardTitle]\"/>\n      <ng-content select=\"ngs-card-subtitle, [ngs-card-subtitle], [ngsCardSubtitle]\"/>\n    </div>\n    <ng-content/>\n  </div>\n</div>\n<div class=\"aside\">\n  <ng-content select=\"ngs-card-aside, [ngs-card-aside], [ngsCardAside]\"/>\n</div>\n", styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:space-between;padding:var(--ngs-card-padding, calc(var(--spacing, .25rem) * 3));gap:calc(var(--spacing, .25rem) * 3);flex:none}:host .aside:empty{display:none}:host .aside{flex:none}\n/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 
 class CardTitle {

package/fesm2022/ngstarter-ui-components-card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngstarter-ui-components-card.mjs","sources":["../../../projects/components/card/src/card-footer/card-footer.ts","../../../projects/components/card/src/card-footer/card-footer.html","../../../projects/components/card/src/config.ts","../../../projects/components/card/src/card/card.ts","../../../projects/components/card/src/card/card.html","../../../projects/components/card/src/card-header/card-header.ts","../../../projects/components/card/src/card-header/card-header.html","../../../projects/components/card/src/card-title/card-title.ts","../../../projects/components/card/src/card-title/card-title.html","../../../projects/components/card/src/card-subtitle/card-subtitle.ts","../../../projects/components/card/src/card-subtitle/card-subtitle.html","../../../projects/components/card/src/card-content/card-content.ts","../../../projects/components/card/src/card-content/card-content.html","../../../projects/components/card/src/card-actions/card-actions.ts","../../../projects/components/card/src/card-actions/card-actions.html","../../../projects/components/card/src/card-aside/card-aside.ts","../../../projects/components/card/src/card-aside/card-aside.html","../../../projects/components/card/src/card-image/card-image.ts","../../../projects/components/card/src/card-image/card-image.html","../../../projects/components/card/src/card-avatar/card-avatar.ts","../../../projects/components/card/ngstarter-ui-components-card.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-footer, [ngs-card-footer], [ngsCardFooter]',\n  templateUrl: './card-footer.html',\n  styleUrl: './card-footer.scss',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-footer'\n  }\n})\nexport class CardFooter {}\n","<ng-content />\n","import { InjectionToken, makeEnvironmentProviders, EnvironmentProviders } from '@angular/core';\n\nexport type CardAppearance = 'raised' | 'outlined' | 'filled';\n\nexport interface CardConfig {\n  appearance?: CardAppearance;\n}\n\nexport const CARD_CONFIG = new InjectionToken<CardConfig>('CARD_CONFIG');\n\nexport function provideCard(config: CardConfig): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: CARD_CONFIG, useValue: config }\n  ]);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n  contentChild,\n} from '@angular/core';\nimport { CardFooter } from '../card-footer/card-footer';\nimport { CARD_CONFIG, CardAppearance } from '../config';\n\n@Component({\n  selector: 'ngs-card',\n  exportAs: 'ngsCard',\n  templateUrl: './card.html',\n  styleUrl: './card.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card not-prose',\n    '[class.ngs-card-outlined]': 'appearance() === \"outlined\"',\n    '[class.ngs-card-filled]': 'appearance() === \"filled\"',\n    '[class.ngs-card-raised]': 'appearance() === \"raised\"',\n  },\n})\nexport class Card {\n  private _config = inject(CARD_CONFIG, { optional: true });\n\n  appearance = input<CardAppearance>(this._config?.appearance || 'outlined');\n\n  readonly _footer = contentChild(CardFooter);\n\n  get hasFooter(): boolean {\n    return !!this._footer();\n  }\n}\n","<ng-content/>\n@if (hasFooter) {\n  <ng-content select=\"ngs-card-footer\"/>\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-header',\n  standalone: true,\n  imports: [\n  ],\n  templateUrl: './card-header.html',\n  styleUrl: './card-header.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-header'\n  }\n})\nexport class CardHeader {}\n","<div class=\"flex items-center gap-3\">\n  <ng-content select=\"ngs-card-avatar, [ngs-card-avatar], [ngsCardAvatar]\"/>\n  <div class=\"ngs-card-header-text\">\n    <div>\n      <ng-content select=\"ngs-card-title, [ngs-card-title], [ngsCardTitle]\"/>\n      <ng-content select=\"ngs-card-subtitle, [ngs-card-subtitle], [ngsCardSubtitle]\"/>\n    </div>\n    <ng-content/>\n  </div>\n</div>\n<div class=\"aside\">\n  <ng-content select=\"ngs-card-aside, [ngs-card-aside], [ngsCardAside]\"/>\n</div>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-title, [ngs-card-title], [ngsCardTitle]',\n  exportAs: 'ngsCardTitle',\n  standalone: true,\n  templateUrl: './card-title.html',\n  styleUrls: ['./card-title.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-title'\n  }\n})\nexport class CardTitle {}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-subtitle, [ngs-card-subtitle], [ngsCardSubtitle]',\n  exportAs: 'ngsCardSubtitle',\n  standalone: true,\n  templateUrl: './card-subtitle.html',\n  styleUrl: './card-subtitle.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-subtitle'\n  }\n})\nexport class CardSubtitle {}\n","<ng-content />\n","import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-content, [ngs-card-content], [ngsCardContent]',\n  exportAs: 'ngsCardContent',\n  standalone: true,\n  templateUrl: './card-content.html',\n  styleUrls: ['./card-content.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-content',\n    '[class.without-padding]': 'withoutPadding()',\n  }\n})\nexport class CardContent {\n  withoutPadding = input(false, {\n    transform: booleanAttribute\n  })\n}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nexport type CardActionsPosition = 'start' | 'center' | 'end' | 'between';\n\n@Component({\n  selector: 'ngs-card-actions, [ngs-card-actions], [ngsCardActions]',\n  standalone: true,\n  templateUrl: './card-actions.html',\n  styleUrl: './card-actions.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-actions',\n    '[class.ngs-card-actions-align-end]': 'align() === \"end\"',\n    '[class.ngs-card-actions-align-center]': 'align() === \"center\"',\n    '[class.ngs-card-actions-align-between]': 'align() === \"between\"',\n  }\n})\nexport class CardActions {\n  align = input<CardActionsPosition>('start');\n}\n","<ng-content/>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-aside, [ngs-card-aside], ngsCardAside',\n  imports: [],\n  templateUrl: './card-aside.html',\n  styleUrl: './card-aside.scss',\n})\nexport class CardAside {\n\n}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-image, [ngs-card-image], [ngsCardImage]',\n  standalone: true,\n  templateUrl: './card-image.html',\n  styleUrl: './card-image.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-image'\n  }\n})\nexport class CardImage {}\n\n@Directive({\n  selector: '[ngs-card-sm-image], [ngsCardImageSmall]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-image ngs-card-sm-image'\n  }\n})\nexport class CardImageSmall {}\n\n@Directive({\n  selector: '[ngs-card-md-image], [ngsCardImageMedium]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-image ngs-card-md-image'\n  }\n})\nexport class CardImageMedium {}\n\n@Directive({\n  selector: '[ngs-card-lg-image], [ngsCardImageLarge]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-image ngs-card-lg-image'\n  }\n})\nexport class CardImageLarge {}\n\n@Directive({\n  selector: '[ngs-card-xl-image], [ngsCardImageXLarge]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-image ngs-card-xl-image'\n  }\n})\nexport class CardImageXLarge {}\n","<ng-content />\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: 'ngs-card-avatar, [ngs-card-avatar], [ngsCardAvatar]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-avatar'\n  },\n})\nexport class CardAvatar {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ngstarter-ui-components-card.mjs","sources":["../../../projects/components/card/src/card-footer/card-footer.ts","../../../projects/components/card/src/card-footer/card-footer.html","../../../projects/components/card/src/config.ts","../../../projects/components/card/src/card/card.ts","../../../projects/components/card/src/card/card.html","../../../projects/components/card/src/card-header/card-header.ts","../../../projects/components/card/src/card-header/card-header.html","../../../projects/components/card/src/card-title/card-title.ts","../../../projects/components/card/src/card-title/card-title.html","../../../projects/components/card/src/card-subtitle/card-subtitle.ts","../../../projects/components/card/src/card-subtitle/card-subtitle.html","../../../projects/components/card/src/card-content/card-content.ts","../../../projects/components/card/src/card-content/card-content.html","../../../projects/components/card/src/card-actions/card-actions.ts","../../../projects/components/card/src/card-actions/card-actions.html","../../../projects/components/card/src/card-aside/card-aside.ts","../../../projects/components/card/src/card-aside/card-aside.html","../../../projects/components/card/src/card-image/card-image.ts","../../../projects/components/card/src/card-image/card-image.html","../../../projects/components/card/src/card-avatar/card-avatar.ts","../../../projects/components/card/ngstarter-ui-components-card.ts"],"sourcesContent":["import { Component, ChangeDetectionStrategy } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-footer, [ngs-card-footer], [ngsCardFooter]',\n  templateUrl: './card-footer.html',\n  styleUrl: './card-footer.scss',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-footer'\n  }\n})\nexport class CardFooter {}\n","<ng-content />\n","import { InjectionToken, makeEnvironmentProviders, EnvironmentProviders } from '@angular/core';\n\nexport type CardAppearance = 'raised' | 'outlined' | 'filled';\n\nexport interface CardConfig {\n  appearance?: CardAppearance;\n}\n\nexport const CARD_CONFIG = new InjectionToken<CardConfig>('CARD_CONFIG');\n\nexport function provideCard(config: CardConfig): EnvironmentProviders {\n  return makeEnvironmentProviders([\n    { provide: CARD_CONFIG, useValue: config }\n  ]);\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  inject,\n  input,\n  contentChild,\n} from '@angular/core';\nimport { CardFooter } from '../card-footer/card-footer';\nimport { CARD_CONFIG, CardAppearance } from '../config';\n\n@Component({\n  selector: 'ngs-card',\n  exportAs: 'ngsCard',\n  templateUrl: './card.html',\n  styleUrl: './card.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card not-prose',\n    '[class.ngs-card-outlined]': 'appearance() === \"outlined\"',\n    '[class.ngs-card-filled]': 'appearance() === \"filled\"',\n    '[class.ngs-card-raised]': 'appearance() === \"raised\"',\n  },\n})\nexport class Card {\n  private _config = inject(CARD_CONFIG, { optional: true });\n\n  appearance = input<CardAppearance>(this._config?.appearance || 'outlined');\n\n  readonly _footer = contentChild(CardFooter);\n\n  get hasFooter(): boolean {\n    return !!this._footer();\n  }\n}\n","<ng-content/>\n@if (hasFooter) {\n  <ng-content select=\"ngs-card-footer\"/>\n}\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-header',\n  standalone: true,\n  imports: [\n  ],\n  templateUrl: './card-header.html',\n  styleUrl: './card-header.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-header'\n  }\n})\nexport class CardHeader {}\n","<div class=\"flex h-full items-center gap-3\">\n  <ng-content select=\"ngs-card-avatar, [ngs-card-avatar], [ngsCardAvatar]\"/>\n  <div class=\"ngs-card-header-text\">\n    <div>\n      <ng-content select=\"ngs-card-title, [ngs-card-title], [ngsCardTitle]\"/>\n      <ng-content select=\"ngs-card-subtitle, [ngs-card-subtitle], [ngsCardSubtitle]\"/>\n    </div>\n    <ng-content/>\n  </div>\n</div>\n<div class=\"aside\">\n  <ng-content select=\"ngs-card-aside, [ngs-card-aside], [ngsCardAside]\"/>\n</div>\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-title, [ngs-card-title], [ngsCardTitle]',\n  exportAs: 'ngsCardTitle',\n  standalone: true,\n  templateUrl: './card-title.html',\n  styleUrls: ['./card-title.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-title'\n  }\n})\nexport class CardTitle {}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-subtitle, [ngs-card-subtitle], [ngsCardSubtitle]',\n  exportAs: 'ngsCardSubtitle',\n  standalone: true,\n  templateUrl: './card-subtitle.html',\n  styleUrl: './card-subtitle.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-subtitle'\n  }\n})\nexport class CardSubtitle {}\n","<ng-content />\n","import { booleanAttribute, ChangeDetectionStrategy, Component, input } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-content, [ngs-card-content], [ngsCardContent]',\n  exportAs: 'ngsCardContent',\n  standalone: true,\n  templateUrl: './card-content.html',\n  styleUrls: ['./card-content.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-content',\n    '[class.without-padding]': 'withoutPadding()',\n  }\n})\nexport class CardContent {\n  withoutPadding = input(false, {\n    transform: booleanAttribute\n  })\n}\n","<ng-content />\n","import { ChangeDetectionStrategy, Component, input } from '@angular/core';\n\nexport type CardActionsPosition = 'start' | 'center' | 'end' | 'between';\n\n@Component({\n  selector: 'ngs-card-actions, [ngs-card-actions], [ngsCardActions]',\n  standalone: true,\n  templateUrl: './card-actions.html',\n  styleUrl: './card-actions.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-actions',\n    '[class.ngs-card-actions-align-end]': 'align() === \"end\"',\n    '[class.ngs-card-actions-align-center]': 'align() === \"center\"',\n    '[class.ngs-card-actions-align-between]': 'align() === \"between\"',\n  }\n})\nexport class CardActions {\n  align = input<CardActionsPosition>('start');\n}\n","<ng-content/>\n","import { Component } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-aside, [ngs-card-aside], ngsCardAside',\n  imports: [],\n  templateUrl: './card-aside.html',\n  styleUrl: './card-aside.scss',\n})\nexport class CardAside {\n\n}\n","<ng-content/>\n","import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';\n\n@Component({\n  selector: 'ngs-card-image, [ngs-card-image], [ngsCardImage]',\n  standalone: true,\n  templateUrl: './card-image.html',\n  styleUrl: './card-image.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'class': 'ngs-card-image'\n  }\n})\nexport class CardImage {}\n\n@Directive({\n  selector: '[ngs-card-sm-image], [ngsCardImageSmall]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-image ngs-card-sm-image'\n  }\n})\nexport class CardImageSmall {}\n\n@Directive({\n  selector: '[ngs-card-md-image], [ngsCardImageMedium]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-image ngs-card-md-image'\n  }\n})\nexport class CardImageMedium {}\n\n@Directive({\n  selector: '[ngs-card-lg-image], [ngsCardImageLarge]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-image ngs-card-lg-image'\n  }\n})\nexport class CardImageLarge {}\n\n@Directive({\n  selector: '[ngs-card-xl-image], [ngsCardImageXLarge]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-image ngs-card-xl-image'\n  }\n})\nexport class CardImageXLarge {}\n","<ng-content />\n","import { Directive } from '@angular/core';\n\n@Directive({\n  selector: 'ngs-card-avatar, [ngs-card-avatar], [ngsCardAvatar]',\n  standalone: true,\n  host: {\n    'class': 'ngs-card-avatar'\n  },\n})\nexport class CardAvatar {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngstarter-ui-components-input-validator.mjs

@@ -1,11 +1,48 @@
+const onlyDigits = (value) => {
+    return String(value ?? '').replace(/\D/g, '');
+};
+const isValidLuhn = (value) => {
+    let sum = 0;
+    let shouldDouble = false;
+    for (let i = value.length - 1; i >= 0; i--) {
+        let digit = Number(value[i]);
+        if (shouldDouble) {
+            digit *= 2;
+            if (digit > 9) {
+                digit -= 9;
+            }
+        }
+        sum += digit;
+        shouldDouble = !shouldDouble;
+    }
+    return sum % 10 === 0;
+};
+function creditCardNumberValidator() {
+    return (control) => {
+        const value = onlyDigits(control.value);
+        if (!value) {
+            return null;
+        }
+        if (value.length < 12 || value.length > 19 || !isValidLuhn(value)) {
+            return { creditCardNumberInvalid: true };
+        }
+        return null;
+    };
+}
 function expiryDateValidator() {
     return (control) => {
-        const value = control.value;
-        if (!value || value.length !== 4) {
+        const value = onlyDigits(control.value);
+        if (!value) {
             return null;
         }
+        if (value.length !== 4) {
+            return { expiryDateInvalid: true };
+        }
         const month = parseInt(value.substring(0, 2), 10);
         const year = parseInt(value.substring(2, 4), 10);
+        if (month < 1 || month > 12) {
+            return { expiryDateInvalid: true };
+        }
         const currentDate = new Date();
         const currentMonth = currentDate.getMonth() + 1;
         const currentYear = parseInt(currentDate.getFullYear().toString().substring(2, 4));
@@ -15,10 +52,29 @@ function expiryDateValidator() {
         return null;
     };
 }
+function creditCardCvvValidator(options = {}) {
+    const minLength = options.minLength ?? 3;
+    const maxLength = options.maxLength ?? 4;
+    return (control) => {
+        const value = onlyDigits(control.value);
+        if (!value) {
+            return null;
+        }
+        if (value.length < minLength || value.length > maxLength) {
+            return {
+                creditCardCvvInvalid: {
+                    minLength,
+                    maxLength,
+                },
+            };
+        }
+        return null;
+    };
+}
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { expiryDateValidator };
+export { creditCardCvvValidator, creditCardNumberValidator, expiryDateValidator };
 //# sourceMappingURL=ngstarter-ui-components-input-validator.mjs.map

package/fesm2022/ngstarter-ui-components-input-validator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngstarter-ui-components-input-validator.mjs","sources":["../../../projects/components/input-validator/src/expiry-date-validator.ts","../../../projects/components/input-validator/ngstarter-ui-components-input-validator.ts"],"sourcesContent":["import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\n\nexport function expiryDateValidator(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    const value = control.value as string;\n\n    if (!value || value.length !== 4) {\n      return null;\n    }\n\n    const month = parseInt(value.substring(0, 2), 10);\n    const year = parseInt(value.substring(2, 4), 10);\n    const currentDate = new Date();\n    const currentMonth = currentDate.getMonth() + 1;\n    const currentYear = parseInt(currentDate.getFullYear().toString().substring(2, 4));\n\n    if (year < currentYear || (year === currentYear && month < currentMonth)) {\n      return { expiryDateInPast: true };\n    }\n\n    return null;\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"SAEgB,mBAAmB,GAAA;IACjC,OAAO,CAAC,OAAwB,KAA6B;AAC3D,QAAA,MAAM,KAAK,GAAG,OAAO,CAAC,KAAe;QAErC,IAAI,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;AAChC,YAAA,OAAO,IAAI;QACb;AAEA,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AACjD,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;AAChD,QAAA,MAAM,WAAW,GAAG,IAAI,IAAI,EAAE;QAC9B,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,GAAG,CAAC;AAC/C,QAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,QAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAElF,QAAA,IAAI,IAAI,GAAG,WAAW,KAAK,IAAI,KAAK,WAAW,IAAI,KAAK,GAAG,YAAY,CAAC,EAAE;AACxE,YAAA,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE;QACnC;AAEA,QAAA,OAAO,IAAI;AACb,IAAA,CAAC;AACH;;ACtBA;;AAEG;;;;"}
+{"version":3,"file":"ngstarter-ui-components-input-validator.mjs","sources":["../../../projects/components/input-validator/src/expiry-date-validator.ts","../../../projects/components/input-validator/ngstarter-ui-components-input-validator.ts"],"sourcesContent":["import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';\n\nconst onlyDigits = (value: unknown): string => {\n  return String(value ?? '').replace(/\\D/g, '');\n};\n\nconst isValidLuhn = (value: string): boolean => {\n  let sum = 0;\n  let shouldDouble = false;\n\n  for (let i = value.length - 1; i >= 0; i--) {\n    let digit = Number(value[i]);\n\n    if (shouldDouble) {\n      digit *= 2;\n      if (digit > 9) {\n        digit -= 9;\n      }\n    }\n\n    sum += digit;\n    shouldDouble = !shouldDouble;\n  }\n\n  return sum % 10 === 0;\n};\n\nexport function creditCardNumberValidator(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    const value = onlyDigits(control.value);\n\n    if (!value) {\n      return null;\n    }\n\n    if (value.length < 12 || value.length > 19 || !isValidLuhn(value)) {\n      return { creditCardNumberInvalid: true };\n    }\n\n    return null;\n  };\n}\n\nexport function expiryDateValidator(): ValidatorFn {\n  return (control: AbstractControl): ValidationErrors | null => {\n    const value = onlyDigits(control.value);\n\n    if (!value) {\n      return null;\n    }\n\n    if (value.length !== 4) {\n      return { expiryDateInvalid: true };\n    }\n\n    const month = parseInt(value.substring(0, 2), 10);\n    const year = parseInt(value.substring(2, 4), 10);\n\n    if (month < 1 || month > 12) {\n      return { expiryDateInvalid: true };\n    }\n\n    const currentDate = new Date();\n    const currentMonth = currentDate.getMonth() + 1;\n    const currentYear = parseInt(currentDate.getFullYear().toString().substring(2, 4));\n\n    if (year < currentYear || (year === currentYear && month < currentMonth)) {\n      return { expiryDateInPast: true };\n    }\n\n    return null;\n  };\n}\n\nexport interface CreditCardCvvValidatorOptions {\n  minLength?: number;\n  maxLength?: number;\n}\n\nexport function creditCardCvvValidator(options: CreditCardCvvValidatorOptions = {}): ValidatorFn {\n  const minLength = options.minLength ?? 3;\n  const maxLength = options.maxLength ?? 4;\n\n  return (control: AbstractControl): ValidationErrors | null => {\n    const value = onlyDigits(control.value);\n\n    if (!value) {\n      return null;\n    }\n\n    if (value.length < minLength || value.length > maxLength) {\n      return {\n        creditCardCvvInvalid: {\n          minLength,\n          maxLength,\n        },\n      };\n    }\n\n    return null;\n  };\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ngstarter-ui/components",
   "description": "NgStarter - AI-friendly Enterprise Angular UI Components and Admin Panel",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "repository": {
     "type": "git",
     "url": "https://github.com/elementarlabsdev/ngstarter.git"

package/types/ngstarter-ui-components-input-validator.d.ts

@@ -1,5 +1,12 @@
 import { ValidatorFn } from '@angular/forms';
 
+declare function creditCardNumberValidator(): ValidatorFn;
 declare function expiryDateValidator(): ValidatorFn;
+interface CreditCardCvvValidatorOptions {
+    minLength?: number;
+    maxLength?: number;
+}
+declare function creditCardCvvValidator(options?: CreditCardCvvValidatorOptions): ValidatorFn;
 
-export { expiryDateValidator };
+export { creditCardCvvValidator, creditCardNumberValidator, expiryDateValidator };
+export type { CreditCardCvvValidatorOptions };