@actabldesign/bellhop-core 0.0.3

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

@@ -0,0 +1,141 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.js');
+var form = require('./form-9mbajZ3y.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) {
+        index.registerInstance(this, hostRef);
+        this.bhChange = index.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() {
+        form.syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        form.validateRequired(this.internals, this.required, this.checked);
+    }
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+        form.syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        form.validateRequired(this.internals, this.required, this.checked);
+    }
+    handleToggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        form.syncCheckableFormValue(this.internals, this.name, this.checked, this.value);
+        form.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 (index.h("div", { key: '59ea31ccba3b8a5d19d991728abfa832af696c22', class: wrapperClasses, part: "wrapper" }, index.h("div", { key: '6a379c430ad0132a7bea6d72e8eaf48eb3444a7e', 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" }, index.h("div", { key: '3e9914d0096f303fd19aa44881f8463b5846b1ed', class: buttonClasses, part: "button" })), this.showText && (this.label || this.supportingText) && (index.h("div", { key: '9e46745a9ed60dc29c4da37e503576b40ece91c6', class: "toggle-text" }, this.label && (index.h("span", { key: 'f53a5c4d6fe6a3c2904fd05bc54603128995099c', class: labelClasses }, this.label)), this.supportingText && (index.h("div", { key: '1e4d3e0d5ccdb230306e74692309ae837b0d5ec4', class: "toggle-supporting-text" }, this.supportingText))))));
+    }
+    static get formAssociated() { return true; }
+};
+BhToggle.style = bhToggleCss;
+
+exports.bh_toggle = BhToggle;
+//# sourceMappingURL=bh-toggle.entry.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bh-toggle.entry.cjs.js","sources":["src/components/bh-toggle/bh-toggle.css?tag=bh-toggle&encapsulation=shadow","src/components/bh-toggle/bh-toggle.tsx"],"sourcesContent":["/* ==========================================================================\n   BH-TOGGLE COMPONENT STYLES - Material You Design\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n}\n\n/* Toggle Wrapper */\n.toggle-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 0;\n}\n\n.toggle-with-text.toggle-size-sm {\n  gap: var(--spacing-md);\n}\n\n.toggle-with-text.toggle-size-md {\n  gap: var(--spacing-lg);\n}\n\n/* Toggle Switch Base */\n.toggle-switch {\n  position: relative;\n  display: inline-block;\n  border-radius: var(--radius-full);\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n  outline: none;\n  border: 1px solid transparent;\n  background: transparent;\n  overflow: visible;\n  padding: 0;\n}\n\n.toggle-switch:focus {\n  outline: none;\n}\n\n.toggle-switch.toggle-disabled {\n  cursor: not-allowed;\n  opacity: 0.38;\n}\n\n/* Toggle Switch Sizes */\n.toggle-switch.toggle-sm {\n  width: 36px;\n  height: 20px;\n}\n\n.toggle-switch.toggle-md {\n  width: 40px;\n  height: 24px;\n}\n\n/* Toggle Switch States - Unpressed (False) */\n.toggle-switch.toggle-unpressed {\n  background-color: var(--color-neutral-300);\n  border-color: transparent;\n}\n\n.toggle-switch.toggle-unpressed.toggle-hover {\n  background-color: var(--color-neutral-400);\n  border-color: transparent;\n}\n\n.toggle-switch.toggle-unpressed.toggle-focus {\n  background-color: var(--color-neutral-200);\n  border-color: transparent;\n}\n\n/* Focus ring for unpressed state */\n.toggle-switch.toggle-unpressed.toggle-focus .toggle-button::after {\n  content: '';\n  position: absolute;\n  top: -6px;\n  left: -6px;\n  right: -6px;\n  bottom: -6px;\n  border-radius: var(--radius-full);\n  background: var(--color-neutral-600);\n  opacity: 0.12;\n  pointer-events: none;\n}\n\n.toggle-switch.toggle-unpressed.toggle-disabled {\n  background-color: var(--color-neutral-100);\n  border-color: transparent;\n}\n\n/* Toggle Switch States - Pressed (True) */\n.toggle-switch.toggle-pressed {\n  background-color: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n}\n\n.toggle-switch.toggle-pressed.toggle-hover {\n  background-color: var(--color-brand-700);\n  border-color: var(--color-brand-700);\n}\n\n.toggle-switch.toggle-pressed.toggle-focus {\n  background-color: var(--color-brand-600);\n  border-color: var(--color-brand-600);\n}\n\n/* Focus ring for pressed state */\n.toggle-switch.toggle-pressed.toggle-focus .toggle-button::after {\n  content: '';\n  position: absolute;\n  top: -6px;\n  left: -6px;\n  right: -6px;\n  bottom: -6px;\n  border-radius: var(--radius-full);\n  background: var(--color-brand-100);\n  opacity: 0.24;\n  pointer-events: none;\n}\n\n.toggle-switch.toggle-pressed.toggle-disabled {\n  background-color: var(--color-neutral-200);\n  border-color: var(--color-neutral-200);\n}\n\n.toggle-switch.toggle-pressed.toggle-disabled .toggle-button {\n  background-color: var(--color-neutral-100);\n}\n\n/* Toggle Button (Handle) */\n.toggle-button {\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  border-radius: var(--radius-full);\n  background-color: var(--color-neutral-600);\n  transition: all 0.2s ease;\n}\n\n/* Toggle Button States - Unpressed */\n.toggle-switch.toggle-unpressed .toggle-button {\n  background-color: var(--color-white);\n}\n\n.toggle-switch.toggle-sm.toggle-unpressed .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: 1px;\n}\n\n.toggle-switch.toggle-md.toggle-unpressed .toggle-button {\n  width: 20px;\n  height: 20px;\n  left: 1px;\n}\n\n.toggle-switch.toggle-unpressed.toggle-hover .toggle-button {\n  background-color: var(--color-white);\n  box-shadow: var(--shadow-sm);\n}\n\n/* Toggle Button States - Pressed */\n.toggle-switch.toggle-pressed .toggle-button {\n  background-color: var(--color-white);\n}\n\n.toggle-switch.toggle-sm.toggle-pressed .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: calc(100% - 17px);\n}\n\n.toggle-switch.toggle-md.toggle-pressed .toggle-button {\n  width: 20px;\n  height: 20px; \n  left: calc(100% - 21px);\n}\n\n.toggle-switch.toggle-pressed.toggle-hover .toggle-button {\n  background-color: var(--color-white);\n}\n\n/* Toggle Button Disabled State */\n.toggle-switch.toggle-disabled .toggle-button {\n  background-color: var(--color-neutral-400);\n  box-shadow: none;\n}\n\n.toggle-switch.toggle-sm.toggle-unpressed.toggle-disabled .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: 2px;\n  background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-md.toggle-unpressed.toggle-disabled .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: 4px;\n  background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-sm.toggle-pressed.toggle-disabled .toggle-button {\n  width: 16px;\n  height: 16px;\n  left: calc(100% - 17px);\n  background-color: var(--color-neutral-400);\n}\n\n.toggle-switch.toggle-md.toggle-pressed.toggle-disabled .toggle-button {\n  width: 20px;\n  height: 20px;\n  left: calc(100% - 21px);\n  background-color: var(--color-white);\n}\n\n/* Toggle Text Container */\n.toggle-text {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n/* Toggle Label */\n.toggle-label {\n  color: var(--color-neutral-700);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-medium);\n  text-align: left;\n  margin: 0;\n  line-height: 1.5;\n}\n\n.toggle-label.toggle-label-sm {\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n}\n\n.toggle-label.toggle-label-md {\n  font-size: var(--text-md-size);\n  line-height: var(--text-md-line);\n}\n\n/* Toggle Supporting Text */\n.toggle-supporting-text {\n  color: var(--color-neutral-600);\n  font-family: var(--font-inter);\n  font-weight: var(--weight-regular);\n  font-size: var(--text-sm-size);\n  line-height: var(--text-sm-line);\n  text-align: left;\n  margin: 0;\n  margin-top: var(--spacing-xxs);\n}\n\n/* ==========================================================================\n   ACCESSIBILITY\n   ========================================================================== */\n\n@media (prefers-reduced-motion: reduce) {\n  .toggle-switch,\n  .toggle-button {\n    transition: none;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .toggle-switch.toggle-unpressed {\n    border: 2px solid currentColor;\n  }\n\n  .toggle-switch.toggle-pressed {\n    border: 2px solid currentColor;\n  }\n}\n\n.toggle-switch:focus-visible .toggle-button::after {\n  content: '';\n  position: absolute;\n  top: -6px;\n  left: -6px;\n  right: -6px;\n  bottom: -6px;\n  border-radius: var(--radius-full);\n  background: currentColor;\n  opacity: 0.24;\n  pointer-events: none;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, AttachInternals } from '@stencil/core';\nimport { syncCheckableFormValue, validateRequired } from '../../utils/form';\n\nexport type ToggleSize = 'sm' | 'md';\n\n@Component({\n  tag: 'bh-toggle',\n  styleUrl: 'bh-toggle.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class BhToggle {\n  @AttachInternals() internals!: ElementInternals;\n  /**\n   * The size of the toggle\n   */\n  @Prop() size: ToggleSize = 'md';\n\n  /**\n   * Whether to show the label and supporting text\n   */\n  @Prop() showText: boolean = false;\n\n  /**\n   * The label text\n   */\n  @Prop() label: string = '';\n\n  /**\n   * Supporting text below the label\n   */\n  @Prop() supportingText: string = '';\n\n  /**\n   * Whether the toggle is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the toggle is checked (controlled mode)\n   */\n  @Prop({ mutable: true }) checked: boolean = false;\n\n  /**\n   * Name attribute for form submission\n   */\n  @Prop() name: string = '';\n\n  /**\n   * Value when checked (default: 'on')\n   */\n  @Prop() value: string = 'on';\n\n  /**\n   * Whether the toggle is required\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Default checked state for form reset\n   */\n  @Prop() defaultChecked: boolean = false;\n\n  /**\n   * Internal focus state\n   */\n  @State() isFocused: boolean = false;\n\n  /**\n   * Internal hover state\n   */\n  @State() isHovered: boolean = false;\n\n  /**\n   * Emitted when the toggle state changes\n   */\n  @Event() bhChange!: EventEmitter<boolean>;\n\n  componentDidLoad() {\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n  }\n\n  formResetCallback() {\n    this.checked = this.defaultChecked;\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n  }\n\n  private handleToggle = (): void => {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    syncCheckableFormValue(this.internals, this.name, this.checked, this.value);\n    validateRequired(this.internals, this.required, this.checked);\n    this.bhChange.emit(this.checked);\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === ' ' || event.key === 'Enter') {\n      event.preventDefault();\n      this.handleToggle();\n    }\n  };\n\n  private handleMouseEnter = (): void => {\n    this.isHovered = true;\n  };\n\n  private handleMouseLeave = (): void => {\n    this.isHovered = false;\n  };\n\n  private handleFocus = (): void => {\n    this.isFocused = true;\n  };\n\n  private handleBlur = (): void => {\n    this.isFocused = false;\n  };\n\n  render() {\n    const wrapperClasses = {\n      'toggle-wrapper': true,\n      'toggle-with-text': this.showText,\n      [`toggle-size-${this.size}`]: true,\n    };\n\n    const switchClasses = {\n      'toggle-switch': true,\n      'toggle-pressed': this.checked,\n      'toggle-unpressed': !this.checked,\n      [`toggle-${this.size}`]: true,\n      'toggle-disabled': this.disabled,\n      'toggle-focus': this.isFocused && !this.disabled,\n      'toggle-hover': this.isHovered && !this.disabled,\n    };\n\n    const buttonClasses = {\n      'toggle-button': true,\n      'toggle-button-pressed': this.checked,\n      'toggle-button-unpressed': !this.checked,\n      [`toggle-button-${this.size}`]: true,\n      'toggle-button-disabled': this.disabled,\n    };\n\n    const labelClasses = {\n      'toggle-label': true,\n      [`toggle-label-${this.size}`]: true,\n    };\n\n    return (\n      <div class={wrapperClasses} part=\"wrapper\">\n        <div\n          class={switchClasses}\n          onClick={this.handleToggle}\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=\"switch\"\n          aria-checked={this.checked ? 'true' : 'false'}\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-label={this.label || undefined}\n          part=\"switch\"\n        >\n          <div class={buttonClasses} part=\"button\"></div>\n        </div>\n\n        {this.showText && (this.label || this.supportingText) && (\n          <div class=\"toggle-text\">\n            {this.label && (\n              <span class={labelClasses}>{this.label}</span>\n            )}\n            {this.supportingText && (\n              <div class=\"toggle-supporting-text\">{this.supportingText}</div>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"],"names":["syncCheckableFormValue","validateRequired","h"],"mappings":"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"}

package/cjs/bh-trend-chart.cjs.entry.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var index = require('./index-tZqSQc8E.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) {
+        index.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 (index.h(index.Host, { key: '0ce9235d0b67696eb5e5eb13bdfc80633e2f5a09' }, index.h("div", { key: 'f8142d9b08c84c330afc375c7dd870be7d561116', class: {
+                'trend-chart': true,
+                [`trend-chart-${this.trend}`]: true,
+                [`trend-chart-${this.variant}`]: true,
+                'trend-chart-animated': this.animated,
+            } }, index.h("svg", { key: '80ecc5b120ab8adeea6ad0f66c82d43bff7510ae', width: this.width, height: this.height, viewBox: `0 0 ${this.width} ${this.height}`, class: "chart-svg" }, index.h("defs", { key: 'e662d21fc9813679530c7ae4c533bcf79985fc32' }, index.h("linearGradient", { key: '4c5f68791672c1cc639db2fe1eff407ecdbc3019', id: gradientId, x1: "0%", y1: "0%", x2: "0%", y2: "100%" }, index.h("stop", { key: '15f6c5706518d1adf8e84f3c9736d9f37d1b0c3e', offset: "0%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.4 : 0.2 }), index.h("stop", { key: '9b90e1919b241be8a5d6a160ce250cb205967d49', offset: "100%", "stop-color": fillColor, "stop-opacity": this.variant === 'fill-only' ? 0.1 : 0.05 }))), backgroundPath && this.variant !== 'line-only' && (index.h("path", { key: 'c27880c30f92abb5240c401b35e1af3b62039318', class: "chart-background", d: backgroundPath, fill: `url(#${gradientId})` })), pathData && this.variant !== 'fill-only' && (index.h("path", { key: '2f64a03e170a7a1f792fe835d2a870dd64905fd9', class: "chart-line", d: pathData, stroke: strokeColor, "stroke-width": "2", fill: "none" }))))));
+    }
+};
+BhTrendChart.style = bhTrendChartCss;
+
+exports.bh_trend_chart = BhTrendChart;
+//# sourceMappingURL=bh-trend-chart.entry.cjs.js.map

package/cjs/bh-trend-chart.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bh-trend-chart.entry.cjs.js","sources":["src/components/bh-trend-chart/bh-trend-chart.css?tag=bh-trend-chart&encapsulation=shadow","src/components/bh-trend-chart/bh-trend-chart.tsx"],"sourcesContent":["@import '../../global/global.css';\n\n:host {\n  display: inline-block;\n}\n\n.trend-chart {\n  position: relative;\n  display: inline-block;\n  width: fit-content;\n  height: fit-content;\n}\n\n/* Chart SVG container */\n.chart-svg {\n  overflow: visible;\n}\n\n/* Smooth Airbnb-style reveal animations */\n@keyframes chartFadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px) scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0) scale(1);\n  }\n}\n\n@keyframes backgroundFill {\n  from {\n    opacity: 0;\n    transform: scaleY(0);\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n\n/* Animation timing */\n.trend-chart-animated {\n  animation: chartFadeIn 0.6s var(--animation-ease-smooth, ease-out) forwards;\n}\n\n.trend-chart-animated .chart-line {\n  stroke-dasharray: 1000;\n  stroke-dashoffset: 1000;\n  animation: pathDraw 1.2s var(--animation-ease-smooth, ease-out) 0.3s forwards;\n}\n\n@keyframes pathDraw {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n.trend-chart-animated .chart-background {\n  transform-origin: bottom;\n  animation: backgroundFill 0.8s var(--animation-ease-smooth, ease-out) 0.3s forwards;\n  opacity: 0;\n}\n\n/* Line-only variant - slower animation */\n.trend-chart-animated.trend-chart-line-only .chart-line {\n  animation: pathDrawSlow 4s var(--animation-ease-smooth, ease-out) 0.3s forwards;\n}\n\n@keyframes pathDrawSlow {\n  to {\n    stroke-dashoffset: 0;\n  }\n}\n\n/* Static styles for non-animated */\n.trend-chart:not(.trend-chart-animated) .chart-line {\n  stroke-dasharray: none;\n}\n\n.trend-chart:not(.trend-chart-animated) .chart-background {\n  opacity: 1;\n}\n\n/* Responsive behavior */\n@media (prefers-reduced-motion: reduce) {\n  .trend-chart-animated,\n  .trend-chart-animated .chart-line,\n  .trend-chart-animated .chart-background {\n    animation: none;\n    opacity: 1;\n    transform: none;\n    stroke-dasharray: none;\n  }\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\nexport type TrendDirection = 'positive' | 'negative' | 'neutral';\nexport type TrendVariant = 'line-only' | 'fill-only' | 'line-fill';\n\n@Component({\n  tag: 'bh-trend-chart',\n  styleUrl: 'bh-trend-chart.css',\n  shadow: true,\n})\nexport class BhTrendChart {\n  /**\n   * The trend direction (affects color)\n   */\n  @Prop() trend: TrendDirection = 'positive';\n\n  /**\n   * Data points for the chart\n   */\n  @Prop() data: number[] = [20, 45, 30, 60, 35, 70, 40];\n\n  /**\n   * Whether to animate the chart\n   */\n  @Prop() animated: boolean = true;\n\n  /**\n   * Chart variant: line-only, fill-only, or line-fill\n   */\n  @Prop() variant: TrendVariant = 'line-only';\n\n  /**\n   * Width of the chart in pixels\n   */\n  @Prop() width: number = 112;\n\n  /**\n   * Height of the chart in pixels\n   */\n  @Prop() height: number = 56;\n\n  private normalizeData(): Array<{ x: number; y: number }> {\n    const maxValue = Math.max(...this.data);\n    const minValue = Math.min(...this.data);\n    const range = maxValue - minValue || 1;\n\n    return this.data.map((value, index) => ({\n      x: (index / (this.data.length - 1)) * this.width,\n      y: this.height - ((value - minValue) / range) * (this.height - 20) - 10,\n    }));\n  }\n\n  private generatePath(points: Array<{ x: number; y: number }>): string {\n    if (points.length < 2) return '';\n\n    let path = `M ${points[0].x} ${points[0].y}`;\n\n    for (let i = 1; i < points.length; i++) {\n      const prev = points[i - 1];\n      const curr = points[i];\n      const tension = 0.5;\n\n      const cp1x = prev.x + (curr.x - prev.x) * tension;\n      const cp1y = prev.y;\n      const cp2x = curr.x - (curr.x - prev.x) * tension;\n      const cp2y = curr.y;\n\n      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;\n    }\n\n    return path;\n  }\n\n  private generateBackgroundPath(points: Array<{ x: number; y: number }>): string {\n    if (points.length < 2) return '';\n\n    let path = `M ${points[0].x} ${this.height}`;\n    path += ` L ${points[0].x} ${points[0].y}`;\n\n    for (let i = 1; i < points.length; i++) {\n      const prev = points[i - 1];\n      const curr = points[i];\n      const tension = 0.5;\n\n      const cp1x = prev.x + (curr.x - prev.x) * tension;\n      const cp1y = prev.y;\n      const cp2x = curr.x - (curr.x - prev.x) * tension;\n      const cp2y = curr.y;\n      path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;\n    }\n\n    path += ` L ${points[points.length - 1].x} ${this.height}`;\n    path += ' Z';\n\n    return path;\n  }\n\n  private getStrokeColor(): string {\n    switch (this.trend) {\n      case 'positive':\n        return 'var(--color-success-500)';\n      case 'negative':\n        return 'var(--color-error-500)';\n      case 'neutral':\n        return 'var(--color-neutral-500)';\n      default:\n        return 'var(--color-neutral-500)';\n    }\n  }\n\n  private getFillColor(): string {\n    switch (this.trend) {\n      case 'positive':\n        return 'var(--color-success-600)';\n      case 'negative':\n        return 'var(--color-error-600)';\n      case 'neutral':\n        return 'var(--color-neutral-600)';\n      default:\n        return 'var(--color-neutral-600)';\n    }\n  }\n\n  render() {\n    const points = this.normalizeData();\n    const pathData = this.generatePath(points);\n    const backgroundPath = this.variant !== 'line-only' ? this.generateBackgroundPath(points) : '';\n    const strokeColor = this.getStrokeColor();\n    const fillColor = this.getFillColor();\n    const gradientId = `gradient-${this.trend}`;\n\n    return (\n      <Host>\n        <div\n          class={{\n            'trend-chart': true,\n            [`trend-chart-${this.trend}`]: true,\n            [`trend-chart-${this.variant}`]: true,\n            'trend-chart-animated': this.animated,\n          }}\n        >\n          <svg\n            width={this.width}\n            height={this.height}\n            viewBox={`0 0 ${this.width} ${this.height}`}\n            class=\"chart-svg\"\n          >\n            <defs>\n              <linearGradient id={gradientId} x1=\"0%\" y1=\"0%\" x2=\"0%\" y2=\"100%\">\n                <stop\n                  offset=\"0%\"\n                  stop-color={fillColor}\n                  stop-opacity={this.variant === 'fill-only' ? 0.4 : 0.2}\n                />\n                <stop\n                  offset=\"100%\"\n                  stop-color={fillColor}\n                  stop-opacity={this.variant === 'fill-only' ? 0.1 : 0.05}\n                />\n              </linearGradient>\n            </defs>\n\n            {/* Background fill (for fill-only and line-fill variants) */}\n            {backgroundPath && this.variant !== 'line-only' && (\n              <path\n                class=\"chart-background\"\n                d={backgroundPath}\n                fill={`url(#${gradientId})`}\n              />\n            )}\n\n            {/* Stroke line (for line-only and line-fill variants) */}\n            {pathData && this.variant !== 'fill-only' && (\n              <path\n                class=\"chart-line\"\n                d={pathData}\n                stroke={strokeColor}\n                stroke-width=\"2\"\n                fill=\"none\"\n              />\n            )}\n          </svg>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["h","Host"],"mappings":"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"}

package/cjs/form-9mbajZ3y.js

@@ -0,0 +1,64 @@
+'use strict';
+
+/**
+ * Form utilities for form-associated custom elements
+ *
+ * These utilities help Stencil components participate in native HTML forms
+ * using the ElementInternals API (formAssociated: true).
+ */
+/**
+ * Sync a text/number value to the form
+ * Call this in handleInput and componentDidLoad
+ */
+function syncFormValue(component) {
+    if (!component.internals?.setFormValue || !component.name)
+        return;
+    const value = component.value;
+    if (value === null || value === undefined || value === '') {
+        component.internals.setFormValue(null);
+    }
+    else {
+        component.internals.setFormValue(String(value));
+    }
+}
+/**
+ * Sync a checkable component's value to the form
+ * For checkbox, toggle, radio - value is only submitted when checked
+ */
+function syncCheckableFormValue(internals, name, checked, value = 'on') {
+    if (!internals?.setFormValue || !name)
+        return;
+    internals.setFormValue(checked ? value : null);
+}
+/**
+ * Update validity state based on a native input element
+ * This delegates to the browser's built-in validation
+ */
+function updateValidity(internals, inputEl, customMessage) {
+    if (!internals?.setValidity)
+        return;
+    if (inputEl) {
+        internals.setValidity(inputEl.validity, customMessage || inputEl.validationMessage, inputEl);
+    }
+}
+/**
+ * Validate required state for checkable components (checkbox, toggle)
+ */
+function validateRequired(internals, required, checked, message = 'Please check this box if you want to proceed.') {
+    if (!internals?.setValidity)
+        return;
+    if (required && !checked) {
+        internals.setValidity({ valueMissing: true }, message);
+    }
+    else {
+        internals.setValidity({});
+    }
+}
+
+exports.syncCheckableFormValue = syncCheckableFormValue;
+exports.syncFormValue = syncFormValue;
+exports.updateValidity = updateValidity;
+exports.validateRequired = validateRequired;
+//# sourceMappingURL=form-9mbajZ3y.js.map
+
+//# sourceMappingURL=form-9mbajZ3y.js.map

package/cjs/form-9mbajZ3y.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-9mbajZ3y.js","sources":["src/utils/form.ts"],"sourcesContent":["/**\n * Form utilities for form-associated custom elements\n *\n * These utilities help Stencil components participate in native HTML forms\n * using the ElementInternals API (formAssociated: true).\n */\n\n/**\n * Interface for text-based form components (input, textarea)\n */\nexport interface FormComponent {\n  internals: ElementInternals;\n  name: string;\n  value: string | number | null;\n  disabled: boolean;\n  required?: boolean;\n}\n\n/**\n * Sync a text/number value to the form\n * Call this in handleInput and componentDidLoad\n */\nexport function syncFormValue(component: FormComponent): void {\n  if (!component.internals?.setFormValue || !component.name) return;\n\n  const value = component.value;\n  if (value === null || value === undefined || value === '') {\n    component.internals.setFormValue(null);\n  } else {\n    component.internals.setFormValue(String(value));\n  }\n}\n\n/**\n * Sync a checkable component's value to the form\n * For checkbox, toggle, radio - value is only submitted when checked\n */\nexport function syncCheckableFormValue(\n  internals: ElementInternals | undefined,\n  name: string,\n  checked: boolean,\n  value: string = 'on'\n): void {\n  if (!internals?.setFormValue || !name) return;\n  internals.setFormValue(checked ? value : null);\n}\n\n/**\n * Update validity state based on a native input element\n * This delegates to the browser's built-in validation\n */\nexport function updateValidity(\n  internals: ElementInternals | undefined,\n  inputEl: HTMLInputElement | HTMLTextAreaElement | null | undefined,\n  customMessage?: string\n): void {\n  if (!internals?.setValidity) return;\n\n  if (inputEl) {\n    internals.setValidity(\n      inputEl.validity,\n      customMessage || inputEl.validationMessage,\n      inputEl\n    );\n  }\n}\n\n/**\n * Set custom validity for components without native inputs\n */\nexport function setCustomValidity(\n  internals: ElementInternals | undefined,\n  isValid: boolean,\n  message: string = ''\n): void {\n  if (!internals?.setValidity) return;\n\n  if (isValid) {\n    internals.setValidity({});\n  } else {\n    internals.setValidity({ customError: true }, message);\n  }\n}\n\n/**\n * Validate required state for checkable components (checkbox, toggle)\n */\nexport function validateRequired(\n  internals: ElementInternals | undefined,\n  required: boolean,\n  checked: boolean,\n  message: string = 'Please check this box if you want to proceed.'\n): void {\n  if (!internals?.setValidity) return;\n\n  if (required && !checked) {\n    internals.setValidity({ valueMissing: true }, message);\n  } else {\n    internals.setValidity({});\n  }\n}\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAaH;;;AAGG;AACG,SAAU,aAAa,CAAC,SAAwB,EAAA;IACpD,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,YAAY,IAAI,CAAC,SAAS,CAAC,IAAI;QAAE;AAE3D,IAAA,MAAM,KAAK,GAAG,SAAS,CAAC,KAAK;AAC7B,IAAA,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,EAAE;AACzD,QAAA,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;;SACjC;QACL,SAAS,CAAC,SAAS,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;;AAEnD;AAEA;;;AAGG;AACG,SAAU,sBAAsB,CACpC,SAAuC,EACvC,IAAY,EACZ,OAAgB,EAChB,KAAA,GAAgB,IAAI,EAAA;AAEpB,IAAA,IAAI,CAAC,SAAS,EAAE,YAAY,IAAI,CAAC,IAAI;QAAE;AACvC,IAAA,SAAS,CAAC,YAAY,CAAC,OAAO,GAAG,KAAK,GAAG,IAAI,CAAC;AAChD;AAEA;;;AAGG;SACa,cAAc,CAC5B,SAAuC,EACvC,OAAkE,EAClE,aAAsB,EAAA;IAEtB,IAAI,CAAC,SAAS,EAAE,WAAW;QAAE;IAE7B,IAAI,OAAO,EAAE;AACX,QAAA,SAAS,CAAC,WAAW,CACnB,OAAO,CAAC,QAAQ,EAChB,aAAa,IAAI,OAAO,CAAC,iBAAiB,EAC1C,OAAO,CACR;;AAEL;AAmBA;;AAEG;AACG,SAAU,gBAAgB,CAC9B,SAAuC,EACvC,QAAiB,EACjB,OAAgB,EAChB,OAAA,GAAkB,+CAA+C,EAAA;IAEjE,IAAI,CAAC,SAAS,EAAE,WAAW;QAAE;AAE7B,IAAA,IAAI,QAAQ,IAAI,CAAC,OAAO,EAAE;QACxB,SAAS,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC;;SACjD;AACL,QAAA,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;;AAE7B;;;;;;;"}