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

package/skills/cds-builder/references/components/cds-expandable-panel/examples.md

@@ -0,0 +1,569 @@
+# CdsExpandablePanel — 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.
+
+An expandable panel hides the details behind a title: you see the list of topics and open only the one you need. Take it for FAQs, optional settings and long descriptions that turn a page into an endless feed.
+
+## Panel group
+
+`CdsExpandablePanel` does not work without the `CdsExpandablePanels` wrapper — the group is what handles expansion. A simple panel is built from the `title` and `text` props, without slots. By default one panel stays open: opening the next one collapses the previous.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsExpandablePanels class="m-auto max-w-[500px]">
+    <CdsExpandablePanel
+      title="Условия доставки"
+      text="Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита."
+    />
+    <CdsExpandablePanel
+      title="Способы оплаты"
+      text="Оплатите картой онлайн или запросите счёт — он придёт на почту в течение часа."
+    />
+    <CdsExpandablePanel
+      title="Возврат"
+      text="Вернуть товар можно в течение 14 дней после получения, если он не был в использовании."
+    />
+  </CdsExpandablePanels>
+</template>
+```
+
+## Appearance
+
+The `gap` prop changes the spacing between panels — it accepts a number or a string with CSS units.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
+
+const appearances = ['primary', 'secondary', 'transparent'] as const;
+
+const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
+</script>
+
+<template>
+  <div class="m-auto flex max-w-[500px] flex-col gap-4">
+    <CdsExpandablePanels v-for="appearance in appearances" :key="appearance" :appearance="appearance">
+      <CdsExpandablePanel :title="`Внешний вид ${appearance}`" :text="text" />
+      <CdsExpandablePanel title="Способы оплаты" text="Оплатите картой онлайн или запросите счёт." />
+    </CdsExpandablePanels>
+  </div>
+</template>
+```
+
+## Layout
+
+The `variant="accordion"` prop removes the spacing and glues the panels into a single block with shared rounded corners. A list of several questions then reads as one table instead of a set of cards.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsExpandablePanels variant="accordion" class="m-auto max-w-[500px]">
+    <CdsExpandablePanel
+      title="Условия доставки"
+      text="Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита."
+    />
+    <CdsExpandablePanel
+      title="Способы оплаты"
+      text="Оплатите картой онлайн или запросите счёт — он придёт на почту в течение часа."
+    />
+    <CdsExpandablePanel
+      title="Возврат"
+      text="Вернуть товар можно в течение 14 дней после получения, если он не был в использовании."
+    />
+  </CdsExpandablePanels>
+</template>
+```
+
+## Expansion
+
+The `multiple` prop allows several panels to stay open at once. Through `v-model` you read and set what is expanded: the index of the panel (or its `value`) in the regular mode, and an array in `multiple`. The `mandatory` prop forbids collapsing the last open panel, and `max` limits how many can be expanded at the same time.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const opened = ref<number[]>([0]);
+
+const sections = [
+  { title: 'Условия доставки', text: 'Курьер привезёт заказ в течение трёх рабочих дней.' },
+  { title: 'Способы оплаты', text: 'Оплатите картой онлайн или запросите счёт.' },
+  { title: 'Возврат', text: 'Вернуть товар можно в течение 14 дней после получения.' }
+];
+</script>
+
+<template>
+  <div class="m-auto flex max-w-[500px] flex-col gap-2">
+    <span class="text-content-secondary">Раскрыты: {{ opened }}</span>
+
+    <CdsExpandablePanels v-model="opened" multiple>
+      <CdsExpandablePanel
+        v-for="(section, index) in sections"
+        :key="index"
+        :value="index"
+        :title="section.title"
+        :text="section.text"
+      />
+    </CdsExpandablePanels>
+  </div>
+</template>
+```
+
+## States
+
+The `disabled` prop blocks a single panel when set on the panel, and all of them when set on the group: the title stops responding and loses contrast. The `readonly` prop leaves the panels in their current state — use it in a view mode where the content has to be visible but there is nothing to toggle.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
+
+const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
+</script>
+
+<template>
+  <div class="m-auto flex max-w-[500px] flex-col gap-4">
+    <CdsExpandablePanels>
+      <CdsExpandablePanel title="Доступная панель" :text="text" />
+      <CdsExpandablePanel disabled title="Заблокированная панель" :text="text" />
+    </CdsExpandablePanels>
+
+    <CdsExpandablePanels disabled>
+      <CdsExpandablePanel title="Вся группа заблокирована" :text="text" />
+      <CdsExpandablePanel title="Способы оплаты" text="Оплатите картой онлайн или запросите счёт." />
+    </CdsExpandablePanels>
+
+    <CdsExpandablePanels readonly :model-value="0">
+      <CdsExpandablePanel title="Только для чтения — панель раскрыта и не сворачивается" :text="text" />
+    </CdsExpandablePanels>
+  </div>
+</template>
+```
+
+## Icons
+
+The state icon comes from the `expand-icon` and `collapse-icon` props — on the group, on the panel or on an individual title; the value from the closest level wins. The `action` slot of the title replaces the icon entirely and receives the state of the panel, and `hide-actions` removes it altogether.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsExpandablePanel,
+  CdsExpandablePanels,
+  CdsExpandablePanelTitle,
+  CdsIcon
+} from '@central-design-system/components';
+
+const text = 'Курьер привезёт заказ в течение трёх рабочих дней и позвонит за час до визита.';
+</script>
+
+<template>
+  <CdsExpandablePanels class="m-auto max-w-[500px]">
+    <CdsExpandablePanel title="Иконки на панели" expand-icon="add" collapse-icon="minus" :text="text" />
+
+    <CdsExpandablePanel :text="text">
+      <CdsExpandablePanelTitle expand-icon="chevron-right" collapse-icon="chevron-down">
+        Иконки на заголовке
+      </CdsExpandablePanelTitle>
+    </CdsExpandablePanel>
+
+    <CdsExpandablePanel :text="text">
+      <CdsExpandablePanelTitle>
+        Своя разметка в слоте action
+
+        <template #action="{ expanded }">
+          <CdsIcon :name="expanded ? 'visibility-off' : 'visibility-on'" />
+        </template>
+      </CdsExpandablePanelTitle>
+    </CdsExpandablePanel>
+
+    <CdsExpandablePanel hide-actions title="Без иконки" :text="text" />
+  </CdsExpandablePanels>
+</template>
+```
+
+## Slots
+
+The `title` and `text` props are enough for a text panel. As soon as the title needs a counter, a status or an icon, assemble it from `CdsExpandablePanelTitle` and `CdsExpandablePanelContent`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsBadge,
+  CdsExpandablePanel,
+  CdsExpandablePanelContent,
+  CdsExpandablePanels,
+  CdsExpandablePanelTitle,
+  CdsIcon,
+  CdsLink,
+  CdsTag
+} from '@central-design-system/components';
+</script>
+
+<template>
+  <CdsExpandablePanels class="m-auto max-w-[500px]">
+    <CdsExpandablePanel>
+      <CdsExpandablePanelTitle>
+        <div class="flex w-full items-center gap-1">
+          <CdsIcon name="doc" />
+          <span>Документы</span>
+          <CdsBadge inline :content="12" />
+        </div>
+      </CdsExpandablePanelTitle>
+
+      <CdsExpandablePanelContent>
+        <div class="flex flex-col gap-1">
+          <CdsLink href="#" text="Договор поставки.pdf" />
+          <CdsLink href="#" text="Спецификация.xlsx" />
+        </div>
+      </CdsExpandablePanelContent>
+    </CdsExpandablePanel>
+
+    <CdsExpandablePanel>
+      <CdsExpandablePanelTitle>
+        <template #default="{ expanded }">
+          <div class="flex flex-col gap-0.5">
+            <span>Статус заявки</span>
+            <span v-if="!expanded" class="text-content-secondary">На согласовании у трёх участников</span>
+          </div>
+        </template>
+      </CdsExpandablePanelTitle>
+
+      <CdsExpandablePanelContent>
+        <div class="flex flex-wrap gap-1">
+          <CdsTag text="Иванов — согласовано" />
+          <CdsTag text="Петрова — в работе" />
+          <CdsTag text="Сидоров — ждёт" />
+        </div>
+      </CdsExpandablePanelContent>
+    </CdsExpandablePanel>
+  </CdsExpandablePanels>
+</template>
+```
+
+## Questions and answers
+
+The classic case for `accordion`: the whole list of questions stays visible and an answer opens on click. Only one answer is open at a time, so the reader does not lose their place in the list. The content renders only after the first expansion; if the answers have to show up in search results, turn on `eager`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsExpandablePanel, CdsExpandablePanels } from '@central-design-system/components';
+
+const questions = [
+  {
+    title: 'Как оплатить заказ по счёту?',
+    text: 'Выберите оплату по счёту при оформлении — документ придёт на почту в течение часа. Заказ уйдёт в работу после поступления денег.'
+  },
+  {
+    title: 'Можно ли изменить состав заказа после оформления?',
+    text: 'Пока заказ не передан в доставку, состав можно изменить в личном кабинете. После передачи курьеру изменения принимает только служба поддержки.'
+  },
+  {
+    title: 'Сколько идёт доставка в регионы?',
+    text: 'От трёх до семи рабочих дней в зависимости от региона. Точный срок появится на странице заказа после сборки.'
+  },
+  {
+    title: 'Как вернуть товар?',
+    text: 'Оставьте заявку на возврат в течение 14 дней после получения. Деньги вернутся тем же способом, которым вы платили.'
+  }
+];
+</script>
+
+<template>
+  <CdsExpandablePanels variant="accordion" class="m-auto max-w-[560px]">
+    <CdsExpandablePanel
+      v-for="question in questions"
+      :key="question.title"
+      :title="question.title"
+      :text="question.text"
+    />
+  </CdsExpandablePanels>
+</template>
+```
+
+## Form with a summary
+
+The title shows the current value, and the expanded panel holds the field that changes it. The `default` slot of the title receives `expanded`, so the caption can change on the fly. Such a form takes little space and keeps what has already been filled in visible.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsDatePicker,
+  CdsExpandablePanel,
+  CdsExpandablePanelContent,
+  CdsExpandablePanels,
+  CdsExpandablePanelTitle,
+  CdsSelect,
+  CdsTextInput
+} from '@central-design-system/components';
+import { computed, ref, unref } from 'vue';
+
+const name = ref('На Байкал');
+const selected = ref('third');
+const dateRange = ref({ from: '01.01.2026', to: '10.01.2026' });
+
+const items = ref([
+  { title: 'Москва', value: 'first' },
+  { title: 'Санкт-Петербург', value: 'second' },
+  { title: 'Иркутск', value: 'third' }
+]);
+
+const cityName = computed(() => unref(items).find((item) => item.value === unref(selected))?.title);
+</script>
+
+<template>
+  <CdsExpandablePanels class="m-auto max-w-[500px]">
+    <CdsExpandablePanel>
+      <CdsExpandablePanelTitle expand-icon="edit" collapse-icon="minus">
+        <template #default="{ expanded }">
+          <div class="flex flex-col gap-0.5">
+            <span>Название путешествия</span>
+            <span :class="['text-content-secondary', { italic: expanded }]">{{ name }}</span>
+          </div>
+        </template>
+      </CdsExpandablePanelTitle>
+
+      <CdsExpandablePanelContent>
+        <CdsTextInput v-model="name" hide-messages label="Название" placeholder="Введите название" />
+      </CdsExpandablePanelContent>
+    </CdsExpandablePanel>
+
+    <CdsExpandablePanel>
+      <CdsExpandablePanelTitle expand-icon="pin" collapse-icon="minus">
+        <template #default="{ expanded }">
+          <div class="flex flex-col gap-0.5">
+            <span>Город поездки</span>
+            <span :class="['text-content-secondary', { italic: expanded }]">{{ cityName }}</span>
+          </div>
+        </template>
+      </CdsExpandablePanelTitle>
+
+      <CdsExpandablePanelContent>
+        <CdsSelect v-model="selected" :items="items" placeholder="Выберите город" hide-messages />
+      </CdsExpandablePanelContent>
+    </CdsExpandablePanel>
+
+    <CdsExpandablePanel>
+      <CdsExpandablePanelTitle expand-icon="clock" collapse-icon="minus">
+        <template #default="{ expanded }">
+          <div class="flex flex-col gap-0.5">
+            <span>Даты поездки</span>
+            <span :class="['text-content-secondary', { italic: expanded }]">
+              {{ dateRange.from }}—{{ dateRange.to }}
+            </span>
+          </div>
+        </template>
+      </CdsExpandablePanelTitle>
+
+      <CdsExpandablePanelContent>
+        <CdsDatePicker v-model="dateRange" range />
+      </CdsExpandablePanelContent>
+    </CdsExpandablePanel>
+  </CdsExpandablePanels>
+</template>
+```
+
+## Filters in a sidebar
+
+Groups of filters in a side panel: `multiple` keeps the needed sections open, `transparent` removes the extra background, and a badge in the title shows how many conditions are selected in a collapsed group.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsBadge,
+  CdsCheckbox,
+  CdsExpandablePanel,
+  CdsExpandablePanelContent,
+  CdsExpandablePanels,
+  CdsExpandablePanelTitle
+} from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const documents = [
+  { name: 'Договор поставки № 14', type: 'Договор', status: 'Подписан' },
+  { name: 'Счёт № 209', type: 'Счёт', status: 'Черновик' },
+  { name: 'Акт сверки за июнь', type: 'Акт', status: 'Подписан' },
+  { name: 'Договор аренды № 7', type: 'Договор', status: 'Черновик' },
+  { name: 'Счёт № 218', type: 'Счёт', status: 'Подписан' }
+];
+
+const types = ['Договор', 'Счёт', 'Акт'];
+const statuses = ['Подписан', 'Черновик'];
+
+const selectedTypes = ref<string[]>(['Договор']);
+const selectedStatuses = ref<string[]>([]);
+
+const filtered = computed(() =>
+  documents.filter(
+    (document) =>
+      (!selectedTypes.value.length || selectedTypes.value.includes(document.type)) &&
+      (!selectedStatuses.value.length || selectedStatuses.value.includes(document.status))
+  )
+);
+</script>
+
+<template>
+  <div class="m-auto flex w-[520px] max-w-full gap-4">
+    <CdsExpandablePanels appearance="transparent" multiple :model-value="[0, 1]" class="w-[220px] shrink-0">
+      <CdsExpandablePanel>
+        <CdsExpandablePanelTitle>
+          <div class="flex w-full items-center gap-1">
+            <span>Тип</span>
+            <CdsBadge v-if="selectedTypes.length" inline :content="selectedTypes.length" />
+          </div>
+        </CdsExpandablePanelTitle>
+
+        <CdsExpandablePanelContent>
+          <div class="flex flex-col gap-1">
+            <CdsCheckbox
+              v-for="type in types"
+              :key="type"
+              v-model="selectedTypes"
+              :value="type"
+              :label="type"
+              hide-messages
+            />
+          </div>
+        </CdsExpandablePanelContent>
+      </CdsExpandablePanel>
+
+      <CdsExpandablePanel>
+        <CdsExpandablePanelTitle>
+          <div class="flex w-full items-center gap-1">
+            <span>Статус</span>
+            <CdsBadge v-if="selectedStatuses.length" inline :content="selectedStatuses.length" />
+          </div>
+        </CdsExpandablePanelTitle>
+
+        <CdsExpandablePanelContent>
+          <div class="flex flex-col gap-1">
+            <CdsCheckbox
+              v-for="status in statuses"
+              :key="status"
+              v-model="selectedStatuses"
+              :value="status"
+              :label="status"
+              hide-messages
+            />
+          </div>
+        </CdsExpandablePanelContent>
+      </CdsExpandablePanel>
+    </CdsExpandablePanels>
+
+    <ul class="m-0 flex list-none flex-col gap-1 p-0">
+      <li v-for="document in filtered" :key="document.name">{{ document.name }}</li>
+      <li v-if="!filtered.length" class="text-content-secondary">Ничего не найдено</li>
+    </ul>
+  </div>
+</template>
+```
+
+## Step-by-step filling
+
+The group slot hands over `next` and `prev` — buttons inside a panel move the reader to the next step, while `mandatory` prevents closing all of the steps at once. For long wizards with per-step validation take [CdsSteps](../cds-steps/api.md).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import {
+  CdsButton,
+  CdsExpandablePanel,
+  CdsExpandablePanelContent,
+  CdsExpandablePanels,
+  CdsExpandablePanelTitle,
+  CdsSelect,
+  CdsTextInput
+} from '@central-design-system/components';
+import { ref } from 'vue';
+
+const step = ref(0);
+
+const company = ref('');
+const city = ref('first');
+const contact = ref('');
+
+const cities = [
+  { title: 'Москва', value: 'first' },
+  { title: 'Санкт-Петербург', value: 'second' },
+  { title: 'Новосибирск', value: 'third' }
+];
+</script>
+
+<template>
+  <CdsExpandablePanels
+    v-model="step"
+    v-slot="{ next, prev }"
+    variant="accordion"
+    mandatory
+    class="m-auto max-w-[500px]"
+  >
+    <CdsExpandablePanel>
+      <CdsExpandablePanelTitle>Шаг 1. Организация</CdsExpandablePanelTitle>
+
+      <CdsExpandablePanelContent>
+        <div class="flex flex-col items-start gap-2">
+          <CdsTextInput v-model="company" label="Название организации" hide-messages class="w-full" />
+          <CdsButton text="Далее" @click="next" />
+        </div>
+      </CdsExpandablePanelContent>
+    </CdsExpandablePanel>
+
+    <CdsExpandablePanel>
+      <CdsExpandablePanelTitle>Шаг 2. Адрес</CdsExpandablePanelTitle>
+
+      <CdsExpandablePanelContent>
+        <div class="flex flex-col items-start gap-2">
+          <CdsSelect v-model="city" :items="cities" label="Город" hide-messages class="w-full" />
+
+          <div class="flex gap-2">
+            <CdsButton appearance="secondary" text="Назад" @click="prev" />
+            <CdsButton text="Далее" @click="next" />
+          </div>
+        </div>
+      </CdsExpandablePanelContent>
+    </CdsExpandablePanel>
+
+    <CdsExpandablePanel>
+      <CdsExpandablePanelTitle>Шаг 3. Контакт</CdsExpandablePanelTitle>
+
+      <CdsExpandablePanelContent>
+        <div class="flex flex-col items-start gap-2">
+          <CdsTextInput v-model="contact" label="Контактное лицо" hide-messages class="w-full" />
+
+          <div class="flex gap-2">
+            <CdsButton appearance="secondary" text="Назад" @click="prev" />
+            <CdsButton text="Отправить" />
+          </div>
+        </div>
+      </CdsExpandablePanelContent>
+    </CdsExpandablePanel>
+  </CdsExpandablePanels>
+</template>
+```

package/skills/cds-builder/references/components/cds-expandable-panel/guidelines.md

@@ -0,0 +1,10 @@
+# CdsExpandablePanel — 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 title names the content — you can tell what is inside before opening it. | «Section 1» and «More» promise nothing: people open the panels at random. |
+| Hide the secondary things behind a panel. Required fields stay in plain sight. | Hidden required fields are easy to miss — the form gets submitted with an error. |
+| One level of panels: all the sections are visible at once. | A panel inside a panel buries the content two clicks deep — make a separate section instead. |

package/skills/cds-builder/references/components/cds-expandable-panel/tokens.md

@@ -0,0 +1,34 @@
+# CdsExpandablePanel — 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.
+
+## _CdsExpandablePanel.variables.scss
+
+```scss
+// CdsExpandablePanels
+$expandable-panels-gap: var(--cds-spacing-400) !default;
+$expandable-panels-border-radius: var(--cds-border-radius-200) !default;
+$expandable-panels-divider-width: var(--cds-border-100) !default;
+$expandable-panels-divider-color: rgb(var(--cds-color-line-tertiary)) !default;
+$expandable-panels-shadow-border-width: var(--cds-border-100) !default;
+$expandable-panels-shadow-border-color: rgb(var(--cds-color-line-elevated)) !default;
+
+// CdsExpandablePanel
+$expandable-panel-background-primary: rgb(var(--cds-color-surface-elevated)) !default;
+$expandable-panel-background-secondary: rgb(var(--cds-color-surface-secondary)) !default;
+$expandable-panel-color: rgb(var(--cds-color-content-primary)) !default;
+$expandable-panel-disabled-color: rgb(var(--cds-color-content-disable)) !default;
+
+// CdsExpandablePanelTitle
+$expandable-panel-title-padding: var(--cds-spacing-200) var(--cds-spacing-400) !default;
+$expandable-panel-title-gap: var(--cds-spacing-200) !default;
+$expandable-panel-title-hover-color: rgb(var(--cds-color-fill-primary-hover)) !default;
+$expandable-panel-title-focus-color: rgb(var(--cds-color-line-focus-outline)) !default;
+$expandable-panel-title-outline: var(--cds-border-200) solid !default;
+
+// CdsExpandablePanelContent
+$expandable-panel-content-border-radius: 0 0 var(--cds-border-radius-200) var(--cds-border-radius-200) !default;
+$expandable-panel-content-padding: var(--cds-spacing-200) var(--cds-spacing-400) !default;
+```

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

@@ -0,0 +1,62 @@
+# CdsField — API
+
+> Generated from meta.json by `bun run generate:skill`. Do not edit manually.
+> Examples: [examples.md](examples.md) · Tokens: [tokens.md](tokens.md)
+
+The frame of an input: the background, the border, the focus and error states, the inner icons, the clear button and the loading indicator. You put the control itself into the `default` slot — the text fields, selects and autocompletes of the design system are built on `CdsField`.
+
+## CdsField
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `active` | `boolean \| undefined` | — | no | Active state of the field |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `appendInnerIcon` | `IconValue \| undefined` | — | no | Icon in the inner append slot, after the content of the field |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `centerAffix` | `boolean \| undefined` | — | no | Vertically center the appendInner, prependInner, clearIcon and label elements. |
+| `clearable` | `boolean \| undefined` | — | no | Shows the clear button |
+| `clearIcon` | `IconValue \| undefined` | `'remove'` | no | Icon of the clear button |
+| `color` | `string \| undefined` | — | no | Component color |
+| `details` | `boolean \| undefined` | — | no | Reserves the space for hints and error messages under the field |
+| `dirty` | `boolean \| undefined` | — | no | Marks that the value of the field was changed by the user |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `error` | `boolean \| undefined` | — | no | Error state |
+| `focused` | `boolean \| undefined` | — | no | Controls the focus state of the component. When `true`, the component is considered focused and may apply the corresponding styles or behavior. |
+| `iconColor` | `string \| boolean \| undefined` | — | no | Icon color. Accepts a boolean or a color string |
+| `id` | `string \| undefined` | — | no | Field identifier — the value of the `id` HTML attribute for the inner control |
+| `loading` | `string \| boolean \| undefined` | — | no | Loading indicator for the component |
+| `persistentClearable` | `boolean \| undefined` | — | no | Always show the clear button, not only on hover or focus |
+| `prependInnerIcon` | `IconValue \| undefined` | — | no | Icon in the inner prepend slot, before the content of the field |
+| `readonly` | `boolean \| null \| undefined` | `null` | no | Read-only state |
+| `reverse` | `boolean \| undefined` | — | no | Reverses the order of the elements inside the field |
+| `size` | `number \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| undefined` | `'md'` | no | Size of the component |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `click:clear` | `[e: MouseEvent]` | Click on the clear button (clearable prop) |
+| `update:focused` | `[focused: boolean]` | Fires when the element gains or loses focus |
+| `update:modelValue` | `[value: any]` | Fires when the model of the component changes |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `append-inner` | `CdsInputDefaultSlot` | Slot added at the end of the input |
+| `clear` | `CdsInputDefaultSlot & { props: Record<string, any>; }` | Slot for a custom clear icon (shown when the clearable prop is true). |
+| `default` | `CdsFieldSlot` | Content inside the field |
+| `loader` | `LoaderSlotProps` | Slot for a custom loader (shown when the loading prop is true). |
+| `prepend-inner` | `CdsInputDefaultSlot` | Slot added at the start of the input |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `controlRef` | `HTMLElement \| undefined` | Ref to the control of the input |
+| `fieldIconColor` | `string \| undefined` | Icon color |