@ng-zen/cli 22.0.0 → 22.1.0-next.2

package/CHANGELOG.md

@@ -1,21 +1,7 @@
-## [22.0.0](https://github.com/kstepien3/ng-zen/compare/v21.2.0...v22.0.0) (2026-06-16)
-
-### ⚠ BREAKING CHANGES
-
-* **deps:** clean up unused deps and update dependencies (#414)
-
-### chore
-
-* **deps:** clean up unused deps and update dependencies ([#414](https://github.com/kstepien3/ng-zen/issues/414)) ([04b8c7d](https://github.com/kstepien3/ng-zen/commit/04b8c7da59e70181147f105e95b6471234ff21f5))
+## [22.1.0-next.2](https://github.com/kstepien3/ng-zen/compare/v22.1.0-next.1...v22.1.0-next.2) (2026-06-30)
 
 ### 🚀 New Features
 
-* **button:** enhance component's sizes, variants, and styling updates ([#407](https://github.com/kstepien3/ng-zen/issues/407)) ([f32aad3](https://github.com/kstepien3/ng-zen/commit/f32aad35d5853f832f2eea0d8157884ca7f5cc3e))
-* **button:** migrate to dynamic CSS variables and refactor styles ([#411](https://github.com/kstepien3/ng-zen/issues/411)) ([e4464f7](https://github.com/kstepien3/ng-zen/commit/e4464f7580c91f0de30d9139177655915430fd43))
-* **popover:** improve popover styles, stories, docs ([#404](https://github.com/kstepien3/ng-zen/issues/404)) ([6515443](https://github.com/kstepien3/ng-zen/commit/65154436cde09f77909638ef84e2213b04f2862c))
-
-### 📚 Documentation
-
-* **README:** add DeepWiki link ([#409](https://github.com/kstepien3/ng-zen/issues/409)) ([7875347](https://github.com/kstepien3/ng-zen/commit/78753471c6e56036788c6371ce0f063ab06b524b))
+* trigger 22.2.0-next.1 release ([803e0fa](https://github.com/kstepien3/ng-zen/commit/803e0faccbd41c77b8996227f034dbbda0fa2852))
 
 Development mode - changelog will be generated during build.

package/README.md

@@ -45,7 +45,7 @@ Unlike traditional UI libraries that give you `<library-button>` black boxes, @n
 
 ### 🏎️ **Instant Productivity**
 
-- **Production-Ready UI Elements:** Alert, Avatar, Button, Checkbox, Dialog, Divider, Form Control, Icon, Input, Popover, Radio, Skeleton, Switch, Textarea
+- **Production-Ready UI Elements:** Alert, Avatar, Button, Card, Checkbox, Dialog, 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
 
@@ -146,22 +146,23 @@ export class MyComponent {}
 
 ## 🧩 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                           |
-| **Dialog**       | Native modal dialogs             | Native dialog element, service API, size variants, backdrop config        |
-| **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                                 |
+| 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                              |
+| **Card**         | Content container                | Multi-slot projection (header, title, subtitle, footer), CSS custom properties |
+| **Checkbox**     | Form checkboxes                  | Indeterminate state, custom styling, validation                                |
+| **Dialog**       | Native modal dialogs             | Native dialog element, service API, size variants, backdrop config             |
+| **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.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.0.0",
-  "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.",
+  "version": "22.1.0-next.2",
+  "description": "Angular UI components generator – Zen UI Kit CLI for schematics-based creation of customizable components like alert, avatar, button, card, checkbox, dialog, divider, form-control, icon, input, popover, radio, skeleton, switch, textarea with Storybook demos.",
   "license": "BSD-2-Clause",
   "private": false,
   "repository": {
@@ -48,6 +48,7 @@
     "alert",
     "avatar",
     "button",
+    "card",
     "checkbox",
     "dialog",
     "divider",
@@ -69,7 +70,6 @@
   "dependencies": {
     "@angular-devkit/core": "^22.0.1",
     "@angular-devkit/schematics": "^22.0.1",
-    "@angular/build": "22.0.1",
     "tslib": "^2.8.1"
   }
 }

package/schematics/ui/files/alert/alert.scss

@@ -33,7 +33,7 @@ $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 }
 
 /* Title styles */
-::ng-deep [alert-title] {
+:host ::ng-deep [alert-title] {
   padding: 0;
   margin: 0;
 }

package/schematics/ui/files/alert/alert.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { Component } from '@angular/core';
 
 /**
  * ZenAlert is a reusable alert component designed to provide
@@ -42,6 +42,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
     </div>
   `,
   styleUrl: './alert.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenAlert {}

package/schematics/ui/files/avatar/avatar.ts

@@ -1,5 +1,5 @@
 import { NgOptimizedImage } from '@angular/common';
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 /**
  * A component to display an avatar image.
@@ -46,7 +46,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
     }
   `,
   styleUrl: './avatar.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ZenAvatar {
   /** Source path for the image which will be processed by Angular's image loader. */

package/schematics/ui/files/button/button.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { Component, input } from '@angular/core';
 
 /**
  * ZenButton is a reusable button component designed to provide
@@ -39,7 +39,6 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
     <ng-content />
   `,
   styleUrl: './button.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[attr.type]': '"button"',
     '[attr.data-size]': 'size()',

package/schematics/ui/files/card/card.scss

@@ -0,0 +1,57 @@
+:host {
+  --zen-card-border-radius: 0.75rem;
+  --zen-card-ring: 0 0 0 1px hsl(0deg 0% 0% / 10%);
+  --zen-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
+  --zen-card-bg: hsl(0deg 0% 100%);
+  --zen-card-color: hsl(0deg 0% 10%);
+  --zen-card-padding: 1.5rem;
+  --zen-card-gap: 1rem;
+  --zen-card-header-gap: 0.25rem;
+  --zen-card-title-font-size: 1.125rem;
+  --zen-card-title-font-weight: 600;
+  --zen-card-subtitle-font-size: 0.875rem;
+  --zen-card-subtitle-color: hsl(0deg 0% 40%);
+  --zen-card-border: 1px solid hsl(0deg 0% 0% / 10%);
+  --zen-card-footer-bg: hsl(0deg 0% 95%);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+  border-radius: var(--zen-card-border-radius);
+  box-shadow: var(--zen-card-ring), var(--zen-card-shadow);
+  background: var(--zen-card-bg);
+  color: var(--zen-card-color);
+  overflow: hidden;
+}
+
+.zen-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--zen-card-gap);
+  padding: var(--zen-card-padding);
+}
+
+.zen-card-footer {
+  &:not(:empty) {
+    padding: var(--zen-card-padding);
+    border-top: var(--zen-card-border);
+    background: var(--zen-card-footer-bg);
+  }
+}
+
+:host ::ng-deep [card-title] {
+  margin: 0;
+  font-size: var(--zen-card-title-font-size);
+  font-weight: var(--zen-card-title-font-weight);
+  line-height: 1.4;
+}
+
+:host ::ng-deep [card-subtitle] {
+  margin: 0;
+  font-size: var(--zen-card-subtitle-font-size);
+  color: var(--zen-card-subtitle-color);
+  line-height: 1.5;
+}

package/schematics/ui/files/card/card.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 { ZenCard } from './card';
+
+describe('ZenCard', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ZenCard],
+      providers: [provideZonelessChangeDetection()],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    const fixture = TestBed.createComponent(ZenCard);
+    const component = fixture.componentInstance;
+    expect(component).toBeTruthy();
+  });
+});

package/schematics/ui/files/card/card.stories.ts

@@ -0,0 +1,157 @@
+import { Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+
+import { ZenButton } from '../button';
+import { ZenCard } from './card';
+
+interface StoryParams {
+  content: string;
+  title: string;
+  subtitle: string;
+}
+
+type Options = ZenCard & StoryParams;
+
+export default {
+  title: 'Ui/Card',
+  component: ZenCard,
+  decorators: [moduleMetadata({ imports: [ZenButton] })],
+  args: {
+    content: 'This is the card content.',
+    title: 'Card Title',
+    subtitle: 'Card subtitle',
+  },
+  argTypes: {
+    content: {
+      control: 'text',
+      table: { category: 'story parameters', type: { summary: 'ng-content' } },
+    },
+    title: {
+      control: 'text',
+      table: { category: 'story parameters', type: { summary: 'string' } },
+    },
+    subtitle: {
+      control: 'text',
+      table: { category: 'story parameters', type: { summary: 'string' } },
+    },
+  },
+  render: ({ content, title, subtitle }) => ({
+    props: {},
+    template: `
+      <zen-card>
+        <h3 card-title>${title}</h3>
+        <p card-subtitle>${subtitle}</p>
+        ${content}
+      </zen-card>
+    `,
+  }),
+} satisfies Meta<Options>;
+
+type Story = StoryObj<Options>;
+
+export const Default: Story = {};
+
+export const Basic: Story = {
+  args: {
+    content: 'This is a simple card with only default content.',
+  },
+  render: ({ content }) => ({
+    props: {},
+    template: `
+      <zen-card>
+        ${content}
+      </zen-card>
+    `,
+  }),
+};
+
+export const WithFooter: Story = {
+  args: {
+    content: 'Card content with a footer action.',
+  },
+  render: ({ content, title, subtitle }) => ({
+    props: {},
+    template: `
+      <zen-card>
+        <h3 card-title>${title}</h3>
+        <p card-subtitle>${subtitle}</p>
+        ${content}
+        <div card-footer>
+          <button zen-button>Save changes</button>
+        </div>
+      </zen-card>
+    `,
+  }),
+};
+
+export const Size: Story = {
+  args: {
+    content: '',
+    title: '',
+    subtitle: '',
+  },
+  render: () => ({
+    props: {},
+    template: `
+      <zen-card style="--zen-card-padding: 1rem; --zen-card-gap: 0.75rem; --zen-card-header-gap: 0.125rem;">
+        <h3 card-title>Scheduled reports</h3>
+        <p card-subtitle>Weekly snapshots. No more manual exports.</p>
+        <ul style="margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem;">
+          <li>Choose a schedule (daily, or weekly).</li>
+          <li>Send to channels or specific teammates.</li>
+          <li>Include charts, tables, and key metrics.</li>
+        </ul>
+        <div card-footer style="display: flex; gap: 0.5rem;">
+          <button zen-button>Set up scheduled reports</button>
+          <button zen-button variant="outline">See what's new</button>
+        </div>
+      </zen-card>
+    `,
+  }),
+};
+
+export const LoginForm: Story = {
+  args: {
+    content: '',
+    title: '',
+    subtitle: '',
+  },
+  render: () => ({
+    props: {},
+    template: `
+      <zen-card>
+        <h3 card-title>Login to your account</h3>
+        <p card-subtitle>Enter your email below to login to your account</p>
+        <div style="display: grid; gap: 0.75rem;">
+          <input type="email" placeholder="Email" style="border: 1px solid hsl(0deg 0% 80%); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.875rem;">
+          <input type="password" placeholder="Password" style="border: 1px solid hsl(0deg 0% 80%); border-radius: 6px; padding: 0.5rem 0.75rem; font-size: 0.875rem;">
+          <a href="#" style="font-size: 0.75rem; color: hsl(0deg 0% 40%); text-align: right;">Forgot your password?</a>
+        </div>
+        <div card-footer style="display: flex; flex-direction: column; gap: 0.5rem;">
+          <button zen-button>Login</button>
+          <button zen-button variant="filled">Login with Google</button>
+        </div>
+      </zen-card>
+    `,
+  }),
+};
+
+export const ImageCard: Story = {
+  args: {
+    content: '',
+    title: '',
+    subtitle: '',
+  },
+  render: () => ({
+    props: {},
+    template: `
+      <zen-card>
+        <img card-header src="https://picsum.photos/seed/ng-zen/600/400" alt="Event cover" style="display: block; width: 100%; height: 300px; object-fit: cover;">
+
+        <h3 card-title style="margin: 0;">Design systems meetup</h3>
+        <p style="margin: 0;">A practical talk on component APIs, accessibility, and shipping faster.</p>
+
+        <button card-footer zen-button variant="ghost" style="width: 100%;">View Event</button>
+      </zen-card>
+    `,
+  }),
+};

package/schematics/ui/files/card/card.ts

@@ -0,0 +1,64 @@
+import { Component } from '@angular/core';
+
+/**
+ * ZenCard is a reusable card component that provides a consistent container
+ * for grouping related content. It supports multi-slot content projection
+ * through attribute selectors.
+ *
+ * @example
+ *
+ * ```html
+ * <zen-card>
+ *   <div card-header>
+ *     <app-badge variant="secondary">Featured</app-badge>
+ *   </div>
+ *   <h3 card-title>Design systems meetup</h3>
+ *   <p card-subtitle>
+ *     A practical talk on component APIs, accessibility, and shipping faster.
+ *   </p>
+ *   <img src="..." alt="Event cover" />
+ *   <div card-footer>
+ *     <app-button>View Event</app-button>
+ *   </div>
+ * </zen-card>
+ * ```
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --zen-card-border-radius: 0.75rem;
+ *   --zen-card-ring: 0 0 0 1px hsl(0deg 0% 0% / 0.1);
+ *   --zen-card-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+ *   --zen-card-bg: hsl(0deg 0% 100%);
+ *   --zen-card-color: hsl(0deg 0% 10%);
+ *   --zen-card-padding: 1.5rem;
+ *   --zen-card-gap: 1rem;
+ *   --zen-card-title-font-size: 1.125rem;
+ *   --zen-card-subtitle-font-size: 0.875rem;
+ *   --zen-card-footer-bg: hsl(0deg 0% 95%);
+ * }
+ * ```
+ *
+ * @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)
+ */
+@Component({
+  selector: 'zen-card',
+  template: `
+    <ng-content select="[card-header]" />
+    <div class="zen-card-body">
+      <ng-content select="[card-title]" />
+      <ng-content select="[card-subtitle]" />
+      <ng-content />
+    </div>
+    <div class="zen-card-footer">
+      <ng-content select="[card-footer]" />
+    </div>
+  `,
+  styleUrl: './card.scss',
+})
+export class ZenCard {}

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

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

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

@@ -1,5 +1,9 @@
+import { NgComponentOutlet } from '@angular/common';
+import { Component, signal } from '@angular/core';
+import { form, FormField, required } from '@angular/forms/signals';
 import { Meta, StoryObj } from '@storybook/angular';
 
+import FormControlStories from '../form-control/form-control.stories';
 import { ZenCheckbox } from './checkbox';
 
 type Options = ZenCheckbox;
@@ -8,53 +12,26 @@ export default {
   title: 'Ui/Checkbox',
   component: ZenCheckbox,
   argTypes: {
+    ...FormControlStories.argTypes,
     value: {
       table: {
         category: 'models',
-        type: {
-          summary: 'boolean | null',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
+        type: { summary: 'boolean | null' },
+        defaultValue: { summary: 'false' },
       },
-      control: 'radio',
+      control: 'radio' as const,
       options: [true, false, null],
     },
-    disabled: {
-      control: 'boolean',
-      table: {
-        category: 'models',
-        type: {
-          summary: 'boolean',
-        },
-      },
-    },
-    required: {
-      control: 'boolean',
-      table: {
-        category: 'inputs',
-        type: {
-          summary: 'boolean',
-        },
-        defaultValue: {
-          summary: 'false',
-        },
-      },
-    },
     onInput: {
       table: {
         readonly: true,
-        type: {
-          summary: '(value: boolean | null) => void',
-        },
+        type: { summary: '(value: boolean | null) => void' },
       },
     },
   },
   args: {
+    ...FormControlStories.args,
     value: false,
-    disabled: false,
-    required: false,
   },
 } satisfies Meta<Options>;
 
@@ -72,3 +49,52 @@ export const WithLabel: Story = {
   `,
   }),
 };
+
+export const WithSignalForm: Story = {
+  render: () => ({
+    moduleMetadata: { imports: [NgComponentOutlet] },
+    props: { component: CheckboxSignalFormComponent },
+    template: '<ng-container *ngComponentOutlet="component" />',
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+      <div style="display: flex; align-items: center; gap: 0.25rem">
+        <zen-checkbox id="agree" [formField]="form.agree" />
+        <label for="agree">I agree to the terms</label>
+      </div>
+      @if (form.agree().invalid()) {
+        <p style="color: red; margin: 0; font-size: 0.875rem;">
+          {{ form.agree().errors()![0].message }}
+        </p>
+      }
+    </div>`,
+      },
+    },
+  },
+};
+
+@Component({
+  standalone: true,
+  template: `
+    <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+      <div style="display: flex; align-items: center; gap: 0.25rem">
+        <zen-checkbox [formField]="form.agree" id="agree" />
+        <label for="agree">I agree to the terms</label>
+      </div>
+      @if (form.agree().invalid()) {
+        <p style="color: red; margin: 0; font-size: 0.875rem;">
+          {{ form.agree().errors()![0].message }}
+        </p>
+      }
+    </div>
+  `,
+  imports: [FormField, ZenCheckbox],
+})
+class CheckboxSignalFormComponent {
+  readonly form = form(signal({ agree: false }), s => {
+    required(s.agree, { message: 'You must agree to continue' });
+  });
+}

package/schematics/ui/files/checkbox/checkbox.ts

@@ -1,34 +1,35 @@
-import { ChangeDetectionStrategy, Component, effect, ElementRef, model, viewChild } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import { Component, effect, ElementRef, model, viewChild } from '@angular/core';
 
-import { ZenFormControl, ZenFormControlProvider } from '../form-control';
+import { ZenFormControl } from '../form-control';
 
 /**
- * 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.
+ * ZenCheckbox is a checkbox component supporting checked (`true`),
+ * unchecked (`false`), and indeterminate (`null`) states.
  *
- * @example
- * <zen-checkbox [value]="true" /> Checked
- * <zen-checkbox [value]="false" /> Unchecked
- * <zen-checkbox [value]="null" /> Indeterminate
+ * Connect it to a Signal Forms field with `[formField]`:
+ *
+ * ```html
+ * <zen-checkbox [formField]="myForm.agree" />
+ * <label for="agree">I agree to the terms</label>
+ * ```
+ *
+ * When `value` is `null` the native checkbox is set to indeterminate via
+ * the `indeterminate` DOM property.
  *
  * ### CSS Custom Properties
  *
- * You can customize the component using CSS custom properties:
  *
  * ```css
  * :root {
- *  --zen-checkbox-size: 1rem;
- *  --zen-checkbox-border-radius: 0.375rem;
- *  --zen-checkbox-appearance: hsl(0deg 0% 10%);
- *  --zen-checkbox-disabled-opacity: 0.6;
- *  --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
+ *   --zen-checkbox-size: 1rem;
+ *   --zen-checkbox-border-radius: 0.375rem;
+ *   --zen-checkbox-appearance: hsl(0deg 0% 10%);
+ *   --zen-checkbox-disabled-opacity: 0.6;
+ *   --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
  * }
  * ```
  *
- * @implements {ZenFormControl<boolean>}
+ * @extends {ZenFormControl<boolean | null>}
  *
  * @author Konrad Stępień
  * @license {@link https://github.com/kstepien3/ng-zen/blob/master/LICENSE|BSD-2-Clause}
@@ -39,9 +40,10 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
   template: `
     <input
       [attr.aria-disabled]="disabled()"
+      [attr.aria-invalid]="invalid() || null"
+      [checked]="value()"
       [disabled]="disabled()"
-      [ngModel]="value()"
-      (ngModelChange)="onInput($event)"
+      (change)="onInput(inputElement.checked)"
       #inputElement
       type="checkbox"
     />
@@ -53,12 +55,6 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
     <!-- @else { ✕ } -->
   `,
   styleUrls: ['./checkbox.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [FormsModule],
-  providers: [ZenFormControlProvider(ZenCheckbox)],
-  host: {
-    '(blur)': 'onTouched()',
-  },
 })
 export class ZenCheckbox extends ZenFormControl<boolean | null> {
   /**