📦 refactor(kbd): add keyboard group demo and button variant showcase

[mikij]

What was done? 📝

• Add button demo showcasing keyboard integration with tooltips
• Update kbd variants for improved styling and pointer handling
• Refactor demo structure to use shared component imports
• Modify registry metadata to reflect new component capabilities
• z-kbd now uses data-slot attribute for styling consistency.

Screenshots or GIFs 📸

|-----Figma-----|
|-----Implementation-----|

Link to Issue 🔗

Closes #534

Type of change 🏗

• New feature (non-breaking change that adds functionality)
• Bug fix (non-breaking change that fixes an issue)
• Refactor (non-breaking change that improves the code or technical debt)
• Chore (none of the above, such as upgrading libraries)

Breaking change 🚨

Checklist 🧐

• Tested on Chrome
• Tested on Safari
• Tested on Firefox
• No errors in the console

Summary by CodeRabbit

• New Features

  • Added new demo showcasing keyboard component integrated with button elements.

• Documentation

  • Updated keyboard component description to clarify its purpose for displaying textual user input.

• Style

  • Refined keyboard component styling with improved typography and visual consistency across button and group variants.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 483fce1d-2100-4199-99a7-3965f3cdcb4f

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch refactor/#534-kbd

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 5

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@libs/zard/src/lib/shared/components/kbd/demo/button.ts`:
- Around line 9-10: The selector "z-demo-kbd-default" in the `@Component`
decorator of button.ts conflicts with the same selector in default.ts; update
the selector in the component defined in button.ts (the `@Component` decorator
inside libs/zard/src/lib/shared/components/kbd/demo/button.ts) to a unique name
(e.g., "z-demo-kbd-button") and update any template usages or tests that
reference the old selector so only one component matches that selector at
runtime.
- Around line 16-19: Remove the redundant wrapper div around the icon in the
ZardKbdComponent demo template: inside the <z-kbd> in
libs/zard/src/lib/shared/components/kbd/demo/button.ts remove the <div
class="flex justify-center"> and its closing </div> so that the <ng-icon
name="lucideCornerDownLeft" strokeWidth="3" /> is a direct child of the <z-kbd>;
the kbd element already applies inline-flex items-center justify-center, so no
additional wrapper is needed.

In `@libs/zard/src/lib/shared/components/kbd/demo/default.ts`:
- Around line 10-21: Add or update a kbd E2E test (e.g., kbd.spec.ts) that
navigates to the component/demo page and verifies the updated centered demo
markup by using stable component selectors: assert presence of <z-kbd-group>
elements, that the first <z-kbd-group> contains four <z-kbd> nodes with text
"⌘", "⇧", "⌥", "⌃", and the second group contains <z-kbd> "Ctrl", a "+"
separator, and <z-kbd> "B"; use queries by tag name (z-kbd, z-kbd-group) and
text assertions rather than fragile class/position selectors so the test will
remain stable.

In `@libs/zard/src/lib/shared/components/kbd/demo/group.ts`:
- Around line 10-14: The demo text in the Zard keyboard group reads as a single
combined sequence because the two alternatives are adjacent; update the content
inside z-kbd-group so alternative shortcuts are separated (e.g., insert an
explicit separator like the word "or" or a comma between the two z-kbd elements)
so the sentence reads "Use <z-kbd>Ctrl + B</z-kbd> or <z-kbd>Ctrl + K</z-kbd> to
open command palette"; modify the markup around the z-kbd-group / z-kbd elements
accordingly.

In `@libs/zard/src/lib/shared/components/kbd/kbd.component.ts`:
- Line 12: The inner native <kbd> element in kbd.component.ts currently keeps
Tailwind's monospace font and won't inherit host font classes; update the
template line that contains <kbd data-slot="kbd"><ng-content /></kbd> to add
class="font-[inherit]" so the <kbd> inherits the host computed font classes
(e.g., when font-sans is applied) and projected content uses the intended
typography.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 42187554-10ab-4944-9343-f1aae121bfb2

📥 Commits

Reviewing files that changed from the base of the PR and between 6c81ff1 and 66e4f1f.

⛔ Files ignored due to path filters (6)

• apps/web/public/r/kbd.json is excluded by !apps/web/public/** and included by apps/**
• apps/web/src/generated/components/kbd/demo/button.ts is excluded by !**/generated/** and included by apps/**
• apps/web/src/generated/components/kbd/demo/default.ts is excluded by !**/generated/** and included by apps/**
• apps/web/src/generated/components/kbd/demo/group.ts is excluded by !**/generated/** and included by apps/**
• apps/web/src/generated/components/kbd/demo/tooltip.ts is excluded by !**/generated/** and included by apps/**
• apps/web/src/generated/installation/manual/kbd.ts is excluded by !**/generated/** and included by apps/**

📒 Files selected for processing (8)

• libs/zard/src/lib/shared/components/kbd/demo/button.ts
• libs/zard/src/lib/shared/components/kbd/demo/default.ts
• libs/zard/src/lib/shared/components/kbd/demo/group.ts
• libs/zard/src/lib/shared/components/kbd/demo/kbd.ts
• libs/zard/src/lib/shared/components/kbd/demo/tooltip.ts
• libs/zard/src/lib/shared/components/kbd/kbd-group.component.ts
• libs/zard/src/lib/shared/components/kbd/kbd.component.ts
• libs/zard/src/lib/shared/components/kbd/kbd.variants.ts