@frontmcp/ui 0.5.1 → 0.6.1

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

@@ -1,248 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,99 +0,0 @@
-/**
- * @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

@@ -1,243 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,12 +0,0 @@
-/**
- * @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';