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

package/dist/remote.cjs

@@ -124,13 +124,13 @@ const UiError = remote.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 vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [
+  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [
     vue.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",
@@ -147,23 +147,23 @@ const UiPopperTargetType = "UiPopperTarget";
 const UiPopperTarget = remote.defineRemoteComponent(UiPopperTargetType);
 const UiTooltipType = "UiTooltip";
 const UiTooltip = remote.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__ */ vue.defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -221,7 +221,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
           "ui-v1-field_readonly": __props.readonly
         }
       }, _ctx.$attrs), [
-        vue.createElementVNode("div", _hoisted_1$4, [
+        vue.createElementVNode("div", _hoisted_1$6, [
           __props.label || _ctx.$slots.label ? (vue.openBlock(), vue.createElementBlock("label", {
             key: 0,
             id: `${__props.id}-label`,
@@ -231,9 +231,9 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "label", {}, () => [
               vue.createTextVNode(vue.toDisplayString(__props.label), 1)
             ]),
-            __props.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$1, " * ")) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_2$1)) : vue.createCommentVNode("", true),
-          __props.hint || _ctx.$slots.hint ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, [
+            __props.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$3, " * ")) : vue.createCommentVNode("", true)
+          ], 8, _hoisted_2$3)) : vue.createCommentVNode("", true),
+          __props.hint || _ctx.$slots.hint ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, [
             vue.createVNode(vue.unref(UiPopperConnector), null, {
               default: vue.withCtx(() => [
                 vue.createVNode(vue.unref(UiPopperTarget), {
@@ -271,7 +271,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
               _: 3
             })
           ])) : vue.createCommentVNode("", true),
-          _ctx.$slots.addon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+          _ctx.$slots.addon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5$1, [
             vue.renderSlot(_ctx.$slots, "addon")
           ])) : vue.createCommentVNode("", true)
         ]),
@@ -389,11 +389,566 @@ const UiNumberStepper = remote.defineRemoteComponent(
     "violation"
   ]
 );
+const events$1 = [
+  "blur",
+  "change",
+  "focus",
+  "keydown",
+  "update:value"
+];
+const UiPageHeaderTitleType = "UiPageHeaderTitle";
+const UiPageHeaderTitle = remote.defineRemoteComponent(UiPageHeaderTitleType, {
+  emits: events$1,
+  methods: {
+    focus: remote.defineRemoteMethod(),
+    blur: remote.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__ */ vue.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 = vue.useTemplateRef("header");
+    const valueState = vue.ref(props.value === null ? "" : String(props.value));
+    const displayInvalid = vue.computed(() => props.invalid && valueState.value === "");
+    vue.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 vue.openBlock(), vue.createElementBlock("div", vue.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), [
+        vue.createElementVNode("div", _hoisted_1$5, [
+          vue.createVNode(vue.unref(UiPopperConnector), null, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(UiPopperTarget), {
+                tag: "div",
+                class: "ui-v1-page-header__title"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.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 ? (vue.openBlock(), vue.createBlock(vue.unref(UiTooltip), {
+                key: 0,
+                "target-triggers": {
+                  hide: [""]
+                },
+                "offset-main-axis": 8,
+                visible: "",
+                placement: "right"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(__props.error), 1)
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true)
+            ]),
+            _: 1
+          }),
+          _ctx.$slots.addon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
+            vue.renderSlot(_ctx.$slots, "addon")
+          ])) : vue.createCommentVNode("", true)
+        ]),
+        _ctx.$slots.actions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$2, [
+          vue.renderSlot(_ctx.$slots, "actions")
+        ])) : vue.createCommentVNode("", true)
+      ], 16);
+    };
+  }
+});
 const UiRadioType = "UiRadio";
 const UiRadio = remote.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 vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [
+    vue.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 = () => vue.inject(AppearanceKey, vue.computed(() => APPEARANCE.DEFAULT));
+const useSize = () => vue.inject(SizeKey, vue.computed(() => SIZE$2.MD));
+const useRegistry = () => vue.inject(RegistryKey, {
+  register: () => {
+  },
+  unregister: () => {
+  }
+});
+const useUpdate = () => vue.inject(UpdateKey, () => {
+});
+const useFocusableId = () => vue.inject(FocusableIdKey, vue.computed(() => null));
+const useSetFocusableId = () => vue.inject(SetFocusableIdKey, () => {
+});
+const useMoveFocus = () => vue.inject(MoveFocusKey, () => {
+});
+const UiRadioSwitchRootType = "UiRadioSwitchRoot";
+const UiRadioSwitchRoot = remote.defineRemoteComponent(UiRadioSwitchRootType);
+const UiRadioSwitchOptionShellType = "UiRadioSwitchOptionShell";
+const UiRadioSwitchOptionShell = remote.defineRemoteComponent(UiRadioSwitchOptionShellType, {
+  emits: [
+    "click",
+    "focus",
+    "blur",
+    "keydown"
+  ],
+  methods: {
+    focus: remote.defineRemoteMethod(),
+    blur: remote.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__ */ vue.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 = vue.useSlots();
+    const appearance = useAppearance();
+    const focusableId = useFocusableId();
+    const moveFocus = useMoveFocus();
+    const shell = vue.useTemplateRef("shell");
+    const size = useSize();
+    const registry = useRegistry();
+    const setFocusableId = useSetFocusableId();
+    const update = useUpdate();
+    const checked = vue.ref(false);
+    const tabIndex = vue.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;
+      }
+    };
+    vue.onBeforeMount(() => {
+      registry.register(props.id, {
+        getValue: () => props.value,
+        checked,
+        disabled: () => props.disabled,
+        focus: () => shell.value?.focus()
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      registry.unregister(props.id);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(UiRadioSwitchOptionShell), vue.mergeProps({
+        id: __props.id,
+        ref_key: "shell",
+        ref: shell,
+        appearance: vue.unref(appearance),
+        size: vue.unref(size),
+        checked: checked.value,
+        disabled: __props.disabled,
+        tabindex: tabIndex.value
+      }, _ctx.$attrs, {
+        onClick,
+        onFocus,
+        onKeydown: [
+          remote.withKeys(remote.withModifiers(onKeyDown, ["prevent"]), ["space"]),
+          remote.withKeys(remote.withModifiers(onKeyDown, ["prevent"]), ["enter"]),
+          remote.withKeys(remote.withModifiers(onKeyDown, ["prevent"]), ["left"]),
+          remote.withKeys(remote.withModifiers(onKeyDown, ["prevent"]), ["right"]),
+          remote.withKeys(remote.withModifiers(onKeyDown, ["prevent"]), ["up"]),
+          remote.withKeys(remote.withModifiers(onKeyDown, ["prevent"]), ["down"]),
+          remote.withKeys(remote.withModifiers(onKeyDown, ["prevent"]), ["home"]),
+          remote.withKeys(remote.withModifiers(onKeyDown, ["prevent"]), ["end"])
+        ]
+      }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            vue.createElementVNode("div", _hoisted_1$3, [
+              "icon" in vue.unref(slots) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, [
+                vue.renderSlot(_ctx.$slots, "icon")
+              ])) : vue.createCommentVNode("", true),
+              "label" in vue.unref(slots) || __props.label ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$1, [
+                vue.renderSlot(_ctx.$slots, "label", {}, () => [
+                  vue.createTextVNode(vue.toDisplayString(__props.label), 1)
+                ])
+              ])) : vue.createCommentVNode("", true)
+            ]),
+            vue.unref(appearance) === vue.unref(APPEARANCE).SECTION ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              "description" in vue.unref(slots) || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+                vue.renderSlot(_ctx.$slots, "description", {}, () => [
+                  vue.createTextVNode(vue.toDisplayString(__props.description), 1)
+                ])
+              ])) : vue.createCommentVNode("", true),
+              checked.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                vue.renderSlot(_ctx.$slots, "checkmark", {}, () => [
+                  vue.createVNode(vue.unref(IconCheckmarkCircle))
+                ])
+              ])) : vue.createCommentVNode("", true)
+            ], 64)) : vue.createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      }, 16, ["id", "appearance", "size", "checked", "disabled", "tabindex", "onKeydown"]);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ vue.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 = vue.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;
+    };
+    vue.provide(AppearanceKey, vue.computed(() => props.appearance));
+    vue.provide(FocusableIdKey, vue.computed(() => focusableId.value));
+    vue.provide(SizeKey, vue.computed(() => props.size));
+    vue.provide(SetFocusableIdKey, (id) => {
+      syncFocusableId(id);
+    });
+    vue.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();
+        }
+      }
+    });
+    vue.provide(UpdateKey, (newValue) => {
+      emit("change", newValue);
+      emit("update:value", newValue);
+    });
+    vue.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();
+    });
+    vue.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 vue.openBlock(), vue.createBlock(vue.unref(UiRadioSwitchRoot), vue.mergeProps({
+        appearance: __props.appearance,
+        size: __props.size,
+        rubber: __props.rubber
+      }, _ctx.$attrs), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option, index) => {
+              return vue.openBlock(), vue.createBlock(_sfc_main$7, {
+                key: `${option.label}-${index}`,
+                label: option.label,
+                value: option.value,
+                disabled: option.disabled
+              }, vue.createSlots({ _: 2 }, [
+                _ctx.$slots.icon ? {
+                  name: "icon",
+                  fn: vue.withCtx(() => [
+                    vue.renderSlot(_ctx.$slots, "icon", { option })
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["label", "value", "disabled"]);
+            }), 128))
+          ])
+        ]),
+        _: 3
+      }, 16, ["appearance", "size", "rubber"]);
+    };
+  }
+});
 const UiScrollBoxType = "UiScrollBox";
 const UiScrollBox = remote.defineRemoteComponent(
   UiScrollBoxType,
@@ -415,6 +970,30 @@ const UiSwitch = remote.defineRemoteComponent(
   UiSwitchType,
   ["click", "focus", "blur"]
 );
+const UiTabGroupType = "UiTabGroup";
+const UiTabType = "UiTab";
+const UiTab = remote.defineRemoteComponent(
+  UiTabType,
+  [],
+  [
+    "default",
+    "icon",
+    "label",
+    "counter",
+    "content"
+  ]
+);
+const UiTabGroup = remote.defineRemoteComponent(
+  UiTabGroupType,
+  [
+    "layout",
+    "change",
+    "update:activeId",
+    "update:focusableId",
+    "update:menuExpanded"
+  ],
+  ["default"]
+);
 var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
   ALIGN2["LEFT"] = "left";
   ALIGN2["CENTER"] = "center";
@@ -1323,7 +1902,7 @@ const UiSelectOptionType = "UiSelectOption";
 remote.defineRemoteComponent(
   UiSelectOptionType
 );
-const _hoisted_1$3 = {
+const _hoisted_1$2 = {
   key: 0,
   class: "ui-v1-select__no-results-text"
 };
@@ -1716,7 +2295,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
             onHide: close
           }, {
             default: vue.withCtx(() => [
-              __props.filterable && optionsRegistry.value.every((o) => !o.isMatched()) && noResult.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$3, vue.toDisplayString(noResult.value), 1)) : vue.createCommentVNode("", true),
+              __props.filterable && optionsRegistry.value.every((o) => !o.isMatched()) && noResult.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$2, vue.toDisplayString(noResult.value), 1)) : vue.createCommentVNode("", true),
               vue.renderSlot(_ctx.$slots, "default")
             ]),
             _: 3
@@ -1727,21 +2306,6 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _hoisted_1$2 = {
-  xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24"
-};
-function render$1(_ctx, _cache) {
-  return vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$2, [..._cache[0] || (_cache[0] = [
-    vue.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"
@@ -1751,12 +2315,12 @@ function render(_ctx, _cache) {
     vue.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";
@@ -2100,13 +2664,19 @@ const createEndpointRoot = async (channel) => {
     "UiModalWindow",
     "UiModalWindowSurface",
     "UiNumberStepper",
+    "UiPageHeader",
+    "UiPageHeaderTitle",
     "UiPopper",
     "UiPopperConnector",
     "UiPopperTarget",
     "UiRadio",
+    "UiRadioSwitchOptionShell",
+    "UiRadioSwitchRoot",
     "UiScrollBox",
     "UiSlider",
     "UiSwitch",
+    "UiTab",
+    "UiTabGroup",
     "UiSelectPopper",
     "UiSelectTrigger",
     "UiTableBodyCell",
@@ -2211,7 +2781,7 @@ exports.UiDatePickerType = UiDatePickerType;
 exports.UiDateType = UiDateType;
 exports.UiError = UiError;
 exports.UiErrorType = UiErrorType;
-exports.UiField = _sfc_main$6;
+exports.UiField = _sfc_main$9;
 exports.UiInfobox = UiInfobox;
 exports.UiInfoboxType = UiInfoboxType;
 exports.UiLink = UiLink;
@@ -2230,6 +2800,7 @@ exports.UiModalWindowSurfaceType = UiModalWindowSurfaceType;
 exports.UiModalWindowType = UiModalWindowType;
 exports.UiNumberStepper = UiNumberStepper;
 exports.UiNumberStepperType = UiNumberStepperType;
+exports.UiPageHeader = _sfc_main$8;
 exports.UiPopper = UiPopper;
 exports.UiPopperConnector = UiPopperConnector;
 exports.UiPopperConnectorType = UiPopperConnectorType;
@@ -2237,6 +2808,8 @@ exports.UiPopperTarget = UiPopperTarget;
 exports.UiPopperTargetType = UiPopperTargetType;
 exports.UiPopperType = UiPopperType;
 exports.UiRadio = UiRadio;
+exports.UiRadioSwitch = _sfc_main$6;
+exports.UiRadioSwitchOption = _sfc_main$7;
 exports.UiRadioType = UiRadioType;
 exports.UiScrollBox = UiScrollBox;
 exports.UiScrollBoxType = UiScrollBoxType;
@@ -2247,6 +2820,10 @@ exports.UiSlider = UiSlider;
 exports.UiSliderType = UiSliderType;
 exports.UiSwitch = UiSwitch;
 exports.UiSwitchType = UiSwitchType;
+exports.UiTab = UiTab;
+exports.UiTabGroup = UiTabGroup;
+exports.UiTabGroupType = UiTabGroupType;
+exports.UiTabType = UiTabType;
 exports.UiTable = _sfc_main$4;
 exports.UiTableBodyCell = UiTableBodyCell;
 exports.UiTableColumn = _sfc_main$5;