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

package/dist/remote.cjs

@@ -575,17 +575,17 @@ function render$1(_ctx, _cache) {
   ])]);
 }
 const IconCheckmarkCircle = { render: render$1 };
-var APPEARANCE$1 = /* @__PURE__ */ ((APPEARANCE2) => {
+var APPEARANCE$2 = /* @__PURE__ */ ((APPEARANCE2) => {
   APPEARANCE2["DEFAULT"] = "default";
   APPEARANCE2["SECTION"] = "section";
   return APPEARANCE2;
-})(APPEARANCE$1 || {});
-var SIZE$3 = /* @__PURE__ */ ((SIZE2) => {
+})(APPEARANCE$2 || {});
+var SIZE$4 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["SM"] = "sm";
   SIZE2["MD"] = "md";
   SIZE2["LG"] = "lg";
   return SIZE2;
-})(SIZE$3 || {});
+})(SIZE$4 || {});
 const AppearanceKey = Symbol("UiRadioSwitchAppearance");
 const SizeKey$1 = Symbol("UiRadioSwitchSize");
 const RegistryKey$1 = Symbol("UiRadioSwitchRegistry");
@@ -593,8 +593,8 @@ const UpdateKey = Symbol("UiRadioSwitchUpdate");
 const FocusableIdKey$1 = Symbol("UiRadioSwitchFocusableId");
 const SetFocusableIdKey$1 = Symbol("UiRadioSwitchSetFocusableId");
 const MoveFocusKey$1 = Symbol("UiRadioSwitchMoveFocus");
-const useAppearance = () => vue.inject(AppearanceKey, vue.computed(() => APPEARANCE$1.DEFAULT));
-const useSize$1 = () => vue.inject(SizeKey$1, vue.computed(() => SIZE$3.MD));
+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: () => {
   },
@@ -773,7 +773,7 @@ const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
                 ])
               ])) : vue.createCommentVNode("", true)
             ]),
-            vue.unref(appearance) === vue.unref(APPEARANCE$1).SECTION ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+            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)
@@ -816,14 +816,14 @@ const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     /** Внешний вид */
     appearance: {
       type: String,
-      default: APPEARANCE$1.DEFAULT,
-      validator: (appearance) => Object.values(APPEARANCE$1).includes(appearance)
+      default: APPEARANCE$2.DEFAULT,
+      validator: (appearance) => Object.values(APPEARANCE$2).includes(appearance)
     },
     /** Размер */
     size: {
       type: String,
-      default: SIZE$3.MD,
-      validator: (size) => Object.values(SIZE$3).includes(size)
+      default: SIZE$4.MD,
+      validator: (size) => Object.values(SIZE$4).includes(size)
     },
     /** Растягивание контейнера в зависимости от контента */
     rubber: {
@@ -959,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,
@@ -1569,14 +1574,30 @@ const UiTag = remote.defineRemoteComponent(
   UiTagType,
   ["click", "focus", "blur", "remove"]
 );
-var SIZE$2 = /* @__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$2 || {});
+})(SIZE$3 || {});
 const events = [
   "input",
   "keydown",
@@ -2362,8 +2383,14 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     /** Размер поля ввода */
     textboxSize: {
       type: String,
-      validator: (size) => Object.values(SIZE$2).includes(size),
-      default: SIZE$2.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: {
@@ -2632,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",
@@ -2685,13 +2713,13 @@ function render(_ctx, _cache) {
   ])]);
 }
 const IconAddCircleOutlined = { render };
-var SIZE$1 = /* @__PURE__ */ ((SIZE2) => {
+var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["XS"] = "xs";
   SIZE2["SM"] = "sm";
   SIZE2["MD"] = "md";
   SIZE2["LG"] = "lg";
   return SIZE2;
-})(SIZE$1 || {});
+})(SIZE$2 || {});
 const _hoisted_1 = ["id", "aria-selected", "aria-current"];
 const _hoisted_2 = ["innerHTML"];
 const _hoisted_3 = ["innerHTML"];
@@ -2726,8 +2754,8 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     /** Размер шрифта, иконок и внутренних отступов компонента */
     size: {
       type: String,
-      validator: (size) => Object.values(SIZE$1).includes(size),
-      default: SIZE$1.MD
+      validator: (size) => Object.values(SIZE$2).includes(size),
+      default: SIZE$2.MD
     },
     /** Счетчик количества */
     counter: {
@@ -3080,6 +3108,26 @@ 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";
@@ -3130,8 +3178,11 @@ function detectLocale() {
 exports.ALIGN = ALIGN;
 exports.DIRECTION = DIRECTION;
 exports.ImageWorkersKey = ImageWorkersKey;
-exports.RADIO_SWITCH_APPEARANCE = APPEARANCE$1;
-exports.RADIO_SWITCH_SIZE = SIZE$3;
+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;
@@ -3197,6 +3248,8 @@ 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;
@@ -3241,5 +3294,6 @@ exports.createEndpointRoot = createEndpointRoot;
 exports.formatDate = formatDate;
 exports.formatDateTime = formatDateTime;
 exports.formatTime = formatTime;
+exports.guessSkeletonDimensionStyleValue = guessDimensionStyleValue;
 exports.mountEndpointRoot = mountEndpointRoot;
 exports.usePreview = usePreview;

package/dist/remote.d.ts

@@ -617,6 +617,12 @@ declare const __VLS_component_5: DefineComponent<ExtractPropTypes<{
         validator: (size: string) => boolean;
         default: SIZE_4;
     };
+    /** Ширина селекта. fit — по содержимому, fluid — на всю ширину контейнера */
+    width: {
+        type: PropType<WidthValue>;
+        validator: (value: unknown) => value is WidthValue | null | undefined;
+        default: WIDTH;
+    };
     /** Наличие множественного выбора среди элементов выпадающего списка */
     multiple: {
         type: BooleanConstructor;
@@ -727,6 +733,12 @@ declare const __VLS_component_5: DefineComponent<ExtractPropTypes<{
         validator: (size: string) => boolean;
         default: SIZE_4;
     };
+    /** Ширина селекта. fit — по содержимому, fluid — на всю ширину контейнера */
+    width: {
+        type: PropType<WidthValue>;
+        validator: (value: unknown) => value is WidthValue | null | undefined;
+        default: WIDTH;
+    };
     /** Наличие множественного выбора среди элементов выпадающего списка */
     multiple: {
         type: BooleanConstructor;
@@ -751,6 +763,7 @@ declare const __VLS_component_5: DefineComponent<ExtractPropTypes<{
     id: string;
     placeholder: string;
     disabled: boolean;
+    width: WidthValue;
     expanded: boolean;
     targetTriggers: TriggerSchema | Trigger[];
     popperTriggers: TriggerSchema | Trigger[];
@@ -829,7 +842,7 @@ declare const __VLS_component_5: DefineComponent<ExtractPropTypes<{
             R,
             R,
             OnCleanup
-        ]) => any : (...args: [
+        ]) => any : (... /** @type { [typeof __VLS_components.UiPopperConnector, typeof __VLS_components.UiPopperConnector, ] } */args: [
             any,
             any,
             OnCleanup
@@ -1173,7 +1186,7 @@ declare function __VLS_template_5(): {
                 R,
                 R,
                 OnCleanup
-            ]) => any : (...args: [
+            ]) => any : (... /** @type { [typeof __VLS_components.UiPopperConnector, typeof __VLS_components.UiPopperConnector, ] } */args: [
                 any,
                 any,
                 OnCleanup
@@ -1412,6 +1425,7 @@ export declare type Group<T, GroupData> = {
     rows: readonly T[];
 };
 export declare type GroupBy<T, GroupData> = (rows: readonly T[]) => Group<T, GroupData>[];
+export declare function guessSkeletonDimensionStyleValue(value: Numeric | null): string | null;
 export declare const ImageWorkersKey: InjectionKey<Ref<string[]>>;
 declare enum INPUTMODE {
     DECIMAL = "decimal",
@@ -1554,6 +1568,20 @@ declare enum SIZE_8 {
     MD = "md",
     LG = "lg"
 }
+export declare enum SKELETON_ANIMATION {
+    PULSE = "pulse",
+    SHIMMER = "shimmer"
+}
+export declare enum SKELETON_APPEARANCE {
+    CIRCLE = "circle",
+    RECTANGLE = "rectangle",
+    TEXT = "text"
+}
+export declare enum SKELETON_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
 declare enum STATUS {
     NONE = "",
     BUSY = "busy",
@@ -3674,6 +3702,66 @@ declare type UiSelectPopperProperties = {
     multiple?: boolean;
     ticker?: boolean;
 };
+export declare const UiSkeleton: {
+    new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<ExtractPropTypes<RemoteProperties<UiSkeletonProperties>>>, {
+        [x: string]: unknown;
+    }, {
+        [x: string]: never;
+    }, {
+        [x: string]: never;
+    }, MethodOptions, {
+        click: (event: SerializedEvent) => boolean;
+        focus: (event: SerializedFocusEvent) => boolean;
+        blur: (event: SerializedEvent) => boolean;
+    }, ComponentOptionsMixin, {}, PublicProps, {}, true, {}, {}, GlobalComponents, GlobalDirectives, string, {}, any, ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: ComputedOptions;
+        M: MethodOptions;
+        Defaults: {};
+    } & {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<ExtractPropTypes<RemoteProperties<UiSkeletonProperties>>>, {
+        [x: string]: unknown;
+    }, {
+        [x: string]: never;
+    }, ComputedOptions & {
+        [x: string]: never;
+    }, MethodOptions, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & ComponentOptionsBase<Readonly<ExtractPropTypes<RemoteProperties<UiSkeletonProperties>>>, {
+    [x: string]: unknown;
+}, {
+    [x: string]: never;
+}, {
+    [x: string]: never;
+}, MethodOptions, {
+    click: (event: SerializedEvent) => boolean;
+    focus: (event: SerializedFocusEvent) => boolean;
+    blur: (event: SerializedEvent) => boolean;
+}, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & VNodeProps & AllowedComponentProps & ComponentCustomProps & (new () => {
+    $slots: {
+        [x: string]: never;
+    } & {
+        default?: (...args: never[]) => unknown;
+    };
+});
+export declare type UiSkeletonProperties = {
+    appearance?: SKELETON_APPEARANCE | `${SKELETON_APPEARANCE}`;
+    size?: SKELETON_SIZE | `${SKELETON_SIZE}`;
+    animation?: SKELETON_ANIMATION | `${SKELETON_ANIMATION}`;
+    width?: Numeric | null;
+    height?: Numeric | null;
+};
+export declare const UiSkeletonType: SchemaType_2<"UiSkeleton", RemoteProperties<UiSkeletonProperties>, Record<string, never>>;
 export declare const UiSlider: {
     new (...args: any[]): CreateComponentPublicInstanceWithMixins<Readonly<ExtractPropTypes<RemoteProperties<UiSliderProperties>>>, {
         [x: string]: unknown;
@@ -4609,6 +4697,7 @@ declare type UiTextboxProperties = {
     /** Максимальное количество знаков после запятой (для inputmode="decimal"). '*' — без ограничений */
     decimals?: number | `${number}` | '*';
     size?: SIZE_4 | `${SIZE_4}`;
+    width?: WidthValue;
     placeholder?: string;
     prefix?: string;
     suffix?: string;
@@ -5258,6 +5347,11 @@ declare type ViolationPayload = {
     value: number | null;
     codes: VIOLATION[];
 };
+declare enum WIDTH {
+    FIT = "fit",
+    FLUID = "fluid"
+}
+declare type WidthValue = Numeric | WIDTH | `${WIDTH}`;
 declare const YANDEX_MAP_PLUGIN: {
     readonly LOCATOR: "locator";
 };

package/dist/remote.js

@@ -573,17 +573,17 @@ function render$1(_ctx, _cache) {
   ])]);
 }
 const IconCheckmarkCircle = { render: render$1 };
-var APPEARANCE$1 = /* @__PURE__ */ ((APPEARANCE2) => {
+var APPEARANCE$2 = /* @__PURE__ */ ((APPEARANCE2) => {
   APPEARANCE2["DEFAULT"] = "default";
   APPEARANCE2["SECTION"] = "section";
   return APPEARANCE2;
-})(APPEARANCE$1 || {});
-var SIZE$3 = /* @__PURE__ */ ((SIZE2) => {
+})(APPEARANCE$2 || {});
+var SIZE$4 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["SM"] = "sm";
   SIZE2["MD"] = "md";
   SIZE2["LG"] = "lg";
   return SIZE2;
-})(SIZE$3 || {});
+})(SIZE$4 || {});
 const AppearanceKey = Symbol("UiRadioSwitchAppearance");
 const SizeKey$1 = Symbol("UiRadioSwitchSize");
 const RegistryKey$1 = Symbol("UiRadioSwitchRegistry");
@@ -591,8 +591,8 @@ const UpdateKey = Symbol("UiRadioSwitchUpdate");
 const FocusableIdKey$1 = Symbol("UiRadioSwitchFocusableId");
 const SetFocusableIdKey$1 = Symbol("UiRadioSwitchSetFocusableId");
 const MoveFocusKey$1 = Symbol("UiRadioSwitchMoveFocus");
-const useAppearance = () => inject(AppearanceKey, computed(() => APPEARANCE$1.DEFAULT));
-const useSize$1 = () => inject(SizeKey$1, computed(() => SIZE$3.MD));
+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: () => {
   },
@@ -771,7 +771,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 ])
               ])) : createCommentVNode("", true)
             ]),
-            unref(appearance) === unref(APPEARANCE$1).SECTION ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            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)
@@ -814,14 +814,14 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     /** Внешний вид */
     appearance: {
       type: String,
-      default: APPEARANCE$1.DEFAULT,
-      validator: (appearance) => Object.values(APPEARANCE$1).includes(appearance)
+      default: APPEARANCE$2.DEFAULT,
+      validator: (appearance) => Object.values(APPEARANCE$2).includes(appearance)
     },
     /** Размер */
     size: {
       type: String,
-      default: SIZE$3.MD,
-      validator: (size) => Object.values(SIZE$3).includes(size)
+      default: SIZE$4.MD,
+      validator: (size) => Object.values(SIZE$4).includes(size)
     },
     /** Растягивание контейнера в зависимости от контента */
     rubber: {
@@ -957,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,
@@ -1567,14 +1572,30 @@ const UiTag = defineRemoteComponent(
   UiTagType,
   ["click", "focus", "blur", "remove"]
 );
-var SIZE$2 = /* @__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$2 || {});
+})(SIZE$3 || {});
 const events = [
   "input",
   "keydown",
@@ -2360,8 +2381,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     /** Размер поля ввода */
     textboxSize: {
       type: String,
-      validator: (size) => Object.values(SIZE$2).includes(size),
-      default: SIZE$2.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: {
@@ -2630,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",
@@ -2683,13 +2711,13 @@ function render(_ctx, _cache) {
   ])]);
 }
 const IconAddCircleOutlined = { render };
-var SIZE$1 = /* @__PURE__ */ ((SIZE2) => {
+var SIZE$2 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["XS"] = "xs";
   SIZE2["SM"] = "sm";
   SIZE2["MD"] = "md";
   SIZE2["LG"] = "lg";
   return SIZE2;
-})(SIZE$1 || {});
+})(SIZE$2 || {});
 const _hoisted_1 = ["id", "aria-selected", "aria-current"];
 const _hoisted_2 = ["innerHTML"];
 const _hoisted_3 = ["innerHTML"];
@@ -2724,8 +2752,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     /** Размер шрифта, иконок и внутренних отступов компонента */
     size: {
       type: String,
-      validator: (size) => Object.values(SIZE$1).includes(size),
-      default: SIZE$1.MD
+      validator: (size) => Object.values(SIZE$2).includes(size),
+      default: SIZE$2.MD
     },
     /** Счетчик количества */
     counter: {
@@ -3078,6 +3106,26 @@ 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";
@@ -3129,8 +3177,11 @@ export {
   ALIGN,
   DIRECTION,
   ImageWorkersKey,
-  APPEARANCE$1 as RADIO_SWITCH_APPEARANCE,
-  SIZE$3 as RADIO_SWITCH_SIZE,
+  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,
@@ -3196,6 +3247,8 @@ export {
   _sfc_main$3 as UiSelect,
   _sfc_main$2 as UiSelectOption,
   _sfc_main as UiSelectOptionGroup,
+  UiSkeleton,
+  UiSkeletonType,
   UiSlider,
   UiSliderType,
   UiSwitch,
@@ -3240,6 +3293,7 @@ export {
   formatDate,
   formatDateTime,
   formatTime,
+  guessDimensionStyleValue as guessSkeletonDimensionStyleValue,
   mountEndpointRoot,
   usePreview
 };

package/docs/COMPONENTS.md

@@ -57,6 +57,7 @@ Detailed AI-friendly profiles are collected in [`PROFILES.md`](./PROFILES.md).
 - [`UiInfobox`](./profiles/UiInfobox.yml): highlighted explanatory block
 - [`UiError`](./profiles/UiError.yml): compact error state
 - [`UiLoader`](./profiles/UiLoader.yml): loading indicator
+- [`UiSkeleton`](./profiles/UiSkeleton.yml): content placeholder for loading state
 - [`UiTag`](./profiles/UiTag.yml): labels and statuses
 
 ## Overlays And Modal Patterns

package/docs/profiles/UiSkeleton.yml

@@ -0,0 +1,41 @@
+component: UiSkeleton
+summary: >
+  UiSkeleton displays a placeholder block for loading content. It supports text,
+  rectangle and circle appearances with pulse or shimmer animation.
+
+public_import:
+  from: '@retailcrm/embed-ui-v1-components/remote'
+  named:
+    - UiSkeleton
+
+use_when:
+  - You need a content placeholder before actual data is loaded.
+  - You need line, card or avatar-like loading placeholders.
+
+avoid_when:
+  - You need a spinner-like indicator instead of a content-shaped placeholder.
+
+api:
+  key_props:
+    - name: appearance
+    - name: size
+    - name: animation
+    - name: width
+    - name: height
+
+rendered_structure:
+  descriptive_only: true
+  root:
+    shape: div.ui-v1-skeleton
+    tag: div
+
+geometry:
+  layout: inline block or block placeholder
+  root_display: inline-block
+  width_behavior: preset width by appearance and size, overridable via width prop
+
+ai_notes:
+  do:
+    - Use text appearance for line placeholders.
+    - Use circle appearance for avatar placeholders.
+    - Override width or height only when the preset size is not enough.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@retailcrm/embed-ui-v1-components",
   "bin": "./bin/embed-ui-v1-components.mjs",
   "type": "module",
-  "version": "0.9.16",
+  "version": "0.9.17",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": "git@github.com:retailcrm/embed-ui.git",