@central-design-system/skills 4.0.0-alpha.6

package/skills/cds-builder/references/components/cds-layout/examples.md

@@ -0,0 +1,431 @@
+# CdsLayout — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+The frame of the application: `CdsLayout` places the header, the side drawers, the content and the footer, measures their sizes and takes the scrolling over. The parts of the layout know about each other — the content never slides under the header and never hides behind a drawer.
+
+## The view scheme
+
+The `view` prop describes the layout with three strings: top, middle, bottom. The letters are the parts of the layout: `h` — the header, `f` — the footer, `l` and `r` — the left and the right drawer, `p` — the page. The corner letters of the top and the bottom string settle the argument over the corners: `hhh` gives the whole width to the header, `lhh` gives the top left corner to the drawer.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsDrawer,
+  CdsFooter,
+  CdsHeader,
+  CdsLayout,
+  CdsList,
+  CdsListItem,
+  CdsMain,
+  CdsPage,
+  CdsRadio,
+  CdsRadioGroup,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const view = ref('hhh lpr fff');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="view" direction="horizontal" hide-details>
+      <CdsRadio value="hhh lpr fff" label="hhh lpr fff" />
+      <CdsRadio value="lhh lpr lff" label="lhh lpr lff" />
+      <CdsRadio value="lhh lpr fff" label="lhh lpr fff" />
+    </CdsRadioGroup>
+
+    <div class="h-[520px]">
+      <CdsLayout container :view="view">
+        <CdsHeader bordered>
+          <CdsToolbar>
+            <CdsToolbarTitle>Заголовок приложения</CdsToolbarTitle>
+          </CdsToolbar>
+        </CdsHeader>
+
+        <CdsDrawer permanent border>
+          <CdsList>
+            <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" active />
+            <CdsListItem title="Договоры" href="#" prepend-icon="doc" />
+            <CdsListItem title="Контрагенты" href="#" prepend-icon="company" />
+          </CdsList>
+        </CdsDrawer>
+
+        <CdsMain>
+          <CdsPage padding>
+            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+              Схема <code>{{ view }}</code>
+            </div>
+          </CdsPage>
+        </CdsMain>
+
+        <CdsFooter bordered :height="40">
+          <div class="flex h-[40px] items-center px-4 text-content-secondary">Подвал</div>
+        </CdsFooter>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Container mode
+
+By default the layout takes the whole page and controls its scrolling. The `container` prop locks it inside its parent: the layout gets its own scroll area, and the header and the footer keep their places inside it. This is a handy way to show the application in a preview, to embed it into somebody else's page or to build a working area of a fixed height.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsFooter,
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[520px] overflow-hidden rounded-200 border border-line-primary">
+    <CdsLayout container>
+      <CdsHeader elevated>
+        <CdsToolbar>
+          <CdsToolbarTitle>Шапка остаётся на месте</CdsToolbarTitle>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="flex flex-col gap-2">
+            <div v-for="n in 12" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+              Блок {{ n }} — прокрутите область, страница за ней не двигается
+            </div>
+          </div>
+        </CdsPage>
+      </CdsMain>
+
+      <CdsFooter elevated :height="40">
+        <div class="flex h-[40px] items-center px-4 text-content-secondary">Подвал</div>
+      </CdsFooter>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Events
+
+The layout watches its scroll area and shares what it sees: `@scroll` gives the position, the direction and the turning point, `@resize` gives the new sizes, `@scroll-height` gives the height of the content. The floating header and footer are built on these events, but you can use them for your own logic too — to load the next page of a list, for example.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLayout, CdsMain, CdsPage } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const top = ref(0);
+const direction = ref<'up' | 'down' | 'left' | 'right'>('down');
+const size = ref({ width: 0, height: 0 });
+</script>
+
+<template>
+  <div class="h-[520px]">
+    <CdsLayout
+      container
+      @scroll="
+        top = $event.position.top;
+        direction = $event.direction;
+      "
+      @resize="size = $event"
+    >
+      <CdsMain>
+        <CdsPage padding>
+          <div class="mb-2 rounded-200 bg-surface-secondary p-4 text-content-primary">
+            Прокручено: {{ Math.round(top) }} px · направление: {{ direction === 'down' ? 'вниз' : 'вверх' }} · ширина
+            содержимого: {{ Math.round(size.width) }} px
+          </div>
+          <div class="flex flex-col gap-2">
+            <div v-for="n in 15" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-secondary">
+              Блок {{ n }}
+            </div>
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Application shell
+
+The typical set: a header with `CdsToolbar`, permanent navigation in `CdsDrawer`, `CdsMain` → `CdsPage` with the content and a footer. A button in the header toggles `minified` — the drawer shrinks to icons and gives the width to the content, and on hover it expands back.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsAvatar,
+  CdsButton,
+  CdsCard,
+  CdsCardActions,
+  CdsCardSubtitle,
+  CdsCardText,
+  CdsCardTitle,
+  CdsDrawer,
+  CdsFooter,
+  CdsFunctionalButton,
+  CdsHeader,
+  CdsLayout,
+  CdsLink,
+  CdsList,
+  CdsListGroup,
+  CdsListItem,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const minified = ref(false);
+const stats = [
+  { title: 'Активные закупки', value: '128', hint: '+12 за неделю' },
+  { title: 'Заявки на рассмотрении', value: '34', hint: '8 требуют действия' },
+  { title: 'Поставщики', value: '512', hint: '+5 новых' },
+  { title: 'Сообщения', value: '17', hint: '3 непрочитанных' }
+];
+</script>
+
+<template>
+  <div class="h-[640px]">
+    <CdsLayout container>
+      <CdsHeader bordered elevated :height="64">
+        <CdsToolbar>
+          <CdsFunctionalButton icon="menu" class="mr-2" aria-label="Свернуть навигацию" @click="minified = !minified" />
+          <CdsAvatar icon="company" class="mr-2" />
+          <CdsToolbarTitle>Портал закупок</CdsToolbarTitle>
+
+          <CdsFunctionalButton icon="search" aria-label="Поиск" />
+          <CdsFunctionalButton icon="notification" aria-label="Уведомления" />
+          <CdsAvatar icon="user-avatar" class="ml-2" />
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsDrawer permanent border :minified="minified">
+        <CdsList>
+          <CdsListItem title="Дашборд" href="#" prepend-icon="category" active />
+          <CdsListItem title="Закупки" href="#" prepend-icon="shopping-cart" />
+          <CdsListItem title="Заявки" href="#" prepend-icon="doc" />
+          <CdsListGroup>
+            <template #activator="{ props }">
+              <CdsListItem title="Контрагенты" prepend-icon="company" v-bind="props" />
+            </template>
+            <CdsListItem title="Поставщики" href="#" prepend-icon="user-group" />
+            <CdsListItem title="Заказчики" href="#" prepend-icon="user-avatar" />
+          </CdsListGroup>
+          <CdsListItem title="Аналитика" href="#" prepend-icon="data-cards" />
+          <CdsListItem title="Настройки" href="#" prepend-icon="settings" />
+        </CdsList>
+      </CdsDrawer>
+
+      <CdsMain>
+        <CdsPage padding>
+          <CdsToolbar class="mb-4 gap-4 rounded-200">
+            <CdsToolbarTitle class="text-xl font-bold">Дашборд</CdsToolbarTitle>
+            <CdsButton appearance="tertiary" prepend-icon="filters">Фильтры</CdsButton>
+            <CdsButton prepend-icon="add">Создать закупку</CdsButton>
+          </CdsToolbar>
+
+          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+            <CdsCard v-for="stat in stats" :key="stat.title" class="p-4">
+              <CdsCardSubtitle>{{ stat.title }}</CdsCardSubtitle>
+              <CdsCardTitle class="text-2xl font-bold">{{ stat.value }}</CdsCardTitle>
+              <CdsCardText class="text-content-secondary">{{ stat.hint }}</CdsCardText>
+            </CdsCard>
+          </div>
+
+          <CdsCard class="mt-4 p-4">
+            <CdsCardTitle>Последние закупки</CdsCardTitle>
+            <CdsCardText>
+              Прокрутите страницу, чтобы увидеть, как шапка и подвал остаются на месте, а содержимое страницы скроллится
+              внутри макета.
+            </CdsCardText>
+            <CdsList>
+              <CdsListItem
+                v-for="n in 12"
+                :key="n"
+                :title="'Закупка №' + (1000 + n)"
+                :subtitle="'Поставщик ООО «Компания ' + n + '»'"
+                href="#"
+                prepend-icon="shopping-cart"
+                append-icon="chevron-right"
+              />
+            </CdsList>
+            <CdsCardActions class="justify-end">
+              <CdsButton appearance="tertiary">Показать все</CdsButton>
+            </CdsCardActions>
+          </CdsCard>
+        </CdsPage>
+      </CdsMain>
+
+      <CdsFooter bordered :height="48">
+        <div class="flex h-[48px] items-center justify-between px-4">
+          <span class="text-content-secondary">© 2026 Портал закупок</span>
+          <span class="flex items-center gap-4">
+            <CdsLink href="#">Помощь</CdsLink>
+            <CdsLink href="#">Конфиденциальность</CdsLink>
+          </span>
+        </div>
+      </CdsFooter>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## A header that hides on scroll
+
+On long lists the space is worth more than the navigation. The `reveal` prop of the header and the footer hides them when scrolling down and brings them back when scrolling up; `reveal-offset` sets the zone near the top of the list where the header stays in place.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsFooter,
+  CdsHeader,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const revealed = ref(true);
+</script>
+
+<template>
+  <div class="h-[500px]">
+    <CdsLayout container>
+      <CdsHeader reveal elevated :reveal-offset="80" @reveal="revealed = $event">
+        <CdsToolbar>
+          <CdsToolbarTitle>Каталог поставщиков</CdsToolbarTitle>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="mb-2 text-content-secondary">
+            Шапка {{ revealed ? 'видна' : 'скрыта' }} — прокрутите вниз, чтобы освободить место списку, и вверх, чтобы
+            вернуть её.
+          </div>
+          <div class="flex flex-col gap-2">
+            <div v-for="n in 20" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+              Поставщик №{{ n }}
+            </div>
+          </div>
+        </CdsPage>
+      </CdsMain>
+
+      <CdsFooter reveal elevated :height="40">
+        <div class="flex h-[40px] items-center px-4 text-content-secondary">Найдено 20 поставщиков</div>
+      </CdsFooter>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Working area with filters
+
+The `lhh lpr fff` scheme gives the top left corner to the navigation — it starts from the very top, and the header takes the remaining width. The right drawer with `temporary` slides over the content on a button click and closes on a click on the overlay, so it takes no place in the layout.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsCheckbox,
+  CdsDrawer,
+  CdsHeader,
+  CdsLayout,
+  CdsList,
+  CdsListItem,
+  CdsMain,
+  CdsPage,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const filters = ref(false);
+const statuses = ref<string[]>(['active']);
+</script>
+
+<template>
+  <div class="h-[520px]">
+    <CdsLayout container view="lhh lpr fff">
+      <CdsHeader bordered>
+        <CdsToolbar>
+          <CdsToolbarTitle>Закупки</CdsToolbarTitle>
+          <CdsButton appearance="tertiary" prepend-icon="filters" @click="filters = !filters">Фильтры</CdsButton>
+        </CdsToolbar>
+      </CdsHeader>
+
+      <CdsDrawer permanent border>
+        <CdsList>
+          <CdsListItem title="Все закупки" href="#" prepend-icon="shopping-cart" active />
+          <CdsListItem title="Избранное" href="#" prepend-icon="star" />
+          <CdsListItem title="Архив" href="#" prepend-icon="archive" />
+        </CdsList>
+      </CdsDrawer>
+
+      <CdsDrawer v-model="filters" right temporary border>
+        <template #prepend>
+          <div class="font-bold text-content-primary">Фильтры</div>
+        </template>
+
+        <div class="flex flex-col gap-1">
+          <CdsCheckbox v-model="statuses" value="active" label="Активные" hide-details />
+          <CdsCheckbox v-model="statuses" value="draft" label="Черновики" hide-details />
+          <CdsCheckbox v-model="statuses" value="done" label="Завершённые" hide-details />
+        </div>
+
+        <template #append>
+          <CdsButton block @click="filters = false">Применить</CdsButton>
+        </template>
+      </CdsDrawer>
+
+      <CdsMain>
+        <CdsPage padding>
+          <div class="flex flex-col gap-2">
+            <div v-for="n in 8" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+              Закупка №{{ 2400 + n }}
+            </div>
+          </div>
+        </CdsPage>
+      </CdsMain>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## LayoutBuilder
+
+Конструктор макета: шаблоны разметки, схема `view`, настройки частей и живое
+превью с экспортом кода. Тот же компонент рендерит страница документации
+Конструктор макета.
+
+**Template:**
+
+```html
+<div style="padding: 16px"><LayoutBuilder /></div>
+```

package/skills/cds-builder/references/components/cds-layout/guidelines.md

@@ -0,0 +1,9 @@
+# CdsLayout — guidelines
+
+> Extracted from `docs/demos/Guidelines.vue` by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md).
+
+| ✅ Do | ❌ Don't |
+| --- | --- |
+| The content lives in CdsMain → CdsPage: the layout reserves the space for the header and the drawers itself. | Content placed directly inside CdsLayout slides under the header — nobody calculates the paddings. |
+| The sections of the application belong in the side drawer: the list grows downwards and stays readable. | With every section in the header, they shrink as their number grows and stop fitting. |

package/skills/cds-builder/references/components/cds-layout/tokens.md

@@ -0,0 +1,12 @@
+# CdsLayout — tokens (level 3)
+
+> Copy of the component's `styles/*.variables.scss`, taken by `bun run generate:skill`. Do not edit manually.
+> `--cds-*` are global level-2 tokens whose values come from the active theme: see [themes.md](../../tokens/themes.md).
+> Variables marked `!default` can be overridden at build time via SCSS.
+
+## _CdsLayout.variables.scss
+
+```scss
+$layout-background: rgb(var(--cds-color-page-primary)) !default;
+$layout-color: rgb(var(--cds-color-content-primary)) !default;
+```

package/skills/cds-builder/references/components/cds-link/api.md

@@ -0,0 +1,33 @@
+# CdsLink — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Guidelines: [guidelines.md](guidelines.md) · Tokens: [tokens.md](tokens.md)
+
+A link sends the user somewhere else: to a neighboring page of the application, to an external service or to an email address. Inside the application the path comes from the `to` prop and vue-router takes over the navigation; for outside destinations the address goes into `href`.
+
+## CdsLink
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `disabled` | `boolean \| undefined` | — | no | Disables the link: no navigation happens, aria-disabled and tabindex=-1 are set |
+| `exact` | `boolean \| undefined` | — | no | If true, the active state applies only on an exact route match |
+| `href` | `string \| undefined` | — | no | The `href` attribute of the link. When set, the component behaves as a regular link |
+| `replace` | `boolean \| undefined` | — | no | If true, navigation replaces the current history entry instead of pushing a new one |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `to` | `LinkTo \| undefined` | — | no | Target route or route location object for RouterLink. When set, the component behaves as a RouterLink |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `click` | `[e: MouseEvent]` | Click on the link |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Link content. Takes precedence over the text prop. |

package/skills/cds-builder/references/components/cds-link/examples.md

@@ -0,0 +1,195 @@
+# CdsLink — usage examples
+
+> Extracted from Storybook stories (`docs/*.stories.ts`) by `bun run generate:skill`. Do not edit manually.
+> The full component contract is in [api.md](api.md). `v-bind="args"` in templates refers to the props from the **Args** block of the corresponding example.
+
+A link sends the user somewhere else: to a neighboring page of the application, to an external service or to an email address. Inside the application the path comes from the `to` prop and vue-router takes over the navigation; for outside destinations the address goes into `href`.
+
+## Link text
+
+The `text` prop sets the label as a string, the `default` slot as arbitrary markup — text with an icon, for example. The slot wins over the prop.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsLink } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsLink href="#" text="Текст из пропа text" />
+
+    <CdsLink href="#">Контент из слота default</CdsLink>
+
+    <CdsLink href="#">
+      <CdsIcon icon="doc-download" :size="16" start />
+      Скачать спецификацию
+    </CdsLink>
+  </div>
+</template>
+```
+
+## Address
+
+The `href` prop renders a regular link. Attributes are written on the component just like on an `a` tag: `target="_blank"` opens the page in a new tab — mark such a link with an icon so that leaving the application does not come as a surprise. Visited links change color; anchors like `#section` stay as they are.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsLink } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <CdsLink href="https://www.b2b-center.ru" text="Открыть сайт b2b-center.ru" />
+
+    <CdsLink href="https://www.b2b-center.ru" target="_blank" rel="noopener">
+      Открыть в новой вкладке
+      <CdsIcon icon="external" :size="16" end />
+    </CdsLink>
+  </div>
+</template>
+```
+
+## Disabled link
+
+The `disabled` prop dims the color and removes the navigation: the component cancels the click, sets `aria-disabled` and takes the link out of the Tab order. Explain nearby why the navigation is unavailable — the gray state alone does not name the reason.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLink } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-4">
+    <CdsLink href="https://www.b2b-center.ru" text="Доступная ссылка" />
+
+    <CdsLink href="https://www.b2b-center.ru" disabled text="Недоступная ссылка" />
+  </div>
+</template>
+```
+
+## A link inside text
+
+Inside a paragraph the link covers exactly the phrase that names the destination. A `@click.prevent` handler keeps the user on the page and reveals the details in place, while `href="mailto:…"` opens the mail client.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLink } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const expanded = ref(false);
+</script>
+
+<template>
+  <div class="m-auto w-[420px] max-w-full">
+    <p class="m-0">
+      Заявка уходит на проверку сразу после отправки. Порядок рассмотрения описан в
+      <CdsLink href="#" text="регламенте закупок" @click.prevent="expanded = !expanded" />, а вопросы принимает
+      <CdsLink href="mailto:support@example.com" text="служба поддержки" />.
+    </p>
+
+    <p v-if="expanded" class="mt-3 mb-0">
+      Заявку проверяют три рабочих дня. Если данных не хватает, вы получите письмо с уточнениями и дополните заявку без
+      повторной подачи.
+    </p>
+  </div>
+</template>
+```
+
+## Result list
+
+The titles of the found documents are links: the user scans the list and opens the one they need. The text comes from the `text` prop, and the `click` handler shows the selected document without leaving the page.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsLink, CdsTextInput } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const documents = [
+  'Регламент закупок',
+  'Договор поставки № 114',
+  'Акт сверки за II квартал',
+  'Спецификация оборудования',
+  'Протокол разногласий'
+];
+
+const query = ref('');
+const opened = ref<string | null>(null);
+
+const results = computed(() =>
+  documents.filter((title) => title.toLowerCase().includes(query.value.trim().toLowerCase()))
+);
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] max-w-full flex-col gap-2">
+    <CdsTextInput v-model="query" label="Поиск по документам" placeholder="Введите название" clearable />
+
+    <ul class="m-0 flex list-none flex-col gap-1 p-0">
+      <li v-for="title in results" :key="title">
+        <CdsLink href="#" :text="title" @click.prevent="opened = title" />
+      </li>
+      <li v-if="!results.length">Ничего не нашлось — измените запрос.</li>
+    </ul>
+
+    <p v-if="opened" class="m-0">Открыт документ «{{ opened }}».</p>
+  </div>
+</template>
+```
+
+## Documents with restricted access
+
+The list shows all the documents of a procedure, but some of them are closed: `disabled` keeps their titles visible and blocks the navigation. The request access button lifts the restriction — the links come alive without reloading the list.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsLink } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const documents = [
+  { title: 'Извещение о закупке', restricted: false },
+  { title: 'Техническое задание', restricted: false },
+  { title: 'Смета проекта', restricted: true },
+  { title: 'Протокол комиссии', restricted: true }
+];
+
+const granted = ref(false);
+const requesting = ref(false);
+
+function requestAccess() {
+  requesting.value = true;
+
+  setTimeout(() => {
+    requesting.value = false;
+    granted.value = true;
+  }, 1000);
+}
+</script>
+
+<template>
+  <div class="m-auto flex w-[350px] max-w-full flex-col gap-2">
+    <ul class="m-0 flex list-none flex-col gap-1 p-0">
+      <li v-for="document in documents" :key="document.title">
+        <CdsLink href="#" :disabled="document.restricted && !granted" :text="document.title" @click.prevent />
+      </li>
+    </ul>
+
+    <template v-if="!granted">
+      <p class="m-0">Смета и протокол открыты только участникам процедуры.</p>
+
+      <CdsButton appearance="secondary" text="Запросить доступ" :loading="requesting" @click="requestAccess" />
+    </template>
+  </div>
+</template>
+```