From c81d203822c2111ee1f91dfd64fc3167e0d195cc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 7 May 2026 18:45:27 +0000
Subject: [PATCH 1/3] feat(DescriptionList): render description as link via
 item.to

Add optional 'to' (and 'target') fields to DescriptionListItem so
consumers can turn a value into a B24Link without registering a custom
slot. When 'slot' is set on an item the link wrapping is skipped, so
existing custom-rendered items keep their previous behaviour.

https://claude.ai/code/session_013gYN6XWQ18LRJdDsatDpf7
---
 .../DescriptionListLinkExample.vue            | 25 +++++++++++++++
 .../docs/2.components/description-list.md     | 11 +++++++
 .../app/pages/components/description-list.vue | 31 ++++++++++++++++++-
 .../app/pages/components/description-list.vue | 29 +++++++++++++++++
 src/runtime/components/DescriptionList.vue    | 18 ++++++++++-
 5 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue

diff --git a/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue b/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue
new file mode 100644
index 000000000..72df7a7b3
--- /dev/null
+++ b/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt'
+
+const items: DescriptionListItem[] = [
+  {
+    label: 'Account manager',
+    description: 'Sample owner',
+    to: '/users/owner'
+  },
+  {
+    label: 'External profile',
+    description: 'View on partner portal',
+    to: 'https://example.com',
+    target: '_blank'
+  },
+  {
+    label: 'Created',
+    description: 'Oct 6, 2024 08:37'
+  }
+]
+</script>
+
+<template>
+  <B24DescriptionList :items="items" size="sm" />
+</template>
diff --git a/docs/content/docs/2.components/description-list.md b/docs/content/docs/2.components/description-list.md
index 9d222d249..574cb5c1a 100644
--- a/docs/content/docs/2.components/description-list.md
+++ b/docs/content/docs/2.components/description-list.md
@@ -231,6 +231,17 @@ name: 'description-list-custom-slot-example'
 ---
 ::
 
+### With link in items
+
+Use the `to` property on an item to render the description as a [Link](/docs/components/link/). Pair it with `target: '_blank'` for external destinations. Items that set their own `slot` are not affected.
+
+::component-example
+---
+collapse: true
+name: 'description-list-link-example'
+---
+::
+
 ## API
 
 ### Props
diff --git a/playgrounds/demo/app/pages/components/description-list.vue b/playgrounds/demo/app/pages/components/description-list.vue
index 8bbf29b84..83d82ed94 100644
--- a/playgrounds/demo/app/pages/components/description-list.vue
+++ b/playgrounds/demo/app/pages/components/description-list.vue
@@ -120,7 +120,7 @@ const itemsIcons: DescriptionListItem[] = [
     label: 'Line 1.1',
     description: 'Description 1.1',
     avatar: {
-      src: '/b24ui/demo/avatar/employee.png'
+      src: '/avatar/employee.png'
     }
   },
   {
@@ -141,6 +141,24 @@ const itemsIcons: DescriptionListItem[] = [
   }
 ]
 
+const itemsLink: DescriptionListItem[] = [
+  {
+    label: 'Account manager',
+    description: 'Sample owner',
+    to: '/users/owner'
+  },
+  {
+    label: 'External profile',
+    description: 'View on partner portal',
+    to: 'https://example.com',
+    target: '_blank'
+  },
+  {
+    label: 'Created',
+    description: 'Oct 6, 2024 08:37'
+  }
+]
+
 const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [
   {
     label: 'Amount',
@@ -198,6 +216,17 @@ const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [
       </div>
     </ExampleCard>
 
+    <ExampleCard title="link" :use-bg="isUseBg" class="sm:col-span-2">
+      <B24Separator class="my-3" type="dotted" />
+      <div class="mb-4 flex flex-wrap flex-col items-start justify-start gap-4">
+        <B24DescriptionList
+          legend="With link in items"
+          text="Use item.to to render the description as a B24Link."
+          :items="itemsLink"
+        />
+      </div>
+    </ExampleCard>
+
     <ExampleCard title="actions" :use-bg="isUseBg" class="sm:col-span-2">
       <B24Separator class="my-3" type="dotted" />
       <div class="mb-4 flex flex-wrap flex-col items-start justify-start gap-4">
diff --git a/playgrounds/nuxt/app/pages/components/description-list.vue b/playgrounds/nuxt/app/pages/components/description-list.vue
index 97940d5c2..83d82ed94 100644
--- a/playgrounds/nuxt/app/pages/components/description-list.vue
+++ b/playgrounds/nuxt/app/pages/components/description-list.vue
@@ -141,6 +141,24 @@ const itemsIcons: DescriptionListItem[] = [
   }
 ]
 
+const itemsLink: DescriptionListItem[] = [
+  {
+    label: 'Account manager',
+    description: 'Sample owner',
+    to: '/users/owner'
+  },
+  {
+    label: 'External profile',
+    description: 'View on partner portal',
+    to: 'https://example.com',
+    target: '_blank'
+  },
+  {
+    label: 'Created',
+    description: 'Oct 6, 2024 08:37'
+  }
+]
+
 const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [
   {
     label: 'Amount',
@@ -198,6 +216,17 @@ const itemsCustom: (DescriptionListItem & { value?: Date | string })[] = [
       </div>
     </ExampleCard>
 
+    <ExampleCard title="link" :use-bg="isUseBg" class="sm:col-span-2">
+      <B24Separator class="my-3" type="dotted" />
+      <div class="mb-4 flex flex-wrap flex-col items-start justify-start gap-4">
+        <B24DescriptionList
+          legend="With link in items"
+          text="Use item.to to render the description as a B24Link."
+          :items="itemsLink"
+        />
+      </div>
+    </ExampleCard>
+
     <ExampleCard title="actions" :use-bg="isUseBg" class="sm:col-span-2">
       <B24Separator class="my-3" type="dotted" />
       <div class="mb-4 flex flex-wrap flex-col items-start justify-start gap-4">
diff --git a/src/runtime/components/DescriptionList.vue b/src/runtime/components/DescriptionList.vue
index c449eb2f4..0631979d7 100644
--- a/src/runtime/components/DescriptionList.vue
+++ b/src/runtime/components/DescriptionList.vue
@@ -1,6 +1,7 @@
 <script lang="ts">
 import type { VNode } from 'vue'
 import type { AppConfig } from '@nuxt/schema'
+import type { RouteLocationRaw } from 'vue-router'
 import theme from '#build/b24ui/description-list'
 import type { IconComponent } from '../types/icons'
 import type { AvatarProps } from './Avatar.vue'
@@ -20,6 +21,15 @@ export interface DescriptionListItem {
   avatar?: AvatarProps
   slot?: string
   description?: string
+  /**
+   * Render the description as a link. Accepts any value supported by `B24Link` `to`.
+   * Ignored when `slot` is set, since the consumer is rendering the description manually.
+   */
+  to?: RouteLocationRaw | string
+  /**
+   * Forwarded to `B24Link` when `to` is set.
+   */
+  target?: '_blank' | '_parent' | '_self' | '_top' | (string & {}) | null
   /**
    * The orientation between the content and the actions.
    * @defaultValue 'vertical'
@@ -83,6 +93,7 @@ import { get } from '../utils'
 import { tv } from '../utils/tv'
 import B24Avatar from './Avatar.vue'
 import B24Button from './Button.vue'
+import B24Link from './Link.vue'
 
 const _props = withDefaults(defineProps<DescriptionListProps<T>>(), {
   labelKey: 'label',
@@ -233,7 +244,12 @@ const normalizedItems = computed(() => {
               })"
             >
               <slot name="description" :item="item" :index="index" :b24ui="b24ui">
-                {{ item.description }}
+                <B24Link v-if="item.to" :to="item.to" :target="item.target">
+                  {{ item.description }}
+                </B24Link>
+                <template v-else>
+                  {{ item.description }}
+                </template>
               </slot>
             </span>
             <span

From bee856ed9ac05441c3e9192cfc529d429a9f5e7f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 7 May 2026 18:46:07 +0000
Subject: [PATCH 2/3] docs(DescriptionList): list to/target fields in usage
 bullets

https://claude.ai/code/session_013gYN6XWQ18LRJdDsatDpf7
---
 docs/content/docs/2.components/description-list.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/content/docs/2.components/description-list.md b/docs/content/docs/2.components/description-list.md
index 574cb5c1a..d876e39e7 100644
--- a/docs/content/docs/2.components/description-list.md
+++ b/docs/content/docs/2.components/description-list.md
@@ -22,6 +22,8 @@ Use the `items` prop as an array of objects to control the value of the Descript
 - [`actions?: ButtonProps[]`{lang="ts-type"}](#with-actions-in-items)
 - [`orientation?: "horizontal" | "vertical"`{lang="ts-type"}](#with-actions-in-items)
 - [`slot?: string`{lang="ts-type"}](#with-custom-slot)
+- [`to?: RouteLocationRaw | string`{lang="ts-type"}](#with-link-in-items)
+- [`target?: "_blank" | "_self" | "_parent" | "_top"`{lang="ts-type"}](#with-link-in-items)
 - `class?: any`{lang="ts-type"}
 - `b24ui?: { labelWrapper?: ClassNameValue, icon?: ClassNameValue, avatar?: ClassNameValue, label?: ClassNameValue, descriptionWrapper?: ClassNameValue, description?: ClassNameValue, actions?: ClassNameValue }`{lang="ts-type"}
 

From 9cd904b440597488d4f13d5fa9845e4524904da3 Mon Sep 17 00:00:00 2001
From: Shevchik Igor <noreply@anthropic.com>
Date: Mon, 24 Aug 2026 05:29:51 +0000
Subject: [PATCH 3/3] test(DescriptionList): cover the description-as-link path
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two render cases and two behaviour tests for `item.to` / `item.target`. Each
fails against the pre-feature component — verified by reverting DescriptionList.vue
with the tests kept: all four go red, plus the two render snapshots.
---
 .../DescriptionListLinkExample.vue            |  8 ++---
 test/components/DescriptionList.spec.ts       | 25 +++++++++++++++
 .../DescriptionList-vue.spec.ts.snap          | 32 +++++++++++++++++++
 .../DescriptionList.spec.ts.snap              | 32 +++++++++++++++++++
 4 files changed, 93 insertions(+), 4 deletions(-)

diff --git a/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue b/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue
index 72df7a7b3..1173c6561 100644
--- a/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue
+++ b/docs/app/components/content/examples/description-list/DescriptionListLinkExample.vue
@@ -3,14 +3,14 @@ import type { DescriptionListItem } from '@bitrix24/b24ui-nuxt'
 
 const items: DescriptionListItem[] = [
   {
-    label: 'Account manager',
-    description: 'Sample owner',
-    to: '/users/owner'
+    label: 'Documentation',
+    description: 'Getting started guide',
+    to: '/docs/getting-started'
   },
   {
     label: 'External profile',
     description: 'View on partner portal',
-    to: 'https://example.com',
+    to: 'https://bitrix24.com',
     target: '_blank'
   },
   {
diff --git a/test/components/DescriptionList.spec.ts b/test/components/DescriptionList.spec.ts
index a7d64f2da..f9b78ec12 100644
--- a/test/components/DescriptionList.spec.ts
+++ b/test/components/DescriptionList.spec.ts
@@ -53,6 +53,8 @@ describe('DescriptionList', () => {
     ['with class', { props: { items: baseItems, class: 'custom-class' } }],
     ['with b24ui', { props: { items: baseItems, b24ui: { text: 'font-(--ui-font-weight-bold)' } } }],
     ['with empty items', { props: { items: [] } }],
+    ['with link description', { props: { items: [createItem({ to: '/docs', description: 'Documentation' })] } }],
+    ['with link description and target', { props: { items: [createItem({ to: 'https://bitrix24.com', target: '_blank', description: 'Bitrix24' })] } }],
     // Custom keys
     ['with labelKey and descriptionKey', {
       props: {
@@ -85,6 +87,29 @@ describe('DescriptionList', () => {
   ])
 
   describe('accessibility', () => {
+    it('renders the description as a link only when `to` is set', async () => {
+      const plain = await mountSuspended(DescriptionList, {
+        props: { items: [createItem({ description: 'Documentation' })] }
+      })
+      expect(plain.find('[data-slot="text"] a').exists()).toBe(false)
+      expect(plain.text()).toContain('Documentation')
+
+      const linked = await mountSuspended(DescriptionList, {
+        props: { items: [createItem({ to: '/docs', description: 'Documentation' })] }
+      })
+      const link = linked.find('a')
+      expect(link.exists()).toBe(true)
+      expect(link.attributes('href')).toBe('/docs')
+      expect(link.text()).toBe('Documentation')
+    })
+
+    it('forwards `target` to the link', async () => {
+      const wrapper = await mountSuspended(DescriptionList, {
+        props: { items: [createItem({ to: 'https://bitrix24.com', target: '_blank', description: 'Bitrix24' })] }
+      })
+      expect(wrapper.find('a').attributes('target')).toBe('_blank')
+    })
+
     it('passes accessibility tests with basic items', async () => {
       const wrapper = await mountSuspended(DescriptionList, {
         props: {
diff --git a/test/components/__snapshots__/DescriptionList-vue.spec.ts.snap b/test/components/__snapshots__/DescriptionList-vue.spec.ts.snap
index f0f3fee21..a27c5f4ac 100644
--- a/test/components/__snapshots__/DescriptionList-vue.spec.ts.snap
+++ b/test/components/__snapshots__/DescriptionList-vue.spec.ts.snap
@@ -362,6 +362,38 @@ exports[`DescriptionList > renders with legend correctly 1`] = `
 </div>"
 `;
 
+exports[`DescriptionList > renders with link description and target correctly 1`] = `
+"<div data-slot="root" class="w-full shrink-0">
+  <!--v-if-->
+  <!--v-if-->
+  <dl data-slot="container" class="grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto] mt-3 text-(length:--ui-font-size-lg)">
+    <dt data-slot="labelWrapper" class="col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-(--ui-color-divider-vibrant-default) sm:border-(--ui-color-divider-vibrant-default) text-description pt-3 sm:py-3">
+      <!--v-if--><span data-slot="label" class="">Test Item</span>
+    </dt>
+    <dd data-orientation="vertical" data-slot="descriptionWrapper" class="sm:border-t sm:[&amp;:nth-child(2)]:border-none sm:border-(--ui-color-divider-vibrant-default) text-label pb-3 pt-1 sm:py-3"><span data-slot="description" class=""><a href="https://bitrix24.com" rel="noopener noreferrer" target="_blank" class="cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline">Bitrix24</a></span>
+      <!--v-if-->
+    </dd>
+  </dl>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`DescriptionList > renders with link description correctly 1`] = `
+"<div data-slot="root" class="w-full shrink-0">
+  <!--v-if-->
+  <!--v-if-->
+  <dl data-slot="container" class="grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto] mt-3 text-(length:--ui-font-size-lg)">
+    <dt data-slot="labelWrapper" class="col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-(--ui-color-divider-vibrant-default) sm:border-(--ui-color-divider-vibrant-default) text-description pt-3 sm:py-3">
+      <!--v-if--><span data-slot="label" class="">Test Item</span>
+    </dt>
+    <dd data-orientation="vertical" data-slot="descriptionWrapper" class="sm:border-t sm:[&amp;:nth-child(2)]:border-none sm:border-(--ui-color-divider-vibrant-default) text-label pb-3 pt-1 sm:py-3"><span data-slot="description" class=""><a href="/docs" class="cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline" isaction="false">Documentation</a></span>
+      <!--v-if-->
+    </dd>
+  </dl>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`DescriptionList > renders with multiple actions correctly 1`] = `
 "<div data-slot="root" class="w-full shrink-0">
   <!--v-if-->
diff --git a/test/components/__snapshots__/DescriptionList.spec.ts.snap b/test/components/__snapshots__/DescriptionList.spec.ts.snap
index f0f3fee21..b38048b87 100644
--- a/test/components/__snapshots__/DescriptionList.spec.ts.snap
+++ b/test/components/__snapshots__/DescriptionList.spec.ts.snap
@@ -362,6 +362,38 @@ exports[`DescriptionList > renders with legend correctly 1`] = `
 </div>"
 `;
 
+exports[`DescriptionList > renders with link description and target correctly 1`] = `
+"<div data-slot="root" class="w-full shrink-0">
+  <!--v-if-->
+  <!--v-if-->
+  <dl data-slot="container" class="grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto] mt-3 text-(length:--ui-font-size-lg)">
+    <dt data-slot="labelWrapper" class="col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-(--ui-color-divider-vibrant-default) sm:border-(--ui-color-divider-vibrant-default) text-description pt-3 sm:py-3">
+      <!--v-if--><span data-slot="label" class="">Test Item</span>
+    </dt>
+    <dd data-orientation="vertical" data-slot="descriptionWrapper" class="sm:border-t sm:[&amp;:nth-child(2)]:border-none sm:border-(--ui-color-divider-vibrant-default) text-label pb-3 pt-1 sm:py-3"><span data-slot="description" class=""><a href="https://bitrix24.com" rel="noopener noreferrer" target="_blank" class="cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline">Bitrix24</a></span>
+      <!--v-if-->
+    </dd>
+  </dl>
+  <!--v-if-->
+</div>"
+`;
+
+exports[`DescriptionList > renders with link description correctly 1`] = `
+"<div data-slot="root" class="w-full shrink-0">
+  <!--v-if-->
+  <!--v-if-->
+  <dl data-slot="container" class="grid grid-cols-1 sm:grid-cols-[min(50%,theme(spacing.80))_auto] mt-3 text-(length:--ui-font-size-lg)">
+    <dt data-slot="labelWrapper" class="col-start-1 border-t first:border-none sm:border-t flex flex-nowrap flex-row items-center justify-start gap-1.5 border-(--ui-color-divider-vibrant-default) sm:border-(--ui-color-divider-vibrant-default) text-description pt-3 sm:py-3">
+      <!--v-if--><span data-slot="label" class="">Test Item</span>
+    </dt>
+    <dd data-orientation="vertical" data-slot="descriptionWrapper" class="sm:border-t sm:[&amp;:nth-child(2)]:border-none sm:border-(--ui-color-divider-vibrant-default) text-label pb-3 pt-1 sm:py-3"><span data-slot="description" class=""><a href="/docs" class="cursor-pointer focus-visible:outline-(--ui-color-accent-main-primary) focus-visible:outline-1 focus-visible:rounded-[4px] text-start text-(--ui-color-design-selection-content) underline-offset-2 hover:text-(--ui-color-accent-main-primary-alt-2) hover:underline">Documentation</a></span>
+      <!--v-if-->
+    </dd>
+  </dl>
+  <!--v-if-->
+</div>"
+`;
+
 exports[`DescriptionList > renders with multiple actions correctly 1`] = `
 "<div data-slot="root" class="w-full shrink-0">
   <!--v-if-->