vueless 0.0.395 → 0.0.397

package/package.json

@@ -1,8 +1,24 @@
 {
   "name": "vueless",
-  "version": "0.0.395",
+  "version": "0.0.397",
   "license": "MIT",
-  "description": "Vue Styleless Component Framework.",
+  "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
+  "keywords": [
+    "vueless",
+    "vue",
+    "vue.js",
+    "vue3",
+    "ui library",
+    "component library",
+    "vue framework",
+    "design system",
+    "tailwind",
+    "tailwindcss",
+    "unstyled",
+    "styleless",
+    "headlessui",
+    "ui"
+  ],
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
   "main": "index.js",
@@ -61,6 +77,9 @@
   "resolutions": {
     "jackspeak": "2.3.6"
   },
+  "engines": {
+    "node": ">=18"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuelessjs/vueless.git"

package/ui.container-accordion/UAccordion.vue

@@ -1,8 +1,8 @@
 <template>
   <div :data-test="dataTest" v-bind="wrapperAttrs" @click="onClickItem">
     <div v-bind="bodyAttrs">
-      <div v-bind="labelAttrs">
-        {{ label }}
+      <div v-bind="titleAttrs">
+        {{ title }}
         <!--
           @slot Use it to add something instead of the toggle icon.
           @binding {string} icon-name
@@ -36,9 +36,9 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Accordion label.
+   * Accordion title.
    */
-  label: {
+  title: {
     type: String,
     required: true,
   },
@@ -95,7 +95,7 @@ const {
   wrapperAttrs,
   descriptionAttrs,
   bodyAttrs,
-  labelAttrs,
+  titleAttrs,
   toggleIconAttrs,
   dividerAttrs,
 } = useAttrs(props, { isOpened });

package/ui.container-accordion/config.js

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: "group cursor-pointer",
   body: "",
-  label: {
+  title: {
     base: "flex items-center justify-between font-medium text-gray-900",
     variants: {
       size: {

package/ui.container-accordion/storybook/stories.js

@@ -14,19 +14,19 @@ export default {
     accordions: [
       {
         name: "Excellence",
-        label: "Excellence by necessity",
+        title: "Excellence by necessity",
         description: `As creators and maintainers of the technologies you are using,
             our services are here to showcase the full power of our softwares.`,
       },
       {
         name: "Innovation",
-        label: "Driving innovation forward",
+        title: "Driving innovation forward",
         description: `All the people that will be involved in delivering your project are contributing
             to the technologies you are using, when they are not the creators themselves.`,
       },
       {
         name: "Collaboration",
-        label: "Fostering collaboration",
+        title: "Fostering collaboration",
         description: `By working with us, you are directly supporting the open source community,
             ensuring the ecosystem continuity and enabling Nuxt development.`,
       },

package/ui.container-divider/UDivider.vue

@@ -46,7 +46,7 @@ const props = defineProps({
    * @values none, before, after, all
    */
   padding: {
-    type: Boolean,
+    type: String,
     default: getDefault(defaultConfig, UDivider).padding,
   },
 

package/ui.container-divider/config.js

@@ -9,9 +9,6 @@ export default /*tw*/ {
       label: {
         true: "items-center justify-center",
       },
-      padding: {
-        none: "p-0",
-      },
     },
     compoundVariants: [
       { vertical: false, size: "xs", class: "py-2" },
@@ -28,6 +25,7 @@ export default /*tw*/ {
       { vertical: true, size: "xl", class: "px-6" },
       { vertical: true, padding: "after", class: "pl-0" },
       { vertical: true, padding: "before", class: "pr-0" },
+      { padding: "none", class: "p-0" },
     ],
   },
   divider: {

package/ui.container-group/UGroup.vue

@@ -4,9 +4,9 @@
       <UDivider v-if="upperlined" size="xl" padding="after" v-bind="upperlineAttrs" />
 
       <div v-bind="headerAttrs">
-        <!-- @slot Use it to add something left side of the header. -->
-        <slot name="left">
-          <div v-bind="headerFallbackAttrs">
+        <!-- @slot Use it to add something on the left side of the header. -->
+        <slot name="header-left">
+          <div v-bind="headerLeftFallbackAttrs">
             <!-- @slot Use it to add something before the title. -->
             <slot name="before-title" />
 
@@ -17,11 +17,11 @@
           </div>
         </slot>
 
-        <!-- @slot Use it to add something right side of the header. -->
-        <slot name="right" />
+        <!-- @slot Use it to add something on the right side of the header. -->
+        <slot name="header-right" />
       </div>
 
-      <UDivider v-if="underlined" size="xl" v-bind="underlineAttrs" />
+      <UDivider size="xl" padding="after" :no-border="!underlined" v-bind="underlineAttrs" />
     </template>
 
     <div v-bind="contentAttrs">
@@ -44,7 +44,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Header title.
+   * Group title.
    */
   title: {
     type: String,
@@ -77,7 +77,7 @@ const props = defineProps({
   },
 
   /**
-   *Component config object.
+   * Component config object.
    */
   config: {
     type: Object,
@@ -96,7 +96,7 @@ const props = defineProps({
 const {
   headerAttrs,
   wrapperAttrs,
-  headerFallbackAttrs,
+  headerLeftFallbackAttrs,
   titleAttrs,
   upperlineAttrs,
   underlineAttrs,

package/ui.container-group/config.js

@@ -1,17 +1,17 @@
 export default /*tw*/ {
   wrapper: "w-full",
   upperline: "{UDivider}",
-  header: {
-    base: "flex items-center justify-between",
+  underline: {
+    component: "{UDivider}",
     variants: {
       underlined: {
-        false: "pb-6",
+        true: "pt-1.5",
       },
     },
   },
-  headerFallback: "flex items-center",
+  header: "flex items-center justify-between",
+  headerLeftFallback: "flex items-center",
   title: "{UHeader} pr-2",
-  underline: "{UDivider} pt-1.5",
   content: {
     base: "flex flex-col items-stretch",
     variants: {

package/ui.container-modal/UModal.vue

@@ -9,19 +9,19 @@
       :id="elementId"
       ref="wrapperRef"
       tabindex="0"
-      :data-test="dataTest"
       v-bind="wrapperAttrs"
+      :data-test="dataTest"
       @keydown.self.esc="onKeydownEsc"
     >
       <div v-bind="innerWrapperAttrs" @click.self="onClickOutside">
         <div v-bind="modalAttrs">
           <div v-if="isExistHeader" v-bind="headerAttrs">
             <div v-bind="headerLeftAttrs">
-              <!-- @slot Use it to add something before the left part of the header. -->
-              <slot name="header-left-before" />
-
-              <!-- @slot Use it to add something to the left part of the header.. -->
+              <!-- @slot Use it to add something to the left side of the header. -->
               <slot name="header-left">
+                <!-- @slot Use it to add something before the header title. -->
+                <slot name="before-title" />
+
                 <div v-bind="headerLeftFallbackAttrs">
                   <ULink
                     v-if="isShownArrowButton"
@@ -41,17 +41,17 @@
                     {{ backRoute.title }}
                   </ULink>
 
-                  <UHeader :label="title" v-bind="titleAttrs" />
+                  <UHeader :label="title" size="sm" v-bind="titleAttrs" />
                   <div v-if="description" v-bind="descriptionAttrs" v-text="description" />
                 </div>
-              </slot>
 
-              <!-- @slot Use it to add something after the left part of the header. -->
-              <slot name="header-left-after" />
+                <!-- @slot Use it to add something after the header title. -->
+                <slot name="after-title" />
+              </slot>
             </div>
 
             <div v-bind="headerRightAttrs">
-              <!-- @slot Use it to add something to the right part of the header. -->
+              <!-- @slot Use it to add something to the right side of the header. -->
               <slot name="header-right" />
             </div>
 
@@ -62,12 +62,13 @@
               -->
               <slot name="close-button" :icon-name="config.defaults.closeIcon">
                 <UIcon
-                  v-if="closeButton"
+                  v-if="closeOnCross"
                   internal
                   interactive
+                  size="sm"
                   :name="config.defaults.closeIcon"
-                  :data-test="`${dataTest}-close`"
                   v-bind="closeIconAttrs"
+                  :data-test="`${dataTest}-close`"
                   @click="onClickCloseModal"
                 />
               </slot>
@@ -75,7 +76,7 @@
           </div>
 
           <div v-bind="bodyAttrs">
-            <!-- @slot Use it to add something to the modal body. -->
+            <!-- @slot Use it to add something into the modal body. -->
             <slot />
           </div>
 
@@ -86,12 +87,12 @@
 
             <div v-bind="footerAttrs">
               <div v-if="hasSlotContent($slots['footer-left'])" v-bind="footerLeftAttrs">
-                <!-- @slot Use it to add something to the left part of the footer. -->
+                <!-- @slot Use it to add something to the left side of the footer. -->
                 <slot name="footer-left" />
               </div>
 
               <div v-if="hasSlotContent($slots['footer-right'])" v-bind="footerRightAttrs">
-                <!-- @slot Use it to add something to the right part of the footer. -->
+                <!-- @slot Use it to add something to the right side of the footer. -->
                 <slot name="footer-right" />
               </div>
             </div>
@@ -123,7 +124,7 @@ const wrapperRef = ref(null);
 
 const props = defineProps({
   /**
-   * Change modal state (hidden / shown).
+   * Set modal state (hidden / shown).
    */
   modelValue: {
     type: Boolean,
@@ -131,7 +132,7 @@ const props = defineProps({
   },
 
   /**
-   * Set modal title.
+   * Modal title.
    */
   title: {
     type: String,
@@ -139,7 +140,7 @@ const props = defineProps({
   },
 
   /**
-   * Sets modal description.
+   * Modal description.
    */
   description: {
     type: String,
@@ -147,44 +148,44 @@ const props = defineProps({
   },
 
   /**
-   * Set back link route.
+   * Modal size (width).
+   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
    */
-  backRoute: {
-    type: Object,
-    default: () => ({}),
+  size: {
+    type: String,
+    default: getDefault(defaultConfig, UModal).size,
   },
 
   /**
-   * Set width for modal.
-   * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
+   * Back link route.
    */
-  width: {
-    type: String,
-    default: getDefault(defaultConfig, UModal).width,
+  backRoute: {
+    type: Object,
+    default: () => ({}),
   },
 
   /**
-   * Allow closing modal by clicking on overlay.
+   * Allow closing modal by clicking on close cross.
    */
-  clickToClose: {
+  closeOnCross: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModal).clickToClose,
+    default: getDefault(defaultConfig, UModal).closeOnCross,
   },
 
   /**
-   * Allow closing modal by clicking on close icon.
+   * Allow closing modal by clicking on overlay.
    */
-  closeButton: {
+  closeOnOverlay: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModal).closeButton,
+    default: getDefault(defaultConfig, UModal).closeOnOverlay,
   },
 
   /**
-   * Allow closing modal by pressing escape (esc) key.
+   * Allow closing modal by pressing escape (esc) on the keyboard.
    */
-  escToClose: {
+  closeOnEsc: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModal).escToClose,
+    default: getDefault(defaultConfig, UModal).closeOnEsc,
   },
 
   /**
@@ -204,19 +205,19 @@ const props = defineProps({
   },
 
   /**
-   * Reverse left and right footer blocks (mobile version only).
+   * Attach small modal to the bottom of the screen (mobile version only).
    */
-  mobileFooterReverse: {
+  mobileStickBottom: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModal).mobileFooterReverse,
+    default: getDefault(defaultConfig, UModal).mobileStickBottom,
   },
 
   /**
-   * Attach small modal to the bottom of the screen (mobile version only).
+   * Unique element id.
    */
-  mobileBottomAlign: {
-    type: Boolean,
-    default: getDefault(defaultConfig, UModal).mobileBottomAlign,
+  id: {
+    type: String,
+    default: "",
   },
 
   /**
@@ -227,14 +228,6 @@ const props = defineProps({
     default: () => ({}),
   },
 
-  /**
-   * Unique element id.
-   */
-  id: {
-    type: String,
-    default: "",
-  },
-
   /**
    * Set data-test attribute for automated testing.
    */
@@ -325,15 +318,15 @@ function onClickBackLink() {
 }
 
 function onClickOutside() {
-  props.clickToClose && closeModal();
+  props.closeOnOverlay && closeModal();
 }
 
 function onKeydownEsc() {
-  props.escToClose && closeModal();
+  props.closeOnEsc && closeModal();
 }
 
 function onClickCloseModal() {
-  props.closeButton && closeModal();
+  props.closeOnCross && closeModal();
 }
 
 function closeModal() {

package/ui.container-modal/config.js

@@ -24,20 +24,19 @@ export default /*tw*/ {
   backLink: "{ULink} flex items-center gap-0.5",
   backLinkIcon: "{UIcon}",
   title: "{UHeader}",
-  description: "mt-1.5 text-base font-normal text-gray-500",
+  description: "mt-1.5 text-sm font-normal text-gray-500",
   headerRight: "",
   closeIcon: "{UIcon}",
-  body: "space-y-4 px-4 md:px-8",
+  body: "space-y-4 px-4 md:px-8 text-sm",
   divider: "{UDivider}",
   dividerSpacing: "{UDivider}",
   footer: "flex justify-between px-4 md:px-8 py-8 max-md:flex-col max-md:gap-4",
   footerLeft: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full",
   footerRight: "flex flex-col md:flex-row space-y-4 md:space-x-4 md:space-y-0 w-full justify-end",
-  footerMobileReverse: "flex flex-col-reverse space-y-reverse group/reversed-footer",
   modal: {
     base: "mx-auto rounded-2xl bg-white",
     variants: {
-      width: {
+      size: {
         xs: "md:w-[25rem]",
         sm: "md:w-[31.25rem]",
         md: "md:w-[37.5rem]",
@@ -54,14 +53,13 @@ export default /*tw*/ {
     },
   },
   defaults: {
-    width: "sm",
+    size: "sm",
     inner: false,
-    closeButton: true,
-    escToClose: true,
-    clickToClose: true,
     noDivider: false,
-    mobileBottomAlign: false,
-    mobileFooterReverse: false,
+    closeOnEsc: true,
+    closeOnCross: true,
+    closeOnOverlay: true,
+    mobileStickBottom: false,
     /* icons */
     backIcon: "arrow_back",
     closeIcon: "close",

package/ui.container-modal/storybook/stories.js

@@ -66,7 +66,7 @@ const EnumVariantTemplate = (args, { argTypes } = {}) => ({
   components: { UModal, UButton, URow, UInput, UTextarea },
   setup() {
     function onClick(value) {
-      args.width = value;
+      args.size = value;
       args.modelValue = true;
     }
 
@@ -98,7 +98,7 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "width", text: "" };
+Sizes.args = { enum: "size" };
 
 export const BackRoute = DefaultTemplate.bind({});
 BackRoute.args = { backRoute: { title: "route title" } };
@@ -112,37 +112,31 @@ SlotDefault.args = {
   `,
 };
 
-export const SlotHeaderLeftBefore = DefaultTemplate.bind({});
-SlotHeaderLeftBefore.args = {
+export const SlotBeforeTitle = DefaultTemplate.bind({});
+SlotBeforeTitle.args = {
   slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="star"
-        color="gray"
-      />
+    <template #before-title>
+      <UIcon name="star" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
+export const SlotAfterTitle = DefaultTemplate.bind({});
+SlotAfterTitle.args = {
   slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
+    <template #after-title>
+      <UIcon name="star" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeftAfter = DefaultTemplate.bind({});
-SlotHeaderLeftAfter.args = {
+export const SlotHeaderLeft = DefaultTemplate.bind({});
+SlotHeaderLeft.args = {
   slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="star"
-        color="gray"
-      />
+    <template #header-left>
+      <UHeader size="lg" label="Large title" />
     </template>
     ${defaultTemplate}
   `,

package/ui.container-modal/useAttrs.js

@@ -1,29 +1,11 @@
-import { computed } from "vue";
 import useUI from "../composables/useUI.js";
 
 import defaultConfig from "./config.js";
 
-import useBreakpoint from "../composables/useBreakpoint.js";
-
 export default function useAttrs(props) {
-  const { config, getKeysAttrs, hasSlotContent, getExtendingKeysClasses } = useUI(
-    defaultConfig,
-    () => props.config,
-  );
-  const { isMobileBreakpoint } = useBreakpoint();
-
-  const extendingKeys = ["footerMobileReverse"];
-  const extendingKeysClasses = getExtendingKeysClasses(extendingKeys);
+  const { config, getKeysAttrs, hasSlotContent } = useUI(defaultConfig, () => props.config);
 
-  const keysAttrs = getKeysAttrs({}, extendingKeys, {
-    footer: {
-      extend: computed(() => [
-        props.mobileFooterReverse &&
-          isMobileBreakpoint.value &&
-          extendingKeysClasses.footerMobileReverse.value,
-      ]),
-    },
-  });
+  const keysAttrs = getKeysAttrs();
 
   return {
     config,

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

@@ -1,34 +1,53 @@
 <template>
   <UModal
+    :id="id"
     v-model="isShownModal"
-    :width="width"
+    :size="size"
     :title="title"
+    :description="description"
+    :inner="inner"
+    :close-on-esc="closeOnEsc"
+    :close-on-cross="closeOnCross"
+    :close-on-overlay="closeOnOverlay"
+    :mobile-stick-bottom="mobileStickBottom"
     no-divider
     mobile-bottom-align
     :data-test="dataTest"
-    v-bind="modalAttrs"
+    v-bind="confirmModalAttrs"
   >
-    <template #header-left-before>
-      <slot name="header-left-before" />
-    </template>
-
     <template #header-left>
+      <!-- @slot Use it to add something to the left side of the header. -->
       <slot name="header-left" />
     </template>
 
-    <template #header-left-after>
-      <slot name="header-left-after" />
+    <template #before-title>
+      <!-- @slot Use it to add something before the header title. -->
+      <slot name="before-title" />
+    </template>
+
+    <template #after-title>
+      <!-- @slot Use it to add something after the header title. -->
+      <slot name="after-title" />
     </template>
 
     <template #header-right>
+      <!-- @slot Use it to add something to the right side of the header. -->
       <slot name="header-right" />
     </template>
 
-    <template #default>
-      <slot />
+    <template #close-button="{ iconName }">
+      <!--
+        @slot Use it to add something instead of the close button.
+        @binding {string} icon-name
+      -->
+      <slot name="close-button" :icon-name="iconName" />
     </template>
 
+    <!-- @slot Use it to add something into the modal body. -->
+    <slot />
+
     <template #footer-left>
+      <!-- @slot Use it to add something to the left side of the footer. -->
       <slot v-if="hasSlotContent($slots['footer-left'])" name="footer-left" />
 
       <div v-else v-bind="footerLeftFallbackAttrs">
@@ -36,25 +55,25 @@
           :label="confirmLabel || currentLocale.confirm"
           :color="confirmColor"
           :disabled="confirmDisabled"
-          :data-test="`${dataTest}-accept`"
           v-bind="confirmButtonAttrs"
+          :data-test="`${dataTest}-confirm`"
           @click="emitConfirmAction"
         />
 
         <UButton
-          v-if="cancelButton"
+          v-if="!cancelHidden"
           :label="currentLocale.cancel"
-          variant="thirdary"
+          variant="secondary"
           color="gray"
-          filled
-          :data-test="`${dataTest}-close`"
           v-bind="cancelButtonAttrs"
+          :data-test="`${dataTest}-close`"
           @click="onCloseModal"
         />
       </div>
     </template>
 
     <template #footer-right>
+      <!-- @slot Use it to add something to the right side of the footer. -->
       <slot name="footer-right" />
     </template>
   </UModal>
@@ -78,7 +97,7 @@ defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**
-   * Change modal state (shown / hidden).
+   * Set modal state (hidden / shown).
    */
   modelValue: {
     type: Boolean,
@@ -93,6 +112,14 @@ const props = defineProps({
     default: "",
   },
 
+  /**
+   * Modal description.
+   */
+  description: {
+    type: String,
+    default: "",
+  },
+
   /**
    * Confirm button label.
    */
@@ -119,20 +146,68 @@ const props = defineProps({
   },
 
   /**
-   * Show cancel button.
+   * Hide cancel button.
    */
-  cancelButton: {
+  cancelHidden: {
     type: Boolean,
-    default: getDefault(defaultConfig, UModalConfirm).cancelButton,
+    default: getDefault(defaultConfig, UModalConfirm).cancelHidden,
   },
 
   /**
-   * Modal width.
+   * Modal size (width).
    * @values xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl
    */
-  width: {
+  size: {
+    type: String,
+    default: getDefault(defaultConfig, UModalConfirm).size,
+  },
+
+  /**
+   * Allow closing modal by clicking on close cross.
+   */
+  closeOnCross: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).closeOnCross,
+  },
+
+  /**
+   * Allow closing modal by clicking on overlay.
+   */
+  closeOnOverlay: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).closeOnOverlay,
+  },
+
+  /**
+   * Allow closing modal by pressing escape (esc) on the keyboard.
+   */
+  closeOnEsc: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).closeOnEsc,
+  },
+
+  /**
+   * Add extra top margin for modal inside another modal.
+   */
+  inner: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).inner,
+  },
+
+  /**
+   * Attach small modal to the bottom of the screen (mobile version only).
+   */
+  mobileStickBottom: {
+    type: Boolean,
+    default: getDefault(defaultConfig, UModalConfirm).mobileStickBottom,
+  },
+
+  /**
+   * Unique element id.
+   */
+  id: {
     type: String,
-    default: getDefault(defaultConfig, UModalConfirm).width,
+    default: "",
   },
 
   /**
@@ -175,7 +250,7 @@ const { tm } = useLocale();
 const {
   hasSlotContent,
   footerLeftFallbackAttrs,
-  modalAttrs,
+  confirmModalAttrs,
   confirmButtonAttrs,
   cancelButtonAttrs,
 } = useAttrs(props);

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

@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  modal: "{UModal}",
+  confirmModal: "{UModal}",
   footerLeftFallback: "flex space-x-4",
   confirmButton: "{UButton} w-full",
   cancelButton: "{UButton} w-full",
@@ -8,9 +8,15 @@ export default /*tw*/ {
     cancel: "Cancel",
   },
   defaults: {
-    width: "sm",
+    size: "sm",
     confirmColor: "brand",
+    inner: false,
+    noDivider: false,
+    closeOnEsc: true,
+    closeOnCross: true,
+    closeOnOverlay: true,
+    mobileStickBottom: false,
     confirmDisabled: false,
-    cancelButton: true,
+    cancelHidden: false,
   },
 };

package/ui.container-modal-confirm/storybook/stories.js

@@ -14,7 +14,7 @@ export default {
   title: "Containers / Modal Confirm",
   component: UModalConfirm,
   args: {
-    title: "Modal Confirm title",
+    title: "Complete the transfer?",
     confirmLabel: "Confirm",
     modelValue: false,
   },
@@ -30,7 +30,10 @@ export default {
   },
 };
 
-const defaultTemplate = "Confirm the action?";
+const defaultTemplate = `
+  It looks like you going to complete the transaction before the process will finished.
+  All unsaved data will be lost.
+`;
 
 const DefaultTemplate = (args) => ({
   components: { UModalConfirm, UButton, UHeader, UIcon },
@@ -93,48 +96,42 @@ export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
 export const WithoutCancelButton = DefaultTemplate.bind({});
-WithoutCancelButton.args = { cancelButton: false };
+WithoutCancelButton.args = { cancelHidden: false };
 
 export const DisableAcceptButton = DefaultTemplate.bind({});
 DisableAcceptButton.args = { confirmDisabled: true };
 
 export const Sizes = EnumVariantTemplate.bind({});
-Sizes.args = { enum: "width" };
+Sizes.args = { enum: "size" };
 
 export const Color = EnumVariantTemplate.bind({});
 Color.args = { enum: "confirmColor" };
 
-export const SlotHeaderLeftBefore = DefaultTemplate.bind({});
-SlotHeaderLeftBefore.args = {
+export const SlotBeforeTitle = DefaultTemplate.bind({});
+SlotBeforeTitle.args = {
   slotTemplate: `
-    <template #header-left-before>
-      <UIcon
-        name="star"
-        color="gray"
-      />
+    <template #before-title>
+      <UIcon name="star" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeft = DefaultTemplate.bind({});
-SlotHeaderLeft.args = {
+export const SlotAfterTitle = DefaultTemplate.bind({});
+SlotAfterTitle.args = {
   slotTemplate: `
-    <template #header-left>
-      <UHeader size="lg" label="Large title" />
+    <template #after-title>
+      <UIcon name="star" color="gray" />
     </template>
     ${defaultTemplate}
   `,
 };
 
-export const SlotHeaderLeftAfter = DefaultTemplate.bind({});
-SlotHeaderLeftAfter.args = {
+export const SlotHeaderLeft = DefaultTemplate.bind({});
+SlotHeaderLeft.args = {
   slotTemplate: `
-    <template #header-left-after>
-      <UIcon
-        name="star"
-        color="gray"
-      />
+    <template #header-left>
+      <UHeader size="lg" label="Large title" />
     </template>
     ${defaultTemplate}
   `,

package/ui.form-label/config.js

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "flex gap-2 w-auto",
+    base: "flex gap-2 w-full",
     variants: {
       align: {
         top: "flex-col",

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.395",
+  "version": "0.0.397",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -63,9 +63,9 @@
           "description": "",
           "attributes": [
             {
-              "name": "label",
+              "name": "title",
               "required": true,
-              "description": "Accordion label.",
+              "description": "Accordion title.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4035,7 +4035,7 @@
           "attributes": [
             {
               "name": "title",
-              "description": "Header title.",
+              "description": "Group title.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4090,8 +4090,8 @@
           ],
           "slots": [
             {
-              "name": "left",
-              "description": "Use it to add something left side of the header."
+              "name": "header-left",
+              "description": "Use it to add something on the left side of the header."
             },
             {
               "name": "before-title",
@@ -4102,8 +4102,8 @@
               "description": "Use it to add something after the title."
             },
             {
-              "name": "right",
-              "description": "Use it to add something right side of the header."
+              "name": "header-right",
+              "description": "Use it to add something on the right side of the header."
             },
             {
               "name": "default",
@@ -5923,7 +5923,7 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Change modal state (hidden / shown).",
+              "description": "Set modal state (hidden / shown).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5932,7 +5932,7 @@
             },
             {
               "name": "title",
-              "description": "Set modal title.",
+              "description": "Modal title.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -5941,7 +5941,7 @@
             },
             {
               "name": "description",
-              "description": "Sets modal description.",
+              "description": "Modal description.",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -5949,26 +5949,26 @@
               "default": "\"\""
             },
             {
-              "name": "backRoute",
-              "description": "Set back link route.",
+              "name": "size",
+              "description": "Modal size (width).",
               "value": {
                 "kind": "expression",
-                "type": "object"
+                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'"
               },
-              "default": "{}"
+              "default": "sm"
             },
             {
-              "name": "width",
-              "description": "Set width for modal.",
+              "name": "backRoute",
+              "description": "Back link route.",
               "value": {
                 "kind": "expression",
-                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'"
+                "type": "object"
               },
-              "default": "sm"
+              "default": "{}"
             },
             {
-              "name": "clickToClose",
-              "description": "Allow closing modal by clicking on overlay.",
+              "name": "closeOnCross",
+              "description": "Allow closing modal by clicking on close cross.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5976,8 +5976,8 @@
               "default": "true"
             },
             {
-              "name": "closeButton",
-              "description": "Allow closing modal by clicking on close icon.",
+              "name": "closeOnOverlay",
+              "description": "Allow closing modal by clicking on overlay.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -5985,8 +5985,8 @@
               "default": "true"
             },
             {
-              "name": "escToClose",
-              "description": "Allow closing modal by pressing escape (esc) key.",
+              "name": "closeOnEsc",
+              "description": "Allow closing modal by pressing escape (esc) on the keyboard.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6012,8 +6012,8 @@
               "default": "false"
             },
             {
-              "name": "mobileFooterReverse",
-              "description": "Reverse left and right footer blocks (mobile version only).",
+              "name": "mobileStickBottom",
+              "description": "Attach small modal to the bottom of the screen (mobile version only).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6021,13 +6021,13 @@
               "default": "false"
             },
             {
-              "name": "mobileBottomAlign",
-              "description": "Attach small modal to the bottom of the screen (mobile version only).",
+              "name": "id",
+              "description": "Unique element id.",
               "value": {
                 "kind": "expression",
-                "type": "boolean"
+                "type": "string"
               },
-              "default": "false"
+              "default": "\"\""
             },
             {
               "name": "config",
@@ -6038,15 +6038,6 @@
               },
               "default": "{}"
             },
-            {
-              "name": "id",
-              "description": "Unique element id.",
-              "value": {
-                "kind": "expression",
-                "type": "string"
-              },
-              "default": "\"\""
-            },
             {
               "name": "dataTest",
               "description": "Set data-test attribute for automated testing.",
@@ -6077,20 +6068,20 @@
           ],
           "slots": [
             {
-              "name": "header-left-before",
-              "description": "Use it to add something before the left part of the header."
+              "name": "header-left",
+              "description": "Use it to add something to the left side of the header."
             },
             {
-              "name": "header-left",
-              "description": "Use it to add something to the left part of the header.."
+              "name": "before-title",
+              "description": "Use it to add something before the header title."
             },
             {
-              "name": "header-left-after",
-              "description": "Use it to add something after the left part of the header."
+              "name": "after-title",
+              "description": "Use it to add something after the header title."
             },
             {
               "name": "header-right",
-              "description": "Use it to add something to the right part of the header."
+              "description": "Use it to add something to the right side of the header."
             },
             {
               "name": "close-button",
@@ -6105,15 +6096,15 @@
             },
             {
               "name": "default",
-              "description": "Use it to add something to the modal body."
+              "description": "Use it to add something into the modal body."
             },
             {
               "name": "footer-left",
-              "description": "Use it to add something to the left part of the footer."
+              "description": "Use it to add something to the left side of the footer."
             },
             {
               "name": "footer-right",
-              "description": "Use it to add something to the right part of the footer."
+              "description": "Use it to add something to the right side of the footer."
             }
           ],
           "source": {
@@ -6127,7 +6118,7 @@
           "attributes": [
             {
               "name": "modelValue",
-              "description": "Change modal state (shown / hidden).",
+              "description": "Set modal state (hidden / shown).",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -6143,6 +6134,15 @@
               },
               "default": "\"\""
             },
+            {
+              "name": "description",
+              "description": "Modal description.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "confirmLabel",
               "description": "Confirm button label.",
@@ -6171,23 +6171,77 @@
               "default": "false"
             },
             {
-              "name": "cancelButton",
-              "description": "Show cancel button.",
+              "name": "cancelHidden",
+              "description": "Hide cancel button.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
               },
-              "default": "true"
+              "default": "false"
             },
             {
-              "name": "width",
-              "description": "Modal width.",
+              "name": "size",
+              "description": "Modal size (width).",
               "value": {
                 "kind": "expression",
                 "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'"
               },
               "default": "sm"
             },
+            {
+              "name": "closeOnCross",
+              "description": "Allow closing modal by clicking on close cross.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "closeOnOverlay",
+              "description": "Allow closing modal by clicking on overlay.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "closeOnEsc",
+              "description": "Allow closing modal by pressing escape (esc) on the keyboard.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "true"
+            },
+            {
+              "name": "inner",
+              "description": "Add extra top margin for modal inside another modal.",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "mobileStickBottom",
+              "description": "Attach small modal to the bottom of the screen (mobile version only).",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "id",
+              "description": "Unique element id.",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": "\"\""
+            },
             {
               "name": "config",
               "description": "Component config object.",
@@ -6231,25 +6285,43 @@
           ],
           "slots": [
             {
-              "name": "header-left-before"
+              "name": "header-left",
+              "description": "Use it to add something to the left side of the header."
             },
             {
-              "name": "header-left"
+              "name": "before-title",
+              "description": "Use it to add something before the header title."
             },
             {
-              "name": "header-left-after"
+              "name": "after-title",
+              "description": "Use it to add something after the header title."
             },
             {
-              "name": "header-right"
+              "name": "header-right",
+              "description": "Use it to add something to the right side of the header."
             },
             {
-              "name": "default"
+              "name": "close-button",
+              "scoped": true,
+              "description": "Use it to add something instead of the close button.",
+              "bindings": [
+                {
+                  "type": "string",
+                  "name": "icon-name"
+                }
+              ]
+            },
+            {
+              "name": "default",
+              "description": "Use it to add something into the modal body."
             },
             {
-              "name": "footer-left"
+              "name": "footer-left",
+              "description": "Use it to add something to the left side of the footer."
             },
             {
-              "name": "footer-right"
+              "name": "footer-right",
+              "description": "Use it to add something to the right side of the footer."
             }
           ],
           "source": {