@ng-zen/cli 20.0.0-next.1 → 20.0.0-next.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [20.0.0-next.2](https://github.com/kstepien3/ng-zen/compare/v20.0.0-next.1...v20.0.0-next.2) (2025-07-16)
+
+### 🛠️ Code Refactor
+
+* remove suffix from files for Angular v20 compatibility ([#243](https://github.com/kstepien3/ng-zen/issues/243)) ([d26e2f2](https://github.com/kstepien3/ng-zen/commit/d26e2f2faeb052b8f984f82a59e7d95248b2964b))
+
 ## [20.0.0-next.1](https://github.com/kstepien3/ng-zen/compare/v19.4.0...v20.0.0-next.1) (2025-07-15)
 
 ### ⚠ BREAKING CHANGES

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "20.0.0-next.1",
+  "version": "20.0.0-next.2",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/components/files/{input/input.component.spec.ts → avatar/avatar.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenInputComponent } from './input.component';
+import { ZenAvatar } from './avatar';
 
-describe('InputComponent', () => {
-  let component: ZenInputComponent;
-  let fixture: ComponentFixture<ZenInputComponent>;
+describe('ZenAvatar', () => {
+  let component: ZenAvatar;
+  let fixture: ComponentFixture<ZenAvatar>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenInputComponent],
+      imports: [ZenAvatar],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenInputComponent);
+    fixture = TestBed.createComponent(ZenAvatar);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/avatar/avatar.stories.ts

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenAvatarComponent } from './avatar.component';
+import { ZenAvatar } from './avatar';
 
 export default {
   title: 'Components/Avatar',
-  component: ZenAvatarComponent,
+  component: ZenAvatar,
   tags: ['autodocs'],
   render: args => ({ props: { ...args } }),
-} satisfies Meta<ZenAvatarComponent>;
+} satisfies Meta<ZenAvatar>;
 
-type Story = StoryObj<ZenAvatarComponent>;
+type Story = StoryObj<ZenAvatar>;
 
 export const Image: Story = {
   args: {

package/schematics/components/files/avatar/{avatar.component.ts → avatar.ts}

@@ -40,15 +40,15 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
   imports: [NgOptimizedImage],
   template: `
     @if (src()) {
-      <img [alt]="alt()" [ngSrc]="src()" fill onerror="console.log('test')" />
+      <img [alt]="alt()" [ngSrc]="src()" fill />
     } @else {
       <ng-content />
     }
   `,
-  styleUrl: './avatar.component.scss',
+  styleUrl: './avatar.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenAvatarComponent {
+export class ZenAvatar {
   /**
    * Name of the source image. Image name will be processed by the image loader,
    * and the final URL will be applied as the src property of the image.

package/schematics/components/files/avatar/index.ts

@@ -1 +1 @@
-export * from './avatar.component';
+export * from './avatar';

package/schematics/components/files/button/{button.component.spec.ts → button.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenButtonComponent } from './button.component';
+import { ZenButton } from './button';
 
-describe('ButtonComponent', () => {
-  let component: ZenButtonComponent;
-  let fixture: ComponentFixture<ZenButtonComponent>;
+describe('ZenButton', () => {
+  let component: ZenButton;
+  let fixture: ComponentFixture<ZenButton>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenButtonComponent],
+      imports: [ZenButton],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenButtonComponent);
+    fixture = TestBed.createComponent(ZenButton);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/button/button.stories.ts

@@ -1,15 +1,15 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenButtonComponent } from './button.component';
+import { ZenButton } from './button';
 
 export default {
   title: 'Components/Button',
-  component: ZenButtonComponent,
+  component: ZenButton,
   tags: ['autodocs'],
   render: args => ({ props: { ...args } }),
-} satisfies Meta<ZenButtonComponent>;
+} satisfies Meta<ZenButton>;
 
-type Story = StoryObj<ZenButtonComponent>;
+type Story = StoryObj<ZenButton>;
 
 export const Default: Story = {
   render: () => ({

package/schematics/components/files/button/{button.component.ts → button.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * ZenButtonComponent is a reusable button component designed to provide
+ * ZenButton is a reusable button component designed to provide
  * a consistent and customizable button style across the application.
  * It can be used with both `<button>` and `<a>` HTML elements by applying
  * the `zen-button` attribute.
@@ -33,7 +33,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   template: `
     <ng-content />
   `,
-  styleUrl: './button.component.scss',
+  styleUrl: './button.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenButtonComponent {}
+export class ZenButton {}

package/schematics/components/files/button/index.ts

@@ -1 +1 @@
-export * from './button.component';
+export * from './button';

package/schematics/components/files/{avatar/avatar.component.spec.ts → checkbox/checkbox.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenAvatarComponent } from './avatar.component';
+import { ZenCheckbox } from './checkbox';
 
-describe('ZenAvatarComponent', () => {
-  let component: ZenAvatarComponent;
-  let fixture: ComponentFixture<ZenAvatarComponent>;
+describe('ZenCheckbox', () => {
+  let component: ZenCheckbox;
+  let fixture: ComponentFixture<ZenCheckbox>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenAvatarComponent],
+      imports: [ZenCheckbox],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenAvatarComponent);
+    fixture = TestBed.createComponent(ZenCheckbox);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/checkbox/checkbox.stories.ts

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenCheckboxComponent } from './checkbox.component';
+import { ZenCheckbox } from './checkbox';
 
 export default {
   title: 'Components/Checkbox',
-  component: ZenCheckboxComponent,
+  component: ZenCheckbox,
   tags: ['autodocs'],
   argTypes: {
     value: { control: 'boolean' },
@@ -18,9 +18,9 @@ export default {
     required: false,
     id: '',
   },
-} satisfies Meta<ZenCheckboxComponent>;
+} satisfies Meta<ZenCheckbox>;
 
-type Story = StoryObj<ZenCheckboxComponent>;
+type Story = StoryObj<ZenCheckbox>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/checkbox/{checkbox.component.ts → checkbox.ts}

@@ -2,7 +2,7 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
- * ZenCheckboxComponent is a reusable checkbox component designed to provide
+ * ZenCheckbox is a reusable checkbox component designed to provide
  * a consistent and customizable checkbox style across the application.
  * It supports Angular forms integration and provides two-way data binding
  * for boolean values.
@@ -51,13 +51,13 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
     }
     <!-- @else { ✕ } -->
   `,
-  styleUrls: ['./checkbox.component.scss'],
+  styleUrls: ['./checkbox.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [FormsModule],
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ZenCheckboxComponent),
+      useExisting: forwardRef(() => ZenCheckbox),
       multi: true,
     },
   ],
@@ -65,7 +65,7 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
     '(blur)': 'onTouched()',
   },
 })
-export class ZenCheckboxComponent implements ControlValueAccessor {
+export class ZenCheckbox implements ControlValueAccessor {
   /** Holds the current checkbox value. */
   readonly value = model(false);
   /** Determines if the checkbox is disabled. */

package/schematics/components/files/checkbox/index.ts

@@ -1 +1 @@
-export * from './checkbox.component';
+export * from './checkbox';

package/schematics/components/files/{switch/switch.component.spec.ts → divider/divider.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenSwitchComponent } from './switch.component';
+import { ZenDivider } from './divider';
 
-describe('ZenSwitchComponent', () => {
-  let component: ZenSwitchComponent;
-  let fixture: ComponentFixture<ZenSwitchComponent>;
+describe('ZenDivider', () => {
+  let component: ZenDivider;
+  let fixture: ComponentFixture<ZenDivider>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenSwitchComponent],
+      imports: [ZenDivider],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenSwitchComponent);
+    fixture = TestBed.createComponent(ZenDivider);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/divider/divider.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenDividerComponent } from './divider.component';
+import { ZenDivider } from './divider';
 
 interface StoryParams {
   content: string;
@@ -9,7 +9,7 @@ interface StoryParams {
 
 export default {
   title: 'Components/Divider',
-  component: ZenDividerComponent,
+  component: ZenDivider,
   tags: ['autodocs'],
   parameters: {
     layout: 'padded',
@@ -20,9 +20,9 @@ export default {
     align: { control: 'select', options: ['start', 'center', 'end'] },
   },
   args: { content: '', vertical: false, align: 'center' },
-} satisfies Meta<ZenDividerComponent & StoryParams>;
+} satisfies Meta<ZenDivider & StoryParams>;
 
-type Story = StoryObj<ZenDividerComponent & StoryParams>;
+type Story = StoryObj<ZenDivider & StoryParams>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/divider/{divider.component.ts → divider.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input } from '@angular/core';
 
 /**
- * ZenDividerComponent is a reusable divider component that provides a simple way to
+ * ZenDivider is a reusable divider component that provides a simple way to
  * separate content sections visually. It supports both horizontal (default) and vertical
  * orientations and can contain optional content.
  *
@@ -34,14 +34,14 @@ import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input
 @Component({
   selector: `zen-divider, zen-divider[vertical],`,
   template: '<ng-content/>',
-  styleUrl: './divider.component.scss',
+  styleUrl: './divider.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class.has-content]': 'hasContent()',
     '[class]': '"zen-align-"+align()',
   },
 })
-export class ZenDividerComponent {
+export class ZenDivider {
   /**
    * Controls the alignment of content within the divider.
    * @default 'center'

package/schematics/components/files/divider/index.ts

@@ -1 +1 @@
-export * from './divider.component';
+export * from './divider';

package/schematics/components/files/icon/icon.stories.ts

@@ -1,12 +1,12 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenIconComponent } from './icon.component';
+import { ZenIcon } from './icon';
 
-type Options = ZenIconComponent;
+type Options = ZenIcon;
 
 export default {
   title: 'Components/Icon',
-  component: ZenIconComponent,
+  component: ZenIcon,
   tags: ['autodocs'],
 } satisfies Meta<Options>;
 

package/schematics/components/files/icon/{icon.component.ts → icon.ts}

@@ -27,7 +27,7 @@ type Icon = keyof typeof icons;
   imports: [HugeiconsIconComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenIconComponent {
+export class ZenIcon {
   /** Icon file names from HugeIcons */
   readonly icon = input.required({ transform: (icon: Icon) => icons[icon] });
   readonly size = input<number>(24);

package/schematics/components/files/icon/index.ts

@@ -1 +1 @@
-export * from './icon.component';
+export * from './icon';

package/schematics/components/files/input/index.ts

@@ -1 +1 @@
-export * from './input.component';
+export * from './input';

package/schematics/components/files/input/input.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenInput } from './input';
+
+describe('ZenInput', () => {
+  let component: ZenInput;
+  let fixture: ComponentFixture<ZenInput>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenInput],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenInput);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/input/input.stories.ts

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenInputComponent } from './input.component';
+import { ZenInput } from './input';
 
 export default {
   title: 'Components/Input',
-  component: ZenInputComponent,
+  component: ZenInput,
   tags: ['autodocs'],
   argTypes: {
     value: { control: 'text' },
@@ -20,9 +20,9 @@ export default {
     required: false,
     id: '',
   },
-} satisfies Meta<ZenInputComponent>;
+} satisfies Meta<ZenInput>;
 
-type Story = StoryObj<ZenInputComponent>;
+type Story = StoryObj<ZenInput>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/input/{input.component.ts → input.ts}

@@ -2,7 +2,7 @@ import { booleanAttribute, ChangeDetectionStrategy, Component, forwardRef, input
 import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
- * ZenInputComponent is a reusable text input component designed to provide
+ * ZenInput is a reusable text input component designed to provide
  * a consistent and customizable input style across the application.
  * It supports Angular forms integration and provides two-way data binding.
  *
@@ -43,18 +43,18 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
       (ngModelChange)="onInputChange($event)"
     />
   `,
-  styleUrls: ['./input.component.scss'],
+  styleUrls: ['./input.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ZenInputComponent),
+      useExisting: forwardRef(() => ZenInput),
       multi: true,
     },
   ],
   imports: [FormsModule],
 })
-export class ZenInputComponent implements ControlValueAccessor {
+export class ZenInput implements ControlValueAccessor {
   /** Holds the current input value. */
   readonly value = model('');
   /** Determines if the input is disabled. */

package/schematics/components/files/skeleton/index.ts

@@ -1 +1 @@
-export * from './skeleton.component';
+export * from './skeleton';

package/schematics/components/files/skeleton/skeleton.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenSkeleton } from './skeleton';
+
+describe('ZenSkeleton', () => {
+  let component: ZenSkeleton;
+  let fixture: ComponentFixture<ZenSkeleton>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenSkeleton],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenSkeleton);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/skeleton/skeleton.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenSkeletonComponent } from './skeleton.component';
+import { ZenSkeleton } from './skeleton';
 
 interface StoryParams {
   rounded: boolean;
@@ -8,11 +8,11 @@ interface StoryParams {
   width: number;
 }
 
-type StoryType = ZenSkeletonComponent & StoryParams;
+type StoryType = ZenSkeleton & StoryParams;
 
 export default {
   title: 'Components/Skeleton',
-  component: ZenSkeletonComponent,
+  component: ZenSkeleton,
   tags: ['autodocs'],
   argTypes: {
     rounded: { control: { type: 'boolean' } },

package/schematics/components/files/skeleton/{skeleton.component.ts → skeleton.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * ZenInputComponent loader component that displays loading states.
+ * ZenInput loader component that displays loading states.
  *
  * @example
  *
@@ -30,7 +30,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 @Component({
   selector: 'zen-skeleton, zen-skeleton[rounded]',
   template: ``,
-  styleUrl: './skeleton.component.scss',
+  styleUrl: './skeleton.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenSkeletonComponent {}
+export class ZenSkeleton {}

package/schematics/components/files/switch/index.ts

@@ -1 +1 @@
-export * from './switch.component';
+export * from './switch';

package/schematics/components/files/switch/switch.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ZenSwitch } from './switch';
+
+describe('ZenSwitch', () => {
+  let component: ZenSwitch;
+  let fixture: ComponentFixture<ZenSwitch>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenSwitch],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ZenSwitch);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/components/files/switch/switch.stories.ts

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenSwitchComponent } from './switch.component';
+import { ZenSwitch } from './switch';
 
 export default {
   title: 'Components/Switch',
-  component: ZenSwitchComponent,
+  component: ZenSwitch,
   tags: ['autodocs'],
   argTypes: {
     value: { control: 'boolean' },
@@ -14,9 +14,9 @@ export default {
     value: false,
     disabled: false,
   },
-} satisfies Meta<ZenSwitchComponent>;
+} satisfies Meta<ZenSwitch>;
 
-type Story = StoryObj<ZenSwitchComponent>;
+type Story = StoryObj<ZenSwitch>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/switch/{switch.component.ts → switch.ts}

@@ -2,7 +2,7 @@ import { ChangeDetectionStrategy, Component, forwardRef, model } from '@angular/
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 /**
- * ZenInputComponent is a reusable text input component designed to provide
+ * ZenInput is a reusable text input component designed to provide
  * a consistent and customizable input style across the application.
  * It supports Angular forms integration and provides two-way data binding.
  *
@@ -39,12 +39,12 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
       <!-- @if (!value()) { ─ } -->
     </span>
   `,
-  styleUrl: './switch.component.scss',
+  styleUrl: './switch.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => ZenSwitchComponent),
+      useExisting: forwardRef(() => ZenSwitch),
       multi: true,
     },
   ],
@@ -57,7 +57,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
     '(keydown)': 'onKeyDown($event)',
   },
 })
-export class ZenSwitchComponent implements ControlValueAccessor {
+export class ZenSwitch implements ControlValueAccessor {
   /** Holds the current checkbox value. */
   readonly value = model(false);
   /** Determines if the checkbox is disabled. */

package/schematics/components/files/textarea/index.ts

@@ -1 +1 @@
-export * from './textarea.component';
+export * from './textarea';

package/schematics/components/files/textarea/{textarea.component.spec.ts → textarea.spec.ts}

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ZenTextareaComponent } from './textarea.component';
+import { ZenTextarea } from './textarea';
 
 describe('ZenTextareaComponent', () => {
-  let component: ZenTextareaComponent;
-  let fixture: ComponentFixture<ZenTextareaComponent>;
+  let component: ZenTextarea;
+  let fixture: ComponentFixture<ZenTextarea>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ZenTextareaComponent],
+      imports: [ZenTextarea],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(ZenTextareaComponent);
+    fixture = TestBed.createComponent(ZenTextarea);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

package/schematics/components/files/textarea/textarea.stories.ts

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/angular';
 
-import { ZenTextareaComponent } from './textarea.component';
+import { ZenTextarea } from './textarea';
 
 interface StoryParams {
   value: string;
@@ -12,7 +12,7 @@ interface StoryParams {
 
 export default {
   title: 'Components/Textarea',
-  component: ZenTextareaComponent,
+  component: ZenTextarea,
   tags: ['autodocs'],
   args: {
     value: '',
@@ -28,9 +28,9 @@ export default {
     required: { control: 'boolean' },
     disabled: { control: 'boolean' },
   },
-} satisfies Meta<ZenTextareaComponent & StoryParams>;
+} satisfies Meta<ZenTextarea & StoryParams>;
 
-type Story = StoryObj<ZenTextareaComponent & StoryParams>;
+type Story = StoryObj<ZenTextarea & StoryParams>;
 
 export const Default: Story = {
   render: args => ({

package/schematics/components/files/textarea/{textarea.component.ts → textarea.ts}

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 /**
- * ZenTextareaComponent is a reusable textarea component designed to provide
+ * ZenTextarea is a reusable textarea component designed to provide
  * a consistent and customizable textarea style across the application.
  * It supports Angular forms integration and provides two-way data binding.
  *
@@ -32,7 +32,7 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   template: `
     <ng-content />
   `,
-  styleUrls: ['./textarea.component.scss'],
+  styleUrls: ['./textarea.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ZenTextareaComponent {}
+export class ZenTextarea {}

package/schematics/components/files/checkbox/checkbox.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ZenCheckboxComponent } from './checkbox.component';
-
-describe('ZenCheckboxComponent', () => {
-  let component: ZenCheckboxComponent;
-  let fixture: ComponentFixture<ZenCheckboxComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ZenCheckboxComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenCheckboxComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/schematics/components/files/divider/divider.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ZenDividerComponent } from './divider.component';
-
-describe('DividerComponent', () => {
-  let component: ZenDividerComponent;
-  let fixture: ComponentFixture<ZenDividerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ZenDividerComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenDividerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/schematics/components/files/skeleton/skeleton.component.spec.ts

@@ -1,22 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ZenSkeletonComponent } from './skeleton.component';
-
-describe('ZenSkeletonComponent', () => {
-  let component: ZenSkeletonComponent;
-  let fixture: ComponentFixture<ZenSkeletonComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [ZenSkeletonComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(ZenSkeletonComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});