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

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

@@ -0,0 +1,219 @@
+# CdsFooter — 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 footer of the application: a copyright notice and utility links on regular pages, an action bar on forms. The layout measures the height of the footer and reserves the space, so it never covers the last line of the content.
+
+## Separator
+
+The footer is pinned to the bottom edge and overlaps the content, so its border is worth marking: `bordered` draws a line, `elevated` casts a shadow upwards. The shadow matters more when a long list continues under the footer.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFooter, CdsLayout, CdsMain, CdsPage, CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const separator = ref('bordered');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="separator" direction="horizontal" hide-details>
+      <CdsRadio value="none" label="Без разделителя" />
+      <CdsRadio value="bordered" label="Граница" />
+      <CdsRadio value="elevated" label="Тень" />
+    </CdsRadioGroup>
+
+    <div class="h-[240px]">
+      <CdsLayout container>
+        <CdsMain>
+          <CdsPage padding>
+            <div class="flex flex-col gap-2">
+              <div v-for="n in 6" :key="n" class="rounded-200 bg-surface-secondary p-4 text-content-primary">
+                Блок {{ n }}
+              </div>
+            </div>
+          </CdsPage>
+        </CdsMain>
+
+        <CdsFooter :bordered="separator === 'bordered'" :elevated="separator === 'elevated'">
+          <div class="flex h-[48px] items-center px-4 text-content-secondary">© 2026 Портал закупок</div>
+        </CdsFooter>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Color
+
+The `bg-color` prop paints the background of the footer with a palette alias, `color` paints the text and the icons inside. If only the background is set, the text color is picked to be contrasting automatically.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFooter, CdsLayout, CdsMain, CdsPage, CdsRadio, CdsRadioGroup } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const bgColor = ref('default');
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <CdsRadioGroup v-model="bgColor" direction="horizontal" hide-details>
+      <CdsRadio value="default" label="Цвет темы" />
+      <CdsRadio value="neutral" label="neutral" />
+      <CdsRadio value="indigo" label="indigo" />
+      <CdsRadio value="teal" label="teal" />
+    </CdsRadioGroup>
+
+    <div class="h-[240px]">
+      <CdsLayout container>
+        <CdsMain>
+          <CdsPage padding>
+            <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
+          </CdsPage>
+        </CdsMain>
+
+        <CdsFooter :bg-color="bgColor === 'default' ? undefined : bgColor">
+          <div class="flex h-[48px] items-center px-4">© 2026 Портал закупок</div>
+        </CdsFooter>
+      </CdsLayout>
+    </div>
+  </div>
+</template>
+```
+
+## Floating mode
+
+The `reveal` prop hides the footer when scrolling down and brings it back when scrolling up. The `@reveal` event reports the change of visibility — to adjust a selection counter, for example. The `model-value` prop removes the footer entirely, and the layout gives its height back to the content.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFooter, CdsLayout, CdsMain, CdsPage } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const revealed = ref(true);
+</script>
+
+<template>
+  <div class="h-[320px]">
+    <CdsLayout container>
+      <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 @reveal="revealed = $event">
+        <div class="flex h-[48px] items-center px-4 text-content-secondary">Выбрано 0 из 20</div>
+      </CdsFooter>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Site footer
+
+The copyright on the left, the utility links on the right — the familiar layout people look for at the bottom of a page. The height comes from the content, and `height` tells the layout the expected value before the first measurement.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsFooter, CdsLayout, CdsLink, CdsMain, CdsPage } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="h-[280px]">
+    <CdsLayout container>
+      <CdsMain>
+        <CdsPage padding>
+          <div class="rounded-200 bg-surface-secondary p-4 text-content-primary">Содержимое страницы</div>
+        </CdsPage>
+      </CdsMain>
+
+      <CdsFooter bordered :height="56">
+        <div class="flex h-[56px] flex-wrap items-center justify-between gap-2 px-4">
+          <span class="text-content-secondary">© 2026 Портал закупок</span>
+          <span class="flex items-center gap-4">
+            <CdsLink href="#">Помощь</CdsLink>
+            <CdsLink href="#">Конфиденциальность</CdsLink>
+            <CdsLink href="#">Контакты</CdsLink>
+          </span>
+        </div>
+      </CdsFooter>
+    </CdsLayout>
+  </div>
+</template>
+```
+
+## Form action bar
+
+On a long form the "Cancel" and "Publish" buttons live in the footer: they are visible at any scroll position and need no reaching for. `CdsToolbarTitle` stretches and pushes the buttons to the right edge, and `elevated` separates the bar from the fields.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsFooter,
+  CdsForm,
+  CdsLayout,
+  CdsMain,
+  CdsPage,
+  CdsTextArea,
+  CdsTextInput,
+  CdsToolbar,
+  CdsToolbarTitle
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const saving = ref(false);
+
+function save() {
+  saving.value = true;
+  setTimeout(() => {
+    saving.value = false;
+  }, 1500);
+}
+</script>
+
+<template>
+  <div class="h-[360px]">
+    <CdsLayout container>
+      <CdsMain>
+        <CdsPage padding>
+          <CdsForm class="flex flex-col gap-2">
+            <CdsTextInput label="Название закупки" />
+            <CdsTextInput label="Заказчик" />
+            <CdsTextArea label="Описание" :rows="6" />
+            <CdsTextInput label="Контактное лицо" />
+            <CdsTextInput label="Телефон" />
+          </CdsForm>
+        </CdsPage>
+      </CdsMain>
+
+      <CdsFooter elevated :height="56">
+        <CdsToolbar class="h-[56px] gap-2">
+          <CdsToolbarTitle class="text-content-secondary">Черновик сохраняется автоматически</CdsToolbarTitle>
+          <CdsButton appearance="tertiary">Отмена</CdsButton>
+          <CdsButton :loading="saving" @click="save">Опубликовать</CdsButton>
+        </CdsToolbar>
+      </CdsFooter>
+    </CdsLayout>
+  </div>
+</template>
+```

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

@@ -0,0 +1,9 @@
+# CdsFooter — 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 footer is pinned to the bottom and keeps the form actions at hand at any scroll position. | Actions at the end of a long page have to be found by scrolling. |
+| The footer holds the utility links and the copyright: that is where people look for them. | Section navigation in the footer duplicates the side drawer and confuses the reader. |

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

@@ -0,0 +1,14 @@
+# CdsFooter — 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.
+
+## _CdsFooter.variables.scss
+
+```scss
+$footer-background: rgb(var(--cds-color-surface-elevated)) !default;
+$footer-color: rgb(var(--cds-color-content-primary)) !default;
+$footer-border-color: rgb(var(--cds-color-line-tertiary)) !default;
+$footer-border-size: var(--cds-border-100) !default;
+```

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

@@ -0,0 +1,48 @@
+# CdsForm — 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 form joins fields into one group: it collects their validation into a common status, intercepts the submission and can reset the values. CDS fields with the `rules` prop connect to the form automatically — with no registration and no extra code.
+
+## CdsForm
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `description` | `string \| undefined` | — | no | Description of the form. Rendered under the heading through `CdsDescription`. |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `firstFail` | `boolean \| undefined` | — | no | Stops the validation at the very first invalid field — the remaining fields are not checked |
+| `label` | `string \| undefined` | — | no | Heading of the form. Rendered above the content through `CdsDescription`. |
+| `modelValue` | `boolean \| null \| undefined` | `null` | no | Resulting validity of the form: `true` — every field passed the check, `false` — there are errors, `null` — the form has not been validated yet |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `validateOn` | `ValidateOn \| undefined` | `'input'` | no | When to run the validation of the form fields: on input, on blur or manually only |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `submit` | `[payload: SubmitEventPromise]` | Submission of the form. The event is a Promise with the validation result. |
+| `update:modelValue` | `[value: boolean \| null]` | The overall validity status of the form changed (v-model). |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `{ errors: FieldValidationResult[]; isDisabled: boolean \| null \| undefined; isReadonly: boolean \| null \| undefined; isValidating: boolean; isValid: boolean \| null \| undefined; items: FormField[]; validate: () => Promise<FormValidationResult>; reset: () => void; resetValidation: () => void; }` | Main content of the form. Receives the current state and the validation methods. |
+| `description` | `any` | Description of the form (overrides the `description` prop). |
+| `label` | `any` | Heading of the form (overrides the `label` prop). |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `errors` | `{ id: string \| number; errorMessages: string[]; }[]` | Validation errors of the form fields: the identifier of a field and its error messages. |
+| `isDisabled` | `boolean \| null \| undefined` | Whether all the fields of the form are blocked. |
+| `isReadonly` | `boolean \| null \| undefined` | Whether the fields of the form are read-only. |
+| `isValid` | `boolean \| null \| undefined` | Validity of the form: `true` — every field passed the check, `false` — there are errors, `null` — the form has not been validated yet. |
+| `isValidating` | `boolean` | Whether the form is being validated right now. |
+| `items` | `{ id: string \| number; validate: () => Promise<string[]>; reset: () => Promise<void>; resetValidation: () => Promise<void>; vm: Raw<ComponentInternalInstance>; isValid: boolean \| null; errorMessages: string[]; }[]` | The fields registered in the form together with their validation state. |
+| `resetValidation` | `() => void` | Resets the validation state only, keeping the entered values. |
+| `validate` | `() => Promise<{ valid: boolean; errors: FieldValidationResult[] \| { id: string \| number; errorMessages: string[]; }[]; }>` | Runs the validation of all the form fields and returns the result together with the list of errors. |