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

package/dist/remote.js

@@ -1,5 +1,5 @@
 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 { openBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, unref, withCtx, useTemplateRef, ref, computed, watch, createBlock, inject, 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";
@@ -161,7 +161,7 @@ const _hoisted_5$1 = {
   class: "ui-v1-field__addon"
 };
 const _hoisted_6 = { class: "ui-v1-field__control" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -411,7 +411,7 @@ const _hoisted_3$2 = {
   key: 0,
   class: "ui-v1-page-header__actions"
 };
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -573,27 +573,27 @@ function render$1(_ctx, _cache) {
   ])]);
 }
 const IconCheckmarkCircle = { render: render$1 };
-var APPEARANCE = /* @__PURE__ */ ((APPEARANCE2) => {
+var APPEARANCE$2 = /* @__PURE__ */ ((APPEARANCE2) => {
   APPEARANCE2["DEFAULT"] = "default";
   APPEARANCE2["SECTION"] = "section";
   return APPEARANCE2;
-})(APPEARANCE || {});
-var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
+})(APPEARANCE$2 || {});
+var SIZE$4 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["SM"] = "sm";
   SIZE2["MD"] = "md";
   SIZE2["LG"] = "lg";
   return SIZE2;
-})(SIZE$2 || {});
+})(SIZE$4 || {});
 const AppearanceKey = Symbol("UiRadioSwitchAppearance");
-const SizeKey = Symbol("UiRadioSwitchSize");
-const RegistryKey = Symbol("UiRadioSwitchRegistry");
+const SizeKey$1 = Symbol("UiRadioSwitchSize");
+const RegistryKey$1 = 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, {
+const FocusableIdKey$1 = Symbol("UiRadioSwitchFocusableId");
+const SetFocusableIdKey$1 = Symbol("UiRadioSwitchSetFocusableId");
+const MoveFocusKey$1 = Symbol("UiRadioSwitchMoveFocus");
+const useAppearance = () => inject(AppearanceKey, computed(() => APPEARANCE$2.DEFAULT));
+const useSize$1 = () => inject(SizeKey$1, computed(() => SIZE$4.MD));
+const useRegistry$1 = () => inject(RegistryKey$1, {
   register: () => {
   },
   unregister: () => {
@@ -601,10 +601,10 @@ const useRegistry = () => inject(RegistryKey, {
 });
 const useUpdate = () => inject(UpdateKey, () => {
 });
-const useFocusableId = () => inject(FocusableIdKey, computed(() => null));
-const useSetFocusableId = () => inject(SetFocusableIdKey, () => {
+const useFocusableId$1 = () => inject(FocusableIdKey$1, computed(() => null));
+const useSetFocusableId$1 = () => inject(SetFocusableIdKey$1, () => {
 });
-const useMoveFocus = () => inject(MoveFocusKey, () => {
+const useMoveFocus$1 = () => inject(MoveFocusKey$1, () => {
 });
 const UiRadioSwitchRootType = "UiRadioSwitchRoot";
 const UiRadioSwitchRoot = defineRemoteComponent(UiRadioSwitchRootType);
@@ -638,10 +638,10 @@ 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__,
+let counter$2 = 0;
+const __default__$1 = {};
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
   ...{
     inheritAttrs: false
   },
@@ -650,7 +650,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     /** Идентификатор */
     id: {
       type: String,
-      default: () => "ui-v1-radio-switch-option-" + ++counter$1
+      default: () => "ui-v1-radio-switch-option-" + ++counter$2
     },
     /** Заголовок */
     label: {
@@ -675,14 +675,13 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const slots = useSlots();
     const appearance = useAppearance();
-    const focusableId = useFocusableId();
-    const moveFocus = useMoveFocus();
+    const focusableId = useFocusableId$1();
+    const moveFocus = useMoveFocus$1();
     const shell = useTemplateRef("shell");
-    const size = useSize();
-    const registry = useRegistry();
-    const setFocusableId = useSetFocusableId();
+    const size = useSize$1();
+    const registry = useRegistry$1();
+    const setFocusableId = useSetFocusableId$1();
     const update = useUpdate();
     const checked = ref(false);
     const tabIndex = computed(() => {
@@ -763,17 +762,17 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createElementVNode("div", _hoisted_1$3, [
-              "icon" in unref(slots) ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
+              _ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
                 renderSlot(_ctx.$slots, "icon")
               ])) : createCommentVNode("", true),
-              "label" in unref(slots) || __props.label ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
+              _ctx.$slots.label || __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, [
+            unref(appearance) === unref(APPEARANCE$2).SECTION ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+              _ctx.$slots.description || __props.description ? (openBlock(), createElementBlock("div", _hoisted_4, [
                 renderSlot(_ctx.$slots, "description", {}, () => [
                   createTextVNode(toDisplayString(__props.description), 1)
                 ])
@@ -791,7 +790,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -815,14 +814,14 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     /** Внешний вид */
     appearance: {
       type: String,
-      default: APPEARANCE.DEFAULT,
-      validator: (appearance) => Object.values(APPEARANCE).includes(appearance)
+      default: APPEARANCE$2.DEFAULT,
+      validator: (appearance) => Object.values(APPEARANCE$2).includes(appearance)
     },
     /** Размер */
     size: {
       type: String,
-      default: SIZE$2.MD,
-      validator: (size) => Object.values(SIZE$2).includes(size)
+      default: SIZE$4.MD,
+      validator: (size) => Object.values(SIZE$4).includes(size)
     },
     /** Растягивание контейнера в зависимости от контента */
     rubber: {
@@ -853,12 +852,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       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) => {
+    provide(FocusableIdKey$1, computed(() => focusableId.value));
+    provide(SizeKey$1, computed(() => props.size));
+    provide(SetFocusableIdKey$1, (id) => {
       syncFocusableId(id);
     });
-    provide(RegistryKey, {
+    provide(RegistryKey$1, {
       register: (id, option) => {
         if (registry.has(id)) {
           return;
@@ -878,7 +877,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       emit("change", newValue);
       emit("update:value", newValue);
     });
-    provide(MoveFocusKey, async (id, direction) => {
+    provide(MoveFocusKey$1, async (id, direction) => {
       const enabledEntries = getEnabledEntries();
       if (!enabledEntries.length) {
         focusableId.value = null;
@@ -925,7 +924,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         default: withCtx(() => [
           renderSlot(_ctx.$slots, "default", {}, () => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
-              return openBlock(), createBlock(_sfc_main$7, {
+              return openBlock(), createBlock(_sfc_main$9, {
                 key: `${option.label}-${index}`,
                 label: option.label,
                 value: option.value,
@@ -958,6 +957,11 @@ const UiScrollBox = defineRemoteComponent(
     "ps-y-reach-end"
   ]
 );
+const UiSkeletonType = "UiSkeleton";
+const UiSkeleton = defineRemoteComponent(
+  UiSkeletonType,
+  ["click", "focus", "blur"]
+);
 const UiSliderType = "UiSlider";
 const UiSlider = defineRemoteComponent(
   UiSliderType,
@@ -1014,7 +1018,7 @@ const byRowKey = (key) => {
 };
 const asRowClass = (value) => value;
 const asRowAttrs = (value) => value;
-const _sfc_main$5 = defineComponent({
+const _sfc_main$7 = defineComponent({
   name: "UiTableColumn",
   props: {
     label: {
@@ -1094,7 +1098,7 @@ const isNamedComponent = (node, name) => {
   return "name" in node.type && node.type.name === name;
 };
 const isTableColumnVNode = (node) => {
-  return node.type === _sfc_main$5 || isNamedComponent(node, "UiTableColumn");
+  return node.type === _sfc_main$7 || isNamedComponent(node, "UiTableColumn");
 };
 const isWhitespaceText = (value) => value.trim().length === 0;
 const normalizeNodes = (children) => {
@@ -1299,7 +1303,7 @@ const withoutClass = (attrs) => {
   delete next.class;
   return next;
 };
-const _sfc_main$4 = defineComponent({
+const _sfc_main$6 = defineComponent({
   name: "UiTable",
   inheritAttrs: false,
   props: {
@@ -1568,14 +1572,30 @@ const UiTag = defineRemoteComponent(
   UiTagType,
   ["click", "focus", "blur", "remove"]
 );
-var SIZE$1 = /* @__PURE__ */ ((SIZE2) => {
+var WIDTH = /* @__PURE__ */ ((WIDTH2) => {
+  WIDTH2["FIT"] = "fit";
+  WIDTH2["FLUID"] = "fluid";
+  return WIDTH2;
+})(WIDTH || {});
+const NUMERIC_PATTERN = /^(?:\d+|\d*\.\d+)$/;
+const UNIT_PATTERN = /^(?:\d+|\d*\.\d+)(?:%|cap|ch|cm|dvb|dvh|dvi|dvw|em|ex|ic|in|lh|lvb|lvh|lvi|lvw|mm|pc|pt|px|Q|rem|rlh|svb|svh|svi|svw|vb|vh|vi|vmax|vmin|vw)$/i;
+const isWidthNumeric = (value) => {
+  return typeof value === "number" ? Number.isFinite(value) && value >= 0 : typeof value === "string" && NUMERIC_PATTERN.test(value.trim());
+};
+const isWidthToken = (value) => {
+  return typeof value === "string" && Object.values(WIDTH).includes(value);
+};
+const isWidth = (value) => {
+  return value === null || value === void 0 || isWidthToken(value) || isWidthNumeric(value) || typeof value === "string" && UNIT_PATTERN.test(value.trim());
+};
+var SIZE$3 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["XS"] = "xs";
   SIZE2["SM"] = "sm";
   SIZE2["MD"] = "md";
   SIZE2["LG"] = "lg";
   SIZE2["XL"] = "xl";
   return SIZE2;
-})(SIZE$1 || {});
+})(SIZE$3 || {});
 const events = [
   "input",
   "keydown",
@@ -1615,6 +1635,371 @@ const UiTimePicker = defineRemoteComponent(UiTimePickerType, {
     focus: defineRemoteMethod()
   }
 });
+const UiToggleButtonType = "UiToggleButton";
+const UiToggleButton = defineRemoteComponent(
+  UiToggleButtonType,
+  {
+    emits: [
+      "click",
+      "focus",
+      "blur",
+      "keydown"
+    ],
+    methods: {
+      focus: defineRemoteMethod(),
+      blur: defineRemoteMethod(),
+      click: defineRemoteMethod()
+    }
+  }
+);
+var UiToggleButtonSize = /* @__PURE__ */ ((UiToggleButtonSize2) => {
+  UiToggleButtonSize2["LG"] = "lg";
+  UiToggleButtonSize2["MD"] = "md";
+  UiToggleButtonSize2["SM"] = "sm";
+  UiToggleButtonSize2["XS"] = "xs";
+  return UiToggleButtonSize2;
+})(UiToggleButtonSize || {});
+const FocusableIdKey = Symbol("UiToggleGroupFocusableId");
+const MoveFocusKey = Symbol("UiToggleGroupMoveFocus");
+const RegistryKey = Symbol("UiToggleGroupRegistry");
+const SetFocusableIdKey = Symbol("UiToggleGroupSetFocusableId");
+const SizeKey = Symbol("UiToggleGroupSize");
+const DisabledKey = Symbol("UiToggleGroupDisabled");
+const ToggleKey$1 = Symbol("UiToggleGroupToggle");
+const useFocusableId = () => inject(FocusableIdKey, computed(() => null));
+const useMoveFocus = () => inject(MoveFocusKey, () => {
+});
+const useRegistry = () => inject(RegistryKey, {
+  register: () => {
+  },
+  unregister: () => {
+  }
+});
+const useSetFocusableId = () => inject(SetFocusableIdKey, () => {
+});
+const useSize = () => inject(SizeKey, computed(() => UiToggleButtonSize.SM));
+const useDisabled = () => inject(DisabledKey, computed(() => false));
+const useToggle = () => inject(ToggleKey$1, () => {
+});
+let counter$1 = 0;
+const __default__ = {};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  ...{
+    inheritAttrs: false
+  },
+  __name: "UiToggleGroupOption",
+  props: {
+    id: {
+      type: String,
+      default: () => "ui-v1-toggle-group-option-" + ++counter$1
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    value: {
+      type: null,
+      required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const button = useTemplateRef("button");
+    const groupDisabled = useDisabled();
+    const focusableId = useFocusableId();
+    const moveFocus = useMoveFocus();
+    const registry = useRegistry();
+    const setFocusableId = useSetFocusableId();
+    const size = useSize();
+    const toggle = useToggle();
+    const focused = ref(false);
+    const disabled = computed(() => groupDisabled.value || props.disabled);
+    const pressed = ref(false);
+    const tabIndex = computed(() => {
+      return !disabled.value && focusableId.value === props.id ? 0 : -1;
+    });
+    const onClick = () => {
+      if (disabled.value) {
+        return;
+      }
+      setFocusableId(props.id);
+      toggle(props.value);
+    };
+    const onFocus = () => {
+      if (!disabled.value) {
+        focused.value = true;
+        setFocusableId(props.id);
+      }
+    };
+    const onBlur = () => {
+      focused.value = false;
+    };
+    const onKeyDown = (event) => {
+      if (disabled.value) {
+        return;
+      }
+      switch (event.key) {
+        case " ":
+        case "Enter":
+          setFocusableId(props.id);
+          toggle(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,
+        pressed,
+        disabled: () => disabled.value,
+        focus: () => button.value?.focus()
+      });
+    });
+    onBeforeUnmount(() => {
+      registry.unregister(props.id);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiToggleButton), mergeProps({
+        id: __props.id,
+        ref_key: "button",
+        ref: button,
+        size: unref(size),
+        pressed: pressed.value,
+        disabled: disabled.value,
+        focused: focused.value,
+        grouped: true,
+        tabindex: tabIndex.value,
+        role: "checkbox",
+        "aria-checked": `${pressed.value}`,
+        "aria-disabled": `${disabled.value}`
+      }, _ctx.$attrs, {
+        onClick,
+        onFocus,
+        onBlur,
+        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", {}, () => [
+            _ctx.$slots.icon ? renderSlot(_ctx.$slots, "icon", { key: 0 }) : createCommentVNode("", true),
+            _ctx.$slots.label || __props.label ? renderSlot(_ctx.$slots, "label", { key: 1 }, () => [
+              createTextVNode(toDisplayString(__props.label), 1)
+            ]) : createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      }, 16, ["id", "size", "pressed", "disabled", "focused", "tabindex", "aria-checked", "aria-disabled", "onKeydown"]);
+    };
+  }
+});
+const UiToggleGroupRootType = "UiToggleGroupRoot";
+const UiToggleGroupRoot = defineRemoteComponent(UiToggleGroupRootType);
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...{
+    inheritAttrs: false
+  },
+  __name: "UiToggleGroup",
+  props: {
+    model: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    equalFn: {
+      type: Function,
+      default: (a, b) => a === b
+    },
+    size: {
+      type: String,
+      default: UiToggleButtonSize.SM,
+      validator: (size) => {
+        return Object.values(UiToggleButtonSize).includes(size);
+      }
+    },
+    rubber: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    ariaLabel: {
+      type: String,
+      default: void 0
+    },
+    ariaLabelledby: {
+      type: String,
+      default: void 0
+    },
+    ariaDescribedby: {
+      type: String,
+      default: void 0
+    },
+    ariaOrientation: {
+      type: String,
+      default: "horizontal"
+    }
+  },
+  emits: ["change", "update:model"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const registry = /* @__PURE__ */ new Map();
+    const focusableId = ref(null);
+    const isPressed = (value) => {
+      return props.model.some((entry) => props.equalFn(entry, value));
+    };
+    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 pressedEntry = enabledEntries.find(([, option]) => option.pressed.value);
+      if (preferredId && enabledIds.has(preferredId)) {
+        focusableId.value = preferredId;
+        return;
+      }
+      if (focusableId.value && enabledIds.has(focusableId.value)) {
+        return;
+      }
+      focusableId.value = pressedEntry?.[0] ?? enabledEntries[0]?.[0] ?? null;
+    };
+    const updatePressedStates = () => {
+      Array.from(registry.values()).forEach((option) => {
+        option.pressed.value = isPressed(option.getValue());
+      });
+    };
+    provide(FocusableIdKey, computed(() => focusableId.value));
+    provide(DisabledKey, computed(() => props.disabled));
+    provide(SizeKey, computed(() => props.size));
+    provide(SetFocusableIdKey, (id) => {
+      syncFocusableId(id);
+    });
+    provide(RegistryKey, {
+      register: (id, option) => {
+        if (registry.has(id)) {
+          return;
+        }
+        option.pressed.value = isPressed(option.getValue());
+        registry.set(id, option);
+        syncFocusableId(option.pressed.value ? id : focusableId.value);
+      },
+      unregister: (id) => {
+        registry.delete(id);
+        if (focusableId.value === id) {
+          syncFocusableId();
+        }
+      }
+    });
+    provide(ToggleKey$1, (value) => {
+      if (props.disabled) {
+        return;
+      }
+      const nextModel = isPressed(value) ? props.model.filter((entry) => !props.equalFn(entry, value)) : [...props.model, value];
+      emit("change", nextModel);
+      emit("update:model", nextModel);
+    });
+    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;
+      await target.focus();
+    });
+    watch([() => props.model, () => props.equalFn], () => {
+      updatePressedStates();
+      syncFocusableId();
+    }, {
+      deep: true
+    });
+    watch(() => props.disabled, () => {
+      syncFocusableId();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(UiToggleGroupRoot), mergeProps({
+        size: __props.size,
+        rubber: __props.rubber,
+        disabled: __props.disabled,
+        "aria-label": props.ariaLabel,
+        "aria-labelledby": props.ariaLabelledby,
+        "aria-describedby": props.ariaDescribedby,
+        "aria-orientation": props.ariaOrientation
+      }, _ctx.$attrs), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
+              return openBlock(), createBlock(_sfc_main$5, {
+                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, ["size", "rubber", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-orientation"]);
+    };
+  }
+});
 const UiToolbarButtonType = "UiToolbarButton";
 const UiToolbarButton = defineRemoteComponent(
   UiToolbarButtonType,
@@ -1996,8 +2381,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     /** Размер поля ввода */
     textboxSize: {
       type: String,
-      validator: (size) => Object.values(SIZE$1).includes(size),
-      default: SIZE$1.SM
+      validator: (size) => Object.values(SIZE$3).includes(size),
+      default: SIZE$3.SM
+    },
+    /** Ширина селекта. fit — по содержимому, fluid — на всю ширину контейнера */
+    width: {
+      type: [Number, String],
+      validator: isWidth,
+      default: WIDTH.FIT
     },
     /** Наличие множественного выбора среди элементов выпадающего списка */
     multiple: {
@@ -2266,13 +2657,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             "placeholder-only": __props.placeholderOnly,
             placeholder: __props.placeholder,
             "textbox-size": __props.textboxSize,
+            width: __props.width,
             "active-descendant": activeOptionId.value
           }, _ctx.$attrs, {
             onInput,
             onKeydown: onKeyDown,
             "onUpdate:value": _cache[0] || (_cache[0] = ($event) => state.value = $event),
             "onUpdate:expanded": _cache[1] || (_cache[1] = ($event) => state.expanded = $event)
-          }), null, 16, ["id", "value", "multiple", "selection", "filter", "filterable", "clearable", "expanded", "invalid", "disabled", "readonly", "placeholder-only", "placeholder", "textbox-size", "active-descendant"]),
+          }), null, 16, ["id", "value", "multiple", "selection", "filter", "filterable", "clearable", "expanded", "invalid", "disabled", "readonly", "placeholder-only", "placeholder", "textbox-size", "width", "active-descendant"]),
           createVNode(unref(UiSelectPopper), {
             id: resolvedId.value,
             ref_key: "popper",
@@ -2319,13 +2711,13 @@ function render(_ctx, _cache) {
   ])]);
 }
 const IconAddCircleOutlined = { render };
-var SIZE = /* @__PURE__ */ ((SIZE2) => {
+var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["XS"] = "xs";
   SIZE2["SM"] = "sm";
   SIZE2["MD"] = "md";
   SIZE2["LG"] = "lg";
   return SIZE2;
-})(SIZE || {});
+})(SIZE$2 || {});
 const _hoisted_1 = ["id", "aria-selected", "aria-current"];
 const _hoisted_2 = ["innerHTML"];
 const _hoisted_3 = ["innerHTML"];
@@ -2360,8 +2752,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     /** Размер шрифта, иконок и внутренних отступов компонента */
     size: {
       type: String,
-      validator: (size) => Object.values(SIZE).includes(size),
-      default: SIZE.MD
+      validator: (size) => Object.values(SIZE$2).includes(size),
+      default: SIZE$2.MD
     },
     /** Счетчик количества */
     counter: {
@@ -2689,6 +3081,8 @@ const createEndpointRoot = async (channel) => {
     "UiTag",
     "UiTextbox",
     "UiTimePicker",
+    "UiToggleButton",
+    "UiToggleGroupRoot",
     "UiToolbarButton",
     "UiToolbarLink",
     "UiTooltip",
@@ -2712,6 +3106,37 @@ const usePreview = (workers = ref([])) => {
     preview: (url, resize = void 0, crop = void 0) => preview(_workers.value, url, resize, crop)
   };
 };
+var ANIMATION = /* @__PURE__ */ ((ANIMATION2) => {
+  ANIMATION2["PULSE"] = "pulse";
+  ANIMATION2["SHIMMER"] = "shimmer";
+  return ANIMATION2;
+})(ANIMATION || {});
+var APPEARANCE$1 = /* @__PURE__ */ ((APPEARANCE2) => {
+  APPEARANCE2["CIRCLE"] = "circle";
+  APPEARANCE2["RECTANGLE"] = "rectangle";
+  APPEARANCE2["TEXT"] = "text";
+  return APPEARANCE2;
+})(APPEARANCE$1 || {});
+var SIZE$1 = /* @__PURE__ */ ((SIZE2) => {
+  SIZE2["SM"] = "sm";
+  SIZE2["MD"] = "md";
+  SIZE2["LG"] = "lg";
+  return SIZE2;
+})(SIZE$1 || {});
+function guessDimensionStyleValue(value) {
+  return typeof value === "number" || typeof value === "string" && /^\d*$/.test(value) ? `${value}px` : value;
+}
+var SIZE = /* @__PURE__ */ ((SIZE2) => {
+  SIZE2["SM"] = "sm";
+  SIZE2["MD"] = "md";
+  SIZE2["LG"] = "lg";
+  return SIZE2;
+})(SIZE || {});
+var APPEARANCE = /* @__PURE__ */ ((APPEARANCE2) => {
+  APPEARANCE2["TEXT"] = "text";
+  APPEARANCE2["FILLED"] = "filled";
+  return APPEARANCE2;
+})(APPEARANCE || {});
 const formatDateLat = (date) => format(date, "dd/MM/yyyy", { locale: enGB });
 const formatDateEs = (date) => format(date, "dd.MM.yyyy", { locale: es });
 const formatDateRu = (date) => format(date, "dd.MM.yyyy", { locale: ru });
@@ -2752,6 +3177,13 @@ export {
   ALIGN,
   DIRECTION,
   ImageWorkersKey,
+  APPEARANCE$2 as RADIO_SWITCH_APPEARANCE,
+  SIZE$4 as RADIO_SWITCH_SIZE,
+  ANIMATION as SKELETON_ANIMATION,
+  APPEARANCE$1 as SKELETON_APPEARANCE,
+  SIZE$1 as SKELETON_SIZE,
+  APPEARANCE as TAB_APPEARANCE,
+  SIZE as TAB_SIZE,
   UiAddButton,
   UiAddButtonType,
   UiAlert,
@@ -2780,7 +3212,7 @@ export {
   UiDateType,
   UiError,
   UiErrorType,
-  _sfc_main$9 as UiField,
+  _sfc_main$b as UiField,
   UiInfobox,
   UiInfoboxType,
   UiLink,
@@ -2799,7 +3231,7 @@ export {
   UiModalWindowType,
   UiNumberStepper,
   UiNumberStepperType,
-  _sfc_main$8 as UiPageHeader,
+  _sfc_main$a as UiPageHeader,
   UiPopper,
   UiPopperConnector,
   UiPopperConnectorType,
@@ -2807,14 +3239,16 @@ export {
   UiPopperTargetType,
   UiPopperType,
   UiRadio,
-  _sfc_main$6 as UiRadioSwitch,
-  _sfc_main$7 as UiRadioSwitchOption,
+  _sfc_main$8 as UiRadioSwitch,
+  _sfc_main$9 as UiRadioSwitchOption,
   UiRadioType,
   UiScrollBox,
   UiScrollBoxType,
   _sfc_main$3 as UiSelect,
   _sfc_main$2 as UiSelectOption,
   _sfc_main as UiSelectOptionGroup,
+  UiSkeleton,
+  UiSkeletonType,
   UiSlider,
   UiSliderType,
   UiSwitch,
@@ -2823,9 +3257,9 @@ export {
   UiTabGroup,
   UiTabGroupType,
   UiTabType,
-  _sfc_main$4 as UiTable,
+  _sfc_main$6 as UiTable,
   UiTableBodyCell,
-  _sfc_main$5 as UiTableColumn,
+  _sfc_main$7 as UiTableColumn,
   UiTableFooterButton,
   UiTableFooterSection,
   UiTableHeadCell,
@@ -2836,6 +3270,11 @@ export {
   UiTextboxType,
   UiTimePicker,
   UiTimePickerType,
+  UiToggleButton,
+  UiToggleButtonSize,
+  UiToggleButtonType,
+  _sfc_main$4 as UiToggleGroup,
+  _sfc_main$5 as UiToggleGroupOption,
   UiToolbarButton,
   UiToolbarButtonType,
   UiToolbarLink,
@@ -2854,6 +3293,7 @@ export {
   formatDate,
   formatDateTime,
   formatTime,
+  guessDimensionStyleValue as guessSkeletonDimensionStyleValue,
   mountEndpointRoot,
   usePreview
 };