diff --git a/docs/.vitepress/themeConfig.ts b/docs/.vitepress/themeConfig.ts
index a5f10ae3a..97ddec2fc 100644
--- a/docs/.vitepress/themeConfig.ts
+++ b/docs/.vitepress/themeConfig.ts
@@ -18,6 +18,7 @@ const sharedSidebarItems = [
       { text: 'Layout 布局', link: 'layout' },
       { text: 'Bubble 气泡', link: 'bubble' },
       { text: 'Sender 消息输入框', link: 'sender' },
+      { text: 'ModelSelector 模型选择器', link: 'model-selector' },
       { text: 'Prompts 提示集', link: 'prompts' },
       { text: 'Welcome 欢迎', link: 'welcome' },
       { text: 'Feedback 气泡反馈', link: 'feedback' },
diff --git a/docs/demos/icons/iconMeta.ts b/docs/demos/icons/iconMeta.ts
index 83712f2a7..0770a0d90 100644
--- a/docs/demos/icons/iconMeta.ts
+++ b/docs/demos/icons/iconMeta.ts
@@ -148,6 +148,7 @@ export const iconCategoryGroups: IconCategoryGroup[] = [
       'IconOpenai',
       'IconClaude',
       'IconDeepseek',
+      'IconGemini',
       'IconBailian',
       'IconModelscope',
       'IconOpenrouter',
diff --git a/docs/demos/model-selector/basic.vue b/docs/demos/model-selector/basic.vue
new file mode 100644
index 000000000..bfc328c57
--- /dev/null
+++ b/docs/demos/model-selector/basic.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+import { IconAi, IconAtom, IconThink } from '@opentiny/tiny-robot-svgs'
+
+const model = shallowRef<string | null>('general-model')
+
+const models = [
+  { value: 'general-model', label: '通用模型', icon: IconAi },
+  { value: 'reasoning-model', label: '推理模型', icon: IconThink },
+  { value: 'lightweight-model', label: '轻量模型', icon: IconAtom },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-basic-demo">
+    <TrModelSelector v-model="model" :models="models" />
+    <span aria-live="polite">当前模型：{{ model }}</span>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-basic-demo {
+  display: flex;
+  min-height: 96px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-basic-demo span {
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+}
+</style>
diff --git a/docs/demos/model-selector/icon-trigger.vue b/docs/demos/model-selector/icon-trigger.vue
new file mode 100644
index 000000000..5812b44d1
--- /dev/null
+++ b/docs/demos/model-selector/icon-trigger.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+import { IconArrowDown } from '@opentiny/tiny-robot-svgs'
+
+const model = shallowRef<string | null>('general-model')
+
+const models = [
+  { value: 'general-model', label: '通用模型' },
+  { value: 'reasoning-model', label: '推理模型' },
+  { value: 'lightweight-model', label: '轻量模型' },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-trigger-demo">
+    <TrModelSelector v-model="model" :models="models">
+      <template #trigger="{ label, open }">
+        <span class="model-selector-trigger-demo__content">
+          <span class="model-selector-trigger-demo__badge" aria-hidden="true">AI</span>
+          <span class="model-selector-trigger-demo__label">{{ label }}</span>
+          <IconArrowDown
+            class="model-selector-trigger-demo__arrow"
+            :class="{ 'is-open': open }"
+            aria-hidden="true"
+            focusable="false"
+          />
+        </span>
+      </template>
+    </TrModelSelector>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-trigger-demo {
+  display: flex;
+  min-height: 96px;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-trigger-demo__content {
+  display: inline-flex;
+  width: 100%;
+  align-items: center;
+  gap: 8px;
+}
+
+.model-selector-trigger-demo__badge {
+  display: inline-grid;
+  width: 24px;
+  height: 24px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 7px;
+  background: var(--vp-c-brand-soft);
+  color: var(--vp-c-brand-1);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.model-selector-trigger-demo__label {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-selector-trigger-demo__arrow {
+  width: 1em;
+  height: 1em;
+  flex: 0 0 auto;
+  transition: transform 0.18s ease;
+}
+
+.model-selector-trigger-demo__arrow.is-open {
+  transform: rotate(180deg);
+}
+
+@media (max-width: 480px) {
+  .model-selector-trigger-demo__label,
+  .model-selector-trigger-demo__arrow {
+    display: none;
+  }
+}
+</style>
diff --git a/docs/demos/model-selector/reasoning-effort.vue b/docs/demos/model-selector/reasoning-effort.vue
new file mode 100644
index 000000000..dbef7bed7
--- /dev/null
+++ b/docs/demos/model-selector/reasoning-effort.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+
+const model = shallowRef<string | null>('reasoning-standard')
+const reasoningEffort = shallowRef<string | null>('medium')
+
+const models = [
+  {
+    value: 'reasoning-standard',
+    label: '标准推理模型',
+    description: '使用内置 Low、Medium、High 思考强度选项',
+    reasoningEfforts: true,
+  },
+  {
+    value: 'reasoning-custom',
+    label: '自定义推理模型',
+    description: '使用业务自定义的选项和值',
+    reasoningEfforts: [
+      { value: 'fast', label: '快速' },
+      { value: 'balanced', label: '均衡' },
+      { value: 'deep', label: '深度' },
+      { value: 'max', label: '极致', disabled: true },
+    ],
+  },
+  {
+    value: 'general-model',
+    label: '通用模型',
+    description: '未声明思考强度',
+  },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-effort-demo">
+    <TrModelSelector
+      v-model="model"
+      v-model:reasoning-effort="reasoningEffort"
+      :models="models"
+      reasoning-effort-label="思考强度"
+    />
+    <span aria-live="polite">当前值：{{ reasoningEffort ?? '未选择' }}</span>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-effort-demo {
+  display: flex;
+  min-height: 120px;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-effort-demo span {
+  color: var(--vp-c-text-2);
+  font-size: 13px;
+}
+</style>
diff --git a/docs/demos/model-selector/search-and-group.vue b/docs/demos/model-selector/search-and-group.vue
new file mode 100644
index 000000000..564d86000
--- /dev/null
+++ b/docs/demos/model-selector/search-and-group.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+import { IconAi, IconAtom, IconThink } from '@opentiny/tiny-robot-svgs'
+
+const model = shallowRef<string | null>('general-pro')
+
+const models = [
+  {
+    value: 'general-pro',
+    label: '通用模型 Pro',
+    description: '适合问答、写作和代码生成',
+    group: '通用模型',
+    icon: IconAi,
+  },
+  {
+    value: 'general-fast',
+    label: '通用模型 Fast',
+    description: '低延迟，适合高频交互',
+    group: '通用模型',
+    icon: IconAtom,
+  },
+  {
+    value: 'reasoning-pro',
+    label: '推理模型 Pro',
+    description: '适合数学和复杂分析',
+    group: '推理模型',
+    icon: IconThink,
+  },
+  {
+    value: 'reasoning-preview',
+    label: '推理模型 Preview',
+    description: '当前工作区暂不可用',
+    group: '推理模型',
+    disabled: true,
+    icon: IconThink,
+  },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-search-demo">
+    <TrModelSelector v-model="model" :models="models" searchable search-placeholder="搜索名称、能力或分组" />
+  </div>
+</template>
+
+<style scoped>
+.model-selector-search-demo {
+  display: flex;
+  min-height: 120px;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+</style>
diff --git a/docs/demos/model-selector/slots.vue b/docs/demos/model-selector/slots.vue
new file mode 100644
index 000000000..d7571668b
--- /dev/null
+++ b/docs/demos/model-selector/slots.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+
+const model = shallowRef<string | null>('general-pro')
+
+const models = [
+  {
+    value: 'general-pro',
+    label: '通用模型 Pro',
+    description: '适合问答、写作和代码生成',
+    group: '推荐',
+  },
+  {
+    value: 'reasoning-pro',
+    label: '推理模型 Pro',
+    description: '适合数学和复杂分析',
+    group: '推荐',
+  },
+  {
+    value: 'lightweight-model',
+    label: '轻量模型',
+    description: '低延迟，适合高频交互',
+    group: '其他',
+  },
+] satisfies readonly ModelSelectorOption[]
+</script>
+
+<template>
+  <div class="model-selector-slots-demo">
+    <TrModelSelector
+      v-model="model"
+      :models="models"
+      searchable
+      search-placeholder="搜索模型"
+      panel-class="model-selector-custom-panel"
+    >
+      <template #header="{ query }">
+        <div class="model-selector-slots-demo__header">
+          <strong>选择工作模型</strong>
+          <small>{{ query ? `正在搜索：${query}` : '根据当前任务选择合适的模型' }}</small>
+        </div>
+      </template>
+
+      <template #item="{ option, selected }">
+        <span class="model-selector-slots-demo__item">
+          <span>
+            <strong>{{ option.label }}</strong>
+            <small>{{ option.description }}</small>
+          </span>
+          <span v-if="selected" class="model-selector-slots-demo__selected">当前</span>
+        </span>
+      </template>
+
+      <template #empty="{ query }">
+        <span class="model-selector-slots-demo__empty"> 没有找到“{{ query }}”，请尝试其他关键词。 </span>
+      </template>
+
+      <template #footer="{ option, close }">
+        <div class="model-selector-slots-demo__footer">
+          <small>已选择：{{ option?.label ?? '暂无' }}</small>
+          <button type="button" @click="close">完成</button>
+        </div>
+      </template>
+    </TrModelSelector>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-slots-demo {
+  display: flex;
+  min-height: 120px;
+  align-items: center;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-slots-demo__header,
+.model-selector-slots-demo__item > span:first-child {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.model-selector-slots-demo__header small,
+.model-selector-slots-demo__item small,
+.model-selector-slots-demo__footer small,
+.model-selector-slots-demo__empty {
+  color: var(--vp-c-text-2);
+  font-size: 12px;
+}
+
+.model-selector-slots-demo__item,
+.model-selector-slots-demo__footer {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.model-selector-slots-demo__item strong,
+.model-selector-slots-demo__item small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.model-selector-slots-demo__selected {
+  flex: 0 0 auto;
+  color: var(--vp-c-brand-1);
+  font-size: 12px;
+}
+
+.model-selector-slots-demo__footer button {
+  min-height: 28px;
+  padding: 3px 10px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 7px;
+  background: var(--vp-c-bg);
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+}
+</style>
diff --git a/docs/demos/model-selector/variants.vue b/docs/demos/model-selector/variants.vue
new file mode 100644
index 000000000..2c6e5dbc2
--- /dev/null
+++ b/docs/demos/model-selector/variants.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { TrModelSelector, type ModelSelectorOption } from '@opentiny/tiny-robot'
+
+const models = [
+  { value: 'general-model', label: '通用模型' },
+  { value: 'reasoning-model', label: '推理模型' },
+] satisfies readonly ModelSelectorOption[]
+
+const sizes = [
+  { label: 'small', value: 'small' as const },
+  { label: 'normal', value: 'normal' as const },
+  { label: 'large', value: 'large' as const },
+]
+
+const variants = [
+  { label: 'outline', value: 'outline' as const },
+  { label: 'ghost', value: 'ghost' as const },
+  { label: 'muted', value: 'muted' as const },
+]
+</script>
+
+<template>
+  <div class="model-selector-variants-demo">
+    <section class="model-selector-variants-demo__group">
+      <h4>尺寸</h4>
+      <div class="model-selector-variants-demo__list">
+        <div v-for="size in sizes" :key="size.value" class="model-selector-variants-demo__item">
+          <span>{{ size.label }}</span>
+          <TrModelSelector :models="models" default-value="general-model" :size="size.value" />
+        </div>
+      </div>
+    </section>
+
+    <section class="model-selector-variants-demo__group">
+      <h4>外观</h4>
+      <div class="model-selector-variants-demo__list">
+        <div v-for="variant in variants" :key="variant.value" class="model-selector-variants-demo__item">
+          <span>{{ variant.label }}</span>
+          <TrModelSelector :models="models" default-value="general-model" :variant="variant.value" />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-variants-demo {
+  display: grid;
+  gap: 24px;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 12px;
+  background: var(--vp-c-bg);
+}
+
+.model-selector-variants-demo__group {
+  display: grid;
+  gap: 12px;
+}
+
+.model-selector-variants-demo__group h4 {
+  margin: 0;
+  color: var(--vp-c-text-1);
+  font-size: 14px;
+}
+
+.model-selector-variants-demo__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.model-selector-variants-demo__item {
+  display: flex;
+  min-width: 140px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+}
+
+.model-selector-variants-demo__item > span {
+  color: var(--vp-c-text-2);
+  font-size: 12px;
+}
+</style>
diff --git a/docs/src/components/model-selector.md b/docs/src/components/model-selector.md
new file mode 100644
index 000000000..6afdd723f
--- /dev/null
+++ b/docs/src/components/model-selector.md
@@ -0,0 +1,355 @@
+---
+outline: [1, 3]
+---
+
+# ModelSelector 模型选择器
+
+ModelSelector 用于从一组 AI 模型中选择当前模型。组件内置搜索、分组、禁用状态、思考强度、浮层定位和键盘操作，也支持通过插槽定制触发器与选项面板。
+
+适合聊天输入区、模型配置表单或工作流工具栏等场景。模型目录、Provider 路由、价格、上下文长度和请求参数属于应用层业务逻辑。
+
+::: tip 组件边界
+ModelSelector 只展示传入的 `models` 并通知选择结果。它不会请求模型列表、判断模型能力，也不会把思考强度转换为 Provider 请求参数。
+:::
+
+## 基础用法
+
+`models` 提供候选模型，`v-model` 绑定当前模型。每个模型最少包含唯一的 `value` 和用于展示的 `label`。
+
+<demo vue="../../demos/model-selector/basic.vue" title="基础用法" description="models 与 v-model 的基础选择。" />
+
+### 模型选项
+
+模型选项仅承载界面所需字段。价格、密钥和 Provider 参数等数据属于请求层业务逻辑。
+
+| 字段               | 必需 | 说明                         |
+| ------------------ | ---- | ---------------------------- |
+| `value`            | 是   | 模型的稳定且唯一的标识       |
+| `label`            | 是   | 模型名称                     |
+| `description`      | 否   | 模型能力、适用场景等辅助说明 |
+| `icon`             | 否   | Vue 组件或图片 URL           |
+| `disabled`         | 否   | 是否保留展示但禁止选择       |
+| `group`            | 否   | 分组标识和分组标题           |
+| `reasoningEfforts` | 否   | 当前模型支持的思考强度       |
+
+面板会根据选项内容收缩或展开，至少与触发器同宽，并受视口可用宽度限制。名称和描述所在文字列的默认最大宽度为 320px；面板打开期间可随更宽内容增长，不会因搜索过滤而收缩。
+
+## 搜索与分组
+
+模型数量较多时，`searchable` 可显示搜索框，`group` 可组织模型分组。禁用项仍会显示，但无法被选择。
+
+<demo vue="../../demos/model-selector/search-and-group.vue" title="搜索与分组" description="名称、描述、分组搜索与禁用状态。" />
+
+默认搜索不区分大小写，会匹配 `label`、`value`、`description` 和 `group`。未设置 `group` 的选项进入无标题分组。
+
+`filterMethod(query, option)` 可承载拼音、标签或其他业务搜索规则，并会完全替代内置搜索逻辑。
+
+```ts
+import type { ModelSelectorFilterMethod } from '@opentiny/tiny-robot'
+
+const filterMethod: ModelSelectorFilterMethod = (query, option) => {
+  return option.label.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase())
+}
+```
+
+## 思考强度
+
+`reasoningEfforts` 描述模型支持的思考强度，组件会在面板底部显示对应选项。`v-model:reasoning-effort` 绑定当前值。
+
+<demo vue="../../demos/model-selector/reasoning-effort.vue" title="思考强度" description="内置选项、自定义选项与不支持思考强度的模型。" />
+
+- `true` 对应内置的 `Low`、`Medium`、`High`。
+- 选项数组支持自定义 `value`、`label` 和 `disabled`。
+- `false`、`undefined` 或空数组表示不显示思考强度。
+
+思考强度是独立状态。切换到不支持当前值的模型时，组件会保留该值，但不会在触发器或面板中显示为有效选项；切回支持它的模型后会恢复显示。组件不会自行清空业务状态。
+
+::: tip 切换模型时不会重置
+不同模型具有不同默认思考强度的场景，可由消费层监听模型变化并更新 `reasoningEffort`。
+:::
+
+## 尺寸与外观
+
+`size` 支持 `small`、`normal` 和 `large`；`variant` 控制触发器外观，支持 `outline`、`ghost` 和 `muted`。尺寸会改变触发器、字号与间距，不会将面板宽度固定为对应档位。
+
+<demo vue="../../demos/model-selector/variants.vue" title="尺寸与外观" description="三种尺寸与三种外观的展示效果。" />
+
+## 自定义内容
+
+插槽只替换显示内容，选择、搜索、键盘操作和浮层定位仍由组件处理。
+
+### 自定义触发器
+
+`trigger` 插槽用于调整按钮内容，并提供当前选项、展示文本、展开状态和当前模型支持的思考强度。
+
+<demo vue="../../demos/model-selector/icon-trigger.vue" title="自定义触发器" description="模型标识、展开箭头与窄屏表现的定制效果。" />
+
+插槽会完整替换默认内容，因此图标、文本和展开状态均由插槽渲染。外层已经是真实的 `button`；内部嵌套按钮、链接或输入框会形成无效的交互元素结构。
+
+### 自定义选项面板
+
+`header`、`item`、`empty` 和 `footer` 分别对应面板头部、模型项、空状态和底部区域。
+
+<demo vue="../../demos/model-selector/slots.vue" title="自定义选项面板" description="面板标题、模型项、空状态和底部操作区的定制效果。" />
+
+`item` 位于 `role="option"` 内，适合非交互内容。`header` 和 `footer` 支持按钮、链接或表单控件；作用域中的 `close()` 用于请求关闭面板。
+
+`footer` 插槽会完整替换默认的思考强度区域。自定义 Footer 可通过 `reasoningEfforts`、`reasoningEffortOption` 和 `setReasoningEffort()` 保留思考强度选择能力。
+
+## 控制选中值与面板开关
+
+组件既支持初始值模式，也支持由消费层完全控制状态。状态模式在实例创建时确定，生命周期内切换模式会在开发环境触发警告。
+
+### 初始状态
+
+`defaultValue`、`defaultReasoningEffort` 和 `defaultOpen` 只在初始化时使用。后续交互由组件维护内部状态。
+
+```vue
+<TrModelSelector
+  :models="models"
+  default-value="general-model"
+  default-reasoning-effort="medium"
+  :default-open="false"
+/>
+```
+
+### 完全控制状态
+
+`v-model` 和 `v-model:open` 对应完全受控模式，选中值和面板开关由消费层保存。`v-model` 会自动响应对应的 `update:*` 事件。
+
+```vue
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+
+const model = shallowRef<string | null>('general-model')
+const open = shallowRef(false)
+</script>
+
+<template>
+  <TrModelSelector v-model="model" v-model:open="open" :models="models" />
+</template>
+```
+
+未传入初始值时，组件显示 `placeholder`，不会自动选择第一项。当前值不存在或对应模型被移除时，组件保留原值并显示 `placeholder`，避免模型列表异步变化时替用户选择其他模型。
+
+## 键盘操作与无障碍
+
+| 位置           | 按键                    | 行为                               |
+| -------------- | ----------------------- | ---------------------------------- |
+| 触发器         | `Enter`                 | 打开面板                           |
+| 触发器         | `Space`                 | 通过按钮原生点击行为打开或关闭面板 |
+| 面板           | `Escape`                | 关闭面板并恢复触发器焦点           |
+| 搜索框或列表   | `ArrowDown` / `ArrowUp` | 跳过禁用项移动高亮                 |
+| 非搜索模式列表 | `Home` / `End`          | 跳到首个或末个可用项               |
+| 搜索框或列表   | `Enter`                 | 选择高亮项；输入法组合期间不会误选 |
+| 非搜索模式列表 | `Space`                 | 选择高亮项                         |
+| 思考强度按钮   | `Enter` / `Space`       | 选择思考强度，不关闭面板           |
+
+组件使用真实按钮以及 `combobox`、`listbox`、`option` 等 ARIA 语义。它不会拦截 `Tab` 或重排焦点；面板 Teleport 后，Tab 顺序由实际 DOM 位置决定。
+
+自定义 `trigger` 和 `item` 适合非交互内容。`header` 或 `footer` 中新增控件的可访问名称与键盘行为由消费层提供。
+
+## API
+
+### Props
+
+#### 选中值与开关状态
+
+| 属性名                   | 类型                             | 默认值      | 说明                                             |
+| ------------------------ | -------------------------------- | ----------- | ------------------------------------------------ |
+| `models`                 | `readonly ModelSelectorOption[]` | `[]`        | 模型列表                                         |
+| `modelValue`             | `string \| null`                 | `undefined` | 受控选中值；通过 `update:modelValue` 同步        |
+| `defaultValue`           | `string \| null`                 | `null`      | 非受控初始选中值                                 |
+| `reasoningEffort`        | `string \| null`                 | `undefined` | 受控思考强度；通过 `update:reasoningEffort` 同步 |
+| `defaultReasoningEffort` | `string \| null`                 | `null`      | 非受控初始思考强度                               |
+| `open`                   | `boolean`                        | `undefined` | 受控面板开关；通过 `update:open` 同步            |
+| `defaultOpen`            | `boolean`                        | `false`     | 非受控初始面板开关                               |
+| `disabled`               | `boolean`                        | `false`     | 禁用组件并保持面板关闭                           |
+
+#### 搜索与文案
+
+| 属性名                 | 类型                        | 默认值           | 说明                         |
+| ---------------------- | --------------------------- | ---------------- | ---------------------------- |
+| `searchable`           | `boolean`                   | `false`          | 是否显示搜索框               |
+| `placeholder`          | `string`                    | `'选择模型'`     | 没有匹配选中项时的触发器文本 |
+| `searchPlaceholder`    | `string`                    | `'搜索模型'`     | 搜索框占位文本               |
+| `emptyText`            | `string`                    | `'暂无可用模型'` | 默认空状态文本               |
+| `filterMethod`         | `ModelSelectorFilterMethod` | 内置包含匹配     | 自定义搜索过滤函数           |
+| `reasoningEffortLabel` | `string`                    | `'Thinking'`     | 默认思考强度区域的可见标题   |
+
+#### 外观与浮层
+
+| 属性名       | 类型                      | 默认值                             | 说明                                        |
+| ------------ | ------------------------- | ---------------------------------- | ------------------------------------------- |
+| `variant`    | `ModelSelectorVariant`    | `'outline'`                        | 触发器外观                                  |
+| `size`       | `ModelSelectorSize`       | `'normal'`                         | 触发器和面板尺寸                            |
+| `placement`  | `Placement`               | `'bottom-start'`                   | Floating UI 浮层位置                        |
+| `offset`     | `number`                  | `8`                                | 触发器与浮层的间距                          |
+| `appendTo`   | `string \| HTMLElement`   | 当前 ShadowRoot 或 `document.body` | Teleport 目标；选择器未命中时回退到默认目标 |
+| `panelClass` | `ModelSelectorPanelClass` | —                                  | 附加到面板根元素的 class                    |
+
+### Events
+
+| 事件名                    | 参数                                                   | 说明                                   |
+| ------------------------- | ------------------------------------------------------ | -------------------------------------- |
+| `update:modelValue`       | `(value: string \| null)`                              | 用户选择不同模型时请求更新选中值       |
+| `change`                  | `(option: ModelSelectorOption)`                        | 用户选择不同模型后触发，返回完整选项   |
+| `update:reasoningEffort`  | `(value: string \| null)`                              | 用户选择或清空思考强度时请求更新当前值 |
+| `reasoning-effort-change` | `(option: ModelSelectorReasoningEffortOption \| null)` | 思考强度请求变化后触发                 |
+| `update:open`             | `(open: boolean)`                                      | 请求更新面板开关                       |
+
+事件只响应用户交互，初始化、外部赋值和更新 `models` 不会触发 `change`。选择模型时依次触发 `update:modelValue`、`change` 和 `update:open(false)`；选择思考强度时依次触发 `update:reasoningEffort` 和 `reasoning-effort-change`，并保持面板打开。
+
+### Slots
+
+| 插槽名    | 作用域参数                                                                              | 说明                     |
+| --------- | --------------------------------------------------------------------------------------- | ------------------------ |
+| `trigger` | `{ option, label, open, reasoningEffortOption }`                                        | 替换触发器按钮内容       |
+| `item`    | `{ option, selected, highlighted }`                                                     | 自定义模型项内容         |
+| `empty`   | `{ query }`                                                                             | 自定义空状态             |
+| `header`  | `{ option, query, close }`                                                              | 自定义面板头部           |
+| `footer`  | `{ option, query, close, reasoningEfforts, reasoningEffortOption, setReasoningEffort }` | 完整替换默认思考强度区域 |
+
+`close()` 请求关闭面板，成功关闭后恢复触发器焦点。受控 `open` 未回写为 `false` 时，组件不会强制关闭。`reasoningEffortOption` 只返回当前模型真正支持的选项；已保存但不受支持的值会解析为 `null`。
+
+### Types
+
+以下类型均从 `@opentiny/tiny-robot` 导出：
+
+```ts
+import type { Placement } from '@floating-ui/dom'
+import type { Component, VNode } from 'vue'
+
+export type ModelSelectorVariant = 'outline' | 'ghost' | 'muted'
+export type ModelSelectorSize = 'small' | 'normal' | 'large'
+export type ModelSelectorPanelClass = string | readonly string[] | Record<string, boolean>
+
+export interface ModelSelectorReasoningEffortOption {
+  readonly value: string
+  readonly label: string
+  readonly disabled?: boolean
+}
+
+export type ModelSelectorReasoningEfforts = boolean | readonly ModelSelectorReasoningEffortOption[]
+
+export interface ModelSelectorOption {
+  value: string
+  label: string
+  description?: string
+  icon?: Component | string
+  disabled?: boolean
+  group?: string
+  reasoningEfforts?: ModelSelectorReasoningEfforts
+}
+
+export type ModelSelectorFilterMethod = (query: string, option: ModelSelectorOption) => boolean
+
+export interface ModelSelectorProps {
+  models?: readonly ModelSelectorOption[]
+  modelValue?: string | null
+  defaultValue?: string | null
+  reasoningEffort?: string | null
+  defaultReasoningEffort?: string | null
+  open?: boolean
+  defaultOpen?: boolean
+  disabled?: boolean
+  searchable?: boolean
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyText?: string
+  filterMethod?: ModelSelectorFilterMethod
+  variant?: ModelSelectorVariant
+  size?: ModelSelectorSize
+  placement?: Placement
+  offset?: number
+  appendTo?: string | HTMLElement
+  panelClass?: ModelSelectorPanelClass
+  reasoningEffortLabel?: string
+}
+
+export interface ModelSelectorTriggerSlotProps {
+  option: ModelSelectorOption | null
+  label: string
+  open: boolean
+  reasoningEffortOption: ModelSelectorReasoningEffortOption | null
+}
+
+export interface ModelSelectorItemSlotProps {
+  option: ModelSelectorOption
+  selected: boolean
+  highlighted: boolean
+}
+
+export interface ModelSelectorEmptySlotProps {
+  query: string
+}
+
+export interface ModelSelectorSlotProps {
+  option: ModelSelectorOption | null
+  query: string
+  close: () => void
+}
+
+export interface ModelSelectorFooterSlotProps extends ModelSelectorSlotProps {
+  reasoningEfforts: readonly ModelSelectorReasoningEffortOption[]
+  reasoningEffortOption: ModelSelectorReasoningEffortOption | null
+  setReasoningEffort: (value: string | null) => void
+}
+
+export interface ModelSelectorSlots {
+  trigger?: (props: ModelSelectorTriggerSlotProps) => VNode | VNode[]
+  item?: (props: ModelSelectorItemSlotProps) => VNode | VNode[]
+  empty?: (props: ModelSelectorEmptySlotProps) => VNode | VNode[]
+  header?: (props: ModelSelectorSlotProps) => VNode | VNode[]
+  footer?: (props: ModelSelectorFooterSlotProps) => VNode | VNode[]
+}
+
+export interface ModelSelectorEmits {
+  (event: 'update:modelValue', value: string | null): void
+  (event: 'change', option: ModelSelectorOption): void
+  (event: 'update:reasoningEffort', value: string | null): void
+  (event: 'reasoning-effort-change', option: ModelSelectorReasoningEffortOption | null): void
+  (event: 'update:open', open: boolean): void
+}
+```
+
+### CSS 变量
+
+面板默认通过 Teleport 挂载，定义在组件宿主元素上的局部变量不会自动继承到面板。`panelClass` 附加的类可承载单实例面板变量。
+
+| 变量名                                             | 默认值                                                         | 说明                           |
+| -------------------------------------------------- | -------------------------------------------------------------- | ------------------------------ |
+| `--tr-model-selector-trigger-text-color`           | `var(--tr-text-primary)`                                       | 触发器文本颜色                 |
+| `--tr-model-selector-trigger-icon-color`           | `var(--tr-text-secondary)`                                     | 触发器图标与箭头颜色           |
+| `--tr-model-selector-trigger-effort-color`         | `var(--tr-text-tertiary)`                                      | 触发器思考强度文本颜色         |
+| `--tr-model-selector-trigger-outline-bg`           | `var(--tr-container-bg-default)`                               | outline 背景                   |
+| `--tr-model-selector-trigger-outline-border`       | `var(--tr-border-color-default)`                               | outline 边框                   |
+| `--tr-model-selector-trigger-ghost-bg`             | `transparent`                                                  | ghost 背景                     |
+| `--tr-model-selector-trigger-ghost-border`         | `transparent`                                                  | ghost 边框                     |
+| `--tr-model-selector-trigger-muted-bg`             | `var(--tr-container-bg-default-2)`                             | muted 背景                     |
+| `--tr-model-selector-trigger-muted-border`         | `transparent`                                                  | muted 边框                     |
+| `--tr-model-selector-trigger-hover-bg`             | `var(--tr-container-bg-hover)`                                 | 触发器 hover/open 背景         |
+| `--tr-model-selector-trigger-hover-border`         | `var(--tr-border-color-hover)`                                 | 触发器 hover/open 边框         |
+| `--tr-model-selector-trigger-disabled-color`       | `var(--tr-text-disabled)`                                      | 触发器禁用颜色                 |
+| `--tr-model-selector-panel-bg`                     | `var(--tr-dropdown-menu-bg-color)`                             | 面板背景                       |
+| `--tr-model-selector-panel-border`                 | `var(--tr-border-color-default)`                               | 面板边框                       |
+| `--tr-model-selector-panel-shadow`                 | `var(--tr-dropdown-menu-box-shadow)`                           | 面板阴影                       |
+| `--tr-model-selector-divider-color`                | `var(--tr-border-color-default)`                               | Header、搜索框与 Footer 分隔线 |
+| `--tr-model-selector-item-color`                   | `var(--tr-dropdown-menu-item-color)`                           | 选项文本颜色                   |
+| `--tr-model-selector-item-description-color`       | `var(--tr-text-tertiary)`                                      | 选项描述颜色                   |
+| `--tr-model-selector-option-text-max-width`        | `320px`                                                        | 名称与描述所在文字列的最大宽度 |
+| `--tr-model-selector-item-hover-bg`                | `var(--tr-dropdown-menu-item-hover-bg-color)`                  | 选项 hover/highlight 背景      |
+| `--tr-model-selector-item-selected-color`          | `var(--tr-color-primary)`                                      | 选中项强调色                   |
+| `--tr-model-selector-item-disabled-color`          | `var(--tr-text-disabled)`                                      | 禁用项颜色                     |
+| `--tr-model-selector-group-title-color`            | `var(--tr-text-tertiary)`                                      | 分组标题颜色                   |
+| `--tr-model-selector-empty-color`                  | `var(--tr-text-secondary)`                                     | 空状态颜色                     |
+| `--tr-model-selector-scrollbar-color`              | `var(--tr-dropdown-menu-scrollbar-thumb-color)`                | 列表滚动条颜色                 |
+| `--tr-model-selector-effort-label-color`           | `var(--tr-text-secondary)`                                     | 思考强度标题颜色               |
+| `--tr-model-selector-effort-option-color`          | `var(--tr-text-secondary)`                                     | 思考强度选项文字颜色           |
+| `--tr-model-selector-effort-option-border`         | `var(--tr-border-color-default)`                               | 思考强度选项边框               |
+| `--tr-model-selector-effort-option-bg`             | `transparent`                                                  | 思考强度选项背景               |
+| `--tr-model-selector-effort-option-hover-bg`       | `var(--tr-container-bg-hover)`                                 | 思考强度选项 hover 背景        |
+| `--tr-model-selector-effort-option-active-color`   | `var(--tr-color-primary)`                                      | 思考强度激活文字颜色           |
+| `--tr-model-selector-effort-option-active-border`  | `var(--tr-color-primary)`                                      | 思考强度激活边框               |
+| `--tr-model-selector-effort-option-active-bg`      | `color-mix(in srgb, var(--tr-color-primary) 12%, transparent)` | 思考强度激活背景               |
+| `--tr-model-selector-effort-option-disabled-color` | `var(--tr-text-disabled)`                                      | 思考强度禁用文字颜色           |
diff --git a/packages/components/package.json b/packages/components/package.json
index c4bf6f35d..e8bb66d6e 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -54,7 +54,7 @@
     "@floating-ui/dom": "^1.6.0",
     "@opentiny/tiny-robot-svgs": "workspace:*",
     "@opentiny/vue": "^3.20.0",
-    "@vueuse/core": "^13.1.0",
+    "@vueuse/core": "^13.9.0",
     "jsonrepair": "^3.13.1",
     "@tiptap/core": "3.17.1",
     "@tiptap/vue-3": "3.17.1",
diff --git a/packages/components/src/model-selector/components/ModelSelectorItem.vue b/packages/components/src/model-selector/components/ModelSelectorItem.vue
index 6feef9cc4..de6c2f01e 100644
--- a/packages/components/src/model-selector/components/ModelSelectorItem.vue
+++ b/packages/components/src/model-selector/components/ModelSelectorItem.vue
@@ -70,7 +70,7 @@ function handleSelect() {
           aria-hidden="true"
           focusable="false"
         />
-        <span class="tr-model-selector__option-copy">
+        <span class="tr-model-selector__option-text">
           <span class="tr-model-selector__option-label" :title="option.label">{{ option.label }}</span>
           <span
             v-if="option.description"
@@ -82,7 +82,7 @@ function handleSelect() {
           </span>
         </span>
       </span>
-      <IconCheck v-if="selected" class="tr-model-selector__option-check" aria-hidden="true" focusable="false" />
+      <IconCheck class="tr-model-selector__option-check" aria-hidden="true" focusable="false" />
     </slot>
   </div>
 </template>
diff --git a/packages/components/src/model-selector/components/ModelSelectorPanel.vue b/packages/components/src/model-selector/components/ModelSelectorPanel.vue
index e24c322ec..9109384d0 100644
--- a/packages/components/src/model-selector/components/ModelSelectorPanel.vue
+++ b/packages/components/src/model-selector/components/ModelSelectorPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { IconNoData, IconSearch } from '@opentiny/tiny-robot-svgs'
-import { computed, nextTick, onMounted, shallowRef, watch, type VNode } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, shallowRef, watch, type VNode } from 'vue'
 import type {
   ModelSelectorEmptySlotProps,
   ModelSelectorFooterSlotProps,
@@ -56,6 +56,15 @@ defineSlots<{
 
 const searchInputEl = shallowRef<HTMLInputElement | null>(null)
 const listboxEl = shallowRef<HTMLElement | null>(null)
+const panelEl = shallowRef<HTMLElement | null>(null)
+const openMinWidth = shallowRef<number | null>(null)
+let panelResizeObserver: ResizeObserver | undefined
+
+const panelStyle = computed(() =>
+  openMinWidth.value === null
+    ? undefined
+    : ({ '--tr-model-selector-open-min-width': `${openMinWidth.value}px` } as Record<string, string>),
+)
 
 const filter = useModelSelectorFilter({
   options: () => props.options,
@@ -181,9 +190,35 @@ function handlePanelKeydown(event: KeyboardEvent) {
 }
 
 onMounted(() => {
+  const panel = panelEl.value
+  const ResizeObserverConstructor = panel?.ownerDocument.defaultView?.ResizeObserver
+
+  function recordExpandedWidth() {
+    if (!panel) {
+      return
+    }
+
+    const width = Math.ceil(panel.getBoundingClientRect().width)
+
+    if (width > (openMinWidth.value ?? 0)) {
+      openMinWidth.value = width
+    }
+  }
+
+  recordExpandedWidth()
+
+  if (panel && ResizeObserverConstructor) {
+    panelResizeObserver = new ResizeObserverConstructor(recordExpandedWidth)
+    panelResizeObserver.observe(panel)
+  }
+
   void focusPrimary()
 })
 
+onBeforeUnmount(() => {
+  panelResizeObserver?.disconnect()
+})
+
 watch(
   () => props.searchable,
   async () => {
@@ -195,8 +230,10 @@ watch(
 
 <template>
   <div
+    ref="panelEl"
     class="tr-model-selector__panel"
     :class="[`tr-model-selector__panel--${size}`, panelClass]"
+    :style="panelStyle"
     @keydown="handlePanelKeydown"
   >
     <div v-if="$slots.header" class="tr-model-selector__header">
diff --git a/packages/components/src/model-selector/composables/useModelSelectorFloating.ts b/packages/components/src/model-selector/composables/useModelSelectorFloating.ts
index 715c2f611..813122d23 100644
--- a/packages/components/src/model-selector/composables/useModelSelectorFloating.ts
+++ b/packages/components/src/model-selector/composables/useModelSelectorFloating.ts
@@ -89,6 +89,10 @@ export function useModelSelectorFloating(options: UseModelSelectorFloatingOption
                     '--tr-model-selector-available-height',
                     `${Math.max(0, Math.floor(availableHeight))}px`,
                   )
+                  elements.floating.style.setProperty(
+                    '--tr-model-selector-available-width',
+                    `${Math.max(0, Math.floor(availableWidth))}px`,
+                  )
                 },
               }),
             ],
diff --git a/packages/components/src/model-selector/index.less b/packages/components/src/model-selector/index.less
index a18d7371c..37e53d670 100644
--- a/packages/components/src/model-selector/index.less
+++ b/packages/components/src/model-selector/index.less
@@ -152,8 +152,12 @@
 
 .tr-model-selector__panel {
   display: flex;
-  width: min(320px, calc(100vw - 16px));
-  min-width: 100%;
+  width: max-content;
+  min-width: max(
+    100%,
+    min(var(--tr-model-selector-open-min-width, 0px), var(--tr-model-selector-available-width, calc(100vw - 16px)))
+  );
+  max-width: 100%;
   max-height: var(--tr-model-selector-available-height, min(480px, calc(100vh - 16px)));
   flex-direction: column;
   overflow: hidden;
@@ -166,7 +170,6 @@
 }
 
 .tr-model-selector__panel--small {
-  width: min(280px, calc(100vw - 16px));
   font-size: var(--tr-font-size-xs);
 }
 
@@ -175,7 +178,6 @@
 }
 
 .tr-model-selector__panel--large {
-  width: min(360px, calc(100vw - 16px));
   font-size: var(--tr-font-size-sm);
 }
 
@@ -195,7 +197,7 @@
 
 .tr-model-selector__effort {
   display: flex;
-  min-width: 0;
+  min-width: min(216px, calc(100vw - 42px));
   align-items: center;
   justify-content: space-between;
   gap: 12px;
@@ -259,10 +261,12 @@
 
 .tr-model-selector__search {
   display: flex;
+  min-width: min(240px, var(--tr-model-selector-available-width, calc(100vw - 16px)));
   flex: 0 0 auto;
   align-items: center;
   gap: 8px;
   padding: 10px 12px;
+  box-sizing: border-box;
   border-bottom: 1px solid color-mix(in srgb, var(--tr-model-selector-divider-color) 42%, transparent);
 }
 
@@ -388,9 +392,10 @@
   gap: 10px;
 }
 
-.tr-model-selector__option-copy {
+.tr-model-selector__option-text {
   display: flex;
   min-width: 0;
+  max-width: var(--tr-model-selector-option-text-max-width);
   flex-direction: column;
   gap: 2px;
 }
@@ -415,10 +420,16 @@
 
 .tr-model-selector__option-check {
   color: var(--tr-model-selector-item-selected-color);
+  visibility: hidden;
+}
+
+.tr-model-selector__option.is-selected .tr-model-selector__option-check {
+  visibility: visible;
 }
 
 .tr-model-selector__empty {
   display: flex;
+  min-width: min(238px, calc(100vw - 18px));
   min-height: 160px;
   flex: 1 1 auto;
   flex-direction: column;
@@ -467,12 +478,6 @@
     max-width: min(240px, calc(100vw - 24px));
   }
 
-  .tr-model-selector__panel,
-  .tr-model-selector__panel--small,
-  .tr-model-selector__panel--large {
-    width: calc(100vw - 16px);
-  }
-
   .tr-model-selector__effort {
     align-items: flex-start;
     flex-direction: column;
diff --git a/packages/components/src/shared/composables/useSenderContentRegistration.ts b/packages/components/src/shared/composables/useSenderContentRegistration.ts
index c95d28bf9..4b0603665 100644
--- a/packages/components/src/shared/composables/useSenderContentRegistration.ts
+++ b/packages/components/src/shared/composables/useSenderContentRegistration.ts
@@ -6,7 +6,8 @@ export type SenderContentRegister = (source: string, payload: MaybeRefOrGetter<u
 export const SENDER_CONTENT_REGISTRATION_CONTEXT_KEY: unique symbol = Symbol('sender-content-registration-context')
 
 export const useSenderContentRegistration: () => SenderContentRegister | undefined = ():
-  SenderContentRegister | undefined => {
+  | SenderContentRegister
+  | undefined => {
   const registerFn = inject<SenderContentRegister | undefined>(SENDER_CONTENT_REGISTRATION_CONTEXT_KEY, undefined)
 
   return registerFn
diff --git a/packages/components/src/styles/components/model-selector.less b/packages/components/src/styles/components/model-selector.less
index d27d83e68..ed330e7b7 100644
--- a/packages/components/src/styles/components/model-selector.less
+++ b/packages/components/src/styles/components/model-selector.less
@@ -20,6 +20,7 @@
     divider-color: var(--tr-border-color-default);
     item-color: var(--tr-dropdown-menu-item-color);
     item-description-color: var(--tr-text-tertiary);
+    option-text-max-width: 320px;
     item-hover-bg: var(--tr-dropdown-menu-item-hover-bg-color);
     item-selected-color: var(--tr-color-primary);
     item-disabled-color: var(--tr-text-disabled);
diff --git a/packages/svgs/src/assets/gemini.svg b/packages/svgs/src/assets/gemini.svg
new file mode 100644
index 000000000..08c71ccc4
--- /dev/null
+++ b/packages/svgs/src/assets/gemini.svg
@@ -0,0 +1,21 @@
+<svg height="1em" style="flex: none; line-height: 1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg">
+  <title>Gemini</title>
+  <path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="#3186FF" />
+  <path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-0)" />
+  <path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-1)" />
+  <path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z" fill="url(#lobe-icons-gemini-fill-2)" />
+  <defs>
+    <linearGradient id="lobe-icons-gemini-fill-0" x1="7" x2="11" y1="15.5" y2="12" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#08B962" />
+      <stop offset="1" stop-color="#08B962" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="lobe-icons-gemini-fill-1" x1="8" x2="11.5" y1="5.5" y2="11" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#F94543" />
+      <stop offset="1" stop-color="#F94543" stop-opacity="0" />
+    </linearGradient>
+    <linearGradient id="lobe-icons-gemini-fill-2" x1="3.5" x2="17.5" y1="13.5" y2="12" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FABC12" />
+      <stop offset=".46" stop-color="#FABC12" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+</svg>
diff --git a/packages/test/src/App.vue b/packages/test/src/App.vue
index 6d786c062..a6da2bd91 100644
--- a/packages/test/src/App.vue
+++ b/packages/test/src/App.vue
@@ -7,6 +7,9 @@
         <li><a href="/attachments" @click.prevent="currentComponent = 'Attachments'">Attachments 组件</a></li>
         <li><a href="/container" @click.prevent="currentComponent = 'Container'">Container 组件</a></li>
         <li><a href="/layout" @click.prevent="currentComponent = 'Layout'">Layout 组件</a></li>
+        <li>
+          <a href="/model-selector" @click.prevent="currentComponent = 'ModelSelector'">ModelSelector 组件</a>
+        </li>
         <li><a href="/sender" @click.prevent="currentComponent = 'Sender'">Sender 组件</a></li>
       </ul>
     </nav>
@@ -24,9 +27,10 @@ import Home from './home/index.vue'
 import AttachmentsDemo from './attachments/index.vue'
 import ContainerDemo from './container/index.vue'
 import LayoutDemo from './layout/index.vue'
+import ModelSelectorDemo from './model-selector/index.vue'
 import SenderDemo from './sender/index.vue'
 
-type ComponentName = 'Home' | 'Attachments' | 'Container' | 'Layout' | 'Sender'
+type ComponentName = 'Home' | 'Attachments' | 'Container' | 'Layout' | 'ModelSelector' | 'Sender'
 
 const currentComponent = ref<ComponentName>('Home')
 
@@ -35,6 +39,7 @@ const components: Record<ComponentName, Component> = {
   Attachments: AttachmentsDemo,
   Container: ContainerDemo,
   Layout: LayoutDemo,
+  ModelSelector: ModelSelectorDemo,
   Sender: SenderDemo,
 }
 
diff --git a/packages/test/src/model-selector/index.spec.ts b/packages/test/src/model-selector/index.spec.ts
new file mode 100644
index 000000000..48776aaf5
--- /dev/null
+++ b/packages/test/src/model-selector/index.spec.ts
@@ -0,0 +1,806 @@
+import { expect, test, type Locator, type Page } from '@playwright/test'
+
+function getTrigger(page: Page, testId: string) {
+  return page.getByTestId(testId).getByRole('button')
+}
+
+async function getListbox(page: Page, testId: string) {
+  const listboxId = await getTrigger(page, testId).getAttribute('aria-controls')
+  expect(listboxId).toBeTruthy()
+  return page.locator(`[id="${listboxId}"]`)
+}
+
+async function getSearch(page: Page, testId: string) {
+  return (await getListbox(page, testId)).locator('..').getByRole('combobox')
+}
+
+async function getActiveOption(page: Page, focusOwner: Locator) {
+  const activeDescendantId = await focusOwner.getAttribute('aria-activedescendant')
+  expect(activeDescendantId).toBeTruthy()
+  return page.locator(`[id="${activeDescendantId}"]`)
+}
+
+test.describe('ModelSelector 组件测试', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/')
+    await page.getByRole('link', { name: 'ModelSelector 组件' }).click()
+    await expect(page.getByRole('heading', { level: 2, name: 'ModelSelector 组件测试' })).toBeVisible()
+  })
+
+  test.describe('状态契约', () => {
+    test('初始化和异步 models 更新不应隐式选择或触发 change', async ({ page }) => {
+      await expect(getTrigger(page, 'init-selector')).toContainText('选择模型')
+      await expect(page.getByTestId('init-updates')).toHaveText('0')
+      await expect(page.getByTestId('init-changes')).toHaveText('0')
+
+      await expect(getTrigger(page, 'async-selector')).toContainText('选择模型')
+      await page.getByTestId('load-async-models').click()
+      await expect(getTrigger(page, 'async-selector')).toContainText('选择模型')
+      await expect(page.getByTestId('async-updates')).toHaveText('0')
+      await expect(page.getByTestId('async-changes')).toHaveText('0')
+    })
+
+    test('非受控 value/open 应内部更新，重复选择只关闭不重复发事件', async ({ page }) => {
+      const trigger = getTrigger(page, 'uncontrolled-selector')
+
+      await expect(trigger).toContainText('Claude Sonnet')
+      await expect(page.getByTestId('uncontrolled-updates')).toHaveText('0')
+      await expect(page.getByTestId('uncontrolled-changes')).toHaveText('0')
+
+      await trigger.click()
+      const listbox = await getListbox(page, 'uncontrolled-selector')
+      await listbox.getByRole('option', { name: /Claude Sonnet/ }).click()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+      await expect(page.getByTestId('uncontrolled-updates')).toHaveText('0')
+      await expect(page.getByTestId('uncontrolled-changes')).toHaveText('0')
+
+      await trigger.click()
+      await listbox.getByRole('option', { name: /GPT-4o/ }).click()
+      await expect(trigger).toContainText('GPT-4o')
+      await expect(page.getByTestId('uncontrolled-updates')).toHaveText('1')
+      await expect(page.getByTestId('uncontrolled-changes')).toHaveText('1')
+      await expect(page.getByTestId('uncontrolled-last-value')).toHaveText('gpt-4o')
+      await expect(page.getByTestId('uncontrolled-open-updates')).toHaveText('4')
+    })
+
+    test('受控 value/open 应由父级回写，外部打开不产生 update:open', async ({ page }) => {
+      const trigger = getTrigger(page, 'controlled-selector')
+
+      await page.getByTestId('controlled-open').click()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      const listbox = await getListbox(page, 'controlled-selector')
+      await expect(listbox).toBeVisible()
+      await expect(page.getByTestId('controlled-open-updates')).toHaveText('0')
+
+      await listbox.getByRole('option', { name: /Claude Sonnet/ }).click()
+      await expect(page.getByTestId('controlled-value')).toHaveText('claude-sonnet')
+      await expect(page.getByTestId('controlled-updates')).toHaveText('1')
+      await expect(page.getByTestId('controlled-changes')).toHaveText('1')
+      await expect(page.getByTestId('controlled-open-updates')).toHaveText('1')
+      await expect(trigger).toContainText('Claude Sonnet')
+
+      await page.getByTestId('controlled-open').click()
+      await (await getSearch(page, 'controlled-selector')).press('Escape')
+      await expect(page.getByTestId('controlled-open-state')).toHaveText('false')
+      await expect(page.getByTestId('controlled-open-updates')).toHaveText('2')
+    })
+
+    test('受控父级不回写时，组件应只发请求且保持 prop 状态', async ({ page }) => {
+      const trigger = getTrigger(page, 'blocked-selector')
+
+      await trigger.click()
+      await expect(page.getByTestId('blocked-open-updates')).toHaveText('1')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+
+      await page.getByTestId('blocked-force-open').click()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      const listbox = await getListbox(page, 'blocked-selector')
+      await listbox.getByRole('option', { name: /Claude Sonnet/ }).click()
+
+      await expect(page.getByTestId('blocked-value')).toHaveText('gpt-4o')
+      await expect(page.getByTestId('blocked-updates')).toHaveText('1')
+      await expect(page.getByTestId('blocked-changes')).toHaveText('1')
+      await expect(page.getByTestId('blocked-open-state')).toHaveText('true')
+      await expect(page.getByTestId('blocked-open-updates')).toHaveText('2')
+      await expect(trigger).toContainText('GPT-4o')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    test('受控父级拒绝关闭时，同一次 outside pointer 只应发一次关闭请求', async ({ page }) => {
+      const trigger = getTrigger(page, 'blocked-selector')
+
+      await page.getByTestId('blocked-force-open').click()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(await getSearch(page, 'blocked-selector')).toBeFocused()
+
+      await page.getByTestId('outside-action').click()
+      await expect(page.getByTestId('blocked-open-state')).toHaveText('true')
+      await expect(page.getByTestId('blocked-open-updates')).toHaveText('1')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    test('无效或被移除的受控值应显示 placeholder，恢复后重新显示且不发 change', async ({ page }) => {
+      const trigger = getTrigger(page, 'controlled-selector')
+
+      await expect(trigger).toContainText('GPT-4o')
+      await page.getByTestId('controlled-remove').click()
+      await expect(trigger).toContainText('选择模型')
+      await expect(page.getByTestId('controlled-updates')).toHaveText('0')
+      await expect(page.getByTestId('controlled-changes')).toHaveText('0')
+
+      await page.getByTestId('controlled-restore').click()
+      await expect(trigger).toContainText('GPT-4o')
+      await page.getByTestId('controlled-invalid').click()
+      await expect(trigger).toContainText('选择模型')
+      await expect(page.getByTestId('controlled-updates')).toHaveText('0')
+      await expect(page.getByTestId('controlled-changes')).toHaveText('0')
+    })
+
+    test('defaultOpen 应仅初始打开，不产生 update:open', async ({ page }) => {
+      await page.getByTestId('mount-default-open').click()
+
+      const trigger = getTrigger(page, 'default-open-selector')
+      const search = await getSearch(page, 'default-open-selector')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(search).toBeFocused()
+      await expect(page.getByTestId('default-open-updates')).toHaveText('0')
+    })
+  })
+
+  test.describe('最小用法与公开 helper', () => {
+    test('只有 value/label 的模型可渲染，ARIA 文案使用对应可见文案', async ({ page }) => {
+      const fallbackTrigger = page.getByTestId('minimal-fallback-selector').getByRole('button')
+      await expect(fallbackTrigger).toHaveAttribute('aria-label', 'Minimal Reasoning · Medium')
+
+      await fallbackTrigger.click()
+      await expect(await getSearch(page, 'minimal-fallback-selector')).toHaveCount(0)
+      const fallbackListbox = await getListbox(page, 'minimal-fallback-selector')
+      await expect(fallbackListbox).toBeVisible()
+      await expect(fallbackListbox.locator('..').getByRole('group', { name: 'Thinking level' })).toBeVisible()
+      await fallbackListbox.press('Escape')
+
+      const explicitTrigger = page.getByTestId('minimal-explicit-selector').getByRole('button')
+      await expect(explicitTrigger).toHaveAttribute('aria-label', 'Minimal Reasoning · Medium')
+
+      await explicitTrigger.click()
+      await expect(await getSearch(page, 'minimal-explicit-selector')).toBeVisible()
+      const explicitListbox = await getListbox(page, 'minimal-explicit-selector')
+      await expect(explicitListbox).toBeVisible()
+      await expect(explicitListbox.locator('..').getByRole('group', { name: 'Ignored effort fallback' })).toBeVisible()
+    })
+
+    test('icon 支持 Vue 组件和 URL', async ({ page }) => {
+      const selector = page.getByTestId('controlled-selector')
+      await expect(selector.locator('img.tr-model-selector__trigger-icon')).toHaveAttribute(
+        'src',
+        'https://example.com/model.svg',
+      )
+
+      await selector.getByRole('button').click()
+      const listbox = await getListbox(page, 'controlled-selector')
+      await expect(listbox.locator('img.tr-model-selector__option-icon')).toHaveCount(1)
+      await expect(listbox.locator('svg.tr-model-selector__option-icon')).toHaveCount(1)
+    })
+  })
+
+  test.describe('Reasoning effort', () => {
+    test('reasoningEfforts:true 与 defaultReasoningEffort 应渲染默认档位，点击和键盘选择不关闭且事件有序去重', async ({
+      page,
+    }) => {
+      const trigger = getTrigger(page, 'effort-uncontrolled-selector')
+
+      await expect(trigger).toContainText('Reasoning Default')
+      await expect(trigger).toContainText('Medium')
+      await trigger.click()
+
+      const effortGroup = (await getListbox(page, 'effort-uncontrolled-selector'))
+        .locator('..')
+        .getByRole('group', { name: 'Thinking' })
+      const low = effortGroup.getByRole('button', { name: 'Low', exact: true })
+      const medium = effortGroup.getByRole('button', { name: 'Medium', exact: true })
+      const high = effortGroup.getByRole('button', { name: 'High', exact: true })
+
+      await expect(effortGroup.getByRole('button')).toHaveCount(3)
+      await expect(medium).toHaveAttribute('aria-pressed', 'true')
+
+      await high.focus()
+      await high.press('Enter')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(high).toHaveAttribute('aria-pressed', 'true')
+      await expect(page.getByTestId('effort-uncontrolled-updates')).toHaveText('1')
+      await expect(page.getByTestId('effort-uncontrolled-changes')).toHaveText('1')
+
+      await high.press('Space')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(page.getByTestId('effort-uncontrolled-updates')).toHaveText('1')
+      await expect(page.getByTestId('effort-uncontrolled-changes')).toHaveText('1')
+
+      await low.focus()
+      await low.press('Space')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(low).toHaveAttribute('aria-pressed', 'true')
+
+      await medium.click()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(medium).toHaveAttribute('aria-pressed', 'true')
+      await expect(page.getByTestId('effort-uncontrolled-updates')).toHaveText('3')
+      await expect(page.getByTestId('effort-uncontrolled-changes')).toHaveText('3')
+      await expect(page.getByTestId('effort-uncontrolled-value')).toHaveText('medium')
+      await expect(page.getByTestId('effort-uncontrolled-sequence')).toHaveText(
+        'update:high > change:high > update:low > change:low > update:medium > change:medium',
+      )
+    })
+
+    test('自定义 effort 应去除重复值并保留 disabled 语义', async ({ page }) => {
+      const trigger = getTrigger(page, 'effort-uncontrolled-selector')
+
+      await trigger.click()
+      const listbox = await getListbox(page, 'effort-uncontrolled-selector')
+      await listbox.getByRole('option', { name: /Reasoning Custom/ }).click()
+      await trigger.click()
+
+      const effortGroup = (await getListbox(page, 'effort-uncontrolled-selector'))
+        .locator('..')
+        .getByRole('group', { name: 'Thinking' })
+      await expect(effortGroup.getByRole('button')).toHaveCount(3)
+      await expect(effortGroup.getByRole('button', { name: 'Minimal', exact: true })).toBeEnabled()
+      await expect(effortGroup.getByRole('button', { name: 'Medium', exact: true })).toHaveCount(1)
+      await expect(effortGroup.getByRole('button', { name: 'Duplicate Medium', exact: true })).toHaveCount(0)
+      await expect(effortGroup.getByRole('button', { name: 'Maximum', exact: true })).toBeDisabled()
+      await expect(effortGroup.getByRole('button', { name: 'Medium', exact: true })).toHaveAttribute(
+        'aria-pressed',
+        'true',
+      )
+      await expect(page.getByTestId('effort-uncontrolled-updates')).toHaveText('0')
+      await expect(page.getByTestId('effort-uncontrolled-changes')).toHaveText('0')
+    })
+
+    test('受控父级拒绝 effort 回写时应只发送请求并保持 prop 状态', async ({ page }) => {
+      const trigger = getTrigger(page, 'effort-blocked-selector')
+
+      await expect(trigger).toContainText('Medium')
+      await trigger.click()
+
+      const effortGroup = (await getListbox(page, 'effort-blocked-selector'))
+        .locator('..')
+        .getByRole('group', { name: 'Thinking' })
+      const low = effortGroup.getByRole('button', { name: 'Low', exact: true })
+      const medium = effortGroup.getByRole('button', { name: 'Medium', exact: true })
+      await low.click()
+
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(trigger).toContainText('Medium')
+      await expect(medium).toHaveAttribute('aria-pressed', 'true')
+      await expect(low).toHaveAttribute('aria-pressed', 'false')
+      await expect(page.getByTestId('effort-blocked-raw')).toHaveText('medium')
+      await expect(page.getByTestId('effort-blocked-updates')).toHaveText('1')
+      await expect(page.getByTestId('effort-blocked-changes')).toHaveText('1')
+      await expect(page.getByTestId('effort-blocked-sequence')).toHaveText('update:low > change:low')
+    })
+
+    test('初始 undefined 的受控 v-model 应接受外部回写，自定义 footer 完整覆盖并可更新和关闭', async ({ page }) => {
+      const trigger = getTrigger(page, 'effort-controlled-selector')
+
+      await expect(page.getByTestId('effort-controlled-model')).toHaveText('undefined')
+      await expect(page.getByTestId('effort-controlled-open')).toHaveText('undefined')
+      await expect(page.getByTestId('effort-controlled-raw')).toHaveText('undefined')
+      await expect(page.getByTestId('effort-controlled-trigger-slot')).toHaveText(/选择模型\|null\|null/)
+
+      await page.getByTestId('undefined-controlled-prime').click()
+      await expect(page.getByTestId('effort-controlled-model')).toHaveText('reasoning-default')
+      await expect(page.getByTestId('effort-controlled-open')).toHaveText('true')
+      await expect(page.getByTestId('effort-controlled-raw')).toHaveText('high')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(page.getByTestId('effort-controlled-trigger-slot')).toHaveText(/Reasoning Default\|high\|High/)
+
+      const listbox = await getListbox(page, 'effort-controlled-selector')
+      const panel = listbox.locator('..')
+      await expect(page.getByTestId('effort-custom-footer')).toBeVisible()
+      await expect(page.getByTestId('effort-footer-count')).toHaveText('3')
+      await expect(page.getByTestId('effort-footer-value')).toHaveText('high')
+      await expect(page.getByTestId('effort-footer-option')).toHaveText('High')
+      await expect(panel.locator('.tr-model-selector__effort')).toHaveCount(0)
+      await expect(panel.locator('[data-model-selector-effort-value]')).toHaveCount(0)
+
+      await page.getByTestId('effort-footer-medium').click()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(page.getByTestId('effort-controlled-raw')).toHaveText('medium')
+      await expect(page.getByTestId('effort-controlled-trigger-slot')).toHaveText(/Reasoning Default\|medium\|Medium/)
+      await expect(page.getByTestId('effort-controlled-updates')).toHaveText('1')
+      await expect(page.getByTestId('effort-controlled-changes')).toHaveText('1')
+      await expect(page.getByTestId('effort-controlled-sequence')).toHaveText('update:medium > change:medium')
+
+      await page.getByTestId('effort-footer-close').click()
+      await expect(page.getByTestId('effort-controlled-open')).toHaveText('false')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+      await expect(trigger).toBeFocused()
+    })
+
+    test('effort 应跨模型 sticky，unsupported 时 slot 解析为 null，模型切换不发 effort 事件', async ({ page }) => {
+      const trigger = getTrigger(page, 'effort-controlled-selector')
+
+      await page.getByTestId('undefined-controlled-prime').click()
+      const listbox = await getListbox(page, 'effort-controlled-selector')
+      await listbox.getByRole('option', { name: /Plain Model/ }).click()
+
+      await expect(page.getByTestId('effort-controlled-model')).toHaveText('plain-model')
+      await expect(page.getByTestId('effort-controlled-open')).toHaveText('false')
+      await expect(page.getByTestId('effort-controlled-raw')).toHaveText('high')
+      await expect(page.getByTestId('effort-controlled-trigger-slot')).toHaveText(/Plain Model\|null\|null/)
+      await expect(page.getByTestId('effort-controlled-updates')).toHaveText('0')
+      await expect(page.getByTestId('effort-controlled-changes')).toHaveText('0')
+
+      await trigger.click()
+      await expect(page.getByTestId('effort-custom-footer')).toBeVisible()
+      await expect(page.getByTestId('effort-footer-count')).toHaveText('0')
+      await expect(page.getByTestId('effort-footer-value')).toHaveText('null')
+      await expect(page.getByTestId('effort-footer-option')).toHaveText('null')
+      await listbox.getByRole('option', { name: /Reasoning Default/ }).click()
+
+      await expect(page.getByTestId('effort-controlled-model')).toHaveText('reasoning-default')
+      await expect(page.getByTestId('effort-controlled-raw')).toHaveText('high')
+      await expect(page.getByTestId('effort-controlled-trigger-slot')).toHaveText(/Reasoning Default\|high\|High/)
+      await expect(page.getByTestId('effort-controlled-updates')).toHaveText('0')
+      await expect(page.getByTestId('effort-controlled-changes')).toHaveText('0')
+
+      await page.getByTestId('undefined-controlled-disabled').click()
+      await expect(page.getByTestId('effort-controlled-model')).toHaveText('disabled-reasoning')
+      await expect(page.getByTestId('effort-footer-value')).toHaveText('high')
+      await page.getByTestId('effort-footer-low').click()
+      await expect(page.getByTestId('effort-controlled-raw')).toHaveText('high')
+      await expect(page.getByTestId('effort-controlled-updates')).toHaveText('0')
+      await expect(page.getByTestId('effort-controlled-changes')).toHaveText('0')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    })
+  })
+
+  test.describe('搜索、分组与选项', () => {
+    test('默认搜索应覆盖 description 和 group', async ({ page }) => {
+      await getTrigger(page, 'init-selector').click()
+      const search = await getSearch(page, 'init-selector')
+      const listbox = await getListbox(page, 'init-selector')
+
+      await search.fill('coding')
+      await expect(listbox.getByRole('option')).toHaveCount(1)
+      await expect(listbox.getByRole('option', { name: /GPT-4.1/ })).toContainText('Precise coding model')
+
+      await search.fill('anthropic')
+      await expect(listbox.getByRole('group', { name: 'Anthropic' })).toBeVisible()
+      await expect(listbox.getByRole('option')).toHaveCount(2)
+
+      await search.fill('multimodal')
+      await expect(listbox.getByRole('option')).toHaveCount(1)
+      await expect(listbox.getByRole('option', { name: /GPT-4o/ })).toBeVisible()
+    })
+
+    test('禁用项应可被搜索和读取，但不可选择', async ({ page }) => {
+      const trigger = getTrigger(page, 'init-selector')
+      await trigger.click()
+      const search = await getSearch(page, 'init-selector')
+
+      await search.fill('Haiku')
+      const disabledOption = (await getListbox(page, 'init-selector')).getByRole('option', { name: /Claude Haiku/ })
+      await expect(disabledOption).toHaveAttribute('aria-disabled', 'true')
+      await disabledOption.dispatchEvent('click')
+
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+      await expect(page.getByTestId('init-updates')).toHaveText('0')
+      await expect(page.getByTestId('init-changes')).toHaveText('0')
+    })
+
+    test('自定义 filterMethod 应替换默认匹配规则', async ({ page }) => {
+      await getTrigger(page, 'custom-filter-selector').click()
+      const search = await getSearch(page, 'custom-filter-selector')
+      const listbox = await getListbox(page, 'custom-filter-selector')
+
+      await search.fill('featured')
+      await expect(listbox.getByRole('option')).toHaveCount(1)
+      await expect(listbox.getByRole('option', { name: /Second Model/ })).toBeVisible()
+
+      await search.fill('First Model')
+      await expect(listbox.getByRole('option')).toHaveCount(0)
+      await expect(page.locator('.tr-model-selector__empty[role="status"]')).toContainText('暂无可用模型')
+    })
+  })
+
+  test.describe('键盘、焦点与 ARIA', () => {
+    test('Arrow/Home/End 应跳过 disabled，Enter 选择后关闭并恢复焦点', async ({ page }) => {
+      const trigger = getTrigger(page, 'keyboard-selector')
+      await trigger.focus()
+      await trigger.click()
+
+      const listbox = await getListbox(page, 'keyboard-selector')
+      await expect(listbox).toBeFocused()
+      await expect(await getActiveOption(page, listbox)).toContainText('GPT-4o')
+
+      await listbox.press('ArrowDown')
+      await expect(await getActiveOption(page, listbox)).toContainText('GPT-4.1')
+      await listbox.press('ArrowDown')
+      await expect(await getActiveOption(page, listbox)).toContainText('Claude Sonnet')
+      await listbox.press('ArrowDown')
+      await expect(await getActiveOption(page, listbox)).toContainText('DeepSeek R1')
+
+      await listbox.press('Home')
+      await expect(await getActiveOption(page, listbox)).toContainText('GPT-4o')
+      await listbox.press('End')
+      await expect(await getActiveOption(page, listbox)).toContainText('DeepSeek R1')
+      await listbox.press('Enter')
+
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+      await expect(trigger).toBeFocused()
+      await expect(trigger).toContainText('DeepSeek R1')
+      await expect(page.getByTestId('keyboard-updates')).toHaveText('1')
+      await expect(page.getByTestId('keyboard-changes')).toHaveText('1')
+      await expect(page.getByTestId('keyboard-last-value')).toHaveText('deepseek-r1')
+    })
+
+    test('Enter 应打开面板，Escape 只关闭不选择', async ({ page }) => {
+      const trigger = getTrigger(page, 'keyboard-selector')
+      await trigger.focus()
+      await trigger.press('Enter')
+
+      const listbox = await getListbox(page, 'keyboard-selector')
+      await expect(await getActiveOption(page, listbox)).toContainText('GPT-4o')
+      await listbox.press('Escape')
+
+      await expect(trigger).toBeFocused()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+      await expect(page.getByTestId('keyboard-updates')).toHaveText('0')
+      await expect(page.getByTestId('keyboard-changes')).toHaveText('0')
+    })
+
+    test('搜索框 Home/End 保留文本编辑语义，输入法组合期间不接管候选导航', async ({ page }) => {
+      await getTrigger(page, 'init-selector').click()
+      const search = await getSearch(page, 'init-selector')
+
+      await search.fill('GPT-4.1')
+      await search.evaluate((element: HTMLInputElement) => {
+        element.setSelectionRange(4, 4)
+      })
+
+      const activeBeforeHome = await search.getAttribute('aria-activedescendant')
+      const editingKeyResult = await search.evaluate((element) => {
+        return Object.fromEntries(
+          ['Home', 'End'].map((key) => {
+            const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
+            element.dispatchEvent(event)
+            return [key, event.defaultPrevented]
+          }),
+        )
+      })
+
+      expect(editingKeyResult).toEqual({ Home: false, End: false })
+      await expect(search).toHaveValue('GPT-4.1')
+      await expect(search).toHaveAttribute('aria-activedescendant', activeBeforeHome!)
+
+      const compositionResult = await search.evaluate((element) => {
+        const event = new KeyboardEvent('keydown', {
+          key: 'ArrowDown',
+          bubbles: true,
+          cancelable: true,
+          isComposing: true,
+        })
+        element.dispatchEvent(event)
+        return event.defaultPrevented
+      })
+
+      expect(compositionResult).toBe(false)
+      await expect(search).toHaveAttribute('aria-activedescendant', activeBeforeHome!)
+    })
+
+    test('header/footer 中的 Enter 应触发自身控件，Tab 不接管面板状态', async ({ page }) => {
+      const trigger = getTrigger(page, 'slot-selector')
+      await trigger.click()
+      const search = await getSearch(page, 'slot-selector')
+      await expect(search).toBeFocused()
+
+      const headerAction = page.getByTestId('slot-header-action')
+      await headerAction.focus()
+      await headerAction.press('Enter')
+      await expect(page.getByTestId('slot-header-activations')).toHaveText('1')
+      await expect(page.getByTestId('slot-changes')).toHaveText('0')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+
+      const footerAction = page.getByTestId('slot-footer-action')
+      await footerAction.focus()
+      await footerAction.press('Enter')
+      await expect(page.getByTestId('slot-footer-activations')).toHaveText('1')
+      await expect(page.getByTestId('slot-changes')).toHaveText('0')
+
+      await search.focus()
+      await search.press('Tab')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    })
+
+    test('trigger、combobox、listbox、option 和 group 应建立完整 ARIA 关联', async ({ page }) => {
+      const trigger = getTrigger(page, 'uncontrolled-selector')
+      const listboxId = await trigger.getAttribute('aria-controls')
+      expect(listboxId).toBeTruthy()
+      await expect(trigger).toHaveAttribute('aria-haspopup', 'listbox')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+
+      await trigger.click()
+      const search = await getSearch(page, 'uncontrolled-selector')
+      const listbox = await getListbox(page, 'uncontrolled-selector')
+      await expect(search).toHaveAttribute('aria-controls', listboxId!)
+      await expect(search).toHaveAttribute('aria-autocomplete', 'list')
+      await expect(search).toHaveAttribute('aria-expanded', 'true')
+      await expect(listbox).toHaveAttribute('id', listboxId!)
+      await expect(await getActiveOption(page, search)).toContainText('Claude Sonnet')
+
+      const selectedOption = listbox.getByRole('option', { name: /Claude Sonnet/ })
+      await expect(selectedOption).toHaveAttribute('aria-selected', 'true')
+      const descriptionId = await selectedOption.getAttribute('aria-describedby')
+      expect(descriptionId).toBeTruthy()
+      await expect(page.locator(`[id="${descriptionId}"]`)).toHaveText('Balanced reasoning model')
+      await expect(listbox.getByRole('option', { name: /Claude Haiku/ })).toHaveAttribute('aria-disabled', 'true')
+      await expect(listbox.getByRole('group', { name: 'OpenAI' })).toBeVisible()
+      await expect(listbox.getByRole('group', { name: 'Anthropic' })).toBeVisible()
+
+      await search.fill('no-such-model')
+      await expect(page.locator('.tr-model-selector__empty[role="status"]')).toContainText('暂无可用模型')
+      await expect(listbox.getByRole('option')).toHaveCount(0)
+    })
+  })
+
+  test.describe('浮层、多实例与样式', () => {
+    test('仅短名称的面板应按内容收缩且不窄于触发器', async ({ page }) => {
+      const trigger = getTrigger(page, 'short-selector')
+      await trigger.click()
+
+      const panel = (await getListbox(page, 'short-selector')).locator('..')
+      const [triggerBox, panelBox] = await Promise.all([trigger.boundingBox(), panel.boundingBox()])
+
+      expect(triggerBox).toBeTruthy()
+      expect(panelBox).toBeTruthy()
+      expect(panelBox!.width).toBeGreaterThanOrEqual(triggerBox!.width - 1)
+      expect(panelBox!.width).toBeLessThan(200)
+    })
+
+    test('移动端的短选项面板不应被强制铺满视口', async ({ page }) => {
+      await page.setViewportSize({ width: 360, height: 720 })
+      await getTrigger(page, 'short-selector').click()
+
+      const panelBox = await (await getListbox(page, 'short-selector')).locator('..').boundingBox()
+
+      expect(panelBox).toBeTruthy()
+      expect(panelBox!.width).toBeLessThan(240)
+    })
+
+    test('三种 size 的短选项面板都应按内容收缩', async ({ page }) => {
+      const widths: number[] = []
+
+      for (const testId of ['short-small-selector', 'short-selector', 'short-large-selector']) {
+        const trigger = getTrigger(page, testId)
+        await trigger.click()
+        const panelBox = await (await getListbox(page, testId)).locator('..').boundingBox()
+        expect(panelBox).toBeTruthy()
+        widths.push(panelBox!.width)
+        await trigger.click()
+      }
+
+      for (const width of widths) {
+        expect(width).toBeLessThan(200)
+      }
+    })
+
+    test('选项文字列应支持通过 panelClass 覆盖最大宽度', async ({ page }) => {
+      const defaultTrigger = getTrigger(page, 'rich-width-selector')
+      await defaultTrigger.click()
+      const defaultPanel = (await getListbox(page, 'rich-width-selector')).locator('..')
+      const defaultText = defaultPanel.locator('.tr-model-selector__option-text').first()
+      await expect(defaultText).toHaveCSS('max-width', '320px')
+      const defaultPanelBox = await defaultPanel.boundingBox()
+      await defaultTrigger.click()
+
+      const narrowTrigger = getTrigger(page, 'narrow-rich-width-selector')
+      await narrowTrigger.click()
+      const narrowPanel = (await getListbox(page, 'narrow-rich-width-selector')).locator('..')
+      const narrowText = narrowPanel.locator('.tr-model-selector__option-text').first()
+      await expect(narrowText).toHaveCSS('max-width', '160px')
+      const narrowPanelBox = await narrowPanel.boundingBox()
+
+      expect(defaultPanelBox).toBeTruthy()
+      expect(narrowPanelBox).toBeTruthy()
+      expect(defaultPanelBox!.width - narrowPanelBox!.width).toBeGreaterThan(100)
+    })
+
+    test('选中状态不应改变相同选项集合的面板宽度', async ({ page }) => {
+      const selectedTrigger = getTrigger(page, 'short-selector')
+      await selectedTrigger.click()
+      const selectedPanelBox = await (await getListbox(page, 'short-selector')).locator('..').boundingBox()
+      await selectedTrigger.click()
+
+      const unselectedTrigger = getTrigger(page, 'short-unselected-selector')
+      await unselectedTrigger.click()
+      const unselectedPanelBox = await (await getListbox(page, 'short-unselected-selector')).locator('..').boundingBox()
+
+      expect(selectedPanelBox).toBeTruthy()
+      expect(unselectedPanelBox).toBeTruthy()
+      expect(Math.abs(selectedPanelBox!.width - unselectedPanelBox!.width)).toBeLessThanOrEqual(1)
+    })
+
+    test('搜索框应为面板提供局部最小宽度', async ({ page }) => {
+      await getTrigger(page, 'short-search-selector').click()
+      const panelBox = await (await getListbox(page, 'short-search-selector')).locator('..').boundingBox()
+
+      expect(panelBox).toBeTruthy()
+      expect(panelBox!.width).toBeGreaterThanOrEqual(240)
+    })
+
+    test('极窄视口下搜索区域应完整显示在面板内', async ({ page }) => {
+      await page.setViewportSize({ width: 220, height: 720 })
+      await getTrigger(page, 'short-search-selector').click()
+
+      const panel = (await getListbox(page, 'short-search-selector')).locator('..')
+      const [panelBox, searchBox] = await Promise.all([
+        panel.boundingBox(),
+        panel.locator('.tr-model-selector__search').boundingBox(),
+      ])
+
+      expect(panelBox).toBeTruthy()
+      expect(searchBox).toBeTruthy()
+      expect(searchBox!.x + searchBox!.width).toBeLessThanOrEqual(panelBox!.x + panelBox!.width + 1)
+    })
+
+    test('思考强度应为面板提供局部最小宽度', async ({ page }) => {
+      await getTrigger(page, 'short-effort-selector').click()
+      const panelBox = await (await getListbox(page, 'short-effort-selector')).locator('..').boundingBox()
+
+      expect(panelBox).toBeTruthy()
+      expect(panelBox!.width).toBeGreaterThanOrEqual(240)
+    })
+
+    test('空状态应为面板提供局部最小宽度', async ({ page }) => {
+      await getTrigger(page, 'empty-selector').click()
+      const panelBox = await (await getListbox(page, 'empty-selector')).locator('..').boundingBox()
+
+      expect(panelBox).toBeTruthy()
+      expect(panelBox!.width).toBeGreaterThanOrEqual(240)
+    })
+
+    test('搜索过滤不应让已打开的面板宽度收缩', async ({ page }) => {
+      await getTrigger(page, 'stable-search-selector').click()
+      const panel = (await getListbox(page, 'stable-search-selector')).locator('..')
+      const initialBox = await panel.boundingBox()
+
+      await (await getSearch(page, 'stable-search-selector')).fill('Ω')
+      await expect((await getListbox(page, 'stable-search-selector')).getByRole('option')).toHaveCount(1)
+      const filteredBox = await panel.boundingBox()
+
+      expect(initialBox).toBeTruthy()
+      expect(filteredBox).toBeTruthy()
+      expect(filteredBox!.width).toBeGreaterThanOrEqual(initialBox!.width - 1)
+    })
+
+    test('打开期间新增更宽选项时面板可以增长', async ({ page }) => {
+      await getTrigger(page, 'dynamic-width-selector').click()
+      const panel = (await getListbox(page, 'dynamic-width-selector')).locator('..')
+      const initialBox = await panel.boundingBox()
+
+      await page.getByTestId('add-rich-width-models').click()
+      await expect((await getListbox(page, 'dynamic-width-selector')).getByRole('option')).toHaveCount(2)
+
+      expect(initialBox).toBeTruthy()
+      await expect.poll(async () => (await panel.boundingBox())?.width ?? 0).toBeGreaterThan(initialBox!.width + 100)
+    })
+
+    test('多实例 ARIA id 应唯一，打开第二个应通过 outside pointer 关闭第一个', async ({ page }) => {
+      const primary = getTrigger(page, 'primary-selector')
+      const secondary = getTrigger(page, 'secondary-selector')
+      expect(await primary.getAttribute('aria-controls')).not.toBe(await secondary.getAttribute('aria-controls'))
+
+      await primary.click()
+      await expect(primary).toHaveAttribute('aria-expanded', 'true')
+      await secondary.click()
+      await expect(primary).toHaveAttribute('aria-expanded', 'false')
+      await expect(secondary).toHaveAttribute('aria-expanded', 'true')
+      await expect(await getListbox(page, 'secondary-selector')).toBeVisible()
+    })
+
+    test('outside click 应关闭面板且不把焦点抢回 trigger', async ({ page }) => {
+      const trigger = getTrigger(page, 'primary-selector')
+      const outsideAction = page.getByTestId('outside-action')
+
+      await trigger.click()
+      await outsideAction.click()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+      await expect(outsideAction).toBeFocused()
+    })
+
+    test('非法 appendTo 选择器应回退到默认挂载节点', async ({ page }) => {
+      const trigger = page.getByTestId('invalid-append-to-selector').getByRole('button')
+
+      await trigger.click()
+      const listbox = await getListbox(page, 'invalid-append-to-selector')
+      await expect(listbox).toBeVisible()
+      await listbox.press('Escape')
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+    })
+
+    test('快速 open/close 不应留下过期浮层', async ({ page }) => {
+      await page.getByTestId('rapid-open-close').click()
+      await expect(page.getByTestId('rapid-open-state')).toHaveText('false')
+      await expect(getTrigger(page, 'rapid-selector')).toHaveAttribute('aria-expanded', 'false')
+      await expect(await getListbox(page, 'rapid-selector')).toHaveCount(0)
+      await expect(page.locator('.tr-model-selector__dropdown-wrapper.is-positioned')).toHaveCount(0)
+    })
+
+    test('slots 应保留语义 wrapper，并应支持 panelClass 和 empty slot', async ({ page }) => {
+      const trigger = getTrigger(page, 'slot-selector')
+      await expect(page.getByTestId('slot-trigger-content')).toContainText('Closed: GPT-4o')
+      await trigger.click()
+
+      await expect(page.getByTestId('slot-trigger-content')).toContainText('Opened: GPT-4o')
+      const listbox = await getListbox(page, 'slot-selector')
+      await expect(listbox.getByRole('group', { name: 'OpenAI' })).toBeVisible()
+      await expect(page.getByTestId('slot-item-gpt-4o')).toContainText('Custom GPT-4o selected')
+
+      const panel = page.locator('.tr-model-selector__panel.model-selector-test__custom-content')
+      await expect(panel).toBeVisible()
+      await expect(panel).toHaveCSS('border-top-width', '2px')
+
+      await (await getSearch(page, 'slot-selector')).fill('missing-value')
+      await expect(page.getByTestId('slot-empty')).toHaveText('Nothing matches missing-value')
+      await expect(listbox.getByRole('option')).toHaveCount(0)
+      await page.getByTestId('slot-footer-close').click()
+      await expect(trigger).toHaveAttribute('aria-expanded', 'false')
+      await expect(trigger).toBeFocused()
+    })
+
+    test('variant/size/disabled 应输出对应状态，三个 size 高度递增', async ({ page }) => {
+      const small = page.getByTestId('outline-small-selector').getByRole('button')
+      const normal = page.getByTestId('ghost-normal-selector').getByRole('button')
+      const large = page.getByTestId('muted-large-selector').getByRole('button')
+      const disabled = page.getByTestId('disabled-selector').getByRole('button')
+
+      await expect(small).toHaveClass(/tr-model-selector__trigger--outline/)
+      await expect(small).toHaveClass(/tr-model-selector__trigger--small/)
+      await expect(normal).toHaveClass(/tr-model-selector__trigger--ghost/)
+      await expect(normal).toHaveClass(/tr-model-selector__trigger--normal/)
+      await expect(large).toHaveClass(/tr-model-selector__trigger--muted/)
+      await expect(large).toHaveClass(/tr-model-selector__trigger--large/)
+      await expect(disabled).toBeDisabled()
+      await expect(small).toHaveCSS('border-top-style', 'solid')
+      await expect(small).toHaveCSS('border-top-width', '1px')
+
+      const [smallBox, normalBox, largeBox] = await Promise.all([
+        small.boundingBox(),
+        normal.boundingBox(),
+        large.boundingBox(),
+      ])
+      expect(smallBox).toBeTruthy()
+      expect(normalBox).toBeTruthy()
+      expect(largeBox).toBeTruthy()
+      expect(normalBox!.height).toBeGreaterThan(smallBox!.height)
+      expect(largeBox!.height).toBeGreaterThan(normalBox!.height)
+    })
+
+    test('暗色 token 应生效，窄屏下面板不超出视口', async ({ page }) => {
+      const trigger = page.getByTestId('outline-small-selector').getByRole('button')
+      const lightBackground = await trigger.evaluate((element) => getComputedStyle(element).backgroundColor)
+
+      await page.getByTestId('dark-mode-toggle').click()
+      await expect(page.locator('html')).toHaveAttribute('data-tr-color-mode', 'dark')
+      await expect
+        .poll(() => trigger.evaluate((element) => getComputedStyle(element).backgroundColor))
+        .not.toBe(lightBackground)
+
+      await page.setViewportSize({ width: 360, height: 720 })
+      await getTrigger(page, 'muted-large-selector').click()
+      const panelBox = await (await getListbox(page, 'muted-large-selector')).locator('..').boundingBox()
+      expect(panelBox).toBeTruthy()
+      expect(panelBox!.x).toBeGreaterThanOrEqual(7)
+      expect(panelBox!.x + panelBox!.width).toBeLessThanOrEqual(353)
+
+      await getTrigger(page, 'effort-uncontrolled-selector').click()
+      const effortGroup = (await getListbox(page, 'effort-uncontrolled-selector'))
+        .locator('..')
+        .getByRole('group', { name: 'Thinking' })
+      const effortGroupBox = await effortGroup.boundingBox()
+      expect(effortGroupBox).toBeTruthy()
+      expect(effortGroupBox!.x).toBeGreaterThanOrEqual(7)
+      expect(effortGroupBox!.x + effortGroupBox!.width).toBeLessThanOrEqual(353)
+    })
+  })
+})
diff --git a/packages/test/src/model-selector/index.vue b/packages/test/src/model-selector/index.vue
new file mode 100644
index 000000000..643106f4c
--- /dev/null
+++ b/packages/test/src/model-selector/index.vue
@@ -0,0 +1,745 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, reactive, ref, shallowRef } from 'vue'
+import { TrModelSelector } from '@opentiny/tiny-robot'
+import type { ModelSelectorReasoningEffortOption, ModelSelectorOption } from '@opentiny/tiny-robot'
+import { IconDeepseek } from '@opentiny/tiny-robot-svgs'
+
+interface SelectorEventLog {
+  updates: number
+  changes: number
+  openUpdates: number
+  lastValue: string | null
+  lastChange: string
+  lastOpen: boolean | null
+}
+
+interface EffortEventLog {
+  updates: number
+  changes: number
+  lastValue: string | null
+  lastChange: string | null
+  sequence: string[]
+}
+
+function createEventLog(): SelectorEventLog {
+  return reactive({
+    updates: 0,
+    changes: 0,
+    openUpdates: 0,
+    lastValue: null,
+    lastChange: '',
+    lastOpen: null,
+  })
+}
+
+function createEffortEventLog(): EffortEventLog {
+  return reactive({
+    updates: 0,
+    changes: 0,
+    lastValue: null,
+    lastChange: null,
+    sequence: [],
+  })
+}
+
+function recordValue(log: SelectorEventLog, value: string | null) {
+  log.updates += 1
+  log.lastValue = value
+}
+
+function recordChange(log: SelectorEventLog, option: ModelSelectorOption) {
+  log.changes += 1
+  log.lastChange = option.value
+}
+
+function recordOpen(log: SelectorEventLog, open: boolean) {
+  log.openUpdates += 1
+  log.lastOpen = open
+}
+
+function recordEffortValue(log: EffortEventLog, value: string | null) {
+  log.updates += 1
+  log.lastValue = value
+  log.sequence.push(`update:${value ?? 'null'}`)
+}
+
+function recordEffortChange(log: EffortEventLog, option: ModelSelectorReasoningEffortOption | null) {
+  log.changes += 1
+  log.lastChange = option?.value ?? null
+  log.sequence.push(`change:${option?.value ?? 'null'}`)
+}
+
+const models: readonly ModelSelectorOption[] = [
+  {
+    value: 'gpt-4o',
+    label: 'GPT-4o',
+    description: 'Fast multimodal model',
+    group: 'OpenAI',
+    icon: 'https://example.com/model.svg',
+  },
+  {
+    value: 'gpt-4.1',
+    label: 'GPT-4.1',
+    description: 'Precise coding model',
+    group: 'OpenAI',
+    icon: IconDeepseek,
+  },
+  {
+    value: 'claude-sonnet',
+    label: 'Claude Sonnet',
+    description: 'Balanced reasoning model',
+    group: 'Anthropic',
+  },
+  {
+    value: 'claude-haiku',
+    label: 'Claude Haiku',
+    description: 'Unavailable compact model',
+    disabled: true,
+    group: 'Anthropic',
+  },
+  {
+    value: 'deepseek-r1',
+    label: 'DeepSeek R1',
+    description: 'Open reasoning model',
+    group: 'Open Source',
+  },
+]
+
+const compactModels = models.slice(0, 3)
+const shortModels: readonly ModelSelectorOption[] = [
+  { value: 'short-a', label: 'A' },
+  { value: 'short-b', label: 'B' },
+]
+const richWidthModels: readonly ModelSelectorOption[] = [
+  {
+    value: 'rich-width-a',
+    label: 'A model name that is intentionally much longer than the available option text column',
+    description:
+      'A detailed model description that is intentionally long enough to verify the configurable intrinsic width cap.',
+    icon: IconDeepseek,
+  },
+  {
+    value: 'rich-width-b',
+    label: 'Another intentionally verbose model name',
+    description: 'Another long description used to keep the panel representative of information-rich options.',
+    icon: IconDeepseek,
+  },
+]
+const stableSearchModels: readonly ModelSelectorOption[] = [...richWidthModels, { value: 'stable-short', label: 'Ω' }]
+const dynamicWidthModels = ref<readonly ModelSelectorOption[]>(shortModels)
+
+function addRichWidthModels() {
+  dynamicWidthModels.value = richWidthModels
+}
+
+const shortEffortModels: readonly ModelSelectorOption[] = [
+  {
+    value: 'short-effort',
+    label: 'A',
+    reasoningEfforts: [{ value: 'low', label: 'L' }],
+  },
+]
+const minimalModels: readonly ModelSelectorOption[] = [
+  { value: 'minimal-reasoning', label: 'Minimal Reasoning', reasoningEfforts: true },
+  { value: 'minimal-plain', label: 'Minimal Plain' },
+]
+const customFilterModels: readonly ModelSelectorOption[] = [
+  { value: 'custom-alpha', label: 'First Model', description: 'Ordinary choice' },
+  { value: 'custom-beta', label: 'Second Model', description: 'Only the custom filter finds this value' },
+]
+const effortModels: readonly ModelSelectorOption[] = [
+  {
+    value: 'reasoning-default',
+    label: 'Reasoning Default',
+    description: 'Uses the default effort levels',
+    reasoningEfforts: true,
+  },
+  {
+    value: 'reasoning-custom',
+    label: 'Reasoning Custom',
+    description: 'Uses custom effort levels',
+    reasoningEfforts: [
+      { value: 'minimal', label: 'Minimal' },
+      { value: 'medium', label: 'Medium' },
+      { value: 'maximum', label: 'Maximum', disabled: true },
+      { value: 'medium', label: 'Duplicate Medium' },
+    ],
+  },
+  {
+    value: 'plain-model',
+    label: 'Plain Model',
+    description: 'Does not support configurable effort',
+  },
+  {
+    value: 'disabled-reasoning',
+    label: 'Disabled Reasoning',
+    description: 'Disabled model with effort metadata',
+    disabled: true,
+    reasoningEfforts: true,
+  },
+]
+
+const logs = {
+  init: createEventLog(),
+  async: createEventLog(),
+  uncontrolled: createEventLog(),
+  controlled: createEventLog(),
+  blocked: createEventLog(),
+  keyboard: createEventLog(),
+  slots: createEventLog(),
+  defaultOpen: createEventLog(),
+  effortUncontrolled: createEffortEventLog(),
+  effortControlled: createEffortEventLog(),
+  effortBlocked: createEffortEventLog(),
+}
+
+const asyncModels = ref<readonly ModelSelectorOption[]>([])
+const controlledValue = ref<string | null>('gpt-4o')
+const controlledOpen = ref(false)
+const controlledModelRemoved = ref(false)
+const blockedValue = ref<string | null>('gpt-4o')
+const blockedOpen = ref(false)
+const controlledModels = computed(() =>
+  controlledModelRemoved.value ? models.filter((option) => option.value !== 'gpt-4o') : models,
+)
+const initiallyUndefinedValue = shallowRef<string | null | undefined>(undefined)
+const initiallyUndefinedOpen = shallowRef<boolean | undefined>(undefined)
+const initiallyUndefinedEffort = shallowRef<string | null | undefined>(undefined)
+const blockedEffort = shallowRef<string | null>('medium')
+
+function primeInitiallyUndefinedSelector() {
+  initiallyUndefinedValue.value = 'reasoning-default'
+  initiallyUndefinedEffort.value = 'high'
+  initiallyUndefinedOpen.value = true
+}
+
+function showDisabledEffortModel() {
+  initiallyUndefinedValue.value = 'disabled-reasoning'
+  initiallyUndefinedEffort.value = 'high'
+  initiallyUndefinedOpen.value = true
+}
+
+function handleControlledValue(value: string | null) {
+  recordValue(logs.controlled, value)
+  controlledValue.value = value
+}
+
+function handleControlledOpen(open: boolean) {
+  recordOpen(logs.controlled, open)
+  controlledOpen.value = open
+}
+
+function setControlledInvalid() {
+  controlledValue.value = 'retired-model'
+}
+
+function removeControlledModel() {
+  controlledModelRemoved.value = true
+}
+
+function restoreControlledModel() {
+  controlledModelRemoved.value = false
+}
+
+function customFilter(query: string, option: ModelSelectorOption) {
+  return query.trim().toLocaleLowerCase() === 'featured' && option.value === 'custom-beta'
+}
+
+const slotHeaderActivations = ref(0)
+const slotFooterActivations = ref(0)
+const rapidOpen = ref(false)
+const showDefaultOpenSelector = ref(false)
+
+async function rapidOpenClose() {
+  rapidOpen.value = true
+  await nextTick()
+  rapidOpen.value = false
+}
+
+const isDark = ref(false)
+
+function toggleDarkMode() {
+  isDark.value = !isDark.value
+  document.documentElement.setAttribute('data-tr-color-mode', isDark.value ? 'dark' : 'light')
+}
+
+onBeforeUnmount(() => {
+  document.documentElement.removeAttribute('data-tr-color-mode')
+})
+</script>
+
+<template>
+  <div class="model-selector-test">
+    <header class="model-selector-test__intro">
+      <div>
+        <h2>ModelSelector 组件测试</h2>
+        <p>验证状态契约、effort、搜索分组、键盘与 ARIA、slots 以及浮层边界。</p>
+      </div>
+      <button data-testid="dark-mode-toggle" type="button" @click="toggleDarkMode">
+        {{ isDark ? 'Use light mode' : 'Use dark mode' }}
+      </button>
+    </header>
+
+    <button data-testid="outside-action" type="button">Outside action</button>
+
+    <section class="model-selector-test__section" data-testid="init-section">
+      <h3>初始化与异步 models</h3>
+      <div class="model-selector-test__row">
+        <TrModelSelector
+          data-testid="init-selector"
+          :models="models"
+          searchable
+          @update:model-value="recordValue(logs.init, $event)"
+          @change="recordChange(logs.init, $event)"
+          @update:open="recordOpen(logs.init, $event)"
+        />
+
+        <button data-testid="load-async-models" type="button" @click="asyncModels = models">Load async models</button>
+        <TrModelSelector
+          data-testid="async-selector"
+          :models="asyncModels"
+          @update:model-value="recordValue(logs.async, $event)"
+          @change="recordChange(logs.async, $event)"
+          @update:open="recordOpen(logs.async, $event)"
+        />
+      </div>
+      <div class="model-selector-test__metrics">
+        <output data-testid="init-updates">{{ logs.init.updates }}</output>
+        <output data-testid="init-changes">{{ logs.init.changes }}</output>
+        <output data-testid="async-updates">{{ logs.async.updates }}</output>
+        <output data-testid="async-changes">{{ logs.async.changes }}</output>
+      </div>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="minimal-section">
+      <h3>最小数据与可访问名称回退</h3>
+      <div class="model-selector-test__row">
+        <TrModelSelector
+          data-testid="minimal-fallback-selector"
+          :models="minimalModels"
+          model-value="minimal-reasoning"
+          reasoning-effort="medium"
+          placeholder="Choose compact model"
+          search-placeholder="Find compact model"
+          reasoning-effort-label="Thinking level"
+        />
+        <TrModelSelector
+          data-testid="minimal-explicit-selector"
+          :models="minimalModels"
+          model-value="minimal-reasoning"
+          reasoning-effort="medium"
+          searchable
+          placeholder="Ignored selector fallback"
+          search-placeholder="Ignored search fallback"
+          reasoning-effort-label="Ignored effort fallback"
+        />
+      </div>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="uncontrolled-section">
+      <h3>非受控 value/open</h3>
+      <TrModelSelector
+        data-testid="uncontrolled-selector"
+        :models="models"
+        searchable
+        default-value="claude-sonnet"
+        @update:model-value="recordValue(logs.uncontrolled, $event)"
+        @change="recordChange(logs.uncontrolled, $event)"
+        @update:open="recordOpen(logs.uncontrolled, $event)"
+      />
+      <div class="model-selector-test__metrics">
+        <output data-testid="uncontrolled-updates">{{ logs.uncontrolled.updates }}</output>
+        <output data-testid="uncontrolled-changes">{{ logs.uncontrolled.changes }}</output>
+        <output data-testid="uncontrolled-last-value">{{ logs.uncontrolled.lastValue ?? 'null' }}</output>
+        <output data-testid="uncontrolled-open-updates">{{ logs.uncontrolled.openUpdates }}</output>
+      </div>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="controlled-section">
+      <h3>受控 value/open 与无效值</h3>
+      <div class="model-selector-test__controls">
+        <button data-testid="controlled-open" type="button" @click="controlledOpen = true">External open</button>
+        <button data-testid="controlled-close" type="button" @click="controlledOpen = false">External close</button>
+        <button data-testid="controlled-invalid" type="button" @click="setControlledInvalid">Set invalid</button>
+        <button data-testid="controlled-remove" type="button" @click="removeControlledModel">Remove selected</button>
+        <button data-testid="controlled-restore" type="button" @click="restoreControlledModel">Restore selected</button>
+        <button data-testid="controlled-reset" type="button" @click="controlledValue = 'gpt-4o'">Reset value</button>
+      </div>
+      <TrModelSelector
+        data-testid="controlled-selector"
+        :models="controlledModels"
+        :model-value="controlledValue"
+        :open="controlledOpen"
+        searchable
+        @update:model-value="handleControlledValue"
+        @change="recordChange(logs.controlled, $event)"
+        @update:open="handleControlledOpen"
+      />
+      <div class="model-selector-test__metrics">
+        <output data-testid="controlled-value">{{ controlledValue ?? 'null' }}</output>
+        <output data-testid="controlled-open-state">{{ controlledOpen }}</output>
+        <output data-testid="controlled-updates">{{ logs.controlled.updates }}</output>
+        <output data-testid="controlled-changes">{{ logs.controlled.changes }}</output>
+        <output data-testid="controlled-open-updates">{{ logs.controlled.openUpdates }}</output>
+      </div>
+
+      <div class="model-selector-test__controls">
+        <button data-testid="blocked-force-open" type="button" @click="blockedOpen = true">Force blocked open</button>
+        <button data-testid="blocked-force-close" type="button" @click="blockedOpen = false">
+          Force blocked close
+        </button>
+      </div>
+      <TrModelSelector
+        data-testid="blocked-selector"
+        :models="controlledModels"
+        :model-value="blockedValue"
+        :open="blockedOpen"
+        searchable
+        @update:model-value="recordValue(logs.blocked, $event)"
+        @change="recordChange(logs.blocked, $event)"
+        @update:open="recordOpen(logs.blocked, $event)"
+      />
+      <div class="model-selector-test__metrics">
+        <output data-testid="blocked-value">{{ blockedValue }}</output>
+        <output data-testid="blocked-open-state">{{ blockedOpen }}</output>
+        <output data-testid="blocked-updates">{{ logs.blocked.updates }}</output>
+        <output data-testid="blocked-changes">{{ logs.blocked.changes }}</output>
+        <output data-testid="blocked-open-updates">{{ logs.blocked.openUpdates }}</output>
+      </div>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="effort-section">
+      <h3>Reasoning effort</h3>
+
+      <TrModelSelector
+        data-testid="effort-uncontrolled-selector"
+        :models="effortModels"
+        :searchable="false"
+        default-value="reasoning-default"
+        default-reasoning-effort="medium"
+        @update:reasoning-effort="recordEffortValue(logs.effortUncontrolled, $event)"
+        @reasoning-effort-change="recordEffortChange(logs.effortUncontrolled, $event)"
+      />
+      <div class="model-selector-test__metrics">
+        <output data-testid="effort-uncontrolled-updates">{{ logs.effortUncontrolled.updates }}</output>
+        <output data-testid="effort-uncontrolled-changes">{{ logs.effortUncontrolled.changes }}</output>
+        <output data-testid="effort-uncontrolled-value">{{ logs.effortUncontrolled.lastValue ?? 'null' }}</output>
+        <output data-testid="effort-uncontrolled-sequence">{{ logs.effortUncontrolled.sequence.join(' > ') }}</output>
+      </div>
+
+      <TrModelSelector
+        data-testid="effort-blocked-selector"
+        :models="effortModels"
+        :searchable="false"
+        model-value="reasoning-default"
+        :reasoning-effort="blockedEffort"
+        @update:reasoning-effort="recordEffortValue(logs.effortBlocked, $event)"
+        @reasoning-effort-change="recordEffortChange(logs.effortBlocked, $event)"
+      />
+      <div class="model-selector-test__metrics">
+        <output data-testid="effort-blocked-raw">{{ blockedEffort }}</output>
+        <output data-testid="effort-blocked-updates">{{ logs.effortBlocked.updates }}</output>
+        <output data-testid="effort-blocked-changes">{{ logs.effortBlocked.changes }}</output>
+        <output data-testid="effort-blocked-sequence">{{ logs.effortBlocked.sequence.join(' > ') }}</output>
+      </div>
+
+      <div class="model-selector-test__controls">
+        <button data-testid="undefined-controlled-prime" type="button" @click="primeInitiallyUndefinedSelector">
+          Set initially undefined models
+        </button>
+        <button data-testid="undefined-controlled-disabled" type="button" @click="showDisabledEffortModel">
+          Show disabled effort model
+        </button>
+      </div>
+      <TrModelSelector
+        v-model="initiallyUndefinedValue"
+        v-model:open="initiallyUndefinedOpen"
+        v-model:reasoning-effort="initiallyUndefinedEffort"
+        data-testid="effort-controlled-selector"
+        :models="effortModels"
+        :searchable="false"
+        @update:reasoning-effort="recordEffortValue(logs.effortControlled, $event)"
+        @reasoning-effort-change="recordEffortChange(logs.effortControlled, $event)"
+      >
+        <template #trigger="{ label, reasoningEffortOption }">
+          <span data-testid="effort-controlled-trigger-slot">
+            {{ label }}|{{ reasoningEffortOption?.value ?? 'null' }}|{{ reasoningEffortOption?.label ?? 'null' }}
+          </span>
+        </template>
+        <template #footer="{ reasoningEfforts, reasoningEffortOption, setReasoningEffort, close }">
+          <div data-testid="effort-custom-footer">
+            <output data-testid="effort-footer-count">{{ reasoningEfforts.length }}</output>
+            <output data-testid="effort-footer-value">{{ reasoningEffortOption?.value ?? 'null' }}</output>
+            <output data-testid="effort-footer-option">{{ reasoningEffortOption?.label ?? 'null' }}</output>
+            <button data-testid="effort-footer-medium" type="button" @click="setReasoningEffort('medium')">
+              Medium
+            </button>
+            <button data-testid="effort-footer-high" type="button" @click="setReasoningEffort('high')">High</button>
+            <button data-testid="effort-footer-low" type="button" @click="setReasoningEffort('low')">Low</button>
+            <button data-testid="effort-footer-close" type="button" @click="close">Close effort panel</button>
+          </div>
+        </template>
+      </TrModelSelector>
+      <div class="model-selector-test__metrics">
+        <output data-testid="effort-controlled-model">
+          {{ initiallyUndefinedValue === undefined ? 'undefined' : String(initiallyUndefinedValue) }}
+        </output>
+        <output data-testid="effort-controlled-open">
+          {{ initiallyUndefinedOpen === undefined ? 'undefined' : String(initiallyUndefinedOpen) }}
+        </output>
+        <output data-testid="effort-controlled-raw">
+          {{ initiallyUndefinedEffort === undefined ? 'undefined' : String(initiallyUndefinedEffort) }}
+        </output>
+        <output data-testid="effort-controlled-updates">{{ logs.effortControlled.updates }}</output>
+        <output data-testid="effort-controlled-changes">{{ logs.effortControlled.changes }}</output>
+        <output data-testid="effort-controlled-sequence">{{ logs.effortControlled.sequence.join(' > ') }}</output>
+      </div>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="filter-section">
+      <h3>自定义过滤</h3>
+      <TrModelSelector
+        data-testid="custom-filter-selector"
+        :models="customFilterModels"
+        :filter-method="customFilter"
+        searchable
+      />
+    </section>
+
+    <section class="model-selector-test__section" data-testid="keyboard-section">
+      <h3>无搜索键盘导航</h3>
+      <TrModelSelector
+        data-testid="keyboard-selector"
+        :models="models"
+        :searchable="false"
+        @update:model-value="recordValue(logs.keyboard, $event)"
+        @change="recordChange(logs.keyboard, $event)"
+        @update:open="recordOpen(logs.keyboard, $event)"
+      />
+      <div class="model-selector-test__metrics">
+        <output data-testid="keyboard-updates">{{ logs.keyboard.updates }}</output>
+        <output data-testid="keyboard-changes">{{ logs.keyboard.changes }}</output>
+        <output data-testid="keyboard-last-value">{{ logs.keyboard.lastValue ?? 'null' }}</output>
+      </div>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="slots-section">
+      <h3>Slots 与辅助控件</h3>
+      <TrModelSelector
+        data-testid="slot-selector"
+        :models="models"
+        default-value="gpt-4o"
+        searchable
+        variant="ghost"
+        size="small"
+        panel-class="model-selector-test__custom-content"
+        @update:model-value="recordValue(logs.slots, $event)"
+        @change="recordChange(logs.slots, $event)"
+        @update:open="recordOpen(logs.slots, $event)"
+      >
+        <template #trigger="{ label, open }">
+          <span data-testid="slot-trigger-content">{{ open ? 'Opened' : 'Closed' }}: {{ label }}</span>
+        </template>
+        <template #header>
+          <button data-testid="slot-header-action" type="button" @click="slotHeaderActivations += 1">
+            Header action
+          </button>
+        </template>
+        <template #item="{ option, selected }">
+          <span :data-testid="`slot-item-${option.value}`">
+            Custom {{ option.label }}{{ selected ? ' selected' : '' }}{{ option.disabled ? ' disabled' : '' }}
+          </span>
+        </template>
+        <template #empty="{ query }">
+          <span data-testid="slot-empty">Nothing matches {{ query }}</span>
+        </template>
+        <template #footer="{ close }">
+          <button data-testid="slot-footer-action" type="button" @click="slotFooterActivations += 1">
+            Footer action
+          </button>
+          <button data-testid="slot-footer-close" type="button" @click="close">Close from footer</button>
+        </template>
+      </TrModelSelector>
+      <div class="model-selector-test__metrics">
+        <output data-testid="slot-header-activations">{{ slotHeaderActivations }}</output>
+        <output data-testid="slot-footer-activations">{{ slotFooterActivations }}</output>
+        <output data-testid="slot-updates">{{ logs.slots.updates }}</output>
+        <output data-testid="slot-changes">{{ logs.slots.changes }}</output>
+      </div>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="multiple-section">
+      <h3>多实例与 outside click</h3>
+      <div class="model-selector-test__row">
+        <TrModelSelector data-testid="short-small-selector" :models="shortModels" size="small" />
+        <TrModelSelector data-testid="short-selector" :models="shortModels" default-value="short-a" />
+        <TrModelSelector data-testid="short-unselected-selector" :models="shortModels" placeholder="A" />
+        <TrModelSelector data-testid="short-search-selector" :models="shortModels" searchable />
+        <TrModelSelector data-testid="empty-selector" :models="[]" placeholder="A" />
+        <TrModelSelector
+          data-testid="short-effort-selector"
+          :models="shortEffortModels"
+          default-value="short-effort"
+          default-reasoning-effort="low"
+        />
+        <TrModelSelector data-testid="short-large-selector" :models="shortModels" size="large" />
+        <TrModelSelector data-testid="rich-width-selector" :models="richWidthModels" default-value="rich-width-a" />
+        <TrModelSelector
+          data-testid="narrow-rich-width-selector"
+          :models="richWidthModels"
+          default-value="rich-width-a"
+          panel-class="model-selector-test__narrow-panel"
+        />
+        <TrModelSelector data-testid="stable-search-selector" :models="stableSearchModels" searchable />
+        <TrModelSelector data-testid="dynamic-width-selector" :models="dynamicWidthModels" default-value="short-a">
+          <template #header>
+            <button data-testid="add-rich-width-models" type="button" @click="addRichWidthModels">
+              Add wider options
+            </button>
+          </template>
+        </TrModelSelector>
+        <TrModelSelector data-testid="primary-selector" :models="compactModels" />
+        <TrModelSelector data-testid="secondary-selector" :models="compactModels" />
+        <TrModelSelector data-testid="invalid-append-to-selector" :models="compactModels" append-to="[" />
+      </div>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="lifecycle-section">
+      <h3>defaultOpen 与快速开关</h3>
+      <div class="model-selector-test__controls">
+        <button data-testid="mount-default-open" type="button" @click="showDefaultOpenSelector = true">
+          Mount default open
+        </button>
+        <button data-testid="rapid-open-close" type="button" @click="rapidOpenClose">Rapid open close</button>
+      </div>
+      <TrModelSelector
+        v-if="showDefaultOpenSelector"
+        data-testid="default-open-selector"
+        :models="compactModels"
+        default-open
+        searchable
+        @update:open="recordOpen(logs.defaultOpen, $event)"
+      />
+      <TrModelSelector
+        data-testid="rapid-selector"
+        :models="compactModels"
+        :open="rapidOpen"
+        @update:open="rapidOpen = $event"
+      />
+      <output data-testid="default-open-updates">{{ logs.defaultOpen.openUpdates }}</output>
+      <output data-testid="rapid-open-state">{{ rapidOpen }}</output>
+    </section>
+
+    <section class="model-selector-test__section" data-testid="appearance-section">
+      <h3>Variant、size、disabled 与窄屏</h3>
+      <div class="model-selector-test__row model-selector-test__row--appearance">
+        <TrModelSelector
+          data-testid="outline-small-selector"
+          :models="compactModels"
+          :searchable="false"
+          variant="outline"
+          size="small"
+        />
+        <TrModelSelector
+          data-testid="ghost-normal-selector"
+          :models="compactModels"
+          :searchable="false"
+          variant="ghost"
+          size="normal"
+        />
+        <TrModelSelector
+          data-testid="muted-large-selector"
+          :models="compactModels"
+          :searchable="false"
+          variant="muted"
+          size="large"
+        />
+        <TrModelSelector data-testid="disabled-selector" :models="compactModels" disabled />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.model-selector-test {
+  display: grid;
+  gap: 20px;
+  max-width: 1120px;
+  margin: 0 auto;
+  color: var(--tr-text-primary, #1f2937);
+}
+
+.model-selector-test__intro,
+.model-selector-test__row,
+.model-selector-test__controls,
+.model-selector-test__metrics {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.model-selector-test__intro {
+  justify-content: space-between;
+}
+
+.model-selector-test__intro h2,
+.model-selector-test__intro p,
+.model-selector-test__section h3 {
+  margin: 0;
+}
+
+.model-selector-test__intro p {
+  margin-top: 6px;
+  color: var(--tr-text-secondary, #667085);
+}
+
+.model-selector-test__section {
+  display: grid;
+  gap: 12px;
+  padding: 16px;
+  border: 1px solid var(--tr-border-color-default, #d0d5dd);
+  border-radius: 12px;
+  background: var(--tr-container-bg-default, #fff);
+}
+
+.model-selector-test button:not(.tr-model-selector__trigger) {
+  padding: 7px 10px;
+  border: 1px solid var(--tr-border-color-default, #d0d5dd);
+  border-radius: 7px;
+  background: var(--tr-container-bg-default, #fff);
+  color: inherit;
+  cursor: pointer;
+}
+
+.model-selector-test__metrics output {
+  min-width: 28px;
+  padding: 3px 6px;
+  border-radius: 4px;
+  background: var(--tr-container-bg-default-2, #f2f4f7);
+  font: 12px/1.4 monospace;
+}
+
+.model-selector-test__row--appearance {
+  align-items: flex-start;
+}
+
+:global(.tr-model-selector__panel.model-selector-test__custom-content) {
+  border-width: 2px;
+  border-style: dashed;
+}
+
+:global(.tr-model-selector__panel.model-selector-test__narrow-panel) {
+  --tr-model-selector-option-text-max-width: 160px;
+}
+
+@media (max-width: 480px) {
+  .model-selector-test {
+    gap: 12px;
+  }
+
+  .model-selector-test__section {
+    padding: 10px;
+  }
+}
+</style>