@actabldesign/bellhop-core 0.0.3

package/collection/components/bh-badge/bh-badge.css

@@ -0,0 +1,348 @@
+/* ==========================================================================
+   BH-BADGE COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+}
+
+/* Base Badge Styles */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  border-radius: var(--radius-full);
+  white-space: nowrap;
+  text-align: center;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  user-select: none;
+  cursor: default;
+}
+
+/* Size Variants */
+.badge-sm {
+  padding: var(--spacing-xxs) var(--spacing-md);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-xs-line);
+}
+
+.badge-md {
+  padding: var(--spacing-xs) var(--spacing-lg);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+}
+
+.badge-lg {
+  padding: var(--spacing-sm) var(--spacing-xl);
+  font-size: var(--text-md-size);
+  line-height: var(--text-md-line);
+}
+
+/* Badge Icon - Dot */
+.badge-icon-dot {
+  font-size: 8px !important;
+  width: 8px;
+  height: 8px;
+  line-height: 1;
+  flex-shrink: 0;
+  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 16;
+}
+
+.badge-sm .badge-icon-dot {
+  font-size: 6px !important;
+  width: 6px;
+  height: 6px;
+}
+
+.badge-lg .badge-icon-dot {
+  font-size: 10px !important;
+  width: 10px;
+  height: 10px;
+}
+
+/* Custom icon styling */
+.badge-icon-custom {
+  font-size: 16px !important;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;
+}
+
+.badge-sm .badge-icon-custom {
+  font-size: 12px !important;
+}
+
+.badge-lg .badge-icon-custom {
+  font-size: 20px !important;
+}
+
+/* Badge Label */
+.badge-label {
+  flex-shrink: 0;
+  font-weight: inherit;
+}
+
+/* Dismiss Button */
+.badge-dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  margin-left: var(--spacing-xxs);
+  border-radius: var(--radius-full);
+  transition: all 0.2s ease;
+  width: 16px;
+  height: 16px;
+}
+
+.badge-dismiss-icon {
+  font-size: 14px !important;
+  width: 14px;
+  height: 14px;
+  line-height: 1;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14;
+}
+
+.badge-sm .badge-dismiss {
+  width: 14px;
+  height: 14px;
+}
+
+.badge-sm .badge-dismiss-icon {
+  font-size: 12px !important;
+  width: 12px;
+  height: 12px;
+}
+
+.badge-lg .badge-dismiss {
+  width: 18px;
+  height: 18px;
+}
+
+.badge-lg .badge-dismiss-icon {
+  font-size: 16px !important;
+  width: 16px;
+  height: 16px;
+}
+
+.badge-dismiss:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.badge-dismiss:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* ==========================================================================
+   HIGH EMPHASIS VARIANTS
+   ========================================================================== */
+
+.badge-high.badge-gray {
+  background-color: var(--color-neutral-200);
+  color: var(--color-neutral-800);
+}
+
+.badge-high.badge-blue {
+  background-color: var(--color-brand-200);
+  color: var(--color-brand-800);
+}
+
+.badge-high.badge-red {
+  background-color: var(--color-error-200);
+  color: var(--color-error-800);
+}
+
+.badge-high.badge-yellow {
+  background-color: var(--color-warning-200);
+  color: var(--color-warning-800);
+}
+
+.badge-high.badge-green {
+  background-color: var(--color-success-200);
+  color: var(--color-success-800);
+}
+
+.badge-high.badge-purple {
+  background-color: hsl(270, 70%, 85%);
+  color: hsl(270, 70%, 35%);
+}
+
+.badge-high.badge-pink {
+  background-color: hsl(330, 70%, 85%);
+  color: hsl(330, 70%, 35%);
+}
+
+.badge-high.badge-orange {
+  background-color: hsl(25, 90%, 85%);
+  color: hsl(25, 90%, 35%);
+}
+
+/* Icon colors for high emphasis */
+.badge-high .badge-icon-gray-high,
+.badge-high .badge-dismiss-icon.badge-icon-gray-high { color: var(--color-neutral-800) !important; }
+.badge-high .badge-icon-blue-high,
+.badge-high .badge-dismiss-icon.badge-icon-blue-high { color: var(--color-brand-800) !important; }
+.badge-high .badge-icon-red-high,
+.badge-high .badge-dismiss-icon.badge-icon-red-high { color: var(--color-error-800) !important; }
+.badge-high .badge-icon-yellow-high,
+.badge-high .badge-dismiss-icon.badge-icon-yellow-high { color: var(--color-warning-800) !important; }
+.badge-high .badge-icon-green-high,
+.badge-high .badge-dismiss-icon.badge-icon-green-high { color: var(--color-success-800) !important; }
+.badge-high .badge-icon-purple-high,
+.badge-high .badge-dismiss-icon.badge-icon-purple-high { color: hsl(270, 70%, 35%) !important; }
+.badge-high .badge-icon-pink-high,
+.badge-high .badge-dismiss-icon.badge-icon-pink-high { color: hsl(330, 70%, 35%) !important; }
+.badge-high .badge-icon-orange-high,
+.badge-high .badge-dismiss-icon.badge-icon-orange-high { color: hsl(25, 90%, 35%) !important; }
+
+/* ==========================================================================
+   MEDIUM EMPHASIS VARIANTS
+   ========================================================================== */
+
+.badge-medium.badge-gray {
+  background-color: var(--color-neutral-50);
+  color: var(--color-neutral-700);
+  border-color: var(--color-neutral-200);
+}
+
+.badge-medium.badge-blue {
+  background-color: var(--color-brand-50);
+  color: var(--color-brand-700);
+  border-color: var(--color-brand-200);
+}
+
+.badge-medium.badge-red {
+  background-color: var(--color-error-50);
+  color: var(--color-error-700);
+  border-color: var(--color-error-200);
+}
+
+.badge-medium.badge-yellow {
+  background-color: var(--color-warning-50);
+  color: var(--color-warning-700);
+  border-color: var(--color-warning-200);
+}
+
+.badge-medium.badge-green {
+  background-color: var(--color-success-50);
+  color: var(--color-success-700);
+  border-color: var(--color-success-200);
+}
+
+.badge-medium.badge-purple {
+  background-color: hsl(270, 70%, 97%);
+  color: hsl(270, 70%, 40%);
+  border-color: hsl(270, 70%, 85%);
+}
+
+.badge-medium.badge-pink {
+  background-color: hsl(330, 70%, 97%);
+  color: hsl(330, 70%, 40%);
+  border-color: hsl(330, 70%, 85%);
+}
+
+.badge-medium.badge-orange {
+  background-color: hsl(25, 90%, 97%);
+  color: hsl(25, 90%, 40%);
+  border-color: hsl(25, 90%, 85%);
+}
+
+/* Icon colors for medium emphasis */
+.badge-medium .badge-icon-gray-medium,
+.badge-medium .badge-dismiss-icon.badge-icon-gray-medium { color: var(--color-neutral-700) !important; }
+.badge-medium .badge-icon-blue-medium,
+.badge-medium .badge-dismiss-icon.badge-icon-blue-medium { color: var(--color-brand-700) !important; }
+.badge-medium .badge-icon-red-medium,
+.badge-medium .badge-dismiss-icon.badge-icon-red-medium { color: var(--color-error-700) !important; }
+.badge-medium .badge-icon-yellow-medium,
+.badge-medium .badge-dismiss-icon.badge-icon-yellow-medium { color: var(--color-warning-700) !important; }
+.badge-medium .badge-icon-green-medium,
+.badge-medium .badge-dismiss-icon.badge-icon-green-medium { color: var(--color-success-700) !important; }
+.badge-medium .badge-icon-purple-medium,
+.badge-medium .badge-dismiss-icon.badge-icon-purple-medium { color: hsl(270, 70%, 40%) !important; }
+.badge-medium .badge-icon-pink-medium,
+.badge-medium .badge-dismiss-icon.badge-icon-pink-medium { color: hsl(330, 70%, 40%) !important; }
+.badge-medium .badge-icon-orange-medium,
+.badge-medium .badge-dismiss-icon.badge-icon-orange-medium { color: hsl(25, 90%, 40%) !important; }
+
+/* ==========================================================================
+   LOW EMPHASIS VARIANTS
+   ========================================================================== */
+
+.badge-low.badge-gray {
+  background-color: transparent;
+  color: var(--color-neutral-600);
+  border-color: var(--color-neutral-600);
+}
+
+.badge-low.badge-blue {
+  background-color: transparent;
+  color: var(--color-brand-600);
+  border-color: var(--color-brand-600);
+}
+
+.badge-low.badge-red {
+  background-color: transparent;
+  color: var(--color-error-600);
+  border-color: var(--color-error-600);
+}
+
+.badge-low.badge-yellow {
+  background-color: transparent;
+  color: var(--color-warning-600);
+  border-color: var(--color-warning-600);
+}
+
+.badge-low.badge-green {
+  background-color: transparent;
+  color: var(--color-success-600);
+  border-color: var(--color-success-600);
+}
+
+.badge-low.badge-purple {
+  background-color: transparent;
+  color: hsl(270, 70%, 45%);
+  border-color: hsl(270, 70%, 45%);
+}
+
+.badge-low.badge-pink {
+  background-color: transparent;
+  color: hsl(330, 70%, 45%);
+  border-color: hsl(330, 70%, 45%);
+}
+
+.badge-low.badge-orange {
+  background-color: transparent;
+  color: hsl(25, 90%, 45%);
+  border-color: hsl(25, 90%, 45%);
+}
+
+/* Icon colors for low emphasis */
+.badge-low .badge-icon-gray-low,
+.badge-low .badge-dismiss-icon.badge-icon-gray-low { color: var(--color-neutral-600) !important; }
+.badge-low .badge-icon-blue-low,
+.badge-low .badge-dismiss-icon.badge-icon-blue-low { color: var(--color-brand-600) !important; }
+.badge-low .badge-icon-red-low,
+.badge-low .badge-dismiss-icon.badge-icon-red-low { color: var(--color-error-600) !important; }
+.badge-low .badge-icon-yellow-low,
+.badge-low .badge-dismiss-icon.badge-icon-yellow-low { color: var(--color-warning-600) !important; }
+.badge-low .badge-icon-green-low,
+.badge-low .badge-dismiss-icon.badge-icon-green-low { color: var(--color-success-600) !important; }
+.badge-low .badge-icon-purple-low,
+.badge-low .badge-dismiss-icon.badge-icon-purple-low { color: hsl(270, 70%, 45%) !important; }
+.badge-low .badge-icon-pink-low,
+.badge-low .badge-dismiss-icon.badge-icon-pink-low { color: hsl(330, 70%, 45%) !important; }
+.badge-low .badge-icon-orange-low,
+.badge-low .badge-dismiss-icon.badge-icon-orange-low { color: hsl(25, 90%, 45%) !important; }
+
+/* Disabled State */
+.badge-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/collection/components/bh-badge/bh-badge.js

@@ -0,0 +1,250 @@
+import { h } from "@stencil/core";
+export class BhBadge {
+    /**
+     * The color variant of the badge
+     */
+    variant = 'gray';
+    /**
+     * The size of the badge
+     */
+    size = 'md';
+    /**
+     * The emphasis level (affects background/border styling)
+     */
+    emphasis = 'high';
+    /**
+     * The text label to display
+     */
+    label = 'Label';
+    /**
+     * Material Symbols icon name, or 'dot' for a dot indicator
+     */
+    icon;
+    /**
+     * Whether the badge can be dismissed
+     */
+    dismissible = false;
+    /**
+     * Whether the badge is disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when the dismiss button is clicked
+     */
+    bhDismiss;
+    handleDismiss = (e) => {
+        e.stopPropagation();
+        if (this.dismissible && !this.disabled) {
+            this.bhDismiss.emit();
+        }
+    };
+    render() {
+        const badgeClasses = {
+            'badge': true,
+            [`badge-${this.variant}`]: true,
+            [`badge-${this.size}`]: true,
+            [`badge-${this.emphasis}`]: true,
+            'badge-disabled': this.disabled,
+        };
+        const iconColorClass = `badge-icon-${this.variant}-${this.emphasis}`;
+        const isDot = this.icon === 'dot';
+        return (h("span", { key: '240872b520f525ebf20a8d96fd00bd920ef5db39', class: badgeClasses, part: "badge" }, this.icon && (h("span", { key: '0da3d63155c7bed85f4ce51165a0e98e5070f55c', class: {
+                'material-symbols-outlined': true,
+                [iconColorClass]: true,
+                'badge-icon-dot': isDot,
+                'badge-icon-custom': !isDot,
+            } }, isDot ? 'fiber_manual_record' : this.icon)), h("span", { key: 'e4556215b4af0bf56dd5058697d2aac9ecb62d75', class: "badge-label" }, this.label), this.dismissible && (h("button", { key: 'bd455d4b8b2dca8cc7596ed2dddcbe69ff11b9cf', class: "badge-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss", part: "dismiss-button" }, h("span", { key: 'b4f8e3be6334840ff909cd3c60ec1d7725f09a77', class: `material-symbols-outlined badge-dismiss-icon ${iconColorClass}` }, "close")))));
+    }
+    static get is() { return "bh-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeVariant",
+                    "resolved": "\"blue\" | \"gray\" | \"green\" | \"orange\" | \"pink\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BadgeVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-badge/bh-badge.tsx",
+                            "id": "src/components/bh-badge/bh-badge.tsx::BadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The color variant of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'gray'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "BadgeSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-badge/bh-badge.tsx",
+                            "id": "src/components/bh-badge/bh-badge.tsx::BadgeSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the badge"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeEmphasis",
+                    "resolved": "\"high\" | \"low\" | \"medium\"",
+                    "references": {
+                        "BadgeEmphasis": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-badge/bh-badge.tsx",
+                            "id": "src/components/bh-badge/bh-badge.tsx::BadgeEmphasis"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The emphasis level (affects background/border styling)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "emphasis",
+                "defaultValue": "'high'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text label to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Label'"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Material Symbols icon name, or 'dot' for a dot indicator"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the badge can be dismissed"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the badge is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhDismiss",
+                "name": "bhDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dismiss button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-badge.js.map

package/collection/components/bh-badge/bh-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-badge.js","sourceRoot":"","sources":["../../../src/components/bh-badge/bh-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAWxE,MAAM,OAAO,OAAO;IAClB;;OAEG;IACK,OAAO,GAAiB,MAAM,CAAC;IAEvC;;OAEG;IACK,IAAI,GAAc,IAAI,CAAC;IAE/B;;OAEG;IACK,QAAQ,GAAkB,MAAM,CAAC;IAEzC;;OAEG;IACK,KAAK,GAAW,OAAO,CAAC;IAEhC;;OAEG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,WAAW,GAAY,KAAK,CAAC;IAErC;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IACM,SAAS,CAAsB;IAEhC,aAAa,GAAG,CAAC,CAAa,EAAQ,EAAE;QAC9C,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE,IAAI;YACb,CAAC,SAAS,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC/B,CAAC,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC5B,CAAC,SAAS,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;YAChC,gBAAgB,EAAE,IAAI,CAAC,QAAQ;SAChC,CAAC;QAEF,MAAM,cAAc,GAAG,cAAc,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QACrE,MAAM,KAAK,GAAG,IAAI,CAAC,IAAI,KAAK,KAAK,CAAC;QAElC,OAAO,CACL,6DAAM,KAAK,EAAE,YAAY,EAAE,IAAI,EAAC,OAAO;YACpC,IAAI,CAAC,IAAI,IAAI,CACZ,6DACE,KAAK,EAAE;oBACL,2BAA2B,EAAE,IAAI;oBACjC,CAAC,cAAc,CAAC,EAAE,IAAI;oBACtB,gBAAgB,EAAE,KAAK;oBACvB,mBAAmB,EAAE,CAAC,KAAK;iBAC5B,IAEA,KAAK,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CACrC,CACR;YAED,6DAAM,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,KAAK,CAAQ;YAE5C,IAAI,CAAC,WAAW,IAAI,CACnB,+DACE,KAAK,EAAC,eAAe,EACrB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,gBACF,SAAS,EACpB,IAAI,EAAC,gBAAgB;gBAErB,6DAAM,KAAK,EAAE,gDAAgD,cAAc,EAAE,YAEtE,CACA,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type BadgeVariant = 'gray' | 'blue' | 'red' | 'yellow' | 'green' | 'purple' | 'pink' | 'orange';\nexport type BadgeSize = 'sm' | 'md' | 'lg';\nexport type BadgeEmphasis = 'high' | 'medium' | 'low';\n\n@Component({\n  tag: 'bh-badge',\n  styleUrl: 'bh-badge.css',\n  shadow: true,\n})\nexport class BhBadge {\n  /**\n   * The color variant of the badge\n   */\n  @Prop() variant: BadgeVariant = 'gray';\n\n  /**\n   * The size of the badge\n   */\n  @Prop() size: BadgeSize = 'md';\n\n  /**\n   * The emphasis level (affects background/border styling)\n   */\n  @Prop() emphasis: BadgeEmphasis = 'high';\n\n  /**\n   * The text label to display\n   */\n  @Prop() label: string = 'Label';\n\n  /**\n   * Material Symbols icon name, or 'dot' for a dot indicator\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the badge can be dismissed\n   */\n  @Prop() dismissible: boolean = false;\n\n  /**\n   * Whether the badge is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Emitted when the dismiss button is clicked\n   */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  private handleDismiss = (e: MouseEvent): void => {\n    e.stopPropagation();\n    if (this.dismissible && !this.disabled) {\n      this.bhDismiss.emit();\n    }\n  };\n\n  render() {\n    const badgeClasses = {\n      'badge': true,\n      [`badge-${this.variant}`]: true,\n      [`badge-${this.size}`]: true,\n      [`badge-${this.emphasis}`]: true,\n      'badge-disabled': this.disabled,\n    };\n\n    const iconColorClass = `badge-icon-${this.variant}-${this.emphasis}`;\n    const isDot = this.icon === 'dot';\n\n    return (\n      <span class={badgeClasses} part=\"badge\">\n        {this.icon && (\n          <span\n            class={{\n              'material-symbols-outlined': true,\n              [iconColorClass]: true,\n              'badge-icon-dot': isDot,\n              'badge-icon-custom': !isDot,\n            }}\n          >\n            {isDot ? 'fiber_manual_record' : this.icon}\n          </span>\n        )}\n\n        <span class=\"badge-label\">{this.label}</span>\n\n        {this.dismissible && (\n          <button\n            class=\"badge-dismiss\"\n            onClick={this.handleDismiss}\n            disabled={this.disabled}\n            type=\"button\"\n            aria-label=\"Dismiss\"\n            part=\"dismiss-button\"\n          >\n            <span class={`material-symbols-outlined badge-dismiss-icon ${iconColorClass}`}>\n              close\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"]}

package/collection/components/bh-badge-dot/bh-badge-dot.css

@@ -0,0 +1,77 @@
+:host {
+  display: inline-block;
+}
+
+/* Base Badge Dot */
+.badge-dot {
+  border-radius: 9999px;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+/* Sizes */
+.badge-dot-sm {
+  width: 6px;
+  height: 6px;
+}
+
+.badge-dot-md {
+  width: 8px;
+  height: 8px;
+}
+
+.badge-dot-lg {
+  width: 10px;
+  height: 10px;
+}
+
+/* Colors */
+.badge-dot-success {
+  background-color: var(--color-success-500, #17B26A);
+}
+
+.badge-dot-blue {
+  background-color: var(--color-blue-500, #5068DD);
+}
+
+.badge-dot-error {
+  background-color: var(--color-error-500, #F05250);
+}
+
+.badge-dot-warning {
+  background-color: var(--color-warning-500, #F79009);
+}
+
+/* Outline versions */
+.badge-dot-outline.badge-dot-sm {
+  outline: 3px solid;
+  outline-offset: 0;
+}
+
+.badge-dot-outline.badge-dot-md {
+  outline: 4px solid;
+  outline-offset: 0;
+}
+
+.badge-dot-outline.badge-dot-lg {
+  outline: 5px solid;
+  outline-offset: 0;
+}
+
+/* Outline colors */
+.badge-dot-outline.badge-dot-success {
+  outline-color: var(--color-success-100, #D1FADF);
+}
+
+.badge-dot-outline.badge-dot-blue {
+  outline-color: var(--color-blue-200, #E1EAFE);
+}
+
+.badge-dot-outline.badge-dot-error {
+  outline-color: var(--color-error-200, #FEE4E2);
+}
+
+.badge-dot-outline.badge-dot-warning {
+  outline-color: var(--color-warning-200, #FEF0C7);
+}