vueless 1.0.2-beta.24 → 1.0.2-beta.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.0.2-beta.24",
+  "version": "1.0.2-beta.26",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

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

@@ -8,10 +8,8 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Props } from "../types.ts";
 
 describe("UButton.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Variant prop
-    it("applies the correct variant class", async () => {
+    it("Variant – applies the correct variant class", async () => {
       const color = "primary";
       const variants = {
         solid: "text-inverted bg-primary",
@@ -33,8 +31,7 @@ describe("UButton.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -58,8 +55,7 @@ describe("UButton.vue", () => {
       });
     });
 
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const size = {
         "2xs": "text-small",
         xs: "text-small",
@@ -80,8 +76,7 @@ describe("UButton.vue", () => {
       });
     });
 
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "Button";
 
       const component = mount(UButton, {
@@ -93,8 +88,7 @@ describe("UButton.vue", () => {
       expect(component.text()).toBe(label);
     });
 
-    // Tag prop
-    it("renders the correct HTML tag", () => {
+    it("Tag – renders the correct HTML tag", () => {
       const tags = ["button", "a", "div"];
 
       tags.forEach((tag) => {
@@ -108,8 +102,7 @@ describe("UButton.vue", () => {
       });
     });
 
-    // Icon prop
-    it("renders icon when icon prop is provided", () => {
+    it("Icon – renders icon when prop is provided", () => {
       const icon = "close";
       const label = "Button";
 
@@ -127,8 +120,7 @@ describe("UButton.vue", () => {
       expect(nestedUIconComponents[0].props("name")).toBe(icon);
     });
 
-    // Left Icon prop
-    it("renders left icon when leftIcon prop is provided", () => {
+    it("Left Icon – renders icon when prop is provided", () => {
       const leftIcon = "close";
       const label = "Button";
 
@@ -146,8 +138,7 @@ describe("UButton.vue", () => {
       expect(nestedUIconComponents[0].props("name")).toBe(leftIcon);
     });
 
-    // Right Icon prop
-    it("renders right icon when rightIcon prop is provided", () => {
+    it("Right Icon – renders icon when prop is provided", () => {
       const rightIcon = "close";
       const label = "Button";
 
@@ -165,8 +156,7 @@ describe("UButton.vue", () => {
       expect(nestedUIconComponents[0].props("name")).toBe(rightIcon);
     });
 
-    // Tabindex prop
-    it("applies the correct tabindex attribute", () => {
+    it("Tabindex – applies the correct attribute", () => {
       const tabindex = "2";
 
       const component = mount(UButton, {
@@ -178,8 +168,7 @@ describe("UButton.vue", () => {
       expect(component.attributes("tabindex")).toBe(tabindex);
     });
 
-    // Disabled prop
-    it("applies disabled attribute when disabled prop is true", () => {
+    it("Disabled – applies attribute when prop is true", () => {
       const disabled = true;
 
       const component = mount(UButton, {
@@ -191,8 +180,7 @@ describe("UButton.vue", () => {
       expect(component.attributes("disabled")).toBeDefined();
     });
 
-    // Block prop
-    it("applies block class when block prop is true", () => {
+    it("Block – applies class when prop is true", () => {
       const block = true;
       const expectedClass = "w-full";
 
@@ -205,8 +193,7 @@ describe("UButton.vue", () => {
       expect(component.attributes("class")).toContain(expectedClass);
     });
 
-    // Round prop
-    it("applies round class when round prop is true", () => {
+    it("Round – applies class when prop is true", () => {
       const round = true;
       const expectedClass = "rounded-full";
 
@@ -219,8 +206,7 @@ describe("UButton.vue", () => {
       expect(component.attributes("class")).toContain(expectedClass);
     });
 
-    // Square prop
-    it("applies square classes when square prop is true", () => {
+    it("Square – applies classes when prop is true", () => {
       const square = true;
       const size = {
         "2xs": "p-1",
@@ -243,8 +229,7 @@ describe("UButton.vue", () => {
       });
     });
 
-    // Loading prop
-    it("shows loader when loading prop is true", async () => {
+    it("Loading – shows loader when prop is true", async () => {
       const loading = true;
       const label = "Button with some long text";
       const expectedClass = "pointer-events-none";
@@ -262,8 +247,7 @@ describe("UButton.vue", () => {
       expect(component.attributes("class")).toContain(expectedClass); // Unclickable
     });
 
-    // ID prop
-    it("applies the correct id attribute", () => {
+    it("Id – applies the correct attribute", () => {
       const id = "test-button-id";
 
       const component = mount(UButton, {
@@ -275,8 +259,7 @@ describe("UButton.vue", () => {
       expect(component.attributes("id")).toBe(id);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("Data Test – applies the correct attribute", () => {
       const dataTest = "test-button";
 
       const component = mount(UButton, {
@@ -289,10 +272,8 @@ describe("UButton.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content", () => {
       const slotContent = "Custom Content";
       const label = "Button";
 
@@ -309,8 +290,7 @@ describe("UButton.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content", () => {
       const label = "Button";
       const slotText = "Left";
       const slotClass = "left-content";
@@ -329,8 +309,7 @@ describe("UButton.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Right slot
-    it("renders content from right slot", () => {
+    it("Right – renders content", () => {
       const label = "Button";
       const slotText = "Right";
       const slotClass = "right-content";
@@ -350,18 +329,15 @@ describe("UButton.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Click event
-    it("emits click event when clicked", async () => {
+    it("Click – emits when clicked", async () => {
       const component = mount(UButton, {});
 
       await component.trigger("click");
       expect(component.emitted("click")).toBeTruthy();
     });
 
-    // No click event when disabled
-    it("does not emit click event when disabled", async () => {
+    it("Click – does not emit when disabled", async () => {
       const disabled = true;
 
       const component = mount(UButton, {
@@ -375,10 +351,8 @@ describe("UButton.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // buttonRef
-    it("exposes buttonRef", () => {
+    it("Button – exposes ref", () => {
       const component = mount(UButton, {});
 
       expect(component.vm.buttonRef).toBeDefined();

package/ui.button-link/tests/ULink.test.ts

@@ -6,7 +6,6 @@ import ULink from "../ULink.vue";
 
 import type { Props } from "../types.ts";
 
-// Create a mock router for testing router-link functionality
 const router = createRouter({
   history: createWebHistory(),
   routes: [
@@ -16,10 +15,8 @@ const router = createRouter({
 });
 
 describe("ULink.vue", () => {
-  // Props tests
   describe("Props", () => {
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const size = {
         sm: "text-small",
         md: "text-medium",
@@ -37,8 +34,7 @@ describe("ULink.vue", () => {
       });
     });
 
-    // Color prop
-    it("applies the correct color class", async () => {
+    it("Color – applies the correct color class", async () => {
       const colors = [
         "primary",
         "secondary",
@@ -63,8 +59,7 @@ describe("ULink.vue", () => {
       });
     });
 
-    // Label prop
-    it("renders the correct label text", () => {
+    it("Label – renders the correct label text", () => {
       const label = "Link Text";
 
       const component = mount(ULink, {
@@ -76,8 +71,7 @@ describe("ULink.vue", () => {
       expect(component.text()).toBe(label);
     });
 
-    // Href prop
-    it("renders the correct href attribute", () => {
+    it("Href – renders the correct href attribute", () => {
       const href = "https://example.com";
 
       const component = mount(ULink, {
@@ -89,8 +83,7 @@ describe("ULink.vue", () => {
       expect(component.attributes("href")).toBe(href);
     });
 
-    // Type prop
-    it("applies the correct href prefix based on type", () => {
+    it("Type – applies the correct href prefix based on type", () => {
       const types = {
         phone: { href: "1234567890", expected: "tel:1234567890" },
         email: { href: "test@example.com", expected: "mailto:test@example.com" },
@@ -109,8 +102,7 @@ describe("ULink.vue", () => {
       });
     });
 
-    // To prop
-    it("renders as router-link when to prop is provided", async () => {
+    it("To – renders as router-link when to prop is provided", async () => {
       const to = "/about";
 
       const component = mount(ULink, {
@@ -126,8 +118,7 @@ describe("ULink.vue", () => {
       expect(component.findComponent({ name: "RouterLink" }).exists()).toBe(true);
     });
 
-    // Target prop
-    it("applies the correct target attribute", () => {
+    it("Target – applies the correct target attribute", () => {
       const targets = ["_blank", "_self", "_parent", "_top"];
 
       targets.forEach((target) => {
@@ -142,8 +133,7 @@ describe("ULink.vue", () => {
       });
     });
 
-    // Rel prop
-    it("applies the correct rel attribute", () => {
+    it("Rel – applies the correct rel attribute", () => {
       const rel = "noopener noreferrer";
 
       const component = mount(ULink, {
@@ -156,8 +146,7 @@ describe("ULink.vue", () => {
       expect(component.attributes("rel")).toBe(rel);
     });
 
-    // Underlined prop
-    it("applies underlined class when underlined prop is true", () => {
+    it("Underlined – applies underlined class when underlined prop is true", () => {
       const underlined = {
         true: "underline",
         false: "no-underline",
@@ -175,8 +164,7 @@ describe("ULink.vue", () => {
       });
     });
 
-    // Dashed prop
-    it("applies dashed class when dashed prop is true", () => {
+    it("Dashed – applies dashed class when dashed prop is true", () => {
       const dashed = true;
       const dashedClass = "decoration-dashed";
 
@@ -189,8 +177,7 @@ describe("ULink.vue", () => {
       expect(component.attributes("class")).toContain(dashedClass);
     });
 
-    // Dotted prop
-    it("applies dotted class when dotted prop is true", () => {
+    it("Dotted – applies dotted class when dotted prop is true", () => {
       const dotted = true;
       const dottedClass = "decoration-dotted";
 
@@ -203,8 +190,7 @@ describe("ULink.vue", () => {
       expect(component.attributes("class")).toContain(dottedClass);
     });
 
-    // Disabled prop
-    it("applies disabled class when disabled prop is true", () => {
+    it("Disabled – applies disabled class when disabled prop is true", () => {
       const disabled = true;
 
       const component = mount(ULink, {
@@ -216,8 +202,7 @@ describe("ULink.vue", () => {
       expect(component.attributes("class")).toContain("cursor-not-allowed");
     });
 
-    // Block prop
-    it("applies block class when block prop is true", () => {
+    it("Block – applies block class when block prop is true", () => {
       const block = true;
       const blockClass = "w-full";
 
@@ -230,8 +215,7 @@ describe("ULink.vue", () => {
       expect(component.attributes("class")).toContain(blockClass);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("Data Test – applies the correct data-test attribute", () => {
       const dataTest = "test-link";
 
       const component = mount(ULink, {
@@ -244,10 +228,8 @@ describe("ULink.vue", () => {
     });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Default slot
-    it("renders content from default slot", () => {
+    it("Default – renders content from default slot", () => {
       const slotContent = "Custom Content";
       const label = "Link";
 
@@ -264,8 +246,7 @@ describe("ULink.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Default slot with router-link
-    it("renders content from default slot with router-link", () => {
+    it("Default – renders content from default slot with router-link", () => {
       const slotContent = "Custom Content";
       const label = "Link";
 
@@ -286,8 +267,7 @@ describe("ULink.vue", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    // Default slot with bindings
-    it("provides isActive and isExactActive bindings to default slot with router-link", () => {
+    it("Default – provides isActive and isExactActive bindings to default slot with router-link", () => {
       const component = mount(ULink, {
         props: {
           to: "/about",
@@ -310,42 +290,36 @@ describe("ULink.vue", () => {
     });
   });
 
-  // Events tests
   describe("Events", () => {
-    // Click event
-    it("emits click event when clicked", async () => {
+    it("Click – emits click event when clicked", async () => {
       const component = mount(ULink, {});
 
       await component.trigger("click");
       expect(component.emitted("click")).toBeTruthy();
     });
 
-    // Mouseover event
-    it("emits mouseover event when hovered", async () => {
+    it("Mouseover – emits mouseover event when hovered", async () => {
       const component = mount(ULink, {});
 
       await component.trigger("mouseover");
       expect(component.emitted("mouseover")).toBeTruthy();
     });
 
-    // Focus event
-    it("emits focus event when focused", async () => {
+    it("Focus – emits focus event when focused", async () => {
       const component = mount(ULink, {});
 
       await component.trigger("focus");
       expect(component.emitted("focus")).toBeTruthy();
     });
 
-    // Blur event
-    it("emits blur event when blurred", async () => {
+    it("Blur – emits blur event when blurred", async () => {
       const component = mount(ULink, {});
 
       await component.trigger("blur");
       expect(component.emitted("blur")).toBeTruthy();
     });
 
-    // Keydown event
-    it("emits keydown event when key is pressed", async () => {
+    it("Keydown – emits keydown event when key is pressed", async () => {
       const component = mount(ULink, {});
 
       await component.trigger("keydown");
@@ -353,10 +327,8 @@ describe("ULink.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // linkRef
-    it("exposes linkRef", () => {
+    it("Link – exposes linkRef", () => {
       const component = mount(ULink, {});
 
       expect(component.vm.linkRef).toBeDefined();

package/ui.button-toggle/tests/UToggle.test.ts

@@ -19,10 +19,8 @@ describe("UToggle.vue", () => {
     ];
   });
 
-  // Props tests
   describe("Props", () => {
-    // Size prop
-    it("applies the correct size class", async () => {
+    it("Size – applies the correct size class", async () => {
       const size = {
         "2xs": "text-small",
         xs: "text-small",
@@ -47,8 +45,7 @@ describe("UToggle.vue", () => {
       });
     });
 
-    // Options prop
-    it("renders the correct number of options", () => {
+    it("Options – renders the correct number of options", () => {
       const component = mount(UToggle, {
         props: {
           options,
@@ -61,8 +58,47 @@ describe("UToggle.vue", () => {
       expect(buttons.length).toBe(options.length);
     });
 
-    // ModelValue prop - Single selection
-    it("correctly selects option based on modelValue for single selection", async () => {
+    it("Options – disables individual option when option disabled prop is true", () => {
+      const customOptions: UToggleOption[] = [
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2", disabled: true },
+      ];
+
+      const component = mount(UToggle, {
+        props: {
+          options: customOptions,
+          name,
+        },
+      });
+
+      const buttons = component.findAllComponents(UButton);
+
+      expect(buttons[0].attributes("disabled")).toBeUndefined();
+      expect(buttons[1].attributes("disabled")).toBeDefined();
+    });
+
+    it("Options – set icon for individual options", () => {
+      const iconOptions: UToggleOption[] = [
+        { value: "option1", label: "Option 1", icon: "star" },
+        { value: "option2", label: "Option 2", leftIcon: "check" },
+        { value: "option3", label: "Option 3", rightIcon: "close" },
+      ];
+
+      const component = mount(UToggle, {
+        props: {
+          options: iconOptions,
+          name,
+        },
+      });
+
+      const buttons = component.findAllComponents(UButton);
+
+      expect(buttons[0].props("icon")).toBe("star");
+      expect(buttons[1].props("leftIcon")).toBe("check");
+      expect(buttons[2].props("rightIcon")).toBe("close");
+    });
+
+    it("Model Value – correctly selects option based on modelValue for single selection", async () => {
       const selectedClass = "bg-primary";
       const selectedValue = "option2";
 
@@ -79,8 +115,7 @@ describe("UToggle.vue", () => {
       expect(buttons[1].attributes("class")).toContain(selectedClass);
     });
 
-    // ModelValue prop - Multiple selection
-    it("correctly selects options based on modelValue for multiple selection", async () => {
+    it("Model Value – correctly selects options based on modelValue for multiple selection", async () => {
       const selectedClass = "bg-primary";
       const selectedValues = ["option1", "option3"];
 
@@ -99,8 +134,7 @@ describe("UToggle.vue", () => {
       expect(multiButtons[2].attributes("class")).toContain(selectedClass);
     });
 
-    // Multiple prop
-    it("allows multiple selections when multiple prop is true", async () => {
+    it("Multiple – allows multiple selections when multiple prop is true", async () => {
       const component = mount(UToggle, {
         props: {
           options,
@@ -118,8 +152,7 @@ describe("UToggle.vue", () => {
       expect(emittedValue).toEqual(["option1", "option2"]);
     });
 
-    // Split prop - true
-    it("applies split class when split prop is true", () => {
+    it("Split – applies split class when split prop is true", () => {
       const split = true;
       const splitClasses = "flex-wrap";
 
@@ -133,8 +166,7 @@ describe("UToggle.vue", () => {
       expect(component.attributes("class")).toContain(splitClasses);
     });
 
-    // Split prop - false
-    it("applies split class when split prop is true", () => {
+    it("Split – applies unsplit class when split prop is false", () => {
       const split = false;
       const unsplitClasses = "gap-px";
 
@@ -148,8 +180,7 @@ describe("UToggle.vue", () => {
       expect(component.attributes("class")).toContain(unsplitClasses);
     });
 
-    // Disabled prop
-    it("disables all options when disabled prop is true", () => {
+    it("Disabled – disables all options when disabled prop is true", () => {
       const disabled = true;
 
       const component = mount(UToggle, {
@@ -167,28 +198,7 @@ describe("UToggle.vue", () => {
       });
     });
 
-    // Individual option disabled
-    it("disables individual option when option disabled prop is true", () => {
-      const customOptions: UToggleOption[] = [
-        { value: "option1", label: "Option 1" },
-        { value: "option2", label: "Option 2", disabled: true },
-      ];
-
-      const component = mount(UToggle, {
-        props: {
-          options: customOptions,
-          name,
-        },
-      });
-
-      const buttons = component.findAllComponents(UButton);
-
-      expect(buttons[0].attributes("disabled")).toBeUndefined();
-      expect(buttons[1].attributes("disabled")).toBeDefined();
-    });
-
-    // Block prop
-    it("applies block class when block prop is true", () => {
+    it("Block – applies block class when block prop is true", () => {
       const block = true;
       const blockClasses = "w-full";
 
@@ -203,8 +213,7 @@ describe("UToggle.vue", () => {
       expect(component.attributes("class")).toContain(blockClasses);
     });
 
-    // Round prop
-    it("applies round class to buttons when round prop is true", () => {
+    it("Round – applies round class to buttons when round prop is true", () => {
       const round = true;
       const roundClasses = "rounded-full";
 
@@ -221,8 +230,7 @@ describe("UToggle.vue", () => {
       expect(button.attributes("class")).toContain(roundClasses);
     });
 
-    // Square prop
-    it("applies square class to buttons when square prop is true", () => {
+    it("Square – applies square class to buttons when square prop is true", () => {
       const square = true;
 
       const component = mount(UToggle, {
@@ -239,8 +247,7 @@ describe("UToggle.vue", () => {
       expect(button.attributes("class")).toContain("p-");
     });
 
-    // ID prop
-    it("applies the correct id attribute", () => {
+    it("Id – applies the correct id attribute", () => {
       const id = "test-toggle-id";
 
       const component = mount(UToggle, {
@@ -253,8 +260,7 @@ describe("UToggle.vue", () => {
       expect(component.attributes("id")).toBe(id);
     });
 
-    // DataTest prop
-    it("applies the correct data-test attribute", () => {
+    it("Data Test – applies the correct data-test attribute", () => {
       const dataTest = "test-toggle";
 
       const component = mount(UToggle, {
@@ -266,34 +272,10 @@ describe("UToggle.vue", () => {
 
       expect(component.attributes("data-test")).toBe(dataTest);
     });
-
-    // Icon, leftIcon, rightIcon props
-    it("passes icon props to UButton components", () => {
-      const iconOptions: UToggleOption[] = [
-        { value: "option1", label: "Option 1", icon: "star" },
-        { value: "option2", label: "Option 2", leftIcon: "check" },
-        { value: "option3", label: "Option 3", rightIcon: "close" },
-      ];
-
-      const component = mount(UToggle, {
-        props: {
-          options: iconOptions,
-          name,
-        },
-      });
-
-      const buttons = component.findAllComponents(UButton);
-
-      expect(buttons[0].props("icon")).toBe("star");
-      expect(buttons[1].props("leftIcon")).toBe("check");
-      expect(buttons[2].props("rightIcon")).toBe("close");
-    });
   });
 
-  // Slots tests
   describe("Slots", () => {
-    // Left slot
-    it("renders content from left slot", () => {
+    it("Left – renders content from left slot", () => {
       const slotText = "Left";
       const slotClass = "left-content";
 
@@ -310,8 +292,7 @@ describe("UToggle.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Option slot
-    it("renders content from option slot", () => {
+    it("Option – renders content from option slot", () => {
       const slotText = "Custom Option";
       const slotClass = "option-content";
 
@@ -328,26 +309,7 @@ describe("UToggle.vue", () => {
       expect(component.find(`.${slotClass}`).text()).toBe(slotText);
     });
 
-    // Right slot
-    it("renders content from right slot", () => {
-      const slotText = "Right";
-      const slotClass = "right-content";
-
-      const component = mount(UToggle, {
-        props: {
-          options,
-          name,
-        },
-        slots: {
-          right: `<span class='${slotClass}'>${slotText}</span>`,
-        },
-      });
-
-      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
-    });
-
-    // Slot bindings
-    it("provides correct bindings to slots", () => {
+    it("Option – provides correct bindings to slots", () => {
       const optionIndex = "0";
       const bindingOptions: UToggleOption[] = [
         { value: "option1", label: "Option 1", icon: "star" },
@@ -380,12 +342,27 @@ describe("UToggle.vue", () => {
       expect(component.find(`.${iconClass}`).text()).toBe(bindingOptions[0].icon);
       expect(component.find(`.${indexClass}`).text()).toBe(optionIndex);
     });
+
+    it("Right – renders content from right slot", () => {
+      const slotText = "Right";
+      const slotClass = "right-content";
+
+      const component = mount(UToggle, {
+        props: {
+          options,
+          name,
+        },
+        slots: {
+          right: `<span class='${slotClass}'>${slotText}</span>`,
+        },
+      });
+
+      expect(component.find(`.${slotClass}`).text()).toBe(slotText);
+    });
   });
 
-  // Events tests
   describe("Events", () => {
-    // update:modelValue event
-    it("emits update:modelValue event when option is clicked", async () => {
+    it("Model Value – emits update:modelValue event when option is clicked", async () => {
       const component = mount(UToggle, {
         props: {
           options,
@@ -400,8 +377,7 @@ describe("UToggle.vue", () => {
       expect(emittedValue).toBe(options[0].value);
     });
 
-    // Option onClick callback
-    it("calls option onClick callback when option is clicked", async () => {
+    it("Option Click – calls option onClick callback when option is clicked", async () => {
       const onClick = vi.fn();
       const callbackOptions: UToggleOption[] = [{ value: "option1", label: "Option 1", onClick }];
 
@@ -421,10 +397,8 @@ describe("UToggle.vue", () => {
     });
   });
 
-  // Exposed refs tests
   describe("Exposed refs", () => {
-    // optionsRef
-    it("exposes optionsRef", () => {
+    it("Options – exposes optionsRef", () => {
       const component = mount(UToggle, {
         props: {
           name,

package/ui.container-divider/tests/UDivider.test.ts

@@ -7,20 +7,16 @@ import UIcon from "../../ui.image-icon/UIcon.vue";
 import type { Props } from "../types.ts";
 
 describe("UDivider", () => {
-  // Props
   describe("Props", () => {
-    // Default divider visibility
-    it("shows only one divider when no label, icon, or slot content is provided", () => {
+    it("No props – shows only one divider when no label, icon, or slot content is provided", () => {
       const component = mount(UDivider);
 
-      // Should have only one divider element
       const dividers = component.findAll("[vl-key='divider']");
 
       expect(dividers.length).toBe(1);
     });
 
-    // Label prop
-    it("renders with label prop", () => {
+    it("Label – renders with label prop", () => {
       const label = "Divider Label";
 
       const component = mount(UDivider, {
@@ -29,50 +25,45 @@ describe("UDivider", () => {
         },
       });
 
-      // Should have two divider elements (before and after icon)
       const dividers = component.findAll("[vl-key='divider']");
 
       expect(dividers.length).toBe(2);
       expect(component.text()).toContain(label);
     });
 
-    // Icon prop
-    it("renders with icon prop", () => {
+    it("Label – prioritizes label over icon when both are provided", () => {
+      const label = "Test Label";
       const icon = "star";
 
       const component = mount(UDivider, {
         props: {
+          label,
           icon,
         },
       });
 
-      // Should have two divider elements (before and after icon)
-      const dividers = component.findAll("[vl-key='divider']");
-      const iconComponent = component.findComponent(UIcon);
-
-      expect(dividers.length).toBe(2);
-      expect(iconComponent.exists()).toBe(true);
-      expect(iconComponent.props("name")).toBe(icon);
+      expect(component.text()).toContain(label);
+      expect(component.findComponent(UIcon).exists()).toBe(false);
     });
 
-    // Priority of label over icon
-    it("prioritizes label over icon when both are provided", () => {
-      const label = "Test Label";
+    it("Icon – renders with icon prop", () => {
       const icon = "star";
 
       const component = mount(UDivider, {
         props: {
-          label,
           icon,
         },
       });
 
-      expect(component.text()).toContain(label);
-      expect(component.findComponent(UIcon).exists()).toBe(false);
+      const dividers = component.findAll("[vl-key='divider']");
+      const iconComponent = component.findComponent(UIcon);
+
+      expect(dividers.length).toBe(2);
+      expect(iconComponent.exists()).toBe(true);
+      expect(iconComponent.props("name")).toBe(icon);
     });
 
-    // Size prop
-    it("applies correct size classes", () => {
+    it("Size – applies correct size classes", () => {
       const sizeClasses = {
         xs: "border-t",
         sm: "border-t-[2px]",
@@ -94,8 +85,7 @@ describe("UDivider", () => {
       });
     });
 
-    // Color prop
-    it("applies correct color classes", () => {
+    it("Color – applies correct color classes", () => {
       const colorClasses = {
         primary: "border-primary",
         secondary: "border-secondary",
@@ -122,8 +112,7 @@ describe("UDivider", () => {
       });
     });
 
-    // Dashed prop
-    it("applies dashed class when dashed prop is true", () => {
+    it("Dashed – applies dashed class when dashed prop is true", () => {
       const dashed = true;
       const expectedClass = "border-dashed";
 
@@ -136,8 +125,7 @@ describe("UDivider", () => {
       expect(component.find(`[vl-key='divider']`).classes()).toContain(expectedClass);
     });
 
-    // Dotted prop
-    it("applies dotted class when dotted prop is true", () => {
+    it("Dotted – applies dotted class when dotted prop is true", () => {
       const dotted = true;
       const expectedClass = "border-dotted";
 
@@ -150,8 +138,7 @@ describe("UDivider", () => {
       expect(component.find(`[vl-key='divider']`).classes()).toContain(expectedClass);
     });
 
-    // Vertical prop
-    it("applies vertical classes when vertical prop is true", () => {
+    it("Vertical – applies vertical classes when vertical prop is true", () => {
       const verticalVariants = {
         true: {
           wrapper: "flex-col",
@@ -170,16 +157,12 @@ describe("UDivider", () => {
           },
         });
 
-        // Check component has correct flex class
         expect(component.classes()).toContain(classes.wrapper);
-
-        // Check divider has correct border class
         expect(component.find("[vl-key='divider']").classes()).toContain(classes.divider);
       });
     });
 
-    // DataTest prop
-    it("applies data-test attribute", () => {
+    it("Data Test – applies data-test attribute", () => {
       const dataTest = "divider-test";
 
       const component = mount(UDivider, {
@@ -192,10 +175,8 @@ describe("UDivider", () => {
     });
   });
 
-  // Slots
   describe("Slots", () => {
-    // Default slot
-    it("renders content in default slot", () => {
+    it("Default – renders content in default slot", () => {
       const slotClass = "custom-content";
       const slotContent = "Custom Content";
 
@@ -205,7 +186,6 @@ describe("UDivider", () => {
         },
       });
 
-      // Should have two divider elements (before and after slot content)
       const dividers = component.findAll("[vl-key='divider']");
 
       expect(dividers.length).toBe(2);
@@ -213,7 +193,7 @@ describe("UDivider", () => {
       expect(component.text()).toContain(slotContent);
     });
 
-    it("provides label and icon-name bindings to default slot", () => {
+    it("Default – provides label and icon-name bindings to default slot", () => {
       const slotClass = "custom-content";
       const label = "Test Label";
       const icon = "star";
@@ -237,10 +217,8 @@ describe("UDivider", () => {
     });
   });
 
-  // Exposed refs
   describe("Exposed refs", () => {
-    // WrapperRef
-    it("exposes wrapperRef", () => {
+    it("Wrapper – exposes wrapperRef", () => {
       const component = mount(UDivider);
 
       expect(component.vm.wrapperRef).toBeDefined();

package/ui.form-listbox/UListbox.vue

@@ -139,22 +139,7 @@ watch(
           const marginTop = parseFloat(styles.marginTop || "0");
           const marginBottom = parseFloat(styles.marginBottom || "0");
 
-          const [childDiv] = el.getElementsByTagName("div");
-          const childStyles = childDiv && window.getComputedStyle(childDiv);
-          const childMarginTop = parseFloat(childStyles?.marginTop || "0");
-          const childMarginBottom = parseFloat(childStyles?.marginBottom || "0");
-          const childPaddingTop = parseFloat(childStyles?.paddingTop || "0");
-          const childPaddingBottom = parseFloat(childStyles?.paddingBottom || "0");
-
-          return (
-            elHeight +
-            marginTop +
-            marginBottom +
-            childMarginTop +
-            childMarginBottom +
-            childPaddingTop +
-            childPaddingBottom
-          );
+          return elHeight + marginTop + marginBottom;
         })
         .reduce((acc, cur) => acc + cur, 0);
 
@@ -167,27 +152,29 @@ watch(
 
       const inputEl = listboxInputRef.value?.input as HTMLInputElement | undefined;
       let listboxInputHeight = 0;
-      let listboxInputPaddingTop = 0;
-      let listboxInputPaddingBottom = 0;
+
+      let listboxInputWrapperPaddingTop = 0;
 
       if (inputEl) {
         const listboxInputStyle = getComputedStyle(inputEl);
+        const listboxInputWrapperStyle = getComputedStyle(
+          inputEl.parentElement?.parentElement?.parentElement as Element,
+        );
 
         listboxInputHeight = parseFloat(listboxInputStyle.height || "0");
-        listboxInputPaddingTop = parseFloat(listboxInputStyle.paddingTop || "0");
-        listboxInputPaddingBottom = parseFloat(listboxInputStyle.paddingBottom || "0");
+
+        listboxInputWrapperPaddingTop = parseFloat(listboxInputWrapperStyle.paddingTop || "0");
       }
 
       wrapperMaxHeight.value = `${
         maxHeight +
-        wrapperGap +
+        (props.searchable ? wrapperGap : 0) +
         wrapperPaddingTop +
         wrapperPaddingBottom +
         wrapperBorderTop +
         wrapperBorderBottom +
         listboxInputHeight +
-        listboxInputPaddingTop +
-        listboxInputPaddingBottom
+        (props.searchable ? listboxInputWrapperPaddingTop : 0)
       }px`;
     });
   },