@dxtmisha/wiki 0.39.5 → 0.39.6

package/src/media/descriptions/wikiDescriptionsModal.ts

@@ -1,143 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for Modal component properties
- *
- * Описания свойств компонента Modal
- */
-export const wikiDescriptionsModal: StorybookComponentsDescriptionItem = {
-  name: 'Modal',
-  description: {
-    en: 'Simplified wrapper over a Window component for creating centered modal dialogs',
-    ru: 'Упрощенная обертка над компонентом Window для создания центрированных модальных диалогов'
-  },
-  possibilities: {
-    en: [
-      'pre-configured modal window with centered positioning',
-      'overlay backdrop with background blocking',
-      'close on the ESC key and click outside',
-      'integration with scrollbar for long content',
-      'slots for title, content and footer customization',
-      'lifecycle events (preparation, opening, closing)',
-      'close a button with a customizable icon',
-      'programmatic control via a v-model:open',
-      'focus management and keyboard navigation',
-      'responsive design with mobile optimization'
-    ],
-    ru: [
-      'предварительно настроенное модальное окно с центрированием',
-      'оверлей с блокировкой фона',
-      'закрытие по ESC и клику вне области',
-      'интеграция со скроллбаром для длинного контента',
-      'слоты для настройки заголовка, содержимого и подвала',
-      'события жизненного цикла (preparation, opening, closing)',
-      'кнопка закрытия с настраиваемой иконкой',
-      'программное управление через v-model:open',
-      'управление фокусом и клавиатурная навигация',
-      'адаптивный дизайн с оптимизацией для мобильных'
-    ]
-  },
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  render: `
-      <DesignComponent v-bind="args">
-        <template #control="{binds}">
-          <button class="wiki-storybook-button" v-bind="binds">Open Modal</button>
-        </template>
-
-        <template #default>
-          <h4>Modal Component Overview</h4>
-          <p>Modal is a specialized wrapper around the Window component with preset adaptive mode set to 'modal'. It provides a simplified API for creating centered modal dialogs without needing to configure positioning and adaptive behavior manually.</p>
-
-          <p>The component automatically handles common modal dialog scenarios including confirmations, forms, alerts, and content previews. It manages focus, scroll behavior, and keyboard navigation to ensure accessibility and optimal user experience across different devices and screen sizes.</p>
-
-          <h4>Best Practices</h4>
-          <p>Use modals sparingly and only for content that genuinely requires immediate attention. Ensure modals have clear actions (confirm/cancel), provide easy ways to dismiss them, and avoid nesting modals within modals. The component should be large enough to display content comfortably but not so large that it overwhelms the screen.</p>
-
-          <h4>Relationship with Window</h4>
-          <p>Modal is essentially Window with <code>adaptive="modal"</code> preset, simplifying the usage for standard dialog scenarios. All Window properties, slots, and events are available in a Modal component.</p>
-        </template>
-      </DesignComponent>
-    `,
-  stories: [
-    {
-      id: 'ModalVModel',
-      name: {
-        en: 'Two-way binding (v-model)',
-        ru: 'Двусторонняя привязка (v-model)'
-      },
-      setup: `
-      return {
-        open: ref(false)
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex">
-            <button class="wiki-storybook-button" @click="open = true">Open via v-model ({{ open }})</button>
-          </div>
-
-          <DesignComponent v-model:open="open">
-            <div class="wiki-storybook-item--padding">Your content here</div>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'ModalAllSlots',
-      name: {
-        en: 'All slots demonstration',
-        ru: 'Демонстрация всех слотов'
-      },
-      template: `
-        <DesignComponent>
-          <template #control="{binds}">
-            <button class="wiki-storybook-button" v-bind="binds">Open Modal with All Slots</button>
-          </template>
-
-          <template #title>Title slot</template>
-          <template #default>Default slot</template>
-          <template #footer>Footer slot</template>
-        </DesignComponent>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'Modal'} type={'modal'}/>
-<StorybookDescriptions componentName={'Window'} type={'v-model'}/>
-<Canvas of={Component.ModalVModel}/>
-
-<StorybookDescriptions componentName={'Modal'} type={'differences'}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'Window'} type={'event.window'}/>
-<StorybookDescriptions componentName={'Event'} type={'bars'}/>
-<StorybookDescriptions componentName={'Event'} type={'actions'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'Window'} type={'expose'}/>
-    `,
-    slots: `
-<Canvas of={Component.ModalAllSlots}/>
-<StorybookDescriptions componentName={'Window'} type={'slots'}/>
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <Modal embedded open v-bind="args">
-    <template #default>
-      <p>This is a modal dialog.</p>
-    </template>
-  </Modal>
-</div>
-    `,
-    description: `
-Simplified wrapper over the Window component pre-configured for centered modal dialogs. Provides a high-level API for typical interaction patterns like confirmation prompts, info alerts, and data entry forms.
-Features automatic overlay management, background interaction blocking, and body scroll locking. Includes built-in focus trapping, Esc key dismissal, and responsive layout optimization (adaptive="modal") for consistent mobile and desktop UX.
-Controlled via the v-model:open prop and utilizes #control, #title, and #footer slots for modular layout. Use for critical user notifications, blocking confirmation steps, or focused sub-tasks requiring immediate attention.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsMotionAxis.ts

@@ -1,196 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for MotionAxis component
- *
- * Описания компонента MotionAxis
- */
-export const wikiDescriptionsMotionAxis: StorybookComponentsDescriptionItem = {
-  name: 'MotionAxis',
-  description: {
-    en: 'A component for organizing transitions between elements (slides). Allows animating content changes along X, Y, Z axes with slide effects. Supports automatic animation direction detection, container height management, and lazy loading (DOM).',
-    ru: 'Компонент для организации переходов между элементами (слайдами). Позволяет анимировать смену контента по осям X, Y, Z с эффектами сдвига. Поддерживает автоматическое определение направления анимации, управление высотой контейнера и ленивую загрузку (DOM).'
-  },
-  possibilities: {
-    en: [
-      'Slide transition animation along X, Y, Z axes',
-      'Automatic or manual direction control (next/back)',
-      'Smooth container height animation to fit content',
-      'Slide lifecycle management in DOM (inDom, inDomSlide)',
-      'Slot support for each slide'
-    ],
-    ru: [
-      'Анимация смены слайдов по осям X, Y, Z',
-      'Автоматическое или ручное управление направлением (вперед/назад)',
-      'Плавная анимация высоты контейнера под контент',
-      'Управление жизненным циклом слайдов в DOM (inDom, inDomSlide)',
-      'Поддержка слотов для каждого слайда'
-    ]
-  },
-  render: `
-    <DesignComponent v-bind="args">
-      <template #slide1>
-        <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.</p>
-        </div>
-      </template>
-      <template #slide2>
-        <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-          <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.</p>
-        </div>
-      </template>
-      <template #slide3>
-        <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.</p>
-          <p>Donec ullamcorper nulla non metus auctor fringilla. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
-        </div>
-      </template>
-    </DesignComponent>
-`,
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  stories: [
-    {
-      id: 'MotionAxisBasic',
-      name: {
-        en: 'Basic Usage',
-        ru: 'Базовое использование'
-      },
-      setup: `
-      const selected = ref('slide1')
-      return { selected }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex">
-            <button class="wiki-storybook-button" @click="selected = 'slide1'">1</button>
-            <button class="wiki-storybook-button" @click="selected = 'slide2'">2</button>
-            <button class="wiki-storybook-button" @click="selected = 'slide3'">3</button>
-          </div>
-
-          <DesignComponent :selected="selected">
-            <template #slide1>
-              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-                <p>Short content.</p>
-              </div>
-            </template>
-            <template #slide2>
-              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-                <p>Medium length content. This slide has a bit more text to demonstrate the transition.</p>
-              </div>
-            </template>
-            <template #slide3>
-              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-                <p>Long content. This slide contains significantly more text to demonstrate the smooth height animation capabilities of the MotionAxis component. It should expand the container height when active.</p>
-                <p>Additional paragraph for extra height.</p>
-              </div>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'MotionAxisScroll',
-      name: {
-        en: 'Scroll Management',
-        ru: 'Управление скроллом'
-      },
-      setup: `
-      const selected = ref('short')
-      return { selected }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column design-component__scroll">
-          <div class="wiki-storybook-flex">
-            <button class="wiki-storybook-button" @click="selected = 'short'">short</button>
-            <button class="wiki-storybook-button" @click="selected = 'long'">long</button>
-          </div>
-
-          <DesignComponent :selected="selected">
-            <template #short>
-              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-                Short content
-              </div>
-            </template>
-            <template #long>
-              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-                Long content that causes scrolling.<br>
-                Scroll down to see more.<br>
-                ...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>...<br>
-                End of content.
-              </div>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'MotionAxisVModel',
-      name: {
-        en: 'Two-way binding (v-model)',
-        ru: 'Двусторонняя привязка (v-model)'
-      },
-      setup: `
-      const selected = ref('slide1')
-      return { selected }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex-align-center">
-            <span>Current value: {{ selected }}</span>
-            <button class="wiki-storybook-button" @click="selected = 'slide1'">Select Slide 1</button>
-            <button class="wiki-storybook-button" @click="selected = 'slide2'">Select Slide 2</button>
-            <button class="wiki-storybook-button" @click="selected = 'slide3'">Select Slide 3</button>
-          </div>
-
-          <DesignComponent v-model:selected="selected">
-            <template #slide1>
-              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-                Slide 1
-              </div>
-            </template>
-            <template #slide2>
-              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-                Slide 2
-              </div>
-            </template>
-            <template #slide3>
-              <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
-                Slide 3
-              </div>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'MotionAxis'} type={'motionAxis'}/>
-<Canvas of={Component.MotionAxisBasic}/>
-
-<StorybookDescriptions componentName={'MotionAxis'} type={'classes'}/>
-<Canvas of={Component.MotionAxisScroll}/>
-
-<StorybookDescriptions componentName={'MotionAxis'} type={'v-model'}/>
-<Canvas of={Component.MotionAxisVModel}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'MotionAxis'} type={'events'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'MotionAxis'} type={'expose'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'MotionAxis'} type={'slots'}/>
-    `
-  },
-  ai: {
-    description: `
-Low-level layout component for animating transitions between multiple content areas (slides) along X, Y, or Z axes. Ideal for multi-step wizards, tabbed content, and gallery-like interfaces requiring direction-aware motion.
-Features automated animation direction detection (next/back), smooth container height transitions, and lazy loading support to manage slide life-cycles in the DOM. Supports horizontal slide, vertical flip, and depth-based transitions with customizable speed and easing.
-Controlled via the selected prop or v-model:selected, utilizing numbered slide slots (#slide1, #slide2, etc.) for content distribution. Use when content needs to transition within a fixed or dynamic container while maintaining high visual polish and spatial orientation.
-    `
-  }
-}

package/src/media/descriptions/wikiDescriptionsMotionTransform.ts

@@ -1,235 +0,0 @@
-import type { StorybookComponentsDescriptionItem } from '../../types/storybookTypes'
-
-/**
- * Descriptions for MotionTransform utility
- *
- * Описания утилиты MotionTransform
- */
-export const wikiDescriptionsMotionTransform: StorybookComponentsDescriptionItem = {
-  name: 'MotionTransform',
-  description: {
-    en: 'Low-level motion system that manages element transforms, state transitions, and interaction events for contextual UI like windows and menus',
-    ru: 'Низкоуровневая система анимаций, управляющая трансформациями элементов, переходами состояний и событиями взаимодействия для контекстных интерфейсов (окна, меню)'
-  },
-  possibilities: {
-    en: [
-      'centralized state for open/show/teleport with computed accessors',
-      'size measurement and CSS variable updates for smooth animations',
-      'teleport control for window-like behavior and off-DOM rendering',
-      'click/close/auto-close handling with ignore areas',
-      'programmatic API for open/close/toggle and state transitions',
-      'designed to be embedded into higher-level components (Window, Dropdown, etc.)'
-    ],
-    ru: [
-      'централизованное состояние open/show/teleport с вычисляемыми аксессорами',
-      'измерение размеров и обновление CSS‑переменных для плавных анимаций',
-      'управление телепортацией для «оконного» поведения и рендера вне DOM',
-      'обработка кликов/закрытия/автозакрытия с зонами игнорирования',
-      'программный API для open/close/toggle и переходов состояний',
-      'предназначена для встраивания в компоненты верхнего уровня (Window, Dropdown и т. п.)'
-    ]
-  },
-  render: `
-      <DesignComponent v-bind="args">
-        <template #head>
-          <div class="wiki-storybook-item--padding">
-            <h3>MotionTransform Demo</h3>
-            <p>Interactive demonstration of the MotionTransform system - a foundational utility for window-like behaviors and contextual UI interactions.</p>
-          </div>
-        </template>
-
-        <template #body="{classes}">
-          <div class="wiki-storybook-item--padding">
-            <h4>Motion Transform System</h4>
-            <p>MotionTransform provides the foundational motion and state management system that powers interactive UI components like windows, dropdowns, and contextual menus. It handles element transforms, animation states, and user interaction events with smooth animations.</p>
-
-            <h4>Core Components</h4>
-            <p>The motion system consists of specialized managers: State handles open/show/teleport flags, Element provides DOM helpers, Size manages CSS variables for animations, Event coordinates click handling, and Go offers programmatic control methods.</p>
-
-            <h4>Developer Integration</h4>
-            <p>MotionTransform is designed as a low-level utility for component developers. It provides APIs for managing UI behaviors while handling DOM manipulation and animation orchestration behind the scenes.</p>
-            <div class="wiki-storybook-flex">
-              <button :class="classes.close" class="wiki-storybook-button wiki-storybook-button--text">Cancel</button>
-              <button class="wiki-storybook-button">Confirm</button>
-            </div>
-          </div>
-        </template>
-      </DesignComponent>
-    `,
-  import: [
-    'import { ref } from \'vue\''
-  ],
-  stories: [
-    {
-      id: 'MotionTransformAnimationHeadPosition',
-      name: {
-        en: 'Head position animation',
-        ru: 'Анимация позиции заголовка'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent animationHeadPosition="top">
-            <template #head>
-              <div class="wiki-storybook-item--padding">
-                <h4>animationHeadPosition: top</h4>
-                <p>Click to open — Head stays at the top during transition</p>
-              </div>
-            </template>
-            <template #body>
-              <div class="wiki-storybook-item--padding">
-                <h5>Top Position Animation</h5>
-                <p>With <code>animationHeadPosition="top"</code>, the head element maintains its position at the top of the container throughout the entire show/hide animation sequence.</p>
-                <p>This behavior is ideal for interfaces where the header serves as a stable reference point, such as dropdown menus, navigation panels, or content that expands downward from a fixed trigger.</p>
-                <p>The animation creates a smooth vertical expansion effect while keeping the header visually anchored, providing users with a clear understanding of the content's origin point.</p>
-                <ul>
-                  <li>Header remains stationary during animation</li>
-                  <li>Content expands/collapses below the header</li>
-                  <li>Provides stable visual reference point</li>
-                  <li>Best for downward-expanding interfaces</li>
-                </ul>
-              </div>
-            </template>
-          </DesignComponent>
-
-          <DesignComponent animationHeadPosition="toBottom">
-            <template #head>
-              <div class="wiki-storybook-item--padding">
-                <h4>animationHeadPosition: toBottom</h4>
-                <p>Click to open — Head moves toward the bottom with content</p>
-              </div>
-            </template>
-            <template #body>
-              <div class="wiki-storybook-item--padding">
-                <h5>Bottom Movement Animation</h5>
-                <p>When using <code>animationHeadPosition="toBottom"</code>, the head element travels together with the content during the animation, creating a unified motion experience.</p>
-                <p>This approach is particularly effective for accordion-style interfaces, collapsible sections, or any scenario where the header and content should move as a cohesive unit.</p>
-                <p>The animation provides a more dynamic feeling, as both header and content participate in the motion, creating a sense of the entire section expanding or contracting as one entity.</p>
-                <ul>
-                  <li>Header and content move together</li>
-                  <li>Creates unified motion experience</li>
-                  <li>Ideal for accordion-style interfaces</li>
-                  <li>Provides cohesive visual feedback</li>
-                </ul>
-              </div>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    },
-    {
-      id: 'MotionTransformIgnore',
-      name: {
-        en: 'Ignore zones',
-        ru: 'Зоны игнорирования'
-      },
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent ignoreSelector=".mt-ignore">
-            <template #head>
-              <div class="wiki-storybook-item--padding">
-                <h4>Ignore zones behavior</h4>
-                <p>This text acts as the trigger that opens the content area</p>
-              </div>
-            </template>
-            <template #body>
-              <div class="wiki-storybook-item--padding">
-                <p>Clicks on elements matching <code>.mt-ignore</code> are not treated as outside and won’t trigger auto close.</p>
-                <p>This is useful for trigger buttons, helper controls, and nested interactive areas that must remain active without closing the window.</p>
-                <p>Try it: click any button with <code>.mt-ignore</code> outside or inside — the window stays open; clicks on other outside areas will close it.</p>
-                <p>Use <code>ignore</code> when you have a concrete DOM element, and <code>ignoreSelector</code> when zones are multiple or dynamic.</p>
-                <p>Keep selectors specific to avoid accidental matches and unintended auto‑close blocking.</p>
-                <ul>
-                  <li>Pattern: a trigger with class <code>.mt-ignore</code> outside and inside the window</li>
-                  <li>Expectation: clicks on the trigger are ignored by outside‑check logic, the window doesn’t close</li>
-                </ul>
-              </div>
-            </template>
-          </DesignComponent>
-
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding mt-ignore">
-            <h5>External ignore zone</h5>
-            <p>This area has class <code>.mt-ignore</code> and demonstrates how clicks here won't close the window below.</p>
-            <button class="wiki-storybook-button">Ignored button</button>
-          </div>
-        </div>
-      `
-    },
-    {
-      id: 'MotionTransformVModel',
-      name: {
-        en: 'Two-way binding (v-model)',
-        ru: 'Двусторонняя привязка (v-model)'
-      },
-      setup: `
-      return {
-        open: ref(false)
-      }
-      `,
-      template: `
-        <div class="wiki-storybook-flex-column">
-          <div class="wiki-storybook-flex">
-            <button class="wiki-storybook-button" @click="open = !open">Toggle ({{ open }})</button>
-          </div>
-          
-          <DesignComponent v-model:open="open">
-            <template #head>
-              <div class="wiki-storybook-item--padding">
-                <h4>v-model controlled</h4>
-                <p>This component's visibility is controlled by an external ref via v-model:open.</p>
-              </div>
-            </template>
-            <template #body>
-              <div class="wiki-storybook-item--padding">
-                <p>Content is {{ open ? 'visible' : 'hidden' }}</p>
-                <p>Using <code>v-model:open</code> provides a clean and declarative way to manage the component's state from the parent. It simplifies the logic by removing the need for manual event handling (<code>@update:open</code>) and prop binding (<code>:open</code>).</p>
-                <p>This two-way binding is ideal for scenarios where the parent component needs to know about and control the visibility of the MotionTransform component, such as in complex forms or coordinated UI interactions.</p>
-              </div>
-            </template>
-          </DesignComponent>
-        </div>
-      `
-    }
-  ],
-  documentation: {
-    body: `
-<StorybookDescriptions componentName={'MotionTransform'} type={'motionTransform'}/>
-<StorybookDescriptions componentName={'MotionTransform'} type={'classes'}/>
-<StorybookDescriptions componentName={'MotionTransform'} type={'animationHeadPosition'}/>
-<Canvas of={Component.MotionTransformAnimationHeadPosition}/>
-<StorybookDescriptions componentName={'MotionTransform'} type={'ignore'}/>
-<Canvas of={Component.MotionTransformIgnore}/>
-<StorybookDescriptions componentName={'MotionTransform'} type={'v-model'}/>
-<Canvas of={Component.MotionTransformVModel}/>
-    `,
-    events: `
-<StorybookDescriptions componentName={'MotionTransform'} type={'events'}/>
-    `,
-    expose: `
-<StorybookDescriptions componentName={'MotionTransform'} type={'expose'}/>
-    `,
-    slots: `
-<StorybookDescriptions componentName={'MotionTransform'} type={'slots'}/>
-    `
-  },
-  ai: {
-    render: `
-<div :class="classDemo.item">
-  <MotionTransform :auto-close="false" v-bind="args">
-    <template #head>
-      <button class="wiki-storybook-button">Toggle Content</button>
-    </template>
-    <template #body>
-      <div class="wiki-storybook-item--padding">
-        <p>Expandable content goes here.</p>
-      </div>
-    </template>
-  </MotionTransform>
-</div>
-    `,
-    description: `
-Low-level motion engine designed for complex component transitions like windows, dropdowns, and collapsible sections. Provides a unified system for managing element transforms, off-DOM teleportation, and interaction patterns (click-outside, etc.).
-Features dynamic size measurement with automatic CSS variable updates for smooth hardware-accelerated animations. Includes a robust state manager (open/show/teleport), focus trapping, and customizable interaction ignoring areas for triggers.
-Controlled via the v-model:open prop and utilizes #head and #body slots for layout. Use as a foundational utility when building custom interactive components requiring sophisticated motion, state transitions, and high-performance DOM manipulation.
-    `
-  }
-}