@dxtmisha/wiki 0.39.1 → 0.39.2

package/src/media/descriptions/wikiDescriptionsPage.ts

@@ -51,19 +51,13 @@ export const wikiDescriptionsPage: StorybookComponentsDescriptionItem = {
         ru: 'Базовые'
       },
       template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent>
-            <p>Simple page content wrapper.</p>
-          </DesignComponent>
-          <DesignComponent label="Documentation" description="Learn how to use the library">
-            <p>Welcome to the documentation page.</p>
-          </DesignComponent>
-          <DesignComponent headline="Dashboard Overview" label="Analytics">
-            <div style="height: 100px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
-              Chart Placeholder
-            </div>
-          </DesignComponent>
-        </div>
+        <DesignComponent
+          headline="User Dashboard"
+          label="Overview"
+          description="View your account analytics and recent activity."
+        >
+          <p>Welcome to your dashboard. Here you can find a summary of your performance and manage your account settings.</p>
+        </DesignComponent>
       `
     },
     {
@@ -88,6 +82,8 @@ export const wikiDescriptionsPage: StorybookComponentsDescriptionItem = {
     body: `
 <StorybookDescriptions componentName={'Page'} type={'block'}/>
 <Canvas of={Component.PageBasic}/>
+
+<StorybookDescriptions componentName={'Block'} type={'differences'}/>
 `,
     slots: `
 <Canvas of={Component.PageSlots}/>
@@ -112,44 +108,9 @@ export const wikiDescriptionsPage: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Page is a top-level structural component designed to wrap the main content of a view or document.
-It acts as a semantic container (typically rendering a \`<main>\` tag) and provides a standardized header structure.
-It inherits all functionality from the \`Block\` component.
-
-**Key Features:**
-1. **Semantic Structure:**
-   - Represents the main content area of the application.
-   - Provides a consistent layout for page headers.
-
-2. **Header Layout:**
-   - **Headline:** High-level category or breadcrumb-like text.
-   - **Label:** The primary page title.
-   - **Description:** Subtitle or page summary.
-   - **Icon:** Page icon.
-   - **Trailing:** Area for page-level actions (e.g., "Save", "Edit").
-
-3. **Customization:**
-   - Supports all \`Block\` props.
-   - Flexible content slot (\`#default\`).
-
-**When to use:**
-- As the root container for a route or view.
-- To provide a consistent title and action bar for a page.
-
-**Usage Examples:**
-
-- **Standard Page:**
-  \`<Page label="Home" description="Welcome back">
-     <DashboardWidgets />
-   </Page>\`
-
-- **Page with Actions:**
-  \`<Page headline="Settings" label="Profile">
-     <template #trailing>
-       <button>Save Changes</button>
-     </template>
-     <ProfileForm />
-   </Page>\`
+Top-level structural container designed to wrap the primary content of a view or document. Serves as a semantic root (typically rendering a <main> tag) and establishes the high-level document hierarchy with standardized headers.
+Features a comprehensive header structure inherited from the Block component, including support for headlines (h1), labels (page titles), descriptions, and trailing action areas. Automatically manages spacing and layout consistency for page-level navigation and identity.
+Controlled via headline, label, and icon props, with dedicated slots for content and actions (#default, #trailing). Use as the foundational wrapper for any route or unique screen to ensure accessibility and consistent information architecture.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsProgress.ts

@@ -159,21 +159,26 @@ export const wikiDescriptionsProgress: StorybookComponentsDescriptionItem = {
       }
       `,
       template: `
-        <div class="wiki-storybook-group">
-          <div class="wiki-storybook-item wiki-storybook-item--auto wiki-storybook-item--padding">
+        <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex">
             <button class="wiki-storybook-button" @click="onClick">Visible: {{ visible }}</button>
           </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Standard delays (360/200)</div>
-            <DesignComponent :visible="visible" circular position="static" delay="360" delayHide="200" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">Fast appearance (100/200)</div>
-            <DesignComponent :visible="visible" linear position="static" delay="100" delayHide="200" />
-          </div>
-          <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
-            <div class="wiki-storybook-item__label">No delays (0/0)</div>
-            <DesignComponent :visible="visible" linear position="static" delay="0" delayHide="0" />
+
+          <div>
+            <div class="wiki-storybook-group">
+              <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
+                <div class="wiki-storybook-item__label">Standard delays (360/200)</div>
+                <DesignComponent :visible="visible" circular position="static" delay="360" delayHide="200" />
+              </div>
+              <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
+                <div class="wiki-storybook-item__label">Fast appearance (100/200)</div>
+                <DesignComponent :visible="visible" linear position="static" delay="100" delayHide="200" />
+              </div>
+              <div class="wiki-storybook-item wiki-storybook-item--squared--lg wiki-storybook-item--widescreen wiki-storybook-item--center">
+                <div class="wiki-storybook-item__label">No delays (0/0)</div>
+                <DesignComponent :visible="visible" linear position="static" delay="0" delayHide="0" />
+              </div>
+            </div>
           </div>
         </div>
       `
@@ -207,33 +212,9 @@ export const wikiDescriptionsProgress: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Progress is a component for indicating the status of a process.
-It supports both linear and circular styles and can represent determinate (known percentage) or indeterminate (loading) states.
-
-**Key Features:**
-1. **Type:**
-   - \`linear\`: A horizontal bar. Standard for page loading, file uploads, or headers.
-   - \`circular\`: A spinner ring. Standard for button actions, block loading, or overlays.
-
-2. **State:**
-   - **Determinate:** Set \`value\` (number) and optionally \`max\`. Used when the progress percentage is known.
-   - **Indeterminate:** Set \`indeterminate\` ('type1', 'type2', 'type3'). Used when the wait time is unknown.
-
-3. **Positioning (\`position\`):**
-   - \`static\` (default): Renders in the normal document flow.
-   - \`top\`: Absolutely positioned at the top of the parent container.
-   - \`bottom\`: Absolutely positioned at the bottom of the parent container.
-
-4. **Styling:**
-   - \`dense\`: Reduces the height/size of the indicator.
-   - \`inverse\`: Adjusts colors for dark backgrounds.
-   - \`point\`: Adds a pulsing dot at the end of the bar (linear only).
-
-**Usage Examples:**
-
-- **Linear Indeterminate (Page Load):** \`<Progress linear indeterminate="type1" position="top" visible />\`
-- **Circular Determinate (Upload):** \`<Progress circular :value="45" visible />\`
-- **Button Loading:** \`<Progress circular dense indeterminate="type2" visible />\` (inside a button)
+Status indicator for ongoing processes, supporting both linear and circular visual styles. Capable of representing determinate (known percentage) and indeterminate (loading) states with customizable delays for showing/hiding.
+Features horizontal bars (linear) and spinner rings (circular) with multiple indeterminate animation types. Includes advanced positioning (top, bottom, static), dense styling for compact UIs, and a point mode for minimal pulsating indicators.
+Controlled via the visible, value, and indeterminate props, with support for custom min/max bounds. Use for page-level loading bars, button action feedback, or inline file upload progress.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsRipple.ts

@@ -44,33 +44,9 @@ export const wikiDescriptionsRipple: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-**Note:** This is a low-level decorative component. You should not use it directly.
-          It is automatically integrated into interactive components like \`Button\`, \`ListItem\`,
-          and \`Card\` to provide feedback. This documentation is for informational purposes.
-
-Ripple is a decorative component that adds a Material Design-style wave effect to provide
-visual feedback on user interaction (clicks, taps). It should be placed inside an interactive container.
-
-**Key Features:**
-1.  **Placement:** It is designed to be placed as the last child inside a host element
-                   (like a button, card, or list item). The host element MUST have \`position:
-                   relative\` and \`overflow: hidden\` for the effect to work correctly.
-
-2.  **Automatic Effect:** The ripple animation starts automatically from the point of a \`pointerdown\`
-                          event (click or tap) on its parent container.
-
-3.  **Self-Managing:** The component handles the creation, animation (expansion and fade-out),
-                       and removal of ripple elements from the DOM automatically.
-
-4.  **Styling:** The ripple's color is determined by the CSS \`color\` property of its host element
-                 (\`currentColor\`). It can be styled by changing the text color of the parent.
-
-5.  **Control:** The effect can be completely disabled by passing the \`disabled: true\` prop.
-
-**When to Use:**
-- Use inside buttons, cards, list items, or any other clickable surface to provide clear,
-  tangible feedback that the user's action was registered.
-- It is purely a visual enhancement and adds no functionality on its own.
-`
+Low-level decorative utility that provides Material Design-style visual feedback on user interactions. Automatically generates a dynamic wave effect at the exact coordinates of a pointerdown event within its parent container.
+Features automated animation lifecycle management, including expansion, fade-out, and DOM cleanup. Inherits visual styling directly from the host element via currentColor and requires the parent to have relative positioning and hidden overflow to function correctly.
+Primarily integrated within interactive components like Buttons, ListItems, and Cards; should generally not be manually implemented. Controlled via the disabled prop, serving as a subtle but high-polish affordance for touch and click actions.
+    `
   }
 }

package/src/media/descriptions/wikiDescriptionsScrollbar.ts

@@ -72,47 +72,40 @@ export const wikiDescriptionsScrollbar: StorybookComponentsDescriptionItem = {
 <div :class="classDemo.item">
   <Scrollbar v-bind="args" style="height: 128px">
     <h3>Modern Web Interfaces and User Experience Design</h3>
-    <p>In today's digital landscape, creating high-quality user interfaces has become a critical aspect of web application development. User interface components must not only be functional but also provide intuitive interaction patterns that enhance the overall user experience. The evolution of web technologies has enabled developers to create more sophisticated and engaging interfaces.</p>
-
-    <p>Scrollbars play a particularly important role in content navigation and information architecture. They allow users to easily navigate through large volumes of information while maintaining context and orientation within the document structure. Modern scrollbars should be adaptive, responsive, and visually appealing while providing consistent behavior across different platforms and devices.</p>
+    <p>In today's digital landscape, creating high-quality user
+    interfaces has become a critical aspect of web application development.
+    User interface components must not only be functional but also provide
+    intuitive interaction patterns that enhance the overall user experience.
+    The evolution of web technologies has enabled developers to create more
+    sophisticated and engaging interfaces.</p>
+
+    <p>Scrollbars play a particularly important role in content navigation
+    and information architecture. They allow users to easily navigate through
+    large volumes of information while maintaining context and orientation within
+    the document structure. Modern scrollbars should be adaptive, responsive,
+    and visually appealing while providing consistent behavior across different
+    platforms and devices.</p>
 
     <h4>Principles of Effective Design Implementation</h4>
-    <p>Effective scrollbar design takes into account multiple factors ranging from performance optimization to accessibility compliance. It's essential to ensure smooth animations, proper handling of various input devices, and comprehensive keyboard navigation support. Cross-browser compatibility remains a top priority, especially when dealing with custom scrollbar implementations that need to work consistently across different rendering engines.</p>
-
-    <p>Users expect scrollbars to work predictably and uniformly throughout all parts of an application. This requires thorough testing and optimization for various usage scenarios, including mobile devices, desktop computers, and touch-enabled interfaces. The component must handle edge cases gracefully and provide appropriate feedback for user interactions.</p>
+    <p>Effective scrollbar design takes into account multiple factors ranging
+    from performance optimization to accessibility compliance. It's essential
+    to ensure smooth animations, proper handling of various input devices, and
+    comprehensive keyboard navigation support. Cross-browser compatibility remains
+    a top priority, especially when dealing with custom scrollbar implementations
+    that need to work consistently across different rendering engines.</p>
+
+    <p>Users expect scrollbars to work predictably and uniformly throughout
+    all parts of an application. This requires thorough testing and optimization
+    for various usage scenarios, including mobile devices, desktop computers,
+    and touch-enabled interfaces. The component must handle edge cases gracefully
+    and provide appropriate feedback for user interactions.</p>
   </Scrollbar>
 </div>
     `,
     description: `
-Scrollbar is a structural component that wraps content to provide custom scrolling behavior and visual indicators.
-It is designed to handle overflow content within a fixed-height container, adding dynamic dividers (borders) that indicate scroll position.
-
-**Key Features:**
-1. **Scroll Indicators (Dividers):**
-   - Automatically detects scroll position.
-   - Displays a top divider when scrolled down.
-   - Displays a bottom divider when there is more content below.
-   - Configurable via props (e.g., \`divider\`, \`border\`).
-
-2. **Layout:**
-   - Renders as a block container (default \`div\`).
-   - Must have a defined height or max-height (inherited or set) to enable scrolling.
-
-3. **Usage:**
-   - Essential for **Modals**, **Dropdowns**, and **Sidebars** where content length varies.
-   - Provides visual cues to users that more content is available.
-
-**Usage Examples:**
-
-- **Basic Scroll Area:**
-  \`<Scrollbar style="height: 200px">
-     <p>Long content...</p>
-   </Scrollbar>\`
-
-- **With Custom Tag:**
-  \`<Scrollbar tag="section" class="my-scroll-area">
-     <List :list="items" />
-   </Scrollbar>\`
+Structural container that provides custom scrolling behavior and visual status indicators (borders/dividers) based on content overflow. Essential for maintaining spatial context in fixed-height areas like menus, modals, and sidebars.
+Features dynamic scroll position detection to show/hide top and bottom dividers based on visibility of content edges. Supports custom border styling, inverse divider logic, and specialized visibility controls for different scroll states.
+Controlled via the tag and divider props, requiring a defined height or max-height to enable active scrolling. Use as a base wrapper for any dense content block requiring clear visual cues that more data is available above or below.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsSection.ts

@@ -51,22 +51,13 @@ export const wikiDescriptionsSection: StorybookComponentsDescriptionItem = {
         ru: 'Базовые'
       },
       template: `
-        <div class="wiki-storybook-flex-column">
-          <DesignComponent>
-            <p>Generic section content without header.</p>
-          </DesignComponent>
-          <DesignComponent label="Contact Information" description="Get in touch with us">
-            <p>Email: support@example.com</p>
-            <p>Phone: +1 234 567 890</p>
-          </DesignComponent>
-          <DesignComponent headline="Our Services" label="What we do">
-            <ul>
-              <li>Web Development</li>
-              <li>Mobile Apps</li>
-              <li>UI/UX Design</li>
-            </ul>
-          </DesignComponent>
-        </div>
+        <DesignComponent
+          headline="User Profile Settings"
+          label="Personalization"
+          description="Customize your experience and notification preferences."
+        >
+          <p>This section allows you to manage your personal display settings, theme selection, and language preferences. Changes are saved automatically as you update them.</p>
+        </DesignComponent>
       `
     },
     {
@@ -91,6 +82,8 @@ export const wikiDescriptionsSection: StorybookComponentsDescriptionItem = {
     body: `
 <StorybookDescriptions componentName={'Section'} type={'block'}/>
 <Canvas of={Component.SectionBasic}/>
+
+<StorybookDescriptions componentName={'Block'} type={'differences'}/>
 `,
     slots: `
 <Canvas of={Component.SectionSlots}/>
@@ -115,38 +108,9 @@ export const wikiDescriptionsSection: StorybookComponentsDescriptionItem = {
 </div>
     `,
     description: `
-Section is a structural component used to divide a page into distinct thematic areas.
-It is a semantic alias for the \`Block\` component, inheriting all its layout and styling capabilities.
-
-**Key Features:**
-1. **Structure:**
-   - **Headline:** Top-level category text (\`headline\`).
-   - **Header:** Contains Icon, Label (Title), Caption, and Trailing actions.
-   - **Description:** Subtitle or explanatory text.
-   - **Content:** The main body of the section.
-
-2. **Usage:**
-   - Use \`Section\` to group related content within a Page.
-   - It provides a consistent header structure for page blocks.
-
-3. **Props & Slots:**
-   - Inherits all props from \`Block\` (\`label\`, \`icon\`, \`tag\`, etc.).
-   - Supports slots: \`#headline\`, \`#trailing\`, \`#default\`.
-
-**Usage Examples:**
-
-- **Standard Section:**
-  \`<Section headline="Account" label="Profile Settings">
-     <ProfileForm />
-   </Section>\`
-
-- **Section with Actions:**
-  \`<Section label="Recent Activity">
-     <template #trailing>
-       <button>View All</button>
-     </template>
-     <ActivityList />
-   </Section>\`
+Structural component used to divide a page into distinct thematic areas, serving as a semantic alias for the Block component. Provides a standardized header structure for grouping related content within a coherent layout.
+Features a flexible header with support for icons, labels (titles), captions, and trailing action areas. Inherits all layout and styling capabilities from the Block component, including support for custom semantic tags (defaulting to <section>) and high-level category headlines.
+Controlled via headline, label, and icon props, with dedicated slots for primary content and secondary actions. Use to logically organize and category-label information within the flow of a Page or complex Dashboard.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsSelect.ts

@@ -114,38 +114,45 @@ export const wikiDescriptionsSelect: StorybookComponentsDescriptionItem = {
         ru: 'Двусторонняя привязка (v-model)'
       },
       setup: `
-      return {
-        singleValue: ref('option2'),
-        multipleValue: ref(['option1', 'option3'])
-      }
+      const valueSingle = ref('option2')
+      const valueMultiple = ref(['option1', 'option3'])
+      const options = [
+        { label: 'First option', value: 'option1' },
+        { label: 'Second option', value: 'option2' },
+        { label: 'Third option', value: 'option3' }
+      ]
+
+      return { valueSingle, valueMultiple, options }
       `,
       template: `
         <div class="wiki-storybook-flex-column">
+          <div class="wiki-storybook-flex-align-center">
+            <span>Value: <strong>{{ valueSingle }}</strong></span>
+            <button class="wiki-storybook-button" @click="valueSingle = 'option1'">option 1</button>
+            <button class="wiki-storybook-button" @click="valueSingle = 'option2'">option 2</button>
+            <button class="wiki-storybook-button" @click="valueSingle = 'option3'">option 3</button>
+          </div>
+
           <DesignComponent
-            v-model="singleValue"
+            v-model="valueSingle"
             type="select"
             label="Single select"
-            arrow="carousel"
-            :option="[
-              {label: 'First option', value: 'option1'},
-              {label: 'Second option', value: 'option2'},
-              {label: 'Third option', value: 'option3'}
-            ]"
+            :option="options"
           />
-          <div>Selected: {{ singleValue }}</div>
+
+          <div class="wiki-storybook-flex-align-center">
+            <span>Value: <strong>{{ valueMultiple }}</strong></span>
+            <button class="wiki-storybook-button" @click="valueMultiple = ['option1', 'option2']">option 1, 2</button>
+            <button class="wiki-storybook-button wiki-storybook-button--warning" @click="valueMultiple = []">Clear</button>
+          </div>
 
           <DesignComponent
-            v-model="multipleValue"
+            v-model="valueMultiple"
             type="select"
             label="Multiple select"
             multiple
-            :option="[
-              {label: 'First option', value: 'option1'},
-              {label: 'Second option', value: 'option2'},
-              {label: 'Third option', value: 'option3'}
-            ]"
+            :option="options"
           />
-          <div>Selected: {{ multipleValue }}</div>
         </div>
       `
     },
@@ -208,46 +215,9 @@ export const wikiDescriptionsSelect: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-The select is a comprehensive form component used for choosing one or multiple values from a collection of options.
-It integrates a trigger field, a dropdown menu, and value display logic into a single cohesive control.
-
-**Key Features:**
-1. **Data Handling (\`option\`):**
-   - **Static Data:** Accepts an array of objects or strings via the \`option\` prop.
-   - **Mapping:** Use \`keyLabel\` and \`keyValue\` to specify which properties to use for display and value (defaults to 'label' and 'value').
-   - **Async Data:** Use the \`ajax\` prop to provide a function that returns a Promise with the list of options. Supports caching via \`cache\`.
-
-2. **Selection Modes:**
-   - **Single Selection:** Default. Displays the selected item's label as text.
-   - **Multiple Selection (\`multiple\`):** Allows selecting multiple items. Displays them as Chips. Use \`max\` to limit the number of selections.
-   - **Editable (\`editValue\`):** Allows the user to type into the input field, acting like a Combobox.
-
-3. **Search & Filtering:**
-   - **Filter Mode (\`filterMode\`):** Filters the list options in real-time as the user types.
-   - **Show Search (\`showSearch\`):** Adds a dedicated search input field inside the dropdown menu (useful for mobile or when \`editValue\` is false).
-
-4. **Appearance & Feedback:**
-   - **Field Integration:** Inherits all \`Field\` styling props (\`label\`, \`helperMessage\`, \`validationMessage\`, \`icon\`, \`loading\`).
-   - **Placeholder:** Text shown when no value is selected.
-   - **Cancel:** The \`cancel\` prop controls the visibility of the clear button ('auto', 'always', 'none').
-
-**Usage Examples:**
-
-- **Standard Select:**
-  \`<Select label="Choose a fruit" :option="['Apple', 'Banana', 'Orange']" />\`
-
-- **Multiple Select with Object Data:**
-  \`<Select
-      label="Assignees"
-      multiple
-      :option="users"
-      key-label="name"
-      key-value="id"
-      v-model="selectedUserIds"
-   />\`
-
-- **Searchable Select:**
-  \`<Select label="Country" :option="countries" filter-mode />\`
+High-level form control that combines a trigger field, a dropdown menu, and a structured value display (Chips or text). Designed for choosing single or multiple items from static lists or dynamic datasets with built-in search and filtering.
+Features support for AJAX data loading with caching, multiple selection with chips, and an editable combobox mode (editValue). Includes integrated validation, keyboard navigation, and full Field component functionality (labels, icons, and state messages).
+Controlled via the option prop for data and v-model for state tracking, supporting custom key mapping (keyLabel/keyValue). Use for user selection, category filtering, or complex multi-select interfaces requiring real-time search.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsSelectValue.ts

@@ -77,31 +77,9 @@ export const wikiDescriptionsSelectValue: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-SelectValue is a specialized display component used primarily within Select-like inputs to render the selected value(s).
-It handles the visual representation of selection, switching between a simple text label (single selection) and a group of chips (multiple selection).
-
-**Key Features:**
-1. **Display Modes:**
-   - **Single Selection (default):** Renders the label of the first item in the \`value\` array as text.
-   - **Multiple Selection (\`multiple\`):** Renders each item in the \`value\` array as a \`Chip\` component.
-
-2. **Data Handling (\`value\`):**
-   - Accepts an array of objects: \`[{ label: 'Text', value: 'val', ... }]\`.
-   - Even for single selection, it expects an array (uses the first item).
-   - If \`value\` is empty, it displays the \`placeholder\`.
-
-3. **Chip Customization (Multiple Mode):**
-   - \`chipAttrs\`: Allows passing props to the internal \`Chip\` components (e.g., \`{ outline: true, icon: 'check' }\`).
-   - Handles chip removal events automatically if not disabled/readonly.
-
-**When to use:**
-- Inside the trigger area of a **Select**, **Combobox**, or **Autocomplete** component.
-- To display a list of selected tags or tokens.
-
-**Usage Examples:**
-
-- **Multiple Values (Chips):**
-  \`<SelectValue multiple :value="[{ label: 'Apple' }, { label: 'Banana' }]" />\`
+Specialized display engine used within Select, Combobox, or Autocomplete controls to render selected state. Dynamically switches between a simple text label for single selection and a group of Chips for multiple selection.
+Features automated Chip management, including removal event handling and integration with the Select data model. Supports empty state placeholders, custom Chip attributes (icons, outlines), and handles disabled/readonly states to prevent interaction.
+Controlled via the multiple and value props, requiring an array of objects even for single selection. Use as a foundational element when building custom selection fields requiring standardized token-based or text-based value representation.
     `
   }
 }

package/src/media/descriptions/wikiDescriptionsSkeleton.ts

@@ -132,43 +132,9 @@ export const wikiDescriptionsSkeleton: StorybookComponentsDescriptionItem = {
   },
   ai: {
     description: `
-Skeleton is a structural component used to display a loading state (placeholder) for content.
-It creates an animated "ghost" version of the UI to improve perceived performance and prevent layout shifts (CLS).
-
-**Key Features:**
-1. **Activation (\`active\`):**
-   - The \`active\` prop controls the visibility of the skeleton effect.
-   - When \`true\`, the component applies loading styles and accessibility attributes.
-
-2. **Context & Inheritance:**
-   - Uses Vue's \`provide\`/\`inject\` mechanism.
-   - Child components (like \`Image\`, \`Field\`, \`Chip\`) automatically detect if they are inside an active \`Skeleton\` and switch to their own skeleton view without needing individual props.
-
-3. **Styling Classes (Slot Props):**
-   - The component exposes CSS classes via the default slot to style raw HTML elements.
-   - **Text:** \`classText\` (lines), \`classTextVariant\` (headings).
-   - **Background:** \`classBackground\` (blocks, images), \`classBackgroundVariant\`.
-   - **Border:** \`classBorder\` (outlines).
-
-4. **Accessibility:**
-   - Automatically applies \`aria-busy="true"\` and \`aria-live="polite"\` to the wrapper.
-
-**Usage Examples:**
-
-- **Wrapping Smart Components:**
-  \`<Skeleton :active="isLoading">
-     <div class="profile">
-       <Image :value="user.avatar" /> <!-- Auto-skeleton -->
-       <Field :value="user.name" readonly /> <!-- Auto-skeleton -->
-     </div>
-   </Skeleton>\`
-
-- **Manual Structure (using slot classes):**
-  \`<Skeleton :active="isLoading" v-slot="{ classes }">
-     <div :class="classes.classBackground" style="height: 200px"></div>
-     <h3 :class="classes.classTextVariant"></h3>
-     <p :class="classes.classText"></p>
-   </Skeleton>\`
+Structural layout utility designed to display animated loading placeholders (ghost versions) for UI elements. Improves perceived performance and prevents Cumulative Layout Shift (CLS) by reserving space for incoming content.
+Features a logic-sharing mechanism via provide/inject that allows child components (Field, Image, Chip) to automatically switch to their skeleton states without individual props. Exposes specialized CSS classes through slot props for styling raw HTML elements as text lines, backgrounds, or borders.
+Controlled via the active prop to toggle the global loading state and accessibility Busy/Live attributes. Use as a wrapper for sections or entire pages during data fetching to maintain structural integrity and a high-quality user experience.
     `
   }
 }