vueless 0.0.264 → 0.0.266

package/composable.ui/index.js

@@ -198,7 +198,6 @@ function mergeConfigs({
     safelistColors,
     defaultVariants,
     compoundVariants,
-    iconNameCapitalize,
     iconName,
   } = SYSTEM_CONFIG_KEY;
 
@@ -235,7 +234,7 @@ function mergeConfigs({
 
         const isObject = isObjectComposedConfig || isObjectGlobalConfig || isObjectPropsConfig;
         const isEmpty = composedConfig[key] === null;
-        const isIconName = key.includes(iconName) || key.includes(iconNameCapitalize);
+        const isIconName = key.toLowerCase().includes(iconName.toLowerCase());
         const isI18n = key === i18n;
 
         if (key === "variants" && !isVariants) {
@@ -403,8 +402,8 @@ function isSystemKey(key) {
 
   return (
     isExactKey ||
-    key.includes(SYSTEM_CONFIG_KEY.iconName) ||
-    key.includes(SYSTEM_CONFIG_KEY.iconNameCapitalize)
+    key.toLowerCase().includes(SYSTEM_CONFIG_KEY.iconName.toLowerCase()) ||
+    key.toLowerCase().includes(SYSTEM_CONFIG_KEY.transition.toLowerCase())
   );
 }
 

package/constants/index.js

@@ -60,7 +60,7 @@ export const SYSTEM_CONFIG_KEY = {
   safelist: "safelist",
   component: "component",
   safelistColors: "safelistColors",
-  iconNameCapitalize: "IconName",
+  transition: "transition",
   iconName: "iconName",
   ...CVA_CONFIG_KEY,
 };

package/package.json

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

package/service.ui/index.js

@@ -228,6 +228,10 @@ export default class UIService {
    @returns { String }
    */
   setColor(classes, color) {
+    if (typeof classes !== "string") {
+      return "";
+    }
+
     return classes?.replaceAll("{color}", color);
   }
 

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

@@ -56,7 +56,6 @@ export default /*tw*/ {
     },
   },
   defaultVariants: {
-    titleColor: "brand",
     width: "sm",
     inner: false,
     closeIcon: true,

package/ui.container-modal/index.vue

@@ -25,7 +25,7 @@
                 <div v-bind="headerLeftFallbackAttrs">
                   <ULink
                     v-if="isShownArrowButton"
-                    size="xs"
+                    size="sm"
                     color="gray"
                     :route="backRoute"
                     v-bind="backLinkAttrs"
@@ -41,7 +41,7 @@
                     {{ backRoute.title }}
                   </ULink>
 
-                  <UHeader size="md" :color="titleColor" :label="title" v-bind="titleAttrs" />
+                  <UHeader :label="title" v-bind="titleAttrs" />
                   <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
                 </div>
               </slot>
@@ -137,15 +137,6 @@ const props = defineProps({
     default: "",
   },
 
-  /**
-   * The color of the title.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  titleColor: {
-    type: String,
-    default: UIService.get(defaultConfig, UModal).default.titleColor,
-  },
-
   /**
    * Sets modal description.
    */

package/ui.container-modal-confirm/configs/default.config.js

@@ -4,12 +4,13 @@ export default /*tw*/ {
   confirmButton: "{UButton} w-full",
   cancelButton: "{UButton} w-full",
   i18n: {
+    confirm: "Confirm",
     cancel: "Cancel",
   },
   defaultVariants: {
-    color: "brand",
     width: "sm",
-    cancelButton: true,
+    confirmColor: "brand",
     confirmDisabled: false,
+    cancelButton: true,
   },
 };

package/ui.container-modal-confirm/index.vue

@@ -33,8 +33,8 @@
 
       <div v-else v-bind="footerLeftFallbackAttrs">
         <UButton
-          :label="confirmLabel"
-          :color="color"
+          :label="confirmLabel || currentLocale.confirm"
+          :color="confirmColor"
           :disabled="confirmDisabled"
           :data-cy="`${dataCy}-accept`"
           v-bind="confirmButtonAttrs"
@@ -45,6 +45,7 @@
           v-if="cancelButton"
           :label="currentLocale.cancel"
           variant="thirdary"
+          color="gray"
           filled
           :data-cy="`${dataCy}-close`"
           v-bind="cancelButtonAttrs"
@@ -78,7 +79,7 @@ defineOptions({ name: "UModalConfirm", inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Change modal state (hidden / shown).
+   * Change modal state (shown / hidden).
    */
   modelValue: {
     type: Boolean,
@@ -86,7 +87,7 @@ const props = defineProps({
   },
 
   /**
-   * Set modal's title.
+   * Modal title.
    */
   title: {
     type: String,
@@ -94,13 +95,22 @@ const props = defineProps({
   },
 
   /**
-   * Set confirm button label.
+   * Confirm button label.
    */
   confirmLabel: {
     type: String,
     default: "",
   },
 
+  /**
+   * Confirm button color.
+   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+   */
+  confirmColor: {
+    type: String,
+    default: UIService.get(defaultConfig, UModalConfirm).default.confirmColor,
+  },
+
   /**
    * Set the disabled accept-button.
    */
@@ -118,16 +128,7 @@ const props = defineProps({
   },
 
   /**
-   * Buttons and modal title color.
-   * @values brand, grayscale, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
-   */
-  color: {
-    type: String,
-    default: UIService.get(defaultConfig, UModalConfirm).default.color,
-  },
-
-  /**
-   * Set width for modal.
+   * Modal width.
    * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
    */
   width: {
@@ -136,7 +137,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets component ui config object.
+   * Component ui config object.
    */
   config: {
     type: Object,
@@ -144,7 +145,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets data-cy attribute for automated testing.
+   * Data-cy attribute for automated testing.
    */
   dataCy: {
     type: String,

package/ui.data-list/composables/attrs.composable.js

@@ -4,7 +4,7 @@ import { computed } from "vue";
 import { cva, cx } from "../../service.ui";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -14,15 +14,15 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.data-table/composables/attrs.composable.js

@@ -7,7 +7,7 @@ export default function useAttrs(
   props,
   { tableRows, isShownActionsHeader, isHeaderSticky, isFooterSticky },
 ) {
-  const { config, getAttrs, hasSlotContent, isSystemKey } = useUI(
+  const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -31,16 +31,16 @@ export default function useAttrs(
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
           compact: Boolean(props.compact),
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });

package/ui.image-avatar/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.image-icon/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -45,5 +42,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader-rendering/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import { cva } from "../../service.ui";
 import defaultConfig from "../configs/default.config";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.loader-top/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-pagination/composables/attrs.composable.js

@@ -5,22 +5,25 @@ import { cva, cx } from "../../service.ui";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -51,5 +54,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-progress/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -16,19 +16,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -46,5 +43,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-progress/index.stories.js

@@ -51,19 +51,16 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
     return { args, updateProgress, options: argTypes[args.enum].options };
   },
   template: `
-    <UCol align="start">
-      <UCol>
-        <UProgress
-          v-for="(option, index) in options"
-          :key="index"
-          v-bind="args"
-          :[args.enum]="option"
-          :value="args.progress"
-        />
-      </UCol>
-
-      <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
-      </UCol>
+    <UCol>
+      <UProgress
+        v-for="(option, index) in options"
+        :key="index"
+        v-bind="args"
+        :[args.enum]="option"
+        :value="args.progress"
+      />
+    <UButton label="Next →" size="sm" variant="thirdary" filled @click="updateProgress" />
+    </UCol>
   `,
 });
 

package/ui.navigation-progress/index.vue

@@ -164,6 +164,6 @@ const progressPercent = computed(() => {
 });
 
 function isActiveStep(index) {
-  return index === props.value;
+  return index === props.value - 1;
 }
 </script>

package/ui.navigation-tab/composables/attrs.composable.js

@@ -5,24 +5,27 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props, { selected, size }) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
           size: size.value,
           selected: selected.value,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -31,5 +34,6 @@ export default function useAttrs(props, { selected, size }) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.navigation-tabs/composables/attrs.composable.js

@@ -5,22 +5,25 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, isSystemKey } = useUI(defaultConfig, () => props.config);
+  const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(
+    defaultConfig,
+    () => props.config,
+  );
   const attrs = {};
 
   for (const key in defaultConfig) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
+      let value = config.value[key];
 
-      if (value.variants || value.compoundVariants) {
-        return cva(value)({
+      if (isCVA(value)) {
+        value = cva(value)({
           ...props,
         });
       }
 
-      return "";
+      return value;
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -29,5 +32,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

package/ui.other-dot/composables/attrs.composable.js

@@ -5,7 +5,7 @@ import defaultConfig from "../configs/default.config";
 import { computed } from "vue";
 
 export default function useAttrs(props) {
-  const { config, getAttrs, getColor, setColor, isSystemKey } = useUI(
+  const { config, getAttrs, getColor, setColor, isSystemKey, hasSlotContent, isCVA } = useUI(
     defaultConfig,
     () => props.config,
   );
@@ -15,19 +15,16 @@ export default function useAttrs(props) {
     if (isSystemKey(key)) continue;
 
     const classes = computed(() => {
-      const value = config.value[key];
-
-      if (value.variants || value.compoundVariants) {
-        return setColor(
-          cva(value)({
-            ...props,
-            color: getColor(props.color),
-          }),
-          props.color,
-        );
+      let value = config.value[key];
+
+      if (isCVA(value)) {
+        value = cva(value)({
+          ...props,
+          color: getColor(props.color),
+        });
       }
 
-      return "";
+      return setColor(value, props.color);
     });
 
     attrs[`${key}Attrs`] = getAttrs(key, { classes });
@@ -36,5 +33,6 @@ export default function useAttrs(props) {
   return {
     ...attrs,
     config,
+    hasSlotContent,
   };
 }

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

@@ -42,7 +42,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   template: `
     <UCol>
       <URow
-        v-for="(color, index) in colors"
+        v-for="(option, index) in options"
         :key="index"
         gap="none"
         align="center"

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.264",
+  "version": "0.0.266",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -5523,15 +5523,6 @@
               },
               "default": "\"\""
             },
-            {
-              "name": "titleColor",
-              "description": "The color of the title.",
-              "value": {
-                "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
-              },
-              "default": "brand"
-            },
             {
               "name": "description",
               "description": "Sets modal description.",
@@ -5709,7 +5700,7 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Change modal state (hidden / shown).",
+              "description": "Change modal state (shown / hidden).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5718,7 +5709,7 @@
             },
             {
               "name": "title",
-              "description": "Set modal's title.",
+              "description": "Modal title.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -5727,13 +5718,22 @@
             },
             {
               "name": "confirmLabel",
-              "description": "Set confirm button label.",
+              "description": "Confirm button label.",
               "value": {
                 "kind": "expression",
                 "type": "string"
               },
               "default": "\"\""
             },
+            {
+              "name": "confirmColor",
+              "description": "Confirm button color.",
+              "value": {
+                "kind": "expression",
+                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
+              },
+              "default": "brand"
+            },
             {
               "name": "confirmDisabled",
               "description": "Set the disabled accept-button.",
@@ -5752,18 +5752,9 @@
               },
               "default": "true"
             },
-            {
-              "name": "color",
-              "description": "Buttons and modal title color.",
-              "value": {
-                "kind": "expression",
-                "type": "'brand' | 'grayscale' | 'gray' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose'"
-              },
-              "default": "brand"
-            },
             {
               "name": "width",
-              "description": "Set width for modal.",
+              "description": "Modal width.",
               "value": {
                 "kind": "expression",
                 "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'"
@@ -5772,7 +5763,7 @@
             },
             {
               "name": "config",
-              "description": "Sets component ui config object.",
+              "description": "Component ui config object.",
               "value": {
                 "kind": "expression",
                 "type": "object"
@@ -5781,7 +5772,7 @@
             },
             {
               "name": "dataCy",
-              "description": "Sets data-cy attribute for automated testing.",
+              "description": "Data-cy attribute for automated testing.",
               "value": {
                 "kind": "expression",
                 "type": "string"