@frontmcp/ui 0.5.1 → 0.6.1

package/web-components/core/attribute-parser.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @file attribute-parser.ts
+ * @description Attribute parsing utilities for FrontMCP Web Components.
+ *
+ * Converts HTML attributes to typed options for component rendering.
+ * Handles boolean attributes and kebab-to-camel case conversion.
+ *
+ * @example Attribute parsing
+ * ```typescript
+ * // variant="primary" -> { variant: 'primary' }
+ * // disabled -> { disabled: true }
+ * // disabled="false" -> { disabled: false }
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/core/attribute-parser
+ */
+import type { ZodSchema } from 'zod';
+/**
+ * Result of parsing an attribute value
+ */
+export interface ParsedAttribute {
+    /** The option key (camelCase) */
+    key: string | null;
+    /** The parsed value */
+    value: unknown;
+    /** Whether this is a data attribute */
+    isData?: boolean;
+}
+/**
+ * Parse an HTML attribute into a typed option value.
+ *
+ * Attribute naming conventions:
+ * - Simple: `variant="primary"` -> `{ variant: 'primary' }`
+ * - Boolean: `disabled` -> `{ disabled: true }`
+ * - Boolean false: `disabled="false"` -> `{ disabled: false }`
+ * - Data: `data-foo="bar"` -> `{ data: { foo: 'bar' } }`
+ *
+ * @param attrName - The attribute name (kebab-case)
+ * @param value - The attribute value (null for boolean attributes)
+ * @returns Parsed attribute with key and typed value
+ */
+export declare function parseAttributeValue(attrName: string, value: string | null): ParsedAttribute;
+/**
+ * Convert kebab-case to camelCase.
+ *
+ * @param str - Kebab-case string
+ * @returns camelCase string
+ *
+ * @example
+ * kebabToCamel('full-width') // 'fullWidth'
+ * kebabToCamel('icon-before') // 'iconBefore'
+ */
+export declare function kebabToCamel(str: string): string;
+/**
+ * Convert camelCase to kebab-case.
+ *
+ * @param str - camelCase string
+ * @returns kebab-case string
+ *
+ * @example
+ * camelToKebab('fullWidth') // 'full-width'
+ * camelToKebab('iconBefore') // 'icon-before'
+ */
+export declare function camelToKebab(str: string): string;
+/**
+ * Extract observable attribute names from a Zod schema.
+ *
+ * @param schema - Zod schema to extract keys from
+ * @returns Array of kebab-case attribute names
+ */
+export declare function getObservedAttributesFromSchema<T>(schema: ZodSchema<T>): string[];
+/**
+ * Merge a parsed attribute into an options object.
+ *
+ * Handles nested objects for data attributes.
+ *
+ * @param options - Current options object
+ * @param parsed - Parsed attribute result
+ * @returns Updated options object
+ */
+export declare function mergeAttributeIntoOptions<T>(options: Partial<T>, parsed: ParsedAttribute): Partial<T>;
+//# sourceMappingURL=attribute-parser.d.ts.map

package/web-components/core/attribute-parser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute-parser.d.ts","sourceRoot":"","sources":["../../../src/web-components/core/attribute-parser.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAErC;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,iCAAiC;IACjC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,uBAAuB;IACvB,KAAK,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,mBAAmB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,eAAe,CAiD3F;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAEhD;AAED;;;;;GAKG;AACH,wBAAgB,+BAA+B,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,MAAM,EAAE,CAkBjF;AAED;;;;;;;;GAQG;AACH,wBAAgB,yBAAyB,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,eAAe,GAAG,OAAO,CAAC,CAAC,CAAC,CAkBrG"}

package/web-components/core/base-element.d.ts

@@ -0,0 +1,197 @@
+/**
+ * @file base-element.ts
+ * @description Base class for all FrontMCP Web Components.
+ *
+ * Provides a foundation for creating Custom Elements with:
+ * - Zod schema validation
+ * - Attribute-to-option mapping
+ * - Property setters for React/Vue compatibility
+ * - Batched rendering via queueMicrotask
+ * - Light DOM (no Shadow DOM) for Tailwind compatibility
+ *
+ * @example Creating a custom element
+ * ```typescript
+ * import { FmcpElement } from '@frontmcp/ui/web-components';
+ * import { ButtonOptionsSchema, type ButtonOptions } from '@frontmcp/ui/components';
+ * import { button } from '@frontmcp/ui/components';
+ *
+ * class FmcpButton extends FmcpElement<ButtonOptions> {
+ *   protected readonly config = {
+ *     name: 'button',
+ *     schema: ButtonOptionsSchema,
+ *     defaults: { variant: 'primary', size: 'md' },
+ *   };
+ *
+ *   static get observedAttributes() {
+ *     return getObservedAttributesFromSchema(ButtonOptionsSchema);
+ *   }
+ *
+ *   protected renderHtml(options: ButtonOptions, content: string): string {
+ *     return button(content, options);
+ *   }
+ * }
+ *
+ * customElements.define('fmcp-button', FmcpButton);
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/core/base-element
+ */
+import type { ZodSchema } from 'zod';
+declare const HTMLElementBase: {
+    new (): HTMLElement;
+    prototype: HTMLElement;
+};
+/**
+ * Configuration for FmcpElement subclasses
+ */
+export interface FmcpElementConfig<TOptions> {
+    /** Component name (used in error messages) */
+    name: string;
+    /** Zod schema for validation */
+    schema: ZodSchema<TOptions>;
+    /** Default option values */
+    defaults?: Partial<TOptions>;
+}
+/**
+ * Custom event detail for fmcp:render event
+ */
+export interface FmcpRenderEventDetail<TOptions = unknown> {
+    options: TOptions;
+}
+/**
+ * Base class for all FrontMCP Web Components.
+ *
+ * Key features:
+ * - **Light DOM**: Renders directly to innerHTML (no Shadow DOM)
+ * - **Attribute Parsing**: Converts HTML attributes to typed options
+ * - **Property Setters**: React/Vue can set properties directly
+ * - **Zod Validation**: Invalid options render error box
+ * - **Batched Rendering**: Multiple changes batch via queueMicrotask
+ *
+ * @typeParam TOptions - The component's options type (from Zod schema)
+ *
+ * @example Usage in HTML
+ * ```html
+ * <fmcp-button variant="primary" disabled>
+ *   Click Me
+ * </fmcp-button>
+ * ```
+ *
+ * @example Usage in React
+ * ```tsx
+ * <fmcp-button
+ *   variant="primary"
+ *   onClick={handleClick}
+ * >
+ *   Click Me
+ * </fmcp-button>
+ * ```
+ */
+export declare abstract class FmcpElement<TOptions> extends HTMLElementBase {
+    /**
+     * Configuration provided by subclass.
+     * Must include component name, Zod schema, and optional defaults.
+     */
+    protected abstract readonly config: FmcpElementConfig<TOptions>;
+    /** Internal options state */
+    protected _options: Partial<TOptions>;
+    /** Content passed as children (captured on connect) */
+    protected _content: string;
+    /** Whether component has been connected to DOM */
+    private _connected;
+    /** Whether a render is pending (for batching) */
+    private _pendingRender;
+    /** Whether initial render has completed */
+    private _initialRenderComplete;
+    /**
+     * Called when element is added to DOM.
+     * Captures content, parses attributes, and renders.
+     *
+     * Supports SSR hydration via `data-ssr` attribute:
+     * - If `data-ssr` is present, content was pre-rendered by server
+     * - Web component adopts existing content without re-rendering
+     * - This enables progressive enhancement for LLM platforms
+     */
+    connectedCallback(): void;
+    /**
+     * Called when element is removed from DOM.
+     */
+    disconnectedCallback(): void;
+    /**
+     * Called when an observed attribute changes.
+     * Updates options and schedules re-render.
+     */
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    /**
+     * Set all options at once (React pattern).
+     *
+     * @example
+     * ```typescript
+     * const el = document.querySelector('fmcp-button');
+     * el.options = { variant: 'danger', size: 'lg' };
+     * ```
+     */
+    set options(value: Partial<TOptions>);
+    /**
+     * Get current options.
+     */
+    get options(): Partial<TOptions>;
+    /**
+     * Parse all current attributes into options.
+     */
+    private _parseAttributes;
+    /**
+     * Update a single option from an attribute change.
+     */
+    private _updateOptionFromAttribute;
+    /**
+     * Schedule a render on next microtask.
+     * Batches multiple attribute/property changes.
+     */
+    protected _scheduleRender(): void;
+    /**
+     * Perform the actual render.
+     * Validates options and updates innerHTML.
+     */
+    private _render;
+    /**
+     * Generate HTML for the component.
+     * Subclasses must implement this to render their specific HTML.
+     *
+     * @param options - Validated options
+     * @param content - Original innerHTML content
+     * @returns HTML string to render
+     */
+    protected abstract renderHtml(options: TOptions, content: string): string;
+    /**
+     * Force an immediate re-render.
+     *
+     * @example
+     * ```typescript
+     * el.options = { loading: true };
+     * el.refresh(); // Force immediate render
+     * ```
+     */
+    refresh(): void;
+    /**
+     * Get the first child element (the actual rendered component).
+     *
+     * @typeParam T - Expected element type
+     * @returns The first child element or null
+     *
+     * @example
+     * ```typescript
+     * const button = el.getInnerElement<HTMLButtonElement>();
+     * button?.focus();
+     * ```
+     */
+    getInnerElement<T extends Element = Element>(): T | null;
+    /**
+     * Update content and re-render.
+     *
+     * @param content - New content string
+     */
+    setContent(content: string): void;
+}
+export {};
+//# sourceMappingURL=base-element.d.ts.map

package/web-components/core/base-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-element.d.ts","sourceRoot":"","sources":["../../../src/web-components/core/base-element.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAOrC,QAAA,MAAM,eAAe;;;CAWoB,CAAC;AAE1C;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,QAAQ;IACzC,8CAA8C;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,gCAAgC;IAChC,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC5B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,QAAQ,GAAG,OAAO;IACvD,OAAO,EAAE,QAAQ,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,8BAAsB,WAAW,CAAC,QAAQ,CAAE,SAAQ,eAAe;IACjE;;;OAGG;IACH,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAEhE,6BAA6B;IAC7B,SAAS,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAM;IAE3C,uDAAuD;IACvD,SAAS,CAAC,QAAQ,SAAM;IAExB,kDAAkD;IAClD,OAAO,CAAC,UAAU,CAAS;IAE3B,iDAAiD;IACjD,OAAO,CAAC,cAAc,CAAS;IAE/B,2CAA2C;IAC3C,OAAO,CAAC,sBAAsB,CAAS;IAMvC;;;;;;;;OAQG;IACH,iBAAiB,IAAI,IAAI;IA8BzB;;OAEG;IACH,oBAAoB,IAAI,IAAI;IAI5B;;;OAGG;IACH,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAe9F;;;;;;;;OAQG;IACH,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,EAGnC;IAED;;OAEG;IACH,IAAI,OAAO,IAAI,OAAO,CAAC,QAAQ,CAAC,CAE/B;IAMD;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;OAEG;IACH,OAAO,CAAC,0BAA0B;IASlC;;;OAGG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAYjC;;;OAGG;IACH,OAAO,CAAC,OAAO;IAyCf;;;;;;;OAOG;IACH,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAMzE;;;;;;;;OAQG;IACI,OAAO,IAAI,IAAI;IAMtB;;;;;;;;;;;OAWG;IACI,eAAe,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,KAAK,CAAC,GAAG,IAAI;IAI/D;;;;OAIG;IACI,UAAU,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;CAIzC"}

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

@@ -0,0 +1,9 @@
+/**
+ * @file core/index.ts
+ * @description Core utilities for FrontMCP Web Components.
+ *
+ * @module @frontmcp/ui/web-components/core
+ */
+export { FmcpElement, type FmcpElementConfig, type FmcpRenderEventDetail } from './base-element';
+export { parseAttributeValue, kebabToCamel, camelToKebab, getObservedAttributesFromSchema, mergeAttributeIntoOptions, type ParsedAttribute, } from './attribute-parser';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/web-components/core/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,WAAW,EAAE,KAAK,iBAAiB,EAAE,KAAK,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAEjG,OAAO,EACL,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,+BAA+B,EAC/B,yBAAyB,EACzB,KAAK,eAAe,GACrB,MAAM,oBAAoB,CAAC"}

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"}