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

package/CHANGELOG.md

@@ -1,3 +1,42 @@
+## [20.3.0-next.3](https://github.com/kstepien3/ng-zen/compare/v20.3.0-next.2...v20.3.0-next.3) (2025-09-15)
+
+### 🐛 Bug Fixes
+
+* **avatar:** improve css variables ([#323](https://github.com/kstepien3/ng-zen/issues/323)) ([eef614a](https://github.com/kstepien3/ng-zen/commit/eef614a0e2060fe32f72e00809b66009ae24832f))
+* **input:** resolve problem with wrong variables ([#322](https://github.com/kstepien3/ng-zen/issues/322)) ([30f5d10](https://github.com/kstepien3/ng-zen/commit/30f5d10c4c559f01ed3445b77e174340b4f2fb6f))
+
+### 🛠️ Code Refactor
+
+* **button:** improve css variables ([#321](https://github.com/kstepien3/ng-zen/issues/321)) ([4ed1310](https://github.com/kstepien3/ng-zen/commit/4ed1310450dde749164c419ec6b5da0a4fbb98bc))
+* **checkbox:** improve css variables ([#317](https://github.com/kstepien3/ng-zen/issues/317)) ([bbe1437](https://github.com/kstepien3/ng-zen/commit/bbe143704163394a9c9ce446aa9d749a57f9c62c))
+* **divider:** improve css variables ([#316](https://github.com/kstepien3/ng-zen/issues/316)) ([7a19ce7](https://github.com/kstepien3/ng-zen/commit/7a19ce72db58e8d23a4786aae2787db6bcfdbf6d))
+
+## [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.3",
   "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/avatar/avatar.scss

@@ -1,20 +1,23 @@
-$size: var(--zen-avatar-size, 2rem);
-$bg-color: var(--zen-avatar-bg-color, hsl(0deg 0% 80%));
-$color: var(--zen-avatar-color, hsl(0deg 0% 20%));
-$font-size: var(--zen-avatar-font-size, small);
+:host {
+  --zen-avatar-size: 2rem;
+  --zen-avatar-bg-color: hsl(0deg 0% 80%);
+  --zen-avatar-color: hsl(0deg 0% 20%);
+  --zen-avatar-font-size: small;
+}
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
+  height: var(--zen-avatar-size);
+  width: var(--zen-avatar-size);
   display: flex;
-  height: $size;
-  width: $size;
   border-radius: 50%;
   overflow: hidden;
   position: relative;
 
   // Content styles
-  background-color: $bg-color;
-  color: $color;
-  font-size: $font-size;
+  background-color: var(--zen-avatar-bg-color);
+  color: var(--zen-avatar-color);
+  font-size: var(--zen-avatar-font-size);
   justify-content: center;
   align-items: center;
   font-weight: bold;

package/schematics/components/files/button/button.scss

@@ -1,26 +1,31 @@
-$bg-color-hover: var(--zen-button-bg-color-hover, hsl(0deg 0% 20%));
-$bg-color: var(--zen-button-bg-color, hsl(0deg 0% 0%));
-$color: var(--zen-button-color, hsl(0deg 0% 100%));
-$padding: var(--zen-button-padding, 0.5rem 1rem);
-$shadow: var(--zen-button-shadow, 0 2px 4px hsl(0deg 0% 0% / 10%));
+// Globals
 $transition-duration: var(--zen-transition-duration, 0.4s);
 $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 
 :host {
+  --zen-button-padding: 0.5rem 1rem;
+  --zen-button-bg-color: hsl(0deg 0% 0%);
+  --zen-button-bg-color-hover: hsl(0deg 0% 20%);
+  --zen-button-color: hsl(0deg 0% 100%);
+  --zen-button-shadow: 0 2px 4px hsl(0deg 0% 0% / 10%);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
+:host {
+  padding: var(--zen-button-padding);
+  background-color: var(--zen-button-bg-color);
+  color: var(--zen-button-color);
+  box-shadow: var(--zen-button-shadow);
   display: inline-block;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   cursor: pointer;
   border: none;
-  padding: $padding;
   border-radius: 99999px;
   transition-property: background-color, opacity;
   transition-duration: $transition-duration;
   transition-timing-function: ease;
-  background-color: $bg-color;
-  color: $color;
-  box-shadow: $shadow;
   text-decoration: none;
   overflow: hidden;
   position: relative;
@@ -28,7 +33,7 @@ $outline: var(--zen-outline, 2px solid hsl(200deg 100% 50% / 50%));
 
 /* Hover state */
 :host:hover {
-  background-color: $bg-color-hover;
+  background-color: var(--zen-button-bg-color-hover);
 }
 
 /* Focus state */

package/schematics/components/files/checkbox/checkbox.scss

@@ -1,18 +1,17 @@
-// Component Variables
-$size: var(--zen-checkbox-size, 16px);
-$border-radius: var(--zen-checkbox-border-radius, 6px);
-$focus-shadow: var(--zen-checkbox-focus-shadow, 0 1px 4px hsl(0deg 0% 60% / 20%) inset);
-
-// Color Palette
-$appearance: var(--zen-checkbox-appearance, hsl(0deg 0% 10%));
-$disabled-opacity: var(--zen-checkbox-disabled-opacity, 0.6);
-$border: var(--zen-checkbox-border, 1px solid hsl(0deg 0% 80%));
+// Globals
 $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%));
-
-// Animations
 $transition-duration: var(--zen-transition-duration, 0.2s);
 
+: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%);
+}
+
 input {
   position: absolute;
   cursor: pointer;
@@ -25,13 +24,14 @@ input {
   left: 0;
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
+  border: var(--zen-checkbox-border);
+  border-radius: var(--zen-checkbox-border-radius);
+  height: var(--zen-checkbox-size);
+  width: var(--zen-checkbox-size);
   background-color: white;
   cursor: pointer;
-  border: $border;
-  border-radius: $border-radius;
-  height: $size;
-  width: $size;
   position: relative;
   transition:
     background-color ease,
@@ -42,28 +42,28 @@ input {
   display: grid;
   place-items: center;
   font-size: small;
-}
 
-:host:has(input:checked) {
-  color: white;
-  background-color: $appearance;
-  border-color: $appearance;
-}
+  &:has(input:checked) {
+    color: white;
+    background-color: var(--zen-checkbox-appearance);
+    border-color: var(--zen-checkbox-appearance);
+  }
 
-:host:has(input[type='checkbox']:disabled) {
-  opacity: $disabled-opacity;
+  &:has(input[type='checkbox']:disabled) {
+    opacity: var(--zen-checkbox-disabled-opacity);
 
-  &,
-  input {
-    cursor: not-allowed;
+    &,
+    input {
+      cursor: not-allowed;
+    }
   }
-}
 
-:host:has(input:focus-visible) {
-  outline: $outline;
-  box-shadow: $focus-shadow;
-}
+  &:has(input:focus-visible) {
+    outline: $outline;
+    box-shadow: $focus-shadow;
+  }
 
-:host:has(input:user-invalid) {
-  border-color: $error;
+  &:has(input:user-invalid) {
+    border-color: $error;
+  }
 }

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

@@ -20,9 +20,8 @@ import { ZenFormControl, ZenFormControlProvider } from '../form-control';
  *
  * ```css
  * :root {
- *  --zen-checkbox-size: 16px;
- *  --zen-checkbox-border-radius: 6px;
- *  --zen-checkbox-focus-shadow: 0 1px 4px hsl(0deg 0% 60% / 20%) inset;
+ *  --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%);

package/schematics/components/files/divider/divider.scss

@@ -1,15 +1,18 @@
-$appearance: var(--zen-divider-appearance, hsl(0deg 0% 60%));
-$type: var(--zen-divider-type, solid);
-$align-offset: var(--zen-divider-align-offset, 25%);
-$gap: var(--zen-divider-gap, 0.25rem);
-$thickness: var(--zen-divider-thickness, 1px);
+:host {
+  --zen-divider-appearance: hsl(0deg 0% 60%);
+  --zen-divider-type: solid;
+  --zen-divider-align-offset: 25%;
+  --zen-divider-gap: 0.25rem;
+  --zen-divider-thickness: 1px;
+}
 
+/* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
+  color: var(--zen-divider-appearance);
+  gap: var(--zen-divider-gap);
   width: 100%;
   display: flex;
   align-items: center;
-  gap: $gap;
-  color: $appearance;
 
   &::before,
   &::after {
@@ -17,12 +20,12 @@ $thickness: var(--zen-divider-thickness, 1px);
     display: block;
     width: 100%;
     height: 0;
-    border-color: $appearance;
-    border-style: $type;
-    border-width: #{$thickness} 0 0;
+    border-color: var(--zen-divider-appearance);
+    border-style: var(--zen-divider-type);
+    border-width: var(--zen-divider-thickness) 0 0;
   }
 
-  &:not(.has-content) {
+  &:empty {
     gap: 0;
 
     &::after {
@@ -32,7 +35,7 @@ $thickness: var(--zen-divider-thickness, 1px);
 
   &.zen-align-start::before,
   &.zen-align-end::after {
-    width: $align-offset;
+    width: var(--zen-divider-align-offset);
   }
 }
 
@@ -47,11 +50,11 @@ $thickness: var(--zen-divider-thickness, 1px);
     display: block;
     width: unset;
     height: 100%;
-    border-width: 0 #{$thickness} 0 0;
+    border-width: 0 var(--zen-divider-thickness) 0 0;
   }
 
   &.zen-align-start::before,
   &.zen-align-end::after {
-    height: $align-offset;
+    height: var(--zen-divider-align-offset);
   }
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 /**
  * ZenDivider is a reusable divider component that provides a simple way to
@@ -38,21 +38,10 @@ import { ChangeDetectionStrategy, Component, computed, ElementRef, inject, input
   styleUrl: './divider.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class.has-content]': 'hasContent()',
     '[class]': '"zen-align-"+align()',
   },
 })
 export class ZenDivider {
   /** Controls the alignment of content within the divider. */
   readonly align = input<'start' | 'end' | 'center'>('center');
-
-  /**
-   * Computed property that determines if the divider contains any content.
-   * Used to apply appropriate styling when content is present.
-   */
-  protected readonly hasContent = computed(() => {
-    return this.elementRef.nativeElement.childNodes.length > 0;
-  });
-
-  private readonly elementRef = inject(ElementRef);
 }

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

@@ -1,18 +1,19 @@
-// 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;
@@ -20,7 +21,7 @@ input {
 
   &:focus-visible {
     outline: $outline;
-    box-shadow: $focus-shadow;
+    box-shadow: var(--zen-input-focus-shadow);
   }
 
   &:user-invalid {
@@ -28,6 +29,6 @@ input {
   }
 
   &::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%));
  * }
  * ```
  *