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

package/skills/cds-builder/references/components/cds-time-picker/examples.md

@@ -0,0 +1,407 @@
+# CdsTimePicker — 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.
+
+Time selection: hours, minutes and — if you want — seconds. The value can be typed on the keyboard or stepped through with the arrows, and `v-model` receives a string in the given format (`HH:mm` by default), which is convenient to store and to send to the server.
+
+## Value and format
+
+The time arrives in `v-model` as a string in the `mask` format — `HH:mm` by default. As the second argument of the `update:model-value` event the component gives out the parsed date as an object: the year, the month, the day, the hours, the minutes, the seconds. While no value is chosen, the fields are empty and show the `00` hint.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const time = ref<string | null>(null);
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTimePicker v-model="time" />
+
+    <span class="text-200 text-content-secondary">v-model: {{ time ?? '—' }}</span>
+  </div>
+</template>
+```
+
+## Value and format
+
+The mask may include the date as well: then the component changes the time only and carries the date over from the current value — that is how one string is shared between a calendar and a clock. The `with-time` prop of [CdsDateInput](../cds-date-input/api.md) is built on the same idea. If the model is empty, the date for the new string is taken from `default-date` (the `YYYY/MM/DD` format), otherwise it is today.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const withDate = ref('01.09.2026 09:30');
+const empty = ref<string | null>(null);
+</script>
+
+<template>
+  <div class="flex flex-wrap items-start justify-center gap-4">
+    <div class="flex flex-col items-center gap-2">
+      <CdsTimePicker v-model="withDate" mask="DD.MM.YYYY HH:mm" />
+
+      <span class="text-200 text-content-secondary">v-model: {{ withDate }}</span>
+    </div>
+
+    <div class="flex flex-col items-center gap-2">
+      <CdsTimePicker v-model="empty" mask="DD.MM.YYYY HH:mm" default-date="2026/09/01" />
+
+      <span class="text-200 text-content-secondary">v-model: {{ empty ?? '—' }}</span>
+    </div>
+  </div>
+</template>
+```
+
+## Seconds
+
+`with-seconds` adds a third block. The mask is extended automatically: the component appends `:ss` to `HH:mm` by itself.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const time = ref('15:22:30');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTimePicker v-model="time" with-seconds />
+
+    <span class="text-200 text-content-secondary">v-model: {{ time }}</span>
+  </div>
+</template>
+```
+
+## The 12-hour format
+
+`format12h` shows the hours from 1 to 12 and the AM/PM switch. This does not affect the value in the model — the format is set by the mask, so for a string with AM/PM use `hh:mm A`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const time = ref('14:00');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTimePicker v-model="time" format12h />
+
+    <span class="text-200 text-content-secondary">v-model: {{ time }}</span>
+  </div>
+</template>
+```
+
+## The "Now" button
+
+`now-btn` adds a button under the clock that sets the current time — the user does not have to step through the values with the arrows.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const time = ref('18:00');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTimePicker v-model="time" now-btn />
+
+    <span class="text-200 text-content-secondary">v-model: {{ time }}</span>
+  </div>
+</template>
+```
+
+## Available time
+
+`allowed-hours`, `allowed-minutes` and `allowed-seconds` accept arrays of the allowed values: the arrows step through those only, and a value outside the list is pulled by the component to the nearest allowed one.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const time = ref('12:30');
+
+const allowedHours = [9, 10, 11, 12, 13, 14];
+const allowedMinutes = [0, 15, 30, 45];
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTimePicker v-model="time" :allowed-hours="allowedHours" :allowed-minutes="allowedMinutes" />
+
+    <span class="text-200 text-content-secondary">v-model: {{ time }}</span>
+  </div>
+</template>
+```
+
+## Available time
+
+When the restriction depends on the already chosen time, pass the `allowed-time` function instead of the arrays. It is called separately for the hours, the minutes and the seconds: the parts that are not being checked arrive as `null`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const time = ref('10:30');
+
+// Часы и минуты проверяются по отдельности: сначала приходит только час,
+// затем час вместе с минутой. Обед с 13:00 до 14:00 недоступен.
+const allowedTime = (hour: number | null, minute: number | null) => {
+  if (hour === null) return true;
+  if (hour < 9 || hour > 17) return false;
+  if (minute === null) return true;
+
+  return hour !== 13;
+};
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTimePicker v-model="time" :allowed-time="allowedTime" />
+
+    <span class="text-200 text-content-secondary">v-model: {{ time }}</span>
+  </div>
+</template>
+```
+
+## Localization
+
+`locale` accepts a locale name (`ru` | `en`) or your own object of translations; without the prop the locale of the application is taken. The caption of the "Now" button and the default format depend on the locale: in `en` the time is 12-hour, so the hours are shown from 1 to 12 even without `format12h` — only the AM/PM switch is added by it.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const time = ref('09:35 AM');
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsTimePicker v-model="time" locale="en" format12h now-btn mask="hh:mm A" />
+
+    <span class="text-200 text-content-secondary">v-model: {{ time }}</span>
+  </div>
+</template>
+```
+
+## States
+
+`disabled` turns the clock off and dims it, `readonly` keeps the usual look but forbids changing the value — both with the arrows and from the keyboard.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsTimePicker } from '@central-design-system/components';
+import { ref } from 'vue';
+
+const time = ref('15:22');
+</script>
+
+<template>
+  <div class="flex flex-wrap justify-center gap-4">
+    <CdsTimePicker v-model="time" disabled now-btn />
+    <CdsTimePicker v-model="time" readonly now-btn />
+  </div>
+</template>
+```
+
+## Booking a meeting
+
+Meetings are scheduled within working hours and by quarters of an hour — `allowed-hours` and `allowed-minutes` leave only such values. The user cannot pick a time that would have to be rejected later.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCard, CdsTimePicker } from '@central-design-system/components';
+import { computed, ref } from 'vue';
+
+const time = ref('10:30');
+
+// Встречи назначают в рабочие часы и по четвертям часа.
+const allowedHours = [9, 10, 11, 12, 13, 14, 15, 16, 17];
+const allowedMinutes = [0, 15, 30, 45];
+
+const pad = (value: number) => String(value).padStart(2, '0');
+
+const finish = computed(() => {
+  const [hour, minute] = time.value.split(':').map(Number);
+  const end = hour * 60 + minute + 30;
+
+  return `${pad(Math.floor(end / 60))}:${pad(end % 60)}`;
+});
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <CdsCard class="w-fit">
+      <CdsTimePicker v-model="time" :allowed-hours="allowedHours" :allowed-minutes="allowedMinutes" />
+    </CdsCard>
+
+    <span class="text-200 text-content-secondary">Встреча: {{ time }} — {{ finish }} (30 минут)</span>
+  </div>
+</template>
+```
+
+## A field with a time
+
+Most often the clock lives not on the page but in a menu next to a text field. There is no ready field for the time alone in the system — assemble the control out of [CdsTextInput](../cds-text-input/api.md), a [CdsMenu](../cds-menu/api.md) with `activator="parent"` and the clock: all the props and slots of the field and the menu stay available to you. For the manual input add a mask: we recommend the lightweight (2.5 KB) [Maska](https://github.com/beholdr/maska) library. If you need the date together with the time, the field already exists — [CdsDateInput](../cds-date-input/api.md) with `with-time`.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsMenu, CdsTextInput, CdsTimePicker } from '@central-design-system/components';
+import { vMaska } from 'maska/vue';
+import { ref } from 'vue';
+
+const time = ref('12:00');
+</script>
+
+<template>
+  <div class="w-[250px] m-auto">
+    <CdsTextInput v-model="time" v-maska="'##:##'" label="Время" placeholder="Выберите время" append-inner-icon="clock">
+      <CdsMenu activator="parent" :close-on-content-click="false">
+        <CdsTimePicker v-model="time" now-btn />
+      </CdsMenu>
+    </CdsTextInput>
+  </div>
+</template>
+```
+
+## A "from — to" interval
+
+Two clocks can share one rule: the `allowed-time` of the end looks at the start and does not let an earlier time be picked. When the start is moved past the end, the demo moves the end too — the rule and the code work in pairs.
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsCard, CdsTimePicker } from '@central-design-system/components';
+import { computed, ref, watch } from 'vue';
+
+const start = ref('09:00');
+const end = ref('18:00');
+
+const pad = (value: number) => String(value).padStart(2, '0');
+const toMinutes = (time: string) => {
+  const [hour, minute] = time.split(':').map(Number);
+
+  return hour * 60 + minute;
+};
+
+// Окончание не может быть раньше начала. Часы и минуты проверяются по отдельности:
+// сначала приходит только час, затем час вместе с выбранной минутой.
+const allowedEnd = (hour: number | null, minute: number | null) => {
+  if (hour === null) return true;
+  if (minute === null) return hour >= Math.floor(toMinutes(start.value) / 60);
+
+  return hour * 60 + minute > toMinutes(start.value);
+};
+
+// Начало сдвинули за окончание — переносим окончание на час вперёд.
+watch(start, () => {
+  if (toMinutes(end.value) > toMinutes(start.value)) return;
+
+  const shifted = Math.min(toMinutes(start.value) + 60, 23 * 60 + 59);
+  end.value = `${pad(Math.floor(shifted / 60))}:${pad(shifted % 60)}`;
+});
+
+const duration = computed(() => {
+  const total = toMinutes(end.value) - toMinutes(start.value);
+
+  return `${Math.floor(total / 60)} ч ${pad(total % 60)} мин`;
+});
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-2">
+    <div class="flex flex-wrap items-start justify-center gap-4">
+      <div class="flex flex-col items-center gap-1">
+        <span class="text-200 text-content-secondary">Начало</span>
+
+        <CdsCard class="w-fit">
+          <CdsTimePicker v-model="start" />
+        </CdsCard>
+      </div>
+
+      <div class="flex flex-col items-center gap-1">
+        <span class="text-200 text-content-secondary">Окончание</span>
+
+        <CdsCard class="w-fit">
+          <CdsTimePicker v-model="end" :allowed-time="allowedEnd" />
+        </CdsCard>
+      </div>
+    </div>
+
+    <span class="text-200 text-content-secondary">Рабочий день: {{ duration }}</span>
+  </div>
+</template>
+```
+
+## Date and time
+
+The calendar does not pick the time and the clock does not pick the date — put them next to each other with a shared model and the same `DD.MM.YYYY HH:mm` mask: every component changes its own part of the string. In a field this pair is already assembled — turn on `with-time` on [CdsDateInput](../cds-date-input/api.md).
+
+**Example (SFC):**
+
+```vue
+<script setup lang="ts">
+import { CdsDatePicker, CdsDivider, CdsMenu, CdsTextInput, CdsTimePicker } from '@central-design-system/components';
+import { vMaska } from 'maska/vue';
+import { ref } from 'vue';
+
+const mask = 'DD.MM.YYYY HH:mm';
+const dateTime = ref('01.09.2026 09:30');
+</script>
+
+<template>
+  <div class="w-[250px] m-auto">
+    <CdsTextInput
+      v-model="dateTime"
+      v-maska="'##.##.#### ##:##'"
+      label="Дата и время"
+      placeholder="Выберите дату и время"
+      append-inner-icon="calendar"
+    >
+      <CdsMenu activator="parent" :close-on-content-click="false">
+        <div class="flex flex-col">
+          <CdsDatePicker v-model="dateTime" :mask="mask" />
+
+          <CdsDivider />
+
+          <CdsTimePicker v-model="dateTime" :mask="mask" now-btn />
+        </div>
+      </CdsMenu>
+    </CdsTextInput>
+  </div>
+</template>
+```

package/skills/cds-builder/references/components/cds-time-picker/guidelines.md

@@ -0,0 +1,10 @@
+# CdsTimePicker — 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 minute step is set through allowed-minutes — the needed value is reached in a couple of clicks. | Free minutes give 60 options where meetings are scheduled by quarters of an hour. |
+| Show the seconds only where they matter: in logs, timings, trading rules. | An extra field in a meeting booking makes the user fill in what nobody needs. |
+| In a Russian interface the 24-hour format is more familiar — it is the default one. | AM/PM asks the user to convert the time in their head and adds an extra switch. |

package/skills/cds-builder/references/components/cds-time-picker/tokens.md

@@ -0,0 +1,23 @@
+# CdsTimePicker — 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.
+
+## _CdsTimePicker.variables.scss
+
+```scss
+@use '../../../styles/tools';
+
+$time-picker-color: (
+  'color': rgb(var(--cds-color-content-primary)),
+) !default;
+$time-picker-paddings: var(--cds-spacing-200) var(--cds-spacing-300) !default;
+$time-picker-container-gap: var(--cds-spacing-300) !default;
+$time-picker-clock-gap: var(--cds-spacing-50) !default;
+$time-picker-input-padding: calc(var(--cds-spacing-200) - 1px) !default;
+$time-picker-input-width: tools.to-rem(32px) !default;
+$time-picker-input-height: calc(#{tools.to-rem(28px)} - var(--cds-border-200)) !default;
+$time-picker-ampm-offset: calc(var(--cds-spacing-300) - var(--cds-spacing-50)) !default;
+$time-picker-function-btn-size: tools.to-rem(16px) !default;
+```

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

@@ -0,0 +1,97 @@
+# CdsToast — 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 toast is a pop-up notification about the result of an action: the changes are saved, the file is uploaded, the request failed. It appears above the page, does not interrupt the work and closes itself once `timeout` runs out.
+
+## CdsToast
+
+**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. |
+| `bgColor` | `string \| undefined` | — | no | Background color of the component |
+| `closeDelay` | `string \| number \| undefined` | — | no | Delay in milliseconds before the component closes. Works only together with open-on-hover. |
+| `closeOnBack` | `boolean \| undefined` | `false` | 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 |
+| `collapsed` | `{ width: number; height: number; } \| undefined` | — | no | Collapsed state of a toast in the queue: the size the toast collapses to. Managed by the CdsToastQueue component. |
+| `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`.) |
+| `content` | `string \| number \| undefined` | — | no | Content displayed in the component. |
+| `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 |
+| `icon` | `false \| IconValue \| undefined` | `null` | no | Icon before the content. Taken from `status` by default; `false` hides the icon. |
+| `loading` | `boolean \| undefined` | — | no | Shows a loading indicator instead of the icon. |
+| `location` | `Anchor \| null \| undefined` | `'top center'` | no | Position of the element relative to its container, for example "top left", "center", "bottom right". |
+| `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. |
+| `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. |
+| `position` | `"absolute" \| "static" \| "fixed" \| "relative" \| "sticky" \| undefined` | — | no | CSS positioning of the component — the value of the `position` property |
+| `prependAvatar` | `string \| undefined` | — | no | Source of the avatar image before the content. Takes priority over the icon. |
+| `queueGap` | `number \| undefined` | — | no | Gap between the toasts in the queue, in pixels. Managed by the CdsToastQueue component. |
+| `queueIndex` | `number \| undefined` | — | no | Index of the toast in the queue. Managed by the CdsToastQueue component. |
+| `reverseTimer` | `boolean \| undefined` | — | no | Reverses the timer bar: it fills up instead of draining. |
+| `status` | `"progress" \| "success" \| "danger" \| "warning" \| "info" \| undefined` | `'info'` | no | Semantic status — drives the color and the default icon. |
+| `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. |
+| `text` | `string \| number \| undefined` | — | no | Text displayed in the component. |
+| `textColor` | `string \| undefined` | — | no | Text color of the component |
+| `theme` | `string \| undefined` | — | no | Component theme |
+| `timeout` | `string \| number \| undefined` | `5000` | no | Delay in milliseconds before the toast hides automatically. The value `-1` turns auto-closing off. |
+| `timer` | `boolean \| "top" \| "bottom" \| undefined` | `false` | no | Shows the timer bar until auto-closing: `true`/`top` — on top, `bottom` — at the bottom. |
+| `timerColor` | `string \| undefined` | — | no | Color of the timer bar. |
+| `title` | `string \| undefined` | — | no | Heading of the toast. |
+| `transition` | `string \| boolean \| (TransitionProps & { component?: Component \| undefined; }) \| null \| undefined` | `'cds-toast-transition'` | no | Transition animation |
+| `vertical` | `boolean \| undefined` | — | no | Vertical layout: the actions move below the 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` | `[]` | The enter animation finished. |
+| `afterLeave` | `[]` | The leave animation finished. |
+| `update:modelValue` | `[value: boolean]` | The visibility of the toast changed. |
+
+**Slots**
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `actions` | `{ isActive: Ref<boolean, boolean>; }` | Slot for the actions of the toast. |
+| `activator` | `{ isActive: boolean; props: Record<string, any>; }` | Slot for the element that acts as the activator of the toast. |
+| `default` | `any` | Main content of the toast. |
+| `header` | `any` | Slot for the full-width header of the toast. |
+| `prepend` | `any` | Slot before the content (icon, avatar or loading indicator). |
+| `text` | `any` | Text slot. |
+| `title` | `any` | Heading slot. |
+
+**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. |