@mfp-design-system/input 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Melissa Pula
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,88 @@
+# @mfp-design-system/input
+
+A Lit-based `<mfp-input>` web component. Works in any framework that supports custom elements.
+
+## Install
+
+```sh
+npm install @mfp-design-system/input @mfp-design-system/tokens
+```
+
+`@mfp-design-system/tokens` is an optional peer — the component has fallback values, but loading the tokens gives it the canonical look.
+
+## Usage
+
+```ts
+import '@mfp-design-system/input';
+import '@mfp-design-system/tokens/css';
+```
+
+```html
+<mfp-input label="Email" type="email" placeholder="you@example.com"></mfp-input>
+
+<mfp-input label="Password" type="password" required></mfp-input>
+
+<mfp-input label="Search" type="search">
+    <span slot="prefix">🔍</span>
+</mfp-input>
+
+<mfp-input label="Name" hint="Your full legal name"></mfp-input>
+
+<mfp-input label="Email" type="email" error="Please enter a valid email address"></mfp-input>
+
+<mfp-input size="sm" placeholder="Small"></mfp-input>
+<mfp-input size="md" placeholder="Medium"></mfp-input>
+<mfp-input size="lg" placeholder="Large"></mfp-input>
+
+<mfp-input disabled value="Can't touch this"></mfp-input>
+<mfp-input readonly value="Look but don't touch"></mfp-input>
+```
+
+## API
+
+| Attribute     | Type                                                                        | Default  | Description                                  |
+| ------------- | --------------------------------------------------------------------------- | -------- | -------------------------------------------- |
+| `type`        | `'text' \| 'email' \| 'password' \| 'number' \| 'search' \| 'tel' \| 'url'` | `'text'` | Native input type                            |
+| `size`        | `'sm' \| 'md' \| 'lg'`                                                      | `'md'`   | Sizing                                       |
+| `value`       | `string`                                                                    | `''`     | Current value (controlled)                   |
+| `name`        | `string`                                                                    | `''`     | Native form `name`                           |
+| `label`       | `string`                                                                    | `''`     | Visible label (also wires `for`/`id`)        |
+| `placeholder` | `string`                                                                    | `''`     | Placeholder text                             |
+| `hint`        | `string`                                                                    | `''`     | Helper text shown below the input            |
+| `error`       | `string`                                                                    | `''`     | Error message — also triggers invalid styles |
+| `disabled`    | `boolean`                                                                   | `false`  | Disables the input                           |
+| `readonly`    | `boolean`                                                                   | `false`  | Makes the input read-only                    |
+| `required`    | `boolean`                                                                   | `false`  | Marks as required (adds \* to label)         |
+
+### Events
+
+- `input` — fires on every keystroke. `event.detail.value` carries the current value.
+- `change` — fires on commit (blur or Enter), per native `<input>` semantics.
+
+### Slots
+
+- `prefix` — content before the input (icons, currency symbols, etc.)
+- `suffix` — content after the input (clear button, units, etc.)
+
+### Shadow parts
+
+For custom styling: `label`, `control`, `input`, `hint`, `error`.
+
+```css
+mfp-input::part(input) {
+    border-radius: 0;
+}
+mfp-input::part(label) {
+    text-transform: uppercase;
+}
+```
+
+## Framework notes
+
+- **Vue 3 / Nuxt**: set `compilerOptions.isCustomElement: (tag) => tag.startsWith('mfp-')`
+- **Angular**: add `CUSTOM_ELEMENTS_SCHEMA` to modules using the component
+- **React 19+**: works natively
+
+## Known limitations
+
+- Does not yet participate in HTML form submission (no `ElementInternals` form-association). Listen for `input`/`change` events instead. On the roadmap, will land at the same time as Button gets it.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MfpInput } from './input.js';
+export type { InputSize, InputType } from './input.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { MfpInput } from './input.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC"}

package/dist/input.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+export declare class MfpInput extends LitElement {
+    static styles: import("lit").CSSResult;
+    size: InputSize;
+    type: InputType;
+    value: string;
+    name: string;
+    label: string;
+    placeholder: string;
+    hint: string;
+    error: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    private _id;
+    private _onInput;
+    private _onChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mfp-input': MfpInput;
+    }
+}
+//# sourceMappingURL=input.d.ts.map

package/dist/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAC;AAI5F,qBACa,QAAS,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BA0HpB;IAGF,IAAI,EAAE,SAAS,CAAQ;IAGvB,IAAI,EAAE,SAAS,CAAU;IAGzB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,OAAO,CAAC,GAAG,CAAmC;IAE9C,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,SAAS,CAUf;IAEO,MAAM;CA0ClB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}

package/dist/input.js

@@ -0,0 +1,246 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let inputIdCounter = 0;
+let MfpInput = class MfpInput extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'md';
+        this.type = 'text';
+        this.value = '';
+        this.name = '';
+        this.label = '';
+        this.placeholder = '';
+        this.hint = '';
+        this.error = '';
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this._id = `mfp-input-${++inputIdCounter}`;
+        this._onInput = (e) => {
+            const input = e.target;
+            this.value = input.value;
+            this.dispatchEvent(new CustomEvent('input', {
+                bubbles: true,
+                composed: true,
+                detail: { value: input.value },
+            }));
+        };
+        this._onChange = (e) => {
+            const input = e.target;
+            this.value = input.value;
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: input.value },
+            }));
+        };
+    }
+    static { this.styles = css `
+        :host {
+            display: block;
+            font-family: var(--font-family-sans, system-ui, -apple-system, sans-serif);
+            color: var(--color-text-default, #111827);
+        }
+
+        :host([disabled]) {
+            opacity: 0.6;
+        }
+
+        label {
+            display: block;
+            font-size: var(--font-size-sm, 14px);
+            font-weight: var(--font-weight-medium, 500);
+            line-height: var(--font-line-height-tight, 1.2);
+            margin-bottom: var(--size-spacing-2, 8px);
+        }
+
+        .required {
+            color: var(--color-status-error-solid, #dc2626);
+            margin-left: var(--size-spacing-1, 4px);
+        }
+
+        .control {
+            display: flex;
+            align-items: center;
+            gap: var(--size-spacing-2, 8px);
+            background: var(--color-neutral-0, #ffffff);
+            border: 1px solid var(--color-border-default, #e5e7eb);
+            border-radius: var(--size-radius-md, 8px);
+            transition:
+                border-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
+                box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
+        }
+
+        .control:focus-within {
+            border-color: var(--color-status-info-solid, #2563eb);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+        }
+
+        .control.invalid {
+            border-color: var(--color-status-error-solid, #dc2626);
+        }
+
+        .control.invalid:focus-within {
+            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+        }
+
+        ::slotted([slot='prefix']),
+        ::slotted([slot='suffix']) {
+            display: inline-flex;
+            align-items: center;
+            color: var(--color-text-muted, #6b7280);
+            flex: none;
+        }
+
+        ::slotted([slot='prefix']) {
+            padding-left: var(--size-spacing-3, 12px);
+        }
+        ::slotted([slot='suffix']) {
+            padding-right: var(--size-spacing-3, 12px);
+        }
+
+        input {
+            flex: 1 1 auto;
+            min-width: 0;
+            background: transparent;
+            border: none;
+            outline: none;
+            font: inherit;
+            color: inherit;
+            padding: var(--size-spacing-2, 8px) var(--size-spacing-3, 12px);
+        }
+
+        input::placeholder {
+            color: var(--color-text-muted, #6b7280);
+            opacity: 1;
+        }
+
+        input:disabled,
+        input:read-only {
+            cursor: not-allowed;
+        }
+
+        /* Sizes — fall back to medium when no [size] attribute is set */
+        :host(:not([size])) input,
+        :host([size='md']) input {
+            font-size: var(--font-size-base, 16px);
+            min-height: 40px;
+        }
+        :host([size='sm']) input {
+            font-size: var(--font-size-sm, 14px);
+            min-height: 32px;
+            padding: var(--size-spacing-1, 4px) var(--size-spacing-3, 12px);
+        }
+        :host([size='lg']) input {
+            font-size: var(--font-size-lg, 18px);
+            min-height: 48px;
+            padding: var(--size-spacing-3, 12px) var(--size-spacing-4, 16px);
+        }
+
+        .hint,
+        .error {
+            margin: var(--size-spacing-2, 8px) 0 0;
+            font-size: var(--font-size-sm, 14px);
+            line-height: var(--font-line-height-tight, 1.2);
+        }
+
+        .hint {
+            color: var(--color-text-muted, #6b7280);
+        }
+
+        .error {
+            color: var(--color-status-error-solid, #dc2626);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .control {
+                transition: none;
+            }
+        }
+    `; }
+    render() {
+        const invalid = this.error.length > 0;
+        const inputId = this._id;
+        const hintId = `${inputId}-hint`;
+        const errorId = `${inputId}-error`;
+        const describedBy = invalid ? errorId : this.hint ? hintId : undefined;
+        return html `
+            ${this.label
+            ? html `<label part="label" for=${inputId}>
+                      ${this.label}
+                      ${this.required
+                ? html `<span class="required" aria-hidden="true">*</span>`
+                : nothing}
+                  </label>`
+            : nothing}
+            <div part="control" class="control ${invalid ? 'invalid' : ''}">
+                <slot name="prefix"></slot>
+                <input
+                    id=${inputId}
+                    part="input"
+                    type=${this.type}
+                    .value=${this.value}
+                    name=${this.name}
+                    placeholder=${this.placeholder}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    ?required=${this.required}
+                    aria-invalid=${invalid ? 'true' : 'false'}
+                    aria-describedby=${describedBy ?? nothing}
+                    @input=${this._onInput}
+                    @change=${this._onChange}
+                />
+                <slot name="suffix"></slot>
+            </div>
+            ${invalid
+            ? html `<p part="error" id=${errorId} class="error" role="alert">${this.error}</p>`
+            : this.hint
+                ? html `<p part="hint" id=${hintId} class="hint">${this.hint}</p>`
+                : nothing}
+        `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], MfpInput.prototype, "size", void 0);
+__decorate([
+    property()
+], MfpInput.prototype, "type", void 0);
+__decorate([
+    property()
+], MfpInput.prototype, "value", void 0);
+__decorate([
+    property()
+], MfpInput.prototype, "name", void 0);
+__decorate([
+    property()
+], MfpInput.prototype, "label", void 0);
+__decorate([
+    property()
+], MfpInput.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], MfpInput.prototype, "hint", void 0);
+__decorate([
+    property()
+], MfpInput.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MfpInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MfpInput.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MfpInput.prototype, "required", void 0);
+MfpInput = __decorate([
+    customElement('mfp-input')
+], MfpInput);
+export { MfpInput };
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../src/input.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@mfp-design-system/input",
+  "version": "0.1.0",
+  "description": "Input web component for the mfp-design-system, built with Lit.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": true,
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "customElements": "./dist/custom-elements.json",
+  "dependencies": {
+    "lit": "^3.2.1"
+  },
+  "peerDependencies": {
+    "@mfp-design-system/tokens": "^0.2.0"
+  },
+  "peerDependenciesMeta": {
+    "@mfp-design-system/tokens": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.3",
+    "@mfp-design-system/tokens": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "clean": "rimraf dist",
+    "lint": "eslint . --max-warnings=0",
+    "typecheck": "tsc --noEmit",
+    "test": "echo \"no tests yet\""
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { MfpInput } from './input.js';
+export type { InputSize, InputType } from './input.js';

package/src/input.stories.ts

@@ -0,0 +1,164 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './input.js';
+import type { InputSize, InputType } from './input.js';
+
+interface Args {
+    label: string;
+    type: InputType;
+    size: InputSize;
+    placeholder: string;
+    value: string;
+    hint: string;
+    error: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+}
+
+const meta: Meta<Args> = {
+    title: 'Components/Input',
+    component: 'mfp-input',
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        type: {
+            control: 'select',
+            options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+        },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        placeholder: { control: 'text' },
+        value: { control: 'text' },
+        hint: { control: 'text' },
+        error: { control: 'text' },
+        disabled: { control: 'boolean' },
+        readonly: { control: 'boolean' },
+        required: { control: 'boolean' },
+    },
+    args: {
+        label: 'Email',
+        type: 'email',
+        size: 'md',
+        placeholder: 'you@example.com',
+        value: '',
+        hint: '',
+        error: '',
+        disabled: false,
+        readonly: false,
+        required: false,
+    },
+    render: (args) => html`
+        <mfp-input
+            label=${args.label}
+            type=${args.type}
+            size=${args.size}
+            placeholder=${args.placeholder}
+            .value=${args.value}
+            hint=${args.hint}
+            error=${args.error}
+            ?disabled=${args.disabled}
+            ?readonly=${args.readonly}
+            ?required=${args.required}
+        ></mfp-input>
+    `,
+};
+
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export const Default: Story = {
+    args: { label: '', placeholder: 'Type here…' },
+};
+
+export const WithLabel: Story = {
+    args: { label: 'Email', placeholder: 'you@example.com' },
+};
+
+export const WithHint: Story = {
+    args: {
+        label: 'Username',
+        placeholder: 'mfreundschuh',
+        hint: '3–20 characters, letters and numbers only.',
+        type: 'text',
+    },
+};
+
+export const WithError: Story = {
+    args: {
+        label: 'Email',
+        placeholder: 'you@example.com',
+        value: 'not-an-email',
+        error: 'Please enter a valid email address.',
+    },
+};
+
+export const Required: Story = {
+    args: { label: 'Full name', placeholder: 'Melissa Pula', required: true, type: 'text' },
+};
+
+export const Sizes: Story = {
+    parameters: { controls: { disable: true } },
+    render: () => html`
+        <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
+            <mfp-input size="sm" label="Small" placeholder="sm"></mfp-input>
+            <mfp-input size="md" label="Medium" placeholder="md"></mfp-input>
+            <mfp-input size="lg" label="Large" placeholder="lg"></mfp-input>
+        </div>
+    `,
+};
+
+export const Types: Story = {
+    parameters: { controls: { disable: true } },
+    render: () => html`
+        <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
+            <mfp-input type="text" label="Text" placeholder="Plain text"></mfp-input>
+            <mfp-input type="email" label="Email" placeholder="you@example.com"></mfp-input>
+            <mfp-input type="password" label="Password" placeholder="••••••••"></mfp-input>
+            <mfp-input type="number" label="Number" placeholder="42"></mfp-input>
+            <mfp-input type="search" label="Search" placeholder="Search…"></mfp-input>
+            <mfp-input type="tel" label="Phone" placeholder="(555) 555-5555"></mfp-input>
+            <mfp-input type="url" label="URL" placeholder="https://example.com"></mfp-input>
+        </div>
+    `,
+};
+
+export const States: Story = {
+    parameters: { controls: { disable: true } },
+    render: () => html`
+        <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
+            <mfp-input label="Normal" placeholder="editable"></mfp-input>
+            <mfp-input label="Disabled" .value=${"can't touch this"} disabled></mfp-input>
+            <mfp-input
+                label="Read-only"
+                .value=${'look but don&rsquo;t touch'}
+                readonly
+            ></mfp-input>
+            <mfp-input label="Required" placeholder="must fill" required></mfp-input>
+            <mfp-input
+                label="Invalid"
+                .value=${'oops'}
+                error="Something is wrong here."
+            ></mfp-input>
+        </div>
+    `,
+};
+
+export const WithPrefix: Story = {
+    parameters: { controls: { disable: true } },
+    render: () => html`
+        <mfp-input label="Search" type="search" placeholder="Search…" style="max-width: 320px;">
+            <span slot="prefix">🔍</span>
+        </mfp-input>
+    `,
+};
+
+export const WithSuffix: Story = {
+    parameters: { controls: { disable: true } },
+    render: () => html`
+        <mfp-input label="Amount" type="number" placeholder="0.00" style="max-width: 320px;">
+            <span slot="prefix">$</span>
+            <span slot="suffix">USD</span>
+        </mfp-input>
+    `,
+};

package/src/input.ts

@@ -0,0 +1,242 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+
+let inputIdCounter = 0;
+
+@customElement('mfp-input')
+export class MfpInput extends LitElement {
+    static override styles = css`
+        :host {
+            display: block;
+            font-family: var(--font-family-sans, system-ui, -apple-system, sans-serif);
+            color: var(--color-text-default, #111827);
+        }
+
+        :host([disabled]) {
+            opacity: 0.6;
+        }
+
+        label {
+            display: block;
+            font-size: var(--font-size-sm, 14px);
+            font-weight: var(--font-weight-medium, 500);
+            line-height: var(--font-line-height-tight, 1.2);
+            margin-bottom: var(--size-spacing-2, 8px);
+        }
+
+        .required {
+            color: var(--color-status-error-solid, #dc2626);
+            margin-left: var(--size-spacing-1, 4px);
+        }
+
+        .control {
+            display: flex;
+            align-items: center;
+            gap: var(--size-spacing-2, 8px);
+            background: var(--color-neutral-0, #ffffff);
+            border: 1px solid var(--color-border-default, #e5e7eb);
+            border-radius: var(--size-radius-md, 8px);
+            transition:
+                border-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
+                box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
+        }
+
+        .control:focus-within {
+            border-color: var(--color-status-info-solid, #2563eb);
+            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
+        }
+
+        .control.invalid {
+            border-color: var(--color-status-error-solid, #dc2626);
+        }
+
+        .control.invalid:focus-within {
+            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
+        }
+
+        ::slotted([slot='prefix']),
+        ::slotted([slot='suffix']) {
+            display: inline-flex;
+            align-items: center;
+            color: var(--color-text-muted, #6b7280);
+            flex: none;
+        }
+
+        ::slotted([slot='prefix']) {
+            padding-left: var(--size-spacing-3, 12px);
+        }
+        ::slotted([slot='suffix']) {
+            padding-right: var(--size-spacing-3, 12px);
+        }
+
+        input {
+            flex: 1 1 auto;
+            min-width: 0;
+            background: transparent;
+            border: none;
+            outline: none;
+            font: inherit;
+            color: inherit;
+            padding: var(--size-spacing-2, 8px) var(--size-spacing-3, 12px);
+        }
+
+        input::placeholder {
+            color: var(--color-text-muted, #6b7280);
+            opacity: 1;
+        }
+
+        input:disabled,
+        input:read-only {
+            cursor: not-allowed;
+        }
+
+        /* Sizes — fall back to medium when no [size] attribute is set */
+        :host(:not([size])) input,
+        :host([size='md']) input {
+            font-size: var(--font-size-base, 16px);
+            min-height: 40px;
+        }
+        :host([size='sm']) input {
+            font-size: var(--font-size-sm, 14px);
+            min-height: 32px;
+            padding: var(--size-spacing-1, 4px) var(--size-spacing-3, 12px);
+        }
+        :host([size='lg']) input {
+            font-size: var(--font-size-lg, 18px);
+            min-height: 48px;
+            padding: var(--size-spacing-3, 12px) var(--size-spacing-4, 16px);
+        }
+
+        .hint,
+        .error {
+            margin: var(--size-spacing-2, 8px) 0 0;
+            font-size: var(--font-size-sm, 14px);
+            line-height: var(--font-line-height-tight, 1.2);
+        }
+
+        .hint {
+            color: var(--color-text-muted, #6b7280);
+        }
+
+        .error {
+            color: var(--color-status-error-solid, #dc2626);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .control {
+                transition: none;
+            }
+        }
+    `;
+
+    @property({ reflect: true })
+    size: InputSize = 'md';
+
+    @property()
+    type: InputType = 'text';
+
+    @property()
+    value = '';
+
+    @property()
+    name = '';
+
+    @property()
+    label = '';
+
+    @property()
+    placeholder = '';
+
+    @property()
+    hint = '';
+
+    @property()
+    error = '';
+
+    @property({ type: Boolean, reflect: true })
+    disabled = false;
+
+    @property({ type: Boolean, reflect: true })
+    readonly = false;
+
+    @property({ type: Boolean, reflect: true })
+    required = false;
+
+    private _id = `mfp-input-${++inputIdCounter}`;
+
+    private _onInput = (e: Event) => {
+        const input = e.target as HTMLInputElement;
+        this.value = input.value;
+        this.dispatchEvent(
+            new CustomEvent('input', {
+                bubbles: true,
+                composed: true,
+                detail: { value: input.value },
+            }),
+        );
+    };
+
+    private _onChange = (e: Event) => {
+        const input = e.target as HTMLInputElement;
+        this.value = input.value;
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: input.value },
+            }),
+        );
+    };
+
+    override render() {
+        const invalid = this.error.length > 0;
+        const inputId = this._id;
+        const hintId = `${inputId}-hint`;
+        const errorId = `${inputId}-error`;
+        const describedBy = invalid ? errorId : this.hint ? hintId : undefined;
+
+        return html`
+            ${this.label
+                ? html`<label part="label" for=${inputId}>
+                      ${this.label}
+                      ${this.required
+                          ? html`<span class="required" aria-hidden="true">*</span>`
+                          : nothing}
+                  </label>`
+                : nothing}
+            <div part="control" class="control ${invalid ? 'invalid' : ''}">
+                <slot name="prefix"></slot>
+                <input
+                    id=${inputId}
+                    part="input"
+                    type=${this.type}
+                    .value=${this.value}
+                    name=${this.name}
+                    placeholder=${this.placeholder}
+                    ?disabled=${this.disabled}
+                    ?readonly=${this.readonly}
+                    ?required=${this.required}
+                    aria-invalid=${invalid ? 'true' : 'false'}
+                    aria-describedby=${describedBy ?? nothing}
+                    @input=${this._onInput}
+                    @change=${this._onChange}
+                />
+                <slot name="suffix"></slot>
+            </div>
+            ${invalid
+                ? html`<p part="error" id=${errorId} class="error" role="alert">${this.error}</p>`
+                : this.hint
+                  ? html`<p part="hint" id=${hintId} class="hint">${this.hint}</p>`
+                  : nothing}
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'mfp-input': MfpInput;
+    }
+}