@smartsoft001/pro-claude-plugins 0.2.0

package/plugins/smart-pro/hooks/sensitive_file_blocker.py

@@ -0,0 +1,58 @@
+#!/usr/bin/env python3
+"""
+Sensitive File Blocker Hook for Claude Code
+=============================================
+
+Blocks Read/Edit/Write access to sensitive files such as .env, secrets,
+and credentials. Files ending with .example are allowed.
+
+Exit Codes:
+    0 - File access permitted
+    2 - File access blocked (sensitive file detected)
+
+Integration:
+    Configured as PreToolUse hook in hooks/hooks.json
+    Receives tool call JSON via stdin from Claude Code
+"""
+
+import json
+import re
+import sys
+
+
+SENSITIVE_PATTERNS = [
+    r"\.env(?:\.|$)",
+    r"secrets",
+    r"credentials",
+]
+
+
+def main() -> None:
+    try:
+        data = json.load(sys.stdin)
+    except json.JSONDecodeError:
+        sys.exit(0)
+
+    tool_input = data.get("tool_input", {})
+    file_path = tool_input.get("file_path", "")
+
+    if not file_path:
+        sys.exit(0)
+
+    # Allow .example files (safe templates without secrets)
+    if file_path.endswith(".example"):
+        sys.exit(0)
+
+    for pattern in SENSITIVE_PATTERNS:
+        if re.search(pattern, file_path, re.IGNORECASE):
+            print(
+                f"BLOCKED: Access denied to sensitive file: {file_path}",
+                file=sys.stderr,
+            )
+            sys.exit(2)
+
+    sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()

package/plugins/smart-pro/hooks/skill_validator.py

@@ -0,0 +1,220 @@
+#!/usr/bin/env python3
+"""
+Skill Validator Hook for Claude Code
+=====================================
+
+Validates skill-related operations and provides warnings (not blocks).
+Implements soft enforcement per requirements.
+
+Exit Codes:
+    0 - Always (warnings only, never blocks)
+
+Output:
+    Warnings to stderr when potential issues detected.
+
+Checks:
+    - SKILL.md exceeds 500 lines
+    - Missing required sections in SKILL.md
+    - Invalid frontmatter format
+    - skill-rules.json syntax errors
+    - Missing trigger configuration
+
+Integration:
+    Configured as PreToolUse hook in .claude/settings.json
+
+Performance Target:
+    < 200ms execution time
+"""
+
+import json
+import re
+import sys
+from typing import Any
+
+
+def warn(message: str) -> None:
+    """Output warning to stderr (does not block)."""
+    print(f"[Skill Warning] {message}", file=sys.stderr)
+
+
+def check_skill_file_length(file_path: str, content: str) -> None:
+    """Warn if SKILL.md exceeds 500 lines."""
+    if not file_path.endswith("SKILL.md"):
+        return
+
+    line_count = content.count("\n") + 1
+
+    if line_count > 500:
+        warn(
+            f"SKILL.md has {line_count} lines (exceeds 500-line guideline). "
+            "Consider moving detailed content to resource files."
+        )
+    elif line_count > 400:
+        warn(
+            f"SKILL.md has {line_count} lines (approaching 500-line limit). "
+            "Plan for resource files if adding more content."
+        )
+
+
+def check_required_sections(file_path: str, content: str) -> None:
+    """Warn if SKILL.md missing required sections."""
+    if not file_path.endswith("SKILL.md"):
+        return
+
+    required_sections = [
+        ("## Purpose", "Purpose"),
+        ("## When to Use", "When to Use This Skill"),
+    ]
+
+    missing = []
+    for marker, name in required_sections:
+        if marker not in content:
+            missing.append(name)
+
+    if missing:
+        warn(f"SKILL.md missing recommended sections: {', '.join(missing)}")
+
+
+def check_frontmatter(file_path: str, content: str) -> None:
+    """Warn if SKILL.md has invalid frontmatter."""
+    if not file_path.endswith("SKILL.md"):
+        return
+
+    # Check for frontmatter presence
+    if not content.startswith("---"):
+        warn("SKILL.md should start with YAML frontmatter (---)")
+        return
+
+    # Check for closing frontmatter
+    if content.count("---") < 2:
+        warn("SKILL.md frontmatter not properly closed (needs two ---)")
+        return
+
+    # Extract and check frontmatter content
+    frontmatter_match = re.search(
+        r"^---\s*\n(.*?)\n---",
+        content,
+        re.DOTALL
+    )
+
+    if frontmatter_match:
+        frontmatter = frontmatter_match.group(1)
+
+        if "name:" not in frontmatter:
+            warn("SKILL.md frontmatter missing 'name' field")
+
+        if "description:" not in frontmatter:
+            warn("SKILL.md frontmatter missing 'description' field")
+
+
+def check_skill_rules_syntax(file_path: str, content: str) -> None:
+    """Warn if skill-rules.json has syntax or structure issues."""
+    if not file_path.endswith("skill-rules.json"):
+        return
+
+    try:
+        rules = json.loads(content)
+    except json.JSONDecodeError as e:
+        warn(f"skill-rules.json has invalid JSON: {e}")
+        return
+
+    if not isinstance(rules, dict):
+        warn("skill-rules.json should be an object with skill names as keys")
+        return
+
+    for skill_name, config in rules.items():
+        if not isinstance(config, dict):
+            warn(f"Skill '{skill_name}' should be an object")
+            continue
+
+        # Check required fields
+        if "type" not in config:
+            warn(
+                f"Skill '{skill_name}' missing 'type' field "
+                "(should be 'domain', 'guardrail', or 'workflow')"
+            )
+
+        # Check for triggers
+        has_prompt_triggers = bool(config.get("promptTriggers"))
+        has_file_triggers = bool(config.get("fileTriggers"))
+
+        if not has_prompt_triggers and not has_file_triggers:
+            warn(
+                f"Skill '{skill_name}' has no triggers defined - "
+                "will never auto-activate"
+            )
+
+        # Check enforcement for guardrails
+        if config.get("type") == "guardrail":
+            enforcement = config.get("enforcement")
+            if enforcement == "block" and "blockMessage" not in config:
+                warn(
+                    f"Guardrail '{skill_name}' uses 'block' enforcement "
+                    "but has no 'blockMessage'"
+                )
+
+
+def check_resource_file_naming(file_path: str, content: str) -> None:
+    """Warn if resource file doesn't follow naming convention."""
+    if "/resources/" not in file_path:
+        return
+
+    if not file_path.endswith(".md"):
+        return
+
+    # Get filename without path and extension
+    filename = file_path.split("/")[-1]
+    name_without_ext = filename.replace(".md", "")
+
+    # Check if UPPERCASE_SNAKE_CASE
+    if not re.match(r"^[A-Z][A-Z0-9_]*$", name_without_ext):
+        warn(
+            f"Resource file '{filename}' should use UPPERCASE_SNAKE_CASE "
+            "(e.g., BEST_PRACTICES.md)"
+        )
+
+
+def main() -> None:
+    """Main entry point."""
+    try:
+        data: dict[str, Any] = json.load(sys.stdin)
+    except json.JSONDecodeError:
+        sys.exit(0)
+
+    tool_name = data.get("tool_name", "")
+    tool_input = data.get("tool_input", {})
+
+    # Only validate Write/Edit operations on skill files
+    if tool_name not in ["Write", "Edit"]:
+        sys.exit(0)
+
+    file_path = tool_input.get("file_path", "")
+
+    # Only check files in .claude/skills/
+    if ".claude/skills/" not in file_path:
+        sys.exit(0)
+
+    # Get content based on tool type
+    if tool_name == "Write":
+        content = tool_input.get("content", "")
+    else:  # Edit
+        content = tool_input.get("new_string", "")
+        # For Edit, we might not have full file content
+        # Run more limited checks
+
+    if not content:
+        sys.exit(0)
+
+    # Run checks
+    check_skill_file_length(file_path, content)
+    check_required_sections(file_path, content)
+    check_frontmatter(file_path, content)
+    check_skill_rules_syntax(file_path, content)
+    check_resource_file_naming(file_path, content)
+
+    # Always exit 0 - warnings only, never block
+    sys.exit(0)
+
+
+if __name__ == "__main__":
+    main()

package/plugins/smart-pro/skills/angular-components-action-panel/SKILL.md

@@ -0,0 +1,159 @@
+---
+name: angular-components-action-panel
+description: Action panel component for @smartsoft001/pro-angular. Two layouts (card, with-action) with content modes (buttons, link, input, toggle), plain or well surface style, and configurable title placement.
+user-invocable: false
+---
+
+# Action Panel Component (Pro)
+
+Use the wrapper `<smartpro-action-panel>` and pick a layout via `options.layout`. The panel renders a title, description, and an action area; the action area can be vertical (card) or horizontal (with-action). Each layout supports multiple content modes.
+
+## Layouts
+
+| `options.layout`   | Selector                            | Description                                                                                                                                                                                                                       |
+| ------------------ | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'card'` (default) | `smartpro-action-panel-card`        | Title + description with the action area below. Surface is plain by default; set `style: 'well'` for a muted gray surface.                                                                                                        |
+| `'with-action'`    | `smartpro-action-panel-with-action` | Horizontal layout — description and action sit on the same row. Title sits above by default; set `titleAtTop: false` to group it with the description in the left column. Set `style: 'well'` to nest the row inside a gray well. |
+
+## Content modes
+
+`options.contentMode` chooses how the action area renders. Modes available per layout:
+
+| Mode (default `'buttons'`) | Layout support | Renders                                                                                                                          |
+| -------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `'buttons'`                | both           | One button per `options.actions[]` entry. Plain surface uses primary indigo style; well surface uses secondary white style.      |
+| `'link'`                   | `card`         | Anchor link with arrow per action.                                                                                               |
+| `'input'`                  | `card`         | Form with an email field followed by the first action as a submit button. Customise via `inputPlaceholder` and `inputAriaLabel`. |
+| `'toggle'`                 | `with-action`  | Single switch that emits `actionClick` with `actionId: 'enable'` or `'disable'`.                                                 |
+
+## API
+
+### IActionPanelOptionsPro (`action-panel.types.ts`)
+
+```typescript
+type SmartActionPanelLayoutPro = 'card' | 'with-action';
+type SmartActionPanelContentMode = 'buttons' | 'link' | 'input' | 'toggle';
+type SmartActionPanelStyle = 'plain' | 'well';
+
+interface IActionPanelOptionsPro {
+  layout?: SmartActionPanelLayoutPro; // 'card' (default) | 'with-action'
+  contentMode?: SmartActionPanelContentMode; // 'buttons' (default) | 'link' | 'input' | 'toggle'
+  style?: SmartActionPanelStyle; // 'plain' (default) | 'well'
+  titleAtTop?: boolean; // with-action: true (default) places title above the row, false groups it in the left column
+  inputPlaceholder?: string; // input mode only
+  inputAriaLabel?: string; // input mode only
+  title?: string;
+  description?: string;
+  actions?: IActionPanelAction[];
+  descriptionTpl?: TemplateRef<unknown>;
+  contentTpl?: TemplateRef<unknown>; // with-action + style='well': replaces the default description rendering inside the well
+}
+
+interface IActionPanelAction {
+  id: string;
+  label?: string;
+  href?: string;
+  variant?: 'primary' | 'secondary' | 'ghost' | 'link';
+  iconTpl?: TemplateRef<unknown>;
+}
+```
+
+### Outputs
+
+- `actionClick: { actionId: string }` — emitted on button click, link click, form submit, or toggle change. Toggle emits `actionId: 'enable'` when checked and `'disable'` when unchecked.
+
+## Usage
+
+### Simple card with buttons (default)
+
+```html
+<smartpro-action-panel
+  [options]="{
+    title: 'Manage subscription',
+    description: 'Lorem ipsum...',
+    actions: [{ id: 'change', label: 'Change plan' }]
+  }"
+  (actionClick)="onAction($event)"
+/>
+```
+
+### Card with link
+
+```html
+<smartpro-action-panel
+  [options]="{
+    layout: 'card',
+    contentMode: 'link',
+    title: 'Need help?',
+    description: 'Read the docs.',
+    actions: [{ id: 'docs', label: 'Open docs', href: '/docs' }]
+  }"
+/>
+```
+
+### Card with email input
+
+```html
+<smartpro-action-panel
+  [options]="{
+    layout: 'card',
+    contentMode: 'input',
+    title: 'Subscribe',
+    description: 'Get product updates.',
+    actions: [{ id: 'subscribe', label: 'Subscribe' }]
+  }"
+/>
+```
+
+### Card with gray surface
+
+```html
+<smartpro-action-panel
+  [options]="{ layout: 'card', style: 'well', title: 'Notes', description: 'A muted card.', actions: [...] }"
+/>
+```
+
+### Horizontal panel with action button on the right
+
+```html
+<smartpro-action-panel
+  [options]="{
+    layout: 'with-action',
+    title: 'Manage subscription',
+    description: 'Plan changes apply immediately.',
+    actions: [{ id: 'change', label: 'Change plan' }]
+  }"
+/>
+```
+
+### Horizontal panel with title grouped on the left
+
+```html
+<smartpro-action-panel
+  [options]="{ layout: 'with-action', titleAtTop: false, title: 'Plan', description: '...', actions: [...] }"
+/>
+```
+
+### Horizontal panel with toggle
+
+```html
+<smartpro-action-panel
+  [options]="{ layout: 'with-action', contentMode: 'toggle', title: 'Notifications', description: 'Email me on updates.' }"
+  (actionClick)="onToggle($event)"
+/>
+```
+
+### Horizontal panel with action inside a well
+
+```html
+<smartpro-action-panel
+  [options]="{ layout: 'with-action', style: 'well', title: 'Payment method', description: 'Visa ending 4242', actions: [...] }"
+/>
+```
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/action-panel/action-panel.component.ts`
+- Types: `packages/shared/angular/src/lib/components/action-panel/action-panel.types.ts`
+- Layouts: `packages/shared/angular/src/lib/components/action-panel/{card,with-action}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/action-panel/action-panel.component.stories.ts`

package/plugins/smart-pro/skills/angular-components-avatar/SKILL.md

@@ -0,0 +1,142 @@
+---
+name: angular-components-avatar
+description: Avatar component for @smartsoft001/pro-angular. Two layouts (single, group), 10 source variants via composable options (shape, size, notificationPosition, placeholderType, stackDirection, withText, notificationColor).
+user-invocable: false
+---
+
+# Avatar Component (Pro)
+
+Use `<smartpro-avatar>`. The wrapper picks one of two child layouts based on `layout` input or whether `group` has items.
+
+## Layouts
+
+| `layout` (auto-detected) | Selector                 | Description                                                                                                            |
+| ------------------------ | ------------------------ | ---------------------------------------------------------------------------------------------------------------------- |
+| `'single'` (default)     | `smartpro-avatar-single` | Single avatar — image, initials, or placeholder icon. Optional notification dot (top/bottom). Optional text + subtext. |
+| `'group'`                | `smartpro-avatar-group`  | Overlapping stack of avatars. Triggered when `group: IAvatarItem[]` has items.                                         |
+
+## Source variant mapping
+
+| Tailwind UI variant          | Pro options                                                       |
+| ---------------------------- | ----------------------------------------------------------------- |
+| Circular plain               | `shape: 'circle'` (default)                                       |
+| Circular top notification    | `shape: 'circle'`, `notificationPosition: 'top'`                  |
+| Circular bottom notification | `shape: 'circle'`, `notificationPosition: 'bottom'`               |
+| Rounded plain                | `shape: 'rounded'`                                                |
+| Rounded top notification     | `shape: 'rounded'`, `notificationPosition: 'top'`                 |
+| Rounded bottom notification  | `shape: 'rounded'`, `notificationPosition: 'bottom'`              |
+| Placeholder icon             | no `imageUrl` and no `initials` — defaults to icon                |
+| Placeholder initials         | `initials: 'AB'` (auto), or `options.placeholderType: 'initials'` |
+| Group stacked top-to-bottom  | `group: IAvatarItem[]` (default `stackDirection`)                 |
+| Group stacked bottom-to-top  | `group: IAvatarItem[]`, `options.stackDirection: 'bottom-to-top'` |
+| With text                    | `options.withText: true`, `options.text`, `options.subtext`       |
+
+## API
+
+### Types (`avatar.types.ts`)
+
+```typescript
+type SmartAvatarLayoutPro = 'single' | 'group';
+type SmartAvatarNotificationColor = 'green' | 'gray' | 'red';
+
+interface IAvatarOptionsPro extends IAvatarOptions {
+  layout?: SmartAvatarLayoutPro;
+  notificationColor?: SmartAvatarNotificationColor;
+  withText?: boolean;
+  text?: string;
+  subtext?: string;
+}
+```
+
+`IAvatarOptions` (re-exported from `@smartsoft001/angular`) provides `placeholderType: 'icon' | 'initials'`, `stackDirection: 'top-to-bottom' | 'bottom-to-top'`.
+
+`IAvatarItem` (re-exported): `{ id, imageUrl?, initials? }`.
+
+`SmartAvatarSize`: `'xs' | 'sm' | 'md' | 'lg' | 'xl'`. `SmartAvatarShape`: `'circle' | 'rounded'`.
+
+### Wrapper inputs
+
+| Input                  | Type                                | Default     | Description                                                                                 |
+| ---------------------- | ----------------------------------- | ----------- | ------------------------------------------------------------------------------------------- |
+| `imageUrl`             | `string \| undefined`               | `undefined` | Avatar image URL (single layout). When missing, falls back to initials, then placeholder.   |
+| `initials`             | `string \| undefined`               | `undefined` | Initials text (single layout) shown when `imageUrl` is absent.                              |
+| `size`                 | `SmartAvatarSize`                   | `'md'`      | Avatar size.                                                                                |
+| `shape`                | `SmartAvatarShape`                  | `'circle'`  | Avatar shape.                                                                               |
+| `notificationPosition` | `'top' \| 'bottom' \| undefined`    | `undefined` | Renders a colored dot at the given corner.                                                  |
+| `group`                | `IAvatarItem[] \| undefined`        | `undefined` | When non-empty, the wrapper auto-selects the `group` layout.                                |
+| `layout`               | `SmartAvatarLayoutPro \| undefined` | `undefined` | Force a layout.                                                                             |
+| `options`              | `IAvatarOptionsPro \| undefined`    | `undefined` | All pro options (notification color, with-text content, placeholder type, stack direction). |
+| `class`                | `string`                            | `''`        | Forwarded to the chosen layout's host element.                                              |
+
+### Outputs / Slots
+
+No outputs. No `<ng-content>` slot.
+
+## Usage examples
+
+```html
+<!-- Simple circular avatar -->
+<smartpro-avatar imageUrl="/img/me.png" />
+
+<!-- Rounded square with notification dot -->
+<smartpro-avatar
+  imageUrl="/img/me.png"
+  shape="rounded"
+  notificationPosition="top"
+/>
+
+<!-- Initials -->
+<smartpro-avatar initials="AP" size="lg" />
+
+<!-- Placeholder (icon) -->
+<smartpro-avatar />
+
+<!-- Group stack -->
+<smartpro-avatar
+  [group]="[
+  { id: '1', imageUrl: '/img/a.png' },
+  { id: '2', initials: 'BC' },
+  { id: '3', imageUrl: '/img/d.png' }
+]"
+/>
+
+<!-- Group reversed stacking -->
+<smartpro-avatar
+  [group]="members"
+  [options]="{ stackDirection: 'bottom-to-top' }"
+/>
+
+<!-- With text (avatar + label + subtitle) -->
+<smartpro-avatar
+  imageUrl="/img/me.png"
+  [options]="{ withText: true, text: 'Ashley Porter', subtext: 'Product designer' }"
+/>
+
+<!-- Notification dot color -->
+<smartpro-avatar
+  imageUrl="/img/me.png"
+  notificationPosition="bottom"
+  [options]="{ notificationColor: 'red' }"
+/>
+```
+
+## Accessibility
+
+- Image avatars use `alt=""` (decorative); the surrounding context provides the name.
+- Initials inherit text content for screen readers.
+- Notification dot is `aria-hidden="true"`; status meaning must be conveyed elsewhere if it matters.
+- Placeholder SVG is `aria-hidden="true"`.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/avatar/avatar.component.ts`
+- Types: `packages/shared/angular/src/lib/components/avatar/avatar.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/avatar/avatar-classes.util.ts`
+- Layouts: `packages/shared/angular/src/lib/components/avatar/{single,group}/<name>.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/avatar/avatar.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`AVATAR_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `AvatarBaseComponent`, `IAvatarItem`, `IAvatarOptions`, `SmartAvatarSize`, `SmartAvatarShape`.
+- No `@tailwindplus/elements` dep required.

package/plugins/smart-pro/skills/angular-components-badge/SKILL.md

@@ -0,0 +1,110 @@
+---
+name: angular-components-badge
+description: Badge / tag component for @smartsoft001/pro-angular. Single `default` layout with composable options (variant border/flat, shape pill/square, withDot, withRemove) across 8 colors and 2 sizes.
+user-invocable: false
+---
+
+# Badge Component (Pro)
+
+Use `<smartpro-badge>`. A single layout covers all 16+ Tailwind UI variants via composable options on `IBadgeOptionsPro`.
+
+## Variants matrix
+
+| Dimension    | Values                                                                         |
+| ------------ | ------------------------------------------------------------------------------ |
+| `variant`    | `'border'` (default — `bg-50` with `inset-ring`) or `'flat'` (`bg-100`)        |
+| `shape`      | `'pill'` (default — `rounded-full`) or `'square'` (`rounded-md`)               |
+| `size`       | `'sm'` (default — `text-xs`, `px-2`) or `'md'` (`text-sm`, `px-2.5`)           |
+| `color`      | 8 colors: `gray`, `red`, `yellow`, `green`, `blue`, `indigo`, `purple`, `pink` |
+| `withDot`    | Adds a leading colored dot SVG                                                 |
+| `withRemove` | Adds a trailing × button that emits `(removed)`                                |
+
+## Source variant mapping
+
+| Tailwind UI variant        | Pro options                                          |
+| -------------------------- | ---------------------------------------------------- |
+| Border (default)           | `variant: 'border'`                                  |
+| Flat                       | `variant: 'flat'`                                    |
+| Pill                       | `shape: 'pill'` (default)                            |
+| Square (rounded-md)        | `shape: 'square'` (or `pill: false` for fork compat) |
+| With dot                   | `withDot: true`                                      |
+| With remove (close button) | `withRemove: true`                                   |
+| Any of 8 colors            | `color: 'gray' \| 'red' \| ... \| 'pink'`            |
+| Two sizes                  | `size: 'sm' \| 'md'`                                 |
+
+## API
+
+### Types (`badge.types.ts`)
+
+```typescript
+type SmartBadgeShape = 'pill' | 'square';
+
+interface IBadgeOptionsPro extends IBadgeOptions {
+  shape?: SmartBadgeShape;
+}
+```
+
+`IBadgeOptions` (re-exported from `@smartsoft001/angular`): `variant?: 'border' | 'flat'`, `pill?: boolean` (fork compat — `false` ⇒ `square`), `withDot?: boolean`, `withRemove?: boolean`.
+
+`SmartBadgeColor`: `'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'indigo' | 'purple' | 'pink'`.
+
+### Wrapper inputs
+
+| Input     | Type                            | Default     | Description                            |
+| --------- | ------------------------------- | ----------- | -------------------------------------- |
+| `text`    | `string` (required)             | —           | Badge label.                           |
+| `color`   | `SmartBadgeColor`               | `'gray'`    | One of 8 palette colors.               |
+| `size`    | `'sm' \| 'md'`                  | `'sm'`      | Compact (xs text) or normal (sm text). |
+| `options` | `IBadgeOptionsPro \| undefined` | `undefined` | Shape, variant, dot, remove.           |
+| `class`   | `string`                        | `''`        | Forwarded to the host span.            |
+
+### Outputs
+
+| Output    | Payload | When                              |
+| --------- | ------- | --------------------------------- |
+| `removed` | `void`  | The remove `×` button is clicked. |
+
+## Usage examples
+
+```html
+<!-- Default border, pill, sm, gray -->
+<smartpro-badge text="Badge" />
+
+<!-- Success badge -->
+<smartpro-badge text="Active" color="green" [options]="{ withDot: true }" />
+
+<!-- Removable indigo tag -->
+<smartpro-badge
+  text="React"
+  color="indigo"
+  [options]="{ withRemove: true }"
+  (removed)="onRemove()"
+/>
+
+<!-- Flat square, md size -->
+<smartpro-badge
+  text="Beta"
+  color="blue"
+  size="md"
+  [options]="{ variant: 'flat', shape: 'square' }"
+/>
+```
+
+## Accessibility
+
+- Dot SVG uses `aria-hidden="true"`; status meaning carried by text.
+- Remove button uses `aria-label="Remove"`; the close glyph is `aria-hidden`.
+
+## File Locations
+
+- Wrapper: `packages/shared/angular/src/lib/components/badge/badge.component.ts`
+- Types: `packages/shared/angular/src/lib/components/badge/badge.types.ts`
+- Classes utility: `packages/shared/angular/src/lib/components/badge/badge-classes.util.ts`
+- Layout: `packages/shared/angular/src/lib/components/badge/default/default.component.ts`
+- Stories: `packages/shared/angular/src/lib/components/badge/badge.component.stories.ts`
+- Module entry: `packages/shared/angular/src/lib/components/components.module.ts` (`BADGE_COMPONENTS`)
+
+## Peer dependency
+
+- `@smartsoft001/angular@^2.123.0` — provides `BadgeBaseComponent`, `IBadgeOptions`, `SmartBadgeColor`.
+- No `@tailwindplus/elements` dep required.