vueless 0.0.328 → 0.0.329

package/adatper.locale/locales/en.js

@@ -1,14 +1,14 @@
-import selectConfig from "../../ui.form-select/configs/default.config";
-import switchConfig from "../../ui.form-switch/configs/default.config";
-import inputFileConfig from "../../ui.form-input-file/configs/default.config";
-import dropdownListConfig from "../../ui.dropdown-list/configs/default.config";
-import modalConfirmConfig from "../../ui.container-modal-confirm/configs/default.config";
-import tableConfig from "../../ui.data-table/configs/default.config";
-import calendarConfig from "../../ui.form-calendar/configs/default.config";
-import datepickerConfig from "../../ui.form-date-picker/configs/default.config";
-import datepickerRangeConfig from "../../ui.form-date-picker-range/configs/default.config";
-import dataListConfig from "../../ui.data-list/configs/default.config";
-import notifyDefaultConfig from "../../ui.text-notify/configs/default.config";
+import selectConfig from "../../ui.form-select/config.js";
+import switchConfig from "../../ui.form-switch/config.js";
+import inputFileConfig from "../../ui.form-input-file/config.js";
+import dropdownListConfig from "../../ui.dropdown-list/config.js";
+import modalConfirmConfig from "../../ui.container-modal-confirm/config.js";
+import tableConfig from "../../ui.data-table/config.js";
+import calendarConfig from "../../ui.form-calendar/config.js";
+import datepickerConfig from "../../ui.form-date-picker/config.js";
+import datepickerRangeConfig from "../../ui.form-date-picker-range/config.js";
+import dataListConfig from "../../ui.data-list/config.js";
+import notifyDefaultConfig from "../../ui.text-notify/config.js";
 
 export default {
   USelect: selectConfig.i18n,

package/adatper.locale/vueless.js

@@ -1,7 +1,7 @@
 import { shallowRef, ref } from "vue";
 import { merge } from "lodash-es";
 
-import en from "./locales/en";
+import en from "./locales/en.js";
 
 const FALLBACK_LOCALE_CODE = "en";
 

package/{composable.ui/index.js → composables/useUI.js}

@@ -10,15 +10,15 @@ import {
   Fragment,
 } from "vue";
 
-import { cx, setColor, getColor, vuelessConfig } from "../service.ui/index.js";
+import { cx, setColor, getColor, vuelessConfig } from "../utils/utilUI.js";
 
-import { cloneDeep, isCSR } from "../service.helper/index.js";
+import { cloneDeep, isCSR } from "../utils/utilHelper.js";
 import {
   STRATEGY_TYPE,
   CVA_CONFIG_KEY,
   SYSTEM_CONFIG_KEY,
   NESTED_COMPONENT_REG_EXP,
-} from "../constants/index.js";
+} from "../constants.js";
 
 /**
   Merging component configs in a given sequence (bigger number = bigger priority):

package/{directive.tooltip/index.js → directives/vTooltip.js}

@@ -6,8 +6,8 @@ import "tippy.js/dist/tippy.css";
 import "tippy.js/themes/light.css";
 import "tippy.js/animations/shift-away.css";
 
-import { vuelessConfig } from "../service.ui/index.js";
-import { isCSR, isSSR } from "../service.helper/index.js";
+import { vuelessConfig } from "../utils/utilUI.js";
+import { isCSR, isSSR } from "../utils/utilHelper.js";
 
 const globalSettings = vuelessConfig?.directive?.tooltip || {};
 const defaultSettings = {

package/index.js

@@ -1,18 +1,18 @@
 /* eslint-disable vue/max-len, prettier/prettier */
-import { createLocale, LocaleSymbol } from "./composable.locale";
-import { createLoaderRendering, LoaderRenderingSymbol } from "./ui.loader-rendering/composables/useLoaderRendering";
-import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/composables/useLoaderTop";
-import { themeInit } from "./service.theme";
+import { createLocale, LocaleSymbol } from "./composables/useLocale.js";
+import { createLoaderRendering, LoaderRenderingSymbol } from "./ui.loader-rendering/useLoaderRendering.js";
+import { createLoaderTop, LoaderTopSymbol } from "./ui.loader-top/useLoaderTop.js";
+import { themeInit } from "./utils/utilTheme.js";
 
-export { setTitle } from "./service.helper";
-export { setTheme } from "./service.theme";
-export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n";
-export { default as defaultEnLocale } from "./adatper.locale/locales/en";
-export { useLocale } from "./composable.locale";
-export { useLoaderTop } from "./ui.loader-top/composables/useLoaderTop";
-export { loaderTopOn, loaderTopOff } from "./ui.loader-top/services/loaderTop.service";
-export { useLoaderRendering } from "./ui.loader-rendering/composables/useLoaderRendering";
-export { loaderRenderingOn, loaderRenderingOff } from "./ui.loader-rendering/services/loaderRedering.service";
+export { setTitle } from "./utils/utilHelper.js";
+export { setTheme } from "./utils/utilTheme.js";
+export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
+export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
+export { useLocale } from "./composables/useLocale.js";
+export { useLoaderTop } from "./ui.loader-top/useLoaderTop.js";
+export { loaderTopOn, loaderTopOff } from "./ui.loader-top/utilLoaderTop.js";
+export { useLoaderRendering } from "./ui.loader-rendering/useLoaderRendering.js";
+export { loaderRenderingOn, loaderRenderingOff } from "./ui.loader-rendering/utilLoaderRedering.js";
 export {
   notify,
   notifySuccess,
@@ -21,7 +21,7 @@ export {
   clearNotifications,
   setDelayedNotify,
   getDelayedNotify,
-} from "./ui.text-notify/services";
+} from "./ui.text-notify/utilNotify.js";
 /* eslint-enable vue/max-len, prettier/prettier */
 
 export function createVueless(options = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.328",
+  "version": "0.0.329",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",
@@ -37,9 +37,9 @@
     "@release-it/bumper": "^6.0.1",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vueless/plugin-vite": "^0.0.56",
+    "@vueless/plugin-vite": "^0.0.58",
     "@vueless/storybook": "^0.0.34",
-    "@vueless/web-types": "^0.0.14",
+    "@vueless/web-types": "^0.0.15",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
     "eslint": "^8.55.0",

package/preset.tailwind.js

@@ -1,2 +1,120 @@
-/* Hide `/index.js` from import in Tailwind config. */
-export { vuelessPreset, vuelessContent } from "./preset.tailwind/index.js";
+import forms from "@tailwindcss/forms";
+import defaultTheme from "tailwindcss/defaultTheme.js";
+import {
+  COLOR_SHADES,
+  BRAND_COLOR,
+  GRAY_COLOR,
+  COOL_COLOR,
+  DARK_MODE_SELECTOR,
+} from "./constants.js";
+
+const safelist = getSafelist();
+const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
+
+/**
+ * Vueless Tailwind CSS `content` config.
+ * Use it to extend project Tailwind CSS `content` config.
+ */
+export const vuelessContent = [
+  "./index.html",
+  "./src/**/*.{js,ts,jsx,tsx,vue}",
+  "./vueless.config.{js,ts}",
+  "./node_modules/vueless/**/*.{js,ts,vue}",
+  ...(isStrategyOverride ? ["!./src/**/ui.*/config.js"] : []),
+  ...(isStrategyOverride ? ["!./node_modules/vueless/**/ui.*/config.js"] : []),
+];
+
+// eslint-disable-next-line no-unused-vars
+export const vuelessContentNuxt = [
+  "./composables/**/*.{js,ts}",
+  "./components/**/*.{js,vue,ts}",
+  "./layouts/**/*.vue",
+  "./pages/**/*.vue",
+  "./plugins/**/*.{js,ts}",
+  "./app.vue",
+  "./error.vue",
+  "./vueless.config.{js,ts}",
+  "./node_modules/vueless/**/*.{js,ts,vue}",
+  ...(isStrategyOverride ? ["!./node_modules/vueless/**/ui.*/**/config.js"] : []),
+];
+
+/**
+ * Generates preset for TailwindCSS base on Vueless config.
+ * @returns {Object}
+ */
+export function vuelessPreset() {
+  return {
+    darkMode: DARK_MODE_SELECTOR,
+    content: vuelessContent,
+    safelist,
+    theme: {
+      extend: {
+        colors: {
+          [BRAND_COLOR]: getPalette(BRAND_COLOR),
+          [GRAY_COLOR]: getPalette(GRAY_COLOR),
+          [COOL_COLOR]: { ...defaultTheme.colors[GRAY_COLOR] },
+        },
+        spacing: {
+          "safe-top": "env(safe-area-inset-top)",
+          "safe-bottom": "env(safe-area-inset-bottom)",
+          "safe-left": "env(safe-area-inset-left)",
+          "safe-right": "env(safe-area-inset-right)",
+        },
+        fontSize: {
+          "2xs": ["0.625rem", "0.875rem"] /* 10px / 14px */,
+        },
+        ringWidth: {
+          dynamic: "var(--vl-ring)",
+        },
+        ringOffsetWidth: {
+          dynamic: "var(--vl-ring-offset)",
+        },
+        borderRadius: {
+          dynamic: "var(--vl-rounding)",
+        },
+      },
+    },
+    plugins: [forms],
+  };
+}
+
+/**
+ * Transform CSS variable with RGB numbers into CSS color.
+ * @param { String } variableName
+ * @returns {Function}
+ */
+function twColorWithOpacity(variableName) {
+  return ({ opacityValue }) => {
+    return opacityValue !== undefined
+      ? `rgba(var(${variableName}), ${opacityValue})`
+      : `rgb(var(${variableName}))`;
+  };
+}
+
+/**
+ * Convert sting patterns to RegExp.
+ * @param { String } color (gray | brand)
+ * @returns { Object } - TailwindCSS color object palette.
+ */
+function getPalette(color) {
+  let palette = {
+    DEFAULT: twColorWithOpacity(`--vl-color-${color}-default`),
+  };
+
+  COLOR_SHADES.forEach((shade) => {
+    palette[shade] = twColorWithOpacity(`--vl-color-${color}-${shade}`);
+  });
+
+  return palette;
+}
+
+/**
+ * Convert sting patterns to RegExp.
+ * @returns {Array} - TailwindCSS safelist.
+ */
+function getSafelist() {
+  return JSON.parse(process.env.VUELESS_SAFELIST || "[]").map((rule) => ({
+    ...rule,
+    pattern: new RegExp(rule.pattern),
+  }));
+}

package/ui.button/{index.vue → UButton.vue}

@@ -82,16 +82,15 @@
 <script setup>
 import { computed, ref, watchEffect } from "vue";
 
-import { getRandomId, getDefault } from "../service.ui";
-import ULoader from "../ui.loader";
-import UIcon from "../ui.image-icon";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
+import ULoader from "../ui.loader/ULoader.vue";
+import UIcon from "../ui.image-icon/UIcon.vue";
 
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
-import { UButton } from "./constants";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
+import { UButton } from "./constants.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UButton", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/{ui.button-toggle → ui.button/storybook}/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button/{index.stories.js → storybook/stories.js}

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UButton from "../ui.button";
-import UIcon from "../ui.image-icon";
-import URow from "../ui.container-row";
-import UCol from "../ui.container-col";
+import UButton from "../../ui.button/UButton.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UCol from "../../ui.container-col/UCol.vue";
 
 /**
  * The `UButton` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button)
@@ -16,14 +16,14 @@ export default {
     label: "Button",
   },
   argTypes: {
-    ...getArgTypes(UButton.name),
+    ...getArgTypes(UButton.__name),
   },
 };
 
 const DefaultTemplate = (args) => ({
   components: { UButton, UIcon },
   setup() {
-    const slots = getSlotNames(UButton.name);
+    const slots = getSlotNames(UButton.__name);
 
     return { args, slots };
   },

package/ui.button/{composables/attrs.composable.js → useAttrs.js}

@@ -1,9 +1,9 @@
 import { computed, useSlots } from "vue";
 
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
 
-import defaultConfig from "../configs/default.config";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
   const slots = useSlots();

package/ui.button-link/{index.vue → ULink.vue}

@@ -47,14 +47,13 @@
 <script setup>
 import { computed, ref } from "vue";
 import { RouterLink, useLink } from "vue-router";
-import { getDefault } from "../service.ui";
+import { getDefault } from "../utils/utilUI.js";
 
-import useAttrs from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
-import { ULink } from "./constants";
+import useAttrs from "./useAttrs.js";
+import defaultConfig from "./config.js";
+import { ULink } from "./constants.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "ULink", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const emit = defineEmits([
   /**

package/{ui.button-toggle-item → ui.button-link/storybook}/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button-link/{index.stories.js → storybook/stories.js}

@@ -1,9 +1,9 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import ULink from "../ui.button-link";
-import UIcon from "../ui.image-icon";
-import UButton from "../ui.button";
-import URow from "../ui.container-row";
+import ULink from "../../ui.button-link/ULink.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UButton from "../../ui.button/UButton.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 /**
  * The `ULink` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button-link)
@@ -16,7 +16,7 @@ export default {
     label: "Link",
   },
   argTypes: {
-    ...getArgTypes(ULink.name),
+    ...getArgTypes(ULink.__name),
     route: { control: { type: "text" } },
   },
 };
@@ -24,7 +24,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { ULink, UButton, UIcon },
   setup() {
-    const slots = getSlotNames(ULink.name);
+    const slots = getSlotNames(ULink.__name);
 
     return { args, slots };
   },

package/ui.button-link/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
 import { computed, useSlots } from "vue";
-import useUI from "../../composable.ui";
-import { cva, cx } from "../../service.ui";
-import defaultConfig from "../configs/default.config";
+import useUI from "../composables/useUI.js";
+import { cva, cx } from "../utils/utilUI.js";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { isActive, isExactActive }) {
   const slots = useSlots();

package/ui.button-toggle/{index.vue → UToggle.vue}

@@ -31,16 +31,15 @@
 <script setup>
 import { computed, provide, readonly } from "vue";
 
-import ULabel from "../ui.form-label";
-import UToggleItem from "../ui.button-toggle-item";
-import { getDefault } from "../service.ui";
+import ULabel from "../ui.form-label/ULabel.vue";
+import UToggleItem from "../ui.button-toggle-item/UToggleItem.vue";
+import { getDefault } from "../utils/utilUI.js";
 
-import defaultConfig from "./configs/default.config";
-import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants";
-import useAttrs from "./composables/attrs.composable";
+import defaultConfig from "./config.js";
+import { UToggle, TYPE_RADIO, TYPE_CHECKBOX } from "./constants.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UToggle", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/{ui.button → ui.button-toggle/storybook}/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button-toggle/{index.stories.js → storybook/stories.js}

@@ -1,10 +1,10 @@
 import { ref } from "vue";
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UToggle from "../ui.button-toggle";
-import UIcon from "../ui.image-icon";
-import UToggleItem from "../ui.button-toggle-item";
-import URow from "../ui.container-row";
+import UToggle from "../../ui.button-toggle/UToggle.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
+import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
+import URow from "../../ui.container-row/URow.vue";
 
 const OPTIONS = [
   { value: "11", label: "label 1" },
@@ -21,7 +21,7 @@ export default {
   title: "Buttons & Links / Toggle",
   component: UToggle,
   argTypes: {
-    ...getArgTypes(UToggle.name),
+    ...getArgTypes(UToggle.__name),
     modelValue: { control: { type: "text" } },
   },
 };
@@ -31,7 +31,7 @@ const DefaultTemplate = (args) => ({
   setup() {
     const value = ref("");
 
-    const slots = getSlotNames(UToggle.name);
+    const slots = getSlotNames(UToggle.__name);
 
     return { args, slots, value, OPTIONS };
   },

package/ui.button-toggle/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
 import { computed } from "vue";
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
-import defaultConfig from "../configs/default.config";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props) {
   const { config, getAttrs, hasSlotContent, isSystemKey, isCVA } = useUI(

package/ui.button-toggle-item/{index.vue → UToggleItem.vue}

@@ -50,17 +50,16 @@
 <script setup>
 import { computed, inject, onMounted, ref } from "vue";
 
-import UButton from "../ui.button";
-import { getRandomId, getDefault } from "../service.ui";
+import UButton from "../ui.button/UButton.vue";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
 import { TYPE_RADIO } from "../ui.button-toggle/constants";
 
-import useAttrs from "./composables/attrs.composable";
-import defaultConfig from "./configs/default.config";
-import { UToggleItem } from "./constants";
+import useAttrs from "./useAttrs.js";
+import defaultConfig from "./config.js";
+import { UToggleItem } from "./constants.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UToggleItem", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.button-toggle-item/{configs/default.config.js → config.js}

@@ -4,9 +4,9 @@ export default /*tw*/ {
     base: `
       border-gray-300 font-normal
       hover:text-brand-600 hover:border-brand-600 hover:relative hover:z-10
-      focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-700/15 focus-within:ring-brand-700/15
-      active:text-brand-700 active:border-brand-700 active:relative active:z-10
-      disabled:z-0
+      focus:text-brand-600 focus:border-brand-600 focus:relative focus:z-10 focus:ring-brand-700/15
+      focus-within:ring-brand-700/15 active:text-brand-700 active:border-brand-700 active:relative
+      active:z-10 disabled:z-0
     `,
     variants: {
       separated: {

package/{ui.button-link → ui.button-toggle-item/storybook}/Docs.mdx

@@ -1,8 +1,8 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
-import { getSource } from "../service.storybook";
+import { getSource } from "../../utils/utilStorybook.js";
 
-import * as stories from "./index.stories";
-import defaultConfig from "./configs/default.config?raw"
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?raw"
 
 <Meta of={stories} />
 <Title of={stories} />

package/ui.button-toggle-item/{index.stories.js → storybook/stories.js}

@@ -1,7 +1,7 @@
-import { getArgTypes, getSlotNames, getSlotsFragment } from "../service.storybook";
+import { getArgTypes, getSlotNames, getSlotsFragment } from "../../utils/utilStorybook.js";
 
-import UToggleItem from "../ui.button-toggle-item";
-import UIcon from "../ui.image-icon";
+import UToggleItem from "../../ui.button-toggle-item/UToggleItem.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 /**
  * The `UToggleItem` component. | [View on GitHub](https://github.com/vuelessjs/vueless/tree/main/src/ui.button-toggle-item)
@@ -15,7 +15,7 @@ export default {
     modelValue: "",
   },
   argTypes: {
-    ...getArgTypes(UToggleItem.name),
+    ...getArgTypes(UToggleItem.__name),
     value: { control: { type: "text" } },
   },
 };
@@ -23,7 +23,7 @@ export default {
 const DefaultTemplate = (args) => ({
   components: { UToggleItem, UIcon },
   setup() {
-    const slots = getSlotNames(UToggleItem.name);
+    const slots = getSlotNames(UToggleItem.__name);
 
     return { args, slots };
   },

package/ui.button-toggle-item/{composables/attrs.composable.js → useAttrs.js}

@@ -1,7 +1,7 @@
 import { computed, toValue } from "vue";
-import useUI from "../../composable.ui";
-import { cva } from "../../service.ui";
-import defaultConfig from "../configs/default.config";
+import useUI from "../composables/useUI.js";
+import { cva } from "../utils/utilUI.js";
+import defaultConfig from "./config.js";
 
 export default function useAttrs(props, { isSelected, separated, variant }) {
   const { config, getAttrs, isSystemKey, hasSlotContent, isCVA } = useUI(

package/ui.container-accordion/{index.vue → UAccordion.vue}

@@ -23,16 +23,15 @@
 <script setup>
 import { computed, ref } from "vue";
 
-import UIcon from "../ui.image-icon";
-import UDivider from "../ui.container-divider";
-import { getRandomId, getDefault } from "../service.ui";
+import UIcon from "../ui.image-icon/UIcon.vue";
+import UDivider from "../ui.container-divider/UDivider.vue";
+import { getRandomId, getDefault } from "../utils/utilUI.js";
 
-import { UAccordion } from "./constants/index";
-import defaultConfig from "./configs/default.config";
-import useAttrs from "./composables/attrs.composable";
+import { UAccordion } from "./constants.js";
+import defaultConfig from "./config.js";
+import useAttrs from "./useAttrs.js";
 
-/* Should be a string for correct web-types gen */
-defineOptions({ name: "UAccordion", inheritAttrs: false });
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps({
   /**

package/ui.container-accordion/storybook/Docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/blocks";
+import { getSource } from "../../utils/utilStorybook.js";
+
+import * as stories from "./stories.js";
+import defaultConfig from "../config.js?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 />