@actabldesign/bellhop-core 0.0.3

package/cjs/bh-sidebar.cjs.entry.js

@@ -0,0 +1,110 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhSidebarCss = ".sidebar-container{width:fit-content;height:100vh;background-color:var(--color-white);position:relative;display:flex}.navigation{background-color:var(--color-white);display:flex;height:100%;align-items:flex-start;justify-content:flex-start;position:relative;border-right:1px solid var(--color-neutral-200);z-index:100}.gradient-bar{position:relative;width:var(--spacing-xs);height:100%;flex-shrink:0}.detail-bar{position:absolute;background:linear-gradient(\n    180deg,\n    var(--color-accent-300) 0%,\n    var(--color-brand-400) 51%,\n    var(--color-brand-800) 100%\n  );inset:0}.sidebar-content{box-sizing:border-box;display:flex;flex-direction:column;gap:var(--spacing-2xl);height:100%;align-items:center;justify-content:flex-start;padding:var(--spacing-md) var(--spacing-md) var(--spacing-lg)\n    var(--spacing-md);position:relative;flex-shrink:0;width:60px}.navigation-section{flex:1 1 0%;display:flex;flex-direction:column;gap:var(--spacing-xl);flex-grow:1;align-items:center;justify-content:flex-start;min-height:0;position:relative;flex-shrink:0;width:100%;overflow-y:auto;overflow-x:hidden}.search-container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex-shrink:0;width:100%}.nav-items{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:center;justify-content:flex-start;position:relative;flex-shrink:0;width:100%}.sidebar-footer{display:flex;flex-direction:column;gap:var(--spacing-lg);align-items:center;justify-content:end;position:relative;flex-shrink:0;width:100%}.footer-navigation{display:flex;flex-direction:column;gap:var(--spacing-xs);align-items:center;justify-content:center;position:relative;flex-shrink:0;width:100%}.sidebar-collapsed .sidebar-content{width:60px}.sidebar-collapsed .nav-item-label{display:none}.navigation-section::-webkit-scrollbar{width:4px}.navigation-section::-webkit-scrollbar-track{background:transparent}.navigation-section::-webkit-scrollbar-thumb{background:var(--color-neutral-200);border-radius:var(--radius-xs)}.navigation-section::-webkit-scrollbar-thumb:hover{background:var(--color-neutral-300)}.navigation-section{scrollbar-width:thin;scrollbar-color:var(--color-neutral-200) transparent}.sidebar-expanded .sidebar-content{width:240px}.sidebar-expanded .nav-items{align-items:flex-start}.sidebar-expanded .nav-item{width:100%;flex-direction:row;justify-content:flex-start;gap:var(--spacing-md)}.sidebar-expanded .nav-item-label{display:block;text-align:left;font-size:var(--text-sm-size);height:auto;line-height:var(--text-sm-line)}";
+
+const BhSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhMenuItemClick = index.createEvent(this, "bhMenuItemClick");
+        this.bhSearchClick = index.createEvent(this, "bhSearchClick");
+        this.bhAvatarMenuClick = index.createEvent(this, "bhAvatarMenuClick");
+    }
+    /**
+     * Type of logo to display
+     */
+    logoType = 'actabl';
+    /**
+     * Avatar image URL
+     */
+    avatarUrl;
+    /**
+     * Avatar initials (used if avatarUrl is not provided)
+     */
+    avatarInitials = 'DM';
+    /**
+     * Avatar name for dropdown
+     */
+    avatarName = 'Daniel Mobara';
+    /**
+     * Avatar email for dropdown
+     */
+    avatarEmail = 'daniel@solsticehospitality.com';
+    /**
+     * Main menu navigation items
+     */
+    menuItems = [
+        { label: 'Dashboard', icon: 'dashboard', isActive: true },
+        { label: 'Analytics', icon: 'analytics', isActive: false },
+        { label: 'Reports', icon: 'assessment', isActive: false },
+        { label: 'Calendar', icon: 'calendar_today', isActive: false },
+        { label: 'Messages', icon: 'message', isActive: false },
+        { label: 'Contacts', icon: 'contacts', isActive: false },
+        { label: 'Files', icon: 'folder', isActive: false },
+    ];
+    /**
+     * Footer navigation items
+     */
+    footerItems = [
+        { label: 'Help', icon: 'help_outline' },
+        { label: 'Settings', icon: 'settings' },
+    ];
+    /**
+     * Whether sidebar is collapsed
+     */
+    collapsed = false;
+    /**
+     * Event emitted when a menu item is clicked
+     */
+    bhMenuItemClick;
+    /**
+     * Event emitted when search button is clicked
+     */
+    bhSearchClick;
+    /**
+     * Event emitted when avatar menu item is clicked
+     */
+    bhAvatarMenuClick;
+    activeItem = '';
+    componentWillLoad() {
+        const activeMenuItem = this.menuItems.find(item => item.isActive);
+        this.activeItem = activeMenuItem?.label || '';
+    }
+    handleNavItemClick = (label) => {
+        this.activeItem = label;
+        this.bhMenuItemClick.emit(label);
+    };
+    handleSearchClick = () => {
+        this.bhSearchClick.emit();
+    };
+    handleAvatarMenuClick = (event) => {
+        this.bhAvatarMenuClick.emit(event.detail);
+    };
+    render() {
+        const sidebarClasses = {
+            'sidebar-container': true,
+            'sidebar-collapsed': this.collapsed,
+        };
+        const avatarMenuItems = [
+            { id: '1', label: 'View profile', icon: 'person', shortcut: '⌘P' },
+            { id: '2', label: 'Account settings', icon: 'settings', shortcut: '⌘,' },
+            { id: '3', label: 'Notifications', icon: 'notifications', shortcut: '⌘N' },
+            { id: '4', label: 'Privacy & Security', icon: 'shield', shortcut: '⌘S' },
+            { id: '5', divider: true },
+            { id: '6', label: 'Billing', icon: 'credit_card', shortcut: '⌘B' },
+            { id: '7', label: 'Team management', icon: 'group', shortcut: '⌘T' },
+            { id: '8', label: 'Integrations', icon: 'extension', shortcut: '⌘I' },
+            { id: '9', divider: true },
+            { id: '10', label: 'Help center', icon: 'help', shortcut: '⌘H' },
+            { id: '11', label: 'Keyboard shortcuts', icon: 'keyboard', shortcut: '?' },
+            { id: '12', divider: true },
+            { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },
+        ];
+        return (index.h(index.Host, { key: '14f483d75df70a5bfbda0731fe7d82aaf20d551b' }, index.h("div", { key: '8ea1b342688f955b401a77a808561b76164f0d0e', class: sidebarClasses }, index.h("div", { key: '931c6ba45580b069dbf7e96119e3ee914d05ce78', class: "navigation" }, index.h("div", { key: '9b39938bfe77ff84a68830de2bd8392ab3a3c1b2', class: "gradient-bar" }, index.h("div", { key: 'b196a1b459740323a927b1a5fee2ab65f596ed24', class: "detail-bar" })), index.h("div", { key: '00af6a0d4e4747b1026fa7d19b6c7a6a96457207', class: "sidebar-content" }, index.h("bh-logo-box", { key: '4032fc97e8965a77027ec269b87de5d2585be348', logoType: this.logoType }), index.h("div", { key: 'add8f2396ec79e7b7765cca6a42519c867f30ee7', class: "navigation-section" }, index.h("div", { key: '5c8116a117a7b406bb52d0cc0da2d51d472c4431', class: "search-container" }, index.h("bh-button-icon", { key: '024ce4ab04cf6404a05a7cae07f9f1a832a173e8', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), index.h("div", { key: 'e3d90a44f3ab91348cd0b516548588b1fae2aa92', class: "nav-items" }, this.menuItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: this.activeItem === item.label, onBhClick: () => this.handleNavItemClick(item.label) }))))), index.h("div", { key: '447d84326d1f56d53e75190ed8d85c428769c5ce', class: "sidebar-footer" }, index.h("div", { key: '1ef5c3d1fbe579a7da66cba2ea436c7e9639ff95', class: "footer-navigation" }, this.footerItems.map((item) => (index.h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: false, onBhClick: () => this.handleNavItemClick(item.label) })))), index.h("bh-dropdown", { key: 'aef26cfc2faa17043588054c36bcb2f8a9008cc1', variant: "avatar", size: "md", avatarSize: "md", avatarSrc: this.avatarUrl, avatarName: this.avatarName, avatarEmail: this.avatarEmail, menuItems: avatarMenuItems, showIcons: true, onBhItemClick: this.handleAvatarMenuClick })))))));
+    }
+};
+BhSidebar.style = bhSidebarCss;
+
+exports.bh_sidebar = BhSidebar;
+//# sourceMappingURL=bh-sidebar.entry.cjs.js.map

package/cjs/bh-sidebar.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-sidebar.entry.cjs.js","sources":["src/components/bh-sidebar/bh-sidebar.css?tag=bh-sidebar&encapsulation=shadow","src/components/bh-sidebar/bh-sidebar.tsx"],"sourcesContent":["/* ==========================================================================\n   SIDEBAR COMPONENT\n   Vertical navigation sidebar with gradient bar\n   ========================================================================== */\n\n.sidebar-container {\n  width: fit-content;\n  height: 100vh;\n  background-color: var(--color-white);\n  position: relative;\n  display: flex;\n}\n\n.navigation {\n  background-color: var(--color-white);\n  display: flex;\n  height: 100%;\n  align-items: flex-start;\n  justify-content: flex-start;\n  position: relative;\n  border-right: 1px solid var(--color-neutral-200);\n  z-index: 100;\n}\n\n/* Gradient bar on the left edge */\n.gradient-bar {\n  position: relative;\n  width: var(--spacing-xs);\n  height: 100%;\n  flex-shrink: 0;\n}\n\n.detail-bar {\n  position: absolute;\n  background: linear-gradient(\n    180deg,\n    var(--color-accent-300) 0%,\n    var(--color-brand-400) 51%,\n    var(--color-brand-800) 100%\n  );\n  inset: 0;\n}\n\n/* Main sidebar content */\n.sidebar-content {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-2xl);\n  height: 100%;\n  align-items: center;\n  justify-content: flex-start;\n  padding: var(--spacing-md) var(--spacing-md) var(--spacing-lg)\n    var(--spacing-md);\n  position: relative;\n  flex-shrink: 0;\n  width: 60px;\n}\n\n/* Navigation section that contains search and nav items */\n.navigation-section {\n  flex: 1 1 0%;\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xl);\n  flex-grow: 1;\n  align-items: center;\n  justify-content: flex-start;\n  min-height: 0;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n/* Search container */\n.search-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n/* Nav items container */\n.nav-items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  align-items: center;\n  justify-content: flex-start;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n/* Footer section with footer nav and avatar */\n.sidebar-footer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-lg);\n  align-items: center;\n  justify-content: end;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n.footer-navigation {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  flex-shrink: 0;\n  width: 100%;\n}\n\n/* Collapsed state */\n.sidebar-collapsed .sidebar-content {\n  width: 60px;\n}\n\n.sidebar-collapsed .nav-item-label {\n  display: none;\n}\n\n/* Scrollbar styling for navigation section */\n.navigation-section::-webkit-scrollbar {\n  width: 4px;\n}\n\n.navigation-section::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.navigation-section::-webkit-scrollbar-thumb {\n  background: var(--color-neutral-200);\n  border-radius: var(--radius-xs);\n}\n\n.navigation-section::-webkit-scrollbar-thumb:hover {\n  background: var(--color-neutral-300);\n}\n\n/* Firefox scrollbar */\n.navigation-section {\n  scrollbar-width: thin;\n  scrollbar-color: var(--color-neutral-200) transparent;\n}\n\n/* Expanded state (optional future enhancement) */\n.sidebar-expanded .sidebar-content {\n  width: 240px;\n}\n\n.sidebar-expanded .nav-items {\n  align-items: flex-start;\n}\n\n.sidebar-expanded .nav-item {\n  width: 100%;\n  flex-direction: row;\n  justify-content: flex-start;\n  gap: var(--spacing-md);\n}\n\n.sidebar-expanded .nav-item-label {\n  display: block;\n  text-align: left;\n  font-size: var(--text-sm-size);\n  height: auto;\n  line-height: var(--text-sm-line);\n}\n","import { Component, Prop, Event, EventEmitter, State, h, Host } from '@stencil/core';\nimport { LogoType } from '../bh-logo-box/bh-logo-box';\n\nexport interface MenuItem {\n  label: string;\n  icon: string;\n  isActive?: boolean;\n}\n\nexport interface FooterItem {\n  label: string;\n  icon: string;\n}\n\nexport interface DropdownMenuItem {\n  id: string;\n  label?: string;\n  icon?: string;\n  shortcut?: string;\n  divider?: boolean;\n}\n\n@Component({\n  tag: 'bh-sidebar',\n  styleUrl: 'bh-sidebar.css',\n  shadow: true,\n})\nexport class BhSidebar {\n  /**\n   * Type of logo to display\n   */\n  @Prop() logoType: LogoType = 'actabl';\n\n  /**\n   * Avatar image URL\n   */\n  @Prop() avatarUrl?: string;\n\n  /**\n   * Avatar initials (used if avatarUrl is not provided)\n   */\n  @Prop() avatarInitials: string = 'DM';\n\n  /**\n   * Avatar name for dropdown\n   */\n  @Prop() avatarName: string = 'Daniel Mobara';\n\n  /**\n   * Avatar email for dropdown\n   */\n  @Prop() avatarEmail: string = 'daniel@solsticehospitality.com';\n\n  /**\n   * Main menu navigation items\n   */\n  @Prop() menuItems: MenuItem[] = [\n    { label: 'Dashboard', icon: 'dashboard', isActive: true },\n    { label: 'Analytics', icon: 'analytics', isActive: false },\n    { label: 'Reports', icon: 'assessment', isActive: false },\n    { label: 'Calendar', icon: 'calendar_today', isActive: false },\n    { label: 'Messages', icon: 'message', isActive: false },\n    { label: 'Contacts', icon: 'contacts', isActive: false },\n    { label: 'Files', icon: 'folder', isActive: false },\n  ];\n\n  /**\n   * Footer navigation items\n   */\n  @Prop() footerItems: FooterItem[] = [\n    { label: 'Help', icon: 'help_outline' },\n    { label: 'Settings', icon: 'settings' },\n  ];\n\n  /**\n   * Whether sidebar is collapsed\n   */\n  @Prop() collapsed: boolean = false;\n\n  /**\n   * Event emitted when a menu item is clicked\n   */\n  @Event() bhMenuItemClick!: EventEmitter<string>;\n\n  /**\n   * Event emitted when search button is clicked\n   */\n  @Event() bhSearchClick!: EventEmitter<void>;\n\n  /**\n   * Event emitted when avatar menu item is clicked\n   */\n  @Event() bhAvatarMenuClick!: EventEmitter<DropdownMenuItem>;\n\n  @State() activeItem: string = '';\n\n  componentWillLoad() {\n    const activeMenuItem = this.menuItems.find(item => item.isActive);\n    this.activeItem = activeMenuItem?.label || '';\n  }\n\n  private handleNavItemClick = (label: string) => {\n    this.activeItem = label;\n    this.bhMenuItemClick.emit(label);\n  };\n\n  private handleSearchClick = () => {\n    this.bhSearchClick.emit();\n  };\n\n  private handleAvatarMenuClick = (event: CustomEvent<DropdownMenuItem>) => {\n    this.bhAvatarMenuClick.emit(event.detail);\n  };\n\n  render() {\n    const sidebarClasses = {\n      'sidebar-container': true,\n      'sidebar-collapsed': this.collapsed,\n    };\n\n    const avatarMenuItems: DropdownMenuItem[] = [\n      { id: '1', label: 'View profile', icon: 'person', shortcut: '⌘P' },\n      { id: '2', label: 'Account settings', icon: 'settings', shortcut: '⌘,' },\n      { id: '3', label: 'Notifications', icon: 'notifications', shortcut: '⌘N' },\n      { id: '4', label: 'Privacy & Security', icon: 'shield', shortcut: '⌘S' },\n      { id: '5', divider: true },\n      { id: '6', label: 'Billing', icon: 'credit_card', shortcut: '⌘B' },\n      { id: '7', label: 'Team management', icon: 'group', shortcut: '⌘T' },\n      { id: '8', label: 'Integrations', icon: 'extension', shortcut: '⌘I' },\n      { id: '9', divider: true },\n      { id: '10', label: 'Help center', icon: 'help', shortcut: '⌘H' },\n      { id: '11', label: 'Keyboard shortcuts', icon: 'keyboard', shortcut: '?' },\n      { id: '12', divider: true },\n      { id: '13', label: 'Sign out', icon: 'logout', shortcut: '⇧⌘Q' },\n    ];\n\n    return (\n      <Host>\n        <div class={sidebarClasses}>\n          <div class=\"navigation\">\n            {/* Gradient bar */}\n            <div class=\"gradient-bar\">\n              <div class=\"detail-bar\"></div>\n            </div>\n\n            {/* Main content */}\n            <div class=\"sidebar-content\">\n              {/* Logo box */}\n              <bh-logo-box logoType={this.logoType}></bh-logo-box>\n\n              {/* Navigation section */}\n              <div class=\"navigation-section\">\n                {/* Search */}\n                <div class=\"search-container\">\n                  <bh-button-icon\n                    hierarchy=\"secondary\"\n                    size=\"sm\"\n                    iconName=\"search\"\n                    onClick={this.handleSearchClick}\n                  ></bh-button-icon>\n                </div>\n\n                {/* Nav items */}\n                <div class=\"nav-items\">\n                  {this.menuItems.map((item) => (\n                    <bh-nav-item\n                      key={item.label}\n                      icon={item.icon}\n                      label={item.label}\n                      isActive={this.activeItem === item.label}\n                      onBhClick={() => this.handleNavItemClick(item.label)}\n                    ></bh-nav-item>\n                  ))}\n                </div>\n              </div>\n\n              {/* Footer */}\n              <div class=\"sidebar-footer\">\n                <div class=\"footer-navigation\">\n                  {this.footerItems.map((item) => (\n                    <bh-nav-item\n                      key={item.label}\n                      icon={item.icon}\n                      label={item.label}\n                      isActive={false}\n                      onBhClick={() => this.handleNavItemClick(item.label)}\n                    ></bh-nav-item>\n                  ))}\n                </div>\n\n                {/* Avatar Dropdown */}\n                <bh-dropdown\n                  variant=\"avatar\"\n                  size=\"md\"\n                  avatarSize=\"md\"\n                  avatarSrc={this.avatarUrl}\n                  avatarName={this.avatarName}\n                  avatarEmail={this.avatarEmail}\n                  menuItems={avatarMenuItems}\n                  showIcons={true}\n                  onBhItemClick={this.handleAvatarMenuClick}\n                ></bh-dropdown>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/cjs/bh-skeleton-loader.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhSkeletonLoaderCss = ":host{display:inline-block}.skeleton{display:inline-block;background:linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.06) 25%,\n    rgba(0, 0, 0, 0.03) 50%,\n    rgba(0, 0, 0, 0.06) 75%\n  );background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm);line-height:1}.skeleton-circle{border-radius:50%}.skeleton::before{content:'\\00a0'}@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";
+
+const BhSkeletonLoader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * Width of the skeleton (CSS value)
+     */
+    width = '100%';
+    /**
+     * Height of the skeleton (CSS value)
+     */
+    height = '1em';
+    /**
+     * Whether the skeleton should be circular
+     */
+    circle = false;
+    render() {
+        const skeletonClasses = {
+            'skeleton': true,
+            'skeleton-circle': this.circle,
+        };
+        return (index.h("span", { key: 'c49b2ec3dced60f158ec5dbb0471f6fc057984d1', class: skeletonClasses, style: { width: this.width, height: this.height }, role: "status", "aria-live": "polite", "aria-busy": "true", part: "skeleton" }, index.h("span", { key: 'b360eefd8747e5b5c2a863bf6bf6083b978a6a55', class: "visually-hidden" }, "Loading...")));
+    }
+};
+BhSkeletonLoader.style = bhSkeletonLoaderCss;
+
+exports.bh_skeleton_loader = BhSkeletonLoader;
+//# sourceMappingURL=bh-skeleton-loader.entry.cjs.js.map

package/cjs/bh-skeleton-loader.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-skeleton-loader.entry.cjs.js","sources":["src/components/bh-skeleton-loader/bh-skeleton-loader.css?tag=bh-skeleton-loader&encapsulation=shadow","src/components/bh-skeleton-loader/bh-skeleton-loader.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-SKELETON-LOADER COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n.skeleton {\n  display: inline-block;\n  background: linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.06) 25%,\n    rgba(0, 0, 0, 0.03) 50%,\n    rgba(0, 0, 0, 0.06) 75%\n  );\n  background-size: 400% 100%;\n  animation: shimmer 1.5s ease-in-out infinite;\n  border-radius: var(--radius-sm);\n  line-height: 1;\n}\n\n.skeleton-circle {\n  border-radius: 50%;\n}\n\n.skeleton::before {\n  content: '\\00a0';\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'bh-skeleton-loader',\n  styleUrl: 'bh-skeleton-loader.css',\n  shadow: true,\n})\nexport class BhSkeletonLoader {\n  /**\n   * Width of the skeleton (CSS value)\n   */\n  @Prop() width: string = '100%';\n\n  /**\n   * Height of the skeleton (CSS value)\n   */\n  @Prop() height: string = '1em';\n\n  /**\n   * Whether the skeleton should be circular\n   */\n  @Prop() circle: boolean = false;\n\n  render() {\n    const skeletonClasses = {\n      'skeleton': true,\n      'skeleton-circle': this.circle,\n    };\n\n    return (\n      <span\n        class={skeletonClasses}\n        style={{ width: this.width, height: this.height }}\n        role=\"status\"\n        aria-live=\"polite\"\n        aria-busy=\"true\"\n        part=\"skeleton\"\n      >\n        <span class=\"visually-hidden\">Loading...</span>\n      </span>\n    );\n  }\n}\n"],"names":["h"],"mappings":";;;;AAAA,MAAM,mBAAmB,GAAG,8lBAA8lB;;MCO7mB,gBAAgB,GAAA,MAAA;;;;AAC3B;;AAEG;IACK,KAAK,GAAW,MAAM;AAE9B;;AAEG;IACK,MAAM,GAAW,KAAK;AAE9B;;AAEG;IACK,MAAM,GAAY,KAAK;IAE/B,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAG;AACtB,YAAA,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;SAC/B;AAED,QAAA,QACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EACjD,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EACR,WAAA,EAAA,MAAM,EAChB,IAAI,EAAC,UAAU,EAAA,EAEfA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,iBAAiB,EAAkB,EAAA,YAAA,CAAA,CAC1C;;;;;;;"}

package/cjs/bh-tab-item.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhTabItemCss = ":host{display:flex}:host(.tab-item-full){flex:1 0 0;min-width:0}.tab-button{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);min-height:36px;font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);font-weight:var(--weight-semibold);color:var(--color-neutral-600);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.2s ease-in-out;white-space:nowrap;outline:none;width:100%}:host-context(.tabs-underline) .tab-button{border-radius:0;padding-top:var(--spacing-xs);padding-bottom:var(--spacing-md);border-bottom:2px solid transparent}:host-context(.tabs-full-width) .tab-button{justify-content:center}:host-context(.tabs-contained) .tab-button-active{color:var(--color-brand-600);background-color:var(--color-brand-50)}:host-context(.tabs-underline) .tab-button-active{color:var(--color-brand-600);border-bottom-color:var(--color-brand-600)}:host-context(.tabs-contained) .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active){background-color:var(--color-neutral-50);color:var(--color-neutral-700)}:host-context(.tabs-underline) .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active){color:var(--color-neutral-700)}:host-context(.tabs-contained) .tab-button:active:not(.tab-button-disabled){background-color:var(--color-neutral-100)}.tab-button:focus-visible{outline:2px solid var(--color-brand-500);outline-offset:2px}.tab-button-disabled{cursor:not-allowed;opacity:0.5;pointer-events:none}.tab-label{display:inline-block}:host-context(.tabs-vertical){width:100%}:host-context(.tabs-vertical) .tab-button{justify-content:flex-start;width:100%}:host-context(.tabs-vertical.tabs-contained) .tab-button-active{color:var(--color-brand-600);background-color:var(--color-brand-50)}:host-context(.tabs-vertical.tabs-underline) .tab-button{border-radius:0;border-bottom:none;border-left:2px solid transparent;padding:var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg)}:host-context(.tabs-vertical.tabs-underline) .tab-button-active{color:var(--color-brand-600);border-left-color:var(--color-brand-600);border-bottom-color:transparent}";
+
+const BhTabItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhTabItemClick = index.createEvent(this, "bhTabItemClick");
+    }
+    get el() { return index.getElement(this); }
+    /**
+     * Unique identifier for this tab
+     */
+    value;
+    /**
+     * The label text for the tab
+     */
+    label;
+    /**
+     * Whether this tab is currently active
+     */
+    active = false;
+    /**
+     * Whether this tab is disabled
+     */
+    disabled = false;
+    /**
+     * Emitted when the tab is clicked
+     */
+    bhTabItemClick;
+    handleClick = () => {
+        if (!this.disabled) {
+            this.bhTabItemClick.emit(this.value);
+        }
+    };
+    render() {
+        const buttonClasses = {
+            'tab-button': true,
+            'tab-button-active': this.active,
+            'tab-button-disabled': this.disabled,
+        };
+        return (index.h(index.Host, { key: '4ad8e3e786f4a4c8a2c38e518e66ef2ded4c04ca', class: {
+                'tab-item': true,
+                'tab-item-active': this.active,
+                'tab-item-disabled': this.disabled,
+            } }, index.h("button", { key: 'b149a3ed3cdd49e887545281a5f9a1383443aeca', class: buttonClasses, part: "button", role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', disabled: this.disabled, onClick: this.handleClick, type: "button" }, index.h("span", { key: '03f58f2761a021310a6cd2f811795dbc95e02ea1', class: "tab-label", part: "label" }, this.label), index.h("slot", { key: 'd96a82e89d9d7c64d1f17c65da4a47f4774ed96a' }))));
+    }
+};
+BhTabItem.style = bhTabItemCss;
+
+exports.bh_tab_item = BhTabItem;
+//# sourceMappingURL=bh-tab-item.entry.cjs.js.map

package/cjs/bh-tab-item.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-tab-item.entry.cjs.js","sources":["src/components/bh-tab-item/bh-tab-item.css?tag=bh-tab-item&encapsulation=shadow","src/components/bh-tab-item/bh-tab-item.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-TAB-ITEM COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: flex;\n}\n\n/* Full Width for Tab Items inside Full Width Tabs */\n:host(.tab-item-full) {\n  flex: 1 0 0;\n  min-width: 0;\n}\n\n/* Tab Button Base */\n.tab-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-sm) var(--spacing-md);\n  min-height: 36px;\n  font-family: var(--font-inter);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  font-weight: var(--weight-semibold);\n  color: var(--color-neutral-600);\n  background: transparent;\n  border: none;\n  border-radius: var(--radius-sm);\n  cursor: pointer;\n  transition: all 0.2s ease-in-out;\n  white-space: nowrap;\n  outline: none;\n  width: 100%;\n}\n\n/* Underline Type Specific Styles */\n:host-context(.tabs-underline) .tab-button {\n  border-radius: 0;\n  padding-top: var(--spacing-xs);\n  padding-bottom: var(--spacing-md);\n  border-bottom: 2px solid transparent;\n}\n\n/* Full Width Tab Items */\n:host-context(.tabs-full-width) .tab-button {\n  justify-content: center;\n}\n\n/* Active State - Contained Type */\n:host-context(.tabs-contained) .tab-button-active {\n  color: var(--color-brand-600);\n  background-color: var(--color-brand-50);\n}\n\n/* Active State - Underline Type */\n:host-context(.tabs-underline) .tab-button-active {\n  color: var(--color-brand-600);\n  border-bottom-color: var(--color-brand-600);\n}\n\n/* Hover State - Contained Type */\n:host-context(.tabs-contained)\n  .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active) {\n  background-color: var(--color-neutral-50);\n  color: var(--color-neutral-700);\n}\n\n/* Hover State - Underline Type */\n:host-context(.tabs-underline)\n  .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active) {\n  color: var(--color-neutral-700);\n}\n\n/* Active/Pressed State - Contained Type */\n:host-context(.tabs-contained) .tab-button:active:not(.tab-button-disabled) {\n  background-color: var(--color-neutral-100);\n}\n\n/* Focus State */\n.tab-button:focus-visible {\n  outline: 2px solid var(--color-brand-500);\n  outline-offset: 2px;\n}\n\n/* Disabled State */\n.tab-button-disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n/* Tab Label */\n.tab-label {\n  display: inline-block;\n}\n\n/* ==========================================================================\n   VERTICAL ORIENTATION STYLES\n   ========================================================================== */\n\n/* Vertical Tab Items take full width */\n:host-context(.tabs-vertical) {\n  width: 100%;\n}\n\n:host-context(.tabs-vertical) .tab-button {\n  justify-content: flex-start;\n  width: 100%;\n}\n\n/* Vertical Contained - Active State */\n:host-context(.tabs-vertical.tabs-contained) .tab-button-active {\n  color: var(--color-brand-600);\n  background-color: var(--color-brand-50);\n}\n\n/* Vertical Underline - Uses left border instead of bottom */\n:host-context(.tabs-vertical.tabs-underline) .tab-button {\n  border-radius: 0;\n  border-bottom: none;\n  border-left: 2px solid transparent;\n  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-lg);\n}\n\n/* Vertical Underline - Active State */\n:host-context(.tabs-vertical.tabs-underline) .tab-button-active {\n  color: var(--color-brand-600);\n  border-left-color: var(--color-brand-600);\n  border-bottom-color: transparent;\n}\n","import {\n  Component,\n  Prop,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Element,\n} from '@stencil/core';\n\n/**\n * @slot - Tab content (usually just text, but can include badges)\n */\n@Component({\n  tag: 'bh-tab-item',\n  styleUrl: 'bh-tab-item.css',\n  shadow: true,\n})\nexport class BhTabItem {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Unique identifier for this tab\n   */\n  @Prop() value!: string;\n\n  /**\n   * The label text for the tab\n   */\n  @Prop() label!: string;\n\n  /**\n   * Whether this tab is currently active\n   */\n  @Prop() active: boolean = false;\n\n  /**\n   * Whether this tab is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Emitted when the tab is clicked\n   */\n  @Event({ bubbles: true, composed: true })\n  bhTabItemClick!: EventEmitter<string>;\n\n  private handleClick = (): void => {\n    if (!this.disabled) {\n      this.bhTabItemClick.emit(this.value);\n    }\n  };\n\n  render() {\n    const buttonClasses = {\n      'tab-button': true,\n      'tab-button-active': this.active,\n      'tab-button-disabled': this.disabled,\n    };\n\n    return (\n      <Host\n        class={{\n          'tab-item': true,\n          'tab-item-active': this.active,\n          'tab-item-disabled': this.disabled,\n        }}\n      >\n        <button\n          class={buttonClasses}\n          part=\"button\"\n          role=\"tab\"\n          aria-selected={this.active ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          disabled={this.disabled}\n          onClick={this.handleClick}\n          type=\"button\"\n        >\n          <span class=\"tab-label\" part=\"label\">\n            {this.label}\n          </span>\n          <slot />\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,YAAY,GAAG,orEAAorE;;MCkB5rE,SAAS,GAAA,MAAA;;;;;;AAGpB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEG;IACK,MAAM,GAAY,KAAK;AAE/B;;AAEG;IACK,QAAQ,GAAY,KAAK;AAEjC;;AAEG;AAEH,IAAA,cAAc;IAEN,WAAW,GAAG,MAAW;AAC/B,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YAClB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;AAExC,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,YAAY,EAAE,IAAI;YAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM;YAChC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC;QAED,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,UAAU,EAAE,IAAI;gBAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC,EAAA,EAEDD,OACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EACpB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,EAC9B,eAAA,EAAA,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ,EAAA,EAEbA,OAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,EACjC,EAAA,IAAI,CAAC,KAAK,CACN,EACPA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACD,CACJ;;;;;;;"}

package/cjs/bh-tabs.cjs.entry.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+
+const bhTabsCss = ":host{display:block;width:100%}.tabs-container{display:flex;flex-direction:column;width:100%}.tabs-list{display:flex;gap:var(--spacing-xs);padding:var(--spacing-none);position:relative}.tabs-full-width .tabs-list{width:100%;gap:var(--spacing-lg);justify-content:center}.tabs-underline.tabs-horizontal .tabs-container{border-bottom:1px solid var(--color-neutral-200)}.tabs-underline.tabs-horizontal .tabs-list{gap:var(--spacing-lg)}.tabs-underline.tabs-horizontal.tabs-full-width .tabs-list{gap:var(--spacing-lg)}.tabs-contained .tabs-list{gap:var(--spacing-xs)}.tabs-vertical{width:auto}.tabs-vertical .tabs-container{width:auto}.tabs-vertical .tabs-list{flex-direction:column;gap:var(--spacing-xs);width:204px}.tabs-underline.tabs-vertical .tabs-container{border-bottom:none}";
+
+const BhTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhTabChange = index.createEvent(this, "bhTabChange");
+    }
+    /**
+     * 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 (index.h(index.Host, { key: '3eae9f235c7436f4ab2321e1d751071678d19418', class: hostClasses }, index.h("div", { key: '76b0313966bbb5bd1445d64a671480529a47c5ba', class: "tabs-container", part: "container" }, index.h("div", { key: '20e0d5a75efa9e55c501d350c1837c21e8118367', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, index.h("slot", { key: '46c28a21da056e1d10e87e3865a86c8d08f761d0' })))));
+    }
+};
+BhTabs.style = bhTabsCss;
+
+exports.bh_tabs = BhTabs;
+//# sourceMappingURL=bh-tabs.entry.cjs.js.map

package/cjs/bh-tabs.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-tabs.entry.cjs.js","sources":["src/components/bh-tabs/bh-tabs.css?tag=bh-tabs&encapsulation=shadow","src/components/bh-tabs/bh-tabs.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-TABS COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: block;\n  width: 100%;\n}\n\n/* Tabs Container */\n.tabs-container {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n/* Tabs List */\n.tabs-list {\n  display: flex;\n  gap: var(--spacing-xs);\n  padding: var(--spacing-none);\n  position: relative;\n}\n\n/* Full Width */\n.tabs-full-width .tabs-list {\n  width: 100%;\n  gap: var(--spacing-lg);\n  justify-content: center;\n}\n\n/* Underline Type - Horizontal */\n.tabs-underline.tabs-horizontal .tabs-container {\n  border-bottom: 1px solid var(--color-neutral-200);\n}\n\n.tabs-underline.tabs-horizontal .tabs-list {\n  gap: var(--spacing-lg);\n}\n\n.tabs-underline.tabs-horizontal.tabs-full-width .tabs-list {\n  gap: var(--spacing-lg);\n}\n\n/* Contained Type */\n.tabs-contained .tabs-list {\n  gap: var(--spacing-xs);\n}\n\n/* ==========================================================================\n   VERTICAL ORIENTATION\n   ========================================================================== */\n\n.tabs-vertical {\n  width: auto;\n}\n\n.tabs-vertical .tabs-container {\n  width: auto;\n}\n\n.tabs-vertical .tabs-list {\n  flex-direction: column;\n  gap: var(--spacing-xs);\n  width: 204px;\n}\n\n/* Vertical Underline Type - Left border instead of bottom */\n.tabs-underline.tabs-vertical .tabs-container {\n  border-bottom: none;\n}\n","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,0wBAA0wB;;MCqB/wB,MAAM,GAAA,MAAA;;;;;AACjB;;AAEG;IACK,IAAI,GAAa,WAAW;AAEpC;;AAEG;IACK,WAAW,GAAoB,YAAY;AAEnD;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;IACsB,KAAK,GAAW,EAAE;AAE3C;;AAEG;AACuC,IAAA,WAAW;AAGrD,IAAA,kBAAkB,CAAC,KAA0B,EAAA;AAC3C,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM;AAC1B,QAAA,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE;AACxB,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAIhC,MAAM,GAAA;AACJ,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,GAAG,IAAI;AAC3B,YAAA,CAAC,QAAQ,IAAI,CAAC,WAAW,CAAE,CAAA,GAAG,IAAI;YAClC,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC;AAED,QAAA,QACEA,OAAC,CAAAC,UAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,WAAW,EAAA,EACtBD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,WAAW,EAAA,EAC1CA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACI,kBAAA,EAAA,IAAI,CAAC,WAAW,EAAA,EAElCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACF,CACD;;;;;;;"}

package/cjs/bh-textarea.cjs.entry.js

@@ -0,0 +1,161 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+var form = require('./form-9mbajZ3y.js');
+
+const bhTextareaCss = ":host{display:block}.textarea-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm);width:100%}.textarea-container{position:relative;display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:8px;box-shadow:0px 1px 2px rgba(64, 73, 104, 0.06);transition:all 0.2s ease-in-out;min-height:128px}.textarea-container:hover:not(.textarea-container-disabled):not(.textarea-container-focused){border-color:var(--color-brand-500)}.textarea-container-focused{border-color:var(--color-brand-500);box-shadow:0 0 0 1px var(--color-brand-500)}.textarea-container-error{border-color:var(--color-error-300)}.textarea-container-error:hover:not(.textarea-container-focused){border-color:var(--color-error-500)}.textarea-container-error.textarea-container-focused{border-color:var(--color-brand-500);box-shadow:0 0 0 1px var(--color-brand-500)}.textarea-container-disabled{opacity:0.5;cursor:not-allowed;background:var(--color-neutral-50)}.textarea-content{width:100%}.textarea{box-sizing:border-box;padding:12px 14px;background:transparent;border:none;outline:none;font-family:var(--font-inter);font-weight:400;font-size:var(--text-sm-size);line-height:1.5;color:var(--color-neutral-900);width:100%;min-height:96px;resize:none;caret-color:var(--color-brand-500);flex:1;box-shadow:none}.textarea:focus{outline:none;border:none;box-shadow:none}.textarea::placeholder{color:var(--color-neutral-400)}.textarea:disabled{cursor:not-allowed;color:var(--color-neutral-400)}.hint-text{font-family:var(--font-inter);font-weight:400;font-size:var(--text-sm-size);line-height:1.43;color:var(--color-neutral-600)}.hint-text.hint-error{color:var(--color-error-600)}@media (max-width: 768px){.textarea{font-size:16px;}}";
+
+const BhTextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bhInput = index.createEvent(this, "bhInput");
+        this.bhFocus = index.createEvent(this, "bhFocus");
+        this.bhBlur = index.createEvent(this, "bhBlur");
+        this.bhHelpClick = index.createEvent(this, "bhHelpClick");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    textareaEl;
+    /**
+     * The label for the textarea
+     */
+    label = 'Comment';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Write a message...';
+    /**
+     * Hint text shown below the textarea
+     */
+    hintText = '';
+    /**
+     * Whether to show the label
+     */
+    showLabel = true;
+    /**
+     * Whether to show hint text
+     */
+    showHintText = true;
+    /**
+     * Whether to show the help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Whether the field has an error
+     */
+    error = false;
+    /**
+     * Whether the textarea is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the field is required
+     */
+    required = false;
+    /**
+     * Tooltip text for the help icon
+     */
+    helpIconTooltip = 'Help';
+    /**
+     * The textarea value
+     */
+    value = '';
+    /**
+     * Name attribute for form submission
+     */
+    name = '';
+    /**
+     * Default value for form reset
+     */
+    defaultValue = '';
+    /**
+     * Custom validation message
+     */
+    validationMessage = '';
+    /**
+     * Number of visible rows
+     */
+    rows = 4;
+    /**
+     * Resize behavior
+     */
+    resize = 'none';
+    /**
+     * Maximum character length
+     */
+    maxLength;
+    /**
+     * Track focus state
+     */
+    isFocused = false;
+    /**
+     * Emitted when the value changes
+     */
+    bhInput;
+    /**
+     * Emitted when the textarea gains focus
+     */
+    bhFocus;
+    /**
+     * Emitted when the textarea loses focus
+     */
+    bhBlur;
+    /**
+     * Emitted when the help icon is clicked
+     */
+    bhHelpClick;
+    componentDidLoad() {
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.textareaEl, this.validationMessage);
+    }
+    formResetCallback() {
+        this.value = this.defaultValue;
+        if (this.textareaEl) {
+            this.textareaEl.value = this.defaultValue;
+        }
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.textareaEl);
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.bhInput.emit(this.value);
+        form.syncFormValue(this);
+        form.updateValidity(this.internals, this.textareaEl, this.validationMessage);
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+        this.bhFocus.emit();
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+        this.bhBlur.emit();
+    };
+    handleHelpClick = () => {
+        this.bhHelpClick.emit();
+    };
+    render() {
+        const containerClasses = {
+            'textarea-container': true,
+            'textarea-container-focused': this.isFocused,
+            'textarea-container-error': this.error,
+            'textarea-container-disabled': this.disabled,
+        };
+        const textareaClasses = {
+            'textarea': true,
+            'textarea-error': this.error,
+        };
+        return (index.h("div", { key: '26fc849122d7d1749963cf522cf29eb2551efef3', class: "textarea-wrapper", part: "wrapper" }, index.h("bh-label", { key: '32c9deddf4c40bf8ce2ff683289d4fff9c396f09', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, index.h("div", { key: 'eb8c890cd5ead8b49ac4932479e3aedd03d78701', class: containerClasses }, index.h("div", { key: 'c639ada3e32f70f807326c13120e294ca7e14c42', class: "textarea-content" }, index.h("textarea", { key: '9f9f6aa306d726bf1b13baf75dac1e5e9ef199d8', ref: (el) => (this.textareaEl = el), class: textareaClasses, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, required: this.required, rows: this.rows, maxLength: this.maxLength, style: { resize: this.resize }, "aria-label": this.label, "aria-describedby": this.showHintText && this.hintText ? 'hint-text' : undefined, "aria-invalid": String(this.error), onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, part: "textarea" })))), this.showHintText && this.hintText && (index.h("div", { key: '2b0288f4b0c3888ad4f9ca2870f6da14e6e39cdf', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+    }
+    static get formAssociated() { return true; }
+};
+BhTextarea.style = bhTextareaCss;
+
+exports.bh_textarea = BhTextarea;
+//# sourceMappingURL=bh-textarea.entry.cjs.js.map

package/cjs/bh-textarea.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-textarea.entry.cjs.js","sources":["src/components/bh-textarea/bh-textarea.css?tag=bh-textarea&encapsulation=shadow","src/components/bh-textarea/bh-textarea.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-TEXTAREA COMPONENT STYLES\n   ========================================================================== */\n\n:host {\n  display: block;\n}\n\n.textarea-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-sm);\n  width: 100%;\n}\n\n/* Container */\n.textarea-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-300);\n  border-radius: 8px;\n  box-shadow: 0px 1px 2px rgba(64, 73, 104, 0.06);\n  transition: all 0.2s ease-in-out;\n  min-height: 128px;\n}\n\n.textarea-container:hover:not(.textarea-container-disabled):not(.textarea-container-focused) {\n  border-color: var(--color-brand-500);\n}\n\n.textarea-container-focused {\n  border-color: var(--color-brand-500);\n  box-shadow: 0 0 0 1px var(--color-brand-500);\n}\n\n.textarea-container-error {\n  border-color: var(--color-error-300);\n}\n\n.textarea-container-error:hover:not(.textarea-container-focused) {\n  border-color: var(--color-error-500);\n}\n\n.textarea-container-error.textarea-container-focused {\n  border-color: var(--color-brand-500);\n  box-shadow: 0 0 0 1px var(--color-brand-500);\n}\n\n.textarea-container-disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background: var(--color-neutral-50);\n}\n\n/* Textarea Content */\n.textarea-content {\n  width: 100%;\n}\n\n/* Textarea */\n.textarea {\n  box-sizing: border-box;\n  padding: 12px 14px;\n  background: transparent;\n  border: none;\n  outline: none;\n  font-family: var(--font-inter);\n  font-weight: 400;\n  font-size: var(--text-sm-size);\n  line-height: 1.5;\n  color: var(--color-neutral-900);\n  width: 100%;\n  min-height: 96px;\n  resize: none;\n  caret-color: var(--color-brand-500);\n  flex: 1;\n  box-shadow: none;\n}\n\n.textarea:focus {\n  outline: none;\n  border: none;\n  box-shadow: none;\n}\n\n.textarea::placeholder {\n  color: var(--color-neutral-400);\n}\n\n.textarea:disabled {\n  cursor: not-allowed;\n  color: var(--color-neutral-400);\n}\n\n/* Hint Text */\n.hint-text {\n  font-family: var(--font-inter);\n  font-weight: 400;\n  font-size: var(--text-sm-size);\n  line-height: 1.43;\n  color: var(--color-neutral-600);\n}\n\n.hint-text.hint-error {\n  color: var(--color-error-600);\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n  .textarea {\n    font-size: 16px; /* Prevent zoom on iOS */\n  }\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncFormValue, updateValidity } from '../../utils/form';\n\nexport type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical';\n\n@Component({\n  tag: 'bh-textarea',\n  styleUrl: 'bh-textarea.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhTextarea {\n  @AttachInternals() internals!: ElementInternals;\n\n  private textareaEl?: HTMLTextAreaElement;\n  /**\n   * The label for the textarea\n   */\n  @Prop() label: string = 'Comment';\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string = 'Write a message...';\n\n  /**\n   * Hint text shown below the textarea\n   */\n  @Prop() hintText: string = '';\n\n  /**\n   * Whether to show the label\n   */\n  @Prop() showLabel: boolean = true;\n\n  /**\n   * Whether to show hint text\n   */\n  @Prop() showHintText: boolean = true;\n\n  /**\n   * Whether to show the help icon\n   */\n  @Prop() showHelpIcon: boolean = false;\n\n  /**\n   * Whether the field has an error\n   */\n  @Prop() error: boolean = false;\n\n  /**\n   * Whether the textarea is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the field is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Tooltip text for the help icon\n   */\n  @Prop() helpIconTooltip: string = 'Help';\n\n  /**\n   * The textarea value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Name attribute for form submission\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Default value for form reset\n   */\n  @Prop() defaultValue: string = '';\n\n  /**\n   * Custom validation message\n   */\n  @Prop() validationMessage: string = '';\n\n  /**\n   * Number of visible rows\n   */\n  @Prop() rows: number = 4;\n\n  /**\n   * Resize behavior\n   */\n  @Prop() resize: TextareaResize = 'none';\n\n  /**\n   * Maximum character length\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * Track focus state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Emitted when the value changes\n   */\n  @Event() bhInput!: EventEmitter<string>;\n\n  /**\n   * Emitted when the textarea gains focus\n   */\n  @Event() bhFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the textarea loses focus\n   */\n  @Event() bhBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the help icon is clicked\n   */\n  @Event() bhHelpClick!: EventEmitter<void>;\n\n  componentDidLoad() {\n    syncFormValue(this);\n    updateValidity(this.internals, this.textareaEl, this.validationMessage);\n  }\n\n  formResetCallback() {\n    this.value = this.defaultValue;\n    if (this.textareaEl) {\n      this.textareaEl.value = this.defaultValue;\n    }\n    syncFormValue(this);\n    updateValidity(this.internals, this.textareaEl);\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLTextAreaElement;\n    this.value = target.value;\n    this.bhInput.emit(this.value);\n    syncFormValue(this);\n    updateValidity(this.internals, this.textareaEl, this.validationMessage);\n  };\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n    this.bhFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n    this.bhBlur.emit();\n  };\n\n  private handleHelpClick = (): void => {\n    this.bhHelpClick.emit();\n  };\n\n  render() {\n    const containerClasses = {\n      'textarea-container': true,\n      'textarea-container-focused': this.isFocused,\n      'textarea-container-error': this.error,\n      'textarea-container-disabled': this.disabled,\n    };\n\n    const textareaClasses = {\n      'textarea': true,\n      'textarea-error': this.error,\n    };\n\n    return (\n      <div class=\"textarea-wrapper\" part=\"wrapper\">\n        <bh-label\n          label={this.showLabel ? this.label : ''}\n          required={this.required}\n          showHelpIcon={this.showHelpIcon}\n          helpIconTooltip={this.helpIconTooltip}\n          disabled={this.disabled}\n          onBhHelpClick={this.handleHelpClick}\n        >\n          <div class={containerClasses}>\n            <div class=\"textarea-content\">\n              <textarea\n                ref={(el) => (this.textareaEl = el)}\n                class={textareaClasses}\n                name={this.name}\n                value={this.value}\n                placeholder={this.placeholder}\n                disabled={this.disabled}\n                required={this.required}\n                rows={this.rows}\n                maxLength={this.maxLength}\n                style={{ resize: this.resize }}\n                aria-label={this.label}\n                aria-describedby={this.showHintText && this.hintText ? 'hint-text' : undefined}\n                aria-invalid={String(this.error)}\n                onInput={this.handleInput}\n                onFocus={this.handleFocus}\n                onBlur={this.handleBlur}\n                part=\"textarea\"\n              />\n            </div>\n          </div>\n        </bh-label>\n\n        {this.showHintText && this.hintText && (\n          <div\n            class={{ 'hint-text': true, 'hint-error': this.error }}\n            id=\"hint-text\"\n          >\n            {this.hintText}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":["syncFormValue","updateValidity","h"],"mappings":"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"}