@q1travel/design-system 0.27.0 → 0.27.1

package/README.md

@@ -98,7 +98,7 @@ npm run dev
 
 **技术栈**：React 19 · TypeScript · Vite 7（文档站 / 库双构建管线）· lucide-react · npm
 
-**Token 刻度原则**：目标是刻度纯粹、正交，而不是冻结。字号、行高、控件高度、圆角等刻度以 Geist 原生档位为基准，Geist 有而本仓缺失的档位可以补齐。业务页面参考其他产品时，只借鉴页面布局、信息架构与间距节奏，并映射到现有档位；仅为贴合某个产品像素而插入孤立私有尺寸的请求，设计系统直接拒绝，无需上报。确有通用诉求、且契合现有比例与刻度演进的新档位，仍走正常的规范评审。完整规则见 `contracts/token-naming.md` 的 Scale Governance。
+**Token 刻度原则**：目标是刻度纯粹、正交，而不是冻结。字号、行高、控件高度、圆角等刻度以既有原生档位序列为基准，序列中定义而本仓缺失的档位可以补齐。业务页面参考其他产品时，只借鉴页面布局、信息架构与间距节奏，并映射到现有档位；仅为贴合某个产品像素而插入孤立私有尺寸的请求，设计系统直接拒绝，无需上报。确有通用诉求、且契合现有比例与刻度演进的新档位，仍走正常的规范评审。完整规则见 `contracts/token-naming.md` 的 Scale Governance。
 
 ### Sources
 

package/bin/q1-design.mjs

@@ -1060,8 +1060,19 @@ function printUsage() {
 
 // 直跑守卫（与 scripts/ci-path-filter.mjs 同款）：被 import 时只暴露纯函数，不执行 CLI，
 // 这样 Q1-DS-501 的匹配逻辑可以被单测直接覆盖，而不必靠拉起子进程去反推。
+// 经 npm/pnpm 的 bin 软链启动时 argv[1] 是软链路径，而 import.meta.url 是解析后的真实路径，
+// 两侧都按 realpath 归一后再比较；pathToFileURL 负责 Windows 盘符与分隔符的 URL 形式。
+function resolveEntryUrl(entryPath) {
+  try {
+    return pathToFileURL(realpathSync(entryPath)).href;
+  } catch {
+    return pathToFileURL(entryPath).href;
+  }
+}
+
 const isDirectRun =
-  process.argv[1] && import.meta.url === pathToFileURL(process.argv[1]).href;
+  Boolean(process.argv[1]) &&
+  resolveEntryUrl(fileURLToPath(import.meta.url)) === resolveEntryUrl(process.argv[1]);
 
 if (isDirectRun) {
   const subcommand = process.argv[2];

package/contracts/design.dark.md

@@ -139,7 +139,7 @@ semantic-colors:
   text-on-media: "#ffffff"
   border: "{colors.gray-400}"
   border-control: "{colors.gray-600}"
-  border-strong: "{colors.gray-400}"
+  border-strong: "{colors.gray-500}"
   border-active: "{colors.primary-900}"
   border-subtle: "#2a2a2a"
   text-primary: "{colors.text-primary}"
@@ -176,15 +176,23 @@ semantic-colors:
   auth-border-strong: "#343943"
   auth-surface-card: "#17191d"
   auth-surface-subtle: "#101216"
+  auth-surface-input: "#101216"
+  auth-surface-hover: "#202329"
   auth-surface-disabled: "#202329"
   auth-surface-media: "#04050a"
+  auth-action-hover: "#4434d4"
+  auth-action-press: "#2e2b8c"
   auth-action-disabled-bg: "#3b404a"
   auth-action-disabled-border: "#3b404a"
   auth-action-disabled-text: "#a6acb8"
   auth-focus-ring: "rgba(126, 108, 255, 0.52)"
   auth-danger-border: "#d92d20"
   auth-danger-surface: "#241719"
+  auth-error-text: "#fb7185"
   auth-field-error-text: "#d32f2f"
+  auth-notice-border: "#3d3794"
+  auth-notice-surface: "#1d1b3a"
+  auth-notice-text: "#cbc4ff"
   auth-media-overlay: "rgba(4, 5, 10, 0.46)"
   auth-media-overlay-hover: "rgba(4, 5, 10, 0.66)"
   auth-on-media-border: "rgba(255, 255, 255, 0.22)"

package/contracts/design.md

@@ -138,7 +138,7 @@ semantic-colors:
   surface-media: "#0a0a0a"
   text-on-media: "#ffffff"
   border: "{colors.gray-alpha-200}"
-  border-control: "{semantic-colors.border}"
+  border-control: "{colors.gray-700}"
   border-strong: "{colors.gray-500}"
   border-active: "{colors.primary-700}"
   border-subtle: "rgba(203, 213, 225, 0.82)"
@@ -176,15 +176,23 @@ semantic-colors:
   auth-border-strong: "#d6dde6"
   auth-surface-card: "#ffffff"
   auth-surface-subtle: "#f8fafc"
+  auth-surface-input: "#ffffff"
+  auth-surface-hover: "#f6f9fc"
   auth-surface-disabled: "#f6f9fc"
   auth-surface-media: "#04050a"
+  auth-action-hover: "#4434d4"
+  auth-action-press: "#2e2b8c"
   auth-action-disabled-bg: "#c7c9cc"
   auth-action-disabled-border: "#c7c9cc"
   auth-action-disabled-text: "#ffffff"
   auth-focus-ring: "rgba(83, 58, 253, 0.42)"
   auth-danger-border: "#d92d20"
   auth-danger-surface: "#fff8f7"
+  auth-error-text: "#be123c"
   auth-field-error-text: "#d32f2f"
+  auth-notice-border: "#b9b9f9"
+  auth-notice-surface: "#efebff"
+  auth-notice-text: "#2e2b8c"
   auth-media-overlay: "rgba(4, 5, 10, 0.46)"
   auth-media-overlay-hover: "rgba(4, 5, 10, 0.66)"
   auth-on-media-border: "rgba(255, 255, 255, 0.22)"

package/contracts/implementation-map.md

@@ -86,7 +86,7 @@ background while keeping its border static. Public props and token values are un
 
 ## Tabs selection ownership
 
-Owner approved 2026-10-06: `Tabs` accepts optional `value?: string`,
+Accepted 2026-10-06: `Tabs` accepts optional `value?: string`,
 `defaultValue?: string`, and `onValueChange?: (id: string) => void`. Existing
 consumers need no migration: without these props, selection starts at the first
 enabled item and preserves automatic activation, roving tabindex, and availability
@@ -98,14 +98,14 @@ changes only when the parent updates `value`. Keyboard navigation follows the
 focused enabled tab while the parent update is pending, and a later value update
 does not pull focus from the activated button. Consumers own URL synchronization.
 
-## Record activity (owner approved 2026-10-06)
+## Record activity (accepted 2026-10-06)
 
 Timeline / TimelineItem (ol/li, 8px token dot or Avatar), Marker (quiet actor/time, date separator), Message (default/pending/failed, caller actions) / Mention (inline action-text on selected surface), Composer (Tier A textarea combobox/listbox, IME guard, Enter send / Shift+Enter newline), Attachment (Progress, retry/remove) are public package components. TimelineCollapsedGroup uses a native disclosure button with aria-expanded and Enter/Space; callers group runs of consecutive system events (docs example uses three or more). Marker unread uses centered action text; caller places and scrolls to the boundary. Message acknowledgements and its caller-owned actions slot display receipt state. Composer also accepts `onMentionQuery(query, {signal})` with 200ms debounce, abort/stale-result rejection, loading/empty/error states and keyboard retry; async lookup takes precedence over static members. Optional `placeholder` and `hint` preserve the input label; member instructions appear only with mention support. Han text may directly precede @, while Unicode word/email interiors do not trigger. Selection inserts text and sets the caret synchronously. Composer commands share the mention combobox/listbox keyboard model and IME guard; known slash commands invoke onCommand instead of onSubmit. Attachment paste/drop passes File[] to onAttach; legacy clicks remain argument-free. Callers own the file picker and object URLs and revoke previews on removal or unmount. Existing tokens only; data, permissions, network and notifications remain caller-owned. Composer accepts optional `triggers` ({char,label,options?,onQuery?,emptyText?,errorText?,toToken?}); single-symbol triggers share debounce, abort/stale rejection, statuses, retry, combobox/listbox keyboard and synchronous caret insertion. Explicit @ overrides legacy mentions/onMentionQuery; otherwise they remain an implicit @ trigger. Slash is reserved for unchanged commands and rejected as a trigger with a development warning. Enabled triggers alone appear in the default hint. Han text may directly precede any trigger; word/email interiors do not trigger. Selection inserts toToken(item), defaulting to char + label, and surviving selections produce {char,id,label} references alongside existing text/mentionIds; references is optional in the type for legacy constructed submissions and always present on component submissions. Editing a token invalidates its reference.
 Timeline / TimelineItem (ol/li, 8px token dot or Avatar), Marker (quiet actor/time, date separator), Message (default/pending/failed, caller actions) / Mention (inline action-text on selected surface), Composer (Tier A textarea combobox/listbox, IME guard, Enter send / Shift+Enter newline), Attachment (Progress, retry/remove) are public package components. `/patterns/record-activity` composes order facts, Switch, chronological activity and a pinned Composer. Existing tokens only; data, permissions, network and notifications remain caller-owned.
 
 ## ToggleGroup selection ownership
 
-Owner approved 2026-10-07: public `ToggleGroup` uses the shadcn/Radix name (Geist has no corresponding component). Its `items` API exposes `value`, `label`, optional `icon`, `disabled`, and `ariaLabel`; icon-only items require an icon and `ariaLabel`. `type="single"` accepts string `value` / `defaultValue` and `onValueChange`; `allowEmpty` defaults to false. `type="multiple"` accepts string arrays. Controlled values remain caller-owned; uncontrolled single selection falls back to the first enabled item when its value is absent or unknown and empty selection is disallowed. Disabling an existing selected item retains its pressed state and moves only the tabstop. No existing Switch consumer is migrated.
+Accepted 2026-10-07: public `ToggleGroup` uses the shadcn/Radix name (no corresponding industry-common component). Its `items` API exposes `value`, `label`, optional `icon`, `disabled`, and `ariaLabel`; icon-only items require an icon and `ariaLabel`. `type="single"` accepts string `value` / `defaultValue` and `onValueChange`; `allowEmpty` defaults to false. `type="multiple"` accepts string arrays. Controlled values remain caller-owned; uncontrolled single selection falls back to the first enabled item when its value is absent or unknown and empty selection is disallowed. Disabling an existing selected item retains its pressed state and moves only the tabstop. No existing Switch consumer is migrated.
 
 Native buttons expose `aria-pressed` within `role="group"`. Roving tabindex and Arrow / Home / End move focus without selecting; Enter / Space activate through native clicks. Disabled items are skipped. Button-aligned sm32 / md40 / lg48 sizes use existing tokens, quiet selected background and primary text without a selected ring, shared focus shadow, and the shared coarse-pointer 44px TouchTarget with reserved neighbor space. The Tier A keyboard contract lives on `/components/toggle-group`; Switch retains radio semantics and Tabs retains panel semantics.
 ## Checkbox task completion circle
@@ -113,7 +113,7 @@ Native buttons expose `aria-pressed` within `role="group"`. Roving tabindex and
 - Documentation: `src/pages/CheckboxPage.tsx`, `CheckboxCircleDemo.tsx`, `src/styles/checkbox-circle-specimen.css`; circle completion is restricted to tasks/checklists and row completion treatment stays consumer-owned.
 - Verification: `scripts/check-checkbox-circle-contract.test.mjs`, `scripts/fixtures/checkbox-circle-api-consumer.tsx`, `scripts/lib/checkbox-circle-contrast.mjs`, `scripts/lib/check-checkbox-circle-browser.mjs`. Package gate covers API/default/native markup/readonly semantics/token existence and both-theme contrast; browser gate covers native toggles, focus without preview, readonly, tone fill, reduced motion and coarse hit targets.
 ## Chat messages
-Bubble is separate from Message: chat has optional identity and direction, while Message retains its required author, comment attachments and receipt API unchanged. MessageScroller is separate from Scroller: keyed prepend anchors and message following need ownership of the viewport; the general Scroller API remains unchanged. The shadcn chat reference supplies conversation intent only; quiet Geist surfaces map to existing q1travel panel/selected backgrounds, borders, spacing, radii and Button. No reference CSS, motion background or private tokens are shipped.
+Bubble is separate from Message: chat has optional identity and direction, while Message retains its required author, comment attachments and receipt API unchanged. MessageScroller is separate from Scroller: keyed prepend anchors and message following need ownership of the viewport; the general Scroller API remains unchanged. The shadcn chat reference supplies conversation intent only; quiet chat surfaces map to existing q1travel panel/selected backgrounds, borders, spacing, radii and Button. No reference CSS, motion background or private tokens are shipped.
 The consumer mapping was checked against downstream chat-style implementations (read-only, no downstream edits).
 | Web capability | Package support / caller boundary |
 | --- | --- |
@@ -130,8 +130,8 @@ Keyboard: native viewport Arrow/PageUp/PageDown/Home/End; Tab reaches the viewpo
 
 ## Hidden field labels
 
-Owner approved 2026-10-08: additive `labelHidden?: boolean` (default false) keeps a real associated label through `q1-sr-only` while removing its visual row and gap. Input, Textarea, Select, InputOTP and Checkbox/Radio (including circular Checkbox) expose the shell option; bare mode rejects it. SearchInput and Combobox compositions use `FormField labelHidden`, preserving their existing APIs. Calendar/RangeField does not consume FieldShellProps and retains its existing date-trigger behavior. Errors and descriptions remain visible and connected through `aria-describedby`. Input's existing string `hideLabel` remains the password hide-action copy.
+Accepted 2026-10-08: additive `labelHidden?: boolean` (default false) keeps a real associated label through `q1-sr-only` while removing its visual row and gap. Input, Textarea, Select, InputOTP and Checkbox/Radio (including circular Checkbox) expose the shell option; bare mode rejects it. SearchInput and Combobox compositions use `FormField labelHidden`, preserving their existing APIs. Calendar/RangeField does not consume FieldShellProps and retains its existing date-trigger behavior. Errors and descriptions remain visible and connected through `aria-describedby`. Input's existing string `hideLabel` remains the password hide-action copy.
 
 `FormField` establishes a relative containing block for hidden labels and empty status regions. Package consumer fixtures enforce label ownership, SSR contracts cover names/messages, and `scripts/lib/check-label-hidden-browser.mjs` checks native labels, visible errors, inline Button alignment and a deterministic 390px scrollable max-content row without page overflow.
 ## Control density scale
-Owner approved 2026-10-08: explicitly sized single-line Button, ButtonLink, Input, SearchInput, Select, RangeField trigger, Menu text trigger and FilterChip share sm32 / md40 / lg48 on fine pointers. SearchInput defaults to md and retains native numeric size compatibility; FilterChip defaults to sm32. Menu text triggers default to md40 after the rendered fine-pointer audit confirmed the prior omitted-size trigger measured 38–39px; icon triggers retain their prior behavior. Calendar size remains grid-only; fieldSize controls its trigger. Switch outer sm / md / lg heights align to 32 / 40 / 48px, defaulting to md; coarse-pointer 44px rules remain unchanged. FormField and Select omit empty or absent visible labels; callers supply aria-label, aria-labelledby or a native external label. Select reuses the development-only bare-field accessible-name warning.
+Accepted 2026-10-08: explicitly sized single-line Button, ButtonLink, Input, SearchInput, Select, RangeField trigger, Menu text trigger and FilterChip share sm32 / md40 / lg48 on fine pointers. SearchInput defaults to md and retains native numeric size compatibility; FilterChip defaults to sm32. Menu text triggers default to md40 after the rendered fine-pointer audit confirmed the prior omitted-size trigger measured 38–39px; icon triggers retain their prior behavior. Calendar size remains grid-only; fieldSize controls its trigger. Switch outer sm / md / lg heights align to 32 / 40 / 48px, defaulting to md; coarse-pointer 44px rules remain unchanged. FormField and Select omit empty or absent visible labels; callers supply aria-label, aria-labelledby or a native external label. Select reuses the development-only bare-field accessible-name warning.

package/contracts/interface-guidelines.md

@@ -26,7 +26,7 @@ Adding a clause therefore means answering two questions before the wording: who
 - [both] MUST keep mobile control targets at least 44px where touch is expected.
 - [both] MUST use `--q1-touch-target-min` (44px) for the shared centered invisible child-span hit region of Button (all sizes, including compact consumer overrides and icon-only), CopyButton, Menu/DotsMenu triggers, Description info/hint buttons, and the independent FilterChip picker/clear buttons only under `(pointer: coarse), (any-pointer: coarse)`. Preserve every existing coarse-pointer visual-size rule. Only axes still below the minimum receive extra hit area; existing 44px targets do not expand outside their visual frame. The region covers the complete border box: canonical Button/CopyButton/Menu/DotsMenu borders are 1px, while Description borders are none. Consumers overriding a control border width must also set its private `--touch-target-border-width` to the actual per-side width (including zero for `border: none`); asymmetric borders need their own hit-region sizing. FilterChip keeps its default sm32 visual height and existing gaps/margins; its picker and clear hit regions must not overlap. Menu item rows use a real `min-height: var(--q1-touch-target-min)` under the same coarse-pointer query so neighboring rows remain independent. Focus rings stay on the visual control; child hit-region events activate that native control without replacing its pseudo-elements or overflow rules.
 - [both] MUST leave enough space for expanded targets: dense neighbors must not overlap each other's visual frames. Consumers must reserve the expansion on each side and avoid clipping ancestors; if this is impossible, regroup controls or use larger visual controls. The shared region cannot infer neighbor gaps or escape control/ancestor clipping; clipped compact controls must use a visual size of at least 44px.
-- [both] SHOULD deliberately depart from Geist's measured 24–32px controls without coarse-pointer enlargement: Apple HIG's 44pt guidance and WCAG 2.5.5 motivate q1travel's 44×44 CSS-pixel mobile usability target; pt and CSS pixels are different units.
+- [both] SHOULD NOT ship dense measured 24–32px controls to coarse pointers without enlargement: Apple HIG's 44pt guidance and WCAG 2.5.5 motivate q1travel's 44×44 CSS-pixel mobile usability target; pt and CSS pixels are different units.
 - [both] NEVER disable browser zoom.
 - [both] MUST avoid dead zones: if a region looks clickable, the clickable element must cover it.
 - [both] MUST show a loading indicator on in-flight buttons while keeping the original label.
@@ -213,7 +213,7 @@ These copy clauses keep reader address and empty states consistent with a formal
 
 ### Component Naming
 
-- [repo] SHOULD use the Geist component name when Geist has the component; otherwise use the industry name, preferring shadcn/ui, then Radix. Invent a name only when neither has one. Name what the component is, not how it is built.
+- [repo] SHOULD use the industry-common component name when one exists, preferring shadcn/ui, then Radix. Invent a name only when neither has one. Name what the component is, not how it is built.
 - [repo] MUST switch public names directly to the new export without deprecated aliases or old documentation route redirects; record the removal as a breaking change in CHANGELOG.
 
 ### Component Documentation Pages

package/contracts/overlay-shadow-migration.md

@@ -4,7 +4,7 @@ Status: accepted
 
 Decision date: 2026-08-26
 
-## 2026-10-05 所有者批准的直接替换
+## 2026-10-05 已批准的直接替换
 
 本批跳过过渡流程，直接在 Token 层替换，不保留旧阴影或兼容档。以下取值取代后文的历史取值及方向性面板例外；后文保留为历史证据，不代表当前下游版本。
 

package/contracts/token-naming.md

@@ -110,7 +110,7 @@ Owner-approved exception (2026-10-05): ErrorMessage, field errors, and ErrorCard
 
 Migration: `--q1-color-bg-panel` remains `#ffffff` in light mode and changes from `#0a0a0a` to `#1a1a1a` in dark mode. The dark canvas, raised surface, and overlay now use `#121212`, `#222222`, and `#2b2b2b`. Downstream overrides that manually raised panel or overlay backgrounds should be reviewed. The 2026-10-05 owner-approved focus change replaces the brand ring and inset input stroke with the neutral 1px / 4px recipe and preserves resting input borders. Consumers with custom focus visuals should update their screenshots and forced-colors fallback. The unused `--q1-shadow-card` name is removed before release.
 
-Owner-approved contrast roles (2026-10-07): `--q1-color-border-control` is the resting form-control boundary (light aliases `border`, dark uses `gray-600`); controls with a strong light border retain that value and opt into this role only in dark mode. Decorative borders retain `border` / `border-strong`. `--q1-color-accent-graphic` is for brand-colored non-text graphics (light `primary-700`, dark `primary-900`), independent of button action colors. Slider dark unfilled tracks use `gray-500`.
+Owner-approved contrast roles (2026-10-07): `--q1-color-border-control` is the resting form-control boundary (light uses `gray-700`, about 3.23:1 on white, since the 2026-10-13 owner decision; dark uses `gray-600`); controls with a strong light border retain that value and opt into this role only in dark mode. Decorative borders retain `border` / `border-strong`. Dark `--q1-color-border-strong` moves from `gray-400` to `gray-500` (2026-10-13) so selected and emphasized outlines stay distinguishable from the default `border`. `--q1-color-accent-graphic` is for brand-colored non-text graphics (light `primary-700`, dark `primary-900`), independent of button action colors. Slider dark unfilled tracks use `gray-500`.
 
 `--q1-touch-target-min` (`44px`) is the theme-independent semantic minimum for coarse-pointer hit regions, stored as `sizing.touch-target-min` in both theme contracts. It changes the invisible target, not the visual size.
 
@@ -134,16 +134,24 @@ Shipped domain palette (owner-approved 2026-10-13): `auth`, the cool blue-gray p
 | `--q1-color-auth-text-muted` | `#64748d` | `#9ca3af` | Supporting notes |
 | `--q1-color-auth-border-strong` | `#d6dde6` | `#343943` | Card and input borders |
 | `--q1-color-auth-surface-card` | `#ffffff` | `#17191d` | Card |
-| `--q1-color-auth-surface-subtle` | `#f8fafc` | `#101216` | Preview area and input background |
+| `--q1-color-auth-surface-subtle` | `#f8fafc` | `#101216` | Preview area |
+| `--q1-color-auth-surface-input` | `#ffffff` | `#101216` | Input background |
+| `--q1-color-auth-surface-hover` | `#f6f9fc` | `#202329` | Hover background of secondary controls and list rows |
 | `--q1-color-auth-surface-disabled` | `#f6f9fc` | `#202329` | Disabled input |
 | `--q1-color-auth-surface-media` | `#04050a` | `#04050a` | Page fallback before the media backdrop loads |
+| `--q1-color-auth-action-hover` | `#4434d4` | `#4434d4` | Submit button, hover |
+| `--q1-color-auth-action-press` | `#2e2b8c` | `#2e2b8c` | Submit button, pressed |
 | `--q1-color-auth-action-disabled-bg` | `#c7c9cc` | `#3b404a` | Disabled submit button background |
 | `--q1-color-auth-action-disabled-border` | `#c7c9cc` | `#3b404a` | Disabled submit button border |
 | `--q1-color-auth-action-disabled-text` | `#ffffff` | `#a6acb8` | Disabled submit button label |
 | `--q1-color-auth-focus-ring` | `rgba(83, 58, 253, 0.42)` | `rgba(126, 108, 255, 0.52)` | Single 3px focus ring |
 | `--q1-color-auth-danger-border` | `#d92d20` | `#d92d20` | Failed validation border |
 | `--q1-color-auth-danger-surface` | `#fff8f7` | `#241719` | Failed validation background |
+| `--q1-color-auth-error-text` | `#be123c` | `#fb7185` | Form-level error message above the fields |
 | `--q1-color-auth-field-error-text` | `#d32f2f` | `#d32f2f` | Field error message |
+| `--q1-color-auth-notice-border` | `#b9b9f9` | `#3d3794` | Session notice border |
+| `--q1-color-auth-notice-surface` | `#efebff` | `#1d1b3a` | Session notice background |
+| `--q1-color-auth-notice-text` | `#2e2b8c` | `#cbc4ff` | Session notice text |
 | `--q1-color-auth-media-overlay` | `rgba(4, 5, 10, 0.46)` | `rgba(4, 5, 10, 0.46)` | Trigger background over a media backdrop |
 | `--q1-color-auth-media-overlay-hover` | `rgba(4, 5, 10, 0.66)` | `rgba(4, 5, 10, 0.66)` | Same trigger, hover |
 | `--q1-color-auth-on-media-border` | `rgba(255, 255, 255, 0.22)` | `rgba(255, 255, 255, 0.22)` | Trigger border over a media backdrop |
@@ -151,6 +159,10 @@ Shipped domain palette (owner-approved 2026-10-13): `auth`, the cool blue-gray p
 
 The theme contracts register these as `semantic-colors.auth-*`, and `check:token-package` asserts that each contract value resolves to the runtime token in both themes.
 
+The input background, the hover background, and the secondary button background are separate roles. Secondary buttons inside the card use `--q1-color-auth-surface-card`, because they sit on the card surface; `--q1-color-auth-surface-input` is reserved for text entry. `--q1-color-auth-surface-hover` is the interaction hover and is not substituted by `--q1-color-auth-surface-disabled`, even where the values match. `--q1-color-auth-action-hover` and `--q1-color-auth-action-press` keep the same value in both themes, unlike the shared `--q1-color-action-primary-hover` / `-press`. `--q1-color-auth-error-text` is the form-level error and stays distinct from `--q1-color-auth-field-error-text`.
+
+Fixed-light subtree: an account entry surface that must stay light regardless of the page theme sets `data-q1-theme="light"` on its subtree root. Inside that subtree every `--q1-color-auth-*` token resolves to its light value, while the neutral chain and all other tokens keep following the root theme. The selector covers the auth palette only and is not a general theme switch: inside the subtree, every theme-dependent color comes from the auth palette, and shared tokens are used only where their value is the same in both themes, such as `--q1-color-action-primary`. Apply it to a descendant element, not to the root element that carries `data-theme`. The build and `check:token-package` assert that `[data-q1-theme='light']` redeclares every auth token, and nothing else, with exactly the light values.
+
 ### Component Tokens
 
 Component tokens are allowed only when a shared component needs a stable public customization surface. Do not create component tokens for one page or one specimen.
@@ -204,7 +216,7 @@ gets an input with no border and no background.
 
 ## Scale Governance
 
-- The goal is a pure, orthogonal scale, not a frozen one. The size, typography, radius, and control-height scales are based on Geist's native steps; a step Geist defines and q1travel lacks may be filled (for example `label-12`, 12px / 16px).
+- The goal is a pure, orthogonal scale, not a frozen one. The size, typography, radius, and control-height scales are based on the established native step sequence (see the step tables in this contract); a missing step the sequence defines may be filled (for example `label-12`, 12px / 16px).
 - Product surfaces may take page layout, information architecture, and spacing rhythm from other products, but MUST map them onto existing steps. A request to add an isolated, non-standard step only so one surface matches another product's pixels is declined by the design system without escalation.
 - A genuine, reusable need that fits the existing ratios and evolves the scale orthogonally still goes through normal design review. A new step must serve many surfaces, not close a gap of a few pixels on one page.
 

package/dist-pkg/design-system.js

@@ -7051,7 +7051,7 @@ function gs({
     }
   );
 }
-const Le = 8, Qn = 4, Zn = typeof document > "u" ? ne : pe;
+const Le = 8, Qn = 8, Zn = typeof document > "u" ? ne : pe;
 let We = null, Tt = 0, fn = !1;
 function _s() {
   if (typeof document > "u") return null;
@@ -10559,7 +10559,7 @@ function xu({ label: e, entries: t, withChevron: r, align: o = "start", triggerC
   ] });
 }
 function Pu({ options: e, defaultSelected: t = [], placeholder: r, onChange: o }) {
-  const i = ue(), a = `${i}-listbox`, s = `${i}-summary`, [c, u] = j(!1), [f, h] = j(t), [p, m] = j(-1), [_, g] = j(), l = q(null), v = q(null), b = q(null), { portalPopup: w } = He(c, v, b, () => u(!1)), I = q(null), N = q([]), D = q(void 0), M = q(!1);
+  const i = ue(), a = `${i}-listbox`, s = `${i}-summary`, [c, u] = j(!1), [f, h] = j(t), [p, m] = j(-1), [_, g] = j(), l = q(null), v = q(null), b = q(null), { portalPopup: w } = He(c, v, b, () => u(!1), { gapToken: "--q1-space-2" }), I = q(null), N = q([]), D = q(void 0), M = q(!1);
   function C(A) {
     h(A), o?.(A);
   }
@@ -12057,7 +12057,7 @@ function Fu({ trigger: e, children: t, openDelay: r = 0, closeDelay: o = 90, sid
   }, []);
   const { portalPopup: C, placement: S, onOverlayKeyDown: L } = He(c, h, p, (k) => {
     N(), k === "escape" && h.current?.focus({ preventScroll: !0 });
-  }, { width: "content", side: i, align: a, present: w, focusOnOpen: !1, restoreFocus: !1, outsidePointer: !0, outsidePointerEvent: "down" }), P = [e.props["aria-describedby"], c ? f : void 0].filter(Boolean).join(" ") || void 0;
+  }, { width: "content", side: i, align: a, gapToken: "--q1-space-2", present: w, focusOnOpen: !1, restoreFocus: !1, outsidePointer: !0, outsidePointerEvent: "down" }), P = [e.props["aria-describedby"], c ? f : void 0].filter(Boolean).join(" ") || void 0;
   return /* @__PURE__ */ y(he, { children: [
     /* @__PURE__ */ n(
       "span",

package/dist-pkg/style.css

@@ -142,7 +142,7 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-alpha-200);
-  --q1-color-border-control: var(--q1-color-border);
+  --q1-color-border-control: var(--q1-color-gray-700);
   --q1-color-border-subtle: rgba(203, 213, 225, 0.82);
   --q1-color-border-strong: var(--q1-color-gray-500);
   --q1-color-border-active: var(--q1-color-primary-700);
@@ -174,7 +174,7 @@
   --q1-color-status-info-text: #0064b8;
   --q1-color-status-info-surface: var(--q1-color-blue-100);
   --q1-color-status-info-border: #abcff0;
-  /* 域色板 · auth：账户入口专用的冷蓝灰色板（所有者 2026-10-13 批准）。只在账户入口域内成组使用，
+  /* 域色板 · auth：账户入口专用的冷蓝灰色板。只在账户入口域内成组使用，
      不与中性链 token 混用；值独立于中性链，明暗各一套。 */
   --q1-color-auth-text-primary: #061b31;
   --q1-color-auth-text-secondary: #273951;
@@ -182,15 +182,23 @@
   --q1-color-auth-border-strong: #d6dde6;
   --q1-color-auth-surface-card: #ffffff;
   --q1-color-auth-surface-subtle: #f8fafc;
+  --q1-color-auth-surface-input: #ffffff;
+  --q1-color-auth-surface-hover: #f6f9fc;
   --q1-color-auth-surface-disabled: #f6f9fc;
   --q1-color-auth-surface-media: #04050a;
+  --q1-color-auth-action-hover: #4434d4;
+  --q1-color-auth-action-press: #2e2b8c;
   --q1-color-auth-action-disabled-bg: #c7c9cc;
   --q1-color-auth-action-disabled-border: #c7c9cc;
   --q1-color-auth-action-disabled-text: #ffffff;
   --q1-color-auth-focus-ring: rgba(83, 58, 253, 0.42);
   --q1-color-auth-danger-border: #d92d20;
   --q1-color-auth-danger-surface: #fff8f7;
+  --q1-color-auth-error-text: #be123c;
   --q1-color-auth-field-error-text: #d32f2f;
+  --q1-color-auth-notice-border: #b9b9f9;
+  --q1-color-auth-notice-surface: #efebff;
+  --q1-color-auth-notice-text: #2e2b8c;
   --q1-color-auth-media-overlay: rgba(4, 5, 10, 0.46);
   --q1-color-auth-media-overlay-hover: rgba(4, 5, 10, 0.66);
   --q1-color-auth-on-media-border: rgba(255, 255, 255, 0.22);
@@ -475,8 +483,8 @@
   --q1-color-border: var(--q1-color-gray-400);
   --q1-color-border-control: var(--q1-color-gray-600);
   --q1-color-border-subtle: #2a2a2a;
-  /* 降档：控件描边不再泛白。 */
-  --q1-color-border-strong: var(--q1-color-gray-400);
+  /* 比 border 高一档（gray-500）：选中描边在暗色下可辨，仍不泛白。 */
+  --q1-color-border-strong: var(--q1-color-gray-500);
   --q1-color-border-active: var(--q1-color-primary-900);
   --q1-color-border-overlay: color-mix(in srgb, #ffffff 14%, transparent);
   --q1-color-text-primary: var(--q1-color-gray-1000);
@@ -504,7 +512,7 @@
   --q1-color-status-info-text: var(--q1-color-blue-900);
   --q1-color-status-info-surface: var(--q1-color-blue-100);
   --q1-color-status-info-border: #194f81;
-  /* 域色板 · auth：账户入口专用的冷蓝灰色板（所有者 2026-10-13 批准）。只在账户入口域内成组使用，
+  /* 域色板 · auth：账户入口专用的冷蓝灰色板。只在账户入口域内成组使用，
      不与中性链 token 混用；值独立于中性链，明暗各一套。 */
   --q1-color-auth-text-primary: #f3f4f6;
   --q1-color-auth-text-secondary: #d1d5db;
@@ -512,15 +520,23 @@
   --q1-color-auth-border-strong: #343943;
   --q1-color-auth-surface-card: #17191d;
   --q1-color-auth-surface-subtle: #101216;
+  --q1-color-auth-surface-input: #101216;
+  --q1-color-auth-surface-hover: #202329;
   --q1-color-auth-surface-disabled: #202329;
   --q1-color-auth-surface-media: #04050a;
+  --q1-color-auth-action-hover: #4434d4;
+  --q1-color-auth-action-press: #2e2b8c;
   --q1-color-auth-action-disabled-bg: #3b404a;
   --q1-color-auth-action-disabled-border: #3b404a;
   --q1-color-auth-action-disabled-text: #a6acb8;
   --q1-color-auth-focus-ring: rgba(126, 108, 255, 0.52);
   --q1-color-auth-danger-border: #d92d20;
   --q1-color-auth-danger-surface: #241719;
+  --q1-color-auth-error-text: #fb7185;
   --q1-color-auth-field-error-text: #d32f2f;
+  --q1-color-auth-notice-border: #3d3794;
+  --q1-color-auth-notice-surface: #1d1b3a;
+  --q1-color-auth-notice-text: #cbc4ff;
   --q1-color-auth-media-overlay: rgba(4, 5, 10, 0.46);
   --q1-color-auth-media-overlay-hover: rgba(4, 5, 10, 0.66);
   --q1-color-auth-on-media-border: rgba(255, 255, 255, 0.22);
@@ -533,6 +549,39 @@
   --q1-color-action-text: var(--q1-color-primary-900);
 }
 
+/* 固定浅色子树：在任意子树根元素上设置 data-q1-theme="light"，
+   子树内的 auth 域色板固定取浅色值，不随根元素主题切换；只覆盖 auth 组，中性链照常跟随主题。
+   取值与 :root 中的 auth 浅色值逐项一致，由构建与 check:token-package 校验。 */
+[data-q1-theme='light'] {
+  --q1-color-auth-text-primary: #061b31;
+  --q1-color-auth-text-secondary: #273951;
+  --q1-color-auth-text-muted: #64748d;
+  --q1-color-auth-border-strong: #d6dde6;
+  --q1-color-auth-surface-card: #ffffff;
+  --q1-color-auth-surface-subtle: #f8fafc;
+  --q1-color-auth-surface-input: #ffffff;
+  --q1-color-auth-surface-hover: #f6f9fc;
+  --q1-color-auth-surface-disabled: #f6f9fc;
+  --q1-color-auth-surface-media: #04050a;
+  --q1-color-auth-action-hover: #4434d4;
+  --q1-color-auth-action-press: #2e2b8c;
+  --q1-color-auth-action-disabled-bg: #c7c9cc;
+  --q1-color-auth-action-disabled-border: #c7c9cc;
+  --q1-color-auth-action-disabled-text: #ffffff;
+  --q1-color-auth-focus-ring: rgba(83, 58, 253, 0.42);
+  --q1-color-auth-danger-border: #d92d20;
+  --q1-color-auth-danger-surface: #fff8f7;
+  --q1-color-auth-error-text: #be123c;
+  --q1-color-auth-field-error-text: #d32f2f;
+  --q1-color-auth-notice-border: #b9b9f9;
+  --q1-color-auth-notice-surface: #efebff;
+  --q1-color-auth-notice-text: #2e2b8c;
+  --q1-color-auth-media-overlay: rgba(4, 5, 10, 0.46);
+  --q1-color-auth-media-overlay-hover: rgba(4, 5, 10, 0.66);
+  --q1-color-auth-on-media-border: rgba(255, 255, 255, 0.22);
+  --q1-color-auth-on-media-border-hover: rgba(255, 255, 255, 0.34);
+}
+
 /* 字体继承兜底（:where 零特异度，消费方自己的 body 样式可无条件覆盖）。 */
 :where(body) {
   font-family: var(--q1-font-sans);
@@ -995,11 +1044,11 @@
 .input-control:hover:not(:focus-within):not(:has(.form-control:disabled)):not(
     :has(.form-control[aria-invalid='true'])
   ):not(.form-field--error .input-control) {
-  border-color: var(--q1-color-border-strong);
+  border-color: var(--q1-color-gray-800);
 }
 
 .input-control:has(.form-control:focus) {
-  border-color: var(--q1-input-border-focus, var(--q1-color-border));
+  border-color: var(--q1-input-border-focus, var(--q1-input-border, var(--q1-color-border-control)));
   box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus-input));
 }
 
@@ -1078,7 +1127,7 @@
   min-height: 0;
 }
 
-/* 外框 overflow 会裁掉按钮向外扩的焦点环。参照 Geist Input 后缀按钮：外框保留裁切并照常画
+/* 外框 overflow 会裁掉按钮向外扩的焦点环。因此外框保留裁切并照常画
    聚焦光晕（焦点仍在控件内），按钮自己的环改为向内收的 outline，整圈落在按钮可见区内，
    从输入框 Tab 到按钮时焦点位置可辨；outline 在强制颜色模式下同样可见。 */
 .input-control:has(.input-control__action .button:focus-visible) {
@@ -1306,7 +1355,7 @@
 }
 
 .textarea-control:hover:not(:focus-within):not(:has(.form-control:disabled)) {
-  border-color: var(--q1-color-border-strong);
+  border-color: var(--q1-color-gray-800);
 }
 
 .textarea-control:has(.form-control:focus) {
@@ -1363,12 +1412,12 @@
 .form-control--input:hover:not(:disabled):not(:focus):not([aria-invalid='true']):not(
     .form-field--error .form-control--input
   ) {
-  border-color: var(--q1-color-border-strong);
+  border-color: var(--q1-color-gray-800);
 }
 
 /* 输入类指针与键盘焦点一致，边框与半透明光晕紧贴。 */
 .form-control:focus {
-  border-color: var(--q1-input-border-focus, var(--q1-color-border));
+  border-color: var(--q1-input-border-focus, var(--q1-input-border, var(--q1-color-border-control)));
   box-shadow: var(--q1-input-focus-ring, var(--q1-shadow-focus-input));
 }
 
@@ -1418,7 +1467,7 @@
 .control-option {
   position: relative;
   display: grid;
-  /* 盒 16px 统一（Checkbox 复核拍板：与 Radio 家族一致 + 16×16）。 */
+  /* 盒 16px 统一（与 Radio 家族一致，16×16）。 */
   grid-template-columns: 16px minmax(0, 1fr);
   align-items: start;
   gap: var(--q1-space-3);
@@ -1546,7 +1595,7 @@
   }
 }
 
-/* Checkbox 选中改前景单色（拍板与 Radio 家族统一）：text-primary 填充 + 面板色反色勾，
+/* Checkbox 选中为前景单色（与 Radio 家族统一）：text-primary 填充 + 面板色反色勾，
  两主题自适应；「选中」是状态非动作，不占用 indigo 动作色。 */
 .control-option input:checked + .control-option__visual {
   border-color: var(--q1-color-text-primary);
@@ -3994,7 +4043,7 @@ a[href]:has(> .book):focus-visible {
 }
 
 /* 线型（line）变体：无外框、无卡片底色与内边距，只保留 tablist 的 1px 基线，贴在页面标题下方；
-   对照 Geist：标签上下 14px、文字 14/20 常规字重，选中项 2px 前景色指示线与基线重合，无位移动画。 */
+   规格：标签上下 14px、文字 14/20 常规字重，选中项 2px 前景色指示线与基线重合，无位移动画。 */
 .tabs-root--line {
   border: 0;
   border-radius: 0;
@@ -4134,7 +4183,7 @@ a[href]:has(> .book):focus-visible {
     min-height: 44px;
   }
 
-  /* 线型保持标签自然宽度（与 Geist 一致），不拉伸等分；高度已超过 44px 触控目标。 */
+  /* 线型保持标签自然宽度，不拉伸等分，指示线长度随文字；高度已超过 44px 触控目标。 */
   .tabs-control--line .tabs-control__tab {
     width: auto;
     min-height: 0;
@@ -4438,23 +4487,20 @@ a[href]:has(> .book):focus-visible {
   font-weight: var(--q1-font-weight-medium);
 }
 
-.calendar__day--start {
+/* 区间起点与终点同一扁平实底，不加细框；端点状态由 gridcell 的 aria-selected 表达。 */
+.calendar__day--start,
+.calendar__day--end {
   background: var(--q1-color-selection-bg);
   border-color: transparent;
   color: var(--q1-color-selection-fg);
   font-weight: var(--q1-font-weight-medium);
 }
 
-.calendar__day--start:hover:not(:disabled) {
+.calendar__day--start:hover:not(:disabled),
+.calendar__day--end:hover:not(:disabled) {
   background: var(--q1-color-selection-bg);
 }
 
-.calendar__day--end {
-  border-color: var(--q1-color-text-primary);
-  color: var(--q1-color-text-primary);
-  font-weight: var(--q1-font-weight-medium);
-}
-
 .calendar__day--outside {
   color: var(--q1-color-text-muted);
   opacity: 0.4;
@@ -6191,6 +6237,10 @@ a.context-card__trigger {
   font-weight: 600;
   line-height: 1.2;
   color: var(--q1-color-text-primary);
+  /* 指标值只占一行：过长时省略，完整值交给 title，卡片高度与比例不随窄屏折行变化。 */
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 .q1-card__metric-label {
@@ -10754,8 +10804,6 @@ a.q1-navigation__item[aria-disabled='true'] {
 }
 .q1-json-view__row--highlight {
   border-radius: var(--q1-radius-1);
-  background: var(--q1-color-bg-panel);
-  box-shadow: inset 2px 0 0 var(--q1-color-action-primary);
   padding-left: var(--q1-space-2);
   margin-left: calc(-1 * var(--q1-space-2));
 }
@@ -11534,7 +11582,7 @@ a.q1-navigation__item[aria-disabled='true'] {
   flex: none;
   display: grid;
   place-items: center;
-  /* 角标 16px 与 Checkbox/Radio 家族统一（选项控件盒 16 拍板）。 */
+  /* 角标 16px 与 Checkbox/Radio 家族统一（选项控件盒统一 16px）。 */
   width: 16px;
   height: 16px;
   border: 1px solid var(--q1-color-border-strong);
@@ -11554,13 +11602,8 @@ a.q1-navigation__item[aria-disabled='true'] {
   opacity: 0;
 }
 
-/* 选中态：前景单色三信号（text-primary 边框 + 中性底染 + 前景角标），与 Checkbox/Radio 家族拍板一致；
- 「选中」是状态非动作，不占 indigo。标题不再变色，选中由边框/底染/角标传达。 */
-.choicebox:has(.choicebox__input:checked) {
-  border-color: var(--q1-color-text-primary);
-  background: color-mix(in srgb, var(--q1-color-text-primary) 5%, var(--q1-color-bg-panel));
-}
-
+/* 选中态：卡片描边与浅底走共享选中配方（selection-recipe.css），角标仍用前景色表达选中；
+ 「选中」是状态非动作，不占 indigo。标题不变色。 */
 .choicebox:has(.choicebox__input:checked) .choicebox__extra {
   display: block;
 }
@@ -11593,7 +11636,7 @@ a.q1-navigation__item[aria-disabled='true'] {
 
 @media (hover: hover) and (pointer: fine) {
   .choicebox:has(.choicebox__input:not(:checked):not(:disabled)):hover {
-    border-color: var(--q1-color-border-strong);
+    border-color: var(--q1-color-gray-800);
   }
 }
 
@@ -14045,6 +14088,13 @@ a.q1-navigation__item[aria-disabled='true'] {
   border-color: var(--q1-color-border-control);
 }
 
+/* 亮色 OTP 格子、时段触发器、Choicebox 未选中卡同样走控件边界角色，不再用 8% 黑分隔线。 */
+.cal-period__trigger,
+.q1-verification-code:not(:has(:disabled, [aria-invalid='true'])) .q1-verification-code__slot,
+.choicebox:not(:has(:checked, :disabled)) {
+  border-color: var(--q1-color-border-control);
+}
+
 /* 控件基础边框统一走 --q1-color-border-control；禁用态保持原来的弱边界 --q1-color-border，
  不随控件边界角色加深（暗色下 border-control 比 border 更亮）。 */
 .input-control:has(.form-control:disabled):not(:has([aria-invalid='true'])):not(.form-field--error .input-control),
@@ -14160,3 +14210,42 @@ a.q1-navigation__item[aria-disabled='true'] {
 :root[data-theme='dark'] .multi-select__check:not(.multi-select__check--on) {
   border-color: var(--q1-color-border-control);
 }
+
+/* 选中态配方：选中 = 1px --q1-color-border-strong 描边 + 浅底（亮色 --q1-color-bg-subtle，
+ 暗色 --q1-color-bg-raised），不叠焦点光晕。Choicebox 卡片描边走控件边界角色 --q1-color-border-control。
+ 有实体边框的表面只换 border-color；无边框的分段项用 inset 1px 描边，不改变尺寸。
+ 键盘聚焦时 inset 描边让位给共享焦点环，同一时刻只显示一层。禁用态沿用各组件自己的降级规则。随包样式发布。 */
+.choicebox:has(.choicebox__input:checked:not(:disabled)),
+.pagination__button--current:not(:disabled, [aria-disabled='true']) {
+  border-color: var(--q1-color-border-strong);
+  background: var(--q1-color-bg-subtle);
+}
+
+.choicebox:has(.choicebox__input:checked:not(:disabled)) {
+  border-color: var(--q1-color-border-control);
+}
+
+.toggle-group__item[aria-pressed='true']:not(:focus-visible),
+.switch-control__option[aria-checked='true']:not(:focus-visible) .switch-control__visual,
+.page-feedback__option[aria-pressed='true']:not(:focus-visible) {
+  background: var(--q1-color-bg-subtle);
+  box-shadow: inset 0 0 0 calc(var(--q1-space-1) / 4) var(--q1-color-border-strong);
+}
+
+/* JSON View 高亮行保留左竖条形态，颜色与底色走同一配方。 */
+.q1-json-view__row--highlight {
+  background: var(--q1-color-bg-subtle);
+  box-shadow: inset calc(var(--q1-space-1) / 2) 0 0 var(--q1-color-border-strong);
+}
+
+/* 暗色选中浅底：bg-subtle 在暗色是 gray-50，比面板更深，改用抬升一档的 bg-raised，覆盖上面全部选中态。 */
+:root[data-theme='dark'] :is(
+  .choicebox:has(.choicebox__input:checked:not(:disabled)),
+  .pagination__button--current:not(:disabled, [aria-disabled='true']),
+  .toggle-group__item[aria-pressed='true']:not(:focus-visible),
+  .switch-control__option[aria-checked='true']:not(:focus-visible) .switch-control__visual,
+  .page-feedback__option[aria-pressed='true']:not(:focus-visible),
+  .q1-json-view__row--highlight
+) {
+  background: var(--q1-color-bg-raised);
+}

package/dist-pkg/tokens.css

@@ -133,7 +133,7 @@
   --q1-color-bg-media: #0a0a0a;
   --q1-color-text-on-media: #ffffff;
   --q1-color-border: var(--q1-color-gray-alpha-200);
-  --q1-color-border-control: var(--q1-color-border);
+  --q1-color-border-control: var(--q1-color-gray-700);
   --q1-color-border-subtle: rgba(203, 213, 225, 0.82);
   --q1-color-border-strong: var(--q1-color-gray-500);
   --q1-color-border-active: var(--q1-color-primary-700);
@@ -170,15 +170,23 @@
   --q1-color-auth-border-strong: #d6dde6;
   --q1-color-auth-surface-card: #ffffff;
   --q1-color-auth-surface-subtle: #f8fafc;
+  --q1-color-auth-surface-input: #ffffff;
+  --q1-color-auth-surface-hover: #f6f9fc;
   --q1-color-auth-surface-disabled: #f6f9fc;
   --q1-color-auth-surface-media: #04050a;
+  --q1-color-auth-action-hover: #4434d4;
+  --q1-color-auth-action-press: #2e2b8c;
   --q1-color-auth-action-disabled-bg: #c7c9cc;
   --q1-color-auth-action-disabled-border: #c7c9cc;
   --q1-color-auth-action-disabled-text: #ffffff;
   --q1-color-auth-focus-ring: rgba(83, 58, 253, 0.42);
   --q1-color-auth-danger-border: #d92d20;
   --q1-color-auth-danger-surface: #fff8f7;
+  --q1-color-auth-error-text: #be123c;
   --q1-color-auth-field-error-text: #d32f2f;
+  --q1-color-auth-notice-border: #b9b9f9;
+  --q1-color-auth-notice-surface: #efebff;
+  --q1-color-auth-notice-text: #2e2b8c;
   --q1-color-auth-media-overlay: rgba(4, 5, 10, 0.46);
   --q1-color-auth-media-overlay-hover: rgba(4, 5, 10, 0.66);
   --q1-color-auth-on-media-border: rgba(255, 255, 255, 0.22);
@@ -450,7 +458,7 @@
   --q1-color-border: var(--q1-color-gray-400);
   --q1-color-border-control: var(--q1-color-gray-600);
   --q1-color-border-subtle: #2a2a2a;
-  --q1-color-border-strong: var(--q1-color-gray-400);
+  --q1-color-border-strong: var(--q1-color-gray-500);
   --q1-color-border-active: var(--q1-color-primary-900);
   --q1-color-text-primary: var(--q1-color-gray-1000);
   --q1-color-text-secondary: var(--q1-color-gray-900);
@@ -485,15 +493,23 @@
   --q1-color-auth-border-strong: #343943;
   --q1-color-auth-surface-card: #17191d;
   --q1-color-auth-surface-subtle: #101216;
+  --q1-color-auth-surface-input: #101216;
+  --q1-color-auth-surface-hover: #202329;
   --q1-color-auth-surface-disabled: #202329;
   --q1-color-auth-surface-media: #04050a;
+  --q1-color-auth-action-hover: #4434d4;
+  --q1-color-auth-action-press: #2e2b8c;
   --q1-color-auth-action-disabled-bg: #3b404a;
   --q1-color-auth-action-disabled-border: #3b404a;
   --q1-color-auth-action-disabled-text: #a6acb8;
   --q1-color-auth-focus-ring: rgba(126, 108, 255, 0.52);
   --q1-color-auth-danger-border: #d92d20;
   --q1-color-auth-danger-surface: #241719;
+  --q1-color-auth-error-text: #fb7185;
   --q1-color-auth-field-error-text: #d32f2f;
+  --q1-color-auth-notice-border: #3d3794;
+  --q1-color-auth-notice-surface: #1d1b3a;
+  --q1-color-auth-notice-text: #cbc4ff;
   --q1-color-auth-media-overlay: rgba(4, 5, 10, 0.46);
   --q1-color-auth-media-overlay-hover: rgba(4, 5, 10, 0.66);
   --q1-color-auth-on-media-border: rgba(255, 255, 255, 0.22);
@@ -627,3 +643,33 @@
   --q1-z-overlay-root: 1300;
   --q1-z-toast: 1400;
 }
+
+[data-q1-theme='light'] {
+  --q1-color-auth-text-primary: #061b31;
+  --q1-color-auth-text-secondary: #273951;
+  --q1-color-auth-text-muted: #64748d;
+  --q1-color-auth-border-strong: #d6dde6;
+  --q1-color-auth-surface-card: #ffffff;
+  --q1-color-auth-surface-subtle: #f8fafc;
+  --q1-color-auth-surface-input: #ffffff;
+  --q1-color-auth-surface-hover: #f6f9fc;
+  --q1-color-auth-surface-disabled: #f6f9fc;
+  --q1-color-auth-surface-media: #04050a;
+  --q1-color-auth-action-hover: #4434d4;
+  --q1-color-auth-action-press: #2e2b8c;
+  --q1-color-auth-action-disabled-bg: #c7c9cc;
+  --q1-color-auth-action-disabled-border: #c7c9cc;
+  --q1-color-auth-action-disabled-text: #ffffff;
+  --q1-color-auth-focus-ring: rgba(83, 58, 253, 0.42);
+  --q1-color-auth-danger-border: #d92d20;
+  --q1-color-auth-danger-surface: #fff8f7;
+  --q1-color-auth-error-text: #be123c;
+  --q1-color-auth-field-error-text: #d32f2f;
+  --q1-color-auth-notice-border: #b9b9f9;
+  --q1-color-auth-notice-surface: #efebff;
+  --q1-color-auth-notice-text: #2e2b8c;
+  --q1-color-auth-media-overlay: rgba(4, 5, 10, 0.46);
+  --q1-color-auth-media-overlay-hover: rgba(4, 5, 10, 0.66);
+  --q1-color-auth-on-media-border: rgba(255, 255, 255, 0.22);
+  --q1-color-auth-on-media-border-hover: rgba(255, 255, 255, 0.34);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@q1travel/design-system",
-  "version": "0.27.0",
+  "version": "0.27.1",
   "description": "React components, design tokens, and interface contracts for q1travel products.",
   "keywords": [
     "react",
@@ -54,7 +54,7 @@
     "check:shell": "npm run sync:contracts && node scripts/check-shell.mjs && node scripts/check-token-package.mjs && npm run check:release-provenance",
     "check:browser:strictmode": "node scripts/check-browser.mjs --strictmode-ref",
     "check:browser": "node --test scripts/devtools-connection.test.mjs && npm run check:browser:strictmode && node scripts/check-browser.mjs --note && node scripts/check-browser.mjs && node scripts/check-clearable-input-browser.mjs && node scripts/check-calendar-browser.mjs && node scripts/check-banner-browser.mjs && node scripts/check-button-link-browser.mjs && node scripts/check-button-browser.mjs && node scripts/check-browser-component-browser.mjs",
-    "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-q1-design-lint.test.mjs && node --test scripts/check-json-view-contract.test.mjs && node --test scripts/check-verification-code-input.test.mjs && node --test scripts/check-bare-field-error.test.mjs scripts/check-label-hidden-contract.test.mjs && node --test scripts/check-controls-contract.test.mjs && node --test scripts/check-pagination-contract.test.mjs && node --test scripts/check-table-core.test.mjs scripts/check-table-interaction.test.mjs scripts/check-table-layout.test.mjs && node --test scripts/check-contrast-contract.test.mjs && node --test scripts/check-optical-alignment-contract.test.mjs && node --test scripts/check-overlay-coordination.test.mjs scripts/check-sheet-contract.test.mjs && node --test scripts/check-choicebox-contract.test.mjs && node --test scripts/check-clearable-input-contract.test.mjs && node --test scripts/check-card-contract.test.mjs && node --test scripts/check-book-contract.test.mjs && node --test scripts/check-breadcrumbs-contract.test.mjs && node --test scripts/check-description-contract.test.mjs && node --test scripts/check-error-message-contract.test.mjs && node --test scripts/check-show-more-contract.test.mjs && node --test scripts/check-load-more-button-contract.test.mjs && node --test scripts/check-banner-contract.test.mjs && node --test scripts/check-project-banner-contract.test.mjs && node --test scripts/check-note-contract.test.mjs && node --test scripts/check-feedback-contract.test.mjs && node --test scripts/check-page-feedback-contract.test.mjs && node --test scripts/check-drawer-gesture.test.mjs && node --test scripts/check-checkbox-circle-contract.test.mjs && node --test scripts/check-chat-contract.test.mjs && node --test scripts/check-calendar-single-contract.test.mjs && node --test scripts/check-hover-card-contract.test.mjs && node --test scripts/check-bare-field-error.test.mjs && node --test scripts/check-controls-contract.test.mjs scripts/check-control-size-contract.test.mjs && node --test scripts/check-composer-dots-menu-contract.test.mjs && node --test scripts/check-filter-option-panel-contract.test.mjs",
+    "check:package-api": "node scripts/check-package-api.mjs && node --test scripts/check-q1-design-lint.test.mjs scripts/check-q1-design-bin-entry.test.mjs && node --test scripts/check-json-view-contract.test.mjs && node --test scripts/check-verification-code-input.test.mjs && node --test scripts/check-bare-field-error.test.mjs scripts/check-label-hidden-contract.test.mjs && node --test scripts/check-controls-contract.test.mjs && node --test scripts/check-pagination-contract.test.mjs && node --test scripts/check-table-core.test.mjs scripts/check-table-interaction.test.mjs scripts/check-table-layout.test.mjs && node --test scripts/check-contrast-contract.test.mjs && node --test scripts/check-optical-alignment-contract.test.mjs && node --test scripts/check-overlay-coordination.test.mjs scripts/check-sheet-contract.test.mjs && node --test scripts/check-choicebox-contract.test.mjs && node --test scripts/check-clearable-input-contract.test.mjs && node --test scripts/check-card-contract.test.mjs && node --test scripts/check-book-contract.test.mjs && node --test scripts/check-breadcrumbs-contract.test.mjs && node --test scripts/check-description-contract.test.mjs && node --test scripts/check-error-message-contract.test.mjs && node --test scripts/check-show-more-contract.test.mjs && node --test scripts/check-load-more-button-contract.test.mjs && node --test scripts/check-banner-contract.test.mjs && node --test scripts/check-project-banner-contract.test.mjs && node --test scripts/check-note-contract.test.mjs && node --test scripts/check-feedback-contract.test.mjs && node --test scripts/check-page-feedback-contract.test.mjs && node --test scripts/check-drawer-gesture.test.mjs && node --test scripts/check-checkbox-circle-contract.test.mjs && node --test scripts/check-chat-contract.test.mjs && node --test scripts/check-calendar-single-contract.test.mjs && node --test scripts/check-hover-card-contract.test.mjs && node --test scripts/check-bare-field-error.test.mjs && node --test scripts/check-controls-contract.test.mjs scripts/check-control-size-contract.test.mjs && node --test scripts/check-composer-dots-menu-contract.test.mjs && node --test scripts/check-filter-option-panel-contract.test.mjs",
     "check:release-provenance": "node --test scripts/check-release-provenance.test.mjs && node scripts/check-release-provenance.mjs",
     "check:release-sync": "node --test scripts/release-sync.test.mjs",
     "release:verify": "node scripts/release-sync.mjs --verify-only",