vueless 0.0.115 → 0.0.117

package/composable.ui/index.js

@@ -149,8 +149,8 @@ function mergeConfigs({
   config = {},
   isReplace = false,
 }) {
-  globalConfig = globalConfig || {};
-  propsConfig = propsConfig || {};
+  globalConfig = cloneDeep(globalConfig || {});
+  propsConfig = cloneDeep(propsConfig || {});
 
   const isGlobalConfig = Object.keys(globalConfig).length;
   const isPropsConfig = Object.keys(propsConfig).length;

package/package.json

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

package/ui.container-accordion/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -20,7 +20,12 @@ export function useAttrs(props) {
     compoundVariants: header.compoundVariants,
   });
 
-  const contentClasses = computed(() => cvaContent({ size: props.size }));
+  const contentClasses = computed(() =>
+    cvaContent({
+      gap: props.gap,
+      align: props.align,
+    }),
+  );
 
   const headerClasses = computed(() => cvaHeader({ underlined: props.underlined }));
 

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "",
+  wrapper: "w-full",
   upperline: "",
   header: {
     base: "flex items-center justify-between",
@@ -13,16 +13,30 @@ export default /*tw*/ {
   title: "pr-2",
   underline: "pt-1.5",
   content: {
+    base: "flex flex-col",
     variants: {
-      size: {
-        sm: "space-y-2",
+      gap: {
+        none: "space-y-0",
+        "2xs": "space-y-1",
+        xs: "space-y-2",
+        sm: "space-y-3",
         md: "space-y-4",
-        lg: "space-y-6",
+        lg: "space-y-5",
+        xl: "space-y-6",
+        "2xl": "space-y-8",
+      },
+      align: {
+        end: "items-end",
+        start: "items-start",
+        center: "items-center",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
       },
     },
   },
   defaultVariants: {
-    size: "md",
+    gap: "md",
+    align: "start",
     upperlined: true,
     underlined: false,
   },

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

@@ -10,15 +10,6 @@ export default {
   component: UGroup,
   args: {
     title: "Form group",
-    slotTemplate: `
-    <template #default>
-      <UInput placeholder="Vasyl" label="Name" />
-
-      <UInput placeholder="Vasylenko" label="Surname" />
-
-      <UInput placeholder="Kyiv" label="Town" />
-    </template>
-  `,
   },
   argTypes: {
     ...getArgTypes(UGroup.name),
@@ -32,6 +23,14 @@ export default {
   },
 };
 
+const defaultSlotTemplate = `
+  <template #default>
+    <UInput placeholder="Vasyl" label="Name" />
+    <UInput placeholder="Vasylenko" label="Surname" />
+    <UInput placeholder="Kyiv" label="Town" />
+  </template>
+`;
+
 const DefaultTemplate = (args) => ({
   components: { UGroup, UInput, UButton },
   setup() {
@@ -39,7 +38,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <UGroup v-bind="args">
-      ${args.slotTemplate}
+      ${args.slotTemplate || defaultSlotTemplate}
     </UGroup>
   `,
 });

package/ui.container-group/index.vue

@@ -53,12 +53,21 @@ const props = defineProps({
   },
 
   /**
-   * The distance between nested components.
-   * @values sm, md, lg
+   * The distance between nested elements.
+   * @values none, 2xs, xs, sm, md, lg, xl, 2xl
    */
-  size: {
+  gap: {
     type: String,
-    default: UIService.get(defaultConfig, UGroup).default.size,
+    default: UIService.get(defaultConfig, UGroup).default.gap,
+  },
+
+  /**
+   * Nested items align (flex align-items).
+   * @values start, end, center, stretch, baseline
+   */
+  align: {
+    type: String,
+    default: UIService.get(defaultConfig, UGroup).default.align,
   },
 
   /**
@@ -78,7 +87,7 @@ const props = defineProps({
   },
 
   /**
-   * Set component ui config object.
+   *Component ui config object.
    */
   config: {
     type: Object,
@@ -86,7 +95,7 @@ const props = defineProps({
   },
 
   /**
-   * Set data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

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

@@ -1,10 +1,27 @@
+import { computed } from "vue";
+
+import { cva } from "../../service.ui";
 import useUI from "../../composable.ui";
 import defaultConfig from "../configs/default.config";
 
 export function useAttrs(props) {
-  const { getAttrs } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs } = useUI(defaultConfig, () => props.config);
+  const { wrapper } = config.value;
+
+  const cvaWrapper = cva({
+    base: wrapper.base,
+    variants: wrapper.variants,
+    compoundVariants: wrapper.compoundVariants,
+  });
+
+  const wrapperClasses = computed(() =>
+    cvaWrapper({
+      gap: props.gap,
+      align: props.align,
+    }),
+  );
 
-  const wrapperAttrs = getAttrs("wrapper");
+  const wrapperAttrs = getAttrs("wrapper", { classes: wrapperClasses });
 
   return {
     wrapperAttrs,

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

@@ -1,3 +1,26 @@
 export default /*tw*/ {
-  wrapper: "flex flex-col space-y-14",
+  wrapper: {
+    base: "flex flex-col",
+    variants: {
+      gap: {
+        none: "space-y-0",
+        xs: "space-y-10",
+        sm: "space-y-12",
+        md: "space-y-14",
+        lg: "space-y-16",
+        xl: "space-y-20",
+      },
+      align: {
+        end: "items-end",
+        start: "items-start",
+        center: "items-center",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+      },
+    },
+  },
+  defaultVariants: {
+    gap: "md",
+    align: "start",
+  },
 };

package/ui.container-groups/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const UGroups = "UGroups";

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

@@ -1,7 +1,7 @@
 import { getArgTypes } from "../service.storybook";
 
-import UGroup from "../ui.container-group";
 import UGroups from "../ui.container-groups";
+import UGroup from "../ui.container-group";
 import UInput from "../ui.form-input";
 
 export default {
@@ -20,26 +20,26 @@ export default {
   },
 };
 
+const defaultSlotTemplate = `
+  <template #default>
+    <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
+      <UInput placeholder="input" label="Label" />
+      <UInput placeholder="input" label="Label" />
+    </UGroup>
+  </template>
+`;
+
 const DefaultTemplate = (args) => ({
   components: { UGroups, UGroup, UInput },
   setup() {
     return { args };
   },
   template: `
-    <UGroups>
-      ${args.slotTemplate}
+    <UGroups v-bind="args">
+      ${args.slotTemplate || defaultSlotTemplate}
     </UGroups>
   `,
 });
 
 export const Default = DefaultTemplate.bind({});
-Default.args = {
-  slotTemplate: `
-    <template #default>
-      <UGroup :upperlined="n !== 1" :title="'Group '+n" v-for="n in 3">
-        <UInput placeholder="input" label="Label" />
-        <UInput placeholder="input" label="Label" />
-      </UGroup>
-    </template>
-  `,
-};
+Default.args = {};

package/ui.container-groups/index.vue

@@ -6,6 +6,10 @@
 </template>
 
 <script setup>
+import UIService from "../service.ui";
+
+import { UGroups } from "./constants";
+import defaultConfig from "./configs/default.config";
 import { useAttrs } from "./composables/attrs.composable";
 
 /* Should be a string for correct web-types gen */
@@ -13,7 +17,25 @@ defineOptions({ name: "UGroups", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Set component ui config object.
+   * The distance between nested elements.
+   * @values none, xs, sm, md, lg, xl
+   */
+  gap: {
+    type: String,
+    default: UIService.get(defaultConfig, UGroups).default.gap,
+  },
+
+  /**
+   * Nested items align (flex align-items).
+   * @values start, end, center, stretch, baseline
+   */
+  align: {
+    type: String,
+    default: UIService.get(defaultConfig, UGroups).default.align,
+  },
+
+  /**
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -21,7 +43,7 @@ const props = defineProps({
   },
 
   /**
-   * Set data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

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

@@ -14,6 +14,13 @@ export default {
   },
 };
 
+const defaultSlotTemplate = `
+  <template #default>
+    <UInput label="Name" />
+    <UButton label="Submit" size="xs" block />
+  </template>
+`;
+
 const DefaultTemplate = (args) => ({
   components: { URow, UInput, UButton },
   setup() {
@@ -21,13 +28,7 @@ const DefaultTemplate = (args) => ({
   },
   template: `
     <URow v-bind="args">
-      ${
-        args.slotTemplate ||
-        `
-          <UInput label="Name" />
-          <UButton label="Submit" size="xs" block />
-        `
-      }
+      ${args.slotTemplate || defaultSlotTemplate}
     </URow>
   `,
 });
@@ -41,7 +42,7 @@ const GapTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <URow v-for="(gap, index) in gaps" :key="index" v-bind="args" :gap="gap" align="center">
         <UInput :label="gap" />
         <UInput :label="gap" />
@@ -59,7 +60,7 @@ const AlignTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <URow v-for="(align, index) in aligns" :key="index" v-bind="args" :align="align">
         <UButton :label="align" size="xs" block />
         <UInput label="Name" />

package/ui.container-row/index.vue

@@ -26,7 +26,7 @@ const props = defineProps({
   },
 
   /**
-   * Row nested elements vertical align (align-items).
+   * Nested items align (flex align-items).
    * @values start, end, center, stretch, baseline
    */
   align: {
@@ -43,7 +43,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -51,7 +51,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

package/ui.data-list/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -47,7 +47,7 @@ const ValueTypesTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UCheckbox
         v-bind="args"
         v-model="defaultValue"
@@ -97,7 +97,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UCheckbox
         v-for="(size, index) in sizes"
         :key="index"

package/ui.form-color-picker/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-date-picker-range/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -98,7 +98,7 @@ const LabelPlacementTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UInput
         v-bind="args"
         label="top"

package/ui.form-input-file/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-input-money/index.stories.js

@@ -65,7 +65,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
 //     };
 //   },
 //   template: `
-//     <UGroup size="lg">
+//     <UGroup gap="xl">
 //       <UInputMoney
 //         v-bind="args"
 //         :label-outside="true"

package/ui.form-input-number/index.stories.js

@@ -46,7 +46,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UInputNumber
         v-for="(size, index) in sizes"
         v-bind="args"

package/ui.form-input-rating/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-input-search/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.form-switch/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

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

@@ -78,7 +78,7 @@ const LabelPlacementTemplate = (args) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <UTextarea
         v-bind="args"
         label-align="top"

package/ui.image-avatar/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-avatar/index.stories.js

@@ -32,7 +32,7 @@ const SizesTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <URow>
         <UAvatar
           v-for="(size, index) in sizes"
@@ -64,7 +64,7 @@ const ColorsTemplate = (args, { argTypes } = {}) => ({
     };
   },
   template: `
-    <UGroup size="lg">
+    <UGroup gap="xl">
       <URow>
         <UAvatar
           v-for="(color, index) in colors"

package/ui.image-icon/index.vue

@@ -137,23 +137,20 @@ const emit = defineEmits(["click", "focus", "blur"]);
 const { config, wrapperAttrs, containerAttrs, iconAttrs } = useAttrs(props);
 
 const generatedIcons = computed(() => {
-  if (!import.meta.env.PROD) return [];
-
-  return Object.entries(
-    import.meta.glob(`../assets/icons/**/*.svg`, {
-      eager: true,
-      query: "?component",
-    }),
+  return (
+    Object.entries(
+      import.meta.glob(`../assets/icons/**/*.svg`, { eager: true, query: "?component" }),
+    ) || []
   );
 });
 
 const dynamicComponent = computed(() => {
   const FILL_SUFFIX = "-fill";
 
-  const defaultLibrary = defaultConfig.defaultVariants.library;
+  const isDefaultIcon = Boolean(generatedIcons.value.find(([path]) => path.includes(props.name)));
   const userLibrary = config.value.defaultVariants.library;
 
-  const library = props.internal && defaultLibrary === userLibrary ? "vueless" : userLibrary;
+  const library = props.internal && isDefaultIcon ? "vueless" : userLibrary;
   const weight = config.value.defaultVariants.weight;
   const style = config.value.defaultVariants.style;
   const isFill = props.name.endsWith(FILL_SUFFIX);

package/ui.image-logo/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.loader/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-pagination/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-progress/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-stepper/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-tab/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.navigation-tabs/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.other-dot/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-alert/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-block/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-file/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.text-files/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../service.storybook";
+
+import * as stories from "./index.stories";
+import defaultConfig from "./configs/default.config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## **Default config**
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.115",
+  "version": "0.0.117",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -2907,14 +2907,23 @@
               "default": "\"\""
             },
             {
-              "name": "size",
-              "description": "The distance between nested components.",
+              "name": "gap",
+              "description": "The distance between nested elements.",
               "value": {
                 "kind": "expression",
-                "type": "'sm' | 'md' | 'lg'"
+                "type": "'none' | '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'"
               },
               "default": "md"
             },
+            {
+              "name": "align",
+              "description": "Nested items align (flex align-items).",
+              "value": {
+                "kind": "expression",
+                "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
+              },
+              "default": "start"
+            },
             {
               "name": "upperlined",
               "description": "Show line above the header.",
@@ -2935,7 +2944,7 @@
             },
             {
               "name": "config",
-              "description": "Set component ui config object.",
+              "description": "Component ui config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -2944,7 +2953,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Set data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -2983,9 +2992,27 @@
           "name": "UGroups",
           "description": "",
           "attributes": [
+            {
+              "name": "gap",
+              "description": "The distance between nested elements.",
+              "value": {
+                "kind": "expression",
+                "type": "'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'"
+              },
+              "default": "md"
+            },
+            {
+              "name": "align",
+              "description": "Nested items align (flex align-items).",
+              "value": {
+                "kind": "expression",
+                "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
+              },
+              "default": "start"
+            },
             {
               "name": "config",
-              "description": "Set component ui config object.",
+              "description": "Component ui config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -2994,7 +3021,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Set data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -5840,7 +5867,7 @@
             },
             {
               "name": "align",
-              "description": "Row nested elements vertical align (align-items).",
+              "description": "Nested items align (flex align-items).",
               "value": {
                 "kind": "expression",
                 "type": "'start' | 'end' | 'center' | 'stretch' | 'baseline'"
@@ -5858,7 +5885,7 @@
             },
             {
               "name": "config",
-              "description": "Sets component ui config object.",
+              "description": "Component ui config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -5867,7 +5894,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"