niuma-ui 1.0.2 → 1.1.0

package/src/__tests__/dialog-utils.spec.ts

@@ -0,0 +1,43 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { resolveRsDialogCssWidth, resolveRsDialogWidthPx } from '../components/dialog-utils'
+
+describe('resolveRsDialogWidthPx', () => {
+  afterEach(() => {
+    document.documentElement.style.removeProperty('font-size')
+  })
+
+  it('returns undefined for presets', () => {
+    expect(resolveRsDialogWidthPx('sm')).toBeUndefined()
+    expect(resolveRsDialogWidthPx('md')).toBeUndefined()
+    expect(resolveRsDialogWidthPx('lg')).toBeUndefined()
+  })
+
+  it('keeps numeric and px widths', () => {
+    expect(resolveRsDialogWidthPx(1200)).toBe(1200)
+    expect(resolveRsDialogWidthPx('960px')).toBe(960)
+  })
+
+  it('converts rem using root font size', () => {
+    document.documentElement.style.fontSize = '16px'
+    expect(resolveRsDialogWidthPx('40rem')).toBe(640)
+  })
+
+  it('converts percent against the given viewport width', () => {
+    expect(resolveRsDialogWidthPx('90%', 1000)).toBe(900)
+    expect(resolveRsDialogWidthPx('80%', 800)).toBe(640)
+  })
+
+  it('returns undefined for empty or unknown units', () => {
+    expect(resolveRsDialogWidthPx('')).toBeUndefined()
+    expect(resolveRsDialogWidthPx('min(90vw, 1200px)')).toBeUndefined()
+    expect(resolveRsDialogWidthPx(0)).toBeUndefined()
+  })
+})
+
+describe('resolveRsDialogCssWidth', () => {
+  it('maps number to px and keeps custom CSS strings', () => {
+    expect(resolveRsDialogCssWidth('md')).toBeUndefined()
+    expect(resolveRsDialogCssWidth(520)).toBe('520px')
+    expect(resolveRsDialogCssWidth('90%')).toBe('90%')
+  })
+})

package/src/__tests__/form-path.spec.ts

@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import {
+  concatNamePath,
+  getByNamePath,
+  hasByNamePath,
+  namePathKey,
+  normalizeNamePath,
+  setByNamePath,
+} from '../components/form-path'
+
+describe('form-path', () => {
+  it('normalizes string and array name paths', () => {
+    expect(normalizeNamePath('user.email')).toEqual(['user', 'email'])
+    expect(normalizeNamePath(['user', 'email'])).toEqual(['user', 'email'])
+    expect(namePathKey(['a', 0, 'b'])).toBe('a.0.b')
+  })
+
+  it('gets and sets nested values', () => {
+    const model: Record<string, unknown> = {}
+    setByNamePath(model, 'user.email', 'a@b.com')
+    expect(model).toEqual({ user: { email: 'a@b.com' } })
+    expect(getByNamePath(model, ['user', 'email'])).toBe('a@b.com')
+    expect(hasByNamePath(model, 'user.email')).toBe(true)
+  })
+
+  it('walks multi-level JSON paths', () => {
+    const model: Record<string, unknown> = {}
+    setByNamePath(model, 'config.headerConfig.isRequestHeader', true)
+    expect(model).toEqual({
+      config: { headerConfig: { isRequestHeader: true } },
+    })
+    expect(getByNamePath(model, 'config.headerConfig.isRequestHeader')).toBe(true)
+    expect(hasByNamePath(model, 'config.headerConfig.headerName')).toBe(false)
+  })
+
+  it('preserves arrays when setting nested list fields', () => {
+    const model: Record<string, unknown> = { users: [{ name: 'A' }] }
+    setByNamePath(model, ['users', 0, 'name'], 'B')
+    expect(model.users).toEqual([{ name: 'B' }])
+    expect(Array.isArray(model.users)).toBe(true)
+  })
+
+  it('concatenates list prefix and item name', () => {
+    expect(concatNamePath('users', [0, 'name'])).toEqual(['users', 0, 'name'])
+  })
+})

package/src/__tests__/form-rules.spec.ts

@@ -63,6 +63,11 @@ describe('form-rules', () => {
     expect(rules[1]?.type).toBe('email')
   })
 
+  it('interpolates required message with label', async () => {
+    const labeled = await runFormFieldRules('', [{ required: true }], { label: '邮箱' })
+    expect(labeled.message).toBe('请填写邮箱')
+  })
+
   it('supports message as function', async () => {
     const result = await runFormFieldRules('x', [
       {
@@ -73,4 +78,62 @@ describe('form-rules', () => {
     expect(result.valid).toBe(false)
     expect(result.message).toBe('当前「x」太短')
   })
+
+  it('validator can read other fields via context', async () => {
+    const result = await runFormFieldRules('two', [
+      {
+        validator(value, ctx) {
+          if (String(value) !== String(ctx.getFieldValue('a'))) return '不一致'
+          return true
+        },
+      },
+    ], {
+      getFieldValue: (name) => (String(name) === 'a' ? 'one' : undefined),
+    })
+    expect(result).toEqual({ valid: false, message: '不一致' })
+
+    const ok = await runFormFieldRules('one', [
+      {
+        validator(value, ctx) {
+          if (String(value) !== String(ctx.getFieldValue('a'))) return '不一致'
+          return true
+        },
+      },
+    ], {
+      getFieldValue: (name) => (String(name) === 'a' ? 'one' : undefined),
+    })
+    expect(ok.valid).toBe(true)
+  })
+
+  it('runs custom validator on empty value for cross-field required', async () => {
+    const result = await runFormFieldRules(
+      '',
+      [
+        {
+          validator(_value, ctx) {
+            if (ctx.getFieldValue('kind') === 'email') return '邮箱必填'
+            return true
+          },
+        },
+      ],
+      { getFieldValue: (name) => (String(name) === 'kind' ? 'email' : undefined) },
+    )
+    expect(result).toEqual({ valid: false, message: '邮箱必填' })
+  })
+
+  it('treats Error return and thrown errors as failure', async () => {
+    const returned = await runFormFieldRules('x', [
+      { validator: () => new Error('返回错误') as unknown as string },
+    ])
+    expect(returned).toEqual({ valid: false, message: '返回错误' })
+
+    const thrown = await runFormFieldRules('x', [
+      {
+        validator() {
+          throw new Error('抛出错误')
+        },
+      },
+    ])
+    expect(thrown).toEqual({ valid: false, message: '抛出错误' })
+  })
 })

package/src/__tests__/theme.spec.ts

@@ -17,6 +17,8 @@ describe('useRsConfig / theme', () => {
     expect(en.t('select.placeholder')).toBe('Select')
     expect(zh.t('input.required')).toBe('此项为必填')
     expect(en.t('input.required')).toBe('This field is required')
+    expect(zh.t('form.validate.required', { label: '邮箱' })).toBe('请填写邮箱')
+    expect(en.t('form.validate.required', { label: 'Email' })).toBe('Please enter Email')
     expect(en.t('breadcrumb.label')).toBe('Breadcrumb')
   })
 

package/src/components/RsAlert.vue

@@ -108,7 +108,7 @@ function onClose(event: MouseEvent): void {
 
 .rs-alert__title {
   font-size: var(--rs-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   line-height: var(--rs-line-height-tight);
   color: inherit;
 }

package/src/components/RsAvatar.vue

@@ -90,7 +90,7 @@ const ariaLabel = computed(() => props.label ?? props.alt ?? props.name ?? undef
   width: 100%;
   height: 100%;
   font-size: var(--rs-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
 }
 .rs-avatar__fallback--default {
   background: var(--rs-surface-hover);

package/src/components/RsBadge.vue

@@ -22,7 +22,7 @@ withDefaults(
   padding: 0.125rem 0.625rem;
   border-radius: var(--rs-radius-full);
   font-size: var(--rs-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   line-height: var(--rs-line-height-tight);
   letter-spacing: 0.02em;
 }

package/src/components/RsBreadcrumb.vue

@@ -56,7 +56,7 @@ const renderItems = computed(() => buildBreadcrumbRenderItems(props.items))
 }
 .rs-breadcrumb__link--current {
   color: var(--rs-text);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   pointer-events: none;
 }
 .rs-breadcrumb__sep {

package/src/components/RsButton.vue

@@ -196,7 +196,7 @@ watch(
   border-radius: var(--rs-btn-radius, var(--rs-radius-full));
   border: 1px solid transparent;
   font-size: var(--rs-font-size-sm);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   letter-spacing: 0.01em;
   line-height: 1;
   white-space: nowrap;
@@ -329,7 +329,7 @@ watch(
   background: transparent;
   color: var(--rs-btn-tone, var(--rs-primary));
   box-shadow: none;
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
 }
 .rs-btn--link:hover:not(:disabled) {
   color: var(--rs-btn-tone-hover, var(--rs-primary-hover));
@@ -346,7 +346,7 @@ watch(
   border-color: transparent;
   background: transparent;
   box-shadow: none;
-  font-weight: 400;
+  font-weight: var(--rs-font-weight-regular);
   color: var(--rs-btn-tone, var(--rs-text));
 }
 .rs-btn--text.rs-btn--ssm {
@@ -474,7 +474,7 @@ watch(
   background: var(--rs-surface-elevated);
   color: var(--rs-text);
   font-size: var(--rs-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   line-height: 1.25rem;
   white-space: nowrap;
   box-shadow: var(--rs-shadow-sm);

package/src/components/RsCalendarGrid.vue

@@ -204,7 +204,7 @@ function selectDate(cell: RsCalendarCell): void {
   flex: 1;
   text-align: center;
   font-size: var(--rs-font-size-sm);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-text);
 }
 .rs-calendar-grid__nav {
@@ -233,8 +233,8 @@ function selectDate(cell: RsCalendarCell): void {
 .rs-calendar-grid__weekday {
   padding: 0.125rem 0;
   text-align: center;
-  font-size: 0.6875rem;
-  font-weight: 500;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-medium);
   color: var(--rs-muted);
 }
 .rs-calendar-grid__day {

package/src/components/RsCard.vue

@@ -232,7 +232,7 @@ const rootStyle = computed(() => ({
 }
 .rs-card--plain .rs-card__title {
   font-size: var(--rs-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   color: var(--rs-card-description-fg);
   letter-spacing: 0;
 }
@@ -255,7 +255,7 @@ const rootStyle = computed(() => ({
   box-shadow: none;
 }
 .rs-card--outlined .rs-card__title {
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   letter-spacing: 0;
 }
 .rs-card--outlined .rs-card__body {
@@ -277,7 +277,7 @@ const rootStyle = computed(() => ({
   box-shadow: none;
 }
 .rs-card--filled .rs-card__title {
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   letter-spacing: 0;
 }
 .rs-card--filled .rs-card__body {
@@ -385,7 +385,7 @@ const rootStyle = computed(() => ({
 .rs-card__title {
   margin: 0;
   font-size: var(--rs-card-title-size);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   letter-spacing: -0.01em;
   color: var(--rs-card-title-fg);
 }

package/src/components/RsCodeBlock.vue

@@ -192,7 +192,7 @@ function download() {
 }
 
 .rs-code-block__lang {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
   font-size: var(--rs-font-size-xs);
   color: var(--rs-muted);
   text-transform: lowercase;
@@ -251,9 +251,9 @@ function download() {
 }
 
 .rs-code-block__editor :deep(.cm-scroller) {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: var(--rs-font-size-sm);
-  line-height: 1.6;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-code-font-size, var(--rs-font-size-sm));
+  line-height: var(--rs-code-line-height, var(--rs-line-height-relaxed));
 }
 
 /* 只读时隐藏光标，保持纯展示外观 */

package/src/components/RsCodeEditor.vue

@@ -445,14 +445,14 @@ defineExpose({
   justify-content: space-between;
   margin-bottom: 0.5rem;
   font-size: var(--rs-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-foreground);
 }
 .rs-code-editor__inline-edit-head kbd {
   padding: 0.1rem 0.35rem;
   border-radius: 4px;
   border: 1px solid var(--rs-border-subtle);
-  font-size: 0.7rem;
+  font-size: var(--rs-font-size-xs);
   color: var(--rs-muted);
 }
 .rs-code-editor__inline-preview {
@@ -461,8 +461,8 @@ defineExpose({
   border-radius: 4px;
   background: color-mix(in srgb, var(--rs-muted) 8%, transparent);
   color: var(--rs-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: 0.72rem;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-font-size-xs);
   line-height: 1.4;
   white-space: pre-wrap;
   max-height: 4.5rem;
@@ -520,9 +520,9 @@ defineExpose({
   background: var(--rs-surface-elevated) !important;
 }
 .rs-code-editor__surface :deep(.cm-scroller) {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-  font-size: var(--rs-font-size-sm);
-  line-height: 1.6;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
+  font-size: var(--rs-code-font-size, var(--rs-font-size-sm));
+  line-height: var(--rs-code-line-height, var(--rs-line-height-relaxed));
 }
 .rs-code-editor__surface :deep(.cm-gutters) {
   background: color-mix(in srgb, var(--rs-surface-elevated) 85%, var(--rs-border) 15%) !important;
@@ -571,7 +571,7 @@ defineExpose({
   border: 1px solid var(--rs-border);
   background: var(--rs-surface-elevated);
   color: var(--rs-foreground);
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-family: var(--rs-code-font-family, var(--rs-font-mono));
   font-size: var(--rs-font-size-xs);
   line-height: 1.45;
   white-space: pre-wrap;

package/src/components/RsConfirmDialog.vue

@@ -297,7 +297,7 @@ defineExpose({
   height: 2.5rem;
   flex: 0 0 auto;
   border-radius: var(--rs-radius);
-  font-weight: 700;
+  font-weight: var(--rs-font-weight-bold);
 }
 .rs-confirm-dialog__icon-glyph {
   width: 1.25rem;
@@ -328,7 +328,7 @@ defineExpose({
 .rs-confirm-dialog__title {
   margin: 0;
   font-size: var(--rs-font-size-base);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   letter-spacing: -0.01em;
   color: var(--rs-dialog-title-fg);
 }

package/src/components/RsContextMenu.vue

@@ -152,9 +152,10 @@ function onSelect(item: RsContextMenuItem) {
   align-items: center;
   gap: 0;
   padding: 0 8px 0 0;
-  height: 26px;
+  height: 24px;
   border-radius: 6px;
-  font-size: 13px;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-regular);
   line-height: 1;
   color: var(--rs-text);
   cursor: default;
@@ -185,10 +186,11 @@ function onSelect(item: RsContextMenuItem) {
 .rs-context-menu__shortcut {
   flex-shrink: 0;
   margin-left: 16px;
-  font-size: 12px;
+  font-size: var(--rs-font-size-xs);
+  font-weight: var(--rs-font-weight-regular);
   color: var(--rs-ctx-shortcut);
   letter-spacing: 0.02em;
-  font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif;
+  font-family: var(--rs-font-sans);
 }
 
 /* 子菜单展开箭头 */

package/src/components/RsDatePicker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, useId, watch } from 'vue'
+import { computed, ref, useAttrs, useId, watch } from 'vue'
 import { PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger } from './reka'
 import RsCalendarGrid from './RsCalendarGrid.vue'
 import RsIcon from './RsIcon.vue'
@@ -7,7 +7,12 @@ import RsTimePicker from './RsTimePicker.vue'
 import { useRsI18n } from '../composables/useRsI18n'
 import { RS_COMPONENT_SIZE_ICON_PX, type RsComponentSize } from '../theme/types'
 import { useResolvedRsComponentSize } from './resolve-size'
-import { useRsFormContext, useRsFormField } from './form-utils'
+import {
+  isRsFormItemBoundControl,
+  useRsFormContext,
+  useRsFormField,
+  useRsFormItemContext,
+} from './form-utils'
 import {
   buildLocalInputRules,
   runFormFieldRules,
@@ -26,6 +31,7 @@ import {
   getNextMonth,
   getNowDateTime,
   formatTimestampValue,
+  fromInternalPickerValue,
   getTodayDate,
   isDateRangeEmpty,
   isDateRangeOrdered,
@@ -35,6 +41,8 @@ import {
   parseDateTimeValue,
   parseDateValue,
   parseTimestampValue,
+  toInternalPickerValue,
+  toRangeEndpointString,
   type RsDatePickerModelValue,
   type RsDatePickerShortcut,
   type RsDatePickerValueFormat,
@@ -55,6 +63,8 @@ function isRangeModel(value: RsDatePickerModelValue): value is RsDateRangeValue
   return typeof value === 'object' && value !== null && !Array.isArray(value) && ('start' in value || 'end' in value)
 }
 
+defineOptions({ inheritAttrs: false })
+
 const model = defineModel<RsDatePickerModelValue>({ default: '' })
 const open = defineModel<boolean>('open', { default: false })
 
@@ -75,12 +85,19 @@ const props = withDefaults(
      * 是否选择秒。未传时：withTime 为 true 则默认带秒，纯日期为 false。
      */
     withSeconds?: boolean
-    /** string：YYYY-MM-DD[/HH:mm:ss]；timestamp：毫秒时间戳 / [start, end] */
+    /**
+     * 绑定值格式（展示仍为墙钟）。
+     * string：YYYY-MM-DD[/ HH:mm:ss]；timestamp：毫秒；iso：本地偏移 RFC3339；
+     * 亦可传入 dayjs 模板（对齐 Element Plus value-format）。
+     */
     valueFormat?: RsDatePickerValueFormat
     labelPosition?: RsDatePickerLabelPosition
     /** 底部快捷选项（有值时替代「今天/现在」链接） */
     shortcuts?: RsDatePickerShortcut[]
     size?: RsComponentSize
+    id?: string
+    invalid?: boolean
+    showValidateMessage?: boolean
   }>(),
   {
     disabled: false,
@@ -89,10 +106,12 @@ const props = withDefaults(
     withTime: false,
     valueFormat: 'string',
     labelPosition: 'top',
+    showValidateMessage: true,
   },
 )
 
 const fieldId = useId()
+const attrs = useAttrs()
 const { t } = useRsI18n()
 const resolvedSize = useResolvedRsComponentSize(() => props.size)
 const triggerIconSize = computed(() => RS_COMPONENT_SIZE_ICON_PX[resolvedSize.value])
@@ -101,7 +120,22 @@ const resolvedWithSeconds = computed(() =>
   props.withSeconds !== undefined ? props.withSeconds : props.withTime,
 )
 const formContext = useRsFormContext()
+const formItem = useRsFormItemContext()
+const boundToItem = computed(() =>
+  isRsFormItemBoundControl(formItem, { id: props.id, name: props.name }),
+)
 const autoMessage = ref('')
+const isInvalid = computed(() =>
+  Boolean(
+    props.invalid ||
+      (boundToItem.value && formItem?.invalid.value) ||
+      (!boundToItem.value && autoMessage.value),
+  ),
+)
+const triggerId = computed(() => props.id || fieldId)
+const visibleMessage = computed(() =>
+  boundToItem.value || props.showValidateMessage === false ? '' : autoMessage.value,
+)
 
 const viewYear = ref(getTodayDate().year)
 const viewMonth = ref(getTodayDate().month)
@@ -117,47 +151,52 @@ const draftTime = ref('')
 const draftStartTime = ref('')
 const draftEndTime = ref('')
 
+const convertOptions = computed(() => ({
+  valueFormat: props.valueFormat ?? 'string',
+  withTime: props.withTime,
+}))
+
 const useTimestamp = computed(() => props.valueFormat === 'timestamp')
 
 const rangeModel = computed<RsDateRangeValue>({
   get() {
     if (!props.range) return { ...EMPTY_DATE_RANGE }
     const value = model.value
-    if (useTimestamp.value) {
-      if (!isTimestampRange(value)) return { ...EMPTY_DATE_RANGE }
+    const opts = convertOptions.value
+    if (isTimestampRange(value)) {
       return {
-        start: formatTimestampValue(value[0], props.withTime),
-        end: formatTimestampValue(value[1], props.withTime),
+        start: formatTimestampValue(value[0], opts.withTime),
+        end: formatTimestampValue(value[1], opts.withTime),
       }
     }
-    return isRangeModel(value) ? value : { ...EMPTY_DATE_RANGE }
+    if (!isRangeModel(value)) return { ...EMPTY_DATE_RANGE }
+    return {
+      start: toInternalPickerValue(value.start, opts) || undefined,
+      end: toInternalPickerValue(value.end, opts) || undefined,
+    }
   },
   set(value) {
+    const opts = convertOptions.value
     if (useTimestamp.value) {
       const start = parseTimestampValue(value.start)
       const end = parseTimestampValue(value.end)
       model.value = start != null && end != null ? [start, end] : null
       return
     }
-    model.value = value
+    model.value = {
+      start: toRangeEndpointString(fromInternalPickerValue(value.start || '', opts)),
+      end: toRangeEndpointString(fromInternalPickerValue(value.end || '', opts)),
+    }
   },
 })
 
 const singleModel = computed({
   get() {
     if (props.range) return ''
-    const value = model.value
-    if (useTimestamp.value) {
-      return typeof value === 'number' ? formatTimestampValue(value, props.withTime) : ''
-    }
-    return typeof value === 'string' ? value : ''
+    return toInternalPickerValue(model.value, convertOptions.value)
   },
   set(value: string) {
-    if (useTimestamp.value) {
-      model.value = value ? parseTimestampValue(value) : null
-      return
-    }
-    model.value = value
+    model.value = fromInternalPickerValue(value, convertOptions.value)
   },
 })
 
@@ -422,11 +461,7 @@ function clearSelection(): void {
     draftEnd.value = null
     if (props.withTime) resetRangeTimeDrafts()
   } else {
-    if (useTimestamp.value) {
-      model.value = null
-    } else {
-      singleModel.value = ''
-    }
+    singleModel.value = ''
     draftDate.value = null
     if (props.withTime) draftTime.value = currentTimeValue()
   }
@@ -577,15 +612,16 @@ watch(open, (isOpen) => {
     <div class="rs-date-picker" :class="`rs-date-picker--${resolvedSize}`">
       <PopoverRoot v-model:open="open">
         <PopoverTrigger
-          :id="fieldId"
+          v-bind="attrs"
+          :id="triggerId"
           type="button"
           class="rs-date-picker__trigger"
           :class="{
             'rs-date-picker__trigger--placeholder': isEmpty,
-            'rs-date-picker__trigger--invalid': !!autoMessage,
+            'rs-date-picker__trigger--invalid': isInvalid,
           }"
           :disabled="disabled"
-          :aria-invalid="autoMessage ? true : undefined"
+          :aria-invalid="isInvalid || undefined"
         >
           <span class="rs-date-picker__leading">
             <RsIcon :name="triggerIcon" :size="triggerIconSize" class="rs-date-picker__icon" />
@@ -728,8 +764,8 @@ watch(open, (isOpen) => {
       </PopoverRoot>
     </div>
 
-    <p v-if="autoMessage" class="rs-date-picker-field__error" role="alert">
-      {{ autoMessage }}
+    <p v-if="visibleMessage" class="rs-date-picker-field__error" role="alert">
+      {{ visibleMessage }}
     </p>
     <span v-if="hint" class="rs-field__hint">{{ hint }}</span>
   </div>
@@ -758,6 +794,7 @@ watch(open, (isOpen) => {
   line-height: var(--rs-line-height-tight);
   text-align: left;
   cursor: pointer;
+  outline: none;
   box-shadow: var(--rs-input-shadow, none);
   transition:
     border-color var(--rs-transition-fast),
@@ -803,6 +840,13 @@ watch(open, (isOpen) => {
 .rs-date-picker__trigger--invalid {
   border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
 }
+.rs-date-picker__trigger--invalid:focus-visible {
+  border-color: var(--rs-danger, var(--rs-color-danger, #dc2626));
+  box-shadow:
+    var(--rs-input-shadow, none),
+    0 0 0 var(--rs-focus-ring-width, 2px)
+      color-mix(in srgb, var(--rs-danger, #dc2626) 14%, transparent);
+}
 .rs-date-picker-field__error {
   margin: var(--rs-space-xs) 0 0;
   color: var(--rs-danger, var(--rs-color-danger, #dc2626));
@@ -874,7 +918,7 @@ watch(open, (isOpen) => {
 }
 .rs-date-picker__pane-title {
   font-size: var(--rs-font-size-xs);
-  font-weight: 600;
+  font-weight: var(--rs-font-weight-semibold);
   color: var(--rs-muted);
 }
 .rs-date-picker__footer {
@@ -979,7 +1023,7 @@ watch(open, (isOpen) => {
 .rs-date-picker__time-label {
   flex-shrink: 0;
   font-size: var(--rs-font-size-xs);
-  font-weight: 500;
+  font-weight: var(--rs-font-weight-medium);
   color: var(--rs-muted);
 }
 .rs-date-picker__time-picker {