@ng-zen/cli 21.0.0 → 21.1.0-next.1

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## [21.1.0-next.1](https://github.com/kstepien3/ng-zen/compare/v21.0.0...v21.1.0-next.1) (2026-02-15)
+
+### 🚀 New Features
+
+* **components:** improve path component generation ([#362](https://github.com/kstepien3/ng-zen/issues/362)) ([8503565](https://github.com/kstepien3/ng-zen/commit/8503565076e2189a36c18b8555639cf86adb2fcc))
+* **popover:** add new component ([#374](https://github.com/kstepien3/ng-zen/issues/374)) ([c67daea](https://github.com/kstepien3/ng-zen/commit/c67daea23027ecfdd868b96ff29b65903059ac20))
+
+### 🛠️ Code Refactor
+
+* **ui:** rename `components` to `ui` across schematics ([#376](https://github.com/kstepien3/ng-zen/issues/376)) ([6b1bc9f](https://github.com/kstepien3/ng-zen/commit/6b1bc9fc6197fefa85d3eb0d2d9947ef44547533))
+
 ## [21.0.0](https://github.com/kstepien3/ng-zen/compare/v20.5.0...v21.0.0) (2025-12-18)
 
 ### ⚠ BREAKING CHANGES

package/README.md

@@ -39,7 +39,7 @@ Unlike traditional UI libraries that give you `<library-button>` black boxes, @n
 
 ### 🏎️ **Instant Productivity**
 
-- **Production-Ready Components:** Avatar, Button, Checkbox, Divider, Form Control, Icon, Input, Skeleton, Switch, Textarea
+- **Production-Ready UI Elements:** Alert, Avatar, Button, Checkbox, Divider, Form Control, Icon, Input, Popover, Radio, Skeleton, Switch, Textarea
 - **Zero Configuration:** Works with Angular 20+ out of the box
 - **Complete Setup:** Each component includes unit tests, Storybook stories, and documentation
 
@@ -60,7 +60,7 @@ Unlike traditional UI libraries that give you `<library-button>` black boxes, @n
 
 1. [Quick Start](#-quick-start)
 2. [Installation](#-installation)
-3. [Available Components](#-available-components)
+3. [Available Elements](#-available-elements)
 4. [Usage Examples](#-usage-examples)
 5. [Perfect For](#-perfect-for)
 6. [Advanced Features](#-advanced-features)
@@ -89,10 +89,10 @@ This command:
 Then generate your first component:
 
 ```bash
-ng generate @ng-zen/cli:component
+ng generate @ng-zen/cli:ui
 ```
 
-Select components from an interactive menu and they'll be generated directly into your current directory! 🎉
+Select components from an interactive menu and they'll be generated in the `ui` folder within your project's source directory (e.g., `src/app/ui`)! 🎉
 
 ## 📦 Installation
 
@@ -112,21 +112,23 @@ pnpm add -D @ng-zen/cli
 pnpm add -D @ng-zen/cli@next
 ```
 
-## 🧩 Available Components
-
-| Component        | Description                      | Features                                           |
-| ---------------- | -------------------------------- | -------------------------------------------------- |
-| **Avatar**       | User profile images and initials | Image fallback, size variants, rounded styles      |
-| **Alert**        | Informational messages           | Customizable styles, dismissible options           |
-| **Button**       | Interactive buttons              | Primary/secondary variants, loading states, icons  |
-| **Checkbox**     | Form checkboxes                  | Indeterminate state, custom styling, validation    |
-| **Divider**      | Visual separators                | Horizontal/vertical, with labels, custom thickness |
-| **Form Control** | Form field wrapper               | Labels, validation messages, required indicators   |
-| **Icon**         | SVG icon system                  | Huge Icons integration, size variants, colors      |
-| **Input**        | Text input fields                | Validation states, prefixes/suffixes, types        |
-| **Skeleton**     | Loading placeholders             | Multiple shapes, animation, responsive             |
-| **Switch**       | Toggle controls                  | On/off states, disabled state, custom labels       |
-| **Textarea**     | Multi-line text input            | Auto-resize, character counts, validation          |
+## 🧩 Available UIs
+
+| Component        | Description                      | Features                                                                  |
+| ---------------- | -------------------------------- | ------------------------------------------------------------------------- |
+| **Avatar**       | User profile images and initials | Image fallback, size variants, rounded styles                             |
+| **Alert**        | Informational messages           | Customizable styles, dismissible options                                  |
+| **Button**       | Interactive buttons              | Primary/secondary variants, loading states, icons                         |
+| **Checkbox**     | Form checkboxes                  | Indeterminate state, custom styling, validation                           |
+| **Divider**      | Visual separators                | Horizontal/vertical, with labels, custom thickness                        |
+| **Form Control** | Form field wrapper               | Labels, validation messages, required indicators                          |
+| **Icon**         | SVG icon system                  | Huge Icons integration, size variants, colors                             |
+| **Input**        | Text input fields                | Validation states, prefixes/suffixes, types                               |
+| **Popover**      | Native Popover API directive     | Template/string content, placements, click toggle, CSS anchor positioning |
+| **Radio**        | Form radio buttons               | Group selection, two-way binding, custom styling, disabled state          |
+| **Skeleton**     | Loading placeholders             | Multiple shapes, animation, responsive                                    |
+| **Switch**       | Toggle controls                  | On/off states, disabled state, custom labels                              |
+| **Textarea**     | Multi-line text input            | Auto-resize, character counts, validation                                 |
 
 > 💡 **More components coming soon!** Planned: Directives, Pipes, Services, and additional UI elements.
 
@@ -135,17 +137,17 @@ pnpm add -D @ng-zen/cli@next
 ### Basic Component Generation
 
 ```bash
-# Interactive mode - choose components from a menu
-ng generate @ng-zen/cli:component
+# Interactive mode - choose components from a menu  (default path: src/app/ui if not provided)
+ng generate @ng-zen/cli:ui
 
-# Generate specific components
-ng generate @ng-zen/cli:component --components avatar button
+# Generate specific UI elements
+ng generate @ng-zen/cli:ui --ui avatar button
 
 # Custom location
-ng generate @ng-zen/cli:component ./src/app/ui --components input checkbox
+ng generate @ng-zen/cli:ui ./src/app/custom --ui input checkbox
 
 # Include Storybook stories
-ng generate @ng-zen/cli:component --components button --stories
+ng generate @ng-zen/cli:ui --ui button --stories
 ```
 
 ### What Gets Generated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "21.0.0",
+  "version": "21.1.0-next.1",
   "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like avatar, button, checkbox, divider, form-control, icon, input, skeleton, switch, textarea with Storybook demos.",
   "license": "BSD-2-Clause",
   "private": false,
@@ -27,16 +27,6 @@
     "storybook angular",
     "customizable ui",
     "angular library",
-    "avatar",
-    "button",
-    "checkbox",
-    "input",
-    "textarea",
-    "switch",
-    "skeleton",
-    "divider",
-    "form-control",
-    "icon",
     "angular ui",
     "angular components",
     "ui library",
@@ -54,7 +44,20 @@
     "accessibility",
     "theming",
     "angular schematics generator",
-    "ui components cli"
+    "ui components cli",
+    "alert",
+    "avatar",
+    "button",
+    "checkbox",
+    "divider",
+    "form-control",
+    "icon",
+    "input",
+    "popover",
+    "radio",
+    "skeleton",
+    "switch",
+    "textarea"
   ],
   "ng-add": {
     "save": "devDependencies"

package/schematics/collection.json

@@ -6,11 +6,11 @@
       "factory": "./ng-add/index#ngAdd",
       "schema": "./ng-add/schema.json"
     },
-    "component": {
-      "description": "This schematic generates ui components",
-      "factory": "./components/index#componentGenerator",
-      "schema": "./components/schema.json",
-      "aliases": ["c"]
+    "ui": {
+      "description": "This schematic generates UI components",
+      "factory": "./ui/index#uiGenerator",
+      "schema": "./ui/schema.json",
+      "aliases": ["c", "component", "components"]
     },
     "dependency-manager": {
       "description": "Manage dependencies for selected elements",

package/schematics/dependency-manager/index.js

@@ -10,7 +10,7 @@ function dependencyManager() {
     return (tree, context) => {
         const dependenciesToInstall = (0, get_dependencies_1.getDependencies)(selected_elements_1.selectedElements, dependencies_constant_1.DEPENDENCIES_CONFIG);
         if (!dependenciesToInstall.length) {
-            context.logger.info('✅ No dependencies to install for the selected components.');
+            context.logger.info('✅ No dependencies to install for the selected elements.');
             return tree;
         }
         context.logger.info(`📦 Installing ${dependenciesToInstall.length} dependencies...`);

package/schematics/dependency-manager/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/dependency-manager/index.ts"],"names":[],"mappings":";;AAQA,8CAkBC;AAzBD,4DAA0E;AAC1E,2EAAoG;AAEpG,wEAAoE;AACpE,mEAA8D;AAC9D,+DAA2D;AAE3D,SAAgB,iBAAiB;IAC/B,OAAO,CAAC,IAAU,EAAE,OAAO,EAAE,EAAE;QAC7B,MAAM,qBAAqB,GAAqB,IAAA,kCAAe,EAAC,oCAAgB,EAAE,2CAAmB,CAAC,CAAC;QAEvG,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,CAAC;YAClC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,2DAA2D,CAAC,CAAC;YACjF,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,qBAAqB,CAAC,MAAM,kBAAkB,CAAC,CAAC;QAErF,KAAK,MAAM,UAAU,IAAI,qBAAqB,EAAE,CAAC;YAC/C,IAAA,uCAAwB,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule, Tree } from '@angular-devkit/schematics';\nimport { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';\nimport { addPackageJsonDependency, NodeDependency } from '@schematics/angular/utility/dependencies';\n\nimport { selectedElements } from '../../services/selected-elements';\nimport { DEPENDENCIES_CONFIG } from './dependencies.constant';\nimport { getDependencies } from './utils/get-dependencies';\n\nexport function dependencyManager(): Rule {\n  return (tree: Tree, context) => {\n    const dependenciesToInstall: NodeDependency[] = getDependencies(selectedElements, DEPENDENCIES_CONFIG);\n\n    if (!dependenciesToInstall.length) {\n      context.logger.info('✅ No dependencies to install for the selected components.');\n      return tree;\n    }\n\n    context.logger.info(`📦 Installing ${dependenciesToInstall.length} dependencies...`);\n\n    for (const dependency of dependenciesToInstall) {\n      addPackageJsonDependency(tree, dependency);\n    }\n\n    context.addTask(new NodePackageInstallTask());\n    return tree;\n  };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/schematics/dependency-manager/index.ts"],"names":[],"mappings":";;AAQA,8CAkBC;AAzBD,4DAA0E;AAC1E,2EAAoG;AAEpG,wEAAoE;AACpE,mEAA8D;AAC9D,+DAA2D;AAE3D,SAAgB,iBAAiB;IAC/B,OAAO,CAAC,IAAU,EAAE,OAAO,EAAE,EAAE;QAC7B,MAAM,qBAAqB,GAAqB,IAAA,kCAAe,EAAC,oCAAgB,EAAE,2CAAmB,CAAC,CAAC;QAEvG,IAAI,CAAC,qBAAqB,CAAC,MAAM,EAAE,CAAC;YAClC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,yDAAyD,CAAC,CAAC;YAC/E,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,qBAAqB,CAAC,MAAM,kBAAkB,CAAC,CAAC;QAErF,KAAK,MAAM,UAAU,IAAI,qBAAqB,EAAE,CAAC;YAC/C,IAAA,uCAAwB,EAAC,IAAI,EAAE,UAAU,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,CAAC,OAAO,CAAC,IAAI,8BAAsB,EAAE,CAAC,CAAC;QAC9C,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;AACJ,CAAC","sourcesContent":["import { Rule, Tree } from '@angular-devkit/schematics';\nimport { NodePackageInstallTask } from '@angular-devkit/schematics/tasks';\nimport { addPackageJsonDependency, NodeDependency } from '@schematics/angular/utility/dependencies';\n\nimport { selectedElements } from '../../services/selected-elements';\nimport { DEPENDENCIES_CONFIG } from './dependencies.constant';\nimport { getDependencies } from './utils/get-dependencies';\n\nexport function dependencyManager(): Rule {\n  return (tree: Tree, context) => {\n    const dependenciesToInstall: NodeDependency[] = getDependencies(selectedElements, DEPENDENCIES_CONFIG);\n\n    if (!dependenciesToInstall.length) {\n      context.logger.info('✅ No dependencies to install for the selected elements.');\n      return tree;\n    }\n\n    context.logger.info(`📦 Installing ${dependenciesToInstall.length} dependencies...`);\n\n    for (const dependency of dependenciesToInstall) {\n      addPackageJsonDependency(tree, dependency);\n    }\n\n    context.addTask(new NodePackageInstallTask());\n    return tree;\n  };\n}\n"]}

package/schematics/dependency-manager/index.ts

@@ -11,7 +11,7 @@ export function dependencyManager(): Rule {
     const dependenciesToInstall: NodeDependency[] = getDependencies(selectedElements, DEPENDENCIES_CONFIG);
 
     if (!dependenciesToInstall.length) {
-      context.logger.info('✅ No dependencies to install for the selected components.');
+      context.logger.info('✅ No dependencies to install for the selected elements.');
       return tree;
     }
 

package/schematics/dependency-manager/utils/get-dependencies.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-dependencies.js","sourceRoot":"","sources":["../../../../../../src/schematics/dependency-manager/utils/get-dependencies.ts"],"names":[],"mappings":";;AAKA,0CAyBC;AA9BD,2EAA8F;AAK9F,SAAgB,eAAe,CAC7B,gBAAiC,EACjC,kBAAwC;IAExC,MAAM,YAAY,GAAqB,EAAE,CAAC;IAE1C,KAAK,MAAM,SAAS,IAAI,gBAAgB,EAAE,CAAC;QACzC,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC;YAAE,SAAS;QAE7C,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,iCAAkB,CAAC,EAAE,CAAC;YACrD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,QAAQ;gBAAE,SAAS;YAExB,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvD,YAAY,CAAC,IAAI,CAAC;oBAChB,IAAI;oBACJ,IAAI;oBACJ,OAAO;oBACP,SAAS,EAAE,KAAK;iBACjB,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { NodeDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';\n\nimport { FilesConfig } from '../../../types';\nimport { ComponentType } from '../../components/schema';\n\nexport function getDependencies(\n  selectedElements: ComponentType[],\n  dependenciesConfig: Partial<FilesConfig>\n): NodeDependency[] {\n  const dependencies: NodeDependency[] = [];\n\n  for (const component of selectedElements) {\n    if (!dependenciesConfig[component]) continue;\n\n    for (const type of Object.values(NodeDependencyType)) {\n      const typeDeps = dependenciesConfig[component][type];\n      if (!typeDeps) continue;\n\n      for (const [name, version] of Object.entries(typeDeps)) {\n        dependencies.push({\n          type,\n          name,\n          version,\n          overwrite: false,\n        });\n      }\n    }\n  }\n\n  return dependencies;\n}\n"]}
+{"version":3,"file":"get-dependencies.js","sourceRoot":"","sources":["../../../../../../src/schematics/dependency-manager/utils/get-dependencies.ts"],"names":[],"mappings":";;AAKA,0CAyBC;AA9BD,2EAA8F;AAK9F,SAAgB,eAAe,CAC7B,gBAA0B,EAC1B,kBAAwC;IAExC,MAAM,YAAY,GAAqB,EAAE,CAAC;IAE1C,KAAK,MAAM,SAAS,IAAI,gBAAgB,EAAE,CAAC;QACzC,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC;YAAE,SAAS;QAE7C,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,iCAAkB,CAAC,EAAE,CAAC;YACrD,MAAM,QAAQ,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC;YACrD,IAAI,CAAC,QAAQ;gBAAE,SAAS;YAExB,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;gBACvD,YAAY,CAAC,IAAI,CAAC;oBAChB,IAAI;oBACJ,IAAI;oBACJ,OAAO;oBACP,SAAS,EAAE,KAAK;iBACjB,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,YAAY,CAAC;AACtB,CAAC","sourcesContent":["import { NodeDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';\n\nimport { FilesConfig } from '../../../types';\nimport { UiType } from '../../ui/schema';\n\nexport function getDependencies(\n  selectedElements: UiType[],\n  dependenciesConfig: Partial<FilesConfig>\n): NodeDependency[] {\n  const dependencies: NodeDependency[] = [];\n\n  for (const component of selectedElements) {\n    if (!dependenciesConfig[component]) continue;\n\n    for (const type of Object.values(NodeDependencyType)) {\n      const typeDeps = dependenciesConfig[component][type];\n      if (!typeDeps) continue;\n\n      for (const [name, version] of Object.entries(typeDeps)) {\n        dependencies.push({\n          type,\n          name,\n          version,\n          overwrite: false,\n        });\n      }\n    }\n  }\n\n  return dependencies;\n}\n"]}

package/schematics/dependency-manager/utils/get-dependencies.ts

@@ -1,10 +1,10 @@
 import { NodeDependency, NodeDependencyType } from '@schematics/angular/utility/dependencies';
 
 import { FilesConfig } from '../../../types';
-import { ComponentType } from '../../components/schema';
+import { UiType } from '../../ui/schema';
 
 export function getDependencies(
-  selectedElements: ComponentType[],
+  selectedElements: UiType[],
   dependenciesConfig: Partial<FilesConfig>
 ): NodeDependency[] {
   const dependencies: NodeDependency[] = [];

package/schematics/{components → ui}/files/alert/alert.stories.ts

@@ -13,7 +13,7 @@ interface StoryParams {
 type Options = ZenAlert & StoryParams;
 
 export default {
-  title: 'Components/Alert',
+  title: 'Ui/Alert',
   component: ZenAlert,
   decorators: [moduleMetadata({ imports: [ZenIcon] })],
   args: {

package/schematics/{components → ui}/files/avatar/avatar.stories.ts

@@ -5,12 +5,12 @@ import { ZenAvatar } from './avatar';
 type Options = ZenAvatar;
 
 export default {
-  title: 'Components/Avatar',
+  title: 'Ui/Avatar',
   component: ZenAvatar,
   argTypes: {
     src: {
       table: {
-        category: 'Inputs',
+        category: 'inputs',
         type: {
           summary: 'string',
         },
@@ -22,7 +22,7 @@ export default {
     },
     alt: {
       table: {
-        category: 'Inputs',
+        category: 'inputs',
         type: {
           summary: 'string',
         },

package/schematics/{components → ui}/files/button/button.stories.ts

@@ -10,7 +10,7 @@ interface StoryParams {
 type Options = ZenButton & StoryParams;
 
 export default {
-  title: 'Components/Button',
+  title: 'Ui/Button',
   component: ZenButton,
   args: {
     content: 'Test',

package/schematics/{components → ui}/files/checkbox/checkbox.stories.ts

@@ -5,7 +5,7 @@ import { ZenCheckbox } from './checkbox';
 type Options = ZenCheckbox;
 
 export default {
-  title: 'Components/Checkbox',
+  title: 'Ui/Checkbox',
   component: ZenCheckbox,
   argTypes: {
     value: {

package/schematics/{components → ui}/files/divider/divider.stories.ts

@@ -10,7 +10,7 @@ interface StoryParams {
 type Options = ZenDivider & StoryParams;
 
 export default {
-  title: 'Components/Divider',
+  title: 'Ui/Divider',
   component: ZenDivider,
   parameters: {
     layout: 'padded',
@@ -33,7 +33,7 @@ export default {
       control: 'select',
       options: ['start', 'center', 'end'],
       table: {
-        category: 'Inputs',
+        category: 'inputs',
         defaultValue: { summary: 'center' },
         type: { summary: '"start" | "center" | "end"' },
       },

package/schematics/{components → ui}/files/form-control/form-control.stories.ts

@@ -8,7 +8,7 @@ import { ZenFormControl } from './form-control';
 type Options = ZenFormControl<unknown>;
 
 export default {
-  title: 'Components/FormControl',
+  title: 'Ui/FormControl',
   component: ZenFormControl,
   decorators: [
     moduleMetadata({ imports: [ZenCheckbox, ZenInput, ZenSwitch] }),

package/schematics/{components → ui}/files/icon/icon.stories.ts

@@ -6,7 +6,7 @@ import { ZenIcon } from './icon';
 type Options = ZenIcon;
 
 export default {
-  title: 'Components/Icon',
+  title: 'Ui/Icon',
   component: ZenIcon,
   argTypes: {
     icon: {

package/schematics/{components → ui}/files/input/input.stories.ts

@@ -5,7 +5,7 @@ import { ZenInput } from './input';
 type Options = ZenInput;
 
 export default {
-  title: 'Components/Input',
+  title: 'Ui/Input',
   component: ZenInput,
   argTypes: {
     value: {

package/schematics/ui/files/popover/host/popover-host.scss

@@ -0,0 +1,76 @@
+:host {
+  --zen-popover-offset: 0.5rem;
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  position: fixed;
+  inset: auto;
+  margin: var(--zen-popover-offset);
+  width: max-content;
+  max-width: 300px;
+  background: white;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 0.5rem;
+  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  overflow: visible;
+
+  // Auto-reposition if the popover would overflow
+  position-try-fallbacks:
+    flip-block,
+    flip-inline,
+    flip-block flip-inline;
+
+  /* TOP */
+  &[data-placement='top'] {
+    position-area: top center;
+  }
+
+  &[data-placement='top-start'] {
+    position-area: top left;
+  }
+
+  &[data-placement='top-end'] {
+    position-area: top right;
+  }
+
+  /* BOTTOM */
+  &[data-placement='bottom'] {
+    position-area: bottom center;
+  }
+
+  &[data-placement='bottom-start'] {
+    position-area: bottom left;
+  }
+
+  &[data-placement='bottom-end'] {
+    position-area: bottom right;
+  }
+
+  /* LEFT */
+  &[data-placement='left'] {
+    position-area: left center;
+  }
+
+  &[data-placement='left-start'] {
+    position-area: left top;
+  }
+
+  &[data-placement='left-end'] {
+    position-area: left bottom;
+  }
+
+  /* RIGHT */
+  &[data-placement='right'] {
+    position-area: right center;
+  }
+
+  &[data-placement='right-start'] {
+    position-area: right top;
+  }
+
+  &[data-placement='right-end'] {
+    position-area: right bottom;
+  }
+}

package/schematics/ui/files/popover/host/popover-host.spec.ts

@@ -0,0 +1,20 @@
+import { provideZonelessChangeDetection } from '@angular/core';
+import { TestBed } from '@angular/core/testing';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ZenPopoverHost } from './popover-host';
+
+describe('ZenPopoverHost', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenPopoverHost],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    const fixture = TestBed.createComponent(ZenPopoverHost);
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/ui/files/popover/host/popover-host.ts

@@ -0,0 +1,38 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+import { PopoverPlacement } from '../popover-positions.type';
+
+/**
+ * ZenPopoverHost is a minimal host component created dynamically by the `ZenPopover` directive.
+ * It exists mainly to provide a real DOM element that can act as a native popover (`popover="auto"`),
+ * receive styles, and host projected content.
+ *
+ * The directive is responsible for creating/destroying this component instance, attaching content
+ * (text or a TemplateRef), configuring positioning, and calling the Popover API methods to toggle it.
+ *
+ * ### Notes
+ * This component intentionally contains no behavior logic. All lifecycle and interaction logic is handled
+ * by the directive that creates it.
+ *
+ * @author Konrad Stępień
+ * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
+ * @see [GitHub](https://github.com/kstepien3/ng-zen)
+ * @see [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ */
+
+@Component({
+  template: `
+    <ng-content />
+  `,
+  styleUrl: './popover-host.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    popover: 'auto',
+    '[attr.id]': 'id()',
+    '[attr.data-placement]': 'placement()',
+  },
+})
+export class ZenPopoverHost {
+  readonly id = input.required<string>();
+  readonly placement = input<PopoverPlacement>('top');
+}

package/schematics/ui/files/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover';

package/schematics/ui/files/popover/popover-positions.type.ts

@@ -0,0 +1,13 @@
+export type PopoverPlacement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end';