@dpa-id-components/dpa-shared-components 22.0.0-next.4 → 22.0.0-next.6

package/dist/{print-BLPvvCA8.js → print-DPDfMQTz.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/print.vue
 var i = {}, a = {

package/dist/{refresh-CU1dwwoY.js → refresh-1gzhEzRl.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/refresh.vue
 var i = {}, a = {

package/dist/{reset-Dgbd_O_e.js → reset-Cqepci78.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/reset.vue
 var i = {}, a = {

package/dist/{responsive-BQ5xjhN4.js → responsive-HisoeUq7.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/responsive.vue
 var i = {}, a = {

package/dist/{rubix-thema-OSZXu-Md.js → rubix-thema-D5jmA6bw.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/rubix-thema.vue
 var i = {}, a = {

package/dist/{save-CIg7q65b.js → save-DoP23FsL.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/save.vue
 var i = {}, a = {

package/dist/{saved-search-CeLi3iw6.js → saved-search-BY5aeZXd.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/saved-search.vue
 var i = {}, a = {

package/dist/{saved-search-filled-BTrN8F4r.js → saved-search-filled-D6t8P4EP.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/saved-search-filled.vue
 var i = {}, a = {

package/dist/{search-CQIKBYqi.js → search-Bb5cl_0r.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/search.vue
 var i = {}, a = {

package/dist/{settings-BMFNH3LB.js → settings-CCxd6N9K.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/settings.vue
 var i = {}, a = {

package/dist/{share-DMoEV0Gq.js → share-Cpx2YjXm.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/share.vue
 var i = {}, a = {

package/dist/{share-alternative-P6c3Vi7L.js → share-alternative-ZW-jTsIU.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/share-alternative.vue
 var i = {}, a = {

package/dist/{sidebar-D2uDpQM0.js → sidebar-DY7SHRNO.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, createStaticVNode as n, openBlock as r } from "vue";
 //#region src/assets/icons/sidebar.vue
 var i = {}, a = {

package/dist/{sidebar-filled-LiiR992T.js → sidebar-filled-gmJ2_ZY2.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/sidebar-filled.vue
 var i = {}, a = {

package/dist/{slack-CP6YIaQf.js → slack-OnnXQ7Rc.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/slack.vue
 var i = {}, a = {

package/dist/{slider-config-B_eNooTe.js → slider-config-CPC1To1k.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/slider-config.vue
 var i = {}, a = {

package/dist/{spellcheck-B0Il_eZe.js → spellcheck-D3iOEOk5.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/spellcheck.vue
 var i = {}, a = {

package/dist/{spinner-CRHdpyRR.js → spinner-DghFg6Uk.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/spinner.vue
 var i = {}, a = {

package/dist/src/components/DpaMediaItem/DpaMediaItem.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 DpaMediaItem from "./DpaMediaItem.vue";
 
 describe("DpaMediaItem", () => {
-  it("displays items in the time published slot", () => {
+  test("displays items in the time published slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         timePublished: "Time Slot",
@@ -13,7 +13,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Time Slot");
   });
 
-  it("displays items in the description slot", () => {
+  test("displays items in the description slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         description: "Description",
@@ -22,7 +22,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Description");
   });
 
-  it("displays items in the planning slot", () => {
+  test("displays items in the planning slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         planning: "Planning",
@@ -31,7 +31,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Planning");
   });
 
-  it("displays items in the textLength slot", () => {
+  test("displays items in the textLength slot", () => {
     const wrapper = mount(DpaMediaItem, {
       slots: {
         textLength: "Text Length",
@@ -40,7 +40,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.text()).toBe("Text Length");
   });
 
-  it("changes icon according to the genre", () => {
+  test("changes icon according to the genre", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         genre: "audio",
@@ -52,7 +52,7 @@ describe("DpaMediaItem", () => {
     });
   });
 
-  it("changes icon when fulfilled", () => {
+  test("changes icon when fulfilled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         genre: "audio",
@@ -66,7 +66,7 @@ describe("DpaMediaItem", () => {
     });
   });
 
-  it("is styled differently when fulfilled", () => {
+  test("is styled differently when fulfilled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         isFulfilled: true,
@@ -77,7 +77,7 @@ describe("DpaMediaItem", () => {
     expect(rootDiv.classes("border-neutral-faint")).toBe(true);
   });
 
-  it("renders images with the correct source", () => {
+  test("renders images with the correct source", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -87,7 +87,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("img").attributes().src).toBe("Source");
   });
 
-  it("renders images with correct alt-text", () => {
+  test("renders images with correct alt-text", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -98,7 +98,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("img").attributes().alt).toBe("Thumbnail :Alternative");
   });
 
-  it("displays the correct image count", () => {
+  test("displays the correct image count", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         imgSrc: "Source",
@@ -109,7 +109,7 @@ describe("DpaMediaItem", () => {
     expect(wrapper.find("[data-testid='imageCount']").text()).toBe("2");
   });
 
-  it("is styled differently when disabled", () => {
+  test("is styled differently when disabled", () => {
     const wrapper = mount(DpaMediaItem, {
       props: {
         isFulfilled: true,

package/dist/src/components/UiBadge/UiBadge.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 UiBadge from "./UiBadge.vue";
 
 describe("UiBadge", () => {
-  it("renders red color by default", () => {
+  test("renders red color by default", () => {
     const wrapper = mount(UiBadge);
     expect(wrapper.classes("bg-accent-red")).toBe(true);
   });
 
-  it("renders badge for top-entry case", () => {
+  test("renders badge for top-entry case", () => {
     const wrapper = mount(UiBadge, {
       props: {
         appearance: "accent-green",

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

@@ -41,7 +41,7 @@ export const PlanningItem: Story = {
     template: `<UiBadge v-bind='args'>3</UiBadge>`,
   }),
   args: {
-    appearance: "neutral-emphasis",
+    appearance: "neutral-medium",
     iconName: "video",
   },
 };

package/dist/src/components/UiBadge/UiBadge.vue

@@ -16,31 +16,26 @@ import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 const { appearance = "accent-red", iconName = undefined } = defineProps<{
   appearance?:
     | "accent-red"
-    | "accent-red-dark"
     | "accent-orange"
     | "accent-purple"
     | "accent-green"
     | "primary"
     | "neutral-primary"
-    | "neutral-emphasis"
     | "neutral-medium"
     | "neutral-faint";
   iconName?: UiIconName;
 }>();
 
 const colorClass = computed(() => {
-  const colorClasses: Record<string, string> = {
+  return {
     "accent-red": "bg-accent-red text-neutral",
-    "accent-red-dark": "bg-accent-red-dark text-neutral",
     "accent-orange": "bg-accent-orange text-neutral",
     "accent-purple": "bg-accent-purple text-neutral",
     "accent-green": "bg-accent-green text-neutral",
     primary: "bg-primary text-neutral",
     "neutral-primary": "bg-neutral-primary text-neutral",
-    "neutral-emphasis": "bg-neutral-emphasis text-neutral",
     "neutral-medium": "bg-neutral-medium text-neutral",
-    "neutral-faint": "bg-neutral-faint text-neutral-emphasis",
-  };
-  return colorClasses[appearance];
+    "neutral-faint": "bg-neutral-faint text-neutral-subtle",
+  }[appearance];
 });
 </script>

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

@@ -10,7 +10,9 @@ const router = createRouter({
     {
       path: "/",
       component: {
-        template: "<RouterView />",
+        template: /*html*/ `
+          <RouterView />
+        `,
       },
     },
   ],

package/dist/src/components/UiButtonGroup/UiButtonGroup.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 UiButtonGroup from "./UiButtonGroup.vue";
 
 describe("UiButtonGroup", () => {
-  it("renders UiButtonGroup with default slot content", () => {
+  test("renders UiButtonGroup with default slot content", () => {
     const wrapper = mount(UiButtonGroup, {
       slots: {
         default: "Default Slot",

package/dist/src/components/UiCard/UiCard.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 UiCard from "./UiCard.vue";
 
 describe("UiCard", () => {
-  it("renders Card with default slot content", () => {
+  test("renders Card with default slot content", () => {
     const wrapper = mount(UiCard, {
       slots: {
         default: "Default Slot",

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

@@ -1,7 +1,7 @@
 import { randomInt } from "node:crypto";
 
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiCheckBoxGroup, { type CheckboxItem } from "./UiCheckBoxGroup.vue";
 
@@ -25,7 +25,7 @@ const entries = [
 ] as CheckboxItem[];
 
 describe("UiCheckBoxGroup", () => {
-  it("renders menu with prop values", async () => {
+  test("renders menu with prop values", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,
@@ -41,7 +41,7 @@ describe("UiCheckBoxGroup", () => {
     });
   });
 
-  it("emits checked-all when first item is clicked", async () => {
+  test("emits checked-all when first item is clicked", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,
@@ -55,7 +55,7 @@ describe("UiCheckBoxGroup", () => {
     expect(wrapper.emitted()).toHaveProperty("checked-all");
   });
 
-  it("emits item-checked when one item is clicked", async () => {
+  test("emits item-checked when one item is clicked", async () => {
     const wrapper = mount(UiCheckBoxGroup, {
       props: {
         item: entries,

package/dist/src/components/UiCheckbox/README.md

@@ -3,19 +3,19 @@
 ## Usage
 
 ```vue
-<template>
-  <UiCheckbox required name="terms" appearance="secondary">
-    Accept terms and conditions
-  </UiCheckbox>
-</template>
-
-<script setup lang="ts">
-import { UiCheckbox } from "@dpa-id-components/dpa-shared-components";
-</script>
+<UiCheckbox required name="terms" appearance="secondary">
+  Accept terms and conditions
+</UiCheckbox>
 ```
 
 ## API
 
+### Models
+
+| Name      | Type               | Default     | Description          |
+|-----------|--------------------|-------------|----------------------|
+| _default_ | `string[] \| string \| boolean` | `undefined` | Sets the input value |
+
 ### Props
 
 **Note**: This component binds all non-prop attributes (apart from `class`) on its principal element (`input[type="checkbox"]`) instead of the root element. This allows you to add arbitrary HTML attributes (and event listeners) on the principal element without them being explicitly supported by the component.

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

@@ -14,6 +14,7 @@ type PropsAndCustomArgs = ComponentPropsAndSlots<typeof UiCheckbox> & {
 
 const meta = {
   title: "forms/UiCheckbox",
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   component: UiCheckbox,
   argTypes: {
     // Attributes
@@ -39,12 +40,13 @@ export default meta;
 type Story = StoryObj<PropsAndCustomArgs>;
 
 export const Default: Story = {
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiCheckbox v-bind="args">
         {{ args.default }}
         <template v-if="args.errors" #errors>
@@ -59,12 +61,13 @@ export const Errors: Story = {
   args: {
     errors: "This field is required.",
   },
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
       return { args };
     },
-    template: `
+    template: /*html*/ `
       <UiCheckbox v-bind="args">
         {{ args.default }}
         <template #errors>
@@ -76,6 +79,7 @@ export const Errors: Story = {
 };
 
 export const Group: Story = {
+  // @ts-expect-error generic components seem to cause type issues here that aren't easy to solve
   render: (args) => ({
     components: { UiCheckbox },
     setup() {
@@ -83,7 +87,7 @@ export const Group: Story = {
 
       return { args, languages };
     },
-    template: `
+    template: /*html*/ `
       <div class="space-y-2">
         <UiCheckbox v-model="languages" v-bind="args" value="en">English</UiCheckbox>
         <UiCheckbox v-model="languages" v-bind="args" value="de">German</UiCheckbox>

package/dist/src/components/UiCheckbox/UiCheckbox.vue

@@ -41,7 +41,11 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script
+  setup
+  lang="ts"
+  generic="ModelValue extends string[] | string | boolean"
+>
 import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
@@ -75,7 +79,7 @@ const {
   size?: "sm" | "md";
 }>();
 
-const model = defineModel<boolean | string | string[]>();
+const model = defineModel<ModelValue>();
 
 const defaultId = useId();
 const uniqueId = computed(() => id ?? `id-${defaultId}`);

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

@@ -1,14 +1,14 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiChip from "./UiChip.vue";
 
 describe("UiChip", () => {
-  it("renders sm size by default", () => {
+  test("renders sm size by default", () => {
     const wrapper = mount(UiChip);
     expect(wrapper.classes("text-sm/5.5")).toBe(true);
   });
-  it("renders md size", () => {
+  test("renders md size", () => {
     const wrapper = mount(UiChip, {
       props: {
         size: "md",

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

@@ -1,10 +1,10 @@
 import { shallowMount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import UiCollapseNavigation from "./UiCollapseNavigation.vue";
 
 describe("UiCollapseNavigation", () => {
-  it("should toggle the menu when the button is clicked", async () => {
+  test("should toggle the menu when the button is clicked", async () => {
     const wrapper = shallowMount(UiCollapseNavigation);
     const button = wrapper.findComponent({ name: "UiButton" });
 

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

@@ -1,11 +1,11 @@
 import { mount } from "@vue/test-utils";
-import { describe, expect, it } from "vitest";
+import { describe, expect, test } from "vitest";
 
 import { COLORS } from "./lib/colors.ts";
 import UiColorPicker from "./UiColorPicker.vue";
 
 describe("UiColorPicker", () => {
-  it("should have a default color selected", () => {
+  test("should have a default color selected", () => {
     const wrapper = mount(UiColorPicker);
     const defaultColor = wrapper.find(
       `[data-testid='color-btn-${COLORS[0].substring(1)}']`,
@@ -13,7 +13,7 @@ describe("UiColorPicker", () => {
     expect(defaultColor.find("#cp-checkmark")).toBeTruthy();
   });
 
-  it("should have a custom color set from v-model", () => {
+  test("should have a custom color set from v-model", () => {
     const wrapper = mount(UiColorPicker, {
       props: {
         modelValue: "#00c58e",
@@ -23,7 +23,7 @@ describe("UiColorPicker", () => {
     expect(colorInputContainer.find("#cp-checkmark")).toBeTruthy();
   });
 
-  it("should switch selected color from available options", async () => {
+  test("should switch selected color from available options", async () => {
     const wrapper = mount(UiColorPicker);
     const thirdOption = wrapper.findAll("button").at(2);
     await thirdOption?.trigger("click");
@@ -31,7 +31,7 @@ describe("UiColorPicker", () => {
     expect(wrapper.emitted()["update:modelValue"][0]).toEqual([COLORS[2]]);
   });
 
-  it("should switch selected color from native color input", () => {
+  test("should switch selected color from native color input", () => {
     const wrapper = mount(UiColorPicker);
     const colorInputContainer = wrapper.find(".UiColorPicker-input");
     colorInputContainer.setValue("#00c58e");