@ng-zen/cli 22.3.0 → 22.4.0-next.1

package/CHANGELOG.md

@@ -1,14 +1,12 @@
-## [22.3.0](https://github.com/kstepien3/ng-zen/compare/v22.2.0...v22.3.0) (2026-07-13)
+## [22.4.0-next.1](https://github.com/kstepien3/ng-zen/compare/v22.3.0...v22.4.0-next.1) (2026-07-17)
 
 ### 🚀 New Features
 
-* **ui/badge:** add component ([#439](https://github.com/kstepien3/ng-zen/issues/439)) ([ed1ccbc](https://github.com/kstepien3/ng-zen/commit/ed1ccbc3e29655d3c6f98ace327803e3fa4c7beb))
+* **ui/badge:** add disabled support with styles and documentation ([#468](https://github.com/kstepien3/ng-zen/issues/468)) ([1b21055](https://github.com/kstepien3/ng-zen/commit/1b2105514e4c35495b9c1b2d2c1a0a2c3e332fb3))
+* **ui:** centralize `disabled-opacity` variable across components ([#469](https://github.com/kstepien3/ng-zen/issues/469)) ([0af45f7](https://github.com/kstepien3/ng-zen/commit/0af45f78186aa19bb82d1e28a71dffd78c1be25b))
 
-### 📚 Documentation
+### 🐛 Bug Fixes
 
-* project information, descriptions, and SEO ([#450](https://github.com/kstepien3/ng-zen/issues/450)) ([162ca7e](https://github.com/kstepien3/ng-zen/commit/162ca7e525e0f1b967ef91e1e63fd89b04c57a3e))
-* **README:** emphasize @ng-zen/cli ([#456](https://github.com/kstepien3/ng-zen/issues/456)) ([6306d4e](https://github.com/kstepien3/ng-zen/commit/6306d4efb5fef1b9a2de8790b4dc149e5069a5dd))
-* **README:** simplify content structure and highlight key features ([#457](https://github.com/kstepien3/ng-zen/issues/457)) ([6ff7d4d](https://github.com/kstepien3/ng-zen/commit/6ff7d4d296b5be3bd86fcc44193028afcfe25dd7))
-* **ui/card:** integrate zen-input in card stories ([#453](https://github.com/kstepien3/ng-zen/issues/453)) ([42d03b8](https://github.com/kstepien3/ng-zen/commit/42d03b842415eaa57ca3f199474820f6cc9756bd))
+* **ui/form-control:** use 'focusout' for touch event ([#464](https://github.com/kstepien3/ng-zen/issues/464)) ([d2859a6](https://github.com/kstepien3/ng-zen/commit/d2859a6e09b7d9e4f70087aa78d3a7c38c357af3))
 
 Development mode - changelog will be generated during build.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "22.3.0",
+  "version": "22.4.0-next.1",
   "description": "Angular CLI generator for creating fully customizable UI components.",
   "license": "BSD-2-Clause",
   "private": false,

package/schematics/ui/files/badge/badge.scss

@@ -2,9 +2,9 @@
 
 $transition-duration: var(--zen-transition-duration, 0.2s);
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
+$disabled-opacity: var(--zen-disabled-opacity, 0.6);
 
 :host {
-  --zen-badge-shadow: 0 1px 2px hsl(0deg 0% 0% / 8%);
   --zen-badge-neutral: var(--zen-neutral, hsl(30deg 5% 10%));
   --zen-badge-primary: var(--zen-primary, hsl(193deg 58% 34%));
   --zen-badge-success: var(--zen-success, hsl(142deg 38% 36%));
@@ -25,6 +25,7 @@ $colors: (
 $ghost-hover-opacity: 10%;
 $ghost-active-opacity: 20%;
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
   --zen-badge-bg-color: var(--zen-badge-neutral);
 
@@ -63,8 +64,8 @@ $ghost-active-opacity: 20%;
   height: 0.75rem;
 }
 
-:host([disabled]) {
-  opacity: 0.6;
+:host([data-disabled]) {
+  opacity: $disabled-opacity;
   pointer-events: none;
 }
 

package/schematics/ui/files/badge/badge.spec.ts

@@ -12,6 +12,23 @@ describe('ZenBadge', () => {
     }).compileComponents();
   });
 
+  describe('disabled', () => {
+    it('should not have disabled attribute by default', () => {
+      const fixture = TestBed.createComponent(ZenBadge);
+      fixture.detectChanges();
+      const badge = fixture.nativeElement as HTMLElement;
+      expect(badge.hasAttribute('disabled')).toBe(false);
+    });
+
+    it('should apply disabled attribute when set', () => {
+      const fixture = TestBed.createComponent(ZenBadge);
+      fixture.componentRef.setInput('disabled', true);
+      fixture.detectChanges();
+      const badge = fixture.nativeElement as HTMLElement;
+      expect(badge.hasAttribute('data-disabled')).toBe(true);
+    });
+  });
+
   it('should create', () => {
     const fixture = TestBed.createComponent(ZenBadge);
     const component = fixture.componentInstance;

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

@@ -7,6 +7,7 @@ import { ZenBadge } from './badge';
 interface StoryParams {
   color: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
   variant: 'solid' | 'filled' | 'outline' | 'ghost';
+  disabled: boolean;
   label: string;
 }
 
@@ -19,6 +20,7 @@ export default {
     label: 'Badge',
     color: 'neutral',
     variant: 'solid',
+    disabled: false,
   },
   argTypes: {
     label: {
@@ -38,6 +40,15 @@ export default {
       control: 'select',
       options: ['solid', 'filled', 'outline', 'ghost'],
     },
+    disabled: {
+      control: 'boolean',
+      table: {
+        category: 'attributes',
+        type: {
+          summary: 'boolean',
+        },
+      },
+    },
   },
   render: ({ label, ...args }) => ({
     props: args,
@@ -136,3 +147,59 @@ export const AllColorVariants: Story = {
     `,
   }),
 };
+
+export const DisabledVariants: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <!-- Default (No color attribute) -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge disabled variant="solid">Solid</zen-badge>
+          <zen-badge disabled variant="filled">Filled</zen-badge>
+          <zen-badge disabled variant="outline">Outline</zen-badge>
+          <zen-badge disabled variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Primary -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge disabled color="primary" variant="solid">Solid</zen-badge>
+          <zen-badge disabled color="primary" variant="filled">Filled</zen-badge>
+          <zen-badge disabled color="primary" variant="outline">Outline</zen-badge>
+          <zen-badge disabled color="primary" variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Success -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge disabled color="success" variant="solid">Solid</zen-badge>
+          <zen-badge disabled color="success" variant="filled">Filled</zen-badge>
+          <zen-badge disabled color="success" variant="outline">Outline</zen-badge>
+          <zen-badge disabled color="success" variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Warning -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge disabled color="warning" variant="solid">Solid</zen-badge>
+          <zen-badge disabled color="warning" variant="filled">Filled</zen-badge>
+          <zen-badge disabled color="warning" variant="outline">Outline</zen-badge>
+          <zen-badge disabled color="warning" variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Danger -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge disabled color="danger" variant="solid">Solid</zen-badge>
+          <zen-badge disabled color="danger" variant="filled">Filled</zen-badge>
+          <zen-badge disabled color="danger" variant="outline">Outline</zen-badge>
+          <zen-badge disabled color="danger" variant="ghost">Ghost</zen-badge>
+        </div>
+
+        <!-- Info -->
+        <div style="display: flex; gap: 0.5rem;">
+          <zen-badge disabled color="info" variant="solid">Solid</zen-badge>
+          <zen-badge disabled color="info" variant="filled">Filled</zen-badge>
+          <zen-badge disabled color="info" variant="outline">Outline</zen-badge>
+          <zen-badge disabled color="info" variant="ghost">Ghost</zen-badge>
+        </div>
+      </div>
+    `,
+  }),
+};

package/schematics/ui/files/badge/badge.ts

@@ -1,5 +1,35 @@
-import { Component, input } from '@angular/core';
+import { booleanAttribute, Component, input } from '@angular/core';
 
+/**
+ * ZenBadge is a reusable badge component for displaying labels,
+ * statuses, or counts with customizable colors and variants.
+ *
+ * @example
+ * <zen-badge>Default</zen-badge>
+ * <zen-badge color="primary" variant="outline">Primary</zen-badge>
+ * <zen-badge variant="filled">Filled</zen-badge>
+ * <zen-badge disabled>Disabled</zen-badge>
+ *
+ * ### CSS Custom Properties
+ *
+ * You can customize the component using CSS custom properties:
+ *
+ * ```css
+ * :root {
+ *   --zen-badge-neutral: hsl(30deg 5% 10%);
+ *   --zen-badge-primary: hsl(193deg 58% 34%);
+ *   --zen-badge-success: hsl(142deg 38% 36%);
+ *   --zen-badge-warning: hsl(36deg 72% 46%);
+ *   --zen-badge-danger: hsl(348deg 52% 42%);
+ *   --zen-badge-info: hsl(214deg 34% 46%);
+ *   --zen-disabled-opacity: 0.6;
+ * }
+ * ```
+ *
+ * @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-badge',
   template: '<ng-content />',
@@ -7,9 +37,16 @@ import { Component, input } from '@angular/core';
   host: {
     '[attr.data-color]': 'color()',
     '[attr.data-variant]': 'variant()',
+    '[attr.data-disabled]': 'disabled() ? "" : null',
   },
 })
 export class ZenBadge {
+  /** The color theme of the badge. */
   readonly color = input<'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'>('neutral');
+
+  /** The visual style variant of the badge. */
   readonly variant = input<'solid' | 'outline' | 'filled' | 'ghost'>('solid');
+
+  /** Whether the badge is disabled. When `true`, reduces opacity and disables pointer events. */
+  readonly disabled = input(false, { transform: booleanAttribute });
 }

package/schematics/ui/files/button/button.scss

@@ -53,7 +53,7 @@ $outline-hover-opacity: 70%;
 $outline-active-bg-opacity: 20%;
 
 // Disabled state
-$disabled-opacity: 0.6;
+$disabled-opacity: var(--zen-disabled-opacity, 0.6);
 
 // Default state hover/active mixing ratios (oklch)
 $default-hover-mix: 85%;

package/schematics/ui/files/checkbox/checkbox.scss

@@ -3,12 +3,12 @@ $error: var(--zen-error, hsl(0deg 70% 50%));
 $focus-shadow: var(--zen-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 $transition-duration: var(--zen-transition-duration, 0.2s);
+$disabled-opacity: var(--zen-disabled-opacity, 0.6);
 
 :host {
   --zen-checkbox-size: 1rem;
   --zen-checkbox-border-radius: 0.375rem; // 6px
   --zen-checkbox-appearance: hsl(0deg 0% 10%);
-  --zen-checkbox-disabled-opacity: 0.6;
   --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
 }
 
@@ -50,7 +50,7 @@ input {
   }
 
   &:has(input[type='checkbox']:disabled) {
-    opacity: var(--zen-checkbox-disabled-opacity);
+    opacity: $disabled-opacity;
 
     &,
     input {

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

@@ -24,7 +24,7 @@ import { ZenFormControl } from '../form-control';
  *   --zen-checkbox-size: 1rem;
  *   --zen-checkbox-border-radius: 0.375rem;
  *   --zen-checkbox-appearance: hsl(0deg 0% 10%);
- *   --zen-checkbox-disabled-opacity: 0.6;
+ *   --zen-disabled-opacity: 0.6;
  *   --zen-checkbox-border: 1px solid hsl(0deg 0% 80%);
  * }
  * ```

package/schematics/ui/files/form-control/form-control.ts

@@ -36,7 +36,7 @@ import { FormValueControl } from '@angular/forms/signals';
  */
 @Directive({
   host: {
-    '(blur)': 'touch.emit()',
+    '(focusout)': 'touch.emit()',
   },
 })
 export abstract class ZenFormControl<Value> implements FormValueControl<Value> {

package/schematics/ui/files/input/input.scss

@@ -1,6 +1,7 @@
 // Globals
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 $error: var(--zen-error, hsl(0deg 70% 50%));
+$disabled-opacity: var(--zen-disabled-opacity, 0.6);
 
 :host {
   --zen-input-border: 1px solid hsl(0deg 0% 80%);
@@ -21,7 +22,7 @@ input {
   padding: var(--zen-input-padding);
 
   &:disabled {
-    opacity: 0.6;
+    opacity: $disabled-opacity;
   }
 
   &:focus-visible {

package/schematics/ui/files/radio/radio.scss

@@ -3,12 +3,12 @@ $error: var(--zen-error, hsl(0deg 70% 50%));
 $focus-shadow: var(--zen-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 $transition-duration: var(--zen-transition-duration, 0.2s);
+$disabled-opacity: var(--zen-disabled-opacity, 0.6);
 
 :host {
   --zen-radio-size: 1rem;
   --zen-radio-border-radius: 50%;
   --zen-radio-appearance: hsl(0deg 0% 10%);
-  --zen-radio-disabled-opacity: 0.6;
   --zen-radio-border: 1px solid hsl(0deg 0% 80%);
 }
 
@@ -47,7 +47,7 @@ input {
   }
 
   &:has(input[type='radio']:disabled) {
-    opacity: var(--zen-radio-disabled-opacity);
+    opacity: $disabled-opacity;
 
     &,
     input {

package/schematics/ui/files/radio/radio.ts

@@ -25,7 +25,7 @@ import { ZenRadioRegistry } from './radio.registry';
  *   --zen-radio-size: 1rem;
  *   --zen-radio-border-radius: 50%;
  *   --zen-radio-appearance: hsl(0deg 0% 10%);
- *   --zen-radio-disabled-opacity: 0.6;
+ *   --zen-disabled-opacity: 0.6;
  *   --zen-radio-border: 1px solid hsl(0deg 0% 80%);
  * }
  * ```

package/schematics/ui/files/skeleton/skeleton.scss

@@ -4,6 +4,8 @@
   --zen-skeleton-animation-duration: 1.6s;
 }
 
+$disabled-opacity: var(--zen-disabled-opacity, 0.6);
+
 /* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
   background: var(--zen-skeleton-background);
@@ -55,7 +57,7 @@
 
 @keyframes pulse {
   0% {
-    opacity: 0.6;
+    opacity: $disabled-opacity;
   }
 
   100% {

package/schematics/ui/files/switch/switch.scss

@@ -4,6 +4,7 @@ $transition-duration: var(--zen-transition-duration-quick, 0.1s);
 $placeholder-color: var(--zen-placeholder-color, hsl(0deg 0% 60%));
 $focus-shadow: var(--zen-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
 $appearance: var(--zen-appearance, hsl(0deg 0% 10%));
+$disabled-opacity: var(--zen-disabled-opacity, 0.6);
 
 :host {
   --zen-switch-thumb-size: 1rem;
@@ -73,7 +74,7 @@ $appearance: var(--zen-appearance, hsl(0deg 0% 10%));
 
   &[data-disabled='true'] {
     cursor: not-allowed;
-    opacity: 0.6;
+    opacity: $disabled-opacity;
   }
 
   &:active:not([data-disabled='true']) .thumb {

package/schematics/ui/files/textarea/textarea.scss

@@ -2,6 +2,7 @@
 $focus-shadow: var(--zen-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 $error: var(--zen-error, hsl(0deg 70% 50%));
+$disabled-opacity: var(--zen-disabled-opacity, 0.6);
 
 :host {
   --zen-textarea-border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
@@ -22,7 +23,7 @@ $error: var(--zen-error, hsl(0deg 70% 50%));
   }
 
   &:disabled {
-    opacity: 0.6;
+    opacity: $disabled-opacity;
   }
 
   &:focus-visible {