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

package/skills/cds-builder/references/components/cds-otp-input/api.md

@@ -0,0 +1,106 @@
+# CdsOtpInput — 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 field for entering a one-time code — from an SMS, an email or an authenticator app. It looks like a row of separate cells, but the input is taken by a single hidden `input`: that is why the SMS autofill, pasting a whole string from the clipboard, selection and the arrow keys all work, and the focus does not have to be jumped between the cells by hand.
+
+Family: [CdsOtpInput](#cdsotpinput) + subcomponents: [CdsOtpField](#cdsotpfield), [CdsOtpGroup](#cdsotpgroup), [CdsOtpSeparator](#cdsotpseparator).
+
+## CdsOtpInput
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `activeColor` | `string \| undefined` | — | no | Color of the component in its active state |
+| `autofocus` | `boolean \| undefined` | — | no | Enables autofocus |
+| `baseColor` | `string \| undefined` | — | no | Color of the component in its inactive state |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `color` | `string \| undefined` | — | no | Component color |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `divider` | `string \| undefined` | — | no | Separator character placed between the code cells |
+| `error` | `boolean \| undefined` | — | no | Error state |
+| `focusAll` | `boolean \| undefined` | — | no | Highlight all the cells while the field is focused, not only the active one |
+| `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. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `label` | `string \| undefined` | `'$cds.input.otp'` | no | Accessible name of the field (`aria-label`). Accepts a localization key such as `$cds.input.otp` |
+| `length` | `string \| number \| undefined` | `6` | no | Number of code cells |
+| `loading` | `string \| boolean \| undefined` | — | no | Loading indicator for the component |
+| `masked` | `boolean \| undefined` | — | no | Hide the entered characters behind dots |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `merged` | `boolean \| undefined` | — | no | Merged look: the cells are joined into a single field with no gaps between them |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `modelValue` | `string \| number \| undefined` | — | no | Value of the component (v-model) |
+| `pattern` | `RegExp \| "numeric" \| "alpha" \| "alphanumeric" \| "unicode-alpha" \| "unicode-alphanumeric" \| undefined` | — | no | Allowed characters: the name of a ready pattern (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) or your own regular expression |
+| `placeholder` | `string \| undefined` | — | no | Placeholder character shown in an empty cell |
+| `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 |
+| `type` | `CdsOtpInputType \| undefined` | `'number'` | no | Type of the code being entered. `number` limits the input to digits, `password` hides the characters |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `finish` | `[value: string]` | Fires when the whole code has been entered |
+| `update:focused` | `[focused: boolean]` | Fires when the field gains or loses focus |
+| `update:modelValue` | `[value: string]` | Fires when the value of the component changes |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Arbitrary content on top of the code cells |
+| `divider` | `{ index: number; }` | Separator between the cells. `index` is the number of the cell to the left of it |
+| `fields` | `any` | Fully replaces the row of cells with your own markup made of `CdsOtpGroup`, `CdsOtpField` and `CdsOtpSeparator` |
+| `loader` | `any` | Custom loading indicator |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `blur` | `() => void` | Remove the focus from the field |
+| `focus` | `() => void` | Set the focus on the field |
+| `inputRef` | `HTMLInputElement \| undefined` | Ref to the hidden input that receives the code |
+| `isFocused` | `boolean \| undefined` | Focus state of the field |
+| `reset` | `() => void` | Clear the entered code |
+
+---
+
+## CdsOtpField
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `index` | `number` | — | yes | Zero-based index of the cell |
+
+---
+
+## CdsOtpGroup
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `merged` | `boolean \| null \| undefined` | `null` | no | Merged look of the group. Inherited from the parent `CdsOtpInput` by default |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | The code cells of the group |
+
+---
+
+## CdsOtpSeparator
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `default` | `any` | Content of the separator |

package/skills/cds-builder/references/components/cds-otp-input/examples.md

@@ -0,0 +1,329 @@
+# CdsOtpInput — 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 field for entering a one-time code — from an SMS, an email or an authenticator app. It looks like a row of separate cells, but the input is taken by a single hidden `input`: that is why the SMS autofill, pasting a whole string from the clipboard, selection and the arrow keys all work, and the focus does not have to be jumped between the cells by hand.
+
+## Length and type of the code
+
+The `length` prop sets the number of cells, `type` — what may be entered: `number` (the default) accepts digits only and opens the numeric keyboard on mobile, `text` — any characters, `password` additionally hides what is entered behind dots. The same effect without changing the type is given by `masked`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsOtpInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsOtpInput :length="4" model-value="1234" />
+    <CdsOtpInput type="text" model-value="AB12CD" />
+    <CdsOtpInput type="password" model-value="123456" />
+  </div>
+</template>
+```
+
+## Allowed characters
+
+The `pattern` prop narrows the set of characters: the name of a ready set (`numeric`, `alpha`, `alphanumeric`, `unicode-alpha`, `unicode-alphanumeric`) or your own regular expression. The check goes character by character — the extra ones will not get into the field, neither from the keyboard nor from the clipboard.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsOtpInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsOtpInput type="text" pattern="alpha" :length="4" placeholder="A" />
+    <CdsOtpInput type="text" pattern="alphanumeric" placeholder="X" />
+    <CdsOtpInput type="text" :pattern="/[0-9A-F]/" placeholder="F" />
+  </div>
+</template>
+```
+
+## Separator
+
+The `divider` prop puts a character between the cells — a hyphen in a code like `123-456`, for example. The `divider` slot gives full freedom of markup and receives `index` — the number of the cell to the left of the separator, so the separator can be placed only where it is needed.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsIcon, CdsOtpInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsOtpInput divider="-" model-value="123456" />
+
+    <CdsOtpInput model-value="123456">
+      <template #divider="{ index }">
+        <CdsIcon v-if="index === 2" name="minus" size="sm" />
+      </template>
+    </CdsOtpInput>
+  </div>
+</template>
+```
+
+## Merged look
+
+The `merged` prop removes the gaps: the cells become a single field with a common border. This look is more compact and breaks the form up less.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsOtpInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsOtpInput merged model-value="1234" />
+  </div>
+</template>
+```
+
+## Placeholder
+
+The `placeholder` prop shows a character in the empty cells — a hint about the format or simply a dot, so that the row does not look empty.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsOtpInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsOtpInput placeholder="0" />
+    <CdsOtpInput placeholder="•" />
+  </div>
+</template>
+```
+
+## Sizes
+
+The `size` prop changes the height of the cells and the font size. The default size is `md`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsOtpInput } from '@central-design-system/components';
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const;
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsOtpInput v-for="size of sizes" :key="size" :size="size" :length="4" model-value="1234" />
+  </div>
+</template>
+```
+
+## States
+
+`disabled` blocks the input, `error` highlights the whole row with the error color, `loading` shows an indicator on top of the cells and does not erase the entered code. `focus-all` highlights the whole row while the field is focused, not just the active cell.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsOtpInput } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <CdsOtpInput :length="4" model-value="12" disabled />
+    <CdsOtpInput :length="4" model-value="1234" error />
+    <CdsOtpInput :length="4" model-value="1234" loading />
+    <CdsOtpInput :length="4" model-value="12" focus-all />
+  </div>
+</template>
+```
+
+## Slots
+
+The `fields` slot is needed when the cells are gathered into groups: every `CdsOtpField` receives its own `index`, and `CdsOtpGroup` joins the neighboring cells into a common border.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsOtpField, CdsOtpGroup, CdsOtpInput, CdsOtpSeparator } from '@central-design-system/components';
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <CdsOtpInput model-value="123456">
+      <template #fields>
+        <CdsOtpGroup merged>
+          <CdsOtpField v-for="index of [0, 1, 2]" :key="index" :index="index" />
+        </CdsOtpGroup>
+
+        <CdsOtpSeparator>—</CdsOtpSeparator>
+
+        <CdsOtpGroup merged>
+          <CdsOtpField v-for="index of [3, 4, 5]" :key="index" :index="index" />
+        </CdsOtpGroup>
+      </template>
+    </CdsOtpInput>
+  </div>
+</template>
+```
+
+## Confirmation by SMS
+
+The `finish` event fires as soon as the whole code is entered — send the request on it, a separate button is not needed. Turn on `loading` for the duration of the check: the code stays on the screen and the field does not look broken. If the server did not accept the code, `error` highlights the row, and the `reset()` and `focus()` methods called through a ref clear the field and bring the cursor back into it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsOtpInput } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const otpRef = ref<InstanceType<typeof CdsOtpInput>>();
+
+const code = ref('');
+const loading = ref(false);
+const status = ref<'idle' | 'success' | 'error'>('idle');
+
+// Имитация проверки кода на сервере: верный код — 123456
+function onFinish(value: string) {
+  loading.value = true;
+  status.value = 'idle';
+
+  setTimeout(() => {
+    loading.value = false;
+    status.value = value === '123456' ? 'success' : 'error';
+
+    if (status.value === 'error') {
+      otpRef.value?.reset();
+      otpRef.value?.focus();
+    }
+  }, 1000);
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <p class="text-200 text-content-secondary">Код отправлен на +7 999 000-00-00</p>
+
+    <CdsOtpInput
+      ref="otpRef"
+      v-model="code"
+      :loading="loading"
+      :error="status === 'error'"
+      @finish="onFinish"
+      @update:model-value="status = 'idle'"
+    />
+
+    <p v-if="status === 'success'" class="text-200 text-status-success-content">Код подтверждён</p>
+    <p v-else-if="status === 'error'" class="text-200 text-status-danger-content">
+      Код неверный — введите последние цифры из SMS ещё раз
+    </p>
+    <p v-else class="text-200 text-content-tertiary">Введите 123456, чтобы увидеть подтверждение</p>
+  </div>
+</template>
+```
+
+## Resending the code
+
+The "Send again" button opens on a timer — that way the user does not flood the gateway with requests. Reset the field together with the new code: `reset()` clears the cells, `focus()` puts the cursor into the first one, and the old code does not mix with the new one.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsOtpInput } from '@central-design-system/components';
+import { onScopeDispose, ref } from 'vue';
+
+const otpRef = ref<InstanceType<typeof CdsOtpInput>>();
+
+const code = ref('');
+const seconds = ref(15);
+
+let timer: ReturnType<typeof setInterval> | undefined;
+
+function countdown() {
+  clearInterval(timer);
+
+  timer = setInterval(() => {
+    seconds.value -= 1;
+
+    if (seconds.value <= 0) clearInterval(timer);
+  }, 1000);
+}
+
+function resend() {
+  seconds.value = 15;
+  countdown();
+
+  otpRef.value?.reset();
+  otpRef.value?.focus();
+}
+
+countdown();
+onScopeDispose(() => clearInterval(timer));
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-3">
+    <CdsOtpInput ref="otpRef" v-model="code" placeholder="•" />
+
+    <CdsButton
+      appearance="tertiary"
+      size="sm"
+      :disabled="seconds > 0"
+      :text="seconds > 0 ? `Отправить снова через ${seconds} с` : 'Отправить код снова'"
+      @click="resend"
+    />
+  </div>
+</template>
+```
+
+## A code inside a form
+
+When the code is a part of the sign-in form, keep the confirmation button: it gives an explicit moment of submission. The button waits until all the characters are entered — the length of the code is visible from `v-model`, and `disabled` on the field freezes the code that has already been confirmed.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsButton, CdsForm, CdsOtpInput } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const code = ref('');
+const loading = ref(false);
+const confirmed = ref(false);
+
+const isComplete = computed(() => code.value.length === 6);
+
+function submit() {
+  loading.value = true;
+
+  setTimeout(() => {
+    loading.value = false;
+    confirmed.value = true;
+  }, 1000);
+}
+</script>
+
+<template>
+  <CdsForm class="flex flex-col items-center gap-3 w-[350px] m-auto" @submit.prevent="submit">
+    <p class="text-200 text-content-secondary">Введите код из приложения-аутентификатора</p>
+
+    <CdsOtpInput v-model="code" :disabled="confirmed" divider="-" />
+
+    <CdsButton type="submit" text="Подтвердить вход" :disabled="!isComplete || confirmed" :loading="loading" block />
+
+    <p v-if="confirmed" class="text-200 text-status-success-content">Вход подтверждён</p>
+  </CdsForm>
+</template>
+```

package/skills/cds-builder/references/components/cds-otp-input/guidelines.md

@@ -0,0 +1,10 @@
+# CdsOtpInput — 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 number of cells equals the length of the code — the user sees at once how many characters to enter. | Extra cells make the user guess whether the whole code has been entered. |
+| The whole code is entered in one field: pasting from the clipboard and SMS autofill both work. | Separate text fields break code pasting and force the user to move the focus by hand. |
+| On an error the field stays available, and the text next to it says what to do next. | A blocked field with no explanation makes it impossible to fix the code. |

package/skills/cds-builder/references/components/cds-otp-input/tokens.md

@@ -0,0 +1,41 @@
+# CdsOtpInput — 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.
+
+## _CdsOtpInput.variables.scss
+
+```scss
+@use '../../../styles/settings';
+@use '../../../styles/tools';
+
+// ======================= Variables =======================
+$otp-input-gap: var(--cds-spacing-200) !default;
+$otp-input-separator-gap: var(--cds-spacing-100) !default;
+$otp-input-max-width: tools.to-rem(320px) !default;
+$otp-input-divided-max-width: tools.to-rem(360px) !default;
+$otp-input-border-radius: var(--cds-border-radius-200) !default;
+$otp-input-merged-overlap: calc(var(--cds-border-100) * -1) !default;
+$otp-input-caret-width: var(--cds-border-100) !default;
+$otp-input-caret-height: 1.2em !default;
+$otp-input-caret-duration: tools.$cds-duration-very-slow * 2 + ms !default;
+$otp-input-transition: tools.$cds-duration-fast + ms settings.$standard-easing !default;
+
+// ======================= Colors =======================
+$otp-input-caret-color: currentcolor !default;
+$otp-input-separator-color: rgb(var(--cds-color-content-secondary)) !default;
+$otp-input-placeholder-color: rgb(var(--cds-color-content-tertiary)) !default;
+$otp-input-composition-color: rgb(var(--cds-color-content-secondary)) !default;
+$otp-input-highlighted-opacity: 0.5 !default;
+
+// ======================= Sizes =======================
+// Ширина ячейки — нижняя граница: по горизонтали ячейки растягиваются флексом.
+$otp-input-field-sizes: (
+  xs: tools.to-rem(24px),
+  sm: tools.to-rem(28px),
+  md: tools.to-rem(32px),
+  lg: tools.to-rem(36px),
+  xl: tools.to-rem(40px)
+) !default;
+```

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

@@ -0,0 +1,85 @@
+# CdsOverlay — 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)
+
+An overlay shows content on top of the page: it dims the page with a scrim, computes the position relative to an activator and manages the stacking order of the open layers. It is the base mechanism behind [CdsModal](../cds-modal/api.md), [CdsMenu](../cds-menu/api.md) and [CdsTooltip](../cds-tooltip/api.md) — take it when you need a popup of your own that is not among the ready-made ones.
+
+## CdsOverlay
+
+**Props**
+
+| Prop | Type | Default | Required | Description |
+| --- | --- | --- | --- | --- |
+| `absolute` | `boolean \| undefined` | — | no | Positions the element absolutely instead of fixed. This is useful for overlays that must stay inside a certain area, for example inside a container with `position: relative`. |
+| `activator` | `(string & {}) \| Element \| "parent" \| ComponentPublicInstance \| undefined` | — | no | The element that activates the component |
+| `activatorProps` | `Record<string, any> \| undefined` | `{}` | no | Props for the activator element |
+| `attach` | `string \| boolean \| Element \| undefined` | — | no | Sets the DOM element the overlay content is moved to. It accepts a direct element reference, a querySelector string, or true to disable moving. By default the body element is used. Changing this prop is usually not recommended except for edge cases: the default positioning algorithm handles most scenarios better than it can without moving, and unexpected behavior may appear if the menu ends up being a child of its activator. |
+| `captureFocus` | `boolean \| undefined` | — | no | Returns the focus back into the content if it has left it — for example on Tab from the end of the page. A mouse click does not steal the focus. |
+| `closeDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component closes. Works only together with open-on-hover. |
+| `closeOnBack` | `boolean \| undefined` | `true` | no | Closes the overlay content when the browser Back button is pressed or $router.back() is called, cancelling the original navigation. `persistent` overlays cancel the navigation and animate as if they were clicked outside instead of closing. |
+| `closeOnContentClick` | `boolean \| undefined` | — | no | Hide the component on a click on the content |
+| `contained` | `boolean \| undefined` | — | no | Limits the size of the component and of its grid to the offset parent. Implies the `absolute` and `attach` props. (Note: the parent element must have `position: relative`.) |
+| `contentClass` | `any` | — | no | Applies a custom class to the content element. This is handy because the content is moved to the beginning of the cds-app component (unless `attach` is set) and cannot be selected with classes passed to the component directly. |
+| `contentProps` | `any` | — | no | Applies custom props to the moved content |
+| `disabled` | `boolean \| null \| undefined` | `null` | no | Disabled state |
+| `eager` | `boolean \| undefined` | — | no | Renders the content of the component right away. Useful when you have content that is not in the DOM but has to be indexed for SEO. |
+| `height` | `string \| number \| undefined` | — | no | Component height |
+| `location` | `Anchor \| undefined` | `'bottom'` | no | Sets the anchor point used to position the component, aligning it horizontally, vertically or in both directions |
+| `locationStrategy` | `"static" \| "connected" \| LocationStrategyFunction \| undefined` | `'static'` | no | Sets the way the overlay content is positioned. By default static is used, which centers the content in its container. Use connected to attach the content to the activator element. |
+| `maxHeight` | `string \| number \| undefined` | — | no | Maximum component height |
+| `maxWidth` | `string \| number \| undefined` | — | no | Maximum component width |
+| `minHeight` | `string \| number \| undefined` | — | no | Minimum component height |
+| `minWidth` | `string \| number \| undefined` | — | no | Minimum component width |
+| `modelValue` | `boolean \| undefined` | — | no | The v-model value of the component. If the component supports the **multiple** prop, an empty array is used by default. |
+| `noClickAnimation` | `boolean \| undefined` | — | no | Disables the bounce effect on a click outside the content element when `persistent` is set. |
+| `offset` | `string \| number \| number[] \| undefined` | — | no | Increases the distance to the target. If two numbers are passed, the second one shifts the anchor sideways, away from the target. |
+| `opacity` | `string \| number \| undefined` | — | no | Opacity of the scrim element. Applies only when `scrim=true`. |
+| `openDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component opens. Works only together with open-on-hover. |
+| `openOnClick` | `boolean \| undefined` | — | no | Show the component on a click on the activator |
+| `openOnFocus` | `boolean \| undefined` | — | no | Show the component when the activator gets focus |
+| `openOnHover` | `boolean \| undefined` | — | no | Show the component on hover over the activator |
+| `origin` | `Anchor \| "auto" \| "overlap" \| undefined` | `'auto'` | no | Sets the anchor point of the overlay content that is aligned with the `location` anchor of the target. With "auto" the opposite side of the `location` point is used. With "overlap" the same anchor point is used, so the overlay overlaps the target. It also sets the CSS `transform-origin` property for the enter/leave transitions. |
+| `persistent` | `boolean \| undefined` | — | no | A click outside the element or the Esc key does not close it. |
+| `retainFocus` | `boolean \| undefined` | — | no | Traps Tab navigation inside the content: from the last focusable element the focus moves to the first one and back. |
+| `scrim` | `string \| boolean \| undefined` | `true` | no | Backdrop shown while the overlay is active. Accepts true/false to toggle the backdrop and a string to set its color. |
+| `scrollStrategy` | `"none" \| "close" \| "block" \| "reposition" \| ScrollStrategyFunction \| undefined` | `'block'` | no | Strategy applied when the component is active and the user scrolls the page. |
+| `stickToTarget` | `boolean \| undefined` | — | no | Lets the overlay content go off screen while scrolling. |
+| `target` | `(string & {}) \| Element \| "parent" \| ComponentPublicInstance \| "cursor" \| [x: number, y: number] \| undefined` | — | no | When `locationStrategy` is set to "connected", specify the element or the array of x, y coordinates the overlay is positioned against. By default the activator element is used. |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| null \| undefined` | `'fade-transition'` | no | Transition animation |
+| `viewportMargin` | `string \| number \| undefined` | `12` | no | Sets a custom viewport margin for the overlay content |
+| `width` | `string \| number \| undefined` | — | no | Component width |
+| `zIndex` | `string \| number \| undefined` | `2000` | no | The z-index value of the component. |
+
+**Events**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `afterEnter` | `[]` | Fires after the opening animation has finished. |
+| `afterLeave` | `[]` | Fires after the closing animation has finished. |
+| `click:outside` | `[value: MouseEvent]` | Fires on a click outside the overlay. |
+| `keydown` | `[value: KeyboardEvent]` | Fires on a key press while the overlay is open. |
+| `update:modelValue` | `[value: boolean]` | Fires when the overlay opens or closes. Passes the new visibility state. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `activator` | `{ isActive: boolean; props: Record<string, any>; targetRef: TemplateRef; }` | Slot for the element that acts as the activator of the overlay. |
+| `default` | `{ isActive: Ref<boolean, boolean>; }` | Slot for the overlay content. |
+
+**Exposed**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `activatorEl` | `HTMLElement \| undefined` | The DOM element of the activator. |
+| `activatorRef` | `TemplateRef` | Template ref for assigning the activator manually. |
+| `animateClick` | `() => void` | Runs the bounce animation of the content — the same as on a click outside a `persistent` overlay. |
+| `contentEl` | `HTMLElement \| undefined` | The DOM element of the overlay content. |
+| `globalTop` | `boolean` | Whether the overlay is the top one in the global stack of open overlays. |
+| `rootEl` | `HTMLElement \| undefined` | The root DOM element of the overlay. |
+| `scrimEl` | `HTMLElement \| undefined` | The DOM element of the scrim that dims the page. |
+| `targetEl` | `HTMLElement \| undefined` | The DOM element of the positioning target. |
+| `targetRef` | `TemplateRef` | Template ref for assigning the positioning target manually. |
+| `updateLocation` | `((e: Event) => void) \| undefined` | Recalculates the position of the content relative to the target. |