npm - @ng-zen/cli - Versions diffs - 21.2.0-next.1 → 21.3.0-next.1 - Mend

@ng-zen/cli 21.2.0-next.1 → 21.3.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md +6 -448
package/README.md +7 -1
package/package.json +5 -8
package/schematics/ui/files/button/button.scss +160 -24
package/schematics/ui/files/button/button.spec.ts +69 -0
package/schematics/ui/files/button/button.stories.ts +119 -13
package/schematics/ui/files/button/button.ts +22 -7
package/schematics/ui/files/dialog/dialog.service.stories.ts +2 -2
package/schematics/ui/files/dialog/dialog.stories.ts +1 -1
package/schematics/ui/files/popover/host/popover-host.scss +12 -6
package/schematics/ui/files/popover/index.ts +1 -0
package/schematics/ui/files/popover/popover.stories.ts +18 -1
package/schematics/ui/files/popover/popover.ts +36 -8

package/CHANGELOG.md CHANGED Viewed

@@ -1,455 +1,13 @@
-## [21.2.0-next.1](https://github.com/kstepien3/ng-zen/compare/v21.1.1...v21.2.0-next.1) (2026-03-09)
+## [21.3.0-next.1](https://github.com/kstepien3/ng-zen/compare/v21.2.0...v21.3.0-next.1) (2026-06-12)
 ### 🚀 New Features
-* **dialog:** add reusable dialog component with service and tests ([#387](https://github.com/kstepien3/ng-zen/issues/387)) ([1cb90f6](https://github.com/kstepien3/ng-zen/commit/1cb90f6c5b89b63a461abe6d45da74869275ff12))
+* **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:** update storybook tag ([#395](https://github.com/kstepien3/ng-zen/issues/395)) ([114dfdc](https://github.com/kstepien3/ng-zen/commit/114dfdc87614345784b264a6bde6be73b5e93aa7))
+* **README:** add DeepWiki link ([#409](https://github.com/kstepien3/ng-zen/issues/409)) ([7875347](https://github.com/kstepien3/ng-zen/commit/78753471c6e56036788c6371ce0f063ab06b524b))
-## [21.1.1](https://github.com/kstepien3/ng-zen/compare/v21.1.0...v21.1.1) (2026-02-25)
-### 🐛 Bug Fixes
-* **icon:** support all SVG shapes and normalize attribute naming ([#380](https://github.com/kstepien3/ng-zen/issues/380)) ([56cf31f](https://github.com/kstepien3/ng-zen/commit/56cf31ffbd59ca427ddb2f284f264a110d63ad4e))
-### 🛠️ Code Refactor
-* **ng-add:** improve icon library installation ([#384](https://github.com/kstepien3/ng-zen/issues/384)) ([a0145de](https://github.com/kstepien3/ng-zen/commit/a0145deed42eb009a78f2dbef3873710a316215f))
-### 📚 Documentation
-* **alert:** update example ([#382](https://github.com/kstepien3/ng-zen/issues/382)) ([3d29acb](https://github.com/kstepien3/ng-zen/commit/3d29acbd575d2a3eb3e5028f1abb9d0118918cc2))
-* **icon:** update component description and usage guidance ([#385](https://github.com/kstepien3/ng-zen/issues/385)) ([eb329bd](https://github.com/kstepien3/ng-zen/commit/eb329bdcf7e383bf7a2a54a39f75be7257c4377f))
-## [21.1.1-next.2](https://github.com/kstepien3/ng-zen/compare/v21.1.1-next.1...v21.1.1-next.2) (2026-02-24)
-### 🛠️ Code Refactor
-* **ng-add:** improve icon library installation ([#384](https://github.com/kstepien3/ng-zen/issues/384)) ([a0145de](https://github.com/kstepien3/ng-zen/commit/a0145deed42eb009a78f2dbef3873710a316215f))
-### 📚 Documentation
-* **icon:** update component description and usage guidance ([#385](https://github.com/kstepien3/ng-zen/issues/385)) ([eb329bd](https://github.com/kstepien3/ng-zen/commit/eb329bdcf7e383bf7a2a54a39f75be7257c4377f))
-## [21.1.1-next.1](https://github.com/kstepien3/ng-zen/compare/v21.1.0...v21.1.1-next.1) (2026-02-23)
-### 🐛 Bug Fixes
-* **icon:** support all SVG shapes and normalize attribute naming ([#380](https://github.com/kstepien3/ng-zen/issues/380)) ([56cf31f](https://github.com/kstepien3/ng-zen/commit/56cf31ffbd59ca427ddb2f284f264a110d63ad4e))
-### 📚 Documentation
-* **alert:** update example ([#382](https://github.com/kstepien3/ng-zen/issues/382)) ([3d29acb](https://github.com/kstepien3/ng-zen/commit/3d29acbd575d2a3eb3e5028f1abb9d0118918cc2))
-## [21.1.0](https://github.com/kstepien3/ng-zen/compare/v21.0.0...v21.1.0) (2026-02-17)
-### 🚀 New Features
-* **components:** improve path component generation ([#362](https://github.com/kstepien3/ng-zen/issues/362)) ([8503565](https://github.com/kstepien3/ng-zen/commit/8503565076e2189a36c18b8555639cf86adb2fcc))
-* **popover:** add new component ([#374](https://github.com/kstepien3/ng-zen/issues/374)) ([c67daea](https://github.com/kstepien3/ng-zen/commit/c67daea23027ecfdd868b96ff29b65903059ac20))
-### 🛠️ Code Refactor
-* **ui:** rename `components` to `ui` across schematics ([#376](https://github.com/kstepien3/ng-zen/issues/376)) ([6b1bc9f](https://github.com/kstepien3/ng-zen/commit/6b1bc9fc6197fefa85d3eb0d2d9947ef44547533))
-## [21.1.0-next.1](https://github.com/kstepien3/ng-zen/compare/v21.0.0...v21.1.0-next.1) (2026-02-15)
-### 🚀 New Features
-* **components:** improve path component generation ([#362](https://github.com/kstepien3/ng-zen/issues/362)) ([8503565](https://github.com/kstepien3/ng-zen/commit/8503565076e2189a36c18b8555639cf86adb2fcc))
-* **popover:** add new component ([#374](https://github.com/kstepien3/ng-zen/issues/374)) ([c67daea](https://github.com/kstepien3/ng-zen/commit/c67daea23027ecfdd868b96ff29b65903059ac20))
-### 🛠️ Code Refactor
-* **ui:** rename `components` to `ui` across schematics ([#376](https://github.com/kstepien3/ng-zen/issues/376)) ([6b1bc9f](https://github.com/kstepien3/ng-zen/commit/6b1bc9fc6197fefa85d3eb0d2d9947ef44547533))
-## [21.0.0](https://github.com/kstepien3/ng-zen/compare/v20.5.0...v21.0.0) (2025-12-18)
-### ⚠ BREAKING CHANGES
-* upgrade Angular v21 + Storybook v10, add vitest  (#363)
-### chore
-* upgrade Angular v21 + Storybook v10, add vitest  ([#363](https://github.com/kstepien3/ng-zen/issues/363)) ([13bd57e](https://github.com/kstepien3/ng-zen/commit/13bd57ebd5b5fd26721947645dace5da97defa45))
-### 📚 Documentation
-* **readme:** update info about testing framework ([#371](https://github.com/kstepien3/ng-zen/issues/371)) ([9fe8e7f](https://github.com/kstepien3/ng-zen/commit/9fe8e7f28911731c5c6482d7b69463e72a4c4232))
-## [21.0.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.5.0...v21.0.0-next.1) (2025-12-16)
-### ⚠ BREAKING CHANGES
-* upgrade Angular v21 + Storybook v10, add vitest  (#363)
-### chore
-* upgrade Angular v21 + Storybook v10, add vitest  ([#363](https://github.com/kstepien3/ng-zen/issues/363)) ([13bd57e](https://github.com/kstepien3/ng-zen/commit/13bd57ebd5b5fd26721947645dace5da97defa45))
-### 📚 Documentation
-* **readme:** update info about testing framework ([#371](https://github.com/kstepien3/ng-zen/issues/371)) ([9fe8e7f](https://github.com/kstepien3/ng-zen/commit/9fe8e7f28911731c5c6482d7b69463e72a4c4232))
-## [20.5.0](https://github.com/kstepien3/ng-zen/compare/v20.4.0...v20.5.0) (2025-11-30)
-### 🚀 New Features
-* **radio:** add component ([#358](https://github.com/kstepien3/ng-zen/issues/358)) ([a2f170e](https://github.com/kstepien3/ng-zen/commit/a2f170e0b18eadfc43c39a1d36597192d0f90c73))
-### 📚 Documentation
-* **assets:** optimize logos ([#354](https://github.com/kstepien3/ng-zen/issues/354)) ([66fd5ba](https://github.com/kstepien3/ng-zen/commit/66fd5ba61e005b407c036dd34dcfa996e8884e8b))
-* **development:** fix verdaccio installation command in guide ([#359](https://github.com/kstepien3/ng-zen/issues/359)) ([6945e65](https://github.com/kstepien3/ng-zen/commit/6945e65f648362ec096e17de6a2118be3340cbee))
-## [20.5.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.4.0...v20.5.0-next.1) (2025-11-28)
-### 🚀 New Features
-* **radio:** add component ([#358](https://github.com/kstepien3/ng-zen/issues/358)) ([a2f170e](https://github.com/kstepien3/ng-zen/commit/a2f170e0b18eadfc43c39a1d36597192d0f90c73))
-### 📚 Documentation
-* **assets:** optimize logos ([#354](https://github.com/kstepien3/ng-zen/issues/354)) ([66fd5ba](https://github.com/kstepien3/ng-zen/commit/66fd5ba61e005b407c036dd34dcfa996e8884e8b))
-* **development:** fix verdaccio installation command in guide ([#359](https://github.com/kstepien3/ng-zen/issues/359)) ([6945e65](https://github.com/kstepien3/ng-zen/commit/6945e65f648362ec096e17de6a2118be3340cbee))
-## [20.4.0](https://github.com/kstepien3/ng-zen/compare/v20.3.0...v20.4.0) (2025-10-05)
-### 🚀 New Features
-* **alert:** add component ([#337](https://github.com/kstepien3/ng-zen/issues/337)) ([bc59953](https://github.com/kstepien3/ng-zen/commit/bc59953dc263561b0a8fb4e3fd0e753c1c14df77))
-### 🐛 Bug Fixes
-* **alert:** update icon selector ([#338](https://github.com/kstepien3/ng-zen/issues/338)) ([99b9d63](https://github.com/kstepien3/ng-zen/commit/99b9d63e0bbd9ef4dc61672b2b1b393ecd26c406))
-### 📚 Documentation
-* **seo:** add seo features ([#332](https://github.com/kstepien3/ng-zen/issues/332)) ([3afc125](https://github.com/kstepien3/ng-zen/commit/3afc12595d39ae8ffad8223e787862d143ec9b6a))
-* **seo:** replace og image ([#341](https://github.com/kstepien3/ng-zen/issues/341)) ([6edb078](https://github.com/kstepien3/ng-zen/commit/6edb078a1c990952e854616fda4865c1fedb5515))
-## [20.4.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.3.0...v20.4.0-next.1) (2025-10-03)
-### 🚀 New Features
-* **alert:** add component ([#337](https://github.com/kstepien3/ng-zen/issues/337)) ([bc59953](https://github.com/kstepien3/ng-zen/commit/bc59953dc263561b0a8fb4e3fd0e753c1c14df77))
-### 🐛 Bug Fixes
-* **alert:** update icon selector ([#338](https://github.com/kstepien3/ng-zen/issues/338)) ([99b9d63](https://github.com/kstepien3/ng-zen/commit/99b9d63e0bbd9ef4dc61672b2b1b393ecd26c406))
-### 📚 Documentation
-* **seo:** add seo features ([#332](https://github.com/kstepien3/ng-zen/issues/332)) ([3afc125](https://github.com/kstepien3/ng-zen/commit/3afc12595d39ae8ffad8223e787862d143ec9b6a))
-## [20.3.0](https://github.com/kstepien3/ng-zen/compare/v20.2.1...v20.3.0) (2025-09-21)
-### 🚀 New Features
-* **switch:** add animations ([#303](https://github.com/kstepien3/ng-zen/issues/303)) ([6b48d4f](https://github.com/kstepien3/ng-zen/commit/6b48d4f39db1e5bfe22920fa749b652ac65e4432))
-### 🐛 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))
-* **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))
-* **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))
-* **storybook:** add brand theme ([#325](https://github.com/kstepien3/ng-zen/issues/325)) ([97458f8](https://github.com/kstepien3/ng-zen/commit/97458f89de18896595a30f2a33ae93bb5ef75ac5))
-* **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.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
-* **button:** improve styles to detect disabled states ([#283](https://github.com/kstepien3/ng-zen/issues/283)) ([757108f](https://github.com/kstepien3/ng-zen/commit/757108f9b455d699f416d893c027209d3fa9cbc0))
-* **form-control:** move placeholder into the input component ([#277](https://github.com/kstepien3/ng-zen/issues/277)) ([aec69b4](https://github.com/kstepien3/ng-zen/commit/aec69b43575556b29d6256f1b3fbd61ae7eae515))
-### 🛠️ Code Refactor
-* remove unnecessary standalone property ([#290](https://github.com/kstepien3/ng-zen/issues/290)) ([d984f17](https://github.com/kstepien3/ng-zen/commit/d984f174ed7e25febaf3c908cb14573f3eaf7dee))
-### 📚 Documentation
-* **readme:** add logo and improve the file ([#289](https://github.com/kstepien3/ng-zen/issues/289)) ([2e8da82](https://github.com/kstepien3/ng-zen/commit/2e8da82c42817eb251a5957a2bd9862e07f2390b))
-* **storybook:** add docs about the suggested storybook configuration ([#288](https://github.com/kstepien3/ng-zen/issues/288)) ([f9e0bc5](https://github.com/kstepien3/ng-zen/commit/f9e0bc555e3d1349dfa9f532ba883fe03baf0dec))
-* **storybook:** improve documentations and stories code ([#287](https://github.com/kstepien3/ng-zen/issues/287)) ([c0312e9](https://github.com/kstepien3/ng-zen/commit/c0312e9de51e949527ec81abf70bb968ee2a84c4))
-## [20.2.1-next.1](https://github.com/kstepien3/ng-zen/compare/v20.2.0...v20.2.1-next.1) (2025-09-01)
-### 🐛 Bug Fixes
-* **button:** improve styles to detect disabled states ([#283](https://github.com/kstepien3/ng-zen/issues/283)) ([757108f](https://github.com/kstepien3/ng-zen/commit/757108f9b455d699f416d893c027209d3fa9cbc0))
-* **form-control:** move placeholder into the input component ([#277](https://github.com/kstepien3/ng-zen/issues/277)) ([aec69b4](https://github.com/kstepien3/ng-zen/commit/aec69b43575556b29d6256f1b3fbd61ae7eae515))
-### 🛠️ Code Refactor
-* remove unnecessary standalone property ([#290](https://github.com/kstepien3/ng-zen/issues/290)) ([d984f17](https://github.com/kstepien3/ng-zen/commit/d984f174ed7e25febaf3c908cb14573f3eaf7dee))
-### 📚 Documentation
-* **readme:** add logo and improve the file ([#289](https://github.com/kstepien3/ng-zen/issues/289)) ([2e8da82](https://github.com/kstepien3/ng-zen/commit/2e8da82c42817eb251a5957a2bd9862e07f2390b))
-* **storybook:** add docs about the suggested storybook configuration ([#288](https://github.com/kstepien3/ng-zen/issues/288)) ([f9e0bc5](https://github.com/kstepien3/ng-zen/commit/f9e0bc555e3d1349dfa9f532ba883fe03baf0dec))
-* **storybook:** improve documentations and stories code ([#287](https://github.com/kstepien3/ng-zen/issues/287)) ([c0312e9](https://github.com/kstepien3/ng-zen/commit/c0312e9de51e949527ec81abf70bb968ee2a84c4))
-## [20.2.1-next.1](https://github.com/kstepien3/ng-zen/compare/v20.2.0...v20.2.1-next.1) (2025-08-29)
-### 🐛 Bug Fixes
-* **button:** improve styles to detect disabled states ([#283](https://github.com/kstepien3/ng-zen/issues/283)) ([757108f](https://github.com/kstepien3/ng-zen/commit/757108f9b455d699f416d893c027209d3fa9cbc0))
-* **form-control:** move placeholder into the input component ([#277](https://github.com/kstepien3/ng-zen/issues/277)) ([aec69b4](https://github.com/kstepien3/ng-zen/commit/aec69b43575556b29d6256f1b3fbd61ae7eae515))
-### 🛠️ Code Refactor
-* remove unnecessary standalone property ([#290](https://github.com/kstepien3/ng-zen/issues/290)) ([d984f17](https://github.com/kstepien3/ng-zen/commit/d984f174ed7e25febaf3c908cb14573f3eaf7dee))
-## [20.2.0](https://github.com/kstepien3/ng-zen/compare/v20.1.0...v20.2.0) (2025-08-18)
-### 🚀 New Features
-* **components:** generate code in workingDirectory ([#270](https://github.com/kstepien3/ng-zen/issues/270)) ([2f2060f](https://github.com/kstepien3/ng-zen/commit/2f2060fd26b5cd45ce004daf5a651aa3030556f0))
-## [20.2.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.1.0...v20.2.0-next.1) (2025-08-13)
-### 🚀 New Features
-* **components:** generate code in workingDirectory ([#270](https://github.com/kstepien3/ng-zen/issues/270)) ([2f2060f](https://github.com/kstepien3/ng-zen/commit/2f2060fd26b5cd45ce004daf5a651aa3030556f0))
-## [20.1.0](https://github.com/kstepien3/ng-zen/compare/v20.0.0...v20.1.0) (2025-08-04)
-### 🚀 New Features
-* **checkbox:** add indeterminate state if value is null ([#260](https://github.com/kstepien3/ng-zen/issues/260)) ([d13c241](https://github.com/kstepien3/ng-zen/commit/d13c2416984df1de188082760aadfe280c7ed315))
-* **form-control:** add abstract logic for form control components ([#252](https://github.com/kstepien3/ng-zen/issues/252)) ([10e66b4](https://github.com/kstepien3/ng-zen/commit/10e66b4b0606a05d02ba527de42407129e085cbe))
-## [20.1.0-next.1](https://github.com/kstepien3/ng-zen/compare/v20.0.0...v20.1.0-next.1) (2025-07-30)
-### 🚀 New Features
-* **checkbox:** add indeterminate state if value is null ([#260](https://github.com/kstepien3/ng-zen/issues/260)) ([d13c241](https://github.com/kstepien3/ng-zen/commit/d13c2416984df1de188082760aadfe280c7ed315))
-* **form-control:** add abstract logic for form control components ([#252](https://github.com/kstepien3/ng-zen/issues/252)) ([10e66b4](https://github.com/kstepien3/ng-zen/commit/10e66b4b0606a05d02ba527de42407129e085cbe))
-## [20.0.0](https://github.com/kstepien3/ng-zen/compare/v19.4.0...v20.0.0) (2025-07-22)
-### ⚠ BREAKING CHANGES
-* **angular:** upgrade to v20 (#241)
-### 🚀 New Features
-* **icon:** remove @hugeicons/angular package & improvements ([#248](https://github.com/kstepien3/ng-zen/issues/248)) ([cceabb0](https://github.com/kstepien3/ng-zen/commit/cceabb036f092170da66724d29ffca8ccd702983))
-### 🛠️ 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))
-### 🏗️ Build Changes
-* **angular:** upgrade to v20 ([#241](https://github.com/kstepien3/ng-zen/issues/241)) ([a97126c](https://github.com/kstepien3/ng-zen/commit/a97126cbe780cb6fca9fe6c7944aa70cb86b5273))
-## [20.0.0-next.3](https://github.com/kstepien3/ng-zen/compare/v20.0.0-next.2...v20.0.0-next.3) (2025-07-21)
-### 🚀 New Features
-* **icon:** remove @hugeicons/angular package & improvements ([#248](https://github.com/kstepien3/ng-zen/issues/248)) ([cceabb0](https://github.com/kstepien3/ng-zen/commit/cceabb036f092170da66724d29ffca8ccd702983))
-## [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
-* **angular:** upgrade to v20 (#241)
-### 🏗️ Build Changes
-* **angular:** upgrade to v20 ([#241](https://github.com/kstepien3/ng-zen/issues/241)) ([a97126c](https://github.com/kstepien3/ng-zen/commit/a97126cbe780cb6fca9fe6c7944aa70cb86b5273))
-## [19.4.0](https://github.com/kstepien3/ng-zen/compare/v19.3.0...v19.4.0) (2025-07-05)
-### 🚀 New Features
-* **dependency-manager:** add prompt for necessary dependencies ([#221](https://github.com/kstepien3/ng-zen/issues/221)) ([4fd4984](https://github.com/kstepien3/ng-zen/commit/4fd4984cfc52f96b5f915bbc4550185125792c50))
-* **icon:** add component ([#215](https://github.com/kstepien3/ng-zen/issues/215)) ([61d93ad](https://github.com/kstepien3/ng-zen/commit/61d93ad67022f465e77e71c4dcf465aaf5ab0648))
-## [19.4.0-next.1](https://github.com/kstepien3/ng-zen/compare/v19.3.0...v19.4.0-next.1) (2025-06-22)
-### 🚀 New Features
-* **dependency-manager:** add prompt for necessary dependencies ([#221](https://github.com/kstepien3/ng-zen/issues/221)) ([4fd4984](https://github.com/kstepien3/ng-zen/commit/4fd4984cfc52f96b5f915bbc4550185125792c50))
-* **icon:** add component ([#215](https://github.com/kstepien3/ng-zen/issues/215)) ([61d93ad](https://github.com/kstepien3/ng-zen/commit/61d93ad67022f465e77e71c4dcf465aaf5ab0648))
-## [19.3.0](https://github.com/kstepien3/ng-zen/compare/v19.2.0...v19.3.0) (2025-06-12)
-### 🚀 New Features
-* **skeleton:** add component ([#205](https://github.com/kstepien3/ng-zen/issues/205)) ([fa21c9a](https://github.com/kstepien3/ng-zen/commit/fa21c9a440ce918d521c12cd9e9eec17cade60cd))
-### 🐛 Bug Fixes
-* **storybook/components:** format and documentation ([#211](https://github.com/kstepien3/ng-zen/issues/211)) ([a0fb6f5](https://github.com/kstepien3/ng-zen/commit/a0fb6f576e1c47509ba2aed4cd4314dace894366))
-* **styles:** improve format of hls colors ([#207](https://github.com/kstepien3/ng-zen/issues/207)) ([354d698](https://github.com/kstepien3/ng-zen/commit/354d6989507ba86397268012f6a53002c2e02297))
-## [19.3.0-next.2](https://github.com/kstepien3/ng-zen/compare/v19.3.0-next.1...v19.3.0-next.2) (2025-06-11)
-### 🐛 Bug Fixes
-* **storybook/components:** format and documentation ([#211](https://github.com/kstepien3/ng-zen/issues/211)) ([a0fb6f5](https://github.com/kstepien3/ng-zen/commit/a0fb6f576e1c47509ba2aed4cd4314dace894366))
-* **styles:** improve format of hls colors ([#207](https://github.com/kstepien3/ng-zen/issues/207)) ([354d698](https://github.com/kstepien3/ng-zen/commit/354d6989507ba86397268012f6a53002c2e02297))
-### 📚 Documentation
-* **DEVELOPMENT:** add release information ([#209](https://github.com/kstepien3/ng-zen/issues/209)) ([f9aad1b](https://github.com/kstepien3/ng-zen/commit/f9aad1b8be3d7d633c41ad9cff4bf3c6b93ad0f4))
-* resolve a problem with missing documentation ([#208](https://github.com/kstepien3/ng-zen/issues/208)) ([85e7969](https://github.com/kstepien3/ng-zen/commit/85e7969c23b6b7bd2039e9cfdc336dc8da6edcc1))
-## [19.3.0-next.1](https://github.com/kstepien3/ng-zen/compare/v19.2.0...v19.3.0-next.1) (2025-06-10)
-### 🚀 New Features
-* **skeleton:** add component ([#205](https://github.com/kstepien3/ng-zen/issues/205)) ([fa21c9a](https://github.com/kstepien3/ng-zen/commit/fa21c9a440ce918d521c12cd9e9eec17cade60cd))
-## [19.2.0](https://github.com/kstepien3/ng-zen/compare/v19.1.0...v19.2.0) (2025-05-25)
-### 🚀 New Features
-* **button:** add css variables for styling ([#191](https://github.com/kstepien3/ng-zen/issues/191)) ([7278585](https://github.com/kstepien3/ng-zen/commit/7278585c642a01468c2ef85dc39f3e767287ccf7))
-* **button:** update selector to support is() pseudo-class ([#195](https://github.com/kstepien3/ng-zen/issues/195)) ([e85135e](https://github.com/kstepien3/ng-zen/commit/e85135ef45c7a38b5597624254c7b0adae6e4db4))
-* **divider:** add zen-divider component ([#186](https://github.com/kstepien3/ng-zen/issues/186)) ([c021773](https://github.com/kstepien3/ng-zen/commit/c0217732a99efd1a68d23ed5e44d8da9e5344fdb))
-### 🐛 Bug Fixes
-* **schematics/ng-add:** run other schematics after installation ([#177](https://github.com/kstepien3/ng-zen/issues/177)) ([5cb1be4](https://github.com/kstepien3/ng-zen/commit/5cb1be4ce4cbeb7e5341baf937db135c16caad18))
-### 📚 Documentation
-* **readme:** remove the "next" build npm badges ([#194](https://github.com/kstepien3/ng-zen/issues/194)) ([48740d3](https://github.com/kstepien3/ng-zen/commit/48740d3c9ff3f3619e6f56baba8b933ba31498b3))
-* **releaserc:** update release note generator config ([#196](https://github.com/kstepien3/ng-zen/issues/196)) ([ca37df3](https://github.com/kstepien3/ng-zen/commit/ca37df375bf566476ec16c4cf10121f0d59c5c70))
-# [19.2.0-next.3](https://github.com/kstepien3/ng-zen/compare/v19.2.0-next.2...v19.2.0-next.3) (2025-05-24)
-### Features
-* **button:** update selector to support is() pseudo-class ([#195](https://github.com/kstepien3/ng-zen/issues/195)) ([e85135e](https://github.com/kstepien3/ng-zen/commit/e85135ef45c7a38b5597624254c7b0adae6e4db4))
-## [19.2.0-next.2](https://github.com/kstepien3/ng-zen/compare/v19.2.0-next.1...v19.2.0-next.2) (2025-05-24)
-### 🚀 New Features
-* **button:** add css variables for styling ([#191](https://github.com/kstepien3/ng-zen/issues/191)) ([7278585](https://github.com/kstepien3/ng-zen/commit/7278585c642a01468c2ef85dc39f3e767287ccf7))
-### 🧹 Chore
-* **build:** update output directory and release configuration ([#190](https://github.com/kstepien3/ng-zen/issues/190)) ([bae868c](https://github.com/kstepien3/ng-zen/commit/bae868cf00481a685fc02ee73a34ab4b787e9e67))
-* **dependencies:** restore conventional-changelog-conventionalcommits ([#189](https://github.com/kstepien3/ng-zen/issues/189)) ([5afabcb](https://github.com/kstepien3/ng-zen/commit/5afabcb1050da49404ed89a83fee57af1872b729))
-## 19.2.0-next.1 (2025-05-23)
-* chore(dependencies): update dependencies (#187) ([7028a9e](https://github.com/kstepien3/ng-zen/commit/7028a9e)), closes [#187](https://github.com/kstepien3/ng-zen/issues/187)
-* chore(dependencies): update ngx-schematic-builder to v0.2.0 (#183) ([5ea0cea](https://github.com/kstepien3/ng-zen/commit/5ea0cea)), closes [#183](https://github.com/kstepien3/ng-zen/issues/183)
-* chore(workflow): update deploy workflow for tag-based triggering (#166) ([0fea522](https://github.com/kstepien3/ng-zen/commit/0fea522)), closes [#166](https://github.com/kstepien3/ng-zen/issues/166) [#165](https://github.com/kstepien3/ng-zen/issues/165)
-* chore(workflows): disable persist-credentials in release workflow (#188) ([b784e47](https://github.com/kstepien3/ng-zen/commit/b784e47)), closes [#188](https://github.com/kstepien3/ng-zen/issues/188)
-* feat(divider): add zen-divider component (#186) ([c021773](https://github.com/kstepien3/ng-zen/commit/c021773)), closes [#186](https://github.com/kstepien3/ng-zen/issues/186)
-* style(components): update outline styles (#184) ([5737a15](https://github.com/kstepien3/ng-zen/commit/5737a15)), closes [#184](https://github.com/kstepien3/ng-zen/issues/184)
-* fix(schematics/ng-add): run other schematics after installation (#177) ([5cb1be4](https://github.com/kstepien3/ng-zen/commit/5cb1be4)), closes [#177](https://github.com/kstepien3/ng-zen/issues/177)
-* ci(eslint): fix plugins and configure linting rules (#176) ([5e93a09](https://github.com/kstepien3/ng-zen/commit/5e93a09)), closes [#176](https://github.com/kstepien3/ng-zen/issues/176)
-* build(deps-dev): bump typescript from 5.7.3 to 5.8.3 (#154) ([3ebe49f](https://github.com/kstepien3/ng-zen/commit/3ebe49f)), closes [#154](https://github.com/kstepien3/ng-zen/issues/154)
-* build(ngx-schematic-builder): migrate the custom builder (#175) ([c7d19eb](https://github.com/kstepien3/ng-zen/commit/c7d19eb)), closes [#175](https://github.com/kstepien3/ng-zen/issues/175)
-* Merge remote-tracking branch 'origin/next' into develop ([f581d01](https://github.com/kstepien3/ng-zen/commit/f581d01))
-## [19.1.0](https://github.com/kstepien3/ng-zen/compare/v19.0.0...v19.1.0) (2025-04-27)
-### 🚀 New Features
-* **switch:** add missing css variables ([0481ac7](https://github.com/kstepien3/ng-zen/commit/0481ac7d735eba4ee47fbc6a69cdee643f5b9b4c))
-### 🏗️ Build Changes
-* **deps-dev:** bump @angular-devkit/architect from 0.1902.6 to 0.1902.9 ([#160](https://github.com/kstepien3/ng-zen/issues/160)) ([e8fa092](https://github.com/kstepien3/ng-zen/commit/e8fa092e8aefcd15f4fb5755e150b2834d359fb4))
-* **deps-dev:** bump angular-eslint from 19.0.2 to 19.3.0 ([#136](https://github.com/kstepien3/ng-zen/issues/136)) ([ccad1a9](https://github.com/kstepien3/ng-zen/commit/ccad1a903bbd8edf37571f764dded81ea5fe29aa))
-* **deps-dev:** bump eslint-plugin-storybook from 0.11.6 to 0.12.0 ([#137](https://github.com/kstepien3/ng-zen/issues/137)) ([e8d63f3](https://github.com/kstepien3/ng-zen/commit/e8d63f3ec9d7f0af1a4cb7e2ceb3ff2843af43ad))
-* **deps-dev:** bump typescript-eslint from 8.24.0 to 8.29.0 ([#135](https://github.com/kstepien3/ng-zen/issues/135)) ([89d371f](https://github.com/kstepien3/ng-zen/commit/89d371f73f711848c548c32e8c1d5201f80c3073))
-### 🧹 Chore
-* add conventional-changelog-conventionalcommits dependency ([c6d2342](https://github.com/kstepien3/ng-zen/commit/c6d23422c5866645b520f55dc3c10700fc268d06))
-* change version alpha -> next ([aa5482c](https://github.com/kstepien3/ng-zen/commit/aa5482cd504a89e60eae07f6a3ea343ca8886e57))
-* change version to v19.0.0-next.0 [skip ci] ([7ee3dbd](https://github.com/kstepien3/ng-zen/commit/7ee3dbd6d22a3d24c85fba0978c127f28c9248d4))
-* fix problems with release ([a54af7a](https://github.com/kstepien3/ng-zen/commit/a54af7aa33259bb904df707f8450b39a1f8e00c9))
-* **release:** 19.1.0-next.1 [skip ci] ([7ca3b5c](https://github.com/kstepien3/ng-zen/commit/7ca3b5c989121b41c95c261236b5c89409c83210))
-### 📚 Documentation
-* **readme.md:** update links in badges ([#146](https://github.com/kstepien3/ng-zen/issues/146)) ([667f71c](https://github.com/kstepien3/ng-zen/commit/667f71c3891764f12d7b025e4b0c7e9ea872d00b))
-* **README:** improve documentation ([#149](https://github.com/kstepien3/ng-zen/issues/149)) ([bbbfd4e](https://github.com/kstepien3/ng-zen/commit/bbbfd4e592907c6c544e9004d104842df5475fab))
-* **storybook:** load CHANGELOG.md ([#145](https://github.com/kstepien3/ng-zen/issues/145)) ([f7df739](https://github.com/kstepien3/ng-zen/commit/f7df739ba88d4ffc1a63dea6bdec2bb3112933d0))
-* update development information ([#148](https://github.com/kstepien3/ng-zen/issues/148)) ([981a998](https://github.com/kstepien3/ng-zen/commit/981a9981385d22d763fe63bfcf075970bec4495d))
-## [19.1.0-next.1](https://github.com/kstepien3/ng-zen/compare/v19.0.0...v19.1.0-next.1) (2025-04-06)
-### 🚀 New Features
-* **switch:** add missing css variables ([0481ac7](https://github.com/kstepien3/ng-zen/commit/0481ac7d735eba4ee47fbc6a69cdee643f5b9b4c))
-### 🧹 Chore
-* add conventional-changelog-conventionalcommits dependency ([c6d2342](https://github.com/kstepien3/ng-zen/commit/c6d23422c5866645b520f55dc3c10700fc268d06))
-* change version alpha -> next ([aa5482c](https://github.com/kstepien3/ng-zen/commit/aa5482cd504a89e60eae07f6a3ea343ca8886e57))
-* change version to v19.0.0-next.0 [skip ci] ([7ee3dbd](https://github.com/kstepien3/ng-zen/commit/7ee3dbd6d22a3d24c85fba0978c127f28c9248d4))
-* fix problems with release ([a54af7a](https://github.com/kstepien3/ng-zen/commit/a54af7aa33259bb904df707f8450b39a1f8e00c9))
+Development mode - changelog will be generated during build.

package/README.md CHANGED Viewed

@@ -22,7 +22,13 @@
       <img src="https://img.shields.io/badge/-Repository-181818?style=flat&logo=github&logoColor=white" alt="Repository" />
     </a>
     <a href="https://kstepien3.github.io/ng-zen/">
-      <img src="https://img.shields.io/badge/-Storybook%20Demo-FF4785?style=flat&logo=storybook&logoColor=white" alt="Storybook" />
+      <img src="https://img.shields.io/badge/-Storybook-FF4785?style=flat&logo=storybook&logoColor=white" alt="Storybook" />
+    </a>
+  </p>
+  <p>
+    <a href="https://deepwiki.com/kstepien3/ng-zen">
+      <img src="https://deepwiki.com/badge.svg" alt="DeepWiki" />
     </a>
   </p>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@ng-zen/cli",
-  "version": "21.2.0-next.1",
+  "version": "21.3.0-next.1",
   "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.",
   "license": "BSD-2-Clause",
   "private": false,
@@ -65,14 +65,11 @@
   },
   "schematics": "./schematics/collection.json",
   "packageManager": "pnpm@10.24.0",
-  "peerDependencies": {
-    "@angular/common": ">=20.0.0",
-    "@angular/core": ">=20.0.0"
-  },
+  "peerDependencies": {},
   "dependencies": {
-    "@angular-devkit/core": "^21.0.1",
-    "@angular-devkit/schematics": "^21.0.1",
-    "@angular/build": "21.0.1",
+    "@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/button/button.scss CHANGED Viewed

@@ -1,49 +1,185 @@
+@use 'sass:map';
 // Globals
-$transition-duration: var(--zen-transition-duration, 0.4s);
+$transition-duration: var(--zen-transition-duration, 0.2s);
 $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%);
+  --zen-button-neutral: var(--zen-neutral, hsl(30deg 5% 10%));
+  --zen-button-primary: var(--zen-primary, hsl(193deg 58% 34%));
+  --zen-button-success: var(--zen-success, hsl(142deg 38% 36%));
+  --zen-button-warning: var(--zen-warning, hsl(36deg 72% 46%));
+  --zen-button-danger: var(--zen-danger, hsl(348deg 52% 42%));
+  --zen-button-info: var(--zen-info, hsl(214deg 34% 46%));
 }
+$sizes: (
+  sm: (
+    padding: 0.35rem 0.625rem,
+    font-size: 0.75rem,
+    gap: 0.375rem,
+  ),
+  md: (
+    padding: 0.5rem 0.875rem,
+    font-size: 0.875rem,
+    gap: 0.5rem,
+  ),
+  lg: (
+    padding: 0.625rem 1rem,
+    font-size: 1rem,
+    gap: 0.5rem,
+  ),
+);
+$colors: (
+  primary: var(--zen-button-primary),
+  success: var(--zen-button-success),
+  warning: var(--zen-button-warning),
+  danger: var(--zen-button-danger),
+  info: var(--zen-button-info),
+);
+// Color mix percentages for filled variant states
+$filled-base-opacity: 8%;
+$filled-hover-opacity: 15%;
+$filled-active-opacity: 25%;
+// Ghost/Link variant opacity levels
+$ghost-hover-opacity: 10%;
+$ghost-active-opacity: 20%;
+// Outline variant opacity levels
+$outline-hover-opacity: 70%;
+$outline-active-bg-opacity: 20%;
+// Disabled state
+$disabled-opacity: 0.6;
+// Default state hover/active mixing ratios (oklch)
+$default-hover-mix: 85%;
+$default-active-mix: 75%;
 /* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
 :host {
-  padding: var(--zen-button-padding);
+  --zen-button-bg-color: var(--zen-button-neutral); // default
   background-color: var(--zen-button-bg-color);
-  color: var(--zen-button-color);
-  box-shadow: var(--zen-button-shadow);
-  display: inline-block;
-  font-size: 14px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
   font-weight: bold;
   text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
   cursor: pointer;
   border: none;
-  border-radius: 99999px;
-  transition-property: background-color, opacity;
-  transition-duration: $transition-duration;
-  transition-timing-function: ease;
-  text-decoration: none;
-  overflow: hidden;
-  position: relative;
+  border-radius: 0.625rem;
+  box-shadow: var(--zen-button-shadow);
+  transition:
+    background-color $transition-duration ease,
+    transform $transition-duration ease,
+    color $transition-duration ease,
+    border-color $transition-duration ease;
+  color: var(--zen-button-color, contrast-color(var(--zen-button-bg-color)));
 }
-/* Hover state */
 :host:hover {
-  background-color: var(--zen-button-bg-color-hover);
+  background-color: color-mix(in oklch, var(--zen-button-bg-color) $default-hover-mix, var(--zen-button-color, white));
+}
+:host:active {
+  background-color: color-mix(in oklch, var(--zen-button-bg-color) $default-active-mix, var(--zen-button-color, white));
+  transform: translateY(1px);
 }
-/* Focus state */
 :host:focus-visible {
   outline: $outline;
+  outline-offset: 2px;
 }
-/* Disabled state */
-:host[aria-disabled]:not([aria-disabled='false']),
-:host[disabled]:not([disabled='false']) {
+:host([disabled]) {
   cursor: not-allowed;
-  opacity: 0.6;
+  opacity: $disabled-opacity;
+  pointer-events: none;
+}
+// --- SIZES ---
+@each $name, $config in $sizes {
+  :host([data-size='#{$name}']) {
+    padding: map.get($config, padding);
+    font-size: map.get($config, font-size);
+    gap: map.get($config, gap);
+  }
+}
+// --- COLORS ---
+@each $name, $bg-color in $colors {
+  :host([data-color='#{$name}']) {
+    --zen-button-bg-color: #{$bg-color};
+  }
+}
+// --- VARIANTS ---
+/* Outline variant */
+:host([data-variant='outline']) {
+  background-color: transparent;
+  color: var(--zen-button-bg-color);
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--zen-button-bg-color);
+  box-shadow: none;
+  &:hover {
+    color: color-mix(in oklch, var(--zen-button-bg-color) $outline-hover-opacity, transparent);
+    border-color: color-mix(in oklch, var(--zen-button-bg-color) $outline-hover-opacity, transparent);
+  }
+  &:active {
+    background-color: color-mix(in oklch, var(--zen-button-bg-color) $outline-active-bg-opacity, transparent);
+  }
+}
+/* Filled variant */
+:host([data-variant='filled']) {
+  background-color: color-mix(in oklch, var(--zen-button-bg-color) $filled-base-opacity, transparent);
+  color: var(--zen-button-bg-color);
+  box-shadow: none;
+  &:hover {
+    background-color: color-mix(in oklch, var(--zen-button-bg-color) $filled-hover-opacity, transparent);
+  }
+  &:active {
+    background-color: color-mix(in oklch, var(--zen-button-bg-color) $filled-active-opacity, transparent);
+  }
+}
+/* Ghost and Link variants */
+:host([data-variant='ghost']),
+:host([data-variant='link']) {
+  background-color: transparent;
+  color: var(--zen-button-bg-color);
+  box-shadow: none;
+  &:hover {
+    background-color: color-mix(in oklch, var(--zen-button-bg-color) $ghost-hover-opacity, transparent);
+  }
+  &:active {
+    background-color: color-mix(in oklch, var(--zen-button-bg-color) $ghost-active-opacity, transparent);
+  }
+}
+/* Link variant only */
+:host([data-variant='link']) {
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+  text-decoration-thickness: 1px;
+  &:hover {
+    text-decoration-thickness: 2px;
+  }
 }

package/schematics/ui/files/button/button.spec.ts CHANGED Viewed

@@ -17,4 +17,73 @@ describe('ZenButton', () => {
     const component = fixture.componentInstance;
     expect(component).toBeTruthy();
   });
+  it('should have default size md', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-size')).toBe('md');
+  });
+  it('should have default color neutral', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-color')).toBe('neutral');
+  });
+  it('should have default variant solid', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-variant')).toBe('solid');
+  });
+  it('should apply size sm', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.componentRef.setInput('size', 'sm');
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-size')).toBe('sm');
+  });
+  it('should apply size lg', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.componentRef.setInput('size', 'lg');
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-size')).toBe('lg');
+  });
+  it('should apply color primary', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.componentRef.setInput('color', 'primary');
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-color')).toBe('primary');
+  });
+  it('should apply variant outline', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.componentRef.setInput('variant', 'outline');
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-variant')).toBe('outline');
+  });
+  it('should apply variant ghost', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.componentRef.setInput('variant', 'ghost');
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-variant')).toBe('ghost');
+  });
+  it('should apply variant link', () => {
+    const fixture = TestBed.createComponent(ZenButton);
+    fixture.componentRef.setInput('variant', 'link');
+    fixture.detectChanges();
+    const button = fixture.nativeElement as HTMLButtonElement;
+    expect(button.getAttribute('data-variant')).toBe('link');
+  });
 });

package/schematics/ui/files/button/button.stories.ts CHANGED Viewed

@@ -1,9 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/angular';
+import { FavouriteIcon } from '@hugeicons/core-free-icons';
+import { argsToTemplate, Meta, moduleMetadata, StoryObj } from '@storybook/angular';
+import { ZenIcon } from '../icon';
 import { ZenButton } from './button';
 interface StoryParams {
-  content: string;
+  color: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+  variant: 'solid' | 'filled' | 'outline' | 'ghost' | 'link';
   disabled: boolean;
 }
@@ -13,18 +16,23 @@ export default {
   title: 'Ui/Button',
   component: ZenButton,
   args: {
-    content: 'Test',
     disabled: false,
+    size: 'md',
+    color: 'neutral',
+    variant: 'solid',
   },
   argTypes: {
-    content: {
-      control: 'text',
-      table: {
-        category: 'story parameters',
-        type: {
-          summary: 'ng-content',
-        },
-      },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    color: {
+      control: 'select',
+      options: ['neutral', 'primary', 'success', 'warning', 'danger', 'info'],
+    },
+    variant: {
+      control: 'select',
+      options: ['solid', 'filled', 'outline', 'ghost', 'link'],
     },
     disabled: {
       control: 'boolean',
@@ -36,12 +44,110 @@ export default {
       },
     },
   },
-  render: ({ content, ...args }) => ({
+  render: ({ ...args }) => ({
     props: args,
-    template: `<button zen-btn ${args.disabled ? 'disabled' : ''}>${content}</button>`,
+    template: `<button zen-btn ${argsToTemplate(args)}>Button</button>`,
   }),
 } satisfies Meta<Options>;
 type Story = StoryObj<Options>;
 export const Default: Story = {};
+export const IconButton: Story = {
+  decorators: [moduleMetadata({ imports: [ZenIcon] })],
+  render: args => ({
+    props: { FavouriteIcon, ...args },
+    template: `<button zen-btn variant="ghost" ${argsToTemplate(args, { exclude: ['variant'] })}>
+    <zen-icon [icon]="FavouriteIcon" [size]="16" [strokeWidth]="3" />
+  </button>`,
+  }),
+};
+export const AllVariants: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; gap: 0.5rem">
+        <button zen-button variant="solid">Solid</button>
+        <button zen-button variant="filled">Filled</button>
+        <button zen-button variant="outline">Outline</button>
+        <button zen-button variant="ghost">Ghost</button>
+        <button zen-button variant="link">Link</button>
+      </div>
+    `,
+  }),
+};
+export const AllSizes: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; align-items: center; gap: 0.5rem">
+        <button zen-button size="sm">Small</button>
+        <button zen-button size="md">Medium</button>
+        <button zen-button size="lg">Large</button>
+      </div>
+    `,
+  }),
+};
+export const AllColorVariants: Story = {
+  render: () => ({
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
+        <!-- Default (No color attribute) -->
+        <div style="display: flex; gap: 0.5rem;">
+          <button zen-button variant="solid">Solid</button>
+          <button zen-button variant="filled">Filled</button>
+          <button zen-button variant="outline">Outline</button>
+          <button zen-button variant="ghost">Ghost</button>
+          <button zen-button variant="link">Link</button>
+        </div>
+        <!-- Primary -->
+        <div style="display: flex; gap: 0.5rem;">
+          <button zen-button color="primary" variant="solid">Solid</button>
+          <button zen-button color="primary" variant="filled">Filled</button>
+          <button zen-button color="primary" variant="outline">Outline</button>
+          <button zen-button color="primary" variant="ghost">Ghost</button>
+          <button zen-button color="primary" variant="link">Link</button>
+        </div>
+        <!-- Success -->
+        <div style="display: flex; gap: 0.5rem;">
+          <button zen-button color="success" variant="solid">Solid</button>
+          <button zen-button color="success" variant="filled">Filled</button>
+          <button zen-button color="success" variant="outline">Outline</button>
+          <button zen-button color="success" variant="ghost">Ghost</button>
+          <button zen-button color="success" variant="link">Link</button>
+        </div>
+        <!-- Warning -->
+        <div style="display: flex; gap: 0.5rem;">
+          <button zen-button color="warning" variant="solid">Solid</button>
+          <button zen-button color="warning" variant="filled">Filled</button>
+          <button zen-button color="warning" variant="outline">Outline</button>
+          <button zen-button color="warning" variant="ghost">Ghost</button>
+          <button zen-button color="warning" variant="link">Link</button>
+        </div>
+        <!-- Danger -->
+        <div style="display: flex; gap: 0.5rem;">
+          <button zen-button color="danger" variant="solid">Solid</button>
+          <button zen-button color="danger" variant="filled">Filled</button>
+          <button zen-button color="danger" variant="outline">Outline</button>
+          <button zen-button color="danger" variant="ghost">Ghost</button>
+          <button zen-button color="danger" variant="link">Link</button>
+        </div>
+        <!-- Info -->
+        <div style="display: flex; gap: 0.5rem;">
+          <button zen-button color="info" variant="solid">Solid</button>
+          <button zen-button color="info" variant="filled">Filled</button>
+          <button zen-button color="info" variant="outline">Outline</button>
+          <button zen-button color="info" variant="ghost">Ghost</button>
+          <button zen-button color="info" variant="link">Link</button>
+        </div>
+      </div>
+    `,
+  }),
+};

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

@@ -1,13 +1,15 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 /**
  * 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.
+ * the `zen-button` or `zen-btn` attribute.
  *
  * @example
+ * <button zen-button> ... </button>
  * <button zen-btn> ... </button>
+ * <a zen-button href="..."> ... </a>
  *
  * ### CSS Custom Properties
  *
@@ -15,11 +17,14 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
  *
  * ```css
  * :root {
- *   --zen-button-bg-color-hover: lightgrey;
- *   --zen-button-bg-color: grey;
- *   --zen-button-color: white;
- *   --zen-button-padding: 0.5rem 2rem;
+ *   --zen-button-radius: 0.625rem;
  *   --zen-button-shadow: 0 2px 4px hsl(0deg 0% 0% / 10%);
+ *   --zen-button-neutral: hsl(30deg 5% 10%);
+ *   --zen-button-primary: hsl(95deg 15% 50%);
+ *   --zen-button-success: hsl(105deg 20% 35%);
+ *   --zen-button-warning: hsl(40deg 45% 60%);
+ *   --zen-button-danger: hsl(5deg 50% 45%);
+ *   --zen-button-info: hsl(205deg 30% 40%);
  * }
  * ```
  *
@@ -35,5 +40,15 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   `,
   styleUrl: './button.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[attr.type]': '"button"',
+    '[attr.data-size]': 'size()',
+    '[attr.data-variant]': 'variant()',
+    '[attr.data-color]': 'color()',
+  },
 })
-export class ZenButton {}
+export class ZenButton {
+  readonly size = input<'sm' | 'md' | 'lg'>('md');
+  readonly color = input<'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info'>('neutral');
+  readonly variant = input<'solid' | 'outline' | 'filled' | 'ghost' | 'link'>('solid');
+}

package/schematics/ui/files/dialog/dialog.service.stories.ts CHANGED Viewed

@@ -66,9 +66,9 @@ See [GitHub](https://github.com/kstepien3/ng-zen), [MDN Dialog Element](https://
 @Component({
   template: `
     <p>{{ message() }}</p>
-    <div style="display: flex; gap: 0.5rem; margin-top: 1rem;">
+    <div style="display: flex; gap: 0.5rem; margin-top: 1rem; justify-content: end">
+      <button (click)="cancel()" color="danger" variant="filled" zen-btn>Cancel</button>
       <button (click)="confirmClick.emit('confirmed!')" zen-btn>Confirm</button>
-      <button (click)="cancel()" zen-btn>Cancel</button>
     </div>
   `,
   standalone: true,

package/schematics/ui/files/dialog/dialog.stories.ts CHANGED Viewed

@@ -56,7 +56,7 @@ export const Default: Story = {
       <dialog zen-dialog [(open)]="open" ${argsToTemplate(args)}>
         <p>This is the dialog content. You can put any content here.</p>
-        <button zen-btn (click)="open.set(false)">Close</button>
+        <button zen-btn (click)="open.set(false)" variant="filled" color="danger">Close</button>
       </dialog>
     `,
     };

package/schematics/ui/files/popover/host/popover-host.scss CHANGED Viewed

@@ -1,5 +1,11 @@
 :host {
   --zen-popover-offset: 0.5rem;
+  --zen-popover-bg: white;
+  --zen-popover-border: 1px solid #ccc;
+  --zen-popover-border-radius: 8px;
+  --zen-popover-padding: 0.5rem;
+  --zen-popover-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  --zen-popover-max-width: 300px;
 }
 /* stylelint-disable-next-line no-duplicate-selectors -- separate variables and styles */
@@ -8,12 +14,12 @@
   inset: auto;
   margin: var(--zen-popover-offset);
   width: max-content;
-  max-width: 300px;
-  background: white;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 0.5rem;
-  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+  max-width: var(--zen-popover-max-width);
+  background: var(--zen-popover-bg);
+  border: var(--zen-popover-border);
+  border-radius: var(--zen-popover-border-radius);
+  padding: var(--zen-popover-padding);
+  box-shadow: var(--zen-popover-shadow);
   overflow: visible;
   // Auto-reposition if the popover would overflow

package/schematics/ui/files/popover/index.ts CHANGED Viewed

	@@ -1 +1,2 @@
1 1	export * from './popover';
2	+ export * from './popover-positions.type';

package/schematics/ui/files/popover/popover.stories.ts CHANGED Viewed

@@ -43,7 +43,7 @@ const meta = {
       },
     },
     id: { control: 'text', table: { defaultValue: { summary: 'zen-popover-*X*' } } },
-    content: { name: 'zenPopover', control: 'text' },
+    content: { name: 'zenPopover', control: 'text', table: { defaultValue: { summary: '' } } },
   },
   args: {
     placement: 'top',
@@ -64,3 +64,20 @@ export const Default: Story = {
     `,
   }),
 };
+export const WithTemplate: Story = {
+  render: ({ placement, content }) => ({
+    template: `
+      <ng-template #popoverContent>
+        <i>${content}</i>
+      </ng-template>
+      <button zen-btn [zenPopover]="popoverContent" [zenPopoverPlacement]="'${placement}'">
+        Template
+      </button>
+    `,
+  }),
+  args: {
+    id: 'zen-popover-template-story',
+    placement: 'top',
+  },
+};

package/schematics/ui/files/popover/popover.ts CHANGED Viewed

@@ -14,6 +14,8 @@ import {
 import { ZenPopoverHost } from './host/popover-host';
 import { PopoverPlacement } from './popover-positions.type';
+type HostProperties = keyof ZenPopoverHost;
 /**
  * ZenPopover is a reusable popover directive built on the native Popover API.
  * It provides a consistent, themeable popover surface with CSS-based positioning,
@@ -21,25 +23,51 @@ import { PopoverPlacement } from './popover-positions.type';
  *
  * ### Limitations (arrow)
  * ZenPopover may use CSS fallback positioning (e.g. via `position-try-fallbacks`) to keep the
- * popover inside the viewport. Today CSS doesn’t provide a stable, cross-browser way to detect
- * which fallback placement was ultimately chosen, so an “arrow” implemented with `::before/::after`
- * can’t be reliably synchronized with the final placement without extra JavaScript.
+ * popover inside the viewport. Today CSS doesn't provide a stable, cross-browser way to detect
+ * which fallback placement was ultimately chosen, so an "arrow" implemented with `::before/::after`
+ * can't be reliably synchronized with the final placement without extra JavaScript.
  * A CSS-only solution becomes possible with Anchored Container Queries (e.g. `container-type: anchored`
  * and `@container anchored(fallback: ...)`) where supported.
  *
- * @see https://developer.chrome.com/blog/anchored-container-queries
+ * @see [Detect fallback positions with anchored container queries](https://developer.chrome.com/blog/anchored-container-queries)
+ *
+ * @example
+ *
+ * ```html
+ * <!-- String content -->
+ * <button [zenPopover]="'Hello World'" [zenPopoverPlacement]="'bottom'">
+ *   Trigger
+ * </button>
+ *
+ * <!-- TemplateRef content -->
+ * <button [zenPopover]="popoverContent" zenPopoverPlacement="right">
+ *   Trigger
+ * </button>
+ * <ng-template #popoverContent>
+ *   <div>Custom content</div>
+ * </ng-template>
+ * ```
  *
  * ### CSS Custom Properties
- * You can customize the popover using CSS custom properties (see component styles/docs).
+ *
+ * You can customize the component using CSS custom properties:
+ * ```css
+ * :root {
+ *   --zen-popover-offset: 0.5rem;
+ *   --zen-popover-bg: white;
+ *   --zen-popover-border: 1px solid #ccc;
+ *   --zen-popover-border-radius: 8px;
+ *   --zen-popover-padding: 0.5rem;
+ *   --zen-popover-shadow: 0 4px 12px rgb(0 0 0 / 15%);
+ *   --zen-popover-max-width: 300px;
+ * }
+ * ```
  *
  * @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)
  * @see [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
  */
-type HostProperties = keyof ZenPopoverHost;
 @Directive({
   selector: '[zenPopover]',
   standalone: true,