@dxtmisha/wiki 0.25.1 → 0.39.1

package/src/media/descriptions/wikiDescriptionsTooltip.ts

@@ -85,5 +85,52 @@ export const wikiDescriptionsTooltip: StorybookComponentsDescriptionItem = {
 <StorybookDescriptions componentName={'Slot'} type={'description'}/>
 <StorybookDescriptions componentName={'Slot'} type={'body'}/>
     `
+  },
+  ai: {
+    render: `
+<div :class="classDemo.item">
+  <Tooltip open embedded v-bind="args">
+    <template #control="{ binds }">
+      <button v-bind="binds">Hover me</button>
+    </template>
+  </Tooltip>
+</div>
+    `,
+    description: `
+Tooltip is a floating component that displays contextual information when a user interacts with a trigger element (hover or focus).
+It is designed to provide auxiliary descriptions, labels, or helper text.
+
+**Key Features:**
+1. **Trigger Integration:**
+   - Uses the \`#control\` slot to wrap the target element.
+   - Provides \`binds\` (events and ARIA attributes) that **must** be applied to the trigger element using \`v-bind="binds"\`.
+
+2. **Content & Layout:**
+   - \`label\`: Primary text content.
+   - \`description\`: Secondary text content.
+   - \`#default\`: Slot for custom HTML content.
+   - Includes a built-in \`Arrow\` component pointing to the trigger.
+
+3. **Behavior:**
+   - **Positioning:** Automatically calculates position (top, bottom, left, right) to stay within the viewport.
+   - **Timing:** Configurable \`delay\` (open) and \`delayHide\` (close).
+   - **Interaction:** Supports \`interactive\` mode (allows hovering the tooltip content) and \`disabled\` state.
+
+**Usage Examples:**
+
+- **Basic Label:**
+  \`<Tooltip label="Save changes">
+     <template #control="{ binds }">
+       <button v-bind="binds">Save</button>
+     </template>
+   </Tooltip>\`
+
+- **With Description:**
+  \`<Tooltip label="User Profile" description="Click to edit settings">
+     <template #control="{ binds }">
+       <Avatar v-bind="binds" />
+     </template>
+   </Tooltip>\`
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsWindow.ts

@@ -207,5 +207,65 @@ export const wikiDescriptionsWindow: StorybookComponentsDescriptionItem = {
     slots: `
 <StorybookDescriptions componentName={'Window'} type={'slots'}/>
     `
+  },
+  ai: {
+    render: `
+      <div :class="classDemo.item">
+        <Window embedded open v-bind="args">
+            <template #control="{ binds }">
+              <button v-bind="binds">Open Window</button>
+            </template>
+            <template #title>
+              <h3>Window Title</h3>
+            </template>
+            <template #default>
+              <p>Window content goes here. This is a demonstration of the window component capabilities.</p>
+              <p>It can contain text, images, forms, or any other content.</p>
+            </template>
+            <template #footer>
+              <div>
+                <button>Cancel</button>
+                <button>Save</button>
+              </div>
+            </template>
+          </Window>
+      </div>
+    `,
+    description: `
+**Note:** This is a low-level component. Use it only if specialized components like \`Modal\`, \`Dialog\`, or \`Menu\` do not fit your requirements.
+
+Window is a versatile container component used for Modals, Popups, Dropdowns, and Cards.
+It automatically handles z-index, focus management, teleportation, and scroll locking.
+
+**Note:** The \`embedded\` prop is used only for documentation examples to render the component inline. Do not use it in production code.
+
+**When to use:**
+1. **Modal/Dialog:** When a centered box overlays the page content. Use default props.
+2. **Dropdown/Popover:** When a box appears next to a button/trigger. Use \`axis="y"\` (vertical) or \`axis="x"\` (horizontal).
+3. **Select Menu:** When a list overlays the trigger exactly. Use \`axis="on"\`.
+4. **Card/Panel:** When you need the visual style of a window but embedded in the page flow. Use \`staticMode\`.
+
+**Key Features:**
+- **Structure:**
+  - \`#control\`: The trigger element (button, link). Bind \`binds\` to this element to enable automatic toggling.
+  - \`#title\`: The header area of the window.
+  - \`#default\`: The main content area (automatically wrapped in a Scrollbar).
+  - \`#footer\`: The bottom area for action buttons.
+
+- **Positioning (\`axis\`):**
+  - \`undefined\` (default): Centered modal.
+  - \`y\`: Opens vertically relative to the trigger (like a standard dropdown).
+  - \`x\`: Opens horizontally relative to the trigger (like a nested menu).
+  - \`on\`: Overlays the trigger element.
+
+- **Behavior:**
+  - \`staticMode\`: Disables teleportation and absolute positioning, rendering it as a regular block.
+  - \`persistent\`: Prevents closing when clicking outside or pressing Escape.
+  - \`closeButton\`: Automatically adds a close button in the top-right corner.
+
+**Example:**
+\`<Window axis="y">\` creates a dropdown menu.
+\`<Window :open="true">\` creates a modal dialog.
+    `
   }
 }

package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.en.mdx

@@ -0,0 +1,25 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Functions/getCurrentDate - Get current date'/>
+
+# `getCurrentDate`
+
+Returns the current date in the specified format. The function is a wrapper around the `Datetime` class and allows you to quickly get a formatted string of the current time.
+
+**Parameters:**
+- `format: GeoDate` — type of date format for output (default `'datetime'`). Supports values: `'date'`, `'time'`, `'datetime'`, `'full'`, and others.
+
+**Returns:**
+Current date as a string.
+
+```typescript
+import { getCurrentDate } from '@dxtmisha/functional-basic'
+
+// Standard format (datetime)
+const now = getCurrentDate()
+// Result: "2024-03-15 14:30"
+
+// Date only
+const date = getCurrentDate('date')
+// Result: "2024-03-15"
+```

package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.ru.mdx

@@ -0,0 +1,25 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Functions/getCurrentDate - Получение текущей даты'/>
+
+# `getCurrentDate`
+
+Возвращает текущую дату в указанном формате. Функция является оберткой над классом `Datetime` и позволяет быстро получить отформатированную строку текущего времени.
+
+**Параметры:**
+- `format: GeoDate` — тип формата даты вывода (по умолчанию `'datetime'`). Поддерживает значения: `'date'`, `'time'`, `'datetime'`, `'full'` и другие.
+
+**Возвращает:**
+Текущая дата в виде строки.
+
+```typescript
+import { getCurrentDate } from '@dxtmisha/functional-basic'
+
+// Стандартный формат (datetime)
+const now = getCurrentDate()
+// Результат: "2024-03-15 14:30"
+
+// Только дата
+const date = getCurrentDate('date')
+// Результат: "2024-03-15"
+```

package/src/media/functional/functional-basic/functions/getCurrentDate/getCurrentDate.vi.mdx

@@ -0,0 +1,25 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Functions/getCurrentDate - Lấy ngày hiện tại'/>
+
+# `getCurrentDate`
+
+Trả về ngày hiện tại theo định dạng được chỉ định. Hàm này là một wrapper bao quanh lớp `Datetime` và cho phép bạn nhanh chóng lấy chuỗi thời gian hiện tại đã được định dạng.
+
+**Tham số:**
+- `format: GeoDate` — loại định dạng ngày đầu ra (mặc định là `'datetime'`). Hỗ trợ các giá trị: `'date'`, `'time'`, `'datetime'`, `'full'` và các giá trị khác.
+
+**Trả về:**
+Ngày hiện tại dưới dạng chuỗi.
+
+```typescript
+import { getCurrentDate } from '@dxtmisha/functional-basic'
+
+// Định dạng chuẩn (datetime)
+const now = getCurrentDate()
+// Kết quả: "2024-03-15 14:30"
+
+// Chỉ ngày
+const date = getCurrentDate('date')
+// Kết quả: "2024-03-15"
+```

package/src/media/functional/functional-basic/functions/isEnter/isEnter.en.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/en/functional-basic/Functions/isEnter - Check for Enter or Space key press'/>
+
+# `isEnter`
+
+Checks if the pressed key is `Enter` or `Space`. This function is useful for handling keyboard events when you need to react to action confirmation or element activation, while supporting accessibility (a11y) and older browsers.
+
+**Parameters:**
+- `event: KeyboardEvent` — the keyboard event object.
+
+**Returns:**
+`boolean` — `true` if the `Enter` or `Space` key is pressed, otherwise `false`.
+
+**Supported event properties:**
+The function checks the following event properties for maximum compatibility:
+- `code`: `'Enter'`, `'Space'`
+- `key`: `'Enter'`, `' '`, `'Spacebar'`
+- `keyCode`: `13`, `32`
+
+```typescript
+import { isEnter } from '@dxtmisha/functional-basic'
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (isEnter(event)) {
+    console.log('Enter or Space pressed')
+    // Perform action
+  }
+}
+```

package/src/media/functional/functional-basic/functions/isEnter/isEnter.ru.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/ru/functional-basic/Functions/isEnter - Проверка нажатия Enter или Space'/>
+
+# `isEnter`
+
+Проверяет, является ли нажатая клавиша `Enter` или `Space`. Функция полезна для обработки событий клавиатуры, когда необходимо реагировать на подтверждение действия или активацию элемента, поддерживая при этом доступность (a11y) и старые браузеры.
+
+**Параметры:**
+- `event: KeyboardEvent` — объект события клавиатуры.
+
+**Возвращает:**
+`boolean` — `true`, если нажата клавиша `Enter` или `Space`, иначе `false`.
+
+**Поддерживаемые свойства события:**
+Функция проверяет следующие свойства события для максимальной совместимости:
+- `code`: `'Enter'`, `'Space'`
+- `key`: `'Enter'`, `' '`, `'Spacebar'`
+- `keyCode`: `13`, `32`
+
+```typescript
+import { isEnter } from '@dxtmisha/functional-basic'
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (isEnter(event)) {
+    console.log('Нажат Enter или Space')
+    // Выполнить действие
+  }
+}
+```

package/src/media/functional/functional-basic/functions/isEnter/isEnter.vi.mdx

@@ -0,0 +1,30 @@
+import {Meta} from '@storybook/addon-docs/blocks'
+
+<Meta title='@dxtmisha/vi/functional-basic/Functions/isEnter - Kiểm tra nhấn phím Enter hoặc Space'/>
+
+# `isEnter`
+
+Kiểm tra xem phím được nhấn có phải là `Enter` hoặc `Space` hay không. Hàm này hữu ích để xử lý các sự kiện bàn phím khi bạn cần phản ứng với việc xác nhận hành động hoặc kích hoạt phần tử, đồng thời hỗ trợ khả năng truy cập (a11y) và các trình duyệt cũ.
+
+**Tham số:**
+- `event: KeyboardEvent` — đối tượng sự kiện bàn phím.
+
+**Trả về:**
+`boolean` — `true` nếu phím `Enter` hoặc `Space` được nhấn, ngược lại là `false`.
+
+**Các thuộc tính sự kiện được hỗ trợ:**
+Hàm kiểm tra các thuộc tính sự kiện sau để đảm bảo khả năng tương thích tối đa:
+- `code`: `'Enter'`, `'Space'`
+- `key`: `'Enter'`, `' '`, `'Spacebar'`
+- `keyCode`: `13`, `32`
+
+```typescript
+import { isEnter } from '@dxtmisha/functional-basic'
+
+const onKeyDown = (event: KeyboardEvent) => {
+  if (isEnter(event)) {
+    console.log('Đã nhấn Enter hoặc Space')
+    // Thực hiện hành động
+  }
+}
+```

package/src/media/mdx/Image/flag.en.mdx

@@ -0,0 +1,23 @@
+## Flags
+
+The `Image` component supports displaying country flags. A special format for the `value` property is used for this purpose.
+
+**Formats:**
+
+- `flag-xx` — standard flag (where `xx` is the ISO 3166-1 alpha-2 country code)
+- `f-xx` — compressed flag (where `xx` is the ISO 3166-1 alpha-2 country code)
+
+**Features:**
+
+- Automatic flag type detection by prefix
+- Support for all countries according to ISO 3166-1 alpha-2 standard
+
+```html
+<template>
+  <!-- Standard US flag -->
+  <Image value="flag-us" />
+
+  <!-- Compressed Germany flag -->
+  <Image value="f-de" />
+</template>
+```

package/src/media/mdx/Image/flag.ru.mdx

@@ -0,0 +1,23 @@
+## Флаги
+
+Компонент `Image` поддерживает отображение флагов стран. Для этого используется специальный формат значения свойства `value`.
+
+**Форматы:**
+
+- `flag-xx` — стандартный флаг (где `xx` — код страны ISO 3166-1 alpha-2)
+- `f-xx` — сжатый флаг (где `xx` — код страны ISO 3166-1 alpha-2)
+
+**Особенности:**
+
+- Автоматическое определение типа флага по префиксу
+- Поддержка всех стран по стандарту ISO 3166-1 alpha-2
+
+```html
+<template>
+  <!-- Стандартный флаг США -->
+  <Image value="flag-us" />
+
+  <!-- Сжатый флаг Германии -->
+  <Image value="f-de" />
+</template>
+```

package/src/media/mdx/Image/image.en.mdx

@@ -1,24 +1,24 @@
-Universal component for displaying images, icons, and PDF documents with advanced size, positioning, and adaptivity control.
+Universal component for displaying images, icons, flags, and PDF documents with advanced size, positioning, and adaptability controls.
 
-Image provides flexible API for working with various types of visual content: from simple icons to complex images with cropping and adaptive scaling. The component automatically detects the source type, supports coordinate positioning, adaptive resizing, and various fill modes.
+Image provides a flexible API for working with various types of visual content. The component automatically detects the source type (image, icon, color, file), selects the optimal rendering method (`<img>`, `background-image`, `<picture>`, `<object>`, or icon font), and supports advanced cropping and adaptation features.
 
 **Key Features:**
 
-- Support for multiple source types (icons, URLs, Files, PDFs)
-- Adaptive scaling with aspect ratio preservation
-- Coordinate-based cropping and precise positioning
-- Fill modes: auto, contain, cover
-- Automatic content type detection
-- CSS variable integration for flexible styling
-- Load events with complete type and data information
+- Support for multiple source types (URL, File, PDF, Material Icons, flags, colors)
+- Flexible rendering with automatic choice between background and img tag
+- Adaptive scaling with aspect ratio preservation and srcset support
+- Display control via fill modes and coordinate cropping
+- Styling support with masks and color filling
+- Integration with Material Symbols and system flags
 
 **Typical Use Cases:**
 
-- Displaying user avatars and uploaded images
-- Working with interface icons
-- PDF document previews
-- Adaptive image galleries
-- Background images with cropping
+- Responsive images with picture and srcset
+- Interface icons (Material Design or SVG masks)
+- User avatars with automatic cropping
+- Previews of uploaded files and PDF documents
+- Background images with complex positioning
+- Displaying country flags via CSS sprites
 
 ```html
 <script setup>
@@ -26,20 +26,25 @@ import { ref } from 'vue'
 import { Image } from '@dxtmisha/constructor'
 
 const imageUrl = ref('https://example.com/image.jpg')
-
-function handleLoad(data) {
-  console.log('Image loaded:', data.type, data.image)
-}
 </script>
 
 <template>
+  <!-- Background image with cropping -->
   <Image
     :value="imageUrl"
     size="cover"
-    adaptive
-    :coordinator="[0, 0, 100, 100]"
-    @load="handleLoad"
+    :coordinator="[10, 10, 10, 10]"
+  />
+
+  <!-- SEO-friendly image -->
+  <Image
+    :value="imageUrl"
+    tag-img
+    alt="Description"
   />
+
+  <!-- Material Design Icon -->
+  <Image value="filled-home" />
 </template>
 ```
 

package/src/media/mdx/Image/image.ru.mdx

@@ -1,24 +1,24 @@
-Универсальный компонент для отображения изображений, иконок и PDF-документов с расширенными возможностями управления размером, позиционированием и адаптивностью.
+Универсальный компонент для отображения изображений, иконок, флагов и PDF-документов с расширенными возможностями управления размером, позиционированием и адаптивностью.
 
-Image предоставляет гибкий API для работы с различными типами визуального контента: от простых иконок до сложных изображений с кадрированием и адаптивным масштабированием. Компонент автоматически определяет тип источника, поддерживает координатное позиционирование, адаптивное изменение размеров и различные режимы заполнения.
+Image предоставляет гибкий API для работы с различными типами визуального контента. Компонент автоматически определяет тип источника (изображение, иконка, цвет, файл), выбирает оптимальный способ рендеринга (`<img>`, `background-image`, `<picture>`, `<object>` или иконочный шрифт) и поддерживает продвинутые функции кадрирования и адаптации.
 
 **Основные возможности:**
 
-- Поддержка множества типов источников (иконки, URL, File, PDF)
-- Адаптивное масштабирование с сохранением пропорций
-- Координатное кадрирование и точное позиционирование
-- Режимы заполнения: auto, contain, cover
-- Автоматическое определение типа контента
-- Работа с CSS-переменными для гибкой стилизации
-- События загрузки с полной информацией о типе и данных
+- Поддержка множества типов источников (URL, File, PDF, Material Icons, флаги, цвета)
+- Гибкий рендеринг с автоматическим выбором между фоном и тегом img
+- Адаптивное масштабирование с сохранением пропорций и поддержкой srcset
+- Управление отображением через режимы заполнения и координатное кадрирование
+- Стилизация с поддержкой масок и заливки цветом
+- Интеграция с Material Symbols и системными флагами
 
 **Типичные сценарии использования:**
 
-- Отображение пользовательских аватаров и загруженных изображений
-- Работа с иконками в интерфейсе
-- Превью PDF-документов
-- Адаптивные галереи изображений
-- Фоновые изображения с кадрированием
+- Адаптивные изображения с picture и srcset
+- Иконки интерфейса (Material Design или SVG маски)
+- Аватары пользователей с автоматическим кадрированием
+- Превью загружаемых файлов и PDF документов
+- Фоновые изображения со сложным позиционированием
+- Отображение флагов стран через CSS спрайты
 
 ```html
 <script setup>
@@ -26,22 +26,26 @@ import { ref } from 'vue'
 import { Image } from '@dxtmisha/constructor'
 
 const imageUrl = ref('https://example.com/image.jpg')
-
-function handleLoad(data) {
-  console.log('Image loaded:', data.type, data.image)
-}
 </script>
 
 <template>
+  <!-- Фоновое изображение с кадрированием -->
   <Image
     :value="imageUrl"
     size="cover"
-    adaptive
-    :coordinator="[0, 0, 100, 100]"
-    @load="handleLoad"
+    :coordinator="[10, 10, 10, 10]"
   />
+
+  <!-- SEO-дружественное изображение -->
+  <Image
+    :value="imageUrl"
+    tag-img
+    alt="Описание"
+  />
+
+  <!-- Иконка Material Design -->
+  <Image value="filled-home" />
 </template>
 ```
 
 > Компонент автоматически управляет типом контента и оптимизирует отображение в зависимости от источника.
-

package/src/media/mdx/Image/wikiMdxImage.ts

@@ -10,6 +10,8 @@ import adaptiveEn from './adaptive.en.mdx'
 import adaptiveRu from './adaptive.ru.mdx'
 import imgTagEn from './img-tag.en.mdx'
 import imgTagRu from './img-tag.ru.mdx'
+import flagEn from './flag.en.mdx'
+import flagRu from './flag.ru.mdx'
 
 import eventLoadEn from './event.load.en.mdx'
 import eventLoadRu from './event.load.ru.mdx'
@@ -40,6 +42,10 @@ export const wikiMdxImage: StorybookComponentsMdxItem = {
       en: imgTagEn,
       ru: imgTagRu
     },
+    'flag': {
+      en: flagEn,
+      ru: flagRu
+    },
     'event.load': {
       en: eventLoadEn,
       ru: eventLoadRu

package/src/media/mdx/Page/page.en.mdx

@@ -0,0 +1,38 @@
+## Description
+
+A top-level semantic container component designed to wrap the main content of a page. It uses the `<main>` tag by default.
+
+Page provides capabilities for displaying main headlines, labels, descriptions, captions, and icons. The main purpose of the component is to designate the unique part of the document's content, which is critical for accessibility and SEO. The headline is rendered as `<h1>` by default.
+
+**Key Features:**
+
+- Semantic wrapper for main content (`<main>` tag)
+- Support for main headlines (default `<h1>`), labels, descriptions, and captions
+- Support for icons
+- Customizable layout and spacing
+- Full support for slots for content customization
+
+**Typical Use Cases:**
+
+- Wrapper for unique page content
+- Main application screen
+- Article or documentation page
+- Root element for routed components (views)
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Page
+    headline="Main Page Title"
+    label="Category"
+    description="Brief description of the page content"
+  >
+    <p>Unique page content...</p>
+  </Page>
+</template>
+```
+
+> Page should be used once per page (or per active view) and should not include repeated navigation elements.

package/src/media/mdx/Page/page.ru.mdx

@@ -0,0 +1,38 @@
+## Описание
+
+Семантический компонент-контейнер верхнего уровня, предназначенный для обертки основного содержимого страницы. По умолчанию использует тег `<main>`.
+
+Page предоставляет возможности для отображения главных заголовков, меток, описаний, подписей и иконок. Основное назначение компонента — обозначение уникальной части содержимого документа, что критически важно для доступности (accessibility) и SEO. Заголовок по умолчанию рендерится как `<h1>`.
+
+**Основные возможности:**
+
+- Семантическая обертка основного контента (тег `<main>`)
+- Поддержка главных заголовков (по умолчанию `<h1>`), меток, описаний и подписей
+- Поддержка иконок
+- Настраиваемый макет и отступы
+- Полная поддержка слотов для кастомизации контента
+
+**Типичные сценарии использования:**
+
+- Обертка для уникального контента страницы
+- Главный экран приложения
+- Страница статьи или документации
+- Корневой элемент для маршрутизируемых компонентов (views)
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Page
+    headline="Главный заголовок страницы"
+    label="Категория"
+    description="Краткое описание содержимого страницы"
+  >
+    <p>Уникальный контент страницы...</p>
+  </Page>
+</template>
+```
+
+> Page должен использоваться один раз на странице (или в активном view) и не должен включать повторяющиеся элементы навигации.

package/src/media/mdx/Page/wikiMdxPage.ts

@@ -0,0 +1,19 @@
+import type { StorybookComponentsMdxItem } from '../../../types/storybookTypes'
+
+import pageEn from './page.en.mdx'
+import pageRu from './page.ru.mdx'
+
+/**
+ * MDX files for Page component
+ *
+ * MDX файлы для компонента Page
+ */
+export const wikiMdxPage: StorybookComponentsMdxItem = {
+  name: 'Page',
+  descriptions: {
+    block: {
+      en: pageEn,
+      ru: pageRu
+    }
+  }
+}

package/src/media/mdx/Section/section.en.mdx

@@ -0,0 +1,38 @@
+## Description
+
+A semantic container component designed for grouping related content. It uses the `<section>` tag by default.
+
+Section provides capabilities for displaying headlines, labels, descriptions, captions, and icons. The main purpose of the component is to designate thematic sections of a document, which improves the semantics and accessibility of the page. The headline is rendered as `<h2>` by default.
+
+**Key Features:**
+
+- Semantic content grouping (`<section>` tag)
+- Support for headlines (default `<h2>`), labels, descriptions, and captions
+- Support for icons
+- Customizable layout and spacing
+- Full support for slots for content customization
+
+**Typical Use Cases:**
+
+- Thematic page sections
+- Content grouping in articles
+- Information blocks with second-level headings
+- Landing page sections
+
+```html
+<script setup>
+import { ref } from 'vue'
+</script>
+
+<template>
+  <Section
+    headline="Section Headline"
+    label="Label"
+    description="Description of this section's content"
+  >
+    <p>Main section content...</p>
+  </Section>
+</template>
+```
+
+> Section is the semantically correct choice for dividing a page into large logical blocks.