diff --git a/.specs/field-select.md b/.specs/field-select.md
new file mode 100644
index 000000000..ad6b0d7d7
--- /dev/null
+++ b/.specs/field-select.md
@@ -0,0 +1,150 @@
+---
+name: field-select
+category: inputs
+structure: monolithic
+status: implemented
+spec_version: 1
+figma:
+  url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=536-22
+  node_id: 536:22
+checksum: 4dfbb39bbec8d2ef0f8ecab7d8ca38cf4bb084a5aa6caf745d187fd5f0ad5a9f
+created: 2026-07-22
+last_updated: 2026-07-22
+---
+# Field Select — Component Spec
+
+## Purpose
+
+Form field wrapper for `Select` that composes `Label`, `Select` (with its `Trigger` + `Content` + `Option` sub-components), and `HelperText` into a single vertical stack with consistent spacing. Use it whenever a select needs a visible label or helper/error message — mirroring `FieldText`'s role for text inputs. Options are supplied via a data prop (`options: { value, label }[]`) so the field owns the rendering; consumers who need slot-based composition can drop to the underlying `Select` compound directly.
+
+## Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+import FieldSelect from '@aziontech/webkit/field-select'
+
+const region = ref('')
+const options = [
+  { value: 'us-east-1', label: 'US East (N. Virginia)' },
+  { value: 'us-west-2', label: 'US West (Oregon)' },
+  { value: 'eu-west-1', label: 'EU (Ireland)' }
+]
+</script>
+
+<template>
+  <FieldSelect
+    v-model="region"
+    label="Region"
+    placeholder="Choose a region"
+    helper-text="Choose the closest region for lowest latency."
+    :options="options"
+    required
+  />
+</template>
+```
+
+## Props
+
+| Prop | Type | Default | Required | JSDoc |
+|---|---|---|---|---|
+| `options` | `Array<{ value: unknown; label: string; disabled?: boolean }>` | `[]` | no | Options rendered inside the dropdown. When empty, the dropdown renders no options. |
+| `label` | `string` | `''` | no | Text rendered inside the `Label`. When empty, the label row is omitted. |
+| `placeholder` | `string` | `''` | no | Placeholder shown on the trigger when nothing is selected. |
+| `helperText` | `string` | `''` | no | Auxiliary text rendered inside `HelperText`. When empty, the helper row is omitted **except** when `disabled` is true — in that case the component falls back to the default disabled message so the lock icon always has matching copy. |
+| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | no | Size forwarded to the `Select` trigger. Heights: small=28px, medium=32px, large=40px. |
+| `multiple` | `boolean` | `false` | no | Switches the component to multi-select; `modelValue` becomes an array. |
+| `disabled` | `boolean` | `false` | no | Disables the select and switches the helper to `kind="disabled"` (lock icon). |
+| `readonly` | `boolean` | `false` | no | Marks the select read-only; value is visible but the dropdown is locked. |
+| `required` | `boolean` | `false` | no | Adds the `Required` tag to the `Label` and sets `aria-required` on the trigger. |
+| `invalid` | `boolean` | `false` | no | Switches the helper to `kind="invalid"` and applies invalid border/ring tokens on the trigger. |
+| `inputId` | `string` | `''` | no | id for the trigger; consumed by `Label` via `for` and by `aria-describedby` wiring. When empty, the component auto-generates an id via `useId()`. |
+
+## v-model
+
+| Model | Type | Default | Emits | Notes |
+|---|---|---|---|---|
+| `v-model` | `string \| number \| unknown[]` | `undefined` | `update:modelValue` | Two-way bound selection via `defineModel`. Scalar in single mode; array in multi mode. |
+
+## Events
+
+_No plain events — activation flows through `v-model`._
+
+## Slots
+
+| Slot | Scope | Notes |
+|---|---|---|
+| `default` | — | Optional override for the rendered options. When absent, the component renders one `Select.Option` per entry in `options`. |
+
+## States
+
+- Visual states: `default`, `required`, `invalid`, `disabled`, `readonly`
+- `data-required` mirrors the `required` prop
+- `data-invalid` mirrors the `invalid` prop
+- `data-disabled` mirrors the `disabled` prop
+- `data-readonly` mirrors the `readonly` prop
+- `data-size` mirrors the `size` prop
+
+## Motion & Animations
+
+| Trigger | Animation / Transition | Token | Reduced-motion fallback |
+|---|---|---|---|
+| _none_ — motion is owned by the underlying `Select` | — | — | — |
+
+## Tokens
+
+| Region | Token (DESIGN.md) |
+|---|---|
+| gap (between label / select / helper rows) | `var(--spacing-xs)` |
+
+(Typography and color tokens are owned by the children — `Label`, `Select`, `HelperText` — and not redeclared here.)
+
+## Theme gaps
+
+| Figma variable | Temporary primitive | Follow-up |
+|---|---|---|
+| _none_ | — | — |
+
+## Accessibility (WCAG 2.1 AA)
+
+- The `Label`'s native `<label>` is wired to the trigger via `for="<inputId>"`; when the consumer omits `inputId`, the component auto-generates one so the association still works.
+- When `helperText` is set (or `disabled` falls back to the locked message), the trigger receives `aria-describedby="<helperId>"` so assistive tech announces the helper alongside the value.
+- When `required`, the trigger receives `aria-required="true"`; the visual asterisk/Required tag lives on the `Label`.
+- When `invalid`, the trigger receives `aria-invalid="true"` and the helper switches color tokens to the danger family — the helper text remains the human-readable error message.
+- When `disabled`, the trigger is disabled, the helper switches to `kind="disabled"` (lock icon) — if `helperText` is empty, the component falls back to the default disabled message `'This field is locked.'` so the lock icon never appears alone — and the label dims via inherited `var(--text-muted)`.
+- Keyboard model is owned by the underlying `Select`: Enter/Space/ArrowDown open the dropdown; Arrow keys move focus among options; Enter/Space commit; Escape closes and returns focus to the trigger.
+- Contrast ≥4.5:1 (text) / ≥3:1 (icons), including all derived states.
+- Touch target: the underlying `Select` trigger owns the ≥40×40 px hit area at `size="large"`.
+
+## Stories (Storybook)
+
+- Default
+- Sizes — composite story rendering all three sizes side by side.
+- Required — `required: true`; documents the Label's Required tag plus the trigger's `aria-required` wiring.
+- Invalid — `invalid: true` with a sample `helperText`; documents the danger-tokened helper and invalid trigger border.
+- Disabled — `disabled: true`; documents the lock-icon helper and disabled trigger tokens.
+- Multiple — `multiple: true`; documents the multi-select variant with joined labels on the trigger.
+
+## Constraints — DO NOT
+
+<!-- This block is injected VERBATIM into every sub-agent prompt.
+     spec-validator rejects the spec if this block is missing or shorter than the template. -->
+
+- Do not add props beyond the Props table above. If you need a prop that is not listed, emit `BLOCKED: missing prop <name>` and stop — do not invent.
+- Do not add events beyond the Events table above. Same rule for slots and sub-components.
+- Do not invent imports. Every `@aziontech/webkit/*` path must exist in `packages/webkit/package.json#exports`. Every relative import must resolve to a real file. Every npm package must be installed.
+- Do not use HEX/RGB/HSL colors, Tailwind palette names (e.g. `bg-blue-500`), raw typography classes (e.g. `text-sm`), `any`, `@ts-ignore`, or `class` inside `defineProps`.
+- Do not install or import positioning/animation libraries (`@floating-ui/*`, `popper.js`, `tippy.js`, `gsap`, `framer-motion`, `motion`, `@vueuse/motion`, `@formkit/auto-animate`, drag-drop runtimes, scroll virtualization libs). Use CSS + Vue primitives (`<Teleport>`, `<Transition>`). See `.claude/rules/dependencies.md`.
+- Do not improvise animations. Every `animate-*` / `transition-*` class must come from `packages/theme/src/tokens/semantic/animations.js`; every motion-bearing class pairs with `motion-reduce:*` on the same class string; no component-local `@keyframes`.
+- Do not create class presets in JavaScript (`const kindClasses = {...}`, `const sharedClasses = [...]`, `const sizeClasses = {...}`, `const rootClasses = computed(...)`). Variants live on `data-*` attributes consumed by Tailwind `data-[attr=value]:`. All utilities live inline on the root element's `class` attribute. No `<style>` block, no component-local `.css`/`.scss`. See `.claude/rules/styling.md`.
+- Do not inherit artifacts as-is from another design system, Figma file, library, or pre-existing `CONTRACT.md` / `README.md`. Rewrite to our conventions. See `.claude/rules/migration.md`.
+- Do not add Figma references to Storybook stories. No `parameters.design`, no `parameters.figma`, no Figma URLs in `docs.description.*`, no `@storybook/addon-designs` import. The Figma link is owned by `<name>.figma.ts` (Code Connect). See `.claude/docs/COMPONENT_REQUIREMENTS.md`.
+- Do not use `parameters.actions.argTypesRegex` (deprecated in Storybook 8 and silently misroutes Vue 3 emits) or `parameters.actions.handles` (DOM-only). Declare every event explicitly in `argTypes` with a camelCase `on<Event>` key and `{ action: '<emitted-name>' }`. Do not use the legacy CSF2 `Name.args = {...}` form — always object-style CSF3.
+- Do not add bespoke Storybook stories beyond Default + Types + Sizes + state stories (`Loading`, `Disabled`) for the props the component actually declares, unless the spec's "Stories (Storybook)" section explicitly justifies the addition. Do not split Types/Sizes into one-story-per-variant — the composite stories are the canonical pattern.
+- Do not duplicate the `## Usage` block from the spec inside the Storybook story body. The block is injected once into `parameters.docs.description.component` by the storybook-write skill; copy it nowhere else.
+- Do not edit `.claude/docs/DESIGN.md`, `.claude/docs/COMPONENT_REQUIREMENTS.md`, or `.claude/docs/PRIMEVUE_ABSTRACTION.md`.
+- Do not edit the root `package.json` or `.github/workflows/*`.
+- Do not change `structure` after `status: approved`. To change structure, bump `spec_version` and re-author the spec.
+- Do not create files outside the paths declared by your task (the orchestrator tells you exactly which files to write).
+- Do not run `git` commands, `pnpm install`, or any command that changes the lockfile.
+- If anything in the spec is ambiguous or contradicts the rules, emit `BLOCKED: <one-sentence reason>` and write nothing.
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--dark-mobile.png
new file mode 100644
index 000000000..5cadae3d6
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--dark-tablet.png
new file mode 100644
index 000000000..6332d7d58
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-desktop.png
new file mode 100644
index 000000000..df8ad2d0e
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-mobile.png
new file mode 100644
index 000000000..a291d2290
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-tablet.png
new file mode 100644
index 000000000..df8ad2d0e
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default.png
new file mode 100644
index 000000000..6332d7d58
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--default.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--dark-mobile.png
new file mode 100644
index 000000000..bc0baf865
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--dark-tablet.png
new file mode 100644
index 000000000..53034414f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-desktop.png
new file mode 100644
index 000000000..07fc8c88c
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-mobile.png
new file mode 100644
index 000000000..7a9a0433d
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-tablet.png
new file mode 100644
index 000000000..07fc8c88c
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled.png
new file mode 100644
index 000000000..53034414f
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--disabled.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--dark-mobile.png
new file mode 100644
index 000000000..4a2c40e01
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--dark-tablet.png
new file mode 100644
index 000000000..fb6ca1a4d
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-desktop.png
new file mode 100644
index 000000000..0e7dc7e3c
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-mobile.png
new file mode 100644
index 000000000..daf1cc647
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-tablet.png
new file mode 100644
index 000000000..0e7dc7e3c
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid.png
new file mode 100644
index 000000000..fb6ca1a4d
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--invalid.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--dark-mobile.png
new file mode 100644
index 000000000..c63fe67b6
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--dark-tablet.png
new file mode 100644
index 000000000..01c7cc2ba
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-desktop.png
new file mode 100644
index 000000000..72b2288fe
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-mobile.png
new file mode 100644
index 000000000..c596cdd2d
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-tablet.png
new file mode 100644
index 000000000..72b2288fe
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple.png
new file mode 100644
index 000000000..01c7cc2ba
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--multiple.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--dark-mobile.png
new file mode 100644
index 000000000..4b52d7806
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--dark-tablet.png
new file mode 100644
index 000000000..3175164c3
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-desktop.png
new file mode 100644
index 000000000..aa14b73d4
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-mobile.png
new file mode 100644
index 000000000..5d368d929
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-tablet.png
new file mode 100644
index 000000000..aa14b73d4
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required.png
new file mode 100644
index 000000000..3175164c3
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--required.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--dark-mobile.png
new file mode 100644
index 000000000..e2cbb3d68
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--dark-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--dark-tablet.png
new file mode 100644
index 000000000..78d3b200b
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--dark-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-desktop.png
new file mode 100644
index 000000000..195fe02fd
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-desktop.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-mobile.png
new file mode 100644
index 000000000..1771811ae
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-mobile.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-tablet.png
new file mode 100644
index 000000000..195fe02fd
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes--light-tablet.png differ
diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes.png
new file mode 100644
index 000000000..78d3b200b
Binary files /dev/null and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldselect--sizes.png differ
diff --git a/apps/storybook/src/stories/components/inputs/field-select/FieldSelect.stories.js b/apps/storybook/src/stories/components/inputs/field-select/FieldSelect.stories.js
new file mode 100644
index 000000000..080f8d5a2
--- /dev/null
+++ b/apps/storybook/src/stories/components/inputs/field-select/FieldSelect.stories.js
@@ -0,0 +1,347 @@
+import FieldSelect from '@aziontech/webkit/field-select'
+import { ref, watch } from 'vue'
+
+import { toSfc } from '../../../_shared/story-source'
+
+const IMPORT = "import FieldSelect from '@aziontech/webkit/field-select'"
+const VUE_IMPORT = "import { ref } from 'vue'"
+
+// FieldSelect fills its container, so the container is what sets the width. The
+// stories give it a definite one; without it the field would size to its own
+// content and jump every time the selected value changes length.
+const FIELD_WIDTH = 'w-[320px]'
+
+const REGION_OPTIONS = [
+  { value: 'us-east-1', label: 'US East (N. Virginia)' },
+  { value: 'us-west-2', label: 'US West (Oregon)' },
+  { value: 'eu-west-1', label: 'EU (Ireland)' }
+]
+
+const OPTIONS_LITERAL = `[
+  { value: 'us-east-1', label: 'US East (N. Virginia)' },
+  { value: 'us-west-2', label: 'US West (Oregon)' },
+  { value: 'eu-west-1', label: 'EU (Ireland)' }
+]`
+
+/** @type {import('@storybook/vue3').Meta<typeof FieldSelect>} */
+const meta = {
+  title: 'Components/Inputs/FieldSelect',
+  component: FieldSelect,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+    backgrounds: {
+      default: 'dark'
+    },
+    a11y: {
+      config: {
+        rules: [
+          { id: 'color-contrast', enabled: true },
+          { id: 'focus-order-semantics', enabled: true }
+        ]
+      }
+    },
+    docs: {
+      description: {
+        component:
+          'Form field wrapper for `Select` that composes `Label`, `Select`, and `HelperText` into a single vertical stack with consistent spacing. Options are supplied via a data prop (`options: { value, label }[]`).'
+      },
+      canvas: { sourceState: 'shown' }
+    }
+  },
+  argTypes: {
+    modelValue: {
+      control: 'text',
+      description: 'Two-way bound selection. Scalar in single mode; an array in multi mode.',
+      table: {
+        category: 'props',
+        type: { summary: 'string | number | unknown[]' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    options: {
+      control: 'object',
+      description: 'Options rendered inside the dropdown.',
+      table: {
+        category: 'props',
+        type: { summary: 'Array<{ value: unknown; label: string; disabled?: boolean }>' },
+        defaultValue: { summary: '[]' }
+      }
+    },
+    label: {
+      control: 'text',
+      description: 'Text rendered inside the `Label`. When empty, the label row is omitted.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder shown on the trigger when nothing is selected.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    helperText: {
+      control: 'text',
+      description:
+        'Auxiliary text rendered inside `HelperText`. When empty, the helper row is omitted (except when `disabled`).',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large'],
+      description:
+        'Size forwarded to the `Select` trigger. Heights: small=28px, medium=32px, large=40px.',
+      table: {
+        category: 'props',
+        type: { summary: "'small' | 'medium' | 'large'" },
+        defaultValue: { summary: "'medium'" }
+      }
+    },
+    multiple: {
+      control: 'boolean',
+      description: 'Switches the component to multi-select; `modelValue` becomes an array.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disables the select and switches the helper to `kind="disabled"`.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    readonly: {
+      control: 'boolean',
+      description: 'Marks the select read-only.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    required: {
+      control: 'boolean',
+      description: 'Adds the `Required` tag and sets `aria-required` on the trigger.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    invalid: {
+      control: 'boolean',
+      description: 'Switches the helper to `kind="invalid"` and applies invalid tokens.',
+      table: { category: 'props', type: { summary: 'boolean' }, defaultValue: { summary: 'false' } }
+    },
+    inputId: {
+      control: 'text',
+      description: 'id for the trigger. Auto-generated when empty.',
+      table: { category: 'props', type: { summary: 'string' }, defaultValue: { summary: "''" } }
+    },
+    'onUpdate:modelValue': {
+      action: 'update:modelValue',
+      description: 'Re-emitted from the underlying `Select` on every selection change.',
+      table: {
+        category: 'events',
+        type: { summary: '(value: string | number | unknown[]) => void' }
+      }
+    }
+  },
+  args: {
+    modelValue: '',
+    options: REGION_OPTIONS,
+    label: 'Region',
+    placeholder: 'Choose a region',
+    helperText: 'Choose the closest region for lowest latency.',
+    size: 'medium',
+    multiple: false,
+    disabled: false,
+    readonly: false,
+    required: false,
+    invalid: false
+  }
+}
+
+export default meta
+
+const Template = (args) => ({
+  components: { FieldSelect },
+  setup() {
+    const value = ref(args.modelValue ?? (args.multiple ? [] : ''))
+    watch(
+      () => args.modelValue,
+      (next) => {
+        value.value = next ?? (args.multiple ? [] : '')
+      }
+    )
+    const onUpdate = (next) => {
+      value.value = next
+      args['onUpdate:modelValue']?.(next)
+    }
+    return { args, value, onUpdate }
+  },
+  template: `<div class="${FIELD_WIDTH}">
+  <FieldSelect v-bind="args" :model-value="value" @update:model-value="onUpdate" />
+</div>`
+})
+
+const DEFAULT_MARKUP = `<div class="${FIELD_WIDTH}">
+  <FieldSelect v-model="region" label="Region" placeholder="Choose a region" helper-text="Choose the closest region for lowest latency." :options="options" />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldSelect>} */
+export const Default = {
+  render: Template,
+  parameters: {
+    docs: {
+      description: { story: 'Default field with label, select, and helper text.' },
+      source: {
+        code: toSfc(
+          [VUE_IMPORT, IMPORT, '', "const region = ref('')", `const options = ${OPTIONS_LITERAL}`],
+          DEFAULT_MARKUP
+        )
+      }
+    }
+  }
+}
+
+const SIZES_TEMPLATE = `<div class="flex flex-col gap-6 w-[320px]">
+  <FieldSelect v-model="small" size="small" label="Region (small)" placeholder="Choose a region" :options="options" helper-text="Small size — 28px trigger height." />
+  <FieldSelect v-model="medium" size="medium" label="Region (medium)" placeholder="Choose a region" :options="options" helper-text="Medium size — 32px trigger height." />
+  <FieldSelect v-model="large" size="large" label="Region (large)" placeholder="Choose a region" :options="options" helper-text="Large size — 40px trigger height." />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldSelect>} */
+export const Sizes = {
+  render: () => ({
+    components: { FieldSelect },
+    setup() {
+      const small = ref('')
+      const medium = ref('')
+      const large = ref('')
+      return { small, medium, large, options: REGION_OPTIONS }
+    },
+    template: SIZES_TEMPLATE
+  }),
+  parameters: {
+    docs: {
+      controls: { disable: true },
+      description: {
+        story: 'All three size variants side by side.'
+      },
+      source: {
+        code: toSfc(
+          [
+            VUE_IMPORT,
+            IMPORT,
+            '',
+            "const small = ref('')",
+            "const medium = ref('')",
+            "const large = ref('')",
+            `const options = ${OPTIONS_LITERAL}`
+          ],
+          SIZES_TEMPLATE
+        )
+      }
+    }
+  }
+}
+
+const REQUIRED_MARKUP = `<div class="${FIELD_WIDTH}">
+  <FieldSelect v-model="region" label="Region" placeholder="Choose a region" helper-text="This field is required." :options="options" required />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldSelect>} */
+export const Required = {
+  args: { required: true, label: 'Region', helperText: 'This field is required.' },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Required state — the `Label` shows the Required tag and the trigger receives `aria-required`.'
+      },
+      source: {
+        code: toSfc(
+          [VUE_IMPORT, IMPORT, '', "const region = ref('')", `const options = ${OPTIONS_LITERAL}`],
+          REQUIRED_MARKUP
+        )
+      }
+    }
+  }
+}
+
+const INVALID_MARKUP = `<div class="${FIELD_WIDTH}">
+  <FieldSelect v-model="region" label="Region" placeholder="Choose a region" helper-text="Pick a valid region." :options="options" invalid />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldSelect>} */
+export const Invalid = {
+  args: { invalid: true, label: 'Region', helperText: 'Pick a valid region.' },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Invalid state — the helper adopts danger tokens and the trigger gets `aria-invalid`.'
+      },
+      source: {
+        code: toSfc(
+          [VUE_IMPORT, IMPORT, '', "const region = ref('')", `const options = ${OPTIONS_LITERAL}`],
+          INVALID_MARKUP
+        )
+      }
+    }
+  }
+}
+
+const DISABLED_MARKUP = `<div class="${FIELD_WIDTH}">
+  <FieldSelect v-model="region" label="Region" placeholder="Choose a region" helper-text="This field is locked." :options="options" disabled />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldSelect>} */
+export const Disabled = {
+  args: {
+    disabled: true,
+    label: 'Region',
+    modelValue: 'us-east-1',
+    helperText: 'This field is locked.'
+  },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Disabled state — trigger disabled, helper switches to `kind="disabled"`.'
+      },
+      source: {
+        code: toSfc(
+          [
+            VUE_IMPORT,
+            IMPORT,
+            '',
+            "const region = ref('us-east-1')",
+            `const options = ${OPTIONS_LITERAL}`
+          ],
+          DISABLED_MARKUP
+        )
+      }
+    }
+  }
+}
+
+const MULTIPLE_MARKUP = `<div class="${FIELD_WIDTH}">
+  <FieldSelect v-model="regions" label="Regions" placeholder="Choose regions" helper-text="Select every region." :options="options" multiple />
+</div>`
+
+/** @type {import('@storybook/vue3').StoryObj<typeof FieldSelect>} */
+export const Multiple = {
+  args: {
+    multiple: true,
+    label: 'Regions',
+    placeholder: 'Choose regions',
+    helperText: 'Select every region.',
+    modelValue: []
+  },
+  render: Template,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Multi-select — `modelValue` becomes an array and the trigger displays joined labels.'
+      },
+      source: {
+        code: toSfc(
+          [VUE_IMPORT, IMPORT, '', 'const regions = ref([])', `const options = ${OPTIONS_LITERAL}`],
+          MULTIPLE_MARKUP
+        )
+      }
+    }
+  }
+}
diff --git a/packages/webkit/catalog.json b/packages/webkit/catalog.json
index 5b2dcbe8a..3ddf9582f 100644
--- a/packages/webkit/catalog.json
+++ b/packages/webkit/catalog.json
@@ -5288,6 +5288,102 @@
         "Use `inputmode=\"numeric\"` semantics for mobile keyboards."
       ]
     },
+    "field-select": {
+      "import": "@aziontech/webkit/field-select",
+      "target": "./src/components/inputs/field-select/field-select.vue",
+      "kind": "component",
+      "treeShakeableImport": "@aziontech/webkit/field-select",
+      "category": "inputs",
+      "structure": "monolithic",
+      "status": "implemented",
+      "props": [
+        {
+          "name": "options",
+          "type": "Array<{ value: unknown; label: string; disabled?: boolean }>",
+          "default": "[]",
+          "required": "no",
+          "doc": "Options rendered inside the dropdown. When empty, the dropdown renders no options."
+        },
+        {
+          "name": "label",
+          "type": "string",
+          "default": "''",
+          "required": "no",
+          "doc": "Text rendered inside the `Label`. When empty, the label row is omitted."
+        },
+        {
+          "name": "placeholder",
+          "type": "string",
+          "default": "''",
+          "required": "no",
+          "doc": "Placeholder shown on the trigger when nothing is selected."
+        },
+        {
+          "name": "helperText",
+          "type": "string",
+          "default": "''",
+          "required": "no",
+          "doc": "Auxiliary text rendered inside `HelperText`. When empty, the helper row is omitted **except** when `disabled` is true — in that case the component falls back to the default disabled message so the lock icon always has matching copy."
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "default": "'medium'",
+          "required": "no",
+          "doc": "Size forwarded to the `Select` trigger. Heights: small=28px, medium=32px, large=40px."
+        },
+        {
+          "name": "multiple",
+          "type": "boolean",
+          "default": "false",
+          "required": "no",
+          "doc": "Switches the component to multi-select; `modelValue` becomes an array."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "default": "false",
+          "required": "no",
+          "doc": "Disables the select and switches the helper to `kind=\"disabled\"` (lock icon)."
+        },
+        {
+          "name": "readonly",
+          "type": "boolean",
+          "default": "false",
+          "required": "no",
+          "doc": "Marks the select read-only; value is visible but the dropdown is locked."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "default": "false",
+          "required": "no",
+          "doc": "Adds the `Required` tag to the `Label` and sets `aria-required` on the trigger."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "default": "false",
+          "required": "no",
+          "doc": "Switches the helper to `kind=\"invalid\"` and applies invalid border/ring tokens on the trigger."
+        },
+        {
+          "name": "inputId",
+          "type": "string",
+          "default": "''",
+          "required": "no",
+          "doc": "id for the trigger; consumed by `Label` via `for` and by `aria-describedby` wiring. When empty, the component auto-generates an id via `useId()`."
+        }
+      ],
+      "slots": [
+        {
+          "name": "default",
+          "scope": "—",
+          "notes": "Optional override for the rendered options. When absent, the component renders one `Select.Option` per entry in `options`."
+        }
+      ],
+      "purpose": "Form field wrapper for `Select` that composes `Label`, `Select` (with its `Trigger` + `Content` + `Option` sub-components), and `HelperText` into a single vertical stack with consistent spacing. Use it whenever a select needs a visible label or helper/error message — mirroring `FieldText`'s role for text inputs. Options are supplied via a data prop (`options: { value, label }[]`) so the field owns the rendering; consumers who need slot-based composition can drop to the underlying `Select` compound directly."
+    },
     "field-text": {
       "import": "@aziontech/webkit/field-text",
       "target": "./src/components/inputs/field-text/field-text.vue",
diff --git a/packages/webkit/package.json b/packages/webkit/package.json
index 934b57328..6b0c002bb 100644
--- a/packages/webkit/package.json
+++ b/packages/webkit/package.json
@@ -201,6 +201,7 @@
     "./input-group-root": "./src/components/inputs/input-group/input-group.vue",
     "./input-group-addon": "./src/components/inputs/input-group/input-group-addon/input-group-addon.vue",
     "./input-number": "./src/components/inputs/input-number/input-number.vue",
+    "./field-select": "./src/components/inputs/field-select/field-select.vue",
     "./field-text": "./src/components/inputs/field-text/field-text.vue",
     "./field-input-group": "./src/components/inputs/field-input-group/field-input-group.vue",
     "./field-text-switch": "./src/components/inputs/field-text-switch/field-text-switch.vue",
diff --git a/packages/webkit/src/components/inputs/field-select/field-select.test.ts b/packages/webkit/src/components/inputs/field-select/field-select.test.ts
new file mode 100644
index 000000000..39ee1d562
--- /dev/null
+++ b/packages/webkit/src/components/inputs/field-select/field-select.test.ts
@@ -0,0 +1,235 @@
+import { composeStories } from '@storybook/vue3'
+import { fireEvent, render } from '@testing-library/vue'
+import { afterEach, describe, expect, it } from 'vitest'
+
+import * as stories from '../../../../../../apps/storybook/src/stories/components/inputs/field-select/FieldSelect.stories'
+import { expectNoA11yViolations } from '../../../test/axe'
+import FieldSelect from './field-select.vue'
+
+const { Default, Sizes, Required, Invalid, Disabled, Multiple } = composeStories(stories)
+
+const OPTIONS = [
+  { value: 'opt-1', label: 'Option 1' },
+  { value: 'opt-2', label: 'Option 2' },
+  { value: 'opt-3', label: 'Option 3' }
+]
+
+afterEach(() => {
+  document.body
+    .querySelectorAll('[data-testid$="__content"], [data-testid="select-content"]')
+    .forEach((el) => el.remove())
+})
+
+describe('FieldSelect', () => {
+  it('renders the root with the default data-testid and stacks its parts', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', helperText: 'Helper', options: OPTIONS }
+    })
+
+    expect(getByTestId('input-field-select')).toBeTruthy()
+    expect(getByTestId('input-field-select__label')).toBeTruthy()
+    expect(getByTestId('input-field-select__trigger')).toBeTruthy()
+    expect(getByTestId('input-field-select__helper')).toBeTruthy()
+  })
+
+  it('honors a consumer-provided data-testid on the root and its suffixed parts', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', helperText: 'Helper', options: OPTIONS },
+      attrs: { 'data-testid': 'my-field' }
+    })
+
+    expect(getByTestId('my-field')).toBeTruthy()
+    expect(getByTestId('my-field__label')).toBeTruthy()
+    expect(getByTestId('my-field__trigger')).toBeTruthy()
+    expect(getByTestId('my-field__helper')).toBeTruthy()
+  })
+
+  it('omits the label row when no label is provided', () => {
+    const { queryByTestId } = render(FieldSelect, {
+      props: { helperText: 'Helper', options: OPTIONS }
+    })
+    expect(queryByTestId('input-field-select__label')).toBeNull()
+  })
+
+  it('omits the helper row when there is no helper text and the field is enabled', () => {
+    const { queryByTestId } = render(FieldSelect, {
+      props: { label: 'Region', options: OPTIONS }
+    })
+    expect(queryByTestId('input-field-select__helper')).toBeNull()
+  })
+
+  it('shows the locked fallback helper when disabled with no explicit helper text', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', disabled: true, options: OPTIONS }
+    })
+    const helper = getByTestId('input-field-select__helper')
+    expect(helper.textContent).toContain('This field is locked.')
+  })
+
+  it('wires the label to the trigger via matching for/id', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', inputId: 'region-field', options: OPTIONS }
+    })
+    const label = getByTestId('input-field-select__label')
+    const trigger = getByTestId('input-field-select__trigger')
+
+    expect(label.tagName).toBe('LABEL')
+    expect(trigger.id).toBe('region-field')
+    expect(label.getAttribute('for')).toBe('region-field')
+  })
+
+  it('points aria-describedby at the helper element when a helper is shown', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: {
+        label: 'Region',
+        helperText: 'We need this.',
+        inputId: 'region-field',
+        options: OPTIONS
+      }
+    })
+    const trigger = getByTestId('input-field-select__trigger')
+    const helper = getByTestId('input-field-select__helper')
+
+    expect(trigger.getAttribute('aria-describedby')).toBe('region-field-helper')
+    expect(helper.id).toBe('region-field-helper')
+  })
+
+  it('drops aria-describedby when no helper is rendered', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', options: OPTIONS }
+    })
+    const trigger = getByTestId('input-field-select__trigger')
+    expect(trigger.getAttribute('aria-describedby')).toBeNull()
+  })
+
+  it('sets aria-required when required, and reflects data-required on the root', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', required: true, options: OPTIONS }
+    })
+    const root = getByTestId('input-field-select')
+    const trigger = getByTestId('input-field-select__trigger')
+
+    expect(trigger.getAttribute('aria-required')).toBe('true')
+    expect(root.getAttribute('data-required')).toBe('true')
+  })
+
+  it('sets aria-invalid and data-invalid on the invalid state', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', invalid: true, helperText: 'Pick a region.', options: OPTIONS }
+    })
+    const root = getByTestId('input-field-select')
+    const trigger = getByTestId('input-field-select__trigger')
+
+    expect(trigger.getAttribute('aria-invalid')).toBe('true')
+    expect(root.getAttribute('data-invalid')).toBe('true')
+  })
+
+  it('disables the trigger and marks data-disabled when disabled', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', disabled: true, options: OPTIONS }
+    })
+    const root = getByTestId('input-field-select')
+    const trigger = getByTestId('input-field-select__trigger') as HTMLButtonElement
+
+    expect(trigger.disabled).toBe(true)
+    expect(root.getAttribute('data-disabled')).toBe('true')
+  })
+
+  it('marks data-readonly when readonly', () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', readonly: true, options: OPTIONS }
+    })
+    const root = getByTestId('input-field-select')
+    expect(root.getAttribute('data-readonly')).toBe('true')
+  })
+
+  it('renders one option per entry in the options prop when the dropdown opens', async () => {
+    const { getByTestId } = render(FieldSelect, {
+      props: { label: 'Region', options: OPTIONS }
+    })
+
+    await fireEvent.click(getByTestId('input-field-select__trigger'))
+    const options = document.body.querySelectorAll('[data-testid="input-field-select__option"]')
+    expect(options.length).toBe(OPTIONS.length)
+  })
+
+  it('emits update:modelValue with the picked value when an option is clicked', async () => {
+    const { getByTestId, emitted } = render(FieldSelect, {
+      props: { label: 'Region', options: OPTIONS }
+    })
+
+    await fireEvent.click(getByTestId('input-field-select__trigger'))
+    const first = document.body.querySelector(
+      '[data-testid="input-field-select__option"]'
+    ) as HTMLElement
+    await fireEvent.click(first)
+
+    const events = emitted()['update:modelValue']
+    expect(events).toBeTruthy()
+    expect(events[events.length - 1]).toEqual(['opt-1'])
+  })
+
+  it.each(['small', 'medium', 'large'] as const)(
+    'reflects size="%s" on the root data-size',
+    (size) => {
+      const { getByTestId } = render(FieldSelect, {
+        props: { label: 'Region', size, options: OPTIONS }
+      })
+      expect(getByTestId('input-field-select').getAttribute('data-size')).toBe(size)
+    }
+  )
+
+  it('has no a11y violations in the default labelled + helper state', async () => {
+    const { container } = render(FieldSelect, {
+      props: {
+        label: 'Region',
+        helperText: 'Choose the closest region.',
+        inputId: 'a11y-default',
+        options: OPTIONS
+      }
+    })
+    await expectNoA11yViolations(container)
+  })
+
+  it('has no a11y violations in the disabled state', async () => {
+    const { container } = render(FieldSelect, {
+      props: { label: 'Region', disabled: true, inputId: 'a11y-disabled', options: OPTIONS }
+    })
+    await expectNoA11yViolations(container)
+  })
+
+  it('renders the composed Default story fixture', () => {
+    const { getByTestId } = render(Default)
+    expect(getByTestId('input-field-select')).toBeTruthy()
+    expect(getByTestId('input-field-select__trigger')).toBeTruthy()
+  })
+
+  it('renders the Sizes story fixture with three field-select roots', () => {
+    const { getAllByTestId } = render(Sizes)
+    expect(getAllByTestId('input-field-select').length).toBe(3)
+  })
+
+  it('renders the Required story fixture with aria-required on the trigger', () => {
+    const { getByTestId } = render(Required)
+    const trigger = getByTestId('input-field-select__trigger')
+    expect(trigger.getAttribute('aria-required')).toBe('true')
+  })
+
+  it('renders the Invalid story fixture with aria-invalid on the trigger', () => {
+    const { getByTestId } = render(Invalid)
+    const trigger = getByTestId('input-field-select__trigger')
+    expect(trigger.getAttribute('aria-invalid')).toBe('true')
+  })
+
+  it('renders the Disabled story fixture with a disabled trigger', () => {
+    const { getByTestId } = render(Disabled)
+    const trigger = getByTestId('input-field-select__trigger') as HTMLButtonElement
+    expect(trigger.disabled).toBe(true)
+  })
+
+  it('renders the Multiple story fixture with multi-select mode on the root select', () => {
+    const { getByTestId } = render(Multiple)
+    const inner = getByTestId('input-field-select__select')
+    expect(inner.getAttribute('data-mode')).toBe('multiple')
+  })
+})
diff --git a/packages/webkit/src/components/inputs/field-select/field-select.vue b/packages/webkit/src/components/inputs/field-select/field-select.vue
new file mode 100644
index 000000000..c79feb2d3
--- /dev/null
+++ b/packages/webkit/src/components/inputs/field-select/field-select.vue
@@ -0,0 +1,154 @@
+<script setup lang="ts">
+  import { computed, useAttrs, useId } from 'vue'
+
+  import HelperText, { type HelperTextKind } from '../helper-text/helper-text.vue'
+  import Label from '../label/label.vue'
+  import Select from '../select/select.vue'
+  import SelectContent from '../select/select-content/select-content.vue'
+  import SelectOption from '../select/select-option/select-option.vue'
+  import SelectTrigger from '../select/select-trigger/select-trigger.vue'
+
+  defineOptions({
+    name: 'FieldSelect',
+    inheritAttrs: false
+  })
+
+  export type FieldSelectSize = 'small' | 'medium' | 'large'
+  export type FieldSelectValue = string | number | unknown[] | undefined
+  export interface FieldSelectOption {
+    /** Stable value that identifies this option in the selection. */
+    value: unknown
+    /** Human-readable label rendered inside the option. */
+    label: string
+    /** Disables this individual option. */
+    disabled?: boolean
+  }
+
+  interface Props {
+    /** Options rendered inside the dropdown. When empty, no options render. */
+    options?: FieldSelectOption[]
+    /** Text rendered inside the Label. When empty, the label row is omitted. */
+    label?: string
+    /** Placeholder shown on the trigger when nothing is selected. */
+    placeholder?: string
+    /** Auxiliary text rendered inside HelperText. When empty, the helper row is omitted. */
+    helperText?: string
+    /** Size forwarded to the Select trigger. Heights: small=28px, medium=32px, large=40px. */
+    size?: FieldSelectSize
+    /** Switches the component to multi-select; modelValue becomes an array. */
+    multiple?: boolean
+    /** Disables the select and switches the helper to kind=disabled (lock icon). */
+    disabled?: boolean
+    /** Marks the select read-only; value is visible but the dropdown is locked. */
+    readonly?: boolean
+    /** Adds the Required tag to the Label and sets aria-required on the trigger. */
+    required?: boolean
+    /** Switches the helper to kind=invalid and applies invalid border/ring tokens. */
+    invalid?: boolean
+    /** id for the trigger; consumed by Label via for and by aria-describedby wiring. */
+    inputId?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    options: () => [],
+    label: '',
+    placeholder: '',
+    helperText: '',
+    size: 'medium',
+    multiple: false,
+    disabled: false,
+    readonly: false,
+    required: false,
+    invalid: false,
+    inputId: ''
+  })
+
+  const modelValue = defineModel<FieldSelectValue>({ default: undefined })
+
+  defineSlots<{
+    default(): unknown
+  }>()
+
+  const attrs = useAttrs()
+  const generatedId = useId()
+
+  const testId = computed(
+    () => (attrs['data-testid'] as string | undefined) ?? 'input-field-select'
+  )
+
+  const resolvedInputId = computed(() => props.inputId || generatedId)
+  const helperId = computed(() => `${resolvedInputId.value}-helper`)
+
+  const helperKind = computed<HelperTextKind>(() => {
+    if (props.disabled) return 'disabled'
+    if (props.invalid) return 'invalid'
+    if (props.required) return 'required'
+    return 'helper'
+  })
+
+  const effectiveHelperText = computed(() => {
+    if (props.helperText) return props.helperText
+    if (props.disabled) return 'This field is locked.'
+    return ''
+  })
+
+  const describedBy = computed(() => (effectiveHelperText.value ? helperId.value : undefined))
+</script>
+
+<template>
+  <div
+    v-bind="$attrs"
+    :data-testid="testId"
+    :data-size="size"
+    :data-disabled="disabled || null"
+    :data-readonly="readonly || null"
+    :data-invalid="invalid || null"
+    :data-required="required || null"
+    class="flex flex-col gap-[var(--spacing-xs)] w-full"
+  >
+    <Label
+      v-if="label"
+      :label="label"
+      :required="required"
+      :for="resolvedInputId"
+      :data-testid="`${testId}__label`"
+    />
+    <Select
+      v-model="modelValue"
+      :multiple="multiple"
+      :placeholder="placeholder"
+      :size="size"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      :invalid="invalid"
+      :data-testid="`${testId}__select`"
+    >
+      <SelectTrigger
+        :id="resolvedInputId"
+        :aria-describedby="describedBy"
+        :data-testid="`${testId}__trigger`"
+      />
+      <SelectContent :data-testid="`${testId}__content`">
+        <slot>
+          <SelectOption
+            v-for="option in options"
+            :key="String(option.value)"
+            :value="option.value"
+            :disabled="option.disabled"
+            :data-testid="`${testId}__option`"
+          >
+            {{ option.label }}
+          </SelectOption>
+        </slot>
+      </SelectContent>
+    </Select>
+    <HelperText
+      v-if="effectiveHelperText"
+      :id="helperId"
+      :label="effectiveHelperText"
+      :kind="helperKind"
+      :data-testid="`${testId}__helper`"
+    />
+  </div>
+</template>
diff --git a/packages/webkit/src/components/inputs/multi-select/multi-select-content/multi-select-content.vue b/packages/webkit/src/components/inputs/multi-select/multi-select-content/multi-select-content.vue
index d8288b925..d61149a0d 100644
--- a/packages/webkit/src/components/inputs/multi-select/multi-select-content/multi-select-content.vue
+++ b/packages/webkit/src/components/inputs/multi-select/multi-select-content/multi-select-content.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'
 
+  import { getFixedFrame } from '../../../../utils/containing-block'
   import ScrollArea from '../../../layout/scroll-area/scroll-area.vue'
   import { multiSelectContextKey } from '../injection-key'
 
@@ -28,10 +29,16 @@
     const trigger = ctx.triggerRef.value
     if (!trigger) return
     const rect = trigger.getBoundingClientRect()
+    // The panel is fixed inside the Teleport target, which may sit under a
+    // transformed ancestor (Storybook's zoom scales the preview body). Express
+    // the trigger's viewport rect in that frame's space so it is not scaled twice.
+    const frame = getFixedFrame(root.value)
     position.value = {
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
+      // The 4px gap is added after the conversion so it stays 4 layout pixels
+      // and scales with the frame, like the panel itself.
+      top: (rect.bottom - frame.top) / frame.scaleY + 4,
+      left: (rect.left - frame.left) / frame.scaleX,
+      width: rect.width / frame.scaleX
     }
   }
 
diff --git a/packages/webkit/src/components/inputs/multi-select/multi-select-option/multi-select-option.vue b/packages/webkit/src/components/inputs/multi-select/multi-select-option/multi-select-option.vue
index 378c83321..a2f79a066 100644
--- a/packages/webkit/src/components/inputs/multi-select/multi-select-option/multi-select-option.vue
+++ b/packages/webkit/src/components/inputs/multi-select/multi-select-option/multi-select-option.vue
@@ -67,7 +67,7 @@
     :data-selected="selected || null"
     :data-disabled="disabled || null"
     :class="attrs.class"
-    class="flex h-8 cursor-pointer select-none items-center gap-[var(--spacing-xs)] rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-label-sm text-[var(--text-default)] outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] data-[selected]:bg-[var(--bg-selected)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+    class="flex h-8 cursor-pointer select-none items-center gap-[var(--spacing-xs)] rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-label-sm text-[var(--text-default)] outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ring-color)] data-[selected]:bg-[var(--bg-selected)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
     @click="onClick"
     @keydown="onKeydown"
   >
diff --git a/packages/webkit/src/components/inputs/multi-select/multi-select.test.ts b/packages/webkit/src/components/inputs/multi-select/multi-select.test.ts
index 1c26908b2..6046e57d7 100644
--- a/packages/webkit/src/components/inputs/multi-select/multi-select.test.ts
+++ b/packages/webkit/src/components/inputs/multi-select/multi-select.test.ts
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/vue3'
 import { fireEvent, render } from '@testing-library/vue'
 import { describe, expect, it } from 'vitest'
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, nextTick, ref } from 'vue'
 
 import * as stories from '../../../../../../apps/storybook/src/stories/components/inputs/multi-select/MultiSelect.stories'
 import MultiSelect, {
@@ -107,6 +107,48 @@ describe('MultiSelect (composition / overlay)', () => {
     expect(MultiSelect.Option).toBe(MultiSelectOption)
   })
 
+  // ---- panel anchoring under a transformed ancestor -----------------------
+  // The panel is `position: fixed` inside its Teleport target (document.body).
+  // A transform on an ancestor of that target makes it the panel's containing
+  // block, so viewport coordinates written to top/left get scaled a second time
+  // and the panel lands away from the trigger. Storybook's zoom control does
+  // exactly this — it scales the preview body.
+  it('anchors the panel to the trigger when the Teleport target is scaled', async () => {
+    const previousTransform = document.body.style.transform
+    const previousOrigin = document.body.style.transformOrigin
+    document.body.style.transformOrigin = 'top left'
+    document.body.style.transform = 'scale(1.25)'
+
+    try {
+      const { getByTestId } = render(Harness, { props: { open: false } })
+      cleanupTeleported()
+
+      const trigger = getByTestId('multi-select-trigger')
+      await fireEvent.click(trigger)
+
+      const panel = listbox()
+      expect(panel).not.toBeNull()
+      // The panel measures the trigger one tick after it renders, so let that
+      // continuation land before reading geometry.
+      await nextTick()
+
+      const triggerRect = trigger.getBoundingClientRect()
+      const panelRect = (panel as HTMLElement).getBoundingClientRect()
+
+      // Alignment, not absolute coordinates: the panel's left edge and width
+      // track the trigger's, and it sits just below it. Before the fix these
+      // were off by the scale factor (1.25x).
+      expect(Math.abs(panelRect.left - triggerRect.left)).toBeLessThanOrEqual(1)
+      expect(Math.abs(panelRect.width - triggerRect.width)).toBeLessThanOrEqual(1)
+      expect(panelRect.top).toBeGreaterThanOrEqual(triggerRect.bottom)
+      expect(panelRect.top - triggerRect.bottom).toBeLessThanOrEqual(8)
+    } finally {
+      document.body.style.transform = previousTransform
+      document.body.style.transformOrigin = previousOrigin
+      cleanupTeleported()
+    }
+  })
+
   // ---- trigger opens the teleported panel ---------------------------------
   it('opens the teleported listbox from the trigger and closes on second click', async () => {
     const { getByTestId } = render(Harness, { props: { open: false } })
diff --git a/packages/webkit/src/components/inputs/select/select-content/select-content.vue b/packages/webkit/src/components/inputs/select/select-content/select-content.vue
index c7233bd0c..f054659de 100644
--- a/packages/webkit/src/components/inputs/select/select-content/select-content.vue
+++ b/packages/webkit/src/components/inputs/select/select-content/select-content.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
   import { computed, inject, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, watch } from 'vue'
 
+  import { getFixedFrame } from '../../../../utils/containing-block'
   import ScrollArea from '../../../layout/scroll-area/scroll-area.vue'
   import { selectContextKey } from '../injection-key'
 
@@ -26,10 +27,16 @@
     const trigger = ctx.triggerRef.value
     if (!trigger) return
     const rect = trigger.getBoundingClientRect()
+    // The panel is fixed inside the Teleport target, which may sit under a
+    // transformed ancestor (Storybook's zoom scales the preview body). Express
+    // the trigger's viewport rect in that frame's space so it is not scaled twice.
+    const frame = getFixedFrame(root.value)
     position.value = {
-      top: rect.bottom + 4,
-      left: rect.left,
-      width: rect.width
+      // The 4px gap is added after the conversion so it stays 4 layout pixels
+      // and scales with the frame, like the panel itself.
+      top: (rect.bottom - frame.top) / frame.scaleY + 4,
+      left: (rect.left - frame.left) / frame.scaleX,
+      width: rect.width / frame.scaleX
     }
   }
 
@@ -82,6 +89,11 @@
     const target = event.target as Node | null
     if (!el || !target) return
     if (el.contains(target)) return
+    // Bail when the pointer lands on the trigger — the trigger's own @click
+    // will toggle the state; closing here would race the reopen and either
+    // require a "double click" to close or emit update:open twice per press.
+    const trigger = ctx.triggerRef.value
+    if (trigger && trigger.contains(target)) return
     ctx.setOpen(false)
   }
 
diff --git a/packages/webkit/src/components/inputs/select/select-option/select-option.vue b/packages/webkit/src/components/inputs/select/select-option/select-option.vue
index 088aa3070..a2cccc917 100644
--- a/packages/webkit/src/components/inputs/select/select-option/select-option.vue
+++ b/packages/webkit/src/components/inputs/select/select-option/select-option.vue
@@ -65,7 +65,7 @@
     :data-disabled="disabled || null"
     :data-mode="ctx.multiple.value ? 'multiple' : 'single'"
     :class="attrs.class"
-    class="flex h-8 cursor-pointer select-none items-center gap-[var(--spacing-xs)] rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-label-sm text-[var(--text-default)] outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] data-[selected]:bg-[var(--bg-selected)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+    class="flex h-8 cursor-pointer select-none items-center gap-[var(--spacing-xs)] rounded-[var(--shape-elements)] px-[var(--spacing-xs)] py-[var(--spacing-xxs)] text-label-sm text-[var(--text-default)] outline-none transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--bg-hover)] focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--ring-color)] data-[selected]:bg-[var(--bg-selected)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
     @click="onClick"
     @keydown="onKeydown"
   >
diff --git a/packages/webkit/src/components/inputs/select/select.test.ts b/packages/webkit/src/components/inputs/select/select.test.ts
index 7427f9684..4c991fffa 100644
--- a/packages/webkit/src/components/inputs/select/select.test.ts
+++ b/packages/webkit/src/components/inputs/select/select.test.ts
@@ -1,7 +1,7 @@
 import { composeStories } from '@storybook/vue3'
 import { fireEvent, render, within } from '@testing-library/vue'
 import { afterEach, describe, expect, it } from 'vitest'
-import { defineComponent, h, ref } from 'vue'
+import { defineComponent, h, nextTick, ref } from 'vue'
 
 import * as stories from '../../../../../../apps/storybook/src/stories/components/inputs/select/Select.stories'
 import { expectNoA11yViolations } from '../../../test/axe'
@@ -384,6 +384,117 @@ describe('Select (compound / overlay)', () => {
     expect(trigger.getAttribute('role')).toBe('combobox')
   })
 
+  // ---- Focus ring: arrow-key navigation focuses the option (ENG-46730) -----
+  // Options carry `focus-visible:ring-2 focus-visible:ring-[var(--ring-color)]`
+  // and `tabindex="-1"`, so the ring shows when the keyboard handler moves
+  // focus to the option via `.focus()`. This regression test asserts the
+  // handler actually moves DOM focus, which is the missing link when the ring
+  // does not appear.
+  it('moves DOM focus onto the first option on ArrowDown from within the panel (ENG-46730)', async () => {
+    render(Host, { props: { startOpen: true } })
+    const content = getContent() as HTMLElement
+    expect(content).not.toBeNull()
+
+    await fireEvent.keyDown(content, { key: 'ArrowDown' })
+
+    const options = getOptions()
+    expect(document.activeElement).toBe(options[0])
+    // Options render tabindex=-1 + the focus-visible ring classes; asserting
+    // both here proves the ring is reachable by keyboard navigation.
+    expect(options[0].getAttribute('tabindex')).toBe('-1')
+    expect(options[0].className).toContain('focus-visible:ring-2')
+  })
+
+  it('wraps ArrowDown from the last option back to the first (ENG-46730)', async () => {
+    render(Host, { props: { startOpen: true } })
+    const content = getContent() as HTMLElement
+    const options = getOptions()
+    options[options.length - 1].focus()
+
+    await fireEvent.keyDown(content, { key: 'ArrowDown' })
+
+    expect(document.activeElement).toBe(options[0])
+  })
+
+  // ---- Regression: trigger reopen (ENG-46739) -------------------------------
+  // A real pointer press fires `pointerdown` then `click`. When the dropdown
+  // is open, the content's document-level capture listener saw the trigger
+  // pointerdown as an "outside" click and closed the panel; the trigger's own
+  // @click then re-opened it. The visible symptom is that closing the panel
+  // via the trigger appeared to require a second click, or emitted
+  // update:open twice per press. The fix ignores pointerdown on the trigger.
+  it('does not reopen the panel when the trigger receives a real pointerdown+click while open (ENG-46739)', async () => {
+    const { getByTestId } = render(Host, { props: { startOpen: true } })
+    const trigger = getByTestId('select-trigger')
+    expect(getContent()).not.toBeNull()
+
+    // Simulate a real press: pointerdown lands on the trigger with the panel
+    // open. The document capture listener runs first; the trigger's click
+    // handler runs after.
+    await fireEvent.pointerDown(trigger)
+    await fireEvent.click(trigger)
+
+    // Panel must be closed. Before the fix, the pointerdown closed the panel
+    // and the click re-opened it, leaving the panel visible.
+    expect(getContent()).toBeNull()
+  })
+
+  it('opens exactly once on a real trigger press when starting closed (ENG-46739)', async () => {
+    const { getByTestId, emitted } = render(Select, {
+      props: { placeholder: 'x' },
+      slots: {
+        default: () => [h(SelectTrigger), h(SelectContent)]
+      }
+    })
+    const trigger = getByTestId('select-trigger')
+
+    await fireEvent.pointerDown(trigger)
+    await fireEvent.click(trigger)
+
+    // The trigger click drives one open transition. Before the fix, the
+    // document pointerdown listener registered on the previous open cycle
+    // could still see the press and emit an extra update:open(false).
+    const events = emitted()['update:open']
+    expect(events).toBeTruthy()
+    expect(events).toEqual([[true]])
+  })
+
+  // ---- Regression: panel anchoring under a transformed ancestor -------------
+  // The panel is `position: fixed` inside its Teleport target (document.body).
+  // A transform on an ancestor of that target makes it the panel's containing
+  // block, so viewport coordinates written to top/left get scaled a second time
+  // and the panel lands away from the trigger. Storybook's zoom control does
+  // exactly this — it scales the preview body.
+  it('anchors the panel to the trigger when the Teleport target is scaled', async () => {
+    const previousTransform = document.body.style.transform
+    const previousOrigin = document.body.style.transformOrigin
+    document.body.style.transformOrigin = 'top left'
+    document.body.style.transform = 'scale(1.25)'
+
+    try {
+      const { getByTestId } = render(Host)
+      const trigger = getByTestId('select-trigger')
+      await fireEvent.click(trigger)
+
+      const panel = getContent()
+      expect(panel).not.toBeNull()
+      // The panel measures the trigger one tick after it renders, so let that
+      // continuation land before reading geometry.
+      await nextTick()
+
+      const triggerRect = trigger.getBoundingClientRect()
+      const panelRect = (panel as HTMLElement).getBoundingClientRect()
+
+      expect(Math.abs(panelRect.left - triggerRect.left)).toBeLessThanOrEqual(1)
+      expect(Math.abs(panelRect.width - triggerRect.width)).toBeLessThanOrEqual(1)
+      expect(panelRect.top).toBeGreaterThanOrEqual(triggerRect.bottom)
+      expect(panelRect.top - triggerRect.bottom).toBeLessThanOrEqual(8)
+    } finally {
+      document.body.style.transform = previousTransform
+      document.body.style.transformOrigin = previousOrigin
+    }
+  })
+
   // ---- enum smoke floor -----------------------------------------------------
   it.each(['small', 'medium', 'large'] as const)(
     'reflects size "%s" as data-size on root and trigger',
diff --git a/packages/webkit/src/utils/containing-block.ts b/packages/webkit/src/utils/containing-block.ts
new file mode 100644
index 000000000..ed1e9a38d
--- /dev/null
+++ b/packages/webkit/src/utils/containing-block.ts
@@ -0,0 +1,58 @@
+/**
+ * A `position: fixed` element is positioned against the viewport *unless* an
+ * ancestor establishes a containing block (a transform, filter, perspective,
+ * `will-change`, `contain`, or a container query). When one does, the `top` /
+ * `left` we write are interpreted in that ancestor's own, possibly scaled,
+ * coordinate space — so viewport coordinates read from `getBoundingClientRect()`
+ * would be transformed a second time and the panel lands off-target.
+ *
+ * Storybook does exactly this: its zoom control applies a `transform: scale()`
+ * to the preview iframe's `body`, which is also the Teleport target for every
+ * overlay panel in the package.
+ */
+
+/** Offset and scale of the frame a fixed-position element is laid out against. */
+export interface FixedFrame {
+  /** Left edge of the frame, in viewport pixels. */
+  left: number
+  /** Top edge of the frame, in viewport pixels. */
+  top: number
+  /** Horizontal scale the frame applies to its children. Never 0. */
+  scaleX: number
+  /** Vertical scale the frame applies to its children. Never 0. */
+  scaleY: number
+}
+
+const IDENTITY: FixedFrame = { left: 0, top: 0, scaleX: 1, scaleY: 1 }
+
+const establishesContainingBlock = (style: globalThis.CSSStyleDeclaration): boolean =>
+  style.transform !== 'none' ||
+  style.perspective !== 'none' ||
+  style.filter !== 'none' ||
+  style.backdropFilter !== 'none' ||
+  /transform|perspective|filter/.test(style.willChange) ||
+  /paint|layout|strict|content/.test(style.contain) ||
+  style.containerType !== 'normal'
+
+/**
+ * Resolves the frame a fixed-position `panel` is laid out against. Returns the
+ * identity frame when that frame is the viewport, so callers can apply the same
+ * arithmetic unconditionally.
+ */
+export const getFixedFrame = (panel: globalThis.HTMLElement | null | undefined): FixedFrame => {
+  if (!panel || typeof globalThis.getComputedStyle !== 'function') return IDENTITY
+  let node = panel.parentElement
+  while (node) {
+    if (establishesContainingBlock(globalThis.getComputedStyle(node))) {
+      const rect = node.getBoundingClientRect()
+      return {
+        left: rect.left,
+        top: rect.top,
+        scaleX: node.offsetWidth > 0 ? rect.width / node.offsetWidth : 1,
+        scaleY: node.offsetHeight > 0 ? rect.height / node.offsetHeight : 1
+      }
+    }
+    node = node.parentElement
+  }
+  return IDENTITY
+}