@actabldesign/bellhop-core 0.0.3

package/components/p-CQBqn1IO.js

@@ -0,0 +1,67 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+
+const bhPageNavigationSingleLevelCss = ".page-navigation{width:320px;min-width:280px;background-color:var(--color-white);padding:var(--spacing-xl) var(--spacing-md);font-family:var(--font-inter);height:100vh;overflow-y:auto;border-right:1px solid var(--color-neutral-200);box-sizing:border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}.page-navigation-header{margin-bottom:var(--spacing-3xl)}.page-navigation-title{font-size:var(--text-xl-size);font-weight:var(--weight-semibold);line-height:var(--text-xl-line);color:var(--color-neutral-900);padding:var(--spacing-none) var(--spacing-xl);margin:0}.page-navigation-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.page-navigation-single-level{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:6px;margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent}.page-navigation-single-level.active{background-color:transparent;border:1px solid transparent}.page-navigation-single-level:hover{background-color:var(--color-neutral-50) !important}.page-navigation-multi-level{margin:var(--spacing-none) var(--spacing-xs)}.page-navigation-multi-level-parent{display:flex;align-items:center;padding:var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:40px;max-height:44px;box-sizing:border-box;border-radius:var(--radius-sm);background-color:transparent;border:1px solid transparent}.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent{background-color:transparent;border:1px solid transparent}.page-navigation-multi-level-parent:hover{background-color:var(--color-neutral-50) !important}.page-navigation-children{margin-top:var(--spacing-xs);margin-bottom:var(--spacing-xs);position:relative;margin-left:var(--spacing-xl);display:flex;flex-direction:column;gap:var(--spacing-xs);max-height:1000px;opacity:1;transition:max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1)}.page-navigation-children.collapsed{max-height:0;opacity:0;margin-top:0;margin-bottom:0}.page-navigation-children::before{content:'';position:absolute;left:0;top:-2px;height:calc(100% + 4px);width:2px;background-color:var(--color-neutral-200);margin-left:var(--spacing-sm);z-index:2}.page-navigation-child{display:flex;align-items:center;padding:var(--spacing-md) var(--spacing-lg);cursor:pointer;gap:var(--spacing-md);position:relative;transition:all 0.15s ease;min-height:36px;box-sizing:border-box;border-radius:var(--radius-sm);margin:var(--spacing-none) var(--spacing-xs);background-color:transparent;border:1px solid transparent;margin-left:9px}.page-navigation-child:hover:not(.active){background-color:var(--color-neutral-50);position:relative;z-index:1}.page-navigation-child:hover:not(.active)::after{content:'';position:absolute;left:-20px;top:0;bottom:0;width:20px;background-color:var(--color-neutral-100);z-index:1;border-radius:var(--radius-sm)}.page-navigation-child.active{background-color:transparent}.page-navigation-child.active::before{content:'';position:absolute;left:-4.5px;top:50%;transform:translateY(-50%);width:2px;height:24px;background-color:var(--color-brand-600);z-index:3}.page-navigation-item-content,.page-navigation-child-content{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.page-navigation-item-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease}.page-navigation-animate-smooth{transform-origin:top center;transition:all var(--animation-duration-normal) var(--animation-ease-enter)}.page-navigation-chevron-icon{flex-shrink:0;color:var(--color-neutral-600);font-size:20px;width:20px;height:20px;transition:color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth)}.page-navigation-chevron-icon.expanded{transform:rotate(180deg)}.page-navigation-single-level.active .page-navigation-item-icon,.page-navigation-multi-level.has-active-child .page-navigation-item-icon{color:var(--color-neutral-900)}.page-navigation-item-label,.page-navigation-child-label{font-family:'Inter', sans-serif;font-size:14px;font-weight:500;line-height:20px;color:var(--color-neutral-600);flex:1;transition:all 0.15s ease}.page-navigation-single-level.active .page-navigation-item-label,.page-navigation-multi-level.has-active-child .page-navigation-item-label{color:var(--color-neutral-900);font-weight:600}.page-navigation-child.active .page-navigation-child-label{color:var(--color-brand-600);font-weight:600}.page-navigation-item-badge,.page-navigation-child-badge{margin-left:auto}@media (max-width: 768px){.page-navigation{width:280px;min-width:280px}}";
+
+const BhPageNavigationSingleLevel = /*@__PURE__*/ proxyCustomElement(class BhPageNavigationSingleLevel extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemClick = createEvent(this, "bhItemClick");
+    }
+    /**
+     * Label text for the navigation item
+     */
+    label;
+    /**
+     * Material icon name
+     */
+    icon = 'radio_button_unchecked';
+    /**
+     * Whether the item is currently active/selected
+     */
+    isActive = false;
+    /**
+     * Event emitted when the navigation item is clicked
+     */
+    bhItemClick;
+    handleClick = () => {
+        this.bhItemClick.emit();
+    };
+    getItemClasses() {
+        return {
+            'page-navigation-single-level': true,
+            'page-navigation-animate-smooth': true,
+            'active': this.isActive,
+        };
+    }
+    render() {
+        return (h(Host, { key: '5387b77b73fdc815daea9186650806bde7df23aa' }, h("div", { key: '8ce567faedcab4229e8255b4641d226e48b689ba', class: this.getItemClasses(), onClick: () => this.handleClick() }, h("div", { key: 'e7cc690ae45617f1c0a52553b8e10dee57862d8a', class: "page-navigation-item-content" }, h("span", { key: '3ae6648a0b4e96851548299c0a40cd71d020e476', class: "page-navigation-item-icon material-symbols-outlined" }, this.icon), h("span", { key: '005a1932186fb40b2fc31f8d5f77a97c73da989e', class: "page-navigation-item-label" }, this.label)))));
+    }
+    static get style() { return bhPageNavigationSingleLevelCss; }
+}, [769, "bh-page-navigation-single-level", {
+        "label": [1],
+        "icon": [1],
+        "isActive": [4, "is-active"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-page-navigation-single-level"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-page-navigation-single-level":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhPageNavigationSingleLevel);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhPageNavigationSingleLevel as B, defineCustomElement as d };
+//# sourceMappingURL=p-CQBqn1IO.js.map
+
+//# sourceMappingURL=p-CQBqn1IO.js.map

package/components/p-CQBqn1IO.js.map

@@ -0,0 +1 @@
+{"file":"p-CQBqn1IO.js","mappings":";;AAAA,MAAM,8BAA8B,GAAG,4yJAA4yJ;;MCOt0J,2BAA2B,iBAAAA,kBAAA,CAAA,MAAA,2BAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACtC;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,IAAI,GAAW,wBAAwB;AAE/C;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AACM,IAAA,WAAW;IAEZ,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE;AACzB,KAAC;IAEO,cAAc,GAAA;QACpB,OAAO;AACL,YAAA,8BAA8B,EAAE,IAAI;AACpC,YAAA,gCAAgC,EAAE,IAAI;YACtC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;;IAGH,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAClE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,8BAA8B,EAAA,EACvC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,qDAAqD,IAC9D,IAAI,CAAC,IAAI,CACL,EACP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,4BAA4B,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CACxD,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-page-navigation-single-level/bh-page-navigation-single-level.css?tag=bh-page-navigation-single-level&encapsulation=shadow","src/components/bh-page-navigation-single-level/bh-page-navigation-single-level.tsx"],"sourcesContent":["/* ==========================================================================\n   PAGE NAVIGATION COMPONENT - REACT IMPLEMENTATION\n   Unified styles for page navigation matching Angular functionality\n   ========================================================================== */\n\n/* Main Page Navigation Container */\n.page-navigation {\n  width: 320px;\n  min-width: 280px;\n  background-color: var(--color-white);\n  padding: var(--spacing-xl) var(--spacing-md);\n  font-family: var(--font-inter);\n  height: 100vh;\n  overflow-y: auto;\n  border-right: 1px solid var(--color-neutral-200);\n  box-sizing: border-box;\n  user-select: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n}\n\n.page-navigation-header {\n  margin-bottom: var(--spacing-3xl);\n}\n\n.page-navigation-title {\n  font-size: var(--text-xl-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-xl-line);\n  color: var(--color-neutral-900);\n  padding: var(--spacing-none) var(--spacing-xl);\n  margin: 0;\n}\n\n.page-navigation-list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n}\n\n/* ==========================================================================\n   SINGLE LEVEL NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-single-level {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 40px;\n  max-height: 44px;\n  box-sizing: border-box;\n  border-radius: 6px;\n  margin: var(--spacing-none) var(--spacing-xs);\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Active/Selected state for single level */\n.page-navigation-single-level.active {\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Hover state for single level */\n.page-navigation-single-level:hover {\n  background-color: var(--color-neutral-50) !important;\n}\n\n/* ==========================================================================\n   MULTI LEVEL NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-multi-level {\n  margin: var(--spacing-none) var(--spacing-xs);\n}\n\n.page-navigation-multi-level-parent {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 40px;\n  max-height: 44px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Has active child state */\n.page-navigation-multi-level.has-active-child .page-navigation-multi-level-parent {\n  background-color: transparent;\n  border: 1px solid transparent;\n}\n\n/* Hover state for multi level parent */\n.page-navigation-multi-level-parent:hover {\n  background-color: var(--color-neutral-50) !important;\n}\n\n/* Children container with smooth animation */\n.page-navigation-children {\n  margin-top: var(--spacing-xs);\n  margin-bottom: var(--spacing-xs);\n  position: relative;\n  margin-left: var(--spacing-xl);\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  /*overflow: hidden;*/\n  max-height: 1000px;\n  opacity: 1;\n  transition: max-height 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    opacity 0.4s cubic-bezier(0.08, 0.52, 0.52, 1),\n    margin 0.4s cubic-bezier(0.08, 0.52, 0.52, 1);\n}\n\n.page-navigation-children.collapsed {\n  max-height: 0;\n  opacity: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n}\n\n/* Vertical line indicator for children */\n.page-navigation-children::before {\n  content: '';\n  position: absolute;\n  left: 0;\n  top: -2px;\n  height: calc(100% + 4px);\n  width: 2px;\n  background-color: var(--color-neutral-200);\n  margin-left: var(--spacing-sm);\n  z-index: 2;\n}\n\n/* ==========================================================================\n   CHILD NAVIGATION ITEMS\n   ========================================================================== */\n\n.page-navigation-child {\n  display: flex;\n  align-items: center;\n  padding: var(--spacing-md) var(--spacing-lg);\n  cursor: pointer;\n  gap: var(--spacing-md);\n  position: relative;\n  transition: all 0.15s ease;\n  min-height: 36px;\n  box-sizing: border-box;\n  border-radius: var(--radius-sm);\n  margin: var(--spacing-none) var(--spacing-xs);\n  background-color: transparent;\n  border: 1px solid transparent;\n  margin-left: 9px;\n}\n\n/* Hover state for child items */\n.page-navigation-child:hover:not(.active) {\n  background-color: var(--color-neutral-50);\n  position: relative;\n  z-index: 1;\n}\n\n/* Hover overlay to cover the vertical line */\n.page-navigation-child:hover:not(.active)::after {\n  content: '';\n  position: absolute;\n  left: -20px;\n  top: 0;\n  bottom: 0;\n  width: 20px;\n  background-color: var(--color-neutral-100);\n  z-index: 1;\n  border-radius: var(--radius-sm);\n}\n\n/* Active/Selected state for child items */\n.page-navigation-child.active {\n  background-color: transparent;\n}\n\n/* Active line indicator for child items */\n.page-navigation-child.active::before {\n  content: '';\n  position: absolute;\n  left: -4.5px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 2px;\n  height: 24px;\n  background-color: var(--color-brand-600);\n  z-index: 3;\n}\n\n/* ==========================================================================\n   ITEM CONTENT AND COMMON ELEMENTS\n   ========================================================================== */\n\n.page-navigation-item-content,\n.page-navigation-child-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  width: 100%;\n}\n\n/* Icons */\n.page-navigation-item-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease;\n}\n\n/* Smooth animation class for page navigation items */\n.page-navigation-animate-smooth {\n  transform-origin: top center;\n  transition: all var(--animation-duration-normal) var(--animation-ease-enter);\n}\n\n/* Chevron icon styling - separate from main icons */\n.page-navigation-chevron-icon {\n  flex-shrink: 0;\n  color: var(--color-neutral-600);\n  font-size: 20px;\n  width: 20px;\n  height: 20px;\n  transition: color 0.15s ease, transform var(--animation-duration-fast) var(--animation-ease-smooth);\n}\n\n/* Chevron rotation when expanded */\n.page-navigation-chevron-icon.expanded {\n  transform: rotate(180deg);\n}\n\n/* Icon color changes for active states */\n.page-navigation-single-level.active .page-navigation-item-icon,\n.page-navigation-multi-level.has-active-child .page-navigation-item-icon {\n  color: var(--color-neutral-900);\n}\n\n/* Labels */\n.page-navigation-item-label,\n.page-navigation-child-label {\n  font-family: 'Inter', sans-serif;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 20px;\n  color: var(--color-neutral-600);\n  flex: 1;\n  transition: all 0.15s ease;\n}\n\n\n/* Label color and weight changes for active states */\n.page-navigation-single-level.active .page-navigation-item-label,\n.page-navigation-multi-level.has-active-child .page-navigation-item-label {\n  color: var(--color-neutral-900);\n  font-weight: 600;\n}\n\n.page-navigation-child.active .page-navigation-child-label {\n  color: var(--color-brand-600);\n  font-weight: 600;\n}\n\n/* Badges */\n.page-navigation-item-badge,\n.page-navigation-child-badge {\n  margin-left: auto;\n}\n\n/* ==========================================================================\n   RESPONSIVE DESIGN\n   ========================================================================== */\n\n@media (max-width: 768px) {\n  .page-navigation {\n    width: 280px;\n    min-width: 280px;\n  }\n}","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'bh-page-navigation-single-level',\n  styleUrl: 'bh-page-navigation-single-level.css',\n  shadow: true,\n})\nexport class BhPageNavigationSingleLevel {\n  /**\n   * Label text for the navigation item\n   */\n  @Prop() label!: string;\n\n  /**\n   * Material icon name\n   */\n  @Prop() icon: string = 'radio_button_unchecked';\n\n  /**\n   * Whether the item is currently active/selected\n   */\n  @Prop() isActive: boolean = false;\n\n  /**\n   * Event emitted when the navigation item is clicked\n   */\n  @Event() bhItemClick!: EventEmitter<void>;\n\n  private handleClick = () => {\n    this.bhItemClick.emit();\n  };\n\n  private getItemClasses() {\n    return {\n      'page-navigation-single-level': true,\n      'page-navigation-animate-smooth': true,\n      'active': this.isActive,\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.getItemClasses()} onClick={() => this.handleClick()}>\n          <div class=\"page-navigation-item-content\">\n            <span class=\"page-navigation-item-icon material-symbols-outlined\">\n              {this.icon}\n            </span>\n            <span class=\"page-navigation-item-label\">{this.label}</span>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-CTjPiCcp.js

@@ -0,0 +1,51 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-9a7sQzad.js';
+
+const bhCardFooterCss = ":host{display:block}.card-footer{display:flex;flex-direction:column;gap:var(--spacing-xs);background:var(--color-white)}.card-footer-divider{height:1px;background:var(--color-neutral-200)}.card-footer-content{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg) var(--spacing-xl)}.card-footer-align-left{justify-content:flex-start}.card-footer-align-right{justify-content:flex-end}.card-footer-align-space-between{justify-content:space-between}.card-footer-primary-actions{display:flex;flex:1 0 0;align-items:center;gap:var(--spacing-none);min-width:0}.card-footer-secondary-actions{display:flex;align-items:center;gap:var(--spacing-md)}.card-footer-primary-actions:empty,.card-footer-secondary-actions:empty{display:none}";
+
+const BhCardFooter = /*@__PURE__*/ proxyCustomElement(class BhCardFooter extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * Whether to show the divider above the footer
+     */
+    showDivider = true;
+    /**
+     * Alignment of the footer content
+     */
+    alignment = 'space-between';
+    render() {
+        const footerContentClasses = {
+            'card-footer-content': true,
+            [`card-footer-align-${this.alignment}`]: true,
+        };
+        return (h(Host, { key: '27230a36e6bafcbb61bdac3bc0bcebbd550e70c8' }, h("div", { key: '1f0088fbe2a962080e5db856eb534029ed94d8e2', class: "card-footer" }, this.showDivider && h("div", { key: 'f320e028a9c4675b151547f6e368f67910e87d85', class: "card-footer-divider" }), h("div", { key: '9f35426a461e248e09de3c5e9eca23e7d63d9f08', class: footerContentClasses }, h("div", { key: 'd1d17256b3aa704bb898f711519c96405a7927af', class: "card-footer-primary-actions" }, h("slot", { key: '5f18da8ec38e3a2e2237a3bd4d1269686514047d', name: "primary-actions" })), h("div", { key: '0754da91faf75928a1070a01960f41395f0387dc', class: "card-footer-secondary-actions" }, h("slot", { key: '2ffc5290e3499d62e72fd1398b44811d0f0970ba', name: "secondary-actions" }))))));
+    }
+    static get style() { return bhCardFooterCss; }
+}, [769, "bh-card-footer", {
+        "showDivider": [4, "show-divider"],
+        "alignment": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-card-footer"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-card-footer":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCardFooter);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCardFooter as B, defineCustomElement as d };
+//# sourceMappingURL=p-CTjPiCcp.js.map
+
+//# sourceMappingURL=p-CTjPiCcp.js.map

package/components/p-CTjPiCcp.js.map

@@ -0,0 +1 @@
+{"file":"p-CTjPiCcp.js","mappings":";;AAAA,MAAM,eAAe,GAAG,+uBAA+uB;;MCS1vB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;;;;;;;;AACvB;;AAEG;IACK,WAAW,GAAY,IAAI;AAEnC;;AAEG;IACK,SAAS,GAAwB,eAAe;IAExD,MAAM,GAAA;AACJ,QAAA,MAAM,oBAAoB,GAAG;AAC3B,YAAA,qBAAqB,EAAE,IAAI;AAC3B,YAAA,CAAC,qBAAqB,IAAI,CAAC,SAAS,CAAE,CAAA,GAAG,IAAI;SAC9C;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACrB,IAAI,CAAC,WAAW,IAAI,4DAAK,KAAK,EAAC,qBAAqB,EAAG,CAAA,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,oBAAoB,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,iBAAiB,EAAA,CAAG,CAC3B,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,+BAA+B,EAAA,EACxC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,mBAAmB,EAAA,CAAG,CAC7B,CACF,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-card-footer/bh-card-footer.css?tag=bh-card-footer&encapsulation=shadow","src/components/bh-card-footer/bh-card-footer.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card-footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  background: var(--color-white);\n}\n\n.card-footer-divider {\n  height: 1px;\n  background: var(--color-neutral-200);\n}\n\n.card-footer-content {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n  padding: var(--spacing-lg) var(--spacing-xl);\n}\n\n.card-footer-align-left {\n  justify-content: flex-start;\n}\n\n.card-footer-align-right {\n  justify-content: flex-end;\n}\n\n.card-footer-align-space-between {\n  justify-content: space-between;\n}\n\n.card-footer-primary-actions {\n  display: flex;\n  flex: 1 0 0;\n  align-items: center;\n  gap: var(--spacing-none);\n  min-width: 0;\n}\n\n.card-footer-secondary-actions {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-md);\n}\n\n/* Hide empty slots */\n.card-footer-primary-actions:empty,\n.card-footer-secondary-actions:empty {\n  display: none;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type CardFooterAlignment = 'left' | 'right' | 'space-between';\n\n@Component({\n  tag: 'bh-card-footer',\n  styleUrl: 'bh-card-footer.css',\n  shadow: true,\n})\nexport class BhCardFooter {\n  /**\n   * Whether to show the divider above the footer\n   */\n  @Prop() showDivider: boolean = true;\n\n  /**\n   * Alignment of the footer content\n   */\n  @Prop() alignment: CardFooterAlignment = 'space-between';\n\n  render() {\n    const footerContentClasses = {\n      'card-footer-content': true,\n      [`card-footer-align-${this.alignment}`]: true,\n    };\n\n    return (\n      <Host>\n        <div class=\"card-footer\">\n          {this.showDivider && <div class=\"card-footer-divider\" />}\n          <div class={footerContentClasses}>\n            <div class=\"card-footer-primary-actions\">\n              <slot name=\"primary-actions\" />\n            </div>\n            <div class=\"card-footer-secondary-actions\">\n              <slot name=\"secondary-actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/p-CciWcvHP.js

@@ -0,0 +1,123 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-9a7sQzad.js';
+import { d as defineCustomElement$3 } from './p-NXL0pYS_.js';
+import { d as defineCustomElement$2 } from './p-D3OkBDd3.js';
+import { d as defineCustomElement$1 } from './p-D6cM-mvE.js';
+
+const bhCardHeaderCss = ":host{display:block}.card-header{display:flex;flex-direction:column;gap:var(--spacing-lg);background:var(--color-white)}.card-header-content{display:flex;gap:var(--spacing-md);align-items:flex-start;padding:var(--spacing-lg) var(--spacing-xl) 0 var(--spacing-xl)}.card-header-text-container{display:flex;flex-direction:column;flex:1 0 0;gap:var(--spacing-xxs);min-width:0}.card-header-title-row{display:flex;align-items:center;gap:var(--spacing-lg)}.card-header-title{font-family:var(--font-inter);font-size:var(--text-md-size);font-weight:var(--weight-semibold);line-height:var(--text-md-line);color:var(--color-neutral-900)}.card-header-supporting-row{display:flex;align-items:center;gap:var(--spacing-lg);width:100%}.card-header-spacer{width:32px;flex-shrink:0}.card-header-supporting-text{flex:1 0 0;font-family:var(--font-inter);font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-header-divider{height:1px;background:var(--color-neutral-200)}";
+
+const BhCardHeader = /*@__PURE__*/ proxyCustomElement(class BhCardHeader extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhDropdownClick = createEvent(this, "bhDropdownClick");
+    }
+    /**
+     * Whether to show the featured icon
+     */
+    showFeaturedIcon = true;
+    /**
+     * The Material Symbol icon name for the featured icon
+     */
+    featuredIcon = 'star';
+    /**
+     * The style of the featured icon
+     */
+    featuredIconStyle = 'outlined';
+    /**
+     * The color of the featured icon
+     */
+    featuredIconColor = 'gray';
+    /**
+     * Whether to show the title
+     */
+    showTitle = true;
+    /**
+     * The title text
+     */
+    headerTitle = 'Card title';
+    /**
+     * Whether to show the badge
+     */
+    showBadge = false;
+    /**
+     * The badge text
+     */
+    badgeText = '';
+    /**
+     * Whether to show the supporting text
+     */
+    showSupportingText = true;
+    /**
+     * The supporting text (description)
+     */
+    supportingText = 'Card description';
+    /**
+     * Whether to show the dropdown menu button
+     */
+    showDropdown = true;
+    /**
+     * Whether to show the divider
+     */
+    showDivider = true;
+    /**
+     * Emitted when the dropdown button is clicked
+     */
+    bhDropdownClick;
+    handleDropdownClick = () => {
+        this.bhDropdownClick.emit();
+    };
+    render() {
+        return (h(Host, { key: '58db2d5c1ca47600da5c07ea2750ecb1c2f2a4a7' }, h("div", { key: '70cbc0d9779b1f5e75a774f40715001c904f2670', class: "card-header" }, h("div", { key: 'fb602ff3a92aa06d51df870ea4e5b3a6f11e9309', class: "card-header-content" }, h("div", { key: '00a315a07bc10dc72c36cbc79e0d24c9570dcdc7', class: "card-header-text-container" }, h("div", { key: '42d15bc872bf00216be3fcff6bee772bcab7b14e', class: "card-header-title-row" }, this.showFeaturedIcon && (h("bh-featured-icon", { key: 'd9294c5035425329806b0b575cf4799defed83f9', size: "sm", icon: this.featuredIcon, iconStyle: this.featuredIconStyle, color: this.featuredIconColor })), this.showTitle && (h("span", { key: '96399bb209d70a9694fab80e0e0c4ece3025ade5', class: "card-header-title" }, this.headerTitle)), this.showBadge && this.badgeText && (h("bh-badge", { key: 'e030d01179a3e0cc3dbbc972a7251dd49a661533', variant: "blue", size: "sm", emphasis: "medium", label: this.badgeText }))), this.showSupportingText && (h("div", { key: 'e4a1253d649a77d9d6a5f12313f279e18b509304', class: "card-header-supporting-row" }, this.showFeaturedIcon && h("div", { key: 'bf5f6482b25ad7c35f6f42f18001064f1a5f8be9', class: "card-header-spacer" }), h("span", { key: '256fa43537b957a80190ce8683484cbaef0ade56', class: "card-header-supporting-text" }, this.supportingText)))), this.showDropdown && (h("bh-button-icon", { key: 'ab3df5c4b4fd8dbeb56c1860d2b38334ed6fa29e', hierarchy: "quaternary", size: "sm", iconName: "more_vert", ariaLabel: "More options", onBhClick: this.handleDropdownClick }))), h("slot", { key: '836d525ba14a3f7020fecdcf3660e2e50353a9de', name: "tabs" }), this.showDivider && h("div", { key: '9b96114d09fb987fe710de8a6438141c380c07e3', class: "card-header-divider" }))));
+    }
+    static get style() { return bhCardHeaderCss; }
+}, [769, "bh-card-header", {
+        "showFeaturedIcon": [4, "show-featured-icon"],
+        "featuredIcon": [1, "featured-icon"],
+        "featuredIconStyle": [1, "featured-icon-style"],
+        "featuredIconColor": [1, "featured-icon-color"],
+        "showTitle": [4, "show-title"],
+        "headerTitle": [1, "header-title"],
+        "showBadge": [4, "show-badge"],
+        "badgeText": [1, "badge-text"],
+        "showSupportingText": [4, "show-supporting-text"],
+        "supportingText": [1, "supporting-text"],
+        "showDropdown": [4, "show-dropdown"],
+        "showDivider": [4, "show-divider"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-card-header", "bh-badge", "bh-button-icon", "bh-featured-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-card-header":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCardHeader);
+            }
+            break;
+        case "bh-badge":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-button-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-featured-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCardHeader as B, defineCustomElement as d };
+//# sourceMappingURL=p-CciWcvHP.js.map
+
+//# sourceMappingURL=p-CciWcvHP.js.map

package/components/p-CciWcvHP.js.map

@@ -0,0 +1 @@
+{"file":"p-CciWcvHP.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-card-header/bh-card-header.css?tag=bh-card-header&encapsulation=shadow","src/components/bh-card-header/bh-card-header.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card-header {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-lg);\n  background: var(--color-white);\n}\n\n.card-header-content {\n  display: flex;\n  gap: var(--spacing-md);\n  align-items: flex-start;\n  padding: var(--spacing-lg) var(--spacing-xl) 0 var(--spacing-xl);\n}\n\n.card-header-text-container {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 0;\n  gap: var(--spacing-xxs);\n  min-width: 0;\n}\n\n.card-header-title-row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-lg);\n}\n\n.card-header-title {\n  font-family: var(--font-inter);\n  font-size: var(--text-md-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-md-line);\n  color: var(--color-neutral-900);\n}\n\n.card-header-supporting-row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-lg);\n  width: 100%;\n}\n\n.card-header-spacer {\n  width: 32px;\n  flex-shrink: 0;\n}\n\n.card-header-supporting-text {\n  flex: 1 0 0;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-500);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.card-header-divider {\n  height: 1px;\n  background: var(--color-neutral-200);\n}\n","import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CardHeaderFeaturedIconStyle = 'outlined' | 'filled';\nexport type CardHeaderFeaturedIconColor = 'brand' | 'gray' | 'error' | 'warning' | 'success' | 'highlight';\n\n@Component({\n  tag: 'bh-card-header',\n  styleUrl: 'bh-card-header.css',\n  shadow: true,\n})\nexport class BhCardHeader {\n  /**\n   * Whether to show the featured icon\n   */\n  @Prop() showFeaturedIcon: boolean = true;\n\n  /**\n   * The Material Symbol icon name for the featured icon\n   */\n  @Prop() featuredIcon: string = 'star';\n\n  /**\n   * The style of the featured icon\n   */\n  @Prop() featuredIconStyle: CardHeaderFeaturedIconStyle = 'outlined';\n\n  /**\n   * The color of the featured icon\n   */\n  @Prop() featuredIconColor: CardHeaderFeaturedIconColor = 'gray';\n\n  /**\n   * Whether to show the title\n   */\n  @Prop() showTitle: boolean = true;\n\n  /**\n   * The title text\n   */\n  @Prop() headerTitle: string = 'Card title';\n\n  /**\n   * Whether to show the badge\n   */\n  @Prop() showBadge: boolean = false;\n\n  /**\n   * The badge text\n   */\n  @Prop() badgeText: string = '';\n\n  /**\n   * Whether to show the supporting text\n   */\n  @Prop() showSupportingText: boolean = true;\n\n  /**\n   * The supporting text (description)\n   */\n  @Prop() supportingText: string = 'Card description';\n\n  /**\n   * Whether to show the dropdown menu button\n   */\n  @Prop() showDropdown: boolean = true;\n\n  /**\n   * Whether to show the divider\n   */\n  @Prop() showDivider: boolean = true;\n\n  /**\n   * Emitted when the dropdown button is clicked\n   */\n  @Event() bhDropdownClick!: EventEmitter<void>;\n\n  private handleDropdownClick = () => {\n    this.bhDropdownClick.emit();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"card-header\">\n          <div class=\"card-header-content\">\n            <div class=\"card-header-text-container\">\n              <div class=\"card-header-title-row\">\n                {this.showFeaturedIcon && (\n                  <bh-featured-icon\n                    size=\"sm\"\n                    icon={this.featuredIcon}\n                    iconStyle={this.featuredIconStyle}\n                    color={this.featuredIconColor}\n                  />\n                )}\n                {this.showTitle && (\n                  <span class=\"card-header-title\">{this.headerTitle}</span>\n                )}\n                {this.showBadge && this.badgeText && (\n                  <bh-badge\n                    variant=\"blue\"\n                    size=\"sm\"\n                    emphasis=\"medium\"\n                    label={this.badgeText}\n                  />\n                )}\n              </div>\n              {this.showSupportingText && (\n                <div class=\"card-header-supporting-row\">\n                  {this.showFeaturedIcon && <div class=\"card-header-spacer\" />}\n                  <span class=\"card-header-supporting-text\">{this.supportingText}</span>\n                </div>\n              )}\n            </div>\n            {this.showDropdown && (\n              <bh-button-icon\n                hierarchy=\"quaternary\"\n                size=\"sm\"\n                iconName=\"more_vert\"\n                ariaLabel=\"More options\"\n                onBhClick={this.handleDropdownClick}\n              />\n            )}\n          </div>\n          <slot name=\"tabs\" />\n          {this.showDivider && <div class=\"card-header-divider\" />}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}