@retailcrm/embed-ui-v1-components 0.9.19 → 0.9.21

package/AGENTS.md

@@ -122,5 +122,13 @@ const save = () => {}
   [`./docs/README.md`](./docs/README.md)
 - Machine-oriented package summary:
   [`./docs/AI.md`](./docs/AI.md)
+- Page composition guidelines:
+  [`./docs/AGENT-DESIGN-GUIDELINES.md`](./docs/AGENT-DESIGN-GUIDELINES.md)
 - Component profiles:
   [`./docs/PROFILES.md`](./docs/PROFILES.md)
+
+For table, catalog, registry, journal, or search-result screens, read [`./docs/AI.md`](./docs/AI.md)
+and [`./docs/AGENT-DESIGN-GUIDELINES.md`](./docs/AGENT-DESIGN-GUIDELINES.md), then check the
+`UiTable` and `UiLink` profiles before generating code. Put filters above the table, persist
+filters and pagination in GET query parameters when routing exists, and set `size="small"` on
+`UiLink` inside table cells by default.

package/README.md

@@ -46,15 +46,19 @@ import { UiButton } from '@retailcrm/embed-ui-v1-components/remote'
 
 Дополнительные материалы по пакету находятся в `docs/`:
 
+- [`AGENTS.md`](./AGENTS.md) — инструкции для AI-агентов, использующих пакет в целевом проекте.
 - [`docs/README.md`](./docs/README.md) — обзор пакета и правил использования.
 - [`docs/COMPONENTS.md`](./docs/COMPONENTS.md) — карта публичных компонентов.
 - [`docs/AI.md`](./docs/AI.md) — контекст для ИИ и автоматизаций.
 - [`docs/PROFILES.md`](./docs/PROFILES.md) — AI-friendly YAML-профили компонентов.
 - [`docs/FORMAT.md`](./docs/FORMAT.md) — формат описания компонента для AI-агентов.
+- [`docs/AGENT-DESIGN-GUIDELINES.md`](./docs/AGENT-DESIGN-GUIDELINES.md) — правила построения страниц,
+  модалок, шторок, фильтров и таблиц.
 
 ## AI и инициализация `AGENTS.md`
 
-После установки пакет показывает подсказку, что внутри есть AI-заметки и YAML-профили компонентов.
+После установки пакет показывает подсказку, что внутри есть `README.md`, `AGENTS.md`,
+AI-заметки и YAML-профили компонентов.
 
 Если в целевом проекте еще нет `AGENTS.md`, можно сгенерировать стартовый файл командой:
 

package/bin/embed-ui-v1-components.mjs

@@ -74,24 +74,28 @@ ${AGENTS_SECTION_HEADER}
 
 When working with \`${PACKAGE_NAME}\` in this project:
 
-1. Read \`./node_modules/${PACKAGE_NAME}/docs/AI.md\`.
-2. Then read \`./node_modules/${PACKAGE_NAME}/docs/COMPONENTS.md\`.
-3. Then open the relevant profile from \`./node_modules/${PACKAGE_NAME}/docs/profiles/<Component>.yml\`.
-4. Prefer those docs and profiles over guessing from internal implementation files.
-5. Import only from documented public entrypoints:
+1. Read \`./node_modules/${PACKAGE_NAME}/README.md\`.
+2. Then read \`./node_modules/${PACKAGE_NAME}/AGENTS.md\`.
+3. Then read \`./node_modules/${PACKAGE_NAME}/docs/AI.md\`.
+4. Then read \`./node_modules/${PACKAGE_NAME}/docs/COMPONENTS.md\`.
+5. Then open the relevant profile from \`./node_modules/${PACKAGE_NAME}/docs/profiles/<Component>.yml\`.
+6. Prefer those docs and profiles over guessing from internal implementation files.
+7. Import only from documented public entrypoints:
    - \`${PACKAGE_NAME}/remote\`
    - \`${PACKAGE_NAME}/host\`
    - \`${PACKAGE_NAME}/assets/...\`
-6. Prefer \`${PACKAGE_NAME}/remote\` for extension UI code.
-7. Do not import from package-internal files such as \`dist/*\`, repository-only paths, or source internals.
+8. Prefer \`${PACKAGE_NAME}/remote\` for extension UI code.
+9. Do not import from package-internal files such as \`dist/*\`, repository-only paths, or source internals.
 
 ## Suggested Reading Order
 
-1. \`docs/AI.md\`
-2. \`docs/COMPONENTS.md\`
-3. The relevant profile from \`docs/profiles/*.yml\`
-4. \`docs/FORMAT.md\` if you need to understand profile structure
-5. Storybook and public types only when no profile exists yet
+1. \`README.md\`
+2. \`AGENTS.md\`
+3. \`docs/AI.md\`
+4. \`docs/COMPONENTS.md\`
+5. The relevant profile from \`docs/profiles/*.yml\`
+6. \`docs/FORMAT.md\` if you need to understand profile structure
+7. Storybook and public types only when no profile exists yet
 ` + DEFAULT_NEWLINE
 }
 
@@ -100,24 +104,28 @@ const createAgentsSection = () => {
 
 When working with \`${PACKAGE_NAME}\` in this project:
 
-1. Read \`./node_modules/${PACKAGE_NAME}/docs/AI.md\`.
-2. Then read \`./node_modules/${PACKAGE_NAME}/docs/COMPONENTS.md\`.
-3. Then open the relevant profile from \`./node_modules/${PACKAGE_NAME}/docs/profiles/<Component>.yml\`.
-4. Prefer those docs and profiles over guessing from internal implementation files.
-5. Import only from documented public entrypoints:
+1. Read \`./node_modules/${PACKAGE_NAME}/README.md\`.
+2. Then read \`./node_modules/${PACKAGE_NAME}/AGENTS.md\`.
+3. Then read \`./node_modules/${PACKAGE_NAME}/docs/AI.md\`.
+4. Then read \`./node_modules/${PACKAGE_NAME}/docs/COMPONENTS.md\`.
+5. Then open the relevant profile from \`./node_modules/${PACKAGE_NAME}/docs/profiles/<Component>.yml\`.
+6. Prefer those docs and profiles over guessing from internal implementation files.
+7. Import only from documented public entrypoints:
    - \`${PACKAGE_NAME}/remote\`
    - \`${PACKAGE_NAME}/host\`
    - \`${PACKAGE_NAME}/assets/...\`
-6. Prefer \`${PACKAGE_NAME}/remote\` for extension UI code.
-7. Do not import from package-internal files such as \`dist/*\`, repository-only paths, or source internals.
+8. Prefer \`${PACKAGE_NAME}/remote\` for extension UI code.
+9. Do not import from package-internal files such as \`dist/*\`, repository-only paths, or source internals.
 
 ## Suggested Reading Order
 
-1. \`docs/AI.md\`
-2. \`docs/COMPONENTS.md\`
-3. The relevant profile from \`docs/profiles/*.yml\`
-4. \`docs/FORMAT.md\` if you need to understand profile structure
-5. Storybook and public types only when no profile exists yet
+1. \`README.md\`
+2. \`AGENTS.md\`
+3. \`docs/AI.md\`
+4. \`docs/COMPONENTS.md\`
+5. The relevant profile from \`docs/profiles/*.yml\`
+6. \`docs/FORMAT.md\` if you need to understand profile structure
+7. Storybook and public types only when no profile exists yet
 `
 }
 

package/bin/postinstall.mjs

@@ -26,8 +26,8 @@ const agentsPath = path.join(targetRoot, 'AGENTS.md')
 const hasAgentsFile = fs.existsSync(agentsPath)
 
 console.log('')
-console.log(`[${PACKAGE_NAME}] AI docs are available in node_modules/${PACKAGE_NAME}/docs`)
-console.log(`[${PACKAGE_NAME}] Start with docs/AI.md, docs/COMPONENTS.md, and docs/profiles/*.yml`)
+console.log(`[${PACKAGE_NAME}] AI docs are available in node_modules/${PACKAGE_NAME}/README.md, AGENTS.md, and docs`)
+console.log(`[${PACKAGE_NAME}] Start with README.md, AGENTS.md, docs/AI.md, docs/COMPONENTS.md, and docs/profiles/*.yml`)
 
 if (!hasAgentsFile) {
   console.log(`[${PACKAGE_NAME}] To scaffold AGENTS.md for this project, run:`)

package/dist/host.cjs

@@ -421,7 +421,7 @@ function render$h(_ctx, _cache) {
   ])]);
 }
 const SpriteVIP = { render: render$h };
-const ImageWorkersKey = Symbol("$image.workers");
+const ImageWorkersKey = /* @__PURE__ */ Symbol("$image.workers");
 const _hoisted_1$L = ["alt", "src"];
 const _sfc_main$10 = /* @__PURE__ */ vue.defineComponent({
   __name: "UiImage",
@@ -492,7 +492,7 @@ var STATUS = /* @__PURE__ */ ((STATUS2) => {
   STATUS2["FREE"] = "free";
   return STATUS2;
 })(STATUS || {});
-const AvatarSizeKey = Symbol("UiAvatarSize");
+const AvatarSizeKey = /* @__PURE__ */ Symbol("UiAvatarSize");
 const _hoisted_1$K = {
   key: 1,
   class: "ui-v1-avatar__unresolved"
@@ -705,7 +705,7 @@ const normalize$3 = (content) => {
   });
   return normalized;
 };
-const ElementRefKey = Symbol.for(
+const ElementRefKey = /* @__PURE__ */ Symbol.for(
   "[@retailcrm/embed-ui-v1-components]:ElementRef"
 );
 const useElementRef = () => {
@@ -1099,7 +1099,7 @@ class VueI18n {
     this._state.locale = locale2;
   }
 }
-const I18nInjectKey = Symbol("$embedI18n");
+const I18nInjectKey = /* @__PURE__ */ Symbol("$embedI18n");
 const plugin$1 = {
   install(app, options) {
     app.provide(I18nInjectKey, options instanceof VueI18n ? options : new VueI18n(options?.locale));
@@ -2591,10 +2591,10 @@ var SIZE$9 = /* @__PURE__ */ ((SIZE2) => {
   SIZE2["MD"] = "md";
   return SIZE2;
 })(SIZE$9 || {});
-const CollapseGroupRegisterKey = Symbol("UiCollapseGroup_register");
-const CollapseGroupUnregisterKey = Symbol("UiCollapseGroup_unregister");
-const CollapseGroupExpandKey = Symbol("UiCollapseGroup_expand");
-const CollapseGroupCollapseKey = Symbol("UiCollapseGroup_collapse");
+const CollapseGroupRegisterKey = /* @__PURE__ */ Symbol("UiCollapseGroup_register");
+const CollapseGroupUnregisterKey = /* @__PURE__ */ Symbol("UiCollapseGroup_unregister");
+const CollapseGroupExpandKey = /* @__PURE__ */ Symbol("UiCollapseGroup_expand");
+const CollapseGroupCollapseKey = /* @__PURE__ */ Symbol("UiCollapseGroup_collapse");
 const _hoisted_1$B = ["id", "aria-labelledby"];
 const _hoisted_2$j = ["id", "disabled", "aria-controls", "aria-expanded", "aria-disabled"];
 const _hoisted_3$f = { class: "ui-v1-collapse-box__icon-sprite" };
@@ -4481,7 +4481,7 @@ const computePosition = (reference, floating, options) => {
     platform: platformWithCache
   });
 };
-const ProcessedByPopperKey = Symbol.for("[@retailcrm/embed-ui-v1-components]:ProcessedByPopper");
+const ProcessedByPopperKey = /* @__PURE__ */ Symbol.for("[@retailcrm/embed-ui-v1-components]:ProcessedByPopper");
 const sides = ["top", "right", "bottom", "left"];
 const isPlacementLiteral = (value) => sides.some((side) => {
   return value === side || value === `${side}-start` || value === `${side}-end`;
@@ -4496,7 +4496,7 @@ const isPlacementAdaptation = (value) => {
 const isPlacementOptions = (value) => {
   return typeof value === "object" && value !== null && "side" in value && isPlacementSide(value.side) && "alignment" in value && isPlacementAlignment(value.alignment) && "adaptation" in value && isPlacementAdaptation(value.adaptation);
 };
-const PopperTargetKey = Symbol.for(
+const PopperTargetKey = /* @__PURE__ */ Symbol.for(
   "[@retailcrm/embed-ui-v1-components]:PopperTarget"
 );
 const useTarget = (target) => {
@@ -7577,7 +7577,7 @@ class LayerRegistry {
   }
 }
 const layers = new LayerRegistry();
-const ModalInjectKey = Symbol("$embedModal");
+const ModalInjectKey = /* @__PURE__ */ Symbol("$embedModal");
 const plugin = {
   install(app, options) {
     app.provide(ModalInjectKey, vue.reactive({
@@ -10462,6 +10462,12 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
     };
     const onInput = (event) => {
       const target = event.target;
+      if (inputReadonly.value) {
+        if (target) {
+          target.value = inputValue.value;
+        }
+        return;
+      }
       emit("input", target?.value ?? "");
     };
     const onFocus = (event) => emit("focus", event);
@@ -10520,7 +10526,7 @@ const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
             active: __props.expanded,
             clearable: __props.clearable,
             invalid: __props.invalid,
-            readonly: inputReadonly.value,
+            readonly: __props.readonly,
             size: __props.textboxSize,
             disabled: __props.disabled,
             "input-attributes": textboxAttributes.value,
@@ -12582,7 +12588,7 @@ var SIZE = /* @__PURE__ */ ((SIZE2) => {
   return SIZE2;
 })(SIZE || {});
 const ToolbarInjectKeys = {
-  size: Symbol("UiToolbarSize")
+  size: /* @__PURE__ */ Symbol("UiToolbarSize")
 };
 const useToolbarSize = () => vue.inject(ToolbarInjectKeys.size, vue.computed(
   () => "sm"

package/dist/host.css

@@ -3455,13 +3455,7 @@
   --ui-v1-page-header-danger-shadow-color: rgba(255, 83, 83, 0.1);
 }
 .ui-v1-page-header {
-  display: flex;
   width: 100%;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px 32px;
-  flex-wrap: wrap;
 }
 .ui-v1-page-header,
 .ui-v1-page-header *,
@@ -3485,9 +3479,13 @@
 }
 .ui-v1-page-header__main {
   display: flex;
-  justify-content: center;
+  flex-direction: column;
   align-items: baseline;
+}
+.ui-v1-page-header__body {
+  display: flex;
   gap: 16px;
+  align-items: baseline;
 }
 .ui-v1-page-header__title {
   min-width: 0;
@@ -3548,10 +3546,10 @@
   background-color: transparent !important;
 }
 .ui-v1-page-header__actions {
-  display: inline-flex;
-  align-items: center;
+  display: flex;
   gap: 16px;
-  flex: 0 0 auto;
+  float: right;
+  white-space: nowrap;
 }
 .ui-v1-page-header__addon {
   display: inline-flex;

package/dist/host.d.ts

@@ -1,5 +1,6 @@
 import { Alignment } from '@floating-ui/dom';
 import { AllowedComponentProps } from 'vue';
+import { Attrs } from 'vue';
 import { Component } from 'vue';
 import { ComponentCustomProperties } from 'vue';
 import { ComponentCustomProps } from 'vue';
@@ -30,7 +31,6 @@ import { Ref } from 'vue';
 import { RendererElement } from 'vue';
 import { RendererNode } from 'vue';
 import { SerializedEvent } from '@omnicajs/vue-remote/types/events';
-import { ShallowUnwrapRef } from 'vue';
 import { Side } from '@floating-ui/dom';
 import { Slot } from 'vue';
 import { SlotsType } from 'vue';
@@ -390,13 +390,13 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
                 invalid: boolean;
                 placeholder: string;
-                size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 id: string | undefined;
                 max: number | `${number}`;
                 min: number | `${number}`;
                 width: WidthValue;
                 step: number | `${number}` | "any";
                 disabled: boolean;
+                size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 outlined: boolean;
                 active: boolean;
                 value: string | number | null;
@@ -420,12 +420,12 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 readonly type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
                 readonly invalid: boolean;
                 readonly placeholder: string;
-                readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 readonly max: number | `${number}`;
                 readonly min: number | `${number}`;
                 readonly width: WidthValue;
                 readonly step: number | `${number}` | "any";
                 readonly disabled: boolean;
+                readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 readonly outlined: boolean;
                 readonly active: boolean;
                 readonly value: string | number | null;
@@ -455,10 +455,8 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 readonly onClear?: (() => any) | undefined;
                 readonly "onUpdate:value"?: ((value: string | number) => any) | undefined;
                 readonly "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-            } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
-            $attrs: {
-                [x: string]: unknown;
-            };
+            } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "id" | "max" | "min" | "width" | "step" | "disabled" | "size" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
+            $attrs: Attrs;
             $refs: {
                 [x: string]: unknown;
             } & {
@@ -634,13 +632,13 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
                 type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
                 invalid: boolean;
                 placeholder: string;
-                size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 id: string | undefined;
                 max: number | `${number}`;
                 min: number | `${number}`;
                 width: WidthValue;
                 step: number | `${number}` | "any";
                 disabled: boolean;
+                size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 outlined: boolean;
                 active: boolean;
                 value: string | number | null;
@@ -692,13 +690,13 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
             type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
             invalid: boolean;
             placeholder: string;
-            size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             id: string | undefined;
             max: number | `${number}`;
             min: number | `${number}`;
             width: WidthValue;
             step: number | `${number}` | "any";
             disabled: boolean;
+            size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             outlined: boolean;
             active: boolean;
             value: string | number | null;
@@ -855,16 +853,16 @@ declare const __VLS_component_2: DefineComponent_2<ExtractPropTypes<{
             onClear?: (() => any) | undefined;
             "onUpdate:value"?: ((value: string | number) => any) | undefined;
             "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-        }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
-            getSelectionStart(): number | null;
-            getSelectionEnd(): number | null;
-            setSelectionRange(start: number, end: number): void;
-            focus(): void;
-            blur(): void;
-            select(): void;
-            insert(value: string): Promise<void>;
-            clear(): void;
-        }> & {} & ComponentCustomProperties & {} & {
+        }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "id" | "max" | "min" | "width" | "step" | "disabled" | "size" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & {
+            getSelectionStart: () => number | null;
+            getSelectionEnd: () => number | null;
+            setSelectionRange: (start: number, end: number) => void;
+            focus: () => void;
+            blur: () => void;
+            select: () => void;
+            insert: (value: string) => Promise<void>;
+            clear: () => void;
+        } & {} & ComponentCustomProperties & {} & {
             $slots: {
                 prefix?(_: {}): any;
                 'leading-icon'?(_: {}): any;
@@ -1065,13 +1063,13 @@ declare function __VLS_template_2(): {
                     type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
                     invalid: boolean;
                     placeholder: string;
-                    size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                     id: string | undefined;
                     max: number | `${number}`;
                     min: number | `${number}`;
                     width: WidthValue;
                     step: number | `${number}` | "any";
                     disabled: boolean;
+                    size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                     outlined: boolean;
                     active: boolean;
                     value: string | number | null;
@@ -1095,12 +1093,12 @@ declare function __VLS_template_2(): {
                     readonly type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
                     readonly invalid: boolean;
                     readonly placeholder: string;
-                    readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                     readonly max: number | `${number}`;
                     readonly min: number | `${number}`;
                     readonly width: WidthValue;
                     readonly step: number | `${number}` | "any";
                     readonly disabled: boolean;
+                    readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                     readonly outlined: boolean;
                     readonly active: boolean;
                     readonly value: string | number | null;
@@ -1130,10 +1128,8 @@ declare function __VLS_template_2(): {
                     readonly onClear?: (() => any) | undefined;
                     readonly "onUpdate:value"?: ((value: string | number) => any) | undefined;
                     readonly "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-                } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
-                $attrs: {
-                    [x: string]: unknown;
-                };
+                } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "id" | "max" | "min" | "width" | "step" | "disabled" | "size" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
+                $attrs: Attrs;
                 $refs: {
                     [x: string]: unknown;
                 } & {
@@ -1309,13 +1305,13 @@ declare function __VLS_template_2(): {
                     type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
                     invalid: boolean;
                     placeholder: string;
-                    size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                     id: string | undefined;
                     max: number | `${number}`;
                     min: number | `${number}`;
                     width: WidthValue;
                     step: number | `${number}` | "any";
                     disabled: boolean;
+                    size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                     outlined: boolean;
                     active: boolean;
                     value: string | number | null;
@@ -1367,13 +1363,13 @@ declare function __VLS_template_2(): {
                 type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
                 invalid: boolean;
                 placeholder: string;
-                size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 id: string | undefined;
                 max: number | `${number}`;
                 min: number | `${number}`;
                 width: WidthValue;
                 step: number | `${number}` | "any";
                 disabled: boolean;
+                size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
                 outlined: boolean;
                 active: boolean;
                 value: string | number | null;
@@ -1530,16 +1526,16 @@ declare function __VLS_template_2(): {
                 onClear?: (() => any) | undefined;
                 "onUpdate:value"?: ((value: string | number) => any) | undefined;
                 "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-            }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
-                getSelectionStart(): number | null;
-                getSelectionEnd(): number | null;
-                setSelectionRange(start: number, end: number): void;
-                focus(): void;
-                blur(): void;
-                select(): void;
-                insert(value: string): Promise<void>;
-                clear(): void;
-            }> & {} & ComponentCustomProperties & {} & {
+            }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "id" | "max" | "min" | "width" | "step" | "disabled" | "size" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & {
+                getSelectionStart: () => number | null;
+                getSelectionEnd: () => number | null;
+                setSelectionRange: (start: number, end: number) => void;
+                focus: () => void;
+                blur: () => void;
+                select: () => void;
+                insert: (value: string) => Promise<void>;
+                clear: () => void;
+            } & {} & ComponentCustomProperties & {} & {
                 $slots: {
                     prefix?(_: {}): any;
                     'leading-icon'?(_: {}): any;
@@ -2454,13 +2450,13 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
             invalid: boolean;
             placeholder: string;
-            size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             id: string | undefined;
             max: number | `${number}`;
             min: number | `${number}`;
             width: WidthValue;
             step: number | `${number}` | "any";
             disabled: boolean;
+            size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             outlined: boolean;
             active: boolean;
             value: string | number | null;
@@ -2484,12 +2480,12 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             readonly type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
             readonly invalid: boolean;
             readonly placeholder: string;
-            readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             readonly max: number | `${number}`;
             readonly min: number | `${number}`;
             readonly width: WidthValue;
             readonly step: number | `${number}` | "any";
             readonly disabled: boolean;
+            readonly size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             readonly outlined: boolean;
             readonly active: boolean;
             readonly value: string | number | null;
@@ -2519,10 +2515,8 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             readonly onClear?: (() => any) | undefined;
             readonly "onUpdate:value"?: ((value: string | number) => any) | undefined;
             readonly "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-        } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
-        $attrs: {
-            [x: string]: unknown;
-        };
+        } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "type" | "invalid" | "placeholder" | "id" | "max" | "min" | "width" | "step" | "disabled" | "size" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes">;
+        $attrs: Attrs;
         $refs: {
             [x: string]: unknown;
         } & {
@@ -2698,13 +2692,13 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
             type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
             invalid: boolean;
             placeholder: string;
-            size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             id: string | undefined;
             max: number | `${number}`;
             min: number | `${number}`;
             width: WidthValue;
             step: number | `${number}` | "any";
             disabled: boolean;
+            size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
             outlined: boolean;
             active: boolean;
             value: string | number | null;
@@ -2756,13 +2750,13 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
         type: "text" | "url" | "search" | "email" | "password" | "tel" | TYPE_2;
         invalid: boolean;
         placeholder: string;
-        size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
         id: string | undefined;
         max: number | `${number}`;
         min: number | `${number}`;
         width: WidthValue;
         step: number | `${number}` | "any";
         disabled: boolean;
+        size: "xs" | "sm" | "lg" | "md" | "xl" | SIZE_4;
         outlined: boolean;
         active: boolean;
         value: string | number | null;
@@ -2919,16 +2913,16 @@ export declare const UiPageHeaderTitle: DefineComponent_2<ExtractPropTypes<{
         onClear?: (() => any) | undefined;
         "onUpdate:value"?: ((value: string | number) => any) | undefined;
         "onUpdate:focused"?: ((focused: boolean) => any) | undefined;
-    }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "size" | "id" | "max" | "min" | "width" | "step" | "disabled" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & ShallowUnwrapRef<{
-        getSelectionStart(): number | null;
-        getSelectionEnd(): number | null;
-        setSelectionRange(start: number, end: number): void;
-        focus(): void;
-        blur(): void;
-        select(): void;
-        insert(value: string): Promise<void>;
-        clear(): void;
-    }> & {} & ComponentCustomProperties & {} & {
+    }>, "insert" | "blur" | "focus" | "select" | "clear" | "getSelectionStart" | "getSelectionEnd" | "setSelectionRange" | ("type" | "invalid" | "placeholder" | "id" | "max" | "min" | "width" | "step" | "disabled" | "size" | "outlined" | "active" | "value" | "required" | "clearable" | "readonly" | "autocomplete" | "inputmode" | "maxlength" | "decimals" | "prefix" | "suffix" | "autofocus" | "autoselect" | "multiline" | "rows" | "cols" | "autofit" | "inputAttributes")> & {
+        getSelectionStart: () => number | null;
+        getSelectionEnd: () => number | null;
+        setSelectionRange: (start: number, end: number) => void;
+        focus: () => void;
+        blur: () => void;
+        select: () => void;
+        insert: (value: string) => Promise<void>;
+        clear: () => void;
+    } & {} & ComponentCustomProperties & {} & {
         $slots: {
             prefix?(_: {}): any;
             'leading-icon'?(_: {}): any;
@@ -3023,9 +3017,9 @@ export declare const UiRadioSwitchOptionShell: DefineComponent_2<ExtractPropType
         default: boolean;
     };
 }>> & Readonly<{}>, {
-    size: "sm" | "lg" | "md" | RADIO_SWITCH_SIZE | undefined;
     id: string;
     disabled: boolean;
+    size: "sm" | "lg" | "md" | RADIO_SWITCH_SIZE | undefined;
     appearance: "default" | "section" | RADIO_SWITCH_APPEARANCE | undefined;
     checked: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
@@ -3289,8 +3283,8 @@ export declare const UiTabGroup: DefineComponent_2<ExtractPropTypes<{
     };
 }>> & Readonly<{
     onChange?: ((id: string) => any) | undefined;
-    "onUpdate:menuExpanded"?: ((expanded: boolean) => any) | undefined;
     onLayout?: ((layout: TabLayout) => any) | undefined;
+    "onUpdate:menuExpanded"?: ((expanded: boolean) => any) | undefined;
     "onUpdate:activeId"?: ((id: string) => any) | undefined;
     "onUpdate:focusableId"?: ((id: string | null) => any) | undefined;
 }>, {
@@ -3572,8 +3566,8 @@ export declare const UiToggleGroupRoot: DefineComponent_2<ExtractPropTypes<{
         default: string;
     };
 }>> & Readonly<{}>, {
-    size: "xs" | "sm" | "lg" | "md" | UiToggleButtonSize | undefined;
     disabled: boolean;
+    size: "xs" | "sm" | "lg" | "md" | UiToggleButtonSize | undefined;
     rubber: boolean;
     ariaOrientation: "horizontal" | "vertical" | undefined;
     ariaLabel: string;