@mfp-design-system/select 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,77 @@
+# @mfp-design-system/select
+
+A Lit-based `<mfp-select>` web component that wraps a native `<select>` element.
+
+## Why a native wrapper?
+
+Native `<select>` gets you full keyboard a11y, screen reader support, and mobile-native pickers (iOS wheel, Android sheet) for free. Only the visual chrome (border, focus ring, chevron) is custom. A full custom-combobox implementation is on the roadmap if/when you need things like search-as-you-type or custom option rendering.
+
+## Install
+
+```sh
+npm install @mfp-design-system/select @mfp-design-system/tokens
+```
+
+## Usage
+
+```ts
+import '@mfp-design-system/select';
+import '@mfp-design-system/tokens/css';
+```
+
+```html
+<mfp-select label="Color" placeholder="Pick one…">
+    <option value="red">Red</option>
+    <option value="green">Green</option>
+    <option value="blue">Blue</option>
+</mfp-select>
+
+<mfp-select label="Fruit" placeholder="Choose…">
+    <optgroup label="Citrus">
+        <option value="orange">Orange</option>
+        <option value="lemon">Lemon</option>
+    </optgroup>
+    <optgroup label="Berries">
+        <option value="strawberry">Strawberry</option>
+    </optgroup>
+</mfp-select>
+```
+
+Children projected into the default slot (`<option>` and `<optgroup>` elements) are forwarded into the real `<select>` inside shadow DOM. The slot itself is hidden.
+
+## API
+
+| Attribute     | Type                   | Default | Description                                                  |
+| ------------- | ---------------------- | ------- | ------------------------------------------------------------ |
+| `size`        | `'sm' \| 'md' \| 'lg'` | `'md'`  | Sizing                                                       |
+| `value`       | `string`               | `''`    | Current value (controlled)                                   |
+| `name`        | `string`               | `''`    | Native form `name`                                           |
+| `label`       | `string`               | `''`    | Visible label (auto-wired with `for`/`id`)                   |
+| `placeholder` | `string`               | `''`    | Renders a disabled, hidden first option as the initial value |
+| `hint`        | `string`               | `''`    | Helper text shown below the select                           |
+| `error`       | `string`               | `''`    | Error message — also triggers invalid styles                 |
+| `disabled`    | `boolean`              | `false` | Disables the select                                          |
+| `required`    | `boolean`              | `false` | Marks as required (adds \* to label)                         |
+
+### Events
+
+- `change` — fires when the value changes. `event.detail.value` carries the new value.
+
+### Shadow parts
+
+For custom styling: `label`, `control`, `select`, `chevron`, `hint`, `error`.
+
+```css
+mfp-select::part(chevron) {
+    color: var(--color-status-info-solid);
+}
+```
+
+## Framework notes
+
+Same as the rest of the suite — Vue/Nuxt need `isCustomElement`, Angular needs `CUSTOM_ELEMENTS_SCHEMA`.
+
+## Known limitations
+
+- Single-select only. Multi-select via the native `<select multiple>` UI is uglier than most teams want — multi-select is on the roadmap as a separate component (`<mfp-multi-select>`) with a checkbox-list pattern.
+- Form submission via native form: the inner `<select>` is in shadow DOM, so it does not participate in native form submission yet. Listen for `change` events; full `ElementInternals` form-association is on the roadmap for all form components.

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { MfpSelect } from './select.js';
+export type { SelectSize } from './select.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,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,2 @@
+export { MfpSelect } from './select.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,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/select.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+export type SelectSize = 'sm' | 'md' | 'lg';
+/**
+ * `<mfp-select>` wraps a native `<select>` element. Children projected into
+ * the default slot are forwarded into the real select — usage:
+ *
+ *   <mfp-select label="Color">
+ *     <option value="red">Red</option>
+ *     <option value="green">Green</option>
+ *   </mfp-select>
+ *
+ * Using the native control means full keyboard a11y, screen reader support,
+ * and mobile-native pickers come for free. The visual chrome (border, focus
+ * ring, chevron) is styled via shadow CSS using design tokens.
+ */
+export declare class MfpSelect extends LitElement {
+    static styles: import("lit").CSSResult;
+    size: SelectSize;
+    value: string;
+    name: string;
+    label: string;
+    placeholder: string;
+    hint: string;
+    error: string;
+    disabled: boolean;
+    required: boolean;
+    private _id;
+    private _selectEl;
+    private _onChange;
+    /** Move slotted <option> elements into the real <select> when they change. */
+    private _onSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'mfp-select': MfpSelect;
+    }
+}
+//# sourceMappingURL=select.d.ts.map

package/dist/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAI5C;;;;;;;;;;;;GAYG;AACH,qBACa,SAAU,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BA2HpB;IAGF,IAAI,EAAE,UAAU,CAAQ;IAGxB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB,OAAO,CAAC,GAAG,CAAqC;IAGhD,OAAO,CAAC,SAAS,CAAqB;IAEtC,OAAO,CAAC,SAAS,CAUf;IAEF,8EAA8E;IAC9E,OAAO,CAAC,aAAa,CAyBnB;IAEO,MAAM;CA4DlB;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}

package/dist/select.js

@@ -0,0 +1,287 @@
+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, query } from 'lit/decorators.js';
+let selectIdCounter = 0;
+/**
+ * `<mfp-select>` wraps a native `<select>` element. Children projected into
+ * the default slot are forwarded into the real select — usage:
+ *
+ *   <mfp-select label="Color">
+ *     <option value="red">Red</option>
+ *     <option value="green">Green</option>
+ *   </mfp-select>
+ *
+ * Using the native control means full keyboard a11y, screen reader support,
+ * and mobile-native pickers come for free. The visual chrome (border, focus
+ * ring, chevron) is styled via shadow CSS using design tokens.
+ */
+let MfpSelect = class MfpSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.size = 'md';
+        this.value = '';
+        this.name = '';
+        this.label = '';
+        this.placeholder = '';
+        this.hint = '';
+        this.error = '';
+        this.disabled = false;
+        this.required = false;
+        this._id = `mfp-select-${++selectIdCounter}`;
+        this._onChange = (e) => {
+            const select = e.target;
+            this.value = select.value;
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: select.value },
+            }));
+        };
+        /** Move slotted <option> elements into the real <select> when they change. */
+        this._onSlotChange = (e) => {
+            const slot = e.target;
+            const select = this._selectEl;
+            if (!select)
+                return;
+            const currentValue = this.value;
+            const optionLikeNodes = slot
+                .assignedNodes({ flatten: true })
+                .filter((n) => n.nodeType === Node.ELEMENT_NODE &&
+                (n.tagName === 'OPTION' ||
+                    n.tagName === 'OPTGROUP'));
+            // Replace existing real options (other than the placeholder, which lives in the template)
+            const placeholder = select.querySelector('option[data-mfp-placeholder]');
+            select.textContent = '';
+            if (placeholder)
+                select.appendChild(placeholder);
+            for (const node of optionLikeNodes) {
+                select.appendChild(node.cloneNode(true));
+            }
+            // Restore the value (reflect attribute → DOM value)
+            select.value = currentValue;
+        };
+    }
+    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 {
+            position: relative;
+            display: flex;
+            align-items: center;
+            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);
+        }
+
+        select {
+            flex: 1 1 auto;
+            min-width: 0;
+            appearance: none;
+            -webkit-appearance: none;
+            background: transparent;
+            border: none;
+            outline: none;
+            font: inherit;
+            color: inherit;
+            cursor: pointer;
+            padding: var(--size-spacing-2, 8px) var(--size-spacing-9, 36px)
+                var(--size-spacing-2, 8px) var(--size-spacing-3, 12px);
+        }
+
+        select:disabled {
+            cursor: not-allowed;
+        }
+
+        .chevron {
+            position: absolute;
+            right: var(--size-spacing-3, 12px);
+            top: 50%;
+            transform: translateY(-50%);
+            width: 1em;
+            height: 1em;
+            color: var(--color-text-muted, #6b7280);
+            pointer-events: none;
+        }
+
+        /* Sizes — fall back to medium when no [size] attribute is set */
+        :host(:not([size])) select,
+        :host([size='md']) select {
+            font-size: var(--font-size-base, 16px);
+            min-height: 40px;
+        }
+        :host([size='sm']) select {
+            font-size: var(--font-size-sm, 14px);
+            min-height: 32px;
+            padding: var(--size-spacing-1, 4px) var(--size-spacing-9, 36px)
+                var(--size-spacing-1, 4px) var(--size-spacing-3, 12px);
+        }
+        :host([size='lg']) select {
+            font-size: var(--font-size-lg, 18px);
+            min-height: 48px;
+            padding: var(--size-spacing-3, 12px) var(--size-spacing-10, 40px)
+                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);
+        }
+
+        /* Hide the slot — its children get moved into the native select */
+        .options-source {
+            display: none;
+        }
+
+        @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' : ''}">
+                <select
+                    id=${inputId}
+                    part="select"
+                    .value=${this.value}
+                    name=${this.name}
+                    ?disabled=${this.disabled}
+                    ?required=${this.required}
+                    aria-invalid=${invalid ? 'true' : 'false'}
+                    aria-describedby=${describedBy ?? nothing}
+                    @change=${this._onChange}
+                >
+                    ${this.placeholder
+            ? html `<option value="" disabled selected hidden data-mfp-placeholder>
+                              ${this.placeholder}
+                          </option>`
+            : nothing}
+                </select>
+                <svg
+                    class="chevron"
+                    part="chevron"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    aria-hidden="true"
+                >
+                    <path
+                        d="M4 6l4 4 4-4"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </div>
+            <div class="options-source">
+                <slot @slotchange=${this._onSlotChange}></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 })
+], MfpSelect.prototype, "size", void 0);
+__decorate([
+    property()
+], MfpSelect.prototype, "value", void 0);
+__decorate([
+    property()
+], MfpSelect.prototype, "name", void 0);
+__decorate([
+    property()
+], MfpSelect.prototype, "label", void 0);
+__decorate([
+    property()
+], MfpSelect.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], MfpSelect.prototype, "hint", void 0);
+__decorate([
+    property()
+], MfpSelect.prototype, "error", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MfpSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MfpSelect.prototype, "required", void 0);
+__decorate([
+    query('select')
+], MfpSelect.prototype, "_selectEl", void 0);
+MfpSelect = __decorate([
+    customElement('mfp-select')
+], MfpSelect);
+export { MfpSelect };
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

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

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@mfp-design-system/select",
+  "version": "0.1.0",
+  "description": "Select dropdown 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",
+  "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 { MfpSelect } from './select.js';
+export type { SelectSize } from './select.js';

package/src/select.stories.ts

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './select.js';
+import type { SelectSize } from './select.js';
+
+interface Args {
+    label: string;
+    size: SelectSize;
+    placeholder: string;
+    value: string;
+    hint: string;
+    error: string;
+    disabled: boolean;
+    required: boolean;
+}
+
+const meta: Meta<Args> = {
+    title: 'Components/Select',
+    component: 'mfp-select',
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+        size: { control: 'select', options: ['sm', 'md', 'lg'] },
+        placeholder: { control: 'text' },
+        value: { control: 'text' },
+        hint: { control: 'text' },
+        error: { control: 'text' },
+        disabled: { control: 'boolean' },
+        required: { control: 'boolean' },
+    },
+    args: {
+        label: 'Favorite color',
+        size: 'md',
+        placeholder: 'Pick one…',
+        value: '',
+        hint: '',
+        error: '',
+        disabled: false,
+        required: false,
+    },
+    render: (args) => html`
+        <mfp-select
+            label=${args.label}
+            size=${args.size}
+            placeholder=${args.placeholder}
+            .value=${args.value}
+            hint=${args.hint}
+            error=${args.error}
+            ?disabled=${args.disabled}
+            ?required=${args.required}
+            style="max-width: 320px;"
+        >
+            <option value="red">Red</option>
+            <option value="orange">Orange</option>
+            <option value="yellow">Yellow</option>
+            <option value="green">Green</option>
+            <option value="blue">Blue</option>
+            <option value="purple">Purple</option>
+        </mfp-select>
+    `,
+};
+
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export const Default: Story = {};
+
+export const WithHint: Story = {
+    args: { hint: 'Choose the color used for accents.' },
+};
+
+export const WithError: Story = {
+    args: { error: 'Please pick a color.' },
+};
+
+export const Preselected: Story = {
+    args: { value: 'green', placeholder: '' },
+};
+
+export const Required: Story = {
+    args: { required: true },
+};
+
+export const Sizes: Story = {
+    parameters: { controls: { disable: true } },
+    render: () => html`
+        <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px;">
+            <mfp-select size="sm" label="Small" placeholder="sm">
+                <option>One</option>
+                <option>Two</option>
+            </mfp-select>
+            <mfp-select size="md" label="Medium" placeholder="md">
+                <option>One</option>
+                <option>Two</option>
+            </mfp-select>
+            <mfp-select size="lg" label="Large" placeholder="lg">
+                <option>One</option>
+                <option>Two</option>
+            </mfp-select>
+        </div>
+    `,
+};
+
+export const Disabled: Story = {
+    args: { disabled: true, value: 'red', placeholder: '' },
+};
+
+export const WithGroups: Story = {
+    parameters: { controls: { disable: true } },
+    render: () => html`
+        <mfp-select label="Pick a fruit" placeholder="Choose…" style="max-width: 320px;">
+            <optgroup label="Citrus">
+                <option value="orange">Orange</option>
+                <option value="lemon">Lemon</option>
+                <option value="lime">Lime</option>
+            </optgroup>
+            <optgroup label="Berries">
+                <option value="strawberry">Strawberry</option>
+                <option value="blueberry">Blueberry</option>
+            </optgroup>
+        </mfp-select>
+    `,
+};

package/src/select.ts

@@ -0,0 +1,286 @@
+import { LitElement, html, css, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+
+export type SelectSize = 'sm' | 'md' | 'lg';
+
+let selectIdCounter = 0;
+
+/**
+ * `<mfp-select>` wraps a native `<select>` element. Children projected into
+ * the default slot are forwarded into the real select — usage:
+ *
+ *   <mfp-select label="Color">
+ *     <option value="red">Red</option>
+ *     <option value="green">Green</option>
+ *   </mfp-select>
+ *
+ * Using the native control means full keyboard a11y, screen reader support,
+ * and mobile-native pickers come for free. The visual chrome (border, focus
+ * ring, chevron) is styled via shadow CSS using design tokens.
+ */
+@customElement('mfp-select')
+export class MfpSelect 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 {
+            position: relative;
+            display: flex;
+            align-items: center;
+            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);
+        }
+
+        select {
+            flex: 1 1 auto;
+            min-width: 0;
+            appearance: none;
+            -webkit-appearance: none;
+            background: transparent;
+            border: none;
+            outline: none;
+            font: inherit;
+            color: inherit;
+            cursor: pointer;
+            padding: var(--size-spacing-2, 8px) var(--size-spacing-9, 36px)
+                var(--size-spacing-2, 8px) var(--size-spacing-3, 12px);
+        }
+
+        select:disabled {
+            cursor: not-allowed;
+        }
+
+        .chevron {
+            position: absolute;
+            right: var(--size-spacing-3, 12px);
+            top: 50%;
+            transform: translateY(-50%);
+            width: 1em;
+            height: 1em;
+            color: var(--color-text-muted, #6b7280);
+            pointer-events: none;
+        }
+
+        /* Sizes — fall back to medium when no [size] attribute is set */
+        :host(:not([size])) select,
+        :host([size='md']) select {
+            font-size: var(--font-size-base, 16px);
+            min-height: 40px;
+        }
+        :host([size='sm']) select {
+            font-size: var(--font-size-sm, 14px);
+            min-height: 32px;
+            padding: var(--size-spacing-1, 4px) var(--size-spacing-9, 36px)
+                var(--size-spacing-1, 4px) var(--size-spacing-3, 12px);
+        }
+        :host([size='lg']) select {
+            font-size: var(--font-size-lg, 18px);
+            min-height: 48px;
+            padding: var(--size-spacing-3, 12px) var(--size-spacing-10, 40px)
+                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);
+        }
+
+        /* Hide the slot — its children get moved into the native select */
+        .options-source {
+            display: none;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .control {
+                transition: none;
+            }
+        }
+    `;
+
+    @property({ reflect: true })
+    size: SelectSize = 'md';
+
+    @property()
+    value = '';
+
+    @property()
+    name = '';
+
+    @property()
+    label = '';
+
+    @property()
+    placeholder = '';
+
+    @property()
+    hint = '';
+
+    @property()
+    error = '';
+
+    @property({ type: Boolean, reflect: true })
+    disabled = false;
+
+    @property({ type: Boolean, reflect: true })
+    required = false;
+
+    private _id = `mfp-select-${++selectIdCounter}`;
+
+    @query('select')
+    private _selectEl!: HTMLSelectElement;
+
+    private _onChange = (e: Event) => {
+        const select = e.target as HTMLSelectElement;
+        this.value = select.value;
+        this.dispatchEvent(
+            new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: { value: select.value },
+            }),
+        );
+    };
+
+    /** Move slotted <option> elements into the real <select> when they change. */
+    private _onSlotChange = (e: Event) => {
+        const slot = e.target as HTMLSlotElement;
+        const select = this._selectEl;
+        if (!select) return;
+
+        const currentValue = this.value;
+        const optionLikeNodes = slot
+            .assignedNodes({ flatten: true })
+            .filter(
+                (n): n is HTMLElement =>
+                    n.nodeType === Node.ELEMENT_NODE &&
+                    ((n as HTMLElement).tagName === 'OPTION' ||
+                        (n as HTMLElement).tagName === 'OPTGROUP'),
+            );
+
+        // Replace existing real options (other than the placeholder, which lives in the template)
+        const placeholder = select.querySelector('option[data-mfp-placeholder]');
+        select.textContent = '';
+        if (placeholder) select.appendChild(placeholder);
+        for (const node of optionLikeNodes) {
+            select.appendChild(node.cloneNode(true));
+        }
+
+        // Restore the value (reflect attribute → DOM value)
+        select.value = currentValue;
+    };
+
+    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' : ''}">
+                <select
+                    id=${inputId}
+                    part="select"
+                    .value=${this.value}
+                    name=${this.name}
+                    ?disabled=${this.disabled}
+                    ?required=${this.required}
+                    aria-invalid=${invalid ? 'true' : 'false'}
+                    aria-describedby=${describedBy ?? nothing}
+                    @change=${this._onChange}
+                >
+                    ${this.placeholder
+                        ? html`<option value="" disabled selected hidden data-mfp-placeholder>
+                              ${this.placeholder}
+                          </option>`
+                        : nothing}
+                </select>
+                <svg
+                    class="chevron"
+                    part="chevron"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    aria-hidden="true"
+                >
+                    <path
+                        d="M4 6l4 4 4-4"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                    />
+                </svg>
+            </div>
+            <div class="options-source">
+                <slot @slotchange=${this._onSlotChange}></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-select': MfpSelect;
+    }
+}