@actabldesign/bellhop-core 0.0.4 → 0.0.6

package/dist/components/{p-D6w8lxZi.js → p-DoORMw6u.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-ChfLhYiJ.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.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}}";
 
@@ -62,6 +62,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { BhPageNavigationSingleLevel as B, defineCustomElement as d };
-//# sourceMappingURL=p-D6w8lxZi.js.map
+//# sourceMappingURL=p-DoORMw6u.js.map
 
-//# sourceMappingURL=p-D6w8lxZi.js.map
+//# sourceMappingURL=p-DoORMw6u.js.map

package/dist/components/{p-D6w8lxZi.js.map → p-DoORMw6u.js.map}

@@ -1 +1 @@
-{"file":"p-D6w8lxZi.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}
+{"file":"p-DoORMw6u.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/dist/components/{p-D-RHfFhc.js → p-DpK6k515.js}

@@ -1,13 +1,13 @@
-import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h } from './p-ChfLhYiJ.js';
-import { d as defineCustomElement$9 } from './p-BFhwq3_y.js';
-import { d as defineCustomElement$8 } from './p-C69LfZib.js';
-import { d as defineCustomElement$7 } from './p-DAp7fLS-.js';
-import { d as defineCustomElement$6 } from './p-DufL1yr4.js';
-import { d as defineCustomElement$5 } from './p-DkGh2r0W.js';
-import { d as defineCustomElement$4 } from './p-CbeeTFys.js';
-import { d as defineCustomElement$3 } from './p-BZELvMID.js';
-import { d as defineCustomElement$2 } from './p-BaLh9-zk.js';
-import { d as defineCustomElement$1 } from './p-5LJWVh2v.js';
+import { p as proxyCustomElement, H, c as createEvent, f as forceUpdate, h } from './p-DLHC5fHk.js';
+import { d as defineCustomElement$9 } from './p-QjxdVLPX.js';
+import { d as defineCustomElement$8 } from './p-BsgViq32.js';
+import { d as defineCustomElement$7 } from './p-CcPNBnbg.js';
+import { d as defineCustomElement$6 } from './p-CzM_4nyA.js';
+import { d as defineCustomElement$5 } from './p-CA0LmFbe.js';
+import { d as defineCustomElement$4 } from './p-CoJrxiH7.js';
+import { d as defineCustomElement$3 } from './p-BAKX4y5m.js';
+import { d as defineCustomElement$2 } from './p-DgAfq9r9.js';
+import { d as defineCustomElement$1 } from './p-UG_h-ztP.js';
 
 /**
    * table-core
@@ -4352,6 +4352,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { BhDataGrid as B, defineCustomElement as d };
-//# sourceMappingURL=p-D-RHfFhc.js.map
+//# sourceMappingURL=p-DpK6k515.js.map
 
-//# sourceMappingURL=p-D-RHfFhc.js.map
+//# sourceMappingURL=p-DpK6k515.js.map