feat(Tabs): add item.color forwarded to leading Avatar

docs/content/docs/2.components/tabs.md

@@ -39,6 +39,7 @@ Use the `items` prop as an array of objects with the following properties:
 - `label?: string`{lang="ts-type"}
 - [`icon?: IconComponent`{lang="ts-type"}](#usage)
 - `avatar?: AvatarProps`{lang="ts-type"}
+- `color?: AvatarProps['color']`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
 - `content?: string`{lang="ts-type"}
 - `value?: string | number`{lang="ts-type"}

src/runtime/components/Tabs.vue

@@ -17,6 +17,10 @@ export interface TabsItem {
    */
   icon?: IconComponent
   avatar?: AvatarProps
+  /**
+   * Default `color` for the item's leading `B24Avatar`. Overridden by `avatar.color` when set.
+   */
+  color?: AvatarProps['color']
   /**
    * Display a badge on the item.
    * `{ size: 'sm', color: 'air-primary' }`{lang="ts-type"}
@@ -172,6 +176,7 @@ defineExpose({
           <B24Avatar
             v-else-if="item.avatar"
             :size="((item.b24ui?.leadingAvatarSize || props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()) as AvatarProps['size'])"
+            :color="item.color"
             v-bind="item.avatar"
             data-slot="leadingAvatar"
             :class="b24ui.leadingAvatar({ class: [props.b24ui?.leadingAvatar, item.b24ui?.leadingAvatar] })"

test/components/Tabs.spec.ts

@@ -46,6 +46,7 @@ describe('Tabs', () => {
     ['with as', { props: { ...props, as: 'section' } }],
     ['with class', { props: { ...props, class: 'w-96' } }],
     ['with b24ui', { props: { ...props, b24ui: { content: 'w-full ring ring-red-500' } } }],
+    ['with item color', { props: { items: [{ label: 'Engineer', avatar: { src: 'https://github.com/bitrix24.png' }, color: 'air-primary' as const, content: 'Engineer content' }, { label: 'Designer', avatar: { src: 'https://github.com/bitrix24.png' }, color: 'air-primary-success' as const, content: 'Designer content' }] } }],
     // Slots
     ['with leading slot', { props, slots: { leading: () => 'Leading slot' } }],
     ['with default slot', { props, slots: { default: () => 'Default slot' } }],

test/components/__snapshots__/Tabs-vue.spec.ts.snap

@@ -200,6 +200,22 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with item color correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="style-outline-accent-2 flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group border-(--ui-color-divider-vibrant-accent-more) w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-color-design-plain-na-content) hover:data-[state=inactive]:not-disabled:text-(--ui-color-design-selection-content) font-(--ui-font-weight-medium) cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 transition-colors rounded-(--ui-border-radius-md) focus:outline-none justify-center px-3 py-1.5 text-(length:--ui-font-size-md)/[normal] gap-1.5 focus-visible:ring-1 focus-visible:ring-inset data-[state=active]:text-(--b24ui-color) focus-visible:ring-(--ui-color-design-selection-content)" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-content-0"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="">Engineer</span>
+      <!--v-if-->
+    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-color-design-plain-na-content) hover:data-[state=inactive]:not-disabled:text-(--ui-color-design-selection-content) font-(--ui-font-weight-medium) cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 transition-colors rounded-(--ui-border-radius-md) focus:outline-none justify-center px-3 py-1.5 text-(length:--ui-font-size-md)/[normal] gap-1.5 focus-visible:ring-1 focus-visible:ring-inset data-[state=active]:text-(--b24ui-color) focus-visible:ring-(--ui-color-design-selection-content)" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-content-1"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled-success size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="">Designer</span>
+      <!--v-if-->
+    </button>
+  </div>
+  <div id="reka-tabs-v-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="focus:outline-none w-full">Engineer content</div>
+  <div id="reka-tabs-v-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
 exports[`Tabs > renders with items correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="style-outline-accent-2 flex items-center gap-2 flex-col">
   <div data-slot="list" class="relative flex p-1 group border-(--ui-color-divider-vibrant-accent-more) w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">

test/components/__snapshots__/Tabs.spec.ts.snap

@@ -200,6 +200,22 @@ exports[`Tabs > renders with defaultValue correctly 1`] = `
 </div>"
 `;
 
+exports[`Tabs > renders with item color correctly 1`] = `
+"<div dir="ltr" data-orientation="horizontal" data-slot="root" class="style-outline-accent-2 flex items-center gap-2 flex-col">
+  <div data-slot="list" class="relative flex p-1 group border-(--ui-color-divider-vibrant-accent-more) w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">
+    <!--v-if--><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-color-design-plain-na-content) hover:data-[state=inactive]:not-disabled:text-(--ui-color-design-selection-content) font-(--ui-font-weight-medium) cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 transition-colors rounded-(--ui-border-radius-md) focus:outline-none justify-center px-3 py-1.5 text-(length:--ui-font-size-md)/[normal] gap-1.5 focus-visible:ring-1 focus-visible:ring-inset data-[state=active]:text-(--b24ui-color) focus-visible:ring-(--ui-color-design-selection-content)" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" data-active="" id="reka-tabs-v-0-0-0-trigger-0" role="tab" type="button" aria-selected="true" data-state="active" aria-controls="reka-tabs-v-0-0-0-content-0"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="">Engineer</span>
+      <!--v-if-->
+    </button><button data-slot="trigger" class="group relative inline-flex items-center min-w-0 data-[state=inactive]:text-(--ui-color-design-plain-na-content) hover:data-[state=inactive]:not-disabled:text-(--ui-color-design-selection-content) font-(--ui-font-weight-medium) cursor-pointer disabled:cursor-not-allowed disabled:opacity-30 transition-colors rounded-(--ui-border-radius-md) focus:outline-none justify-center px-3 py-1.5 text-(length:--ui-font-size-md)/[normal] gap-1.5 focus-visible:ring-1 focus-visible:ring-inset data-[state=active]:text-(--b24ui-color) focus-visible:ring-(--ui-color-design-selection-content)" data-reka-collection-item="" tabindex="-1" data-orientation="horizontal" id="reka-tabs-v-0-0-0-trigger-1" role="tab" type="button" aria-selected="false" data-state="inactive" aria-controls="reka-tabs-v-0-0-0-content-1"><span data-slot="root" class="air-secondary-accent inline-flex items-center justify-center select-none rounded-full align-middle bg-(--b24ui-background) ring ring-(--b24ui-border-color) style-filled-success size-5 text-(length:--ui-font-size-4xs)/(--ui-font-line-height-reset) font-(--ui-font-weight-regular) shrink-0"><img src="https://github.com/bitrix24.png" width="20" height="20" data-slot="image" class="h-full w-full rounded-[inherit] object-cover"></span><span data-slot="label" class="">Designer</span>
+      <!--v-if-->
+    </button>
+  </div>
+  <div id="reka-tabs-v-0-0-0-content-0" role="tabpanel" data-state="active" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-0" tabindex="0" style="animation-duration: 0s;" data-slot="content" class="focus:outline-none w-full">Engineer content</div>
+  <div id="reka-tabs-v-0-0-0-content-1" role="tabpanel" data-state="inactive" data-orientation="horizontal" aria-labelledby="reka-tabs-v-0-0-0-trigger-1" hidden="" tabindex="0" data-slot="content" class="focus:outline-none w-full">
+    <!--v-if-->
+  </div>
+</div>"
+`;
+
 exports[`Tabs > renders with items correctly 1`] = `
 "<div dir="ltr" data-orientation="horizontal" data-slot="root" class="style-outline-accent-2 flex items-center gap-2 flex-col">
   <div data-slot="list" class="relative flex p-1 group border-(--ui-color-divider-vibrant-accent-more) w-full border-b -mb-px" tabindex="0" data-orientation="horizontal" dir="ltr" style="outline-color: none; outline-style: none; outline-width: initial;" role="tablist" aria-orientation="horizontal">