From 48bf7367fa54e67d23411d627af4d9031f8d875f Mon Sep 17 00:00:00 2001
From: Mars-Sea <1195751600@qq.com>
Date: Fri, 30 Oct 2026 15:54:32 +0800
Subject: [PATCH 1/2] =?UTF-8?q?fix(client):=20=E8=AE=BE=E7=BD=AE=E9=A1=B5?=
 =?UTF-8?q?=E5=BC=80=E5=85=B3=E6=94=B9=E7=94=A8=E5=AE=BF=E4=B8=BB=20Switch?=
 =?UTF-8?q?=20=E7=BB=84=E4=BB=B6=EF=BC=88#108=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

五个布尔设置行原先是 appearance:none 的 checkbox 加 ::after 伪元素画出的开关，
改为宿主 primitives 的 Switch（<button role="switch" aria-checked>），外观随
aria-checked 变化，与宿主其他设置页开关同源。

- 尺寸保持设计画布的 40x24、滑块 20px（原语 36x20，行程同为 16px）
- 底色与滑块统一 160ms 强 ease-out 同步过渡；按压缩放 0.95，减少动效下取消
- 原语不收 id：行标题改为纯文本，开关以 aria-label 取名，点标题不再切换
- Switch 签名与样式在 0.2.1-rc.2 / 0.2.1-rc.4 / 0.2.2-alpha.2 逐字一致
- 新增 toggle-field-render 测试，测试替身补 Switch

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                                |  6 ++
 docs/agent-reference/client-and-settings.md |  2 +-
 src/client/page-styles.ts                   | 37 +++++-----
 src/client/section.tsx                      | 31 ++++----
 tests/_primitives-stub.mjs                  | 14 ++++
 tests/toggle-field-render.test.ts           | 80 +++++++++++++++++++++
 6 files changed, 136 insertions(+), 34 deletions(-)
 create mode 100644 tests/toggle-field-render.test.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2416503..1b8e877 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Changed
+
+- **设置页开关改用宿主 `Switch` 组件（#108）。** 五个布尔设置（按套餐过滤模型、零数据保留、网页搜索、侧边栏额度、缓存图片卸载）原先是 `appearance:none` 的 checkbox 加伪元素画出的开关，现在是宿主 primitives 的 `Switch`（`<button role="switch" aria-checked>`），与宿主其他设置页开关同源，读屏读到的状态与画面不会再不一致。外观保持 40×24；底色与滑块改为 160ms 同步过渡，按下时轻微缩小。点开关行的标题文字不再切换开关，需点开关本身。
+
 ## [0.16.0] - 2026-10-30
 
 ### Changed
diff --git a/docs/agent-reference/client-and-settings.md b/docs/agent-reference/client-and-settings.md
index 19946ce..8024660 100644
--- a/docs/agent-reference/client-and-settings.md
+++ b/docs/agent-reference/client-and-settings.md
@@ -348,7 +348,7 @@ Task-specific reference moved from the former root `AGENTS.md`. All source and t
   包含基础层隐藏项的显式覆盖。保存冲突或缺少原子写入能力时保留草稿。
   显示全部会选中已加载的目录模型；目录失败不清空已存选择。
 - **字号与校验说明**：页面及面板辅助文字至少 12px；重试次数提示与实际 0～50 次限制一致。
-- **设置页动效与悬停（2026-10-29）**：可按的元素（`cc-btn`、`cc-segItem`、`cc-iconButton`、`cc-resetInline`）`:active` 时缩放（0.97，20～28px 图标按钮 0.95），160ms `cubic-bezier(.23,1,.32,1)`；折叠箭头、卡片入场、保存条、额度进度条、`cc-notice` 入场共用这条曲线，颜色与描边 150ms `ease`。只动 `transform`／`opacity`／颜色：额度条 `cc-usageBarFill` 与 `cc-miniMeterFill` 满宽，按比例 `translateX` 左移（保留圆角端），`cc-notice` 用 `@starting-style` 从上方 4px 淡入；保存条 48px、不过冲、出场快于入场。所有 `:hover` 集中在页尾的 `(hover:hover) and (pointer:fine)` 块，块内校验失败的描边排在普通悬停之后，以同等优先级压住它；整行开关（分组标题、账户卡片头）悬停只加深箭头，不铺底色。`prefers-reduced-motion` 去掉缩放与位移、保留淡入与颜色。分组、账户卡片展开收起刻意不加动画。开关 40×24，底色与滑块同步过渡。约束由 `tests/styles.test.ts` 末尾四条用例锁定。分组说明 `cc-groupDesc` 下直接接账户列表、提示块组或覆盖表时留 12px（设置行自带 12px 内边距，不另加）。
+- **设置页动效与悬停（2026-10-29）**：可按的元素（`cc-btn`、`cc-segItem`、`cc-iconButton`、`cc-resetInline`）`:active` 时缩放（0.97，20～28px 图标按钮 0.95），160ms `cubic-bezier(.23,1,.32,1)`；折叠箭头、卡片入场、保存条、额度进度条、`cc-notice` 入场共用这条曲线，颜色与描边 150ms `ease`。只动 `transform`／`opacity`／颜色：额度条 `cc-usageBarFill` 与 `cc-miniMeterFill` 满宽，按比例 `translateX` 左移（保留圆角端），`cc-notice` 用 `@starting-style` 从上方 4px 淡入；保存条 48px、不过冲、出场快于入场。所有 `:hover` 集中在页尾的 `(hover:hover) and (pointer:fine)` 块，块内校验失败的描边排在普通悬停之后，以同等优先级压住它；整行开关（分组标题、账户卡片头）悬停只加深箭头，不铺底色。`prefers-reduced-motion` 去掉缩放与位移、保留淡入与颜色。分组、账户卡片展开收起刻意不加动画。布尔开关（`ToggleField`）用宿主 primitives 的 `Switch`（issue #108，`<button role="switch" aria-checked>`，不再是 `appearance:none` 的 checkbox 加伪元素）；`.cc-switch` 只做三处调整：尺寸保持设计画布的 40×24、滑块 20px（原语为 36×20，两者行程都是 16px）；底色与滑块统一为 160ms 强 ease-out 同步过渡；按压缩放 0.95。原语不收 `id`，所以开关行标题是纯文本、开关以 `aria-label` 取名，点标题不再切换。`Switch` 的签名与样式在 `0.2.1-rc.2`、`0.2.1-rc.4`、`0.2.2-alpha.2` 三版逐字一致（2026-10-30 核对），升级宿主时一并复核。约束由 `tests/styles.test.ts` 末尾四条用例锁定。分组说明 `cc-groupDesc` 下直接接账户列表、提示块组或覆盖表时留 12px（设置行自带 12px 内边距，不另加）。
 - **右侧只有一条边界（2026-10-22）**：设置行控件、账户卡片、分组头动作（「刷新」）、「查看模型用量」都贴内容
   右缘。为此「恢复默认」不在控件后面留列，而是放在标题行「已自定义」徽标后的 20px 圆形图标按钮（`OverrideTag`，
   `cc-resetInline`；只清空存储值的草稿只显示按钮）——同日先后试过「每行末尾留 28px 复位空位」与「卡片、分组头
diff --git a/src/client/page-styles.ts b/src/client/page-styles.ts
index 2f2fefe..493fac4 100644
--- a/src/client/page-styles.ts
+++ b/src/client/page-styles.ts
@@ -213,23 +213,21 @@ export const PAGE_CSS = `
 .cc-check:checked{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}
 .cc-check:checked::after{content:'';position:absolute;top:3px;left:5px;width:3px;height:7px;border:solid var(--dsw-alias-label-primary-foreground,#fff);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
 .cc-checkName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/* Modelled on the platform's own Switch primitive (ui-primitives
- * Switch.module.css): a 40x24 capsule padding its track by 2px and sliding a
- * 20px thumb across the 36px content box. Three things are load-bearing.
- * (1) corner-shape:round on BOTH track and thumb — the theme sets a global
- * superellipse corner shape, which squares a capsule's ends off around a round
- * thumb. (2) No literal colours: brand-primary INVERTS between the modes, so a
- * hardcoded white thumb vanishes on the checked track in dark mode; the brand
- * foreground is what the platform paints on that fill. (3) border-l3 as the
- * off track — border-l2 leaves it indistinguishable from the page. The track
- * and thumb share one duration so the switch reads as one object. */
-.cc-toggle{box-sizing:border-box;appearance:none;flex-shrink:0;width:40px;height:24px;margin:0;padding:2px;border:0;border-radius:12px;corner-shape:round;background:var(--dsw-alias-border-l3);cursor:pointer;position:relative;transition:background-color .12s ease}
-.cc-toggle:checked{background:var(--dsw-alias-brand-primary)}
-.cc-toggle::after{content:'';display:block;width:20px;height:20px;border-radius:50%;corner-shape:round;background:var(--dsw-alias-label-primary-foreground);transition:transform .12s ease}
-.cc-toggle:checked::after{transform:translateX(16px)}
-.cc-toggle:not(:checked)::after{background:var(--dsw-alias-switch-thumb,var(--dsw-alias-label-primary-foreground))}
-.cc-toggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
-.cc-toggle:disabled{cursor:default;opacity:.5}
+/* The settings switches are the platform's Switch primitive (issue #108); its
+ * module CSS owns the colours, capsule shape, focus ring and disabled look.
+ * This layer only adjusts it. (1) Size stays the design canvas's 40x24 with a
+ * 20px thumb, one step up from the primitive's 36x20; the travel is 16px in
+ * both, so the primitive's own translateX still lands the thumb. The
+ * cc-rowControl> qualifier lifts these above the module's single-class rules
+ * whatever order the two sheets load in. (2) Motion joins the page's: the
+ * primitive slides the thumb over 120ms ease and snaps the track colour, so
+ * the thumb and track now share one 160ms strong ease-out and read as one
+ * object, and the switch scales to .95 on press like the other small
+ * pressables. The thumb is targeted as the button's only child because its
+ * module class name is hashed. */
+.cc-rowControl>.cc-switch{width:40px;height:24px;transition:background-color .16s var(--cc-ease-out),transform .16s var(--cc-ease-out)}
+.cc-rowControl>.cc-switch>span{width:20px;height:20px;transition:transform .16s var(--cc-ease-out)}
+.cc-switch:active:not(:disabled){transform:scale(.95)}
 .cc-accountMode{align-items:center;gap:8px;display:flex;margin:12px 16px 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .cc-accountList{flex-direction:column;gap:8px;display:flex}
 .cc-accountList+.cc-panel{margin:8px 16px 16px}
@@ -426,9 +424,10 @@ export const PAGE_CSS = `
  * changes, which carry meaning without motion. Card entrance keeps its fade
  * (the transform is neutralised), and the fold is already instant. */
 @media (prefers-reduced-motion:reduce){
-.cc-foldChevron,.cc-toggle::after,.cc-usageBarFill,.cc-miniMeterFill{transition:none}
+.cc-foldChevron,.cc-rowControl>.cc-switch>span,.cc-usageBarFill,.cc-miniMeterFill{transition:none}
 .cc-btn,.cc-iconButton,.cc-resetInline,.cc-segItem{transition:background-color .15s ease,color .15s ease}
-.cc-btn:active:not(:disabled),.cc-iconButton:active:not(:disabled),.cc-resetInline:active:not(:disabled),.cc-segItem:active:not(:disabled):not(.cc-segOn){transform:none}
+.cc-rowControl>.cc-switch{transition:background-color .15s ease}
+.cc-btn:active:not(:disabled),.cc-iconButton:active:not(:disabled),.cc-resetInline:active:not(:disabled),.cc-segItem:active:not(:disabled):not(.cc-segOn),.cc-switch:active:not(:disabled){transform:none}
 .cc-notice{transition:opacity .2s ease}
 .cc-group{transition:opacity .2s ease;transform:none!important}
 .cc-saveBar{transition:opacity .16s ease,visibility 0s linear .16s}
diff --git a/src/client/section.tsx b/src/client/section.tsx
index b765da0..c5d9688 100644
--- a/src/client/section.tsx
+++ b/src/client/section.tsx
@@ -26,7 +26,7 @@
  */
 
 import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type ButtonHTMLAttributes, type ReactNode } from 'react'
-import { Menu, StateDot } from '@deepseek-ai/dsh-client-ui-primitives'
+import { Menu, StateDot, Switch } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { MenuEntry, StateDotState } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
 import type { CommandCodeCredits } from '../adapter.ts'
@@ -487,8 +487,15 @@ function invalidCopy(reason: StagedField['invalidReason'], t: Translate<Settings
  * One boolean field row rendered as a switch. The staged text is `'true'` /
  * `'false'` / `''` (unset → `defaultChecked`); toggling stages the string the
  * boolean field spec parses back into a real boolean on save.
+ *
+ * The control is the harness's own `Switch` primitive (issue #108), not a
+ * restyled checkbox: a `<button role="switch" aria-checked>` whose drawing keys
+ * off `aria-checked`, so what it shows cannot drift from what assistive tech
+ * reads, and it matches the host's other settings switches. It takes no `id`,
+ * so the row title is plain text and the switch carries the label as its
+ * accessible name instead of through `<label htmlFor>`.
  */
-function ToggleField({
+export function ToggleField({
   id,
   label,
   hint,
@@ -513,21 +520,17 @@ function ToggleField({
   return (
     <SettingRow
       title={label}
-      titleFor={id}
+      titleId={id}
       tag={<OverrideTag label={label} state={state} disabled={disabled} t={t} onReset={onReset} />}
       description={hint}
       control={
-        <>
-          <input
-            id={id}
-            className="cc-toggle"
-            type="checkbox"
-            role="switch"
-            checked={checked}
-            disabled={disabled}
-            onChange={(event) => onEdit(event.target.checked ? 'true' : 'false')}
-          />
-        </>
+        <Switch
+          className="cc-switch"
+          checked={checked}
+          label={label}
+          disabled={disabled}
+          onChange={(next) => onEdit(next ? 'true' : 'false')}
+        />
       }
     />
   )
diff --git a/tests/_primitives-stub.mjs b/tests/_primitives-stub.mjs
index 7b5b2d5..9506a57 100644
--- a/tests/_primitives-stub.mjs
+++ b/tests/_primitives-stub.mjs
@@ -35,3 +35,17 @@ export function StateDot({ state, size, className }) {
     ...(size === undefined ? {} : { 'data-cc-size': String(size) }),
   })
 }
+
+/** Render the switch's button contract: role, state and accessible name. */
+export function Switch({ checked, onChange, label, disabled, title, className }) {
+  return createElement('button', {
+    type: 'button',
+    role: 'switch',
+    'aria-checked': checked,
+    'aria-label': label,
+    title,
+    disabled: disabled === true,
+    className,
+    onClick: () => onChange(!checked),
+  })
+}
diff --git a/tests/toggle-field-render.test.ts b/tests/toggle-field-render.test.ts
new file mode 100644
index 0000000..7923e80
--- /dev/null
+++ b/tests/toggle-field-render.test.ts
@@ -0,0 +1,80 @@
+/**
+ * ToggleField 渲染测试（node:test + react-test-renderer），钉住 issue #108 的改法：
+ * 布尔设置行用宿主的 `Switch` 原语，而不是 `appearance:none` 的 checkbox 再画伪元素。
+ *
+ * 锁定三件事：控件是 `role="switch"` 的按钮且页面里不再有 checkbox；勾选态取自暂存
+ * 文本（空串回落到 `defaultChecked`）；点击暂存 `'true'`／`'false'` 字符串。
+ * 运行环境同 `accounts-card-render.test.ts`：先注册 `_css-module-loader.mjs`（primitives
+ * 换成 `_primitives-stub.mjs`），再动态 import 组件。
+ */
+
+import { register } from 'node:module'
+
+register(new URL('./_css-module-loader.mjs', import.meta.url).href)
+
+import { test } from 'node:test'
+import assert from 'node:assert/strict'
+import { createElement } from 'react'
+import { act, create, type ReactTestRenderer } from 'react-test-renderer'
+import type { Translate } from '@deepseek-ai/dsh-client-ui-slots'
+
+import type { SettingsCommandCodeKey } from '../src/client/locales.ts'
+import type { StagedField } from '../src/client/settings.ts'
+
+const { ToggleField } = await import('../src/client/section.tsx')
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+const t = ((key: string) => key) as unknown as Translate<SettingsCommandCodeKey>
+
+function staged(text: string): StagedField {
+  return { text, clear: false, overridden: text !== '', invalid: false, invalidReason: undefined }
+}
+
+function renderField(text: string, defaultChecked: boolean, edits: string[], disabled = false): ReactTestRenderer {
+  let renderer: ReactTestRenderer | undefined
+  act(() => {
+    renderer = create(createElement(ToggleField, {
+      id: 'cc-zdr',
+      label: '零数据保留',
+      hint: '说明',
+      state: staged(text),
+      disabled,
+      defaultChecked,
+      onEdit: (next: string) => { edits.push(next) },
+      onReset: () => {},
+      t,
+    }))
+  })
+  assert.ok(renderer)
+  return renderer
+}
+
+test('ToggleField renders the platform switch, not a checkbox', () => {
+  const renderer = renderField('', false, [])
+  const switches = renderer.root.findAll((node) => node.type === 'button' && node.props.role === 'switch')
+  assert.equal(switches.length, 1)
+  assert.equal(switches[0]?.props['aria-label'], '零数据保留', 'the row label is the switch\'s accessible name')
+  assert.equal(switches[0]?.props.className, 'cc-switch')
+  assert.equal(renderer.root.findAll((node) => node.type === 'input').length, 0)
+})
+
+test('ToggleField: an unset draft shows the default, a staged one shows its own value', () => {
+  const read = (text: string, fallback: boolean): unknown =>
+    renderField(text, fallback, []).root.find((node) => node.props.role === 'switch').props['aria-checked']
+  assert.equal(read('', true), true)
+  assert.equal(read('', false), false)
+  assert.equal(read('false', true), false)
+  assert.equal(read('true', false), true)
+})
+
+test('ToggleField stages the flipped boolean as text, and a locked switch stays disabled', () => {
+  const edits: string[] = []
+  const on = renderField('', true, edits)
+  act(() => { on.root.find((node) => node.props.role === 'switch').props.onClick() })
+  const off = renderField('false', true, edits)
+  act(() => { off.root.find((node) => node.props.role === 'switch').props.onClick() })
+  assert.deepEqual(edits, ['false', 'true'])
+  const locked = renderField('', true, [], true)
+  assert.equal(locked.root.find((node) => node.props.role === 'switch').props.disabled, true)
+})

From 997181a188942f508426be2dcb00f763c73aff31 Mon Sep 17 00:00:00 2001
From: Mars-Sea <1195751600@qq.com>
Date: Fri, 30 Oct 2026 15:56:32 +0800
Subject: [PATCH 2/2] =?UTF-8?q?build:=20=E5=90=8C=E6=AD=A5=E5=BC=80?=
 =?UTF-8?q?=E5=85=B3=E6=94=B9=E5=8A=A8=E7=9A=84=20lib/client.js=20?=
 =?UTF-8?q?=E4=BA=A7=E7=89=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CI 的 build 检查要求 lib/ 与源码构建结果一致。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 lib/client.js | 58 +++++++++++++++++++++++++++------------------------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/lib/client.js b/lib/client.js
index f97e285..714e653 100644
--- a/lib/client.js
+++ b/lib/client.js
@@ -4810,12 +4810,19 @@ window.__ModuleLoader__.load({
 		* One boolean field row rendered as a switch. The staged text is `'true'` /
 		* `'false'` / `''` (unset → `defaultChecked`); toggling stages the string the
 		* boolean field spec parses back into a real boolean on save.
+		*
+		* The control is the harness's own `Switch` primitive (issue #108), not a
+		* restyled checkbox: a `<button role="switch" aria-checked>` whose drawing keys
+		* off `aria-checked`, so what it shows cannot drift from what assistive tech
+		* reads, and it matches the host's other settings switches. It takes no `id`,
+		* so the row title is plain text and the switch carries the label as its
+		* accessible name instead of through `<label htmlFor>`.
 		*/
 		function ToggleField({ id, label, hint, state, disabled, defaultChecked, onEdit, onReset, t }) {
 			const checked = state.text === "" ? defaultChecked : state.text === "true";
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SettingRow, {
 				title: label,
-				titleFor: id,
+				titleId: id,
 				tag: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverrideTag, {
 					label,
 					state,
@@ -4824,15 +4831,13 @@ window.__ModuleLoader__.load({
 					onReset
 				}),
 				description: hint,
-				control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-					id,
-					className: "cc-toggle",
-					type: "checkbox",
-					role: "switch",
+				control: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Switch, {
+					className: "cc-switch",
 					checked,
+					label,
 					disabled,
-					onChange: (event) => onEdit(event.target.checked ? "true" : "false")
-				}) })
+					onChange: (next) => onEdit(next ? "true" : "false")
+				})
 			});
 		}
 		/** One stat tile in the account card's summary grid. */
@@ -10605,23 +10610,21 @@ window.__ModuleLoader__.load({
 .cc-check:checked{background:var(--dsw-alias-brand-primary);border-color:var(--dsw-alias-brand-primary)}
 .cc-check:checked::after{content:'';position:absolute;top:3px;left:5px;width:3px;height:7px;border:solid var(--dsw-alias-label-primary-foreground,#fff);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
 .cc-checkName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-/* Modelled on the platform's own Switch primitive (ui-primitives
- * Switch.module.css): a 40x24 capsule padding its track by 2px and sliding a
- * 20px thumb across the 36px content box. Three things are load-bearing.
- * (1) corner-shape:round on BOTH track and thumb — the theme sets a global
- * superellipse corner shape, which squares a capsule's ends off around a round
- * thumb. (2) No literal colours: brand-primary INVERTS between the modes, so a
- * hardcoded white thumb vanishes on the checked track in dark mode; the brand
- * foreground is what the platform paints on that fill. (3) border-l3 as the
- * off track — border-l2 leaves it indistinguishable from the page. The track
- * and thumb share one duration so the switch reads as one object. */
-.cc-toggle{box-sizing:border-box;appearance:none;flex-shrink:0;width:40px;height:24px;margin:0;padding:2px;border:0;border-radius:12px;corner-shape:round;background:var(--dsw-alias-border-l3);cursor:pointer;position:relative;transition:background-color .12s ease}
-.cc-toggle:checked{background:var(--dsw-alias-brand-primary)}
-.cc-toggle::after{content:'';display:block;width:20px;height:20px;border-radius:50%;corner-shape:round;background:var(--dsw-alias-label-primary-foreground);transition:transform .12s ease}
-.cc-toggle:checked::after{transform:translateX(16px)}
-.cc-toggle:not(:checked)::after{background:var(--dsw-alias-switch-thumb,var(--dsw-alias-label-primary-foreground))}
-.cc-toggle:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}
-.cc-toggle:disabled{cursor:default;opacity:.5}
+/* The settings switches are the platform's Switch primitive (issue #108); its
+ * module CSS owns the colours, capsule shape, focus ring and disabled look.
+ * This layer only adjusts it. (1) Size stays the design canvas's 40x24 with a
+ * 20px thumb, one step up from the primitive's 36x20; the travel is 16px in
+ * both, so the primitive's own translateX still lands the thumb. The
+ * cc-rowControl> qualifier lifts these above the module's single-class rules
+ * whatever order the two sheets load in. (2) Motion joins the page's: the
+ * primitive slides the thumb over 120ms ease and snaps the track colour, so
+ * the thumb and track now share one 160ms strong ease-out and read as one
+ * object, and the switch scales to .95 on press like the other small
+ * pressables. The thumb is targeted as the button's only child because its
+ * module class name is hashed. */
+.cc-rowControl>.cc-switch{width:40px;height:24px;transition:background-color .16s var(--cc-ease-out),transform .16s var(--cc-ease-out)}
+.cc-rowControl>.cc-switch>span{width:20px;height:20px;transition:transform .16s var(--cc-ease-out)}
+.cc-switch:active:not(:disabled){transform:scale(.95)}
 .cc-accountMode{align-items:center;gap:8px;display:flex;margin:12px 16px 0;color:var(--dsw-alias-label-secondary);font-size:12px;line-height:18px}
 .cc-accountList{flex-direction:column;gap:8px;display:flex}
 .cc-accountList+.cc-panel{margin:8px 16px 16px}
@@ -10818,9 +10821,10 @@ window.__ModuleLoader__.load({
  * changes, which carry meaning without motion. Card entrance keeps its fade
  * (the transform is neutralised), and the fold is already instant. */
 @media (prefers-reduced-motion:reduce){
-.cc-foldChevron,.cc-toggle::after,.cc-usageBarFill,.cc-miniMeterFill{transition:none}
+.cc-foldChevron,.cc-rowControl>.cc-switch>span,.cc-usageBarFill,.cc-miniMeterFill{transition:none}
 .cc-btn,.cc-iconButton,.cc-resetInline,.cc-segItem{transition:background-color .15s ease,color .15s ease}
-.cc-btn:active:not(:disabled),.cc-iconButton:active:not(:disabled),.cc-resetInline:active:not(:disabled),.cc-segItem:active:not(:disabled):not(.cc-segOn){transform:none}
+.cc-rowControl>.cc-switch{transition:background-color .15s ease}
+.cc-btn:active:not(:disabled),.cc-iconButton:active:not(:disabled),.cc-resetInline:active:not(:disabled),.cc-segItem:active:not(:disabled):not(.cc-segOn),.cc-switch:active:not(:disabled){transform:none}
 .cc-notice{transition:opacity .2s ease}
 .cc-group{transition:opacity .2s ease;transform:none!important}
 .cc-saveBar{transition:opacity .16s ease,visibility 0s linear .16s}