@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export type Size = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";

package/dist/utils/cn.d.ts

@@ -1,2 +1,10 @@
 import { ClassValue } from 'clsx';
+/**
+ * Constructs a CSS class name string allowing for a variety of conditional expressions similar to Vue template's `:class` bindings and taking overlapping Tailwind utilities (e.g. “items-center” and “items-start”) into account.
+ *
+ * @param inputs
+ * @returns a string of CSS class names
+ * @example cn("items-center", "items-start")
+ * @example cn("flex", { "flex-col": isVertical })
+ */
 export declare function cn(...inputs: ClassValue[]): string;

package/dist/{video overlay-DfhF7VpE.js → video-overlay-D6e61Eo7.js}

@@ -1,6 +1,6 @@
 import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
 import { createElementBlock as t, createElementVNode as n, openBlock as r } from "vue";
-//#region src/assets/icons/video overlay.vue
+//#region src/assets/icons/video-overlay.vue
 var i = {}, a = {
 	width: "24",
 	height: "24",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dpa-id-components/dpa-shared-components",
-  "version": "21.1.1",
+  "version": "22.0.0-next.1",
   "description": "Shared Vue components library for dpa projects",
   "files": [
     "src",
@@ -96,7 +96,6 @@
     "eslint-plugin-vue": "^10.8.0",
     "globals": "^17.4.0",
     "tailwind-merge": "^3.5.0",
-    "uuid": "^14.0.0",
     "vue-eslint-parser": "^10.4.0"
   },
   "peerDependencies": {

package/src/assets/icons/{bookmark-fill.vue → bookmark-filled.vue}

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M15.7954 17.7096L17.5 19.4024L17.5 17L17.5 5C17.5 3.89543 16.6046 3 15.5 3L8.5 3C7.39543 3 6.5 3.89543 6.5 5L6.5 17L6.5 19.4024L8.20464 17.7096L12 13.9406L15.7954 17.7096Z"
+      d="M16.3065 18.7205L18 20.3505L18 18L18 5C18 3.89543 17.1046 3 16 3L8 3C6.89543 3 6 3.89543 6 5L6 18L6 20.3505L7.69347 18.7205L12 14.5754L16.3065 18.7205Z"
       fill="currentColor"
       stroke="currentColor"
       stroke-width="2"

package/src/assets/icons/bookmark.vue

@@ -1,15 +1,12 @@
 <template>
   <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M16.3065 18.7205L18 20.3505L18 18L18 5C18 3.89543 17.1046 3 16 3L8 3C6.89543 3 6 3.89543 6 5L6 18L6 20.3505L7.69347 18.7205L12 14.5754L16.3065 18.7205Z"
-      fill="currentColor"
-      stroke="currentColor"
-      stroke-width="2"
+      d="M12.6663 15.134L7.99967 10.6423L3.33301 15.134V3.33337C3.33301 2.22881 4.22844 1.33337 5.33301 1.33337H10.6663C11.7709 1.33337 12.6663 2.2288 12.6663 3.33337V15.134ZM7.99967 8.79171L11.333 12V3.33337C11.333 2.96518 11.0345 2.66671 10.6663 2.66671H5.33301C4.96482 2.66671 4.66634 2.96518 4.66634 3.33337V12L7.99967 8.79171Z"
     />
   </svg>
 </template>

package/src/assets/icons/flag-filled.vue

@@ -1,12 +1,12 @@
 <template>
   <svg
-    width="16"
-    height="18"
-    viewBox="0 0 16 18"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M15.2676 1.67969C14.8056 1.34569 14.2076 1.25069 13.6686 1.42669C13.0926 1.61469 12.3426 1.71369 11.4996 1.71369C10.3756 1.71369 9.39957 1.33069 8.36557 0.925695C7.20357 0.470695 6.00057 -0.000305176 4.49957 -0.000305176C1.61357 -0.000305176 0.495573 0.951695 0.299573 1.14369C0.108573 1.33069 -0.000427246 1.58869 -0.000427246 1.85769V8.99969V12.1427V16.9997C-0.000427246 17.5527 0.447573 17.9997 0.999573 17.9997C1.55257 17.9997 1.99957 17.5527 1.99957 16.9997V12.7017C2.39457 12.5267 3.17257 12.2857 4.49957 12.2857C5.62357 12.2857 6.60057 12.6687 7.63457 13.0747C8.79657 13.5297 9.99857 13.9997 11.4996 13.9997C13.3086 13.9997 14.4226 13.6217 15.0406 13.3047C15.6326 12.9977 15.9996 12.4027 15.9996 11.7487V3.10569C15.9996 2.54569 15.7266 2.01269 15.2676 1.67969Z"
+      d="M19.2676 4.67969C18.8056 4.34569 18.2076 4.25069 17.6686 4.42669C17.0926 4.61469 16.3426 4.71369 15.4996 4.71369C14.3756 4.71369 13.3996 4.33069 12.3656 3.92569C11.2036 3.47069 10.0006 2.99969 8.49957 2.99969C5.61357 2.99969 4.49557 3.95169 4.29957 4.14369C4.10857 4.33069 3.99957 4.58869 3.99957 4.85769V11.9997V15.1427V19.9997C3.99957 20.5527 4.44757 20.9997 4.99957 20.9997C5.55257 20.9997 5.99957 20.5527 5.99957 19.9997V15.7017C6.39457 15.5267 7.17257 15.2857 8.49957 15.2857C9.62357 15.2857 10.6006 15.6687 11.6346 16.0747C12.7966 16.5297 13.9986 16.9997 15.4996 16.9997C17.3086 16.9997 18.4226 16.6217 19.0406 16.3047C19.6326 15.9977 19.9996 15.4027 19.9996 14.7487V6.10569C19.9996 5.54569 19.7266 5.01269 19.2676 4.67969Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/folder-filled.vue

@@ -1,12 +1,12 @@
 <template>
   <svg
-    width="20"
-    height="18"
-    viewBox="0 0 20 18"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M17.5 17.5H2.5C1.122 17.5 0 16.409 0 15.068V2.931C0 1.59 1.122 0.5 2.5 0.5H7.101C7.4 0.5 7.685 0.634 7.875 0.867L10.474 4.046H17.5C18.878 4.046 20 5.136 20 6.478V15.068C20 16.409 18.878 17.5 17.5 17.5Z"
+      d="M19.5 20.5H4.5C3.122 20.5 2 19.409 2 18.068V5.931C2 4.59 3.122 3.5 4.5 3.5H9.101C9.4 3.5 9.685 3.634 9.875 3.867L12.474 7.046H19.5C20.878 7.046 22 8.136 22 9.478V18.068C22 19.409 20.878 20.5 19.5 20.5Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/info-filled.vue

@@ -1,12 +1,12 @@
 <template>
   <svg
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M10 7C9.448 7 9 6.552 9 6C9 5.448 9.448 5 10 5C10.552 5 11 5.448 11 6C11 6.552 10.552 7 10 7ZM11 14C11 14.552 10.552 15 10 15C9.448 15 9 14.552 9 14V9C9 8.448 9.448 8 10 8C10.552 8 11 8.448 11 9V14ZM10 0C4.477 0 0 4.477 0 10C0 15.523 4.477 20 10 20C15.522 20 20 15.523 20 10C20 4.477 15.522 0 10 0Z"
+      d="M12 9C11.448 9 11 8.552 11 8C11 7.448 11.448 7 12 7C12.552 7 13 7.448 13 8C13 8.552 12.552 9 12 9ZM13 16C13 16.552 12.552 17 12 17C11.448 17 11 16.552 11 16V11C11 10.448 11.448 10 12 10C12.552 10 13 10.448 13 11V16ZM12 2C6.477 2 2 6.477 2 12C2 17.523 6.477 22 12 22C17.522 22 22 17.523 22 12C22 6.477 17.522 2 12 2Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/map-filled.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0254 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM10.0555 12.4101C10.6311 12.7947 11.3078 13 12 13C12.9283 13 13.8185 12.6313 14.4749 11.9749C15.1313 11.3185 15.5 10.4283 15.5 9.5C15.5 8.80777 15.2947 8.13108 14.9101 7.5555C14.5256 6.97993 13.9789 6.53133 13.3394 6.26642C12.6999 6.00151 11.9961 5.9322 11.3172 6.06725C10.6382 6.2023 10.0146 6.53564 9.52513 7.02513C9.03564 7.51461 8.7023 8.13825 8.56725 8.81718C8.4322 9.49612 8.50151 10.1999 8.76642 10.8394C9.03133 11.4789 9.47993 12.0256 10.0555 12.4101ZM13.5 9.5C13.5 10.3284 12.8284 11 12 11C11.1716 11 10.5 10.3284 10.5 9.5C10.5 8.67157 11.1716 8 12 8C12.8284 8 13.5 8.67157 13.5 9.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/assets/icons/map.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0254 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM10.0555 12.4101C10.6311 12.7947 11.3078 13 12 13C12.9283 13 13.8185 12.6313 14.4749 11.9749C15.1313 11.3185 15.5 10.4283 15.5 9.5C15.5 8.80777 15.2947 8.13108 14.9101 7.5555C14.5256 6.97993 13.9789 6.53133 13.3394 6.26642C12.6999 6.00151 11.9961 5.9322 11.3172 6.06725C10.6382 6.2023 10.0146 6.53564 9.52513 7.02513C9.03564 7.51461 8.7023 8.13825 8.56725 8.81718C8.4322 9.49612 8.50151 10.1999 8.76642 10.8394C9.03133 11.4789 9.47993 12.0256 10.0555 12.4101ZM13.5 9.5C13.5 10.3284 12.8284 11 12 11C11.1716 11 10.5 10.3284 10.5 9.5C10.5 8.67157 11.1716 8 12 8C12.8284 8 13.5 8.67157 13.5 9.5Z"
+      d="M6.37124 4.31479C7.86926 2.83176 9.89206 1.99989 12 2C14.1079 1.99989 16.1307 2.83176 17.6288 4.31479C19.1268 5.79782 19.9789 7.81216 20 9.92C20 15.4 13 21.5 12.65 21.76C12.4689 21.9149 12.2384 22.0001 12 22.0001C11.7616 22.0001 11.5311 21.9149 11.35 21.76L11.3484 21.7586C11.0254 21.4787 4 15.3904 4 9.92C4.02108 7.81216 4.87323 5.79782 6.37124 4.31479ZM6 9.92C6 13.65 10.33 18.06 12 19.65C13.67 18.06 18 13.62 18 9.92C18 8.3287 17.3679 6.80258 16.2426 5.67736C15.1174 4.55214 13.5913 3.92 12 3.92C10.4087 3.92 8.88258 4.55214 7.75736 5.67736C6.63214 6.80258 6 8.3287 6 9.92ZM10.0555 6.58986C10.6311 6.20527 11.3078 6 12 6C12.9283 6 13.8185 6.36875 14.4749 7.02513C15.1313 7.6815 15.5 8.57174 15.5 9.5C15.5 10.1922 15.2947 10.8689 14.9101 11.4445C14.5256 12.0201 13.9789 12.4687 13.3394 12.7336C12.6999 12.9985 11.9961 13.0678 11.3172 12.9327C10.6383 12.7977 10.0146 12.4644 9.52513 11.9749C9.03564 11.4854 8.7023 10.8617 8.56725 10.1828C8.4322 9.50388 8.50152 8.80015 8.76642 8.16061C9.03133 7.52107 9.47993 6.97444 10.0555 6.58986ZM11.1666 10.7472C11.4133 10.912 11.7033 11 12 11C12.3978 11 12.7794 10.842 13.0607 10.5607C13.342 10.2794 13.5 9.89782 13.5 9.5C13.5 9.20333 13.412 8.91332 13.2472 8.66665C13.0824 8.41997 12.8481 8.22771 12.574 8.11418C12.2999 8.00065 11.9983 7.97094 11.7074 8.02882C11.4164 8.0867 11.1491 8.22956 10.9393 8.43934C10.7296 8.64912 10.5867 8.91639 10.5288 9.20736C10.4709 9.49834 10.5007 9.79994 10.6142 10.074C10.7277 10.3481 10.92 10.5824 11.1666 10.7472Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/play.vue

@@ -6,7 +6,7 @@
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M8 5.83722V18.0999L17.197 11.7828L8 5.83722ZM6 4.9186C6 3.73013 7.31627 3.01369 8.31435 3.65891L18.9129 10.5105C19.8119 11.0917 19.8302 12.4005 18.9478 13.0066L8.34926 20.2864C7.35396 20.97 6 20.2574 6 19.05V4.9186Z"
+      d="M10.3846 18.0028C10.0776 18.0028 9.76759 17.9368 9.47859 17.8008C8.83059 17.4948 8.42859 16.8878 8.42859 16.2148V7.78878C8.42859 7.11578 8.83059 6.50878 9.47859 6.20278C10.2106 5.85778 11.0786 5.95878 11.6876 6.46178L16.7866 10.6758C17.1956 11.0118 17.4286 11.4958 17.4286 12.0018C17.4286 12.5078 17.1956 12.9918 16.7866 13.3278L11.6876 17.5408C11.3196 17.8458 10.8556 18.0028 10.3846 18.0028Z"
       fill="currentColor"
     />
   </svg>

package/src/assets/icons/spinner.vue

@@ -1,7 +1,31 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <path
-      d="M21.0001 11C20.7348 11 20.4805 11.1054 20.293 11.2929C20.1054 11.4804 20.0001 11.7348 20.0001 12C20.0001 14.1217 19.1572 16.1566 17.6569 17.6569C16.1566 19.1572 14.1218 20 12.0001 20C10.4201 19.9993 8.87582 19.5308 7.56182 18.6535C6.24782 17.7763 5.22298 16.5297 4.61654 15.0708C4.0101 13.6119 3.8492 12.0061 4.15415 10.4559C4.45909 8.90569 5.21622 7.48049 6.33006 6.36C7.07076 5.60938 7.95374 5.01404 8.92732 4.60881C9.90089 4.20359 10.9455 3.99661 12.0001 4C12.6395 4.004 13.2766 4.07777 13.9001 4.22C14.0305 4.26036 14.1679 4.27356 14.3036 4.2588C14.4394 4.24404 14.5707 4.20163 14.6895 4.13418C14.8082 4.06673 14.9119 3.97567 14.9941 3.86662C15.0763 3.75757 15.1353 3.63284 15.1674 3.50011C15.1996 3.36739 15.2042 3.22948 15.181 3.0949C15.1579 2.96032 15.1074 2.83191 15.0326 2.71759C14.9579 2.60327 14.8606 2.50547 14.7466 2.43021C14.6327 2.35495 14.5045 2.30383 14.3701 2.28C13.5932 2.09724 12.7981 2.00331 12.0001 2C10.0244 2.01026 8.09604 2.60552 6.45835 3.71065C4.82066 4.81578 3.54703 6.38126 2.79818 8.20953C2.04932 10.0378 1.85882 12.0469 2.25069 13.9834C2.64257 15.9198 3.59927 17.6968 5.00006 19.09C6.85675 20.9475 9.37371 21.9939 12.0001 22C14.6522 22 17.1958 20.9464 19.0711 19.0711C20.9465 17.1957 22.0001 14.6522 22.0001 12C22.0001 11.7348 21.8947 11.4804 21.7072 11.2929C21.5196 11.1054 21.2653 11 21.0001 11Z"
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <!-- Background circle (gray) -->
+    <circle
+      cx="16"
+      cy="16"
+      r="14.5"
+      stroke="#E3E3E3"
+      stroke-width="3"
+      fill="none"
+    />
+
+    <!-- Spinning arc (blue) - using stroke-dasharray -->
+    <circle
+      cx="16"
+      cy="16"
+      r="14.5"
+      stroke="#0045F4"
+      stroke-width="3"
+      fill="none"
+      stroke-dasharray="23 68"
+      stroke-linecap="square"
     />
   </svg>
 </template>

package/src/components/DpaMediaItem/DpaMediaItem.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mb-px w-full bg-white pt-2 pr-4 pb-3 pl-3 md:pt-3"
+    class="mb-px w-full bg-neutral pt-2 pr-4 pb-3 pl-3 md:pt-3"
     :class="classObject"
     data-testid="rootDiv"
   >
@@ -16,17 +16,17 @@
       <div class="flex items-center justify-between py-1">
         <div class="flex items-center pr-2">
           <UiIcon
-            size="small"
+            size="sm"
             :name="genreIcon"
-            class="mr-2 shrink-0 fill-current text-gray-700"
+            class="mr-2 shrink-0 fill-current text-neutral-subtle"
           />
-          <span class="text-xs font-medium text-gray-900">
+          <span class="text-xs font-medium text-neutral-primary">
             <slot name="description" />
           </span>
         </div>
         <span
           v-if="$slots.planning"
-          class="w-16 shrink-0 text-right text-xs text-gray-700"
+          class="w-16 shrink-0 text-right text-xs text-neutral-subtle"
           ><slot name="planning"
         /></span>
       </div>
@@ -42,7 +42,7 @@
             />
             <span
               v-if="imgCount > 1"
-              class="absolute right-1 bottom-1 inline-block h-4 rounded-full bg-gray-900 px-1 align-middle text-xs/4 font-semibold text-white"
+              class="absolute right-1 bottom-1 inline-block h-4 rounded-full bg-neutral-primary px-1 align-middle text-xs/4 font-semibold text-neutral"
               data-testid="imageCount"
               >{{ imgCount }}</span
             >
@@ -63,7 +63,7 @@
         <!-- Text length -->
         <span
           v-if="$slots.textLength"
-          class="text-xs text-gray-700"
+          class="text-xs text-neutral-subtle"
           :class="!isFulfilled ? 'ml-6' : ''"
           ><slot name="textLength"
         /></span>
@@ -72,7 +72,7 @@
       <!-- Time published -->
       <span
         v-if="$slots.timePublished"
-        class="pt-1 text-xs font-medium text-gray-700"
+        class="pt-1 text-xs font-medium text-neutral-subtle"
         ><slot name="timePublished"
       /></span>
     </div>
@@ -115,11 +115,11 @@ const props = withDefaults(
 
 const genreIcon = computed<UiIconName>(() => {
   const icons: Record<Genre, UiIconName> = {
-    audio: props.isFulfilled ? "audio-filled" : "audio-circled",
-    video: props.isFulfilled ? "video-filled" : "video-circled",
-    text: props.isFulfilled ? "text-filled" : "text-circled",
-    picture: props.isFulfilled ? "picture-filled" : "picture-circled",
-    graphic: props.isFulfilled ? "graphic-filled" : "graphic-circled",
+    audio: props.isFulfilled ? "audio" : "audio",
+    video: props.isFulfilled ? "video" : "video",
+    text: props.isFulfilled ? "text" : "text",
+    picture: props.isFulfilled ? "picture" : "picture",
+    graphic: props.isFulfilled ? "graphic" : "graphic",
   };
 
   return icons[props.genre];
@@ -131,15 +131,15 @@ const classObject = computed(() => {
     return "cursor-auto";
   }
   return props.disabled
-    ? "cursor-not-allowed transition shadow-sm border border-gray-300"
-    : "cursor-pointer transition shadow-sm hover:shadow-md group border border-gray-300 hover:border-gray-500";
+    ? "cursor-not-allowed transition shadow-sm border border-neutral-faint"
+    : "cursor-pointer transition shadow-sm hover:shadow-md group border border-neutral-faint hover:border-neutral-muted";
 });
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "DpaMediaItem is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });

package/src/components/UiBadge/README.md

@@ -5,11 +5,11 @@
 ```html
 <!-- SomeComponent.vue using UiBadge -->
 <template>
-    <UiBadge text="Test text" color="blue"></UiBadge>
+  <UiBadge appearance="accent-green" icon-name="check">Published</UiBadge>
 </template>
 
-<script>
-    import {UiBadge} from "@dpa-id-components/dpa-shared-components";
+<script setup lang="ts">
+import { UiBadge } from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
 
@@ -17,18 +17,13 @@
 
 ### Props
 
-| Name               | Type                                                                                                                                                         | Default | Description                                                                      |
-|--------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------|---------|----------------------------------------------------------------------------------|
-| `text`             | `String`                                                                                                                                                     | `small` | Sets the `text` attribute of the badge, gets overwritten by the slot             |
-| `color`            | `"red" &#124; "red-dark" &#124; "orange" &#124; "purple" &#124; "blue" &#124; "white" &#124; "gray-300" &#124; "gray-800" &#124;"black" &#124; "green-neon"` | `red`   | Sets the `color` attribute of the badge                                          |
-| `iconName`         | `UiIconName`                                                                                                                                                     | `null`  | Sets the `icon` attribute of the badge, which adjusts the styling for icons      |
-| `mobileTrim`       | `Boolean`                                                                                                                                                    | `false` | Sets the `mobileTrim` attribute of the badge, which trims the content for mobile |
-| `trim`             | `Boolean`                                                                                                                                                    | `false` | Sets the `trim` attribute of the badge, which trims the content.                 |
-| `small`            | `Boolean`                                                                                                                                                    | `false` | Sets the `small` attribute of the badge, which reduces the size.                 |
-| `screenReaderText` | `String`                                                                                                                                                     | `null`  | Sets the `screenReaderText` attribute of the badge.                              |
+| Name         | Type                                                                                                                                                                                       | Default        | Description                                                            |
+|--------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------|------------------------------------------------------------------------|
+| `appearance` | `"accent-red" \| "accent-red-dark" \| "accent-orange" \| "accent-purple" \| "accent-green" \| "primary" \| "neutral-primary" \| "neutral-emphasis" \| "neutral-medium" \| "neutral-faint"` | `"accent-red"` | Color variant of the badge                                             |
+| `iconName`   | `UiIconName`                                                                                                                                                                               | `undefined`    | Optional icon displayed to the left of the text                        |
 
 ### Slots
 
 | Name      | Description                                |
 |-----------|--------------------------------------------|
-| `default` | slot for the rendering the badge's content |
+| `default` | Slot for the rendering the badge's content |

package/src/components/UiBadge/UiBadge.vue

@@ -1,33 +1,10 @@
 <template>
   <div
-    class="group relative inline-block rounded-full px-2"
-    :class="[
-      colorClass,
-      { 'pl-2': iconName },
-      small ? 'py-0 text-xs' : 'py-0.5 text-sm',
-    ]"
+    class="inline-flex size-fit flex-none flex-nowrap items-center gap-x-2 rounded-full px-2 align-middle text-xs/4.5 font-semibold whitespace-nowrap"
+    :class="colorClass"
   >
-    <span
-      v-if="mobileTrim || trim"
-      class="absolute bottom-full left-1/2 -translate-x-1/2 rounded-full bg-gray-900 px-2 py-1 text-xs text-white opacity-0 transition-opacity group-hover:opacity-100"
-      :class="{ 'lg:hidden': mobileTrim }"
-    >
-      {{ text }}
-    </span>
-    <div class="flex items-center gap-1">
-      <UiIcon v-if="iconName" :name="iconName" size="medium"></UiIcon>
-      <slot>
-        <span v-if="mobileTrim || trim" :class="{ 'lg:hidden': mobileTrim }">
-          {{ text?.slice(0, 1) }}
-        </span>
-        <span v-if="screenReaderText" class="sr-only">
-          {{ screenReaderText }}
-        </span>
-        <span :class="[{ 'hidden lg:inline': mobileTrim }, { hidden: trim }]">
-          {{ text }}
-        </span>
-      </slot>
-    </div>
+    <UiIcon v-if="iconName" :name="iconName" size="xs" />
+    <slot />
   </div>
 </template>
 
@@ -36,59 +13,34 @@ import { computed } from "vue";
 
 import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
-const props = withDefaults(
-  defineProps<{
-    text?: string;
-    color?:
-      | "red"
-      | "red-dark"
-      | "orange"
-      | "purple"
-      | "blue"
-      | "white"
-      | "gray-300"
-      | "gray-600"
-      | "gray-800"
-      | "black"
-      | "green-neon"
-      | "green-primary"
-      | "neon-green"
-      | "primary-green";
-    iconName?: UiIconName | null;
-    mobileTrim?: boolean;
-    trim?: boolean;
-    small?: boolean;
-    screenReaderText?: string;
-  }>(),
-  {
-    text: undefined,
-    color: "red",
-    iconName: null,
-    mobileTrim: false,
-    trim: false,
-    small: false,
-    screenReaderText: "",
-  },
-);
+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> = {
-    red: "bg-rainbow-red text-white",
-    "red-dark": "bg-rainbow-red-dark text-white",
-    orange: "bg-rainbow-orange text-white",
-    purple: "bg-rainbow-purple text-white",
-    blue: "bg-blue-default text-white",
-    white: "bg-white text-black",
-    "gray-300": "bg-gray-300 text-gray-700",
-    "gray-800": "bg-gray-800 text-white",
-    "gray-600": "bg-gray-600 text-white",
-    black: "bg-black text-white",
-    "green-neon": "bg-green-neon text-white",
-    "green-primary": "bg-green-primary text-white",
-    "neon-green": "bg-green-neon text-white",
-    "primary-green": "bg-green-primary text-white",
+    "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[props.color];
+  return colorClasses[appearance];
 });
 </script>

package/src/components/UiButton/README.md

@@ -8,8 +8,18 @@ This component transparently wraps `RouterLink` and `button` and toggles between
 
 ```vue
 <template>
-  <UiButton :size="medium" :color="blue" disabled @click="doThing">
-    Button
+  <UiButton size="lg" appearance="secondary" @click="save">
+    Save
+  </UiButton>
+
+  <UiButton @click="save">
+    <UiIcon name="save" />
+    Save
+  </UiButton>
+
+  <!-- Icon-only button's **must** have an “aria-label” attribute. -->
+  <UiButton aria-label="Save" @click="save">
+    <UiIcon name="save" />
   </UiButton>
 
   <UiButton :to="{ name: 'home' }">
@@ -21,7 +31,7 @@ This component transparently wraps `RouterLink` and `button` and toggles between
   </UiButton>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { UiButton } from "@dpa-id-components/dpa-shared-components";
 </script>
 ```
@@ -30,23 +40,15 @@ import { UiButton } from "@dpa-id-components/dpa-shared-components";
 
 ### Props
 
-| Name              | Type                                                                           | Default   | Description                                                          |
-|-------------------|--------------------------------------------------------------------------------|-----------|----------------------------------------------------------------------|
-| `to`              | `undefined` | `RouteLocationRaw` | `to` prop of a `RouterLink` |
-| `size`            | `String`                                                                       | `medium`  | Sets the `size` attribute of the Button                              |
-| `color`           | `"blue" &#124; "primary-green" "transparent" &#124; "gray"&#124; "light-gray"` | `blue`    | Sets the `color` attribute of the Button                             |
-| `disabled`        | `Boolean`                                                                      | `false`   | Whether the `button` is disabled                                     |
-| `disabledVariant` | `"primary" &#124; "secondary"`                                                 | `primary` | Sets the `background-color` and `border` style of a disabled button. |
-| `iconName`        | `UiIconName`                                                                       | `null`    | If set, represents the name of the Icon before the Button Label      |
-
-### Events
-
-| Name    | Type | Description                            |
-|---------|------|----------------------------------------|
-| `click` | none | triggered when the `button` or `a` element is clicked |
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `to` | `RouteLocationRaw` | `undefined` | `RouterLink` `to` prop |
+| `size` | `"xs"`, `"sm"`, `"md"`, or `"lg"` | `"md"`  |  |
+| `appearance` | `"primary"`, `"secondary"`, `"secondary-alt"`, `"tertiary"`, or `"ghost"` | `"primary"` |  |
+| `disabled` | `boolean` | `false` | Whether the `button` is disabled |
 
 ### Slots
 
 | Name      | Description                                 |
 |-----------|---------------------------------------------|
-| `default` | slot for the rendering the button's content |
+| `default` | Button content. Note, that text nodes are wrapped in a `span` element to ensure they can be detected using the CSS selectors responsible for applying icon-only-specific styles. |