@actabldesign/bellhop-core 0.0.3 → 0.0.6

package/dist/components/p-DcXhS_xz.js

@@ -0,0 +1,204 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-DLHC5fHk.js';
+import { d as defineCustomElement$5 } from './p-BsgViq32.js';
+import { d as defineCustomElement$4 } from './p-CHuAmqhM.js';
+import { d as defineCustomElement$3 } from './p-CzM_4nyA.js';
+import { d as defineCustomElement$2 } from './p-BAKX4y5m.js';
+import { d as defineCustomElement$1 } from './p-UG_h-ztP.js';
+
+const bhCheckboxGroupItemCss = ":host{display:block}.checkbox-group-item{display:flex;align-items:flex-start;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);cursor:pointer;transition:all 0.2s ease;box-sizing:border-box;font-family:var(--font-inter);outline:none}.checkbox-group-item-sm{padding:var(--spacing-xl);gap:var(--spacing-md)}.checkbox-group-item-md{padding:var(--spacing-xl) var(--spacing-2xl);gap:var(--spacing-lg)}.checkbox-group-item-icon-simple{gap:var(--spacing-lg)}.checkbox-group-item-active{border-color:var(--color-brand-600);box-shadow:inset 0 0 0 1px var(--color-brand-600);background:var(--color-brand-50)}.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){background:var(--color-neutral-50);border-color:var(--color-neutral-300)}.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active){box-shadow:0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled){box-shadow:inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100)}.checkbox-group-item-disabled{background:var(--color-neutral-100);border-color:var(--color-neutral-200);cursor:not-allowed;opacity:0.6}.item-content{display:flex;flex-direction:column;flex:1;gap:var(--spacing-xs);min-width:0}.item-text-row{display:flex;align-items:center;gap:var(--spacing-sm);flex-wrap:wrap}.item-title{font-size:var(--text-sm-size);font-weight:var(--weight-semibold);line-height:var(--text-sm-line);color:var(--color-neutral-900)}.item-subtitle{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600)}.item-description{font-size:var(--text-sm-size);font-weight:var(--weight-regular);line-height:var(--text-sm-line);color:var(--color-neutral-600);margin:0}.checkbox-group-item-disabled .item-title,.checkbox-group-item-disabled .item-subtitle,.checkbox-group-item-disabled .item-description{color:var(--color-neutral-400)}.checkbox-group-item bh-checkbox,.checkbox-group-item bh-radio-button{pointer-events:none}";
+
+const BhCheckboxGroupItem = /*@__PURE__*/ proxyCustomElement(class BhCheckboxGroupItem extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bhItemChange = createEvent(this, "bhItemChange");
+    }
+    /**
+     * The type of input control
+     */
+    type = 'checkbox';
+    /**
+     * The size variant
+     */
+    size = 'sm';
+    /**
+     * Unique value identifier for this item
+     */
+    value = '';
+    /**
+     * Whether the item is checked (for checkbox type)
+     */
+    checked = false;
+    /**
+     * Whether the item is selected (for radio type)
+     */
+    selected = false;
+    /**
+     * Whether the item is disabled
+     */
+    disabled = false;
+    /**
+     * Material Symbol icon name (for icon-simple type)
+     */
+    icon = '';
+    /**
+     * Title text
+     */
+    itemTitle = '';
+    /**
+     * Subtitle text (inline with title)
+     */
+    subtitle = '';
+    /**
+     * Description text
+     */
+    description = '';
+    /**
+     * Radio group name (for radio type)
+     */
+    name = '';
+    isHovered = false;
+    isFocused = false;
+    /**
+     * Emitted when the item state changes
+     */
+    bhItemChange;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        if (this.type === 'radio' || this.type === 'icon-simple') {
+            if (!this.selected) {
+                this.selected = true;
+                this.bhItemChange.emit({ value: this.value, checked: true });
+            }
+        }
+        else {
+            this.checked = !this.checked;
+            this.bhItemChange.emit({ value: this.value, checked: this.checked });
+        }
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleClick();
+        }
+    };
+    handleMouseEnter = () => {
+        if (!this.disabled)
+            this.isHovered = true;
+    };
+    handleMouseLeave = () => {
+        this.isHovered = false;
+    };
+    handleFocus = () => {
+        if (!this.disabled)
+            this.isFocused = true;
+    };
+    handleBlur = () => {
+        this.isFocused = false;
+    };
+    handleCheckboxChange = (event) => {
+        event.stopPropagation();
+        this.checked = event.detail;
+        this.bhItemChange.emit({ value: this.value, checked: this.checked });
+    };
+    handleRadioChange = (event) => {
+        event.stopPropagation();
+        this.selected = true;
+        this.bhItemChange.emit({ value: this.value, checked: true });
+    };
+    render() {
+        const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;
+        const containerClasses = {
+            'checkbox-group-item': true,
+            [`checkbox-group-item-${this.size}`]: true,
+            [`checkbox-group-item-${this.type}`]: true,
+            'checkbox-group-item-active': isActive,
+            'checkbox-group-item-disabled': this.disabled,
+            'checkbox-group-item-hovered': this.isHovered,
+            'checkbox-group-item-focused': this.isFocused,
+        };
+        const renderInput = () => {
+            if (this.type === 'radio') {
+                return (h("bh-radio-button", { size: this.size, selected: this.selected, disabled: this.disabled, value: this.value, name: this.name, onBhChange: this.handleRadioChange }));
+            }
+            // For icon-simple, use `selected` state; for checkbox, use `checked` state
+            const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;
+            return (h("bh-checkbox", { size: this.size, checked: isChecked, disabled: this.disabled, onBhChange: this.handleCheckboxChange }));
+        };
+        const renderIcon = () => {
+            if (this.type === 'icon-simple' && this.icon) {
+                return (h("bh-featured-icon", { size: "sm", icon: this.icon, color: "gray", iconStyle: "outlined" }));
+            }
+            return null;
+        };
+        const renderContent = () => (h("div", { class: "item-content" }, h("div", { class: "item-text-row" }, this.itemTitle && h("span", { class: "item-title" }, this.itemTitle), this.subtitle && h("span", { class: "item-subtitle" }, this.subtitle)), this.description && h("p", { class: "item-description" }, this.description)));
+        return (h(Host, null, h("div", { class: containerClasses, onClick: this.handleClick, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: this.disabled ? -1 : 0, role: this.type === 'radio' ? 'radio' : 'checkbox', "aria-checked": String(isActive), "aria-disabled": this.disabled ? 'true' : null }, this.type === 'icon-simple' ? (
+        // Icon Simple: icon + content | input
+        [renderIcon(), renderContent(), renderInput()]) : (
+        // Checkbox/Radio: input | content
+        [renderInput(), renderContent()]))));
+    }
+    static get style() { return bhCheckboxGroupItemCss; }
+}, [769, "bh-checkbox-group-item", {
+        "type": [1],
+        "size": [1],
+        "value": [1],
+        "checked": [1028],
+        "selected": [1028],
+        "disabled": [4],
+        "icon": [1],
+        "itemTitle": [1, "item-title"],
+        "subtitle": [1],
+        "description": [1],
+        "name": [1],
+        "isHovered": [32],
+        "isFocused": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-checkbox-group-item", "bh-checkbox", "bh-featured-icon", "bh-label", "bh-radio-button", "bh-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-checkbox-group-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCheckboxGroupItem);
+            }
+            break;
+        case "bh-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bh-featured-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bh-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bh-radio-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bh-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCheckboxGroupItem as B, defineCustomElement as d };
+//# sourceMappingURL=p-DcXhS_xz.js.map
+
+//# sourceMappingURL=p-DcXhS_xz.js.map

package/dist/components/p-DcXhS_xz.js.map

@@ -0,0 +1 @@
+{"file":"p-DcXhS_xz.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-checkbox-group-item/bh-checkbox-group-item.css?tag=bh-checkbox-group-item&encapsulation=shadow","src/components/bh-checkbox-group-item/bh-checkbox-group-item.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.checkbox-group-item {\n  display: flex;\n  align-items: flex-start;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-xl);\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-sizing: border-box;\n  font-family: var(--font-inter);\n  outline: none;\n}\n\n/* Size variants */\n.checkbox-group-item-sm {\n  padding: var(--spacing-xl);\n  gap: var(--spacing-md);\n}\n\n.checkbox-group-item-md {\n  padding: var(--spacing-xl) var(--spacing-2xl);\n  gap: var(--spacing-lg);\n}\n\n/* Icon simple type has more gap */\n.checkbox-group-item-icon-simple {\n  gap: var(--spacing-lg);\n}\n\n/* Active/Selected state */\n.checkbox-group-item-active {\n  border-color: var(--color-brand-600);\n  box-shadow: inset 0 0 0 1px var(--color-brand-600);\n  background: var(--color-brand-50);\n}\n\n/* Hover state */\n.checkbox-group-item-hovered:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n  background: var(--color-neutral-50);\n  border-color: var(--color-neutral-300);\n}\n\n/* Focus state */\n.checkbox-group-item-focused:not(.checkbox-group-item-disabled):not(.checkbox-group-item-active) {\n  box-shadow: 0px 0px 0px 4px var(--color-brand-100);\n}\n\n.checkbox-group-item-focused.checkbox-group-item-active:not(.checkbox-group-item-disabled) {\n  box-shadow: inset 0 0 0 1px var(--color-brand-600),\n    0px 0px 0px 4px var(--color-brand-100);\n}\n\n/* Disabled state */\n.checkbox-group-item-disabled {\n  background: var(--color-neutral-100);\n  border-color: var(--color-neutral-200);\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Content container */\n.item-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  gap: var(--spacing-xs);\n  min-width: 0;\n}\n\n/* Title row with title and subtitle */\n.item-text-row {\n  display: flex;\n  align-items: center;\n  gap: var(--spacing-sm);\n  flex-wrap: wrap;\n}\n\n/* Title */\n.item-title {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-semibold);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-900);\n}\n\n/* Subtitle (inline with title) */\n.item-subtitle {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n}\n\n/* Description */\n.item-description {\n  font-size: var(--text-sm-size);\n  font-weight: var(--weight-regular);\n  line-height: var(--text-sm-line);\n  color: var(--color-neutral-600);\n  margin: 0;\n}\n\n/* Disabled text styles */\n.checkbox-group-item-disabled .item-title,\n.checkbox-group-item-disabled .item-subtitle,\n.checkbox-group-item-disabled .item-description {\n  color: var(--color-neutral-400);\n}\n\n/* Prevent inner checkbox/radio from capturing clicks - let the card handle it */\n.checkbox-group-item bh-checkbox,\n.checkbox-group-item bh-radio-button {\n  pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Host } from '@stencil/core';\n\nexport type CheckboxGroupItemType = 'checkbox' | 'radio' | 'icon-simple';\nexport type CheckboxGroupItemSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-checkbox-group-item',\n  styleUrl: 'bh-checkbox-group-item.css',\n  shadow: true,\n})\nexport class BhCheckboxGroupItem {\n  /**\n   * The type of input control\n   */\n  @Prop() type: CheckboxGroupItemType = 'checkbox';\n\n  /**\n   * The size variant\n   */\n  @Prop() size: CheckboxGroupItemSize = 'sm';\n\n  /**\n   * Unique value identifier for this item\n   */\n  @Prop() value: string = '';\n\n  /**\n   * Whether the item is checked (for checkbox type)\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Whether the item is selected (for radio type)\n   */\n  @Prop({ mutable: true }) selected: boolean = false;\n\n  /**\n   * Whether the item is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Material Symbol icon name (for icon-simple type)\n   */\n  @Prop() icon: string = '';\n\n\n  /**\n   * Title text\n   */\n  @Prop() itemTitle: string = '';\n\n  /**\n   * Subtitle text (inline with title)\n   */\n  @Prop() subtitle: string = '';\n\n  /**\n   * Description text\n   */\n  @Prop() description: string = '';\n\n  /**\n   * Radio group name (for radio type)\n   */\n  @Prop() name: string = '';\n\n  @State() isHovered: boolean = false;\n  @State() isFocused: boolean = false;\n\n  /**\n   * Emitted when the item state changes\n   */\n  @Event() bhItemChange!: EventEmitter<{ value: string; checked: boolean }>;\n\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    if (this.type === 'radio' || this.type === 'icon-simple') {\n      if (!this.selected) {\n        this.selected = true;\n        this.bhItemChange.emit({ value: this.value, checked: true });\n      }\n    } else {\n      this.checked = !this.checked;\n      this.bhItemChange.emit({ value: this.value, checked: this.checked });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleClick();\n    }\n  };\n\n  private handleMouseEnter = () => {\n    if (!this.disabled) this.isHovered = true;\n  };\n\n  private handleMouseLeave = () => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = () => {\n    if (!this.disabled) this.isFocused = true;\n  };\n\n  private handleBlur = () => {\n    this.isFocused = false;\n  };\n\n  private handleCheckboxChange = (event: CustomEvent<boolean>) => {\n    event.stopPropagation();\n    this.checked = event.detail;\n    this.bhItemChange.emit({ value: this.value, checked: this.checked });\n  };\n\n  private handleRadioChange = (event: CustomEvent<string>) => {\n    event.stopPropagation();\n    this.selected = true;\n    this.bhItemChange.emit({ value: this.value, checked: true });\n  };\n\n  render() {\n    const isActive = (this.type === 'radio' || this.type === 'icon-simple') ? this.selected : this.checked;\n\n    const containerClasses = {\n      'checkbox-group-item': true,\n      [`checkbox-group-item-${this.size}`]: true,\n      [`checkbox-group-item-${this.type}`]: true,\n      'checkbox-group-item-active': isActive,\n      'checkbox-group-item-disabled': this.disabled,\n      'checkbox-group-item-hovered': this.isHovered,\n      'checkbox-group-item-focused': this.isFocused,\n    };\n\n    const renderInput = () => {\n      if (this.type === 'radio') {\n        return (\n          <bh-radio-button\n            size={this.size}\n            selected={this.selected}\n            disabled={this.disabled}\n            value={this.value}\n            name={this.name}\n            onBhChange={this.handleRadioChange}\n          />\n        );\n      }\n      // For icon-simple, use `selected` state; for checkbox, use `checked` state\n      const isChecked = this.type === 'icon-simple' ? this.selected : this.checked;\n      return (\n        <bh-checkbox\n          size={this.size}\n          checked={isChecked}\n          disabled={this.disabled}\n          onBhChange={this.handleCheckboxChange}\n        />\n      );\n    };\n\n    const renderIcon = () => {\n      if (this.type === 'icon-simple' && this.icon) {\n        return (\n          <bh-featured-icon\n            size=\"sm\"\n            icon={this.icon}\n            color=\"gray\"\n            iconStyle=\"outlined\"\n          />\n        );\n      }\n      return null;\n    };\n\n    const renderContent = () => (\n      <div class=\"item-content\">\n        <div class=\"item-text-row\">\n          {this.itemTitle && <span class=\"item-title\">{this.itemTitle}</span>}\n          {this.subtitle && <span class=\"item-subtitle\">{this.subtitle}</span>}\n        </div>\n        {this.description && <p class=\"item-description\">{this.description}</p>}\n      </div>\n    );\n\n    return (\n      <Host>\n        <div\n          class={containerClasses}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeyDown}\n          onMouseEnter={this.handleMouseEnter}\n          onMouseLeave={this.handleMouseLeave}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          tabIndex={this.disabled ? -1 : 0}\n          role={this.type === 'radio' ? 'radio' : 'checkbox'}\n          aria-checked={String(isActive)}\n          aria-disabled={this.disabled ? 'true' : null}\n        >\n          {this.type === 'icon-simple' ? (\n            // Icon Simple: icon + content | input\n            [renderIcon(), renderContent(), renderInput()]\n          ) : (\n            // Checkbox/Radio: input | content\n            [renderInput(), renderContent()]\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/p-DgAfq9r9.js

@@ -0,0 +1,56 @@
+import { p as proxyCustomElement, H, h } from './p-DLHC5fHk.js';
+
+const bhSkeletonLoaderCss = ":host{display:inline-block}.skeleton{display:inline-block;background:linear-gradient(\n    90deg,\n    rgba(0, 0, 0, 0.06) 25%,\n    rgba(0, 0, 0, 0.03) 50%,\n    rgba(0, 0, 0, 0.06) 75%\n  );background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-sm);line-height:1}.skeleton-circle{border-radius:50%}.skeleton::before{content:'\\00a0'}@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}";
+
+const BhSkeletonLoader = /*@__PURE__*/ proxyCustomElement(class BhSkeletonLoader extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * 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...")));
+    }
+    static get style() { return bhSkeletonLoaderCss; }
+}, [769, "bh-skeleton-loader", {
+        "width": [1],
+        "height": [1],
+        "circle": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-skeleton-loader"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-skeleton-loader":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhSkeletonLoader);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhSkeletonLoader as B, defineCustomElement as d };
+//# sourceMappingURL=p-DgAfq9r9.js.map
+
+//# sourceMappingURL=p-DgAfq9r9.js.map

package/dist/components/p-DgAfq9r9.js.map

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

package/dist/components/p-DjsErN85.js

@@ -0,0 +1,72 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DLHC5fHk.js';
+
+const bhCardCss = ":host{display:block}.card{display:flex;flex-direction:column;background:var(--color-white);border:1px solid var(--color-neutral-200);border-radius:var(--radius-xl);overflow:hidden;font-family:var(--font-inter)}.card-header-slot{display:contents}.card-content{display:flex;flex-direction:column;flex:1 0 auto;padding:var(--spacing-lg) var(--spacing-xl);gap:var(--spacing-none)}.card-footer-slot{display:contents}.card-content-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:var(--spacing-md);padding:var(--spacing-xl);background:var(--color-purple-50, #f5f3ff);border:1px dashed var(--color-purple-500, #7c3aed);border-radius:var(--radius-xl);min-height:100%}.card-placeholder-icon{font-size:32px;color:var(--color-purple-500, #7c3aed)}.card-placeholder-text{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-purple-700, #6d28d9);text-decoration:underline;text-align:center}";
+
+const BhCard = /*@__PURE__*/ proxyCustomElement(class BhCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /**
+     * Whether to show the header section
+     */
+    showHeader = true;
+    /**
+     * Whether to show the footer section
+     */
+    showFooter = true;
+    /**
+     * Minimum height of the content area in pixels
+     */
+    contentMinHeight = 200;
+    /**
+     * Placeholder text shown when no content is provided
+     */
+    placeholderText = 'Card content slot';
+    hasContent = false;
+    componentWillLoad() {
+        this.checkForContent();
+    }
+    checkForContent() {
+        const children = Array.from(this.el.childNodes).filter((node) => (node.nodeType === Node.ELEMENT_NODE &&
+            !node.hasAttribute('slot')) ||
+            (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()));
+        this.hasContent = children.length > 0;
+    }
+    render() {
+        const contentStyle = {
+            minHeight: `${this.contentMinHeight}px`,
+        };
+        return (h(Host, { key: '2f01aa3ee4b9cdeb1d5f0f16a961af880e11d0fb' }, h("div", { key: '4f4542a1f24dc9db216fef1e361efff54cb5f538', class: "card" }, this.showHeader && (h("div", { key: 'c290615fb8b36c965ac6a032963f2b4e78c22a29', class: "card-header-slot" }, h("slot", { key: '35d78f934a0a8486a62ff17897537cc0afd355a7', name: "header" }))), h("div", { key: 'bfd8a8827ea13baad0862ed5d962853ceed4be4e', class: "card-content", style: contentStyle }, h("slot", { key: 'b43aad6dfb675e4fd32f9614ba83f67aac264aa0' }), !this.hasContent && (h("div", { key: 'a9cf30bb2b1a9a0ab4baf6fa9d8514181f1e79c5', class: "card-content-placeholder" }, h("span", { key: '7d46bf5c2246cd8d9bd2d73695d9b55a1ba6112c', class: "card-placeholder-text" }, this.placeholderText)))), this.showFooter && (h("div", { key: '5588ba1dcc017c899909917f31961414dc4ffd9e', class: "card-footer-slot" }, h("slot", { key: 'ff28528d0090a67061fc7cd63f7df68662d908a8', name: "footer" }))))));
+    }
+    static get style() { return bhCardCss; }
+}, [769, "bh-card", {
+        "showHeader": [4, "show-header"],
+        "showFooter": [4, "show-footer"],
+        "contentMinHeight": [2, "content-min-height"],
+        "placeholderText": [1, "placeholder-text"],
+        "hasContent": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bh-card"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bh-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BhCard);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BhCard as B, defineCustomElement as d };
+//# sourceMappingURL=p-DjsErN85.js.map
+
+//# sourceMappingURL=p-DjsErN85.js.map

package/dist/components/p-DjsErN85.js.map

@@ -0,0 +1 @@
+{"file":"p-DjsErN85.js","mappings":";;AAAA,MAAM,SAAS,GAAG,m8BAAm8B;;MCOx8B,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGjB;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,UAAU,GAAY,IAAI;AAElC;;AAEG;IACK,gBAAgB,GAAW,GAAG;AAEtC;;AAEG;IACK,eAAe,GAAW,mBAAmB;IAE5C,UAAU,GAAY,KAAK;IAEpC,iBAAiB,GAAA;QACf,IAAI,CAAC,eAAe,EAAE;;IAGhB,eAAe,GAAA;QACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,MAAM,CACpD,CAAC,IAAI,KACH,CAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY;AAClC,YAAA,CAAE,IAAgB,CAAC,YAAY,CAAC,MAAM,CAAC;AACzC,aAAC,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC,CACjE;QACD,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;;IAGvC,MAAM,GAAA;AACJ,QAAA,MAAM,YAAY,GAAG;AACnB,YAAA,SAAS,EAAE,CAAA,EAAG,IAAI,CAAC,gBAAgB,CAAI,EAAA,CAAA;SACxC;AAED,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,MAAM,EAAA,EACd,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,KAAK,EAAE,YAAY,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACP,CAAC,IAAI,CAAC,UAAU,KACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0BAA0B,EAAA,EACnC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,eAAe,CAAQ,CAC7D,CACP,CACG,EACL,IAAI,CAAC,UAAU,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,EAAA,EAC3B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,CACG,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/bh-card/bh-card.css?tag=bh-card&encapsulation=shadow","src/components/bh-card/bh-card.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  background: var(--color-white);\n  border: 1px solid var(--color-neutral-200);\n  border-radius: var(--radius-xl);\n  overflow: hidden;\n  font-family: var(--font-inter);\n}\n\n.card-header-slot {\n  display: contents;\n}\n\n.card-content {\n  display: flex;\n  flex-direction: column;\n  flex: 1 0 auto;\n  padding: var(--spacing-lg) var(--spacing-xl);\n  gap: var(--spacing-none);\n}\n\n.card-footer-slot {\n  display: contents;\n}\n\n/* Placeholder styles */\n.card-content-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n  gap: var(--spacing-md);\n  padding: var(--spacing-xl);\n  background: var(--color-purple-50, #f5f3ff);\n  border: 1px dashed var(--color-purple-500, #7c3aed);\n  border-radius: var(--radius-xl);\n  min-height: 100%;\n}\n\n.card-placeholder-icon {\n  font-size: 32px;\n  color: var(--color-purple-500, #7c3aed);\n}\n\n.card-placeholder-text {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  color: var(--color-purple-700, #6d28d9);\n  text-decoration: underline;\n  text-align: center;\n}\n","import { Component, Prop, State, Element, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'bh-card',\n  styleUrl: 'bh-card.css',\n  shadow: true,\n})\nexport class BhCard {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Whether to show the header section\n   */\n  @Prop() showHeader: boolean = true;\n\n  /**\n   * Whether to show the footer section\n   */\n  @Prop() showFooter: boolean = true;\n\n  /**\n   * Minimum height of the content area in pixels\n   */\n  @Prop() contentMinHeight: number = 200;\n\n  /**\n   * Placeholder text shown when no content is provided\n   */\n  @Prop() placeholderText: string = 'Card content slot';\n\n  @State() hasContent: boolean = false;\n\n  componentWillLoad() {\n    this.checkForContent();\n  }\n\n  private checkForContent() {\n    const children = Array.from(this.el.childNodes).filter(\n      (node) =>\n        (node.nodeType === Node.ELEMENT_NODE &&\n          !(node as Element).hasAttribute('slot')) ||\n        (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())\n    );\n    this.hasContent = children.length > 0;\n  }\n\n  render() {\n    const contentStyle = {\n      minHeight: `${this.contentMinHeight}px`,\n    };\n\n    return (\n      <Host>\n        <div class=\"card\">\n          {this.showHeader && (\n            <div class=\"card-header-slot\">\n              <slot name=\"header\" />\n            </div>\n          )}\n          <div class=\"card-content\" style={contentStyle}>\n            <slot />\n            {!this.hasContent && (\n              <div class=\"card-content-placeholder\">\n                <span class=\"card-placeholder-text\">{this.placeholderText}</span>\n              </div>\n            )}\n          </div>\n          {this.showFooter && (\n            <div class=\"card-footer-slot\">\n              <slot name=\"footer\" />\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}