@varlet/ui 3.9.0-alpha.1736270797421 → 3.9.0

package/es/index.bundle.mjs

@@ -280,7 +280,7 @@ import './tooltip/style/index.mjs'
 import './uploader/style/index.mjs'
 import './watermark/style/index.mjs'
 
-const version = '3.9.0-alpha.1736270797421'
+const version = '3.9.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/index.mjs

@@ -186,7 +186,7 @@ export * from './tooltip/index.mjs'
 export * from './uploader/index.mjs'
 export * from './watermark/index.mjs'
 
-const version = '3.9.0-alpha.1736270797421'
+const version = '3.9.0'
 
 function install(app) {
   ActionSheet.install && app.use(ActionSheet)

package/es/input/Input.mjs

@@ -8,9 +8,9 @@ import { createNamespace, useValidation } from "../utils/components.mjs";
 import { props } from "./props.mjs";
 const { name, n, classes } = createNamespace("input");
 import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, createBlock as _createBlock } from "vue";
-const _hoisted_1 = ["placeholder", "enterkeyhint"];
-const _hoisted_2 = ["id", "autocomplete", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
-const _hoisted_3 = ["id", "autocomplete", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
+const _hoisted_1 = ["aria-label", "placeholder", "enterkeyhint"];
+const _hoisted_2 = ["id", "aria-label", "autocomplete", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
+const _hoisted_3 = ["id", "aria-label", "autocomplete", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
 function __render__(_ctx, _cache) {
   const _component_var_field_decorator = _resolveComponent("var-field-decorator");
   const _component_var_form_details = _resolveComponent("var-form-details");
@@ -29,6 +29,7 @@ function __render__(_ctx, _cache) {
           size: _ctx.size,
           variant: _ctx.variant,
           placeholder: _ctx.placeholder,
+          ariaLabel: _ctx.ariaLabel,
           line: _ctx.line,
           hint: _ctx.hint,
           textColor: _ctx.textColor,
@@ -56,6 +57,7 @@ function __render__(_ctx, _cache) {
             _ctx.normalizedType === "password" ? (_openBlock(), _createElementBlock("input", {
               key: 0,
               tabindex: "-1",
+              "aria-label": _ctx.ariaLabel,
               class: _normalizeClass(_ctx.n("autocomplete")),
               placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
               style: _normalizeStyle({
@@ -67,6 +69,7 @@ function __render__(_ctx, _cache) {
               key: 1,
               id: _ctx.id,
               ref: "el",
+              "aria-label": _ctx.ariaLabel,
               class: _normalizeClass(
                 _ctx.classes(
                   _ctx.n("input"),
@@ -102,6 +105,7 @@ function __render__(_ctx, _cache) {
               key: 2,
               id: _ctx.id,
               ref: "el",
+              "aria-label": _ctx.ariaLabel,
               class: _normalizeClass(
                 _ctx.classes(
                   _ctx.n("input"),

package/es/input/props.mjs

@@ -30,6 +30,7 @@ const props = __spreadProps(__spreadValues({
     default: "text"
   },
   textarea: Boolean,
+  ariaLabel: String,
   rows: {
     type: [String, Number],
     default: 8

package/es/locale/index.mjs

@@ -18,6 +18,7 @@ import { ref } from "vue";
 import { hasOwn } from "@varlet/shared";
 import enUS from "./en-US.mjs";
 import faIR from "./fa-IR.mjs";
+import jaJP from "./ja-JP.mjs";
 import zhCN from "./zh-CN.mjs";
 import zhHK from "./zh-HK.mjs";
 import zhTW from "./zh-TW.mjs";
@@ -66,6 +67,7 @@ const _LocaleComponent = {
   zhTW,
   zhHK,
   faIR,
+  jaJP,
   messages,
   currentMessage,
   add,
@@ -80,6 +82,7 @@ var stdin_default = {
   zhTW,
   zhHK,
   faIR,
+  jaJP,
   messages,
   currentMessage,
   add,

package/es/locale/ja-JP.d.ts

@@ -0,0 +1,5 @@
+import type { Message } from '../../types'
+
+declare const jaJP: Message
+
+export default jaJP

package/es/locale/ja-JP.mjs

@@ -0,0 +1,108 @@
+var stdin_default = {
+  // Dialog
+  dialogTitle: "\u78BA\u8A8D",
+  dialogConfirmButtonText: "\u78BA\u8A8D",
+  dialogCancelButtonText: "\u30AD\u30E3\u30F3\u30BB\u30EB",
+  // ActionSheet
+  actionSheetTitle: "\u3044\u305A\u308C\u304B\u3092\u9078\u629E",
+  // List
+  listLoadingText: "\u8AAD\u307F\u8FBC\u307F\u4E2D",
+  listFinishedText: "\u4EE5\u4E0A\u3067\u3059",
+  listErrorText: "\u8AAD\u307F\u8FBC\u307F\u5931\u6557",
+  // Picker
+  pickerTitle: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044",
+  pickerConfirmButtonText: "\u78BA\u8A8D",
+  pickerCancelButtonText: "\u30AD\u30E3\u30F3\u30BB\u30EB",
+  // date-picker
+  datePickerMonthDict: {
+    "01": {
+      name: "1\u6708",
+      abbr: "1\u6708"
+    },
+    "02": {
+      name: "2\u6708",
+      abbr: "2\u6708"
+    },
+    "03": {
+      name: "3\u6708",
+      abbr: "3\u6708"
+    },
+    "04": {
+      name: "4\u6708",
+      abbr: "4\u6708"
+    },
+    "05": {
+      name: "5\u6708",
+      abbr: "5\u6708"
+    },
+    "06": {
+      name: "6\u6708",
+      abbr: "6\u6708"
+    },
+    "07": {
+      name: "7\u6708",
+      abbr: "7\u6708"
+    },
+    "08": {
+      name: "8\u6708",
+      abbr: "8\u6708"
+    },
+    "09": {
+      name: "9\u6708",
+      abbr: "9\u6708"
+    },
+    "10": {
+      name: "10\u6708",
+      abbr: "10\u6708"
+    },
+    "11": {
+      name: "11\u6708",
+      abbr: "11\u6708"
+    },
+    "12": {
+      name: "12\u6708",
+      abbr: "12\u6708"
+    }
+  },
+  datePickerWeekDict: {
+    "0": {
+      name: "\u65E5\u66DC\u65E5",
+      abbr: "\u65E5"
+    },
+    "1": {
+      name: "\u6708\u66DC\u65E5",
+      abbr: "\u6708"
+    },
+    "2": {
+      name: "\u706B\u66DC\u65E5",
+      abbr: "\u706B"
+    },
+    "3": {
+      name: "\u6C34\u66DC\u65E5",
+      abbr: "\u6C34"
+    },
+    "4": {
+      name: "\u6728\u66DC\u65E5",
+      abbr: "\u6728"
+    },
+    "5": {
+      name: "\u91D1\u66DC\u65E5",
+      abbr: "\u91D1"
+    },
+    "6": {
+      name: "\u571F\u66DC\u65E5",
+      abbr: "\u571F"
+    }
+  },
+  datePickerSelected: "\u4EF6\u9078\u629E\u6E08\u307F",
+  datePickerHint: "\u65E5\u4ED8\u3092\u9078\u629E",
+  // pagination
+  paginationItem: "\u4EF6",
+  paginationPage: "\u30DA\u30FC\u30B8",
+  paginationJump: "\u30B8\u30E3\u30F3\u30D7",
+  // time-picker
+  timePickerHint: "\u6642\u9593\u3092\u9078\u629E"
+};
+export {
+  stdin_default as default
+};

package/es/locale/zh-TW.mjs

@@ -95,10 +95,13 @@ var stdin_default = {
     }
   },
   datePickerSelected: "\u500B\u88AB\u9078\u64C7",
+  datePickerHint: "\u9078\u64C7\u65E5\u671F",
   // pagination
   paginationItem: "\u689D",
   paginationPage: "\u9801",
-  paginationJump: "\u524D\u5F80"
+  paginationJump: "\u524D\u5F80",
+  // time-picker
+  timePickerHint: "\u9078\u64C7\u6642\u9593"
 };
 export {
   stdin_default as default

package/es/pagination/Pagination.mjs

@@ -58,6 +58,7 @@ function __render__(_ctx, _cache) {
             modelValue: _ctx.simpleCurrentValue,
             "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.simpleCurrentValue = $event),
             "var-pagination-cover": "",
+            variant: "standard",
             hint: false,
             disabled: _ctx.disabled,
             onBlur: _cache[2] || (_cache[2] = ($event) => _ctx.setPage("simple", _ctx.simpleCurrentValue, $event)),
@@ -136,45 +137,45 @@ function __render__(_ctx, _cache) {
       )), [
         [_directive_ripple, { disabled: _ctx.current >= _ctx.pageCount || _ctx.disabled }]
       ]),
-      _ctx.showSizeChanger ? (_openBlock(), _createElementBlock(
-        "li",
-        {
-          key: 2,
-          class: _normalizeClass(_ctx.classes(_ctx.n("size"), [_ctx.disabled, _ctx.n("item--disabled")]))
-        },
-        [
-          _createVNode(_component_var_menu_select, {
-            modelValue: _ctx.size,
-            "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.size = $event),
-            placement: "cover-top",
-            disabled: _ctx.disabled
-          }, {
-            options: _withCtx(() => [
-              (_openBlock(true), _createElementBlock(
-                _Fragment,
-                null,
-                _renderList(_ctx.sizeOption, (option, index) => {
-                  return _openBlock(), _createBlock(_component_var_menu_option, {
-                    key: index,
-                    value: option,
-                    onClick: _ctx.clickSize
-                  }, {
-                    default: _withCtx(() => [
-                      _createTextVNode(
-                        _toDisplayString(option) + _toDisplayString((_ctx.pt ? _ctx.pt : _ctx.t)("paginationItem")) + " / " + _toDisplayString((_ctx.pt ? _ctx.pt : _ctx.t)("paginationPage")),
-                        1
-                        /* TEXT */
-                      )
-                    ]),
-                    _: 2
-                    /* DYNAMIC */
-                  }, 1032, ["value", "onClick"]);
-                }),
-                128
-                /* KEYED_FRAGMENT */
-              ))
-            ]),
-            default: _withCtx(() => [
+      _ctx.showSizeChanger ? (_openBlock(), _createBlock(_component_var_menu_select, {
+        key: 2,
+        modelValue: _ctx.size,
+        "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => _ctx.size = $event),
+        placement: "cover-top",
+        disabled: _ctx.disabled
+      }, {
+        options: _withCtx(() => [
+          (_openBlock(true), _createElementBlock(
+            _Fragment,
+            null,
+            _renderList(_ctx.sizeOption, (option, index) => {
+              return _openBlock(), _createBlock(_component_var_menu_option, {
+                key: index,
+                value: option,
+                onClick: _ctx.clickSize
+              }, {
+                default: _withCtx(() => [
+                  _createTextVNode(
+                    _toDisplayString(option) + _toDisplayString((_ctx.pt ? _ctx.pt : _ctx.t)("paginationItem")) + " / " + _toDisplayString((_ctx.pt ? _ctx.pt : _ctx.t)("paginationPage")),
+                    1
+                    /* TEXT */
+                  )
+                ]),
+                _: 2
+                /* DYNAMIC */
+              }, 1032, ["value", "onClick"]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ]),
+        default: _withCtx(() => [
+          _createElementVNode(
+            "li",
+            {
+              class: _normalizeClass(_ctx.classes(_ctx.n("size"), [_ctx.disabled, _ctx.n("item--disabled")]))
+            },
+            [
               _createElementVNode(
                 "div",
                 {
@@ -197,14 +198,14 @@ function __render__(_ctx, _cache) {
                 2
                 /* CLASS */
               )
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["modelValue", "disabled"])
-        ],
-        2
-        /* CLASS */
-      )) : _createCommentVNode("v-if", true),
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["modelValue", "disabled"])) : _createCommentVNode("v-if", true),
       _ctx.showQuickJumper && !_ctx.simple ? (_openBlock(), _createElementBlock(
         "li",
         {
@@ -222,6 +223,7 @@ function __render__(_ctx, _cache) {
             "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => _ctx.quickJumperValue = $event),
             disabled: _ctx.disabled,
             hint: false,
+            variant: "standard",
             "var-pagination-cover": "",
             onBlur: _cache[7] || (_cache[7] = ($event) => _ctx.setPage("quick", _ctx.quickJumperValue, $event)),
             onKeydown: _cache[8] || (_cache[8] = _withKeys(($event) => _ctx.setPage("quick", _ctx.quickJumperValue, $event), ["enter"]))

package/es/pagination/pagination.css

@@ -1 +1 @@
-:root { --pagination-text-color: #555; --pagination-font-size: var(--font-size-md); --pagination-active-color: var(--color-on-primary); --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: rgba(85, 85, 85, 0.15); --pagination-total-margin: 0 12px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-item-simple-border-radius: 50%; --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px; --pagination-size-padding: 0 6px;}.var-pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0; color: var(--pagination-text-color);}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent; border-radius: var(--pagination-item-simple-border-radius);}.var-pagination__item--disabled { cursor: not-allowed !important; color: var(--pagination-disabled-color); background-color: unset;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--hover:hover { background-color: inherit;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin); padding: var(--pagination-size-padding); cursor: pointer;}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: inherit;}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-field-decorator__middle,.var-pagination__simple [var-pagination-cover] .var-field-decorator__middle { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-item-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}
+:root { --pagination-text-color: #555; --pagination-font-size: var(--font-size-md); --pagination-active-color: var(--color-on-primary); --pagination-active-bg-color: var(--color-primary); --pagination-hover-bg-color: rgba(85, 85, 85, 0.15); --pagination-total-margin: 0 10px; --pagination-total-line-height: 24px; --pagination-item-width: 32px; --pagination-item-height: 32px; --pagination-item-margin: 0 6px; --pagination-item-background: #fff; --pagination-item-border-radius: 4px; --pagination-item-simple-border-radius: 50%; --pagination-input-width: 32px; --pagination-disabled-color: var(--color-text-disabled); --pagination-bg-disabled-color: var(--color-disabled); --pagination-size-line-height: 24px; --pagination-size-padding: 0 4px; --pagination-quick-jumper-margin: 0 10px;}.var-pagination-flex-nowrap { display: flex; white-space: nowrap; align-items: center;}.var-pagination { display: flex; align-items: center; list-style: none; margin: 0; font-size: var(--pagination-font-size); padding: 0; color: var(--pagination-text-color);}.var-pagination__item { display: inline-flex; min-width: var(--pagination-item-width); align-items: center; justify-content: center; margin: var(--pagination-item-margin); height: var(--pagination-item-height); cursor: pointer; border-radius: var(--pagination-item-border-radius); outline: none; transition: all 0.25s; user-select: none; background-color: var(--pagination-item-background);}.var-pagination__item:hover { background-color: var(--pagination-hover-bg-color);}.var-pagination__item--active { color: var(--pagination-active-color); background-color: var(--pagination-active-bg-color) !important;}.var-pagination__item--hide { display: none;}.var-pagination__item--simple { background: transparent; border-radius: var(--pagination-item-simple-border-radius);}.var-pagination__item--disabled { cursor: not-allowed !important; color: var(--pagination-disabled-color); background-color: unset; box-shadow: none !important;}.var-pagination__item--disabled:hover { background-color: unset;}.var-pagination__item--disabled--active { background-color: var(--pagination-bg-disabled-color);}.var-pagination__item--disabled--active:hover { background-color: var(--pagination-bg-disabled-color);}.var-pagination__prev { margin-left: 0;}.var-pagination__total { display: flex; white-space: nowrap; align-items: center; line-height: var(--pagination-total-line-height); margin: var(--pagination-total-margin);}.var-pagination__size { display: flex; white-space: nowrap; align-items: center; height: var(--pagination-item-height); line-height: var(--pagination-size-line-height); margin: var(--pagination-item-margin); padding: var(--pagination-size-padding); cursor: pointer;}.var-pagination__size--open { display: flex; align-items: center; cursor: pointer;}.var-pagination__size--open--disabled { cursor: inherit;}.var-pagination__quickly,.var-pagination__simple { display: flex; white-space: nowrap; align-items: center;}.var-pagination__quickly [var-pagination-cover],.var-pagination__simple [var-pagination-cover] { width: var(--pagination-input-width);}.var-pagination__quickly [var-pagination-cover] .var-field-decorator__middle,.var-pagination__simple [var-pagination-cover] .var-field-decorator__middle { padding: 0;}.var-pagination__quickly [var-pagination-cover] .var-input__input,.var-pagination__simple [var-pagination-cover] .var-input__input { height: auto; text-align: center; font-weight: normal; font-size: var(--pagination-font-size); padding-top: 1px;}.var-pagination__quickly-line,.var-pagination__simple-line { height: 1px; background: transparent;}.var-pagination__quickly { margin: var(--pagination-quick-jumper-margin);}.var-pagination__quickly [var-pagination-cover] { margin-left: 6px;}.var-pagination__size--open-icon[var-pagination-cover] { font-size: inherit;}

package/es/radio/Radio.mjs

@@ -12,7 +12,8 @@ import { props } from "./props.mjs";
 import { useRadioGroup } from "./provide.mjs";
 const { name, n, classes } = createNamespace("radio");
 import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, mergeProps as _mergeProps, createElementVNode as _createElementVNode } from "vue";
-const _hoisted_1 = ["tabindex"];
+const _hoisted_1 = ["aria-checked"];
+const _hoisted_2 = ["tabindex"];
 function __render__(_ctx, _cache) {
   const _component_var_icon = _resolveComponent("var-icon");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -25,75 +26,71 @@ function __render__(_ctx, _cache) {
       class: _normalizeClass(_ctx.n("wrap"))
     },
     [
-      _createElementVNode(
-        "div",
-        _mergeProps({
-          class: _ctx.n()
-        }, _ctx.$attrs, {
-          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
-        }),
-        [
-          _withDirectives((_openBlock(), _createElementBlock("div", {
-            ref: "action",
+      _createElementVNode("div", _mergeProps({
+        role: "radio",
+        "aria-checked": _ctx.checked,
+        class: _ctx.n()
+      }, _ctx.$attrs, {
+        onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+      }), [
+        _withDirectives((_openBlock(), _createElementBlock("div", {
+          ref: "action",
+          class: _normalizeClass(
+            _ctx.classes(
+              _ctx.n("action"),
+              [_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")],
+              [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
+              [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+            )
+          ),
+          tabindex: _ctx.tabIndex,
+          style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor }),
+          onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+          onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+        }, [
+          _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
+            _createVNode(_component_var_icon, {
+              class: _normalizeClass(_ctx.n("icon")),
+              "var-radio-cover": "",
+              name: "radio-marked",
+              size: _ctx.iconSize
+            }, null, 8, ["class", "size"])
+          ]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
+            _createVNode(_component_var_icon, {
+              class: _normalizeClass(_ctx.n("icon")),
+              "var-radio-cover": "",
+              name: "radio-blank",
+              size: _ctx.iconSize
+            }, null, 8, ["class", "size"])
+          ]),
+          _createVNode(_component_var_hover_overlay, {
+            hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
+            focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
+          }, null, 8, ["hovering", "focusing"])
+        ], 46, _hoisted_2)), [
+          [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
+          [_directive_hover, _ctx.handleHovering, "desktop"]
+        ]),
+        _ctx.$slots.default ? (_openBlock(), _createElementBlock(
+          "div",
+          {
+            key: 0,
             class: _normalizeClass(
               _ctx.classes(
-                _ctx.n("action"),
-                [_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")],
+                _ctx.n("text"),
                 [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
                 [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
               )
             ),
-            tabindex: _ctx.formDisabled || _ctx.disabled ? void 0 : "0",
-            style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor }),
-            onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
-            onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
-          }, [
-            _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
-              _createVNode(_component_var_icon, {
-                class: _normalizeClass(_ctx.n("icon")),
-                "var-radio-cover": "",
-                name: "radio-marked",
-                size: _ctx.iconSize
-              }, null, 8, ["class", "size"])
-            ]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
-              _createVNode(_component_var_icon, {
-                class: _normalizeClass(_ctx.n("icon")),
-                "var-radio-cover": "",
-                name: "radio-blank",
-                size: _ctx.iconSize
-              }, null, 8, ["class", "size"])
-            ]),
-            _createVNode(_component_var_hover_overlay, {
-              hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
-              focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
-            }, null, 8, ["hovering", "focusing"])
-          ], 46, _hoisted_1)), [
-            [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
-            [_directive_hover, _ctx.handleHovering, "desktop"]
-          ]),
-          _ctx.$slots.default ? (_openBlock(), _createElementBlock(
-            "div",
-            {
-              key: 0,
-              class: _normalizeClass(
-                _ctx.classes(
-                  _ctx.n("text"),
-                  [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
-                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
-                )
-              ),
-              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
-            },
-            [
-              _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
-            ],
-            2
-            /* CLASS */
-          )) : _createCommentVNode("v-if", true)
-        ],
-        16
-        /* FULL_PROPS */
-      ),
+            onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
+          },
+          [
+            _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
+          ],
+          2
+          /* CLASS */
+        )) : _createCommentVNode("v-if", true)
+      ], 16, _hoisted_1),
       _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
     ],
     2
@@ -118,6 +115,18 @@ const __sfc__ = defineComponent({
     const { radioGroup, bindRadioGroup } = useRadioGroup();
     const { hovering, handleHovering } = useHoverOverlay();
     const { form, bindForm } = useForm();
+    const tabIndex = computed(() => {
+      const disabled = (form == null ? void 0 : form.disabled.value) || props2.disabled;
+      const isChecked = checked.value;
+      const hasCheckedInRadioGroup = radioGroup == null ? void 0 : radioGroup.hasChecked.value;
+      if (disabled) {
+        return;
+      }
+      if (radioGroup && hasCheckedInRadioGroup && !isChecked) {
+        return "-1";
+      }
+      return "0";
+    });
     const {
       errorMessage,
       validateWithTrigger: vt,
@@ -197,7 +206,9 @@ const __sfc__ = defineComponent({
     }
     function sync(v2) {
       const { checkedValue, uncheckedValue } = props2;
-      value.value = v2 === checkedValue ? checkedValue : uncheckedValue;
+      const checked2 = v2 === checkedValue;
+      value.value = checked2 ? checkedValue : uncheckedValue;
+      return checked2;
     }
     function reset() {
       value.value = props2.uncheckedValue;
@@ -223,6 +234,7 @@ const __sfc__ = defineComponent({
       formDisabled: form == null ? void 0 : form.disabled,
       formReadonly: form == null ? void 0 : form.readonly,
       hovering,
+      tabIndex,
       handleHovering,
       n,
       classes,