vueless 1.3.6-beta.7 → 1.3.6-beta.9

package/components.d.ts

@@ -56,6 +56,7 @@ export { default as UPage } from "./ui.container-page/UPage.vue";
 /* Images and Icons */
 export { default as UIcon } from "./ui.image-icon/UIcon.vue";
 export { default as UAvatar } from "./ui.image-avatar/UAvatar.vue";
+export { default as UAvatarGroup } from "./ui.image-avatar-group/UAvatarGroup.vue";
 /* Data */
 export { default as UTable } from "./ui.data-table/UTable.vue";
 export { default as UDataList } from "./ui.data-list/UDataList.vue";

package/components.ts

@@ -56,6 +56,7 @@ export { default as UPage } from "./ui.container-page/UPage.vue";
 /* Images and Icons */
 export { default as UIcon } from "./ui.image-icon/UIcon.vue";
 export { default as UAvatar } from "./ui.image-avatar/UAvatar.vue";
+export { default as UAvatarGroup } from "./ui.image-avatar-group/UAvatarGroup.vue";
 /* Data */
 export { default as UTable } from "./ui.data-table/UTable.vue";
 export { default as UDataList } from "./ui.data-list/UDataList.vue";

package/constants.d.ts

@@ -194,6 +194,7 @@ export namespace COMPONENTS {
     let UDrawer: string;
     let UIcon: string;
     let UAvatar: string;
+    let UAvatarGroup: string;
     let UTable: string;
     let UDataList: string;
     let UTab: string;

package/constants.js

@@ -306,6 +306,7 @@ export const COMPONENTS = {
   /* Images and Icons */
   UIcon: "ui.image-icon",
   UAvatar: "ui.image-avatar",
+  UAvatarGroup: "ui.image-avatar-group",
 
   /* Data */
   UTable: "ui.data-table",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.3.6-beta.7",
+  "version": "1.3.6-beta.9",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",

package/types.ts

@@ -39,6 +39,7 @@ import UTabConfig from "./ui.navigation-tab/config";
 import UTabsConfig from "./ui.navigation-tabs/config";
 import UBreadcrumbsConfig from "./ui.navigation-breadcrumbs/config";
 import UAvatarConfig from "./ui.image-avatar/config";
+import UAvatarGroupConfig from "./ui.image-avatar-group/config";
 import UIconConfig from "./ui.image-icon/config";
 import UCheckboxConfig from "./ui.form-checkbox/config";
 import UCheckboxGroupConfig from "./ui.form-checkbox-group/config";
@@ -306,6 +307,7 @@ export interface Components {
   UTabs: Partial<typeof UTabsConfig>;
   UBreadcrumbs: Partial<typeof UBreadcrumbsConfig>;
   UAvatar: Partial<typeof UAvatarConfig>;
+  UAvatarGroup: Partial<typeof UAvatarGroupConfig>;
   UIcon: Partial<typeof UIconConfig>;
   UCheckbox: Partial<typeof UCheckboxConfig>;
   UCheckboxGroup: Partial<typeof UCheckboxGroupConfig>;

package/ui.button/storybook/stories.ts

@@ -79,8 +79,8 @@ const MultiEnumTemplate: StoryFn<UButtonArgs> = (args: UButtonArgs, { argTypes }
 export const Default = DefaultTemplate.bind({});
 Default.args = { label: "Button" };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", label: "{enumValue}" };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", label: "{enumValue}" };
 
 export const Round = EnumTemplate.bind({});
 Round.args = { enum: "variant", label: "{enumValue}", round: true };

package/ui.container-card/storybook/stories.ts

@@ -125,8 +125,8 @@ Description.args = {
   description: "Customize your cookie settings to enhance your browsing experience.",
 };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", title: "{enumValue}" };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", title: "{enumValue}" };
 
 export const BeforeTitleSlot = DefaultTemplate.bind({});
 BeforeTitleSlot.args = {

package/ui.container-drawer/storybook/stories.ts

@@ -162,8 +162,8 @@ NoCloseOnCross.args = { closeOnCross: false };
 export const Position = EnumTemplate.bind({});
 Position.args = { enum: "position", modelValues: {} };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", modelValues: {} };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", modelValues: {} };
 
 export const BeforeTitleSlot = DefaultTemplate.bind({});
 BeforeTitleSlot.args = {

package/ui.container-modal/storybook/stories.ts

@@ -280,8 +280,8 @@ WithoutDivider.parameters = {
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", modelValues: {} };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", modelValues: {} };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", modelValues: {} };
 
 export const BackLink: StoryFn<UModalArgs> = (args: UModalArgs) => ({
   components: { UModal, UButton, UCheckbox, UCol, URow, UDivider, UInput, UInputPassword },

package/ui.container-modal-confirm/storybook/stories.ts

@@ -221,8 +221,8 @@ DisableConfirmButton.args = { confirmDisabled: true };
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size", modelValues: {} };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", modelValues: {} };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", modelValues: {} };
 
 export const Colors: StoryFn<UModalConfirmArgs> = (args: UModalConfirmArgs, { argTypes }) => ({
   components: { UModalConfirm, UButton, URow },

package/ui.container-page/storybook/stories.ts

@@ -212,9 +212,9 @@ Sizes.parameters = {
   },
 };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant", description: "{enumValue}" };
-Variant.parameters = {
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant", description: "{enumValue}" };
+Variants.parameters = {
   docs: {
     description: {
       story: "Page variant.",

package/ui.form-listbox/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   wrapper: {
     base: `
-      my-2 p-1 flex flex-col gap-1 w-auto absolute z-50 shadow-sm
+      p-1 flex flex-col gap-1 w-auto absolute z-50 shadow-sm
       rounded-medium border border-solid border-default bg-default
       overflow-auto [-webkit-overflow-scrolling:touch]
       focus:outline-hidden

package/ui.image-avatar/UAvatar.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-import { computed, useTemplateRef } from "vue";
+import { computed, inject, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
 import { getDefaults } from "../utils/ui";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
+import UChip from "../ui.other-chip/UChip.vue";
 
 import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
@@ -16,6 +17,7 @@ defineOptions({ inheritAttrs: false });
 const props = withDefaults(defineProps<Props>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   label: "",
+  chip: () => ({}),
 });
 
 const emit = defineEmits([
@@ -25,6 +27,16 @@ const emit = defineEmits([
   "click",
 ]);
 
+const getAvatarGroupSize = inject<() => Props["size"]>("getAvatarGroupSize", () => undefined);
+const getAvatarGroupVariant = inject<() => Props["variant"]>(
+  "getAvatarGroupVariant",
+  () => undefined,
+);
+const getAvatarGroupRounded = inject<() => Props["rounded"]>(
+  "getAvatarGroupRounded",
+  () => undefined,
+);
+
 const avatarRef = useTemplateRef<HTMLDivElement>("avatar");
 
 const labelFirstLetters = computed(() => {
@@ -42,6 +54,8 @@ const backgroundImage = computed(() => {
   return props.src ? `background-image: url(${props.src});` : "";
 });
 
+const hasChip = computed(() => props.chip != null && Boolean(Object.keys(props.chip).length));
+
 function onClick(event: MouseEvent) {
   emit("click", event);
 }
@@ -65,38 +79,51 @@ defineExpose({
 const mutatedProps = computed(() => ({
   /* component state, not a props */
   src: Boolean(props.src),
+  size: getAvatarGroupSize() || props.size,
+  variant: getAvatarGroupVariant() || props.variant,
+  rounded: getAvatarGroupRounded() || props.rounded,
 }));
 
-const { getDataTest, config, avatarAttrs, placeholderIconAttrs } = useUI<Config>(
-  defaultConfig,
-  mutatedProps,
-);
+const { getDataTest, config, avatarAttrs, placeholderIconAttrs, chipAttrs, hiddenAttrs } =
+  useUI<Config>(defaultConfig, mutatedProps);
 </script>
 
 <template>
-  <div
-    ref="avatar"
-    :title="label"
-    :style="backgroundImage"
-    v-bind="avatarAttrs"
-    :data-test="getDataTest()"
-    @click="onClick"
+  <UChip
+    :icon="chip.icon"
+    :color="chip.color"
+    :inset="chip.inset"
+    :x-position="chip.xPosition"
+    :y-position="chip.yPosition"
+    v-bind="chipAttrs"
   >
-    <template v-if="!backgroundImage">
-      <!--
-        @slot Use it to add something instead of the avatar image placeholder.
-        @binding {string} icon-name
-      -->
-      <slot name="placeholder" :icon-name="placeholderIconName">
-        <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
-        <UIcon
-          v-else
-          :size="size"
-          color="inherit"
-          :name="placeholderIconName"
-          v-bind="placeholderIconAttrs"
-        />
-      </slot>
+    <div
+      ref="avatar"
+      :title="label"
+      :style="backgroundImage"
+      v-bind="avatarAttrs"
+      :data-test="getDataTest()"
+      @click="onClick"
+    >
+      <template v-if="!backgroundImage">
+        <!--
+          @slot Use it to add something instead of the avatar image placeholder.
+          @binding {string} icon-name
+        -->
+        <slot name="placeholder" :icon-name="placeholderIconName">
+          <template v-if="labelFirstLetters">{{ labelFirstLetters }}</template>
+          <UIcon
+            v-else
+            :size="size"
+            color="inherit"
+            :name="placeholderIconName"
+            v-bind="placeholderIconAttrs"
+          />
+        </slot>
+      </template>
+    </div>
+    <template v-if="!hasChip" #chip>
+      <span v-bind="hiddenAttrs">&nbsp;</span>
     </template>
-  </div>
+  </UChip>
 </template>

package/ui.image-avatar/config.ts

@@ -1,7 +1,7 @@
 export default /*tw*/ {
   avatar: {
     base: `
-      flex items-center justify-center shrink-0 border
+      flex items-center justify-center shrink-0 border relative
       text-{color} bg-{color}/10 bg-contain bg-center bg-no-repeat
     `,
     variants: {
@@ -34,6 +34,23 @@ export default /*tw*/ {
       },
     },
   },
+  chip: {
+    base: "{UChip}",
+    defaults: {
+      size: {
+        "3xs": "xs",
+        "2xs": "xs",
+        xs: "sm",
+        sm: "md",
+        md: "md",
+        lg: "lg",
+        xl: "xl",
+        "2xl": "xl",
+        "3xl": "xl",
+      },
+    },
+  },
+  hidden: "hidden",
   placeholderIcon: "{UIcon}",
   defaults: {
     color: "grayscale",

package/ui.image-avatar/storybook/docs.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source, Markdown } from "@storybook/addon-docs/blocks";
 import { getSource } from "../../utils/storybook";
 
 import * as stories from "./stories";
@@ -12,5 +12,20 @@ import defaultConfig from "../config?raw"
 <Controls of={stories.Default} />
 <Stories of={stories} />
 
+## Chip Object Properties
+Keys you may/have to provide to the component in a `chip` object.
+
+<Markdown>
+{`
+|  Key name              | Description                                           | Type                    |
+| ---------------------- | ----------------------------------------------------- | ----------------------- |
+| icon                   | Chip icon name                                        | String                  |
+| color                  | Chip color                                            | String                  |
+| xPosition              | Chip x-axis position                                  | String                  |
+| yPosition              | Chip y-axis position                                  | String                  |
+| inset                  | Display the chip inside the component                 | Boolean                 |
+`}
+</Markdown>
+
 ## Default config
 <Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-avatar/storybook/stories.ts

@@ -9,7 +9,6 @@ import {
 import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 import URow from "../../ui.container-row/URow.vue";
 import ULoader from "../../ui.loader/ULoader.vue";
-import tooltip from "../../v.tooltip/vTooltip";
 
 import johnDoeImg from "./assets/john-doe.png";
 
@@ -22,7 +21,7 @@ interface UAvatarArgs extends Props {
 }
 
 export default {
-  id: "6030",
+  id: "6020",
   title: "Images & Icons / Avatar",
   component: UAvatar,
   args: {
@@ -51,7 +50,6 @@ const DefaultTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs) => ({
 
 const EnumTemplate: StoryFn<UAvatarArgs> = (args: UAvatarArgs, { argTypes }) => ({
   components: { URow, UAvatar },
-  directives: { tooltip },
   setup: () => ({ args, argTypes, getArgs }),
   template: `
     <URow>
@@ -106,6 +104,22 @@ PlaceholderIcon.args = {
   placeholderIcon: "account_circle",
 };
 
+export const Chip = DefaultTemplate.bind({});
+Chip.args = {
+  rounded: "full",
+  chip: {
+    color: "warning",
+    inset: true,
+  },
+};
+Chip.parameters = {
+  docs: {
+    description: {
+      story: "For the full list of chip object properties, see the table below.",
+    },
+  },
+};
+
 export const Variants = EnumTemplate.bind({});
 Variants.args = { enum: "variant" };
 

package/ui.image-avatar/tests/UAvatar.test.ts

@@ -49,7 +49,11 @@ describe("UAvatar.vue", () => {
         },
       });
 
-      expect(component.attributes("style")).toContain(expectedStyle);
+      // Use the exposed ref to access the avatar div
+      const avatarRef = component.vm.avatarRef;
+
+      expect(avatarRef).toBeDefined();
+      expect(avatarRef?.getAttribute("style")).toContain(expectedStyle);
       // When src is provided, the component should not render any text content
       expect(component.text()).toBe(expectedText);
     });
@@ -94,7 +98,11 @@ describe("UAvatar.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(classes);
+        // Use the exposed ref to access the avatar div
+        const avatarRef = component.vm.avatarRef;
+
+        expect(avatarRef).toBeDefined();
+        expect(avatarRef?.className).toContain(classes);
       });
     });
 
@@ -119,7 +127,11 @@ describe("UAvatar.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(classes);
+        // Use the exposed ref to access the avatar div
+        const avatarRef = component.vm.avatarRef;
+
+        expect(avatarRef).toBeDefined();
+        expect(avatarRef?.className).toContain(classes);
       });
     });
 
@@ -144,7 +156,11 @@ describe("UAvatar.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(color);
+        // Use the exposed ref to access the avatar div
+        const avatarRef = component.vm.avatarRef;
+
+        expect(avatarRef).toBeDefined();
+        expect(avatarRef?.className).toContain(color);
       });
     });
 
@@ -165,7 +181,11 @@ describe("UAvatar.vue", () => {
           },
         });
 
-        expect(component.attributes("class")).toContain(classes);
+        // Use the exposed ref to access the avatar div
+        const avatarRef = component.vm.avatarRef;
+
+        expect(avatarRef).toBeDefined();
+        expect(avatarRef?.className).toContain(classes);
       });
     });
 
@@ -179,7 +199,11 @@ describe("UAvatar.vue", () => {
         },
       });
 
-      expect(component.attributes("data-test")).toBe(dataTest);
+      // Use the exposed ref to access the avatar div
+      const avatarRef = component.vm.avatarRef;
+
+      expect(avatarRef).toBeDefined();
+      expect(avatarRef?.getAttribute("data-test")).toBe(dataTest);
     });
   });
 
@@ -215,7 +239,11 @@ describe("UAvatar.vue", () => {
         },
       });
 
-      await component.trigger("click");
+      // Use the exposed ref to access the avatar div and trigger click
+      const avatarRef = component.vm.avatarRef;
+
+      expect(avatarRef).toBeDefined();
+      avatarRef?.dispatchEvent(new Event("click"));
 
       expect(component.emitted("click")).toBeTruthy();
       expect(component.emitted("click")?.length).toBe(expectedLength);

package/ui.image-avatar/types.ts

@@ -4,6 +4,14 @@ import type { ComponentConfig } from "../types";
 
 export type Config = typeof defaultConfig;
 
+export interface ChipItem {
+  icon?: string;
+  color?: Props["color"];
+  xPosition?: "left" | "right";
+  yPosition?: "top" | "bottom";
+  inset?: boolean;
+}
+
 export interface Props {
   /**
    * Avatar label (username, nickname, etc.).
@@ -49,6 +57,11 @@ export interface Props {
    */
   placeholderIcon?: string;
 
+  /**
+   * Avatar chip config.
+   */
+  chip?: ChipItem;
+
   /**
    * Component config object.
    */

package/ui.image-avatar-group/UAvatarGroup.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { computed, provide, useTemplateRef } from "vue";
+
+import { useUI } from "../composables/useUI";
+import { getDefaults } from "../utils/ui";
+
+import UAvatar from "../ui.image-avatar/UAvatar.vue";
+
+import { COMPONENT_NAME } from "./constants";
+import defaultConfig from "./config";
+
+import type { Props, Config } from "./types";
+import type { Props as AvatarProps } from "../ui.image-avatar/types";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<Props>(), {
+  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+  avatars: () => [],
+});
+
+const avatarGroupRef = useTemplateRef<HTMLDivElement>("avatarGroup");
+
+provide("getAvatarGroupSize", () => props.size);
+provide("getAvatarGroupVariant", () => props.variant);
+provide("getAvatarGroupRounded", () => props.rounded);
+
+const visibleAvatars = computed(() => {
+  return props.avatars.slice(0, props.max);
+});
+
+const remainingCount = computed(() => {
+  return props.avatars.length - props.max;
+});
+
+const hasMoreAvatars = computed(() => remainingCount.value > 0);
+
+defineExpose({
+  /**
+   * A reference to the avatar group element for direct DOM manipulation.
+   * @property {HTMLDivElement}
+   */
+  avatarGroupRef,
+});
+
+/**
+ * Get element / nested component attributes for each config token ✨
+ * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
+ */
+const { getDataTest, avatarGroupAttrs, avatarAttrs, remainingAttrs } = useUI<Config>(defaultConfig);
+</script>
+
+<template>
+  <div ref="avatarGroup" v-bind="avatarGroupAttrs" :data-test="getDataTest()">
+    <template v-for="(avatar, index) in visibleAvatars" :key="index">
+      <!--
+        @slot Use it to customize a specific avatar.
+        @binding {number} index
+        @binding {object} avatar
+      -->
+      <slot :name="`avatar-${index}`" :index="index" :avatar="avatar">
+        <UAvatar
+          :src="avatar.src"
+          :label="avatar.label"
+          :color="avatar.color as AvatarProps['color']"
+          :placeholder-icon="avatar.placeholderIcon"
+          :chip="avatar.chip"
+          v-bind="avatarAttrs"
+        />
+      </slot>
+    </template>
+
+    <div v-if="hasMoreAvatars">
+      <UAvatar :size="size" color="neutral" :rounded="rounded" v-bind="remainingAttrs">
+        <template #placeholder>
+          <!--
+            @slot Use it to customize the remaining count avatar.
+            @binding {number} remaining-count
+          -->
+          <slot name="remaining" :remaining-count="remainingCount">
+            {{ `+${remainingCount}` }}
+          </slot>
+        </template>
+      </UAvatar>
+    </div>
+  </div>
+</template>

package/ui.image-avatar-group/config.ts

@@ -0,0 +1,11 @@
+export default /*tw*/ {
+  avatarGroup: "inline-flex items-center",
+  avatar: "{UAvatar} ring-3 -me-1.5",
+  remaining: "{UAvatar} ring-3",
+  defaults: {
+    variant: "solid",
+    rounded: "md",
+    size: "md",
+    max: 3,
+  },
+};

package/ui.image-avatar-group/constants.ts

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const COMPONENT_NAME = "UAvatarGroup";

package/ui.image-avatar-group/storybook/docs.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
+import { getSource } from "../../utils/storybook";
+
+import * as stories from "./stories";
+import defaultConfig from "../config?raw"
+
+<Meta of={stories} />
+<Title of={stories} />
+<Subtitle of={stories} />
+<Description of={stories} />
+<Primary of={stories}  />
+<Controls of={stories.Default} />
+<Stories of={stories} />
+
+## Default config
+<Source code={getSource(defaultConfig)} language="jsx" dark />

package/ui.image-avatar-group/storybook/stories.ts

@@ -0,0 +1,147 @@
+import {
+  getArgs,
+  getArgTypes,
+  getSlotNames,
+  getSlotsFragment,
+  getDocsDescription,
+} from "../../utils/storybook";
+
+import UAvatarGroup from "../../ui.image-avatar-group/UAvatarGroup.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+import UCol from "../../ui.container-col/UCol.vue";
+import ULink from "../../ui.button-link/ULink.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Props } from "../types.ts";
+
+interface UAvatarGroupArgs extends Props {
+  slotTemplate?: string;
+  enum: "size" | "variant" | "rounded";
+}
+
+export default {
+  id: "6030",
+  title: "Images & Icons / Avatar Group",
+  component: UAvatarGroup,
+  args: {
+    avatars: [
+      { src: "https://i.pravatar.cc/300?img=1" },
+      { src: "https://i.pravatar.cc/300?img=2" },
+      { src: "https://i.pravatar.cc/300?img=3" },
+      { src: "https://i.pravatar.cc/300?img=4" },
+    ],
+    rounded: "full",
+  },
+  argTypes: {
+    ...getArgTypes(UAvatarGroup.__name),
+  },
+  parameters: {
+    docs: {
+      ...getDocsDescription(UAvatarGroup.__name),
+    },
+  },
+} as Meta;
+
+const DefaultTemplate: StoryFn<UAvatarGroupArgs> = (args: UAvatarGroupArgs) => ({
+  components: { UAvatarGroup, UAvatar, ULink },
+  setup: () => ({
+    args,
+    slots: getSlotNames(UAvatarGroup.__name),
+  }),
+  template: `
+    <UAvatarGroup v-bind="args">
+      ${args.slotTemplate || getSlotsFragment("")}
+    </UAvatarGroup>
+  `,
+});
+
+const EnumTemplate: StoryFn<UAvatarGroupArgs> = (args: UAvatarGroupArgs, { argTypes }) => ({
+  components: { UCol, UAvatarGroup, UAvatar },
+  setup: () => ({ args, argTypes, getArgs }),
+  template: `
+    <UCol>
+      <UAvatarGroup
+        v-for="option in argTypes?.[args.enum]?.options"
+        v-bind="getArgs(args, option)"
+        :key="option"
+      >
+        ${args.slotTemplate}
+      </UAvatarGroup>
+    </UCol>
+  `,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {};
+
+export const Max = DefaultTemplate.bind({});
+Max.args = { max: 2 };
+Max.parameters = {
+  docs: {
+    description: {
+      story:
+        "When the number of avatars is greater than the max, the remaining count avatar is displayed.",
+    },
+  },
+};
+
+export const Sizes = EnumTemplate.bind({});
+Sizes.args = {
+  enum: "size",
+  slotTemplate: `
+    <template #remaining>
+      <UAvatar :label="option" />
+    </template>
+  `,
+};
+
+export const Variants = EnumTemplate.bind({});
+Variants.args = {
+  enum: "variant",
+  avatars: [{ label: "John Doe" }],
+  config: { avatar: "ring-0" },
+};
+
+export const AvatarConfig = DefaultTemplate.bind({});
+AvatarConfig.args = {
+  avatars: [
+    { src: "https://i.pravatar.cc/300?img=1", label: "John Doe", chip: { color: "primary" } },
+    { color: "warning", placeholderIcon: "person" },
+    {
+      src: "https://i.pravatar.cc/300?img=9",
+      label: "Jane Smith",
+      color: "info",
+      chip: { color: "grayscale" },
+    },
+  ],
+};
+AvatarConfig.parameters = {
+  docs: {
+    description: {
+      story:
+        // eslint-disable-next-line vue/max-len
+        "You can customize the `label`, `color`, `placeholderIcon` and `chip` of a specific avatar by passing the corresponding props to its object.",
+    },
+  },
+};
+
+export const AvatarSlot = DefaultTemplate.bind({});
+AvatarSlot.args = {
+  slotTemplate: `
+    <template #avatar-2="{ avatar }">
+      <UAvatar
+        :src="avatar.src"
+        class="ring-3 ring-primary"
+      />
+    </template>
+  `,
+};
+
+export const RemainingSlot = DefaultTemplate.bind({});
+RemainingSlot.args = {
+  slotTemplate: `
+    <template #remaining="{ remainingCount }">
+      <ULink :label="'+' + remainingCount" size="lg" color="info" underlined />
+    </template>
+  `,
+};

package/ui.image-avatar-group/tests/UAvatarGroup.test.ts

@@ -0,0 +1,141 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+
+import UAvatarGroup from "../UAvatarGroup.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
+
+import type { Props } from "../types.ts";
+
+describe("UAvatarGroup.vue", () => {
+  describe("Props", () => {
+    it("Size – applies the correct size to child avatars", async () => {
+      const sizes = ["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+
+      sizes.forEach((size) => {
+        const component = mount(UAvatarGroup, {
+          props: {
+            size: size as Props["size"],
+            avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+          },
+        });
+
+        // Check if avatars have the correct size (they should inherit from group)
+        const avatars = component.findAllComponents(UAvatar);
+
+        expect(avatars.length).toBeGreaterThan(0);
+      });
+    });
+
+    it("Max – limits the number of avatars displayed based on max prop", async () => {
+      const component = mount(UAvatarGroup, {
+        props: {
+          max: 2,
+          avatars: [{ label: "John Doe" }, { label: "Jane Smith" }, { label: "Bob Johnson" }],
+        },
+      });
+
+      // Should have 2 visible avatars + 1 remaining avatar
+      const avatars = component.findAllComponents(UAvatar);
+
+      expect(avatars.length).toBe(3);
+
+      // The last avatar should be the remaining count avatar
+      const lastAvatar = avatars[avatars.length - 1];
+
+      expect(lastAvatar.text()).toBe("+1");
+    });
+
+    it("Variant – applies the correct variant to child avatars", async () => {
+      const variants = ["solid", "outlined", "subtle", "soft"];
+
+      variants.forEach((variant) => {
+        const component = mount(UAvatarGroup, {
+          props: {
+            variant: variant as Props["variant"],
+            avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+          },
+        });
+
+        const avatars = component.findAllComponents(UAvatar);
+
+        expect(avatars.length).toBeGreaterThan(0);
+      });
+    });
+
+    it("Rounded – applies the correct rounded to child avatars", async () => {
+      const roundedValues = ["none", "sm", "md", "lg", "full"];
+
+      roundedValues.forEach((rounded) => {
+        const component = mount(UAvatarGroup, {
+          props: {
+            rounded: rounded as Props["rounded"],
+            avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+          },
+        });
+
+        const avatars = component.findAllComponents(UAvatar);
+
+        expect(avatars.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe("Slots", () => {
+    it("Avatars – renders avatars from avatars prop", async () => {
+      const component = mount(UAvatarGroup, {
+        props: {
+          avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+        },
+      });
+
+      const avatars = component.findAllComponents(UAvatar);
+
+      expect(avatars.length).toBe(2);
+    });
+
+    it("Remaining – renders custom remaining slot", async () => {
+      const component = mount(UAvatarGroup, {
+        props: {
+          max: 1,
+          avatars: [{ label: "John Doe" }, { label: "Jane Smith" }],
+        },
+        slots: {
+          remaining: `
+            <template #remaining="{ remainingCount }">
+              <span class="custom-remaining">
+                Custom {{ remainingCount }}
+              </span>
+            </template>
+          `,
+        },
+        global: {
+          components: {
+            UAvatar,
+          },
+        },
+      });
+
+      const avatars = component.findAllComponents(UAvatar);
+
+      expect(avatars.length).toBe(2);
+
+      // Check if custom remaining slot content is rendered
+      const customRemaining = component.find(".custom-remaining");
+
+      expect(customRemaining.exists()).toBe(true);
+      expect(customRemaining.text()).toContain("Custom");
+    });
+  });
+
+  describe("Exposed refs", () => {
+    it("exposes avatarGroupRef", () => {
+      const component = mount(UAvatarGroup, {
+        props: {
+          avatars: [{ label: "John Doe" }],
+        },
+      });
+
+      expect(component.vm.avatarGroupRef).toBeDefined();
+    });
+  });
+});

package/ui.image-avatar-group/types.ts

@@ -0,0 +1,51 @@
+import defaultConfig from "./config";
+
+import type { ComponentConfig } from "../types";
+import type { ChipItem } from "../ui.image-avatar/types";
+
+export type Config = typeof defaultConfig;
+
+export interface AvatarItem {
+  src?: string;
+  label?: string;
+  color?: string;
+  placeholderIcon?: string;
+  chip?: ChipItem;
+}
+
+export interface Props {
+  /**
+   * Avatar items.
+   */
+  avatars?: AvatarItem[];
+
+  /**
+   * Avatar group size.
+   */
+  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+  /**
+   * Maximum number of avatars to display.
+   */
+  max?: number;
+
+  /**
+   * Avatar variant.
+   */
+  variant?: "solid" | "outlined" | "subtle" | "soft";
+
+  /**
+   * Avatar corner rounding.
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * Component config object.
+   */
+  config?: ComponentConfig<Config>;
+
+  /**
+   * Data-test attribute for automated testing.
+   */
+  dataTest?: string | null;
+}

package/ui.navigation-pagination/storybook/stories.ts

@@ -85,8 +85,8 @@ Limit.parameters = {
   },
 };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant" };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
 
 export const Sizes = EnumTemplate.bind({});
 Sizes.args = { enum: "size" };

package/ui.text-block/config.ts

@@ -44,6 +44,7 @@ export default /*tw*/ {
         true: "leading-none",
       },
       wrap: {
+        true: "text-wrap wrap-anywhere",
         false: "text-nowrap",
       },
     },

package/ui.text-block/storybook/stories.ts

@@ -90,8 +90,8 @@ Sizes.args = { enum: "size" };
 export const Color = EnumTemplate.bind({});
 Color.args = { enum: "color" };
 
-export const Variant = EnumTemplate.bind({});
-Variant.args = { enum: "variant" };
+export const Variants = EnumTemplate.bind({});
+Variants.args = { enum: "variant" };
 
 export const Line: StoryFn<UTextArgs> = (args: UTextArgs) => ({
   components: { UText, UCol },