Pull request #72: Add toast documentation

Merge in DEV/colibri-docs from feature/EOA4108-add_toast_documentation to release/current

* commit 'd1721cbbbd65d32d6988e8f317949a65c21736f3':
  EOA-4108: update stories naming and dynamic permalink title
  Fix merge
  Fix 'show toast' button
  Add improvements
  Add toast docuemntation
  Add improvements
  Add toast docuemntation

Author: jmartinez-telesign

src/components/col-toast/col-toast.mdx

@@ -0,0 +1,133 @@
+import { Meta, Title, Subtitle, Canvas, Story, ArgTypes } from '@storybook/blocks';
+import * as ColToastStories from './col-toast.stories';
+import LinkTo from '@storybook/addon-links/react';
+
+<Meta of={ColToastStories} />
+
+<div className="col-doc__wrapper">
+  <div className="col-doc__container">
+
+    <Title>Toast</Title>
+
+    The `col-toast` component displays temporary notifications to inform users about recent events, states, or actions.
+
+    <Subtitle>Table of contents</Subtitle>
+    - [How to use it](#how-to-use-it)
+    - [When to use it](#when-to-use-it)
+    - [Component preview](#component-preview)
+    - [Variants](#variants)
+    - [Types](#types)
+    - [Using slots](#using-slots)
+    - [Custom duration](#custom-duration)
+    - [Accessibility](#accessibility)
+    - [Properties](#properties)
+    - [Interact with the component](#interact-with-the-component)
+
+    ## How to use it
+
+    1. Install the package:
+    ```bash
+    npm install @telesign/colibri
+    ```
+
+    2. Import dependencies:
+    ```ts
+    import { registerColibriComponents, ColToast } from '@telesign/colibri';
+    import '@telesign/colibri/styles/styles.css';
+    ```
+
+    3. Register the component:
+    ```typescript
+    // Option 1: Register specific components
+    registerColibriComponents([ColToast]);
+
+    // Option 2: Register all Colibri components
+    registerAllComponents();
+    ```
+
+    4. Use it in your HTML:
+    ```html
+    <col-toast
+      variant="information"
+      type="informative"
+      open
+    >
+      <col-typography variant="subheading" slot="title">Notification</col-typography>
+      <div>This is an informational message.</div>
+    </col-toast>
+    ```
+
+    ## When to use it
+
+    Use `col-toast` to:
+
+    - Show temporary messages that don’t interrupt the user experience.
+    - Alert about errors, warnings, or important information.
+    - Confirm actions with visual feedback.
+
+    ## Component preview
+
+    <Canvas of={ColToastStories.Default} />
+
+    ## Variants
+
+    Variants control the visual style and icon:
+
+    - **Information**: General informational messages.
+    - **Success**: Confirm successful actions.
+    - **Warning**: Alerts that require attention.
+    - **Danger**: Errors or critical alerts.
+
+    <Canvas of={ColToastStories.Default} />
+    <Canvas of={ColToastStories.Success} />
+    <Canvas  of={ColToastStories.Warning}/>
+    <Canvas of={ColToastStories.Danger} />
+
+    ## Types
+
+    Control behavior and interaction:
+
+    - **Informative**: Automatically closes after the specified `duration` in seconds (clamped between 3 and 6 seconds).
+    - **Action-close**: Requires manual closing by the user via a close button.
+
+    <Canvas of={ColToastStories.Autoclose} />
+    <Canvas of={ColToastStories.ActionClose} />
+
+    ## Using slots
+
+    `col-toast` provides several slots for customization:
+
+    - `icon`: Replaces the default icon.
+    - `title`: Short title text.
+    - Default slot: Main content / description.
+
+    Example with all slots used:
+
+    <Canvas of={ColToastStories.SlotsExample} />
+
+    ## Custom duration
+
+    The `duration` property controls how long the toast stays visible (in seconds). It applies mainly to the `informative` type.
+
+    Example custom duration of 10 seconds:
+    <Canvas of={ColToastStories.InformationCustomDuration} />
+
+    ## Accessibility
+
+    The component is designed with accessibility in mind:
+
+    - Uses ARIA roles `alert` for `warning` and `danger` variants to ensure urgent announcements.
+    - Uses ARIA role `status` for informational variants for polite screen reader updates.
+    - Supports `aria-live` for dynamic updates.
+    - Close button includes an accessible `aria-label`.
+    - Fully keyboard navigable with support for `Enter` and `Space` keys.
+
+    ## Properties
+
+    <ArgTypes of={ColToastStories} />
+
+    ## Interact with the component
+
+    You can test the toast's behavior, variants, types, and slots interactively in the <LinkTo title={ColToastStories.default.title}  story="default">Default</LinkTo> section below.
+  </div>
+</div>