vueless 1.1.1-beta.2 → 1.1.1-beta.20

package/adapter.locale/vue-i18n.ts

@@ -1,10 +1,11 @@
 import type { I18n } from "vue-i18n";
+import type { LocaleInstance } from "../types.ts";
 
-export default function createVueI18nAdapter(i18n: I18n) {
+export function createVueI18nAdapter(i18n: I18n): LocaleInstance {
   return {
     name: "vue-i18n",
     locale: i18n.global.locale,
-    fallback: i18n.global.fallbackLocale,
+    fallback: i18n.global.fallbackLocale as string,
     messages: i18n.global.messages,
     // @ts-expect-error Type instantiation is excessively deep and possibly infinite
     t: (key: string, ...params: unknown[]) => i18n.global.t(key, params),

package/adapter.locale/vueless.ts

@@ -4,33 +4,12 @@ import { merge } from "lodash-es";
 import en from "./locales/en.ts";
 
 import type { Ref } from "vue";
-import type { UnknownObject } from "../types.ts";
 import type { VueMessageType } from "vue-i18n";
-
-export interface LocaleMessages {
-  [key: string]: LocaleMessages | string;
-}
-
-export interface LocaleOptions {
-  messages?: LocaleMessages;
-  locale?: string;
-  fallback?: string;
-  adapter?: LocaleInstance;
-}
-
-export interface LocaleInstance {
-  name: string;
-  messages: Ref<LocaleMessages>;
-  locale: Ref<string>;
-  fallback: Ref<string>;
-  t: (key: string, ...params: unknown[]) => string;
-  n: (value: number) => string;
-  tm: <TMassages>(key: string) => Partial<TMassages>;
-}
+import type { UnknownObject, LocaleOptions, LocaleMessages, LocaleInstance } from "../types.ts";
 
 const FALLBACK_LOCALE_CODE = "en";
 
-export default function createVuelessAdapter(options?: LocaleOptions): LocaleInstance {
+export function createVuelessAdapter(options?: LocaleOptions): LocaleInstance {
   const current = shallowRef(options?.locale ?? FALLBACK_LOCALE_CODE);
   const fallback = shallowRef(options?.fallback ?? FALLBACK_LOCALE_CODE);
 

package/composables/tests/useUI.test.ts

@@ -2,14 +2,15 @@ import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import { computed, nextTick } from "vue";
 import { mount } from "@vue/test-utils";
 
+import type { ComponentInternalInstance } from "vue";
+
 // TODO: Autogenerated, need to be reviewed
 
 // Mock the ui utils
 vi.mock("../../utils/ui.ts", () => ({
   cx: vi.fn((classes) => (Array.isArray(classes) ? classes.filter(Boolean).join(" ") : classes)),
   cva: vi.fn((config) => {
-    // Return a spy function that can be called and tracked
-    const cvaSpy = vi.fn((props) => {
+    return vi.fn((props) => {
       if (!config.variants) return config.base || "";
 
       let classes = config.base || "";
@@ -17,16 +18,15 @@ vi.mock("../../utils/ui.ts", () => ({
       // Apply variants
       Object.entries(config.variants).forEach(([key, variants]) => {
         const value = props[key];
+        const variantsRecord = variants as UnknownObject;
 
-        if (value && variants[value]) {
-          classes += ` ${variants[value]}`;
+        if (variantsRecord?.[value]) {
+          classes += ` ${variantsRecord[value]}`;
         }
       });
 
       return classes.trim();
     });
-
-    return cvaSpy;
   }),
   setColor: vi.fn((classes, color) => classes?.replace(/{color}/g, color)),
   vuelessConfig: { components: {}, unstyled: false },
@@ -56,10 +56,25 @@ vi.mock("vue", async () => {
 import useUI from "../useUI.ts";
 import * as uiUtils from "../../utils/ui.ts";
 import { getCurrentInstance, useAttrs } from "vue";
+import type { UnknownObject } from "../../types.ts";
 
 // Test component for integration testing
 const TestComponent = {
   template: '<div :data-test="getDataTest()" v-bind="bodyAttrs">Test</div>',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({}),
+    },
+    dataTest: {
+      type: String,
+      default: null,
+    },
+    color: {
+      type: String,
+      default: "primary",
+    },
+  },
   setup() {
     const defaultConfig = {
       body: {
@@ -97,7 +112,7 @@ describe("useUI", () => {
       type: { __name: "TestComponent" },
       props: { dataTest: "test", color: "primary", config: {} },
       parent: null,
-    });
+    } as unknown as ComponentInternalInstance);
 
     vi.mocked(useAttrs).mockReturnValue({
       class: "",
@@ -148,7 +163,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: { config: propsConfig, dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       // Call useUI to trigger the config merging
       useUI(defaultConfig);
@@ -201,7 +216,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: { color: "blue", dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       // Test the setColor function directly
       expect(uiUtils.setColor).toBeDefined();
@@ -247,7 +262,7 @@ describe("useUI", () => {
         type: { __name: "TestComponent" },
         props: {},
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
       const dataTest = result.getDataTest();
@@ -336,7 +351,7 @@ describe("useUI", () => {
         type: { __name: "UButton" },
         props: { dataTest: "test" },
         parent: null,
-      });
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
 
@@ -349,8 +364,8 @@ describe("useUI", () => {
         props: { dataTest: "test" },
         parent: {
           type: { __name: "UButton" },
-        },
-      });
+        } as UnknownObject,
+      } as unknown as ComponentInternalInstance);
 
       const result = useUI({});
 

package/composables/useComponentLocaleMassages.ts

@@ -17,9 +17,12 @@ export function useComponentLocaleMessages<TLocale>(
 
   const globalComponentMassages = ref(recursiveRt(tm(componentName) as VueMessageType));
 
-  watch(locale, () => {
-    globalComponentMassages.value = recursiveRt(tm(componentName) as VueMessageType);
-  });
+  watch(
+    () => locale,
+    () => {
+      globalComponentMassages.value = recursiveRt(tm(componentName) as VueMessageType);
+    },
+  );
 
   const localeMessages = computed(
     () => merge({}, defaultLocale, globalComponentMassages.value, propsLocale) as TLocale,

package/composables/useLocale.ts

@@ -1,8 +1,8 @@
 import { inject } from "vue";
-import createVuelessAdapter from "../adapter.locale/vueless.ts";
+import { createVuelessAdapter } from "../adapter.locale/vueless.ts";
 
-import type { LocaleInstance, LocaleOptions } from "../adapter.locale/vueless.ts";
 import type { InjectionKey } from "vue";
+import type { LocaleInstance, LocaleOptions } from "../types.ts";
 
 export const LocaleSymbol: InjectionKey<LocaleInstance> = Symbol.for("vueless:locale");
 

package/constants.js

@@ -368,10 +368,6 @@ export const DEFAULT_SVGO_CONFIG = {
         },
       },
     },
-    {
-      name: "removeViewBox",
-      active: false,
-    },
   ],
 };
 
@@ -384,9 +380,10 @@ export const VUELESS_LIBRARY = "vueless";
 export const INTERNAL_ICONS_LIBRARY = "internal";
 export const STORYBOOK_ICONS_LIBRARY = "storybook";
 
+export const CACHE_DIR = ".cache";
 export const NODE_MODULES_DIR = "node_modules";
 export const VUELESS_PACKAGE_DIR = `${NODE_MODULES_DIR}/vueless`;
-export const VUELESS_CACHE_DIR = `${NODE_MODULES_DIR}/.cache/vueless`;
+export const VUELESS_CACHE_DIR = `${NODE_MODULES_DIR}/${CACHE_DIR}/vueless`;
 export const VUELESS_LOCAL_DIR = "src";
 export const ICONS_DIR = "icons";
 export const ICONS_VUELESS_DIR = `${VUELESS_PACKAGE_DIR}/${ICONS_DIR}`;

package/directives/tooltip/storybook/docs.mdx

@@ -8,3 +8,40 @@ import * as stories from "./stories.ts";
 <Description of={stories} />
 <Controls of={stories.Default} />
 <Stories of={stories} />
+
+## Theme Configuration
+You can use the default `vueless` theme or create your own [custom one](https://atomiks.github.io/tippyjs/v6/themes/) via the global Vueless config:
+
+<Source code={`
+  directives: {
+    tooltip: {
+      theme: "custom",
+    },
+  },
+`} language="jsx" dark />
+
+## Customizing Styles
+To customize the default `vueless` or your own custom theme, simply update your CSS as shown below:
+
+<Source code={`
+  .tippy-box[data-theme~="custom"] {
+    background-color: var(--vl-neutral-accented);
+    color: var(--vl-text-inverted);
+  }
+  
+  .tippy-box[data-theme~="custom"][data-placement^="top"] > .tippy-arrow:before {
+    border-top-color: var(--vl-neutral-accented);
+  }
+  
+  .tippy-box[data-theme~="custom"][data-placement^="bottom"] > .tippy-arrow:before {
+    border-bottom-color: var(--vl-neutral-accented);
+  }
+  
+  .tippy-box[data-theme~="custom"][data-placement^="left"] > .tippy-arrow:before {
+    border-left-color: var(--vl-neutral-accented);
+  }
+  
+  .tippy-box[data-theme~="custom"][data-placement^="right"] > .tippy-arrow:before {
+    border-right-color: var(--vl-neutral-accented);
+  }
+`} language="jsx" dark />

package/directives/tooltip/storybook/stories.ts

@@ -2,9 +2,6 @@ import type { Meta, StoryFn } from "@storybook/vue3-vite";
 
 import UIcon from "../../../ui.image-icon/UIcon.vue";
 import UCol from "../../../ui.container-col/UCol.vue";
-import UAlert from "../../../ui.text-alert/UAlert.vue";
-import ULink from "../../../ui.button-link/ULink.vue";
-import UText from "../../../ui.text-block/UText.vue";
 import tooltip from "../vTooltip.ts";
 
 import type { Props } from "tippy.js";
@@ -35,7 +32,7 @@ const DefaultTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
 });
 
 const TooltipSettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => ({
-  components: { UIcon, UCol, UAlert, ULink, UText },
+  components: { UIcon, UCol },
   directives: { tooltip },
   setup() {
     return { args };
@@ -45,7 +42,13 @@ const TooltipSettingsTemplate: StoryFn<VTooltipArgs> = (args: VTooltipArgs) => (
       <UIcon
         interactive
         name="sentiment_satisfied"
-        v-tooltip="{ content: '<b>Tooltip</b>', placement: 'bottom', allowHTML: true }"
+        v-tooltip="{
+          content: '<b>Tooltip</b>',
+          placement: 'bottom',
+          allowHTML: true,
+          hideOnClick: true,
+          trigger: 'click'
+        }"
       />
     </UCol>
   `,
@@ -60,9 +63,9 @@ TooltipSettings.parameters = {
   docs: {
     description: {
       story: `
-This story demonstrates how to pass custom options to the v-tooltip directive,
-including HTML content and tooltip placement. For more settings,
-refer to the <a href="https://atomiks.github.io/tippyjs/v6/all-props/" target="_blank" class="!no-underline">Tippy.js documentation</a>.
+This example shows how to configure the \`v-tooltip\` directive with custom options,
+including HTML content, specific placement, click-triggered display, and persistent visibility after a click.
+For a full list of available settings, refer to the <a href="https://atomiks.github.io/tippyjs/v6/all-props/" target="_blank" class="!no-underline">Tippy.js documentation</a>.
       `,
     },
   },

package/directives/tooltip/vTooltip.ts

@@ -15,12 +15,11 @@ let settings: Partial<DefaultProps> = {};
 
 if (isCSR) {
   import("tippy.js/dist/tippy.css");
-  import("tippy.js/themes/light.css");
   import("tippy.js/animations/shift-away.css");
 
   const defaultSettings = {
     arrow: true,
-    theme: "light",
+    theme: "vueless",
     animation: "shift-away",
   };
 

package/icons/storybook/contact_mail.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M561.76-524.48h264.17v-184.09H561.76v184.09Zm133.09-37L590.33-640v-40l103.52 78.52L797.37-680v40l-102.52 78.52ZM68.37-117.37q-27.7 0-48.03-20.27Q0-157.9 0-185.5v-589q0-27.6 20.34-47.86 20.33-20.27 48.03-20.27h823.5q27.35 0 47.74 20.27Q960-802.1 960-774.5v589q0 27.6-20.39 47.86-20.39 20.27-47.74 20.27H68.37Zm528.13-65.26h298v-594.74h-829v594.74h7q44-68.76 112.5-108.88 68.5-40.12 149.5-40.12 81.24 0 149.62 40.12 68.38 40.12 112.38 108.88Zm-262.48-218.8q50.76 0 85.98-35.36 35.22-35.36 35.22-85.96 0-50.6-35.21-85.96-35.21-35.36-85.96-35.36-50.75 0-86.1 35.34-35.36 35.34-35.36 86.1 0 50.48 35.34 85.84 35.33 35.36 86.09 35.36Zm-178.58 218.8h357.17q-34.91-39.6-81.43-61.67-46.53-22.07-97.15-22.07-50.62 0-97.08 22.07-46.47 22.06-81.51 61.67Zm178.58-281.44q-24.79 0-41.79-16.93-17.01-16.94-17.01-41.75 0-24.91 17-41.8 17.01-16.88 41.8-16.88 24.78 0 41.68 16.9 16.89 16.91 16.89 41.9 0 24.78-16.94 41.67t-41.63 16.89ZM480-480Z"/></svg>

package/icons/storybook/vpn_key.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M280-234.5q-102.07 0-173.79-71.73Q34.5-377.96 34.5-480.06q0-102.09 71.71-173.77Q177.93-725.5 280-725.5q80.63 0 135.45 39.05 54.81 39.06 80.33 100.82H925.5v211.26h-106v137H628v-137H495.73q-25.47 61.76-80.28 100.82Q360.63-234.5 280-234.5Zm0-65.5q72.2 0 117.82-48.2 45.61-48.19 52.61-91.43H697.5v137H754v-137h106v-80.74H450.48q-7.05-43.24-52.66-91.43Q352.2-660 280-660q-75 0-127.5 52.5T100-480q0 75 52.5 127.5T280-300Zm-.06-109.37q30.26 0 50.47-20.28 20.22-20.27 20.22-50.29 0-30.26-20.16-50.47-20.16-20.22-50.41-20.22-30.02 0-50.35 20.16-20.34 20.16-20.34 50.41 0 30.02 20.28 50.35 20.27 20.34 50.29 20.34ZM280-480Z"/></svg>

package/icons/storybook/web_traffic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M118.37-471.57v-62.86H247v62.86H118.37Zm115.2 232.68-41.68-41.68 89.68-89.91 41.91 41.91-89.91 89.68Zm48-399.63-89.68-89.91 41.68-41.92 89.91 89.92-41.91 41.91Zm469.19 494.11L559.17-335.76l-45.43 139.83-107.83-373.16 364.92 114.83L629-403.83l190.59 190.59-68.83 68.83ZM435.57-714v-128.63h62.86V-714h-62.86Zm216.86 75.48-41.91-41.91 89.91-89.92 41.92 41.92-89.92 89.91Z"/></svg>

package/index.d.ts

@@ -12,7 +12,8 @@ export {
 } from "./utils/helper.ts";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource } from "./utils/storybook.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
-export { default as createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { createVuelessAdapter } from "./adapter.locale/vueless.ts";
 export { default as defaultEnLocale } from "./adapter.locale/locales/en.ts";
 export { default as useUI } from "./composables/useUI.ts";
 export { useLocale } from "./composables/useLocale.ts";

package/index.ts

@@ -13,7 +13,8 @@ export { cx, cva, compose, getDefaults } from "./utils/ui.ts";
 export { getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook.ts";
 export { isSSR, isCSR, getRandomId, setTitle, createDebounce, hasSlotContent } from "./utils/helper.ts";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform.ts";
-export { default as createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { createVueI18nAdapter } from "./adapter.locale/vue-i18n.ts";
+export { createVuelessAdapter } from "./adapter.locale/vueless.ts";
 export { default as defaultEnLocale } from "./adapter.locale/locales/en.ts";
 export { default as useUI } from "./composables/useUI.ts";
 export { useLocale } from "./composables/useLocale.ts";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.1.1-beta.2",
+  "version": "1.1.1-beta.20",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -45,7 +45,6 @@
     "vuedraggable": "4.1.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.32.0",
     "@material-symbols/svg-500": "^0.33.0",
     "@release-it/bumper": "^7.0.5",
     "@tsconfig/node20": "^20.1.6",
@@ -58,7 +57,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.1.2",
+    "@vueless/storybook": "^1.1.3",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-vue": "^10.3.0",

package/plugin-vite.js

@@ -20,7 +20,6 @@ import { createTailwindSafelist, clearTailwindSafelist } from "./utils/node/tail
 import { componentResolver, directiveResolver } from "./utils/node/vuelessResolver.js";
 import { setCustomPropTypes, removeCustomPropTypes } from "./utils/node/dynamicProps.js";
 import { buildWebTypes } from "./utils/node/webTypes.js";
-import { hideHiddenStories, showHiddenStories } from "./utils/node/dynamicStories.js";
 import {
   getNuxtDirs,
   getVueDirs,
@@ -81,7 +80,6 @@ export const Vueless = function (options = {}) {
   /* if server stopped by developer (Ctrl+C) */
   process.on("SIGINT", async () => {
     if (isInternalEnv || isStorybookEnv) {
-      await showHiddenStories(vuelessSrcDir);
       await removeCustomPropTypes(vuelessSrcDir);
     }
 
@@ -116,7 +114,7 @@ export const Vueless = function (options = {}) {
         "process.env": {},
       },
       optimizeDeps: {
-        include: ["vueless/directives/**/*.ts"],
+        include: ["vueless/directives/**/*.ts", "vueless/constants.js"],
       },
     }),
 
@@ -133,11 +131,6 @@ export const Vueless = function (options = {}) {
       await buildWebTypes(vuelessSrcDir);
       await setCustomPropTypes(vuelessSrcDir);
 
-      if (isInternalEnv || isStorybookEnv) {
-        await showHiddenStories(vuelessSrcDir);
-        await hideHiddenStories(vuelessSrcDir);
-      }
-
       /* collect used in project colors for tailwind safelist */
       await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, debug });
 

package/tailwind.css

@@ -131,3 +131,28 @@
   outline-style: var(--tw-outline-style);
   outline-width: var(--vl-outline-lg);
 }
+
+/* ------ Tippy.js Vueless default theme ------ */
+.tippy-box[data-theme~="vueless"] {
+  background-color: var(--vl-bg-inverted);
+  color: var(--vl-text-inverted);
+}
+
+.tippy-box[data-theme~="vueless"][data-placement^="top"] > .tippy-arrow:before {
+  border-top-color: var(--vl-bg-inverted);
+}
+
+.tippy-box[data-theme~="vueless"][data-placement^="bottom"] > .tippy-arrow:before {
+  border-bottom-color: var(--vl-bg-inverted);
+}
+
+.tippy-box[data-theme~="vueless"][data-placement^="left"] > .tippy-arrow:before {
+  border-left-color: var(--vl-bg-inverted);
+}
+
+.tippy-box[data-theme~="vueless"][data-placement^="right"] > .tippy-arrow:before {
+  border-right-color: var(--vl-bg-inverted);
+}
+
+
+

package/types.ts

@@ -61,7 +61,6 @@ import UListboxConfig from "./ui.form-listbox/config.ts";
 import type { Props } from "tippy.js";
 import type { Config as TailwindConfig } from "tailwindcss";
 import type { ComputedRef, Ref, ComponentInternalInstance } from "vue";
-import type { LocaleOptions } from "./adapter.locale/vueless.ts";
 
 export enum ColorMode {
   Dark = "dark",
@@ -366,6 +365,27 @@ export interface CreateVuelessOptions extends Config {
   config?: Config;
 }
 
+export interface LocaleOptions {
+  messages?: LocaleMessages;
+  locale?: string;
+  fallback?: string;
+  adapter?: LocaleInstance;
+}
+
+export interface LocaleInstance {
+  name: string;
+  messages: LocaleMessages | Ref<LocaleMessages>;
+  locale: string | Ref<string>;
+  fallback: string | Ref<string>;
+  t: (key: string, ...params: unknown[]) => string;
+  n: (value: number) => string;
+  tm: <TMassages>(key: string) => Partial<TMassages>;
+}
+
+export interface LocaleMessages {
+  [key: string]: LocaleMessages | string;
+}
+
 export interface VuelessCssVariables {
   /* Outline size CSS variables */
   "--vl-outline-sm": string;

package/ui.boilerplate/tests/UBoilerplate.test.ts

@@ -5,10 +5,8 @@ import UBoilerplate from "../UBoilerplate.vue";
 import defaultConfig from "../config.ts";
 
 describe("UBoilerplate.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // DataTest prop
-    it("accepts the dataTest prop", () => {
+    it("Data Test – accepts the dataTest prop", () => {
       const dataTest = "test-boilerplate";
 
       const component = mount(UBoilerplate, {
@@ -20,8 +18,7 @@ describe("UBoilerplate.vue", () => {
       expect(component.attributes("data-test")).toBe(dataTest);
     });
 
-    // Config prop
-    it("applies custom config when provided", () => {
+    it("Config – applies custom config when provided", () => {
       const customClass = "custom-class";
       const config = {
         wrapper: customClass,
@@ -38,23 +35,4 @@ describe("UBoilerplate.vue", () => {
       expect(component.attributes("class")).toContain(defaultConfig.wrapper);
     });
   });
-
-  /*
-  // Slots tests
-  describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
-      const slotContent = "Custom Content";
-
-      const component = mount(UBoilerplate, {
-        slots: {
-          default: slotContent,
-        },
-      });
-
-      expect(component.text()).not.toBe("Boilerplate");
-      expect(component.text()).toBe(slotContent);
-    });
-  });
-  */
 });

package/ui.container-accordion/UAccordion.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { computed, ref, useId, useTemplateRef } from "vue";
+import { computed, ref, useId, useSlots, useTemplateRef } from "vue";
 
 import useUI from "../composables/useUI.ts";
 import { getDefaults } from "../utils/ui.ts";
+import { hasSlotContent } from "../utils/helper.ts";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
 import UDivider from "../ui.container-divider/UDivider.vue";
@@ -31,6 +32,7 @@ const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 
 const isOpened = ref(false);
 
+const slots = useSlots();
 const elementId = props.id || useId();
 
 const toggleIconName = computed(() => {
@@ -67,6 +69,7 @@ const {
   descriptionAttrs,
   bodyAttrs,
   titleAttrs,
+  contentAttrs,
   toggleIconAttrs,
   accordionDividerAttrs,
 } = useUI<Config>(defaultConfig, mutatedProps);
@@ -93,7 +96,17 @@ const {
         </slot>
       </div>
 
-      <div :id="`description-${elementId}`" v-bind="descriptionAttrs" v-text="description" />
+      <div
+        v-if="description"
+        :id="`description-${elementId}`"
+        v-bind="descriptionAttrs"
+        v-text="description"
+      />
+
+      <div v-if="isOpened && hasSlotContent(slots['default'])" v-bind="contentAttrs">
+        <!-- @slot Use it to add accordion content. -->
+        <slot />
+      </div>
     </div>
 
     <UDivider v-bind="accordionDividerAttrs" />

package/ui.container-accordion/config.ts

@@ -24,6 +24,7 @@ export default /*tw*/ {
       },
     },
   },
+  content: "pt-3",
   toggleIcon: {
     base: "{UIcon} transition duration-300",
     variants: {

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

@@ -10,6 +10,9 @@ import {
 import UAccordion from "../../ui.container-accordion/UAccordion.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UIcon from "../../ui.image-icon/UIcon.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types.ts";
@@ -41,7 +44,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
-  components: { UAccordion, ULink },
+  components: { UAccordion, ULink, UButton, UCol, URow, UIcon },
   setup: () => ({ args, slots: getSlotNames(UAccordion.__name) }),
   template: `
     <UAccordion v-bind="args">
@@ -113,6 +116,30 @@ Accordions.args = {};
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", description: "{enumValue}" };
 
+export const DefaultSlot = DefaultTemplate.bind({});
+DefaultSlot.args = {
+  slotTemplate: `
+    <template #default>
+      <UCol gap="sm">
+        <URow gap="xs" align="end">
+          <UIcon name="contact_mail" size="xs" color="primary" />
+          <ULink label="Email services" />
+        </URow>
+
+        <URow gap="xs" align="end">
+          <UIcon name="vpn_key" size="xs" color="primary" />
+          <ULink label="VPN" />
+        </URow>
+
+        <URow gap="xs" align="end">
+          <UIcon name="web_traffic" size="xs" color="primary" />
+          <ULink label="SEO Tools" />
+        </URow>
+      </UCol>
+    </template>
+  `,
+};
+
 export const ToggleSlot = DefaultTemplate.bind({});
 ToggleSlot.args = {
   slotTemplate: `