@retailcrm/embed-ui-v1-components 0.9.14 → 0.9.15

package/dist/remote.js

@@ -1,5 +1,5 @@
-import { defineRemoteComponent, defineRemoteMethod, nextTick, createRemoteRoot } from "@omnicajs/vue-remote/remote";
-import { openBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, unref, withCtx, isVNode, Comment, Text, Fragment, getCurrentInstance, ref, computed, watch, h, reactive, inject, useTemplateRef, provide, createBlock, onBeforeMount, onBeforeUnmount, createSlots, onMounted } from "vue";
+import { defineRemoteComponent, defineRemoteMethod, withKeys, withModifiers, nextTick, createRemoteRoot } from "@omnicajs/vue-remote/remote";
+import { openBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, unref, withCtx, useTemplateRef, ref, computed, watch, createBlock, inject, useSlots, onBeforeMount, onBeforeUnmount, Fragment, provide, renderList, createSlots, isVNode, Comment, Text, getCurrentInstance, h, reactive, onMounted } from "vue";
 import isEqual from "lodash.isequal";
 import { preview } from "@retailcrm/image-preview";
 import { ru, es, enGB } from "date-fns/locale";
@@ -122,13 +122,13 @@ const UiError = defineRemoteComponent(
   UiErrorType,
   ["click", "focus", "blur"]
 );
-const _hoisted_1$5 = {
+const _hoisted_1$7 = {
   xmlns: "http://www.w3.org/2000/svg",
   fill: "currentColor",
   viewBox: "0 0 24 24"
 };
 function render$2(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [
+  return openBlock(), createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
     createElementVNode("path", {
       "fill-rule": "evenodd",
       d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10A10 10 0 0 0 12 2m1 15.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5zm.88-5.21a2.89 2.89 0 0 0 2-2.73V9A2.88 2.88 0 0 0 13 6.12h-2A2.88 2.88 0 0 0 8.12 9v.5a.5.5 0 0 0 .5.5h.76a.5.5 0 0 0 .5-.5V9c0-.619.501-1.12 1.12-1.12h2A1.12 1.12 0 0 1 14.16 9v.56a1.13 1.13 0 0 1-.76 1.07l-.95.31a1.88 1.88 0 0 0-1.29 1.78v.78a.5.5 0 0 0 .5.5h.76a.5.5 0 0 0 .5-.5v-.78c0-.053.032-.1.08-.12z",
@@ -145,23 +145,23 @@ const UiPopperTargetType = "UiPopperTarget";
 const UiPopperTarget = defineRemoteComponent(UiPopperTargetType);
 const UiTooltipType = "UiTooltip";
 const UiTooltip = defineRemoteComponent(UiTooltipType);
-const _hoisted_1$4 = { class: "ui-v1-field__headline" };
-const _hoisted_2$1 = ["id", "for"];
-const _hoisted_3$1 = {
+const _hoisted_1$6 = { class: "ui-v1-field__headline" };
+const _hoisted_2$3 = ["id", "for"];
+const _hoisted_3$3 = {
   key: 0,
   class: "ui-v1-field__required-mark",
   "aria-hidden": "true"
 };
-const _hoisted_4 = {
+const _hoisted_4$1 = {
   key: 1,
   class: "ui-v1-field__hint"
 };
-const _hoisted_5 = {
+const _hoisted_5$1 = {
   key: 2,
   class: "ui-v1-field__addon"
 };
 const _hoisted_6 = { class: "ui-v1-field__control" };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -219,7 +219,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           "ui-v1-field_readonly": __props.readonly
         }
       }, _ctx.$attrs), [
-        createElementVNode("div", _hoisted_1$4, [
+        createElementVNode("div", _hoisted_1$6, [
           __props.label || _ctx.$slots.label ? (openBlock(), createElementBlock("label", {
             key: 0,
             id: `${__props.id}-label`,
@@ -229,9 +229,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "label", {}, () => [
               createTextVNode(toDisplayString(__props.label), 1)
             ]),
-            __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$1, " * ")) : createCommentVNode("", true)
-          ], 8, _hoisted_2$1)) : createCommentVNode("", true),
-          __props.hint || _ctx.$slots.hint ? (openBlock(), createElementBlock("span", _hoisted_4, [
+            __props.required ? (openBlock(), createElementBlock("span", _hoisted_3$3, " * ")) : createCommentVNode("", true)
+          ], 8, _hoisted_2$3)) : createCommentVNode("", true),
+          __props.hint || _ctx.$slots.hint ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
             createVNode(unref(UiPopperConnector), null, {
               default: withCtx(() => [
                 createVNode(unref(UiPopperTarget), {
@@ -269,7 +269,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               _: 3
             })
           ])) : createCommentVNode("", true),
-          _ctx.$slots.addon ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          _ctx.$slots.addon ? (openBlock(), createElementBlock("div", _hoisted_5$1, [
             renderSlot(_ctx.$slots, "addon")
           ])) : createCommentVNode("", true)
         ]),
@@ -387,11 +387,566 @@ const UiNumberStepper = defineRemoteComponent(
     "violation"
   ]
 );
+const events$1 = [
+  "blur",
+  "change",
+  "focus",
+  "keydown",
+  "update:value"
+];
+const UiPageHeaderTitleType = "UiPageHeaderTitle";
+const UiPageHeaderTitle = defineRemoteComponent(UiPageHeaderTitleType, {
+  emits: events$1,
+  methods: {
+    focus: defineRemoteMethod(),
+    blur: defineRemoteMethod()
+  }
+});
+const _hoisted_1$5 = { class: "ui-v1-page-header__main" };
+const _hoisted_2$2 = {
+  key: 0,
+  class: "ui-v1-page-header__addon"
+};
+const _hoisted_3$2 = {
+  key: 0,
+  class: "ui-v1-page-header__actions"
+};
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "UiPageHeader",
+  props: {
+    /** Уникальный идентификатор корневого элемента */
+    id: {
+      type: null,
+      default: void 0
+    },
+    /** Текст заголовка */
+    value: {
+      type: null,
+      default: ""
+    },
+    /** Плейсхолдер, отображаемый при отсутствии текста */
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    /** Текст ошибки для tooltip при пустом невалидном заголовке */
+    error: {
+      type: String,
+      default: ""
+    },
+    /** Разрешает перейти в режим редактирования по клику */
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    /** Автоматически переводит фокус во встроенный UiTextbox при входе в режим редактирования */
+    autofocus: {
+      type: Boolean,
+      default: false
+    },
+    /** Автоматически выделяет текст заголовка при фокусе на встроенном поле */
+    autoselect: {
+      type: Boolean,
+      default: true
+    },
+    /** Делает встроенное поле только для чтения */
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+    /** Полностью отключает заголовок */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /** Помечает встроенное поле как невалидное */
+    invalid: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["blur", "change", "focus", "keydown", "update:value"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const header = useTemplateRef("header");
+    const valueState = ref(props.value === null ? "" : String(props.value));
+    const displayInvalid = computed(() => props.invalid && valueState.value === "");
+    watch(() => props.value, (nextValue) => {
+      valueState.value = nextValue === null ? "" : String(nextValue);
+    });
+    const onUpdateValue = (value) => {
+      valueState.value = String(value);
+      emit("update:value", value);
+    };
+    __expose({
+      focus: () => header.value?.focus(),
+      blur: () => header.value?.blur()
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", mergeProps({
+        class: {
+          "ui-v1-page-header": true,
+          "ui-v1-page-header_disabled": __props.disabled,
+          "ui-v1-page-header_invalid": displayInvalid.value,
+          "ui-v1-page-header_readonly": __props.readonly
+        }
+      }, _ctx.$attrs), [
+        createElementVNode("div", _hoisted_1$5, [
+          createVNode(unref(UiPopperConnector), null, {
+            default: withCtx(() => [
+              createVNode(unref(UiPopperTarget), {
+                tag: "div",
+                class: "ui-v1-page-header__title"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(UiPageHeaderTitle), {
+                    id: __props.id,
+                    ref_key: "header",
+                    ref: header,
+                    value: valueState.value,
+                    placeholder: __props.placeholder,
+                    error: __props.error,
+                    invalid: __props.invalid,
+                    editable: __props.editable,
+                    autofocus: __props.autofocus,
+                    autoselect: __props.autoselect,
+                    readonly: __props.readonly,
+                    disabled: __props.disabled,
+                    onBlur: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("blur", $event)),
+                    onChange: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("change", $event)),
+                    onFocus: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("focus", $event)),
+                    onKeydown: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("keydown", $event)),
+                    "onUpdate:value": onUpdateValue
+                  }, null, 8, ["id", "value", "placeholder", "error", "invalid", "editable", "autofocus", "autoselect", "readonly", "disabled"])
+                ]),
+                _: 1
+              }),
+              displayInvalid.value && __props.error ? (openBlock(), createBlock(unref(UiTooltip), {
+                key: 0,
+                "target-triggers": {
+                  hide: [""]
+                },
+                "offset-main-axis": 8,
+                visible: "",
+                placement: "right"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(__props.error), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }),
+          _ctx.$slots.addon ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+            renderSlot(_ctx.$slots, "addon")
+          ])) : createCommentVNode("", true)
+        ]),
+        _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+          renderSlot(_ctx.$slots, "actions")
+        ])) : createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
 const UiRadioType = "UiRadio";
 const UiRadio = defineRemoteComponent(
   UiRadioType,
   ["click", "focus", "blur"]
 );
+const _hoisted_1$4 = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 24 24"
+};
+function render$1(_ctx, _cache) {
+  return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [
+    createElementVNode("path", {
+      fill: "currentColor",
+      "fill-rule": "evenodd",
+      d: "M2 12C2 6.477 6.477 2 12 2A10 10 0 1 1 2 12m8.73 3.35 5.62-5.62a.5.5 0 0 0 0-.69l-.53-.53a.5.5 0 0 0-.7 0l-4.74 4.74-1.5-1.49a.48.48 0 0 0-.7 0l-.53.53a.5.5 0 0 0 0 .71l2.38 2.35a.48.48 0 0 0 .7 0",
+      "clip-rule": "evenodd"
+    }, null, -1)
+  ])]);
+}
+const IconCheckmarkCircle = { render: render$1 };
+var APPEARANCE = /* @__PURE__ */ ((APPEARANCE2) => {
+  APPEARANCE2["DEFAULT"] = "default";
+  APPEARANCE2["SECTION"] = "section";
+  return APPEARANCE2;
+})(APPEARANCE || {});
+var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
+  SIZE2["SM"] = "sm";
+  SIZE2["MD"] = "md";
+  SIZE2["LG"] = "lg";
+  return SIZE2;
+})(SIZE$2 || {});
+const AppearanceKey = Symbol("UiRadioSwitchAppearance");
+const SizeKey = Symbol("UiRadioSwitchSize");
+const RegistryKey = Symbol("UiRadioSwitchRegistry");
+const UpdateKey = Symbol("UiRadioSwitchUpdate");
+const FocusableIdKey = Symbol("UiRadioSwitchFocusableId");
+const SetFocusableIdKey = Symbol("UiRadioSwitchSetFocusableId");
+const MoveFocusKey = Symbol("UiRadioSwitchMoveFocus");
+const useAppearance = () => inject(AppearanceKey, computed(() => APPEARANCE.DEFAULT));
+const useSize = () => inject(SizeKey, computed(() => SIZE$2.MD));
+const useRegistry = () => inject(RegistryKey, {
+  register: () => {
+  },
+  unregister: () => {
+  }
+});
+const useUpdate = () => inject(UpdateKey, () => {
+});
+const useFocusableId = () => inject(FocusableIdKey, computed(() => null));
+const useSetFocusableId = () => inject(SetFocusableIdKey, () => {
+});
+const useMoveFocus = () => inject(MoveFocusKey, () => {
+});
+const UiRadioSwitchRootType = "UiRadioSwitchRoot";
+const UiRadioSwitchRoot = defineRemoteComponent(UiRadioSwitchRootType);
+const UiRadioSwitchOptionShellType = "UiRadioSwitchOptionShell";
+const UiRadioSwitchOptionShell = defineRemoteComponent(UiRadioSwitchOptionShellType, {
+  emits: [
+    "click",
+    "focus",
+    "blur",
+    "keydown"
+  ],
+  methods: {
+    focus: defineRemoteMethod(),
+    blur: defineRemoteMethod()
+  }
+});
+const _hoisted_1$3 = { class: "ui-v1-radio-switch-option__head" };
+const _hoisted_2$1 = {
+  key: 0,
+  class: "ui-v1-radio-switch-option__icon"
+};
+const _hoisted_3$1 = {
+  key: 1,
+  class: "ui-v1-radio-switch-option__label"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "ui-v1-radio-switch-option__description"
+};
+const _hoisted_5 = {
+  key: 1,
+  class: "ui-v1-radio-switch-option__done"
+};
+let counter$1 = 0;
+const __default__ = {};
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  ...{
+    inheritAttrs: false
+  },
+  __name: "UiRadioSwitchOption",
+  props: {
+    /** Идентификатор */
+    id: {
+      type: String,
+      default: () => "ui-v1-radio-switch-option-" + ++counter$1
+    },
+    /** Заголовок */
+    label: {
+      type: String,
+      default: ""
+    },
+    /** Значение опции */
+    value: {
+      type: null,
+      required: true
+    },
+    /** Используется только c appearance=section */
+    description: {
+      type: String,
+      default: ""
+    },
+    /** Индикатор, заблокирована опция или нет */
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const appearance = useAppearance();
+    const focusableId = useFocusableId();
+    const moveFocus = useMoveFocus();
+    const shell = useTemplateRef("shell");
+    const size = useSize();
+    const registry = useRegistry();
+    const setFocusableId = useSetFocusableId();
+    const update = useUpdate();
+    const checked = ref(false);
+    const tabIndex = computed(() => {
+      return !props.disabled && focusableId.value === props.id ? 0 : -1;
+    });
+    const onClick = () => {
+      if (!props.disabled) {
+        setFocusableId(props.id);
+        update(props.value);
+      }
+    };
+    const onFocus = () => {
+      if (!props.disabled) {
+        setFocusableId(props.id);
+      }
+    };
+    const onKeyDown = (event) => {
+      if (props.disabled) {
+        return;
+      }
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          setFocusableId(props.id);
+          update(props.value);
+          return;
+        case "ArrowDown":
+        case "ArrowRight":
+          void moveFocus(props.id, "next");
+          return;
+        case "ArrowUp":
+        case "ArrowLeft":
+          void moveFocus(props.id, "prev");
+          return;
+        case "Home":
+          void moveFocus(props.id, "first");
+          return;
+        case "End":
+          void moveFocus(props.id, "last");
+          return;
+      }
+    };
+    onBeforeMount(() => {
+      registry.register(props.id, {
+        getValue: () => props.value,
+        checked,
+        disabled: () => props.disabled,
+        focus: () => shell.value?.focus()
+      });
+    });
+    onBeforeUnmount(() => {
+      registry.unregister(props.id);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiRadioSwitchOptionShell), mergeProps({
+        id: __props.id,
+        ref_key: "shell",
+        ref: shell,
+        appearance: unref(appearance),
+        size: unref(size),
+        checked: checked.value,
+        disabled: __props.disabled,
+        tabindex: tabIndex.value
+      }, _ctx.$attrs, {
+        onClick,
+        onFocus,
+        onKeydown: [
+          withKeys(withModifiers(onKeyDown, ["prevent"]), ["space"]),
+          withKeys(withModifiers(onKeyDown, ["prevent"]), ["enter"]),
+          withKeys(withModifiers(onKeyDown, ["prevent"]), ["left"]),
+          withKeys(withModifiers(onKeyDown, ["prevent"]), ["right"]),
+          withKeys(withModifiers(onKeyDown, ["prevent"]), ["up"]),
+          withKeys(withModifiers(onKeyDown, ["prevent"]), ["down"]),
+          withKeys(withModifiers(onKeyDown, ["prevent"]), ["home"]),
+          withKeys(withModifiers(onKeyDown, ["prevent"]), ["end"])
+        ]
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createElementVNode("div", _hoisted_1$3, [
+              "icon" in unref(slots) ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
+                renderSlot(_ctx.$slots, "icon")
+              ])) : createCommentVNode("", true),
+              "label" in unref(slots) || __props.label ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+                renderSlot(_ctx.$slots, "label", {}, () => [
+                  createTextVNode(toDisplayString(__props.label), 1)
+                ])
+              ])) : createCommentVNode("", true)
+            ]),
+            unref(appearance) === unref(APPEARANCE).SECTION ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              "description" in unref(slots) || __props.description ? (openBlock(), createElementBlock("div", _hoisted_4, [
+                renderSlot(_ctx.$slots, "description", {}, () => [
+                  createTextVNode(toDisplayString(__props.description), 1)
+                ])
+              ])) : createCommentVNode("", true),
+              checked.value ? (openBlock(), createElementBlock("div", _hoisted_5, [
+                renderSlot(_ctx.$slots, "checkmark", {}, () => [
+                  createVNode(unref(IconCheckmarkCircle))
+                ])
+              ])) : createCommentVNode("", true)
+            ], 64)) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      }, 16, ["id", "appearance", "size", "checked", "disabled", "tabindex", "onKeydown"]);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "UiRadioSwitch",
+  props: {
+    /** Выбранное значение */
+    value: {
+      type: null,
+      default: null
+    },
+    /** Список опций */
+    options: {
+      type: Array,
+      default: () => []
+    },
+    /** Предикат равенства */
+    equalFn: {
+      type: Function,
+      default: (a, b) => a === b
+    },
+    /** Внешний вид */
+    appearance: {
+      type: String,
+      default: APPEARANCE.DEFAULT,
+      validator: (appearance) => Object.values(APPEARANCE).includes(appearance)
+    },
+    /** Размер */
+    size: {
+      type: String,
+      default: SIZE$2.MD,
+      validator: (size) => Object.values(SIZE$2).includes(size)
+    },
+    /** Растягивание контейнера в зависимости от контента */
+    rubber: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["change", "update:value"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const registry = /* @__PURE__ */ new Map();
+    const focusableId = ref(null);
+    const getEnabledEntries = () => {
+      return Array.from(registry.entries()).filter(([, option]) => !option.disabled());
+    };
+    const syncFocusableId = (preferredId) => {
+      const enabledEntries = getEnabledEntries();
+      const enabledIds = new Set(enabledEntries.map(([id]) => id));
+      const selectedEntry = enabledEntries.find(([, option]) => option.checked.value);
+      if (preferredId && enabledIds.has(preferredId)) {
+        focusableId.value = preferredId;
+        return;
+      }
+      if (focusableId.value && enabledIds.has(focusableId.value)) {
+        return;
+      }
+      focusableId.value = selectedEntry?.[0] ?? enabledEntries[0]?.[0] ?? null;
+    };
+    provide(AppearanceKey, computed(() => props.appearance));
+    provide(FocusableIdKey, computed(() => focusableId.value));
+    provide(SizeKey, computed(() => props.size));
+    provide(SetFocusableIdKey, (id) => {
+      syncFocusableId(id);
+    });
+    provide(RegistryKey, {
+      register: (id, option) => {
+        if (registry.has(id)) {
+          return;
+        }
+        option.checked.value = props.equalFn(option.getValue(), props.value);
+        registry.set(id, option);
+        syncFocusableId(option.checked.value ? id : focusableId.value);
+      },
+      unregister: (id) => {
+        registry.delete(id);
+        if (focusableId.value === id) {
+          syncFocusableId();
+        }
+      }
+    });
+    provide(UpdateKey, (newValue) => {
+      emit("change", newValue);
+      emit("update:value", newValue);
+    });
+    provide(MoveFocusKey, async (id, direction) => {
+      const enabledEntries = getEnabledEntries();
+      if (!enabledEntries.length) {
+        focusableId.value = null;
+        return;
+      }
+      let targetEntry = enabledEntries[0];
+      if (direction === "first") {
+        targetEntry = enabledEntries[0];
+      } else if (direction === "last") {
+        targetEntry = enabledEntries.at(-1) ?? enabledEntries[0];
+      } else {
+        const currentIndex = enabledEntries.findIndex(([entryId]) => entryId === id);
+        const fallbackIndex = focusableId.value ? enabledEntries.findIndex(([entryId]) => entryId === focusableId.value) : -1;
+        const baseIndex = currentIndex === -1 ? Math.max(fallbackIndex, 0) : currentIndex;
+        const offset = direction === "next" ? 1 : -1;
+        const nextIndex = (baseIndex + offset + enabledEntries.length) % enabledEntries.length;
+        targetEntry = enabledEntries[nextIndex] ?? enabledEntries[0];
+      }
+      if (!targetEntry) {
+        return;
+      }
+      const [targetId, target] = targetEntry;
+      focusableId.value = targetId;
+      emit("change", target.getValue());
+      emit("update:value", target.getValue());
+      await target.focus();
+    });
+    watch([() => props.value, () => props.equalFn], ([newValue]) => {
+      let selectedId = null;
+      Array.from(registry.values()).forEach((option) => {
+        option.checked.value = props.equalFn(option.getValue(), newValue);
+      });
+      selectedId = Array.from(registry.entries()).find(([, option]) => {
+        return option.checked.value && !option.disabled();
+      })?.[0] ?? null;
+      syncFocusableId(selectedId);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiRadioSwitchRoot), mergeProps({
+        appearance: __props.appearance,
+        size: __props.size,
+        rubber: __props.rubber
+      }, _ctx.$attrs), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+              return openBlock(), createBlock(_sfc_main$7, {
+                key: `${option.label}-${index}`,
+                label: option.label,
+                value: option.value,
+                disabled: option.disabled
+              }, createSlots({ _: 2 }, [
+                _ctx.$slots.icon ? {
+                  name: "icon",
+                  fn: withCtx(() => [
+                    renderSlot(_ctx.$slots, "icon", { option })
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["label", "value", "disabled"]);
+            }), 128))
+          ])
+        ]),
+        _: 3
+      }, 16, ["appearance", "size", "rubber"]);
+    };
+  }
+});
 const UiScrollBoxType = "UiScrollBox";
 const UiScrollBox = defineRemoteComponent(
   UiScrollBoxType,
@@ -413,6 +968,30 @@ const UiSwitch = defineRemoteComponent(
   UiSwitchType,
   ["click", "focus", "blur"]
 );
+const UiTabGroupType = "UiTabGroup";
+const UiTabType = "UiTab";
+const UiTab = defineRemoteComponent(
+  UiTabType,
+  [],
+  [
+    "default",
+    "icon",
+    "label",
+    "counter",
+    "content"
+  ]
+);
+const UiTabGroup = defineRemoteComponent(
+  UiTabGroupType,
+  [
+    "layout",
+    "change",
+    "update:activeId",
+    "update:focusableId",
+    "update:menuExpanded"
+  ],
+  ["default"]
+);
 var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
   ALIGN2["LEFT"] = "left";
   ALIGN2["CENTER"] = "center";
@@ -1321,7 +1900,7 @@ const UiSelectOptionType = "UiSelectOption";
 defineRemoteComponent(
   UiSelectOptionType
 );
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "ui-v1-select__no-results-text"
 };
@@ -1714,7 +2293,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             onHide: close
           }, {
             default: withCtx(() => [
-              __props.filterable && optionsRegistry.value.every((o) => !o.isMatched()) && noResult.value ? (openBlock(), createElementBlock("div", _hoisted_1$3, toDisplayString(noResult.value), 1)) : createCommentVNode("", true),
+              __props.filterable && optionsRegistry.value.every((o) => !o.isMatched()) && noResult.value ? (openBlock(), createElementBlock("div", _hoisted_1$2, toDisplayString(noResult.value), 1)) : createCommentVNode("", true),
               renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
@@ -1725,21 +2304,6 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
-function render$1(_ctx, _cache) {
-  return openBlock(), createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
-    createElementVNode("path", {
-      fill: "currentColor",
-      "fill-rule": "evenodd",
-      d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10A10 10 0 0 0 12 2m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16m1-9h2.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H13v2.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V13H8.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5H11V8.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z",
-      "clip-rule": "evenodd"
-    }, null, -1)
-  ])]);
-}
-const IconAddCircleOutlined = { render: render$1 };
 const _hoisted_1$1 = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24"
@@ -1749,12 +2313,12 @@ function render(_ctx, _cache) {
     createElementVNode("path", {
       fill: "currentColor",
       "fill-rule": "evenodd",
-      d: "M2 12C2 6.477 6.477 2 12 2A10 10 0 1 1 2 12m8.73 3.35 5.62-5.62a.5.5 0 0 0 0-.69l-.53-.53a.5.5 0 0 0-.7 0l-4.74 4.74-1.5-1.49a.48.48 0 0 0-.7 0l-.53.53a.5.5 0 0 0 0 .71l2.38 2.35a.48.48 0 0 0 .7 0",
+      d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10A10 10 0 0 0 12 2m0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16m1-9h2.5a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H13v2.5a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5V13H8.5a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5H11V8.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z",
       "clip-rule": "evenodd"
     }, null, -1)
   ])]);
 }
-const IconCheckmarkCircle = { render };
+const IconAddCircleOutlined = { render };
 var SIZE = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["XS"] = "xs";
   SIZE2["SM"] = "sm";
@@ -2098,13 +2662,19 @@ const createEndpointRoot = async (channel) => {
     "UiModalWindow",
     "UiModalWindowSurface",
     "UiNumberStepper",
+    "UiPageHeader",
+    "UiPageHeaderTitle",
     "UiPopper",
     "UiPopperConnector",
     "UiPopperTarget",
     "UiRadio",
+    "UiRadioSwitchOptionShell",
+    "UiRadioSwitchRoot",
     "UiScrollBox",
     "UiSlider",
     "UiSwitch",
+    "UiTab",
+    "UiTabGroup",
     "UiSelectPopper",
     "UiSelectTrigger",
     "UiTableBodyCell",
@@ -2210,7 +2780,7 @@ export {
   UiDateType,
   UiError,
   UiErrorType,
-  _sfc_main$6 as UiField,
+  _sfc_main$9 as UiField,
   UiInfobox,
   UiInfoboxType,
   UiLink,
@@ -2229,6 +2799,7 @@ export {
   UiModalWindowType,
   UiNumberStepper,
   UiNumberStepperType,
+  _sfc_main$8 as UiPageHeader,
   UiPopper,
   UiPopperConnector,
   UiPopperConnectorType,
@@ -2236,6 +2807,8 @@ export {
   UiPopperTargetType,
   UiPopperType,
   UiRadio,
+  _sfc_main$6 as UiRadioSwitch,
+  _sfc_main$7 as UiRadioSwitchOption,
   UiRadioType,
   UiScrollBox,
   UiScrollBoxType,
@@ -2246,6 +2819,10 @@ export {
   UiSliderType,
   UiSwitch,
   UiSwitchType,
+  UiTab,
+  UiTabGroup,
+  UiTabGroupType,
+  UiTabType,
   _sfc_main$4 as UiTable,
   UiTableBodyCell,
   _sfc_main$5 as UiTableColumn,