@frontmcp/ui 0.5.0

package/src/web-components/elements/fmcp-input.js

@@ -0,0 +1,248 @@
+"use strict";
+/**
+ * @file fmcp-input.ts
+ * @description FrontMCP Input Web Component.
+ *
+ * A custom element wrapper around the input() HTML function.
+ *
+ * @example Basic usage
+ * ```html
+ * <fmcp-input name="email" type="email" label="Email Address"></fmcp-input>
+ * <fmcp-input name="password" type="password" label="Password" required></fmcp-input>
+ * ```
+ *
+ * @example With validation
+ * ```html
+ * <fmcp-input
+ *   name="username"
+ *   label="Username"
+ *   helper="Choose a unique username"
+ *   pattern="[a-z0-9]+"
+ * ></fmcp-input>
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/elements/fmcp-input
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FmcpInput = void 0;
+exports.registerFmcpInput = registerFmcpInput;
+const core_1 = require("../core");
+const form_1 = require("../../components/form");
+const form_schema_1 = require("../../components/form.schema");
+/**
+ * FmcpInput Web Component
+ */
+class FmcpInput extends core_1.FmcpElement {
+    config = {
+        name: 'input',
+        schema: form_schema_1.InputOptionsSchema,
+        defaults: {
+            type: 'text',
+            size: 'md',
+            state: 'default',
+        },
+    };
+    static get observedAttributes() {
+        return [
+            'name',
+            'type',
+            'id',
+            'value',
+            'placeholder',
+            'label',
+            'helper',
+            'error',
+            'size',
+            'state',
+            'required',
+            'disabled',
+            'readonly',
+            'autocomplete',
+            'pattern',
+            'min',
+            'max',
+            'step',
+            'class',
+            'icon-before',
+            'icon-after',
+            'hx-get',
+            'hx-post',
+            'hx-target',
+            'hx-swap',
+            'hx-trigger',
+        ];
+    }
+    renderHtml(options, _content) {
+        return (0, form_1.input)(options);
+    }
+    // ============================================
+    // Property Setters
+    // ============================================
+    set name(value) {
+        this._options.name = value;
+        this._scheduleRender();
+    }
+    get name() {
+        return this._options.name ?? '';
+    }
+    set type(value) {
+        this._options.type = value;
+        this._scheduleRender();
+    }
+    get type() {
+        return this._options.type;
+    }
+    set label(value) {
+        this._options.label = value;
+        this._scheduleRender();
+    }
+    get label() {
+        return this._options.label;
+    }
+    set placeholder(value) {
+        this._options.placeholder = value;
+        this._scheduleRender();
+    }
+    get placeholder() {
+        return this._options.placeholder;
+    }
+    set helper(value) {
+        this._options.helper = value;
+        this._scheduleRender();
+    }
+    get helper() {
+        return this._options.helper;
+    }
+    set error(value) {
+        this._options.error = value;
+        this._scheduleRender();
+    }
+    get error() {
+        return this._options.error;
+    }
+    set size(value) {
+        this._options.size = value;
+        this._scheduleRender();
+    }
+    get size() {
+        return this._options.size;
+    }
+    set state(value) {
+        this._options.state = value;
+        this._scheduleRender();
+    }
+    get state() {
+        return this._options.state;
+    }
+    set required(value) {
+        this._options.required = value;
+        this._scheduleRender();
+    }
+    get required() {
+        return this._options.required ?? false;
+    }
+    set disabled(value) {
+        this._options.disabled = value;
+        this._scheduleRender();
+    }
+    get disabled() {
+        return this._options.disabled ?? false;
+    }
+    set readonly(value) {
+        this._options.readonly = value;
+        this._scheduleRender();
+    }
+    get readonly() {
+        return this._options.readonly ?? false;
+    }
+    // ============================================
+    // Form Integration
+    // ============================================
+    connectedCallback() {
+        super.connectedCallback();
+        // Forward input/change events
+        this.addEventListener('input', this._handleInput.bind(this));
+        this.addEventListener('change', this._handleChange.bind(this));
+    }
+    _handleInput(e) {
+        const inputEl = this.querySelector('input');
+        if (inputEl && (e.target === inputEl || inputEl.contains(e.target))) {
+            this.dispatchEvent(new CustomEvent('fmcp:input', {
+                bubbles: true,
+                detail: { value: inputEl.value, name: this._options.name },
+            }));
+        }
+    }
+    _handleChange(e) {
+        const inputEl = this.querySelector('input');
+        if (inputEl && (e.target === inputEl || inputEl.contains(e.target))) {
+            this.dispatchEvent(new CustomEvent('fmcp:change', {
+                bubbles: true,
+                detail: { value: inputEl.value, name: this._options.name },
+            }));
+        }
+    }
+    /**
+     * Get current input value.
+     */
+    get value() {
+        const inputEl = this.querySelector('input');
+        return inputEl?.value ?? this._options.value ?? '';
+    }
+    /**
+     * Set input value.
+     */
+    set value(val) {
+        const inputEl = this.querySelector('input');
+        if (inputEl) {
+            inputEl.value = val;
+        }
+        this._options.value = val;
+    }
+    /**
+     * Get validity state.
+     */
+    get validity() {
+        return this.querySelector('input')?.validity;
+    }
+    /**
+     * Check validity.
+     */
+    checkValidity() {
+        return this.querySelector('input')?.checkValidity() ?? true;
+    }
+    /**
+     * Report validity.
+     */
+    reportValidity() {
+        return this.querySelector('input')?.reportValidity() ?? true;
+    }
+    /**
+     * Focus the input.
+     */
+    focus() {
+        this.querySelector('input')?.focus();
+    }
+    /**
+     * Blur the input.
+     */
+    blur() {
+        this.querySelector('input')?.blur();
+    }
+    /**
+     * Select all text.
+     */
+    select() {
+        this.querySelector('input')?.select();
+    }
+}
+exports.FmcpInput = FmcpInput;
+/**
+ * Register the fmcp-input custom element.
+ */
+function registerFmcpInput() {
+    if (typeof customElements !== 'undefined' && !customElements.get('fmcp-input')) {
+        customElements.define('fmcp-input', FmcpInput);
+    }
+}
+//# sourceMappingURL=fmcp-input.js.map

package/src/web-components/elements/fmcp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-input.js","sourceRoot":"","sources":["../../../../src/web-components/elements/fmcp-input.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file fmcp-input.ts\n * @description FrontMCP Input Web Component.\n *\n * A custom element wrapper around the input() HTML function.\n *\n * @example Basic usage\n * ```html\n * <fmcp-input name=\"email\" type=\"email\" label=\"Email Address\"></fmcp-input>\n * <fmcp-input name=\"password\" type=\"password\" label=\"Password\" required></fmcp-input>\n * ```\n *\n * @example With validation\n * ```html\n * <fmcp-input\n *   name=\"username\"\n *   label=\"Username\"\n *   helper=\"Choose a unique username\"\n *   pattern=\"[a-z0-9]+\"\n * ></fmcp-input>\n * ```\n *\n * @module @frontmcp/ui/web-components/elements/fmcp-input\n */\n\nimport { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core';\nimport { input, type InputOptions } from '../../components/form';\nimport { InputOptionsSchema } from '../../components/form.schema';\n\n/**\n * FmcpInput Web Component\n */\nexport class FmcpInput extends FmcpElement<InputOptions> {\n  protected readonly config: FmcpElementConfig<InputOptions> = {\n    name: 'input',\n    schema: InputOptionsSchema,\n    defaults: {\n      type: 'text',\n      size: 'md',\n      state: 'default',\n    },\n  };\n\n  static get observedAttributes(): string[] {\n    return [\n      'name',\n      'type',\n      'id',\n      'value',\n      'placeholder',\n      'label',\n      'helper',\n      'error',\n      'size',\n      'state',\n      'required',\n      'disabled',\n      'readonly',\n      'autocomplete',\n      'pattern',\n      'min',\n      'max',\n      'step',\n      'class',\n      'icon-before',\n      'icon-after',\n      'hx-get',\n      'hx-post',\n      'hx-target',\n      'hx-swap',\n      'hx-trigger',\n    ];\n  }\n\n  protected renderHtml(options: InputOptions, _content: string): string {\n    return input(options);\n  }\n\n  // ============================================\n  // Property Setters\n  // ============================================\n\n  set name(value: string) {\n    this._options.name = value;\n    this._scheduleRender();\n  }\n  get name(): string {\n    return this._options.name ?? '';\n  }\n\n  set type(value: InputOptions['type']) {\n    this._options.type = value;\n    this._scheduleRender();\n  }\n  get type(): InputOptions['type'] {\n    return this._options.type;\n  }\n\n  set label(value: string | undefined) {\n    this._options.label = value;\n    this._scheduleRender();\n  }\n  get label(): string | undefined {\n    return this._options.label;\n  }\n\n  set placeholder(value: string | undefined) {\n    this._options.placeholder = value;\n    this._scheduleRender();\n  }\n  get placeholder(): string | undefined {\n    return this._options.placeholder;\n  }\n\n  set helper(value: string | undefined) {\n    this._options.helper = value;\n    this._scheduleRender();\n  }\n  get helper(): string | undefined {\n    return this._options.helper;\n  }\n\n  set error(value: string | undefined) {\n    this._options.error = value;\n    this._scheduleRender();\n  }\n  get error(): string | undefined {\n    return this._options.error;\n  }\n\n  set size(value: InputOptions['size']) {\n    this._options.size = value;\n    this._scheduleRender();\n  }\n  get size(): InputOptions['size'] {\n    return this._options.size;\n  }\n\n  set state(value: InputOptions['state']) {\n    this._options.state = value;\n    this._scheduleRender();\n  }\n  get state(): InputOptions['state'] {\n    return this._options.state;\n  }\n\n  set required(value: boolean) {\n    this._options.required = value;\n    this._scheduleRender();\n  }\n  get required(): boolean {\n    return this._options.required ?? false;\n  }\n\n  set disabled(value: boolean) {\n    this._options.disabled = value;\n    this._scheduleRender();\n  }\n  get disabled(): boolean {\n    return this._options.disabled ?? false;\n  }\n\n  set readonly(value: boolean) {\n    this._options.readonly = value;\n    this._scheduleRender();\n  }\n  get readonly(): boolean {\n    return this._options.readonly ?? false;\n  }\n\n  // ============================================\n  // Form Integration\n  // ============================================\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Forward input/change events\n    this.addEventListener('input', this._handleInput.bind(this));\n    this.addEventListener('change', this._handleChange.bind(this));\n  }\n\n  private _handleInput(e: Event): void {\n    const inputEl = this.querySelector('input');\n    if (inputEl && (e.target === inputEl || inputEl.contains(e.target as Node))) {\n      this.dispatchEvent(\n        new CustomEvent('fmcp:input', {\n          bubbles: true,\n          detail: { value: inputEl.value, name: this._options.name },\n        }),\n      );\n    }\n  }\n\n  private _handleChange(e: Event): void {\n    const inputEl = this.querySelector('input');\n    if (inputEl && (e.target === inputEl || inputEl.contains(e.target as Node))) {\n      this.dispatchEvent(\n        new CustomEvent('fmcp:change', {\n          bubbles: true,\n          detail: { value: inputEl.value, name: this._options.name },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Get current input value.\n   */\n  get value(): string {\n    const inputEl = this.querySelector('input');\n    return inputEl?.value ?? this._options.value ?? '';\n  }\n\n  /**\n   * Set input value.\n   */\n  set value(val: string) {\n    const inputEl = this.querySelector('input');\n    if (inputEl) {\n      inputEl.value = val;\n    }\n    this._options.value = val;\n  }\n\n  /**\n   * Get validity state.\n   */\n  get validity(): ValidityState | undefined {\n    return this.querySelector('input')?.validity;\n  }\n\n  /**\n   * Check validity.\n   */\n  checkValidity(): boolean {\n    return this.querySelector('input')?.checkValidity() ?? true;\n  }\n\n  /**\n   * Report validity.\n   */\n  reportValidity(): boolean {\n    return this.querySelector('input')?.reportValidity() ?? true;\n  }\n\n  /**\n   * Focus the input.\n   */\n  override focus(): void {\n    this.querySelector('input')?.focus();\n  }\n\n  /**\n   * Blur the input.\n   */\n  override blur(): void {\n    this.querySelector('input')?.blur();\n  }\n\n  /**\n   * Select all text.\n   */\n  select(): void {\n    this.querySelector('input')?.select();\n  }\n}\n\n/**\n * Register the fmcp-input custom element.\n */\nexport function registerFmcpInput(): void {\n  if (typeof customElements !== 'undefined' && !customElements.get('fmcp-input')) {\n    customElements.define('fmcp-input', FmcpInput);\n  }\n}\n"]}

package/src/web-components/elements/fmcp-select.d.ts

@@ -0,0 +1,99 @@
+/**
+ * @file fmcp-select.ts
+ * @description FrontMCP Select Web Component.
+ *
+ * A custom element wrapper around the select() HTML function.
+ *
+ * @example Basic usage
+ * ```html
+ * <fmcp-select name="country" label="Country" placeholder="Select a country">
+ * </fmcp-select>
+ * ```
+ *
+ * @example With options via property
+ * ```tsx
+ * const selectEl = document.querySelector('fmcp-select');
+ * selectEl.selectOptions = [
+ *   { value: 'us', label: 'United States' },
+ *   { value: 'uk', label: 'United Kingdom' },
+ * ];
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/elements/fmcp-select
+ */
+import { FmcpElement, type FmcpElementConfig } from '../core';
+import { type SelectOptions } from '../../components/form';
+import { type SelectOptionItem } from '../../components/form.schema';
+/**
+ * FmcpSelect Web Component
+ */
+export declare class FmcpSelect extends FmcpElement<SelectOptions> {
+    protected readonly config: FmcpElementConfig<SelectOptions>;
+    /** Select options stored separately since they're complex objects */
+    private _selectOptions;
+    static get observedAttributes(): string[];
+    protected renderHtml(options: SelectOptions, _content: string): string;
+    set name(value: string);
+    get name(): string;
+    set label(value: string | undefined);
+    get label(): string | undefined;
+    set placeholder(value: string | undefined);
+    get placeholder(): string | undefined;
+    set helper(value: string | undefined);
+    get helper(): string | undefined;
+    set error(value: string | undefined);
+    get error(): string | undefined;
+    set size(value: SelectOptions['size']);
+    get size(): SelectOptions['size'];
+    set state(value: SelectOptions['state']);
+    get state(): SelectOptions['state'];
+    set required(value: boolean);
+    get required(): boolean;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    set multiple(value: boolean);
+    get multiple(): boolean;
+    /**
+     * Set select options (array of { value, label, disabled?, selected? })
+     */
+    set selectOptions(value: SelectOptionItem[]);
+    get selectOptions(): SelectOptionItem[];
+    connectedCallback(): void;
+    private _handleChange;
+    /**
+     * Get current select value.
+     */
+    get value(): string;
+    /**
+     * Set select value.
+     */
+    set value(val: string);
+    /**
+     * Get selected options (for multiple select).
+     */
+    get selectedOptions(): string[];
+    /**
+     * Get validity state.
+     */
+    get validity(): ValidityState | undefined;
+    /**
+     * Check validity.
+     */
+    checkValidity(): boolean;
+    /**
+     * Report validity.
+     */
+    reportValidity(): boolean;
+    /**
+     * Focus the select.
+     */
+    focus(): void;
+    /**
+     * Blur the select.
+     */
+    blur(): void;
+}
+/**
+ * Register the fmcp-select custom element.
+ */
+export declare function registerFmcpSelect(): void;

package/src/web-components/elements/fmcp-select.js

@@ -0,0 +1,243 @@
+"use strict";
+/**
+ * @file fmcp-select.ts
+ * @description FrontMCP Select Web Component.
+ *
+ * A custom element wrapper around the select() HTML function.
+ *
+ * @example Basic usage
+ * ```html
+ * <fmcp-select name="country" label="Country" placeholder="Select a country">
+ * </fmcp-select>
+ * ```
+ *
+ * @example With options via property
+ * ```tsx
+ * const selectEl = document.querySelector('fmcp-select');
+ * selectEl.selectOptions = [
+ *   { value: 'us', label: 'United States' },
+ *   { value: 'uk', label: 'United Kingdom' },
+ * ];
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/elements/fmcp-select
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FmcpSelect = void 0;
+exports.registerFmcpSelect = registerFmcpSelect;
+const core_1 = require("../core");
+const form_1 = require("../../components/form");
+const form_schema_1 = require("../../components/form.schema");
+/**
+ * FmcpSelect Web Component
+ */
+class FmcpSelect extends core_1.FmcpElement {
+    config = {
+        name: 'select',
+        schema: form_schema_1.SelectOptionsSchema,
+        defaults: {
+            size: 'md',
+            state: 'default',
+        },
+    };
+    /** Select options stored separately since they're complex objects */
+    _selectOptions = [];
+    static get observedAttributes() {
+        return [
+            'name',
+            'id',
+            'value',
+            'placeholder',
+            'label',
+            'helper',
+            'error',
+            'size',
+            'state',
+            'required',
+            'disabled',
+            'multiple',
+            'class',
+            'hx-get',
+            'hx-post',
+            'hx-target',
+            'hx-swap',
+            'hx-trigger',
+        ];
+    }
+    renderHtml(options, _content) {
+        // Merge stored select options
+        const mergedOptions = {
+            ...options,
+            options: this._selectOptions.length > 0 ? this._selectOptions : options.options,
+        };
+        return (0, form_1.select)(mergedOptions);
+    }
+    // ============================================
+    // Property Setters
+    // ============================================
+    set name(value) {
+        this._options.name = value;
+        this._scheduleRender();
+    }
+    get name() {
+        return this._options.name ?? '';
+    }
+    set label(value) {
+        this._options.label = value;
+        this._scheduleRender();
+    }
+    get label() {
+        return this._options.label;
+    }
+    set placeholder(value) {
+        this._options.placeholder = value;
+        this._scheduleRender();
+    }
+    get placeholder() {
+        return this._options.placeholder;
+    }
+    set helper(value) {
+        this._options.helper = value;
+        this._scheduleRender();
+    }
+    get helper() {
+        return this._options.helper;
+    }
+    set error(value) {
+        this._options.error = value;
+        this._scheduleRender();
+    }
+    get error() {
+        return this._options.error;
+    }
+    set size(value) {
+        this._options.size = value;
+        this._scheduleRender();
+    }
+    get size() {
+        return this._options.size;
+    }
+    set state(value) {
+        this._options.state = value;
+        this._scheduleRender();
+    }
+    get state() {
+        return this._options.state;
+    }
+    set required(value) {
+        this._options.required = value;
+        this._scheduleRender();
+    }
+    get required() {
+        return this._options.required ?? false;
+    }
+    set disabled(value) {
+        this._options.disabled = value;
+        this._scheduleRender();
+    }
+    get disabled() {
+        return this._options.disabled ?? false;
+    }
+    set multiple(value) {
+        this._options.multiple = value;
+        this._scheduleRender();
+    }
+    get multiple() {
+        return this._options.multiple ?? false;
+    }
+    /**
+     * Set select options (array of { value, label, disabled?, selected? })
+     */
+    set selectOptions(value) {
+        this._selectOptions = value;
+        this._scheduleRender();
+    }
+    get selectOptions() {
+        return this._selectOptions;
+    }
+    // ============================================
+    // Form Integration
+    // ============================================
+    connectedCallback() {
+        super.connectedCallback();
+        // Forward change events
+        this.addEventListener('change', this._handleChange.bind(this));
+    }
+    _handleChange(e) {
+        const selectEl = this.querySelector('select');
+        if (selectEl && (e.target === selectEl || selectEl.contains(e.target))) {
+            this.dispatchEvent(new CustomEvent('fmcp:change', {
+                bubbles: true,
+                detail: {
+                    value: selectEl.value,
+                    name: this._options.name,
+                    selectedOptions: Array.from(selectEl.selectedOptions).map((opt) => opt.value),
+                },
+            }));
+        }
+    }
+    /**
+     * Get current select value.
+     */
+    get value() {
+        const selectEl = this.querySelector('select');
+        return selectEl?.value ?? this._options.value ?? '';
+    }
+    /**
+     * Set select value.
+     */
+    set value(val) {
+        const selectEl = this.querySelector('select');
+        if (selectEl) {
+            selectEl.value = val;
+        }
+        this._options.value = val;
+    }
+    /**
+     * Get selected options (for multiple select).
+     */
+    get selectedOptions() {
+        const selectEl = this.querySelector('select');
+        return selectEl ? Array.from(selectEl.selectedOptions).map((opt) => opt.value) : [];
+    }
+    /**
+     * Get validity state.
+     */
+    get validity() {
+        return this.querySelector('select')?.validity;
+    }
+    /**
+     * Check validity.
+     */
+    checkValidity() {
+        return this.querySelector('select')?.checkValidity() ?? true;
+    }
+    /**
+     * Report validity.
+     */
+    reportValidity() {
+        return this.querySelector('select')?.reportValidity() ?? true;
+    }
+    /**
+     * Focus the select.
+     */
+    focus() {
+        this.querySelector('select')?.focus();
+    }
+    /**
+     * Blur the select.
+     */
+    blur() {
+        this.querySelector('select')?.blur();
+    }
+}
+exports.FmcpSelect = FmcpSelect;
+/**
+ * Register the fmcp-select custom element.
+ */
+function registerFmcpSelect() {
+    if (typeof customElements !== 'undefined' && !customElements.get('fmcp-select')) {
+        customElements.define('fmcp-select', FmcpSelect);
+    }
+}
+//# sourceMappingURL=fmcp-select.js.map

package/src/web-components/elements/fmcp-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-select.js","sourceRoot":"","sources":["../../../../src/web-components/elements/fmcp-select.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file fmcp-select.ts\n * @description FrontMCP Select Web Component.\n *\n * A custom element wrapper around the select() HTML function.\n *\n * @example Basic usage\n * ```html\n * <fmcp-select name=\"country\" label=\"Country\" placeholder=\"Select a country\">\n * </fmcp-select>\n * ```\n *\n * @example With options via property\n * ```tsx\n * const selectEl = document.querySelector('fmcp-select');\n * selectEl.selectOptions = [\n *   { value: 'us', label: 'United States' },\n *   { value: 'uk', label: 'United Kingdom' },\n * ];\n * ```\n *\n * @module @frontmcp/ui/web-components/elements/fmcp-select\n */\n\nimport { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core';\nimport { select, type SelectOptions } from '../../components/form';\nimport { SelectOptionsSchema, type SelectOptionItem } from '../../components/form.schema';\n\n/**\n * FmcpSelect Web Component\n */\nexport class FmcpSelect extends FmcpElement<SelectOptions> {\n  protected readonly config: FmcpElementConfig<SelectOptions> = {\n    name: 'select',\n    schema: SelectOptionsSchema,\n    defaults: {\n      size: 'md',\n      state: 'default',\n    },\n  };\n\n  /** Select options stored separately since they're complex objects */\n  private _selectOptions: SelectOptionItem[] = [];\n\n  static get observedAttributes(): string[] {\n    return [\n      'name',\n      'id',\n      'value',\n      'placeholder',\n      'label',\n      'helper',\n      'error',\n      'size',\n      'state',\n      'required',\n      'disabled',\n      'multiple',\n      'class',\n      'hx-get',\n      'hx-post',\n      'hx-target',\n      'hx-swap',\n      'hx-trigger',\n    ];\n  }\n\n  protected renderHtml(options: SelectOptions, _content: string): string {\n    // Merge stored select options\n    const mergedOptions: SelectOptions = {\n      ...options,\n      options: this._selectOptions.length > 0 ? this._selectOptions : options.options,\n    };\n    return select(mergedOptions);\n  }\n\n  // ============================================\n  // Property Setters\n  // ============================================\n\n  set name(value: string) {\n    this._options.name = value;\n    this._scheduleRender();\n  }\n  get name(): string {\n    return this._options.name ?? '';\n  }\n\n  set label(value: string | undefined) {\n    this._options.label = value;\n    this._scheduleRender();\n  }\n  get label(): string | undefined {\n    return this._options.label;\n  }\n\n  set placeholder(value: string | undefined) {\n    this._options.placeholder = value;\n    this._scheduleRender();\n  }\n  get placeholder(): string | undefined {\n    return this._options.placeholder;\n  }\n\n  set helper(value: string | undefined) {\n    this._options.helper = value;\n    this._scheduleRender();\n  }\n  get helper(): string | undefined {\n    return this._options.helper;\n  }\n\n  set error(value: string | undefined) {\n    this._options.error = value;\n    this._scheduleRender();\n  }\n  get error(): string | undefined {\n    return this._options.error;\n  }\n\n  set size(value: SelectOptions['size']) {\n    this._options.size = value;\n    this._scheduleRender();\n  }\n  get size(): SelectOptions['size'] {\n    return this._options.size;\n  }\n\n  set state(value: SelectOptions['state']) {\n    this._options.state = value;\n    this._scheduleRender();\n  }\n  get state(): SelectOptions['state'] {\n    return this._options.state;\n  }\n\n  set required(value: boolean) {\n    this._options.required = value;\n    this._scheduleRender();\n  }\n  get required(): boolean {\n    return this._options.required ?? false;\n  }\n\n  set disabled(value: boolean) {\n    this._options.disabled = value;\n    this._scheduleRender();\n  }\n  get disabled(): boolean {\n    return this._options.disabled ?? false;\n  }\n\n  set multiple(value: boolean) {\n    this._options.multiple = value;\n    this._scheduleRender();\n  }\n  get multiple(): boolean {\n    return this._options.multiple ?? false;\n  }\n\n  /**\n   * Set select options (array of { value, label, disabled?, selected? })\n   */\n  set selectOptions(value: SelectOptionItem[]) {\n    this._selectOptions = value;\n    this._scheduleRender();\n  }\n  get selectOptions(): SelectOptionItem[] {\n    return this._selectOptions;\n  }\n\n  // ============================================\n  // Form Integration\n  // ============================================\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Forward change events\n    this.addEventListener('change', this._handleChange.bind(this));\n  }\n\n  private _handleChange(e: Event): void {\n    const selectEl = this.querySelector('select');\n    if (selectEl && (e.target === selectEl || selectEl.contains(e.target as Node))) {\n      this.dispatchEvent(\n        new CustomEvent('fmcp:change', {\n          bubbles: true,\n          detail: {\n            value: selectEl.value,\n            name: this._options.name,\n            selectedOptions: Array.from(selectEl.selectedOptions).map((opt) => opt.value),\n          },\n        }),\n      );\n    }\n  }\n\n  /**\n   * Get current select value.\n   */\n  get value(): string {\n    const selectEl = this.querySelector('select');\n    return selectEl?.value ?? this._options.value ?? '';\n  }\n\n  /**\n   * Set select value.\n   */\n  set value(val: string) {\n    const selectEl = this.querySelector('select');\n    if (selectEl) {\n      selectEl.value = val;\n    }\n    this._options.value = val;\n  }\n\n  /**\n   * Get selected options (for multiple select).\n   */\n  get selectedOptions(): string[] {\n    const selectEl = this.querySelector('select');\n    return selectEl ? Array.from(selectEl.selectedOptions).map((opt) => opt.value) : [];\n  }\n\n  /**\n   * Get validity state.\n   */\n  get validity(): ValidityState | undefined {\n    return this.querySelector('select')?.validity;\n  }\n\n  /**\n   * Check validity.\n   */\n  checkValidity(): boolean {\n    return this.querySelector('select')?.checkValidity() ?? true;\n  }\n\n  /**\n   * Report validity.\n   */\n  reportValidity(): boolean {\n    return this.querySelector('select')?.reportValidity() ?? true;\n  }\n\n  /**\n   * Focus the select.\n   */\n  override focus(): void {\n    this.querySelector('select')?.focus();\n  }\n\n  /**\n   * Blur the select.\n   */\n  override blur(): void {\n    this.querySelector('select')?.blur();\n  }\n}\n\n/**\n * Register the fmcp-select custom element.\n */\nexport function registerFmcpSelect(): void {\n  if (typeof customElements !== 'undefined' && !customElements.get('fmcp-select')) {\n    customElements.define('fmcp-select', FmcpSelect);\n  }\n}\n"]}

package/src/web-components/elements/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @file elements/index.ts
+ * @description Barrel exports for FrontMCP Web Component elements.
+ *
+ * @module @frontmcp/ui/web-components/elements
+ */
+export { FmcpButton, registerFmcpButton } from './fmcp-button';
+export { FmcpCard, registerFmcpCard } from './fmcp-card';
+export { FmcpAlert, registerFmcpAlert } from './fmcp-alert';
+export { FmcpBadge, registerFmcpBadge } from './fmcp-badge';
+export { FmcpInput, registerFmcpInput } from './fmcp-input';
+export { FmcpSelect, registerFmcpSelect } from './fmcp-select';