@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/descriptions/wikiDescriptionsIcon.ts

@@ -93,26 +93,9 @@ export const wikiDescriptionsIcon: StorybookComponentsDescriptionItem = {
       },
       components: ['Skeleton'],
       template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Basic</div>
-            <DesignSkeleton>
-              <DesignComponent icon="home"/>
-            </DesignSkeleton>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Active</div>
-            <DesignSkeleton :active="true">
-              <DesignComponent isSkeleton icon="home" rounded="md"/>
-            </DesignSkeleton>
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--xs wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Hidden</div>
-            <DesignSkeleton :active="true">
-              <DesignComponent icon="home"/>
-            </DesignSkeleton>
-          </div>
-        </div>
+        <DesignSkeleton :active="true">
+          <DesignComponent isSkeleton icon="home" rounded="md"/>
+        </DesignSkeleton>
       `
     }
 
@@ -143,36 +126,9 @@ export const wikiDescriptionsIcon: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-Icon is a component for displaying vector icons, typically from the Material Symbols library.
-It supports state switching (active/inactive), directionality (RTL), and integration with the design system's palette.
-
-**Key Features:**
-1. **Icon Source:**
-   - \`icon\`: The name of the icon to display (e.g., "home", "menu", "arrow_forward").
-     Uses the project's icon set (usually Material Symbols).
-
-2. **Interactive States:**
-   - \`active\`: Boolean flag to toggle the active state.
-   - \`iconActive\`: The icon name to show when \`active\` is \`true\`.
-     Ideal for toggle buttons (e.g., "favorite_border" vs "favorite").
-
-3. **Styling:**
-   - \`size\`: Controls the dimensions of the icon (e.g., "sm", "md", "lg").
-   - \`asPalette\`: Applies the active palette color to the icon.
-   - \`inverse\`: Inverts the colors, useful for dark backgrounds or contrast.
-
-4. **Directionality (\`dir\`):**
-   - Automatically mirrors the icon for RTL (Right-to-Left) languages if the icon is directional (like arrows).
-
-5. **Loading:**
-   - \`isSkeleton\`: Renders a loading placeholder (skeleton) instead of the icon.
-
-**Usage Examples:**
-
-- **Simple Icon:** \`<Icon icon="search" />\`
-- **Toggle Icon:** \`<Icon icon="visibility_off" iconActive="visibility" :active="isVisible" />\`
-- **Directional Arrow:** \`<Icon icon="arrow_forward" dir />\`
-- **Large Palette Icon:** \`<Icon icon="star" size="xl" asPalette />\`
+Vector icon component, typically utilizing the Material Symbols library. Supports dynamic state management, automatic mirroring for RTL languages, and deep integration with the design system's palette.
+Features toggle-able states (active/inactive) with specific icons for each, built-in skeleton loading (isSkeleton), and directionality adaptation. Customizing via size, palette, and inverse props ensures visual consistency across all themes.
+Controlled via the icon and iconActive props and various styling flags. Use for navigation links, action buttons, status indicators, or any UI element requiring concise visual representation.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsImage.ts

@@ -189,42 +189,9 @@ export const wikiDescriptionsImage: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Image is a universal component for displaying graphic content.
-It automatically determines the type of content (image, icon, file, PDF)
-based on the \`value\` property.
-
-**Key Features:**
-1. **Automatic Type Detection:**
-   - **Image:** If \`value\` is a URL to an image or a File object.
-   - **Icon:** If \`value\` is a string matching an icon name
-     (e.g., "home", "filled-home"). Supports Material Symbols/Icons.
-   - **PDF:** If \`value\` is a URL to a PDF file.
-   - **Color:** If \`value\` is a color string (e.g., "#ff0000").
-
-2. **Display Modes (\`size\`):**
-   - \`auto\` (default): Standard behavior.
-   - \`contain\`: Scales the image to fit within the container while maintaining aspect ratio.
-   - \`cover\`: Scales the image to cover the container, cropping if necessary.
-
-3. **Rendering Method (\`tagImg\`):**
-   - \`false\` (default): Renders as a background image (\`background-image\`) on a \`<span>\`.
-     Useful for precise positioning and sizing.
-   - \`true\`: Renders as a standard \`<img>\` tag. Required for SEO (alt text), lazy loading,
-     and accessibility.
-
-4. **Adaptivity (\`adaptive\`):**
-   - Allows scaling the image relative to its original size using \`objectWidth\` and \`objectHeight\`.
-
-5. **Advanced Positioning:**
-   - \`coordinator\`: Array \`[top, right, bottom, left]\` for cropping or positioning the background.
-   - \`x\`, \`y\`: Direct control over background position.
-
-**Usage Examples:**
-
-- **Icon:** \`<Image value="home" />\`
-- **Image (Background):** \`<Image value="https://example.com/img.jpg" size="cover" />\`
-- **Image (Tag):** \`<Image value="https://example.com/img.jpg" tag-img alt="Description" />\`
-- **PDF:** \`<Image value="https://example.com/doc.pdf" />\`
+Universal component for displaying graphic content, including images, Material icons, and PDF files. Automatically detects the content type based on the value string or File object provided.
+Features multiple display modes (contain, cover, auto), adaptive scaling (objectWidth/Height), and standard img tag support for SEO and lazy loading. Includes advanced positioning via coordinator and x/y props.
+Controlled via the value prop and various sizing/rendering flags. Use for avatars, product photos, system icons, or embedded PDF documents requiring specific cropping and aspect ratio control.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsInput.ts

@@ -22,7 +22,7 @@ export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
       'counter for character limits',
       'navigation arrows for numeric and selection inputs',
       'autocomplete, spellcheck and autocorrect support',
-      'integrated with Field component for consistent styling'
+      'integrated with a Field component for consistent styling'
     ],
     ru: [
       'множественные типы ввода: text, number, email, password, tel, url, date, time и другие',
@@ -132,9 +132,9 @@ export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
       },
       template: `
         <div class="wiki-storybook-flex-column">
-          <DesignComponent type="tel" mask="+1 (###) ###-####" placeholder="+1 (555) 000-0000" label="Phone" />
-          <DesignComponent type="text" mask="#### #### #### ####" placeholder="0000 0000 0000 0000" label="Card" />
-          <DesignComponent type="tel" mask="+1 (###) ###-####" :mask-visible="false" label="No placeholder" />
+          <DesignComponent type="tel" mask="+1 (***) ***-****" placeholder="+1 (555) 000-0000" label="Phone" />
+          <DesignComponent type="text" mask="**** **** **** ****" placeholder="0000 0000 0000 0000" label="Card" />
+          <DesignComponent type="tel" mask="+1 (***) ***-****" :mask-visible="false" label="No placeholder" />
         </div>
       `
     },
@@ -154,8 +154,9 @@ export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
       template: `
         <div class="wiki-storybook-flex-column">
           <div class="wiki-storybook-flex">
+            <span>Current value: {{ inputValue }}</span>
             <button class="wiki-storybook-button" @click="inputValue = 'Changed value'">Set text</button>
-            <button class="wiki-storybook-button" @click="inputValue = ''">Clear</button>
+            <button class="wiki-storybook-button wiki-storybook-button-warning" @click="inputValue = ''">Clear</button>
           </div>
           <DesignComponent
             v-model="inputValue"
@@ -163,20 +164,20 @@ export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
             label="Text input"
             placeholder="Enter text"
           />
-          <div>Value: {{ inputValue }}</div>
 
           <div class="wiki-storybook-flex">
+            <span>Current value: {{ maskValue }}</span>
             <button class="wiki-storybook-button" @click="maskValue = '2022-05-13'">Set date</button>
-            <button class="wiki-storybook-button" @click="maskValue = ''">Clear</button>
+            <button class="wiki-storybook-button wiki-storybook-button-warning" @click="maskValue = ''">Clear</button>
           </div>
           <DesignComponent
             v-model="maskValue"
             type="date"
             label="Date input"
           />
-          <div>Mask: {{ maskValue }}</div>
 
           <div class="wiki-storybook-flex">
+            <span>Current value: {{ numberValue }}</span>
             <button class="wiki-storybook-button" @click="numberValue += 10">+10</button>
             <button class="wiki-storybook-button" @click="numberValue -= 10">-10</button>
           </div>
@@ -186,7 +187,6 @@ export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
             label="Number input"
             :step="1"
           />
-          <div>Number: {{ numberValue }}</div>
         </div>
       `
     },
@@ -256,58 +256,9 @@ export const wikiDescriptionsInput: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-Input is the primary component for getting user data. It wraps the native \`<input>\` element and adds support for floating labels, validation, masking, and formatting.
-
-**When to use:**
-1. **Text Fields:** Names, emails, addresses, search queries.
-2. **Numeric Data:** Quantities, prices (use \`type="number"\` or \`type="currency"\`).
-3. **Formatted Inputs:** Phone numbers, credit cards (use \`mask\`).
-4. **Passwords:** Secure entry with visibility toggle (use \`type="password"\`).
-5. **Date/Time:** Date selection (use \`type="date"\`, \`type="time"\`).
-
-**Key Properties & Logic:**
-
-1. **Input Types (\`type\`):**
-   - **Standard:** \`text\`, \`email\`, \`search\`, \`url\`, \`tel\`.
-   - **Password:** \`password\`. Automatically adds a "show/hide" eye icon.
-   - **Native Number:** \`number\`. Uses browser's native number input.
-   - **Formatted Number:** \`number-format\`. A text input that formats numbers with thousands separators (e.g., "1,234.56") based on \`language\`.
-   - **Currency:** \`currency\`. Formats input as money. Requires \`currency\` prop (e.g., "USD").
-   - **Date/Time:** \`date\`, \`datetime\`, \`time\`, \`year-month\`.
-
-2. **Masking (\`mask\`):**
-   - Applies a strict pattern to the input.
-   - Example: \`mask="+1 (###) ###-####"\` for phones.
-   - The component automatically handles placeholder characters and cursor movement.
-   - Use \`match\` to restrict allowed characters (e.g., \`match="[0-9]"\`).
-
-3. **Validation:**
-   - **Error State:** Set \`validationMessage\` to show an error text and turn the field red.
-   - **Regex Pattern:** Use \`pattern\` to validate the final value.
-   - **Input Filter:** Use \`match\` to prevent typing invalid characters.
-
-4. **Field Structure (Visuals):**
-   - **Label:** \`label\` prop. Can be floating or static.
-   - **Placeholder:** \`placeholder\` prop. Shown when empty.
-   - **Helper Text:** \`helperMessage\` prop. Shown below the input.
-   - **Icons:** \`icon\` (left/leading) and \`iconTrailing\` (right/trailing).
-   - **Affixes:** \`prefix\` (text before value, e.g., "$") and \`suffix\` (text after value, e.g., "kg").
-   - **Counter:** \`counter\` prop. Shows character count (requires \`maxlength\`).
-
-5. **Behavior:**
-   - **Loading:** \`loading\` prop shows a spinner/skeleton.
-   - **Clearable:** \`cancel\` prop adds a clear (X) button.
-   - **Read-only/Disabled:** \`readonly\` and \`disabled\` props.
-
-**Design Identification:**
-- **Standard Input:** A box or underline with text.
-- **With Icon:** Input with a symbol on the left or right.
-- **With Prefix/Suffix:** Input containing fixed text like "$" or "items".
-- **Error State:** Input with red border/text and a message below.
-- **Password:** Input with dots and an eye icon.
-
-**Example:**
-\`<Input label="Email" type="email" icon="mail" />\`
+Primary component for user data entry, wrapping the native <input> element with enhanced functionality. Supports floating labels, validation, masking, and multiple formatting modes (numeric, currency, password).
+Features built-in support for input masks (e.g., phone numbers), automatic currency/number formatting, and password visibility toggles. Includes field affixes (prefix/suffix), leading/trailing icons, and a character counter.
+Controlled via v-model and type props, emitting standard input/change events. Use for all text-based data collection, from simple names to complex formatted financial or identification data.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsList.ts

@@ -38,25 +38,6 @@ export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
     ]
   },
   stories: [
-    {
-      id: 'ListHighlight',
-      name: {
-        en: 'Highlighting',
-        ru: 'Выделение'
-      },
-      template: `
-        <DesignComponent
-          :list="[
-            {label: 'Project index example', value: 'projects', icon: 'folder'},
-            {label: 'Advanced context options', value: 'experiments', icon: 'tune'},
-            {label: 'Next examination notes', value: 'example', icon: 'description'},
-            {label: 'User experience metrics', value: 'express', icon: 'insights'}
-          ]"
-          highlight="exam"
-          :highlightLengthStart="4"
-        />
-      `
-    },
     {
       id: 'ListLiteMode',
       name: {
@@ -65,8 +46,8 @@ export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
       },
       template: `
         <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">Without lite</div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">Without lite</div>
             <DesignComponent
               :liteThreshold="3"
               :list="[
@@ -78,8 +59,8 @@ export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
               ]"
             />
           </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--md">
-            <div class="wiki-storybook-item__label">With lite</div>
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <div class="wiki-storybook-item__label wiki-storybook-item__label--static">With lite</div>
             <DesignComponent
               :lite="true"
               :liteThreshold="3"
@@ -94,6 +75,29 @@ export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
           </div>
         </div>
       `
+    },
+    {
+      id: 'ListHighlight',
+      name: {
+        en: 'Highlighting',
+        ru: 'Выделение'
+      },
+      template: `
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <DesignComponent
+              :list="[
+                {label: 'Project index example', value: 'projects', icon: 'folder'},
+                {label: 'Advanced context options', value: 'experiments', icon: 'tune'},
+                {label: 'Next examination notes', value: 'example', icon: 'description'},
+                {label: 'User experience metrics', value: 'express', icon: 'insights'}
+              ]"
+              highlight="exam"
+              :highlightLengthStart="4"
+            />
+          </div>
+        </div>
+      `
     }
   ],
   documentation: {
@@ -119,33 +123,9 @@ export const wikiDescriptionsList: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-List is a core structural component for rendering interactive lists.
-It is the engine behind Dropdowns, Selects, and Navigation Menus.
-
-**Key Features:**
-1. **Data Structure:**
-   - \`list\`: Array of objects. Supports types: \`item\` (default), \`group\`, \`menu\`, \`line\` (separator), \`space\`, \`subtitle\`, \`html\`.
-   - Items properties: \`label\`, \`value\`, \`icon\`, \`description\`, \`disabled\`, \`to\` (link).
-
-2. **Interaction:**
-   - **Selection:** \`v-model:selected\` (single or array).
-   - **Keyboard:** Full arrow key navigation, Enter to select.
-   - **Focus:** Manages internal focus.
-
-3. **Search & Filtering:**
-   - \`highlight\`: Text to highlight.
-   - \`filterMode\`: Hides non-matching items.
-
-**Usage Examples:**
-
-- **Basic List:**
-  \`<List :list="[{ label: 'Home', icon: 'home' }, { label: 'Settings', icon: 'settings' }]" />\`
-
-- **With Selection:**
-  \`<List v-model:selected="current" :list="options" />\`
-
-- **Filtered List:**
-  \`<List :list="data" :highlight="searchText" filter-mode />\`
+Core engine for rendering interactive, searchable, and hierarchical lists. Serves as the foundation for complex components like Selects, Dropdowns, and multi-level Navigation Menus.
+Features support for multiple item types (group, menu, line, html), real-time search highlighting, and full keyboard navigation. Includes automatic focus management, ARIA accessibility roles, and a "lite" rendering mode for performance optimization with large datasets.
+Controlled via the list prop for data and v-model:selected for state tracking. Use as the primary building block for any interface requiring item selection, structured data display, or interactive command menus.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsListGroup.ts

@@ -90,47 +90,10 @@ export const wikiDescriptionsListGroup: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-ListGroup is a structural component designed to group related list items, often providing collapsible/expandable functionality.
-It serves as a container that manages the visibility of nested items, creating a hierarchical structure within lists or menus.
-
-**Key Features:**
-1. **Collapsible Logic:**
-   - Wraps content in a \`MotionTransform\` component for smooth height animations.
-   - Can be controlled programmatically via the \`open\` prop or interactively via the header.
-
-2. **Slots Structure:**
-   - \`#head\`: The header area acting as the trigger. It receives \`binds\` (click handlers, ARIA attributes) that **must** be applied to the interactive element (e.g., \`ListItem\`) to enable toggling.
-   - \`#list\`: The content area where nested \`ListItem\` or other components are placed.
-
-3. **Styling:**
-   - \`divider\`: Adds a visual separator if enabled.
-   - Automatically handles ARIA roles (\`role="group"\`).
-
-**When to use:**
-- **Navigation Menus:** To create submenus or grouped links (e.g., "Settings" -> "Profile", "Security").
-- **Categorized Lists:** To group items under a common heading.
-- **Accordions within Lists:** When list items need to expand to show details.
-
-**Usage Examples:**
-
-- **Basic Group:**
-  \`<ListGroup>
-     <template #head="{ binds }">
-       <ListItem v-bind="binds" label="My Group" icon="folder" />
-     </template>
-     <template #list>
-       <ListItem label="File 1" />
-       <ListItem label="File 2" />
-     </template>
-   </ListGroup>\`
-
-- **Open by Default:**
-  \`<ListGroup open>
-     <template #head="{ binds }">
-       <ListItem v-bind="binds" label="Always Open" />
-     </template>
-     <template #list>...</template>
-   </ListGroup>\`
-    `
+Structural component for grouping related list items into collapsible/expandable hierarchies. Manages the visual nesting and visibility of child elements, providing organized categorization within dense lists.
+Features smooth height animations via MotionTransform and integrated header functionality with automatic arrow rotation. Exposes localized bindings in the #head slot to correctly link triggers with their collapsible content.
+Controlled via the open prop and utilizes #head and #list slots for content distribution. Use for navigation submenus, categorized data lists, or accordion-style expanding rows.
+    `,
+    hide: true
   }
 }

package/src/media/descriptions/wikiDescriptionsListItem.ts

@@ -49,16 +49,20 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
         ru: 'Базовые'
       },
       template: `
-        <DesignComponent>Simple Item</DesignComponent>
-        <DesignComponent icon="person">Item with Icon</DesignComponent>
-        <DesignComponent description="Additional information">Item with Description</DesignComponent>
-        <DesignComponent focus>Focus</DesignComponent>
-        <DesignComponent selected>Selected</DesignComponent>
-        <DesignComponent disabled>Disabled</DesignComponent>
-        <DesignComponent readonly>Readonly</DesignComponent>
-        <DesignComponent prefix="01" suffix="Info">With Prefix & Suffix</DesignComponent>
-        <DesignComponent caption="Caption" description="Description text here">Full Content</DesignComponent>
-        <DesignComponent icon="star" badge="new">Icon with Badge</DesignComponent>
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <DesignComponent>Simple Item</DesignComponent>
+            <DesignComponent icon="person">Item with Icon</DesignComponent>
+            <DesignComponent description="Additional information">Item with Description</DesignComponent>
+            <DesignComponent focus>Focus</DesignComponent>
+            <DesignComponent selected>Selected</DesignComponent>
+            <DesignComponent disabled>Disabled</DesignComponent>
+            <DesignComponent readonly>Readonly</DesignComponent>
+            <DesignComponent prefix="01" suffix="Info">With Prefix & Suffix</DesignComponent>
+            <DesignComponent caption="Caption" description="Description text here">Full Content</DesignComponent>
+            <DesignComponent icon="star" badge="new">Icon with Badge</DesignComponent>
+          </div>
+        </div>
       `
     },
     {
@@ -68,10 +72,14 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
         ru: 'Выделение'
       },
       template: `
-        <DesignComponent highlight="search" label="Search result item"/>
-        <DesignComponent highlight="tex" :highlightLengthStart="3" label="Text with highlighting"/>
-        <DesignComponent highlight="te" :highlightLengthStart="3" label="Text without highlighting (too short)"/>
-        <DesignComponent highlight="example" :highlightLengthStart="2" label="Example text for highlighting"/>
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <DesignComponent highlight="search" label="Search result item"/>
+            <DesignComponent highlight="tex" :highlightLengthStart="3" label="Text with highlighting"/>
+            <DesignComponent highlight="te" :highlightLengthStart="3" label="Text without highlighting (too short)"/>
+            <DesignComponent highlight="example" :highlightLengthStart="2" label="Example text for highlighting"/>
+          </div>
+        </div>
       `
     },
     {
@@ -81,10 +89,14 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
         ru: 'Заливка'
       },
       template: `
-        <DesignComponent label="Default fill"/>
-        <DesignComponent fill="#ff0000" label="Red fill"/>
-        <DesignComponent fill="rgb(0, 128, 255)" label="Blue fill"/>
-        <DesignComponent fill="rgba(255, 165, 0, 0.7)" label="Orange transparent fill"/>
+        <div class="wiki-storybook-group">
+          <div class="wiki-storybook-item wiki-storybook-item--padding wiki-storybook-item--squared--md">
+            <DesignComponent label="Default fill"/>
+            <DesignComponent fill="#ff0000" label="Red fill"/>
+            <DesignComponent fill="rgb(0, 128, 255)" label="Blue fill"/>
+            <DesignComponent fill="rgba(255, 165, 0, 0.7)" label="Orange transparent fill"/>
+          </div>
+        </div>
       `
     },
     {
@@ -147,44 +159,9 @@ export const wikiDescriptionsListItem: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-ListItem is a versatile structural component used to render items within lists, menus, or navigation bars.
-It provides a standardized layout with slots for leading (prefix) and trailing (suffix) elements, along with a central content area.
-
-**Key Features:**
-1. **Layout Structure:**
-   - **Prefix:** Left-most area (e.g., for avatars, checkboxes, or icons).
-   - **Content:** Central area containing:
-     - \`label\`: Main title.
-     - \`caption\`: Meta text (above or next to label).
-     - \`description\`: Subtitle text (below label).
-   - **Suffix:** Right-side meta content (e.g., timestamp, status).
-   - **Trailing:** Far-right action area (e.g., arrow icon, badge).
-
-2. **Interaction:**
-   - **Navigation:** Renders as an \`<a>\` tag if \`href\` is provided.
-   - **Selection:** Supports \`selected\` state (useful for menus).
-   - **Feedback:** Includes ripple effect and hover/active states.
-   - **Disabled:** \`disabled\` prop prevents interaction.
-
-3. **Styling:**
-   - \`divider\` adds a bottom border.
-   - Supports \`badge\` integration via props.
-
-**Usage Examples:**
-
-- **Navigation Link:**
-  \`<ListItem href="/home" label="Home" icon="chevron_right">
-     <template #prefix>prefix</template>
-   </ListItem>\`
-
-- **User List Item:**
-  \`<ListItem label="John Doe" description="Online" divider>
-     <template #prefix><Avatar src="..."/></template>
-     <template #suffix>12:30 PM</template>
-   </ListItem>\`
-
-- **Menu Item:**
-  \`<ListItem label="Settings" icon="settings" selected />\`
+Versatile structural component for rendering items within lists, menus, or navigation bars. Provides a standardized layout with high-density content support for labels, descriptions, and metadata.
+Features dedicated slots for prefix (leading), content (central), suffix (trailing metadata), and trailing (action indicators). Includes built-in support for icons, badges, selected states, and interactive feedback like ripple effects.
+Controlled via label, description, and href/to props; renders as an <a> tag when navigating. Use for building navigation menus, data-rich list rows, or simple clickable interactive elements.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsListMenu.ts

@@ -77,7 +77,7 @@ export const wikiDescriptionsListMenu: StorybookComponentsDescriptionItem = {
   ai: {
     render: `
 <div :class="classDemo.item">
-  <ListMenu v-bind="args">
+  <ListMenu embedded :window-attrs="{open: true}" v-bind="args">
     <template #head="{ binds }">
       <span v-bind="binds as any">head</span>
     </template>
@@ -88,31 +88,10 @@ export const wikiDescriptionsListMenu: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-ListMenu is a specialized wrapper component designed to create dropdown menus or nested navigation lists.
-It utilizes the \`Window\` component logic with a menu preset to manage the visibility and positioning of a list of items relative to a trigger.
-
-**Key Features:**
-1. **Structure:**
-   - \`#head\`: The trigger area (Control). It exposes \`binds\` which **must** be applied to the interactive element (e.g., \`ListItem\`, \`Button\`) to toggle the menu.
-   - \`#list\`: The content area containing the menu items.
-
-2. **Behavior:**
-   - **Popup/Dropdown:** By default, it behaves like a dropdown menu (\`adaptive="menu"\`).
-   - **Interaction:** Manages click/hover events via \`binds\` to open/close the list.
-   - **Accessibility:** Automatically applies \`role="menu"\` and \`aria-haspopup\`.
-
-**Usage Examples:**
-
-- **List Item with Submenu:**
-  \`<ListMenu>
-     <template #head="{ binds }">
-       <ListItem v-bind="binds" label="Settings" icon="settings" />
-     </template>
-     <template #list>
-       <ListItem label="Profile" />
-       <ListItem label="Account" />
-     </template>
-   </ListMenu>\`
-    `
+Specialized wrapper component for creating dropdown menus or nested navigation trees. Utilizes dynamic window positioning to display a list of actions or sub-options relative to a trigger element.
+Features an adaptive menu preset managing visibility, positioning (popover vs inline), and interaction modes. Exposes standard binds in the #head slot to automate trigger setup and ensures smooth animations during state transitions.
+Controlled via the windowAttrs prop for positioning and utilizes #head and #list slots for trigger and content. Use for context menus, account settings dropdowns, or multi-level primary navigation links.
+    `,
+    hide: true
   }
 }

package/src/media/descriptions/wikiDescriptionsMask.ts

@@ -230,44 +230,10 @@ export const wikiDescriptionsMask: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
- **Note:** This component is already integrated into the \`Input\` component and should not be used directly.
-
- Mask is a low-level utility component responsible for controlling and formatting user input. It ensures that the data entered matches a predefined structure (mask) or data type (date, number, currency).
-
- **How it works:**
- The component intercepts input events (\`beforeinput\`, \`input\`) and validates each character against allowed patterns (\`match\`). It automatically inserts static characters defined in the \`mask\` (like parentheses, dashes) and skips over them during navigation. For complex types like \`date\` or \`number\`, it uses internal logic to validate ranges (e.g., month 1-12) and format values (e.g., adding thousands separators).
-
- **Key Properties & Usage:**
-
- 1. **Masking (\`mask\`):**
-    - **String:** A single pattern (e.g., \`+1 (***) ***-****\`). The \`*\` character (or value of \`special\`) represents an input slot. All other characters are treated as static literals and are automatically inserted/skipped.
-    - **Array:** A list of patterns (e.g., \`['(***) ***-****', '+1 (***) ***-****']\`). The component automatically selects the most appropriate mask based on the input length.
-
- 2. **Input Types (\`type\`):**
-    - \`text\` (default): Uses the \`mask\` pattern directly.
-    - \`number\`: Formats input as a number. Automatically adds thousands separators based on \`language\`.
-    - \`currency\`: Formats as currency. Requires \`currency\` prop (e.g., 'USD'). Uses \`fraction\` for decimal places.
-    - \`date\` / \`datetime\` / \`time\`: Enforces valid date/time entry. The format (e.g., DD.MM.YYYY vs MM/DD/YYYY) is determined by the \`language\` prop.
-
- 3. **Validation & Constraints:**
-    - \`match\`: A Regular Expression string (e.g., \`[0-9a-fA-F]\`). Only characters matching this pattern are accepted. Useful for Hex codes, alphanumeric IDs, etc.
-    - \`pattern\`: A Regex for validating the *completed* value.
-    - \`min\`, \`max\`: For number/currency types, restricts the value range.
-
- 4. **Customization:**
-    - \`special\`: Defines the placeholder character in the \`mask\`. Default is \`*\`. Change this if your mask needs to contain literal asterisks.
-    - \`language\`: Determines locale-specific formatting for dates and numbers (separators, date order).
-    - \`fraction\`: Specifies the number of decimal places for numbers/currency.
-
- **When to use (Design Identification):**
- - **Formatted Text:** Inputs that require specific formatting like Phone Numbers \`+1 (555) ...\`, Credit Cards \`0000 0000 ...\`, or License Plates.
- - **Financial Data:** Inputs for amounts that need thousands separators or currency symbols.
- - **Dates:** Inputs requiring strict date structure (DD.MM.YYYY).
-
- **Example Scenarios:**
- - **Phone:** \`<Mask mask="+1 (***) ***-****" match="[0-9]"/>\`
- - **Price:** \`<Mask type="currency" currency="USD" fraction="2"/>\`
- - **Date:** \`<Mask type="date" language="en-GB"/>\` (DD/MM/YYYY)
-     `
+Low-level input masking utility for controlling and formatting text, numeric, and date/time data entry. Intercepts input events to enforce strict patterns, automatically inserting literal characters and validating each keystroke against allowed rules.
+Features support for single or multiple patterns (auto-selection), specialized input types (currency, number-format), and locale-aware date/time validation. Includes granular control over allowed characters (match), decimal fractions, and value range constraints (min/max).
+Integrated primarily within the Input component; should generally not be used as a standalone element. Controlled via mask and type props, providing a foundation for phone numbers, credit card fields, and international financial inputs.
+    `,
+    hide: true
   }
 }