@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1,144 @@
+import { h, Host } from "@stencil/core";
+const MODAL_WIDTHS = {
+    sm: '400px',
+    md: '480px',
+    lg: '520px',
+    xl: '640px',
+    xxl: '688px',
+};
+export class BhModal {
+    /**
+     * Whether the modal is visible
+     */
+    visible = false;
+    /**
+     * Whether to show the backdrop overlay
+     */
+    overlay = true;
+    /**
+     * Preset width of the modal: sm (400px), md (480px), lg (520px), xl (640px), xxl (688px)
+     */
+    width = 'sm';
+    /**
+     * Emitted when the modal is closed (overlay click or close button)
+     */
+    bhClose;
+    handleClose = () => {
+        this.bhClose.emit();
+    };
+    handleOverlayClick = (event) => {
+        if (event.target === event.currentTarget) {
+            this.handleClose();
+        }
+    };
+    render() {
+        if (!this.visible)
+            return null;
+        const modalClasses = {
+            'modal-wrapper': true,
+            'modal-with-overlay': this.overlay,
+        };
+        return (h(Host, null, h("div", { class: modalClasses, onClick: this.handleOverlayClick }, this.overlay && h("div", { class: "modal-overlay" }), h("div", { class: "modal", style: { maxWidth: MODAL_WIDTHS[this.width] } }, h("slot", { name: "header" }), h("slot", null), h("slot", { name: "actions" })))));
+    }
+    static get is() { return "bh-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the modal is visible"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "visible",
+                "defaultValue": "false"
+            },
+            "overlay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the backdrop overlay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "overlay",
+                "defaultValue": "true"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ModalWidth",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xxl\"",
+                    "references": {
+                        "ModalWidth": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-modal/bh-modal.tsx",
+                            "id": "src/components/bh-modal/bh-modal.tsx::ModalWidth"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Preset width of the modal: sm (400px), md (480px), lg (520px), xl (640px), xxl (688px)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'sm'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhClose",
+                "name": "bhClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the modal is closed (overlay click or close button)"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-modal.js","sourceRoot":"","sources":["../../../src/components/bh-modal/bh-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAI9E,MAAM,YAAY,GAA+B;IAC/C,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;IACX,GAAG,EAAE,OAAO;CACb,CAAC;AAOF,MAAM,OAAO,OAAO;IAClB;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC;;OAEG;IACK,OAAO,GAAY,IAAI,CAAC;IAEhC;;OAEG;IACK,KAAK,GAAe,IAAI,CAAC;IAEjC;;OAEG;IACM,OAAO,CAAsB;IAE9B,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;IACtB,CAAC,CAAC;IAEM,kBAAkB,GAAG,CAAC,KAAiB,EAAQ,EAAE;QACvD,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,aAAa,EAAE,CAAC;YACzC,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAC;QAE/B,MAAM,YAAY,GAAG;YACnB,eAAe,EAAE,IAAI;YACrB,oBAAoB,EAAE,IAAI,CAAC,OAAO;SACnC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI;YACH,WAAK,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,CAAC,kBAAkB;gBACvD,IAAI,CAAC,OAAO,IAAI,WAAK,KAAK,EAAC,eAAe,GAAG;gBAE9C,WAAK,KAAK,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;oBAC9D,YAAM,IAAI,EAAC,QAAQ,GAAG;oBACtB,eAAQ;oBACR,YAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';\n\nconst MODAL_WIDTHS: Record<ModalWidth, string> = {\n  sm: '400px',\n  md: '480px',\n  lg: '520px',\n  xl: '640px',\n  xxl: '688px',\n};\n\n@Component({\n  tag: 'bh-modal',\n  styleUrl: 'bh-modal.css',\n  shadow: true,\n})\nexport class BhModal {\n  /**\n   * Whether the modal is visible\n   */\n  @Prop() visible: boolean = false;\n\n  /**\n   * Whether to show the backdrop overlay\n   */\n  @Prop() overlay: boolean = true;\n\n  /**\n   * Preset width of the modal: sm (400px), md (480px), lg (520px), xl (640px), xxl (688px)\n   */\n  @Prop() width: ModalWidth = 'sm';\n\n  /**\n   * Emitted when the modal is closed (overlay click or close button)\n   */\n  @Event() bhClose!: EventEmitter<void>;\n\n  private handleClose = (): void => {\n    this.bhClose.emit();\n  };\n\n  private handleOverlayClick = (event: MouseEvent): void => {\n    if (event.target === event.currentTarget) {\n      this.handleClose();\n    }\n  };\n\n  render() {\n    if (!this.visible) return null;\n\n    const modalClasses = {\n      'modal-wrapper': true,\n      'modal-with-overlay': this.overlay,\n    };\n\n    return (\n      <Host>\n        <div class={modalClasses} onClick={this.handleOverlayClick}>\n          {this.overlay && <div class=\"modal-overlay\" />}\n\n          <div class=\"modal\" style={{ maxWidth: MODAL_WIDTHS[this.width] }}>\n            <slot name=\"header\" />\n            <slot />\n            <slot name=\"actions\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/collection/components/bh-modal-actions/bh-modal-actions.css

@@ -0,0 +1,124 @@
+:host {
+  display: block;
+  width: 100%;
+}
+
+.modal-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-none, 0px);
+  padding-top: var(--spacing-3xl, 24px);
+  width: 100%;
+}
+
+.divider {
+  height: 1px;
+  width: 100%;
+  flex-shrink: 0;
+  background-color: var(--color-border-secondary, #dcdfea);
+  margin-bottom: var(--spacing-3xl, 24px);
+}
+
+.modal-actions-content {
+  display: flex;
+  gap: var(--spacing-lg, 12px);
+  padding: 0 var(--spacing-3xl, 24px);
+  padding-bottom: var(--spacing-3xl, 24px);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* Full width buttons layout */
+.modal-actions-content--fill {
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.modal-actions-content--fill bh-button {
+  flex: 1;
+  display: block;
+  width: 100%;
+}
+
+.modal-actions-content--fill bh-button::part(button) {
+  width: 100%;
+}
+
+.modal-actions-content--fill .btn-destructive {
+  flex: 1;
+}
+
+/* Right-aligned layout with optional left content */
+.modal-actions-content--right {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.actions-left {
+  display: flex;
+  gap: var(--spacing-lg, 12px);
+  align-items: center;
+}
+
+.actions-right {
+  display: flex;
+  gap: var(--spacing-lg, 12px);
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/* Mobile responsive: stack buttons vertically */
+@media (max-width: 480px) {
+  .modal-actions-content--fill {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .modal-actions-content--fill bh-button,
+  .modal-actions-content--fill .btn-destructive {
+    flex: none;
+    width: 100%;
+  }
+
+  /* Reverse order on mobile so primary is first */
+  .modal-actions-content--fill {
+    flex-direction: column-reverse;
+  }
+}
+
+/* Destructive button styles */
+.btn-destructive {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--button-content-gap, 4px);
+  height: 40px;
+  padding: 0 var(--button-padding-x, 12px);
+  background-color: var(--color-bg-error, #d6341f);
+  color: var(--color-fg-white, #ffffff);
+  border: none;
+  border-radius: var(--radius-md, 8px);
+  font-family: var(--font-family-body, 'Inter', sans-serif);
+  font-weight: var(--weight-semibold, 600);
+  font-size: var(--button-font-size, 14px);
+  line-height: var(--text-sm-line-height, 20px);
+  letter-spacing: var(--letter-spacing-normal, 0px);
+  cursor: pointer;
+  overflow: hidden;
+  transition: background-color 0.15s ease;
+}
+
+.btn-destructive:hover {
+  background-color: var(--color-bg-error-hover, #b82d1a);
+}
+
+.btn-destructive:focus-visible {
+  outline: 2px solid var(--color-bg-error, #d6341f);
+  outline-offset: 2px;
+}
+
+.btn-destructive:active {
+  background-color: var(--color-bg-error-active, #9a2515);
+}

package/collection/components/bh-modal-actions/bh-modal-actions.js

@@ -0,0 +1,208 @@
+import { h, Host } from "@stencil/core";
+export class BhModalActions {
+    /**
+     * Layout type for the actions:
+     * - 'fill': Buttons take full width
+     * - 'right-aligned': Buttons aligned to the right with optional left content slot
+     */
+    type = 'fill';
+    /**
+     * Whether to show destructive styling on primary button
+     */
+    destructive = false;
+    /**
+     * Primary/destructive action button label
+     */
+    primaryLabel = 'Confirm';
+    /**
+     * Secondary action button label
+     */
+    secondaryLabel = 'Cancel';
+    /**
+     * Whether to show the divider line above actions
+     */
+    divider = false;
+    /**
+     * Emitted when the primary/destructive action button is clicked
+     */
+    bhPrimaryAction;
+    /**
+     * Emitted when the secondary action button is clicked
+     */
+    bhSecondaryAction;
+    handlePrimaryAction = () => {
+        this.bhPrimaryAction.emit();
+    };
+    handleSecondaryAction = () => {
+        this.bhSecondaryAction.emit();
+    };
+    renderButtons() {
+        const isRightAligned = this.type === 'right-aligned';
+        const primaryButton = this.destructive ? (h("button", { class: "btn-destructive", onClick: this.handlePrimaryAction, type: "button" }, this.primaryLabel)) : (h("bh-button", { hierarchy: "primary", icon: "none", size: "md", label: this.primaryLabel, onBhClick: this.handlePrimaryAction }));
+        const secondaryButton = (h("bh-button", { hierarchy: "secondary", icon: "none", size: "md", label: this.secondaryLabel, onBhClick: this.handleSecondaryAction }));
+        if (isRightAligned) {
+            return (h("div", { class: "modal-actions-content modal-actions-content--right" }, h("div", { class: "actions-left" }, h("slot", { name: "left-content" })), h("div", { class: "actions-right" }, secondaryButton, primaryButton)));
+        }
+        // Full width buttons (stacks vertically on mobile via CSS)
+        return (h("div", { class: "modal-actions-content modal-actions-content--fill" }, secondaryButton, primaryButton));
+    }
+    render() {
+        return (h(Host, { key: '2855fec7b47705090d0524674df5a02ea31b8f97' }, h("div", { key: '08c35a3b9237857e27a070b609074c97d4b9fb36', class: "modal-actions" }, this.divider && h("div", { key: 'c392d58bfa6b31c58e704dedb01e9b331a14f567', class: "divider" }), this.renderButtons())));
+    }
+    static get is() { return "bh-modal-actions"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-modal-actions.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-modal-actions.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ModalActionsType",
+                    "resolved": "\"fill\" | \"right-aligned\"",
+                    "references": {
+                        "ModalActionsType": {
+                            "location": "local",
+                            "path": "/home/runner/work/bellhopos/bellhopos/packages/bellhop-core/src/components/bh-modal-actions/bh-modal-actions.tsx",
+                            "id": "src/components/bh-modal-actions/bh-modal-actions.tsx::ModalActionsType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Layout type for the actions:\n- 'fill': Buttons take full width\n- 'right-aligned': Buttons aligned to the right with optional left content slot"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'fill'"
+            },
+            "destructive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show destructive styling on primary button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "destructive",
+                "defaultValue": "false"
+            },
+            "primaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Primary/destructive action button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary-label",
+                "defaultValue": "'Confirm'"
+            },
+            "secondaryLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Secondary action button label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary-label",
+                "defaultValue": "'Cancel'"
+            },
+            "divider": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to show the divider line above actions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "divider",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhPrimaryAction",
+                "name": "bhPrimaryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the primary/destructive action button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "bhSecondaryAction",
+                "name": "bhSecondaryAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the secondary action button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=bh-modal-actions.js.map

package/collection/components/bh-modal-actions/bh-modal-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-modal-actions.js","sourceRoot":"","sources":["../../../src/components/bh-modal-actions/bh-modal-actions.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS9E,MAAM,OAAO,cAAc;IACzB;;;;OAIG;IACK,IAAI,GAAqB,MAAM,CAAC;IAExC;;OAEG;IACK,WAAW,GAAY,KAAK,CAAC;IAErC;;OAEG;IACK,YAAY,GAAW,SAAS,CAAC;IAEzC;;OAEG;IACK,cAAc,GAAW,QAAQ,CAAC;IAE1C;;OAEG;IACK,OAAO,GAAY,KAAK,CAAC;IAEjC;;OAEG;IACM,eAAe,CAAsB;IAE9C;;OAEG;IACM,iBAAiB,CAAsB;IAExC,mBAAmB,GAAG,GAAS,EAAE;QACvC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEM,qBAAqB,GAAG,GAAS,EAAE;QACzC,IAAI,CAAC,iBAAiB,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC,CAAC;IAEM,aAAa;QACnB,MAAM,cAAc,GAAG,IAAI,CAAC,IAAI,KAAK,eAAe,CAAC;QAErD,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CACvC,cACE,KAAK,EAAC,iBAAiB,EACvB,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,CACX,CACV,CAAC,CAAC,CAAC,CACF,iBACE,SAAS,EAAC,SAAS,EACnB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,SAAS,EAAE,IAAI,CAAC,mBAAmB,GACnC,CACH,CAAC;QAEF,MAAM,eAAe,GAAG,CACtB,iBACE,SAAS,EAAC,WAAW,EACrB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,IAAI,EACT,KAAK,EAAE,IAAI,CAAC,cAAc,EAC1B,SAAS,EAAE,IAAI,CAAC,qBAAqB,GACrC,CACH,CAAC;QAEF,IAAI,cAAc,EAAE,CAAC;YACnB,OAAO,CACL,WAAK,KAAK,EAAC,oDAAoD;gBAC7D,WAAK,KAAK,EAAC,cAAc;oBACvB,YAAM,IAAI,EAAC,cAAc,GAAG,CACxB;gBACN,WAAK,KAAK,EAAC,eAAe;oBACvB,eAAe;oBACf,aAAa,CACV,CACF,CACP,CAAC;QACJ,CAAC;QAED,2DAA2D;QAC3D,OAAO,CACL,WAAK,KAAK,EAAC,mDAAmD;YAC3D,eAAe;YACf,aAAa,CACV,CACP,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,eAAe;gBACvB,IAAI,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,SAAS,GAAG;gBACvC,IAAI,CAAC,aAAa,EAAE,CACjB,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type ModalActionsType = 'fill' | 'right-aligned';\n\n@Component({\n  tag: 'bh-modal-actions',\n  styleUrl: 'bh-modal-actions.css',\n  shadow: true,\n})\nexport class BhModalActions {\n  /**\n   * Layout type for the actions:\n   * - 'fill': Buttons take full width\n   * - 'right-aligned': Buttons aligned to the right with optional left content slot\n   */\n  @Prop() type: ModalActionsType = 'fill';\n\n  /**\n   * Whether to show destructive styling on primary button\n   */\n  @Prop() destructive: boolean = false;\n\n  /**\n   * Primary/destructive action button label\n   */\n  @Prop() primaryLabel: string = 'Confirm';\n\n  /**\n   * Secondary action button label\n   */\n  @Prop() secondaryLabel: string = 'Cancel';\n\n  /**\n   * Whether to show the divider line above actions\n   */\n  @Prop() divider: boolean = false;\n\n  /**\n   * Emitted when the primary/destructive action button is clicked\n   */\n  @Event() bhPrimaryAction!: EventEmitter<void>;\n\n  /**\n   * Emitted when the secondary action button is clicked\n   */\n  @Event() bhSecondaryAction!: EventEmitter<void>;\n\n  private handlePrimaryAction = (): void => {\n    this.bhPrimaryAction.emit();\n  };\n\n  private handleSecondaryAction = (): void => {\n    this.bhSecondaryAction.emit();\n  };\n\n  private renderButtons() {\n    const isRightAligned = this.type === 'right-aligned';\n\n    const primaryButton = this.destructive ? (\n      <button\n        class=\"btn-destructive\"\n        onClick={this.handlePrimaryAction}\n        type=\"button\"\n      >\n        {this.primaryLabel}\n      </button>\n    ) : (\n      <bh-button\n        hierarchy=\"primary\"\n        icon=\"none\"\n        size=\"md\"\n        label={this.primaryLabel}\n        onBhClick={this.handlePrimaryAction}\n      />\n    );\n\n    const secondaryButton = (\n      <bh-button\n        hierarchy=\"secondary\"\n        icon=\"none\"\n        size=\"md\"\n        label={this.secondaryLabel}\n        onBhClick={this.handleSecondaryAction}\n      />\n    );\n\n    if (isRightAligned) {\n      return (\n        <div class=\"modal-actions-content modal-actions-content--right\">\n          <div class=\"actions-left\">\n            <slot name=\"left-content\" />\n          </div>\n          <div class=\"actions-right\">\n            {secondaryButton}\n            {primaryButton}\n          </div>\n        </div>\n      );\n    }\n\n    // Full width buttons (stacks vertically on mobile via CSS)\n    return (\n      <div class=\"modal-actions-content modal-actions-content--fill\">\n        {secondaryButton}\n        {primaryButton}\n      </div>\n    );\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"modal-actions\">\n          {this.divider && <div class=\"divider\" />}\n          {this.renderButtons()}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/collection/components/bh-modal-header/bh-modal-header.css

@@ -0,0 +1,106 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-none, 0px);
+  width: 100%;
+}
+
+.modal-header {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-none, 0px);
+  width: 100%;
+  position: relative;
+}
+
+.modal-header--center {
+  align-items: center;
+}
+
+.modal-header--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.modal-header-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xl, 16px);
+  padding: var(--spacing-3xl, 24px);
+  padding-bottom: var(--spacing-none, 0px);
+  width: 100%;
+}
+
+.modal-header-content--center {
+  align-items: center;
+}
+
+.modal-header-content--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+}
+
+.modal-text-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-xs, 4px);
+  width: 100%;
+  flex: 1;
+  min-width: 0;
+}
+
+.modal-text-content--center {
+  align-items: center;
+  text-align: center;
+}
+
+.modal-text-content--horizontal {
+  flex: 1;
+  min-width: 1px;
+  min-height: 1px;
+}
+
+.modal-title {
+  margin: 0;
+  font-family: var(--font-family-body, 'Inter', sans-serif);
+  font-weight: var(--weight-semibold, 600);
+  font-size: var(--text-lg-size, 18px);
+  line-height: var(--text-lg-line-height, 28px);
+  letter-spacing: var(--letter-spacing-normal, 0px);
+  color: var(--color-text-primary, #111322);
+  width: 100%;
+}
+
+.modal-description {
+  margin: 0;
+  font-family: var(--font-family-body, 'Inter', sans-serif);
+  font-weight: var(--weight-regular, 400);
+  font-size: var(--text-sm-size, 14px);
+  line-height: var(--text-sm-line-height, 20px);
+  letter-spacing: var(--letter-spacing-normal, 0px);
+  color: var(--color-text-tertiary, #4a5578);
+  width: 100%;
+}
+
+.close-button {
+  position: absolute;
+  top: var(--spacing-lg, 12px);
+  right: var(--spacing-lg, 12px);
+}
+
+.padding-bottom {
+  height: 20px;
+  width: 100%;
+  flex-shrink: 0;
+}
+
+.divider {
+  height: 1px;
+  width: 100%;
+  flex-shrink: 0;
+  background-color: var(--color-border-secondary, #dcdfea);
+}