vueless 0.0.112 → 0.0.114

package/directive.clickOutside/index.js

@@ -0,0 +1,53 @@
+import { unref } from "vue";
+
+function clickOutside(target, handler, options) {
+  const { capture = true } = options;
+
+  let shouldListen = true;
+
+  const el = unref(target);
+
+  function onClick(event) {
+    if (!el || el === event.target || event.composedPath().includes(el)) return;
+
+    if (!shouldListen) {
+      shouldListen = true;
+
+      return;
+    }
+
+    handler(event);
+  }
+
+  function onPointerdown(event) {
+    shouldListen = !!(el && !event.composedPath().includes(el));
+  }
+
+  window.addEventListener("click", onClick, { passive: true, capture });
+  window.addEventListener("pointerdown", onPointerdown, { passive: true });
+
+  function removeEvents() {
+    window.removeEventListener("click", onClick, { capture, passive: true });
+    window.removeEventListener("pointerdown", onPointerdown, { passive: true });
+  }
+
+  return removeEvents;
+}
+
+export default {
+  mounted(el, binding) {
+    const capture = !binding.modifiers.bubble;
+
+    if (typeof binding.value === "function") {
+      el._clickOutsideRemove = clickOutside(el, binding.value, { capture });
+    } else {
+      const [handler, options] = binding.value;
+
+      el._clickOutsideRemove = clickOutside(el, handler, Object.assign({ capture }, options));
+    }
+  },
+
+  unmounted(el) {
+    el._clickOutsideRemove();
+  },
+};

package/directive.tooltip/index.js

@@ -21,11 +21,13 @@ export default {
   mounted(el, bindings) {
     tippy(el, merge(mergedSettings, bindings.value || {}));
   },
+
   updated(el, bindings) {
     if (!el._tippy) return;
 
     el._tippy.setProps(merge(mergedSettings, bindings.value || {}));
   },
+
   unmounted(el) {
     if (!el._tippy) return;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.button/index.vue

@@ -65,7 +65,7 @@ const props = defineProps({
 
   /**
    * Button size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg
    */
   size: {
     type: String,

package/ui.container-row/composables/attrs.composable.js

@@ -13,7 +13,13 @@ export function useAttrs(props) {
     compoundVariants: wrapper.compoundVariants,
   });
 
-  const wrapperClasses = computed(() => cvaWrapper({ noMobile: props.noMobile }));
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      gap: props.gap,
+      align: props.align,
+      noMobile: props.noMobile,
+    }),
+  );
 
   const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
 

package/ui.container-row/configs/default.config.js

@@ -1,14 +1,43 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex items-start w-full",
+    base: "flex flex-col md:flex-row w-full",
     variants: {
+      gap: {
+        none: "space-y-0 md:space-x-0",
+        "2xs": "space-y-1 md:space-x-1",
+        xs: "space-y-2 md:space-x-2",
+        sm: "space-y-3 md:space-x-3",
+        md: "space-y-4 md:space-x-4",
+        lg: "space-y-5 md:space-x-5",
+        xl: "space-y-6 md:space-x-6",
+        "2xl": "space-y-8 md:space-x-8",
+      },
+      align: {
+        end: "items-end",
+        start: "items-start",
+        center: "items-center",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+      },
       noMobile: {
-        true: "flex-row space-x-4",
-        false: "flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4",
+        true: "flex-row space-y-0",
+        false: "md:space-y-0",
       },
     },
+    compoundVariants: [
+      { gap: "none", noMobile: true, class: "space-x-0" },
+      { gap: "2xs", noMobile: true, class: "space-x-1" },
+      { gap: "xs", noMobile: true, class: "space-x-2" },
+      { gap: "sm", noMobile: true, class: "space-x-3" },
+      { gap: "md", noMobile: true, class: "space-x-4" },
+      { gap: "lg", noMobile: true, class: "space-x-5" },
+      { gap: "xl", noMobile: true, class: "space-x-6" },
+      { gap: "2xl", noMobile: true, class: "space-x-8" },
+    ],
   },
   defaultVariants: {
+    gap: "md",
+    align: "start",
     noMobile: false,
   },
 };

package/ui.container-row/index.stories.js

@@ -2,6 +2,8 @@ import { getArgTypes } from "../service.storybook";
 
 import URow from "../ui.container-row";
 import UInput from "../ui.form-input";
+import UGroup from "../ui.container-group";
+import UButton from "../ui.button";
 
 export default {
   id: "5020",
@@ -13,24 +15,67 @@ export default {
 };
 
 const DefaultTemplate = (args) => ({
-  components: { URow, UInput },
+  components: { URow, UInput, UButton },
   setup() {
     return { args };
   },
   template: `
     <URow v-bind="args">
-      ${args.slotTemplate}
+      ${
+        args.slotTemplate ||
+        `
+          <UInput label="Name" />
+          <UButton label="Submit" size="xs" block />
+        `
+      }
     </URow>
   `,
 });
 
-export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <UInput label="Name" />
-    <UInput label="Lastname" />
+const GapTemplate = (args, { argTypes } = {}) => ({
+  components: { UGroup, URow, UInput },
+  setup() {
+    return {
+      args,
+      gaps: argTypes.gap.options,
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <URow v-for="(gap, index) in gaps" :key="index" v-bind="args" :gap="gap" align="center">
+        <UInput :label="gap" />
+        <UInput :label="gap" />
+      </URow>
+    </UGroup>
   `,
-};
+});
+
+const AlignTemplate = (args, { argTypes } = {}) => ({
+  components: { UGroup, URow, UInput, UButton },
+  setup() {
+    return {
+      args,
+      aligns: argTypes.align.options,
+    };
+  },
+  template: `
+    <UGroup size="lg">
+      <URow v-for="(align, index) in aligns" :key="index" v-bind="args" :align="align">
+        <UButton :label="align" size="xs" block />
+        <UInput label="Name" />
+      </URow>
+    </UGroup>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Gap = GapTemplate.bind({});
+Gap.args = {};
+
+export const Align = AlignTemplate.bind({});
+Align.args = {};
 
 export const noMobile = DefaultTemplate.bind({});
 noMobile.args = {
@@ -53,8 +98,8 @@ nestedRows.args = {
   `,
 };
 
-export const textBlocks = DefaultTemplate.bind({});
-textBlocks.args = {
+export const textBlocksExample = DefaultTemplate.bind({});
+textBlocksExample.args = {
   slotTemplate: `
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit,

package/ui.container-row/index.vue

@@ -16,6 +16,24 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "URow", inheritAttrs: false });
 
 const props = defineProps({
+  /**
+   * Row spacing between nested elements.
+   * @values none, 2xs, xs, sm, md, lg, xl, 2xl
+   */
+  gap: {
+    type: String,
+    default: UIService.get(defaultConfig, URow).default.gap,
+  },
+
+  /**
+   * Row nested elements vertical align (align-items).
+   * @values start, end, center, stretch, baseline
+   */
+  align: {
+    type: String,
+    default: UIService.get(defaultConfig, URow).default.align,
+  },
+
   /**
    * Disables mobile adaptivity.
    */

package/ui.dropdown-badge/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <UBadge
       :id="id"
-      ref="badgeRef"
       :label="label"
       :size="size"
       :color="color"
@@ -10,8 +9,7 @@
       :variant="variant"
       :data-cy="`${dataCy}-badge`"
       v-bind="badgeAttrs"
-      @click.stop="onClickBadge"
-      @blur="onBlurBadge"
+      @click="onClickBadge"
     >
       <template #right>
         <UIcon
@@ -26,26 +24,32 @@
       </template>
     </UBadge>
 
-    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
+    <div
+      v-if="isShownOptions && hasSlotContent($slots['default'])"
+      v-bind="listWrapperAttrs"
+      @click="onClickList"
+    >
       <!-- @slot Use it to add dropdown list. -->
       <slot />
     </div>
 
     <UDropdownList
       v-if="isShownOptions && !hasSlotContent($slots['default'])"
-      v-model="selectValue"
+      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
       :label-key="labelKey"
       :data-cy="`${dataCy}-item`"
       v-bind="listAttrs"
+      @mousedown.stop
+      @click.stop="onClickList"
     />
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
+import { computed, provide, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UBadge from "../ui.text-badge";
@@ -53,6 +57,8 @@ import UDropdownList from "../ui.dropdown-list";
 
 import UIService, { getRandomId } from "../service.ui";
 
+import vClickOutside from "../directive.clickOutside";
+
 import defaultConfig from "./configs/default.config";
 import { UDropdownBadge } from "./constants";
 import { useAttrs } from "./composables/attrs.composable";
@@ -61,14 +67,6 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "UDropdownBadge", inheritAttrs: false });
 
 const props = defineProps({
-  /**
-   * Selected value.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-
   /**
    * Badge label.
    */
@@ -189,25 +187,16 @@ const props = defineProps({
   },
 });
 
-provide("hideDropdownOptions", () => hideOptions);
+const emit = defineEmits(["select"]);
 
-const emit = defineEmits(["update:modelValue"]);
+provide("hideDropdownOptions", () => hideOptions);
 
 const isShownOptions = ref(false);
-
-const badgeRef = ref(null);
+const selectedItem = ref("");
 
 const { config, listWrapperAttrs, wrapperAttrs, badgeAttrs, listAttrs, iconAttrs, hasSlotContent } =
   useAttrs(props, { isShownOptions });
 
-const selectValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    isShownOptions.value = false;
-    emit("update:modelValue", value);
-  },
-});
-
 const iconSize = computed(() => {
   const sizes = {
     sm: "xs",
@@ -218,10 +207,9 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-watch(() => props.modelValue, hideOptions);
-
-onMounted(() => window.addEventListener("click", onClickOutside));
-onUnmounted(() => window.removeEventListener("click", onClickOutside));
+watch(selectedItem, () => {
+  emit("select", selectedItem.value);
+});
 
 function onClickBadge() {
   isShownOptions.value = !isShownOptions.value;
@@ -231,17 +219,7 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickOutside(event) {
-  if (!badgeRef.value?.wrapperRef?.contains(event.target)) {
-    hideOptions();
-  }
-}
-
-function onBlurBadge(event) {
-  setTimeout(() => {
-    if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
-      hideOptions();
-    }
-  }, 100);
+function onClickList() {
+  hideOptions();
 }
 </script>

package/ui.dropdown-button/index.vue

@@ -1,8 +1,7 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <UButton
       :id="id"
-      ref="buttonRef"
       :label="label"
       :size="size"
       :variant="variant"
@@ -13,8 +12,7 @@
       :disabled="disabled"
       :data-cy="`${dataCy}-button`"
       v-bind="buttonAttrs"
-      @click.stop="onClickButton"
-      @blur="onBlurButton"
+      @click="onClickButton"
     >
       <template #right>
         <UIcon
@@ -29,14 +27,18 @@
       </template>
     </UButton>
 
-    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
+    <div
+      v-if="isShownOptions && hasSlotContent($slots['default'])"
+      v-bind="listWrapperAttrs"
+      @click="onClickList"
+    >
       <!-- @slot Use it to add dropdown list. -->
       <slot />
     </div>
 
     <UDropdownList
       v-if="isShownOptions && !hasSlotContent($slots['default'])"
-      v-model="selectValue"
+      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
@@ -45,13 +47,13 @@
       tabindex="-1"
       v-bind="listAttrs"
       @mousedown.stop
-      @click.stop
+      @click.stop="onClickList"
     />
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
+import { computed, provide, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import UButton from "../ui.button";
@@ -59,6 +61,8 @@ import UDropdownList from "../ui.dropdown-list";
 
 import UIService, { getRandomId } from "../service.ui";
 
+import vClickOutside from "../directive.clickOutside";
+
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 import { UDropdownButton, BUTTON_VARIANT } from "./constants";
@@ -218,12 +222,12 @@ const props = defineProps({
   },
 });
 
-provide("hideDropdownOptions", () => hideOptions);
+const emit = defineEmits(["select"]);
 
-const emit = defineEmits(["update:modelValue"]);
+provide("hideDropdownOptions", () => hideOptions);
 
 const isShownOptions = ref(false);
-const buttonRef = ref(null);
+const selectedItem = ref("");
 
 const {
   config,
@@ -235,14 +239,6 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isShownOptions });
 
-const selectValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    isShownOptions.value = false;
-    emit("update:modelValue", value);
-  },
-});
-
 const iconColor = computed(() => {
   return props.variant === BUTTON_VARIANT.primary ? "white" : props.color;
 });
@@ -257,10 +253,9 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-watch(() => props.modelValue, hideOptions);
-
-onMounted(() => window.addEventListener("click", onClickOutside));
-onUnmounted(() => window.removeEventListener("click", onClickOutside));
+watch(selectedItem, () => {
+  emit("select", selectedItem.value);
+});
 
 function onClickButton() {
   isShownOptions.value = !isShownOptions.value;
@@ -270,17 +265,7 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickOutside(event) {
-  if (!buttonRef.value?.buttonRef?.contains(event.target)) {
-    hideOptions();
-  }
-}
-
-function onBlurButton(event) {
-  setTimeout(() => {
-    if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
-      hideOptions();
-    }
-  }, 100);
+function onClickList() {
+  hideOptions();
 }
 </script>

package/ui.dropdown-link/index.vue

@@ -1,9 +1,8 @@
 <template>
-  <div v-bind="wrapperAttrs">
+  <div v-click-outside="hideOptions" v-bind="wrapperAttrs">
     <div v-bind="triggerAttrs">
       <ULink
         :id="id"
-        ref="linkRef"
         :label="label"
         :size="size"
         :color="color"
@@ -13,43 +12,50 @@
         :no-ring="noRing"
         :data-cy="`${dataCy}-link`"
         v-bind="linkAttrs"
-        @click.stop="onClickLink"
-        @blur="onBlurLink"
+        @click="onClickLink"
       >
         <template #right>
           <UIcon
             v-if="!noIcon"
             internal
+            interactive
             :name="config.iconName"
             :size="iconSize"
             :color="color"
             :data-cy="`${dataCy}-caret`"
             v-bind="iconAttrs"
+            @click.stop="onClickLink"
           />
         </template>
       </ULink>
     </div>
 
-    <div v-if="isShownOptions && hasSlotContent($slots['default'])" v-bind="listWrapperAttrs">
+    <div
+      v-if="isShownOptions && hasSlotContent($slots['default'])"
+      v-bind="listWrapperAttrs"
+      @click="onClickList"
+    >
       <!-- @slot Use it to add dropdown list. -->
       <slot />
     </div>
 
     <UDropdownList
       v-if="isShownOptions && !hasSlotContent($slots['default'])"
-      v-model="selectValue"
+      v-model="selectedItem"
       :size="size"
       :options="options"
       :value-key="valueKey"
       :label-key="labelKey"
       :data-cy="`${dataCy}-item`"
       v-bind="listAttrs"
+      @mousedown.stop
+      @click.stop="onClickList"
     />
   </div>
 </template>
 
 <script setup>
-import { computed, onMounted, onUnmounted, provide, ref, watch } from "vue";
+import { computed, provide, ref, watch } from "vue";
 
 import UIcon from "../ui.image-icon";
 import ULink from "../ui.button-link";
@@ -57,6 +63,8 @@ import UDropdownList from "../ui.dropdown-list";
 
 import UIService, { getRandomId } from "../service.ui";
 
+import vClickOutside from "../directive.clickOutside";
+
 import { UDropdownLink } from "./constants";
 import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
@@ -65,14 +73,6 @@ import { useAttrs } from "./composables/attrs.composable";
 defineOptions({ name: "UDropdownLink", inheritAttrs: false });
 
 const props = defineProps({
-  /**
-   * Selected value.
-   */
-  modelValue: {
-    type: [String, Number],
-    default: "",
-  },
-
   /**
    * Link label.
    */
@@ -207,13 +207,12 @@ const props = defineProps({
   },
 });
 
-provide("hideDropdownOptions", () => hideOptions());
+const emit = defineEmits(["select"]);
 
-const emit = defineEmits(["update:modelValue"]);
+provide("hideDropdownOptions", () => hideOptions());
 
 const isShownOptions = ref(false);
-
-const linkRef = ref(null);
+const selectedItem = ref("");
 
 const {
   config,
@@ -226,14 +225,6 @@ const {
   hasSlotContent,
 } = useAttrs(props, { isShownOptions });
 
-const selectValue = computed({
-  get: () => props.modelValue,
-  set: (value) => {
-    isShownOptions.value = false;
-    emit("update:modelValue", value);
-  },
-});
-
 const iconSize = computed(() => {
   const sizes = {
     xs: "2xs",
@@ -245,10 +236,9 @@ const iconSize = computed(() => {
   return sizes[props.size];
 });
 
-watch(() => props.modelValue, hideOptions);
-
-onMounted(() => window.addEventListener("click", onClickOutside));
-onUnmounted(() => window.removeEventListener("click", onClickOutside));
+watch(selectedItem, () => {
+  emit("select", selectedItem.value);
+});
 
 function onClickLink() {
   isShownOptions.value = !isShownOptions.value;
@@ -258,17 +248,7 @@ function hideOptions() {
   isShownOptions.value = false;
 }
 
-function onClickOutside(event) {
-  if (!linkRef.value?.wrapperRef?.contains(event.target)) {
-    hideOptions();
-  }
-}
-
-function onBlurLink(event) {
-  setTimeout(() => {
-    if (!event.target.isEqualNode(event.relatedTarget) && event.relatedTarget) {
-      hideOptions();
-    }
-  }, 100);
+function onClickList() {
+  hideOptions();
 }
 </script>

package/ui.form-calendar/index.stories.js

@@ -3,7 +3,7 @@ import { getArgTypes, getSlotNames } from "../service.storybook";
 import UCalendar from "../ui.form-calendar";
 
 export default {
-  id: "3171",
+  id: "3165",
   title: "Form Inputs & Controls / Calendar",
   component: UCalendar,
   args: {

package/ui.other-dot/configs/default.config.js

@@ -1,15 +1,17 @@
 export default /*tw*/ {
   wrapper: {
-    base: "rounded-full bg-{color}-500 mr-1",
+    base: "rounded-full bg-{color}-500",
     variants: {
       color: {
         white: "bg-white",
         grayscale: "bg-gray-900",
       },
       size: {
+        xs: "size-0.5",
         sm: "size-1",
         md: "size-1.5",
         lg: "size-2",
+        xl: "size-2.5",
       },
     },
   },

package/ui.other-dot/index.stories.js

@@ -1,5 +1,7 @@
 import UDot from "../ui.other-dot";
 import URow from "../ui.container-row";
+import UGroup from "../ui.container-group";
+import UBadge from "../ui.text-badge";
 
 import { getArgTypes } from "../service.storybook";
 
@@ -23,7 +25,7 @@ const DefaultTemplate = (args) => ({
 });
 
 const ColorsTemplate = (args, { argTypes } = {}) => ({
-  components: { UDot, URow },
+  components: { UGroup, URow, UDot, UBadge },
   setup() {
     return {
       args,
@@ -31,19 +33,17 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
-      <UDot
-        v-for="(color, index) in colors"
-        v-bind="args"
-        :color="color"
-        :key="index"
-      />
-    </URow>
+    <UGroup>
+      <URow v-for="(color, index) in colors" :key="index" gap="none" align="center">
+        <UDot v-bind="args" :color="color"/>
+        <UBadge :label="color" :color="color" variant="thirdary" />
+      </URow>
+    </UGroup>
   `,
 });
 
 const SizesTemplate = (args, { argTypes } = {}) => ({
-  components: { UDot, URow },
+  components: { UGroup, URow, UDot, UBadge },
   setup() {
     return {
       args,
@@ -51,20 +51,13 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <URow>
-      <UDot
-        v-for="(size, index) in sizes"
-        v-bind="args"
-        :size="size"
-        :key="index"
-      />
-    </URow>
+    <UGroup>
+      <URow v-for="(size, index) in sizes" :key="index" gap="none" align="center">
+        <UDot v-bind="args" :size="size"/>
+        <UBadge :label="size" variant="thirdary" />
+      </URow>
+    </UGroup>
   `,
-  methods: {
-    getText(value) {
-      return `Tag ${value}`;
-    },
-  },
 });
 
 export const Default = DefaultTemplate.bind({});

package/ui.other-dot/index.vue

@@ -24,7 +24,7 @@ const props = defineProps({
 
   /**
    * Dot size.
-   * @values sm, md, lg
+   * @values xs, sm, md, lg, xl
    */
   size: {
     type: String,

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.112",
+  "version": "0.0.114",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -559,7 +559,7 @@
               "description": "Button size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg'"
               },
               "default": "md"
             },
@@ -1962,7 +1962,7 @@
               "description": "Dot size.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'"
               },
               "default": "md"
             },
@@ -1994,15 +1994,6 @@
           "name": "UDropdownBadge",
           "description": "",
           "attributes": [
-            {
-              "name": "modelValue",
-              "description": "Selected value.",
-              "value": {
-                "kind": "expression",
-                "type": "string|number"
-              },
-              "default": "\"\""
-            },
             {
               "name": "label",
               "description": "Badge label.",
@@ -2132,7 +2123,7 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "select"
             }
           ],
           "slots": [
@@ -2315,7 +2306,7 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "select"
             }
           ],
           "slots": [
@@ -2380,15 +2371,6 @@
           "name": "UDropdownLink",
           "description": "",
           "attributes": [
-            {
-              "name": "modelValue",
-              "description": "Selected value.",
-              "value": {
-                "kind": "expression",
-                "type": "string|number"
-              },
-              "default": "\"\""
-            },
             {
               "name": "label",
               "description": "Link label.",
@@ -2536,7 +2518,7 @@
           ],
           "events": [
             {
-              "name": "update:modelValue"
+              "name": "select"
             }
           ],
           "slots": [
@@ -5825,6 +5807,24 @@
           "name": "URow",
           "description": "",
           "attributes": [
+            {
+              "name": "gap",
+              "description": "Row spacing between nested elements.",
+              "value": {
+                "kind": "expression",
+                "type": "'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'"
+              },
+              "default": "md"
+            },
+            {
+              "name": "align",
+              "description": "Row nested elements vertical align (align-items).",
+              "value": {
+                "kind": "expression",
+                "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
+              },
+              "default": "start"
+            },
             {
               "name": "noMobile",
               "description": "Disables mobile adaptivity.",