@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1,178 @@
+import { h, Host, } from "@stencil/core";
+/**
+ * @slot - Tab items (bh-tab-item components)
+ */
+export class BhTabs {
+    /**
+     * The type of tabs: underline or contained style
+     */
+    type = 'contained';
+    /**
+     * The orientation of the tabs: horizontal or vertical
+     */
+    orientation = 'horizontal';
+    /**
+     * Whether the tabs should take up the full width of the container
+     */
+    fullWidth = false;
+    /**
+     * The value of the currently active tab
+     */
+    value = '';
+    /**
+     * Emitted when the active tab changes
+     */
+    bhTabChange;
+    handleTabItemClick(event) {
+        const value = event.detail;
+        if (this.value !== value) {
+            this.value = value;
+            this.bhTabChange.emit(value);
+        }
+    }
+    render() {
+        const hostClasses = {
+            tabs: true,
+            [`tabs-${this.type}`]: true,
+            [`tabs-${this.orientation}`]: true,
+            'tabs-full-width': this.fullWidth,
+        };
+        return (h(Host, { key: '3eae9f235c7436f4ab2321e1d751071678d19418', class: hostClasses }, h("div", { key: '76b0313966bbb5bd1445d64a671480529a47c5ba', class: "tabs-container", part: "container" }, h("div", { key: '20e0d5a75efa9e55c501d350c1837c21e8118367', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, h("slot", { key: '46c28a21da056e1d10e87e3865a86c8d08f761d0' })))));
+    }
+    static get is() { return "bh-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabsType",
+                    "resolved": "\"contained\" | \"underline\"",
+                    "references": {
+                        "TabsType": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-tabs/bh-tabs.tsx",
+                            "id": "src/components/bh-tabs/bh-tabs.tsx::TabsType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type of tabs: underline or contained style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'contained'"
+            },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TabsOrientation",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {
+                        "TabsOrientation": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-tabs/bh-tabs.tsx",
+                            "id": "src/components/bh-tabs/bh-tabs.tsx::TabsOrientation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The orientation of the tabs: horizontal or vertical"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "orientation",
+                "defaultValue": "'horizontal'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tabs should take up the full width of the container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the currently active tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhTabChange",
+                "name": "bhTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active tab changes"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "bhTabItemClick",
+                "method": "handleTabItemClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=bh-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-tabs.js","sourceRoot":"","sources":["../../../src/components/bh-tabs/bh-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,GACP,MAAM,eAAe,CAAC;AAKvB;;GAEG;AAMH,MAAM,OAAO,MAAM;IACjB;;OAEG;IACK,IAAI,GAAa,WAAW,CAAC;IAErC;;OAEG;IACK,WAAW,GAAoB,YAAY,CAAC;IAEpD;;OAEG;IACK,SAAS,GAAY,KAAK,CAAC;IAEnC;;OAEG;IACsB,KAAK,GAAW,EAAE,CAAC;IAE5C;;OAEG;IACuC,WAAW,CAAwB;IAG7E,kBAAkB,CAAC,KAA0B;QAC3C,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;QAC3B,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG;YAClB,IAAI,EAAE,IAAI;YACV,CAAC,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC3B,CAAC,QAAQ,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI;YAClC,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,WAAW;YACtB,4DAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,WAAW;gBAC1C,4DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,sBACI,IAAI,CAAC,WAAW;oBAElC,8DAAQ,CACJ,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n} from '@stencil/core';\n\nexport type TabsType = 'underline' | 'contained';\nexport type TabsOrientation = 'horizontal' | 'vertical';\n\n/**\n * @slot - Tab items (bh-tab-item components)\n */\n@Component({\n  tag: 'bh-tabs',\n  styleUrl: 'bh-tabs.css',\n  shadow: true,\n})\nexport class BhTabs {\n  /**\n   * The type of tabs: underline or contained style\n   */\n  @Prop() type: TabsType = 'contained';\n\n  /**\n   * The orientation of the tabs: horizontal or vertical\n   */\n  @Prop() orientation: TabsOrientation = 'horizontal';\n\n  /**\n   * Whether the tabs should take up the full width of the container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * The value of the currently active tab\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Emitted when the active tab changes\n   */\n  @Event({ bubbles: true, composed: true }) bhTabChange!: EventEmitter<string>;\n\n  @Listen('bhTabItemClick')\n  handleTabItemClick(event: CustomEvent<string>): void {\n    const value = event.detail;\n    if (this.value !== value) {\n      this.value = value;\n      this.bhTabChange.emit(value);\n    }\n  }\n\n  render() {\n    const hostClasses = {\n      tabs: true,\n      [`tabs-${this.type}`]: true,\n      [`tabs-${this.orientation}`]: true,\n      'tabs-full-width': this.fullWidth,\n    };\n\n    return (\n      <Host class={hostClasses}>\n        <div class=\"tabs-container\" part=\"container\">\n          <div\n            class=\"tabs-list\"\n            part=\"list\"\n            role=\"tablist\"\n            aria-orientation={this.orientation}\n          >\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,180 @@
+/* Tag Base Styles */
+:host {
+  display: inline-block;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  font-family: var(--font-inter);
+  font-weight: var(--weight-medium);
+  background-color: var(--color-white);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  cursor: default;
+  user-select: none;
+}
+
+/* Clickable Tags */
+.tag-dismissible {
+  cursor: pointer;
+}
+
+/* Size Variants */
+.tag-sm {
+  padding: var(--spacing-xxs) var(--spacing-md);
+  font-size: var(--text-sm-size);
+  line-height: var(--text-sm-line);
+}
+
+.tag-sm.tag-dismissible {
+  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);
+}
+
+.tag-md {
+  padding: var(--spacing-xxs) var(--spacing-md);
+  font-size: var(--text-md-size);
+  line-height: var(--text-md-line);
+}
+
+.tag-md.tag-dismissible {
+  padding: var(--spacing-xxs) var(--spacing-xs) var(--spacing-xxs) var(--spacing-md);
+}
+
+.tag-lg {
+  padding: var(--spacing-xs) var(--spacing-lg);
+  font-size: var(--text-md-size);
+  line-height: var(--text-md-line);
+}
+
+.tag-lg.tag-dismissible {
+  padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) var(--spacing-lg);
+}
+
+/* Content Layout */
+.tag-content {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+/* Avatar Variant - specific adjustments */
+.tag-avatar .tag-content {
+  gap: var(--spacing-sm);
+}
+
+.tag-sm.tag-avatar {
+  padding-left: var(--spacing-xs);
+}
+
+.tag-sm.tag-avatar.tag-dismissible {
+  padding-left: var(--spacing-xs);
+}
+
+.tag-md.tag-avatar {
+  padding-left: var(--spacing-sm);
+}
+
+.tag-md.tag-avatar.tag-dismissible {
+  padding-left: var(--spacing-sm);
+}
+
+.tag-lg.tag-avatar {
+  padding-left: var(--spacing-sm);
+}
+
+.tag-lg.tag-avatar.tag-dismissible {
+  padding-left: var(--spacing-sm);
+}
+
+/* Label wrapper for tooltip positioning */
+.tag-label-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+}
+
+/* Label */
+.tag-label {
+  color: var(--color-neutral-700);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Dismiss Button */
+.tag-dismiss {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: var(--spacing-xxs);
+  border-radius: var(--radius-xs);
+  transition: background-color 0.2s ease;
+  width: var(--spacing-xl);
+  height: var(--spacing-xl);
+  flex-shrink: 0;
+}
+
+.tag-lg .tag-dismiss {
+  padding: var(--spacing-xs);
+  width: var(--spacing-2xl);
+  height: var(--spacing-2xl);
+}
+
+.tag-dismiss:hover {
+  background-color: var(--color-neutral-100);
+}
+
+.tag-dismiss:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.tag-dismiss-icon {
+  font-size: var(--text-sm-size);
+  color: var(--color-neutral-500);
+  line-height: 1;
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+}
+
+.tag-lg .tag-dismiss-icon {
+  font-size: var(--text-md-size);
+}
+
+/* Disabled State */
+.tag-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Hover State for Dismissible Tags */
+.tag:hover {
+  border-color: var(--color-neutral-300);
+}
+
+.tag-disabled:hover {
+  border-color: var(--color-neutral-200);
+}
+
+/* Dismiss animation */
+.animate-dismiss {
+  animation: dismiss 0.2s ease-out forwards;
+}
+
+@keyframes dismiss {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+}

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

@@ -0,0 +1,238 @@
+import { h } from "@stencil/core";
+export class BhTag {
+    /** Tag variant */
+    variant = 'text-only';
+    /** Tag size */
+    size = 'md';
+    /** Tag label text */
+    label = 'Label';
+    /** Whether the tag is dismissible */
+    dismissible = false;
+    /** Whether the tag is disabled */
+    disabled = false;
+    /** Maximum width for the label (in pixels) */
+    maxWidth = 120;
+    /** Avatar image source (for avatar variant) */
+    avatarSrc = '';
+    /** Internal dismissing state */
+    isDismissing = false;
+    /** Emitted when dismiss button is clicked */
+    bhDismiss;
+    handleDismiss = (event) => {
+        event.stopPropagation();
+        if (this.dismissible && !this.disabled && !this.isDismissing) {
+            this.isDismissing = true;
+            // Simulate animation duration
+            setTimeout(() => {
+                this.bhDismiss.emit();
+                this.isDismissing = false;
+            }, 200);
+        }
+    };
+    render() {
+        const classes = {
+            'tag': true,
+            [`tag-${this.size}`]: true,
+            [`tag-${this.variant}`]: true,
+            'tag-dismissible': this.dismissible,
+            'tag-disabled': this.disabled,
+            'animate-dismiss': this.isDismissing,
+        };
+        const labelStyle = {
+            maxWidth: `${this.maxWidth}px`,
+        };
+        return (h("span", { key: '1ca1b5c6087d2ab438975c186b35bba2e6efa577', class: classes }, h("div", { key: '154d89498369ad08173f16fd04a29dd58b65aba0', class: "tag-content" }, this.variant === 'avatar' && (h("bh-avatar", { key: '85475fb7ed5ec15a68951c1048ce050c43044671', size: "xxs", type: this.avatarSrc ? 'image' : 'placeholder', imageSrc: this.avatarSrc })), h("span", { key: '5acc3f84536abd3b2603fe2f9c015fcb676375e7', class: "tag-label-wrapper" }, h("span", { key: '6314f8db254195d2f412467f349e2a372c9c379f', class: "tag-label", style: labelStyle }, this.label))), this.dismissible && (h("button", { key: '77377b1400258cf418da5391b54229d9e76c715f', class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, type: "button", "aria-label": "Dismiss" }, h("span", { key: 'd6d6f39c326413da4f155974359960bd121dcbdb', class: "material-symbols-outlined tag-dismiss-icon" }, "close")))));
+    }
+    static get is() { return "bh-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagVariant",
+                    "resolved": "\"avatar\" | \"text-only\"",
+                    "references": {
+                        "TagVariant": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-tag/bh-tag.tsx",
+                            "id": "src/components/bh-tag/bh-tag.tsx::TagVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'text-only'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TagSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {
+                        "TagSize": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-tag/bh-tag.tsx",
+                            "id": "src/components/bh-tag/bh-tag.tsx::TagSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tag label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Label'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is dismissible"
+                },
+                "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 tag is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "maxWidth": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum width for the label (in pixels)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-width",
+                "defaultValue": "120"
+            },
+            "avatarSrc": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Avatar image source (for avatar variant)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "avatar-src",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDismissing": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhDismiss",
+                "name": "bhDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when dismiss button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-tag.js","sourceRoot":"","sources":["../../../src/components/bh-tag/bh-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAU/E,MAAM,OAAO,KAAK;IAChB,kBAAkB;IACV,OAAO,GAAe,WAAW,CAAC;IAE1C,eAAe;IACP,IAAI,GAAY,IAAI,CAAC;IAE7B,qBAAqB;IACb,KAAK,GAAW,OAAO,CAAC;IAEhC,qCAAqC;IAC7B,WAAW,GAAY,KAAK,CAAC;IAErC,kCAAkC;IAC1B,QAAQ,GAAY,KAAK,CAAC;IAElC,8CAA8C;IACtC,QAAQ,GAAW,GAAG,CAAC;IAE/B,+CAA+C;IACvC,SAAS,GAAW,EAAE,CAAC;IAE/B,gCAAgC;IACvB,YAAY,GAAY,KAAK,CAAC;IAEvC,6CAA6C;IACpC,SAAS,CAAsB;IAEhC,aAAa,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC5C,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YAC7D,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;YAEzB,8BAA8B;YAC9B,UAAU,CAAC,GAAG,EAAE;gBACd,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;gBACtB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC5B,CAAC,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,KAAK,EAAE,IAAI;YACX,CAAC,OAAO,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;YAC1B,CAAC,OAAO,IAAI,CAAC,OAAO,EAAE,CAAC,EAAE,IAAI;YAC7B,iBAAiB,EAAE,IAAI,CAAC,WAAW;YACnC,cAAc,EAAE,IAAI,CAAC,QAAQ;YAC7B,iBAAiB,EAAE,IAAI,CAAC,YAAY;SACrC,CAAC;QAEF,MAAM,UAAU,GAAG;YACjB,QAAQ,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI;SAC/B,CAAC;QAEF,OAAO,CACL,6DAAM,KAAK,EAAE,OAAO;YAClB,4DAAK,KAAK,EAAC,aAAa;gBAErB,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,CAC5B,kEAAW,IAAI,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,SAAS,GAAc,CAC7G;gBAGD,6DAAM,KAAK,EAAC,mBAAmB;oBAC7B,6DAAM,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,UAAU,IACtC,IAAI,CAAC,KAAK,CACN,CACF,CACH;YAGL,IAAI,CAAC,WAAW,IAAI,CACnB,+DACE,KAAK,EAAC,aAAa,EACnB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,gBACF,SAAS;gBAEpB,6DAAM,KAAK,EAAC,4CAA4C,YAEjD,CACA,CACV,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, Event, EventEmitter, h } from '@stencil/core';\n\nexport type TagVariant = 'text-only' | 'avatar';\nexport type TagSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'bh-tag',\n  styleUrl: 'bh-tag.css',\n  shadow: true,\n})\nexport class BhTag {\n  /** Tag variant */\n  @Prop() variant: TagVariant = 'text-only';\n\n  /** Tag size */\n  @Prop() size: TagSize = 'md';\n\n  /** Tag label text */\n  @Prop() label: string = 'Label';\n\n  /** Whether the tag is dismissible */\n  @Prop() dismissible: boolean = false;\n\n  /** Whether the tag is disabled */\n  @Prop() disabled: boolean = false;\n\n  /** Maximum width for the label (in pixels) */\n  @Prop() maxWidth: number = 120;\n\n  /** Avatar image source (for avatar variant) */\n  @Prop() avatarSrc: string = '';\n\n  /** Internal dismissing state */\n  @State() isDismissing: boolean = false;\n\n  /** Emitted when dismiss button is clicked */\n  @Event() bhDismiss!: EventEmitter<void>;\n\n  private handleDismiss = (event: MouseEvent) => {\n    event.stopPropagation();\n\n    if (this.dismissible && !this.disabled && !this.isDismissing) {\n      this.isDismissing = true;\n\n      // Simulate animation duration\n      setTimeout(() => {\n        this.bhDismiss.emit();\n        this.isDismissing = false;\n      }, 200);\n    }\n  };\n\n  render() {\n    const classes = {\n      'tag': true,\n      [`tag-${this.size}`]: true,\n      [`tag-${this.variant}`]: true,\n      'tag-dismissible': this.dismissible,\n      'tag-disabled': this.disabled,\n      'animate-dismiss': this.isDismissing,\n    };\n\n    const labelStyle = {\n      maxWidth: `${this.maxWidth}px`,\n    };\n\n    return (\n      <span class={classes}>\n        <div class=\"tag-content\">\n          {/* Avatar variant */}\n          {this.variant === 'avatar' && (\n            <bh-avatar size=\"xxs\" type={this.avatarSrc ? 'image' : 'placeholder'} imageSrc={this.avatarSrc}></bh-avatar>\n          )}\n\n          {/* Label */}\n          <span class=\"tag-label-wrapper\">\n            <span class=\"tag-label\" style={labelStyle}>\n              {this.label}\n            </span>\n          </span>\n        </div>\n\n        {/* Dismiss button (if dismissible) */}\n        {this.dismissible && (\n          <button\n            class=\"tag-dismiss\"\n            onClick={this.handleDismiss}\n            disabled={this.disabled}\n            type=\"button\"\n            aria-label=\"Dismiss\"\n          >\n            <span class=\"material-symbols-outlined tag-dismiss-icon\">\n              close\n            </span>\n          </button>\n        )}\n      </span>\n    );\n  }\n}\n"]}