@ng-zen/cli 20.2.1 → 20.3.0-next.2

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [20.3.0-next.2](https://github.com/kstepien3/ng-zen/compare/v20.3.0-next.1...v20.3.0-next.2) (2025-09-11)
+
+### 🛠️ Code Refactor
+
+* **input:** improve css variables ([#314](https://github.com/kstepien3/ng-zen/issues/314)) ([58cdbb3](https://github.com/kstepien3/ng-zen/commit/58cdbb3bafb9c10057b75d73c7234247e519c97e))
+* **skeleton:** improve css variables ([#313](https://github.com/kstepien3/ng-zen/issues/313)) ([9f0c8fd](https://github.com/kstepien3/ng-zen/commit/9f0c8fd1b23172fa5bb9bf9f42b6739c7b232876))
+
+### 📚 Documentation
+
+* **textarea:** update jsdoc about css variables ([#311](https://github.com/kstepien3/ng-zen/issues/311)) ([6ceabb5](https://github.com/kstepien3/ng-zen/commit/6ceabb58e6549e87bdbbe3b3b2f6e2e0928ab49b))
+
+## [20.3.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.2.1...v20.3.0-next.1) (2025-09-09)
+
+### 🚀 New Features
+
+* **switch:** add animations ([#303](https://github.com/kstepien3/ng-zen/issues/303)) ([6b48d4f](https://github.com/kstepien3/ng-zen/commit/6b48d4f39db1e5bfe22920fa749b652ac65e4432))
+
+### 🛠️ Code Refactor
+
+* **switch:** improve styles, css variables ([#304](https://github.com/kstepien3/ng-zen/issues/304)) ([3c04b87](https://github.com/kstepien3/ng-zen/commit/3c04b8754cd25af8cfc0c0ffa89ac8633de33145))
+* **textarea:** improve css variables ([#305](https://github.com/kstepien3/ng-zen/issues/305)) ([a9b412c](https://github.com/kstepien3/ng-zen/commit/a9b412c8ab1f77ba3d602384c963aade62308e6b))
+
+### 📚 Documentation
+
+* **README.md:** fix links ([#302](https://github.com/kstepien3/ng-zen/issues/302)) ([089587c](https://github.com/kstepien3/ng-zen/commit/089587c2ecbb8c27492bc34abd4896e7842e7d04))
+
 ## [20.2.1](https://github.com/kstepien3/ng-zen/compare/v20.2.0...v20.2.1) (2025-09-01)
 
 ### 🐛 Bug Fixes

package/README.md

@@ -250,9 +250,9 @@ export class LoginComponent {}
 ## 📚 Documentation
 
 - **📖 [Live Storybook Demo](https://kstepien3.github.io/ng-zen/)** - Interactive component examples
-- **🔧 [Development Guide](DEVELOPMENT.md)** - Setup and contribution workflow
-- **🤝 [Contributing Guide](CONTRIBUTING.md)** - How to contribute to the project
-- **📝 [Changelog](CHANGELOG.md)** - Version history and breaking changes
+- **🔧 [Development Guide](https://github.com/kstepien3/ng-zen/blob/master/DEVELOPMENT.md)** - Setup and contribution workflow
+- **🤝 [Contributing Guide](https://github.com/kstepien3/ng-zen/blob/master/CONTRIBUTING.md)** - How to contribute to the project
+- **📝 [Changelog](https://github.com/kstepien3/ng-zen/blob/master/CHANGELOG.md)** - Version history and breaking changes
 - **💬 Component READMEs** - Detailed docs generated with each component
 
 ## 🚧 Project Status
@@ -284,14 +284,14 @@ We welcome contributions! Whether it's:
 
 **Getting Started:**
 
-1. Read our [Contributing Guidelines](CONTRIBUTING.md)
-2. Check the [Development Setup](DEVELOPMENT.md)
+1. Read our [Contributing Guidelines](https://github.com/kstepien3/ng-zen/blob/master/CONTRIBUTING.md)
+2. Check the [Development Setup](https://github.com/kstepien3/ng-zen/blob/master/DEVELOPMENT.md)
 3. Browse [open issues](https://github.com/kstepien3/ng-zen/issues)
 4. Join the discussion!
 
 ## License
 
-This project is licensed under the [BSD 2-Clause License](LICENSE) 📜.
+This project is licensed under the [BSD 2-Clause License](https://github.com/kstepien3/ng-zen/blob/master/LICENSE) 📜.
 
 ## Author
 

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@ng-zen/cli",
-  "version": "20.2.1",
+  "version": "20.3.0-next.2",
   "description": "A CLI tool for generating customizable, modern Angular UI components using schematics.",
   "license": "BSD-2-Clause",
   "private": false,
   "repository": {
-    "url": "https://github.com/kstepien3/ng-zen"
+    "url": "git+https://github.com/kstepien3/ng-zen.git"
   },
   "bugs": {
     "url": "https://github.com/kstepien3/ng-zen/issues"

package/schematics/components/files/input/input.scss

@@ -1,33 +1,34 @@
-// Component Variables
-$border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
-$border-radius: var(--zen-input-border-radius, 8px);
-$padding: var(--zen-input-padding, 0.5rem 1rem);
-$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
-$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
-
-// Color Palette
+// Globals
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 $error: var(--zen-error, hsl(0deg 70% 50%));
 
+:host {
+  --zen-input-border: 1px solid hsl(0deg 0% 80%);
+  --zen-input-border-radius: 8px;
+  --zen-input-padding: 0.5rem 1rem;
+  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+}
+
 input {
-  border: $border;
-  border-radius: $border-radius;
-  padding: $padding;
+  border: var(--zen-input-border);
+  border-radius: var(--zen-input-border-radius);
+  padding: var(--zen-input-padding);
 
   &:disabled {
     opacity: 0.6;
   }
 
   &:focus-visible {
-    outline: $outline;
-    box-shadow: $focus-shadow;
+    outline: var(--zen-outline);
+    box-shadow: var(--zen-input-focus-shadow);
   }
 
   &:user-invalid {
-    border-color: $error;
+    border-color: var(--zen-error);
   }
 
   &::placeholder {
-    color: $placeholder-color;
+    color: var(--zen-input-placeholder-color);
   }
 }

package/schematics/components/files/skeleton/skeleton.scss

@@ -1,13 +1,16 @@
-$background: var(--zen-skeleton-background, hsl(0deg 0% 80%));
-$radius: var(--zen-skeleton-border-radius, 0.5rem);
-$animation-duration: var(--zen-skeleton-animation-duration, 1.6s);
+:host {
+  --zen-skeleton-background: hsl(0deg 0% 80%);
+  --zen-skeleton-border-radius: 0.5rem;
+  --zen-skeleton-animation-duration: 1.6s;
+}
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
-  background: $background;
+  background: var(--zen-skeleton-background);
+  border-radius: var(--zen-skeleton-border-radius);
   display: inline-block;
   min-height: 1rem;
   min-width: 1rem;
-  border-radius: $radius;
   position: relative;
   overflow: hidden;
 
@@ -29,7 +32,7 @@ $animation-duration: var(--zen-skeleton-animation-duration, 1.6s);
       transparent 100%
     );
     transform: translateX(-100%);
-    animation: shimmer $animation-duration ease-in-out infinite;
+    animation: shimmer var(--zen-skeleton-animation-duration) ease-in-out infinite;
   }
 
   &[rounded] {
@@ -46,7 +49,7 @@ $animation-duration: var(--zen-skeleton-animation-duration, 1.6s);
     }
 
     // Subtle pulse animation as fallback
-    animation: pulse $animation-duration ease-in-out infinite alternate;
+    animation: pulse var(--zen-skeleton-animation-duration) ease-in-out infinite alternate;
   }
 }
 

package/schematics/components/files/switch/switch.scss

@@ -1,63 +1,82 @@
+// Globals
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
-$transition-duration: 0.15s;
-$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
-$size: var(--zen-switch-size, 16px);
-$margin: var(--zen-switch-margin, 2px);
-$width: var(--zen-switch-width, 30px);
-$right-end: calc(#{$width} - #{$size} - #{$margin} * 2);
-$height: calc(#{$size} + #{$margin} * 2);
+$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%));
 
 :host {
+  --zen-switch-thumb-size: 1rem;
+  --zen-switch-height: 1.25rem;
+  --zen-switch-width: 2rem;
+  --zen-switch-apperance: #{$appearance};
+  --zen-switch-background: hsl(0deg 0% 80%);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  $thumb-x-center-position: calc(var(--zen-switch-height) / 2 - var(--zen-switch-thumb-size) / 2);
+
+  background: var(--zen-switch-background);
+  height: var(--zen-switch-height);
+  width: var(--zen-switch-width);
   cursor: pointer;
-  background: hsl(0deg 0% 80%);
   border-radius: 9999px;
-  width: $width;
-  height: $height;
   position: relative;
-  display: block;
-  transition:
-    background-color ease,
-    border-color ease;
-  transition-duration: $transition-duration;
-  vertical-align: middle;
+  display: flex;
+  place-items: center;
   user-select: none;
 
-  .switch-handle {
-    display: grid;
+  // Animation
+  transition-property: background-color, border-color;
+  transition-duration: $transition-duration;
+  transition-timing-function: ease;
+
+  .thumb {
+    height: var(--zen-switch-thumb-size);
+    width: var(--zen-switch-thumb-size);
     position: absolute;
-    height: $size;
-    width: $size;
     background-color: white;
     border-radius: 9999px;
-    font-size: 12px;
-    justify-content: center;
-    place-items: center;
-    color: $placeholder-color;
-    margin: 2px;
-    animation-fill-mode: revert;
-    transition: width ease;
+
+    // Animation
+    transition-property: left, transform, width;
+    transition-timing-function: ease;
     transition-duration: $transition-duration;
-  }
+    left: $thumb-x-center-position;
+    transform: translateX(0);
 
-  &:active .switch-handle {
-    width: calc(#{$size} + 2px);
+    &:not(:empty) {
+      // Handle content
+      display: grid;
+      font-size: small;
+      justify-content: center;
+      place-items: center;
+      color: $placeholder-color;
+    }
   }
 
   &:focus-visible {
     outline: $outline;
+    box-shadow: $focus-shadow;
   }
 
   &[data-checked='true'] {
-    background-color: hsl(0deg 0% 10%);
+    background-color: var(--zen-switch-apperance);
 
-    .switch-handle {
-      color: hsl(0deg 0% 10%);
-      right: 0;
+    .thumb {
+      left: 100%;
+      color: var(--zen-switch-apperance);
+      transform: translateX(calc(-100% - #{$thumb-x-center-position}));
     }
   }
 
   &[data-disabled='true'] {
-    pointer-events: none;
+    cursor: not-allowed;
     opacity: 0.6;
   }
+
+  &:active:not([data-disabled='true']) .thumb {
+    width: calc(var(--zen-switch-thumb-size) + 2px);
+  }
 }

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

@@ -35,7 +35,7 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
 @Component({
   selector: 'zen-switch',
   template: `
-    <span class="switch-handle">
+    <span class="thumb">
       <!-- @if (value()) { ✓ } -->
       <!-- @if (!value()) { ─ } -->
     </span>
@@ -45,6 +45,7 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
   providers: [ZenFormControlProvider(ZenSwitch)],
   host: {
     tabindex: '0',
+    role: 'switch',
     '[attr.data-disabled]': 'disabled()',
     '[attr.data-checked]': 'value()',
     '(blur)': 'onTouched()',

package/schematics/components/files/textarea/textarea.scss

@@ -1,18 +1,20 @@
-// Component Variables
-$border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
-$border-radius: var(--zen-input-border-radius, 8px);
-$padding: var(--zen-input-padding, 0.5rem 1rem);
-$focus-shadow: var(--zen-input-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
-$placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
-
-// Color Palette
+// Globals
+$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%));
 
 :host {
-  border: $border;
-  border-radius: $border-radius;
-  padding: $padding;
+  --zen-textarea-border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
+  --zen-textarea-border-radius: var(--zen-input-border-radius, 8px);
+  --zen-textarea-padding: var(--zen-input-padding, 0.5rem 1rem);
+  --zen-textarea-placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  border: var(--zen-textarea-border);
+  border-radius: var(--zen-textarea-border-radius);
+  padding: var(--zen-textarea-padding);
 
   &[autoresize] {
     field-sizing: content;
@@ -33,6 +35,6 @@ $error: var(--zen-error, hsl(0deg 70% 50%));
   }
 
   &::placeholder {
-    color: $placeholder-color;
+    color: var(--zen-textarea-placeholder-color);
   }
 }

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

@@ -13,11 +13,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  *
  * ```css
  * :root {
- *  --zen-input-border: 1px solid hsl(0deg 0% 80%);
- *  --zen-input-border-radius: 8px;
- *  --zen-input-padding: 0.5rem 1rem;
- *  --zen-input-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
- *  --zen-input-placeholder-color: hsl(0deg 0% 60%);
+ *   --zen-textarea-border: var(--zen-input-border, 1px solid hsl(0deg 0% 80%));
+ *   --zen-textarea-border-radius: var(--zen-input-border-radius, 8px);
+ *   --zen-textarea-padding: var(--zen-input-padding, 0.5rem 1rem);
+ *   --zen-textarea-placeholder-color: var(--zen-input-placeholder-color, hsl(0deg 0% 60%));
  * }
  * ```
  *