📦 refactor(card): synced with latest shadcn card implementation#375
Merged
Luizgomess merged 2 commits intomasterfrom Dec 17, 2025
Merged
📦 refactor(card): synced with latest shadcn card implementation#375Luizgomess merged 2 commits intomasterfrom
Luizgomess merged 2 commits intomasterfrom
Conversation
|
Warning Rate limit exceeded@mikij has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 7 minutes and 27 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (5)
Note
|
| Cohort / File(s) | Summary |
|---|---|
Card component libs/zard/src/lib/shared/components/card/card.component.ts |
Added inputs class, zFooterBorder, zHeaderBorder, zAction; output zActionClick; generated titleId/descriptionId; new data-slot structure; conditional header/description/footer rendering; host ARIA bindings; onClick() emitter; computed class merges. |
Card variants & export libs/zard/src/lib/shared/components/card/card.variants.ts, libs/zard/src/lib/shared/components/card/index.ts |
Simplified/respecified cardVariants, cardHeaderVariants, cardBodyVariants; removed exported variant types; added cardActionVariants, cardFooterVariants; introduced mergeClasses; re-exported variants from index.ts. |
Card tests libs/zard/src/lib/shared/components/card/card.component.spec.ts |
Migrated tests to @testing-library/angular (render/screen); added coverage for title/description rendering, template projection, action button behavior and keyboard access, border classes, footer projection, ARIA relationships, and event emission. |
Docs & demo libs/zard/src/lib/shared/components/card/doc/api.md, libs/zard/src/lib/shared/components/card/demo/default.ts |
API docs updated for new inputs/outputs and footer usage; demo updated layout, added zAction and (zActionClick) wiring and onActionClick() handler; adjusted imports/metadata. |
| App page & code-box templates Component page: apps/web/src/app/domain/pages/component/component.page.html, apps/web/src/app/domain/pages/component/component.page.ts Code box: apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html |
Page template: removed [title] on <z-content>, added [navigationConfig], [activeAnchor], (scrollSpyChange); Installation converted to ARIA tablist/panels; Examples adjusted layout. TS: import formatting only. Code-box: template reformatted, replaced single class binding with granular boolean class bindings and added ARIA attributes. |
Estimated code review effort
🎯 4 (Complex) | ⏱️ ~45 minutes
- Focus areas:
- public API surface: new inputs/outputs and re-export of variants
- CVA changes and removal of exported variant types (impact on consumers)
- ARIA id generation and host aria-labelledby/aria-describedby bindings
- Test migration correctness and accessibility assertions
- Demo/docs match implemented API
Possibly related PRs
- Cli registry #372 — touches
card.component.tsand related specs; likely overlaps in component/variant changes. - 🚧 chore: fixed two commit messages #357 — modifies same card files and variant typings; potential API/variant conflicts.
- ✨ feat: updating doc style and fixing import bugs #302 — updates app page and code-box templates; may overlap with template/markup edits.
Suggested reviewers
- srizzon
- Luizgomess
- ribeiromatheuss
Poem
✨ A card now sings with header, footer, and a cue,
ARIA IDs whisper where titles are due,
Variants trimmed, the footer finds its place,
Tests march on to keep each change in place,
Small tweaks, tidy grace. 🃏
Pre-merge checks and finishing touches
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Title check | ✅ Passed | The title clearly identifies the main change: refactoring the card component to sync with shadcn implementation, matching the extensive card component updates in the changeset. |
| Description check | ✅ Passed | The description covers all template sections: what was done, type of change marked, screenshots provided, issue linked, and partial checklist completion. Minor coverage gaps exist but core sections are present. |
| Linked Issues check | ✅ Passed | The PR implements all requirements from #310: standalone components, signal-based inputs (input/output), OnPush, CVA variants, ARIA attributes, minimal API, comprehensive tests, documentation (api.md updated), and updated demos. Code quality, DX, testing, documentation, file structure, and styling objectives are met. |
| Out of Scope Changes check | ✅ Passed | All changes align with the card component refactor scope: core card updates, variants, tests, documentation, demos, and configuration. Some file changes (ESLint, Prettier, component pages) are part of the necessary integration and sync with latest standards. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.
Comment @coderabbitai help to get the list of available commands and usage tips.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
libs/zard/src/lib/shared/components/card/demo/default.ts (1)
3-5: Consider using@/path alias for internal imports.Per project conventions, prefer the
@/path alias for imports mapping tolibs/zard/src/lib/*directories.-import { generateId } from '../../../utils/merge-classes'; -import { ZardButtonComponent } from '../../button/button.component'; -import { ZardCardComponent } from '../card.component'; +import { generateId } from '@/shared/utils/merge-classes'; +import { ZardButtonComponent } from '@/shared/components/button/button.component'; +import { ZardCardComponent } from '@/shared/components/card/card.component';Based on learnings, files under
libs/zard/src/lib/**/*.{ts,tsx,js}should prefer the@/path alias.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (6)
.prettierrcis excluded by none and included by noneapps/web/public/components/card/demo/default.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/components/card/doc/api.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/card.mdis excluded by!apps/web/public/**and included byapps/**eslint.config.mjsis excluded by none and included by nonepackages/cli/src/core/registry/registry-data.tsis excluded by!packages/**and included by none
📒 Files selected for processing (9)
apps/web/src/app/domain/pages/component/component.page.html(1 hunks)apps/web/src/app/domain/pages/component/component.page.ts(2 hunks)apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html(2 hunks)libs/zard/src/lib/shared/components/card/card.component.spec.ts(3 hunks)libs/zard/src/lib/shared/components/card/card.component.ts(1 hunks)libs/zard/src/lib/shared/components/card/card.variants.ts(1 hunks)libs/zard/src/lib/shared/components/card/demo/default.ts(2 hunks)libs/zard/src/lib/shared/components/card/doc/api.md(1 hunks)libs/zard/src/lib/shared/components/card/index.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
🧠 Learnings (41)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/card/doc/api.mdapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.variants.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Follow ARIA guidelines and use semantic HTML when building block components for accessibility compliance
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmlapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/card/index.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Implement CVA (Class Variance Authority) for typed variants in component variant files
Applied to files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/card.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
libs/zard/src/lib/shared/components/card/index.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/card/card.variants.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/card.variants.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Implement standalone Angular components with explicit imports rather than using module declarations
Applied to files:
libs/zard/src/lib/shared/components/card/index.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/card/index.tslibs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-10-31T10:03:18.563Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 299
File: libs/zard/src/lib/components/select/select.component.ts:34-38
Timestamp: 2025-10-31T10:03:18.563Z
Learning: In Angular 19+ (including Angular 20 used in this project), components are standalone by default. The `standalone: true` flag is redundant and should be omitted unless explicitly setting `standalone: false` to opt out.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Write co-located Jest tests using TestBed and ComponentFixture next to components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use Jest with `happy-dom/jest-environment` for testing Angular components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/domain/pages/component/component.page.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy for all Angular components
Applied to files:
apps/web/src/app/domain/pages/component/component.page.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/doc/{overview,api}.md : Write documentation in `overview.md` for use cases and basic examples, and `api.md` for complete API reference
Applied to files:
libs/zard/src/lib/shared/components/card/doc/api.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
libs/zard/src/lib/shared/components/card/doc/api.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
libs/zard/src/lib/shared/components/card/doc/api.mdapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/shared/components/card/card.variants.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/**/*.{css,ts} : Use CSS custom properties for design tokens and theming in the component library
Applied to files:
libs/zard/src/lib/shared/components/card/card.variants.ts
🔇 Additional comments (16)
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html (1)
3-5: Template formatting improvements approved.The multiline attribute formatting across lines 3–5, 24–29, 34–37, 43–46, and 53–56 improves readability and aligns with modern Angular style conventions. The semantic structure and all signal-based bindings (
activeTab(),activeTab.set()) remain intact and follow best practices. Once the[class]binding syntax is corrected, these changes will be ready.Also applies to: 24-29, 34-37, 43-46, 53-56
apps/web/src/app/domain/pages/component/component.page.ts (1)
23-31: LGTM! Clean formatting improvements.The multi-line imports array and spacing adjustment improve readability without affecting behavior. Component adheres to Angular best practices: standalone architecture,
inject()for DI, andsignal()for reactive state.Also applies to: 49-49
apps/web/src/app/domain/pages/component/component.page.html (1)
2-7: Strong refactor with explicit bindings and modern control flow.The template improvements are solid:
- Explicit
[navigationConfig]and[activeAnchor]bindings onz-contentimprove clarityscrollSpydirective with(scrollSpyChange)event provides proper reactivity- Modern
@ifand@forcontrol flow syntax used correctly- Class bindings follow Angular best practices with
[class.property]pattern- Consistent structure across overview, examples, and API sections
Also applies to: 8-21, 66-82, 84-87
libs/zard/src/lib/shared/components/card/doc/api.md (1)
5-20: LGTM! Documentation accurately reflects the updated API.The API table is clear and aligns with the component implementation. A couple of minor notes:
- Line 13: The footnote marker
¹onzHeaderBorderis helpful since it only applies when the header exists.- Line 19-20: The
card-footerselector guidance is a nice addition for content projection.libs/zard/src/lib/shared/components/card/index.ts (1)
1-2: LGTM! Good expansion of the public API surface.Re-exporting the variants allows consumers to leverage CVA patterns for custom styling while maintaining consistency with the card's design tokens.
libs/zard/src/lib/shared/components/card/demo/default.ts (1)
11-65: Nice demo showcasing the new card API!The demo effectively demonstrates:
zAction/zActionClickfor header actionscard-footercontent projection slot- Form field integration with proper label/input associations
This provides a clear, practical example for users adopting the updated card component.
libs/zard/src/lib/shared/components/card/card.component.spec.ts (4)
1-15: Solid migration to @testing-library/angular!The render-based approach with
screenqueries promotes testing from a user perspective. Default styling assertions cover the essential card variant classes.
130-149: Well-structured event emission test.Using
userEvent.setup()with async click provides realistic browser interaction testing. The mock verification pattern is clean and effective.
216-283: Excellent accessibility test coverage!The suite properly validates:
- Semantic
role="region"for the card container- Conditional
aria-labelledby/aria-describedbybased on title/description presence- ID correlation between ARIA attributes and labeled elements
- Native button element for keyboard accessibility
This ensures the card component meets ARIA accessibility standards.
181-214: Good coverage of footer slot behavior.Tests verify both content projection and default styling alignment with
cardFooterVariants.libs/zard/src/lib/shared/components/card/card.variants.ts (3)
1-5: Clean CVA implementation with proper design tokens!The
cardVariantscorrectly uses CSS custom properties (bg-card,text-card-foreground) for theming, aligning with the project's design token guidelines.
14-18: Well-structured granular variants.The separation into
cardActionVariants,cardBodyVariants, andcardFooterVariantsprovides excellent composability for the card structure.Note:
cardFooterVariantsuses the same[.border-t]:pt-6pattern - ensure this selector syntax is validated along with the header variant.
7-12: Correct the arbitrary selector syntax.The selector
[.border-b]:pb-6is invalid in Tailwind CSS v4. Arbitrary variants require the ampersand (&) as a substitute for the element that the class is being applied to. Use[&.border-b]:pb-6if the element has theborder-bclass, or[.border-b_&]:pb-6if.border-bis an ancestor.libs/zard/src/lib/shared/components/card/card.component.ts (3)
1-17: Imports look solid.Good use of signal APIs (
input,output,computed), proper@/path aliases per project conventions, and CVA variant imports. Clean setup.
72-80: Signal-based inputs and outputs are correctly implemented.Clean use of
input()with appropriate defaults,output<void>()for the action click, andClassValuetyping for the class input. Thez-prefixed naming convention is consistent.
84-96: Computed class bindings and click handler look good.Proper use of
mergeClasses()with CVA variants and conditional Tailwind classes for borders. TheonClick()handler cleanly emits the output signal.
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/web/public/components/card/demo/default.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/card.mdis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (4)
apps/web/src/app/domain/pages/component/component.page.html(1 hunks)apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html(2 hunks)libs/zard/src/lib/shared/components/card/card.component.ts(1 hunks)libs/zard/src/lib/shared/components/card/demo/default.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
🧠 Learnings (36)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmlapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling in block templates and ensure proper class syntax with responsive modifiers (e.g., `sm:`, `lg:`)
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmlapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Follow ARIA guidelines and use semantic HTML when building block components for accessibility compliance
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmlapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmlapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Always use the `protected` access modifier for component properties and methods that are accessed in templates (e.g., `protected readonly`, `protected onSubmit()`)
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/doc/{overview,api}.md : Write documentation in `overview.md` for use cases and basic examples, and `api.md` for complete API reference
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
🧬 Code graph analysis (2)
libs/zard/src/lib/shared/components/card/demo/default.ts (1)
libs/zard/src/lib/shared/components/card/card.component.ts (1)
Component(19-102)
libs/zard/src/lib/shared/components/card/card.component.ts (1)
libs/zard/src/lib/shared/components/card/card.variants.ts (4)
cardVariants(5-5)cardBodyVariants(16-16)cardFooterVariants(18-18)cardHeaderVariants(7-12)
🔇 Additional comments (18)
apps/web/src/app/domain/pages/component/component.page.html (5)
2-7: LGTM! Signal-based inputs properly used.The z-content wrapper correctly uses signal-based inputs and event binding patterns that align with ZardUI architecture standards.
8-21: Overview section structure is correct.The scrollSpyItem directive, markdown renderer, and code-box component bindings all follow proper Angular patterns.
91-107: Examples section correctly uses native control flow.The
@forloop withtrack $indexand z-code-box bindings follow Angular best practices.
109-112: Footer structure is correct.The scrollSpyItem directive and markdown renderer binding follow proper Angular patterns.
62-86: Consider usingmergeClassesto reduce template verbosity.The multiple
[class.xxx]bindings (7 per panel) work correctly but create template clutter. ThemergeClassesutility could consolidate these into a single computed expression for improved maintainability.Example approach in the component TypeScript:
protected readonly cliPanelClasses = computed(() => mergeClasses( 'transition-all duration-200 ease-in-out', this.activeTab() === 'cli' ? 'translate-x-0' : '-translate-x-full opacity-0 invisible h-0 overflow-hidden pointer-events-none' ) ); protected readonly manualPanelClasses = computed(() => mergeClasses( 'transition-all duration-200 ease-in-out', this.activeTab() === 'manual' ? 'translate-x-0' : 'translate-x-full opacity-0 invisible h-0 overflow-hidden pointer-events-none' ) );Then in the template:
<section role="tabpanel" id="cli-panel" [attr.aria-labelledby]="'cli-tab'" [class]="cliPanelClasses()" >Based on learnings,
mergeClasses()utility withclsxandtailwind-mergeresolves class conflicts in component styling.⛔ Skipped due to learnings
Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-25T18:54:01.560Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component stylingLearnt from: mikij Repo: zard-ui/zardui PR: 339 File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92 Timestamp: 2025-11-29T15:31:22.377Z Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CONTRIBUTING.md:0-0 Timestamp: 2025-11-25T18:54:22.692Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in componentsLearnt from: CR Repo: zard-ui/zardui PR: 0 File: CONTRIBUTING.md:0-0 Timestamp: 2025-11-25T18:54:22.692Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in componentsLearnt from: CR Repo: zard-ui/zardui PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-25T18:54:01.560Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-25T18:54:01.560Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`Learnt from: CR Repo: zard-ui/zardui PR: 0 File: libs/blocks/README.md:0-0 Timestamp: 2025-11-25T18:54:50.383Z Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling in block templates and ensure proper class syntax with responsive modifiers (e.g., `sm:`, `lg:`)Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CLAUDE.md:0-0 Timestamp: 2025-11-25T18:54:01.560Z Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in componentsLearnt from: mikij Repo: zard-ui/zardui PR: 326 File: libs/zard/src/lib/components/input/float.label.component.ts:71-0 Timestamp: 2025-11-14T22:52:09.135Z Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).Learnt from: CR Repo: zard-ui/zardui PR: 0 File: CONTRIBUTING.md:0-0 Timestamp: 2025-11-25T18:54:22.692Z Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approachlibs/zard/src/lib/shared/components/card/demo/default.ts (5)
3-5: LGTM! Import paths follow project conventions.The imports correctly use the
@/path alias as preferred for this codebase.
15-16: LGTM! Action API usage is correct.The demo properly showcases the new
zActioninput andzActionClickoutput from the card component.
52-55: LGTM! Footer structure demonstrates content projection correctly.The footer block properly uses the
card-footerattribute selector and showcases button variants effectively.
63-65: LGTM! Action handler is appropriate for demo purposes.The placeholder implementation with
alert()is suitable for demonstrating the action callback behavior.
12-12: Use valid Tailwind width utility.The class
w-94is not part of the standard TailwindCSS spacing scale. Replace withw-96or define a custom width utility in your Tailwind configuration if94(23.5rem) is intentional.⛔ Skipped due to learnings
Learnt from: CR Repo: zard-ui/zardui PR: 0 File: libs/blocks/README.md:0-0 Timestamp: 2025-11-25T18:54:50.383Z Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling in block templates and ensure proper class syntax with responsive modifiers (e.g., `sm:`, `lg:`)Learnt from: mikij Repo: zard-ui/zardui PR: 311 File: libs/zard/src/lib/components/carousel/carousel.variants.ts:28-56 Timestamp: 2025-11-07T08:49:00.973Z Learning: In Tailwind CSS v4, fractional spacing values like `pt-4.5` (1.125rem) and `-left-12.5` (3.125rem) are valid canonical classes supported by default, unlike Tailwind v3 which had a more restricted spacing scale. These should be used instead of arbitrary bracket notation like `pt-[1.125rem]`.Learnt from: mikij Repo: zard-ui/zardui PR: 339 File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92 Timestamp: 2025-11-29T15:31:22.377Z Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.libs/zard/src/lib/shared/components/card/card.component.ts (8)
6-6: LGTM! Imports follow project conventions.All imports correctly use the
@/path alias and include the necessary dependencies for the refactored component.Also applies to: 13-13, 15-15, 17-17
23-51: LGTM! Header template uses modern Angular patterns correctly.The implementation properly uses native control flow (
@if,@let), handles both string andTemplateRefinputs via*zStringTemplateOutlet, and implements stable accessibility IDs. The grid positioning for the action button is appropriate for the layout.
53-59: LGTM! Content projection slots are well-structured.The body and footer sections use appropriate content projection with
data-slotattributes for styling hooks and CSS-based empty state handling.
61-65: LGTM! Empty footer handling resolves previous concern.The CSS rule elegantly hides the footer when no content is projected, addressing the past review feedback without adding template complexity.
69-72: LGTM! Host bindings follow best practices.The implementation correctly uses the
hostproperty (per project conventions), conditionally applies ARIA attributes only when content is present, and avoids the unnamed region issue from previous feedback.
77-84: LGTM! Public API uses signal-based patterns correctly.All inputs use the
input()function and output usesoutput(), following Angular best practices. The API is well-typed withClassValueandTemplateRefunions for flexibility.
86-87: LGTM! ID generation implements recommended pattern.IDs are now generated once during initialization (not inside
computed()), ensuring stable ARIA references throughout the component's lifetime. This implements the fix discussed in previous review feedback.
89-101: LGTM! Computed properties and event handler follow best practices.The implementation correctly uses
computed()for reactive class calculations andmergeClasses()for conflict resolution. Conditional border classes are cleanly integrated, and theonClick()method properly emits the output event.
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
apps/web/src/app/domain/pages/component/component.page.html (1)
28-87: Complete ARIA tab-panel associations.The tab buttons are missing
idattributes that the panels reference viaaria-labelledby, and the manual panel is missing itsaria-labelledbyattribute entirely. Screen readers cannot properly associate tabs with their panels.Apply this diff to fix the broken ARIA references:
@if (installGuide?.cli) { <button + id="cli-tab" role="tab" [attr.aria-selected]="activeTab() === 'cli'" [attr.aria-controls]="'cli-panel'" [attr.tabindex]="activeTab() === 'cli' ? 0 : -1" class="cursor-pointer text-base" (click)="activeTab.set('cli')" [class.font-semibold]="activeTab() === 'cli'" [class.text-foreground]="activeTab() === 'cli'" > CLI </button> } @if (installGuide?.manual) { <button + id="manual-tab" role="tab" [attr.aria-selected]="activeTab() === 'manual'" [attr.aria-controls]="'manual-panel'" [attr.tabindex]="activeTab() === 'manual' ? 0 : -1" class="cursor-pointer text-base" (click)="activeTab.set('manual')" [class.font-semibold]="activeTab() === 'manual'" [class.text-foreground]="activeTab() === 'manual'" > Manual </button> } </nav> <section role="tabpanel" id="cli-panel" [attr.aria-labelledby]="'cli-tab'" class="transition-all duration-200 ease-in-out" [class.translate-x-0]="activeTab() === 'cli'" [class.-translate-x-full]="activeTab() !== 'cli'" [class.opacity-0]="activeTab() !== 'cli'" [class.invisible]="activeTab() !== 'cli'" [class.h-0]="activeTab() !== 'cli'" [class.overflow-hidden]="activeTab() !== 'cli'" [class.pointer-events-none]="activeTab() !== 'cli'" > <z-steps [steps]="installGuide?.cli"></z-steps> </section> <section role="tabpanel" id="manual-panel" + [attr.aria-labelledby]="'manual-tab'" class="transition-all duration-200 ease-in-out" [class.translate-x-0]="activeTab() === 'manual'" [class.translate-x-full]="activeTab() !== 'manual'" [class.opacity-0]="activeTab() !== 'manual'" [class.invisible]="activeTab() !== 'manual'" [class.h-0]="activeTab() !== 'manual'" [class.overflow-hidden]="activeTab() !== 'manual'" [class.pointer-events-none]="activeTab() !== 'manual'" > <z-steps [steps]="installGuide?.manual"></z-steps> </section>apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html (1)
34-34: Class binding syntax corrected from array to string.The previous critical issue has been resolved. Both tab sections now correctly use space-separated string classes instead of array syntax.
However, the
sr-onlyutility on inactive tab sections may still cause screen readers to announce hidden content. Consider usingaria-hiddenorhiddenclass instead for truly inaccessible inactive sections.Also applies to: 50-50
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/web/public/components/card/demo/default.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/card.mdis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (5)
apps/web/src/app/domain/pages/component/component.page.html(1 hunks)apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html(2 hunks)libs/zard/src/lib/shared/components/card/card.component.spec.ts(3 hunks)libs/zard/src/lib/shared/components/card/card.component.ts(1 hunks)libs/zard/src/lib/shared/components/card/demo/default.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
🧠 Learnings (43)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Write co-located Jest tests using TestBed and ComponentFixture next to components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use Jest with `happy-dom/jest-environment` for testing Angular components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/doc/{overview,api}.md : Write documentation in `overview.md` for use cases and basic examples, and `api.md` for complete API reference
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Follow ARIA guidelines and use semantic HTML when building block components for accessibility compliance
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Always use the `protected` access modifier for component properties and methods that are accessed in templates (e.g., `protected readonly`, `protected onSubmit()`)
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling in block templates and ensure proper class syntax with responsive modifiers (e.g., `sm:`, `lg:`)
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-13T18:05:35.468Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 324
File: libs/zard/src/lib/components/breadcrumb/breadcrumb.component.ts:34-60
Timestamp: 2025-11-13T18:05:35.468Z
Learning: In breadcrumb item components using RouterLink hostDirectives for host navigation, inject the RouterLink directive and use its `href` property for anchor elements to display URLs on hover, avoiding naming collisions between hostDirective inputs and component inputs.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.tslibs/zard/src/lib/shared/components/card/demo/default.ts
🔇 Additional comments (17)
apps/web/src/app/domain/pages/component/component.page.html (1)
1-21: LGTM! Clean Angular patterns.The overview, examples, and footer sections use native control flow (
@if,@for), signal-based bindings, and proper Angular class syntax. The scroll spy integration and component structure follow best practices.Also applies to: 91-112
libs/zard/src/lib/shared/components/card/demo/default.ts (3)
3-5: Imports correctly use @/ path aliases.The updated imports align with project conventions for path aliasing. Based on learnings, the
@/prefix mapping tolibs/zard/src/lib/*is the preferred pattern.
15-16: Demo effectively showcases new Card API features.The demo demonstrates the new
zActioninput with its correspondingzActionClickoutput, plus thecard-footercontent projection slot. This provides a clear example of the extended Card component capabilities.Also applies to: 52-55, 63-65
12-12: Removew-94validation concern—Tailwind CSS v4 supports dynamic spacing utilities.In Tailwind CSS v4, spacing utilities like
w-*are dynamically derived from the spacing scale and accept arbitrary numeric values out of the box, unlike the more restricted v3 scale. The classw-94is valid and requires no custom configuration.Likely an incorrect or invalid review comment.
libs/zard/src/lib/shared/components/card/card.component.ts (6)
13-17: Imports follow project conventions with @/ path aliases and local variant imports.Correct use of
@/prefix for shared utilities and components, with CVA variants imported locally.
23-51: Template uses modern Angular control flow with proper conditional rendering.Excellent use of
@letfor local variable extraction and@ifblocks for conditional rendering. The header only renders whenzTitleis present, and description/action are nested appropriately.
57-64: Footer implementation with CSS-based empty hiding.The
:emptypseudo-selector approach cleanly hides the footer when no content is projected, avoiding unnecessary DOM manipulation. This addresses a previous review suggestion.
68-73: Host bindings correctly configured without @HostBinding decorators.The
hostproperty approach is the preferred pattern per project conventions. The conditional ARIA attributes properly link to title/description elements only when those inputs are provided.
77-87: Signal-based inputs and stable ID generation.All inputs correctly use the
input()function. ThetitleIdanddescriptionIdare now generated once at construction time, ensuring stable ARIA relationships throughout the component lifecycle. This properly addresses the previous review feedback about unstable IDs in computed properties.
89-101: Computed classes follow CVA patterns with mergeClasses utility.The
computed()properties correctly merge CVA variants with conditional border classes. TheonClickmethod properly emits thezActionClickoutput.apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html (1)
40-43: Template formatting improvements.Multi-line formatting for the
<z-card>element improves readability without changing functionality.libs/zard/src/lib/shared/components/card/card.component.spec.ts (6)
1-6: Test migration to @testing-library/angular.The switch to Testing Library promotes accessibility-first testing practices with
screenqueries that mirror how users interact with components. Good modernization choice.
9-24: Core styling tests validate CVA variant application.Tests confirm default Card classes from
cardVariantsare applied and custom classes merge correctly viamergeClasses.
26-61: Title and description rendering tests cover key scenarios.Good coverage including:
- Title presence triggers header rendering
- Header absent when no title
- Description renders only when title also present (nested dependency)
The edge case at lines 55-61 correctly validates that description alone doesn't render—this matches the template logic where description is nested inside the title conditional block.
70-116: Content projection and TemplateRef tests.Tests validate both string content projection and
TemplateRefinputs for title/description, ensuring theZardStringTemplateOutletDirectiveworks correctly.
118-158: Action button tests cover rendering, events, and absence.Complete coverage of
zActionfunctionality:
- Button renders when input provided
zActionClickemits on click- No button when
zActionis empty
160-214: Border and footer tests validate conditional styling.Tests confirm:
zHeaderBorderaddsborder-bclasszFooterBorderaddsborder-tclass- Footer content projection works with
card-footerattribute- Footer has expected default classes from
cardFooterVariants
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html (1)
14-32: Consider adding full ARIA tabs pattern for consistency.The visibility control with
aria-hiddenis good. However, this tab interface lacks the full ARIA pattern implemented incomponent.page.html:
- No
role="tablist"on<nav>- No
role="tab",aria-selected,aria-controls,tabindexon buttons- No
role="tabpanel"oraria-labelledbyon sectionsFor users relying on assistive technologies, this creates an inconsistent experience across the application.
- <nav class="mb-4 flex gap-4"> + <nav class="mb-4 flex gap-4" role="tablist" aria-label="Demo view"> <button + id="preview-tab" + role="tab" + [attr.aria-selected]="activeTab() === 'preview'" + [attr.aria-controls]="'preview-panel'" + [attr.tabindex]="activeTab() === 'preview' ? 0 : -1" class="cursor-pointer text-base" (click)="activeTab.set('preview')" [class.font-semibold]="activeTab() === 'preview'" [class.text-foreground]="activeTab() === 'preview'" > Preview </button> @if (!onlyDemo()) { <button + id="code-tab" + role="tab" + [attr.aria-selected]="activeTab() === 'code'" + [attr.aria-controls]="'code-panel'" + [attr.tabindex]="activeTab() === 'code' ? 0 : -1" class="cursor-pointer text-base"
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (2)
apps/web/public/components/card/demo/default.mdis excluded by!apps/web/public/**and included byapps/**apps/web/public/installation/manual/card.mdis excluded by!apps/web/public/**and included byapps/**
📒 Files selected for processing (5)
apps/web/src/app/domain/pages/component/component.page.html(1 hunks)apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html(2 hunks)libs/zard/src/lib/shared/components/card/card.component.spec.ts(3 hunks)libs/zard/src/lib/shared/components/card/card.component.ts(1 hunks)libs/zard/src/lib/shared/components/card/demo/default.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
libs/zard/**/*.{css,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
Use CSS custom properties for design tokens and theming in the component library
Files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Use
@zard/*path aliases for imports mapping tolibs/zard/src/lib/*directories
Files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.ts
🧠 Learnings (42)
📓 Common learnings
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use TailwindCSS v4 with PostCSS for component styling and utility-first approach
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/*.ts : Create component demo files with `name`, `code`, and `component` properties following existing patterns
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/demo/**/*.ts : Export demo and documentation components with proper naming for automatic site generation
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/demo/**/*.ts : Create demo components in the `demo/` folder with a main export, default example, and variant examples
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Angular standalone components as the base template for component architecture
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Add new components to barrel export in `libs/zard/src/lib/components/components.ts`
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-30T13:27:41.206Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/popover/popover.component.ts:28-29
Timestamp: 2025-11-30T13:27:41.206Z
Learning: In libs/zard/src/lib/components/core/**/*.ts files (core utilities, plugins, and providers), use relative imports for intra-core dependencies because the ZardUI CLI performs path transformations during component installation. The CLI expects specific relative path patterns and transforms them to the target project structure. For all other component imports and application code, use zard/* path aliases.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/components.ts : Export all components in `libs/zard/src/lib/components/components.ts` for public API
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-14T22:52:09.135Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 326
File: libs/zard/src/lib/components/input/float.label.component.ts:71-0
Timestamp: 2025-11-14T22:52:09.135Z
Learning: In libs/zard/src/lib/components/*/*.component.ts files, move HostListener and HostBinding to the Component decorator's host property instead of using decorators on class members (e.g., host: { '(input)': 'onInput()' }).
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use signal-based inputs (`input()`) for Angular component inputs in the ZardUI library
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Create components as standalone components with `standalone: true` in Angular
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-10T21:46:33.213Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 318
File: libs/zard/src/lib/components/select/demo/default.ts:21-21
Timestamp: 2025-11-10T21:46:33.213Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, intentionally showing different patterns (e.g., primitive values vs signals) across different demos is valuable for demonstrating the flexibility of Angular features like two-way binding.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses` utility with `tailwind-merge` to resolve class conflicts in components
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tsapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use `mergeClasses()` utility with `clsx` and `tailwind-merge` to resolve class conflicts in component styling
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or require removing standalone: true for test components (*.spec.ts) and demo components (demo/*.ts) within libs/zard/src/lib/shared/components/**.ts. In these contexts, an explicit standalone: true flag is acceptable; apply this exclusion when reviewing files under this path.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-12-15T11:43:06.831Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 373
File: libs/zard/src/lib/shared/components/select/select.component.ts:33-33
Timestamp: 2025-12-15T11:43:06.831Z
Learning: In files under libs/zard/src/lib/**/*.{ts,tsx,js}, prefer the @/ path alias for imports that map to libs/zard/src/lib/* directories. For example, write import { mergeClasses } from '@/shared/utils/merge-classes' instead of using the 'zard/' alias. This improves path readability and aligns with the project's alias configuration.
Applied to files:
libs/zard/src/lib/shared/components/card/demo/default.tslibs/zard/src/lib/shared/components/card/card.component.spec.tslibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Use Angular TestBed and ComponentFixture utilities for testing components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Write co-located Jest tests using TestBed and ComponentFixture next to components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.spec.ts : Co-locate test files with components using `.spec.ts` suffix next to component files
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-26T11:20:45.264Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/select/select.component.spec.ts:79-88
Timestamp: 2025-11-26T11:20:45.264Z
Learning: In ZardUI select component tests (libs/zard/src/lib/components/select/select.component.spec.ts), use fakeAsync() with flush() instead of setTimeout because the component uses setTimeout(..., 0) for focus management, which requires advancing macrotasks in tests.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use OnPush change detection strategy in Angular components: `changeDetection: ChangeDetectionStrategy.OnPush`
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-12-04T15:03:56.958Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 361
File: libs/zard/src/lib/components/pagination/demo/custom.ts:19-22
Timestamp: 2025-12-04T15:03:56.958Z
Learning: In pagination demos under libs/zard/src/lib/components/pagination/demo/*.ts, the pattern `<span class="sr-only">To page</span>{{ page }}` is correct for accessible button labels. Screen readers read both the sr-only text and the visible page number together, while visual users see only the page number. This approach is intentional and should not be flagged.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Follow ARIA guidelines and use semantic HTML when building block components for accessibility compliance
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding for dynamic classes in components: `host: { '[class]': 'classes()' }`
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use host binding with `[class]` for dynamic class application in components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.tsapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Use Jest with `happy-dom/jest-environment` for testing Angular components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.spec.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/doc/**/*.md : Write component documentation in `doc/overview.md` and `doc/api.md` files
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:22.692Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T18:54:22.692Z
Learning: Applies to libs/zard/src/lib/components/*/doc/{overview,api}.md : Write documentation in `overview.md` for use cases and basic examples, and `api.md` for complete API reference
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-30T08:50:23.436Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/core/providezard.ts:0-0
Timestamp: 2025-11-30T08:50:23.436Z
Learning: In libs/zard/src/lib/components/core/providezard.ts, the import paths `../core/event-manager-plugins/...` are intentionally structured this way because the ZardUI CLI transforms them to 'shared/components/core/event-manager-plugins/...' format. Other relative path combinations don't work with the current CLI implementation. This path pattern should not be simplified until the CLI transformation logic is updated.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-26T10:13:44.258Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 348
File: libs/zard/src/lib/components/layout/sidebar.component.ts:22-22
Timestamp: 2025-11-26T10:13:44.258Z
Learning: The ZardUI CLI will automatically add `provideZard()` to the app configuration and install the core component before the next CLI release, addressing the breaking change requirement for the event manager plugins.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-29T15:31:22.377Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 339
File: libs/zard/src/lib/components/carousel/carousel.component.ts:92-92
Timestamp: 2025-11-29T15:31:22.377Z
Learning: In libs/zard/src/lib/components/**/*.component.ts files using TailwindCSS, avoid suggesting individual class bindings like `[class.fill-primary]="condition"` because they can cause TailwindCSS issues. Prefer string concatenation or `[class]` binding with conditional expressions instead.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use TailwindCSS utility classes for styling in block templates and ensure proper class syntax with responsive modifiers (e.g., `sm:`, `lg:`)
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.ts : Always use the `protected` access modifier for component properties and methods that are accessed in templates (e.g., `protected readonly`, `protected onSubmit()`)
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-30T19:07:11.572Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 352
File: apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts:23-27
Timestamp: 2025-11-30T19:07:11.572Z
Learning: In apps/web/src/app/domain/components/sidebar/scroll-on-active.directive.ts, the guard checking if scrollIntoView exists before calling it is necessary due to mobile browser compatibility issues. Physical testing on mobile devices shows scrollIntoView may not be present or functional. This defensive pattern should be kept despite scrollIntoView being part of the standard DOM API.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.htmlapps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-04T10:18:55.477Z
Learnt from: mihajm
Repo: zard-ui/zardui PR: 308
File: libs/zard/src/lib/components/button-group/doc/overview.md:1-3
Timestamp: 2025-11-04T10:18:55.477Z
Learning: In zardui repo, doc/overview.md files for components should contain only a brief overview description. Examples are provided through separate demo files and the api.md documentation, not in overview.md.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-04T20:46:01.373Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 309
File: libs/zard/src/lib/components/select/demo/multi-select.ts:23-27
Timestamp: 2025-11-04T20:46:01.373Z
Learning: In demo files under libs/zard/src/lib/components/**/demo/*.ts, console.log statements are acceptable and often intentional to demonstrate reactivity and help users understand how the component works.
Applied to files:
apps/web/src/app/domain/pages/component/component.page.html
📚 Learning: 2025-11-25T18:54:50.383Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: libs/blocks/README.md:0-0
Timestamp: 2025-11-25T18:54:50.383Z
Learning: Applies to libs/blocks/src/lib/**/*.component.html : Use ZardUI form components (`ZardFormFieldComponent`, `ZardFormLabelComponent`, `ZardFormControlComponent`) for proper validation and error handling in templates
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use computed properties in Angular components for reactive class calculations: `protected readonly classes = computed(() => ...)`
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.htmllibs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-12-13T11:50:50.088Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 372
File: libs/zard/src/lib/shared/components/card/card.component.spec.ts:86-88
Timestamp: 2025-12-13T11:50:50.088Z
Learning: Do not flag or suggest removing `standalone: true` from test components (*.spec.ts files) or demo components (demo/*.ts files) in libs/zard/src/lib/shared/components/**/*.ts, as it is not a significant concern and the explicit flag is acceptable in these contexts.
Applied to files:
apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.component.ts : Use Signal-based inputs with the `input()` function instead of Input decorators in Angular components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-15T21:22:05.244Z
Learnt from: mikij
Repo: zard-ui/zardui PR: 328
File: libs/zard/src/lib/components/select/demo/multi-select.ts:1-1
Timestamp: 2025-11-15T21:22:05.244Z
Learning: In Angular components that use model() for inputs (like zValue in ZardSelectComponent), two-way binding with WritableSignals is fully supported. The pattern [(zValue)]="selectedValues" where selectedValues = signal<string[]>([]) works correctly because model() automatically handles unwrapping and updating the signal.
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
📚 Learning: 2025-11-25T18:54:01.560Z
Learnt from: CR
Repo: zard-ui/zardui PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-25T18:54:01.560Z
Learning: Applies to libs/zard/src/lib/components/**/*.variants.ts : Use CVA (Class Variance Authority) for type-safe styling variants in components
Applied to files:
libs/zard/src/lib/shared/components/card/card.component.ts
🧬 Code graph analysis (1)
libs/zard/src/lib/shared/components/card/card.component.spec.ts (2)
libs/zard/src/lib/shared/components/card/card.component.ts (1)
Component(19-102)libs/zard/src/lib/shared/components/card/demo/default.ts (1)
Component(7-66)
🔇 Additional comments (17)
apps/web/src/app/domain/pages/component/component.page.html (2)
28-90: Solid ARIA tab implementation—previous issues resolved.The tabbed interface now correctly implements the ARIA tabs pattern:
- Tab buttons have
id,role="tab",aria-selected,aria-controls, andtabindexattributes- Tab panels have
role="tabpanel",id, andaria-labelledbylinking back to their controlling tabs- Visibility controlled via multiple class bindings (
invisible,opacity-0,h-0,pointer-events-none)The previous review comments about missing IDs and
aria-labelledbyon the manual panel have been addressed.
94-109: Clean examples section with proper tracking.Good use of
track $indexin the@forloop and consistent attribute bindings across thez-code-boxcomponents.apps/web/src/app/widget/components/zard-code-box/zard-code-box.component.html (2)
34-43: Visibility handling improved witharia-hidden.Good fix! Using
[attr.aria-hidden]properly hides inactive content from assistive technologies, addressing the previous review concern about misusingsr-onlyfor visual animation purposes.
59-68: Consistent visibility pattern across both sections.The code section mirrors the preview section's visibility approach with proper
aria-hiddenbinding.libs/zard/src/lib/shared/components/card/demo/default.ts (3)
3-5: Correct use of@/path aliases.Import paths properly use the
@/shared/...alias pattern per project conventions.
11-16: Demo effectively showcases new card API.Good demonstration of the new
zActioninput and(zActionClick)output. The pattern shows how to add a header action button with click handling.
52-55: Clean footer content projection pattern.The
card-footerattribute selector pattern is intuitive and aligns with Angular's content projection conventions.libs/zard/src/lib/shared/components/card/card.component.spec.ts (4)
1-6: Clean migration to@testing-library/angular.Good adoption of testing-library patterns with
render,screen, anduserEvent. This aligns with modern Angular testing best practices for user-centric testing.
130-149: Thorough action click event testing.Properly uses
userEvent.setup()and a test host component to verify thezActionClickoutput emission. The mock function assertion confirms the event is emitted exactly once.
216-276: Comprehensive accessibility test coverage.Excellent ARIA attribute testing:
- Validates
aria-labelledbypresence/absence based on title- Validates
aria-describedbypresence/absence based on description- Confirms ID linkage between ARIA attributes and corresponding elements
- Verifies action button is a native
<button>element for keyboard accessibility
55-61: Good edge case: description without title.This test correctly validates the component's behavior where description is only rendered when a title is also present—matching the template's nested
@ifstructure.libs/zard/src/lib/shared/components/card/card.component.ts (6)
1-17: Exemplary Angular component setup.All imports use the correct
@/path alias. Signal-basedinput()andoutput()functions replace decorators. Clean separation of concerns with CVA variants imported from a dedicated file.
68-73: Well-structured host bindings.Proper use of the
hostproperty for dynamic bindings per project conventions:
data-slotfor styling hooks[class]binding to computed classes- Conditional ARIA attributes (
aria-labelledby,aria-describedby) that only apply when title/description existThe removal of
role="region"addresses the previous review concern about unnamed landmarks.
86-87: Stable ID generation.IDs are now generated once at construction time rather than inside
computed(), ensuring they remain stable throughout the component's lifecycle. This properly addresses the previous review discussion about ARIA ID stability.
37-49: Action button requires title to be visible.The action button is nested inside the
@if (title)block, meaningzActionhas no effect withoutzTitle. If this is intentional (actions are only valid in a card header), document this behavior. If independent actions should be supported, consider moving the action outside the title conditional.Is this intentional? The component's API allows setting
zActionwithoutzTitle, but the action won't render.
61-64: Smart CSS solution for empty footer.Using
:emptypseudo-selector withdisplay: noneelegantly handles the empty footer case without additional JavaScript logic.ViewEncapsulation.Noneis necessary here for the global selector to work.
89-97: Reactive class computation follows CVA patterns.Clean computed properties merge base variants with conditional border classes. This pattern maintains reactivity while keeping styling logic declarative.
Luizgomess
approved these changes
Dec 17, 2025
This was referenced Dec 21, 2025
8 tasks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What was done? 📝
Refactored the card component to sync with the latest shadcn card implementation. This update brings the component up to date with current shadcn/ui standards and best practices.
Changes Made
Core Component Updates
libs/zard/src/lib/shared/components/card/): Updated the main component implementation, variants, and test suite to align with latest shadcn patternsDocumentation & Demos
Application Integration
Configuration Updates
This refactor ensures the card component stays current with the latest shadcn/ui design system while maintaining backward compatibility and improving overall component quality.
Screenshots or GIFs 📸
Link to Issue 🔗
Closes #310
Type of change 🏗
Breaking change 🚨
API has been extended. Old behavior should require no changes.
Checklist 🧐
Summary by CodeRabbit
New Features
Accessibility
Tests
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.