vueless 1.2.8 → 1.2.9

package/constants.d.ts

@@ -9,6 +9,8 @@ export const OUTLINE: "outline";
 export const ROUNDING: "rounding";
 export const DISABLED_OPACITY: "disabled-opacity";
 export const LETTER_SPACING: "letter-spacing";
+export const LIGHT_THEME: "light-theme";
+export const DARK_THEME: "dark-theme";
 export const COLOR_MODE_KEY: "vl-color-mode";
 export const AUTO_MODE_KEY: "vl-auto-mode";
 export const DARK_MODE_CLASS: "vl-dark";
@@ -28,6 +30,7 @@ export const DEFAULT_DISABLED_OPACITY: 50;
 export const DEFAULT_LETTER_SPACING: 0;
 export const PRIMARY_COLORS: string[];
 export const STATE_COLORS: string[];
+export const LAYOUT_COLORS: string[];
 export const NEUTRAL_COLORS: string[];
 export const COLOR_SHADES: number[];
 export const DEFAULT_LIGHT_THEME: {
@@ -128,6 +131,7 @@ export namespace SYSTEM_CONFIG_KEY {
     let unstyled: string;
     let transition: string;
     let colors: string;
+    let props: string;
 }
 export const ICON_NON_PROPS_DEFAULTS: string[];
 export namespace DIRECTIVES {

package/constants.js

@@ -17,6 +17,8 @@ export const OUTLINE = "outline";
 export const ROUNDING = "rounding";
 export const DISABLED_OPACITY = "disabled-opacity";
 export const LETTER_SPACING = "letter-spacing";
+export const LIGHT_THEME = "light-theme";
+export const DARK_THEME = "dark-theme";
 
 /* Vueless color mode keys */
 export const COLOR_MODE_KEY = "vl-color-mode";
@@ -70,6 +72,7 @@ export const STATE_COLORS = [
   NEUTRAL_COLOR,
   GRAYSCALE_COLOR,
 ];
+export const LAYOUT_COLORS = ["text", "border", "bg"];
 export const NEUTRAL_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 
@@ -222,6 +225,7 @@ export const SYSTEM_CONFIG_KEY = {
   unstyled: "unstyled",
   transition: "transition",
   colors: "colors",
+  props: "props",
   ...CVA_CONFIG_KEY,
 };
 

package/icons/storybook/rocket_launch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m188.91-556.74 101.7 43.33q17.28-33.85 36.71-67.18 19.42-33.32 40.98-63.89l-76.37-15.28-103.02 103.02Zm156.39 84.11 131.33 131.56q58.44-27.43 107.48-59.59 49.04-32.17 79.8-62.93 80.05-80.28 117.81-163.84Q819.48-711 823.2-819.2q-108.2 3.72-191.77 41.48-83.56 37.76-163.6 117.81-30.76 30.76-62.93 79.8-32.16 49.04-59.6 107.48Zm231.16-99.59q-19.76-19.76-19.76-48.66 0-28.9 19.76-48.66 19.76-19.53 48.54-19.53 28.78 0 48.54 19.53 19.53 19.76 19.53 48.66 0 28.9-19.53 48.66Q653.78-552.7 625-552.7q-28.78 0-48.54-19.52ZM560.5-184.91l103.26-103.02-15.28-76.37q-30.57 21.56-63.89 41.1-33.33 19.55-67.18 36.59l43.09 101.7Zm331.26-702.61q8.52 143.17-35.08 257.09-43.59 113.91-142.11 212.67-1.48 1.24-2.96 2.84-1.48 1.59-2.72 2.83l22 110.48q3.48 17.15-1.74 33.19-5.22 16.03-17.65 28.46L537.87-65.33l-88.83-206.84-172.87-172.87-206.84-88.83L244.2-707.5q12.43-12.43 28.34-17.65 15.92-5.22 33.07-1.74l110.48 22q1.24-1.24 2.71-2.1 1.48-.86 2.96-2.1 98.76-99 212.79-142.98 114.04-43.97 257.21-35.45ZM141.59-324.04q36.91-36.92 89.56-37.3 52.65-.38 89.33 36.3 36.43 36.43 36.05 89.2-.38 52.77-37.05 89.45-27.68 27.67-85.64 45.63-57.97 17.96-168.64 32 14.04-110.67 31.5-169.26 17.45-58.59 44.89-86.02Zm47.98 48.74q-13.77 14.76-23.93 44.84-10.16 30.09-18.16 78.66 48.56-8 78.65-18.41 30.09-10.4 44.61-24.16 18.28-16.04 18.54-40.35.26-24.3-16.78-42.58-18.28-17.05-42.59-16.55-24.3.5-40.34 18.55Z"/></svg>

package/index.d.ts

@@ -17,7 +17,7 @@ export {
 } from "./utils/helper";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar } from "./utils/theme";
+export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";
@@ -140,6 +140,8 @@ export type {
   NestedComponent,
   ComponentConfig,
   ComponentDefaults,
+  ComponentCustomProp,
+  ComponentCustomProps,
   CreateVuelessOptions,
   /* Color and theme types */
   StateColors,

package/index.ts

@@ -23,7 +23,7 @@ export {
 } from "./utils/helper";
 export { isMac, isPWA, isIOS, isAndroid, isMobileApp, isWindows } from "./utils/platform";
 export { cx, cva, compose, getDefaults, setVuelessConfig, setColor, vuelessConfig } from "./utils/ui";
-export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar } from "./utils/theme";
+export { getTheme, setTheme, resetTheme, normalizeThemeConfig, cssVar, setRootCSSVariables } from "./utils/theme";
 export { getArgs, getArgTypes, getSlotNames, getSlotsFragment, getSource, getDocsDescription } from "./utils/storybook";
 /* adapters */
 export { default as defaultEnLocale } from "./adapter.locale/locales/en";
@@ -146,6 +146,8 @@ export type {
   NestedComponent,
   ComponentConfig,
   ComponentDefaults,
+  ComponentCustomProp,
+  ComponentCustomProps,
   CreateVuelessOptions,
   /* Color and theme types */
   StateColors,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -18,10 +18,10 @@
     "release:icons": "npx node .scripts/icons",
     "release:types": "rm -f ./node_modules/.tmp/tsconfig.app.tsbuildinfo && npx tsc --project tsconfig.build.json",
     "release:prepare": "npm run release:icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE README.md dist/ && npx node .scripts/writeLocales && npm run release:types",
-    "release:beta": "release-it --ci --npm.publish --preRelease=beta --increment=prerelease",
-    "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
-    "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
-    "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
+    "release:beta": "release-it --increment=prerelease --preRelease=beta --ci --no-git.tag --no-github.release",
+    "release:patch": "release-it patch --ci",
+    "release:minor": "release-it minor --ci",
+    "release:major": "release-it major --ci",
     "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:ci": "eslint --no-fix --max-warnings=0",
@@ -47,6 +47,7 @@
   "devDependencies": {
     "@material-symbols/svg-500": "^0.35.0",
     "@release-it/bumper": "^7.0.5",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@tsconfig/node20": "^20.1.6",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^24.1.0",
@@ -106,6 +107,9 @@
       "types": "./modules.d.ts"
     }
   },
+  "overrides": {
+    "conventional-changelog-conventionalcommits": "8.0.0"
+  },
   "resolutions": {
     "jackspeak": "2.3.6"
   },

package/plugin-vite.js

@@ -129,9 +129,14 @@ export const Vueless = function (options = {}) {
         await cacheMergedConfigs({ vuelessSrcDir, basePath });
       }
 
-      await buildWebTypes({ vuelessSrcDir, basePath });
+      /* set custom prop types */
       await setCustomPropTypes({ vuelessSrcDir, basePath });
 
+      /* build web-types.json with delay for right custom props behavior */
+      setTimeout(async () => {
+        await buildWebTypes({ vuelessSrcDir, basePath });
+      }, 2000);
+
       /* collect used in project colors for tailwind safelist */
       await createTailwindSafelist({ env, srcDir: vuelessSrcDir, targetFiles, basePath, debug });
 

package/types.ts

@@ -198,7 +198,7 @@ export type MergedThemeConfig = Omit<ThemeConfig, "text | outline | rounding"> &
 
 export type UnknownObject = Record<string, unknown>;
 export type UnknownArray = unknown[];
-export type UnknownType = string | number | boolean | UnknownObject | undefined | null;
+export type UnknownType = string | number | boolean | UnknownObject | undefined | null | unknown;
 
 export type ComponentNames = keyof Components & string; // keys union
 
@@ -325,7 +325,19 @@ export interface NestedComponent {
 
 export type ComponentDefaults = {
   color?: string;
-  [key: string]: unknown | UnknownObject;
+  [key: string]: UnknownType;
+};
+
+export type ComponentCustomProps = {
+  [key: string]: ComponentCustomProp;
+};
+
+export type ComponentCustomProp = {
+  required?: boolean;
+  ignore?: boolean;
+  values?: string[];
+  default?: UnknownType;
+  description?: string;
 };
 
 export interface CVA {

package/ui.button/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   button: {
     base: `
       flex items-center justify-center font-medium !leading-snug whitespace-nowrap
-      border border-transparent transition cursor-pointer
+      border border-solid transition cursor-pointer
       focus-visible:outline-medium focus-visible:outline-offset-2 focus-visible:outline-{color}
       disabled:cursor-not-allowed disabled:outline-0 disabled:outline-offset-0
     `,
@@ -17,7 +17,7 @@ export default /*tw*/ {
       },
       variant: {
         solid: `
-          text-inverted bg-{color}
+          bg-{color} border-transparent text-inverted
           hover:bg-{color}-lifted
           active:bg-{color}-accented
           disabled:!bg-{color}/(--vl-disabled-opacity)
@@ -35,13 +35,13 @@ export default /*tw*/ {
           disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5 disabled:!border-{color}/10
         `,
         soft: `
-          text-{color} bg-{color}/5
+          text-{color} bg-{color}/5 border-transparent
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
           disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-{color}/5
         `,
         ghost: `
-          text-{color} bg-transparent
+          text-{color} bg-transparent border-transparent
           hover:text-{color}-lifted hover:bg-{color}-lifted/10
           active:text-{color}-accented active:bg-{color}-accented/15
           disabled:!text-{color}/(--vl-disabled-opacity) disabled:!bg-transparent

package/ui.button/tests/UButton.test.ts

@@ -12,11 +12,11 @@ describe("UButton.vue", () => {
     it("Variant – applies the correct variant class", async () => {
       const color = "primary";
       const variants = {
-        solid: "text-inverted bg-primary",
+        solid: "bg-primary border-transparent text-inverted",
         outlined: "text-primary border-primary",
         subtle: "text-primary bg-primary/5 border-primary/15",
-        soft: "text-primary bg-primary/5",
-        ghost: "text-primary bg-transparent",
+        soft: "text-primary bg-primary/5 border-transparent",
+        ghost: "text-primary bg-transparent border-transparent",
       };
 
       Object.entries(variants).forEach(([variant, classes]) => {

package/ui.button-toggle/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
       },
       split: {
         true: "flex-wrap",
-        false: "flex-nowrap gap-px p-1 w-fit border rounded-medium border-default",
+        false: "flex-nowrap gap-px p-1 w-fit border border-solid rounded-medium border-default",
       },
       disabled: {
         true: "bg-lifted cursor-not-allowed",
@@ -26,7 +26,7 @@ export default /*tw*/ {
     },
   },
   divider: {
-    base: "my-1 border-r border-muted last:hidden",
+    base: "my-1 border-r border-solid border-muted last:hidden",
     variants: {
       split: {
         true: "hidden",

package/ui.container-accordion/UAccordion.vue

@@ -109,7 +109,6 @@ const { getDataTest, accordionItemAttrs, accordionAttrs } = useUI<Config>(defaul
       <UAccordionItem
         v-for="(option, index) in options"
         :key="index"
-        :model-value="selectedItem"
         :value="option.value"
         :title="option.title"
         :description="option.description"

package/ui.container-accordion/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   accordion: "flex flex-col w-full divide-y divide-muted",
-  accordionItem: "{UAccordionItem} py-5 first:pt-0 last:pb-0",
+  accordionItem: "{UAccordionItem}",
   defaults: {
     size: "md",
     disabled: false,

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

@@ -8,6 +8,7 @@ import {
 } from "../../utils/storybook";
 
 import UAccordion from "../../ui.container-accordion/UAccordion.vue";
+import UAccordionItem from "../../ui.container-accordion-item/UAccordionItem.vue";
 import UButton from "../../ui.button/UButton.vue";
 import ULink from "../../ui.button-link/ULink.vue";
 import UCol from "../../ui.container-col/UCol.vue";
@@ -68,7 +69,7 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UAccordionArgs> = (args: UAccordionArgs) => ({
-  components: { UAccordion, ULink, UButton, UCol, URow, UIcon },
+  components: { UAccordion, UAccordionItem, ULink, UButton, UCol, URow, UIcon },
   setup: () => ({ args, slots: getSlotNames(UAccordion.__name) }),
   template: `
     <UAccordion v-bind="args" v-model="args.modelValue">
@@ -110,3 +111,14 @@ Sizes.args = {
     },
   ],
 };
+
+export const DefaultSlot: StoryFn<UAccordionArgs> = (args: UAccordionArgs, { argTypes }) => ({
+  components: { UAccordion, UAccordionItem },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UAccordion v-model="args.modelValue">
+      <UAccordionItem title="Custom Accordion Item 1" description="Custom Accordion Item 1" value="1" />
+      <UAccordionItem title="Custom Accordion Item 2" description="Custom Accordion Item 2" value="2" />
+    </UAccordion>
+  `,
+});

package/ui.container-accordion-item/UAccordionItem.vue

@@ -122,7 +122,13 @@ const {
   <div ref="wrapper" v-bind="wrapperAttrs" :data-test="getDataTest()" @click="onClickItem">
     <div v-bind="bodyAttrs">
       <div v-bind="titleAttrs" ref="title">
-        {{ title }}
+        <!--
+          @slot Use it to add custom title content.
+          @binding {string} title
+        -->
+        <slot name="title" :title="title">
+          {{ title }}
+        </slot>
         <!--
           @slot Use it to add something instead of the toggle icon.
           @binding {string} icon-name
@@ -140,11 +146,18 @@ const {
       </div>
 
       <div
-        v-if="description"
+        v-if="description || hasSlotContent(slots['description'])"
         :id="`description-${elementId}`"
         v-bind="descriptionAttrs"
-        v-text="description"
-      />
+      >
+        <!--
+          @slot Use it to add custom description content.
+          @binding {string} description
+        -->
+        <slot name="description" :description="description">
+          {{ description }}
+        </slot>
+      </div>
 
       <div v-if="isOpened && hasSlotContent(slots['default'])" v-bind="contentAttrs">
         <!-- @slot Use it to add accordion content. -->

package/ui.container-accordion-item/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "group cursor-pointer",
+    base: "group cursor-pointer py-5 first:pt-0 last:pb-0",
     variants: {
       disabled: {
         true: "cursor-not-allowed text-default/(--vl-disabled-opacity)",

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

@@ -58,11 +58,12 @@ const EnumTemplate: StoryFn<UAccordionItemArgs> = (args: UAccordionItemArgs, { a
   components: { UAccordionItem, UCol },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
-    <UCol gap="xl">
+    <UCol gap="lg">
       <UAccordionItem
         v-for="option in argTypes?.[args.enum]?.options"
         v-bind="getArgs(args, option)"
         :key="option"
+        class="py-0"
       />
     </UCol>
   `,
@@ -112,3 +113,27 @@ ToggleSlot.args = {
     </template>
   `,
 };
+
+export const TitleSlot = DefaultTemplate.bind({});
+TitleSlot.args = {
+  slotTemplate: `
+    <template #title="{ title }">
+      <URow gap="xs" align="center">
+        <UIcon name="rocket_launch" size="xs" color="primary" />
+        <span>{{ title }}</span>
+      </URow>
+    </template>
+  `,
+};
+
+export const DescriptionSlot = DefaultTemplate.bind({});
+DescriptionSlot.args = {
+  slotTemplate: `
+    <template #description="{ description }">
+      <URow gap="xs" align="start">
+        <UIcon name="info" size="xs" color="accented" />
+        <span>{{ description }}</span>
+      </URow>
+    </template>
+  `,
+};

package/ui.container-accordion-item/tests/UAccordionItem.test.ts

@@ -176,6 +176,104 @@ describe("UAccordionItem", () => {
       expect(toggleElement.attributes("data-opened")).toBe("true");
     });
 
+    // Title slot
+    it("renders custom content in title slot", () => {
+      const title = "Original Title";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+
+      expect(component.text()).not.toContain(title);
+    });
+
+    // Title slot bindings
+    it("provides title binding to title slot", () => {
+      const title = "Test Title";
+      const slotClass = "custom-title";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `
+            <template #default="{ title }">
+              <div class="${slotClass}" :data-title="title"></div>
+            </template>
+          `,
+        },
+      });
+
+      const titleElement = component.find(`.${slotClass}`);
+
+      expect(titleElement.exists()).toBe(true);
+      expect(titleElement.attributes("data-title")).toBe(title);
+    });
+
+    // Description slot
+    it("renders custom content in description slot", () => {
+      const description = "Original Description";
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+
+      expect(component.text()).not.toContain(description);
+    });
+
+    // Description slot bindings
+    it("provides description binding to description slot", () => {
+      const description = "Test Description";
+      const slotClass = "custom-description";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `
+            <template #default="{ description }">
+              <div class="${slotClass}" :data-description="description"></div>
+            </template>
+          `,
+        },
+      });
+
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+      expect(descriptionElement.attributes("data-description")).toBe(description);
+    });
+
+    // Description slot with empty prop
+    it("renders description slot even when description prop is empty", () => {
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: {},
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).exists()).toBe(true);
+      expect(component.find(`.${slotClass}`).text()).toBe(slotContent);
+    });
+
     // Default slot
     it("renders default slot content when accordion is opened", async () => {
       const slotContent = "Custom accordion content";
@@ -221,6 +319,94 @@ describe("UAccordionItem", () => {
 
       expect(component.find("[vl-key='content']").exists()).toBe(false);
     });
+
+    // Slot interactions with accordion behavior
+    it("title slot content is clickable and toggles accordion", async () => {
+      const title = "Test Title";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      const titleElement = component.find(`.${slotClass}`);
+
+      expect(titleElement.exists()).toBe(true);
+
+      await titleElement.trigger("click");
+
+      const emitted = component.emitted("click");
+
+      expect(emitted).toBeTruthy();
+      expect(emitted?.[0]).toEqual([expect.any(String), true]);
+    });
+
+    it("description slot content is not clickable and does not toggle accordion", async () => {
+      const description = "Test Description";
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: { description },
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+
+      await descriptionElement.trigger("click");
+
+      const emitted = component.emitted("click");
+
+      expect(emitted).toBeFalsy();
+    });
+
+    it("title slot preserves accordion toggle functionality", async () => {
+      const title = "Test Title";
+      const description = "Test Description";
+      const slotClass = "custom-title";
+      const slotContent = "Custom Title Content";
+
+      const component = mount(UAccordionItem, {
+        props: { title, description },
+        slots: {
+          title: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+
+      await component.find(`.${slotClass}`).trigger("click");
+      expect(component.find("[id^='description-']").classes()).toContain("opacity-100");
+
+      await component.find(`.${slotClass}`).trigger("click");
+      expect(component.find("[id^='description-']").classes()).not.toContain("opacity-100");
+    });
+
+    it("description slot content is always visible when slot is provided", () => {
+      const slotClass = "custom-description";
+      const slotContent = "Custom Description Content";
+
+      const component = mount(UAccordionItem, {
+        props: {},
+        slots: {
+          description: `<div class="${slotClass}">${slotContent}</div>`,
+        },
+      });
+
+      // Description slot content should be visible even without description prop
+      const descriptionElement = component.find(`.${slotClass}`);
+
+      expect(descriptionElement.exists()).toBe(true);
+      expect(descriptionElement.text()).toBe(slotContent);
+    });
   });
 
   // Events

package/ui.container-card/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 md:p-6 border rounded-large w-full text-medium",
+    base: "p-4 md:p-6 border border-solid rounded-large w-full text-medium",
     variants: {
       variant: {
         solid: "bg-default border-transparent",

package/ui.data-table/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   wrapper: "relative w-full overflow-auto",
   headerCounterBase: "mr-1.5 pr-1.5 font-medium text-medium",
   stickyHeader: {
-    base: "fixed top-0 flex items-center z-30 overflow-hidden border rounded-none",
+    base: "fixed top-0 flex items-center z-30 overflow-hidden border border-solid rounded-none",
     variants: {
       stickedHeader: {
         false: "absolute",
@@ -29,12 +29,12 @@ export default /*tw*/ {
   stickyHeaderLoader: "{ULoaderProgress} absolute top-auto bottom-0",
   headerActionsCheckbox: "{UCheckbox}",
   headerActionsCounter: "{>headerCounterBase} -ml-1.5",
-  tableWrapper: "border border-muted rounded-medium bg-default overflow-x-auto",
+  tableWrapper: "border border-solid border-muted rounded-medium bg-default overflow-x-auto",
   table: "min-w-full border-none text-medium w-full table-auto",
   header:
     "border-b border-muted [&>tr:first-child>*]:first:rounded-tl-medium [&>tr:last-child>*]:last:rounded-tr-medium relative",
   headerRow: "",
-  beforeHeaderRow: "border border-muted",
+  beforeHeaderRow: "border border-solid border-muted",
   beforeHeaderCell: "{>headerCellBase}",
   headerCellBase: {
     base: "p-4 text-medium font-normal text-lifted text-left text-nowrap",
@@ -100,7 +100,7 @@ export default /*tw*/ {
     },
   },
   stickyFooterRow: `
-    fixed bottom-0 -ml-px border border-b border-muted bg-default
+    fixed bottom-0 -ml-px border-b border-solid border-muted bg-default
     collapse group-[*]/footer-fixed:[visibility:inherit]
   `,
   i18n: {