@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/esm/bh-empty-state.bh-pagination.bh-skeleton-loader.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-empty-state.bh-pagination.bh-skeleton-loader.entry.js","sources":["src/components/bh-empty-state/bh-empty-state.css?tag=bh-empty-state&encapsulation=shadow","src/components/bh-empty-state/bh-empty-state.tsx","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":[":host {\n  display: block;\n  font-family: var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  );\n}\n\n/* Container */\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 32px;\n  padding: 48px 24px;\n  text-align: center;\n}\n\n/* Content */\n.empty-state-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 24px;\n}\n\n/* Illustration */\n.empty-state-illustration {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.empty-state-illustration img {\n  object-fit: contain;\n}\n\n/* Text */\n.empty-state-text {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n}\n\n.empty-state-title {\n  font-size: var(--text-lg-size, 18px);\n  font-weight: 600;\n  color: var(--color-neutral-900, #101828);\n  margin: 0;\n  line-height: 1.33;\n}\n\n.empty-state-description {\n  font-size: var(--text-sm-size, 14px);\n  font-weight: 400;\n  color: var(--color-neutral-600, #475467);\n  margin: 0;\n  line-height: 1.43;\n  max-width: 400px;\n}\n\n/* Actions */\n.empty-state-actions {\n  display: flex;\n  gap: 12px;\n  flex-wrap: wrap;\n  justify-content: center;\n}\n\n/* Material Symbols */\n.material-symbols-outlined {\n  font-family: 'Material Symbols Outlined';\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n}\n","import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\nexport type EmptyStateIllustrationSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  tag: 'bh-empty-state',\n  styleUrl: 'bh-empty-state.css',\n  shadow: true,\n})\nexport class BhEmptyState {\n  /**\n   * Title text\n   */\n  @Prop() emptyTitle: string = 'No items found';\n\n  /**\n   * Description text\n   */\n  @Prop() description: string = 'There are no items to display at the moment.';\n\n  /**\n   * Size of the illustration\n   */\n  @Prop() illustrationSize: EmptyStateIllustrationSize = 'md';\n\n  /**\n   * Path to the illustration SVG\n   */\n  @Prop() illustrationPath: string = '';\n\n  /**\n   * Primary action button text\n   */\n  @Prop() primaryActionText: string = '';\n\n  /**\n   * Primary action icon name\n   */\n  @Prop() primaryActionIcon: string = '';\n\n  /**\n   * Secondary action button text\n   */\n  @Prop() secondaryActionText: string = '';\n\n  /**\n   * Secondary action icon name\n   */\n  @Prop() secondaryActionIcon: string = '';\n\n  /**\n   * Max width of the component\n   */\n  @Prop() maxWidth: string = '512px';\n\n  /**\n   * Emitted when primary action is clicked\n   */\n  @Event() bhPrimaryAction!: EventEmitter<void>;\n\n  /**\n   * Emitted when secondary action is clicked\n   */\n  @Event() bhSecondaryAction!: EventEmitter<void>;\n\n  private handlePrimaryAction = (): void => {\n    this.bhPrimaryAction.emit();\n  };\n\n  private handleSecondaryAction = (): void => {\n    this.bhSecondaryAction.emit();\n  };\n\n  private getIllustrationDimensions(): { width: string; height: string } {\n    switch (this.illustrationSize) {\n      case 'sm':\n        return { width: '120px', height: '120px' };\n      case 'md':\n        return { width: '200px', height: '200px' };\n      case 'lg':\n        return { width: '280px', height: '280px' };\n      default:\n        return { width: '200px', height: '200px' };\n    }\n  }\n\n  render() {\n    const dimensions = this.getIllustrationDimensions();\n    const hasActions = this.primaryActionText || this.secondaryActionText;\n\n    return (\n      <div\n        class=\"empty-state\"\n        style={{ maxWidth: this.maxWidth }}\n        part=\"container\"\n      >\n        <div class=\"empty-state-content\">\n          {/* Illustration */}\n          {this.illustrationPath && (\n            <div class=\"empty-state-illustration\">\n              <img\n                src={this.illustrationPath}\n                alt=\"Empty state illustration\"\n                style={{ width: dimensions.width, height: dimensions.height }}\n              />\n            </div>\n          )}\n\n          {/* Text Content */}\n          <div class=\"empty-state-text\">\n            <h3 class=\"empty-state-title\">{this.emptyTitle}</h3>\n            <p class=\"empty-state-description\">{this.description}</p>\n          </div>\n        </div>\n\n        {/* Actions */}\n        {hasActions && (\n          <div class=\"empty-state-actions\">\n            {this.secondaryActionText && (\n              <bh-button\n                hierarchy=\"secondary\"\n                size=\"md\"\n                label={this.secondaryActionText}\n                icon={this.secondaryActionIcon ? 'leading' : 'none'}\n                iconName={this.secondaryActionIcon}\n                onBhClick={this.handleSecondaryAction}\n              />\n            )}\n            {this.primaryActionText && (\n              <bh-button\n                hierarchy=\"primary\"\n                size=\"md\"\n                label={this.primaryActionText}\n                icon={this.primaryActionIcon ? 'leading' : 'none'}\n                iconName={this.primaryActionIcon}\n                onBhClick={this.handlePrimaryAction}\n              />\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n","/* ==========================================================================\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":[],"mappings":"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"}

package/dist/esm/bh-empty-state_3.entry.js

@@ -0,0 +1,111 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.js';
+export { B as bh_pagination } from './bh-pagination-BtbbslVs.js';
+
+const bhEmptyStateCss = ":host{display:block;font-family:var(\n    --font-inter,\n    'Inter',\n    -apple-system,\n    BlinkMacSystemFont,\n    sans-serif\n  )}.empty-state{display:flex;flex-direction:column;align-items:center;gap:32px;padding:48px 24px;text-align:center}.empty-state-content{display:flex;flex-direction:column;align-items:center;gap:24px}.empty-state-illustration{display:flex;align-items:center;justify-content:center}.empty-state-illustration img{object-fit:contain}.empty-state-text{display:flex;flex-direction:column;align-items:center;gap:8px}.empty-state-title{font-size:var(--text-lg-size, 18px);font-weight:600;color:var(--color-neutral-900, #101828);margin:0;line-height:1.33}.empty-state-description{font-size:var(--text-sm-size, 14px);font-weight:400;color:var(--color-neutral-600, #475467);margin:0;line-height:1.43;max-width:400px}.empty-state-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-smoothing:antialiased;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}";
+
+const BhEmptyState = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhPrimaryAction = createEvent(this, "bhPrimaryAction");
+        this.bhSecondaryAction = createEvent(this, "bhSecondaryAction");
+    }
+    /**
+     * Title text
+     */
+    emptyTitle = 'No items found';
+    /**
+     * Description text
+     */
+    description = 'There are no items to display at the moment.';
+    /**
+     * Size of the illustration
+     */
+    illustrationSize = 'md';
+    /**
+     * Path to the illustration SVG
+     */
+    illustrationPath = '';
+    /**
+     * Primary action button text
+     */
+    primaryActionText = '';
+    /**
+     * Primary action icon name
+     */
+    primaryActionIcon = '';
+    /**
+     * Secondary action button text
+     */
+    secondaryActionText = '';
+    /**
+     * Secondary action icon name
+     */
+    secondaryActionIcon = '';
+    /**
+     * Max width of the component
+     */
+    maxWidth = '512px';
+    /**
+     * Emitted when primary action is clicked
+     */
+    bhPrimaryAction;
+    /**
+     * Emitted when secondary action is clicked
+     */
+    bhSecondaryAction;
+    handlePrimaryAction = () => {
+        this.bhPrimaryAction.emit();
+    };
+    handleSecondaryAction = () => {
+        this.bhSecondaryAction.emit();
+    };
+    getIllustrationDimensions() {
+        switch (this.illustrationSize) {
+            case 'sm':
+                return { width: '120px', height: '120px' };
+            case 'md':
+                return { width: '200px', height: '200px' };
+            case 'lg':
+                return { width: '280px', height: '280px' };
+            default:
+                return { width: '200px', height: '200px' };
+        }
+    }
+    render() {
+        const dimensions = this.getIllustrationDimensions();
+        const hasActions = this.primaryActionText || this.secondaryActionText;
+        return (h("div", { key: '726baf337a04c6f733957320b6efeb4a62cff3e8', class: "empty-state", style: { maxWidth: this.maxWidth }, part: "container" }, h("div", { key: '353101a9835cc3d88f5a97cca24585603f6b541f', class: "empty-state-content" }, this.illustrationPath && (h("div", { key: '2a1c5d14866012705df5f25d6096ba8c72cedf45', class: "empty-state-illustration" }, h("img", { key: 'aff2cf53fe902ab41a1708f7d56a8b2de75fd9dd', src: this.illustrationPath, alt: "Empty state illustration", style: { width: dimensions.width, height: dimensions.height } }))), h("div", { key: 'a9ffc2cf98530396089a3f97e74a936c454dca2d', class: "empty-state-text" }, h("h3", { key: 'dc547b53a660a139bd37c730b540ae199e64d17d', class: "empty-state-title" }, this.emptyTitle), h("p", { key: '55cdffdb165ac37592d479f13e2f31fe6bf41e1e', class: "empty-state-description" }, this.description))), hasActions && (h("div", { key: '57b26d57995e7f3c0f9086989f29b0fee4045d6a', class: "empty-state-actions" }, this.secondaryActionText && (h("bh-button", { key: 'f4bf465a1b45dfbf3fd0e86eb2adc44840891df7', hierarchy: "secondary", size: "md", label: this.secondaryActionText, icon: this.secondaryActionIcon ? 'leading' : 'none', iconName: this.secondaryActionIcon, onBhClick: this.handleSecondaryAction })), this.primaryActionText && (h("bh-button", { key: '3b2e7ec45aad23a60efe35c5fbe3fd572616e577', hierarchy: "primary", size: "md", label: this.primaryActionText, icon: this.primaryActionIcon ? 'leading' : 'none', iconName: this.primaryActionIcon, onBhClick: this.handlePrimaryAction }))))));
+    }
+};
+BhEmptyState.style = bhEmptyStateCss;
+
+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) {
+        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 (h("span", { key: 'db0a5cf09470b6bd54d8e8aa8f9a19e35bc0f949', class: skeletonClasses, style: { width: this.width, height: this.height }, role: "status", "aria-live": "polite", "aria-busy": "true", part: "skeleton" }, h("span", { key: '2e21ff7d34283aaef05044985e05a565df7f06d7', class: "visually-hidden" }, "Loading...")));
+    }
+};
+BhSkeletonLoader.style = bhSkeletonLoaderCss;
+
+export { BhEmptyState as bh_empty_state, BhSkeletonLoader as bh_skeleton_loader };
+//# sourceMappingURL=bh-empty-state.bh-pagination.bh-skeleton-loader.entry.js.map

package/dist/esm/bh-featured-icon.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h } from './index-DXAL-jSE.js';
+
+const bhFeaturedIconCss = ":host{display:inline-block}.featured-icon{display:inline-flex;align-items:center;justify-content:center;transition:all 0.2s ease}.featured-icon-sm{width:32px;height:32px;border-radius:6px}.featured-icon-md{width:40px;height:40px;border-radius:8px}.featured-icon-lg{width:48px;height:48px;border-radius:10px}.featured-icon-xl{width:56px;height:56px;border-radius:12px}.icon-sm{font-size:var(--icon-size-xs);width:var(--icon-size-xs);height:var(--icon-size-xs);line-height:1}.icon-md{font-size:var(--icon-size-md);width:var(--icon-size-md);height:var(--icon-size-md);line-height:1}.icon-lg{font-size:var(--icon-size-lg);width:var(--icon-size-lg);height:var(--icon-size-lg);line-height:1}.icon-xl{font-size:var(--icon-size-2xl);width:var(--icon-size-2xl);height:var(--icon-size-2xl);line-height:1}.featured-icon-brand.featured-icon-outlined{background-color:transparent;border:1px solid var(--color-neutral-200)}.featured-icon-brand.featured-icon-outlined .material-symbols-outlined{color:var(--color-brand-600)}.featured-icon-gray.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-gray.featured-icon-outlined .material-symbols-outlined{color:var(--color-neutral-600)}.featured-icon-error.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-error.featured-icon-outlined .material-symbols-outlined{color:var(--color-error-600)}.featured-icon-warning.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-warning.featured-icon-outlined .material-symbols-outlined{color:var(--color-warning-600)}.featured-icon-success.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-success.featured-icon-outlined .material-symbols-outlined{color:var(--color-success-600)}.featured-icon-highlight.featured-icon-outlined{border:1px solid var(--color-neutral-200)}.featured-icon-highlight.featured-icon-outlined .material-symbols-outlined{color:var(--color-purple-600)}.featured-icon-brand.featured-icon-filled{background-color:var(--color-brand-100);border:none}.featured-icon-brand.featured-icon-filled .material-symbols-outlined{color:var(--color-brand-600)}.featured-icon-gray.featured-icon-filled{background-color:var(--color-neutral-100);border:none}.featured-icon-gray.featured-icon-filled .material-symbols-outlined{color:var(--color-neutral-600)}.featured-icon-error.featured-icon-filled{background-color:var(--color-error-100);border:none}.featured-icon-error.featured-icon-filled .material-symbols-outlined{color:var(--color-error-600)}.featured-icon-warning.featured-icon-filled{background-color:var(--color-warning-200);border:none}.featured-icon-warning.featured-icon-filled .material-symbols-outlined{color:var(--color-warning-600)}.featured-icon-success.featured-icon-filled{background-color:var(--color-success-100);border:none}.featured-icon-success.featured-icon-filled .material-symbols-outlined{color:var(--color-success-600)}.featured-icon-highlight.featured-icon-filled{background-color:var(--color-purple-200);border:none}.featured-icon-highlight.featured-icon-filled .material-symbols-outlined{color:var(--color-purple-600)}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;user-select:none}";
+
+const BhFeaturedIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The size of the featured icon
+     */
+    size = 'md';
+    /**
+     * The color theme of the featured icon
+     */
+    color = 'gray';
+    /**
+     * The style variant (outlined or filled)
+     */
+    iconStyle = 'outlined';
+    /**
+     * The Material Symbol icon name
+     */
+    icon = 'star';
+    render() {
+        const containerClasses = {
+            'featured-icon': true,
+            [`featured-icon-${this.size}`]: true,
+            [`featured-icon-${this.color}`]: true,
+            [`featured-icon-${this.iconStyle}`]: true,
+        };
+        const iconClasses = `material-symbols-outlined icon-${this.size}`;
+        return (h("div", { key: '93ed57fa603fa36d0eb2ddcfa83895f3b5969083', class: containerClasses, part: "container" }, h("span", { key: '5dd3699dba085ab2e9b8a2d76318edae8e1b8cba', class: iconClasses }, this.icon)));
+    }
+};
+BhFeaturedIcon.style = bhFeaturedIconCss;
+
+export { BhFeaturedIcon as bh_featured_icon };
+//# sourceMappingURL=bh-featured-icon.entry.js.map

package/dist/esm/bh-illustrations.entry.js

@@ -0,0 +1,63 @@
+import { r as registerInstance, h, H as Host } from './index-DXAL-jSE.js';
+
+const bhIllustrationsCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:inline-flex}.illustration{display:inline-flex;align-items:center;justify-content:center;position:relative}.illustration-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-3xl)}.illustration-svg-container{display:flex;align-items:center;justify-content:center;position:relative}.illustration-image{width:100%;height:100%;object-fit:contain}.illustration-content{text-align:center;max-width:480px}.illustration-title{font-family:var(--font-inter);font-size:var(--text-lg-size);font-weight:var(--weight-semibold);line-height:var(--text-lg-line);color:var(--color-neutral-900);margin:0 0 var(--spacing-md) 0}.illustration-description{font-family:var(--font-inter);font-size:var(--text-md-size);font-weight:var(--weight-regular);line-height:var(--text-md-line);color:var(--color-neutral-600);margin:0}.illustration-sm .illustration-svg-container{width:80px;height:80px}.illustration-md .illustration-svg-container{width:120px;height:120px}.illustration-lg .illustration-svg-container{width:160px;height:160px}.illustration-xl .illustration-svg-container{width:200px;height:200px}.illustration-2xl .illustration-svg-container{width:240px;height:240px}.illustration-3xl .illustration-svg-container{width:280px;height:280px}.illustration-4xl .illustration-svg-container{width:320px;height:320px}@media (max-width: 768px){.illustration-4xl .illustration-svg-container{width:400px;height:400px}.illustration-3xl .illustration-svg-container{width:320px;height:320px}.illustration-content{max-width:320px}}@media (max-width: 480px){.illustration-4xl .illustration-svg-container,.illustration-3xl .illustration-svg-container{width:280px;height:280px}.illustration-2xl .illustration-svg-container{width:240px;height:240px}}";
+
+const BhIllustrations = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * Size of the illustration
+     */
+    size = 'lg';
+    /**
+     * Title text to display below the illustration
+     */
+    illustrationTitle;
+    /**
+     * Description text to display below the title
+     */
+    description;
+    /**
+     * Path to the SVG illustration
+     */
+    svgPath = '/illustrations/Search-not-found.svg';
+    /**
+     * Alt text for the illustration image
+     */
+    alt = 'Illustration';
+    getSvgDimensions() {
+        switch (this.size) {
+            case 'sm':
+                return { width: 120, height: 120 };
+            case 'md':
+                return { width: 160, height: 160 };
+            case 'lg':
+                return { width: 200, height: 200 };
+            case 'xl':
+                return { width: 280, height: 280 };
+            case '2xl':
+                return { width: 360, height: 360 };
+            case '3xl':
+                return { width: 480, height: 480 };
+            case '4xl':
+                return { width: 600, height: 600 };
+            default:
+                return { width: 200, height: 200 };
+        }
+    }
+    render() {
+        const dimensions = this.getSvgDimensions();
+        return (h(Host, { key: '3de29d491a6ca150687d9ee0aaaac249d60cc966' }, h("div", { key: '03fe38b304e4f6f33018e29e3049ba32adc0dc5d', class: `illustration illustration-${this.size}` }, h("div", { key: '49ccf2fd59aee6ed12ae6a341732b98dbc39f60e', class: "illustration-wrapper" }, h("div", { key: '0f16a287aa62f2c0f44b08b92434c4495d140c56', class: "illustration-svg-container", style: {
+                width: `${dimensions.width}px`,
+                height: `${dimensions.height}px`,
+            } }, h("img", { key: '1452a2a5215e1392bea453a1e06590e66c070370', src: this.svgPath, alt: this.alt, style: {
+                width: `${dimensions.width}px`,
+                height: `${dimensions.height}px`,
+            }, class: "illustration-image" })), (this.illustrationTitle || this.description) && (h("div", { key: '5d57a72b5fa2537061212a20182a4b8802435ca9', class: "illustration-content" }, this.illustrationTitle && (h("h3", { key: '32e360bc3e5f033004a02e72f588066324a50781', class: "illustration-title" }, this.illustrationTitle)), this.description && (h("p", { key: '32b2d8ea6272362145e5de4ea6077f5ca6fb2373', class: "illustration-description" }, this.description))))))));
+    }
+};
+BhIllustrations.style = bhIllustrationsCss;
+
+export { BhIllustrations as bh_illustrations };
+//# sourceMappingURL=bh-illustrations.entry.js.map

package/dist/esm/bh-input-autocomplete.entry.js

@@ -0,0 +1,340 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DXAL-jSE.js';
+
+const bhInputAutocompleteCss = "@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap'); :root{--color-white:hsl(0, 0%, 100%);--color-black:hsl(0, 0%, 0%);--color-transparent:hsla(0, 0%, 100%, 0);--color-neutral-25:hsl(240, 20%, 99%);--color-neutral-50:hsl(240, 20%, 98%);--color-neutral-100:hsl(240, 17%, 95%);--color-neutral-200:hsl(227, 25%, 89%);--color-neutral-300:hsl(224, 24%, 78%);--color-neutral-400:hsl(226, 24%, 59%);--color-neutral-500:hsl(226, 24%, 48%);--color-neutral-600:hsl(226, 24%, 38%);--color-neutral-700:hsl(226, 24%, 25%);--color-neutral-800:hsl(233, 33%, 10%);--color-neutral-900:hsl(231, 32%, 8%);--color-neutral-950:hsl(231, 32%, 8%);--color-brand-25:hsl(220, 82%, 98%);--color-brand-50:hsl(222, 87%, 97%);--color-brand-100:hsl(221, 94%, 94%);--color-brand-200:hsl(221, 92%, 86%);--color-brand-300:hsl(224, 95%, 77%);--color-brand-400:hsl(224, 94%, 72%);--color-brand-500:hsl(230, 67%, 58%);--color-brand-600:hsl(230, 69%, 48%);--color-brand-700:hsl(230, 75%, 34%);--color-brand-800:hsl(243, 86%, 44%);--color-brand-900:hsl(237, 69%, 24%);--color-brand-950:hsl(237, 61%, 20%);--color-error-25:hsl(12, 100%, 99%);--color-error-50:hsl(5, 86%, 97%);--color-error-100:hsl(4, 93%, 94%);--color-error-200:hsl(3, 96%, 89%);--color-error-300:hsl(4, 96%, 80%);--color-error-400:hsl(4, 92%, 69%);--color-error-500:hsl(4, 86%, 58%);--color-error-600:hsl(4, 74%, 49%);--color-error-700:hsl(4, 76%, 40%);--color-error-800:hsl(4, 72%, 33%);--color-error-900:hsl(8, 65%, 29%);--color-error-950:hsl(8, 75%, 19%);--color-warning-25:hsl(42, 100%, 98%);--color-warning-50:hsl(45, 100%, 96%);--color-warning-100:hsl(45, 96%, 89%);--color-warning-200:hsl(44, 98%, 77%);--color-warning-300:hsl(42, 99%, 65%);--color-warning-400:hsl(39, 98%, 56%);--color-warning-500:hsl(34, 94%, 50%);--color-warning-600:hsl(28, 97%, 44%);--color-warning-700:hsl(22, 92%, 37%);--color-warning-800:hsl(19, 84%, 31%);--color-warning-900:hsl(18, 79%, 27%);--color-warning-950:hsl(17, 79%, 17%);--color-success-25:hsl(142, 80%, 98%);--color-success-50:hsl(145, 81%, 96%);--color-success-100:hsl(140, 80%, 90%);--color-success-200:hsl(144, 78%, 80%);--color-success-300:hsl(148, 63%, 67%);--color-success-400:hsl(150, 57%, 54%);--color-success-500:hsl(152, 77%, 39%);--color-success-600:hsl(153, 91%, 30%);--color-success-700:hsl(155, 90%, 24%);--color-success-800:hsl(155, 84%, 20%);--color-success-900:hsl(156, 83%, 16%);--color-success-950:hsl(157, 82%, 11%);--font-inter:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI',\n    Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,\n    'Liberation Mono', 'Courier New', monospace;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--text-xl-size:1.25rem;--text-lg-size:1.125rem;--text-md-size:1rem;--text-sm-size:0.875rem;--text-xs-size:0.75rem;--text-xl-line:1.875rem;--text-lg-line:1.75rem;--text-md-line:1.5rem;--text-sm-line:1.25rem;--text-xs-line:1.125rem;--spacing-none:0rem;--spacing-xxs:0.125rem;--spacing-xs:0.25rem;--spacing-sm:0.375rem;--spacing-md:0.5rem;--spacing-lg:0.75rem;--spacing-xl:1rem;--spacing-2xl:1.25rem;--spacing-3xl:1.5rem;--spacing-4xl:2rem;--spacing-5xl:2.5rem;--spacing-6xl:3rem;--radius-none:0rem;--radius-xxs:0.125rem;--radius-xs:0.25rem;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.625rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.25rem;--radius-4xl:1.5rem;--radius-full:9999px;--shadow-xs:0px 1px 2px rgba(16, 24, 40, 0.05);--shadow-sm:0px 1px 3px rgba(16, 24, 40, 0.1),\n    0px 1px 2px rgba(16, 24, 40, 0.06);--shadow-md:0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n    0px 2px 4px -2px rgba(16, 24, 40, 0.06);--shadow-lg:0px 12px 16px -4px rgba(16, 24, 40, 0.08),\n    0px 4px 6px -2px rgba(16, 24, 40, 0.03);--shadow-xl:0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n    0px 8px 8px -4px rgba(16, 24, 40, 0.03);--icon-compensation-xs-btn:calc(var(--spacing-lg) - var(--spacing-xs));--icon-compensation-sm-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-md-btn:calc(var(--spacing-xl) - var(--spacing-xs));--icon-compensation-lg-btn:calc(var(--spacing-xl) - var(--spacing-xs))}*,*::before,*::after{box-sizing:border-box}.material-symbols-outlined{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;font-feature-settings:'liga';-webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased}:host{display:block;position:relative}.input-autocomplete-wrapper{position:relative}.input-wrapper{display:flex;flex-direction:column;gap:var(--spacing-sm)}.input-field{display:flex;align-items:center;min-height:44px;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-white);border:1px solid var(--color-neutral-300);border-radius:var(--radius-md);transition:all 0.15s ease}.input-field.input-hover{border-color:var(--color-neutral-400)}.input-field.input-focused{border-color:var(--color-brand-500);box-shadow:0 0 0 4px var(--color-brand-50)}.input-field.input-error{border-color:var(--color-error-500)}.input-field.input-error.input-focused{box-shadow:0 0 0 4px var(--color-error-50)}.input-field.input-disabled{background:var(--color-neutral-50);cursor:not-allowed}.input-content-flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--spacing-xs);width:100%}.leading-icon{font-size:20px;color:var(--color-neutral-500);flex-shrink:0}.inline-input{flex:1;min-width:60px;border:none;outline:none;background:transparent;font-family:var(--font-inter);font-size:var(--text-md-size);line-height:var(--text-md-line);color:var(--color-neutral-900)}.inline-input::placeholder{color:var(--color-neutral-500)}.inline-input:disabled{cursor:not-allowed;color:var(--color-neutral-400)}.hint-text{font-family:var(--font-inter);font-size:var(--text-sm-size);line-height:var(--text-sm-line);color:var(--color-neutral-600);transition:opacity 0.15s ease}.hint-text.hint-error{color:var(--color-error-600)}";
+
+const BhInputAutocomplete = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhChange = createEvent(this, "bhChange");
+        this.bhSelectedItemsChange = createEvent(this, "bhSelectedItemsChange");
+        this.bhFocus = createEvent(this, "bhFocus");
+        this.bhBlur = createEvent(this, "bhBlur");
+        this.bhHelpClick = createEvent(this, "bhHelpClick");
+        this.bhOptionSelect = createEvent(this, "bhOptionSelect");
+    }
+    get el() { return getElement(this); }
+    // Base input props
+    /**
+     * Input state
+     */
+    state;
+    /**
+     * Whether input has error
+     */
+    error = false;
+    /**
+     * Whether input is required
+     */
+    required = false;
+    /**
+     * Whether input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether to show help icon
+     */
+    showHelpIcon = false;
+    /**
+     * Whether to show leading icon
+     */
+    showLeadingIcon = true;
+    /**
+     * Whether to show label
+     */
+    showLabel = true;
+    /**
+     * Whether to show hint text
+     */
+    showHintText = true;
+    /**
+     * Label text
+     */
+    label = 'Search';
+    /**
+     * Placeholder text
+     */
+    placeholder = 'Search...';
+    /**
+     * Hint text
+     */
+    hintText = 'This is a hint text to help user.';
+    /**
+     * Leading icon name
+     */
+    leadingIcon = 'search';
+    /**
+     * Help icon tooltip
+     */
+    helpIconTooltip = 'Help';
+    /**
+     * Current value
+     */
+    value = '';
+    /**
+     * Width of the component
+     */
+    width = '450px';
+    // Autocomplete-specific props
+    /**
+     * Available options
+     */
+    options = [];
+    /**
+     * Maximum number of options to show
+     */
+    maxOptions = 10;
+    /**
+     * Enable multi-select mode
+     */
+    multiSelect = false;
+    /**
+     * Minimum search length to show options
+     */
+    minSearchLength = 3;
+    /**
+     * Selected items (for multi-select)
+     */
+    selectedItems = [];
+    showDropdown = false;
+    focusedOptionIndex = -1;
+    isFocused = false;
+    isHovered = false;
+    isTagClickOpen = false;
+    /**
+     * Event emitted when value changes
+     */
+    bhChange;
+    /**
+     * Event emitted when selected items change
+     */
+    bhSelectedItemsChange;
+    /**
+     * Event emitted when input is focused
+     */
+    bhFocus;
+    /**
+     * Event emitted when input is blurred
+     */
+    bhBlur;
+    /**
+     * Event emitted when help icon is clicked
+     */
+    bhHelpClick;
+    /**
+     * Event emitted when an option is selected
+     */
+    bhOptionSelect;
+    handleValueChange(newValue) {
+        if (newValue && newValue.length >= this.minSearchLength) {
+            this.showDropdown = true;
+        }
+    }
+    get filteredOptions() {
+        let baseOptions = [];
+        if (this.isTagClickOpen && this.multiSelect) {
+            baseOptions = this.selectedItems;
+        }
+        else if (this.showDropdown && (!this.value || this.value.length === 0)) {
+            baseOptions = this.options.slice(0, this.maxOptions);
+        }
+        else if (this.value && this.value.length >= this.minSearchLength) {
+            const searchLower = this.value.toLowerCase();
+            const filtered = this.options.filter(option => option.label.toLowerCase().includes(searchLower));
+            baseOptions = filtered.slice(0, this.maxOptions);
+        }
+        return baseOptions.map(option => ({
+            ...option,
+            selected: this.multiSelect && this.selectedItems.some(item => item.id === option.id),
+        }));
+    }
+    get shouldShowClearButton() {
+        return !this.disabled && ((this.multiSelect && this.selectedItems.length > 0) ||
+            (!this.multiSelect && Boolean(this.value && this.value.length > 0)));
+    }
+    get visibleTags() {
+        if (!this.multiSelect || this.selectedItems.length === 0) {
+            return { tags: [], remaining: 0 };
+        }
+        const containerWidth = parseFloat(this.width.replace('px', '')) || 450;
+        const searchIconWidth = this.showLeadingIcon ? 40 : 0;
+        const clearButtonWidth = this.shouldShowClearButton ? 32 : 0;
+        const inputFieldMinWidth = 60;
+        const padding = 24;
+        const reservedWidth = searchIconWidth + clearButtonWidth + inputFieldMinWidth + padding;
+        const availableWidth = Math.max(containerWidth - reservedWidth, 80);
+        let currentWidth = 0;
+        const visibleTagsList = [];
+        const tagSpacing = 8;
+        const counterWidth = 40;
+        const reversedItems = [...this.selectedItems].reverse();
+        for (let i = 0; i < reversedItems.length; i++) {
+            const tag = reversedItems[i];
+            const baseTagWidth = Math.min(tag.label.length * 8 + 36, 150);
+            const remainingAfterThis = reversedItems.length - (i + 1);
+            const needsCounter = remainingAfterThis > 0;
+            const totalRequiredWidth = currentWidth + baseTagWidth + (needsCounter ? counterWidth : 0);
+            if (totalRequiredWidth <= availableWidth) {
+                visibleTagsList.push(tag);
+                currentWidth += baseTagWidth + tagSpacing;
+            }
+            else {
+                break;
+            }
+        }
+        const finalVisibleTags = visibleTagsList.reverse();
+        return {
+            tags: finalVisibleTags,
+            remaining: this.selectedItems.length - finalVisibleTags.length,
+        };
+    }
+    handleInputChange = (e) => {
+        const target = e.target;
+        this.value = target.value;
+        this.bhChange.emit(this.value);
+        this.isTagClickOpen = false;
+        if (this.value.length >= this.minSearchLength) {
+            this.focusedOptionIndex = -1;
+        }
+        else {
+            this.showDropdown = false;
+        }
+    };
+    handleInputFocus = () => {
+        this.isFocused = true;
+        this.bhFocus.emit();
+        if (this.value && this.value.length >= this.minSearchLength && this.filteredOptions.length > 0) {
+            this.showDropdown = true;
+        }
+    };
+    getInputTextState() {
+        if (this.state === 'placeholder') {
+            return 'default';
+        }
+        if (this.state === 'focused') {
+            return 'focus';
+        }
+        return this.state;
+    }
+    handleInputBlur = () => {
+        setTimeout(() => {
+            this.isFocused = false;
+            this.showDropdown = false;
+            this.focusedOptionIndex = -1;
+            this.isTagClickOpen = false;
+            this.bhBlur.emit();
+        }, 200);
+    };
+    handleOptionSelect = (event) => {
+        const option = event.detail;
+        if (option.disabled)
+            return;
+        this.bhOptionSelect.emit(option);
+        if (this.multiSelect) {
+            const isSelected = this.selectedItems.some(item => item.id === option.id);
+            const newItems = isSelected
+                ? this.selectedItems.filter(item => item.id !== option.id)
+                : [...this.selectedItems, option];
+            this.selectedItems = newItems;
+            this.bhSelectedItemsChange.emit(newItems);
+            this.value = '';
+            this.bhChange.emit('');
+            this.isTagClickOpen = false;
+            this.showDropdown = false;
+        }
+        else {
+            this.value = option.label;
+            this.bhChange.emit(option.label);
+            this.showDropdown = false;
+        }
+    };
+    handleTagRemove = (tag) => {
+        const newItems = this.selectedItems.filter(item => item.id !== tag.id);
+        this.selectedItems = newItems;
+        this.bhSelectedItemsChange.emit(newItems);
+    };
+    handleTagClick = (e) => {
+        if (e.target.closest('.tag-dismiss')) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        if (!this.disabled) {
+            this.isTagClickOpen = true;
+            this.showDropdown = true;
+            this.isFocused = true;
+        }
+    };
+    handleClearAll = () => {
+        if (this.multiSelect) {
+            this.selectedItems = [];
+            this.bhSelectedItemsChange.emit([]);
+        }
+        this.value = '';
+        this.bhChange.emit('');
+    };
+    handleKeyDown = (e) => {
+        if (!this.showDropdown || this.filteredOptions.length === 0)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                this.focusedOptionIndex = this.focusedOptionIndex < this.filteredOptions.length - 1
+                    ? this.focusedOptionIndex + 1
+                    : 0;
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                this.focusedOptionIndex = this.focusedOptionIndex > 0
+                    ? this.focusedOptionIndex - 1
+                    : this.filteredOptions.length - 1;
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (this.focusedOptionIndex >= 0 && this.focusedOptionIndex < this.filteredOptions.length) {
+                    const option = this.filteredOptions[this.focusedOptionIndex];
+                    this.handleOptionSelect({ detail: option });
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                this.showDropdown = false;
+                this.focusedOptionIndex = -1;
+                break;
+        }
+    };
+    handleItemHover = (event) => {
+        this.focusedOptionIndex = event.detail;
+    };
+    render() {
+        const { tags, remaining } = this.visibleTags;
+        return (h(Host, { key: '05045fca42459813e1d147d76378d9a5ab1a12a9' }, h("div", { key: '88d4f3afbececb7ddb3b53f122bd4e650405f377', class: "input-autocomplete-wrapper", style: { width: this.width }, onKeyDown: this.handleKeyDown }, this.multiSelect ? (
+        // Multi-select input with flowing tags
+        h("div", { class: "input-wrapper" }, h("bh-label", { label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: () => this.bhHelpClick.emit() }, h("div", { class: {
+                'input-field': true,
+                'autocomplete-multi-input': true,
+                'input-error': this.error,
+                'input-disabled': this.disabled,
+                'input-focused': this.isFocused,
+                'input-hover': this.isHovered,
+            }, onMouseEnter: () => !this.isFocused && (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("div", { class: "input-content-flow" }, this.showLeadingIcon && (h("span", { class: "leading-icon material-symbols-outlined" }, this.leadingIcon)), tags.map(tag => (h("div", { key: tag.id, onClick: this.handleTagClick, onMouseDown: e => e.preventDefault(), style: { cursor: 'pointer' } }, h("bh-tag", { variant: "text-only", size: "sm", label: tag.label, dismissible: !this.disabled, disabled: this.disabled, maxWidth: 150, onBhDismiss: () => this.handleTagRemove(tag) })))), remaining > 0 && (h("div", { onClick: this.handleTagClick, onMouseDown: e => e.preventDefault(), style: { cursor: 'pointer' } }, h("bh-tag", { variant: "text-only", size: "sm", label: `+${remaining}`, dismissible: false, disabled: this.disabled }))), h("input", { type: "text", value: this.value, placeholder: tags.length === 0 ? this.placeholder : '', disabled: this.disabled, class: "inline-input", onInput: this.handleInputChange, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur }), this.shouldShowClearButton && (h("bh-button-icon", { hierarchy: "tertiary", size: "xs", iconName: "close", onBhClick: this.handleClearAll, disabled: this.disabled }))))), this.showHintText && this.hintText && (h("div", { class: { 'hint-text': true, 'hint-error': this.error }, style: { opacity: this.showDropdown ? '0' : '1' } }, this.hintText)))) : (
+        // Standard single-select using bh-input-text
+        h("bh-input-text", { state: this.getInputTextState(), error: this.error, required: this.required, disabled: this.disabled, showHelpIcon: this.showHelpIcon, showLeadingIcon: this.showLeadingIcon, showLabel: this.showLabel, showHintText: this.showHintText, label: this.label, placeholder: this.placeholder, hintText: this.hintText, leadingIcon: this.leadingIcon, helpIconTooltip: this.helpIconTooltip, value: this.value, width: "100%", onBhInput: (e) => {
+                this.value = e.detail;
+                this.bhChange.emit(this.value);
+                this.isTagClickOpen = false;
+                if (this.value.length >= this.minSearchLength) {
+                    this.showDropdown = true;
+                }
+                else {
+                    this.showDropdown = false;
+                }
+            }, onBhFocus: this.handleInputFocus, onBhBlur: this.handleInputBlur, onBhHelpClick: () => this.bhHelpClick.emit() })), h("bh-autocomplete-menu", { key: 'a172ea13dcff3f03895384d83270333a1325870b', visible: this.showDropdown, menuItems: this.filteredOptions, selectedIndex: this.focusedOptionIndex, multiSelect: this.multiSelect, searchQuery: this.value, onBhItemClick: this.handleOptionSelect, onBhItemHover: this.handleItemHover }))));
+    }
+    static get watchers() { return {
+        "value": ["handleValueChange"]
+    }; }
+};
+BhInputAutocomplete.style = bhInputAutocompleteCss;
+
+export { BhInputAutocomplete as bh_input_autocomplete };
+//# sourceMappingURL=bh-input-autocomplete.entry.js.map