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

package/src/components/UiButton/UiButton.vue

@@ -1,140 +1,84 @@
 <template>
   <component
-    :is="component"
+    :is="typeof to === 'string' ? 'a' : to ? 'RouterLink' : 'button'"
     :class="
       cn(
-        'UiButton inline-flex items-center rounded-full leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:outline-blue disabled:cursor-not-allowed',
-        size === 'xs' ? 'px-2' : 'px-4',
-        variantClassName,
-        sizeClassName,
-        $attrs.class as string,
+        'UiButton inline-flex items-center justify-center gap-2 rounded-full border align-middle leading-normal font-medium whitespace-nowrap not-disabled:cursor-pointer focus:outline-hidden focus-visible:focus-outline disabled:cursor-not-allowed',
+        appearanceClasses,
+        BUTTON_SIZE_CLASSES[size],
+        $attrs.class,
       )
     "
-    v-bind="attributes"
-    @click="emit('click')"
+    v-bind="{ ...attributes, class: undefined }"
   >
-    <UiIcon v-if="iconName" :name="iconName" :size="iconSize" class="mr-2" />
-    <slot></slot>
+    <template v-for="(vNode, index) in $slots.default?.()" :key="index">
+      <span v-if="vNode.type === Text"><component :is="vNode" /></span>
+      <template v-else><component :is="vNode" /></template>
+    </template>
   </component>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, Text } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
+import type { Size } from "../../types/index.ts";
 import { cn } from "../../utils/cn.ts";
-import UiIcon, { type UiIconName } from "../UiIcon/UiIcon.vue";
 
-const emit = defineEmits<{
-  click: [];
-}>();
+const BUTTON_SIZE_CLASSES = {
+  xs: "h-6 text-xs [&:has(>svg:only-child)]:w-6 [&:not(:has(>svg:only-child))]:px-2 [&>svg]:size-3 [&:has(>svg:only-child)>svg]:size-4",
+  sm: "h-8 text-sm [&:has(>svg:only-child)]:w-8 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-4 [&:has(>svg:only-child)>svg]:size-6",
+  md: "h-10 text-base [&:has(>svg:only-child)]:w-10 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-5 [&:has(>svg:only-child)>svg]:size-6",
+  lg: "h-12 text-base [&:has(>svg:only-child)]:w-12 [&:not(:has(>svg:only-child))]:px-4 [&>svg]:size-5 [&:has(>svg:only-child)>svg]:size-6",
+} satisfies Partial<Record<Size, string>>;
 
-const props = withDefaults(
-  defineProps<{
-    to?: RouteLocationRaw;
-    iconName?: UiIconName | null;
-    size?: "xs" | "small" | "medium" | "large";
-    color?:
-      | "blue"
-      | "transparent"
-      | "white"
-      | "gray"
-      | "light-gray"
-      | "primary-green";
-    disabledVariant?: "primary" | "secondary";
-    disabled?: boolean;
-  }>(),
-  {
-    to: undefined,
-    iconName: null,
-    size: "medium",
-    color: "blue",
-    disabledVariant: "primary",
-    disabled: false,
-  },
-);
+defineSlots<{
+  /**
+   * 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.
+   */
+  default: () => any;
+}>();
 
-const component = computed(() =>
-  typeof props.to === "string" ? "a" : props.to ? "RouterLink" : "button",
-);
+const {
+  to = undefined,
+  size = "md",
+  appearance = "primary",
+  disabled = false,
+} = defineProps<{
+  to?: RouteLocationRaw;
+  size?: keyof typeof BUTTON_SIZE_CLASSES;
+  appearance?: "primary" | "secondary" | "secondary-alt" | "tertiary" | "ghost";
+  disabled?: boolean;
+}>();
 
 const attributes = computed(() => {
   const attrs: Record<string, unknown> = {};
 
-  if (typeof props.to === "string") {
-    attrs.href = props.to;
-  } else if (props.to) {
-    attrs.to = props.to;
+  if (typeof to === "string") {
+    attrs.href = to;
+  } else if (to) {
+    attrs.to = to;
   } else {
-    attrs.disabled = props.disabled;
+    attrs.disabled = disabled;
     attrs.type = "button";
   }
 
   return attrs;
 });
 
-const variantClassName = computed((): string => {
-  const btnColor = props.disabled ? "disabled" : props.color;
-  switch (btnColor) {
-    case "blue": {
-      return `text-white bg-blue-default hover:bg-blue-dark`;
-    }
-    case "primary-green": {
-      return `text-white bg-green-primary hover:bg-night-green`;
-    }
-    case "transparent": {
-      return `text-blue-default bg-transparent border border-gray-300 hover:text-blue-dark hover:border-gray-700`;
-    }
-    case "white": {
-      return `text-blue-default bg-white border border-gray-300 hover:text-blue-dark hover:border-gray-700`;
-    }
-    case "gray": {
-      return `text-white bg-gray-700 hover:bg-gray-800`;
-    }
-    case "light-gray": {
-      return `text-gray-800 bg-gray-100`;
-    }
-    case "disabled": {
-      if (props.disabledVariant === "primary") {
-        return `text-gray-400 bg-gray-100`;
-      } else {
-        return `text-gray-400 bg-white border border-gray-400`;
-      }
-    }
-    default: {
-      return `text-white bg-blue-default hover:bg-blue-dark`;
-    }
-  }
-});
-
-const sizeClassName = computed((): string => {
-  const btnSize = props.size;
-  switch (btnSize) {
-    case "xs": {
-      return "h-6 text-xs";
-    }
-    case "small": {
-      return "h-8 text-sm";
-    }
-    case "medium": {
-      return "h-10 text-base";
-    }
-    case "large": {
-      return "h-12 text-base";
-    }
-    default: {
-      return "h-10 text-base";
-    }
-  }
-});
-
-const iconSize = computed((): "xs" | "small" | "medium" | "large" => {
-  if (props.size === "xs") {
-    return "xs";
-  }
-  if (props.size === "small") {
-    return "small";
-  }
-  return "medium";
-});
+const appearanceClasses = computed(
+  () =>
+    ({
+      primary:
+        "border-transparent bg-primary text-neutral not-disabled:hover:bg-primary-hover disabled:bg-neutral-faint disabled:text-neutral-soft",
+      secondary:
+        "border-neutral-faint bg-transparent text-primary-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-primary-hover disabled:text-neutral-faint",
+      "secondary-alt":
+        "border-neutral-faint bg-neutral text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
+      tertiary:
+        "border-transparent bg-neutral-subtle text-neutral not-disabled:hover:bg-neutral-emphasis disabled:bg-neutral-faint disabled:text-neutral-soft",
+      ghost:
+        "border-transparent bg-transparent text-neutral-emphasis not-disabled:hover:border-neutral-subtle not-disabled:hover:text-neutral-primary disabled:text-neutral-faint",
+    })[appearance],
+);
 </script>

package/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -1,7 +1,29 @@
 <template>
   <div
-    class="flex *:rounded-none *:border *:border-r-0 *:border-gray-300 [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
+    class="flex *:rounded-none *:border *:border-r-0 *:border-neutral-faint [&>*:first-child]:rounded-l-full [&>*:last-child]:rounded-r-full [&>*:last-child]:border-r"
   >
     <slot />
   </div>
 </template>
+
+<script lang="ts">
+import { onMounted } from "vue";
+
+/**
+ * @deprecated
+ * Please replace with your own component
+ */
+export default {
+  name: "UiMenuList",
+  setup() {
+    onMounted(() => {
+      if (window.location.origin.includes("local")) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          "Component is deprecated. It will be removed in a future update.",
+        );
+      }
+    });
+  },
+};
+</script>

package/src/components/UiCard/UiCard.vue

@@ -1,6 +1,6 @@
 <template>
   <li
-    class="mb-4 rounded-2xl bg-gray-100 px-8 py-4 text-sm font-medium sm:w-full md:mr-7 md:w-[45.5%] lg:mr-8 lg:w-[46.5%]"
+    class="mb-4 rounded-2xl bg-neutral-whisper px-8 py-4 text-sm font-medium sm:w-full md:mr-7 md:w-[45.5%] lg:mr-8 lg:w-[46.5%]"
   >
     <slot></slot>
   </li>
@@ -17,9 +17,9 @@ export default {
   setup() {
     onMounted(() => {
       if (window.location.origin.includes("local")) {
-        // eslint-disable-next-line
+        // eslint-disable-next-line no-console
         console.warn(
-          "UiCard is deprecated. It will be removed in a future update.",
+          "Component is deprecated. It will be removed in a future update.",
         );
       }
     });

package/src/components/UiCheckBoxGroup/UiCheckBoxGroup.vue

@@ -6,7 +6,6 @@
       :is-checked="entry.isChecked"
       class="flex h-8 items-center border-none py-2 text-sm shadow-none lg:py-3"
       check-box-menu
-      :label="entry.name"
       :disabled="disabled"
       :icon-name="entry.iconName"
       @list-item-click="toggle(index)"
@@ -98,9 +97,9 @@ const toggle = (index: number) => {
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiCheckBoxGroup is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });

package/src/components/UiCheckbox/README.md

@@ -4,7 +4,7 @@
 
 ```vue
 <template>
-  <UiCheckbox required name="terms" color="blue">
+  <UiCheckbox required name="terms" appearance="secondary">
     Accept terms and conditions
   </UiCheckbox>
 </template>
@@ -12,7 +12,6 @@
 <script setup lang="ts">
 import { UiCheckbox } from "@dpa-id-components/dpa-shared-components";
 </script>
-
 ```
 
 ## API
@@ -23,23 +22,12 @@ import { UiCheckbox } from "@dpa-id-components/dpa-shared-components";
 
 | Name           | Type      | Default    | Description                                 |
 |----------------|-----------|------------|---------------------------------------------|
-| `color`        | `"blue"` or `"gray"`  | `"blue"`   | Sets the `color` attribute of the checkbox  |
-| `disabled`     | `boolean` | `false`    | Whether the checkbox is disabled            |
-| `checked`      | `boolean` | `false`    | The `checked` attribute of the checkbox     |
-| `size`         | `"small"` or `"medium"`  | `"medium"` | Sets the `size` attribute of the checkbox   |
-| `textSize`     | `"extra-small"` or `"small"` or `"medium"`  | `"medium"` | Sets the `text-size` attribute of the checkbox   |
-| `showError`    | `boolean` | `false`    | Whether the error message should be shown   |
-| `errorMessage` | `string`  | `""`       | The error message that can be shown         |
+| `appearance` | `"primary"`, `"secondary"` | `"primary"` |  |
+| `size` | `"sm"`, `"md"` | `"md"` |  |
 
 ### Slots
 
 | Name      | Description                                 |
 |-----------|---------------------------------------------|
-| `default` | slot for the rendering the checkbox's label |
+| `default` | Checkbox label |
 | `errors`  | For validation error content that's associated with the form control via `aria-errormessage` |
-
-### Events
-
-| Name     | Type      | Description                                              |
-|----------|-----------|----------------------------------------------------------|
-| `change` | `boolean` |  |

package/src/components/UiCheckbox/UiCheckbox.vue

@@ -1,76 +1,52 @@
 <template>
-  <UiLabel
-    :class="
-      cn(
-        disabled ? 'text-gray-400' : undefined,
-        'flex cursor-pointer flex-col items-start',
-        $attrs.class as string,
-      )
-    "
-    :for="id"
-    :data-testid="$attrs['data-testid']"
-  >
-    <input
-      :id="id"
-      class="peer relative size-0 appearance-none focus:outline-hidden"
-      :class="size"
-      type="checkbox"
-      :checked="checked"
-      :aria-checked="checked"
-      :disabled="disabled"
-      :aria-invalid="Boolean($slots.errors || showError)"
-      :aria-errormessage="
-        $slots.errors || showError ? `${id}-errors` : undefined
-      "
-      v-bind="{ ...$attrs, class: null, 'data-testid': null }"
-      @change="handleChange"
-    />
-    <span
-      class="flex items-center peer-checked:opacity-100 before:box-border before:inline-block before:shrink-0 before:rounded-sm before:border-2 before:transition-colors after:absolute after:block after:leading-none peer-checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCcgZmlsbD0nbm9uZSc+PHJlY3QgLz48cGF0aCBmaWxsLXJ1bGU9J2V2ZW5vZGQnIGNsaXAtcnVsZT0nZXZlbm9kZCcgZD0nTTguMjE5NjUgMTVDNy45ODk2NSAxNSA3Ljc2OTY1IDE0LjkwNSA3LjYxMjE1IDE0LjczNzVMMy41NTk2NSAxMC40MjE3QzMuMjQzODEgMTAuMDg2NyAzLjI2MTMxIDkuNTU5MTggMy41OTYzMSA5LjI0NDE4QzMuOTMyMTUgOC45MjkxOCA0LjQ1OTY1IDguOTQ1ODUgNC43NzM4MSA5LjI4MDg1TDguMjExMzEgMTIuOTRMMTUuMjE4IDUuMjcxNjhDMTUuNTI5NiA0LjkzMDg1IDE2LjA1NjMgNC45MDgzNSAxNi4zOTYzIDUuMjE4MzVDMTYuNzM1NSA1LjUyODM1IDE2Ljc1ODggNi4wNTU4NSAxNi40NDg4IDYuMzk1MDFMOC44MzQ2NSAxNC43MjgzQzguNjc4ODEgMTQuOSA4LjQ1NzE1IDE0Ljk5ODMgOC4yMjU0OCAxNUg4LjIxOTY1WicgZmlsbD0nd2hpdGUnLz48L3N2Zz4=)]"
+  <div :class="cn('max-w-max space-y-1', $attrs.class)">
+    <UiLabel
+      class="inline-flex items-center align-middle [&:has(>input:enabled)]:cursor-pointer"
       :class="{
-        'before:size-5 after:size-5': size === 'medium',
-        'before:size-4 after:size-4': size === 'small',
-        'text-xs': textSize === 'extra-small',
-        'text-sm': textSize === 'small',
-        'text-base': textSize === 'medium',
-        'before:border-blue-default peer-checked:before:bg-blue-default peer-hover:before:border-blue-dark peer-checked:peer-hover:before:bg-blue-dark':
-          color === 'blue',
-        'before:border-gray-800 peer-checked:before:bg-gray-800 peer-hover:before:border-gray-900 peer-checked:peer-hover:before:bg-gray-900':
-          color === 'gray',
-        'text-gray-400 before:border-gray-500 peer-checked:before:bg-gray-500':
-          disabled,
-        'before:mr-2': $slots.default,
+        'gap-1 text-sm': size === 'sm',
+        'gap-2 text-base': size === 'md',
+        'text-neutral-soft': $attrs.disabled,
       }"
+      :for="uniqueId"
+      :data-testid="$attrs['data-testid']"
     >
+      <input
+        :id="uniqueId"
+        v-model="model"
+        class="aspect-square appearance-none rounded-sm border-2 bg-neutral transition-colors after:block after:size-full after:leading-0 checked:after:content-[url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYuMjkgMTIuOGEuOC44IDAgMCAxLS41ODMtLjI1MmwtMy44OS00LjE0M2EuOC44IDAgMSAxIDEuMTY2LTEuMDk2bDMuMyAzLjUxMyA2LjcyNi03LjM2MWEuOC44IDAgMCAxIDEuMTgyIDEuMDc4bC03LjMxIDhhLjguOCAwIDAgMS0uNTg1LjI2eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==)] enabled:cursor-pointer disabled:border-neutral-muted disabled:text-neutral-soft disabled:checked:bg-neutral-muted"
+        :class="{
+          'size-4': size === 'sm',
+          'size-5': size === 'md',
+          'border-primary checked:bg-primary enabled:hover:border-primary-hover checked:enabled:hover:bg-primary-hover':
+            appearance === 'primary',
+          'border-neutral-emphasis checked:bg-neutral-emphasis enabled:hover:border-neutral-primary checked:enabled:hover:bg-neutral-primary':
+            appearance === 'secondary',
+        }"
+        type="checkbox"
+        :aria-invalid="$slots.errors ? 'true' : 'false'"
+        :aria-errormessage="$slots.errors ? `${uniqueId}-errors` : undefined"
+        v-bind="{ ...$attrs, class: null, 'data-testid': null }"
+      />
+
       <slot />
-    </span>
+    </UiLabel>
 
     <div
-      v-if="$slots.errors || showError"
-      :id="`${id}-errors`"
-      data-testid="errorMessage"
-      class="mt-2 bg-alert-red-default px-4 py-1 text-xs/normal font-medium text-white transition-all duration-150 ease-in-out peer-aria-invalid:peer-hover:bg-alert-red-dark peer-aria-invalid:peer-focus:bg-alert-red-dark"
+      v-if="$slots.errors"
+      :id="`${uniqueId}-errors`"
+      class="bg-error px-4 py-1 text-xs/normal font-medium text-neutral transition-all duration-150 ease-in-out"
     >
-      <slot v-if="$slots.errors" name="errors" />
-
-      <template v-else>
-        {{ errorMessage }}
-      </template>
+      <slot name="errors" />
     </div>
-  </UiLabel>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { v4 as uuidv4 } from "uuid";
-import { computed } from "vue";
+import { computed, useId } from "vue";
 
 import { cn } from "../../utils/cn.ts";
 import UiLabel from "../UiLabel/UiLabel.vue";
 
-const emit = defineEmits<{
-  change: [boolean];
-}>();
-
 defineOptions({
   inheritAttrs: false,
 });
@@ -86,33 +62,21 @@ defineSlots<{
   errors?: () => any;
 }>();
 
-const props = withDefaults(
-  defineProps<{
-    id?: string;
-    color?: "blue" | "gray";
-    size?: "small" | "medium";
-    textSize?: "extra-small" | "small" | "medium";
-    disabled?: boolean;
-    checked?: boolean;
-    showError?: boolean;
-    errorMessage?: string;
-  }>(),
-  {
-    id: undefined,
-    color: "blue",
-    size: "medium",
-    textSize: "medium",
-    disabled: false,
-    checked: false,
-    showError: false,
-    errorMessage: "",
-  },
-);
+const {
+  id = undefined,
+  appearance = "primary",
+  size = "md",
+} = defineProps<{
+  /**
+   * ID of the `input` element. Used for the `label`'s `for` attribute.
+   */
+  id?: string;
+  appearance?: "primary" | "secondary";
+  size?: "sm" | "md";
+}>();
 
-const id = computed(() => props.id || `id-${uuidv4()}`);
+const model = defineModel<boolean | string | string[]>();
 
-const handleChange = (e: Event) => {
-  const input = e.target as HTMLInputElement;
-  emit("change", input.checked);
-};
+const defaultId = useId();
+const uniqueId = computed(() => id ?? `id-${defaultId}`);
 </script>

package/src/components/UiChip/README.md

@@ -17,11 +17,16 @@
 
 ### Props
 
-| Name          | Type                                       | Default | Description                                         |
-|---------------|--------------------------------------------|---------|-----------------------------------------------------|
-| `cursorStyle` | `"default" | "text" | "pointer"` | `text`  | Determines the styling of the cursor while hovering |
-| `isVisible`   | `Boolean`                                  | `true`  | Sets display hidden if false, otherwise inline-flex |
-| `size`        | `"small" | "medium" | "big"`     | `big`   | Determines the height and font-size                 |
+| Name          | Type                   | Default | Description                                                  |
+|---------------|------------------------|---------|--------------------------------------------------------------|
+| `size`        | `"xs" \| "sm" \| "md"` | `sm`    | Determines the font-size and line-height of the chip content |
+| `closeButton` | `boolean`              | `false` | renders optional close button                                |
+
+### Events
+
+| Name    | Payload | Description                          |
+|---------|---------|--------------------------------------|
+| `close` | `[]`    | Emitted when close button is clicked |
 
 ### Slots
 

package/src/components/UiChip/UiChip.vue

@@ -1,45 +1,43 @@
 <template>
   <div
-    class="min-w-max items-center rounded-full bg-gray-300 align-middle leading-normal whitespace-nowrap text-gray-900"
-    :class="[isVisible ? 'inline-flex' : 'hidden', sizeClass, cursorStyle]"
+    class="flex max-w-min flex-nowrap items-center gap-x-1 rounded-full bg-neutral-faint px-2 font-normal whitespace-nowrap text-neutral-primary"
+    :class="CHIP_SIZES[size]"
   >
-    <slot></slot>
+    <slot />
+    <button
+      v-if="closeButton"
+      class="flex items-center justify-center rounded-full hover:bg-neutral-soft"
+      @click.stop="$emit('close')"
+    >
+      <UiIcon
+        class="text-current"
+        name="close"
+        :size="size == 'xs' ? 'xs' : 'sm'"
+      />
+    </button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import type { Size } from "../../types";
+import UiIcon from "../UiIcon/UiIcon.vue";
 
-const props = withDefaults(
-  defineProps<{
-    cursorStyle?: "default" | "text" | "pointer";
-    isVisible?: boolean;
-    size?: "small" | "medium" | "big";
-  }>(),
-  {
-    cursorStyle: "text",
-    isVisible: true,
-    size: "big",
-  },
-);
+defineSlots<{
+  default: () => any;
+}>();
 
-const cursorStyle = computed(() => {
-  const cursorStyles: Record<string, string> = {
-    default: "cursor-default",
-    text: "cursor-text",
-    pointer: "cursor-pointer",
-  };
+defineEmits<{
+  close: [];
+}>();
 
-  return cursorStyles[props.cursorStyle];
-});
+const CHIP_SIZES: Record<Extract<Size, "xs" | "sm" | "md">, string> = {
+  xs: "text-xs",
+  sm: "text-sm/5.5",
+  md: "text-sm/8",
+};
 
-const sizeClass = computed(() => {
-  const sizeClasses: Record<string, string> = {
-    small: "h-5 px-1 text-xs",
-    medium: "h-6 px-2 text-sm",
-    big: "h-8 px-2 text-sm",
-  };
-
-  return sizeClasses[props.size];
-});
+const { size = "sm", closeButton = undefined } = defineProps<{
+  closeButton?: boolean;
+  size?: Extract<Size, "xs" | "sm" | "md">;
+}>();
 </script>

package/src/components/UiCollapseNavigation/README.md

@@ -8,9 +8,9 @@ Component will be removed in a future update
 <!-- SomeComponent.vue using UiCollapseNavigation -->
 <template>
   <UiCollapseNavigation headline="Menu eins">
-    <UiFilterBadgeButton label="test eins" />
-    <UiFilterBadgeButton label="test zwei" />
-    <UiFilterBadgeButton label="test drei" />
+    <UiButton> test eins </UiButton>
+    <UiButton> test zwei </UiButton>
+    <UiButton> test drei </UiButton>
   </UiCollapseNavigation>
 </template>
 

package/src/components/UiCollapseNavigation/UiCollapseNavigation.vue

@@ -1,16 +1,18 @@
 <template>
-  <div :class="hasBorderTop ? 'border-t border-t-gray-300' : ''" />
+  <div :class="hasBorderTop ? 'border-t border-t-neutral-faint' : ''" />
   <UiButton
-    color="transparent"
+    appearance="secondary"
     class="flex w-full justify-between border-none"
     @click="toggleMenuHandler"
   >
-    <h3 class="text-xs font-semibold tracking-widest text-gray-700 uppercase">
+    <h3
+      class="text-xs font-semibold tracking-widest text-neutral-subtle uppercase"
+    >
       {{ headline }}
     </h3>
     <UiIcon
       name="chevron-down"
-      class="rounded-full text-gray-700 transition-transform duration-500 hover:bg-gray-300"
+      class="rounded-full text-neutral-subtle transition-transform duration-500 hover:bg-neutral-faint"
       :class="{ 'rotate-180': openMenu }"
     />
   </UiButton>
@@ -67,9 +69,9 @@ const toggleMenuHandler = () => {
 
 onMounted(() => {
   if (window.location.origin.includes("local")) {
-    // eslint-disable-next-line
+    // eslint-disable-next-line no-console
     console.warn(
-      "UiCollapseNavigation is deprecated. It will be removed in a future update.",
+      "Component is deprecated. It will be removed in a future update.",
     );
   }
 });