@dpa-id-components/dpa-shared-components 22.0.0-next.3 → 22.0.0-next.5

package/dist/src/components/UiSearchBar/UiSearchBar.spec.ts

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSearchBar from "./UiSearchBar.vue";
 
@@ -12,7 +12,7 @@ function createWrapper(
 }
 
 describe("UiSearchBar", () => {
-  it("renders the placeholder", () => {
+  test("renders the placeholder", () => {
     const placeholder = "Example query";
     const wrapper = createWrapper({ props: { placeholder } });
 
@@ -20,7 +20,7 @@ describe("UiSearchBar", () => {
     expect(textInput.element.placeholder).toBe(placeholder);
   });
 
-  it("renders the value", async () => {
+  test("renders the value", async () => {
     const wrapper = createWrapper();
 
     const searchQuery = "Ein Suchbegriff";
@@ -30,7 +30,7 @@ describe("UiSearchBar", () => {
     expect(textInput.element.value).toBe(searchQuery);
   });
 
-  it("emits focus event", async () => {
+  test("emits focus event", async () => {
     const wrapper = createWrapper();
 
     const textInput = wrapper.find("input");
@@ -38,7 +38,7 @@ describe("UiSearchBar", () => {
     expect(wrapper.emitted("focus")).toBeTruthy();
   });
 
-  it("emits blur event", async () => {
+  test("emits blur event", async () => {
     const wrapper = createWrapper();
 
     const textInput = wrapper.find("input");
@@ -46,7 +46,7 @@ describe("UiSearchBar", () => {
     expect(wrapper.emitted("blur")).toBeTruthy();
   });
 
-  it("renders chips and action slot", async () => {
+  test("renders chips and action slot", async () => {
     const wrapper = createWrapper({
       props: {
         placeholder: "Suchen",

package/dist/src/components/UiSearchInput/UiSearchInput.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSearchInput from "./UiSearchInput.vue";
 
@@ -12,7 +12,7 @@ describe("UiSearchInput", () => {
     },
   });
 
-  it("displays and emits entries", async () => {
+  test("displays and emits entries", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);
@@ -20,7 +20,7 @@ describe("UiSearchInput", () => {
     expect(textInput.element.value).toBe(searchQuery);
   });
 
-  it("adds searchbar row when addRow button is clicked", async () => {
+  test("adds searchbar row when addRow button is clicked", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);
@@ -30,7 +30,7 @@ describe("UiSearchInput", () => {
     expect(wrapper.findAll("input")).toHaveLength(2);
   });
 
-  it("deletes second row when there is no text in the searchbar", async () => {
+  test("deletes second row when there is no text in the searchbar", async () => {
     const searchQuery = "Suchbegriff";
     const textInput = wrapper.find("input");
     await textInput.setValue(searchQuery);

package/dist/src/components/UiSection/UiSection.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSection from "./UiSection.vue";
 
@@ -10,13 +10,13 @@ describe("UiSection", () => {
     },
   });
 
-  it("renders with slot content", () => {
+  test("renders with slot content", () => {
     const inner = wrapper.find('[data-testid="inner"]');
 
     expect(inner.text()).toBe("Slot text");
   });
 
-  it("renders with border classes", async () => {
+  test("renders with border classes", async () => {
     await wrapper.setProps({
       borderTop: true,
       borderBottom: true,
@@ -25,7 +25,7 @@ describe("UiSection", () => {
     expect(wrapper.classes("border-b")).toBe(true);
   });
 
-  it("renders with padding classes", async () => {
+  test("renders with padding classes", async () => {
     await wrapper.setProps({
       verticalPadding: "small",
     });
@@ -36,7 +36,7 @@ describe("UiSection", () => {
     expect(inner.classes("pb-12")).toBe(true);
   });
 
-  it("renders with size classes", async () => {
+  test("renders with size classes", async () => {
     await wrapper.setProps({
       size: "small",
     });

package/dist/src/components/UiSectionDivider/UiSectionDivider.spec.ts

@@ -1,16 +1,16 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSectionDivider from "./UiSectionDivider.vue";
 
 describe("UiSectionDivider", () => {
   const wrapper = mount(UiSectionDivider);
 
-  it("renders default size class", () => {
+  test("renders default size class", () => {
     expect(wrapper.classes("h-4")).toBe(true);
   });
 
-  it("renders small size class", async () => {
+  test("renders small size class", async () => {
     await wrapper.setProps({
       size: "small",
     });

package/dist/src/components/UiSelect/{UIiSelect.spec.ts → UiSelect.spec.ts}

@@ -1,5 +1,5 @@
 import { type ComponentMountingOptions, mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSelect from "./UiSelect.vue";
 
@@ -10,7 +10,7 @@ function createWrapper(
 }
 
 describe("UiSelect", () => {
-  it("renders attributes on correct element", () => {
+  test("renders attributes on correct element", () => {
     const wrapper = createWrapper({
       props: {
         id: "id",
@@ -38,12 +38,16 @@ describe("UiSelect", () => {
     expect(select.element.getAttribute("aria-errormessage")).toBe("message");
   });
 
-  it("implements working v-model interface", async () => {
+  test("implements working v-model interface", async () => {
     const wrapper = createWrapper({
       slots: {
-        default: { template: "Options" },
+        default: {
+          template: /*html*/ `
+            Options
+          `,
+        },
         options: {
-          template: `
+          template: /*html*/ `
             <option value="primary">Primary</option>
             <option value="secondary">Secondary</option>
             <option value="tertiary">Tertiary</option>
@@ -71,12 +75,16 @@ describe("UiSelect", () => {
     expect(lastEvent).toEqual(["tertiary"]);
   });
 
-  it("works without v-model", async () => {
+  test("works without v-model", async () => {
     const wrapper = createWrapper({
       slots: {
-        default: { template: "Options" },
+        default: {
+          template: /*html*/ `
+            Options
+          `,
+        },
         options: {
-          template: `
+          template: /*html*/ `
             <option value="">None</option>
             <option value="primary">Primary</option>
             <option value="secondary">Secondary</option>

package/dist/src/components/UiSelect/UiSelect.stories.ts

@@ -55,7 +55,7 @@ export const Default: Story = {
       return { args };
     },
     components: { UiSelect },
-    template: `
+    template: /*html*/ `
       <UiSelect
         v-model="args.modelValue"
         v-bind="args"

package/dist/src/components/UiSkeletonBox/UiSkeletonBox.spec.ts

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSkeletonBox from "./UiSkeletonBox.vue";
 
 describe("UiSkeletonBox", () => {
   const wrapper = mount(UiSkeletonBox);
 
-  it("renders default", () => {
+  test("renders default", () => {
     expect(wrapper.classes("inline-block")).toBe(true);
     expect(wrapper.classes("animate-pulse")).toBe(true);
     expect(wrapper.classes("rounded-sm")).toBe(true);

package/dist/src/components/UiSnackbar/UiSnackbar.spec.ts

@@ -1,12 +1,12 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiIcon from "../UiIcon/UiIcon.vue";
 
 import UiSnackbar from "./UiSnackbar.vue";
 
 describe("UiSnackbar", () => {
-  it("displays a text message via the default slot", () => {
+  test("displays a text message via the default slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -19,7 +19,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.text()).toBe("Hello, from snackbar");
   });
 
-  it("Is not visible when props don't say so", () => {
+  test("Is not visible when props don't say so", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -32,7 +32,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.find("div").exists()).toBe(false);
   });
 
-  it("displays an SVG icon via the icon slot", () => {
+  test("displays an SVG icon via the icon slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -46,7 +46,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.findComponent(UiIcon)).toBeTruthy();
   });
 
-  it("has an action button via the action slot", () => {
+  test("has an action button via the action slot", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from snackbar",
@@ -62,7 +62,7 @@ describe("UiSnackbar", () => {
     expect(wrapper.emitted()["action-click"]).toBeTruthy();
   });
 
-  it("snackbar type success has green background", () => {
+  test("snackbar type success has green background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from success snackbar",
@@ -77,7 +77,7 @@ describe("UiSnackbar", () => {
     expect(coloredDiv.classes("bg-accent-green")).toBe(true);
   });
 
-  it("snackbar type error has red background", () => {
+  test("snackbar type error has red background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from error snackbar",
@@ -92,7 +92,7 @@ describe("UiSnackbar", () => {
     expect(coloredDiv.classes("bg-accent-red")).toBe(true);
   });
 
-  it("snackbar type info has gray-900 background", () => {
+  test("snackbar type info has gray-900 background", () => {
     const wrapper = mount(UiSnackbar, {
       slots: {
         default: "Hello, from info snackbar",

package/dist/src/components/UiSpinner/UiSpinner.spec.ts

@@ -1,10 +1,10 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiSpinner from "./UiSpinner.vue";
 
 describe("Spinner", () => {
-  it("renders with default props", () => {
+  test("renders with default props", () => {
     const wrapper = mount(UiSpinner);
 
     // Wrapper div should have size-6 class (lg size)
@@ -29,7 +29,7 @@ describe("Spinner", () => {
     expect(arcCircle.classes()).toContain("text-primary");
   });
 
-  it("renders neutral with opacity color class when appearance is neutral", () => {
+  test("renders neutral with opacity color class when appearance is neutral", () => {
     const wrapper = mount(UiSpinner, {
       props: {
         appearance: "neutral",

package/dist/src/components/UiTextButton/UiTextButton.spec.ts

@@ -1,15 +1,15 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiTextButton from "./UiTextButton.vue";
 
 describe("UiTextButton", () => {
-  it("should render defaults", () => {
+  test("should render defaults", () => {
     const wrapper = mount(UiTextButton);
     expect(wrapper.classes("font-normal")).toBe(true);
   });
 
-  it("should render semibold font-weight", () => {
+  test("should render semibold font-weight", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         weight: "semibold",
@@ -18,7 +18,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("font-semibold")).toBe(true);
   });
 
-  it("should render xsmall font-size", () => {
+  test("should render xsmall font-size", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         size: "xsmall",
@@ -27,7 +27,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-xs")).toBe(true);
   });
 
-  it("should render small font-size", () => {
+  test("should render small font-size", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         size: "small",
@@ -36,7 +36,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-sm")).toBe(true);
   });
 
-  it("should render medium font-size", () => {
+  test("should render medium font-size", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         size: "medium",
@@ -45,7 +45,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-base")).toBe(true);
   });
 
-  it("should render blue text color", () => {
+  test("should render blue text color", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         color: "blue",
@@ -54,7 +54,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-primary")).toBe(true);
   });
 
-  it("should render gray text color", () => {
+  test("should render gray text color", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         color: "gray",
@@ -63,7 +63,7 @@ describe("UiTextButton", () => {
     expect(wrapper.classes("text-neutral-subtle")).toBe(true);
   });
 
-  it("should render iconLeft", () => {
+  test("should render iconLeft", () => {
     const iconLeft = "alert";
     const wrapper = mount(UiTextButton, {
       props: {
@@ -75,7 +75,7 @@ describe("UiTextButton", () => {
     });
   });
 
-  it("should render iconRight", () => {
+  test("should render iconRight", () => {
     const iconRight = "alert";
     const wrapper = mount(UiTextButton, {
       props: {
@@ -87,7 +87,7 @@ describe("UiTextButton", () => {
     });
   });
 
-  it("should change gray text color when placement is oncanvas", () => {
+  test("should change gray text color when placement is oncanvas", () => {
     const wrapper = mount(UiTextButton, {
       props: {
         color: "gray",

package/dist/src/components/UiToggleButton/UiToggleButton.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiToggleButton from "./UiToggleButton.vue";
 
@@ -11,7 +11,7 @@ function mountToggle(props = {}, slotContent = "Label") {
 }
 
 describe("UiToggleButton", () => {
-  it("renders with correct defaults when no props are provided", () => {
+  test("renders with correct defaults when no props are provided", () => {
     const wrapper = mountToggle();
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -22,13 +22,13 @@ describe("UiToggleButton", () => {
     expect(input.attributes("id")).toBeTruthy();
   });
 
-  it("renders slot content", () => {
+  test("renders slot content", () => {
     const wrapper = mountToggle({}, "Slot Label");
 
     expect(wrapper.text()).toContain("Slot Label");
   });
 
-  it("emits update:modelValue when clicked", async () => {
+  test("emits update:modelValue when clicked", async () => {
     const wrapper = mountToggle({ modelValue: false });
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -38,7 +38,7 @@ describe("UiToggleButton", () => {
     expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([true]);
   });
 
-  it("emits update:modelValue false when toggled from true", async () => {
+  test("emits update:modelValue false when toggled from true", async () => {
     const wrapper = mountToggle({ modelValue: true });
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -48,7 +48,7 @@ describe("UiToggleButton", () => {
     expect(wrapper.emitted("update:modelValue")?.[0]).toEqual([false]);
   });
 
-  it("disables the input when disabled prop is set", () => {
+  test("disables the input when disabled prop is set", () => {
     const wrapper = mountToggle({ disabled: true });
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -56,7 +56,7 @@ describe("UiToggleButton", () => {
     expect((input.element as HTMLInputElement).disabled).toBe(true);
   });
 
-  it("does not emit update:modelValue when disabled", async () => {
+  test("does not emit update:modelValue when disabled", async () => {
     const wrapper = mountToggle({ disabled: true, modelValue: false });
 
     const input = wrapper.find("[data-testid='toggleButton']");
@@ -65,7 +65,7 @@ describe("UiToggleButton", () => {
     expect(wrapper.emitted("update:modelValue")).toBeFalsy();
   });
 
-  it("uses provided id on the input", () => {
+  test("uses provided id on the input", () => {
     const wrapper = mountToggle({ id: "custom-id" });
 
     const input = wrapper.find("[data-testid='toggleButton']");

package/dist/src/components/UiTooltip/UiTooltip.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiTooltip from "./UiTooltip.vue";
 
@@ -8,7 +8,7 @@ document.body.innerHTML = `
 `;
 
 describe("UiTooltip", () => {
-  it("shows correct content", () => {
+  test("shows correct content", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -20,7 +20,7 @@ describe("UiTooltip", () => {
     expect(wrapper.text()).toBe("tooltip content");
   });
 
-  it("is not rendered without mouseover", () => {
+  test("is not rendered without mouseover", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -35,7 +35,7 @@ describe("UiTooltip", () => {
     ).toBeFalsy();
   });
 
-  it("is rendered upon mouseover", async () => {
+  test("is rendered upon mouseover", async () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -57,7 +57,7 @@ describe("UiTooltip", () => {
     );
   });
 
-  it("is rendered in the correct position", async () => {
+  test("is rendered in the correct position", async () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -75,7 +75,7 @@ describe("UiTooltip", () => {
     ).toBe("right");
   });
 
-  it("is in a fixed position", () => {
+  test("is in a fixed position", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: true,
@@ -94,7 +94,7 @@ describe("UiTooltip", () => {
     wrapper.unmount();
   });
 
-  it("shows no tooltip content when hidden", async () => {
+  test("shows no tooltip content when hidden", async () => {
     const wrapper = mount(UiTooltip, {
       props: {
         hidden: true,
@@ -114,7 +114,7 @@ describe("UiTooltip", () => {
     expect(wrapper.find('[data-testid="tooltipElement"]').exists()).toBe(false);
   });
 
-  it("applies no transition classes when animate is false", () => {
+  test("applies no transition classes when animate is false", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,
@@ -132,7 +132,7 @@ describe("UiTooltip", () => {
     expect(transition.props("leaveToClass")).toBeUndefined();
   });
 
-  it("applies transition classes when animate is true", () => {
+  test("applies transition classes when animate is true", () => {
     const wrapper = mount(UiTooltip, {
       props: {
         fixed: false,

package/dist/{standard-view-CmlAxXrM.js → standard-view-DfvAb3iJ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/standard-view.vue
 var i = {}, a = {

package/dist/{star-x38wQI5a.js → star-BdzEpiC-.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/star.vue
 var i = {}, a = {

package/dist/{star-filled-V0iRfD5M.js → star-filled-ZgHiwVZ0.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/star-filled.vue
 var i = {}, a = {

package/dist/{stop-BKrExcb1.js → stop-ugLlg2YL.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/stop.vue
 var i = {}, a = {

package/dist/{story-B2rvDIJr.js → story-D7qk5t65.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/story.vue
 var i = {}, a = {

package/dist/{story-6skLDsue.js → story-k_tWc66v.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { t as e } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
 //#region src/components/UiMediaTypeIcon/icons/story.vue
 var i = {}, a = {