@imaginario27/air-ui-ds 1.14.2 → 1.15.0

package/CHANGELOG.md

@@ -5,6 +5,17 @@ All notable changes to this package are documented in this file.
 Historical releases were reconstructed from git history (GitHub repository) and npm publish dates.
 Future releases will include detailed entries generated with Changesets.
 
+## 1.14.2 - 2026-06-23
+
+Release type: patch.
+Commits found in range: 1.
+
+### Added
+
+1. add zIndex prop to CompactHeader and NavMenu ([5bed1f1](https://github.com/imaginario27/air-ui/commit/5bed1f16e9315eed16ed042020416c9a1a528762))
+
+- Package: @imaginario27/air-ui-ds.
+
 ## 1.14.1 - 2026-06-22
 
 Release type: patch.

package/components/cards/specific/MetricCard.vue

@@ -1,25 +1,36 @@
 <template>
-    <Card :class="['gap-5!', containerClass]">
-        <CardHeader>
-            <template v-if="icon">
+    <Card :class="['gap-5!', 'relative', containerClass]">
+        <div
+            v-if="backgroundIcon"
+            :class="['absolute', 'right-4', 'flex', 'pointer-events-none', 'opacity-20', backgroundIconPositionClass, backgroundIconContainerClass]"
+            aria-hidden="true"
+        >
+            <Icon
+                :name="backgroundIcon"
+                :iconClass="backgroundIconFinalClass"
+            />
+        </div>
+
+        <CardHeader :class="cardHeaderClass">
+            <template v-if="icon && iconPosition === MetricCardIconPosition.LEFT">
                 <Icon
                     v-if="
-                        styleType === DashboardMetricCardStyle.NEUTRAL_FILLED ||
-                        styleType === DashboardMetricCardStyle.PRIMARY_BRAND_FILLED ||
-                        styleType === DashboardMetricCardStyle.SECONDARY_BRAND_FILLED ||
-                        styleType === DashboardMetricCardStyle.CUSTOM_FILLED
+                        styleType === MetricCardStyle.NEUTRAL_FILLED ||
+                        styleType === MetricCardStyle.PRIMARY_BRAND_FILLED ||
+                        styleType === MetricCardStyle.SECONDARY_BRAND_FILLED ||
+                        styleType === MetricCardStyle.CUSTOM_FILLED
                     "
                     :name="icon"
                     :class="textColorClass"
+                    :size="iconSize"
                 />
                 <ContainedIcon
                     v-else
                     :icon
-                    :iconSize="IconSize.SM"
+                    :size="iconContainerSize"
                     :color="iconColor"
                     :styleType="containedIconStyleType"
                     :shape="containedIconShape"
-                    class="w-6! h-6! min-w-6! min-h-6!"
                 />
             </template>
 
@@ -27,32 +38,54 @@
                 :title
                 :class="textColorClass"
             />
+
+            <template v-if="icon && iconPosition === MetricCardIconPosition.RIGHT">
+                <Icon
+                    v-if="
+                        styleType === MetricCardStyle.NEUTRAL_FILLED ||
+                        styleType === MetricCardStyle.PRIMARY_BRAND_FILLED ||
+                        styleType === MetricCardStyle.SECONDARY_BRAND_FILLED ||
+                        styleType === MetricCardStyle.CUSTOM_FILLED
+                    "
+                    :name="icon"
+                    :class="textColorClass"
+                    :size="iconSize"
+                />
+                <ContainedIcon
+                    v-else
+                    :icon
+                    :size="iconContainerSize"
+                    :color="iconColor"
+                    :styleType="containedIconStyleType"
+                    :shape="containedIconShape"
+                />
+            </template>
         </CardHeader>
-        <CardBody class="flex flex-col! gap-2!">
+        <CardBody :class="['flex', 'gap-2!', cardBodyClass]">
             <div :class="['flex', 'items-end', 'gap-1', textColorClass]">
-                <span class="text-3xl font-semibold">
+                <span :class="['text-3xl', 'font-semibold', amountClass]">
                     {{ amount }}
                 </span>
 
                 <span
                     v-if="unit"
-                    class="text-lg font-semibold"
+                    :class="['text-lg', 'font-semibold', unitClass]"
                 >
                     /{{ unit }}
                 </span>
             </div>
 
-            <div class="flex flex-col gap-0.5">
+            <div :class="['flex', 'flex-col', 'gap-0.5', descriptionWrapperClass]">
                 <p
                     v-if="featuredDescription"
-                    :class="['text-sm', 'font-semibold', textColorClass]"
+                    :class="['text-sm', 'font-semibold', textColorClass, featuredDescriptionClass]"
                 >
                     {{ featuredDescription }}
                 </p>
 
                 <p
                     v-if="description"
-                    :class="['text-sm', styleType === DashboardMetricCardStyle.DEFAULT ? 'text-text-neutral-subtle' : textColorClass]"
+                    :class="['text-sm', styleType === MetricCardStyle.DEFAULT ? 'text-text-neutral-subtle' : textColorClass, descriptionClass]"
                 >
                     {{ description }}
                 </p>
@@ -60,14 +93,14 @@
 
             <div
                 v-if="trend"
-                :class="['flex', 'items-center', 'gap-1', trendTextColorClass]"
+                :class="['flex', 'items-center', 'gap-1', trendTextColorClass, trendWrapperClass]"
             >
                 <Icon
                     :name="trendIcon"
-                    :size="IconSize.SM"
+                    :size="trendIconSize"
                 />
 
-                <span class="text-sm mt-0.5">
+                <span :class="['text-sm', 'mt-0.5', trendTextClass]">
                     {{ trend }}
                 </span>
             </div>
@@ -79,20 +112,43 @@
 // Props
 const props = defineProps({
     styleType: {
-        type: String as PropType<DashboardMetricCardStyle>,
-        default: DashboardMetricCardStyle.DEFAULT,
-        validator: (value: DashboardMetricCardStyle) => Object.values(DashboardMetricCardStyle).includes(value),
+        type: String as PropType<MetricCardStyle>,
+        default: MetricCardStyle.DEFAULT,
+        validator: (value: MetricCardStyle) => Object.values(MetricCardStyle).includes(value),
     },
     title: {
         type: String as PropType<string>,
         default: "Metric title",
     },
     icon: String as PropType<string>,
+    backgroundIcon: String as PropType<string>,
+    backgroundIconPosition: {
+        type: String as PropType<MetricCardBackgroundIconPosition>,
+        default: MetricCardBackgroundIconPosition.MIDDLE,
+        validator: (value: MetricCardBackgroundIconPosition) => Object.values(MetricCardBackgroundIconPosition).includes(value),
+    },
+    backgroundIconContainerClass: String as PropType<string>,
+    backgroundIconClass: String as PropType<string>,
     iconContainerShape: {
         type: String as PropType<IconContainerShape>,
         default: IconContainerShape.SQUARE,
         validator: (value: IconContainerShape) => Object.values(IconContainerShape).includes(value),
     },
+    iconContainerSize: {
+        type: String as PropType<IconContainerSize>,
+        default: IconContainerSize.SM,
+        validator: (value: IconContainerSize) => Object.values(IconContainerSize).includes(value),
+    },
+    iconSize: {
+        type: String as PropType<IconSize>,
+        default: IconSize.MD,
+        validator: (value: IconSize) => Object.values(IconSize).includes(value),
+    },
+    iconPosition: {
+        type: String as PropType<MetricCardIconPosition>,
+        default: MetricCardIconPosition.LEFT,
+        validator: (value: MetricCardIconPosition) => Object.values(MetricCardIconPosition).includes(value),
+    },
     defaultStyleIconColor: {
         type: String as PropType<ColorAccent>,
         default: ColorAccent.NEUTRAL,
@@ -112,44 +168,59 @@ const props = defineProps({
     description: String as PropType<string>,
     trend: String as PropType<string>,
     trendDirection: {
-        type: String as PropType<DashboardMetricTrendDirection>,
-        default: DashboardMetricTrendDirection.UP,
-        validator: (value: DashboardMetricTrendDirection) => Object.values(DashboardMetricTrendDirection).includes(value),
+        type: String as PropType<MetricTrendDirection>,
+        default: MetricTrendDirection.UP,
+        validator: (value: MetricTrendDirection) => Object.values(MetricTrendDirection).includes(value),
+    },
+    trendIconSize: {
+        type: String as PropType<IconSize>,
+        default: IconSize.SM,
+        validator: (value: IconSize) => Object.values(IconSize).includes(value),
     },
     customFilledColorClass: {
         type: String as PropType<string>,
         default: "bg-background-neutral-bold",
     },
+    cardHeaderClass: String as PropType<string>,
+    cardBodyClass: String as PropType<string>,
+    cardTitleClass: String as PropType<string>,
+    amountClass: String as PropType<string>,
+    unitClass: String as PropType<string>,
+    descriptionWrapperClass: String as PropType<string>,
+    featuredDescriptionClass: String as PropType<string>,
+    descriptionClass: String as PropType<string>,
+    trendWrapperClass: String as PropType<string>,
+    trendTextClass: String as PropType<string>,
 });
 
 // Computed
 const trendIcon = computed(() => {
-    const variant: Record<DashboardMetricTrendDirection, string> = {
-        [DashboardMetricTrendDirection.UP]: "mdi:arrow-up",
-        [DashboardMetricTrendDirection.DOWN]: "mdi:arrow-down",
-        [DashboardMetricTrendDirection.NEUTRAL]: "mdi:minus",
+    const variant: Record<MetricTrendDirection, string> = {
+        [MetricTrendDirection.UP]: "mdi:arrow-up",
+        [MetricTrendDirection.DOWN]: "mdi:arrow-down",
+        [MetricTrendDirection.NEUTRAL]: "mdi:minus",
     };
 
-    return variant[props.trendDirection as DashboardMetricTrendDirection] || "mdi:arrow-up";
+    return variant[props.trendDirection as MetricTrendDirection] || "mdi:arrow-up";
 });
 
 const containerClass = computed(() => {
-    const variant: Record<DashboardMetricCardStyle, string> = {
-        [DashboardMetricCardStyle.DEFAULT]: "bg-background-container-surface",
-        [DashboardMetricCardStyle.PRIMARY_BRAND_FILLED]: "bg-background-primary-brand-default border-border-primary-brand-default dark",
-        [DashboardMetricCardStyle.PRIMARY_BRAND_SOFT]: "bg-background-primary-brand-soft",
-        [DashboardMetricCardStyle.SECONDARY_BRAND_FILLED]: "bg-background-secondary-brand-default border-border-secondary-brand dark",
-        [DashboardMetricCardStyle.SECONDARY_BRAND_SOFT]: "bg-background-secondary-brand-soft",
-        [DashboardMetricCardStyle.NEUTRAL_FILLED]: "bg-background-neutral-bold dark",
-        [DashboardMetricCardStyle.NEUTRAL_SOFT]: "bg-background-neutral-subtler",
-        [DashboardMetricCardStyle.CUSTOM_FILLED]: props.customFilledColorClass,
+    const variant: Record<MetricCardStyle, string> = {
+        [MetricCardStyle.DEFAULT]: "bg-background-container-surface",
+        [MetricCardStyle.PRIMARY_BRAND_FILLED]: "bg-background-primary-brand-default border-border-primary-brand-default dark",
+        [MetricCardStyle.PRIMARY_BRAND_SOFT]: "bg-background-primary-brand-soft",
+        [MetricCardStyle.SECONDARY_BRAND_FILLED]: "bg-background-secondary-brand-default border-border-secondary-brand dark",
+        [MetricCardStyle.SECONDARY_BRAND_SOFT]: "bg-background-secondary-brand-soft",
+        [MetricCardStyle.NEUTRAL_FILLED]: "bg-background-neutral-bold dark",
+        [MetricCardStyle.NEUTRAL_SOFT]: "bg-background-neutral-subtler",
+        [MetricCardStyle.CUSTOM_FILLED]: props.customFilledColorClass,
     };
 
-    return variant[props.styleType as DashboardMetricCardStyle] || "bg-background-container-surface";
+    return variant[props.styleType as MetricCardStyle] || "bg-background-container-surface";
 });
 
 const containedIconStyleType = computed(() => {
-    if (props.styleType === DashboardMetricCardStyle.DEFAULT) {
+    if (props.styleType === MetricCardStyle.DEFAULT) {
         return props.defaultStyleIconContainerType;
     }
 
@@ -157,7 +228,7 @@ const containedIconStyleType = computed(() => {
 });
 
 const containedIconShape = computed(() => {
-    if (props.styleType === DashboardMetricCardStyle.DEFAULT) {
+    if (props.styleType === MetricCardStyle.DEFAULT) {
         return props.iconContainerShape;
     }
 
@@ -165,46 +236,46 @@ const containedIconShape = computed(() => {
 });
 
 const iconColor = computed(() => {
-    if (props.defaultStyleIconColor && props.styleType === DashboardMetricCardStyle.DEFAULT) {
+    if (props.defaultStyleIconColor && props.styleType === MetricCardStyle.DEFAULT) {
         return props.defaultStyleIconColor;
     }
 
-    const variant: Record<DashboardMetricCardStyle, ColorAccent> = {
-        [DashboardMetricCardStyle.DEFAULT]: ColorAccent.NEUTRAL,
-        [DashboardMetricCardStyle.PRIMARY_BRAND_FILLED]: ColorAccent.PRIMARY_BRAND,
-        [DashboardMetricCardStyle.PRIMARY_BRAND_SOFT]: ColorAccent.PRIMARY_BRAND,
-        [DashboardMetricCardStyle.SECONDARY_BRAND_FILLED]: ColorAccent.SECONDARY_BRAND,
-        [DashboardMetricCardStyle.SECONDARY_BRAND_SOFT]: ColorAccent.SECONDARY_BRAND,
-        [DashboardMetricCardStyle.NEUTRAL_FILLED]: ColorAccent.NEUTRAL,
-        [DashboardMetricCardStyle.NEUTRAL_SOFT]: ColorAccent.NEUTRAL,
-        [DashboardMetricCardStyle.CUSTOM_FILLED]: ColorAccent.NEUTRAL,
+    const variant: Record<MetricCardStyle, ColorAccent> = {
+        [MetricCardStyle.DEFAULT]: ColorAccent.NEUTRAL,
+        [MetricCardStyle.PRIMARY_BRAND_FILLED]: ColorAccent.PRIMARY_BRAND,
+        [MetricCardStyle.PRIMARY_BRAND_SOFT]: ColorAccent.PRIMARY_BRAND,
+        [MetricCardStyle.SECONDARY_BRAND_FILLED]: ColorAccent.SECONDARY_BRAND,
+        [MetricCardStyle.SECONDARY_BRAND_SOFT]: ColorAccent.SECONDARY_BRAND,
+        [MetricCardStyle.NEUTRAL_FILLED]: ColorAccent.NEUTRAL,
+        [MetricCardStyle.NEUTRAL_SOFT]: ColorAccent.NEUTRAL,
+        [MetricCardStyle.CUSTOM_FILLED]: ColorAccent.NEUTRAL,
     };
 
-    return variant[props.styleType as DashboardMetricCardStyle] || ColorAccent.NEUTRAL;
+    return variant[props.styleType as MetricCardStyle] || ColorAccent.NEUTRAL;
 });
 
 const textColorClass = computed(() => {
-    const variant: Record<DashboardMetricCardStyle, string> = {
-        [DashboardMetricCardStyle.DEFAULT]: "text-text-neutral-default",
-        [DashboardMetricCardStyle.PRIMARY_BRAND_FILLED]: "text-text-neutral-on-filled",
-        [DashboardMetricCardStyle.PRIMARY_BRAND_SOFT]: "text-text-primary-brand-on-soft-bg",
-        [DashboardMetricCardStyle.SECONDARY_BRAND_FILLED]: "text-text-neutral-on-filled",
-        [DashboardMetricCardStyle.SECONDARY_BRAND_SOFT]: "text-text-secondary-brand-on-soft-bg",
-        [DashboardMetricCardStyle.NEUTRAL_FILLED]: "text-text-neutral-on-filled",
-        [DashboardMetricCardStyle.NEUTRAL_SOFT]: "text-text-neutral-on-neutral-bg",
-        [DashboardMetricCardStyle.CUSTOM_FILLED]: "text-text-neutral-on-filled",
+    const variant: Record<MetricCardStyle, string> = {
+        [MetricCardStyle.DEFAULT]: "text-text-neutral-default",
+        [MetricCardStyle.PRIMARY_BRAND_FILLED]: "text-text-neutral-on-filled",
+        [MetricCardStyle.PRIMARY_BRAND_SOFT]: "text-text-primary-brand-on-soft-bg",
+        [MetricCardStyle.SECONDARY_BRAND_FILLED]: "text-text-neutral-on-filled",
+        [MetricCardStyle.SECONDARY_BRAND_SOFT]: "text-text-secondary-brand-on-soft-bg",
+        [MetricCardStyle.NEUTRAL_FILLED]: "text-text-neutral-on-filled",
+        [MetricCardStyle.NEUTRAL_SOFT]: "text-text-neutral-on-neutral-bg",
+        [MetricCardStyle.CUSTOM_FILLED]: "text-text-neutral-on-filled",
     };
 
-    return variant[props.styleType as DashboardMetricCardStyle] || "text-text-neutral-default";
+    return variant[props.styleType as MetricCardStyle] || "text-text-neutral-default";
 });
 
 const isFilledStyle = computed(() => {
     return [
-        DashboardMetricCardStyle.PRIMARY_BRAND_FILLED,
-        DashboardMetricCardStyle.SECONDARY_BRAND_FILLED,
-        DashboardMetricCardStyle.NEUTRAL_FILLED,
-        DashboardMetricCardStyle.CUSTOM_FILLED,
-    ].includes(props.styleType as DashboardMetricCardStyle);
+        MetricCardStyle.PRIMARY_BRAND_FILLED,
+        MetricCardStyle.SECONDARY_BRAND_FILLED,
+        MetricCardStyle.NEUTRAL_FILLED,
+        MetricCardStyle.CUSTOM_FILLED,
+    ].includes(props.styleType as MetricCardStyle);
 });
 
 const trendUpClass = computed(() => {
@@ -219,13 +290,35 @@ const trendNeutralClass = computed(() => {
     return isFilledStyle.value ? "text-text-neutral-on-filled" : "text-text-neutral-subtle";
 });
 
+const backgroundIconPositionClass = computed(() => {
+    const variant: Record<MetricCardBackgroundIconPosition, string> = {
+        [MetricCardBackgroundIconPosition.TOP]: 'top-4 items-start',
+        [MetricCardBackgroundIconPosition.MIDDLE]: 'inset-y-0 items-center',
+        [MetricCardBackgroundIconPosition.BOTTOM]: 'bottom-4 items-end',
+    };
+
+    return variant[props.backgroundIconPosition as MetricCardBackgroundIconPosition] || 'inset-y-0 items-center';
+});
+
+const backgroundIconColorClass = computed(() => {
+    return props.styleType === MetricCardStyle.DEFAULT
+        ? 'text-text-neutral-subtle'
+        : textColorClass.value;
+});
+
+const backgroundIconFinalClass = computed(() => {
+    const classes: string[] = ['w-[80px]!', 'h-[80px]!', backgroundIconColorClass.value];
+    if (props.backgroundIconClass) classes.push(props.backgroundIconClass);
+    return classes;
+});
+
 const trendTextColorClass = computed(() => {
-    const variant: Record<DashboardMetricTrendDirection, string> = {
-        [DashboardMetricTrendDirection.UP]: trendUpClass.value,
-        [DashboardMetricTrendDirection.DOWN]: trendDownClass.value,
-        [DashboardMetricTrendDirection.NEUTRAL]: trendNeutralClass.value,
+    const variant: Record<MetricTrendDirection, string> = {
+        [MetricTrendDirection.UP]: trendUpClass.value,
+        [MetricTrendDirection.DOWN]: trendDownClass.value,
+        [MetricTrendDirection.NEUTRAL]: trendNeutralClass.value,
     };
 
-    return variant[props.trendDirection as DashboardMetricTrendDirection] || trendUpClass.value;
+    return variant[props.trendDirection as MetricTrendDirection] || trendUpClass.value;
 });
 </script>

package/components/icons/ContainedIcon.vue

@@ -116,6 +116,8 @@ const iconColorClass = computed(() => {
 
 const iconContainerSizeClass = computed(() => {
     const sizeVariants = {
+        [IconContainerSize.SM]: 'w-[24px] h-[24px]',
+        [IconContainerSize.MD]: 'w-[32px] h-[32px]',
         [IconContainerSize.LG]: 'w-[40px] h-[40px]',
         [IconContainerSize.XL]: 'w-[48px] h-[48px]',
         [IconContainerSize.XXL]: 'w-[56px] h-[56px]',
@@ -127,6 +129,8 @@ const iconContainerSizeClass = computed(() => {
 
 const iconSizeClass = computed(() => {
     const sizeVariants = {
+        [IconContainerSize.SM]: 'w-[16px] h-[16px] min-w-[16px] min-h-[16px]',
+        [IconContainerSize.MD]: 'w-[20px] h-[20px] min-w-[20px] min-h-[20px]',
         [IconContainerSize.LG]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
         [IconContainerSize.XL]: 'w-[24px] h-[24px] min-w-[24px] min-h-[24px]',
         [IconContainerSize.XXL]: 'w-[40px] h-[40px] min-w-[40px] min-h-[40px]',

package/components/layouts/section/SectionTitle.vue

@@ -1,7 +1,7 @@
 <template>
-    <h2 class="text-xl font-semibold">
+    <component :is="headingTag" class="text-xl font-semibold">
         {{ title }}
-    </h2>
+    </component>
 </template>
 <script setup lang="ts">
 defineProps({
@@ -9,5 +9,10 @@ defineProps({
         type: String as PropType<string>,
         default: 'Title',
     },
+    headingTag: {
+        type: String as PropType<HeadingTag>,
+        default: 'h2',
+        validator: (value: string ) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(value as string)
+    },
 })
 </script>

package/components/notifications/NotificationListItem.vue

@@ -0,0 +1,162 @@
+<template>
+    <div 
+        :class="[
+            'w-full', 
+            'flex', 
+            'gap-2', 
+            'py-2 px-3', 
+            'cursor-pointer',
+            !modelValue && 'bg-background-neutral-subtlest'
+        ]" 
+
+        @click="onItemClick"
+    >
+        <!-- Icon -->
+        <ContainedIcon
+            v-if="icon && isIconContained"
+            :icon="icon"
+            :size="containedIconSize"
+            :color="iconColor"
+            :shape="containedIconShape"
+            :styleType="containedStyleType"
+        />
+        <Icon
+            v-else-if="icon && !isIconContained"
+            :name="icon"
+            :size="iconSize"
+            :color="iconColor"
+        />
+
+        <!-- Content -->
+        <slot name="content" />
+
+        <component
+            :is="to ? NuxtLink : 'div'"
+            v-if="!$slots.content"
+            :to="to || undefined"
+            class="w-full flex flex-col gap-3"
+        >
+            <div class="w-full flex flex-col gap-1">
+                <span class="text-xs font-semibold text-text-neutral-subtle">
+                    {{ title }}
+                </span>
+
+                <slot name="description" />
+
+                <p v-if="!$slots.description" class="text-sm text-text-default">
+                    {{ description }}
+                </p>
+            </div>
+
+            <div class="w-full flex gap-5">
+                <div class="flex gap-1">
+                    <Icon
+                        :name="timeAgoIcon"
+                        :size="IconSize.XS"
+                    />
+                    <span class="text-xs text-text-neutral-subtle">
+                        {{ timeAgo }}
+                    </span>
+                </div>
+                <div class="flex gap-1">
+                    <Icon
+                        :name="authorIcon"
+                        :size="IconSize.XS"
+                    />
+                    <span class="text-xs text-text-neutral-subtle">
+                        {{ author }}
+                    </span>
+                </div>
+            </div>
+        </component>
+
+        <ActionIconButton
+            :icon="removeItemIcon"
+            :size="ButtonSize.XS"
+            :styleType="ButtonStyleType.NEUTRAL_TRANSPARENT"
+            :ariaLabel="removeAriaLabel"
+            @click.stop="$emit('remove')"
+        />
+    </div>
+</template>
+<script setup lang="ts">
+import { NuxtLink } from '#components'
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    icon: String as PropType<string>,
+    iconColor: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.NEUTRAL,
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    iconSize: {
+        type: String as PropType<IconSize>,
+        default: IconSize.MD,
+        validator: (value: IconSize) => Object.values(IconSize).includes(value),
+    },
+    isIconContained: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    containedStyleType: {
+        type: String as PropType<IconContainerStyleType>,
+        default: IconContainerStyleType.FLAT,
+        validator: (value: IconContainerStyleType) => Object.values(IconContainerStyleType).includes(value),
+    },
+    containedIconShape: {
+        type: String as PropType<IconContainerShape>,
+        default: IconContainerShape.CIRCLE,
+        validator: (value: IconContainerShape) => Object.values(IconContainerShape).includes(value),
+    },
+    containedIconSize: {
+        type: String as PropType<IconContainerSize>,
+        default: IconContainerSize.XL,
+        validator: (value: IconContainerSize) => Object.values(IconContainerSize).includes(value),
+    },
+    to: String as PropType<string>,
+    title: {
+        type: String as PropType<string>,
+        default: 'Title',
+    },
+    description: {
+        type: String as PropType<string>,
+        default: 'Description',
+    },
+    timeAgo: {
+        type: String as PropType<string>,
+        default: 'Time ago',
+    },
+    timeAgoIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:clock-time-four-outline',
+    },
+    author: {
+        type: String as PropType<string>,
+        default: 'Author',
+    },
+    authorIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:account-outline',
+    },
+    removeItemIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:close',
+    },
+    removeAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Remove notification',
+    },
+})
+
+const emit = defineEmits(['update:modelValue', 'remove'])
+
+function onItemClick() {
+    if (!props.modelValue) {
+        emit('update:modelValue', true)
+    }
+}
+</script>

package/components/notifications/NotificationsPopover.vue

@@ -0,0 +1,360 @@
+<template>
+    <Popover
+        :position
+        :align
+        :trigger
+        :popoverClass="['px-0 py-3', popoverClass]"
+    >
+        <template #content>
+            <div
+                v-if="isLoading && !hasError" 
+                class="w-full flex justify-center py-3"
+            >
+                <Loading 
+                    :text="loadingText"
+                    spinnerClass="w-[16px]! h-[16px]! border-2!"
+                    class="flex-row gap-2! text-sm!"
+                />
+            </div>
+
+            <div
+                v-else-if="!isLoading && hasError"
+                class="w-full flex justify-center py-3"
+            >
+                <span class="text-sm text-text-error">
+                    {{ errorText }}
+                </span>
+            </div>
+
+            <div 
+                v-else
+                class="w-full flex flex-col gap-2"
+            >
+                <!-- Header -->
+                <div class="w-full flex flex-col gap-2.5 px-3">
+                    <div class="w-full flex gap-4 items-center justify-between">
+                        <div class="flex gap-2 items-center min-h-[24px]">
+                            <span class="text-sm font-semibold">
+                                {{ title }}
+                            </span>
+
+                            <Badge
+                                v-if="unreadCount"
+                                :text="unreadCount.toString()"
+                                :color="badgeColor"
+                                :styleType="badgeStyleType"
+                                :shape="badgeShape"
+                            />
+                        </div>
+                    
+                        <NavLink
+                            v-if="internalList.length"
+                            :text="viewAllText"
+                            :to="viewAllLink"
+                            textClass="text-text-default text-sm! hover:text-text-primary-brand-hover font-normal"
+                        />
+                    </div>
+
+                    <!-- Filters -->
+                    <ToggleButtonsGroupField
+                        v-if="internalList.length"
+                        id="notifications-filters" 
+                        v-model="selectedFilterValue" 
+                        :buttons="toggleFilterButtons" 
+                        :groupStyle="filterGroupStyle"
+                    />
+                </div>
+
+                <!-- Notifications List -->
+                <div :class="['w-full flex flex-col overflow-y-auto', listMaxHeightClass]">
+                    <slot name="list" />
+
+                    <template v-if="!$slots.list && filteredList.length">
+                        <NotificationListItem
+                            v-for="notification in filteredList"
+                            :key="notification.id"
+                            :modelValue="notification.read"
+                            :icon="notification.icon"
+                            :iconColor="notification.iconColor"
+                            :iconSize="listIconSize"
+                            :isIconContained="isListIconContained"
+                            :containedIconShape="listContainedIconShape"
+                            :containedIconSize="listContainedIconSize"
+                            :containedStyleType="listContainedStyleType"
+                            :to="notification.link"
+                            :title="notification.title"
+                            :description="notification.description"
+                            :timeAgo="notification.timeAgo"
+                            :timeAgoIcon="listTimeAgoIcon"
+                            :author="notification.author"
+                            :authorIcon="listAuthorIcon"
+                            :removeItemIcon="listRemoveItemIcon"
+                            :removeAriaLabel="listRemoveItemAriaLabel"
+                            @update:model-value="onReadStatusChange(notification.id, $event)"
+                            @remove="onRemoveNotification(notification.id)"
+                        />
+                    </template>
+
+                    <div v-else class="p-3">
+                        <p class="text-sm text-text-neutral-subtle text-center">{{ listEmptyText }}</p>
+                    </div>
+                </div>
+
+                <!-- Footer -->
+                <div
+                    v-if="internalList.length"
+                    class="w-full flex gap-2 px-3"
+                >
+                    <ActionButton
+                        :icon="buttonAllReadIcon"
+                        :iconPosition="IconPosition.LEFT"
+                        :text="buttonAllReadText"
+                        :size="ButtonSize.XS"
+                        isFullWidth
+                        @click="onMarkAllAsRead"
+                    />
+                    <ActionButton
+                        :icon="buttonClearAllIcon"
+                        :iconPosition="IconPosition.LEFT"
+                        :text="buttonClearAllText"
+                        :size="ButtonSize.XS"
+                        isFullWidth
+                        @click="onClearAll"
+                    />
+                </div> 
+            </div>
+        </template>
+        <template #activator>
+            <slot name="activator" />
+        </template>
+    </Popover>
+</template>
+<script setup lang="ts">
+// Props
+const props = defineProps({
+    list: {
+        type: Array as PropType<NotificationItem[]>,
+        default: () => [
+                       {
+                id: '1',
+                read: false,
+                icon: 'mdi:bell-outline',
+                iconColor: ColorAccent.NEUTRAL,
+                title: 'New Notification',
+                description: 'This is a sample notification description.',
+                timeAgo: '5 minutes ago',
+                author: 'John Doe',
+                link: '',
+            },
+            {
+                id: '2',
+                read: true,
+                icon: 'mdi:bell-outline',
+                iconColor: ColorAccent.SECONDARY_BRAND,
+                title: 'Another Notification',
+                description: 'This is another sample notification description.',
+                timeAgo: '10 minutes ago',
+                author: 'Jane Doe',
+                link: '',
+            },
+            {
+                id: '3',
+                read: false,
+                icon: 'mdi:bell-outline',
+                iconColor: ColorAccent.PRIMARY_BRAND,
+                title: 'Third Notification',
+                description: 'This is the third sample notification description.',
+                timeAgo: '15 minutes ago',
+                author: 'Jim Doe',
+                link: '',
+            }
+        ],
+    },
+    isListIconContained: {
+        type: Boolean as PropType<boolean>,
+        default: true,
+    },
+    listIconSize: {
+        type: String as PropType<IconSize>,
+        default: IconSize.MD,
+        validator: (value: IconSize) => Object.values(IconSize).includes(value),
+    },
+    listContainedIconShape: {
+        type: String as PropType<IconContainerShape>,
+        default: IconContainerShape.CIRCLE,
+        validator: (value: IconContainerShape) => Object.values(IconContainerShape).includes(value),
+    },
+    listContainedIconSize: {
+        type: String as PropType<IconContainerSize>,
+        default: IconContainerSize.SM, 
+        validator: (value: IconContainerSize) => Object.values(IconContainerSize).includes(value),
+    },
+    listContainedStyleType: {
+        type: String as PropType<IconContainerStyleType>,
+        default: IconContainerStyleType.FLAT,
+        validator: (value: IconContainerStyleType) => Object.values(IconContainerStyleType).includes(value),
+    },
+    listTimeAgoIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:clock-time-four-outline',
+    },
+    listMaxHeightClass: {
+        type: String as PropType<string>,
+        default: 'max-h-[400px]',
+    },
+    listAuthorIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:account-outline',
+    },
+    listRemoveItemIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:close',
+    },
+    listRemoveItemAriaLabel: {
+        type: String as PropType<string>,
+        default: 'Remove notification',
+    },
+    listEmptyText: {
+        type: String as PropType<string>,
+        default: 'No notifications available.',
+    },
+    isLoading: {
+        type: Boolean as PropType<boolean>,
+        default: false,
+    },
+    loadingText: {
+        type: String as PropType<string>,
+        default: "Loading notifications",
+    },
+    errorText: {
+        type: String as PropType<string>,
+        default: "",
+    },
+    title: {
+        type: String as PropType<string>,
+        default: 'Notifications',
+    },
+    position: {
+        type: String as PropType<Position>,
+        default: Position.BOTTOM,
+        validator: (value: Position) => Object.values(Position).includes(value),
+    },
+    align: {
+        type: String as PropType<Align>,
+        default: Align.RIGHT,
+        validator: (value: Align) => Object.values(Align).includes(value),
+    },
+    trigger: {
+        type: String as PropType<Trigger>,
+        default: Trigger.CLICK,
+        validator: (value: Trigger) => Object.values(Trigger).includes(value),
+    },
+    popoverClass: {
+        type: String as PropType<string>,
+        default: 'min-w-[332px]'
+    },
+    badgeStyleType: {
+        type: String as PropType<BadgeStyle>,
+        default: BadgeStyle.FILLED,
+        validator: (value: BadgeStyle) => Object.values(BadgeStyle).includes(value),
+    },
+    badgeShape: {
+        type: String as PropType<BadgeShape>,
+        default: BadgeShape.PILL, 
+        validator: (value: BadgeShape) => Object.values(BadgeShape).includes(value),
+    },
+    badgeColor: {
+        type: String as PropType<ColorAccent>,
+        default: ColorAccent.SECONDARY_BRAND, 
+        validator: (value: ColorAccent) => Object.values(ColorAccent).includes(value),
+    },
+    viewAllText: {
+        type: String as PropType<string>,
+        default: 'View all',
+    },
+    viewAllLink: {
+        type: String as PropType<string>,
+        default: '',
+    },
+    buttonAllReadIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:check-all',
+    },
+    buttonAllReadText: {
+        type: String as PropType<string>,
+        default: 'Mark all as read',
+    },
+    buttonClearAllIcon: {
+        type: String as PropType<string>,
+        default: 'mdi:close-circle-outline',
+    },
+    buttonClearAllText: {
+        type: String as PropType<string>,
+        default: 'Clear all',
+    },
+    filterAllButtonText: {
+        type: String as PropType<string>,
+        default: 'All',
+    },
+    filterUnreadButtonText: {
+        type: String as PropType<string>,
+        default: 'Unread',
+    },
+    filterGroupStyle: {
+        type: String as PropType<ToggleButtonGroupStyle>,
+        default: ToggleButtonGroupStyle.GROUPED,
+        validator: (value: ToggleButtonGroupStyle) => Object.values(ToggleButtonGroupStyle).includes(value),
+    },
+})
+
+// Emits
+const emit = defineEmits(['markAllAsRead', 'clearAll', 'remove'])
+
+// States
+const selectedFilterValue = ref<string>('all')
+
+const toggleFilterButtons = ref<ToggleButton[]>([
+    { text: props.filterAllButtonText, value: 'all', size: ButtonSize.SM },
+    { text: props.filterUnreadButtonText, value: 'unread', size: ButtonSize.SM },
+])
+
+const internalList = ref<NotificationItem[]>([...props.list])
+
+// Watchers
+watch(() => props.list, (newList) => {
+    internalList.value = [...newList]
+}, { deep: true })
+
+// Computed
+const hasError = computed(() => props.errorText.trim().length > 0)
+
+const unreadCount = computed(() => internalList.value.filter(notification => !notification.read).length)
+
+const filteredList = computed(() => {
+    if (selectedFilterValue.value === 'unread') {
+        return internalList.value.filter(notification => !notification.read)
+    }
+    return internalList.value
+})
+
+// Handlers
+const onRemoveNotification = (id: string) => {
+    internalList.value = internalList.value.filter(notification => notification.id !== id)
+    emit('remove', { id })
+}
+
+const onReadStatusChange = (id: string, read: boolean) => {
+    const item = internalList.value.find(notification => notification.id === id)
+    if (item) item.read = read
+}
+
+const onMarkAllAsRead = () => {
+    internalList.value.forEach(notification => notification.read = true)
+    emit('markAllAsRead')
+}
+
+const onClearAll = () => {
+    internalList.value = []
+    emit('clearAll')
+}
+</script>

package/components/popovers/Popover.vue

@@ -65,7 +65,7 @@ const props = defineProps({
         validator: (value: Trigger) => Object.values(Trigger).includes(value),
     },
     popoverClass: {
-        type: String as PropType<string>,
+        type: [String, Array] as PropType<string | string[]>,
         default: 'min-w-[300px]'
     }
 })

package/models/enums/icons.ts

@@ -15,6 +15,8 @@ export enum IconContainerStyleType {
 }
 
 export enum IconContainerSize {
+    SM = 'sm',
+    MD = 'md',
     LG = 'lg',
     XL = 'xl',
     XXL = '2xl',

package/models/enums/metrics.ts

@@ -1,4 +1,4 @@
-export enum DashboardMetricCardStyle {
+export enum MetricCardStyle {
     DEFAULT = "default",
     PRIMARY_BRAND_FILLED = "primary-brand-filled",
     PRIMARY_BRAND_SOFT = "primary-brand-soft",
@@ -9,8 +9,19 @@ export enum DashboardMetricCardStyle {
     CUSTOM_FILLED = "custom-filled",
 }
 
-export enum DashboardMetricTrendDirection {
+export enum MetricTrendDirection {
     UP = "up",
     DOWN = "down",
     NEUTRAL = "neutral",
 }
+
+export enum MetricCardIconPosition {
+    LEFT = "left",
+    RIGHT = "right",
+}
+
+export enum MetricCardBackgroundIconPosition {
+    TOP = "top",
+    MIDDLE = "middle",
+    BOTTOM = "bottom",
+}

package/models/types/notifications.ts

@@ -0,0 +1,11 @@
+export interface NotificationItem {
+    id: string;
+    read: boolean;
+    title: string;
+    description: string;
+    timeAgo: string;
+    author: string;
+    link: string;
+    icon?: string;
+    iconColor?: ColorAccent;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@imaginario27/air-ui-ds",
-    "version": "1.14.2",
+    "version": "1.15.0",
     "author": "imaginario27",
     "type": "module",
     "homepage": "https://air-ui.netlify.app/",