@frontmcp/ui 0.5.0

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

@@ -0,0 +1,124 @@
+/**
+ * @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 With HTMX
+ * ```html
+ * <fmcp-button hx-post="/api/submit" hx-target="#result">
+ *   Submit
+ * </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'
+ * - `hx-get`, `hx-post`, etc. - HTMX attributes
+ *
+ * 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;

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

@@ -0,0 +1,233 @@
+"use strict";
+/**
+ * @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 With HTMX
+ * ```html
+ * <fmcp-button hx-post="/api/submit" hx-target="#result">
+ *   Submit
+ * </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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FmcpButton = void 0;
+exports.registerFmcpButton = registerFmcpButton;
+const core_1 = require("../core");
+const button_1 = require("../../components/button");
+const button_schema_1 = require("../../components/button.schema");
+/**
+ * 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'
+ * - `hx-get`, `hx-post`, etc. - HTMX attributes
+ *
+ * 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
+ */
+class FmcpButton extends core_1.FmcpElement {
+    config = {
+        name: 'button',
+        schema: button_schema_1.ButtonOptionsSchema,
+        defaults: {
+            variant: 'primary',
+            size: 'md',
+            type: 'button',
+        },
+    };
+    /**
+     * Attributes to observe for changes.
+     */
+    static get observedAttributes() {
+        return (0, core_1.getObservedAttributesFromSchema)(button_schema_1.ButtonOptionsSchema);
+    }
+    /**
+     * Render the button HTML using the button() function.
+     */
+    renderHtml(options, content) {
+        return (0, button_1.button)(content, options);
+    }
+    // ============================================
+    // Property Setters (Individual Props)
+    // ============================================
+    set variant(value) {
+        this._options.variant = value;
+        this._scheduleRender();
+    }
+    get variant() {
+        return this._options.variant;
+    }
+    set size(value) {
+        this._options.size = value;
+        this._scheduleRender();
+    }
+    get size() {
+        return this._options.size;
+    }
+    set type(value) {
+        this._options.type = value;
+        this._scheduleRender();
+    }
+    get type() {
+        return this._options.type;
+    }
+    set disabled(value) {
+        this._options.disabled = value;
+        this._scheduleRender();
+    }
+    get disabled() {
+        return this._options.disabled ?? false;
+    }
+    set loading(value) {
+        this._options.loading = value;
+        this._scheduleRender();
+    }
+    get loading() {
+        return this._options.loading ?? false;
+    }
+    set fullWidth(value) {
+        this._options.fullWidth = value;
+        this._scheduleRender();
+    }
+    get fullWidth() {
+        return this._options.fullWidth ?? false;
+    }
+    set iconOnly(value) {
+        this._options.iconOnly = value;
+        this._scheduleRender();
+    }
+    get iconOnly() {
+        return this._options.iconOnly ?? false;
+    }
+    set iconBefore(value) {
+        this._options.iconBefore = value;
+        this._scheduleRender();
+    }
+    get iconBefore() {
+        return this._options.iconBefore;
+    }
+    set iconAfter(value) {
+        this._options.iconAfter = value;
+        this._scheduleRender();
+    }
+    get iconAfter() {
+        return this._options.iconAfter;
+    }
+    set href(value) {
+        this._options.href = value;
+        this._scheduleRender();
+    }
+    get href() {
+        return this._options.href;
+    }
+    set buttonAriaLabel(value) {
+        this._options.ariaLabel = value;
+        this._scheduleRender();
+    }
+    get buttonAriaLabel() {
+        return this._options.ariaLabel;
+    }
+    // ============================================
+    // Event Forwarding
+    // ============================================
+    connectedCallback() {
+        super.connectedCallback();
+        // Forward click events from inner button
+        this.addEventListener('click', this._handleClick.bind(this));
+    }
+    _handleClick(e) {
+        // Only dispatch if click originated from inner button
+        const innerButton = this.getInnerElement();
+        if (innerButton && (e.target === innerButton || innerButton.contains(e.target))) {
+            this.dispatchEvent(new CustomEvent('fmcp:click', {
+                bubbles: true,
+                detail: { options: this.options },
+            }));
+        }
+    }
+    // ============================================
+    // Public API
+    // ============================================
+    /**
+     * Focus the inner button element.
+     */
+    focus() {
+        const inner = this.getInnerElement();
+        inner?.focus();
+    }
+    /**
+     * Blur the inner button element.
+     */
+    blur() {
+        const inner = this.getInnerElement();
+        inner?.blur();
+    }
+    /**
+     * Click the inner button programmatically.
+     */
+    click() {
+        const inner = this.getInnerElement();
+        inner?.click();
+    }
+}
+exports.FmcpButton = FmcpButton;
+/**
+ * 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>
+ * ```
+ */
+function registerFmcpButton() {
+    if (typeof customElements !== 'undefined' && !customElements.get('fmcp-button')) {
+        customElements.define('fmcp-button', FmcpButton);
+    }
+}
+//# sourceMappingURL=fmcp-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-button.js","sourceRoot":"","sources":["../../../../src/web-components/elements/fmcp-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file fmcp-button.ts\n * @description FrontMCP Button Web Component.\n *\n * A custom element wrapper around the button() HTML function.\n * Works natively in React, Vue, Angular, and plain HTML.\n *\n * @example Basic usage\n * ```html\n * <fmcp-button>Click Me</fmcp-button>\n * <fmcp-button variant=\"danger\">Delete</fmcp-button>\n * <fmcp-button disabled>Disabled</fmcp-button>\n * ```\n *\n * @example With HTMX\n * ```html\n * <fmcp-button hx-post=\"/api/submit\" hx-target=\"#result\">\n *   Submit\n * </fmcp-button>\n * ```\n *\n * @example In React\n * ```tsx\n * import { registerFmcpButton } from '@frontmcp/ui/web-components';\n * registerFmcpButton();\n *\n * function App() {\n *   return (\n *     <fmcp-button variant=\"primary\" onClick={handleClick}>\n *       Click Me\n *     </fmcp-button>\n *   );\n * }\n * ```\n *\n * @module @frontmcp/ui/web-components/elements/fmcp-button\n */\n\nimport { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core';\nimport { button, type ButtonOptions } from '../../components/button';\nimport { ButtonOptionsSchema } from '../../components/button.schema';\n\n/**\n * FmcpButton Web Component\n *\n * Attributes:\n * - `variant` - 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'link'\n * - `size` - 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n * - `type` - 'button' | 'submit' | 'reset'\n * - `disabled` - boolean (presence = true)\n * - `loading` - boolean\n * - `full-width` - boolean\n * - `icon-only` - boolean\n * - `href` - URL for link-style buttons\n * - `target` - '_blank' | '_self'\n * - `hx-get`, `hx-post`, etc. - HTMX attributes\n *\n * Properties (for React/Vue):\n * - All attributes can be set as properties\n * - `options` - Set all options at once\n *\n * Events:\n * - `fmcp:render` - Fired after render with { options } detail\n * - `fmcp:click` - Fired on button click with { options } detail\n */\nexport class FmcpButton extends FmcpElement<ButtonOptions> {\n  protected readonly config: FmcpElementConfig<ButtonOptions> = {\n    name: 'button',\n    schema: ButtonOptionsSchema,\n    defaults: {\n      variant: 'primary',\n      size: 'md',\n      type: 'button',\n    },\n  };\n\n  /**\n   * Attributes to observe for changes.\n   */\n  static get observedAttributes(): string[] {\n    return getObservedAttributesFromSchema(ButtonOptionsSchema);\n  }\n\n  /**\n   * Render the button HTML using the button() function.\n   */\n  protected renderHtml(options: ButtonOptions, content: string): string {\n    return button(content, options);\n  }\n\n  // ============================================\n  // Property Setters (Individual Props)\n  // ============================================\n\n  set variant(value: ButtonOptions['variant']) {\n    this._options.variant = value;\n    this._scheduleRender();\n  }\n  get variant(): ButtonOptions['variant'] {\n    return this._options.variant;\n  }\n\n  set size(value: ButtonOptions['size']) {\n    this._options.size = value;\n    this._scheduleRender();\n  }\n  get size(): ButtonOptions['size'] {\n    return this._options.size;\n  }\n\n  set type(value: ButtonOptions['type']) {\n    this._options.type = value;\n    this._scheduleRender();\n  }\n  get type(): ButtonOptions['type'] {\n    return this._options.type;\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 loading(value: boolean) {\n    this._options.loading = value;\n    this._scheduleRender();\n  }\n  get loading(): boolean {\n    return this._options.loading ?? false;\n  }\n\n  set fullWidth(value: boolean) {\n    this._options.fullWidth = value;\n    this._scheduleRender();\n  }\n  get fullWidth(): boolean {\n    return this._options.fullWidth ?? false;\n  }\n\n  set iconOnly(value: boolean) {\n    this._options.iconOnly = value;\n    this._scheduleRender();\n  }\n  get iconOnly(): boolean {\n    return this._options.iconOnly ?? false;\n  }\n\n  set iconBefore(value: string | undefined) {\n    this._options.iconBefore = value;\n    this._scheduleRender();\n  }\n  get iconBefore(): string | undefined {\n    return this._options.iconBefore;\n  }\n\n  set iconAfter(value: string | undefined) {\n    this._options.iconAfter = value;\n    this._scheduleRender();\n  }\n  get iconAfter(): string | undefined {\n    return this._options.iconAfter;\n  }\n\n  set href(value: string | undefined) {\n    this._options.href = value;\n    this._scheduleRender();\n  }\n  get href(): string | undefined {\n    return this._options.href;\n  }\n\n  set buttonAriaLabel(value: string | undefined) {\n    this._options.ariaLabel = value;\n    this._scheduleRender();\n  }\n  get buttonAriaLabel(): string | undefined {\n    return this._options.ariaLabel;\n  }\n\n  // ============================================\n  // Event Forwarding\n  // ============================================\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Forward click events from inner button\n    this.addEventListener('click', this._handleClick.bind(this));\n  }\n\n  private _handleClick(e: Event): void {\n    // Only dispatch if click originated from inner button\n    const innerButton = this.getInnerElement<HTMLButtonElement>();\n    if (innerButton && (e.target === innerButton || innerButton.contains(e.target as Node))) {\n      this.dispatchEvent(\n        new CustomEvent('fmcp:click', {\n          bubbles: true,\n          detail: { options: this.options },\n        }),\n      );\n    }\n  }\n\n  // ============================================\n  // Public API\n  // ============================================\n\n  /**\n   * Focus the inner button element.\n   */\n  public override focus(): void {\n    const inner = this.getInnerElement<HTMLButtonElement>();\n    inner?.focus();\n  }\n\n  /**\n   * Blur the inner button element.\n   */\n  public override blur(): void {\n    const inner = this.getInnerElement<HTMLButtonElement>();\n    inner?.blur();\n  }\n\n  /**\n   * Click the inner button programmatically.\n   */\n  public override click(): void {\n    const inner = this.getInnerElement<HTMLButtonElement>();\n    inner?.click();\n  }\n}\n\n/**\n * Register the fmcp-button custom element.\n *\n * @example\n * ```typescript\n * import { registerFmcpButton } from '@frontmcp/ui/web-components';\n *\n * // Register once on app startup\n * registerFmcpButton();\n *\n * // Then use in HTML\n * // <fmcp-button variant=\"primary\">Click</fmcp-button>\n * ```\n */\nexport function registerFmcpButton(): void {\n  if (typeof customElements !== 'undefined' && !customElements.get('fmcp-button')) {\n    customElements.define('fmcp-button', FmcpButton);\n  }\n}\n"]}

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

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

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

@@ -0,0 +1,115 @@
+"use strict";
+/**
+ * @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
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FmcpCard = void 0;
+exports.registerFmcpCard = registerFmcpCard;
+const core_1 = require("../core");
+const card_1 = require("../../components/card");
+const card_schema_1 = require("../../components/card.schema");
+/**
+ * FmcpCard Web Component
+ */
+class FmcpCard extends core_1.FmcpElement {
+    config = {
+        name: 'card',
+        schema: card_schema_1.CardOptionsSchema,
+        defaults: {
+            variant: 'default',
+            size: 'md',
+        },
+    };
+    static get observedAttributes() {
+        return (0, core_1.getObservedAttributesFromSchema)(card_schema_1.CardOptionsSchema);
+    }
+    renderHtml(options, content) {
+        return (0, card_1.card)(content, options);
+    }
+    // Property setters
+    set variant(value) {
+        this._options.variant = value;
+        this._scheduleRender();
+    }
+    get variant() {
+        return this._options.variant;
+    }
+    set size(value) {
+        this._options.size = value;
+        this._scheduleRender();
+    }
+    get size() {
+        return this._options.size;
+    }
+    set cardTitle(value) {
+        this._options.title = value;
+        this._scheduleRender();
+    }
+    get cardTitle() {
+        return this._options.title;
+    }
+    set subtitle(value) {
+        this._options.subtitle = value;
+        this._scheduleRender();
+    }
+    get subtitle() {
+        return this._options.subtitle;
+    }
+    set clickable(value) {
+        this._options.clickable = value;
+        this._scheduleRender();
+    }
+    get clickable() {
+        return this._options.clickable ?? false;
+    }
+    set href(value) {
+        this._options.href = value;
+        this._scheduleRender();
+    }
+    get href() {
+        return this._options.href;
+    }
+    set footer(value) {
+        this._options.footer = value;
+        this._scheduleRender();
+    }
+    get footer() {
+        return this._options.footer;
+    }
+    set headerActions(value) {
+        this._options.headerActions = value;
+        this._scheduleRender();
+    }
+    get headerActions() {
+        return this._options.headerActions;
+    }
+}
+exports.FmcpCard = FmcpCard;
+/**
+ * Register the fmcp-card custom element.
+ */
+function registerFmcpCard() {
+    if (typeof customElements !== 'undefined' && !customElements.get('fmcp-card')) {
+        customElements.define('fmcp-card', FmcpCard);
+    }
+}
+//# sourceMappingURL=fmcp-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fmcp-card.js","sourceRoot":"","sources":["../../../../src/web-components/elements/fmcp-card.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file fmcp-card.ts\n * @description FrontMCP Card Web Component.\n *\n * A custom element wrapper around the card() HTML function.\n *\n * @example Basic usage\n * ```html\n * <fmcp-card title=\"Welcome\" subtitle=\"Description\">\n *   <p>Card content goes here</p>\n * </fmcp-card>\n * ```\n *\n * @example Clickable card\n * ```html\n * <fmcp-card clickable href=\"/details\" title=\"Item\">\n *   <p>Click to view details</p>\n * </fmcp-card>\n * ```\n *\n * @module @frontmcp/ui/web-components/elements/fmcp-card\n */\n\nimport { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core';\nimport { card, type CardOptions } from '../../components/card';\nimport { CardOptionsSchema } from '../../components/card.schema';\n\n/**\n * FmcpCard Web Component\n */\nexport class FmcpCard extends FmcpElement<CardOptions> {\n  protected readonly config: FmcpElementConfig<CardOptions> = {\n    name: 'card',\n    schema: CardOptionsSchema,\n    defaults: {\n      variant: 'default',\n      size: 'md',\n    },\n  };\n\n  static get observedAttributes(): string[] {\n    return getObservedAttributesFromSchema(CardOptionsSchema);\n  }\n\n  protected renderHtml(options: CardOptions, content: string): string {\n    return card(content, options);\n  }\n\n  // Property setters\n  set variant(value: CardOptions['variant']) {\n    this._options.variant = value;\n    this._scheduleRender();\n  }\n  get variant(): CardOptions['variant'] {\n    return this._options.variant;\n  }\n\n  set size(value: CardOptions['size']) {\n    this._options.size = value;\n    this._scheduleRender();\n  }\n  get size(): CardOptions['size'] {\n    return this._options.size;\n  }\n\n  set cardTitle(value: string | undefined) {\n    this._options.title = value;\n    this._scheduleRender();\n  }\n  get cardTitle(): string | undefined {\n    return this._options.title;\n  }\n\n  set subtitle(value: string | undefined) {\n    this._options.subtitle = value;\n    this._scheduleRender();\n  }\n  get subtitle(): string | undefined {\n    return this._options.subtitle;\n  }\n\n  set clickable(value: boolean) {\n    this._options.clickable = value;\n    this._scheduleRender();\n  }\n  get clickable(): boolean {\n    return this._options.clickable ?? false;\n  }\n\n  set href(value: string | undefined) {\n    this._options.href = value;\n    this._scheduleRender();\n  }\n  get href(): string | undefined {\n    return this._options.href;\n  }\n\n  set footer(value: string | undefined) {\n    this._options.footer = value;\n    this._scheduleRender();\n  }\n  get footer(): string | undefined {\n    return this._options.footer;\n  }\n\n  set headerActions(value: string | undefined) {\n    this._options.headerActions = value;\n    this._scheduleRender();\n  }\n  get headerActions(): string | undefined {\n    return this._options.headerActions;\n  }\n}\n\n/**\n * Register the fmcp-card custom element.\n */\nexport function registerFmcpCard(): void {\n  if (typeof customElements !== 'undefined' && !customElements.get('fmcp-card')) {\n    customElements.define('fmcp-card', FmcpCard);\n  }\n}\n"]}

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

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