@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-sidebar.js","sourceRoot":"","sources":["../../../src/components/bh-sidebar/bh-sidebar.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/collection/components/bh-skeleton-loader/bh-skeleton-loader.css

@@ -0,0 +1,50 @@
+/* ==========================================================================
+   BH-SKELETON-LOADER COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: inline-block;
+}
+
+.skeleton {
+  display: inline-block;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.03) 50%,
+    rgba(0, 0, 0, 0.06) 75%
+  );
+  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;
+}

package/collection/components/bh-skeleton-loader/bh-skeleton-loader.js

@@ -0,0 +1,99 @@
+import { h } from "@stencil/core";
+export class BhSkeletonLoader {
+    /**
+     * 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 (h("span", { key: 'c49b2ec3dced60f158ec5dbb0471f6fc057984d1', class: skeletonClasses, style: { width: this.width, height: this.height }, role: "status", "aria-live": "polite", "aria-busy": "true", part: "skeleton" }, h("span", { key: 'b360eefd8747e5b5c2a863bf6bf6083b978a6a55', class: "visually-hidden" }, "Loading...")));
+    }
+    static get is() { return "bh-skeleton-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-skeleton-loader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-skeleton-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Width of the skeleton (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "width",
+                "defaultValue": "'100%'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Height of the skeleton (CSS value)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "height",
+                "defaultValue": "'1em'"
+            },
+            "circle": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the skeleton should be circular"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "circle",
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=bh-skeleton-loader.js.map

package/collection/components/bh-skeleton-loader/bh-skeleton-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-skeleton-loader.js","sourceRoot":"","sources":["../../../src/components/bh-skeleton-loader/bh-skeleton-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,gBAAgB;IAC3B;;OAEG;IACK,KAAK,GAAW,MAAM,CAAC;IAE/B;;OAEG;IACK,MAAM,GAAW,KAAK,CAAC;IAE/B;;OAEG;IACK,MAAM,GAAY,KAAK,CAAC;IAEhC,MAAM;QACJ,MAAM,eAAe,GAAG;YACtB,UAAU,EAAE,IAAI;YAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;SAC/B,CAAC;QAEF,OAAO,CACL,6DACE,KAAK,EAAE,eAAe,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EACjD,IAAI,EAAC,QAAQ,eACH,QAAQ,eACR,MAAM,EAChB,IAAI,EAAC,UAAU;YAEf,6DAAM,KAAK,EAAC,iBAAiB,iBAAkB,CAC1C,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/collection/components/bh-tab-item/bh-tab-item.css

@@ -0,0 +1,132 @@
+/* ==========================================================================
+   BH-TAB-ITEM COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: flex;
+}
+
+/* Full Width for Tab Items inside Full Width Tabs */
+:host(.tab-item-full) {
+  flex: 1 0 0;
+  min-width: 0;
+}
+
+/* Tab Button Base */
+.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%;
+}
+
+/* Underline Type Specific Styles */
+:host-context(.tabs-underline) .tab-button {
+  border-radius: 0;
+  padding-top: var(--spacing-xs);
+  padding-bottom: var(--spacing-md);
+  border-bottom: 2px solid transparent;
+}
+
+/* Full Width Tab Items */
+:host-context(.tabs-full-width) .tab-button {
+  justify-content: center;
+}
+
+/* Active State - Contained Type */
+:host-context(.tabs-contained) .tab-button-active {
+  color: var(--color-brand-600);
+  background-color: var(--color-brand-50);
+}
+
+/* Active State - Underline Type */
+:host-context(.tabs-underline) .tab-button-active {
+  color: var(--color-brand-600);
+  border-bottom-color: var(--color-brand-600);
+}
+
+/* Hover State - Contained Type */
+: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);
+}
+
+/* Hover State - Underline Type */
+:host-context(.tabs-underline)
+  .tab-button:hover:not(.tab-button-disabled):not(.tab-button-active) {
+  color: var(--color-neutral-700);
+}
+
+/* Active/Pressed State - Contained Type */
+:host-context(.tabs-contained) .tab-button:active:not(.tab-button-disabled) {
+  background-color: var(--color-neutral-100);
+}
+
+/* Focus State */
+.tab-button:focus-visible {
+  outline: 2px solid var(--color-brand-500);
+  outline-offset: 2px;
+}
+
+/* Disabled State */
+.tab-button-disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* Tab Label */
+.tab-label {
+  display: inline-block;
+}
+
+/* ==========================================================================
+   VERTICAL ORIENTATION STYLES
+   ========================================================================== */
+
+/* Vertical Tab Items take full width */
+:host-context(.tabs-vertical) {
+  width: 100%;
+}
+
+:host-context(.tabs-vertical) .tab-button {
+  justify-content: flex-start;
+  width: 100%;
+}
+
+/* Vertical Contained - Active State */
+:host-context(.tabs-vertical.tabs-contained) .tab-button-active {
+  color: var(--color-brand-600);
+  background-color: var(--color-brand-50);
+}
+
+/* Vertical Underline - Uses left border instead of bottom */
+: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);
+}
+
+/* Vertical Underline - Active State */
+: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;
+}

package/collection/components/bh-tab-item/bh-tab-item.js

@@ -0,0 +1,158 @@
+import { h, Host, } from "@stencil/core";
+/**
+ * @slot - Tab content (usually just text, but can include badges)
+ */
+export class BhTabItem {
+    el;
+    /**
+     * 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 (h(Host, { key: '4ad8e3e786f4a4c8a2c38e518e66ef2ded4c04ca', class: {
+                'tab-item': true,
+                'tab-item-active': this.active,
+                'tab-item-disabled': this.disabled,
+            } }, 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" }, h("span", { key: '03f58f2761a021310a6cd2f811795dbc95e02ea1', class: "tab-label", part: "label" }, this.label), h("slot", { key: 'd96a82e89d9d7c64d1f17c65da4a47f4774ed96a' }))));
+    }
+    static get is() { return "bh-tab-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bh-tab-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bh-tab-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier for this tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text for the tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this tab is currently active"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this tab is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bhTabItemClick",
+                "name": "bhTabItemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tab is clicked"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=bh-tab-item.js.map

package/collection/components/bh-tab-item/bh-tab-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-tab-item.js","sourceRoot":"","sources":["../../../src/components/bh-tab-item/bh-tab-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,OAAO,GACR,MAAM,eAAe,CAAC;AAEvB;;GAEG;AAMH,MAAM,OAAO,SAAS;IACT,EAAE,CAAe;IAE5B;;OAEG;IACK,KAAK,CAAU;IAEvB;;OAEG;IACK,KAAK,CAAU;IAEvB;;OAEG;IACK,MAAM,GAAY,KAAK,CAAC;IAEhC;;OAEG;IACK,QAAQ,GAAY,KAAK,CAAC;IAElC;;OAEG;IAEH,cAAc,CAAwB;IAE9B,WAAW,GAAG,GAAS,EAAE;QAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,aAAa,GAAG;YACpB,YAAY,EAAE,IAAI;YAClB,mBAAmB,EAAE,IAAI,CAAC,MAAM;YAChC,qBAAqB,EAAE,IAAI,CAAC,QAAQ;SACrC,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI;gBAChB,iBAAiB,EAAE,IAAI,CAAC,MAAM;gBAC9B,mBAAmB,EAAE,IAAI,CAAC,QAAQ;aACnC;YAED,+DACE,KAAK,EAAE,aAAa,EACpB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,mBAC9B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC/C,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAC,QAAQ;gBAEb,6DAAM,KAAK,EAAC,WAAW,EAAC,IAAI,EAAC,OAAO,IACjC,IAAI,CAAC,KAAK,CACN;gBACP,8DAAQ,CACD,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -0,0 +1,71 @@
+/* ==========================================================================
+   BH-TABS COMPONENT STYLES
+   ========================================================================== */
+
+:host {
+  display: block;
+  width: 100%;
+}
+
+/* Tabs Container */
+.tabs-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Tabs List */
+.tabs-list {
+  display: flex;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-none);
+  position: relative;
+}
+
+/* Full Width */
+.tabs-full-width .tabs-list {
+  width: 100%;
+  gap: var(--spacing-lg);
+  justify-content: center;
+}
+
+/* Underline Type - Horizontal */
+.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);
+}
+
+/* Contained Type */
+.tabs-contained .tabs-list {
+  gap: var(--spacing-xs);
+}
+
+/* ==========================================================================
+   VERTICAL ORIENTATION
+   ========================================================================== */
+
+.tabs-vertical {
+  width: auto;
+}
+
+.tabs-vertical .tabs-container {
+  width: auto;
+}
+
+.tabs-vertical .tabs-list {
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  width: 204px;
+}
+
+/* Vertical Underline Type - Left border instead of bottom */
+.tabs-underline.tabs-vertical .tabs-container {
+  border-bottom: none;
+}