@frontmcp/ui 0.5.0 → 0.6.0

package/web-components/elements/fmcp-alert.d.ts

@@ -0,0 +1,46 @@
+/**
+ * @file fmcp-alert.ts
+ * @description FrontMCP Alert Web Component.
+ *
+ * A custom element wrapper around the alert() HTML function.
+ *
+ * @example Basic usage
+ * ```html
+ * <fmcp-alert variant="success">Operation completed!</fmcp-alert>
+ * <fmcp-alert variant="danger" title="Error">Something went wrong</fmcp-alert>
+ * ```
+ *
+ * @example Dismissible alert
+ * ```html
+ * <fmcp-alert variant="info" dismissible>
+ *   Click X to dismiss
+ * </fmcp-alert>
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/elements/fmcp-alert
+ */
+import { FmcpElement, type FmcpElementConfig } from '../core';
+import { type AlertOptions } from '../../components/alert';
+/**
+ * FmcpAlert Web Component
+ */
+export declare class FmcpAlert extends FmcpElement<AlertOptions> {
+    protected readonly config: FmcpElementConfig<AlertOptions>;
+    static get observedAttributes(): string[];
+    protected renderHtml(options: AlertOptions, content: string): string;
+    set variant(value: AlertOptions['variant']);
+    get variant(): AlertOptions['variant'];
+    set alertTitle(value: string | undefined);
+    get alertTitle(): string | undefined;
+    set showIcon(value: boolean);
+    get showIcon(): boolean;
+    set dismissible(value: boolean);
+    get dismissible(): boolean;
+    set actions(value: string | undefined);
+    get actions(): string | undefined;
+}
+/**
+ * Register the fmcp-alert custom element.
+ */
+export declare function registerFmcpAlert(): void;
+//# sourceMappingURL=fmcp-alert.d.ts.map

package/web-components/elements/fmcp-alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-alert.d.ts","sourceRoot":"","sources":["../../../src/web-components/elements/fmcp-alert.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAmC,MAAM,SAAS,CAAC;AAC/F,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGlE;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW,CAAC,YAAY,CAAC;IACtD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAOxD;IAEF,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAKpE,IAAI,OAAO,CAAC,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,EAGzC;IACD,IAAI,OAAO,IAAI,YAAY,CAAC,SAAS,CAAC,CAErC;IAED,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGvC;IACD,IAAI,UAAU,IAAI,MAAM,GAAG,SAAS,CAEnC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,WAAW,CAAC,KAAK,EAAE,OAAO,EAG7B;IACD,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGpC;IACD,IAAI,OAAO,IAAI,MAAM,GAAG,SAAS,CAEhC;CACF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAIxC"}

package/web-components/elements/fmcp-badge.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @file fmcp-badge.ts
+ * @description FrontMCP Badge Web Component.
+ *
+ * A custom element wrapper around the badge() HTML function.
+ *
+ * @example Basic usage
+ * ```html
+ * <fmcp-badge>Default</fmcp-badge>
+ * <fmcp-badge variant="success">Active</fmcp-badge>
+ * <fmcp-badge variant="danger" pill>Error</fmcp-badge>
+ * ```
+ *
+ * @example Removable badge
+ * ```html
+ * <fmcp-badge removable>Tag</fmcp-badge>
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/elements/fmcp-badge
+ */
+import { FmcpElement, type FmcpElementConfig } from '../core';
+import { type BadgeOptions } from '../../components/badge';
+/**
+ * FmcpBadge Web Component
+ */
+export declare class FmcpBadge extends FmcpElement<BadgeOptions> {
+    protected readonly config: FmcpElementConfig<BadgeOptions>;
+    static get observedAttributes(): string[];
+    protected renderHtml(options: BadgeOptions, content: string): string;
+    set variant(value: BadgeOptions['variant']);
+    get variant(): BadgeOptions['variant'];
+    set size(value: BadgeOptions['size']);
+    get size(): BadgeOptions['size'];
+    set pill(value: boolean);
+    get pill(): boolean;
+    set dot(value: boolean);
+    get dot(): boolean;
+    set removable(value: boolean);
+    get removable(): boolean;
+    set icon(value: string | undefined);
+    get icon(): string | undefined;
+}
+/**
+ * Register the fmcp-badge custom element.
+ */
+export declare function registerFmcpBadge(): void;
+//# sourceMappingURL=fmcp-badge.d.ts.map

package/web-components/elements/fmcp-badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-badge.d.ts","sourceRoot":"","sources":["../../../src/web-components/elements/fmcp-badge.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAmC,MAAM,SAAS,CAAC;AAC/F,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAGlE;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW,CAAC,YAAY,CAAC;IACtD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAOxD;IAEF,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAKpE,IAAI,OAAO,CAAC,KAAK,EAAE,YAAY,CAAC,SAAS,CAAC,EAGzC;IACD,IAAI,OAAO,IAAI,YAAY,CAAC,SAAS,CAAC,CAErC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,EAGnC;IACD,IAAI,IAAI,IAAI,YAAY,CAAC,MAAM,CAAC,CAE/B;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAGtB;IACD,IAAI,IAAI,IAAI,OAAO,CAElB;IAED,IAAI,GAAG,CAAC,KAAK,EAAE,OAAO,EAGrB;IACD,IAAI,GAAG,IAAI,OAAO,CAEjB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IACD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGjC;IACD,IAAI,IAAI,IAAI,MAAM,GAAG,SAAS,CAE7B;CACF;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAIxC"}

package/web-components/elements/fmcp-button.d.ts

@@ -0,0 +1,117 @@
+/**
+ * @file fmcp-button.ts
+ * @description FrontMCP Button Web Component.
+ *
+ * A custom element wrapper around the button() HTML function.
+ * Works natively in React, Vue, Angular, and plain HTML.
+ *
+ * @example Basic usage
+ * ```html
+ * <fmcp-button>Click Me</fmcp-button>
+ * <fmcp-button variant="danger">Delete</fmcp-button>
+ * <fmcp-button disabled>Disabled</fmcp-button>
+ * ```
+ *
+ * @example In React
+ * ```tsx
+ * import { registerFmcpButton } from '@frontmcp/ui/web-components';
+ * registerFmcpButton();
+ *
+ * function App() {
+ *   return (
+ *     <fmcp-button variant="primary" onClick={handleClick}>
+ *       Click Me
+ *     </fmcp-button>
+ *   );
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/elements/fmcp-button
+ */
+import { FmcpElement, type FmcpElementConfig } from '../core';
+import { type ButtonOptions } from '../../components/button';
+/**
+ * FmcpButton Web Component
+ *
+ * Attributes:
+ * - `variant` - 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'link'
+ * - `size` - 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * - `type` - 'button' | 'submit' | 'reset'
+ * - `disabled` - boolean (presence = true)
+ * - `loading` - boolean
+ * - `full-width` - boolean
+ * - `icon-only` - boolean
+ * - `href` - URL for link-style buttons
+ * - `target` - '_blank' | '_self'
+ *
+ * Properties (for React/Vue):
+ * - All attributes can be set as properties
+ * - `options` - Set all options at once
+ *
+ * Events:
+ * - `fmcp:render` - Fired after render with { options } detail
+ * - `fmcp:click` - Fired on button click with { options } detail
+ */
+export declare class FmcpButton extends FmcpElement<ButtonOptions> {
+    protected readonly config: FmcpElementConfig<ButtonOptions>;
+    /**
+     * Attributes to observe for changes.
+     */
+    static get observedAttributes(): string[];
+    /**
+     * Render the button HTML using the button() function.
+     */
+    protected renderHtml(options: ButtonOptions, content: string): string;
+    set variant(value: ButtonOptions['variant']);
+    get variant(): ButtonOptions['variant'];
+    set size(value: ButtonOptions['size']);
+    get size(): ButtonOptions['size'];
+    set type(value: ButtonOptions['type']);
+    get type(): ButtonOptions['type'];
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    set loading(value: boolean);
+    get loading(): boolean;
+    set fullWidth(value: boolean);
+    get fullWidth(): boolean;
+    set iconOnly(value: boolean);
+    get iconOnly(): boolean;
+    set iconBefore(value: string | undefined);
+    get iconBefore(): string | undefined;
+    set iconAfter(value: string | undefined);
+    get iconAfter(): string | undefined;
+    set href(value: string | undefined);
+    get href(): string | undefined;
+    set buttonAriaLabel(value: string | undefined);
+    get buttonAriaLabel(): string | undefined;
+    connectedCallback(): void;
+    private _handleClick;
+    /**
+     * Focus the inner button element.
+     */
+    focus(): void;
+    /**
+     * Blur the inner button element.
+     */
+    blur(): void;
+    /**
+     * Click the inner button programmatically.
+     */
+    click(): void;
+}
+/**
+ * Register the fmcp-button custom element.
+ *
+ * @example
+ * ```typescript
+ * import { registerFmcpButton } from '@frontmcp/ui/web-components';
+ *
+ * // Register once on app startup
+ * registerFmcpButton();
+ *
+ * // Then use in HTML
+ * // <fmcp-button variant="primary">Click</fmcp-button>
+ * ```
+ */
+export declare function registerFmcpButton(): void;
+//# sourceMappingURL=fmcp-button.d.ts.map

package/web-components/elements/fmcp-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-button.d.ts","sourceRoot":"","sources":["../../../src/web-components/elements/fmcp-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AAEH,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAmC,MAAM,SAAS,CAAC;AAC/F,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGrE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,UAAW,SAAQ,WAAW,CAAC,aAAa,CAAC;IACxD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAQzD;IAEF;;OAEG;IACH,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED;;OAEG;IACH,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAQrE,IAAI,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,SAAS,CAAC,EAG1C;IACD,IAAI,OAAO,IAAI,aAAa,CAAC,SAAS,CAAC,CAEtC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,EAGpC;IACD,IAAI,IAAI,IAAI,aAAa,CAAC,MAAM,CAAC,CAEhC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,EAGpC;IACD,IAAI,IAAI,IAAI,aAAa,CAAC,MAAM,CAAC,CAEhC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAGzB;IACD,IAAI,OAAO,IAAI,OAAO,CAErB;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IACD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGvC;IACD,IAAI,UAAU,IAAI,MAAM,GAAG,SAAS,CAEnC;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGtC;IACD,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGjC;IACD,IAAI,IAAI,IAAI,MAAM,GAAG,SAAS,CAE7B;IAED,IAAI,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAG5C;IACD,IAAI,eAAe,IAAI,MAAM,GAAG,SAAS,CAExC;IAMQ,iBAAiB,IAAI,IAAI;IAOlC,OAAO,CAAC,YAAY;IAiBpB;;OAEG;IACa,KAAK,IAAI,IAAI;IAK7B;;OAEG;IACa,IAAI,IAAI,IAAI;IAK5B;;OAEG;IACa,KAAK,IAAI,IAAI;CAI9B;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAIzC"}

package/web-components/elements/fmcp-card.d.ts

@@ -0,0 +1,53 @@
+/**
+ * @file fmcp-card.ts
+ * @description FrontMCP Card Web Component.
+ *
+ * A custom element wrapper around the card() HTML function.
+ *
+ * @example Basic usage
+ * ```html
+ * <fmcp-card title="Welcome" subtitle="Description">
+ *   <p>Card content goes here</p>
+ * </fmcp-card>
+ * ```
+ *
+ * @example Clickable card
+ * ```html
+ * <fmcp-card clickable href="/details" title="Item">
+ *   <p>Click to view details</p>
+ * </fmcp-card>
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/elements/fmcp-card
+ */
+import { FmcpElement, type FmcpElementConfig } from '../core';
+import { type CardOptions } from '../../components/card';
+/**
+ * FmcpCard Web Component
+ */
+export declare class FmcpCard extends FmcpElement<CardOptions> {
+    protected readonly config: FmcpElementConfig<CardOptions>;
+    static get observedAttributes(): string[];
+    protected renderHtml(options: CardOptions, content: string): string;
+    set variant(value: CardOptions['variant']);
+    get variant(): CardOptions['variant'];
+    set size(value: CardOptions['size']);
+    get size(): CardOptions['size'];
+    set cardTitle(value: string | undefined);
+    get cardTitle(): string | undefined;
+    set subtitle(value: string | undefined);
+    get subtitle(): string | undefined;
+    set clickable(value: boolean);
+    get clickable(): boolean;
+    set href(value: string | undefined);
+    get href(): string | undefined;
+    set footer(value: string | undefined);
+    get footer(): string | undefined;
+    set headerActions(value: string | undefined);
+    get headerActions(): string | undefined;
+}
+/**
+ * Register the fmcp-card custom element.
+ */
+export declare function registerFmcpCard(): void;
+//# sourceMappingURL=fmcp-card.d.ts.map

package/web-components/elements/fmcp-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-card.d.ts","sourceRoot":"","sources":["../../../src/web-components/elements/fmcp-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAmC,MAAM,SAAS,CAAC;AAC/F,OAAO,EAAQ,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAG/D;;GAEG;AACH,qBAAa,QAAS,SAAQ,WAAW,CAAC,WAAW,CAAC;IACpD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAOvD;IAEF,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAKnE,IAAI,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,SAAS,CAAC,EAGxC;IACD,IAAI,OAAO,IAAI,WAAW,CAAC,SAAS,CAAC,CAEpC;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,EAGlC;IACD,IAAI,IAAI,IAAI,WAAW,CAAC,MAAM,CAAC,CAE9B;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGtC;IACD,IAAI,SAAS,IAAI,MAAM,GAAG,SAAS,CAElC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGrC;IACD,IAAI,QAAQ,IAAI,MAAM,GAAG,SAAS,CAEjC;IAED,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAG3B;IACD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGjC;IACD,IAAI,IAAI,IAAI,MAAM,GAAG,SAAS,CAE7B;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGnC;IACD,IAAI,MAAM,IAAI,MAAM,GAAG,SAAS,CAE/B;IAED,IAAI,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAG1C;IACD,IAAI,aAAa,IAAI,MAAM,GAAG,SAAS,CAEtC;CACF;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC"}

package/web-components/elements/fmcp-input.d.ts

@@ -0,0 +1,96 @@
+/**
+ * @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
+ */
+import { FmcpElement, type FmcpElementConfig } from '../core';
+import { type InputOptions } from '../../components/form';
+/**
+ * FmcpInput Web Component
+ */
+export declare class FmcpInput extends FmcpElement<InputOptions> {
+    protected readonly config: FmcpElementConfig<InputOptions>;
+    static get observedAttributes(): string[];
+    protected renderHtml(options: InputOptions, _content: string): string;
+    set name(value: string);
+    get name(): string;
+    set type(value: InputOptions['type']);
+    get type(): InputOptions['type'];
+    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: InputOptions['size']);
+    get size(): InputOptions['size'];
+    set state(value: InputOptions['state']);
+    get state(): InputOptions['state'];
+    set required(value: boolean);
+    get required(): boolean;
+    set disabled(value: boolean);
+    get disabled(): boolean;
+    set readonly(value: boolean);
+    get readonly(): boolean;
+    connectedCallback(): void;
+    private _handleInput;
+    private _handleChange;
+    /**
+     * Get current input value.
+     */
+    get value(): string;
+    /**
+     * Set input value.
+     */
+    set value(val: string);
+    /**
+     * Get validity state.
+     */
+    get validity(): ValidityState | undefined;
+    /**
+     * Check validity.
+     */
+    checkValidity(): boolean;
+    /**
+     * Report validity.
+     */
+    reportValidity(): boolean;
+    /**
+     * Focus the input.
+     */
+    focus(): void;
+    /**
+     * Blur the input.
+     */
+    blur(): void;
+    /**
+     * Select all text.
+     */
+    select(): void;
+}
+/**
+ * Register the fmcp-input custom element.
+ */
+export declare function registerFmcpInput(): void;
+//# sourceMappingURL=fmcp-input.d.ts.map

package/web-components/elements/fmcp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-input.d.ts","sourceRoot":"","sources":["../../../src/web-components/elements/fmcp-input.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAmC,MAAM,SAAS,CAAC;AAC/F,OAAO,EAAS,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGjE;;GAEG;AACH,qBAAa,SAAU,SAAQ,WAAW,CAAC,YAAY,CAAC;IACtD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,YAAY,CAAC,CAQxD;IAEF,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAwBxC;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM;IAQrE,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrB;IACD,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,EAGnC;IACD,IAAI,IAAI,IAAI,YAAY,CAAC,MAAM,CAAC,CAE/B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGlC;IACD,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,CAE9B;IAED,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGxC;IACD,IAAI,WAAW,IAAI,MAAM,GAAG,SAAS,CAEpC;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGnC;IACD,IAAI,MAAM,IAAI,MAAM,GAAG,SAAS,CAE/B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGlC;IACD,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,CAE9B;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,EAGnC;IACD,IAAI,IAAI,IAAI,YAAY,CAAC,MAAM,CAAC,CAE/B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,EAGrC;IACD,IAAI,KAAK,IAAI,YAAY,CAAC,OAAO,CAAC,CAEjC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAMQ,iBAAiB,IAAI,IAAI;IAQlC,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,aAAa;IAYrB;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IAED;;OAEG;IACH,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAMpB;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,aAAa,GAAG,SAAS,CAExC;IAED;;OAEG;IACH,aAAa,IAAI,OAAO;IAIxB;;OAEG;IACH,cAAc,IAAI,OAAO;IAIzB;;OAEG;IACM,KAAK,IAAI,IAAI;IAItB;;OAEG;IACM,IAAI,IAAI,IAAI;IAIrB;;OAEG;IACH,MAAM,IAAI,IAAI;CAGf;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,IAAI,CAIxC"}

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

@@ -0,0 +1,100 @@
+/**
+ * @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;
+//# sourceMappingURL=fmcp-select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-select.d.ts","sourceRoot":"","sources":["../../../src/web-components/elements/fmcp-select.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAmC,MAAM,SAAS,CAAC;AAC/F,OAAO,EAAU,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAuB,KAAK,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAE1F;;GAEG;AACH,qBAAa,UAAW,SAAQ,WAAW,CAAC,aAAa,CAAC;IACxD,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAOzD;IAEF,qEAAqE;IACrE,OAAO,CAAC,cAAc,CAA0B;IAEhD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAgBxC;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM;IAatE,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAGrB;IACD,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGlC;IACD,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,CAE9B;IAED,IAAI,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGxC;IACD,IAAI,WAAW,IAAI,MAAM,GAAG,SAAS,CAEpC;IAED,IAAI,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGnC;IACD,IAAI,MAAM,IAAI,MAAM,GAAG,SAAS,CAE/B;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAGlC;IACD,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,CAE9B;IAED,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,EAGpC;IACD,IAAI,IAAI,IAAI,aAAa,CAAC,MAAM,CAAC,CAEhC;IAED,IAAI,KAAK,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,EAGtC;IACD,IAAI,KAAK,IAAI,aAAa,CAAC,OAAO,CAAC,CAElC;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAG1B;IACD,IAAI,QAAQ,IAAI,OAAO,CAEtB;IAED;;OAEG;IACH,IAAI,aAAa,CAAC,KAAK,EAAE,gBAAgB,EAAE,EAG1C;IACD,IAAI,aAAa,IAAI,gBAAgB,EAAE,CAEtC;IAMQ,iBAAiB,IAAI,IAAI;IAOlC,OAAO,CAAC,aAAa;IAgBrB;;OAEG;IACH,IAAI,KAAK,IAAI,MAAM,CAGlB;IAED;;OAEG;IACH,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAMpB;IAED;;OAEG;IACH,IAAI,eAAe,IAAI,MAAM,EAAE,CAG9B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,aAAa,GAAG,SAAS,CAExC;IAED;;OAEG;IACH,aAAa,IAAI,OAAO;IAIxB;;OAEG;IACH,cAAc,IAAI,OAAO;IAIzB;;OAEG;IACM,KAAK,IAAI,IAAI;IAItB;;OAEG;IACM,IAAI,IAAI,IAAI;CAGtB;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,IAAI,CAIzC"}

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

@@ -0,0 +1,13 @@
+/**
+ * @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';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/web-components/elements/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAG/D,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGzD,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAG5D,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAG5D,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC"}

package/web-components/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * @file index.ts
+ * @description FrontMCP Web Components - Custom Elements for React/Vue/HTML.
+ *
+ * This module provides Web Components (Custom Elements) that wrap the
+ * FrontMCP UI HTML functions, allowing native usage in any framework.
+ *
+ * @example Basic usage
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Register all components
+ * registerAllComponents();
+ *
+ * // Use in HTML
+ * // <fmcp-button variant="primary">Click Me</fmcp-button>
+ * ```
+ *
+ * @example React usage
+ * ```tsx
+ * import { registerFmcpButton } from '@frontmcp/ui/web-components';
+ *
+ * registerFmcpButton();
+ *
+ * function App() {
+ *   return (
+ *     <fmcp-button variant="primary" onClick={handleClick}>
+ *       Click Me
+ *     </fmcp-button>
+ *   );
+ * }
+ * ```
+ *
+ * @example Tree-shakeable imports
+ * ```typescript
+ * import { registerFmcpButton, registerFmcpCard } from '@frontmcp/ui/web-components';
+ *
+ * // Only register the components you need
+ * registerFmcpButton();
+ * registerFmcpCard();
+ * ```
+ *
+ * @module @frontmcp/ui/web-components
+ */
+export { FmcpElement, type FmcpElementConfig, type FmcpRenderEventDetail, parseAttributeValue, kebabToCamel, camelToKebab, getObservedAttributesFromSchema, mergeAttributeIntoOptions, type ParsedAttribute, } from './core';
+export { FmcpButton, FmcpCard, FmcpAlert, FmcpBadge, FmcpInput, FmcpSelect } from './elements';
+export { registerAllComponents, registerFmcpButton, registerFmcpCard, registerFmcpAlert, registerFmcpBadge, registerFmcpInput, registerFmcpSelect, } from './register';
+export type { FmcpButtonProps, FmcpCardProps, FmcpAlertProps, FmcpBadgeProps, FmcpInputProps, FmcpSelectProps, } from './types';
+import './types';
+//# sourceMappingURL=index.d.ts.map

package/web-components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/web-components/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AAGH,OAAO,EACL,WAAW,EACX,KAAK,iBAAiB,EACtB,KAAK,qBAAqB,EAC1B,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,+BAA+B,EAC/B,yBAAyB,EACzB,KAAK,eAAe,GACrB,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAG/F,OAAO,EACL,qBAAqB,EACrB,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACnB,MAAM,YAAY,CAAC;AAGpB,YAAY,EACV,eAAe,EACf,aAAa,EACb,cAAc,EACd,cAAc,EACd,cAAc,EACd,eAAe,GAChB,MAAM,SAAS,CAAC;AAGjB,OAAO,SAAS,CAAC"}