@actabldesign/bellhop-core 0.0.3 → 0.0.4

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

@@ -0,0 +1,108 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        this.bhMenuItemClick = createEvent(this, "bhMenuItemClick");
+        this.bhSearchClick = createEvent(this, "bhSearchClick");
+        this.bhAvatarMenuClick = 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 (h(Host, { key: '8ea6a230d0b50bac6868a43f2f4c3b4cb89f147d' }, h("div", { key: '152c63b3a7a61ea13ca78b05ef3077b135cc4638', class: sidebarClasses }, h("div", { key: '13fdf8adc8c29bf947a43ab05b4cbd67bab9bc82', class: "navigation" }, h("div", { key: 'fd4960f7b232bdfff7bb80d98f718d5bdeddd5a3', class: "gradient-bar" }, h("div", { key: '5304c3a6b81a9941491105233770977c64e06586', class: "detail-bar" })), h("div", { key: '000cad8051add1dbabfe2454579c22ffa371ebc0', class: "sidebar-content" }, h("bh-logo-box", { key: 'ca59b066c4d1053824443a8dd63702d285a66b7c', logoType: this.logoType }), h("div", { key: 'a8b8fc37101b5a8ad83c309dbbf8dbd45b9227f9', class: "navigation-section" }, h("div", { key: '10dda65730b5c23d2a13f0a27636192da1c9b21a', class: "search-container" }, h("bh-button-icon", { key: '52379a2f1fbf04ff494e7cff1b33aca99ce809fb', hierarchy: "secondary", size: "sm", iconName: "search", onClick: this.handleSearchClick })), h("div", { key: '85b26cfcd1b91e4d96be801e654acba45f3649a5', class: "nav-items" }, this.menuItems.map((item) => (h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: this.activeItem === item.label, onBhClick: () => this.handleNavItemClick(item.label) }))))), h("div", { key: '82647befc09ce326032e6b034189180e826fb7f6', class: "sidebar-footer" }, h("div", { key: '0d8a12f59003ff31b97430ccc017fdd9bfa6636f', class: "footer-navigation" }, this.footerItems.map((item) => (h("bh-nav-item", { key: item.label, icon: item.icon, label: item.label, isActive: false, onBhClick: () => this.handleNavItemClick(item.label) })))), h("bh-dropdown", { key: '4016dd4b427aba6b25d8f1d7e04c90236a97d28a', 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;
+
+export { BhSidebar as bh_sidebar };
+//# sourceMappingURL=bh-sidebar.entry.js.map

package/dist/esm/bh-tab-item.entry.js

@@ -0,0 +1,52 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        this.bhTabItemClick = createEvent(this, "bhTabItemClick");
+    }
+    get el() { return 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 (h(Host, { key: 'ef47c62d9595bb0f5648bacb3d4c8e1585d35a91', class: {
+                'tab-item': true,
+                'tab-item-active': this.active,
+                'tab-item-disabled': this.disabled,
+            } }, h("button", { key: 'a2e2130bc0cb369c456b9898732cd90350b69a79', 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: '2c415f19e1901e3d36039b5960b8ba80dd58d545', class: "tab-label", part: "label" }, this.label), h("slot", { key: 'd4484b4a489ddd7babdfba449e023370ae9aaea5' }))));
+    }
+};
+BhTabItem.style = bhTabItemCss;
+
+export { BhTabItem as bh_tab_item };
+//# sourceMappingURL=bh-tab-item.entry.js.map

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

@@ -0,0 +1,50 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-DXAL-jSE.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) {
+        registerInstance(this, hostRef);
+        this.bhTabChange = 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 (h(Host, { key: '93b74ceb1d093513ff2d5a167e3de238209411a4', class: hostClasses }, h("div", { key: '290c0e7ce4d1ae84e566237a122786e305522b9f', class: "tabs-container", part: "container" }, h("div", { key: '424276b73c8279c24441a389026c0c7db25e55b1', class: "tabs-list", part: "list", role: "tablist", "aria-orientation": this.orientation }, h("slot", { key: 'fe8030d885237dccbef3d1a70bc912c338b038c6' })))));
+    }
+};
+BhTabs.style = bhTabsCss;
+
+export { BhTabs as bh_tabs };
+//# sourceMappingURL=bh-tabs.entry.js.map

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

@@ -0,0 +1,159 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.js';
+import { s as syncFormValue, u as updateValidity } from './form-CPgx0iFq.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) {
+        registerInstance(this, hostRef);
+        this.bhInput = createEvent(this, "bhInput");
+        this.bhFocus = createEvent(this, "bhFocus");
+        this.bhBlur = createEvent(this, "bhBlur");
+        this.bhHelpClick = 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() {
+        syncFormValue(this);
+        updateValidity(this.internals, this.textareaEl, this.validationMessage);
+    }
+    formResetCallback() {
+        this.value = this.defaultValue;
+        if (this.textareaEl) {
+            this.textareaEl.value = this.defaultValue;
+        }
+        syncFormValue(this);
+        updateValidity(this.internals, this.textareaEl);
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        this.value = target.value;
+        this.bhInput.emit(this.value);
+        syncFormValue(this);
+        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 (h("div", { key: 'a822380cef2104a61c1a8f2f79900b9ed9c12063', class: "textarea-wrapper", part: "wrapper" }, h("bh-label", { key: 'd8c77f1ddc75f6b42bc47bb8086ada57ca1c3e35', label: this.showLabel ? this.label : '', required: this.required, showHelpIcon: this.showHelpIcon, helpIconTooltip: this.helpIconTooltip, disabled: this.disabled, onBhHelpClick: this.handleHelpClick }, h("div", { key: '6d92f1c3a0f34729c24677c2a071559b5e7d527f', class: containerClasses }, h("div", { key: '9ac271fe196de95b9460eea3bf3cbfd1fd768c13', class: "textarea-content" }, h("textarea", { key: '1900eb1a188165ef624a41de391b5d0648d1b8b4', 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 && (h("div", { key: '2733112bfee45f11e13d92631c5f17518634030b', class: { 'hint-text': true, 'hint-error': this.error }, id: "hint-text" }, this.hintText))));
+    }
+    static get formAssociated() { return true; }
+};
+BhTextarea.style = bhTextareaCss;
+
+export { BhTextarea as bh_textarea };
+//# sourceMappingURL=bh-textarea.entry.js.map

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

@@ -0,0 +1,139 @@
+import { r as registerInstance, c as createEvent, h } from './index-DXAL-jSE.js';
+import { a as syncCheckableFormValue, v as validateRequired } from './form-CPgx0iFq.js';
+
+const bhToggleCss = ":host{display:inline-block}.toggle-wrapper{display:flex;align-items:center;gap:0}.toggle-with-text.toggle-size-sm{gap:var(--spacing-md)}.toggle-with-text.toggle-size-md{gap:var(--spacing-lg)}.toggle-switch{position:relative;display:inline-block;border-radius:var(--radius-full);cursor:pointer;transition:background-color 0.2s ease;outline:none;border:1px solid transparent;background:transparent;overflow:visible;padding:0}.toggle-switch:focus{outline:none}.toggle-switch.toggle-disabled{cursor:not-allowed;opacity:0.38}.toggle-switch.toggle-sm{width:36px;height:20px}.toggle-switch.toggle-md{width:40px;height:24px}.toggle-switch.toggle-unpressed{background-color:var(--color-neutral-300);border-color:transparent}.toggle-switch.toggle-unpressed.toggle-hover{background-color:var(--color-neutral-400);border-color:transparent}.toggle-switch.toggle-unpressed.toggle-focus{background-color:var(--color-neutral-200);border-color:transparent}.toggle-switch.toggle-unpressed.toggle-focus .toggle-button::after{content:'';position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:var(--radius-full);background:var(--color-neutral-600);opacity:0.12;pointer-events:none}.toggle-switch.toggle-unpressed.toggle-disabled{background-color:var(--color-neutral-100);border-color:transparent}.toggle-switch.toggle-pressed{background-color:var(--color-brand-600);border-color:var(--color-brand-600)}.toggle-switch.toggle-pressed.toggle-hover{background-color:var(--color-brand-700);border-color:var(--color-brand-700)}.toggle-switch.toggle-pressed.toggle-focus{background-color:var(--color-brand-600);border-color:var(--color-brand-600)}.toggle-switch.toggle-pressed.toggle-focus .toggle-button::after{content:'';position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:var(--radius-full);background:var(--color-brand-100);opacity:0.24;pointer-events:none}.toggle-switch.toggle-pressed.toggle-disabled{background-color:var(--color-neutral-200);border-color:var(--color-neutral-200)}.toggle-switch.toggle-pressed.toggle-disabled .toggle-button{background-color:var(--color-neutral-100)}.toggle-button{position:absolute;top:50%;transform:translateY(-50%);border-radius:var(--radius-full);background-color:var(--color-neutral-600);transition:all 0.2s ease}.toggle-switch.toggle-unpressed .toggle-button{background-color:var(--color-white)}.toggle-switch.toggle-sm.toggle-unpressed .toggle-button{width:16px;height:16px;left:1px}.toggle-switch.toggle-md.toggle-unpressed .toggle-button{width:20px;height:20px;left:1px}.toggle-switch.toggle-unpressed.toggle-hover .toggle-button{background-color:var(--color-white);box-shadow:var(--shadow-sm)}.toggle-switch.toggle-pressed .toggle-button{background-color:var(--color-white)}.toggle-switch.toggle-sm.toggle-pressed .toggle-button{width:16px;height:16px;left:calc(100% - 17px)}.toggle-switch.toggle-md.toggle-pressed .toggle-button{width:20px;height:20px;left:calc(100% - 21px)}.toggle-switch.toggle-pressed.toggle-hover .toggle-button{background-color:var(--color-white)}.toggle-switch.toggle-disabled .toggle-button{background-color:var(--color-neutral-400);box-shadow:none}.toggle-switch.toggle-sm.toggle-unpressed.toggle-disabled .toggle-button{width:16px;height:16px;left:2px;background-color:var(--color-neutral-400)}.toggle-switch.toggle-md.toggle-unpressed.toggle-disabled .toggle-button{width:16px;height:16px;left:4px;background-color:var(--color-neutral-400)}.toggle-switch.toggle-sm.toggle-pressed.toggle-disabled .toggle-button{width:16px;height:16px;left:calc(100% - 17px);background-color:var(--color-neutral-400)}.toggle-switch.toggle-md.toggle-pressed.toggle-disabled .toggle-button{width:20px;height:20px;left:calc(100% - 21px);background-color:var(--color-white)}.toggle-text{display:flex;flex-direction:column;flex:1}.toggle-label{color:var(--color-neutral-700);font-family:var(--font-inter);font-weight:var(--weight-medium);text-align:left;margin:0;line-height:1.5}.toggle-label.toggle-label-sm{font-size:var(--text-sm-size);line-height:var(--text-sm-line)}.toggle-label.toggle-label-md{font-size:var(--text-md-size);line-height:var(--text-md-line)}.toggle-supporting-text{color:var(--color-neutral-600);font-family:var(--font-inter);font-weight:var(--weight-regular);font-size:var(--text-sm-size);line-height:var(--text-sm-line);text-align:left;margin:0;margin-top:var(--spacing-xxs)}@media (prefers-reduced-motion: reduce){.toggle-switch,.toggle-button{transition:none}}@media (prefers-contrast: high){.toggle-switch.toggle-unpressed{border:2px solid currentColor}.toggle-switch.toggle-pressed{border:2px solid currentColor}}.toggle-switch:focus-visible .toggle-button::after{content:'';position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:var(--radius-full);background:currentColor;opacity:0.24;pointer-events:none}";
+
+const BhToggle = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.bhChange = createEvent(this, "bhChange");
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+    }
+    internals;
+    /**
+     * The size of the toggle
+     */
+    size = 'md';
+    /**
+     * Whether to show the label and supporting text
+     */
+    showText = false;
+    /**
+     * The label text
+     */
+    label = '';
+    /**
+     * Supporting text below the label
+     */
+    supportingText = '';
+    /**
+     * Whether the toggle is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the toggle is checked (controlled mode)
+     */
+    checked = false;
+    /**
+     * Name attribute for form submission
+     */
+    name = '';
+    /**
+     * Value when checked (default: 'on')
+     */
+    value = 'on';
+    /**
+     * Whether the toggle is required
+     */
+    required = false;
+    /**
+     * Default checked state for form reset
+     */
+    defaultChecked = false;
+    /**
+     * Internal focus state
+     */
+    isFocused = false;
+    /**
+     * Internal hover state
+     */
+    isHovered = false;
+    /**
+     * Emitted when the toggle state changes
+     */
+    bhChange;
+    componentDidLoad() {
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+    }
+    handleToggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        validateRequired(this.internals, this.required, this.checked);
+        this.bhChange.emit(this.checked);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleToggle();
+        }
+    };
+    handleMouseEnter = () => {
+        this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    render() {
+        const wrapperClasses = {
+            'toggle-wrapper': true,
+            'toggle-with-text': this.showText,
+            [`toggle-size-${this.size}`]: true,
+        };
+        const switchClasses = {
+            'toggle-switch': true,
+            'toggle-pressed': this.checked,
+            'toggle-unpressed': !this.checked,
+            [`toggle-${this.size}`]: true,
+            'toggle-disabled': this.disabled,
+            'toggle-focus': this.isFocused && !this.disabled,
+            'toggle-hover': this.isHovered && !this.disabled,
+        };
+        const buttonClasses = {
+            'toggle-button': true,
+            'toggle-button-pressed': this.checked,
+            'toggle-button-unpressed': !this.checked,
+            [`toggle-button-${this.size}`]: true,
+            'toggle-button-disabled': this.disabled,
+        };
+        const labelClasses = {
+            'toggle-label': true,
+            [`toggle-label-${this.size}`]: true,
+        };
+        return (h("div", { key: 'd07f9c9302c21ab8ecd3e515fe3f1794c2d689b5', class: wrapperClasses, part: "wrapper" }, h("div", { key: 'cfb224564cd11c8dacbf9c2426329acc96b703bd', class: switchClasses, onClick: this.handleToggle, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label || undefined, part: "switch" }, h("div", { key: '3e120ce6b54cca6bf06b49ad78784b8f44c5221a', class: buttonClasses, part: "button" })), this.showText && (this.label || this.supportingText) && (h("div", { key: 'a4feeb01f7188d35f7871e27cebfb65e72ce580d', class: "toggle-text" }, this.label && (h("span", { key: 'dfa097818d779cc768cde6972c0618c26fca10fa', class: labelClasses }, this.label)), this.supportingText && (h("div", { key: '332221a6cee6770d1b4026076a35bb6ff53054b1', class: "toggle-supporting-text" }, this.supportingText))))));
+    }
+    static get formAssociated() { return true; }
+};
+BhToggle.style = bhToggleCss;
+
+export { BhToggle as bh_toggle };
+//# sourceMappingURL=bh-toggle.entry.js.map

package/dist/esm/bh-trend-chart.entry.js

@@ -0,0 +1,119 @@
+import { r as registerInstance, h, H as Host } from './index-DXAL-jSE.js';
+
+const bhTrendChartCss = "@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-block}.trend-chart{position:relative;display:inline-block;width:fit-content;height:fit-content}.chart-svg{overflow:visible}@keyframes chartFadeIn{from{opacity:0;transform:translateY(10px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes backgroundFill{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}.trend-chart-animated{animation:chartFadeIn 0.6s var(--animation-ease-smooth, ease-out) forwards}.trend-chart-animated .chart-line{stroke-dasharray:1000;stroke-dashoffset:1000;animation:pathDraw 1.2s var(--animation-ease-smooth, ease-out) 0.3s forwards}@keyframes pathDraw{to{stroke-dashoffset:0}}.trend-chart-animated .chart-background{transform-origin:bottom;animation:backgroundFill 0.8s var(--animation-ease-smooth, ease-out) 0.3s forwards;opacity:0}.trend-chart-animated.trend-chart-line-only .chart-line{animation:pathDrawSlow 4s var(--animation-ease-smooth, ease-out) 0.3s forwards}@keyframes pathDrawSlow{to{stroke-dashoffset:0}}.trend-chart:not(.trend-chart-animated) .chart-line{stroke-dasharray:none}.trend-chart:not(.trend-chart-animated) .chart-background{opacity:1}@media (prefers-reduced-motion: reduce){.trend-chart-animated,.trend-chart-animated .chart-line,.trend-chart-animated .chart-background{animation:none;opacity:1;transform:none;stroke-dasharray:none}}";
+
+const BhTrendChart = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The trend direction (affects color)
+     */
+    trend = 'positive';
+    /**
+     * Data points for the chart
+     */
+    data = [20, 45, 30, 60, 35, 70, 40];
+    /**
+     * Whether to animate the chart
+     */
+    animated = true;
+    /**
+     * Chart variant: line-only, fill-only, or line-fill
+     */
+    variant = 'line-only';
+    /**
+     * Width of the chart in pixels
+     */
+    width = 112;
+    /**
+     * Height of the chart in pixels
+     */
+    height = 56;
+    normalizeData() {
+        const maxValue = Math.max(...this.data);
+        const minValue = Math.min(...this.data);
+        const range = maxValue - minValue || 1;
+        return this.data.map((value, index) => ({
+            x: (index / (this.data.length - 1)) * this.width,
+            y: this.height - ((value - minValue) / range) * (this.height - 20) - 10,
+        }));
+    }
+    generatePath(points) {
+        if (points.length < 2)
+            return '';
+        let path = `M ${points[0].x} ${points[0].y}`;
+        for (let i = 1; i < points.length; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const tension = 0.5;
+            const cp1x = prev.x + (curr.x - prev.x) * tension;
+            const cp1y = prev.y;
+            const cp2x = curr.x - (curr.x - prev.x) * tension;
+            const cp2y = curr.y;
+            path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
+        }
+        return path;
+    }
+    generateBackgroundPath(points) {
+        if (points.length < 2)
+            return '';
+        let path = `M ${points[0].x} ${this.height}`;
+        path += ` L ${points[0].x} ${points[0].y}`;
+        for (let i = 1; i < points.length; i++) {
+            const prev = points[i - 1];
+            const curr = points[i];
+            const tension = 0.5;
+            const cp1x = prev.x + (curr.x - prev.x) * tension;
+            const cp1y = prev.y;
+            const cp2x = curr.x - (curr.x - prev.x) * tension;
+            const cp2y = curr.y;
+            path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
+        }
+        path += ` L ${points[points.length - 1].x} ${this.height}`;
+        path += ' Z';
+        return path;
+    }
+    getStrokeColor() {
+        switch (this.trend) {
+            case 'positive':
+                return 'var(--color-success-500)';
+            case 'negative':
+                return 'var(--color-error-500)';
+            case 'neutral':
+                return 'var(--color-neutral-500)';
+            default:
+                return 'var(--color-neutral-500)';
+        }
+    }
+    getFillColor() {
+        switch (this.trend) {
+            case 'positive':
+                return 'var(--color-success-600)';
+            case 'negative':
+                return 'var(--color-error-600)';
+            case 'neutral':
+                return 'var(--color-neutral-600)';
+            default:
+                return 'var(--color-neutral-600)';
+        }
+    }
+    render() {
+        const points = this.normalizeData();
+        const pathData = this.generatePath(points);
+        const backgroundPath = this.variant !== 'line-only' ? this.generateBackgroundPath(points) : '';
+        const strokeColor = this.getStrokeColor();
+        const fillColor = this.getFillColor();
+        const gradientId = `gradient-${this.trend}`;
+        return (h(Host, { key: '91f405355ae70923836b9d9e102cbe65421bef39' }, h("div", { key: '9f90f66d9ed904c74e1eb7fd2732ad3d32837eff', class: {
+                'trend-chart': true,
+                [`trend-chart-${this.trend}`]: true,
+                [`trend-chart-${this.variant}`]: true,
+                'trend-chart-animated': this.animated,
+            } }, h("svg", { key: '09ac67cf6b1d2e86f1551cc519963fcd826293b5', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, class: "chart-svg" }, h("defs", { key: 'cf3cfe308c1582c27798e2a2b63dd37a9f9452c8' }, h("linearGradient", { key: '805e2c9765638b0f872871df8444784297b8d7a1', id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, h("stop", { key: '88b695ba07624d062cead0dfea06e984b742bc82', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.4 : 0.2 }), h("stop", { key: 'b8e060f9d822042766647ae602121d2fd7e1fa8d', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.1 : 0.05 }))), backgroundPath && this.variant !== 'line-only' && (h("path", { key: '1866ab67357c0c2fe4c4cda0c0a571a8a0493af4', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== 'fill-only' && (h("path", { key: '687052b87f652430caae40ac126b69cd2f30e9bc', class: "chart-line", d: pathData, stroke: strokeColor, "stroke-width": "2", fill: "none" }))))));
+    }
+};
+BhTrendChart.style = bhTrendChartCss;
+
+export { BhTrendChart as bh_trend_chart };
+//# sourceMappingURL=bh-trend-chart.entry.js.map