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

package/dist/remote.cjs

@@ -163,7 +163,7 @@ const _hoisted_5$1 = {
   class: "ui-v1-field__addon"
 };
 const _hoisted_6 = { class: "ui-v1-field__control" };
-const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$b = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -413,7 +413,7 @@ const _hoisted_3$2 = {
   key: 0,
   class: "ui-v1-page-header__actions"
 };
-const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$a = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -575,27 +575,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 = () => vue.inject(AppearanceKey, vue.computed(() => APPEARANCE.DEFAULT));
-const useSize = () => vue.inject(SizeKey, vue.computed(() => SIZE$2.MD));
-const useRegistry = () => vue.inject(RegistryKey, {
+const FocusableIdKey$1 = Symbol("UiRadioSwitchFocusableId");
+const SetFocusableIdKey$1 = Symbol("UiRadioSwitchSetFocusableId");
+const MoveFocusKey$1 = Symbol("UiRadioSwitchMoveFocus");
+const useAppearance = () => vue.inject(AppearanceKey, vue.computed(() => APPEARANCE$2.DEFAULT));
+const useSize$1 = () => vue.inject(SizeKey$1, vue.computed(() => SIZE$4.MD));
+const useRegistry$1 = () => vue.inject(RegistryKey$1, {
   register: () => {
   },
   unregister: () => {
@@ -603,10 +603,10 @@ const useRegistry = () => vue.inject(RegistryKey, {
 });
 const useUpdate = () => vue.inject(UpdateKey, () => {
 });
-const useFocusableId = () => vue.inject(FocusableIdKey, vue.computed(() => null));
-const useSetFocusableId = () => vue.inject(SetFocusableIdKey, () => {
+const useFocusableId$1 = () => vue.inject(FocusableIdKey$1, vue.computed(() => null));
+const useSetFocusableId$1 = () => vue.inject(SetFocusableIdKey$1, () => {
 });
-const useMoveFocus = () => vue.inject(MoveFocusKey, () => {
+const useMoveFocus$1 = () => vue.inject(MoveFocusKey$1, () => {
 });
 const UiRadioSwitchRootType = "UiRadioSwitchRoot";
 const UiRadioSwitchRoot = remote.defineRemoteComponent(UiRadioSwitchRootType);
@@ -640,10 +640,10 @@ 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__,
+let counter$2 = 0;
+const __default__$1 = {};
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  ...__default__$1,
   ...{
     inheritAttrs: false
   },
@@ -652,7 +652,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     /** Идентификатор */
     id: {
       type: String,
-      default: () => "ui-v1-radio-switch-option-" + ++counter$1
+      default: () => "ui-v1-radio-switch-option-" + ++counter$2
     },
     /** Заголовок */
     label: {
@@ -677,14 +677,13 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const slots = vue.useSlots();
     const appearance = useAppearance();
-    const focusableId = useFocusableId();
-    const moveFocus = useMoveFocus();
+    const focusableId = useFocusableId$1();
+    const moveFocus = useMoveFocus$1();
     const shell = vue.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 = vue.ref(false);
     const tabIndex = vue.computed(() => {
@@ -765,17 +764,17 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
         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, [
+              _ctx.$slots.icon ? (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, [
+              _ctx.$slots.label || __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.unref(appearance) === vue.unref(APPEARANCE$2).SECTION ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              _ctx.$slots.description || __props.description ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
                 vue.renderSlot(_ctx.$slots, "description", {}, () => [
                   vue.createTextVNode(vue.toDisplayString(__props.description), 1)
                 ])
@@ -793,7 +792,7 @@ const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -817,14 +816,14 @@ const _sfc_main$6 = /* @__PURE__ */ vue.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: {
@@ -855,12 +854,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       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) => {
+    vue.provide(FocusableIdKey$1, vue.computed(() => focusableId.value));
+    vue.provide(SizeKey$1, vue.computed(() => props.size));
+    vue.provide(SetFocusableIdKey$1, (id) => {
       syncFocusableId(id);
     });
-    vue.provide(RegistryKey, {
+    vue.provide(RegistryKey$1, {
       register: (id, option) => {
         if (registry.has(id)) {
           return;
@@ -880,7 +879,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       emit("change", newValue);
       emit("update:value", newValue);
     });
-    vue.provide(MoveFocusKey, async (id, direction) => {
+    vue.provide(MoveFocusKey$1, async (id, direction) => {
       const enabledEntries = getEnabledEntries();
       if (!enabledEntries.length) {
         focusableId.value = null;
@@ -927,7 +926,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         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, {
+              return vue.openBlock(), vue.createBlock(_sfc_main$9, {
                 key: `${option.label}-${index}`,
                 label: option.label,
                 value: option.value,
@@ -960,6 +959,11 @@ const UiScrollBox = remote.defineRemoteComponent(
     "ps-y-reach-end"
   ]
 );
+const UiSkeletonType = "UiSkeleton";
+const UiSkeleton = remote.defineRemoteComponent(
+  UiSkeletonType,
+  ["click", "focus", "blur"]
+);
 const UiSliderType = "UiSlider";
 const UiSlider = remote.defineRemoteComponent(
   UiSliderType,
@@ -1016,7 +1020,7 @@ const byRowKey = (key) => {
 };
 const asRowClass = (value) => value;
 const asRowAttrs = (value) => value;
-const _sfc_main$5 = vue.defineComponent({
+const _sfc_main$7 = vue.defineComponent({
   name: "UiTableColumn",
   props: {
     label: {
@@ -1096,7 +1100,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) => {
@@ -1301,7 +1305,7 @@ const withoutClass = (attrs) => {
   delete next.class;
   return next;
 };
-const _sfc_main$4 = vue.defineComponent({
+const _sfc_main$6 = vue.defineComponent({
   name: "UiTable",
   inheritAttrs: false,
   props: {
@@ -1570,14 +1574,30 @@ const UiTag = remote.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",
@@ -1617,6 +1637,371 @@ const UiTimePicker = remote.defineRemoteComponent(UiTimePickerType, {
     focus: remote.defineRemoteMethod()
   }
 });
+const UiToggleButtonType = "UiToggleButton";
+const UiToggleButton = remote.defineRemoteComponent(
+  UiToggleButtonType,
+  {
+    emits: [
+      "click",
+      "focus",
+      "blur",
+      "keydown"
+    ],
+    methods: {
+      focus: remote.defineRemoteMethod(),
+      blur: remote.defineRemoteMethod(),
+      click: remote.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 = () => vue.inject(FocusableIdKey, vue.computed(() => null));
+const useMoveFocus = () => vue.inject(MoveFocusKey, () => {
+});
+const useRegistry = () => vue.inject(RegistryKey, {
+  register: () => {
+  },
+  unregister: () => {
+  }
+});
+const useSetFocusableId = () => vue.inject(SetFocusableIdKey, () => {
+});
+const useSize = () => vue.inject(SizeKey, vue.computed(() => UiToggleButtonSize.SM));
+const useDisabled = () => vue.inject(DisabledKey, vue.computed(() => false));
+const useToggle = () => vue.inject(ToggleKey$1, () => {
+});
+let counter$1 = 0;
+const __default__ = {};
+const _sfc_main$5 = /* @__PURE__ */ vue.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 = vue.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 = vue.ref(false);
+    const disabled = vue.computed(() => groupDisabled.value || props.disabled);
+    const pressed = vue.ref(false);
+    const tabIndex = vue.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;
+      }
+    };
+    vue.onBeforeMount(() => {
+      registry.register(props.id, {
+        getValue: () => props.value,
+        pressed,
+        disabled: () => disabled.value,
+        focus: () => button.value?.focus()
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      registry.unregister(props.id);
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(UiToggleButton), vue.mergeProps({
+        id: __props.id,
+        ref_key: "button",
+        ref: button,
+        size: vue.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: [
+          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", {}, () => [
+            _ctx.$slots.icon ? vue.renderSlot(_ctx.$slots, "icon", { key: 0 }) : vue.createCommentVNode("", true),
+            _ctx.$slots.label || __props.label ? vue.renderSlot(_ctx.$slots, "label", { key: 1 }, () => [
+              vue.createTextVNode(vue.toDisplayString(__props.label), 1)
+            ]) : vue.createCommentVNode("", true)
+          ])
+        ]),
+        _: 3
+      }, 16, ["id", "size", "pressed", "disabled", "focused", "tabindex", "aria-checked", "aria-disabled", "onKeydown"]);
+    };
+  }
+});
+const UiToggleGroupRootType = "UiToggleGroupRoot";
+const UiToggleGroupRoot = remote.defineRemoteComponent(UiToggleGroupRootType);
+const _sfc_main$4 = /* @__PURE__ */ vue.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 = vue.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());
+      });
+    };
+    vue.provide(FocusableIdKey, vue.computed(() => focusableId.value));
+    vue.provide(DisabledKey, vue.computed(() => props.disabled));
+    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.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();
+        }
+      }
+    });
+    vue.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);
+    });
+    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;
+      await target.focus();
+    });
+    vue.watch([() => props.model, () => props.equalFn], () => {
+      updatePressedStates();
+      syncFocusableId();
+    }, {
+      deep: true
+    });
+    vue.watch(() => props.disabled, () => {
+      syncFocusableId();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(UiToggleGroupRoot), vue.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: 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$5, {
+                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, ["size", "rubber", "disabled", "aria-label", "aria-labelledby", "aria-describedby", "aria-orientation"]);
+    };
+  }
+});
 const UiToolbarButtonType = "UiToolbarButton";
 const UiToolbarButton = remote.defineRemoteComponent(
   UiToolbarButtonType,
@@ -1998,8 +2383,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.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: {
@@ -2268,13 +2659,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.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"]),
           vue.createVNode(vue.unref(UiSelectPopper), {
             id: resolvedId.value,
             ref_key: "popper",
@@ -2321,13 +2713,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"];
@@ -2362,8 +2754,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.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: {
@@ -2691,6 +3083,8 @@ const createEndpointRoot = async (channel) => {
     "UiTag",
     "UiTextbox",
     "UiTimePicker",
+    "UiToggleButton",
+    "UiToggleGroupRoot",
     "UiToolbarButton",
     "UiToolbarLink",
     "UiTooltip",
@@ -2714,6 +3108,37 @@ const usePreview = (workers = vue.ref([])) => {
     preview: (url, resize = void 0, crop = void 0) => imagePreview.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) => dateFns.format(date, "dd/MM/yyyy", { locale: locale.enGB });
 const formatDateEs = (date) => dateFns.format(date, "dd.MM.yyyy", { locale: locale.es });
 const formatDateRu = (date) => dateFns.format(date, "dd.MM.yyyy", { locale: locale.ru });
@@ -2753,6 +3178,13 @@ function detectLocale() {
 exports.ALIGN = ALIGN;
 exports.DIRECTION = DIRECTION;
 exports.ImageWorkersKey = ImageWorkersKey;
+exports.RADIO_SWITCH_APPEARANCE = APPEARANCE$2;
+exports.RADIO_SWITCH_SIZE = SIZE$4;
+exports.SKELETON_ANIMATION = ANIMATION;
+exports.SKELETON_APPEARANCE = APPEARANCE$1;
+exports.SKELETON_SIZE = SIZE$1;
+exports.TAB_APPEARANCE = APPEARANCE;
+exports.TAB_SIZE = SIZE;
 exports.UiAddButton = UiAddButton;
 exports.UiAddButtonType = UiAddButtonType;
 exports.UiAlert = UiAlert;
@@ -2781,7 +3213,7 @@ exports.UiDatePickerType = UiDatePickerType;
 exports.UiDateType = UiDateType;
 exports.UiError = UiError;
 exports.UiErrorType = UiErrorType;
-exports.UiField = _sfc_main$9;
+exports.UiField = _sfc_main$b;
 exports.UiInfobox = UiInfobox;
 exports.UiInfoboxType = UiInfoboxType;
 exports.UiLink = UiLink;
@@ -2800,7 +3232,7 @@ exports.UiModalWindowSurfaceType = UiModalWindowSurfaceType;
 exports.UiModalWindowType = UiModalWindowType;
 exports.UiNumberStepper = UiNumberStepper;
 exports.UiNumberStepperType = UiNumberStepperType;
-exports.UiPageHeader = _sfc_main$8;
+exports.UiPageHeader = _sfc_main$a;
 exports.UiPopper = UiPopper;
 exports.UiPopperConnector = UiPopperConnector;
 exports.UiPopperConnectorType = UiPopperConnectorType;
@@ -2808,14 +3240,16 @@ exports.UiPopperTarget = UiPopperTarget;
 exports.UiPopperTargetType = UiPopperTargetType;
 exports.UiPopperType = UiPopperType;
 exports.UiRadio = UiRadio;
-exports.UiRadioSwitch = _sfc_main$6;
-exports.UiRadioSwitchOption = _sfc_main$7;
+exports.UiRadioSwitch = _sfc_main$8;
+exports.UiRadioSwitchOption = _sfc_main$9;
 exports.UiRadioType = UiRadioType;
 exports.UiScrollBox = UiScrollBox;
 exports.UiScrollBoxType = UiScrollBoxType;
 exports.UiSelect = _sfc_main$3;
 exports.UiSelectOption = _sfc_main$2;
 exports.UiSelectOptionGroup = _sfc_main;
+exports.UiSkeleton = UiSkeleton;
+exports.UiSkeletonType = UiSkeletonType;
 exports.UiSlider = UiSlider;
 exports.UiSliderType = UiSliderType;
 exports.UiSwitch = UiSwitch;
@@ -2824,9 +3258,9 @@ exports.UiTab = UiTab;
 exports.UiTabGroup = UiTabGroup;
 exports.UiTabGroupType = UiTabGroupType;
 exports.UiTabType = UiTabType;
-exports.UiTable = _sfc_main$4;
+exports.UiTable = _sfc_main$6;
 exports.UiTableBodyCell = UiTableBodyCell;
-exports.UiTableColumn = _sfc_main$5;
+exports.UiTableColumn = _sfc_main$7;
 exports.UiTableFooterButton = UiTableFooterButton;
 exports.UiTableFooterSection = UiTableFooterSection;
 exports.UiTableHeadCell = UiTableHeadCell;
@@ -2837,6 +3271,11 @@ exports.UiTextbox = UiTextbox;
 exports.UiTextboxType = UiTextboxType;
 exports.UiTimePicker = UiTimePicker;
 exports.UiTimePickerType = UiTimePickerType;
+exports.UiToggleButton = UiToggleButton;
+exports.UiToggleButtonSize = UiToggleButtonSize;
+exports.UiToggleButtonType = UiToggleButtonType;
+exports.UiToggleGroup = _sfc_main$4;
+exports.UiToggleGroupOption = _sfc_main$5;
 exports.UiToolbarButton = UiToolbarButton;
 exports.UiToolbarButtonType = UiToolbarButtonType;
 exports.UiToolbarLink = UiToolbarLink;
@@ -2855,5 +3294,6 @@ exports.createEndpointRoot = createEndpointRoot;
 exports.formatDate = formatDate;
 exports.formatDateTime = formatDateTime;
 exports.formatTime = formatTime;
+exports.guessSkeletonDimensionStyleValue = guessDimensionStyleValue;
 exports.mountEndpointRoot = mountEndpointRoot;
 exports.usePreview = usePreview;